@uni-design-system/uni-angular 3.0.2 → 4.0.0

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

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { signal, computed, linkedSignal, resource, Injectable, inject, DestroyRef, InjectionToken, input, Component, HostBinding, Input, Renderer2, ElementRef, HostListener, Directive, EventEmitter, effect, Output, output, ViewChild, ChangeDetectorRef, ChangeDetectionStrategy, model } from '@angular/core';
+import { signal, computed, linkedSignal, resource, Injectable, inject, DestroyRef, InjectionToken, input, HostBinding, Component, Input, Renderer2, ElementRef, HostListener, Directive, model, effect, output, viewChild, afterNextRender, EventEmitter, 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 { UniThemes, LightTheme, Z_INDEX, fadeIn, fadeOut, expandFadeIn, collapseFadeOut, removeInputPlatformStyling } from '@uni-design-system/uni-core';
+import { NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
 import { autoUpdate, computePosition, offset, shift, flip, arrow } from '@floating-ui/dom';
 
 class UniBaseDatasource {
@@ -489,6 +489,13 @@ function useTimer() {
     };
 }
 
+const acceptableFile = (file, acceptedFileExtensions) => {
+    if (!acceptedFileExtensions || acceptedFileExtensions.length < 1)
+        return true;
+    return acceptedFileExtensions.includes(getFileExtension(file));
+};
+const getFileExtension = (file) => '.' + file.name.split('.').pop();
+
 const UNI_THEMES = new InjectionToken('', {
     providedIn: 'root',
     factory: () => UniThemes,
@@ -694,6 +701,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+class UniBackgroundComponent {
+    theme = inject(ThemeService);
+    image = input(...(ngDevMode ? [undefined, { debugName: "image" }] : /* istanbul ignore next */ []));
+    imagePosition = input(...(ngDevMode ? [undefined, { debugName: "imagePosition" }] : /* istanbul ignore next */ []));
+    imageSize = input(...(ngDevMode ? [undefined, { debugName: "imageSize" }] : /* istanbul ignore next */ []));
+    height = input('100%', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
+    get className() {
+        return css([
+            {
+                backgroundRepeat: 'no-repeat',
+                display: 'block',
+                ...this.theme.backgroundImage(this.image()),
+            },
+            this.theme.style('backgroundPosition', this.imagePosition()),
+            this.theme.style('backgroundSize', this.imageSize()),
+            this.theme.style('height', this.height()),
+            this.theme.style('width', this.width()),
+        ]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniBackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniBackgroundComponent, isStandalone: true, selector: "uni-background, Background", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, imagePosition: { classPropertyName: "imagePosition", publicName: "imagePosition", isSignal: true, isRequired: false, transformFunction: null }, imageSize: { classPropertyName: "imageSize", publicName: "imageSize", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", 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: UniBackgroundComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'uni-background, Background',
+                    standalone: true,
+                    imports: [],
+                    template: `<ng-content></ng-content>`,
+                }]
+        }], propDecorators: { image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], imagePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "imagePosition", required: false }] }], imageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageSize", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * Background Component Barrel File
+ *
+ * This file exports all public-facing elements of the background component.
+ */
+
 const COMPONENT_NAME = new InjectionToken('');
 class BaseComponent {
     componentName = inject(COMPONENT_NAME);
@@ -1311,6 +1360,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 args: ['class']
             }] } });
 
+class UniButtonGroupComponent {
+    themeService = inject(ThemeService);
+    get className() {
+        return css({
+            display: 'inline-flex',
+            '& button': {
+                ...this.themeService.border('quaternary'),
+                marginRight: -1,
+            },
+            '& button:first-child': {
+                borderTopLeftRadius: 4,
+                borderBottomLeftRadius: 4,
+                borderTopRightRadius: 0,
+                borderBottomRightRadius: 0,
+            },
+            '& button:not(:first-child):not(:last-child)': {
+                borderTopLeftRadius: 0,
+                borderBottomLeftRadius: 0,
+                borderTopRightRadius: 0,
+                borderBottomRightRadius: 0,
+            },
+            '& button:last-child': {
+                borderTopLeftRadius: 0,
+                borderBottomLeftRadius: 0,
+                borderTopRightRadius: 4,
+                borderBottomRightRadius: 4,
+                marginRight: 0,
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: UniButtonGroupComponent, isStandalone: true, selector: "uni-button-group, ButtonGroup", 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: UniButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'uni-button-group, ButtonGroup',
+                    standalone: true,
+                    imports: [],
+                    template: ` <ng-content></ng-content>`,
+                }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * UniButtonGroupComponent Barrel File
+ *
+ * This file exports all public-facing elements of the button-group component.
+ */
+
 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: [""] });
@@ -1407,6 +1508,171 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
             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 UniCheckboxComponent extends BaseComponent {
+    checkboxLabel;
+    checkboxInput;
+    // --- REQUIRED SIGNALS (populated by FormCheckboxControl) ---
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    // --- CONFIGURATION ---
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    // Only show errors if the user has actually interacted with the field
+    showError = computed(() => this.invalid() && (this.touched() || this.dirty()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    markAsTouched() {
+        this.touched.set(true);
+    }
+    constructor() {
+        super();
+        effect(() => {
+            this.checkboxLabel = css({
+                userSelect: 'none',
+                cursor: this.disabled() ? 'not-allowed' : 'pointer',
+                marginBottom: 0,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+                opacity: this.disabled() ? 0.6 : 1,
+                '&:hover .checkbox svg path': this.disabled()
+                    ? {}
+                    : {
+                        strokeDashoffset: 0,
+                    },
+                '& .checkbox': {
+                    height: this.componentOptions().size,
+                    width: this.componentOptions().size,
+                },
+                '& .checkbox svg': {
+                    display: 'block',
+                },
+                '& .checkbox svg .checkbox-box': {
+                    fill: '#FFF',
+                    stroke: this.getThemeColor(this.variant()),
+                    strokeWidth: 2,
+                    rx: this.componentOptions().borderRadius || 2,
+                    ry: this.componentOptions().borderRadius || 2,
+                    transition: 'all 0.2s ease',
+                },
+                '& .checkbox svg .checkbox-check': {
+                    fill: 'none',
+                    stroke: '#FFF',
+                    strokeWidth: 2,
+                    strokeLinecap: 'round',
+                    strokeLinejoin: 'round',
+                    strokeDasharray: 18,
+                    strokeDashoffset: 18,
+                    transition: 'all 0.5s ease',
+                },
+            });
+            this.checkboxInput = css({
+                position: 'absolute',
+                zIndex: -1,
+                width: 0,
+                height: 0,
+                opacity: 0,
+                '&:checked + .checkbox': {
+                    borderColor: this.getThemeColor(this.variant()),
+                },
+                '&:checked + .checkbox svg .checkbox-box': {
+                    fill: this.getThemeColor(this.variant()),
+                },
+                '&:checked + .checkbox svg .checkbox-check': {
+                    strokeDashoffset: 0,
+                },
+                '&:disabled + .checkbox': {
+                    cursor: 'not-allowed',
+                },
+                '&:focus + .checkbox': {
+                    position: 'relative',
+                    '&::after': {
+                        content: '""',
+                        position: 'absolute',
+                        top: '-4px',
+                        left: '-4px',
+                        right: '-4px',
+                        bottom: '-4px',
+                        border: `2px solid ${this.getThemeColor(this.variant())}`,
+                        borderRadius: `${(Number(this.componentOptions().borderRadius) || 2) + 4}px`,
+                        pointerEvents: 'none',
+                    },
+                },
+            });
+        });
+    }
+    getThemeColor(token) {
+        const colors = this.theme.colors();
+        return colors[token] ? colors[token] : colors['primary'];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniCheckboxComponent, isStandalone: true, selector: "uni-checkbox, Checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange" }, providers: [{ provide: COMPONENT_NAME, useValue: 'checkbox' }], usesInheritance: true, ngImport: i0, template: "<label [class]=\"checkboxLabel\">\n  <input\n    type=\"checkbox\"\n    [class]=\"checkboxInput\"\n    [checked]=\"checked()\"\n    (change)=\"checked.set($any($event.target).checked); markAsTouched()\"\n    [disabled]=\"disabled()\"\n  />\n  <div class=\"checkbox\">\n    <svg viewBox=\"0 0 20 20\">\n      <rect class=\"checkbox-box\" x=\"1\" y=\"1\" width=\"18\" height=\"18\"></rect>\n      <polyline class=\"checkbox-check\" points=\"4 11 8 15 16 6\"></polyline>\n    </svg>\n  </div>\n  @if (label()) {\n    <Text typeface=\"label\">{{ label() }}</Text>\n  }\n</label>\n", dependencies: [{ kind: "component", type: UniTextComponent, selector: "uni-text, Text", inputs: ["typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-checkbox, Checkbox', standalone: true, imports: [UniTextComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'checkbox' }], template: "<label [class]=\"checkboxLabel\">\n  <input\n    type=\"checkbox\"\n    [class]=\"checkboxInput\"\n    [checked]=\"checked()\"\n    (change)=\"checked.set($any($event.target).checked); markAsTouched()\"\n    [disabled]=\"disabled()\"\n  />\n  <div class=\"checkbox\">\n    <svg viewBox=\"0 0 20 20\">\n      <rect class=\"checkbox-box\" x=\"1\" y=\"1\" width=\"18\" height=\"18\"></rect>\n      <polyline class=\"checkbox-check\" points=\"4 11 8 15 16 6\"></polyline>\n    </svg>\n  </div>\n  @if (label()) {\n    <Text typeface=\"label\">{{ label() }}</Text>\n  }\n</label>\n" }]
+        }], ctorParameters: () => [], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+class BodyRenderDirective {
+    el = inject(ElementRef);
+    renderer = inject(Renderer2);
+    ngOnInit() {
+        const element = this.el.nativeElement;
+        this.renderer.appendChild(document.body, element);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: BodyRenderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.12", type: BodyRenderDirective, isStandalone: true, selector: "[uniBodyRender]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: BodyRenderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[uniBodyRender]',
+                }]
+        }] });
+
+class DragAndDropDirective {
+    onFileDropped = output();
+    workspaceOpacity = signal('1', ...(ngDevMode ? [{ debugName: "workspaceOpacity" }] : /* istanbul ignore next */ []));
+    // Dragover listener, when files are dragged over our host element
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.workspaceOpacity.set('0.5');
+    }
+    // Dragleave listener, when files are dragged away from our host element
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.workspaceOpacity.set('1');
+    }
+    // Drop listener, when files are dropped on our host element
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.workspaceOpacity.set('1');
+        const files = event.dataTransfer?.files;
+        if (files && files.length > 0) {
+            this.onFileDropped.emit(files);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DragAndDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.12", type: DragAndDropDirective, isStandalone: true, selector: "[uni-drag-n-drop], [dragAndDrop]", outputs: { onFileDropped: "onFileDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "style.opacity": "workspaceOpacity()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DragAndDropDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uni-drag-n-drop], [dragAndDrop]',
+                    standalone: true,
+                    host: {
+                        '[style.opacity]': 'workspaceOpacity()',
+                        '(dragover)': 'onDragOver($event)',
+                        '(dragleave)': 'onDragLeave($event)',
+                        '(drop)': 'onDrop($event)',
+                    },
+                }]
+        }], propDecorators: { onFileDropped: [{ type: i0.Output, args: ["onFileDropped"] }] } });
+
 class UniIconButtonComponent {
     theme = inject(ThemeService);
     config = this.theme.component('iconButton');
@@ -1523,6 +1789,488 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 args: ['class']
             }] } });
 
+class UniDataSearchComponent extends BaseComponent {
+    datasource = input(...(ngDevMode ? [undefined, { debugName: "datasource" }] : /* istanbul ignore next */ []));
+    placeholder = input('Search', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    fields = input(...(ngDevMode ? [undefined, { debugName: "fields" }] : /* istanbul ignore next */ []));
+    searchValue = signal('', ...(ngDevMode ? [{ debugName: "searchValue" }] : /* istanbul ignore next */ []));
+    inputClassName;
+    constructor() {
+        super();
+        effect(() => {
+            this.inputClassName = css({
+                border: 'none',
+                padding: 0,
+                fontSize: 16,
+                flexGrow: 1,
+                height: 18,
+                '&:focus-visible': {
+                    outline: 'none',
+                },
+                '&::placeholder': {
+                    ...this.theme.color(this.componentOptions().placeholderColor),
+                },
+            });
+        });
+    }
+    onInput(event) {
+        const value = event.target.value;
+        this.searchValue.set(value);
+        this.filterData(value);
+    }
+    filterData(value) {
+        const datasource = this.datasource();
+        if (!datasource)
+            return;
+        const fields = this.fields();
+        if (datasource instanceof UniRecordDatasource) {
+            // Client-side filtering with predicate function
+            datasource.setFilter((object) => {
+                let searchObject = object;
+                if (fields && fields.length > 0) {
+                    searchObject = pick(object, fields);
+                }
+                return Object.values(searchObject)
+                    .join(' ')
+                    .toLowerCase()
+                    .includes(value.toLowerCase());
+            });
+        }
+        else if (datasource instanceof UniServerSideDatasource) {
+            // Server-side filtering with filter object
+            const filterObject = {};
+            if (fields && fields.length > 0) {
+                // Apply search to specific fields
+                fields.forEach((field) => {
+                    filterObject[field] = value;
+                });
+            }
+            else {
+                // Generic search filter
+                filterObject['search'] = value;
+            }
+            datasource.setFilter(filterObject);
+        }
+    }
+    clearFilter() {
+        const datasource = this.datasource();
+        if (!datasource)
+            return;
+        if (datasource instanceof UniRecordDatasource) {
+            datasource.setFilter(() => true);
+        }
+        else if (datasource instanceof UniServerSideDatasource) {
+            datasource.clearFilter();
+        }
+        this.searchValue.set('');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDataSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDataSearchComponent, isStandalone: true, selector: "uni-data-search", inputs: { datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: COMPONENT_NAME, useValue: 'dataSearch' }], usesInheritance: true, ngImport: i0, template: "<div\n  row-layout\n  alignItems=\"center\"\n  [border]=\"componentOptions().border\"\n  [height]=\"26\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  paddingLeft=\"xs\"\n>\n  <div center-layout [height]=\"18\" [width]=\"18\" paddingRight=\"xs\">\n    <uni-icon name=\"search\" />\n  </div>\n  <input\n    type=\"text\"\n    (input)=\"onInput($event)\"\n    [class]=\"inputClassName\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"searchValue()\"\n  />\n  <div row-layout alignItems=\"center\" [width]=\"22\">\n    @if (!!searchValue()) {\n      <button icon-button (click)=\"clearFilter()\" symbolName=\"close\" size=\"sm\">\n        Clear Search\n      </button>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "div[uni-row-layout], Row, div[row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon, Icon", inputs: ["color", "name"] }, { kind: "component", type: UniCenterComponent, selector: "div[uni-center-layout], div[center-layout]", inputs: ["display", "justifyContent", "alignItems"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDataSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-data-search', imports: [UniRowComponent, UniIconButtonComponent, UniIconComponent, UniCenterComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'dataSearch' }], template: "<div\n  row-layout\n  alignItems=\"center\"\n  [border]=\"componentOptions().border\"\n  [height]=\"26\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  paddingLeft=\"xs\"\n>\n  <div center-layout [height]=\"18\" [width]=\"18\" paddingRight=\"xs\">\n    <uni-icon name=\"search\" />\n  </div>\n  <input\n    type=\"text\"\n    (input)=\"onInput($event)\"\n    [class]=\"inputClassName\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"searchValue()\"\n  />\n  <div row-layout alignItems=\"center\" [width]=\"22\">\n    @if (!!searchValue()) {\n      <button icon-button (click)=\"clearFilter()\" symbolName=\"close\" size=\"sm\">\n        Clear Search\n      </button>\n    }\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { datasource: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasource", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: false }] }] } });
+function pick(obj, keys) {
+    return keys.reduce((acc, key) => {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+            acc[key] = obj[key];
+        }
+        return acc;
+    }, {});
+}
+
+/**
+ * UniDataSearchComponent Barrel File
+ *
+ * This file exports all public-facing elements of the data-search component.
+ */
+
+/**
+ * Native scroll area with theme-driven scrollbar styling.
+ *
+ * Scrollbars are styled entirely through Emotion-generated CSS:
+ * `::-webkit-scrollbar` rules cover Chromium/Safari, with a
+ * `scrollbar-width`/`scrollbar-color` fallback for Firefox.
+ */
+class UniScrollAreaComponent {
+    theme = inject(ThemeService);
+    isVerticallyScrollable = signal(false, ...(ngDevMode ? [{ debugName: "isVerticallyScrollable" }] : /* istanbul ignore next */ []));
+    viewport = viewChild.required('viewport');
+    content = viewChild.required('content');
+    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
+    borderRadius = input('sm', ...(ngDevMode ? [{ debugName: "borderRadius" }] : /* 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 */ []));
+    height = input(...(ngDevMode ? [undefined, { debugName: "height" }] : /* istanbul ignore next */ []));
+    width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
+    appearance = input('compact', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    autoHeightDisabled = input(false, ...(ngDevMode ? [{ debugName: "autoHeightDisabled" }] : /* istanbul ignore next */ []));
+    verticalScrollPadding = input(29, ...(ngDevMode ? [{ debugName: "verticalScrollPadding" }] : /* istanbul ignore next */ []));
+    scrollable = output();
+    scrollToBottom() {
+        const viewport = this.viewport().nativeElement;
+        viewport.scrollTo({ top: viewport.scrollHeight, behavior: 'smooth' });
+    }
+    scrollToTop() {
+        this.viewport().nativeElement.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+    get className() {
+        return css({
+            display: 'block',
+            overflow: 'hidden',
+            height: this.height(),
+            width: this.width(),
+            ...this.theme.colorPair(this.color()),
+            ...this.theme.radius(this.borderRadius()),
+            ...this.theme.border(this.border()),
+        });
+    }
+    viewportClassName = computed(() => {
+        const palette = this.theme.colors();
+        const thumbColor = palette['on-primary-surface'];
+        const trackColor = palette['primary-surface'];
+        const thickness = this.appearance() === 'standard' ? 13 : 8;
+        return css([
+            {
+                height: '100%',
+                width: '100%',
+                overflow: 'auto',
+                '&::-webkit-scrollbar': {
+                    width: thickness,
+                    height: thickness,
+                },
+                '&::-webkit-scrollbar-thumb': {
+                    backgroundColor: thumbColor,
+                    borderRadius: 7,
+                    border: `3px solid ${trackColor}`,
+                    boxSizing: 'border-box',
+                },
+                '&::-webkit-scrollbar-track': {
+                    backgroundColor: trackColor,
+                    borderRadius: 12,
+                },
+                // Firefox has no ::-webkit-scrollbar support; fall back to the
+                // standard scrollbar properties there.
+                '@supports not selector(::-webkit-scrollbar)': {
+                    scrollbarWidth: this.appearance() === 'standard' ? 'auto' : 'thin',
+                    scrollbarColor: `${thumbColor} ${trackColor}`,
+                },
+            },
+            this.appearance() === 'standard' && {
+                '&::-webkit-scrollbar-track': {
+                    backgroundColor: trackColor,
+                    borderRadius: 12,
+                    ...this.theme.border('quaternary'),
+                },
+            },
+        ]);
+    }, ...(ngDevMode ? [{ debugName: "viewportClassName" }] : /* istanbul ignore next */ []));
+    contentClassName = computed(() => css({
+        ...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()),
+        '&.isVerticallyScrollable': {
+            paddingRight: this.verticalScrollPadding(),
+        },
+    }), ...(ngDevMode ? [{ debugName: "contentClassName" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            const viewport = this.viewport().nativeElement;
+            const content = this.content().nativeElement;
+            const updateScrollable = () => {
+                const scrollable = viewport.scrollHeight > viewport.clientHeight;
+                if (scrollable !== this.isVerticallyScrollable()) {
+                    this.isVerticallyScrollable.set(scrollable);
+                    this.scrollable.emit(scrollable);
+                }
+            };
+            const observer = new ResizeObserver(updateScrollable);
+            observer.observe(viewport);
+            observer.observe(content);
+            destroyRef.onDestroy(() => observer.disconnect());
+            updateScrollable();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniScrollAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: UniScrollAreaComponent, isStandalone: true, selector: "div[uni-scroll-area], ScrollArea, div[scroll-area]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", 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 }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, autoHeightDisabled: { classPropertyName: "autoHeightDisabled", publicName: "autoHeightDisabled", isSignal: true, isRequired: false, transformFunction: null }, verticalScrollPadding: { classPropertyName: "verticalScrollPadding", publicName: "verticalScrollPadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scrollable: "scrollable" }, host: { properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `<div #viewport [class]="viewportClassName()">
+    <div
+      #content
+      [class]="contentClassName()"
+      [class.isVerticallyScrollable]="isVerticallyScrollable()"
+    >
+      <ng-content></ng-content>
+    </div>
+  </div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniScrollAreaComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[uni-scroll-area], ScrollArea, div[scroll-area]',
+                    standalone: true,
+                    imports: [],
+                    template: `<div #viewport [class]="viewportClassName()">
+    <div
+      #content
+      [class]="contentClassName()"
+      [class.isVerticallyScrollable]="isVerticallyScrollable()"
+    >
+      <ng-content></ng-content>
+    </div>
+  </div>`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { viewport: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", 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 }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], autoHeightDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHeightDisabled", required: false }] }], verticalScrollPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalScrollPadding", required: false }] }], scrollable: [{ type: i0.Output, args: ["scrollable"] }], className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class UniSortHeaderComponent {
+    column = input(...(ngDevMode ? [undefined, { debugName: "column" }] : /* istanbul ignore next */ []));
+    datasource = input(...(ngDevMode ? [undefined, { debugName: "datasource" }] : /* istanbul ignore next */ []));
+    direction = computed(() => {
+        const ds = this.datasource();
+        if (!ds)
+            return 'indet';
+        return ds.sortColumn() === this.column() ? ds.sortDirection() : 'indet';
+    }, ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    get className() {
+        return css({
+            cursor: 'pointer',
+            position: 'relative',
+            height: 24,
+            '& .sort-icon': {
+                position: 'absolute',
+                right: -24,
+                top: -4,
+                height: 24,
+                width: 24,
+                transition: 'all 350ms ease-in-out',
+                transform: 'rotate(0)',
+            },
+            '& .sort-icon.asc': {
+                transform: 'rotate(-180deg)',
+            },
+            '& .sort-icon.indet': {
+                opacity: 0,
+                transform: 'rotate(0)',
+            },
+        });
+    }
+    cycleSort() {
+        const cycle = ['asc', 'desc', 'indet'];
+        this.sortDatasource(cycle[cycle.indexOf(this.direction()) + 1] || cycle[0]);
+    }
+    sortDatasource(direction) {
+        this.datasource()?.sortRecords({
+            column: this.column(),
+            direction,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSortHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniSortHeaderComponent, isStandalone: true, selector: "uni-sort-header", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "cycleSort()" }, properties: { "class": "this.className" } }, ngImport: i0, template: "<ng-content></ng-content>\n<div class=\"sort-icon\" [class]=\"direction()\">\n  <uni-symbol name=\"arrow_upward\" />\n</div>\n", dependencies: [{ 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: UniSortHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-sort-header', imports: [UniSymbolComponent], standalone: true, host: {
+                        '(click)': 'cycleSort()',
+                    }, template: "<ng-content></ng-content>\n<div class=\"sort-icon\" [class]=\"direction()\">\n  <uni-symbol name=\"arrow_upward\" />\n</div>\n" }]
+        }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: false }] }], datasource: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasource", required: false }] }], className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class UniDataTableComponent extends BaseComponent {
+    datasource = input.required(...(ngDevMode ? [{ debugName: "datasource" }] : /* istanbul ignore next */ []));
+    columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    detailRowTemplate = input(...(ngDevMode ? [undefined, { debugName: "detailRowTemplate" }] : /* istanbul ignore next */ []));
+    expandedIndex = signal(null, ...(ngDevMode ? [{ debugName: "expandedIndex" }] : /* istanbul ignore next */ []));
+    useMultiSelect = input(false, ...(ngDevMode ? [{ debugName: "useMultiSelect" }] : /* istanbul ignore next */ []));
+    useRowClick = input(true, ...(ngDevMode ? [{ debugName: "useRowClick" }] : /* istanbul ignore next */ []));
+    highlight = input(...(ngDevMode ? [undefined, { debugName: "highlight" }] : /* istanbul ignore next */ []));
+    height = input(...(ngDevMode ? [undefined, { debugName: "height" }] : /* istanbul ignore next */ []));
+    scrollable = signal(false, ...(ngDevMode ? [{ debugName: "scrollable" }] : /* istanbul ignore next */ []));
+    tableClass;
+    headerClass;
+    footerClass;
+    thClass;
+    tdClass;
+    trClass;
+    detailRowClass;
+    loadingOverlayClass = css({
+        animation: 'fadeIn 350ms ease-in-out',
+        '@keyframes fadeIn': { ...fadeIn },
+    });
+    rowSelect = output();
+    rowClick = output();
+    displayedColumns = signal([], ...(ngDevMode ? [{ debugName: "displayedColumns" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        effect(() => {
+            this.displayedColumns.set(this.columns().map((c) => c.columnDef));
+            this.tableClass = css({
+                ...this.theme.colorPair(this.componentOptions().color),
+                width: '100%',
+                borderSpacing: 0,
+            });
+            this.headerClass = css({
+                borderBottom: this.getBorder(this.componentOptions().thHorizontalBorder),
+                '&:empty': {
+                    display: 'none',
+                },
+            });
+            this.footerClass = css({
+                borderTop: this.getBorder(this.componentOptions().thHorizontalBorder),
+                '&:empty': {
+                    display: 'none',
+                },
+            });
+            this.thClass = css({
+                ...this.theme.colorPair(this.componentOptions().thColor),
+                position: 'sticky',
+                top: 0,
+                textAlign: 'center',
+                padding: 0, // Reset renderers default padding
+                ...this.theme.padding(this.componentOptions().thPadding),
+                borderBottom: this.getBorder(this.componentOptions().thHorizontalBorder),
+                '&:not(:last-child)': {
+                    borderRight: this.getBorder(this.componentOptions().thVerticalBorder),
+                },
+                '&:last-child.scrollable': {
+                    paddingRight: 29,
+                },
+                '&.sticky': {
+                    position: 'sticky',
+                    left: 0,
+                    zIndex: Z_INDEX.sticky,
+                },
+            });
+            this.tdClass = css([
+                {
+                    textAlign: 'center',
+                    padding: 0, // Reset renderers default padding
+                    '&:not(:last-child)': {
+                        borderRight: this.getBorder(this.componentOptions().tdVerticalBorder),
+                    },
+                    '&:last-child.scrollable': {
+                        // The last scrollable column allows space for the scrollbar.
+                        paddingRight: 29,
+                    },
+                    '&.sticky': {
+                        position: 'sticky',
+                        left: 0,
+                        zIndex: Z_INDEX.sticky,
+                        ...this.theme.colorPair(this.componentOptions().tdStickyColor),
+                    },
+                    '&:not(.template)': {
+                        // Allow templates to define their own styles
+                        ...this.theme.padding(this.componentOptions().tdPadding),
+                    },
+                },
+            ]);
+            this.trClass = css({
+                '& td': {
+                    ...this.theme.backgroundColor('transparent'),
+                    transition: 'all 0.28s ease',
+                },
+                ':not(:last-child) td': {
+                    borderBottom: this.getBorder(this.componentOptions().tdHorizontalBorder),
+                },
+            }, this.useRowClick() && {
+                '&:hover td': {
+                    ...this.theme.backgroundColor(this.componentOptions().rowHoverColor),
+                    cursor: 'pointer',
+                },
+            });
+            this.detailRowClass = css({
+                display: 'table-row',
+                visibility: 'hidden',
+                '&.expanded': {
+                    visibility: 'visible',
+                },
+                '& td': {
+                    padding: 0,
+                    borderBottom: this.getBorder(this.componentOptions().tdHorizontalBorder),
+                },
+                '& td .detail-content-wrapper': {
+                    display: 'grid',
+                    gridTemplateRows: '0fr',
+                    transition: 'grid-template-rows 0.3s ease',
+                    overflow: 'hidden',
+                    '& .detail-inner': {
+                        minHeight: 0,
+                    },
+                },
+                '&.expanded td .detail-content-wrapper': {
+                    gridTemplateRows: '1fr',
+                },
+            });
+        });
+    }
+    // Loading state detection
+    isLoading = linkedSignal(() => {
+        const datasource = this.datasource();
+        if (datasource && datasource instanceof UniServerSideDatasource) {
+            // For server-side datasource, use the built-in loading state
+            return datasource.isLoading();
+        }
+        else {
+            // For client-side datasource, no loading state needed
+            return false;
+        }
+    }, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    toggleRow(index) {
+        this.expandedIndex.update((current) => (current === index ? null : index));
+    }
+    handleRowClick(row, index) {
+        this.rowClick.emit(row);
+        this.toggleRow(index);
+    }
+    isHighlighted(row) {
+        const callback = this.highlight && this.highlight();
+        if (!callback)
+            return false;
+        return callback(row);
+    }
+    String = String;
+    handleScrollable(scrollable) {
+        this.scrollable.set(scrollable);
+    }
+    getBorder(name) {
+        return name ? this.theme.theme().borders[name] : undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDataTableComponent, isStandalone: true, selector: "uni-data-table, DataTable", inputs: { datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, detailRowTemplate: { classPropertyName: "detailRowTemplate", publicName: "detailRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, useMultiSelect: { classPropertyName: "useMultiSelect", publicName: "useMultiSelect", isSignal: true, isRequired: false, transformFunction: null }, useRowClick: { classPropertyName: "useRowClick", publicName: "useRowClick", isSignal: true, isRequired: false, transformFunction: null }, highlight: { classPropertyName: "highlight", publicName: "highlight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowSelect: "rowSelect", rowClick: "rowClick" }, providers: [{ provide: COMPONENT_NAME, useValue: 'dataTable' }], usesInheritance: true, ngImport: i0, template: "@let ds = datasource();\n@if (ds) {\n  <div\n    box-layout\n    [color]=\"componentOptions().color\"\n    [border]=\"componentOptions().border\"\n    [borderRadius]=\"componentOptions().borderRadius\"\n    [elevation]=\"componentOptions().elevation\"\n    overflow=\"hidden\"\n  >\n    <div\n      box-layout\n      [padding]=\"componentOptions().headerPadding\"\n      [color]=\"componentOptions().headerColor\"\n      [class]=\"headerClass\"\n    >\n      <ng-content select=\"data-table-header\"></ng-content>\n    </div>\n\n    <div box-layout [height]=\"height()\" position=\"relative\">\n      <ScrollArea\n        [verticalScrollPadding]=\"0\"\n        (scrollable)=\"handleScrollable($event)\"\n      >\n        <table [class]=\"tableClass\">\n          <thead>\n            <tr>\n              @for (column of columns(); track column) {\n                <th\n                  [class]=\"thClass\"\n                  [class.scrollable]=\"scrollable()\"\n                  [class.sticky]=\"column.isSticky\"\n                  [style.text-align]=\"column.textAlign\"\n                >\n                  <uni-sort-header\n                    [datasource]=\"datasource()\"\n                    [column]=\"column.columnDef\"\n                  >\n                    <Text [typeface]=\"componentOptions().thTextRole\">{{\n                      column.header\n                    }}</Text>\n                  </uni-sort-header>\n                </th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            @for (record of ds.records(); track record; let i = $index) {\n              <tr [class]=\"trClass\" (click)=\"handleRowClick(record, $index)\">\n                @for (column of columns(); track column) {\n                  <td\n                    [class]=\"tdClass\"\n                    [class.scrollable]=\"scrollable()\"\n                    [class.sticky]=\"column.isSticky\"\n                    [class.template]=\"!!column.template\"\n                    [style.text-align]=\"column.textAlign\"\n                  >\n                    @if (column.template) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"column.template\"\n                        [ngTemplateOutletContext]=\"record\"\n                      ></ng-container>\n                    } @else {\n                      <Text [typeface]=\"componentOptions().tdTextRole\">\n                        @if (!column.cell) {\n                          {{ record[column.columnDef] }}\n                        } @else {\n                          {{ column.cell(record) }}\n                        }\n                      </Text>\n                    }\n                  </td>\n                }\n              </tr>\n              @if (detailRowTemplate()) {\n                <tr\n                  [class]=\"detailRowClass\"\n                  [class.expanded]=\"expandedIndex() === $index\"\n                >\n                  <td [attr.colspan]=\"columns().length\">\n                    <div class=\"detail-content-wrapper\">\n                      <div class=\"detail-inner\">\n                        <ng-container\n                          [ngTemplateOutlet]=\"detailRowTemplate()\"\n                          [ngTemplateOutletContext]=\"{\n                            $implicit: record,\n                            index: i,\n                          }\"\n                        ></ng-container>\n                      </div>\n                    </div>\n                  </td>\n                </tr>\n              }\n            }\n          </tbody>\n        </table>\n      </ScrollArea>\n\n      <!-- Loading Overlay -->\n      @if (isLoading()) {\n        <div\n          uni-center-layout\n          position=\"absolute\"\n          [inset]=\"0\"\n          [backgroundColor]=\"componentOptions().loadingOverlayColor\"\n          [class]=\"loadingOverlayClass\"\n          zIndex=\"overlay\"\n        >\n          <!-- Loading Spinner -->\n          <div\n            uni-box-layout\n            [height]=\"componentOptions().loadingSpinnerSize\"\n            [width]=\"componentOptions().loadingSpinnerSize\"\n          >\n            <uni-icon\n              name=\"spinner\"\n              [color]=\"componentOptions().loadingSpinnerColor\"\n            />\n          </div>\n        </div>\n      }\n    </div>\n\n    <div\n      box-layout\n      [padding]=\"componentOptions().footerPadding\"\n      [color]=\"componentOptions().footerColor\"\n      [class]=\"footerClass\"\n    >\n      <ng-content select=\"data-table-footer\"></ng-content>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: UniScrollAreaComponent, selector: "div[uni-scroll-area], ScrollArea, div[scroll-area]", inputs: ["color", "borderRadius", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "height", "width", "appearance", "autoHeightDisabled", "verticalScrollPadding"], outputs: ["scrollable"] }, { kind: "component", type: UniTextComponent, selector: "uni-text, Text", inputs: ["typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniSortHeaderComponent, selector: "uni-sort-header", inputs: ["column", "datasource"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon, Icon", inputs: ["color", "name"] }, { kind: "component", type: UniCenterComponent, selector: "div[uni-center-layout], div[center-layout]", inputs: ["display", "justifyContent", "alignItems"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDataTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-data-table, DataTable', imports: [
+                        NgTemplateOutlet,
+                        UniBoxComponent,
+                        UniScrollAreaComponent,
+                        UniTextComponent,
+                        UniSortHeaderComponent,
+                        UniIconComponent,
+                        UniCenterComponent,
+                    ], providers: [{ provide: COMPONENT_NAME, useValue: 'dataTable' }], template: "@let ds = datasource();\n@if (ds) {\n  <div\n    box-layout\n    [color]=\"componentOptions().color\"\n    [border]=\"componentOptions().border\"\n    [borderRadius]=\"componentOptions().borderRadius\"\n    [elevation]=\"componentOptions().elevation\"\n    overflow=\"hidden\"\n  >\n    <div\n      box-layout\n      [padding]=\"componentOptions().headerPadding\"\n      [color]=\"componentOptions().headerColor\"\n      [class]=\"headerClass\"\n    >\n      <ng-content select=\"data-table-header\"></ng-content>\n    </div>\n\n    <div box-layout [height]=\"height()\" position=\"relative\">\n      <ScrollArea\n        [verticalScrollPadding]=\"0\"\n        (scrollable)=\"handleScrollable($event)\"\n      >\n        <table [class]=\"tableClass\">\n          <thead>\n            <tr>\n              @for (column of columns(); track column) {\n                <th\n                  [class]=\"thClass\"\n                  [class.scrollable]=\"scrollable()\"\n                  [class.sticky]=\"column.isSticky\"\n                  [style.text-align]=\"column.textAlign\"\n                >\n                  <uni-sort-header\n                    [datasource]=\"datasource()\"\n                    [column]=\"column.columnDef\"\n                  >\n                    <Text [typeface]=\"componentOptions().thTextRole\">{{\n                      column.header\n                    }}</Text>\n                  </uni-sort-header>\n                </th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            @for (record of ds.records(); track record; let i = $index) {\n              <tr [class]=\"trClass\" (click)=\"handleRowClick(record, $index)\">\n                @for (column of columns(); track column) {\n                  <td\n                    [class]=\"tdClass\"\n                    [class.scrollable]=\"scrollable()\"\n                    [class.sticky]=\"column.isSticky\"\n                    [class.template]=\"!!column.template\"\n                    [style.text-align]=\"column.textAlign\"\n                  >\n                    @if (column.template) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"column.template\"\n                        [ngTemplateOutletContext]=\"record\"\n                      ></ng-container>\n                    } @else {\n                      <Text [typeface]=\"componentOptions().tdTextRole\">\n                        @if (!column.cell) {\n                          {{ record[column.columnDef] }}\n                        } @else {\n                          {{ column.cell(record) }}\n                        }\n                      </Text>\n                    }\n                  </td>\n                }\n              </tr>\n              @if (detailRowTemplate()) {\n                <tr\n                  [class]=\"detailRowClass\"\n                  [class.expanded]=\"expandedIndex() === $index\"\n                >\n                  <td [attr.colspan]=\"columns().length\">\n                    <div class=\"detail-content-wrapper\">\n                      <div class=\"detail-inner\">\n                        <ng-container\n                          [ngTemplateOutlet]=\"detailRowTemplate()\"\n                          [ngTemplateOutletContext]=\"{\n                            $implicit: record,\n                            index: i,\n                          }\"\n                        ></ng-container>\n                      </div>\n                    </div>\n                  </td>\n                </tr>\n              }\n            }\n          </tbody>\n        </table>\n      </ScrollArea>\n\n      <!-- Loading Overlay -->\n      @if (isLoading()) {\n        <div\n          uni-center-layout\n          position=\"absolute\"\n          [inset]=\"0\"\n          [backgroundColor]=\"componentOptions().loadingOverlayColor\"\n          [class]=\"loadingOverlayClass\"\n          zIndex=\"overlay\"\n        >\n          <!-- Loading Spinner -->\n          <div\n            uni-box-layout\n            [height]=\"componentOptions().loadingSpinnerSize\"\n            [width]=\"componentOptions().loadingSpinnerSize\"\n          >\n            <uni-icon\n              name=\"spinner\"\n              [color]=\"componentOptions().loadingSpinnerColor\"\n            />\n          </div>\n        </div>\n      }\n    </div>\n\n    <div\n      box-layout\n      [padding]=\"componentOptions().footerPadding\"\n      [color]=\"componentOptions().footerColor\"\n      [class]=\"footerClass\"\n    >\n      <ng-content select=\"data-table-footer\"></ng-content>\n    </div>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { datasource: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasource", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], detailRowTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailRowTemplate", required: false }] }], useMultiSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "useMultiSelect", required: false }] }], useRowClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "useRowClick", required: false }] }], highlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlight", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], rowSelect: [{ type: i0.Output, args: ["rowSelect"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }] } });
+
+/**
+ * UniDataTableComponent Barrel File
+ *
+ * This file exports all public-facing elements of the data-table component.
+ */
+
 class UniDialogComponent extends BaseComponent {
     elem = inject(ElementRef);
     show = input(false, ...(ngDevMode ? [{ debugName: "show" }] : /* istanbul ignore next */ []));
@@ -1904,8 +2652,630 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 args: ['dropdown', { static: true }]
             }] } });
 
-class UniMenuItemComponent extends UniBoxComponent {
-    _elementRef = inject(ElementRef);
+class UniExpandComponent {
+    collapsed = model(true, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    toggle() {
+        this.collapsed.update((collapsed) => !collapsed);
+    }
+    expandClassName = css({
+        display: 'grid',
+    });
+    contentClassName = css({
+        minHeight: 0,
+    });
+    expand = keyframes({ ...expandFadeIn });
+    collapse = keyframes({ ...collapseFadeOut });
+    expandAnimation = css({
+        overflow: 'hidden',
+        animation: `${this.expand} ease-in 350ms`,
+    });
+    collapseAnimation = css({
+        overflow: 'hidden',
+        animation: `${this.collapse} ease-in 350ms`,
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniExpandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniExpandComponent, isStandalone: true, selector: "uni-expand, Expand", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, ngImport: i0, template: `@if (!collapsed()) {
+    <div
+      [animate.enter]="expandAnimation"
+      [animate.leave]="collapseAnimation"
+      [class]="expandClassName"
+    >
+      <div [class]="contentClassName">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  }`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniExpandComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'uni-expand, Expand',
+                    standalone: true,
+                    imports: [],
+                    template: `@if (!collapsed()) {
+    <div
+      [animate.enter]="expandAnimation"
+      [animate.leave]="collapseAnimation"
+      [class]="expandClassName"
+    >
+      <div [class]="contentClassName">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  }`,
+                }]
+        }], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }] } });
+
+/**
+ * UniExpandComponent Barrel File
+ *
+ * This file exports all public-facing elements of the expand component.
+ */
+
+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']
+            }] } });
+
+class UniExpandToggleComponent {
+    collapsed = model(true, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    get className() {
+        return css({
+            display: 'inline-flex',
+            cursor: 'pointer',
+            transition: 'transform 350ms ease-in-out',
+            transform: 'rotate(0)',
+            '&[toggled]': {
+                transform: 'rotate(-180deg)',
+            },
+        });
+    }
+    toggle() {
+        this.collapsed.update((collapsed) => !collapsed);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniExpandToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniExpandToggleComponent, isStandalone: true, selector: "uni-expand-toggle, ExpandToggle", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "attr.toggled": "collapsed() || null", "class": "this.className" } }, ngImport: i0, template: `<Tooltip
+    [label]="collapsed() ? 'Expand' : 'Collapse'"
+    placement="right"
+    [appendToBody]="true"
+  >
+    <button icon-button iconName="chevronUp" (click)="toggle()">
+      {{ collapsed() ? 'Expand' : 'Collapse' }}
+    </button>
+  </Tooltip>`, isInline: true, dependencies: [{ kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniTooltipComponent, selector: "uni-tooltip, Tooltip", inputs: ["hoverDelay", "label", "placement", "inlineText", "appendToBody"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniExpandToggleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'uni-expand-toggle, ExpandToggle',
+                    standalone: true,
+                    imports: [UniIconButtonComponent, UniTooltipComponent],
+                    template: `<Tooltip
+    [label]="collapsed() ? 'Expand' : 'Collapse'"
+    placement="right"
+    [appendToBody]="true"
+  >
+    <button icon-button iconName="chevronUp" (click)="toggle()">
+      {{ collapsed() ? 'Expand' : 'Collapse' }}
+    </button>
+  </Tooltip>`,
+                    host: {
+                        '[attr.toggled]': 'collapsed() || null',
+                    },
+                }]
+        }], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class UniExpandAreaComponent {
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    initCollapsed = input(false, ...(ngDevMode ? [{ debugName: "initCollapsed" }] : /* istanbul ignore next */ []));
+    padding = input('md', ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    collapsed = output();
+    toggleRef = viewChild.required('toggle');
+    toggleExpand() {
+        this.toggleRef().toggle();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniExpandAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: UniExpandAreaComponent, isStandalone: true, selector: "uni-expand-area, ExpandArea", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, initCollapsed: { classPropertyName: "initCollapsed", publicName: "initCollapsed", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsed" }, viewQueries: [{ propertyName: "toggleRef", first: true, predicate: ["toggle"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <Box
+      color="tertiary-surface"
+      borderRadius="sm"
+      border="quaternary"
+      overflow="hidden"
+    >
+      <Box
+        border="quaternary"
+        borderRadius="sm"
+        color="primary-surface"
+        style="margin-top: -1px; margin-left: -1px; margin-right: -1px"
+        [style.margin-bottom]="toggle.collapsed() ? '-1px' : 0"
+        justifyContent="space-between"
+        display="flex"
+        alignItems="center"
+      >
+        <Box [width]="36"></Box>
+        <Box paddingHorizontal="md">
+          <Text typeface="title-small" display="block">
+            {{ title() }}
+          </Text>
+        </Box>
+
+        <ExpandToggle
+          #toggle
+          style="display: inline-flex; margin: -2px"
+          [collapsed]="initCollapsed()"
+        />
+      </Box>
+
+      <Expand [collapsed]="toggle.collapsed()">
+        <Box [padding]="padding()">
+          <ng-content></ng-content>
+        </Box>
+      </Expand>
+    </Box>
+  `, 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"] }, { kind: "component", type: UniTextComponent, selector: "uni-text, Text", inputs: ["typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniExpandToggleComponent, selector: "uni-expand-toggle, ExpandToggle", inputs: ["collapsed"], outputs: ["collapsedChange"] }, { kind: "component", type: UniExpandComponent, selector: "uni-expand, Expand", inputs: ["collapsed"], outputs: ["collapsedChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniExpandAreaComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'uni-expand-area, ExpandArea',
+                    standalone: true,
+                    imports: [UniBoxComponent, UniTextComponent, UniExpandToggleComponent, UniExpandComponent],
+                    template: `
+    <Box
+      color="tertiary-surface"
+      borderRadius="sm"
+      border="quaternary"
+      overflow="hidden"
+    >
+      <Box
+        border="quaternary"
+        borderRadius="sm"
+        color="primary-surface"
+        style="margin-top: -1px; margin-left: -1px; margin-right: -1px"
+        [style.margin-bottom]="toggle.collapsed() ? '-1px' : 0"
+        justifyContent="space-between"
+        display="flex"
+        alignItems="center"
+      >
+        <Box [width]="36"></Box>
+        <Box paddingHorizontal="md">
+          <Text typeface="title-small" display="block">
+            {{ title() }}
+          </Text>
+        </Box>
+
+        <ExpandToggle
+          #toggle
+          style="display: inline-flex; margin: -2px"
+          [collapsed]="initCollapsed()"
+        />
+      </Box>
+
+      <Expand [collapsed]="toggle.collapsed()">
+        <Box [padding]="padding()">
+          <ng-content></ng-content>
+        </Box>
+      </Expand>
+    </Box>
+  `,
+                }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], initCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "initCollapsed", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], collapsed: [{ type: i0.Output, args: ["collapsed"] }], toggleRef: [{ type: i0.ViewChild, args: ['toggle', { isSignal: true }] }] } });
+
+/**
+ * UniExpandAreaComponent Barrel File
+ *
+ * This file exports all public-facing elements of the expand-area component.
+ */
+
+/**
+ * UniExpandToggleComponent Barrel File
+ *
+ * This file exports all public-facing elements of the expand-toggle component.
+ */
+
+class UniFileDropZoneComponent {
+    selectedFile = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedFile" }] : /* istanbul ignore next */ []));
+    selectedFileName = computed(() => this.selectedFile()?.name, ...(ngDevMode ? [{ debugName: "selectedFileName" }] : /* istanbul ignore next */ []));
+    attachmentState = signal(undefined, ...(ngDevMode ? [{ debugName: "attachmentState" }] : /* istanbul ignore next */ []));
+    fileSelectorRef = viewChild.required('fileSelector');
+    get fileSelectorElement() {
+        return this.fileSelectorRef().nativeElement;
+    }
+    height = input(...(ngDevMode ? [undefined, { debugName: "height" }] : /* istanbul ignore next */ []));
+    borderRadius = input('md', ...(ngDevMode ? [{ debugName: "borderRadius" }] : /* istanbul ignore next */ []));
+    border = input('light', ...(ngDevMode ? [{ debugName: "border" }] : /* istanbul ignore next */ []));
+    padding = input('lg', ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    useBrowseButton = input(false, ...(ngDevMode ? [{ debugName: "useBrowseButton" }] : /* istanbul ignore next */ []));
+    browseButtonText = input('Browse for file', ...(ngDevMode ? [{ debugName: "browseButtonText" }] : /* istanbul ignore next */ []));
+    allowedFileExtensions = input([], ...(ngDevMode ? [{ debugName: "allowedFileExtensions" }] : /* istanbul ignore next */ []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    helpTemplate = input(null, ...(ngDevMode ? [{ debugName: "helpTemplate" }] : /* istanbul ignore next */ []));
+    helpTemplateContext = input(null, ...(ngDevMode ? [{ debugName: "helpTemplateContext" }] : /* istanbul ignore next */ []));
+    fileAttached = output();
+    fileRemoved = output();
+    sanitizedFileExtensions = computed(() => this.allowedFileExtensions().map((ext) => (ext.includes('.') ? ext : '.' + ext)), ...(ngDevMode ? [{ debugName: "sanitizedFileExtensions" }] : /* istanbul ignore next */ []));
+    helpText = computed(() => {
+        const extensions = this.sanitizedFileExtensions();
+        let text = '';
+        if (extensions.length === 1) {
+            text = `${extensions[0]} format allowed`;
+        }
+        if (extensions.length > 1) {
+            text = extensions.join(', ') + ' formats allowed';
+        }
+        return text;
+    }, ...(ngDevMode ? [{ debugName: "helpText" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const files = this.selectedFile();
+            if (files) {
+                this.attachmentState.set('upload');
+            }
+            else {
+                this.attachmentState.set(undefined);
+            }
+        });
+    }
+    openFileSelector() {
+        this.fileSelectorElement.click();
+    }
+    selectFiles(fileList) {
+        if (!fileList)
+            return;
+        if (!acceptableFile(fileList[0], this.sanitizedFileExtensions()))
+            return;
+        this.selectedFile.set(fileList[0]);
+        this.fileAttached.emit(fileList[0]);
+    }
+    onFileInputChange() {
+        this.selectFiles(this.fileSelectorElement.files);
+        this.fileSelectorElement.value = '';
+    }
+    cancelUpload() {
+        this.selectedFile.set(undefined);
+        this.fileAttached.emit(undefined);
+        this.fileRemoved.emit();
+    }
+    removeAttachment() {
+        this.selectedFile.set(undefined);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniFileDropZoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniFileDropZoneComponent, isStandalone: true, selector: "uni-file-drop-zone", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, useBrowseButton: { classPropertyName: "useBrowseButton", publicName: "useBrowseButton", isSignal: true, isRequired: false, transformFunction: null }, browseButtonText: { classPropertyName: "browseButtonText", publicName: "browseButtonText", isSignal: true, isRequired: false, transformFunction: null }, allowedFileExtensions: { classPropertyName: "allowedFileExtensions", publicName: "allowedFileExtensions", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helpTemplate: { classPropertyName: "helpTemplate", publicName: "helpTemplate", isSignal: true, isRequired: false, transformFunction: null }, helpTemplateContext: { classPropertyName: "helpTemplateContext", publicName: "helpTemplateContext", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileAttached: "fileAttached", fileRemoved: "fileRemoved" }, viewQueries: [{ propertyName: "fileSelectorRef", first: true, predicate: ["fileSelector"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  box-layout\n  [border]=\"border()\"\n  [borderRadius]=\"borderRadius()\"\n  [dashBorder]=\"[undefined, 'replace'].includes(attachmentState())\"\n  display=\"flex\"\n  alignItems=\"center\"\n  justifyContent=\"center\"\n  [padding]=\"padding()\"\n  dragAndDrop\n  (onFileDropped)=\"selectFiles($event)\"\n  [height]=\"height()\"\n>\n  <div stack-layout gap=\"md\" alignItems=\"center\">\n    @switch (attachmentState()) {\n      @case ('upload') {\n        <div stack-layout alignItems=\"center\">\n          <Text typeface=\"headline-small\">{{ label() }}</Text>\n          <Text typeface=\"title-small\">{{ selectedFileName() }}</Text>\n        </div>\n        <button text-button (click)=\"removeAttachment()\" variant=\"warn\">\n          Cancel\n        </button>\n      }\n\n      @default {\n        @if (useBrowseButton()) {\n          <button text-button (click)=\"openFileSelector()\">\n            {{ browseButtonText() }}\n          </button>\n          <Text>OR</Text>\n        }\n\n        @if (!helpTemplate()) {\n          <div stack-layout alignItems=\"center\">\n            <Text typeface=\"headline-small\">Drag and drop the file here</Text>\n            @if (helpText()) {\n              <Text typeface=\"title-small\">{{ helpText() }}</Text>\n            }\n          </div>\n        } @else {\n          <ng-container\n            [ngTemplateOutlet]=\"helpTemplate()\"\n            [ngTemplateOutletContext]=\"helpTemplateContext()\"\n          ></ng-container>\n        }\n      }\n    }\n  </div>\n\n  <input\n    #fileSelector\n    type=\"file\"\n    style=\"display: none\"\n    (change)=\"onFileInputChange()\"\n    [accept]=\"sanitizedFileExtensions().join(',')\"\n    [multiple]=\"false\"\n  />\n</div>\n", dependencies: [{ kind: "directive", type: DragAndDropDirective, selector: "[uni-drag-n-drop], [dragAndDrop]", outputs: ["onFileDropped"] }, { 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: UniButtonComponent, selector: "button[uni-text-button], Button, button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }, { kind: "component", type: UniStackComponent, selector: "div[uni-stack-layout], Stack, div[stack-layout]", inputs: ["display", "flexDirection", "minHeight"] }, { kind: "component", type: UniTextComponent, selector: "uni-text, Text", inputs: ["typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniFileDropZoneComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-file-drop-zone', imports: [
+                        DragAndDropDirective,
+                        UniBoxComponent,
+                        UniButtonComponent,
+                        UniStackComponent,
+                        UniTextComponent,
+                        NgTemplateOutlet,
+                    ], standalone: true, template: "<div\n  box-layout\n  [border]=\"border()\"\n  [borderRadius]=\"borderRadius()\"\n  [dashBorder]=\"[undefined, 'replace'].includes(attachmentState())\"\n  display=\"flex\"\n  alignItems=\"center\"\n  justifyContent=\"center\"\n  [padding]=\"padding()\"\n  dragAndDrop\n  (onFileDropped)=\"selectFiles($event)\"\n  [height]=\"height()\"\n>\n  <div stack-layout gap=\"md\" alignItems=\"center\">\n    @switch (attachmentState()) {\n      @case ('upload') {\n        <div stack-layout alignItems=\"center\">\n          <Text typeface=\"headline-small\">{{ label() }}</Text>\n          <Text typeface=\"title-small\">{{ selectedFileName() }}</Text>\n        </div>\n        <button text-button (click)=\"removeAttachment()\" variant=\"warn\">\n          Cancel\n        </button>\n      }\n\n      @default {\n        @if (useBrowseButton()) {\n          <button text-button (click)=\"openFileSelector()\">\n            {{ browseButtonText() }}\n          </button>\n          <Text>OR</Text>\n        }\n\n        @if (!helpTemplate()) {\n          <div stack-layout alignItems=\"center\">\n            <Text typeface=\"headline-small\">Drag and drop the file here</Text>\n            @if (helpText()) {\n              <Text typeface=\"title-small\">{{ helpText() }}</Text>\n            }\n          </div>\n        } @else {\n          <ng-container\n            [ngTemplateOutlet]=\"helpTemplate()\"\n            [ngTemplateOutletContext]=\"helpTemplateContext()\"\n          ></ng-container>\n        }\n      }\n    }\n  </div>\n\n  <input\n    #fileSelector\n    type=\"file\"\n    style=\"display: none\"\n    (change)=\"onFileInputChange()\"\n    [accept]=\"sanitizedFileExtensions().join(',')\"\n    [multiple]=\"false\"\n  />\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { fileSelectorRef: [{ type: i0.ViewChild, args: ['fileSelector', { isSignal: true }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], useBrowseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "useBrowseButton", required: false }] }], browseButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "browseButtonText", required: false }] }], allowedFileExtensions: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedFileExtensions", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helpTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpTemplate", required: false }] }], helpTemplateContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpTemplateContext", required: false }] }], fileAttached: [{ type: i0.Output, args: ["fileAttached"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }] } });
+
+/**
+ * UniFileDropZoneComponent Barrel File
+ *
+ * This file exports all public-facing elements of the file-drop-zone component.
+ */
+
+class UniDebounceInputComponent {
+    inputName = input(...(ngDevMode ? [undefined, { debugName: "inputName" }] : /* istanbul ignore next */ []));
+    inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : /* istanbul ignore next */ []));
+    debounceTime = input(400, ...(ngDevMode ? [{ debugName: "debounceTime" }] : /* istanbul ignore next */ []));
+    change = output();
+    value = signal(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    timeoutId = null;
+    lastEmitted;
+    constructor() {
+        inject(DestroyRef).onDestroy(() => {
+            if (this.timeoutId)
+                clearTimeout(this.timeoutId);
+        });
+    }
+    handleInput(value) {
+        this.value.set(value);
+        // Debounce, emitting only when the value actually changed.
+        if (this.timeoutId)
+            clearTimeout(this.timeoutId);
+        this.timeoutId = setTimeout(() => {
+            if (value !== this.lastEmitted) {
+                this.lastEmitted = value;
+                this.change.emit(value);
+            }
+        }, this.debounceTime());
+    }
+    inputClass = css({
+        border: 'none',
+        fontSize: 18,
+        width: '100%',
+        '&:focus-visible': {
+            outline: 'none',
+        },
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDebounceInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniDebounceInputComponent, isStandalone: true, selector: "DebounceInput, uni-debounce-input", inputs: { inputName: { classPropertyName: "inputName", publicName: "inputName", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, ngImport: i0, template: "<input\n  [class]=\"inputClass\"\n  type=\"text\"\n  [name]=\"inputName()\"\n  [id]=\"inputId()\"\n  [value]=\"value() ?? ''\"\n  (input)=\"handleInput($any($event.target).value)\"\n/>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDebounceInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'DebounceInput, uni-debounce-input', standalone: true, imports: [], template: "<input\n  [class]=\"inputClass\"\n  type=\"text\"\n  [name]=\"inputName()\"\n  [id]=\"inputId()\"\n  [value]=\"value() ?? ''\"\n  (input)=\"handleInput($any($event.target).value)\"\n/>\n" }]
+        }], ctorParameters: () => [], propDecorators: { inputName: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputName", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], change: [{ type: i0.Output, args: ["change"] }] } });
+
+class UniInputBoxComponent extends BaseComponent {
+    className = css({ display: 'contents' });
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    minWidth = input('0', ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
+    color = computed(() => this.error() ? this.componentOptions().errorColor : this.componentOptions().color, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    border = computed(() => this.error() ? this.componentOptions().errorBorder : this.componentOptions().border, ...(ngDevMode ? [{ debugName: "border" }] : /* istanbul ignore next */ []));
+    shadow = computed(() => this.error() ? this.componentOptions().errorShadow : this.componentOptions().shadow, ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
+    inputBoxClass = computed(() => css([
+        this.disabled() && {
+            ...this.theme.color(this.componentOptions().disabledTextColor),
+            ...this.theme.backgroundColor(this.componentOptions().disabledColor),
+            cursor: 'not-allowed !important',
+        },
+        {
+            '& input, select': {
+                ...removeInputPlatformStyling,
+                height: '100%',
+                ...this.theme.paddingLeft(this.componentOptions().paddingLeft),
+                ...this.theme.color(this.componentOptions().textColor),
+                ...this.theme.typeface(this.componentOptions().typeFace),
+            },
+            '&:has(input:disabled, select:disabled)': {
+                ...this.theme.color(this.componentOptions().disabledTextColor),
+                ...this.theme.backgroundColor(this.componentOptions().disabledColor),
+            },
+            '& input:disabled, select:disabled': {
+                cursor: 'not-allowed !important',
+            },
+            '&:has(input:focus, select:focus)': {
+                outline: this.componentOptions().focusOutline,
+                outlineOffset: this.componentOptions().focusOutlineOffset,
+            },
+        },
+    ]), ...(ngDevMode ? [{ debugName: "inputBoxClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniInputBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniInputBoxComponent, isStandalone: true, selector: "uni-input-box", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.className" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'input' }], usesInheritance: true, ngImport: i0, template: "<div\n  row-layout\n  alignItems=\"center\"\n  [height]=\"componentOptions().height\"\n  [color]=\"color()\"\n  [border]=\"border()\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  [shadow]=\"shadow()\"\n  [minWidth]=\"minWidth()\"\n  [class]=\"inputBoxClass()\"\n  position=\"relative\"\n>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ 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: UniInputBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-input-box', imports: [UniRowComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'input' }], template: "<div\n  row-layout\n  alignItems=\"center\"\n  [height]=\"componentOptions().height\"\n  [color]=\"color()\"\n  [border]=\"border()\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  [shadow]=\"shadow()\"\n  [minWidth]=\"minWidth()\"\n  [class]=\"inputBoxClass()\"\n  position=\"relative\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }] } });
+
+class UniInputComponent {
+    // --- REQUIRED SIGNALS (populated by FormValueControl) ---
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    // --- CONFIGURATION ---
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    // Only show errors if the user has actually interacted with the field
+    showError = computed(() => this.invalid() && (this.touched() || this.dirty()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    markAsTouched() {
+        this.touched.set(true);
+    }
+    inputClass = css({});
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniInputComponent, isStandalone: true, selector: "uni-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: "<uni-input-box [error]=\"showError()\">\n  <ng-content select=\"pre-input\" />\n  <input\n    [value]=\"value()\"\n    (input)=\"value.set($any($event.target).value)\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    (blur)=\"markAsTouched()\"\n    [class]=\"inputClass\"\n  />\n  <ng-content select=\"post-input\" />\n</uni-input-box>\n", dependencies: [{ kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-input', imports: [UniInputBoxComponent], template: "<uni-input-box [error]=\"showError()\">\n  <ng-content select=\"pre-input\" />\n  <input\n    [value]=\"value()\"\n    (input)=\"value.set($any($event.target).value)\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    (blur)=\"markAsTouched()\"\n    [class]=\"inputClass\"\n  />\n  <ng-content select=\"post-input\" />\n</uni-input-box>\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
+
+class UniJsonViewComponent {
+    json = input(...(ngDevMode ? [undefined, { debugName: "json" }] : /* istanbul ignore next */ []));
+    rows = input(6, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    fontSize = input('medium', ...(ngDevMode ? [{ debugName: "fontSize" }] : /* istanbul ignore next */ []));
+    width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    selectOnClick = input(true, ...(ngDevMode ? [{ debugName: "selectOnClick" }] : /* istanbul ignore next */ []));
+    jsonString = computed(() => JSON.stringify(this.json(), null, 2), ...(ngDevMode ? [{ debugName: "jsonString" }] : /* istanbul ignore next */ []));
+    className = computed(() => css({
+        fontSize: this.fontSize(),
+        width: this.width(),
+    }), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    selectContents(jsonArea) {
+        if (!this.selectOnClick())
+            return;
+        jsonArea.select();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniJsonViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniJsonViewComponent, isStandalone: true, selector: "uni-json-view", inputs: { json: { classPropertyName: "json", publicName: "json", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, fontSize: { classPropertyName: "fontSize", publicName: "fontSize", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, selectOnClick: { classPropertyName: "selectOnClick", publicName: "selectOnClick", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<textarea\n  #jsonArea\n  (click)=\"selectContents(jsonArea)\"\n  [class]=\"className()\"\n  [rows]=\"rows()\"\n  >{{ jsonString() }}</textarea\n>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniJsonViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-json-view', imports: [], template: "<textarea\n  #jsonArea\n  (click)=\"selectContents(jsonArea)\"\n  [class]=\"className()\"\n  [rows]=\"rows()\"\n  >{{ jsonString() }}</textarea\n>\n" }]
+        }], propDecorators: { json: [{ type: i0.Input, args: [{ isSignal: true, alias: "json", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], fontSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fontSize", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], selectOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOnClick", required: false }] }] } });
+
+/**
+ * UniJsonViewComponent Barrel File
+ *
+ * This file exports all public-facing elements of the json-view component.
+ */
+
+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 */ []));
@@ -2025,6 +3395,266 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 args: ['class']
             }] } });
 
+class UniMultiSelectComponent {
+    // Data Inputs
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    selections = input(undefined, ...(ngDevMode ? [{ debugName: "selections" }] : /* istanbul ignore next */ []));
+    updates = output();
+    // Styling Inputs
+    flexDirection = input('column', ...(ngDevMode ? [{ debugName: "flexDirection" }] : /* istanbul ignore next */ []));
+    checkboxGap = input('sm', ...(ngDevMode ? [{ debugName: "checkboxGap" }] : /* istanbul ignore next */ []));
+    optionsWithSelections = [];
+    values = [];
+    className = css({ display: 'contents' });
+    constructor() {
+        effect(() => {
+            this.values = this.selections() || [];
+            this.optionsWithSelections = this.options().map((option) => ({
+                ...option,
+                selected: this.values.includes(option.value),
+            }));
+        });
+    }
+    handleCheck(checked, value) {
+        const selections = this.selections();
+        if (!selections && !checked)
+            return;
+        if (selections && !checked) {
+            const filteredSelections = selections.filter((item) => item != value);
+            const isEmpty = filteredSelections.length === 0;
+            this.updates.emit(isEmpty ? undefined : filteredSelections);
+            return;
+        }
+        if (checked) {
+            this.updates.emit([...(selections || []), value]);
+            return;
+        }
+    }
+    selectAll() {
+        const allValues = this.options().map((option) => option.value);
+        this.updates.emit(allValues);
+    }
+    deselectAll() {
+        this.updates.emit(undefined);
+    }
+    optionWrapper = css({
+        display: 'flex',
+        alignItems: 'center',
+        width: '100%',
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMultiSelectComponent, isStandalone: true, selector: "uni-multi-select, MultiSelect", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selections: { classPropertyName: "selections", publicName: "selections", isSignal: true, isRequired: false, transformFunction: null }, flexDirection: { classPropertyName: "flexDirection", publicName: "flexDirection", isSignal: true, isRequired: false, transformFunction: null }, checkboxGap: { classPropertyName: "checkboxGap", publicName: "checkboxGap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updates: "updates" }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<div\n  box-layout\n  display=\"flex\"\n  [flexDirection]=\"flexDirection()\"\n  [gap]=\"checkboxGap()\"\n>\n  @for (option of options(); track option) {\n    <div [class]=\"optionWrapper\">\n      <uni-checkbox\n        [label]=\"option.label\"\n        [checked]=\"values.indexOf(option.value) > -1\"\n        (checkedChange)=\"handleCheck($event, option.value)\"\n        variant=\"primary\"\n      >\n      </uni-checkbox>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: UniCheckboxComponent, selector: "uni-checkbox, Checkbox", inputs: ["checked", "disabled", "touched", "invalid", "dirty", "label"], outputs: ["checkedChange", "touchedChange"] }, { 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: UniMultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-multi-select, MultiSelect', imports: [UniCheckboxComponent, UniBoxComponent], template: "<div\n  box-layout\n  display=\"flex\"\n  [flexDirection]=\"flexDirection()\"\n  [gap]=\"checkboxGap()\"\n>\n  @for (option of options(); track option) {\n    <div [class]=\"optionWrapper\">\n      <uni-checkbox\n        [label]=\"option.label\"\n        [checked]=\"values.indexOf(option.value) > -1\"\n        (checkedChange)=\"handleCheck($event, option.value)\"\n        variant=\"primary\"\n      >\n      </uni-checkbox>\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], selections: [{ type: i0.Input, args: [{ isSignal: true, alias: "selections", required: false }] }], updates: [{ type: i0.Output, args: ["updates"] }], flexDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexDirection", required: false }] }], checkboxGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxGap", required: false }] }], className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class UniMultiSelectDropdownComponent extends BaseComponent {
+    className = css({ display: 'contents' });
+    // --- REQUIRED SIGNALS (populated by FormValueControl) ---
+    value = model([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    // --- CONFIGURATION ---
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    filteredOptions = computed(() => {
+        const filterText = this.query().toLowerCase();
+        return this.options().filter((opt) => opt.label.toLowerCase().includes(filterText));
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    // Derived display string
+    selectedLabelsText = computed(() => {
+        const selections = this.value();
+        const allOptions = this.options();
+        // Find labels for each selected ID
+        const labels = selections
+            .map((value) => allOptions.find((opt) => opt.value === value)?.label)
+            .filter((label) => !!label); // Remove undefined if an ID isn't found
+        return labels.length > 0 ? labels.join(', ') : this.placeholder();
+    }, ...(ngDevMode ? [{ debugName: "selectedLabelsText" }] : /* istanbul ignore next */ []));
+    showError = computed(() => this.invalid() && (this.touched() || this.dirty()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    textColor = computed(() => {
+        return this.selectedLabelsText() === this.placeholder()
+            ? this.componentOptions().placeholderTextColor
+            : this.componentOptions().textColor;
+    }, ...(ngDevMode ? [{ debugName: "textColor" }] : /* istanbul ignore next */ []));
+    triggerClass = css({
+        all: 'unset',
+        display: 'block',
+        cursor: 'pointer',
+        width: '100%',
+        '&:focus > :first-child > :first-child': {
+            outline: this.componentOptions().focusOutline,
+            outlineOffset: this.componentOptions().focusOutlineOffset,
+        },
+    });
+    searchInputClass;
+    constructor() {
+        super();
+        effect(() => {
+            this.searchInputClass = css({
+                ...removeInputPlatformStyling,
+                ...this.theme.border(this.componentOptions().searchInputBorder),
+                ...this.theme.radius(this.componentOptions().searchInputBorderRadius),
+                paddingBlock: 4,
+                paddingInline: 8,
+                width: 'auto',
+                '&:focus': {
+                    outline: this.componentOptions().focusOutline,
+                    outlineOffset: this.componentOptions().focusOutlineOffset,
+                },
+            });
+        });
+    }
+    selectAll() {
+        if (this.disabled())
+            return;
+        this.touched.set(true);
+        const allValues = this.options().map((option) => option.value);
+        this.value.set(allValues);
+    }
+    deselectAll() {
+        if (this.disabled())
+            return;
+        this.touched.set(true);
+        this.value.set([]);
+    }
+    isOptionSelected(option) {
+        return computed(() => this.value().includes(option.value));
+    }
+    toggleOption(option, checked) {
+        if (this.disabled())
+            return;
+        this.touched.set(true);
+        const { value } = option;
+        this.value.update((current) => {
+            if (checked) {
+                // Add selection if not already present
+                return current.includes(value) ? current : [...current, value];
+            }
+            else {
+                // Remove selection
+                return current.filter((item) => item !== value);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMultiSelectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMultiSelectDropdownComponent, isStandalone: true, selector: "uni-multi-select-dropdown, MultiSelectDropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { properties: { "class": "this.className" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'multiSelectDropdown' }], usesInheritance: true, ngImport: i0, template: "<button\n  [class]=\"triggerClass\"\n  #trigger\n  [style.cursor]=\"disabled() ? 'default' : 'pointer'\"\n  (click)=\"!disabled() && touched.set(true)\"\n>\n  <uni-input-box [error]=\"showError()\" [disabled]=\"disabled()\">\n    <div\n      row-layout\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      [fullWidth]=\"true\"\n      [minWidth]=\"0\"\n      paddingLeft=\"sm\"\n    >\n      <Text\n        display=\"block\"\n        [typeface]=\"componentOptions().textRole\"\n        [color]=\"textColor()\"\n        [ellipsis]=\"true\"\n        [style.flex-grow]=\"1\"\n        >{{ selectedLabelsText() }}</Text\n      >\n      <Symbol name=\"keyboard_arrow_down\" [style.flex-shrink]=\"0\"></Symbol>\n    </div>\n  </uni-input-box>\n</button>\n<uni-dropdown\n  #dropdown\n  [trigger]=\"trigger\"\n  (dropdownShowing)=\"$event && searchInput.focus()\"\n  (dropdownHiding)=\"$event && trigger.focus()\"\n>\n  <div box-layout gap=\"xs\" padding=\"xs\">\n    <input\n      #searchInput\n      type=\"text\"\n      [class]=\"searchInputClass\"\n      [value]=\"query()\"\n      (input)=\"query.set($any($event.target).value)\"\n      placeholder=\"Search...\"\n      (click)=\"$event.stopPropagation()\"\n      [disabled]=\"disabled()\"\n    />\n  </div>\n\n  <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n  <div stack-layout gap=\"xs\" padding=\"xs\">\n    @for (option of filteredOptions(); track option.value) {\n      <uni-checkbox\n        [label]=\"option.label\"\n        [checked]=\"isOptionSelected(option)()\"\n        (checkedChange)=\"toggleOption(option, $event)\"\n        variant=\"primary\"\n        [disabled]=\"disabled()\"\n      >\n      </uni-checkbox>\n    }\n  </div>\n\n  <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n  <div row-layout gap=\"xs\" justifyContent=\"space-around\" padding=\"xs\">\n    <button\n      text-button\n      (click)=\"dropdown.hideDropdown()\"\n      size=\"sm\"\n      variant=\"ghost\"\n    >\n      Done\n    </button>\n  </div>\n</uni-dropdown>\n", dependencies: [{ kind: "component", type: UniCheckboxComponent, selector: "uni-checkbox, Checkbox", inputs: ["checked", "disabled", "touched", "invalid", "dirty", "label"], outputs: ["checkedChange", "touchedChange"] }, { 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: UniDropdownComponent, selector: "uni-dropdown, Dropdown", inputs: ["trigger", "placement", "offset", "paddingVertical", "paddingHorizontal"], outputs: ["dropdownShowing", "dropdownHiding"] }, { kind: "component", type: UniStackComponent, selector: "div[uni-stack-layout], Stack, div[stack-layout]", inputs: ["display", "flexDirection", "minHeight"] }, { kind: "component", type: UniDividerComponent, selector: "uni-divider, Divider", inputs: ["orientation", "border"] }, { kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], Button, button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }, { 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: UniRowComponent, selector: "div[uni-row-layout], Row, div[row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMultiSelectDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-multi-select-dropdown, MultiSelectDropdown', imports: [
+                        UniCheckboxComponent,
+                        UniBoxComponent,
+                        UniDropdownComponent,
+                        UniStackComponent,
+                        UniDividerComponent,
+                        UniButtonComponent,
+                        UniTextComponent,
+                        UniSymbolComponent,
+                        UniRowComponent,
+                        UniInputBoxComponent,
+                    ], providers: [{ provide: COMPONENT_NAME, useValue: 'multiSelectDropdown' }], template: "<button\n  [class]=\"triggerClass\"\n  #trigger\n  [style.cursor]=\"disabled() ? 'default' : 'pointer'\"\n  (click)=\"!disabled() && touched.set(true)\"\n>\n  <uni-input-box [error]=\"showError()\" [disabled]=\"disabled()\">\n    <div\n      row-layout\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      [fullWidth]=\"true\"\n      [minWidth]=\"0\"\n      paddingLeft=\"sm\"\n    >\n      <Text\n        display=\"block\"\n        [typeface]=\"componentOptions().textRole\"\n        [color]=\"textColor()\"\n        [ellipsis]=\"true\"\n        [style.flex-grow]=\"1\"\n        >{{ selectedLabelsText() }}</Text\n      >\n      <Symbol name=\"keyboard_arrow_down\" [style.flex-shrink]=\"0\"></Symbol>\n    </div>\n  </uni-input-box>\n</button>\n<uni-dropdown\n  #dropdown\n  [trigger]=\"trigger\"\n  (dropdownShowing)=\"$event && searchInput.focus()\"\n  (dropdownHiding)=\"$event && trigger.focus()\"\n>\n  <div box-layout gap=\"xs\" padding=\"xs\">\n    <input\n      #searchInput\n      type=\"text\"\n      [class]=\"searchInputClass\"\n      [value]=\"query()\"\n      (input)=\"query.set($any($event.target).value)\"\n      placeholder=\"Search...\"\n      (click)=\"$event.stopPropagation()\"\n      [disabled]=\"disabled()\"\n    />\n  </div>\n\n  <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n  <div stack-layout gap=\"xs\" padding=\"xs\">\n    @for (option of filteredOptions(); track option.value) {\n      <uni-checkbox\n        [label]=\"option.label\"\n        [checked]=\"isOptionSelected(option)()\"\n        (checkedChange)=\"toggleOption(option, $event)\"\n        variant=\"primary\"\n        [disabled]=\"disabled()\"\n      >\n      </uni-checkbox>\n    }\n  </div>\n\n  <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n  <div row-layout gap=\"xs\" justifyContent=\"space-around\" padding=\"xs\">\n    <button\n      text-button\n      (click)=\"dropdown.hideDropdown()\"\n      size=\"sm\"\n      variant=\"ghost\"\n    >\n      Done\n    </button>\n  </div>\n</uni-dropdown>\n" }]
+        }], ctorParameters: () => [], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
+
+class UniNotificationBadgeComponent extends BaseComponent {
+    count = input(undefined, ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    maxCount = input(99, ...(ngDevMode ? [{ debugName: "maxCount" }] : /* istanbul ignore next */ []));
+    badgeVariant = input('count', ...(ngDevMode ? [{ debugName: "badgeVariant" }] : /* istanbul ignore next */ []));
+    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    position = input('top-right', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    show = input(true, ...(ngDevMode ? [{ debugName: "show" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => {
+        const count = this.count();
+        const maxCount = this.maxCount();
+        const variant = this.badgeVariant();
+        if (variant === 'dot') {
+            return '';
+        }
+        if (count === undefined || count <= 0) {
+            return '';
+        }
+        if (count > maxCount) {
+            return `${maxCount}+`;
+        }
+        return count.toString();
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    shouldShow = computed(() => {
+        const show = this.show();
+        const count = this.count();
+        const variant = this.badgeVariant();
+        if (!show)
+            return false;
+        if (variant === 'dot')
+            return true;
+        return count !== undefined && count > 0;
+    }, ...(ngDevMode ? [{ debugName: "shouldShow" }] : /* istanbul ignore next */ []));
+    get className() {
+        const variant = this.badgeVariant();
+        const color = this.color();
+        const position = this.position();
+        const offset = this.componentOptions().offset + 'px';
+        const positionStyles = {
+            'top-right': { top: offset, right: offset },
+            'top-left': { top: offset, left: offset },
+            'bottom-right': { bottom: offset, right: offset },
+            'bottom-left': { bottom: offset, left: offset },
+        }[position];
+        const variantStyles = {
+            dot: {
+                width: '8px',
+                height: '8px',
+                borderRadius: '50%',
+                minWidth: 'unset',
+            },
+            count: {
+                width: 20,
+                height: 20,
+                borderRadius: 10,
+            },
+            pill: {
+                minWidth: '24px',
+                height: '20px',
+                borderRadius: '10px',
+                padding: '0 8px',
+            },
+        }[variant];
+        return css({
+            position: 'relative',
+            display: 'inline-block',
+            '& .notification-badge-indicator': {
+                position: 'absolute',
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                ...this.theme.getContainerColors(color || 'warn'),
+                zIndex: 1,
+                ...positionStyles,
+                ...variantStyles,
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniNotificationBadgeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniNotificationBadgeComponent, isStandalone: true, selector: "uni-notification-badge", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, maxCount: { classPropertyName: "maxCount", publicName: "maxCount", isSignal: true, isRequired: false, transformFunction: null }, badgeVariant: { classPropertyName: "badgeVariant", publicName: "badgeVariant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.className" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'notificationBadge' }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n@if (shouldShow()) {\n<div class=\"notification-badge-indicator\">\n  <uni-text\n    typeface=\"overline\"\n    align=\"center\"\n    [style.max-width]=\"badgeVariant() !== 'pill' ? (displayValue().length * 5 + 'px') : ''\"\n    >{{ displayValue() }}</uni-text\n  >\n</div>\n}\n", dependencies: [{ kind: "component", type: UniTextComponent, selector: "uni-text, Text", inputs: ["typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniNotificationBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-notification-badge', imports: [UniTextComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'notificationBadge' }], template: "<ng-content></ng-content>\n@if (shouldShow()) {\n<div class=\"notification-badge-indicator\">\n  <uni-text\n    typeface=\"overline\"\n    align=\"center\"\n    [style.max-width]=\"badgeVariant() !== 'pill' ? (displayValue().length * 5 + 'px') : ''\"\n    >{{ displayValue() }}</uni-text\n  >\n</div>\n}\n" }]
+        }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], maxCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCount", required: false }] }], badgeVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeVariant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }], className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
 class UniAlertComponent extends BaseComponent {
     show = model(...(ngDevMode ? [undefined, { debugName: "show" }] : /* istanbul ignore next */ []));
     iconName = input(undefined, ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
@@ -2293,125 +3923,189 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
             args: [{ selector: 'uni-notifications, Notifications', standalone: true, imports: [UniAlertComponent, UniSnackbarComponent, ConfirmationDialogComponent], template: "<Alert\n  [show]=\"showAlert()\"\n  (showing)=\"handleAlertShowingEvent($event)\"\n  [variant]=\"alert()?.variant || 'primary'\"\n  [iconName]=\"alert()?.iconName\"\n  [symbolName]=\"alert()?.symbolName\"\n  >{{ alert()?.message }}</Alert\n>\n\n<Snackbar\n  [show]=\"showSnackbar()\"\n  (showing)=\"handleSnackbarShowingEvent($event)\"\n  [variant]=\"snackbar()?.variant || 'primary'\"\n  [actionLabel]=\"snackbar()?.actionLabel\"\n  (action)=\"snackbar()?.action?.()\"\n  [timeout]=\"snackbar()?.timeout\"\n  [iconName]=\"snackbar()?.iconName\"\n  [symbolName]=\"snackbar()?.symbolName\"\n  >{{ snackbar()?.message }}</Snackbar\n>\n\n<Confirmation\n  [show]=\"showConfirmation()\"\n  (showing)=\"handleConfirmationShowingEvent($event)\"\n  [confirmation]=\"confirmation()\"\n></Confirmation>\n" }]
         }], ctorParameters: () => [] });
 
-class UniTooltipComponent extends BaseComponent {
-    elRef = inject(ElementRef);
-    renderer = inject(Renderer2);
-    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;
+class UniPaginatorComponent extends BaseComponent {
+    datasource = input(...(ngDevMode ? [undefined, { debugName: "datasource" }] : /* istanbul ignore next */ []));
+    initPageSize = input(...(ngDevMode ? [undefined, { debugName: "initPageSize" }] : /* istanbul ignore next */ []));
+    showPageSize = input(true, ...(ngDevMode ? [{ debugName: "showPageSize" }] : /* istanbul ignore next */ []));
+    showPageJumper = input(true, ...(ngDevMode ? [{ debugName: "showPageJumper" }] : /* istanbul ignore next */ []));
+    showPageNumbers = input(true, ...(ngDevMode ? [{ debugName: "showPageNumbers" }] : /* istanbul ignore next */ []));
+    inputClass;
+    pageClass;
     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();
-            }
+            const pageSize = this.initPageSize();
+            if (!pageSize)
+                return;
+            const ds = this.datasource();
+            if (ds)
+                ds.setPageSize(pageSize);
+        });
+        effect(() => {
+            this.inputClass = css({
+                textAlign: 'center',
+                ...this.theme.border(this.componentOptions().inputBorder),
+                ...this.theme.radius(this.componentOptions().inputBorderRadius),
+                height: 22,
+                fontSize: 16,
+                padding: '2px 0 0 2px',
+                '&:focus': {
+                    outline: 'none',
+                },
+            });
+            this.pageClass = css({
+                ...this.theme.radius(this.componentOptions().pageBorderRadius),
+                padding: 2,
+                width: 20,
+                display: 'flex',
+                justifyContent: 'center',
+                cursor: 'pointer',
+                border: 'solid 1px transparent',
+                '&.current': {
+                    ...this.theme.border(this.componentOptions().currentPageBorder),
+                    ...this.theme.radius(this.componentOptions().currentPageBorderRadius),
+                    cursor: 'unset',
+                },
+                '&:hover:not(.current)': {
+                    backgroundColor: 'rgba(0,0,0,0.1)',
+                },
+            });
         });
     }
-    toggleTooltip() {
-        if (this.tooltip) {
-            this.hideTooltip();
-        }
-        else {
-            this.showTooltip();
-        }
-    }
-    mouseenter() {
-        this.isMouseInside.set(true);
-        this.timer.start(this.hoverDelayMs());
+    updatePageSize(event) {
+        const ds = this.datasource();
+        const pageSize = event.target.value;
+        if (ds)
+            ds.setPageSize(parseInt(pageSize));
     }
-    mouseleave() {
-        this.isMouseInside.set(false);
-        this.timer.stop();
+    jumpToPage(event) {
+        const ds = this.datasource();
+        const page = event.target.value;
+        if (ds)
+            ds.jumpToPage(parseInt(page));
     }
-    showTooltip() {
-        if (this.tooltip)
-            return;
-        this.initializeTooltip();
-        this.renderer.setAttribute(this.tooltip, 'fade', 'in');
+    isNumber(page) {
+        return typeof page === 'number';
     }
-    hideTooltip() {
-        if (!this.tooltip)
-            return;
-        this.renderer.setAttribute(this.tooltip, 'fade', 'out');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniPaginatorComponent, isStandalone: true, selector: "uni-paginator, Paginator", inputs: { datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: false, transformFunction: null }, initPageSize: { classPropertyName: "initPageSize", publicName: "initPageSize", isSignal: true, isRequired: false, transformFunction: null }, showPageSize: { classPropertyName: "showPageSize", publicName: "showPageSize", isSignal: true, isRequired: false, transformFunction: null }, showPageJumper: { classPropertyName: "showPageJumper", publicName: "showPageJumper", isSignal: true, isRequired: false, transformFunction: null }, showPageNumbers: { classPropertyName: "showPageNumbers", publicName: "showPageNumbers", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: COMPONENT_NAME, useValue: 'paginator' }], usesInheritance: true, ngImport: i0, template: "@let ds = datasource();\n@if (ds) {\n  <div row-layout alignItems=\"center\" [gap]=\"componentOptions().gap\">\n    @if (showPageSize()) {\n      <div row-layout alignItems=\"center\" gap=\"sm\" paddingRight=\"sm\">\n        <Text [typeface]=\"componentOptions().textRole\">Show</Text>\n        <input\n          type=\"number\"\n          [class]=\"inputClass\"\n          (change)=\"updatePageSize($event)\"\n          min=\"1\"\n          [max]=\"ds.recordCount()\"\n          [value]=\"ds.pageSize()\"\n        />\n      </div>\n    }\n\n    @if (showPageNumbers()) {\n      <button\n        icon-button\n        variant=\"ghost\"\n        size=\"md\"\n        symbolName=\"keyboard_double_arrow_left\"\n        (click)=\"ds.firstPage()\"\n        [disable]=\"ds.disablePrevious()\"\n      >\n        First Page\n      </button>\n\n      <button\n        icon-button\n        variant=\"ghost\"\n        size=\"md\"\n        symbolName=\"chevron_left\"\n        (click)=\"ds.previousPage()\"\n        [disable]=\"ds.disablePrevious()\"\n      >\n        Previous Page\n      </button>\n\n      @for (page of ds.truncatedPages(); track page) {\n        @if (isNumber(page)) {\n          <div\n            [class]=\"pageClass\"\n            [class.current]=\"page === ds.pageIndex() + 1\"\n            (click)=\"ds.jumpToPage(page)\"\n          >\n            <Text [typeface]=\"componentOptions().textRole\" display=\"block\">\n              {{ page }}\n            </Text>\n          </div>\n        } @else {\n          <div>\n            <Text [typeface]=\"componentOptions().textRole\" display=\"block\">\n              {{ page }}\n            </Text>\n          </div>\n        }\n      }\n\n      <button\n        icon-button\n        variant=\"ghost\"\n        size=\"md\"\n        symbolName=\"chevron_right\"\n        (click)=\"ds.nextPage()\"\n        [disable]=\"ds.disableNext()\"\n      >\n        Next Page\n      </button>\n\n      <button\n        icon-button\n        variant=\"ghost\"\n        size=\"md\"\n        symbolName=\"keyboard_double_arrow_right\"\n        (click)=\"ds.lastPage()\"\n        [disable]=\"ds.disableNext()\"\n      >\n        Last Page\n      </button>\n    }\n\n    @if (showPageJumper()) {\n      <div row-layout alignItems=\"center\" gap=\"sm\" paddingLeft=\"sm\">\n        <Text [typeface]=\"componentOptions().textRole\">Jump to</Text>\n        <input\n          type=\"number\"\n          [class]=\"inputClass\"\n          (change)=\"jumpToPage($event)\"\n          min=\"1\"\n          [max]=\"ds.pageCount()\"\n          [value]=\"ds.pageIndex() + 1\"\n        />\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "div[uni-row-layout], Row, div[row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniTextComponent, selector: "uni-text, Text", inputs: ["typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniPaginatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-paginator, Paginator', imports: [UniRowComponent, UniIconButtonComponent, UniTextComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'paginator' }], standalone: true, template: "@let ds = datasource();\n@if (ds) {\n  <div row-layout alignItems=\"center\" [gap]=\"componentOptions().gap\">\n    @if (showPageSize()) {\n      <div row-layout alignItems=\"center\" gap=\"sm\" paddingRight=\"sm\">\n        <Text [typeface]=\"componentOptions().textRole\">Show</Text>\n        <input\n          type=\"number\"\n          [class]=\"inputClass\"\n          (change)=\"updatePageSize($event)\"\n          min=\"1\"\n          [max]=\"ds.recordCount()\"\n          [value]=\"ds.pageSize()\"\n        />\n      </div>\n    }\n\n    @if (showPageNumbers()) {\n      <button\n        icon-button\n        variant=\"ghost\"\n        size=\"md\"\n        symbolName=\"keyboard_double_arrow_left\"\n        (click)=\"ds.firstPage()\"\n        [disable]=\"ds.disablePrevious()\"\n      >\n        First Page\n      </button>\n\n      <button\n        icon-button\n        variant=\"ghost\"\n        size=\"md\"\n        symbolName=\"chevron_left\"\n        (click)=\"ds.previousPage()\"\n        [disable]=\"ds.disablePrevious()\"\n      >\n        Previous Page\n      </button>\n\n      @for (page of ds.truncatedPages(); track page) {\n        @if (isNumber(page)) {\n          <div\n            [class]=\"pageClass\"\n            [class.current]=\"page === ds.pageIndex() + 1\"\n            (click)=\"ds.jumpToPage(page)\"\n          >\n            <Text [typeface]=\"componentOptions().textRole\" display=\"block\">\n              {{ page }}\n            </Text>\n          </div>\n        } @else {\n          <div>\n            <Text [typeface]=\"componentOptions().textRole\" display=\"block\">\n              {{ page }}\n            </Text>\n          </div>\n        }\n      }\n\n      <button\n        icon-button\n        variant=\"ghost\"\n        size=\"md\"\n        symbolName=\"chevron_right\"\n        (click)=\"ds.nextPage()\"\n        [disable]=\"ds.disableNext()\"\n      >\n        Next Page\n      </button>\n\n      <button\n        icon-button\n        variant=\"ghost\"\n        size=\"md\"\n        symbolName=\"keyboard_double_arrow_right\"\n        (click)=\"ds.lastPage()\"\n        [disable]=\"ds.disableNext()\"\n      >\n        Last Page\n      </button>\n    }\n\n    @if (showPageJumper()) {\n      <div row-layout alignItems=\"center\" gap=\"sm\" paddingLeft=\"sm\">\n        <Text [typeface]=\"componentOptions().textRole\">Jump to</Text>\n        <input\n          type=\"number\"\n          [class]=\"inputClass\"\n          (change)=\"jumpToPage($event)\"\n          min=\"1\"\n          [max]=\"ds.pageCount()\"\n          [value]=\"ds.pageIndex() + 1\"\n        />\n      </div>\n    }\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { datasource: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasource", required: false }] }], initPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "initPageSize", required: false }] }], showPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSize", required: false }] }], showPageJumper: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageJumper", required: false }] }], showPageNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageNumbers", required: false }] }] } });
+
+/**
+ * UniPaginatorComponent Barrel File
+ *
+ * This file exports all public-facing elements of the paginator component.
+ */
+
+class UniPopoverComponent {
+    renderer = inject(Renderer2);
+    theme = inject(ThemeService);
+    delay = 500;
+    showing = false;
+    clickListener;
+    placement = input(...(ngDevMode ? [undefined, { debugName: "placement" }] : /* istanbul ignore next */ []));
+    autoClose = input(true, ...(ngDevMode ? [{ debugName: "autoClose" }] : /* istanbul ignore next */ []));
+    triggerRef = viewChild.required('trigger');
+    popoverRef = viewChild.required('popover');
+    arrowRef = viewChild.required('arrow');
+    get _trigger() {
+        return this.triggerRef().nativeElement.firstChild;
     }
-    get className() {
-        return css({
-            display: 'inline-flex',
-        }, this.inlineText() && {
-            cursor: 'help',
-            textDecoration: 'underline',
-            textDecorationStyle: 'dotted',
-        });
+    get _popover() {
+        return this.popoverRef().nativeElement;
     }
-    tooltipFadeIn = keyframes({ ...fadeIn });
-    tooltipFadeOut = keyframes({ ...fadeOut });
-    tooltipClassName = css([
+    get _arrow() {
+        return this.arrowRef().nativeElement;
+    }
+    ngOnInit() {
+        if (this.autoClose()) {
+            this.clickListener = this.renderer.listen('window', 'click', (e) => {
+                if (!e.composedPath().includes(this._popover) && this.showing)
+                    this.hidePopover();
+            });
+        }
+    }
+    showPopover() {
+        this.setPosition();
+        this.renderer.addClass(this._popover, this.showClassName);
+        this.showing = true;
+    }
+    hidePopover() {
+        this.renderer.removeClass(this._popover, this.showClassName);
+        this.showing = false;
+        setTimeout(() => {
+            this.renderer.setStyle(this._popover, 'left', `-1000px`);
+        }, this.delay);
+    }
+    togglePopover(event) {
+        if (this.showing) {
+            this.hidePopover();
+        }
+        else {
+            this.showPopover();
+        }
+        event.stopPropagation();
+    }
+    popoverClassName = 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,
+            ...this.theme.colorPair('primary-surface'),
+            ...this.theme.radius('xs'),
+            ...this.theme.boxShadow('raised'),
+            ...this.theme.typeface('label'),
+            ...this.theme.border('quaternary'),
+            padding: '6px 12px',
             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`,
-            },
+            transition: `opacity ${this.delay}ms`,
+            opacity: 0,
+            zIndex: Z_INDEX.popover,
         },
     ]);
     arrowClassName = css({
         position: 'absolute',
-        ...this.theme.colorPair(this.componentOptions().color),
+        ...this.theme.colorPair('primary-surface'),
         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);
-    }
+    showClassName = css({
+        opacity: '1 !important',
+    });
+    arrowClasses = {
+        top: css({
+            top: '-5px',
+            ...this.theme.borderLeft('quaternary'),
+            ...this.theme.borderTop('quaternary'),
+        }),
+        bottom: css({
+            bottom: '-5px',
+            ...this.theme.borderRight('quaternary'),
+            ...this.theme.borderBottom('quaternary'),
+        }),
+        left: css({
+            left: '-5px',
+            ...this.theme.borderLeft('quaternary'),
+            ...this.theme.borderBottom('quaternary'),
+        }),
+        right: css({
+            right: '-5px',
+            ...this.theme.borderRight('quaternary'),
+            ...this.theme.borderTop('quaternary'),
+        }),
+    };
     setPosition() {
-        if (!this.tooltip || !this.arrow)
-            return;
-        computePosition(this.elRef.nativeElement, this.tooltip, {
+        computePosition(this._trigger, this._popover, {
             placement: this.placement(),
-            middleware: [offset(6), flip(), shift({ padding: 5 }), arrow({ element: this.arrow })],
+            middleware: [offset(7), 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
+            this.renderer.setStyle(this._popover, 'top', `${y}px`);
+            this.renderer.setStyle(this._popover, 'left', `${x}px`);
             const arrowX = middlewareData.arrow?.x;
             const arrowY = middlewareData.arrow?.y;
             const staticSide = {
@@ -2420,58 +4114,441 @@ class UniTooltipComponent extends BaseComponent {
                 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', ``);
+            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`);
+                this.renderer.addClass(this._arrow, this.arrowClasses[staticSide]);
             }
         });
     }
-    initializeTooltip() {
-        this.createTooltip();
-        this.createArrow();
-        this.setPosition();
+    ngOnDestroy() {
+        if (this.clickListener) {
+            this.clickListener();
+        }
     }
-    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;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: UniPopoverComponent, isStandalone: true, selector: "uni-popover, Popover", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "popoverRef", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "arrowRef", first: true, predicate: ["arrow"], descendants: true, isSignal: true }], ngImport: i0, template: "<span #trigger (click)=\"togglePopover($event)\">\n  <ng-content select=\"[trigger]\"></ng-content>\n</span>\n<div uniBodyRender #popover [class]=\"popoverClassName\">\n  <ng-content></ng-content>\n  <div #arrow [class]=\"arrowClassName\"></div>\n</div>\n", dependencies: [{ kind: "directive", type: BodyRenderDirective, selector: "[uniBodyRender]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniPopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-popover, Popover', standalone: true, imports: [BodyRenderDirective], template: "<span #trigger (click)=\"togglePopover($event)\">\n  <ng-content select=\"[trigger]\"></ng-content>\n</span>\n<div uniBodyRender #popover [class]=\"popoverClassName\">\n  <ng-content></ng-content>\n  <div #arrow [class]=\"arrowClassName\"></div>\n</div>\n" }]
+        }], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], autoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClose", required: false }] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], popoverRef: [{ type: i0.ViewChild, args: ['popover', { isSignal: true }] }], arrowRef: [{ type: i0.ViewChild, args: ['arrow', { isSignal: true }] }] } });
+
+/**
+ * UniPopoverComponent Barrel File
+ *
+ * This file exports all public-facing elements of the popover component.
+ */
+
+class UniProgressBarComponent {
+    theme = inject(ThemeService);
+    palette = this.theme.colors;
+    width = input(560, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    height = input(24, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    percent = input(0, ...(ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []));
+    stroke = 1;
+    get className() {
+        return css([{ display: 'block' }]);
     }
-    ngOnDestroy() {
-        this.hideTooltip();
+    Math = Math;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniProgressBarComponent, isStandalone: true, selector: "uni-progress-bar, ProgressBar", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, percent: { classPropertyName: "percent", publicName: "percent", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<svg [attr.width]=\"width()\" [attr.height]=\"height()\">\n  <rect\n    [attr.x]=\"stroke\"\n    [attr.y]=\"stroke\"\n    [attr.width]=\"width() - stroke * 2\"\n    [attr.height]=\"height() - stroke * 2\"\n    [attr.fill]=\"palette()['primary-surface']\"\n    [attr.stroke]=\"palette()['on-background-variant']\"\n    [attr.stroke-width]=\"stroke\"\n    [attr.ry]=\"height() / 2 - stroke\"\n    [attr.rx]=\"height() / 2 - stroke\"\n  />\n\n  <rect\n    [attr.x]=\"stroke\"\n    [attr.y]=\"stroke\"\n    [attr.width]=\"\n      Math.max(height() - stroke * 2, (percent() / 100) * width() - stroke * 2)\n    \"\n    [attr.height]=\"height() - stroke * 2\"\n    [attr.fill]=\"\n      percent() === 100 ? palette()['secondary'] : palette()['secondary-surface']\n    \"\n    [attr.stroke]=\"palette()['on-background-variant']\"\n    [attr.stroke-width]=\"stroke\"\n    [attr.ry]=\"height() / 2 - stroke\"\n    [attr.rx]=\"height() / 2 - stroke\"\n  />\n</svg>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-progress-bar, ProgressBar', standalone: true, imports: [], template: "<svg [attr.width]=\"width()\" [attr.height]=\"height()\">\n  <rect\n    [attr.x]=\"stroke\"\n    [attr.y]=\"stroke\"\n    [attr.width]=\"width() - stroke * 2\"\n    [attr.height]=\"height() - stroke * 2\"\n    [attr.fill]=\"palette()['primary-surface']\"\n    [attr.stroke]=\"palette()['on-background-variant']\"\n    [attr.stroke-width]=\"stroke\"\n    [attr.ry]=\"height() / 2 - stroke\"\n    [attr.rx]=\"height() / 2 - stroke\"\n  />\n\n  <rect\n    [attr.x]=\"stroke\"\n    [attr.y]=\"stroke\"\n    [attr.width]=\"\n      Math.max(height() - stroke * 2, (percent() / 100) * width() - stroke * 2)\n    \"\n    [attr.height]=\"height() - stroke * 2\"\n    [attr.fill]=\"\n      percent() === 100 ? palette()['secondary'] : palette()['secondary-surface']\n    \"\n    [attr.stroke]=\"palette()['on-background-variant']\"\n    [attr.stroke-width]=\"stroke\"\n    [attr.ry]=\"height() / 2 - stroke\"\n    [attr.rx]=\"height() / 2 - stroke\"\n  />\n</svg>\n" }]
+        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], percent: [{ type: i0.Input, args: [{ isSignal: true, alias: "percent", required: false }] }], className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * UniProgressBarComponent Barrel File
+ *
+ * This file exports all public-facing elements of the progress-bar component.
+ */
+
+class UniProgressGaugeComponent extends BaseComponent {
+    percent = input(0, ...(ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []));
+    textStyle = computed(() => {
+        const theme = this.componentTheme();
+        return theme.fixed && theme.fixed['textFill'];
+    }, ...(ngDevMode ? [{ debugName: "textStyle" }] : /* istanbul ignore next */ []));
+    progress = keyframes({
+        '0%': { strokeDasharray: '0 100' },
+    });
+    get className() {
+        return css({
+            display: 'block',
+            '& .circular-chart': {
+                display: 'block',
+            },
+            '& .circle-bg': {
+                fill: 'none',
+                strokeWidth: 3.8,
+            },
+            '& .circle': {
+                fill: 'none',
+                strokeWidth: 3.8,
+                animation: `${this.progress} 1s ease-out forwards`,
+            },
+            '& .percentage': {
+                fontFamily: 'sans-serif',
+                fontSize: '0.5em',
+                textAnchor: 'middle',
+            },
+        });
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniProgressGaugeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniProgressGaugeComponent, isStandalone: true, selector: "uni-progress-gauge, ProgressGauge", inputs: { percent: { classPropertyName: "percent", publicName: "percent", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.className" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'progressGauge' }], usesInheritance: true, ngImport: i0, template: "<svg\n  viewBox=\"0 0 36 36\"\n  class=\"circular-chart\"\n  [style.height]=\"style()['height']\"\n>\n  <path\n    class=\"circle-bg\"\n    [attr.stroke]=\"style()['backgroundColor']\"\n    d=\"M18 2.0845\n          a 15.9155 15.9155 0 0 1 0 31.831\n          a 15.9155 15.9155 0 0 1 0 -31.831\"\n  />\n  <path\n    class=\"circle\"\n    [attr.stroke]=\"style()['color']\"\n    [attr.stroke-dasharray]=\"percent() + ', 100'\"\n    d=\"M18 2.0845\n          a 15.9155 15.9155 0 0 1 0 31.831\n          a 15.9155 15.9155 0 0 1 0 -31.831\"\n  />\n  <text x=\"18.5\" y=\"20.82\" class=\"percentage\" [style.fill]=\"textStyle()\">\n    {{ percent() }}%\n  </text>\n</svg>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniProgressGaugeComponent, 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()',
+            args: [{ selector: 'uni-progress-gauge, ProgressGauge', standalone: true, imports: [], providers: [{ provide: COMPONENT_NAME, useValue: 'progressGauge' }], template: "<svg\n  viewBox=\"0 0 36 36\"\n  class=\"circular-chart\"\n  [style.height]=\"style()['height']\"\n>\n  <path\n    class=\"circle-bg\"\n    [attr.stroke]=\"style()['backgroundColor']\"\n    d=\"M18 2.0845\n          a 15.9155 15.9155 0 0 1 0 31.831\n          a 15.9155 15.9155 0 0 1 0 -31.831\"\n  />\n  <path\n    class=\"circle\"\n    [attr.stroke]=\"style()['color']\"\n    [attr.stroke-dasharray]=\"percent() + ', 100'\"\n    d=\"M18 2.0845\n          a 15.9155 15.9155 0 0 1 0 31.831\n          a 15.9155 15.9155 0 0 1 0 -31.831\"\n  />\n  <text x=\"18.5\" y=\"20.82\" class=\"percentage\" [style.fill]=\"textStyle()\">\n    {{ percent() }}%\n  </text>\n</svg>\n" }]
+        }], propDecorators: { percent: [{ type: i0.Input, args: [{ isSignal: true, alias: "percent", required: false }] }], className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * UniProgressGaugeComponent Barrel File
+ *
+ * This file exports all public-facing elements of the progress-gauge component.
+ */
+
+class UniRadioComponent extends BaseComponent {
+    radioGroupClass;
+    radioOptionClass;
+    radioInputClass;
+    // --- REQUIRED SIGNALS (populated by FormValueControl) ---
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    // --- CONFIGURATION ---
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    name = input('radio-group', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    // Only show errors if the user has actually interacted with the field
+    showError = computed(() => this.invalid() && (this.touched() || this.dirty()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    markAsTouched() {
+        this.touched.set(true);
+    }
+    constructor() {
+        super();
+        effect(() => {
+            const radioSize = this.componentOptions().size || 20;
+            const outerCircleSize = radioSize;
+            const innerCircleSize = radioSize * 0.6;
+            const innerCircleOffset = (radioSize - innerCircleSize) / 2;
+            this.radioGroupClass = css({
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 12,
+            });
+            this.radioOptionClass = css({
+                userSelect: 'none',
+                cursor: this.disabled() ? 'not-allowed' : 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+                opacity: this.disabled() ? 0.6 : 1,
+                '& .radio-button': {
+                    width: outerCircleSize,
+                    height: outerCircleSize,
+                    borderRadius: '50%',
+                    border: `2px solid ${this.disabled() ? '#ccc' : '#d0d0d0'}`,
+                    position: 'relative',
+                    transition: 'all 0.3s ease',
+                    backgroundColor: '#fff',
+                    flexShrink: 0,
+                },
+                '& .radio-inner': {
+                    width: innerCircleSize,
+                    height: innerCircleSize,
+                    borderRadius: '50%',
+                    backgroundColor: this.getThemeColor(this.variant()),
+                    position: 'absolute',
+                    top: innerCircleOffset,
+                    left: innerCircleOffset,
+                    transform: 'scale(0)',
+                    transition: 'all 0.3s ease',
+                },
+                '&:hover .radio-button': this.disabled()
+                    ? {}
+                    : {
+                        borderColor: this.getThemeColor(this.variant()),
                     },
-                }]
-        }], 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: [{
+                '&.disabled': {
+                    cursor: 'not-allowed',
+                    opacity: 0.6,
+                    '& .radio-button': {
+                        borderColor: '#ccc',
+                    },
+                },
+            });
+            this.radioInputClass = css({
+                position: 'absolute',
+                zIndex: -1,
+                width: 0,
+                height: 0,
+                opacity: 0,
+                '&:checked + .radio-button': {
+                    borderColor: this.getThemeColor(this.variant()),
+                },
+                '&:checked + .radio-button .radio-inner': {
+                    transform: 'scale(1)',
+                },
+                '&:focus + .radio-button': {
+                    outline: `2px solid ${this.getThemeColor(this.variant())}`,
+                    outlineOffset: '2px',
+                },
+            });
+        });
+    }
+    handleRadioChange(optionValue) {
+        this.value.set(optionValue);
+        this.markAsTouched();
+    }
+    getThemeColor(token) {
+        const colors = this.theme.colors();
+        return colors[token] ? colors[token] : colors['primary'];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniRadioComponent, isStandalone: true, selector: "uni-radio, Radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, providers: [{ provide: COMPONENT_NAME, useValue: 'radio' }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"radioGroupClass\">\n  @if (label()) {\n    <Text typeface=\"label\">{{ label() }}</Text>\n  }\n\n  @for (option of options(); track option.value) {\n    <label\n      [class]=\"radioOptionClass\"\n      [class.disabled]=\"disabled() || option.disabled\"\n      (click)=\"\n        !disabled() && !option.disabled && handleRadioChange(option.value)\n      \"\n    >\n      <input\n        type=\"radio\"\n        [class]=\"radioInputClass\"\n        [value]=\"option.value\"\n        [name]=\"name()\"\n        [checked]=\"value() === option.value\"\n        [disabled]=\"disabled() || option.disabled\"\n        (change)=\"handleRadioChange(option.value)\"\n      />\n      <div class=\"radio-button\">\n        <div class=\"radio-inner\"></div>\n      </div>\n      <Text typeface=\"label\">{{ option.label }}</Text>\n    </label>\n  }\n</div>\n", dependencies: [{ kind: "component", type: UniTextComponent, selector: "uni-text, Text", inputs: ["typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniRadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-radio, Radio', standalone: true, imports: [UniTextComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'radio' }], template: "<div [class]=\"radioGroupClass\">\n  @if (label()) {\n    <Text typeface=\"label\">{{ label() }}</Text>\n  }\n\n  @for (option of options(); track option.value) {\n    <label\n      [class]=\"radioOptionClass\"\n      [class.disabled]=\"disabled() || option.disabled\"\n      (click)=\"\n        !disabled() && !option.disabled && handleRadioChange(option.value)\n      \"\n    >\n      <input\n        type=\"radio\"\n        [class]=\"radioInputClass\"\n        [value]=\"option.value\"\n        [name]=\"name()\"\n        [checked]=\"value() === option.value\"\n        [disabled]=\"disabled() || option.disabled\"\n        (change)=\"handleRadioChange(option.value)\"\n      />\n      <div class=\"radio-button\">\n        <div class=\"radio-inner\"></div>\n      </div>\n      <Text typeface=\"label\">{{ option.label }}</Text>\n    </label>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }] } });
+
+/**
+ * UniScrollAreaComponent Barrel File
+ *
+ * This file exports all public-facing elements of the scroll-area component.
+ */
+
+class UniSearchInputComponent {
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    change = output();
+    search = output();
+    get className() {
+        return css([
+            {
+                display: 'flex',
+                alignItems: 'center',
+            },
+        ]);
+    }
+    handleSearchInput(searchInput) {
+        this.change.emit(searchInput);
+    }
+    handleSearch(searchInput) {
+        this.search.emit(searchInput ?? '');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniSearchInputComponent, isStandalone: true, selector: "SearchInput, uni-search-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", search: "search" }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<Box\n  color=\"primary\"\n  borderRadius=\"max\"\n  paddingHorizontal=\"sm\"\n  display=\"flex\"\n  border=\"quaternary\"\n  alignItems=\"center\"\n  [width]=\"width()\"\n>\n  <Box alignSelf=\"center\" paddingHorizontal=\"md\">\n    <Text display=\"block\" typeface=\"title-large\">{{ label() }}</Text>\n  </Box>\n  <Box\n    borderRadius=\"max\"\n    display=\"block\"\n    paddingHorizontal=\"md\"\n    paddingVertical=\"sm\"\n    color=\"primary-surface\"\n    [grow]=\"1\"\n  >\n    <DebounceInput (change)=\"handleSearchInput($event)\" #searchInput />\n  </Box>\n  <button\n    icon-button\n    iconName=\"search\"\n    variant=\"ghost\"\n    (click)=\"handleSearch(searchInput.value())\"\n  ></button>\n</Box>\n", dependencies: [{ kind: "component", type: UniDebounceInputComponent, selector: "DebounceInput, uni-debounce-input", inputs: ["inputName", "inputId", "debounceTime"], outputs: ["change"] }, { kind: "component", type: UniTextComponent, selector: "uni-text, Text", inputs: ["typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniBoxComponent, selector: "div[uni-box-layout], Box, div[box-layout]", inputs: ["color", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "elevation", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSearchInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'SearchInput, uni-search-input', standalone: true, imports: [UniDebounceInputComponent, UniTextComponent, UniBoxComponent, UniIconButtonComponent], template: "<Box\n  color=\"primary\"\n  borderRadius=\"max\"\n  paddingHorizontal=\"sm\"\n  display=\"flex\"\n  border=\"quaternary\"\n  alignItems=\"center\"\n  [width]=\"width()\"\n>\n  <Box alignSelf=\"center\" paddingHorizontal=\"md\">\n    <Text display=\"block\" typeface=\"title-large\">{{ label() }}</Text>\n  </Box>\n  <Box\n    borderRadius=\"max\"\n    display=\"block\"\n    paddingHorizontal=\"md\"\n    paddingVertical=\"sm\"\n    color=\"primary-surface\"\n    [grow]=\"1\"\n  >\n    <DebounceInput (change)=\"handleSearchInput($event)\" #searchInput />\n  </Box>\n  <button\n    icon-button\n    iconName=\"search\"\n    variant=\"ghost\"\n    (click)=\"handleSearch(searchInput.value())\"\n  ></button>\n</Box>\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], search: [{ type: i0.Output, args: ["search"] }], className: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
-//export * from './background';
+/**
+ * UniSearchInputComponent Barrel File
+ *
+ * This file exports all public-facing elements of the search-input component.
+ */
+
+class UniSelectComponent {
+    // --- REQUIRED SIGNALS (populated by FormValueControl) ---
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    // --- CONFIGURATION ---
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    UNSELECTED = -1;
+    /**
+     * We use the index as the HTML value to avoid issues with
+     * stringifying complex objects or duplicate labels.
+     */
+    currentSelectedIndex = computed(() => {
+        const currentVal = this.value();
+        if (currentVal === null || currentVal === undefined)
+            return this.UNSELECTED;
+        // Find the index of the option that contains our current value
+        const index = this.options().findIndex((opt) => opt.value === currentVal);
+        return index.toString();
+    }, ...(ngDevMode ? [{ debugName: "currentSelectedIndex" }] : /* istanbul ignore next */ []));
+    showError = computed(() => this.invalid() && (this.touched() || this.dirty()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    handleSelectChange(event) {
+        const select = event.target;
+        const index = parseInt(select.value, 10);
+        if (index === this.UNSELECTED) {
+            this.value.set(null);
+        }
+        else {
+            const selectedOption = this.options()[index];
+            // Update the model with the 'value' property of the Option interface
+            this.value.set(selectedOption.value);
+        }
+    }
+    selectClass = css({
+        '& select': {
+            paddingRight: 24, // Prevent arrow from overlapping
+            cursor: 'pointer',
+            '&::-ms-expand': { display: 'none' },
+        },
+        [`& select:has(option[value="${this.UNSELECTED}"]:checked)`]: {
+            color: 'color-mix(in srgb, currentColor 50%, transparent)',
+        },
+    });
+    arrowClass = css({
+        position: 'absolute',
+        right: 0,
+        pointerEvents: 'none' /* Crucial for clicking through */,
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniSelectComponent, isStandalone: true, selector: "uni-select, SelectInput", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: "<uni-input-box [error]=\"showError()\" [class]=\"selectClass\">\n  <select\n    [disabled]=\"disabled()\"\n    [value]=\"currentSelectedIndex()\"\n    (change)=\"handleSelectChange($event)\"\n    (blur)=\"touched.set(true)\"\n  >\n    @if (placeholder()) {\n      <option [value]=\"UNSELECTED\" disabled selected>\n        {{ placeholder() }}\n      </option>\n    }\n\n    @for (opt of options(); track opt.label; let i = $index) {\n      <option [value]=\"i\">\n        {{ opt.label }}\n      </option>\n    }\n  </select>\n  <uni-symbol name=\"keyboard_arrow_down\" [class]=\"arrowClass\" />\n</uni-input-box>\n", dependencies: [{ kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth"] }, { 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: UniSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-select, SelectInput', imports: [UniInputBoxComponent, UniSymbolComponent], template: "<uni-input-box [error]=\"showError()\" [class]=\"selectClass\">\n  <select\n    [disabled]=\"disabled()\"\n    [value]=\"currentSelectedIndex()\"\n    (change)=\"handleSelectChange($event)\"\n    (blur)=\"touched.set(true)\"\n  >\n    @if (placeholder()) {\n      <option [value]=\"UNSELECTED\" disabled selected>\n        {{ placeholder() }}\n      </option>\n    }\n\n    @for (opt of options(); track opt.label; let i = $index) {\n      <option [value]=\"i\">\n        {{ opt.label }}\n      </option>\n    }\n  </select>\n  <uni-symbol name=\"keyboard_arrow_down\" [class]=\"arrowClass\" />\n</uni-input-box>\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
+
+/**
+ * UniSortHeaderComponent Barrel File
+ *
+ * This file exports all public-facing elements of the sort-header component.
+ */
+
+class UniTagComponent {
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    close = output();
+    handleClose() {
+        const v = this.value();
+        if (v)
+            this.close.emit(v);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniTagComponent, isStandalone: true, selector: "Tag, uni-tag", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: "<div box-layout color=\"primary\" borderRadius=\"max\" display=\"inline-block\">\n  <div row-layout paddingLeft=\"sm\" gap=\"xs\">\n    <Text display=\"block\" typeface=\"tag\">{{ label() }}</Text>\n    <button icon-button symbolName=\"close\" size=\"sm\" (click)=\"handleClose()\">\n      close\n    </button>\n  </div>\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: UniTagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'Tag, uni-tag', imports: [UniBoxComponent, UniIconButtonComponent, UniTextComponent, UniRowComponent], template: "<div box-layout color=\"primary\" borderRadius=\"max\" display=\"inline-block\">\n  <div row-layout paddingLeft=\"sm\" gap=\"xs\">\n    <Text display=\"block\" typeface=\"tag\">{{ label() }}</Text>\n    <button icon-button symbolName=\"close\" size=\"sm\" (click)=\"handleClose()\">\n      close\n    </button>\n  </div>\n</div>\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], close: [{ type: i0.Output, args: ["close"] }] } });
+
+/**
+ * UniTagComponent Barrel File
+ *
+ * This file exports all public-facing elements of the tag component.
+ */
+
+class UniToggleComponent extends BaseComponent {
+    toggleLabel;
+    toggleInput;
+    // --- REQUIRED SIGNALS (populated by FormCheckboxControl) ---
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    // --- CONFIGURATION ---
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    // Only show errors if the user has actually interacted with the field
+    showError = computed(() => this.invalid() && (this.touched() || this.dirty()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    markAsTouched() {
+        this.touched.set(true);
+    }
+    constructor() {
+        super();
+        effect(() => {
+            const toggleSize = this.componentOptions().size || 20;
+            const toggleWidth = toggleSize * 2;
+            const sliderSize = toggleSize * 0.8;
+            const sliderOffset = (toggleSize - sliderSize) / 2;
+            this.toggleLabel = css({
+                userSelect: 'none',
+                cursor: this.disabled() ? 'not-allowed' : 'pointer',
+                marginBottom: 0,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+                opacity: this.disabled() ? 0.6 : 1,
+                '& .toggle-switch': {
+                    width: toggleWidth,
+                    height: toggleSize,
+                    backgroundColor: this.disabled() ? '#ccc' : '#e0e0e0',
+                    borderRadius: toggleSize / 2,
+                    position: 'relative',
+                    transition: 'all 0.3s ease',
+                },
+                '& .toggle-slider': {
+                    width: sliderSize,
+                    height: sliderSize,
+                    backgroundColor: '#fff',
+                    borderRadius: '50%',
+                    position: 'absolute',
+                    top: sliderOffset,
+                    left: sliderOffset,
+                    transition: 'all 0.3s ease',
+                    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
+                },
+                '&:hover .toggle-switch': this.disabled()
+                    ? {}
+                    : {
+                        backgroundColor: '#d0d0d0',
+                    },
+            });
+            this.toggleInput = css({
+                position: 'absolute',
+                zIndex: -1,
+                width: 0,
+                height: 0,
+                opacity: 0,
+                '&:checked + .toggle-switch': {
+                    backgroundColor: this.getThemeColor(this.variant()),
+                    borderColor: this.getThemeColor(this.variant()),
+                },
+                '&:checked + .toggle-switch .toggle-slider': {
+                    transform: `translateX(${toggleSize}px)`,
+                },
+                '&:disabled + .toggle-switch': {
+                    cursor: 'not-allowed',
+                },
+                '&:focus + .toggle-switch': {
+                    outline: `2px solid ${this.getThemeColor(this.variant())}`,
+                    outlineOffset: '2px',
+                },
+            });
+        });
+    }
+    getThemeColor(token) {
+        const colors = this.theme.colors();
+        return colors[token] ? colors[token] : colors['primary'];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniToggleComponent, isStandalone: true, selector: "uni-toggle, Toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange" }, providers: [{ provide: COMPONENT_NAME, useValue: 'toggle' }], usesInheritance: true, ngImport: i0, template: "<label [class]=\"toggleLabel\">\n  <input\n    type=\"checkbox\"\n    [class]=\"toggleInput\"\n    [checked]=\"checked()\"\n    (change)=\"checked.set($any($event.target).checked); markAsTouched()\"\n    [disabled]=\"disabled()\"\n  />\n  <div class=\"toggle-switch\">\n    <div class=\"toggle-slider\"></div>\n  </div>\n  @if (label()) {\n    <Text typeface=\"label\">{{ label() }}</Text>\n  }\n</label>\n", dependencies: [{ kind: "component", type: UniTextComponent, selector: "uni-text, Text", inputs: ["typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uni-toggle, Toggle', standalone: true, imports: [UniTextComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'toggle' }], template: "<label [class]=\"toggleLabel\">\n  <input\n    type=\"checkbox\"\n    [class]=\"toggleInput\"\n    [checked]=\"checked()\"\n    (change)=\"checked.set($any($event.target).checked); markAsTouched()\"\n    [disabled]=\"disabled()\"\n  />\n  <div class=\"toggle-switch\">\n    <div class=\"toggle-slider\"></div>\n  </div>\n  @if (label()) {\n    <Text typeface=\"label\">{{ label() }}</Text>\n  }\n</label>\n" }]
+        }], ctorParameters: () => [], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ConfirmationDialogComponent, LocalStorageService, NotificationService, NotificationsComponent, RippleDirective, ThemeService, UNI_THEMES, UniAlertComponent, UniBadgeComponent, UniBaseDatasource, UniBoxComponent, UniButtonComponent, UniCardComponent, UniCardContentComponent, UniCardHeaderComponent, UniCenterComponent, UniDialogButtonsComponent, UniDialogComponent, UniDialogHeaderComponent, UniDividerComponent, UniDropdownComponent, UniGridAreaComponent, UniGridComponent, UniIconButtonComponent, UniIconComponent, UniMenuComponent, UniRecordDatasource, UniRowComponent, UniServerSideDatasource, UniSnackbarComponent, UniStackComponent, UniSymbolComponent, UniTextComponent, UniTooltipComponent, UniWrapComponent, useTimer };
+export { BodyRenderDirective, ConfirmationDialogComponent, DragAndDropDirective, LocalStorageService, NotificationService, NotificationsComponent, RippleDirective, ThemeService, UNI_THEMES, UniAlertComponent, UniBackgroundComponent, UniBadgeComponent, UniBaseDatasource, UniBoxComponent, UniButtonComponent, UniButtonGroupComponent, UniCardComponent, UniCardContentComponent, UniCardHeaderComponent, UniCenterComponent, UniCheckboxComponent, UniDataSearchComponent, UniDataTableComponent, UniDebounceInputComponent, UniDialogButtonsComponent, UniDialogComponent, UniDialogHeaderComponent, UniDividerComponent, UniDropdownComponent, UniExpandAreaComponent, UniExpandComponent, UniExpandToggleComponent, UniFileDropZoneComponent, UniGridAreaComponent, UniGridComponent, UniIconButtonComponent, UniIconComponent, UniInputBoxComponent, UniInputComponent, UniJsonViewComponent, UniMenuComponent, UniMultiSelectComponent, UniMultiSelectDropdownComponent, UniNotificationBadgeComponent, UniPaginatorComponent, UniPopoverComponent, UniProgressBarComponent, UniProgressGaugeComponent, UniRadioComponent, UniRecordDatasource, UniRowComponent, UniScrollAreaComponent, UniSearchInputComponent, UniSelectComponent, UniServerSideDatasource, UniSnackbarComponent, UniSortHeaderComponent, UniStackComponent, UniSymbolComponent, UniTagComponent, UniTextComponent, UniToggleComponent, UniTooltipComponent, UniWrapComponent, acceptableFile, getFileExtension, useTimer };
 //# sourceMappingURL=uni-design-system-uni-angular.mjs.map