ng-primitives 0.96.0 → 0.98.0

package/a11y/index.d.ts

@@ -1,7 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { Signal, ElementRef } from '@angular/core';
 
-interface ActiveDescendantManagerOptions<T extends NgpActivatable> {
+interface ActiveDescendantManagerProps<T extends NgpActivatable> {
     /**
      * The disabled state of the active descendant group.
      * @default false
@@ -16,6 +16,10 @@ interface ActiveDescendantManagerOptions<T extends NgpActivatable> {
      * @default false
      */
     wrap?: Signal<boolean>;
+    /**
+     * A callback invoked when the active descendant changes.
+     */
+    onActiveDescendantChange?: (activeDescendant: T | undefined) => void;
 }
 interface NgpActivatable {
     /**
@@ -31,7 +35,7 @@ interface NgpActivatable {
      */
     elementRef: ElementRef<HTMLElement>;
 }
-declare function activeDescendantManager<T extends NgpActivatable>(options: ActiveDescendantManagerOptions<T>): {
+declare function activeDescendantManager<T extends NgpActivatable>({ items, disabled: _disabled, wrap, onActiveDescendantChange, }: ActiveDescendantManagerProps<T>): {
     activeDescendant: Signal<string | undefined>;
     activeItem: Signal<T | undefined>;
     activate: (item: T | undefined) => void;

package/avatar/index.d.ts

@@ -29,7 +29,7 @@ interface NgpAvatarFallbackProps {
     delay?: Signal<number>;
 }
 declare const NgpAvatarFallbackStateToken: _angular_core.InjectionToken<_angular_core.WritableSignal<{}>>;
-declare const ngpAvatarFallback: ({}: NgpAvatarFallbackProps) => {};
+declare const ngpAvatarFallback: ({ delay }: NgpAvatarFallbackProps) => {};
 declare const injectAvatarFallbackState: {
     (): Signal<{}>;
     (options: {

package/fesm2022/ng-primitives-a11y.mjs

@@ -1,11 +1,10 @@
 import * as i0 from '@angular/core';
-import { signal, computed, inject, ChangeDetectorRef, Directive } from '@angular/core';
+import { computed, signal, inject, ChangeDetectorRef, Directive } from '@angular/core';
 import { explicitEffect, injectElementRef } from 'ng-primitives/internal';
 import { createPrimitive, controlled, styleBinding } from 'ng-primitives/state';
 
-function activeDescendantManager(options) {
-    const sortedOptions = () => options
-        .items()
+function activeDescendantManager({ items, disabled: _disabled, wrap, onActiveDescendantChange, }) {
+    const sortedOptions = computed(() => items()
         .slice()
         .sort((a, b) => {
         const aElement = a.elementRef.nativeElement;
@@ -13,20 +12,20 @@ function activeDescendantManager(options) {
         return aElement.compareDocumentPosition(bElement) & Node.DOCUMENT_POSITION_FOLLOWING
             ? -1
             : 1;
-    });
+    }), ...(ngDevMode ? [{ debugName: "sortedOptions" }] : []));
     const activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
     const activeItem = computed(() => sortedOptions()?.[activeIndex()], ...(ngDevMode ? [{ debugName: "activeItem" }] : []));
-    const disabled = computed(() => options.disabled?.() || options.items().every(item => item.disabled?.()), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    const disabled = computed(() => _disabled?.() || items().every(item => item.disabled?.()), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     // any time the item list changes, check if the active index is still valid
     explicitEffect([sortedOptions], ([items]) => {
         if (activeIndex() >= items.length || activeIndex() < 0) {
-            activeIndex.set(items.findIndex(item => !item.disabled?.()));
+            activateByIndex(items.findIndex(item => !item.disabled?.()));
         }
         if (activeIndex() === -1 && items.length > 0) {
-            activeIndex.set(0);
+            activateByIndex(0);
         }
         if (disabled() || items.length === 0) {
-            activeIndex.set(-1);
+            activateByIndex(-1);
         }
     });
     const activeDescendant = computed(() => {
@@ -36,19 +35,23 @@ function activeDescendantManager(options) {
         }
         return item.id();
     }, ...(ngDevMode ? [{ debugName: "activeDescendant" }] : []));
+    function activateByIndex(index) {
+        activeIndex.set(index);
+        onActiveDescendantChange?.(activeItem());
+    }
     /**
      * Activate an item in the active descendant group.
      * @param item The item to activate.
      */
     const activate = (item) => {
         if (item === undefined) {
-            activeIndex.set(-1);
+            activateByIndex(-1);
             return;
         }
         if (disabled() || item.disabled?.()) {
             return;
         }
-        activeIndex.set(sortedOptions().indexOf(item));
+        activateByIndex(sortedOptions().indexOf(item));
     };
     /**
      * Activate the first enabled item in the active descendant group.
@@ -56,18 +59,16 @@ function activeDescendantManager(options) {
     const first = () => {
         const item = sortedOptions().findIndex(item => !item.disabled?.());
         if (item !== -1) {
-            activeIndex.set(item);
+            activateByIndex(item);
         }
     };
     /**
      * Activate the last enabled item in the active descendant group.
      */
     const last = () => {
-        const item = sortedOptions()
-            .reverse()
-            .findIndex(item => !item.disabled?.());
+        const item = [...sortedOptions()].reverse().findIndex(item => !item.disabled?.());
         if (item !== -1) {
-            activeIndex.set(sortedOptions().length - 1 - item);
+            activateByIndex(sortedOptions().length - 1 - item);
         }
     };
     const findNextIndex = (items, currentIndex, direction, wrap) => {
@@ -90,9 +91,9 @@ function activeDescendantManager(options) {
      */
     const next = () => {
         const items = sortedOptions();
-        const nextIndex = findNextIndex(items, activeIndex(), 1, options.wrap?.() ?? false);
+        const nextIndex = findNextIndex(items, activeIndex(), 1, wrap?.() ?? false);
         if (nextIndex !== undefined) {
-            activeIndex.set(nextIndex);
+            activateByIndex(nextIndex);
         }
     };
     /**
@@ -100,16 +101,16 @@ function activeDescendantManager(options) {
      */
     const previous = () => {
         const items = sortedOptions();
-        const prevIndex = findNextIndex(items, activeIndex(), -1, options.wrap?.() ?? false);
+        const prevIndex = findNextIndex(items, activeIndex(), -1, wrap?.() ?? false);
         if (prevIndex !== undefined) {
-            activeIndex.set(prevIndex);
+            activateByIndex(prevIndex);
         }
     };
     /**
      * Reset the active descendant group, clearing the active index.
      */
     const reset = () => {
-        activeIndex.set(-1);
+        activateByIndex(-1);
     };
     return {
         activeDescendant,

package/fesm2022/ng-primitives-a11y.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-primitives-a11y.mjs","sources":["../../../../packages/ng-primitives/a11y/src/active-descendant/active-descendant.ts","../../../../packages/ng-primitives/a11y/src/visually-hidden/visually-hidden-state.ts","../../../../packages/ng-primitives/a11y/src/visually-hidden/visually-hidden.ts","../../../../packages/ng-primitives/a11y/src/ng-primitives-a11y.ts"],"sourcesContent":["import { computed, ElementRef, Signal, signal } from '@angular/core';\nimport { explicitEffect } from 'ng-primitives/internal';\n\ninterface ActiveDescendantManagerOptions<T extends NgpActivatable> {\n  /**\n   * The disabled state of the active descendant group.\n   * @default false\n   */\n  disabled?: Signal<boolean>;\n  /**\n   * The items in the active descendant group.\n   */\n  items: Signal<T[]>;\n  /**\n   * Whether active descendant should wrap around.\n   * @default false\n   */\n  wrap?: Signal<boolean>;\n}\n\nexport interface NgpActivatable {\n  /**\n   * The id of the item.\n   */\n  id: Signal<string>;\n  /**\n   * Whether the item is disabled.\n   */\n  disabled?: Signal<boolean>;\n  /**\n   * The element that represents the item.\n   */\n  elementRef: ElementRef<HTMLElement>;\n}\n\nexport function activeDescendantManager<T extends NgpActivatable>(\n  options: ActiveDescendantManagerOptions<T>,\n) {\n  const sortedOptions = () =>\n    options\n      .items()\n      .slice()\n      .sort((a, b) => {\n        const aElement = a.elementRef.nativeElement;\n        const bElement = b.elementRef.nativeElement;\n        return aElement.compareDocumentPosition(bElement) & Node.DOCUMENT_POSITION_FOLLOWING\n          ? -1\n          : 1;\n      });\n\n  const activeIndex = signal<number>(0);\n  const activeItem = computed<T | undefined>(() => sortedOptions()?.[activeIndex()]);\n  const disabled = computed(\n    () => options.disabled?.() || options.items().every(item => item.disabled?.()),\n  );\n\n  // any time the item list changes, check if the active index is still valid\n  explicitEffect([sortedOptions], ([items]) => {\n    if (activeIndex() >= items.length || activeIndex() < 0) {\n      activeIndex.set(items.findIndex(item => !item.disabled?.()));\n    }\n    if (activeIndex() === -1 && items.length > 0) {\n      activeIndex.set(0);\n    }\n    if (disabled() || items.length === 0) {\n      activeIndex.set(-1);\n    }\n  });\n\n  const activeDescendant = computed(() => {\n    const item = activeItem();\n\n    if (disabled() || !item) {\n      return undefined;\n    }\n\n    return item.id();\n  });\n\n  /**\n   * Activate an item in the active descendant group.\n   * @param item The item to activate.\n   */\n  const activate = (item: T | undefined) => {\n    if (item === undefined) {\n      activeIndex.set(-1);\n      return;\n    }\n\n    if (disabled() || item.disabled?.()) {\n      return;\n    }\n\n    activeIndex.set(sortedOptions().indexOf(item));\n  };\n\n  /**\n   * Activate the first enabled item in the active descendant group.\n   */\n  const first = () => {\n    const item = sortedOptions().findIndex(item => !item.disabled?.());\n\n    if (item !== -1) {\n      activeIndex.set(item);\n    }\n  };\n\n  /**\n   * Activate the last enabled item in the active descendant group.\n   */\n  const last = () => {\n    const item = sortedOptions()\n      .reverse()\n      .findIndex(item => !item.disabled?.());\n\n    if (item !== -1) {\n      activeIndex.set(sortedOptions().length - 1 - item);\n    }\n  };\n\n  const findNextIndex = (\n    items: NgpActivatable[],\n    currentIndex: number,\n    direction: 1 | -1,\n    wrap: boolean,\n  ): number | undefined => {\n    let index = (currentIndex + direction + items.length) % items.length;\n\n    while (index !== currentIndex) {\n      const item = items[index];\n      if (item && !item.disabled?.()) {\n        return index;\n      }\n      index = (index + direction + items.length) % items.length;\n\n      if (\n        !wrap &&\n        ((direction === 1 && index === 0) || (direction === -1 && index === items.length - 1))\n      ) {\n        break;\n      }\n    }\n\n    return undefined;\n  };\n\n  /**\n   * Activate the next enabled item in the active descendant group.\n   */\n  const next = () => {\n    const items = sortedOptions();\n    const nextIndex = findNextIndex(items, activeIndex(), 1, options.wrap?.() ?? false);\n\n    if (nextIndex !== undefined) {\n      activeIndex.set(nextIndex);\n    }\n  };\n\n  /**\n   * Activate the previous enabled item in the active descendant group.\n   */\n  const previous = () => {\n    const items = sortedOptions();\n    const prevIndex = findNextIndex(items, activeIndex(), -1, options.wrap?.() ?? false);\n\n    if (prevIndex !== undefined) {\n      activeIndex.set(prevIndex);\n    }\n  };\n\n  /**\n   * Reset the active descendant group, clearing the active index.\n   */\n  const reset = () => {\n    activeIndex.set(-1);\n  };\n\n  return {\n    activeDescendant,\n    activeItem,\n    activate,\n    first,\n    last,\n    next,\n    previous,\n    reset,\n  };\n}\n","import { ChangeDetectorRef, inject, Signal, signal } from '@angular/core';\nimport { injectElementRef } from 'ng-primitives/internal';\nimport { controlled, createPrimitive, styleBinding } from 'ng-primitives/state';\n\n/**\n * The state interface for the VisuallyHidden pattern.\n */\nexport interface NgpVisuallyHiddenState {\n  /**\n   * Whether the element is hidden.\n   */\n  readonly hidden: Signal<boolean>;\n\n  /**\n   * Set the element visibility.\n   * @param visible\n   */\n  setVisibility(visible: boolean): void;\n}\n\n/**\n * The props interface for the VisuallyHidden pattern.\n */\nexport interface NgpVisuallyHiddenProps {\n  /**\n   * Whether the element is hidden. Default is true.\n   */\n  readonly hidden?: Signal<boolean>;\n}\n\nexport const [\n  NgpVisuallyHiddenStateToken,\n  ngpVisuallyHidden,\n  injectVisuallyHiddenState,\n  provideVisuallyHiddenState,\n] = createPrimitive(\n  'NgpVisuallyHidden',\n  ({ hidden: _hidden = signal(true) }: NgpVisuallyHiddenProps): NgpVisuallyHiddenState => {\n    const element = injectElementRef();\n    const hidden = controlled(_hidden);\n    const changeDetector = inject(ChangeDetectorRef);\n\n    // Apply styles to visually hide the element\n    styleBinding(element, 'position', () => (hidden() ? 'absolute' : null));\n    styleBinding(element, 'width', () => (hidden() ? '1px' : null));\n    styleBinding(element, 'height', () => (hidden() ? '1px' : null));\n    styleBinding(element, 'margin', () => (hidden() ? '-1px' : null));\n    styleBinding(element, 'padding', () => (hidden() ? '0' : null));\n    styleBinding(element, 'overflow', () => (hidden() ? 'hidden' : null));\n    styleBinding(element, 'clip', () => (hidden() ? 'rect(0, 0, 0, 0)' : null));\n    styleBinding(element, 'white-space', () => (hidden() ? 'nowrap' : null));\n    styleBinding(element, 'border', () => (hidden() ? '0' : null));\n    styleBinding(element, 'word-wrap', () => (hidden() ? 'normal' : null));\n    styleBinding(element, 'outline', () => (hidden() ? '0' : null));\n    styleBinding(element, '-webkit-appearance', () => (hidden() ? 'none' : null));\n    styleBinding(element, '-moz-appearance', () => (hidden() ? 'none' : null));\n    styleBinding(element, 'inset-inline-start', () => (hidden() ? '0' : null));\n\n    function setVisibility(visible: boolean): void {\n      hidden.set(!visible);\n      // If a change-detection cycle might be running, schedule detection asynchronously and exit\n      // to avoid re-entrancy. Otherwise fall through to call detectChanges synchronously.\n      Promise.resolve().then(() => changeDetector.detectChanges());\n    }\n\n    return {\n      hidden: hidden.asReadonly(),\n      setVisibility,\n    };\n  },\n);\n","import { Directive } from '@angular/core';\nimport { ngpVisuallyHidden, provideVisuallyHiddenState } from './visually-hidden-state';\n\n/**\n * Hide an element visually while keeping it present in the DOM.\n */\n@Directive({\n  selector: '[ngpVisuallyHidden]',\n  exportAs: 'ngpVisuallyHidden',\n  providers: [provideVisuallyHiddenState()],\n})\nexport class NgpVisuallyHidden {\n  protected readonly state = ngpVisuallyHidden({});\n\n  /**\n   * Set the element visibility.\n   * @param visible\n   */\n  setVisibility(visible: boolean): void {\n    this.state.setVisibility(visible);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAmCM,SAAU,uBAAuB,CACrC,OAA0C,EAAA;AAE1C,IAAA,MAAM,aAAa,GAAG,MACpB;AACG,SAAA,KAAK;AACL,SAAA,KAAK;AACL,SAAA,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI;AACb,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,UAAU,CAAC,aAAa;AAC3C,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,UAAU,CAAC,aAAa;QAC3C,OAAO,QAAQ,CAAC,uBAAuB,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;cACrD,CAAC;cACD,CAAC;AACP,IAAA,CAAC,CAAC;AAEN,IAAA,MAAM,WAAW,GAAG,MAAM,CAAS,CAAC,uDAAC;AACrC,IAAA,MAAM,UAAU,GAAG,QAAQ,CAAgB,MAAM,aAAa,EAAE,GAAG,WAAW,EAAE,CAAC,sDAAC;AAClF,IAAA,MAAM,QAAQ,GAAG,QAAQ,CACvB,MAAM,OAAO,CAAC,QAAQ,IAAI,IAAI,OAAO,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,oDAC/E;;IAGD,cAAc,CAAC,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,KAAI;AAC1C,QAAA,IAAI,WAAW,EAAE,IAAI,KAAK,CAAC,MAAM,IAAI,WAAW,EAAE,GAAG,CAAC,EAAE;AACtD,YAAA,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC;QAC9D;AACA,QAAA,IAAI,WAAW,EAAE,KAAK,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;AAC5C,YAAA,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC;QACpB;QACA,IAAI,QAAQ,EAAE,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;AACpC,YAAA,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QACrB;AACF,IAAA,CAAC,CAAC;AAEF,IAAA,MAAM,gBAAgB,GAAG,QAAQ,CAAC,MAAK;AACrC,QAAA,MAAM,IAAI,GAAG,UAAU,EAAE;AAEzB,QAAA,IAAI,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE;AACvB,YAAA,OAAO,SAAS;QAClB;AAEA,QAAA,OAAO,IAAI,CAAC,EAAE,EAAE;AAClB,IAAA,CAAC,4DAAC;AAEF;;;AAGG;AACH,IAAA,MAAM,QAAQ,GAAG,CAAC,IAAmB,KAAI;AACvC,QAAA,IAAI,IAAI,KAAK,SAAS,EAAE;AACtB,YAAA,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YACnB;QACF;QAEA,IAAI,QAAQ,EAAE,IAAI,IAAI,CAAC,QAAQ,IAAI,EAAE;YACnC;QACF;QAEA,WAAW,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;AAChD,IAAA,CAAC;AAED;;AAEG;IACH,MAAM,KAAK,GAAG,MAAK;AACjB,QAAA,MAAM,IAAI,GAAG,aAAa,EAAE,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC;AAElE,QAAA,IAAI,IAAI,KAAK,CAAC,CAAC,EAAE;AACf,YAAA,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC;QACvB;AACF,IAAA,CAAC;AAED;;AAEG;IACH,MAAM,IAAI,GAAG,MAAK;QAChB,MAAM,IAAI,GAAG,aAAa;AACvB,aAAA,OAAO;AACP,aAAA,SAAS,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC;AAExC,QAAA,IAAI,IAAI,KAAK,CAAC,CAAC,EAAE;AACf,YAAA,WAAW,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC;QACpD;AACF,IAAA,CAAC;IAED,MAAM,aAAa,GAAG,CACpB,KAAuB,EACvB,YAAoB,EACpB,SAAiB,EACjB,IAAa,KACS;AACtB,QAAA,IAAI,KAAK,GAAG,CAAC,YAAY,GAAG,SAAS,GAAG,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM;AAEpE,QAAA,OAAO,KAAK,KAAK,YAAY,EAAE;AAC7B,YAAA,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC;YACzB,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE;AAC9B,gBAAA,OAAO,KAAK;YACd;AACA,YAAA,KAAK,GAAG,CAAC,KAAK,GAAG,SAAS,GAAG,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM;AAEzD,YAAA,IACE,CAAC,IAAI;iBACJ,CAAC,SAAS,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,MAAM,SAAS,KAAK,CAAC,CAAC,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,EACtF;gBACA;YACF;QACF;AAEA,QAAA,OAAO,SAAS;AAClB,IAAA,CAAC;AAED;;AAEG;IACH,MAAM,IAAI,GAAG,MAAK;AAChB,QAAA,MAAM,KAAK,GAAG,aAAa,EAAE;AAC7B,QAAA,MAAM,SAAS,GAAG,aAAa,CAAC,KAAK,EAAE,WAAW,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,IAAI,IAAI,KAAK,CAAC;AAEnF,QAAA,IAAI,SAAS,KAAK,SAAS,EAAE;AAC3B,YAAA,WAAW,CAAC,GAAG,CAAC,SAAS,CAAC;QAC5B;AACF,IAAA,CAAC;AAED;;AAEG;IACH,MAAM,QAAQ,GAAG,MAAK;AACpB,QAAA,MAAM,KAAK,GAAG,aAAa,EAAE;QAC7B,MAAM,SAAS,GAAG,aAAa,CAAC,KAAK,EAAE,WAAW,EAAE,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,IAAI,IAAI,IAAI,KAAK,CAAC;AAEpF,QAAA,IAAI,SAAS,KAAK,SAAS,EAAE;AAC3B,YAAA,WAAW,CAAC,GAAG,CAAC,SAAS,CAAC;QAC5B;AACF,IAAA,CAAC;AAED;;AAEG;IACH,MAAM,KAAK,GAAG,MAAK;AACjB,QAAA,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AACrB,IAAA,CAAC;IAED,OAAO;QACL,gBAAgB;QAChB,UAAU;QACV,QAAQ;QACR,KAAK;QACL,IAAI;QACJ,IAAI;QACJ,QAAQ;QACR,KAAK;KACN;AACH;;AC7JO,MAAM,CACX,2BAA2B,EAC3B,iBAAiB,EACjB,yBAAyB,EACzB,0BAA0B,EAC3B,GAAG,eAAe,CACjB,mBAAmB,EACnB,CAAC,EAAE,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,EAA0B,KAA4B;AACrF,IAAA,MAAM,OAAO,GAAG,gBAAgB,EAAE;AAClC,IAAA,MAAM,MAAM,GAAG,UAAU,CAAC,OAAO,CAAC;AAClC,IAAA,MAAM,cAAc,GAAG,MAAM,CAAC,iBAAiB,CAAC;;IAGhD,YAAY,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,MAAM,EAAE,GAAG,UAAU,GAAG,IAAI,CAAC,CAAC;IACvE,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,MAAM,EAAE,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC;IAC/D,YAAY,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,MAAM,EAAE,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC;IAChE,YAAY,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,MAAM,EAAE,GAAG,MAAM,GAAG,IAAI,CAAC,CAAC;IACjE,YAAY,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,MAAM,EAAE,GAAG,GAAG,GAAG,IAAI,CAAC,CAAC;IAC/D,YAAY,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,MAAM,EAAE,GAAG,QAAQ,GAAG,IAAI,CAAC,CAAC;IACrE,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,MAAM,EAAE,GAAG,kBAAkB,GAAG,IAAI,CAAC,CAAC;IAC3E,YAAY,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,MAAM,EAAE,GAAG,QAAQ,GAAG,IAAI,CAAC,CAAC;IACxE,YAAY,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,MAAM,EAAE,GAAG,GAAG,GAAG,IAAI,CAAC,CAAC;IAC9D,YAAY,CAAC,OAAO,EAAE,WAAW,EAAE,OAAO,MAAM,EAAE,GAAG,QAAQ,GAAG,IAAI,CAAC,CAAC;IACtE,YAAY,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,MAAM,EAAE,GAAG,GAAG,GAAG,IAAI,CAAC,CAAC;IAC/D,YAAY,CAAC,OAAO,EAAE,oBAAoB,EAAE,OAAO,MAAM,EAAE,GAAG,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7E,YAAY,CAAC,OAAO,EAAE,iBAAiB,EAAE,OAAO,MAAM,EAAE,GAAG,MAAM,GAAG,IAAI,CAAC,CAAC;IAC1E,YAAY,CAAC,OAAO,EAAE,oBAAoB,EAAE,OAAO,MAAM,EAAE,GAAG,GAAG,GAAG,IAAI,CAAC,CAAC;IAE1E,SAAS,aAAa,CAAC,OAAgB,EAAA;AACrC,QAAA,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC;;;AAGpB,QAAA,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,MAAM,cAAc,CAAC,aAAa,EAAE,CAAC;IAC9D;IAEA,OAAO;AACL,QAAA,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE;QAC3B,aAAa;KACd;AACH,CAAC;;AClEH;;AAEG;MAMU,iBAAiB,CAAA;AAL9B,IAAA,WAAA,GAAA;AAMqB,QAAA,IAAA,CAAA,KAAK,GAAG,iBAAiB,CAAC,EAAE,CAAC;AASjD,IAAA;AAPC;;;AAGG;AACH,IAAA,aAAa,CAAC,OAAgB,EAAA;AAC5B,QAAA,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC;IACnC;8GATW,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,SAAA,EAFjB,CAAC,0BAA0B,EAAE,CAAC,EAAA,QAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAE9B,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAL7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,qBAAqB;AAC/B,oBAAA,QAAQ,EAAE,mBAAmB;AAC7B,oBAAA,SAAS,EAAE,CAAC,0BAA0B,EAAE,CAAC;AAC1C,iBAAA;;;ACVD;;AAEG;;;;"}
+{"version":3,"file":"ng-primitives-a11y.mjs","sources":["../../../../packages/ng-primitives/a11y/src/active-descendant/active-descendant.ts","../../../../packages/ng-primitives/a11y/src/visually-hidden/visually-hidden-state.ts","../../../../packages/ng-primitives/a11y/src/visually-hidden/visually-hidden.ts","../../../../packages/ng-primitives/a11y/src/ng-primitives-a11y.ts"],"sourcesContent":["import { computed, ElementRef, Signal, signal } from '@angular/core';\nimport { explicitEffect } from 'ng-primitives/internal';\n\ninterface ActiveDescendantManagerProps<T extends NgpActivatable> {\n  /**\n   * The disabled state of the active descendant group.\n   * @default false\n   */\n  disabled?: Signal<boolean>;\n  /**\n   * The items in the active descendant group.\n   */\n  items: Signal<T[]>;\n  /**\n   * Whether active descendant should wrap around.\n   * @default false\n   */\n  wrap?: Signal<boolean>;\n  /**\n   * A callback invoked when the active descendant changes.\n   */\n  onActiveDescendantChange?: (activeDescendant: T | undefined) => void;\n}\n\nexport interface NgpActivatable {\n  /**\n   * The id of the item.\n   */\n  id: Signal<string>;\n  /**\n   * Whether the item is disabled.\n   */\n  disabled?: Signal<boolean>;\n  /**\n   * The element that represents the item.\n   */\n  elementRef: ElementRef<HTMLElement>;\n}\n\nexport function activeDescendantManager<T extends NgpActivatable>({\n  items,\n  disabled: _disabled,\n  wrap,\n  onActiveDescendantChange,\n}: ActiveDescendantManagerProps<T>) {\n  const sortedOptions = computed(() =>\n    items()\n      .slice()\n      .sort((a, b) => {\n        const aElement = a.elementRef.nativeElement;\n        const bElement = b.elementRef.nativeElement;\n        return aElement.compareDocumentPosition(bElement) & Node.DOCUMENT_POSITION_FOLLOWING\n          ? -1\n          : 1;\n      }),\n  );\n\n  const activeIndex = signal<number>(0);\n  const activeItem = computed<T | undefined>(() => sortedOptions()?.[activeIndex()]);\n  const disabled = computed(() => _disabled?.() || items().every(item => item.disabled?.()));\n\n  // any time the item list changes, check if the active index is still valid\n  explicitEffect([sortedOptions], ([items]) => {\n    if (activeIndex() >= items.length || activeIndex() < 0) {\n      activateByIndex(items.findIndex(item => !item.disabled?.()));\n    }\n    if (activeIndex() === -1 && items.length > 0) {\n      activateByIndex(0);\n    }\n    if (disabled() || items.length === 0) {\n      activateByIndex(-1);\n    }\n  });\n\n  const activeDescendant = computed(() => {\n    const item = activeItem();\n\n    if (disabled() || !item) {\n      return undefined;\n    }\n\n    return item.id();\n  });\n\n  function activateByIndex(index: number) {\n    activeIndex.set(index);\n    onActiveDescendantChange?.(activeItem());\n  }\n\n  /**\n   * Activate an item in the active descendant group.\n   * @param item The item to activate.\n   */\n  const activate = (item: T | undefined) => {\n    if (item === undefined) {\n      activateByIndex(-1);\n      return;\n    }\n\n    if (disabled() || item.disabled?.()) {\n      return;\n    }\n\n    activateByIndex(sortedOptions().indexOf(item));\n  };\n\n  /**\n   * Activate the first enabled item in the active descendant group.\n   */\n  const first = () => {\n    const item = sortedOptions().findIndex(item => !item.disabled?.());\n\n    if (item !== -1) {\n      activateByIndex(item);\n    }\n  };\n\n  /**\n   * Activate the last enabled item in the active descendant group.\n   */\n  const last = () => {\n    const item = [...sortedOptions()].reverse().findIndex(item => !item.disabled?.());\n\n    if (item !== -1) {\n      activateByIndex(sortedOptions().length - 1 - item);\n    }\n  };\n\n  const findNextIndex = (\n    items: NgpActivatable[],\n    currentIndex: number,\n    direction: 1 | -1,\n    wrap: boolean,\n  ): number | undefined => {\n    let index = (currentIndex + direction + items.length) % items.length;\n\n    while (index !== currentIndex) {\n      const item = items[index];\n      if (item && !item.disabled?.()) {\n        return index;\n      }\n      index = (index + direction + items.length) % items.length;\n\n      if (\n        !wrap &&\n        ((direction === 1 && index === 0) || (direction === -1 && index === items.length - 1))\n      ) {\n        break;\n      }\n    }\n\n    return undefined;\n  };\n\n  /**\n   * Activate the next enabled item in the active descendant group.\n   */\n  const next = () => {\n    const items = sortedOptions();\n    const nextIndex = findNextIndex(items, activeIndex(), 1, wrap?.() ?? false);\n\n    if (nextIndex !== undefined) {\n      activateByIndex(nextIndex);\n    }\n  };\n\n  /**\n   * Activate the previous enabled item in the active descendant group.\n   */\n  const previous = () => {\n    const items = sortedOptions();\n    const prevIndex = findNextIndex(items, activeIndex(), -1, wrap?.() ?? false);\n\n    if (prevIndex !== undefined) {\n      activateByIndex(prevIndex);\n    }\n  };\n\n  /**\n   * Reset the active descendant group, clearing the active index.\n   */\n  const reset = () => {\n    activateByIndex(-1);\n  };\n\n  return {\n    activeDescendant,\n    activeItem,\n    activate,\n    first,\n    last,\n    next,\n    previous,\n    reset,\n  };\n}\n","import { ChangeDetectorRef, inject, Signal, signal } from '@angular/core';\nimport { injectElementRef } from 'ng-primitives/internal';\nimport { controlled, createPrimitive, styleBinding } from 'ng-primitives/state';\n\n/**\n * The state interface for the VisuallyHidden pattern.\n */\nexport interface NgpVisuallyHiddenState {\n  /**\n   * Whether the element is hidden.\n   */\n  readonly hidden: Signal<boolean>;\n\n  /**\n   * Set the element visibility.\n   * @param visible\n   */\n  setVisibility(visible: boolean): void;\n}\n\n/**\n * The props interface for the VisuallyHidden pattern.\n */\nexport interface NgpVisuallyHiddenProps {\n  /**\n   * Whether the element is hidden. Default is true.\n   */\n  readonly hidden?: Signal<boolean>;\n}\n\nexport const [\n  NgpVisuallyHiddenStateToken,\n  ngpVisuallyHidden,\n  injectVisuallyHiddenState,\n  provideVisuallyHiddenState,\n] = createPrimitive(\n  'NgpVisuallyHidden',\n  ({ hidden: _hidden = signal(true) }: NgpVisuallyHiddenProps): NgpVisuallyHiddenState => {\n    const element = injectElementRef();\n    const hidden = controlled(_hidden);\n    const changeDetector = inject(ChangeDetectorRef);\n\n    // Apply styles to visually hide the element\n    styleBinding(element, 'position', () => (hidden() ? 'absolute' : null));\n    styleBinding(element, 'width', () => (hidden() ? '1px' : null));\n    styleBinding(element, 'height', () => (hidden() ? '1px' : null));\n    styleBinding(element, 'margin', () => (hidden() ? '-1px' : null));\n    styleBinding(element, 'padding', () => (hidden() ? '0' : null));\n    styleBinding(element, 'overflow', () => (hidden() ? 'hidden' : null));\n    styleBinding(element, 'clip', () => (hidden() ? 'rect(0, 0, 0, 0)' : null));\n    styleBinding(element, 'white-space', () => (hidden() ? 'nowrap' : null));\n    styleBinding(element, 'border', () => (hidden() ? '0' : null));\n    styleBinding(element, 'word-wrap', () => (hidden() ? 'normal' : null));\n    styleBinding(element, 'outline', () => (hidden() ? '0' : null));\n    styleBinding(element, '-webkit-appearance', () => (hidden() ? 'none' : null));\n    styleBinding(element, '-moz-appearance', () => (hidden() ? 'none' : null));\n    styleBinding(element, 'inset-inline-start', () => (hidden() ? '0' : null));\n\n    function setVisibility(visible: boolean): void {\n      hidden.set(!visible);\n      // If a change-detection cycle might be running, schedule detection asynchronously and exit\n      // to avoid re-entrancy. Otherwise fall through to call detectChanges synchronously.\n      Promise.resolve().then(() => changeDetector.detectChanges());\n    }\n\n    return {\n      hidden: hidden.asReadonly(),\n      setVisibility,\n    };\n  },\n);\n","import { Directive } from '@angular/core';\nimport { ngpVisuallyHidden, provideVisuallyHiddenState } from './visually-hidden-state';\n\n/**\n * Hide an element visually while keeping it present in the DOM.\n */\n@Directive({\n  selector: '[ngpVisuallyHidden]',\n  exportAs: 'ngpVisuallyHidden',\n  providers: [provideVisuallyHiddenState()],\n})\nexport class NgpVisuallyHidden {\n  protected readonly state = ngpVisuallyHidden({});\n\n  /**\n   * Set the element visibility.\n   * @param visible\n   */\n  setVisibility(visible: boolean): void {\n    this.state.setVisibility(visible);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ng-primitives-avatar.mjs

@@ -51,13 +51,13 @@ var NgpAvatarStatus;
     NgpAvatarStatus["Error"] = "error";
 })(NgpAvatarStatus || (NgpAvatarStatus = {}));
 
-const [NgpAvatarFallbackStateToken, ngpAvatarFallback, injectAvatarFallbackState, provideAvatarFallbackState,] = createPrimitive('NgpAvatarFallback', ({}) => {
+const [NgpAvatarFallbackStateToken, ngpAvatarFallback, injectAvatarFallbackState, provideAvatarFallbackState,] = createPrimitive('NgpAvatarFallback', ({ delay = signal(0) }) => {
     const avatar = injectAvatarState();
     const element = injectElementRef();
     const disposables = injectDisposables();
     const delayElapsed = signal(false, ...(ngDevMode ? [{ debugName: "delayElapsed" }] : []));
     const visible = computed(() => delayElapsed() && avatar().status() !== NgpAvatarStatus.Loaded, ...(ngDevMode ? [{ debugName: "visible" }] : []));
-    disposables.setTimeout(() => delayElapsed.set(true), 0);
+    disposables.setTimeout(() => delayElapsed.set(true), delay());
     styleBinding(element, 'display', () => (visible() ? null : 'none'));
     return {};
 });

package/fesm2022/ng-primitives-avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-primitives-avatar.mjs","sources":["../../../../packages/ng-primitives/avatar/src/config/avatar-config.ts","../../../../packages/ng-primitives/avatar/src/avatar/avatar-state.ts","../../../../packages/ng-primitives/avatar/src/avatar-fallback/avatar-fallback-state.ts","../../../../packages/ng-primitives/avatar/src/avatar-fallback/avatar-fallback.ts","../../../../packages/ng-primitives/avatar/src/avatar-image/avatar-image-state.ts","../../../../packages/ng-primitives/avatar/src/avatar-image/avatar-image.ts","../../../../packages/ng-primitives/avatar/src/avatar/avatar.ts","../../../../packages/ng-primitives/avatar/src/ng-primitives-avatar.ts"],"sourcesContent":["import { InjectionToken, Provider, inject } from '@angular/core';\n\nexport interface NgpAvatarConfig {\n  /**\n   * Define a delay before the fallback is shown. This is useful to only show the fallback for those with slower connections.\n   * @default 0\n   */\n  delay: number;\n}\n\nexport const defaultAvatarConfig: NgpAvatarConfig = {\n  delay: 0,\n};\n\nexport const NgpAvatarConfigToken = new InjectionToken<NgpAvatarConfig>('NgpAvatarConfigToken');\n\n/**\n * Provide the avatar config\n * @param config The avatar config\n * @returns The provider\n */\nexport function provideAvatarConfig(config: Partial<NgpAvatarConfig>): Provider[] {\n  return [\n    {\n      provide: NgpAvatarConfigToken,\n      useValue: { ...defaultAvatarConfig, ...config },\n    },\n  ];\n}\n\n/**\n * Inject the avatar config\n * @returns The global avatar config\n */\nexport function injectAvatarConfig(): NgpAvatarConfig {\n  return inject(NgpAvatarConfigToken, { optional: true }) ?? defaultAvatarConfig;\n}\n","import { signal, Signal } from '@angular/core';\nimport { injectElementRef } from 'ng-primitives/internal';\nimport { createPrimitive, dataBinding } from 'ng-primitives/state';\n\nexport interface NgpAvatarState {\n  /**\n   * The avatar status.\n   */\n  status: Signal<NgpAvatarStatus>;\n\n  /**\n   * Set the avatar status.\n   */\n  setStatus(status: NgpAvatarStatus): void;\n}\n\nexport interface NgpAvatarProps {}\n\nexport const [NgpAvatarStateToken, ngpAvatar, injectAvatarState, provideAvatarState] =\n  createPrimitive('NgpAvatar', ({}: NgpAvatarProps) => {\n    const element = injectElementRef();\n    const status = signal(NgpAvatarStatus.Idle);\n\n    // Host bindings\n    dataBinding(element, 'data-status', status);\n\n    function setStatus(newStatus: NgpAvatarStatus): void {\n      status.set(newStatus);\n    }\n\n    return {\n      status,\n      setStatus,\n    };\n  });\n\nexport enum NgpAvatarStatus {\n  Idle = 'idle',\n  Loading = 'loading',\n  Loaded = 'loaded',\n  Error = 'error',\n}\n","import { computed, signal, Signal } from '@angular/core';\nimport { injectElementRef } from 'ng-primitives/internal';\nimport { createPrimitive, styleBinding } from 'ng-primitives/state';\nimport { injectDisposables } from 'ng-primitives/utils';\nimport { injectAvatarState, NgpAvatarStatus } from '../avatar/avatar-state';\n\nexport interface NgpAvatarFallbackState {}\n\nexport interface NgpAvatarFallbackProps {\n  /**\n   * The delay before showing the fallback.\n   */\n  delay?: Signal<number>;\n}\n\nexport const [\n  NgpAvatarFallbackStateToken,\n  ngpAvatarFallback,\n  injectAvatarFallbackState,\n  provideAvatarFallbackState,\n] = createPrimitive('NgpAvatarFallback', ({}: NgpAvatarFallbackProps) => {\n  const avatar = injectAvatarState();\n  const element = injectElementRef();\n  const disposables = injectDisposables();\n\n  const delayElapsed = signal(false);\n  const visible = computed(() => delayElapsed() && avatar().status() !== NgpAvatarStatus.Loaded);\n\n  disposables.setTimeout(() => delayElapsed.set(true), 0);\n\n  styleBinding(element, 'display', () => (visible() ? null : 'none'));\n\n  return {};\n});\n","import { NumberInput } from '@angular/cdk/coercion';\nimport { Directive, input, numberAttribute } from '@angular/core';\nimport { injectAvatarConfig } from '../config/avatar-config';\nimport { ngpAvatarFallback } from './avatar-fallback-state';\n\n/**\n * Apply the `ngpAvatarFallback` directive to an element that represents the user in the absence of an image. This is typically the user's initials.\n */\n@Directive({\n  selector: '[ngpAvatarFallback]',\n  exportAs: 'ngpAvatarFallback',\n})\nexport class NgpAvatarFallback {\n  /**\n   * Access the global configuration.\n   */\n  private readonly config = injectAvatarConfig();\n\n  /**\n   * Define a delay before the fallback is shown. This is useful to only show the fallback for those with slower connections.\n   * @default 0\n   */\n  readonly delay = input<number, NumberInput>(this.config.delay, {\n    alias: 'ngpAvatarFallbackDelay',\n    transform: numberAttribute,\n  });\n\n  constructor() {\n    ngpAvatarFallback({ delay: this.delay });\n  }\n}\n","import { ngpVisuallyHidden } from 'ng-primitives/a11y';\nimport { injectElementRef } from 'ng-primitives/internal';\nimport { createPrimitive, listener } from 'ng-primitives/state';\nimport { injectAvatarState, NgpAvatarStatus } from '../avatar/avatar-state';\n\nexport interface NgpAvatarImageState {}\n\nexport interface NgpAvatarImageProps {}\n\nexport const [\n  NgpAvatarImageStateToken,\n  ngpAvatarImage,\n  injectAvatarImageState,\n  provideAvatarImageState,\n] = createPrimitive('NgpAvatarImage', ({}: NgpAvatarImageProps) => {\n  const avatar = injectAvatarState();\n  const element = injectElementRef<HTMLImageElement>();\n  const visuallyHidden = ngpVisuallyHidden({});\n\n  // initially mark the avatar as loading\n  setStatus(NgpAvatarStatus.Loading);\n\n  // if there is no src, we can report this as an error\n  if (!element.nativeElement.src) {\n    setStatus(NgpAvatarStatus.Error);\n  }\n\n  // if the image has already loaded, we can report this to the avatar\n  if (element.nativeElement.complete) {\n    setStatus(NgpAvatarStatus.Loaded);\n  }\n\n  // host listeners\n  listener(element, 'load', () => setStatus(NgpAvatarStatus.Loaded));\n  listener(element, 'error', () => setStatus(NgpAvatarStatus.Error));\n\n  function setStatus(state: NgpAvatarStatus) {\n    avatar().setStatus(state);\n    visuallyHidden.setVisibility(state === NgpAvatarStatus.Loaded);\n  }\n\n  return {};\n});\n","import { Directive } from '@angular/core';\nimport { ngpAvatarImage } from './avatar-image-state';\n\n/**\n * Apply the `ngpAvatarImage` directive to an element that represents the avatar image. This would typically be an `img` element or a `div` with a background image.\n */\n@Directive({\n  selector: 'img[ngpAvatarImage]',\n  exportAs: 'ngpAvatarImage',\n})\nexport class NgpAvatarImage {\n  constructor() {\n    ngpAvatarImage({});\n  }\n}\n","import { Directive } from '@angular/core';\nimport { ngpAvatar, NgpAvatarStatus, provideAvatarState } from './avatar-state';\n\n/**\n * Apply the `ngpAvatar` directive to an element that represents the avatar. This directive is a container for the image and/or fallback.\n */\n@Directive({\n  selector: '[ngpAvatar]',\n  exportAs: 'ngpAvatar',\n  providers: [provideAvatarState()],\n})\nexport class NgpAvatar {\n  /**\n   * The avatar state.\n   */\n  private readonly state = ngpAvatar({});\n\n  /**\n   * Set the avatar status.\n   * @param status The status to set.\n   * @internal\n   */\n  setStatus(status: NgpAvatarStatus): void {\n    this.state.setStatus(status);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-primitives-avatar.mjs","sources":["../../../../packages/ng-primitives/avatar/src/config/avatar-config.ts","../../../../packages/ng-primitives/avatar/src/avatar/avatar-state.ts","../../../../packages/ng-primitives/avatar/src/avatar-fallback/avatar-fallback-state.ts","../../../../packages/ng-primitives/avatar/src/avatar-fallback/avatar-fallback.ts","../../../../packages/ng-primitives/avatar/src/avatar-image/avatar-image-state.ts","../../../../packages/ng-primitives/avatar/src/avatar-image/avatar-image.ts","../../../../packages/ng-primitives/avatar/src/avatar/avatar.ts","../../../../packages/ng-primitives/avatar/src/ng-primitives-avatar.ts"],"sourcesContent":["import { InjectionToken, Provider, inject } from '@angular/core';\n\nexport interface NgpAvatarConfig {\n  /**\n   * Define a delay before the fallback is shown. This is useful to only show the fallback for those with slower connections.\n   * @default 0\n   */\n  delay: number;\n}\n\nexport const defaultAvatarConfig: NgpAvatarConfig = {\n  delay: 0,\n};\n\nexport const NgpAvatarConfigToken = new InjectionToken<NgpAvatarConfig>('NgpAvatarConfigToken');\n\n/**\n * Provide the avatar config\n * @param config The avatar config\n * @returns The provider\n */\nexport function provideAvatarConfig(config: Partial<NgpAvatarConfig>): Provider[] {\n  return [\n    {\n      provide: NgpAvatarConfigToken,\n      useValue: { ...defaultAvatarConfig, ...config },\n    },\n  ];\n}\n\n/**\n * Inject the avatar config\n * @returns The global avatar config\n */\nexport function injectAvatarConfig(): NgpAvatarConfig {\n  return inject(NgpAvatarConfigToken, { optional: true }) ?? defaultAvatarConfig;\n}\n","import { signal, Signal } from '@angular/core';\nimport { injectElementRef } from 'ng-primitives/internal';\nimport { createPrimitive, dataBinding } from 'ng-primitives/state';\n\nexport interface NgpAvatarState {\n  /**\n   * The avatar status.\n   */\n  status: Signal<NgpAvatarStatus>;\n\n  /**\n   * Set the avatar status.\n   */\n  setStatus(status: NgpAvatarStatus): void;\n}\n\nexport interface NgpAvatarProps {}\n\nexport const [NgpAvatarStateToken, ngpAvatar, injectAvatarState, provideAvatarState] =\n  createPrimitive('NgpAvatar', ({}: NgpAvatarProps) => {\n    const element = injectElementRef();\n    const status = signal(NgpAvatarStatus.Idle);\n\n    // Host bindings\n    dataBinding(element, 'data-status', status);\n\n    function setStatus(newStatus: NgpAvatarStatus): void {\n      status.set(newStatus);\n    }\n\n    return {\n      status,\n      setStatus,\n    };\n  });\n\nexport enum NgpAvatarStatus {\n  Idle = 'idle',\n  Loading = 'loading',\n  Loaded = 'loaded',\n  Error = 'error',\n}\n","import { computed, signal, Signal } from '@angular/core';\nimport { injectElementRef } from 'ng-primitives/internal';\nimport { createPrimitive, styleBinding } from 'ng-primitives/state';\nimport { injectDisposables } from 'ng-primitives/utils';\nimport { injectAvatarState, NgpAvatarStatus } from '../avatar/avatar-state';\n\nexport interface NgpAvatarFallbackState {}\n\nexport interface NgpAvatarFallbackProps {\n  /**\n   * The delay before showing the fallback.\n   */\n  delay?: Signal<number>;\n}\n\nexport const [\n  NgpAvatarFallbackStateToken,\n  ngpAvatarFallback,\n  injectAvatarFallbackState,\n  provideAvatarFallbackState,\n] = createPrimitive('NgpAvatarFallback', ({ delay = signal(0) }: NgpAvatarFallbackProps) => {\n  const avatar = injectAvatarState();\n  const element = injectElementRef();\n  const disposables = injectDisposables();\n\n  const delayElapsed = signal(false);\n  const visible = computed(() => delayElapsed() && avatar().status() !== NgpAvatarStatus.Loaded);\n\n  disposables.setTimeout(() => delayElapsed.set(true), delay());\n\n  styleBinding(element, 'display', () => (visible() ? null : 'none'));\n\n  return {};\n});\n","import { NumberInput } from '@angular/cdk/coercion';\nimport { Directive, input, numberAttribute } from '@angular/core';\nimport { injectAvatarConfig } from '../config/avatar-config';\nimport { ngpAvatarFallback } from './avatar-fallback-state';\n\n/**\n * Apply the `ngpAvatarFallback` directive to an element that represents the user in the absence of an image. This is typically the user's initials.\n */\n@Directive({\n  selector: '[ngpAvatarFallback]',\n  exportAs: 'ngpAvatarFallback',\n})\nexport class NgpAvatarFallback {\n  /**\n   * Access the global configuration.\n   */\n  private readonly config = injectAvatarConfig();\n\n  /**\n   * Define a delay before the fallback is shown. This is useful to only show the fallback for those with slower connections.\n   * @default 0\n   */\n  readonly delay = input<number, NumberInput>(this.config.delay, {\n    alias: 'ngpAvatarFallbackDelay',\n    transform: numberAttribute,\n  });\n\n  constructor() {\n    ngpAvatarFallback({ delay: this.delay });\n  }\n}\n","import { ngpVisuallyHidden } from 'ng-primitives/a11y';\nimport { injectElementRef } from 'ng-primitives/internal';\nimport { createPrimitive, listener } from 'ng-primitives/state';\nimport { injectAvatarState, NgpAvatarStatus } from '../avatar/avatar-state';\n\nexport interface NgpAvatarImageState {}\n\nexport interface NgpAvatarImageProps {}\n\nexport const [\n  NgpAvatarImageStateToken,\n  ngpAvatarImage,\n  injectAvatarImageState,\n  provideAvatarImageState,\n] = createPrimitive('NgpAvatarImage', ({}: NgpAvatarImageProps) => {\n  const avatar = injectAvatarState();\n  const element = injectElementRef<HTMLImageElement>();\n  const visuallyHidden = ngpVisuallyHidden({});\n\n  // initially mark the avatar as loading\n  setStatus(NgpAvatarStatus.Loading);\n\n  // if there is no src, we can report this as an error\n  if (!element.nativeElement.src) {\n    setStatus(NgpAvatarStatus.Error);\n  }\n\n  // if the image has already loaded, we can report this to the avatar\n  if (element.nativeElement.complete) {\n    setStatus(NgpAvatarStatus.Loaded);\n  }\n\n  // host listeners\n  listener(element, 'load', () => setStatus(NgpAvatarStatus.Loaded));\n  listener(element, 'error', () => setStatus(NgpAvatarStatus.Error));\n\n  function setStatus(state: NgpAvatarStatus) {\n    avatar().setStatus(state);\n    visuallyHidden.setVisibility(state === NgpAvatarStatus.Loaded);\n  }\n\n  return {};\n});\n","import { Directive } from '@angular/core';\nimport { ngpAvatarImage } from './avatar-image-state';\n\n/**\n * Apply the `ngpAvatarImage` directive to an element that represents the avatar image. This would typically be an `img` element or a `div` with a background image.\n */\n@Directive({\n  selector: 'img[ngpAvatarImage]',\n  exportAs: 'ngpAvatarImage',\n})\nexport class NgpAvatarImage {\n  constructor() {\n    ngpAvatarImage({});\n  }\n}\n","import { Directive } from '@angular/core';\nimport { ngpAvatar, NgpAvatarStatus, provideAvatarState } from './avatar-state';\n\n/**\n * Apply the `ngpAvatar` directive to an element that represents the avatar. This directive is a container for the image and/or fallback.\n */\n@Directive({\n  selector: '[ngpAvatar]',\n  exportAs: 'ngpAvatar',\n  providers: [provideAvatarState()],\n})\nexport class NgpAvatar {\n  /**\n   * The avatar state.\n   */\n  private readonly state = ngpAvatar({});\n\n  /**\n   * Set the avatar status.\n   * @param status The status to set.\n   * @internal\n   */\n  setStatus(status: NgpAvatarStatus): void {\n    this.state.setStatus(status);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ng-primitives-combobox.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, HostListener, Directive, booleanAttribute, inject, ViewContainerRef, TemplateRef, Injector, signal, InjectionToken, output, afterRenderEffect } from '@angular/core';
+import { input, computed, HostListener, Directive, booleanAttribute, inject, ViewContainerRef, TemplateRef, Injector, signal, InjectionToken, output } from '@angular/core';
 import { ngpInteractions } from 'ng-primitives/interactions';
 import { injectElementRef, observeResize } from 'ng-primitives/internal';
 import { uniqueId } from 'ng-primitives/utils';
@@ -605,6 +605,13 @@ class NgpCombobox {
             // we must wrap the signal in a computed to ensure it is not used before it is defined
             disabled: computed(() => this.state.disabled()),
             items: this.options,
+            onActiveDescendantChange: activeItem => {
+                const isPositioned = this.portal()?.overlay()?.isPositioned() ?? false;
+                if (!isPositioned || !activeItem) {
+                    return;
+                }
+                this.activeDescendantManager.activeItem()?.scrollIntoView?.();
+            },
         });
         /** The control status */
         this.controlStatus = computed(() => this.input()?.controlStatus(), ...(ngDevMode ? [{ debugName: "controlStatus" }] : []));
@@ -617,19 +624,6 @@ class NgpCombobox {
             press: true,
             disabled: this.state.disabled,
         });
-        // any time the active descendant changes, ensure we scroll it into view
-        // perform after next render to ensure the DOM is updated
-        // e.g. the dropdown is open before the option is scrolled into view
-        afterRenderEffect({
-            write: () => {
-                const isPositioned = this.portal()?.overlay()?.isPositioned() ?? false;
-                const activeItem = this.activeDescendantManager.activeItem();
-                if (!isPositioned || !activeItem) {
-                    return;
-                }
-                this.activeDescendantManager.activeItem()?.scrollIntoView?.();
-            },
-        });
     }
     /**
      * Open the dropdown.