import * as i0 from '@angular/core';
import { inject, ElementRef, Renderer2, input, booleanAttribute, output, effect, Component, computed, Directive } from '@angular/core';
import { Icon } from '@ngstarter-ui/components/icon';
import { Button } from '@ngstarter-ui/components/button';
import { signalStore, withState, withMethods, patchState } from '@ngrx/signals';
import { SafeHtmlPipe } from '@ngstarter-ui/components/core';

class Announcement {
    _elementRef = inject(ElementRef);
    _renderer = inject(Renderer2);
    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
    variant = input('neutral', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
    iconName = input('', ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
    closable = input(false, { ...(ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    linkTo = input(null, ...(ngDevMode ? [{ debugName: "linkTo" }] : /* istanbul ignore next */ []));
    closed = output();
    constructor() {
        effect(() => {
            this._renderer.setAttribute(this._elementRef.nativeElement, 'data-variant', this.variant() || 'neutral');
        });
    }
    close() {
        this.closed.emit();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Announcement, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Announcement, isStandalone: true, selector: "ngs-announcement", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, linkTo: { classPropertyName: "linkTo", publicName: "linkTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { classAttribute: "ngs-announcement" }, exportAs: ["ngsAnnouncement"], ngImport: i0, template: "<div class=\"content\">\n  @if (iconName()) {\n    <div class=\"icon\">\n      <ngs-icon [name]=\"iconName()\"/>\n    </div>\n  }\n  @if (title()) {\n    <div class=\"title\">{{ title() }}</div>\n  }\n  <div class=\"message\"><ng-content/></div>\n  @if (linkTo()) {\n    <a class=\"link underline underline-offset-3\" href=\"{{ linkTo()!.url }}\" [target]=\"linkTo()!.target || 'blank'\">\n      {{ linkTo()!.text || linkTo()!.url }}\n    </a>\n  }\n</div>\n@if (closable()) {\n  <div class=\"close\">\n    <button ngsIconButton (click)=\"close()\">\n      <ngs-icon name=\"fluent:dismiss-24-regular\"/>\n    </button>\n  </div>\n}\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--spacing, .25rem) * 1) calc(var(--spacing, .25rem) * 4);font-size:var(--ngs-font-size-sm);min-height:calc(var(--spacing, .25rem) * 10)}:host .title{font-weight:700;margin-inline-end:calc(var(--spacing, .25rem) * 3)}:host .title:empty{display:none}:host[data-variant=neutral]{background:var(--ngs-color-secondary-container);color:var(--ngs-color-on-secondary-container)}:host[data-variant=informative]{background:var(--ngs-color-info-container);color:var(--ngs-color-on-info-container)}:host[data-variant=positive]{background:var(--ngs-color-success-container);color:var(--ngs-color-on-success-container)}:host[data-variant=warning]{background:var(--ngs-color-warning-container);color:var(--ngs-color-on-warning-container)}:host[data-variant=negative]{background:var(--ngs-color-danger-container);color:var(--ngs-color-on-danger-container)}:host .content{display:flex;align-items:center;flex:1 1 0}:host .message{margin-inline-end:calc(var(--spacing, .25rem) * 3)}:host .icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-inline-end:calc(var(--spacing, .25rem) * 2)}:host:has(.icon){padding-left:calc(var(--spacing, .25rem) * 3)}:host:has(.close){padding-right:calc(var(--spacing, .25rem) * 2.5)}:host .close{display:flex;align-items:center;flex-shrink:0}:host .close [ngsIconButton]{width:2rem;height:2rem;min-width:2rem;min-height:2rem;--btn-tonal-bg: transparent;--btn-filled-bg: transparent}:host .close [ngsIconButton] ngs-icon{width:1.25rem;height:1.25rem}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Announcement, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-announcement', exportAs: 'ngsAnnouncement', imports: [
                        Icon,
                        Button
                    ], host: {
                        'class': 'ngs-announcement',
                    }, template: "<div class=\"content\">\n  @if (iconName()) {\n    <div class=\"icon\">\n      <ngs-icon [name]=\"iconName()\"/>\n    </div>\n  }\n  @if (title()) {\n    <div class=\"title\">{{ title() }}</div>\n  }\n  <div class=\"message\"><ng-content/></div>\n  @if (linkTo()) {\n    <a class=\"link underline underline-offset-3\" href=\"{{ linkTo()!.url }}\" [target]=\"linkTo()!.target || 'blank'\">\n      {{ linkTo()!.text || linkTo()!.url }}\n    </a>\n  }\n</div>\n@if (closable()) {\n  <div class=\"close\">\n    <button ngsIconButton (click)=\"close()\">\n      <ngs-icon name=\"fluent:dismiss-24-regular\"/>\n    </button>\n  </div>\n}\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--spacing, .25rem) * 1) calc(var(--spacing, .25rem) * 4);font-size:var(--ngs-font-size-sm);min-height:calc(var(--spacing, .25rem) * 10)}:host .title{font-weight:700;margin-inline-end:calc(var(--spacing, .25rem) * 3)}:host .title:empty{display:none}:host[data-variant=neutral]{background:var(--ngs-color-secondary-container);color:var(--ngs-color-on-secondary-container)}:host[data-variant=informative]{background:var(--ngs-color-info-container);color:var(--ngs-color-on-info-container)}:host[data-variant=positive]{background:var(--ngs-color-success-container);color:var(--ngs-color-on-success-container)}:host[data-variant=warning]{background:var(--ngs-color-warning-container);color:var(--ngs-color-on-warning-container)}:host[data-variant=negative]{background:var(--ngs-color-danger-container);color:var(--ngs-color-on-danger-container)}:host .content{display:flex;align-items:center;flex:1 1 0}:host .message{margin-inline-end:calc(var(--spacing, .25rem) * 3)}:host .icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-inline-end:calc(var(--spacing, .25rem) * 2)}:host:has(.icon){padding-left:calc(var(--spacing, .25rem) * 3)}:host:has(.close){padding-right:calc(var(--spacing, .25rem) * 2.5)}:host .close{display:flex;align-items:center;flex-shrink:0}:host .close [ngsIconButton]{width:2rem;height:2rem;min-width:2rem;min-height:2rem;--btn-tonal-bg: transparent;--btn-filled-bg: transparent}:host .close [ngsIconButton] ngs-icon{width:1.25rem;height:1.25rem}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], linkTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkTo", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });

const initialState = {
    announcement: null,
};
const AnnouncementStore = signalStore({ providedIn: 'root' }, withState(initialState), withMethods((store) => ({
    show(announcement) {
        patchState(store, { announcement });
    },
    hide() {
        patchState(store, { announcement: null });
    }
})));

class AnnouncementGlobal {
    _announcementStore = inject(AnnouncementStore);
    announcement = computed(() => {
        return this._announcementStore.announcement();
    }, ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
    announcementClose = output();
    onClose() {
        this._announcementStore.hide();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AnnouncementGlobal, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: AnnouncementGlobal, isStandalone: true, selector: "ngs-announcement-global", outputs: { announcementClose: "announcementClose" }, exportAs: ["ngsAnnouncementGlobal"], ngImport: i0, template: "@if (announcement()) {\n  <ngs-announcement closable\n                    [title]=\"announcement().title || ''\"\n                    [iconName]=\"announcement().iconName || ''\"\n                    [variant]=\"announcement().variant || ''\"\n                    [linkTo]=\"announcement().linkTo\"\n                    (closed)=\"onClose()\">\n    <div [innerHTML]=\"announcement().message | safeHtml\"></div>\n  </ngs-announcement>\n}\n", styles: [":host{display:block}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Announcement, selector: "ngs-announcement", inputs: ["title", "variant", "iconName", "closable", "linkTo"], outputs: ["closed"], exportAs: ["ngsAnnouncement"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AnnouncementGlobal, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-announcement-global', exportAs: 'ngsAnnouncementGlobal', imports: [
                        Announcement,
                        SafeHtmlPipe
                    ], template: "@if (announcement()) {\n  <ngs-announcement closable\n                    [title]=\"announcement().title || ''\"\n                    [iconName]=\"announcement().iconName || ''\"\n                    [variant]=\"announcement().variant || ''\"\n                    [linkTo]=\"announcement().linkTo\"\n                    (closed)=\"onClose()\">\n    <div [innerHTML]=\"announcement().message | safeHtml\"></div>\n  </ngs-announcement>\n}\n", styles: [":host{display:block}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { announcementClose: [{ type: i0.Output, args: ["announcementClose"] }] } });

class AnnouncementTitle {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AnnouncementTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: AnnouncementTitle, isStandalone: true, selector: "[ngsAnnouncementTitle]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AnnouncementTitle, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsAnnouncementTitle]'
                }]
        }] });

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

export { Announcement, AnnouncementGlobal, AnnouncementStore, AnnouncementTitle };
//# sourceMappingURL=ngstarter-ui-components-announcement.mjs.map
