@odx/angular 12.26.1 → 13.0.1

package/components/wizard/index.d.ts

@@ -1,3 +1,159 @@
-export * from './lib/components';
-export * from './lib/wizard.component';
-export * from './lib/wizard.module';
+import * as i0 from '@angular/core';
+import { AfterViewInit, QueryList, EventEmitter } from '@angular/core';
+import { Subject } from 'rxjs';
+import * as i1 from '@odx/angular';
+
+/**
+ * WizardStepComponent represents an individual step within a wizard navigation sequence. It can be configured
+ * to display icons, listen for user interactions, and indicate various states such as active, passed, or valid.
+ * This component interacts with the WizardComponent to manage the step progression and visibility.
+ *
+ * Has host directives WithTabIndex and WithDisabledState.
+ *
+ * @see {WithTabIndex}
+ * @see {WithDisabledState}
+ */
+declare class WizardStepComponent {
+    readonly element: i0.ElementRef<HTMLElement>;
+    /**
+     * Emitted when the step is chosen by the user, indicating that the step should be activated.
+     *
+     * @emits {WizardStepComponent} The chosen step.
+     */
+    readonly stepChosen$: Subject<WizardStepComponent>;
+    /**
+     * Indicates if this step was the last one interacted with in the wizard sequence.
+     *
+     * @type {boolean}
+     */
+    isLastTouched: boolean;
+    /**
+     * Indicates if this step is currently active.
+     *
+     * @type {boolean}
+     */
+    active: boolean;
+    /**
+     * Indicates if this step has been passed in the navigation sequence.
+     *
+     * @type {boolean}
+     */
+    passed: boolean;
+    /**
+     * Controls the visibility of this step in the UI.
+     *
+     * @type {boolean}
+     */
+    visible: boolean;
+    /**
+     * Indicates if this step is valid and can be progressed to.
+     *
+     * @type {boolean}
+     * @default false
+     */
+    valid: boolean;
+    /**
+     * Indicates if this step has been touched by the user.
+     *
+     * @type {boolean}
+     */
+    touched: boolean;
+    /**
+     * Sets the validation state of this step.
+     *
+     * @param {boolean} state - The new validation state.
+     */
+    setValid(state: boolean): void;
+    protected chooseStep(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WizardStepComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WizardStepComponent, "odx-wizard-step", never, { "valid": { "alias": "valid"; "required": false; }; }, {}, never, ["*"], true, [{ directive: typeof i1.WithTabIndex; inputs: {}; outputs: {}; }, { directive: typeof i1.WithDisabledState; inputs: {}; outputs: {}; }]>;
+}
+
+/**
+ * WizardComponent manages a series of steps, providing functionality for navigating forwards and backwards
+ * through the steps. It dynamically adjusts the visibility of steps based on the available space and current active step.
+ * The component supports both horizontal and vertical orientations.
+ */
+declare class WizardComponent implements AfterViewInit {
+    private readonly destroyed;
+    private readonly renderer;
+    private readonly responsive$;
+    private visibleStepsSegments;
+    private readonly dottedLineStart;
+    private readonly dottedLineEnd;
+    private readonly windowRef;
+    protected readonly steps: QueryList<WizardStepComponent>;
+    readonly activeStep: i0.WritableSignal<number>;
+    readonly element: i0.ElementRef<HTMLElement>;
+    /**
+     * Indicates if the wizard layout should be vertical. When true, the wizard orientation changes to vertical.
+     *
+     * @type {boolean}
+     * @default false
+     */
+    vertical: boolean;
+    /**
+     * Indicates whether the wizard component is responsive
+     * and hides the steps that do not fit in the available space.
+     */
+    set responsive(value: boolean);
+    /**
+     * Event emitted when the active step changes, providing the index of the new active step.
+     *
+     * @emits {number}
+     */
+    activeStepChanged: EventEmitter<number>;
+    ngAfterViewInit(): void;
+    /**
+     * Navigates to the next step in the wizard.
+     */
+    nextStep(): void;
+    /**
+     * Navigates to the previous step in the wizard.
+     */
+    previousStep(): void;
+    /**
+     * Sets the active step valid.
+     */
+    setActiveStepValid(): void;
+    /**
+     * Sets the validity of a step at the specified index.
+     *
+     * @param {number} stepIndex - Index of the step to set validity.
+     * @param {boolean} valid - Whether the step should be valid or not.
+     */
+    setStepValid(stepIndex: number, valid: boolean): void;
+    /**
+     * Returns whether the step at the specified index is valid.
+     *
+     * @param {number} stepIndex - Index of the step to check validity.
+     * @returns {boolean} - Whether the step is valid or not.
+     */
+    isStepValid(stepIndex: number): boolean;
+    /**
+     * Returns whether the current active step is valid.
+     *
+     * @returns {boolean} - Whether the current step is valid or not.
+     */
+    isCurrentStepValid(): boolean;
+    private calculateVisibleStepsSegments;
+    private getStyleFromCSS;
+    private setActiveStep;
+    private clickStepSubscriber;
+    private changeStepHandler;
+    private setHiddenSteps;
+    private isNeighbors;
+    private setDottedLineActive;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WizardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WizardComponent, "odx-wizard", never, { "vertical": { "alias": "vertical"; "required": false; }; "responsive": { "alias": "responsive"; "required": false; }; }, { "activeStepChanged": "activeStepChanged"; }, ["steps"], ["odx-wizard-step"], true, never>;
+    static ngAcceptInputType_vertical: unknown;
+    static ngAcceptInputType_responsive: unknown;
+}
+
+declare class WizardModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<WizardModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<WizardModule, never, [typeof WizardComponent, typeof WizardStepComponent], [typeof i1.CoreModule, typeof WizardComponent, typeof WizardStepComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<WizardModule>;
+}
+
+export { WizardComponent, WizardModule, WizardStepComponent };

package/fesm2022/odx-angular-animations.mjs

@@ -43,6 +43,9 @@ const DEFAULT_ANIMATION_PARAMS = {
  * The animation smoothly transitions various properties (height, padding, margin, and opacity) and is controlled
  * through parameters defined in `DEFAULT_ANIMATION_PARAMS` or those provided during usage.
  */
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
 const expand = animation([
     style({ height: 0, minHeight: 0, paddingTop: 0, paddingBottom: 0, opacity: 0, marginTop: 0, marginBottom: 0, overflow: 'hidden' }),
     animate('{{duration}} {{ delay }} {{ timingFn }}', style({ height: '*', paddingTop: '*', paddingBottom: '*', opacity: 1, marginTop: '*', marginBottom: '*' })),
@@ -58,6 +61,9 @@ const expand = animation([
  * when using the animation. It's designed to be used in conjunction with the `expand` animation for creating
  * expandable/collapsible elements.
  */
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
 const collapse = animation([
     animate('{{duration}} {{ delay }} {{ timingFn }}', style({ height: 0, minHeight: 0, paddingTop: 0, paddingBottom: 0, opacity: 0, marginTop: 0, marginBottom: 0, overflow: 'hidden' })),
 ], {
@@ -101,6 +107,9 @@ const collapse = animation([
  *
  * This example demonstrates how to apply the fadeIn animation to an element, making it smoothly appear on the screen.
  */
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
 const fadeIn = (to = 1) => animation([style({ opacity: 0 }), animate('{{duration}} {{ delay }} {{ timingFn }}', style({ opacity: to }))], {
     params: DEFAULT_ANIMATION_PARAMS,
 });
@@ -141,6 +150,9 @@ const fadeIn = (to = 1) => animation([style({ opacity: 0 }), animate('{{duration
  *
  * This example demonstrates how to apply the fadeOut animation to an element, making it smoothly disappear from the screen.
  */
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
 const fadeOut = (to = 0) => animation([animate('{{duration}} {{ delay }} {{ timingFn }}', style({ opacity: to }))], {
     params: DEFAULT_ANIMATION_PARAMS,
 });
@@ -185,17 +197,53 @@ function createSlideOutAnimation(to, direction) {
  * Note: The 'from' and 'to' parameters for slideIn and slideOut functions respectively
  * can be customized for different slide distances.
  */
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
 const slideInX = (from) => createSlideInAnimation(from, 'X');
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
 const slideInY = (from) => createSlideInAnimation(from, 'Y');
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
 const slideInDown = slideInY('-100%');
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
 const slideInUp = slideInY('100%');
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
 const slideInLeft = slideInX('-100%');
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
 const slideInRight = slideInX('100%');
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
 const slideOutX = (to) => createSlideOutAnimation(to, 'X');
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
 const slideOutY = (to) => createSlideOutAnimation(to, 'Y');
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
 const slideOutDown = slideOutY('100%');
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
 const slideOutUp = slideOutY('-100%');
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
 const slideOutLeft = slideOutX('-100%');
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
 const slideOutRight = slideOutX('100%');
 
 /**
@@ -236,6 +284,9 @@ const slideOutRight = slideOutX('100%');
  * ensuring that any child component animations are completed before continuing with the parent's
  * own animations.
  */
+/**
+ * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).
+ */
 const waitForChildAnimations = transition(':enter, :leave', [query('@*', animateChild(), { optional: true })]);
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"odx-angular-animations.mjs","sources":["../../../../libs/angular/animations/src/lib/config.ts","../../../../libs/angular/animations/src/lib/expand.ts","../../../../libs/angular/animations/src/lib/fade.ts","../../../../libs/angular/animations/src/lib/slide.ts","../../../../libs/angular/animations/src/lib/wait-for-child-animations.ts","../../../../libs/angular/animations/src/odx-angular-animations.ts"],"sourcesContent":["export const DEFAULT_ANIMATION_TIMING_FN = 'ease';\nexport const DEFAULT_ANIMATION_DURATION = '250ms';\nexport const DEFAULT_ANIMATION_PARAMS = {\n  timingFn: DEFAULT_ANIMATION_TIMING_FN,\n  duration: DEFAULT_ANIMATION_DURATION,\n  delay: '0ms',\n};\n","import { animate, animation, style } from '@angular/animations';\nimport { DEFAULT_ANIMATION_PARAMS } from './config';\n\n/**\n * Animation for smoothly expanding an element from height 0 to its natural height.\n * It transitions the element's height, padding, margin, and opacity from a collapsed state to an expanded state,\n * making the element smoothly grow into view.\n *\n * The `expand` animation uses `DEFAULT_ANIMATION_PARAMS` for its default parameters, which can be overridden\n * when using the animation.\n *\n * @example\n * ```ts\n * // Example usage in an Angular component\n * import { expand, collapse } from '@odx/angular/animations';\n *\n * @Component({\n *   selector: 'my-expandable-component',\n *   templateUrl: './expandable-component.html',\n *   animations: [\n *     trigger('expandCollapse', [\n *       transition('collapsed => expanded', useAnimation(expand)),\n *       transition('expanded => collapsed', useAnimation(collapse)),\n *     ])\n *   ]\n * })\n * export class ExpandableComponent {\n *   state = 'collapsed';\n *\n *   toggle(): void {\n *     this.state = this.state === 'collapsed' ? 'expanded' : 'collapsed';\n *   }\n * }\n * ```\n *\n * The animation smoothly transitions various properties (height, padding, margin, and opacity) and is controlled\n * through parameters defined in `DEFAULT_ANIMATION_PARAMS` or those provided during usage.\n */\nexport const expand = animation(\n  [\n    style({ height: 0, minHeight: 0, paddingTop: 0, paddingBottom: 0, opacity: 0, marginTop: 0, marginBottom: 0, overflow: 'hidden' }),\n    animate(\n      '{{duration}} {{ delay }} {{ timingFn }}',\n      style({ height: '*', paddingTop: '*', paddingBottom: '*', opacity: 1, marginTop: '*', marginBottom: '*' }),\n    ),\n  ],\n  {\n    params: DEFAULT_ANIMATION_PARAMS,\n  },\n);\n\n/**\n * Animation for smoothly collapsing an element from its natural height to height 0.\n * It transitions the element's height, padding, margin, and opacity from an expanded state to a collapsed state,\n * making the element smoothly shrink out of view.\n *\n * The `collapse` animation also uses `DEFAULT_ANIMATION_PARAMS` for its default parameters, which can be overridden\n * when using the animation. It's designed to be used in conjunction with the `expand` animation for creating\n * expandable/collapsible elements.\n */\nexport const collapse = animation(\n  [\n    animate(\n      '{{duration}} {{ delay }} {{ timingFn }}',\n      style({ height: 0, minHeight: 0, paddingTop: 0, paddingBottom: 0, opacity: 0, marginTop: 0, marginBottom: 0, overflow: 'hidden' }),\n    ),\n  ],\n  {\n    params: DEFAULT_ANIMATION_PARAMS,\n  },\n);\n","import { animate, animation, style } from '@angular/animations';\nimport { DEFAULT_ANIMATION_PARAMS } from './config';\n\n/**\n * Generates a fadeIn animation with customizable opacity target.\n * This animation gradually changes the element's opacity from 0 to a specified value, creating a \"fade in\" visual effect.\n *\n * @param {number} to - The final opacity value of the element at the end of the animation. Defaults to 1 (fully opaque).\n * @returns {AnimationReferenceMetadata} An Angular animation object that can be used with Angular's animation system.\n *\n * @example\n * ```ts\n * // Example usage in an Angular component with a fadeIn animation\n * import { fadeIn } from '@odx/angular/animations';\n * import { trigger, transition, useAnimation } from '@angular/animations';\n *\n * @Component({\n *   selector: 'app-fade-in-example',\n *   template: `\n *      @if(isVisible) {\n *       <div @fadeInAnimation>Fade In Content</div>\n *      }\n *       <button (click)=\"showContent()\">Show Content</button>`,\n *   animations: [\n *     trigger('fadeInAnimation', [\n *       transition(':enter', useAnimation(fadeIn(), { params: { duration: '500ms' } }))\n *     ])\n *   ]\n * })\n * export class FadeInExampleComponent {\n *   isVisible = false;\n *\n *   showContent(): void {\n *     this.isVisible = true;\n *   }\n * }\n * ```\n *\n * This example demonstrates how to apply the fadeIn animation to an element, making it smoothly appear on the screen.\n */\nexport const fadeIn = (to = 1) =>\n  animation([style({ opacity: 0 }), animate('{{duration}} {{ delay }} {{ timingFn }}', style({ opacity: to }))], {\n    params: DEFAULT_ANIMATION_PARAMS,\n  });\n\n/**\n * Generates a fadeOut animation with customizable opacity target.\n * This animation gradually changes the element's opacity from its current value to a specified value, creating a \"fade out\" visual effect.\n *\n * @param {number} to - The target opacity value of the element at the end of the animation. Defaults to 0 (fully transparent).\n * @returns {AnimationReferenceMetadata} An Angular animation object that can be used with Angular's animation system.\n *\n * @example\n * ```ts\n * // Example usage in an Angular component with a fadeOut animation\n * import { fadeOut } from '@odx/angular/animations';\n * import { trigger, transition, useAnimation } from '@angular/animations';\n *\n * @Component({\n *   selector: 'app-fade-out-example',\n *   template: `\n *      @if(isVisible) {\n *      <div @fadeOutAnimation>Fade Out Content</div>\n *      }\n *      <button (click)=\"hideContent()\">Hide Content</button>`,\n *   animations: [\n *     trigger('fadeOutAnimation', [\n *       transition(':leave', useAnimation(fadeOut(), { params: { duration: '500ms' } }))\n *     ])\n *   ]\n * })\n * export class FadeOutExampleComponent {\n *   isVisible = true;\n *\n *   hideContent(): void {\n *     this.isVisible = false;\n *   }\n * }\n * ```\n *\n * This example demonstrates how to apply the fadeOut animation to an element, making it smoothly disappear from the screen.\n */\nexport const fadeOut = (to = 0) =>\n  animation([animate('{{duration}} {{ delay }} {{ timingFn }}', style({ opacity: to }))], {\n    params: DEFAULT_ANIMATION_PARAMS,\n  });\n","import { animate, animation, AnimationReferenceMetadata, style } from '@angular/animations';\nimport { DEFAULT_ANIMATION_PARAMS } from './config';\n\nfunction createSlideInAnimation(from: string, direction: 'X' | 'Y'): AnimationReferenceMetadata {\n  return animation(\n    [\n      style({ transform: `translate${direction}({{ from }})` }),\n      animate('{{duration}} {{ delay }} {{ timingFn }}', style({ transform: `translate${direction}(0)` })),\n    ],\n    {\n      params: {\n        ...DEFAULT_ANIMATION_PARAMS,\n        from,\n      },\n    },\n  );\n}\n\nfunction createSlideOutAnimation(to: string, direction: 'X' | 'Y'): AnimationReferenceMetadata {\n  return animation([animate('{{duration}} {{ delay }} {{ timingFn }}', style({ transform: `translate${direction}({{ to }})` }))], {\n    params: {\n      ...DEFAULT_ANIMATION_PARAMS,\n      to,\n    },\n  });\n}\n\n/**\n * Utility functions for creating slide-in and slide-out animations in specific directions.\n * These include slideInX, slideInY, slideInDown, slideInUp, slideInLeft, slideInRight,\n * slideOutX, slideOutY, slideOutDown, slideOutUp, slideOutLeft, and slideOutRight.\n * Each function is configured for a specific slide direction and distance, making it easy to apply\n * consistent slide animations across your application.\n *\n * @example\n * ```ts\n * // Using slideInLeft and slideOutRight in a component\n * animations: [\n *   trigger('slideInOut', [\n *     transition(':enter', [useAnimation(slideInLeft)]),\n *     transition(':leave', [useAnimation(slideOutRight)])\n *   ])\n * ]\n * ```\n *\n * Note: The 'from' and 'to' parameters for slideIn and slideOut functions respectively\n * can be customized for different slide distances.\n */\nexport const slideInX = (from: string) => createSlideInAnimation(from, 'X');\nexport const slideInY = (from: string) => createSlideInAnimation(from, 'Y');\nexport const slideInDown = slideInY('-100%');\nexport const slideInUp = slideInY('100%');\nexport const slideInLeft = slideInX('-100%');\nexport const slideInRight = slideInX('100%');\n\nexport const slideOutX = (to: string) => createSlideOutAnimation(to, 'X');\nexport const slideOutY = (to: string) => createSlideOutAnimation(to, 'Y');\nexport const slideOutDown = slideOutY('100%');\nexport const slideOutUp = slideOutY('-100%');\nexport const slideOutLeft = slideOutX('-100%');\nexport const slideOutRight = slideOutX('100%');\n","import { animateChild, query, transition } from '@angular/animations';\n\n/**\n * Utility animation that waits for animations on child components to complete.\n * This animation should be used within parent components that have child components with their\n * own animations. It ensures that the parent's enter and leave animations are only triggered\n * after all child animations have completed, creating a seamless animation sequence.\n *\n * This utility uses Angular's animation functions `query` and `animateChild` to find and animate\n * child elements marked with Angular's animation triggers. The `{ optional: true }` parameter\n * ensures that the animation gracefully handles cases where no child animations are defined.\n *\n * @example\n * ```ts\n * // Using waitForChildAnimations in a parent component with children that have animations\n * import { trigger, transition, style, animate, query, animateChild } from '@angular/animations';\n * import { waitForChildAnimations } from '@odx/angular/animations';\n *\n * @Component({\n *   selector: 'app-parent',\n *   templateUrl: './parent.component.html',\n *   animations: [\n *     trigger('parentAnimation', [\n *       // Define parent animations here\n *       transition(':enter', [style({ opacity: 0 }), animate('0.5s ease-in', style({ opacity: 1 }))]),\n *       transition(':leave', [animate('0.5s ease-out', style({ opacity: 0 }))]),\n *       // Use waitForChildAnimations for coordinating with child animations\n *       waitForChildAnimations\n *     ])\n *   ]\n * })\n * export class ParentComponent {\n *   // Component logic here\n * }\n * ```\n *\n * Note: The `waitForChildAnimations` utility is added to the parent component's animation triggers,\n * ensuring that any child component animations are completed before continuing with the parent's\n * own animations.\n */\nexport const waitForChildAnimations = transition(':enter, :leave', [query('@*', animateChild(), { optional: true })]);\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;AAAO,MAAM,2BAA2B,GAAG;AACpC,MAAM,0BAA0B,GAAG;AACnC,MAAM,wBAAwB,GAAG;AACtC,IAAA,QAAQ,EAAE,2BAA2B;AACrC,IAAA,QAAQ,EAAE,0BAA0B;AACpC,IAAA,KAAK,EAAE,KAAK;;;ACFd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCG;AACI,MAAM,MAAM,GAAG,SAAS,CAC7B;AACE,IAAA,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;AAClI,IAAA,OAAO,CACL,yCAAyC,EACzC,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,CAC3G;CACF,EACD;AACE,IAAA,MAAM,EAAE,wBAAwB;AACjC,CAAA;AAGH;;;;;;;;AAQG;AACI,MAAM,QAAQ,GAAG,SAAS,CAC/B;AACE,IAAA,OAAO,CACL,yCAAyC,EACzC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CACnI;CACF,EACD;AACE,IAAA,MAAM,EAAE,wBAAwB;AACjC,CAAA;;AClEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCG;AACI,MAAM,MAAM,GAAG,CAAC,EAAE,GAAG,CAAC,KAC3B,SAAS,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC,yCAAyC,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE;AAC7G,IAAA,MAAM,EAAE,wBAAwB;AACjC,CAAA;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCG;AACI,MAAM,OAAO,GAAG,CAAC,EAAE,GAAG,CAAC,KAC5B,SAAS,CAAC,CAAC,OAAO,CAAC,yCAAyC,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE;AACtF,IAAA,MAAM,EAAE,wBAAwB;AACjC,CAAA;;AClFH,SAAS,sBAAsB,CAAC,IAAY,EAAE,SAAoB,EAAA;AAChE,IAAA,OAAO,SAAS,CACd;QACE,KAAK,CAAC,EAAE,SAAS,EAAE,YAAY,SAAS,CAAA,YAAA,CAAc,EAAE,CAAC;AACzD,QAAA,OAAO,CAAC,yCAAyC,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,CAAA,SAAA,EAAY,SAAS,CAAA,GAAA,CAAK,EAAE,CAAC,CAAC;KACrG,EACD;AACE,QAAA,MAAM,EAAE;AACN,YAAA,GAAG,wBAAwB;YAC3B,IAAI;AACL,SAAA;AACF,KAAA,CACF;AACH;AAEA,SAAS,uBAAuB,CAAC,EAAU,EAAE,SAAoB,EAAA;AAC/D,IAAA,OAAO,SAAS,CAAC,CAAC,OAAO,CAAC,yCAAyC,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,YAAY,SAAS,CAAA,UAAA,CAAY,EAAE,CAAC,CAAC,CAAC,EAAE;AAC9H,QAAA,MAAM,EAAE;AACN,YAAA,GAAG,wBAAwB;YAC3B,EAAE;AACH,SAAA;AACF,KAAA,CAAC;AACJ;AAEA;;;;;;;;;;;;;;;;;;;;AAoBG;AACI,MAAM,QAAQ,GAAG,CAAC,IAAY,KAAK,sBAAsB,CAAC,IAAI,EAAE,GAAG;AACnE,MAAM,QAAQ,GAAG,CAAC,IAAY,KAAK,sBAAsB,CAAC,IAAI,EAAE,GAAG;MAC7D,WAAW,GAAG,QAAQ,CAAC,OAAO;MAC9B,SAAS,GAAG,QAAQ,CAAC,MAAM;MAC3B,WAAW,GAAG,QAAQ,CAAC,OAAO;MAC9B,YAAY,GAAG,QAAQ,CAAC,MAAM;AAEpC,MAAM,SAAS,GAAG,CAAC,EAAU,KAAK,uBAAuB,CAAC,EAAE,EAAE,GAAG;AACjE,MAAM,SAAS,GAAG,CAAC,EAAU,KAAK,uBAAuB,CAAC,EAAE,EAAE,GAAG;MAC3D,YAAY,GAAG,SAAS,CAAC,MAAM;MAC/B,UAAU,GAAG,SAAS,CAAC,OAAO;MAC9B,YAAY,GAAG,SAAS,CAAC,OAAO;MAChC,aAAa,GAAG,SAAS,CAAC,MAAM;;AC1D7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCG;AACI,MAAM,sBAAsB,GAAG,UAAU,CAAC,gBAAgB,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;;ACxCpH;;AAEG;;;;"}
+{"version":3,"file":"odx-angular-animations.mjs","sources":["../../../../libs/angular/animations/src/lib/config.ts","../../../../libs/angular/animations/src/lib/expand.ts","../../../../libs/angular/animations/src/lib/fade.ts","../../../../libs/angular/animations/src/lib/slide.ts","../../../../libs/angular/animations/src/lib/wait-for-child-animations.ts","../../../../libs/angular/animations/src/odx-angular-animations.ts"],"sourcesContent":["export const DEFAULT_ANIMATION_TIMING_FN = 'ease';\nexport const DEFAULT_ANIMATION_DURATION = '250ms';\nexport const DEFAULT_ANIMATION_PARAMS = {\n  timingFn: DEFAULT_ANIMATION_TIMING_FN,\n  duration: DEFAULT_ANIMATION_DURATION,\n  delay: '0ms',\n};\n","import { animate, animation, style } from '@angular/animations';\nimport { DEFAULT_ANIMATION_PARAMS } from './config';\n\n/**\n * Animation for smoothly expanding an element from height 0 to its natural height.\n * It transitions the element's height, padding, margin, and opacity from a collapsed state to an expanded state,\n * making the element smoothly grow into view.\n *\n * The `expand` animation uses `DEFAULT_ANIMATION_PARAMS` for its default parameters, which can be overridden\n * when using the animation.\n *\n * @example\n * ```ts\n * // Example usage in an Angular component\n * import { expand, collapse } from '@odx/angular/animations';\n *\n * @Component({\n *   selector: 'my-expandable-component',\n *   templateUrl: './expandable-component.html',\n *   animations: [\n *     trigger('expandCollapse', [\n *       transition('collapsed => expanded', useAnimation(expand)),\n *       transition('expanded => collapsed', useAnimation(collapse)),\n *     ])\n *   ]\n * })\n * export class ExpandableComponent {\n *   state = 'collapsed';\n *\n *   toggle(): void {\n *     this.state = this.state === 'collapsed' ? 'expanded' : 'collapsed';\n *   }\n * }\n * ```\n *\n * The animation smoothly transitions various properties (height, padding, margin, and opacity) and is controlled\n * through parameters defined in `DEFAULT_ANIMATION_PARAMS` or those provided during usage.\n */\n/**\n * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).\n */\nexport const expand = animation(\n  [\n    style({ height: 0, minHeight: 0, paddingTop: 0, paddingBottom: 0, opacity: 0, marginTop: 0, marginBottom: 0, overflow: 'hidden' }),\n    animate(\n      '{{duration}} {{ delay }} {{ timingFn }}',\n      style({ height: '*', paddingTop: '*', paddingBottom: '*', opacity: 1, marginTop: '*', marginBottom: '*' }),\n    ),\n  ],\n  {\n    params: DEFAULT_ANIMATION_PARAMS,\n  },\n);\n\n/**\n * Animation for smoothly collapsing an element from its natural height to height 0.\n * It transitions the element's height, padding, margin, and opacity from an expanded state to a collapsed state,\n * making the element smoothly shrink out of view.\n *\n * The `collapse` animation also uses `DEFAULT_ANIMATION_PARAMS` for its default parameters, which can be overridden\n * when using the animation. It's designed to be used in conjunction with the `expand` animation for creating\n * expandable/collapsible elements.\n */\n/**\n * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).\n */\nexport const collapse = animation(\n  [\n    animate(\n      '{{duration}} {{ delay }} {{ timingFn }}',\n      style({ height: 0, minHeight: 0, paddingTop: 0, paddingBottom: 0, opacity: 0, marginTop: 0, marginBottom: 0, overflow: 'hidden' }),\n    ),\n  ],\n  {\n    params: DEFAULT_ANIMATION_PARAMS,\n  },\n);\n","import { animate, animation, style } from '@angular/animations';\nimport { DEFAULT_ANIMATION_PARAMS } from './config';\n\n/**\n * Generates a fadeIn animation with customizable opacity target.\n * This animation gradually changes the element's opacity from 0 to a specified value, creating a \"fade in\" visual effect.\n *\n * @param {number} to - The final opacity value of the element at the end of the animation. Defaults to 1 (fully opaque).\n * @returns {AnimationReferenceMetadata} An Angular animation object that can be used with Angular's animation system.\n *\n * @example\n * ```ts\n * // Example usage in an Angular component with a fadeIn animation\n * import { fadeIn } from '@odx/angular/animations';\n * import { trigger, transition, useAnimation } from '@angular/animations';\n *\n * @Component({\n *   selector: 'app-fade-in-example',\n *   template: `\n *      @if(isVisible) {\n *       <div @fadeInAnimation>Fade In Content</div>\n *      }\n *       <button (click)=\"showContent()\">Show Content</button>`,\n *   animations: [\n *     trigger('fadeInAnimation', [\n *       transition(':enter', useAnimation(fadeIn(), { params: { duration: '500ms' } }))\n *     ])\n *   ]\n * })\n * export class FadeInExampleComponent {\n *   isVisible = false;\n *\n *   showContent(): void {\n *     this.isVisible = true;\n *   }\n * }\n * ```\n *\n * This example demonstrates how to apply the fadeIn animation to an element, making it smoothly appear on the screen.\n */\n/**\n * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).\n */\nexport const fadeIn = (to = 1) =>\n  animation([style({ opacity: 0 }), animate('{{duration}} {{ delay }} {{ timingFn }}', style({ opacity: to }))], {\n    params: DEFAULT_ANIMATION_PARAMS,\n  });\n\n/**\n * Generates a fadeOut animation with customizable opacity target.\n * This animation gradually changes the element's opacity from its current value to a specified value, creating a \"fade out\" visual effect.\n *\n * @param {number} to - The target opacity value of the element at the end of the animation. Defaults to 0 (fully transparent).\n * @returns {AnimationReferenceMetadata} An Angular animation object that can be used with Angular's animation system.\n *\n * @example\n * ```ts\n * // Example usage in an Angular component with a fadeOut animation\n * import { fadeOut } from '@odx/angular/animations';\n * import { trigger, transition, useAnimation } from '@angular/animations';\n *\n * @Component({\n *   selector: 'app-fade-out-example',\n *   template: `\n *      @if(isVisible) {\n *      <div @fadeOutAnimation>Fade Out Content</div>\n *      }\n *      <button (click)=\"hideContent()\">Hide Content</button>`,\n *   animations: [\n *     trigger('fadeOutAnimation', [\n *       transition(':leave', useAnimation(fadeOut(), { params: { duration: '500ms' } }))\n *     ])\n *   ]\n * })\n * export class FadeOutExampleComponent {\n *   isVisible = true;\n *\n *   hideContent(): void {\n *     this.isVisible = false;\n *   }\n * }\n * ```\n *\n * This example demonstrates how to apply the fadeOut animation to an element, making it smoothly disappear from the screen.\n */\n/**\n * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).\n */\nexport const fadeOut = (to = 0) =>\n  animation([animate('{{duration}} {{ delay }} {{ timingFn }}', style({ opacity: to }))], {\n    params: DEFAULT_ANIMATION_PARAMS,\n  });\n","import { animate, animation, AnimationReferenceMetadata, style } from '@angular/animations';\nimport { DEFAULT_ANIMATION_PARAMS } from './config';\n\nfunction createSlideInAnimation(from: string, direction: 'X' | 'Y'): AnimationReferenceMetadata {\n  return animation(\n    [\n      style({ transform: `translate${direction}({{ from }})` }),\n      animate('{{duration}} {{ delay }} {{ timingFn }}', style({ transform: `translate${direction}(0)` })),\n    ],\n    {\n      params: {\n        ...DEFAULT_ANIMATION_PARAMS,\n        from,\n      },\n    },\n  );\n}\n\nfunction createSlideOutAnimation(to: string, direction: 'X' | 'Y'): AnimationReferenceMetadata {\n  return animation([animate('{{duration}} {{ delay }} {{ timingFn }}', style({ transform: `translate${direction}({{ to }})` }))], {\n    params: {\n      ...DEFAULT_ANIMATION_PARAMS,\n      to,\n    },\n  });\n}\n\n/**\n * Utility functions for creating slide-in and slide-out animations in specific directions.\n * These include slideInX, slideInY, slideInDown, slideInUp, slideInLeft, slideInRight,\n * slideOutX, slideOutY, slideOutDown, slideOutUp, slideOutLeft, and slideOutRight.\n * Each function is configured for a specific slide direction and distance, making it easy to apply\n * consistent slide animations across your application.\n *\n * @example\n * ```ts\n * // Using slideInLeft and slideOutRight in a component\n * animations: [\n *   trigger('slideInOut', [\n *     transition(':enter', [useAnimation(slideInLeft)]),\n *     transition(':leave', [useAnimation(slideOutRight)])\n *   ])\n * ]\n * ```\n *\n * Note: The 'from' and 'to' parameters for slideIn and slideOut functions respectively\n * can be customized for different slide distances.\n */\n/**\n * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).\n */\nexport const slideInX = (from: string) => createSlideInAnimation(from, 'X');\n/**\n * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).\n */\nexport const slideInY = (from: string) => createSlideInAnimation(from, 'Y');\n/**\n * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).\n */\nexport const slideInDown = slideInY('-100%');\n/**\n * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).\n */\nexport const slideInUp = slideInY('100%');\n/**\n * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).\n */\nexport const slideInLeft = slideInX('-100%');\n/**\n * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).\n */\nexport const slideInRight = slideInX('100%');\n\n/**\n * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).\n */\nexport const slideOutX = (to: string) => createSlideOutAnimation(to, 'X');\n/**\n * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).\n */\nexport const slideOutY = (to: string) => createSlideOutAnimation(to, 'Y');\n/**\n * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).\n */\nexport const slideOutDown = slideOutY('100%');\n/**\n * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).\n */\nexport const slideOutUp = slideOutY('-100%');\n/**\n * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).\n */\nexport const slideOutLeft = slideOutX('-100%');\n/**\n * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).\n */\nexport const slideOutRight = slideOutX('100%');\n","import { animateChild, query, transition } from '@angular/animations';\n\n/**\n * Utility animation that waits for animations on child components to complete.\n * This animation should be used within parent components that have child components with their\n * own animations. It ensures that the parent's enter and leave animations are only triggered\n * after all child animations have completed, creating a seamless animation sequence.\n *\n * This utility uses Angular's animation functions `query` and `animateChild` to find and animate\n * child elements marked with Angular's animation triggers. The `{ optional: true }` parameter\n * ensures that the animation gracefully handles cases where no child animations are defined.\n *\n * @example\n * ```ts\n * // Using waitForChildAnimations in a parent component with children that have animations\n * import { trigger, transition, style, animate, query, animateChild } from '@angular/animations';\n * import { waitForChildAnimations } from '@odx/angular/animations';\n *\n * @Component({\n *   selector: 'app-parent',\n *   templateUrl: './parent.component.html',\n *   animations: [\n *     trigger('parentAnimation', [\n *       // Define parent animations here\n *       transition(':enter', [style({ opacity: 0 }), animate('0.5s ease-in', style({ opacity: 1 }))]),\n *       transition(':leave', [animate('0.5s ease-out', style({ opacity: 0 }))]),\n *       // Use waitForChildAnimations for coordinating with child animations\n *       waitForChildAnimations\n *     ])\n *   ]\n * })\n * export class ParentComponent {\n *   // Component logic here\n * }\n * ```\n *\n * Note: The `waitForChildAnimations` utility is added to the parent component's animation triggers,\n * ensuring that any child component animations are completed before continuing with the parent's\n * own animations.\n */\n/**\n * @deprecated For new animations, use [**New Angular Documentation**](https://angular.dev/guide/animations/css).\n */\nexport const waitForChildAnimations = transition(':enter, :leave', [query('@*', animateChild(), { optional: true })]);\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/odx-angular-breakpoints.mjs

@@ -144,10 +144,10 @@ class BreakpointsService {
             return of(false);
         return this.breakpointObserver.observe(mediaQueries).pipe(map(({ matches }) => matches), distinctUntilChanged(), shareReplay({ bufferSize: 1, refCount: true }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BreakpointsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BreakpointsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BreakpointsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BreakpointsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BreakpointsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BreakpointsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -214,10 +214,10 @@ class MatchBreakpointsDirective {
             viewRef.markForCheck();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchBreakpointsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MatchBreakpointsDirective, isStandalone: true, selector: "ng-template[odxMatchBreakpoints]", inputs: { breakpoints: ["odxMatchBreakpoints", "breakpoints"], elseTemplate: ["odxMatchBreakpointsElse", "elseTemplate"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MatchBreakpointsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: MatchBreakpointsDirective, isStandalone: true, selector: "ng-template[odxMatchBreakpoints]", inputs: { breakpoints: ["odxMatchBreakpoints", "breakpoints"], elseTemplate: ["odxMatchBreakpointsElse", "elseTemplate"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatchBreakpointsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MatchBreakpointsDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -233,11 +233,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 const modules = [MatchBreakpointsDirective];
 class BreakpointsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BreakpointsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: BreakpointsModule, imports: [MatchBreakpointsDirective], exports: [MatchBreakpointsDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BreakpointsModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BreakpointsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: BreakpointsModule, imports: [MatchBreakpointsDirective], exports: [MatchBreakpointsDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BreakpointsModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BreakpointsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BreakpointsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: modules,

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\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":";;;;;;AAGA;;;;;;;;;;;;;;;;;;AAkBG;SACa,mBAAmB,CAAmB,IAAO,EAAE,GAAW,EAAE,GAAW,EAAA;IACrF,OAAO;QACL,CAAC,CAAA,CAAA,EAAI,IAAI,CAAA,CAAW,GAAG,CAAA,YAAA,EAAe,GAAG,GAAG,CAAC,CAAA,GAAA,CAAK;QAClD,CAAC,CAAA,CAAA,EAAI,IAAI,CAAA,CAAW,GAAG,CAAA,YAAA,EAAe,GAAG,CAAA,oBAAA,EAAuB,GAAG,GAAG,CAAC,CAAA,GAAA,CAAK;AAC5E,QAAA,CAAC,IAAI,IAAI,CAAA,CAAW,GAAG,CAAA,YAAA,EAAe,GAAG,CAAA,GAAA,CAAK;KACxB;AAC1B;;ACzBA;;;;;;;;;;;;;;AAcG;AACI,MAAM,mBAAmB,GAAG;AACjC,IAAA,GAAG,mBAAmB,CAAC,SAAS,EAAE,GAAG,EAAE,GAAG,CAAC;AAC3C,IAAA,GAAG,mBAAmB,CAAC,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC;AACzC,IAAA,GAAG,mBAAmB,CAAC,QAAQ,EAAE,GAAG,EAAE,GAAG,CAAC;AAC1C,IAAA,GAAG,mBAAmB,CAAC,WAAW,EAAE,GAAG,EAAE,IAAI,CAAC;AAC9C,IAAA,GAAG,mBAAmB,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC;;AAO/C;;;;;;;;;;;;;;;;;;;;;;AAsBG;AACI,MAAM,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,GAAG,kBAAkB,CAClI,aAAa,EACb,0BAA0B,EAC1B;AACE,IAAA,WAAW,EAAE,mBAAmB;AACZ,CAAA;;ACpDxB;;;;;;AAMG;MAEU,kBAAkB,CAAA;AAD/B,IAAA,WAAA,GAAA;AAEmB,QAAA,IAAA,CAAA,kBAAkB,GAAG,MAAM,CAAC,kBAAkB,CAAC;QAC/C,IAAA,CAAA,MAAM,GAAG,uBAAuB,EAAE;AA+DpD,IAAA;AA7DC;;;;;;;;;;;;;;;;;;;;;;AAsBG;AACI,IAAA,OAAO,CAAC,WAA6B,EAAA;QAC1C,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC;AAEtD,QAAA,OAAO,IAAI,CAAC,wBAAwB,CAAC,YAAY,CAAC;IACpD;AAEA;;;;;;;;;;;;AAYG;AACI,IAAA,OAAO,CAAC,WAA6B,EAAA;QAC1C,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC;QAEtD,OAAO,IAAI,CAAC,kBAAkB,CAAC,SAAS,CAAC,YAAY,CAAC;IACxD;AAEQ,IAAA,eAAe,CAAC,eAAiC,EAAA;QACvD,OAAO,eAAe,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAW,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;IAC/F;AAEQ,IAAA,wBAAwB,CAAC,YAAsB,EAAA;AACrD,QAAA,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC;AAAE,YAAA,OAAO,EAAE,CAAC,KAAK,CAAC;AAE7C,QAAA,OAAO,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,IAAI,CACvD,GAAG,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,OAAO,CAAC,EAC7B,oBAAoB,EAAE,EACtB,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAC/C;IACH;+GAhEW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,cADL,MAAM,EAAA,CAAA,CAAA;;4FACnB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAD9B,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;ACPlC;;;;;;;;;;;;;;;;;;;;;;;;AAwBG;MAKU,yBAAyB,CAAA;AAJtC,IAAA,WAAA,GAAA;AAKmB,QAAA,IAAA,CAAA,aAAa,GAAG,IAAI,eAAe,CAAmB,EAAE,CAAC;AACzD,QAAA,IAAA,CAAA,kBAAkB,GAAG,MAAM,CAAC,kBAAkB,CAAC;QAC/C,IAAA,CAAA,kBAAkB,GAAG,cAAc,EAAE;AACrC,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,WAAW,CAAC;AAC9B,QAAA,IAAA,CAAA,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC;AAazD;;;;AAIG;;QAGI,IAAA,CAAA,YAAY,GAAiC,IAAI;AAoBzD,IAAA;AAtCC;;;;;AAKG;IACH,IACW,WAAW,CAAC,KAA2D,EAAA;AAChF,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IACnD;IAWO,QAAQ,GAAA;AACb,QAAA,IAAI,CAAC;AACF,aAAA,IAAI,CACH,SAAS,CAAC,CAAC,WAAW,KAAK,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,EACxE,GAAG,CAAC,CAAC,kBAAkB,KAAK,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,EAC5D,IAAI,CAAC,kBAAkB,EAAE;AAE1B,aAAA,SAAS,EAAE;IAChB;AAEQ,IAAA,MAAM,CAAC,kBAA2B,EAAA;AACxC,QAAA,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE;AAC1B,QAAA,MAAM,QAAQ,GAAG,kBAAkB,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY;QACvE,IAAI,QAAQ,EAAE;YACZ,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,QAAQ,CAAC;YAC/D,OAAO,CAAC,YAAY,EAAE;QACxB;IACF;+GA5CW,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAzB,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kCAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,CAAA,qBAAA,EAAA,aAAA,CAAA,EAAA,YAAA,EAAA,CAAA,yBAAA,EAAA,cAAA,CAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;4FAAzB,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAJrC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,kCAAkC;AAC7C,iBAAA;8BAeY,WAAW,EAAA,CAAA;sBADrB,KAAK;uBAAC,qBAAqB;gBAYrB,YAAY,EAAA,CAAA;sBADlB,KAAK;uBAAC,yBAAyB;;;ACxDlC,MAAM,OAAO,GAAG,CAAC,yBAAyB,CAAC;MAM9B,iBAAiB,CAAA;+GAAjB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;gHAAjB,iBAAiB,EAAA,OAAA,EAAA,CANb,yBAAyB,CAAA,EAAA,OAAA,EAAA,CAAzB,yBAAyB,CAAA,EAAA,CAAA,CAAA;gHAM7B,iBAAiB,EAAA,CAAA,CAAA;;4FAAjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAJ7B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,OAAO;AAChB,oBAAA,OAAO,EAAE,OAAO;AACjB,iBAAA;;;ACRD;;AAEG;;;;"}
+{"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

@@ -50,13 +50,13 @@ let InteractiveDirective = class InteractiveDirective {
             return;
         this.interact.next(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InteractiveDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: InteractiveDirective, isStandalone: true, selector: "[odxCdkInteractive]", outputs: { interact: "odxCdkInteractive" }, host: { attributes: { "role": "button" }, listeners: { "click": "handleEvents($event)", "keyup.enter": "handleEvents($event)", "keyup.space": "handleEvents($event)" } }, hostDirectives: [{ directive: i1.WithDisabledState }, { directive: i1.WithTabIndex }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InteractiveDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: InteractiveDirective, isStandalone: true, selector: "[odxCdkInteractive]", outputs: { interact: "odxCdkInteractive" }, host: { attributes: { "role": "button" }, listeners: { "click": "handleEvents($event)", "keyup.enter": "handleEvents($event)", "keyup.space": "handleEvents($event)" } }, hostDirectives: [{ directive: i1.WithDisabledState }, { directive: i1.WithTabIndex }], ngImport: i0 }); }
 };
 InteractiveDirective = __decorate([
     CSSComponent('cdk-interactive')
 ], InteractiveDirective);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InteractiveDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InteractiveDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[odxCdkInteractive]',
@@ -115,10 +115,10 @@ class ListFocusManagerOptionDirective {
     focus() {
         this.element.nativeElement.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListFocusManagerOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ListFocusManagerOptionDirective, isStandalone: true, selector: "[odxListFocusManagerOption]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListFocusManagerOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: ListFocusManagerOptionDirective, isStandalone: true, selector: "[odxListFocusManagerOption]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListFocusManagerOptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListFocusManagerOptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[odxListFocusManagerOption]',
@@ -163,10 +163,10 @@ class ListFocusManagerDirective {
     onKeyDown(event) {
         this.keyManager?.onKeydown(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListFocusManagerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ListFocusManagerDirective, isStandalone: true, selector: "[odxListFocusManager]", host: { listeners: { "keydown": "onKeyDown($event)" } }, queries: [{ propertyName: "options", predicate: ListFocusManagerOptionDirective }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListFocusManagerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: ListFocusManagerDirective, isStandalone: true, selector: "[odxListFocusManager]", host: { listeners: { "keydown": "onKeyDown($event)" } }, queries: [{ propertyName: "options", predicate: ListFocusManagerOptionDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListFocusManagerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListFocusManagerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[odxListFocusManager]',
@@ -182,11 +182,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 const modules = [ListFocusManagerDirective, ListFocusManagerOptionDirective, InteractiveDirective];
 class A11yModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: A11yModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: A11yModule, imports: [A11yModule$1, ListFocusManagerDirective, ListFocusManagerOptionDirective, InteractiveDirective], exports: [CoreModule, A11yModule$1, ListFocusManagerDirective, ListFocusManagerOptionDirective, InteractiveDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: A11yModule, imports: [A11yModule$1, CoreModule, A11yModule$1] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: A11yModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: A11yModule, imports: [A11yModule$1, ListFocusManagerDirective, ListFocusManagerOptionDirective, InteractiveDirective], exports: [CoreModule, A11yModule$1, ListFocusManagerDirective, ListFocusManagerOptionDirective, InteractiveDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: A11yModule, imports: [A11yModule$1, CoreModule, A11yModule$1] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: A11yModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: A11yModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [A11yModule$1, ...modules],

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/**\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 * @for(item of items; track item) {\n * <li odxListFocusManagerOption>\n *   {{ item }}\n * </li>\n * }\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 *   @for(item of items; track item) {\n *   <li odxListFocusManagerOption>\n *     {{ item }}\n *   </li>\n *   }\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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"}
+{"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 * @for(item of items; track item) {\n * <li odxListFocusManagerOption>\n *   {{ item }}\n * </li>\n * }\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 *   @for(item of items; track item) {\n *   <li odxListFocusManagerOption>\n *     {{ item }}\n *   </li>\n *   }\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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"}