Introduced responsive layout utilities and directives for Angular.

- ✨ **Feature**: Added breakpoint utility for responsive design
- ✨ **Feature**: Implemented BreakpointDirective for conditional rendering
- 🛠️ **Refactor**: Updated styles for filter and order-by components
- 📚 **Docs**: Created README and documentation for ui-layout library
- ⚙️ **Config**: Added TypeScript and ESLint configurations for the new library

apps/isa-app/stories/ui/layout/breakpoint.mdx

@@ -0,0 +1,36 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="UI/Layout/Breakpoint" />
+
+# Breakpoint Utility
+
+The `breakpoint` utility allows you to create a Signal that evaluates to `true` if the current viewport matches the specified breakpoints.
+
+## Usage
+
+### Example
+
+```typescript
+import { Component } from '@angular/core';
+import { breakpoint, Breakpoint } from 'ui-layout';
+
+@Component({
+  selector: 'app-breakpoint-demo',
+  template: `
+    <div *uiBreakpoint="'tablet'">This content is visible only on tablet viewports.</div>
+  `,
+  imports: [BreakpointDirective],
+})
+export class BreakpointDemoComponent {
+  isTablet = breakpoint(Breakpoint.Tablet);
+}
+```
+
+### Breakpoints Table
+
+| Breakpoint   | CSS Media Query Selector                      |
+| ------------ | --------------------------------------------- |
+| `tablet`     | `(max-width: 1279px)`                         |
+| `desktop`    | `(min-width: 1280px) and (max-width: 1439px)` |
+| `desktop-l`  | `(min-width: 1440px) and (max-width: 1919px)` |
+| `desktop-xl` | `(min-width: 1920px)`                         |

jest.config.js

@@ -1,5 +0,0 @@
-const nxPreset = require('@nx/jest/preset').default;
-
-module.exports = {
-  ...nxPreset,
-};

libs/oms/feature/return-search/src/lib/return-search-result/return-search-result.component.html

@@ -12,18 +12,23 @@
       [rollbackOnClose]="true"
     ></filter-filter-menu-button>
 
-    @if (isMobileDevice()) {
-      <ui-icon-button (click)="toggleOrderByToolbar.set(!toggleOrderByToolbar())">
-        <ng-icon name="isaActionSort"></ng-icon>
-      </ui-icon-button>
-    } @else {
-      <filter-order-by-toolbar (toggled)="onSearch()"></filter-order-by-toolbar>
-    }
+    <button uiIconButton *uiBreakpoint="['tablet']" (click)="orderByVisible.set(!orderByVisible())">
+      <ng-icon name="isaActionSort"></ng-icon>
+    </button>
+
+    <filter-order-by-toolbar
+      *uiBreakpoint="['desktop', 'dekstop-l', 'dekstop-xl']"
+      (toggled)="onSearch()"
+    ></filter-order-by-toolbar>
   </div>
 </div>
 
-@if (isMobileDevice() && toggleOrderByToolbar()) {
-  <filter-order-by-toolbar class="w-full" (toggled)="onSearch()"></filter-order-by-toolbar>
+@if (orderByVisible()) {
+  <filter-order-by-toolbar
+    *uiBreakpoint="['tablet']"
+    class="w-full"
+    (toggled)="onSearch()"
+  ></filter-order-by-toolbar>
 }
 
 <span class="text-isa-neutral-900 isa-text-body-2-regular self-start">

libs/oms/feature/return-search/src/lib/return-search-result/return-search-result.component.ts

@@ -22,11 +22,11 @@ import {
 import { IconButtonComponent } from '@isa/ui/buttons';
 import { EmptyStateComponent } from '@isa/ui/empty-state';
 import { restoreScrollPosition } from '@isa/core/scroll-position';
-import { Platform } from '@angular/cdk/platform';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
 import { isaActionSort } from '@isa/icons';
 import { ReturnSearchEntity, ReturnSearchStatus, ReturnSearchStore } from '@isa/oms/data-access';
 import { ReturnSearchResultItemComponent } from './return-search-result-item/return-search-result-item.component';
+import { BreakpointDirective } from '@isa/ui/layout';
 
 type EmptyState = {
   title: string;
@@ -47,18 +47,20 @@ type EmptyState = {
     EmptyStateComponent,
     NgIconComponent,
     FilterMenuButtonComponent,
+    BreakpointDirective,
   ],
   providers: [provideIcons({ isaActionSort })],
 })
 export class ReturnSearchResultComponent {
   #route = inject(ActivatedRoute);
   #router = inject(Router);
-  #platform = inject(Platform);
 
   private _processId = injectActivatedProcessId();
   private _returnSearchStore = inject(ReturnSearchStore);
   private _filterService = inject(FilterService);
 
+  orderByVisible = signal(false);
+
   ReturnSearchStatus = ReturnSearchStatus;
 
   filterInputs = computed(() =>
@@ -94,9 +96,6 @@ export class ReturnSearchResultComponent {
 
   listElements = viewChildren<QueryList<ReturnSearchResultItemComponent>>('listElement');
 
-  isMobileDevice = signal(this.#platform.ANDROID || this.#platform.IOS);
-  toggleOrderByToolbar = signal(false);
-
   searchEffectFn = () =>
     effect(() => {
       const processId = this._processId();

libs/shared/filter/src/lib/menus/filter-menu/filter-menu-button.component.html

@@ -14,11 +14,15 @@
   [cdkConnectedOverlayOrigin]="trigger"
   [cdkConnectedOverlayOpen]="open()"
   [cdkConnectedOverlayHasBackdrop]="true"
-  [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
+  cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop "
   [cdkConnectedOverlayScrollStrategy]="scrollStrategy"
   [cdkConnectedOverlayOffsetX]="-10"
   [cdkConnectedOverlayOffsetY]="18"
   (backdropClick)="toggle()"
 >
-  <filter-filter-menu (applied)="applied.emit()" (reseted)="reseted.emit()"></filter-filter-menu>
+  <filter-filter-menu
+    class="shadow-[0px,0px,16px,0px,rgba(0, 0, 0, 0.15)]"
+    (applied)="applied.emit()"
+    (reseted)="reseted.emit()"
+  ></filter-filter-menu>
 </ng-template>

libs/shared/filter/src/lib/menus/filter-menu/filter-menu.component.scss

@@ -1,7 +1,7 @@
 :host {
-  @apply grid grid-flow-row;
+  @apply inline-flex flex-col;
   @apply bg-isa-white;
   @apply rounded-[1.25rem];
   @apply w-[14.3125rem] max-h-[33.5rem];
-  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.15);
+  @apply shadow-overlay;
 }

libs/shared/filter/src/lib/menus/input-menu/input-menu.component.scss

@@ -1,3 +1,4 @@
 :host {
-  @apply grid grid-flow-row bg-isa-white rounded-[1.25rem] shadow-[0px,0px,16px,0px,rgba(0,0,0,0.15)] max-h-[32.3rem];
+  @apply inline-flex flex-col;
+  @apply shadow-overlay bg-isa-white rounded-[1.25rem] max-h-[32.3rem];
 }

libs/shared/filter/src/lib/order-by/order-by-toolbar.component.html

@@ -3,7 +3,7 @@
   <div class="flex-grow"></div>
   @for (orderBy of orderByOptions(); track orderBy.by) {
     <button
-      class="flex gap-1 items-center"
+      class="flex flex-1 gap-1 items-center text-nowrap"
       uiTextButton
       type="button"
       (click)="toggleOrderBy(orderBy.by)"

libs/shared/filter/src/lib/order-by/order-by-toolbar.component.scss

@@ -0,0 +1,3 @@
+:host {
+  @apply inline-flex flex-col;
+}

libs/ui/layout/README.md

@@ -0,0 +1,47 @@
+# ui-layout
+
+This library provides utilities and directives for responsive design in Angular applications.
+
+## Features
+
+- **Breakpoint Utility**: A function to detect viewport breakpoints using Angular's `BreakpointObserver`.
+- **Breakpoint Directive**: A structural directive to conditionally render templates based on viewport breakpoints.
+
+## Installation
+
+Ensure you have Angular and its dependencies installed. Then, include this library in your Angular project.
+
+## Usage
+
+### Breakpoint Utility
+
+The `breakpoint` function allows you to create a Signal that evaluates to `true` if the current viewport matches the specified breakpoints.
+
+```typescript
+import { breakpoint, Breakpoint } from 'ui-layout';
+
+const isTablet = breakpoint(Breakpoint.Tablet);
+```
+
+### Breakpoint Directive
+
+The `uiBreakpoint` directive conditionally includes a template based on the viewport's breakpoint.
+
+```html
+<ng-container *uiBreakpoint="'tablet'">
+  This content is visible only on tablet viewports.
+</ng-container>
+```
+
+## Breakpoints Table
+
+| Breakpoint   | CSS Media Query Selector                      |
+| ------------ | --------------------------------------------- |
+| `tablet`     | `(max-width: 1279px)`                         |
+| `desktop`    | `(min-width: 1280px) and (max-width: 1439px)` |
+| `dekstop-l`  | `(min-width: 1440px) and (max-width: 1919px)` |
+| `dekstop-xl` | `(min-width: 1920px)`                         |
+
+## Running Unit Tests
+
+Run `nx test ui-layout` to execute the unit tests.

libs/ui/layout/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: 'ui',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'ui',
+          style: 'kebab-case',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.html'],
+    // Override or add rules here
+    rules: {},
+  },
+];

libs/ui/layout/jest.config.ts

@@ -0,0 +1,21 @@
+export default {
+  displayName: 'ui-layout',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../../coverage/libs/ui/layout',
+  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/ui/layout/project.json

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

libs/ui/layout/src/index.ts

@@ -0,0 +1,2 @@
+export * from './lib/breakpoint.directive';
+export * from './lib/breakpoint';

libs/ui/layout/src/lib/breakpoint.directive.ts

@@ -0,0 +1,50 @@
+import { Directive, TemplateRef, ViewContainerRef, effect, inject, input } from '@angular/core';
+import { Breakpoint, breakpoint } from './breakpoint';
+
+/**
+ * Structural directive that conditionally includes a template based on the viewport's breakpoint.
+ *
+ * @example
+ * ```html
+ * <ng-container *uiBreakpoint="'tablet'">
+ *   This content is visible only on tablet viewports.
+ * </ng-container>
+ * ```
+ */
+@Directive({
+  selector: '[uiBreakpoint]',
+})
+export class BreakpointDirective {
+  private readonly viewContainer = inject(ViewContainerRef);
+  private readonly templateRef = inject(TemplateRef);
+
+  /**
+   * Input property to specify the breakpoint(s) for the directive.
+   * Accepts a single Breakpoint or an array of Breakpoints.
+   */
+  uiBreakpoint = input.required<Breakpoint | Breakpoint[]>();
+
+  /**
+   * Signal that evaluates to `true` if the current viewport matches the specified breakpoint(s).
+   */
+  matches = breakpoint(this.uiBreakpoint);
+
+  constructor() {
+    effect(() => {
+      this.updateView(this.matches());
+    });
+  }
+
+  /**
+   * Updates the view based on whether the viewport matches the specified breakpoint(s).
+   *
+   * @param matches - Boolean indicating if the viewport matches the breakpoint(s).
+   */
+  private updateView(matches: boolean | undefined): void {
+    if (matches) {
+      this.viewContainer.createEmbeddedView(this.templateRef);
+    } else {
+      this.viewContainer.clear();
+    }
+  }
+}

libs/ui/layout/src/lib/breakpoint.ts

@@ -0,0 +1,87 @@
+import { inject, isSignal, Signal } from '@angular/core';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { exhaustMap, isObservable, map, Observable, of, startWith } from 'rxjs';
+import { toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { coerceArray } from '@angular/cdk/coercion';
+
+/**
+ * Enum-like object defining various breakpoints for responsive design.
+ */
+export const Breakpoint = {
+  Tablet: 'tablet',
+  Desktop: 'desktop',
+  DekstopL: 'dekstop-l',
+  DekstopXL: 'dekstop-xl',
+} as const;
+
+/**
+ * Type representing the possible values of the Breakpoint object.
+ */
+export type Breakpoint = (typeof Breakpoint)[keyof typeof Breakpoint];
+
+/**
+ * Mapping of Breakpoint values to their corresponding CSS media query selectors.
+ */
+const BreakpointSelector = {
+  [Breakpoint.Tablet]: '(max-width: 1279px)',
+  [Breakpoint.Desktop]: '(min-width: 1280px) and (max-width: 1439px)',
+  [Breakpoint.DekstopL]: '(min-width: 1440px) and (max-width: 1919px)',
+  [Breakpoint.DekstopXL]: '(min-width: 1920px)',
+};
+
+/**
+ * Observes viewport breakpoints and returns an Observable that emits whether the specified breakpoints match.
+ *
+ * This function accepts a Breakpoint, an array of Breakpoints, a Signal, or an Observable thereof and returns
+ * an Observable that emits a boolean indicating if the given breakpoints match the current viewport.
+ *
+ * @param breakpoints - A Breakpoint, array of Breakpoints, Signal, or Observable representing breakpoints.
+ * @returns An Observable that emits a boolean indicating if the specified breakpoints match.
+ */
+export function breakpoint$(
+  breakpoints:
+    | (Breakpoint | Breakpoint[])
+    | Signal<Breakpoint | Breakpoint[]>
+    | Observable<Breakpoint | Breakpoint[]>,
+): Observable<boolean> {
+  const bpObserver = inject(BreakpointObserver);
+
+  const breakpoints$ = isObservable(breakpoints)
+    ? breakpoints
+    : isSignal(breakpoints)
+      ? toObservable(breakpoints)
+      : of(breakpoints);
+
+  const breakpointSelectors$ = breakpoints$.pipe(
+    map((bp) => coerceArray(bp).map((b) => BreakpointSelector[b])),
+  );
+
+  const match$ = breakpointSelectors$.pipe(
+    exhaustMap((selectors) =>
+      bpObserver.observe(selectors).pipe(
+        map((result) => result.matches),
+        startWith(bpObserver.isMatched(selectors)),
+      ),
+    ),
+  );
+  return match$;
+}
+
+/**
+ * Converts the breakpoint$ Observable into a Signal to provide reactive breakpoint matching.
+ *
+ * This function wraps the breakpoint$ function, converting its Observable result into a Signal,
+ * which can be used with Angular's reactive system. The Signal returns a boolean indicating whether
+ * the specified breakpoints currently match or undefined if not yet determined.
+ *
+ * @param breakpoints - A Breakpoint, array of Breakpoints, Signal, or Observable representing breakpoints.
+ * @returns A Signal<boolean | undefined> indicating the match state of the breakpoints.
+ */
+export function breakpoint(
+  breakpoints:
+    | (Breakpoint | Breakpoint[])
+    | Signal<Breakpoint | Breakpoint[]>
+    | Observable<Breakpoint | Breakpoint[]>,
+): Signal<boolean | undefined> {
+  return toSignal(breakpoint$(breakpoints));
+}

libs/ui/layout/src/test-setup.ts

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

libs/ui/layout/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/ui/layout/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/ui/layout/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"
+  ]
+}

tailwind.config.js

@@ -226,6 +226,7 @@ module.exports = {
         'card': '0px -2px 24px 0px rgba(220, 226, 233, 0.8)',
         'cta': '0px 0px 15px 0px rgba(0, 0, 0, 0.5)',
         'action': '0 0 20px 0 #596470',
+        'overlay': '0px 0px 16px 0px rgba(0, 0, 0, 0.15)',
       },
       borderRadius: {
         DEFAULT: '0.3125rem',

tsconfig.base.json

@@ -65,6 +65,7 @@
       "@isa/ui/empty-state": ["libs/ui/empty-state/src/index.ts"],
       "@isa/ui/input-controls": ["libs/ui/input-controls/src/index.ts"],
       "@isa/ui/item-rows": ["libs/ui/item-rows/src/index.ts"],
+      "@isa/ui/layout": ["libs/ui/layout/src/index.ts"],
       "@isa/ui/progress-bar": ["libs/ui/progress-bar/src/index.ts"],
       "@isa/ui/search-bar": ["libs/ui/search-bar/src/index.ts"],
       "@isa/ui/toolbar": ["libs/ui/toolbar/src/index.ts"],