feat: add pagination support to query token schema with skip and take fields

feat: enhance return search component to handle search callbacks and update query parameters

fix: update return search result component template to use new search method and improve loading states

refactor: streamline return search result component logic and improve state management

feat: implement scroll position restoration in return search feature

feat: introduce filter service enhancements for query settings and synchronization with URL parameters

chore: create utils for scroll position management and viewport detection

fix: update filter service to use new input and query settings types

chore: add tests and configurations for new utils library

ref: #5033

libs/utils/scroll-position/README.md

@@ -0,0 +1,7 @@
+# utils-scroll-position
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test utils-scroll-position` to execute the unit tests.

libs/utils/scroll-position/eslint.config.mjs

@@ -0,0 +1,34 @@
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../../eslint.config.mjs';
+
+export default [
+  ...baseConfig,
+  ...nx.configs['flat/angular'],
+  ...nx.configs['flat/angular-template'],
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'util',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'util',
+          style: 'kebab-case',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.html'],
+    // Override or add rules here
+    rules: {},
+  },
+];

libs/utils/scroll-position/jest.config.ts

@@ -0,0 +1,21 @@
+export default {
+  displayName: 'utils-scroll-position',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../../coverage/libs/utils/scroll-position',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

libs/utils/scroll-position/project.json

@@ -0,0 +1,20 @@
+{
+  "name": "utils-scroll-position",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/utils/scroll-position/src",
+  "prefix": "lib",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/utils/scroll-position/jest.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}

libs/utils/scroll-position/src/index.ts

@@ -0,0 +1,2 @@
+export * from './lib/scroll-position-restoration';
+export * from './lib/scrolled-into-viewport.directive';

libs/utils/scroll-position/src/lib/scroll-position-restoration.ts

@@ -0,0 +1,71 @@
+import { ViewportScroller } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {
+  afterRender,
+  EnvironmentProviders,
+  inject,
+  Injector,
+  provideEnvironmentInitializer,
+} from '@angular/core';
+import { ActivatedRoute, NavigationStart, Router } from '@angular/router';
+import { SessionStorageProvider } from '@isa/core/storage';
+
+// const route: Route = {
+//     component: AnyComponent,
+//     data: {
+//         scrollPositionRestoration: true
+//     }
+// }
+
+const getDeepestActivatedRoute = (route: ActivatedRoute): ActivatedRoute => {
+  while (route.firstChild) {
+    route = route.firstChild;
+  }
+  return route;
+};
+
+export function provideScrollPositionRestoration(): EnvironmentProviders {
+  return provideEnvironmentInitializer(() => {
+    const router = inject(Router);
+    const viewportScroller = inject(ViewportScroller);
+    const sessionStorage = inject(SessionStorageProvider);
+
+    router.events.pipe(takeUntilDestroyed()).subscribe((event) => {
+      if (event instanceof NavigationStart) {
+        const url = router.url;
+        const route = getDeepestActivatedRoute(router.routerState.root);
+
+        if (route.snapshot.data?.['scrollPositionRestoration']) {
+          sessionStorage.set(url, viewportScroller.getScrollPosition());
+        }
+      }
+    });
+  });
+}
+
+export async function storeScrollPosition() {
+  const router = inject(Router);
+  const viewportScroller = inject(ViewportScroller);
+  const sessionStorage = inject(SessionStorageProvider);
+
+  const url = router.url;
+  sessionStorage.set(url, viewportScroller.getScrollPosition());
+}
+
+export function injectRestoreScrollPosition(): () => Promise<void> {
+  const router = inject(Router);
+  const viewportScroller = inject(ViewportScroller);
+  const sessionStorage = inject(SessionStorageProvider);
+
+  return async (delay = 0) => {
+    const url = router.url;
+    const position = await sessionStorage.get(url);
+
+    if (position) {
+      // wait for the next tick to ensure the DOM is ready
+      await new Promise((r) => setTimeout(r, delay));
+
+      viewportScroller.scrollToPosition(position as [number, number]);
+    }
+  };
+}

libs/utils/scroll-position/src/lib/scrolled-into-viewport.directive.ts

@@ -0,0 +1,38 @@
+import { Directive, ElementRef, AfterViewInit, OnDestroy, output } from '@angular/core';
+
+@Directive({
+  selector: '[utilScrolledIntoViewport]',
+})
+export class ScrolledIntoViewportDirective implements AfterViewInit, OnDestroy {
+  /**
+   * Emits true when the element enters the viewport and false when it leaves.
+   */
+  scrolledIntoViewport = output<boolean>({ alias: 'utilScrolledIntoViewport' });
+
+  private observer: IntersectionObserver | null = null;
+
+  constructor(private elementRef: ElementRef<HTMLElement>) {}
+
+  ngAfterViewInit(): void {
+    this.observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            this.scrolledIntoViewport.emit(true);
+          } else {
+            this.scrolledIntoViewport.emit(false);
+          }
+        });
+      },
+      { threshold: [0, 0.1, 0.5, 1.0] },
+    );
+
+    this.observer.observe(this.elementRef.nativeElement);
+  }
+
+  ngOnDestroy(): void {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+}

libs/utils/scroll-position/src/test-setup.ts

@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+  errorOnUnknownElements: true,
+  errorOnUnknownProperties: true,
+});

libs/utils/scroll-position/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

libs/utils/scroll-position/tsconfig.lib.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/test-setup.ts",
+    "jest.config.ts",
+    "src/**/*.test.ts"
+  ],
+  "include": ["src/**/*.ts"]
+}

libs/utils/scroll-position/tsconfig.spec.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}