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

package/README.md

@@ -21,13 +21,15 @@ The official **Angular** implementation of the Uni Design System. Built from the
 ```bash
 npm install @uni-design-system/uni-angular @uni-design-system/uni-core @emotion/css
 ```
-*Note: This package requires `@emotion/css` to be present in the host application as a peer dependency.*
+
+_Note: This package requires `@emotion/css` to be present in the host application as a peer dependency._
 
 ## 🏁 Getting Started
 
 This library utilizes fully standalone components compliant with modern Angular architectures. Simply import the component into your Standalone Component or Angular Module:
 
 ### 1. Import Component
+
 ```typescript
 import { Component } from '@angular/core';
 import { ButtonComponent } from '@uni-design-system/uni-angular';
@@ -36,12 +38,7 @@ import { ButtonComponent } from '@uni-design-system/uni-angular';
   selector: 'app-root',
   standalone: true,
   imports: [ButtonComponent], // 🟢 Inject here
-  template: `
-    <uni-button 
-      text="Hello Uni!" 
-      (click)="handleOnClick()">
-    </uni-button>
-  `
+  template: ` <uni-button text="Hello Uni!" (click)="handleOnClick()"> </uni-button> `,
 })
 export class AppComponent {
   handleOnClick() {
@@ -51,7 +48,7 @@ export class AppComponent {
 ```
 
 ## 🛠️ Architecture Profile
+
 - **Framework Support:** Angular `^21.2.0`
 - **Package Format:** Compiled strictly under the **Angular Package Format (APF)** using `ng-packagr` into flat, optimized `fesm2022` modules.
 - **CSS Architecture:** Leverages native CSS properties and token maps for high-performance hardware rendering, avoiding heavy deprecated runtime framework animation libraries.
-

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

@@ -1,5 +1,5 @@
 import * as i0 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 } 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';
@@ -494,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 {
@@ -567,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] };
@@ -1194,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',
@@ -1204,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',
@@ -1938,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']
@@ -2029,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);
@@ -2209,5 +2480,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { LocalStorageService, NotificationService, RippleDirective, ThemeService, UNI_THEMES, UniBadgeComponent, UniBaseDatasource, UniBoxComponent, UniButtonComponent, UniCardComponent, UniCardContentComponent, UniCardHeaderComponent, UniCenterComponent, UniDialogButtonsComponent, UniDialogComponent, UniDialogHeaderComponent, UniDividerComponent, UniDropdownComponent, UniGridAreaComponent, UniGridComponent, UniIconComponent, UniMenuComponent, UniRecordDatasource, UniRowComponent, UniServerSideDatasource, UniStackComponent, UniSymbolComponent, UniTextComponent, UniTooltipComponent, UniWrapComponent, useTimer };
+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