@uni-design-system/uni-angular 2.0.4 → 3.0.1

package/fesm2022/uni-design-system-uni-angular.mjs

@@ -1,10 +1,279 @@
 import * as i0 from '@angular/core';
-import { Injectable, signal, inject, DestroyRef, computed, InjectionToken, linkedSignal, input, Component, HostBinding, Input, Renderer2, ElementRef, HostListener, Directive, EventEmitter, effect, Output, output, ViewChild, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
+import { signal, computed, linkedSignal, resource, Injectable, inject, DestroyRef, InjectionToken, input, Component, HostBinding, Input, Renderer2, ElementRef, HostListener, Directive, EventEmitter, effect, Output, output, ViewChild, ChangeDetectorRef, ChangeDetectionStrategy, model } from '@angular/core';
 import { css, keyframes } from '@emotion/css';
 import { UniThemes, LightTheme, Z_INDEX, fadeIn, fadeOut } from '@uni-design-system/uni-core';
 import { NgClass, CommonModule, NgTemplateOutlet } from '@angular/common';
 import { autoUpdate, computePosition, offset, shift, flip, arrow } from '@floating-ui/dom';
 
+class UniBaseDatasource {
+    selections = signal([], ...(ngDevMode ? [{ debugName: "selections" }] : /* istanbul ignore next */ []));
+    sort = signal({
+        column: undefined,
+        direction: 'indet',
+    }, ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
+    sortColumn = computed(() => this.sort().column, ...(ngDevMode ? [{ debugName: "sortColumn" }] : /* istanbul ignore next */ []));
+    sortDirection = computed(() => this.sort().direction, ...(ngDevMode ? [{ debugName: "sortDirection" }] : /* istanbul ignore next */ []));
+    pages = computed(() => Array.from({ length: this.pageCount() }, (_, index) => index + 1), ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
+    startIndex = computed(() => {
+        const pageSize = this.pageSize();
+        const pageIndex = this.pageIndex();
+        return pageSize > 0 ? pageIndex * pageSize : 0;
+    }, ...(ngDevMode ? [{ debugName: "startIndex" }] : /* istanbul ignore next */ []));
+    endIndex = computed(() => {
+        const pageSize = this.pageSize();
+        const total = this.recordCount();
+        // If unpaginated (pageSize = 0), return total count
+        if (pageSize === 0) {
+            return total;
+        }
+        const start = this.startIndex();
+        return Math.min(start + pageSize, total);
+    }, ...(ngDevMode ? [{ debugName: "endIndex" }] : /* istanbul ignore next */ []));
+    disablePrevious = computed(() => {
+        const pageSize = this.pageSize();
+        return pageSize === 0 ? true : this.pageIndex() === 0;
+    }, ...(ngDevMode ? [{ debugName: "disablePrevious" }] : /* istanbul ignore next */ []));
+    disableNext = computed(() => {
+        const pageSize = this.pageSize();
+        return pageSize === 0 ? true : this.pageIndex() + 1 >= this.pageCount();
+    }, ...(ngDevMode ? [{ debugName: "disableNext" }] : /* istanbul ignore next */ []));
+    truncatedPages = computed(() => {
+        const currentPage = this.pageIndex() + 1;
+        const displayRange = 3;
+        const totalPages = this.pageCount();
+        const pages = [];
+        const startPage = Math.max(1, currentPage - displayRange);
+        const endPage = Math.min(totalPages, currentPage + displayRange);
+        if (startPage > 1) {
+            pages.push(1);
+            if (startPage > 2) {
+                pages.push('...');
+            }
+        }
+        for (let i = startPage; i <= endPage; i++) {
+            pages.push(i);
+        }
+        if (endPage < totalPages) {
+            if (endPage < totalPages - 1) {
+                pages.push('...');
+            }
+            pages.push(totalPages);
+        }
+        return pages;
+    }, ...(ngDevMode ? [{ debugName: "truncatedPages" }] : /* istanbul ignore next */ []));
+    isSelected(row) {
+        return this.selections().some((selection) => selection === row);
+    }
+    toggleSelection(row) {
+        this.selections.update((selections) => {
+            return selections.includes(row) ? selections.filter((i) => i !== row) : [...selections, row];
+        });
+    }
+    clearSelections() {
+        this.selections.set([]);
+    }
+    selectAll() {
+        this.selections.set([...this.records()]);
+    }
+}
+
+class UniRecordDatasource extends UniBaseDatasource {
+    _pageNumber = signal(1, ...(ngDevMode ? [{ debugName: "_pageNumber" }] : /* istanbul ignore next */ []));
+    _pageSize = signal(0, ...(ngDevMode ? [{ debugName: "_pageSize" }] : /* istanbul ignore next */ [])); // 0 = unpaginated (show all)
+    initialRecords = signal([], ...(ngDevMode ? [{ debugName: "initialRecords" }] : /* istanbul ignore next */ []));
+    recordCount = computed(() => this.initialRecords().filter(this.filter()).length, ...(ngDevMode ? [{ debugName: "recordCount" }] : /* istanbul ignore next */ []));
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    filter = signal((value) => true, ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+    pageIndex = signal(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
+    pageSize = computed(() => this._pageSize(), ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    pageCount = computed(() => {
+        const pageSize = this.pageSize();
+        return pageSize > 0 ? Math.ceil(this.recordCount() / pageSize) : 1;
+    }, ...(ngDevMode ? [{ debugName: "pageCount" }] : /* istanbul ignore next */ []));
+    records = computed(() => {
+        const { column, direction } = this.sort();
+        const filter = this.filter();
+        const pageSize = this.pageSize();
+        let filteredRecords = this.initialRecords().filter(filter);
+        // Apply sorting if specified
+        if (column && direction !== 'indet') {
+            filteredRecords = [...filteredRecords].sort((a, b) => {
+                const valueA = a[column];
+                const valueB = b[column];
+                const isString = typeof valueA === 'string';
+                const isAsc = direction === 'asc';
+                return isString
+                    ? stringCompare(valueA, valueB, isAsc)
+                    : numberCompare(valueA, valueB, isAsc);
+            });
+        }
+        // Apply pagination only if pageSize > 0
+        if (pageSize > 0) {
+            return filteredRecords.slice(this.startIndex(), this.endIndex());
+        }
+        // Return all records (unpaginated)
+        return filteredRecords;
+    }, ...(ngDevMode ? [{ debugName: "records" }] : /* istanbul ignore next */ []));
+    constructor(data) {
+        super();
+        this.initialRecords.set(data);
+    }
+    sortRecords(sort) {
+        this.sort.set(sort);
+    }
+    firstPage() {
+        this.pageIndex.set(0);
+    }
+    nextPage() {
+        if (this.pageIndex() < this.pageCount() - 1) {
+            this.pageIndex.update((i) => i + 1);
+        }
+    }
+    previousPage() {
+        this.pageIndex.update((i) => (i > 1 ? i - 1 : 0));
+    }
+    lastPage() {
+        this.pageIndex.set(this.pageCount() - 1);
+    }
+    jumpToPage(page) {
+        const i = page - 1;
+        if (i >= 0 && i < this.pageCount()) {
+            this.pageIndex.set(i);
+        }
+    }
+    setPageSize(size) {
+        this._pageSize.set(size);
+        if (size > 0) {
+            this._pageNumber.set(1);
+            this.pageIndex.set(0);
+        }
+    }
+    setFilter(filter) {
+        this.filter.set(filter);
+    }
+    clearFilter() {
+        this.filter.set(() => true);
+    }
+}
+function stringCompare(a = 'zzz', b = 'zzz', isAsc) {
+    a = a.toString();
+    b = b.toString();
+    return isAsc
+        ? a.localeCompare(b, undefined, { sensitivity: 'base' })
+        : b.localeCompare(a, undefined, { sensitivity: 'base' });
+}
+function numberCompare(a = 0, b = 0, isAsc) {
+    return isAsc ? a - b : b - a;
+}
+
+class UniServerSideDatasource extends UniBaseDatasource {
+    dataLoader;
+    _pageNumber = signal(1, ...(ngDevMode ? [{ debugName: "_pageNumber" }] : /* istanbul ignore next */ []));
+    _pageSize = signal(10, ...(ngDevMode ? [{ debugName: "_pageSize" }] : /* istanbul ignore next */ []));
+    _sortColumn = signal(undefined, ...(ngDevMode ? [{ debugName: "_sortColumn" }] : /* istanbul ignore next */ []));
+    _sortDirection = signal('indet', ...(ngDevMode ? [{ debugName: "_sortDirection" }] : /* istanbul ignore next */ []));
+    filter = signal({}, ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+    sortColumn = computed(() => this._sortColumn(), ...(ngDevMode ? [{ debugName: "sortColumn" }] : /* istanbul ignore next */ []));
+    sortDirection = computed(() => this._sortDirection(), ...(ngDevMode ? [{ debugName: "sortDirection" }] : /* istanbul ignore next */ []));
+    totalRecords = signal(0, ...(ngDevMode ? [{ debugName: "totalRecords" }] : /* istanbul ignore next */ []));
+    dataResource;
+    pageIndex = computed(() => this._pageNumber() - 1, ...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
+    pageSize = computed(() => this._pageSize(), ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    pageCount = computed(() => {
+        const total = this.totalRecords();
+        const size = this.pageSize();
+        return total > 0 ? Math.ceil(total / size) : 0;
+    }, ...(ngDevMode ? [{ debugName: "pageCount" }] : /* istanbul ignore next */ []));
+    _records = linkedSignal({ ...(ngDevMode ? { debugName: "_records" } : /* istanbul ignore next */ {}), source: () => ({
+            val: this.dataResource.value(),
+            status: this.dataResource.status(),
+        }),
+        computation: (source, previous) => {
+            if (source.status === 'loading' && previous) {
+                return previous.value;
+            }
+            return source.val?.data ?? [];
+        } });
+    records = this._records.asReadonly();
+    recordCount = computed(() => this.totalRecords(), ...(ngDevMode ? [{ debugName: "recordCount" }] : /* istanbul ignore next */ []));
+    isLoading = computed(() => this.dataResource.isLoading(), ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    error = computed(() => this.dataResource.error(), ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => this.dataResource.hasValue() === false && this.error() !== undefined, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    constructor(dataLoader, initialPageSize = 10) {
+        super();
+        this.dataLoader = dataLoader;
+        this._pageSize.set(initialPageSize);
+        this.dataResource = resource({ ...(ngDevMode ? { debugName: "dataResource" } : /* istanbul ignore next */ {}), params: () => ({
+                pageNumber: this._pageNumber(),
+                pageSize: this._pageSize(),
+                sortColumn: this._sortColumn(),
+                sortDirection: this._sortDirection(),
+                filter: this.filter(),
+            }),
+            loader: async (params) => {
+                const request = params.params;
+                const response = await this.dataLoader(request);
+                if (request.pageNumber === 1 || this.totalRecords() === 0) {
+                    this.totalRecords.set(response.totalRecords);
+                }
+                return response;
+            } });
+    }
+    sortRecords(sort) {
+        this.sort.set(sort);
+        this._sortColumn.set(sort.column);
+        this._sortDirection.set(sort.direction);
+        this._pageNumber.set(1);
+    }
+    firstPage() {
+        this._pageNumber.set(1);
+    }
+    nextPage() {
+        if (this._pageNumber() < this.pageCount()) {
+            this._pageNumber.update((n) => n + 1);
+        }
+    }
+    previousPage() {
+        if (this._pageNumber() > 1) {
+            this._pageNumber.update((n) => n - 1);
+        }
+    }
+    lastPage() {
+        this._pageNumber.set(this.pageCount());
+    }
+    jumpToPage(page) {
+        if (page >= 1 && page <= this.pageCount()) {
+            this._pageNumber.set(page);
+        }
+    }
+    setPageSize(size) {
+        if (size > 0) {
+            this._pageSize.set(size);
+            this._pageNumber.set(1);
+        }
+    }
+    setFilter(filterValues) {
+        this.filter.set(filterValues);
+        this._pageNumber.set(1);
+    }
+    clearFilter() {
+        this.filter.set({});
+        this._pageNumber.set(1);
+    }
+    refresh() {
+        this.dataResource.reload();
+    }
+    getPageRequest() {
+        return {
+            pageNumber: this._pageNumber(),
+            pageSize: this._pageSize(),
+            sortColumn: this._sortColumn(),
+            sortDirection: this._sortDirection(),
+            filter: this.filter(),
+        };
+    }
+}
+
 function memoize(fn) {
     const cache = new Map();
     return ((...args) => {
@@ -225,7 +494,7 @@ const UNI_THEMES = new InjectionToken('', {
     factory: () => UniThemes,
 });
 
-const safeParseInt = (n) => typeof n === 'number' ? n : parseInt(n);
+const safeParseInt = (n) => (typeof n === 'number' ? n : parseInt(n));
 
 // noinspection JSUnusedGlobalSymbols
 class ThemeService {
@@ -298,7 +567,11 @@ class ThemeService {
         const token = (color + '-container');
         return this.colorPair(token, useVariant);
     };
-    typeface = (typeface) => typeface && this.typeFaces()[typeface];
+    typeface = (typeface) => {
+        const typefaces = this.typeFaces();
+        console.log('typefaces:', typefaces);
+        return typeface && typefaces[typeface];
+    };
     colorPalette = () => this.colors();
     color(color) {
         return !color ? undefined : { color: this.colors()[color] };
@@ -925,7 +1198,7 @@ class UniButtonComponent extends BaseComponent {
     get className() {
         return css([
             this.style() && {
-                ...this.style(),
+                ...this.style(), // TODO: Set priority on theme-defined styles
             },
             {
                 display: 'flex',
@@ -935,7 +1208,6 @@ class UniButtonComponent extends BaseComponent {
                 outline: 0,
                 border: 0,
                 cursor: 'pointer',
-                fontFamily: 'Euphemia, sans-serif',
                 transition: 'all 0.28s ease',
                 '&:disabled': {
                     cursor: 'not-allowed !important',
@@ -1669,11 +1941,11 @@ class UniMenuItemComponent extends UniBoxComponent {
         this._elementRef.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMenuItemComponent, isStandalone: true, selector: "div[uni-menu-item], div[menu-item]", inputs: { display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, flexDirection: { classPropertyName: "flexDirection", publicName: "flexDirection", isSignal: true, isRequired: false, transformFunction: null }, alignItems: { classPropertyName: "alignItems", publicName: "alignItems", isSignal: true, isRequired: false, transformFunction: null }, paddingHorizontal: { classPropertyName: "paddingHorizontal", publicName: "paddingHorizontal", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, symbolName: { classPropertyName: "symbolName", publicName: "symbolName", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, hoverColor: { classPropertyName: "hoverColor", publicName: "hoverColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0, template: "@let tpl = template();\n@let symbol = symbolName();\n@if (symbol) {\n  <Symbol [name]=\"symbol\"></Symbol>\n}\n<div box-layout [grow]=\"1\">\n  @if (tpl) {\n    <ng-container\n      [ngTemplateOutlet]=\"tpl\"\n      [ngTemplateOutletContext]=\"context()\"\n    ></ng-container>\n  } @else {\n    <Text role=\"label\" display=\"block\" [nowrap]=\"true\">\n      {{ label() }}\n    </Text>\n  }\n</div>\n@if (active()) {\n  <Symbol name=\"check\"></Symbol>\n}\n", styles: [":host:focus{background:#ccc;color:#fff}:host.disabled{color:#ddd;pointer-events:none}\n"], dependencies: [{ kind: "component", type: UniTextComponent, selector: "uni-text, Text", inputs: ["typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol, Symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: UniBoxComponent, selector: "div[uni-box-layout], Box, div[box-layout]", inputs: ["color", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "elevation", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMenuItemComponent, isStandalone: true, selector: "div[uni-menu-item], div[menu-item]", inputs: { display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, flexDirection: { classPropertyName: "flexDirection", publicName: "flexDirection", isSignal: true, isRequired: false, transformFunction: null }, alignItems: { classPropertyName: "alignItems", publicName: "alignItems", isSignal: true, isRequired: false, transformFunction: null }, paddingHorizontal: { classPropertyName: "paddingHorizontal", publicName: "paddingHorizontal", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, symbolName: { classPropertyName: "symbolName", publicName: "symbolName", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, hoverColor: { classPropertyName: "hoverColor", publicName: "hoverColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0, template: "@let tpl = template();\n@let symbol = symbolName();\n@if (symbol) {\n  <Symbol [name]=\"symbol\"></Symbol>\n}\n<div box-layout [grow]=\"1\">\n  @if (tpl) {\n    <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"context()\"></ng-container>\n  } @else {\n    <Text role=\"label\" display=\"block\" [nowrap]=\"true\">\n      {{ label() }}\n    </Text>\n  }\n</div>\n@if (active()) {\n  <Symbol name=\"check\"></Symbol>\n}\n", styles: [":host:focus{background:#ccc;color:#fff}:host.disabled{color:#ddd;pointer-events:none}\n"], dependencies: [{ kind: "component", type: UniTextComponent, selector: "uni-text, Text", inputs: ["typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol, Symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: UniBoxComponent, selector: "div[uni-box-layout], Box, div[box-layout]", inputs: ["color", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "elevation", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'div[uni-menu-item], div[menu-item]', standalone: true, imports: [UniTextComponent, UniSymbolComponent, UniBoxComponent, NgTemplateOutlet], template: "@let tpl = template();\n@let symbol = symbolName();\n@if (symbol) {\n  <Symbol [name]=\"symbol\"></Symbol>\n}\n<div box-layout [grow]=\"1\">\n  @if (tpl) {\n    <ng-container\n      [ngTemplateOutlet]=\"tpl\"\n      [ngTemplateOutletContext]=\"context()\"\n    ></ng-container>\n  } @else {\n    <Text role=\"label\" display=\"block\" [nowrap]=\"true\">\n      {{ label() }}\n    </Text>\n  }\n</div>\n@if (active()) {\n  <Symbol name=\"check\"></Symbol>\n}\n", styles: [":host:focus{background:#ccc;color:#fff}:host.disabled{color:#ddd;pointer-events:none}\n"] }]
+            args: [{ selector: 'div[uni-menu-item], div[menu-item]', standalone: true, imports: [UniTextComponent, UniSymbolComponent, UniBoxComponent, NgTemplateOutlet], template: "@let tpl = template();\n@let symbol = symbolName();\n@if (symbol) {\n  <Symbol [name]=\"symbol\"></Symbol>\n}\n<div box-layout [grow]=\"1\">\n  @if (tpl) {\n    <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"context()\"></ng-container>\n  } @else {\n    <Text role=\"label\" display=\"block\" [nowrap]=\"true\">\n      {{ label() }}\n    </Text>\n  }\n</div>\n@if (active()) {\n  <Symbol name=\"check\"></Symbol>\n}\n", styles: [":host:focus{background:#ccc;color:#fff}:host.disabled{color:#ddd;pointer-events:none}\n"] }]
         }], propDecorators: { display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], flexDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexDirection", required: false }] }], alignItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignItems", required: false }] }], paddingHorizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingHorizontal", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], symbolName: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolName", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], hoverColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverColor", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], className: [{
                 type: HostBinding,
                 args: ['class']
@@ -1760,6 +2032,274 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 args: ['class']
             }] } });
 
+class UniAlertComponent extends BaseComponent {
+    show = model(...(ngDevMode ? [undefined, { debugName: "show" }] : /* istanbul ignore next */ []));
+    iconName = input(undefined, ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
+    symbolName = input(undefined, ...(ngDevMode ? [{ debugName: "symbolName" }] : /* istanbul ignore next */ []));
+    useVariant = input(false, ...(ngDevMode ? [{ debugName: "useVariant" }] : /* istanbul ignore next */ []));
+    showing = new EventEmitter();
+    alertRef;
+    alertState = signal('closed', ...(ngDevMode ? [{ debugName: "alertState" }] : /* istanbul ignore next */ []));
+    effectiveVariant = computed(() => this.variant() || this.componentOptions().defaultVariant, ...(ngDevMode ? [{ debugName: "effectiveVariant" }] : /* istanbul ignore next */ []));
+    alertClass = computed(() => css({
+        ...this.theme.getContainerColors(this.effectiveVariant(), this.useVariant()),
+        ...this.theme.radius(this.componentOptions().borderRadius),
+        ...this.theme.border(this.effectiveVariant()),
+        ...this.theme.boxShadow(this.componentOptions().elevation),
+        transition: `all ${this.componentOptions().transitionSpeed}s ease-in-out`,
+        transitionBehavior: 'allow-discrete',
+        opacity: 1,
+        top: this.componentOptions().topPosition,
+        '&[open]': {
+            '@starting-style': {
+                top: 0,
+                opacity: 0,
+            },
+        },
+        '&[closing]': {
+            animation: `${this.fadeOut} 0.3s forwards`,
+        },
+    }), ...(ngDevMode ? [{ debugName: "alertClass" }] : /* istanbul ignore next */ []));
+    fadeOut = keyframes({ ...fadeOut });
+    constructor() {
+        super();
+        effect(() => {
+            if (this.show() === true) {
+                this.open();
+            }
+            else if (this.show() === false) {
+                this.close();
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.alertRef?.nativeElement.addEventListener('animationend', (e) => {
+            if (e.animationName === this.fadeOut.toString()) {
+                this.alertRef?.nativeElement.close();
+                this.showing.emit(false);
+                this.alertState.set('closed');
+            }
+        });
+    }
+    open() {
+        if (!this.alertRef?.nativeElement)
+            return;
+        this.alertRef.nativeElement.removeAttribute('closing');
+        this.alertRef.nativeElement.show();
+        this.alertState.set('open');
+        this.showing.emit(true);
+    }
+    close() {
+        if (!this.alertRef?.nativeElement)
+            return;
+        this.alertRef.nativeElement.setAttribute('closing', 'true');
+        this.alertState.set('closing');
+        this.show.set(false);
+    }
+    effectiveIconName = computed(() => this.iconName(), ...(ngDevMode ? [{ debugName: "effectiveIconName" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniAlertComponent, isStandalone: true, selector: "uni-alert, Alert", inputs: { show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, symbolName: { classPropertyName: "symbolName", publicName: "symbolName", isSignal: true, isRequired: false, transformFunction: null }, useVariant: { classPropertyName: "useVariant", publicName: "useVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { show: "showChange", showing: "showing" }, providers: [{ provide: COMPONENT_NAME, useValue: 'alert' }], viewQueries: [{ propertyName: "alertRef", first: true, predicate: ["alert"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<dialog #alert [class]=\"alertClass()\">\n  <div row-layout gap=\"md\">\n    @if (iconName() || symbolName()) {\n      <div box-layout [height]=\"26\" [width]=\"26\">\n        @if (effectiveIconName()) {\n          <Icon [name]=\"effectiveIconName()!\" />\n        } @else {\n          <Symbol [name]=\"symbolName()!\" [opticalSize]=\"26\" />\n        }\n      </div>\n    }\n    <Text>\n      <ng-content></ng-content>\n    </Text>\n    <button icon-button (click)=\"close()\" iconName=\"close\" size=\"md\">close</button>\n  </div>\n</dialog>\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "div[uni-row-layout], Row, div[row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniTextComponent, selector: "uni-text, Text", inputs: ["typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniBoxComponent, selector: "div[uni-box-layout], Box, div[box-layout]", inputs: ["color", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "elevation", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon, Icon", inputs: ["color", "name"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol, Symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniAlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-alert, Alert', standalone: true, imports: [
+                        UniRowComponent,
+                        UniIconButtonComponent,
+                        UniTextComponent,
+                        UniBoxComponent,
+                        UniIconComponent,
+                        UniSymbolComponent,
+                    ], providers: [{ provide: COMPONENT_NAME, useValue: 'alert' }], template: "<dialog #alert [class]=\"alertClass()\">\n  <div row-layout gap=\"md\">\n    @if (iconName() || symbolName()) {\n      <div box-layout [height]=\"26\" [width]=\"26\">\n        @if (effectiveIconName()) {\n          <Icon [name]=\"effectiveIconName()!\" />\n        } @else {\n          <Symbol [name]=\"symbolName()!\" [opticalSize]=\"26\" />\n        }\n      </div>\n    }\n    <Text>\n      <ng-content></ng-content>\n    </Text>\n    <button icon-button (click)=\"close()\" iconName=\"close\" size=\"md\">close</button>\n  </div>\n</dialog>\n" }]
+        }], ctorParameters: () => [], propDecorators: { show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }, { type: i0.Output, args: ["showChange"] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], symbolName: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolName", required: false }] }], useVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "useVariant", required: false }] }], showing: [{
+                type: Output
+            }], alertRef: [{
+                type: ViewChild,
+                args: ['alert']
+            }] } });
+
+class ConfirmationDialogComponent {
+    show = input(false, ...(ngDevMode ? [{ debugName: "show" }] : /* istanbul ignore next */ []));
+    confirmation;
+    showing = new EventEmitter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: ConfirmationDialogComponent, isStandalone: true, selector: "uni-confirmation-dialog, Confirmation", inputs: { show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, confirmation: { classPropertyName: "confirmation", publicName: "confirmation", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { showing: "showing" }, ngImport: i0, template: "<dialog uni-dialog [show]=\"show()\" (showing)=\"showing.emit($event)\">\n  <div uni-dialog-header>\n    {{ confirmation?.title }}\n  </div>\n  <div box-layout padding=\"md\">\n    <Text>\n      {{ confirmation?.message }}\n    </Text>\n  </div>\n  <div\n    dialog-buttons\n    [confirmButtonText]=\"confirmation?.actionLabel\"\n    (confirmed)=\"confirmation?.action()\"\n    [cancelButtonText]=\"confirmation?.dismissLabel\"\n  ></div>\n</dialog>\n", dependencies: [{ kind: "component", type: UniDialogComponent, selector: "dialog[uni-dialog], Dialog", inputs: ["show", "defaultCloseButton"], outputs: ["showing"] }, { kind: "component", type: UniDialogHeaderComponent, selector: "div[uni-dialog-header], DialogHeader" }, { kind: "component", type: UniBoxComponent, selector: "div[uni-box-layout], Box, div[box-layout]", inputs: ["color", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "elevation", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "component", type: UniTextComponent, selector: "uni-text, Text", inputs: ["typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniDialogButtonsComponent, selector: "uni-dialog-buttons, DialogButtons, div[dialog-buttons]", inputs: ["confirmButtonText", "confirmButtonVariant", "cancelButtonText", "disableConfirm", "padding", "paddingBottom", "justifyContent"], outputs: ["confirmed"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-confirmation-dialog, Confirmation', standalone: true, imports: [
+                        UniDialogComponent,
+                        UniDialogHeaderComponent,
+                        UniBoxComponent,
+                        UniTextComponent,
+                        UniDialogButtonsComponent,
+                    ], template: "<dialog uni-dialog [show]=\"show()\" (showing)=\"showing.emit($event)\">\n  <div uni-dialog-header>\n    {{ confirmation?.title }}\n  </div>\n  <div box-layout padding=\"md\">\n    <Text>\n      {{ confirmation?.message }}\n    </Text>\n  </div>\n  <div\n    dialog-buttons\n    [confirmButtonText]=\"confirmation?.actionLabel\"\n    (confirmed)=\"confirmation?.action()\"\n    [cancelButtonText]=\"confirmation?.dismissLabel\"\n  ></div>\n</dialog>\n" }]
+        }], propDecorators: { show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }], confirmation: [{
+                type: Input
+            }], showing: [{
+                type: Output
+            }] } });
+
+class UniSnackbarComponent extends BaseComponent {
+    timer = useTimer();
+    snackbarClass;
+    show;
+    iconName = input(...(ngDevMode ? [undefined, { debugName: "iconName" }] : /* istanbul ignore next */ []));
+    symbolName = input(...(ngDevMode ? [undefined, { debugName: "symbolName" }] : /* istanbul ignore next */ []));
+    timeout = input(...(ngDevMode ? [undefined, { debugName: "timeout" }] : /* istanbul ignore next */ []));
+    actionLabel = input(...(ngDevMode ? [undefined, { debugName: "actionLabel" }] : /* istanbul ignore next */ []));
+    useVariant = input(false, ...(ngDevMode ? [{ debugName: "useVariant" }] : /* istanbul ignore next */ []));
+    action = new EventEmitter();
+    showing = new EventEmitter();
+    snackbarRef;
+    get _snackbar() {
+        return this.snackbarRef?.nativeElement;
+    }
+    constructor() {
+        super();
+        effect(() => {
+            this.snackbarClass = css({
+                ...this.theme.getContainerColors(this.variant() || 'primary', this.useVariant()),
+                ...this.theme.radius('sm'),
+                ...this.theme.border(this.variant() || 'primary'),
+                ...this.theme.boxShadow('dialog'),
+                padding: 0,
+                transition: `all ${this.componentOptions().transitionDelay} ease-in-out`,
+                transitionBehavior: 'allow-discrete',
+                opacity: 1,
+                bottom: this.componentOptions().bottomPosition,
+                zIndex: Z_INDEX.dialog,
+                position: 'fixed',
+                '&[open]': {
+                    '@starting-style': {
+                        bottom: 0,
+                        opacity: 0,
+                    },
+                },
+                '&[closing]': {
+                    animation: `${this.fadeOut} 0.3s forwards`,
+                },
+            });
+        });
+    }
+    fadeOut = keyframes({
+        '0% ': {
+            opacity: 1,
+        },
+        '100%': {
+            opacity: 0,
+        },
+    });
+    ngOnChanges(changes) {
+        if (changes['show'] && changes['show'].currentValue) {
+            this.open();
+        }
+        else {
+            this.close();
+        }
+    }
+    ngAfterViewInit() {
+        this._snackbar?.addEventListener('animationend', (e) => {
+            if (e.animationName == this.fadeOut) {
+                this._snackbar?.close();
+                this.showing.emit(false);
+            }
+        });
+    }
+    get _timeout() {
+        const timeout = this.timeout();
+        if (timeout === 'disabled')
+            return undefined;
+        return typeof timeout === 'string'
+            ? parseFloat(timeout)
+            : timeout || this.componentOptions().autoCloseDelay;
+    }
+    open() {
+        this._snackbar?.removeAttribute('closing');
+        this._snackbar?.show();
+        this.show = true;
+        this.showing.emit(true);
+        if (this._timeout)
+            this.timer.start(this._timeout, () => this.close());
+    }
+    close() {
+        this._snackbar?.setAttribute('closing', 'true');
+        this.show = false;
+    }
+    pauseTimer() {
+        this.timer.pause();
+    }
+    resumeTimer() {
+        this.timer.resume();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniSnackbarComponent, isStandalone: true, selector: "uni-snackbar, Snackbar", inputs: { show: { classPropertyName: "show", publicName: "show", isSignal: false, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, symbolName: { classPropertyName: "symbolName", publicName: "symbolName", isSignal: true, isRequired: false, transformFunction: null }, timeout: { classPropertyName: "timeout", publicName: "timeout", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, useVariant: { classPropertyName: "useVariant", publicName: "useVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", showing: "showing" }, providers: [{ provide: COMPONENT_NAME, useValue: 'snackbar' }], viewQueries: [{ propertyName: "snackbarRef", first: true, predicate: ["snackbar"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let icon = iconName();\n@let symbol = symbolName();\n<dialog\n  #snackbar\n  [class]=\"snackbarClass\"\n  (mouseenter)=\"pauseTimer()\"\n  (mouseleave)=\"resumeTimer()\"\n  (focusin)=\"pauseTimer()\"\n  (focusout)=\"resumeTimer()\"\n>\n  <Row alignItems=\"center\">\n    @if (icon || symbol) {\n      <Box [height]=\"26\" [width]=\"26\" paddingLeft=\"sm\">\n        @if (icon) {\n          <Icon [name]=\"icon\"></Icon>\n        } @else if (symbol) {\n          <Symbol [name]=\"symbol\" [opticalSize]=\"26\"></Symbol>\n        }\n      </Box>\n    }\n    <Box padding=\"sm\">\n      <Text>\n        <ng-content></ng-content>\n      </Text>\n    </Box>\n    <Box paddingRight=\"sm\">\n      @if (!actionLabel()) {\n        <button icon-button (click)=\"close()\" iconName=\"close\" size=\"md\">Close</button>\n      } @else {\n        <button text-button variant=\"ghost\" (click)=\"this.action.emit(); close()\">\n          {{ actionLabel() }}\n        </button>\n      }\n    </Box>\n  </Row>\n</dialog>\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "div[uni-row-layout], Row, div[row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniBoxComponent, selector: "div[uni-box-layout], Box, div[box-layout]", inputs: ["color", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "elevation", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "component", type: UniTextComponent, selector: "uni-text, Text", inputs: ["typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol, Symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon, Icon", inputs: ["color", "name"] }, { kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], Button, button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSnackbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-snackbar, Snackbar', standalone: true, imports: [
+                        UniRowComponent,
+                        UniBoxComponent,
+                        UniTextComponent,
+                        UniIconButtonComponent,
+                        UniSymbolComponent,
+                        UniIconComponent,
+                        UniButtonComponent,
+                    ], providers: [{ provide: COMPONENT_NAME, useValue: 'snackbar' }], template: "@let icon = iconName();\n@let symbol = symbolName();\n<dialog\n  #snackbar\n  [class]=\"snackbarClass\"\n  (mouseenter)=\"pauseTimer()\"\n  (mouseleave)=\"resumeTimer()\"\n  (focusin)=\"pauseTimer()\"\n  (focusout)=\"resumeTimer()\"\n>\n  <Row alignItems=\"center\">\n    @if (icon || symbol) {\n      <Box [height]=\"26\" [width]=\"26\" paddingLeft=\"sm\">\n        @if (icon) {\n          <Icon [name]=\"icon\"></Icon>\n        } @else if (symbol) {\n          <Symbol [name]=\"symbol\" [opticalSize]=\"26\"></Symbol>\n        }\n      </Box>\n    }\n    <Box padding=\"sm\">\n      <Text>\n        <ng-content></ng-content>\n      </Text>\n    </Box>\n    <Box paddingRight=\"sm\">\n      @if (!actionLabel()) {\n        <button icon-button (click)=\"close()\" iconName=\"close\" size=\"md\">Close</button>\n      } @else {\n        <button text-button variant=\"ghost\" (click)=\"this.action.emit(); close()\">\n          {{ actionLabel() }}\n        </button>\n      }\n    </Box>\n  </Row>\n</dialog>\n" }]
+        }], ctorParameters: () => [], propDecorators: { show: [{
+                type: Input
+            }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], symbolName: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolName", required: false }] }], timeout: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeout", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], useVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "useVariant", required: false }] }], action: [{
+                type: Output
+            }], showing: [{
+                type: Output
+            }], snackbarRef: [{
+                type: ViewChild,
+                args: ['snackbar']
+            }] } });
+
+class NotificationsComponent {
+    notifications = inject(NotificationService);
+    alertState = signal(undefined, ...(ngDevMode ? [{ debugName: "alertState" }] : /* istanbul ignore next */ []));
+    snackbarState = signal(undefined, ...(ngDevMode ? [{ debugName: "snackbarState" }] : /* istanbul ignore next */ []));
+    confirmationState = signal(undefined, ...(ngDevMode ? [{ debugName: "confirmationState" }] : /* istanbul ignore next */ []));
+    // Computed values for the show states
+    showAlert = computed(() => !!this.alertState(), ...(ngDevMode ? [{ debugName: "showAlert" }] : /* istanbul ignore next */ []));
+    showSnackbar = computed(() => !!this.snackbarState(), ...(ngDevMode ? [{ debugName: "showSnackbar" }] : /* istanbul ignore next */ []));
+    showConfirmation = computed(() => !!this.confirmationState(), ...(ngDevMode ? [{ debugName: "showConfirmation" }] : /* istanbul ignore next */ []));
+    // Expose the alert state
+    alert = computed(() => this.alertState(), ...(ngDevMode ? [{ debugName: "alert" }] : /* istanbul ignore next */ []));
+    snackbar = computed(() => this.snackbarState(), ...(ngDevMode ? [{ debugName: "snackbar" }] : /* istanbul ignore next */ []));
+    confirmation = computed(() => this.confirmationState(), ...(ngDevMode ? [{ debugName: "confirmation" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            this.alertState.set(this.notifications.alert());
+        });
+        effect(() => {
+            this.snackbarState.set(this.notifications.snackbar());
+        });
+        effect(() => {
+            this.confirmationState.set(this.notifications.confirmation());
+        });
+    }
+    handleConfirmationShowingEvent(showing) {
+        if (!showing)
+            this.notifications.hideConfirmation();
+    }
+    handleSnackbarShowingEvent(showing) {
+        if (!showing)
+            this.notifications.hideSnackbar();
+    }
+    handleAlertShowingEvent(showing) {
+        if (!showing)
+            this.notifications.hideAlert();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: NotificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: NotificationsComponent, isStandalone: true, selector: "uni-notifications, Notifications", ngImport: i0, template: "<Alert\n  [show]=\"showAlert()\"\n  (showing)=\"handleAlertShowingEvent($event)\"\n  [variant]=\"alert()?.variant || 'primary'\"\n  [iconName]=\"alert()?.iconName\"\n  [symbolName]=\"alert()?.symbolName\"\n  >{{ alert()?.message }}</Alert\n>\n\n<Snackbar\n  [show]=\"showSnackbar()\"\n  (showing)=\"handleSnackbarShowingEvent($event)\"\n  [variant]=\"snackbar()?.variant || 'primary'\"\n  [actionLabel]=\"snackbar()?.actionLabel\"\n  (action)=\"snackbar()?.action?.()\"\n  [timeout]=\"snackbar()?.timeout\"\n  [iconName]=\"snackbar()?.iconName\"\n  [symbolName]=\"snackbar()?.symbolName\"\n  >{{ snackbar()?.message }}</Snackbar\n>\n\n<Confirmation\n  [show]=\"showConfirmation()\"\n  (showing)=\"handleConfirmationShowingEvent($event)\"\n  [confirmation]=\"confirmation()\"\n></Confirmation>\n", dependencies: [{ kind: "component", type: UniAlertComponent, selector: "uni-alert, Alert", inputs: ["show", "iconName", "symbolName", "useVariant"], outputs: ["showChange", "showing"] }, { kind: "component", type: UniSnackbarComponent, selector: "uni-snackbar, Snackbar", inputs: ["show", "iconName", "symbolName", "timeout", "actionLabel", "useVariant"], outputs: ["action", "showing"] }, { kind: "component", type: ConfirmationDialogComponent, selector: "uni-confirmation-dialog, Confirmation", inputs: ["show", "confirmation"], outputs: ["showing"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: NotificationsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-notifications, Notifications', standalone: true, imports: [UniAlertComponent, UniSnackbarComponent, ConfirmationDialogComponent], template: "<Alert\n  [show]=\"showAlert()\"\n  (showing)=\"handleAlertShowingEvent($event)\"\n  [variant]=\"alert()?.variant || 'primary'\"\n  [iconName]=\"alert()?.iconName\"\n  [symbolName]=\"alert()?.symbolName\"\n  >{{ alert()?.message }}</Alert\n>\n\n<Snackbar\n  [show]=\"showSnackbar()\"\n  (showing)=\"handleSnackbarShowingEvent($event)\"\n  [variant]=\"snackbar()?.variant || 'primary'\"\n  [actionLabel]=\"snackbar()?.actionLabel\"\n  (action)=\"snackbar()?.action?.()\"\n  [timeout]=\"snackbar()?.timeout\"\n  [iconName]=\"snackbar()?.iconName\"\n  [symbolName]=\"snackbar()?.symbolName\"\n  >{{ snackbar()?.message }}</Snackbar\n>\n\n<Confirmation\n  [show]=\"showConfirmation()\"\n  (showing)=\"handleConfirmationShowingEvent($event)\"\n  [confirmation]=\"confirmation()\"\n></Confirmation>\n" }]
+        }], ctorParameters: () => [] });
+
 class UniTooltipComponent extends BaseComponent {
     elRef = inject(ElementRef);
     renderer = inject(Renderer2);
@@ -1940,5 +2480,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { RippleDirective, UniBadgeComponent, UniBoxComponent, UniButtonComponent, UniCardComponent, UniCardContentComponent, UniCardHeaderComponent, UniCenterComponent, UniDialogButtonsComponent, UniDialogComponent, UniDialogHeaderComponent, UniDividerComponent, UniDropdownComponent, UniGridAreaComponent, UniGridComponent, UniIconComponent, UniMenuComponent, UniRowComponent, UniStackComponent, UniSymbolComponent, UniTextComponent, UniTooltipComponent, UniWrapComponent };
+export { ConfirmationDialogComponent, LocalStorageService, NotificationService, NotificationsComponent, RippleDirective, ThemeService, UNI_THEMES, UniAlertComponent, UniBadgeComponent, UniBaseDatasource, UniBoxComponent, UniButtonComponent, UniCardComponent, UniCardContentComponent, UniCardHeaderComponent, UniCenterComponent, UniDialogButtonsComponent, UniDialogComponent, UniDialogHeaderComponent, UniDividerComponent, UniDropdownComponent, UniGridAreaComponent, UniGridComponent, UniIconButtonComponent, UniIconComponent, UniMenuComponent, UniRecordDatasource, UniRowComponent, UniServerSideDatasource, UniSnackbarComponent, UniStackComponent, UniSymbolComponent, UniTextComponent, UniTooltipComponent, UniWrapComponent, useTimer };
 //# sourceMappingURL=uni-design-system-uni-angular.mjs.map