{"version":3,"file":"daffodil-design.mjs","sources":["../../../libs/design/src/atoms/form/form-label/form-label.directive.ts","../../../libs/design/src/atoms/form/form-label/form-label.module.ts","../../../libs/design/src/core/prefix-suffix/prefix.directive.ts","../../../libs/design/src/core/prefix-suffix/suffix.directive.ts","../../../libs/design/src/core/prefix-suffix/prefix-suffix.module.ts","../../../libs/design/src/core/prefix-suffix/prefix-suffix.ts","../../../libs/design/src/core/colorable/colorable.ts","../../../libs/design/src/core/colorable/colorable.directive.ts","../../../libs/design/src/core/breakpoints/breakpoints.ts","../../../libs/design/src/core/breakpoints/noop.service.ts","../../../libs/design/src/core/breakpoints/provider.ts","../../../libs/design/src/core/constructor/constructor.ts","../../../libs/design/src/core/statusable/statusable.ts","../../../libs/design/src/core/statusable/statusable.directive.ts","../../../libs/design/src/core/skeletonable/skeletonable.directive.ts","../../../libs/design/src/core/text-alignable/text-alignable.ts","../../../libs/design/src/core/text-alignable/text-alignable.directive.ts","../../../libs/design/src/core/compactable/compactable.directive.ts","../../../libs/design/src/core/manage-container-layout/manage-container-layout.directive.ts","../../../libs/design/src/core/article-encapsulated/article-encapsulated.directive.ts","../../../libs/design/src/core/theming/types/theme.ts","../../../libs/design/src/core/theming/services/os-theme/ostheme.service.ts","../../../libs/design/src/core/theming/services/storage/theme-storage.service.ts","../../../libs/design/src/core/theming/functions/computer.ts","../../../libs/design/src/core/theming/services/theming.service.ts","../../../libs/design/src/core/theming/services/class-setter/theme-class-setter.service.ts","../../../libs/design/src/core/theming/initializer.ts","../../../libs/design/src/core/focus/focusable-elements.ts","../../../libs/design/src/core/focus/stack.service.ts","../../../libs/design/src/core/sizable/sizable.ts","../../../libs/design/src/core/sizable/sizable.directive.ts","../../../libs/design/src/core/openable/utils/state-error.ts","../../../libs/design/src/core/openable/openable.directive.ts","../../../libs/design/src/core/orientable/orientable.ts","../../../libs/design/src/core/orientable/orientable.directive.ts","../../../libs/design/src/core/selectable/selectable.directive.ts","../../../libs/design/src/core/sticky/sticky-tracker.directive.ts","../../../libs/design/src/core/disableable/disableable.directive.ts","../../../libs/design/src/core/loadable/loadable.directive.ts","../../../libs/design/src/core/roving-tab-index/roving-tab-index-group.service.ts","../../../libs/design/src/core/roving-tab-index/roving-tab-index-boundary.directive.ts","../../../libs/design/src/core/roving-tab-index/roving-tab-index.directive.ts","../../../libs/design/src/core/public_api.ts","../../../libs/design/src/public_api.ts","../../../libs/design/src/index.ts","../../../libs/design/src/daffodil-design.ts"],"sourcesContent":["import {\n Directive,\n HostBinding,\n} from '@angular/core';\n\n/**\n * @deprecated in favor of the {@link DaffFormFieldLabelDirective}. Deprecated in version 0.86.0. Will be removed in version 1.0.0.\n */\n@Directive({\n selector: '[daffFormLabel]',\n})\nexport class DaffFormLabelDirective {\n /**\n * @docs-private\n */\n @HostBinding('class.daff-form-label') class = true;\n}\n","import { NgModule } from '@angular/core';\n\nimport { DaffFormLabelDirective } from './form-label.directive';\n\n/**\n * @deprecated in favor of standalone components. Deprecated in version 0.84.0. Will be removed in version 1.0.0.\n */\n@NgModule({\n exports: [\n DaffFormLabelDirective,\n ],\n imports: [\n DaffFormLabelDirective,\n ],\n})\n\nexport class DaffFormLabelModule {}\n","import { Directive } from '@angular/core';\n\n/**\n * DaffPrefixDirective can be used to place content before another piece of content\n * in components like `DaffFormFieldComponent` or `DaffListComponent`.\n */\n@Directive({\n selector: '[daffPrefix]',\n host: {\n class: 'daff-prefix',\n },\n})\nexport class DaffPrefixDirective {}\n","import { Directive } from '@angular/core';\n\n/**\n * DaffSuffixDirective can be used to place content after another piece of content\n * in components like `DaffFormFieldComponent` or `DaffListComponent`.\n */\n@Directive({\n selector: '[daffSuffix]',\n host: {\n class: 'daff-suffix',\n },\n})\nexport class DaffSuffixDirective { }\n","import { NgModule } from '@angular/core';\n\nimport { DaffPrefixDirective } from './prefix.directive';\nimport { DaffSuffixDirective } from './suffix.directive';\n\n/**\n * @deprecated in favor of standalone components. Deprecated in version 0.91.0. Will be removed in version 1.0.0.\n */\n@NgModule({\n imports: [\n DaffPrefixDirective,\n DaffSuffixDirective,\n ],\n exports: [\n DaffPrefixDirective,\n DaffSuffixDirective,\n ],\n})\nexport class DaffPrefixSuffixModule {}\n","import { DaffPrefixDirective } from './prefix.directive';\nimport { DaffSuffixDirective } from './suffix.directive';\n\nexport const DAFF_PREFIX_SUFFIX_DIRECTIVES = [\n DaffPrefixDirective,\n DaffSuffixDirective,\n];\n","/**\n * @deprecated Deprecated in version 0.92.0. Will be removed in version 1.0.0.\n */\nexport interface DaffColorable {\n color: DaffColor;\n}\n\n/**\n * The available color options.\n */\nexport type DaffColor = 'primary' | 'secondary' | 'tertiary' | 'light' | 'dark' | 'theme' | 'theme-contrast' | 'black' | 'white' | undefined;\n\n/**\n * @deprecated Deprecated in version 0.92.0. Will be removed in version 1.0.0.\n */\nexport type DaffPalette = DaffColor;\n\n/**\n * The available color options.\n */\nexport enum DaffColorEnum {\n /**\n * The primary color.\n */\n Primary = 'primary',\n\n /**\n * The secondary color.\n */\n Secondary = 'secondary',\n\n /**\n * The tertiary color.\n */\n Tertiary = 'tertiary',\n\n /**\n * A light color that does not change based on the theme.\n */\n Light = 'light',\n\n /**\n * A dark color that does not change based on the theme.\n */\n Dark = 'dark',\n\n /**\n * A color that matches the theme.\n */\n Theme = 'theme',\n\n /**\n * A color that contrasts against the theme.\n */\n ThemeContrast = 'theme-contrast',\n\n /**\n * @deprecated Deprecated in version 0.82.0. Will be removed in version 1.0.0.\n */\n Black = 'black',\n\n /**\n * @deprecated Deprecated in version 0.82.0. Will be removed in version 1.0.0.\n */\n White = 'white',\n}\n","import {\n Directive,\n Input,\n isDevMode,\n OnChanges,\n OnInit,\n SimpleChanges,\n} from '@angular/core';\n\nimport {\n DaffColor,\n DaffColorEnum,\n} from './colorable';\n\nconst isDaffColor = (color: string) => (Object).values(DaffColorEnum).includes(color);\n\nconst validateColor = (color: string) => {\n if(isDevMode()) {\n if(color !== undefined && !isDaffColor(color)) {\n console.warn(color + ' is not a valid color in DaffColor');\n }\n }\n};\n\n/**\n * Enforces consistent use of {@link DaffColor} on a component by applying\n * color-specific CSS classes and validating the color in dev mode.\n */\n@Directive({\n selector: '[daffColorable]',\n host: {\n '[class.daff-primary]': 'color === \"primary\"',\n '[class.daff-secondary]': 'color === \"secondary\"',\n '[class.daff-tertiary]': 'color === \"tertiary\"',\n '[class.daff-light]': 'color === \"light\"',\n '[class.daff-dark]': 'color === \"dark\"',\n '[class.daff-theme]': 'color === \"theme\"',\n '[class.daff-theme-contrast]': 'color === \"theme-contrast\"',\n '[class.daff-black]': 'color === \"black\"',\n '[class.daff-white]': 'color === \"white\"',\n },\n})\nexport class DaffColorableDirective implements OnChanges, OnInit {\n /**\n * The color of the component.\n */\n @Input() color: DaffColor;\n\n /**\n * The default color used when no color is set.\n */\n defaultColor: DaffColor;\n\n /**\n * @docs-private\n */\n ngOnChanges(changes: SimpleChanges) {\n if (!changes.color.currentValue) {\n this.color = this.defaultColor;\n }\n }\n\n /**\n * @docs-private\n */\n ngOnInit() {\n validateColor(this.color);\n if (!this.color) {\n this.color = this.defaultColor;\n }\n }\n}\n\n","/**\n * Sensible breakpoints for layouts and interfaces used across `@daffodil/design` components.\n */\nexport enum DaffBreakpoints {\n /** `min-width: 1920px` */\n DESKTOP = '(min-width: 1920px)',\n /** `min-width: 1440px` */\n LAPTOP = '(min-width: 1440px)',\n /** `min-width: 1200px` */\n SMALL_LAPTOP = '(min-width: 1200px)',\n /** `min-width: 1024px` */\n BIG_TABLET = '(min-width: 1024px)',\n /** `min-width: 768px` */\n TABLET = '(min-width: 768px)',\n /** `min-width: 480px` */\n MOBILE = '(min-width: 480px)',\n}\n","import {\n BreakpointObserver,\n BreakpointState,\n} from '@angular/cdk/layout';\nimport { Injectable } from '@angular/core';\nimport {\n Observable,\n of,\n} from 'rxjs';\n\n/**\n * A no-op implementation of Angular CDK's `BreakpointObserver` that always reports\n * no breakpoints as matched. Useful for server-side rendering or testing contexts\n * where browser layout APIs are unavailable.\n */\n@Injectable({\n providedIn: 'root',\n})\nexport class NoopBreakpointObserver implements Omit {\n /**\n * @docs-private\n */\n // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method, @angular-eslint/use-lifecycle-interface\n ngOnDestroy(): void {}\n\n /**\n * Always returns `false`, indicating that none of the given media queries are active.\n */\n isMatched(value: string | readonly string[]): boolean {\n return false;\n }\n\n /**\n * Returns an observable that never emits a `BreakpointState`, making breakpoint-dependent logic inert.\n */\n observe(value: string | readonly string[]): Observable {\n return of();\n }\n\n}\n","import { BreakpointObserver } from '@angular/cdk/layout';\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n inject,\n InjectionToken,\n PLATFORM_ID,\n} from '@angular/core';\n\nimport { NoopBreakpointObserver } from './noop.service';\n\n/**\n * Provides a {@link NoopBreakpointObserver} if the platform is not browser.\n */\nexport const SERVER_SAFE_BREAKPOINT_OBSERVER = new InjectionToken>('SERVER_SAFE_BREAKPOINT_OBSERVER', {\n factory: () =>\n isPlatformBrowser(inject(PLATFORM_ID))\n ? inject(BreakpointObserver)\n : inject(NoopBreakpointObserver),\n});\n","/**\n * A basic constructor type useful for mixins\n * See https://blog.mariusschulz.com/2017/05/26/typescript-2-2-mixin-classes\n * for a really good explanation of why mixins are useful.\n */\n\nexport type Constructor> = new (...args: any[]) => T;\n","/**\n * The `DaffStatusable` interface defines a component that can have a status.\n * This status determines the styling or behavior of the component.\n */\nexport interface DaffStatusable {\n /**\n * The status of the component.\n */\n status: DaffStatus;\n}\n\n/**\n * The `DaffStatus` type defines the possible status values that a component can have.\n * - 'info': Indicates an informational status.\n * - 'warn': Indicates a warning status.\n * - 'critical': Indicates a critical or error status.\n * - 'success': Indicates a success status.\n */\nexport type DaffStatus = 'info' | 'warn' | 'critical' | 'success';\n\n/**\n * The `DaffStatusEnum` enumerates the possible status values for a component.\n */\nexport enum DaffStatusEnum {\n Info = 'info',\n Warn = 'warn',\n Critical = 'critical',\n Success = 'success'\n}\n","import {\n Directive,\n Input,\n isDevMode,\n OnChanges,\n OnInit,\n SimpleChanges,\n} from '@angular/core';\n\nimport {\n DaffStatus,\n DaffStatusEnum,\n DaffStatusable,\n} from './statusable';\n\nconst statusValues = (status: string) => (Object).values(DaffStatusEnum).includes(status);\n\nconst validateStatus = (status: string) => {\n if(isDevMode()) {\n if (status !== undefined && !statusValues(status)) {\n console.warn(\n `'${status}' is not a valid value of the status property.\\n\\n` +\n `The available values are: info, warn, critical, or success.`,\n );\n }\n }\n};\n\n/**\n * `DaffStatusableDirective` allows a component to conditionally apply status-specific\n * styles by setting CSS classes based on the specified status. This directive is useful\n * for indicating different statuses such as info, warning, critical, or success states.\n *\n * @example Implementing it as an attribute directive\n *\n * ```html\n *
Status content
\n * ```\n *\n * @example Implementing it as an Angular host directive\n *\n * ```ts\n * @Component({\n * selector: 'custom-component',\n * template: 'custom-component.html',\n * hostDirectives: [\n * {\n * directive: DaffStatusableDirective,\n * inputs: ['status'],\n * },\n * ],\n * })\n * export class CustomComponent { }\n *\n * ```scss\n * :host {\n * &.daff-critical {\n * background: daff-color($red, 10);\n * color: daff-color($red, 90);\n * }\n * }\n * ```\n *\n * The directive applies the following CSS classes to the component based on the status:\n *\n * - `daff-info`: Applied when the status is `info`.\n * - `daff-warn`: Applied when the status is `warn`.\n * - `daff-critical`: Applied when the status is `critical`.\n * - `daff-success`: Applied when the status is `success`.\n */\n@Directive({\n selector: '[daffStatusable]',\n host: {\n '[class.daff-info]': 'status === \"info\"',\n '[class.daff-warn]': 'status === \"warn\"',\n '[class.daff-critical]': 'status === \"critical\"',\n '[class.daff-success]': 'status === \"success\"',\n },\n})\nexport class DaffStatusableDirective implements DaffStatusable, OnChanges, OnInit {\n /**\n * Sets the status on a component.\n */\n @Input() status: DaffStatus;\n\n /**\n * Sets a default status.\n *\n * @example\n * ```ts\n * constructor(private statusDirective: DaffStatusableDirective) {\n * this.statusDirective.defaultStatus = 'info';\n * }\n * ```\n */\n defaultStatus: DaffStatus;\n\n /**\n * @docs-private\n */\n ngOnChanges(changes: SimpleChanges) {\n if (!changes.status.currentValue) {\n this.status = this.defaultStatus;\n }\n }\n\n /**\n * @docs-private\n */\n ngOnInit() {\n validateStatus(this.status);\n\n if (this.defaultStatus && !this.status) {\n this.status = this.defaultStatus;\n }\n }\n}\n\n","import {\n Directive,\n Input,\n} from '@angular/core';\n\n/**\n * `DaffSkeletonableDirective` allows a component to display a skeleton loading\n * state by conditionally applying a CSS class. This is useful for indicating to\n * users that content is loading or being processed. This directive can be used to\n * apply a skeleton loading state to any component by toggling the `skeleton`\n * input property. When `skeleton` is `true`, the `daff-skeleton` CSS class\n * is applied, which should style the component to look like a loading placeholder.\n *\n * @example Implementing it as an attribute directive\n *\n * ```html\n *
Content
\n * ```\n *\n * @example Implementing it as an Angular host directive\n *\n * ```ts\n * @Component({\n * selector: 'custom-component',\n * template: 'custom-component.html',\n * hostDirectives: [\n * {\n * directive: DaffSkeletonableDirective,\n * inputs: ['skeleton'],\n * },\n * ],\n * })\n * export class CustomComponent { }\n * ```\n *\n * ```scss\n * :host {\n * .daff-skeleton {\n * @include state.skeleton-screen(48px, 24px);\n * }\n * }\n * ```\n *\n * The directive applies the `daff-skeleton` class to the component should be defined in your styles to display the loading\n * state as desired. It can be used in conjuction with the `skeleton-screen` mixin, which provides predefined loading styles.\n */\n@Directive({\n selector: '[daffSkeletonable]',\n host: {\n '[class.daff-skeleton]': 'skeleton',\n },\n})\nexport class DaffSkeletonableDirective {\n /**\n * Controls whether the component displays a skeleton loading state.\n */\n @Input() skeleton = false;\n}\n","/**\n * @deprecated Deprecated in version 0.92.1. Will be removed in version 1.0.0.\n */\nexport interface DaffTextAlignable {\n textAlignment: DaffTextAlignment;\n}\n\n/**\n * * The available text alignment options.\n */\nexport type DaffTextAlignment = 'left' | 'center' | 'right';\n\n/**\n * @deprecated Deprecated in version 0.93.0. Will be removed in version 0.96.0.\n *\n * This enum will be removed from the public api in v1.0.0.\n */\nexport enum DaffTextAlignmentEnum {\n Left = 'left',\n Center = 'center',\n Right = 'right'\n}\n","import {\n Directive,\n Input,\n isDevMode,\n OnChanges,\n OnInit,\n SimpleChanges,\n} from '@angular/core';\n\nimport {\n DaffTextAlignable,\n DaffTextAlignment,\n DaffTextAlignmentEnum,\n} from './text-alignable';\n\nconst textAlignmentValues = (textAlignment: string) => (Object).values(DaffTextAlignmentEnum).includes(textAlignment);\n\nconst validateTextAlignment = (textAlignment: string) => {\n if(isDevMode()) {\n if(textAlignment !== undefined && !textAlignmentValues(textAlignment)) {\n console.warn(`'${textAlignment}' is not a valid value of the textAlignment property. The available values are: left, center, or right.`);\n }\n }\n};\n\n/**\n * `DaffTextAlignableDirective` enforces consistent use of text alignment across components.\n */\n@Directive({\n selector: '[daffTextAlignable]',\n host: {\n '[class.daff-left]': 'textAlignment === \"left\"',\n '[class.daff-center]': 'textAlignment === \"center\"',\n '[class.daff-right]': 'textAlignment === \"right\"',\n },\n})\nexport class DaffTextAlignableDirective implements DaffTextAlignable, OnChanges, OnInit {\n\n /**\n * The text alignment of the component.\n */\n @Input() textAlignment: DaffTextAlignment;\n\n /**\n * The default used when no text alignment is set.\n */\n public defaultAlignment: DaffTextAlignment;\n\n /**\n * @docs-private\n */\n ngOnChanges(changes: SimpleChanges) {\n if (!changes.textAlignment?.currentValue) {\n this.textAlignment = this.defaultAlignment;\n }\n }\n\n /**\n * @docs-private\n */\n ngOnInit() {\n validateTextAlignment(this.textAlignment);\n\n if (!this.textAlignment) {\n this.textAlignment = this.defaultAlignment;\n }\n }\n}\n\n","import {\n Directive,\n Input,\n} from '@angular/core';\n\n/**\n * Enforces consistent use of the compact property.\n */\n@Directive({\n selector: '[daffCompactable]',\n host: {\n '[class.daff-compact]': 'compact',\n },\n})\nexport class DaffCompactableDirective {\n /**\n * Whether the component is compact.\n */\n @Input() compact = false;\n}\n","import { Directive } from '@angular/core';\n\n/**\n * `DaffManageContainerLayoutDirective` gives a component the ability to manage a `DaffContainerComponent`'s layout.\n * By including this directive, predetermined layout styles are passed down to the container.\n *\n * To understand the motivation for this directive, consider:\n *\n * ```html\n * \n * \n * \n * ```\n * vs.\n *\n * ```html\n * \n * \n * \n * ```\n *\n * The former may inappropriately constrain the width of its child elements,\n * while the latter (without `DaffManageContainerLayoutDirective`) may unexpectedly\n * interfere in the layout features of its parent element (i.e. display: grid, display: flex).\n *\n * @example Implementing it as an attribute directive\n *\n * ```html\n * \n * \n * \n * ```\n *\n * ```scss\n * :host {\n * display: grid;\n * grid-template-columns: 1fr 1fr;\n * }\n * ```\n *\n * @example Implementing it as an Angular host directive\n *\n * ```ts\n * @Component({\n * selector: 'my-custom-component',\n * template: 'my-custom-component.html',\n * hostDirectives: [{ directive: DaffManageContainerLayoutDirective }],\n * })\n * export class MyCustomComponent { }\n *\n * ```scss\n * :host {\n * display: grid;\n * grid-template-columns: 1fr 1fr;\n * }\n * ```\n *\n * This directive will apply the `daff-manage-container-layout` class to your component, ensuring that the styles set on `:host` are passed down to the container.\n */\n\n@Directive({\n selector: '[daffManageContainerLayout]',\n host: {\n class: 'daff-manage-container-layout',\n },\n})\nexport class DaffManageContainerLayoutDirective {}\n","import { Directive } from '@angular/core';\n\n/**\n * The `DaffArticleEncapsulatedDirective` prevents {@link DaffArticleComponent } styles from bleeding into custom components nested within an article.\n */\n@Directive({\n selector: '[daffArticleEncapsulated]',\n host: {\n class: 'daff-ae',\n },\n})\nexport class DaffArticleEncapsulatedDirective {}\n","/**\n * The possible states of a theme.\n */\nexport enum DaffTheme {\n Light = 'light',\n Dark = 'dark',\n System = 'system'\n}\n","\nimport {\n Injectable,\n Inject,\n DOCUMENT,\n} from '@angular/core';\nimport {\n Observable,\n of,\n fromEventPattern,\n} from 'rxjs';\nimport {\n map,\n startWith,\n} from 'rxjs/operators';\n\nimport { DaffTheme } from '../../types/theme';\n\nexport const mediaQueryDarkPreference = '(prefers-color-scheme: dark)';\n\nexport const addHandlerFactory = (window: Window) => (handler: any) => {\n const query = window.matchMedia(mediaQueryDarkPreference);\n return 'addEventListener' in query\n ? query.addEventListener('change', handler)\n : (query).addListener(handler);\n};\n\nexport const removeHandlerFactory = (window: Window) => (handler: any) => {\n const query = window.matchMedia(mediaQueryDarkPreference);\n return 'removeEventListener' in query\n ? query.removeEventListener('change', handler)\n : (query).removeListener(handler);\n};\n\n/**\n * A service for retrieving the operating system's theme preference.\n */\n@Injectable({\n providedIn: 'root',\n})\nexport class DaffOsThemeService {\n\n preference$: Observable;\n\n private doc?: Document;\n\n constructor(@Inject(DOCUMENT) _doc: any) {\n this.doc = _doc;\n\n this.preference$ = this.doc.defaultView?.matchMedia\n ? fromEventPattern(\n addHandlerFactory(this.doc.defaultView),\n removeHandlerFactory(this.doc.defaultView),\n )\n .pipe(\n startWith(this.doc.defaultView?.matchMedia(mediaQueryDarkPreference)),\n map((e: MediaQueryListEvent) => e.matches),\n map((prefersDark) => prefersDark ? DaffTheme.Dark : DaffTheme.Light),\n )\n : of(DaffTheme.System);\n }\n\n /**\n * Get the operating system's theme preference.\n */\n public getThemePreference(): Observable {\n return this.preference$;\n }\n}\n","\nimport {\n Injectable,\n Inject,\n DOCUMENT,\n} from '@angular/core';\nimport {\n Observable,\n fromEvent,\n Subject,\n merge,\n EMPTY,\n of,\n} from 'rxjs';\nimport {\n map,\n filter,\n startWith,\n shareReplay,\n catchError,\n} from 'rxjs/operators';\n\nimport {\n DaffPersistenceService,\n DaffServerSafePersistenceServiceToken,\n} from '@daffodil/core';\n\nimport { DaffTheme } from '../../types/theme';\n\nexport type ThemeStorageEvent = Pick;\n\nexport const THEME_STORAGE_KEY = 'DAFF_THEME';\n\nexport const coerceValue = (val?: string): DaffTheme =>\n val === DaffTheme.Dark || val === DaffTheme.Light\n ? val\n : DaffTheme.System;\n\n/**\n * Generate a StorageEvent\n */\nconst storageEventBuilder = (\n value: DaffTheme,\n): ThemeStorageEvent => ({\n key: THEME_STORAGE_KEY,\n newValue: coerceValue(value) !== DaffTheme.System ? value : null,\n});\n\n/**\n * A service for retrieving and managing the application's stored theme.\n */\n@Injectable({\n providedIn: 'root',\n})\nexport class DaffThemeStorageService {\n private theme$: Observable;\n private storage$: Subject = new Subject();\n private doc?: Document;\n\n constructor(\n @Inject(DaffServerSafePersistenceServiceToken)\n private storage: DaffPersistenceService,\n @Inject(DOCUMENT) _doc: any,\n ) {\n this.doc = _doc;\n this.theme$ = merge(\n this.storage$,\n this.doc.defaultView\n ? fromEvent(\n this.doc.defaultView,\n 'storage',\n ).pipe(\n startWith(\n storageEventBuilder(\n this.storage.getItem(THEME_STORAGE_KEY),\n ),\n ),\n catchError((e) => EMPTY),\n )\n : of(storageEventBuilder(\n this.storage.getItem(THEME_STORAGE_KEY),\n )),\n ).pipe(\n filter(\n (e: ThemeStorageEvent) => e.key === THEME_STORAGE_KEY,\n ),\n map((e) => coerceValue(e.newValue)),\n shareReplay(1),\n );\n }\n\n /**\n * Given that Safari doesn't respect in-tab storage events, we have to manually\n * fire storage events in the open tab on Webkit based browsers.\n */\n private progressStorageEvent(theme: DaffTheme) {\n this.storage$.next(storageEventBuilder(theme));\n }\n\n getThemeAsObservable(): Observable {\n return this.theme$;\n }\n\n getTheme(): DaffTheme {\n return coerceValue(this.storage.getItem(THEME_STORAGE_KEY));\n }\n\n setTheme(theme: DaffTheme): void {\n this.progressStorageEvent(theme);\n this.storage.setItem(THEME_STORAGE_KEY, theme);\n }\n\n removeThemeSetting(): void {\n this.progressStorageEvent(DaffTheme.System);\n this.storage.removeItem(THEME_STORAGE_KEY);\n }\n}\n","import { DaffTheme } from '../types/theme';\n\n/**\n * Computes the appropriate application theme from the specified values.\n * It cascades from `storedPreference` to `osPreference` to `defaultTheme`.\n */\nexport const daffComputeThemeSetting = (\n osPreference?: DaffTheme,\n storedPreference?: DaffTheme,\n defaultTheme: DaffTheme = DaffTheme.Dark,\n): DaffTheme => {\n if (storedPreference && storedPreference !== DaffTheme.System) {\n return storedPreference;\n }\n\n if (osPreference === 'dark') {\n return DaffTheme.Dark;\n }\n\n if (osPreference === 'light') {\n return DaffTheme.Light;\n }\n\n return defaultTheme;\n};\n","import { Injectable } from '@angular/core';\nimport {\n Observable,\n combineLatest,\n} from 'rxjs';\nimport { map } from 'rxjs/operators';\n\nimport { DaffOsThemeService } from './os-theme/ostheme.service';\nimport { DaffThemeStorageService } from './storage/theme-storage.service';\nimport { daffComputeThemeSetting } from '../functions/computer';\nimport { DaffTheme } from '../types/theme';\n\n/**\n * A service for controlling the application's theme.\n */\n@Injectable({\n providedIn: 'root',\n})\nexport class DaffThemingService {\n private theme$: Observable;\n private theme: DaffTheme;\n\n constructor(\n private osTheme: DaffOsThemeService,\n private themeStorage: DaffThemeStorageService,\n ) {\n\n this.theme$ = combineLatest([\n this.osTheme.getThemePreference(),\n this.themeStorage.getThemeAsObservable(),\n ]).pipe(\n map(([osPreference, storedPreference]) => daffComputeThemeSetting(osPreference, storedPreference)),\n );\n\n this.theme$.subscribe((theme) => {\n this.theme = theme;\n });\n }\n\n /**\n * Get the current theme.\n */\n getTheme(): Observable {\n return this.theme$;\n }\n\n /**\n * Get the user's stored theme preference. Emits `DaffTheme.System` when no\n * preference is stored and the theme follows the operating system.\n */\n getThemePreference(): Observable {\n return this.themeStorage.getThemeAsObservable();\n }\n\n /**\n * Set the theme to dark mode.\n */\n darkMode() {\n this.themeStorage.setTheme(DaffTheme.Dark);\n }\n\n /**\n * Set the theme to light mode.\n */\n lightMode() {\n this.themeStorage.setTheme(DaffTheme.Light);\n }\n\n /**\n * Follow the operating system's theme preference by clearing any stored theme.\n */\n systemMode() {\n this.themeStorage.removeThemeSetting();\n }\n}\n","\nimport {\n Injectable,\n Inject,\n Renderer2,\n RendererFactory2,\n DOCUMENT,\n} from '@angular/core';\nimport { Subscription } from 'rxjs';\n\nimport { DaffTheme } from '../../types/theme';\nimport { DaffThemingService } from '../theming.service';\n\nexport const DAFF_THEME_DARK_CSS_CLASS = 'daff-theme-dark';\nexport const DAFF_THEME_LIGHT_CSS_CLASS = 'daff-theme-light';\n\n/**\n * This class updates the body of the application with the theme's appropriate class.\n * Note that this service is not provided tree-shakably by intention.\n * It is intended to be provided manually during setup.\n */\n@Injectable()\nexport class DaffThemeClassSetterService {\n private renderer: Renderer2;\n private subscription: Subscription;\n private doc?: Document;\n\n constructor(\n @Inject(DOCUMENT) _doc: any,\n private rendererFactory: RendererFactory2,\n private themingService: DaffThemingService,\n ) {\n this.doc = _doc;\n this.renderer = this.rendererFactory.createRenderer(null, null);\n }\n\n /**\n * This function is intended to only be called once when the service\n * is initialized for the very first time. This will mutate the class\n * on the body of the document for the appropriate theme as controlled\n * by the state of the application's theme.\n */\n beginThemeSync(): void {\n this.subscription = this.themingService.getTheme().subscribe((theme) => {\n // For simplicty, remove all previously applied themes.\n this.renderer.removeClass(this.doc.body, DAFF_THEME_LIGHT_CSS_CLASS);\n this.renderer.removeClass(this.doc.body, DAFF_THEME_DARK_CSS_CLASS);\n this.renderer.addClass(this.doc.body, theme === DaffTheme.Dark ? DAFF_THEME_DARK_CSS_CLASS : DAFF_THEME_LIGHT_CSS_CLASS);\n });\n }\n\n /**\n * This unsubscribes from the bodyClass subscription that exists.\n */\n destroy(): void {\n this.subscription?.unsubscribe();\n this.renderer.removeClass(this.doc.body, DAFF_THEME_LIGHT_CSS_CLASS);\n this.renderer.removeClass(this.doc.body, DAFF_THEME_DARK_CSS_CLASS);\n }\n}\n","import {\n inject,\n makeEnvironmentProviders,\n provideAppInitializer,\n} from '@angular/core';\n\nimport { DaffThemeClassSetterService } from './services/class-setter/theme-class-setter.service';\n\nexport const DAFF_THEME_INIT = (classSetter: DaffThemeClassSetterService) => () => classSetter.beginThemeSync();\n\n/**\n * The theme provider for the app.\n * This configures updating the body with the theme class.\n */\nexport const DAFF_THEME_INITIALIZER = makeEnvironmentProviders([\n DaffThemeClassSetterService,\n provideAppInitializer(() => {\n const initializerFn = (DAFF_THEME_INIT)(inject(DaffThemeClassSetterService));\n return initializerFn();\n }),\n]);\n","export const daffFocusableElementsSelector = 'a[href],a[routerlink], button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"])';\n","\nimport {\n Inject,\n Injectable,\n DOCUMENT,\n} from '@angular/core';\n\n@Injectable({ providedIn: 'root' })\nexport class DaffFocusStackService {\n private _stack: HTMLElement[] = [];\n\n constructor(@Inject(DOCUMENT) private document: any) {\n\n }\n\n /**\n * Return the current length of the stack.\n */\n length(): number {\n return this._stack.length;\n }\n\n /**\n * Adds a HTML element to a focus stack and returns the new length of the stack.\n *\n * Generally, you will probably want to call this before you transition focus\n * onto a new element.\n *\n * @example Using the push function\n * ```ts\n * this._focusStack.push(this._doc.activeElement);\n * ```\n */\n push(el: HTMLElement | undefined = undefined): number {\n this._stack.push(el ?? this.document.activeElement);\n return this._stack.length;\n }\n\n /**\n * Focuses on the HTML element at the top of a stack.\n *\n * @example Using the focus function\n * ```ts\n * this._focusStack.focus(this._doc.activeElement);\n * ```\n */\n focus() {\n if(this._stack.length >= 1) {\n this._stack.slice(-1)[0].focus();\n } else {\n (this.document.activeElement).blur();\n }\n }\n\n /**\n * Removes the HMTL element at the top of a stack and focuses on it.\n */\n pop(focus: boolean = true): HTMLElement {\n let el = this._stack.pop();\n while(el === undefined && this._stack.length > 0) {\n el = this._stack.pop();\n }\n\n if(el) {\n if(focus) {\n el.focus();\n }\n return el;\n }\n\n (this.document.activeElement).blur();\n return this.document.activeElement;\n }\n}\n","/**\n * @deprecated Deprecated in version 0.92.1. Will be removed in version 1.0.0.\n */\n\nexport interface DaffSizable {\n size: T;\n}\n\nexport type DaffSizeXSmallType = 'xs';\nexport type DaffSizeSmallType = 'sm';\nexport type DaffSizeMediumType = 'md';\nexport type DaffSizeLargeType = 'lg';\nexport type DaffSizeXLargeType = 'xl';\n\n/**\n * All available sizes.\n */\nexport type DaffSizeAllType = DaffSizeXSmallType | DaffSizeSmallType | DaffSizeMediumType | DaffSizeLargeType | DaffSizeXLargeType;\n\n/**\n * @deprecated Deprecated in version 0.93.0. Will be removed in version 0.96.0.\n *\n * This enum will be removed from the public api in v1.0.0.\n */\nexport enum DaffSizableEnum {\n XSmall = 'xs',\n Small = 'sm',\n Medium = 'md',\n Large = 'lg',\n XLarge = 'xl'\n}\n","import {\n Directive,\n Input,\n OnChanges,\n OnInit,\n SimpleChanges,\n} from '@angular/core';\n\nimport { DaffSizeAllType } from './sizable';\n\n/**\n * `DaffSizableDirective` enforces consistent use of sizes across components.\n */\n@Directive({\n selector: '[daffSizable]',\n host: {\n '[class.daff-xs]': 'size === \"xs\"',\n '[class.daff-sm]': 'size === \"sm\"',\n '[class.daff-md]': 'size === \"md\"',\n '[class.daff-lg]': 'size === \"lg\"',\n '[class.daff-xl]': 'size === \"xl\"',\n },\n})\nexport class DaffSizableDirective implements OnChanges, OnInit {\n /**\n * The size of the component.\n */\n @Input() size: T;\n\n /**\n * Sets a default size.\n */\n public defaultSize: T;\n\n /**\n * @docs-private\n */\n ngOnChanges(changes: SimpleChanges) {\n if(!changes.size?.currentValue) {\n this.size = this.defaultSize;\n }\n }\n\n /**\n * @docs-private\n */\n ngOnInit() {\n if(!this.size) {\n this.size = this.defaultSize;\n }\n }\n}\n\n","export const DaffOpenableStateError = '`open` cannot be set as an input property on the DaffOpenableDirective if it is not stateless. Did you mean to call `reveal`, `hide`, or `toggle`?';\n","import {\n Directive,\n EventEmitter,\n OnChanges,\n Output,\n SimpleChanges,\n isDevMode,\n model,\n} from '@angular/core';\n\nimport { DaffOpenable } from './openable';\nimport { DaffOpenableStateError } from './utils/state-error';\n\n/**\n * A directive that opens or closes a component. It should only be used as an [Angular Host Directive](https://angular.dev/guide/directives/directive-composition-api).\n * This directive is stateless by default, but it supports both a state and stateless implementation. Only one version should be used within a component.\n *\n * @example Using the DaffOpenableDirective\n * ```ts\n * import {\n * Component,\n * ChangeDetectionStrategy,\n * } from '@angular/core';\n *\n * import { DaffOpenableDirective } from '@daffodil/design';\n *\n * @Component({\n * selector: 'custom-component',\n * template: `\n * \n *
This is a hidden block that can be shown by clicking the button.
\n * `,\n * styles: [`\n * :host {\n * .hidden-block {\n * display: none;\n * }\n *\n * &.daff-open {\n * .hidden-block {\n * display: block;\n * }\n * }\n * }`],\n * changeDetection: ChangeDetectionStrategy.OnPush,\n * hostDirectives: [{\n * directive: DaffOpenableDirective,\n * }],\n * })\n * export class CustomComponent {\n * constructor(private openDirective: DaffOpenableDirective) {}\n *\n * toggle() {\n * this.openDirective.toggle();\n * }\n * }\n * ```\n */\n@Directive({\n selector: '[daffOpenable]',\n host: {\n '[class.daff-open]': 'open()',\n },\n})\n\nexport class DaffOpenableDirective implements DaffOpenable, OnChanges {\n /** Controls whether the component is open. */\n open = model(false);\n\n private _setOpen(v: boolean) {\n if(!this.stateless) {\n this.open.set(v);\n }\n }\n\n /** Whether or not a component should handle state\n *\n * @example Setting the `stateless` property on a component\n * ```ts\n * constructor(private openDirective: DaffOpenableDirective) {\n * this.openDirective.stateless = false;\n * }\n * ```\n */\n stateless = true;\n\n /**\n * Event fired when a component is opened (true) or closed (false)\n */\n @Output() toggled: EventEmitter = new EventEmitter();\n\n /**\n * Open the component\n */\n reveal() {\n this._setOpen(true);\n\n this.toggled.emit(true);\n }\n\n /**\n * Close the component\n */\n hide() {\n this._setOpen(false);\n\n this.toggled.emit(false);\n }\n\n /**\n * Open or close the component, depending on if it's currently open or not\n */\n toggle() {\n const state = !this.open();\n\n this._setOpen(state);\n\n this.toggled.emit(state);\n }\n\n /**\n * @docs-private\n */\n ngOnChanges(changes: SimpleChanges) {\n /**\n * Throw an error if open is set in a component that is not stateless\n */\n if(changes.open.currentValue && !this.stateless) {\n this.open.set(changes.open.previousValue);\n\n if(isDevMode()) {\n throw new Error(DaffOpenableStateError);\n }\n }\n }\n}\n","/**\n * @deprecated Deprecated in version 0.92.1. Will be removed in version 1.0.0.\n *\n * Interface for giving a component the ability to customize text alignment for component-specific UI.\n */\nexport interface DaffOrientable {\n orientation: DaffOrientation;\n}\n\n/**\n * The possible types that can be passed to a DaffOrientable component\n */\nexport type DaffOrientation = 'horizontal' | 'vertical';\n\n/**\n * @deprecated Deprecated in version 0.93.0. Will be removed in version 0.96.0.\n *\n * This enum will be removed from the public api in v1.0.0.\n */\nexport enum DaffOrientationEnum {\n Horizontal = 'horizontal',\n Vertical = 'vertical',\n}\n","import {\n Directive,\n Input,\n isDevMode,\n OnChanges,\n OnInit,\n SimpleChanges,\n} from '@angular/core';\n\nimport {\n DaffOrientable,\n DaffOrientation,\n DaffOrientationEnum,\n} from './orientable';\n\nconst orientationValues = (orientation: string) => (Object).values(DaffOrientationEnum).includes(orientation);\n\nconst validateOrientation = (orientation: string) => {\n if(isDevMode()) {\n if(orientation !== undefined && !orientationValues(orientation)) {\n console.warn(`'${orientation}' is not a valid value of the orientation property. The available values are: left, center, or right.`);\n }\n }\n};\n\n/**\n * `DaffOrientableDirective`enforces consistent use of orientation across components.\n */\n@Directive({\n selector: '[daffOrientable]',\n host: {\n '[class.daff-horizontal]': 'orientation === \"horizontal\"',\n '[class.daff-vertical]': 'orientation === \"vertical\"',\n },\n})\nexport class DaffOrientableDirective implements DaffOrientable, OnChanges, OnInit {\n /**\n * The orientation of the component.\n */\n @Input() orientation: DaffOrientation;\n\n /**\n * The default used when no orientation is set.\n */\n public defaultOrientation: DaffOrientation;\n\n /**\n * @docs-private\n */\n ngOnInit() {\n if (this.defaultOrientation && !this.orientation) {\n this.orientation = this.defaultOrientation;\n }\n\n validateOrientation(this.orientation);\n }\n\n /**\n * @docs-private\n */\n ngOnChanges(changes: SimpleChanges) {\n if (!changes.orientation?.currentValue) {\n this.orientation = this.defaultOrientation;\n }\n }\n}\n\n","import {\n ChangeDetectorRef,\n Directive,\n EventEmitter,\n Input,\n Output,\n} from '@angular/core';\n\nimport { DaffSelectable } from '../selectable/selectable';\n\n@Directive({\n selector: '[daffSelected]',\n host: {\n '[class.daff-selected]': 'selected',\n },\n})\n\nexport class DaffSelectableDirective implements DaffSelectable {\n /**\n * Controls whether the component is selected.\n */\n @Input() selected = false;\n\n /**\n * An event that fires after the component becomes selected.\n */\n @Output() becameSelected: EventEmitter = new EventEmitter();\n\n constructor(private cd: ChangeDetectorRef) {}\n\n /**\n * Selects the component and emits the `becameSelected` event.\n */\n select() {\n this.selected = true;\n this.becameSelected.emit();\n this.cd.markForCheck();\n return this;\n }\n\n /**\n * Deselects the component.\n */\n deselect() {\n this.selected = false;\n this.cd.markForCheck();\n return this;\n }\n}\n","\nimport {\n Directive,\n ElementRef,\n OnDestroy,\n Renderer2,\n Inject,\n Input,\n afterNextRender,\n DOCUMENT,\n} from '@angular/core';\n\n@Directive({\n selector: '[daffStickyTracker]',\n})\nexport class DaffStickyTrackerDirective implements OnDestroy {\n @Input() sticky: 'top' | 'bottom' | undefined = undefined;\n\n private sentinelObserver?: IntersectionObserver;\n private readonly className = 'is-pinned';\n private lastPinnedState: boolean | null = null;\n private debounceTimeout?: number;\n private sentinelElement?: HTMLElement;\n private idleCallbackId?: number;\n\n constructor(\n private readonly elementRef: ElementRef,\n private readonly renderer: Renderer2,\n @Inject(DOCUMENT) private readonly document: Document,\n ) {\n afterNextRender({\n write: () => {\n this.createSentinel();\n },\n });\n\n afterNextRender({\n read: () => {\n this.scheduleObserverCreation();\n },\n });\n }\n\n private get isBottomSticky(): boolean {\n return this.sticky === 'bottom';\n }\n\n private scheduleObserverCreation(): void {\n const defaultView = this.document.defaultView;\n\n if (defaultView?.requestIdleCallback) {\n this.idleCallbackId = defaultView.requestIdleCallback(() => {\n this.createSentinelObserver();\n });\n } else {\n this.idleCallbackId = defaultView?.setTimeout(() => {\n this.createSentinelObserver();\n }, 0);\n }\n }\n\n private findScrollableParent(): HTMLElement | null {\n let parent = this.elementRef.nativeElement.parentElement;\n\n while (parent && parent !== this.document.body) {\n const computedStyle = this.document.defaultView?.getComputedStyle(parent);\n const overflowY = computedStyle?.overflowY;\n\n if (overflowY === 'auto' || overflowY === 'scroll') {\n return parent;\n }\n parent = parent.parentElement;\n }\n\n return null;\n }\n\n private createSentinel(): void {\n const stickyElement = this.elementRef.nativeElement;\n const parentElement = stickyElement.parentElement;\n\n if (!parentElement) {\n throw new Error('DaffStickyTracker: Sticky element must have a parent element');\n }\n\n this.sentinelElement = this.renderer.createElement('div');\n\n this.renderer.setStyle(this.sentinelElement, 'width', '1px');\n this.renderer.setStyle(this.sentinelElement, 'height', '1px');\n this.renderer.setStyle(this.sentinelElement, 'opacity', '0');\n this.renderer.setStyle(this.sentinelElement, 'pointer-events', 'none');\n this.renderer.setStyle(this.sentinelElement, 'margin', '0');\n this.renderer.setStyle(this.sentinelElement, 'padding', '0');\n this.renderer.setStyle(this.sentinelElement, 'border', 'none');\n this.renderer.setStyle(this.sentinelElement, 'overflow', 'hidden');\n this.renderer.setStyle(this.sentinelElement, 'font-size', '0');\n this.renderer.setStyle(this.sentinelElement, 'line-height', '0');\n\n if (this.isBottomSticky) {\n this.renderer.insertBefore(\n parentElement,\n this.sentinelElement,\n stickyElement.nextSibling,\n );\n } else {\n this.renderer.insertBefore(\n parentElement,\n this.sentinelElement,\n stickyElement,\n );\n }\n }\n\n private createSentinelObserver(): void {\n const scrollableParent = this.findScrollableParent();\n const stickyElement = this.elementRef.nativeElement;\n\n this.sentinelObserver = new IntersectionObserver(\n ([entry]) => {\n const shouldBePinned = !entry.isIntersecting;\n\n if (this.lastPinnedState !== shouldBePinned) {\n if (this.debounceTimeout) {\n clearTimeout(this.debounceTimeout);\n }\n\n this.debounceTimeout = this.document.defaultView?.setTimeout(() => {\n if (shouldBePinned) {\n this.renderer.addClass(stickyElement, this.className);\n } else {\n this.renderer.removeClass(stickyElement, this.className);\n }\n this.lastPinnedState = shouldBePinned;\n }, 5);\n }\n },\n {\n root: scrollableParent,\n threshold: 0,\n rootMargin: '1px',\n },\n );\n\n if (this.sentinelElement) {\n this.sentinelObserver.observe(this.sentinelElement);\n }\n }\n\n ngOnDestroy(): void {\n if (this.idleCallbackId !== undefined) {\n const defaultView = this.document.defaultView;\n if (defaultView?.cancelIdleCallback) {\n defaultView.cancelIdleCallback(this.idleCallbackId);\n } else {\n defaultView?.clearTimeout(this.idleCallbackId);\n }\n }\n\n if (this.debounceTimeout) {\n clearTimeout(this.debounceTimeout);\n }\n\n if (this.sentinelObserver && this.sentinelElement) {\n this.sentinelObserver.unobserve(this.sentinelElement);\n }\n this.sentinelObserver?.disconnect();\n\n if (this.sentinelElement && this.sentinelElement.parentElement) {\n this.renderer.removeChild(this.sentinelElement.parentElement, this.sentinelElement);\n }\n }\n}\n","import {\n Directive,\n Input,\n} from '@angular/core';\n\n/**\n * Enforces consistent use of the disabled property.\n */\n@Directive({\n selector: '[daffDisableable]',\n host: {\n '[class.daff-disabled]': 'disabled',\n },\n})\nexport class DaffDisableableDirective {\n /**\n * Whether the component is disabled.\n */\n @Input() disabled = false;\n}\n","import {\n Directive,\n Input,\n} from '@angular/core';\n\n/**\n * `DaffLoadableDirective` allows a component to display a loading UI\n * by conditionally applying a CSS class. This is useful for indicating to\n * users that a user action is being processed. This directive can be used to\n * apply a loading UI to any component by toggling the `loading`\n * input property. When `loading` is `true`, the `daff-loading` CSS class\n * is applied, which should style the component to look like it's not interactable.\n *\n * @example Implementing it as an attribute directive\n *\n * ```html\n *
Content
\n * ```\n *\n * @example Implementing it as an Angular host directive\n *\n * ```ts\n * @Component({\n * selector: 'custom-component',\n * template: 'custom-component.html',\n * hostDirectives: [\n * {\n * directive: DaffLoadableDirective,\n * inputs: ['loading'],\n * },\n * ],\n * })\n * export class CustomComponent { }\n * ```\n *\n * ```scss\n * :host {\n * .spinner {\n * opacity: 0;\n * }\n * .daff-loading {\n * .spinner {\n * opacity: 1;\n * }\n * }\n * }\n * ```\n *\n * The directive applies the `daff-loading` class to the component. The class should be\n * defined in your styles to display the loading state as desired.\n */\n@Directive({\n selector: '[daffLoadable]',\n host: {\n '[class.daff-loading]': 'loading',\n },\n})\nexport class DaffLoadableDirective {\n @Input() loading = false;\n}\n","import {\n DOCUMENT,\n Inject,\n Injectable,\n signal,\n} from '@angular/core';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class DaffRovingTabIndexService {\n private readonly _hierarchy: Array = [];\n private readonly _group = signal('');\n\n readonly group = this._group.asReadonly();\n\n constructor(\n @Inject(DOCUMENT) private document: Document,\n ) {}\n\n enter(group: string) {\n if (this._group() !== group) {\n this._hierarchy.push(group);\n this._group.set(group);\n const el = this.document.querySelector(`[data-rti=\"${group}\"]`);\n if (el) {\n (this.document.activeElement).blur();\n el.focus();\n }\n }\n }\n\n leave() {\n const prev = this._hierarchy.pop();\n if (prev) {\n const group = this._hierarchy[this._hierarchy.length - 1] || '';\n this._group.set(group);\n (this.document.activeElement).blur();\n const boundary = this.document.querySelector(`[data-rti-boundary=\"${prev}\"][data-rti=\"${group}\"]`);\n if (boundary) {\n boundary.focus();\n } else {\n console.warn(`The boundary for RTI group ${prev} does not have a reference to the parent group ${group}`);\n }\n }\n }\n\n next() {\n this._changeFocus();\n }\n\n previous() {\n this._changeFocus(true);\n }\n\n private _changeFocus(up = false) {\n if (this._group()) {\n const ary = Array.from(this.document.querySelectorAll(`[data-rti=\"${this._group()}\"]`));\n const index = ary.findIndex((el) => el === this.document.activeElement);\n (this.document.activeElement).blur();\n (up\n ? ary[index === 0 ? ary.length - 1 : index - 1]\n : ary[index === ary.length - 1 ? 0 : index + 1]).focus();\n }\n }\n\n onKeydown(evt: Event) {\n if ('key' in evt) {\n switch ((evt).key) {\n case 'ArrowUp':\n case 'ArrowDown':\n if (this._group()) {\n evt.preventDefault();\n const ary = Array.from(this.document.querySelectorAll(`[data-rti=\"${this._group()}\"]`));\n const index = ary.findIndex((el) => el === this.document.activeElement);\n (this.document.activeElement).blur();\n ((evt).key === 'ArrowUp'\n ? ary[index === 0 ? ary.length - 1 : index - 1]\n : ary[index === ary.length - 1 ? 0 : index + 1]).focus();\n }\n break;\n\n default:\n break;\n }\n }\n }\n}\n","import { CdkTrapFocus } from '@angular/cdk/a11y';\nimport {\n computed,\n Directive,\n effect,\n forwardRef,\n input,\n} from '@angular/core';\n\nimport { DaffRovingTabIndexService } from './roving-tab-index-group.service';\nimport { DaffRovingTabIndexDirective } from './roving-tab-index.directive';\n\n/**\n * Defines the boundary of an RTI group.\n */\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: '[rtiBoundary]',\n host: {\n '[attr.data-rti-boundary]': 'effectiveBoundary()',\n '(keydown.space)': 'enterGroup($event)',\n },\n hostDirectives: [\n CdkTrapFocus,\n forwardRef(() => DaffRovingTabIndexDirective),\n ],\n})\nexport class DaffRovingTabIndexBoundaryDirective {\n /**\n * Don't touch this directly. Use `_uniqueId`.\n */\n private static _uniqueIdCounter = 0;\n\n /**\n * Don't touch this directly. Use `_uniqueId`.\n */\n private _cachedUniqueId: string | undefined;\n private get _uniqueId(): string {\n if (!this._cachedUniqueId) {\n this._cachedUniqueId = `ε-rtiBoundary-${DaffRovingTabIndexBoundaryDirective._uniqueIdCounter++}`;\n }\n return this._cachedUniqueId;\n }\n\n /**\n * The name of the group for which that this element will act as boundary.\n * Optional, will be autogenerated to a unique name if omitted.\n */\n readonly rtiBoundary = input(null);\n /**\n * The name of the group defined by this boundary.\n */\n readonly effectiveBoundary = computed(() => this.rtiBoundary() || this._uniqueId);\n\n constructor(\n private groupService: DaffRovingTabIndexService,\n private focusTrap: CdkTrapFocus,\n ) {\n effect(() => {\n this.focusTrap.enabled = this.effectiveBoundary() === this.groupService.group();\n });\n }\n\n /**\n * @docs-private\n */\n enterGroup(evt: Event) {\n evt.preventDefault();\n evt.stopPropagation();\n this.groupService.enter(this.effectiveBoundary());\n }\n}\n","import {\n computed,\n Directive,\n input,\n Optional,\n SkipSelf,\n} from '@angular/core';\n\nimport { DaffRovingTabIndexBoundaryDirective } from './roving-tab-index-boundary.directive';\nimport { DaffRovingTabIndexService } from './roving-tab-index-group.service';\n\n/**\n * Declares that an element is an RTI target.\n * Automatically applied to `` and `