@uni-design-system/uni-angular 7.0.0 → 7.1.0

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

@@ -1368,14 +1368,31 @@ class UniIconComponent {
     themeService = inject(ThemeService);
     color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
     name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /**
+     * Explicit square size. Bare numbers are px; strings pass through, so any CSS
+     * length works (`'1.25rem'`, `'1em'`, `'clamp(…)'`).
+     *
+     * Leave it unset to keep the default behaviour — the icon fills its
+     * container, which is what lets a themed control size its own glyph through
+     * padding. Set it at call sites that would otherwise need a width/height
+     * rule just to size one icon.
+     */
+    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
     /** Resolved from the theme's icon primitives; unknown names render nothing. */
     path = computed(() => {
         const icon = this.themeService.theme().icons[this.name()];
         return icon ? `url("${icon}")` : 'none';
     }, ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
+    /** `null` leaves the styles off entirely, falling back to the stylesheet. */
+    sizeValue = computed(() => {
+        const size = this.size();
+        if (size === undefined || size === null || size === '')
+            return null;
+        return typeof size === 'number' ? `${size}px` : size;
+    }, ...(ngDevMode ? [{ debugName: "sizeValue" }] : /* istanbul ignore next */ []));
     className = computed(() => css([{ ...this.themeService.color(this.color()) }]), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniIconComponent, isStandalone: true, selector: "uni-icon", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "className()", "style.mask-image": "path()", "style.-webkit-mask-image": "path()" } }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;height:100%;width:100%;background-color:currentColor;mask-size:contain;mask-position:center;mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniIconComponent, isStandalone: true, selector: "uni-icon", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "className()", "style.mask-image": "path()", "style.-webkit-mask-image": "path()", "style.width": "sizeValue()", "style.height": "sizeValue()" } }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;height:100%;width:100%;background-color:currentColor;mask-size:contain;mask-position:center;mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniIconComponent, decorators: [{
             type: Component,
@@ -1384,8 +1401,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         '[class]': 'className()',
                         '[style.mask-image]': 'path()',
                         '[style.-webkit-mask-image]': 'path()',
+                        // Inline styles, so an explicit size always beats the fill-the-container
+                        // rule in the stylesheet regardless of style injection order.
+                        '[style.width]': 'sizeValue()',
+                        '[style.height]': 'sizeValue()',
                     }, styles: [":host{display:block;height:100%;width:100%;background-color:currentColor;mask-size:contain;mask-position:center;mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}\n"] }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }] } });
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 /**
  * The base layout primitive, applied as an attribute to any element so
@@ -1835,7 +1856,7 @@ class UniButtonComponent extends BaseComponent {
     @if (symbolRight()) {
       <uni-symbol [name]="symbolRight()!" class="symbolRight" />
     } `, isInline: true, dependencies: [{ kind: "component", type: // Keep this import
-                UniIconComponent, selector: "uni-icon", inputs: ["color", "name"] }, { kind: "component", type: UniBoxComponent, selector: "[uni-box-layout], [box-layout]", inputs: ["color", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "elevation", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+                UniIconComponent, selector: "uni-icon", inputs: ["color", "name", "size"] }, { kind: "component", type: UniBoxComponent, selector: "[uni-box-layout], [box-layout]", inputs: ["color", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "elevation", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniButtonComponent, decorators: [{
             type: Component,
@@ -2326,7 +2347,7 @@ class UniIconButtonComponent {
     }
     <!-- Projected text is the button's accessible name (visually hidden) -->
     <span [class]="srOnlyClass"><ng-content /></span>
-  `, isInline: true, dependencies: [{ kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniIconButtonComponent, decorators: [{
             type: Component,
@@ -2431,7 +2452,7 @@ class UniDataSearchComponent extends BaseComponent {
         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\">Clear Search</button>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name"] }, { kind: "component", type: UniCenterComponent, selector: "[uni-center-layout], [center-layout]", inputs: ["display", "justifyContent", "alignItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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\">Clear Search</button>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name", "size"] }, { kind: "component", type: UniCenterComponent, selector: "[uni-center-layout], [center-layout]", inputs: ["display", "justifyContent", "alignItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDataSearchComponent, decorators: [{
             type: Component,
@@ -2813,7 +2834,7 @@ class UniDataTableComponent extends BaseComponent {
         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: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDataTableComponent, isStandalone: true, selector: "uni-data-table", 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\" [attr.aria-busy]=\"isLoading()\">\n      <div scroll-area [verticalScrollPadding]=\"0\" (scrollable)=\"handleScrollable($event)\">\n        <table [class]=\"tableClass()\">\n          <thead>\n            <tr>\n              @for (column of columns(); track column) {\n                <th\n                  scope=\"col\"\n                  [attr.aria-sort]=\"ariaSort(column)\"\n                  [class]=\"thClass()\"\n                  [class.scrollable]=\"scrollable()\"\n                  [class.sticky]=\"column.isSticky\"\n                  [style.text-align]=\"column.textAlign\"\n                >\n                  <uni-sort-header [datasource]=\"datasource()\" [column]=\"column.columnDef\">\n                    <span uni-text [typeface]=\"componentOptions().thTextRole\">{{ column.header }}</span>\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\n                [class]=\"trClass()\"\n                [attr.tabindex]=\"useRowClick() ? 0 : null\"\n                (click)=\"handleRowClick(record, $index)\"\n                (keydown.enter)=\"useRowClick() && handleRowClick(record, $index)\"\n                (keydown.space)=\"\n                  useRowClick() && handleRowClick(record, $index);\n                  useRowClick() && $event.preventDefault()\n                \"\n              >\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                      <span uni-text [typeface]=\"componentOptions().tdTextRole\">\n                        @if (!column.cell) {\n                          {{ record[column.columnDef] }}\n                        } @else {\n                          {{ column.cell(record) }}\n                        }\n                      </span>\n                    }\n                  </td>\n                }\n              </tr>\n              @if (detailRowTemplate()) {\n                <!-- Collapsed detail rows are inert: invisible to screen\n                     readers and unreachable by keyboard until expanded -->\n                <tr\n                  [class]=\"detailRowClass()\"\n                  [class.expanded]=\"expandedIndex() === $index\"\n                  [attr.inert]=\"expandedIndex() === $index ? null : ''\"\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      </div>\n\n      <!-- Loading Overlay -->\n      @if (isLoading()) {\n        <div\n          uni-center-layout\n          role=\"status\"\n          aria-label=\"Loading\"\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 name=\"spinner\" [color]=\"componentOptions().loadingSpinnerColor\" />\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: "[uni-box-layout], [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: "[uni-scroll-area], [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]", inputs: ["uni-text", "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", inputs: ["color", "name"] }, { kind: "component", type: UniCenterComponent, selector: "[uni-center-layout], [center-layout]", inputs: ["display", "justifyContent", "alignItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDataTableComponent, isStandalone: true, selector: "uni-data-table", 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\" [attr.aria-busy]=\"isLoading()\">\n      <div scroll-area [verticalScrollPadding]=\"0\" (scrollable)=\"handleScrollable($event)\">\n        <table [class]=\"tableClass()\">\n          <thead>\n            <tr>\n              @for (column of columns(); track column) {\n                <th\n                  scope=\"col\"\n                  [attr.aria-sort]=\"ariaSort(column)\"\n                  [class]=\"thClass()\"\n                  [class.scrollable]=\"scrollable()\"\n                  [class.sticky]=\"column.isSticky\"\n                  [style.text-align]=\"column.textAlign\"\n                >\n                  <uni-sort-header [datasource]=\"datasource()\" [column]=\"column.columnDef\">\n                    <span uni-text [typeface]=\"componentOptions().thTextRole\">{{ column.header }}</span>\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\n                [class]=\"trClass()\"\n                [attr.tabindex]=\"useRowClick() ? 0 : null\"\n                (click)=\"handleRowClick(record, $index)\"\n                (keydown.enter)=\"useRowClick() && handleRowClick(record, $index)\"\n                (keydown.space)=\"\n                  useRowClick() && handleRowClick(record, $index);\n                  useRowClick() && $event.preventDefault()\n                \"\n              >\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                      <span uni-text [typeface]=\"componentOptions().tdTextRole\">\n                        @if (!column.cell) {\n                          {{ record[column.columnDef] }}\n                        } @else {\n                          {{ column.cell(record) }}\n                        }\n                      </span>\n                    }\n                  </td>\n                }\n              </tr>\n              @if (detailRowTemplate()) {\n                <!-- Collapsed detail rows are inert: invisible to screen\n                     readers and unreachable by keyboard until expanded -->\n                <tr\n                  [class]=\"detailRowClass()\"\n                  [class.expanded]=\"expandedIndex() === $index\"\n                  [attr.inert]=\"expandedIndex() === $index ? null : ''\"\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      </div>\n\n      <!-- Loading Overlay -->\n      @if (isLoading()) {\n        <div\n          uni-center-layout\n          role=\"status\"\n          aria-label=\"Loading\"\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 name=\"spinner\" [color]=\"componentOptions().loadingSpinnerColor\" />\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: "[uni-box-layout], [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: "[uni-scroll-area], [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]", inputs: ["uni-text", "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", inputs: ["color", "name", "size"] }, { kind: "component", type: UniCenterComponent, selector: "[uni-center-layout], [center-layout]", inputs: ["display", "justifyContent", "alignItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDataTableComponent, decorators: [{
             type: Component,
@@ -4687,7 +4708,7 @@ class UniAlertComponent extends BaseComponent {
     }
     effectiveIconName = computed(() => this.iconName(), ...(ngDevMode ? [{ debugName: "effectiveIconName" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniAlertComponent, isStandalone: true, selector: "uni-alert", inputs: { show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, symbolName: { classPropertyName: "symbolName", publicName: "symbolName", isSignal: true, isRequired: false, transformFunction: null }, useVariant: { classPropertyName: "useVariant", publicName: "useVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { show: "showChange", showing: "showing" }, providers: [{ provide: COMPONENT_NAME, useValue: 'alert' }], viewQueries: [{ propertyName: "alertRef", first: true, predicate: ["alert"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- role=\"alert\" makes the message announce immediately when shown -->\n<dialog #alert [class]=\"alertClass()\" role=\"alert\">\n  <div row-layout gap=\"md\">\n    @if (iconName() || symbolName()) {\n      <div box-layout [height]=\"26\" [width]=\"26\">\n        @if (effectiveIconName()) {\n          <uni-icon [name]=\"effectiveIconName()!\" />\n        } @else {\n          <uni-symbol [name]=\"symbolName()!\" [opticalSize]=\"26\" />\n        }\n      </div>\n    }\n    <span uni-text>\n      <ng-content></ng-content>\n    </span>\n    <button icon-button (click)=\"close()\" iconName=\"close\" size=\"md\">close</button>\n  </div>\n</dialog>\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniBoxComponent, selector: "[uni-box-layout], [box-layout]", inputs: ["color", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "elevation", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniAlertComponent, isStandalone: true, selector: "uni-alert", inputs: { show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, symbolName: { classPropertyName: "symbolName", publicName: "symbolName", isSignal: true, isRequired: false, transformFunction: null }, useVariant: { classPropertyName: "useVariant", publicName: "useVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { show: "showChange", showing: "showing" }, providers: [{ provide: COMPONENT_NAME, useValue: 'alert' }], viewQueries: [{ propertyName: "alertRef", first: true, predicate: ["alert"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- role=\"alert\" makes the message announce immediately when shown -->\n<dialog #alert [class]=\"alertClass()\" role=\"alert\">\n  <div row-layout gap=\"md\">\n    @if (iconName() || symbolName()) {\n      <div box-layout [height]=\"26\" [width]=\"26\">\n        @if (effectiveIconName()) {\n          <uni-icon [name]=\"effectiveIconName()!\" />\n        } @else {\n          <uni-symbol [name]=\"symbolName()!\" [opticalSize]=\"26\" />\n        }\n      </div>\n    }\n    <span uni-text>\n      <ng-content></ng-content>\n    </span>\n    <button icon-button (click)=\"close()\" iconName=\"close\" size=\"md\">close</button>\n  </div>\n</dialog>\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniBoxComponent, selector: "[uni-box-layout], [box-layout]", inputs: ["color", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "elevation", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name", "size"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniAlertComponent, decorators: [{
             type: Component,
@@ -4806,7 +4827,7 @@ class UniSnackbarComponent extends BaseComponent {
         this.timer.resume();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniSnackbarComponent, isStandalone: true, selector: "uni-snackbar", inputs: { show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, symbolName: { classPropertyName: "symbolName", publicName: "symbolName", isSignal: true, isRequired: false, transformFunction: null }, timeout: { classPropertyName: "timeout", publicName: "timeout", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, useVariant: { classPropertyName: "useVariant", publicName: "useVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { show: "showChange", action: "action", showing: "showing" }, providers: [{ provide: COMPONENT_NAME, useValue: 'snackbar' }], viewQueries: [{ propertyName: "snackbarRef", first: true, predicate: ["snackbar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let icon = iconName();\n@let symbol = symbolName();\n<!-- role=\"status\" announces the message politely without stealing focus -->\n<dialog\n  #snackbar\n  [class]=\"snackbarClass()\"\n  role=\"status\"\n  (mouseenter)=\"pauseTimer()\"\n  (mouseleave)=\"resumeTimer()\"\n  (focusin)=\"pauseTimer()\"\n  (focusout)=\"resumeTimer()\"\n>\n  <div row-layout alignItems=\"center\">\n    @if (icon || symbol) {\n      <div box-layout [height]=\"26\" [width]=\"26\" paddingLeft=\"sm\">\n        @if (icon) {\n          <uni-icon [name]=\"icon\"></uni-icon>\n        } @else if (symbol) {\n          <uni-symbol [name]=\"symbol\" [opticalSize]=\"26\"></uni-symbol>\n        }\n      </div>\n    }\n    <div box-layout padding=\"sm\">\n      <span uni-text>\n        <ng-content></ng-content>\n      </span>\n    </div>\n    <div box-layout paddingRight=\"sm\">\n      @if (!actionLabel()) {\n        <button icon-button (click)=\"close()\" iconName=\"close\" size=\"md\">Close</button>\n      } @else {\n        <button text-button variant=\"ghost\" (click)=\"this.action.emit(); close()\">\n          {{ actionLabel() }}\n        </button>\n      }\n    </div>\n  </div>\n</dialog>\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniBoxComponent, selector: "[uni-box-layout], [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]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name"] }, { kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniSnackbarComponent, isStandalone: true, selector: "uni-snackbar", inputs: { show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, symbolName: { classPropertyName: "symbolName", publicName: "symbolName", isSignal: true, isRequired: false, transformFunction: null }, timeout: { classPropertyName: "timeout", publicName: "timeout", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, useVariant: { classPropertyName: "useVariant", publicName: "useVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { show: "showChange", action: "action", showing: "showing" }, providers: [{ provide: COMPONENT_NAME, useValue: 'snackbar' }], viewQueries: [{ propertyName: "snackbarRef", first: true, predicate: ["snackbar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let icon = iconName();\n@let symbol = symbolName();\n<!-- role=\"status\" announces the message politely without stealing focus -->\n<dialog\n  #snackbar\n  [class]=\"snackbarClass()\"\n  role=\"status\"\n  (mouseenter)=\"pauseTimer()\"\n  (mouseleave)=\"resumeTimer()\"\n  (focusin)=\"pauseTimer()\"\n  (focusout)=\"resumeTimer()\"\n>\n  <div row-layout alignItems=\"center\">\n    @if (icon || symbol) {\n      <div box-layout [height]=\"26\" [width]=\"26\" paddingLeft=\"sm\">\n        @if (icon) {\n          <uni-icon [name]=\"icon\"></uni-icon>\n        } @else if (symbol) {\n          <uni-symbol [name]=\"symbol\" [opticalSize]=\"26\"></uni-symbol>\n        }\n      </div>\n    }\n    <div box-layout padding=\"sm\">\n      <span uni-text>\n        <ng-content></ng-content>\n      </span>\n    </div>\n    <div box-layout paddingRight=\"sm\">\n      @if (!actionLabel()) {\n        <button icon-button (click)=\"close()\" iconName=\"close\" size=\"md\">Close</button>\n      } @else {\n        <button text-button variant=\"ghost\" (click)=\"this.action.emit(); close()\">\n          {{ actionLabel() }}\n        </button>\n      }\n    </div>\n  </div>\n</dialog>\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniBoxComponent, selector: "[uni-box-layout], [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]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name", "size"] }, { kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSnackbarComponent, decorators: [{
             type: Component,