@uni-design-system/uni-angular 5.1.0 → 6.0.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,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal, computed, linkedSignal, resource, Injectable, inject, DestroyRef, InjectionToken, input, ChangeDetectionStrategy, Component, Renderer2, ElementRef, Directive, model,
|
|
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';
|
|
3
3
|
import { injectGlobal, css, keyframes } from '@emotion/css';
|
|
4
|
-
import { UniThemes, LightTheme, toTypefaces, createThemeFromPalette, Z_INDEX, fadeIn, fadeOut, expandFadeIn, collapseFadeOut, removeInputPlatformStyling } from '@uni-design-system/uni-core';
|
|
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';
|
|
6
6
|
|
|
7
7
|
let nextUniqueId = 0;
|
|
@@ -901,6 +901,283 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
901
901
|
}]
|
|
902
902
|
}], ctorParameters: () => [] });
|
|
903
903
|
|
|
904
|
+
const COMPONENT_NAME = new InjectionToken('');
|
|
905
|
+
class BaseComponent {
|
|
906
|
+
componentName = inject(COMPONENT_NAME);
|
|
907
|
+
theme = inject(ThemeService);
|
|
908
|
+
variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ [])); // TODO: Make Variant support undefined
|
|
909
|
+
size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
910
|
+
componentTheme = computed(() => this.theme.getComponentTheme(this.componentName)(), ...(ngDevMode ? [{ debugName: "componentTheme" }] : /* istanbul ignore next */ []));
|
|
911
|
+
componentOptions = computed(() => this.theme.getComponentOptions(this.componentName)(), ...(ngDevMode ? [{ debugName: "componentOptions" }] : /* istanbul ignore next */ []));
|
|
912
|
+
style = computed(() => this.theme.componentStyle(this.componentName, this.variant(), this.size())(), ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
|
|
913
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
914
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: BaseComponent, isStandalone: true, selector: "ng-component", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
915
|
+
}
|
|
916
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: BaseComponent, decorators: [{
|
|
917
|
+
type: Component,
|
|
918
|
+
args: [{
|
|
919
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
920
|
+
imports: [],
|
|
921
|
+
template: ``,
|
|
922
|
+
}]
|
|
923
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
924
|
+
|
|
925
|
+
/**
|
|
926
|
+
* Horizontal application bar: project leading controls (menu button, logo)
|
|
927
|
+
* with the `leading` attribute, actions with `trailing` (pushed to the far
|
|
928
|
+
* edge), and either pass `title` or project custom center content. Surface,
|
|
929
|
+
* divider, height, typography and spacing all resolve from `appBar` tokens.
|
|
930
|
+
* Place it inside your page's `<header>` landmark.
|
|
931
|
+
*/
|
|
932
|
+
class UniAppBarComponent extends BaseComponent {
|
|
933
|
+
/** Bar title; alternatively project your own center content. */
|
|
934
|
+
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
|
|
935
|
+
/** Stick the bar to the top of its scroll container. */
|
|
936
|
+
sticky = input(false, ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
|
|
937
|
+
className = computed(() => {
|
|
938
|
+
const options = this.componentOptions();
|
|
939
|
+
return css({
|
|
940
|
+
display: 'flex',
|
|
941
|
+
alignItems: 'center',
|
|
942
|
+
boxSizing: 'border-box',
|
|
943
|
+
width: '100%',
|
|
944
|
+
height: options.height ?? 56,
|
|
945
|
+
flex: 'none',
|
|
946
|
+
...this.theme.colorPair(options.color),
|
|
947
|
+
...this.theme.gap(options.gap),
|
|
948
|
+
...this.theme.paddingLeft(options.padding),
|
|
949
|
+
...this.theme.paddingRight(options.padding),
|
|
950
|
+
...this.theme.borderBottom(options.divider),
|
|
951
|
+
...this.theme.boxShadow(options.elevation),
|
|
952
|
+
'& .uni-app-bar-title': {
|
|
953
|
+
...this.theme.typeface(options.typeface),
|
|
954
|
+
whiteSpace: 'nowrap',
|
|
955
|
+
},
|
|
956
|
+
'& .uni-app-bar-spacer': { flexGrow: 1 },
|
|
957
|
+
...(this.sticky() && { position: 'sticky', top: 0, zIndex: 10 }),
|
|
958
|
+
});
|
|
959
|
+
}, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
960
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniAppBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
961
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniAppBarComponent, isStandalone: true, selector: "uni-app-bar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'appBar' }], usesInheritance: true, ngImport: i0, template: `
|
|
962
|
+
<ng-content select="[leading]" />
|
|
963
|
+
@if (title()) {
|
|
964
|
+
<span class="uni-app-bar-title">{{ title() }}</span>
|
|
965
|
+
}
|
|
966
|
+
<ng-content />
|
|
967
|
+
<span class="uni-app-bar-spacer"></span>
|
|
968
|
+
<ng-content select="[trailing]" />
|
|
969
|
+
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
970
|
+
}
|
|
971
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniAppBarComponent, decorators: [{
|
|
972
|
+
type: Component,
|
|
973
|
+
args: [{
|
|
974
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
975
|
+
selector: 'uni-app-bar',
|
|
976
|
+
providers: [{ provide: COMPONENT_NAME, useValue: 'appBar' }],
|
|
977
|
+
host: { '[class]': 'className()' },
|
|
978
|
+
template: `
|
|
979
|
+
<ng-content select="[leading]" />
|
|
980
|
+
@if (title()) {
|
|
981
|
+
<span class="uni-app-bar-title">{{ title() }}</span>
|
|
982
|
+
}
|
|
983
|
+
<ng-content />
|
|
984
|
+
<span class="uni-app-bar-spacer"></span>
|
|
985
|
+
<ng-content select="[trailing]" />
|
|
986
|
+
`,
|
|
987
|
+
}]
|
|
988
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }] } });
|
|
989
|
+
|
|
990
|
+
class UniSymbolComponent extends BaseComponent {
|
|
991
|
+
name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
992
|
+
fill = input(...(ngDevMode ? [undefined, { debugName: "fill" }] : /* istanbul ignore next */ []));
|
|
993
|
+
weight = input(...(ngDevMode ? [undefined, { debugName: "weight" }] : /* istanbul ignore next */ []));
|
|
994
|
+
grade = input(...(ngDevMode ? [undefined, { debugName: "grade" }] : /* istanbul ignore next */ []));
|
|
995
|
+
opticalSize = input(...(ngDevMode ? [undefined, { debugName: "opticalSize" }] : /* istanbul ignore next */ []));
|
|
996
|
+
className = computed(() => {
|
|
997
|
+
const settings = `'FILL' ${this.fill() || this.componentOptions().fill || 0}, ` +
|
|
998
|
+
`'wght' ${this.weight() || this.componentOptions().weight || 400}, ` +
|
|
999
|
+
`'GRAD' ${this.grade() || this.componentOptions().grade || 0}, ` +
|
|
1000
|
+
`'opsz' ${this.opticalSize() || this.componentOptions().opticalSize || 24}`;
|
|
1001
|
+
return ('material-symbols-rounded ' +
|
|
1002
|
+
css({
|
|
1003
|
+
fontVariationSettings: settings,
|
|
1004
|
+
fontSize: `${this.opticalSize() || this.componentOptions().opticalSize || 24}px`,
|
|
1005
|
+
}));
|
|
1006
|
+
}, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
1007
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSymbolComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1008
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniSymbolComponent, isStandalone: true, selector: "uni-symbol", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, grade: { classPropertyName: "grade", publicName: "grade", isSignal: true, isRequired: false, transformFunction: null }, opticalSize: { classPropertyName: "opticalSize", publicName: "opticalSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'symbol' }], usesInheritance: true, ngImport: i0, template: `{{ name() }}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1009
|
+
}
|
|
1010
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSymbolComponent, decorators: [{
|
|
1011
|
+
type: Component,
|
|
1012
|
+
args: [{
|
|
1013
|
+
selector: 'uni-symbol',
|
|
1014
|
+
imports: [],
|
|
1015
|
+
template: `{{ name() }}`,
|
|
1016
|
+
providers: [{ provide: COMPONENT_NAME, useValue: 'symbol' }],
|
|
1017
|
+
// Icons are decorative: hide the ligature text (e.g. "chevron_left") from
|
|
1018
|
+
// screen readers. Meaningful icons get their name from the parent control.
|
|
1019
|
+
host: {
|
|
1020
|
+
'[class]': 'className()',
|
|
1021
|
+
'aria-hidden': 'true',
|
|
1022
|
+
},
|
|
1023
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1024
|
+
}]
|
|
1025
|
+
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }], grade: [{ type: i0.Input, args: [{ isSignal: true, alias: "grade", required: false }] }], opticalSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "opticalSize", required: false }] }] } });
|
|
1026
|
+
|
|
1027
|
+
/**
|
|
1028
|
+
* Identity avatar with a graceful fallback chain: image → initials from
|
|
1029
|
+
* `name` → themed symbol. Coloring, radius, typeface and sizes all resolve
|
|
1030
|
+
* from `avatar` theme tokens; `variant` picks the container palette.
|
|
1031
|
+
*/
|
|
1032
|
+
class UniAvatarComponent extends BaseComponent {
|
|
1033
|
+
/** Image URL; on load error the avatar falls back to initials/symbol. */
|
|
1034
|
+
src = input(...(ngDevMode ? [undefined, { debugName: "src" }] : /* istanbul ignore next */ []));
|
|
1035
|
+
/** Person's name: drives the initials and the accessible label. */
|
|
1036
|
+
name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
|
|
1037
|
+
/** Verbatim text instead of derived initials (e.g. a group's “+3”). */
|
|
1038
|
+
text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
|
|
1039
|
+
imageFailed = signal(false, ...(ngDevMode ? [{ debugName: "imageFailed" }] : /* istanbul ignore next */ []));
|
|
1040
|
+
showImage = computed(() => !!this.src() && !this.imageFailed(), ...(ngDevMode ? [{ debugName: "showImage" }] : /* istanbul ignore next */ []));
|
|
1041
|
+
initials = computed(() => {
|
|
1042
|
+
const name = this.name()?.trim();
|
|
1043
|
+
if (!name)
|
|
1044
|
+
return '';
|
|
1045
|
+
const words = name.split(/\s+/);
|
|
1046
|
+
const first = words[0]?.[0] ?? '';
|
|
1047
|
+
const last = words.length > 1 ? (words[words.length - 1][0] ?? '') : '';
|
|
1048
|
+
return (first + last).toUpperCase();
|
|
1049
|
+
}, ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
|
|
1050
|
+
label = computed(() => this.name() ?? this.text(), ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1051
|
+
className = computed(() => css([
|
|
1052
|
+
// Typeface (family/weight) before the merged theme style, so the size
|
|
1053
|
+
// record's fontSize wins over the typeface's.
|
|
1054
|
+
{
|
|
1055
|
+
...this.theme.typeface(this.componentOptions().typeface),
|
|
1056
|
+
...this.theme.radius(this.componentOptions().borderRadius),
|
|
1057
|
+
},
|
|
1058
|
+
this.style(),
|
|
1059
|
+
{
|
|
1060
|
+
display: 'inline-flex',
|
|
1061
|
+
alignItems: 'center',
|
|
1062
|
+
justifyContent: 'center',
|
|
1063
|
+
flex: 'none',
|
|
1064
|
+
overflow: 'hidden',
|
|
1065
|
+
userSelect: 'none',
|
|
1066
|
+
lineHeight: 1,
|
|
1067
|
+
'& img': { width: '100%', height: '100%', objectFit: 'cover' },
|
|
1068
|
+
'& symbol': { fontSize: '1.4em' },
|
|
1069
|
+
},
|
|
1070
|
+
]), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
1071
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniAvatarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1072
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniAvatarComponent, isStandalone: true, selector: "uni-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()", "attr.role": "label() ? 'img' : null", "attr.aria-label": "label() || null", "attr.aria-hidden": "label() ? null : 'true'" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'avatar' }], usesInheritance: true, ngImport: i0, template: `
|
|
1073
|
+
@if (showImage()) {
|
|
1074
|
+
<img [src]="src()" alt="" (error)="imageFailed.set(true)" />
|
|
1075
|
+
} @else if (text()) {
|
|
1076
|
+
<span>{{ text() }}</span>
|
|
1077
|
+
} @else if (initials()) {
|
|
1078
|
+
<span>{{ initials() }}</span>
|
|
1079
|
+
} @else {
|
|
1080
|
+
<uni-symbol [name]="componentOptions().fallbackSymbol ?? 'person'" />
|
|
1081
|
+
}
|
|
1082
|
+
`, isInline: true, dependencies: [{ kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1083
|
+
}
|
|
1084
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniAvatarComponent, decorators: [{
|
|
1085
|
+
type: Component,
|
|
1086
|
+
args: [{
|
|
1087
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1088
|
+
selector: 'uni-avatar',
|
|
1089
|
+
imports: [UniSymbolComponent],
|
|
1090
|
+
providers: [{ provide: COMPONENT_NAME, useValue: 'avatar' }],
|
|
1091
|
+
host: {
|
|
1092
|
+
'[class]': 'className()',
|
|
1093
|
+
'[attr.role]': "label() ? 'img' : null",
|
|
1094
|
+
'[attr.aria-label]': 'label() || null',
|
|
1095
|
+
'[attr.aria-hidden]': "label() ? null : 'true'",
|
|
1096
|
+
},
|
|
1097
|
+
template: `
|
|
1098
|
+
@if (showImage()) {
|
|
1099
|
+
<img [src]="src()" alt="" (error)="imageFailed.set(true)" />
|
|
1100
|
+
} @else if (text()) {
|
|
1101
|
+
<span>{{ text() }}</span>
|
|
1102
|
+
} @else if (initials()) {
|
|
1103
|
+
<span>{{ initials() }}</span>
|
|
1104
|
+
} @else {
|
|
1105
|
+
<uni-symbol [name]="componentOptions().fallbackSymbol ?? 'person'" />
|
|
1106
|
+
}
|
|
1107
|
+
`,
|
|
1108
|
+
}]
|
|
1109
|
+
}], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
|
|
1110
|
+
|
|
1111
|
+
/**
|
|
1112
|
+
* Overlapping stack of avatars. `max` collapses the overflow into a themed
|
|
1113
|
+
* “+N” chip (itself a `uni-avatar`). Overlap and separator ring resolve from
|
|
1114
|
+
* `avatarGroup` theme tokens.
|
|
1115
|
+
*/
|
|
1116
|
+
class UniAvatarGroupComponent extends BaseComponent {
|
|
1117
|
+
/** Show at most this many avatars; the rest collapse into a “+N” chip. */
|
|
1118
|
+
max = input(undefined, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
|
|
1119
|
+
avatars = contentChildren(UniAvatarComponent, ...(ngDevMode ? [{ debugName: "avatars" }] : /* istanbul ignore next */ []));
|
|
1120
|
+
surplus = computed(() => {
|
|
1121
|
+
const max = this.max();
|
|
1122
|
+
if (max === undefined)
|
|
1123
|
+
return 0;
|
|
1124
|
+
return Math.max(0, this.avatars().length - max);
|
|
1125
|
+
}, ...(ngDevMode ? [{ debugName: "surplus" }] : /* istanbul ignore next */ []));
|
|
1126
|
+
className = computed(() => {
|
|
1127
|
+
const options = this.componentOptions();
|
|
1128
|
+
const overlap = this.theme.spacing()[options.overlap ?? 'sm'] ?? '8px';
|
|
1129
|
+
const ring = `${options.ringWidth ?? 2}px solid ${this.theme.colors()[options.ringColor ?? 'surface'] ?? 'transparent'}`;
|
|
1130
|
+
const max = this.max();
|
|
1131
|
+
return css({
|
|
1132
|
+
display: 'inline-flex',
|
|
1133
|
+
alignItems: 'center',
|
|
1134
|
+
'& uni-avatar': {
|
|
1135
|
+
border: ring,
|
|
1136
|
+
marginLeft: `calc(-1 * ${overlap})`,
|
|
1137
|
+
'&:first-child': { marginLeft: 0 },
|
|
1138
|
+
},
|
|
1139
|
+
// Collapse the overflow: hide projected avatars past `max`, but never
|
|
1140
|
+
// the surplus chip this component renders itself.
|
|
1141
|
+
...(max !== undefined && {
|
|
1142
|
+
[`& uni-avatar:nth-of-type(n + ${max + 1}):not(.uni-surplus)`]: { display: 'none' },
|
|
1143
|
+
}),
|
|
1144
|
+
});
|
|
1145
|
+
}, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
1146
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniAvatarGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1147
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniAvatarGroupComponent, isStandalone: true, selector: "uni-avatar-group", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'avatarGroup' }], queries: [{ propertyName: "avatars", predicate: UniAvatarComponent, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
|
|
1148
|
+
<ng-content />
|
|
1149
|
+
@if (surplus() > 0) {
|
|
1150
|
+
<uni-avatar
|
|
1151
|
+
class="uni-surplus"
|
|
1152
|
+
[text]="'+' + surplus()"
|
|
1153
|
+
variant="quaternary"
|
|
1154
|
+
[size]="size()"
|
|
1155
|
+
/>
|
|
1156
|
+
}
|
|
1157
|
+
`, isInline: true, dependencies: [{ kind: "component", type: UniAvatarComponent, selector: "uni-avatar", inputs: ["src", "name", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1158
|
+
}
|
|
1159
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniAvatarGroupComponent, decorators: [{
|
|
1160
|
+
type: Component,
|
|
1161
|
+
args: [{
|
|
1162
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1163
|
+
selector: 'uni-avatar-group',
|
|
1164
|
+
imports: [UniAvatarComponent],
|
|
1165
|
+
providers: [{ provide: COMPONENT_NAME, useValue: 'avatarGroup' }],
|
|
1166
|
+
host: { '[class]': 'className()', role: 'group' },
|
|
1167
|
+
template: `
|
|
1168
|
+
<ng-content />
|
|
1169
|
+
@if (surplus() > 0) {
|
|
1170
|
+
<uni-avatar
|
|
1171
|
+
class="uni-surplus"
|
|
1172
|
+
[text]="'+' + surplus()"
|
|
1173
|
+
variant="quaternary"
|
|
1174
|
+
[size]="size()"
|
|
1175
|
+
/>
|
|
1176
|
+
}
|
|
1177
|
+
`,
|
|
1178
|
+
}]
|
|
1179
|
+
}], propDecorators: { max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], avatars: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => UniAvatarComponent), { isSignal: true }] }] } });
|
|
1180
|
+
|
|
904
1181
|
class UniBackgroundComponent {
|
|
905
1182
|
theme = inject(ThemeService);
|
|
906
1183
|
image = input(...(ngDevMode ? [undefined, { debugName: "image" }] : /* istanbul ignore next */ []));
|
|
@@ -922,12 +1199,12 @@ class UniBackgroundComponent {
|
|
|
922
1199
|
]);
|
|
923
1200
|
}, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
924
1201
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniBackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
925
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniBackgroundComponent, isStandalone: true, selector: "uni-background
|
|
1202
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniBackgroundComponent, isStandalone: true, selector: "uni-background", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, imagePosition: { classPropertyName: "imagePosition", publicName: "imagePosition", isSignal: true, isRequired: false, transformFunction: null }, imageSize: { classPropertyName: "imageSize", publicName: "imageSize", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
926
1203
|
}
|
|
927
1204
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniBackgroundComponent, decorators: [{
|
|
928
1205
|
type: Component,
|
|
929
1206
|
args: [{
|
|
930
|
-
selector: 'uni-background
|
|
1207
|
+
selector: 'uni-background',
|
|
931
1208
|
imports: [],
|
|
932
1209
|
template: `<ng-content></ng-content>`,
|
|
933
1210
|
host: { '[class]': 'className()' },
|
|
@@ -941,27 +1218,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
941
1218
|
* This file exports all public-facing elements of the background component.
|
|
942
1219
|
*/
|
|
943
1220
|
|
|
944
|
-
const COMPONENT_NAME = new InjectionToken('');
|
|
945
|
-
class BaseComponent {
|
|
946
|
-
componentName = inject(COMPONENT_NAME);
|
|
947
|
-
theme = inject(ThemeService);
|
|
948
|
-
variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ [])); // TODO: Make Variant support undefined
|
|
949
|
-
size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
950
|
-
componentTheme = computed(() => this.theme.getComponentTheme(this.componentName)(), ...(ngDevMode ? [{ debugName: "componentTheme" }] : /* istanbul ignore next */ []));
|
|
951
|
-
componentOptions = computed(() => this.theme.getComponentOptions(this.componentName)(), ...(ngDevMode ? [{ debugName: "componentOptions" }] : /* istanbul ignore next */ []));
|
|
952
|
-
style = computed(() => this.theme.componentStyle(this.componentName, this.variant(), this.size())(), ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
|
|
953
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
954
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: BaseComponent, isStandalone: true, selector: "ng-component", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
955
|
-
}
|
|
956
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: BaseComponent, decorators: [{
|
|
957
|
-
type: Component,
|
|
958
|
-
args: [{
|
|
959
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
960
|
-
imports: [],
|
|
961
|
-
template: ``,
|
|
962
|
-
}]
|
|
963
|
-
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
964
|
-
|
|
965
1221
|
class UniBadgeComponent extends BaseComponent {
|
|
966
1222
|
color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
967
1223
|
useVariant = input(false, ...(ngDevMode ? [{ debugName: "useVariant" }] : /* istanbul ignore next */ []));
|
|
@@ -984,12 +1240,12 @@ class UniBadgeComponent extends BaseComponent {
|
|
|
984
1240
|
]);
|
|
985
1241
|
}, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
986
1242
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniBadgeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
987
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniBadgeComponent, isStandalone: true, selector: "
|
|
1243
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniBadgeComponent, isStandalone: true, selector: "[uni-badge]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, useVariant: { classPropertyName: "useVariant", publicName: "useVariant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'badge' }], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
988
1244
|
}
|
|
989
1245
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniBadgeComponent, decorators: [{
|
|
990
1246
|
type: Component,
|
|
991
1247
|
args: [{
|
|
992
|
-
selector: '
|
|
1248
|
+
selector: '[uni-badge]',
|
|
993
1249
|
imports: [],
|
|
994
1250
|
template: `<ng-content></ng-content>`,
|
|
995
1251
|
providers: [{ provide: COMPONENT_NAME, useValue: 'badge' }],
|
|
@@ -998,24 +1254,149 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
998
1254
|
}]
|
|
999
1255
|
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], useVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "useVariant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
|
|
1000
1256
|
|
|
1257
|
+
/**
|
|
1258
|
+
* WAI-ARIA breadcrumb: a `nav` landmark wrapping an ordered list; the last
|
|
1259
|
+
* item is the current page (`aria-current="page"`), separators are decorative.
|
|
1260
|
+
* Items with `href` render as real links; without one they render as
|
|
1261
|
+
* link-styled buttons emitting `itemClicked` — wire that to your router.
|
|
1262
|
+
*/
|
|
1263
|
+
class UniBreadcrumbComponent extends BaseComponent {
|
|
1264
|
+
/** The trail, root first; the last item is the current page. */
|
|
1265
|
+
items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
1266
|
+
/** Landmark label distinguishing this nav from others on the page. */
|
|
1267
|
+
ariaLabel = input('Breadcrumb', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1268
|
+
/** Emits the clicked ancestor item (also fires for `href` links). */
|
|
1269
|
+
itemClicked = output();
|
|
1270
|
+
className = computed(() => {
|
|
1271
|
+
const options = this.componentOptions();
|
|
1272
|
+
const linkColor = this.theme.colors()[options.color ?? 'on-background-variant'];
|
|
1273
|
+
return css({
|
|
1274
|
+
'& ol': {
|
|
1275
|
+
display: 'flex',
|
|
1276
|
+
alignItems: 'center',
|
|
1277
|
+
flexWrap: 'wrap',
|
|
1278
|
+
listStyle: 'none',
|
|
1279
|
+
margin: 0,
|
|
1280
|
+
padding: 0,
|
|
1281
|
+
...this.theme.typeface(options.typeface),
|
|
1282
|
+
},
|
|
1283
|
+
'& li': {
|
|
1284
|
+
display: 'inline-flex',
|
|
1285
|
+
alignItems: 'center',
|
|
1286
|
+
...this.theme.gap(options.gap),
|
|
1287
|
+
},
|
|
1288
|
+
'& a, & button': {
|
|
1289
|
+
background: 'none',
|
|
1290
|
+
border: 0,
|
|
1291
|
+
padding: 0,
|
|
1292
|
+
font: 'inherit',
|
|
1293
|
+
cursor: 'pointer',
|
|
1294
|
+
textDecoration: 'none',
|
|
1295
|
+
color: linkColor,
|
|
1296
|
+
'&:hover': { textDecoration: 'underline' },
|
|
1297
|
+
'&:focus-visible': {
|
|
1298
|
+
outline: `2px solid ${this.theme.colors()['primary']}`,
|
|
1299
|
+
outlineOffset: 2,
|
|
1300
|
+
},
|
|
1301
|
+
},
|
|
1302
|
+
'& [aria-current]': {
|
|
1303
|
+
...this.theme.color(options.currentColor),
|
|
1304
|
+
},
|
|
1305
|
+
'& symbol': { fontSize: '1.1em', ...this.theme.color(options.color) },
|
|
1306
|
+
...this.theme.gap(options.gap),
|
|
1307
|
+
});
|
|
1308
|
+
}, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
1309
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniBreadcrumbComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1310
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniBreadcrumbComponent, isStandalone: true, selector: "uni-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClicked: "itemClicked" }, providers: [{ provide: COMPONENT_NAME, useValue: 'breadcrumb' }], usesInheritance: true, ngImport: i0, template: `
|
|
1311
|
+
<nav [attr.aria-label]="ariaLabel()" [class]="className()">
|
|
1312
|
+
<ol>
|
|
1313
|
+
@for (item of items(); track item.label; let last = $last; let i = $index) {
|
|
1314
|
+
<li>
|
|
1315
|
+
@if (last) {
|
|
1316
|
+
<span aria-current="page">{{ item.label }}</span>
|
|
1317
|
+
} @else if (item.href) {
|
|
1318
|
+
<a [href]="item.href" (click)="itemClicked.emit(item)">{{ item.label }}</a>
|
|
1319
|
+
} @else {
|
|
1320
|
+
<button type="button" (click)="itemClicked.emit(item)">{{ item.label }}</button>
|
|
1321
|
+
}
|
|
1322
|
+
@if (!last) {
|
|
1323
|
+
<uni-symbol
|
|
1324
|
+
aria-hidden="true"
|
|
1325
|
+
[name]="componentOptions().separatorSymbol ?? 'chevron_right'"
|
|
1326
|
+
/>
|
|
1327
|
+
}
|
|
1328
|
+
</li>
|
|
1329
|
+
}
|
|
1330
|
+
</ol>
|
|
1331
|
+
</nav>
|
|
1332
|
+
`, isInline: true, dependencies: [{ kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1333
|
+
}
|
|
1334
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniBreadcrumbComponent, decorators: [{
|
|
1335
|
+
type: Component,
|
|
1336
|
+
args: [{
|
|
1337
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1338
|
+
selector: 'uni-breadcrumb',
|
|
1339
|
+
imports: [UniSymbolComponent],
|
|
1340
|
+
providers: [{ provide: COMPONENT_NAME, useValue: 'breadcrumb' }],
|
|
1341
|
+
template: `
|
|
1342
|
+
<nav [attr.aria-label]="ariaLabel()" [class]="className()">
|
|
1343
|
+
<ol>
|
|
1344
|
+
@for (item of items(); track item.label; let last = $last; let i = $index) {
|
|
1345
|
+
<li>
|
|
1346
|
+
@if (last) {
|
|
1347
|
+
<span aria-current="page">{{ item.label }}</span>
|
|
1348
|
+
} @else if (item.href) {
|
|
1349
|
+
<a [href]="item.href" (click)="itemClicked.emit(item)">{{ item.label }}</a>
|
|
1350
|
+
} @else {
|
|
1351
|
+
<button type="button" (click)="itemClicked.emit(item)">{{ item.label }}</button>
|
|
1352
|
+
}
|
|
1353
|
+
@if (!last) {
|
|
1354
|
+
<uni-symbol
|
|
1355
|
+
aria-hidden="true"
|
|
1356
|
+
[name]="componentOptions().separatorSymbol ?? 'chevron_right'"
|
|
1357
|
+
/>
|
|
1358
|
+
}
|
|
1359
|
+
</li>
|
|
1360
|
+
}
|
|
1361
|
+
</ol>
|
|
1362
|
+
</nav>
|
|
1363
|
+
`,
|
|
1364
|
+
}]
|
|
1365
|
+
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] } });
|
|
1366
|
+
|
|
1001
1367
|
class UniIconComponent {
|
|
1002
1368
|
themeService = inject(ThemeService);
|
|
1003
1369
|
color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
|
|
1004
1370
|
name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
1005
|
-
|
|
1371
|
+
/** Resolved from the theme's icon primitives; unknown names render nothing. */
|
|
1372
|
+
path = computed(() => {
|
|
1373
|
+
const icon = this.themeService.theme().icons[this.name()];
|
|
1374
|
+
return icon ? `url("${icon}")` : 'none';
|
|
1375
|
+
}, ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
|
|
1006
1376
|
className = computed(() => css([{ ...this.themeService.color(this.color()) }]), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
1007
1377
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1008
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniIconComponent, isStandalone: true, selector: "uni-icon
|
|
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 });
|
|
1009
1379
|
}
|
|
1010
1380
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniIconComponent, decorators: [{
|
|
1011
1381
|
type: Component,
|
|
1012
|
-
args: [{ selector: 'uni-icon
|
|
1382
|
+
args: [{ selector: 'uni-icon', imports: [], template: '', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1013
1383
|
'aria-hidden': 'true',
|
|
1014
1384
|
'[class]': 'className()',
|
|
1385
|
+
'[style.mask-image]': 'path()',
|
|
1015
1386
|
'[style.-webkit-mask-image]': 'path()',
|
|
1016
|
-
}, styles: [":host{display:block;height:100%;width:100%;background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}\n"] }]
|
|
1387
|
+
}, 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"] }]
|
|
1017
1388
|
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }] } });
|
|
1018
1389
|
|
|
1390
|
+
/**
|
|
1391
|
+
* The base layout primitive, applied as an attribute to any element so
|
|
1392
|
+
* semantics stay yours: `<main box-layout [grow]="1" padding="md">`.
|
|
1393
|
+
* Exception: other components' host elements (`<uni-card box-layout>` would
|
|
1394
|
+
* put two components on one element) — wrap those in a `<div box-layout>`.
|
|
1395
|
+
*
|
|
1396
|
+
* Sizing convention (height/width/min/max/inset): a **number is px and needs
|
|
1397
|
+
* a binding** — `[height]="420"`; a **plain attribute is a CSS length
|
|
1398
|
+
* string** — `height="420px"`. Spacing/radius/color inputs take theme tokens.
|
|
1399
|
+
*/
|
|
1019
1400
|
class UniBoxComponent {
|
|
1020
1401
|
theme = inject(ThemeService);
|
|
1021
1402
|
color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
|
|
@@ -1046,9 +1427,11 @@ class UniBoxComponent {
|
|
|
1046
1427
|
display = input(...(ngDevMode ? [undefined, { debugName: "display" }] : /* istanbul ignore next */ []));
|
|
1047
1428
|
position = input(...(ngDevMode ? [undefined, { debugName: "position" }] : /* istanbul ignore next */ []));
|
|
1048
1429
|
inset = input(...(ngDevMode ? [undefined, { debugName: "inset" }] : /* istanbul ignore next */ []));
|
|
1430
|
+
/** Number = px via binding (`[height]="420"`); string = CSS length (`height="420px"`). */
|
|
1049
1431
|
height = input(...(ngDevMode ? [undefined, { debugName: "height" }] : /* istanbul ignore next */ []));
|
|
1050
1432
|
minHeight = input(...(ngDevMode ? [undefined, { debugName: "minHeight" }] : /* istanbul ignore next */ []));
|
|
1051
1433
|
maxHeight = input(...(ngDevMode ? [undefined, { debugName: "maxHeight" }] : /* istanbul ignore next */ []));
|
|
1434
|
+
/** Number = px via binding (`[width]="420"`); string = CSS length (`width="50%"`). */
|
|
1052
1435
|
width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
|
|
1053
1436
|
minWidth = input(...(ngDevMode ? [undefined, { debugName: "minWidth" }] : /* istanbul ignore next */ []));
|
|
1054
1437
|
maxWidth = input(...(ngDevMode ? [undefined, { debugName: "maxWidth" }] : /* istanbul ignore next */ []));
|
|
@@ -1144,12 +1527,12 @@ class UniBoxComponent {
|
|
|
1144
1527
|
]);
|
|
1145
1528
|
}, ...(ngDevMode ? [{ debugName: "boxClassName" }] : /* istanbul ignore next */ []));
|
|
1146
1529
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1147
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniBoxComponent, isStandalone: true, selector: "
|
|
1530
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniBoxComponent, isStandalone: true, selector: "[uni-box-layout], [box-layout]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, borderRadiusLeft: { classPropertyName: "borderRadiusLeft", publicName: "borderRadiusLeft", isSignal: true, isRequired: false, transformFunction: null }, borderRadiusRight: { classPropertyName: "borderRadiusRight", publicName: "borderRadiusRight", isSignal: true, isRequired: false, transformFunction: null }, borderRadiusTop: { classPropertyName: "borderRadiusTop", publicName: "borderRadiusTop", isSignal: true, isRequired: false, transformFunction: null }, borderRadiusBottom: { classPropertyName: "borderRadiusBottom", publicName: "borderRadiusBottom", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, paddingHorizontal: { classPropertyName: "paddingHorizontal", publicName: "paddingHorizontal", isSignal: true, isRequired: false, transformFunction: null }, paddingVertical: { classPropertyName: "paddingVertical", publicName: "paddingVertical", isSignal: true, isRequired: false, transformFunction: null }, paddingLeft: { classPropertyName: "paddingLeft", publicName: "paddingLeft", isSignal: true, isRequired: false, transformFunction: null }, paddingRight: { classPropertyName: "paddingRight", publicName: "paddingRight", isSignal: true, isRequired: false, transformFunction: null }, paddingTop: { classPropertyName: "paddingTop", publicName: "paddingTop", isSignal: true, isRequired: false, transformFunction: null }, paddingBottom: { classPropertyName: "paddingBottom", publicName: "paddingBottom", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, borderTop: { classPropertyName: "borderTop", publicName: "borderTop", isSignal: true, isRequired: false, transformFunction: null }, borderBottom: { classPropertyName: "borderBottom", publicName: "borderBottom", isSignal: true, isRequired: false, transformFunction: null }, borderLeft: { classPropertyName: "borderLeft", publicName: "borderLeft", isSignal: true, isRequired: false, transformFunction: null }, borderRight: { classPropertyName: "borderRight", publicName: "borderRight", isSignal: true, isRequired: false, transformFunction: null }, dashBorder: { classPropertyName: "dashBorder", publicName: "dashBorder", isSignal: true, isRequired: false, transformFunction: null }, alignSelf: { classPropertyName: "alignSelf", publicName: "alignSelf", isSignal: true, isRequired: false, transformFunction: null }, alignItems: { classPropertyName: "alignItems", publicName: "alignItems", isSignal: true, isRequired: false, transformFunction: null }, alignContent: { classPropertyName: "alignContent", publicName: "alignContent", isSignal: true, isRequired: false, transformFunction: null }, justifyContent: { classPropertyName: "justifyContent", publicName: "justifyContent", isSignal: true, isRequired: false, transformFunction: null }, grow: { classPropertyName: "grow", publicName: "grow", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, ignoreDir: { classPropertyName: "ignoreDir", publicName: "ignoreDir", isSignal: true, isRequired: false, transformFunction: null }, gridArea: { classPropertyName: "gridArea", publicName: "gridArea", isSignal: true, isRequired: false, transformFunction: null }, gridColumn: { classPropertyName: "gridColumn", publicName: "gridColumn", isSignal: true, isRequired: false, transformFunction: null }, gridRow: { classPropertyName: "gridRow", publicName: "gridRow", isSignal: true, isRequired: false, transformFunction: null }, overflow: { classPropertyName: "overflow", publicName: "overflow", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: true, isRequired: false, transformFunction: null }, flexDirection: { classPropertyName: "flexDirection", publicName: "flexDirection", isSignal: true, isRequired: false, transformFunction: null }, textAlign: { classPropertyName: "textAlign", publicName: "textAlign", isSignal: true, isRequired: false, transformFunction: null }, wrapItems: { classPropertyName: "wrapItems", publicName: "wrapItems", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "boxClassName()" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1148
1531
|
}
|
|
1149
1532
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniBoxComponent, decorators: [{
|
|
1150
1533
|
type: Component,
|
|
1151
1534
|
args: [{
|
|
1152
|
-
selector: '
|
|
1535
|
+
selector: '[uni-box-layout], [box-layout]',
|
|
1153
1536
|
imports: [],
|
|
1154
1537
|
template: `<ng-content></ng-content>`,
|
|
1155
1538
|
host: { '[class]': 'boxClassName()' },
|
|
@@ -1165,13 +1548,13 @@ class UniCenterComponent extends UniBoxComponent {
|
|
|
1165
1548
|
super();
|
|
1166
1549
|
}
|
|
1167
1550
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1168
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniCenterComponent, isStandalone: true, selector: "
|
|
1551
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniCenterComponent, isStandalone: true, selector: "[uni-center-layout], [center-layout]", inputs: { display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, justifyContent: { classPropertyName: "justifyContent", publicName: "justifyContent", isSignal: true, isRequired: false, transformFunction: null }, alignItems: { classPropertyName: "alignItems", publicName: "alignItems", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1169
1552
|
}
|
|
1170
1553
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCenterComponent, decorators: [{
|
|
1171
1554
|
type: Component,
|
|
1172
1555
|
args: [{
|
|
1173
1556
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1174
|
-
selector: '
|
|
1557
|
+
selector: '[uni-center-layout], [center-layout]',
|
|
1175
1558
|
imports: [],
|
|
1176
1559
|
template: `<ng-content></ng-content>`,
|
|
1177
1560
|
}]
|
|
@@ -1181,12 +1564,12 @@ class UniGridAreaComponent {
|
|
|
1181
1564
|
area = input.required(...(ngDevMode ? [{ debugName: "area" }] : /* istanbul ignore next */ []));
|
|
1182
1565
|
className = computed(() => css({ gridArea: this.area() }), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
1183
1566
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniGridAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1184
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniGridAreaComponent, isStandalone: true, selector: "
|
|
1567
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniGridAreaComponent, isStandalone: true, selector: "[uni-grid-area-layout], [grid-area-layout]", inputs: { area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "className()" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1185
1568
|
}
|
|
1186
1569
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniGridAreaComponent, decorators: [{
|
|
1187
1570
|
type: Component,
|
|
1188
1571
|
args: [{
|
|
1189
|
-
selector: '
|
|
1572
|
+
selector: '[uni-grid-area-layout], [grid-area-layout]',
|
|
1190
1573
|
imports: [],
|
|
1191
1574
|
template: `<ng-content></ng-content>`,
|
|
1192
1575
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
@@ -1219,12 +1602,12 @@ class UniGridComponent extends UniBoxComponent {
|
|
|
1219
1602
|
},
|
|
1220
1603
|
]), ...(ngDevMode ? [{ debugName: "gridClassName" }] : /* istanbul ignore next */ []));
|
|
1221
1604
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniGridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1222
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniGridComponent, isStandalone: true, selector: "
|
|
1605
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniGridComponent, isStandalone: true, selector: "[uni-grid-layout], [grid-layout]", inputs: { display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, templateAreas: { classPropertyName: "templateAreas", publicName: "templateAreas", isSignal: true, isRequired: false, transformFunction: null }, templateColumns: { classPropertyName: "templateColumns", publicName: "templateColumns", isSignal: true, isRequired: false, transformFunction: null }, templateRows: { classPropertyName: "templateRows", publicName: "templateRows", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, outlineColor: { classPropertyName: "outlineColor", publicName: "outlineColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "gridClassName()" } }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1223
1606
|
}
|
|
1224
1607
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniGridComponent, decorators: [{
|
|
1225
1608
|
type: Component,
|
|
1226
1609
|
args: [{
|
|
1227
|
-
selector: '
|
|
1610
|
+
selector: '[uni-grid-layout], [grid-layout]',
|
|
1228
1611
|
imports: [],
|
|
1229
1612
|
template: `<ng-content></ng-content>`,
|
|
1230
1613
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
@@ -1235,18 +1618,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
1235
1618
|
class UniRowComponent extends UniBoxComponent {
|
|
1236
1619
|
display = input('flex', ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
|
|
1237
1620
|
flexDirection = input('row', ...(ngDevMode ? [{ debugName: "flexDirection" }] : /* istanbul ignore next */ []));
|
|
1621
|
+
/**
|
|
1622
|
+
* Defaults to `fit-content` (guards content collapse). Set `[minWidth]="0"`
|
|
1623
|
+
* when the row must shrink inside a constrained flex parent (scroll or
|
|
1624
|
+
* text truncation containment).
|
|
1625
|
+
*/
|
|
1238
1626
|
minWidth = input('fit-content', ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
|
|
1239
1627
|
constructor() {
|
|
1240
1628
|
super();
|
|
1241
1629
|
}
|
|
1242
1630
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1243
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniRowComponent, isStandalone: true, selector: "
|
|
1631
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniRowComponent, isStandalone: true, selector: "[uni-row-layout], [row-layout]", inputs: { display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, flexDirection: { classPropertyName: "flexDirection", publicName: "flexDirection", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1244
1632
|
}
|
|
1245
1633
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniRowComponent, decorators: [{
|
|
1246
1634
|
type: Component,
|
|
1247
1635
|
args: [{
|
|
1248
1636
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1249
|
-
selector: '
|
|
1637
|
+
selector: '[uni-row-layout], [row-layout]',
|
|
1250
1638
|
template: `<ng-content></ng-content>`,
|
|
1251
1639
|
}]
|
|
1252
1640
|
}], ctorParameters: () => [], propDecorators: { display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], flexDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexDirection", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }] } });
|
|
@@ -1254,18 +1642,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
1254
1642
|
class UniStackComponent extends UniBoxComponent {
|
|
1255
1643
|
display = input('flex', ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
|
|
1256
1644
|
flexDirection = input('column', ...(ngDevMode ? [{ debugName: "flexDirection" }] : /* istanbul ignore next */ []));
|
|
1645
|
+
/**
|
|
1646
|
+
* Defaults to `fit-content` (guards content collapse). Set `[minHeight]="0"`
|
|
1647
|
+
* when the stack must shrink inside a constrained flex parent (scroll
|
|
1648
|
+
* containment).
|
|
1649
|
+
*/
|
|
1257
1650
|
minHeight = input('fit-content', ...(ngDevMode ? [{ debugName: "minHeight" }] : /* istanbul ignore next */ []));
|
|
1258
1651
|
constructor() {
|
|
1259
1652
|
super();
|
|
1260
1653
|
}
|
|
1261
1654
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1262
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniStackComponent, isStandalone: true, selector: "
|
|
1655
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniStackComponent, isStandalone: true, selector: "[uni-stack-layout], [stack-layout]", inputs: { display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, flexDirection: { classPropertyName: "flexDirection", publicName: "flexDirection", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1263
1656
|
}
|
|
1264
1657
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniStackComponent, decorators: [{
|
|
1265
1658
|
type: Component,
|
|
1266
1659
|
args: [{
|
|
1267
1660
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1268
|
-
selector: '
|
|
1661
|
+
selector: '[uni-stack-layout], [stack-layout]',
|
|
1269
1662
|
template: `<ng-content></ng-content>`,
|
|
1270
1663
|
}]
|
|
1271
1664
|
}], ctorParameters: () => [], propDecorators: { display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], flexDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexDirection", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }] } });
|
|
@@ -1277,55 +1670,18 @@ class UniWrapComponent extends UniBoxComponent {
|
|
|
1277
1670
|
super();
|
|
1278
1671
|
}
|
|
1279
1672
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniWrapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1280
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniWrapComponent, isStandalone: true, selector: "
|
|
1673
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniWrapComponent, isStandalone: true, selector: "[uni-wrap-layout], [wrap-layout]", inputs: { display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, wrapItems: { classPropertyName: "wrapItems", publicName: "wrapItems", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1281
1674
|
}
|
|
1282
1675
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniWrapComponent, decorators: [{
|
|
1283
1676
|
type: Component,
|
|
1284
1677
|
args: [{
|
|
1285
1678
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1286
|
-
selector: '
|
|
1679
|
+
selector: '[uni-wrap-layout], [wrap-layout]',
|
|
1287
1680
|
imports: [],
|
|
1288
1681
|
template: `<ng-content></ng-content>`,
|
|
1289
1682
|
}]
|
|
1290
1683
|
}], ctorParameters: () => [], propDecorators: { display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], wrapItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapItems", required: false }] }] } });
|
|
1291
1684
|
|
|
1292
|
-
class UniSymbolComponent extends BaseComponent {
|
|
1293
|
-
name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
1294
|
-
fill = input(...(ngDevMode ? [undefined, { debugName: "fill" }] : /* istanbul ignore next */ []));
|
|
1295
|
-
weight = input(...(ngDevMode ? [undefined, { debugName: "weight" }] : /* istanbul ignore next */ []));
|
|
1296
|
-
grade = input(...(ngDevMode ? [undefined, { debugName: "grade" }] : /* istanbul ignore next */ []));
|
|
1297
|
-
opticalSize = input(...(ngDevMode ? [undefined, { debugName: "opticalSize" }] : /* istanbul ignore next */ []));
|
|
1298
|
-
className = computed(() => {
|
|
1299
|
-
const settings = `'FILL' ${this.fill() || this.componentOptions().fill || 0}, ` +
|
|
1300
|
-
`'wght' ${this.weight() || this.componentOptions().weight || 400}, ` +
|
|
1301
|
-
`'GRAD' ${this.grade() || this.componentOptions().grade || 0}, ` +
|
|
1302
|
-
`'opsz' ${this.opticalSize() || this.componentOptions().opticalSize || 24}`;
|
|
1303
|
-
return ('material-symbols-rounded ' +
|
|
1304
|
-
css({
|
|
1305
|
-
fontVariationSettings: settings,
|
|
1306
|
-
fontSize: `${this.opticalSize() || this.componentOptions().opticalSize || 24}px`,
|
|
1307
|
-
}));
|
|
1308
|
-
}, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
1309
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSymbolComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1310
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniSymbolComponent, isStandalone: true, selector: "uni-symbol, Symbol", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, grade: { classPropertyName: "grade", publicName: "grade", isSignal: true, isRequired: false, transformFunction: null }, opticalSize: { classPropertyName: "opticalSize", publicName: "opticalSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'symbol' }], usesInheritance: true, ngImport: i0, template: `{{ name() }}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1311
|
-
}
|
|
1312
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSymbolComponent, decorators: [{
|
|
1313
|
-
type: Component,
|
|
1314
|
-
args: [{
|
|
1315
|
-
selector: 'uni-symbol, Symbol',
|
|
1316
|
-
imports: [],
|
|
1317
|
-
template: `{{ name() }}`,
|
|
1318
|
-
providers: [{ provide: COMPONENT_NAME, useValue: 'symbol' }],
|
|
1319
|
-
// Icons are decorative: hide the ligature text (e.g. "chevron_left") from
|
|
1320
|
-
// screen readers. Meaningful icons get their name from the parent control.
|
|
1321
|
-
host: {
|
|
1322
|
-
'[class]': 'className()',
|
|
1323
|
-
'aria-hidden': 'true',
|
|
1324
|
-
},
|
|
1325
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1326
|
-
}]
|
|
1327
|
-
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }], grade: [{ type: i0.Input, args: [{ isSignal: true, alias: "grade", required: false }] }], opticalSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "opticalSize", required: false }] }] } });
|
|
1328
|
-
|
|
1329
1685
|
// https://css-tricks.com/how-to-recreate-the-ripple-effect-of-material-design-buttons/
|
|
1330
1686
|
class RippleDirective {
|
|
1331
1687
|
renderer = inject(Renderer2);
|
|
@@ -1401,6 +1757,11 @@ class UniButtonComponent extends BaseComponent {
|
|
|
1401
1757
|
paddingBottom: '6%',
|
|
1402
1758
|
});
|
|
1403
1759
|
className = computed(() => css([
|
|
1760
|
+
// Token-driven radius + typeface from component options. Applied before
|
|
1761
|
+
// `style()` so theme `sizes`/`fixed` (per-size fontSize, or hand-set
|
|
1762
|
+
// radii/families in older themes) keep winning.
|
|
1763
|
+
this.theme.radius(this.componentOptions().borderRadius),
|
|
1764
|
+
{ ...this.theme.typeface(this.componentOptions().typeface) },
|
|
1404
1765
|
this.style() && {
|
|
1405
1766
|
...this.style(), // TODO: Set priority on theme-defined styles
|
|
1406
1767
|
},
|
|
@@ -1464,31 +1825,31 @@ class UniButtonComponent extends BaseComponent {
|
|
|
1464
1825
|
return (Number.isNaN(fontSize) ? 16 : fontSize) + 4;
|
|
1465
1826
|
}, ...(ngDevMode ? [{ debugName: "symbolSize" }] : /* istanbul ignore next */ []));
|
|
1466
1827
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1467
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniButtonComponent, isStandalone: true, selector: "button[uni-text-button],
|
|
1468
|
-
<
|
|
1828
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniButtonComponent, isStandalone: true, selector: "button[uni-text-button], button[text-button]", inputs: { disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, symbolLeft: { classPropertyName: "symbolLeft", publicName: "symbolLeft", isSignal: true, isRequired: false, transformFunction: null }, symbolRight: { classPropertyName: "symbolRight", publicName: "symbolRight", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.disabled": "disable() || loading() || null", "attr.aria-busy": "loading() ? 'true' : null", "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'button' }], usesInheritance: true, hostDirectives: [{ directive: RippleDirective }], ngImport: i0, template: `@if (loading()) {
|
|
1829
|
+
<div box-layout [class]="spinnerBox"><uni-icon name="spinner" /></div>
|
|
1469
1830
|
}
|
|
1470
1831
|
@if (symbolLeft()) {
|
|
1471
|
-
<
|
|
1832
|
+
<uni-symbol [name]="symbolLeft()!" class="symbolLeft" />
|
|
1472
1833
|
}
|
|
1473
1834
|
<span><ng-content></ng-content></span>
|
|
1474
1835
|
@if (symbolRight()) {
|
|
1475
|
-
<
|
|
1836
|
+
<uni-symbol [name]="symbolRight()!" class="symbolRight" />
|
|
1476
1837
|
} `, isInline: true, dependencies: [{ kind: "component", type: // Keep this import
|
|
1477
|
-
UniIconComponent, selector: "uni-icon
|
|
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 });
|
|
1478
1839
|
}
|
|
1479
1840
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniButtonComponent, decorators: [{
|
|
1480
1841
|
type: Component,
|
|
1481
1842
|
args: [{
|
|
1482
|
-
selector: 'button[uni-text-button],
|
|
1843
|
+
selector: 'button[uni-text-button], button[text-button]',
|
|
1483
1844
|
template: `@if (loading()) {
|
|
1484
|
-
<
|
|
1845
|
+
<div box-layout [class]="spinnerBox"><uni-icon name="spinner" /></div>
|
|
1485
1846
|
}
|
|
1486
1847
|
@if (symbolLeft()) {
|
|
1487
|
-
<
|
|
1848
|
+
<uni-symbol [name]="symbolLeft()!" class="symbolLeft" />
|
|
1488
1849
|
}
|
|
1489
1850
|
<span><ng-content></ng-content></span>
|
|
1490
1851
|
@if (symbolRight()) {
|
|
1491
|
-
<
|
|
1852
|
+
<uni-symbol [name]="symbolRight()!" class="symbolRight" />
|
|
1492
1853
|
} `,
|
|
1493
1854
|
providers: [{ provide: COMPONENT_NAME, useValue: 'button' }],
|
|
1494
1855
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
@@ -1538,12 +1899,12 @@ class UniButtonGroupComponent {
|
|
|
1538
1899
|
});
|
|
1539
1900
|
}, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
1540
1901
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1541
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: UniButtonGroupComponent, isStandalone: true, selector: "uni-button-group
|
|
1902
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: UniButtonGroupComponent, isStandalone: true, selector: "uni-button-group", host: { properties: { "class": "className()" } }, ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1542
1903
|
}
|
|
1543
1904
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniButtonGroupComponent, decorators: [{
|
|
1544
1905
|
type: Component,
|
|
1545
1906
|
args: [{
|
|
1546
|
-
selector: 'uni-button-group
|
|
1907
|
+
selector: 'uni-button-group',
|
|
1547
1908
|
imports: [],
|
|
1548
1909
|
template: ` <ng-content></ng-content>`,
|
|
1549
1910
|
host: { '[class]': 'className()' },
|
|
@@ -1559,26 +1920,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
1559
1920
|
|
|
1560
1921
|
class UniCardContentComponent extends BaseComponent {
|
|
1561
1922
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCardContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1562
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: UniCardContentComponent, isStandalone: true, selector: "uni-card-content
|
|
1923
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: UniCardContentComponent, isStandalone: true, selector: "uni-card-content", providers: [{ provide: COMPONENT_NAME, useValue: 'cardContent' }], usesInheritance: true, ngImport: i0, template: "<div [style]=\"style()\">\n <ng-content></ng-content>\n</div>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1563
1924
|
}
|
|
1564
1925
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCardContentComponent, decorators: [{
|
|
1565
1926
|
type: Component,
|
|
1566
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-card-content
|
|
1927
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-card-content', imports: [], providers: [{ provide: COMPONENT_NAME, useValue: 'cardContent' }], template: "<div [style]=\"style()\">\n <ng-content></ng-content>\n</div>\n" }]
|
|
1567
1928
|
}] });
|
|
1568
1929
|
|
|
1930
|
+
/**
|
|
1931
|
+
* Typeface defaults by host element, so semantic HTML and the type scale
|
|
1932
|
+
* reinforce each other: `<h1 uni-text>` is already headline-large.
|
|
1933
|
+
*/
|
|
1934
|
+
const TagTypefaces = {
|
|
1935
|
+
h1: 'headline-large',
|
|
1936
|
+
h2: 'headline-medium',
|
|
1937
|
+
h3: 'headline-small',
|
|
1938
|
+
h4: 'title-large',
|
|
1939
|
+
h5: 'title-medium',
|
|
1940
|
+
h6: 'title-small',
|
|
1941
|
+
p: 'body-1-long',
|
|
1942
|
+
small: 'caption',
|
|
1943
|
+
figcaption: 'caption',
|
|
1944
|
+
blockquote: 'quote',
|
|
1945
|
+
label: 'label',
|
|
1946
|
+
};
|
|
1947
|
+
/**
|
|
1948
|
+
* The typography primitive, applied as an attribute to any element so
|
|
1949
|
+
* semantics stay yours. The attribute value is the typeface:
|
|
1950
|
+
* `<h1 uni-text="display-small">`, `<span uni-text="caption">`, dynamic via
|
|
1951
|
+
* `[uni-text]="role()"`. With no value, the typeface is inferred from the
|
|
1952
|
+
* host element (h1 → headline-large, p → body-1-long, …), falling back to
|
|
1953
|
+
* `title-small`; the `typeface` input remains as an explicit override.
|
|
1954
|
+
*/
|
|
1569
1955
|
class UniTextComponent {
|
|
1570
1956
|
theme = inject(ThemeService);
|
|
1571
|
-
|
|
1957
|
+
tag = inject(ElementRef).nativeElement.tagName.toLowerCase();
|
|
1958
|
+
/** Typeface via the selector attribute: `uni-text="headline-large"`. */
|
|
1959
|
+
uniText = input('', { ...(ngDevMode ? { debugName: "uniText" } : /* istanbul ignore next */ {}), alias: 'uni-text' });
|
|
1960
|
+
/** Explicit typeface; the attribute value wins when both are set. */
|
|
1961
|
+
typeface = input(undefined, ...(ngDevMode ? [{ debugName: "typeface" }] : /* istanbul ignore next */ []));
|
|
1572
1962
|
color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
|
|
1573
1963
|
display = input(...(ngDevMode ? [undefined, { debugName: "display" }] : /* istanbul ignore next */ []));
|
|
1574
1964
|
align = input(...(ngDevMode ? [undefined, { debugName: "align" }] : /* istanbul ignore next */ []));
|
|
1575
1965
|
nowrap = input(...(ngDevMode ? [undefined, { debugName: "nowrap" }] : /* istanbul ignore next */ []));
|
|
1576
1966
|
maxWidth = input(...(ngDevMode ? [undefined, { debugName: "maxWidth" }] : /* istanbul ignore next */ []));
|
|
1577
1967
|
ellipsis = input(false, ...(ngDevMode ? [{ debugName: "ellipsis" }] : /* istanbul ignore next */ []));
|
|
1968
|
+
resolvedTypeface = computed(() => this.uniText() || this.typeface() || TagTypefaces[this.tag] || 'title-small', ...(ngDevMode ? [{ debugName: "resolvedTypeface" }] : /* istanbul ignore next */ []));
|
|
1578
1969
|
className = computed(() => {
|
|
1579
1970
|
return css([
|
|
1580
1971
|
{
|
|
1581
|
-
...this.theme.typeface(this.
|
|
1972
|
+
...this.theme.typeface(this.resolvedTypeface()),
|
|
1582
1973
|
...this.theme.color(this.color()),
|
|
1583
1974
|
display: this.display(),
|
|
1584
1975
|
},
|
|
@@ -1604,26 +1995,37 @@ class UniTextComponent {
|
|
|
1604
1995
|
]);
|
|
1605
1996
|
}, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
1606
1997
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1607
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniTextComponent, isStandalone: true, selector: "uni-text
|
|
1998
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniTextComponent, isStandalone: true, selector: "[uni-text]", inputs: { uniText: { classPropertyName: "uniText", publicName: "uni-text", isSignal: true, isRequired: false, transformFunction: null }, typeface: { classPropertyName: "typeface", publicName: "typeface", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, nowrap: { classPropertyName: "nowrap", publicName: "nowrap", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1608
1999
|
}
|
|
1609
2000
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTextComponent, decorators: [{
|
|
1610
2001
|
type: Component,
|
|
1611
2002
|
args: [{
|
|
1612
|
-
selector: 'uni-text
|
|
2003
|
+
selector: '[uni-text]',
|
|
1613
2004
|
imports: [],
|
|
1614
2005
|
template: '<ng-content></ng-content>',
|
|
1615
2006
|
host: { '[class]': 'className()' },
|
|
1616
2007
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1617
2008
|
}]
|
|
1618
|
-
}], propDecorators: { typeface: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeface", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], nowrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "nowrap", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], ellipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "ellipsis", required: false }] }] } });
|
|
2009
|
+
}], propDecorators: { uniText: [{ type: i0.Input, args: [{ isSignal: true, alias: "uni-text", required: false }] }], typeface: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeface", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], nowrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "nowrap", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], ellipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "ellipsis", required: false }] }] } });
|
|
1619
2010
|
|
|
1620
2011
|
class UniCardComponent extends BaseComponent {
|
|
2012
|
+
/**
|
|
2013
|
+
* Token-resolved frame (variant-named border primitive, radii, elevation)
|
|
2014
|
+
* under the merged theme style, so hand-authored fixed/variant styles from
|
|
2015
|
+
* older themes keep winning.
|
|
2016
|
+
*/
|
|
2017
|
+
cardStyle = computed(() => ({
|
|
2018
|
+
...this.theme.border(this.componentOptions().border ?? this.variant()),
|
|
2019
|
+
...this.theme.radius(this.componentOptions().borderRadius),
|
|
2020
|
+
...this.theme.boxShadow(this.componentOptions().elevation),
|
|
2021
|
+
...this.style(),
|
|
2022
|
+
}), ...(ngDevMode ? [{ debugName: "cardStyle" }] : /* istanbul ignore next */ []));
|
|
1621
2023
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1622
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: UniCardComponent, isStandalone: true, selector: "uni-card
|
|
2024
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: UniCardComponent, isStandalone: true, selector: "uni-card", providers: [{ provide: COMPONENT_NAME, useValue: 'card' }], usesInheritance: true, ngImport: i0, template: "<div [style]=\"cardStyle()\">\n <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1623
2025
|
}
|
|
1624
2026
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCardComponent, decorators: [{
|
|
1625
2027
|
type: Component,
|
|
1626
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-card
|
|
2028
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-card', imports: [], providers: [{ provide: COMPONENT_NAME, useValue: 'card' }], template: "<div [style]=\"cardStyle()\">\n <ng-content></ng-content>\n</div>\n" }]
|
|
1627
2029
|
}] });
|
|
1628
2030
|
|
|
1629
2031
|
class UniCardHeaderComponent extends BaseComponent {
|
|
@@ -1644,11 +2046,11 @@ class UniCardHeaderComponent extends BaseComponent {
|
|
|
1644
2046
|
alignItems: 'center',
|
|
1645
2047
|
});
|
|
1646
2048
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1647
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniCardHeaderComponent, isStandalone: true, selector: "uni-card-header
|
|
2049
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniCardHeaderComponent, isStandalone: true, selector: "uni-card-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleTextRole: { classPropertyName: "titleTextRole", publicName: "titleTextRole", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: COMPONENT_NAME, useValue: 'cardHeader' }], usesInheritance: true, ngImport: i0, template: "<div [style]=\"style()\" [ngClass]=\"className\">\n <span uni-text [typeface]=\"titleTextRole()\">{{ title() }}</span>\n <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1648
2050
|
}
|
|
1649
2051
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCardHeaderComponent, decorators: [{
|
|
1650
2052
|
type: Component,
|
|
1651
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-card-header
|
|
2053
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-card-header', imports: [UniTextComponent, NgClass], providers: [{ provide: COMPONENT_NAME, useValue: 'cardHeader' }], template: "<div [style]=\"style()\" [ngClass]=\"className\">\n <span uni-text [typeface]=\"titleTextRole()\">{{ title() }}</span>\n <ng-content></ng-content>\n</div>\n" }]
|
|
1652
2054
|
}], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], titleTextRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleTextRole", required: false }] }] } });
|
|
1653
2055
|
|
|
1654
2056
|
class UniCheckboxComponent extends BaseComponent {
|
|
@@ -1703,16 +2105,17 @@ class UniCheckboxComponent extends BaseComponent {
|
|
|
1703
2105
|
display: 'block',
|
|
1704
2106
|
},
|
|
1705
2107
|
'& .checkbox svg .checkbox-box': {
|
|
1706
|
-
fill: '
|
|
2108
|
+
fill: this.getThemeColor(this.componentOptions().boxColor ?? 'surface'),
|
|
1707
2109
|
stroke: this.getThemeColor(this.variant()),
|
|
1708
2110
|
strokeWidth: 2,
|
|
1709
2111
|
rx: this.componentOptions().borderRadius || 2,
|
|
1710
2112
|
ry: this.componentOptions().borderRadius || 2,
|
|
1711
2113
|
transition: 'all 0.2s ease',
|
|
1712
2114
|
},
|
|
2115
|
+
// Check/dash draw on the variant-filled box, so they wear its on-color.
|
|
1713
2116
|
'& .checkbox svg .checkbox-check': {
|
|
1714
2117
|
fill: 'none',
|
|
1715
|
-
stroke:
|
|
2118
|
+
stroke: this.getOnColor(this.variant()),
|
|
1716
2119
|
strokeWidth: 2,
|
|
1717
2120
|
strokeLinecap: 'round',
|
|
1718
2121
|
strokeLinejoin: 'round',
|
|
@@ -1721,7 +2124,7 @@ class UniCheckboxComponent extends BaseComponent {
|
|
|
1721
2124
|
transition: 'all 0.5s ease',
|
|
1722
2125
|
},
|
|
1723
2126
|
'& .checkbox svg .checkbox-dash': {
|
|
1724
|
-
stroke:
|
|
2127
|
+
stroke: this.getOnColor(this.variant()),
|
|
1725
2128
|
strokeWidth: 2,
|
|
1726
2129
|
strokeLinecap: 'round',
|
|
1727
2130
|
opacity: 0,
|
|
@@ -1771,12 +2174,17 @@ class UniCheckboxComponent extends BaseComponent {
|
|
|
1771
2174
|
const colors = this.theme.colors();
|
|
1772
2175
|
return colors[token] ? colors[token] : colors['primary'];
|
|
1773
2176
|
}
|
|
2177
|
+
/** The content color paired with a variant fill (on-primary, on-warn, …). */
|
|
2178
|
+
getOnColor(variant) {
|
|
2179
|
+
const colors = this.theme.colors();
|
|
2180
|
+
return colors[`on-${variant}`] ?? colors['on-primary'];
|
|
2181
|
+
}
|
|
1774
2182
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1775
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniCheckboxComponent, isStandalone: true, selector: "uni-checkbox
|
|
2183
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniCheckboxComponent, isStandalone: true, selector: "uni-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange", indeterminate: "indeterminateChange" }, providers: [{ provide: COMPONENT_NAME, useValue: 'checkbox' }], usesInheritance: true, ngImport: i0, template: "<label [class]=\"checkboxLabel()\">\n <input\n type=\"checkbox\"\n [class]=\"checkboxInput()\"\n [checked]=\"checked()\"\n [indeterminate]=\"indeterminate()\"\n (change)=\"handleChange($event)\"\n [disabled]=\"disabled()\"\n [attr.aria-invalid]=\"showError() ? true : null\"\n [attr.aria-required]=\"required() ? true : null\"\n [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n />\n <div class=\"checkbox\">\n <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <rect class=\"checkbox-box\" x=\"1\" y=\"1\" width=\"18\" height=\"18\"></rect>\n <polyline class=\"checkbox-check\" points=\"4 11 8 15 16 6\"></polyline>\n <line class=\"checkbox-dash\" x1=\"5\" y1=\"10\" x2=\"15\" y2=\"10\"></line>\n </svg>\n </div>\n @if (label()) {\n <span uni-text=\"label\">{{ label() }}</span>\n }\n</label>\n", dependencies: [{ kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1776
2184
|
}
|
|
1777
2185
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCheckboxComponent, decorators: [{
|
|
1778
2186
|
type: Component,
|
|
1779
|
-
args: [{ selector: 'uni-checkbox
|
|
2187
|
+
args: [{ selector: 'uni-checkbox', imports: [UniTextComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'checkbox' }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [class]=\"checkboxLabel()\">\n <input\n type=\"checkbox\"\n [class]=\"checkboxInput()\"\n [checked]=\"checked()\"\n [indeterminate]=\"indeterminate()\"\n (change)=\"handleChange($event)\"\n [disabled]=\"disabled()\"\n [attr.aria-invalid]=\"showError() ? true : null\"\n [attr.aria-required]=\"required() ? true : null\"\n [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n />\n <div class=\"checkbox\">\n <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <rect class=\"checkbox-box\" x=\"1\" y=\"1\" width=\"18\" height=\"18\"></rect>\n <polyline class=\"checkbox-check\" points=\"4 11 8 15 16 6\"></polyline>\n <line class=\"checkbox-dash\" x1=\"5\" y1=\"10\" x2=\"15\" y2=\"10\"></line>\n </svg>\n </div>\n @if (label()) {\n <span uni-text=\"label\">{{ label() }}</span>\n }\n</label>\n" }]
|
|
1780
2188
|
}], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }] } });
|
|
1781
2189
|
|
|
1782
2190
|
class BodyRenderDirective {
|
|
@@ -1868,7 +2276,9 @@ class UniIconButtonComponent {
|
|
|
1868
2276
|
border: 0,
|
|
1869
2277
|
cursor: 'pointer',
|
|
1870
2278
|
transition: 'all 0.28s ease',
|
|
1871
|
-
|
|
2279
|
+
// Token-driven radius (`max` = circle) with the legacy 999 fallback
|
|
2280
|
+
// for hand-authored themes that predate iconButton options.
|
|
2281
|
+
...(this.theme.radius(this.config().options?.borderRadius) ?? { borderRadius: 999 }),
|
|
1872
2282
|
display: 'block',
|
|
1873
2283
|
'&:disabled': {
|
|
1874
2284
|
cursor: 'not-allowed !important',
|
|
@@ -1908,15 +2318,15 @@ class UniIconButtonComponent {
|
|
|
1908
2318
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1909
2319
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniIconButtonComponent, isStandalone: true, selector: "button[uni-icon-button], button[icon-button]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", 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 }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, opticalSize: { classPropertyName: "opticalSize", publicName: "opticalSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.disabled": "disable() || loading() || null", "attr.aria-busy": "loading() ? 'true' : null", "attr.aria-label": "ariaLabel() || null", "class": "className()" } }, hostDirectives: [{ directive: RippleDirective }], ngImport: i0, template: `
|
|
1910
2320
|
@if (loading()) {
|
|
1911
|
-
<
|
|
2321
|
+
<uni-icon name="spinner" />
|
|
1912
2322
|
} @else if (symbolName()) {
|
|
1913
|
-
<
|
|
2323
|
+
<uni-symbol [name]="symbolName()!" [opticalSize]="opticalSize()" />
|
|
1914
2324
|
} @else if (iconName()) {
|
|
1915
|
-
<
|
|
2325
|
+
<uni-icon [name]="iconName()!" />
|
|
1916
2326
|
}
|
|
1917
2327
|
<!-- Projected text is the button's accessible name (visually hidden) -->
|
|
1918
2328
|
<span [class]="srOnlyClass"><ng-content /></span>
|
|
1919
|
-
`, isInline: true, dependencies: [{ kind: "component", type: UniSymbolComponent, selector: "uni-symbol
|
|
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 });
|
|
1920
2330
|
}
|
|
1921
2331
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniIconButtonComponent, decorators: [{
|
|
1922
2332
|
type: Component,
|
|
@@ -1925,11 +2335,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
1925
2335
|
imports: [UniSymbolComponent, UniIconComponent],
|
|
1926
2336
|
template: `
|
|
1927
2337
|
@if (loading()) {
|
|
1928
|
-
<
|
|
2338
|
+
<uni-icon name="spinner" />
|
|
1929
2339
|
} @else if (symbolName()) {
|
|
1930
|
-
<
|
|
2340
|
+
<uni-symbol [name]="symbolName()!" [opticalSize]="opticalSize()" />
|
|
1931
2341
|
} @else if (iconName()) {
|
|
1932
|
-
<
|
|
2342
|
+
<uni-icon [name]="iconName()!" />
|
|
1933
2343
|
}
|
|
1934
2344
|
<!-- Projected text is the button's accessible name (visually hidden) -->
|
|
1935
2345
|
<span [class]="srOnlyClass"><ng-content /></span>
|
|
@@ -2021,7 +2431,7 @@ class UniDataSearchComponent extends BaseComponent {
|
|
|
2021
2431
|
this.searchValue.set('');
|
|
2022
2432
|
}
|
|
2023
2433
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDataSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2024
|
-
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: "
|
|
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 });
|
|
2025
2435
|
}
|
|
2026
2436
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDataSearchComponent, decorators: [{
|
|
2027
2437
|
type: Component,
|
|
@@ -2160,7 +2570,7 @@ class UniScrollAreaComponent {
|
|
|
2160
2570
|
});
|
|
2161
2571
|
}
|
|
2162
2572
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniScrollAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2163
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: UniScrollAreaComponent, isStandalone: true, selector: "
|
|
2573
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: UniScrollAreaComponent, isStandalone: true, selector: "[uni-scroll-area], [scroll-area]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, paddingHorizontal: { classPropertyName: "paddingHorizontal", publicName: "paddingHorizontal", isSignal: true, isRequired: false, transformFunction: null }, paddingVertical: { classPropertyName: "paddingVertical", publicName: "paddingVertical", isSignal: true, isRequired: false, transformFunction: null }, paddingLeft: { classPropertyName: "paddingLeft", publicName: "paddingLeft", isSignal: true, isRequired: false, transformFunction: null }, paddingRight: { classPropertyName: "paddingRight", publicName: "paddingRight", isSignal: true, isRequired: false, transformFunction: null }, paddingTop: { classPropertyName: "paddingTop", publicName: "paddingTop", isSignal: true, isRequired: false, transformFunction: null }, paddingBottom: { classPropertyName: "paddingBottom", publicName: "paddingBottom", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, autoHeightDisabled: { classPropertyName: "autoHeightDisabled", publicName: "autoHeightDisabled", isSignal: true, isRequired: false, transformFunction: null }, verticalScrollPadding: { classPropertyName: "verticalScrollPadding", publicName: "verticalScrollPadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scrollable: "scrollable" }, host: { properties: { "class": "className()" } }, viewQueries: [{ propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `<div #viewport [class]="viewportClassName()">
|
|
2164
2574
|
<div
|
|
2165
2575
|
#content
|
|
2166
2576
|
[class]="contentClassName()"
|
|
@@ -2173,7 +2583,7 @@ class UniScrollAreaComponent {
|
|
|
2173
2583
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniScrollAreaComponent, decorators: [{
|
|
2174
2584
|
type: Component,
|
|
2175
2585
|
args: [{
|
|
2176
|
-
selector: '
|
|
2586
|
+
selector: '[uni-scroll-area], [scroll-area]',
|
|
2177
2587
|
imports: [],
|
|
2178
2588
|
template: `<div #viewport [class]="viewportClassName()">
|
|
2179
2589
|
<div
|
|
@@ -2242,7 +2652,7 @@ class UniSortHeaderComponent {
|
|
|
2242
2652
|
});
|
|
2243
2653
|
}
|
|
2244
2654
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSortHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2245
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniSortHeaderComponent, isStandalone: true, selector: "uni-sort-header", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()" } }, ngImport: i0, template: "<button type=\"button\" [class]=\"buttonClass\" (click)=\"cycleSort()\">\n <ng-content></ng-content>\n <div class=\"sort-icon\" [class]=\"direction()\">\n <uni-symbol name=\"arrow_upward\" />\n </div>\n</button>\n", dependencies: [{ kind: "component", type: UniSymbolComponent, selector: "uni-symbol
|
|
2655
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniSortHeaderComponent, isStandalone: true, selector: "uni-sort-header", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()" } }, ngImport: i0, template: "<button type=\"button\" [class]=\"buttonClass\" (click)=\"cycleSort()\">\n <ng-content></ng-content>\n <div class=\"sort-icon\" [class]=\"direction()\">\n <uni-symbol name=\"arrow_upward\" />\n </div>\n</button>\n", dependencies: [{ kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2246
2656
|
}
|
|
2247
2657
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSortHeaderComponent, decorators: [{
|
|
2248
2658
|
type: Component,
|
|
@@ -2403,11 +2813,11 @@ class UniDataTableComponent extends BaseComponent {
|
|
|
2403
2813
|
return name ? this.theme.theme().borders[name] : undefined;
|
|
2404
2814
|
}
|
|
2405
2815
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2406
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDataTableComponent, isStandalone: true, selector: "uni-data-table
|
|
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 });
|
|
2407
2817
|
}
|
|
2408
2818
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDataTableComponent, decorators: [{
|
|
2409
2819
|
type: Component,
|
|
2410
|
-
args: [{ selector: 'uni-data-table
|
|
2820
|
+
args: [{ selector: 'uni-data-table', imports: [
|
|
2411
2821
|
NgTemplateOutlet,
|
|
2412
2822
|
UniBoxComponent,
|
|
2413
2823
|
UniScrollAreaComponent,
|
|
@@ -2415,7 +2825,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
2415
2825
|
UniSortHeaderComponent,
|
|
2416
2826
|
UniIconComponent,
|
|
2417
2827
|
UniCenterComponent,
|
|
2418
|
-
], providers: [{ provide: COMPONENT_NAME, useValue: 'dataTable' }], changeDetection: ChangeDetectionStrategy.OnPush, 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 <
|
|
2828
|
+
], providers: [{ provide: COMPONENT_NAME, useValue: 'dataTable' }], changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
|
|
2419
2829
|
}], propDecorators: { datasource: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasource", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], detailRowTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailRowTemplate", required: false }] }], useMultiSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "useMultiSelect", required: false }] }], useRowClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "useRowClick", required: false }] }], highlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlight", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], rowSelect: [{ type: i0.Output, args: ["rowSelect"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }] } });
|
|
2420
2830
|
|
|
2421
2831
|
/**
|
|
@@ -2522,7 +2932,7 @@ class UniDialogComponent extends BaseComponent {
|
|
|
2522
2932
|
this.show.set(false);
|
|
2523
2933
|
}
|
|
2524
2934
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2525
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDialogComponent, isStandalone: true, selector: "dialog[uni-dialog]
|
|
2935
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDialogComponent, isStandalone: true, selector: "dialog[uni-dialog]", inputs: { show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null }, defaultCloseButton: { classPropertyName: "defaultCloseButton", publicName: "defaultCloseButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { show: "showChange", showing: "showing" }, host: { listeners: { "click": "backdropClick($event)", "cancel": "escapeCancel($event)", "animationend": "closingAnimation($event)" }, properties: { "attr.aria-labelledby": "hasTitle() ? titleId : null", "attr.aria-label": "ariaLabel() ?? null", "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'dialog' }], usesInheritance: true, ngImport: i0, template: `
|
|
2526
2936
|
@if (defaultCloseButton()) {
|
|
2527
2937
|
<button
|
|
2528
2938
|
icon-button
|
|
@@ -2541,7 +2951,7 @@ class UniDialogComponent extends BaseComponent {
|
|
|
2541
2951
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDialogComponent, decorators: [{
|
|
2542
2952
|
type: Component,
|
|
2543
2953
|
args: [{
|
|
2544
|
-
selector: 'dialog[uni-dialog]
|
|
2954
|
+
selector: 'dialog[uni-dialog]',
|
|
2545
2955
|
imports: [UniIconButtonComponent, CommonModule],
|
|
2546
2956
|
template: `
|
|
2547
2957
|
@if (defaultCloseButton()) {
|
|
@@ -2589,11 +2999,11 @@ class UniDialogButtonsComponent {
|
|
|
2589
2999
|
this.dialog?.close();
|
|
2590
3000
|
}
|
|
2591
3001
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDialogButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2592
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniDialogButtonsComponent, isStandalone: true, selector: "uni-dialog-buttons,
|
|
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=\"md\"\n [padding]=\"padding()\"\n [paddingBottom]=\"paddingBottom()\"\n [justifyContent]=\"justifyContent()\"\n>\n <button\n text-button\n [variant]=\"confirmButtonVariant()\"\n (click)=\"confirmed.emit(); closeDialog()\"\n [disable]=\"disableConfirm()\"\n >\n {{ confirmButtonText() || 'Confirm' }}\n </button>\n <button text-button variant=\"warn\" (click)=\"closeDialog()\">\n {{ cancelButtonText() || 'Cancel' }}\n </button>\n</div>\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "[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 });
|
|
2593
3003
|
}
|
|
2594
3004
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDialogButtonsComponent, decorators: [{
|
|
2595
3005
|
type: Component,
|
|
2596
|
-
args: [{ selector: 'uni-dialog-buttons,
|
|
3006
|
+
args: [{ selector: '[uni-dialog-buttons], [dialog-buttons]', imports: [UniRowComponent, UniButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n row-layout\n gap=\"md\"\n [padding]=\"padding()\"\n [paddingBottom]=\"paddingBottom()\"\n [justifyContent]=\"justifyContent()\"\n>\n <button\n text-button\n [variant]=\"confirmButtonVariant()\"\n (click)=\"confirmed.emit(); closeDialog()\"\n [disable]=\"disableConfirm()\"\n >\n {{ confirmButtonText() || 'Confirm' }}\n </button>\n <button text-button variant=\"warn\" (click)=\"closeDialog()\">\n {{ cancelButtonText() || 'Cancel' }}\n </button>\n</div>\n" }]
|
|
2597
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"] }] } });
|
|
2598
3008
|
|
|
2599
3009
|
class UniDialogHeaderComponent extends BaseComponent {
|
|
@@ -2612,11 +3022,11 @@ class UniDialogHeaderComponent extends BaseComponent {
|
|
|
2612
3022
|
this.dialog?.close();
|
|
2613
3023
|
}
|
|
2614
3024
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2615
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: UniDialogHeaderComponent, isStandalone: true, selector: "
|
|
3025
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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=\"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", 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 });
|
|
2616
3026
|
}
|
|
2617
3027
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDialogHeaderComponent, decorators: [{
|
|
2618
3028
|
type: Component,
|
|
2619
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '
|
|
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" }]
|
|
2620
3030
|
}], ctorParameters: () => [] });
|
|
2621
3031
|
|
|
2622
3032
|
class UniDividerComponent {
|
|
@@ -2639,12 +3049,12 @@ class UniDividerComponent {
|
|
|
2639
3049
|
]);
|
|
2640
3050
|
}, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
2641
3051
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2642
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniDividerComponent, isStandalone: true, selector: "uni-divider
|
|
3052
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniDividerComponent, isStandalone: true, selector: "uni-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()" } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2643
3053
|
}
|
|
2644
3054
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDividerComponent, decorators: [{
|
|
2645
3055
|
type: Component,
|
|
2646
3056
|
args: [{
|
|
2647
|
-
selector: 'uni-divider
|
|
3057
|
+
selector: 'uni-divider',
|
|
2648
3058
|
imports: [],
|
|
2649
3059
|
template: ``,
|
|
2650
3060
|
host: { '[class]': 'className()' },
|
|
@@ -2652,30 +3062,190 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
2652
3062
|
}]
|
|
2653
3063
|
}], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }] } });
|
|
2654
3064
|
|
|
2655
|
-
|
|
2656
|
-
|
|
2657
|
-
|
|
2658
|
-
|
|
2659
|
-
|
|
2660
|
-
|
|
2661
|
-
|
|
2662
|
-
|
|
2663
|
-
|
|
2664
|
-
|
|
2665
|
-
|
|
2666
|
-
|
|
2667
|
-
|
|
2668
|
-
|
|
2669
|
-
|
|
2670
|
-
|
|
2671
|
-
|
|
2672
|
-
|
|
2673
|
-
|
|
2674
|
-
|
|
2675
|
-
|
|
2676
|
-
|
|
2677
|
-
|
|
2678
|
-
|
|
3065
|
+
/**
|
|
3066
|
+
* Navigation drawer with two modes sharing one content slot:
|
|
3067
|
+
*
|
|
3068
|
+
* - `side` — an in-flow `<aside>` that pushes content (dashboard sidenav);
|
|
3069
|
+
* opening/closing animates its width, and the divider border primitive
|
|
3070
|
+
* separates it from the page.
|
|
3071
|
+
* - `over` — a native `<dialog>` in the top layer: focus trap, Escape and
|
|
3072
|
+
* scrim backdrop come from the platform (same machinery as `uni-dialog`),
|
|
3073
|
+
* sliding in from its edge.
|
|
3074
|
+
*
|
|
3075
|
+
* Surface, width, divider, elevation, padding and backdrop all resolve from
|
|
3076
|
+
* `drawer` theme tokens.
|
|
3077
|
+
*/
|
|
3078
|
+
class UniDrawerComponent extends BaseComponent {
|
|
3079
|
+
/** Two-way bindable open state: [(open)]. */
|
|
3080
|
+
open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
3081
|
+
mode = input('side', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
3082
|
+
position = input('start', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
|
|
3083
|
+
/** Accessible name for the overlay mode's dialog. */
|
|
3084
|
+
ariaLabel = input('Navigation', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
3085
|
+
contentTemplate = viewChild.required('content');
|
|
3086
|
+
overlay = viewChild('overlay', ...(ngDevMode ? [{ debugName: "overlay" }] : /* istanbul ignore next */ []));
|
|
3087
|
+
constructor() {
|
|
3088
|
+
super();
|
|
3089
|
+
effect(() => {
|
|
3090
|
+
const dialog = this.overlay()?.nativeElement;
|
|
3091
|
+
if (!dialog)
|
|
3092
|
+
return;
|
|
3093
|
+
if (this.open()) {
|
|
3094
|
+
if (!dialog.open) {
|
|
3095
|
+
dialog.removeAttribute('closing');
|
|
3096
|
+
dialog.showModal();
|
|
3097
|
+
}
|
|
3098
|
+
}
|
|
3099
|
+
else if (dialog.open) {
|
|
3100
|
+
// Slide out first; the dialog closes when the animation reports done.
|
|
3101
|
+
dialog.setAttribute('closing', 'true');
|
|
3102
|
+
}
|
|
3103
|
+
});
|
|
3104
|
+
}
|
|
3105
|
+
onBackdropClick(event) {
|
|
3106
|
+
if (event.target.nodeName === 'DIALOG')
|
|
3107
|
+
this.open.set(false);
|
|
3108
|
+
}
|
|
3109
|
+
/** Route Escape through the animated close, keeping `open` in sync. */
|
|
3110
|
+
onCancel(event) {
|
|
3111
|
+
event.preventDefault();
|
|
3112
|
+
this.open.set(false);
|
|
3113
|
+
}
|
|
3114
|
+
onAnimationEnd(event) {
|
|
3115
|
+
const dialog = this.overlay()?.nativeElement;
|
|
3116
|
+
if (!dialog || !dialog.hasAttribute('closing'))
|
|
3117
|
+
return;
|
|
3118
|
+
if (event.animationName.includes(this.slideOut())) {
|
|
3119
|
+
dialog.close();
|
|
3120
|
+
dialog.removeAttribute('closing');
|
|
3121
|
+
}
|
|
3122
|
+
}
|
|
3123
|
+
edge = computed(() => (this.position() === 'start' ? '-100%' : '100%'), ...(ngDevMode ? [{ debugName: "edge" }] : /* istanbul ignore next */ []));
|
|
3124
|
+
slideIn = computed(() => keyframes({ from: { transform: `translateX(${this.edge()})` }, to: { transform: 'translateX(0)' } }), ...(ngDevMode ? [{ debugName: "slideIn" }] : /* istanbul ignore next */ []));
|
|
3125
|
+
slideOut = computed(() => keyframes({ from: { transform: 'translateX(0)' }, to: { transform: `translateX(${this.edge()})` } }), ...(ngDevMode ? [{ debugName: "slideOut" }] : /* istanbul ignore next */ []));
|
|
3126
|
+
sideClass = computed(() => {
|
|
3127
|
+
const options = this.componentOptions();
|
|
3128
|
+
const width = options.width ?? 280;
|
|
3129
|
+
const start = this.position() === 'start';
|
|
3130
|
+
return css({
|
|
3131
|
+
display: 'block',
|
|
3132
|
+
boxSizing: 'border-box',
|
|
3133
|
+
height: '100%',
|
|
3134
|
+
flex: 'none',
|
|
3135
|
+
overflowX: 'hidden',
|
|
3136
|
+
overflowY: 'auto',
|
|
3137
|
+
transition: 'width 0.25s ease, visibility 0.25s',
|
|
3138
|
+
...this.theme.colorPair(options.color),
|
|
3139
|
+
...(start
|
|
3140
|
+
? this.theme.borderRight(options.divider)
|
|
3141
|
+
: this.theme.borderLeft(options.divider)),
|
|
3142
|
+
...(this.open()
|
|
3143
|
+
? { width, visibility: 'visible', ...this.theme.padding(options.padding) }
|
|
3144
|
+
: { width: 0, visibility: 'hidden', padding: 0, border: 'none' }),
|
|
3145
|
+
});
|
|
3146
|
+
}, ...(ngDevMode ? [{ debugName: "sideClass" }] : /* istanbul ignore next */ []));
|
|
3147
|
+
overClass = computed(() => {
|
|
3148
|
+
const options = this.componentOptions();
|
|
3149
|
+
const start = this.position() === 'start';
|
|
3150
|
+
return css({
|
|
3151
|
+
boxSizing: 'border-box',
|
|
3152
|
+
width: options.width ?? 280,
|
|
3153
|
+
maxWidth: '90vw',
|
|
3154
|
+
height: '100dvh',
|
|
3155
|
+
maxHeight: '100dvh',
|
|
3156
|
+
border: 'none',
|
|
3157
|
+
margin: start ? '0 auto 0 0' : '0 0 0 auto',
|
|
3158
|
+
overflowY: 'auto',
|
|
3159
|
+
...this.theme.colorPair(options.color),
|
|
3160
|
+
...this.theme.padding(options.padding),
|
|
3161
|
+
...this.theme.boxShadow(options.elevation),
|
|
3162
|
+
'&::backdrop': { ...options.backdrop },
|
|
3163
|
+
'&[open]': { animation: `${this.slideIn()} 250ms ease-out` },
|
|
3164
|
+
'&[closing]': { animation: `${this.slideOut()} 250ms ease-in` },
|
|
3165
|
+
});
|
|
3166
|
+
}, ...(ngDevMode ? [{ debugName: "overClass" }] : /* istanbul ignore next */ []));
|
|
3167
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3168
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDrawerComponent, isStandalone: true, selector: "uni-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, providers: [{ provide: COMPONENT_NAME, useValue: 'drawer' }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "overlay", first: true, predicate: ["overlay"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
|
|
3169
|
+
<ng-template #content><ng-content /></ng-template>
|
|
3170
|
+
@if (mode() === 'side') {
|
|
3171
|
+
<aside [class]="sideClass()" [attr.aria-hidden]="open() ? null : 'true'">
|
|
3172
|
+
<ng-container [ngTemplateOutlet]="contentTemplate()" />
|
|
3173
|
+
</aside>
|
|
3174
|
+
} @else {
|
|
3175
|
+
<!-- Click handles the ::backdrop only (target check); keyboard closing
|
|
3176
|
+
is the native dialog cancel event, and focus is trapped by
|
|
3177
|
+
showModal — the element needs no tabindex of its own. -->
|
|
3178
|
+
<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
|
|
3179
|
+
<dialog
|
|
3180
|
+
#overlay
|
|
3181
|
+
[class]="overClass()"
|
|
3182
|
+
[attr.aria-label]="ariaLabel()"
|
|
3183
|
+
(click)="onBackdropClick($event)"
|
|
3184
|
+
(cancel)="onCancel($event)"
|
|
3185
|
+
(animationend)="onAnimationEnd($event)"
|
|
3186
|
+
>
|
|
3187
|
+
<ng-container [ngTemplateOutlet]="contentTemplate()" />
|
|
3188
|
+
</dialog>
|
|
3189
|
+
}
|
|
3190
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3191
|
+
}
|
|
3192
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDrawerComponent, decorators: [{
|
|
3193
|
+
type: Component,
|
|
3194
|
+
args: [{
|
|
3195
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
3196
|
+
selector: 'uni-drawer',
|
|
3197
|
+
imports: [NgTemplateOutlet],
|
|
3198
|
+
providers: [{ provide: COMPONENT_NAME, useValue: 'drawer' }],
|
|
3199
|
+
template: `
|
|
3200
|
+
<ng-template #content><ng-content /></ng-template>
|
|
3201
|
+
@if (mode() === 'side') {
|
|
3202
|
+
<aside [class]="sideClass()" [attr.aria-hidden]="open() ? null : 'true'">
|
|
3203
|
+
<ng-container [ngTemplateOutlet]="contentTemplate()" />
|
|
3204
|
+
</aside>
|
|
3205
|
+
} @else {
|
|
3206
|
+
<!-- Click handles the ::backdrop only (target check); keyboard closing
|
|
3207
|
+
is the native dialog cancel event, and focus is trapped by
|
|
3208
|
+
showModal — the element needs no tabindex of its own. -->
|
|
3209
|
+
<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
|
|
3210
|
+
<dialog
|
|
3211
|
+
#overlay
|
|
3212
|
+
[class]="overClass()"
|
|
3213
|
+
[attr.aria-label]="ariaLabel()"
|
|
3214
|
+
(click)="onBackdropClick($event)"
|
|
3215
|
+
(cancel)="onCancel($event)"
|
|
3216
|
+
(animationend)="onAnimationEnd($event)"
|
|
3217
|
+
>
|
|
3218
|
+
<ng-container [ngTemplateOutlet]="contentTemplate()" />
|
|
3219
|
+
</dialog>
|
|
3220
|
+
}
|
|
3221
|
+
`,
|
|
3222
|
+
}]
|
|
3223
|
+
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], contentTemplate: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], overlay: [{ type: i0.ViewChild, args: ['overlay', { isSignal: true }] }] } });
|
|
3224
|
+
|
|
3225
|
+
class UniDropdownComponent extends BaseComponent {
|
|
3226
|
+
renderer = inject(Renderer2);
|
|
3227
|
+
delay = 100;
|
|
3228
|
+
// Reactively track visibility status using Signals
|
|
3229
|
+
showing = signal(false, ...(ngDevMode ? [{ debugName: "showing" }] : /* istanbul ignore next */ []));
|
|
3230
|
+
trigger = input.required(...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
|
|
3231
|
+
placement = input('bottom-start', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
|
|
3232
|
+
offset = input({ mainAxis: 4, alignmentAxis: 12 }, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
|
|
3233
|
+
/** CSS anchor-name linking the trigger to the popover panel. */
|
|
3234
|
+
anchorName = newAnchorName();
|
|
3235
|
+
/**
|
|
3236
|
+
* Value for aria-haspopup on the trigger, describing what the popover
|
|
3237
|
+
* contains (e.g. 'menu' for Menu, 'dialog' for rich content). When unset,
|
|
3238
|
+
* only aria-expanded/aria-controls are managed.
|
|
3239
|
+
*/
|
|
3240
|
+
ariaHasPopup = input(null, ...(ngDevMode ? [{ debugName: "ariaHasPopup" }] : /* istanbul ignore next */ []));
|
|
3241
|
+
/** Document-unique id of the popover element, for aria-controls wiring. */
|
|
3242
|
+
popoverId = uniqueId('uni-dropdown');
|
|
3243
|
+
paddingVertical = input(...(ngDevMode ? [undefined, { debugName: "paddingVertical" }] : /* istanbul ignore next */ []));
|
|
3244
|
+
paddingHorizontal = input(...(ngDevMode ? [undefined, { debugName: "paddingHorizontal" }] : /* istanbul ignore next */ []));
|
|
3245
|
+
dropdownShowing = output();
|
|
3246
|
+
dropdownHiding = output();
|
|
3247
|
+
dropdownRef;
|
|
3248
|
+
get _trigger() {
|
|
2679
3249
|
return this.trigger();
|
|
2680
3250
|
}
|
|
2681
3251
|
get _dropdown() {
|
|
@@ -2796,7 +3366,7 @@ class UniDropdownComponent extends BaseComponent {
|
|
|
2796
3366
|
}
|
|
2797
3367
|
}
|
|
2798
3368
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2799
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniDropdownComponent, isStandalone: true, selector: "uni-dropdown
|
|
3369
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniDropdownComponent, isStandalone: true, selector: "uni-dropdown", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, ariaHasPopup: { classPropertyName: "ariaHasPopup", publicName: "ariaHasPopup", isSignal: true, isRequired: false, transformFunction: null }, paddingVertical: { classPropertyName: "paddingVertical", publicName: "paddingVertical", isSignal: true, isRequired: false, transformFunction: null }, paddingHorizontal: { classPropertyName: "paddingHorizontal", publicName: "paddingHorizontal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropdownShowing: "dropdownShowing", dropdownHiding: "dropdownHiding" }, providers: [{ provide: COMPONENT_NAME, useValue: 'dropdown' }], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
|
|
2800
3370
|
<!-- 1. The native 'popover' attribute brings it to the top layer with native light-dismiss -->
|
|
2801
3371
|
<div #dropdown popover="auto" [id]="popoverId" [class]="dropdownClass()">
|
|
2802
3372
|
<div
|
|
@@ -2811,13 +3381,13 @@ class UniDropdownComponent extends BaseComponent {
|
|
|
2811
3381
|
<ng-content></ng-content>
|
|
2812
3382
|
</div>
|
|
2813
3383
|
</div>
|
|
2814
|
-
`, isInline: true, dependencies: [{ kind: "component", type: UniBoxComponent, selector: "
|
|
3384
|
+
`, isInline: true, 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2815
3385
|
}
|
|
2816
3386
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDropdownComponent, decorators: [{
|
|
2817
3387
|
type: Component,
|
|
2818
3388
|
args: [{
|
|
2819
3389
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2820
|
-
selector: 'uni-dropdown
|
|
3390
|
+
selector: 'uni-dropdown',
|
|
2821
3391
|
imports: [UniBoxComponent],
|
|
2822
3392
|
template: `
|
|
2823
3393
|
<!-- 1. The native 'popover' attribute brings it to the top layer with native light-dismiss -->
|
|
@@ -2866,7 +3436,7 @@ class UniExpandComponent {
|
|
|
2866
3436
|
animation: `${this.collapse} ease-in 350ms`,
|
|
2867
3437
|
});
|
|
2868
3438
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniExpandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2869
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniExpandComponent, isStandalone: true, selector: "uni-expand
|
|
3439
|
+
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()) {
|
|
2870
3440
|
<div
|
|
2871
3441
|
[animate.enter]="expandAnimation"
|
|
2872
3442
|
[animate.leave]="collapseAnimation"
|
|
@@ -2882,7 +3452,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
2882
3452
|
type: Component,
|
|
2883
3453
|
args: [{
|
|
2884
3454
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2885
|
-
selector: 'uni-expand
|
|
3455
|
+
selector: 'uni-expand',
|
|
2886
3456
|
imports: [],
|
|
2887
3457
|
template: `@if (!collapsed()) {
|
|
2888
3458
|
<div
|
|
@@ -3036,7 +3606,7 @@ class UniTooltipComponent extends BaseComponent {
|
|
|
3036
3606
|
...anchorArrowStyles(this.placement()),
|
|
3037
3607
|
}), ...(ngDevMode ? [{ debugName: "arrowClassName" }] : /* istanbul ignore next */ []));
|
|
3038
3608
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3039
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: UniTooltipComponent, isStandalone: true, selector: "uni-tooltip
|
|
3609
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: UniTooltipComponent, isStandalone: true, selector: "uni-tooltip", inputs: { hoverDelay: { classPropertyName: "hoverDelay", publicName: "hoverDelay", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, inlineText: { classPropertyName: "inlineText", publicName: "inlineText", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "toggleTooltip()", "mouseenter": "mouseenter()", "mouseleave": "mouseleave()", "focusin": "onFocusIn($event)", "focusout": "onFocusOut()", "keydown.escape": "onEscape($event)" }, properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'tooltip' }], viewQueries: [{ propertyName: "tipRef", first: true, predicate: ["tip"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content
|
|
3040
3610
|
><span
|
|
3041
3611
|
#tip
|
|
3042
3612
|
popover="manual"
|
|
@@ -3052,7 +3622,7 @@ class UniTooltipComponent extends BaseComponent {
|
|
|
3052
3622
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTooltipComponent, decorators: [{
|
|
3053
3623
|
type: Component,
|
|
3054
3624
|
args: [{
|
|
3055
|
-
selector: 'uni-tooltip
|
|
3625
|
+
selector: 'uni-tooltip',
|
|
3056
3626
|
imports: [],
|
|
3057
3627
|
// The bubble lives declaratively in the template as a manual popover: the
|
|
3058
3628
|
// top layer escapes any overflow context (which made appendToBody obsolete)
|
|
@@ -3102,7 +3672,7 @@ class UniExpandToggleComponent {
|
|
|
3102
3672
|
this.collapsed.update((collapsed) => !collapsed);
|
|
3103
3673
|
}
|
|
3104
3674
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniExpandToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3105
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniExpandToggleComponent, isStandalone: true, selector: "uni-expand-toggle
|
|
3675
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniExpandToggleComponent, isStandalone: true, selector: "uni-expand-toggle", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, ariaControls: { classPropertyName: "ariaControls", publicName: "ariaControls", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "class": "className()", "attr.toggled": "collapsed() || null" } }, ngImport: i0, template: `<uni-tooltip
|
|
3106
3676
|
[label]="collapsed() ? 'Expand' : 'Collapse'"
|
|
3107
3677
|
placement="right"
|
|
3108
3678
|
>
|
|
@@ -3115,14 +3685,14 @@ class UniExpandToggleComponent {
|
|
|
3115
3685
|
>
|
|
3116
3686
|
{{ collapsed() ? 'Expand' : 'Collapse' }}
|
|
3117
3687
|
</button>
|
|
3118
|
-
</
|
|
3688
|
+
</uni-tooltip>`, isInline: true, dependencies: [{ kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniTooltipComponent, selector: "uni-tooltip", inputs: ["hoverDelay", "label", "placement", "inlineText", "appendToBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3119
3689
|
}
|
|
3120
3690
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniExpandToggleComponent, decorators: [{
|
|
3121
3691
|
type: Component,
|
|
3122
3692
|
args: [{
|
|
3123
|
-
selector: 'uni-expand-toggle
|
|
3693
|
+
selector: 'uni-expand-toggle',
|
|
3124
3694
|
imports: [UniIconButtonComponent, UniTooltipComponent],
|
|
3125
|
-
template: `<
|
|
3695
|
+
template: `<uni-tooltip
|
|
3126
3696
|
[label]="collapsed() ? 'Expand' : 'Collapse'"
|
|
3127
3697
|
placement="right"
|
|
3128
3698
|
>
|
|
@@ -3135,7 +3705,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
3135
3705
|
>
|
|
3136
3706
|
{{ collapsed() ? 'Expand' : 'Collapse' }}
|
|
3137
3707
|
</button>
|
|
3138
|
-
</
|
|
3708
|
+
</uni-tooltip>`,
|
|
3139
3709
|
host: {
|
|
3140
3710
|
'[class]': 'className()',
|
|
3141
3711
|
'[attr.toggled]': 'collapsed() || null',
|
|
@@ -3154,9 +3724,9 @@ class UniExpandAreaComponent {
|
|
|
3154
3724
|
this.toggleRef().toggle();
|
|
3155
3725
|
}
|
|
3156
3726
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniExpandAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3157
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: UniExpandAreaComponent, isStandalone: true, selector: "uni-expand-area
|
|
3158
|
-
<
|
|
3159
|
-
<
|
|
3727
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: UniExpandAreaComponent, isStandalone: true, selector: "uni-expand-area", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, initCollapsed: { classPropertyName: "initCollapsed", publicName: "initCollapsed", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsed" }, viewQueries: [{ propertyName: "toggleRef", first: true, predicate: ["toggle"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
3728
|
+
<div box-layout color="tertiary-surface" borderRadius="sm" border="quaternary" overflow="hidden">
|
|
3729
|
+
<div box-layout
|
|
3160
3730
|
border="quaternary"
|
|
3161
3731
|
borderRadius="sm"
|
|
3162
3732
|
color="primary-surface"
|
|
@@ -3166,38 +3736,38 @@ class UniExpandAreaComponent {
|
|
|
3166
3736
|
display="flex"
|
|
3167
3737
|
alignItems="center"
|
|
3168
3738
|
>
|
|
3169
|
-
<
|
|
3170
|
-
<
|
|
3171
|
-
<
|
|
3739
|
+
<div box-layout [width]="36"></div>
|
|
3740
|
+
<div box-layout paddingHorizontal="md">
|
|
3741
|
+
<span uni-text="title-small" display="block">
|
|
3172
3742
|
{{ title() }}
|
|
3173
|
-
</
|
|
3174
|
-
</
|
|
3743
|
+
</span>
|
|
3744
|
+
</div>
|
|
3175
3745
|
|
|
3176
|
-
<
|
|
3746
|
+
<uni-expand-toggle
|
|
3177
3747
|
#toggle
|
|
3178
3748
|
style="display: inline-flex; margin: -2px"
|
|
3179
3749
|
[collapsed]="initCollapsed()"
|
|
3180
3750
|
[ariaControls]="expand.regionId"
|
|
3181
3751
|
/>
|
|
3182
|
-
</
|
|
3752
|
+
</div>
|
|
3183
3753
|
|
|
3184
|
-
<
|
|
3185
|
-
<
|
|
3754
|
+
<uni-expand #expand [collapsed]="toggle.collapsed()">
|
|
3755
|
+
<div box-layout [padding]="padding()">
|
|
3186
3756
|
<ng-content></ng-content>
|
|
3187
|
-
</
|
|
3188
|
-
</
|
|
3189
|
-
</
|
|
3190
|
-
`, isInline: true, dependencies: [{ kind: "component", type: UniBoxComponent, selector: "
|
|
3757
|
+
</div>
|
|
3758
|
+
</uni-expand>
|
|
3759
|
+
</div>
|
|
3760
|
+
`, isInline: true, 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: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniExpandToggleComponent, selector: "uni-expand-toggle", inputs: ["collapsed", "ariaControls"], outputs: ["collapsedChange"] }, { kind: "component", type: UniExpandComponent, selector: "uni-expand", inputs: ["collapsed"], outputs: ["collapsedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3191
3761
|
}
|
|
3192
3762
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniExpandAreaComponent, decorators: [{
|
|
3193
3763
|
type: Component,
|
|
3194
3764
|
args: [{
|
|
3195
3765
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
3196
|
-
selector: 'uni-expand-area
|
|
3766
|
+
selector: 'uni-expand-area',
|
|
3197
3767
|
imports: [UniBoxComponent, UniTextComponent, UniExpandToggleComponent, UniExpandComponent],
|
|
3198
3768
|
template: `
|
|
3199
|
-
<
|
|
3200
|
-
<
|
|
3769
|
+
<div box-layout color="tertiary-surface" borderRadius="sm" border="quaternary" overflow="hidden">
|
|
3770
|
+
<div box-layout
|
|
3201
3771
|
border="quaternary"
|
|
3202
3772
|
borderRadius="sm"
|
|
3203
3773
|
color="primary-surface"
|
|
@@ -3207,27 +3777,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
3207
3777
|
display="flex"
|
|
3208
3778
|
alignItems="center"
|
|
3209
3779
|
>
|
|
3210
|
-
<
|
|
3211
|
-
<
|
|
3212
|
-
<
|
|
3780
|
+
<div box-layout [width]="36"></div>
|
|
3781
|
+
<div box-layout paddingHorizontal="md">
|
|
3782
|
+
<span uni-text="title-small" display="block">
|
|
3213
3783
|
{{ title() }}
|
|
3214
|
-
</
|
|
3215
|
-
</
|
|
3784
|
+
</span>
|
|
3785
|
+
</div>
|
|
3216
3786
|
|
|
3217
|
-
<
|
|
3787
|
+
<uni-expand-toggle
|
|
3218
3788
|
#toggle
|
|
3219
3789
|
style="display: inline-flex; margin: -2px"
|
|
3220
3790
|
[collapsed]="initCollapsed()"
|
|
3221
3791
|
[ariaControls]="expand.regionId"
|
|
3222
3792
|
/>
|
|
3223
|
-
</
|
|
3793
|
+
</div>
|
|
3224
3794
|
|
|
3225
|
-
<
|
|
3226
|
-
<
|
|
3795
|
+
<uni-expand #expand [collapsed]="toggle.collapsed()">
|
|
3796
|
+
<div box-layout [padding]="padding()">
|
|
3227
3797
|
<ng-content></ng-content>
|
|
3228
|
-
</
|
|
3229
|
-
</
|
|
3230
|
-
</
|
|
3798
|
+
</div>
|
|
3799
|
+
</uni-expand>
|
|
3800
|
+
</div>
|
|
3231
3801
|
`,
|
|
3232
3802
|
}]
|
|
3233
3803
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], initCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "initCollapsed", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], collapsed: [{ type: i0.Output, args: ["collapsed"] }], toggleRef: [{ type: i0.ViewChild, args: ['toggle', { isSignal: true }] }] } });
|
|
@@ -3317,7 +3887,7 @@ class UniFileDropZoneComponent {
|
|
|
3317
3887
|
this.selectedFile.set(undefined);
|
|
3318
3888
|
}
|
|
3319
3889
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniFileDropZoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3320
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniFileDropZoneComponent, isStandalone: true, selector: "uni-file-drop-zone", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, useBrowseButton: { classPropertyName: "useBrowseButton", publicName: "useBrowseButton", isSignal: true, isRequired: false, transformFunction: null }, browseButtonText: { classPropertyName: "browseButtonText", publicName: "browseButtonText", isSignal: true, isRequired: false, transformFunction: null }, allowedFileExtensions: { classPropertyName: "allowedFileExtensions", publicName: "allowedFileExtensions", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helpTemplate: { classPropertyName: "helpTemplate", publicName: "helpTemplate", isSignal: true, isRequired: false, transformFunction: null }, helpTemplateContext: { classPropertyName: "helpTemplateContext", publicName: "helpTemplateContext", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileAttached: "fileAttached", fileRemoved: "fileRemoved" }, viewQueries: [{ propertyName: "fileSelectorRef", first: true, predicate: ["fileSelector"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Without a browse button the zone itself is the keyboard path to the\n native file picker; with one, the button already provides it -->\n<div\n box-layout\n [border]=\"border()\"\n [borderRadius]=\"borderRadius()\"\n [dashBorder]=\"[undefined, 'replace'].includes(attachmentState())\"\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"center\"\n [padding]=\"padding()\"\n dragAndDrop\n (onFileDropped)=\"selectFiles($event)\"\n [height]=\"height()\"\n [attr.role]=\"zoneIsInteractive() ? 'button' : null\"\n [attr.tabindex]=\"zoneIsInteractive() ? 0 : null\"\n [attr.aria-label]=\"zoneIsInteractive() ? label() || 'Choose a file' : null\"\n (keydown.enter)=\"zoneIsInteractive() && openFileSelector()\"\n (keydown.space)=\"\n zoneIsInteractive() && openFileSelector(); zoneIsInteractive() && $event.preventDefault()\n \"\n>\n <div stack-layout gap=\"md\" alignItems=\"center\">\n @switch (attachmentState()) {\n @case ('upload') {\n <div stack-layout alignItems=\"center\">\n <
|
|
3890
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniFileDropZoneComponent, isStandalone: true, selector: "uni-file-drop-zone", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, useBrowseButton: { classPropertyName: "useBrowseButton", publicName: "useBrowseButton", isSignal: true, isRequired: false, transformFunction: null }, browseButtonText: { classPropertyName: "browseButtonText", publicName: "browseButtonText", isSignal: true, isRequired: false, transformFunction: null }, allowedFileExtensions: { classPropertyName: "allowedFileExtensions", publicName: "allowedFileExtensions", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helpTemplate: { classPropertyName: "helpTemplate", publicName: "helpTemplate", isSignal: true, isRequired: false, transformFunction: null }, helpTemplateContext: { classPropertyName: "helpTemplateContext", publicName: "helpTemplateContext", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileAttached: "fileAttached", fileRemoved: "fileRemoved" }, viewQueries: [{ propertyName: "fileSelectorRef", first: true, predicate: ["fileSelector"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Without a browse button the zone itself is the keyboard path to the\n native file picker; with one, the button already provides it -->\n<div\n box-layout\n [border]=\"border()\"\n [borderRadius]=\"borderRadius()\"\n [dashBorder]=\"[undefined, 'replace'].includes(attachmentState())\"\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"center\"\n [padding]=\"padding()\"\n dragAndDrop\n (onFileDropped)=\"selectFiles($event)\"\n [height]=\"height()\"\n [attr.role]=\"zoneIsInteractive() ? 'button' : null\"\n [attr.tabindex]=\"zoneIsInteractive() ? 0 : null\"\n [attr.aria-label]=\"zoneIsInteractive() ? label() || 'Choose a file' : null\"\n (keydown.enter)=\"zoneIsInteractive() && openFileSelector()\"\n (keydown.space)=\"\n zoneIsInteractive() && openFileSelector(); zoneIsInteractive() && $event.preventDefault()\n \"\n>\n <div stack-layout gap=\"md\" alignItems=\"center\">\n @switch (attachmentState()) {\n @case ('upload') {\n <div stack-layout alignItems=\"center\">\n <span uni-text=\"headline-small\">{{ label() }}</span>\n <span uni-text=\"title-small\">{{ selectedFileName() }}</span>\n </div>\n <button text-button (click)=\"removeAttachment()\" variant=\"warn\">Cancel</button>\n }\n\n @default {\n @if (useBrowseButton()) {\n <button text-button (click)=\"openFileSelector()\">\n {{ browseButtonText() }}\n </button>\n <span uni-text>OR</span>\n }\n\n @if (!helpTemplate()) {\n <div stack-layout alignItems=\"center\">\n <span uni-text=\"headline-small\">Drag and drop the file here</span>\n @if (helpText()) {\n <span uni-text=\"title-small\">{{ helpText() }}</span>\n }\n </div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"helpTemplate()\"\n [ngTemplateOutletContext]=\"helpTemplateContext()\"\n ></ng-container>\n }\n }\n }\n </div>\n\n <input\n #fileSelector\n type=\"file\"\n style=\"display: none\"\n (change)=\"onFileInputChange()\"\n [accept]=\"sanitizedFileExtensions().join(',')\"\n [multiple]=\"false\"\n />\n</div>\n", dependencies: [{ kind: "directive", type: DragAndDropDirective, selector: "[uni-drag-n-drop], [dragAndDrop]", outputs: ["onFileDropped"] }, { kind: "component", type: UniBoxComponent, selector: "[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: UniButtonComponent, selector: "button[uni-text-button], button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }, { kind: "component", type: UniStackComponent, selector: "[uni-stack-layout], [stack-layout]", inputs: ["display", "flexDirection", "minHeight"] }, { kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3321
3891
|
}
|
|
3322
3892
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniFileDropZoneComponent, decorators: [{
|
|
3323
3893
|
type: Component,
|
|
@@ -3328,7 +3898,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
3328
3898
|
UniStackComponent,
|
|
3329
3899
|
UniTextComponent,
|
|
3330
3900
|
NgTemplateOutlet,
|
|
3331
|
-
], template: "<!-- Without a browse button the zone itself is the keyboard path to the\n native file picker; with one, the button already provides it -->\n<div\n box-layout\n [border]=\"border()\"\n [borderRadius]=\"borderRadius()\"\n [dashBorder]=\"[undefined, 'replace'].includes(attachmentState())\"\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"center\"\n [padding]=\"padding()\"\n dragAndDrop\n (onFileDropped)=\"selectFiles($event)\"\n [height]=\"height()\"\n [attr.role]=\"zoneIsInteractive() ? 'button' : null\"\n [attr.tabindex]=\"zoneIsInteractive() ? 0 : null\"\n [attr.aria-label]=\"zoneIsInteractive() ? label() || 'Choose a file' : null\"\n (keydown.enter)=\"zoneIsInteractive() && openFileSelector()\"\n (keydown.space)=\"\n zoneIsInteractive() && openFileSelector(); zoneIsInteractive() && $event.preventDefault()\n \"\n>\n <div stack-layout gap=\"md\" alignItems=\"center\">\n @switch (attachmentState()) {\n @case ('upload') {\n <div stack-layout alignItems=\"center\">\n <
|
|
3901
|
+
], template: "<!-- Without a browse button the zone itself is the keyboard path to the\n native file picker; with one, the button already provides it -->\n<div\n box-layout\n [border]=\"border()\"\n [borderRadius]=\"borderRadius()\"\n [dashBorder]=\"[undefined, 'replace'].includes(attachmentState())\"\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"center\"\n [padding]=\"padding()\"\n dragAndDrop\n (onFileDropped)=\"selectFiles($event)\"\n [height]=\"height()\"\n [attr.role]=\"zoneIsInteractive() ? 'button' : null\"\n [attr.tabindex]=\"zoneIsInteractive() ? 0 : null\"\n [attr.aria-label]=\"zoneIsInteractive() ? label() || 'Choose a file' : null\"\n (keydown.enter)=\"zoneIsInteractive() && openFileSelector()\"\n (keydown.space)=\"\n zoneIsInteractive() && openFileSelector(); zoneIsInteractive() && $event.preventDefault()\n \"\n>\n <div stack-layout gap=\"md\" alignItems=\"center\">\n @switch (attachmentState()) {\n @case ('upload') {\n <div stack-layout alignItems=\"center\">\n <span uni-text=\"headline-small\">{{ label() }}</span>\n <span uni-text=\"title-small\">{{ selectedFileName() }}</span>\n </div>\n <button text-button (click)=\"removeAttachment()\" variant=\"warn\">Cancel</button>\n }\n\n @default {\n @if (useBrowseButton()) {\n <button text-button (click)=\"openFileSelector()\">\n {{ browseButtonText() }}\n </button>\n <span uni-text>OR</span>\n }\n\n @if (!helpTemplate()) {\n <div stack-layout alignItems=\"center\">\n <span uni-text=\"headline-small\">Drag and drop the file here</span>\n @if (helpText()) {\n <span uni-text=\"title-small\">{{ helpText() }}</span>\n }\n </div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"helpTemplate()\"\n [ngTemplateOutletContext]=\"helpTemplateContext()\"\n ></ng-container>\n }\n }\n }\n </div>\n\n <input\n #fileSelector\n type=\"file\"\n style=\"display: none\"\n (change)=\"onFileInputChange()\"\n [accept]=\"sanitizedFileExtensions().join(',')\"\n [multiple]=\"false\"\n />\n</div>\n" }]
|
|
3332
3902
|
}], ctorParameters: () => [], propDecorators: { fileSelectorRef: [{ type: i0.ViewChild, args: ['fileSelector', { isSignal: true }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], useBrowseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "useBrowseButton", required: false }] }], browseButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "browseButtonText", required: false }] }], allowedFileExtensions: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedFileExtensions", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helpTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpTemplate", required: false }] }], helpTemplateContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpTemplateContext", required: false }] }], fileAttached: [{ type: i0.Output, args: ["fileAttached"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }] } });
|
|
3333
3903
|
|
|
3334
3904
|
/**
|
|
@@ -3337,14 +3907,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
3337
3907
|
* This file exports all public-facing elements of the file-drop-zone component.
|
|
3338
3908
|
*/
|
|
3339
3909
|
|
|
3910
|
+
class UniInputBoxComponent extends BaseComponent {
|
|
3911
|
+
className = css({ display: 'contents' });
|
|
3912
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
3913
|
+
error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
3914
|
+
minWidth = input('0', ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
|
|
3915
|
+
/** Override the themed field height, e.g. `'auto'` for multi-line fields. */
|
|
3916
|
+
height = input(undefined, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
3917
|
+
color = computed(() => this.error() ? this.componentOptions().errorColor : this.componentOptions().color, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
3918
|
+
border = computed(() => this.error() ? this.componentOptions().errorBorder : this.componentOptions().border, ...(ngDevMode ? [{ debugName: "border" }] : /* istanbul ignore next */ []));
|
|
3919
|
+
shadow = computed(() => this.error() ? this.componentOptions().errorShadow : this.componentOptions().shadow, ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
|
|
3920
|
+
inputBoxClass = computed(() => css([
|
|
3921
|
+
this.disabled() && {
|
|
3922
|
+
...this.theme.color(this.componentOptions().disabledTextColor),
|
|
3923
|
+
...this.theme.backgroundColor(this.componentOptions().disabledColor),
|
|
3924
|
+
cursor: 'not-allowed !important',
|
|
3925
|
+
},
|
|
3926
|
+
{
|
|
3927
|
+
'& input, select, textarea': {
|
|
3928
|
+
...removeInputPlatformStyling,
|
|
3929
|
+
height: '100%',
|
|
3930
|
+
...this.theme.paddingLeft(this.componentOptions().paddingLeft),
|
|
3931
|
+
...this.theme.color(this.componentOptions().textColor),
|
|
3932
|
+
...this.theme.typeface(this.componentOptions().typeFace),
|
|
3933
|
+
},
|
|
3934
|
+
// Multi-line fields size themselves (rows/resize), not from the box.
|
|
3935
|
+
'& textarea': {
|
|
3936
|
+
height: 'auto',
|
|
3937
|
+
...this.theme.paddingTop('xs'),
|
|
3938
|
+
...this.theme.paddingBottom('xs'),
|
|
3939
|
+
},
|
|
3940
|
+
'&:has(input:disabled, select:disabled, textarea:disabled)': {
|
|
3941
|
+
...this.theme.color(this.componentOptions().disabledTextColor),
|
|
3942
|
+
...this.theme.backgroundColor(this.componentOptions().disabledColor),
|
|
3943
|
+
},
|
|
3944
|
+
'& input:disabled, select:disabled, textarea:disabled': {
|
|
3945
|
+
cursor: 'not-allowed !important',
|
|
3946
|
+
},
|
|
3947
|
+
'&:has(input:focus, select:focus, textarea:focus)': {
|
|
3948
|
+
outline: this.componentOptions().focusOutline,
|
|
3949
|
+
outlineOffset: this.componentOptions().focusOutlineOffset,
|
|
3950
|
+
},
|
|
3951
|
+
},
|
|
3952
|
+
]), ...(ngDevMode ? [{ debugName: "inputBoxClass" }] : /* istanbul ignore next */ []));
|
|
3953
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniInputBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3954
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniInputBoxComponent, isStandalone: true, selector: "uni-input-box", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'input' }], usesInheritance: true, ngImport: i0, template: "<div\n row-layout\n alignItems=\"center\"\n [height]=\"height() ?? componentOptions().height\"\n [color]=\"color()\"\n [border]=\"border()\"\n [borderRadius]=\"componentOptions().borderRadius\"\n [shadow]=\"shadow()\"\n [minWidth]=\"minWidth()\"\n [class]=\"inputBoxClass()\"\n position=\"relative\"\n>\n <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3955
|
+
}
|
|
3956
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniInputBoxComponent, decorators: [{
|
|
3957
|
+
type: Component,
|
|
3958
|
+
args: [{ selector: 'uni-input-box', imports: [UniRowComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'input' }], host: { '[class]': 'className' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n row-layout\n alignItems=\"center\"\n [height]=\"height() ?? componentOptions().height\"\n [color]=\"color()\"\n [border]=\"border()\"\n [borderRadius]=\"componentOptions().borderRadius\"\n [shadow]=\"shadow()\"\n [minWidth]=\"minWidth()\"\n [class]=\"inputBoxClass()\"\n position=\"relative\"\n>\n <ng-content></ng-content>\n</div>\n" }]
|
|
3959
|
+
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
|
|
3960
|
+
|
|
3961
|
+
/**
|
|
3962
|
+
* Text input that emits `change` only after the user pauses typing. Wears the
|
|
3963
|
+
* shared input chrome (themed color, border, typeface, focus ring) via
|
|
3964
|
+
* `uni-input-box`; project adornments with the `pre-input` / `post-input`
|
|
3965
|
+
* slots, matching `uni-input`'s convention. The ARIA passthrough inputs let a
|
|
3966
|
+
* wrapping composite (e.g. SearchInput's combobox) annotate the real input
|
|
3967
|
+
* element.
|
|
3968
|
+
*/
|
|
3340
3969
|
class UniDebounceInputComponent {
|
|
3341
3970
|
inputName = input(...(ngDevMode ? [undefined, { debugName: "inputName" }] : /* istanbul ignore next */ []));
|
|
3342
3971
|
inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
3343
3972
|
debounceTime = input(400, ...(ngDevMode ? [{ debugName: "debounceTime" }] : /* istanbul ignore next */ []));
|
|
3973
|
+
/** Accessible name for the input. */
|
|
3974
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
3975
|
+
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
3976
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
3977
|
+
// ARIA passthroughs for composite widgets (combobox etc.).
|
|
3978
|
+
role = input(...(ngDevMode ? [undefined, { debugName: "role" }] : /* istanbul ignore next */ []));
|
|
3979
|
+
ariaExpanded = input(undefined, ...(ngDevMode ? [{ debugName: "ariaExpanded" }] : /* istanbul ignore next */ []));
|
|
3980
|
+
ariaControls = input(...(ngDevMode ? [undefined, { debugName: "ariaControls" }] : /* istanbul ignore next */ []));
|
|
3981
|
+
ariaActivedescendant = input(...(ngDevMode ? [undefined, { debugName: "ariaActivedescendant" }] : /* istanbul ignore next */ []));
|
|
3344
3982
|
// TODO(v4): rename to valueChange — renaming is breaking
|
|
3345
3983
|
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
3346
3984
|
change = output();
|
|
3347
3985
|
value = signal(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
3986
|
+
inputElement = viewChild.required('field');
|
|
3348
3987
|
timeoutId = null;
|
|
3349
3988
|
lastEmitted;
|
|
3350
3989
|
constructor() {
|
|
@@ -3366,64 +4005,31 @@ class UniDebounceInputComponent {
|
|
|
3366
4005
|
}
|
|
3367
4006
|
}, this.debounceTime());
|
|
3368
4007
|
}
|
|
4008
|
+
/** Empty the field immediately, cancelling any pending emit. */
|
|
4009
|
+
clear() {
|
|
4010
|
+
if (this.timeoutId)
|
|
4011
|
+
clearTimeout(this.timeoutId);
|
|
4012
|
+
this.value.set('');
|
|
4013
|
+
if (this.lastEmitted !== '') {
|
|
4014
|
+
this.lastEmitted = '';
|
|
4015
|
+
this.change.emit('');
|
|
4016
|
+
}
|
|
4017
|
+
}
|
|
4018
|
+
focus() {
|
|
4019
|
+
this.inputElement().nativeElement.focus();
|
|
4020
|
+
}
|
|
3369
4021
|
inputClass = css({
|
|
3370
|
-
|
|
3371
|
-
fontSize: 18,
|
|
4022
|
+
flexGrow: 1,
|
|
3372
4023
|
width: '100%',
|
|
3373
|
-
|
|
3374
|
-
outline: 'none',
|
|
3375
|
-
},
|
|
4024
|
+
minWidth: 0,
|
|
3376
4025
|
});
|
|
3377
4026
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDebounceInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3378
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
4027
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: UniDebounceInputComponent, isStandalone: true, selector: "uni-debounce-input", inputs: { inputName: { classPropertyName: "inputName", publicName: "inputName", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaExpanded: { classPropertyName: "ariaExpanded", publicName: "ariaExpanded", isSignal: true, isRequired: false, transformFunction: null }, ariaControls: { classPropertyName: "ariaControls", publicName: "ariaControls", isSignal: true, isRequired: false, transformFunction: null }, ariaActivedescendant: { classPropertyName: "ariaActivedescendant", publicName: "ariaActivedescendant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["field"], descendants: true, isSignal: true }], ngImport: i0, template: "<uni-input-box>\n <ng-content select=\"[pre-input]\" />\n <input\n #field\n [class]=\"inputClass\"\n type=\"text\"\n [name]=\"inputName()\"\n [id]=\"inputId()\"\n [value]=\"value() ?? ''\"\n (input)=\"handleInput($event)\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"label() || null\"\n [attr.role]=\"role() || null\"\n [attr.aria-expanded]=\"ariaExpanded() ?? null\"\n [attr.aria-controls]=\"ariaControls() || null\"\n [attr.aria-activedescendant]=\"ariaActivedescendant() || null\"\n [attr.aria-autocomplete]=\"role() === 'combobox' ? 'list' : null\"\n />\n <ng-content select=\"[post-input]\" />\n</uni-input-box>\n", dependencies: [{ kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3379
4028
|
}
|
|
3380
4029
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDebounceInputComponent, decorators: [{
|
|
3381
4030
|
type: Component,
|
|
3382
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '
|
|
3383
|
-
}], ctorParameters: () => [], propDecorators: { inputName: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputName", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], change: [{ type: i0.Output, args: ["change"] }] } });
|
|
3384
|
-
|
|
3385
|
-
class UniInputBoxComponent extends BaseComponent {
|
|
3386
|
-
className = css({ display: 'contents' });
|
|
3387
|
-
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
3388
|
-
error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
3389
|
-
minWidth = input('0', ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
|
|
3390
|
-
color = computed(() => this.error() ? this.componentOptions().errorColor : this.componentOptions().color, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
3391
|
-
border = computed(() => this.error() ? this.componentOptions().errorBorder : this.componentOptions().border, ...(ngDevMode ? [{ debugName: "border" }] : /* istanbul ignore next */ []));
|
|
3392
|
-
shadow = computed(() => this.error() ? this.componentOptions().errorShadow : this.componentOptions().shadow, ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
|
|
3393
|
-
inputBoxClass = computed(() => css([
|
|
3394
|
-
this.disabled() && {
|
|
3395
|
-
...this.theme.color(this.componentOptions().disabledTextColor),
|
|
3396
|
-
...this.theme.backgroundColor(this.componentOptions().disabledColor),
|
|
3397
|
-
cursor: 'not-allowed !important',
|
|
3398
|
-
},
|
|
3399
|
-
{
|
|
3400
|
-
'& input, select': {
|
|
3401
|
-
...removeInputPlatformStyling,
|
|
3402
|
-
height: '100%',
|
|
3403
|
-
...this.theme.paddingLeft(this.componentOptions().paddingLeft),
|
|
3404
|
-
...this.theme.color(this.componentOptions().textColor),
|
|
3405
|
-
...this.theme.typeface(this.componentOptions().typeFace),
|
|
3406
|
-
},
|
|
3407
|
-
'&:has(input:disabled, select:disabled)': {
|
|
3408
|
-
...this.theme.color(this.componentOptions().disabledTextColor),
|
|
3409
|
-
...this.theme.backgroundColor(this.componentOptions().disabledColor),
|
|
3410
|
-
},
|
|
3411
|
-
'& input:disabled, select:disabled': {
|
|
3412
|
-
cursor: 'not-allowed !important',
|
|
3413
|
-
},
|
|
3414
|
-
'&:has(input:focus, select:focus)': {
|
|
3415
|
-
outline: this.componentOptions().focusOutline,
|
|
3416
|
-
outlineOffset: this.componentOptions().focusOutlineOffset,
|
|
3417
|
-
},
|
|
3418
|
-
},
|
|
3419
|
-
]), ...(ngDevMode ? [{ debugName: "inputBoxClass" }] : /* istanbul ignore next */ []));
|
|
3420
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniInputBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3421
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniInputBoxComponent, isStandalone: true, selector: "uni-input-box", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'input' }], usesInheritance: true, ngImport: i0, template: "<div\n row-layout\n alignItems=\"center\"\n [height]=\"componentOptions().height\"\n [color]=\"color()\"\n [border]=\"border()\"\n [borderRadius]=\"componentOptions().borderRadius\"\n [shadow]=\"shadow()\"\n [minWidth]=\"minWidth()\"\n [class]=\"inputBoxClass()\"\n position=\"relative\"\n>\n <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "div[uni-row-layout], Row, div[row-layout]", inputs: ["display", "flexDirection", "minWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3422
|
-
}
|
|
3423
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniInputBoxComponent, decorators: [{
|
|
3424
|
-
type: Component,
|
|
3425
|
-
args: [{ selector: 'uni-input-box', imports: [UniRowComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'input' }], host: { '[class]': 'className' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n row-layout\n alignItems=\"center\"\n [height]=\"componentOptions().height\"\n [color]=\"color()\"\n [border]=\"border()\"\n [borderRadius]=\"componentOptions().borderRadius\"\n [shadow]=\"shadow()\"\n [minWidth]=\"minWidth()\"\n [class]=\"inputBoxClass()\"\n position=\"relative\"\n>\n <ng-content></ng-content>\n</div>\n" }]
|
|
3426
|
-
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }] } });
|
|
4031
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-debounce-input', imports: [UniInputBoxComponent], template: "<uni-input-box>\n <ng-content select=\"[pre-input]\" />\n <input\n #field\n [class]=\"inputClass\"\n type=\"text\"\n [name]=\"inputName()\"\n [id]=\"inputId()\"\n [value]=\"value() ?? ''\"\n (input)=\"handleInput($event)\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"label() || null\"\n [attr.role]=\"role() || null\"\n [attr.aria-expanded]=\"ariaExpanded() ?? null\"\n [attr.aria-controls]=\"ariaControls() || null\"\n [attr.aria-activedescendant]=\"ariaActivedescendant() || null\"\n [attr.aria-autocomplete]=\"role() === 'combobox' ? 'list' : null\"\n />\n <ng-content select=\"[post-input]\" />\n</uni-input-box>\n" }]
|
|
4032
|
+
}], ctorParameters: () => [], propDecorators: { inputName: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputName", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaExpanded", required: false }] }], ariaControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaControls", required: false }] }], ariaActivedescendant: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaActivedescendant", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], inputElement: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
|
|
3427
4033
|
|
|
3428
4034
|
class UniInputComponent {
|
|
3429
4035
|
// --- REQUIRED SIGNALS (populated by FormValueControl) ---
|
|
@@ -3452,7 +4058,7 @@ class UniInputComponent {
|
|
|
3452
4058
|
}
|
|
3453
4059
|
inputClass = css({});
|
|
3454
4060
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3455
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniInputComponent, isStandalone: true, selector: "uni-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: "<uni-input-box [error]=\"showError()\">\n <ng-content select=\"pre-input\" />\n <input\n [value]=\"value()\"\n (input)=\"handleInput($event)\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n (blur)=\"markAsTouched()\"\n [class]=\"inputClass\"\n [attr.aria-label]=\"label()\"\n [attr.aria-invalid]=\"showError() ? true : null\"\n [attr.aria-required]=\"required() ? true : null\"\n [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n />\n <ng-content select=\"post-input\" />\n</uni-input-box>\n", dependencies: [{ kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4061
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniInputComponent, isStandalone: true, selector: "uni-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: "<uni-input-box [error]=\"showError()\">\n <ng-content select=\"pre-input\" />\n <input\n [value]=\"value()\"\n (input)=\"handleInput($event)\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n (blur)=\"markAsTouched()\"\n [class]=\"inputClass\"\n [attr.aria-label]=\"label()\"\n [attr.aria-invalid]=\"showError() ? true : null\"\n [attr.aria-required]=\"required() ? true : null\"\n [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n />\n <ng-content select=\"post-input\" />\n</uni-input-box>\n", dependencies: [{ kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3456
4062
|
}
|
|
3457
4063
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniInputComponent, decorators: [{
|
|
3458
4064
|
type: Component,
|
|
@@ -3523,17 +4129,17 @@ class UniMenuItemComponent extends UniBoxComponent {
|
|
|
3523
4129
|
this._elementRef.nativeElement.focus();
|
|
3524
4130
|
}
|
|
3525
4131
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3526
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMenuItemComponent, isStandalone: true, selector: "
|
|
4132
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMenuItemComponent, isStandalone: true, selector: "[uni-menu-item], [menu-item]", inputs: { display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, flexDirection: { classPropertyName: "flexDirection", publicName: "flexDirection", isSignal: true, isRequired: false, transformFunction: null }, alignItems: { classPropertyName: "alignItems", publicName: "alignItems", isSignal: true, isRequired: false, transformFunction: null }, paddingHorizontal: { classPropertyName: "paddingHorizontal", publicName: "paddingHorizontal", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, symbolName: { classPropertyName: "symbolName", publicName: "symbolName", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, hoverColor: { classPropertyName: "hoverColor", publicName: "hoverColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem", "tabindex": "-1" }, properties: { "attr.aria-disabled": "disabled() ? 'true' : null", "attr.aria-current": "active() ? 'true' : null", "class": "menuItemClassName()" } }, usesInheritance: true, ngImport: i0, template: "@let tpl = template();\n@let symbol = symbolName();\n@if (symbol) {\n <uni-symbol [name]=\"symbol\"></uni-symbol>\n}\n<div box-layout [grow]=\"1\">\n @if (tpl) {\n <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"context()\"></ng-container>\n } @else {\n <span uni-text=\"label\" display=\"block\" [nowrap]=\"true\">\n {{ label() }}\n </span>\n }\n</div>\n@if (active()) {\n <uni-symbol name=\"check\"></uni-symbol>\n}\n", styles: [":host.disabled{color:#ddd;pointer-events:none}\n"], dependencies: [{ kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3527
4133
|
}
|
|
3528
4134
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMenuItemComponent, decorators: [{
|
|
3529
4135
|
type: Component,
|
|
3530
|
-
args: [{ selector: '
|
|
4136
|
+
args: [{ selector: '[uni-menu-item], [menu-item]', imports: [UniTextComponent, UniSymbolComponent, UniBoxComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3531
4137
|
role: 'menuitem',
|
|
3532
4138
|
tabindex: '-1',
|
|
3533
4139
|
'[attr.aria-disabled]': "disabled() ? 'true' : null",
|
|
3534
4140
|
'[attr.aria-current]': "active() ? 'true' : null",
|
|
3535
4141
|
'[class]': 'menuItemClassName()',
|
|
3536
|
-
}, template: "@let tpl = template();\n@let symbol = symbolName();\n@if (symbol) {\n <
|
|
4142
|
+
}, template: "@let tpl = template();\n@let symbol = symbolName();\n@if (symbol) {\n <uni-symbol [name]=\"symbol\"></uni-symbol>\n}\n<div box-layout [grow]=\"1\">\n @if (tpl) {\n <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"context()\"></ng-container>\n } @else {\n <span uni-text=\"label\" display=\"block\" [nowrap]=\"true\">\n {{ label() }}\n </span>\n }\n</div>\n@if (active()) {\n <uni-symbol name=\"check\"></uni-symbol>\n}\n", styles: [":host.disabled{color:#ddd;pointer-events:none}\n"] }]
|
|
3537
4143
|
}], propDecorators: { display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], flexDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexDirection", required: false }] }], alignItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignItems", required: false }] }], paddingHorizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingHorizontal", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], symbolName: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolName", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], hoverColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverColor", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
3538
4144
|
|
|
3539
4145
|
class UniMenuComponent {
|
|
@@ -3639,7 +4245,7 @@ class UniMenuComponent {
|
|
|
3639
4245
|
}
|
|
3640
4246
|
}
|
|
3641
4247
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3642
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMenuComponent, isStandalone: true, selector: "
|
|
4248
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMenuComponent, isStandalone: true, selector: "uni-menu", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: true, transformFunction: null }, activeItem: { classPropertyName: "activeItem", publicName: "activeItem", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClicked: "menuItemClicked" }, host: { properties: { "class": "className()" } }, viewQueries: [{ propertyName: "itemComponents", predicate: UniMenuItemComponent, descendants: true, isSignal: true }, { propertyName: "dropdownComponent", first: true, predicate: UniDropdownComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
3643
4249
|
<!-- Keydown listens for arrow keys bubbling from the projected (focusable)
|
|
3644
4250
|
trigger; the wrapper itself must stay out of the tab order. -->
|
|
3645
4251
|
<!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->
|
|
@@ -3648,7 +4254,7 @@ class UniMenuComponent {
|
|
|
3648
4254
|
</div>
|
|
3649
4255
|
|
|
3650
4256
|
@if (menuItems()) {
|
|
3651
|
-
<
|
|
4257
|
+
<uni-dropdown
|
|
3652
4258
|
[trigger]="trigger"
|
|
3653
4259
|
[placement]="placement()"
|
|
3654
4260
|
ariaHasPopup="menu"
|
|
@@ -3674,14 +4280,14 @@ class UniMenuComponent {
|
|
|
3674
4280
|
></div>
|
|
3675
4281
|
}
|
|
3676
4282
|
</div>
|
|
3677
|
-
</
|
|
4283
|
+
</uni-dropdown>
|
|
3678
4284
|
}
|
|
3679
|
-
`, isInline: true, dependencies: [{ kind: "component", type: UniMenuItemComponent, selector: "
|
|
4285
|
+
`, isInline: true, dependencies: [{ kind: "component", type: UniMenuItemComponent, selector: "[uni-menu-item], [menu-item]", inputs: ["display", "flexDirection", "alignItems", "paddingHorizontal", "gap", "label", "template", "context", "symbolName", "active", "hoverColor", "disabled"] }, { kind: "component", type: UniDropdownComponent, selector: "uni-dropdown", inputs: ["trigger", "placement", "offset", "ariaHasPopup", "paddingVertical", "paddingHorizontal"], outputs: ["dropdownShowing", "dropdownHiding"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3680
4286
|
}
|
|
3681
4287
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMenuComponent, decorators: [{
|
|
3682
4288
|
type: Component,
|
|
3683
4289
|
args: [{
|
|
3684
|
-
selector: '
|
|
4290
|
+
selector: 'uni-menu',
|
|
3685
4291
|
imports: [UniMenuItemComponent, UniDropdownComponent],
|
|
3686
4292
|
changeDetection: ChangeDetectionStrategy.OnPush, // Crucial for zoneless
|
|
3687
4293
|
template: `
|
|
@@ -3693,7 +4299,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
3693
4299
|
</div>
|
|
3694
4300
|
|
|
3695
4301
|
@if (menuItems()) {
|
|
3696
|
-
<
|
|
4302
|
+
<uni-dropdown
|
|
3697
4303
|
[trigger]="trigger"
|
|
3698
4304
|
[placement]="placement()"
|
|
3699
4305
|
ariaHasPopup="menu"
|
|
@@ -3719,7 +4325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
3719
4325
|
></div>
|
|
3720
4326
|
}
|
|
3721
4327
|
</div>
|
|
3722
|
-
</
|
|
4328
|
+
</uni-dropdown>
|
|
3723
4329
|
}
|
|
3724
4330
|
`,
|
|
3725
4331
|
host: { '[class]': 'className()' },
|
|
@@ -3768,11 +4374,11 @@ class UniMultiSelectComponent {
|
|
|
3768
4374
|
width: '100%',
|
|
3769
4375
|
});
|
|
3770
4376
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3771
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMultiSelectComponent, isStandalone: true, selector: "uni-multi-select
|
|
4377
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMultiSelectComponent, isStandalone: true, selector: "uni-multi-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selections: { classPropertyName: "selections", publicName: "selections", isSignal: true, isRequired: false, transformFunction: null }, flexDirection: { classPropertyName: "flexDirection", publicName: "flexDirection", isSignal: true, isRequired: false, transformFunction: null }, checkboxGap: { classPropertyName: "checkboxGap", publicName: "checkboxGap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updates: "updates" }, host: { properties: { "class": "className" } }, ngImport: i0, template: "<div box-layout display=\"flex\" [flexDirection]=\"flexDirection()\" [gap]=\"checkboxGap()\">\n @for (option of options(); track option) {\n <div [class]=\"optionWrapper\">\n <uni-checkbox\n [label]=\"option.label\"\n [checked]=\"values().indexOf(option.value) > -1\"\n (checkedChange)=\"handleCheck($event, option.value)\"\n variant=\"primary\"\n >\n </uni-checkbox>\n </div>\n }\n</div>\n", dependencies: [{ kind: "component", type: UniCheckboxComponent, selector: "uni-checkbox", inputs: ["checked", "disabled", "touched", "invalid", "dirty", "required", "ariaDescribedBy", "label", "indeterminate"], outputs: ["checkedChange", "touchedChange", "indeterminateChange"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3772
4378
|
}
|
|
3773
4379
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMultiSelectComponent, decorators: [{
|
|
3774
4380
|
type: Component,
|
|
3775
|
-
args: [{ selector: 'uni-multi-select
|
|
4381
|
+
args: [{ selector: 'uni-multi-select', imports: [UniCheckboxComponent, UniBoxComponent], host: { '[class]': 'className' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div box-layout display=\"flex\" [flexDirection]=\"flexDirection()\" [gap]=\"checkboxGap()\">\n @for (option of options(); track option) {\n <div [class]=\"optionWrapper\">\n <uni-checkbox\n [label]=\"option.label\"\n [checked]=\"values().indexOf(option.value) > -1\"\n (checkedChange)=\"handleCheck($event, option.value)\"\n variant=\"primary\"\n >\n </uni-checkbox>\n </div>\n }\n</div>\n" }]
|
|
3776
4382
|
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], selections: [{ type: i0.Input, args: [{ isSignal: true, alias: "selections", required: false }] }], updates: [{ type: i0.Output, args: ["updates"] }], flexDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexDirection", required: false }] }], checkboxGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxGap", required: false }] }] } });
|
|
3777
4383
|
|
|
3778
4384
|
class UniMultiSelectDropdownComponent extends BaseComponent {
|
|
@@ -3872,11 +4478,11 @@ class UniMultiSelectDropdownComponent extends BaseComponent {
|
|
|
3872
4478
|
});
|
|
3873
4479
|
}
|
|
3874
4480
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMultiSelectDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3875
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMultiSelectDropdownComponent, isStandalone: true, selector: "uni-multi-select-dropdown
|
|
4481
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMultiSelectDropdownComponent, isStandalone: true, selector: "uni-multi-select-dropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { properties: { "class": "className" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'multiSelectDropdown' }], usesInheritance: true, ngImport: i0, template: "<button\n [class]=\"triggerClass\"\n #trigger\n [style.cursor]=\"disabled() ? 'default' : 'pointer'\"\n [attr.aria-required]=\"required() ? true : null\"\n [attr.aria-invalid]=\"showError() ? true : null\"\n [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n (click)=\"!disabled() && touched.set(true)\"\n>\n <uni-input-box [error]=\"showError()\" [disabled]=\"disabled()\">\n <div\n row-layout\n alignItems=\"center\"\n justifyContent=\"space-between\"\n [fullWidth]=\"true\"\n [minWidth]=\"0\"\n paddingLeft=\"sm\"\n >\n <span uni-text\n display=\"block\"\n [typeface]=\"componentOptions().textRole\"\n [color]=\"textColor()\"\n [ellipsis]=\"true\"\n [style.flex-grow]=\"1\"\n >{{ selectedLabelsText() }}</span>\n <uni-symbol name=\"keyboard_arrow_down\" [style.flex-shrink]=\"0\"></uni-symbol>\n </div>\n </uni-input-box>\n</button>\n<uni-dropdown\n #dropdown\n [trigger]=\"trigger\"\n ariaHasPopup=\"dialog\"\n (dropdownShowing)=\"$event && searchInput.focus()\"\n (dropdownHiding)=\"$event && trigger.focus()\"\n>\n <div box-layout gap=\"xs\" padding=\"xs\">\n <input\n #searchInput\n type=\"text\"\n [class]=\"searchInputClass()\"\n [value]=\"query()\"\n (input)=\"handleQueryInput($event)\"\n placeholder=\"Search...\"\n aria-label=\"Filter options\"\n (click)=\"$event.stopPropagation()\"\n [disabled]=\"disabled()\"\n />\n </div>\n\n <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n <div stack-layout gap=\"xs\" padding=\"xs\">\n @for (option of filteredOptions(); track option.value) {\n <uni-checkbox\n [label]=\"option.label\"\n [checked]=\"isOptionSelected(option)()\"\n (checkedChange)=\"toggleOption(option, $event)\"\n variant=\"primary\"\n [disabled]=\"disabled()\"\n >\n </uni-checkbox>\n }\n </div>\n\n <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n <div row-layout gap=\"xs\" justifyContent=\"space-around\" padding=\"xs\">\n <button text-button (click)=\"dropdown.hideDropdown()\" size=\"sm\" variant=\"ghost\">Done</button>\n </div>\n</uni-dropdown>\n", dependencies: [{ kind: "component", type: UniCheckboxComponent, selector: "uni-checkbox", inputs: ["checked", "disabled", "touched", "invalid", "dirty", "required", "ariaDescribedBy", "label", "indeterminate"], outputs: ["checkedChange", "touchedChange", "indeterminateChange"] }, { 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: UniDropdownComponent, selector: "uni-dropdown", inputs: ["trigger", "placement", "offset", "ariaHasPopup", "paddingVertical", "paddingHorizontal"], outputs: ["dropdownShowing", "dropdownHiding"] }, { kind: "component", type: UniStackComponent, selector: "[uni-stack-layout], [stack-layout]", inputs: ["display", "flexDirection", "minHeight"] }, { kind: "component", type: UniDividerComponent, selector: "uni-divider", inputs: ["orientation", "border"] }, { kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }, { kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: UniRowComponent, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3876
4482
|
}
|
|
3877
4483
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMultiSelectDropdownComponent, decorators: [{
|
|
3878
4484
|
type: Component,
|
|
3879
|
-
args: [{ selector: 'uni-multi-select-dropdown
|
|
4485
|
+
args: [{ selector: 'uni-multi-select-dropdown', imports: [
|
|
3880
4486
|
UniCheckboxComponent,
|
|
3881
4487
|
UniBoxComponent,
|
|
3882
4488
|
UniDropdownComponent,
|
|
@@ -3887,7 +4493,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
3887
4493
|
UniSymbolComponent,
|
|
3888
4494
|
UniRowComponent,
|
|
3889
4495
|
UniInputBoxComponent,
|
|
3890
|
-
], providers: [{ provide: COMPONENT_NAME, useValue: 'multiSelectDropdown' }], host: { '[class]': 'className' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n [class]=\"triggerClass\"\n #trigger\n [style.cursor]=\"disabled() ? 'default' : 'pointer'\"\n [attr.aria-required]=\"required() ? true : null\"\n [attr.aria-invalid]=\"showError() ? true : null\"\n [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n (click)=\"!disabled() && touched.set(true)\"\n>\n <uni-input-box [error]=\"showError()\" [disabled]=\"disabled()\">\n <div\n row-layout\n alignItems=\"center\"\n justifyContent=\"space-between\"\n [fullWidth]=\"true\"\n [minWidth]=\"0\"\n paddingLeft=\"sm\"\n >\n <
|
|
4496
|
+
], providers: [{ provide: COMPONENT_NAME, useValue: 'multiSelectDropdown' }], host: { '[class]': 'className' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n [class]=\"triggerClass\"\n #trigger\n [style.cursor]=\"disabled() ? 'default' : 'pointer'\"\n [attr.aria-required]=\"required() ? true : null\"\n [attr.aria-invalid]=\"showError() ? true : null\"\n [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n (click)=\"!disabled() && touched.set(true)\"\n>\n <uni-input-box [error]=\"showError()\" [disabled]=\"disabled()\">\n <div\n row-layout\n alignItems=\"center\"\n justifyContent=\"space-between\"\n [fullWidth]=\"true\"\n [minWidth]=\"0\"\n paddingLeft=\"sm\"\n >\n <span uni-text\n display=\"block\"\n [typeface]=\"componentOptions().textRole\"\n [color]=\"textColor()\"\n [ellipsis]=\"true\"\n [style.flex-grow]=\"1\"\n >{{ selectedLabelsText() }}</span>\n <uni-symbol name=\"keyboard_arrow_down\" [style.flex-shrink]=\"0\"></uni-symbol>\n </div>\n </uni-input-box>\n</button>\n<uni-dropdown\n #dropdown\n [trigger]=\"trigger\"\n ariaHasPopup=\"dialog\"\n (dropdownShowing)=\"$event && searchInput.focus()\"\n (dropdownHiding)=\"$event && trigger.focus()\"\n>\n <div box-layout gap=\"xs\" padding=\"xs\">\n <input\n #searchInput\n type=\"text\"\n [class]=\"searchInputClass()\"\n [value]=\"query()\"\n (input)=\"handleQueryInput($event)\"\n placeholder=\"Search...\"\n aria-label=\"Filter options\"\n (click)=\"$event.stopPropagation()\"\n [disabled]=\"disabled()\"\n />\n </div>\n\n <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n <div stack-layout gap=\"xs\" padding=\"xs\">\n @for (option of filteredOptions(); track option.value) {\n <uni-checkbox\n [label]=\"option.label\"\n [checked]=\"isOptionSelected(option)()\"\n (checkedChange)=\"toggleOption(option, $event)\"\n variant=\"primary\"\n [disabled]=\"disabled()\"\n >\n </uni-checkbox>\n }\n </div>\n\n <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n <div row-layout gap=\"xs\" justifyContent=\"space-around\" padding=\"xs\">\n <button text-button (click)=\"dropdown.hideDropdown()\" size=\"sm\" variant=\"ghost\">Done</button>\n </div>\n</uni-dropdown>\n" }]
|
|
3891
4497
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
|
|
3892
4498
|
|
|
3893
4499
|
class UniNotificationBadgeComponent extends BaseComponent {
|
|
@@ -3982,11 +4588,11 @@ class UniNotificationBadgeComponent extends BaseComponent {
|
|
|
3982
4588
|
});
|
|
3983
4589
|
}, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
3984
4590
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniNotificationBadgeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3985
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniNotificationBadgeComponent, isStandalone: true, selector: "uni-notification-badge", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, maxCount: { classPropertyName: "maxCount", publicName: "maxCount", isSignal: true, isRequired: false, transformFunction: null }, badgeVariant: { classPropertyName: "badgeVariant", publicName: "badgeVariant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'notificationBadge' }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n@if (shouldShow()) {\n<div class=\"notification-badge-indicator\" aria-hidden=\"true\">\n <uni-text\n typeface=\"overline\"\n align=\"center\"\n [style.max-width]=\"badgeVariant() !== 'pill' ? (displayValue().length * 5 + 'px') : ''\"\n >{{ displayValue() }}</
|
|
4591
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniNotificationBadgeComponent, isStandalone: true, selector: "uni-notification-badge", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, maxCount: { classPropertyName: "maxCount", publicName: "maxCount", isSignal: true, isRequired: false, transformFunction: null }, badgeVariant: { classPropertyName: "badgeVariant", publicName: "badgeVariant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'notificationBadge' }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n@if (shouldShow()) {\n<div class=\"notification-badge-indicator\" aria-hidden=\"true\">\n <span uni-text\n typeface=\"overline\"\n align=\"center\"\n [style.max-width]=\"badgeVariant() !== 'pill' ? (displayValue().length * 5 + 'px') : ''\"\n >{{ displayValue() }}</span>\n</div>\n<span [class]=\"srOnlyClass\">{{ announcement() }}</span>\n}\n", dependencies: [{ kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3986
4592
|
}
|
|
3987
4593
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniNotificationBadgeComponent, decorators: [{
|
|
3988
4594
|
type: Component,
|
|
3989
|
-
args: [{ selector: 'uni-notification-badge', imports: [UniTextComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'notificationBadge' }], host: { '[class]': 'className()' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n@if (shouldShow()) {\n<div class=\"notification-badge-indicator\" aria-hidden=\"true\">\n <uni-text\n typeface=\"overline\"\n align=\"center\"\n [style.max-width]=\"badgeVariant() !== 'pill' ? (displayValue().length * 5 + 'px') : ''\"\n >{{ displayValue() }}</
|
|
4595
|
+
args: [{ selector: 'uni-notification-badge', imports: [UniTextComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'notificationBadge' }], host: { '[class]': 'className()' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n@if (shouldShow()) {\n<div class=\"notification-badge-indicator\" aria-hidden=\"true\">\n <span uni-text\n typeface=\"overline\"\n align=\"center\"\n [style.max-width]=\"badgeVariant() !== 'pill' ? (displayValue().length * 5 + 'px') : ''\"\n >{{ displayValue() }}</span>\n</div>\n<span [class]=\"srOnlyClass\">{{ announcement() }}</span>\n}\n" }]
|
|
3990
4596
|
}], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], maxCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCount", required: false }] }], badgeVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeVariant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
3991
4597
|
|
|
3992
4598
|
class UniAlertComponent extends BaseComponent {
|
|
@@ -4055,18 +4661,18 @@ class UniAlertComponent extends BaseComponent {
|
|
|
4055
4661
|
}
|
|
4056
4662
|
effectiveIconName = computed(() => this.iconName(), ...(ngDevMode ? [{ debugName: "effectiveIconName" }] : /* istanbul ignore next */ []));
|
|
4057
4663
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4058
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniAlertComponent, isStandalone: true, selector: "uni-alert
|
|
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 });
|
|
4059
4665
|
}
|
|
4060
4666
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniAlertComponent, decorators: [{
|
|
4061
4667
|
type: Component,
|
|
4062
|
-
args: [{ selector: 'uni-alert
|
|
4668
|
+
args: [{ selector: 'uni-alert', imports: [
|
|
4063
4669
|
UniRowComponent,
|
|
4064
4670
|
UniIconButtonComponent,
|
|
4065
4671
|
UniTextComponent,
|
|
4066
4672
|
UniBoxComponent,
|
|
4067
4673
|
UniIconComponent,
|
|
4068
4674
|
UniSymbolComponent,
|
|
4069
|
-
], providers: [{ provide: COMPONENT_NAME, useValue: 'alert' }], changeDetection: ChangeDetectionStrategy.OnPush, 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 <
|
|
4675
|
+
], providers: [{ provide: COMPONENT_NAME, useValue: 'alert' }], changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
|
|
4070
4676
|
}], ctorParameters: () => [], propDecorators: { show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }, { type: i0.Output, args: ["showChange"] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], symbolName: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolName", required: false }] }], useVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "useVariant", required: false }] }], showing: [{ type: i0.Output, args: ["showing"] }], alertRef: [{
|
|
4071
4677
|
type: ViewChild,
|
|
4072
4678
|
args: ['alert']
|
|
@@ -4077,17 +4683,17 @@ class ConfirmationDialogComponent {
|
|
|
4077
4683
|
confirmation = input(...(ngDevMode ? [undefined, { debugName: "confirmation" }] : /* istanbul ignore next */ []));
|
|
4078
4684
|
showing = output();
|
|
4079
4685
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4080
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: ConfirmationDialogComponent, isStandalone: true, selector: "uni-confirmation-dialog
|
|
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 });
|
|
4081
4687
|
}
|
|
4082
4688
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
|
|
4083
4689
|
type: Component,
|
|
4084
|
-
args: [{ selector: 'uni-confirmation-dialog
|
|
4690
|
+
args: [{ selector: 'uni-confirmation-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
4085
4691
|
UniDialogComponent,
|
|
4086
4692
|
UniDialogHeaderComponent,
|
|
4087
4693
|
UniBoxComponent,
|
|
4088
4694
|
UniTextComponent,
|
|
4089
4695
|
UniDialogButtonsComponent,
|
|
4090
|
-
], 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 <
|
|
4696
|
+
], 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" }]
|
|
4091
4697
|
}], propDecorators: { show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }], confirmation: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmation", required: false }] }], showing: [{ type: i0.Output, args: ["showing"] }] } });
|
|
4092
4698
|
|
|
4093
4699
|
class UniSnackbarComponent extends BaseComponent {
|
|
@@ -4174,11 +4780,11 @@ class UniSnackbarComponent extends BaseComponent {
|
|
|
4174
4780
|
this.timer.resume();
|
|
4175
4781
|
}
|
|
4176
4782
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4177
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniSnackbarComponent, isStandalone: true, selector: "uni-snackbar
|
|
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 });
|
|
4178
4784
|
}
|
|
4179
4785
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSnackbarComponent, decorators: [{
|
|
4180
4786
|
type: Component,
|
|
4181
|
-
args: [{ selector: 'uni-snackbar
|
|
4787
|
+
args: [{ selector: 'uni-snackbar', imports: [
|
|
4182
4788
|
UniRowComponent,
|
|
4183
4789
|
UniBoxComponent,
|
|
4184
4790
|
UniTextComponent,
|
|
@@ -4186,7 +4792,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
4186
4792
|
UniSymbolComponent,
|
|
4187
4793
|
UniIconComponent,
|
|
4188
4794
|
UniButtonComponent,
|
|
4189
|
-
], providers: [{ provide: COMPONENT_NAME, useValue: 'snackbar' }], changeDetection: ChangeDetectionStrategy.OnPush, 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 <
|
|
4795
|
+
], providers: [{ provide: COMPONENT_NAME, useValue: 'snackbar' }], changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
|
|
4190
4796
|
}], ctorParameters: () => [], propDecorators: { show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }, { type: i0.Output, args: ["showChange"] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], symbolName: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolName", required: false }] }], timeout: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeout", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], useVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "useVariant", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], showing: [{ type: i0.Output, args: ["showing"] }], snackbarRef: [{ type: i0.ViewChild, args: ['snackbar', { isSignal: true }] }] } });
|
|
4191
4797
|
|
|
4192
4798
|
class NotificationsComponent {
|
|
@@ -4226,11 +4832,11 @@ class NotificationsComponent {
|
|
|
4226
4832
|
this.notifications.hideAlert();
|
|
4227
4833
|
}
|
|
4228
4834
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: NotificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4229
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: NotificationsComponent, isStandalone: true, selector: "uni-notifications
|
|
4835
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: NotificationsComponent, isStandalone: true, selector: "uni-notifications", ngImport: i0, template: "<uni-alert\n [show]=\"showAlert()\"\n (showing)=\"handleAlertShowingEvent($event)\"\n [variant]=\"alert()?.variant || 'primary'\"\n [iconName]=\"alert()?.iconName\"\n [symbolName]=\"alert()?.symbolName\"\n >{{ alert()?.message }}</uni-alert>\n\n<uni-snackbar\n [show]=\"showSnackbar()\"\n (showing)=\"handleSnackbarShowingEvent($event)\"\n [variant]=\"snackbar()?.variant || 'primary'\"\n [actionLabel]=\"snackbar()?.actionLabel\"\n (action)=\"snackbar()?.action?.()\"\n [timeout]=\"snackbar()?.timeout\"\n [iconName]=\"snackbar()?.iconName\"\n [symbolName]=\"snackbar()?.symbolName\"\n >{{ snackbar()?.message }}</uni-snackbar>\n\n<uni-confirmation-dialog\n [show]=\"showConfirmation()\"\n (showing)=\"handleConfirmationShowingEvent($event)\"\n [confirmation]=\"confirmation()\"\n></uni-confirmation-dialog>\n", dependencies: [{ kind: "component", type: UniAlertComponent, selector: "uni-alert", inputs: ["show", "iconName", "symbolName", "useVariant"], outputs: ["showChange", "showing"] }, { kind: "component", type: UniSnackbarComponent, selector: "uni-snackbar", inputs: ["show", "iconName", "symbolName", "timeout", "actionLabel", "useVariant"], outputs: ["showChange", "action", "showing"] }, { kind: "component", type: ConfirmationDialogComponent, selector: "uni-confirmation-dialog", inputs: ["show", "confirmation"], outputs: ["showing"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4230
4836
|
}
|
|
4231
4837
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: NotificationsComponent, decorators: [{
|
|
4232
4838
|
type: Component,
|
|
4233
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-notifications
|
|
4839
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-notifications', imports: [UniAlertComponent, UniSnackbarComponent, ConfirmationDialogComponent], template: "<uni-alert\n [show]=\"showAlert()\"\n (showing)=\"handleAlertShowingEvent($event)\"\n [variant]=\"alert()?.variant || 'primary'\"\n [iconName]=\"alert()?.iconName\"\n [symbolName]=\"alert()?.symbolName\"\n >{{ alert()?.message }}</uni-alert>\n\n<uni-snackbar\n [show]=\"showSnackbar()\"\n (showing)=\"handleSnackbarShowingEvent($event)\"\n [variant]=\"snackbar()?.variant || 'primary'\"\n [actionLabel]=\"snackbar()?.actionLabel\"\n (action)=\"snackbar()?.action?.()\"\n [timeout]=\"snackbar()?.timeout\"\n [iconName]=\"snackbar()?.iconName\"\n [symbolName]=\"snackbar()?.symbolName\"\n >{{ snackbar()?.message }}</uni-snackbar>\n\n<uni-confirmation-dialog\n [show]=\"showConfirmation()\"\n (showing)=\"handleConfirmationShowingEvent($event)\"\n [confirmation]=\"confirmation()\"\n></uni-confirmation-dialog>\n" }]
|
|
4234
4840
|
}], ctorParameters: () => [] });
|
|
4235
4841
|
|
|
4236
4842
|
class UniPaginatorComponent extends BaseComponent {
|
|
@@ -4301,14 +4907,14 @@ class UniPaginatorComponent extends BaseComponent {
|
|
|
4301
4907
|
return typeof page === 'number';
|
|
4302
4908
|
}
|
|
4303
4909
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4304
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniPaginatorComponent, isStandalone: true, selector: "uni-paginator
|
|
4910
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniPaginatorComponent, isStandalone: true, selector: "uni-paginator", inputs: { datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: false, transformFunction: null }, initPageSize: { classPropertyName: "initPageSize", publicName: "initPageSize", isSignal: true, isRequired: false, transformFunction: null }, showPageSize: { classPropertyName: "showPageSize", publicName: "showPageSize", isSignal: true, isRequired: false, transformFunction: null }, showPageJumper: { classPropertyName: "showPageJumper", publicName: "showPageJumper", isSignal: true, isRequired: false, transformFunction: null }, showPageNumbers: { classPropertyName: "showPageNumbers", publicName: "showPageNumbers", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation", "aria-label": "Pagination" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'paginator' }], usesInheritance: true, ngImport: i0, template: "@let ds = datasource();\n@if (ds) {\n <div row-layout alignItems=\"center\" [gap]=\"componentOptions().gap\">\n @if (showPageSize()) {\n <div row-layout alignItems=\"center\" gap=\"sm\" paddingRight=\"sm\">\n <span uni-text [typeface]=\"componentOptions().textRole\">Show</span>\n <input\n type=\"number\"\n aria-label=\"Items per page\"\n [class]=\"inputClass()\"\n (change)=\"updatePageSize($event)\"\n min=\"1\"\n [max]=\"ds.recordCount()\"\n [value]=\"ds.pageSize()\"\n />\n </div>\n }\n\n @if (showPageNumbers()) {\n <button\n icon-button\n variant=\"ghost\"\n size=\"md\"\n symbolName=\"keyboard_double_arrow_left\"\n (click)=\"ds.firstPage()\"\n [disable]=\"ds.disablePrevious()\"\n >\n First Page\n </button>\n\n <button\n icon-button\n variant=\"ghost\"\n size=\"md\"\n symbolName=\"chevron_left\"\n (click)=\"ds.previousPage()\"\n [disable]=\"ds.disablePrevious()\"\n >\n Previous Page\n </button>\n\n @for (page of ds.truncatedPages(); track page) {\n @if (isNumber(page)) {\n <button\n type=\"button\"\n [class]=\"pageClass()\"\n [class.current]=\"page === ds.pageIndex() + 1\"\n [attr.aria-label]=\"'Page ' + page\"\n [attr.aria-current]=\"page === ds.pageIndex() + 1 ? 'page' : null\"\n (click)=\"ds.jumpToPage(page)\"\n >\n <span uni-text [typeface]=\"componentOptions().textRole\" display=\"block\">\n {{ page }}\n </span>\n </button>\n } @else {\n <div>\n <span uni-text [typeface]=\"componentOptions().textRole\" display=\"block\">\n {{ page }}\n </span>\n </div>\n }\n }\n\n <button\n icon-button\n variant=\"ghost\"\n size=\"md\"\n symbolName=\"chevron_right\"\n (click)=\"ds.nextPage()\"\n [disable]=\"ds.disableNext()\"\n >\n Next Page\n </button>\n\n <button\n icon-button\n variant=\"ghost\"\n size=\"md\"\n symbolName=\"keyboard_double_arrow_right\"\n (click)=\"ds.lastPage()\"\n [disable]=\"ds.disableNext()\"\n >\n Last Page\n </button>\n }\n\n @if (showPageJumper()) {\n <div row-layout alignItems=\"center\" gap=\"sm\" paddingLeft=\"sm\">\n <span uni-text [typeface]=\"componentOptions().textRole\">Jump to</span>\n <input\n type=\"number\"\n aria-label=\"Jump to page\"\n [class]=\"inputClass()\"\n (change)=\"jumpToPage($event)\"\n min=\"1\"\n [max]=\"ds.pageCount()\"\n [value]=\"ds.pageIndex() + 1\"\n />\n </div>\n }\n </div>\n}\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "[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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4305
4911
|
}
|
|
4306
4912
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniPaginatorComponent, decorators: [{
|
|
4307
4913
|
type: Component,
|
|
4308
|
-
args: [{ selector: 'uni-paginator
|
|
4914
|
+
args: [{ selector: 'uni-paginator', imports: [UniRowComponent, UniIconButtonComponent, UniTextComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'paginator' }], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
4309
4915
|
role: 'navigation',
|
|
4310
4916
|
'aria-label': 'Pagination',
|
|
4311
|
-
}, template: "@let ds = datasource();\n@if (ds) {\n <div row-layout alignItems=\"center\" [gap]=\"componentOptions().gap\">\n @if (showPageSize()) {\n <div row-layout alignItems=\"center\" gap=\"sm\" paddingRight=\"sm\">\n <
|
|
4917
|
+
}, template: "@let ds = datasource();\n@if (ds) {\n <div row-layout alignItems=\"center\" [gap]=\"componentOptions().gap\">\n @if (showPageSize()) {\n <div row-layout alignItems=\"center\" gap=\"sm\" paddingRight=\"sm\">\n <span uni-text [typeface]=\"componentOptions().textRole\">Show</span>\n <input\n type=\"number\"\n aria-label=\"Items per page\"\n [class]=\"inputClass()\"\n (change)=\"updatePageSize($event)\"\n min=\"1\"\n [max]=\"ds.recordCount()\"\n [value]=\"ds.pageSize()\"\n />\n </div>\n }\n\n @if (showPageNumbers()) {\n <button\n icon-button\n variant=\"ghost\"\n size=\"md\"\n symbolName=\"keyboard_double_arrow_left\"\n (click)=\"ds.firstPage()\"\n [disable]=\"ds.disablePrevious()\"\n >\n First Page\n </button>\n\n <button\n icon-button\n variant=\"ghost\"\n size=\"md\"\n symbolName=\"chevron_left\"\n (click)=\"ds.previousPage()\"\n [disable]=\"ds.disablePrevious()\"\n >\n Previous Page\n </button>\n\n @for (page of ds.truncatedPages(); track page) {\n @if (isNumber(page)) {\n <button\n type=\"button\"\n [class]=\"pageClass()\"\n [class.current]=\"page === ds.pageIndex() + 1\"\n [attr.aria-label]=\"'Page ' + page\"\n [attr.aria-current]=\"page === ds.pageIndex() + 1 ? 'page' : null\"\n (click)=\"ds.jumpToPage(page)\"\n >\n <span uni-text [typeface]=\"componentOptions().textRole\" display=\"block\">\n {{ page }}\n </span>\n </button>\n } @else {\n <div>\n <span uni-text [typeface]=\"componentOptions().textRole\" display=\"block\">\n {{ page }}\n </span>\n </div>\n }\n }\n\n <button\n icon-button\n variant=\"ghost\"\n size=\"md\"\n symbolName=\"chevron_right\"\n (click)=\"ds.nextPage()\"\n [disable]=\"ds.disableNext()\"\n >\n Next Page\n </button>\n\n <button\n icon-button\n variant=\"ghost\"\n size=\"md\"\n symbolName=\"keyboard_double_arrow_right\"\n (click)=\"ds.lastPage()\"\n [disable]=\"ds.disableNext()\"\n >\n Last Page\n </button>\n }\n\n @if (showPageJumper()) {\n <div row-layout alignItems=\"center\" gap=\"sm\" paddingLeft=\"sm\">\n <span uni-text [typeface]=\"componentOptions().textRole\">Jump to</span>\n <input\n type=\"number\"\n aria-label=\"Jump to page\"\n [class]=\"inputClass()\"\n (change)=\"jumpToPage($event)\"\n min=\"1\"\n [max]=\"ds.pageCount()\"\n [value]=\"ds.pageIndex() + 1\"\n />\n </div>\n }\n </div>\n}\n" }]
|
|
4312
4918
|
}], ctorParameters: () => [], propDecorators: { datasource: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasource", required: false }] }], initPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "initPageSize", required: false }] }], showPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSize", required: false }] }], showPageJumper: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageJumper", required: false }] }], showPageNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageNumbers", required: false }] }] } });
|
|
4313
4919
|
|
|
4314
4920
|
/**
|
|
@@ -4402,11 +5008,11 @@ class UniPopoverComponent {
|
|
|
4402
5008
|
});
|
|
4403
5009
|
}, ...(ngDevMode ? [{ debugName: "arrowClassName" }] : /* istanbul ignore next */ []));
|
|
4404
5010
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4405
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: UniPopoverComponent, isStandalone: true, selector: "uni-popover
|
|
5011
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: UniPopoverComponent, isStandalone: true, selector: "uni-popover", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Click bubbles up from the projected [trigger] content, which is expected\n to be focusable (a button); keyboard activation arrives as a click. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<span #trigger (click)=\"togglePopover($event)\" [class]=\"triggerClassName\">\n <ng-content select=\"[trigger]\"></ng-content>\n</span>\n<div\n #panel\n [id]=\"panelId\"\n [attr.popover]=\"autoClose() ? 'auto' : 'manual'\"\n [class]=\"popoverClassName()\"\n (toggle)=\"onToggle($event)\"\n>\n <ng-content></ng-content>\n <span [class]=\"arrowClassName()\"></span>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4406
5012
|
}
|
|
4407
5013
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniPopoverComponent, decorators: [{
|
|
4408
5014
|
type: Component,
|
|
4409
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-popover
|
|
5015
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-popover', imports: [], template: "<!-- Click bubbles up from the projected [trigger] content, which is expected\n to be focusable (a button); keyboard activation arrives as a click. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<span #trigger (click)=\"togglePopover($event)\" [class]=\"triggerClassName\">\n <ng-content select=\"[trigger]\"></ng-content>\n</span>\n<div\n #panel\n [id]=\"panelId\"\n [attr.popover]=\"autoClose() ? 'auto' : 'manual'\"\n [class]=\"popoverClassName()\"\n (toggle)=\"onToggle($event)\"\n>\n <ng-content></ng-content>\n <span [class]=\"arrowClassName()\"></span>\n</div>\n" }]
|
|
4410
5016
|
}], ctorParameters: () => [], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], autoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClose", required: false }] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
|
|
4411
5017
|
|
|
4412
5018
|
/**
|
|
@@ -4429,11 +5035,11 @@ class UniProgressBarComponent {
|
|
|
4429
5035
|
}, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
4430
5036
|
Math = Math;
|
|
4431
5037
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4432
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniProgressBarComponent, isStandalone: true, selector: "uni-progress-bar
|
|
5038
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniProgressBarComponent, isStandalone: true, selector: "uni-progress-bar", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, percent: { classPropertyName: "percent", publicName: "percent", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar", "aria-valuemin": "0", "aria-valuemax": "100" }, properties: { "class": "className()", "attr.aria-valuenow": "percent()", "attr.aria-label": "ariaLabel() || 'Progress'" } }, ngImport: i0, template: "<svg aria-hidden=\"true\" [attr.width]=\"width()\" [attr.height]=\"height()\">\n <rect\n [attr.x]=\"stroke\"\n [attr.y]=\"stroke\"\n [attr.width]=\"width() - stroke * 2\"\n [attr.height]=\"height() - stroke * 2\"\n [attr.fill]=\"palette()['primary-surface']\"\n [attr.stroke]=\"palette()['on-background-variant']\"\n [attr.stroke-width]=\"stroke\"\n [attr.ry]=\"height() / 2 - stroke\"\n [attr.rx]=\"height() / 2 - stroke\"\n />\n\n <rect\n [attr.x]=\"stroke\"\n [attr.y]=\"stroke\"\n [attr.width]=\"Math.max(height() - stroke * 2, (percent() / 100) * width() - stroke * 2)\"\n [attr.height]=\"height() - stroke * 2\"\n [attr.fill]=\"percent() === 100 ? palette()['secondary'] : palette()['secondary-surface']\"\n [attr.stroke]=\"palette()['on-background-variant']\"\n [attr.stroke-width]=\"stroke\"\n [attr.ry]=\"height() / 2 - stroke\"\n [attr.rx]=\"height() / 2 - stroke\"\n />\n</svg>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4433
5039
|
}
|
|
4434
5040
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniProgressBarComponent, decorators: [{
|
|
4435
5041
|
type: Component,
|
|
4436
|
-
args: [{ selector: 'uni-progress-bar
|
|
5042
|
+
args: [{ selector: 'uni-progress-bar', imports: [], host: {
|
|
4437
5043
|
'[class]': 'className()',
|
|
4438
5044
|
role: 'progressbar',
|
|
4439
5045
|
'aria-valuemin': '0',
|
|
@@ -4483,11 +5089,11 @@ class UniProgressGaugeComponent extends BaseComponent {
|
|
|
4483
5089
|
});
|
|
4484
5090
|
}, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
4485
5091
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniProgressGaugeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4486
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniProgressGaugeComponent, isStandalone: true, selector: "uni-progress-gauge
|
|
5092
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniProgressGaugeComponent, isStandalone: true, selector: "uni-progress-gauge", inputs: { percent: { classPropertyName: "percent", publicName: "percent", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar", "aria-valuemin": "0", "aria-valuemax": "100" }, properties: { "class": "className()", "attr.aria-valuenow": "percent()", "attr.aria-label": "ariaLabel() || 'Progress'" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'progressGauge' }], usesInheritance: true, ngImport: i0, template: "<svg\n viewBox=\"0 0 36 36\"\n class=\"circular-chart\"\n aria-hidden=\"true\"\n [style.height]=\"style()['height']\"\n>\n <path\n class=\"circle-bg\"\n [attr.stroke]=\"style()['backgroundColor']\"\n d=\"M18 2.0845\n a 15.9155 15.9155 0 0 1 0 31.831\n a 15.9155 15.9155 0 0 1 0 -31.831\"\n />\n <path\n class=\"circle\"\n [attr.stroke]=\"style()['color']\"\n [attr.stroke-dasharray]=\"percent() + ', 100'\"\n d=\"M18 2.0845\n a 15.9155 15.9155 0 0 1 0 31.831\n a 15.9155 15.9155 0 0 1 0 -31.831\"\n />\n <text x=\"18.5\" y=\"20.82\" class=\"percentage\" [style.fill]=\"textStyle()\">{{ percent() }}%</text>\n</svg>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4487
5093
|
}
|
|
4488
5094
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniProgressGaugeComponent, decorators: [{
|
|
4489
5095
|
type: Component,
|
|
4490
|
-
args: [{ selector: 'uni-progress-gauge
|
|
5096
|
+
args: [{ selector: 'uni-progress-gauge', imports: [], providers: [{ provide: COMPONENT_NAME, useValue: 'progressGauge' }], host: {
|
|
4491
5097
|
'[class]': 'className()',
|
|
4492
5098
|
role: 'progressbar',
|
|
4493
5099
|
'aria-valuemin': '0',
|
|
@@ -4556,10 +5162,12 @@ class UniRadioComponent extends BaseComponent {
|
|
|
4556
5162
|
width: outerCircleSize,
|
|
4557
5163
|
height: outerCircleSize,
|
|
4558
5164
|
borderRadius: '50%',
|
|
4559
|
-
border: `2px solid ${this.disabled()
|
|
5165
|
+
border: `2px solid ${this.disabled()
|
|
5166
|
+
? this.getThemeColor('on-disabled')
|
|
5167
|
+
: this.getThemeColor(this.componentOptions().ringColor ?? 'outline')}`,
|
|
4560
5168
|
position: 'relative',
|
|
4561
5169
|
transition: 'all 0.3s ease',
|
|
4562
|
-
backgroundColor: '
|
|
5170
|
+
backgroundColor: this.getThemeColor(this.componentOptions().fillColor ?? 'surface'),
|
|
4563
5171
|
flexShrink: 0,
|
|
4564
5172
|
},
|
|
4565
5173
|
'& .radio-inner': {
|
|
@@ -4582,7 +5190,7 @@ class UniRadioComponent extends BaseComponent {
|
|
|
4582
5190
|
cursor: 'not-allowed',
|
|
4583
5191
|
opacity: 0.6,
|
|
4584
5192
|
'& .radio-button': {
|
|
4585
|
-
borderColor: '
|
|
5193
|
+
borderColor: this.getThemeColor('on-disabled'),
|
|
4586
5194
|
},
|
|
4587
5195
|
},
|
|
4588
5196
|
});
|
|
@@ -4613,11 +5221,11 @@ class UniRadioComponent extends BaseComponent {
|
|
|
4613
5221
|
return colors[token] ? colors[token] : colors['primary'];
|
|
4614
5222
|
}
|
|
4615
5223
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4616
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniRadioComponent, isStandalone: true, selector: "uni-radio
|
|
5224
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniRadioComponent, isStandalone: true, selector: "uni-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, providers: [{ provide: COMPONENT_NAME, useValue: 'radio' }], usesInheritance: true, ngImport: i0, template: "<div\n [class]=\"radioGroupClass\"\n role=\"radiogroup\"\n [attr.aria-labelledby]=\"label() ? groupLabelId : null\"\n [attr.aria-invalid]=\"showError() ? true : null\"\n [attr.aria-required]=\"required() ? true : null\"\n [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n>\n @if (label()) {\n <span uni-text=\"label\" [attr.id]=\"groupLabelId\">{{ label() }}</span>\n }\n\n @for (option of options(); track option.value) {\n <label [class]=\"radioOptionClass()\" [class.disabled]=\"disabled() || option.disabled\">\n <input\n type=\"radio\"\n [class]=\"radioInputClass()\"\n [value]=\"option.value\"\n [name]=\"name()\"\n [checked]=\"value() === option.value\"\n [disabled]=\"disabled() || option.disabled\"\n (change)=\"handleRadioChange(option.value)\"\n />\n <div class=\"radio-button\">\n <div class=\"radio-inner\"></div>\n </div>\n <span uni-text=\"label\">{{ option.label }}</span>\n </label>\n }\n</div>\n", dependencies: [{ kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4617
5225
|
}
|
|
4618
5226
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniRadioComponent, decorators: [{
|
|
4619
5227
|
type: Component,
|
|
4620
|
-
args: [{ selector: 'uni-radio
|
|
5228
|
+
args: [{ selector: 'uni-radio', imports: [UniTextComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'radio' }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class]=\"radioGroupClass\"\n role=\"radiogroup\"\n [attr.aria-labelledby]=\"label() ? groupLabelId : null\"\n [attr.aria-invalid]=\"showError() ? true : null\"\n [attr.aria-required]=\"required() ? true : null\"\n [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n>\n @if (label()) {\n <span uni-text=\"label\" [attr.id]=\"groupLabelId\">{{ label() }}</span>\n }\n\n @for (option of options(); track option.value) {\n <label [class]=\"radioOptionClass()\" [class.disabled]=\"disabled() || option.disabled\">\n <input\n type=\"radio\"\n [class]=\"radioInputClass()\"\n [value]=\"option.value\"\n [name]=\"name()\"\n [checked]=\"value() === option.value\"\n [disabled]=\"disabled() || option.disabled\"\n (change)=\"handleRadioChange(option.value)\"\n />\n <div class=\"radio-button\">\n <div class=\"radio-inner\"></div>\n </div>\n <span uni-text=\"label\">{{ option.label }}</span>\n </label>\n }\n</div>\n" }]
|
|
4621
5229
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }] } });
|
|
4622
5230
|
|
|
4623
5231
|
/**
|
|
@@ -4626,35 +5234,143 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
4626
5234
|
* This file exports all public-facing elements of the scroll-area component.
|
|
4627
5235
|
*/
|
|
4628
5236
|
|
|
4629
|
-
|
|
5237
|
+
/**
|
|
5238
|
+
* Generic search field: shared input chrome with a leading magnifier, a clear
|
|
5239
|
+
* button while there's a query, Enter to submit, and optional type-ahead —
|
|
5240
|
+
* pass `suggestions` (refresh them from `change`) and the field becomes an
|
|
5241
|
+
* ARIA combobox with a keyboard-navigable listbox. Escape closes the list
|
|
5242
|
+
* first, then clears the query.
|
|
5243
|
+
*/
|
|
5244
|
+
class UniSearchInputComponent extends BaseComponent {
|
|
5245
|
+
/** Accessible name for the field, also the placeholder fallback. */
|
|
4630
5246
|
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
5247
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
4631
5248
|
width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
5249
|
+
debounceTime = input(400, ...(ngDevMode ? [{ debugName: "debounceTime" }] : /* istanbul ignore next */ []));
|
|
5250
|
+
/**
|
|
5251
|
+
* Type-ahead entries. Keep them fresh from `change` emissions; the list
|
|
5252
|
+
* shows while the field has focus and entries exist.
|
|
5253
|
+
*/
|
|
5254
|
+
suggestions = input([], ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
|
|
4632
5255
|
// TODO(v4): rename to searchChange/searchSubmit — renaming is breaking
|
|
4633
5256
|
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
4634
5257
|
change = output();
|
|
4635
5258
|
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
4636
5259
|
search = output();
|
|
4637
|
-
|
|
4638
|
-
|
|
4639
|
-
|
|
4640
|
-
|
|
4641
|
-
|
|
4642
|
-
|
|
4643
|
-
|
|
4644
|
-
}, ...(ngDevMode ? [{ debugName: "
|
|
4645
|
-
|
|
4646
|
-
|
|
5260
|
+
suggestionSelected = output();
|
|
5261
|
+
field = viewChild.required(UniDebounceInputComponent);
|
|
5262
|
+
listboxId = uniqueId('uni-search-listbox');
|
|
5263
|
+
listOpen = signal(false, ...(ngDevMode ? [{ debugName: "listOpen" }] : /* istanbul ignore next */ []));
|
|
5264
|
+
activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
|
|
5265
|
+
visibleSuggestions = computed(() => this.suggestions().slice(0, this.componentOptions().maxSuggestions ?? 8), ...(ngDevMode ? [{ debugName: "visibleSuggestions" }] : /* istanbul ignore next */ []));
|
|
5266
|
+
showList = computed(() => this.listOpen() && this.visibleSuggestions().length > 0, ...(ngDevMode ? [{ debugName: "showList" }] : /* istanbul ignore next */ []));
|
|
5267
|
+
activeOptionId = computed(() => this.activeIndex() >= 0 ? `${this.listboxId}-${this.activeIndex()}` : undefined, ...(ngDevMode ? [{ debugName: "activeOptionId" }] : /* istanbul ignore next */ []));
|
|
5268
|
+
hasQuery = computed(() => !!this.field()?.value(), ...(ngDevMode ? [{ debugName: "hasQuery" }] : /* istanbul ignore next */ []));
|
|
5269
|
+
handleChange(value) {
|
|
5270
|
+
this.listOpen.set(true);
|
|
5271
|
+
this.activeIndex.set(-1);
|
|
5272
|
+
this.change.emit(value);
|
|
5273
|
+
}
|
|
5274
|
+
submit() {
|
|
5275
|
+
const active = this.activeIndex();
|
|
5276
|
+
if (this.showList() && active >= 0) {
|
|
5277
|
+
this.select(this.visibleSuggestions()[active]);
|
|
5278
|
+
return;
|
|
5279
|
+
}
|
|
5280
|
+
this.listOpen.set(false);
|
|
5281
|
+
this.search.emit(this.field().value() ?? '');
|
|
4647
5282
|
}
|
|
4648
|
-
|
|
4649
|
-
this.
|
|
5283
|
+
select(suggestion) {
|
|
5284
|
+
this.field().value.set(suggestion);
|
|
5285
|
+
this.listOpen.set(false);
|
|
5286
|
+
this.activeIndex.set(-1);
|
|
5287
|
+
this.suggestionSelected.emit(suggestion);
|
|
5288
|
+
this.search.emit(suggestion);
|
|
5289
|
+
}
|
|
5290
|
+
clear() {
|
|
5291
|
+
this.field().clear();
|
|
5292
|
+
this.listOpen.set(false);
|
|
5293
|
+
this.activeIndex.set(-1);
|
|
5294
|
+
this.field().focus();
|
|
4650
5295
|
}
|
|
4651
|
-
|
|
4652
|
-
|
|
5296
|
+
onKeydown(event) {
|
|
5297
|
+
switch (event.key) {
|
|
5298
|
+
case 'Enter':
|
|
5299
|
+
event.preventDefault();
|
|
5300
|
+
this.submit();
|
|
5301
|
+
break;
|
|
5302
|
+
case 'ArrowDown':
|
|
5303
|
+
case 'ArrowUp': {
|
|
5304
|
+
const count = this.visibleSuggestions().length;
|
|
5305
|
+
if (count === 0)
|
|
5306
|
+
return;
|
|
5307
|
+
event.preventDefault();
|
|
5308
|
+
this.listOpen.set(true);
|
|
5309
|
+
const delta = event.key === 'ArrowDown' ? 1 : -1;
|
|
5310
|
+
this.activeIndex.set((this.activeIndex() + delta + count) % count);
|
|
5311
|
+
break;
|
|
5312
|
+
}
|
|
5313
|
+
case 'Escape':
|
|
5314
|
+
if (this.showList())
|
|
5315
|
+
this.listOpen.set(false);
|
|
5316
|
+
else if (this.hasQuery())
|
|
5317
|
+
this.clear();
|
|
5318
|
+
break;
|
|
5319
|
+
}
|
|
5320
|
+
}
|
|
5321
|
+
onFocusOut(event) {
|
|
5322
|
+
// Close unless focus moved somewhere inside the component.
|
|
5323
|
+
const next = event.relatedTarget;
|
|
5324
|
+
if (!next || !event.currentTarget.contains(next)) {
|
|
5325
|
+
this.listOpen.set(false);
|
|
5326
|
+
}
|
|
5327
|
+
}
|
|
5328
|
+
className = computed(() => css({
|
|
5329
|
+
display: 'block',
|
|
5330
|
+
position: 'relative',
|
|
5331
|
+
width: this.width(),
|
|
5332
|
+
'& .uni-search-lead': {
|
|
5333
|
+
fontSize: 20,
|
|
5334
|
+
...this.theme.color('on-background-variant'),
|
|
5335
|
+
...this.theme.paddingLeft('sm'),
|
|
5336
|
+
},
|
|
5337
|
+
}), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
5338
|
+
listClass = computed(() => {
|
|
5339
|
+
const options = this.componentOptions();
|
|
5340
|
+
return css({
|
|
5341
|
+
position: 'absolute',
|
|
5342
|
+
top: '100%',
|
|
5343
|
+
left: 0,
|
|
5344
|
+
right: 0,
|
|
5345
|
+
zIndex: 20,
|
|
5346
|
+
margin: '4px 0 0',
|
|
5347
|
+
padding: 4,
|
|
5348
|
+
listStyle: 'none',
|
|
5349
|
+
maxHeight: 280,
|
|
5350
|
+
overflowY: 'auto',
|
|
5351
|
+
...this.theme.backgroundColor(options.listColor ?? 'primary-surface'),
|
|
5352
|
+
...this.theme.boxShadow(options.listShadow ?? 'menu'),
|
|
5353
|
+
...this.theme.radius(options.listBorderRadius ?? 'xs'),
|
|
5354
|
+
'& [role="option"]': {
|
|
5355
|
+
padding: '8px 12px',
|
|
5356
|
+
cursor: 'pointer',
|
|
5357
|
+
...this.theme.typeface('label'),
|
|
5358
|
+
...this.theme.color('on-primary-surface'),
|
|
5359
|
+
...this.theme.radius('xxs'),
|
|
5360
|
+
'&.active, &:hover': {
|
|
5361
|
+
...this.theme.backgroundColor('primary-container'),
|
|
5362
|
+
...this.theme.color('on-primary-container'),
|
|
5363
|
+
},
|
|
5364
|
+
},
|
|
5365
|
+
});
|
|
5366
|
+
}, ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
|
|
5367
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSearchInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5368
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniSearchInputComponent, isStandalone: true, selector: "uni-search-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", search: "search", suggestionSelected: "suggestionSelected" }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'searchInput' }], viewQueries: [{ propertyName: "field", first: true, predicate: UniDebounceInputComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Keydown/focusout ride the bubbling events from the inner input; the\n wrapper itself stays out of the tab order. -->\n<!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n<div (keydown)=\"onKeydown($event)\" (focusout)=\"onFocusOut($event)\">\n <uni-debounce-input\n #searchField\n [label]=\"label()\"\n [placeholder]=\"placeholder() ?? label()\"\n [debounceTime]=\"debounceTime()\"\n role=\"combobox\"\n [ariaExpanded]=\"showList()\"\n [ariaControls]=\"listboxId\"\n [ariaActivedescendant]=\"activeOptionId()\"\n (change)=\"handleChange($event)\"\n >\n <uni-symbol pre-input class=\"uni-search-lead\" name=\"{{ componentOptions().searchSymbol ?? 'search' }}\" aria-hidden=\"true\" />\n @if (hasQuery()) {\n <button\n post-input\n icon-button\n [iconName]=\"componentOptions().clearSymbol ?? 'close'\"\n variant=\"ghost\"\n size=\"sm\"\n (click)=\"clear()\"\n >\n Clear search\n </button>\n }\n </uni-debounce-input>\n\n @if (showList()) {\n <ul [id]=\"listboxId\" role=\"listbox\" [attr.aria-label]=\"label()\" [class]=\"listClass()\">\n @for (suggestion of visibleSuggestions(); track suggestion; let i = $index) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <li\n role=\"option\"\n [id]=\"listboxId + '-' + i\"\n [class.active]=\"i === activeIndex()\"\n [attr.aria-selected]=\"i === activeIndex()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"select(suggestion)\"\n >\n {{ suggestion }}\n </li>\n }\n </ul>\n }\n</div>\n", dependencies: [{ kind: "component", type: UniDebounceInputComponent, selector: "uni-debounce-input", inputs: ["inputName", "inputId", "debounceTime", "label", "placeholder", "disabled", "role", "ariaExpanded", "ariaControls", "ariaActivedescendant"], outputs: ["change"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4653
5369
|
}
|
|
4654
5370
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSearchInputComponent, decorators: [{
|
|
4655
5371
|
type: Component,
|
|
4656
|
-
args: [{ selector: '
|
|
4657
|
-
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], search: [{ type: i0.Output, args: ["search"] }] } });
|
|
5372
|
+
args: [{ selector: 'uni-search-input', imports: [UniDebounceInputComponent, UniIconButtonComponent, UniSymbolComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'searchInput' }], host: { '[class]': 'className()' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Keydown/focusout ride the bubbling events from the inner input; the\n wrapper itself stays out of the tab order. -->\n<!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n<div (keydown)=\"onKeydown($event)\" (focusout)=\"onFocusOut($event)\">\n <uni-debounce-input\n #searchField\n [label]=\"label()\"\n [placeholder]=\"placeholder() ?? label()\"\n [debounceTime]=\"debounceTime()\"\n role=\"combobox\"\n [ariaExpanded]=\"showList()\"\n [ariaControls]=\"listboxId\"\n [ariaActivedescendant]=\"activeOptionId()\"\n (change)=\"handleChange($event)\"\n >\n <uni-symbol pre-input class=\"uni-search-lead\" name=\"{{ componentOptions().searchSymbol ?? 'search' }}\" aria-hidden=\"true\" />\n @if (hasQuery()) {\n <button\n post-input\n icon-button\n [iconName]=\"componentOptions().clearSymbol ?? 'close'\"\n variant=\"ghost\"\n size=\"sm\"\n (click)=\"clear()\"\n >\n Clear search\n </button>\n }\n </uni-debounce-input>\n\n @if (showList()) {\n <ul [id]=\"listboxId\" role=\"listbox\" [attr.aria-label]=\"label()\" [class]=\"listClass()\">\n @for (suggestion of visibleSuggestions(); track suggestion; let i = $index) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <li\n role=\"option\"\n [id]=\"listboxId + '-' + i\"\n [class.active]=\"i === activeIndex()\"\n [attr.aria-selected]=\"i === activeIndex()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"select(suggestion)\"\n >\n {{ suggestion }}\n </li>\n }\n </ul>\n }\n</div>\n" }]
|
|
5373
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], search: [{ type: i0.Output, args: ["search"] }], suggestionSelected: [{ type: i0.Output, args: ["suggestionSelected"] }], field: [{ type: i0.ViewChild, args: [i0.forwardRef(() => UniDebounceInputComponent), { isSignal: true }] }] } });
|
|
4658
5374
|
|
|
4659
5375
|
/**
|
|
4660
5376
|
* UniSearchInputComponent Barrel File
|
|
@@ -4723,13 +5439,661 @@ class UniSelectComponent {
|
|
|
4723
5439
|
pointerEvents: 'none' /* Crucial for clicking through */,
|
|
4724
5440
|
});
|
|
4725
5441
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4726
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniSelectComponent, isStandalone: true, selector: "uni-select
|
|
5442
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniSelectComponent, isStandalone: true, selector: "uni-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: "<uni-input-box [error]=\"showError()\" [class]=\"selectClass\">\n <select\n [disabled]=\"disabled()\"\n [value]=\"currentSelectedIndex()\"\n (change)=\"handleSelectChange($event)\"\n (blur)=\"touched.set(true)\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-invalid]=\"showError() ? true : null\"\n [attr.aria-required]=\"required() ? true : null\"\n [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n >\n @if (placeholder()) {\n <option [value]=\"UNSELECTED\" disabled selected>\n {{ placeholder() }}\n </option>\n }\n\n @for (opt of options(); track opt.label; let i = $index) {\n <option [value]=\"i\">\n {{ opt.label }}\n </option>\n }\n </select>\n <uni-symbol name=\"keyboard_arrow_down\" [class]=\"arrowClass\" />\n</uni-input-box>\n", dependencies: [{ kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4727
5443
|
}
|
|
4728
5444
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSelectComponent, decorators: [{
|
|
4729
5445
|
type: Component,
|
|
4730
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-select
|
|
5446
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-select', imports: [UniInputBoxComponent, UniSymbolComponent], template: "<uni-input-box [error]=\"showError()\" [class]=\"selectClass\">\n <select\n [disabled]=\"disabled()\"\n [value]=\"currentSelectedIndex()\"\n (change)=\"handleSelectChange($event)\"\n (blur)=\"touched.set(true)\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-invalid]=\"showError() ? true : null\"\n [attr.aria-required]=\"required() ? true : null\"\n [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n >\n @if (placeholder()) {\n <option [value]=\"UNSELECTED\" disabled selected>\n {{ placeholder() }}\n </option>\n }\n\n @for (opt of options(); track opt.label; let i = $index) {\n <option [value]=\"i\">\n {{ opt.label }}\n </option>\n }\n </select>\n <uni-symbol name=\"keyboard_arrow_down\" [class]=\"arrowClass\" />\n</uni-input-box>\n" }]
|
|
4731
5447
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
4732
5448
|
|
|
5449
|
+
/**
|
|
5450
|
+
* Loading placeholder painted with surface tokens. `text` renders one or more
|
|
5451
|
+
* lines (the last line shortened, as real text would be), `rect` and `circle`
|
|
5452
|
+
* render fixed shapes. The shimmer only animates when the user allows motion;
|
|
5453
|
+
* it degrades to static blocks under `prefers-reduced-motion`.
|
|
5454
|
+
*/
|
|
5455
|
+
class UniSkeletonComponent extends BaseComponent {
|
|
5456
|
+
shape = input('text', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
|
|
5457
|
+
/** CSS width; defaults to 100% for text/rect and `height` for circles. */
|
|
5458
|
+
width = input(undefined, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
5459
|
+
/** CSS height per block; defaults to 1em (text), 96px (rect), 40px (circle). */
|
|
5460
|
+
height = input(undefined, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
5461
|
+
/** Number of text lines (text shape only). */
|
|
5462
|
+
lines = input(1, ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
|
|
5463
|
+
cssSize = (value) => typeof value === 'number' ? `${value}px` : value;
|
|
5464
|
+
resolvedHeight = computed(() => {
|
|
5465
|
+
const height = this.height();
|
|
5466
|
+
if (height !== undefined)
|
|
5467
|
+
return this.cssSize(height);
|
|
5468
|
+
return { text: '1em', rect: '96px', circle: '40px' }[this.shape()];
|
|
5469
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedHeight" }] : /* istanbul ignore next */ []));
|
|
5470
|
+
lineWidths = computed(() => {
|
|
5471
|
+
const width = this.width() !== undefined ? this.cssSize(this.width()) : undefined;
|
|
5472
|
+
if (this.shape() === 'circle')
|
|
5473
|
+
return [width ?? this.resolvedHeight()];
|
|
5474
|
+
if (this.shape() === 'rect')
|
|
5475
|
+
return [width ?? '100%'];
|
|
5476
|
+
const lines = Math.max(1, this.lines());
|
|
5477
|
+
// Multi-line text blocks end on a short line, like real paragraphs do.
|
|
5478
|
+
return Array.from({ length: lines }, (_, i) => lines > 1 && i === lines - 1 ? (width ?? '60%') : (width ?? '100%'));
|
|
5479
|
+
}, ...(ngDevMode ? [{ debugName: "lineWidths" }] : /* istanbul ignore next */ []));
|
|
5480
|
+
sweep = keyframes({
|
|
5481
|
+
from: { backgroundPosition: '200% 0' },
|
|
5482
|
+
to: { backgroundPosition: '-200% 0' },
|
|
5483
|
+
});
|
|
5484
|
+
className = computed(() => {
|
|
5485
|
+
const options = this.componentOptions();
|
|
5486
|
+
const base = this.theme.colors()[options.color ?? 'surface-variant'];
|
|
5487
|
+
const highlight = this.theme.colors()[options.highlightColor ?? 'surface'];
|
|
5488
|
+
const animated = (options.animation ?? 'shimmer') === 'shimmer';
|
|
5489
|
+
return css({
|
|
5490
|
+
display: 'flex',
|
|
5491
|
+
flexDirection: 'column',
|
|
5492
|
+
...this.theme.gap(options.gap),
|
|
5493
|
+
'& .uni-skeleton-block': {
|
|
5494
|
+
height: this.resolvedHeight(),
|
|
5495
|
+
backgroundColor: base,
|
|
5496
|
+
...(this.shape() === 'circle'
|
|
5497
|
+
? { borderRadius: '50%', flex: 'none' }
|
|
5498
|
+
: this.theme.radius(options.borderRadius)),
|
|
5499
|
+
...(animated &&
|
|
5500
|
+
motionSafe({
|
|
5501
|
+
backgroundImage: `linear-gradient(90deg, ${base} 40%, ${highlight} 50%, ${base} 60%)`,
|
|
5502
|
+
backgroundSize: '200% 100%',
|
|
5503
|
+
animation: `${this.sweep} ${options.duration ?? 1.4}s ease-in-out infinite`,
|
|
5504
|
+
})),
|
|
5505
|
+
},
|
|
5506
|
+
});
|
|
5507
|
+
}, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
5508
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSkeletonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5509
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniSkeletonComponent, isStandalone: true, selector: "uni-skeleton", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'skeleton' }], usesInheritance: true, ngImport: i0, template: `
|
|
5510
|
+
@for (line of lineWidths(); track $index) {
|
|
5511
|
+
<div class="uni-skeleton-block" [style.width]="line"></div>
|
|
5512
|
+
}
|
|
5513
|
+
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5514
|
+
}
|
|
5515
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSkeletonComponent, decorators: [{
|
|
5516
|
+
type: Component,
|
|
5517
|
+
args: [{
|
|
5518
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
5519
|
+
selector: 'uni-skeleton',
|
|
5520
|
+
providers: [{ provide: COMPONENT_NAME, useValue: 'skeleton' }],
|
|
5521
|
+
host: { '[class]': 'className()', 'aria-hidden': 'true' },
|
|
5522
|
+
template: `
|
|
5523
|
+
@for (line of lineWidths(); track $index) {
|
|
5524
|
+
<div class="uni-skeleton-block" [style.width]="line"></div>
|
|
5525
|
+
}
|
|
5526
|
+
`,
|
|
5527
|
+
}]
|
|
5528
|
+
}], propDecorators: { shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }] } });
|
|
5529
|
+
|
|
5530
|
+
/**
|
|
5531
|
+
* Range slider on a native `<input type="range">` — keyboard interaction and
|
|
5532
|
+
* the ARIA slider contract come from the platform. Fill, track, thumb and
|
|
5533
|
+
* radii resolve from `slider` theme tokens; the fill percentage rides a CSS
|
|
5534
|
+
* custom property so dragging never regenerates styles.
|
|
5535
|
+
*/
|
|
5536
|
+
class UniSliderComponent extends BaseComponent {
|
|
5537
|
+
// --- REQUIRED SIGNALS (populated by FormValueControl) ---
|
|
5538
|
+
value = model(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
5539
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
5540
|
+
touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
5541
|
+
invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
5542
|
+
dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
|
|
5543
|
+
/** Synced from required() validators by the Signal Forms [field] directive. */
|
|
5544
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
5545
|
+
/**
|
|
5546
|
+
* Id(s) of external element(s) describing this control — typically your
|
|
5547
|
+
* app-rendered value or error text — exposed as aria-describedby.
|
|
5548
|
+
*/
|
|
5549
|
+
ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
|
|
5550
|
+
// --- CONFIGURATION ---
|
|
5551
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
5552
|
+
// `min`/`max` are part of the FormValueControl contract (synced from
|
|
5553
|
+
// min()/max() validators), so their type must admit undefined.
|
|
5554
|
+
min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
|
|
5555
|
+
max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
|
|
5556
|
+
step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
|
|
5557
|
+
resolvedMin = computed(() => this.min() ?? 0, ...(ngDevMode ? [{ debugName: "resolvedMin" }] : /* istanbul ignore next */ []));
|
|
5558
|
+
resolvedMax = computed(() => this.max() ?? 100, ...(ngDevMode ? [{ debugName: "resolvedMax" }] : /* istanbul ignore next */ []));
|
|
5559
|
+
markAsTouched() {
|
|
5560
|
+
this.touched.set(true);
|
|
5561
|
+
}
|
|
5562
|
+
handleInput(event) {
|
|
5563
|
+
this.value.set(Number(event.target.value));
|
|
5564
|
+
}
|
|
5565
|
+
fillPercent = computed(() => {
|
|
5566
|
+
const min = this.resolvedMin();
|
|
5567
|
+
const range = this.resolvedMax() - min;
|
|
5568
|
+
if (range <= 0)
|
|
5569
|
+
return '0%';
|
|
5570
|
+
const ratio = (this.value() - min) / range;
|
|
5571
|
+
return `${Math.min(100, Math.max(0, ratio * 100))}%`;
|
|
5572
|
+
}, ...(ngDevMode ? [{ debugName: "fillPercent" }] : /* istanbul ignore next */ []));
|
|
5573
|
+
inputClass = computed(() => {
|
|
5574
|
+
const options = this.componentOptions();
|
|
5575
|
+
const fill = this.theme.colors()[options.color ?? 'primary'];
|
|
5576
|
+
const track = this.theme.colors()[options.trackColor ?? 'surface-variant'];
|
|
5577
|
+
const radius = this.theme.radii()[options.borderRadius ?? 'max'];
|
|
5578
|
+
const trackHeight = options.trackHeight ?? 4;
|
|
5579
|
+
const thumbSize = options.thumbSize ?? 16;
|
|
5580
|
+
// Webkit paints the fill via a gradient stopped at the custom property;
|
|
5581
|
+
// Firefox has a real ::-moz-range-progress.
|
|
5582
|
+
const trackFill = `linear-gradient(to right, ${fill} var(--uni-slider-fill), ${track} var(--uni-slider-fill))`;
|
|
5583
|
+
const thumb = {
|
|
5584
|
+
appearance: 'none',
|
|
5585
|
+
width: thumbSize,
|
|
5586
|
+
height: thumbSize,
|
|
5587
|
+
borderRadius: radius,
|
|
5588
|
+
border: 'none',
|
|
5589
|
+
background: fill,
|
|
5590
|
+
cursor: 'pointer',
|
|
5591
|
+
};
|
|
5592
|
+
return css({
|
|
5593
|
+
appearance: 'none',
|
|
5594
|
+
width: '100%',
|
|
5595
|
+
height: thumbSize,
|
|
5596
|
+
margin: 0,
|
|
5597
|
+
background: 'transparent',
|
|
5598
|
+
cursor: 'pointer',
|
|
5599
|
+
'&::-webkit-slider-runnable-track': {
|
|
5600
|
+
height: trackHeight,
|
|
5601
|
+
borderRadius: radius,
|
|
5602
|
+
background: trackFill,
|
|
5603
|
+
},
|
|
5604
|
+
'&::-webkit-slider-thumb': {
|
|
5605
|
+
...thumb,
|
|
5606
|
+
marginTop: (trackHeight - thumbSize) / 2,
|
|
5607
|
+
},
|
|
5608
|
+
'&::-moz-range-track': { height: trackHeight, borderRadius: radius, background: track },
|
|
5609
|
+
'&::-moz-range-progress': { height: trackHeight, borderRadius: radius, background: fill },
|
|
5610
|
+
'&::-moz-range-thumb': thumb,
|
|
5611
|
+
'&:focus-visible': { outline: `2px solid ${fill}`, outlineOffset: 2 },
|
|
5612
|
+
'&:disabled': {
|
|
5613
|
+
cursor: 'not-allowed',
|
|
5614
|
+
opacity: 0.5,
|
|
5615
|
+
'&::-webkit-slider-thumb': { cursor: 'not-allowed' },
|
|
5616
|
+
'&::-moz-range-thumb': { cursor: 'not-allowed' },
|
|
5617
|
+
},
|
|
5618
|
+
});
|
|
5619
|
+
}, ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
|
|
5620
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5621
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniSliderComponent, isStandalone: true, selector: "uni-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, providers: [{ provide: COMPONENT_NAME, useValue: 'slider' }], usesInheritance: true, ngImport: i0, template: `
|
|
5622
|
+
<input
|
|
5623
|
+
type="range"
|
|
5624
|
+
[class]="inputClass()"
|
|
5625
|
+
[style.--uni-slider-fill]="fillPercent()"
|
|
5626
|
+
[min]="resolvedMin()"
|
|
5627
|
+
[max]="resolvedMax()"
|
|
5628
|
+
[step]="step()"
|
|
5629
|
+
[value]="value()"
|
|
5630
|
+
[disabled]="disabled()"
|
|
5631
|
+
(input)="handleInput($event)"
|
|
5632
|
+
(blur)="markAsTouched()"
|
|
5633
|
+
[attr.aria-label]="label()"
|
|
5634
|
+
[attr.aria-describedby]="ariaDescribedBy() || null"
|
|
5635
|
+
/>
|
|
5636
|
+
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5637
|
+
}
|
|
5638
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSliderComponent, decorators: [{
|
|
5639
|
+
type: Component,
|
|
5640
|
+
args: [{
|
|
5641
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
5642
|
+
selector: 'uni-slider',
|
|
5643
|
+
providers: [{ provide: COMPONENT_NAME, useValue: 'slider' }],
|
|
5644
|
+
template: `
|
|
5645
|
+
<input
|
|
5646
|
+
type="range"
|
|
5647
|
+
[class]="inputClass()"
|
|
5648
|
+
[style.--uni-slider-fill]="fillPercent()"
|
|
5649
|
+
[min]="resolvedMin()"
|
|
5650
|
+
[max]="resolvedMax()"
|
|
5651
|
+
[step]="step()"
|
|
5652
|
+
[value]="value()"
|
|
5653
|
+
[disabled]="disabled()"
|
|
5654
|
+
(input)="handleInput($event)"
|
|
5655
|
+
(blur)="markAsTouched()"
|
|
5656
|
+
[attr.aria-label]="label()"
|
|
5657
|
+
[attr.aria-describedby]="ariaDescribedBy() || null"
|
|
5658
|
+
/>
|
|
5659
|
+
`,
|
|
5660
|
+
}]
|
|
5661
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }] } });
|
|
5662
|
+
|
|
5663
|
+
const SPARK_WIDTH = 96;
|
|
5664
|
+
const SPARK_HEIGHT = 28;
|
|
5665
|
+
/**
|
|
5666
|
+
* KPI stat tile: muted label, large value (numbers auto-compact: 48234 →
|
|
5667
|
+
* "48.2K"), an optional delta whose ink is decided by *direction × whether up
|
|
5668
|
+
* is good* (never direction alone — churn going down is good news), and an
|
|
5669
|
+
* optional decorative sparkline. Frame, typography and inks are all `stat`
|
|
5670
|
+
* theme tokens.
|
|
5671
|
+
*/
|
|
5672
|
+
class UniStatComponent extends BaseComponent {
|
|
5673
|
+
/** What is being measured, sentence case. */
|
|
5674
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
5675
|
+
/** The headline number: strings render verbatim, numbers auto-compact. */
|
|
5676
|
+
value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
5677
|
+
/** Signed change, e.g. "+12.4%" or "-0.4%". The sign drives the arrow. */
|
|
5678
|
+
delta = input(...(ngDevMode ? [undefined, { debugName: "delta" }] : /* istanbul ignore next */ []));
|
|
5679
|
+
/** Whether an upward movement is good news. Flip for churn, errors, cost. */
|
|
5680
|
+
upIsGood = input(true, ...(ngDevMode ? [{ debugName: "upIsGood" }] : /* istanbul ignore next */ []));
|
|
5681
|
+
/** Names the comparison period, e.g. "vs last month". */
|
|
5682
|
+
caption = input(...(ngDevMode ? [undefined, { debugName: "caption" }] : /* istanbul ignore next */ []));
|
|
5683
|
+
/** Recent values for the decorative sparkline (12 points reads best). */
|
|
5684
|
+
trend = input(undefined, ...(ngDevMode ? [{ debugName: "trend" }] : /* istanbul ignore next */ []));
|
|
5685
|
+
srOnly = css(visuallyHidden);
|
|
5686
|
+
displayValue = computed(() => {
|
|
5687
|
+
const value = this.value();
|
|
5688
|
+
if (typeof value !== 'number')
|
|
5689
|
+
return value;
|
|
5690
|
+
return new Intl.NumberFormat(undefined, {
|
|
5691
|
+
notation: 'compact',
|
|
5692
|
+
maximumFractionDigits: 1,
|
|
5693
|
+
}).format(value);
|
|
5694
|
+
}, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
|
|
5695
|
+
deltaIsUp = computed(() => !this.delta()?.trim().startsWith('-'), ...(ngDevMode ? [{ debugName: "deltaIsUp" }] : /* istanbul ignore next */ []));
|
|
5696
|
+
deltaIsGood = computed(() => this.deltaIsUp() === this.upIsGood(), ...(ngDevMode ? [{ debugName: "deltaIsGood" }] : /* istanbul ignore next */ []));
|
|
5697
|
+
deltaMagnitude = computed(() => this.delta()?.trim().replace(/^[-+]/, '') ?? '', ...(ngDevMode ? [{ debugName: "deltaMagnitude" }] : /* istanbul ignore next */ []));
|
|
5698
|
+
sparkline = computed(() => {
|
|
5699
|
+
const points = this.trend();
|
|
5700
|
+
if (!points || points.length < 2)
|
|
5701
|
+
return undefined;
|
|
5702
|
+
const min = Math.min(...points);
|
|
5703
|
+
const range = Math.max(...points) - min || 1;
|
|
5704
|
+
const step = SPARK_WIDTH / (points.length - 1);
|
|
5705
|
+
const xy = points.map((p, i) => [
|
|
5706
|
+
i * step,
|
|
5707
|
+
SPARK_HEIGHT - 3 - ((p - min) / range) * (SPARK_HEIGHT - 6),
|
|
5708
|
+
]);
|
|
5709
|
+
const [endX, endY] = xy[xy.length - 1];
|
|
5710
|
+
return {
|
|
5711
|
+
width: SPARK_WIDTH,
|
|
5712
|
+
height: SPARK_HEIGHT,
|
|
5713
|
+
path: xy.map(([x, y], i) => `${i ? 'L' : 'M'}${x.toFixed(1)},${y.toFixed(1)}`).join(' '),
|
|
5714
|
+
endX: endX.toFixed(1),
|
|
5715
|
+
endY: endY.toFixed(1),
|
|
5716
|
+
};
|
|
5717
|
+
}, ...(ngDevMode ? [{ debugName: "sparkline" }] : /* istanbul ignore next */ []));
|
|
5718
|
+
className = computed(() => {
|
|
5719
|
+
const options = this.componentOptions();
|
|
5720
|
+
return css({
|
|
5721
|
+
position: 'relative',
|
|
5722
|
+
display: 'flex',
|
|
5723
|
+
flexDirection: 'column',
|
|
5724
|
+
boxSizing: 'border-box',
|
|
5725
|
+
...this.theme.gap(options.gap),
|
|
5726
|
+
...this.theme.colorPair(options.color),
|
|
5727
|
+
...this.theme.border(options.border),
|
|
5728
|
+
...this.theme.radius(options.borderRadius),
|
|
5729
|
+
...this.theme.padding(options.padding),
|
|
5730
|
+
'& .uni-stat-label': {
|
|
5731
|
+
...this.theme.typeface(options.labelTypeface),
|
|
5732
|
+
...this.theme.color('on-background-variant'),
|
|
5733
|
+
},
|
|
5734
|
+
'& .uni-stat-value': {
|
|
5735
|
+
...this.theme.typeface(options.valueTypeface),
|
|
5736
|
+
...this.theme.color('on-background'),
|
|
5737
|
+
},
|
|
5738
|
+
'& .uni-stat-meta': {
|
|
5739
|
+
display: 'flex',
|
|
5740
|
+
alignItems: 'baseline',
|
|
5741
|
+
flexWrap: 'wrap',
|
|
5742
|
+
columnGap: 8,
|
|
5743
|
+
},
|
|
5744
|
+
'& .uni-stat-delta': {
|
|
5745
|
+
fontSize: 13,
|
|
5746
|
+
fontWeight: 600,
|
|
5747
|
+
...this.theme.color(options.negativeColor),
|
|
5748
|
+
'&.good': this.theme.color(options.positiveColor),
|
|
5749
|
+
},
|
|
5750
|
+
'& .uni-stat-caption': {
|
|
5751
|
+
fontSize: 11.5,
|
|
5752
|
+
...this.theme.color('on-background-variant'),
|
|
5753
|
+
},
|
|
5754
|
+
'& .uni-stat-trend': {
|
|
5755
|
+
position: 'absolute',
|
|
5756
|
+
right: 16,
|
|
5757
|
+
bottom: 14,
|
|
5758
|
+
'& path': { stroke: this.theme.colors()[options.trendColor ?? 'outline'] },
|
|
5759
|
+
'& circle': { fill: this.theme.colors()[options.trendAccent ?? 'primary'] },
|
|
5760
|
+
},
|
|
5761
|
+
});
|
|
5762
|
+
}, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
5763
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniStatComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5764
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniStatComponent, isStandalone: true, selector: "uni-stat", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, delta: { classPropertyName: "delta", publicName: "delta", isSignal: true, isRequired: false, transformFunction: null }, upIsGood: { classPropertyName: "upIsGood", publicName: "upIsGood", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'stat' }], usesInheritance: true, ngImport: i0, template: `
|
|
5765
|
+
<span class="uni-stat-label">{{ label() }}</span>
|
|
5766
|
+
<span class="uni-stat-value">{{ displayValue() }}</span>
|
|
5767
|
+
@if (delta()) {
|
|
5768
|
+
<span class="uni-stat-meta">
|
|
5769
|
+
<span class="uni-stat-delta" [class.good]="deltaIsGood()">
|
|
5770
|
+
<span aria-hidden="true">{{ deltaIsUp() ? '▴' : '▾' }}</span>
|
|
5771
|
+
<span [class]="srOnly">{{ deltaIsUp() ? 'up' : 'down' }}</span>
|
|
5772
|
+
{{ deltaMagnitude() }}
|
|
5773
|
+
</span>
|
|
5774
|
+
@if (caption()) {
|
|
5775
|
+
<span class="uni-stat-caption">{{ caption() }}</span>
|
|
5776
|
+
}
|
|
5777
|
+
</span>
|
|
5778
|
+
}
|
|
5779
|
+
@if (sparkline(); as spark) {
|
|
5780
|
+
<svg
|
|
5781
|
+
class="uni-stat-trend"
|
|
5782
|
+
aria-hidden="true"
|
|
5783
|
+
[attr.width]="spark.width"
|
|
5784
|
+
[attr.height]="spark.height"
|
|
5785
|
+
[attr.viewBox]="'0 0 ' + spark.width + ' ' + spark.height"
|
|
5786
|
+
>
|
|
5787
|
+
<path
|
|
5788
|
+
[attr.d]="spark.path"
|
|
5789
|
+
fill="none"
|
|
5790
|
+
stroke-width="2"
|
|
5791
|
+
stroke-linecap="round"
|
|
5792
|
+
stroke-linejoin="round"
|
|
5793
|
+
/>
|
|
5794
|
+
<circle [attr.cx]="spark.endX" [attr.cy]="spark.endY" r="3.5" />
|
|
5795
|
+
</svg>
|
|
5796
|
+
}
|
|
5797
|
+
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5798
|
+
}
|
|
5799
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniStatComponent, decorators: [{
|
|
5800
|
+
type: Component,
|
|
5801
|
+
args: [{
|
|
5802
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
5803
|
+
selector: 'uni-stat',
|
|
5804
|
+
providers: [{ provide: COMPONENT_NAME, useValue: 'stat' }],
|
|
5805
|
+
host: { '[class]': 'className()' },
|
|
5806
|
+
template: `
|
|
5807
|
+
<span class="uni-stat-label">{{ label() }}</span>
|
|
5808
|
+
<span class="uni-stat-value">{{ displayValue() }}</span>
|
|
5809
|
+
@if (delta()) {
|
|
5810
|
+
<span class="uni-stat-meta">
|
|
5811
|
+
<span class="uni-stat-delta" [class.good]="deltaIsGood()">
|
|
5812
|
+
<span aria-hidden="true">{{ deltaIsUp() ? '▴' : '▾' }}</span>
|
|
5813
|
+
<span [class]="srOnly">{{ deltaIsUp() ? 'up' : 'down' }}</span>
|
|
5814
|
+
{{ deltaMagnitude() }}
|
|
5815
|
+
</span>
|
|
5816
|
+
@if (caption()) {
|
|
5817
|
+
<span class="uni-stat-caption">{{ caption() }}</span>
|
|
5818
|
+
}
|
|
5819
|
+
</span>
|
|
5820
|
+
}
|
|
5821
|
+
@if (sparkline(); as spark) {
|
|
5822
|
+
<svg
|
|
5823
|
+
class="uni-stat-trend"
|
|
5824
|
+
aria-hidden="true"
|
|
5825
|
+
[attr.width]="spark.width"
|
|
5826
|
+
[attr.height]="spark.height"
|
|
5827
|
+
[attr.viewBox]="'0 0 ' + spark.width + ' ' + spark.height"
|
|
5828
|
+
>
|
|
5829
|
+
<path
|
|
5830
|
+
[attr.d]="spark.path"
|
|
5831
|
+
fill="none"
|
|
5832
|
+
stroke-width="2"
|
|
5833
|
+
stroke-linecap="round"
|
|
5834
|
+
stroke-linejoin="round"
|
|
5835
|
+
/>
|
|
5836
|
+
<circle [attr.cx]="spark.endX" [attr.cy]="spark.endY" r="3.5" />
|
|
5837
|
+
</svg>
|
|
5838
|
+
}
|
|
5839
|
+
`,
|
|
5840
|
+
}]
|
|
5841
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], delta: [{ type: i0.Input, args: [{ isSignal: true, alias: "delta", required: false }] }], upIsGood: [{ type: i0.Input, args: [{ isSignal: true, alias: "upIsGood", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], trend: [{ type: i0.Input, args: [{ isSignal: true, alias: "trend", required: false }] }] } });
|
|
5842
|
+
|
|
5843
|
+
/**
|
|
5844
|
+
* One tab inside `uni-tabs`: a label for the tablist plus projected panel
|
|
5845
|
+
* content. Content is captured in a template and only instantiated while the
|
|
5846
|
+
* tab is selected, so inactive panels cost nothing.
|
|
5847
|
+
*/
|
|
5848
|
+
class UniTabComponent {
|
|
5849
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
5850
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
5851
|
+
/** Stable ids wiring tab ↔ panel ARIA relationships. */
|
|
5852
|
+
id = uniqueId('uni-tab');
|
|
5853
|
+
panelId = `${this.id}-panel`;
|
|
5854
|
+
content = viewChild.required('content');
|
|
5855
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5856
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: UniTabComponent, isStandalone: true, selector: "uni-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template #content><ng-content /></ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5857
|
+
}
|
|
5858
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTabComponent, decorators: [{
|
|
5859
|
+
type: Component,
|
|
5860
|
+
args: [{
|
|
5861
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
5862
|
+
selector: 'uni-tab',
|
|
5863
|
+
template: `<ng-template #content><ng-content /></ng-template>`,
|
|
5864
|
+
}]
|
|
5865
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
|
|
5866
|
+
|
|
5867
|
+
/**
|
|
5868
|
+
* WAI-ARIA tabs: roving tabindex, automatic activation (arrow keys move focus
|
|
5869
|
+
* and select), Home/End, disabled tabs skipped. Only the selected panel is
|
|
5870
|
+
* instantiated. All styling resolves from `tabs` theme option tokens.
|
|
5871
|
+
*/
|
|
5872
|
+
class UniTabsComponent extends BaseComponent {
|
|
5873
|
+
/** Index of the selected tab; two-way bindable. */
|
|
5874
|
+
selectedIndex = model(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
|
|
5875
|
+
tabs = contentChildren(UniTabComponent, ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
|
|
5876
|
+
tabButtons = viewChildren('tabButton', ...(ngDevMode ? [{ debugName: "tabButtons" }] : /* istanbul ignore next */ []));
|
|
5877
|
+
/** The selection, snapped to the nearest enabled tab. */
|
|
5878
|
+
activeIndex = computed(() => {
|
|
5879
|
+
const tabs = this.tabs();
|
|
5880
|
+
const wanted = this.selectedIndex();
|
|
5881
|
+
if (tabs[wanted] && !tabs[wanted].disabled())
|
|
5882
|
+
return wanted;
|
|
5883
|
+
const firstEnabled = tabs.findIndex((tab) => !tab.disabled());
|
|
5884
|
+
return firstEnabled === -1 ? 0 : firstEnabled;
|
|
5885
|
+
}, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
|
|
5886
|
+
activeTab = computed(() => this.tabs()[this.activeIndex()], ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
|
|
5887
|
+
select(index) {
|
|
5888
|
+
if (this.tabs()[index]?.disabled())
|
|
5889
|
+
return;
|
|
5890
|
+
this.selectedIndex.set(index);
|
|
5891
|
+
}
|
|
5892
|
+
onKeydown(event) {
|
|
5893
|
+
const enabled = this.tabs()
|
|
5894
|
+
.map((tab, index) => ({ tab, index }))
|
|
5895
|
+
.filter(({ tab }) => !tab.disabled())
|
|
5896
|
+
.map(({ index }) => index);
|
|
5897
|
+
if (enabled.length === 0)
|
|
5898
|
+
return;
|
|
5899
|
+
const position = enabled.indexOf(this.activeIndex());
|
|
5900
|
+
let next;
|
|
5901
|
+
switch (event.key) {
|
|
5902
|
+
case 'ArrowRight':
|
|
5903
|
+
next = enabled[(position + 1) % enabled.length];
|
|
5904
|
+
break;
|
|
5905
|
+
case 'ArrowLeft':
|
|
5906
|
+
next = enabled[(position - 1 + enabled.length) % enabled.length];
|
|
5907
|
+
break;
|
|
5908
|
+
case 'Home':
|
|
5909
|
+
next = enabled[0];
|
|
5910
|
+
break;
|
|
5911
|
+
case 'End':
|
|
5912
|
+
next = enabled[enabled.length - 1];
|
|
5913
|
+
break;
|
|
5914
|
+
default:
|
|
5915
|
+
return;
|
|
5916
|
+
}
|
|
5917
|
+
event.preventDefault();
|
|
5918
|
+
this.select(next);
|
|
5919
|
+
this.tabButtons()[next]?.nativeElement.focus();
|
|
5920
|
+
}
|
|
5921
|
+
tablistClass = computed(() => {
|
|
5922
|
+
const options = this.componentOptions();
|
|
5923
|
+
return css({
|
|
5924
|
+
display: 'flex',
|
|
5925
|
+
alignItems: 'stretch',
|
|
5926
|
+
...this.theme.gap(options.gap),
|
|
5927
|
+
...this.theme.borderBottom(options.divider),
|
|
5928
|
+
});
|
|
5929
|
+
}, ...(ngDevMode ? [{ debugName: "tablistClass" }] : /* istanbul ignore next */ []));
|
|
5930
|
+
tabClass = computed(() => {
|
|
5931
|
+
const options = this.componentOptions();
|
|
5932
|
+
const thickness = options.indicatorThickness
|
|
5933
|
+
? this.theme.getThickness(options.indicatorThickness)
|
|
5934
|
+
: 2;
|
|
5935
|
+
return css({
|
|
5936
|
+
border: 0,
|
|
5937
|
+
background: 'transparent',
|
|
5938
|
+
cursor: 'pointer',
|
|
5939
|
+
// The indicator overlays the divider: reserve its thickness on every
|
|
5940
|
+
// tab so labels don't shift when selection moves.
|
|
5941
|
+
borderBottom: `${thickness}px solid transparent`,
|
|
5942
|
+
marginBottom: -1,
|
|
5943
|
+
...this.theme.typeface(options.typeface),
|
|
5944
|
+
...this.theme.color(options.textColor),
|
|
5945
|
+
...this.theme.paddingLeft(options.padding),
|
|
5946
|
+
...this.theme.paddingRight(options.padding),
|
|
5947
|
+
...this.theme.paddingTop('sm'),
|
|
5948
|
+
...this.theme.paddingBottom('sm'),
|
|
5949
|
+
...this.theme.radius(options.borderRadius),
|
|
5950
|
+
...motionSafe({ transition: 'color 0.15s ease, border-color 0.15s ease' }),
|
|
5951
|
+
'&.active': {
|
|
5952
|
+
...this.theme.color(options.activeTextColor),
|
|
5953
|
+
...this.theme.backgroundColor(options.activeColor),
|
|
5954
|
+
borderBottomColor: this.theme.colors()[options.indicatorColor ?? 'primary'],
|
|
5955
|
+
},
|
|
5956
|
+
'&:disabled': {
|
|
5957
|
+
...this.theme.color('on-disabled'),
|
|
5958
|
+
cursor: 'not-allowed',
|
|
5959
|
+
},
|
|
5960
|
+
'&:focus-visible': {
|
|
5961
|
+
outline: `2px solid ${this.theme.colors()[options.indicatorColor ?? 'primary']}`,
|
|
5962
|
+
outlineOffset: -2,
|
|
5963
|
+
},
|
|
5964
|
+
});
|
|
5965
|
+
}, ...(ngDevMode ? [{ debugName: "tabClass" }] : /* istanbul ignore next */ []));
|
|
5966
|
+
panelClass = computed(() => css({
|
|
5967
|
+
...this.theme.paddingTop('md'),
|
|
5968
|
+
'&:focus-visible': {
|
|
5969
|
+
outline: `2px solid ${this.theme.colors()[this.componentOptions().indicatorColor ?? 'primary']}`,
|
|
5970
|
+
outlineOffset: 2,
|
|
5971
|
+
},
|
|
5972
|
+
}), ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
|
|
5973
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5974
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniTabsComponent, isStandalone: true, selector: "uni-tabs", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange" }, providers: [{ provide: COMPONENT_NAME, useValue: 'tabs' }], queries: [{ propertyName: "tabs", predicate: UniTabComponent, isSignal: true }], viewQueries: [{ propertyName: "tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
|
|
5975
|
+
<!-- Roving-tabindex composite: focus lives on the tab buttons; keydown
|
|
5976
|
+
bubbles to the tablist, which itself must stay out of the tab order. -->
|
|
5977
|
+
<!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->
|
|
5978
|
+
<div role="tablist" [class]="tablistClass()" (keydown)="onKeydown($event)">
|
|
5979
|
+
@for (tab of tabs(); track tab.id; let i = $index) {
|
|
5980
|
+
<button
|
|
5981
|
+
#tabButton
|
|
5982
|
+
type="button"
|
|
5983
|
+
role="tab"
|
|
5984
|
+
[id]="tab.id"
|
|
5985
|
+
[class]="tabClass()"
|
|
5986
|
+
[attr.aria-selected]="i === activeIndex()"
|
|
5987
|
+
[attr.aria-controls]="tab.panelId"
|
|
5988
|
+
[attr.tabindex]="i === activeIndex() ? 0 : -1"
|
|
5989
|
+
[disabled]="tab.disabled()"
|
|
5990
|
+
[class.active]="i === activeIndex()"
|
|
5991
|
+
(click)="select(i)"
|
|
5992
|
+
>
|
|
5993
|
+
{{ tab.label() }}
|
|
5994
|
+
</button>
|
|
5995
|
+
}
|
|
5996
|
+
</div>
|
|
5997
|
+
@if (activeTab(); as tab) {
|
|
5998
|
+
<div
|
|
5999
|
+
role="tabpanel"
|
|
6000
|
+
[id]="tab.panelId"
|
|
6001
|
+
[attr.aria-labelledby]="tab.id"
|
|
6002
|
+
tabindex="0"
|
|
6003
|
+
[class]="panelClass()"
|
|
6004
|
+
>
|
|
6005
|
+
<ng-container [ngTemplateOutlet]="tab.content()" />
|
|
6006
|
+
</div>
|
|
6007
|
+
}
|
|
6008
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6009
|
+
}
|
|
6010
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTabsComponent, decorators: [{
|
|
6011
|
+
type: Component,
|
|
6012
|
+
args: [{
|
|
6013
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
6014
|
+
selector: 'uni-tabs',
|
|
6015
|
+
imports: [NgTemplateOutlet],
|
|
6016
|
+
providers: [{ provide: COMPONENT_NAME, useValue: 'tabs' }],
|
|
6017
|
+
template: `
|
|
6018
|
+
<!-- Roving-tabindex composite: focus lives on the tab buttons; keydown
|
|
6019
|
+
bubbles to the tablist, which itself must stay out of the tab order. -->
|
|
6020
|
+
<!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->
|
|
6021
|
+
<div role="tablist" [class]="tablistClass()" (keydown)="onKeydown($event)">
|
|
6022
|
+
@for (tab of tabs(); track tab.id; let i = $index) {
|
|
6023
|
+
<button
|
|
6024
|
+
#tabButton
|
|
6025
|
+
type="button"
|
|
6026
|
+
role="tab"
|
|
6027
|
+
[id]="tab.id"
|
|
6028
|
+
[class]="tabClass()"
|
|
6029
|
+
[attr.aria-selected]="i === activeIndex()"
|
|
6030
|
+
[attr.aria-controls]="tab.panelId"
|
|
6031
|
+
[attr.tabindex]="i === activeIndex() ? 0 : -1"
|
|
6032
|
+
[disabled]="tab.disabled()"
|
|
6033
|
+
[class.active]="i === activeIndex()"
|
|
6034
|
+
(click)="select(i)"
|
|
6035
|
+
>
|
|
6036
|
+
{{ tab.label() }}
|
|
6037
|
+
</button>
|
|
6038
|
+
}
|
|
6039
|
+
</div>
|
|
6040
|
+
@if (activeTab(); as tab) {
|
|
6041
|
+
<div
|
|
6042
|
+
role="tabpanel"
|
|
6043
|
+
[id]="tab.panelId"
|
|
6044
|
+
[attr.aria-labelledby]="tab.id"
|
|
6045
|
+
tabindex="0"
|
|
6046
|
+
[class]="panelClass()"
|
|
6047
|
+
>
|
|
6048
|
+
<ng-container [ngTemplateOutlet]="tab.content()" />
|
|
6049
|
+
</div>
|
|
6050
|
+
}
|
|
6051
|
+
`,
|
|
6052
|
+
}]
|
|
6053
|
+
}], propDecorators: { selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => UniTabComponent), { isSignal: true }] }], tabButtons: [{ type: i0.ViewChildren, args: ['tabButton', { isSignal: true }] }] } });
|
|
6054
|
+
|
|
6055
|
+
class UniTextareaComponent {
|
|
6056
|
+
theme = inject(ThemeService);
|
|
6057
|
+
// --- REQUIRED SIGNALS (populated by FormValueControl) ---
|
|
6058
|
+
value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
6059
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
6060
|
+
touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
6061
|
+
invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
6062
|
+
dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
|
|
6063
|
+
/** Synced from required() validators by the Signal Forms [field] directive. */
|
|
6064
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
6065
|
+
/**
|
|
6066
|
+
* Id(s) of external element(s) describing this control — typically your
|
|
6067
|
+
* app-rendered error message — exposed as aria-describedby.
|
|
6068
|
+
*/
|
|
6069
|
+
ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
|
|
6070
|
+
// --- CONFIGURATION ---
|
|
6071
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
6072
|
+
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
6073
|
+
/** Visible text rows. Defaults to the theme's `textarea` options. */
|
|
6074
|
+
rows = input(undefined, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
6075
|
+
options = this.theme.getComponentOptions('textarea');
|
|
6076
|
+
resolvedRows = computed(() => this.rows() ?? this.options().rows ?? 3, ...(ngDevMode ? [{ debugName: "resolvedRows" }] : /* istanbul ignore next */ []));
|
|
6077
|
+
// Only show errors if the user has actually interacted with the field
|
|
6078
|
+
showError = computed(() => this.invalid() && (this.touched() || this.dirty()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
|
|
6079
|
+
textareaClass = computed(() => css({
|
|
6080
|
+
width: '100%',
|
|
6081
|
+
resize: this.options().resize ?? 'vertical',
|
|
6082
|
+
}), ...(ngDevMode ? [{ debugName: "textareaClass" }] : /* istanbul ignore next */ []));
|
|
6083
|
+
markAsTouched() {
|
|
6084
|
+
this.touched.set(true);
|
|
6085
|
+
}
|
|
6086
|
+
handleInput(event) {
|
|
6087
|
+
this.value.set(event.target.value);
|
|
6088
|
+
}
|
|
6089
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6090
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniTextareaComponent, isStandalone: true, selector: "uni-textarea", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: "<uni-input-box [error]=\"showError()\" height=\"auto\">\n <textarea\n [value]=\"value()\"\n (input)=\"handleInput($event)\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n (blur)=\"markAsTouched()\"\n [rows]=\"resolvedRows()\"\n [class]=\"textareaClass()\"\n [attr.aria-label]=\"label()\"\n [attr.aria-invalid]=\"showError() ? true : null\"\n [attr.aria-required]=\"required() ? true : null\"\n [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n ></textarea>\n</uni-input-box>\n", dependencies: [{ kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6091
|
+
}
|
|
6092
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTextareaComponent, decorators: [{
|
|
6093
|
+
type: Component,
|
|
6094
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-textarea', imports: [UniInputBoxComponent], template: "<uni-input-box [error]=\"showError()\" height=\"auto\">\n <textarea\n [value]=\"value()\"\n (input)=\"handleInput($event)\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n (blur)=\"markAsTouched()\"\n [rows]=\"resolvedRows()\"\n [class]=\"textareaClass()\"\n [attr.aria-label]=\"label()\"\n [attr.aria-invalid]=\"showError() ? true : null\"\n [attr.aria-required]=\"required() ? true : null\"\n [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n ></textarea>\n</uni-input-box>\n" }]
|
|
6095
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }] } });
|
|
6096
|
+
|
|
4733
6097
|
/**
|
|
4734
6098
|
* UniSortHeaderComponent Barrel File
|
|
4735
6099
|
*
|
|
@@ -4748,11 +6112,11 @@ class UniTagComponent {
|
|
|
4748
6112
|
this.close.emit(v);
|
|
4749
6113
|
}
|
|
4750
6114
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4751
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniTagComponent, isStandalone: true, selector: "
|
|
6115
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniTagComponent, isStandalone: true, selector: "uni-tag", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: "<div box-layout color=\"primary\" borderRadius=\"max\" display=\"inline-block\">\n <div row-layout paddingLeft=\"sm\" gap=\"xs\">\n <span uni-text display=\"block\" typeface=\"tag\">{{ label() }}</span>\n <button icon-button symbolName=\"close\" size=\"sm\" (click)=\"handleClose()\">\n Remove {{ label() }}\n </button>\n </div>\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 });
|
|
4752
6116
|
}
|
|
4753
6117
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTagComponent, decorators: [{
|
|
4754
6118
|
type: Component,
|
|
4755
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '
|
|
6119
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-tag', imports: [UniBoxComponent, UniIconButtonComponent, UniTextComponent, UniRowComponent], template: "<div box-layout color=\"primary\" borderRadius=\"max\" display=\"inline-block\">\n <div row-layout paddingLeft=\"sm\" gap=\"xs\">\n <span uni-text display=\"block\" typeface=\"tag\">{{ label() }}</span>\n <button icon-button symbolName=\"close\" size=\"sm\" (click)=\"handleClose()\">\n Remove {{ label() }}\n </button>\n </div>\n</div>\n" }]
|
|
4756
6120
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], close: [{ type: i0.Output, args: ["close"] }] } });
|
|
4757
6121
|
|
|
4758
6122
|
/**
|
|
@@ -4769,13 +6133,14 @@ const SCHEMES = [
|
|
|
4769
6133
|
'triadic',
|
|
4770
6134
|
];
|
|
4771
6135
|
const CATEGORIES = ['jewel', 'pastel', 'earth', 'neutral', 'florescent', 'shades'];
|
|
6136
|
+
const SHAPES = ['sharp', 'modern', 'playful'];
|
|
4772
6137
|
const VARIANTS = ['primary', 'secondary', 'tertiary', 'warn', 'ghost'];
|
|
4773
|
-
// Representative tokens
|
|
6138
|
+
// Representative tokens shown as swatches in each mode panel.
|
|
4774
6139
|
const SWATCHES = [
|
|
4775
6140
|
{ label: 'primary', token: 'primary', on: 'on-primary' },
|
|
4776
6141
|
{ label: 'secondary', token: 'secondary', on: 'on-secondary' },
|
|
4777
6142
|
{ label: 'tertiary', token: 'tertiary', on: 'on-tertiary' },
|
|
4778
|
-
{ label: '
|
|
6143
|
+
{ label: 'container', token: 'primary-container', on: 'on-primary-container' },
|
|
4779
6144
|
{ label: 'error', token: 'error', on: 'on-error' },
|
|
4780
6145
|
{ label: 'warn', token: 'warn', on: 'on-warn' },
|
|
4781
6146
|
{ label: 'success', token: 'success', on: 'on-success' },
|
|
@@ -4842,6 +6207,7 @@ class UniThemeBuilderComponent {
|
|
|
4842
6207
|
theme = inject(ThemeService);
|
|
4843
6208
|
schemes = SCHEMES;
|
|
4844
6209
|
categories = CATEGORIES;
|
|
6210
|
+
shapes = SHAPES;
|
|
4845
6211
|
variants = VARIANTS;
|
|
4846
6212
|
sizes = ['sm', 'md', 'lg', 'xl'];
|
|
4847
6213
|
swatches = SWATCHES;
|
|
@@ -4849,6 +6215,7 @@ class UniThemeBuilderComponent {
|
|
|
4849
6215
|
seed = signal('#4F46E5', ...(ngDevMode ? [{ debugName: "seed" }] : /* istanbul ignore next */ []));
|
|
4850
6216
|
scheme = signal('triadic', ...(ngDevMode ? [{ debugName: "scheme" }] : /* istanbul ignore next */ []));
|
|
4851
6217
|
category = signal('neutral', ...(ngDevMode ? [{ debugName: "category" }] : /* istanbul ignore next */ []));
|
|
6218
|
+
shape = signal('modern', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
|
|
4852
6219
|
floor = signal(18, ...(ngDevMode ? [{ debugName: "floor" }] : /* istanbul ignore next */ []));
|
|
4853
6220
|
mode = signal('light', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
4854
6221
|
pinPrimary = signal(false, ...(ngDevMode ? [{ debugName: "pinPrimary" }] : /* istanbul ignore next */ []));
|
|
@@ -4857,6 +6224,8 @@ class UniThemeBuilderComponent {
|
|
|
4857
6224
|
secondaryHex = signal('#D4A373', ...(ngDevMode ? [{ debugName: "secondaryHex" }] : /* istanbul ignore next */ []));
|
|
4858
6225
|
/** Soft brand targets carried by the active preset (cleared on seed edits). */
|
|
4859
6226
|
targets = signal(undefined, ...(ngDevMode ? [{ debugName: "targets" }] : /* istanbul ignore next */ []));
|
|
6227
|
+
copied = signal(null, ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
|
|
6228
|
+
showAllPairs = signal(false, ...(ngDevMode ? [{ debugName: "showAllPairs" }] : /* istanbul ignore next */ []));
|
|
4860
6229
|
constructor() {
|
|
4861
6230
|
// Seed the controls from an already-active custom palette, if any.
|
|
4862
6231
|
const existing = this.theme.customPalette();
|
|
@@ -4883,19 +6252,88 @@ class UniThemeBuilderComponent {
|
|
|
4883
6252
|
category: this.category(),
|
|
4884
6253
|
mode: this.mode(),
|
|
4885
6254
|
accentSaturationFloor: this.floor(),
|
|
6255
|
+
radii: ShapeRadii[this.shape()],
|
|
4886
6256
|
...(this.targets() ? { targets: this.targets() } : {}),
|
|
4887
6257
|
brand: {
|
|
4888
6258
|
...(this.pinPrimary() ? { primary: this.primaryHex() } : {}),
|
|
4889
6259
|
...(this.pinSecondary() ? { secondary: this.secondaryHex() } : {}),
|
|
4890
6260
|
},
|
|
4891
6261
|
}), ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
|
|
4892
|
-
|
|
6262
|
+
/**
|
|
6263
|
+
* Both modes generated on every input change (< 15 ms each), independent of
|
|
6264
|
+
* the storybook-wide theme — the side-by-side preview and the contrast
|
|
6265
|
+
* report always show the full light+dark picture.
|
|
6266
|
+
*/
|
|
6267
|
+
palettes = computed(() => {
|
|
6268
|
+
const base = { ...this.config() };
|
|
6269
|
+
const checks = [];
|
|
6270
|
+
const light = generatePalette({ ...base, mode: 'light', checks });
|
|
6271
|
+
const dark = generatePalette({ ...base, mode: 'dark', checks });
|
|
6272
|
+
return { light, dark, checks };
|
|
6273
|
+
}, ...(ngDevMode ? [{ debugName: "palettes" }] : /* istanbul ignore next */ []));
|
|
6274
|
+
modePanels = computed(() => [
|
|
6275
|
+
{ label: 'light', colors: this.palettes().light },
|
|
6276
|
+
{ label: 'dark', colors: this.palettes().dark },
|
|
6277
|
+
], ...(ngDevMode ? [{ debugName: "modePanels" }] : /* istanbul ignore next */ []));
|
|
6278
|
+
report = computed(() => {
|
|
6279
|
+
const { checks } = this.palettes();
|
|
6280
|
+
return {
|
|
6281
|
+
checks,
|
|
6282
|
+
failing: checks.filter((c) => !c.pass),
|
|
6283
|
+
worst: checks.reduce((worst, c) => Math.min(worst, c.ratio), 21),
|
|
6284
|
+
};
|
|
6285
|
+
}, ...(ngDevMode ? [{ debugName: "report" }] : /* istanbul ignore next */ []));
|
|
6286
|
+
visibleChecks = computed(() => this.showAllPairs() ? this.report().checks : this.report().failing, ...(ngDevMode ? [{ debugName: "visibleChecks" }] : /* istanbul ignore next */ []));
|
|
6287
|
+
snippet = computed(() => {
|
|
6288
|
+
const { radii: _radii, ...rest } = this.config();
|
|
6289
|
+
return JSON.stringify(rest);
|
|
6290
|
+
}, ...(ngDevMode ? [{ debugName: "snippet" }] : /* istanbul ignore next */ []));
|
|
6291
|
+
/** The builder state expressed as engine input — drives all three exports. */
|
|
6292
|
+
generationInput = computed(() => {
|
|
6293
|
+
const targets = this.targets();
|
|
6294
|
+
const seeds = [this.pinPrimary() ? this.primaryHex() : (targets?.primary ?? this.seed())];
|
|
6295
|
+
const secondary = this.pinSecondary() ? this.secondaryHex() : targets?.secondary;
|
|
6296
|
+
if (secondary)
|
|
6297
|
+
seeds.push(secondary);
|
|
6298
|
+
if (targets?.tertiary)
|
|
6299
|
+
seeds.push(targets.tertiary);
|
|
6300
|
+
return {
|
|
6301
|
+
seed: seeds.length === 1 ? seeds[0] : seeds,
|
|
6302
|
+
scheme: this.scheme(),
|
|
6303
|
+
vibe: this.category(),
|
|
6304
|
+
shape: this.shape(),
|
|
6305
|
+
name: 'Brand',
|
|
6306
|
+
};
|
|
6307
|
+
}, ...(ngDevMode ? [{ debugName: "generationInput" }] : /* istanbul ignore next */ []));
|
|
4893
6308
|
color(token) {
|
|
4894
6309
|
return this.theme.colors()[token] ?? 'transparent';
|
|
4895
6310
|
}
|
|
4896
6311
|
apply() {
|
|
4897
6312
|
this.theme.applyPalette(this.config());
|
|
4898
6313
|
}
|
|
6314
|
+
copyToClipboard(kind, text) {
|
|
6315
|
+
void navigator.clipboard?.writeText(text).then(() => {
|
|
6316
|
+
this.copied.set(kind);
|
|
6317
|
+
setTimeout(() => this.copied.set(null), 1600);
|
|
6318
|
+
});
|
|
6319
|
+
}
|
|
6320
|
+
copyThemeFile() {
|
|
6321
|
+
this.copyToClipboard('file', emitThemeFile(this.generationInput()).content);
|
|
6322
|
+
}
|
|
6323
|
+
copyNgAdd() {
|
|
6324
|
+
const input = this.generationInput();
|
|
6325
|
+
const seeds = Array.isArray(input.seed) ? input.seed.join(',') : input.seed;
|
|
6326
|
+
this.copyToClipboard('ngadd', `ng add @uni-design-system/uni-angular --brand=${seeds} --shape=${input.shape}`);
|
|
6327
|
+
}
|
|
6328
|
+
copyDtcg() {
|
|
6329
|
+
const { light, dark } = this.palettes();
|
|
6330
|
+
const radii = ShapeRadii[this.shape()];
|
|
6331
|
+
const spacing = this.theme.spacing();
|
|
6332
|
+
this.copyToClipboard('dtcg', JSON.stringify({
|
|
6333
|
+
light: emitDtcgTokens({ colors: light, radii, spacing }),
|
|
6334
|
+
dark: emitDtcgTokens({ colors: dark, radii, spacing }),
|
|
6335
|
+
}, null, 2));
|
|
6336
|
+
}
|
|
4899
6337
|
setSeed(v) {
|
|
4900
6338
|
if (/^#?[0-9a-fA-F]{6}$/.test(v.replace('#', ''))) {
|
|
4901
6339
|
this.seed.set(v.startsWith('#') ? v : `#${v}`);
|
|
@@ -4912,6 +6350,10 @@ class UniThemeBuilderComponent {
|
|
|
4912
6350
|
this.category.set(v);
|
|
4913
6351
|
this.apply();
|
|
4914
6352
|
}
|
|
6353
|
+
setShape(v) {
|
|
6354
|
+
this.shape.set(v);
|
|
6355
|
+
this.apply();
|
|
6356
|
+
}
|
|
4915
6357
|
setFloor(v) {
|
|
4916
6358
|
this.floor.set(Number(v));
|
|
4917
6359
|
this.apply();
|
|
@@ -4957,6 +6399,7 @@ class UniThemeBuilderComponent {
|
|
|
4957
6399
|
this.seed.set('#4F46E5');
|
|
4958
6400
|
this.scheme.set('triadic');
|
|
4959
6401
|
this.category.set('neutral');
|
|
6402
|
+
this.shape.set('modern');
|
|
4960
6403
|
this.floor.set(18);
|
|
4961
6404
|
this.mode.set('light');
|
|
4962
6405
|
this.targets.set(undefined);
|
|
@@ -5055,6 +6498,16 @@ class UniThemeBuilderComponent {
|
|
|
5055
6498
|
color: this.c('on-primary'),
|
|
5056
6499
|
borderColor: this.c('primary'),
|
|
5057
6500
|
},
|
|
6501
|
+
'& .tb-exports': { display: 'flex', flexDirection: 'column', gap: 6 },
|
|
6502
|
+
'& .tb-exports button': {
|
|
6503
|
+
height: 32,
|
|
6504
|
+
borderRadius: 8,
|
|
6505
|
+
cursor: 'pointer',
|
|
6506
|
+
fontSize: 12.5,
|
|
6507
|
+
border: `1px solid ${this.c('primary')}`,
|
|
6508
|
+
background: this.c('primary-surface'),
|
|
6509
|
+
color: this.c('on-primary-surface'),
|
|
6510
|
+
},
|
|
5058
6511
|
'& .tb-pin.dim input[type=color], & .tb-pin.dim input[type=text]': { opacity: 0.45 },
|
|
5059
6512
|
'& .tb-pin em': {
|
|
5060
6513
|
fontStyle: 'normal',
|
|
@@ -5087,34 +6540,86 @@ class UniThemeBuilderComponent {
|
|
|
5087
6540
|
display: 'flex',
|
|
5088
6541
|
flexDirection: 'column',
|
|
5089
6542
|
gap: 10,
|
|
5090
|
-
'& .tb-
|
|
6543
|
+
'& .tb-modes': {
|
|
5091
6544
|
display: 'grid',
|
|
5092
|
-
gridTemplateColumns: 'repeat(auto-
|
|
5093
|
-
gap:
|
|
6545
|
+
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
|
|
6546
|
+
gap: 14,
|
|
5094
6547
|
marginBottom: 20,
|
|
5095
6548
|
},
|
|
6549
|
+
'& .tb-panel': {
|
|
6550
|
+
border: '1px solid',
|
|
6551
|
+
borderRadius: 14,
|
|
6552
|
+
padding: 14,
|
|
6553
|
+
display: 'flex',
|
|
6554
|
+
flexDirection: 'column',
|
|
6555
|
+
gap: 12,
|
|
6556
|
+
},
|
|
6557
|
+
'& .tb-panel-tag': {
|
|
6558
|
+
fontSize: 10.5,
|
|
6559
|
+
letterSpacing: '0.12em',
|
|
6560
|
+
textTransform: 'uppercase',
|
|
6561
|
+
},
|
|
6562
|
+
'& .tb-mode-swatches': {
|
|
6563
|
+
display: 'grid',
|
|
6564
|
+
gridTemplateColumns: 'repeat(auto-fill, minmax(110px, 1fr))',
|
|
6565
|
+
gap: 8,
|
|
6566
|
+
},
|
|
5096
6567
|
'& .tb-swatch': {
|
|
5097
|
-
borderRadius:
|
|
5098
|
-
padding: '
|
|
5099
|
-
minHeight:
|
|
6568
|
+
borderRadius: 10,
|
|
6569
|
+
padding: '12px 12px',
|
|
6570
|
+
minHeight: 60,
|
|
5100
6571
|
display: 'flex',
|
|
5101
6572
|
flexDirection: 'column',
|
|
5102
6573
|
justifyContent: 'space-between',
|
|
5103
6574
|
},
|
|
5104
|
-
'& .tb-swatch span': { fontSize:
|
|
5105
|
-
'& .tb-swatch code': { fontFamily: 'monospace', fontSize:
|
|
6575
|
+
'& .tb-swatch span': { fontSize: 12.5, fontWeight: 600 },
|
|
6576
|
+
'& .tb-swatch code': { fontFamily: 'monospace', fontSize: 10.5, opacity: 0.85 },
|
|
6577
|
+
'& .tb-mini-card': { borderRadius: 10, overflow: 'hidden', border: '1px solid' },
|
|
6578
|
+
'& .tb-mini-head': { padding: '8px 14px', fontWeight: 600, fontSize: 13 },
|
|
6579
|
+
'& .tb-mini-body': { padding: '10px 14px', fontSize: 12.5, lineHeight: 1.5 },
|
|
5106
6580
|
'& .tb-buttons': { display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center', marginBottom: 14 },
|
|
5107
|
-
'& .tb-
|
|
5108
|
-
'& .tb-
|
|
5109
|
-
'& .tb-
|
|
5110
|
-
|
|
6581
|
+
'& .tb-pass': { color: this.c('success'), fontWeight: 700 },
|
|
6582
|
+
'& .tb-fail': { color: this.c('error'), fontWeight: 700 },
|
|
6583
|
+
'& .tb-link': {
|
|
6584
|
+
marginLeft: 10,
|
|
6585
|
+
background: 'none',
|
|
6586
|
+
border: 'none',
|
|
6587
|
+
cursor: 'pointer',
|
|
6588
|
+
color: this.c('primary'),
|
|
6589
|
+
fontSize: 11,
|
|
6590
|
+
textTransform: 'none',
|
|
6591
|
+
letterSpacing: 'normal',
|
|
6592
|
+
textDecoration: 'underline',
|
|
6593
|
+
},
|
|
6594
|
+
'& .tb-matrix': {
|
|
6595
|
+
maxHeight: 320,
|
|
6596
|
+
overflow: 'auto',
|
|
6597
|
+
border: `1px solid ${this.c('outline')}`,
|
|
6598
|
+
borderRadius: 10,
|
|
6599
|
+
marginBottom: 12,
|
|
6600
|
+
'& table': { width: '100%', borderCollapse: 'collapse', fontSize: 12 },
|
|
6601
|
+
'& th': {
|
|
6602
|
+
position: 'sticky',
|
|
6603
|
+
top: 0,
|
|
6604
|
+
textAlign: 'left',
|
|
6605
|
+
padding: '8px 10px',
|
|
6606
|
+
background: this.c('surface-variant'),
|
|
6607
|
+
color: this.c('on-surface-variant'),
|
|
6608
|
+
fontSize: 10.5,
|
|
6609
|
+
textTransform: 'uppercase',
|
|
6610
|
+
letterSpacing: '0.08em',
|
|
6611
|
+
},
|
|
6612
|
+
'& td': { padding: '6px 10px', borderTop: `1px solid ${this.c('outline')}` },
|
|
6613
|
+
'& td code': { fontFamily: 'monospace', fontSize: 11.5 },
|
|
6614
|
+
'& tr.bad td': { background: this.c('error-container'), color: this.c('on-error-container') },
|
|
6615
|
+
},
|
|
5111
6616
|
'& .tb-hint': { fontSize: 12.5, opacity: 0.6, marginTop: 8 },
|
|
5112
6617
|
}), ...(ngDevMode ? [{ debugName: "preview" }] : /* istanbul ignore next */ []));
|
|
5113
6618
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniThemeBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5114
6619
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniThemeBuilderComponent, isStandalone: true, selector: "uni-theme-builder", host: { properties: { "class": "shell()" } }, ngImport: i0, template: `
|
|
5115
6620
|
<aside [class]="controls()">
|
|
5116
6621
|
<header class="tb-head">
|
|
5117
|
-
<span class="tb-eyebrow">Theme builder ·
|
|
6622
|
+
<span class="tb-eyebrow">Theme builder · Playground</span>
|
|
5118
6623
|
<h2 class="tb-title">Make Uni your brand</h2>
|
|
5119
6624
|
<p class="tb-lede">
|
|
5120
6625
|
Every token is derived in OKLCH from a seed color, a scheme and a category — or bring
|
|
@@ -5161,13 +6666,22 @@ class UniThemeBuilderComponent {
|
|
|
5161
6666
|
</select>
|
|
5162
6667
|
</label>
|
|
5163
6668
|
|
|
6669
|
+
<label class="tb-field">
|
|
6670
|
+
<span>Shape</span>
|
|
6671
|
+
<select (change)="setShape($any($event.target).value)">
|
|
6672
|
+
@for (s of shapes; track s) {
|
|
6673
|
+
<option [value]="s" [selected]="s === shape()">{{ s }}</option>
|
|
6674
|
+
}
|
|
6675
|
+
</select>
|
|
6676
|
+
</label>
|
|
6677
|
+
|
|
5164
6678
|
<label class="tb-field">
|
|
5165
6679
|
<span>Accent saturation floor · {{ floor() }}</span>
|
|
5166
6680
|
<input type="range" min="0" max="45" [value]="floor()" (input)="setFloor($any($event.target).value)" />
|
|
5167
6681
|
</label>
|
|
5168
6682
|
|
|
5169
6683
|
<div class="tb-field">
|
|
5170
|
-
<span>
|
|
6684
|
+
<span>Storybook mode</span>
|
|
5171
6685
|
<div class="tb-toggle">
|
|
5172
6686
|
<button type="button" [class.on]="mode() === 'light'" (click)="setMode('light')">Light</button>
|
|
5173
6687
|
<button type="button" [class.on]="mode() === 'dark'" (click)="setMode('dark')">Dark</button>
|
|
@@ -5196,6 +6710,21 @@ class UniThemeBuilderComponent {
|
|
|
5196
6710
|
</div>
|
|
5197
6711
|
</label>
|
|
5198
6712
|
|
|
6713
|
+
<div class="tb-field">
|
|
6714
|
+
<span>Export</span>
|
|
6715
|
+
<div class="tb-exports">
|
|
6716
|
+
<button type="button" (click)="copyThemeFile()">
|
|
6717
|
+
{{ copied() === 'file' ? 'Copied ✓' : 'Copy uni-theme.ts' }}
|
|
6718
|
+
</button>
|
|
6719
|
+
<button type="button" (click)="copyNgAdd()">
|
|
6720
|
+
{{ copied() === 'ngadd' ? 'Copied ✓' : 'Copy ng add command' }}
|
|
6721
|
+
</button>
|
|
6722
|
+
<button type="button" (click)="copyDtcg()">
|
|
6723
|
+
{{ copied() === 'dtcg' ? 'Copied ✓' : 'Copy DTCG JSON' }}
|
|
6724
|
+
</button>
|
|
6725
|
+
</div>
|
|
6726
|
+
</div>
|
|
6727
|
+
|
|
5199
6728
|
<div class="tb-actions">
|
|
5200
6729
|
<button type="button" class="tb-reset" (click)="reset()">Reset to default</button>
|
|
5201
6730
|
</div>
|
|
@@ -5203,17 +6732,35 @@ class UniThemeBuilderComponent {
|
|
|
5203
6732
|
</aside>
|
|
5204
6733
|
|
|
5205
6734
|
<section [class]="preview()">
|
|
5206
|
-
<p class="tb-group">
|
|
5207
|
-
<div class="tb-
|
|
5208
|
-
@for (
|
|
5209
|
-
<div class="tb-
|
|
5210
|
-
<span>{{
|
|
5211
|
-
<
|
|
6735
|
+
<p class="tb-group">Light & dark — generated together, side by side</p>
|
|
6736
|
+
<div class="tb-modes">
|
|
6737
|
+
@for (m of modePanels(); track m.label) {
|
|
6738
|
+
<div class="tb-panel" [style.background]="m.colors['background']" [style.borderColor]="m.colors['outline']">
|
|
6739
|
+
<span class="tb-panel-tag" [style.color]="m.colors['on-background-variant']">{{ m.label }}</span>
|
|
6740
|
+
<div class="tb-mode-swatches">
|
|
6741
|
+
@for (s of swatches; track s.label) {
|
|
6742
|
+
<div class="tb-swatch" [style.background]="m.colors[s.token]" [style.color]="m.colors[s.on]">
|
|
6743
|
+
<span>{{ s.label }}</span>
|
|
6744
|
+
<code>{{ m.colors[s.token] }}</code>
|
|
6745
|
+
</div>
|
|
6746
|
+
}
|
|
6747
|
+
</div>
|
|
6748
|
+
<div class="tb-mini-card" [style.background]="m.colors['surface']" [style.borderColor]="m.colors['outline']">
|
|
6749
|
+
<div class="tb-mini-head" [style.background]="m.colors['primary']" [style.color]="m.colors['on-primary']">
|
|
6750
|
+
Card header
|
|
6751
|
+
</div>
|
|
6752
|
+
<div class="tb-mini-body" [style.color]="m.colors['on-surface']">
|
|
6753
|
+
Semantic inks stay legible:
|
|
6754
|
+
<b [style.color]="m.colors['error']">error</b> ·
|
|
6755
|
+
<b [style.color]="m.colors['warn']">warn</b> ·
|
|
6756
|
+
<b [style.color]="m.colors['success']">success</b>.
|
|
6757
|
+
</div>
|
|
6758
|
+
</div>
|
|
5212
6759
|
</div>
|
|
5213
6760
|
}
|
|
5214
6761
|
</div>
|
|
5215
6762
|
|
|
5216
|
-
<p class="tb-group">
|
|
6763
|
+
<p class="tb-group">Real components — your brand, live ({{ mode() }})</p>
|
|
5217
6764
|
<div class="tb-buttons">
|
|
5218
6765
|
@for (v of variants; track v) {
|
|
5219
6766
|
<button text-button [variant]="v" size="lg">{{ v }}</button>
|
|
@@ -5225,30 +6772,49 @@ class UniThemeBuilderComponent {
|
|
|
5225
6772
|
}
|
|
5226
6773
|
</div>
|
|
5227
6774
|
|
|
5228
|
-
<p class="tb-group">
|
|
5229
|
-
|
|
5230
|
-
|
|
5231
|
-
|
|
5232
|
-
|
|
5233
|
-
|
|
5234
|
-
<
|
|
5235
|
-
|
|
5236
|
-
|
|
5237
|
-
|
|
5238
|
-
|
|
5239
|
-
|
|
5240
|
-
|
|
5241
|
-
<div class="tb-
|
|
5242
|
-
<
|
|
5243
|
-
<
|
|
5244
|
-
|
|
5245
|
-
|
|
6775
|
+
<p class="tb-group">
|
|
6776
|
+
Contrast report — {{ report().checks.length }} pairs ·
|
|
6777
|
+
worst {{ report().worst }}:1 ·
|
|
6778
|
+
@if (report().failing.length === 0) {
|
|
6779
|
+
<span class="tb-pass">all AA</span>
|
|
6780
|
+
} @else {
|
|
6781
|
+
<span class="tb-fail">{{ report().failing.length }} failing</span>
|
|
6782
|
+
}
|
|
6783
|
+
<button type="button" class="tb-link" (click)="showAllPairs.set(!showAllPairs())">
|
|
6784
|
+
{{ showAllPairs() ? 'hide detail' : 'show all pairs' }}
|
|
6785
|
+
</button>
|
|
6786
|
+
</p>
|
|
6787
|
+
@if (report().failing.length > 0 || showAllPairs()) {
|
|
6788
|
+
<div class="tb-matrix">
|
|
6789
|
+
<table>
|
|
6790
|
+
<thead>
|
|
6791
|
+
<tr><th>mode</th><th>foreground</th><th>on</th><th>ratio</th><th>needs</th><th>level</th></tr>
|
|
6792
|
+
</thead>
|
|
6793
|
+
<tbody>
|
|
6794
|
+
@for (c of visibleChecks(); track $index) {
|
|
6795
|
+
<tr [class.bad]="!c.pass">
|
|
6796
|
+
<td>{{ c.mode }}</td>
|
|
6797
|
+
<td><code>{{ c.foreground }}</code></td>
|
|
6798
|
+
<td><code>{{ c.background }}</code></td>
|
|
6799
|
+
<td>{{ c.ratio }}</td>
|
|
6800
|
+
<td>{{ c.required }}</td>
|
|
6801
|
+
<td>{{ c.level }}</td>
|
|
6802
|
+
</tr>
|
|
6803
|
+
}
|
|
6804
|
+
</tbody>
|
|
6805
|
+
</table>
|
|
5246
6806
|
</div>
|
|
5247
|
-
|
|
6807
|
+
}
|
|
6808
|
+
@if (report().failing.length > 0) {
|
|
6809
|
+
<p class="tb-hint">
|
|
6810
|
+
Failing pairs come from hard-pinned brand colors (pins are emitted verbatim). Un-pin, or
|
|
6811
|
+
use a preset — soft targets keep brand hue while the guard-rail restores AA.
|
|
6812
|
+
</p>
|
|
6813
|
+
}
|
|
5248
6814
|
|
|
5249
6815
|
<p class="tb-hint">Tip: browse to any component story in the sidebar — it's wearing your brand now.</p>
|
|
5250
6816
|
</section>
|
|
5251
|
-
`, isInline: true, dependencies: [{ kind: "component", type: UniButtonComponent, selector: "button[uni-text-button],
|
|
6817
|
+
`, isInline: true, dependencies: [{ kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5252
6818
|
}
|
|
5253
6819
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniThemeBuilderComponent, decorators: [{
|
|
5254
6820
|
type: Component,
|
|
@@ -5260,7 +6826,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
5260
6826
|
template: `
|
|
5261
6827
|
<aside [class]="controls()">
|
|
5262
6828
|
<header class="tb-head">
|
|
5263
|
-
<span class="tb-eyebrow">Theme builder ·
|
|
6829
|
+
<span class="tb-eyebrow">Theme builder · Playground</span>
|
|
5264
6830
|
<h2 class="tb-title">Make Uni your brand</h2>
|
|
5265
6831
|
<p class="tb-lede">
|
|
5266
6832
|
Every token is derived in OKLCH from a seed color, a scheme and a category — or bring
|
|
@@ -5307,13 +6873,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
5307
6873
|
</select>
|
|
5308
6874
|
</label>
|
|
5309
6875
|
|
|
6876
|
+
<label class="tb-field">
|
|
6877
|
+
<span>Shape</span>
|
|
6878
|
+
<select (change)="setShape($any($event.target).value)">
|
|
6879
|
+
@for (s of shapes; track s) {
|
|
6880
|
+
<option [value]="s" [selected]="s === shape()">{{ s }}</option>
|
|
6881
|
+
}
|
|
6882
|
+
</select>
|
|
6883
|
+
</label>
|
|
6884
|
+
|
|
5310
6885
|
<label class="tb-field">
|
|
5311
6886
|
<span>Accent saturation floor · {{ floor() }}</span>
|
|
5312
6887
|
<input type="range" min="0" max="45" [value]="floor()" (input)="setFloor($any($event.target).value)" />
|
|
5313
6888
|
</label>
|
|
5314
6889
|
|
|
5315
6890
|
<div class="tb-field">
|
|
5316
|
-
<span>
|
|
6891
|
+
<span>Storybook mode</span>
|
|
5317
6892
|
<div class="tb-toggle">
|
|
5318
6893
|
<button type="button" [class.on]="mode() === 'light'" (click)="setMode('light')">Light</button>
|
|
5319
6894
|
<button type="button" [class.on]="mode() === 'dark'" (click)="setMode('dark')">Dark</button>
|
|
@@ -5342,6 +6917,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
5342
6917
|
</div>
|
|
5343
6918
|
</label>
|
|
5344
6919
|
|
|
6920
|
+
<div class="tb-field">
|
|
6921
|
+
<span>Export</span>
|
|
6922
|
+
<div class="tb-exports">
|
|
6923
|
+
<button type="button" (click)="copyThemeFile()">
|
|
6924
|
+
{{ copied() === 'file' ? 'Copied ✓' : 'Copy uni-theme.ts' }}
|
|
6925
|
+
</button>
|
|
6926
|
+
<button type="button" (click)="copyNgAdd()">
|
|
6927
|
+
{{ copied() === 'ngadd' ? 'Copied ✓' : 'Copy ng add command' }}
|
|
6928
|
+
</button>
|
|
6929
|
+
<button type="button" (click)="copyDtcg()">
|
|
6930
|
+
{{ copied() === 'dtcg' ? 'Copied ✓' : 'Copy DTCG JSON' }}
|
|
6931
|
+
</button>
|
|
6932
|
+
</div>
|
|
6933
|
+
</div>
|
|
6934
|
+
|
|
5345
6935
|
<div class="tb-actions">
|
|
5346
6936
|
<button type="button" class="tb-reset" (click)="reset()">Reset to default</button>
|
|
5347
6937
|
</div>
|
|
@@ -5349,17 +6939,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
5349
6939
|
</aside>
|
|
5350
6940
|
|
|
5351
6941
|
<section [class]="preview()">
|
|
5352
|
-
<p class="tb-group">
|
|
5353
|
-
<div class="tb-
|
|
5354
|
-
@for (
|
|
5355
|
-
<div class="tb-
|
|
5356
|
-
<span>{{
|
|
5357
|
-
<
|
|
6942
|
+
<p class="tb-group">Light & dark — generated together, side by side</p>
|
|
6943
|
+
<div class="tb-modes">
|
|
6944
|
+
@for (m of modePanels(); track m.label) {
|
|
6945
|
+
<div class="tb-panel" [style.background]="m.colors['background']" [style.borderColor]="m.colors['outline']">
|
|
6946
|
+
<span class="tb-panel-tag" [style.color]="m.colors['on-background-variant']">{{ m.label }}</span>
|
|
6947
|
+
<div class="tb-mode-swatches">
|
|
6948
|
+
@for (s of swatches; track s.label) {
|
|
6949
|
+
<div class="tb-swatch" [style.background]="m.colors[s.token]" [style.color]="m.colors[s.on]">
|
|
6950
|
+
<span>{{ s.label }}</span>
|
|
6951
|
+
<code>{{ m.colors[s.token] }}</code>
|
|
6952
|
+
</div>
|
|
6953
|
+
}
|
|
6954
|
+
</div>
|
|
6955
|
+
<div class="tb-mini-card" [style.background]="m.colors['surface']" [style.borderColor]="m.colors['outline']">
|
|
6956
|
+
<div class="tb-mini-head" [style.background]="m.colors['primary']" [style.color]="m.colors['on-primary']">
|
|
6957
|
+
Card header
|
|
6958
|
+
</div>
|
|
6959
|
+
<div class="tb-mini-body" [style.color]="m.colors['on-surface']">
|
|
6960
|
+
Semantic inks stay legible:
|
|
6961
|
+
<b [style.color]="m.colors['error']">error</b> ·
|
|
6962
|
+
<b [style.color]="m.colors['warn']">warn</b> ·
|
|
6963
|
+
<b [style.color]="m.colors['success']">success</b>.
|
|
6964
|
+
</div>
|
|
6965
|
+
</div>
|
|
5358
6966
|
</div>
|
|
5359
6967
|
}
|
|
5360
6968
|
</div>
|
|
5361
6969
|
|
|
5362
|
-
<p class="tb-group">
|
|
6970
|
+
<p class="tb-group">Real components — your brand, live ({{ mode() }})</p>
|
|
5363
6971
|
<div class="tb-buttons">
|
|
5364
6972
|
@for (v of variants; track v) {
|
|
5365
6973
|
<button text-button [variant]="v" size="lg">{{ v }}</button>
|
|
@@ -5371,26 +6979,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
5371
6979
|
}
|
|
5372
6980
|
</div>
|
|
5373
6981
|
|
|
5374
|
-
<p class="tb-group">
|
|
5375
|
-
|
|
5376
|
-
|
|
5377
|
-
|
|
5378
|
-
|
|
5379
|
-
|
|
5380
|
-
<
|
|
5381
|
-
|
|
5382
|
-
|
|
5383
|
-
|
|
5384
|
-
|
|
5385
|
-
|
|
5386
|
-
|
|
5387
|
-
<div class="tb-
|
|
5388
|
-
<
|
|
5389
|
-
<
|
|
5390
|
-
|
|
5391
|
-
|
|
6982
|
+
<p class="tb-group">
|
|
6983
|
+
Contrast report — {{ report().checks.length }} pairs ·
|
|
6984
|
+
worst {{ report().worst }}:1 ·
|
|
6985
|
+
@if (report().failing.length === 0) {
|
|
6986
|
+
<span class="tb-pass">all AA</span>
|
|
6987
|
+
} @else {
|
|
6988
|
+
<span class="tb-fail">{{ report().failing.length }} failing</span>
|
|
6989
|
+
}
|
|
6990
|
+
<button type="button" class="tb-link" (click)="showAllPairs.set(!showAllPairs())">
|
|
6991
|
+
{{ showAllPairs() ? 'hide detail' : 'show all pairs' }}
|
|
6992
|
+
</button>
|
|
6993
|
+
</p>
|
|
6994
|
+
@if (report().failing.length > 0 || showAllPairs()) {
|
|
6995
|
+
<div class="tb-matrix">
|
|
6996
|
+
<table>
|
|
6997
|
+
<thead>
|
|
6998
|
+
<tr><th>mode</th><th>foreground</th><th>on</th><th>ratio</th><th>needs</th><th>level</th></tr>
|
|
6999
|
+
</thead>
|
|
7000
|
+
<tbody>
|
|
7001
|
+
@for (c of visibleChecks(); track $index) {
|
|
7002
|
+
<tr [class.bad]="!c.pass">
|
|
7003
|
+
<td>{{ c.mode }}</td>
|
|
7004
|
+
<td><code>{{ c.foreground }}</code></td>
|
|
7005
|
+
<td><code>{{ c.background }}</code></td>
|
|
7006
|
+
<td>{{ c.ratio }}</td>
|
|
7007
|
+
<td>{{ c.required }}</td>
|
|
7008
|
+
<td>{{ c.level }}</td>
|
|
7009
|
+
</tr>
|
|
7010
|
+
}
|
|
7011
|
+
</tbody>
|
|
7012
|
+
</table>
|
|
5392
7013
|
</div>
|
|
5393
|
-
|
|
7014
|
+
}
|
|
7015
|
+
@if (report().failing.length > 0) {
|
|
7016
|
+
<p class="tb-hint">
|
|
7017
|
+
Failing pairs come from hard-pinned brand colors (pins are emitted verbatim). Un-pin, or
|
|
7018
|
+
use a preset — soft targets keep brand hue while the guard-rail restores AA.
|
|
7019
|
+
</p>
|
|
7020
|
+
}
|
|
5394
7021
|
|
|
5395
7022
|
<p class="tb-hint">Tip: browse to any component story in the sidebar — it's wearing your brand now.</p>
|
|
5396
7023
|
</section>
|
|
@@ -5446,7 +7073,9 @@ class UniToggleComponent extends BaseComponent {
|
|
|
5446
7073
|
'& .toggle-switch': {
|
|
5447
7074
|
width: toggleWidth,
|
|
5448
7075
|
height: toggleSize,
|
|
5449
|
-
backgroundColor: this.disabled()
|
|
7076
|
+
backgroundColor: this.disabled()
|
|
7077
|
+
? this.getThemeColor('disabled')
|
|
7078
|
+
: this.getThemeColor(this.componentOptions().trackColor ?? 'surface-variant'),
|
|
5450
7079
|
borderRadius: toggleSize / 2,
|
|
5451
7080
|
position: 'relative',
|
|
5452
7081
|
transition: 'all 0.3s ease',
|
|
@@ -5454,18 +7083,19 @@ class UniToggleComponent extends BaseComponent {
|
|
|
5454
7083
|
'& .toggle-slider': {
|
|
5455
7084
|
width: sliderSize,
|
|
5456
7085
|
height: sliderSize,
|
|
5457
|
-
backgroundColor: '
|
|
7086
|
+
backgroundColor: this.getThemeColor(this.componentOptions().knobColor ?? 'surface'),
|
|
5458
7087
|
borderRadius: '50%',
|
|
5459
7088
|
position: 'absolute',
|
|
5460
7089
|
top: sliderOffset,
|
|
5461
7090
|
left: sliderOffset,
|
|
5462
7091
|
transition: 'all 0.3s ease',
|
|
5463
|
-
boxShadow
|
|
7092
|
+
...this.theme.boxShadow('raised'),
|
|
5464
7093
|
},
|
|
7094
|
+
// Hover darkens whatever the token resolves to — the button convention.
|
|
5465
7095
|
'&:hover .toggle-switch': this.disabled()
|
|
5466
7096
|
? {}
|
|
5467
7097
|
: {
|
|
5468
|
-
|
|
7098
|
+
filter: 'brightness(0.95)',
|
|
5469
7099
|
},
|
|
5470
7100
|
});
|
|
5471
7101
|
}, ...(ngDevMode ? [{ debugName: "toggleLabel" }] : /* istanbul ignore next */ []));
|
|
@@ -5498,16 +7128,16 @@ class UniToggleComponent extends BaseComponent {
|
|
|
5498
7128
|
return colors[token] ? colors[token] : colors['primary'];
|
|
5499
7129
|
}
|
|
5500
7130
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5501
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniToggleComponent, isStandalone: true, selector: "uni-toggle
|
|
7131
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniToggleComponent, isStandalone: true, selector: "uni-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange" }, providers: [{ provide: COMPONENT_NAME, useValue: 'toggle' }], usesInheritance: true, ngImport: i0, template: "<label [class]=\"toggleLabel()\">\n <input\n type=\"checkbox\"\n role=\"switch\"\n [class]=\"toggleInput()\"\n [checked]=\"checked()\"\n (change)=\"handleChange($event)\"\n [disabled]=\"disabled()\"\n [attr.aria-invalid]=\"showError() ? true : null\"\n [attr.aria-required]=\"required() ? true : null\"\n [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n />\n <div class=\"toggle-switch\">\n <div class=\"toggle-slider\"></div>\n </div>\n @if (label()) {\n <span uni-text=\"label\">{{ label() }}</span>\n }\n</label>\n", dependencies: [{ kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5502
7132
|
}
|
|
5503
7133
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniToggleComponent, decorators: [{
|
|
5504
7134
|
type: Component,
|
|
5505
|
-
args: [{ selector: 'uni-toggle
|
|
7135
|
+
args: [{ selector: 'uni-toggle', imports: [UniTextComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'toggle' }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [class]=\"toggleLabel()\">\n <input\n type=\"checkbox\"\n role=\"switch\"\n [class]=\"toggleInput()\"\n [checked]=\"checked()\"\n (change)=\"handleChange($event)\"\n [disabled]=\"disabled()\"\n [attr.aria-invalid]=\"showError() ? true : null\"\n [attr.aria-required]=\"required() ? true : null\"\n [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n />\n <div class=\"toggle-switch\">\n <div class=\"toggle-slider\"></div>\n </div>\n @if (label()) {\n <span uni-text=\"label\">{{ label() }}</span>\n }\n</label>\n" }]
|
|
5506
7136
|
}], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
|
|
5507
7137
|
|
|
5508
7138
|
/**
|
|
5509
7139
|
* Generated bundle index. Do not edit.
|
|
5510
7140
|
*/
|
|
5511
7141
|
|
|
5512
|
-
export { BodyRenderDirective, ConfirmationDialogComponent, DragAndDropDirective, FOCUSABLE_SELECTOR, LocalStorageService, NotificationService, NotificationsComponent, RippleDirective, ThemeService, UNI_THEMES, UniAlertComponent, UniBackgroundComponent, UniBadgeComponent, UniBaseDatasource, UniBoxComponent, UniButtonComponent, UniButtonGroupComponent, UniCardComponent, UniCardContentComponent, UniCardHeaderComponent, UniCenterComponent, UniCheckboxComponent, UniDataSearchComponent, UniDataTableComponent, UniDebounceInputComponent, UniDialogButtonsComponent, UniDialogComponent, UniDialogHeaderComponent, UniDividerComponent, UniDropdownComponent, UniExpandAreaComponent, UniExpandComponent, UniExpandToggleComponent, UniFileDropZoneComponent, UniGridAreaComponent, UniGridComponent, UniIconButtonComponent, UniIconComponent, UniInputBoxComponent, UniInputComponent, UniJsonViewComponent, UniMenuComponent, UniMultiSelectComponent, UniMultiSelectDropdownComponent, UniNotificationBadgeComponent, UniPaginatorComponent, UniPopoverComponent, UniProgressBarComponent, UniProgressGaugeComponent, UniRadioComponent, UniRecordDatasource, UniRowComponent, UniScrollAreaComponent, UniSearchInputComponent, UniSelectComponent, UniServerSideDatasource, UniSnackbarComponent, UniSortHeaderComponent, UniStackComponent, UniSymbolComponent, UniTagComponent, UniTextComponent, UniThemeBuilderComponent, UniToggleComponent, UniTooltipComponent, UniWrapComponent, acceptableFile, anchorArrowStyles, anchorStyles, getFileExtension, motionSafe, newAnchorName, resolveFocusTarget, uniqueId, useTimer, visuallyHidden };
|
|
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 };
|
|
5513
7143
|
//# sourceMappingURL=uni-design-system-uni-angular.mjs.map
|