@weeehaoooz/talos-ui 0.1.0

package/fesm2022/weeehaoooz-talos-ui-feedback-alert.mjs

@@ -0,0 +1,534 @@
+import * as i0 from '@angular/core';
+import { signal, TemplateRef, Injectable, Directive, input, output, computed, Component, inject, NgModule } from '@angular/core';
+import { NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
+import { LucideInfo, LucideCheckCircle2, LucideAlertTriangle, LucideCircleAlert, LucideAlertOctagon, LucideShieldAlert, LucideX } from '@lucide/angular';
+
+class TalosAlertService {
+    /** Reactive list of currently active programmatic alerts */
+    alerts = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "alerts" }] : /* istanbul ignore next */ []));
+    /** Reactive list of currently active top-level banner alerts */
+    bannerAlerts = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bannerAlerts" }] : /* istanbul ignore next */ []));
+    idCounter = 0;
+    /** Default global configurations */
+    defaultConfig = {
+        severity: 'success',
+        appearance: 'subtle',
+        size: 'md',
+        showIcon: true,
+        dismissible: true
+    };
+    /**
+     * Override default global configurations.
+     */
+    setDefaultConfig(config) {
+        this.defaultConfig = { ...this.defaultConfig, ...config };
+    }
+    /**
+     * Main entry point to create a programmatic alert instance.
+     */
+    show(messageOrConfig, configOverrides = {}) {
+        let fullConfig;
+        if (typeof messageOrConfig === 'string' ||
+            messageOrConfig instanceof TemplateRef) {
+            fullConfig = {
+                message: messageOrConfig,
+                ...configOverrides
+            };
+        }
+        else {
+            fullConfig = {
+                ...messageOrConfig,
+                ...configOverrides
+            };
+        }
+        const instance = {
+            id: fullConfig.id || `talos-alert-${++this.idCounter}-${Date.now()}`,
+            severity: fullConfig.severity ?? this.defaultConfig.severity ?? 'success',
+            variant: fullConfig.variant,
+            appearance: fullConfig.appearance ?? this.defaultConfig.appearance ?? 'subtle',
+            size: fullConfig.size ?? this.defaultConfig.size ?? 'md',
+            showIcon: fullConfig.showIcon ?? this.defaultConfig.showIcon ?? true,
+            icon: fullConfig.icon,
+            showSeverityBadge: fullConfig.showSeverityBadge ?? false,
+            dismissible: fullConfig.dismissible ?? this.defaultConfig.dismissible ?? true,
+            title: fullConfig.title,
+            message: fullConfig.message,
+            actionLabel: fullConfig.actionLabel,
+            onAction: fullConfig.onAction,
+            onDismiss: fullConfig.onDismiss,
+            customClass: fullConfig.customClass,
+            bordered: fullConfig.bordered,
+            duration: fullConfig.duration,
+            data: fullConfig.data,
+            createdAt: Date.now()
+        };
+        this.alerts.update((current) => [...current, instance]);
+        if (instance.duration && instance.duration > 0) {
+            setTimeout(() => {
+                this.dismiss(instance.id);
+            }, instance.duration);
+        }
+        return {
+            id: instance.id,
+            dismiss: () => this.dismiss(instance.id)
+        };
+    }
+    /**
+     * Display a high-visibility global banner alert.
+     */
+    banner(messageOrConfig, configOverrides = {}) {
+        let fullConfig;
+        if (typeof messageOrConfig === 'string' ||
+            messageOrConfig instanceof TemplateRef) {
+            fullConfig = {
+                message: messageOrConfig,
+                appearance: 'filled',
+                severity: 'info',
+                ...configOverrides
+            };
+        }
+        else {
+            fullConfig = {
+                appearance: 'filled',
+                severity: 'info',
+                ...messageOrConfig,
+                ...configOverrides
+            };
+        }
+        const instance = {
+            id: fullConfig.id || `talos-banner-alert-${++this.idCounter}-${Date.now()}`,
+            severity: fullConfig.severity ?? 'info',
+            variant: fullConfig.variant,
+            appearance: fullConfig.appearance ?? 'filled',
+            size: fullConfig.size ?? 'md',
+            showIcon: fullConfig.showIcon ?? true,
+            icon: fullConfig.icon,
+            showSeverityBadge: fullConfig.showSeverityBadge ?? false,
+            dismissible: fullConfig.dismissible ?? true,
+            title: fullConfig.title,
+            message: fullConfig.message,
+            actionLabel: fullConfig.actionLabel,
+            onAction: fullConfig.onAction,
+            onDismiss: fullConfig.onDismiss,
+            customClass: fullConfig.customClass,
+            bordered: fullConfig.bordered,
+            duration: fullConfig.duration,
+            data: fullConfig.data,
+            createdAt: Date.now()
+        };
+        this.bannerAlerts.update((current) => [...current, instance]);
+        if (instance.duration && instance.duration > 0) {
+            setTimeout(() => {
+                this.dismissBanner(instance.id);
+            }, instance.duration);
+        }
+        return {
+            id: instance.id,
+            dismiss: () => this.dismissBanner(instance.id)
+        };
+    }
+    /** Convenience method for Success alerts (Default severity) */
+    success(message, config) {
+        return this.show(message, { ...config, severity: 'success' });
+    }
+    /** Convenience method for Info alerts */
+    info(message, config) {
+        return this.show(message, { ...config, severity: 'info' });
+    }
+    /** Convenience method for Warning alerts */
+    warning(message, config) {
+        return this.show(message, { ...config, severity: 'warning' });
+    }
+    /** Convenience method for Error alerts */
+    error(message, config) {
+        return this.show(message, { ...config, severity: 'error' });
+    }
+    /**
+     * Dismiss a specific programmatic alert by ID, or the oldest if no ID is provided.
+     */
+    dismiss(id) {
+        if (!id) {
+            const current = this.alerts();
+            if (current.length === 0)
+                return;
+            id = current[0].id;
+        }
+        const target = this.alerts().find((a) => a.id === id);
+        if (target?.onDismiss) {
+            target.onDismiss();
+        }
+        this.alerts.update((current) => current.filter((item) => item.id !== id));
+    }
+    /**
+     * Dismiss a banner alert by ID.
+     */
+    dismissBanner(id) {
+        if (!id) {
+            const current = this.bannerAlerts();
+            if (current.length === 0)
+                return;
+            id = current[0].id;
+        }
+        const target = this.bannerAlerts().find((a) => a.id === id);
+        if (target?.onDismiss) {
+            target.onDismiss();
+        }
+        this.bannerAlerts.update((current) => current.filter((item) => item.id !== id));
+    }
+    /**
+     * Dismiss all currently active alerts and banners.
+     */
+    dismissAll() {
+        this.alerts().forEach((a) => a.onDismiss?.());
+        this.bannerAlerts().forEach((b) => b.onDismiss?.());
+        this.alerts.set([]);
+        this.bannerAlerts.set([]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosAlertService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosAlertService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * Structural / Slot directive for alert title projection.
+ *
+ * Usage:
+ * ```html
+ * <talos-alert>
+ *   <div talosAlertTitle>System Maintenance</div>
+ *   <div talosAlertDescription>All services will undergo updates tonight.</div>
+ * </talos-alert>
+ * ```
+ */
+class TalosAlertTitleDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosAlertTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: TalosAlertTitleDirective, isStandalone: true, selector: "[talosAlertTitle], talos-alert-title", host: { classAttribute: "talos-alert-title-directive" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosAlertTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[talosAlertTitle], talos-alert-title',
+                    host: {
+                        'class': 'talos-alert-title-directive'
+                    }
+                }]
+        }] });
+/**
+ * Slot directive for alert description / message body.
+ */
+class TalosAlertDescriptionDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosAlertDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: TalosAlertDescriptionDirective, isStandalone: true, selector: "[talosAlertDescription], talos-alert-description", host: { classAttribute: "talos-alert-description-directive" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosAlertDescriptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[talosAlertDescription], talos-alert-description',
+                    host: {
+                        'class': 'talos-alert-description-directive'
+                    }
+                }]
+        }] });
+/**
+ * Slot directive for custom alert actions / button group.
+ */
+class TalosAlertActionsDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosAlertActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: TalosAlertActionsDirective, isStandalone: true, selector: "[talosAlertActions], talos-alert-actions", host: { classAttribute: "talos-alert-actions-directive" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosAlertActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[talosAlertActions], talos-alert-actions',
+                    host: {
+                        'class': 'talos-alert-actions-directive'
+                    }
+                }]
+        }] });
+/**
+ * Slot directive for custom alert icon.
+ */
+class TalosAlertIconDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosAlertIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: TalosAlertIconDirective, isStandalone: true, selector: "[talosAlertIcon], talos-alert-icon", host: { classAttribute: "talos-alert-icon-directive" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosAlertIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[talosAlertIcon], talos-alert-icon',
+                    host: {
+                        'class': 'talos-alert-icon-directive'
+                    }
+                }]
+        }] });
+
+class TalosAlertComponent {
+    /** Alert severity state: 'success' (default), 'info', 'warning', 'error' */
+    severity = input('success', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
+    /** Visual variant theme fallback */
+    variant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Visual surface appearance style */
+    appearance = input('subtle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    /** Sizing of padding and typography */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Header title text or custom TemplateRef */
+    title = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Main message content or custom TemplateRef */
+    message = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    /** Whether to display the icon */
+    showIcon = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showIcon" }] : /* istanbul ignore next */ []));
+    /** Custom Lucide icon component, TemplateRef, or boolean */
+    icon = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Whether to display a dedicated severity pill badge */
+    showSeverityBadge = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSeverityBadge" }] : /* istanbul ignore next */ []));
+    /** Whether the alert can be dismissed */
+    dismissible = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
+    /** Action button text label */
+    actionLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actionLabel" }] : /* istanbul ignore next */ []));
+    /** Optional explicit border outline */
+    bordered = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
+    /** Additional CSS class */
+    customClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customClass" }] : /* istanbul ignore next */ []));
+    /** Emitted when dismiss close button is clicked */
+    dismiss = output();
+    /** Emitted when action button is clicked */
+    action = output();
+    /** Emitted when dismiss animation has finished and alert is removed */
+    closed = output();
+    isDismissing = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDismissing" }] : /* istanbul ignore next */ []));
+    isDismissed = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDismissed" }] : /* istanbul ignore next */ []));
+    /** Resolved visual variant considering severity */
+    resolvedVariant = computed(() => {
+        const sev = this.severity();
+        if (sev) {
+            return sev;
+        }
+        return this.variant() ?? 'success';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    /** Severity display label for badge */
+    severityLabel = computed(() => {
+        const sev = this.severity();
+        if (sev)
+            return sev.toUpperCase();
+        return '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "severityLabel" }] : /* istanbul ignore next */ []));
+    isTitleTemplate = computed(() => this.title() instanceof TemplateRef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTitleTemplate" }] : /* istanbul ignore next */ []));
+    titleTemplate = computed(() => this.title(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titleTemplate" }] : /* istanbul ignore next */ []));
+    isMessageTemplate = computed(() => this.message() instanceof TemplateRef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMessageTemplate" }] : /* istanbul ignore next */ []));
+    messageTemplate = computed(() => this.message(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messageTemplate" }] : /* istanbul ignore next */ []));
+    isIconTemplate = computed(() => this.icon() instanceof TemplateRef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isIconTemplate" }] : /* istanbul ignore next */ []));
+    iconTemplate = computed(() => this.icon(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+    customIconComponent = computed(() => {
+        const ic = this.icon();
+        return typeof ic === 'function' ? ic : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customIconComponent" }] : /* istanbul ignore next */ []));
+    ariaRole = computed(() => {
+        const v = this.resolvedVariant();
+        return v === 'error' || v === 'warning' || v === 'critical' ? 'alert' : 'status';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaRole" }] : /* istanbul ignore next */ []));
+    ariaLive = computed(() => {
+        const v = this.resolvedVariant();
+        return v === 'error' || v === 'critical' ? 'assertive' : 'polite';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLive" }] : /* istanbul ignore next */ []));
+    onActionClick() {
+        this.action.emit();
+    }
+    onCloseClick() {
+        if (this.isDismissing() || this.isDismissed())
+            return;
+        this.isDismissing.set(true);
+        this.dismiss.emit();
+        setTimeout(() => {
+            this.isDismissed.set(true);
+            this.closed.emit();
+        }, 200);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosAlertComponent, isStandalone: true, selector: "talos-alert", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showSeverityBadge: { classPropertyName: "showSeverityBadge", publicName: "showSeverityBadge", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss", action: "action", closed: "closed" }, host: { properties: { "class.talos-alert-host": "true", "class.is-dismissing": "isDismissing()", "class.is-dismissed": "isDismissed()" } }, ngImport: i0, template: "@if (!isDismissed()) {\n<div\n  class=\"talos-alert\"\n  [class.variant-default]=\"resolvedVariant() === 'default'\"\n  [class.variant-info]=\"resolvedVariant() === 'info'\"\n  [class.variant-success]=\"resolvedVariant() === 'success'\"\n  [class.variant-warning]=\"resolvedVariant() === 'warning'\"\n  [class.variant-error]=\"resolvedVariant() === 'error'\"\n  [class.variant-primary]=\"resolvedVariant() === 'primary'\"\n  [class.variant-critical]=\"resolvedVariant() === 'critical'\"\n  [class.appearance-subtle]=\"appearance() === 'subtle'\"\n  [class.appearance-outline]=\"appearance() === 'outline'\"\n  [class.appearance-filled]=\"appearance() === 'filled'\"\n  [class.appearance-accent]=\"appearance() === 'accent'\"\n  [class.appearance-left-border]=\"appearance() === 'left-border'\"\n  [class.size-sm]=\"size() === 'sm'\"\n  [class.size-md]=\"size() === 'md'\"\n  [class.size-lg]=\"size() === 'lg'\"\n  [class.is-bordered]=\"bordered()\"\n  [class.is-dismissing]=\"isDismissing()\"\n  [class]=\"customClass()\"\n  [attr.role]=\"ariaRole()\"\n  [attr.aria-live]=\"ariaLive()\"\n>\n  <!-- Icon Section -->\n  @if (showIcon() && icon() !== false) {\n  <div class=\"talos-alert-icon\" aria-hidden=\"true\">\n    @if (isIconTemplate()) {\n      <ng-container *ngTemplateOutlet=\"iconTemplate()\"></ng-container>\n    } @else if (customIconComponent()) {\n      <ng-container *ngComponentOutlet=\"customIconComponent()\"></ng-container>\n    } @else {\n      <ng-content select=\"[talosAlertIcon], talos-alert-icon\"></ng-content>\n      @switch (resolvedVariant()) {\n        @case ('critical') {\n          <svg lucideAlertOctagon [size]=\"size() === 'sm' ? 16 : size() === 'lg' ? 24 : 20\"></svg>\n        }\n        @case ('error') {\n          <svg lucideCircleAlert [size]=\"size() === 'sm' ? 16 : size() === 'lg' ? 24 : 20\"></svg>\n        }\n        @case ('warning') {\n          <svg lucideAlertTriangle [size]=\"size() === 'sm' ? 16 : size() === 'lg' ? 24 : 20\"></svg>\n        }\n        @case ('success') {\n          <svg lucideCheckCircle2 [size]=\"size() === 'sm' ? 16 : size() === 'lg' ? 24 : 20\"></svg>\n        }\n        @case ('primary') {\n          <svg lucideShieldAlert [size]=\"size() === 'sm' ? 16 : size() === 'lg' ? 24 : 20\"></svg>\n        }\n        @default {\n          <svg lucideInfo [size]=\"size() === 'sm' ? 16 : size() === 'lg' ? 24 : 20\"></svg>\n        }\n      }\n    }\n  </div>\n  }\n\n  <!-- Main Alert Body & Details -->\n  <div class=\"talos-alert-body\">\n    <!-- Header: Title & Severity Badge -->\n    <div class=\"talos-alert-header\">\n      @if (title()) {\n        @if (isTitleTemplate()) {\n          <div class=\"talos-alert-title\">\n            <ng-container *ngTemplateOutlet=\"titleTemplate()\"></ng-container>\n          </div>\n        } @else {\n          <h4 class=\"talos-alert-title\">{{ title() }}</h4>\n        }\n      }\n      <ng-content select=\"[talosAlertTitle], talos-alert-title\"></ng-content>\n\n      @if (showSeverityBadge() && severityLabel()) {\n        <span class=\"talos-alert-severity-badge\" [attr.data-severity]=\"resolvedVariant()\">\n          {{ severityLabel() }}\n        </span>\n      }\n    </div>\n\n    <!-- Message Description Content -->\n    <div class=\"talos-alert-message\">\n      @if (message()) {\n        @if (isMessageTemplate()) {\n          <ng-container *ngTemplateOutlet=\"messageTemplate()\"></ng-container>\n        } @else {\n          <span>{{ message() }}</span>\n        }\n      }\n      <ng-content select=\"[talosAlertDescription], talos-alert-description\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <!-- Actions & Close Button -->\n  <div class=\"talos-alert-actions\">\n    <ng-content select=\"[talosAlertActions], talos-alert-actions\"></ng-content>\n\n    @if (actionLabel()) {\n      <button type=\"button\" class=\"talos-alert-action-btn\" (click)=\"onActionClick()\">\n        {{ actionLabel() }}\n      </button>\n    }\n\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        class=\"talos-alert-close-btn\"\n        aria-label=\"Dismiss alert\"\n        (click)=\"onCloseClick()\"\n      >\n        <svg lucideX [size]=\"size() === 'sm' ? 14 : 16\"></svg>\n      </button>\n    }\n  </div>\n</div>\n}\n", styles: [":host{display:block;width:100%;transition:opacity .2s ease,transform .2s ease,max-height .2s ease,margin .2s ease}:host.is-dismissing{opacity:0;transform:translateY(-4px) scale(.98);pointer-events:none}:host.is-dismissed{display:none!important}.talos-alert{position:relative;display:flex;align-items:flex-start;gap:var(--talos-alert-gap, .75rem);width:100%;border-radius:var(--talos-alert-radius, .5rem);box-sizing:border-box;font-family:inherit;transition:all .2s ease-in-out}.talos-alert.size-sm{padding:var(--talos-alert-padding-sm, .5rem .75rem);font-size:.8125rem}.talos-alert.size-sm .talos-alert-title{font-size:.875rem}.talos-alert.size-md{padding:var(--talos-alert-padding-md, .75rem 1rem);font-size:.875rem}.talos-alert.size-md .talos-alert-title{font-size:.9375rem}.talos-alert.size-lg{padding:var(--talos-alert-padding-lg, 1rem 1.25rem);font-size:.9375rem}.talos-alert.size-lg .talos-alert-title{font-size:1.0625rem}.talos-alert.is-bordered{border-width:1px;border-style:solid}.talos-alert.appearance-subtle{border:1px solid transparent}.talos-alert.appearance-subtle.variant-default{background-color:var(--talos-alert-default-bg);border-color:var(--talos-alert-default-border);color:var(--talos-alert-default-text)}.talos-alert.appearance-subtle.variant-default .talos-alert-icon{color:var(--talos-alert-default-icon)}.talos-alert.appearance-subtle.variant-info{background-color:var(--talos-alert-info-bg);border-color:var(--talos-alert-info-border);color:var(--talos-alert-info-text)}.talos-alert.appearance-subtle.variant-info .talos-alert-icon{color:var(--talos-alert-info-icon)}.talos-alert.appearance-subtle.variant-success{background-color:var(--talos-alert-success-bg);border-color:var(--talos-alert-success-border);color:var(--talos-alert-success-text)}.talos-alert.appearance-subtle.variant-success .talos-alert-icon{color:var(--talos-alert-success-icon)}.talos-alert.appearance-subtle.variant-warning{background-color:var(--talos-alert-warning-bg);border-color:var(--talos-alert-warning-border);color:var(--talos-alert-warning-text)}.talos-alert.appearance-subtle.variant-warning .talos-alert-icon{color:var(--talos-alert-warning-icon)}.talos-alert.appearance-subtle.variant-error{background-color:var(--talos-alert-error-bg);border-color:var(--talos-alert-error-border);color:var(--talos-alert-error-text)}.talos-alert.appearance-subtle.variant-error .talos-alert-icon{color:var(--talos-alert-error-icon)}.talos-alert.appearance-subtle.variant-critical{background-color:var(--talos-alert-critical-bg);border-color:var(--talos-alert-critical-border);color:var(--talos-alert-critical-text)}.talos-alert.appearance-subtle.variant-critical .talos-alert-icon{color:var(--talos-alert-critical-icon)}.talos-alert.appearance-subtle.variant-primary{background-color:var(--talos-alert-primary-bg);border-color:var(--talos-alert-primary-border);color:var(--talos-alert-primary-text)}.talos-alert.appearance-subtle.variant-primary .talos-alert-icon{color:var(--talos-alert-primary-icon)}.talos-alert.appearance-outline{background-color:transparent;border:1px solid currentColor}.talos-alert.appearance-outline.variant-default{border-color:var(--talos-alert-default-border);color:var(--talos-alert-default-text)}.talos-alert.appearance-outline.variant-default .talos-alert-icon{color:var(--talos-alert-default-icon)}.talos-alert.appearance-outline.variant-info{border-color:var(--talos-alert-info-icon);color:var(--talos-alert-info-icon)}.talos-alert.appearance-outline.variant-info .talos-alert-body{color:var(--talos-text-color, #0f172a)}.talos-alert.appearance-outline.variant-info .talos-alert-icon{color:var(--talos-alert-info-icon)}.talos-alert.appearance-outline.variant-success{border-color:var(--talos-alert-success-icon);color:var(--talos-alert-success-icon)}.talos-alert.appearance-outline.variant-success .talos-alert-body{color:var(--talos-text-color, #0f172a)}.talos-alert.appearance-outline.variant-success .talos-alert-icon{color:var(--talos-alert-success-icon)}.talos-alert.appearance-outline.variant-warning{border-color:var(--talos-alert-warning-icon);color:var(--talos-alert-warning-icon)}.talos-alert.appearance-outline.variant-warning .talos-alert-body{color:var(--talos-text-color, #0f172a)}.talos-alert.appearance-outline.variant-warning .talos-alert-icon{color:var(--talos-alert-warning-icon)}.talos-alert.appearance-outline.variant-error{border-color:var(--talos-alert-error-icon);color:var(--talos-alert-error-icon)}.talos-alert.appearance-outline.variant-error .talos-alert-body{color:var(--talos-text-color, #0f172a)}.talos-alert.appearance-outline.variant-error .talos-alert-icon{color:var(--talos-alert-error-icon)}.talos-alert.appearance-outline.variant-critical{border-color:var(--talos-alert-critical-border);color:var(--talos-alert-critical-icon)}.talos-alert.appearance-outline.variant-critical .talos-alert-body{color:var(--talos-text-color, #0f172a)}.talos-alert.appearance-outline.variant-critical .talos-alert-icon{color:var(--talos-alert-critical-icon)}.talos-alert.appearance-outline.variant-primary{border-color:var(--talos-alert-primary-icon);color:var(--talos-alert-primary-icon)}.talos-alert.appearance-outline.variant-primary .talos-alert-body{color:var(--talos-text-color, #0f172a)}.talos-alert.appearance-outline.variant-primary .talos-alert-icon{color:var(--talos-alert-primary-icon)}.talos-alert.appearance-filled{border:1px solid transparent;color:#fff}.talos-alert.appearance-filled .talos-alert-icon,.talos-alert.appearance-filled .talos-alert-title{color:#fff}.talos-alert.appearance-filled .talos-alert-message{color:#ffffffeb}.talos-alert.appearance-filled.variant-default{background-color:#475569}.talos-alert.appearance-filled.variant-info{background-color:#2563eb}.talos-alert.appearance-filled.variant-success{background-color:#16a34a}.talos-alert.appearance-filled.variant-warning{background-color:#d97706}.talos-alert.appearance-filled.variant-error{background-color:#dc2626}.talos-alert.appearance-filled.variant-critical{background-color:#991b1b;box-shadow:0 0 15px #dc262666}.talos-alert.appearance-filled.variant-primary{background-color:#2563eb}.talos-alert.appearance-filled .talos-alert-action-btn{background-color:#fff3;color:#fff;border-color:#ffffff59}.talos-alert.appearance-filled .talos-alert-action-btn:hover{background-color:#ffffff4d}.talos-alert.appearance-filled .talos-alert-close-btn{color:#fffc}.talos-alert.appearance-filled .talos-alert-close-btn:hover{background-color:#fff3;color:#fff}.talos-alert.appearance-accent,.talos-alert.appearance-left-border{background-color:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-border-color, #e2e8f0);border-left-width:4px;box-shadow:var(--talos-alert-shadow);color:var(--talos-text-color, #0f172a)}.talos-alert.appearance-accent.variant-default,.talos-alert.appearance-left-border.variant-default{border-left-color:var(--talos-alert-default-icon)}.talos-alert.appearance-accent.variant-default .talos-alert-icon,.talos-alert.appearance-left-border.variant-default .talos-alert-icon{color:var(--talos-alert-default-icon)}.talos-alert.appearance-accent.variant-info,.talos-alert.appearance-left-border.variant-info{border-left-color:var(--talos-alert-info-icon)}.talos-alert.appearance-accent.variant-info .talos-alert-icon,.talos-alert.appearance-left-border.variant-info .talos-alert-icon{color:var(--talos-alert-info-icon)}.talos-alert.appearance-accent.variant-success,.talos-alert.appearance-left-border.variant-success{border-left-color:var(--talos-alert-success-icon)}.talos-alert.appearance-accent.variant-success .talos-alert-icon,.talos-alert.appearance-left-border.variant-success .talos-alert-icon{color:var(--talos-alert-success-icon)}.talos-alert.appearance-accent.variant-warning,.talos-alert.appearance-left-border.variant-warning{border-left-color:var(--talos-alert-warning-icon)}.talos-alert.appearance-accent.variant-warning .talos-alert-icon,.talos-alert.appearance-left-border.variant-warning .talos-alert-icon{color:var(--talos-alert-warning-icon)}.talos-alert.appearance-accent.variant-error,.talos-alert.appearance-left-border.variant-error{border-left-color:var(--talos-alert-error-icon)}.talos-alert.appearance-accent.variant-error .talos-alert-icon,.talos-alert.appearance-left-border.variant-error .talos-alert-icon{color:var(--talos-alert-error-icon)}.talos-alert.appearance-accent.variant-critical,.talos-alert.appearance-left-border.variant-critical{border-left-color:#ef4444}.talos-alert.appearance-accent.variant-critical .talos-alert-icon,.talos-alert.appearance-left-border.variant-critical .talos-alert-icon{color:#ef4444}.talos-alert.appearance-accent.variant-primary,.talos-alert.appearance-left-border.variant-primary{border-left-color:var(--talos-alert-primary-icon)}.talos-alert.appearance-accent.variant-primary .talos-alert-icon,.talos-alert.appearance-left-border.variant-primary .talos-alert-icon{color:var(--talos-alert-primary-icon)}.talos-alert-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;line-height:1}.talos-alert-icon svg{display:block}.talos-alert-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.25rem}.talos-alert-header{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.talos-alert-title{margin:0;font-weight:600;line-height:1.35;color:inherit}.talos-alert-message{line-height:1.45;color:inherit;opacity:.95}.talos-alert-severity-badge{display:inline-flex;align-items:center;padding:.125rem .4375rem;border-radius:9999px;font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background-color:#00000014;color:inherit}.talos-alert-severity-badge[data-severity=critical]{background-color:#ef4444;color:#fff}.talos-alert-severity-badge[data-severity=error]{background-color:#ef444433;color:#dc2626}.talos-alert-severity-badge[data-severity=warning]{background-color:#f59e0b33;color:#b45309}.talos-alert-severity-badge[data-severity=info]{background-color:#3b82f633;color:#1d4ed8}.talos-alert-severity-badge[data-severity=success]{background-color:#22c55e33;color:#15803d}.talos-alert-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0;margin-left:auto}.talos-alert-action-btn{display:inline-flex;align-items:center;justify-content:center;padding:.25rem .625rem;font-size:.75rem;font-weight:600;border-radius:var(--talos-border-radius, .375rem);border:1px solid currentColor;background-color:transparent;color:inherit;cursor:pointer;transition:all .15s ease}.talos-alert-action-btn:hover{background-color:#0000000f}.talos-alert-action-btn:active{transform:scale(.97)}.talos-alert-close-btn{display:inline-flex;align-items:center;justify-content:center;padding:.25rem;border:none;background:transparent;color:inherit;opacity:.7;border-radius:var(--talos-border-radius, .375rem);cursor:pointer;transition:all .15s ease}.talos-alert-close-btn:hover{opacity:1;background-color:#00000014}.talos-alert-close-btn:active{transform:scale(.92)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideInfo, selector: "svg[lucideInfo]" }, { kind: "component", type: LucideCheckCircle2, selector: "svg[lucideCircleCheck], svg[lucideCheckCircle2]" }, { kind: "component", type: LucideAlertTriangle, selector: "svg[lucideTriangleAlert], svg[lucideAlertTriangle]" }, { kind: "component", type: LucideCircleAlert, selector: "svg[lucideCircleAlert], svg[lucideAlertCircle]" }, { kind: "component", type: LucideAlertOctagon, selector: "svg[lucideOctagonAlert], svg[lucideAlertOctagon]" }, { kind: "component", type: LucideShieldAlert, selector: "svg[lucideShieldAlert]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosAlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-alert', imports: [
+                        NgComponentOutlet,
+                        NgTemplateOutlet,
+                        LucideInfo,
+                        LucideCheckCircle2,
+                        LucideAlertTriangle,
+                        LucideCircleAlert,
+                        LucideAlertOctagon,
+                        LucideShieldAlert,
+                        LucideX
+                    ], host: {
+                        '[class.talos-alert-host]': 'true',
+                        '[class.is-dismissing]': 'isDismissing()',
+                        '[class.is-dismissed]': 'isDismissed()'
+                    }, template: "@if (!isDismissed()) {\n<div\n  class=\"talos-alert\"\n  [class.variant-default]=\"resolvedVariant() === 'default'\"\n  [class.variant-info]=\"resolvedVariant() === 'info'\"\n  [class.variant-success]=\"resolvedVariant() === 'success'\"\n  [class.variant-warning]=\"resolvedVariant() === 'warning'\"\n  [class.variant-error]=\"resolvedVariant() === 'error'\"\n  [class.variant-primary]=\"resolvedVariant() === 'primary'\"\n  [class.variant-critical]=\"resolvedVariant() === 'critical'\"\n  [class.appearance-subtle]=\"appearance() === 'subtle'\"\n  [class.appearance-outline]=\"appearance() === 'outline'\"\n  [class.appearance-filled]=\"appearance() === 'filled'\"\n  [class.appearance-accent]=\"appearance() === 'accent'\"\n  [class.appearance-left-border]=\"appearance() === 'left-border'\"\n  [class.size-sm]=\"size() === 'sm'\"\n  [class.size-md]=\"size() === 'md'\"\n  [class.size-lg]=\"size() === 'lg'\"\n  [class.is-bordered]=\"bordered()\"\n  [class.is-dismissing]=\"isDismissing()\"\n  [class]=\"customClass()\"\n  [attr.role]=\"ariaRole()\"\n  [attr.aria-live]=\"ariaLive()\"\n>\n  <!-- Icon Section -->\n  @if (showIcon() && icon() !== false) {\n  <div class=\"talos-alert-icon\" aria-hidden=\"true\">\n    @if (isIconTemplate()) {\n      <ng-container *ngTemplateOutlet=\"iconTemplate()\"></ng-container>\n    } @else if (customIconComponent()) {\n      <ng-container *ngComponentOutlet=\"customIconComponent()\"></ng-container>\n    } @else {\n      <ng-content select=\"[talosAlertIcon], talos-alert-icon\"></ng-content>\n      @switch (resolvedVariant()) {\n        @case ('critical') {\n          <svg lucideAlertOctagon [size]=\"size() === 'sm' ? 16 : size() === 'lg' ? 24 : 20\"></svg>\n        }\n        @case ('error') {\n          <svg lucideCircleAlert [size]=\"size() === 'sm' ? 16 : size() === 'lg' ? 24 : 20\"></svg>\n        }\n        @case ('warning') {\n          <svg lucideAlertTriangle [size]=\"size() === 'sm' ? 16 : size() === 'lg' ? 24 : 20\"></svg>\n        }\n        @case ('success') {\n          <svg lucideCheckCircle2 [size]=\"size() === 'sm' ? 16 : size() === 'lg' ? 24 : 20\"></svg>\n        }\n        @case ('primary') {\n          <svg lucideShieldAlert [size]=\"size() === 'sm' ? 16 : size() === 'lg' ? 24 : 20\"></svg>\n        }\n        @default {\n          <svg lucideInfo [size]=\"size() === 'sm' ? 16 : size() === 'lg' ? 24 : 20\"></svg>\n        }\n      }\n    }\n  </div>\n  }\n\n  <!-- Main Alert Body & Details -->\n  <div class=\"talos-alert-body\">\n    <!-- Header: Title & Severity Badge -->\n    <div class=\"talos-alert-header\">\n      @if (title()) {\n        @if (isTitleTemplate()) {\n          <div class=\"talos-alert-title\">\n            <ng-container *ngTemplateOutlet=\"titleTemplate()\"></ng-container>\n          </div>\n        } @else {\n          <h4 class=\"talos-alert-title\">{{ title() }}</h4>\n        }\n      }\n      <ng-content select=\"[talosAlertTitle], talos-alert-title\"></ng-content>\n\n      @if (showSeverityBadge() && severityLabel()) {\n        <span class=\"talos-alert-severity-badge\" [attr.data-severity]=\"resolvedVariant()\">\n          {{ severityLabel() }}\n        </span>\n      }\n    </div>\n\n    <!-- Message Description Content -->\n    <div class=\"talos-alert-message\">\n      @if (message()) {\n        @if (isMessageTemplate()) {\n          <ng-container *ngTemplateOutlet=\"messageTemplate()\"></ng-container>\n        } @else {\n          <span>{{ message() }}</span>\n        }\n      }\n      <ng-content select=\"[talosAlertDescription], talos-alert-description\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <!-- Actions & Close Button -->\n  <div class=\"talos-alert-actions\">\n    <ng-content select=\"[talosAlertActions], talos-alert-actions\"></ng-content>\n\n    @if (actionLabel()) {\n      <button type=\"button\" class=\"talos-alert-action-btn\" (click)=\"onActionClick()\">\n        {{ actionLabel() }}\n      </button>\n    }\n\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        class=\"talos-alert-close-btn\"\n        aria-label=\"Dismiss alert\"\n        (click)=\"onCloseClick()\"\n      >\n        <svg lucideX [size]=\"size() === 'sm' ? 14 : 16\"></svg>\n      </button>\n    }\n  </div>\n</div>\n}\n", styles: [":host{display:block;width:100%;transition:opacity .2s ease,transform .2s ease,max-height .2s ease,margin .2s ease}:host.is-dismissing{opacity:0;transform:translateY(-4px) scale(.98);pointer-events:none}:host.is-dismissed{display:none!important}.talos-alert{position:relative;display:flex;align-items:flex-start;gap:var(--talos-alert-gap, .75rem);width:100%;border-radius:var(--talos-alert-radius, .5rem);box-sizing:border-box;font-family:inherit;transition:all .2s ease-in-out}.talos-alert.size-sm{padding:var(--talos-alert-padding-sm, .5rem .75rem);font-size:.8125rem}.talos-alert.size-sm .talos-alert-title{font-size:.875rem}.talos-alert.size-md{padding:var(--talos-alert-padding-md, .75rem 1rem);font-size:.875rem}.talos-alert.size-md .talos-alert-title{font-size:.9375rem}.talos-alert.size-lg{padding:var(--talos-alert-padding-lg, 1rem 1.25rem);font-size:.9375rem}.talos-alert.size-lg .talos-alert-title{font-size:1.0625rem}.talos-alert.is-bordered{border-width:1px;border-style:solid}.talos-alert.appearance-subtle{border:1px solid transparent}.talos-alert.appearance-subtle.variant-default{background-color:var(--talos-alert-default-bg);border-color:var(--talos-alert-default-border);color:var(--talos-alert-default-text)}.talos-alert.appearance-subtle.variant-default .talos-alert-icon{color:var(--talos-alert-default-icon)}.talos-alert.appearance-subtle.variant-info{background-color:var(--talos-alert-info-bg);border-color:var(--talos-alert-info-border);color:var(--talos-alert-info-text)}.talos-alert.appearance-subtle.variant-info .talos-alert-icon{color:var(--talos-alert-info-icon)}.talos-alert.appearance-subtle.variant-success{background-color:var(--talos-alert-success-bg);border-color:var(--talos-alert-success-border);color:var(--talos-alert-success-text)}.talos-alert.appearance-subtle.variant-success .talos-alert-icon{color:var(--talos-alert-success-icon)}.talos-alert.appearance-subtle.variant-warning{background-color:var(--talos-alert-warning-bg);border-color:var(--talos-alert-warning-border);color:var(--talos-alert-warning-text)}.talos-alert.appearance-subtle.variant-warning .talos-alert-icon{color:var(--talos-alert-warning-icon)}.talos-alert.appearance-subtle.variant-error{background-color:var(--talos-alert-error-bg);border-color:var(--talos-alert-error-border);color:var(--talos-alert-error-text)}.talos-alert.appearance-subtle.variant-error .talos-alert-icon{color:var(--talos-alert-error-icon)}.talos-alert.appearance-subtle.variant-critical{background-color:var(--talos-alert-critical-bg);border-color:var(--talos-alert-critical-border);color:var(--talos-alert-critical-text)}.talos-alert.appearance-subtle.variant-critical .talos-alert-icon{color:var(--talos-alert-critical-icon)}.talos-alert.appearance-subtle.variant-primary{background-color:var(--talos-alert-primary-bg);border-color:var(--talos-alert-primary-border);color:var(--talos-alert-primary-text)}.talos-alert.appearance-subtle.variant-primary .talos-alert-icon{color:var(--talos-alert-primary-icon)}.talos-alert.appearance-outline{background-color:transparent;border:1px solid currentColor}.talos-alert.appearance-outline.variant-default{border-color:var(--talos-alert-default-border);color:var(--talos-alert-default-text)}.talos-alert.appearance-outline.variant-default .talos-alert-icon{color:var(--talos-alert-default-icon)}.talos-alert.appearance-outline.variant-info{border-color:var(--talos-alert-info-icon);color:var(--talos-alert-info-icon)}.talos-alert.appearance-outline.variant-info .talos-alert-body{color:var(--talos-text-color, #0f172a)}.talos-alert.appearance-outline.variant-info .talos-alert-icon{color:var(--talos-alert-info-icon)}.talos-alert.appearance-outline.variant-success{border-color:var(--talos-alert-success-icon);color:var(--talos-alert-success-icon)}.talos-alert.appearance-outline.variant-success .talos-alert-body{color:var(--talos-text-color, #0f172a)}.talos-alert.appearance-outline.variant-success .talos-alert-icon{color:var(--talos-alert-success-icon)}.talos-alert.appearance-outline.variant-warning{border-color:var(--talos-alert-warning-icon);color:var(--talos-alert-warning-icon)}.talos-alert.appearance-outline.variant-warning .talos-alert-body{color:var(--talos-text-color, #0f172a)}.talos-alert.appearance-outline.variant-warning .talos-alert-icon{color:var(--talos-alert-warning-icon)}.talos-alert.appearance-outline.variant-error{border-color:var(--talos-alert-error-icon);color:var(--talos-alert-error-icon)}.talos-alert.appearance-outline.variant-error .talos-alert-body{color:var(--talos-text-color, #0f172a)}.talos-alert.appearance-outline.variant-error .talos-alert-icon{color:var(--talos-alert-error-icon)}.talos-alert.appearance-outline.variant-critical{border-color:var(--talos-alert-critical-border);color:var(--talos-alert-critical-icon)}.talos-alert.appearance-outline.variant-critical .talos-alert-body{color:var(--talos-text-color, #0f172a)}.talos-alert.appearance-outline.variant-critical .talos-alert-icon{color:var(--talos-alert-critical-icon)}.talos-alert.appearance-outline.variant-primary{border-color:var(--talos-alert-primary-icon);color:var(--talos-alert-primary-icon)}.talos-alert.appearance-outline.variant-primary .talos-alert-body{color:var(--talos-text-color, #0f172a)}.talos-alert.appearance-outline.variant-primary .talos-alert-icon{color:var(--talos-alert-primary-icon)}.talos-alert.appearance-filled{border:1px solid transparent;color:#fff}.talos-alert.appearance-filled .talos-alert-icon,.talos-alert.appearance-filled .talos-alert-title{color:#fff}.talos-alert.appearance-filled .talos-alert-message{color:#ffffffeb}.talos-alert.appearance-filled.variant-default{background-color:#475569}.talos-alert.appearance-filled.variant-info{background-color:#2563eb}.talos-alert.appearance-filled.variant-success{background-color:#16a34a}.talos-alert.appearance-filled.variant-warning{background-color:#d97706}.talos-alert.appearance-filled.variant-error{background-color:#dc2626}.talos-alert.appearance-filled.variant-critical{background-color:#991b1b;box-shadow:0 0 15px #dc262666}.talos-alert.appearance-filled.variant-primary{background-color:#2563eb}.talos-alert.appearance-filled .talos-alert-action-btn{background-color:#fff3;color:#fff;border-color:#ffffff59}.talos-alert.appearance-filled .talos-alert-action-btn:hover{background-color:#ffffff4d}.talos-alert.appearance-filled .talos-alert-close-btn{color:#fffc}.talos-alert.appearance-filled .talos-alert-close-btn:hover{background-color:#fff3;color:#fff}.talos-alert.appearance-accent,.talos-alert.appearance-left-border{background-color:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-border-color, #e2e8f0);border-left-width:4px;box-shadow:var(--talos-alert-shadow);color:var(--talos-text-color, #0f172a)}.talos-alert.appearance-accent.variant-default,.talos-alert.appearance-left-border.variant-default{border-left-color:var(--talos-alert-default-icon)}.talos-alert.appearance-accent.variant-default .talos-alert-icon,.talos-alert.appearance-left-border.variant-default .talos-alert-icon{color:var(--talos-alert-default-icon)}.talos-alert.appearance-accent.variant-info,.talos-alert.appearance-left-border.variant-info{border-left-color:var(--talos-alert-info-icon)}.talos-alert.appearance-accent.variant-info .talos-alert-icon,.talos-alert.appearance-left-border.variant-info .talos-alert-icon{color:var(--talos-alert-info-icon)}.talos-alert.appearance-accent.variant-success,.talos-alert.appearance-left-border.variant-success{border-left-color:var(--talos-alert-success-icon)}.talos-alert.appearance-accent.variant-success .talos-alert-icon,.talos-alert.appearance-left-border.variant-success .talos-alert-icon{color:var(--talos-alert-success-icon)}.talos-alert.appearance-accent.variant-warning,.talos-alert.appearance-left-border.variant-warning{border-left-color:var(--talos-alert-warning-icon)}.talos-alert.appearance-accent.variant-warning .talos-alert-icon,.talos-alert.appearance-left-border.variant-warning .talos-alert-icon{color:var(--talos-alert-warning-icon)}.talos-alert.appearance-accent.variant-error,.talos-alert.appearance-left-border.variant-error{border-left-color:var(--talos-alert-error-icon)}.talos-alert.appearance-accent.variant-error .talos-alert-icon,.talos-alert.appearance-left-border.variant-error .talos-alert-icon{color:var(--talos-alert-error-icon)}.talos-alert.appearance-accent.variant-critical,.talos-alert.appearance-left-border.variant-critical{border-left-color:#ef4444}.talos-alert.appearance-accent.variant-critical .talos-alert-icon,.talos-alert.appearance-left-border.variant-critical .talos-alert-icon{color:#ef4444}.talos-alert.appearance-accent.variant-primary,.talos-alert.appearance-left-border.variant-primary{border-left-color:var(--talos-alert-primary-icon)}.talos-alert.appearance-accent.variant-primary .talos-alert-icon,.talos-alert.appearance-left-border.variant-primary .talos-alert-icon{color:var(--talos-alert-primary-icon)}.talos-alert-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;line-height:1}.talos-alert-icon svg{display:block}.talos-alert-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.25rem}.talos-alert-header{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.talos-alert-title{margin:0;font-weight:600;line-height:1.35;color:inherit}.talos-alert-message{line-height:1.45;color:inherit;opacity:.95}.talos-alert-severity-badge{display:inline-flex;align-items:center;padding:.125rem .4375rem;border-radius:9999px;font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background-color:#00000014;color:inherit}.talos-alert-severity-badge[data-severity=critical]{background-color:#ef4444;color:#fff}.talos-alert-severity-badge[data-severity=error]{background-color:#ef444433;color:#dc2626}.talos-alert-severity-badge[data-severity=warning]{background-color:#f59e0b33;color:#b45309}.talos-alert-severity-badge[data-severity=info]{background-color:#3b82f633;color:#1d4ed8}.talos-alert-severity-badge[data-severity=success]{background-color:#22c55e33;color:#15803d}.talos-alert-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0;margin-left:auto}.talos-alert-action-btn{display:inline-flex;align-items:center;justify-content:center;padding:.25rem .625rem;font-size:.75rem;font-weight:600;border-radius:var(--talos-border-radius, .375rem);border:1px solid currentColor;background-color:transparent;color:inherit;cursor:pointer;transition:all .15s ease}.talos-alert-action-btn:hover{background-color:#0000000f}.talos-alert-action-btn:active{transform:scale(.97)}.talos-alert-close-btn{display:inline-flex;align-items:center;justify-content:center;padding:.25rem;border:none;background:transparent;color:inherit;opacity:.7;border-radius:var(--talos-border-radius, .375rem);cursor:pointer;transition:all .15s ease}.talos-alert-close-btn:hover{opacity:1;background-color:#00000014}.talos-alert-close-btn:active{transform:scale(.92)}\n"] }]
+        }], propDecorators: { severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showSeverityBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeverityBadge", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }], action: [{ type: i0.Output, args: ["action"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+class TalosAlertContainerComponent {
+    alertService = inject(TalosAlertService);
+    /** Mode of alerts to render from the service ('inline', 'banner', or 'all') */
+    type = input('inline', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    targetAlerts = computed(() => {
+        const t = this.type();
+        if (t === 'banner') {
+            return this.alertService.bannerAlerts();
+        }
+        if (t === 'all') {
+            return [...this.alertService.bannerAlerts(), ...this.alertService.alerts()];
+        }
+        return this.alertService.alerts();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "targetAlerts" }] : /* istanbul ignore next */ []));
+    onDismiss(id) {
+        if (this.type() === 'banner') {
+            this.alertService.dismissBanner(id);
+        }
+        else {
+            this.alertService.dismiss(id);
+        }
+    }
+    onAction(item) {
+        if (item.onAction) {
+            item.onAction();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosAlertContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosAlertContainerComponent, isStandalone: true, selector: "talos-alert-container", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.talos-alert-container-host": "true" } }, ngImport: i0, template: `
+    @if (targetAlerts().length > 0) {
+      <div class="talos-alert-container-stack" [class.is-banner]="type() === 'banner'">
+        @for (item of targetAlerts(); track item.id) {
+          <talos-alert
+            [variant]="item.variant || 'default'"
+            [severity]="item.severity"
+            [appearance]="item.appearance || 'subtle'"
+            [size]="item.size || 'md'"
+            [title]="item.title"
+            [message]="item.message"
+            [showIcon]="item.showIcon ?? true"
+            [icon]="item.icon"
+            [showSeverityBadge]="item.showSeverityBadge ?? false"
+            [dismissible]="item.dismissible ?? true"
+            [actionLabel]="item.actionLabel"
+            [bordered]="item.bordered ?? false"
+            [customClass]="item.customClass || ''"
+            (dismiss)="onDismiss(item.id)"
+            (action)="onAction(item)"
+          />
+        }
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:block;width:100%}.talos-alert-container-stack{display:flex;flex-direction:column;gap:.75rem;width:100%}.talos-alert-container-stack.is-banner{gap:.5rem}.talos-alert-container-stack.is-banner talos-alert{border-radius:0;box-shadow:0 2px 8px #0000001a}\n"], dependencies: [{ kind: "component", type: TalosAlertComponent, selector: "talos-alert", inputs: ["severity", "variant", "appearance", "size", "title", "message", "showIcon", "icon", "showSeverityBadge", "dismissible", "actionLabel", "bordered", "customClass"], outputs: ["dismiss", "action", "closed"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosAlertContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-alert-container', imports: [TalosAlertComponent], template: `
+    @if (targetAlerts().length > 0) {
+      <div class="talos-alert-container-stack" [class.is-banner]="type() === 'banner'">
+        @for (item of targetAlerts(); track item.id) {
+          <talos-alert
+            [variant]="item.variant || 'default'"
+            [severity]="item.severity"
+            [appearance]="item.appearance || 'subtle'"
+            [size]="item.size || 'md'"
+            [title]="item.title"
+            [message]="item.message"
+            [showIcon]="item.showIcon ?? true"
+            [icon]="item.icon"
+            [showSeverityBadge]="item.showSeverityBadge ?? false"
+            [dismissible]="item.dismissible ?? true"
+            [actionLabel]="item.actionLabel"
+            [bordered]="item.bordered ?? false"
+            [customClass]="item.customClass || ''"
+            (dismiss)="onDismiss(item.id)"
+            (action)="onAction(item)"
+          />
+        }
+      </div>
+    }
+  `, host: {
+                        '[class.talos-alert-container-host]': 'true'
+                    }, styles: [":host{display:block;width:100%}.talos-alert-container-stack{display:flex;flex-direction:column;gap:.75rem;width:100%}.talos-alert-container-stack.is-banner{gap:.5rem}.talos-alert-container-stack.is-banner talos-alert{border-radius:0;box-shadow:0 2px 8px #0000001a}\n"] }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
+
+/**
+ * Convenience NgModule wrapping standalone alert components and directives.
+ */
+class TalosAlertModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosAlertModule, imports: [TalosAlertComponent,
+            TalosAlertContainerComponent,
+            TalosAlertTitleDirective,
+            TalosAlertDescriptionDirective,
+            TalosAlertActionsDirective,
+            TalosAlertIconDirective], exports: [TalosAlertComponent,
+            TalosAlertContainerComponent,
+            TalosAlertTitleDirective,
+            TalosAlertDescriptionDirective,
+            TalosAlertActionsDirective,
+            TalosAlertIconDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosAlertModule, imports: [TalosAlertComponent,
+            TalosAlertContainerComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosAlertModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        TalosAlertComponent,
+                        TalosAlertContainerComponent,
+                        TalosAlertTitleDirective,
+                        TalosAlertDescriptionDirective,
+                        TalosAlertActionsDirective,
+                        TalosAlertIconDirective
+                    ],
+                    exports: [
+                        TalosAlertComponent,
+                        TalosAlertContainerComponent,
+                        TalosAlertTitleDirective,
+                        TalosAlertDescriptionDirective,
+                        TalosAlertActionsDirective,
+                        TalosAlertIconDirective
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TalosAlertActionsDirective, TalosAlertComponent, TalosAlertContainerComponent, TalosAlertDescriptionDirective, TalosAlertIconDirective, TalosAlertModule, TalosAlertService, TalosAlertTitleDirective };
+//# sourceMappingURL=weeehaoooz-talos-ui-feedback-alert.mjs.map