ng-primitives 0.90.0 → 0.91.0

package/fesm2022/ng-primitives-avatar.mjs

@@ -1,71 +1,9 @@
 import * as i0 from '@angular/core';
-import { signal, Directive, InjectionToken, inject, input, numberAttribute, computed, ElementRef, HostListener } from '@angular/core';
+import { InjectionToken, inject, signal, computed, input, numberAttribute, Directive } from '@angular/core';
+import { injectElementRef } from 'ng-primitives/internal';
+import { createPrimitive, dataBinding, styleBinding, listener } from 'ng-primitives/state';
 import { injectDisposables } from 'ng-primitives/utils';
-import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
-import * as i1 from 'ng-primitives/a11y';
-import { injectVisuallyHiddenState, NgpVisuallyHidden } from 'ng-primitives/a11y';
-
-/**
- * The state token  for the Avatar primitive.
- */
-const NgpAvatarStateToken = createStateToken('Avatar');
-/**
- * Provides the Avatar state.
- */
-const provideAvatarState = createStateProvider(NgpAvatarStateToken);
-/**
- * Injects the Avatar state.
- */
-const injectAvatarState = createStateInjector(NgpAvatarStateToken);
-/**
- * The Avatar state registration function.
- */
-const avatarState = createState(NgpAvatarStateToken);
-
-/**
- * Apply the `ngpAvatar` directive to an element that represents the avatar. This directive is a container for the image and/or fallback.
- */
-class NgpAvatar {
-    constructor() {
-        /**
-         * Store the current status of the avatar.
-         * @internal
-         */
-        this.status = signal(NgpAvatarStatus.Idle, ...(ngDevMode ? [{ debugName: "status" }] : []));
-        /**
-         * The avatar state.
-         */
-        this.state = avatarState(this);
-    }
-    /**
-     * Set the avatar status.
-     * @param status The status to set.
-     * @internal
-     */
-    setStatus(status) {
-        this.status.set(status);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpAvatar, isStandalone: true, selector: "[ngpAvatar]", host: { properties: { "attr.data-status": "status()" } }, providers: [provideAvatarState()], exportAs: ["ngpAvatar"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpAvatar, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngpAvatar]',
-                    exportAs: 'ngpAvatar',
-                    providers: [provideAvatarState()],
-                    host: {
-                        '[attr.data-status]': 'status()',
-                    },
-                }]
-        }] });
-var NgpAvatarStatus;
-(function (NgpAvatarStatus) {
-    NgpAvatarStatus["Idle"] = "idle";
-    NgpAvatarStatus["Loading"] = "loading";
-    NgpAvatarStatus["Loaded"] = "loaded";
-    NgpAvatarStatus["Error"] = "error";
-})(NgpAvatarStatus || (NgpAvatarStatus = {}));
+import { ngpVisuallyHidden } from 'ng-primitives/a11y';
 
 const defaultAvatarConfig = {
     delay: 0,
@@ -92,23 +30,47 @@ function injectAvatarConfig() {
     return inject(NgpAvatarConfigToken, { optional: true }) ?? defaultAvatarConfig;
 }
 
+const [NgpAvatarStateToken, ngpAvatar, injectAvatarState, provideAvatarState] = createPrimitive('NgpAvatar', ({}) => {
+    const element = injectElementRef();
+    const status = signal(NgpAvatarStatus.Idle, ...(ngDevMode ? [{ debugName: "status" }] : []));
+    // Host bindings
+    dataBinding(element, 'data-status', status);
+    function setStatus(newStatus) {
+        status.set(newStatus);
+    }
+    return {
+        status,
+        setStatus,
+    };
+});
+var NgpAvatarStatus;
+(function (NgpAvatarStatus) {
+    NgpAvatarStatus["Idle"] = "idle";
+    NgpAvatarStatus["Loading"] = "loading";
+    NgpAvatarStatus["Loaded"] = "loaded";
+    NgpAvatarStatus["Error"] = "error";
+})(NgpAvatarStatus || (NgpAvatarStatus = {}));
+
+const [NgpAvatarFallbackStateToken, ngpAvatarFallback, injectAvatarFallbackState, provideAvatarFallbackState,] = createPrimitive('NgpAvatarFallback', ({}) => {
+    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);
+    styleBinding(element, 'display', () => (visible() ? null : 'none'));
+    return {};
+});
+
 /**
  * Apply the `ngpAvatarFallback` directive to an element that represents the user in the absence of an image. This is typically the user's initials.
  */
 class NgpAvatarFallback {
     constructor() {
-        /**
-         * Access the avatar
-         */
-        this.avatar = injectAvatarState();
         /**
          * Access the global configuration.
          */
         this.config = injectAvatarConfig();
-        /**
-         * Access the disposable utilities.
-         */
-        this.disposables = injectDisposables();
         /**
          * Define a delay before the fallback is shown. This is useful to only show the fallback for those with slower connections.
          * @default 0
@@ -118,97 +80,94 @@ class NgpAvatarFallback {
                 alias: 'ngpAvatarFallbackDelay',
                 transform: numberAttribute,
             }]));
-        /**
-         * Determine if this element should be hidden.
-         * @returns True if the element should be visible
-         */
-        this.visible = computed(() => 
-        // we need to check if the element can render and if the avatar is not in a loaded state
-        this.delayElapsed() && this.avatar().status() !== NgpAvatarStatus.Loaded, ...(ngDevMode ? [{ debugName: "visible" }] : []));
-        /**
-         * Determine the delay has elapsed, and we can show the fallback.
-         */
-        this.delayElapsed = signal(false, ...(ngDevMode ? [{ debugName: "delayElapsed" }] : []));
-    }
-    ngOnInit() {
-        this.disposables.setTimeout(() => this.delayElapsed.set(true), this.delay());
+        ngpAvatarFallback({ delay: this.delay });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpAvatarFallback, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpAvatarFallback, isStandalone: true, selector: "[ngpAvatarFallback]", inputs: { delay: { classPropertyName: "delay", publicName: "ngpAvatarFallbackDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "visible() ? null : \"none\"" } }, exportAs: ["ngpAvatarFallback"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpAvatarFallback, isStandalone: true, selector: "[ngpAvatarFallback]", inputs: { delay: { classPropertyName: "delay", publicName: "ngpAvatarFallbackDelay", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ngpAvatarFallback"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpAvatarFallback, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpAvatarFallback]',
                     exportAs: 'ngpAvatarFallback',
-                    host: {
-                        '[style.display]': 'visible() ? null : "none"',
-                    },
                 }]
-        }], propDecorators: { delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpAvatarFallbackDelay", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpAvatarFallbackDelay", required: false }] }] } });
+
+const [NgpAvatarImageStateToken, ngpAvatarImage, injectAvatarImageState, provideAvatarImageState,] = createPrimitive('NgpAvatarImage', ({}) => {
+    const avatar = injectAvatarState();
+    const element = injectElementRef();
+    const visuallyHidden = ngpVisuallyHidden({});
+    // initially mark the avatar as loading
+    setStatus(NgpAvatarStatus.Loading);
+    // if there is no src, we can report this as an error
+    if (!element.nativeElement.src) {
+        setStatus(NgpAvatarStatus.Error);
+    }
+    // if the image has already loaded, we can report this to the avatar
+    if (element.nativeElement.complete) {
+        setStatus(NgpAvatarStatus.Loaded);
+    }
+    // host listeners
+    listener(element, 'load', () => setStatus(NgpAvatarStatus.Loaded));
+    listener(element, 'error', () => setStatus(NgpAvatarStatus.Error));
+    function setStatus(state) {
+        avatar().setStatus(state);
+        visuallyHidden.setVisibility(state === NgpAvatarStatus.Loaded);
+    }
+    return {};
+});
 
 /**
  * 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.
  */
 class NgpAvatarImage {
     constructor() {
-        /**
-         * Control the visibility of the image.
-         */
-        this.visuallyHidden = injectVisuallyHiddenState();
-        /**
-         * Access the avatar
-         */
-        this.avatar = injectAvatarState();
-        /**
-         * Access the image element ref.
-         */
-        this.elementRef = inject(ElementRef);
-    }
-    ngOnInit() {
-        // mark the avatar as loading
-        this.setState(NgpAvatarStatus.Loading);
-        // if there is no src, we can report this as an error
-        if (!this.elementRef.nativeElement.src) {
-            this.setState(NgpAvatarStatus.Error);
-        }
-        // if the image has already loaded, we can report this to the avatar
-        if (this.elementRef.nativeElement.complete) {
-            this.setState(NgpAvatarStatus.Loaded);
-        }
-    }
-    onLoad() {
-        this.setState(NgpAvatarStatus.Loaded);
-    }
-    onError() {
-        this.setState(NgpAvatarStatus.Error);
-    }
-    setState(state) {
-        this.avatar().setStatus(state);
-        // if the state is loaded then we should make the image visible
-        this.visuallyHidden().setVisibility(state === NgpAvatarStatus.Loaded);
+        ngpAvatarImage({});
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpAvatarImage, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpAvatarImage, isStandalone: true, selector: "img[ngpAvatarImage]", host: { listeners: { "load": "onLoad()", "error": "onError()" } }, exportAs: ["ngpAvatarImage"], hostDirectives: [{ directive: i1.NgpVisuallyHidden }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpAvatarImage, isStandalone: true, selector: "img[ngpAvatarImage]", exportAs: ["ngpAvatarImage"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpAvatarImage, decorators: [{
             type: Directive,
             args: [{
                     selector: 'img[ngpAvatarImage]',
                     exportAs: 'ngpAvatarImage',
-                    hostDirectives: [NgpVisuallyHidden],
                 }]
-        }], propDecorators: { onLoad: [{
-                type: HostListener,
-                args: ['load']
-            }], onError: [{
-                type: HostListener,
-                args: ['error']
-            }] } });
+        }], ctorParameters: () => [] });
+
+/**
+ * Apply the `ngpAvatar` directive to an element that represents the avatar. This directive is a container for the image and/or fallback.
+ */
+class NgpAvatar {
+    constructor() {
+        /**
+         * The avatar state.
+         */
+        this.state = ngpAvatar({});
+    }
+    /**
+     * Set the avatar status.
+     * @param status The status to set.
+     * @internal
+     */
+    setStatus(status) {
+        this.state.setStatus(status);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpAvatar, isStandalone: true, selector: "[ngpAvatar]", providers: [provideAvatarState()], exportAs: ["ngpAvatar"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpAvatar, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpAvatar]',
+                    exportAs: 'ngpAvatar',
+                    providers: [provideAvatarState()],
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgpAvatar, NgpAvatarFallback, NgpAvatarImage, NgpAvatarStatus, injectAvatarState, provideAvatarConfig, provideAvatarState };
+export { NgpAvatar, NgpAvatarFallback, NgpAvatarFallbackStateToken, NgpAvatarImage, NgpAvatarImageStateToken, NgpAvatarStateToken, NgpAvatarStatus, injectAvatarFallbackState, injectAvatarImageState, injectAvatarState, ngpAvatar, ngpAvatarFallback, ngpAvatarImage, provideAvatarConfig, provideAvatarFallbackState, provideAvatarImageState, provideAvatarState };
 //# sourceMappingURL=ng-primitives-avatar.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ng-primitives-avatar.mjs","sources":["../../../../packages/ng-primitives/avatar/src/avatar/avatar-state.ts","../../../../packages/ng-primitives/avatar/src/avatar/avatar.ts","../../../../packages/ng-primitives/avatar/src/config/avatar-config.ts","../../../../packages/ng-primitives/avatar/src/avatar-fallback/avatar-fallback.ts","../../../../packages/ng-primitives/avatar/src/avatar-image/avatar-image.ts","../../../../packages/ng-primitives/avatar/src/ng-primitives-avatar.ts"],"sourcesContent":["import {\n  createState,\n  createStateInjector,\n  createStateProvider,\n  createStateToken,\n} from 'ng-primitives/state';\nimport type { NgpAvatar } from './avatar';\n\n/**\n * The state token  for the Avatar primitive.\n */\nexport const NgpAvatarStateToken = createStateToken<NgpAvatar>('Avatar');\n\n/**\n * Provides the Avatar state.\n */\nexport const provideAvatarState = createStateProvider(NgpAvatarStateToken);\n\n/**\n * Injects the Avatar state.\n */\nexport const injectAvatarState = createStateInjector<NgpAvatar>(NgpAvatarStateToken);\n\n/**\n * The Avatar state registration function.\n */\nexport const avatarState = createState(NgpAvatarStateToken);\n","import { Directive, signal } from '@angular/core';\nimport { avatarState, 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  host: {\n    '[attr.data-status]': 'status()',\n  },\n})\nexport class NgpAvatar {\n  /**\n   * Store the current status of the avatar.\n   * @internal\n   */\n  readonly status = signal(NgpAvatarStatus.Idle);\n\n  /**\n   * The avatar state.\n   */\n  protected readonly state = avatarState<NgpAvatar>(this);\n\n  /**\n   * Set the avatar status.\n   * @param status The status to set.\n   * @internal\n   */\n  setStatus(status: NgpAvatarStatus): void {\n    this.status.set(status);\n  }\n}\n\nexport enum NgpAvatarStatus {\n  Idle = 'idle',\n  Loading = 'loading',\n  Loaded = 'loaded',\n  Error = 'error',\n}\n","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 { NumberInput } from '@angular/cdk/coercion';\nimport { computed, Directive, input, numberAttribute, OnInit, signal } from '@angular/core';\nimport { injectDisposables } from 'ng-primitives/utils';\nimport { NgpAvatarStatus } from '../avatar/avatar';\nimport { injectAvatarState } from '../avatar/avatar-state';\nimport { injectAvatarConfig } from '../config/avatar-config';\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  host: {\n    '[style.display]': 'visible() ? null : \"none\"',\n  },\n})\nexport class NgpAvatarFallback implements OnInit {\n  /**\n   * Access the avatar\n   */\n  private readonly avatar = injectAvatarState();\n\n  /**\n   * Access the global configuration.\n   */\n  private readonly config = injectAvatarConfig();\n\n  /**\n   * Access the disposable utilities.\n   */\n  private readonly disposables = injectDisposables();\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  /**\n   * Determine if this element should be hidden.\n   * @returns True if the element should be visible\n   */\n  protected readonly visible = computed(\n    () =>\n      // we need to check if the element can render and if the avatar is not in a loaded state\n      this.delayElapsed() && this.avatar().status() !== NgpAvatarStatus.Loaded,\n  );\n\n  /**\n   * Determine the delay has elapsed, and we can show the fallback.\n   */\n  private delayElapsed = signal(false);\n\n  ngOnInit(): void {\n    this.disposables.setTimeout(() => this.delayElapsed.set(true), this.delay());\n  }\n}\n","import { Directive, ElementRef, HostListener, inject, OnInit } from '@angular/core';\nimport { injectVisuallyHiddenState, NgpVisuallyHidden } from 'ng-primitives/a11y';\nimport { NgpAvatarStatus } from '../avatar/avatar';\nimport { injectAvatarState } from '../avatar/avatar-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  hostDirectives: [NgpVisuallyHidden],\n})\nexport class NgpAvatarImage implements OnInit {\n  /**\n   * Control the visibility of the image.\n   */\n  protected readonly visuallyHidden = injectVisuallyHiddenState();\n\n  /**\n   * Access the avatar\n   */\n  private readonly avatar = injectAvatarState();\n\n  /**\n   * Access the image element ref.\n   */\n  private readonly elementRef = inject<ElementRef<HTMLImageElement>>(ElementRef);\n\n  ngOnInit(): void {\n    // mark the avatar as loading\n    this.setState(NgpAvatarStatus.Loading);\n\n    // if there is no src, we can report this as an error\n    if (!this.elementRef.nativeElement.src) {\n      this.setState(NgpAvatarStatus.Error);\n    }\n\n    // if the image has already loaded, we can report this to the avatar\n    if (this.elementRef.nativeElement.complete) {\n      this.setState(NgpAvatarStatus.Loaded);\n    }\n  }\n\n  @HostListener('load')\n  protected onLoad(): void {\n    this.setState(NgpAvatarStatus.Loaded);\n  }\n\n  @HostListener('error')\n  protected onError(): void {\n    this.setState(NgpAvatarStatus.Error);\n  }\n\n  private setState(state: NgpAvatarStatus) {\n    this.avatar().setStatus(state);\n\n    // if the state is loaded then we should make the image visible\n    this.visuallyHidden().setVisibility(state === NgpAvatarStatus.Loaded);\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', ({}: 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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"}

package/fesm2022/ng-primitives-breadcrumbs.mjs

@@ -1,138 +1,195 @@
 import * as i0 from '@angular/core';
 import { Directive } from '@angular/core';
+import { injectElementRef } from 'ng-primitives/internal';
+import { createPrimitive, attrBinding } from 'ng-primitives/state';
 import { ngpInteractions } from 'ng-primitives/interactions';
 
+const [NgpBreadcrumbEllipsisStateToken, ngpBreadcrumbEllipsis, injectBreadcrumbEllipsisState, provideBreadcrumbEllipsisState,] = createPrimitive('NgpBreadcrumbEllipsis', ({}) => {
+    const element = injectElementRef();
+    // Host bindings
+    attrBinding(element, 'role', 'presentation');
+    attrBinding(element, 'aria-hidden', 'true');
+    return {};
+});
+
 /**
  * Apply `ngpBreadcrumbEllipsis` to elements that represent collapsed breadcrumb items.
  */
 class NgpBreadcrumbEllipsis {
+    constructor() {
+        ngpBreadcrumbEllipsis({});
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpBreadcrumbEllipsis, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpBreadcrumbEllipsis, isStandalone: true, selector: "[ngpBreadcrumbEllipsis]", host: { attributes: { "role": "presentation", "aria-hidden": "true" } }, exportAs: ["ngpBreadcrumbEllipsis"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpBreadcrumbEllipsis, isStandalone: true, selector: "[ngpBreadcrumbEllipsis]", providers: [provideBreadcrumbEllipsisState()], exportAs: ["ngpBreadcrumbEllipsis"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpBreadcrumbEllipsis, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpBreadcrumbEllipsis]',
                     exportAs: 'ngpBreadcrumbEllipsis',
-                    host: {
-                        role: 'presentation',
-                        'aria-hidden': 'true',
-                    },
+                    providers: [provideBreadcrumbEllipsisState()],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
+
+const [NgpBreadcrumbItemStateToken, ngpBreadcrumbItem, injectBreadcrumbItemState, provideBreadcrumbItemState,] = createPrimitive('NgpBreadcrumbItem', ({}) => {
+    const element = injectElementRef();
+    // Host bindings
+    attrBinding(element, 'role', 'listitem');
+    return {};
+});
 
 /**
  * Apply `ngpBreadcrumbItem` to each list item in the breadcrumb trail.
  */
 class NgpBreadcrumbItem {
+    constructor() {
+        ngpBreadcrumbItem({});
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpBreadcrumbItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpBreadcrumbItem, isStandalone: true, selector: "[ngpBreadcrumbItem]", host: { attributes: { "role": "listitem" } }, exportAs: ["ngpBreadcrumbItem"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpBreadcrumbItem, isStandalone: true, selector: "[ngpBreadcrumbItem]", providers: [provideBreadcrumbItemState()], exportAs: ["ngpBreadcrumbItem"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpBreadcrumbItem, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpBreadcrumbItem]',
                     exportAs: 'ngpBreadcrumbItem',
-                    host: {
-                        role: 'listitem',
-                    },
+                    providers: [provideBreadcrumbItemState()],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
+
+const [NgpBreadcrumbLinkStateToken, ngpBreadcrumbLink, injectBreadcrumbLinkState, provideBreadcrumbLinkState,] = createPrimitive('NgpBreadcrumbLink', ({}) => {
+    // Set up interactions for hover, press, and focus-visible
+    ngpInteractions({ hover: true, press: true, focusVisible: true });
+    return {};
+});
 
 /**
  * Apply `ngpBreadcrumbLink` to anchors or buttons that navigate to a breadcrumb destination.
  */
 class NgpBreadcrumbLink {
     constructor() {
-        ngpInteractions({ hover: true, press: true, focusVisible: true });
+        ngpBreadcrumbLink({});
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpBreadcrumbLink, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpBreadcrumbLink, isStandalone: true, selector: "[ngpBreadcrumbLink]", exportAs: ["ngpBreadcrumbLink"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpBreadcrumbLink, isStandalone: true, selector: "[ngpBreadcrumbLink]", providers: [provideBreadcrumbLinkState()], exportAs: ["ngpBreadcrumbLink"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpBreadcrumbLink, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpBreadcrumbLink]',
                     exportAs: 'ngpBreadcrumbLink',
+                    providers: [provideBreadcrumbLinkState()],
                 }]
         }], ctorParameters: () => [] });
 
+const [NgpBreadcrumbListStateToken, ngpBreadcrumbList, injectBreadcrumbListState, provideBreadcrumbListState,] = createPrimitive('NgpBreadcrumbList', ({}) => {
+    const element = injectElementRef();
+    // Host bindings
+    attrBinding(element, 'role', 'list');
+    return {};
+});
+
 /**
  * Apply `ngpBreadcrumbList` to the ordered list that groups breadcrumb items.
  */
 class NgpBreadcrumbList {
+    constructor() {
+        ngpBreadcrumbList({});
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpBreadcrumbList, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpBreadcrumbList, isStandalone: true, selector: "[ngpBreadcrumbList]", host: { attributes: { "role": "list" } }, exportAs: ["ngpBreadcrumbList"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpBreadcrumbList, isStandalone: true, selector: "[ngpBreadcrumbList]", providers: [provideBreadcrumbListState()], exportAs: ["ngpBreadcrumbList"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpBreadcrumbList, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpBreadcrumbList]',
                     exportAs: 'ngpBreadcrumbList',
-                    host: {
-                        role: 'list',
-                    },
+                    providers: [provideBreadcrumbListState()],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
+
+const [NgpBreadcrumbPageStateToken, ngpBreadcrumbPage, injectBreadcrumbPageState, provideBreadcrumbPageState,] = createPrimitive('NgpBreadcrumbPage', ({}) => {
+    const element = injectElementRef();
+    // Host bindings
+    attrBinding(element, 'aria-current', 'page');
+    return {};
+});
 
 /**
  * Apply `ngpBreadcrumbPage` to non-link content that represents the active page.
  */
 class NgpBreadcrumbPage {
+    constructor() {
+        ngpBreadcrumbPage({});
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpBreadcrumbPage, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpBreadcrumbPage, isStandalone: true, selector: "[ngpBreadcrumbPage]", host: { attributes: { "aria-current": "page" } }, exportAs: ["ngpBreadcrumbPage"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpBreadcrumbPage, isStandalone: true, selector: "[ngpBreadcrumbPage]", providers: [provideBreadcrumbPageState()], exportAs: ["ngpBreadcrumbPage"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpBreadcrumbPage, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpBreadcrumbPage]',
                     exportAs: 'ngpBreadcrumbPage',
-                    host: {
-                        'aria-current': 'page',
-                    },
+                    providers: [provideBreadcrumbPageState()],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
+
+const [NgpBreadcrumbSeparatorStateToken, ngpBreadcrumbSeparator, injectBreadcrumbSeparatorState, provideBreadcrumbSeparatorState,] = createPrimitive('NgpBreadcrumbSeparator', ({}) => {
+    const element = injectElementRef();
+    // Host bindings
+    attrBinding(element, 'role', 'presentation');
+    attrBinding(element, 'aria-hidden', 'true');
+    return {};
+});
 
 /**
  * Apply `ngpBreadcrumbSeparator` between breadcrumb items to render a visual divider.
  */
 class NgpBreadcrumbSeparator {
+    constructor() {
+        ngpBreadcrumbSeparator({});
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpBreadcrumbSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpBreadcrumbSeparator, isStandalone: true, selector: "[ngpBreadcrumbSeparator]", host: { attributes: { "role": "presentation", "aria-hidden": "true" } }, exportAs: ["ngpBreadcrumbSeparator"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpBreadcrumbSeparator, isStandalone: true, selector: "[ngpBreadcrumbSeparator]", providers: [provideBreadcrumbSeparatorState()], exportAs: ["ngpBreadcrumbSeparator"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpBreadcrumbSeparator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpBreadcrumbSeparator]',
                     exportAs: 'ngpBreadcrumbSeparator',
-                    host: {
-                        role: 'presentation',
-                        'aria-hidden': 'true',
-                    },
+                    providers: [provideBreadcrumbSeparatorState()],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
+
+const [NgpBreadcrumbsStateToken, ngpBreadcrumbs, injectBreadcrumbsState, provideBreadcrumbsState,] = createPrimitive('NgpBreadcrumbs', ({}) => {
+    const element = injectElementRef();
+    // Host bindings
+    attrBinding(element, 'role', 'navigation');
+    return {};
+});
 
 /**
  * Apply `ngpBreadcrumbs` to the navigation element that wraps the breadcrumb trail.
  */
 class NgpBreadcrumbs {
+    constructor() {
+        ngpBreadcrumbs({});
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpBreadcrumbs, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpBreadcrumbs, isStandalone: true, selector: "[ngpBreadcrumbs]", host: { attributes: { "role": "navigation" } }, exportAs: ["ngpBreadcrumbs"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpBreadcrumbs, isStandalone: true, selector: "[ngpBreadcrumbs]", providers: [provideBreadcrumbsState()], exportAs: ["ngpBreadcrumbs"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpBreadcrumbs, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpBreadcrumbs]',
                     exportAs: 'ngpBreadcrumbs',
-                    host: {
-                        role: 'navigation',
-                    },
+                    providers: [provideBreadcrumbsState()],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgpBreadcrumbEllipsis, NgpBreadcrumbItem, NgpBreadcrumbLink, NgpBreadcrumbList, NgpBreadcrumbPage, NgpBreadcrumbSeparator, NgpBreadcrumbs };
+export { NgpBreadcrumbEllipsis, NgpBreadcrumbEllipsisStateToken, NgpBreadcrumbItem, NgpBreadcrumbItemStateToken, NgpBreadcrumbLink, NgpBreadcrumbLinkStateToken, NgpBreadcrumbList, NgpBreadcrumbListStateToken, NgpBreadcrumbPage, NgpBreadcrumbPageStateToken, NgpBreadcrumbSeparator, NgpBreadcrumbSeparatorStateToken, NgpBreadcrumbs, NgpBreadcrumbsStateToken, injectBreadcrumbEllipsisState, injectBreadcrumbItemState, injectBreadcrumbLinkState, injectBreadcrumbListState, injectBreadcrumbPageState, injectBreadcrumbSeparatorState, injectBreadcrumbsState, ngpBreadcrumbEllipsis, ngpBreadcrumbItem, ngpBreadcrumbLink, ngpBreadcrumbList, ngpBreadcrumbPage, ngpBreadcrumbSeparator, ngpBreadcrumbs, provideBreadcrumbEllipsisState, provideBreadcrumbItemState, provideBreadcrumbLinkState, provideBreadcrumbListState, provideBreadcrumbPageState, provideBreadcrumbSeparatorState, provideBreadcrumbsState };
 //# sourceMappingURL=ng-primitives-breadcrumbs.mjs.map