npm - @odx/angular - Versions diffs - 12.21.4 → 12.21.5 - Mend

@odx/angular 12.21.4 → 12.21.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (146) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,11 @@
 # @odx/angular
+## 12.21.5
+### Patch Changes
+- 53b5444: Fix: toast container tagname in docs
 ## 12.21.4
 ### Patch Changes

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

	@@ -1 +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,OAAO;AAC3C,MAAM,0BAA0B,GAAG,QAAQ;AACrC,MAAA,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,EACD;AAEF;;;;;;;;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;AACU,MAAA,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,EAAE;AAEL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,CAAY,SAAA,EAAA,SAAS,CAAK,GAAA,CAAA,EAAE,CAAC,CAAC;KACrG,EACD;AACE,QAAA,MAAM,EAAE;AACN,YAAA,GAAG,wBAAwB;YAC3B,IAAI;AACL,SAAA;AACF,KAAA,CACF,CAAC;AACJ,CAAC;AAED,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,CAAC;AACL,CAAC;AAED;;;;;;;;;;;;;;;;;;;;AAoBG;AACI,MAAM,QAAQ,GAAG,CAAC,IAAY,KAAK,sBAAsB,CAAC,IAAI,EAAE,GAAG,EAAE;AACrE,MAAM,QAAQ,GAAG,CAAC,IAAY,KAAK,sBAAsB,CAAC,IAAI,EAAE,GAAG,EAAE;MAC/D,WAAW,GAAG,QAAQ,CAAC,OAAO,EAAE;MAChC,SAAS,GAAG,QAAQ,CAAC,MAAM,EAAE;MAC7B,WAAW,GAAG,QAAQ,CAAC,OAAO,EAAE;MAChC,YAAY,GAAG,QAAQ,CAAC,MAAM,EAAE;AAEtC,MAAM,SAAS,GAAG,CAAC,EAAU,KAAK,uBAAuB,CAAC,EAAE,EAAE,GAAG,EAAE;AACnE,MAAM,SAAS,GAAG,CAAC,EAAU,KAAK,uBAAuB,CAAC,EAAE,EAAE,GAAG,EAAE;MAC7D,YAAY,GAAG,SAAS,CAAC,MAAM,EAAE;MACjC,UAAU,GAAG,SAAS,CAAC,OAAO,EAAE;MAChC,YAAY,GAAG,SAAS,CAAC,OAAO,EAAE;MAClC,aAAa,GAAG,SAAS,CAAC,MAAM;;AC1D7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCG;AACU,MAAA,sBAAsB,GAAG,UAAU,CAAC,gBAAgB,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;;ACxCpH;;AAEG;;;;"}
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":"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"}

package/fesm2022/odx-angular-breakpoints.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 import { createConfigTokens, untilDestroyed, coerceArray } from '@odx/angular/utils';
 import * as i0 from '@angular/core';
-import { inject, Injectable, TemplateRef, ViewContainerRef, Directive, Input, NgModule } from '@angular/core';
+import { inject, Injectable, TemplateRef, ViewContainerRef, Input, Directive, NgModule } from '@angular/core';
 import { of, map, distinctUntilChanged, shareReplay, BehaviorSubject, switchMap, tap } from 'rxjs';
 import { BreakpointObserver } from '@angular/cdk/layout';

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

	@@ -1 +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":"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"}
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":"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"}

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

@@ -1,6 +1,6 @@
 import { FocusKeyManager, A11yModule as A11yModule$1 } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import { EventEmitter, Directive, Output, HostListener, ContentChildren, NgModule } from '@angular/core';
+import { EventEmitter, HostListener, Output, Directive, ContentChildren, NgModule } from '@angular/core';
 import * as i1 from '@odx/angular';
 import { DisabledController, WithDisabledState, WithTabIndex, CoreModule } from '@odx/angular';
 import { __decorate } from 'tslib';

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

	@@ -1 +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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"}
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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"}

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

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from 'tslib';
 import * as i0 from '@angular/core';
-import { Directive, Input } from '@angular/core';
+import { Input, Directive } from '@angular/core';
 import { CSSModifier, CSSComponent } from '@odx/angular/internal';
 import { fromElementResize$ } from '@odx/angular/rxjs';
 import { untilDestroyed, injectElement, hasChanged, isPresent, px, disableCSSTransitions, applyStyles } from '@odx/angular/utils';

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

	@@ -1 +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/*\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 * @for(tab of tabs; track tab.id) {\n * <div class=\"tab\" [class.active]=\"tab.isActive\" #tabElement>{{ tab.label }}</div>\n * }\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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"}
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/*\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 * @for(tab of tabs; track tab.id) {\n * <div class=\"tab\" [class.active]=\"tab.isActive\" #tabElement>{{ tab.label }}</div>\n * }\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 CHANGED Viewed

@@ -1,6 +1,6 @@
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, EventEmitter, booleanAttribute, Directive, ViewChild, Input, Output, HostListener, computed, SecurityContext, input, InjectionToken } from '@angular/core';
+import { inject, ChangeDetectorRef, EventEmitter, booleanAttribute, HostListener, Output, Input, ViewChild, Directive, computed, SecurityContext, input, InjectionToken } from '@angular/core';
 import { detectControllerChanges, ODX_STRING_SEARCH_HANDLER, ODX_STRINGIFY } from '@odx/angular';
 import { CustomFormControl } from '@odx/angular/cdk/custom-form-control';
 import { DropdownDirective } from '@odx/angular/components/dropdown';

package/fesm2022/odx-angular-cdk-autocomplete-control.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"odx-angular-cdk-autocomplete-control.mjs","sources":["../../../../libs/angular/cdk/autocomplete-control/src/lib/autocomplete-control.ts","../../../../libs/angular/cdk/autocomplete-control/src/lib/directives/highlight-search-result.directive.ts","../../../../libs/angular/cdk/autocomplete-control/src/lib/pipes/base-search-filter-pipe.ts","../../../../libs/angular/cdk/autocomplete-control/src/odx-angular-cdk-autocomplete-control.ts"],"sourcesContent":["import { ActiveDescendantKeyManager, Highlightable } from '@angular/cdk/a11y';\nimport {\n AfterViewInit,\n booleanAttribute,\n ChangeDetectorRef,\n Directive,\n EventEmitter,\n HostListener,\n inject,\n Input,\n Output,\n QueryList,\n ViewChild,\n} from '@angular/core';\nimport { detectControllerChanges, StringifyFn } from '@odx/angular';\nimport { CustomFormControl, InputControlDirective } from '@odx/angular/cdk/custom-form-control';\nimport { OptionControl } from '@odx/angular/cdk/option-control';\nimport { DropdownDirective } from '@odx/angular/components/dropdown';\nimport { FormFieldComponent } from '@odx/angular/components/form-field';\nimport { injectElement, isFunction, untilDestroyed } from '@odx/angular/utils';\n\n/*\n `AutocompleteControl` is a base directive to enhance an input field with autocomplete functionality,\n * providing keyboard navigation and selection for options displayed in a dropdown. It's designed to be extended\n * for specific implementations.\n * Extends `CustomFormControl` to provide form control behavior and state management.\n \n @see {CustomFormControl}\n \n This directive manages the open/close state of the dropdown, the loading state indication, and the interaction between\n * the autocomplete input and the dropdown options. It utilizes `ActiveDescendantKeyManager` for keyboard navigation among options.\n \n Extend this directive to create a fully functional autocomplete control tailored to your data type and UI requirements.\n \n @template T - The type of the items displayed in the autocomplete dropdown.\n /\n@Directive({\n standalone: true,\n host: {\n '[class.is-open]': 'isOpen',\n '[attr.aria-disabled]': 'isDisabled \|\| null',\n },\n})\nexport abstract class AutocompleteControl<T> extends CustomFormControl<T \| null> implements AfterViewInit {\n protected abstract readonly options?: QueryList<OptionControl<T>>;\n\n protected readonly changeDetector = inject(ChangeDetectorRef);\n protected readonly formField = inject(FormFieldComponent, { optional: true });\n protected readonly takeUntilDestroyed = untilDestroyed();\n\n protected keyManager?: ActiveDescendantKeyManager<Highlightable>;\n protected smoothScrollEnabled = false;\n\n @ViewChild(DropdownDirective)\n protected readonly dropdown?: DropdownDirective;\n\n public abstract searchField?: InputControlDirective;\n\n public readonly element = injectElement();\n\n public get dropdownReferenceElement(): HTMLElement {\n return this.formField?.controlElement?.nativeElement ?? this.element?.nativeElement;\n }\n\n public get hasOptions(): boolean {\n return !!this.options?.length;\n }\n\n public get isOpen(): boolean {\n return !!this.dropdown?.isOpen;\n }\n\n @Input({ transform: booleanAttribute })\n public isLoading = false;\n\n /\n A function that converts an item of type T to a string representation.\n * Used by the AutocompleteControl component to display the selected item.\n \n @type {StringifyFn<T>}\n \n @example\n * ```ts\n * // Define a stringify function for a custom type Person\n * const stringifyPerson: StringifyFn<Person> = (person) => `${person.firstName} ${person.lastName}`;\n \n // Assign the stringify function to the AutocompleteControl\n * autocompleteControl.stringify = stringifyPerson;\n * ```\n /\n @Input()\n public stringify?: StringifyFn<T>;\n\n /\n Emits the selected option when an option is selected from the dropdown.\n \n @emits {T} - The selected option.\n \n @example\n * ```ts\n * autocompleteControl.optionSelected.subscribe((selectedOption) => {\n * console.log('Selected option:', selectedOption);\n * });\n * ```\n /\n @Output()\n public optionSelected = new EventEmitter<T>();\n\n /\n Event emitted before the dropdown opens.\n * @emits {void}\n \n @example\n * ```html\n * <odx-select (beforeDropdownOpen)=\"onBeforeDropdownOpen()\">\n * </odx-select>\n * ```\n /\n @Output()\n public beforeDropdownOpen = new EventEmitter<void>();\n\n /\n Event emitted after the dropdown opened.\n \n @emits {void}\n \n @example\n * ```html\n * <odx-select (afterDropdownOpen)=\"onAfterDropdownOpen()\">\n * </odx-select>\n * ```\n /\n @Output()\n public afterDropdownOpen = new EventEmitter<void>();\n\n /\n Event emitted before the dropdown closes.\n \n @emits {void}\n \n @example\n * ```html\n * <odx-select (beforeDropdownClose)=\"onBeforeDropdownClose()\">\n * </odx-select>\n * ```\n /\n @Output()\n public beforeDropdownClose = new EventEmitter<void>();\n\n /\n Event emitted after the dropdown closed.\n \n @emits {void}\n \n @example\n * ```html\n * <odx-select (afterDropdownClose)=\"onAfterDropdownClose()\">\n * </odx-select>\n * ```\n /\n @Output()\n public afterDropdownClose = new EventEmitter<void>();\n\n constructor() {\n super(null);\n detectControllerChanges(this).subscribe();\n }\n\n public ngAfterViewInit(): void {\n if (!this.options) return;\n\n this.initKeyManager(this.options.toArray());\n this.handleQueryListOption(this.options);\n this.handleSearchFieldChanges();\n }\n\n /\n Scrolls the specified option element into view.\n * @param {OptionControl<T>} option - The option control containing the element to scroll into view.\n * @returns {void}\n \n @example\n * ```ts\n * const optionControl: OptionControl<string> = { element: myOptionElement };\n * scrollOptionIntoView(optionControl);\n * ```\n /\n public scrollOptionIntoView({ element }: OptionControl<T>): void {\n const behavior = this.smoothScrollEnabled ? 'smooth' : undefined;\n if (isFunction(element.nativeElement.scrollIntoView)) {\n element.nativeElement.scrollIntoView({ block: 'center', behavior });\n }\n }\n\n protected abstract handleQueryListOption(options: QueryList<OptionControl<T>>): void;\n\n protected abstract handleSearchFieldChanges(): void;\n\n protected abstract activateSelectedOption(): void;\n\n protected initKeyManager(options: Highlightable[]): void {\n this.keyManager = new ActiveDescendantKeyManager<Highlightable>(options).withHomeAndEnd();\n }\n\n protected disableSmoothScroll(): void {\n this.smoothScrollEnabled = false;\n }\n\n protected enableSmoothScroll(): void {\n this.smoothScrollEnabled = true;\n }\n\n protected openDropdown(): void {\n this.dropdown?.open();\n }\n\n protected closeDropdown(): void {\n this.dropdown?.close();\n }\n\n protected onDropdownOpen(): void {\n this.beforeDropdownOpen.emit();\n this.activateSelectedOption();\n }\n\n protected onDropdownOpened(): void {\n this.afterDropdownOpen.emit();\n this.enableSmoothScroll();\n }\n\n protected onDropdownClose(): void {\n this.beforeDropdownClose.emit();\n this.disableSmoothScroll();\n }\n\n protected onDropdownClosed(): void {\n this.afterDropdownClose.emit();\n }\n\n @HostListener('focusout', ['$event'])\n protected handleFocusOut(event: FocusEvent): void {\n if (this.isOpen) {\n event.stopImmediatePropagation();\n }\n this.onTouched();\n }\n}\n","import { computed, Directive, inject, input, SecurityContext } from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\n\n@Directive({\n selector: 'odx-highlight',\n standalone: true,\n host: {\n '[innerHTML]': 'highlightedText()',\n },\n})\nexport class HighlightSearchDirective {\n private readonly sanitizer = inject(DomSanitizer);\n\n protected highlightedText = computed(() => {\n const search = this.odxHighlightSearch().trim();\n const text = this.sanitizer.sanitize(SecurityContext.HTML, this.text()) ?? '';\n\n if (!search) {\n return text;\n }\n\n const regex = new RegExp(search.replace(/[.+?^${}()\|[\\]\\\\]/g, '\\\\$&'), 'gi');\n const highlightedText = text.replace(regex, '<mark>$&</mark>');\n\n return this.sanitizer.bypassSecurityTrustHtml(highlightedText);\n });\n\n /*\n Search string\n * @required\n * @type string\n /\n public odxHighlightSearch = input.required<string>();\n\n /\n Text to highlight\n * @required\n * @type string\n /\n public text = input.required<string>();\n}\n","import { inject, InjectionToken, PipeTransform } from '@angular/core';\nimport { ODX_STRINGIFY, ODX_STRING_SEARCH_HANDLER, StringifyFn, StringSearchHandler } from '@odx/angular';\nimport { InputControlDirective } from '@odx/angular/cdk/custom-form-control';\nimport { isFunction, Pure } from '@odx/angular/utils';\n\ninterface HostController {\n searchField?: InputControlDirective;\n stringify?: StringifyFn<unknown>;\n}\n\ninterface SearchFilterPipeOptions<T> {\n searchHandler?: StringSearchHandler;\n stringify?: StringifyFn<T>;\n}\n\nexport const ODX_SEARCH_FILTER_HOST = new InjectionToken<HostController>('@odx/angular/cdk/autocomplete-control::SearchFilterHost');\n\nexport abstract class BaseSearchFilterPipe implements PipeTransform {\n private readonly stringSearchHandler = inject(ODX_STRING_SEARCH_HANDLER);\n private readonly defaultStringify = inject(ODX_STRINGIFY);\n protected readonly hostController = inject(ODX_SEARCH_FILTER_HOST, { optional: true });\n\n protected get searchField(): InputControlDirective \| undefined {\n return this.hostController?.searchField;\n }\n\n protected get stringify(): StringifyFn<unknown> {\n return this.hostController?.stringify ?? this.defaultStringify;\n }\n\n public transform<T>(items: T[] \| null, optionsOrHandler?: SearchFilterPipeOptions<T> \| StringSearchHandler): T[] \| null {\n const searchHandler = this.isStringSearchHandler(optionsOrHandler) ? optionsOrHandler : optionsOrHandler?.searchHandler;\n const stringify = this.isStringSearchHandler(optionsOrHandler) ? null : optionsOrHandler?.stringify;\n if (this.searchField) {\n return this.filter(items, this.searchField.nativeElementValue, stringify ?? (this.stringify as never), searchHandler ?? this.stringSearchHandler);\n }\n return items;\n }\n\n protected queryHandler(query: string): string {\n return query?.trim() \|\| '';\n }\n\n @Pure\n private filter<T>(items: T[] \| null, query: string, stringify: StringifyFn<T>, searchHandler: StringSearchHandler): T[] \| null {\n if (!items) return null;\n\n query = this.queryHandler(query);\n\n if (query === '') return items;\n\n return items.filter((item) => searchHandler(stringify(item), query));\n }\n\n private isStringSearchHandler<T>(optionsOrHandler?: SearchFilterPipeOptions<T> \| StringSearchHandler): optionsOrHandler is StringSearchHandler {\n return isFunction(optionsOrHandler);\n }\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"odx-angular-cdk-autocomplete-control.mjs","sources":["../../../../libs/angular/cdk/autocomplete-control/src/lib/autocomplete-control.ts","../../../../libs/angular/cdk/autocomplete-control/src/lib/directives/highlight-search-result.directive.ts","../../../../libs/angular/cdk/autocomplete-control/src/lib/pipes/base-search-filter-pipe.ts","../../../../libs/angular/cdk/autocomplete-control/src/odx-angular-cdk-autocomplete-control.ts"],"sourcesContent":["import { ActiveDescendantKeyManager, Highlightable } from '@angular/cdk/a11y';\nimport {\n AfterViewInit,\n booleanAttribute,\n ChangeDetectorRef,\n Directive,\n EventEmitter,\n HostListener,\n inject,\n Input,\n Output,\n QueryList,\n ViewChild,\n} from '@angular/core';\nimport { detectControllerChanges, StringifyFn } from '@odx/angular';\nimport { CustomFormControl, InputControlDirective } from '@odx/angular/cdk/custom-form-control';\nimport { OptionControl } from '@odx/angular/cdk/option-control';\nimport { DropdownDirective } from '@odx/angular/components/dropdown';\nimport { FormFieldComponent } from '@odx/angular/components/form-field';\nimport { injectElement, isFunction, untilDestroyed } from '@odx/angular/utils';\n\n/*\n `AutocompleteControl` is a base directive to enhance an input field with autocomplete functionality,\n * providing keyboard navigation and selection for options displayed in a dropdown. It's designed to be extended\n * for specific implementations.\n * Extends `CustomFormControl` to provide form control behavior and state management.\n \n @see {CustomFormControl}\n \n This directive manages the open/close state of the dropdown, the loading state indication, and the interaction between\n * the autocomplete input and the dropdown options. It utilizes `ActiveDescendantKeyManager` for keyboard navigation among options.\n \n Extend this directive to create a fully functional autocomplete control tailored to your data type and UI requirements.\n \n @template T - The type of the items displayed in the autocomplete dropdown.\n /\n@Directive({\n standalone: true,\n host: {\n '[class.is-open]': 'isOpen',\n '[attr.aria-disabled]': 'isDisabled \|\| null',\n },\n})\nexport abstract class AutocompleteControl<T> extends CustomFormControl<T \| null> implements AfterViewInit {\n protected abstract readonly options?: QueryList<OptionControl<T>>;\n\n protected readonly changeDetector = inject(ChangeDetectorRef);\n protected readonly formField = inject(FormFieldComponent, { optional: true });\n protected readonly takeUntilDestroyed = untilDestroyed();\n\n protected keyManager?: ActiveDescendantKeyManager<Highlightable>;\n protected smoothScrollEnabled = false;\n\n @ViewChild(DropdownDirective)\n protected readonly dropdown?: DropdownDirective;\n\n public abstract searchField?: InputControlDirective;\n\n public readonly element = injectElement();\n\n public get dropdownReferenceElement(): HTMLElement {\n return this.formField?.controlElement?.nativeElement ?? this.element?.nativeElement;\n }\n\n public get hasOptions(): boolean {\n return !!this.options?.length;\n }\n\n public get isOpen(): boolean {\n return !!this.dropdown?.isOpen;\n }\n\n @Input({ transform: booleanAttribute })\n public isLoading = false;\n\n /\n A function that converts an item of type T to a string representation.\n * Used by the AutocompleteControl component to display the selected item.\n \n @type {StringifyFn<T>}\n \n @example\n * ```ts\n * // Define a stringify function for a custom type Person\n * const stringifyPerson: StringifyFn<Person> = (person) => `${person.firstName} ${person.lastName}`;\n \n // Assign the stringify function to the AutocompleteControl\n * autocompleteControl.stringify = stringifyPerson;\n * ```\n /\n @Input()\n public stringify?: StringifyFn<T>;\n\n /\n Emits the selected option when an option is selected from the dropdown.\n \n @emits {T} - The selected option.\n \n @example\n * ```ts\n * autocompleteControl.optionSelected.subscribe((selectedOption) => {\n * console.log('Selected option:', selectedOption);\n * });\n * ```\n /\n @Output()\n public optionSelected = new EventEmitter<T>();\n\n /\n Event emitted before the dropdown opens.\n * @emits {void}\n \n @example\n * ```html\n * <odx-select (beforeDropdownOpen)=\"onBeforeDropdownOpen()\">\n * </odx-select>\n * ```\n /\n @Output()\n public beforeDropdownOpen = new EventEmitter<void>();\n\n /\n Event emitted after the dropdown opened.\n \n @emits {void}\n \n @example\n * ```html\n * <odx-select (afterDropdownOpen)=\"onAfterDropdownOpen()\">\n * </odx-select>\n * ```\n /\n @Output()\n public afterDropdownOpen = new EventEmitter<void>();\n\n /\n Event emitted before the dropdown closes.\n \n @emits {void}\n \n @example\n * ```html\n * <odx-select (beforeDropdownClose)=\"onBeforeDropdownClose()\">\n * </odx-select>\n * ```\n /\n @Output()\n public beforeDropdownClose = new EventEmitter<void>();\n\n /\n Event emitted after the dropdown closed.\n \n @emits {void}\n \n @example\n * ```html\n * <odx-select (afterDropdownClose)=\"onAfterDropdownClose()\">\n * </odx-select>\n * ```\n /\n @Output()\n public afterDropdownClose = new EventEmitter<void>();\n\n constructor() {\n super(null);\n detectControllerChanges(this).subscribe();\n }\n\n public ngAfterViewInit(): void {\n if (!this.options) return;\n\n this.initKeyManager(this.options.toArray());\n this.handleQueryListOption(this.options);\n this.handleSearchFieldChanges();\n }\n\n /\n Scrolls the specified option element into view.\n * @param {OptionControl<T>} option - The option control containing the element to scroll into view.\n * @returns {void}\n \n @example\n * ```ts\n * const optionControl: OptionControl<string> = { element: myOptionElement };\n * scrollOptionIntoView(optionControl);\n * ```\n /\n public scrollOptionIntoView({ element }: OptionControl<T>): void {\n const behavior = this.smoothScrollEnabled ? 'smooth' : undefined;\n if (isFunction(element.nativeElement.scrollIntoView)) {\n element.nativeElement.scrollIntoView({ block: 'center', behavior });\n }\n }\n\n protected abstract handleQueryListOption(options: QueryList<OptionControl<T>>): void;\n\n protected abstract handleSearchFieldChanges(): void;\n\n protected abstract activateSelectedOption(): void;\n\n protected initKeyManager(options: Highlightable[]): void {\n this.keyManager = new ActiveDescendantKeyManager<Highlightable>(options).withHomeAndEnd();\n }\n\n protected disableSmoothScroll(): void {\n this.smoothScrollEnabled = false;\n }\n\n protected enableSmoothScroll(): void {\n this.smoothScrollEnabled = true;\n }\n\n protected openDropdown(): void {\n this.dropdown?.open();\n }\n\n protected closeDropdown(): void {\n this.dropdown?.close();\n }\n\n protected onDropdownOpen(): void {\n this.beforeDropdownOpen.emit();\n this.activateSelectedOption();\n }\n\n protected onDropdownOpened(): void {\n this.afterDropdownOpen.emit();\n this.enableSmoothScroll();\n }\n\n protected onDropdownClose(): void {\n this.beforeDropdownClose.emit();\n this.disableSmoothScroll();\n }\n\n protected onDropdownClosed(): void {\n this.afterDropdownClose.emit();\n }\n\n @HostListener('focusout', ['$event'])\n protected handleFocusOut(event: FocusEvent): void {\n if (this.isOpen) {\n event.stopImmediatePropagation();\n }\n this.onTouched();\n }\n}\n","import { computed, Directive, inject, input, SecurityContext } from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\n\n@Directive({\n selector: 'odx-highlight',\n standalone: true,\n host: {\n '[innerHTML]': 'highlightedText()',\n },\n})\nexport class HighlightSearchDirective {\n private readonly sanitizer = inject(DomSanitizer);\n\n protected highlightedText = computed(() => {\n const search = this.odxHighlightSearch().trim();\n const text = this.sanitizer.sanitize(SecurityContext.HTML, this.text()) ?? '';\n\n if (!search) {\n return text;\n }\n\n const regex = new RegExp(search.replace(/[.+?^${}()\|[\\]\\\\]/g, '\\\\$&'), 'gi');\n const highlightedText = text.replace(regex, '<mark>$&</mark>');\n\n return this.sanitizer.bypassSecurityTrustHtml(highlightedText);\n });\n\n /*\n Search string\n * @required\n * @type string\n /\n public odxHighlightSearch = input.required<string>();\n\n /\n Text to highlight\n * @required\n * @type string\n /\n public text = input.required<string>();\n}\n","import { inject, InjectionToken, PipeTransform } from '@angular/core';\nimport { ODX_STRINGIFY, ODX_STRING_SEARCH_HANDLER, StringifyFn, StringSearchHandler } from '@odx/angular';\nimport { InputControlDirective } from '@odx/angular/cdk/custom-form-control';\nimport { isFunction, Pure } from '@odx/angular/utils';\n\ninterface HostController {\n searchField?: InputControlDirective;\n stringify?: StringifyFn<unknown>;\n}\n\ninterface SearchFilterPipeOptions<T> {\n searchHandler?: StringSearchHandler;\n stringify?: StringifyFn<T>;\n}\n\nexport const ODX_SEARCH_FILTER_HOST = new InjectionToken<HostController>('@odx/angular/cdk/autocomplete-control::SearchFilterHost');\n\nexport abstract class BaseSearchFilterPipe implements PipeTransform {\n private readonly stringSearchHandler = inject(ODX_STRING_SEARCH_HANDLER);\n private readonly defaultStringify = inject(ODX_STRINGIFY);\n protected readonly hostController = inject(ODX_SEARCH_FILTER_HOST, { optional: true });\n\n protected get searchField(): InputControlDirective \| undefined {\n return this.hostController?.searchField;\n }\n\n protected get stringify(): StringifyFn<unknown> {\n return this.hostController?.stringify ?? this.defaultStringify;\n }\n\n public transform<T>(items: T[] \| null, optionsOrHandler?: SearchFilterPipeOptions<T> \| StringSearchHandler): T[] \| null {\n const searchHandler = this.isStringSearchHandler(optionsOrHandler) ? optionsOrHandler : optionsOrHandler?.searchHandler;\n const stringify = this.isStringSearchHandler(optionsOrHandler) ? null : optionsOrHandler?.stringify;\n if (this.searchField) {\n return this.filter(items, this.searchField.nativeElementValue, stringify ?? (this.stringify as never), searchHandler ?? this.stringSearchHandler);\n }\n return items;\n }\n\n protected queryHandler(query: string): string {\n return query?.trim() \|\| '';\n }\n\n @Pure\n private filter<T>(items: T[] \| null, query: string, stringify: StringifyFn<T>, searchHandler: StringSearchHandler): T[] \| null {\n if (!items) return null;\n\n query = this.queryHandler(query);\n\n if (query === '') return items;\n\n return items.filter((item) => searchHandler(stringify(item), query));\n }\n\n private isStringSearchHandler<T>(optionsOrHandler?: SearchFilterPipeOptions<T> \| StringSearchHandler): optionsOrHandler is StringSearchHandler {\n return isFunction(optionsOrHandler);\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-checkbox-control.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, booleanAttribute, Directive, Input, Output } from '@angular/core';
+import { EventEmitter, booleanAttribute, Output, Input, Directive } from '@angular/core';
 import { detectControllerChanges } from '@odx/angular';
 import { CustomFormControl } from '@odx/angular/cdk/custom-form-control';
 import { booleanToAttributeString, injectElement } from '@odx/angular/utils';

package/fesm2022/odx-angular-cdk-checkbox-control.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"odx-angular-cdk-checkbox-control.mjs","sources":["../../../../libs/angular/cdk/checkbox-control/src/lib/checkbox-control.directive.ts","../../../../libs/angular/cdk/checkbox-control/src/odx-angular-cdk-checkbox-control.ts"],"sourcesContent":["import { booleanAttribute, Directive, EventEmitter, Input, Output } from '@angular/core';\nimport { detectControllerChanges } from '@odx/angular';\nimport { CustomFormControl } from '@odx/angular/cdk/custom-form-control';\nimport { booleanToAttributeString, injectElement } from '@odx/angular/utils';\n\n/*\n `CheckBoxControl` is a directive that extends `CustomFormControl` to create a custom checkbox control.\n * It integrates seamlessly with Angular forms and provides additional events and bindings for enhanced\n * functionality.\n /\n@Directive({\n selector: '[odxCheckBoxControl]',\n})\nexport class CheckBoxControl extends CustomFormControl<boolean> {\n public readonly element = injectElement();\n\n @Input({ transform: booleanAttribute })\n public set checked(value: boolean) {\n this.value = value;\n }\n public get checked(): boolean {\n return this.value;\n }\n\n /\n The value of the checkbox control.\n \n @type {string \| null}\n * @default null\n /\n // eslint-disable-next-line @angular-eslint/no-input-rename\n @Input('value')\n public controlValue: string \| null = null;\n\n /\n A boolean value when the checked state of the checkbox changes.\n \n @emits {boolean} - The new checked state of the checkbox.\n /\n @Output()\n public checkedChange = new EventEmitter<boolean>();\n\n /\n Aria attribute that represents the checked state of the checkbox.\n \n @type {string}\n /\n public get ariaChecked(): string {\n return booleanToAttributeString(this.checked);\n }\n\n constructor() {\n super(false);\n detectControllerChanges(this).subscribe();\n }\n\n public onChanged(event: Event): void {\n event.stopPropagation();\n super.updateValue((event.target as HTMLInputElement).checked);\n this.checkedChange.next(this.checked);\n }\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;AAKA;;;;AAIG;AAIG,MAAO,eAAgB,SAAQ,iBAA0B,CAAA;IAG7D,IACW,OAAO,CAAC,KAAc,EAAA;AAC/B,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK~~,CAAC~~;~~KACpB~~;~~AACD~~,IAAA,IAAW,OAAO,GAAA;QAChB,OAAO,IAAI,CAAC,KAAK~~,CAAC~~;~~KACnB~~;~~AAoBD~~;;;;AAIG;AACH,IAAA,IAAW,WAAW,GAAA;AACpB,QAAA,OAAO,wBAAwB,CAAC,IAAI,CAAC,OAAO,CAAC~~,CAAC~~;~~KAC~~/C;~~AAED~~,IAAA,WAAA,GAAA;QACE,KAAK,CAAC,KAAK,CAAC~~,CAAC~~;~~QAtCC~~,~~IAAO~~,CAAA,~~OAAA~~,GAAG,aAAa,EAAE~~,CAAC~~;~~AAU1C~~;;;;;AAKG;;QAGI,~~IAAY~~,CAAA,~~YAAA~~,GAAkB,IAAI~~,CAAC~~;~~AAE1C~~;;;;AAIG;AAEI,QAAA,IAAA,CAAA,aAAa,GAAG,IAAI,YAAY,EAAW~~,CAAC~~;~~AAajD~~,QAAA,uBAAuB,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE~~,CAAC~~;~~KAC3C~~;~~AAEM~~,IAAA,SAAS,CAAC,KAAY,EAAA;QAC3B,KAAK,CAAC,eAAe,EAAE~~,CAAC~~;~~QACxB~~,KAAK,CAAC,WAAW,CAAE,KAAK,CAAC,MAA2B,CAAC,OAAO,CAAC~~,CAAC~~;~~QAC9D~~,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC~~,CAAC~~;~~KACvC~~;+GA/CU,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA~~,EAAA~~;AAAf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,8EAGN,gBAAgB,CAAA,EAAA,YAAA,EAAA,CAAA,OAAA,EAAA,cAAA,CAAA,EAAA,EAAA,OAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA~~,EAAA~~;;4FAHzB,eAAe,EAAA,UAAA,EAAA,CAAA;kBAH3B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,sBAAsB;AACjC,iBAAA~~,CAAA~~;wDAKY,OAAO,EAAA,CAAA;sBADjB,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE~~,CAAA~~;gBAgB/B,YAAY,EAAA,CAAA;sBADlB,KAAK;uBAAC,OAAO~~,CAAA~~;gBASP,aAAa,EAAA,CAAA;sBADnB~~,MAAM~~;;;~~ACvCT~~;;AAEG;;;;"}
1	+ {"version":3,"file":"odx-angular-cdk-checkbox-control.mjs","sources":["../../../../libs/angular/cdk/checkbox-control/src/lib/checkbox-control.directive.ts","../../../../libs/angular/cdk/checkbox-control/src/odx-angular-cdk-checkbox-control.ts"],"sourcesContent":["import { booleanAttribute, Directive, EventEmitter, Input, Output } from '@angular/core';\nimport { detectControllerChanges } from '@odx/angular';\nimport { CustomFormControl } from '@odx/angular/cdk/custom-form-control';\nimport { booleanToAttributeString, injectElement } from '@odx/angular/utils';\n\n/*\n `CheckBoxControl` is a directive that extends `CustomFormControl` to create a custom checkbox control.\n * It integrates seamlessly with Angular forms and provides additional events and bindings for enhanced\n * functionality.\n /\n@Directive({\n selector: '[odxCheckBoxControl]',\n})\nexport class CheckBoxControl extends CustomFormControl<boolean> {\n public readonly element = injectElement();\n\n @Input({ transform: booleanAttribute })\n public set checked(value: boolean) {\n this.value = value;\n }\n public get checked(): boolean {\n return this.value;\n }\n\n /\n The value of the checkbox control.\n \n @type {string \| null}\n * @default null\n /\n // eslint-disable-next-line @angular-eslint/no-input-rename\n @Input('value')\n public controlValue: string \| null = null;\n\n /\n A boolean value when the checked state of the checkbox changes.\n \n @emits {boolean} - The new checked state of the checkbox.\n /\n @Output()\n public checkedChange = new EventEmitter<boolean>();\n\n /\n Aria attribute that represents the checked state of the checkbox.\n \n @type {string}\n /\n public get ariaChecked(): string {\n return booleanToAttributeString(this.checked);\n }\n\n constructor() {\n super(false);\n detectControllerChanges(this).subscribe();\n }\n\n public onChanged(event: Event): void {\n event.stopPropagation();\n super.updateValue((event.target as HTMLInputElement).checked);\n this.checkedChange.next(this.checked);\n }\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;AAKA;;;;AAIG;AAIG,MAAO,eAAgB,SAAQ,iBAA0B,CAAA;IAG7D,IACW,OAAO,CAAC,KAAc,EAAA;AAC/B,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;IACpB;AACA,IAAA,IAAW,OAAO,GAAA;QAChB,OAAO,IAAI,CAAC,KAAK;IACnB;AAoBA;;;;AAIG;AACH,IAAA,IAAW,WAAW,GAAA;AACpB,QAAA,OAAO,wBAAwB,CAAC,IAAI,CAAC,OAAO,CAAC;IAC/C;AAEA,IAAA,WAAA,GAAA;QACE,KAAK,CAAC,KAAK,CAAC;QAtCE,IAAA,CAAA,OAAO,GAAG,aAAa,EAAE;AAUzC;;;;;AAKG;;QAGI,IAAA,CAAA,YAAY,GAAkB,IAAI;AAEzC;;;;AAIG;AAEI,QAAA,IAAA,CAAA,aAAa,GAAG,IAAI,YAAY,EAAW;AAahD,QAAA,uBAAuB,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE;IAC3C;AAEO,IAAA,SAAS,CAAC,KAAY,EAAA;QAC3B,KAAK,CAAC,eAAe,EAAE;QACvB,KAAK,CAAC,WAAW,CAAE,KAAK,CAAC,MAA2B,CAAC,OAAO,CAAC;QAC7D,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;IACvC;+GA/CW,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,8EAGN,gBAAgB,CAAA,EAAA,YAAA,EAAA,CAAA,OAAA,EAAA,cAAA,CAAA,EAAA,EAAA,OAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;4FAHzB,eAAe,EAAA,UAAA,EAAA,CAAA;kBAH3B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,sBAAsB;AACjC,iBAAA;wDAKY,OAAO,EAAA,CAAA;sBADjB,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;gBAgB/B,YAAY,EAAA,CAAA;sBADlB,KAAK;uBAAC,OAAO;gBASP,aAAa,EAAA,CAAA;sBADnB;;;ACvCH;;AAEG;;;;"}

package/fesm2022/odx-angular-cdk-connected-overlay.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { inject, NgZone, Injector, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Input, Output, Injectable } from '@angular/core';
+import { inject, NgZone, Injector, Output, Input, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, Injectable } from '@angular/core';
 import { arrow, flip, computePosition, offset, shift, size, hide, autoUpdate } from '@floating-ui/dom';
 import { CoreModule } from '@odx/angular';
 import { DynamicViewDirective, DynamicViewService } from '@odx/angular/cdk/dynamic-view';

package/fesm2022/odx-angular-cdk-connected-overlay.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"odx-angular-cdk-connected-overlay.mjs","sources":["../../../../libs/angular/cdk/connected-overlay/src/lib/helpers/compute-overlay-position.ts","../../../../libs/angular/cdk/connected-overlay/src/lib/models/connected-overlay-options.ts","../../../../libs/angular/cdk/connected-overlay/src/lib/models/connected-overlay-ref.ts","../../../../libs/angular/cdk/connected-overlay/src/lib/connected-overlay.component.ts","../../../../libs/angular/cdk/connected-overlay/src/lib/connected-overlay.component.html","../../../../libs/angular/cdk/connected-overlay/src/lib/connected-overlay.service.ts","../../../../libs/angular/cdk/connected-overlay/src/odx-angular-cdk-connected-overlay.ts"],"sourcesContent":["import { ComputePositionReturn, VirtualElement, arrow, computePosition, flip, hide, shift, size, offset as withOffset } from '@floating-ui/dom';\nimport { applyStyles, getOppositeSide, getSide, px } from '@odx/angular/utils';\nimport { ConnectedOverlayOptions } from '../models';\n\n/*\n Computes the position of an overlay element relative to a reference element.\n \n @param referenceElement - The reference element to position the overlay relative to.\n * @param overlayElement - The overlay element to be positioned.\n * @param contentElement - The content element within the overlay.\n * @param arrowElement - The arrow element within the overlay.\n * @param options - The options for positioning the overlay.\n * @returns A promise that resolves to the computed position of the overlay.\n /\nexport async function computeOverlayPosition(\n referenceElement: VirtualElement,\n overlayElement: HTMLElement,\n contentElement: HTMLElement,\n arrowElement: HTMLElement,\n options: ConnectedOverlayOptions,\n): Promise<ComputePositionReturn> {\n const variablePrefix = '--odx-cdk-connected-overlay';\n const { position, offset, outerPadding, matchReferenceWidth, enableFallback, fallbackAxisSideDirection, strategy, minHeight } = options;\n const arrowSize = options.showArrow ? arrowElement.offsetWidth : 0;\n const arrowMiddleware = options.showArrow ? [arrow({ element: arrowElement, padding: 8 })] : [];\n const flipMiddleWare = enableFallback ? [flip({ fallbackAxisSideDirection })] : [];\n return computePosition(referenceElement, overlayElement, {\n strategy,\n placement: position,\n middleware: [\n withOffset(Math.max(offset, arrowSize + offset)),\n shift({ padding: outerPadding }),\n ...flipMiddleWare,\n size({\n padding: outerPadding,\n apply: ({ availableHeight, rects }) => {\n contentElement.style.setProperty?.(`${variablePrefix}-min-height`, minHeight ? px(Math.min(availableHeight, minHeight)) : null);\n contentElement.style.setProperty?.(`${variablePrefix}-min-width`, matchReferenceWidth ? px(rects.reference.width) : null);\n },\n }),\n ...arrowMiddleware,\n hide({ rootBoundary: 'viewport' }),\n ],\n }).then((result) => {\n overlayElement.style.setProperty?.(`${variablePrefix}-position-x`, px(result.x));\n overlayElement.style.setProperty?.(`${variablePrefix}-position-y`, px(result.y));\n if (options.hiddenClass) {\n overlayElement.classList.toggle(options.hiddenClass, !!result.middlewareData.hide?.referenceHidden);\n }\n if (options.showArrow) {\n const overlaySide = getSide(result.placement);\n const arrowSide = getOppositeSide(result.placement);\n applyStyles(arrowElement, {\n display: null,\n top: px(result.middlewareData.arrow?.y),\n left: px(result.middlewareData.arrow?.x),\n [arrowSide]: px(-arrowSize / 2),\n [overlaySide]: null,\n });\n } else {\n applyStyles(arrowElement, { display: 'none' });\n }\n\n return result;\n });\n}\n","import { Strategy } from '@floating-ui/dom';\nimport { DynamicContent } from '@odx/angular/cdk/dynamic-view';\nimport { Position } from '@odx/angular/utils';\n\nexport interface ConnectedOverlayOptions {\n content?: DynamicContent \| null;\n context?: Record<string, unknown>;\n containerClass?: string \| null;\n hiddenClass: string \| null;\n enableFallback: boolean;\n fallbackAxisSideDirection: 'start' \| 'end';\n matchReferenceWidth: boolean;\n minHeight?: number \| null;\n offset: number;\n outerPadding: number;\n position: Position;\n strategy: Strategy;\n showArrow?: boolean;\n updateOnAnimationFrame?: boolean;\n nonInteractive?: boolean;\n hooks?: {\n beforeOpen?: () => void;\n afterOpen?: () => void;\n beforeClose?: () => void;\n afterClose?: () => void;\n };\n}\n\nexport const DefaultConnectedOverlayOptions: ConnectedOverlayOptions = {\n hiddenClass: 'is-hidden',\n enableFallback: false,\n fallbackAxisSideDirection: 'start',\n matchReferenceWidth: false,\n offset: 8,\n outerPadding: 12,\n position: Position.BOTTOM,\n strategy: 'fixed',\n};\n","import { DynamicViewRef } from '@odx/angular/cdk/dynamic-view';\nimport { waitForAnimations } from '@odx/angular/utils';\nimport { EMPTY, Observable } from 'rxjs';\nimport { ConnectedOverlayComponent } from '../connected-overlay.component';\nimport { ConnectedOverlayOptions } from './connected-overlay-options';\n\n/\n A reference to a connected overlay created by the `ConnectedOverlayService`. This class provides methods to interact\n * with the overlay, such as updating its options or closing it. It encapsulates the `DynamicViewRef` for the overlay's instance,\n * allowing for direct manipulation of the overlay's state and behavior.\n \n This example demonstrates how to use a `ConnectedOverlayRef` to update and close a connected overlay in response\n * to user interactions.\n \n @example\n * ```ts\n * class MyComponent {\n * private overlayRef?: ConnectedOverlayRef;\n \n constructor(private overlayService: ConnectedOverlayService) {}\n \n openOverlay() {\n * this.overlayRef = this.overlayService.createOverlay(this.someElementRef.nativeElement, { position: 'bottom' });\n * }\n \n updateOverlayPosition() {\n * if (this.overlayRef) {\n * this.overlayRef.update({ position: 'top' });\n * }\n * }\n \n closeOverlay() {\n * this.overlayRef?.close();\n * }\n * }\n * ```\n \n In this example, `MyComponent` uses the `ConnectedOverlayService` to create an overlay. It stores a reference to\n * the created overlay in `overlayRef`, allowing it to update the overlay's position or close it when necessary.\n /\nexport class ConnectedOverlayRef {\n public readonly element = this.dynamicViewRef.getElement();\n\n /\n An Observable that emits when the overlay is closed.\n \n @emits {void} - Emits when the overlay is closed.\n \n /\n public readonly onClose$: Observable<void> = this.dynamicViewRef.getContext().closed ?? EMPTY;\n\n constructor(private readonly dynamicViewRef: DynamicViewRef<typeof ConnectedOverlayComponent>) {}\n\n /*\n Updates the connected overlay with new options.\n \n @param options {Partial<ConnectedOverlayOptions>} - The new options to be applied to the connected overlay.\n /\n public update(options: Partial<ConnectedOverlayOptions>): void {\n this.dynamicViewRef.update({ options: options as ConnectedOverlayOptions });\n }\n\n /\n Closes the connected overlay.\n \n @returns {void}\n /\n public async close(force = false) {\n const hiddenClass = force ? 'force-hidden' : this.dynamicViewRef.getContext().options?.hiddenClass \|\| 'is-hidden';\n this.element?.classList.add(hiddenClass);\n await waitForAnimations(this.element);\n this.dynamicViewRef.destroy();\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n Injector,\n Input,\n NgZone,\n OnChanges,\n OnDestroy,\n OnInit,\n Output,\n ViewChild,\n ViewEncapsulation,\n inject,\n} from '@angular/core';\nimport { VirtualElement, autoUpdate } from '@floating-ui/dom';\nimport { CoreModule } from '@odx/angular';\nimport { DynamicViewDirective } from '@odx/angular/cdk/dynamic-view';\nimport { CSSComponent } from '@odx/angular/internal';\nimport { NgChanges, Side, deferFn, getSide, hasChanged, injectElement, isPresent } from '@odx/angular/utils';\nimport { Subject } from 'rxjs';\nimport { computeOverlayPosition } from './helpers';\nimport { ConnectedOverlayOptions, DefaultConnectedOverlayOptions } from './models';\n\n@CSSComponent('cdk-connected-overlay')\n@Component({\n standalone: true,\n selector: 'odx-connected-overlay[popover=\"manual\"]',\n imports: [CoreModule, DynamicViewDirective],\n templateUrl: 'connected-overlay.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class ConnectedOverlayComponent implements OnInit, OnChanges, OnDestroy {\n private readonly zone = inject(NgZone);\n private positionUpdater: (() => void) \| null = null;\n\n protected readonly injector = inject(Injector);\n protected overlaySide?: Side;\n\n @ViewChild('content', { static: true })\n protected contentElement!: ElementRef<HTMLElement>;\n\n @ViewChild('arrow', { static: true })\n protected arrowElement!: ElementRef<HTMLElement>;\n\n public readonly element = injectElement();\n\n @Input()\n public referenceElement!: VirtualElement;\n\n @Input()\n public options: ConnectedOverlayOptions = DefaultConnectedOverlayOptions;\n\n @Output()\n public closed = new Subject<void>();\n\n public ngOnInit(): void {\n this.options.hooks?.beforeOpen?.();\n deferFn(() => {\n this.element.nativeElement?.isConnected && this.element.nativeElement?.showPopover?.();\n this.options.hooks?.afterOpen?.();\n });\n }\n\n public ngOnChanges(changes: NgChanges<ConnectedOverlayComponent>): void {\n if (hasChanged(changes, ['options'], false)) {\n this.overlaySide = getSide(this.options.position);\n this.element.nativeElement.classList.toggle('odx-cdk-connected-overlay--non-interactive', this.options.nonInteractive ?? false);\n }\n if (hasChanged(changes, ['referenceElement', 'options'], false)) {\n this.stopPositionUpdater();\n this.startPositionUpdater();\n }\n }\n\n public ngOnDestroy(): void {\n this.options.hooks?.beforeClose?.();\n this.stopPositionUpdater();\n this.element.nativeElement?.hidePopover?.();\n this.closed.next();\n this.options.hooks?.afterClose?.();\n }\n\n private startPositionUpdater(): void {\n this.positionUpdater = this.zone.runOutsideAngular(() =>\n autoUpdate(this.referenceElement, this.element.nativeElement, () => this.updatePosition(), {\n elementResize: isPresent(window.ResizeObserver),\n animationFrame: this.options.updateOnAnimationFrame,\n }),\n );\n }\n\n private stopPositionUpdater(): void {\n this.positionUpdater?.();\n this.positionUpdater = null;\n }\n\n private async updatePosition(): Promise<void> {\n return computeOverlayPosition(\n this.referenceElement,\n this.element.nativeElement,\n this.contentElement.nativeElement,\n this.arrowElement.nativeElement,\n this.options,\n ).then(({ placement }) => {\n this.overlaySide = getSide(placement);\n });\n }\n}\n","<div class=\"odx-cdk-connected-overlay__content {{ options.containerClass }}\" #content>\n <ng-template [odxDynamicView]=\"options.content\" [odxDynamicViewContext]=\"options.context\" [odxDynamicViewInjector]=\"injector\" />\n <div class=\"odx-cdk-connected-overlay-arrow\" #arrow></div>\n</div>\n","import { inject, Injectable } from '@angular/core';\nimport { VirtualElement } from '@floating-ui/dom';\nimport { DynamicViewRenderingOptions, DynamicViewService } from '@odx/angular/cdk/dynamic-view';\nimport { deepmerge } from '@odx/angular/internal';\nimport { ConnectedOverlayComponent } from './connected-overlay.component';\nimport { ConnectedOverlayOptions, ConnectedOverlayRef, DefaultConnectedOverlayOptions } from './models';\n\n/\n Service for creating and managing connected overlays. These overlays are UI elements such as popovers, tooltips,\n * or dropdown menus that are positioned relative to a reference element in the DOM. This service leverages the `DynamicViewService`\n * for dynamic component rendering and provides a streamlined API for creating overlays with custom positioning and options.\n \n Use the `ConnectedOverlayService` to dynamically create an overlay next to a specific element in your Angular application.\n * This example demonstrates creating a connected overlay next to a button element when the button is clicked.\n \n @example\n * ```ts\n * import { Component, ElementRef, ViewChild } from '@angular/core';\n * import { ConnectedOverlayService, ConnectedOverlayOptions } from '@odx/angular/cdk/connected-overlay';\n \n @Component({\n * selector: 'app-example',\n * template: `<button #triggerElement>Click me</button>`,\n * })\n * class AppComponent {\n * @ViewChild('triggerElement') triggerElementRef!: ElementRef;\n \n constructor(private connectedOverlayService: ConnectedOverlayService) {}\n \n showOverlay(): void {\n * const options: Partial<ConnectedOverlayOptions> = {\n * position: 'bottom-start',\n * showArrow: true,\n * content: 'Hello, world!',\n * };\n \n this.connectedOverlayService.createOverlay(this.triggerElementRef.nativeElement, options);\n * }\n * }\n * ```\n \n This service simplifies the process of creating dynamic, positionally aware overlays that enhance the interactivity\n * and visual appeal of Angular applications.\n /\n@Injectable({ providedIn: 'root' })\nexport class ConnectedOverlayService {\n private readonly dynamicViewService = inject(DynamicViewService);\n\n /\n Creates a connected overlay.\n * @param referenceElement - The reference element to which the overlay will be connected.\n * @param options - Optional configuration for the connected overlay.\n * @param renderingOptions - Optional rendering options for the connected overlay.\n * @returns {ConnectedOverlayRef} The created Connected Overlay reference instance.\n /\n public createOverlay(\n referenceElement: VirtualElement,\n options?: Partial<ConnectedOverlayOptions>,\n renderingOptions?: Partial<DynamicViewRenderingOptions>,\n ): ConnectedOverlayRef {\n const dynamicViewRef = this.dynamicViewService.createView(ConnectedOverlayComponent, {\n ...renderingOptions,\n context: { options: deepmerge(DefaultConnectedOverlayOptions, options) as ConnectedOverlayOptions, referenceElement },\n });\n\n return new ConnectedOverlayRef(dynamicViewRef);\n }\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["offset","withOffset"],"mappings":"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"}
1	+ {"version":3,"file":"odx-angular-cdk-connected-overlay.mjs","sources":["../../../../libs/angular/cdk/connected-overlay/src/lib/helpers/compute-overlay-position.ts","../../../../libs/angular/cdk/connected-overlay/src/lib/models/connected-overlay-options.ts","../../../../libs/angular/cdk/connected-overlay/src/lib/models/connected-overlay-ref.ts","../../../../libs/angular/cdk/connected-overlay/src/lib/connected-overlay.component.ts","../../../../libs/angular/cdk/connected-overlay/src/lib/connected-overlay.component.html","../../../../libs/angular/cdk/connected-overlay/src/lib/connected-overlay.service.ts","../../../../libs/angular/cdk/connected-overlay/src/odx-angular-cdk-connected-overlay.ts"],"sourcesContent":["import { ComputePositionReturn, VirtualElement, arrow, computePosition, flip, hide, shift, size, offset as withOffset } from '@floating-ui/dom';\nimport { applyStyles, getOppositeSide, getSide, px } from '@odx/angular/utils';\nimport { ConnectedOverlayOptions } from '../models';\n\n/*\n Computes the position of an overlay element relative to a reference element.\n \n @param referenceElement - The reference element to position the overlay relative to.\n * @param overlayElement - The overlay element to be positioned.\n * @param contentElement - The content element within the overlay.\n * @param arrowElement - The arrow element within the overlay.\n * @param options - The options for positioning the overlay.\n * @returns A promise that resolves to the computed position of the overlay.\n /\nexport async function computeOverlayPosition(\n referenceElement: VirtualElement,\n overlayElement: HTMLElement,\n contentElement: HTMLElement,\n arrowElement: HTMLElement,\n options: ConnectedOverlayOptions,\n): Promise<ComputePositionReturn> {\n const variablePrefix = '--odx-cdk-connected-overlay';\n const { position, offset, outerPadding, matchReferenceWidth, enableFallback, fallbackAxisSideDirection, strategy, minHeight } = options;\n const arrowSize = options.showArrow ? arrowElement.offsetWidth : 0;\n const arrowMiddleware = options.showArrow ? [arrow({ element: arrowElement, padding: 8 })] : [];\n const flipMiddleWare = enableFallback ? [flip({ fallbackAxisSideDirection })] : [];\n return computePosition(referenceElement, overlayElement, {\n strategy,\n placement: position,\n middleware: [\n withOffset(Math.max(offset, arrowSize + offset)),\n shift({ padding: outerPadding }),\n ...flipMiddleWare,\n size({\n padding: outerPadding,\n apply: ({ availableHeight, rects }) => {\n contentElement.style.setProperty?.(`${variablePrefix}-min-height`, minHeight ? px(Math.min(availableHeight, minHeight)) : null);\n contentElement.style.setProperty?.(`${variablePrefix}-min-width`, matchReferenceWidth ? px(rects.reference.width) : null);\n },\n }),\n ...arrowMiddleware,\n hide({ rootBoundary: 'viewport' }),\n ],\n }).then((result) => {\n overlayElement.style.setProperty?.(`${variablePrefix}-position-x`, px(result.x));\n overlayElement.style.setProperty?.(`${variablePrefix}-position-y`, px(result.y));\n if (options.hiddenClass) {\n overlayElement.classList.toggle(options.hiddenClass, !!result.middlewareData.hide?.referenceHidden);\n }\n if (options.showArrow) {\n const overlaySide = getSide(result.placement);\n const arrowSide = getOppositeSide(result.placement);\n applyStyles(arrowElement, {\n display: null,\n top: px(result.middlewareData.arrow?.y),\n left: px(result.middlewareData.arrow?.x),\n [arrowSide]: px(-arrowSize / 2),\n [overlaySide]: null,\n });\n } else {\n applyStyles(arrowElement, { display: 'none' });\n }\n\n return result;\n });\n}\n","import { Strategy } from '@floating-ui/dom';\nimport { DynamicContent } from '@odx/angular/cdk/dynamic-view';\nimport { Position } from '@odx/angular/utils';\n\nexport interface ConnectedOverlayOptions {\n content?: DynamicContent \| null;\n context?: Record<string, unknown>;\n containerClass?: string \| null;\n hiddenClass: string \| null;\n enableFallback: boolean;\n fallbackAxisSideDirection: 'start' \| 'end';\n matchReferenceWidth: boolean;\n minHeight?: number \| null;\n offset: number;\n outerPadding: number;\n position: Position;\n strategy: Strategy;\n showArrow?: boolean;\n updateOnAnimationFrame?: boolean;\n nonInteractive?: boolean;\n hooks?: {\n beforeOpen?: () => void;\n afterOpen?: () => void;\n beforeClose?: () => void;\n afterClose?: () => void;\n };\n}\n\nexport const DefaultConnectedOverlayOptions: ConnectedOverlayOptions = {\n hiddenClass: 'is-hidden',\n enableFallback: false,\n fallbackAxisSideDirection: 'start',\n matchReferenceWidth: false,\n offset: 8,\n outerPadding: 12,\n position: Position.BOTTOM,\n strategy: 'fixed',\n};\n","import { DynamicViewRef } from '@odx/angular/cdk/dynamic-view';\nimport { waitForAnimations } from '@odx/angular/utils';\nimport { EMPTY, Observable } from 'rxjs';\nimport { ConnectedOverlayComponent } from '../connected-overlay.component';\nimport { ConnectedOverlayOptions } from './connected-overlay-options';\n\n/\n A reference to a connected overlay created by the `ConnectedOverlayService`. This class provides methods to interact\n * with the overlay, such as updating its options or closing it. It encapsulates the `DynamicViewRef` for the overlay's instance,\n * allowing for direct manipulation of the overlay's state and behavior.\n \n This example demonstrates how to use a `ConnectedOverlayRef` to update and close a connected overlay in response\n * to user interactions.\n \n @example\n * ```ts\n * class MyComponent {\n * private overlayRef?: ConnectedOverlayRef;\n \n constructor(private overlayService: ConnectedOverlayService) {}\n \n openOverlay() {\n * this.overlayRef = this.overlayService.createOverlay(this.someElementRef.nativeElement, { position: 'bottom' });\n * }\n \n updateOverlayPosition() {\n * if (this.overlayRef) {\n * this.overlayRef.update({ position: 'top' });\n * }\n * }\n \n closeOverlay() {\n * this.overlayRef?.close();\n * }\n * }\n * ```\n \n In this example, `MyComponent` uses the `ConnectedOverlayService` to create an overlay. It stores a reference to\n * the created overlay in `overlayRef`, allowing it to update the overlay's position or close it when necessary.\n /\nexport class ConnectedOverlayRef {\n public readonly element = this.dynamicViewRef.getElement();\n\n /\n An Observable that emits when the overlay is closed.\n \n @emits {void} - Emits when the overlay is closed.\n \n /\n public readonly onClose$: Observable<void> = this.dynamicViewRef.getContext().closed ?? EMPTY;\n\n constructor(private readonly dynamicViewRef: DynamicViewRef<typeof ConnectedOverlayComponent>) {}\n\n /*\n Updates the connected overlay with new options.\n \n @param options {Partial<ConnectedOverlayOptions>} - The new options to be applied to the connected overlay.\n /\n public update(options: Partial<ConnectedOverlayOptions>): void {\n this.dynamicViewRef.update({ options: options as ConnectedOverlayOptions });\n }\n\n /\n Closes the connected overlay.\n \n @returns {void}\n /\n public async close(force = false) {\n const hiddenClass = force ? 'force-hidden' : this.dynamicViewRef.getContext().options?.hiddenClass \|\| 'is-hidden';\n this.element?.classList.add(hiddenClass);\n await waitForAnimations(this.element);\n this.dynamicViewRef.destroy();\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n Injector,\n Input,\n NgZone,\n OnChanges,\n OnDestroy,\n OnInit,\n Output,\n ViewChild,\n ViewEncapsulation,\n inject,\n} from '@angular/core';\nimport { VirtualElement, autoUpdate } from '@floating-ui/dom';\nimport { CoreModule } from '@odx/angular';\nimport { DynamicViewDirective } from '@odx/angular/cdk/dynamic-view';\nimport { CSSComponent } from '@odx/angular/internal';\nimport { NgChanges, Side, deferFn, getSide, hasChanged, injectElement, isPresent } from '@odx/angular/utils';\nimport { Subject } from 'rxjs';\nimport { computeOverlayPosition } from './helpers';\nimport { ConnectedOverlayOptions, DefaultConnectedOverlayOptions } from './models';\n\n@CSSComponent('cdk-connected-overlay')\n@Component({\n standalone: true,\n selector: 'odx-connected-overlay[popover=\"manual\"]',\n imports: [CoreModule, DynamicViewDirective],\n templateUrl: 'connected-overlay.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class ConnectedOverlayComponent implements OnInit, OnChanges, OnDestroy {\n private readonly zone = inject(NgZone);\n private positionUpdater: (() => void) \| null = null;\n\n protected readonly injector = inject(Injector);\n protected overlaySide?: Side;\n\n @ViewChild('content', { static: true })\n protected contentElement!: ElementRef<HTMLElement>;\n\n @ViewChild('arrow', { static: true })\n protected arrowElement!: ElementRef<HTMLElement>;\n\n public readonly element = injectElement();\n\n @Input()\n public referenceElement!: VirtualElement;\n\n @Input()\n public options: ConnectedOverlayOptions = DefaultConnectedOverlayOptions;\n\n @Output()\n public closed = new Subject<void>();\n\n public ngOnInit(): void {\n this.options.hooks?.beforeOpen?.();\n deferFn(() => {\n this.element.nativeElement?.isConnected && this.element.nativeElement?.showPopover?.();\n this.options.hooks?.afterOpen?.();\n });\n }\n\n public ngOnChanges(changes: NgChanges<ConnectedOverlayComponent>): void {\n if (hasChanged(changes, ['options'], false)) {\n this.overlaySide = getSide(this.options.position);\n this.element.nativeElement.classList.toggle('odx-cdk-connected-overlay--non-interactive', this.options.nonInteractive ?? false);\n }\n if (hasChanged(changes, ['referenceElement', 'options'], false)) {\n this.stopPositionUpdater();\n this.startPositionUpdater();\n }\n }\n\n public ngOnDestroy(): void {\n this.options.hooks?.beforeClose?.();\n this.stopPositionUpdater();\n this.element.nativeElement?.hidePopover?.();\n this.closed.next();\n this.options.hooks?.afterClose?.();\n }\n\n private startPositionUpdater(): void {\n this.positionUpdater = this.zone.runOutsideAngular(() =>\n autoUpdate(this.referenceElement, this.element.nativeElement, () => this.updatePosition(), {\n elementResize: isPresent(window.ResizeObserver),\n animationFrame: this.options.updateOnAnimationFrame,\n }),\n );\n }\n\n private stopPositionUpdater(): void {\n this.positionUpdater?.();\n this.positionUpdater = null;\n }\n\n private async updatePosition(): Promise<void> {\n return computeOverlayPosition(\n this.referenceElement,\n this.element.nativeElement,\n this.contentElement.nativeElement,\n this.arrowElement.nativeElement,\n this.options,\n ).then(({ placement }) => {\n this.overlaySide = getSide(placement);\n });\n }\n}\n","<div class=\"odx-cdk-connected-overlay__content {{ options.containerClass }}\" #content>\n <ng-template [odxDynamicView]=\"options.content\" [odxDynamicViewContext]=\"options.context\" [odxDynamicViewInjector]=\"injector\" />\n <div class=\"odx-cdk-connected-overlay-arrow\" #arrow></div>\n</div>\n","import { inject, Injectable } from '@angular/core';\nimport { VirtualElement } from '@floating-ui/dom';\nimport { DynamicViewRenderingOptions, DynamicViewService } from '@odx/angular/cdk/dynamic-view';\nimport { deepmerge } from '@odx/angular/internal';\nimport { ConnectedOverlayComponent } from './connected-overlay.component';\nimport { ConnectedOverlayOptions, ConnectedOverlayRef, DefaultConnectedOverlayOptions } from './models';\n\n/\n Service for creating and managing connected overlays. These overlays are UI elements such as popovers, tooltips,\n * or dropdown menus that are positioned relative to a reference element in the DOM. This service leverages the `DynamicViewService`\n * for dynamic component rendering and provides a streamlined API for creating overlays with custom positioning and options.\n \n Use the `ConnectedOverlayService` to dynamically create an overlay next to a specific element in your Angular application.\n * This example demonstrates creating a connected overlay next to a button element when the button is clicked.\n \n @example\n * ```ts\n * import { Component, ElementRef, ViewChild } from '@angular/core';\n * import { ConnectedOverlayService, ConnectedOverlayOptions } from '@odx/angular/cdk/connected-overlay';\n \n @Component({\n * selector: 'app-example',\n * template: `<button #triggerElement>Click me</button>`,\n * })\n * class AppComponent {\n * @ViewChild('triggerElement') triggerElementRef!: ElementRef;\n \n constructor(private connectedOverlayService: ConnectedOverlayService) {}\n \n showOverlay(): void {\n * const options: Partial<ConnectedOverlayOptions> = {\n * position: 'bottom-start',\n * showArrow: true,\n * content: 'Hello, world!',\n * };\n \n this.connectedOverlayService.createOverlay(this.triggerElementRef.nativeElement, options);\n * }\n * }\n * ```\n \n This service simplifies the process of creating dynamic, positionally aware overlays that enhance the interactivity\n * and visual appeal of Angular applications.\n /\n@Injectable({ providedIn: 'root' })\nexport class ConnectedOverlayService {\n private readonly dynamicViewService = inject(DynamicViewService);\n\n /\n Creates a connected overlay.\n * @param referenceElement - The reference element to which the overlay will be connected.\n * @param options - Optional configuration for the connected overlay.\n * @param renderingOptions - Optional rendering options for the connected overlay.\n * @returns {ConnectedOverlayRef} The created Connected Overlay reference instance.\n /\n public createOverlay(\n referenceElement: VirtualElement,\n options?: Partial<ConnectedOverlayOptions>,\n renderingOptions?: Partial<DynamicViewRenderingOptions>,\n ): ConnectedOverlayRef {\n const dynamicViewRef = this.dynamicViewService.createView(ConnectedOverlayComponent, {\n ...renderingOptions,\n context: { options: deepmerge(DefaultConnectedOverlayOptions, options) as ConnectedOverlayOptions, referenceElement },\n });\n\n return new ConnectedOverlayRef(dynamicViewRef);\n }\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["offset","withOffset"],"mappings":"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"}

package/fesm2022/odx-angular-cdk-custom-form-control.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, inject, booleanAttribute, Input, ViewChild } from '@angular/core';
+import { Directive, inject, booleanAttribute, ViewChild, Input } from '@angular/core';
 import { injectElement, arrayAttribute, Pure, untilDestroyed } from '@odx/angular/utils';
 import { __decorate, __metadata } from 'tslib';
 import { Validators, RequiredValidator, NgControl } from '@angular/forms';