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

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"
+  ]
+}