@ngstarter-ui/components 1.0.21

package/fesm2022/ngstarter-ui-components-bottom-sheet.mjs

@@ -0,0 +1,327 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, EventEmitter, inject, ChangeDetectionStrategy, ViewEncapsulation, Component, Injector, Injectable } from '@angular/core';
+import { CdkDialogContainer, Dialog } from '@angular/cdk/dialog';
+import { Overlay } from '@angular/cdk/overlay';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { CdkPortalOutlet } from '@angular/cdk/portal';
+import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
+import { Subject } from 'rxjs';
+import { filter, take } from 'rxjs/operators';
+
+/** Injection token that can be used to access the data that was passed in to a bottom sheet. */
+const BOTTOM_SHEET_DATA = new InjectionToken('EmrBottomSheetData');
+/**
+ * Configuration used when opening a bottom sheet.
+ */
+class BottomSheetConfig {
+    /** The view container to place the overlay for the bottom sheet into. */
+    viewContainerRef;
+    /** Extra CSS classes to be added to the bottom sheet container. */
+    panelClass;
+    /** Text layout direction for the bottom sheet. */
+    direction;
+    /** Data being injected into the child component. */
+    data = null;
+    /** Whether the bottom sheet has a backdrop. */
+    hasBackdrop = true;
+    /** Custom class for the backdrop. */
+    backdropClass;
+    /** Whether the user can use escape or clicking outside to close the bottom sheet. */
+    disableClose = false;
+    /** Aria label to assign to the bottom sheet element. */
+    ariaLabel = null;
+    /**
+     * Whether this is a modal dialog. Used to set the `aria-modal` attribute.
+     */
+    ariaModal = false;
+    /**
+     * Whether the bottom sheet should close when the user goes backwards/forwards in history.
+     */
+    closeOnNavigation = true;
+    /**
+     * Where the bottom sheet should focus on open.
+     */
+    autoFocus = 'first-tabbable';
+    /**
+     * Whether the bottom sheet should restore focus to the
+     * previously-focused element, after it's closed.
+     */
+    restoreFocus = true;
+    /** Scroll strategy to be used for the bottom sheet. */
+    scrollStrategy;
+    /** Height for the bottom sheet. */
+    height = '';
+    /** Minimum height for the bottom sheet. If a number is provided, assumes pixel units. */
+    minHeight;
+    /** Maximum height for the bottom sheet. If a number is provided, assumes pixel units. */
+    maxHeight;
+}
+
+/**
+ * Internal component that wraps user-provided bottom sheet content.
+ * @docs-private
+ */
+class BottomSheetContainer extends CdkDialogContainer {
+    _breakpointSubscription;
+    /** The state of the bottom sheet animations. */
+    _animationState = 'void';
+    /** Emits whenever the state of the animation changes. */
+    _animationStateChanged = new EventEmitter();
+    /** Whether the component has been destroyed. */
+    _destroyed = false;
+    constructor() {
+        super();
+        const breakpointObserver = inject(BreakpointObserver);
+        this._breakpointSubscription = breakpointObserver
+            .observe([Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge])
+            .subscribe(() => {
+            const classList = this._elementRef.nativeElement.classList;
+            classList.toggle('ngs-bottom-sheet-container-medium', breakpointObserver.isMatched(Breakpoints.Medium));
+            classList.toggle('ngs-bottom-sheet-container-large', breakpointObserver.isMatched(Breakpoints.Large));
+            classList.toggle('ngs-bottom-sheet-container-xlarge', breakpointObserver.isMatched(Breakpoints.XLarge));
+        });
+    }
+    /** Begin animation of bottom sheet entrance into view. */
+    enter() {
+        if (!this._destroyed) {
+            this._animationState = 'visible';
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+    /** Begin animation of the bottom sheet exiting from view. */
+    exit() {
+        if (!this._destroyed) {
+            this._animationState = 'hidden';
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._breakpointSubscription.unsubscribe();
+        this._destroyed = true;
+    }
+    _onTransitionEnd(event) {
+        if (event.propertyName === 'transform') {
+            this._animationStateChanged.emit({
+                fromState: this._animationState === 'visible' ? 'void' : 'visible',
+                toState: this._animationState,
+                totalTime: 300,
+                phaseName: 'done',
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BottomSheetContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: BottomSheetContainer, isStandalone: true, selector: "ngs-bottom-sheet-container", host: { attributes: { "tabindex": "-1" }, listeners: { "transitionend": "_onTransitionEnd($event)" }, properties: { "attr.role": "_config.role", "attr.aria-modal": "_config.ariaModal", "attr.aria-label": "_config.ariaLabel", "class.ngs-bottom-sheet-container-visible": "_animationState === \"visible\"", "class.ngs-bottom-sheet-container-hidden": "_animationState === \"hidden\"" }, classAttribute: "ngs-bottom-sheet-container" }, usesInheritance: true, ngImport: i0, template: '<ng-template cdkPortalOutlet />', isInline: true, styles: [".ngs-bottom-sheet-container{box-shadow:0 8px 10px -5px #0003,0 16px 24px 2px #00000024,0 6px 30px 5px #0000001f;padding:8px 16px;min-width:100vw;box-sizing:border-box;display:block;outline:0;max-height:80vh;overflow:auto;position:relative;background:var(--ngs-bottom-sheet-container-background-color, white);color:var(--ngs-bottom-sheet-container-text-color, black);visibility:hidden;transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1),visibility .3s}.ngs-bottom-sheet-container-visible{transform:translateY(0);visibility:visible;transition-timing-function:cubic-bezier(0,0,.2,1)}.ngs-bottom-sheet-container-hidden{transform:translateY(100%);visibility:hidden}@media(forced-colors:active){.ngs-bottom-sheet-container{outline:1px solid}}.ngs-bottom-sheet-container-medium,.ngs-bottom-sheet-container-large,.ngs-bottom-sheet-container-xlarge{border-top-left-radius:var(--ngs-bottom-sheet-container-shape, 28px);border-top-right-radius:var(--ngs-bottom-sheet-container-shape, 28px)}.ngs-bottom-sheet-container-medium{min-width:384px;max-width:calc(100vw - 128px)}.ngs-bottom-sheet-container-large{min-width:512px;max-width:calc(100vw - 256px)}.ngs-bottom-sheet-container-xlarge{min-width:576px;max-width:calc(100vw - 384px)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BottomSheetContainer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-bottom-sheet-container', template: '<ng-template cdkPortalOutlet />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, imports: [CdkPortalOutlet], host: {
+                        'class': 'ngs-bottom-sheet-container',
+                        'tabindex': '-1',
+                        '[attr.role]': '_config.role',
+                        '[attr.aria-modal]': '_config.ariaModal',
+                        '[attr.aria-label]': '_config.ariaLabel',
+                        '[class.ngs-bottom-sheet-container-visible]': '_animationState === "visible"',
+                        '[class.ngs-bottom-sheet-container-hidden]': '_animationState === "hidden"',
+                        '(transitionend)': '_onTransitionEnd($event)',
+                    }, styles: [".ngs-bottom-sheet-container{box-shadow:0 8px 10px -5px #0003,0 16px 24px 2px #00000024,0 6px 30px 5px #0000001f;padding:8px 16px;min-width:100vw;box-sizing:border-box;display:block;outline:0;max-height:80vh;overflow:auto;position:relative;background:var(--ngs-bottom-sheet-container-background-color, white);color:var(--ngs-bottom-sheet-container-text-color, black);visibility:hidden;transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1),visibility .3s}.ngs-bottom-sheet-container-visible{transform:translateY(0);visibility:visible;transition-timing-function:cubic-bezier(0,0,.2,1)}.ngs-bottom-sheet-container-hidden{transform:translateY(100%);visibility:hidden}@media(forced-colors:active){.ngs-bottom-sheet-container{outline:1px solid}}.ngs-bottom-sheet-container-medium,.ngs-bottom-sheet-container-large,.ngs-bottom-sheet-container-xlarge{border-top-left-radius:var(--ngs-bottom-sheet-container-shape, 28px);border-top-right-radius:var(--ngs-bottom-sheet-container-shape, 28px)}.ngs-bottom-sheet-container-medium{min-width:384px;max-width:calc(100vw - 128px)}.ngs-bottom-sheet-container-large{min-width:512px;max-width:calc(100vw - 256px)}.ngs-bottom-sheet-container-xlarge{min-width:576px;max-width:calc(100vw - 384px)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Reference to a bottom sheet dispatched from the BottomSheet service.
+ */
+class BottomSheetRef {
+    _ref;
+    containerInstance;
+    /** @internal */
+    _refInstance = null;
+    /** @internal */
+    _refRef = null;
+    /** Instance of the component making up the content of the bottom sheet. */
+    get instance() {
+        return this._refInstance;
+    }
+    /**
+     * `ComponentRef` of the component opened into the bottom sheet. Will be
+     * null when the bottom sheet is opened using a `TemplateRef`.
+     */
+    get componentRef() {
+        return this._refRef;
+    }
+    /** Whether the user is allowed to close the bottom sheet. */
+    disableClose;
+    /** Subject for notifying the user that the bottom sheet has opened and appeared. */
+    _afterOpened = new Subject();
+    /** Result to be passed down to the `afterDismissed` stream. */
+    _result;
+    /** Handle to the timeout that's running as a fallback in case the exit animation doesn't fire. */
+    _closeFallbackTimeout;
+    constructor(_ref, config, containerInstance) {
+        this._ref = _ref;
+        this.containerInstance = containerInstance;
+        this.disableClose = config.disableClose;
+        // Emit when opening animation completes
+        containerInstance._animationStateChanged
+            .pipe(filter((event) => event.phase === 'done' && event.toState === 'visible'), take(1))
+            .subscribe(() => {
+            this._afterOpened.next();
+            this._afterOpened.complete();
+        });
+        // Dispose overlay when closing animation is complete
+        containerInstance._animationStateChanged
+            .pipe(filter((event) => event.phase === 'done' && (event.toState === 'hidden' || event.toState === 'void')), take(1))
+            .subscribe(() => {
+            if (this._closeFallbackTimeout) {
+                clearTimeout(this._closeFallbackTimeout);
+            }
+            this._ref.close(this._result);
+        });
+        _ref.overlayRef.detachments().subscribe(() => {
+            this._ref.close(this._result);
+        });
+        _ref.backdropClick.subscribe(() => {
+            if (!this.disableClose) {
+                this.dismiss();
+            }
+        });
+        _ref.keydownEvents
+            .pipe(filter(event => event.keyCode === ESCAPE))
+            .subscribe(event => {
+            if (!this.disableClose && !hasModifierKey(event)) {
+                event.preventDefault();
+                this.dismiss();
+            }
+        });
+    }
+    /**
+     * Dismisses the bottom sheet.
+     * @param result Data to be passed back to the bottom sheet opener.
+     */
+    dismiss(result) {
+        if (!this.containerInstance) {
+            return;
+        }
+        // Transition the backdrop in parallel to the bottom sheet.
+        this._ref.overlayRef.detachBackdrop();
+        this._result = result;
+        this.containerInstance.exit();
+        this._closeFallbackTimeout = setTimeout(() => {
+            this._ref.close(this._result);
+        }, 400);
+    }
+    /** Gets an observable that is notified when the bottom sheet is finished closing. */
+    afterDismissed() {
+        return this._ref.closed;
+    }
+    /** Gets an observable that is notified when the bottom sheet has opened and appeared. */
+    afterOpened() {
+        return this._afterOpened;
+    }
+    /**
+     * Gets an observable that emits when the overlay's backdrop has been clicked.
+     */
+    backdropClick() {
+        return this._ref.backdropClick;
+    }
+    /**
+     * Gets an observable that emits when keydown events are targeted on the overlay.
+     */
+    keydownEvents() {
+        return this._ref.keydownEvents;
+    }
+}
+
+/** Injection token that can be used to specify default bottom sheet options. */
+const BOTTOM_SHEET_DEFAULT_OPTIONS = new InjectionToken('ngs-bottom-sheet-default-options');
+class BottomSheet {
+    _injector = inject(Injector);
+    _overlay = inject(Overlay);
+    _dialog = inject(Dialog);
+    _parentBottomSheet = inject(BottomSheet, { optional: true, skipSelf: true });
+    _defaultOptions = inject(BOTTOM_SHEET_DEFAULT_OPTIONS, { optional: true });
+    _bottomSheetRefAtThisLevel = null;
+    /** Reference to the currently opened bottom sheet. */
+    get _openedBottomSheetRef() {
+        const parent = this._parentBottomSheet;
+        return parent ? parent._openedBottomSheetRef : this._bottomSheetRefAtThisLevel;
+    }
+    set _openedBottomSheetRef(value) {
+        if (this._parentBottomSheet) {
+            this._parentBottomSheet._openedBottomSheetRef = value;
+        }
+        else {
+            this._bottomSheetRefAtThisLevel = value;
+        }
+    }
+    open(componentOrTemplateRef, config) {
+        const _config = { ...(this._defaultOptions || new BottomSheetConfig()), ...config };
+        let ref;
+        this._dialog.open(componentOrTemplateRef, {
+            ..._config,
+            // Disable closing since we need to sync it up to the animation ourselves.
+            disableClose: true,
+            // Disable closing on detachments so that we can sync up the animation.
+            closeOnOverlayDetachments: false,
+            maxWidth: '100%',
+            container: BottomSheetContainer,
+            scrollStrategy: _config.scrollStrategy || this._overlay.scrollStrategies.block(),
+            positionStrategy: this._overlay.position()
+                .global()
+                .centerHorizontally()
+                .bottom('0'),
+            templateContext: () => ({ bottomSheetRef: ref }),
+            providers: (cdkRef, _cdkConfig, container) => {
+                ref = new BottomSheetRef(cdkRef, _config, container);
+                return [
+                    { provide: BottomSheetRef, useValue: ref },
+                    { provide: BOTTOM_SHEET_DATA, useValue: _config.data },
+                ];
+            },
+        });
+        ref.afterDismissed().subscribe(() => {
+            // Clear the bottom sheet ref if it hasn't already been replaced by a newer one.
+            if (this._openedBottomSheetRef === ref) {
+                this._openedBottomSheetRef = null;
+            }
+        });
+        if (this._openedBottomSheetRef) {
+            // If a bottom sheet is already in view, dismiss it and enter the
+            // new bottom sheet after exit animation is complete.
+            this._openedBottomSheetRef.afterDismissed().subscribe(() => ref.containerInstance?.enter());
+            this._openedBottomSheetRef.dismiss();
+        }
+        else {
+            // If no bottom sheet is in view, enter the new bottom sheet.
+            ref.containerInstance.enter();
+        }
+        this._openedBottomSheetRef = ref;
+        return ref;
+    }
+    /**
+     * Dismisses the currently-visible bottom sheet.
+     * @param result Data to pass to the bottom sheet instance.
+     */
+    dismiss(result) {
+        if (this._openedBottomSheetRef) {
+            this._openedBottomSheetRef.dismiss(result);
+        }
+    }
+    ngOnDestroy() {
+        if (this._bottomSheetRefAtThisLevel) {
+            this._bottomSheetRefAtThisLevel.dismiss();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BottomSheet, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BottomSheet, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BottomSheet, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BOTTOM_SHEET_DATA, BOTTOM_SHEET_DEFAULT_OPTIONS, BottomSheet, BottomSheetConfig, BottomSheetContainer, BottomSheetRef };
+//# sourceMappingURL=ngstarter-ui-components-bottom-sheet.mjs.map

package/fesm2022/ngstarter-ui-components-bottom-sheet.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngstarter-ui-components-bottom-sheet.mjs","sources":["../../../projects/components/bottom-sheet/src/bottom-sheet/bottom-sheet-config.ts","../../../projects/components/bottom-sheet/src/bottom-sheet/bottom-sheet-container.ts","../../../projects/components/bottom-sheet/src/bottom-sheet/bottom-sheet-ref.ts","../../../projects/components/bottom-sheet/src/bottom-sheet/bottom-sheet.ts","../../../projects/components/bottom-sheet/ngstarter-ui-components-bottom-sheet.ts"],"sourcesContent":["import { InjectionToken, ViewContainerRef } from '@angular/core';\nimport { ScrollStrategy } from '@angular/cdk/overlay';\n\n/** Injection token that can be used to access the data that was passed in to a bottom sheet. */\nexport const BOTTOM_SHEET_DATA = new InjectionToken<any>('EmrBottomSheetData');\n\n/**\n * Configuration used when opening a bottom sheet.\n */\nexport class BottomSheetConfig<D = any> {\n  /** The view container to place the overlay for the bottom sheet into. */\n  viewContainerRef?: ViewContainerRef;\n\n  /** Extra CSS classes to be added to the bottom sheet container. */\n  panelClass?: string | string[];\n\n  /** Text layout direction for the bottom sheet. */\n  direction?: 'ltr' | 'rtl';\n\n  /** Data being injected into the child component. */\n  data?: D | null = null;\n\n  /** Whether the bottom sheet has a backdrop. */\n  hasBackdrop?: boolean = true;\n\n  /** Custom class for the backdrop. */\n  backdropClass?: string;\n\n  /** Whether the user can use escape or clicking outside to close the bottom sheet. */\n  disableClose?: boolean = false;\n\n  /** Aria label to assign to the bottom sheet element. */\n  ariaLabel?: string | null = null;\n\n  /**\n   * Whether this is a modal dialog. Used to set the `aria-modal` attribute.\n   */\n  ariaModal?: boolean = false;\n\n  /**\n   * Whether the bottom sheet should close when the user goes backwards/forwards in history.\n   */\n  closeOnNavigation?: boolean = true;\n\n  /**\n   * Where the bottom sheet should focus on open.\n   */\n  autoFocus?: string | boolean = 'first-tabbable';\n\n  /**\n   * Whether the bottom sheet should restore focus to the\n   * previously-focused element, after it's closed.\n   */\n  restoreFocus?: boolean = true;\n\n  /** Scroll strategy to be used for the bottom sheet. */\n  scrollStrategy?: ScrollStrategy;\n\n  /** Height for the bottom sheet. */\n  height?: string = '';\n\n  /** Minimum height for the bottom sheet. If a number is provided, assumes pixel units. */\n  minHeight?: string | number;\n\n  /** Maximum height for the bottom sheet. If a number is provided, assumes pixel units. */\n  maxHeight?: string | number;\n}\n","import {\n  Component,\n  ViewEncapsulation,\n  ChangeDetectionStrategy,\n  OnDestroy,\n  inject,\n  EventEmitter,\n} from '@angular/core';\nimport { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';\nimport { CdkPortalOutlet } from '@angular/cdk/portal';\nimport { Subscription } from 'rxjs';\nimport { CdkDialogContainer } from '@angular/cdk/dialog';\n\n/**\n * Internal component that wraps user-provided bottom sheet content.\n * @docs-private\n */\n@Component({\n  selector: 'ngs-bottom-sheet-container',\n  template: '<ng-template cdkPortalOutlet />',\n  styleUrl: 'bottom-sheet-container.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.Default,\n  imports: [CdkPortalOutlet],\n  host: {\n    'class': 'ngs-bottom-sheet-container',\n    'tabindex': '-1',\n    '[attr.role]': '_config.role',\n    '[attr.aria-modal]': '_config.ariaModal',\n    '[attr.aria-label]': '_config.ariaLabel',\n    '[class.ngs-bottom-sheet-container-visible]': '_animationState === \"visible\"',\n    '[class.ngs-bottom-sheet-container-hidden]': '_animationState === \"hidden\"',\n    '(transitionend)': '_onTransitionEnd($event)',\n  },\n})\nexport class BottomSheetContainer extends CdkDialogContainer implements OnDestroy {\n  private _breakpointSubscription: Subscription;\n\n  /** The state of the bottom sheet animations. */\n  _animationState: 'void' | 'visible' | 'hidden' = 'void';\n\n  /** Emits whenever the state of the animation changes. */\n  _animationStateChanged = new EventEmitter<any>();\n\n  /** Whether the component has been destroyed. */\n  private _destroyed = false;\n\n  constructor() {\n    super();\n    const breakpointObserver = inject(BreakpointObserver);\n    this._breakpointSubscription = breakpointObserver\n      .observe([Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge])\n      .subscribe(() => {\n        const classList = this._elementRef.nativeElement.classList;\n        classList.toggle(\n          'ngs-bottom-sheet-container-medium',\n          breakpointObserver.isMatched(Breakpoints.Medium)\n        );\n        classList.toggle(\n          'ngs-bottom-sheet-container-large',\n          breakpointObserver.isMatched(Breakpoints.Large)\n        );\n        classList.toggle(\n          'ngs-bottom-sheet-container-xlarge',\n          breakpointObserver.isMatched(Breakpoints.XLarge)\n        );\n      });\n  }\n\n  /** Begin animation of bottom sheet entrance into view. */\n  enter() {\n    if (!this._destroyed) {\n      this._animationState = 'visible';\n      this._changeDetectorRef.markForCheck();\n    }\n  }\n\n  /** Begin animation of the bottom sheet exiting from view. */\n  exit() {\n    if (!this._destroyed) {\n      this._animationState = 'hidden';\n      this._changeDetectorRef.markForCheck();\n    }\n  }\n\n  override ngOnDestroy() {\n    super.ngOnDestroy();\n    this._breakpointSubscription.unsubscribe();\n    this._destroyed = true;\n  }\n\n  _onTransitionEnd(event: TransitionEvent) {\n    if (event.propertyName === 'transform') {\n      this._animationStateChanged.emit({\n        fromState: this._animationState === 'visible' ? 'void' : 'visible',\n        toState: this._animationState,\n        totalTime: 300,\n        phaseName: 'done',\n      });\n    }\n  }\n}\n","import { DialogRef } from '@angular/cdk/dialog';\nimport { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';\nimport { Subject } from 'rxjs';\nimport { filter, take } from 'rxjs/operators';\nimport { BottomSheetConfig } from './bottom-sheet-config';\n\n/**\n * Reference to a bottom sheet dispatched from the BottomSheet service.\n */\nexport class BottomSheetRef<T = any, R = any> {\n  /** @internal */\n  _refInstance: T | null = null;\n\n  /** @internal */\n  _refRef: any = null;\n\n  /** Instance of the component making up the content of the bottom sheet. */\n  get instance(): T {\n    return this._refInstance!;\n  }\n\n  /**\n   * `ComponentRef` of the component opened into the bottom sheet. Will be\n   * null when the bottom sheet is opened using a `TemplateRef`.\n   */\n  get componentRef() {\n    return this._refRef;\n  }\n\n  /** Whether the user is allowed to close the bottom sheet. */\n  disableClose: boolean | undefined;\n\n  /** Subject for notifying the user that the bottom sheet has opened and appeared. */\n  private readonly _afterOpened = new Subject<void>();\n\n  /** Result to be passed down to the `afterDismissed` stream. */\n  private _result: R | undefined;\n\n  /** Handle to the timeout that's running as a fallback in case the exit animation doesn't fire. */\n  private _closeFallbackTimeout: any;\n\n  constructor(\n    private _ref: DialogRef<R, T>,\n    config: BottomSheetConfig,\n    public containerInstance: any\n  ) {\n    this.disableClose = config.disableClose;\n\n    // Emit when opening animation completes\n    containerInstance._animationStateChanged\n      .pipe(\n        filter((event: any) => event.phase === 'done' && event.toState === 'visible'),\n        take(1)\n      )\n      .subscribe(() => {\n        this._afterOpened.next();\n        this._afterOpened.complete();\n      });\n\n    // Dispose overlay when closing animation is complete\n    containerInstance._animationStateChanged\n      .pipe(\n        filter((event: any) => event.phase === 'done' && (event.toState === 'hidden' || event.toState === 'void')),\n        take(1)\n      )\n      .subscribe(() => {\n        if (this._closeFallbackTimeout) {\n          clearTimeout(this._closeFallbackTimeout);\n        }\n        this._ref.close(this._result);\n      });\n\n    _ref.overlayRef.detachments().subscribe(() => {\n      this._ref.close(this._result);\n    });\n\n    _ref.backdropClick.subscribe(() => {\n      if (!this.disableClose) {\n        this.dismiss();\n      }\n    });\n\n    _ref.keydownEvents\n      .pipe(filter(event => event.keyCode === ESCAPE))\n      .subscribe(event => {\n        if (!this.disableClose && !hasModifierKey(event)) {\n          event.preventDefault();\n          this.dismiss();\n        }\n      });\n  }\n\n  /**\n   * Dismisses the bottom sheet.\n   * @param result Data to be passed back to the bottom sheet opener.\n   */\n  dismiss(result?: R): void {\n    if (!this.containerInstance) {\n      return;\n    }\n\n    // Transition the backdrop in parallel to the bottom sheet.\n    this._ref.overlayRef.detachBackdrop();\n\n    this._result = result;\n    this.containerInstance.exit();\n    this._closeFallbackTimeout = setTimeout(() => {\n      this._ref.close(this._result);\n    }, 400);\n  }\n\n  /** Gets an observable that is notified when the bottom sheet is finished closing. */\n  afterDismissed() {\n    return this._ref.closed;\n  }\n\n  /** Gets an observable that is notified when the bottom sheet has opened and appeared. */\n  afterOpened() {\n    return this._afterOpened;\n  }\n\n  /**\n   * Gets an observable that emits when the overlay's backdrop has been clicked.\n   */\n  backdropClick() {\n    return this._ref.backdropClick;\n  }\n\n  /**\n   * Gets an observable that emits when keydown events are targeted on the overlay.\n   */\n  keydownEvents() {\n    return this._ref.keydownEvents;\n  }\n}\n","import { ComponentType } from '@angular/cdk/portal';\nimport { inject, Injectable, InjectionToken, Injector, OnDestroy, TemplateRef } from '@angular/core';\nimport { Dialog } from '@angular/cdk/dialog';\nimport { Overlay } from '@angular/cdk/overlay';\nimport { BottomSheetConfig, BOTTOM_SHEET_DATA } from './bottom-sheet-config';\nimport { BottomSheetContainer } from './bottom-sheet-container';\nimport { BottomSheetRef } from './bottom-sheet-ref';\n\n/** Injection token that can be used to specify default bottom sheet options. */\nexport const BOTTOM_SHEET_DEFAULT_OPTIONS = new InjectionToken<BottomSheetConfig>(\n  'ngs-bottom-sheet-default-options'\n);\n\n@Injectable({ providedIn: 'root' })\nexport class BottomSheet implements OnDestroy {\n  private _injector = inject(Injector);\n  private _overlay = inject(Overlay);\n  private _dialog = inject(Dialog);\n  private _parentBottomSheet = inject(BottomSheet, { optional: true, skipSelf: true });\n  private _defaultOptions = inject(BOTTOM_SHEET_DEFAULT_OPTIONS, { optional: true });\n  private _bottomSheetRefAtThisLevel: BottomSheetRef<any> | null = null;\n\n  /** Reference to the currently opened bottom sheet. */\n  get _openedBottomSheetRef(): BottomSheetRef<any> | null {\n    const parent = this._parentBottomSheet;\n    return parent ? parent._openedBottomSheetRef : this._bottomSheetRefAtThisLevel;\n  }\n\n  set _openedBottomSheetRef(value: BottomSheetRef<any> | null) {\n    if (this._parentBottomSheet) {\n      this._parentBottomSheet._openedBottomSheetRef = value;\n    } else {\n      this._bottomSheetRefAtThisLevel = value;\n    }\n  }\n\n  open<T, D = any, R = any>(\n    componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,\n    config?: BottomSheetConfig<D>\n  ): BottomSheetRef<T, R> {\n    const _config = { ...(this._defaultOptions || new BottomSheetConfig()), ...config };\n    let ref: BottomSheetRef<T, R>;\n\n    this._dialog.open<R, T>(componentOrTemplateRef, {\n      ...(_config as any),\n      // Disable closing since we need to sync it up to the animation ourselves.\n      disableClose: true,\n      // Disable closing on detachments so that we can sync up the animation.\n      closeOnOverlayDetachments: false,\n      maxWidth: '100%',\n      container: BottomSheetContainer,\n      scrollStrategy: _config.scrollStrategy || this._overlay.scrollStrategies.block(),\n      positionStrategy: this._overlay.position()\n        .global()\n        .centerHorizontally()\n        .bottom('0'),\n      templateContext: () => ({ bottomSheetRef: ref }),\n      providers: (cdkRef: any, _cdkConfig: any, container: any) => {\n        ref = new BottomSheetRef<T, R>(cdkRef, _config, container);\n        return [\n          { provide: BottomSheetRef, useValue: ref },\n          { provide: BOTTOM_SHEET_DATA, useValue: _config.data },\n        ];\n      },\n    });\n\n    ref!.afterDismissed().subscribe(() => {\n      // Clear the bottom sheet ref if it hasn't already been replaced by a newer one.\n      if (this._openedBottomSheetRef === ref) {\n        this._openedBottomSheetRef = null;\n      }\n    });\n\n    if (this._openedBottomSheetRef) {\n      // If a bottom sheet is already in view, dismiss it and enter the\n      // new bottom sheet after exit animation is complete.\n      this._openedBottomSheetRef.afterDismissed().subscribe(() => ref!.containerInstance?.enter());\n      this._openedBottomSheetRef.dismiss();\n    } else {\n      // If no bottom sheet is in view, enter the new bottom sheet.\n      ref!.containerInstance.enter();\n    }\n\n    this._openedBottomSheetRef = ref!;\n    return ref!;\n  }\n\n  /**\n   * Dismisses the currently-visible bottom sheet.\n   * @param result Data to pass to the bottom sheet instance.\n   */\n  dismiss<R = any>(result?: R): void {\n    if (this._openedBottomSheetRef) {\n      this._openedBottomSheetRef.dismiss(result);\n    }\n  }\n\n  ngOnDestroy() {\n    if (this._bottomSheetRefAtThisLevel) {\n      this._bottomSheetRefAtThisLevel.dismiss();\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngstarter-ui-components-breadcrumbs.mjs

@@ -0,0 +1,209 @@
+import * as i0 from '@angular/core';
+import { Directive, contentChild, TemplateRef, input, booleanAttribute, Component, inject, computed, ChangeDetectionStrategy } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { signalStore, withState, withMethods, patchState } from '@ngrx/signals';
+import { Icon } from '@ngstarter-ui/components/icon';
+
+class BreadcrumbItemDefDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BreadcrumbItemDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: BreadcrumbItemDefDirective, isStandalone: true, selector: "[ngsBreadcrumbItemDef]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BreadcrumbItemDefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsBreadcrumbItemDef]'
+                }]
+        }] });
+
+class BreadcrumbSeparatorDefDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BreadcrumbSeparatorDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: BreadcrumbSeparatorDefDirective, isStandalone: true, selector: "[ngsBreadcrumbSeparatorDef]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BreadcrumbSeparatorDefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsBreadcrumbSeparatorDef]'
+                }]
+        }] });
+
+class BreadcrumbActiveItemDefDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BreadcrumbActiveItemDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: BreadcrumbActiveItemDefDirective, isStandalone: true, selector: "[ngsBreadcrumbActiveItemDef]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BreadcrumbActiveItemDefDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ngsBreadcrumbActiveItemDef]' }]
+        }] });
+
+class Breadcrumbs {
+    itemRef = contentChild.required(BreadcrumbItemDefDirective, {
+        read: TemplateRef
+    });
+    activeItemRef = contentChild.required(BreadcrumbActiveItemDefDirective, {
+        read: TemplateRef
+    });
+    separatorRef = contentChild.required(BreadcrumbSeparatorDefDirective, {
+        read: TemplateRef
+    });
+    dataSource = input([], ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+    lastItemAsLink = input(false, { ...(ngDevMode ? { debugName: "lastItemAsLink" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Breadcrumbs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Breadcrumbs, isStandalone: true, selector: "ngs-breadcrumbs", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, lastItemAsLink: { classPropertyName: "lastItemAsLink", publicName: "lastItemAsLink", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.last-item-as-link": "lastItemAsLink()" }, classAttribute: "ngs-breadcrumbs" }, queries: [{ propertyName: "itemRef", first: true, predicate: BreadcrumbItemDefDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "activeItemRef", first: true, predicate: BreadcrumbActiveItemDefDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "separatorRef", first: true, predicate: BreadcrumbSeparatorDefDirective, descendants: true, read: TemplateRef, isSignal: true }], exportAs: ["ngsBreadcrumbs"], ngImport: i0, template: "@for (breadcrumb of dataSource(); track $index; let last = $last) {\n  @if (!last) {\n    <ng-container *ngTemplateOutlet=\"itemRef(); context: { $implicit: breadcrumb }\"/>\n    <ng-container *ngTemplateOutlet=\"separatorRef()\"/>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"activeItemRef(); context: { $implicit: breadcrumb }\"/>\n  }\n}\n\n<ng-content/>\n", styles: [":host{--ngs-breadcrumbs-gap: calc(var(--spacing, .25rem) * 2.5);--ngs-breadcrumbs-item-font-size: .875rem;--ngs-breadcrumbs-item-color: var(--color-secondary);--ngs-breadcrumbs-item-hover-color: var(--color-primary);--ngs-breadcrumbs-active-item-color: var(--color-primary);--ngs-breadcrumbs-item-font-weight: 400;--ngs-breadcrumbs-separator-color: var(--color-neutral-400);--ngs-breadcrumbs-separator-font-size: .825rem;--ngs-breadcrumbs-separator-position-top: 1px;--ngs-breadcrumbs-title-color: var(--color-neutral-800);--ngs-breadcrumbs-title-font-size: .75rem;display:flex;align-items:center;gap:var(--ngs-breadcrumbs-gap)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Breadcrumbs, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-breadcrumbs', exportAs: 'ngsBreadcrumbs', host: {
+                        'class': 'ngs-breadcrumbs',
+                        '[class.last-item-as-link]': 'lastItemAsLink()'
+                    }, imports: [NgTemplateOutlet], template: "@for (breadcrumb of dataSource(); track $index; let last = $last) {\n  @if (!last) {\n    <ng-container *ngTemplateOutlet=\"itemRef(); context: { $implicit: breadcrumb }\"/>\n    <ng-container *ngTemplateOutlet=\"separatorRef()\"/>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"activeItemRef(); context: { $implicit: breadcrumb }\"/>\n  }\n}\n\n<ng-content/>\n", styles: [":host{--ngs-breadcrumbs-gap: calc(var(--spacing, .25rem) * 2.5);--ngs-breadcrumbs-item-font-size: .875rem;--ngs-breadcrumbs-item-color: var(--color-secondary);--ngs-breadcrumbs-item-hover-color: var(--color-primary);--ngs-breadcrumbs-active-item-color: var(--color-primary);--ngs-breadcrumbs-item-font-weight: 400;--ngs-breadcrumbs-separator-color: var(--color-neutral-400);--ngs-breadcrumbs-separator-font-size: .825rem;--ngs-breadcrumbs-separator-position-top: 1px;--ngs-breadcrumbs-title-color: var(--color-neutral-800);--ngs-breadcrumbs-title-font-size: .75rem;display:flex;align-items:center;gap:var(--ngs-breadcrumbs-gap)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { itemRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => BreadcrumbItemDefDirective), { ...{
+                            read: TemplateRef
+                        }, isSignal: true }] }], activeItemRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => BreadcrumbActiveItemDefDirective), { ...{
+                            read: TemplateRef
+                        }, isSignal: true }] }], separatorRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => BreadcrumbSeparatorDefDirective), { ...{
+                            read: TemplateRef
+                        }, isSignal: true }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], lastItemAsLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastItemAsLink", required: false }] }] } });
+
+class BreadcrumbItem {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BreadcrumbItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: BreadcrumbItem, isStandalone: true, selector: "ngs-breadcrumb-item,[ngs-breadcrumb-item]", host: { classAttribute: "ngs-breadcrumb-item" }, exportAs: ["ngsBreadcrumbItem"], ngImport: i0, template: "<div class=\"icon\">\n  <ng-content select=\"[ngsBreadcrumbItemIcon]\"/>\n</div>\n<div class=\"content\">\n  <ng-content select=\"ngs-breadcrumb-title\"/>\n  <div class=\"name\">\n    <ng-content/>\n  </div>\n</div>\n", styles: [":host{font-size:var(--ngs-breadcrumbs-item-font-size);font-weight:var(--ngs-breadcrumbs-item-font-weight);color:var(--ngs-breadcrumbs-item-color);display:flex;gap:calc(var(--spacing, .25rem) * 1.5);cursor:pointer;text-decoration:none;align-items:center}:host .icon{line-height:11px}:host .icon ::ng-deep .ngs-breadcrumb-item-icon{font-size:22px;width:22px;height:22px;flex:none}:host .icon:empty{display:none}:host .content:has(.name:empty){display:none}:host:not(:last-child):hover .icon{color:var(--ngs-breadcrumbs-item-hover-color)}:host:not(:last-child):hover .name{color:var(--ngs-breadcrumbs-item-hover-color);text-decoration:underline;text-underline-offset:var(--underline-offset-1)}:host:last-child{cursor:auto;color:var(--ngs-breadcrumbs-active-item-color)}:host-context(.ngs-breadcrumbs.last-item-as-link):last-child{color:var(--ngs-breadcrumbs-item-color);cursor:pointer}:host-context(.ngs-breadcrumbs.last-item-as-link):last-child:hover .icon{color:var(--ngs-breadcrumbs-item-hover-color)}:host-context(.ngs-breadcrumbs.last-item-as-link):last-child:hover .name{color:var(--ngs-breadcrumbs-item-hover-color);text-decoration:underline;text-underline-offset:var(--underline-offset-1)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BreadcrumbItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-breadcrumb-item,[ngs-breadcrumb-item]', exportAs: 'ngsBreadcrumbItem', host: {
+                        class: 'ngs-breadcrumb-item'
+                    }, template: "<div class=\"icon\">\n  <ng-content select=\"[ngsBreadcrumbItemIcon]\"/>\n</div>\n<div class=\"content\">\n  <ng-content select=\"ngs-breadcrumb-title\"/>\n  <div class=\"name\">\n    <ng-content/>\n  </div>\n</div>\n", styles: [":host{font-size:var(--ngs-breadcrumbs-item-font-size);font-weight:var(--ngs-breadcrumbs-item-font-weight);color:var(--ngs-breadcrumbs-item-color);display:flex;gap:calc(var(--spacing, .25rem) * 1.5);cursor:pointer;text-decoration:none;align-items:center}:host .icon{line-height:11px}:host .icon ::ng-deep .ngs-breadcrumb-item-icon{font-size:22px;width:22px;height:22px;flex:none}:host .icon:empty{display:none}:host .content:has(.name:empty){display:none}:host:not(:last-child):hover .icon{color:var(--ngs-breadcrumbs-item-hover-color)}:host:not(:last-child):hover .name{color:var(--ngs-breadcrumbs-item-hover-color);text-decoration:underline;text-underline-offset:var(--underline-offset-1)}:host:last-child{cursor:auto;color:var(--ngs-breadcrumbs-active-item-color)}:host-context(.ngs-breadcrumbs.last-item-as-link):last-child{color:var(--ngs-breadcrumbs-item-color);cursor:pointer}:host-context(.ngs-breadcrumbs.last-item-as-link):last-child:hover .icon{color:var(--ngs-breadcrumbs-item-hover-color)}:host-context(.ngs-breadcrumbs.last-item-as-link):last-child:hover .name{color:var(--ngs-breadcrumbs-item-hover-color);text-decoration:underline;text-underline-offset:var(--underline-offset-1)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class BreadcrumbSeparator {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BreadcrumbSeparator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: BreadcrumbSeparator, isStandalone: true, selector: "ngs-breadcrumb-separator", host: { classAttribute: "ngs-breadcrumb-separator" }, exportAs: ["ngsBreadcrumbSeparator"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{position:relative;color:var(--ngs-breadcrumbs-separator-color);font-size:var(--ngs-breadcrumbs-separator-font-size);top:var(--ngs-breadcrumbs-separator-position-top);line-height:0}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BreadcrumbSeparator, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-breadcrumb-separator', exportAs: 'ngsBreadcrumbSeparator', host: {
+                        class: 'ngs-breadcrumb-separator'
+                    }, template: "<ng-content/>\n", styles: [":host{position:relative;color:var(--ngs-breadcrumbs-separator-color);font-size:var(--ngs-breadcrumbs-separator-font-size);top:var(--ngs-breadcrumbs-separator-position-top);line-height:0}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class BreadcrumbTitle {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BreadcrumbTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: BreadcrumbTitle, isStandalone: true, selector: "ngs-breadcrumb-title", host: { classAttribute: "ngs-breadcrumb-title" }, exportAs: ["ngsBreadcrumbTitle"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{display:block;font-size:var(--ngs-breadcrumbs-title-font-size);color:var(--ngs-breadcrumbs-title-color);line-height:var(--leading-relaxed)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BreadcrumbTitle, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-breadcrumb-title', exportAs: 'ngsBreadcrumbTitle', imports: [], host: {
+                        class: 'ngs-breadcrumb-title',
+                    }, template: "<ng-content/>\n", styles: [":host{display:block;font-size:var(--ngs-breadcrumbs-title-font-size);color:var(--ngs-breadcrumbs-title-color);line-height:var(--leading-relaxed)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+const initialState = {
+    breadcrumbs: []
+};
+const BreadcrumbsStore = signalStore({ providedIn: 'root' }, withState(initialState), withMethods((store) => ({
+    setBreadcrumbs(breadcrumbs) {
+        patchState(store, {
+            breadcrumbs
+        });
+    }
+})));
+
+class BreadcrumbItemIconDefDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BreadcrumbItemIconDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: BreadcrumbItemIconDefDirective, isStandalone: true, selector: "[ngsBreadcrumbItemIconDef]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BreadcrumbItemIconDefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsBreadcrumbItemIconDef]',
+                    standalone: true
+                }]
+        }] });
+
+class BreadcrumbItemIconDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BreadcrumbItemIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: BreadcrumbItemIconDirective, isStandalone: true, selector: "[ngsBreadcrumbItemIcon]", host: { classAttribute: "ngs-breadcrumb-item-icon" }, exportAs: ["ngsBreadcrumbItemIcon"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BreadcrumbItemIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsBreadcrumbItemIcon]',
+                    exportAs: 'ngsBreadcrumbItemIcon',
+                    standalone: true,
+                    host: {
+                        'class': 'ngs-breadcrumb-item-icon'
+                    }
+                }]
+        }] });
+
+class BreadcrumbItemNameDefDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BreadcrumbItemNameDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: BreadcrumbItemNameDefDirective, isStandalone: true, selector: "[ngsBreadcrumbItemNameDef]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BreadcrumbItemNameDefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsBreadcrumbItemNameDef]'
+                }]
+        }] });
+
+class BreadcrumbItemTitleDefDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BreadcrumbItemTitleDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: BreadcrumbItemTitleDefDirective, isStandalone: true, selector: "[ngsBreadcrumbItemTitleDef]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BreadcrumbItemTitleDefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsBreadcrumbItemTitleDef]'
+                }]
+        }] });
+
+class BreadcrumbsGlobal {
+    _breadcrumbsStore = inject(BreadcrumbsStore);
+    itemIconDef = contentChild(BreadcrumbItemIconDefDirective, ...(ngDevMode ? [{ debugName: "itemIconDef" }] : /* istanbul ignore next */ []));
+    itemNameDef = contentChild(BreadcrumbItemNameDefDirective, ...(ngDevMode ? [{ debugName: "itemNameDef" }] : /* istanbul ignore next */ []));
+    itemTitleDef = contentChild(BreadcrumbItemTitleDefDirective, ...(ngDevMode ? [{ debugName: "itemTitleDef" }] : /* istanbul ignore next */ []));
+    breadcrumbs = computed(() => {
+        return this._breadcrumbsStore.breadcrumbs();
+    }, ...(ngDevMode ? [{ debugName: "breadcrumbs" }] : /* istanbul ignore next */ []));
+    lastItemAsLink = input(false, { ...(ngDevMode ? { debugName: "lastItemAsLink" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    separator = input('/', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    get iconTemplateRef() {
+        return this.itemIconDef()?.templateRef;
+    }
+    get titleTemplateRef() {
+        return this.itemTitleDef()?.templateRef;
+    }
+    get nameTemplateRef() {
+        return this.itemNameDef()?.templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BreadcrumbsGlobal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: BreadcrumbsGlobal, isStandalone: true, selector: "ngs-breadcrumbs-global", inputs: { lastItemAsLink: { classPropertyName: "lastItemAsLink", publicName: "lastItemAsLink", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "ngSkipHydration": "true" }, classAttribute: "ngs-breadcrumbs-global" }, queries: [{ propertyName: "itemIconDef", first: true, predicate: BreadcrumbItemIconDefDirective, descendants: true, isSignal: true }, { propertyName: "itemNameDef", first: true, predicate: BreadcrumbItemNameDefDirective, descendants: true, isSignal: true }, { propertyName: "itemTitleDef", first: true, predicate: BreadcrumbItemTitleDefDirective, descendants: true, isSignal: true }], exportAs: ["ngsBreadcrumbsGlobal"], ngImport: i0, template: "<ngs-breadcrumbs [lastItemAsLink]=\"lastItemAsLink()\">\n  @for (breadcrumb of breadcrumbs(); track $index; let last = $last) {\n    @switch (breadcrumb.type) {\n      @case ('link') {\n        <a ngs-breadcrumb-item [routerLink]=\"breadcrumb.route\">\n          <ng-container ngsBreadcrumbItemIcon>\n            @if (iconTemplateRef) {\n              <ng-container [ngTemplateOutlet]=\"iconTemplateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: breadcrumb }\"/>\n            } @else {\n              @if (breadcrumb.icon) {\n                <ngs-icon name=\"{{ breadcrumb.icon }}\"/>\n              }\n            }\n          </ng-container>\n\n          @if (titleTemplateRef) {\n            <ngs-breadcrumb-title>\n              <ng-container [ngTemplateOutlet]=\"titleTemplateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: breadcrumb }\"/>\n            </ngs-breadcrumb-title>\n          } @else {\n            @if (breadcrumb.title) {\n              <ngs-breadcrumb-title>{{ breadcrumb.title }}</ngs-breadcrumb-title>\n            }\n          }\n\n          @if (nameTemplateRef) {\n            <ng-container [ngTemplateOutlet]=\"nameTemplateRef\"\n                          [ngTemplateOutletContext]=\"{ $implicit: breadcrumb }\"/>\n          } @else {\n            @if (breadcrumb.name) {\n              {{ breadcrumb.name }}\n            }\n          }\n        </a>\n      }\n      @default {\n        <ngs-breadcrumb-item>\n          <ng-container ngsBreadcrumbItemIcon>\n            @if (iconTemplateRef) {\n              <ng-container [ngTemplateOutlet]=\"iconTemplateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: breadcrumb }\"/>\n            } @else if (breadcrumb.icon) {\n              <ngs-icon name=\"{{ breadcrumb.icon }}\"/>\n            }\n          </ng-container>\n\n          @if (titleTemplateRef) {\n            <ngs-breadcrumb-title>\n              <ng-container [ngTemplateOutlet]=\"titleTemplateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: breadcrumb }\"/>\n            </ngs-breadcrumb-title>\n          } @else {\n            @if (breadcrumb.title) {\n              <ngs-breadcrumb-title>{{ breadcrumb.title }}</ngs-breadcrumb-title>\n            }\n          }\n\n          @if (nameTemplateRef) {\n            <ng-container [ngTemplateOutlet]=\"nameTemplateRef\"\n                          [ngTemplateOutletContext]=\"{ $implicit: breadcrumb }\"/>\n          } @else {\n            @if (breadcrumb.name) {\n              {{ breadcrumb.name }}\n            }\n          }\n        </ngs-breadcrumb-item>\n      }\n    }\n\n    @if (!last) {\n      <ngs-breadcrumb-separator>{{ separator() }}</ngs-breadcrumb-separator>\n    }\n  }\n</ngs-breadcrumbs>\n", styles: [":host{display:block}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: BreadcrumbItem, selector: "ngs-breadcrumb-item,[ngs-breadcrumb-item]", exportAs: ["ngsBreadcrumbItem"] }, { kind: "component", type: BreadcrumbSeparator, selector: "ngs-breadcrumb-separator", exportAs: ["ngsBreadcrumbSeparator"] }, { kind: "component", type: BreadcrumbTitle, selector: "ngs-breadcrumb-title", exportAs: ["ngsBreadcrumbTitle"] }, { kind: "component", type: Breadcrumbs, selector: "ngs-breadcrumbs", inputs: ["dataSource", "lastItemAsLink"], exportAs: ["ngsBreadcrumbs"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: BreadcrumbItemIconDirective, selector: "[ngsBreadcrumbItemIcon]", exportAs: ["ngsBreadcrumbItemIcon"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BreadcrumbsGlobal, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-breadcrumbs-global', exportAs: 'ngsBreadcrumbsGlobal', imports: [
+                        BreadcrumbItem,
+                        BreadcrumbSeparator,
+                        BreadcrumbTitle,
+                        Breadcrumbs,
+                        RouterLink,
+                        BreadcrumbItemIconDirective,
+                        Icon,
+                        NgTemplateOutlet
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-breadcrumbs-global',
+                        ngSkipHydration: 'true'
+                    }, template: "<ngs-breadcrumbs [lastItemAsLink]=\"lastItemAsLink()\">\n  @for (breadcrumb of breadcrumbs(); track $index; let last = $last) {\n    @switch (breadcrumb.type) {\n      @case ('link') {\n        <a ngs-breadcrumb-item [routerLink]=\"breadcrumb.route\">\n          <ng-container ngsBreadcrumbItemIcon>\n            @if (iconTemplateRef) {\n              <ng-container [ngTemplateOutlet]=\"iconTemplateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: breadcrumb }\"/>\n            } @else {\n              @if (breadcrumb.icon) {\n                <ngs-icon name=\"{{ breadcrumb.icon }}\"/>\n              }\n            }\n          </ng-container>\n\n          @if (titleTemplateRef) {\n            <ngs-breadcrumb-title>\n              <ng-container [ngTemplateOutlet]=\"titleTemplateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: breadcrumb }\"/>\n            </ngs-breadcrumb-title>\n          } @else {\n            @if (breadcrumb.title) {\n              <ngs-breadcrumb-title>{{ breadcrumb.title }}</ngs-breadcrumb-title>\n            }\n          }\n\n          @if (nameTemplateRef) {\n            <ng-container [ngTemplateOutlet]=\"nameTemplateRef\"\n                          [ngTemplateOutletContext]=\"{ $implicit: breadcrumb }\"/>\n          } @else {\n            @if (breadcrumb.name) {\n              {{ breadcrumb.name }}\n            }\n          }\n        </a>\n      }\n      @default {\n        <ngs-breadcrumb-item>\n          <ng-container ngsBreadcrumbItemIcon>\n            @if (iconTemplateRef) {\n              <ng-container [ngTemplateOutlet]=\"iconTemplateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: breadcrumb }\"/>\n            } @else if (breadcrumb.icon) {\n              <ngs-icon name=\"{{ breadcrumb.icon }}\"/>\n            }\n          </ng-container>\n\n          @if (titleTemplateRef) {\n            <ngs-breadcrumb-title>\n              <ng-container [ngTemplateOutlet]=\"titleTemplateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: breadcrumb }\"/>\n            </ngs-breadcrumb-title>\n          } @else {\n            @if (breadcrumb.title) {\n              <ngs-breadcrumb-title>{{ breadcrumb.title }}</ngs-breadcrumb-title>\n            }\n          }\n\n          @if (nameTemplateRef) {\n            <ng-container [ngTemplateOutlet]=\"nameTemplateRef\"\n                          [ngTemplateOutletContext]=\"{ $implicit: breadcrumb }\"/>\n          } @else {\n            @if (breadcrumb.name) {\n              {{ breadcrumb.name }}\n            }\n          }\n        </ngs-breadcrumb-item>\n      }\n    }\n\n    @if (!last) {\n      <ngs-breadcrumb-separator>{{ separator() }}</ngs-breadcrumb-separator>\n    }\n  }\n</ngs-breadcrumbs>\n", styles: [":host{display:block}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { itemIconDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => BreadcrumbItemIconDefDirective), { isSignal: true }] }], itemNameDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => BreadcrumbItemNameDefDirective), { isSignal: true }] }], itemTitleDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => BreadcrumbItemTitleDefDirective), { isSignal: true }] }], lastItemAsLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastItemAsLink", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BreadcrumbActiveItemDefDirective, BreadcrumbItem, BreadcrumbItemDefDirective, BreadcrumbItemIconDefDirective, BreadcrumbItemIconDirective, BreadcrumbItemNameDefDirective, BreadcrumbItemTitleDefDirective, BreadcrumbSeparator, BreadcrumbSeparatorDefDirective, BreadcrumbTitle, Breadcrumbs, BreadcrumbsGlobal, BreadcrumbsStore };
+//# sourceMappingURL=ngstarter-ui-components-breadcrumbs.mjs.map