import * as i0 from '@angular/core';
import { InjectionToken, inject, TemplateRef, Directive, Renderer2, ElementRef, contentChild, input, numberAttribute, booleanAttribute, output, effect, Component } from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';

const ALERT = new InjectionToken('Alert');

class AlertIconDirective {
    templateRef = inject(TemplateRef, { optional: true });
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AlertIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: AlertIconDirective, isStandalone: true, selector: "[ngsAlertIcon]", host: { classAttribute: "ngs-alert-icon" }, exportAs: ["ngsAlertIcon"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AlertIconDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsAlertIcon]',
                    exportAs: 'ngsAlertIcon',
                    host: {
                        'class': 'ngs-alert-icon'
                    }
                }]
        }] });

class Alert {
    _renderer = inject(Renderer2);
    _elementRef = inject(ElementRef);
    iconRef = contentChild(AlertIconDirective, ...(ngDevMode ? [{ debugName: "iconRef" }] : /* istanbul ignore next */ []));
    autoClose = input(null, { ...(ngDevMode ? { debugName: "autoClose" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    bordered = input(false, { ...(ngDevMode ? { debugName: "bordered" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
    closed = output();
    _autoCloseTimeout = undefined;
    constructor() {
        effect(() => {
            this._renderer.setAttribute(this._elementRef.nativeElement, 'ngs-alert-variant', this.variant());
            clearTimeout(this._autoCloseTimeout);
            if (!this.autoClose()) {
                return;
            }
            this._autoCloseTimeout = setTimeout(() => {
                this._close();
            }, this.autoClose());
        });
    }
    get api() {
        return {
            close: () => this._close()
        };
    }
    get iconRefTemplate() {
        return this.iconRef()?.templateRef;
    }
    _close() {
        clearTimeout(this._autoCloseTimeout);
        this._elementRef.nativeElement.remove();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Alert, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Alert, isStandalone: true, selector: "ngs-alert", inputs: { autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class.is-bordered": "bordered()" }, classAttribute: "ngs-alert" }, providers: [
            {
                provide: ALERT,
                useExisting: Alert
            }
        ], queries: [{ propertyName: "iconRef", first: true, predicate: AlertIconDirective, descendants: true, isSignal: true }], exportAs: ["ngsAlert"], ngImport: i0, template: "<div class=\"thumbnail\">\n  <ng-content select=\"[ngsAlertIcon]\"/>\n  @if (iconRef()) {\n    <ng-container [ngTemplateOutlet]=\"iconRefTemplate\"/>\n  }\n</div>\n<div class=\"content\">\n  <div class=\"title\">\n    <ng-content select=\"ngs-alert-title,[ngsAlertTitle]\"/>\n  </div>\n  <ng-content/>\n</div>\n<div class=\"actions\">\n  <ng-content select=\"[ngsAlertAction]\"/>\n</div>\n", styles: [":host{--ngs-alert-bg-color: transparent;--ngs-alert-color: inherit;--ngs-alert-icon-color: white;--ngs-alert-border-color: transparent;--ngs-alert-border-radius: var(--ngs-radius-xl);--ngs-alert-padding: calc(var(--spacing, .25rem) * 2.5) calc(var(--spacing, .25rem) * 3);--ngs-alert-has-thumbnail-padding: calc(var(--spacing, .25rem) * 1.5);--ngs-alert-gap: calc(var(--spacing, .25rem) * 3.5);--ngs-alert-border-width: 1px;--ngs-alert-font-size: var(--ngs-font-size-sm);--ngs-alert-thumbnail-bg: white;--ngs-alert-thumbnail-border-radius: var(--ngs-radius-xl);--ngs-alert-thumbnail-size: calc(var(--spacing, .25rem) * 10);--ngs-alert-title-font-weight: 600;--ngs-alert-title-font-size: var(--ngs-font-size-xs);--ngs-alert-actions-gap: calc(var(--spacing, .25rem) * 1);--ngs-alert-action-height: calc(var(--spacing, .25rem) * 10);--ngs-alert-action-padding: 0 calc(var(--spacing, .25rem) * 3.5);--ngs-alert-action-with-icon-padding: 0 calc(var(--spacing, .25rem) * 2);--ngs-alert-action-hover-bg: white;--ngs-alert-action-border-radius: calc(infinity * 1px);--ngs-alert-action-font-weight: 500;--ngs-alert-action-hover-color: inherit;position:relative;display:flex;width:100%;align-items:center;border-radius:var(--ngs-alert-border-radius);gap:var(--ngs-alert-gap);background:var(--ngs-alert-bg-color);padding:var(--ngs-alert-padding);color:var(--ngs-alert-color);font-size:var(--ngs-alert-font-size);border:var(--ngs-alert-border-width) solid transparent}:host:has(.thumbnail:not(:empty)){padding:var(--ngs-alert-has-thumbnail-padding)}:host:has(.ngs-alert-title){align-items:stretch}:host .thumbnail{display:flex;align-items:center;justify-content:center;flex:none;background:var(--ngs-alert-thumbnail-bg);color:var(--ngs-alert-icon-color);width:var(--ngs-alert-thumbnail-size);height:var(--ngs-alert-thumbnail-size);border-radius:var(--ngs-alert-thumbnail-border-radius)}:host .thumbnail:empty{display:none}:host .title{font-size:var(--ngs-alert-title-font-size);font-weight:var(--ngs-alert-title-font-weight);text-transform:uppercase;display:block}:host .title:empty{display:none}:host .actions{margin-inline-start:auto;display:flex;align-items:center;gap:var(--ngs-alert-actions-gap);line-height:0;flex:none}:host .actions:empty{display:none}:host[ngs-alert-variant=default],:host[ngs-alert-variant=neutral]{--ngs-alert-bg-color: var(--ngs-color-surface-container);--ngs-alert-thumbnail-bg: var(--ngs-color-surface-container-highest)}:host[ngs-alert-variant=info],:host[ngs-alert-variant=informative]{--ngs-alert-bg-color: var(--ngs-color-info-container);--ngs-alert-thumbnail-bg: var(--ngs-color-info);--ngs-alert-color: var(--ngs-color-on-info-container)}:host[ngs-alert-variant=success],:host[ngs-alert-variant=positive]{--ngs-alert-bg-color: var(--ngs-color-success-container);--ngs-alert-thumbnail-bg: var(--ngs-color-success);--ngs-alert-color: var(--ngs-color-on-success-container)}:host[ngs-alert-variant=danger],:host[ngs-alert-variant=negative]{--ngs-alert-bg-color: var(--ngs-color-danger-container);--ngs-alert-thumbnail-bg: var(--ngs-color-danger);--ngs-alert-color: var(--ngs-color-on-danger-container)}:host[ngs-alert-variant=warning],:host[ngs-alert-variant=notice]{--ngs-alert-bg-color: var(--ngs-color-warning-container);--ngs-alert-thumbnail-bg: var(--ngs-color-warning);--ngs-alert-color: var(--ngs-color-on-warning-container)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Alert, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-alert', exportAs: 'ngsAlert', imports: [NgTemplateOutlet], providers: [
                        {
                            provide: ALERT,
                            useExisting: Alert
                        }
                    ], host: {
                        'class': 'ngs-alert',
                        '[class.is-bordered]': 'bordered()',
                    }, template: "<div class=\"thumbnail\">\n  <ng-content select=\"[ngsAlertIcon]\"/>\n  @if (iconRef()) {\n    <ng-container [ngTemplateOutlet]=\"iconRefTemplate\"/>\n  }\n</div>\n<div class=\"content\">\n  <div class=\"title\">\n    <ng-content select=\"ngs-alert-title,[ngsAlertTitle]\"/>\n  </div>\n  <ng-content/>\n</div>\n<div class=\"actions\">\n  <ng-content select=\"[ngsAlertAction]\"/>\n</div>\n", styles: [":host{--ngs-alert-bg-color: transparent;--ngs-alert-color: inherit;--ngs-alert-icon-color: white;--ngs-alert-border-color: transparent;--ngs-alert-border-radius: var(--ngs-radius-xl);--ngs-alert-padding: calc(var(--spacing, .25rem) * 2.5) calc(var(--spacing, .25rem) * 3);--ngs-alert-has-thumbnail-padding: calc(var(--spacing, .25rem) * 1.5);--ngs-alert-gap: calc(var(--spacing, .25rem) * 3.5);--ngs-alert-border-width: 1px;--ngs-alert-font-size: var(--ngs-font-size-sm);--ngs-alert-thumbnail-bg: white;--ngs-alert-thumbnail-border-radius: var(--ngs-radius-xl);--ngs-alert-thumbnail-size: calc(var(--spacing, .25rem) * 10);--ngs-alert-title-font-weight: 600;--ngs-alert-title-font-size: var(--ngs-font-size-xs);--ngs-alert-actions-gap: calc(var(--spacing, .25rem) * 1);--ngs-alert-action-height: calc(var(--spacing, .25rem) * 10);--ngs-alert-action-padding: 0 calc(var(--spacing, .25rem) * 3.5);--ngs-alert-action-with-icon-padding: 0 calc(var(--spacing, .25rem) * 2);--ngs-alert-action-hover-bg: white;--ngs-alert-action-border-radius: calc(infinity * 1px);--ngs-alert-action-font-weight: 500;--ngs-alert-action-hover-color: inherit;position:relative;display:flex;width:100%;align-items:center;border-radius:var(--ngs-alert-border-radius);gap:var(--ngs-alert-gap);background:var(--ngs-alert-bg-color);padding:var(--ngs-alert-padding);color:var(--ngs-alert-color);font-size:var(--ngs-alert-font-size);border:var(--ngs-alert-border-width) solid transparent}:host:has(.thumbnail:not(:empty)){padding:var(--ngs-alert-has-thumbnail-padding)}:host:has(.ngs-alert-title){align-items:stretch}:host .thumbnail{display:flex;align-items:center;justify-content:center;flex:none;background:var(--ngs-alert-thumbnail-bg);color:var(--ngs-alert-icon-color);width:var(--ngs-alert-thumbnail-size);height:var(--ngs-alert-thumbnail-size);border-radius:var(--ngs-alert-thumbnail-border-radius)}:host .thumbnail:empty{display:none}:host .title{font-size:var(--ngs-alert-title-font-size);font-weight:var(--ngs-alert-title-font-weight);text-transform:uppercase;display:block}:host .title:empty{display:none}:host .actions{margin-inline-start:auto;display:flex;align-items:center;gap:var(--ngs-alert-actions-gap);line-height:0;flex:none}:host .actions:empty{display:none}:host[ngs-alert-variant=default],:host[ngs-alert-variant=neutral]{--ngs-alert-bg-color: var(--ngs-color-surface-container);--ngs-alert-thumbnail-bg: var(--ngs-color-surface-container-highest)}:host[ngs-alert-variant=info],:host[ngs-alert-variant=informative]{--ngs-alert-bg-color: var(--ngs-color-info-container);--ngs-alert-thumbnail-bg: var(--ngs-color-info);--ngs-alert-color: var(--ngs-color-on-info-container)}:host[ngs-alert-variant=success],:host[ngs-alert-variant=positive]{--ngs-alert-bg-color: var(--ngs-color-success-container);--ngs-alert-thumbnail-bg: var(--ngs-color-success);--ngs-alert-color: var(--ngs-color-on-success-container)}:host[ngs-alert-variant=danger],:host[ngs-alert-variant=negative]{--ngs-alert-bg-color: var(--ngs-color-danger-container);--ngs-alert-thumbnail-bg: var(--ngs-color-danger);--ngs-alert-color: var(--ngs-color-on-danger-container)}:host[ngs-alert-variant=warning],:host[ngs-alert-variant=notice]{--ngs-alert-bg-color: var(--ngs-color-warning-container);--ngs-alert-thumbnail-bg: var(--ngs-color-warning);--ngs-alert-color: var(--ngs-color-on-warning-container)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], ctorParameters: () => [], propDecorators: { iconRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AlertIconDirective), { isSignal: true }] }], autoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClose", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });

class AlertTitleDirective {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AlertTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: AlertTitleDirective, isStandalone: true, selector: "ngs-alert-title,[ngsAlertTitle]", host: { classAttribute: "ngs-alert-title" }, exportAs: ["ngsAlertTitle"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AlertTitleDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'ngs-alert-title,[ngsAlertTitle]',
                    exportAs: 'ngsAlertTitle',
                    host: {
                        'class': 'ngs-alert-title'
                    }
                }]
        }] });

class AlertCloseDirective {
    _alert = inject(ALERT);
    _handleClick() {
        this._alert.api.close();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AlertCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: AlertCloseDirective, isStandalone: true, selector: "[ngsAlertClose]", host: { listeners: { "click": "_handleClick()" }, classAttribute: "ngs-alert-close" }, exportAs: ["ngsAlertClose"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AlertCloseDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsAlertClose]',
                    exportAs: 'ngsAlertClose',
                    host: {
                        'class': 'ngs-alert-close',
                        '(click)': '_handleClick()'
                    }
                }]
        }] });

class AlertActionDirective {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AlertActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: AlertActionDirective, isStandalone: true, selector: "[ngsAlertAction]", host: { classAttribute: "ngs-alert-action" }, exportAs: ["ngsAlertAction"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AlertActionDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsAlertAction]',
                    exportAs: 'ngsAlertAction',
                    host: {
                        'class': 'ngs-alert-action'
                    }
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { ALERT, Alert, AlertActionDirective, AlertCloseDirective, AlertIconDirective, AlertTitleDirective };
//# sourceMappingURL=ngstarter-ui-components-alert.mjs.map
