@uni-design-system/uni-angular 6.1.0 → 7.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal, computed, linkedSignal, resource, Injectable, inject, DestroyRef, InjectionToken, input, ChangeDetectionStrategy, Component, contentChildren, output, Renderer2, ElementRef, Directive, model, effect, viewChild, afterNextRender, ViewChild, viewChildren } from '@angular/core';
|
|
2
|
+
import { signal, computed, linkedSignal, resource, Injectable, inject, DestroyRef, InjectionToken, input, ChangeDetectionStrategy, Component, contentChildren, output, Renderer2, ElementRef, Directive, model, effect, viewChild, afterNextRender, ViewChild, booleanAttribute, viewChildren } from '@angular/core';
|
|
3
3
|
import { injectGlobal, css, keyframes } from '@emotion/css';
|
|
4
4
|
import { UniThemes, LightTheme, toTypefaces, createThemeFromPalette, Z_INDEX, fadeIn, fadeOut, expandFadeIn, collapseFadeOut, removeInputPlatformStyling, ShapeRadii, generatePalette, emitThemeFile, emitDtcgTokens } from '@uni-design-system/uni-core';
|
|
5
5
|
import { NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
|
|
@@ -1368,14 +1368,31 @@ class UniIconComponent {
|
|
|
1368
1368
|
themeService = inject(ThemeService);
|
|
1369
1369
|
color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
|
|
1370
1370
|
name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
1371
|
+
/**
|
|
1372
|
+
* Explicit square size. Bare numbers are px; strings pass through, so any CSS
|
|
1373
|
+
* length works (`'1.25rem'`, `'1em'`, `'clamp(…)'`).
|
|
1374
|
+
*
|
|
1375
|
+
* Leave it unset to keep the default behaviour — the icon fills its
|
|
1376
|
+
* container, which is what lets a themed control size its own glyph through
|
|
1377
|
+
* padding. Set it at call sites that would otherwise need a width/height
|
|
1378
|
+
* rule just to size one icon.
|
|
1379
|
+
*/
|
|
1380
|
+
size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1371
1381
|
/** Resolved from the theme's icon primitives; unknown names render nothing. */
|
|
1372
1382
|
path = computed(() => {
|
|
1373
1383
|
const icon = this.themeService.theme().icons[this.name()];
|
|
1374
1384
|
return icon ? `url("${icon}")` : 'none';
|
|
1375
1385
|
}, ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
|
|
1386
|
+
/** `null` leaves the styles off entirely, falling back to the stylesheet. */
|
|
1387
|
+
sizeValue = computed(() => {
|
|
1388
|
+
const size = this.size();
|
|
1389
|
+
if (size === undefined || size === null || size === '')
|
|
1390
|
+
return null;
|
|
1391
|
+
return typeof size === 'number' ? `${size}px` : size;
|
|
1392
|
+
}, ...(ngDevMode ? [{ debugName: "sizeValue" }] : /* istanbul ignore next */ []));
|
|
1376
1393
|
className = computed(() => css([{ ...this.themeService.color(this.color()) }]), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
1377
1394
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1378
|
-
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 });
|
|
1395
|
+
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 });
|
|
1379
1396
|
}
|
|
1380
1397
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniIconComponent, decorators: [{
|
|
1381
1398
|
type: Component,
|
|
@@ -1384,8 +1401,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
1384
1401
|
'[class]': 'className()',
|
|
1385
1402
|
'[style.mask-image]': 'path()',
|
|
1386
1403
|
'[style.-webkit-mask-image]': 'path()',
|
|
1404
|
+
// Inline styles, so an explicit size always beats the fill-the-container
|
|
1405
|
+
// rule in the stylesheet regardless of style injection order.
|
|
1406
|
+
'[style.width]': 'sizeValue()',
|
|
1407
|
+
'[style.height]': 'sizeValue()',
|
|
1387
1408
|
}, 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"] }]
|
|
1388
|
-
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }] } });
|
|
1409
|
+
}], 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 }] }] } });
|
|
1389
1410
|
|
|
1390
1411
|
/**
|
|
1391
1412
|
* The base layout primitive, applied as an attribute to any element so
|
|
@@ -1835,7 +1856,7 @@ class UniButtonComponent extends BaseComponent {
|
|
|
1835
1856
|
@if (symbolRight()) {
|
|
1836
1857
|
<uni-symbol [name]="symbolRight()!" class="symbolRight" />
|
|
1837
1858
|
} `, isInline: true, dependencies: [{ kind: "component", type: // Keep this import
|
|
1838
|
-
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 });
|
|
1859
|
+
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 });
|
|
1839
1860
|
}
|
|
1840
1861
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniButtonComponent, decorators: [{
|
|
1841
1862
|
type: Component,
|
|
@@ -2326,7 +2347,7 @@ class UniIconButtonComponent {
|
|
|
2326
2347
|
}
|
|
2327
2348
|
<!-- Projected text is the button's accessible name (visually hidden) -->
|
|
2328
2349
|
<span [class]="srOnlyClass"><ng-content /></span>
|
|
2329
|
-
`, 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 });
|
|
2350
|
+
`, 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 });
|
|
2330
2351
|
}
|
|
2331
2352
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniIconButtonComponent, decorators: [{
|
|
2332
2353
|
type: Component,
|
|
@@ -2431,7 +2452,7 @@ class UniDataSearchComponent extends BaseComponent {
|
|
|
2431
2452
|
this.searchValue.set('');
|
|
2432
2453
|
}
|
|
2433
2454
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDataSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2434
|
-
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 });
|
|
2455
|
+
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 });
|
|
2435
2456
|
}
|
|
2436
2457
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDataSearchComponent, decorators: [{
|
|
2437
2458
|
type: Component,
|
|
@@ -2813,7 +2834,7 @@ class UniDataTableComponent extends BaseComponent {
|
|
|
2813
2834
|
return name ? this.theme.theme().borders[name] : undefined;
|
|
2814
2835
|
}
|
|
2815
2836
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2816
|
-
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 });
|
|
2837
|
+
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 });
|
|
2817
2838
|
}
|
|
2818
2839
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDataTableComponent, decorators: [{
|
|
2819
2840
|
type: Component,
|
|
@@ -2981,30 +3002,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
2981
3002
|
}]
|
|
2982
3003
|
}], ctorParameters: () => [], propDecorators: { show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }, { type: i0.Output, args: ["showChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], initialFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFocus", required: false }] }], defaultCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultCloseButton", required: false }] }], showing: [{ type: i0.Output, args: ["showing"] }] } });
|
|
2983
3004
|
|
|
2984
|
-
class UniDialogButtonsComponent {
|
|
3005
|
+
class UniDialogButtonsComponent extends BaseComponent {
|
|
2985
3006
|
dialog = inject(UniDialogComponent, {
|
|
2986
3007
|
optional: true,
|
|
2987
3008
|
host: true,
|
|
2988
3009
|
skipSelf: true,
|
|
2989
3010
|
});
|
|
2990
3011
|
confirmButtonText = input(...(ngDevMode ? [undefined, { debugName: "confirmButtonText" }] : /* istanbul ignore next */ []));
|
|
2991
|
-
confirmButtonVariant = input(
|
|
3012
|
+
confirmButtonVariant = input(...(ngDevMode ? [undefined, { debugName: "confirmButtonVariant" }] : /* istanbul ignore next */ []));
|
|
2992
3013
|
cancelButtonText = input(...(ngDevMode ? [undefined, { debugName: "cancelButtonText" }] : /* istanbul ignore next */ []));
|
|
3014
|
+
cancelButtonVariant = input(...(ngDevMode ? [undefined, { debugName: "cancelButtonVariant" }] : /* istanbul ignore next */ []));
|
|
2993
3015
|
disableConfirm = input(...(ngDevMode ? [undefined, { debugName: "disableConfirm" }] : /* istanbul ignore next */ []));
|
|
2994
|
-
padding = input(
|
|
2995
|
-
paddingBottom = input(
|
|
2996
|
-
justifyContent = input(
|
|
3016
|
+
padding = input(...(ngDevMode ? [undefined, { debugName: "padding" }] : /* istanbul ignore next */ []));
|
|
3017
|
+
paddingBottom = input(...(ngDevMode ? [undefined, { debugName: "paddingBottom" }] : /* istanbul ignore next */ []));
|
|
3018
|
+
justifyContent = input(...(ngDevMode ? [undefined, { debugName: "justifyContent" }] : /* istanbul ignore next */ []));
|
|
2997
3019
|
confirmed = output();
|
|
3020
|
+
// Inputs win over theme options; the trailing literal is the legacy default.
|
|
3021
|
+
confirmVariant = computed(() => this.confirmButtonVariant() ?? this.componentOptions().confirmButtonVariant ?? 'primary', ...(ngDevMode ? [{ debugName: "confirmVariant" }] : /* istanbul ignore next */ []));
|
|
3022
|
+
cancelVariant = computed(() => this.cancelButtonVariant() ?? this.componentOptions().cancelButtonVariant ?? 'warn', ...(ngDevMode ? [{ debugName: "cancelVariant" }] : /* istanbul ignore next */ []));
|
|
3023
|
+
paddingValue = computed(() => this.padding() ?? this.componentOptions().padding ?? 'md', ...(ngDevMode ? [{ debugName: "paddingValue" }] : /* istanbul ignore next */ []));
|
|
3024
|
+
paddingBottomValue = computed(() => this.paddingBottom() ?? this.componentOptions().paddingBottom ?? 'lg', ...(ngDevMode ? [{ debugName: "paddingBottomValue" }] : /* istanbul ignore next */ []));
|
|
3025
|
+
justifyContentValue = computed(() => this.justifyContent() ?? this.componentOptions().justifyContent ?? 'center', ...(ngDevMode ? [{ debugName: "justifyContentValue" }] : /* istanbul ignore next */ []));
|
|
3026
|
+
gapValue = computed(() => this.componentOptions().gap ?? 'md', ...(ngDevMode ? [{ debugName: "gapValue" }] : /* istanbul ignore next */ []));
|
|
3027
|
+
buttonSize = computed(() => this.componentOptions().buttonSize ?? 'lg', ...(ngDevMode ? [{ debugName: "buttonSize" }] : /* istanbul ignore next */ []));
|
|
3028
|
+
className = computed(() => css([
|
|
3029
|
+
this.componentTheme().fixed,
|
|
3030
|
+
this.componentOptions().stretch && {
|
|
3031
|
+
width: '100%',
|
|
3032
|
+
minWidth: '100%',
|
|
3033
|
+
'& > button': { flex: '1 1 50%', maxWidth: '50%' },
|
|
3034
|
+
},
|
|
3035
|
+
]), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
2998
3036
|
closeDialog() {
|
|
2999
3037
|
this.dialog?.close();
|
|
3000
3038
|
}
|
|
3001
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDialogButtonsComponent, deps:
|
|
3002
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniDialogButtonsComponent, isStandalone: true, selector: "[uni-dialog-buttons], [dialog-buttons]", inputs: { confirmButtonText: { classPropertyName: "confirmButtonText", publicName: "confirmButtonText", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonVariant: { classPropertyName: "confirmButtonVariant", publicName: "confirmButtonVariant", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, disableConfirm: { classPropertyName: "disableConfirm", publicName: "disableConfirm", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, paddingBottom: { classPropertyName: "paddingBottom", publicName: "paddingBottom", isSignal: true, isRequired: false, transformFunction: null }, justifyContent: { classPropertyName: "justifyContent", publicName: "justifyContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed" }, ngImport: i0, template: "<div\n row-layout\n gap=\"
|
|
3039
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDialogButtonsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3040
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniDialogButtonsComponent, isStandalone: true, selector: "[uni-dialog-buttons], [dialog-buttons]", inputs: { confirmButtonText: { classPropertyName: "confirmButtonText", publicName: "confirmButtonText", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonVariant: { classPropertyName: "confirmButtonVariant", publicName: "confirmButtonVariant", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonVariant: { classPropertyName: "cancelButtonVariant", publicName: "cancelButtonVariant", isSignal: true, isRequired: false, transformFunction: null }, disableConfirm: { classPropertyName: "disableConfirm", publicName: "disableConfirm", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, paddingBottom: { classPropertyName: "paddingBottom", publicName: "paddingBottom", isSignal: true, isRequired: false, transformFunction: null }, justifyContent: { classPropertyName: "justifyContent", publicName: "justifyContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed" }, providers: [{ provide: COMPONENT_NAME, useValue: 'dialogButtons' }], usesInheritance: true, ngImport: i0, template: "<div\n row-layout\n [gap]=\"gapValue()\"\n [padding]=\"paddingValue()\"\n [paddingBottom]=\"paddingBottomValue()\"\n [justifyContent]=\"justifyContentValue()\"\n [flexDirection]=\"componentOptions().reverseOrder ? 'row-reverse' : 'row'\"\n [class]=\"className()\"\n>\n <button\n text-button\n [variant]=\"confirmVariant()\"\n [size]=\"buttonSize()\"\n (click)=\"confirmed.emit(); closeDialog()\"\n [disable]=\"disableConfirm()\"\n >\n {{ confirmButtonText() || 'Confirm' }}\n </button>\n <button text-button [variant]=\"cancelVariant()\" [size]=\"buttonSize()\" (click)=\"closeDialog()\">\n {{ cancelButtonText() || 'Cancel' }}\n </button>\n</div>\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3003
3041
|
}
|
|
3004
3042
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDialogButtonsComponent, decorators: [{
|
|
3005
3043
|
type: Component,
|
|
3006
|
-
args: [{ selector: '[uni-dialog-buttons], [dialog-buttons]', imports: [UniRowComponent, UniButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n row-layout\n gap=\"
|
|
3007
|
-
}], propDecorators: { confirmButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmButtonText", required: false }] }], confirmButtonVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmButtonVariant", required: false }] }], cancelButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonText", required: false }] }], disableConfirm: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableConfirm", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], paddingBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingBottom", required: false }] }], justifyContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "justifyContent", required: false }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }] } });
|
|
3044
|
+
args: [{ selector: '[uni-dialog-buttons], [dialog-buttons]', imports: [UniRowComponent, UniButtonComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'dialogButtons' }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n row-layout\n [gap]=\"gapValue()\"\n [padding]=\"paddingValue()\"\n [paddingBottom]=\"paddingBottomValue()\"\n [justifyContent]=\"justifyContentValue()\"\n [flexDirection]=\"componentOptions().reverseOrder ? 'row-reverse' : 'row'\"\n [class]=\"className()\"\n>\n <button\n text-button\n [variant]=\"confirmVariant()\"\n [size]=\"buttonSize()\"\n (click)=\"confirmed.emit(); closeDialog()\"\n [disable]=\"disableConfirm()\"\n >\n {{ confirmButtonText() || 'Confirm' }}\n </button>\n <button text-button [variant]=\"cancelVariant()\" [size]=\"buttonSize()\" (click)=\"closeDialog()\">\n {{ cancelButtonText() || 'Cancel' }}\n </button>\n</div>\n" }]
|
|
3045
|
+
}], propDecorators: { confirmButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmButtonText", required: false }] }], confirmButtonVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmButtonVariant", required: false }] }], cancelButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonText", required: false }] }], cancelButtonVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonVariant", required: false }] }], disableConfirm: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableConfirm", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], paddingBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingBottom", required: false }] }], justifyContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "justifyContent", required: false }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }] } });
|
|
3008
3046
|
|
|
3009
3047
|
class UniDialogHeaderComponent extends BaseComponent {
|
|
3010
3048
|
dialog = inject(UniDialogComponent, {
|
|
@@ -3022,11 +3060,11 @@ class UniDialogHeaderComponent extends BaseComponent {
|
|
|
3022
3060
|
this.dialog?.close();
|
|
3023
3061
|
}
|
|
3024
3062
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3025
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3063
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDialogHeaderComponent, isStandalone: true, selector: "[uni-dialog-header]", providers: [{ provide: COMPONENT_NAME, useValue: 'dialogHeader' }], usesInheritance: true, ngImport: i0, template: "<div\n row-layout\n [color]=\"componentOptions().color\"\n [borderRadius]=\"componentOptions().borderRadius\"\n [height]=\"componentOptions().height\"\n alignItems=\"center\"\n [paddingHorizontal]=\"componentOptions().paddingHorizontal ?? 'sm'\"\n>\n <!-- Balance spacer: only centered titles need to offset the close button. -->\n @if ((componentOptions().textAlign || 'center') === 'center') {\n <div box-layout [width]=\"26\"></div>\n }\n <div box-layout [grow]=\"1\" [attr.id]=\"titleId\">\n <span uni-text\n [typeface]=\"componentOptions().textRole\"\n [color]=\"componentOptions().textColor\"\n display=\"block\"\n [align]=\"componentOptions().textAlign || 'center'\"\n ><ng-content></ng-content\n ></span>\n </div>\n <button\n icon-button\n [iconName]=\"componentOptions().closeButtonIcon\"\n [symbolName]=\"componentOptions().closeButtonSymbol\"\n variant=\"ghost\"\n (click)=\"closeDialog()\"\n [size]=\"componentOptions().closeButtonSize || 'md'\"\n >\n Close\n </button>\n</div>\n", dependencies: [{ kind: "component", type: UniBoxComponent, selector: "[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: 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: UniRowComponent, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3026
3064
|
}
|
|
3027
3065
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDialogHeaderComponent, decorators: [{
|
|
3028
3066
|
type: Component,
|
|
3029
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[uni-dialog-header]', imports: [UniBoxComponent, UniIconButtonComponent, UniTextComponent, UniRowComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'dialogHeader' }], template: "<div\n row-layout\n [color]=\"componentOptions().color\"\n [borderRadius]=\"componentOptions().borderRadius\"\n [height]=\"componentOptions().height\"\n alignItems=\"center\"\n paddingHorizontal=\"sm\"\n>\n <div box-layout [width]=\"26\"></div>\n <div box-layout [grow]=\"1\" [attr.id]=\"titleId\">\n <span uni-text\n [typeface]=\"componentOptions().textRole\"\n [color]=\"componentOptions().textColor\"\n display=\"block\"\n [align]=\"componentOptions().textAlign || 'center'\"\n ><ng-content></ng-content\n ></span>\n </div>\n <button\n icon-button\n [iconName]=\"componentOptions().closeButtonIcon\"\n [symbolName]=\"componentOptions().closeButtonSymbol\"\n variant=\"ghost\"\n (click)=\"closeDialog()\"\n [size]=\"componentOptions().closeButtonSize || 'md'\"\n >\n Close\n </button>\n</div>\n" }]
|
|
3067
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[uni-dialog-header]', imports: [UniBoxComponent, UniIconButtonComponent, UniTextComponent, UniRowComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'dialogHeader' }], template: "<div\n row-layout\n [color]=\"componentOptions().color\"\n [borderRadius]=\"componentOptions().borderRadius\"\n [height]=\"componentOptions().height\"\n alignItems=\"center\"\n [paddingHorizontal]=\"componentOptions().paddingHorizontal ?? 'sm'\"\n>\n <!-- Balance spacer: only centered titles need to offset the close button. -->\n @if ((componentOptions().textAlign || 'center') === 'center') {\n <div box-layout [width]=\"26\"></div>\n }\n <div box-layout [grow]=\"1\" [attr.id]=\"titleId\">\n <span uni-text\n [typeface]=\"componentOptions().textRole\"\n [color]=\"componentOptions().textColor\"\n display=\"block\"\n [align]=\"componentOptions().textAlign || 'center'\"\n ><ng-content></ng-content\n ></span>\n </div>\n <button\n icon-button\n [iconName]=\"componentOptions().closeButtonIcon\"\n [symbolName]=\"componentOptions().closeButtonSymbol\"\n variant=\"ghost\"\n (click)=\"closeDialog()\"\n [size]=\"componentOptions().closeButtonSize || 'md'\"\n >\n Close\n </button>\n</div>\n" }]
|
|
3030
3068
|
}], ctorParameters: () => [] });
|
|
3031
3069
|
|
|
3032
3070
|
class UniDividerComponent {
|
|
@@ -3416,6 +3454,15 @@ class UniExpandComponent {
|
|
|
3416
3454
|
collapsed = model(true, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
|
|
3417
3455
|
/** Referenced by the controlling toggle's aria-controls. */
|
|
3418
3456
|
regionId = uniqueId('uni-expand');
|
|
3457
|
+
/**
|
|
3458
|
+
* animate.enter has no initial-render guard, so an expand initialized with
|
|
3459
|
+
* collapsed = false would play the enter animation on load. Enable
|
|
3460
|
+
* animations only after the first render, i.e. on real state changes.
|
|
3461
|
+
*/
|
|
3462
|
+
ready = signal(false, ...(ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []));
|
|
3463
|
+
constructor() {
|
|
3464
|
+
afterNextRender(() => this.ready.set(true));
|
|
3465
|
+
}
|
|
3419
3466
|
toggle() {
|
|
3420
3467
|
this.collapsed.update((collapsed) => !collapsed);
|
|
3421
3468
|
}
|
|
@@ -3438,7 +3485,7 @@ class UniExpandComponent {
|
|
|
3438
3485
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniExpandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3439
3486
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniExpandComponent, isStandalone: true, selector: "uni-expand", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "attr.id": "regionId" } }, ngImport: i0, template: `@if (!collapsed()) {
|
|
3440
3487
|
<div
|
|
3441
|
-
[animate.enter]="expandAnimation"
|
|
3488
|
+
[animate.enter]="ready() ? expandAnimation : ''"
|
|
3442
3489
|
[animate.leave]="collapseAnimation"
|
|
3443
3490
|
[class]="expandClassName"
|
|
3444
3491
|
>
|
|
@@ -3456,7 +3503,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
3456
3503
|
imports: [],
|
|
3457
3504
|
template: `@if (!collapsed()) {
|
|
3458
3505
|
<div
|
|
3459
|
-
[animate.enter]="expandAnimation"
|
|
3506
|
+
[animate.enter]="ready() ? expandAnimation : ''"
|
|
3460
3507
|
[animate.leave]="collapseAnimation"
|
|
3461
3508
|
[class]="expandClassName"
|
|
3462
3509
|
>
|
|
@@ -3469,7 +3516,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
3469
3516
|
'[attr.id]': 'regionId',
|
|
3470
3517
|
},
|
|
3471
3518
|
}]
|
|
3472
|
-
}], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }] } });
|
|
3519
|
+
}], ctorParameters: () => [], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }] } });
|
|
3473
3520
|
|
|
3474
3521
|
/**
|
|
3475
3522
|
* UniExpandComponent Barrel File
|
|
@@ -3716,7 +3763,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
3716
3763
|
|
|
3717
3764
|
class UniExpandAreaComponent {
|
|
3718
3765
|
title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
3719
|
-
initCollapsed = input(false, ...(ngDevMode ?
|
|
3766
|
+
initCollapsed = input(false, { ...(ngDevMode ? { debugName: "initCollapsed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3720
3767
|
padding = input('md', ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
|
|
3721
3768
|
collapsed = output();
|
|
3722
3769
|
toggleRef = viewChild.required('toggle');
|
|
@@ -4661,7 +4708,7 @@ class UniAlertComponent extends BaseComponent {
|
|
|
4661
4708
|
}
|
|
4662
4709
|
effectiveIconName = computed(() => this.iconName(), ...(ngDevMode ? [{ debugName: "effectiveIconName" }] : /* istanbul ignore next */ []));
|
|
4663
4710
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4664
|
-
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 });
|
|
4711
|
+
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 });
|
|
4665
4712
|
}
|
|
4666
4713
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniAlertComponent, decorators: [{
|
|
4667
4714
|
type: Component,
|
|
@@ -4683,7 +4730,7 @@ class ConfirmationDialogComponent {
|
|
|
4683
4730
|
confirmation = input(...(ngDevMode ? [undefined, { debugName: "confirmation" }] : /* istanbul ignore next */ []));
|
|
4684
4731
|
showing = output();
|
|
4685
4732
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4686
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: ConfirmationDialogComponent, isStandalone: true, selector: "uni-confirmation-dialog", inputs: { show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, confirmation: { classPropertyName: "confirmation", publicName: "confirmation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { showing: "showing" }, ngImport: i0, template: "<dialog uni-dialog [show]=\"show()\" (showing)=\"showing.emit($event)\">\n <div uni-dialog-header>\n {{ confirmation()?.title }}\n </div>\n <div box-layout padding=\"md\">\n <span uni-text>\n {{ confirmation()?.message }}\n </span>\n </div>\n <div\n dialog-buttons\n [confirmButtonText]=\"confirmation()?.actionLabel\"\n (confirmed)=\"confirmation()?.action()\"\n [cancelButtonText]=\"confirmation()?.dismissLabel\"\n ></div>\n</dialog>\n", dependencies: [{ kind: "component", type: UniDialogComponent, selector: "dialog[uni-dialog]", inputs: ["show", "ariaLabel", "initialFocus", "defaultCloseButton"], outputs: ["showChange", "showing"] }, { kind: "component", type: UniDialogHeaderComponent, selector: "[uni-dialog-header]" }, { 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: UniDialogButtonsComponent, selector: "[uni-dialog-buttons], [dialog-buttons]", inputs: ["confirmButtonText", "confirmButtonVariant", "cancelButtonText", "disableConfirm", "padding", "paddingBottom", "justifyContent"], outputs: ["confirmed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4733
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: ConfirmationDialogComponent, isStandalone: true, selector: "uni-confirmation-dialog", inputs: { show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, confirmation: { classPropertyName: "confirmation", publicName: "confirmation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { showing: "showing" }, ngImport: i0, template: "<dialog uni-dialog [show]=\"show()\" (showing)=\"showing.emit($event)\">\n <div uni-dialog-header>\n {{ confirmation()?.title }}\n </div>\n <div box-layout padding=\"md\">\n <span uni-text>\n {{ confirmation()?.message }}\n </span>\n </div>\n <div\n dialog-buttons\n [confirmButtonText]=\"confirmation()?.actionLabel\"\n (confirmed)=\"confirmation()?.action()\"\n [cancelButtonText]=\"confirmation()?.dismissLabel\"\n ></div>\n</dialog>\n", dependencies: [{ kind: "component", type: UniDialogComponent, selector: "dialog[uni-dialog]", inputs: ["show", "ariaLabel", "initialFocus", "defaultCloseButton"], outputs: ["showChange", "showing"] }, { kind: "component", type: UniDialogHeaderComponent, selector: "[uni-dialog-header]" }, { 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: UniDialogButtonsComponent, selector: "[uni-dialog-buttons], [dialog-buttons]", inputs: ["confirmButtonText", "confirmButtonVariant", "cancelButtonText", "cancelButtonVariant", "disableConfirm", "padding", "paddingBottom", "justifyContent"], outputs: ["confirmed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4687
4734
|
}
|
|
4688
4735
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
|
|
4689
4736
|
type: Component,
|
|
@@ -4780,7 +4827,7 @@ class UniSnackbarComponent extends BaseComponent {
|
|
|
4780
4827
|
this.timer.resume();
|
|
4781
4828
|
}
|
|
4782
4829
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4783
|
-
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 });
|
|
4830
|
+
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 });
|
|
4784
4831
|
}
|
|
4785
4832
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSnackbarComponent, decorators: [{
|
|
4786
4833
|
type: Component,
|
|
@@ -7025,6 +7072,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
7025
7072
|
}]
|
|
7026
7073
|
}], ctorParameters: () => [] });
|
|
7027
7074
|
|
|
7075
|
+
/**
|
|
7076
|
+
* Drop-in switcher for the themes registered via `UNI_THEMES`: a select over
|
|
7077
|
+
* `ThemeService.themeOptions` that applies the choice through `selectTheme`
|
|
7078
|
+
* (so it persists across reloads like any other theme selection).
|
|
7079
|
+
*/
|
|
7080
|
+
class UniThemeSwitchComponent {
|
|
7081
|
+
theme = inject(ThemeService);
|
|
7082
|
+
/** Accessible name for the underlying select. */
|
|
7083
|
+
ariaLabel = input('Theme', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
7084
|
+
/** Emits the selected theme key after it has been applied. */
|
|
7085
|
+
themeChanged = output();
|
|
7086
|
+
selected = computed(() => this.theme.selectedThemeKey() || null, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
|
|
7087
|
+
select(themeName) {
|
|
7088
|
+
if (!themeName)
|
|
7089
|
+
return;
|
|
7090
|
+
this.theme.selectTheme(themeName);
|
|
7091
|
+
this.themeChanged.emit(themeName);
|
|
7092
|
+
}
|
|
7093
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniThemeSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7094
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniThemeSwitchComponent, isStandalone: true, selector: "uni-theme-switch", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { themeChanged: "themeChanged" }, ngImport: i0, template: `
|
|
7095
|
+
<uni-select
|
|
7096
|
+
[options]="theme.themeOptions()"
|
|
7097
|
+
[value]="selected()"
|
|
7098
|
+
(valueChange)="select($event)"
|
|
7099
|
+
[ariaLabel]="ariaLabel()"
|
|
7100
|
+
/>
|
|
7101
|
+
`, isInline: true, dependencies: [{ kind: "component", type: UniSelectComponent, selector: "uni-select", inputs: ["value", "disabled", "touched", "invalid", "dirty", "required", "ariaDescribedBy", "options", "placeholder", "ariaLabel"], outputs: ["valueChange", "touchedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7102
|
+
}
|
|
7103
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniThemeSwitchComponent, decorators: [{
|
|
7104
|
+
type: Component,
|
|
7105
|
+
args: [{
|
|
7106
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
7107
|
+
selector: 'uni-theme-switch',
|
|
7108
|
+
imports: [UniSelectComponent],
|
|
7109
|
+
template: `
|
|
7110
|
+
<uni-select
|
|
7111
|
+
[options]="theme.themeOptions()"
|
|
7112
|
+
[value]="selected()"
|
|
7113
|
+
(valueChange)="select($event)"
|
|
7114
|
+
[ariaLabel]="ariaLabel()"
|
|
7115
|
+
/>
|
|
7116
|
+
`,
|
|
7117
|
+
}]
|
|
7118
|
+
}], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], themeChanged: [{ type: i0.Output, args: ["themeChanged"] }] } });
|
|
7119
|
+
|
|
7028
7120
|
class UniToggleComponent extends BaseComponent {
|
|
7029
7121
|
// --- REQUIRED SIGNALS (populated by FormCheckboxControl) ---
|
|
7030
7122
|
checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
@@ -7139,5 +7231,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
7139
7231
|
* Generated bundle index. Do not edit.
|
|
7140
7232
|
*/
|
|
7141
7233
|
|
|
7142
|
-
export { BodyRenderDirective, ConfirmationDialogComponent, DragAndDropDirective, FOCUSABLE_SELECTOR, LocalStorageService, NotificationService, NotificationsComponent, RippleDirective, ThemeService, UNI_THEMES, UniAlertComponent, UniAppBarComponent, UniAvatarComponent, UniAvatarGroupComponent, UniBackgroundComponent, UniBadgeComponent, UniBaseDatasource, UniBoxComponent, UniBreadcrumbComponent, UniButtonComponent, UniButtonGroupComponent, UniCardComponent, UniCardContentComponent, UniCardHeaderComponent, UniCenterComponent, UniCheckboxComponent, UniDataSearchComponent, UniDataTableComponent, UniDebounceInputComponent, UniDialogButtonsComponent, UniDialogComponent, UniDialogHeaderComponent, UniDividerComponent, UniDrawerComponent, 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, UniSkeletonComponent, UniSliderComponent, UniSnackbarComponent, UniSortHeaderComponent, UniStackComponent, UniStatComponent, UniSymbolComponent, UniTabComponent, UniTabsComponent, UniTagComponent, UniTextComponent, UniTextareaComponent, UniThemeBuilderComponent, UniToggleComponent, UniTooltipComponent, UniWrapComponent, acceptableFile, anchorArrowStyles, anchorStyles, getFileExtension, motionSafe, newAnchorName, resolveFocusTarget, uniqueId, useTimer, visuallyHidden };
|
|
7234
|
+
export { BodyRenderDirective, ConfirmationDialogComponent, DragAndDropDirective, FOCUSABLE_SELECTOR, LocalStorageService, NotificationService, NotificationsComponent, RippleDirective, ThemeService, UNI_THEMES, UniAlertComponent, UniAppBarComponent, UniAvatarComponent, UniAvatarGroupComponent, UniBackgroundComponent, UniBadgeComponent, UniBaseDatasource, UniBoxComponent, UniBreadcrumbComponent, UniButtonComponent, UniButtonGroupComponent, UniCardComponent, UniCardContentComponent, UniCardHeaderComponent, UniCenterComponent, UniCheckboxComponent, UniDataSearchComponent, UniDataTableComponent, UniDebounceInputComponent, UniDialogButtonsComponent, UniDialogComponent, UniDialogHeaderComponent, UniDividerComponent, UniDrawerComponent, 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, UniSkeletonComponent, UniSliderComponent, UniSnackbarComponent, UniSortHeaderComponent, UniStackComponent, UniStatComponent, UniSymbolComponent, UniTabComponent, UniTabsComponent, UniTagComponent, UniTextComponent, UniTextareaComponent, UniThemeBuilderComponent, UniThemeSwitchComponent, UniToggleComponent, UniTooltipComponent, UniWrapComponent, acceptableFile, anchorArrowStyles, anchorStyles, getFileExtension, motionSafe, newAnchorName, resolveFocusTarget, uniqueId, useTimer, visuallyHidden };
|
|
7143
7235
|
//# sourceMappingURL=uni-design-system-uni-angular.mjs.map
|