@vialiq/web-components 0.14.0 → 0.16.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.d.ts.map +1 -1
- package/checkbox/vi-checkbox.js +1 -6
- package/flow-BYvW0t4Z.js +883 -0
- package/index.d.ts +2 -0
- package/index.js +185 -3973
- 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/radio/vi-radio.d.ts.map +1 -1
- package/radio/vi-radio.js +0 -6
- package/tooltip/vi-tooltip.js +3 -109
|
@@ -0,0 +1,603 @@
|
|
|
1
|
+
import { unsafeCSS, css, html } from 'lit';
|
|
2
|
+
import { customElement, property, state } from 'lit/decorators.js';
|
|
3
|
+
import { V as ViElement } from '../vi-element-C6GfDPs3.js';
|
|
4
|
+
|
|
5
|
+
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}";
|
|
6
|
+
|
|
7
|
+
function applyDecs2203RFactory() {
|
|
8
|
+
function createAddInitializerMethod(initializers, decoratorFinishedRef) {
|
|
9
|
+
return function addInitializer(initializer) {
|
|
10
|
+
assertNotFinished(decoratorFinishedRef, "addInitializer");
|
|
11
|
+
assertCallable(initializer, "An initializer");
|
|
12
|
+
initializers.push(initializer);
|
|
13
|
+
};
|
|
14
|
+
}
|
|
15
|
+
function memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value) {
|
|
16
|
+
var kindStr;
|
|
17
|
+
switch(kind){
|
|
18
|
+
case 1:
|
|
19
|
+
kindStr = "accessor";
|
|
20
|
+
break;
|
|
21
|
+
case 2:
|
|
22
|
+
kindStr = "method";
|
|
23
|
+
break;
|
|
24
|
+
case 3:
|
|
25
|
+
kindStr = "getter";
|
|
26
|
+
break;
|
|
27
|
+
case 4:
|
|
28
|
+
kindStr = "setter";
|
|
29
|
+
break;
|
|
30
|
+
default:
|
|
31
|
+
kindStr = "field";
|
|
32
|
+
}
|
|
33
|
+
var ctx = {
|
|
34
|
+
kind: kindStr,
|
|
35
|
+
name: isPrivate ? "#" + name : name,
|
|
36
|
+
static: isStatic,
|
|
37
|
+
private: isPrivate,
|
|
38
|
+
metadata: metadata
|
|
39
|
+
};
|
|
40
|
+
var decoratorFinishedRef = {
|
|
41
|
+
v: false
|
|
42
|
+
};
|
|
43
|
+
ctx.addInitializer = createAddInitializerMethod(initializers, decoratorFinishedRef);
|
|
44
|
+
var get, set;
|
|
45
|
+
if (kind === 0) {
|
|
46
|
+
if (isPrivate) {
|
|
47
|
+
get = desc.get;
|
|
48
|
+
set = desc.set;
|
|
49
|
+
} else {
|
|
50
|
+
get = function() {
|
|
51
|
+
return this[name];
|
|
52
|
+
};
|
|
53
|
+
set = function(v) {
|
|
54
|
+
this[name] = v;
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
|
+
} else if (kind === 2) {
|
|
58
|
+
get = function() {
|
|
59
|
+
return desc.value;
|
|
60
|
+
};
|
|
61
|
+
} else {
|
|
62
|
+
if (kind === 1 || kind === 3) {
|
|
63
|
+
get = function() {
|
|
64
|
+
return desc.get.call(this);
|
|
65
|
+
};
|
|
66
|
+
}
|
|
67
|
+
if (kind === 1 || kind === 4) {
|
|
68
|
+
set = function(v) {
|
|
69
|
+
desc.set.call(this, v);
|
|
70
|
+
};
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
ctx.access = get && set ? {
|
|
74
|
+
get: get,
|
|
75
|
+
set: set
|
|
76
|
+
} : get ? {
|
|
77
|
+
get: get
|
|
78
|
+
} : {
|
|
79
|
+
set: set
|
|
80
|
+
};
|
|
81
|
+
try {
|
|
82
|
+
return dec(value, ctx);
|
|
83
|
+
} finally{
|
|
84
|
+
decoratorFinishedRef.v = true;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
function assertNotFinished(decoratorFinishedRef, fnName) {
|
|
88
|
+
if (decoratorFinishedRef.v) {
|
|
89
|
+
throw new Error("attempted to call " + fnName + " after decoration was finished");
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
function assertCallable(fn, hint) {
|
|
93
|
+
if (typeof fn !== "function") {
|
|
94
|
+
throw new TypeError(hint + " must be a function");
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
function assertValidReturnValue(kind, value) {
|
|
98
|
+
var type = typeof value;
|
|
99
|
+
if (kind === 1) {
|
|
100
|
+
if (type !== "object" || value === null) {
|
|
101
|
+
throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
|
|
102
|
+
}
|
|
103
|
+
if (value.get !== undefined) {
|
|
104
|
+
assertCallable(value.get, "accessor.get");
|
|
105
|
+
}
|
|
106
|
+
if (value.set !== undefined) {
|
|
107
|
+
assertCallable(value.set, "accessor.set");
|
|
108
|
+
}
|
|
109
|
+
if (value.init !== undefined) {
|
|
110
|
+
assertCallable(value.init, "accessor.init");
|
|
111
|
+
}
|
|
112
|
+
} else if (type !== "function") {
|
|
113
|
+
var hint;
|
|
114
|
+
if (kind === 0) {
|
|
115
|
+
hint = "field";
|
|
116
|
+
} else if (kind === 10) {
|
|
117
|
+
hint = "class";
|
|
118
|
+
} else {
|
|
119
|
+
hint = "method";
|
|
120
|
+
}
|
|
121
|
+
throw new TypeError(hint + " decorators must return a function or void 0");
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
function applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata) {
|
|
125
|
+
var decs = decInfo[0];
|
|
126
|
+
var desc, init, value;
|
|
127
|
+
if (isPrivate) {
|
|
128
|
+
if (kind === 0 || kind === 1) {
|
|
129
|
+
desc = {
|
|
130
|
+
get: decInfo[3],
|
|
131
|
+
set: decInfo[4]
|
|
132
|
+
};
|
|
133
|
+
} else if (kind === 3) {
|
|
134
|
+
desc = {
|
|
135
|
+
get: decInfo[3]
|
|
136
|
+
};
|
|
137
|
+
} else if (kind === 4) {
|
|
138
|
+
desc = {
|
|
139
|
+
set: decInfo[3]
|
|
140
|
+
};
|
|
141
|
+
} else {
|
|
142
|
+
desc = {
|
|
143
|
+
value: decInfo[3]
|
|
144
|
+
};
|
|
145
|
+
}
|
|
146
|
+
} else if (kind !== 0) {
|
|
147
|
+
desc = Object.getOwnPropertyDescriptor(base, name);
|
|
148
|
+
}
|
|
149
|
+
if (kind === 1) {
|
|
150
|
+
value = {
|
|
151
|
+
get: desc.get,
|
|
152
|
+
set: desc.set
|
|
153
|
+
};
|
|
154
|
+
} else if (kind === 2) {
|
|
155
|
+
value = desc.value;
|
|
156
|
+
} else if (kind === 3) {
|
|
157
|
+
value = desc.get;
|
|
158
|
+
} else if (kind === 4) {
|
|
159
|
+
value = desc.set;
|
|
160
|
+
}
|
|
161
|
+
var newValue, get, set;
|
|
162
|
+
if (typeof decs === "function") {
|
|
163
|
+
newValue = memberDec(decs, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
|
|
164
|
+
if (newValue !== void 0) {
|
|
165
|
+
assertValidReturnValue(kind, newValue);
|
|
166
|
+
if (kind === 0) {
|
|
167
|
+
init = newValue;
|
|
168
|
+
} else if (kind === 1) {
|
|
169
|
+
init = newValue.init;
|
|
170
|
+
get = newValue.get || value.get;
|
|
171
|
+
set = newValue.set || value.set;
|
|
172
|
+
value = {
|
|
173
|
+
get: get,
|
|
174
|
+
set: set
|
|
175
|
+
};
|
|
176
|
+
} else {
|
|
177
|
+
value = newValue;
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
} else {
|
|
181
|
+
for(var i = decs.length - 1; i >= 0; i--){
|
|
182
|
+
var dec = decs[i];
|
|
183
|
+
newValue = memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
|
|
184
|
+
if (newValue !== void 0) {
|
|
185
|
+
assertValidReturnValue(kind, newValue);
|
|
186
|
+
var newInit;
|
|
187
|
+
if (kind === 0) {
|
|
188
|
+
newInit = newValue;
|
|
189
|
+
} else if (kind === 1) {
|
|
190
|
+
newInit = newValue.init;
|
|
191
|
+
get = newValue.get || value.get;
|
|
192
|
+
set = newValue.set || value.set;
|
|
193
|
+
value = {
|
|
194
|
+
get: get,
|
|
195
|
+
set: set
|
|
196
|
+
};
|
|
197
|
+
} else {
|
|
198
|
+
value = newValue;
|
|
199
|
+
}
|
|
200
|
+
if (newInit !== void 0) {
|
|
201
|
+
if (init === void 0) {
|
|
202
|
+
init = newInit;
|
|
203
|
+
} else if (typeof init === "function") {
|
|
204
|
+
init = [
|
|
205
|
+
init,
|
|
206
|
+
newInit
|
|
207
|
+
];
|
|
208
|
+
} else {
|
|
209
|
+
init.push(newInit);
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
if (kind === 0 || kind === 1) {
|
|
216
|
+
if (init === void 0) {
|
|
217
|
+
init = function(instance, init) {
|
|
218
|
+
return init;
|
|
219
|
+
};
|
|
220
|
+
} else if (typeof init !== "function") {
|
|
221
|
+
var ownInitializers = init;
|
|
222
|
+
init = function(instance, init) {
|
|
223
|
+
var value = init;
|
|
224
|
+
for(var i = 0; i < ownInitializers.length; i++){
|
|
225
|
+
value = ownInitializers[i].call(instance, value);
|
|
226
|
+
}
|
|
227
|
+
return value;
|
|
228
|
+
};
|
|
229
|
+
} else {
|
|
230
|
+
var originalInitializer = init;
|
|
231
|
+
init = function(instance, init) {
|
|
232
|
+
return originalInitializer.call(instance, init);
|
|
233
|
+
};
|
|
234
|
+
}
|
|
235
|
+
ret.push(init);
|
|
236
|
+
}
|
|
237
|
+
if (kind !== 0) {
|
|
238
|
+
if (kind === 1) {
|
|
239
|
+
desc.get = value.get;
|
|
240
|
+
desc.set = value.set;
|
|
241
|
+
} else if (kind === 2) {
|
|
242
|
+
desc.value = value;
|
|
243
|
+
} else if (kind === 3) {
|
|
244
|
+
desc.get = value;
|
|
245
|
+
} else if (kind === 4) {
|
|
246
|
+
desc.set = value;
|
|
247
|
+
}
|
|
248
|
+
if (isPrivate) {
|
|
249
|
+
if (kind === 1) {
|
|
250
|
+
ret.push(function(instance, args) {
|
|
251
|
+
return value.get.call(instance, args);
|
|
252
|
+
});
|
|
253
|
+
ret.push(function(instance, args) {
|
|
254
|
+
return value.set.call(instance, args);
|
|
255
|
+
});
|
|
256
|
+
} else if (kind === 2) {
|
|
257
|
+
ret.push(value);
|
|
258
|
+
} else {
|
|
259
|
+
ret.push(function(instance, args) {
|
|
260
|
+
return value.call(instance, args);
|
|
261
|
+
});
|
|
262
|
+
}
|
|
263
|
+
} else {
|
|
264
|
+
Object.defineProperty(base, name, desc);
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
function applyMemberDecs(Class, decInfos, metadata) {
|
|
269
|
+
var ret = [];
|
|
270
|
+
var protoInitializers;
|
|
271
|
+
var staticInitializers;
|
|
272
|
+
var existingProtoNonFields = new Map();
|
|
273
|
+
var existingStaticNonFields = new Map();
|
|
274
|
+
for(var i = 0; i < decInfos.length; i++){
|
|
275
|
+
var decInfo = decInfos[i];
|
|
276
|
+
if (!Array.isArray(decInfo)) continue;
|
|
277
|
+
var kind = decInfo[1];
|
|
278
|
+
var name = decInfo[2];
|
|
279
|
+
var isPrivate = decInfo.length > 3;
|
|
280
|
+
var isStatic = kind >= 5;
|
|
281
|
+
var base;
|
|
282
|
+
var initializers;
|
|
283
|
+
if (isStatic) {
|
|
284
|
+
base = Class;
|
|
285
|
+
kind = kind - 5;
|
|
286
|
+
staticInitializers = staticInitializers || [];
|
|
287
|
+
initializers = staticInitializers;
|
|
288
|
+
} else {
|
|
289
|
+
base = Class.prototype;
|
|
290
|
+
protoInitializers = protoInitializers || [];
|
|
291
|
+
initializers = protoInitializers;
|
|
292
|
+
}
|
|
293
|
+
if (kind !== 0 && !isPrivate) {
|
|
294
|
+
var existingNonFields = isStatic ? existingStaticNonFields : existingProtoNonFields;
|
|
295
|
+
var existingKind = existingNonFields.get(name) || 0;
|
|
296
|
+
if (existingKind === true || existingKind === 3 && kind !== 4 || existingKind === 4 && kind !== 3) {
|
|
297
|
+
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);
|
|
298
|
+
} else if (!existingKind && kind > 2) {
|
|
299
|
+
existingNonFields.set(name, kind);
|
|
300
|
+
} else {
|
|
301
|
+
existingNonFields.set(name, true);
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata);
|
|
305
|
+
}
|
|
306
|
+
pushInitializers(ret, protoInitializers);
|
|
307
|
+
pushInitializers(ret, staticInitializers);
|
|
308
|
+
return ret;
|
|
309
|
+
}
|
|
310
|
+
function pushInitializers(ret, initializers) {
|
|
311
|
+
if (initializers) {
|
|
312
|
+
ret.push(function(instance) {
|
|
313
|
+
for(var i = 0; i < initializers.length; i++){
|
|
314
|
+
initializers[i].call(instance);
|
|
315
|
+
}
|
|
316
|
+
return instance;
|
|
317
|
+
});
|
|
318
|
+
}
|
|
319
|
+
}
|
|
320
|
+
function applyClassDecs(targetClass, classDecs, metadata) {
|
|
321
|
+
if (classDecs.length > 0) {
|
|
322
|
+
var initializers = [];
|
|
323
|
+
var newClass = targetClass;
|
|
324
|
+
var name = targetClass.name;
|
|
325
|
+
for(var i = classDecs.length - 1; i >= 0; i--){
|
|
326
|
+
var decoratorFinishedRef = {
|
|
327
|
+
v: false
|
|
328
|
+
};
|
|
329
|
+
try {
|
|
330
|
+
var nextNewClass = classDecs[i](newClass, {
|
|
331
|
+
kind: "class",
|
|
332
|
+
name: name,
|
|
333
|
+
addInitializer: createAddInitializerMethod(initializers, decoratorFinishedRef),
|
|
334
|
+
metadata
|
|
335
|
+
});
|
|
336
|
+
} finally{
|
|
337
|
+
decoratorFinishedRef.v = true;
|
|
338
|
+
}
|
|
339
|
+
if (nextNewClass !== undefined) {
|
|
340
|
+
assertValidReturnValue(10, nextNewClass);
|
|
341
|
+
newClass = nextNewClass;
|
|
342
|
+
}
|
|
343
|
+
}
|
|
344
|
+
return [
|
|
345
|
+
defineMetadata(newClass, metadata),
|
|
346
|
+
function() {
|
|
347
|
+
for(var i = 0; i < initializers.length; i++){
|
|
348
|
+
initializers[i].call(newClass);
|
|
349
|
+
}
|
|
350
|
+
}
|
|
351
|
+
];
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
function defineMetadata(Class, metadata) {
|
|
355
|
+
return Object.defineProperty(Class, Symbol.metadata || Symbol.for("Symbol.metadata"), {
|
|
356
|
+
configurable: true,
|
|
357
|
+
enumerable: true,
|
|
358
|
+
value: metadata
|
|
359
|
+
});
|
|
360
|
+
}
|
|
361
|
+
return function applyDecs2203R(targetClass, memberDecs, classDecs, parentClass) {
|
|
362
|
+
if (parentClass !== void 0) {
|
|
363
|
+
var parentMetadata = parentClass[Symbol.metadata || Symbol.for("Symbol.metadata")];
|
|
364
|
+
}
|
|
365
|
+
var metadata = Object.create(parentMetadata === void 0 ? null : parentMetadata);
|
|
366
|
+
var e = applyMemberDecs(targetClass, memberDecs, metadata);
|
|
367
|
+
if (!classDecs.length) defineMetadata(targetClass, metadata);
|
|
368
|
+
return {
|
|
369
|
+
e: e,
|
|
370
|
+
get c () {
|
|
371
|
+
return applyClassDecs(targetClass, classDecs, metadata);
|
|
372
|
+
}
|
|
373
|
+
};
|
|
374
|
+
};
|
|
375
|
+
}
|
|
376
|
+
function _apply_decs_2203_r(targetClass, memberDecs, classDecs, parentClass) {
|
|
377
|
+
return (_apply_decs_2203_r = applyDecs2203RFactory())(targetClass, memberDecs, classDecs, parentClass);
|
|
378
|
+
}
|
|
379
|
+
function _identity(x) {
|
|
380
|
+
return x;
|
|
381
|
+
}
|
|
382
|
+
var _dec, _initClass, _ViElement, _dec1, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _dec8, _dec9, _dec10, /** Colour semantic */ _init_variant, /** Size */ _init_size, /** 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, _init__hasDefaultSlot, _initProto;
|
|
383
|
+
let _ViBadge;
|
|
384
|
+
_dec = customElement('vi-badge'), _dec1 = property({
|
|
385
|
+
type: String,
|
|
386
|
+
reflect: true
|
|
387
|
+
}), _dec2 = property({
|
|
388
|
+
type: String,
|
|
389
|
+
reflect: true
|
|
390
|
+
}), _dec3 = property({
|
|
391
|
+
type: Boolean,
|
|
392
|
+
reflect: true
|
|
393
|
+
}), _dec4 = property({
|
|
394
|
+
type: Boolean,
|
|
395
|
+
reflect: true
|
|
396
|
+
}), _dec5 = property({
|
|
397
|
+
type: Number,
|
|
398
|
+
reflect: true
|
|
399
|
+
}), _dec6 = property({
|
|
400
|
+
type: Boolean,
|
|
401
|
+
reflect: true,
|
|
402
|
+
attribute: 'show-zero'
|
|
403
|
+
}), _dec7 = property({
|
|
404
|
+
type: Number
|
|
405
|
+
}), _dec8 = property({
|
|
406
|
+
type: Boolean,
|
|
407
|
+
reflect: true
|
|
408
|
+
}), _dec9 = state(), _dec10 = state();
|
|
409
|
+
new class extends _identity {
|
|
410
|
+
constructor(){
|
|
411
|
+
super(_ViBadge), _initClass();
|
|
412
|
+
}
|
|
413
|
+
static{
|
|
414
|
+
class ViBadge extends (_ViElement = ViElement) {
|
|
415
|
+
static{
|
|
416
|
+
({ e: [_init_variant, _init_size, _init_dot, _init_pill, _init_count, _init_showZero, _init_max, _init_outline, _init__hasIcon, _init__hasDefaultSlot, _initProto], c: [_ViBadge, _initClass] } = _apply_decs_2203_r(this, [
|
|
417
|
+
[
|
|
418
|
+
_dec1,
|
|
419
|
+
1,
|
|
420
|
+
"variant"
|
|
421
|
+
],
|
|
422
|
+
[
|
|
423
|
+
_dec2,
|
|
424
|
+
1,
|
|
425
|
+
"size"
|
|
426
|
+
],
|
|
427
|
+
[
|
|
428
|
+
_dec3,
|
|
429
|
+
1,
|
|
430
|
+
"dot"
|
|
431
|
+
],
|
|
432
|
+
[
|
|
433
|
+
_dec4,
|
|
434
|
+
1,
|
|
435
|
+
"pill"
|
|
436
|
+
],
|
|
437
|
+
[
|
|
438
|
+
_dec5,
|
|
439
|
+
1,
|
|
440
|
+
"count"
|
|
441
|
+
],
|
|
442
|
+
[
|
|
443
|
+
_dec6,
|
|
444
|
+
1,
|
|
445
|
+
"showZero"
|
|
446
|
+
],
|
|
447
|
+
[
|
|
448
|
+
_dec7,
|
|
449
|
+
1,
|
|
450
|
+
"max"
|
|
451
|
+
],
|
|
452
|
+
[
|
|
453
|
+
_dec8,
|
|
454
|
+
1,
|
|
455
|
+
"outline"
|
|
456
|
+
],
|
|
457
|
+
[
|
|
458
|
+
_dec9,
|
|
459
|
+
1,
|
|
460
|
+
"_hasIcon"
|
|
461
|
+
],
|
|
462
|
+
[
|
|
463
|
+
_dec10,
|
|
464
|
+
1,
|
|
465
|
+
"_hasDefaultSlot"
|
|
466
|
+
]
|
|
467
|
+
], [
|
|
468
|
+
_dec
|
|
469
|
+
], _ViElement));
|
|
470
|
+
}
|
|
471
|
+
static styles = css`${unsafeCSS(badgeStyles)}`;
|
|
472
|
+
#___private_variant_1 = (_initProto(this), _init_variant(this, 'neutral'));
|
|
473
|
+
get variant() {
|
|
474
|
+
return this.#___private_variant_1;
|
|
475
|
+
}
|
|
476
|
+
set variant(_v) {
|
|
477
|
+
this.#___private_variant_1 = _v;
|
|
478
|
+
}
|
|
479
|
+
#___private_size_2 = _init_size(this, 'md');
|
|
480
|
+
get size() {
|
|
481
|
+
return this.#___private_size_2;
|
|
482
|
+
}
|
|
483
|
+
set size(_v) {
|
|
484
|
+
this.#___private_size_2 = _v;
|
|
485
|
+
}
|
|
486
|
+
#___private_dot_3 = _init_dot(this, false);
|
|
487
|
+
get dot() {
|
|
488
|
+
return this.#___private_dot_3;
|
|
489
|
+
}
|
|
490
|
+
set dot(_v) {
|
|
491
|
+
this.#___private_dot_3 = _v;
|
|
492
|
+
}
|
|
493
|
+
#___private_pill_4 = _init_pill(this, true);
|
|
494
|
+
get pill() {
|
|
495
|
+
return this.#___private_pill_4;
|
|
496
|
+
}
|
|
497
|
+
set pill(_v) {
|
|
498
|
+
this.#___private_pill_4 = _v;
|
|
499
|
+
}
|
|
500
|
+
#___private_count_5 = _init_count(this, undefined);
|
|
501
|
+
get count() {
|
|
502
|
+
return this.#___private_count_5;
|
|
503
|
+
}
|
|
504
|
+
set count(_v) {
|
|
505
|
+
this.#___private_count_5 = _v;
|
|
506
|
+
}
|
|
507
|
+
#___private_showZero_6 = _init_showZero(this, false);
|
|
508
|
+
get showZero() {
|
|
509
|
+
return this.#___private_showZero_6;
|
|
510
|
+
}
|
|
511
|
+
set showZero(_v) {
|
|
512
|
+
this.#___private_showZero_6 = _v;
|
|
513
|
+
}
|
|
514
|
+
#___private_max_7 = _init_max(this, 99);
|
|
515
|
+
get max() {
|
|
516
|
+
return this.#___private_max_7;
|
|
517
|
+
}
|
|
518
|
+
set max(_v) {
|
|
519
|
+
this.#___private_max_7 = _v;
|
|
520
|
+
}
|
|
521
|
+
#___private_outline_8 = _init_outline(this, false);
|
|
522
|
+
get outline() {
|
|
523
|
+
return this.#___private_outline_8;
|
|
524
|
+
}
|
|
525
|
+
set outline(_v) {
|
|
526
|
+
this.#___private_outline_8 = _v;
|
|
527
|
+
}
|
|
528
|
+
#___private__hasIcon_9 = _init__hasIcon(this, false);
|
|
529
|
+
get _hasIcon() {
|
|
530
|
+
return this.#___private__hasIcon_9;
|
|
531
|
+
}
|
|
532
|
+
set _hasIcon(_v) {
|
|
533
|
+
this.#___private__hasIcon_9 = _v;
|
|
534
|
+
}
|
|
535
|
+
#___private__hasDefaultSlot_10 = _init__hasDefaultSlot(this, false);
|
|
536
|
+
get _hasDefaultSlot() {
|
|
537
|
+
return this.#___private__hasDefaultSlot_10;
|
|
538
|
+
}
|
|
539
|
+
set _hasDefaultSlot(_v) {
|
|
540
|
+
this.#___private__hasDefaultSlot_10 = _v;
|
|
541
|
+
}
|
|
542
|
+
connectedCallback() {
|
|
543
|
+
super.connectedCallback();
|
|
544
|
+
this.updateAriaHidden();
|
|
545
|
+
}
|
|
546
|
+
updated(changedProperties) {
|
|
547
|
+
super.updated(changedProperties);
|
|
548
|
+
if (changedProperties.has('dot') || changedProperties.has('count') || changedProperties.has('showZero') || changedProperties.has('_hasDefaultSlot')) {
|
|
549
|
+
this.updateAriaHidden();
|
|
550
|
+
}
|
|
551
|
+
}
|
|
552
|
+
updateAriaHidden() {
|
|
553
|
+
const isPurelyDecorative = this.dot && !this._hasDefaultSlot && this.count === undefined && !this.hasAttribute('aria-label') && !this.hasAttribute('aria-labelledby');
|
|
554
|
+
if (isPurelyDecorative) {
|
|
555
|
+
this.setAttribute('aria-hidden', 'true');
|
|
556
|
+
} else {
|
|
557
|
+
this.removeAttribute('aria-hidden');
|
|
558
|
+
}
|
|
559
|
+
}
|
|
560
|
+
onIconSlotChange(e) {
|
|
561
|
+
const slot = e.target;
|
|
562
|
+
this._hasIcon = slot.assignedElements({
|
|
563
|
+
flatten: true
|
|
564
|
+
}).length > 0;
|
|
565
|
+
}
|
|
566
|
+
onDefaultSlotChange(e) {
|
|
567
|
+
const slot = e.target;
|
|
568
|
+
this._hasDefaultSlot = slot.assignedNodes({
|
|
569
|
+
flatten: true
|
|
570
|
+
}).some((node)=>{
|
|
571
|
+
// Check if it's text with actual content or an element
|
|
572
|
+
return node.nodeType === Node.TEXT_NODE && node.textContent?.trim().length || node.nodeType === Node.ELEMENT_NODE;
|
|
573
|
+
});
|
|
574
|
+
this.updateAriaHidden();
|
|
575
|
+
}
|
|
576
|
+
render() {
|
|
577
|
+
let countContent = '';
|
|
578
|
+
// If count is defined, render it, and we do not render the default slot content
|
|
579
|
+
const hideDefaultSlot = this.count !== undefined;
|
|
580
|
+
if (this.count !== undefined) {
|
|
581
|
+
countContent = html`${this.count > this.max ? `${this.max}+` : `${this.count}`}`;
|
|
582
|
+
}
|
|
583
|
+
const dotContent = this.dot ? html`<span part="dot" class="dot"></span>` : '';
|
|
584
|
+
return html`
|
|
585
|
+
<span class="badge ${this.dot && !this._hasDefaultSlot && this.count === undefined ? 'dot-only' : ''}" part="badge">
|
|
586
|
+
<slot
|
|
587
|
+
name="icon"
|
|
588
|
+
part="icon"
|
|
589
|
+
class="icon"
|
|
590
|
+
?hidden=${!this._hasIcon}
|
|
591
|
+
@slotchange=${this.onIconSlotChange}
|
|
592
|
+
></slot>
|
|
593
|
+
${dotContent}
|
|
594
|
+
${countContent}
|
|
595
|
+
<slot ?hidden=${hideDefaultSlot} @slotchange=${this.onDefaultSlotChange}></slot>
|
|
596
|
+
</span>
|
|
597
|
+
`;
|
|
598
|
+
}
|
|
599
|
+
}
|
|
600
|
+
}
|
|
601
|
+
}();
|
|
602
|
+
|
|
603
|
+
export { _ViBadge as ViBadge };
|
|
@@ -22,7 +22,7 @@ declare const ViCheckbox_base: typeof ViElement & (new (...args: any[]) => impor
|
|
|
22
22
|
*
|
|
23
23
|
* @slot - Label text/content.
|
|
24
24
|
*
|
|
25
|
-
* @fires {CustomEvent<{checked:boolean; value:string}>}
|
|
25
|
+
* @fires {CustomEvent<{checked:boolean; value:string}>} vi-checkbox-change - Fires when user toggles checked state.
|
|
26
26
|
*
|
|
27
27
|
* @csspart box - The visual checkbox square (custom-drawn box).
|
|
28
28
|
* @csspart check - The SVG checkmark/indeterminate dash container.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vi-checkbox.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/checkbox/vi-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAGb,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAIlD,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;;AAErD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBACa,UAAW,SAAQ,eAAwC;IACtE,OAAgB,MAAM,0BAEpB;IAEF,OAAO,CAAC,eAAe,CAAS;IAEhC,cAAuB,iBAAiB,IAAI,gBAAgB,GAAG,IAAI,CAElE;IAI4B,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAa;IAC5B,QAAQ,CAAC,QAAQ,UAAS;IAC1D,QAAQ,CAAC,eAAe,SAAM;IAI1C,qBAAqB;IACuB,QAAQ,CAAC,OAAO,UAAS;IAErE,qCAAqC;IACO,QAAQ,CAAC,aAAa,UAAS;IAE3E,0DAA0D;IACf,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAQ;IAE9E,0CAA0C;IAC9B,QAAQ,CAAC,KAAK,SAAQ;IAElC,uBAAuB;IACX,QAAQ,CAAC,IAAI,SAAM;IAE/B,6BAA6B;IACe,QAAQ,CAAC,QAAQ,UAAS;IAItE,SAAS,CAAC,aAAa,IAAI,OAAO,CAAC,kBAAkB,CAAC;IA0B7C,iBAAiB,IAAI,IAAI;IAKzB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;
|
|
1
|
+
{"version":3,"file":"vi-checkbox.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/checkbox/vi-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAGb,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAIlD,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;;AAErD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBACa,UAAW,SAAQ,eAAwC;IACtE,OAAgB,MAAM,0BAEpB;IAEF,OAAO,CAAC,eAAe,CAAS;IAEhC,cAAuB,iBAAiB,IAAI,gBAAgB,GAAG,IAAI,CAElE;IAI4B,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAa;IAC5B,QAAQ,CAAC,QAAQ,UAAS;IAC1D,QAAQ,CAAC,eAAe,SAAM;IAI1C,qBAAqB;IACuB,QAAQ,CAAC,OAAO,UAAS;IAErE,qCAAqC;IACO,QAAQ,CAAC,aAAa,UAAS;IAE3E,0DAA0D;IACf,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAQ;IAE9E,0CAA0C;IAC9B,QAAQ,CAAC,KAAK,SAAQ;IAElC,uBAAuB;IACX,QAAQ,CAAC,IAAI,SAAM;IAE/B,6BAA6B;IACe,QAAQ,CAAC,QAAQ,UAAS;IAItE,SAAS,CAAC,aAAa,IAAI,OAAO,CAAC,kBAAkB,CAAC;IA0B7C,iBAAiB,IAAI,IAAI;IAKzB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAc/C,yEAAyE;IACzE,iBAAiB,IAAI,IAAI;IAOzB,6EAA6E;IAC7E,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAM7C,OAAO,CAAC,SAAS;IAmBR,MAAM,IAAI,cAAc;CA0ClC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
|
package/checkbox/vi-checkbox.js
CHANGED
|
@@ -572,11 +572,6 @@ new class extends _identity {
|
|
|
572
572
|
if (changed.has('disabled')) {
|
|
573
573
|
this._setHostFocusable(!this.disabled);
|
|
574
574
|
}
|
|
575
|
-
// Sync inner input's tabindex with host's tabIndex (which is managed by FocusableMixin)
|
|
576
|
-
const input = this._focusableElement;
|
|
577
|
-
if (input && input.tabIndex !== this.tabIndex) {
|
|
578
|
-
input.tabIndex = this.tabIndex;
|
|
579
|
-
}
|
|
580
575
|
}
|
|
581
576
|
/** Resets value and validation state when the associated form resets. */ formResetCallback() {
|
|
582
577
|
this.checked = this._initialChecked;
|
|
@@ -594,7 +589,7 @@ new class extends _identity {
|
|
|
594
589
|
const input = e.target;
|
|
595
590
|
this.checked = input.checked;
|
|
596
591
|
this.indeterminate = input.indeterminate;
|
|
597
|
-
this.dispatchEvent(new CustomEvent('
|
|
592
|
+
this.dispatchEvent(new CustomEvent('vi-checkbox-change', {
|
|
598
593
|
detail: {
|
|
599
594
|
checked: this.checked,
|
|
600
595
|
value: this.value
|