ngx-strata 0.1.0

package/fesm2022/ngx-strata.mjs

@@ -0,0 +1,1720 @@
+import * as i0 from '@angular/core';
+import { Injectable, provideAppInitializer, inject, makeEnvironmentProviders, InjectionToken, input, DOCUMENT, Input, Inject, Directive, signal, computed, effect, model, HostListener, Component, HostBinding, contentChild, ElementRef, output, ChangeDetectionStrategy, ViewContainerRef, viewChild, contentChildren, Renderer2, Pipe, LOCALE_ID } from '@angular/core';
+import { computePosition, offset, arrow, autoUpdate, flip, shift } from '@floating-ui/dom';
+import { Observable, tap, map, BehaviorSubject } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+import { DomSanitizer } from '@angular/platform-browser';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i2 from '@angular/common';
+import { NgTemplateOutlet, CommonModule, DecimalPipe, formatNumber, getLocaleNumberSymbol, NumberSymbol } from '@angular/common';
+
+class IconLoader {
+}
+
+class IconRegistryService {
+    iconLoader;
+    icons = {};
+    svgs = {};
+    constructor(iconLoader) {
+        this.iconLoader = iconLoader;
+    }
+    registerIcons(iconConfigs) {
+        iconConfigs.forEach((config) => this.registerIcon(config));
+    }
+    registerIcon(iconConfig) {
+        if (this.icons[iconConfig.name]) {
+            console.error(`Icon with name ${iconConfig.name} already registered with Zesto. Please rename or stop registering one of the icons.`);
+        }
+        this.icons[iconConfig.name] = iconConfig.url;
+    }
+    getIconUrl(name) {
+        const iconUrl = this.icons[name];
+        return iconUrl ? iconUrl : null;
+    }
+    getIcon(name) {
+        if (this.svgs[name]) {
+            return new Observable((subscriber) => {
+                subscriber.next(this.svgs[name]);
+            });
+        }
+        const url = this.getIconUrl(name);
+        if (!url) {
+            throw new Error(`Icon '${name}' not registered.`);
+        }
+        return this.iconLoader.loadSvg(url).pipe(tap((svg) => {
+            this.svgs[name] = svg;
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IconRegistryService, deps: [{ token: IconLoader }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IconRegistryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IconRegistryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: IconLoader }] });
+
+const baseIconConfigs = [
+    {
+        name: 'question',
+        url: 'assets/icons/question.svg',
+    },
+    {
+        name: 'arrow-right',
+        url: 'assets/icons/arrow-right.svg',
+    },
+    {
+        name: 'arrow-left',
+        url: 'assets/icons/arrow-left.svg',
+    },
+    {
+        name: 'arrow-up',
+        url: 'assets/icons/arrow-up.svg',
+    },
+    {
+        name: 'arrow-down',
+        url: 'assets/icons/arrow-down.svg',
+    },
+    {
+        name: 'close',
+        url: 'assets/icons/close.svg',
+    },
+    {
+        name: 'expand-up-down',
+        url: 'assets/icons/expand-up-down.svg',
+    },
+    {
+        name: 'clipboard',
+        url: 'assets/icons/clipboard.svg',
+    },
+    {
+        name: 'more',
+        url: 'assets/icons/more.svg',
+    },
+];
+
+const provideBaseIcons = () => {
+    return provideIcons(baseIconConfigs);
+};
+const provideIcons = (iconConfigs) => {
+    const providers = [
+        provideAppInitializer(() => {
+            const initializerFn = ((service) => function () {
+                return service.registerIcons(iconConfigs);
+            })(inject(IconRegistryService));
+            return initializerFn();
+        }),
+    ];
+    return makeEnvironmentProviders(providers);
+};
+
+class HttpIconLoader {
+    httpClient = inject(HttpClient);
+    sanitizer = inject(DomSanitizer);
+    loadSvg(url) {
+        return this.httpClient
+            .get(url, { responseType: 'text' })
+            .pipe(map((raw) => this.sanitizer.bypassSecurityTrustHtml(raw)));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HttpIconLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HttpIconLoader, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: HttpIconLoader, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+function provideIconLoader() {
+    return {
+        provide: IconLoader,
+        useExisting: HttpIconLoader,
+    };
+}
+
+class IconRegistry {
+}
+
+function provideIconRegistry() {
+    return {
+        provide: IconRegistry,
+        useExisting: IconRegistryService,
+    };
+}
+
+const DEFAULT_CONFIG = {
+    includeBaseIcons: true,
+    tooltipDelayMs: 500,
+};
+function provideStrata(config = {}) {
+    const mergedConfig = { ...DEFAULT_CONFIG, ...config };
+    const providers = [
+        provideIconLoader(),
+        provideIconRegistry(),
+        {
+            provide: STRATA_CONFIG,
+            useValue: mergedConfig,
+        },
+    ];
+    if (mergedConfig.includeBaseIcons) {
+        providers.push(provideBaseIcons());
+    }
+    return providers;
+}
+const STRATA_CONFIG = new InjectionToken('STRATA_CONFIG');
+
+class TooltipDirective {
+    document;
+    element;
+    renderer;
+    stSimpleTooltip = input.required(...(ngDevMode ? [{ debugName: "stSimpleTooltip" }] : []));
+    tooltipEnabled = true;
+    tooltipPlacement = 'top';
+    tooltipAlwaysShow = false;
+    tooltipContentElement;
+    arrowElement;
+    eventListeners;
+    autoUpdateCleanupFunction;
+    config = inject(STRATA_CONFIG);
+    constructor(document, element, renderer) {
+        this.document = document;
+        this.element = element;
+        this.renderer = renderer;
+    }
+    ngOnInit() {
+        if (!this.stSimpleTooltip() || this.stSimpleTooltip() === '' || !this.tooltipEnabled) {
+            return;
+        }
+        this.tooltipContentElement = this.document.createElement('div');
+        this.tooltipContentElement.classList.add('st-tooltip');
+        const textElement = this.document.createElement('p');
+        textElement.innerText = this.stSimpleTooltip();
+        this.tooltipContentElement.appendChild(textElement);
+        this.arrowElement = this.document.createElement('div');
+        this.arrowElement.id = 'st-tooltip-arrow';
+        this.arrowElement.classList.add('st-tooltip-arrow-' + this.tooltipPlacement);
+        this.tooltipContentElement.appendChild(this.arrowElement);
+        this.renderer.appendChild(this.element.nativeElement, this.tooltipContentElement);
+        if (!this.tooltipAlwaysShow) {
+            this.eventListeners = [
+                this.renderer.listen(this.element.nativeElement, 'mouseenter', () => {
+                    this.show();
+                }),
+                this.renderer.listen(this.element.nativeElement, 'mouseleave', () => this.hide()),
+            ];
+        }
+        else {
+            this.show();
+        }
+    }
+    ngAfterContentInit() {
+        if (!this.shouldRender()) {
+            return;
+        }
+        this.doPosition();
+    }
+    doPosition() {
+        computePosition(this.element.nativeElement, this.tooltipContentElement, {
+            placement: this.tooltipPlacement,
+            middleware: [offset(6), arrow({ element: this.arrowElement })],
+        }).then(({ x, y, middlewareData }) => {
+            Object.assign(this.tooltipContentElement.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+            if (middlewareData.arrow) {
+                const { x, y } = middlewareData.arrow;
+                Object.assign(this.arrowElement.style, {
+                    left: x != null ? `${x}px` : '',
+                    top: y != null ? `${y}px` : '',
+                });
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.tooltipContentElement.remove();
+        if (this.eventListeners?.length) {
+            this.eventListeners.forEach((removeEventListenerFn) => removeEventListenerFn());
+        }
+        if (this.autoUpdateCleanupFunction) {
+            this.autoUpdateCleanupFunction();
+        }
+    }
+    shouldRender() {
+        return !!this.stSimpleTooltip() && this.stSimpleTooltip() !== '' && this.tooltipEnabled;
+    }
+    showTimeoutCancel;
+    show() {
+        this.showTimeoutCancel = setTimeout(() => {
+            this.tooltipContentElement?.setAttribute('data-show', '');
+            this.tooltipContentElement?.setAttribute('aria-hidden', 'false');
+            this.autoUpdateCleanupFunction = autoUpdate(this.element.nativeElement, this.tooltipContentElement, () => this.doPosition());
+        }, this.config.tooltipDelayMs);
+    }
+    hide() {
+        if (this.showTimeoutCancel) {
+            clearTimeout(this.showTimeoutCancel);
+            this.showTimeoutCancel = undefined;
+        }
+        this.tooltipContentElement?.removeAttribute('data-show');
+        this.tooltipContentElement?.setAttribute('aria-hidden', 'true');
+        this.autoUpdateCleanupFunction();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TooltipDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: TooltipDirective, isStandalone: true, selector: "[stSimpleTooltip]", inputs: { stSimpleTooltip: { classPropertyName: "stSimpleTooltip", publicName: "stSimpleTooltip", isSignal: true, isRequired: true, transformFunction: null }, tooltipEnabled: { classPropertyName: "tooltipEnabled", publicName: "tooltipEnabled", isSignal: false, isRequired: false, transformFunction: null }, tooltipPlacement: { classPropertyName: "tooltipPlacement", publicName: "tooltipPlacement", isSignal: false, isRequired: false, transformFunction: null }, tooltipAlwaysShow: { classPropertyName: "tooltipAlwaysShow", publicName: "tooltipAlwaysShow", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[stSimpleTooltip]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { stSimpleTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "stSimpleTooltip", required: true }] }], tooltipEnabled: [{
+                type: Input
+            }], tooltipPlacement: [{
+                type: Input
+            }], tooltipAlwaysShow: [{
+                type: Input
+            }] } });
+
+class DarkmodeService {
+    STORAGE_KEY = 'strata-darkmode';
+    document = inject(DOCUMENT);
+    osPrefersDark;
+    setting = signal('SYSTEM', ...(ngDevMode ? [{ debugName: "setting" }] : []));
+    darkmode = signal('LIGHT', ...(ngDevMode ? [{ debugName: "darkmode" }] : []));
+    currentMode = computed(() => this.darkmode(), ...(ngDevMode ? [{ debugName: "currentMode" }] : []));
+    currentSetting = computed(() => this.setting(), ...(ngDevMode ? [{ debugName: "currentSetting" }] : []));
+    constructor() {
+        effect(() => this.updateDarkmodeTagOnDOM(this.darkmode()));
+        this.setting.set(this.getSettingFromStorage());
+        this.osPrefersDark = this.getSystemDarkmodePreference();
+        this.calculateDarkmode();
+        this.saveSettingToStorage(this.setting());
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
+            this.osPrefersDark = event.matches;
+            if (this.setting() === 'SYSTEM') {
+                this.calculateDarkmode();
+            }
+        });
+    }
+    setDarkmodeSetting(newSetting) {
+        this.saveSettingToStorage(newSetting);
+        return this.calculateDarkmode();
+    }
+    getSystemDarkmodePreference() {
+        return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+    calculateDarkmode() {
+        if (this.setting() === 'SYSTEM') {
+            this.darkmode.set(this.osPrefersDark ? 'DARK' : 'LIGHT');
+        }
+        else {
+            this.darkmode.set(this.setting() === 'DARK' ? 'DARK' : 'LIGHT');
+        }
+        return this.darkmode();
+    }
+    updateDarkmodeTagOnDOM(mode) {
+        const documentNode = this.document.getElementsByTagName('html')[0];
+        if (mode === 'DARK') {
+            documentNode.setAttribute('data-theme', 'dark');
+        }
+        else {
+            documentNode.setAttribute('data-theme', 'light');
+        }
+    }
+    saveSettingToStorage(newSetting) {
+        localStorage.setItem(this.STORAGE_KEY, newSetting);
+        this.setting.set(newSetting);
+    }
+    getSettingFromStorage() {
+        return localStorage.getItem(this.STORAGE_KEY) ?? 'SYSTEM';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DarkmodeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DarkmodeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DarkmodeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class CheckboxComponent {
+    value = model(false, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : []));
+    name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : []));
+    onClick(event) {
+        event.stopImmediatePropagation();
+        this.value.set(!this.value());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CheckboxComponent, isStandalone: true, selector: "st-checkbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<input type=\"checkbox\" [checked]=\"value()\" />\n<div class=\"checkbox-visual\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n  >\n    <path\n      d=\"M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z\"\n    ></path>\n  </svg>\n</div>\n@if (label()) {\n  <label [for]=\"name()\"> {{ label() }}</label>\n}\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-checkbox', imports: [], template: "<input type=\"checkbox\" [checked]=\"value()\" />\n<div class=\"checkbox-visual\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n  >\n    <path\n      d=\"M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z\"\n    ></path>\n  </svg>\n</div>\n@if (label()) {\n  <label [for]=\"name()\"> {{ label() }}</label>\n}\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class ToggleComponent {
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    get isChecked() {
+        return this.checked();
+    }
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    get sizeClass() {
+        return this.size();
+    }
+    onCheckChanged() {
+        this.checked.set(!this.checked());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ToggleComponent, isStandalone: true, selector: "st-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { attributes: { "tabindex": "0" }, listeners: { "click": "onCheckChanged()" }, properties: { "attr.data-checked": "this.isChecked", "class": "this.sizeClass" } }, ngImport: i0, template: "<div class=\"toggle-handle\"></div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-toggle', imports: [], host: {
+                        '(click)': 'onCheckChanged()',
+                        tabindex: '0',
+                    }, template: "<div class=\"toggle-handle\"></div>\n" }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], isChecked: [{
+                type: HostBinding,
+                args: ['attr.data-checked']
+            }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], sizeClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class ActionMenuItemComponent {
+    checkbox = contentChild(CheckboxComponent, { ...(ngDevMode ? { debugName: "checkbox" } : {}), read: ElementRef });
+    toggle = contentChild(ToggleComponent, { ...(ngDevMode ? { debugName: "toggle" } : {}), read: ElementRef });
+    closeMenuOnClick = input(true, ...(ngDevMode ? [{ debugName: "closeMenuOnClick" }] : []));
+    onMenuItemClicked = output();
+    elementRef = inject(ElementRef);
+    onHostClick(event) {
+        this.onMenuItemClicked.emit(this.closeMenuOnClick());
+        event.stopPropagation();
+        this.checkbox()?.nativeElement.click();
+        this.toggle()?.nativeElement.click();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ActionMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: ActionMenuItemComponent, isStandalone: true, selector: "st-action-menu-item", inputs: { closeMenuOnClick: { classPropertyName: "closeMenuOnClick", publicName: "closeMenuOnClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onMenuItemClicked: "onMenuItemClicked" }, host: { listeners: { "click": "onHostClick($event)" } }, queries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "toggle", first: true, predicate: ToggleComponent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<span class=\"item-start\">\n  <ng-content select=\"[area='start']\"></ng-content\n></span>\n<span class=\"item-default\"> <ng-content></ng-content></span>\n<span class=\"item-end\">\n  <ng-content select=\"[area='end']\"></ng-content>\n</span>\n", styles: [":host{height:48px}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ActionMenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-action-menu-item', imports: [], template: "<span class=\"item-start\">\n  <ng-content select=\"[area='start']\"></ng-content\n></span>\n<span class=\"item-default\"> <ng-content></ng-content></span>\n<span class=\"item-end\">\n  <ng-content select=\"[area='end']\"></ng-content>\n</span>\n", styles: [":host{height:48px}\n"] }]
+        }], propDecorators: { checkbox: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CheckboxComponent), { ...{ read: ElementRef }, isSignal: true }] }], toggle: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ToggleComponent), { ...{ read: ElementRef }, isSignal: true }] }], closeMenuOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeMenuOnClick", required: false }] }], onMenuItemClicked: [{ type: i0.Output, args: ["onMenuItemClicked"] }], onHostClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class ButtonDirective {
+    host = inject(ElementRef);
+    variant = input('secondary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+    iconAtStart = signal(false, ...(ngDevMode ? [{ debugName: "iconAtStart" }] : []));
+    iconAtEnd = signal(false, ...(ngDevMode ? [{ debugName: "iconAtEnd" }] : []));
+    iconOnly = signal(false, ...(ngDevMode ? [{ debugName: "iconOnly" }] : []));
+    constructor() { }
+    get classes() {
+        return [
+            'st-button',
+            `st-button-${this.variant()}`,
+            `st-size-${this.size()}`,
+            this.iconAtStart() ? 'st-button-has-starting-icon' : '',
+            this.iconAtEnd() ? 'st-button-has-ending-icon' : '',
+            this.iconOnly() ? 'st-button-icon-only' : '',
+            this.fullWidth() ? 'st-button-full-width' : '',
+        ];
+    }
+    ngAfterContentInit() {
+        const nodes = this.host.nativeElement.childNodes;
+        if (nodes === undefined || nodes.length == 0) {
+            return;
+        }
+        if (nodes.length === 1 && this.nodeIsStIcon(nodes[0])) {
+            this.iconOnly.set(true);
+            return;
+        }
+        this.iconAtStart.set(this.nodeIsStIcon(nodes[0]));
+        this.iconAtEnd.set(this.nodeIsStIcon(nodes[nodes.length - 1]));
+    }
+    nodeIsStIcon(node) {
+        if (node.nodeType === Node.TEXT_NODE && !node.textContent.trim()) {
+            return false;
+        }
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            const tagName = node.tagName.toLowerCase();
+            return tagName === 'st-icon';
+        }
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ButtonDirective, isStandalone: true, selector: "[stButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.classes" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[stButton]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], classes: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class CardComponent {
+    elevated = input(false, ...(ngDevMode ? [{ debugName: "elevated" }] : []));
+    selectable = input(false, ...(ngDevMode ? [{ debugName: "selectable" }] : []));
+    padding = input(true, ...(ngDevMode ? [{ debugName: "padding" }] : []));
+    variant = input('elevated', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    get withPadding() {
+        return this.padding();
+    }
+    get isSelectable() {
+        return this.selectable();
+    }
+    get tabIndex() {
+        return this.selectable() ? 0 : null;
+    }
+    get isElevated() {
+        return this.variant() === 'elevated';
+    }
+    get isFlat() {
+        return this.variant() === 'flat';
+    }
+    get isOutline() {
+        return this.variant() === 'outline';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: CardComponent, isStandalone: true, selector: "st-card", inputs: { elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.with-padding": "this.withPadding", "class.selectable": "this.isSelectable", "attr.tabindex": "this.tabIndex", "class.elevated": "this.isElevated", "class.flat": "this.isFlat", "class.outline": "this.isOutline" } }, ngImport: i0, template: "<div class=\"cover-area\">\n  <ng-content select=\"[area='cover']\"></ng-content>\n</div>\n<div class=\"card-content\">\n  <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-card', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cover-area\">\n  <ng-content select=\"[area='cover']\"></ng-content>\n</div>\n<div class=\"card-content\">\n  <ng-content></ng-content>\n</div>\n" }]
+        }], propDecorators: { elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], withPadding: [{
+                type: HostBinding,
+                args: ['class.with-padding']
+            }], isSelectable: [{
+                type: HostBinding,
+                args: ['class.selectable']
+            }], tabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], isElevated: [{
+                type: HostBinding,
+                args: ['class.elevated']
+            }], isFlat: [{
+                type: HostBinding,
+                args: ['class.flat']
+            }], isOutline: [{
+                type: HostBinding,
+                args: ['class.outline']
+            }] } });
+
+class IconComponent {
+    defaultIcon = 'question';
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
+    size = model('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    get sizeClass() {
+        return this.size() === 'xs';
+    }
+    get sizeSmClass() {
+        return this.size() === 'sm';
+    }
+    get sizeMdClass() {
+        return this.size() === 'md';
+    }
+    get sizeLgClass() {
+        return this.size() === 'lg';
+    }
+    svgMarkdown;
+    iconSubscription;
+    iconRegistry = inject(IconRegistry);
+    ngOnDestroy() {
+        if (this.iconSubscription) {
+            this.iconSubscription.unsubscribe();
+        }
+    }
+    ngOnChanges() {
+        const name = this.name();
+        if (!name) {
+            this.setIcon(this.defaultIcon);
+        }
+        else {
+            this.setIcon(name);
+        }
+    }
+    setIcon(iconName) {
+        this.iconSubscription = this.iconRegistry.getIcon(iconName).subscribe((value) => {
+            this.svgMarkdown = value;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: IconComponent, isStandalone: true, selector: "st-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange" }, host: { properties: { "class.xs": "this.sizeClass", "class.sm": "this.sizeSmClass", "class.md": "this.sizeMdClass", "class.lg": "this.sizeLgClass" } }, usesOnChanges: true, ngImport: i0, template: '<span [innerHTML]="svgMarkdown"></span>', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'st-icon',
+                    imports: [],
+                    template: '<span [innerHTML]="svgMarkdown"></span>',
+                }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], sizeClass: [{
+                type: HostBinding,
+                args: ['class.xs']
+            }], sizeSmClass: [{
+                type: HostBinding,
+                args: ['class.sm']
+            }], sizeMdClass: [{
+                type: HostBinding,
+                args: ['class.md']
+            }], sizeLgClass: [{
+                type: HostBinding,
+                args: ['class.lg']
+            }] } });
+
+class OverlayDirective {
+    stOverlay = input.required(...(ngDevMode ? [{ debugName: "stOverlay" }] : []));
+    overlayOpen = model(false, ...(ngDevMode ? [{ debugName: "overlayOpen" }] : []));
+    overlayPlacement = input('bottom', ...(ngDevMode ? [{ debugName: "overlayPlacement" }] : []));
+    overlayOffset = input(8, ...(ngDevMode ? [{ debugName: "overlayOffset" }] : []));
+    element = inject(ElementRef);
+    viewContainerRef = inject(ViewContainerRef);
+    overlayEl;
+    cleanup;
+    constructor() { }
+    ngOnChanges() {
+        if (this.overlayOpen()) {
+            this.create();
+        }
+        else {
+            this.destroy();
+        }
+    }
+    async create() {
+        if (this.overlayEl)
+            return;
+        const view = this.viewContainerRef.createEmbeddedView(this.stOverlay());
+        view.detectChanges();
+        this.overlayEl = view.rootNodes[0];
+        document.body.appendChild(this.overlayEl);
+        this.cleanup = autoUpdate(this.element.nativeElement, this.overlayEl, () => this.updatePosition());
+    }
+    async updatePosition() {
+        if (!this.overlayEl)
+            return;
+        const { x, y } = await computePosition(this.element.nativeElement, this.overlayEl, {
+            placement: this.overlayPlacement(),
+            middleware: [offset(this.overlayOffset()), flip(), shift()],
+        });
+        if (!this.overlayEl)
+            return;
+        const { width, height } = this.element.nativeElement.getBoundingClientRect();
+        Object.assign(this.overlayEl.style, {
+            position: 'absolute',
+            left: `${x}px`,
+            top: `${y}px`,
+        });
+        this.overlayEl.style.setProperty('--st-overlay-anchor-element-width', `${width}px`);
+    }
+    destroy() {
+        if (this.cleanup)
+            this.cleanup();
+        if (this.overlayEl)
+            this.overlayEl.remove();
+        this.overlayEl = undefined;
+    }
+    ngOnDestroy() {
+        this.destroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: OverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: OverlayDirective, isStandalone: true, selector: "[stOverlay]", inputs: { stOverlay: { classPropertyName: "stOverlay", publicName: "stOverlay", isSignal: true, isRequired: true, transformFunction: null }, overlayOpen: { classPropertyName: "overlayOpen", publicName: "overlayOpen", isSignal: true, isRequired: false, transformFunction: null }, overlayPlacement: { classPropertyName: "overlayPlacement", publicName: "overlayPlacement", isSignal: true, isRequired: false, transformFunction: null }, overlayOffset: { classPropertyName: "overlayOffset", publicName: "overlayOffset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { overlayOpen: "overlayOpenChange" }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: OverlayDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[stOverlay]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { stOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "stOverlay", required: true }] }], overlayOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOpen", required: false }] }, { type: i0.Output, args: ["overlayOpenChange"] }], overlayPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayPlacement", required: false }] }], overlayOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOffset", required: false }] }] } });
+
+class ActionMenuComponent {
+    projectedButton = contentChild(ButtonDirective, { ...(ngDevMode ? { debugName: "projectedButton" } : {}), descendants: true,
+        read: ElementRef });
+    defaultButton = viewChild(ButtonDirective, { ...(ngDevMode ? { debugName: "defaultButton" } : {}), read: ElementRef });
+    actionMenuItems = contentChildren(ActionMenuItemComponent, ...(ngDevMode ? [{ debugName: "actionMenuItems" }] : []));
+    placement = input('bottom-end', ...(ngDevMode ? [{ debugName: "placement" }] : []));
+    renderer = inject(Renderer2);
+    menuOpen = signal(false, ...(ngDevMode ? [{ debugName: "menuOpen" }] : []));
+    ngAfterViewInit() {
+        const button = this.projectedButton() ?? this.defaultButton();
+        this.renderer.listen(button.nativeElement, 'click', () => {
+            this.menuOpen.set(!this.menuOpen());
+        });
+        this.actionMenuItems().forEach((item) => {
+            item.onMenuItemClicked.subscribe((shouldClose) => {
+                if (shouldClose) {
+                    this.menuOpen.set(false);
+                }
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ActionMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ActionMenuComponent, isStandalone: true, selector: "st-action-menu", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "projectedButton", first: true, predicate: ButtonDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "actionMenuItems", predicate: ActionMenuItemComponent, isSignal: true }], viewQueries: [{ propertyName: "defaultButton", first: true, predicate: ButtonDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div [stOverlay]=\"menu\" [overlayOpen]=\"menuOpen()\" [overlayPlacement]=\"placement()\">\n  <ng-content select=\"button[stButton]\"></ng-content>\n  @if (!projectedButton()) {\n    <button stButton><st-icon name=\"more\"></st-icon></button>\n  }\n</div>\n\n<ng-template #menu>\n  <st-card [padding]=\"false\"><ng-content select=\"st-action-menu-item\"></ng-content></st-card>\n</ng-template>\n", styles: ["st-card{width:fit-content}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "st-card", inputs: ["elevated", "selectable", "padding", "variant"] }, { kind: "directive", type: OverlayDirective, selector: "[stOverlay]", inputs: ["stOverlay", "overlayOpen", "overlayPlacement", "overlayOffset"], outputs: ["overlayOpenChange"] }, { kind: "component", type: IconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: ButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ActionMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-action-menu', imports: [CardComponent, OverlayDirective, IconComponent, ButtonDirective], template: "<div [stOverlay]=\"menu\" [overlayOpen]=\"menuOpen()\" [overlayPlacement]=\"placement()\">\n  <ng-content select=\"button[stButton]\"></ng-content>\n  @if (!projectedButton()) {\n    <button stButton><st-icon name=\"more\"></st-icon></button>\n  }\n</div>\n\n<ng-template #menu>\n  <st-card [padding]=\"false\"><ng-content select=\"st-action-menu-item\"></ng-content></st-card>\n</ng-template>\n", styles: ["st-card{width:fit-content}\n"] }]
+        }], propDecorators: { projectedButton: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ButtonDirective), { ...{
+                            descendants: true,
+                            read: ElementRef,
+                        }, isSignal: true }] }], defaultButton: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ButtonDirective), { ...{
+                            read: ElementRef,
+                        }, isSignal: true }] }], actionMenuItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ActionMenuItemComponent), { isSignal: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }] } });
+
+class AccordionItemComponent {
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    toggled = output();
+    constructor() {
+        let firstRun = true;
+        effect(() => {
+            let value = this.open();
+            if (!firstRun) {
+                this.toggled.emit(value);
+            }
+            firstRun = false;
+            return;
+        });
+    }
+    get isOpen() {
+        return this.open();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: AccordionItemComponent, isStandalone: true, selector: "st-accordion-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", toggled: "toggled" }, host: { properties: { "attr.open": "this.isOpen" } }, ngImport: i0, template: "<div class=\"accordion-header\" (click)=\"this.open.set(!this.open())\">\n  {{ title() }}\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n  >\n    <path\n      d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\n    ></path>\n  </svg>\n</div>\n\n<div class=\"accordion-content\">\n  <ng-content></ng-content>\n</div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AccordionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-accordion-item', imports: [], template: "<div class=\"accordion-header\" (click)=\"this.open.set(!this.open())\">\n  {{ title() }}\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n  >\n    <path\n      d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\n    ></path>\n  </svg>\n</div>\n\n<div class=\"accordion-content\">\n  <ng-content></ng-content>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], toggled: [{ type: i0.Output, args: ["toggled"] }], isOpen: [{
+                type: HostBinding,
+                args: ['attr.open']
+            }] } });
+
+class AccordionGroupComponent {
+    items = contentChildren(AccordionItemComponent, ...(ngDevMode ? [{ debugName: "items" }] : []));
+    allowMultipleOpen = input(false, ...(ngDevMode ? [{ debugName: "allowMultipleOpen" }] : []));
+    ngAfterContentInit() {
+        this.items().forEach((item) => {
+            item.toggled.subscribe((open) => {
+                if (open && !this.allowMultipleOpen()) {
+                    this.closeOtherItems(item);
+                }
+            });
+        });
+    }
+    closeOtherItems(currentItem) {
+        this.items().forEach((item) => {
+            if (item !== currentItem) {
+                item.open.set(false);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AccordionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: AccordionGroupComponent, isStandalone: true, selector: "st-accordion-group", inputs: { allowMultipleOpen: { classPropertyName: "allowMultipleOpen", publicName: "allowMultipleOpen", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "items", predicate: AccordionItemComponent, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AccordionGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-accordion-group', imports: [], template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AccordionItemComponent), { isSignal: true }] }], allowMultipleOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMultipleOpen", required: false }] }] } });
+
+class AvatarComponent {
+    iconComponents = contentChildren(IconComponent, { ...(ngDevMode ? { debugName: "iconComponents" } : {}), descendants: true });
+    text = input(null, ...(ngDevMode ? [{ debugName: "text" }] : []));
+    size = model('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    get elementClasses() {
+        return [this.size()];
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.iconComponents().forEach((icon) => {
+                icon.size.set(this.size());
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AvatarComponent, isStandalone: true, selector: "st-avatar", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange" }, host: { properties: { "class": "this.elementClasses" } }, queries: [{ propertyName: "iconComponents", predicate: IconComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (text() !== null) {\n  <span>{{ text() }}</span>\n}\n<ng-content></ng-content>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-avatar', imports: [], template: "@if (text() !== null) {\n  <span>{{ text() }}</span>\n}\n<ng-content></ng-content>\n" }]
+        }], propDecorators: { iconComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IconComponent), { ...{ descendants: true }, isSignal: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], elementClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class AvatarStackComponent {
+    avatarRefs = contentChildren(AvatarComponent, { ...(ngDevMode ? { debugName: "avatarRefs" } : {}), descendants: true,
+        read: ElementRef });
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    spacing = input('mid', ...(ngDevMode ? [{ debugName: "spacing" }] : []));
+    firstOnFront = input(false, ...(ngDevMode ? [{ debugName: "firstOnFront" }] : []));
+    get xsClass() {
+        return this.size() === 'xs';
+    }
+    get smClass() {
+        return this.size() === 'sm';
+    }
+    get mdClass() {
+        return this.size() === 'md';
+    }
+    get lgClass() {
+        return this.size() === 'lg';
+    }
+    get firstOnFrontClass() {
+        return this.firstOnFront();
+    }
+    get looseClass() {
+        return this.spacing() === 'loose';
+    }
+    get midClass() {
+        return this.spacing() === 'mid';
+    }
+    get tightClass() {
+        return this.spacing() === 'tight';
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.avatarRefs().forEach((ref, index) => {
+                if (this.firstOnFront()) {
+                    ref.nativeElement.style.setProperty('--z', (this.avatarRefs().length - index).toString());
+                }
+            });
+        }, 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AvatarStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: AvatarStackComponent, isStandalone: true, selector: "st-avatar-stack", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, firstOnFront: { classPropertyName: "firstOnFront", publicName: "firstOnFront", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.xs": "this.xsClass", "class.sm": "this.smClass", "class.md": "this.mdClass", "class.lg": "this.lgClass", "class.first-on-front": "this.firstOnFrontClass", "class.loose": "this.looseClass", "class.mid": "this.midClass", "class.tight": "this.tightClass" } }, queries: [{ propertyName: "avatarRefs", predicate: AvatarComponent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AvatarStackComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-avatar-stack', imports: [], template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { avatarRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AvatarComponent), { ...{
+                            descendants: true,
+                            read: ElementRef,
+                        }, isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], firstOnFront: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstOnFront", required: false }] }], xsClass: [{
+                type: HostBinding,
+                args: ['class.xs']
+            }], smClass: [{
+                type: HostBinding,
+                args: ['class.sm']
+            }], mdClass: [{
+                type: HostBinding,
+                args: ['class.md']
+            }], lgClass: [{
+                type: HostBinding,
+                args: ['class.lg']
+            }], firstOnFrontClass: [{
+                type: HostBinding,
+                args: ['class.first-on-front']
+            }], looseClass: [{
+                type: HostBinding,
+                args: ['class.loose']
+            }], midClass: [{
+                type: HostBinding,
+                args: ['class.mid']
+            }], tightClass: [{
+                type: HostBinding,
+                args: ['class.tight']
+            }] } });
+
+class ButtonGroupComponent {
+    renderer = inject(Renderer2);
+    justification = input('start', ...(ngDevMode ? [{ debugName: "justification" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ButtonGroupComponent, isStandalone: true, selector: "st-button-group", inputs: { justification: { classPropertyName: "justification", publicName: "justification", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-content select=\"[stButton], st-divider\" #buttons></ng-content>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-button-group', imports: [], template: "<ng-content select=\"[stButton], st-divider\" #buttons></ng-content>\n" }]
+        }], propDecorators: { justification: [{ type: i0.Input, args: [{ isSignal: true, alias: "justification", required: false }] }] } });
+
+class NativeInputRefDirective {
+    el = inject((ElementRef));
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NativeInputRefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: NativeInputRefDirective, isStandalone: true, selector: "input[stInput], textarea[stInput]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NativeInputRefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[stInput], textarea[stInput]',
+                }]
+        }], ctorParameters: () => [] });
+
+class InputFieldComponent {
+    iconComponents = contentChildren(IconComponent, { ...(ngDevMode ? { debugName: "iconComponents" } : {}), descendants: true });
+    inputField = contentChild(NativeInputRefDirective, { ...(ngDevMode ? { debugName: "inputField" } : {}), descendants: true });
+    pendingFocus = signal(false, ...(ngDevMode ? [{ debugName: "pendingFocus" }] : []));
+    constructor() {
+        effect(() => {
+            const input = this.inputField();
+            if (input && this.pendingFocus()) {
+                input.el.nativeElement.focus();
+                this.pendingFocus.set(false);
+            }
+        });
+    }
+    ngAfterViewInit() {
+        setTimeout(() => this.iconComponents().forEach((icon) => icon.size.set('sm')), 1);
+    }
+    focus() {
+        const input = this.inputField();
+        this.pendingFocus.set(true);
+    }
+    blur() {
+        this.inputField()?.el.nativeElement.blur();
+    }
+    get nativeInput() {
+        return this.inputField()?.el.nativeElement;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: InputFieldComponent, isStandalone: true, selector: "st-input-field", queries: [{ propertyName: "iconComponents", predicate: IconComponent, descendants: true, isSignal: true }, { propertyName: "inputField", first: true, predicate: NativeInputRefDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"st-input-wrapper\">\n  <div class=\"affix\">\n    <ng-content select=\"[prefix]\"></ng-content>\n  </div>\n  <ng-content select=\"input,textarea\"></ng-content>\n  <div class=\"affix\">\n    <ng-content select=\"[suffix]\"></ng-content>\n  </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InputFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-input-field', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"label\"></ng-content>\n<div class=\"st-input-wrapper\">\n  <div class=\"affix\">\n    <ng-content select=\"[prefix]\"></ng-content>\n  </div>\n  <ng-content select=\"input,textarea\"></ng-content>\n  <div class=\"affix\">\n    <ng-content select=\"[suffix]\"></ng-content>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { iconComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IconComponent), { ...{ descendants: true }, isSignal: true }] }], inputField: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NativeInputRefDirective), { ...{
+                            descendants: true,
+                        }, isSignal: true }] }] } });
+
+class DropdownComponent {
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    placeholder = input('Select', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    placement = input('bottom-start', ...(ngDevMode ? [{ debugName: "placement" }] : []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+    selected = model(...(ngDevMode ? [undefined, { debugName: "selected" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
+    searchQuery = model(...(ngDevMode ? [undefined, { debugName: "searchQuery" }] : []));
+    searchPlaceholder = input('Search', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
+    dropdownItems = input.required(...(ngDevMode ? [{ debugName: "dropdownItems" }] : []));
+    shownItems = computed(() => {
+        if (!this.searchQuery()) {
+            return this.dropdownItems();
+        }
+        return this.dropdownItems().filter((item) => item.text.toLowerCase().includes(this.searchQuery().toLowerCase().trim()));
+    }, ...(ngDevMode ? [{ debugName: "shownItems" }] : []));
+    onSelect = output();
+    inputField = viewChild(InputFieldComponent, ...(ngDevMode ? [{ debugName: "inputField" }] : []));
+    get classList() {
+        return [this.size()];
+    }
+    toggleDropdown(event) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        if (this.open()) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+    }
+    onItemClick(item, mouseEvent) {
+        this.toggleDropdown();
+        mouseEvent.stopPropagation();
+        this.selected.set(item);
+        this.onSelect.emit(item);
+    }
+    onItemHover(mouseEvent) {
+        mouseEvent.stopPropagation();
+        mouseEvent.stopImmediatePropagation();
+        mouseEvent.preventDefault();
+    }
+    show() {
+        this.open.set(true);
+        setTimeout(() => {
+            this.inputField()?.focus();
+        }, 10);
+    }
+    hide() {
+        this.open.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DropdownComponent, isStandalone: true, selector: "st-dropdown", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, dropdownItems: { classPropertyName: "dropdownItems", publicName: "dropdownItems", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selected: "selectedChange", searchQuery: "searchQueryChange", onSelect: "onSelect" }, host: { properties: { "class": "this.classList" } }, viewQueries: [{ propertyName: "inputField", first: true, predicate: InputFieldComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <label [for]=\"name()\"> {{ label() }}</label>\n}\n<div\n  class=\"dropdown-input\"\n  [id]=\"name()\"\n  #dropdownInput\n  (click)=\"toggleDropdown($event)\"\n  [attr.data-open]=\"open()\"\n  tabindex=\"0\"\n  [stOverlay]=\"selector\"\n  [overlayOpen]=\"open()\"\n  [overlayPlacement]=\"placement()\">\n  @if (selected()) {\n    {{ selected()!.text }}\n  } @else {\n    <span class=\"placeholder-text\">{{ placeholder() }}</span>\n  }\n\n  <st-icon name=\"expand-up-down\"></st-icon>\n</div>\n\n<ng-template #selector>\n  <div class=\"dropdown-selector\" #dropdownSelector [class.full-width]=\"fullWidth()\">\n    @if (searchable()) {\n      <st-input-field>\n        <input stInput #searchField type=\"text\" [(ngModel)]=\"searchQuery\" [placeholder]=\"searchPlaceholder()\" />\n        <button\n          stButton\n          variant=\"ghost\"\n          [class.visible]=\"searchQuery() !== undefined && searchQuery()!.length > 0\"\n          suffix\n          size=\"sm\"\n          (click)=\"searchQuery.set(undefined)\">\n          x\n        </button>\n      </st-input-field>\n    }\n    @for (item of shownItems(); track item.id) {\n      <div class=\"dropdown-item\" (click)=\"onItemClick(item, $event)\" (mouseover)=\"onItemHover($event)\">\n        {{ item.text }}\n      </div>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: OverlayDirective, selector: "[stOverlay]", inputs: ["stOverlay", "overlayOpen", "overlayPlacement", "overlayOffset"], outputs: ["overlayOpenChange"] }, { kind: "component", type: InputFieldComponent, selector: "st-input-field" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NativeInputRefDirective, selector: "input[stInput], textarea[stInput]" }, { kind: "directive", type: ButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-dropdown', imports: [
+                        IconComponent,
+                        OverlayDirective,
+                        InputFieldComponent,
+                        FormsModule,
+                        NativeInputRefDirective,
+                        ButtonDirective,
+                    ], template: "@if (label()) {\n  <label [for]=\"name()\"> {{ label() }}</label>\n}\n<div\n  class=\"dropdown-input\"\n  [id]=\"name()\"\n  #dropdownInput\n  (click)=\"toggleDropdown($event)\"\n  [attr.data-open]=\"open()\"\n  tabindex=\"0\"\n  [stOverlay]=\"selector\"\n  [overlayOpen]=\"open()\"\n  [overlayPlacement]=\"placement()\">\n  @if (selected()) {\n    {{ selected()!.text }}\n  } @else {\n    <span class=\"placeholder-text\">{{ placeholder() }}</span>\n  }\n\n  <st-icon name=\"expand-up-down\"></st-icon>\n</div>\n\n<ng-template #selector>\n  <div class=\"dropdown-selector\" #dropdownSelector [class.full-width]=\"fullWidth()\">\n    @if (searchable()) {\n      <st-input-field>\n        <input stInput #searchField type=\"text\" [(ngModel)]=\"searchQuery\" [placeholder]=\"searchPlaceholder()\" />\n        <button\n          stButton\n          variant=\"ghost\"\n          [class.visible]=\"searchQuery() !== undefined && searchQuery()!.length > 0\"\n          suffix\n          size=\"sm\"\n          (click)=\"searchQuery.set(undefined)\">\n          x\n        </button>\n      </st-input-field>\n    }\n    @for (item of shownItems(); track item.id) {\n      <div class=\"dropdown-item\" (click)=\"onItemClick(item, $event)\" (mouseover)=\"onItemHover($event)\">\n        {{ item.text }}\n      </div>\n    }\n  </div>\n</ng-template>\n" }]
+        }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchQuery", required: false }] }, { type: i0.Output, args: ["searchQueryChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], dropdownItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownItems", required: true }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], inputField: [{ type: i0.ViewChild, args: [i0.forwardRef(() => InputFieldComponent), { isSignal: true }] }], classList: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class DividerComponent {
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    margin = input(true, ...(ngDevMode ? [{ debugName: "margin" }] : []));
+    vertical = input(false, ...(ngDevMode ? [{ debugName: "vertical" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DividerComponent, isStandalone: true, selector: "st-divider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!label() || vertical()) {\n  <div class=\"divider-line\" [class.divider-margin]=\"margin()\" [class.vertical]=\"vertical()\"></div>\n} @else {\n  <div class=\"divider-line-with-text\" [class.divider-margin]=\"margin()\">\n    <div class=\"divider-line\"></div>\n    <span>{{ label() }}</span>\n    <div class=\"divider-line\"></div>\n  </div>\n}\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DividerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-divider', imports: [], template: "@if (!label() || vertical()) {\n  <div class=\"divider-line\" [class.divider-margin]=\"margin()\" [class.vertical]=\"vertical()\"></div>\n} @else {\n  <div class=\"divider-line-with-text\" [class.divider-margin]=\"margin()\">\n    <div class=\"divider-line\"></div>\n    <span>{{ label() }}</span>\n    <div class=\"divider-line\"></div>\n  </div>\n}\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }] } });
+
+class TagComponent {
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    get class() {
+        return this.size();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: TagComponent, isStandalone: true, selector: "st-tag", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TagComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'st-tag',
+                    imports: [],
+                    template: '<ng-content></ng-content>',
+                }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class ItemComponent {
+    interactable = input(false, ...(ngDevMode ? [{ debugName: "interactable" }] : []));
+    get isInteractable() {
+        return this.interactable();
+    }
+    get tabIndex() {
+        return this.interactable() ? 0 : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ItemComponent, isStandalone: true, selector: "st-item", inputs: { interactable: { classPropertyName: "interactable", publicName: "interactable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.interactable": "this.isInteractable", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: "<span class=\"item-start\">\n  <ng-content select=\"[area='start']\"></ng-content\n></span>\n<span class=\"item-default\"> <ng-content></ng-content></span>\n<span class=\"item-end\">\n  <ng-content select=\"[area='end']\"></ng-content>\n</span>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-item', imports: [], template: "<span class=\"item-start\">\n  <ng-content select=\"[area='start']\"></ng-content\n></span>\n<span class=\"item-default\"> <ng-content></ng-content></span>\n<span class=\"item-end\">\n  <ng-content select=\"[area='end']\"></ng-content>\n</span>\n" }]
+        }], propDecorators: { interactable: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactable", required: false }] }], isInteractable: [{
+                type: HostBinding,
+                args: ['class.interactable']
+            }], tabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }] } });
+
+class ItemListComponent {
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
+    dividers = input(true, ...(ngDevMode ? [{ debugName: "dividers" }] : []));
+    template = input(...(ngDevMode ? [undefined, { debugName: "template" }] : []));
+    get hostClasses() {
+        return [this.dividers() ? 'with-dividers' : ''];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ItemListComponent, isStandalone: true, selector: "st-item-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, dividers: { classPropertyName: "dividers", publicName: "dividers", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "@for (item of items(); track item; let last = $last) {\n  <ng-template #defaultItemTemplate>\n    <st-item>{{ item }}</st-item>\n  </ng-template>\n  <ng-container\n    [ngTemplateOutlet]=\"template() || defaultItemTemplate\"\n    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n}\n", dependencies: [{ kind: "component", type: ItemComponent, selector: "st-item", inputs: ["interactable"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ItemListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-item-list', imports: [ItemComponent, NgTemplateOutlet, CommonModule], template: "@for (item of items(); track item; let last = $last) {\n  <ng-template #defaultItemTemplate>\n    <st-item>{{ item }}</st-item>\n  </ng-template>\n  <ng-container\n    [ngTemplateOutlet]=\"template() || defaultItemTemplate\"\n    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n}\n" }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], dividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividers", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class AutoResizeDirective {
+    minimumRows = input(1, ...(ngDevMode ? [{ debugName: "minimumRows" }] : []));
+    maximumRows = input(...(ngDevMode ? [undefined, { debugName: "maximumRows" }] : []));
+    lineHeight = 0;
+    element = inject(ElementRef);
+    onInput() {
+        this.resize();
+    }
+    onWindowResize() {
+        this.resize();
+    }
+    constructor() { }
+    ngAfterViewInit() {
+        this.calculateLineHeight();
+        this.resize();
+    }
+    ngOnChanges(changes) {
+        if (changes['minRows'] || changes['maxRows']) {
+            this.resize();
+        }
+    }
+    calculateLineHeight() {
+        const textarea = this.element.nativeElement;
+        const originalRows = textarea.rows;
+        const originalValue = textarea.value;
+        textarea.rows = 1;
+        textarea.value = '';
+        // Force layout
+        this.lineHeight = textarea.scrollHeight;
+        // Restore
+        textarea.rows = originalRows;
+        textarea.value = originalValue;
+    }
+    resize() {
+        const textarea = this.element.nativeElement;
+        textarea.style.height = 'auto';
+        const scrollHeight = textarea.scrollHeight;
+        const minHeight = this.minimumRows() * this.lineHeight;
+        const maxHeight = this.maximumRows() ? this.maximumRows() * this.lineHeight : Infinity;
+        const newHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight);
+        textarea.style.height = `${newHeight}px`;
+        textarea.style.overflowY = scrollHeight > maxHeight ? 'auto' : 'hidden';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AutoResizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: AutoResizeDirective, isStandalone: true, selector: "[stAutoResize]", inputs: { minimumRows: { classPropertyName: "minimumRows", publicName: "minimumRows", isSignal: true, isRequired: false, transformFunction: null }, maximumRows: { classPropertyName: "maximumRows", publicName: "maximumRows", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput()", "window:resize": "onWindowResize()" } }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AutoResizeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[stAutoResize]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { minimumRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimumRows", required: false }] }], maximumRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximumRows", required: false }] }], onInput: [{
+                type: HostListener,
+                args: ['input']
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+class PaginationComponent {
+    currentPage = model(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+    totalPages = input.required(...(ngDevMode ? [{ debugName: "totalPages" }] : []));
+    onPageSelect = output();
+    pageButtons = computed(() => this.calculatePageButtons(this.currentPage(), this.totalPages()), ...(ngDevMode ? [{ debugName: "pageButtons" }] : []));
+    hideNextPreviousAtStartEnd = input(false, ...(ngDevMode ? [{ debugName: "hideNextPreviousAtStartEnd" }] : []));
+    changePage(newPage) {
+        this.currentPage.set(newPage);
+        this.onPageSelect.emit(this.currentPage());
+    }
+    calculatePageButtons(currentPage, totalPages) {
+        const buttons = [];
+        if (totalPages <= 7) {
+            return this.showAllPages(totalPages);
+        }
+        if (currentPage < 4) {
+            return this.showStartingPages(totalPages);
+        }
+        if (currentPage > totalPages - 4) {
+            return this.showEndingPages(totalPages);
+        }
+        buttons.push(this.pageItem(1));
+        buttons.push(this.spaceItem());
+        buttons.push(this.pageItem(currentPage - 1));
+        buttons.push(this.pageItem(currentPage));
+        buttons.push(this.pageItem(currentPage + 1));
+        buttons.push(this.spaceItem());
+        buttons.push(this.pageItem(totalPages));
+        return buttons;
+    }
+    showStartingPages(totalPages) {
+        return [
+            this.pageItem(1),
+            this.pageItem(2),
+            this.pageItem(3),
+            this.pageItem(4),
+            this.spaceItem(),
+            this.pageItem(totalPages - 1),
+            this.pageItem(totalPages),
+        ];
+    }
+    showEndingPages(totalPages) {
+        return [
+            this.pageItem(1),
+            this.pageItem(2),
+            this.spaceItem(),
+            this.pageItem(totalPages - 3),
+            this.pageItem(totalPages - 2),
+            this.pageItem(totalPages - 1),
+            this.pageItem(totalPages),
+        ];
+    }
+    showAllPages(totalPages) {
+        const buttons = [];
+        for (let i = 1; i <= totalPages; i++) {
+            buttons.push(this.pageItem(i));
+        }
+        return buttons;
+    }
+    spaceItem() {
+        return { page: undefined, text: '...', clickable: false };
+    }
+    pageItem(page) {
+        return {
+            page: page,
+            text: page + '',
+            clickable: true,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PaginationComponent, isStandalone: true, selector: "st-pagination", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: true, transformFunction: null }, hideNextPreviousAtStartEnd: { classPropertyName: "hideNextPreviousAtStartEnd", publicName: "hideNextPreviousAtStartEnd", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", onPageSelect: "onPageSelect" }, ngImport: i0, template: "<button\n  [disabled]=\"currentPage() === 1\"\n  [class.clickable]=\"true\"\n  [class.hideOnDisabled]=\"hideNextPreviousAtStartEnd()\"\n  (click)=\"changePage(currentPage() - 1)\"\n>\n  Previous\n</button>\n@for (page of pageButtons(); track page) {\n  <button\n    [class.selected]=\"page.page === currentPage()\"\n    [class.clickable]=\"page.clickable\"\n    (click)=\"page.page ? changePage(page.page) : null\"\n  >\n    {{ page.text }}\n  </button>\n}\n<button\n  [disabled]=\"currentPage() === totalPages()\"\n  (click)=\"changePage(currentPage() + 1)\"\n  [class.clickable]=\"true\"\n  [class.hideOnDisabled]=\"hideNextPreviousAtStartEnd()\"\n>\n  Next\n</button>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-pagination', imports: [], template: "<button\n  [disabled]=\"currentPage() === 1\"\n  [class.clickable]=\"true\"\n  [class.hideOnDisabled]=\"hideNextPreviousAtStartEnd()\"\n  (click)=\"changePage(currentPage() - 1)\"\n>\n  Previous\n</button>\n@for (page of pageButtons(); track page) {\n  <button\n    [class.selected]=\"page.page === currentPage()\"\n    [class.clickable]=\"page.clickable\"\n    (click)=\"page.page ? changePage(page.page) : null\"\n  >\n    {{ page.text }}\n  </button>\n}\n<button\n  [disabled]=\"currentPage() === totalPages()\"\n  (click)=\"changePage(currentPage() + 1)\"\n  [class.clickable]=\"true\"\n  [class.hideOnDisabled]=\"hideNextPreviousAtStartEnd()\"\n>\n  Next\n</button>\n" }]
+        }], propDecorators: { currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: true }] }], onPageSelect: [{ type: i0.Output, args: ["onPageSelect"] }], hideNextPreviousAtStartEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideNextPreviousAtStartEnd", required: false }] }] } });
+
+class CapitalizePipe {
+    static capitalize(value) {
+        return value.substring(0, 1).toLocaleUpperCase() + value.substring(1);
+    }
+    transform(value, ...args) {
+        return CapitalizePipe.capitalize(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CapitalizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: CapitalizePipe, isStandalone: true, name: "capitalize" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CapitalizePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'capitalize',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
+class ProgressComponent {
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    type = input('linear', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    showLabel = input(true, ...(ngDevMode ? [{ debugName: "showLabel" }] : []));
+    labelFormat = input('percentage', ...(ngDevMode ? [{ debugName: "labelFormat" }] : []));
+    growDirection = input('right', ...(ngDevMode ? [{ debugName: "growDirection" }] : []));
+    size = input(120, ...(ngDevMode ? [{ debugName: "size" }] : []));
+    strokeWidth = input(10, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : []));
+    percentage = computed(() => {
+        if (this.max() <= this.min()) {
+            return 0;
+        }
+        const clampedValue = Math.min(Math.max(this.value(), this.min()), this.max());
+        const progressedValue = clampedValue - this.min();
+        const progressableValues = this.max() - this.min();
+        return (progressedValue / progressableValues) * 100;
+    }, ...(ngDevMode ? [{ debugName: "percentage" }] : []));
+    radius = computed(() => (this.size() - this.strokeWidth()) / 2, ...(ngDevMode ? [{ debugName: "radius" }] : []));
+    circumference = computed(() => 2 * Math.PI * this.radius(), ...(ngDevMode ? [{ debugName: "circumference" }] : []));
+    dashOffset = computed(() => this.circumference() * (1 - this.percentage() / 100), ...(ngDevMode ? [{ debugName: "dashOffset" }] : []));
+    get cssClasses() {
+        return [this.type(), `grow-${this.growDirection()}`];
+    }
+    get percentageProperty() {
+        return this.percentage();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ProgressComponent, isStandalone: true, selector: "st-progress", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, labelFormat: { classPropertyName: "labelFormat", publicName: "labelFormat", isSignal: true, isRequired: false, transformFunction: null }, growDirection: { classPropertyName: "growDirection", publicName: "growDirection", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.cssClasses", "style.--st-progress-percentage": "this.percentageProperty" } }, ngImport: i0, template: "@switch (type()) {\n  @case (\"linear\") {\n    <div class=\"linear-container\">\n      <div class=\"linear-bar\" [style.width.%]=\"percentage()\"></div>\n    </div>\n\n    <ng-container [ngTemplateOutlet]=\"label\"></ng-container>\n  }\n  @case (\"radial\") {\n    <div class=\"radial-container\">\n      <svg width=\"100%\" height=\"100%\">\n        <circle class=\"background\"></circle>\n\n        <circle class=\"progress\" stroke-linecap=\"round\"></circle>\n      </svg>\n\n      <ng-container [ngTemplateOutlet]=\"label\"></ng-container>\n    </div>\n  }\n}\n\n<ng-template #label>\n  @if (showLabel()) {\n    <span class=\"label\">\n      @switch (labelFormat()) {\n        @case (\"percentage\") {\n          {{ percentage() | number: \"1.0-0\" }}%\n        }\n        @case (\"value\") {\n          {{ value() | number: \"1.0-0\" }}\n        }\n      }\n    </span>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProgressComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-progress', imports: [DecimalPipe, NgTemplateOutlet], template: "@switch (type()) {\n  @case (\"linear\") {\n    <div class=\"linear-container\">\n      <div class=\"linear-bar\" [style.width.%]=\"percentage()\"></div>\n    </div>\n\n    <ng-container [ngTemplateOutlet]=\"label\"></ng-container>\n  }\n  @case (\"radial\") {\n    <div class=\"radial-container\">\n      <svg width=\"100%\" height=\"100%\">\n        <circle class=\"background\"></circle>\n\n        <circle class=\"progress\" stroke-linecap=\"round\"></circle>\n      </svg>\n\n      <ng-container [ngTemplateOutlet]=\"label\"></ng-container>\n    </div>\n  }\n}\n\n<ng-template #label>\n  @if (showLabel()) {\n    <span class=\"label\">\n      @switch (labelFormat()) {\n        @case (\"percentage\") {\n          {{ percentage() | number: \"1.0-0\" }}%\n        }\n        @case (\"value\") {\n          {{ value() | number: \"1.0-0\" }}\n        }\n      }\n    </span>\n  }\n</ng-template>\n" }]
+        }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], labelFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelFormat", required: false }] }], growDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "growDirection", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], percentageProperty: [{
+                type: HostBinding,
+                args: ['style.--st-progress-percentage']
+            }] } });
+
+class SegmentedControlItemComponent {
+    text = input.required(...(ngDevMode ? [{ debugName: "text" }] : []));
+    selected = model(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    onSelection = output();
+    get tabIndex() {
+        return this.selected() || this.disabled() ? null : 0;
+    }
+    get disabledAttribute() {
+        return this.disabled() ? true : null;
+    }
+    onClick() {
+        this.selected.set(true);
+        this.onSelection.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SegmentedControlItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: SegmentedControlItemComponent, isStandalone: true, selector: "st-segmented-control-item", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", onSelection: "onSelection" }, host: { listeners: { "click": "onClick()" }, properties: { "attr.tabindex": "this.tabIndex", "attr.disabled": "this.disabledAttribute" } }, ngImport: i0, template: `{{ text() }} `, isInline: true, styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SegmentedControlItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-segmented-control-item', imports: [], template: `{{ text() }} `, host: {
+                        '(click)': 'onClick()',
+                    } }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], onSelection: [{ type: i0.Output, args: ["onSelection"] }], tabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], disabledAttribute: [{
+                type: HostBinding,
+                args: ['attr.disabled']
+            }] } });
+
+class SegmentedControlComponent {
+    segmentItems = contentChildren(SegmentedControlItemComponent, ...(ngDevMode ? [{ debugName: "segmentItems" }] : []));
+    segmentItemsRefs = contentChildren(SegmentedControlItemComponent, { ...(ngDevMode ? { debugName: "segmentItemsRefs" } : {}), read: ElementRef });
+    selectedItem = signal(null, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
+    selectedIndex = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
+    offset = computed(() => this.widths()[this.selectedIndex()], ...(ngDevMode ? [{ debugName: "offset" }] : []));
+    widths = signal([], ...(ngDevMode ? [{ debugName: "widths" }] : []));
+    ngAfterViewInit() {
+        if (this.segmentItems().length === 0) {
+            return;
+        }
+        const widths = [];
+        for (let i = 0; i < this.segmentItems().length; i++) {
+            widths.push(this.calculateOffset(i));
+        }
+        this.widths.set(widths);
+        for (const item of this.segmentItems()) {
+            item.onSelection.subscribe(() => {
+                this.selectItem(item);
+            });
+        }
+        const initiallySelected = this.segmentItems().find((item) => item.selected());
+        if (!initiallySelected) {
+            const firstItem = this.segmentItems()[0];
+            firstItem.selected.set(true);
+            this.selectItem(firstItem);
+        }
+        else {
+            this.selectItem(initiallySelected);
+        }
+    }
+    selectItem(selectedItem) {
+        this.selectedItem.set(selectedItem);
+        this.selectedIndex.set(this.segmentItems().indexOf(selectedItem));
+    }
+    calculateOffset(currentIndex) {
+        const elementsBeforeIndex = this.segmentItemsRefs().slice(0, currentIndex) ?? [];
+        if (elementsBeforeIndex.length > 0) {
+            return elementsBeforeIndex
+                .map((element) => element.nativeElement.offsetWidth)
+                .reduce((sum, currentValue) => (sum += currentValue));
+        }
+        return 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: SegmentedControlComponent, isStandalone: true, selector: "st-segmented-control", queries: [{ propertyName: "segmentItems", predicate: SegmentedControlItemComponent, isSignal: true }, { propertyName: "segmentItemsRefs", predicate: SegmentedControlItemComponent, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-content select=\"st-segmented-control-item\"></ng-content>\n<div class=\"selection-item\" id=\"selection-indicator\" [style.marginLeft]=\"this.offset() + 'px'\">\n  {{ this.selectedItem()?.text() }}\n</div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SegmentedControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-segmented-control', imports: [], template: "<ng-content select=\"st-segmented-control-item\"></ng-content>\n<div class=\"selection-item\" id=\"selection-indicator\" [style.marginLeft]=\"this.offset() + 'px'\">\n  {{ this.selectedItem()?.text() }}\n</div>\n" }]
+        }], propDecorators: { segmentItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SegmentedControlItemComponent), { isSignal: true }] }], segmentItemsRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SegmentedControlItemComponent), { ...{
+                            read: ElementRef,
+                        }, isSignal: true }] }] } });
+
+class SliderComponent {
+    wrapper = viewChild.required('wrapper');
+    resizeObserver;
+    value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    minimum = input.required(...(ngDevMode ? [{ debugName: "minimum" }] : []));
+    maximum = input.required(...(ngDevMode ? [{ debugName: "maximum" }] : []));
+    step = input(...(ngDevMode ? [undefined, { debugName: "step" }] : []));
+    computedStep = computed(() => this.step() === 'none' || this.step() === undefined ? 'any' : this.step(), ...(ngDevMode ? [{ debugName: "computedStep" }] : []));
+    steps = computed(() => {
+        const step = this.computedStep();
+        if (step === 'any' || step === undefined) {
+            return 0;
+        }
+        return Math.floor((this.maximum() - this.minimum()) / step) + 1;
+    }, ...(ngDevMode ? [{ debugName: "steps" }] : []));
+    isStepped = computed(() => this.computedStep() !== 'any' && this.computedStep() !== undefined && this.computedStep() !== 0, ...(ngDevMode ? [{ debugName: "isStepped" }] : []));
+    ngAfterViewInit() {
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateTickMath();
+        });
+        this.resizeObserver.observe(this.wrapper().nativeElement);
+    }
+    ngOnDestroy() {
+        this.resizeObserver.disconnect();
+    }
+    updateTickMath() {
+        if (!this.isStepped())
+            return;
+        const wrapperEl = this.wrapper().nativeElement;
+        const sliderWidth = wrapperEl.offsetWidth;
+        const thumbSize = this.getThumbSize(wrapperEl);
+        const usableWidth = sliderWidth - thumbSize;
+        const intervalCount = this.steps() - 1;
+        if (intervalCount <= 0)
+            return;
+        const intervalPx = Math.round(usableWidth / intervalCount);
+        wrapperEl.style.setProperty('--st-slider-usable-width', `${usableWidth}px`);
+        wrapperEl.style.setProperty('--st-slider-interval-px', `${intervalPx}px`);
+        wrapperEl.style.setProperty('--st-slider-thumb-offset', `${thumbSize / 2}px`);
+    }
+    getThumbSize(el) {
+        const styles = getComputedStyle(el);
+        const size = styles.getPropertyValue('--st-slider-thumb-size');
+        return parseFloat(size);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: SliderComponent, isStandalone: true, selector: "st-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, minimum: { classPropertyName: "minimum", publicName: "minimum", isSignal: true, isRequired: true, transformFunction: null }, maximum: { classPropertyName: "maximum", publicName: "maximum", isSignal: true, isRequired: true, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #wrapper\n  class=\"range-wrapper\"\n  [style.--steps]=\"steps()\"\n  [class.stepped]=\"isStepped()\"\n>\n  <input\n    type=\"range\"\n    [(ngModel)]=\"value\"\n    [min]=\"minimum()\"\n    [max]=\"maximum()\"\n    [step]=\"computedStep()\"\n  />\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-slider', imports: [FormsModule], template: "<div\n  #wrapper\n  class=\"range-wrapper\"\n  [style.--steps]=\"steps()\"\n  [class.stepped]=\"isStepped()\"\n>\n  <input\n    type=\"range\"\n    [(ngModel)]=\"value\"\n    [min]=\"minimum()\"\n    [max]=\"maximum()\"\n    [step]=\"computedStep()\"\n  />\n</div>\n" }]
+        }], propDecorators: { wrapper: [{ type: i0.ViewChild, args: ['wrapper', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], minimum: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimum", required: true }] }], maximum: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximum", required: true }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }] } });
+
+class SpinnerComponent {
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    get cssClasses() {
+        return [this.size()];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: SpinnerComponent, isStandalone: true, selector: "st-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<span class=\"st-spinner\"></span>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-spinner', imports: [], template: "<span class=\"st-spinner\"></span>\n" }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class TextStackComponent {
+    overflow = input('truncate', ...(ngDevMode ? [{ debugName: "overflow" }] : []));
+    get cssClasses() {
+        return [this.overflow()];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TextStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: TextStackComponent, isStandalone: true, selector: "st-text-stack", inputs: { overflow: { classPropertyName: "overflow", publicName: "overflow", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TextStackComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-text-stack', imports: [], template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { overflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflow", required: false }] }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class ThemeDirective {
+    element = inject(ElementRef);
+    stTheme = input.required(...(ngDevMode ? [{ debugName: "stTheme" }] : []));
+    constructor() {
+        effect(() => {
+            const theme = this.stTheme();
+            const el = this.element.nativeElement;
+            // remove previous theme classes
+            el.classList.forEach((cls) => {
+                if (cls.startsWith('st-theme-')) {
+                    el.classList.remove(cls);
+                }
+            });
+            el.classList.add(`st-theme-${theme}`);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ThemeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ThemeDirective, isStandalone: true, selector: "[stTheme]", inputs: { stTheme: { classPropertyName: "stTheme", publicName: "stTheme", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ThemeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[stTheme]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { stTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "stTheme", required: true }] }] } });
+
+class Stack {
+    items = [];
+    push(item) {
+        this.items.push(item);
+    }
+    pop() {
+        const lastItem = this.items.pop();
+        if (lastItem === undefined) {
+            throw new Error();
+        }
+        return lastItem;
+    }
+    peek() {
+        return this.items[this.items.length - 1];
+    }
+    empty() {
+        return this.items.length === 0;
+    }
+    size() {
+        return this.items.length;
+    }
+}
+
+class ModalService {
+    stack = new Stack();
+    currentModals = new BehaviorSubject(this.stack);
+    showModal(config) {
+        this.stack.push({
+            ...config,
+            id: crypto.randomUUID(),
+            size: config.size ?? 'md',
+        });
+        this.currentModals.next(this.stack);
+    }
+    showAlert(config, callback) {
+        this.showModal({
+            component: AlertContentComponent,
+            size: 'xs',
+            hideCloseButton: true,
+            onModalClosed: callback,
+            disableBackdropClosure: true,
+            inputs: {
+                title: config.title,
+                message: config.message,
+                affirmativeButton: config.affirmativeButton,
+                cancelButton: config.cancelButton,
+                theme: config.theme,
+                icon: config.icon,
+            },
+        });
+    }
+    closeCurrentModal(value) {
+        const currentModal = this.stack.pop();
+        this.currentModals.next(this.stack);
+        if (currentModal.onModalClosed) {
+            currentModal.onModalClosed(value);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class AlertContentComponent {
+    modalService;
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
+    message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : []));
+    icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    computedIcon = computed(() => {
+        return this.icon() ?? '';
+    }, ...(ngDevMode ? [{ debugName: "computedIcon" }] : []));
+    theme = input('info', ...(ngDevMode ? [{ debugName: "theme" }] : []));
+    affirmativeButton = input.required(...(ngDevMode ? [{ debugName: "affirmativeButton" }] : []));
+    cancelButton = input(undefined, ...(ngDevMode ? [{ debugName: "cancelButton" }] : []));
+    constructor(modalService) {
+        this.modalService = modalService;
+    }
+    onAffirmation() {
+        this.modalService.closeCurrentModal(true);
+    }
+    onCancel() {
+        this.modalService.closeCurrentModal(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AlertContentComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AlertContentComponent, isStandalone: true, selector: "st-alert-content", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, affirmativeButton: { classPropertyName: "affirmativeButton", publicName: "affirmativeButton", isSignal: true, isRequired: true, transformFunction: null }, cancelButton: { classPropertyName: "cancelButton", publicName: "cancelButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"alert-content\">\n  @if (icon() !== undefined) {\n    <st-avatar size=\"lg\" [stTheme]=\"theme()\">\n      <st-icon [name]=\"computedIcon()\"></st-icon>\n    </st-avatar>\n  }\n\n  <p class=\"alert-title\">{{ title() }}</p>\n  @if (message()) {\n    <p class=\"alert-message\">{{ message() }}</p>\n  }\n</div>\n<st-button-group justification=\"expand\">\n  @if (cancelButton()) {\n    <button stButton (click)=\"onCancel()\">{{ cancelButton() }}</button>\n  }\n  <button stButton [stTheme]=\"theme()\" variant=\"primary\" (click)=\"onAffirmation()\">{{ affirmativeButton() }}</button>\n</st-button-group>\n", dependencies: [{ kind: "component", type: AvatarComponent, selector: "st-avatar", inputs: ["text", "size"], outputs: ["sizeChange"] }, { kind: "component", type: IconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: ThemeDirective, selector: "[stTheme]", inputs: ["stTheme"] }, { kind: "component", type: ButtonGroupComponent, selector: "st-button-group", inputs: ["justification"] }, { kind: "directive", type: ButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AlertContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-alert-content', imports: [AvatarComponent, IconComponent, ThemeDirective, ButtonGroupComponent, ButtonDirective], template: "<div class=\"alert-content\">\n  @if (icon() !== undefined) {\n    <st-avatar size=\"lg\" [stTheme]=\"theme()\">\n      <st-icon [name]=\"computedIcon()\"></st-icon>\n    </st-avatar>\n  }\n\n  <p class=\"alert-title\">{{ title() }}</p>\n  @if (message()) {\n    <p class=\"alert-message\">{{ message() }}</p>\n  }\n</div>\n<st-button-group justification=\"expand\">\n  @if (cancelButton()) {\n    <button stButton (click)=\"onCancel()\">{{ cancelButton() }}</button>\n  }\n  <button stButton [stTheme]=\"theme()\" variant=\"primary\" (click)=\"onAffirmation()\">{{ affirmativeButton() }}</button>\n</st-button-group>\n" }]
+        }], ctorParameters: () => [{ type: ModalService }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], affirmativeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "affirmativeButton", required: true }] }], cancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButton", required: false }] }] } });
+
+class ModalHeaderComponent {
+    modalService = inject(ModalService);
+    title = input(null, ...(ngDevMode ? [{ debugName: "title" }] : []));
+    showCloseButton = input(true, ...(ngDevMode ? [{ debugName: "showCloseButton" }] : []));
+    onCloseButtonClicked(event) {
+        this.modalService.closeCurrentModal();
+        event.stopPropagation();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ModalHeaderComponent, isStandalone: true, selector: "st-modal-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (title()) {\n  <h3>{{ title() }}</h3>\n}\n@if (showCloseButton()) {\n  <button stButton (click)=\"onCloseButtonClicked($event)\" variant=\"ghost\">\n    <st-icon name=\"close\" size=\"sm\"></st-icon>\n  </button>\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }, { kind: "component", type: IconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-modal-header', imports: [ButtonDirective, IconComponent, ButtonDirective], template: "@if (title()) {\n  <h3>{{ title() }}</h3>\n}\n@if (showCloseButton()) {\n  <button stButton (click)=\"onCloseButtonClicked($event)\" variant=\"ghost\">\n    <st-icon name=\"close\" size=\"sm\"></st-icon>\n  </button>\n}\n" }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }] } });
+
+class ModalComponent {
+    modalContents = viewChild.required('modalBody', {
+        read: ViewContainerRef,
+    });
+    configuration = input.required(...(ngDevMode ? [{ debugName: "configuration" }] : []));
+    size = model('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    get sizeClass() {
+        return `st-modal-size-${this.size()}`;
+    }
+    ngAfterViewInit() {
+        if (this.size() === undefined) {
+            this.size.set('md');
+        }
+        const injectedComponent = this.modalContents().createComponent(this.configuration().component);
+        if (this.configuration().inputs) {
+            this.setInputsOnInjectedComponent(injectedComponent, this.configuration().inputs);
+        }
+    }
+    setInputsOnInjectedComponent(injectedComponent, inputs) {
+        Object.keys(inputs).forEach((key) => {
+            injectedComponent.setInput(key, inputs[key]);
+        });
+    }
+    onCardClick(event) {
+        event.stopPropagation();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ModalComponent, isStandalone: true, selector: "st-modal", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange" }, host: { properties: { "class": "this.sizeClass" } }, viewQueries: [{ propertyName: "modalContents", first: true, predicate: ["modalBody"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (configuration().title || !configuration().hideCloseButton) {\n  <st-modal-header\n    [title]=\"configuration().title\"\n    [showCloseButton]=\"configuration().hideCloseButton === true ? false : true\"\n    (click)=\"onCardClick($event)\"></st-modal-header>\n}\n\n<div class=\"modal-content\">\n  <ng-template #modalBody></ng-template>\n</div>\n", dependencies: [{ kind: "component", type: ModalHeaderComponent, selector: "st-modal-header", inputs: ["title", "showCloseButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-modal', imports: [ModalHeaderComponent], template: "@if (configuration().title || !configuration().hideCloseButton) {\n  <st-modal-header\n    [title]=\"configuration().title\"\n    [showCloseButton]=\"configuration().hideCloseButton === true ? false : true\"\n    (click)=\"onCardClick($event)\"></st-modal-header>\n}\n\n<div class=\"modal-content\">\n  <ng-template #modalBody></ng-template>\n</div>\n" }]
+        }], propDecorators: { modalContents: [{ type: i0.ViewChild, args: ['modalBody', { ...{
+                            read: ViewContainerRef,
+                        }, isSignal: true }] }], configuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "configuration", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], sizeClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class ModalContainerComponent {
+    modalService;
+    injectedComponent;
+    currentModal = null;
+    stack = new Stack();
+    subscription;
+    constructor(modalService) {
+        this.modalService = modalService;
+        this.subscription = this.modalService['currentModals'].asObservable().subscribe((modalStack) => {
+            this.stack = modalStack;
+        });
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    onBackdropClick(event) {
+        event.stopPropagation();
+        const currentModal = this.stack.peek();
+        if (currentModal.disableBackdropClosure) {
+            return;
+        }
+        this.modalService.closeCurrentModal();
+    }
+    stackTrack(index, item) {
+        return item.id;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalContainerComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ModalContainerComponent, isStandalone: true, selector: "st-modal-container", ngImport: i0, template: "<div class=\"modal-wrapper\">\n  @for (modal of stack.items; track modal.id; let last = $last) {\n    <st-modal [ngClass]=\"{ 'hidden-under-other-modal': !last }\" [configuration]=\"modal\" [size]=\"modal.size\"> </st-modal>\n  }\n</div>\n@if (!stack.empty()) {\n  <div class=\"st-internal-backdrop active\" (click)=\"onBackdropClick($event)\"></div>\n}\n", dependencies: [{ kind: "component", type: ModalComponent, selector: "st-modal", inputs: ["configuration", "size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-modal-container', imports: [ModalComponent, CommonModule], template: "<div class=\"modal-wrapper\">\n  @for (modal of stack.items; track modal.id; let last = $last) {\n    <st-modal [ngClass]=\"{ 'hidden-under-other-modal': !last }\" [configuration]=\"modal\" [size]=\"modal.size\"> </st-modal>\n  }\n</div>\n@if (!stack.empty()) {\n  <div class=\"st-internal-backdrop active\" (click)=\"onBackdropClick($event)\"></div>\n}\n" }]
+        }], ctorParameters: () => [{ type: ModalService }] });
+
+const DEFAULT_THEME = 'info';
+const DEFAULT_DURATION = 3000;
+
+class NotificationService {
+    notificationStack = signal([], ...(ngDevMode ? [{ debugName: "notificationStack" }] : []));
+    showNotification(config) {
+        const newNotificationId = crypto.randomUUID();
+        const duration = config.duration ?? DEFAULT_DURATION;
+        const currentStack = this.notificationStack();
+        currentStack.push({
+            id: newNotificationId,
+            message: config.message,
+            duration: duration,
+            theme: config.theme ?? DEFAULT_THEME,
+            icon: config.icon,
+        });
+        this.notificationStack.set(currentStack);
+        this.hideNotification(newNotificationId, duration);
+    }
+    hideNotification(notificationId, duration) {
+        setTimeout(() => {
+            const currentStack = this.notificationStack().filter((notification) => notification.id !== notificationId);
+            this.notificationStack.set(currentStack);
+        }, duration);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NotificationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NotificationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class NotificationComponent {
+    icon;
+    message;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NotificationComponent, isStandalone: true, selector: "st-notification", inputs: { icon: "icon", message: "message" }, ngImport: i0, template: "@if (icon) {\n  <st-icon [name]=\"icon\"></st-icon>\n}\n{{ message }}\n", dependencies: [{ kind: "component", type: IconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NotificationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-notification', imports: [IconComponent], template: "@if (icon) {\n  <st-icon [name]=\"icon\"></st-icon>\n}\n{{ message }}\n" }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }] } });
+
+class NotificationContainerComponent {
+    notificationService = inject(NotificationService);
+    notifications = this.notificationService.notificationStack;
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NotificationContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NotificationContainerComponent, isStandalone: true, selector: "st-notification-container", ngImport: i0, template: "@for (notification of notifications(); track notification.id) {\n  <st-notification [icon]=\"notification.icon\" [message]=\"notification.message\" [stTheme]=\"notification.theme ?? 'info'\">\n  </st-notification>\n}\n", dependencies: [{ kind: "component", type: NotificationComponent, selector: "st-notification", inputs: ["icon", "message"] }, { kind: "directive", type: ThemeDirective, selector: "[stTheme]", inputs: ["stTheme"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NotificationContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-notification-container', imports: [NotificationComponent, ThemeDirective], template: "@for (notification of notifications(); track notification.id) {\n  <st-notification [icon]=\"notification.icon\" [message]=\"notification.message\" [stTheme]=\"notification.theme ?? 'info'\">\n  </st-notification>\n}\n" }]
+        }], ctorParameters: () => [] });
+
+class NumberDisplayComponent {
+    locale = inject(LOCALE_ID);
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    decimals = input(2, ...(ngDevMode ? [{ debugName: "decimals" }] : []));
+    digitsInfo = computed(() => {
+        return `1.${this.decimals()}-${this.decimals()}`;
+    }, ...(ngDevMode ? [{ debugName: "digitsInfo" }] : []));
+    formattedNumber = computed(() => formatNumber(this.value(), this.locale, this.digitsInfo()), ...(ngDevMode ? [{ debugName: "formattedNumber" }] : []));
+    separatedDigits = computed(() => {
+        const parts = this.formattedNumber().split(this.decimalPoint());
+        return {
+            integer: parts[0],
+            decimals: parts[1] ?? undefined,
+        };
+    }, ...(ngDevMode ? [{ debugName: "separatedDigits" }] : []));
+    changedValue = input(false, ...(ngDevMode ? [{ debugName: "changedValue" }] : []));
+    showPlus = input(false, ...(ngDevMode ? [{ debugName: "showPlus" }] : []));
+    deemphasizeDecimals = input(true, ...(ngDevMode ? [{ debugName: "deemphasizeDecimals" }] : []));
+    decimalPoint = computed(() => getLocaleNumberSymbol(this.locale, NumberSymbol.Decimal), ...(ngDevMode ? [{ debugName: "decimalPoint" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NumberDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NumberDisplayComponent, isStandalone: true, selector: "st-number-display", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, changedValue: { classPropertyName: "changedValue", publicName: "changedValue", isSignal: true, isRequired: false, transformFunction: null }, showPlus: { classPropertyName: "showPlus", publicName: "showPlus", isSignal: true, isRequired: false, transformFunction: null }, deemphasizeDecimals: { classPropertyName: "deemphasizeDecimals", publicName: "deemphasizeDecimals", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p\n  [ngClass]=\"{\n    positive: changedValue() && value() > 0,\n    negative: changedValue() && value() < 0,\n  }\"\n>\n  @if (showPlus() && this.value() > 0) {\n    +\n  }\n  <span class=\"integer-value\">{{ separatedDigits().integer }}</span>\n  @if (separatedDigits().decimals) {\n    <span\n      class=\"decimal-number\"\n      [ngClass]=\"{ deemphasize: deemphasizeDecimals }\"\n      >{{ decimalPoint() }}{{ separatedDigits().decimals }}</span\n    >\n  }\n</p>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NumberDisplayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-number-display', imports: [CommonModule], template: "<p\n  [ngClass]=\"{\n    positive: changedValue() && value() > 0,\n    negative: changedValue() && value() < 0,\n  }\"\n>\n  @if (showPlus() && this.value() > 0) {\n    +\n  }\n  <span class=\"integer-value\">{{ separatedDigits().integer }}</span>\n  @if (separatedDigits().decimals) {\n    <span\n      class=\"decimal-number\"\n      [ngClass]=\"{ deemphasize: deemphasizeDecimals }\"\n      >{{ decimalPoint() }}{{ separatedDigits().decimals }}</span\n    >\n  }\n</p>\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], changedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "changedValue", required: false }] }], showPlus: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPlus", required: false }] }], deemphasizeDecimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "deemphasizeDecimals", required: false }] }] } });
+
+/*
+ * Public API Surface of ngx-strata
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AccordionGroupComponent, AccordionItemComponent, ActionMenuComponent, ActionMenuItemComponent, AlertContentComponent, AutoResizeDirective, AvatarComponent, AvatarStackComponent, ButtonDirective, ButtonGroupComponent, CapitalizePipe, CardComponent, CheckboxComponent, DEFAULT_DURATION, DEFAULT_THEME, DarkmodeService, DividerComponent, DropdownComponent, HttpIconLoader, IconComponent, IconLoader, IconRegistry, IconRegistryService, InputFieldComponent, ItemComponent, ItemListComponent, ModalComponent, ModalContainerComponent, ModalHeaderComponent, ModalService, NativeInputRefDirective, NotificationComponent, NotificationContainerComponent, NotificationService, NumberDisplayComponent, OverlayDirective, PaginationComponent, ProgressComponent, STRATA_CONFIG, SegmentedControlComponent, SegmentedControlItemComponent, SliderComponent, SpinnerComponent, TagComponent, TextStackComponent, ThemeDirective, ToggleComponent, TooltipDirective, provideBaseIcons, provideIcons, provideStrata };
+//# sourceMappingURL=ngx-strata.mjs.map