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

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

@@ -1,32 +1,2213 @@
 import * as i0 from '@angular/core';
-import { Input, Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-class UniButtonComponent {
-    label = 'Button';
-    bgColor = '#000000';
-    textColor = '#fff';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: UniButtonComponent, isStandalone: true, selector: "uni-button", inputs: { label: "label" }, ngImport: i0, template: `
-    <button [style.background-color]="bgColor" [style.color]="textColor">
-      {{ label }}
-    </button>
-  `, isInline: true, styles: ["button{padding:12px 24px;border-radius:4px;border:none;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+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 { 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) => {
+        const key = JSON.stringify(args);
+        if (cache.has(key)) {
+            return cache.get(key);
+        }
+        const result = fn(...args);
+        cache.set(key, result);
+        return result;
+    });
+}
+
+class LocalStorageService {
+    isLocalStorageAvailable = memoize(() => {
+        try {
+            const test = '__localStorage_test__';
+            localStorage.setItem(test, test);
+            localStorage.removeItem(test);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    });
+    setItem(key, value) {
+        if (!this.isLocalStorageAvailable()) {
+            console.warn('LocalStorage is not available');
+            return false;
+        }
+        try {
+            const stringValue = typeof value === 'string' ? value : JSON.stringify(value);
+            localStorage.setItem(key, stringValue);
+            return true;
+        }
+        catch (error) {
+            console.error('Error saving to localStorage:', error);
+            return false;
+        }
+    }
+    getItem(key) {
+        if (!this.isLocalStorageAvailable()) {
+            return null;
+        }
+        try {
+            const item = localStorage.getItem(key);
+            if (item === null) {
+                return null;
+            }
+            try {
+                return JSON.parse(item);
+            }
+            catch {
+                return item;
+            }
+        }
+        catch (error) {
+            console.error('Error reading from localStorage:', error);
+            return null;
+        }
+    }
+    removeItem(key) {
+        if (!this.isLocalStorageAvailable()) {
+            return false;
+        }
+        try {
+            localStorage.removeItem(key);
+            return true;
+        }
+        catch (error) {
+            console.error('Error removing from localStorage:', error);
+            return false;
+        }
+    }
+    clear() {
+        if (!this.isLocalStorageAvailable()) {
+            return false;
+        }
+        try {
+            localStorage.clear();
+            return true;
+        }
+        catch (error) {
+            console.error('Error clearing localStorage:', error);
+            return false;
+        }
+    }
+    hasKey(key) {
+        if (!this.isLocalStorageAvailable()) {
+            return false;
+        }
+        return localStorage.getItem(key) !== null;
+    }
+    getAllKeys() {
+        if (!this.isLocalStorageAvailable()) {
+            return [];
+        }
+        try {
+            return Object.keys(localStorage);
+        }
+        catch (error) {
+            console.error('Error getting localStorage keys:', error);
+            return [];
+        }
+    }
+    getSize() {
+        if (!this.isLocalStorageAvailable()) {
+            return 0;
+        }
+        try {
+            let total = 0;
+            for (const key in localStorage) {
+                if (Object.prototype.hasOwnProperty.call(localStorage, key)) {
+                    total += localStorage[key].length + key.length;
+                }
+            }
+            return total;
+        }
+        catch (error) {
+            console.error('Error calculating localStorage size:', error);
+            return 0;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: LocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: LocalStorageService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: LocalStorageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class NotificationService {
+    /* Alert */
+    alert = signal(undefined, ...(ngDevMode ? [{ debugName: "alert" }] : /* istanbul ignore next */ []));
+    showAlert = (alert) => this.alert.set(alert);
+    hideAlert = () => this.alert.set(undefined);
+    /* Snackbar */
+    snackbar = signal(undefined, ...(ngDevMode ? [{ debugName: "snackbar" }] : /* istanbul ignore next */ []));
+    showSnackbar = (snackbar) => this.snackbar.set(snackbar);
+    hideSnackbar = () => this.snackbar.set(undefined);
+    /* Confirmation */
+    confirmation = signal(undefined, ...(ngDevMode ? [{ debugName: "confirmation" }] : /* istanbul ignore next */ []));
+    showConfirmation = (confirmation) => this.confirmation.set(confirmation);
+    hideConfirmation = () => this.confirmation.set(undefined);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: NotificationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: NotificationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+function useTimer() {
+    const destroyRef = inject(DestroyRef);
+    const msRemaining = signal(0, ...(ngDevMode ? [{ debugName: "msRemaining" }] : /* istanbul ignore next */ []));
+    const isPaused = signal(false, ...(ngDevMode ? [{ debugName: "isPaused" }] : /* istanbul ignore next */ []));
+    const isActive = computed(() => msRemaining() > 0, ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    let intervalId = null;
+    let endTime = 0;
+    let onCompleteCallback;
+    const stop = () => {
+        if (intervalId)
+            clearInterval(intervalId);
+        intervalId = null;
+    };
+    const tick = () => {
+        const remaining = Math.max(0, endTime - Date.now());
+        msRemaining.set(remaining);
+        if (remaining <= 0) {
+            stop();
+            if (onCompleteCallback)
+                onCompleteCallback();
+        }
+    };
+    const start = (durationMs, onComplete) => {
+        stop();
+        onCompleteCallback = onComplete;
+        isPaused.set(false);
+        msRemaining.set(durationMs);
+        endTime = Date.now() + durationMs;
+        intervalId = setInterval(tick, 100);
+    };
+    const pause = () => {
+        if (!isActive() || isPaused())
+            return;
+        stop();
+        isPaused.set(true);
+    };
+    const resume = () => {
+        if (!isActive() || !isPaused())
+            return;
+        isPaused.set(false);
+        endTime = Date.now() + msRemaining();
+        intervalId = setInterval(tick, 100);
+    };
+    destroyRef.onDestroy(() => stop());
+    return {
+        start,
+        pause,
+        resume,
+        stop: () => {
+            stop();
+            msRemaining.set(0);
+        },
+        msRemaining,
+        isPaused,
+        isActive,
+        secondsRemaining: computed(() => Math.ceil(msRemaining() / 1000)),
+    };
+}
+
+const UNI_THEMES = new InjectionToken('', {
+    providedIn: 'root',
+    factory: () => UniThemes,
+});
+
+const safeParseInt = (n) => typeof n === 'number' ? n : parseInt(n);
+
+// noinspection JSUnusedGlobalSymbols
+class ThemeService {
+    themes = inject(UNI_THEMES);
+    localStorage = inject(LocalStorageService);
+    theme = signal(LightTheme, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+    themeOptions = signal([], ...(ngDevMode ? [{ debugName: "themeOptions" }] : /* istanbul ignore next */ []));
+    components = computed(() => this.theme().components, ...(ngDevMode ? [{ debugName: "components" }] : /* istanbul ignore next */ []));
+    component = (componentName) => computed(() => this.components()[componentName] || {});
+    colors = computed(() => this.theme().colors, ...(ngDevMode ? [{ debugName: "colors" }] : /* istanbul ignore next */ []));
+    typeFaces = computed(() => this.theme().typefaces, ...(ngDevMode ? [{ debugName: "typeFaces" }] : /* istanbul ignore next */ []));
+    spacing = computed(() => this.theme().spacing, ...(ngDevMode ? [{ debugName: "spacing" }] : /* istanbul ignore next */ []));
+    thicknesses = computed(() => this.theme().thicknesses, ...(ngDevMode ? [{ debugName: "thicknesses" }] : /* istanbul ignore next */ []));
+    radii = computed(() => this.theme().radii, ...(ngDevMode ? [{ debugName: "radii" }] : /* istanbul ignore next */ []));
+    borders = computed(() => this.theme().borders, ...(ngDevMode ? [{ debugName: "borders" }] : /* istanbul ignore next */ []));
+    shadows = computed(() => this.theme().shadows, ...(ngDevMode ? [{ debugName: "shadows" }] : /* istanbul ignore next */ []));
+    icons = computed(() => this.theme().icons, ...(ngDevMode ? [{ debugName: "icons" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.themeOptions.set(Object.keys(this.themes).map((key) => {
+            return { label: this.themes[key].name, value: key };
+        }));
+        this.selectTheme(this.localStorage.getItem('theme') || Object.keys(this.themes)[0] || 'base');
+    }
+    selectTheme(themeName) {
+        this.selectedThemeKey.set(themeName);
+        if (this.themes[themeName])
+            this.theme.set(this.themes[themeName]);
+        this.localStorage.setItem('theme', themeName);
+    }
+    selectedThemeName = computed(() => this.theme().name, ...(ngDevMode ? [{ debugName: "selectedThemeName" }] : /* istanbul ignore next */ []));
+    selectedThemeKey = signal('', ...(ngDevMode ? [{ debugName: "selectedThemeKey" }] : /* istanbul ignore next */ []));
+    textClass = (textRole, textColor) => {
+        return css([
+            {
+                ...this.typeFaces()[textRole],
+            },
+            textColor && {
+                color: this.colors()[textColor],
+            },
+        ]);
+    };
+    componentStyle = (componentName, variant, size) => computed(() => {
+        const component = this.component(componentName)();
+        const { fixed, colors, sizes } = component;
+        const colorStyle = colors && colors[variant];
+        const sizeStyle = sizes && sizes[size];
+        return { ...fixed, ...colorStyle, ...sizeStyle };
+    });
+    getSpacing = (size) => {
+        return size === 'none' ? 'none' : this.spacing()[size];
+    };
+    getThickness = (thickness) => this.theme().thicknesses[thickness];
+    getContentColor = (token, useVariant) => useVariant
+        ? this.colors()[`on-${token}-variant`]
+        : this.colors()[`on-${token}`];
+    colorPair = (token, colorVariant) => {
+        if (!token)
+            return;
+        const backgroundColor = this.colors()[token];
+        const color = this.getContentColor(token, colorVariant);
+        return { color, backgroundColor };
+    };
+    backgroundColor = (token) => {
+        return !token ? undefined : { backgroundColor: this.colors()[token] };
+    };
+    backgroundImage = (url) => {
+        return !url ? undefined : { backgroundImage: `url(${url})` };
+    };
+    getContainerColors = (color, useVariant) => {
+        const token = (color + '-container');
+        return this.colorPair(token, useVariant);
+    };
+    typeface = (typeface) => typeface && this.typeFaces()[typeface];
+    colorPalette = () => this.colors();
+    color(color) {
+        return !color ? undefined : { color: this.colors()[color] };
+    }
+    getDashedBorder(color, radius) {
+        if (!color)
+            return;
+        const r = radius && this.radii()[radius];
+        const borderRadius = r ? safeParseInt(r) : 0;
+        const colors = this.colors()[color];
+        const strokeColor = colors?.replace('#', '%23');
+        return {
+            backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='${borderRadius}' ry='${borderRadius}' stroke='${strokeColor}' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e")`,
+            borderRadius,
+        };
+    }
+    radius(size) {
+        return !size ? undefined : { borderRadius: this.radii()[size] };
+    }
+    getRadiusLeft(size) {
+        if (!size)
+            return;
+        return {
+            borderBottomLeftRadius: this.radii()[size],
+            borderTopLeftRadius: this.radii()[size],
+        };
+    }
+    getRadiusRight(size) {
+        if (!size)
+            return;
+        return {
+            borderBottomRightRadius: this.radii()[size],
+            borderTopRightRadius: this.radii()[size],
+        };
+    }
+    getRadiusTop(size) {
+        if (!size)
+            return;
+        return {
+            borderTopLeftRadius: this.radii()[size],
+            borderTopRightRadius: this.radii()[size],
+        };
+    }
+    getRadiusBottom(size) {
+        if (!size)
+            return;
+        return {
+            borderBottomLeftRadius: this.radii()[size],
+            borderBottomRightRadius: this.radii()[size],
+        };
+    }
+    padding(size) {
+        return !size ? undefined : { padding: this.spacing()[size] };
+    }
+    horizontalPadding(size) {
+        return !size ? undefined : { paddingInline: this.spacing()[size] };
+    }
+    verticalPadding(size) {
+        return !size ? undefined : { paddingBlock: this.spacing()[size] };
+    }
+    paddingLeft(size) {
+        return !size ? undefined : { paddingLeft: this.spacing()[size] };
+    }
+    paddingRight(size) {
+        return !size ? undefined : { paddingRight: this.spacing()[size] };
+    }
+    paddingTop(size) {
+        return !size ? undefined : { paddingTop: this.spacing()[size] };
+    }
+    paddingBottom(size) {
+        return !size ? undefined : { paddingBottom: this.spacing()[size] };
+    }
+    border(border) {
+        return !border ? undefined : { border: this.borders()[border] };
+    }
+    borderTop(border) {
+        return !border ? undefined : { borderTop: this.borders()[border] };
+    }
+    borderBottom(border) {
+        return !border ? undefined : { borderBottom: this.borders()[border] };
+    }
+    borderLeft(border) {
+        return !border ? undefined : { borderLeft: this.borders()[border] };
+    }
+    borderRight(border) {
+        return !border ? undefined : { borderRight: this.borders()[border] };
+    }
+    boxShadow(shadow) {
+        return !shadow ? undefined : { boxShadow: this.shadows()[shadow] };
+    }
+    gap(gap) {
+        return !gap || gap === 'none' ? undefined : { gap: this.spacing()[gap] };
+    }
+    zIndex(element) {
+        return !element ? undefined : { zIndex: Z_INDEX[element] };
+    }
+    borderColor(borderColor) {
+        return { borderColor: this.colors()[borderColor] };
+    }
+    getComponentTheme(componentName) {
+        return this.component(componentName);
+    }
+    // Used to get an "always-defined" options object from a component theme.
+    getComponentOptions = (componentName) => linkedSignal({
+        source: this.getComponentTheme(componentName),
+        computation: () => {
+            return this.getComponentTheme(componentName)().options || {};
+        },
+    });
+    componentOptions = (componentName) => computed(() => this.component(componentName)().options || {});
+    style(prop, value) {
+        return !value ? undefined : { [prop]: value };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ThemeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+const COMPONENT_NAME = new InjectionToken('');
+class BaseComponent {
+    componentName = inject(COMPONENT_NAME);
+    theme = inject(ThemeService);
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ [])); // TODO: Make Variant support undefined
+    size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    componentTheme = computed(() => this.theme.getComponentTheme(this.componentName)(), ...(ngDevMode ? [{ debugName: "componentTheme" }] : /* istanbul ignore next */ []));
+    componentOptions = computed(() => this.theme.getComponentOptions(this.componentName)(), ...(ngDevMode ? [{ debugName: "componentOptions" }] : /* istanbul ignore next */ []));
+    style = computed(() => this.theme.componentStyle(this.componentName, this.variant(), this.size())(), ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: BaseComponent, isStandalone: true, selector: "ng-component", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: BaseComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [],
+                    template: ``,
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+class UniBadgeComponent extends BaseComponent {
+    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    useVariant = input(false, ...(ngDevMode ? [{ debugName: "useVariant" }] : /* istanbul ignore next */ []));
+    width;
+    get className() {
+        const color = this.color();
+        return css([
+            {
+                ...this.theme.getContainerColors(color || 'primary', this.useVariant()),
+                ...this.theme.typeface('badge'),
+                display: 'inline-block',
+                padding: '0 16px',
+                ...this.theme.radius(this.componentOptions().borderRadius),
+                textAlign: 'center',
+                letterSpacing: 1,
+            },
+            this.width && {
+                minWidth: this.width - 32,
+            },
+        ]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniBadgeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniBadgeComponent, isStandalone: true, selector: "div[uni-badge], Badge", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, useVariant: { classPropertyName: "useVariant", publicName: "useVariant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.className" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'badge' }], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniBadgeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[uni-badge], Badge',
+                    standalone: true,
+                    imports: [],
+                    template: `<ng-content></ng-content>`,
+                    providers: [{ provide: COMPONENT_NAME, useValue: 'badge' }],
+                }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], useVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "useVariant", required: false }] }], width: [{
+                type: Input
+            }], className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class UniIconComponent {
+    themeService = inject(ThemeService);
+    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
+    _path;
+    get className() {
+        return css([{ ...this.themeService.color(this.color()) }]);
+    }
+    set name(iconName) {
+        const theme = this.themeService.theme();
+        this._path = `url("${theme.icons[iconName]}")`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniIconComponent, isStandalone: true, selector: "uni-icon, Icon", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "style.-webkit-mask-image": "this._path", "class": "this.className" } }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;height:100%;width:100%;background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-icon, Icon', standalone: true, imports: [], template: '', styles: [":host{display:block;height:100%;width:100%;background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], _path: [{
+                type: HostBinding,
+                args: ['style.-webkit-mask-image']
+            }], className: [{
+                type: HostBinding,
+                args: ['class']
+            }], name: [{
+                type: Input
+            }] } });
+
+class UniBoxComponent {
+    theme = inject(ThemeService);
+    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
+    backgroundColor = input(...(ngDevMode ? [undefined, { debugName: "backgroundColor" }] : /* istanbul ignore next */ []));
+    borderRadius = input(...(ngDevMode ? [undefined, { debugName: "borderRadius" }] : /* istanbul ignore next */ []));
+    borderRadiusLeft = input(...(ngDevMode ? [undefined, { debugName: "borderRadiusLeft" }] : /* istanbul ignore next */ []));
+    borderRadiusRight = input(...(ngDevMode ? [undefined, { debugName: "borderRadiusRight" }] : /* istanbul ignore next */ []));
+    borderRadiusTop = input(...(ngDevMode ? [undefined, { debugName: "borderRadiusTop" }] : /* istanbul ignore next */ []));
+    borderRadiusBottom = input(...(ngDevMode ? [undefined, { debugName: "borderRadiusBottom" }] : /* istanbul ignore next */ []));
+    padding = input(...(ngDevMode ? [undefined, { debugName: "padding" }] : /* istanbul ignore next */ []));
+    paddingHorizontal = input(...(ngDevMode ? [undefined, { debugName: "paddingHorizontal" }] : /* istanbul ignore next */ []));
+    paddingVertical = input(...(ngDevMode ? [undefined, { debugName: "paddingVertical" }] : /* istanbul ignore next */ []));
+    paddingLeft = input(...(ngDevMode ? [undefined, { debugName: "paddingLeft" }] : /* istanbul ignore next */ []));
+    paddingRight = input(...(ngDevMode ? [undefined, { debugName: "paddingRight" }] : /* istanbul ignore next */ []));
+    paddingTop = input(...(ngDevMode ? [undefined, { debugName: "paddingTop" }] : /* istanbul ignore next */ []));
+    paddingBottom = input(...(ngDevMode ? [undefined, { debugName: "paddingBottom" }] : /* istanbul ignore next */ []));
+    border = input(...(ngDevMode ? [undefined, { debugName: "border" }] : /* istanbul ignore next */ []));
+    borderTop = input(...(ngDevMode ? [undefined, { debugName: "borderTop" }] : /* istanbul ignore next */ []));
+    borderBottom = input(...(ngDevMode ? [undefined, { debugName: "borderBottom" }] : /* istanbul ignore next */ []));
+    borderLeft = input(...(ngDevMode ? [undefined, { debugName: "borderLeft" }] : /* istanbul ignore next */ []));
+    borderRight = input(...(ngDevMode ? [undefined, { debugName: "borderRight" }] : /* istanbul ignore next */ []));
+    dashBorder = input(false, ...(ngDevMode ? [{ debugName: "dashBorder" }] : /* istanbul ignore next */ []));
+    alignSelf = input(...(ngDevMode ? [undefined, { debugName: "alignSelf" }] : /* istanbul ignore next */ []));
+    alignItems = input(...(ngDevMode ? [undefined, { debugName: "alignItems" }] : /* istanbul ignore next */ []));
+    alignContent = input(...(ngDevMode ? [undefined, { debugName: "alignContent" }] : /* istanbul ignore next */ []));
+    justifyContent = input(...(ngDevMode ? [undefined, { debugName: "justifyContent" }] : /* istanbul ignore next */ []));
+    grow = input(...(ngDevMode ? [undefined, { debugName: "grow" }] : /* istanbul ignore next */ []));
+    display = input(...(ngDevMode ? [undefined, { debugName: "display" }] : /* istanbul ignore next */ []));
+    position = input(...(ngDevMode ? [undefined, { debugName: "position" }] : /* istanbul ignore next */ []));
+    inset = input(...(ngDevMode ? [undefined, { debugName: "inset" }] : /* istanbul ignore next */ []));
+    height = input(...(ngDevMode ? [undefined, { debugName: "height" }] : /* istanbul ignore next */ []));
+    minHeight = input(...(ngDevMode ? [undefined, { debugName: "minHeight" }] : /* istanbul ignore next */ []));
+    maxHeight = input(...(ngDevMode ? [undefined, { debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+    width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
+    minWidth = input(...(ngDevMode ? [undefined, { debugName: "minWidth" }] : /* istanbul ignore next */ []));
+    maxWidth = input(...(ngDevMode ? [undefined, { debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+    ignoreDir = input(true, ...(ngDevMode ? [{ debugName: "ignoreDir" }] : /* istanbul ignore next */ []));
+    gridArea = input(...(ngDevMode ? [undefined, { debugName: "gridArea" }] : /* istanbul ignore next */ []));
+    gridColumn = input(...(ngDevMode ? [undefined, { debugName: "gridColumn" }] : /* istanbul ignore next */ []));
+    gridRow = input(...(ngDevMode ? [undefined, { debugName: "gridRow" }] : /* istanbul ignore next */ []));
+    overflow = input(...(ngDevMode ? [undefined, { debugName: "overflow" }] : /* istanbul ignore next */ []));
+    elevation = input(...(ngDevMode ? [undefined, { debugName: "elevation" }] : /* istanbul ignore next */ [])); // Deprecated, use shadow instead
+    shadow = input(...(ngDevMode ? [undefined, { debugName: "shadow" }] : /* istanbul ignore next */ []));
+    gap = input(...(ngDevMode ? [undefined, { debugName: "gap" }] : /* istanbul ignore next */ []));
+    fullWidth = input(...(ngDevMode ? [undefined, { debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    fullHeight = input(...(ngDevMode ? [undefined, { debugName: "fullHeight" }] : /* istanbul ignore next */ []));
+    flexDirection = input(...(ngDevMode ? [undefined, { debugName: "flexDirection" }] : /* istanbul ignore next */ []));
+    textAlign = input(...(ngDevMode ? [undefined, { debugName: "textAlign" }] : /* istanbul ignore next */ []));
+    wrapItems = input(undefined, ...(ngDevMode ? [{ debugName: "wrapItems" }] : /* istanbul ignore next */ []));
+    zIndex = input(...(ngDevMode ? [undefined, { debugName: "zIndex" }] : /* istanbul ignore next */ []));
+    get boxClassName() {
+        return css([
+            {
+                ...this.theme.colorPair(this.color()),
+                ...this.theme.backgroundColor(this.backgroundColor()),
+                display: this.alignSelf() ? 'flex' : 'block',
+                position: this.position(),
+                inset: this.inset(),
+                boxSizing: 'border-box',
+                height: this.height(),
+                minHeight: this.minHeight(),
+                maxHeight: this.maxHeight(),
+                width: this.width(),
+                minWidth: this.minWidth(),
+                maxWidth: this.maxWidth(),
+                flexWrap: this.wrapItems(),
+                overflow: this.overflow(),
+                ...this.theme.padding(this.padding()),
+                ...this.theme.horizontalPadding(this.paddingHorizontal()),
+                ...this.theme.verticalPadding(this.paddingVertical()),
+                ...this.theme.paddingLeft(this.paddingLeft()),
+                ...this.theme.paddingRight(this.paddingRight()),
+                ...this.theme.paddingTop(this.paddingTop()),
+                ...this.theme.paddingBottom(this.paddingBottom()),
+                ...this.theme.boxShadow(this.elevation()),
+                ...this.theme.boxShadow(this.shadow()),
+                ...this.theme.radius(this.borderRadius()),
+                ...this.theme.getRadiusLeft(this.borderRadiusLeft()),
+                ...this.theme.getRadiusRight(this.borderRadiusRight()),
+                ...this.theme.getRadiusTop(this.borderRadiusTop()),
+                ...this.theme.getRadiusBottom(this.borderRadiusBottom()),
+                ...this.theme.borderTop(this.borderTop()),
+                ...this.theme.borderBottom(this.borderBottom()),
+                ...this.theme.borderLeft(this.borderLeft()),
+                ...this.theme.borderRight(this.borderRight()),
+                ...this.theme.gap(this.gap()),
+                ...this.theme.style('display', this.display()),
+                ...this.theme.style('alignSelf', this.alignSelf()),
+                ...this.theme.style('alignItems', this.alignItems()),
+                ...this.theme.style('justifyContent', this.justifyContent()),
+                ...this.theme.style('alignContent', this.alignContent()),
+                ...this.theme.style('flexGrow', this.grow()),
+                ...this.theme.style('flexDirection', this.flexDirection()),
+                ...this.theme.style('gridArea', this.gridArea()),
+                ...this.theme.style('gridColumn', this.gridColumn()),
+                ...this.theme.style('gridRow', this.gridRow()),
+                ...this.theme.style('textAlign', this.textAlign()),
+                ...this.theme.zIndex(this.zIndex()),
+            },
+            this.border() &&
+                !this.dashBorder() && {
+                ...this.theme.border(this.border()),
+            },
+            this.border() &&
+                this.dashBorder() && {
+                ...this.theme.getDashedBorder(this.border(), this.borderRadius()),
+            },
+            this.fullWidth() && {
+                width: '100%',
+            },
+            this.fullHeight() && {
+                height: '100%',
+            },
+            this.ignoreDir() &&
+                (this.flexDirection() ?? 'row') === 'row' && {
+                '&:dir(rtl)': {
+                    flexDirection: 'row-reverse',
+                },
+            },
+            this.ignoreDir() &&
+                (this.flexDirection() ?? 'row') === 'row-reverse' && {
+                '&:dir(rtl)': {
+                    flexDirection: 'row',
+                },
+            },
+        ]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniBoxComponent, isStandalone: true, selector: "div[uni-box-layout], Box, div[box-layout]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, borderRadiusLeft: { classPropertyName: "borderRadiusLeft", publicName: "borderRadiusLeft", isSignal: true, isRequired: false, transformFunction: null }, borderRadiusRight: { classPropertyName: "borderRadiusRight", publicName: "borderRadiusRight", isSignal: true, isRequired: false, transformFunction: null }, borderRadiusTop: { classPropertyName: "borderRadiusTop", publicName: "borderRadiusTop", isSignal: true, isRequired: false, transformFunction: null }, borderRadiusBottom: { classPropertyName: "borderRadiusBottom", publicName: "borderRadiusBottom", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, paddingHorizontal: { classPropertyName: "paddingHorizontal", publicName: "paddingHorizontal", isSignal: true, isRequired: false, transformFunction: null }, paddingVertical: { classPropertyName: "paddingVertical", publicName: "paddingVertical", isSignal: true, isRequired: false, transformFunction: null }, paddingLeft: { classPropertyName: "paddingLeft", publicName: "paddingLeft", isSignal: true, isRequired: false, transformFunction: null }, paddingRight: { classPropertyName: "paddingRight", publicName: "paddingRight", isSignal: true, isRequired: false, transformFunction: null }, paddingTop: { classPropertyName: "paddingTop", publicName: "paddingTop", isSignal: true, isRequired: false, transformFunction: null }, paddingBottom: { classPropertyName: "paddingBottom", publicName: "paddingBottom", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, borderTop: { classPropertyName: "borderTop", publicName: "borderTop", isSignal: true, isRequired: false, transformFunction: null }, borderBottom: { classPropertyName: "borderBottom", publicName: "borderBottom", isSignal: true, isRequired: false, transformFunction: null }, borderLeft: { classPropertyName: "borderLeft", publicName: "borderLeft", isSignal: true, isRequired: false, transformFunction: null }, borderRight: { classPropertyName: "borderRight", publicName: "borderRight", isSignal: true, isRequired: false, transformFunction: null }, dashBorder: { classPropertyName: "dashBorder", publicName: "dashBorder", isSignal: true, isRequired: false, transformFunction: null }, alignSelf: { classPropertyName: "alignSelf", publicName: "alignSelf", isSignal: true, isRequired: false, transformFunction: null }, alignItems: { classPropertyName: "alignItems", publicName: "alignItems", isSignal: true, isRequired: false, transformFunction: null }, alignContent: { classPropertyName: "alignContent", publicName: "alignContent", isSignal: true, isRequired: false, transformFunction: null }, justifyContent: { classPropertyName: "justifyContent", publicName: "justifyContent", isSignal: true, isRequired: false, transformFunction: null }, grow: { classPropertyName: "grow", publicName: "grow", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, ignoreDir: { classPropertyName: "ignoreDir", publicName: "ignoreDir", isSignal: true, isRequired: false, transformFunction: null }, gridArea: { classPropertyName: "gridArea", publicName: "gridArea", isSignal: true, isRequired: false, transformFunction: null }, gridColumn: { classPropertyName: "gridColumn", publicName: "gridColumn", isSignal: true, isRequired: false, transformFunction: null }, gridRow: { classPropertyName: "gridRow", publicName: "gridRow", isSignal: true, isRequired: false, transformFunction: null }, overflow: { classPropertyName: "overflow", publicName: "overflow", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: true, isRequired: false, transformFunction: null }, flexDirection: { classPropertyName: "flexDirection", publicName: "flexDirection", isSignal: true, isRequired: false, transformFunction: null }, textAlign: { classPropertyName: "textAlign", publicName: "textAlign", isSignal: true, isRequired: false, transformFunction: null }, wrapItems: { classPropertyName: "wrapItems", publicName: "wrapItems", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.boxClassName" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniBoxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[uni-box-layout], Box, div[box-layout]',
+                    standalone: true,
+                    imports: [],
+                    template: `<ng-content></ng-content>`,
+                }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], borderRadiusLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadiusLeft", required: false }] }], borderRadiusRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadiusRight", required: false }] }], borderRadiusTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadiusTop", required: false }] }], borderRadiusBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadiusBottom", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], paddingHorizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingHorizontal", required: false }] }], paddingVertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingVertical", required: false }] }], paddingLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingLeft", required: false }] }], paddingRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingRight", required: false }] }], paddingTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingTop", required: false }] }], paddingBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingBottom", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], borderTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderTop", required: false }] }], borderBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderBottom", required: false }] }], borderLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderLeft", required: false }] }], borderRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRight", required: false }] }], dashBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "dashBorder", required: false }] }], alignSelf: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignSelf", required: false }] }], alignItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignItems", required: false }] }], alignContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignContent", required: false }] }], justifyContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "justifyContent", required: false }] }], grow: [{ type: i0.Input, args: [{ isSignal: true, alias: "grow", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], ignoreDir: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoreDir", required: false }] }], gridArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridArea", required: false }] }], gridColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridColumn", required: false }] }], gridRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridRow", required: false }] }], overflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflow", required: false }] }], elevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevation", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], fullHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullHeight", required: false }] }], flexDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexDirection", required: false }] }], textAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "textAlign", required: false }] }], wrapItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapItems", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], boxClassName: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class UniCenterComponent extends UniBoxComponent {
+    display = input('flex', ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
+    justifyContent = input('center', ...(ngDevMode ? [{ debugName: "justifyContent" }] : /* istanbul ignore next */ []));
+    alignItems = input('center', ...(ngDevMode ? [{ debugName: "alignItems" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniCenterComponent, isStandalone: true, selector: "div[uni-center-layout], div[center-layout]", inputs: { display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, justifyContent: { classPropertyName: "justifyContent", publicName: "justifyContent", isSignal: true, isRequired: false, transformFunction: null }, alignItems: { classPropertyName: "alignItems", publicName: "alignItems", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCenterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[uni-center-layout], div[center-layout]',
+                    standalone: true,
+                    imports: [],
+                    template: `<ng-content></ng-content>`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], justifyContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "justifyContent", required: false }] }], alignItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignItems", required: false }] }] } });
+
+class UniGridAreaComponent {
+    area;
+    get className() {
+        return css([{ gridArea: this.area }]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniGridAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: UniGridAreaComponent, isStandalone: true, selector: "GridArea", inputs: { area: "area" }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniGridAreaComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'GridArea',
+                    standalone: true,
+                    imports: [],
+                    template: `<ng-content></ng-content>`,
+                }]
+        }], propDecorators: { area: [{
+                type: Input
+            }], className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class UniGridComponent extends UniBoxComponent {
+    display = input('grid', ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+    }
+    templateAreas;
+    templateColumns;
+    templateRows;
+    outline;
+    outlineColor;
+    get className() {
+        return css([
+            this.templateAreas && {
+                gridTemplateAreas: this.templateAreas,
+            },
+            this.templateColumns && {
+                gridTemplateColumns: this.templateColumns,
+            },
+            this.templateRows && {
+                gridTemplateRows: this.templateRows,
+            },
+            this.outline && {
+                gap: this.theme.getThickness(this.outline),
+            },
+            this.outlineColor && {
+                backgroundColor: this.theme.colorPalette()[this.outlineColor],
+            },
+        ]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniGridComponent, isStandalone: true, selector: "div[uni-grid-layout], Grid, div[grid-layout]", inputs: { display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, templateAreas: { classPropertyName: "templateAreas", publicName: "templateAreas", isSignal: false, isRequired: false, transformFunction: null }, templateColumns: { classPropertyName: "templateColumns", publicName: "templateColumns", isSignal: false, isRequired: false, transformFunction: null }, templateRows: { classPropertyName: "templateRows", publicName: "templateRows", isSignal: false, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: false, isRequired: false, transformFunction: null }, outlineColor: { classPropertyName: "outlineColor", publicName: "outlineColor", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniGridComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[uni-grid-layout], Grid, div[grid-layout]',
+                    standalone: true,
+                    imports: [],
+                    template: `<ng-content></ng-content>`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], templateAreas: [{
+                type: Input
+            }], templateColumns: [{
+                type: Input
+            }], templateRows: [{
+                type: Input
+            }], outline: [{
+                type: Input
+            }], outlineColor: [{
+                type: Input
+            }], className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class UniRowComponent extends UniBoxComponent {
+    display = input('flex', ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
+    flexDirection = input('row', ...(ngDevMode ? [{ debugName: "flexDirection" }] : /* istanbul ignore next */ []));
+    minWidth = input('fit-content', ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniRowComponent, isStandalone: true, selector: "div[uni-row-layout], Row, div[row-layout]", inputs: { display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, flexDirection: { classPropertyName: "flexDirection", publicName: "flexDirection", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniRowComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[uni-row-layout], Row, div[row-layout]',
+                    standalone: true,
+                    template: `<ng-content></ng-content>`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], flexDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexDirection", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }] } });
+
+class UniStackComponent extends UniBoxComponent {
+    display = input('flex', ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
+    flexDirection = input('column', ...(ngDevMode ? [{ debugName: "flexDirection" }] : /* istanbul ignore next */ []));
+    minHeight = input('fit-content', ...(ngDevMode ? [{ debugName: "minHeight" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniStackComponent, isStandalone: true, selector: "div[uni-stack-layout], Stack, div[stack-layout]", inputs: { display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, flexDirection: { classPropertyName: "flexDirection", publicName: "flexDirection", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniStackComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[uni-stack-layout], Stack, div[stack-layout]',
+                    standalone: true,
+                    template: `<ng-content></ng-content>`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], flexDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexDirection", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }] } });
+
+class UniWrapComponent extends UniBoxComponent {
+    display = input('flex', ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
+    wrapItems = input('wrap', ...(ngDevMode ? [{ debugName: "wrapItems" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniWrapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniWrapComponent, isStandalone: true, selector: "div[uni-wrap-layout], Wrap, div[wrap-layout]", inputs: { display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, wrapItems: { classPropertyName: "wrapItems", publicName: "wrapItems", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniWrapComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[uni-wrap-layout], Wrap, div[wrap-layout]',
+                    imports: [],
+                    template: `<ng-content></ng-content>`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], wrapItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapItems", required: false }] }] } });
+
+class UniSymbolComponent {
+    name;
+    fill = 0;
+    weight = 400;
+    grade = 0;
+    opticalSize = 24;
+    get className() {
+        const settings = `'FILL' ${this.fill}, 'wght' ${this.weight}, 'GRAD' ${this.grade}, 'opsz' ${this.opticalSize}`;
+        return ('material-symbols-rounded ' +
+            css({
+                fontVariationSettings: settings,
+                fontSize: `${this.opticalSize}px`,
+            }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSymbolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: UniSymbolComponent, isStandalone: true, selector: "uni-symbol, Symbol", inputs: { name: "name", fill: "fill", weight: "weight", grade: "grade", opticalSize: "opticalSize" }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: `{{ name }}`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSymbolComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'uni-symbol, Symbol',
+                    standalone: true,
+                    imports: [],
+                    template: `{{ name }}`,
+                }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], fill: [{
+                type: Input
+            }], weight: [{
+                type: Input
+            }], grade: [{
+                type: Input
+            }], opticalSize: [{
+                type: Input
+            }], className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+// https://css-tricks.com/how-to-recreate-the-ripple-effect-of-material-design-buttons/
+class RippleDirective {
+    renderer = inject(Renderer2);
+    el = inject(ElementRef);
+    hostEl;
+    constructor() {
+        this.hostEl = this.el.nativeElement;
+    }
+    onClick(e) {
+        if (!e)
+            return;
+        let ripple, d;
+        if (this.hostEl.querySelector(`.${this.rippleClass}`) === null) {
+            ripple = this.renderer.createElement('span');
+            this.renderer.addClass(ripple, this.rippleClass);
+            this.renderer.appendChild(this.hostEl, ripple);
+        }
+        ripple = this.hostEl.querySelector(`.${this.rippleClass}`);
+        this.renderer.appendChild(this.hostEl, ripple);
+        this.renderer.removeClass(ripple, this.animateClass);
+        if (!ripple.offsetHeight && !ripple.offsetWidth) {
+            d = Math.max(this.hostEl.offsetWidth, this.hostEl.offsetHeight);
+            this.renderer.setStyle(ripple, 'width', d + 'px');
+            this.renderer.setStyle(ripple, 'height', d + 'px');
+        }
+        const x = e.pageX - this.hostEl.offsetLeft - ripple.offsetWidth / 2;
+        const y = e.pageY - this.hostEl.offsetTop - ripple.offsetHeight / 2;
+        this.renderer.setStyle(ripple, 'top', y + 'px');
+        this.renderer.setStyle(ripple, 'left', x + 'px');
+        this.renderer.addClass(ripple, this.animateClass);
+    }
+    rippleClass = css({
+        display: 'block',
+        position: 'absolute',
+        background: 'rgba(255, 255, 255, 0.3)',
+        borderRadius: '100%',
+        transform: 'scale(0)',
+    });
+    animateClass = css({
+        animation: 'ripple 0.65s linear',
+        '@keyframes ripple': {
+            '100%': {
+                opacity: 0,
+                transform: 'scale(2.5)',
+            },
+        },
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: RippleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.12", type: RippleDirective, isStandalone: true, selector: "[uniRipple]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: RippleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uniRipple]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class UniButtonComponent extends BaseComponent {
+    disable = input(false, ...(ngDevMode ? [{ debugName: "disable" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    symbolLeft;
+    symbolRight;
+    spinnerBox = css({
+        position: 'absolute',
+        left: 0,
+        width: '100%',
+        height: '100%',
+        paddingTop: '6%',
+        paddingBottom: '6%',
+    });
+    get className() {
+        return css([
+            this.style() && {
+                ...this.style(),
+            },
+            {
+                display: 'flex',
+                alignItems: 'center',
+                position: 'relative',
+                overflow: 'hidden',
+                outline: 0,
+                border: 0,
+                cursor: 'pointer',
+                fontFamily: 'Euphemia, sans-serif',
+                transition: 'all 0.28s ease',
+                '&:disabled': {
+                    cursor: 'not-allowed !important',
+                },
+                '& .symbolLeft': {
+                    marginLeft: -6,
+                    marginRight: 4,
+                    fontSize: this.symbolSize(),
+                },
+                '& span': {
+                    alignContent: 'center',
+                    flexGrow: 1,
+                    whiteSpace: 'nowrap',
+                },
+                '& .symbolRight': {
+                    marginRight: -6,
+                    marginLeft: 4,
+                    fontSize: this.symbolSize(),
+                },
+            },
+            this.variant() !== 'ghost' && {
+                '&:hover, &:focus': {
+                    ...this.theme.boxShadow('raised'),
+                },
+                '&:focus-visible': {
+                    outline: `2px solid ${this.theme.colors()[this.variant()]}`,
+                    outlineOffset: '2px',
+                },
+            },
+            this.variant() === 'ghost' && {
+                '&:hover, &:focus': {
+                    backgroundColor: 'rgba(0,0,0,0.1) !important',
+                },
+                '&:focus-visible': {
+                    outline: `2px solid ${this.theme.colors()[this.variant()]}`,
+                    outlineOffset: '2px',
+                },
+            },
+            this.fullWidth() && {
+                width: '100%',
+            },
+            !this.loading() && {
+                '&:disabled': {
+                    ...this.componentTheme().colors?.disabled,
+                },
+            },
+            this.loading() && {
+                '&:disabled symbol': {
+                    opacity: 0,
+                },
+                '&:disabled span': {
+                    opacity: 0,
+                },
+            },
+        ]);
+    }
+    symbolSize = computed(() => {
+        const style = this.style();
+        const fontString = style['fontSize'];
+        const fontSize = parseFloat(fontString);
+        return fontSize + 4;
+    }, ...(ngDevMode ? [{ debugName: "symbolSize" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniButtonComponent, isStandalone: true, selector: "button[uni-text-button], Button, button[text-button]", inputs: { disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, symbolLeft: { classPropertyName: "symbolLeft", publicName: "symbolLeft", isSignal: false, isRequired: false, transformFunction: null }, symbolRight: { classPropertyName: "symbolRight", publicName: "symbolRight", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "attr.disabled": "disable() || loading() || null", "class": "this.className" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'button' }], usesInheritance: true, hostDirectives: [{ directive: RippleDirective }], ngImport: i0, template: `@if (loading()) {
+      <Box [class]="spinnerBox"><uni-icon name="spinner" /></Box>
+    }
+    @if (symbolLeft) {
+      <Symbol [name]="symbolLeft" class="symbolLeft" />
+    }
+    <span><ng-content></ng-content></span>
+    @if (symbolRight) {
+      <Symbol [name]="symbolRight" class="symbolRight" />
+    } `, isInline: true, dependencies: [{ kind: "component", type: // Keep this import
+                UniIconComponent, selector: "uni-icon, Icon", inputs: ["color", "name"] }, { 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: UniSymbolComponent, selector: "uni-symbol, Symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'uni-button', standalone: true, imports: [CommonModule], template: `
-    <button [style.background-color]="bgColor" [style.color]="textColor">
-      {{ label }}
-    </button>
-  `, styles: ["button{padding:12px 24px;border-radius:4px;border:none;cursor:pointer}\n"] }]
-        }], propDecorators: { label: [{
+            args: [{
+                    selector: 'button[uni-text-button], Button, button[text-button]',
+                    template: `@if (loading()) {
+      <Box [class]="spinnerBox"><uni-icon name="spinner" /></Box>
+    }
+    @if (symbolLeft) {
+      <Symbol [name]="symbolLeft" class="symbolLeft" />
+    }
+    <span><ng-content></ng-content></span>
+    @if (symbolRight) {
+      <Symbol [name]="symbolRight" class="symbolRight" />
+    } `,
+                    providers: [{ provide: COMPONENT_NAME, useValue: 'button' }],
+                    imports: [
+                        RippleDirective, // Keep this import
+                        UniIconComponent,
+                        UniBoxComponent,
+                        UniSymbolComponent,
+                    ],
+                    host: {
+                        '[attr.disabled]': 'disable() || loading() || null',
+                    },
+                    hostDirectives: [{ directive: RippleDirective }],
+                }]
+        }], propDecorators: { disable: [{ type: i0.Input, args: [{ isSignal: true, alias: "disable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], symbolLeft: [{
+                type: Input
+            }], symbolRight: [{
+                type: Input
+            }], className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class UniCardContentComponent extends BaseComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCardContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: UniCardContentComponent, isStandalone: true, selector: "uni-card-content, CardContent", providers: [{ provide: COMPONENT_NAME, useValue: 'cardContent' }], usesInheritance: true, ngImport: i0, template: "<div [style]=\"style()\">\n  <ng-content></ng-content>\n</div>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCardContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-card-content, CardContent', standalone: true, imports: [], providers: [{ provide: COMPONENT_NAME, useValue: 'cardContent' }], template: "<div [style]=\"style()\">\n  <ng-content></ng-content>\n</div>\n" }]
+        }] });
+
+class UniTextComponent {
+    theme = inject(ThemeService);
+    typeface = input('title-small', ...(ngDevMode ? [{ debugName: "typeface" }] : /* istanbul ignore next */ []));
+    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
+    display = input(...(ngDevMode ? [undefined, { debugName: "display" }] : /* istanbul ignore next */ []));
+    align = input(...(ngDevMode ? [undefined, { debugName: "align" }] : /* istanbul ignore next */ []));
+    nowrap = input(...(ngDevMode ? [undefined, { debugName: "nowrap" }] : /* istanbul ignore next */ []));
+    maxWidth = input(...(ngDevMode ? [undefined, { debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+    ellipsis = input(false, ...(ngDevMode ? [{ debugName: "ellipsis" }] : /* istanbul ignore next */ []));
+    get className() {
+        return css([
+            {
+                ...this.theme.typeface(this.typeface()),
+                ...this.theme.color(this.color()),
+                display: this.display(),
+            },
+            this.align() && {
+                textAlign: this.align(),
+            },
+            this.nowrap() && {
+                whiteSpace: 'nowrap',
+            },
+            this.maxWidth() && {
+                maxWidth: this.maxWidth(),
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                textOverflow: 'ellipsis',
+                display: 'inline-block',
+            },
+            this.ellipsis() && {
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                minWidth: 0,
+            },
+        ]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniTextComponent, isStandalone: true, selector: "uni-text, Text", inputs: { typeface: { classPropertyName: "typeface", publicName: "typeface", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, nowrap: { classPropertyName: "nowrap", publicName: "nowrap", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTextComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'uni-text, Text',
+                    standalone: true,
+                    imports: [],
+                    template: '<ng-content></ng-content>',
+                }]
+        }], propDecorators: { typeface: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeface", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], nowrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "nowrap", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], ellipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "ellipsis", required: false }] }], className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class UniCardComponent extends BaseComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: UniCardComponent, isStandalone: true, selector: "uni-card, Card", providers: [{ provide: COMPONENT_NAME, useValue: 'card' }], usesInheritance: true, ngImport: i0, template: "<div [style]=\"style()\">\n  <ng-content></ng-content>\n</div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-card, Card', standalone: true, imports: [], providers: [{ provide: COMPONENT_NAME, useValue: 'card' }], template: "<div [style]=\"style()\">\n  <ng-content></ng-content>\n</div>\n" }]
+        }] });
+
+class UniCardHeaderComponent extends BaseComponent {
+    card = inject(UniCardComponent, {
+        optional: true,
+        host: true,
+        skipSelf: true,
+    });
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    titleTextRole = input('title-large', ...(ngDevMode ? [{ debugName: "titleTextRole" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        // this.variant = this.card?.variant;
+    }
+    className = css({
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniCardHeaderComponent, isStandalone: true, selector: "uni-card-header, CardHeader", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleTextRole: { classPropertyName: "titleTextRole", publicName: "titleTextRole", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: COMPONENT_NAME, useValue: 'cardHeader' }], usesInheritance: true, ngImport: i0, template: "<div [style]=\"style()\" [ngClass]=\"className\">\n  <Text [typeface]=\"titleTextRole()\">{{ title() }}</Text>\n  <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: UniTextComponent, selector: "uni-text, Text", inputs: ["typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCardHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-card-header, CardHeader', standalone: true, imports: [UniTextComponent, NgClass], providers: [{ provide: COMPONENT_NAME, useValue: 'cardHeader' }], template: "<div [style]=\"style()\" [ngClass]=\"className\">\n  <Text [typeface]=\"titleTextRole()\">{{ title() }}</Text>\n  <ng-content></ng-content>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], titleTextRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleTextRole", required: false }] }] } });
+
+class UniIconButtonComponent {
+    theme = inject(ThemeService);
+    config = this.theme.component('iconButton');
+    iconName;
+    symbolName;
+    variant = 'ghost';
+    size = 'lg';
+    disable;
+    loading;
+    opticalSize = 24;
+    get className() {
+        const { sizes, colors } = this.config();
+        const sizeConfig = sizes && sizes[this.size];
+        const colorConfig = colors && colors[this.variant];
+        return css([
+            {
+                position: 'relative',
+                overflow: 'hidden',
+                outline: 0,
+                border: 0,
+                cursor: 'pointer',
+                transition: 'all 0.28s ease',
+                borderRadius: 999,
+                display: 'block',
+                '&:disabled': {
+                    cursor: 'not-allowed !important',
+                },
+                '& symbol': {
+                    fontSize: 'inherit',
+                    lineHeight: 'inherit',
+                },
+            },
+            sizeConfig && {
+                ...sizeConfig,
+            },
+            colorConfig && {
+                ...colorConfig,
+            },
+            this.symbolName &&
+                !this.loading && {
+                padding: 0,
+            },
+            this.variant !== 'ghost' && {
+                '&:hover': {
+                    ...this.theme.boxShadow('raised'),
+                },
+            },
+            this.variant === 'ghost' && {
+                '&:hover': {
+                    backgroundColor: 'rgba(0,0,0,0.1)',
+                },
+            },
+            !this.loading && {
+                '&:disabled': {
+                    ...this.config().colors?.disabled,
+                },
+            },
+        ]);
+    }
+    ngOnChanges(changes) {
+        const { sizes, colors } = this.config();
+        const sizeConfig = sizes && sizes[this.size];
+        if (this.loading)
+            this.iconName = 'spinner';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniIconButtonComponent, isStandalone: true, selector: "button[uni-icon-button], button[icon-button]", inputs: { iconName: "iconName", symbolName: "symbolName", variant: "variant", size: "size", disable: "disable", loading: "loading", opticalSize: "opticalSize" }, host: { properties: { "attr.disabled": "disable || loading || null", "class": "this.className" } }, usesOnChanges: true, hostDirectives: [{ directive: RippleDirective }], ngImport: i0, template: `
+    @if (symbolName && !loading) {
+      <Symbol [name]="symbolName" [opticalSize]="opticalSize" />
+    } @else if (iconName && !loading) {
+      <Icon [name]="iconName" />
+    }
+  `, isInline: true, dependencies: [{ 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniIconButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[uni-icon-button], button[icon-button]',
+                    standalone: true,
+                    imports: [
+                        RippleDirective,
+                        UniSymbolComponent,
+                        UniIconComponent,
+                        // Keep this import
+                    ],
+                    template: `
+    @if (symbolName && !loading) {
+      <Symbol [name]="symbolName" [opticalSize]="opticalSize" />
+    } @else if (iconName && !loading) {
+      <Icon [name]="iconName" />
+    }
+  `,
+                    host: {
+                        '[attr.disabled]': 'disable || loading || null',
+                    },
+                    hostDirectives: [{ directive: RippleDirective }],
+                }]
+        }], propDecorators: { iconName: [{
+                type: Input
+            }], symbolName: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], disable: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], opticalSize: [{
+                type: Input
+            }], className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class UniDialogComponent extends BaseComponent {
+    elem = inject(ElementRef);
+    show = input(false, ...(ngDevMode ? [{ debugName: "show" }] : /* istanbul ignore next */ []));
+    _show = linkedSignal(() => this.show(), ...(ngDevMode ? [{ debugName: "_show" }] : /* istanbul ignore next */ []));
+    defaultCloseButton;
+    showing = new EventEmitter();
+    constructor() {
+        super();
+        effect(() => (this._show() ? this.open() : this.close()));
+    }
+    get _dialog() {
+        return this.elem.nativeElement;
+    }
+    get className() {
+        return css([
+            {
+                ...this.theme.radius(this.componentOptions().borderRadius),
+                ...this.theme.colorPair(this.componentOptions().color),
+                ...this.theme.border(this.componentOptions().border),
+                ...this.theme.boxShadow(this.componentOptions().elevation),
+                ...this.theme.padding(this.componentOptions().padding || 'none'),
+                '&::backdrop': {
+                    ...this.componentOptions().backdrop,
+                },
+                '&[open], &::backdrop': {
+                    animation: `${this.dialogFadeIn} ease-in 350ms`,
+                },
+                '&[closing], &[closing]::backdrop': {
+                    animation: `${this.dialogFadeOut} ease-in 350ms`,
+                },
+            },
+        ]);
+    }
+    BackdropClick(event) {
+        if (event.target.nodeName === 'DIALOG') {
+            this.close();
+        }
+    }
+    ClosingAnimation(e) {
+        // Close the dialog if the animation is finished
+        if (e.animationName.includes(this.dialogFadeOut)) {
+            this._dialog.close();
+            this._dialog.removeAttribute('closing');
+            this.showing.emit(false);
+        }
+    }
+    closeButton = css({
+        position: 'absolute',
+        right: 12,
+        top: 12,
+    });
+    dialogFadeIn = keyframes({ ...fadeIn });
+    dialogFadeOut = keyframes({ ...fadeOut });
+    open() {
+        this._dialog.removeAttribute('closing');
+        this._dialog.showModal();
+        this._show.set(true);
+        this.showing.emit(true);
+    }
+    close() {
+        this._dialog.setAttribute('closing', 'true');
+        this._show.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDialogComponent, isStandalone: true, selector: "dialog[uni-dialog], Dialog", inputs: { show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, defaultCloseButton: { classPropertyName: "defaultCloseButton", publicName: "defaultCloseButton", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { showing: "showing" }, host: { listeners: { "click": "BackdropClick($event)", "animationend": "ClosingAnimation($event)" }, properties: { "class": "this.className" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'dialog' }], usesInheritance: true, ngImport: i0, template: `
+    @if (defaultCloseButton) {
+      <button
+        icon-button
+        iconName="close"
+        variant="ghost"
+        (click)="close()"
+        [class]="closeButton"
+        size="md"
+      >
+        Close
+      </button>
+    }
+    <ng-content></ng-content>
+  `, isInline: true, dependencies: [{ kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dialog[uni-dialog], Dialog',
+                    standalone: true,
+                    imports: [UniIconButtonComponent, CommonModule],
+                    template: `
+    @if (defaultCloseButton) {
+      <button
+        icon-button
+        iconName="close"
+        variant="ghost"
+        (click)="close()"
+        [class]="closeButton"
+        size="md"
+      >
+        Close
+      </button>
+    }
+    <ng-content></ng-content>
+  `,
+                    providers: [{ provide: COMPONENT_NAME, useValue: 'dialog' }],
+                }]
+        }], ctorParameters: () => [], propDecorators: { show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }], defaultCloseButton: [{
+                type: Input
+            }], showing: [{
+                type: Output
+            }], className: [{
+                type: HostBinding,
+                args: ['class']
+            }], BackdropClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], ClosingAnimation: [{
+                type: HostListener,
+                args: ['animationend', ['$event']]
+            }] } });
+
+class UniDialogButtonsComponent {
+    dialog = inject(UniDialogComponent, {
+        optional: true,
+        host: true,
+        skipSelf: true,
+    });
+    confirmButtonText;
+    confirmButtonVariant = 'primary';
+    cancelButtonText;
+    disableConfirm;
+    padding = 'md';
+    paddingBottom = 'lg';
+    justifyContent = 'center';
+    confirmed = new EventEmitter();
+    closeDialog() {
+        this.dialog?.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDialogButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: UniDialogButtonsComponent, isStandalone: true, selector: "uni-dialog-buttons, DialogButtons, div[dialog-buttons]", inputs: { confirmButtonText: "confirmButtonText", confirmButtonVariant: "confirmButtonVariant", cancelButtonText: "cancelButtonText", disableConfirm: "disableConfirm", padding: "padding", paddingBottom: "paddingBottom", justifyContent: "justifyContent" }, outputs: { confirmed: "confirmed" }, ngImport: i0, template: "<div\n  row-layout\n  gap=\"md\"\n  [padding]=\"padding\"\n  [paddingBottom]=\"paddingBottom\"\n  [justifyContent]=\"justifyContent\"\n>\n  <button\n    text-button\n    [variant]=\"confirmButtonVariant\"\n    (click)=\"confirmed.emit(); closeDialog()\"\n    [disable]=\"disableConfirm\"\n  >\n    {{ confirmButtonText || 'Confirm' }}\n  </button>\n  <button text-button variant=\"warn\" (click)=\"closeDialog()\">\n    {{ cancelButtonText || 'Cancel' }}\n  </button>\n</div>\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "div[uni-row-layout], Row, div[row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { 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: UniDialogButtonsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-dialog-buttons, DialogButtons, div[dialog-buttons]', standalone: true, imports: [UniRowComponent, UniButtonComponent], template: "<div\n  row-layout\n  gap=\"md\"\n  [padding]=\"padding\"\n  [paddingBottom]=\"paddingBottom\"\n  [justifyContent]=\"justifyContent\"\n>\n  <button\n    text-button\n    [variant]=\"confirmButtonVariant\"\n    (click)=\"confirmed.emit(); closeDialog()\"\n    [disable]=\"disableConfirm\"\n  >\n    {{ confirmButtonText || 'Confirm' }}\n  </button>\n  <button text-button variant=\"warn\" (click)=\"closeDialog()\">\n    {{ cancelButtonText || 'Cancel' }}\n  </button>\n</div>\n" }]
+        }], propDecorators: { confirmButtonText: [{
+                type: Input
+            }], confirmButtonVariant: [{
+                type: Input
+            }], cancelButtonText: [{
+                type: Input
+            }], disableConfirm: [{
+                type: Input
+            }], padding: [{
+                type: Input
+            }], paddingBottom: [{
+                type: Input
+            }], justifyContent: [{
+                type: Input
+            }], confirmed: [{
+                type: Output
+            }] } });
+
+class UniDialogHeaderComponent extends BaseComponent {
+    dialog = inject(UniDialogComponent, {
+        optional: true,
+        host: true,
+        skipSelf: true,
+    });
+    closeDialog() {
+        this.dialog?.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDialogHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: UniDialogHeaderComponent, isStandalone: true, selector: "div[uni-dialog-header], DialogHeader", providers: [{ provide: COMPONENT_NAME, useValue: 'dialogHeader' }], usesInheritance: true, ngImport: i0, template: "<div\n  row-layout\n  [color]=\"componentOptions().color\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  [height]=\"componentOptions().height\"\n  alignItems=\"center\"\n  paddingHorizontal=\"sm\"\n>\n  <Box [width]=\"26\"></Box>\n  <Box [grow]=\"1\">\n    <Text\n      [typeface]=\"componentOptions().textRole\"\n      [color]=\"componentOptions().textColor\"\n      display=\"block\"\n      [align]=\"componentOptions().textAlign || 'center'\"\n      ><ng-content></ng-content\n    ></Text>\n  </Box>\n  <button\n    icon-button\n    [iconName]=\"componentOptions().closeButtonIcon\"\n    [symbolName]=\"componentOptions().closeButtonSymbol\"\n    variant=\"ghost\"\n    (click)=\"closeDialog()\"\n    [size]=\"componentOptions().closeButtonSize || 'md'\"\n  >\n    Close\n  </button>\n</div>\n", dependencies: [{ 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: 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: UniRowComponent, selector: "div[uni-row-layout], Row, div[row-layout]", inputs: ["display", "flexDirection", "minWidth"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDialogHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'div[uni-dialog-header], DialogHeader', standalone: true, imports: [UniBoxComponent, UniIconButtonComponent, UniTextComponent, UniRowComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'dialogHeader' }], template: "<div\n  row-layout\n  [color]=\"componentOptions().color\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  [height]=\"componentOptions().height\"\n  alignItems=\"center\"\n  paddingHorizontal=\"sm\"\n>\n  <Box [width]=\"26\"></Box>\n  <Box [grow]=\"1\">\n    <Text\n      [typeface]=\"componentOptions().textRole\"\n      [color]=\"componentOptions().textColor\"\n      display=\"block\"\n      [align]=\"componentOptions().textAlign || 'center'\"\n      ><ng-content></ng-content\n    ></Text>\n  </Box>\n  <button\n    icon-button\n    [iconName]=\"componentOptions().closeButtonIcon\"\n    [symbolName]=\"componentOptions().closeButtonSymbol\"\n    variant=\"ghost\"\n    (click)=\"closeDialog()\"\n    [size]=\"componentOptions().closeButtonSize || 'md'\"\n  >\n    Close\n  </button>\n</div>\n" }]
+        }] });
+
+class UniDividerComponent {
+    themeService = inject(ThemeService);
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    border = input('primary', ...(ngDevMode ? [{ debugName: "border" }] : /* istanbul ignore next */ []));
+    get className() {
+        return css([
+            {
+                display: 'block',
+            },
+            this.orientation() === 'horizontal' && {
+                ...this.themeService.borderBottom(this.border()),
+                width: '100%',
+            },
+            this.orientation() === 'vertical' && {
+                ...this.themeService.borderLeft(this.border()),
+                height: '100%',
+            },
+        ]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniDividerComponent, isStandalone: true, selector: "uni-divider, Divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDividerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'uni-divider, Divider',
+                    standalone: true,
+                    imports: [],
+                    template: ``,
+                }]
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class UniDropdownComponent extends BaseComponent {
+    renderer = inject(Renderer2);
+    cleanupAutoUpdate;
+    delay = 100;
+    // Reactively track visibility status using Signals
+    showing = signal(false, ...(ngDevMode ? [{ debugName: "showing" }] : /* istanbul ignore next */ []));
+    trigger = input.required(...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+    placement = input('bottom-start', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    offset = input({ mainAxis: 4, alignmentAxis: 12 }, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    paddingVertical = input(...(ngDevMode ? [undefined, { debugName: "paddingVertical" }] : /* istanbul ignore next */ []));
+    paddingHorizontal = input(...(ngDevMode ? [undefined, { debugName: "paddingHorizontal" }] : /* istanbul ignore next */ []));
+    dropdownShowing = output();
+    dropdownHiding = output();
+    dropdownRef;
+    get _trigger() {
+        return this.trigger();
+    }
+    get _dropdown() {
+        return this.dropdownRef.nativeElement;
+    }
+    transformOriginMap = {
+        top: 'bottom center',
+        right: 'center left',
+        bottom: 'top center',
+        left: 'center right',
+        'top-start': 'bottom left',
+        'top-end': 'bottom right',
+        'right-start': 'top left',
+        'right-end': 'bottom left',
+        'bottom-start': 'top left',
+        'bottom-end': 'top right',
+        'left-start': 'top right',
+        'left-end': 'bottom right',
+    };
+    dropdownClass = computed(() => {
+        const currentPlacement = this.placement();
+        return css([
+            {
+                // Reset browser agent default popover styles
+                border: 'none',
+                background: 'transparent',
+                margin: 0,
+                padding: 0,
+                overflow: 'visible',
+                width: 'max-content',
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                zIndex: 1,
+                // 2. Animate discrete properties across top layer layout contexts
+                transitionProperty: 'transform, opacity, display, overlay',
+                transitionDuration: `${this.delay}ms`,
+                transitionTimingFunction: 'linear',
+                transitionBehavior: 'allow-discrete',
+                // Hidden State (Closed)
+                opacity: 0,
+                transform: 'scale(0.8)',
+                transformOrigin: this.transformOriginMap[currentPlacement],
+                // 3. Active state styling controlled via the native browser pseudo-class
+                ['&:popover-open']: {
+                    opacity: 1,
+                    transform: 'scale(1)',
+                },
+                // 4. Starting-style rules what properties animate *from* when transitioning in
+                ['@starting-style']: {
+                    ['&:popover-open']: {
+                        opacity: 0,
+                        transform: 'scale(0.8)',
+                    },
+                },
+            },
+        ]);
+    }, ...(ngDevMode ? [{ debugName: "dropdownClass" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        // Single native click binding to manage open/close commands
+        this.renderer.listen(this._trigger, 'click', (e) => {
+            e.stopPropagation();
+            this.toggleDropdown();
+        });
+        // Sync state if user invokes light-dismiss via outside click or Escape key
+        this.renderer.listen(this._dropdown, 'toggle', (event) => {
+            const isOpened = event.newState === 'open';
+            this.showing.set(isOpened);
+            if (isOpened) {
+                this.dropdownShowing.emit(true);
+                this.cleanupAutoUpdate = autoUpdate(this._trigger, this._dropdown, () => this.updatePosition());
+            }
+            else {
+                this.dropdownHiding.emit(true);
+                if (this.cleanupAutoUpdate) {
+                    this.cleanupAutoUpdate();
+                    this.cleanupAutoUpdate = undefined;
+                }
+            }
+        });
+    }
+    toggleDropdown() {
+        if (this.showing()) {
+            this._dropdown.hidePopover();
+        }
+        else {
+            this._dropdown.showPopover();
+        }
+    }
+    hideDropdown() {
+        this._dropdown.hidePopover();
+    }
+    async updatePosition() {
+        const { x, y } = await computePosition(this._trigger, this._dropdown, {
+            placement: this.placement(),
+            middleware: [offset(this.offset()), shift({ padding: 5 })],
+        });
+        this.renderer.setStyle(this._dropdown, 'left', `${x}px`);
+        this.renderer.setStyle(this._dropdown, 'top', `${y}px`);
+    }
+    ngOnDestroy() {
+        if (this.cleanupAutoUpdate)
+            this.cleanupAutoUpdate();
+        try {
+            this._dropdown.hidePopover();
+        }
+        catch { }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniDropdownComponent, isStandalone: true, selector: "uni-dropdown, Dropdown", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, paddingVertical: { classPropertyName: "paddingVertical", publicName: "paddingVertical", isSignal: true, isRequired: false, transformFunction: null }, paddingHorizontal: { classPropertyName: "paddingHorizontal", publicName: "paddingHorizontal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropdownShowing: "dropdownShowing", dropdownHiding: "dropdownHiding" }, providers: [{ provide: COMPONENT_NAME, useValue: 'dropdown' }], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    <!-- 1. The native 'popover' attribute brings it to the top layer with native light-dismiss -->
+    <div #dropdown popover="auto" [class]="dropdownClass()">
+      <div
+        box-layout
+        [border]="componentOptions().border"
+        [borderRadius]="componentOptions().borderRadius"
+        [paddingVertical]="paddingVertical()"
+        [paddingHorizontal]="paddingHorizontal()"
+        [color]="componentOptions().color"
+        [shadow]="componentOptions().shadow"
+      >
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDropdownComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'uni-dropdown, Dropdown',
+                    standalone: true,
+                    imports: [UniBoxComponent],
+                    template: `
+    <!-- 1. The native 'popover' attribute brings it to the top layer with native light-dismiss -->
+    <div #dropdown popover="auto" [class]="dropdownClass()">
+      <div
+        box-layout
+        [border]="componentOptions().border"
+        [borderRadius]="componentOptions().borderRadius"
+        [paddingVertical]="paddingVertical()"
+        [paddingHorizontal]="paddingHorizontal()"
+        [color]="componentOptions().color"
+        [shadow]="componentOptions().shadow"
+      >
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `,
+                    providers: [{ provide: COMPONENT_NAME, useValue: 'dropdown' }],
+                }]
+        }], propDecorators: { trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], paddingVertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingVertical", required: false }] }], paddingHorizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingHorizontal", required: false }] }], dropdownShowing: [{ type: i0.Output, args: ["dropdownShowing"] }], dropdownHiding: [{ type: i0.Output, args: ["dropdownHiding"] }], dropdownRef: [{
+                type: ViewChild,
+                args: ['dropdown', { static: true }]
+            }] } });
+
+class UniMenuItemComponent extends UniBoxComponent {
+    _elementRef = inject(ElementRef);
+    display = input('flex', ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
+    flexDirection = input('row', ...(ngDevMode ? [{ debugName: "flexDirection" }] : /* istanbul ignore next */ []));
+    alignItems = input('center', ...(ngDevMode ? [{ debugName: "alignItems" }] : /* istanbul ignore next */ []));
+    paddingHorizontal = input('md', ...(ngDevMode ? [{ debugName: "paddingHorizontal" }] : /* istanbul ignore next */ []));
+    gap = input('md', ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    template = input(...(ngDevMode ? [undefined, { debugName: "template" }] : /* istanbul ignore next */ []));
+    context = input(...(ngDevMode ? [undefined, { debugName: "context" }] : /* istanbul ignore next */ []));
+    symbolName = input(...(ngDevMode ? [undefined, { debugName: "symbolName" }] : /* istanbul ignore next */ []));
+    active = input(...(ngDevMode ? [undefined, { debugName: "active" }] : /* istanbul ignore next */ []));
+    hoverColor = input('primary-container', ...(ngDevMode ? [{ debugName: "hoverColor" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    get className() {
+        return css([
+            {
+                cursor: 'pointer',
+                transition: 'all 0.35s ease',
+                height: 38,
+                '&:hover': {
+                    ...this.theme.colorPair(this.hoverColor()),
+                },
+            },
+        ]);
+    }
+    focus() {
+        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"] }] });
+}
+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"] }]
+        }], 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']
+            }] } });
+
+class UniMenuComponent {
+    cdr = inject(ChangeDetectorRef);
+    // Modern Signal Inputs for perfect Zoneless tracking
+    menuItems = input.required(...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
+    activeItem = input(...(ngDevMode ? [undefined, { debugName: "activeItem" }] : /* istanbul ignore next */ []));
+    placement = input('bottom-start', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    // Modern Signal Output
+    menuItemClicked = output();
+    TriggerClassName = css({ display: 'inline-block' });
+    get className() {
+        return css({
+            margin: 'unset',
+            padding: 'unset',
+        });
+    }
+    handleMenuItemClick(item, dropdown) {
+        if (item.action) {
+            item.action();
+        }
+        this.menuItemClicked.emit(item);
+        dropdown.hideDropdown();
+        // Explicitly request a render tick if item.action() updated any internal state
+        this.cdr.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMenuComponent, isStandalone: true, selector: "Menu, uni-menu", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: true, transformFunction: null }, activeItem: { classPropertyName: "activeItem", publicName: "activeItem", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClicked: "menuItemClicked" }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: `
+    <div #trigger [class]="TriggerClassName">
+      <ng-content></ng-content>
+    </div>
+
+    @if (menuItems()) {
+      <Dropdown [trigger]="trigger" [placement]="placement()" paddingVertical="xs" #dropdown>
+        @for (item of menuItems(); track item) {
+          <div
+            menu-item
+            [label]="item.label"
+            [symbolName]="item.symbolName"
+            [active]="activeItem() === item"
+            [template]="item.template"
+            [context]="item.context"
+            (click)="handleMenuItemClick(item, dropdown)"
+          ></div>
+        }
+      </Dropdown>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: UniMenuItemComponent, selector: "div[uni-menu-item], div[menu-item]", inputs: ["display", "flexDirection", "alignItems", "paddingHorizontal", "gap", "label", "template", "context", "symbolName", "active", "hoverColor", "disabled"] }, { kind: "component", type: UniDropdownComponent, selector: "uni-dropdown, Dropdown", inputs: ["trigger", "placement", "offset", "paddingVertical", "paddingHorizontal"], outputs: ["dropdownShowing", "dropdownHiding"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Menu, uni-menu',
+                    standalone: true,
+                    imports: [UniMenuItemComponent, UniDropdownComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush, // Crucial for zoneless
+                    template: `
+    <div #trigger [class]="TriggerClassName">
+      <ng-content></ng-content>
+    </div>
+
+    @if (menuItems()) {
+      <Dropdown [trigger]="trigger" [placement]="placement()" paddingVertical="xs" #dropdown>
+        @for (item of menuItems(); track item) {
+          <div
+            menu-item
+            [label]="item.label"
+            [symbolName]="item.symbolName"
+            [active]="activeItem() === item"
+            [template]="item.template"
+            [context]="item.context"
+            (click)="handleMenuItemClick(item, dropdown)"
+          ></div>
+        }
+      </Dropdown>
+    }
+  `,
+                }]
+        }], propDecorators: { menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: true }] }], activeItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeItem", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], menuItemClicked: [{ type: i0.Output, args: ["menuItemClicked"] }], className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class UniTooltipComponent extends BaseComponent {
+    elRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    timer = useTimer();
+    hoverDelayMs = signal(500, ...(ngDevMode ? [{ debugName: "hoverDelayMs" }] : /* istanbul ignore next */ []));
+    isMouseInside = signal(false, ...(ngDevMode ? [{ debugName: "isMouseInside" }] : /* istanbul ignore next */ []));
+    tooltip;
+    arrow;
+    hoverDelay = input(500, ...(ngDevMode ? [{ debugName: "hoverDelay" }] : /* istanbul ignore next */ []));
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placement = input('top', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    inlineText = input(false, ...(ngDevMode ? [{ debugName: "inlineText" }] : /* istanbul ignore next */ []));
+    appendToBody;
+    constructor() {
+        super();
+        effect(() => {
+            const timerActive = this.timer.isActive();
+            const mouseInside = this.isMouseInside();
+            // If the timer finished and the mouse is still inside, show tooltip
+            if (!timerActive && mouseInside) {
+                this.showTooltip();
+            }
+            // If the mouse left and the timer is not running, hide tooltip
+            else if (!mouseInside) {
+                this.hideTooltip();
+            }
+        });
+    }
+    toggleTooltip() {
+        if (this.tooltip) {
+            this.hideTooltip();
+        }
+        else {
+            this.showTooltip();
+        }
+    }
+    mouseenter() {
+        this.isMouseInside.set(true);
+        this.timer.start(this.hoverDelayMs());
+    }
+    mouseleave() {
+        this.isMouseInside.set(false);
+        this.timer.stop();
+    }
+    showTooltip() {
+        if (this.tooltip)
+            return;
+        this.initializeTooltip();
+        this.renderer.setAttribute(this.tooltip, 'fade', 'in');
+    }
+    hideTooltip() {
+        if (!this.tooltip)
+            return;
+        this.renderer.setAttribute(this.tooltip, 'fade', 'out');
+    }
+    get className() {
+        return css({
+            display: 'inline-flex',
+        }, this.inlineText() && {
+            cursor: 'help',
+            textDecoration: 'underline',
+            textDecorationStyle: 'dotted',
+        });
+    }
+    tooltipFadeIn = keyframes({ ...fadeIn });
+    tooltipFadeOut = keyframes({ ...fadeOut });
+    tooltipClassName = css([
+        {
+            ...this.theme.colorPair(this.componentOptions().color),
+            ...this.theme.radius(this.componentOptions().borderRadius),
+            ...this.theme.boxShadow(this.componentOptions().shadow),
+            ...this.theme.typeface(this.componentOptions().typeface),
+            padding: 5,
+            width: 'max-content',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            zIndex: Z_INDEX.tooltip,
+            '&[fade="in"]': {
+                animation: `${this.tooltipFadeIn} ease-in 350ms`,
+            },
+            '&[fade="out"]': {
+                animation: `${this.tooltipFadeOut} ease-in 350ms`,
+            },
+        },
+    ]);
+    arrowClassName = css({
+        position: 'absolute',
+        ...this.theme.colorPair(this.componentOptions().color),
+        width: 8,
+        height: 8,
+        transform: 'rotate(45deg)',
+    });
+    createTooltip() {
+        this.tooltip = this.renderer.createElement('span');
+        this.renderer.appendChild(this.tooltip, this.renderer.createText(this.label()) // textNode
+        );
+        this.renderer.appendChild(this.appendToBody ? document.body : this.elRef.nativeElement, this.tooltip);
+        this.renderer.addClass(this.tooltip, this.tooltipClassName);
+        this.renderer.listen(this.tooltip, 'animationend', (event) => {
+            if (event.animationName.includes(this.tooltipFadeOut))
+                this.destroyTooltip();
+        });
+    }
+    createArrow() {
+        this.arrow = this.renderer.createElement('div');
+        this.renderer.appendChild(this.tooltip, this.arrow);
+        this.renderer.addClass(this.arrow, this.arrowClassName);
+    }
+    setPosition() {
+        if (!this.tooltip || !this.arrow)
+            return;
+        computePosition(this.elRef.nativeElement, this.tooltip, {
+            placement: this.placement(),
+            middleware: [offset(6), flip(), shift({ padding: 5 }), arrow({ element: this.arrow })],
+        }).then(({ x, y, placement, middlewareData }) => {
+            this.renderer.setStyle(this.tooltip, 'top', `${y}px`);
+            this.renderer.setStyle(this.tooltip, 'left', `${x}px`);
+            // Accessing the data
+            const arrowX = middlewareData.arrow?.x;
+            const arrowY = middlewareData.arrow?.y;
+            const staticSide = {
+                top: 'bottom',
+                right: 'left',
+                bottom: 'top',
+                left: 'right',
+            }[placement.split('-')[0]];
+            this.renderer.setStyle(this.arrow, 'top', `${arrowY}px`);
+            this.renderer.setStyle(this.arrow, 'left', `${arrowX}px`);
+            this.renderer.setStyle(this.arrow, 'right', ``);
+            this.renderer.setStyle(this.arrow, 'bottom', ``);
+            if (staticSide) {
+                this.renderer.setStyle(this.arrow, staticSide, `-4px`);
+            }
+        });
+    }
+    initializeTooltip() {
+        this.createTooltip();
+        this.createArrow();
+        this.setPosition();
+    }
+    destroyTooltip() {
+        this.renderer.removeChild(this.appendToBody ? document.body : this.elRef.nativeElement, this.tooltip);
+        this.renderer.removeChild(this.appendToBody ? document.body : this.elRef.nativeElement, this.arrow);
+        this.tooltip = null;
+        this.arrow = null;
+    }
+    ngOnDestroy() {
+        this.hideTooltip();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniTooltipComponent, isStandalone: true, selector: "uni-tooltip, Tooltip", inputs: { hoverDelay: { classPropertyName: "hoverDelay", publicName: "hoverDelay", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, inlineText: { classPropertyName: "inlineText", publicName: "inlineText", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: false, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "toggleTooltip()", "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, properties: { "class": "this.className" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'tooltip' }], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTooltipComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'uni-tooltip, Tooltip',
+                    standalone: true,
+                    imports: [],
+                    template: `<ng-content></ng-content>`,
+                    providers: [{ provide: COMPONENT_NAME, useValue: 'tooltip' }],
+                    host: {
+                        '(click)': 'toggleTooltip()',
+                        '(mouseenter)': 'mouseenter()',
+                        '(mouseleave)': 'mouseleave()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { hoverDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverDelay", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], inlineText: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlineText", required: false }] }], appendToBody: [{
                 type: Input
+            }], className: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
+//export * from './background';
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { UniButtonComponent };
+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 };
 //# sourceMappingURL=uni-design-system-uni-angular.mjs.map