@ngneers/controls 0.0.1-next.0

package/fesm2022/ngneers-controls-slider.mjs

@@ -0,0 +1,167 @@
+import * as i0 from '@angular/core';
+import { viewChild, input, computed, Component } from '@angular/core';
+import { ValueControlBase, NgnPt, provideSelf } from '@ngneers/controls/base';
+import { NgnDrag } from '@ngneers/controls/directives';
+import { sliderControlTemplate } from '@ngneers/controls-themes/templates/slider';
+
+/**
+ * @category control
+ */
+class NgnSlider extends ValueControlBase {
+    theme = this.injectThemeTemplate(sliderControlTemplate, {
+        root: true,
+        invalid: () => this.invalid(),
+        horizontal: () => !this.vertical(),
+        vertical: () => this.vertical(),
+    });
+    _track = viewChild.required('track');
+    /**
+     * The minimum value of the slider.
+     * @default 0
+     */
+    min = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the slider is oriented vertically instead of horizontally.
+     * @default false
+     */
+    vertical = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "vertical" }] : /* istanbul ignore next */ []));
+    /**
+     * The maximum value of the slider.
+     * @default 100
+     */
+    max = input(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /**
+     * The increment between selectable values.
+     * @default 1
+     */
+    step = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /**
+     * The value text representation for accessibility.
+     * If both {@link valueText} and {@link valueTextFn} are provided, {@link valueText} takes precedence.
+     */
+    valueText = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "valueText" }] : /* istanbul ignore next */ []));
+    /**
+     * A function that generates the value text representation for accessibility.
+     * If both {@link valueText} and {@link valueTextFn} are provided, {@link valueText} takes precedence.
+     */
+    valueTextFn = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "valueTextFn" }] : /* istanbul ignore next */ []));
+    left = computed(() => {
+        const percent = ((this.value() - this.min()) / (this.max() - this.min())) * 100;
+        return Math.min(100, Math.max(0, percent));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "left" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+    }
+    valueTextValue = computed(() => {
+        const valueText = this.valueText();
+        if (valueText) {
+            return valueText;
+        }
+        const valueTextFn = this.valueTextFn();
+        if (valueTextFn) {
+            return valueTextFn(this.value());
+        }
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueTextValue" }] : /* istanbul ignore next */ []));
+    onDragged(delta) {
+        if (this.readonly() || this.disabled()) {
+            return;
+        }
+        const cursorPos = this.vertical() ? delta.absoluteY : delta.absoluteX;
+        this.dragToPosition(cursorPos);
+    }
+    dragToPosition(cursorPos) {
+        const trackEl = this._track().nativeElement;
+        const trackRect = trackEl.getBoundingClientRect();
+        const trackStart = this.vertical() ? trackRect.top : trackRect.left;
+        const trackLength = this.vertical() ? trackRect.height : trackRect.width;
+        const positionInTrack = cursorPos - trackStart;
+        const correctedPositionInTrack = this.vertical()
+            ? trackLength - positionInTrack
+            : positionInTrack;
+        const positionPercent = correctedPositionInTrack / trackLength;
+        const newValueUnstepped = this.min() + positionPercent * (this.max() - this.min());
+        const steppedValue = Math.round((newValueUnstepped - this.min()) / this.step()) * this.step() + this.min();
+        this.value.set(this.clampValue(steppedValue));
+    }
+    clampValue(value) {
+        return Math.min(this.max(), Math.max(this.min(), value));
+    }
+    onDragEnd() { }
+    onKeyDown(event) {
+        if (this.readonly() || this.disabled()) {
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                this.value.update(v => this.clampValue(v - this.step()));
+                event.preventDefault();
+                break;
+            case 'ArrowRight':
+            case 'ArrowUp':
+                this.value.update(v => this.clampValue(v + this.step()));
+                event.preventDefault();
+                break;
+            case 'Home':
+                this.value.set(this.min());
+                this.onDragEnd();
+                event.preventDefault();
+                break;
+            case 'End':
+                this.value.set(this.max());
+                this.onDragEnd();
+                event.preventDefault();
+                break;
+        }
+    }
+    thumbClicked(event) {
+        event.stopPropagation();
+    }
+    trackClicked(event) {
+        if (this.readonly() || this.disabled()) {
+            return;
+        }
+        const trackEl = this._track().nativeElement;
+        const trackRect = trackEl.getBoundingClientRect();
+        const clickPosition = this.vertical()
+            ? event.clientY - trackRect.top
+            : event.clientX - trackRect.left;
+        this.dragToPosition(this.vertical() ? trackRect.top + clickPosition : trackRect.left + clickPosition);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: NgnSlider, isStandalone: true, selector: "ngn-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, valueText: { classPropertyName: "valueText", publicName: "valueText", isSignal: true, isRequired: false, transformFunction: null }, valueTextFn: { classPropertyName: "valueTextFn", publicName: "valueTextFn", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "slider" }, listeners: { "keydown": "onKeyDown($event)", "blur": "touched.set(true)" }, properties: { "attr.aria-valuemin": "min()", "attr.aria-valuemax": "max()", "attr.aria-valuenow": "value()", "attr.aria-readonly": "readonly() ? \"true\" : null", "attr.disabled": "disabled() ? \"\" : null", "attr.aria-labelledby": "labelledBy()", "attr.aria-label": "label()", "attr.aria-orientation": "vertical() ? \"vertical\" : \"horizontal\"", "attr.aria-valuetext": "valueTextValue()", "tabindex": "disabled() ? -1 : 0" } }, providers: [provideSelf(NgnSlider)], viewQueries: [{ propertyName: "_track", first: true, predicate: ["track"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<div #track [ptInt]=\"this\" [ptClass]=\"'track'\" (click)=\"trackClicked($event)\">\n  <div [ptInt]=\"this\" [ptClass]=\"'fill'\" [style.--valuePercent.%]=\"left()\"></div>\n  <div\n    #thumb\n    [ptInt]=\"this\"\n    [ptClass]=\"'thumb'\"\n    ngnDrag\n    (dragged)=\"onDragged($event)\"\n    (dragEnd)=\"onDragEnd()\"\n    [style.--valuePercent.%]=\"left()\"\n    (click)=\"thumbClicked($event)\"\n  ></div>\n</div>\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass", "ptDep"] }, { kind: "directive", type: NgnDrag, selector: "[ngnDrag]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnSlider, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-slider', imports: [NgnPt, NgnDrag], providers: [provideSelf(NgnSlider)], host: {
+                        role: 'slider',
+                        '[attr.aria-valuemin]': 'min()',
+                        '[attr.aria-valuemax]': 'max()',
+                        '[attr.aria-valuenow]': 'value()',
+                        '[attr.aria-readonly]': 'readonly() ? "true" : null',
+                        '[attr.disabled]': 'disabled() ? "" : null',
+                        '[attr.aria-labelledby]': 'labelledBy()',
+                        '[attr.aria-label]': 'label()',
+                        '[attr.aria-orientation]': 'vertical() ? "vertical" : "horizontal"',
+                        '[attr.aria-valuetext]': 'valueTextValue()',
+                        '[tabindex]': 'disabled() ? -1 : 0',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(blur)': 'touched.set(true)',
+                    }, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<div #track [ptInt]=\"this\" [ptClass]=\"'track'\" (click)=\"trackClicked($event)\">\n  <div [ptInt]=\"this\" [ptClass]=\"'fill'\" [style.--valuePercent.%]=\"left()\"></div>\n  <div\n    #thumb\n    [ptInt]=\"this\"\n    [ptClass]=\"'thumb'\"\n    ngnDrag\n    (dragged)=\"onDragged($event)\"\n    (dragEnd)=\"onDragEnd()\"\n    [style.--valuePercent.%]=\"left()\"\n    (click)=\"thumbClicked($event)\"\n  ></div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { _track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], valueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueText", required: false }] }], valueTextFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTextFn", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgnSlider };
+//# sourceMappingURL=ngneers-controls-slider.mjs.map

package/fesm2022/ngneers-controls-slider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngneers-controls-slider.mjs","sources":["../../src/slider/slider.ts","../../src/slider/slider.html","../../src/slider/ngneers-controls-slider.ts"],"sourcesContent":["import { Component, input, viewChild, ElementRef, computed } from '@angular/core';\nimport { NgnPt, provideSelf, ValueControlBase } from '@ngneers/controls/base';\nimport { NgnDrag, type NgnDragInfo } from '@ngneers/controls/directives';\nimport { sliderControlTemplate } from '@ngneers/controls-themes/templates/slider';\n\n/**\n * @category control\n */\n@Component({\n  selector: 'ngn-slider',\n  templateUrl: './slider.html',\n  imports: [NgnPt, NgnDrag],\n  providers: [provideSelf(NgnSlider)],\n  host: {\n    role: 'slider',\n    '[attr.aria-valuemin]': 'min()',\n    '[attr.aria-valuemax]': 'max()',\n    '[attr.aria-valuenow]': 'value()',\n    '[attr.aria-readonly]': 'readonly() ? \"true\" : null',\n    '[attr.disabled]': 'disabled() ? \"\" : null',\n    '[attr.aria-labelledby]': 'labelledBy()',\n    '[attr.aria-label]': 'label()',\n    '[attr.aria-orientation]': 'vertical() ? \"vertical\" : \"horizontal\"',\n    '[attr.aria-valuetext]': 'valueTextValue()',\n    '[tabindex]': 'disabled() ? -1 : 0',\n    '(keydown)': 'onKeyDown($event)',\n    '(blur)': 'touched.set(true)',\n  },\n})\nexport class NgnSlider extends ValueControlBase<'slider', number> {\n  protected readonly theme = this.injectThemeTemplate(sliderControlTemplate, {\n    root: true,\n    invalid: () => this.invalid(),\n    horizontal: () => !this.vertical(),\n    vertical: () => this.vertical(),\n  });\n\n  private readonly _track = viewChild.required<ElementRef<HTMLDivElement>>('track');\n\n  /**\n   * The minimum value of the slider.\n   * @default 0\n   */\n  public readonly min = input<number>(0);\n\n  /**\n   * Whether the slider is oriented vertically instead of horizontally.\n   * @default false\n   */\n  public readonly vertical = input<boolean>(false);\n\n  /**\n   * The maximum value of the slider.\n   * @default 100\n   */\n  public readonly max = input<number>(100);\n\n  /**\n   * The increment between selectable values.\n   * @default 1\n   */\n  public readonly step = input<number>(1);\n\n  /**\n   * The value text representation for accessibility.\n   * If both {@link valueText} and {@link valueTextFn} are provided, {@link valueText} takes precedence.\n   */\n  public readonly valueText = input<string>();\n\n  /**\n   * A function that generates the value text representation for accessibility.\n   * If both {@link valueText} and {@link valueTextFn} are provided, {@link valueText} takes precedence.\n   */\n  public readonly valueTextFn = input<(value: number) => string>();\n\n  protected readonly left = computed(() => {\n    const percent = ((this.value() - this.min()) / (this.max() - this.min())) * 100;\n    return Math.min(100, Math.max(0, percent));\n  });\n\n  constructor() {\n    super();\n  }\n\n  protected readonly valueTextValue = computed(() => {\n    const valueText = this.valueText();\n    if (valueText) {\n      return valueText;\n    }\n    const valueTextFn = this.valueTextFn();\n    if (valueTextFn) {\n      return valueTextFn(this.value());\n    }\n    return null;\n  });\n\n  protected onDragged(delta: NgnDragInfo) {\n    if (this.readonly() || this.disabled()) {\n      return;\n    }\n    const cursorPos = this.vertical() ? delta.absoluteY : delta.absoluteX;\n    this.dragToPosition(cursorPos);\n  }\n\n  private dragToPosition(cursorPos: number) {\n    const trackEl = this._track().nativeElement;\n    const trackRect = trackEl.getBoundingClientRect();\n    const trackStart = this.vertical() ? trackRect.top : trackRect.left;\n    const trackLength = this.vertical() ? trackRect.height : trackRect.width;\n    const positionInTrack = cursorPos - trackStart;\n    const correctedPositionInTrack = this.vertical()\n      ? trackLength - positionInTrack\n      : positionInTrack;\n    const positionPercent = correctedPositionInTrack / trackLength;\n    const newValueUnstepped = this.min() + positionPercent * (this.max() - this.min());\n    const steppedValue =\n      Math.round((newValueUnstepped - this.min()) / this.step()) * this.step() + this.min();\n    this.value.set(this.clampValue(steppedValue));\n  }\n\n  private clampValue(value: number): number {\n    return Math.min(this.max(), Math.max(this.min(), value));\n  }\n\n  protected onDragEnd() {}\n\n  protected onKeyDown(event: KeyboardEvent) {\n    if (this.readonly() || this.disabled()) {\n      return;\n    }\n    switch (event.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        this.value.update(v => this.clampValue(v - this.step()));\n        event.preventDefault();\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        this.value.update(v => this.clampValue(v + this.step()));\n        event.preventDefault();\n        break;\n      case 'Home':\n        this.value.set(this.min());\n        this.onDragEnd();\n        event.preventDefault();\n        break;\n      case 'End':\n        this.value.set(this.max());\n        this.onDragEnd();\n        event.preventDefault();\n        break;\n    }\n  }\n\n  protected thumbClicked(event: PointerEvent) {\n    event.stopPropagation();\n  }\n  protected trackClicked(event: PointerEvent) {\n    if (this.readonly() || this.disabled()) {\n      return;\n    }\n    const trackEl = this._track().nativeElement;\n    const trackRect = trackEl.getBoundingClientRect();\n    const clickPosition = this.vertical()\n      ? event.clientY - trackRect.top\n      : event.clientX - trackRect.left;\n    this.dragToPosition(\n      this.vertical() ? trackRect.top + clickPosition : trackRect.left + clickPosition\n    );\n  }\n}\n","<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<div #track [ptInt]=\"this\" [ptClass]=\"'track'\" (click)=\"trackClicked($event)\">\n  <div [ptInt]=\"this\" [ptClass]=\"'fill'\" [style.--valuePercent.%]=\"left()\"></div>\n  <div\n    #thumb\n    [ptInt]=\"this\"\n    [ptClass]=\"'thumb'\"\n    ngnDrag\n    (dragged)=\"onDragged($event)\"\n    (dragEnd)=\"onDragEnd()\"\n    [style.--valuePercent.%]=\"left()\"\n    (click)=\"thumbClicked($event)\"\n  ></div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngneers-controls-snackbar.mjs

@@ -0,0 +1,414 @@
+import * as i0 from '@angular/core';
+import { input, Directive, inject, ElementRef, output, booleanAttribute, computed, signal, Component, viewChildren, afterNextRender, ApplicationRef, createComponent, Injectable, InjectionToken, runInInjectionContext } from '@angular/core';
+import { Platform } from '@ngneers/controls/api/ng';
+import { NgnError } from '@ngneers/controls/utils';
+import { NotificationRegionController, injectOrThrow } from '@ngneers/controls/utils-ng';
+import { NgnBase, NgnPt, provideSelf } from '@ngneers/controls/base';
+import { I18n } from '@ngneers/controls/i18n';
+import { snackbarControlTemplate } from '@ngneers/controls-themes/templates/snackbar';
+import { NgTemplateOutlet } from '@angular/common';
+import { NgnButton, NgnActionButton } from '@ngneers/controls/button';
+import { NgnIcon } from '@ngneers/controls/icon';
+
+const DEFAULT_SNACKBAR_OPTIONS = {
+    closable: false,
+    autoHide: 5000,
+    showProgress: true,
+    pauseOnHover: true,
+};
+
+/**
+ * Template inputs for {@link NgnSnackbar}, extracted into a dedicated base class so the
+ * component itself stays focused on behavior.
+ */
+class SnackbarTemplates extends NgnBase {
+    /** Custom template for the snackbar body, rendered in place of the plain `content` string. */
+    templateContent = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "templateContent" }] : /* istanbul ignore next */ []));
+    /** Custom template for the snackbar header, rendered in place of the plain `header` string. */
+    templateHeader = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "templateHeader" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SnackbarTemplates, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: SnackbarTemplates, isStandalone: true, inputs: { templateContent: { classPropertyName: "templateContent", publicName: "templateContent", isSignal: true, isRequired: false, transformFunction: null }, templateHeader: { classPropertyName: "templateHeader", publicName: "templateHeader", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SnackbarTemplates, decorators: [{
+            type: Directive
+        }], propDecorators: { templateContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateContent", required: false }] }], templateHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateHeader", required: false }] }] } });
+
+/**
+ * @category control
+ */
+class NgnSnackbar extends SnackbarTemplates {
+    theme = this.injectThemeTemplate(snackbarControlTemplate, 'root');
+    i18n = inject(I18n).translations;
+    _host = inject(ElementRef);
+    /** Heading text shown at the top of the snackbar. Overridden by {@link templateHeader}. */
+    header = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "header" }] : /* istanbul ignore next */ []));
+    /** Body text of the snackbar. Overridden by {@link templateContent}. */
+    content = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "content" }] : /* istanbul ignore next */ []));
+    /** Icon shown at the start of the snackbar. */
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Icon used for the close button when {@link closable} is enabled. */
+    iconClose = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "iconClose" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to render a close button that lets the user dismiss the snackbar.
+     * @default false
+     */
+    closable = input(DEFAULT_SNACKBAR_OPTIONS.closable, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
+    /**
+     * Time in ms before the snackbar auto-dismisses, or `false` to keep it open
+     * until dismissed manually.
+     * @default 5000
+     */
+    autoHide = input(DEFAULT_SNACKBAR_OPTIONS.autoHide, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoHide" }] : /* istanbul ignore next */ []));
+    /** Emitted when the snackbar is dismissed (by the timer, close button, or an action). */
+    closeSnackbar = output();
+    /**
+     * Action buttons rendered at the end of the snackbar. Clicking any action always
+     * dismisses the snackbar; its `action` callback fires first. Import the config
+     * type from `@ngneers/controls/api`.
+     */
+    actions = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "actions" }] : /* istanbul ignore next */ []));
+    /**
+     * Shows a thin progress bar at the bottom of the snackbar that depletes over the
+     * {@link autoHide} duration.
+     * @default true
+     */
+    showProgress = input(DEFAULT_SNACKBAR_OPTIONS.showProgress ?? true, { ...(ngDevMode ? { debugName: "showProgress" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Pauses the auto-hide timer and progress bar while the snackbar is hovered,
+     * resuming from the current position on mouse leave.
+     * @default true
+     */
+    pauseOnHover = input(DEFAULT_SNACKBAR_OPTIONS.pauseOnHover ?? true, { ...(ngDevMode ? { debugName: "pauseOnHover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Politeness of the live region used to announce the snackbar to assistive tech.
+     * When omitted, it is derived from {@link color}: `error`/`warning` announce as
+     * `assertive` (mapped to `role="alert"`), everything else as `polite`
+     * (`role="status"`).
+     */
+    ariaLive = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLive" }] : /* istanbul ignore next */ []));
+    /** Resolved live-region politeness — explicit input, else derived from color. */
+    liveMode = computed(() => {
+        const explicit = this.ariaLive();
+        if (explicit) {
+            return explicit;
+        }
+        const color = this.color();
+        return color === 'error' || color === 'warning' ? 'assertive' : 'polite';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "liveMode" }] : /* istanbul ignore next */ []));
+    /** Landmark role paired with {@link liveMode} — `alert` when assertive, else `status`. */
+    role = computed(() => (this.liveMode() === 'assertive' ? 'alert' : 'status'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    /**
+     * A visually-hidden severity prefix (e.g. "Error:") announced before the header
+     * so screen-reader users get the semantic that sighted users read from color.
+     * Only emitted for the known semantic colors.
+     */
+    severityLabel = computed(() => {
+        switch (this.color()) {
+            case 'error':
+                return this.i18n['snackbar_severity_error']();
+            case 'warning':
+                return this.i18n['snackbar_severity_warning']();
+            case 'success':
+                return this.i18n['snackbar_severity_success']();
+            case 'info':
+                return this.i18n['snackbar_severity_info']();
+            default:
+                return undefined;
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "severityLabel" }] : /* istanbul ignore next */ []));
+    paused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "paused" }] : /* istanbul ignore next */ []));
+    /** Auto-hide duration in ms, or 0 when auto-hide is disabled. Drives the progress bar. */
+    autoHideMs = computed(() => {
+        const autoHide = this.autoHide();
+        return typeof autoHide === 'number' && autoHide > 0 ? autoHide : 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoHideMs" }] : /* istanbul ignore next */ []));
+    _closeTimeout;
+    _remaining = 0;
+    _startedAt = 0;
+    _hovered = false;
+    _focused = false;
+    _regionPaused = false;
+    /** Element that had focus before the user moved into the snackbar; focus returns here on close. */
+    _returnFocus = null;
+    ngOnInit() {
+        // autoHideMs() is the single source of truth for "is auto-hide enabled".
+        this._remaining = this.autoHideMs();
+        this.startHideTimer();
+    }
+    startHideTimer() {
+        // Idempotent: a timer already running must not be restarted (would reset _remaining tracking).
+        if (this._closeTimeout !== undefined) {
+            return;
+        }
+        if (this._remaining <= 0) {
+            // Distinguish "auto-hide disabled" (never started, _startedAt still 0) from
+            // "a pause consumed all the remaining time" (_startedAt > 0). In the latter
+            // case the snackbar is overdue, so close now rather than leave it stuck open
+            // with no active timer — otherwise a non-closable snackbar can never dismiss.
+            if (this._startedAt > 0) {
+                this.close();
+            }
+            return;
+        }
+        this._startedAt = performance.now();
+        this.paused.set(false);
+        this._closeTimeout = setTimeout(() => this.close(), this._remaining);
+    }
+    pauseHideTimer() {
+        if (this._closeTimeout === undefined) {
+            return;
+        }
+        clearTimeout(this._closeTimeout);
+        this._closeTimeout = undefined;
+        this._remaining -= performance.now() - this._startedAt;
+        this.paused.set(true);
+    }
+    /**
+     * Pause the auto-hide timer while the snackbar is hovered (opt-in via
+     * {@link pauseOnHover}), focused (always — a WCAG 2.2.1 requirement so keyboard
+     * and screen-reader users can read it), or while the whole region holds focus,
+     * resuming once none holds.
+     */
+    updatePause() {
+        const shouldPause = this._regionPaused || (this.pauseOnHover() && this._hovered) || this._focused;
+        if (shouldPause) {
+            this.pauseHideTimer();
+        }
+        else {
+            this.startHideTimer();
+        }
+    }
+    /** Move DOM focus to the snackbar root (used by the region's roving/hotkey navigation). */
+    focus() {
+        this._host.nativeElement.focus();
+    }
+    /** Freeze the timer because the notification region as a whole holds focus. */
+    regionPause() {
+        this._regionPaused = true;
+        this.updatePause();
+    }
+    /** Release the region-level freeze; resumes unless still hovered/focused. */
+    regionResume() {
+        this._regionPaused = false;
+        this.updatePause();
+    }
+    // Only ever called immediately before the snackbar is removed (by the timer,
+    // the close button, or an action), so it need not reset paused/_remaining —
+    // the component is torn down right after. Revisit if close() ever keeps the
+    // snackbar mounted.
+    close() {
+        this.restoreFocus();
+        this.closeSnackbar.emit();
+        if (this._closeTimeout !== undefined) {
+            clearTimeout(this._closeTimeout);
+        }
+    }
+    /** Return focus to the pre-snackbar element when it is dismissed while focused within. */
+    restoreFocus() {
+        const host = this._host.nativeElement;
+        if (host.contains(document.activeElement) && this._returnFocus?.isConnected) {
+            this._returnFocus.focus();
+        }
+    }
+    onEscape() {
+        if (this.closable()) {
+            this.close();
+        }
+    }
+    mouseEnter() {
+        this._hovered = true;
+        this.updatePause();
+    }
+    mouseLeave() {
+        this._hovered = false;
+        this.updatePause();
+    }
+    focusEnter(event) {
+        const from = event.relatedTarget;
+        if (from && !this._host.nativeElement.contains(from)) {
+            this._returnFocus = from;
+        }
+        this._focused = true;
+        this.updatePause();
+    }
+    focusLeave(event) {
+        // focusout bubbles; ignore focus moving between the snackbar's own children.
+        const next = event.relatedTarget;
+        if (next && this._host.nativeElement.contains(next)) {
+            return;
+        }
+        this._focused = false;
+        this.updatePause();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnSnackbar, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NgnSnackbar, isStandalone: true, selector: "ngn-snackbar", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconClose: { classPropertyName: "iconClose", publicName: "iconClose", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, autoHide: { classPropertyName: "autoHide", publicName: "autoHide", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeSnackbar: "closeSnackbar" }, host: { attributes: { "aria-atomic": "true" }, listeners: { "mouseenter": "mouseEnter()", "mouseleave": "mouseLeave()", "focusin": "focusEnter($event)", "focusout": "focusLeave($event)", "keydown.escape": "onEscape()" }, properties: { "animate.enter": "theme.class('anim-enter')", "animate.leave": "theme.class('anim-leave')", "attr.role": "role()", "attr.aria-live": "liveMode()" } }, providers: [provideSelf(NgnSnackbar)], usesInheritance: true, ngImport: i0, template: "<div [ptInt]=\"this\" [ptClass]=\"'body'\">\n  @if (severityLabel(); as severityLabel) {\n    <span [ptInt]=\"this\" [ptClass]=\"'sr-only'\">{{ severityLabel }}</span>\n  }\n  @if (templateHeader(); as headerTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"headerTemplate\"\n      [ngTemplateOutletContext]=\"{\n        header: header(),\n        closable: !!closable(),\n        closeSnackbar: close.bind(this),\n      }\"\n    ></ng-container>\n  } @else {\n    <div [ptInt]=\"this\" [ptClass]=\"'defaultHeader'\">\n      <span [ptInt]=\"this\" [ptClass]=\"'defaultHeaderText'\">\n        @if (icon(); as icon) {\n          <ngn-icon [icon]=\"icon\" [attr.aria-hidden]=\"true\" />\n        }\n        {{ header() }}\n      </span>\n    </div>\n  }\n  @if (templateContent(); as contentTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"contentTemplate\"\n      [ngTemplateOutletContext]=\"{\n        content: content(),\n      }\"\n    ></ng-container>\n  } @else {\n    <div [ptInt]=\"this\" [ptClass]=\"'defaultContent'\">\n      {{ content() }}\n    </div>\n  }\n</div>\n@if (actions()?.length || (!templateHeader() && closable())) {\n  <div [ptInt]=\"this\" [ptClass]=\"'actions'\">\n    @for (action of actions(); track $index) {\n      <ngn-action-button [config]=\"action\" (clicked)=\"close()\" />\n    }\n    @if (!templateHeader() && closable()) {\n      <button\n        ngnButton\n        kind=\"icon\"\n        [ptInt]=\"this\"\n        [ptClass]=\"'closeButton'\"\n        [attr.aria-label]=\"i18n['snackbar_close']()\"\n        (click)=\"close()\"\n      >\n        <ngn-icon [defaultIcon]=\"'snackbar-close'\" [icon]=\"iconClose()\" [attr.aria-hidden]=\"true\" />\n      </button>\n    }\n  </div>\n}\n@if (showProgress() && autoHideMs() > 0) {\n  <div\n    [ptInt]=\"this\"\n    [ptClass]=\"'progressBar'\"\n    aria-hidden=\"true\"\n    [style.animationDuration.ms]=\"autoHideMs()\"\n    [style.animationPlayState]=\"paused() ? 'paused' : 'running'\"\n  ></div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass", "ptDep"] }, { kind: "directive", type: NgnButton, selector: "button[ngnButton], a[ngnButton]", inputs: ["ngnButtonInline"], exportAs: ["ngnButton"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }, { kind: "component", type: NgnActionButton, selector: "ngn-action-button", inputs: ["config", "inline"], outputs: ["clicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnSnackbar, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-snackbar', imports: [NgTemplateOutlet, NgnPt, NgnButton, NgnIcon, NgnActionButton], providers: [provideSelf(NgnSnackbar)], host: {
+                        '(mouseenter)': 'mouseEnter()',
+                        '(mouseleave)': 'mouseLeave()',
+                        '(focusin)': 'focusEnter($event)',
+                        '(focusout)': 'focusLeave($event)',
+                        '(keydown.escape)': 'onEscape()',
+                        '[animate.enter]': "theme.class('anim-enter')",
+                        '[animate.leave]': "theme.class('anim-leave')",
+                        '[attr.role]': 'role()',
+                        '[attr.aria-live]': 'liveMode()',
+                        'aria-atomic': 'true',
+                    }, template: "<div [ptInt]=\"this\" [ptClass]=\"'body'\">\n  @if (severityLabel(); as severityLabel) {\n    <span [ptInt]=\"this\" [ptClass]=\"'sr-only'\">{{ severityLabel }}</span>\n  }\n  @if (templateHeader(); as headerTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"headerTemplate\"\n      [ngTemplateOutletContext]=\"{\n        header: header(),\n        closable: !!closable(),\n        closeSnackbar: close.bind(this),\n      }\"\n    ></ng-container>\n  } @else {\n    <div [ptInt]=\"this\" [ptClass]=\"'defaultHeader'\">\n      <span [ptInt]=\"this\" [ptClass]=\"'defaultHeaderText'\">\n        @if (icon(); as icon) {\n          <ngn-icon [icon]=\"icon\" [attr.aria-hidden]=\"true\" />\n        }\n        {{ header() }}\n      </span>\n    </div>\n  }\n  @if (templateContent(); as contentTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"contentTemplate\"\n      [ngTemplateOutletContext]=\"{\n        content: content(),\n      }\"\n    ></ng-container>\n  } @else {\n    <div [ptInt]=\"this\" [ptClass]=\"'defaultContent'\">\n      {{ content() }}\n    </div>\n  }\n</div>\n@if (actions()?.length || (!templateHeader() && closable())) {\n  <div [ptInt]=\"this\" [ptClass]=\"'actions'\">\n    @for (action of actions(); track $index) {\n      <ngn-action-button [config]=\"action\" (clicked)=\"close()\" />\n    }\n    @if (!templateHeader() && closable()) {\n      <button\n        ngnButton\n        kind=\"icon\"\n        [ptInt]=\"this\"\n        [ptClass]=\"'closeButton'\"\n        [attr.aria-label]=\"i18n['snackbar_close']()\"\n        (click)=\"close()\"\n      >\n        <ngn-icon [defaultIcon]=\"'snackbar-close'\" [icon]=\"iconClose()\" [attr.aria-hidden]=\"true\" />\n      </button>\n    }\n  </div>\n}\n@if (showProgress() && autoHideMs() > 0) {\n  <div\n    [ptInt]=\"this\"\n    [ptClass]=\"'progressBar'\"\n    aria-hidden=\"true\"\n    [style.animationDuration.ms]=\"autoHideMs()\"\n    [style.animationPlayState]=\"paused() ? 'paused' : 'running'\"\n  ></div>\n}\n" }]
+        }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconClose", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], autoHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHide", required: false }] }], closeSnackbar: [{ type: i0.Output, args: ["closeSnackbar"] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], showProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "showProgress", required: false }] }], pauseOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseOnHover", required: false }] }], ariaLive: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLive", required: false }] }] } });
+
+/**
+ * The host component that renders snackbars.
+ */
+class NgnSnackbarHost extends NgnBase {
+    theme = this.injectThemeTemplate(snackbarControlTemplate, 'host');
+    i18n = inject(I18n).translations;
+    _snackbarManager = inject(NgnSnackbarManager);
+    _el = inject(ElementRef);
+    _items = viewChildren(NgnSnackbar, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
+    // The first snackbar is anchored at the bottom; each new one stacks above it (mirroring how a
+    // second toast appears below the first). Paired with the host's `column-reverse`, the first item
+    // in DOM order sits at the bottom anchor, so a leaving item's following siblings are exactly the
+    // ones that reflow toward the anchor — keeping the `& ~ *` leave-shift animation correct.
+    snackbars = this._snackbarManager.snackbars;
+    /**
+     * Drives keyboard access to the region: `F6` jumps focus to the newest snackbar,
+     * arrow keys rove between them, and focus anywhere inside pauses every timer.
+     */
+    region = new NotificationRegionController(this._el.nativeElement, () => this._items());
+    constructor() {
+        super();
+        afterNextRender(() => {
+            this._el.nativeElement.showPopover();
+        });
+    }
+    removeSnackbar(id) {
+        this._snackbarManager.removeSnackbar(id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnSnackbarHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NgnSnackbarHost, isStandalone: true, selector: "ngn-snackbar-host", host: { attributes: { "role": "region" }, listeners: { "document:keydown": "region.handleGlobalKeydown($event)", "keydown": "region.handleKeydown($event)", "focusin": "region.handleFocusIn()", "focusout": "region.handleFocusOut($event)" }, properties: { "attr.popover": "\"manual\"", "attr.aria-label": "i18n['snackbar_region']()" } }, providers: [provideSelf(NgnSnackbarHost)], viewQueries: [{ propertyName: "_items", predicate: NgnSnackbar, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@for (snackbar of snackbars(); track snackbar.id; let i = $index) {\n  <ngn-snackbar\n    [attr.tabindex]=\"region.tabbableIndex() === i ? 0 : -1\"\n    [header]=\"snackbar.header\"\n    [content]=\"snackbar.content\"\n    [color]=\"snackbar.color\"\n    [icon]=\"snackbar.icon\"\n    [autoHide]=\"snackbar.autoHide\"\n    [actions]=\"snackbar.actions\"\n    [showProgress]=\"!!snackbar.showProgress\"\n    [pauseOnHover]=\"!!snackbar.pauseOnHover\"\n    [ariaLive]=\"snackbar.ariaLive\"\n    [templateContent]=\"snackbar.contentTemplate\"\n    [templateHeader]=\"snackbar.headerTemplate\"\n    [closable]=\"!!snackbar.closable\"\n    (closeSnackbar)=\"removeSnackbar(snackbar.id)\"\n  />\n}\n", dependencies: [{ kind: "component", type: NgnSnackbar, selector: "ngn-snackbar", inputs: ["header", "content", "icon", "iconClose", "closable", "autoHide", "actions", "showProgress", "pauseOnHover", "ariaLive"], outputs: ["closeSnackbar"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnSnackbarHost, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-snackbar-host', imports: [NgnSnackbar], providers: [provideSelf(NgnSnackbarHost)], host: {
+                        '[attr.popover]': '"manual"',
+                        role: 'region',
+                        '[attr.aria-label]': "i18n['snackbar_region']()",
+                        '(document:keydown)': 'region.handleGlobalKeydown($event)',
+                        '(keydown)': 'region.handleKeydown($event)',
+                        '(focusin)': 'region.handleFocusIn()',
+                        '(focusout)': 'region.handleFocusOut($event)',
+                    }, template: "@for (snackbar of snackbars(); track snackbar.id; let i = $index) {\n  <ngn-snackbar\n    [attr.tabindex]=\"region.tabbableIndex() === i ? 0 : -1\"\n    [header]=\"snackbar.header\"\n    [content]=\"snackbar.content\"\n    [color]=\"snackbar.color\"\n    [icon]=\"snackbar.icon\"\n    [autoHide]=\"snackbar.autoHide\"\n    [actions]=\"snackbar.actions\"\n    [showProgress]=\"!!snackbar.showProgress\"\n    [pauseOnHover]=\"!!snackbar.pauseOnHover\"\n    [ariaLive]=\"snackbar.ariaLive\"\n    [templateContent]=\"snackbar.contentTemplate\"\n    [templateHeader]=\"snackbar.headerTemplate\"\n    [closable]=\"!!snackbar.closable\"\n    (closeSnackbar)=\"removeSnackbar(snackbar.id)\"\n  />\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { _items: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => NgnSnackbar), { isSignal: true }] }] } });
+
+class NgnSnackbarManager {
+    _snackbars = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_snackbars" }] : /* istanbul ignore next */ []));
+    _appRef = inject(ApplicationRef);
+    _userDefaults = injectOrThrow(NGN_SNACKBAR_USER_DEFAULTS, 'NgnSnackbarManager', 'Failed to inject NGN_SNACKBAR_USER_DEFAULTS, make sure to use withSnackbars() to provide ngn snackbars!');
+    _nextId = 0;
+    snackbars = this._snackbars.asReadonly();
+    _component;
+    constructor() {
+        if (!inject(Platform).isBrowser) {
+            return;
+        }
+        // Defer creation to avoid issues with Angular's injection tree during app initialization
+        queueMicrotask(() => {
+            // Create and attach the snackbar host component to the application's root
+            this._component = createComponent(NgnSnackbarHost, {
+                environmentInjector: this._appRef.injector,
+            });
+            this._appRef.attachView(this._component.hostView);
+            const hostEl = this._component.location.nativeElement;
+            const appRootEl = this._appRef.components[0]?.location.nativeElement;
+            if (!appRootEl) {
+                throw new NgnError('NgnSnackbarManager', 'Failed to find application root element to attach snackbar host!');
+            }
+            appRootEl.appendChild(hostEl);
+        });
+    }
+    ngOnDestroy() {
+        if (this._component) {
+            this._appRef.detachView(this._component.hostView);
+            this._component.destroy();
+            this._component = undefined;
+        }
+    }
+    removeSnackbar(id) {
+        this._snackbars.update(snackbars => snackbars.filter(t => t.id !== id));
+    }
+    addSnackbar(options) {
+        const id = this._nextId++;
+        const snackbar = {
+            ...DEFAULT_SNACKBAR_OPTIONS,
+            ...this._userDefaults,
+            ...options,
+            id,
+        };
+        this._snackbars.update(snackbars => [...snackbars, snackbar]);
+        return id;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnSnackbarManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnSnackbarManager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnSnackbarManager, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+const NGN_SNACKBAR_USER_DEFAULTS = new InjectionToken('NGN_SNACKBAR_USER_DEFAULTS');
+function withSnackbars(defaultOptions) {
+    return {
+        providers: [
+            NgnSnackbarManager,
+            {
+                provide: NGN_SNACKBAR_USER_DEFAULTS,
+                useValue: defaultOptions || {},
+            },
+        ],
+    };
+}
+
+class SnackbarCreator {
+    _manager;
+    constructor() {
+        this._manager = injectOrThrow(NgnSnackbarManager, 'injectSnackbarCreator', 'NgnSnackbarManager not found. Make sure to use withSnackbars() to provide ngn snackbars!');
+    }
+    show(options) {
+        const id = this._manager.addSnackbar(options);
+        return {
+            hide: () => this._manager.removeSnackbar(id),
+        };
+    }
+}
+function injectSnackbarCreator(injector) {
+    if (injector) {
+        return runInInjectionContext(injector, () => injectSnackbarCreator());
+    }
+    return new SnackbarCreator();
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NGN_SNACKBAR_USER_DEFAULTS, NgnSnackbar, SnackbarCreator, injectSnackbarCreator, withSnackbars };
+//# sourceMappingURL=ngneers-controls-snackbar.mjs.map