@educarehq/solaris-components 0.2.5 → 0.2.7

package/fesm2022/educarehq-solaris-components.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Renderer2, Directive, TemplateRef, Injectable, ViewContainerRef, DestroyRef, Input, ContentChild, ViewEncapsulation, Component, EventEmitter, Output, HostBinding, ChangeDetectionStrategy, ApplicationRef, signal, computed, effect, ContentChildren, HostListener, Optional, viewChild, input, booleanAttribute, numberAttribute, afterNextRender, ViewChild, output, forwardRef, Host, InjectionToken, Injector } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { inject, ElementRef, Renderer2, Directive, TemplateRef, Injectable, ViewContainerRef, DestroyRef, Input, ContentChild, ViewEncapsulation, Component, EventEmitter, Output, HostBinding, ChangeDetectionStrategy, ApplicationRef, signal, computed, effect, ContentChildren, HostListener, Optional, booleanAttribute, InjectionToken, makeEnvironmentProviders, PLATFORM_ID, input, viewChild, numberAttribute, afterNextRender, ViewChild, output, forwardRef, Host, Injector } from '@angular/core';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { fromEvent, merge } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
 import { RouterLink } from '@angular/router';
-import { NgClass, NgTemplateOutlet, NgStyle, DOCUMENT, NgOptimizedImage } from '@angular/common';
-import { SolarisTranslationPipe } from '@educarehq/solaris-services';
+import { NgClass, NgTemplateOutlet, NgStyle, isPlatformBrowser, DOCUMENT, NgOptimizedImage } from '@angular/common';
+import { SOLARIS_TRANSLATION, SOLARIS_TRANSLATION_CONFIGURATION, SolarisTranslationPipe } from '@educarehq/solaris-services';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, NG_VALIDATORS, NgForm, FormGroupDirective, NgControl } from '@angular/forms';
 import { getCountries, getCountryCallingCode, parsePhoneNumberFromString, AsYouType } from 'libphonenumber-js';
@@ -1014,7 +1014,727 @@ function coerceBoolean$2(v) {
     return v === '' || v === true || v === 'true' || v === 1 || v === '1';
 }
 
-const PRESET_COLORS$2 = ['primary', 'success', 'warning', 'error', 'surface'];
+const PRESET_COLORS$2 = new Set([
+    'primary',
+    'surface',
+    'success',
+    'warning',
+    'error',
+    'info',
+    'gradient',
+]);
+function resolveRadius$1(v) {
+    const s = String(v).trim();
+    switch (s) {
+        case 'none':
+            return '0';
+        case 'sm':
+            return 'var(--solaris-radius-sm)';
+        case 'md':
+            return 'var(--solaris-radius-md, var(--solaris-radius-sm))';
+        case 'lg':
+            return 'var(--solaris-radius-lg, var(--solaris-radius-md, var(--solaris-radius-sm)))';
+        case 'full':
+            return 'var(--solaris-radius-full)';
+        default:
+            return s;
+    }
+}
+class ButtonDirective {
+    elementRef = inject((ElementRef));
+    _loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _iconOnly = signal(false, ...(ngDevMode ? [{ debugName: "_iconOnly" }] : []));
+    _fullWidth = signal(false, ...(ngDevMode ? [{ debugName: "_fullWidth" }] : []));
+    _badgeOverlay = signal(false, ...(ngDevMode ? [{ debugName: "_badgeOverlay" }] : []));
+    _textColor = signal(null, ...(ngDevMode ? [{ debugName: "_textColor" }] : []));
+    _customColor = signal(null, ...(ngDevMode ? [{ debugName: "_customColor" }] : []));
+    _size = signal('md', ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _variant = signal('solid', ...(ngDevMode ? [{ debugName: "_variant" }] : []));
+    _radius = signal(null, ...(ngDevMode ? [{ debugName: "_radius" }] : []));
+    _color = signal('primary', ...(ngDevMode ? [{ debugName: "_color" }] : []));
+    isAnchor = computed(() => this.elementRef.nativeElement.tagName.toLowerCase() === 'a', ...(ngDevMode ? [{ debugName: "isAnchor" }] : []));
+    set size(v) {
+        if (v)
+            this._size.set(v);
+    }
+    set variant(v) {
+        if (v)
+            this._variant.set(v);
+    }
+    set color(v) {
+        if (v == null || String(v).trim() === '')
+            return;
+        const value = String(v).trim();
+        if (PRESET_COLORS$2.has(value)) {
+            this._color.set(value);
+            this._customColor.set(null);
+        }
+        else {
+            this._color.set('custom');
+            this._customColor.set(value);
+        }
+    }
+    set textColor(v) {
+        const value = v == null || String(v).trim() === '' ? null : String(v).trim();
+        this._textColor.set(value);
+    }
+    set radius(v) {
+        const value = v == null || String(v).trim() === '' ? null : (v);
+        this._radius.set(value);
+    }
+    set loading(v) {
+        this._loading.set(v);
+    }
+    set iconOnly(v) {
+        this._iconOnly.set(v);
+    }
+    set disabled(v) {
+        this._disabled.set(v);
+    }
+    set fullWidth(v) {
+        this._fullWidth.set(v);
+    }
+    set badgeOverlay(v) {
+        this._badgeOverlay.set(v);
+    }
+    attr = '';
+    get tabIndex() {
+        return this.isAnchor() && (this._disabled() || this._loading()) ? -1 : null;
+    }
+    get ariaBusy() {
+        return this._loading() ? 'true' : null;
+    }
+    get dataSize() {
+        return this._size();
+    }
+    get dataColor() {
+        return this._color();
+    }
+    get nativeDisabled() {
+        const isButton = !this.isAnchor();
+        return isButton && (this._disabled() || this._loading()) ? '' : null;
+    }
+    get dataVariant() {
+        return this._variant();
+    }
+    get ariaDisabled() {
+        return this.isAnchor() && (this._disabled() || this._loading()) ? 'true' : null;
+    }
+    get dataIconOnly() {
+        return this._iconOnly() ? 'true' : null;
+    }
+    get dataFullWidth() {
+        return this._fullWidth() ? 'true' : null;
+    }
+    get customColorValue() {
+        return this._customColor() ?? null;
+    }
+    get dataCustomInk() {
+        return this._textColor() ? 'true' : null;
+    }
+    get customInkValue() {
+        return this._textColor() ?? null;
+    }
+    get dataBadgeOverlay() {
+        return this._badgeOverlay() ? 'true' : null;
+    }
+    get buttonRadius() {
+        return this._radius() ? resolveRadius$1(this._radius()) : null;
+    }
+    onClick(ev) {
+        if (!this.isAnchor())
+            return;
+        if (this._disabled() || this._loading()) {
+            ev.preventDefault();
+            ev.stopImmediatePropagation();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.1", type: ButtonDirective, isStandalone: true, selector: "button[solaris-button], a[solaris-button]", inputs: { size: "size", variant: "variant", color: "color", textColor: "textColor", radius: "radius", loading: ["loading", "loading", booleanAttribute], iconOnly: ["iconOnly", "iconOnly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], fullWidth: ["fullWidth", "fullWidth", booleanAttribute], badgeOverlay: ["badgeOverlay", "badgeOverlay", booleanAttribute] }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.solaris-button": "this.attr", "attr.tabindex": "this.tabIndex", "attr.aria-busy": "this.ariaBusy", "attr.data-size": "this.dataSize", "attr.data-color": "this.dataColor", "attr.disabled": "this.nativeDisabled", "attr.data-variant": "this.dataVariant", "attr.aria-disabled": "this.ariaDisabled", "attr.data-icon-only": "this.dataIconOnly", "attr.data-full-width": "this.dataFullWidth", "style.--sb-custom": "this.customColorValue", "attr.data-custom-ink": "this.dataCustomInk", "style.--sb-custom-ink": "this.customInkValue", "attr.data-badge-overlay": "this.dataBadgeOverlay", "style.--solaris-button-radius": "this.buttonRadius" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[solaris-button], a[solaris-button]',
+                    standalone: true,
+                }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], textColor: [{
+                type: Input
+            }], radius: [{
+                type: Input
+            }], loading: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], iconOnly: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], fullWidth: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], badgeOverlay: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], attr: [{
+                type: HostBinding,
+                args: ['attr.solaris-button']
+            }], tabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], ariaBusy: [{
+                type: HostBinding,
+                args: ['attr.aria-busy']
+            }], dataSize: [{
+                type: HostBinding,
+                args: ['attr.data-size']
+            }], dataColor: [{
+                type: HostBinding,
+                args: ['attr.data-color']
+            }], nativeDisabled: [{
+                type: HostBinding,
+                args: ['attr.disabled']
+            }], dataVariant: [{
+                type: HostBinding,
+                args: ['attr.data-variant']
+            }], ariaDisabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], dataIconOnly: [{
+                type: HostBinding,
+                args: ['attr.data-icon-only']
+            }], dataFullWidth: [{
+                type: HostBinding,
+                args: ['attr.data-full-width']
+            }], customColorValue: [{
+                type: HostBinding,
+                args: ['style.--sb-custom']
+            }], dataCustomInk: [{
+                type: HostBinding,
+                args: ['attr.data-custom-ink']
+            }], customInkValue: [{
+                type: HostBinding,
+                args: ['style.--sb-custom-ink']
+            }], dataBadgeOverlay: [{
+                type: HostBinding,
+                args: ['attr.data-badge-overlay']
+            }], buttonRadius: [{
+                type: HostBinding,
+                args: ['style.--solaris-button-radius']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+const SOLARIS_NOTIFICATION_POSITIONS = [
+    'top-right', 'top-left', 'top-center',
+    'bottom-right', 'bottom-left', 'bottom-center',
+];
+const SOLARIS_NOTIFICATION_DEFAULT_CONFIG = {
+    defaultPosition: 'bottom-center',
+    defaultDuration: 15000,
+    maxVisiblePerPosition: 4,
+    hoverPause: false,
+    newestOnTop: true,
+    expandSingle: false,
+    persistInCenter: true,
+    translationScope: 'solaris.notifications',
+};
+const SOLARIS_NOTIFICATION_CONFIG = new InjectionToken('SOLARIS_NOTIFICATION_CONFIG', {
+    providedIn: 'root',
+    factory: () => SOLARIS_NOTIFICATION_DEFAULT_CONFIG,
+});
+function mergeConfig(input = {}) {
+    return {
+        ...SOLARIS_NOTIFICATION_DEFAULT_CONFIG,
+        ...input,
+    };
+}
+function provideSolarisNotifications(input = {}) {
+    return makeEnvironmentProviders([
+        {
+            provide: SOLARIS_NOTIFICATION_CONFIG,
+            useValue: mergeConfig(input),
+        },
+    ]);
+}
+
+class SolarisNotificationIntlService {
+    translationService = inject(SOLARIS_TRANSLATION);
+    notificationConfig = inject(SOLARIS_NOTIFICATION_CONFIG);
+    translationConfig = inject(SOLARIS_TRANSLATION_CONFIGURATION);
+    activeLang = toSignal(this.translationService.languageChanges(), {
+        initialValue: this.translationService.language(),
+    });
+    prefix = computed(() => {
+        this.activeLang();
+        const uiScope = this.translationConfig.uiScope ?? 'ui';
+        const namespace = this.notificationConfig.translationScope;
+        return `${uiScope}.${namespace}`;
+    }, ...(ngDevMode ? [{ debugName: "prefix" }] : []));
+    translate(key, params) {
+        this.activeLang();
+        const isAbsoluteKey = key.startsWith('ui.') || key.startsWith('solaris.')
+            || key.startsWith('notification.');
+        const finalKey = isAbsoluteKey ? key : `${this.prefix()}.${key}`;
+        return this.translationService.translate(finalKey, params);
+    }
+    close() {
+        return this.translate('close');
+    }
+    expand() {
+        return this.translate('expand');
+    }
+    collapse() {
+        return this.translate('collapse');
+    }
+    stopTimer() {
+        return this.translate('stopTimer');
+    }
+    resumeTimer() {
+        return this.translate('resumeTimer');
+    }
+    paused() {
+        return this.translate('paused');
+    }
+    centerTitle() {
+        return this.translate('centerTitle');
+    }
+    emptyCenter() {
+        return this.translate('emptyCenter');
+    }
+    clearHistory() {
+        return this.translate('clearHistory');
+    }
+    autoClose(seconds) {
+        return this.translate('autoClose', {
+            seconds,
+            unit: seconds === 1 ? this.translate('units.second') : this.translate('units.seconds'),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisNotificationIntlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisNotificationIntlService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisNotificationIntlService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class SolarisNotificationService {
+    platformId = inject(PLATFORM_ID);
+    destroyRef = inject(DestroyRef);
+    config = inject(SOLARIS_NOTIFICATION_CONFIG);
+    translationService = inject(SOLARIS_TRANSLATION);
+    centerOpen = signal(false, ...(ngDevMode ? [{ debugName: "centerOpen" }] : []));
+    _items = signal([], ...(ngDevMode ? [{ debugName: "_items" }] : []));
+    items = computed(() => this._items(), ...(ngDevMode ? [{ debugName: "items" }] : []));
+    visibleItems = computed(() => this._items().filter((item) => item.state === 'visible'), ...(ngDevMode ? [{ debugName: "visibleItems" }] : []));
+    centerItems = computed(() => [...this._items()].sort((a, b) => b.createdAt - a.createdAt), ...(ngDevMode ? [{ debugName: "centerItems" }] : []));
+    lastTick = 0;
+    intervalId = null;
+    constructor() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        this.lastTick = performance.now();
+        this.intervalId = globalThis.setInterval(() => this.tick(), 100);
+        const handleVisibility = () => {
+            const hidden = document.visibilityState !== 'visible';
+            this._items.update((items) => items.map((item) => item.duration == null ? item : { ...item, pausedByVisibility: hidden }));
+        };
+        document.addEventListener('visibilitychange', handleVisibility, {
+            passive: true,
+        });
+        this.destroyRef.onDestroy(() => {
+            if (this.intervalId != null) {
+                globalThis.clearInterval(this.intervalId);
+            }
+            document.removeEventListener('visibilitychange', handleVisibility);
+        });
+    }
+    success(input) {
+        return this.show({ ...input, kind: 'success' });
+    }
+    warning(input) {
+        return this.show({ ...input, kind: 'warning' });
+    }
+    error(input) {
+        return this.show({ ...input, kind: 'error' });
+    }
+    info(input) {
+        return this.show({ ...input, kind: 'info' });
+    }
+    show(input) {
+        const item = this.createRecord(input);
+        this._items.update((items) => this.config.newestOnTop ? [item, ...items] : [...items, item]);
+        this.rebalance();
+        return this.createRef(item.id);
+    }
+    visibleByPosition(position) {
+        return this.visibleItems().filter((item) => item.position === position);
+    }
+    isPaused(item) {
+        return item.pausedByHover || item.pausedByUser || item.pausedByVisibility;
+    }
+    dismiss(id) {
+        this._items.update((items) => {
+            if (this.config.persistInCenter) {
+                return items.map((item) => item.id === id ? { ...item, state: 'archived', pausedByHover: false, pausedByUser: false, pausedByVisibility: false, } : item);
+            }
+            return items.filter((item) => item.id !== id);
+        });
+        this.rebalance();
+    }
+    remove(id) {
+        this._items.update((items) => items.filter((item) => item.id !== id));
+    }
+    clearHistory() {
+        this._items.update((items) => items.filter((item) => item.state !== 'archived'));
+    }
+    pause(id) {
+        this.patch(id, { pausedByUser: true });
+    }
+    resume(id) {
+        this.patch(id, { pausedByUser: false });
+    }
+    toggleUserPause(id) {
+        const current = this.find(id);
+        if (!current)
+            return;
+        this.patch(id, { pausedByUser: !current.pausedByUser });
+    }
+    setHoverPaused(id, paused) {
+        const current = this.find(id);
+        if (!current?.pauseOnHover)
+            return;
+        this.patch(id, { pausedByHover: paused });
+    }
+    toggleExpanded(id) {
+        const current = this.find(id);
+        if (!current?.expandable)
+            return;
+        this._items.update((items) => items.map((item) => {
+            if (item.id === id) {
+                return { ...item, expanded: !item.expanded };
+            }
+            if (this.config.expandSingle && item.position === current.position &&
+                item.state === 'visible') {
+                return { ...item, expanded: false };
+            }
+            return item;
+        }));
+    }
+    update(id, patch) {
+        this._items.update((items) => items.map((item) => {
+            if (item.id !== id)
+                return item;
+            const hasDurationPatch = this.hasOwn(patch, 'duration');
+            const hasTitlePatch = this.hasOwn(patch, 'title') ||
+                this.hasOwn(patch, 'titleKey') || this.hasOwn(patch, 'titleParams');
+            const hasDescriptionPatch = this.hasOwn(patch, 'description') ||
+                this.hasOwn(patch, 'descriptionKey') || this.hasOwn(patch, 'descriptionParams');
+            const duration = hasDurationPatch ? (patch.duration ?? null) : item.duration;
+            const title = hasTitlePatch ? this.resolveRequiredText(patch.title, patch.titleKey, patch.titleParams, item.title) : item.title;
+            const description = hasDescriptionPatch ? this.resolveOptionalText(patch.description, patch.descriptionKey, patch.descriptionParams, item.description) : item.description;
+            const hasExplicitExpandable = this.hasOwn(patch, 'expandable');
+            let expandable = item.expandable;
+            if (hasExplicitExpandable) {
+                expandable = patch.expandable ?? item.expandable;
+            }
+            else if (hasDescriptionPatch) {
+                expandable = Boolean(description?.trim().length);
+            }
+            return {
+                ...item,
+                title,
+                description,
+                kind: patch.kind ?? item.kind,
+                position: patch.position ?? item.position,
+                duration,
+                remainingMs: hasDurationPatch ? duration ?? null : item.remainingMs,
+                expandable,
+                expanded: patch.expanded ?? item.expanded,
+                closeable: patch.closeable ?? item.closeable,
+                pauseOnHover: patch.pauseOnHover ?? item.pauseOnHover,
+                actions: patch.actions ?? item.actions,
+                ariaLive: patch.ariaLive ?? item.ariaLive,
+                data: patch.data ?? item.data,
+            };
+        }));
+        this.rebalance();
+    }
+    openCenter() {
+        this.centerOpen.set(true);
+    }
+    closeCenter() {
+        this.centerOpen.set(false);
+    }
+    toggleCenter() {
+        this.centerOpen.update((value) => !value);
+    }
+    tick() {
+        const now = performance.now();
+        const delta = now - this.lastTick;
+        this.lastTick = now;
+        let shouldRebalance = false;
+        const expiredIds = new Set();
+        this._items.update((items) => {
+            const next = items.map((item) => {
+                if (item.state !== 'visible')
+                    return item;
+                if (item.duration == null || item.remainingMs == null)
+                    return item;
+                if (this.isPaused(item))
+                    return item;
+                const remainingMs = Math.max(0, item.remainingMs - delta);
+                if (remainingMs === 0) {
+                    shouldRebalance = true;
+                    expiredIds.add(item.id);
+                    if (this.config.persistInCenter) {
+                        return {
+                            ...item,
+                            remainingMs: 0,
+                            state: 'archived',
+                            pausedByHover: false,
+                            pausedByUser: false,
+                            pausedByVisibility: false,
+                        };
+                    }
+                    return item;
+                }
+                return {
+                    ...item,
+                    remainingMs,
+                };
+            });
+            if (this.config.persistInCenter) {
+                return next;
+            }
+            return next.filter((item) => !expiredIds.has(item.id));
+        });
+        if (shouldRebalance) {
+            this.rebalance();
+        }
+    }
+    rebalance() {
+        this._items.update((items) => {
+            let next = [...items];
+            for (const position of SOLARIS_NOTIFICATION_POSITIONS) {
+                const visibleCount = next.filter((item) => item.position === position && item.state === 'visible').length;
+                const freeSlots = this.config.maxVisiblePerPosition - visibleCount;
+                if (freeSlots <= 0)
+                    continue;
+                const queued = next.filter((item) => item.position === position && item.state === 'queued')
+                    .sort((a, b) => this.config.newestOnTop ? b.createdAt - a.createdAt : a.createdAt - b.createdAt)
+                    .slice(0, freeSlots);
+                if (!queued.length)
+                    continue;
+                const queuedIds = new Set(queued.map((item) => item.id));
+                next = next.map((item) => queuedIds.has(item.id) ? { ...item, state: 'visible' } : item);
+            }
+            return next;
+        });
+    }
+    createRecord(input) {
+        const duration = input.duration === undefined
+            ? this.config.defaultDuration
+            : input.duration;
+        const kind = input.kind ?? 'info';
+        const position = input.position ?? this.config.defaultPosition;
+        const title = this.resolveRequiredText(input.title, input.titleKey, input.titleParams, '');
+        const description = this.resolveOptionalText(input.description, input.descriptionKey, input.descriptionParams, null);
+        const expandable = input.expandable ?? Boolean(description?.trim().length);
+        return {
+            id: this.createId(),
+            title,
+            description,
+            kind,
+            position,
+            state: 'queued',
+            duration,
+            remainingMs: duration == null ? null : duration,
+            expandable,
+            expanded: input.expanded ?? false,
+            closeable: input.closeable ?? true,
+            pauseOnHover: input.pauseOnHover ?? this.config.hoverPause,
+            pausedByHover: false,
+            pausedByUser: false,
+            pausedByVisibility: false,
+            actions: input.actions ?? [],
+            ariaLive: input.ariaLive ?? this.resolveAriaLive(kind),
+            data: input.data ?? null,
+            createdAt: Date.now(),
+        };
+    }
+    resolveAriaLive(kind) {
+        return kind === 'success' || kind === 'info' ? 'polite' : 'assertive';
+    }
+    createRef(id) {
+        return {
+            id,
+            dismiss: () => this.dismiss(id),
+            remove: () => this.remove(id),
+            pause: () => this.pause(id),
+            resume: () => this.resume(id),
+            toggleExpanded: () => this.toggleExpanded(id),
+            update: (patch) => this.update(id, patch),
+        };
+    }
+    createId() {
+        const uuid = globalThis.crypto?.randomUUID?.();
+        return uuid ?? `sn_${Date.now()}_${Math.random().toString(36).slice(2, 10)}`;
+    }
+    find(id) {
+        return this._items().find((item) => item.id === id);
+    }
+    patch(id, patch) {
+        this._items.update((items) => items.map((item) => (item.id === id ? { ...item, ...patch } : item)));
+    }
+    resolveRequiredText(value, key, params, fallback) {
+        if (key) {
+            return this.translationService.translate(key, params);
+        }
+        if (value == null) {
+            return fallback;
+        }
+        return value;
+    }
+    resolveOptionalText(value, key, params, fallback) {
+        if (key) {
+            return this.translationService.translate(key, params);
+        }
+        if (value === undefined) {
+            return fallback;
+        }
+        return value ?? null;
+    }
+    hasOwn(obj, key) {
+        return Object.hasOwn(obj, key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisNotificationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisNotificationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class SolarisNotificationItemComponent {
+    notificationService = inject(SolarisNotificationService);
+    intl = inject(SolarisNotificationIntlService);
+    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
+    mode = input('toast', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    paused = computed(() => this.notificationService.isPaused(this.item()), ...(ngDevMode ? [{ debugName: "paused" }] : []));
+    secondsLeft = computed(() => {
+        const remaining = this.item().remainingMs ?? 0;
+        return Math.max(1, Math.ceil(remaining / 1000));
+    }, ...(ngDevMode ? [{ debugName: "secondsLeft" }] : []));
+    progress = computed(() => {
+        const duration = this.item().duration;
+        const remaining = this.item().remainingMs;
+        if (duration == null || remaining == null || duration <= 0)
+            return 0;
+        return Math.max(0, Math.min(100, (remaining / duration) * 100));
+    }, ...(ngDevMode ? [{ debugName: "progress" }] : []));
+    iconClass = computed(() => {
+        switch (this.item().kind) {
+            case 'success':
+                return 'ph-check-circle';
+            case 'warning':
+                return 'ph-warning-circle';
+            case 'error':
+                return 'ph-x-circle';
+            default:
+                return 'ph-info';
+        }
+    }, ...(ngDevMode ? [{ debugName: "iconClass" }] : []));
+    toggleExpanded() {
+        this.notificationService.toggleExpanded(this.item().id);
+    }
+    toggleUserPause() {
+        this.notificationService.toggleUserPause(this.item().id);
+    }
+    close() {
+        this.notificationService.dismiss(this.item().id);
+    }
+    onMouseEnter() {
+        if (this.mode() !== 'toast')
+            return;
+        this.notificationService.setHoverPaused(this.item().id, true);
+    }
+    onMouseLeave() {
+        if (this.mode() !== 'toast')
+            return;
+        this.notificationService.setHoverPaused(this.item().id, false);
+    }
+    async runAction(action) {
+        await action.run?.({
+            id: this.item().id,
+            data: this.item().data,
+            dismiss: () => this.notificationService.dismiss(this.item().id),
+            remove: () => this.notificationService.remove(this.item().id),
+            update: (patch) => this.notificationService.update(this.item().id, patch),
+        });
+        if (action.closeOnClick !== false) {
+            this.notificationService.dismiss(this.item().id);
+        }
+    }
+    resolveActionLabel(action) {
+        if (action.labelKey) {
+            return this.intl.translate(action.labelKey, action.labelParams);
+        }
+        return action.label ?? '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisNotificationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisNotificationItemComponent, isStandalone: true, selector: "solaris-notification-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article class=\"sn\" [attr.data-kind]=\"item().kind\" [attr.data-mode]=\"mode()\" [attr.data-expanded]=\"item().expanded ? 'true' : 'false'\"\r\n  [attr.data-paused]=\"paused() ? 'true' : 'false'\" [attr.aria-live]=\"mode() === 'toast' ? item().ariaLive : null\"\r\n  [attr.role]=\"item().ariaLive === 'assertive' ? 'alert' : 'status'\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n  <div class=\"sn__header\">\r\n    <div class=\"sn__leading\">\r\n      <span class=\"sn__icon\" aria-hidden=\"true\">\r\n        <i class=\"ph\" [ngClass]=\"iconClass()\"></i>\r\n      </span>\r\n\r\n      <div class=\"sn__heading\">\r\n        <strong class=\"sn__title\">{{ item().title }}</strong>\r\n\r\n        @if (!item().expanded && item().description) {\r\n          <p class=\"sn__description sn__description--clamped\">\r\n            {{ item().description }}\r\n          </p>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"sn__controls\">\r\n      @if (item().expandable && item().description) {\r\n        <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-expanded]=\"item().expanded\"\r\n          [attr.aria-label]=\"item().expanded ? intl.collapse() : intl.expand()\" (click)=\"toggleExpanded()\">\r\n          <i class=\"ph\" [ngClass]=\"item().expanded ? 'ph-caret-up' : 'ph-caret-down'\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      }\r\n\r\n      @if (item().closeable) {\r\n        <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-label]=\"intl.close()\" (click)=\"close()\">\r\n          <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (item().expanded && item().description) {\r\n    <div class=\"sn__body\">\r\n      <p class=\"sn__body-text\">{{ item().description }}</p>\r\n      @if (item().actions.length) {\r\n        <div class=\"sn__actions\">\r\n          @for (action of item().actions; track action.id) {\r\n            <button type=\"button\" solaris-button [variant]=\"action.variant ?? 'outline'\" [color]=\"action.color ?? 'surface'\"\r\n              [size]=\"action.size ?? 'sm'\" [radius]=\"action.radius ?? 'md'\" [disabled]=\"action.disabled ?? false\"\r\n              (click)=\"runAction(action)\">\r\n              {{ resolveActionLabel(action) }}\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (mode() === 'toast' && item().duration !== null) {\r\n    <div class=\"sn__footer\">\r\n      @if (!paused()) {\r\n        <p class=\"sn__timer\">\r\n          {{ intl.autoClose(secondsLeft()) }}\r\n          <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n            {{ intl.stopTimer() }}\r\n          </button>.\r\n        </p>\r\n      } @else {\r\n        <p class=\"sn__timer\">\r\n          {{ intl.paused() }}\r\n          <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n            {{ intl.resumeTimer() }}\r\n          </button>.\r\n        </p>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"sn__progress\" aria-hidden=\"true\">\r\n      <span [style.width.%]=\"progress()\"></span>\r\n    </div>\r\n  }\r\n</article>\r\n", styles: [":host{display:block;pointer-events:auto}.sn{--sn-accent: var(--solaris-color-info);overflow:hidden;color:var(--solaris-color-text);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:.1rem solid var(--solaris-color-border);width:min(42rem,100vw - var(--solaris-space-4) * 2)}.sn[data-kind=success]{--sn-accent: var(--solaris-color-success)}.sn[data-kind=warning]{--sn-accent: var(--solaris-color-warning)}.sn[data-kind=error]{--sn-accent: var(--solaris-color-error)}.sn[data-kind=info]{--sn-accent: var(--solaris-color-info)}.sn__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3);padding:var(--solaris-space-4)}.sn[data-expanded=true] .sn__header{padding-bottom:0}.sn__leading{flex:1;min-width:0;display:flex;align-items:center;gap:var(--solaris-space-3)}.sn__icon{display:grid;flex:0 0 auto;block-size:3.2rem;inline-size:3.2rem;place-items:center;color:var(--sn-accent);border-radius:var(--solaris-radius-full)}.sn__icon .ph{line-height:1;font-size:var(--solaris-fs-24)}.sn__heading{flex:1;min-width:0}.sn__title{display:block;margin:0;font-size:var(--solaris-fs-16);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight);font-family:var(--solaris-font-sans-primary),ui-sans-serif,system-ui}.sn__description,.sn__body-text,.sn__timer{margin:0;font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed);color:var(--solaris-color-text-muted)}.sn__description--clamped{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:var(--solaris-space-1)}.sn__controls{flex:0 0 auto;align-items:center;display:inline-flex;gap:var(--solaris-space-1)}.sn__icon-btn{border:0;display:grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;background:transparent;cursor:pointer;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);transition:background-color .14s ease,color .14s ease,transform .14s ease}.sn__icon-btn:hover{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.sn__icon-btn:focus-visible{outline-offset:.2rem;outline:.2rem solid var(--solaris-color-primary)}.sn__icon-btn .ph{line-height:1;font-size:var(--solaris-fs-18)}.sn__body{padding:0 var(--solaris-space-4) var(--solaris-space-4) calc(var(--solaris-space-4) + 3.2rem + var(--solaris-space-3))}.sn__actions{display:flex;flex-wrap:wrap;gap:var(--solaris-space-2);margin-top:var(--solaris-space-4)}.sn__footer{background:var(--solaris-color-surface-2);border-top:.1rem solid var(--solaris-color-border);padding:var(--solaris-space-3) var(--solaris-space-4)}.sn__timer-link{margin:0;padding:0;border:0;font:inherit;cursor:pointer;font-weight:700;background:transparent;color:var(--solaris-color-text)}.sn__timer-link:focus-visible{outline-offset:.2rem;border-radius:var(--solaris-radius-xs);outline:.2rem solid var(--solaris-color-primary)}.sn__progress{block-size:.4rem;background:transparent}.sn__progress>span{display:block;block-size:100%;inline-size:100%;background:var(--sn-accent);transition:width .1s linear}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ButtonDirective, selector: "button[solaris-button], a[solaris-button]", inputs: ["size", "variant", "color", "textColor", "radius", "loading", "iconOnly", "disabled", "fullWidth", "badgeOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisNotificationItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-notification-item', standalone: true, imports: [NgClass, ButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"sn\" [attr.data-kind]=\"item().kind\" [attr.data-mode]=\"mode()\" [attr.data-expanded]=\"item().expanded ? 'true' : 'false'\"\r\n  [attr.data-paused]=\"paused() ? 'true' : 'false'\" [attr.aria-live]=\"mode() === 'toast' ? item().ariaLive : null\"\r\n  [attr.role]=\"item().ariaLive === 'assertive' ? 'alert' : 'status'\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n  <div class=\"sn__header\">\r\n    <div class=\"sn__leading\">\r\n      <span class=\"sn__icon\" aria-hidden=\"true\">\r\n        <i class=\"ph\" [ngClass]=\"iconClass()\"></i>\r\n      </span>\r\n\r\n      <div class=\"sn__heading\">\r\n        <strong class=\"sn__title\">{{ item().title }}</strong>\r\n\r\n        @if (!item().expanded && item().description) {\r\n          <p class=\"sn__description sn__description--clamped\">\r\n            {{ item().description }}\r\n          </p>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"sn__controls\">\r\n      @if (item().expandable && item().description) {\r\n        <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-expanded]=\"item().expanded\"\r\n          [attr.aria-label]=\"item().expanded ? intl.collapse() : intl.expand()\" (click)=\"toggleExpanded()\">\r\n          <i class=\"ph\" [ngClass]=\"item().expanded ? 'ph-caret-up' : 'ph-caret-down'\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      }\r\n\r\n      @if (item().closeable) {\r\n        <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-label]=\"intl.close()\" (click)=\"close()\">\r\n          <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (item().expanded && item().description) {\r\n    <div class=\"sn__body\">\r\n      <p class=\"sn__body-text\">{{ item().description }}</p>\r\n      @if (item().actions.length) {\r\n        <div class=\"sn__actions\">\r\n          @for (action of item().actions; track action.id) {\r\n            <button type=\"button\" solaris-button [variant]=\"action.variant ?? 'outline'\" [color]=\"action.color ?? 'surface'\"\r\n              [size]=\"action.size ?? 'sm'\" [radius]=\"action.radius ?? 'md'\" [disabled]=\"action.disabled ?? false\"\r\n              (click)=\"runAction(action)\">\r\n              {{ resolveActionLabel(action) }}\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (mode() === 'toast' && item().duration !== null) {\r\n    <div class=\"sn__footer\">\r\n      @if (!paused()) {\r\n        <p class=\"sn__timer\">\r\n          {{ intl.autoClose(secondsLeft()) }}\r\n          <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n            {{ intl.stopTimer() }}\r\n          </button>.\r\n        </p>\r\n      } @else {\r\n        <p class=\"sn__timer\">\r\n          {{ intl.paused() }}\r\n          <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n            {{ intl.resumeTimer() }}\r\n          </button>.\r\n        </p>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"sn__progress\" aria-hidden=\"true\">\r\n      <span [style.width.%]=\"progress()\"></span>\r\n    </div>\r\n  }\r\n</article>\r\n", styles: [":host{display:block;pointer-events:auto}.sn{--sn-accent: var(--solaris-color-info);overflow:hidden;color:var(--solaris-color-text);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:.1rem solid var(--solaris-color-border);width:min(42rem,100vw - var(--solaris-space-4) * 2)}.sn[data-kind=success]{--sn-accent: var(--solaris-color-success)}.sn[data-kind=warning]{--sn-accent: var(--solaris-color-warning)}.sn[data-kind=error]{--sn-accent: var(--solaris-color-error)}.sn[data-kind=info]{--sn-accent: var(--solaris-color-info)}.sn__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3);padding:var(--solaris-space-4)}.sn[data-expanded=true] .sn__header{padding-bottom:0}.sn__leading{flex:1;min-width:0;display:flex;align-items:center;gap:var(--solaris-space-3)}.sn__icon{display:grid;flex:0 0 auto;block-size:3.2rem;inline-size:3.2rem;place-items:center;color:var(--sn-accent);border-radius:var(--solaris-radius-full)}.sn__icon .ph{line-height:1;font-size:var(--solaris-fs-24)}.sn__heading{flex:1;min-width:0}.sn__title{display:block;margin:0;font-size:var(--solaris-fs-16);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight);font-family:var(--solaris-font-sans-primary),ui-sans-serif,system-ui}.sn__description,.sn__body-text,.sn__timer{margin:0;font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed);color:var(--solaris-color-text-muted)}.sn__description--clamped{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:var(--solaris-space-1)}.sn__controls{flex:0 0 auto;align-items:center;display:inline-flex;gap:var(--solaris-space-1)}.sn__icon-btn{border:0;display:grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;background:transparent;cursor:pointer;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);transition:background-color .14s ease,color .14s ease,transform .14s ease}.sn__icon-btn:hover{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.sn__icon-btn:focus-visible{outline-offset:.2rem;outline:.2rem solid var(--solaris-color-primary)}.sn__icon-btn .ph{line-height:1;font-size:var(--solaris-fs-18)}.sn__body{padding:0 var(--solaris-space-4) var(--solaris-space-4) calc(var(--solaris-space-4) + 3.2rem + var(--solaris-space-3))}.sn__actions{display:flex;flex-wrap:wrap;gap:var(--solaris-space-2);margin-top:var(--solaris-space-4)}.sn__footer{background:var(--solaris-color-surface-2);border-top:.1rem solid var(--solaris-color-border);padding:var(--solaris-space-3) var(--solaris-space-4)}.sn__timer-link{margin:0;padding:0;border:0;font:inherit;cursor:pointer;font-weight:700;background:transparent;color:var(--solaris-color-text)}.sn__timer-link:focus-visible{outline-offset:.2rem;border-radius:var(--solaris-radius-xs);outline:.2rem solid var(--solaris-color-primary)}.sn__progress{block-size:.4rem;background:transparent}.sn__progress>span{display:block;block-size:100%;inline-size:100%;background:var(--sn-accent);transition:width .1s linear}\n"] }]
+        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
+
+class SolarisNotificationCenterComponent {
+    notificationService = inject(SolarisNotificationService);
+    intl = inject(SolarisNotificationIntlService);
+    onEscape() {
+        if (this.notificationService.centerOpen()) {
+            this.notificationService.closeCenter();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisNotificationCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisNotificationCenterComponent, isStandalone: true, selector: "solaris-notification-center", host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (notificationService.centerOpen()) {\r\n  <div class=\"snc__backdrop\" (click)=\"notificationService.closeCenter()\"></div>\r\n\r\n  <aside class=\"snc\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"intl.centerTitle()\">\r\n    <header class=\"snc__header\">\r\n      <div>\r\n        <strong class=\"snc__title\">{{ intl.centerTitle() }}</strong>\r\n      </div>\r\n\r\n      <div class=\"snc__controls\">\r\n        <button type=\"button\" solaris-button variant=\"outline\" color=\"surface\" size=\"sm\" radius=\"md\"\r\n          (click)=\"notificationService.clearHistory()\">\r\n          {{ intl.clearHistory() }}\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"snc__icon-btn\" [attr.aria-label]=\"intl.close()\" (click)=\"notificationService.closeCenter()\">\r\n          <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </div>\r\n    </header>\r\n\r\n    <div class=\"snc__list\">\r\n      @for (item of notificationService.centerItems(); track item.id) {\r\n        <solaris-notification-item [item]=\"item\" mode=\"center\"/>\r\n      } @empty {\r\n        <div class=\"snc__empty\">\r\n          {{ intl.emptyCenter() }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </aside>\r\n}\r\n", styles: [".snc__backdrop{inset:0;position:fixed;pointer-events:auto;-webkit-backdrop-filter:blur(.2rem);backdrop-filter:blur(.2rem);background:#00000047;z-index:var(--solaris-z-overlay)}.snc{display:flex;position:fixed;overflow:hidden;pointer-events:auto;flex-direction:column;top:var(--solaris-space-4);z-index:var(--solaris-z-max);right:var(--solaris-space-4);bottom:var(--solaris-space-4);box-shadow:var(--solaris-shadow-lg);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:.1rem solid var(--solaris-color-border);width:min(46rem,100vw - var(--solaris-space-4) * 2)}.snc__header{display:flex;align-items:center;gap:var(--solaris-space-3);justify-content:space-between;padding:var(--solaris-space-4);border-bottom:.1rem solid var(--solaris-color-border)}.snc__title{font-size:var(--solaris-h-6);line-height:var(--solaris-lh-tight)}.snc__controls{display:flex;align-items:center;gap:var(--solaris-space-2)}.snc__icon-btn{border:0;display:grid;cursor:pointer;block-size:4rem;inline-size:4rem;place-items:center;background:transparent;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full)}.snc__icon-btn:hover{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.snc__list{flex:1;display:flex;overflow:auto;flex-direction:column;gap:var(--solaris-space-3);padding:var(--solaris-space-4);background:var(--solaris-color-bg)}.snc__empty{display:grid;min-height:16rem;text-align:center;place-items:center;color:var(--solaris-color-text-muted)}\n"], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[solaris-button], a[solaris-button]", inputs: ["size", "variant", "color", "textColor", "radius", "loading", "iconOnly", "disabled", "fullWidth", "badgeOverlay"] }, { kind: "component", type: SolarisNotificationItemComponent, selector: "solaris-notification-item", inputs: ["item", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisNotificationCenterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-notification-center', standalone: true, imports: [ButtonDirective, SolarisNotificationItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (notificationService.centerOpen()) {\r\n  <div class=\"snc__backdrop\" (click)=\"notificationService.closeCenter()\"></div>\r\n\r\n  <aside class=\"snc\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"intl.centerTitle()\">\r\n    <header class=\"snc__header\">\r\n      <div>\r\n        <strong class=\"snc__title\">{{ intl.centerTitle() }}</strong>\r\n      </div>\r\n\r\n      <div class=\"snc__controls\">\r\n        <button type=\"button\" solaris-button variant=\"outline\" color=\"surface\" size=\"sm\" radius=\"md\"\r\n          (click)=\"notificationService.clearHistory()\">\r\n          {{ intl.clearHistory() }}\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"snc__icon-btn\" [attr.aria-label]=\"intl.close()\" (click)=\"notificationService.closeCenter()\">\r\n          <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </div>\r\n    </header>\r\n\r\n    <div class=\"snc__list\">\r\n      @for (item of notificationService.centerItems(); track item.id) {\r\n        <solaris-notification-item [item]=\"item\" mode=\"center\"/>\r\n      } @empty {\r\n        <div class=\"snc__empty\">\r\n          {{ intl.emptyCenter() }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </aside>\r\n}\r\n", styles: [".snc__backdrop{inset:0;position:fixed;pointer-events:auto;-webkit-backdrop-filter:blur(.2rem);backdrop-filter:blur(.2rem);background:#00000047;z-index:var(--solaris-z-overlay)}.snc{display:flex;position:fixed;overflow:hidden;pointer-events:auto;flex-direction:column;top:var(--solaris-space-4);z-index:var(--solaris-z-max);right:var(--solaris-space-4);bottom:var(--solaris-space-4);box-shadow:var(--solaris-shadow-lg);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:.1rem solid var(--solaris-color-border);width:min(46rem,100vw - var(--solaris-space-4) * 2)}.snc__header{display:flex;align-items:center;gap:var(--solaris-space-3);justify-content:space-between;padding:var(--solaris-space-4);border-bottom:.1rem solid var(--solaris-color-border)}.snc__title{font-size:var(--solaris-h-6);line-height:var(--solaris-lh-tight)}.snc__controls{display:flex;align-items:center;gap:var(--solaris-space-2)}.snc__icon-btn{border:0;display:grid;cursor:pointer;block-size:4rem;inline-size:4rem;place-items:center;background:transparent;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full)}.snc__icon-btn:hover{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.snc__list{flex:1;display:flex;overflow:auto;flex-direction:column;gap:var(--solaris-space-3);padding:var(--solaris-space-4);background:var(--solaris-color-bg)}.snc__empty{display:grid;min-height:16rem;text-align:center;place-items:center;color:var(--solaris-color-text-muted)}\n"] }]
+        }], propDecorators: { onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+class SolarisNotificationHostComponent {
+    notificationService = inject(SolarisNotificationService);
+    positions = SOLARIS_NOTIFICATION_POSITIONS;
+    withCenter = input(true, ...(ngDevMode ? [{ debugName: "withCenter" }] : []));
+    visibleByPosition(position) {
+        return this.notificationService.visibleByPosition(position);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisNotificationHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisNotificationHostComponent, isStandalone: true, selector: "solaris-notification-host", inputs: { withCenter: { classPropertyName: "withCenter", publicName: "withCenter", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (position of positions; track position) {\r\n  <section class=\"snh__stack\" [attr.data-position]=\"position\">\r\n    @for (item of visibleByPosition(position); track item.id) {\r\n      <solaris-notification-item [item]=\"item\" mode=\"toast\"/>\r\n    }\r\n  </section>\r\n}\r\n\r\n@if (withCenter()) { <solaris-notification-center/> }\r\n", styles: [":host{inset:0;position:fixed;pointer-events:none;z-index:var(--solaris-z-toast)}.snh__stack{display:flex;position:fixed;flex-direction:column;gap:var(--solaris-space-3);padding:var(--solaris-space-4);max-width:calc(100vw - var(--solaris-space-4) * 2)}.snh__stack[data-position=top-right]{top:0;right:0;align-items:flex-end}.snh__stack[data-position=top-left]{top:0;left:0;align-items:flex-start}.snh__stack[data-position=top-center]{top:0;left:50%;align-items:center;transform:translate(-50%)}.snh__stack[data-position=bottom-right]{right:0;bottom:0;align-items:flex-end}.snh__stack[data-position=bottom-left]{left:0;bottom:0;align-items:flex-start}.snh__stack[data-position=bottom-center]{left:50%;bottom:0;align-items:center;transform:translate(-50%)}\n"], dependencies: [{ kind: "component", type: SolarisNotificationItemComponent, selector: "solaris-notification-item", inputs: ["item", "mode"] }, { kind: "component", type: SolarisNotificationCenterComponent, selector: "solaris-notification-center" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisNotificationHostComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-notification-host', standalone: true, imports: [SolarisNotificationItemComponent, SolarisNotificationCenterComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (position of positions; track position) {\r\n  <section class=\"snh__stack\" [attr.data-position]=\"position\">\r\n    @for (item of visibleByPosition(position); track item.id) {\r\n      <solaris-notification-item [item]=\"item\" mode=\"toast\"/>\r\n    }\r\n  </section>\r\n}\r\n\r\n@if (withCenter()) { <solaris-notification-center/> }\r\n", styles: [":host{inset:0;position:fixed;pointer-events:none;z-index:var(--solaris-z-toast)}.snh__stack{display:flex;position:fixed;flex-direction:column;gap:var(--solaris-space-3);padding:var(--solaris-space-4);max-width:calc(100vw - var(--solaris-space-4) * 2)}.snh__stack[data-position=top-right]{top:0;right:0;align-items:flex-end}.snh__stack[data-position=top-left]{top:0;left:0;align-items:flex-start}.snh__stack[data-position=top-center]{top:0;left:50%;align-items:center;transform:translate(-50%)}.snh__stack[data-position=bottom-right]{right:0;bottom:0;align-items:flex-end}.snh__stack[data-position=bottom-left]{left:0;bottom:0;align-items:flex-start}.snh__stack[data-position=bottom-center]{left:50%;bottom:0;align-items:center;transform:translate(-50%)}\n"] }]
+        }], propDecorators: { withCenter: [{ type: i0.Input, args: [{ isSignal: true, alias: "withCenter", required: false }] }] } });
+
+const PRESET_COLORS$1 = ['primary', 'success', 'warning', 'error', 'surface'];
 class SolarisLoading {
     marker = '';
     label;
@@ -1092,7 +1812,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 args: [{ transform: coerceBoolean$1 }]
             }] } });
 function isPresetColor(v) {
-    return PRESET_COLORS$2.includes(v);
+    return PRESET_COLORS$1.includes(v);
 }
 function coerceBoolean$1(v) {
     return v === '' || v === true || v === 'true' || v === 1 || v === '1';
@@ -1732,226 +2452,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 }]
         }] });
 
-const PRESET_COLORS$1 = new Set([
-    'primary',
-    'surface',
-    'success',
-    'warning',
-    'error',
-    'info',
-    'gradient',
-]);
-function resolveRadius$1(v) {
-    const s = String(v).trim();
-    switch (s) {
-        case 'none':
-            return '0';
-        case 'sm':
-            return 'var(--solaris-radius-sm)';
-        case 'md':
-            return 'var(--solaris-radius-md, var(--solaris-radius-sm))';
-        case 'lg':
-            return 'var(--solaris-radius-lg, var(--solaris-radius-md, var(--solaris-radius-sm)))';
-        case 'full':
-            return 'var(--solaris-radius-full)';
-        default:
-            return s;
-    }
-}
-class ButtonDirective {
-    elementRef = inject((ElementRef));
-    _loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
-    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
-    _iconOnly = signal(false, ...(ngDevMode ? [{ debugName: "_iconOnly" }] : []));
-    _fullWidth = signal(false, ...(ngDevMode ? [{ debugName: "_fullWidth" }] : []));
-    _badgeOverlay = signal(false, ...(ngDevMode ? [{ debugName: "_badgeOverlay" }] : []));
-    _textColor = signal(null, ...(ngDevMode ? [{ debugName: "_textColor" }] : []));
-    _customColor = signal(null, ...(ngDevMode ? [{ debugName: "_customColor" }] : []));
-    _size = signal('md', ...(ngDevMode ? [{ debugName: "_size" }] : []));
-    _variant = signal('solid', ...(ngDevMode ? [{ debugName: "_variant" }] : []));
-    _radius = signal(null, ...(ngDevMode ? [{ debugName: "_radius" }] : []));
-    _color = signal('primary', ...(ngDevMode ? [{ debugName: "_color" }] : []));
-    isAnchor = computed(() => this.elementRef.nativeElement.tagName.toLowerCase() === 'a', ...(ngDevMode ? [{ debugName: "isAnchor" }] : []));
-    set size(v) {
-        if (v)
-            this._size.set(v);
-    }
-    set variant(v) {
-        if (v)
-            this._variant.set(v);
-    }
-    set color(v) {
-        if (v == null || String(v).trim() === '')
-            return;
-        const value = String(v).trim();
-        if (PRESET_COLORS$1.has(value)) {
-            this._color.set(value);
-            this._customColor.set(null);
-        }
-        else {
-            this._color.set('custom');
-            this._customColor.set(value);
-        }
-    }
-    set textColor(v) {
-        const value = v == null || String(v).trim() === '' ? null : String(v).trim();
-        this._textColor.set(value);
-    }
-    set radius(v) {
-        const value = v == null || String(v).trim() === '' ? null : (v);
-        this._radius.set(value);
-    }
-    set loading(v) {
-        this._loading.set(v);
-    }
-    set iconOnly(v) {
-        this._iconOnly.set(v);
-    }
-    set disabled(v) {
-        this._disabled.set(v);
-    }
-    set fullWidth(v) {
-        this._fullWidth.set(v);
-    }
-    set badgeOverlay(v) {
-        this._badgeOverlay.set(v);
-    }
-    attr = '';
-    get tabIndex() {
-        return this.isAnchor() && (this._disabled() || this._loading()) ? -1 : null;
-    }
-    get ariaBusy() {
-        return this._loading() ? 'true' : null;
-    }
-    get dataSize() {
-        return this._size();
-    }
-    get dataColor() {
-        return this._color();
-    }
-    get nativeDisabled() {
-        const isButton = !this.isAnchor();
-        return isButton && (this._disabled() || this._loading()) ? '' : null;
-    }
-    get dataVariant() {
-        return this._variant();
-    }
-    get ariaDisabled() {
-        return this.isAnchor() && (this._disabled() || this._loading()) ? 'true' : null;
-    }
-    get dataIconOnly() {
-        return this._iconOnly() ? 'true' : null;
-    }
-    get dataFullWidth() {
-        return this._fullWidth() ? 'true' : null;
-    }
-    get customColorValue() {
-        return this._customColor() ?? null;
-    }
-    get dataCustomInk() {
-        return this._textColor() ? 'true' : null;
-    }
-    get customInkValue() {
-        return this._textColor() ?? null;
-    }
-    get dataBadgeOverlay() {
-        return this._badgeOverlay() ? 'true' : null;
-    }
-    get buttonRadius() {
-        return this._radius() ? resolveRadius$1(this._radius()) : null;
-    }
-    onClick(ev) {
-        if (!this.isAnchor())
-            return;
-        if (this._disabled() || this._loading()) {
-            ev.preventDefault();
-            ev.stopImmediatePropagation();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.1", type: ButtonDirective, isStandalone: true, selector: "button[solaris-button], a[solaris-button]", inputs: { size: "size", variant: "variant", color: "color", textColor: "textColor", radius: "radius", loading: ["loading", "loading", booleanAttribute], iconOnly: ["iconOnly", "iconOnly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], fullWidth: ["fullWidth", "fullWidth", booleanAttribute], badgeOverlay: ["badgeOverlay", "badgeOverlay", booleanAttribute] }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.solaris-button": "this.attr", "attr.tabindex": "this.tabIndex", "attr.aria-busy": "this.ariaBusy", "attr.data-size": "this.dataSize", "attr.data-color": "this.dataColor", "attr.disabled": "this.nativeDisabled", "attr.data-variant": "this.dataVariant", "attr.aria-disabled": "this.ariaDisabled", "attr.data-icon-only": "this.dataIconOnly", "attr.data-full-width": "this.dataFullWidth", "style.--sb-custom": "this.customColorValue", "attr.data-custom-ink": "this.dataCustomInk", "style.--sb-custom-ink": "this.customInkValue", "attr.data-badge-overlay": "this.dataBadgeOverlay", "style.--solaris-button-radius": "this.buttonRadius" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ButtonDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'button[solaris-button], a[solaris-button]',
-                    standalone: true,
-                }]
-        }], propDecorators: { size: [{
-                type: Input
-            }], variant: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], textColor: [{
-                type: Input
-            }], radius: [{
-                type: Input
-            }], loading: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], iconOnly: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], fullWidth: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], badgeOverlay: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], attr: [{
-                type: HostBinding,
-                args: ['attr.solaris-button']
-            }], tabIndex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }], ariaBusy: [{
-                type: HostBinding,
-                args: ['attr.aria-busy']
-            }], dataSize: [{
-                type: HostBinding,
-                args: ['attr.data-size']
-            }], dataColor: [{
-                type: HostBinding,
-                args: ['attr.data-color']
-            }], nativeDisabled: [{
-                type: HostBinding,
-                args: ['attr.disabled']
-            }], dataVariant: [{
-                type: HostBinding,
-                args: ['attr.data-variant']
-            }], ariaDisabled: [{
-                type: HostBinding,
-                args: ['attr.aria-disabled']
-            }], dataIconOnly: [{
-                type: HostBinding,
-                args: ['attr.data-icon-only']
-            }], dataFullWidth: [{
-                type: HostBinding,
-                args: ['attr.data-full-width']
-            }], customColorValue: [{
-                type: HostBinding,
-                args: ['style.--sb-custom']
-            }], dataCustomInk: [{
-                type: HostBinding,
-                args: ['attr.data-custom-ink']
-            }], customInkValue: [{
-                type: HostBinding,
-                args: ['style.--sb-custom-ink']
-            }], dataBadgeOverlay: [{
-                type: HostBinding,
-                args: ['attr.data-badge-overlay']
-            }], buttonRadius: [{
-                type: HostBinding,
-                args: ['style.--solaris-button-radius']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
 class SolarisFilterPanel {
     count = 0;
     labelKey = '';
@@ -4768,5 +5268,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonDirective, ButtonGroupDirective, FieldErrorComponent, FormField, InputTextDirective, PasswordToggle, SOLARIS_FORM_FIELD_CONTROLLER, SOLARIS_FORM_FIELD_FEATURES, SOLARIS_INPUT, SolarisBadge, SolarisBodyDirective, SolarisBreadcrumb, SolarisCheckbox, SolarisColumnCellDef, SolarisColumnHeaderDef, SolarisControlBridgeDirective, SolarisDivider, SolarisDrawer, SolarisDrawerFooterDirective, SolarisDrawerHeaderDirective, SolarisDropdownContent, SolarisDropdownContentPanelDirective, SolarisDropdownContentRegistry, SolarisDropdownContentTriggerDirective, SolarisEmailDirective, SolarisFilterBar, SolarisFilterChip, SolarisFilterField, SolarisFilterPanel, SolarisFilterPanelFooterDirective, SolarisFooterDirective, SolarisFormFieldController, SolarisHeaderDirective, SolarisIdGenerator, SolarisImageSliderComponent, SolarisLoading, SolarisLoadingOverlay, SolarisPage, SolarisPageHeader, SolarisPageHeaderBreadcrumbDirective, SolarisPageHeaderDescriptionDirective, SolarisPageHeaderTitle, SolarisPageHeaderTitleDirective, SolarisPasswordDirective, SolarisPhoneInput, SolarisPopover, SolarisPopoverPanelDirective, SolarisPopoverTriggerDirective, SolarisPrefixDirective, SolarisRowComponent, SolarisSectionComponent, SolarisSelect, SolarisSuffixDirective, SolarisTab, SolarisTable, SolarisTableColumn, SolarisTableFilters, SolarisTableSkeleton, SolarisTabs, computePopoverPosition, uniqueId };
+export { ButtonDirective, ButtonGroupDirective, FieldErrorComponent, FormField, InputTextDirective, PasswordToggle, SOLARIS_FORM_FIELD_CONTROLLER, SOLARIS_FORM_FIELD_FEATURES, SOLARIS_INPUT, SOLARIS_NOTIFICATION_CONFIG, SOLARIS_NOTIFICATION_DEFAULT_CONFIG, SOLARIS_NOTIFICATION_POSITIONS, SolarisBadge, SolarisBodyDirective, SolarisBreadcrumb, SolarisCheckbox, SolarisColumnCellDef, SolarisColumnHeaderDef, SolarisControlBridgeDirective, SolarisDivider, SolarisDrawer, SolarisDrawerFooterDirective, SolarisDrawerHeaderDirective, SolarisDropdownContent, SolarisDropdownContentPanelDirective, SolarisDropdownContentRegistry, SolarisDropdownContentTriggerDirective, SolarisEmailDirective, SolarisFilterBar, SolarisFilterChip, SolarisFilterField, SolarisFilterPanel, SolarisFilterPanelFooterDirective, SolarisFooterDirective, SolarisFormFieldController, SolarisHeaderDirective, SolarisIdGenerator, SolarisImageSliderComponent, SolarisLoading, SolarisLoadingOverlay, SolarisNotificationCenterComponent, SolarisNotificationHostComponent, SolarisNotificationIntlService, SolarisNotificationItemComponent, SolarisNotificationService, SolarisPage, SolarisPageHeader, SolarisPageHeaderBreadcrumbDirective, SolarisPageHeaderDescriptionDirective, SolarisPageHeaderTitle, SolarisPageHeaderTitleDirective, SolarisPasswordDirective, SolarisPhoneInput, SolarisPopover, SolarisPopoverPanelDirective, SolarisPopoverTriggerDirective, SolarisPrefixDirective, SolarisRowComponent, SolarisSectionComponent, SolarisSelect, SolarisSuffixDirective, SolarisTab, SolarisTable, SolarisTableColumn, SolarisTableFilters, SolarisTableSkeleton, SolarisTabs, computePopoverPosition, provideSolarisNotifications, uniqueId };
 //# sourceMappingURL=educarehq-solaris-components.mjs.map