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

const INCIDENTS = new InjectionToken('INCIDENTS');

class Incidents {
    isVisible = false;
    toggleVisibility() {
        this.isVisible = !this.isVisible;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Incidents, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: Incidents, isStandalone: true, selector: "ngs-incidents", host: { properties: { "class.is-visible": "isVisible" }, classAttribute: "ngs-incidents" }, providers: [
            {
                provide: INCIDENTS,
                useExisting: Incidents
            }
        ], exportAs: ["ngsIncidents"], ngImport: i0, template: "<ng-content select=\"ngs-incidents-bar\" />\n<ng-content select=\"ngs-incidents-list\" />\n", styles: [":host{--ngs-incidents-bar-height: calc(var(--spacing, .25rem) * 24);--ngs-incidents-bar-bg: var(--ngs-color-orange-container);--ngs-incidents-bar-padding: 0 calc(var(--spacing, .25rem) * 8);--ngs-incidents-bar-color: var(--ngs-color-on-orange-container);--ngs-incidents-bar-box-shadow: none;--ngs-incidents-bar-hover-box-shadow: var(--ngs-shadow-sm);--ngs-incidents-list-bg: rgba(0, 0, 0, .32);--ngs-incidents-list-gap: calc(var(--spacing, .25rem) * 5);--ngs-incidents-list-padding: calc(var(--spacing, .25rem) * 7) 0;--ngs-incident-bg: white;--ngs-incident-color: var(--ngs-color-neutral-700);--ngs-incident-border-radius: var(--ngs-radius-md);--ngs-incident-padding: calc(var(--spacing, .25rem) * 4) calc(var(--spacing, .25rem) * 6);--ngs-incident-gap: calc(var(--spacing, .25rem) * 6);--ngs-incident-border-start: calc(var(--spacing, .25rem) * 1) solid var(--ngs-color-neutral-900);--ngs-incident-close-color: var(--ngs-color-neutral-500);--ngs-incident-close-hover-color: var(--ngs-color-neutral-900);--ngs-incident-title-font-size: var(--ngs-font-size-sm);--ngs-incident-title-font-weight: 500;--ngs-incident-details-font-size: var(--ngs-font-size-sm);--ngs-incident-details-color: var(--ngs-color-neutral-500);--ngs-incidents-title-font-size: var(--text-base);--ngs-incidents-title-font-weight: 500;--ngs-incidents-description-font-size: var(--ngs-font-size-sm);--ngs-incidents-description-opacity: 80%;display:contents}:host .list-container{display:none;height:calc(100vh - var(--ngs-layout-top-header-top) + var(--ngs-layout-top-header-height))}:host-context(html.dark){--ngs-incidents-list-bg: rgba(255, 255, 255, .32)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Incidents, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-incidents', exportAs: 'ngsIncidents', providers: [
                        {
                            provide: INCIDENTS,
                            useExisting: Incidents
                        }
                    ], host: {
                        'class': 'ngs-incidents',
                        '[class.is-visible]': 'isVisible',
                    }, template: "<ng-content select=\"ngs-incidents-bar\" />\n<ng-content select=\"ngs-incidents-list\" />\n", styles: [":host{--ngs-incidents-bar-height: calc(var(--spacing, .25rem) * 24);--ngs-incidents-bar-bg: var(--ngs-color-orange-container);--ngs-incidents-bar-padding: 0 calc(var(--spacing, .25rem) * 8);--ngs-incidents-bar-color: var(--ngs-color-on-orange-container);--ngs-incidents-bar-box-shadow: none;--ngs-incidents-bar-hover-box-shadow: var(--ngs-shadow-sm);--ngs-incidents-list-bg: rgba(0, 0, 0, .32);--ngs-incidents-list-gap: calc(var(--spacing, .25rem) * 5);--ngs-incidents-list-padding: calc(var(--spacing, .25rem) * 7) 0;--ngs-incident-bg: white;--ngs-incident-color: var(--ngs-color-neutral-700);--ngs-incident-border-radius: var(--ngs-radius-md);--ngs-incident-padding: calc(var(--spacing, .25rem) * 4) calc(var(--spacing, .25rem) * 6);--ngs-incident-gap: calc(var(--spacing, .25rem) * 6);--ngs-incident-border-start: calc(var(--spacing, .25rem) * 1) solid var(--ngs-color-neutral-900);--ngs-incident-close-color: var(--ngs-color-neutral-500);--ngs-incident-close-hover-color: var(--ngs-color-neutral-900);--ngs-incident-title-font-size: var(--ngs-font-size-sm);--ngs-incident-title-font-weight: 500;--ngs-incident-details-font-size: var(--ngs-font-size-sm);--ngs-incident-details-color: var(--ngs-color-neutral-500);--ngs-incidents-title-font-size: var(--text-base);--ngs-incidents-title-font-weight: 500;--ngs-incidents-description-font-size: var(--ngs-font-size-sm);--ngs-incidents-description-opacity: 80%;display:contents}:host .list-container{display:none;height:calc(100vh - var(--ngs-layout-top-header-top) + var(--ngs-layout-top-header-height))}:host-context(html.dark){--ngs-incidents-list-bg: rgba(255, 255, 255, .32)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class IncidentsBar {
    _parent = inject(INCIDENTS, { optional: true });
    _handleClick(_event) {
        this._parent?.toggleVisibility();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentsBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: IncidentsBar, isStandalone: true, selector: "ngs-incidents-bar", host: { listeners: { "click": "_handleClick($event)" }, classAttribute: "ngs-incidents-bar" }, exportAs: ["ngsIncidentsBar"], ngImport: i0, template: "<div class=\"flex flex-col gap-0.5\">\n  <ng-content select=\"ngs-incidents-title\"/>\n  <ng-content select=\"ngs-incidents-description\"/>\n</div>\n<button ngsIconButton class=\"ms-auto toggle-icon\">\n  <ng-content select=\"[ngsIncidentsToggleIcon]\"/>\n</button>\n", styles: [":host{width:100%;height:var(--ngs-incidents-bar-height);background:var(--ngs-incidents-bar-bg);color:var(--ngs-incidents-bar-color);box-shadow:var(--ngs-incidents-bar-box-shadow);align-items:center;justify-content:space-between;flex:none;cursor:pointer;display:flex;grid-gap:25px;-webkit-user-select:none;user-select:none;padding:var(--ngs-incidents-bar-padding)}:host(:hover){box-shadow:var(--ngs-incidents-bar-hover-box-shadow)}:host .container{display:flex;height:100%;grid-area:content;align-items:center}:host .toggle-icon{line-height:0;transition:transform .2s ease}:host-context(.ngs-incidents.is-visible) .toggle-icon{transform:rotate(-180deg)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ 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: IncidentsBar, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-incidents-bar', exportAs: 'ngsIncidentsBar', imports: [
                        Button
                    ], host: {
                        'class': 'ngs-incidents-bar',
                        '(click)': '_handleClick($event)'
                    }, template: "<div class=\"flex flex-col gap-0.5\">\n  <ng-content select=\"ngs-incidents-title\"/>\n  <ng-content select=\"ngs-incidents-description\"/>\n</div>\n<button ngsIconButton class=\"ms-auto toggle-icon\">\n  <ng-content select=\"[ngsIncidentsToggleIcon]\"/>\n</button>\n", styles: [":host{width:100%;height:var(--ngs-incidents-bar-height);background:var(--ngs-incidents-bar-bg);color:var(--ngs-incidents-bar-color);box-shadow:var(--ngs-incidents-bar-box-shadow);align-items:center;justify-content:space-between;flex:none;cursor:pointer;display:flex;grid-gap:25px;-webkit-user-select:none;user-select:none;padding:var(--ngs-incidents-bar-padding)}:host(:hover){box-shadow:var(--ngs-incidents-bar-hover-box-shadow)}:host .container{display:flex;height:100%;grid-area:content;align-items:center}:host .toggle-icon{line-height:0;transition:transform .2s ease}:host-context(.ngs-incidents.is-visible) .toggle-icon{transform:rotate(-180deg)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class IncidentsList {
    _parent = inject(INCIDENTS, { optional: true });
    fixed = input(false, { ...(ngDevMode ? { debugName: "fixed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    _handleClick(event) {
        const target = event.target;
        if (target.closest('.ngs-incident') === null) {
            this._parent?.toggleVisibility();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentsList, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: IncidentsList, isStandalone: true, selector: "ngs-incidents-list", inputs: { fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_handleClick($event)" }, properties: { "class.is-fixed": "fixed()" }, classAttribute: "ngs-incidents-list" }, exportAs: ["ngs-incidents-list"], ngImport: i0, template: "<div class=\"container\">\n  <ng-content select=\"ngs-incident\"/>\n</div>\n", styles: [":host{background:var(--ngs-incidents-list-bg);transition:transform .15s,opacity .15s;display:grid;height:0;opacity:0;grid-gap:25px;grid-template-columns:auto minmax(1px,max-content) auto;grid-template-areas:\". content .\";transform-origin:top;overflow:hidden;transform:scaleY(0)}:host:not(:empty){padding:var(--ngs-incidents-list-padding)}:host .container{display:grid;height:min-content;grid-area:content;grid-row-gap:var(--ngs-incidents-list-gap);grid-auto-flow:row}:host(.is-fixed){position:absolute;z-index:102;left:0;right:0;top:calc(var(--ngs-incidents-bar-height));bottom:0}:host-context(.ngs-incidents.is-visible){height:calc(100% - var(--ngs-incidents-bar-height));transform:scaleY(1);opacity:1;overflow-y:auto}:host-context(.ngs-incidents.is-visible).is-fixed{height:calc(100vh - var(--ngs-incidents-bar-height))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentsList, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-incidents-list', exportAs: 'ngs-incidents-list', host: {
                        'class': 'ngs-incidents-list',
                        '[class.is-fixed]': 'fixed()',
                        '(click)': '_handleClick($event)'
                    }, template: "<div class=\"container\">\n  <ng-content select=\"ngs-incident\"/>\n</div>\n", styles: [":host{background:var(--ngs-incidents-list-bg);transition:transform .15s,opacity .15s;display:grid;height:0;opacity:0;grid-gap:25px;grid-template-columns:auto minmax(1px,max-content) auto;grid-template-areas:\". content .\";transform-origin:top;overflow:hidden;transform:scaleY(0)}:host:not(:empty){padding:var(--ngs-incidents-list-padding)}:host .container{display:grid;height:min-content;grid-area:content;grid-row-gap:var(--ngs-incidents-list-gap);grid-auto-flow:row}:host(.is-fixed){position:absolute;z-index:102;left:0;right:0;top:calc(var(--ngs-incidents-bar-height));bottom:0}:host-context(.ngs-incidents.is-visible){height:calc(100% - var(--ngs-incidents-bar-height));transform:scaleY(1);opacity:1;overflow-y:auto}:host-context(.ngs-incidents.is-visible).is-fixed{height:calc(100vh - var(--ngs-incidents-bar-height))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { fixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixed", required: false }] }] } });

const initialState = {
    incidents: [],
    title: '',
    description: '',
};
const IncidentsStore = signalStore({ providedIn: 'root' }, withState(initialState), withMethods((store) => ({
    show(state) {
        patchState(store, {
            ...state
        });
    },
    hide() {
        patchState(store, {
            incidents: []
        });
    }
})));

let incidentId = 0;
class Incident {
    _incidentsStore = inject(IncidentsStore);
    incidentId = input(`incident-${incidentId++}`, ...(ngDevMode ? [{ debugName: "incidentId" }] : /* istanbul ignore next */ []));
    close() {
        this._incidentsStore.hide();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Incident, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: Incident, isStandalone: true, selector: "ngs-incident,[ngs-incident]", inputs: { incidentId: { classPropertyName: "incidentId", publicName: "incidentId", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-incident" }, exportAs: ["ngsIncident"], ngImport: i0, template: "<div class=\"icon\">\n  <ng-content select=\"[ngsIncidentIcon]\"/>\n</div>\n<div class=\"content\">\n  <div class=\"data\">\n    <ng-content select=\"ngs-incident-title\"/>\n    <ng-content select=\"ngs-incident-details\"/>\n  </div>\n  <ng-content select=\"[ngsIncidentButton]\"/>\n</div>\n<button ngsIconButton class=\"close -ms-2\" (click)=\"close()\">\n  <ng-content select=\"[ngsIncidentClose]\"/>\n</button>\n", styles: [":host{display:grid;align-items:center;border-radius:var(--ngs-incident-border-radius);background:var(--ngs-incident-bg);grid-template-areas:\"icon content close\";padding:var(--ngs-incident-padding);gap:var(--ngs-incident-gap);border-inline-start:var(--ngs-incident-border-start);grid-template-columns:[icon] var(--ngs-incident-gap) [content] 1fr [action] var(--ngs-incident-gap);color:var(--ngs-incident-color)}:host .content{grid-area:content;display:grid;gap:var(--ngs-incident-gap);grid-template-areas:\"data button\";grid-template-columns:[data] 1fr [button] var(--ngs-incident-gap)}:host .data{grid-area:data}:host .icon{line-height:0;display:inline-block;max-width:max-content}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ 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: Incident, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-incident,[ngs-incident]', exportAs: 'ngsIncident', imports: [
                        Button
                    ], host: {
                        'class': 'ngs-incident'
                    }, template: "<div class=\"icon\">\n  <ng-content select=\"[ngsIncidentIcon]\"/>\n</div>\n<div class=\"content\">\n  <div class=\"data\">\n    <ng-content select=\"ngs-incident-title\"/>\n    <ng-content select=\"ngs-incident-details\"/>\n  </div>\n  <ng-content select=\"[ngsIncidentButton]\"/>\n</div>\n<button ngsIconButton class=\"close -ms-2\" (click)=\"close()\">\n  <ng-content select=\"[ngsIncidentClose]\"/>\n</button>\n", styles: [":host{display:grid;align-items:center;border-radius:var(--ngs-incident-border-radius);background:var(--ngs-incident-bg);grid-template-areas:\"icon content close\";padding:var(--ngs-incident-padding);gap:var(--ngs-incident-gap);border-inline-start:var(--ngs-incident-border-start);grid-template-columns:[icon] var(--ngs-incident-gap) [content] 1fr [action] var(--ngs-incident-gap);color:var(--ngs-incident-color)}:host .content{grid-area:content;display:grid;gap:var(--ngs-incident-gap);grid-template-areas:\"data button\";grid-template-columns:[data] 1fr [button] var(--ngs-incident-gap)}:host .data{grid-area:data}:host .icon{line-height:0;display:inline-block;max-width:max-content}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { incidentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "incidentId", required: false }] }] } });

class IncidentTitle {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: IncidentTitle, isStandalone: true, selector: "ngs-incident-title", host: { classAttribute: "ngs-incident-title" }, exportAs: ["ngsIncidentTitle"], ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block;font-size:var(--ngs-incident-title-font-size);font-weight:var(--ngs-incident-title-font-weight)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentTitle, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-incident-title', exportAs: 'ngsIncidentTitle', host: {
                        'class': 'ngs-incident-title',
                    }, template: "<ng-content />\n", styles: [":host{display:block;font-size:var(--ngs-incident-title-font-size);font-weight:var(--ngs-incident-title-font-weight)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class IncidentDetails {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentDetails, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: IncidentDetails, isStandalone: true, selector: "ngs-incident-details", host: { classAttribute: "ngs-incident-details" }, exportAs: ["ngsIncidentDetails"], ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block;font-size:var(--ngs-incident-details-font-size);color:var(--ngs-incident-details-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentDetails, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-incident-details', exportAs: 'ngsIncidentDetails', host: {
                        'class': 'ngs-incident-details',
                    }, template: "<ng-content />\n", styles: [":host{display:block;font-size:var(--ngs-incident-details-font-size);color:var(--ngs-incident-details-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

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

class IncidentsTitle {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentsTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: IncidentsTitle, isStandalone: true, selector: "ngs-incidents-title", host: { classAttribute: "ngs-incidents-title" }, exportAs: ["ngsIncidentTitle"], ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block;font-size:var(--ngs-incidents-title-font-size);font-weight:var(--ngs-incidents-title-font-weight)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentsTitle, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-incidents-title', exportAs: 'ngsIncidentTitle', host: {
                        'class': 'ngs-incidents-title',
                    }, template: "<ng-content />\n", styles: [":host{display:block;font-size:var(--ngs-incidents-title-font-size);font-weight:var(--ngs-incidents-title-font-weight)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class IncidentsDescription {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentsDescription, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: IncidentsDescription, isStandalone: true, selector: "ngs-incidents-description", host: { classAttribute: "ngs-incidents-description" }, exportAs: ["ngsIncidentsDescription"], ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block;font-size:var(--ngs-incidents-description-font-size);opacity:var(--ngs-incidents-description-opacity)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentsDescription, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-incidents-description', exportAs: 'ngsIncidentsDescription', host: {
                        'class': 'ngs-incidents-description'
                    }, template: "<ng-content />\n", styles: [":host{display:block;font-size:var(--ngs-incidents-description-font-size);opacity:var(--ngs-incidents-description-opacity)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

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

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

class IncidentsContainer {
    _incidentsStore = inject(IncidentsStore);
    hasIncidents = computed(() => {
        return this._incidentsStore.incidents().length > 0;
    }, ...(ngDevMode ? [{ debugName: "hasIncidents" }] : /* istanbul ignore next */ []));
    title = computed(() => {
        return this._incidentsStore.title();
    }, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
    description = computed(() => {
        return this._incidentsStore.description();
    }, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
    incidents = computed(() => {
        return this._incidentsStore.incidents();
    }, ...(ngDevMode ? [{ debugName: "incidents" }] : /* istanbul ignore next */ []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentsContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: IncidentsContainer, isStandalone: true, selector: "ngs-incidents-container,ngs-incidents-global", host: { properties: { "class.is-active": "hasIncidents()" }, classAttribute: "ngs-incidents-global" }, exportAs: ["ngsIncidentsGlobal"], ngImport: i0, template: "@if (hasIncidents()) {\n  <ngs-incidents>\n    <ngs-incidents-bar>\n      <ngs-incidents-title>{{ title() }}</ngs-incidents-title>\n      @if (description()) {\n        <ngs-incidents-description>{{ description() }}</ngs-incidents-description>\n      }\n      <ngs-icon name=\"fluent:chevron-down-24-regular\" ngsIncidentsToggleIcon/>\n    </ngs-incidents-bar>\n    <ngs-incidents-list fixed>\n      @for (incident of incidents(); track incident) {\n        <ngs-incident>\n          <ngs-icon name=\"fluent:info-24-regular\" ngsIncidentIcon/>\n          <ngs-icon name=\"fluent:dismiss-24-regular\" ngsIncidentClose/>\n          <ngs-incident-title>{{ incident.title }}</ngs-incident-title>\n          @if (incident.details) {\n            <ngs-incident-details>{{ incident.details }}</ngs-incident-details>\n          }\n        </ngs-incident>\n      }\n    </ngs-incidents-list>\n  </ngs-incidents>\n}\n", styles: [":host{display:none;position:relative}:host.is-active{display:block}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Incidents, selector: "ngs-incidents", exportAs: ["ngsIncidents"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: IncidentsTitle, selector: "ngs-incidents-title", exportAs: ["ngsIncidentTitle"] }, { kind: "component", type: IncidentDetails, selector: "ngs-incident-details", exportAs: ["ngsIncidentDetails"] }, { kind: "component", type: IncidentsBar, selector: "ngs-incidents-bar", exportAs: ["ngsIncidentsBar"] }, { kind: "component", type: IncidentsDescription, selector: "ngs-incidents-description", exportAs: ["ngsIncidentsDescription"] }, { kind: "directive", type: IncidentsToggleIconDirective, selector: "[ngsIncidentsToggleIcon]", exportAs: ["ngsIncidentsToggleIcon"] }, { kind: "component", type: IncidentTitle, selector: "ngs-incident-title", exportAs: ["ngsIncidentTitle"] }, { kind: "component", type: IncidentsList, selector: "ngs-incidents-list", inputs: ["fixed"], exportAs: ["ngs-incidents-list"] }, { kind: "directive", type: IncidentCloseDirective, selector: "[ngsIncidentClose]", exportAs: ["ngsIncidentClose"] }, { kind: "component", type: Incident, selector: "ngs-incident,[ngs-incident]", inputs: ["incidentId"], exportAs: ["ngsIncident"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IncidentsContainer, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-incidents-container,ngs-incidents-global', exportAs: 'ngsIncidentsGlobal', imports: [
                        Incidents,
                        Icon,
                        IncidentsTitle,
                        IncidentDetails,
                        IncidentsBar,
                        IncidentsDescription,
                        IncidentsToggleIconDirective,
                        IncidentTitle,
                        IncidentsList,
                        IncidentCloseDirective,
                        Incident
                    ], host: {
                        'class': 'ngs-incidents-global',
                        '[class.is-active]': 'hasIncidents()'
                    }, template: "@if (hasIncidents()) {\n  <ngs-incidents>\n    <ngs-incidents-bar>\n      <ngs-incidents-title>{{ title() }}</ngs-incidents-title>\n      @if (description()) {\n        <ngs-incidents-description>{{ description() }}</ngs-incidents-description>\n      }\n      <ngs-icon name=\"fluent:chevron-down-24-regular\" ngsIncidentsToggleIcon/>\n    </ngs-incidents-bar>\n    <ngs-incidents-list fixed>\n      @for (incident of incidents(); track incident) {\n        <ngs-incident>\n          <ngs-icon name=\"fluent:info-24-regular\" ngsIncidentIcon/>\n          <ngs-icon name=\"fluent:dismiss-24-regular\" ngsIncidentClose/>\n          <ngs-incident-title>{{ incident.title }}</ngs-incident-title>\n          @if (incident.details) {\n            <ngs-incident-details>{{ incident.details }}</ngs-incident-details>\n          }\n        </ngs-incident>\n      }\n    </ngs-incidents-list>\n  </ngs-incidents>\n}\n", styles: [":host{display:none;position:relative}:host.is-active{display:block}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

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

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

export { Incident, IncidentButtonDirective, IncidentCloseDirective, IncidentDetails, IncidentIconDirective, IncidentTitle, Incidents, IncidentsBar, IncidentsContainer, IncidentsDescription, IncidentsList, IncidentsStore, IncidentsTitle, IncidentsToggleIconDirective };
//# sourceMappingURL=ngstarter-ui-components-incidents.mjs.map
