@odx/angular 6.0.0 → 6.1.0

package/fesm2022/odx-angular-breakpoints.mjs

@@ -4,6 +4,25 @@ import { inject, Injectable, TemplateRef, ViewContainerRef, Directive, Input, Ng
 import { of, map, distinctUntilChanged, shareReplay, BehaviorSubject, switchMap, tap } from 'rxjs';
 import { BreakpointObserver } from '@angular/cdk/layout';
 
+/**
+ * Generates a configuration object containing CSS media query strings for a named breakpoint.
+ * The function creates media queries for three scenarios: below (`<`), exactly (`=`), and above (`>`) the specified breakpoint.
+ *
+ * @template T - The string literal type representing the name of the breakpoint.
+ * @param {T} name - The name of the breakpoint (e.g., 'md' for medium).
+ * @param {number} min - The minimum width (inclusive) where the breakpoint starts.
+ * @param {number} max - The maximum width (exclusive) where the breakpoint ends.
+ * @returns {BreakpointConfig<T>} An object containing media query strings for targeting screen sizes relative to the breakpoint.
+ *
+ * @example
+ * ```ts
+ * // Define a medium (md) breakpoint
+ * const mdBreakpoint = configureBreakpoint('md', 768, 1024);
+ * console.log(mdBreakpoint['<md']); // Outputs: "(max-width: 767px)"
+ * console.log(mdBreakpoint['=md']); // Outputs: "(min-width: 768px) and (max-width: 1023px)"
+ * console.log(mdBreakpoint['>md']); // Outputs: "(min-width: 768px)"
+ * ```
+ */
 function configureBreakpoint(name, min, max) {
     return {
         [`<${name}`]: `(max-width: ${min - 1}px)`,
@@ -12,6 +31,21 @@ function configureBreakpoint(name, min, max) {
     };
 }
 
+/**
+ * Defines default responsive breakpoints for the application. These breakpoints are used to
+ * apply responsive styles and behaviors across various device sizes. Each breakpoint is
+ * configured with a name, a minimum width, and a maximum width, defining the range of device
+ * sizes it targets.
+ *
+ * @constant
+ * @type {Record<string, string>}
+ *
+ * @example
+ * ```ts
+ * // Accessing a breakpoint value
+ * console.log(DEFAULT_BREAKPOINTS['=phone']); // Outputs: "(min-width: 480px) and (max-width: 767px)"
+ * ```
+ */
 const DEFAULT_BREAKPOINTS = {
     ...configureBreakpoint('phone-s', 360, 480),
     ...configureBreakpoint('phone', 480, 768),
@@ -19,19 +53,85 @@ const DEFAULT_BREAKPOINTS = {
     ...configureBreakpoint('desktop-s', 960, 1200),
     ...configureBreakpoint('desktop', 1200, 9999),
 };
+/**
+ * Provides Angular dependency injection tokens for accessing and configuring breakpoints
+ * within the application. This enables a type-safe and modular way to manage responsive
+ * design breakpoints across the app.
+ *
+ * @example
+ * ```ts
+ * // Providing custom breakpoints in an Angular module
+ * import { NgModule } from '@angular/core';
+ * import { provideBreakpointsConfig } from '@odx/angular/breakpoints';
+ *
+ * @NgModule({
+ *   providers: [
+ *     provideBreakpointsConfig({
+ *       breakpoints: {
+ *         ...configureBreakpoint('custom-tablet', 640, 1024),
+ *       },
+ *     }),
+ *   ],
+ * })
+ * export class CustomModule {}
+ * ```
+ */
 const { BreakpointsConfig, BreakpointsDefaultConfig, injectBreakpointsConfig, provideBreakpointsConfig } = createConfigTokens('Breakpoints', '@odx/angular/breakpoints', {
     breakpoints: DEFAULT_BREAKPOINTS,
 });
 
+/**
+ * Service to observe and react to changes in viewport size based on predefined breakpoints.
+ * Utilizes Angular CDK's BreakpointObserver for listening to media query changes and integrates
+ * it with the application's custom breakpoints configuration.
+ *
+ * @Injectable({ providedIn: 'root' })
+ */
 class BreakpointsService {
     constructor() {
         this.breakpointObserver = inject(BreakpointObserver);
         this.config = injectBreakpointsConfig();
     }
+    /**
+     * Observes the specified breakpoints and returns an Observable that emits true if any
+     * of the specified breakpoints match the current viewport size, and false otherwise.
+     *
+     * @param {BreakpointName[]} breakpoints - An array of breakpoints to observe.
+     * @returns {Observable<boolean>} - An Observable that emits true if the viewport matches the specified breakpoints.
+     *
+     * @example
+     * ```ts
+     * // Component that uses BreakpointsService to apply dynamic styles based on breakpoints
+     * @Component({
+     *   selector: 'app-responsive-component',
+     *   templateUrl: './responsive-component.component.html',
+     * })
+     * export class ResponsiveComponent {
+     *   isMobile$: Observable<boolean>;
+     *
+     *   constructor(private breakpointsService: BreakpointsService) {
+     *     this.isMobile$ = this.breakpointsService.observe(['phone', 'tablet']);
+     *   }
+     * }
+     * ```
+     */
     observe(breakpoints) {
         const mediaQueries = this.getMediaQueries(breakpoints);
         return this.createBreakpointObserver(mediaQueries);
     }
+    /**
+     * Checks if any of the specified breakpoints match the current viewport size.
+     *
+     * @param {BreakpointName[]} breakpoints - An array of breakpoints to check.
+     * @returns {boolean} - Returns true if the viewport matches the specified breakpoints, false otherwise.
+     *
+     * @example
+     * ```ts
+     * // Checking if the current viewport matches the 'desktop' breakpoint
+     * const isDesktop = this.breakpointsService.matches(['desktop']);
+     * console.log(`Is desktop view? ${isDesktop}`);
+     * ```
+     */
     matches(breakpoints) {
         const mediaQueries = this.getMediaQueries(breakpoints);
         return this.breakpointObserver.isMatched(mediaQueries);
@@ -52,6 +152,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+/**
+ * A structural directive that conditionally includes an Angular template based on whether the viewport matches
+ * specified breakpoints. It leverages the BreakpointsService to observe changes in viewport size and apply
+ * the appropriate template.
+ *
+ * @Directive
+ * @param {BreakpointsService} breakpointsService - Injects BreakpointsService to observe breakpoint changes.
+ * @param {TemplateRef} template - Injects the Angular template to render when breakpoints match.
+ * @param {ViewContainerRef} viewContainer - Injects the container where the template will be rendered.
+ *
+ * @example
+ * ```html
+ * // Usage in a component template to conditionally display content based on breakpoints
+ * // Assume 'mobile' and 'tablet' are defined breakpoints
+ * <ng-template [odxMatchBreakpoints]="['mobile', 'tablet']">
+ *   Content to display on mobile and tablet sizes.
+ * </ng-template>
+ * <ng-template [odxMatchBreakpoints]="['desktop']" [odxMatchBreakpointsElse]="elseTemplate">
+ *   Content to display on desktop size.
+ * </ng-template>
+ * <ng-template #elseTemplate>
+ *   Content to display when not on desktop size.
+ * </ng-template>
+ * ```
+ */
 class MatchBreakpointsDirective {
     constructor() {
         this.breakpoints$$ = new BehaviorSubject([]);
@@ -59,9 +184,20 @@ class MatchBreakpointsDirective {
         this.takeUntilDestroyed = untilDestroyed();
         this.template = inject(TemplateRef);
         this.viewContainer = inject(ViewContainerRef);
+        /**
+         * Optionally specifies a template to render when the viewport does not match the specified breakpoints.
+         *
+         * @param {TemplateRef<unknown>} elseTemplate - The template to render when the viewport does not match the breakpoints.
+         */
         // eslint-disable-next-line @angular-eslint/no-input-rename
         this.elseTemplate = null;
     }
+    /**
+     * Sets the breakpoints to observe. The directive's content is displayed if the current viewport matches
+     * any of the specified breakpoints.
+     *
+     * @param {BreakpointName | BreakpointName[]} value - The breakpoint(s) to match against the current viewport size.
+     */
     set breakpoints(value) {
         this.breakpoints$$.next(coerceArray(value ?? []));
     }

package/fesm2022/odx-angular-breakpoints.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"odx-angular-breakpoints.mjs","sources":["../../../../libs/angular/breakpoints/src/lib/helpers/configure-breakpoint.ts","../../../../libs/angular/breakpoints/src/lib/breakpoints.config.ts","../../../../libs/angular/breakpoints/src/lib/breakpoints.service.ts","../../../../libs/angular/breakpoints/src/lib/directives/match-breakpoints.directive.ts","../../../../libs/angular/breakpoints/src/lib/breakpoints.module.ts","../../../../libs/angular/breakpoints/src/odx-angular-breakpoints.ts"],"sourcesContent":["type BreakpointOperators = '<' | '=' | '>';\ntype BreakpointConfig<T extends string> = Record<`${BreakpointOperators}${T}`, string>;\n\nexport function configureBreakpoint<T extends string>(name: T, min: number, max: number): BreakpointConfig<T> {\n  return {\n    [`<${name}` as const]: `(max-width: ${min - 1}px)`,\n    [`=${name}` as const]: `(min-width: ${min}px) and (max-width: ${max - 1}px)`,\n    [`>${name}` as const]: `(min-width: ${min}px)`,\n  } as BreakpointConfig<T>;\n}\n","import { createConfigTokens } from '@odx/angular/utils';\nimport { configureBreakpoint } from './helpers/configure-breakpoint';\n\nexport const DEFAULT_BREAKPOINTS = {\n  ...configureBreakpoint('phone-s', 360, 480),\n  ...configureBreakpoint('phone', 480, 768),\n  ...configureBreakpoint('tablet', 768, 960),\n  ...configureBreakpoint('desktop-s', 960, 1200),\n  ...configureBreakpoint('desktop', 1200, 9999),\n} as const;\n\nexport interface BreakpointsConfig {\n  breakpoints: Partial<OdxAngular.Breakpoints>;\n}\n\nexport const { BreakpointsConfig, BreakpointsDefaultConfig, injectBreakpointsConfig, provideBreakpointsConfig } = createConfigTokens(\n  'Breakpoints',\n  '@odx/angular/breakpoints',\n  {\n    breakpoints: DEFAULT_BREAKPOINTS,\n  } as BreakpointsConfig\n);\n","import { BreakpointObserver } from '@angular/cdk/layout';\nimport { inject, Injectable } from '@angular/core';\nimport { distinctUntilChanged, map, Observable, of, shareReplay } from 'rxjs';\nimport { injectBreakpointsConfig } from './breakpoints.config';\nimport { BreakpointName } from './models';\n\n@Injectable({ providedIn: 'root' })\nexport class BreakpointsService {\n  private readonly breakpointObserver = inject(BreakpointObserver);\n  private readonly config = injectBreakpointsConfig();\n\n  public observe(breakpoints: BreakpointName[]): Observable<boolean> {\n    const mediaQueries = this.getMediaQueries(breakpoints);\n\n    return this.createBreakpointObserver(mediaQueries);\n  }\n\n  public matches(breakpoints: BreakpointName[]): boolean {\n    const mediaQueries = this.getMediaQueries(breakpoints);\n\n    return this.breakpointObserver.isMatched(mediaQueries);\n  }\n\n  private getMediaQueries(breakpointNames: BreakpointName[]): string[] {\n    return breakpointNames.map((name) => this.config.breakpoints[name] as string).filter(Boolean);\n  }\n\n  private createBreakpointObserver(mediaQueries: string[]): Observable<boolean> {\n    if (mediaQueries.length < 1) return of(false);\n\n    return this.breakpointObserver.observe(mediaQueries).pipe(\n      map(({ matches }) => matches),\n      distinctUntilChanged(),\n      shareReplay({ bufferSize: 1, refCount: true }),\n    );\n  }\n}\n","import { Directive, inject, Input, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';\nimport { coerceArray, untilDestroyed } from '@odx/angular/utils';\nimport { BehaviorSubject, switchMap, tap } from 'rxjs';\nimport { BreakpointsService } from '../breakpoints.service';\nimport { BreakpointName } from '../models';\n\n@Directive({\n  standalone: true,\n  selector: 'ng-template[odxMatchBreakpoints]',\n})\nexport class MatchBreakpointsDirective implements OnInit {\n  private readonly breakpoints$$ = new BehaviorSubject<BreakpointName[]>([]);\n  private readonly breakpointsService = inject(BreakpointsService);\n  private readonly takeUntilDestroyed = untilDestroyed();\n  private readonly template = inject(TemplateRef);\n  private readonly viewContainer = inject(ViewContainerRef);\n\n  @Input('odxMatchBreakpoints')\n  public set breakpoints(value: BreakpointName | BreakpointName[] | null | undefined) {\n    this.breakpoints$$.next(coerceArray(value ?? []));\n  }\n\n  // eslint-disable-next-line @angular-eslint/no-input-rename\n  @Input('odxMatchBreakpointsElse')\n  public elseTemplate?: TemplateRef<unknown> | null = null;\n\n  public ngOnInit(): void {\n    this.breakpoints$$\n      .pipe(\n        switchMap((breakpoints) => this.breakpointsService.observe(breakpoints)),\n        tap((matchesBreakpoints) => this.render(matchesBreakpoints)),\n        this.takeUntilDestroyed(),\n      )\n      .subscribe();\n  }\n\n  private render(matchesBreakpoints: boolean): void {\n    this.viewContainer.clear();\n    const template = matchesBreakpoints ? this.template : this.elseTemplate;\n    if (template) {\n      const viewRef = this.viewContainer.createEmbeddedView(template);\n      viewRef.markForCheck();\n    }\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { MatchBreakpointsDirective } from './directives';\n\nconst modules = [MatchBreakpointsDirective];\n\n@NgModule({\n  imports: modules,\n  exports: modules,\n})\nexport class BreakpointsModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"odx-angular-breakpoints.mjs","sources":["../../../../libs/angular/breakpoints/src/lib/helpers/configure-breakpoint.ts","../../../../libs/angular/breakpoints/src/lib/breakpoints.config.ts","../../../../libs/angular/breakpoints/src/lib/breakpoints.service.ts","../../../../libs/angular/breakpoints/src/lib/directives/match-breakpoints.directive.ts","../../../../libs/angular/breakpoints/src/lib/breakpoints.module.ts","../../../../libs/angular/breakpoints/src/odx-angular-breakpoints.ts"],"sourcesContent":["type BreakpointOperators = '<' | '=' | '>';\ntype BreakpointConfig<T extends string> = Record<`${BreakpointOperators}${T}`, string>;\n\n/**\n * Generates a configuration object containing CSS media query strings for a named breakpoint.\n * The function creates media queries for three scenarios: below (`<`), exactly (`=`), and above (`>`) the specified breakpoint.\n *\n * @template T - The string literal type representing the name of the breakpoint.\n * @param {T} name - The name of the breakpoint (e.g., 'md' for medium).\n * @param {number} min - The minimum width (inclusive) where the breakpoint starts.\n * @param {number} max - The maximum width (exclusive) where the breakpoint ends.\n * @returns {BreakpointConfig<T>} An object containing media query strings for targeting screen sizes relative to the breakpoint.\n *\n * @example\n * ```ts\n * // Define a medium (md) breakpoint\n * const mdBreakpoint = configureBreakpoint('md', 768, 1024);\n * console.log(mdBreakpoint['<md']); // Outputs: \"(max-width: 767px)\"\n * console.log(mdBreakpoint['=md']); // Outputs: \"(min-width: 768px) and (max-width: 1023px)\"\n * console.log(mdBreakpoint['>md']); // Outputs: \"(min-width: 768px)\"\n * ```\n */\nexport function configureBreakpoint<T extends string>(name: T, min: number, max: number): BreakpointConfig<T> {\n  return {\n    [`<${name}` as const]: `(max-width: ${min - 1}px)`,\n    [`=${name}` as const]: `(min-width: ${min}px) and (max-width: ${max - 1}px)`,\n    [`>${name}` as const]: `(min-width: ${min}px)`,\n  } as BreakpointConfig<T>;\n}\n","import { createConfigTokens } from '@odx/angular/utils';\nimport { configureBreakpoint } from './helpers/configure-breakpoint';\n\n/**\n * Defines default responsive breakpoints for the application. These breakpoints are used to\n * apply responsive styles and behaviors across various device sizes. Each breakpoint is\n * configured with a name, a minimum width, and a maximum width, defining the range of device\n * sizes it targets.\n *\n * @constant\n * @type {Record<string, string>}\n *\n * @example\n * ```ts\n * // Accessing a breakpoint value\n * console.log(DEFAULT_BREAKPOINTS['=phone']); // Outputs: \"(min-width: 480px) and (max-width: 767px)\"\n * ```\n */\nexport const DEFAULT_BREAKPOINTS = {\n  ...configureBreakpoint('phone-s', 360, 480),\n  ...configureBreakpoint('phone', 480, 768),\n  ...configureBreakpoint('tablet', 768, 960),\n  ...configureBreakpoint('desktop-s', 960, 1200),\n  ...configureBreakpoint('desktop', 1200, 9999),\n} as const;\n\nexport interface BreakpointsConfig {\n  breakpoints: Partial<OdxAngular.Breakpoints>;\n}\n\n/**\n * Provides Angular dependency injection tokens for accessing and configuring breakpoints\n * within the application. This enables a type-safe and modular way to manage responsive\n * design breakpoints across the app.\n *\n * @example\n * ```ts\n * // Providing custom breakpoints in an Angular module\n * import { NgModule } from '@angular/core';\n * import { provideBreakpointsConfig } from '@odx/angular/breakpoints';\n *\n * @NgModule({\n *   providers: [\n *     provideBreakpointsConfig({\n *       breakpoints: {\n *         ...configureBreakpoint('custom-tablet', 640, 1024),\n *       },\n *     }),\n *   ],\n * })\n * export class CustomModule {}\n * ```\n */\nexport const { BreakpointsConfig, BreakpointsDefaultConfig, injectBreakpointsConfig, provideBreakpointsConfig } = createConfigTokens(\n  'Breakpoints',\n  '@odx/angular/breakpoints',\n  {\n    breakpoints: DEFAULT_BREAKPOINTS,\n  } as BreakpointsConfig,\n);\n","import { BreakpointObserver } from '@angular/cdk/layout';\nimport { inject, Injectable } from '@angular/core';\nimport { distinctUntilChanged, map, Observable, of, shareReplay } from 'rxjs';\nimport { injectBreakpointsConfig } from './breakpoints.config';\nimport { BreakpointName } from './models';\n\n/**\n * Service to observe and react to changes in viewport size based on predefined breakpoints.\n * Utilizes Angular CDK's BreakpointObserver for listening to media query changes and integrates\n * it with the application's custom breakpoints configuration.\n *\n * @Injectable({ providedIn: 'root' })\n */\n@Injectable({ providedIn: 'root' })\nexport class BreakpointsService {\n  private readonly breakpointObserver = inject(BreakpointObserver);\n  private readonly config = injectBreakpointsConfig();\n\n  /**\n   * Observes the specified breakpoints and returns an Observable that emits true if any\n   * of the specified breakpoints match the current viewport size, and false otherwise.\n   *\n   * @param {BreakpointName[]} breakpoints - An array of breakpoints to observe.\n   * @returns {Observable<boolean>} - An Observable that emits true if the viewport matches the specified breakpoints.\n   *\n   * @example\n   * ```ts\n   * // Component that uses BreakpointsService to apply dynamic styles based on breakpoints\n   * @Component({\n   *   selector: 'app-responsive-component',\n   *   templateUrl: './responsive-component.component.html',\n   * })\n   * export class ResponsiveComponent {\n   *   isMobile$: Observable<boolean>;\n   *\n   *   constructor(private breakpointsService: BreakpointsService) {\n   *     this.isMobile$ = this.breakpointsService.observe(['phone', 'tablet']);\n   *   }\n   * }\n   * ```\n   */\n  public observe(breakpoints: BreakpointName[]): Observable<boolean> {\n    const mediaQueries = this.getMediaQueries(breakpoints);\n\n    return this.createBreakpointObserver(mediaQueries);\n  }\n\n  /**\n   * Checks if any of the specified breakpoints match the current viewport size.\n   *\n   * @param {BreakpointName[]} breakpoints - An array of breakpoints to check.\n   * @returns {boolean} - Returns true if the viewport matches the specified breakpoints, false otherwise.\n   *\n   * @example\n   * ```ts\n   * // Checking if the current viewport matches the 'desktop' breakpoint\n   * const isDesktop = this.breakpointsService.matches(['desktop']);\n   * console.log(`Is desktop view? ${isDesktop}`);\n   * ```\n   */\n  public matches(breakpoints: BreakpointName[]): boolean {\n    const mediaQueries = this.getMediaQueries(breakpoints);\n\n    return this.breakpointObserver.isMatched(mediaQueries);\n  }\n\n  private getMediaQueries(breakpointNames: BreakpointName[]): string[] {\n    return breakpointNames.map((name) => this.config.breakpoints[name] as string).filter(Boolean);\n  }\n\n  private createBreakpointObserver(mediaQueries: string[]): Observable<boolean> {\n    if (mediaQueries.length < 1) return of(false);\n\n    return this.breakpointObserver.observe(mediaQueries).pipe(\n      map(({ matches }) => matches),\n      distinctUntilChanged(),\n      shareReplay({ bufferSize: 1, refCount: true }),\n    );\n  }\n}\n","import { Directive, inject, Input, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';\nimport { coerceArray, untilDestroyed } from '@odx/angular/utils';\nimport { BehaviorSubject, switchMap, tap } from 'rxjs';\nimport { BreakpointsService } from '../breakpoints.service';\nimport { BreakpointName } from '../models';\n\n/**\n * A structural directive that conditionally includes an Angular template based on whether the viewport matches\n * specified breakpoints. It leverages the BreakpointsService to observe changes in viewport size and apply\n * the appropriate template.\n *\n * @Directive\n * @param {BreakpointsService} breakpointsService - Injects BreakpointsService to observe breakpoint changes.\n * @param {TemplateRef} template - Injects the Angular template to render when breakpoints match.\n * @param {ViewContainerRef} viewContainer - Injects the container where the template will be rendered.\n *\n * @example\n * ```html\n * // Usage in a component template to conditionally display content based on breakpoints\n * // Assume 'mobile' and 'tablet' are defined breakpoints\n * <ng-template [odxMatchBreakpoints]=\"['mobile', 'tablet']\">\n *   Content to display on mobile and tablet sizes.\n * </ng-template>\n * <ng-template [odxMatchBreakpoints]=\"['desktop']\" [odxMatchBreakpointsElse]=\"elseTemplate\">\n *   Content to display on desktop size.\n * </ng-template>\n * <ng-template #elseTemplate>\n *   Content to display when not on desktop size.\n * </ng-template>\n * ```\n */\n@Directive({\n  standalone: true,\n  selector: 'ng-template[odxMatchBreakpoints]',\n})\nexport class MatchBreakpointsDirective implements OnInit {\n  private readonly breakpoints$$ = new BehaviorSubject<BreakpointName[]>([]);\n  private readonly breakpointsService = inject(BreakpointsService);\n  private readonly takeUntilDestroyed = untilDestroyed();\n  private readonly template = inject(TemplateRef);\n  private readonly viewContainer = inject(ViewContainerRef);\n\n  /**\n   * Sets the breakpoints to observe. The directive's content is displayed if the current viewport matches\n   * any of the specified breakpoints.\n   *\n   * @param {BreakpointName | BreakpointName[]} value - The breakpoint(s) to match against the current viewport size.\n   */\n  @Input('odxMatchBreakpoints')\n  public set breakpoints(value: BreakpointName | BreakpointName[] | null | undefined) {\n    this.breakpoints$$.next(coerceArray(value ?? []));\n  }\n\n  /**\n   * Optionally specifies a template to render when the viewport does not match the specified breakpoints.\n   *\n   * @param {TemplateRef<unknown>} elseTemplate - The template to render when the viewport does not match the breakpoints.\n   */\n  // eslint-disable-next-line @angular-eslint/no-input-rename\n  @Input('odxMatchBreakpointsElse')\n  public elseTemplate?: TemplateRef<unknown> | null = null;\n\n  public ngOnInit(): void {\n    this.breakpoints$$\n      .pipe(\n        switchMap((breakpoints) => this.breakpointsService.observe(breakpoints)),\n        tap((matchesBreakpoints) => this.render(matchesBreakpoints)),\n        this.takeUntilDestroyed(),\n      )\n      .subscribe();\n  }\n\n  private render(matchesBreakpoints: boolean): void {\n    this.viewContainer.clear();\n    const template = matchesBreakpoints ? this.template : this.elseTemplate;\n    if (template) {\n      const viewRef = this.viewContainer.createEmbeddedView(template);\n      viewRef.markForCheck();\n    }\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { MatchBreakpointsDirective } from './directives';\n\nconst modules = [MatchBreakpointsDirective];\n\n@NgModule({\n  imports: modules,\n  exports: modules,\n})\nexport class BreakpointsModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/odx-angular-cdk-a11y.mjs

@@ -7,10 +7,42 @@ import { __decorate } from 'tslib';
 import { CSSComponent } from '@odx/angular/internal';
 import { injectElement, deferFn } from '@odx/angular/utils';
 
+/**
+ * Directive that makes an element interactive, responding to click, Enter key, and Space key events.
+ * It automatically handles the disabled state through `DisabledController`, inhibiting interactions when disabled.
+ * This directive can be useful for creating custom buttons or interactive elements that are not natively interactive,
+ * such as divs or custom components.
+ *
+ * @Directive
+ * @CSSComponent cdk-interactive - A CSS Component class that can be targeted for styling interactive elements.
+ * @selector '[odxCdkInteractive]' - Applies this directive to any element with the 'odxCdkInteractive' attribute.
+ * @hostDirectives {WithDisabledState, WithTabIndex} - Applies disabled state and tab index handling.
+ * @host role='button' - Assigns a role of 'button' to the host element for accessibility.
+ *
+ * @example
+ * Applying the directive to a div element to make it interactive:
+ * ```html
+ * <div odxCdkInteractive (odxCdkInteractive)="onInteract($event)">
+ *   Click or press Enter/Space to interact
+ * </div>
+ * ```
+ *
+ * @example
+ * Using the directive on a custom Angular component
+ * ```html
+ * <app-custom-button odxCdkInteractive (odxCdkInteractive)="onCustomButtonInteract($event)">
+ * </app-custom-button>
+ * ```
+ */
 let InteractiveDirective = class InteractiveDirective {
     constructor() {
         this.disabledController = DisabledController.inject();
         this.element = injectElement();
+        /**
+         * Emits an event when the element is interacted with via click, Enter key, or Space key.
+         *
+         * @emits {MouseEvent | KeyboardEvent} - The event that triggered the interaction.
+         */
         this.interact = new EventEmitter();
     }
     handleEvents(event) {
@@ -48,14 +80,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['keyup.space', ['$event']]
             }] } });
 
+/**
+ * Directive to make an element focusable as part of a list, integrating with Angular CDK's FocusKeyManager.
+ * It listens to the disabled state controlled by `DisabledController` to manage focus correctly based on
+ * the enabled state of the element.
+ *
+ * @example
+ * In a component template, apply this directive to list items that should be focusable and managed by a FocusKeyManager:
+ * ```html
+ * <li odxListFocusManagerOption *ngFor="let item of items">
+ *   {{ item }}
+ * </li>
+ * ```
+ */
 class ListFocusManagerOptionDirective {
     constructor() {
         this.disabledController = DisabledController.inject();
         this.element = injectElement();
     }
+    /**
+     * Reflects the disabled state of the element, managed by `DisabledController`.
+     * If disabled, the element is not focusable.
+     *
+     * @returns {boolean} True if the directive's host element is disabled.
+     */
     get disabled() {
         return !!this.disabledController?.disabled;
     }
+    /**
+     * Focuses the host element. If the element is disabled, it will not be focused.
+     */
     focus() {
         this.element.nativeElement.focus();
     }
@@ -70,6 +124,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+/**
+ * Directive that sets up keyboard navigation for a list or a group of focusable elements.
+ * Utilizes `FocusKeyManager` from Angular CDK to manage focus among items.
+ * It automatically skips disabled items and wraps around when navigating past the first or last item.
+ * Handles keydown events to navigate through the focusable options.
+ *
+ * @example
+ * In a component template, use this directive on a container element and `odxListFocusManagerOption`
+ * on each focusable list item:
+ * ```html
+ * <ul odxListFocusManager>
+ *   <li odxListFocusManagerOption *ngFor="let item of items">
+ *     {{ item }}
+ *   </li>
+ * </ul>
+ * ```
+ */
 class ListFocusManagerDirective {
     constructor() {
         this.keyManager = null;

package/fesm2022/odx-angular-cdk-a11y.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"odx-angular-cdk-a11y.mjs","sources":["../../../../libs/angular/cdk/a11y/src/lib/directives/interactive.directive.ts","../../../../libs/angular/cdk/a11y/src/lib/directives/list-focus-manager-option.directive.ts","../../../../libs/angular/cdk/a11y/src/lib/directives/list-focus-manager.directive.ts","../../../../libs/angular/cdk/a11y/src/lib/a11y.module.ts","../../../../libs/angular/cdk/a11y/src/odx-angular-cdk-a11y.ts"],"sourcesContent":["import { Directive, EventEmitter, HostListener, Output } from '@angular/core';\nimport { DisabledController, WithDisabledState, WithTabIndex } from '@odx/angular';\nimport { CSSComponent } from '@odx/angular/internal';\nimport { injectElement } from '@odx/angular/utils';\n\n@CSSComponent('cdk-interactive')\n@Directive({\n  selector: '[odxCdkInteractive]',\n  standalone: true,\n  hostDirectives: [WithDisabledState, WithTabIndex],\n  host: {\n    role: 'button',\n  },\n})\nexport class InteractiveDirective {\n  private readonly disabledController = DisabledController.inject();\n\n  public readonly element = injectElement();\n\n  @Output('odxCdkInteractive')\n  public interact = new EventEmitter<MouseEvent | KeyboardEvent>();\n\n  @HostListener('click', ['$event'])\n  @HostListener('keyup.enter', ['$event'])\n  @HostListener('keyup.space', ['$event'])\n  protected handleEvents(event: MouseEvent | KeyboardEvent) {\n    if (this.disabledController?.disabled) return;\n    this.interact.next(event);\n  }\n}\n","import { FocusableOption } from '@angular/cdk/a11y';\nimport { Directive } from '@angular/core';\nimport { DisabledController } from '@odx/angular';\nimport { injectElement } from '@odx/angular/utils';\n\n@Directive({\n  selector: '[odxListFocusManagerOption]',\n  standalone: true,\n})\nexport class ListFocusManagerOptionDirective implements FocusableOption {\n  private readonly disabledController = DisabledController.inject();\n  private readonly element = injectElement();\n\n  public get disabled(): boolean {\n    return !!this.disabledController?.disabled;\n  }\n\n  public focus(): void {\n    this.element.nativeElement.focus();\n  }\n}\n","import { FocusKeyManager } from '@angular/cdk/a11y';\nimport { AfterContentInit, ContentChildren, Directive, HostListener, OnDestroy, QueryList } from '@angular/core';\nimport { deferFn } from '@odx/angular/utils';\nimport { ListFocusManagerOptionDirective } from './list-focus-manager-option.directive';\n\n@Directive({\n  selector: '[odxListFocusManager]',\n  standalone: true,\n})\nexport class ListFocusManagerDirective implements AfterContentInit, OnDestroy {\n  private keyManager: FocusKeyManager<ListFocusManagerOptionDirective> | null = null;\n\n  @ContentChildren(ListFocusManagerOptionDirective)\n  protected options!: QueryList<ListFocusManagerOptionDirective>;\n\n  public ngAfterContentInit(): void {\n    this.keyManager = new FocusKeyManager(this.options)\n      .withHomeAndEnd()\n      .withWrap()\n      .skipPredicate((item) => item.disabled);\n    deferFn(() => this.keyManager?.setFirstItemActive());\n  }\n\n  public ngOnDestroy(): void {\n    this.keyManager?.destroy();\n    this.keyManager = null;\n  }\n\n  @HostListener('keydown', ['$event'])\n  protected onKeyDown(event: KeyboardEvent): void {\n    this.keyManager?.onKeydown(event);\n  }\n}\n","import { A11yModule as NgCdkA11yModule } from '@angular/cdk/a11y';\nimport { NgModule } from '@angular/core';\nimport { CoreModule } from '@odx/angular';\nimport { InteractiveDirective, ListFocusManagerDirective, ListFocusManagerOptionDirective } from './directives';\n\nconst modules = [ListFocusManagerDirective, ListFocusManagerOptionDirective, InteractiveDirective];\n\n@NgModule({\n  imports: [NgCdkA11yModule, ...modules],\n  exports: [CoreModule, NgCdkA11yModule, ...modules],\n})\nexport class A11yModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["NgCdkA11yModule"],"mappings":";;;;;;;;;AAca,IAAA,oBAAoB,GAA1B,MAAM,oBAAoB,CAAA;AAA1B,IAAA,WAAA,GAAA;AACY,QAAA,IAAA,CAAA,kBAAkB,GAAG,kBAAkB,CAAC,MAAM,EAAE,CAAC;QAElD,IAAO,CAAA,OAAA,GAAG,aAAa,EAAE,CAAC;AAGnC,QAAA,IAAA,CAAA,QAAQ,GAAG,IAAI,YAAY,EAA8B,CAAC;AASlE,KAAA;AAJW,IAAA,YAAY,CAAC,KAAiC,EAAA;AACtD,QAAA,IAAI,IAAI,CAAC,kBAAkB,EAAE,QAAQ;YAAE,OAAO;AAC9C,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3B;+GAdU,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;mGAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,sBAAA,EAAA,aAAA,EAAA,sBAAA,EAAA,aAAA,EAAA,sBAAA,EAAA,EAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,EAAA,EAAA,SAAA,EAAA,EAAA,CAAA,YAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;AAApB,oBAAoB,GAAA,UAAA,CAAA;IAThC,YAAY,CAAC,iBAAiB,CAAC;AASnB,CAAA,EAAA,oBAAoB,CAehC,CAAA;4FAfY,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBARhC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,qBAAqB;AAC/B,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,cAAc,EAAE,CAAC,iBAAiB,EAAE,YAAY,CAAC;AACjD,oBAAA,IAAI,EAAE;AACJ,wBAAA,IAAI,EAAE,QAAQ;AACf,qBAAA;AACF,iBAAA,CAAA;8BAOQ,QAAQ,EAAA,CAAA;sBADd,MAAM;uBAAC,mBAAmB,CAAA;gBAMjB,YAAY,EAAA,CAAA;sBAHrB,YAAY;uBAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,CAAA;;sBAChC,YAAY;uBAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAA;;sBACtC,YAAY;uBAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAA;;;MCf5B,+BAA+B,CAAA;AAJ5C,IAAA,WAAA,GAAA;AAKmB,QAAA,IAAA,CAAA,kBAAkB,GAAG,kBAAkB,CAAC,MAAM,EAAE,CAAC;QACjD,IAAO,CAAA,OAAA,GAAG,aAAa,EAAE,CAAC;AAS5C,KAAA;AAPC,IAAA,IAAW,QAAQ,GAAA;AACjB,QAAA,OAAO,CAAC,CAAC,IAAI,CAAC,kBAAkB,EAAE,QAAQ,CAAC;KAC5C;IAEM,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;KACpC;+GAVU,+BAA+B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;mGAA/B,+BAA+B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,6BAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;4FAA/B,+BAA+B,EAAA,UAAA,EAAA,CAAA;kBAJ3C,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,6BAA6B;AACvC,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA,CAAA;;;MCCY,yBAAyB,CAAA;AAJtC,IAAA,WAAA,GAAA;QAKU,IAAU,CAAA,UAAA,GAA4D,IAAI,CAAC;AAsBpF,KAAA;IAjBQ,kBAAkB,GAAA;QACvB,IAAI,CAAC,UAAU,GAAG,IAAI,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC;AAChD,aAAA,cAAc,EAAE;AAChB,aAAA,QAAQ,EAAE;aACV,aAAa,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC1C,OAAO,CAAC,MAAM,IAAI,CAAC,UAAU,EAAE,kBAAkB,EAAE,CAAC,CAAC;KACtD;IAEM,WAAW,GAAA;AAChB,QAAA,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,CAAC;AAC3B,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB;AAGS,IAAA,SAAS,CAAC,KAAoB,EAAA;AACtC,QAAA,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;KACnC;+GAtBU,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAzB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,yBAAyB,kKAGnB,+BAA+B,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;4FAHrC,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAJrC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,uBAAuB;AACjC,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA,CAAA;8BAKW,OAAO,EAAA,CAAA;sBADhB,eAAe;uBAAC,+BAA+B,CAAA;gBAiBtC,SAAS,EAAA,CAAA;sBADlB,YAAY;uBAAC,SAAS,EAAE,CAAC,QAAQ,CAAC,CAAA;;;ACvBrC,MAAM,OAAO,GAAG,CAAC,yBAAyB,EAAE,+BAA+B,EAAE,oBAAoB,CAAC,CAAC;MAMtF,UAAU,CAAA;+GAAV,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;AAAV,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAU,YAHXA,YAAe,EAHV,yBAAyB,EAAE,+BAA+B,EAAE,oBAAoB,CAIrF,EAAA,OAAA,EAAA,CAAA,UAAU,EAAEA,YAAe,EAJtB,yBAAyB,EAAE,+BAA+B,EAAE,oBAAoB,CAAA,EAAA,CAAA,CAAA,EAAA;AAMpF,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAU,EAHX,OAAA,EAAA,CAAAA,YAAe,EACf,UAAU,EAAEA,YAAe,CAAA,EAAA,CAAA,CAAA,EAAA;;4FAE1B,UAAU,EAAA,UAAA,EAAA,CAAA;kBAJtB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAACA,YAAe,EAAE,GAAG,OAAO,CAAC;oBACtC,OAAO,EAAE,CAAC,UAAU,EAAEA,YAAe,EAAE,GAAG,OAAO,CAAC;AACnD,iBAAA,CAAA;;;ACVD;;AAEG;;;;"}
+{"version":3,"file":"odx-angular-cdk-a11y.mjs","sources":["../../../../libs/angular/cdk/a11y/src/lib/directives/interactive.directive.ts","../../../../libs/angular/cdk/a11y/src/lib/directives/list-focus-manager-option.directive.ts","../../../../libs/angular/cdk/a11y/src/lib/directives/list-focus-manager.directive.ts","../../../../libs/angular/cdk/a11y/src/lib/a11y.module.ts","../../../../libs/angular/cdk/a11y/src/odx-angular-cdk-a11y.ts"],"sourcesContent":["import { Directive, EventEmitter, HostListener, Output } from '@angular/core';\nimport { DisabledController, WithDisabledState, WithTabIndex } from '@odx/angular';\nimport { CSSComponent } from '@odx/angular/internal';\nimport { injectElement } from '@odx/angular/utils';\n\n/**\n * Directive that makes an element interactive, responding to click, Enter key, and Space key events.\n * It automatically handles the disabled state through `DisabledController`, inhibiting interactions when disabled.\n * This directive can be useful for creating custom buttons or interactive elements that are not natively interactive,\n * such as divs or custom components.\n *\n * @Directive\n * @CSSComponent cdk-interactive - A CSS Component class that can be targeted for styling interactive elements.\n * @selector '[odxCdkInteractive]' - Applies this directive to any element with the 'odxCdkInteractive' attribute.\n * @hostDirectives {WithDisabledState, WithTabIndex} - Applies disabled state and tab index handling.\n * @host role='button' - Assigns a role of 'button' to the host element for accessibility.\n *\n * @example\n * Applying the directive to a div element to make it interactive:\n * ```html\n * <div odxCdkInteractive (odxCdkInteractive)=\"onInteract($event)\">\n *   Click or press Enter/Space to interact\n * </div>\n * ```\n *\n * @example\n * Using the directive on a custom Angular component\n * ```html\n * <app-custom-button odxCdkInteractive (odxCdkInteractive)=\"onCustomButtonInteract($event)\">\n * </app-custom-button>\n * ```\n */\n@CSSComponent('cdk-interactive')\n@Directive({\n  selector: '[odxCdkInteractive]',\n  standalone: true,\n  hostDirectives: [WithDisabledState, WithTabIndex],\n  host: {\n    role: 'button',\n  },\n})\nexport class InteractiveDirective {\n  private readonly disabledController = DisabledController.inject();\n\n  public readonly element = injectElement();\n\n  /**\n   * Emits an event when the element is interacted with via click, Enter key, or Space key.\n   *\n   * @emits {MouseEvent | KeyboardEvent} - The event that triggered the interaction.\n   */\n  @Output('odxCdkInteractive')\n  public interact = new EventEmitter<MouseEvent | KeyboardEvent>();\n\n  @HostListener('click', ['$event'])\n  @HostListener('keyup.enter', ['$event'])\n  @HostListener('keyup.space', ['$event'])\n  protected handleEvents(event: MouseEvent | KeyboardEvent) {\n    if (this.disabledController?.disabled) return;\n    this.interact.next(event);\n  }\n}\n","import { FocusableOption } from '@angular/cdk/a11y';\nimport { Directive } from '@angular/core';\nimport { DisabledController } from '@odx/angular';\nimport { injectElement } from '@odx/angular/utils';\n\n/**\n * Directive to make an element focusable as part of a list, integrating with Angular CDK's FocusKeyManager.\n * It listens to the disabled state controlled by `DisabledController` to manage focus correctly based on\n * the enabled state of the element.\n *\n * @example\n * In a component template, apply this directive to list items that should be focusable and managed by a FocusKeyManager:\n * ```html\n * <li odxListFocusManagerOption *ngFor=\"let item of items\">\n *   {{ item }}\n * </li>\n * ```\n */\n@Directive({\n  selector: '[odxListFocusManagerOption]',\n  standalone: true,\n})\nexport class ListFocusManagerOptionDirective implements FocusableOption {\n  private readonly disabledController = DisabledController.inject();\n  private readonly element = injectElement();\n\n  /**\n   * Reflects the disabled state of the element, managed by `DisabledController`.\n   * If disabled, the element is not focusable.\n   *\n   * @returns {boolean} True if the directive's host element is disabled.\n   */\n  public get disabled(): boolean {\n    return !!this.disabledController?.disabled;\n  }\n\n  /**\n   * Focuses the host element. If the element is disabled, it will not be focused.\n   */\n  public focus(): void {\n    this.element.nativeElement.focus();\n  }\n}\n","import { FocusKeyManager } from '@angular/cdk/a11y';\nimport { AfterContentInit, ContentChildren, Directive, HostListener, OnDestroy, QueryList } from '@angular/core';\nimport { deferFn } from '@odx/angular/utils';\nimport { ListFocusManagerOptionDirective } from './list-focus-manager-option.directive';\n\n/**\n * Directive that sets up keyboard navigation for a list or a group of focusable elements.\n * Utilizes `FocusKeyManager` from Angular CDK to manage focus among items.\n * It automatically skips disabled items and wraps around when navigating past the first or last item.\n * Handles keydown events to navigate through the focusable options.\n *\n * @example\n * In a component template, use this directive on a container element and `odxListFocusManagerOption`\n * on each focusable list item:\n * ```html\n * <ul odxListFocusManager>\n *   <li odxListFocusManagerOption *ngFor=\"let item of items\">\n *     {{ item }}\n *   </li>\n * </ul>\n * ```\n */\n@Directive({\n  selector: '[odxListFocusManager]',\n  standalone: true,\n})\nexport class ListFocusManagerDirective implements AfterContentInit, OnDestroy {\n  private keyManager: FocusKeyManager<ListFocusManagerOptionDirective> | null = null;\n\n  @ContentChildren(ListFocusManagerOptionDirective)\n  protected options!: QueryList<ListFocusManagerOptionDirective>;\n\n  public ngAfterContentInit(): void {\n    this.keyManager = new FocusKeyManager(this.options)\n      .withHomeAndEnd()\n      .withWrap()\n      .skipPredicate((item) => item.disabled);\n    deferFn(() => this.keyManager?.setFirstItemActive());\n  }\n\n  public ngOnDestroy(): void {\n    this.keyManager?.destroy();\n    this.keyManager = null;\n  }\n\n  @HostListener('keydown', ['$event'])\n  protected onKeyDown(event: KeyboardEvent): void {\n    this.keyManager?.onKeydown(event);\n  }\n}\n","import { A11yModule as NgCdkA11yModule } from '@angular/cdk/a11y';\nimport { NgModule } from '@angular/core';\nimport { CoreModule } from '@odx/angular';\nimport { InteractiveDirective, ListFocusManagerDirective, ListFocusManagerOptionDirective } from './directives';\n\nconst modules = [ListFocusManagerDirective, ListFocusManagerOptionDirective, InteractiveDirective];\n\n@NgModule({\n  imports: [NgCdkA11yModule, ...modules],\n  exports: [CoreModule, NgCdkA11yModule, ...modules],\n})\nexport class A11yModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["NgCdkA11yModule"],"mappings":"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"}

package/fesm2022/odx-angular-cdk-active-indicator.mjs

@@ -17,6 +17,42 @@ const ActiveIndicatorPosition = {
     END: 'end',
 };
 
+/**
+ * `ActiveIndicatorDirective` is designed to adjust an indicator's position and size dynamically to highlight
+ * the active element within a container. It's useful for tabs, menus, or any list where an active state is visually represented.
+ * The directive can be customized to align the indicator based on the active element's position and supports
+ * both horizontal and vertical orientations.
+ *
+ * To use this directive, apply it to the element you want to use as an active indicator.
+ * Then, bind the active element using the `odxActiveIndicator` input. Optionally, specify
+ * the container element with `odxActiveIndicatorParent` if the container is not the immediate parent of the indicator.
+ *
+ * @example
+ * ```html
+ * <div class="tabs-container" #tabsContainer>
+ *   <div class="tab" *ngFor="let tab of tabs" [class.active]="tab.isActive" #tabElement>{{ tab.label }}</div>
+ *   <div class="indicator" [odxActiveIndicator]="activeTabElement" [odxActiveIndicatorParent]="tabsContainer"></div>
+ * </div>
+ * ```
+ *
+ * ```ts
+ * @Component({
+ *   selector: 'app-tabs',
+ *   templateUrl: './tabs.component.html',
+ *   imports: [ActiveIndicatorDirective, NgForOf],
+ * })
+ * export class TabsComponent {
+ *   tabs = [{ label: 'Tab 1', isActive: true }, { label: 'Tab 2', isActive: false }];
+ *   @ViewChildren('tabElement') tabElements?: QueryList<ElementRef>;
+ *   @ViewChild('tabsContainer') tabsContainer!: ElementRef;
+ *
+ *   get activeTabElement(): HTMLElement {
+ *     const activeTab = this.tabElements?.find((tab) => tab.nativeElement.classList.contains('active'));
+ *     return activeTab ? activeTab.nativeElement : null;
+ *   }
+ * }
+ * ```
+ */
 let ActiveIndicatorDirective = class ActiveIndicatorDirective {
     constructor() {
         this.takeUntilDestroyed = untilDestroyed();
@@ -25,11 +61,38 @@ let ActiveIndicatorDirective = class ActiveIndicatorDirective {
             return parentElement ? fromElementResize$(parentElement) : EMPTY;
         }));
         this.element = injectElement();
+        /**
+         * Indicates whether the element is active or not.
+         *
+         * @type {boolean}
+         */
         this.isActive = false;
+        /**
+         * The currently active element to which the indicator should align.
+         * It dynamically updates the indicator's position and size based on this element.
+         *
+         * @type {HTMLElement | null}
+         */
         this.activeElement = null;
+        /**
+         * The direction in which the indicator should move.
+         *
+         * @type {ActiveIndicatorDirection}
+         */
         this.direction = ActiveIndicatorDirection.HORIZONTAL;
+        /**
+         * The position of the indicator relative to the active element.
+         *
+         * @type {ActiveIndicatorPosition}
+         */
         this.position = ActiveIndicatorPosition.CENTER;
     }
+    /**
+     * The parent container element of the active elements.
+     * If not set, the indicator's immediate parent element is used.
+     *
+     * @type {HTMLElement | null}
+     */
     set parent(value) {
         this.parentElement$$.next(value);
     }

package/fesm2022/odx-angular-cdk-active-indicator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"odx-angular-cdk-active-indicator.mjs","sources":["../../../../libs/angular/cdk/active-indicator/src/lib/models/active-indicator-direction.ts","../../../../libs/angular/cdk/active-indicator/src/lib/models/active-indicator-position.ts","../../../../libs/angular/cdk/active-indicator/src/lib/active-indicator.directive.ts","../../../../libs/angular/cdk/active-indicator/src/odx-angular-cdk-active-indicator.ts"],"sourcesContent":["export type ActiveIndicatorDirection = typeof ActiveIndicatorDirection[keyof typeof ActiveIndicatorDirection];\n\nexport const ActiveIndicatorDirection = {\n  HORIZONTAL: 'horizontal',\n  VERTICAL: 'vertical',\n} as const;\n","export type ActiveIndicatorPosition = typeof ActiveIndicatorPosition[keyof typeof ActiveIndicatorPosition];\n\nexport const ActiveIndicatorPosition = {\n  START: 'start',\n  CENTER: 'center',\n  END: 'end',\n} as const;\n","import { AfterViewInit, Directive, Input, OnChanges } from '@angular/core';\nimport { CSSComponent, CSSModifier } from '@odx/angular/internal';\nimport { fromElementResize$ } from '@odx/angular/rxjs';\nimport { NgChanges, applyStyles, disableCSSTransitions, hasChanged, injectElement, isPresent, px, untilDestroyed } from '@odx/angular/utils';\nimport { BehaviorSubject, EMPTY, distinctUntilChanged, switchMap } from 'rxjs';\nimport { ActiveIndicatorPosition } from './models';\nimport { ActiveIndicatorDirection } from './models/active-indicator-direction';\n\n@CSSComponent('cdk-active-indicator')\n@Directive({\n  standalone: true,\n  selector: '[odxActiveIndicator]',\n})\nexport class ActiveIndicatorDirective implements OnChanges, AfterViewInit {\n  private readonly takeUntilDestroyed = untilDestroyed();\n  private readonly parentElement$$ = new BehaviorSubject<HTMLElement | null>(null);\n  private readonly onResize$ = this.parentElement$$.pipe(\n    distinctUntilChanged(),\n    switchMap((parentElement) => {\n      return parentElement ? fromElementResize$(parentElement) : EMPTY;\n    }),\n  );\n\n  public readonly element = injectElement();\n\n  @CSSModifier()\n  public isActive = false;\n\n  @Input('odxActiveIndicator')\n  public activeElement?: HTMLElement | null = null;\n\n  @Input('odxActiveIndicatorParent')\n  public set parent(value: HTMLElement | null) {\n    this.parentElement$$.next(value);\n  }\n  public get parent(): HTMLElement | null {\n    return this.parentElement$$.getValue();\n  }\n\n  @CSSModifier()\n  @Input('odxActiveIndicatorDirection')\n  public direction: ActiveIndicatorDirection = ActiveIndicatorDirection.HORIZONTAL;\n\n  @Input('odxActiveIndicatorPosition')\n  public position: ActiveIndicatorPosition = ActiveIndicatorPosition.CENTER;\n\n  public ngAfterViewInit(): void {\n    this.onResize$.pipe(this.takeUntilDestroyed()).subscribe(() => this.updateStyles());\n    this.parent ??= this.element.nativeElement.parentElement;\n  }\n\n  public ngOnChanges(changes: NgChanges<ActiveIndicatorDirective>): void {\n    if (hasChanged(changes, 'activeElement', false)) {\n      this.isActive = !!this.activeElement;\n    }\n    if (hasChanged(changes, ['activeElement', 'direction', 'position'])) {\n      this.updateStyles(!isPresent(changes.activeElement?.previousValue));\n    }\n  }\n\n  private updateStyles(disableTransition = false): void {\n    if (!this.activeElement) return;\n    const isHorizontal = this.direction === ActiveIndicatorDirection.HORIZONTAL;\n    const isVertical = this.direction === ActiveIndicatorDirection.VERTICAL;\n    const relativeOffset = this.getIndicatorRelativeOffset();\n\n    let transform = null;\n    if (isHorizontal) {\n      const positionX = this.getIndicatorPositionX(this.activeElement);\n      transform = `translateX(${px(positionX)}) translateX(${relativeOffset}%)`;\n    }\n    if (isVertical) {\n      const positionY = this.getIndicatorPositionY(this.activeElement);\n      transform = `translateY(${px(positionY)}) translateY(${relativeOffset}%)`;\n    }\n\n    disableTransition && disableCSSTransitions(this.element.nativeElement, true);\n    applyStyles(this.element.nativeElement, {\n      transform,\n      width: isHorizontal ? px(this.activeElement.offsetWidth) : null,\n      height: isVertical ? px(this.activeElement.offsetHeight) : null,\n    });\n    disableTransition && disableCSSTransitions(this.element.nativeElement, false);\n  }\n\n  private getIndicatorPositionX(activeElement: HTMLElement): number {\n    switch (this.position) {\n      case ActiveIndicatorPosition.START:\n        return activeElement.offsetLeft;\n      case ActiveIndicatorPosition.CENTER:\n        return activeElement.offsetLeft + activeElement.offsetWidth / 2;\n      case ActiveIndicatorPosition.END:\n        return activeElement.offsetLeft + activeElement.offsetWidth;\n    }\n  }\n\n  private getIndicatorPositionY(activeElement: HTMLElement): number {\n    switch (this.position) {\n      case ActiveIndicatorPosition.START:\n        return activeElement.offsetTop;\n      case ActiveIndicatorPosition.CENTER:\n        return activeElement.offsetTop + activeElement.offsetHeight / 2;\n      case ActiveIndicatorPosition.END:\n        return activeElement.offsetTop + activeElement.offsetHeight;\n    }\n  }\n\n  private getIndicatorRelativeOffset(): number {\n    switch (this.position) {\n      case ActiveIndicatorPosition.START:\n        return 0;\n      case ActiveIndicatorPosition.CENTER:\n        return -50;\n      case ActiveIndicatorPosition.END:\n        return -100;\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"odx-angular-cdk-active-indicator.mjs","sources":["../../../../libs/angular/cdk/active-indicator/src/lib/models/active-indicator-direction.ts","../../../../libs/angular/cdk/active-indicator/src/lib/models/active-indicator-position.ts","../../../../libs/angular/cdk/active-indicator/src/lib/active-indicator.directive.ts","../../../../libs/angular/cdk/active-indicator/src/odx-angular-cdk-active-indicator.ts"],"sourcesContent":["export type ActiveIndicatorDirection = typeof ActiveIndicatorDirection[keyof typeof ActiveIndicatorDirection];\n\nexport const ActiveIndicatorDirection = {\n  HORIZONTAL: 'horizontal',\n  VERTICAL: 'vertical',\n} as const;\n","export type ActiveIndicatorPosition = typeof ActiveIndicatorPosition[keyof typeof ActiveIndicatorPosition];\n\nexport const ActiveIndicatorPosition = {\n  START: 'start',\n  CENTER: 'center',\n  END: 'end',\n} as const;\n","import { AfterViewInit, Directive, Input, OnChanges } from '@angular/core';\nimport { CSSComponent, CSSModifier } from '@odx/angular/internal';\nimport { fromElementResize$ } from '@odx/angular/rxjs';\nimport { NgChanges, applyStyles, disableCSSTransitions, hasChanged, injectElement, isPresent, px, untilDestroyed } from '@odx/angular/utils';\nimport { BehaviorSubject, EMPTY, distinctUntilChanged, switchMap } from 'rxjs';\nimport { ActiveIndicatorPosition } from './models';\nimport { ActiveIndicatorDirection } from './models/active-indicator-direction';\n\n/**\n * `ActiveIndicatorDirective` is designed to adjust an indicator's position and size dynamically to highlight\n * the active element within a container. It's useful for tabs, menus, or any list where an active state is visually represented.\n * The directive can be customized to align the indicator based on the active element's position and supports\n * both horizontal and vertical orientations.\n *\n * To use this directive, apply it to the element you want to use as an active indicator.\n * Then, bind the active element using the `odxActiveIndicator` input. Optionally, specify\n * the container element with `odxActiveIndicatorParent` if the container is not the immediate parent of the indicator.\n *\n * @example\n * ```html\n * <div class=\"tabs-container\" #tabsContainer>\n *   <div class=\"tab\" *ngFor=\"let tab of tabs\" [class.active]=\"tab.isActive\" #tabElement>{{ tab.label }}</div>\n *   <div class=\"indicator\" [odxActiveIndicator]=\"activeTabElement\" [odxActiveIndicatorParent]=\"tabsContainer\"></div>\n * </div>\n * ```\n *\n * ```ts\n * @Component({\n *   selector: 'app-tabs',\n *   templateUrl: './tabs.component.html',\n *   imports: [ActiveIndicatorDirective, NgForOf],\n * })\n * export class TabsComponent {\n *   tabs = [{ label: 'Tab 1', isActive: true }, { label: 'Tab 2', isActive: false }];\n *   @ViewChildren('tabElement') tabElements?: QueryList<ElementRef>;\n *   @ViewChild('tabsContainer') tabsContainer!: ElementRef;\n *\n *   get activeTabElement(): HTMLElement {\n *     const activeTab = this.tabElements?.find((tab) => tab.nativeElement.classList.contains('active'));\n *     return activeTab ? activeTab.nativeElement : null;\n *   }\n * }\n * ```\n */\n@CSSComponent('cdk-active-indicator')\n@Directive({\n  standalone: true,\n  selector: '[odxActiveIndicator]',\n})\nexport class ActiveIndicatorDirective implements OnChanges, AfterViewInit {\n  private readonly takeUntilDestroyed = untilDestroyed();\n  private readonly parentElement$$ = new BehaviorSubject<HTMLElement | null>(null);\n  private readonly onResize$ = this.parentElement$$.pipe(\n    distinctUntilChanged(),\n    switchMap((parentElement) => {\n      return parentElement ? fromElementResize$(parentElement) : EMPTY;\n    }),\n  );\n\n  public readonly element = injectElement();\n\n  /**\n   * Indicates whether the element is active or not.\n   *\n   * @type {boolean}\n   */\n  @CSSModifier()\n  public isActive = false;\n\n  /**\n   * The currently active element to which the indicator should align.\n   * It dynamically updates the indicator's position and size based on this element.\n   *\n   * @type {HTMLElement | null}\n   */\n  @Input('odxActiveIndicator')\n  public activeElement?: HTMLElement | null = null;\n\n  /**\n   * The parent container element of the active elements.\n   * If not set, the indicator's immediate parent element is used.\n   *\n   * @type {HTMLElement | null}\n   */\n  @Input('odxActiveIndicatorParent')\n  public set parent(value: HTMLElement | null) {\n    this.parentElement$$.next(value);\n  }\n  public get parent(): HTMLElement | null {\n    return this.parentElement$$.getValue();\n  }\n\n  /**\n   * The direction in which the indicator should move.\n   *\n   * @type {ActiveIndicatorDirection}\n   */\n  @CSSModifier()\n  @Input('odxActiveIndicatorDirection')\n  public direction: ActiveIndicatorDirection = ActiveIndicatorDirection.HORIZONTAL;\n\n  /**\n   * The position of the indicator relative to the active element.\n   *\n   * @type {ActiveIndicatorPosition}\n   */\n  @Input('odxActiveIndicatorPosition')\n  public position: ActiveIndicatorPosition = ActiveIndicatorPosition.CENTER;\n\n  public ngAfterViewInit(): void {\n    this.onResize$.pipe(this.takeUntilDestroyed()).subscribe(() => this.updateStyles());\n    this.parent ??= this.element.nativeElement.parentElement;\n  }\n\n  public ngOnChanges(changes: NgChanges<ActiveIndicatorDirective>): void {\n    if (hasChanged(changes, 'activeElement', false)) {\n      this.isActive = !!this.activeElement;\n    }\n    if (hasChanged(changes, ['activeElement', 'direction', 'position'])) {\n      this.updateStyles(!isPresent(changes.activeElement?.previousValue));\n    }\n  }\n\n  private updateStyles(disableTransition = false): void {\n    if (!this.activeElement) return;\n    const isHorizontal = this.direction === ActiveIndicatorDirection.HORIZONTAL;\n    const isVertical = this.direction === ActiveIndicatorDirection.VERTICAL;\n    const relativeOffset = this.getIndicatorRelativeOffset();\n\n    let transform = null;\n    if (isHorizontal) {\n      const positionX = this.getIndicatorPositionX(this.activeElement);\n      transform = `translateX(${px(positionX)}) translateX(${relativeOffset}%)`;\n    }\n    if (isVertical) {\n      const positionY = this.getIndicatorPositionY(this.activeElement);\n      transform = `translateY(${px(positionY)}) translateY(${relativeOffset}%)`;\n    }\n\n    disableTransition && disableCSSTransitions(this.element.nativeElement, true);\n    applyStyles(this.element.nativeElement, {\n      transform,\n      width: isHorizontal ? px(this.activeElement.offsetWidth) : null,\n      height: isVertical ? px(this.activeElement.offsetHeight) : null,\n    });\n    disableTransition && disableCSSTransitions(this.element.nativeElement, false);\n  }\n\n  private getIndicatorPositionX(activeElement: HTMLElement): number {\n    switch (this.position) {\n      case ActiveIndicatorPosition.START:\n        return activeElement.offsetLeft;\n      case ActiveIndicatorPosition.CENTER:\n        return activeElement.offsetLeft + activeElement.offsetWidth / 2;\n      case ActiveIndicatorPosition.END:\n        return activeElement.offsetLeft + activeElement.offsetWidth;\n    }\n  }\n\n  private getIndicatorPositionY(activeElement: HTMLElement): number {\n    switch (this.position) {\n      case ActiveIndicatorPosition.START:\n        return activeElement.offsetTop;\n      case ActiveIndicatorPosition.CENTER:\n        return activeElement.offsetTop + activeElement.offsetHeight / 2;\n      case ActiveIndicatorPosition.END:\n        return activeElement.offsetTop + activeElement.offsetHeight;\n    }\n  }\n\n  private getIndicatorRelativeOffset(): number {\n    switch (this.position) {\n      case ActiveIndicatorPosition.START:\n        return 0;\n      case ActiveIndicatorPosition.CENTER:\n        return -50;\n      case ActiveIndicatorPosition.END:\n        return -100;\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/odx-angular-cdk-autocomplete-control.mjs

@@ -8,9 +8,24 @@ import { FormFieldComponent } from '@odx/angular/components/form-field';
 import { untilDestroyed, injectElement, isFunction, Pure } from '@odx/angular/utils';
 import { __decorate, __metadata } from 'tslib';
 
+/**
+ * `AutocompleteControl` is a base directive to enhance an input field with autocomplete functionality,
+ * providing keyboard navigation and selection for options displayed in a dropdown. It's designed to be extended
+ * for specific implementations.
+ * Extends `CustomFormControl` to provide form control behavior and state management.
+ *
+ * @see {CustomFormControl}
+ *
+ * This directive manages the open/close state of the dropdown, the loading state indication, and the interaction between
+ * the autocomplete input and the dropdown options. It utilizes `ActiveDescendantKeyManager` for keyboard navigation among options.
+ *
+ * Extend this directive to create a fully functional autocomplete control tailored to your data type and UI requirements.
+ *
+ * @template T - The type of the items displayed in the autocomplete dropdown.
+ */
 class AutocompleteControl extends CustomFormControl {
     get dropdownReferenceElement() {
-        return this.formField?.controlElement.nativeElement ?? this.element.nativeElement;
+        return this.formField?.controlElement?.nativeElement ?? this.element?.nativeElement;
     }
     get hasOptions() {
         return !!this.options?.length;
@@ -26,6 +41,18 @@ class AutocompleteControl extends CustomFormControl {
         this.smoothScrollEnabled = false;
         this.element = injectElement();
         this.isLoading = false;
+        /**
+         * Emits the selected option when an option is selected from the dropdown.
+         *
+         * @emits {T} - The selected option.
+         *
+         * @example
+         * ```ts
+         * autocompleteControl.optionSelected.subscribe((selectedOption) => {
+         *   console.log('Selected option:', selectedOption);
+         * });
+         * ```
+         */
         this.optionSelected = new EventEmitter();
         detectControllerChanges(this).subscribe();
     }
@@ -36,6 +63,17 @@ class AutocompleteControl extends CustomFormControl {
         this.handleQueryListOption(this.options);
         this.handleSearchFieldChanges();
     }
+    /**
+     * Scrolls the specified option element into view.
+     * @param {OptionControl<T>} option - The option control containing the element to scroll into view.
+     * @returns {void}
+     *
+     * @example
+     * ```ts
+     * const optionControl: OptionControl<string> = { element: myOptionElement };
+     * scrollOptionIntoView(optionControl);
+     * ```
+     */
     scrollOptionIntoView({ element }) {
         const behavior = this.smoothScrollEnabled ? 'smooth' : undefined;
         if (isFunction(element.nativeElement.scrollIntoView)) {