@vialiq/web-components 0.14.0 → 0.15.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.
- package/animation-constants-LE17KXe0.js +476 -0
- package/badge/index.js +1 -0
- package/badge/vi-badge.js +603 -0
- package/checkbox/vi-checkbox.d.ts +1 -1
- package/checkbox/vi-checkbox.js +1 -1
- package/flow-BYvW0t4Z.js +883 -0
- package/index.js +7 -4427
- package/input/vi-input.d.ts +2 -2
- package/input/vi-input.js +2 -2
- package/overlay-manager-CZSDXl6Z.js +108 -0
- package/package.json +3 -3
- package/radio/vi-radio-group.d.ts +1 -1
- package/radio/vi-radio-group.js +3 -3
- package/tooltip/vi-tooltip.js +3 -109
package/index.js
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
export { V as ViElement } from './vi-element-C6GfDPs3.js';
|
|
2
2
|
export { ViButton } from './button/vi-button.js';
|
|
3
3
|
export { ViInput } from './input/vi-input.js';
|
|
4
4
|
export { ViIcon } from './icons/vi-icon.js';
|
|
5
|
-
|
|
6
|
-
export { getIcon } from './icons/registry.js';
|
|
5
|
+
export { getIcon, registerIcons } from './icons/registry.js';
|
|
7
6
|
export { ViRadio } from './radio/vi-radio.js';
|
|
8
7
|
export { ViRadioGroup } from './radio/vi-radio-group.js';
|
|
9
8
|
export { ViCheckbox } from './checkbox/vi-checkbox.js';
|
|
@@ -11,4427 +10,8 @@ export { ViTooltip } from './tooltip/vi-tooltip.js';
|
|
|
11
10
|
export { ViTextarea } from './textarea/vi-textarea.js';
|
|
12
11
|
export { ViAccordion } from './accordion/vi-accordion.js';
|
|
13
12
|
export { ViAccordionItem } from './accordion/vi-accordion-item.js';
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
const badgeStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.badge{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;box-sizing:border-box;font-size:var(--vi-badge-font-size, 11px);font-weight:var(--vi-badge-font-weight, var(--vi-font-weight-semibold, 600));padding:var(--vi-badge-padding, 2px 8px);border-radius:var(--vi-badge-border-radius, 9999px);gap:var(--vi-badge-gap, 4px);border:var(--vi-border-width-thin, 1px) solid transparent}.dot{display:inline-block;width:var(--vi-badge-dot-size, 8px);height:var(--vi-badge-dot-size, 8px);border-radius:50%;background-color:currentColor;flex-shrink:0}.icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}}:host{display:inline-block;vertical-align:middle}:host([hidden]),:host([count=\"0\"]:not([show-zero])){display:none!important}:host([size=sm]){--vi-badge-font-size: 10px;--vi-badge-padding: 0 6px;--vi-badge-gap: 2px;--vi-badge-dot-size: 6px}:host([size=md]){--vi-badge-font-size: 11px;--vi-badge-padding: 2px 8px;--vi-badge-gap: 4px;--vi-badge-dot-size: 8px}:host([size=lg]){--vi-badge-font-size: 13px;--vi-badge-padding: 4px 12px;--vi-badge-gap: 6px;--vi-badge-dot-size: 10px}:host([pill]){--vi-badge-border-radius: 9999px}:host(:not([pill])){--vi-badge-border-radius: var(--vi-border-radius-sm, 2px)}.badge.dot-only{--vi-badge-padding: 4px}:host([variant=neutral]) .badge{background-color:var(--vi-badge-neutral-bg, var(--vi-border-02, #eeeeee));color:var(--vi-badge-neutral-color, var(--vi-text-secondary, #4b5563))}:host([variant=primary]) .badge{background-color:var(--vi-badge-primary-bg, var(--vi-bg-info, #e3f2fd));color:var(--vi-badge-primary-color, var(--vi-text-info, #3676d0))}:host([variant=success]) .badge{background-color:var(--vi-badge-success-bg, var(--vi-bg-success, #e6f9f0));color:var(--vi-badge-success-color, var(--vi-text-success, #265a3d))}:host([variant=warning]) .badge{background-color:var(--vi-badge-warning-bg, var(--vi-bg-warning, #fff8e1));color:var(--vi-badge-warning-color, var(--vi-text-warning, #e68300))}:host([variant=danger]) .badge{background-color:var(--vi-badge-danger-bg, var(--vi-bg-error, #ffebee));color:var(--vi-badge-danger-color, var(--vi-text-error, #db231b))}:host([variant=info]) .badge{background-color:var(--vi-badge-info-bg, var(--vi-bg-info, #e3f2fd));color:var(--vi-badge-info-color, var(--vi-text-info, #3676d0))}:host([outline][variant=neutral]) .badge{background-color:transparent;color:var(--vi-badge-neutral-color, var(--vi-text-secondary, #4b5563));border-color:var(--vi-badge-neutral-border, var(--vi-border-03, #e0e0e0))}:host([outline][variant=primary]) .badge{background-color:transparent;color:var(--vi-badge-primary-color, var(--vi-text-info, #3676d0));border-color:var(--vi-badge-primary-border, var(--vi-color-primary, #3676d0))}:host([outline][variant=success]) .badge{background-color:transparent;color:var(--vi-badge-success-color, var(--vi-text-success, #265a3d));border-color:var(--vi-badge-success-border, var(--vi-color-success, #489167))}:host([outline][variant=warning]) .badge{background-color:transparent;color:var(--vi-badge-warning-color, var(--vi-text-warning, #e68300));border-color:var(--vi-badge-warning-border, var(--vi-color-warning, #ffba00))}:host([outline][variant=danger]) .badge{background-color:transparent;color:var(--vi-badge-danger-color, var(--vi-text-error, #db231b));border-color:var(--vi-badge-danger-border, var(--vi-color-error, #ef4444))}:host([outline][variant=info]) .badge{background-color:transparent;color:var(--vi-badge-info-color, var(--vi-text-info, #3676d0));border-color:var(--vi-badge-info-border, var(--vi-color-info, #3676d0))}.icon{display:inline-flex;flex-shrink:0}.icon[hidden]{display:none}::slotted(vi-icon),::slotted(svg){--vi-icon-size: 1em;width:1em;height:1em}";
|
|
21
|
-
|
|
22
|
-
function applyDecs2203RFactory$4() {
|
|
23
|
-
function createAddInitializerMethod(initializers, decoratorFinishedRef) {
|
|
24
|
-
return function addInitializer(initializer) {
|
|
25
|
-
assertNotFinished(decoratorFinishedRef, "addInitializer");
|
|
26
|
-
assertCallable(initializer, "An initializer");
|
|
27
|
-
initializers.push(initializer);
|
|
28
|
-
};
|
|
29
|
-
}
|
|
30
|
-
function memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value) {
|
|
31
|
-
var kindStr;
|
|
32
|
-
switch(kind){
|
|
33
|
-
case 1:
|
|
34
|
-
kindStr = "accessor";
|
|
35
|
-
break;
|
|
36
|
-
case 2:
|
|
37
|
-
kindStr = "method";
|
|
38
|
-
break;
|
|
39
|
-
case 3:
|
|
40
|
-
kindStr = "getter";
|
|
41
|
-
break;
|
|
42
|
-
case 4:
|
|
43
|
-
kindStr = "setter";
|
|
44
|
-
break;
|
|
45
|
-
default:
|
|
46
|
-
kindStr = "field";
|
|
47
|
-
}
|
|
48
|
-
var ctx = {
|
|
49
|
-
kind: kindStr,
|
|
50
|
-
name: isPrivate ? "#" + name : name,
|
|
51
|
-
static: isStatic,
|
|
52
|
-
private: isPrivate,
|
|
53
|
-
metadata: metadata
|
|
54
|
-
};
|
|
55
|
-
var decoratorFinishedRef = {
|
|
56
|
-
v: false
|
|
57
|
-
};
|
|
58
|
-
ctx.addInitializer = createAddInitializerMethod(initializers, decoratorFinishedRef);
|
|
59
|
-
var get, set;
|
|
60
|
-
if (kind === 0) {
|
|
61
|
-
if (isPrivate) {
|
|
62
|
-
get = desc.get;
|
|
63
|
-
set = desc.set;
|
|
64
|
-
} else {
|
|
65
|
-
get = function() {
|
|
66
|
-
return this[name];
|
|
67
|
-
};
|
|
68
|
-
set = function(v) {
|
|
69
|
-
this[name] = v;
|
|
70
|
-
};
|
|
71
|
-
}
|
|
72
|
-
} else if (kind === 2) {
|
|
73
|
-
get = function() {
|
|
74
|
-
return desc.value;
|
|
75
|
-
};
|
|
76
|
-
} else {
|
|
77
|
-
if (kind === 1 || kind === 3) {
|
|
78
|
-
get = function() {
|
|
79
|
-
return desc.get.call(this);
|
|
80
|
-
};
|
|
81
|
-
}
|
|
82
|
-
if (kind === 1 || kind === 4) {
|
|
83
|
-
set = function(v) {
|
|
84
|
-
desc.set.call(this, v);
|
|
85
|
-
};
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
ctx.access = get && set ? {
|
|
89
|
-
get: get,
|
|
90
|
-
set: set
|
|
91
|
-
} : get ? {
|
|
92
|
-
get: get
|
|
93
|
-
} : {
|
|
94
|
-
set: set
|
|
95
|
-
};
|
|
96
|
-
try {
|
|
97
|
-
return dec(value, ctx);
|
|
98
|
-
} finally{
|
|
99
|
-
decoratorFinishedRef.v = true;
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
function assertNotFinished(decoratorFinishedRef, fnName) {
|
|
103
|
-
if (decoratorFinishedRef.v) {
|
|
104
|
-
throw new Error("attempted to call " + fnName + " after decoration was finished");
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
function assertCallable(fn, hint) {
|
|
108
|
-
if (typeof fn !== "function") {
|
|
109
|
-
throw new TypeError(hint + " must be a function");
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
function assertValidReturnValue(kind, value) {
|
|
113
|
-
var type = typeof value;
|
|
114
|
-
if (kind === 1) {
|
|
115
|
-
if (type !== "object" || value === null) {
|
|
116
|
-
throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
|
|
117
|
-
}
|
|
118
|
-
if (value.get !== undefined) {
|
|
119
|
-
assertCallable(value.get, "accessor.get");
|
|
120
|
-
}
|
|
121
|
-
if (value.set !== undefined) {
|
|
122
|
-
assertCallable(value.set, "accessor.set");
|
|
123
|
-
}
|
|
124
|
-
if (value.init !== undefined) {
|
|
125
|
-
assertCallable(value.init, "accessor.init");
|
|
126
|
-
}
|
|
127
|
-
} else if (type !== "function") {
|
|
128
|
-
var hint;
|
|
129
|
-
if (kind === 0) {
|
|
130
|
-
hint = "field";
|
|
131
|
-
} else if (kind === 10) {
|
|
132
|
-
hint = "class";
|
|
133
|
-
} else {
|
|
134
|
-
hint = "method";
|
|
135
|
-
}
|
|
136
|
-
throw new TypeError(hint + " decorators must return a function or void 0");
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
function applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata) {
|
|
140
|
-
var decs = decInfo[0];
|
|
141
|
-
var desc, init, value;
|
|
142
|
-
if (isPrivate) {
|
|
143
|
-
if (kind === 0 || kind === 1) {
|
|
144
|
-
desc = {
|
|
145
|
-
get: decInfo[3],
|
|
146
|
-
set: decInfo[4]
|
|
147
|
-
};
|
|
148
|
-
} else if (kind === 3) {
|
|
149
|
-
desc = {
|
|
150
|
-
get: decInfo[3]
|
|
151
|
-
};
|
|
152
|
-
} else if (kind === 4) {
|
|
153
|
-
desc = {
|
|
154
|
-
set: decInfo[3]
|
|
155
|
-
};
|
|
156
|
-
} else {
|
|
157
|
-
desc = {
|
|
158
|
-
value: decInfo[3]
|
|
159
|
-
};
|
|
160
|
-
}
|
|
161
|
-
} else if (kind !== 0) {
|
|
162
|
-
desc = Object.getOwnPropertyDescriptor(base, name);
|
|
163
|
-
}
|
|
164
|
-
if (kind === 1) {
|
|
165
|
-
value = {
|
|
166
|
-
get: desc.get,
|
|
167
|
-
set: desc.set
|
|
168
|
-
};
|
|
169
|
-
} else if (kind === 2) {
|
|
170
|
-
value = desc.value;
|
|
171
|
-
} else if (kind === 3) {
|
|
172
|
-
value = desc.get;
|
|
173
|
-
} else if (kind === 4) {
|
|
174
|
-
value = desc.set;
|
|
175
|
-
}
|
|
176
|
-
var newValue, get, set;
|
|
177
|
-
if (typeof decs === "function") {
|
|
178
|
-
newValue = memberDec(decs, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
|
|
179
|
-
if (newValue !== void 0) {
|
|
180
|
-
assertValidReturnValue(kind, newValue);
|
|
181
|
-
if (kind === 0) {
|
|
182
|
-
init = newValue;
|
|
183
|
-
} else if (kind === 1) {
|
|
184
|
-
init = newValue.init;
|
|
185
|
-
get = newValue.get || value.get;
|
|
186
|
-
set = newValue.set || value.set;
|
|
187
|
-
value = {
|
|
188
|
-
get: get,
|
|
189
|
-
set: set
|
|
190
|
-
};
|
|
191
|
-
} else {
|
|
192
|
-
value = newValue;
|
|
193
|
-
}
|
|
194
|
-
}
|
|
195
|
-
} else {
|
|
196
|
-
for(var i = decs.length - 1; i >= 0; i--){
|
|
197
|
-
var dec = decs[i];
|
|
198
|
-
newValue = memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
|
|
199
|
-
if (newValue !== void 0) {
|
|
200
|
-
assertValidReturnValue(kind, newValue);
|
|
201
|
-
var newInit;
|
|
202
|
-
if (kind === 0) {
|
|
203
|
-
newInit = newValue;
|
|
204
|
-
} else if (kind === 1) {
|
|
205
|
-
newInit = newValue.init;
|
|
206
|
-
get = newValue.get || value.get;
|
|
207
|
-
set = newValue.set || value.set;
|
|
208
|
-
value = {
|
|
209
|
-
get: get,
|
|
210
|
-
set: set
|
|
211
|
-
};
|
|
212
|
-
} else {
|
|
213
|
-
value = newValue;
|
|
214
|
-
}
|
|
215
|
-
if (newInit !== void 0) {
|
|
216
|
-
if (init === void 0) {
|
|
217
|
-
init = newInit;
|
|
218
|
-
} else if (typeof init === "function") {
|
|
219
|
-
init = [
|
|
220
|
-
init,
|
|
221
|
-
newInit
|
|
222
|
-
];
|
|
223
|
-
} else {
|
|
224
|
-
init.push(newInit);
|
|
225
|
-
}
|
|
226
|
-
}
|
|
227
|
-
}
|
|
228
|
-
}
|
|
229
|
-
}
|
|
230
|
-
if (kind === 0 || kind === 1) {
|
|
231
|
-
if (init === void 0) {
|
|
232
|
-
init = function(instance, init) {
|
|
233
|
-
return init;
|
|
234
|
-
};
|
|
235
|
-
} else if (typeof init !== "function") {
|
|
236
|
-
var ownInitializers = init;
|
|
237
|
-
init = function(instance, init) {
|
|
238
|
-
var value = init;
|
|
239
|
-
for(var i = 0; i < ownInitializers.length; i++){
|
|
240
|
-
value = ownInitializers[i].call(instance, value);
|
|
241
|
-
}
|
|
242
|
-
return value;
|
|
243
|
-
};
|
|
244
|
-
} else {
|
|
245
|
-
var originalInitializer = init;
|
|
246
|
-
init = function(instance, init) {
|
|
247
|
-
return originalInitializer.call(instance, init);
|
|
248
|
-
};
|
|
249
|
-
}
|
|
250
|
-
ret.push(init);
|
|
251
|
-
}
|
|
252
|
-
if (kind !== 0) {
|
|
253
|
-
if (kind === 1) {
|
|
254
|
-
desc.get = value.get;
|
|
255
|
-
desc.set = value.set;
|
|
256
|
-
} else if (kind === 2) {
|
|
257
|
-
desc.value = value;
|
|
258
|
-
} else if (kind === 3) {
|
|
259
|
-
desc.get = value;
|
|
260
|
-
} else if (kind === 4) {
|
|
261
|
-
desc.set = value;
|
|
262
|
-
}
|
|
263
|
-
if (isPrivate) {
|
|
264
|
-
if (kind === 1) {
|
|
265
|
-
ret.push(function(instance, args) {
|
|
266
|
-
return value.get.call(instance, args);
|
|
267
|
-
});
|
|
268
|
-
ret.push(function(instance, args) {
|
|
269
|
-
return value.set.call(instance, args);
|
|
270
|
-
});
|
|
271
|
-
} else if (kind === 2) {
|
|
272
|
-
ret.push(value);
|
|
273
|
-
} else {
|
|
274
|
-
ret.push(function(instance, args) {
|
|
275
|
-
return value.call(instance, args);
|
|
276
|
-
});
|
|
277
|
-
}
|
|
278
|
-
} else {
|
|
279
|
-
Object.defineProperty(base, name, desc);
|
|
280
|
-
}
|
|
281
|
-
}
|
|
282
|
-
}
|
|
283
|
-
function applyMemberDecs(Class, decInfos, metadata) {
|
|
284
|
-
var ret = [];
|
|
285
|
-
var protoInitializers;
|
|
286
|
-
var staticInitializers;
|
|
287
|
-
var existingProtoNonFields = new Map();
|
|
288
|
-
var existingStaticNonFields = new Map();
|
|
289
|
-
for(var i = 0; i < decInfos.length; i++){
|
|
290
|
-
var decInfo = decInfos[i];
|
|
291
|
-
if (!Array.isArray(decInfo)) continue;
|
|
292
|
-
var kind = decInfo[1];
|
|
293
|
-
var name = decInfo[2];
|
|
294
|
-
var isPrivate = decInfo.length > 3;
|
|
295
|
-
var isStatic = kind >= 5;
|
|
296
|
-
var base;
|
|
297
|
-
var initializers;
|
|
298
|
-
if (isStatic) {
|
|
299
|
-
base = Class;
|
|
300
|
-
kind = kind - 5;
|
|
301
|
-
staticInitializers = staticInitializers || [];
|
|
302
|
-
initializers = staticInitializers;
|
|
303
|
-
} else {
|
|
304
|
-
base = Class.prototype;
|
|
305
|
-
protoInitializers = protoInitializers || [];
|
|
306
|
-
initializers = protoInitializers;
|
|
307
|
-
}
|
|
308
|
-
if (kind !== 0 && !isPrivate) {
|
|
309
|
-
var existingNonFields = isStatic ? existingStaticNonFields : existingProtoNonFields;
|
|
310
|
-
var existingKind = existingNonFields.get(name) || 0;
|
|
311
|
-
if (existingKind === true || existingKind === 3 && kind !== 4 || existingKind === 4 && kind !== 3) {
|
|
312
|
-
throw new Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + name);
|
|
313
|
-
} else if (!existingKind && kind > 2) {
|
|
314
|
-
existingNonFields.set(name, kind);
|
|
315
|
-
} else {
|
|
316
|
-
existingNonFields.set(name, true);
|
|
317
|
-
}
|
|
318
|
-
}
|
|
319
|
-
applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata);
|
|
320
|
-
}
|
|
321
|
-
pushInitializers(ret, protoInitializers);
|
|
322
|
-
pushInitializers(ret, staticInitializers);
|
|
323
|
-
return ret;
|
|
324
|
-
}
|
|
325
|
-
function pushInitializers(ret, initializers) {
|
|
326
|
-
if (initializers) {
|
|
327
|
-
ret.push(function(instance) {
|
|
328
|
-
for(var i = 0; i < initializers.length; i++){
|
|
329
|
-
initializers[i].call(instance);
|
|
330
|
-
}
|
|
331
|
-
return instance;
|
|
332
|
-
});
|
|
333
|
-
}
|
|
334
|
-
}
|
|
335
|
-
function applyClassDecs(targetClass, classDecs, metadata) {
|
|
336
|
-
if (classDecs.length > 0) {
|
|
337
|
-
var initializers = [];
|
|
338
|
-
var newClass = targetClass;
|
|
339
|
-
var name = targetClass.name;
|
|
340
|
-
for(var i = classDecs.length - 1; i >= 0; i--){
|
|
341
|
-
var decoratorFinishedRef = {
|
|
342
|
-
v: false
|
|
343
|
-
};
|
|
344
|
-
try {
|
|
345
|
-
var nextNewClass = classDecs[i](newClass, {
|
|
346
|
-
kind: "class",
|
|
347
|
-
name: name,
|
|
348
|
-
addInitializer: createAddInitializerMethod(initializers, decoratorFinishedRef),
|
|
349
|
-
metadata
|
|
350
|
-
});
|
|
351
|
-
} finally{
|
|
352
|
-
decoratorFinishedRef.v = true;
|
|
353
|
-
}
|
|
354
|
-
if (nextNewClass !== undefined) {
|
|
355
|
-
assertValidReturnValue(10, nextNewClass);
|
|
356
|
-
newClass = nextNewClass;
|
|
357
|
-
}
|
|
358
|
-
}
|
|
359
|
-
return [
|
|
360
|
-
defineMetadata(newClass, metadata),
|
|
361
|
-
function() {
|
|
362
|
-
for(var i = 0; i < initializers.length; i++){
|
|
363
|
-
initializers[i].call(newClass);
|
|
364
|
-
}
|
|
365
|
-
}
|
|
366
|
-
];
|
|
367
|
-
}
|
|
368
|
-
}
|
|
369
|
-
function defineMetadata(Class, metadata) {
|
|
370
|
-
return Object.defineProperty(Class, Symbol.metadata || Symbol.for("Symbol.metadata"), {
|
|
371
|
-
configurable: true,
|
|
372
|
-
enumerable: true,
|
|
373
|
-
value: metadata
|
|
374
|
-
});
|
|
375
|
-
}
|
|
376
|
-
return function applyDecs2203R(targetClass, memberDecs, classDecs, parentClass) {
|
|
377
|
-
if (parentClass !== void 0) {
|
|
378
|
-
var parentMetadata = parentClass[Symbol.metadata || Symbol.for("Symbol.metadata")];
|
|
379
|
-
}
|
|
380
|
-
var metadata = Object.create(parentMetadata === void 0 ? null : parentMetadata);
|
|
381
|
-
var e = applyMemberDecs(targetClass, memberDecs, metadata);
|
|
382
|
-
if (!classDecs.length) defineMetadata(targetClass, metadata);
|
|
383
|
-
return {
|
|
384
|
-
e: e,
|
|
385
|
-
get c () {
|
|
386
|
-
return applyClassDecs(targetClass, classDecs, metadata);
|
|
387
|
-
}
|
|
388
|
-
};
|
|
389
|
-
};
|
|
390
|
-
}
|
|
391
|
-
function _apply_decs_2203_r$4(targetClass, memberDecs, classDecs, parentClass) {
|
|
392
|
-
return (_apply_decs_2203_r$4 = applyDecs2203RFactory$4())(targetClass, memberDecs, classDecs, parentClass);
|
|
393
|
-
}
|
|
394
|
-
function _identity$3(x) {
|
|
395
|
-
return x;
|
|
396
|
-
}
|
|
397
|
-
var _dec$4, _initClass$4, _ViElement$2, _dec1$4, _dec2$4, _dec3$4, _dec4$4, _dec5$4, _dec6$4, _dec7$4, _dec8$4, _dec9$4, _dec10$4, /** Colour semantic */ _init_variant$2, /** Size */ _init_size$1, /** Show coloured dot */ _init_dot, /** Fully rounded (pill shape) vs. square */ _init_pill, /** Numeric count to display */ _init_count, /** Show the badge even if the count is zero */ _init_showZero, /** Max count before showing {max}+ */ _init_max, /** Outlined/ghost style */ _init_outline, _init__hasIcon$1, _init__hasDefaultSlot, _initProto$4;
|
|
398
|
-
let _ViBadge;
|
|
399
|
-
_dec$4 = customElement('vi-badge'), _dec1$4 = property({
|
|
400
|
-
type: String,
|
|
401
|
-
reflect: true
|
|
402
|
-
}), _dec2$4 = property({
|
|
403
|
-
type: String,
|
|
404
|
-
reflect: true
|
|
405
|
-
}), _dec3$4 = property({
|
|
406
|
-
type: Boolean,
|
|
407
|
-
reflect: true
|
|
408
|
-
}), _dec4$4 = property({
|
|
409
|
-
type: Boolean,
|
|
410
|
-
reflect: true
|
|
411
|
-
}), _dec5$4 = property({
|
|
412
|
-
type: Number,
|
|
413
|
-
reflect: true
|
|
414
|
-
}), _dec6$4 = property({
|
|
415
|
-
type: Boolean,
|
|
416
|
-
reflect: true,
|
|
417
|
-
attribute: 'show-zero'
|
|
418
|
-
}), _dec7$4 = property({
|
|
419
|
-
type: Number
|
|
420
|
-
}), _dec8$4 = property({
|
|
421
|
-
type: Boolean,
|
|
422
|
-
reflect: true
|
|
423
|
-
}), _dec9$4 = state(), _dec10$4 = state();
|
|
424
|
-
new class extends _identity$3 {
|
|
425
|
-
constructor(){
|
|
426
|
-
super(_ViBadge), _initClass$4();
|
|
427
|
-
}
|
|
428
|
-
static{
|
|
429
|
-
class ViBadge extends (_ViElement$2 = ViElement) {
|
|
430
|
-
static{
|
|
431
|
-
({ e: [_init_variant$2, _init_size$1, _init_dot, _init_pill, _init_count, _init_showZero, _init_max, _init_outline, _init__hasIcon$1, _init__hasDefaultSlot, _initProto$4], c: [_ViBadge, _initClass$4] } = _apply_decs_2203_r$4(this, [
|
|
432
|
-
[
|
|
433
|
-
_dec1$4,
|
|
434
|
-
1,
|
|
435
|
-
"variant"
|
|
436
|
-
],
|
|
437
|
-
[
|
|
438
|
-
_dec2$4,
|
|
439
|
-
1,
|
|
440
|
-
"size"
|
|
441
|
-
],
|
|
442
|
-
[
|
|
443
|
-
_dec3$4,
|
|
444
|
-
1,
|
|
445
|
-
"dot"
|
|
446
|
-
],
|
|
447
|
-
[
|
|
448
|
-
_dec4$4,
|
|
449
|
-
1,
|
|
450
|
-
"pill"
|
|
451
|
-
],
|
|
452
|
-
[
|
|
453
|
-
_dec5$4,
|
|
454
|
-
1,
|
|
455
|
-
"count"
|
|
456
|
-
],
|
|
457
|
-
[
|
|
458
|
-
_dec6$4,
|
|
459
|
-
1,
|
|
460
|
-
"showZero"
|
|
461
|
-
],
|
|
462
|
-
[
|
|
463
|
-
_dec7$4,
|
|
464
|
-
1,
|
|
465
|
-
"max"
|
|
466
|
-
],
|
|
467
|
-
[
|
|
468
|
-
_dec8$4,
|
|
469
|
-
1,
|
|
470
|
-
"outline"
|
|
471
|
-
],
|
|
472
|
-
[
|
|
473
|
-
_dec9$4,
|
|
474
|
-
1,
|
|
475
|
-
"_hasIcon"
|
|
476
|
-
],
|
|
477
|
-
[
|
|
478
|
-
_dec10$4,
|
|
479
|
-
1,
|
|
480
|
-
"_hasDefaultSlot"
|
|
481
|
-
]
|
|
482
|
-
], [
|
|
483
|
-
_dec$4
|
|
484
|
-
], _ViElement$2));
|
|
485
|
-
}
|
|
486
|
-
static styles = css`${unsafeCSS(badgeStyles)}`;
|
|
487
|
-
#___private_variant_1 = (_initProto$4(this), _init_variant$2(this, 'neutral'));
|
|
488
|
-
get variant() {
|
|
489
|
-
return this.#___private_variant_1;
|
|
490
|
-
}
|
|
491
|
-
set variant(_v) {
|
|
492
|
-
this.#___private_variant_1 = _v;
|
|
493
|
-
}
|
|
494
|
-
#___private_size_2 = _init_size$1(this, 'md');
|
|
495
|
-
get size() {
|
|
496
|
-
return this.#___private_size_2;
|
|
497
|
-
}
|
|
498
|
-
set size(_v) {
|
|
499
|
-
this.#___private_size_2 = _v;
|
|
500
|
-
}
|
|
501
|
-
#___private_dot_3 = _init_dot(this, false);
|
|
502
|
-
get dot() {
|
|
503
|
-
return this.#___private_dot_3;
|
|
504
|
-
}
|
|
505
|
-
set dot(_v) {
|
|
506
|
-
this.#___private_dot_3 = _v;
|
|
507
|
-
}
|
|
508
|
-
#___private_pill_4 = _init_pill(this, true);
|
|
509
|
-
get pill() {
|
|
510
|
-
return this.#___private_pill_4;
|
|
511
|
-
}
|
|
512
|
-
set pill(_v) {
|
|
513
|
-
this.#___private_pill_4 = _v;
|
|
514
|
-
}
|
|
515
|
-
#___private_count_5 = _init_count(this, undefined);
|
|
516
|
-
get count() {
|
|
517
|
-
return this.#___private_count_5;
|
|
518
|
-
}
|
|
519
|
-
set count(_v) {
|
|
520
|
-
this.#___private_count_5 = _v;
|
|
521
|
-
}
|
|
522
|
-
#___private_showZero_6 = _init_showZero(this, false);
|
|
523
|
-
get showZero() {
|
|
524
|
-
return this.#___private_showZero_6;
|
|
525
|
-
}
|
|
526
|
-
set showZero(_v) {
|
|
527
|
-
this.#___private_showZero_6 = _v;
|
|
528
|
-
}
|
|
529
|
-
#___private_max_7 = _init_max(this, 99);
|
|
530
|
-
get max() {
|
|
531
|
-
return this.#___private_max_7;
|
|
532
|
-
}
|
|
533
|
-
set max(_v) {
|
|
534
|
-
this.#___private_max_7 = _v;
|
|
535
|
-
}
|
|
536
|
-
#___private_outline_8 = _init_outline(this, false);
|
|
537
|
-
get outline() {
|
|
538
|
-
return this.#___private_outline_8;
|
|
539
|
-
}
|
|
540
|
-
set outline(_v) {
|
|
541
|
-
this.#___private_outline_8 = _v;
|
|
542
|
-
}
|
|
543
|
-
#___private__hasIcon_9 = _init__hasIcon$1(this, false);
|
|
544
|
-
get _hasIcon() {
|
|
545
|
-
return this.#___private__hasIcon_9;
|
|
546
|
-
}
|
|
547
|
-
set _hasIcon(_v) {
|
|
548
|
-
this.#___private__hasIcon_9 = _v;
|
|
549
|
-
}
|
|
550
|
-
#___private__hasDefaultSlot_10 = _init__hasDefaultSlot(this, false);
|
|
551
|
-
get _hasDefaultSlot() {
|
|
552
|
-
return this.#___private__hasDefaultSlot_10;
|
|
553
|
-
}
|
|
554
|
-
set _hasDefaultSlot(_v) {
|
|
555
|
-
this.#___private__hasDefaultSlot_10 = _v;
|
|
556
|
-
}
|
|
557
|
-
connectedCallback() {
|
|
558
|
-
super.connectedCallback();
|
|
559
|
-
this.updateAriaHidden();
|
|
560
|
-
}
|
|
561
|
-
updated(changedProperties) {
|
|
562
|
-
super.updated(changedProperties);
|
|
563
|
-
if (changedProperties.has('dot') || changedProperties.has('count') || changedProperties.has('showZero') || changedProperties.has('_hasDefaultSlot')) {
|
|
564
|
-
this.updateAriaHidden();
|
|
565
|
-
}
|
|
566
|
-
}
|
|
567
|
-
updateAriaHidden() {
|
|
568
|
-
const isPurelyDecorative = this.dot && !this._hasDefaultSlot && this.count === undefined && !this.hasAttribute('aria-label') && !this.hasAttribute('aria-labelledby');
|
|
569
|
-
if (isPurelyDecorative) {
|
|
570
|
-
this.setAttribute('aria-hidden', 'true');
|
|
571
|
-
} else {
|
|
572
|
-
this.removeAttribute('aria-hidden');
|
|
573
|
-
}
|
|
574
|
-
}
|
|
575
|
-
onIconSlotChange(e) {
|
|
576
|
-
const slot = e.target;
|
|
577
|
-
this._hasIcon = slot.assignedElements({
|
|
578
|
-
flatten: true
|
|
579
|
-
}).length > 0;
|
|
580
|
-
}
|
|
581
|
-
onDefaultSlotChange(e) {
|
|
582
|
-
const slot = e.target;
|
|
583
|
-
this._hasDefaultSlot = slot.assignedNodes({
|
|
584
|
-
flatten: true
|
|
585
|
-
}).some((node)=>{
|
|
586
|
-
// Check if it's text with actual content or an element
|
|
587
|
-
return node.nodeType === Node.TEXT_NODE && node.textContent?.trim().length || node.nodeType === Node.ELEMENT_NODE;
|
|
588
|
-
});
|
|
589
|
-
this.updateAriaHidden();
|
|
590
|
-
}
|
|
591
|
-
render() {
|
|
592
|
-
let countContent = '';
|
|
593
|
-
// If count is defined, render it, and we do not render the default slot content
|
|
594
|
-
const hideDefaultSlot = this.count !== undefined;
|
|
595
|
-
if (this.count !== undefined) {
|
|
596
|
-
countContent = html`${this.count > this.max ? `${this.max}+` : `${this.count}`}`;
|
|
597
|
-
}
|
|
598
|
-
const dotContent = this.dot ? html`<span part="dot" class="dot"></span>` : '';
|
|
599
|
-
return html`
|
|
600
|
-
<span class="badge ${this.dot && !this._hasDefaultSlot && this.count === undefined ? 'dot-only' : ''}" part="badge">
|
|
601
|
-
<slot
|
|
602
|
-
name="icon"
|
|
603
|
-
part="icon"
|
|
604
|
-
class="icon"
|
|
605
|
-
?hidden=${!this._hasIcon}
|
|
606
|
-
@slotchange=${this.onIconSlotChange}
|
|
607
|
-
></slot>
|
|
608
|
-
${dotContent}
|
|
609
|
-
${countContent}
|
|
610
|
-
<slot ?hidden=${hideDefaultSlot} @slotchange=${this.onDefaultSlotChange}></slot>
|
|
611
|
-
</span>
|
|
612
|
-
`;
|
|
613
|
-
}
|
|
614
|
-
}
|
|
615
|
-
}
|
|
616
|
-
}();
|
|
617
|
-
|
|
618
|
-
const alertStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.alert-root{display:flex;align-items:flex-start;box-sizing:border-box;width:100%;border-radius:var(--vi-alert-border-radius, 6px);padding:var(--vi-alert-padding, 12px 16px);gap:var(--vi-alert-gap, 12px);border-width:var(--vi-alert-border-width, 1px);border-style:solid;font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-font-size-sm, 14px);line-height:var(--vi-line-height-normal, 1.5)}.alert-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding-top:2px}.alert-content{display:flex;flex-direction:column;flex-grow:1;min-width:0}.alert-title{font-weight:var(--vi-font-weight-semibold, 600);margin-bottom:4px;display:block}.alert-actions{display:flex;align-items:center;gap:var(--vi-spacing-xs, 8px);margin-top:var(--vi-spacing-sm, 16px)}}:host{display:block;width:100%}:host([floating]){position:absolute;top:0;left:0;right:0;z-index:var(--vi-alert-floating-z-index, var(--vi-alert-floating-z-index, 1080));box-shadow:var(--vi-alert-floating-shadow, 0 4px 12px rgba(0, 0, 0, .12))}:host([hidden]){display:none!important}.alert-root{overflow:hidden}.alert-root[data-variant=neutral]{background-color:var(--vi-alert-neutral-bg, var(--vi-layer-02, #f3f4f6));border-color:var(--vi-alert-neutral-border, var(--vi-border-04, #bdbdbd));color:var(--vi-alert-neutral-text-color, var(--vi-text-primary, #111827))}.alert-root[data-variant=neutral] .alert-title{color:var(--vi-alert-neutral-title-color, var(--vi-text-primary, #111827))}.alert-root[data-variant=neutral] .alert-icon{color:var(--vi-alert-neutral-icon-color, var(--vi-text-secondary, #4b5563))}.alert-root[data-variant=info]{background-color:var(--vi-alert-info-bg, var(--vi-bg-info, #e3f2fd));border-color:var(--vi-alert-info-border, var(--vi-color-info, #3676d0));color:var(--vi-alert-info-text-color, var(--vi-text-info, #3676d0))}.alert-root[data-variant=info] .alert-title{color:var(--vi-alert-info-title-color, var(--vi-text-info, #3676d0))}.alert-root[data-variant=info] .alert-icon{color:var(--vi-alert-info-icon-color, var(--vi-color-info, #3676d0))}.alert-root[data-variant=success]{background-color:var(--vi-alert-success-bg, var(--vi-bg-success, #e6f9f0));border-color:var(--vi-alert-success-border, var(--vi-color-success, #489167));color:var(--vi-alert-success-text-color, var(--vi-text-success, #265a3d))}.alert-root[data-variant=success] .alert-title{color:var(--vi-alert-success-title-color, var(--vi-text-success, #265a3d))}.alert-root[data-variant=success] .alert-icon{color:var(--vi-alert-success-icon-color, var(--vi-color-success, #489167))}.alert-root[data-variant=warning]{background-color:var(--vi-alert-warning-bg, var(--vi-bg-warning, #fff8e1));border-color:var(--vi-alert-warning-border, var(--vi-color-warning, #ffba00));color:var(--vi-alert-warning-text-color, var(--vi-text-warning, #e68300))}.alert-root[data-variant=warning] .alert-title{color:var(--vi-alert-warning-title-color, var(--vi-text-warning, #e68300))}.alert-root[data-variant=warning] .alert-icon{color:var(--vi-alert-warning-icon-color, var(--vi-color-warning, #ffba00))}.alert-root[data-variant=danger]{background-color:var(--vi-alert-danger-bg, var(--vi-bg-error, #ffebee));border-color:var(--vi-alert-danger-border, var(--vi-color-error, #ef4444));color:var(--vi-alert-danger-text-color, var(--vi-text-error, #db231b))}.alert-root[data-variant=danger] .alert-title{color:var(--vi-alert-danger-title-color, var(--vi-text-error, #db231b))}.alert-root[data-variant=danger] .alert-icon{color:var(--vi-alert-danger-icon-color, var(--vi-color-error, #ef4444))}vi-icon,::slotted(vi-icon),::slotted(svg){--vi-icon-size: 1.25em;width:1.25em;height:1.25em}vi-button[part=close-btn]{margin-top:-4px;margin-right:-4px;margin-left:4px}";
|
|
619
|
-
|
|
620
|
-
function applyDecs2203RFactory$3() {
|
|
621
|
-
function createAddInitializerMethod(initializers, decoratorFinishedRef) {
|
|
622
|
-
return function addInitializer(initializer) {
|
|
623
|
-
assertNotFinished(decoratorFinishedRef, "addInitializer");
|
|
624
|
-
assertCallable(initializer, "An initializer");
|
|
625
|
-
initializers.push(initializer);
|
|
626
|
-
};
|
|
627
|
-
}
|
|
628
|
-
function memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value) {
|
|
629
|
-
var kindStr;
|
|
630
|
-
switch(kind){
|
|
631
|
-
case 1:
|
|
632
|
-
kindStr = "accessor";
|
|
633
|
-
break;
|
|
634
|
-
case 2:
|
|
635
|
-
kindStr = "method";
|
|
636
|
-
break;
|
|
637
|
-
case 3:
|
|
638
|
-
kindStr = "getter";
|
|
639
|
-
break;
|
|
640
|
-
case 4:
|
|
641
|
-
kindStr = "setter";
|
|
642
|
-
break;
|
|
643
|
-
default:
|
|
644
|
-
kindStr = "field";
|
|
645
|
-
}
|
|
646
|
-
var ctx = {
|
|
647
|
-
kind: kindStr,
|
|
648
|
-
name: isPrivate ? "#" + name : name,
|
|
649
|
-
static: isStatic,
|
|
650
|
-
private: isPrivate,
|
|
651
|
-
metadata: metadata
|
|
652
|
-
};
|
|
653
|
-
var decoratorFinishedRef = {
|
|
654
|
-
v: false
|
|
655
|
-
};
|
|
656
|
-
ctx.addInitializer = createAddInitializerMethod(initializers, decoratorFinishedRef);
|
|
657
|
-
var get, set;
|
|
658
|
-
if (kind === 0) {
|
|
659
|
-
if (isPrivate) {
|
|
660
|
-
get = desc.get;
|
|
661
|
-
set = desc.set;
|
|
662
|
-
} else {
|
|
663
|
-
get = function() {
|
|
664
|
-
return this[name];
|
|
665
|
-
};
|
|
666
|
-
set = function(v) {
|
|
667
|
-
this[name] = v;
|
|
668
|
-
};
|
|
669
|
-
}
|
|
670
|
-
} else if (kind === 2) {
|
|
671
|
-
get = function() {
|
|
672
|
-
return desc.value;
|
|
673
|
-
};
|
|
674
|
-
} else {
|
|
675
|
-
if (kind === 1 || kind === 3) {
|
|
676
|
-
get = function() {
|
|
677
|
-
return desc.get.call(this);
|
|
678
|
-
};
|
|
679
|
-
}
|
|
680
|
-
if (kind === 1 || kind === 4) {
|
|
681
|
-
set = function(v) {
|
|
682
|
-
desc.set.call(this, v);
|
|
683
|
-
};
|
|
684
|
-
}
|
|
685
|
-
}
|
|
686
|
-
ctx.access = get && set ? {
|
|
687
|
-
get: get,
|
|
688
|
-
set: set
|
|
689
|
-
} : get ? {
|
|
690
|
-
get: get
|
|
691
|
-
} : {
|
|
692
|
-
set: set
|
|
693
|
-
};
|
|
694
|
-
try {
|
|
695
|
-
return dec(value, ctx);
|
|
696
|
-
} finally{
|
|
697
|
-
decoratorFinishedRef.v = true;
|
|
698
|
-
}
|
|
699
|
-
}
|
|
700
|
-
function assertNotFinished(decoratorFinishedRef, fnName) {
|
|
701
|
-
if (decoratorFinishedRef.v) {
|
|
702
|
-
throw new Error("attempted to call " + fnName + " after decoration was finished");
|
|
703
|
-
}
|
|
704
|
-
}
|
|
705
|
-
function assertCallable(fn, hint) {
|
|
706
|
-
if (typeof fn !== "function") {
|
|
707
|
-
throw new TypeError(hint + " must be a function");
|
|
708
|
-
}
|
|
709
|
-
}
|
|
710
|
-
function assertValidReturnValue(kind, value) {
|
|
711
|
-
var type = typeof value;
|
|
712
|
-
if (kind === 1) {
|
|
713
|
-
if (type !== "object" || value === null) {
|
|
714
|
-
throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
|
|
715
|
-
}
|
|
716
|
-
if (value.get !== undefined) {
|
|
717
|
-
assertCallable(value.get, "accessor.get");
|
|
718
|
-
}
|
|
719
|
-
if (value.set !== undefined) {
|
|
720
|
-
assertCallable(value.set, "accessor.set");
|
|
721
|
-
}
|
|
722
|
-
if (value.init !== undefined) {
|
|
723
|
-
assertCallable(value.init, "accessor.init");
|
|
724
|
-
}
|
|
725
|
-
} else if (type !== "function") {
|
|
726
|
-
var hint;
|
|
727
|
-
if (kind === 0) {
|
|
728
|
-
hint = "field";
|
|
729
|
-
} else if (kind === 10) {
|
|
730
|
-
hint = "class";
|
|
731
|
-
} else {
|
|
732
|
-
hint = "method";
|
|
733
|
-
}
|
|
734
|
-
throw new TypeError(hint + " decorators must return a function or void 0");
|
|
735
|
-
}
|
|
736
|
-
}
|
|
737
|
-
function applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata) {
|
|
738
|
-
var decs = decInfo[0];
|
|
739
|
-
var desc, init, value;
|
|
740
|
-
if (isPrivate) {
|
|
741
|
-
if (kind === 0 || kind === 1) {
|
|
742
|
-
desc = {
|
|
743
|
-
get: decInfo[3],
|
|
744
|
-
set: decInfo[4]
|
|
745
|
-
};
|
|
746
|
-
} else if (kind === 3) {
|
|
747
|
-
desc = {
|
|
748
|
-
get: decInfo[3]
|
|
749
|
-
};
|
|
750
|
-
} else if (kind === 4) {
|
|
751
|
-
desc = {
|
|
752
|
-
set: decInfo[3]
|
|
753
|
-
};
|
|
754
|
-
} else {
|
|
755
|
-
desc = {
|
|
756
|
-
value: decInfo[3]
|
|
757
|
-
};
|
|
758
|
-
}
|
|
759
|
-
} else if (kind !== 0) {
|
|
760
|
-
desc = Object.getOwnPropertyDescriptor(base, name);
|
|
761
|
-
}
|
|
762
|
-
if (kind === 1) {
|
|
763
|
-
value = {
|
|
764
|
-
get: desc.get,
|
|
765
|
-
set: desc.set
|
|
766
|
-
};
|
|
767
|
-
} else if (kind === 2) {
|
|
768
|
-
value = desc.value;
|
|
769
|
-
} else if (kind === 3) {
|
|
770
|
-
value = desc.get;
|
|
771
|
-
} else if (kind === 4) {
|
|
772
|
-
value = desc.set;
|
|
773
|
-
}
|
|
774
|
-
var newValue, get, set;
|
|
775
|
-
if (typeof decs === "function") {
|
|
776
|
-
newValue = memberDec(decs, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
|
|
777
|
-
if (newValue !== void 0) {
|
|
778
|
-
assertValidReturnValue(kind, newValue);
|
|
779
|
-
if (kind === 0) {
|
|
780
|
-
init = newValue;
|
|
781
|
-
} else if (kind === 1) {
|
|
782
|
-
init = newValue.init;
|
|
783
|
-
get = newValue.get || value.get;
|
|
784
|
-
set = newValue.set || value.set;
|
|
785
|
-
value = {
|
|
786
|
-
get: get,
|
|
787
|
-
set: set
|
|
788
|
-
};
|
|
789
|
-
} else {
|
|
790
|
-
value = newValue;
|
|
791
|
-
}
|
|
792
|
-
}
|
|
793
|
-
} else {
|
|
794
|
-
for(var i = decs.length - 1; i >= 0; i--){
|
|
795
|
-
var dec = decs[i];
|
|
796
|
-
newValue = memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
|
|
797
|
-
if (newValue !== void 0) {
|
|
798
|
-
assertValidReturnValue(kind, newValue);
|
|
799
|
-
var newInit;
|
|
800
|
-
if (kind === 0) {
|
|
801
|
-
newInit = newValue;
|
|
802
|
-
} else if (kind === 1) {
|
|
803
|
-
newInit = newValue.init;
|
|
804
|
-
get = newValue.get || value.get;
|
|
805
|
-
set = newValue.set || value.set;
|
|
806
|
-
value = {
|
|
807
|
-
get: get,
|
|
808
|
-
set: set
|
|
809
|
-
};
|
|
810
|
-
} else {
|
|
811
|
-
value = newValue;
|
|
812
|
-
}
|
|
813
|
-
if (newInit !== void 0) {
|
|
814
|
-
if (init === void 0) {
|
|
815
|
-
init = newInit;
|
|
816
|
-
} else if (typeof init === "function") {
|
|
817
|
-
init = [
|
|
818
|
-
init,
|
|
819
|
-
newInit
|
|
820
|
-
];
|
|
821
|
-
} else {
|
|
822
|
-
init.push(newInit);
|
|
823
|
-
}
|
|
824
|
-
}
|
|
825
|
-
}
|
|
826
|
-
}
|
|
827
|
-
}
|
|
828
|
-
if (kind === 0 || kind === 1) {
|
|
829
|
-
if (init === void 0) {
|
|
830
|
-
init = function(instance, init) {
|
|
831
|
-
return init;
|
|
832
|
-
};
|
|
833
|
-
} else if (typeof init !== "function") {
|
|
834
|
-
var ownInitializers = init;
|
|
835
|
-
init = function(instance, init) {
|
|
836
|
-
var value = init;
|
|
837
|
-
for(var i = 0; i < ownInitializers.length; i++){
|
|
838
|
-
value = ownInitializers[i].call(instance, value);
|
|
839
|
-
}
|
|
840
|
-
return value;
|
|
841
|
-
};
|
|
842
|
-
} else {
|
|
843
|
-
var originalInitializer = init;
|
|
844
|
-
init = function(instance, init) {
|
|
845
|
-
return originalInitializer.call(instance, init);
|
|
846
|
-
};
|
|
847
|
-
}
|
|
848
|
-
ret.push(init);
|
|
849
|
-
}
|
|
850
|
-
if (kind !== 0) {
|
|
851
|
-
if (kind === 1) {
|
|
852
|
-
desc.get = value.get;
|
|
853
|
-
desc.set = value.set;
|
|
854
|
-
} else if (kind === 2) {
|
|
855
|
-
desc.value = value;
|
|
856
|
-
} else if (kind === 3) {
|
|
857
|
-
desc.get = value;
|
|
858
|
-
} else if (kind === 4) {
|
|
859
|
-
desc.set = value;
|
|
860
|
-
}
|
|
861
|
-
if (isPrivate) {
|
|
862
|
-
if (kind === 1) {
|
|
863
|
-
ret.push(function(instance, args) {
|
|
864
|
-
return value.get.call(instance, args);
|
|
865
|
-
});
|
|
866
|
-
ret.push(function(instance, args) {
|
|
867
|
-
return value.set.call(instance, args);
|
|
868
|
-
});
|
|
869
|
-
} else if (kind === 2) {
|
|
870
|
-
ret.push(value);
|
|
871
|
-
} else {
|
|
872
|
-
ret.push(function(instance, args) {
|
|
873
|
-
return value.call(instance, args);
|
|
874
|
-
});
|
|
875
|
-
}
|
|
876
|
-
} else {
|
|
877
|
-
Object.defineProperty(base, name, desc);
|
|
878
|
-
}
|
|
879
|
-
}
|
|
880
|
-
}
|
|
881
|
-
function applyMemberDecs(Class, decInfos, metadata) {
|
|
882
|
-
var ret = [];
|
|
883
|
-
var protoInitializers;
|
|
884
|
-
var staticInitializers;
|
|
885
|
-
var existingProtoNonFields = new Map();
|
|
886
|
-
var existingStaticNonFields = new Map();
|
|
887
|
-
for(var i = 0; i < decInfos.length; i++){
|
|
888
|
-
var decInfo = decInfos[i];
|
|
889
|
-
if (!Array.isArray(decInfo)) continue;
|
|
890
|
-
var kind = decInfo[1];
|
|
891
|
-
var name = decInfo[2];
|
|
892
|
-
var isPrivate = decInfo.length > 3;
|
|
893
|
-
var isStatic = kind >= 5;
|
|
894
|
-
var base;
|
|
895
|
-
var initializers;
|
|
896
|
-
if (isStatic) {
|
|
897
|
-
base = Class;
|
|
898
|
-
kind = kind - 5;
|
|
899
|
-
staticInitializers = staticInitializers || [];
|
|
900
|
-
initializers = staticInitializers;
|
|
901
|
-
} else {
|
|
902
|
-
base = Class.prototype;
|
|
903
|
-
protoInitializers = protoInitializers || [];
|
|
904
|
-
initializers = protoInitializers;
|
|
905
|
-
}
|
|
906
|
-
if (kind !== 0 && !isPrivate) {
|
|
907
|
-
var existingNonFields = isStatic ? existingStaticNonFields : existingProtoNonFields;
|
|
908
|
-
var existingKind = existingNonFields.get(name) || 0;
|
|
909
|
-
if (existingKind === true || existingKind === 3 && kind !== 4 || existingKind === 4 && kind !== 3) {
|
|
910
|
-
throw new Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + name);
|
|
911
|
-
} else if (!existingKind && kind > 2) {
|
|
912
|
-
existingNonFields.set(name, kind);
|
|
913
|
-
} else {
|
|
914
|
-
existingNonFields.set(name, true);
|
|
915
|
-
}
|
|
916
|
-
}
|
|
917
|
-
applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata);
|
|
918
|
-
}
|
|
919
|
-
pushInitializers(ret, protoInitializers);
|
|
920
|
-
pushInitializers(ret, staticInitializers);
|
|
921
|
-
return ret;
|
|
922
|
-
}
|
|
923
|
-
function pushInitializers(ret, initializers) {
|
|
924
|
-
if (initializers) {
|
|
925
|
-
ret.push(function(instance) {
|
|
926
|
-
for(var i = 0; i < initializers.length; i++){
|
|
927
|
-
initializers[i].call(instance);
|
|
928
|
-
}
|
|
929
|
-
return instance;
|
|
930
|
-
});
|
|
931
|
-
}
|
|
932
|
-
}
|
|
933
|
-
function applyClassDecs(targetClass, classDecs, metadata) {
|
|
934
|
-
if (classDecs.length > 0) {
|
|
935
|
-
var initializers = [];
|
|
936
|
-
var newClass = targetClass;
|
|
937
|
-
var name = targetClass.name;
|
|
938
|
-
for(var i = classDecs.length - 1; i >= 0; i--){
|
|
939
|
-
var decoratorFinishedRef = {
|
|
940
|
-
v: false
|
|
941
|
-
};
|
|
942
|
-
try {
|
|
943
|
-
var nextNewClass = classDecs[i](newClass, {
|
|
944
|
-
kind: "class",
|
|
945
|
-
name: name,
|
|
946
|
-
addInitializer: createAddInitializerMethod(initializers, decoratorFinishedRef),
|
|
947
|
-
metadata
|
|
948
|
-
});
|
|
949
|
-
} finally{
|
|
950
|
-
decoratorFinishedRef.v = true;
|
|
951
|
-
}
|
|
952
|
-
if (nextNewClass !== undefined) {
|
|
953
|
-
assertValidReturnValue(10, nextNewClass);
|
|
954
|
-
newClass = nextNewClass;
|
|
955
|
-
}
|
|
956
|
-
}
|
|
957
|
-
return [
|
|
958
|
-
defineMetadata(newClass, metadata),
|
|
959
|
-
function() {
|
|
960
|
-
for(var i = 0; i < initializers.length; i++){
|
|
961
|
-
initializers[i].call(newClass);
|
|
962
|
-
}
|
|
963
|
-
}
|
|
964
|
-
];
|
|
965
|
-
}
|
|
966
|
-
}
|
|
967
|
-
function defineMetadata(Class, metadata) {
|
|
968
|
-
return Object.defineProperty(Class, Symbol.metadata || Symbol.for("Symbol.metadata"), {
|
|
969
|
-
configurable: true,
|
|
970
|
-
enumerable: true,
|
|
971
|
-
value: metadata
|
|
972
|
-
});
|
|
973
|
-
}
|
|
974
|
-
return function applyDecs2203R(targetClass, memberDecs, classDecs, parentClass) {
|
|
975
|
-
if (parentClass !== void 0) {
|
|
976
|
-
var parentMetadata = parentClass[Symbol.metadata || Symbol.for("Symbol.metadata")];
|
|
977
|
-
}
|
|
978
|
-
var metadata = Object.create(parentMetadata === void 0 ? null : parentMetadata);
|
|
979
|
-
var e = applyMemberDecs(targetClass, memberDecs, metadata);
|
|
980
|
-
if (!classDecs.length) defineMetadata(targetClass, metadata);
|
|
981
|
-
return {
|
|
982
|
-
e: e,
|
|
983
|
-
get c () {
|
|
984
|
-
return applyClassDecs(targetClass, classDecs, metadata);
|
|
985
|
-
}
|
|
986
|
-
};
|
|
987
|
-
};
|
|
988
|
-
}
|
|
989
|
-
function _apply_decs_2203_r$3(targetClass, memberDecs, classDecs, parentClass) {
|
|
990
|
-
return (_apply_decs_2203_r$3 = applyDecs2203RFactory$3())(targetClass, memberDecs, classDecs, parentClass);
|
|
991
|
-
}
|
|
992
|
-
function _identity$2(x) {
|
|
993
|
-
return x;
|
|
994
|
-
}
|
|
995
|
-
var _dec$3, _initClass$3, _ViElement$1, _dec1$3, _dec2$3, _dec3$3, _dec4$3, _dec5$3, _dec6$3, _dec7$3, _dec8$3, _dec9$3, _dec10$3, _dec11$2, _dec12$1, _dec13$1, /** Colour, icon, ARIA role */ _init_variant$1, /** Bold headline (optional) */ _init_title, /** Show × dismiss button */ _init_dismissible, /** Accessible label for the dismiss button */ _init_dismissLabel, /**
|
|
996
|
-
* Enables auto-hiding after a duration (default: 5000ms).
|
|
997
|
-
* Note: Setting a positive `duration` or `auto-hide-duration` also implicitly enables auto-hiding.
|
|
998
|
-
*/ _init_autoHide, /** Auto hide duration in milliseconds (default: 5000ms) */ _init_autoHideDuration, /**
|
|
999
|
-
* Alias for auto-hide-duration in milliseconds.
|
|
1000
|
-
* Setting a positive duration enables auto-hiding automatically.
|
|
1001
|
-
*/ _init_duration$1, /** Override the default status icon name */ _init_icon, /** Controls whether the alert is displayed */ _init_open$1, /** Position alert absolutely over parent container without pushing layout */ _init_floating, /** Hide the icon */ _init_noIcon, _init__hasTitleSlot, _init__hasActionsSlot, _initProto$3;
|
|
1002
|
-
registerIcons([
|
|
1003
|
-
checkCircleIcon,
|
|
1004
|
-
triangleWarningIcon,
|
|
1005
|
-
infoIcon,
|
|
1006
|
-
xIcon,
|
|
1007
|
-
lockIcon
|
|
1008
|
-
]);
|
|
1009
|
-
let _ViAlert;
|
|
1010
|
-
_dec$3 = customElement('vi-alert'), _dec1$3 = property({
|
|
1011
|
-
type: String,
|
|
1012
|
-
reflect: true
|
|
1013
|
-
}), _dec2$3 = property({
|
|
1014
|
-
type: String
|
|
1015
|
-
}), _dec3$3 = property({
|
|
1016
|
-
type: Boolean,
|
|
1017
|
-
reflect: true
|
|
1018
|
-
}), _dec4$3 = property({
|
|
1019
|
-
type: String,
|
|
1020
|
-
attribute: 'dismiss-label'
|
|
1021
|
-
}), _dec5$3 = property({
|
|
1022
|
-
type: Boolean,
|
|
1023
|
-
attribute: 'auto-hide',
|
|
1024
|
-
reflect: true
|
|
1025
|
-
}), _dec6$3 = property({
|
|
1026
|
-
type: Number,
|
|
1027
|
-
attribute: 'auto-hide-duration'
|
|
1028
|
-
}), _dec7$3 = property({
|
|
1029
|
-
type: Number
|
|
1030
|
-
}), _dec8$3 = property({
|
|
1031
|
-
type: String
|
|
1032
|
-
}), _dec9$3 = property({
|
|
1033
|
-
type: Boolean,
|
|
1034
|
-
reflect: true
|
|
1035
|
-
}), _dec10$3 = property({
|
|
1036
|
-
type: Boolean,
|
|
1037
|
-
reflect: true
|
|
1038
|
-
}), _dec11$2 = property({
|
|
1039
|
-
type: Boolean,
|
|
1040
|
-
attribute: 'no-icon',
|
|
1041
|
-
reflect: true
|
|
1042
|
-
}), _dec12$1 = state(), _dec13$1 = state();
|
|
1043
|
-
new class extends _identity$2 {
|
|
1044
|
-
constructor(){
|
|
1045
|
-
super(_ViAlert), _initClass$3();
|
|
1046
|
-
}
|
|
1047
|
-
static{
|
|
1048
|
-
class ViAlert extends (_ViElement$1 = ViElement) {
|
|
1049
|
-
static{
|
|
1050
|
-
({ e: [_init_variant$1, _init_title, _init_dismissible, _init_dismissLabel, _init_autoHide, _init_autoHideDuration, _init_duration$1, _init_icon, _init_open$1, _init_floating, _init_noIcon, _init__hasTitleSlot, _init__hasActionsSlot, _initProto$3], c: [_ViAlert, _initClass$3] } = _apply_decs_2203_r$3(this, [
|
|
1051
|
-
[
|
|
1052
|
-
_dec1$3,
|
|
1053
|
-
1,
|
|
1054
|
-
"variant"
|
|
1055
|
-
],
|
|
1056
|
-
[
|
|
1057
|
-
_dec2$3,
|
|
1058
|
-
1,
|
|
1059
|
-
"title"
|
|
1060
|
-
],
|
|
1061
|
-
[
|
|
1062
|
-
_dec3$3,
|
|
1063
|
-
1,
|
|
1064
|
-
"dismissible"
|
|
1065
|
-
],
|
|
1066
|
-
[
|
|
1067
|
-
_dec4$3,
|
|
1068
|
-
1,
|
|
1069
|
-
"dismissLabel"
|
|
1070
|
-
],
|
|
1071
|
-
[
|
|
1072
|
-
_dec5$3,
|
|
1073
|
-
1,
|
|
1074
|
-
"autoHide"
|
|
1075
|
-
],
|
|
1076
|
-
[
|
|
1077
|
-
_dec6$3,
|
|
1078
|
-
1,
|
|
1079
|
-
"autoHideDuration"
|
|
1080
|
-
],
|
|
1081
|
-
[
|
|
1082
|
-
_dec7$3,
|
|
1083
|
-
1,
|
|
1084
|
-
"duration"
|
|
1085
|
-
],
|
|
1086
|
-
[
|
|
1087
|
-
_dec8$3,
|
|
1088
|
-
1,
|
|
1089
|
-
"icon"
|
|
1090
|
-
],
|
|
1091
|
-
[
|
|
1092
|
-
_dec9$3,
|
|
1093
|
-
1,
|
|
1094
|
-
"open"
|
|
1095
|
-
],
|
|
1096
|
-
[
|
|
1097
|
-
_dec10$3,
|
|
1098
|
-
1,
|
|
1099
|
-
"floating"
|
|
1100
|
-
],
|
|
1101
|
-
[
|
|
1102
|
-
_dec11$2,
|
|
1103
|
-
1,
|
|
1104
|
-
"noIcon"
|
|
1105
|
-
],
|
|
1106
|
-
[
|
|
1107
|
-
_dec12$1,
|
|
1108
|
-
1,
|
|
1109
|
-
"_hasTitleSlot"
|
|
1110
|
-
],
|
|
1111
|
-
[
|
|
1112
|
-
_dec13$1,
|
|
1113
|
-
1,
|
|
1114
|
-
"_hasActionsSlot"
|
|
1115
|
-
]
|
|
1116
|
-
], [
|
|
1117
|
-
_dec$3
|
|
1118
|
-
], _ViElement$1));
|
|
1119
|
-
}
|
|
1120
|
-
static styles = css`
|
|
1121
|
-
${unsafeCSS(alertStyles)}
|
|
1122
|
-
`;
|
|
1123
|
-
#___private_variant_1 = (_initProto$3(this), _init_variant$1(this, 'info'));
|
|
1124
|
-
get variant() {
|
|
1125
|
-
return this.#___private_variant_1;
|
|
1126
|
-
}
|
|
1127
|
-
set variant(_v) {
|
|
1128
|
-
this.#___private_variant_1 = _v;
|
|
1129
|
-
}
|
|
1130
|
-
#___private_title_2 = _init_title(this, '');
|
|
1131
|
-
get title() {
|
|
1132
|
-
return this.#___private_title_2;
|
|
1133
|
-
}
|
|
1134
|
-
set title(_v) {
|
|
1135
|
-
this.#___private_title_2 = _v;
|
|
1136
|
-
}
|
|
1137
|
-
#___private_dismissible_3 = _init_dismissible(this, false);
|
|
1138
|
-
get dismissible() {
|
|
1139
|
-
return this.#___private_dismissible_3;
|
|
1140
|
-
}
|
|
1141
|
-
set dismissible(_v) {
|
|
1142
|
-
this.#___private_dismissible_3 = _v;
|
|
1143
|
-
}
|
|
1144
|
-
#___private_dismissLabel_4 = _init_dismissLabel(this, 'Dismiss alert');
|
|
1145
|
-
get dismissLabel() {
|
|
1146
|
-
return this.#___private_dismissLabel_4;
|
|
1147
|
-
}
|
|
1148
|
-
set dismissLabel(_v) {
|
|
1149
|
-
this.#___private_dismissLabel_4 = _v;
|
|
1150
|
-
}
|
|
1151
|
-
#___private_autoHide_5 = _init_autoHide(this, false);
|
|
1152
|
-
get autoHide() {
|
|
1153
|
-
return this.#___private_autoHide_5;
|
|
1154
|
-
}
|
|
1155
|
-
set autoHide(_v) {
|
|
1156
|
-
this.#___private_autoHide_5 = _v;
|
|
1157
|
-
}
|
|
1158
|
-
#___private_autoHideDuration_6 = _init_autoHideDuration(this, 5000);
|
|
1159
|
-
get autoHideDuration() {
|
|
1160
|
-
return this.#___private_autoHideDuration_6;
|
|
1161
|
-
}
|
|
1162
|
-
set autoHideDuration(_v) {
|
|
1163
|
-
this.#___private_autoHideDuration_6 = _v;
|
|
1164
|
-
}
|
|
1165
|
-
#___private_duration_7 = _init_duration$1(this, undefined);
|
|
1166
|
-
get duration() {
|
|
1167
|
-
return this.#___private_duration_7;
|
|
1168
|
-
}
|
|
1169
|
-
set duration(_v) {
|
|
1170
|
-
this.#___private_duration_7 = _v;
|
|
1171
|
-
}
|
|
1172
|
-
#___private_icon_8 = _init_icon(this, undefined);
|
|
1173
|
-
get icon() {
|
|
1174
|
-
return this.#___private_icon_8;
|
|
1175
|
-
}
|
|
1176
|
-
set icon(_v) {
|
|
1177
|
-
this.#___private_icon_8 = _v;
|
|
1178
|
-
}
|
|
1179
|
-
#___private_open_9 = _init_open$1(this, true);
|
|
1180
|
-
get open() {
|
|
1181
|
-
return this.#___private_open_9;
|
|
1182
|
-
}
|
|
1183
|
-
set open(_v) {
|
|
1184
|
-
this.#___private_open_9 = _v;
|
|
1185
|
-
}
|
|
1186
|
-
#___private_floating_10 = _init_floating(this, false);
|
|
1187
|
-
get floating() {
|
|
1188
|
-
return this.#___private_floating_10;
|
|
1189
|
-
}
|
|
1190
|
-
set floating(_v) {
|
|
1191
|
-
this.#___private_floating_10 = _v;
|
|
1192
|
-
}
|
|
1193
|
-
#___private_noIcon_11 = _init_noIcon(this, false);
|
|
1194
|
-
get noIcon() {
|
|
1195
|
-
return this.#___private_noIcon_11;
|
|
1196
|
-
}
|
|
1197
|
-
set noIcon(_v) {
|
|
1198
|
-
this.#___private_noIcon_11 = _v;
|
|
1199
|
-
}
|
|
1200
|
-
#___private__hasTitleSlot_12 = _init__hasTitleSlot(this, false);
|
|
1201
|
-
get _hasTitleSlot() {
|
|
1202
|
-
return this.#___private__hasTitleSlot_12;
|
|
1203
|
-
}
|
|
1204
|
-
set _hasTitleSlot(_v) {
|
|
1205
|
-
this.#___private__hasTitleSlot_12 = _v;
|
|
1206
|
-
}
|
|
1207
|
-
#___private__hasActionsSlot_13 = _init__hasActionsSlot(this, false);
|
|
1208
|
-
get _hasActionsSlot() {
|
|
1209
|
-
return this.#___private__hasActionsSlot_13;
|
|
1210
|
-
}
|
|
1211
|
-
set _hasActionsSlot(_v) {
|
|
1212
|
-
this.#___private__hasActionsSlot_13 = _v;
|
|
1213
|
-
}
|
|
1214
|
-
_autoHideTimer = null;
|
|
1215
|
-
/** Helper to check whether auto-hide is enabled via boolean toggle or duration setting */ get _shouldAutoHide() {
|
|
1216
|
-
return this.autoHide || this.duration !== undefined && this.duration > 0;
|
|
1217
|
-
}
|
|
1218
|
-
connectedCallback() {
|
|
1219
|
-
super.connectedCallback();
|
|
1220
|
-
this.updateRole();
|
|
1221
|
-
if (!this.open) {
|
|
1222
|
-
this.hidden = true;
|
|
1223
|
-
} else if (this._shouldAutoHide) {
|
|
1224
|
-
this._startAutoHideTimer();
|
|
1225
|
-
}
|
|
1226
|
-
}
|
|
1227
|
-
disconnectedCallback() {
|
|
1228
|
-
super.disconnectedCallback();
|
|
1229
|
-
this._clearAutoHideTimer();
|
|
1230
|
-
}
|
|
1231
|
-
updated(changedProperties) {
|
|
1232
|
-
super.updated(changedProperties);
|
|
1233
|
-
if (changedProperties.has('variant')) {
|
|
1234
|
-
this.updateRole();
|
|
1235
|
-
}
|
|
1236
|
-
if (changedProperties.has('open') && changedProperties.get('open') !== undefined) {
|
|
1237
|
-
if (this.open) {
|
|
1238
|
-
this._handleOpen();
|
|
1239
|
-
} else if (!this.hidden) {
|
|
1240
|
-
this.handleDismiss();
|
|
1241
|
-
}
|
|
1242
|
-
}
|
|
1243
|
-
if (changedProperties.has('autoHide') || changedProperties.has('autoHideDuration') || changedProperties.has('duration')) {
|
|
1244
|
-
if (this.open && this._shouldAutoHide) {
|
|
1245
|
-
this._startAutoHideTimer();
|
|
1246
|
-
} else {
|
|
1247
|
-
this._clearAutoHideTimer();
|
|
1248
|
-
}
|
|
1249
|
-
}
|
|
1250
|
-
}
|
|
1251
|
-
updateRole() {
|
|
1252
|
-
switch(this.variant){
|
|
1253
|
-
case 'warning':
|
|
1254
|
-
case 'danger':
|
|
1255
|
-
this.setAttribute('role', 'alert');
|
|
1256
|
-
break;
|
|
1257
|
-
case 'info':
|
|
1258
|
-
case 'success':
|
|
1259
|
-
this.setAttribute('role', 'status');
|
|
1260
|
-
break;
|
|
1261
|
-
case 'neutral':
|
|
1262
|
-
default:
|
|
1263
|
-
this.removeAttribute('role');
|
|
1264
|
-
break;
|
|
1265
|
-
}
|
|
1266
|
-
}
|
|
1267
|
-
get defaultIcon() {
|
|
1268
|
-
switch(this.variant){
|
|
1269
|
-
case 'success':
|
|
1270
|
-
return 'check-circle';
|
|
1271
|
-
case 'warning':
|
|
1272
|
-
case 'danger':
|
|
1273
|
-
return 'triangle-warning';
|
|
1274
|
-
case 'info':
|
|
1275
|
-
default:
|
|
1276
|
-
return 'info';
|
|
1277
|
-
}
|
|
1278
|
-
}
|
|
1279
|
-
onTitleSlotChange(e) {
|
|
1280
|
-
const slot = e.target;
|
|
1281
|
-
this._hasTitleSlot = slot.assignedNodes({
|
|
1282
|
-
flatten: true
|
|
1283
|
-
}).length > 0;
|
|
1284
|
-
}
|
|
1285
|
-
onActionsSlotChange(e) {
|
|
1286
|
-
const slot = e.target;
|
|
1287
|
-
this._hasActionsSlot = slot.assignedNodes({
|
|
1288
|
-
flatten: true
|
|
1289
|
-
}).length > 0;
|
|
1290
|
-
}
|
|
1291
|
-
_startAutoHideTimer() {
|
|
1292
|
-
this._clearAutoHideTimer();
|
|
1293
|
-
const timeout = this.duration ?? this.autoHideDuration;
|
|
1294
|
-
if (timeout > 0) {
|
|
1295
|
-
this._autoHideTimer = setTimeout(()=>{
|
|
1296
|
-
this.hide();
|
|
1297
|
-
}, timeout);
|
|
1298
|
-
}
|
|
1299
|
-
}
|
|
1300
|
-
_clearAutoHideTimer() {
|
|
1301
|
-
if (this._autoHideTimer !== null) {
|
|
1302
|
-
clearTimeout(this._autoHideTimer);
|
|
1303
|
-
this._autoHideTimer = null;
|
|
1304
|
-
}
|
|
1305
|
-
}
|
|
1306
|
-
_handleOpen() {
|
|
1307
|
-
this.hidden = false;
|
|
1308
|
-
if (this.shadowRoot) {
|
|
1309
|
-
const root = this.shadowRoot.querySelector('.alert-root');
|
|
1310
|
-
if (root && typeof root.getAnimations === 'function') {
|
|
1311
|
-
root.getAnimations().forEach((anim)=>anim.cancel());
|
|
1312
|
-
}
|
|
1313
|
-
}
|
|
1314
|
-
if (this._shouldAutoHide) {
|
|
1315
|
-
this._startAutoHideTimer();
|
|
1316
|
-
}
|
|
1317
|
-
this.dispatchEvent(new CustomEvent('vialiq-alert-show', {
|
|
1318
|
-
bubbles: true,
|
|
1319
|
-
composed: true,
|
|
1320
|
-
detail: {
|
|
1321
|
-
id: this.id
|
|
1322
|
-
}
|
|
1323
|
-
}));
|
|
1324
|
-
}
|
|
1325
|
-
_dismissPromise = null;
|
|
1326
|
-
async handleDismiss() {
|
|
1327
|
-
this._clearAutoHideTimer();
|
|
1328
|
-
if (this._dismissPromise) {
|
|
1329
|
-
return this._dismissPromise;
|
|
1330
|
-
}
|
|
1331
|
-
this._dismissPromise = (async ()=>{
|
|
1332
|
-
if (this.shadowRoot) {
|
|
1333
|
-
const root = this.shadowRoot.querySelector('.alert-root');
|
|
1334
|
-
if (root && typeof root.animate === 'function') {
|
|
1335
|
-
try {
|
|
1336
|
-
const computed = getComputedStyle(root);
|
|
1337
|
-
const currentHeight = root.offsetHeight;
|
|
1338
|
-
const currentPadding = computed.padding;
|
|
1339
|
-
const currentMargin = computed.margin;
|
|
1340
|
-
const animation = root.animate([
|
|
1341
|
-
{
|
|
1342
|
-
height: `${currentHeight}px`,
|
|
1343
|
-
opacity: 1,
|
|
1344
|
-
margin: currentMargin,
|
|
1345
|
-
padding: currentPadding
|
|
1346
|
-
},
|
|
1347
|
-
{
|
|
1348
|
-
height: '0px',
|
|
1349
|
-
opacity: 0,
|
|
1350
|
-
margin: '0px',
|
|
1351
|
-
padding: '0px'
|
|
1352
|
-
}
|
|
1353
|
-
], {
|
|
1354
|
-
duration: 200,
|
|
1355
|
-
easing: 'ease-out',
|
|
1356
|
-
fill: 'forwards'
|
|
1357
|
-
});
|
|
1358
|
-
await animation.finished;
|
|
1359
|
-
} catch {
|
|
1360
|
-
// Animation was cancelled or failed; swallow rejection and proceed
|
|
1361
|
-
}
|
|
1362
|
-
}
|
|
1363
|
-
}
|
|
1364
|
-
this.hidden = true;
|
|
1365
|
-
this.open = false;
|
|
1366
|
-
this.dispatchEvent(new CustomEvent('vialiq-alert-close', {
|
|
1367
|
-
bubbles: true,
|
|
1368
|
-
composed: true,
|
|
1369
|
-
detail: {
|
|
1370
|
-
id: this.id
|
|
1371
|
-
}
|
|
1372
|
-
}));
|
|
1373
|
-
})();
|
|
1374
|
-
try {
|
|
1375
|
-
await this._dismissPromise;
|
|
1376
|
-
} finally{
|
|
1377
|
-
this._dismissPromise = null;
|
|
1378
|
-
}
|
|
1379
|
-
}
|
|
1380
|
-
/** Programmatically shows the alert */ async show() {
|
|
1381
|
-
this.open = true;
|
|
1382
|
-
await this.updateComplete;
|
|
1383
|
-
}
|
|
1384
|
-
/** Programmatically hides/dismisses the alert */ async hide() {
|
|
1385
|
-
if (this.open) {
|
|
1386
|
-
this.open = false;
|
|
1387
|
-
await this.updateComplete;
|
|
1388
|
-
if (this._dismissPromise) {
|
|
1389
|
-
await this._dismissPromise;
|
|
1390
|
-
}
|
|
1391
|
-
}
|
|
1392
|
-
}
|
|
1393
|
-
render() {
|
|
1394
|
-
return html`
|
|
1395
|
-
<div part="alert" class="alert-root" data-variant=${this.variant}>
|
|
1396
|
-
${!this.noIcon ? html`
|
|
1397
|
-
<div part="icon" class="alert-icon">
|
|
1398
|
-
<slot name="icon">
|
|
1399
|
-
<vi-icon
|
|
1400
|
-
name=${this.icon || this.defaultIcon}
|
|
1401
|
-
aria-hidden="true"
|
|
1402
|
-
></vi-icon>
|
|
1403
|
-
</slot>
|
|
1404
|
-
</div>
|
|
1405
|
-
` : ''}
|
|
1406
|
-
|
|
1407
|
-
<div part="content" class="alert-content">
|
|
1408
|
-
<div
|
|
1409
|
-
part="title"
|
|
1410
|
-
class="alert-title"
|
|
1411
|
-
?hidden=${!(this.title || this._hasTitleSlot)}
|
|
1412
|
-
>
|
|
1413
|
-
<slot name="title" @slotchange=${this.onTitleSlotChange}>
|
|
1414
|
-
${this.title}
|
|
1415
|
-
</slot>
|
|
1416
|
-
</div>
|
|
1417
|
-
|
|
1418
|
-
<div part="body" class="alert-body">
|
|
1419
|
-
<slot></slot>
|
|
1420
|
-
</div>
|
|
1421
|
-
|
|
1422
|
-
<div
|
|
1423
|
-
part="actions"
|
|
1424
|
-
class="alert-actions"
|
|
1425
|
-
?hidden=${!this._hasActionsSlot}
|
|
1426
|
-
>
|
|
1427
|
-
<slot name="actions" @slotchange=${this.onActionsSlotChange}></slot>
|
|
1428
|
-
</div>
|
|
1429
|
-
</div>
|
|
1430
|
-
|
|
1431
|
-
${this.dismissible ? html`
|
|
1432
|
-
<vi-button
|
|
1433
|
-
part="close-btn"
|
|
1434
|
-
variant="ghost"
|
|
1435
|
-
size="sm"
|
|
1436
|
-
icon-only
|
|
1437
|
-
aria-label=${this.dismissLabel}
|
|
1438
|
-
@click=${this.handleDismiss}
|
|
1439
|
-
>
|
|
1440
|
-
<vi-icon name="x" slot="icon"></vi-icon>
|
|
1441
|
-
</vi-button>
|
|
1442
|
-
` : ''}
|
|
1443
|
-
</div>
|
|
1444
|
-
`;
|
|
1445
|
-
}
|
|
1446
|
-
}
|
|
1447
|
-
}
|
|
1448
|
-
}();
|
|
1449
|
-
|
|
1450
|
-
const chipStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.chip,button{display:inline-flex;align-items:center;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;outline:none;border-style:solid;height:var(--vi-chip-height, var(--vi-chip-height-md, 32px));padding:var(--vi-chip-padding, 0 10px);border-radius:var(--vi-chip-border-radius, 999px);border-width:var(--vi-chip-border-width, 1px);gap:var(--vi-chip-gap, 6px);font-size:var(--vi-chip-font-size, var(--vi-font-size-sm));font-weight:var(--vi-chip-font-weight, var(--vi-font-weight-medium));transition:all var(--vi-chip-transition, .1s ease);background-color:var(--vi-chip-bg-color, var(--vi-layer-02, #f3f4f6));border-color:var(--vi-chip-border-color, var(--vi-border-03, #e0e0e0));color:var(--vi-chip-text-color, var(--vi-color-foreground, #111827))}.chip:focus-visible,button:focus-visible{outline:var(--vi-border-width-base, 2px) solid var(--vi-chip-focus-ring-color, var(--vi-focus, #3676d0));outline-offset:0;box-shadow:0 0 0 3px var(--vi-chip-focus-ring-glow, var(--vi-color-blue-200, #cee6ff))}.chip[aria-disabled=true],button[aria-disabled=true]{cursor:not-allowed}.chip-avatar{display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;width:calc(100% - 8px);height:calc(100% - 8px);margin-inline-start:-4px}.chip-icon{display:inline-flex;align-items:center}.chip-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chip-group{display:flex;align-items:center}}:host{display:inline-block;vertical-align:middle}:host([hidden]){display:none!important}:host([size=sm]) button{--vi-chip-height: var(--vi-chip-height-sm);--vi-chip-font-size: var(--vi-font-size-xs);--vi-chip-padding: 0 8px}:host([size=md]) button{--vi-chip-height: var(--vi-chip-height-md);--vi-chip-font-size: var(--vi-font-size-sm);--vi-chip-padding: 0 10px}:host([size=lg]) button{--vi-chip-height: var(--vi-chip-height-lg);--vi-chip-font-size: var(--vi-font-size-base);--vi-chip-padding: 0 12px}:host([variant=neutral]) button{--vi-chip-bg-color: var(--vi-color-grey-100, #f5f5f5);--vi-chip-border-color: var(--vi-color-grey-300, #e0e0e0);--vi-chip-text-color: var(--vi-color-grey-700, #616161)}:host([variant=neutral]:not([disabled])) button:hover{--vi-chip-bg-color: var(--vi-color-grey-200, #eeeeee);--vi-chip-border-color: var(--vi-color-grey-400, #bdbdbd);--vi-chip-text-color: var(--vi-color-grey-900, #212121)}:host([variant=neutral][selected]) button{--vi-chip-bg-color: var(--vi-color-primary, #3676d0);--vi-chip-border-color: var(--vi-color-primary, #3676d0);--vi-chip-text-color: var(--vi-text-primary-inverse, #ffffff)}:host([variant=neutral][selected]:not([disabled])) button:hover{--vi-chip-bg-color: var(--vi-color-blue-800, #2d5fa8);--vi-chip-border-color: var(--vi-color-blue-800, #2d5fa8)}:host([variant=primary]) button{--vi-chip-bg-color: var(--vi-bg-info, #e3f2fd);--vi-chip-border-color: var(--vi-bg-info, #e3f2fd);--vi-chip-text-color: var(--vi-text-info, #3676d0)}:host([variant=primary]:not([disabled])) button:hover{--vi-chip-bg-color: var(--vi-color-blue-100, #ebf5ff);--vi-chip-border-color: var(--vi-color-blue-200, #cee6ff)}:host([variant=primary][selected]) button{--vi-chip-bg-color: var(--vi-color-info, #3676d0);--vi-chip-border-color: var(--vi-color-info, #3676d0);--vi-chip-text-color: var(--vi-text-primary-inverse, #ffffff)}:host([variant=success]) button{--vi-chip-bg-color: var(--vi-bg-success, #e6f9f0);--vi-chip-border-color: var(--vi-bg-success, #e6f9f0);--vi-chip-text-color: var(--vi-text-success, #265a3d)}:host([variant=success]:not([disabled])) button:hover{--vi-chip-bg-color: var(--vi-color-green-100, #e6f0eb);--vi-chip-border-color: var(--vi-color-green-200, #c0dbcd)}:host([variant=success][selected]) button{--vi-chip-bg-color: var(--vi-color-success, #489167);--vi-chip-border-color: var(--vi-color-success, #489167);--vi-chip-text-color: var(--vi-text-primary-inverse, #ffffff)}:host([variant=warning]) button{--vi-chip-bg-color: var(--vi-bg-warning, #fff8e1);--vi-chip-border-color: var(--vi-bg-warning, #fff8e1);--vi-chip-text-color: var(--vi-text-warning, #e68300)}:host([variant=warning]:not([disabled])) button:hover{--vi-chip-bg-color: var(--vi-color-yellow-100, #ffeab1);--vi-chip-border-color: var(--vi-color-yellow-200, #ffde85)}:host([variant=warning][selected]) button{--vi-chip-bg-color: var(--vi-color-warning, #ffba00);--vi-chip-border-color: var(--vi-color-warning, #ffba00);--vi-chip-text-color: var(--vi-text-primary-inverse, #ffffff)}:host([variant=danger]) button{--vi-chip-bg-color: var(--vi-bg-error, #ffebee);--vi-chip-border-color: var(--vi-bg-error, #ffebee);--vi-chip-text-color: var(--vi-text-error, #db231b)}:host([variant=danger]:not([disabled])) button:hover{--vi-chip-bg-color: var(--vi-color-red-100, #ffccce);--vi-chip-border-color: var(--vi-color-red-200, #f69892)}:host([variant=danger][selected]) button{--vi-chip-bg-color: var(--vi-color-error, #ef4444);--vi-chip-border-color: var(--vi-color-error, #ef4444);--vi-chip-text-color: var(--vi-text-primary-inverse, #ffffff)}:host([variant=info]) button{--vi-chip-bg-color: var(--vi-bg-info, #e3f2fd);--vi-chip-border-color: var(--vi-bg-info, #e3f2fd);--vi-chip-text-color: var(--vi-text-info, #3676d0)}:host([variant=info]:not([disabled])) button:hover{--vi-chip-bg-color: var(--vi-color-blue-100, #ebf5ff);--vi-chip-border-color: var(--vi-color-blue-200, #cee6ff)}:host([variant=info][selected]) button{--vi-chip-bg-color: var(--vi-color-info, #3676d0);--vi-chip-border-color: var(--vi-color-info, #3676d0);--vi-chip-text-color: var(--vi-text-primary-inverse, #ffffff)}:host([disabled]) button{--vi-chip-bg-color: var(--vi-color-grey-50, #fafafa);--vi-chip-border-color: var(--vi-color-grey-200, #eeeeee);--vi-chip-text-color: var(--vi-color-grey-300, #e0e0e0)}.chip-avatar[hidden],.chip-icon[hidden],::slotted([slot=trailing-icon][hidden]){display:none!important}vi-button[part=remove-btn]{margin-inline-start:4px;margin-inline-end:-6px;border-radius:50%;color:inherit}";
|
|
1451
|
-
|
|
1452
|
-
function applyDecs2203RFactory$2() {
|
|
1453
|
-
function createAddInitializerMethod(initializers, decoratorFinishedRef) {
|
|
1454
|
-
return function addInitializer(initializer) {
|
|
1455
|
-
assertNotFinished(decoratorFinishedRef, "addInitializer");
|
|
1456
|
-
assertCallable(initializer, "An initializer");
|
|
1457
|
-
initializers.push(initializer);
|
|
1458
|
-
};
|
|
1459
|
-
}
|
|
1460
|
-
function memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value) {
|
|
1461
|
-
var kindStr;
|
|
1462
|
-
switch(kind){
|
|
1463
|
-
case 1:
|
|
1464
|
-
kindStr = "accessor";
|
|
1465
|
-
break;
|
|
1466
|
-
case 2:
|
|
1467
|
-
kindStr = "method";
|
|
1468
|
-
break;
|
|
1469
|
-
case 3:
|
|
1470
|
-
kindStr = "getter";
|
|
1471
|
-
break;
|
|
1472
|
-
case 4:
|
|
1473
|
-
kindStr = "setter";
|
|
1474
|
-
break;
|
|
1475
|
-
default:
|
|
1476
|
-
kindStr = "field";
|
|
1477
|
-
}
|
|
1478
|
-
var ctx = {
|
|
1479
|
-
kind: kindStr,
|
|
1480
|
-
name: isPrivate ? "#" + name : name,
|
|
1481
|
-
static: isStatic,
|
|
1482
|
-
private: isPrivate,
|
|
1483
|
-
metadata: metadata
|
|
1484
|
-
};
|
|
1485
|
-
var decoratorFinishedRef = {
|
|
1486
|
-
v: false
|
|
1487
|
-
};
|
|
1488
|
-
ctx.addInitializer = createAddInitializerMethod(initializers, decoratorFinishedRef);
|
|
1489
|
-
var get, set;
|
|
1490
|
-
if (kind === 0) {
|
|
1491
|
-
if (isPrivate) {
|
|
1492
|
-
get = desc.get;
|
|
1493
|
-
set = desc.set;
|
|
1494
|
-
} else {
|
|
1495
|
-
get = function() {
|
|
1496
|
-
return this[name];
|
|
1497
|
-
};
|
|
1498
|
-
set = function(v) {
|
|
1499
|
-
this[name] = v;
|
|
1500
|
-
};
|
|
1501
|
-
}
|
|
1502
|
-
} else if (kind === 2) {
|
|
1503
|
-
get = function() {
|
|
1504
|
-
return desc.value;
|
|
1505
|
-
};
|
|
1506
|
-
} else {
|
|
1507
|
-
if (kind === 1 || kind === 3) {
|
|
1508
|
-
get = function() {
|
|
1509
|
-
return desc.get.call(this);
|
|
1510
|
-
};
|
|
1511
|
-
}
|
|
1512
|
-
if (kind === 1 || kind === 4) {
|
|
1513
|
-
set = function(v) {
|
|
1514
|
-
desc.set.call(this, v);
|
|
1515
|
-
};
|
|
1516
|
-
}
|
|
1517
|
-
}
|
|
1518
|
-
ctx.access = get && set ? {
|
|
1519
|
-
get: get,
|
|
1520
|
-
set: set
|
|
1521
|
-
} : get ? {
|
|
1522
|
-
get: get
|
|
1523
|
-
} : {
|
|
1524
|
-
set: set
|
|
1525
|
-
};
|
|
1526
|
-
try {
|
|
1527
|
-
return dec(value, ctx);
|
|
1528
|
-
} finally{
|
|
1529
|
-
decoratorFinishedRef.v = true;
|
|
1530
|
-
}
|
|
1531
|
-
}
|
|
1532
|
-
function assertNotFinished(decoratorFinishedRef, fnName) {
|
|
1533
|
-
if (decoratorFinishedRef.v) {
|
|
1534
|
-
throw new Error("attempted to call " + fnName + " after decoration was finished");
|
|
1535
|
-
}
|
|
1536
|
-
}
|
|
1537
|
-
function assertCallable(fn, hint) {
|
|
1538
|
-
if (typeof fn !== "function") {
|
|
1539
|
-
throw new TypeError(hint + " must be a function");
|
|
1540
|
-
}
|
|
1541
|
-
}
|
|
1542
|
-
function assertValidReturnValue(kind, value) {
|
|
1543
|
-
var type = typeof value;
|
|
1544
|
-
if (kind === 1) {
|
|
1545
|
-
if (type !== "object" || value === null) {
|
|
1546
|
-
throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
|
|
1547
|
-
}
|
|
1548
|
-
if (value.get !== undefined) {
|
|
1549
|
-
assertCallable(value.get, "accessor.get");
|
|
1550
|
-
}
|
|
1551
|
-
if (value.set !== undefined) {
|
|
1552
|
-
assertCallable(value.set, "accessor.set");
|
|
1553
|
-
}
|
|
1554
|
-
if (value.init !== undefined) {
|
|
1555
|
-
assertCallable(value.init, "accessor.init");
|
|
1556
|
-
}
|
|
1557
|
-
} else if (type !== "function") {
|
|
1558
|
-
var hint;
|
|
1559
|
-
if (kind === 0) {
|
|
1560
|
-
hint = "field";
|
|
1561
|
-
} else if (kind === 10) {
|
|
1562
|
-
hint = "class";
|
|
1563
|
-
} else {
|
|
1564
|
-
hint = "method";
|
|
1565
|
-
}
|
|
1566
|
-
throw new TypeError(hint + " decorators must return a function or void 0");
|
|
1567
|
-
}
|
|
1568
|
-
}
|
|
1569
|
-
function applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata) {
|
|
1570
|
-
var decs = decInfo[0];
|
|
1571
|
-
var desc, init, value;
|
|
1572
|
-
if (isPrivate) {
|
|
1573
|
-
if (kind === 0 || kind === 1) {
|
|
1574
|
-
desc = {
|
|
1575
|
-
get: decInfo[3],
|
|
1576
|
-
set: decInfo[4]
|
|
1577
|
-
};
|
|
1578
|
-
} else if (kind === 3) {
|
|
1579
|
-
desc = {
|
|
1580
|
-
get: decInfo[3]
|
|
1581
|
-
};
|
|
1582
|
-
} else if (kind === 4) {
|
|
1583
|
-
desc = {
|
|
1584
|
-
set: decInfo[3]
|
|
1585
|
-
};
|
|
1586
|
-
} else {
|
|
1587
|
-
desc = {
|
|
1588
|
-
value: decInfo[3]
|
|
1589
|
-
};
|
|
1590
|
-
}
|
|
1591
|
-
} else if (kind !== 0) {
|
|
1592
|
-
desc = Object.getOwnPropertyDescriptor(base, name);
|
|
1593
|
-
}
|
|
1594
|
-
if (kind === 1) {
|
|
1595
|
-
value = {
|
|
1596
|
-
get: desc.get,
|
|
1597
|
-
set: desc.set
|
|
1598
|
-
};
|
|
1599
|
-
} else if (kind === 2) {
|
|
1600
|
-
value = desc.value;
|
|
1601
|
-
} else if (kind === 3) {
|
|
1602
|
-
value = desc.get;
|
|
1603
|
-
} else if (kind === 4) {
|
|
1604
|
-
value = desc.set;
|
|
1605
|
-
}
|
|
1606
|
-
var newValue, get, set;
|
|
1607
|
-
if (typeof decs === "function") {
|
|
1608
|
-
newValue = memberDec(decs, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
|
|
1609
|
-
if (newValue !== void 0) {
|
|
1610
|
-
assertValidReturnValue(kind, newValue);
|
|
1611
|
-
if (kind === 0) {
|
|
1612
|
-
init = newValue;
|
|
1613
|
-
} else if (kind === 1) {
|
|
1614
|
-
init = newValue.init;
|
|
1615
|
-
get = newValue.get || value.get;
|
|
1616
|
-
set = newValue.set || value.set;
|
|
1617
|
-
value = {
|
|
1618
|
-
get: get,
|
|
1619
|
-
set: set
|
|
1620
|
-
};
|
|
1621
|
-
} else {
|
|
1622
|
-
value = newValue;
|
|
1623
|
-
}
|
|
1624
|
-
}
|
|
1625
|
-
} else {
|
|
1626
|
-
for(var i = decs.length - 1; i >= 0; i--){
|
|
1627
|
-
var dec = decs[i];
|
|
1628
|
-
newValue = memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
|
|
1629
|
-
if (newValue !== void 0) {
|
|
1630
|
-
assertValidReturnValue(kind, newValue);
|
|
1631
|
-
var newInit;
|
|
1632
|
-
if (kind === 0) {
|
|
1633
|
-
newInit = newValue;
|
|
1634
|
-
} else if (kind === 1) {
|
|
1635
|
-
newInit = newValue.init;
|
|
1636
|
-
get = newValue.get || value.get;
|
|
1637
|
-
set = newValue.set || value.set;
|
|
1638
|
-
value = {
|
|
1639
|
-
get: get,
|
|
1640
|
-
set: set
|
|
1641
|
-
};
|
|
1642
|
-
} else {
|
|
1643
|
-
value = newValue;
|
|
1644
|
-
}
|
|
1645
|
-
if (newInit !== void 0) {
|
|
1646
|
-
if (init === void 0) {
|
|
1647
|
-
init = newInit;
|
|
1648
|
-
} else if (typeof init === "function") {
|
|
1649
|
-
init = [
|
|
1650
|
-
init,
|
|
1651
|
-
newInit
|
|
1652
|
-
];
|
|
1653
|
-
} else {
|
|
1654
|
-
init.push(newInit);
|
|
1655
|
-
}
|
|
1656
|
-
}
|
|
1657
|
-
}
|
|
1658
|
-
}
|
|
1659
|
-
}
|
|
1660
|
-
if (kind === 0 || kind === 1) {
|
|
1661
|
-
if (init === void 0) {
|
|
1662
|
-
init = function(instance, init) {
|
|
1663
|
-
return init;
|
|
1664
|
-
};
|
|
1665
|
-
} else if (typeof init !== "function") {
|
|
1666
|
-
var ownInitializers = init;
|
|
1667
|
-
init = function(instance, init) {
|
|
1668
|
-
var value = init;
|
|
1669
|
-
for(var i = 0; i < ownInitializers.length; i++){
|
|
1670
|
-
value = ownInitializers[i].call(instance, value);
|
|
1671
|
-
}
|
|
1672
|
-
return value;
|
|
1673
|
-
};
|
|
1674
|
-
} else {
|
|
1675
|
-
var originalInitializer = init;
|
|
1676
|
-
init = function(instance, init) {
|
|
1677
|
-
return originalInitializer.call(instance, init);
|
|
1678
|
-
};
|
|
1679
|
-
}
|
|
1680
|
-
ret.push(init);
|
|
1681
|
-
}
|
|
1682
|
-
if (kind !== 0) {
|
|
1683
|
-
if (kind === 1) {
|
|
1684
|
-
desc.get = value.get;
|
|
1685
|
-
desc.set = value.set;
|
|
1686
|
-
} else if (kind === 2) {
|
|
1687
|
-
desc.value = value;
|
|
1688
|
-
} else if (kind === 3) {
|
|
1689
|
-
desc.get = value;
|
|
1690
|
-
} else if (kind === 4) {
|
|
1691
|
-
desc.set = value;
|
|
1692
|
-
}
|
|
1693
|
-
if (isPrivate) {
|
|
1694
|
-
if (kind === 1) {
|
|
1695
|
-
ret.push(function(instance, args) {
|
|
1696
|
-
return value.get.call(instance, args);
|
|
1697
|
-
});
|
|
1698
|
-
ret.push(function(instance, args) {
|
|
1699
|
-
return value.set.call(instance, args);
|
|
1700
|
-
});
|
|
1701
|
-
} else if (kind === 2) {
|
|
1702
|
-
ret.push(value);
|
|
1703
|
-
} else {
|
|
1704
|
-
ret.push(function(instance, args) {
|
|
1705
|
-
return value.call(instance, args);
|
|
1706
|
-
});
|
|
1707
|
-
}
|
|
1708
|
-
} else {
|
|
1709
|
-
Object.defineProperty(base, name, desc);
|
|
1710
|
-
}
|
|
1711
|
-
}
|
|
1712
|
-
}
|
|
1713
|
-
function applyMemberDecs(Class, decInfos, metadata) {
|
|
1714
|
-
var ret = [];
|
|
1715
|
-
var protoInitializers;
|
|
1716
|
-
var staticInitializers;
|
|
1717
|
-
var existingProtoNonFields = new Map();
|
|
1718
|
-
var existingStaticNonFields = new Map();
|
|
1719
|
-
for(var i = 0; i < decInfos.length; i++){
|
|
1720
|
-
var decInfo = decInfos[i];
|
|
1721
|
-
if (!Array.isArray(decInfo)) continue;
|
|
1722
|
-
var kind = decInfo[1];
|
|
1723
|
-
var name = decInfo[2];
|
|
1724
|
-
var isPrivate = decInfo.length > 3;
|
|
1725
|
-
var isStatic = kind >= 5;
|
|
1726
|
-
var base;
|
|
1727
|
-
var initializers;
|
|
1728
|
-
if (isStatic) {
|
|
1729
|
-
base = Class;
|
|
1730
|
-
kind = kind - 5;
|
|
1731
|
-
staticInitializers = staticInitializers || [];
|
|
1732
|
-
initializers = staticInitializers;
|
|
1733
|
-
} else {
|
|
1734
|
-
base = Class.prototype;
|
|
1735
|
-
protoInitializers = protoInitializers || [];
|
|
1736
|
-
initializers = protoInitializers;
|
|
1737
|
-
}
|
|
1738
|
-
if (kind !== 0 && !isPrivate) {
|
|
1739
|
-
var existingNonFields = isStatic ? existingStaticNonFields : existingProtoNonFields;
|
|
1740
|
-
var existingKind = existingNonFields.get(name) || 0;
|
|
1741
|
-
if (existingKind === true || existingKind === 3 && kind !== 4 || existingKind === 4 && kind !== 3) {
|
|
1742
|
-
throw new Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + name);
|
|
1743
|
-
} else if (!existingKind && kind > 2) {
|
|
1744
|
-
existingNonFields.set(name, kind);
|
|
1745
|
-
} else {
|
|
1746
|
-
existingNonFields.set(name, true);
|
|
1747
|
-
}
|
|
1748
|
-
}
|
|
1749
|
-
applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata);
|
|
1750
|
-
}
|
|
1751
|
-
pushInitializers(ret, protoInitializers);
|
|
1752
|
-
pushInitializers(ret, staticInitializers);
|
|
1753
|
-
return ret;
|
|
1754
|
-
}
|
|
1755
|
-
function pushInitializers(ret, initializers) {
|
|
1756
|
-
if (initializers) {
|
|
1757
|
-
ret.push(function(instance) {
|
|
1758
|
-
for(var i = 0; i < initializers.length; i++){
|
|
1759
|
-
initializers[i].call(instance);
|
|
1760
|
-
}
|
|
1761
|
-
return instance;
|
|
1762
|
-
});
|
|
1763
|
-
}
|
|
1764
|
-
}
|
|
1765
|
-
function applyClassDecs(targetClass, classDecs, metadata) {
|
|
1766
|
-
if (classDecs.length > 0) {
|
|
1767
|
-
var initializers = [];
|
|
1768
|
-
var newClass = targetClass;
|
|
1769
|
-
var name = targetClass.name;
|
|
1770
|
-
for(var i = classDecs.length - 1; i >= 0; i--){
|
|
1771
|
-
var decoratorFinishedRef = {
|
|
1772
|
-
v: false
|
|
1773
|
-
};
|
|
1774
|
-
try {
|
|
1775
|
-
var nextNewClass = classDecs[i](newClass, {
|
|
1776
|
-
kind: "class",
|
|
1777
|
-
name: name,
|
|
1778
|
-
addInitializer: createAddInitializerMethod(initializers, decoratorFinishedRef),
|
|
1779
|
-
metadata
|
|
1780
|
-
});
|
|
1781
|
-
} finally{
|
|
1782
|
-
decoratorFinishedRef.v = true;
|
|
1783
|
-
}
|
|
1784
|
-
if (nextNewClass !== undefined) {
|
|
1785
|
-
assertValidReturnValue(10, nextNewClass);
|
|
1786
|
-
newClass = nextNewClass;
|
|
1787
|
-
}
|
|
1788
|
-
}
|
|
1789
|
-
return [
|
|
1790
|
-
defineMetadata(newClass, metadata),
|
|
1791
|
-
function() {
|
|
1792
|
-
for(var i = 0; i < initializers.length; i++){
|
|
1793
|
-
initializers[i].call(newClass);
|
|
1794
|
-
}
|
|
1795
|
-
}
|
|
1796
|
-
];
|
|
1797
|
-
}
|
|
1798
|
-
}
|
|
1799
|
-
function defineMetadata(Class, metadata) {
|
|
1800
|
-
return Object.defineProperty(Class, Symbol.metadata || Symbol.for("Symbol.metadata"), {
|
|
1801
|
-
configurable: true,
|
|
1802
|
-
enumerable: true,
|
|
1803
|
-
value: metadata
|
|
1804
|
-
});
|
|
1805
|
-
}
|
|
1806
|
-
return function applyDecs2203R(targetClass, memberDecs, classDecs, parentClass) {
|
|
1807
|
-
if (parentClass !== void 0) {
|
|
1808
|
-
var parentMetadata = parentClass[Symbol.metadata || Symbol.for("Symbol.metadata")];
|
|
1809
|
-
}
|
|
1810
|
-
var metadata = Object.create(parentMetadata === void 0 ? null : parentMetadata);
|
|
1811
|
-
var e = applyMemberDecs(targetClass, memberDecs, metadata);
|
|
1812
|
-
if (!classDecs.length) defineMetadata(targetClass, metadata);
|
|
1813
|
-
return {
|
|
1814
|
-
e: e,
|
|
1815
|
-
get c () {
|
|
1816
|
-
return applyClassDecs(targetClass, classDecs, metadata);
|
|
1817
|
-
}
|
|
1818
|
-
};
|
|
1819
|
-
};
|
|
1820
|
-
}
|
|
1821
|
-
function _apply_decs_2203_r$2(targetClass, memberDecs, classDecs, parentClass) {
|
|
1822
|
-
return (_apply_decs_2203_r$2 = applyDecs2203RFactory$2())(targetClass, memberDecs, classDecs, parentClass);
|
|
1823
|
-
}
|
|
1824
|
-
function _identity$1(x) {
|
|
1825
|
-
return x;
|
|
1826
|
-
}
|
|
1827
|
-
var _dec$2, _initClass$2, _FocusableMixin, _dec1$2, _dec2$2, _dec3$2, _dec4$2, _dec5$2, _dec6$2, _dec7$2, _dec8$2, _dec9$2, _dec10$2, _dec11$1, /** Value for group selection tracking. */ _init_value$1, /** Selected / active state. */ _init_selected, /** Disables the chip. */ _init_disabled$1, /** Show × remove button. */ _init_removable, /** Screen reader text for the remove button (default: 'Remove') */ _init_removeAriaLabel, /** Base colour. */ _init_variant, /** Chip size. */ _init_size, _init__inGroup, _init__hasAvatar, _init__hasIcon, _init__hasTrailingIcon, _initProto$2;
|
|
1828
|
-
let _ViChip;
|
|
1829
|
-
_dec$2 = customElement('vi-chip'), _dec1$2 = property({
|
|
1830
|
-
type: String,
|
|
1831
|
-
reflect: true
|
|
1832
|
-
}), _dec2$2 = property({
|
|
1833
|
-
type: Boolean,
|
|
1834
|
-
reflect: true
|
|
1835
|
-
}), _dec3$2 = property({
|
|
1836
|
-
type: Boolean,
|
|
1837
|
-
reflect: true
|
|
1838
|
-
}), _dec4$2 = property({
|
|
1839
|
-
type: Boolean,
|
|
1840
|
-
reflect: true
|
|
1841
|
-
}), _dec5$2 = property({
|
|
1842
|
-
type: String,
|
|
1843
|
-
attribute: 'remove-aria-label'
|
|
1844
|
-
}), _dec6$2 = property({
|
|
1845
|
-
type: String,
|
|
1846
|
-
reflect: true
|
|
1847
|
-
}), _dec7$2 = property({
|
|
1848
|
-
type: String,
|
|
1849
|
-
reflect: true
|
|
1850
|
-
}), _dec8$2 = state(), _dec9$2 = state(), _dec10$2 = state(), _dec11$1 = state();
|
|
1851
|
-
new class extends _identity$1 {
|
|
1852
|
-
constructor(){
|
|
1853
|
-
super(_ViChip), _initClass$2();
|
|
1854
|
-
}
|
|
1855
|
-
static{
|
|
1856
|
-
class ViChip extends (_FocusableMixin = FocusableMixin(ViElement)) {
|
|
1857
|
-
static{
|
|
1858
|
-
({ e: [_init_value$1, _init_selected, _init_disabled$1, _init_removable, _init_removeAriaLabel, _init_variant, _init_size, _init__inGroup, _init__hasAvatar, _init__hasIcon, _init__hasTrailingIcon, _initProto$2], c: [_ViChip, _initClass$2] } = _apply_decs_2203_r$2(this, [
|
|
1859
|
-
[
|
|
1860
|
-
_dec1$2,
|
|
1861
|
-
1,
|
|
1862
|
-
"value"
|
|
1863
|
-
],
|
|
1864
|
-
[
|
|
1865
|
-
_dec2$2,
|
|
1866
|
-
1,
|
|
1867
|
-
"selected"
|
|
1868
|
-
],
|
|
1869
|
-
[
|
|
1870
|
-
_dec3$2,
|
|
1871
|
-
1,
|
|
1872
|
-
"disabled"
|
|
1873
|
-
],
|
|
1874
|
-
[
|
|
1875
|
-
_dec4$2,
|
|
1876
|
-
1,
|
|
1877
|
-
"removable"
|
|
1878
|
-
],
|
|
1879
|
-
[
|
|
1880
|
-
_dec5$2,
|
|
1881
|
-
1,
|
|
1882
|
-
"removeAriaLabel"
|
|
1883
|
-
],
|
|
1884
|
-
[
|
|
1885
|
-
_dec6$2,
|
|
1886
|
-
1,
|
|
1887
|
-
"variant"
|
|
1888
|
-
],
|
|
1889
|
-
[
|
|
1890
|
-
_dec7$2,
|
|
1891
|
-
1,
|
|
1892
|
-
"size"
|
|
1893
|
-
],
|
|
1894
|
-
[
|
|
1895
|
-
_dec8$2,
|
|
1896
|
-
1,
|
|
1897
|
-
"_inGroup"
|
|
1898
|
-
],
|
|
1899
|
-
[
|
|
1900
|
-
_dec9$2,
|
|
1901
|
-
1,
|
|
1902
|
-
"_hasAvatar"
|
|
1903
|
-
],
|
|
1904
|
-
[
|
|
1905
|
-
_dec10$2,
|
|
1906
|
-
1,
|
|
1907
|
-
"_hasIcon"
|
|
1908
|
-
],
|
|
1909
|
-
[
|
|
1910
|
-
_dec11$1,
|
|
1911
|
-
1,
|
|
1912
|
-
"_hasTrailingIcon"
|
|
1913
|
-
]
|
|
1914
|
-
], [
|
|
1915
|
-
_dec$2
|
|
1916
|
-
], _FocusableMixin));
|
|
1917
|
-
}
|
|
1918
|
-
static styles = css`${unsafeCSS(chipStyles)}`;
|
|
1919
|
-
get _focusableElement() {
|
|
1920
|
-
return this.shadowRoot?.querySelector('button') ?? null;
|
|
1921
|
-
}
|
|
1922
|
-
#___private_value_1 = (_initProto$2(this), _init_value$1(this, ''));
|
|
1923
|
-
get value() {
|
|
1924
|
-
return this.#___private_value_1;
|
|
1925
|
-
}
|
|
1926
|
-
set value(_v) {
|
|
1927
|
-
this.#___private_value_1 = _v;
|
|
1928
|
-
}
|
|
1929
|
-
#___private_selected_2 = _init_selected(this, false);
|
|
1930
|
-
get selected() {
|
|
1931
|
-
return this.#___private_selected_2;
|
|
1932
|
-
}
|
|
1933
|
-
set selected(_v) {
|
|
1934
|
-
this.#___private_selected_2 = _v;
|
|
1935
|
-
}
|
|
1936
|
-
#___private_disabled_3 = _init_disabled$1(this, false);
|
|
1937
|
-
get disabled() {
|
|
1938
|
-
return this.#___private_disabled_3;
|
|
1939
|
-
}
|
|
1940
|
-
set disabled(_v) {
|
|
1941
|
-
this.#___private_disabled_3 = _v;
|
|
1942
|
-
}
|
|
1943
|
-
#___private_removable_4 = _init_removable(this, false);
|
|
1944
|
-
get removable() {
|
|
1945
|
-
return this.#___private_removable_4;
|
|
1946
|
-
}
|
|
1947
|
-
set removable(_v) {
|
|
1948
|
-
this.#___private_removable_4 = _v;
|
|
1949
|
-
}
|
|
1950
|
-
#___private_removeAriaLabel_5 = _init_removeAriaLabel(this, 'Remove');
|
|
1951
|
-
get removeAriaLabel() {
|
|
1952
|
-
return this.#___private_removeAriaLabel_5;
|
|
1953
|
-
}
|
|
1954
|
-
set removeAriaLabel(_v) {
|
|
1955
|
-
this.#___private_removeAriaLabel_5 = _v;
|
|
1956
|
-
}
|
|
1957
|
-
#___private_variant_6 = _init_variant(this, 'neutral');
|
|
1958
|
-
get variant() {
|
|
1959
|
-
return this.#___private_variant_6;
|
|
1960
|
-
}
|
|
1961
|
-
set variant(_v) {
|
|
1962
|
-
this.#___private_variant_6 = _v;
|
|
1963
|
-
}
|
|
1964
|
-
#___private_size_7 = _init_size(this, 'md');
|
|
1965
|
-
get size() {
|
|
1966
|
-
return this.#___private_size_7;
|
|
1967
|
-
}
|
|
1968
|
-
set size(_v) {
|
|
1969
|
-
this.#___private_size_7 = _v;
|
|
1970
|
-
}
|
|
1971
|
-
#___private__inGroup_8 = _init__inGroup(this, false);
|
|
1972
|
-
get _inGroup() {
|
|
1973
|
-
return this.#___private__inGroup_8;
|
|
1974
|
-
}
|
|
1975
|
-
set _inGroup(_v) {
|
|
1976
|
-
this.#___private__inGroup_8 = _v;
|
|
1977
|
-
}
|
|
1978
|
-
#___private__hasAvatar_9 = _init__hasAvatar(this, false);
|
|
1979
|
-
get _hasAvatar() {
|
|
1980
|
-
return this.#___private__hasAvatar_9;
|
|
1981
|
-
}
|
|
1982
|
-
set _hasAvatar(_v) {
|
|
1983
|
-
this.#___private__hasAvatar_9 = _v;
|
|
1984
|
-
}
|
|
1985
|
-
#___private__hasIcon_10 = _init__hasIcon(this, false);
|
|
1986
|
-
get _hasIcon() {
|
|
1987
|
-
return this.#___private__hasIcon_10;
|
|
1988
|
-
}
|
|
1989
|
-
set _hasIcon(_v) {
|
|
1990
|
-
this.#___private__hasIcon_10 = _v;
|
|
1991
|
-
}
|
|
1992
|
-
#___private__hasTrailingIcon_11 = _init__hasTrailingIcon(this, false);
|
|
1993
|
-
get _hasTrailingIcon() {
|
|
1994
|
-
return this.#___private__hasTrailingIcon_11;
|
|
1995
|
-
}
|
|
1996
|
-
set _hasTrailingIcon(_v) {
|
|
1997
|
-
this.#___private__hasTrailingIcon_11 = _v;
|
|
1998
|
-
}
|
|
1999
|
-
connectedCallback() {
|
|
2000
|
-
super.connectedCallback();
|
|
2001
|
-
this._inGroup = this.closest('vi-chip-group') !== null;
|
|
2002
|
-
this._syncSlotsFromLightDom();
|
|
2003
|
-
}
|
|
2004
|
-
firstUpdated(changed) {
|
|
2005
|
-
super.firstUpdated(changed);
|
|
2006
|
-
this._syncSlots();
|
|
2007
|
-
}
|
|
2008
|
-
updated(changed) {
|
|
2009
|
-
super.updated(changed);
|
|
2010
|
-
if (changed.has('disabled')) {
|
|
2011
|
-
if (this.disabled) {
|
|
2012
|
-
this._setHostFocusable(false);
|
|
2013
|
-
} else if (changed.get('disabled') !== undefined) {
|
|
2014
|
-
this._setHostFocusable(true);
|
|
2015
|
-
}
|
|
2016
|
-
}
|
|
2017
|
-
}
|
|
2018
|
-
_syncSlotsFromLightDom() {
|
|
2019
|
-
if (this.querySelector('[slot="avatar"]')) this._hasAvatar = true;
|
|
2020
|
-
if (this.querySelector('[slot="icon"]')) this._hasIcon = true;
|
|
2021
|
-
if (this.querySelector('[slot="trailing-icon"]')) this._hasTrailingIcon = true;
|
|
2022
|
-
}
|
|
2023
|
-
_syncSlots() {
|
|
2024
|
-
const avatarSlot = this.shadowRoot?.querySelector('slot[name="avatar"]');
|
|
2025
|
-
const iconSlot = this.shadowRoot?.querySelector('slot[name="icon"]');
|
|
2026
|
-
const trailingSlot = this.shadowRoot?.querySelector('slot[name="trailing-icon"]');
|
|
2027
|
-
if (avatarSlot) {
|
|
2028
|
-
this._hasAvatar = avatarSlot.assignedElements({
|
|
2029
|
-
flatten: true
|
|
2030
|
-
}).length > 0;
|
|
2031
|
-
}
|
|
2032
|
-
if (iconSlot) {
|
|
2033
|
-
this._hasIcon = iconSlot.assignedElements({
|
|
2034
|
-
flatten: true
|
|
2035
|
-
}).length > 0;
|
|
2036
|
-
}
|
|
2037
|
-
if (trailingSlot) {
|
|
2038
|
-
this._hasTrailingIcon = trailingSlot.assignedElements({
|
|
2039
|
-
flatten: true
|
|
2040
|
-
}).length > 0;
|
|
2041
|
-
}
|
|
2042
|
-
}
|
|
2043
|
-
onAvatarSlotChange(e) {
|
|
2044
|
-
const slot = e.target;
|
|
2045
|
-
this._hasAvatar = slot.assignedElements({
|
|
2046
|
-
flatten: true
|
|
2047
|
-
}).length > 0;
|
|
2048
|
-
}
|
|
2049
|
-
onIconSlotChange(e) {
|
|
2050
|
-
const slot = e.target;
|
|
2051
|
-
this._hasIcon = slot.assignedElements({
|
|
2052
|
-
flatten: true
|
|
2053
|
-
}).length > 0;
|
|
2054
|
-
}
|
|
2055
|
-
onTrailingIconSlotChange(e) {
|
|
2056
|
-
const slot = e.target;
|
|
2057
|
-
this._hasTrailingIcon = slot.assignedElements({
|
|
2058
|
-
flatten: true
|
|
2059
|
-
}).length > 0;
|
|
2060
|
-
}
|
|
2061
|
-
_handleSelect(e) {
|
|
2062
|
-
if (this.disabled) {
|
|
2063
|
-
e.preventDefault();
|
|
2064
|
-
e.stopImmediatePropagation();
|
|
2065
|
-
return;
|
|
2066
|
-
}
|
|
2067
|
-
this.dispatchEvent(new CustomEvent('vialiq-select', {
|
|
2068
|
-
detail: {
|
|
2069
|
-
value: this.value,
|
|
2070
|
-
selected: !this.selected
|
|
2071
|
-
},
|
|
2072
|
-
bubbles: true,
|
|
2073
|
-
composed: true
|
|
2074
|
-
}));
|
|
2075
|
-
}
|
|
2076
|
-
_handleRemove(e) {
|
|
2077
|
-
if (this.disabled) {
|
|
2078
|
-
e.preventDefault();
|
|
2079
|
-
e.stopImmediatePropagation();
|
|
2080
|
-
return;
|
|
2081
|
-
}
|
|
2082
|
-
e.stopPropagation();
|
|
2083
|
-
this.dispatchEvent(new CustomEvent('vialiq-remove', {
|
|
2084
|
-
detail: {
|
|
2085
|
-
value: this.value
|
|
2086
|
-
},
|
|
2087
|
-
bubbles: true,
|
|
2088
|
-
composed: true
|
|
2089
|
-
}));
|
|
2090
|
-
}
|
|
2091
|
-
_handleKeyDown(e) {
|
|
2092
|
-
if (this.disabled) return;
|
|
2093
|
-
if (e.key === 'Enter' || e.key === ' ') {
|
|
2094
|
-
e.preventDefault();
|
|
2095
|
-
this._handleSelect(e);
|
|
2096
|
-
} else if (this.removable && (e.key === 'Backspace' || e.key === 'Delete')) {
|
|
2097
|
-
e.preventDefault();
|
|
2098
|
-
this._handleRemove(e);
|
|
2099
|
-
}
|
|
2100
|
-
}
|
|
2101
|
-
render() {
|
|
2102
|
-
const role = this._inGroup ? 'option' : 'button';
|
|
2103
|
-
const ariaSelected = this._inGroup ? this.selected ? 'true' : 'false' : null;
|
|
2104
|
-
const ariaPressed = !this._inGroup ? this.selected ? 'true' : 'false' : null;
|
|
2105
|
-
return html`
|
|
2106
|
-
<button
|
|
2107
|
-
part="chip"
|
|
2108
|
-
type="button"
|
|
2109
|
-
role=${role}
|
|
2110
|
-
aria-selected=${ariaSelected ?? undefined}
|
|
2111
|
-
aria-pressed=${ariaPressed ?? undefined}
|
|
2112
|
-
aria-disabled=${this.disabled ? 'true' : 'false'}
|
|
2113
|
-
tabindex=${this.disabled ? -1 : 0}
|
|
2114
|
-
@click=${this._handleSelect}
|
|
2115
|
-
@keydown=${this._handleKeyDown}
|
|
2116
|
-
>
|
|
2117
|
-
<slot name="avatar" class="chip-avatar" @slotchange=${this.onAvatarSlotChange} ?hidden=${!this._hasAvatar}></slot>
|
|
2118
|
-
<slot name="icon" class="chip-icon" @slotchange=${this.onIconSlotChange} ?hidden=${this._hasAvatar || !this._hasIcon}></slot>
|
|
2119
|
-
|
|
2120
|
-
${this.selected ? html`<vi-icon part="check-icon" name="check" size="12"></vi-icon>` : ''}
|
|
2121
|
-
|
|
2122
|
-
<span part="label" class="chip-label">
|
|
2123
|
-
<slot></slot>
|
|
2124
|
-
</span>
|
|
2125
|
-
|
|
2126
|
-
<slot name="trailing-icon" @slotchange=${this.onTrailingIconSlotChange} ?hidden=${!this._hasTrailingIcon}></slot>
|
|
2127
|
-
|
|
2128
|
-
${this.removable ? html`
|
|
2129
|
-
<vi-button
|
|
2130
|
-
part="remove-btn"
|
|
2131
|
-
variant="ghost"
|
|
2132
|
-
size="xs"
|
|
2133
|
-
icon-only
|
|
2134
|
-
aria-label=${this.removeAriaLabel || 'Remove'}
|
|
2135
|
-
@click=${this._handleRemove}
|
|
2136
|
-
tabindex=${this.disabled ? -1 : 0}
|
|
2137
|
-
>
|
|
2138
|
-
<vi-icon name="x" size="12" slot="icon"></vi-icon>
|
|
2139
|
-
</vi-button>
|
|
2140
|
-
` : ''}
|
|
2141
|
-
</button>
|
|
2142
|
-
`;
|
|
2143
|
-
}
|
|
2144
|
-
}
|
|
2145
|
-
}
|
|
2146
|
-
}();
|
|
2147
|
-
|
|
2148
|
-
const groupStyles = ":host{display:block}:host([hidden]){display:none!important}[part=group]{display:flex;align-items:center}";
|
|
2149
|
-
|
|
2150
|
-
function applyDecs2203RFactory$1() {
|
|
2151
|
-
function createAddInitializerMethod(initializers, decoratorFinishedRef) {
|
|
2152
|
-
return function addInitializer(initializer) {
|
|
2153
|
-
assertNotFinished(decoratorFinishedRef, "addInitializer");
|
|
2154
|
-
assertCallable(initializer, "An initializer");
|
|
2155
|
-
initializers.push(initializer);
|
|
2156
|
-
};
|
|
2157
|
-
}
|
|
2158
|
-
function memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value) {
|
|
2159
|
-
var kindStr;
|
|
2160
|
-
switch(kind){
|
|
2161
|
-
case 1:
|
|
2162
|
-
kindStr = "accessor";
|
|
2163
|
-
break;
|
|
2164
|
-
case 2:
|
|
2165
|
-
kindStr = "method";
|
|
2166
|
-
break;
|
|
2167
|
-
case 3:
|
|
2168
|
-
kindStr = "getter";
|
|
2169
|
-
break;
|
|
2170
|
-
case 4:
|
|
2171
|
-
kindStr = "setter";
|
|
2172
|
-
break;
|
|
2173
|
-
default:
|
|
2174
|
-
kindStr = "field";
|
|
2175
|
-
}
|
|
2176
|
-
var ctx = {
|
|
2177
|
-
kind: kindStr,
|
|
2178
|
-
name: isPrivate ? "#" + name : name,
|
|
2179
|
-
static: isStatic,
|
|
2180
|
-
private: isPrivate,
|
|
2181
|
-
metadata: metadata
|
|
2182
|
-
};
|
|
2183
|
-
var decoratorFinishedRef = {
|
|
2184
|
-
v: false
|
|
2185
|
-
};
|
|
2186
|
-
ctx.addInitializer = createAddInitializerMethod(initializers, decoratorFinishedRef);
|
|
2187
|
-
var get, set;
|
|
2188
|
-
if (kind === 0) {
|
|
2189
|
-
if (isPrivate) {
|
|
2190
|
-
get = desc.get;
|
|
2191
|
-
set = desc.set;
|
|
2192
|
-
} else {
|
|
2193
|
-
get = function() {
|
|
2194
|
-
return this[name];
|
|
2195
|
-
};
|
|
2196
|
-
set = function(v) {
|
|
2197
|
-
this[name] = v;
|
|
2198
|
-
};
|
|
2199
|
-
}
|
|
2200
|
-
} else if (kind === 2) {
|
|
2201
|
-
get = function() {
|
|
2202
|
-
return desc.value;
|
|
2203
|
-
};
|
|
2204
|
-
} else {
|
|
2205
|
-
if (kind === 1 || kind === 3) {
|
|
2206
|
-
get = function() {
|
|
2207
|
-
return desc.get.call(this);
|
|
2208
|
-
};
|
|
2209
|
-
}
|
|
2210
|
-
if (kind === 1 || kind === 4) {
|
|
2211
|
-
set = function(v) {
|
|
2212
|
-
desc.set.call(this, v);
|
|
2213
|
-
};
|
|
2214
|
-
}
|
|
2215
|
-
}
|
|
2216
|
-
ctx.access = get && set ? {
|
|
2217
|
-
get: get,
|
|
2218
|
-
set: set
|
|
2219
|
-
} : get ? {
|
|
2220
|
-
get: get
|
|
2221
|
-
} : {
|
|
2222
|
-
set: set
|
|
2223
|
-
};
|
|
2224
|
-
try {
|
|
2225
|
-
return dec(value, ctx);
|
|
2226
|
-
} finally{
|
|
2227
|
-
decoratorFinishedRef.v = true;
|
|
2228
|
-
}
|
|
2229
|
-
}
|
|
2230
|
-
function assertNotFinished(decoratorFinishedRef, fnName) {
|
|
2231
|
-
if (decoratorFinishedRef.v) {
|
|
2232
|
-
throw new Error("attempted to call " + fnName + " after decoration was finished");
|
|
2233
|
-
}
|
|
2234
|
-
}
|
|
2235
|
-
function assertCallable(fn, hint) {
|
|
2236
|
-
if (typeof fn !== "function") {
|
|
2237
|
-
throw new TypeError(hint + " must be a function");
|
|
2238
|
-
}
|
|
2239
|
-
}
|
|
2240
|
-
function assertValidReturnValue(kind, value) {
|
|
2241
|
-
var type = typeof value;
|
|
2242
|
-
if (kind === 1) {
|
|
2243
|
-
if (type !== "object" || value === null) {
|
|
2244
|
-
throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
|
|
2245
|
-
}
|
|
2246
|
-
if (value.get !== undefined) {
|
|
2247
|
-
assertCallable(value.get, "accessor.get");
|
|
2248
|
-
}
|
|
2249
|
-
if (value.set !== undefined) {
|
|
2250
|
-
assertCallable(value.set, "accessor.set");
|
|
2251
|
-
}
|
|
2252
|
-
if (value.init !== undefined) {
|
|
2253
|
-
assertCallable(value.init, "accessor.init");
|
|
2254
|
-
}
|
|
2255
|
-
} else if (type !== "function") {
|
|
2256
|
-
var hint;
|
|
2257
|
-
if (kind === 0) {
|
|
2258
|
-
hint = "field";
|
|
2259
|
-
} else if (kind === 10) {
|
|
2260
|
-
hint = "class";
|
|
2261
|
-
} else {
|
|
2262
|
-
hint = "method";
|
|
2263
|
-
}
|
|
2264
|
-
throw new TypeError(hint + " decorators must return a function or void 0");
|
|
2265
|
-
}
|
|
2266
|
-
}
|
|
2267
|
-
function applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata) {
|
|
2268
|
-
var decs = decInfo[0];
|
|
2269
|
-
var desc, init, value;
|
|
2270
|
-
if (isPrivate) {
|
|
2271
|
-
if (kind === 0 || kind === 1) {
|
|
2272
|
-
desc = {
|
|
2273
|
-
get: decInfo[3],
|
|
2274
|
-
set: decInfo[4]
|
|
2275
|
-
};
|
|
2276
|
-
} else if (kind === 3) {
|
|
2277
|
-
desc = {
|
|
2278
|
-
get: decInfo[3]
|
|
2279
|
-
};
|
|
2280
|
-
} else if (kind === 4) {
|
|
2281
|
-
desc = {
|
|
2282
|
-
set: decInfo[3]
|
|
2283
|
-
};
|
|
2284
|
-
} else {
|
|
2285
|
-
desc = {
|
|
2286
|
-
value: decInfo[3]
|
|
2287
|
-
};
|
|
2288
|
-
}
|
|
2289
|
-
} else if (kind !== 0) {
|
|
2290
|
-
desc = Object.getOwnPropertyDescriptor(base, name);
|
|
2291
|
-
}
|
|
2292
|
-
if (kind === 1) {
|
|
2293
|
-
value = {
|
|
2294
|
-
get: desc.get,
|
|
2295
|
-
set: desc.set
|
|
2296
|
-
};
|
|
2297
|
-
} else if (kind === 2) {
|
|
2298
|
-
value = desc.value;
|
|
2299
|
-
} else if (kind === 3) {
|
|
2300
|
-
value = desc.get;
|
|
2301
|
-
} else if (kind === 4) {
|
|
2302
|
-
value = desc.set;
|
|
2303
|
-
}
|
|
2304
|
-
var newValue, get, set;
|
|
2305
|
-
if (typeof decs === "function") {
|
|
2306
|
-
newValue = memberDec(decs, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
|
|
2307
|
-
if (newValue !== void 0) {
|
|
2308
|
-
assertValidReturnValue(kind, newValue);
|
|
2309
|
-
if (kind === 0) {
|
|
2310
|
-
init = newValue;
|
|
2311
|
-
} else if (kind === 1) {
|
|
2312
|
-
init = newValue.init;
|
|
2313
|
-
get = newValue.get || value.get;
|
|
2314
|
-
set = newValue.set || value.set;
|
|
2315
|
-
value = {
|
|
2316
|
-
get: get,
|
|
2317
|
-
set: set
|
|
2318
|
-
};
|
|
2319
|
-
} else {
|
|
2320
|
-
value = newValue;
|
|
2321
|
-
}
|
|
2322
|
-
}
|
|
2323
|
-
} else {
|
|
2324
|
-
for(var i = decs.length - 1; i >= 0; i--){
|
|
2325
|
-
var dec = decs[i];
|
|
2326
|
-
newValue = memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
|
|
2327
|
-
if (newValue !== void 0) {
|
|
2328
|
-
assertValidReturnValue(kind, newValue);
|
|
2329
|
-
var newInit;
|
|
2330
|
-
if (kind === 0) {
|
|
2331
|
-
newInit = newValue;
|
|
2332
|
-
} else if (kind === 1) {
|
|
2333
|
-
newInit = newValue.init;
|
|
2334
|
-
get = newValue.get || value.get;
|
|
2335
|
-
set = newValue.set || value.set;
|
|
2336
|
-
value = {
|
|
2337
|
-
get: get,
|
|
2338
|
-
set: set
|
|
2339
|
-
};
|
|
2340
|
-
} else {
|
|
2341
|
-
value = newValue;
|
|
2342
|
-
}
|
|
2343
|
-
if (newInit !== void 0) {
|
|
2344
|
-
if (init === void 0) {
|
|
2345
|
-
init = newInit;
|
|
2346
|
-
} else if (typeof init === "function") {
|
|
2347
|
-
init = [
|
|
2348
|
-
init,
|
|
2349
|
-
newInit
|
|
2350
|
-
];
|
|
2351
|
-
} else {
|
|
2352
|
-
init.push(newInit);
|
|
2353
|
-
}
|
|
2354
|
-
}
|
|
2355
|
-
}
|
|
2356
|
-
}
|
|
2357
|
-
}
|
|
2358
|
-
if (kind === 0 || kind === 1) {
|
|
2359
|
-
if (init === void 0) {
|
|
2360
|
-
init = function(instance, init) {
|
|
2361
|
-
return init;
|
|
2362
|
-
};
|
|
2363
|
-
} else if (typeof init !== "function") {
|
|
2364
|
-
var ownInitializers = init;
|
|
2365
|
-
init = function(instance, init) {
|
|
2366
|
-
var value = init;
|
|
2367
|
-
for(var i = 0; i < ownInitializers.length; i++){
|
|
2368
|
-
value = ownInitializers[i].call(instance, value);
|
|
2369
|
-
}
|
|
2370
|
-
return value;
|
|
2371
|
-
};
|
|
2372
|
-
} else {
|
|
2373
|
-
var originalInitializer = init;
|
|
2374
|
-
init = function(instance, init) {
|
|
2375
|
-
return originalInitializer.call(instance, init);
|
|
2376
|
-
};
|
|
2377
|
-
}
|
|
2378
|
-
ret.push(init);
|
|
2379
|
-
}
|
|
2380
|
-
if (kind !== 0) {
|
|
2381
|
-
if (kind === 1) {
|
|
2382
|
-
desc.get = value.get;
|
|
2383
|
-
desc.set = value.set;
|
|
2384
|
-
} else if (kind === 2) {
|
|
2385
|
-
desc.value = value;
|
|
2386
|
-
} else if (kind === 3) {
|
|
2387
|
-
desc.get = value;
|
|
2388
|
-
} else if (kind === 4) {
|
|
2389
|
-
desc.set = value;
|
|
2390
|
-
}
|
|
2391
|
-
if (isPrivate) {
|
|
2392
|
-
if (kind === 1) {
|
|
2393
|
-
ret.push(function(instance, args) {
|
|
2394
|
-
return value.get.call(instance, args);
|
|
2395
|
-
});
|
|
2396
|
-
ret.push(function(instance, args) {
|
|
2397
|
-
return value.set.call(instance, args);
|
|
2398
|
-
});
|
|
2399
|
-
} else if (kind === 2) {
|
|
2400
|
-
ret.push(value);
|
|
2401
|
-
} else {
|
|
2402
|
-
ret.push(function(instance, args) {
|
|
2403
|
-
return value.call(instance, args);
|
|
2404
|
-
});
|
|
2405
|
-
}
|
|
2406
|
-
} else {
|
|
2407
|
-
Object.defineProperty(base, name, desc);
|
|
2408
|
-
}
|
|
2409
|
-
}
|
|
2410
|
-
}
|
|
2411
|
-
function applyMemberDecs(Class, decInfos, metadata) {
|
|
2412
|
-
var ret = [];
|
|
2413
|
-
var protoInitializers;
|
|
2414
|
-
var staticInitializers;
|
|
2415
|
-
var existingProtoNonFields = new Map();
|
|
2416
|
-
var existingStaticNonFields = new Map();
|
|
2417
|
-
for(var i = 0; i < decInfos.length; i++){
|
|
2418
|
-
var decInfo = decInfos[i];
|
|
2419
|
-
if (!Array.isArray(decInfo)) continue;
|
|
2420
|
-
var kind = decInfo[1];
|
|
2421
|
-
var name = decInfo[2];
|
|
2422
|
-
var isPrivate = decInfo.length > 3;
|
|
2423
|
-
var isStatic = kind >= 5;
|
|
2424
|
-
var base;
|
|
2425
|
-
var initializers;
|
|
2426
|
-
if (isStatic) {
|
|
2427
|
-
base = Class;
|
|
2428
|
-
kind = kind - 5;
|
|
2429
|
-
staticInitializers = staticInitializers || [];
|
|
2430
|
-
initializers = staticInitializers;
|
|
2431
|
-
} else {
|
|
2432
|
-
base = Class.prototype;
|
|
2433
|
-
protoInitializers = protoInitializers || [];
|
|
2434
|
-
initializers = protoInitializers;
|
|
2435
|
-
}
|
|
2436
|
-
if (kind !== 0 && !isPrivate) {
|
|
2437
|
-
var existingNonFields = isStatic ? existingStaticNonFields : existingProtoNonFields;
|
|
2438
|
-
var existingKind = existingNonFields.get(name) || 0;
|
|
2439
|
-
if (existingKind === true || existingKind === 3 && kind !== 4 || existingKind === 4 && kind !== 3) {
|
|
2440
|
-
throw new Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + name);
|
|
2441
|
-
} else if (!existingKind && kind > 2) {
|
|
2442
|
-
existingNonFields.set(name, kind);
|
|
2443
|
-
} else {
|
|
2444
|
-
existingNonFields.set(name, true);
|
|
2445
|
-
}
|
|
2446
|
-
}
|
|
2447
|
-
applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata);
|
|
2448
|
-
}
|
|
2449
|
-
pushInitializers(ret, protoInitializers);
|
|
2450
|
-
pushInitializers(ret, staticInitializers);
|
|
2451
|
-
return ret;
|
|
2452
|
-
}
|
|
2453
|
-
function pushInitializers(ret, initializers) {
|
|
2454
|
-
if (initializers) {
|
|
2455
|
-
ret.push(function(instance) {
|
|
2456
|
-
for(var i = 0; i < initializers.length; i++){
|
|
2457
|
-
initializers[i].call(instance);
|
|
2458
|
-
}
|
|
2459
|
-
return instance;
|
|
2460
|
-
});
|
|
2461
|
-
}
|
|
2462
|
-
}
|
|
2463
|
-
function applyClassDecs(targetClass, classDecs, metadata) {
|
|
2464
|
-
if (classDecs.length > 0) {
|
|
2465
|
-
var initializers = [];
|
|
2466
|
-
var newClass = targetClass;
|
|
2467
|
-
var name = targetClass.name;
|
|
2468
|
-
for(var i = classDecs.length - 1; i >= 0; i--){
|
|
2469
|
-
var decoratorFinishedRef = {
|
|
2470
|
-
v: false
|
|
2471
|
-
};
|
|
2472
|
-
try {
|
|
2473
|
-
var nextNewClass = classDecs[i](newClass, {
|
|
2474
|
-
kind: "class",
|
|
2475
|
-
name: name,
|
|
2476
|
-
addInitializer: createAddInitializerMethod(initializers, decoratorFinishedRef),
|
|
2477
|
-
metadata
|
|
2478
|
-
});
|
|
2479
|
-
} finally{
|
|
2480
|
-
decoratorFinishedRef.v = true;
|
|
2481
|
-
}
|
|
2482
|
-
if (nextNewClass !== undefined) {
|
|
2483
|
-
assertValidReturnValue(10, nextNewClass);
|
|
2484
|
-
newClass = nextNewClass;
|
|
2485
|
-
}
|
|
2486
|
-
}
|
|
2487
|
-
return [
|
|
2488
|
-
defineMetadata(newClass, metadata),
|
|
2489
|
-
function() {
|
|
2490
|
-
for(var i = 0; i < initializers.length; i++){
|
|
2491
|
-
initializers[i].call(newClass);
|
|
2492
|
-
}
|
|
2493
|
-
}
|
|
2494
|
-
];
|
|
2495
|
-
}
|
|
2496
|
-
}
|
|
2497
|
-
function defineMetadata(Class, metadata) {
|
|
2498
|
-
return Object.defineProperty(Class, Symbol.metadata || Symbol.for("Symbol.metadata"), {
|
|
2499
|
-
configurable: true,
|
|
2500
|
-
enumerable: true,
|
|
2501
|
-
value: metadata
|
|
2502
|
-
});
|
|
2503
|
-
}
|
|
2504
|
-
return function applyDecs2203R(targetClass, memberDecs, classDecs, parentClass) {
|
|
2505
|
-
if (parentClass !== void 0) {
|
|
2506
|
-
var parentMetadata = parentClass[Symbol.metadata || Symbol.for("Symbol.metadata")];
|
|
2507
|
-
}
|
|
2508
|
-
var metadata = Object.create(parentMetadata === void 0 ? null : parentMetadata);
|
|
2509
|
-
var e = applyMemberDecs(targetClass, memberDecs, metadata);
|
|
2510
|
-
if (!classDecs.length) defineMetadata(targetClass, metadata);
|
|
2511
|
-
return {
|
|
2512
|
-
e: e,
|
|
2513
|
-
get c () {
|
|
2514
|
-
return applyClassDecs(targetClass, classDecs, metadata);
|
|
2515
|
-
}
|
|
2516
|
-
};
|
|
2517
|
-
};
|
|
2518
|
-
}
|
|
2519
|
-
function _apply_decs_2203_r$1(targetClass, memberDecs, classDecs, parentClass) {
|
|
2520
|
-
return (_apply_decs_2203_r$1 = applyDecs2203RFactory$1())(targetClass, memberDecs, classDecs, parentClass);
|
|
2521
|
-
}
|
|
2522
|
-
function _identity(x) {
|
|
2523
|
-
return x;
|
|
2524
|
-
}
|
|
2525
|
-
var _dec$1, _initClass$1, _ValidityMixin, _dec1$1, _dec2$1, _dec3$1, _dec4$1, _dec5$1, _dec6$1, _dec7$1, _dec8$1, _dec9$1, _dec10$1, /** Currently selected chip values. */ _init_value, /** Allow multiple selections. */ _init_multi, /** Form field name. */ _init_name$1, /** At least one chip must be selected. */ _init_required, /** Disable all chips. */ _init_disabled, /** Chips wrap to next line. */ _init_wrap, /** Gap between chips. */ _init_gap, // ValidityMixin requirements
|
|
2526
|
-
_init_status, _init_validityMessage, _init__chips, _initProto$1;
|
|
2527
|
-
let _ViChipGroup;
|
|
2528
|
-
_dec$1 = customElement('vi-chip-group'), _dec1$1 = property({
|
|
2529
|
-
type: Array
|
|
2530
|
-
}), _dec2$1 = property({
|
|
2531
|
-
type: Boolean
|
|
2532
|
-
}), _dec3$1 = property({
|
|
2533
|
-
type: String
|
|
2534
|
-
}), _dec4$1 = property({
|
|
2535
|
-
type: Boolean,
|
|
2536
|
-
reflect: true
|
|
2537
|
-
}), _dec5$1 = property({
|
|
2538
|
-
type: Boolean,
|
|
2539
|
-
reflect: true
|
|
2540
|
-
}), _dec6$1 = property({
|
|
2541
|
-
type: Boolean
|
|
2542
|
-
}), _dec7$1 = property({
|
|
2543
|
-
type: String
|
|
2544
|
-
}), _dec8$1 = property({
|
|
2545
|
-
reflect: true
|
|
2546
|
-
}), _dec9$1 = property(), _dec10$1 = queryAssignedElements({
|
|
2547
|
-
selector: 'vi-chip'
|
|
2548
|
-
});
|
|
2549
|
-
new class extends _identity {
|
|
2550
|
-
constructor(){
|
|
2551
|
-
super(_ViChipGroup), _initClass$1();
|
|
2552
|
-
}
|
|
2553
|
-
static{
|
|
2554
|
-
class ViChipGroup extends (_ValidityMixin = ValidityMixin(ViElement)) {
|
|
2555
|
-
static{
|
|
2556
|
-
({ e: [_init_value, _init_multi, _init_name$1, _init_required, _init_disabled, _init_wrap, _init_gap, _init_status, _init_validityMessage, _init__chips, _initProto$1], c: [_ViChipGroup, _initClass$1] } = _apply_decs_2203_r$1(this, [
|
|
2557
|
-
[
|
|
2558
|
-
_dec1$1,
|
|
2559
|
-
1,
|
|
2560
|
-
"value"
|
|
2561
|
-
],
|
|
2562
|
-
[
|
|
2563
|
-
_dec2$1,
|
|
2564
|
-
1,
|
|
2565
|
-
"multi"
|
|
2566
|
-
],
|
|
2567
|
-
[
|
|
2568
|
-
_dec3$1,
|
|
2569
|
-
1,
|
|
2570
|
-
"name"
|
|
2571
|
-
],
|
|
2572
|
-
[
|
|
2573
|
-
_dec4$1,
|
|
2574
|
-
1,
|
|
2575
|
-
"required"
|
|
2576
|
-
],
|
|
2577
|
-
[
|
|
2578
|
-
_dec5$1,
|
|
2579
|
-
1,
|
|
2580
|
-
"disabled"
|
|
2581
|
-
],
|
|
2582
|
-
[
|
|
2583
|
-
_dec6$1,
|
|
2584
|
-
1,
|
|
2585
|
-
"wrap"
|
|
2586
|
-
],
|
|
2587
|
-
[
|
|
2588
|
-
_dec7$1,
|
|
2589
|
-
1,
|
|
2590
|
-
"gap"
|
|
2591
|
-
],
|
|
2592
|
-
[
|
|
2593
|
-
_dec8$1,
|
|
2594
|
-
1,
|
|
2595
|
-
"status"
|
|
2596
|
-
],
|
|
2597
|
-
[
|
|
2598
|
-
_dec9$1,
|
|
2599
|
-
1,
|
|
2600
|
-
"validityMessage"
|
|
2601
|
-
],
|
|
2602
|
-
[
|
|
2603
|
-
_dec10$1,
|
|
2604
|
-
1,
|
|
2605
|
-
"_chips"
|
|
2606
|
-
]
|
|
2607
|
-
], [
|
|
2608
|
-
_dec$1
|
|
2609
|
-
], _ValidityMixin));
|
|
2610
|
-
}
|
|
2611
|
-
static styles = css`${unsafeCSS(groupStyles)}`;
|
|
2612
|
-
#___private_value_1 = (_initProto$1(this), _init_value(this, []));
|
|
2613
|
-
get value() {
|
|
2614
|
-
return this.#___private_value_1;
|
|
2615
|
-
}
|
|
2616
|
-
set value(_v) {
|
|
2617
|
-
this.#___private_value_1 = _v;
|
|
2618
|
-
}
|
|
2619
|
-
#___private_multi_2 = _init_multi(this, true);
|
|
2620
|
-
get multi() {
|
|
2621
|
-
return this.#___private_multi_2;
|
|
2622
|
-
}
|
|
2623
|
-
set multi(_v) {
|
|
2624
|
-
this.#___private_multi_2 = _v;
|
|
2625
|
-
}
|
|
2626
|
-
#___private_name_3 = _init_name$1(this, '');
|
|
2627
|
-
get name() {
|
|
2628
|
-
return this.#___private_name_3;
|
|
2629
|
-
}
|
|
2630
|
-
set name(_v) {
|
|
2631
|
-
this.#___private_name_3 = _v;
|
|
2632
|
-
}
|
|
2633
|
-
#___private_required_4 = _init_required(this, false);
|
|
2634
|
-
get required() {
|
|
2635
|
-
return this.#___private_required_4;
|
|
2636
|
-
}
|
|
2637
|
-
set required(_v) {
|
|
2638
|
-
this.#___private_required_4 = _v;
|
|
2639
|
-
}
|
|
2640
|
-
#___private_disabled_5 = _init_disabled(this, false);
|
|
2641
|
-
get disabled() {
|
|
2642
|
-
return this.#___private_disabled_5;
|
|
2643
|
-
}
|
|
2644
|
-
set disabled(_v) {
|
|
2645
|
-
this.#___private_disabled_5 = _v;
|
|
2646
|
-
}
|
|
2647
|
-
#___private_wrap_6 = _init_wrap(this, true);
|
|
2648
|
-
get wrap() {
|
|
2649
|
-
return this.#___private_wrap_6;
|
|
2650
|
-
}
|
|
2651
|
-
set wrap(_v) {
|
|
2652
|
-
this.#___private_wrap_6 = _v;
|
|
2653
|
-
}
|
|
2654
|
-
#___private_gap_7 = _init_gap(this, '8px');
|
|
2655
|
-
get gap() {
|
|
2656
|
-
return this.#___private_gap_7;
|
|
2657
|
-
}
|
|
2658
|
-
set gap(_v) {
|
|
2659
|
-
this.#___private_gap_7 = _v;
|
|
2660
|
-
}
|
|
2661
|
-
#___private_status_8 = _init_status(this, 'default');
|
|
2662
|
-
get status() {
|
|
2663
|
-
return this.#___private_status_8;
|
|
2664
|
-
}
|
|
2665
|
-
set status(_v) {
|
|
2666
|
-
this.#___private_status_8 = _v;
|
|
2667
|
-
}
|
|
2668
|
-
#___private_validityMessage_9 = _init_validityMessage(this, '');
|
|
2669
|
-
get validityMessage() {
|
|
2670
|
-
return this.#___private_validityMessage_9;
|
|
2671
|
-
}
|
|
2672
|
-
set validityMessage(_v) {
|
|
2673
|
-
this.#___private_validityMessage_9 = _v;
|
|
2674
|
-
}
|
|
2675
|
-
#___private__chips_10 = _init__chips(this);
|
|
2676
|
-
get _chips() {
|
|
2677
|
-
return this.#___private__chips_10;
|
|
2678
|
-
}
|
|
2679
|
-
set _chips(_v) {
|
|
2680
|
-
this.#___private__chips_10 = _v;
|
|
2681
|
-
}
|
|
2682
|
-
_mutationObserver;
|
|
2683
|
-
constructor(){
|
|
2684
|
-
super();
|
|
2685
|
-
this._mutationObserver = new MutationObserver(()=>this._syncChips());
|
|
2686
|
-
this.addEventListener('vialiq-select', this._handleChipSelect);
|
|
2687
|
-
}
|
|
2688
|
-
connectedCallback() {
|
|
2689
|
-
super.connectedCallback();
|
|
2690
|
-
this._syncInternals();
|
|
2691
|
-
}
|
|
2692
|
-
disconnectedCallback() {
|
|
2693
|
-
super.disconnectedCallback();
|
|
2694
|
-
this._mutationObserver.disconnect();
|
|
2695
|
-
}
|
|
2696
|
-
updated(changed) {
|
|
2697
|
-
super.updated(changed);
|
|
2698
|
-
if (changed.has('value')) {
|
|
2699
|
-
this._syncInternals();
|
|
2700
|
-
this._syncChips();
|
|
2701
|
-
}
|
|
2702
|
-
if (changed.has('disabled')) {
|
|
2703
|
-
this._syncChips();
|
|
2704
|
-
}
|
|
2705
|
-
}
|
|
2706
|
-
formResetCallback() {
|
|
2707
|
-
const initialValue = this.getAttribute('value');
|
|
2708
|
-
if (initialValue) {
|
|
2709
|
-
try {
|
|
2710
|
-
const parsed = JSON.parse(initialValue);
|
|
2711
|
-
this.value = Array.isArray(parsed) ? parsed : [
|
|
2712
|
-
initialValue
|
|
2713
|
-
];
|
|
2714
|
-
} catch {
|
|
2715
|
-
this.value = [
|
|
2716
|
-
initialValue
|
|
2717
|
-
];
|
|
2718
|
-
}
|
|
2719
|
-
} else {
|
|
2720
|
-
this.value = [];
|
|
2721
|
-
}
|
|
2722
|
-
this.status = 'default';
|
|
2723
|
-
this.validityMessage = '';
|
|
2724
|
-
}
|
|
2725
|
-
formStateRestoreCallback(state, _mode) {
|
|
2726
|
-
if (typeof state === 'string') {
|
|
2727
|
-
try {
|
|
2728
|
-
const parsed = JSON.parse(state);
|
|
2729
|
-
this.value = Array.isArray(parsed) ? parsed : [
|
|
2730
|
-
state
|
|
2731
|
-
];
|
|
2732
|
-
} catch {
|
|
2733
|
-
this.value = [
|
|
2734
|
-
state
|
|
2735
|
-
];
|
|
2736
|
-
}
|
|
2737
|
-
} else if (state instanceof FormData) {
|
|
2738
|
-
const values = state.getAll(this.name);
|
|
2739
|
-
this.value = values.map((v)=>v.toString());
|
|
2740
|
-
}
|
|
2741
|
-
}
|
|
2742
|
-
formDisabledCallback(disabled) {
|
|
2743
|
-
this.disabled = disabled;
|
|
2744
|
-
}
|
|
2745
|
-
_testValidity() {
|
|
2746
|
-
if (this.required && this.value.length === 0) {
|
|
2747
|
-
return {
|
|
2748
|
-
valueMissing: true
|
|
2749
|
-
};
|
|
2750
|
-
}
|
|
2751
|
-
return {};
|
|
2752
|
-
}
|
|
2753
|
-
/** Selects all available child chips (if multi is true) */ selectAll() {
|
|
2754
|
-
if (!this.multi) return;
|
|
2755
|
-
this.value = this._chips.map((chip)=>chip.value).filter((val)=>val !== undefined);
|
|
2756
|
-
this.dispatchEvent(new CustomEvent('vialiq-change', {
|
|
2757
|
-
detail: {
|
|
2758
|
-
value: this.value
|
|
2759
|
-
},
|
|
2760
|
-
bubbles: true,
|
|
2761
|
-
composed: true
|
|
2762
|
-
}));
|
|
2763
|
-
}
|
|
2764
|
-
/** Deselects all child chips */ clearAll() {
|
|
2765
|
-
this.value = [];
|
|
2766
|
-
this.dispatchEvent(new CustomEvent('vialiq-change', {
|
|
2767
|
-
detail: {
|
|
2768
|
-
value: this.value
|
|
2769
|
-
},
|
|
2770
|
-
bubbles: true,
|
|
2771
|
-
composed: true
|
|
2772
|
-
}));
|
|
2773
|
-
}
|
|
2774
|
-
_syncInternals() {
|
|
2775
|
-
const formData = new FormData();
|
|
2776
|
-
this.value.forEach((val)=>formData.append(this.name, val));
|
|
2777
|
-
this._internals.setFormValue(formData);
|
|
2778
|
-
}
|
|
2779
|
-
_syncChips() {
|
|
2780
|
-
if (!this._chips) return;
|
|
2781
|
-
let hasFocusable = false;
|
|
2782
|
-
this._chips.forEach((chip)=>{
|
|
2783
|
-
chip.selected = this.value.includes(chip.value);
|
|
2784
|
-
if (this.disabled) {
|
|
2785
|
-
chip.disabled = true;
|
|
2786
|
-
} else {
|
|
2787
|
-
chip.disabled = chip.hasAttribute('disabled');
|
|
2788
|
-
}
|
|
2789
|
-
// Roving tabindex: Only the first selected chip (or the first chip if none selected) is focusable
|
|
2790
|
-
if (!chip.disabled && (chip.selected || !hasFocusable && this.value.length === 0)) {
|
|
2791
|
-
chip.tabIndex = 0;
|
|
2792
|
-
hasFocusable = true;
|
|
2793
|
-
} else {
|
|
2794
|
-
chip.tabIndex = -1;
|
|
2795
|
-
}
|
|
2796
|
-
});
|
|
2797
|
-
// If no chip was focusable yet (e.g. none selected), make the first non-disabled chip focusable
|
|
2798
|
-
if (!hasFocusable && this._chips.length > 0) {
|
|
2799
|
-
const firstEnabled = this._chips.find((c)=>!c.disabled);
|
|
2800
|
-
if (firstEnabled) firstEnabled.tabIndex = 0;
|
|
2801
|
-
}
|
|
2802
|
-
}
|
|
2803
|
-
_handleSlotChange() {
|
|
2804
|
-
this._syncChips();
|
|
2805
|
-
// Disconnect old, connect new observers for child mutations
|
|
2806
|
-
this._mutationObserver.disconnect();
|
|
2807
|
-
this._chips.forEach((chip)=>{
|
|
2808
|
-
this._mutationObserver.observe(chip, {
|
|
2809
|
-
attributes: true,
|
|
2810
|
-
attributeFilter: [
|
|
2811
|
-
'value',
|
|
2812
|
-
'disabled'
|
|
2813
|
-
]
|
|
2814
|
-
});
|
|
2815
|
-
});
|
|
2816
|
-
}
|
|
2817
|
-
_handleChipSelect(e) {
|
|
2818
|
-
e.stopPropagation(); // Stop the inner event
|
|
2819
|
-
const { value, selected } = e.detail;
|
|
2820
|
-
let newValue = [
|
|
2821
|
-
...this.value
|
|
2822
|
-
];
|
|
2823
|
-
if (this.multi) {
|
|
2824
|
-
if (selected) {
|
|
2825
|
-
if (!newValue.includes(value)) newValue.push(value);
|
|
2826
|
-
} else {
|
|
2827
|
-
newValue = newValue.filter((v)=>v !== value);
|
|
2828
|
-
}
|
|
2829
|
-
} else {
|
|
2830
|
-
if (selected) {
|
|
2831
|
-
newValue = [
|
|
2832
|
-
value
|
|
2833
|
-
];
|
|
2834
|
-
} else {
|
|
2835
|
-
// In single select, clicking a selected chip could deselect it depending on requirements.
|
|
2836
|
-
// Assuming it toggles.
|
|
2837
|
-
newValue = [];
|
|
2838
|
-
}
|
|
2839
|
-
}
|
|
2840
|
-
this.value = newValue;
|
|
2841
|
-
this.dispatchEvent(new CustomEvent('vialiq-change', {
|
|
2842
|
-
detail: {
|
|
2843
|
-
value: this.value
|
|
2844
|
-
},
|
|
2845
|
-
bubbles: true,
|
|
2846
|
-
composed: true
|
|
2847
|
-
}));
|
|
2848
|
-
}
|
|
2849
|
-
_handleKeyDown(e) {
|
|
2850
|
-
const focusableChips = this._chips.filter((c)=>!c.disabled);
|
|
2851
|
-
if (focusableChips.length === 0) return;
|
|
2852
|
-
const currentIndex = focusableChips.findIndex((c)=>c === document.activeElement || c.shadowRoot?.activeElement);
|
|
2853
|
-
if (currentIndex === -1) return;
|
|
2854
|
-
let nextIndex = currentIndex;
|
|
2855
|
-
switch(e.key){
|
|
2856
|
-
case 'ArrowRight':
|
|
2857
|
-
case 'ArrowDown':
|
|
2858
|
-
e.preventDefault();
|
|
2859
|
-
nextIndex = (currentIndex + 1) % focusableChips.length;
|
|
2860
|
-
break;
|
|
2861
|
-
case 'ArrowLeft':
|
|
2862
|
-
case 'ArrowUp':
|
|
2863
|
-
e.preventDefault();
|
|
2864
|
-
nextIndex = (currentIndex - 1 + focusableChips.length) % focusableChips.length;
|
|
2865
|
-
break;
|
|
2866
|
-
case 'Home':
|
|
2867
|
-
e.preventDefault();
|
|
2868
|
-
nextIndex = 0;
|
|
2869
|
-
break;
|
|
2870
|
-
case 'End':
|
|
2871
|
-
e.preventDefault();
|
|
2872
|
-
nextIndex = focusableChips.length - 1;
|
|
2873
|
-
break;
|
|
2874
|
-
default:
|
|
2875
|
-
return; // Let other keys do their thing
|
|
2876
|
-
}
|
|
2877
|
-
this._chips.forEach((c)=>c.tabIndex = -1);
|
|
2878
|
-
const nextChip = focusableChips[nextIndex];
|
|
2879
|
-
nextChip.tabIndex = 0;
|
|
2880
|
-
nextChip.focus();
|
|
2881
|
-
}
|
|
2882
|
-
render() {
|
|
2883
|
-
const style = `gap: ${this.gap}; flex-wrap: ${this.wrap ? 'wrap' : 'nowrap'};`;
|
|
2884
|
-
return html`
|
|
2885
|
-
<div
|
|
2886
|
-
part="group"
|
|
2887
|
-
role="listbox"
|
|
2888
|
-
aria-multiselectable=${this.multi ? 'true' : 'false'}
|
|
2889
|
-
aria-required=${this.required ? 'true' : 'false'}
|
|
2890
|
-
aria-disabled=${this.disabled ? 'true' : 'false'}
|
|
2891
|
-
style=${style}
|
|
2892
|
-
@keydown=${this._handleKeyDown}
|
|
2893
|
-
>
|
|
2894
|
-
<slot @slotchange=${this._handleSlotChange}></slot>
|
|
2895
|
-
</div>
|
|
2896
|
-
`;
|
|
2897
|
-
}
|
|
2898
|
-
}
|
|
2899
|
-
}
|
|
2900
|
-
}();
|
|
2901
|
-
|
|
2902
|
-
/**
|
|
2903
|
-
* Explicit exit counterpart map.
|
|
2904
|
-
* Replaces fragile string.replace('in','out') which corrupted strings like 'spin' -> 'spout'.
|
|
2905
|
-
*/ const EXIT_COUNTERPART = {
|
|
2906
|
-
'fade-in': 'fade-out',
|
|
2907
|
-
'fade-in-up': 'fade-out-down',
|
|
2908
|
-
'fade-in-down': 'fade-out-up',
|
|
2909
|
-
'fade-in-left': 'fade-out-right',
|
|
2910
|
-
'fade-in-right': 'fade-out-left',
|
|
2911
|
-
'zoom-in': 'zoom-out',
|
|
2912
|
-
'scale-up': 'scale-down',
|
|
2913
|
-
'bounce-in': 'bounce-out',
|
|
2914
|
-
'pop-in': 'pop-out',
|
|
2915
|
-
'slide-in-top': 'slide-out-top',
|
|
2916
|
-
'slide-in-bottom': 'slide-out-bottom',
|
|
2917
|
-
'slide-in-left': 'slide-out-left',
|
|
2918
|
-
'slide-in-right': 'slide-out-right',
|
|
2919
|
-
'flip-x': 'fade-out',
|
|
2920
|
-
'flip-y': 'fade-out',
|
|
2921
|
-
'perspective-pop': 'fade-out',
|
|
2922
|
-
'expand-vertical': 'collapse-vertical',
|
|
2923
|
-
'expand-horizontal': 'collapse-horizontal'
|
|
2924
|
-
};
|
|
2925
|
-
/**
|
|
2926
|
-
* WAAPI (Web Animations API) keyframe definitions — used by this component's imperative
|
|
2927
|
-
* runtime path via `element.animate()`. These are the canonical source for adding or
|
|
2928
|
-
* changing a preset. When you add a preset here you MUST also add the matching
|
|
2929
|
-
* `@keyframes vi-<name>` rule in `libs/flux-ui/components/_animation.scss`, which serves
|
|
2930
|
-
* the parallel CSS-only consumer path (\`animation: vi-fade-in 300ms ...\`).
|
|
2931
|
-
* The two representations cannot share a runtime source without a build-time code-gen step.
|
|
2932
|
-
*/ const PRESET_KEYFRAMES = {
|
|
2933
|
-
'fade-in': [
|
|
2934
|
-
{
|
|
2935
|
-
opacity: 0
|
|
2936
|
-
},
|
|
2937
|
-
{
|
|
2938
|
-
opacity: 1
|
|
2939
|
-
}
|
|
2940
|
-
],
|
|
2941
|
-
'fade-out': [
|
|
2942
|
-
{
|
|
2943
|
-
opacity: 1
|
|
2944
|
-
},
|
|
2945
|
-
{
|
|
2946
|
-
opacity: 0
|
|
2947
|
-
}
|
|
2948
|
-
],
|
|
2949
|
-
'fade-in-up': [
|
|
2950
|
-
{
|
|
2951
|
-
opacity: 0,
|
|
2952
|
-
transform: 'translate3d(0, 1rem, 0)'
|
|
2953
|
-
},
|
|
2954
|
-
{
|
|
2955
|
-
opacity: 1,
|
|
2956
|
-
transform: 'translate3d(0, 0, 0)'
|
|
2957
|
-
}
|
|
2958
|
-
],
|
|
2959
|
-
'fade-in-down': [
|
|
2960
|
-
{
|
|
2961
|
-
opacity: 0,
|
|
2962
|
-
transform: 'translate3d(0, -1rem, 0)'
|
|
2963
|
-
},
|
|
2964
|
-
{
|
|
2965
|
-
opacity: 1,
|
|
2966
|
-
transform: 'translate3d(0, 0, 0)'
|
|
2967
|
-
}
|
|
2968
|
-
],
|
|
2969
|
-
'fade-in-left': [
|
|
2970
|
-
{
|
|
2971
|
-
opacity: 0,
|
|
2972
|
-
transform: 'translate3d(-1rem, 0, 0)'
|
|
2973
|
-
},
|
|
2974
|
-
{
|
|
2975
|
-
opacity: 1,
|
|
2976
|
-
transform: 'translate3d(0, 0, 0)'
|
|
2977
|
-
}
|
|
2978
|
-
],
|
|
2979
|
-
'fade-in-right': [
|
|
2980
|
-
{
|
|
2981
|
-
opacity: 0,
|
|
2982
|
-
transform: 'translate3d(1rem, 0, 0)'
|
|
2983
|
-
},
|
|
2984
|
-
{
|
|
2985
|
-
opacity: 1,
|
|
2986
|
-
transform: 'translate3d(0, 0, 0)'
|
|
2987
|
-
}
|
|
2988
|
-
],
|
|
2989
|
-
'fade-out-up': [
|
|
2990
|
-
{
|
|
2991
|
-
opacity: 1,
|
|
2992
|
-
transform: 'translate3d(0, 0, 0)'
|
|
2993
|
-
},
|
|
2994
|
-
{
|
|
2995
|
-
opacity: 0,
|
|
2996
|
-
transform: 'translate3d(0, -1rem, 0)'
|
|
2997
|
-
}
|
|
2998
|
-
],
|
|
2999
|
-
'fade-out-down': [
|
|
3000
|
-
{
|
|
3001
|
-
opacity: 1,
|
|
3002
|
-
transform: 'translate3d(0, 0, 0)'
|
|
3003
|
-
},
|
|
3004
|
-
{
|
|
3005
|
-
opacity: 0,
|
|
3006
|
-
transform: 'translate3d(0, 1rem, 0)'
|
|
3007
|
-
}
|
|
3008
|
-
],
|
|
3009
|
-
'fade-out-left': [
|
|
3010
|
-
{
|
|
3011
|
-
opacity: 1,
|
|
3012
|
-
transform: 'translate3d(0, 0, 0)'
|
|
3013
|
-
},
|
|
3014
|
-
{
|
|
3015
|
-
opacity: 0,
|
|
3016
|
-
transform: 'translate3d(-1rem, 0, 0)'
|
|
3017
|
-
}
|
|
3018
|
-
],
|
|
3019
|
-
'fade-out-right': [
|
|
3020
|
-
{
|
|
3021
|
-
opacity: 1,
|
|
3022
|
-
transform: 'translate3d(0, 0, 0)'
|
|
3023
|
-
},
|
|
3024
|
-
{
|
|
3025
|
-
opacity: 0,
|
|
3026
|
-
transform: 'translate3d(1rem, 0, 0)'
|
|
3027
|
-
}
|
|
3028
|
-
],
|
|
3029
|
-
'zoom-in': [
|
|
3030
|
-
{
|
|
3031
|
-
opacity: 0,
|
|
3032
|
-
transform: 'scale3d(0.92, 0.92, 0.92)'
|
|
3033
|
-
},
|
|
3034
|
-
{
|
|
3035
|
-
opacity: 1,
|
|
3036
|
-
transform: 'scale3d(1, 1, 1)'
|
|
3037
|
-
}
|
|
3038
|
-
],
|
|
3039
|
-
'zoom-out': [
|
|
3040
|
-
{
|
|
3041
|
-
opacity: 1,
|
|
3042
|
-
transform: 'scale3d(1, 1, 1)'
|
|
3043
|
-
},
|
|
3044
|
-
{
|
|
3045
|
-
opacity: 0,
|
|
3046
|
-
transform: 'scale3d(0.92, 0.92, 0.92)'
|
|
3047
|
-
}
|
|
3048
|
-
],
|
|
3049
|
-
'scale-up': [
|
|
3050
|
-
{
|
|
3051
|
-
transform: 'scale3d(0.8, 0.8, 0.8)'
|
|
3052
|
-
},
|
|
3053
|
-
{
|
|
3054
|
-
transform: 'scale3d(1, 1, 1)'
|
|
3055
|
-
}
|
|
3056
|
-
],
|
|
3057
|
-
'scale-down': [
|
|
3058
|
-
{
|
|
3059
|
-
transform: 'scale3d(1.2, 1.2, 1.2)'
|
|
3060
|
-
},
|
|
3061
|
-
{
|
|
3062
|
-
transform: 'scale3d(1, 1, 1)'
|
|
3063
|
-
}
|
|
3064
|
-
],
|
|
3065
|
-
'bounce-in': [
|
|
3066
|
-
{
|
|
3067
|
-
opacity: 0,
|
|
3068
|
-
transform: 'scale3d(0.3, 0.3, 0.3)',
|
|
3069
|
-
offset: 0
|
|
3070
|
-
},
|
|
3071
|
-
{
|
|
3072
|
-
opacity: 0.9,
|
|
3073
|
-
transform: 'scale3d(1.08, 1.08, 1.08)',
|
|
3074
|
-
offset: 0.5
|
|
3075
|
-
},
|
|
3076
|
-
{
|
|
3077
|
-
opacity: 1,
|
|
3078
|
-
transform: 'scale3d(0.95, 0.95, 0.95)',
|
|
3079
|
-
offset: 0.75
|
|
3080
|
-
},
|
|
3081
|
-
{
|
|
3082
|
-
opacity: 1,
|
|
3083
|
-
transform: 'scale3d(1, 1, 1)',
|
|
3084
|
-
offset: 1
|
|
3085
|
-
}
|
|
3086
|
-
],
|
|
3087
|
-
'bounce-out': [
|
|
3088
|
-
{
|
|
3089
|
-
opacity: 1,
|
|
3090
|
-
transform: 'scale3d(1, 1, 1)',
|
|
3091
|
-
offset: 0
|
|
3092
|
-
},
|
|
3093
|
-
{
|
|
3094
|
-
opacity: 1,
|
|
3095
|
-
transform: 'scale3d(0.9, 0.9, 0.9)',
|
|
3096
|
-
offset: 0.2
|
|
3097
|
-
},
|
|
3098
|
-
{
|
|
3099
|
-
opacity: 1,
|
|
3100
|
-
transform: 'scale3d(1.1, 1.1, 1.1)',
|
|
3101
|
-
offset: 0.5
|
|
3102
|
-
},
|
|
3103
|
-
{
|
|
3104
|
-
opacity: 0,
|
|
3105
|
-
transform: 'scale3d(0.3, 0.3, 0.3)',
|
|
3106
|
-
offset: 1
|
|
3107
|
-
}
|
|
3108
|
-
],
|
|
3109
|
-
'pop-in': [
|
|
3110
|
-
{
|
|
3111
|
-
opacity: 0,
|
|
3112
|
-
transform: 'scale3d(0.8, 0.8, 1)',
|
|
3113
|
-
offset: 0
|
|
3114
|
-
},
|
|
3115
|
-
{
|
|
3116
|
-
opacity: 1,
|
|
3117
|
-
transform: 'scale3d(1.05, 1.05, 1)',
|
|
3118
|
-
offset: 0.7
|
|
3119
|
-
},
|
|
3120
|
-
{
|
|
3121
|
-
opacity: 1,
|
|
3122
|
-
transform: 'scale3d(1, 1, 1)',
|
|
3123
|
-
offset: 1
|
|
3124
|
-
}
|
|
3125
|
-
],
|
|
3126
|
-
'pop-out': [
|
|
3127
|
-
{
|
|
3128
|
-
opacity: 1,
|
|
3129
|
-
transform: 'scale3d(1, 1, 1)'
|
|
3130
|
-
},
|
|
3131
|
-
{
|
|
3132
|
-
opacity: 0,
|
|
3133
|
-
transform: 'scale3d(0.8, 0.8, 1)'
|
|
3134
|
-
}
|
|
3135
|
-
],
|
|
3136
|
-
'slide-in-top': [
|
|
3137
|
-
{
|
|
3138
|
-
transform: 'translate3d(0, -100%, 0)'
|
|
3139
|
-
},
|
|
3140
|
-
{
|
|
3141
|
-
transform: 'translate3d(0, 0, 0)'
|
|
3142
|
-
}
|
|
3143
|
-
],
|
|
3144
|
-
'slide-in-bottom': [
|
|
3145
|
-
{
|
|
3146
|
-
transform: 'translate3d(0, 100%, 0)'
|
|
3147
|
-
},
|
|
3148
|
-
{
|
|
3149
|
-
transform: 'translate3d(0, 0, 0)'
|
|
3150
|
-
}
|
|
3151
|
-
],
|
|
3152
|
-
'slide-in-left': [
|
|
3153
|
-
{
|
|
3154
|
-
transform: 'translate3d(-100%, 0, 0)'
|
|
3155
|
-
},
|
|
3156
|
-
{
|
|
3157
|
-
transform: 'translate3d(0, 0, 0)'
|
|
3158
|
-
}
|
|
3159
|
-
],
|
|
3160
|
-
'slide-in-right': [
|
|
3161
|
-
{
|
|
3162
|
-
transform: 'translate3d(100%, 0, 0)'
|
|
3163
|
-
},
|
|
3164
|
-
{
|
|
3165
|
-
transform: 'translate3d(0, 0, 0)'
|
|
3166
|
-
}
|
|
3167
|
-
],
|
|
3168
|
-
'slide-out-top': [
|
|
3169
|
-
{
|
|
3170
|
-
transform: 'translate3d(0, 0, 0)'
|
|
3171
|
-
},
|
|
3172
|
-
{
|
|
3173
|
-
transform: 'translate3d(0, -100%, 0)'
|
|
3174
|
-
}
|
|
3175
|
-
],
|
|
3176
|
-
'slide-out-bottom': [
|
|
3177
|
-
{
|
|
3178
|
-
transform: 'translate3d(0, 0, 0)'
|
|
3179
|
-
},
|
|
3180
|
-
{
|
|
3181
|
-
transform: 'translate3d(0, 100%, 0)'
|
|
3182
|
-
}
|
|
3183
|
-
],
|
|
3184
|
-
'slide-out-left': [
|
|
3185
|
-
{
|
|
3186
|
-
transform: 'translate3d(0, 0, 0)'
|
|
3187
|
-
},
|
|
3188
|
-
{
|
|
3189
|
-
transform: 'translate3d(-100%, 0, 0)'
|
|
3190
|
-
}
|
|
3191
|
-
],
|
|
3192
|
-
'slide-out-right': [
|
|
3193
|
-
{
|
|
3194
|
-
transform: 'translate3d(0, 0, 0)'
|
|
3195
|
-
},
|
|
3196
|
-
{
|
|
3197
|
-
transform: 'translate3d(100%, 0, 0)'
|
|
3198
|
-
}
|
|
3199
|
-
],
|
|
3200
|
-
'flip-x': [
|
|
3201
|
-
{
|
|
3202
|
-
transform: 'perspective(400px) rotate3d(1, 0, 0, 90deg)',
|
|
3203
|
-
opacity: 0
|
|
3204
|
-
},
|
|
3205
|
-
{
|
|
3206
|
-
transform: 'perspective(400px) rotate3d(1, 0, 0, 0deg)',
|
|
3207
|
-
opacity: 1
|
|
3208
|
-
}
|
|
3209
|
-
],
|
|
3210
|
-
'flip-y': [
|
|
3211
|
-
{
|
|
3212
|
-
transform: 'perspective(400px) rotate3d(0, 1, 0, 90deg)',
|
|
3213
|
-
opacity: 0
|
|
3214
|
-
},
|
|
3215
|
-
{
|
|
3216
|
-
transform: 'perspective(400px) rotate3d(0, 1, 0, 0deg)',
|
|
3217
|
-
opacity: 1
|
|
3218
|
-
}
|
|
3219
|
-
],
|
|
3220
|
-
'perspective-pop': [
|
|
3221
|
-
{
|
|
3222
|
-
transform: 'perspective(600px) translateZ(-100px)',
|
|
3223
|
-
opacity: 0
|
|
3224
|
-
},
|
|
3225
|
-
{
|
|
3226
|
-
transform: 'perspective(600px) translateZ(0)',
|
|
3227
|
-
opacity: 1
|
|
3228
|
-
}
|
|
3229
|
-
],
|
|
3230
|
-
// Fallbacks — dynamically replaced with scrollHeight/Width in _getKeyframes
|
|
3231
|
-
'expand-vertical': [
|
|
3232
|
-
{
|
|
3233
|
-
maxHeight: '0px',
|
|
3234
|
-
opacity: 0,
|
|
3235
|
-
overflow: 'hidden'
|
|
3236
|
-
},
|
|
3237
|
-
{
|
|
3238
|
-
maxHeight: '100vh',
|
|
3239
|
-
opacity: 1,
|
|
3240
|
-
overflow: 'hidden'
|
|
3241
|
-
}
|
|
3242
|
-
],
|
|
3243
|
-
'collapse-vertical': [
|
|
3244
|
-
{
|
|
3245
|
-
maxHeight: '100vh',
|
|
3246
|
-
opacity: 1,
|
|
3247
|
-
overflow: 'hidden'
|
|
3248
|
-
},
|
|
3249
|
-
{
|
|
3250
|
-
maxHeight: '0px',
|
|
3251
|
-
opacity: 0,
|
|
3252
|
-
overflow: 'hidden'
|
|
3253
|
-
}
|
|
3254
|
-
],
|
|
3255
|
-
'expand-horizontal': [
|
|
3256
|
-
{
|
|
3257
|
-
maxWidth: '0px',
|
|
3258
|
-
opacity: 0,
|
|
3259
|
-
overflow: 'hidden'
|
|
3260
|
-
},
|
|
3261
|
-
{
|
|
3262
|
-
maxWidth: '100vw',
|
|
3263
|
-
opacity: 1,
|
|
3264
|
-
overflow: 'hidden'
|
|
3265
|
-
}
|
|
3266
|
-
],
|
|
3267
|
-
'collapse-horizontal': [
|
|
3268
|
-
{
|
|
3269
|
-
maxWidth: '100vw',
|
|
3270
|
-
opacity: 1,
|
|
3271
|
-
overflow: 'hidden'
|
|
3272
|
-
},
|
|
3273
|
-
{
|
|
3274
|
-
maxWidth: '0px',
|
|
3275
|
-
opacity: 0,
|
|
3276
|
-
overflow: 'hidden'
|
|
3277
|
-
}
|
|
3278
|
-
],
|
|
3279
|
-
'pulse': [
|
|
3280
|
-
{
|
|
3281
|
-
transform: 'scale3d(1, 1, 1)'
|
|
3282
|
-
},
|
|
3283
|
-
{
|
|
3284
|
-
transform: 'scale3d(1.05, 1.05, 1.05)'
|
|
3285
|
-
},
|
|
3286
|
-
{
|
|
3287
|
-
transform: 'scale3d(1, 1, 1)'
|
|
3288
|
-
}
|
|
3289
|
-
],
|
|
3290
|
-
'bounce': [
|
|
3291
|
-
{
|
|
3292
|
-
transform: 'translate3d(0, 0, 0)'
|
|
3293
|
-
},
|
|
3294
|
-
{
|
|
3295
|
-
transform: 'translate3d(0, -12px, 0)'
|
|
3296
|
-
},
|
|
3297
|
-
{
|
|
3298
|
-
transform: 'translate3d(0, 0, 0)'
|
|
3299
|
-
},
|
|
3300
|
-
{
|
|
3301
|
-
transform: 'translate3d(0, -6px, 0)'
|
|
3302
|
-
},
|
|
3303
|
-
{
|
|
3304
|
-
transform: 'translate3d(0, 0, 0)'
|
|
3305
|
-
}
|
|
3306
|
-
],
|
|
3307
|
-
'shake': [
|
|
3308
|
-
{
|
|
3309
|
-
transform: 'translate3d(0, 0, 0)'
|
|
3310
|
-
},
|
|
3311
|
-
{
|
|
3312
|
-
transform: 'translate3d(-4px, 0, 0)'
|
|
3313
|
-
},
|
|
3314
|
-
{
|
|
3315
|
-
transform: 'translate3d(4px, 0, 0)'
|
|
3316
|
-
},
|
|
3317
|
-
{
|
|
3318
|
-
transform: 'translate3d(-4px, 0, 0)'
|
|
3319
|
-
},
|
|
3320
|
-
{
|
|
3321
|
-
transform: 'translate3d(0, 0, 0)'
|
|
3322
|
-
}
|
|
3323
|
-
],
|
|
3324
|
-
'wobble': [
|
|
3325
|
-
{
|
|
3326
|
-
transform: 'translate3d(0, 0, 0) rotate(0deg)'
|
|
3327
|
-
},
|
|
3328
|
-
{
|
|
3329
|
-
transform: 'translate3d(-15%, 0, 0) rotate(-4deg)'
|
|
3330
|
-
},
|
|
3331
|
-
{
|
|
3332
|
-
transform: 'translate3d(12%, 0, 0) rotate(3deg)'
|
|
3333
|
-
},
|
|
3334
|
-
{
|
|
3335
|
-
transform: 'translate3d(-9%, 0, 0) rotate(-2deg)'
|
|
3336
|
-
},
|
|
3337
|
-
{
|
|
3338
|
-
transform: 'translate3d(6%, 0, 0) rotate(1deg)'
|
|
3339
|
-
},
|
|
3340
|
-
{
|
|
3341
|
-
transform: 'translate3d(0, 0, 0) rotate(0deg)'
|
|
3342
|
-
}
|
|
3343
|
-
],
|
|
3344
|
-
'heartbeat': [
|
|
3345
|
-
{
|
|
3346
|
-
transform: 'scale(1)'
|
|
3347
|
-
},
|
|
3348
|
-
{
|
|
3349
|
-
transform: 'scale(1.15)'
|
|
3350
|
-
},
|
|
3351
|
-
{
|
|
3352
|
-
transform: 'scale(1)'
|
|
3353
|
-
},
|
|
3354
|
-
{
|
|
3355
|
-
transform: 'scale(1.15)'
|
|
3356
|
-
},
|
|
3357
|
-
{
|
|
3358
|
-
transform: 'scale(1)'
|
|
3359
|
-
}
|
|
3360
|
-
],
|
|
3361
|
-
'shimmer': [
|
|
3362
|
-
{
|
|
3363
|
-
backgroundPosition: '-200% 0'
|
|
3364
|
-
},
|
|
3365
|
-
{
|
|
3366
|
-
backgroundPosition: '200% 0'
|
|
3367
|
-
}
|
|
3368
|
-
]
|
|
3369
|
-
};
|
|
3370
|
-
const EXPAND_COLLAPSE_PRESETS = new Set([
|
|
3371
|
-
'expand-vertical',
|
|
3372
|
-
'collapse-vertical',
|
|
3373
|
-
'expand-horizontal',
|
|
3374
|
-
'collapse-horizontal'
|
|
3375
|
-
]);
|
|
3376
|
-
|
|
3377
|
-
function applyDecs2203RFactory() {
|
|
3378
|
-
function createAddInitializerMethod(initializers, decoratorFinishedRef) {
|
|
3379
|
-
return function addInitializer(initializer) {
|
|
3380
|
-
assertNotFinished(decoratorFinishedRef, "addInitializer");
|
|
3381
|
-
assertCallable(initializer, "An initializer");
|
|
3382
|
-
initializers.push(initializer);
|
|
3383
|
-
};
|
|
3384
|
-
}
|
|
3385
|
-
function memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value) {
|
|
3386
|
-
var kindStr;
|
|
3387
|
-
switch(kind){
|
|
3388
|
-
case 1:
|
|
3389
|
-
kindStr = "accessor";
|
|
3390
|
-
break;
|
|
3391
|
-
case 2:
|
|
3392
|
-
kindStr = "method";
|
|
3393
|
-
break;
|
|
3394
|
-
case 3:
|
|
3395
|
-
kindStr = "getter";
|
|
3396
|
-
break;
|
|
3397
|
-
case 4:
|
|
3398
|
-
kindStr = "setter";
|
|
3399
|
-
break;
|
|
3400
|
-
default:
|
|
3401
|
-
kindStr = "field";
|
|
3402
|
-
}
|
|
3403
|
-
var ctx = {
|
|
3404
|
-
kind: kindStr,
|
|
3405
|
-
name: isPrivate ? "#" + name : name,
|
|
3406
|
-
static: isStatic,
|
|
3407
|
-
private: isPrivate,
|
|
3408
|
-
metadata: metadata
|
|
3409
|
-
};
|
|
3410
|
-
var decoratorFinishedRef = {
|
|
3411
|
-
v: false
|
|
3412
|
-
};
|
|
3413
|
-
ctx.addInitializer = createAddInitializerMethod(initializers, decoratorFinishedRef);
|
|
3414
|
-
var get, set;
|
|
3415
|
-
if (kind === 0) {
|
|
3416
|
-
if (isPrivate) {
|
|
3417
|
-
get = desc.get;
|
|
3418
|
-
set = desc.set;
|
|
3419
|
-
} else {
|
|
3420
|
-
get = function() {
|
|
3421
|
-
return this[name];
|
|
3422
|
-
};
|
|
3423
|
-
set = function(v) {
|
|
3424
|
-
this[name] = v;
|
|
3425
|
-
};
|
|
3426
|
-
}
|
|
3427
|
-
} else if (kind === 2) {
|
|
3428
|
-
get = function() {
|
|
3429
|
-
return desc.value;
|
|
3430
|
-
};
|
|
3431
|
-
} else {
|
|
3432
|
-
if (kind === 1 || kind === 3) {
|
|
3433
|
-
get = function() {
|
|
3434
|
-
return desc.get.call(this);
|
|
3435
|
-
};
|
|
3436
|
-
}
|
|
3437
|
-
if (kind === 1 || kind === 4) {
|
|
3438
|
-
set = function(v) {
|
|
3439
|
-
desc.set.call(this, v);
|
|
3440
|
-
};
|
|
3441
|
-
}
|
|
3442
|
-
}
|
|
3443
|
-
ctx.access = get && set ? {
|
|
3444
|
-
get: get,
|
|
3445
|
-
set: set
|
|
3446
|
-
} : get ? {
|
|
3447
|
-
get: get
|
|
3448
|
-
} : {
|
|
3449
|
-
set: set
|
|
3450
|
-
};
|
|
3451
|
-
try {
|
|
3452
|
-
return dec(value, ctx);
|
|
3453
|
-
} finally{
|
|
3454
|
-
decoratorFinishedRef.v = true;
|
|
3455
|
-
}
|
|
3456
|
-
}
|
|
3457
|
-
function assertNotFinished(decoratorFinishedRef, fnName) {
|
|
3458
|
-
if (decoratorFinishedRef.v) {
|
|
3459
|
-
throw new Error("attempted to call " + fnName + " after decoration was finished");
|
|
3460
|
-
}
|
|
3461
|
-
}
|
|
3462
|
-
function assertCallable(fn, hint) {
|
|
3463
|
-
if (typeof fn !== "function") {
|
|
3464
|
-
throw new TypeError(hint + " must be a function");
|
|
3465
|
-
}
|
|
3466
|
-
}
|
|
3467
|
-
function assertValidReturnValue(kind, value) {
|
|
3468
|
-
var type = typeof value;
|
|
3469
|
-
if (kind === 1) {
|
|
3470
|
-
if (type !== "object" || value === null) {
|
|
3471
|
-
throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
|
|
3472
|
-
}
|
|
3473
|
-
if (value.get !== undefined) {
|
|
3474
|
-
assertCallable(value.get, "accessor.get");
|
|
3475
|
-
}
|
|
3476
|
-
if (value.set !== undefined) {
|
|
3477
|
-
assertCallable(value.set, "accessor.set");
|
|
3478
|
-
}
|
|
3479
|
-
if (value.init !== undefined) {
|
|
3480
|
-
assertCallable(value.init, "accessor.init");
|
|
3481
|
-
}
|
|
3482
|
-
} else if (type !== "function") {
|
|
3483
|
-
var hint;
|
|
3484
|
-
if (kind === 0) {
|
|
3485
|
-
hint = "field";
|
|
3486
|
-
} else if (kind === 10) {
|
|
3487
|
-
hint = "class";
|
|
3488
|
-
} else {
|
|
3489
|
-
hint = "method";
|
|
3490
|
-
}
|
|
3491
|
-
throw new TypeError(hint + " decorators must return a function or void 0");
|
|
3492
|
-
}
|
|
3493
|
-
}
|
|
3494
|
-
function applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata) {
|
|
3495
|
-
var decs = decInfo[0];
|
|
3496
|
-
var desc, init, value;
|
|
3497
|
-
if (isPrivate) {
|
|
3498
|
-
if (kind === 0 || kind === 1) {
|
|
3499
|
-
desc = {
|
|
3500
|
-
get: decInfo[3],
|
|
3501
|
-
set: decInfo[4]
|
|
3502
|
-
};
|
|
3503
|
-
} else if (kind === 3) {
|
|
3504
|
-
desc = {
|
|
3505
|
-
get: decInfo[3]
|
|
3506
|
-
};
|
|
3507
|
-
} else if (kind === 4) {
|
|
3508
|
-
desc = {
|
|
3509
|
-
set: decInfo[3]
|
|
3510
|
-
};
|
|
3511
|
-
} else {
|
|
3512
|
-
desc = {
|
|
3513
|
-
value: decInfo[3]
|
|
3514
|
-
};
|
|
3515
|
-
}
|
|
3516
|
-
} else if (kind !== 0) {
|
|
3517
|
-
desc = Object.getOwnPropertyDescriptor(base, name);
|
|
3518
|
-
}
|
|
3519
|
-
if (kind === 1) {
|
|
3520
|
-
value = {
|
|
3521
|
-
get: desc.get,
|
|
3522
|
-
set: desc.set
|
|
3523
|
-
};
|
|
3524
|
-
} else if (kind === 2) {
|
|
3525
|
-
value = desc.value;
|
|
3526
|
-
} else if (kind === 3) {
|
|
3527
|
-
value = desc.get;
|
|
3528
|
-
} else if (kind === 4) {
|
|
3529
|
-
value = desc.set;
|
|
3530
|
-
}
|
|
3531
|
-
var newValue, get, set;
|
|
3532
|
-
if (typeof decs === "function") {
|
|
3533
|
-
newValue = memberDec(decs, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
|
|
3534
|
-
if (newValue !== void 0) {
|
|
3535
|
-
assertValidReturnValue(kind, newValue);
|
|
3536
|
-
if (kind === 0) {
|
|
3537
|
-
init = newValue;
|
|
3538
|
-
} else if (kind === 1) {
|
|
3539
|
-
init = newValue.init;
|
|
3540
|
-
get = newValue.get || value.get;
|
|
3541
|
-
set = newValue.set || value.set;
|
|
3542
|
-
value = {
|
|
3543
|
-
get: get,
|
|
3544
|
-
set: set
|
|
3545
|
-
};
|
|
3546
|
-
} else {
|
|
3547
|
-
value = newValue;
|
|
3548
|
-
}
|
|
3549
|
-
}
|
|
3550
|
-
} else {
|
|
3551
|
-
for(var i = decs.length - 1; i >= 0; i--){
|
|
3552
|
-
var dec = decs[i];
|
|
3553
|
-
newValue = memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
|
|
3554
|
-
if (newValue !== void 0) {
|
|
3555
|
-
assertValidReturnValue(kind, newValue);
|
|
3556
|
-
var newInit;
|
|
3557
|
-
if (kind === 0) {
|
|
3558
|
-
newInit = newValue;
|
|
3559
|
-
} else if (kind === 1) {
|
|
3560
|
-
newInit = newValue.init;
|
|
3561
|
-
get = newValue.get || value.get;
|
|
3562
|
-
set = newValue.set || value.set;
|
|
3563
|
-
value = {
|
|
3564
|
-
get: get,
|
|
3565
|
-
set: set
|
|
3566
|
-
};
|
|
3567
|
-
} else {
|
|
3568
|
-
value = newValue;
|
|
3569
|
-
}
|
|
3570
|
-
if (newInit !== void 0) {
|
|
3571
|
-
if (init === void 0) {
|
|
3572
|
-
init = newInit;
|
|
3573
|
-
} else if (typeof init === "function") {
|
|
3574
|
-
init = [
|
|
3575
|
-
init,
|
|
3576
|
-
newInit
|
|
3577
|
-
];
|
|
3578
|
-
} else {
|
|
3579
|
-
init.push(newInit);
|
|
3580
|
-
}
|
|
3581
|
-
}
|
|
3582
|
-
}
|
|
3583
|
-
}
|
|
3584
|
-
}
|
|
3585
|
-
if (kind === 0 || kind === 1) {
|
|
3586
|
-
if (init === void 0) {
|
|
3587
|
-
init = function(instance, init) {
|
|
3588
|
-
return init;
|
|
3589
|
-
};
|
|
3590
|
-
} else if (typeof init !== "function") {
|
|
3591
|
-
var ownInitializers = init;
|
|
3592
|
-
init = function(instance, init) {
|
|
3593
|
-
var value = init;
|
|
3594
|
-
for(var i = 0; i < ownInitializers.length; i++){
|
|
3595
|
-
value = ownInitializers[i].call(instance, value);
|
|
3596
|
-
}
|
|
3597
|
-
return value;
|
|
3598
|
-
};
|
|
3599
|
-
} else {
|
|
3600
|
-
var originalInitializer = init;
|
|
3601
|
-
init = function(instance, init) {
|
|
3602
|
-
return originalInitializer.call(instance, init);
|
|
3603
|
-
};
|
|
3604
|
-
}
|
|
3605
|
-
ret.push(init);
|
|
3606
|
-
}
|
|
3607
|
-
if (kind !== 0) {
|
|
3608
|
-
if (kind === 1) {
|
|
3609
|
-
desc.get = value.get;
|
|
3610
|
-
desc.set = value.set;
|
|
3611
|
-
} else if (kind === 2) {
|
|
3612
|
-
desc.value = value;
|
|
3613
|
-
} else if (kind === 3) {
|
|
3614
|
-
desc.get = value;
|
|
3615
|
-
} else if (kind === 4) {
|
|
3616
|
-
desc.set = value;
|
|
3617
|
-
}
|
|
3618
|
-
if (isPrivate) {
|
|
3619
|
-
if (kind === 1) {
|
|
3620
|
-
ret.push(function(instance, args) {
|
|
3621
|
-
return value.get.call(instance, args);
|
|
3622
|
-
});
|
|
3623
|
-
ret.push(function(instance, args) {
|
|
3624
|
-
return value.set.call(instance, args);
|
|
3625
|
-
});
|
|
3626
|
-
} else if (kind === 2) {
|
|
3627
|
-
ret.push(value);
|
|
3628
|
-
} else {
|
|
3629
|
-
ret.push(function(instance, args) {
|
|
3630
|
-
return value.call(instance, args);
|
|
3631
|
-
});
|
|
3632
|
-
}
|
|
3633
|
-
} else {
|
|
3634
|
-
Object.defineProperty(base, name, desc);
|
|
3635
|
-
}
|
|
3636
|
-
}
|
|
3637
|
-
}
|
|
3638
|
-
function applyMemberDecs(Class, decInfos, metadata) {
|
|
3639
|
-
var ret = [];
|
|
3640
|
-
var protoInitializers;
|
|
3641
|
-
var staticInitializers;
|
|
3642
|
-
var existingProtoNonFields = new Map();
|
|
3643
|
-
var existingStaticNonFields = new Map();
|
|
3644
|
-
for(var i = 0; i < decInfos.length; i++){
|
|
3645
|
-
var decInfo = decInfos[i];
|
|
3646
|
-
if (!Array.isArray(decInfo)) continue;
|
|
3647
|
-
var kind = decInfo[1];
|
|
3648
|
-
var name = decInfo[2];
|
|
3649
|
-
var isPrivate = decInfo.length > 3;
|
|
3650
|
-
var isStatic = kind >= 5;
|
|
3651
|
-
var base;
|
|
3652
|
-
var initializers;
|
|
3653
|
-
if (isStatic) {
|
|
3654
|
-
base = Class;
|
|
3655
|
-
kind = kind - 5;
|
|
3656
|
-
staticInitializers = staticInitializers || [];
|
|
3657
|
-
initializers = staticInitializers;
|
|
3658
|
-
} else {
|
|
3659
|
-
base = Class.prototype;
|
|
3660
|
-
protoInitializers = protoInitializers || [];
|
|
3661
|
-
initializers = protoInitializers;
|
|
3662
|
-
}
|
|
3663
|
-
if (kind !== 0 && !isPrivate) {
|
|
3664
|
-
var existingNonFields = isStatic ? existingStaticNonFields : existingProtoNonFields;
|
|
3665
|
-
var existingKind = existingNonFields.get(name) || 0;
|
|
3666
|
-
if (existingKind === true || existingKind === 3 && kind !== 4 || existingKind === 4 && kind !== 3) {
|
|
3667
|
-
throw new Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + name);
|
|
3668
|
-
} else if (!existingKind && kind > 2) {
|
|
3669
|
-
existingNonFields.set(name, kind);
|
|
3670
|
-
} else {
|
|
3671
|
-
existingNonFields.set(name, true);
|
|
3672
|
-
}
|
|
3673
|
-
}
|
|
3674
|
-
applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata);
|
|
3675
|
-
}
|
|
3676
|
-
pushInitializers(ret, protoInitializers);
|
|
3677
|
-
pushInitializers(ret, staticInitializers);
|
|
3678
|
-
return ret;
|
|
3679
|
-
}
|
|
3680
|
-
function pushInitializers(ret, initializers) {
|
|
3681
|
-
if (initializers) {
|
|
3682
|
-
ret.push(function(instance) {
|
|
3683
|
-
for(var i = 0; i < initializers.length; i++){
|
|
3684
|
-
initializers[i].call(instance);
|
|
3685
|
-
}
|
|
3686
|
-
return instance;
|
|
3687
|
-
});
|
|
3688
|
-
}
|
|
3689
|
-
}
|
|
3690
|
-
function applyClassDecs(targetClass, classDecs, metadata) {
|
|
3691
|
-
if (classDecs.length > 0) {
|
|
3692
|
-
var initializers = [];
|
|
3693
|
-
var newClass = targetClass;
|
|
3694
|
-
var name = targetClass.name;
|
|
3695
|
-
for(var i = classDecs.length - 1; i >= 0; i--){
|
|
3696
|
-
var decoratorFinishedRef = {
|
|
3697
|
-
v: false
|
|
3698
|
-
};
|
|
3699
|
-
try {
|
|
3700
|
-
var nextNewClass = classDecs[i](newClass, {
|
|
3701
|
-
kind: "class",
|
|
3702
|
-
name: name,
|
|
3703
|
-
addInitializer: createAddInitializerMethod(initializers, decoratorFinishedRef),
|
|
3704
|
-
metadata
|
|
3705
|
-
});
|
|
3706
|
-
} finally{
|
|
3707
|
-
decoratorFinishedRef.v = true;
|
|
3708
|
-
}
|
|
3709
|
-
if (nextNewClass !== undefined) {
|
|
3710
|
-
assertValidReturnValue(10, nextNewClass);
|
|
3711
|
-
newClass = nextNewClass;
|
|
3712
|
-
}
|
|
3713
|
-
}
|
|
3714
|
-
return [
|
|
3715
|
-
defineMetadata(newClass, metadata),
|
|
3716
|
-
function() {
|
|
3717
|
-
for(var i = 0; i < initializers.length; i++){
|
|
3718
|
-
initializers[i].call(newClass);
|
|
3719
|
-
}
|
|
3720
|
-
}
|
|
3721
|
-
];
|
|
3722
|
-
}
|
|
3723
|
-
}
|
|
3724
|
-
function defineMetadata(Class, metadata) {
|
|
3725
|
-
return Object.defineProperty(Class, Symbol.metadata || Symbol.for("Symbol.metadata"), {
|
|
3726
|
-
configurable: true,
|
|
3727
|
-
enumerable: true,
|
|
3728
|
-
value: metadata
|
|
3729
|
-
});
|
|
3730
|
-
}
|
|
3731
|
-
return function applyDecs2203R(targetClass, memberDecs, classDecs, parentClass) {
|
|
3732
|
-
if (parentClass !== void 0) {
|
|
3733
|
-
var parentMetadata = parentClass[Symbol.metadata || Symbol.for("Symbol.metadata")];
|
|
3734
|
-
}
|
|
3735
|
-
var metadata = Object.create(parentMetadata === void 0 ? null : parentMetadata);
|
|
3736
|
-
var e = applyMemberDecs(targetClass, memberDecs, metadata);
|
|
3737
|
-
if (!classDecs.length) defineMetadata(targetClass, metadata);
|
|
3738
|
-
return {
|
|
3739
|
-
e: e,
|
|
3740
|
-
get c () {
|
|
3741
|
-
return applyClassDecs(targetClass, classDecs, metadata);
|
|
3742
|
-
}
|
|
3743
|
-
};
|
|
3744
|
-
};
|
|
3745
|
-
}
|
|
3746
|
-
function _apply_decs_2203_r(targetClass, memberDecs, classDecs, parentClass) {
|
|
3747
|
-
return (_apply_decs_2203_r = applyDecs2203RFactory())(targetClass, memberDecs, classDecs, parentClass);
|
|
3748
|
-
}
|
|
3749
|
-
var _dec, _initClass, _ViElement, _dec1, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _dec8, _dec9, _dec10, _dec11, _dec12, _dec13, _dec14, _dec15, _dec16, _dec17, _dec18, _init_name, _init_enter, _init_exit, _init_duration, _init_delay, _init_easing, _init_iterations, _init_direction, _init_fill, _init_open, _init_autoPlay, _init_cascade, _init_stagger, _init_staggerSelector, _init_staggerDirection, _init_reducedMotion, _init_keyframes, _init__isAnimating, _initProto;
|
|
3750
|
-
/** Shuffle indices using Fisher-Yates — no duplicate delay slots. */ function shuffleIndices(length) {
|
|
3751
|
-
const arr = Array.from({
|
|
3752
|
-
length
|
|
3753
|
-
}, (_, i)=>i);
|
|
3754
|
-
for(let i = arr.length - 1; i > 0; i--){
|
|
3755
|
-
const j = Math.floor(Math.random() * (i + 1));
|
|
3756
|
-
[arr[i], arr[j]] = [
|
|
3757
|
-
arr[j],
|
|
3758
|
-
arr[i]
|
|
3759
|
-
];
|
|
3760
|
-
}
|
|
3761
|
-
return arr;
|
|
3762
|
-
}
|
|
3763
|
-
let _ViAnimation;
|
|
3764
|
-
_dec = customElement('vi-animation'), _dec1 = property({
|
|
3765
|
-
type: String,
|
|
3766
|
-
reflect: true
|
|
3767
|
-
}), _dec2 = property({
|
|
3768
|
-
type: String,
|
|
3769
|
-
reflect: true
|
|
3770
|
-
}), _dec3 = property({
|
|
3771
|
-
type: String,
|
|
3772
|
-
reflect: true
|
|
3773
|
-
}), _dec4 = property({
|
|
3774
|
-
type: Number,
|
|
3775
|
-
reflect: true
|
|
3776
|
-
}), _dec5 = property({
|
|
3777
|
-
type: Number,
|
|
3778
|
-
reflect: true
|
|
3779
|
-
}), _dec6 = property({
|
|
3780
|
-
type: String,
|
|
3781
|
-
reflect: true
|
|
3782
|
-
}), _dec7 = property({
|
|
3783
|
-
type: Number,
|
|
3784
|
-
reflect: true
|
|
3785
|
-
}), _dec8 = property({
|
|
3786
|
-
type: String,
|
|
3787
|
-
reflect: true
|
|
3788
|
-
}), _dec9 = property({
|
|
3789
|
-
type: String,
|
|
3790
|
-
reflect: true
|
|
3791
|
-
}), _dec10 = property({
|
|
3792
|
-
type: Boolean,
|
|
3793
|
-
reflect: true
|
|
3794
|
-
}), _dec11 = property({
|
|
3795
|
-
type: Boolean,
|
|
3796
|
-
attribute: 'auto-play',
|
|
3797
|
-
reflect: true
|
|
3798
|
-
}), _dec12 = property({
|
|
3799
|
-
type: Boolean,
|
|
3800
|
-
reflect: true
|
|
3801
|
-
}), _dec13 = property({
|
|
3802
|
-
type: Number,
|
|
3803
|
-
reflect: true
|
|
3804
|
-
}), _dec14 = property({
|
|
3805
|
-
type: String,
|
|
3806
|
-
attribute: 'stagger-selector',
|
|
3807
|
-
reflect: true
|
|
3808
|
-
}), _dec15 = property({
|
|
3809
|
-
type: String,
|
|
3810
|
-
attribute: 'stagger-direction',
|
|
3811
|
-
reflect: true
|
|
3812
|
-
}), _dec16 = property({
|
|
3813
|
-
type: String,
|
|
3814
|
-
attribute: 'reduced-motion',
|
|
3815
|
-
reflect: true
|
|
3816
|
-
}), _dec17 = property({
|
|
3817
|
-
attribute: false
|
|
3818
|
-
}), _dec18 = state();
|
|
3819
|
-
class ViAnimation extends (_ViElement = ViElement) {
|
|
3820
|
-
static{
|
|
3821
|
-
({ e: [_init_name, _init_enter, _init_exit, _init_duration, _init_delay, _init_easing, _init_iterations, _init_direction, _init_fill, _init_open, _init_autoPlay, _init_cascade, _init_stagger, _init_staggerSelector, _init_staggerDirection, _init_reducedMotion, _init_keyframes, _init__isAnimating, _initProto], c: [_ViAnimation, _initClass] } = _apply_decs_2203_r(this, [
|
|
3822
|
-
[
|
|
3823
|
-
_dec1,
|
|
3824
|
-
1,
|
|
3825
|
-
"name"
|
|
3826
|
-
],
|
|
3827
|
-
[
|
|
3828
|
-
_dec2,
|
|
3829
|
-
1,
|
|
3830
|
-
"enter"
|
|
3831
|
-
],
|
|
3832
|
-
[
|
|
3833
|
-
_dec3,
|
|
3834
|
-
1,
|
|
3835
|
-
"exit"
|
|
3836
|
-
],
|
|
3837
|
-
[
|
|
3838
|
-
_dec4,
|
|
3839
|
-
1,
|
|
3840
|
-
"duration"
|
|
3841
|
-
],
|
|
3842
|
-
[
|
|
3843
|
-
_dec5,
|
|
3844
|
-
1,
|
|
3845
|
-
"delay"
|
|
3846
|
-
],
|
|
3847
|
-
[
|
|
3848
|
-
_dec6,
|
|
3849
|
-
1,
|
|
3850
|
-
"easing"
|
|
3851
|
-
],
|
|
3852
|
-
[
|
|
3853
|
-
_dec7,
|
|
3854
|
-
1,
|
|
3855
|
-
"iterations"
|
|
3856
|
-
],
|
|
3857
|
-
[
|
|
3858
|
-
_dec8,
|
|
3859
|
-
1,
|
|
3860
|
-
"direction"
|
|
3861
|
-
],
|
|
3862
|
-
[
|
|
3863
|
-
_dec9,
|
|
3864
|
-
1,
|
|
3865
|
-
"fill"
|
|
3866
|
-
],
|
|
3867
|
-
[
|
|
3868
|
-
_dec10,
|
|
3869
|
-
1,
|
|
3870
|
-
"open"
|
|
3871
|
-
],
|
|
3872
|
-
[
|
|
3873
|
-
_dec11,
|
|
3874
|
-
1,
|
|
3875
|
-
"autoPlay"
|
|
3876
|
-
],
|
|
3877
|
-
[
|
|
3878
|
-
_dec12,
|
|
3879
|
-
1,
|
|
3880
|
-
"cascade"
|
|
3881
|
-
],
|
|
3882
|
-
[
|
|
3883
|
-
_dec13,
|
|
3884
|
-
1,
|
|
3885
|
-
"stagger"
|
|
3886
|
-
],
|
|
3887
|
-
[
|
|
3888
|
-
_dec14,
|
|
3889
|
-
1,
|
|
3890
|
-
"staggerSelector"
|
|
3891
|
-
],
|
|
3892
|
-
[
|
|
3893
|
-
_dec15,
|
|
3894
|
-
1,
|
|
3895
|
-
"staggerDirection"
|
|
3896
|
-
],
|
|
3897
|
-
[
|
|
3898
|
-
_dec16,
|
|
3899
|
-
1,
|
|
3900
|
-
"reducedMotion"
|
|
3901
|
-
],
|
|
3902
|
-
[
|
|
3903
|
-
_dec17,
|
|
3904
|
-
1,
|
|
3905
|
-
"keyframes"
|
|
3906
|
-
],
|
|
3907
|
-
[
|
|
3908
|
-
_dec18,
|
|
3909
|
-
1,
|
|
3910
|
-
"_isAnimating"
|
|
3911
|
-
]
|
|
3912
|
-
], [
|
|
3913
|
-
_dec
|
|
3914
|
-
], _ViElement));
|
|
3915
|
-
}
|
|
3916
|
-
createRenderRoot() {
|
|
3917
|
-
return this;
|
|
3918
|
-
}
|
|
3919
|
-
#___private_name_1 = (_initProto(this), _init_name(this, 'fade-in'));
|
|
3920
|
-
get name() {
|
|
3921
|
-
return this.#___private_name_1;
|
|
3922
|
-
}
|
|
3923
|
-
set name(_v) {
|
|
3924
|
-
this.#___private_name_1 = _v;
|
|
3925
|
-
}
|
|
3926
|
-
#___private_enter_2 = _init_enter(this, '');
|
|
3927
|
-
get enter() {
|
|
3928
|
-
return this.#___private_enter_2;
|
|
3929
|
-
}
|
|
3930
|
-
set enter(_v) {
|
|
3931
|
-
this.#___private_enter_2 = _v;
|
|
3932
|
-
}
|
|
3933
|
-
#___private_exit_3 = _init_exit(this, '');
|
|
3934
|
-
get exit() {
|
|
3935
|
-
return this.#___private_exit_3;
|
|
3936
|
-
}
|
|
3937
|
-
set exit(_v) {
|
|
3938
|
-
this.#___private_exit_3 = _v;
|
|
3939
|
-
}
|
|
3940
|
-
#___private_duration_4 = _init_duration(this, 300);
|
|
3941
|
-
get duration() {
|
|
3942
|
-
return this.#___private_duration_4;
|
|
3943
|
-
}
|
|
3944
|
-
set duration(_v) {
|
|
3945
|
-
this.#___private_duration_4 = _v;
|
|
3946
|
-
}
|
|
3947
|
-
#___private_delay_5 = _init_delay(this, 0);
|
|
3948
|
-
get delay() {
|
|
3949
|
-
return this.#___private_delay_5;
|
|
3950
|
-
}
|
|
3951
|
-
set delay(_v) {
|
|
3952
|
-
this.#___private_delay_5 = _v;
|
|
3953
|
-
}
|
|
3954
|
-
#___private_easing_6 = _init_easing(this, 'cubic-bezier(0.2, 0, 0, 1)');
|
|
3955
|
-
get easing() {
|
|
3956
|
-
return this.#___private_easing_6;
|
|
3957
|
-
}
|
|
3958
|
-
set easing(_v) {
|
|
3959
|
-
this.#___private_easing_6 = _v;
|
|
3960
|
-
}
|
|
3961
|
-
#___private_iterations_7 = _init_iterations(this, 1);
|
|
3962
|
-
get iterations() {
|
|
3963
|
-
return this.#___private_iterations_7;
|
|
3964
|
-
}
|
|
3965
|
-
set iterations(_v) {
|
|
3966
|
-
this.#___private_iterations_7 = _v;
|
|
3967
|
-
}
|
|
3968
|
-
#___private_direction_8 = _init_direction(this, 'normal');
|
|
3969
|
-
get direction() {
|
|
3970
|
-
return this.#___private_direction_8;
|
|
3971
|
-
}
|
|
3972
|
-
set direction(_v) {
|
|
3973
|
-
this.#___private_direction_8 = _v;
|
|
3974
|
-
}
|
|
3975
|
-
#___private_fill_9 = _init_fill(this, 'forwards');
|
|
3976
|
-
get fill() {
|
|
3977
|
-
return this.#___private_fill_9;
|
|
3978
|
-
}
|
|
3979
|
-
set fill(_v) {
|
|
3980
|
-
this.#___private_fill_9 = _v;
|
|
3981
|
-
}
|
|
3982
|
-
#___private_open_10 = _init_open(this, true);
|
|
3983
|
-
get open() {
|
|
3984
|
-
return this.#___private_open_10;
|
|
3985
|
-
}
|
|
3986
|
-
set open(_v) {
|
|
3987
|
-
this.#___private_open_10 = _v;
|
|
3988
|
-
}
|
|
3989
|
-
#___private_autoPlay_11 = _init_autoPlay(this, true);
|
|
3990
|
-
get autoPlay() {
|
|
3991
|
-
return this.#___private_autoPlay_11;
|
|
3992
|
-
}
|
|
3993
|
-
set autoPlay(_v) {
|
|
3994
|
-
this.#___private_autoPlay_11 = _v;
|
|
3995
|
-
}
|
|
3996
|
-
#___private_cascade_12 = _init_cascade(this, false);
|
|
3997
|
-
get cascade() {
|
|
3998
|
-
return this.#___private_cascade_12;
|
|
3999
|
-
}
|
|
4000
|
-
set cascade(_v) {
|
|
4001
|
-
this.#___private_cascade_12 = _v;
|
|
4002
|
-
}
|
|
4003
|
-
#___private_stagger_13 = _init_stagger(this, 50);
|
|
4004
|
-
get stagger() {
|
|
4005
|
-
return this.#___private_stagger_13;
|
|
4006
|
-
}
|
|
4007
|
-
set stagger(_v) {
|
|
4008
|
-
this.#___private_stagger_13 = _v;
|
|
4009
|
-
}
|
|
4010
|
-
#___private_staggerSelector_14 = _init_staggerSelector(this, ':scope > *');
|
|
4011
|
-
get staggerSelector() {
|
|
4012
|
-
return this.#___private_staggerSelector_14;
|
|
4013
|
-
}
|
|
4014
|
-
set staggerSelector(_v) {
|
|
4015
|
-
this.#___private_staggerSelector_14 = _v;
|
|
4016
|
-
}
|
|
4017
|
-
#___private_staggerDirection_15 = _init_staggerDirection(this, 'normal');
|
|
4018
|
-
get staggerDirection() {
|
|
4019
|
-
return this.#___private_staggerDirection_15;
|
|
4020
|
-
}
|
|
4021
|
-
set staggerDirection(_v) {
|
|
4022
|
-
this.#___private_staggerDirection_15 = _v;
|
|
4023
|
-
}
|
|
4024
|
-
#___private_reducedMotion_16 = _init_reducedMotion(this, 'auto');
|
|
4025
|
-
get reducedMotion() {
|
|
4026
|
-
return this.#___private_reducedMotion_16;
|
|
4027
|
-
}
|
|
4028
|
-
set reducedMotion(_v) {
|
|
4029
|
-
this.#___private_reducedMotion_16 = _v;
|
|
4030
|
-
}
|
|
4031
|
-
#___private_keyframes_17 = _init_keyframes(this, null);
|
|
4032
|
-
get keyframes() {
|
|
4033
|
-
return this.#___private_keyframes_17;
|
|
4034
|
-
}
|
|
4035
|
-
set keyframes(_v) {
|
|
4036
|
-
this.#___private_keyframes_17 = _v;
|
|
4037
|
-
}
|
|
4038
|
-
#___private__isAnimating_18 = _init__isAnimating(this, false);
|
|
4039
|
-
get _isAnimating() {
|
|
4040
|
-
return this.#___private__isAnimating_18;
|
|
4041
|
-
}
|
|
4042
|
-
set _isAnimating(_v) {
|
|
4043
|
-
this.#___private__isAnimating_18 = _v;
|
|
4044
|
-
}
|
|
4045
|
-
_activeAnimations = [];
|
|
4046
|
-
/**
|
|
4047
|
-
* Monotonically incrementing sequence ID. Incremented on every new sequence
|
|
4048
|
-
* start (via _cancelSilently). Async continuations check their captured ID
|
|
4049
|
-
* against the current to detect stale callbacks.
|
|
4050
|
-
*/ _sequenceId = 0;
|
|
4051
|
-
/**
|
|
4052
|
-
* Prevents updated() from re-calling show()/hide() when the imperative API
|
|
4053
|
-
* internally mutates this.open to keep it in sync with animation state.
|
|
4054
|
-
*/ _updateGuard = false;
|
|
4055
|
-
/** Cached matchMedia object for prefers-reduced-motion. */ _reducedMotionMQ = null;
|
|
4056
|
-
_reducedMotionListener = null;
|
|
4057
|
-
// ─── Public getters ───────────────────────────────────────────────────────
|
|
4058
|
-
/** Whether an animation sequence is currently running. */ get isAnimating() {
|
|
4059
|
-
return this._isAnimating;
|
|
4060
|
-
}
|
|
4061
|
-
// ─── Lifecycle ────────────────────────────────────────────────────────────
|
|
4062
|
-
connectedCallback() {
|
|
4063
|
-
super.connectedCallback();
|
|
4064
|
-
if (!this.open) {
|
|
4065
|
-
this.hidden = true;
|
|
4066
|
-
} else if (this.autoPlay) {
|
|
4067
|
-
this.updateComplete.then(()=>this.play());
|
|
4068
|
-
}
|
|
4069
|
-
if (typeof window !== 'undefined') {
|
|
4070
|
-
this._reducedMotionMQ = window.matchMedia('(prefers-reduced-motion: reduce)');
|
|
4071
|
-
this._reducedMotionListener = ()=>this.requestUpdate();
|
|
4072
|
-
this._reducedMotionMQ.addEventListener('change', this._reducedMotionListener);
|
|
4073
|
-
}
|
|
4074
|
-
}
|
|
4075
|
-
disconnectedCallback() {
|
|
4076
|
-
super.disconnectedCallback();
|
|
4077
|
-
// Cancel in-flight animations to release resources on detached nodes
|
|
4078
|
-
this._cancelSilently();
|
|
4079
|
-
if (this._reducedMotionMQ && this._reducedMotionListener) {
|
|
4080
|
-
this._reducedMotionMQ.removeEventListener('change', this._reducedMotionListener);
|
|
4081
|
-
this._reducedMotionMQ = null;
|
|
4082
|
-
this._reducedMotionListener = null;
|
|
4083
|
-
}
|
|
4084
|
-
}
|
|
4085
|
-
updated(changedProperties) {
|
|
4086
|
-
super.updated(changedProperties);
|
|
4087
|
-
// _updateGuard prevents show()/hide() from being called again when the
|
|
4088
|
-
// imperative API internally sets this.open to keep property state in sync
|
|
4089
|
-
if (this._updateGuard) return;
|
|
4090
|
-
if (changedProperties.has('open') && changedProperties.get('open') !== undefined) {
|
|
4091
|
-
if (this.open) {
|
|
4092
|
-
this.show();
|
|
4093
|
-
} else {
|
|
4094
|
-
this.hide();
|
|
4095
|
-
}
|
|
4096
|
-
}
|
|
4097
|
-
}
|
|
4098
|
-
// ─── Imperative API ───────────────────────────────────────────────────────
|
|
4099
|
-
/** Returns a snapshot of the currently running Animation objects. */ getAnimations() {
|
|
4100
|
-
return [
|
|
4101
|
-
...this._activeAnimations
|
|
4102
|
-
];
|
|
4103
|
-
}
|
|
4104
|
-
/**
|
|
4105
|
-
* Animate element into view.
|
|
4106
|
-
* Fires cancelable `vi-animation-before-show` — call preventDefault() to block.
|
|
4107
|
-
*/ async show() {
|
|
4108
|
-
const allowed = this._dispatchCancelable('vi-animation-before-show', {
|
|
4109
|
-
name: this.enter || this.name,
|
|
4110
|
-
target: this,
|
|
4111
|
-
phase: 'enter'
|
|
4112
|
-
});
|
|
4113
|
-
if (!allowed) {
|
|
4114
|
-
// If show() was triggered by a declarative open=true change while still hidden,
|
|
4115
|
-
// revert to a consistent closed state.
|
|
4116
|
-
if (this.open && this.hidden) {
|
|
4117
|
-
this._withUpdateGuard(()=>{
|
|
4118
|
-
this.open = false;
|
|
4119
|
-
this.hidden = true;
|
|
4120
|
-
});
|
|
4121
|
-
}
|
|
4122
|
-
return;
|
|
4123
|
-
}
|
|
4124
|
-
this._withUpdateGuard(()=>{
|
|
4125
|
-
if (!this.open) this.open = true;
|
|
4126
|
-
this.hidden = false;
|
|
4127
|
-
});
|
|
4128
|
-
const animName = this.enter || this.name || 'fade-in';
|
|
4129
|
-
await this._runAnimationSequence(animName, 'enter', false);
|
|
4130
|
-
}
|
|
4131
|
-
/**
|
|
4132
|
-
* Animate element out of view.
|
|
4133
|
-
* Fires cancelable `vi-animation-before-hide` — call preventDefault() to block.
|
|
4134
|
-
*/ async hide() {
|
|
4135
|
-
const exitName = this.exit || EXIT_COUNTERPART[this.name] || 'fade-out';
|
|
4136
|
-
const allowed = this._dispatchCancelable('vi-animation-before-hide', {
|
|
4137
|
-
name: exitName,
|
|
4138
|
-
target: this,
|
|
4139
|
-
phase: 'exit'
|
|
4140
|
-
});
|
|
4141
|
-
if (!allowed) {
|
|
4142
|
-
if (!this.open && !this.hidden) {
|
|
4143
|
-
this._withUpdateGuard(()=>{
|
|
4144
|
-
this.open = true;
|
|
4145
|
-
this.hidden = false;
|
|
4146
|
-
});
|
|
4147
|
-
}
|
|
4148
|
-
return;
|
|
4149
|
-
}
|
|
4150
|
-
await this._runAnimationSequence(exitName, 'exit', true);
|
|
4151
|
-
this._withUpdateGuard(()=>{
|
|
4152
|
-
if (this.open) this.open = false;
|
|
4153
|
-
this.hidden = true;
|
|
4154
|
-
});
|
|
4155
|
-
}
|
|
4156
|
-
/** Toggle between show() and hide(). */ async toggle() {
|
|
4157
|
-
if (this.open) {
|
|
4158
|
-
await this.hide();
|
|
4159
|
-
} else {
|
|
4160
|
-
await this.show();
|
|
4161
|
-
}
|
|
4162
|
-
}
|
|
4163
|
-
/** Play the current `name` animation without changing visibility. */ async play() {
|
|
4164
|
-
const phase = this.open ? 'enter' : 'custom';
|
|
4165
|
-
await this._runAnimationSequence(this.name, phase, false);
|
|
4166
|
-
}
|
|
4167
|
-
pause() {
|
|
4168
|
-
this._activeAnimations.forEach((a)=>a.pause());
|
|
4169
|
-
}
|
|
4170
|
-
resume() {
|
|
4171
|
-
this._activeAnimations.forEach((a)=>a.play());
|
|
4172
|
-
}
|
|
4173
|
-
reverse() {
|
|
4174
|
-
this._activeAnimations.forEach((a)=>a.reverse());
|
|
4175
|
-
}
|
|
4176
|
-
/**
|
|
4177
|
-
* Cancel all running animations and fire `vi-animation-cancel`.
|
|
4178
|
-
*/ cancel() {
|
|
4179
|
-
this._cancelSilently();
|
|
4180
|
-
this._dispatch('vi-animation-cancel', {
|
|
4181
|
-
name: this.name,
|
|
4182
|
-
target: this,
|
|
4183
|
-
phase: 'custom'
|
|
4184
|
-
});
|
|
4185
|
-
}
|
|
4186
|
-
/**
|
|
4187
|
-
* Jump all running animations to their end state and fire `vi-animation-finish`.
|
|
4188
|
-
*/ finish() {
|
|
4189
|
-
const anims = [
|
|
4190
|
-
...this._activeAnimations
|
|
4191
|
-
];
|
|
4192
|
-
// Clear state first so stale callbacks don't double-process
|
|
4193
|
-
this._cancelSilently();
|
|
4194
|
-
anims.forEach((a)=>{
|
|
4195
|
-
try {
|
|
4196
|
-
a.finish();
|
|
4197
|
-
} catch {}
|
|
4198
|
-
});
|
|
4199
|
-
this._dispatch('vi-animation-finish', {
|
|
4200
|
-
name: this.name,
|
|
4201
|
-
target: this,
|
|
4202
|
-
phase: 'custom'
|
|
4203
|
-
});
|
|
4204
|
-
}
|
|
4205
|
-
// ─── Private helpers ──────────────────────────────────────────────────────
|
|
4206
|
-
/**
|
|
4207
|
-
* Cancel all in-flight animations WITHOUT firing a public event.
|
|
4208
|
-
* Used for: self-interruption when a new sequence starts, and for lifecycle cleanup.
|
|
4209
|
-
*/ _cancelSilently() {
|
|
4210
|
-
this._sequenceId++; // invalidate any pending async continuations
|
|
4211
|
-
this._activeAnimations.forEach((a)=>{
|
|
4212
|
-
try {
|
|
4213
|
-
a.cancel();
|
|
4214
|
-
} catch {}
|
|
4215
|
-
});
|
|
4216
|
-
this._activeAnimations = [];
|
|
4217
|
-
this._isAnimating = false;
|
|
4218
|
-
}
|
|
4219
|
-
/**
|
|
4220
|
-
* Runs a function that mutates reactive properties without triggering
|
|
4221
|
-
* the updated() -> show()/hide() feedback loop.
|
|
4222
|
-
*/ _withUpdateGuard(fn) {
|
|
4223
|
-
this._updateGuard = true;
|
|
4224
|
-
fn();
|
|
4225
|
-
this.updateComplete.then(()=>{
|
|
4226
|
-
this._updateGuard = false;
|
|
4227
|
-
});
|
|
4228
|
-
}
|
|
4229
|
-
_getTargetElements() {
|
|
4230
|
-
const childNodes = Array.from(this.children);
|
|
4231
|
-
if (childNodes.length === 0) return [
|
|
4232
|
-
this
|
|
4233
|
-
];
|
|
4234
|
-
if (!this.cascade) return childNodes;
|
|
4235
|
-
const targetElements = [];
|
|
4236
|
-
for (const node of childNodes){
|
|
4237
|
-
let matched = false;
|
|
4238
|
-
try {
|
|
4239
|
-
if (node.matches(this.staggerSelector)) {
|
|
4240
|
-
targetElements.push(node);
|
|
4241
|
-
matched = true;
|
|
4242
|
-
}
|
|
4243
|
-
const children = Array.from(node.querySelectorAll(this.staggerSelector));
|
|
4244
|
-
if (children.length > 0) {
|
|
4245
|
-
targetElements.push(...children);
|
|
4246
|
-
matched = true;
|
|
4247
|
-
}
|
|
4248
|
-
} catch {
|
|
4249
|
-
return childNodes; // graceful fallback to all child nodes
|
|
4250
|
-
}
|
|
4251
|
-
if (!matched) targetElements.push(node);
|
|
4252
|
-
}
|
|
4253
|
-
return targetElements.length > 0 ? targetElements : childNodes;
|
|
4254
|
-
}
|
|
4255
|
-
/**
|
|
4256
|
-
* Returns keyframes for a given animation name.
|
|
4257
|
-
* - Consumer keyframes are passed through as-is (Keyframe[] or PropertyIndexedKeyframes).
|
|
4258
|
-
* - Expand/collapse presets dynamically read scrollHeight/scrollWidth to avoid magic-number clipping.
|
|
4259
|
-
* - Falls back to PRESET_KEYFRAMES, then 'fade-in' if unknown.
|
|
4260
|
-
*/ _getKeyframes(animName, phase, isReducedMotion, target) {
|
|
4261
|
-
// Explicit consumer-supplied keyframes take highest priority
|
|
4262
|
-
if (this.keyframes) return this.keyframes;
|
|
4263
|
-
// For built-in presets under reduced motion, substitute with safe opacity fades
|
|
4264
|
-
if (isReducedMotion) {
|
|
4265
|
-
return PRESET_KEYFRAMES[phase === 'exit' ? 'fade-out' : 'fade-in'];
|
|
4266
|
-
}
|
|
4267
|
-
// Dynamic expand/collapse using actual element dimensions
|
|
4268
|
-
if (EXPAND_COLLAPSE_PRESETS.has(animName) && target) {
|
|
4269
|
-
const h = target.scrollHeight;
|
|
4270
|
-
const w = target.scrollWidth;
|
|
4271
|
-
switch(animName){
|
|
4272
|
-
case 'expand-vertical':
|
|
4273
|
-
return [
|
|
4274
|
-
{
|
|
4275
|
-
maxHeight: '0px',
|
|
4276
|
-
opacity: 0,
|
|
4277
|
-
overflow: 'hidden'
|
|
4278
|
-
},
|
|
4279
|
-
{
|
|
4280
|
-
maxHeight: `${h}px`,
|
|
4281
|
-
opacity: 1,
|
|
4282
|
-
overflow: 'hidden'
|
|
4283
|
-
}
|
|
4284
|
-
];
|
|
4285
|
-
case 'collapse-vertical':
|
|
4286
|
-
return [
|
|
4287
|
-
{
|
|
4288
|
-
maxHeight: `${h}px`,
|
|
4289
|
-
opacity: 1,
|
|
4290
|
-
overflow: 'hidden'
|
|
4291
|
-
},
|
|
4292
|
-
{
|
|
4293
|
-
maxHeight: '0px',
|
|
4294
|
-
opacity: 0,
|
|
4295
|
-
overflow: 'hidden'
|
|
4296
|
-
}
|
|
4297
|
-
];
|
|
4298
|
-
case 'expand-horizontal':
|
|
4299
|
-
return [
|
|
4300
|
-
{
|
|
4301
|
-
maxWidth: '0px',
|
|
4302
|
-
opacity: 0,
|
|
4303
|
-
overflow: 'hidden'
|
|
4304
|
-
},
|
|
4305
|
-
{
|
|
4306
|
-
maxWidth: `${w}px`,
|
|
4307
|
-
opacity: 1,
|
|
4308
|
-
overflow: 'hidden'
|
|
4309
|
-
}
|
|
4310
|
-
];
|
|
4311
|
-
case 'collapse-horizontal':
|
|
4312
|
-
return [
|
|
4313
|
-
{
|
|
4314
|
-
maxWidth: `${w}px`,
|
|
4315
|
-
opacity: 1,
|
|
4316
|
-
overflow: 'hidden'
|
|
4317
|
-
},
|
|
4318
|
-
{
|
|
4319
|
-
maxWidth: '0px',
|
|
4320
|
-
opacity: 0,
|
|
4321
|
-
overflow: 'hidden'
|
|
4322
|
-
}
|
|
4323
|
-
];
|
|
4324
|
-
}
|
|
4325
|
-
}
|
|
4326
|
-
return PRESET_KEYFRAMES[animName] ?? PRESET_KEYFRAMES['fade-in'];
|
|
4327
|
-
}
|
|
4328
|
-
_calculateStaggerDelay(index, total, shuffledOrder) {
|
|
4329
|
-
if (!this.cascade || total <= 1) return this.delay;
|
|
4330
|
-
let orderIndex = index;
|
|
4331
|
-
if (this.staggerDirection === 'reverse') {
|
|
4332
|
-
orderIndex = total - 1 - index;
|
|
4333
|
-
} else if (this.staggerDirection === 'center') {
|
|
4334
|
-
orderIndex = Math.abs((total - 1) / 2 - index);
|
|
4335
|
-
} else if (this.staggerDirection === 'random' && shuffledOrder) {
|
|
4336
|
-
orderIndex = shuffledOrder[index];
|
|
4337
|
-
}
|
|
4338
|
-
return this.delay + orderIndex * this.stagger;
|
|
4339
|
-
}
|
|
4340
|
-
async _runAnimationSequence(animName, phase, isExitPhase) {
|
|
4341
|
-
const isReduced = this._shouldReduceMotion();
|
|
4342
|
-
const targets = this._getTargetElements();
|
|
4343
|
-
if (targets.length === 0) return;
|
|
4344
|
-
// Interrupt previous sequence silently (no vi-animation-cancel event)
|
|
4345
|
-
this._cancelSilently();
|
|
4346
|
-
const mySequenceId = this._sequenceId;
|
|
4347
|
-
this._isAnimating = true;
|
|
4348
|
-
// 'auto' mode: shorten duration AND substitute keyframes.
|
|
4349
|
-
// 'fade-only' mode: substitute keyframes only, original duration is preserved.
|
|
4350
|
-
const actualDuration = isReduced && this.reducedMotion !== 'fade-only' ? Math.min(this.duration, 100) : this.duration;
|
|
4351
|
-
this._dispatch('vi-animation-start', {
|
|
4352
|
-
name: animName,
|
|
4353
|
-
target: this,
|
|
4354
|
-
phase,
|
|
4355
|
-
duration: actualDuration,
|
|
4356
|
-
delay: this.delay
|
|
4357
|
-
});
|
|
4358
|
-
// Pre-compute shuffled order so all elements get unique, non-repeating delay slots
|
|
4359
|
-
const shuffledOrder = this.staggerDirection === 'random' ? shuffleIndices(targets.length) : undefined;
|
|
4360
|
-
const animationPromises = targets.map((el, index)=>{
|
|
4361
|
-
const elementDelay = isReduced ? 0 : this._calculateStaggerDelay(index, targets.length, shuffledOrder);
|
|
4362
|
-
const kf = this._getKeyframes(animName, phase, isReduced, el);
|
|
4363
|
-
const anim = el.animate(kf, {
|
|
4364
|
-
duration: actualDuration,
|
|
4365
|
-
delay: elementDelay,
|
|
4366
|
-
easing: this.easing,
|
|
4367
|
-
iterations: this.iterations,
|
|
4368
|
-
direction: this.direction,
|
|
4369
|
-
fill: this.fill
|
|
4370
|
-
});
|
|
4371
|
-
this._activeAnimations.push(anim);
|
|
4372
|
-
return anim.finished.then(()=>{
|
|
4373
|
-
// For exit animations: commit the end-frame styles to element.style and
|
|
4374
|
-
// cancel the WAAPI fill so external CSS can take over later (avoids
|
|
4375
|
-
// invisible elements if the element is re-shown via show() or style).
|
|
4376
|
-
if (isExitPhase) {
|
|
4377
|
-
try {
|
|
4378
|
-
anim.commitStyles();
|
|
4379
|
-
} catch {}
|
|
4380
|
-
try {
|
|
4381
|
-
anim.cancel();
|
|
4382
|
-
} catch {}
|
|
4383
|
-
}
|
|
4384
|
-
}, ()=>null);
|
|
4385
|
-
});
|
|
4386
|
-
await Promise.all(animationPromises);
|
|
4387
|
-
// Discard stale result if a newer sequence has already started
|
|
4388
|
-
if (this._sequenceId !== mySequenceId) return;
|
|
4389
|
-
this._isAnimating = false;
|
|
4390
|
-
this._activeAnimations = [];
|
|
4391
|
-
this._dispatch('vi-animation-end', {
|
|
4392
|
-
name: animName,
|
|
4393
|
-
target: this,
|
|
4394
|
-
phase,
|
|
4395
|
-
completed: true
|
|
4396
|
-
});
|
|
4397
|
-
}
|
|
4398
|
-
/**
|
|
4399
|
-
* Returns whether any reduced-motion adaptation should be applied.
|
|
4400
|
-
*
|
|
4401
|
-
* Both 'auto' and 'fade-only' gate on the OS/browser preference so that the attribute
|
|
4402
|
-
* does not override what the user has configured at the system level. The distinction
|
|
4403
|
-
* between them is captured in _runAnimationSequence:
|
|
4404
|
-
* - 'auto': shorten duration (≤100 ms) + substitute with opacity fade.
|
|
4405
|
-
* - 'fade-only': substitute with opacity fade, but keep the original duration.
|
|
4406
|
-
* - 'disable': ignore OS preference entirely — always play the full animation.
|
|
4407
|
-
*/ _shouldReduceMotion() {
|
|
4408
|
-
if (this.reducedMotion === 'disable') return false;
|
|
4409
|
-
// Gate on the OS/browser preference for both 'auto' and 'fade-only'.
|
|
4410
|
-
return this._reducedMotionMQ?.matches ?? (typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
|
|
4411
|
-
}
|
|
4412
|
-
_dispatch(eventName, detail) {
|
|
4413
|
-
this.dispatchEvent(new CustomEvent(eventName, {
|
|
4414
|
-
detail,
|
|
4415
|
-
bubbles: true,
|
|
4416
|
-
composed: true
|
|
4417
|
-
}));
|
|
4418
|
-
}
|
|
4419
|
-
/**
|
|
4420
|
-
* Dispatch a cancelable event. Returns true if the animation should proceed
|
|
4421
|
-
* (i.e. preventDefault() was NOT called), false if it should be blocked.
|
|
4422
|
-
*/ _dispatchCancelable(eventName, detail) {
|
|
4423
|
-
const event = new CustomEvent(eventName, {
|
|
4424
|
-
detail,
|
|
4425
|
-
bubbles: true,
|
|
4426
|
-
composed: true,
|
|
4427
|
-
cancelable: true
|
|
4428
|
-
});
|
|
4429
|
-
this.dispatchEvent(event);
|
|
4430
|
-
return !event.defaultPrevented;
|
|
4431
|
-
}
|
|
4432
|
-
static{
|
|
4433
|
-
_initClass();
|
|
4434
|
-
}
|
|
4435
|
-
}
|
|
4436
|
-
|
|
4437
|
-
export { _ViAlert as ViAlert, _ViAnimation as ViAnimation, _ViBadge as ViBadge, _ViChip as ViChip, _ViChipGroup as ViChipGroup, ViElement, registerIcons };
|
|
13
|
+
export { ViBadge } from './badge/vi-badge.js';
|
|
14
|
+
export { ViAlert } from './alert/vi-alert.js';
|
|
15
|
+
export { ViChip } from './chip/vi-chip.js';
|
|
16
|
+
export { ViChipGroup } from './chip/vi-chip-group.js';
|
|
17
|
+
export { ViAnimation } from './animation/vi-animation.js';
|