@spscommerce/ds-web-components 8.7.4 → 8.7.5
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/dist/lib/index.cjs.js +48 -48
- package/dist/lib/index.es.js +699 -712
- package/dist/package.json +1 -1
- package/lib/index.cjs.js +48 -48
- package/lib/index.es.js +699 -712
- package/package.json +4 -4
- /package/{vite.config.js → vite.config.mjs} +0 -0
package/dist/lib/index.es.js
CHANGED
|
@@ -1,11 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import { noI18nI18n as Je, SpsIcon as be, SpsInsightCardKind as Ye, SpsInsightCardIcons as Me } from "@spscommerce/ds-shared";
|
|
2
|
+
import { parseFileSize as et, code as l } from "@spscommerce/utils";
|
|
3
|
+
const ds = {
|
|
4
|
+
/*
|
|
5
|
+
* 'Insight Cards': {
|
|
6
|
+
* components: [SpsInsightCardComponent, SpsInsightsComponent],
|
|
7
|
+
* examples: SpsInsightCardExamples,
|
|
8
|
+
* },
|
|
9
|
+
*
|
|
10
|
+
* "Tabbed Navigation": {
|
|
11
|
+
* components: [SpsNavTabComponent, SpsNavTabSetComponent],
|
|
12
|
+
* examples: SpsNavTabsExamples,
|
|
13
|
+
* },
|
|
14
|
+
*
|
|
15
|
+
* Photos: {
|
|
16
|
+
* components: [SpsPhotoComponent],
|
|
17
|
+
* examples: SpsPhotoExamples,
|
|
18
|
+
*},
|
|
19
|
+
*/
|
|
20
|
+
};
|
|
21
|
+
var d = {};
|
|
22
|
+
Object.defineProperty(d, "__esModule", { value: !0 });
|
|
9
23
|
/**
|
|
10
24
|
* @license
|
|
11
25
|
* Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
|
|
@@ -22,7 +36,7 @@ Object.defineProperty(h, "__esModule", { value: !0 });
|
|
|
22
36
|
* See the License for the specific language governing permissions and
|
|
23
37
|
* limitations under the License.
|
|
24
38
|
*/
|
|
25
|
-
var
|
|
39
|
+
var oe = {
|
|
26
40
|
default: "__default"
|
|
27
41
|
};
|
|
28
42
|
/**
|
|
@@ -41,17 +55,17 @@ var fe = {
|
|
|
41
55
|
* See the License for the specific language governing permissions and
|
|
42
56
|
* limitations under the License.
|
|
43
57
|
*/
|
|
44
|
-
var
|
|
45
|
-
function
|
|
58
|
+
var tt = Object.prototype.hasOwnProperty;
|
|
59
|
+
function Se() {
|
|
46
60
|
}
|
|
47
|
-
|
|
48
|
-
function
|
|
49
|
-
return
|
|
61
|
+
Se.prototype = /* @__PURE__ */ Object.create(null);
|
|
62
|
+
function st(e, t) {
|
|
63
|
+
return tt.call(e, t);
|
|
50
64
|
}
|
|
51
|
-
function
|
|
52
|
-
return new
|
|
65
|
+
function Oe() {
|
|
66
|
+
return new Se();
|
|
53
67
|
}
|
|
54
|
-
function
|
|
68
|
+
function le(e, t) {
|
|
55
69
|
for (; e.length > t; )
|
|
56
70
|
e.pop();
|
|
57
71
|
}
|
|
@@ -71,45 +85,45 @@ function ge(e, t) {
|
|
|
71
85
|
* See the License for the specific language governing permissions and
|
|
72
86
|
* limitations under the License.
|
|
73
87
|
*/
|
|
74
|
-
function
|
|
88
|
+
function nt(e) {
|
|
75
89
|
if (e.lastIndexOf("xml:", 0) === 0)
|
|
76
90
|
return "http://www.w3.org/XML/1998/namespace";
|
|
77
91
|
if (e.lastIndexOf("xlink:", 0) === 0)
|
|
78
92
|
return "http://www.w3.org/1999/xlink";
|
|
79
93
|
}
|
|
80
|
-
function
|
|
94
|
+
function Ae(e, t, s) {
|
|
81
95
|
if (s == null)
|
|
82
96
|
e.removeAttribute(t);
|
|
83
97
|
else {
|
|
84
|
-
var n =
|
|
98
|
+
var n = nt(t);
|
|
85
99
|
n ? e.setAttributeNS(n, t, String(s)) : e.setAttribute(t, String(s));
|
|
86
100
|
}
|
|
87
101
|
}
|
|
88
|
-
function
|
|
102
|
+
function De(e, t, s) {
|
|
89
103
|
e[t] = s;
|
|
90
104
|
}
|
|
91
|
-
function
|
|
105
|
+
function it(e, t, s) {
|
|
92
106
|
t.indexOf("-") >= 0 ? e.setProperty(t, s) : e[t] = s;
|
|
93
107
|
}
|
|
94
|
-
function
|
|
108
|
+
function rt(e, t, s) {
|
|
95
109
|
if (typeof s == "string")
|
|
96
110
|
e.style.cssText = s;
|
|
97
111
|
else {
|
|
98
112
|
e.style.cssText = "";
|
|
99
113
|
var n = e.style;
|
|
100
114
|
for (var i in s)
|
|
101
|
-
|
|
115
|
+
st(s, i) && it(n, i, s[i]);
|
|
102
116
|
}
|
|
103
117
|
}
|
|
104
|
-
function
|
|
118
|
+
function at(e, t, s) {
|
|
105
119
|
var n = typeof s;
|
|
106
|
-
n === "object" || n === "function" ?
|
|
120
|
+
n === "object" || n === "function" ? De(e, t, s) : Ae(e, t, s);
|
|
107
121
|
}
|
|
108
|
-
var W =
|
|
109
|
-
W[
|
|
110
|
-
W.style =
|
|
122
|
+
var W = Oe();
|
|
123
|
+
W[oe.default] = at;
|
|
124
|
+
W.style = rt;
|
|
111
125
|
function z(e, t, s) {
|
|
112
|
-
var n = W[t] || W[
|
|
126
|
+
var n = W[t] || W[oe.default];
|
|
113
127
|
n(e, t, s);
|
|
114
128
|
}
|
|
115
129
|
/**
|
|
@@ -128,12 +142,12 @@ function z(e, t, s) {
|
|
|
128
142
|
* See the License for the specific language governing permissions and
|
|
129
143
|
* limitations under the License.
|
|
130
144
|
*/
|
|
131
|
-
var
|
|
132
|
-
function
|
|
145
|
+
var V = !1, te = !1;
|
|
146
|
+
function Pe(e, t) {
|
|
133
147
|
if (!t)
|
|
134
148
|
throw new Error("Cannot call " + e + "() unless in patch.");
|
|
135
149
|
}
|
|
136
|
-
function
|
|
150
|
+
function ot(e, t) {
|
|
137
151
|
if (e !== t) {
|
|
138
152
|
for (var s = e, n = []; s && s !== t; )
|
|
139
153
|
n.push(s.nodeName.toLowerCase()), s = s.parentNode;
|
|
@@ -142,48 +156,48 @@ function mt(e, t) {
|
|
|
142
156
|
`));
|
|
143
157
|
}
|
|
144
158
|
}
|
|
145
|
-
function
|
|
159
|
+
function lt(e) {
|
|
146
160
|
e || console.warn("patchOuter requires the node have a parent if there is a key.");
|
|
147
161
|
}
|
|
148
162
|
function B(e) {
|
|
149
|
-
if (
|
|
163
|
+
if (V)
|
|
150
164
|
throw new Error(e + "() can not be called between elementOpenStart() and elementOpenEnd().");
|
|
151
165
|
}
|
|
152
|
-
function
|
|
153
|
-
if (
|
|
166
|
+
function Ee(e) {
|
|
167
|
+
if (te)
|
|
154
168
|
throw new Error(e + "() may not be called inside an element that has called skip().");
|
|
155
169
|
}
|
|
156
|
-
function
|
|
157
|
-
if (!
|
|
170
|
+
function ce(e) {
|
|
171
|
+
if (!V)
|
|
158
172
|
throw new Error(e + "() can only be called after calling elementOpenStart().");
|
|
159
173
|
}
|
|
160
|
-
function
|
|
161
|
-
if (
|
|
174
|
+
function ct() {
|
|
175
|
+
if (V)
|
|
162
176
|
throw new Error("elementOpenEnd() must be called after calling elementOpenStart().");
|
|
163
177
|
}
|
|
164
|
-
function
|
|
178
|
+
function pt(e, t) {
|
|
165
179
|
if (e !== t)
|
|
166
180
|
throw new Error('Received a call to close "' + t + '" but "' + e + '" was open.');
|
|
167
181
|
}
|
|
168
|
-
function
|
|
182
|
+
function dt(e, t) {
|
|
169
183
|
if (t !== null)
|
|
170
184
|
throw new Error(e + "() must come before any child declarations inside the current element.");
|
|
171
185
|
}
|
|
172
|
-
function
|
|
173
|
-
|
|
174
|
-
var i = e, r = t,
|
|
175
|
-
if (!
|
|
186
|
+
function ht(e, t, s, n) {
|
|
187
|
+
Z(e);
|
|
188
|
+
var i = e, r = t, o = r.nextSibling === s && r.previousSibling === n, p = r.nextSibling === i.nextSibling && r.previousSibling === n, b = r === i;
|
|
189
|
+
if (!o && !p && !b)
|
|
176
190
|
throw new Error("There must be exactly one top level call corresponding to the patched element.");
|
|
177
191
|
}
|
|
178
|
-
function
|
|
179
|
-
var t =
|
|
180
|
-
return
|
|
192
|
+
function K(e) {
|
|
193
|
+
var t = V;
|
|
194
|
+
return V = e, t;
|
|
181
195
|
}
|
|
182
|
-
function
|
|
183
|
-
var t =
|
|
184
|
-
return
|
|
196
|
+
function Q(e) {
|
|
197
|
+
var t = te;
|
|
198
|
+
return te = e, t;
|
|
185
199
|
}
|
|
186
|
-
function
|
|
200
|
+
function Z(e) {
|
|
187
201
|
if (process.env.NODE_ENV !== "production" && !e)
|
|
188
202
|
throw new Error("Expected value to be defined");
|
|
189
203
|
return e;
|
|
@@ -224,18 +238,21 @@ var U = {
|
|
|
224
238
|
* See the License for the specific language governing permissions and
|
|
225
239
|
* limitations under the License.
|
|
226
240
|
*/
|
|
227
|
-
var
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
241
|
+
var ut = (
|
|
242
|
+
/** @class */
|
|
243
|
+
function() {
|
|
244
|
+
function e() {
|
|
245
|
+
this.created = [], this.deleted = [];
|
|
246
|
+
}
|
|
247
|
+
return e.prototype.markCreated = function(t) {
|
|
248
|
+
this.created.push(t);
|
|
249
|
+
}, e.prototype.markDeleted = function(t) {
|
|
250
|
+
this.deleted.push(t);
|
|
251
|
+
}, e.prototype.notifyChanges = function() {
|
|
252
|
+
U.nodesCreated && this.created.length > 0 && U.nodesCreated(this.created), U.nodesDeleted && this.deleted.length > 0 && U.nodesDeleted(this.deleted);
|
|
253
|
+
}, e;
|
|
254
|
+
}()
|
|
255
|
+
);
|
|
239
256
|
/**
|
|
240
257
|
* @license
|
|
241
258
|
* Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
|
|
@@ -252,36 +269,39 @@ var Nt = function() {
|
|
|
252
269
|
* See the License for the specific language governing permissions and
|
|
253
270
|
* limitations under the License.
|
|
254
271
|
*/
|
|
255
|
-
function
|
|
272
|
+
function ft(e) {
|
|
256
273
|
return e.nodeType === 11 || e.nodeType === 9;
|
|
257
274
|
}
|
|
258
|
-
function
|
|
275
|
+
function ee(e) {
|
|
259
276
|
return e.nodeType === 1;
|
|
260
277
|
}
|
|
261
|
-
function
|
|
278
|
+
function gt(e) {
|
|
262
279
|
return e.nodeType === 3;
|
|
263
280
|
}
|
|
264
|
-
function
|
|
281
|
+
function mt(e, t) {
|
|
265
282
|
for (var s = [], n = e; n !== t; ) {
|
|
266
283
|
var i = n;
|
|
267
284
|
s.push(i), n = i.parentNode;
|
|
268
285
|
}
|
|
269
286
|
return s;
|
|
270
287
|
}
|
|
271
|
-
var
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
288
|
+
var vt = (
|
|
289
|
+
// tslint:disable-next-line:no-any b/79476176
|
|
290
|
+
Node.prototype.getRootNode || function() {
|
|
291
|
+
for (var e = this, t = e; e; )
|
|
292
|
+
t = e, e = e.parentNode;
|
|
293
|
+
return t;
|
|
294
|
+
}
|
|
295
|
+
);
|
|
296
|
+
function bt(e) {
|
|
297
|
+
var t = vt.call(e);
|
|
298
|
+
return ft(t) ? t.activeElement : null;
|
|
279
299
|
}
|
|
280
|
-
function
|
|
281
|
-
var s =
|
|
282
|
-
return !s || !e.contains(s) ? [] :
|
|
300
|
+
function Ct(e, t) {
|
|
301
|
+
var s = bt(e);
|
|
302
|
+
return !s || !e.contains(s) ? [] : mt(s, t);
|
|
283
303
|
}
|
|
284
|
-
function
|
|
304
|
+
function wt(e, t, s) {
|
|
285
305
|
for (var n = t.nextSibling, i = s; i !== null && i !== t; ) {
|
|
286
306
|
var r = i.nextSibling;
|
|
287
307
|
e.insertBefore(i, n), i = r;
|
|
@@ -303,52 +323,55 @@ function Pt(e, t, s) {
|
|
|
303
323
|
* See the License for the specific language governing permissions and
|
|
304
324
|
* limitations under the License.
|
|
305
325
|
*/
|
|
306
|
-
var
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
return
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
326
|
+
var _t = (
|
|
327
|
+
/** @class */
|
|
328
|
+
function() {
|
|
329
|
+
function e(t, s, n) {
|
|
330
|
+
this._attrsArr = null, this.staticsApplied = !1, this.nameOrCtor = t, this.key = s, this.text = n;
|
|
331
|
+
}
|
|
332
|
+
return e.prototype.hasEmptyAttrsArr = function() {
|
|
333
|
+
var t = this._attrsArr;
|
|
334
|
+
return !t || !t.length;
|
|
335
|
+
}, e.prototype.getAttrsArr = function(t) {
|
|
336
|
+
return this._attrsArr || (this._attrsArr = new Array(t));
|
|
337
|
+
}, e;
|
|
338
|
+
}()
|
|
339
|
+
);
|
|
340
|
+
function pe(e, t, s, n) {
|
|
341
|
+
var i = new _t(t, s, n);
|
|
319
342
|
return e.__incrementalDOMData = i, i;
|
|
320
343
|
}
|
|
321
344
|
function $(e, t) {
|
|
322
|
-
return
|
|
345
|
+
return ke(e, t);
|
|
323
346
|
}
|
|
324
|
-
function
|
|
325
|
-
return
|
|
347
|
+
function Nt(e) {
|
|
348
|
+
return !!e.__incrementalDOMData;
|
|
326
349
|
}
|
|
327
|
-
function
|
|
328
|
-
return
|
|
350
|
+
function xt(e) {
|
|
351
|
+
return Z(e.__incrementalDOMData), $(e).key;
|
|
329
352
|
}
|
|
330
|
-
function
|
|
353
|
+
function ke(e, t) {
|
|
331
354
|
if (e.__incrementalDOMData)
|
|
332
355
|
return e.__incrementalDOMData;
|
|
333
|
-
var s =
|
|
334
|
-
return
|
|
356
|
+
var s = ee(e) ? e.localName : e.nodeName, n = ee(e) ? e.getAttribute("key") || t : null, i = gt(e) ? e.data : void 0, r = pe(e, s, n, i);
|
|
357
|
+
return ee(e) && yt(e, r), r;
|
|
335
358
|
}
|
|
336
|
-
function
|
|
337
|
-
|
|
359
|
+
function Ie(e) {
|
|
360
|
+
ke(e);
|
|
338
361
|
for (var t = e.firstChild; t; t = t.nextSibling)
|
|
339
|
-
|
|
362
|
+
Ie(t);
|
|
340
363
|
}
|
|
341
|
-
function
|
|
364
|
+
function Le(e) {
|
|
342
365
|
e.__incrementalDOMData = null;
|
|
343
366
|
for (var t = e.firstChild; t; t = t.nextSibling)
|
|
344
|
-
|
|
367
|
+
Le(t);
|
|
345
368
|
}
|
|
346
|
-
function
|
|
369
|
+
function yt(e, t) {
|
|
347
370
|
var s = e.attributes, n = s.length;
|
|
348
|
-
if (
|
|
349
|
-
for (var i = t.getAttrsArr(n), r = 0,
|
|
350
|
-
var
|
|
351
|
-
i[
|
|
371
|
+
if (n)
|
|
372
|
+
for (var i = t.getAttrsArr(n), r = 0, o = 0; r < n; r += 1, o += 2) {
|
|
373
|
+
var p = s[r], b = p.name, f = p.value;
|
|
374
|
+
i[o] = b, i[o + 1] = f;
|
|
352
375
|
}
|
|
353
376
|
}
|
|
354
377
|
/**
|
|
@@ -367,22 +390,22 @@ function Lt(e, t) {
|
|
|
367
390
|
* See the License for the specific language governing permissions and
|
|
368
391
|
* limitations under the License.
|
|
369
392
|
*/
|
|
370
|
-
function
|
|
393
|
+
function St(e, t) {
|
|
371
394
|
return e === "svg" ? "http://www.w3.org/2000/svg" : e === "math" ? "http://www.w3.org/1998/Math/MathML" : t == null || $(t).nameOrCtor === "foreignObject" ? null : t.namespaceURI;
|
|
372
395
|
}
|
|
373
|
-
function
|
|
396
|
+
function Ot(e, t, s, n) {
|
|
374
397
|
var i;
|
|
375
398
|
if (typeof s == "function")
|
|
376
399
|
i = new s();
|
|
377
400
|
else {
|
|
378
|
-
var r =
|
|
401
|
+
var r = St(s, t);
|
|
379
402
|
r ? i = e.createElementNS(r, s) : i = e.createElement(s);
|
|
380
403
|
}
|
|
381
|
-
return
|
|
404
|
+
return pe(i, s, n), i;
|
|
382
405
|
}
|
|
383
|
-
function
|
|
406
|
+
function At(e) {
|
|
384
407
|
var t = e.createTextNode("");
|
|
385
|
-
return
|
|
408
|
+
return pe(t, "#text", null), t;
|
|
386
409
|
}
|
|
387
410
|
/**
|
|
388
411
|
* @license
|
|
@@ -400,88 +423,88 @@ function Bt(e) {
|
|
|
400
423
|
* See the License for the specific language governing permissions and
|
|
401
424
|
* limitations under the License.
|
|
402
425
|
*/
|
|
403
|
-
var
|
|
404
|
-
function
|
|
405
|
-
return
|
|
426
|
+
var L = null, h = null, v = null, k = null, G = [], X = [];
|
|
427
|
+
function J() {
|
|
428
|
+
return X;
|
|
406
429
|
}
|
|
407
|
-
function
|
|
430
|
+
function Fe(e) {
|
|
408
431
|
var t = function(s, n, i) {
|
|
409
|
-
var r =
|
|
410
|
-
|
|
432
|
+
var r = L, o = k, p = G, b = X, f = h, C = v, S = !1, q = !1;
|
|
433
|
+
L = new ut(), k = s.ownerDocument, X = [], v = s.parentNode, G = Ct(s, v), process.env.NODE_ENV !== "production" && (S = K(!1), q = Q(!1));
|
|
411
434
|
try {
|
|
412
|
-
var
|
|
413
|
-
return process.env.NODE_ENV !== "production" &&
|
|
435
|
+
var Ze = e(s, n, i);
|
|
436
|
+
return process.env.NODE_ENV !== "production" && ct(), Ze;
|
|
414
437
|
} finally {
|
|
415
|
-
k =
|
|
438
|
+
k = o, X = b, h = f, v = C, G = p, L.notifyChanges(), K(S), Q(q), L = r;
|
|
416
439
|
}
|
|
417
440
|
};
|
|
418
441
|
return t;
|
|
419
442
|
}
|
|
420
|
-
var
|
|
421
|
-
return
|
|
422
|
-
}),
|
|
443
|
+
var Re = Fe(function(e, t, s) {
|
|
444
|
+
return h = e, je(), t(s), Te(), process.env.NODE_ENV !== "production" && ot(h, e), e;
|
|
445
|
+
}), Dt = Fe(function(e, t, s) {
|
|
423
446
|
var n = { nextSibling: e }, i = null, r = null;
|
|
424
|
-
return process.env.NODE_ENV !== "production" && (i = e.nextSibling, r = e.previousSibling),
|
|
447
|
+
return process.env.NODE_ENV !== "production" && (i = e.nextSibling, r = e.previousSibling), h = n, t(s), process.env.NODE_ENV !== "production" && (lt(v), ht(n, h, i, r)), v && $e(v, Y(), e.nextSibling), n === h ? null : h;
|
|
425
448
|
});
|
|
426
|
-
function
|
|
449
|
+
function Ce(e, t, s) {
|
|
427
450
|
var n = $(e, s);
|
|
428
451
|
return t == n.nameOrCtor && s == n.key;
|
|
429
452
|
}
|
|
430
|
-
function
|
|
453
|
+
function Pt(e, t, s) {
|
|
431
454
|
if (!e)
|
|
432
455
|
return null;
|
|
433
|
-
if (
|
|
456
|
+
if (Ce(e, t, s))
|
|
434
457
|
return e;
|
|
435
458
|
if (s) {
|
|
436
459
|
for (; e = e.nextSibling; )
|
|
437
|
-
if (
|
|
460
|
+
if (Ce(e, t, s))
|
|
438
461
|
return e;
|
|
439
462
|
}
|
|
440
463
|
return null;
|
|
441
464
|
}
|
|
442
|
-
function
|
|
465
|
+
function Et(e, t) {
|
|
443
466
|
var s;
|
|
444
|
-
return e === "#text" ? s =
|
|
467
|
+
return e === "#text" ? s = At(k) : s = Ot(k, v, e, t), L.markCreated(s), s;
|
|
445
468
|
}
|
|
446
|
-
function
|
|
447
|
-
var s =
|
|
448
|
-
n !==
|
|
469
|
+
function Be(e, t) {
|
|
470
|
+
var s = Pt(h, e, t), n = s || Et(e, t);
|
|
471
|
+
n !== h && (G.indexOf(n) >= 0 ? wt(v, n, h) : v.insertBefore(n, h), h = n);
|
|
449
472
|
}
|
|
450
|
-
function
|
|
473
|
+
function $e(e, t, s) {
|
|
451
474
|
for (var n = e, i = t; i !== s; ) {
|
|
452
475
|
var r = i.nextSibling;
|
|
453
|
-
n.removeChild(i),
|
|
476
|
+
n.removeChild(i), L.markDeleted(i), i = r;
|
|
454
477
|
}
|
|
455
478
|
}
|
|
456
|
-
function
|
|
457
|
-
|
|
479
|
+
function je() {
|
|
480
|
+
v = h, h = null;
|
|
458
481
|
}
|
|
459
|
-
function
|
|
460
|
-
return
|
|
482
|
+
function Y() {
|
|
483
|
+
return h ? h.nextSibling : v.firstChild;
|
|
461
484
|
}
|
|
462
|
-
function
|
|
463
|
-
|
|
485
|
+
function de() {
|
|
486
|
+
h = Y();
|
|
464
487
|
}
|
|
465
|
-
function
|
|
466
|
-
|
|
488
|
+
function Te() {
|
|
489
|
+
$e(v, Y(), null), h = v, v = v.parentNode;
|
|
467
490
|
}
|
|
468
|
-
function
|
|
469
|
-
return
|
|
491
|
+
function Ue(e, t) {
|
|
492
|
+
return de(), Be(e, t), je(), v;
|
|
470
493
|
}
|
|
471
|
-
function
|
|
472
|
-
return process.env.NODE_ENV !== "production" &&
|
|
494
|
+
function ze() {
|
|
495
|
+
return process.env.NODE_ENV !== "production" && Q(!1), Te(), h;
|
|
473
496
|
}
|
|
474
|
-
function
|
|
475
|
-
return
|
|
497
|
+
function kt() {
|
|
498
|
+
return de(), Be("#text", null), h;
|
|
476
499
|
}
|
|
477
|
-
function
|
|
478
|
-
return process.env.NODE_ENV !== "production" && (
|
|
500
|
+
function It() {
|
|
501
|
+
return process.env.NODE_ENV !== "production" && (Pe("currentElement", k), B("currentElement")), v;
|
|
479
502
|
}
|
|
480
|
-
function
|
|
481
|
-
return process.env.NODE_ENV !== "production" && (
|
|
503
|
+
function Lt() {
|
|
504
|
+
return process.env.NODE_ENV !== "production" && (Pe("currentPointer", k), B("currentPointer")), Y();
|
|
482
505
|
}
|
|
483
|
-
function
|
|
484
|
-
process.env.NODE_ENV !== "production" && (
|
|
506
|
+
function Ft() {
|
|
507
|
+
process.env.NODE_ENV !== "production" && (dt("skip", h), Q(!0)), h = v.lastChild;
|
|
485
508
|
}
|
|
486
509
|
/**
|
|
487
510
|
* @license
|
|
@@ -499,8 +522,8 @@ function Ht() {
|
|
|
499
522
|
* See the License for the specific language governing permissions and
|
|
500
523
|
* limitations under the License.
|
|
501
524
|
*/
|
|
502
|
-
var
|
|
503
|
-
function
|
|
525
|
+
var we = 3, x = Oe();
|
|
526
|
+
function Rt(e, t, s) {
|
|
504
527
|
if (t.staticsApplied = !0, !(!s || !s.length)) {
|
|
505
528
|
if (t.hasEmptyAttrsArr()) {
|
|
506
529
|
for (var n = 0; n < s.length; n += 2)
|
|
@@ -510,76 +533,76 @@ function Vt(e, t, s) {
|
|
|
510
533
|
for (var n = 0; n < s.length; n += 2)
|
|
511
534
|
x[s[n]] = n + 1;
|
|
512
535
|
for (var i = t.getAttrsArr(0), r = 0, n = 0; n < i.length; n += 2) {
|
|
513
|
-
var
|
|
514
|
-
if (
|
|
515
|
-
s[
|
|
536
|
+
var o = i[n], p = i[n + 1], b = x[o];
|
|
537
|
+
if (b) {
|
|
538
|
+
s[b] === p && delete x[o];
|
|
516
539
|
continue;
|
|
517
540
|
}
|
|
518
|
-
i[r] =
|
|
541
|
+
i[r] = o, i[r + 1] = p, r += 2;
|
|
519
542
|
}
|
|
520
|
-
|
|
521
|
-
for (var
|
|
522
|
-
z(e,
|
|
543
|
+
le(i, r);
|
|
544
|
+
for (var o in x)
|
|
545
|
+
z(e, o, s[x[o]]), delete x[o];
|
|
523
546
|
}
|
|
524
547
|
}
|
|
525
|
-
function
|
|
526
|
-
process.env.NODE_ENV !== "production" && (B("elementOpen"),
|
|
527
|
-
var n =
|
|
528
|
-
i.staticsApplied ||
|
|
529
|
-
var r = Math.max(0, arguments.length -
|
|
530
|
-
if (!r &&
|
|
548
|
+
function he(e, t, s) {
|
|
549
|
+
process.env.NODE_ENV !== "production" && (B("elementOpen"), Ee("elementOpen"));
|
|
550
|
+
var n = Ue(e, t), i = $(n);
|
|
551
|
+
i.staticsApplied || Rt(n, i, s);
|
|
552
|
+
var r = Math.max(0, arguments.length - we), o = i.hasEmptyAttrsArr();
|
|
553
|
+
if (!r && o)
|
|
531
554
|
return n;
|
|
532
|
-
for (var
|
|
533
|
-
var
|
|
534
|
-
if (
|
|
535
|
-
|
|
536
|
-
else if (
|
|
555
|
+
for (var p = i.getAttrsArr(r), b = we, f = 0; b < arguments.length; b += 2, f += 2) {
|
|
556
|
+
var C = arguments[b];
|
|
557
|
+
if (o)
|
|
558
|
+
p[f] = C;
|
|
559
|
+
else if (p[f] !== C)
|
|
537
560
|
break;
|
|
538
|
-
var S = arguments[
|
|
539
|
-
(
|
|
561
|
+
var S = arguments[b + 1];
|
|
562
|
+
(o || p[f + 1] !== S) && (p[f + 1] = S, z(n, C, S));
|
|
540
563
|
}
|
|
541
|
-
if (
|
|
542
|
-
for (var
|
|
543
|
-
x[
|
|
544
|
-
for (
|
|
545
|
-
var
|
|
546
|
-
x[
|
|
564
|
+
if (b < arguments.length || f < p.length) {
|
|
565
|
+
for (var q = f; f < p.length; f += 2)
|
|
566
|
+
x[p[f]] = p[f + 1];
|
|
567
|
+
for (f = q; b < arguments.length; b += 2, f += 2) {
|
|
568
|
+
var C = arguments[b], S = arguments[b + 1];
|
|
569
|
+
x[C] !== S && z(n, C, S), p[f] = C, p[f + 1] = S, delete x[C];
|
|
547
570
|
}
|
|
548
|
-
|
|
549
|
-
for (var
|
|
550
|
-
z(n,
|
|
571
|
+
le(p, f);
|
|
572
|
+
for (var C in x)
|
|
573
|
+
z(n, C, void 0), delete x[C];
|
|
551
574
|
}
|
|
552
575
|
return n;
|
|
553
576
|
}
|
|
554
|
-
function
|
|
555
|
-
var n =
|
|
556
|
-
process.env.NODE_ENV !== "production" && (B("elementOpenStart"),
|
|
577
|
+
function Bt(e, t, s) {
|
|
578
|
+
var n = J();
|
|
579
|
+
process.env.NODE_ENV !== "production" && (B("elementOpenStart"), K(!0)), n[0] = e, n[1] = t, n[2] = s;
|
|
557
580
|
}
|
|
558
|
-
function
|
|
559
|
-
var t =
|
|
560
|
-
process.env.NODE_ENV !== "production" && (
|
|
581
|
+
function $t(e) {
|
|
582
|
+
var t = J();
|
|
583
|
+
process.env.NODE_ENV !== "production" && (ce("key"), Z(t)), t[1] = e;
|
|
561
584
|
}
|
|
562
|
-
function
|
|
563
|
-
var s =
|
|
564
|
-
process.env.NODE_ENV !== "production" &&
|
|
585
|
+
function jt(e, t) {
|
|
586
|
+
var s = J();
|
|
587
|
+
process.env.NODE_ENV !== "production" && ce("attr"), s.push(e), s.push(t);
|
|
565
588
|
}
|
|
566
|
-
function
|
|
567
|
-
var e =
|
|
568
|
-
process.env.NODE_ENV !== "production" && (
|
|
569
|
-
var t =
|
|
570
|
-
return
|
|
589
|
+
function Tt() {
|
|
590
|
+
var e = J();
|
|
591
|
+
process.env.NODE_ENV !== "production" && (ce("elementOpenEnd"), K(!1)), Z(e);
|
|
592
|
+
var t = he.apply(null, e);
|
|
593
|
+
return le(e, 0), t;
|
|
571
594
|
}
|
|
572
|
-
function
|
|
595
|
+
function We(e) {
|
|
573
596
|
process.env.NODE_ENV !== "production" && B("elementClose");
|
|
574
|
-
var t =
|
|
575
|
-
return process.env.NODE_ENV !== "production" &&
|
|
597
|
+
var t = ze();
|
|
598
|
+
return process.env.NODE_ENV !== "production" && pt($(t).nameOrCtor, e), t;
|
|
576
599
|
}
|
|
577
|
-
function
|
|
578
|
-
return
|
|
600
|
+
function Ut(e, t, s) {
|
|
601
|
+
return he.apply(null, arguments), We(e);
|
|
579
602
|
}
|
|
580
|
-
function
|
|
581
|
-
process.env.NODE_ENV !== "production" && (B("text"),
|
|
582
|
-
var t =
|
|
603
|
+
function zt(e) {
|
|
604
|
+
process.env.NODE_ENV !== "production" && (B("text"), Ee("text"));
|
|
605
|
+
var t = kt(), s = $(t);
|
|
583
606
|
if (s.text !== e) {
|
|
584
607
|
s.text = e;
|
|
585
608
|
for (var n = e, i = 1; i < arguments.length; i += 1) {
|
|
@@ -606,121 +629,119 @@ function Zt(e) {
|
|
|
606
629
|
* See the License for the specific language governing permissions and
|
|
607
630
|
* limitations under the License.
|
|
608
631
|
*/
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
var
|
|
614
|
-
|
|
615
|
-
var
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
var
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
var
|
|
627
|
-
|
|
628
|
-
var
|
|
629
|
-
|
|
630
|
-
var
|
|
631
|
-
|
|
632
|
-
function
|
|
633
|
-
let t =
|
|
634
|
-
return t instanceof Comment && t.data !== e ? t.data = e : (t = document.createComment(e),
|
|
635
|
-
}
|
|
636
|
-
let
|
|
637
|
-
function
|
|
638
|
-
|
|
639
|
-
}
|
|
640
|
-
function
|
|
641
|
-
return
|
|
642
|
-
}
|
|
643
|
-
const
|
|
632
|
+
d.applyAttr = Ae;
|
|
633
|
+
d.applyProp = De;
|
|
634
|
+
d.attributes = W;
|
|
635
|
+
d.close = ze;
|
|
636
|
+
var ue = d.currentElement = It, se = d.currentPointer = Lt;
|
|
637
|
+
d.open = Ue;
|
|
638
|
+
var Wt = d.patch = Re;
|
|
639
|
+
d.patchInner = Re;
|
|
640
|
+
d.patchOuter = Dt;
|
|
641
|
+
d.skip = Ft;
|
|
642
|
+
var ne = d.skipNode = de;
|
|
643
|
+
d.getKey = xt;
|
|
644
|
+
d.clearCache = Le;
|
|
645
|
+
d.importNode = Ie;
|
|
646
|
+
d.isDataInitialized = Nt;
|
|
647
|
+
d.notifications = U;
|
|
648
|
+
d.symbols = oe;
|
|
649
|
+
var _e = d.attr = jt, Vt = d.elementClose = We;
|
|
650
|
+
d.elementOpen = he;
|
|
651
|
+
var Ht = d.elementOpenEnd = Tt, qt = d.elementOpenStart = Bt;
|
|
652
|
+
d.elementVoid = Ut;
|
|
653
|
+
var Gt = d.text = zt;
|
|
654
|
+
d.key = $t;
|
|
655
|
+
function Ne(e) {
|
|
656
|
+
let t = se();
|
|
657
|
+
return t instanceof Comment && t.data !== e ? t.data = e : (t = document.createComment(e), ue().appendChild(t)), ne(), t;
|
|
658
|
+
}
|
|
659
|
+
let Ve = Je;
|
|
660
|
+
function hs(e) {
|
|
661
|
+
Ve = e;
|
|
662
|
+
}
|
|
663
|
+
function Xt() {
|
|
664
|
+
return Ve;
|
|
665
|
+
}
|
|
666
|
+
const E = Symbol("ComponentMetadata"), _ = Object.freeze({
|
|
644
667
|
has(e, t) {
|
|
645
|
-
return
|
|
646
|
-
e[I] && Object.prototype.hasOwnProperty.call(e[I], t)
|
|
647
|
-
);
|
|
668
|
+
return !!(e[E] && Object.prototype.hasOwnProperty.call(e[E], t));
|
|
648
669
|
},
|
|
649
670
|
add(e, t) {
|
|
650
|
-
e[
|
|
671
|
+
e[E] ? Object.assign(e[E], t) : e[E] = t;
|
|
651
672
|
},
|
|
652
673
|
get(e, t, s) {
|
|
653
|
-
return e[
|
|
674
|
+
return e[E] && e[E][t] || s;
|
|
654
675
|
}
|
|
655
|
-
}),
|
|
656
|
-
function
|
|
676
|
+
}), xe = Symbol("ds-web-components:pragma:listeners-attached"), He = "idom-pragma:content-begin", ie = "idom-pragma:content-end";
|
|
677
|
+
function re(e) {
|
|
657
678
|
for (const t of e)
|
|
658
679
|
if (typeof t == "function")
|
|
659
680
|
t();
|
|
660
681
|
else if (typeof t == "string")
|
|
661
|
-
|
|
682
|
+
Gt(t);
|
|
662
683
|
else if (t instanceof Set)
|
|
663
|
-
|
|
684
|
+
re(Array.from(t));
|
|
664
685
|
else if (Array.isArray(t) && t.length > 0) {
|
|
665
|
-
let s =
|
|
666
|
-
if (
|
|
667
|
-
const n =
|
|
686
|
+
let s = se();
|
|
687
|
+
if (Ne(He), s === null) {
|
|
688
|
+
const n = ue();
|
|
668
689
|
for (let i = 0; i < t.length; i += 1)
|
|
669
|
-
n.contains(t[i]) || n.appendChild(t[i]),
|
|
690
|
+
n.contains(t[i]) || n.appendChild(t[i]), ne();
|
|
670
691
|
}
|
|
671
|
-
for (; s && s.data !==
|
|
672
|
-
|
|
673
|
-
|
|
692
|
+
for (; s && s.data !== ie; )
|
|
693
|
+
ne(), s = se();
|
|
694
|
+
Ne(ie);
|
|
674
695
|
}
|
|
675
696
|
}
|
|
676
|
-
function
|
|
697
|
+
function a(e, t, ...s) {
|
|
677
698
|
if (t) {
|
|
678
699
|
for (const n of Object.keys(t))
|
|
679
700
|
if (n.toUpperCase() === "DATA-FRAGMENT")
|
|
680
|
-
return () =>
|
|
701
|
+
return () => re(s);
|
|
681
702
|
}
|
|
682
703
|
return () => {
|
|
683
|
-
|
|
704
|
+
qt(e);
|
|
684
705
|
const n = [];
|
|
685
706
|
if (t)
|
|
686
707
|
for (const r of Object.keys(t))
|
|
687
|
-
r.toUpperCase() === "CLASSNAME" ?
|
|
688
|
-
|
|
689
|
-
const i =
|
|
690
|
-
if (!i[
|
|
708
|
+
r.toUpperCase() === "CLASSNAME" ? _e("class", t[r]) : /^on[A-Z]/.test(r) ? n.push(r) : _e(r, t[r]);
|
|
709
|
+
Ht(e);
|
|
710
|
+
const i = ue();
|
|
711
|
+
if (!i[xe]) {
|
|
691
712
|
for (const r of n)
|
|
692
713
|
i.addEventListener(r.substr(2).toLowerCase(), t[r]);
|
|
693
|
-
i[
|
|
714
|
+
i[xe] = !0;
|
|
694
715
|
}
|
|
695
|
-
|
|
716
|
+
re(s), Vt(e);
|
|
696
717
|
};
|
|
697
718
|
}
|
|
698
|
-
function
|
|
719
|
+
function qe(e, t) {
|
|
699
720
|
customElements.get(e) || customElements.define(e, t);
|
|
700
721
|
}
|
|
701
|
-
function
|
|
722
|
+
function us(...e) {
|
|
702
723
|
for (const t of e)
|
|
703
|
-
|
|
724
|
+
qe(_.get(t, "tag"), t);
|
|
704
725
|
}
|
|
705
|
-
function
|
|
726
|
+
function fs(e) {
|
|
706
727
|
return function(...s) {
|
|
707
728
|
for (const n of s) {
|
|
708
|
-
const i = `${e}${
|
|
709
|
-
|
|
729
|
+
const i = `${e}${_.get(n, "tag").substr(3)}`;
|
|
730
|
+
qe(i, n);
|
|
710
731
|
}
|
|
711
732
|
};
|
|
712
733
|
}
|
|
713
|
-
const
|
|
734
|
+
const ye = Symbol("Component Attribute Bindings"), j = Symbol("Component Class Bindings"), ae = Symbol("Component Style Bindings"), Kt = {
|
|
714
735
|
__initialized: !1,
|
|
715
736
|
__observer: null,
|
|
716
737
|
__queuedUpdate: null,
|
|
717
738
|
__managedClasses: /* @__PURE__ */ new Set(),
|
|
718
739
|
__updateHostBindings() {
|
|
719
740
|
const e = this;
|
|
720
|
-
for (const t of Object.keys(e[
|
|
721
|
-
e.setAttribute(t, e[
|
|
722
|
-
for (const t of Object.keys(e[
|
|
723
|
-
e.style[t] = e[
|
|
741
|
+
for (const t of Object.keys(e[ye] || {}))
|
|
742
|
+
e.setAttribute(t, e[ye][t]);
|
|
743
|
+
for (const t of Object.keys(e[ae] || {}))
|
|
744
|
+
e.style[t] = e[ae][t];
|
|
724
745
|
for (const t of e.__managedClasses)
|
|
725
746
|
e.classList.remove(t);
|
|
726
747
|
for (const t of (e[j] || []).filter(Boolean))
|
|
@@ -730,7 +751,7 @@ const Ie = Symbol("Component Attribute Bindings"), j = Symbol("Component Class B
|
|
|
730
751
|
},
|
|
731
752
|
__updateChildQueries(e) {
|
|
732
753
|
const t = this;
|
|
733
|
-
for (const s of
|
|
754
|
+
for (const s of _.get(t.constructor, "childQueries", []))
|
|
734
755
|
if (!e || e && s.refresh) {
|
|
735
756
|
const n = s.all ? t.querySelectorAll : t.querySelector;
|
|
736
757
|
t[s.key] = n.call(t, s.selector);
|
|
@@ -741,14 +762,14 @@ const Ie = Symbol("Component Attribute Bindings"), j = Symbol("Component Class B
|
|
|
741
762
|
let t = Array.from(e.childNodes), s = null, n = t.length;
|
|
742
763
|
for (let i = 0; i < t.length; i += 1) {
|
|
743
764
|
const r = t[i];
|
|
744
|
-
r instanceof Comment && (r.data ===
|
|
765
|
+
r instanceof Comment && (r.data === He ? s = i + 1 : r.data === ie && (n = i - 1));
|
|
745
766
|
}
|
|
746
767
|
if (s === null)
|
|
747
768
|
for (const i of t)
|
|
748
769
|
i.parentNode.removeChild(i);
|
|
749
770
|
else
|
|
750
771
|
t = t.slice(s, n);
|
|
751
|
-
|
|
772
|
+
_.has(e.constructor, "contentProp") && (e[_.get(e.constructor, "contentProp")] = t);
|
|
752
773
|
},
|
|
753
774
|
__startMutObs() {
|
|
754
775
|
const e = this;
|
|
@@ -762,7 +783,7 @@ const Ie = Symbol("Component Attribute Bindings"), j = Symbol("Component Class B
|
|
|
762
783
|
},
|
|
763
784
|
__doRender() {
|
|
764
785
|
const e = this;
|
|
765
|
-
e.__stopMutObs(),
|
|
786
|
+
e.__stopMutObs(), Wt(e, e.render(Xt())), e.__startMutObs();
|
|
766
787
|
},
|
|
767
788
|
update() {
|
|
768
789
|
const e = this;
|
|
@@ -779,7 +800,7 @@ const Ie = Symbol("Component Attribute Bindings"), j = Symbol("Component Class B
|
|
|
779
800
|
connectedCallback() {
|
|
780
801
|
const e = this;
|
|
781
802
|
e.__cbConnected && e.__cbConnected();
|
|
782
|
-
const t =
|
|
803
|
+
const t = _.get(e.constructor, "eventListeners", []);
|
|
783
804
|
setTimeout(() => {
|
|
784
805
|
if (!e.__initialized) {
|
|
785
806
|
e.__gatherChildren();
|
|
@@ -797,26 +818,26 @@ const Ie = Symbol("Component Attribute Bindings"), j = Symbol("Component Class B
|
|
|
797
818
|
disconnectedCallback() {
|
|
798
819
|
const e = this;
|
|
799
820
|
e.__cbDisconnected && e.__cbDisconnected();
|
|
800
|
-
for (const [t, s] of
|
|
821
|
+
for (const [t, s] of _.get(e.constructor, "eventListeners", []))
|
|
801
822
|
e.removeEventListener(t, e[s]);
|
|
802
823
|
e.__stopMutObs();
|
|
803
824
|
}
|
|
804
825
|
};
|
|
805
826
|
function T(e) {
|
|
806
827
|
return (t) => {
|
|
807
|
-
|
|
828
|
+
_.add(t, e), Object.assign(t.prototype, {
|
|
808
829
|
__cbAttributeChanged: t.prototype.attributeChangedCallback,
|
|
809
830
|
__cbConnected: t.prototype.connectedCallback,
|
|
810
831
|
__cbDisconnected: t.prototype.disconnectedCallback
|
|
811
|
-
},
|
|
832
|
+
}, Kt);
|
|
812
833
|
};
|
|
813
834
|
}
|
|
814
|
-
function
|
|
835
|
+
function fe() {
|
|
815
836
|
return (e, t) => {
|
|
816
|
-
|
|
837
|
+
_.add(e.constructor, { contentProp: t });
|
|
817
838
|
};
|
|
818
839
|
}
|
|
819
|
-
function
|
|
840
|
+
function ge(e) {
|
|
820
841
|
return (t, s) => {
|
|
821
842
|
Object.defineProperty(t, s, {
|
|
822
843
|
get() {
|
|
@@ -833,13 +854,13 @@ function Ne(e) {
|
|
|
833
854
|
});
|
|
834
855
|
};
|
|
835
856
|
}
|
|
836
|
-
function
|
|
857
|
+
function M(e) {
|
|
837
858
|
return (t, s) => {
|
|
838
|
-
const n =
|
|
839
|
-
n.push([e, s]),
|
|
859
|
+
const n = _.get(t.constructor, "eventListeners", []);
|
|
860
|
+
n.push([e, s]), _.add(t.constructor, { eventListeners: n });
|
|
840
861
|
};
|
|
841
862
|
}
|
|
842
|
-
function
|
|
863
|
+
function c(e) {
|
|
843
864
|
return (t, s) => {
|
|
844
865
|
const n = t.constructor, i = s.toLowerCase();
|
|
845
866
|
if (n.observedAttributes = n.observedAttributes || [
|
|
@@ -859,32 +880,32 @@ function p(e) {
|
|
|
859
880
|
get() {
|
|
860
881
|
return this[r];
|
|
861
882
|
},
|
|
862
|
-
set(
|
|
863
|
-
let
|
|
864
|
-
e === Boolean && typeof
|
|
883
|
+
set(o) {
|
|
884
|
+
let p = o;
|
|
885
|
+
e === Boolean && typeof o == "string" && o.toLowerCase() === "false" ? p = !1 : p = e(o), this[r] = p;
|
|
865
886
|
}
|
|
866
887
|
});
|
|
867
888
|
}
|
|
868
889
|
};
|
|
869
890
|
}
|
|
870
|
-
function
|
|
891
|
+
function Ge(e, t, s) {
|
|
871
892
|
return (n, i) => {
|
|
872
|
-
const r =
|
|
893
|
+
const r = _.get(n.constructor, "childQueries", []);
|
|
873
894
|
r.push({
|
|
874
895
|
key: i,
|
|
875
896
|
selector: e,
|
|
876
897
|
all: s,
|
|
877
898
|
refresh: t.refresh
|
|
878
|
-
}),
|
|
899
|
+
}), _.add(n.constructor, { childQueries: r });
|
|
879
900
|
};
|
|
880
901
|
}
|
|
881
|
-
function
|
|
882
|
-
return
|
|
902
|
+
function me(e, t = {}) {
|
|
903
|
+
return Ge(e, t);
|
|
883
904
|
}
|
|
884
|
-
function
|
|
885
|
-
return
|
|
905
|
+
function Qt(e, t = {}) {
|
|
906
|
+
return Ge(e, t, !0);
|
|
886
907
|
}
|
|
887
|
-
function
|
|
908
|
+
function Xe() {
|
|
888
909
|
return (e, t) => {
|
|
889
910
|
const s = Symbol(t);
|
|
890
911
|
Object.defineProperties(e, {
|
|
@@ -905,85 +926,65 @@ function et() {
|
|
|
905
926
|
});
|
|
906
927
|
};
|
|
907
928
|
}
|
|
908
|
-
var
|
|
909
|
-
for (var i = n > 1 ? void 0 : n ?
|
|
910
|
-
(
|
|
911
|
-
return n && i &&
|
|
929
|
+
var Ke = /* @__PURE__ */ ((e) => (e["7Z"] = "application/x-7z-compressed", e.AAC = "audio/aac", e.ABW = "application/x-abiword", e.ARC = "application/octet-stream", e.AVI = "video/x-msvideo", e.AZW = "application/vnd.amazon.ebook", e.BIN = "application/octet-stream", e.BMP = "image/bmp", e.BZ = "application/x-bzip", e.BZ2 = "application/x-bzip2", e.CER = "application/pkix-cert", e.CSH = "application/x-csh", e.CSS = "text/css", e.CSV = "text/csv,application/vnd.ms-excel", e.DOC = "application/msword", e.DOCX = "application/vnd.openxmlformats-officedocument.wordprocessingml.document", e.EOT = "application/vnd.ms-fontobject", e.EPUB = "application/epub+zip", e.ES = "application/ecmascript", e.FLV = "video/x-flv", e.GIF = "image/gif", e.GZ = "application/x-gzip", e.HTM = "text/html", e.HTML = "text/html", e.ICO = "image/x-icon", e.ICS = "text/calendar", e.JAR = "application/java-archive", e.JPEG = "image/jpeg", e.JPG = "image/jpeg", e.JS = "application/javascript", e.JSON = "application/json", e.M3U = "audio/x-mpequrl", e.MID = "audio/midi", e.MIDI = "audio/midi", e.MOV = "video/quicktime", e.MP3 = "audio/mpeg3", e.MP4 = "video/mp4", e.MPEG = "video/mpeg", e.MPKG = "application/vnd.apple.installer+xml", e.ODP = "application/vnd.oasis.opendocument.presentation", e.ODS = "application/vnd.oasis.opendocument.spreadsheet", e.ODT = "application/vnd.oasis.opendocument.text", e.OGA = "audio/ogg", e.OGV = "video/ogg", e.OGX = "application/ogg", e.OTF = "font/otf", e.PNG = "image/png", e.PDF = "application/pdf", e.PPT = "application/vnd.ms-powerpoint", e.PPTX = "application/vnd.openxmlformats-officedocument.presentationml.presentation", e.RAR = "application/x-rar-compressed", e.RTF = "application/rtf", e.SH = "application/x-sh", e.SVG = "image/svg+xml", e.SWF = "application/x-shockwave-flash", e.TAR = "application/x-tar", e.TIF = "image/tiff", e.TIFF = "image/tiff", e.TS = "application/typescript", e.TTF = "font/ttf", e.TXT = "text/plain", e.VSD = "application/vnd.visio", e.WAV = "audio/wav", e.WEBA = "audio/webm", e.WEBM = "video/webm", e.WEBP = "image/webp", e.WOFF = "font/woff", e.WOFF2 = "font/woff2", e.XHTML = "application/xhtml+xml", e.XLS = "application/vnd.ms-excel", e.XLSX = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", e.XML = "application/xml", e.XUL = "application/vnd.mozilla.xul+xml", e.ZIP = "application/zip", e))(Ke || {}), Zt = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, m = (e, t, s, n) => {
|
|
930
|
+
for (var i = n > 1 ? void 0 : n ? Jt(t, s) : t, r = e.length - 1, o; r >= 0; r--)
|
|
931
|
+
(o = e[r]) && (i = (n ? o(t, s, i) : o(i)) || i);
|
|
932
|
+
return n && i && Zt(t, s, i), i;
|
|
912
933
|
};
|
|
913
|
-
const
|
|
914
|
-
|
|
915
|
-
let f = (q = class extends HTMLElement {
|
|
934
|
+
const g = "sps-file-upload";
|
|
935
|
+
let u = class extends HTMLElement {
|
|
916
936
|
constructor() {
|
|
917
|
-
super();
|
|
918
|
-
a(this, "description");
|
|
919
|
-
a(this, "multiple");
|
|
920
|
-
a(this, "shown", !0);
|
|
921
|
-
a(this, "dismissable");
|
|
922
|
-
a(this, "processing");
|
|
923
|
-
a(this, "mini");
|
|
924
|
-
a(this, "constrainContentWidth");
|
|
925
|
-
a(this, "downloadLabel");
|
|
926
|
-
a(this, "acceptExtensions");
|
|
927
|
-
a(this, "maxSize");
|
|
928
|
-
a(this, "customRequirement");
|
|
929
|
-
a(this, "selection");
|
|
930
|
-
a(this, "dismissal");
|
|
931
|
-
a(this, "download");
|
|
932
|
-
a(this, "fileInput");
|
|
933
|
-
a(this, "files", []);
|
|
934
|
-
a(this, "accept");
|
|
935
|
-
a(this, "acceptMIMETypes", /* @__PURE__ */ new Set());
|
|
936
|
-
a(this, "acceptExtensionsDescription");
|
|
937
|
-
a(this, "maxSizeBytes");
|
|
938
|
-
a(this, "active", !1);
|
|
939
|
-
a(this, "error", !1);
|
|
940
|
-
a(this, "namesOfUnsupportedFiles", []);
|
|
941
|
-
this.handleBrowseLinkClick = this.handleBrowseLinkClick.bind(this), this.handleDownloadButtonClick = this.handleDownloadButtonClick.bind(this), this.handleFileInputChange = this.handleFileInputChange.bind(this), this.dismiss = this.dismiss.bind(this);
|
|
937
|
+
super(), this.shown = !0, this.files = [], this.acceptMIMETypes = /* @__PURE__ */ new Set(), this.active = !1, this.error = !1, this.namesOfUnsupportedFiles = [], this.handleBrowseLinkClick = this.handleBrowseLinkClick.bind(this), this.handleDownloadButtonClick = this.handleDownloadButtonClick.bind(this), this.handleFileInputChange = this.handleFileInputChange.bind(this), this.dismiss = this.dismiss.bind(this);
|
|
942
938
|
}
|
|
943
939
|
get [j]() {
|
|
944
940
|
return [
|
|
945
|
-
|
|
946
|
-
this.active && `${
|
|
947
|
-
this.error && `${
|
|
948
|
-
!this.shown && `${
|
|
949
|
-
this.mini && `${
|
|
950
|
-
this.constrainContentWidth && `${
|
|
941
|
+
g,
|
|
942
|
+
this.active && `${g}--active`,
|
|
943
|
+
this.error && `${g}--error`,
|
|
944
|
+
!this.shown && `${g}--hidden`,
|
|
945
|
+
this.mini && `${g}--mini`,
|
|
946
|
+
this.constrainContentWidth && `${g}--constrained-content-width`
|
|
951
947
|
];
|
|
952
948
|
}
|
|
953
949
|
connectedCallback() {
|
|
954
950
|
this.description = this.description || (this.multiple ? "Files" : "File"), this.acceptExtensions && this.processAcceptExtensions(this.acceptExtensions), this.maxSize && this.parseAndValidateMaxSize(this.maxSize);
|
|
955
951
|
}
|
|
956
|
-
attributeChangedCallback(t, s
|
|
957
|
-
|
|
952
|
+
attributeChangedCallback(e, t, s) {
|
|
953
|
+
e === "acceptExtensions" && this.processAcceptExtensions(s), e === "maxSize" && this.parseAndValidateMaxSize(s);
|
|
958
954
|
}
|
|
955
|
+
/**
|
|
956
|
+
* If the `dismissable` prop has been set, this will programmatically
|
|
957
|
+
* dismiss the component and fire the "dismissal" event.
|
|
958
|
+
*/
|
|
959
959
|
dismiss() {
|
|
960
960
|
this.dismissable && (this.shown = !1, this.update(), this.dismissal.dispatch());
|
|
961
961
|
}
|
|
962
|
+
/** If the `dismissable` prop has been set, this will programmatically show the component. */
|
|
962
963
|
show() {
|
|
963
964
|
this.dismissable && (this.shown = !0, this.update());
|
|
964
965
|
}
|
|
965
|
-
render({ t }) {
|
|
966
|
-
const
|
|
967
|
-
return /* @__PURE__ */
|
|
966
|
+
render({ t: e }) {
|
|
967
|
+
const t = this.error ? be.EXCLAMATION_CIRCLE : be.UPLOAD_CLOUD, s = (this.multiple ? e("design-system:fileUpload.instructions_plural") : e("design-system:fileUpload.instructions")).split("|");
|
|
968
|
+
return /* @__PURE__ */ a("div", { "data-fragment": !0 }, /* @__PURE__ */ a("div", { className: `${g}__content` }, this.processing ? /* @__PURE__ */ a("div", { "data-fragment": !0 }, /* @__PURE__ */ a("i", { className: "sps-spinner sps-spinner--medium", "aria-hidden": "true" }), /* @__PURE__ */ a("div", { className: `${g}__instructions` }, e("design-system:fileUpload.processing"))) : /* @__PURE__ */ a("div", { "data-fragment": !0 }, /* @__PURE__ */ a("i", { className: `sps-icon sps-icon-${t} ${g}__icon-primary`, "aria-hidden": "true" }), /* @__PURE__ */ a("div", { className: `${g}__title` }, this.error ? /* @__PURE__ */ a("div", { "data-fragment": !0 }, e(
|
|
968
969
|
this.namesOfUnsupportedFiles.length > 1 ? "design-system:fileUpload.cancelled_plural" : "design-system:fileUpload.cancelled"
|
|
969
|
-
)) : /* @__PURE__ */
|
|
970
|
-
const
|
|
971
|
-
return /* @__PURE__ */
|
|
972
|
-
}))) : /* @__PURE__ */
|
|
970
|
+
)) : /* @__PURE__ */ a("div", { "data-fragment": !0 }, e("design-system:fileUpload.title", { description: this.description }))), this.error ? /* @__PURE__ */ a("div", { className: `${g}__errored-files` }, new Set(this.namesOfUnsupportedFiles.map((n, i) => {
|
|
971
|
+
const r = Math.floor(n.length / 2);
|
|
972
|
+
return /* @__PURE__ */ a("div", { className: `${g}__errored-filename`, key: n }, /* @__PURE__ */ a("span", { className: `${g}__errored-filename-segment` }, n.substr(0, r)), /* @__PURE__ */ a("div", { className: `${g}__errored-filename-segment` }, /* @__PURE__ */ a("span", null, n.substr(r))), i < this.namesOfUnsupportedFiles.length - 1 ? "," : "");
|
|
973
|
+
}))) : /* @__PURE__ */ a("span", null), /* @__PURE__ */ a("div", { className: `${g}__instructions` }, /* @__PURE__ */ a("div", { "data-fragment": !0 }, /* @__PURE__ */ a("span", null, s[0]), /* @__PURE__ */ a("a", { href: "", onClick: this.handleBrowseLinkClick }, s[1]), /* @__PURE__ */ a("span", null, s[2]))), /* @__PURE__ */ a("div", { className: `${g}__requirements` }, this.acceptExtensions ? /* @__PURE__ */ a("span", null, "(", " ", e("design-system:fileUpload.acceptedTypes", { fileTypes: this.acceptExtensionsDescription }), " ", ")") : "", this.maxSize ? /* @__PURE__ */ a("span", null, "(", " ", e("design-system:fileUpload.maximumSize", { size: this.maxSize }), " ", ")") : "", this.customRequirement ? /* @__PURE__ */ a("span", null, " ", this.customRequirement, " ") : ""), this.downloadLabel && /* @__PURE__ */ a(
|
|
973
974
|
"div",
|
|
974
975
|
{
|
|
975
|
-
className: `sps-button sps-button--link ${
|
|
976
|
+
className: `sps-button sps-button--link ${g}__download-button`,
|
|
976
977
|
onClick: this.handleDownloadButtonClick
|
|
977
978
|
},
|
|
978
|
-
/* @__PURE__ */
|
|
979
|
-
))), this.dismissable && !this.processing && /* @__PURE__ */
|
|
979
|
+
/* @__PURE__ */ a("button", { type: "button" }, /* @__PURE__ */ a("i", { className: "sps-icon sps-icon-download-cloud", "aria-hidden": "true" }), " ", this.downloadLabel)
|
|
980
|
+
))), this.dismissable && !this.processing && /* @__PURE__ */ a(
|
|
980
981
|
"div",
|
|
981
982
|
{
|
|
982
|
-
className: `sps-button sps-button--icon ${
|
|
983
|
+
className: `sps-button sps-button--icon ${g}__close-button`,
|
|
983
984
|
onClick: this.dismiss
|
|
984
985
|
},
|
|
985
|
-
/* @__PURE__ */
|
|
986
|
-
), /* @__PURE__ */
|
|
986
|
+
/* @__PURE__ */ a("button", { type: "button", title: e("design-system:fileUpload.close") }, /* @__PURE__ */ a("i", { className: "sps-icon sps-icon-x", "aria-hidden": "true" }))
|
|
987
|
+
), /* @__PURE__ */ a("form", null, /* @__PURE__ */ a(
|
|
987
988
|
"input",
|
|
988
989
|
{
|
|
989
990
|
type: "file",
|
|
@@ -993,52 +994,55 @@ let f = (q = class extends HTMLElement {
|
|
|
993
994
|
}
|
|
994
995
|
)));
|
|
995
996
|
}
|
|
996
|
-
parseAndValidateMaxSize(
|
|
997
|
+
parseAndValidateMaxSize(e) {
|
|
997
998
|
try {
|
|
998
|
-
this.maxSizeBytes =
|
|
999
|
+
this.maxSizeBytes = et(e);
|
|
999
1000
|
} catch {
|
|
1000
|
-
throw new Error(`Could not parse "${
|
|
1001
|
+
throw new Error(`Could not parse "${e}" as a file size.`);
|
|
1001
1002
|
}
|
|
1002
1003
|
}
|
|
1003
|
-
processAcceptExtensions(
|
|
1004
|
-
const
|
|
1005
|
-
this.acceptExtensionsDescription =
|
|
1006
|
-
for (const
|
|
1007
|
-
for (const
|
|
1008
|
-
this.acceptMIMETypes.add(
|
|
1009
|
-
this.accept =
|
|
1004
|
+
processAcceptExtensions(e) {
|
|
1005
|
+
const s = (Array.isArray(e) ? e : e.trim().split(/\s?,\s?/)).map((i) => i.replace(/^\./, "")), n = s.map((i) => `.${i}`.toLowerCase());
|
|
1006
|
+
this.acceptExtensionsDescription = n.map((i, r) => r > 0 && r === n.length - 1 ? `or ${i}` : i).join(n.length > 2 ? ", " : " "), this.acceptMIMETypes.clear();
|
|
1007
|
+
for (const i of s)
|
|
1008
|
+
for (const r of Ke[i.toUpperCase()].split(","))
|
|
1009
|
+
this.acceptMIMETypes.add(r);
|
|
1010
|
+
this.accept = n.concat(Array.from(this.acceptMIMETypes)).join(",");
|
|
1010
1011
|
}
|
|
1011
|
-
selectFiles(
|
|
1012
|
+
selectFiles(e) {
|
|
1012
1013
|
this.namesOfUnsupportedFiles = [];
|
|
1013
|
-
const
|
|
1014
|
-
for (const
|
|
1015
|
-
this.acceptExtensions && !this.acceptMIMETypes.has(
|
|
1016
|
-
this.namesOfUnsupportedFiles.length ? (this.error = !0, this.fileInput.value = null, this.update()) : (this.files =
|
|
1014
|
+
const t = Array.from(e);
|
|
1015
|
+
for (const s of t)
|
|
1016
|
+
this.acceptExtensions && !this.acceptMIMETypes.has(s.type) && this.namesOfUnsupportedFiles.push(s.name), this.maxSize && s.size > this.maxSizeBytes && this.namesOfUnsupportedFiles.indexOf(s.name) === -1 && this.namesOfUnsupportedFiles.push(s.name);
|
|
1017
|
+
this.namesOfUnsupportedFiles.length ? (this.error = !0, this.fileInput.value = null, this.update()) : (this.files = t, this.selection.dispatch(t));
|
|
1017
1018
|
}
|
|
1018
|
-
handleDragOver(
|
|
1019
|
-
|
|
1019
|
+
handleDragOver(e) {
|
|
1020
|
+
e.preventDefault(), e.stopPropagation();
|
|
1020
1021
|
}
|
|
1021
|
-
handleDragEnter(
|
|
1022
|
-
|
|
1022
|
+
handleDragEnter(e) {
|
|
1023
|
+
e.preventDefault(), this.active = !0, this.error = !1, this.update();
|
|
1023
1024
|
}
|
|
1024
|
-
handleDragLeave(
|
|
1025
|
-
|
|
1025
|
+
handleDragLeave(e) {
|
|
1026
|
+
e.preventDefault(), this.active = !1, this.update();
|
|
1026
1027
|
}
|
|
1027
|
-
handleDrop(
|
|
1028
|
-
|
|
1029
|
-
(
|
|
1030
|
-
)) : this.selectFiles(
|
|
1028
|
+
handleDrop(e) {
|
|
1029
|
+
e.preventDefault(), e.stopPropagation(), this.active = !1, e.dataTransfer.items ? this.selectFiles(Array.from(e.dataTransfer.items).map(
|
|
1030
|
+
(t) => t.getAsFile()
|
|
1031
|
+
)) : this.selectFiles(e.dataTransfer.files), this.update();
|
|
1031
1032
|
}
|
|
1032
|
-
|
|
1033
|
-
|
|
1033
|
+
/* eslint-enable @typescript-eslint/member-ordering */
|
|
1034
|
+
handleBrowseLinkClick(e) {
|
|
1035
|
+
e.preventDefault(), this.error = !1, this.update(), this.fileInput.click();
|
|
1034
1036
|
}
|
|
1035
1037
|
handleDownloadButtonClick() {
|
|
1036
1038
|
this.download.dispatch();
|
|
1037
1039
|
}
|
|
1038
|
-
handleFileInputChange(
|
|
1039
|
-
|
|
1040
|
+
handleFileInputChange(e) {
|
|
1041
|
+
e.stopPropagation(), this.selectFiles(e.target.files);
|
|
1040
1042
|
}
|
|
1041
|
-
}
|
|
1043
|
+
};
|
|
1044
|
+
u.displayName = g;
|
|
1045
|
+
u.props = {
|
|
1042
1046
|
description: "string",
|
|
1043
1047
|
multiple: "boolean",
|
|
1044
1048
|
dismissable: "boolean",
|
|
@@ -1051,77 +1055,77 @@ let f = (q = class extends HTMLElement {
|
|
|
1051
1055
|
selection: { event: !0, type: "CustomEvent<Array<File>>" },
|
|
1052
1056
|
dismissal: { event: !0, type: "CustomEvent<void>" },
|
|
1053
1057
|
download: { event: !0, type: "CustomEvent<void>" }
|
|
1054
|
-
}
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
],
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
],
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
],
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
],
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
],
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
],
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
],
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
],
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
],
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
],
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
],
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
],
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
],
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
],
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
],
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
],
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
],
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
],
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
],
|
|
1112
|
-
|
|
1113
|
-
T({ tag:
|
|
1114
|
-
],
|
|
1115
|
-
const
|
|
1058
|
+
};
|
|
1059
|
+
m([
|
|
1060
|
+
c()
|
|
1061
|
+
], u.prototype, "description", 2);
|
|
1062
|
+
m([
|
|
1063
|
+
c(Boolean)
|
|
1064
|
+
], u.prototype, "multiple", 2);
|
|
1065
|
+
m([
|
|
1066
|
+
c(Boolean)
|
|
1067
|
+
], u.prototype, "shown", 2);
|
|
1068
|
+
m([
|
|
1069
|
+
c(Boolean)
|
|
1070
|
+
], u.prototype, "dismissable", 2);
|
|
1071
|
+
m([
|
|
1072
|
+
c(Boolean)
|
|
1073
|
+
], u.prototype, "processing", 2);
|
|
1074
|
+
m([
|
|
1075
|
+
c(Boolean)
|
|
1076
|
+
], u.prototype, "mini", 2);
|
|
1077
|
+
m([
|
|
1078
|
+
c(Boolean)
|
|
1079
|
+
], u.prototype, "constrainContentWidth", 2);
|
|
1080
|
+
m([
|
|
1081
|
+
c()
|
|
1082
|
+
], u.prototype, "downloadLabel", 2);
|
|
1083
|
+
m([
|
|
1084
|
+
c()
|
|
1085
|
+
], u.prototype, "acceptExtensions", 2);
|
|
1086
|
+
m([
|
|
1087
|
+
c()
|
|
1088
|
+
], u.prototype, "maxSize", 2);
|
|
1089
|
+
m([
|
|
1090
|
+
c()
|
|
1091
|
+
], u.prototype, "customRequirement", 2);
|
|
1092
|
+
m([
|
|
1093
|
+
ge()
|
|
1094
|
+
], u.prototype, "selection", 2);
|
|
1095
|
+
m([
|
|
1096
|
+
ge()
|
|
1097
|
+
], u.prototype, "dismissal", 2);
|
|
1098
|
+
m([
|
|
1099
|
+
ge()
|
|
1100
|
+
], u.prototype, "download", 2);
|
|
1101
|
+
m([
|
|
1102
|
+
me("input[type='file']")
|
|
1103
|
+
], u.prototype, "fileInput", 2);
|
|
1104
|
+
m([
|
|
1105
|
+
M("dragover")
|
|
1106
|
+
], u.prototype, "handleDragOver", 1);
|
|
1107
|
+
m([
|
|
1108
|
+
M("dragenter")
|
|
1109
|
+
], u.prototype, "handleDragEnter", 1);
|
|
1110
|
+
m([
|
|
1111
|
+
M("dragleave")
|
|
1112
|
+
], u.prototype, "handleDragLeave", 1);
|
|
1113
|
+
m([
|
|
1114
|
+
M("drop")
|
|
1115
|
+
], u.prototype, "handleDrop", 1);
|
|
1116
|
+
u = m([
|
|
1117
|
+
T({ tag: g })
|
|
1118
|
+
], u);
|
|
1119
|
+
const gs = {
|
|
1116
1120
|
basic: {
|
|
1117
1121
|
label: "Basic File Upload",
|
|
1118
|
-
description:
|
|
1122
|
+
description: l`
|
|
1119
1123
|
<p>Simply allow the user to drag-and-drop or select either a single file or multiple files at once.</p>
|
|
1120
1124
|
`,
|
|
1121
1125
|
examples: {
|
|
1122
1126
|
single: {
|
|
1123
1127
|
description: "<p>Single file upload</p>",
|
|
1124
|
-
react:
|
|
1128
|
+
react: l`
|
|
1125
1129
|
function Component() {
|
|
1126
1130
|
const ref = React.useRef()
|
|
1127
1131
|
|
|
@@ -1148,7 +1152,7 @@ const Ss = {
|
|
|
1148
1152
|
},
|
|
1149
1153
|
multiple: {
|
|
1150
1154
|
description: "<p>Multiple file upload</p>",
|
|
1151
|
-
react:
|
|
1155
|
+
react: l`
|
|
1152
1156
|
function Component() {
|
|
1153
1157
|
const ref = React.useRef()
|
|
1154
1158
|
|
|
@@ -1177,13 +1181,13 @@ const Ss = {
|
|
|
1177
1181
|
},
|
|
1178
1182
|
restrictions: {
|
|
1179
1183
|
label: "Restrictions",
|
|
1180
|
-
description:
|
|
1184
|
+
description: l`
|
|
1181
1185
|
<p>You can place restrictions on what files will be accepted with an extension whitelist and/or a maximum size.</p>
|
|
1182
1186
|
`,
|
|
1183
1187
|
examples: {
|
|
1184
1188
|
size: {
|
|
1185
1189
|
description: "<p>Maximum size</p>",
|
|
1186
|
-
react:
|
|
1190
|
+
react: l`
|
|
1187
1191
|
function Component() {
|
|
1188
1192
|
const ref = React.useRef()
|
|
1189
1193
|
|
|
@@ -1210,7 +1214,7 @@ const Ss = {
|
|
|
1210
1214
|
},
|
|
1211
1215
|
type: {
|
|
1212
1216
|
description: "<p>File type whitelist</p>",
|
|
1213
|
-
react:
|
|
1217
|
+
react: l`
|
|
1214
1218
|
function Component() {
|
|
1215
1219
|
const ref = React.useRef()
|
|
1216
1220
|
|
|
@@ -1242,7 +1246,7 @@ const Ss = {
|
|
|
1242
1246
|
},
|
|
1243
1247
|
both: {
|
|
1244
1248
|
description: "<p>Both restrictions</p>",
|
|
1245
|
-
react:
|
|
1249
|
+
react: l`
|
|
1246
1250
|
function Component() {
|
|
1247
1251
|
const ref = React.useRef()
|
|
1248
1252
|
|
|
@@ -1277,13 +1281,13 @@ const Ss = {
|
|
|
1277
1281
|
},
|
|
1278
1282
|
dismissable: {
|
|
1279
1283
|
label: "Dismissable",
|
|
1280
|
-
description:
|
|
1284
|
+
description: l`
|
|
1281
1285
|
<p>With this option, the file upload component can be dismissed by the user. If the user does dismiss it, you can
|
|
1282
1286
|
show it again programmatically if you need to.</p>
|
|
1283
1287
|
`,
|
|
1284
1288
|
examples: {
|
|
1285
1289
|
dismissable: {
|
|
1286
|
-
react:
|
|
1290
|
+
react: l`
|
|
1287
1291
|
function Component() {
|
|
1288
1292
|
const [showFileUpload, setShowFileUpload] = React.useState(true)
|
|
1289
1293
|
const ref = React.useRef()
|
|
@@ -1322,13 +1326,13 @@ const Ss = {
|
|
|
1322
1326
|
},
|
|
1323
1327
|
downloadButton: {
|
|
1324
1328
|
label: "Download Button",
|
|
1325
|
-
description:
|
|
1329
|
+
description: l`
|
|
1326
1330
|
<p>You can optionally provide a button to download a file. Typically this will be a template for
|
|
1327
1331
|
whatever the user is expected to upload. They can then fill out the template, save it, and upload it.</p>
|
|
1328
1332
|
`,
|
|
1329
1333
|
examples: {
|
|
1330
1334
|
downloadButton: {
|
|
1331
|
-
react:
|
|
1335
|
+
react: l`
|
|
1332
1336
|
function Component() {
|
|
1333
1337
|
const ref = React.useRef()
|
|
1334
1338
|
|
|
@@ -1362,13 +1366,13 @@ const Ss = {
|
|
|
1362
1366
|
},
|
|
1363
1367
|
mini: {
|
|
1364
1368
|
label: "Mini File Upload",
|
|
1365
|
-
description:
|
|
1369
|
+
description: l`
|
|
1366
1370
|
<p>When the file upload component is to be placed in a small container,
|
|
1367
1371
|
it should be marked as a mini file upload so that everything fits.</p>
|
|
1368
1372
|
`,
|
|
1369
1373
|
examples: {
|
|
1370
1374
|
single: {
|
|
1371
|
-
react:
|
|
1375
|
+
react: l`
|
|
1372
1376
|
function Component() {
|
|
1373
1377
|
const ref = React.useRef()
|
|
1374
1378
|
|
|
@@ -1397,14 +1401,14 @@ const Ss = {
|
|
|
1397
1401
|
},
|
|
1398
1402
|
constrainContentWidth: {
|
|
1399
1403
|
label: "Constrain Content Width",
|
|
1400
|
-
description:
|
|
1404
|
+
description: l`
|
|
1401
1405
|
<p>If this prop is provided, the content will be restricted to 50% of
|
|
1402
1406
|
the overall width of the component. Consult your product designer if
|
|
1403
1407
|
you're not sure whether to use this variant.</p>
|
|
1404
1408
|
`,
|
|
1405
1409
|
examples: {
|
|
1406
1410
|
constrainContentWidth: {
|
|
1407
|
-
react:
|
|
1411
|
+
react: l`
|
|
1408
1412
|
function Component() {
|
|
1409
1413
|
const ref = React.useRef()
|
|
1410
1414
|
|
|
@@ -1432,49 +1436,41 @@ const Ss = {
|
|
|
1432
1436
|
}
|
|
1433
1437
|
}
|
|
1434
1438
|
};
|
|
1435
|
-
var
|
|
1436
|
-
for (var i = n > 1 ? void 0 : n ?
|
|
1437
|
-
(
|
|
1438
|
-
return n && i &&
|
|
1439
|
+
var Yt = Object.defineProperty, Mt = Object.getOwnPropertyDescriptor, A = (e, t, s, n) => {
|
|
1440
|
+
for (var i = n > 1 ? void 0 : n ? Mt(t, s) : t, r = e.length - 1, o; r >= 0; r--)
|
|
1441
|
+
(o = e[r]) && (i = (n ? o(t, s, i) : o(i)) || i);
|
|
1442
|
+
return n && i && Yt(t, s, i), i;
|
|
1439
1443
|
};
|
|
1440
|
-
const
|
|
1441
|
-
|
|
1442
|
-
let y = (G = class extends HTMLElement {
|
|
1444
|
+
const w = "sps-insight-card";
|
|
1445
|
+
let N = class extends HTMLElement {
|
|
1443
1446
|
constructor() {
|
|
1444
|
-
super(...arguments);
|
|
1445
|
-
a(this, "icon");
|
|
1446
|
-
a(this, "kind", ot.GENERAL);
|
|
1447
|
-
a(this, "title");
|
|
1448
|
-
a(this, "metric");
|
|
1449
|
-
a(this, "partnerCount");
|
|
1450
|
-
a(this, "totalPartners");
|
|
1451
|
-
a(this, "secondary");
|
|
1452
|
-
a(this, "content");
|
|
1453
|
-
a(this, "detail");
|
|
1447
|
+
super(...arguments), this.kind = Ye.GENERAL;
|
|
1454
1448
|
}
|
|
1455
1449
|
get [j]() {
|
|
1456
1450
|
return [
|
|
1457
|
-
|
|
1458
|
-
`${
|
|
1459
|
-
this.detail && this.detail.children.length ? `${
|
|
1451
|
+
w,
|
|
1452
|
+
`${w}--${this.kind}`,
|
|
1453
|
+
this.detail && this.detail.children.length ? `${w}--has-detail` : null
|
|
1460
1454
|
];
|
|
1461
1455
|
}
|
|
1462
|
-
render({ t }) {
|
|
1463
|
-
const
|
|
1456
|
+
render({ t: e }) {
|
|
1457
|
+
const t = /* @__PURE__ */ a("div", { className: `${w}__metric-count` }, this.metric), s = /* @__PURE__ */ a("div", { className: `${w}__description` }, /* @__PURE__ */ a(
|
|
1464
1458
|
"div",
|
|
1465
1459
|
{
|
|
1466
|
-
className: `${
|
|
1460
|
+
className: `${w}__title`,
|
|
1467
1461
|
style: { "-webkit-box-orient": "vertical" }
|
|
1468
1462
|
},
|
|
1469
1463
|
this.title
|
|
1470
|
-
), /* @__PURE__ */
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
] = (
|
|
1475
|
-
return /* @__PURE__ */
|
|
1464
|
+
), /* @__PURE__ */ a("div", { className: `${w}__detail` }, this.content)), n = this.partnercount, i = this.totalpartners, [
|
|
1465
|
+
r,
|
|
1466
|
+
o,
|
|
1467
|
+
p
|
|
1468
|
+
] = (n ? e("design-system:insightCard.partnerCount", { count: n, total: i }) : "").split("|");
|
|
1469
|
+
return /* @__PURE__ */ a("div", { "data-fragment": !0 }, /* @__PURE__ */ a("div", { className: `${w}__body` }, this.icon ? /* @__PURE__ */ a("i", { className: `sps-icon sps-icon-${this.icon}` }) : /* @__PURE__ */ a("i", { className: `sps-icon sps-icon-${Me[this.kind]}` }), t, s), n && /* @__PURE__ */ a("div", { className: `${w}__partner-count` }, n === i ? /* @__PURE__ */ a("div", null, e("design-system:insightCard.all")) : /* @__PURE__ */ a("div", { "data-fragment": !0 }, /* @__PURE__ */ a("div", null, r), /* @__PURE__ */ a("div", null, o), /* @__PURE__ */ a("div", null, p)), /* @__PURE__ */ a("div", { className: `${w}__partners-text` }, e("design-system:insightCard.partners"))));
|
|
1476
1470
|
}
|
|
1477
|
-
}
|
|
1471
|
+
};
|
|
1472
|
+
N.displayName = w;
|
|
1473
|
+
N.props = {
|
|
1478
1474
|
icon: "SpsIcon",
|
|
1479
1475
|
kind: "SpsInsightCardKind",
|
|
1480
1476
|
title: "string",
|
|
@@ -1482,84 +1478,86 @@ let y = (G = class extends HTMLElement {
|
|
|
1482
1478
|
partnerCount: "number",
|
|
1483
1479
|
totalPartners: "number",
|
|
1484
1480
|
secondary: "boolean"
|
|
1485
|
-
}
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
],
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
],
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
],
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
],
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
],
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
],
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
],
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
],
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
],
|
|
1513
|
-
|
|
1514
|
-
T({ tag:
|
|
1515
|
-
],
|
|
1516
|
-
var
|
|
1517
|
-
for (var i = n > 1 ? void 0 : n ?
|
|
1518
|
-
(
|
|
1519
|
-
return n && i &&
|
|
1481
|
+
};
|
|
1482
|
+
A([
|
|
1483
|
+
c()
|
|
1484
|
+
], N.prototype, "icon", 2);
|
|
1485
|
+
A([
|
|
1486
|
+
c()
|
|
1487
|
+
], N.prototype, "kind", 2);
|
|
1488
|
+
A([
|
|
1489
|
+
c()
|
|
1490
|
+
], N.prototype, "title", 2);
|
|
1491
|
+
A([
|
|
1492
|
+
c()
|
|
1493
|
+
], N.prototype, "metric", 2);
|
|
1494
|
+
A([
|
|
1495
|
+
c()
|
|
1496
|
+
], N.prototype, "partnerCount", 2);
|
|
1497
|
+
A([
|
|
1498
|
+
c()
|
|
1499
|
+
], N.prototype, "totalPartners", 2);
|
|
1500
|
+
A([
|
|
1501
|
+
c()
|
|
1502
|
+
], N.prototype, "secondary", 2);
|
|
1503
|
+
A([
|
|
1504
|
+
fe()
|
|
1505
|
+
], N.prototype, "content", 2);
|
|
1506
|
+
A([
|
|
1507
|
+
me(`.${w}__detail`)
|
|
1508
|
+
], N.prototype, "detail", 2);
|
|
1509
|
+
N = A([
|
|
1510
|
+
T({ tag: w })
|
|
1511
|
+
], N);
|
|
1512
|
+
var es = Object.defineProperty, ts = Object.getOwnPropertyDescriptor, ve = (e, t, s, n) => {
|
|
1513
|
+
for (var i = n > 1 ? void 0 : n ? ts(t, s) : t, r = e.length - 1, o; r >= 0; r--)
|
|
1514
|
+
(o = e[r]) && (i = (n ? o(t, s, i) : o(i)) || i);
|
|
1515
|
+
return n && i && es(t, s, i), i;
|
|
1520
1516
|
};
|
|
1521
1517
|
const D = "sps-insights";
|
|
1522
|
-
|
|
1523
|
-
let te = (X = class extends HTMLElement {
|
|
1518
|
+
let R = class extends HTMLElement {
|
|
1524
1519
|
constructor() {
|
|
1525
|
-
super();
|
|
1526
|
-
a(this, "content", []);
|
|
1527
|
-
a(this, "details");
|
|
1528
|
-
a(this, "showAdditionalInsights", !1);
|
|
1529
|
-
this.toggleAdditionalInsights = this.toggleAdditionalInsights.bind(this);
|
|
1520
|
+
super(), this.content = [], this.showAdditionalInsights = !1, this.toggleAdditionalInsights = this.toggleAdditionalInsights.bind(this);
|
|
1530
1521
|
}
|
|
1531
1522
|
get [j]() {
|
|
1532
1523
|
return [
|
|
1533
1524
|
D,
|
|
1534
1525
|
this.showAdditionalInsights && `${D}--show-additional`,
|
|
1535
|
-
this.details && Array.from(this.details).every((
|
|
1526
|
+
this.details && Array.from(this.details).every((e) => !e.textContent) ? `${D}--no-details` : null,
|
|
1536
1527
|
this.content.length === 6 ? `${D}--break-4` : null,
|
|
1537
1528
|
this.content.length === 7 ? `${D}--break-5` : null,
|
|
1538
1529
|
this.content.length === 8 ? `${D}--break-5` : null
|
|
1539
1530
|
];
|
|
1540
1531
|
}
|
|
1532
|
+
/**
|
|
1533
|
+
* Only the first ten Insight Cards are visible by default; the rest are behind
|
|
1534
|
+
* the "Show Additional Insights"/"Hide Additional Insights" button. This method
|
|
1535
|
+
* will toggle the additional insights.
|
|
1536
|
+
*/
|
|
1541
1537
|
toggleAdditionalInsights() {
|
|
1542
1538
|
this.showAdditionalInsights = !this.showAdditionalInsights, this.update();
|
|
1543
1539
|
}
|
|
1544
1540
|
render() {
|
|
1545
|
-
return /* @__PURE__ */
|
|
1541
|
+
return /* @__PURE__ */ a("div", { "data-fragment": !0 }, this.content, this.content.length > 10 && /* @__PURE__ */ a("div", { className: "sps-button sps-button--link", onClick: this.toggleAdditionalInsights }, /* @__PURE__ */ a("button", { type: "button" }, this.showAdditionalInsights ? "Hide " : "Show ", "Additional Insights")));
|
|
1546
1542
|
}
|
|
1547
|
-
}
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
|
|
1553
|
-
|
|
1554
|
-
|
|
1543
|
+
};
|
|
1544
|
+
R.displayName = D;
|
|
1545
|
+
R.props = {};
|
|
1546
|
+
ve([
|
|
1547
|
+
fe()
|
|
1548
|
+
], R.prototype, "content", 2);
|
|
1549
|
+
ve([
|
|
1550
|
+
Qt(".sps-insight-card__detail")
|
|
1551
|
+
], R.prototype, "details", 2);
|
|
1552
|
+
R = ve([
|
|
1555
1553
|
T({ tag: D })
|
|
1556
|
-
],
|
|
1557
|
-
const
|
|
1554
|
+
], R);
|
|
1555
|
+
const ms = {
|
|
1558
1556
|
basic: {
|
|
1559
1557
|
label: "Basic Insight Cards",
|
|
1560
1558
|
examples: {
|
|
1561
1559
|
basic: {
|
|
1562
|
-
jsx:
|
|
1560
|
+
jsx: l`
|
|
1563
1561
|
<sps-insights>
|
|
1564
1562
|
<sps-insight-card kind="general"
|
|
1565
1563
|
metric="1234"
|
|
@@ -1590,7 +1588,7 @@ const Os = {
|
|
|
1590
1588
|
label: "With Details",
|
|
1591
1589
|
examples: {
|
|
1592
1590
|
details: {
|
|
1593
|
-
jsx:
|
|
1591
|
+
jsx: l`
|
|
1594
1592
|
<sps-insights>
|
|
1595
1593
|
<sps-insight-card kind="general"
|
|
1596
1594
|
metric="1234"
|
|
@@ -1643,7 +1641,7 @@ const Os = {
|
|
|
1643
1641
|
label: "Partner Count",
|
|
1644
1642
|
examples: {
|
|
1645
1643
|
partner_count: {
|
|
1646
|
-
jsx:
|
|
1644
|
+
jsx: l`
|
|
1647
1645
|
<sps-insights>
|
|
1648
1646
|
<sps-insight-card kind="general"
|
|
1649
1647
|
metric="1234"
|
|
@@ -1684,7 +1682,7 @@ const Os = {
|
|
|
1684
1682
|
label: "10+ Insight Cards",
|
|
1685
1683
|
examples: {
|
|
1686
1684
|
expansion: {
|
|
1687
|
-
jsx:
|
|
1685
|
+
jsx: l`
|
|
1688
1686
|
<sps-insights>
|
|
1689
1687
|
<sps-insight-card kind="general"
|
|
1690
1688
|
metric="1234"
|
|
@@ -1799,13 +1797,13 @@ const Os = {
|
|
|
1799
1797
|
},
|
|
1800
1798
|
events: {
|
|
1801
1799
|
label: "Adding a click handler",
|
|
1802
|
-
description:
|
|
1800
|
+
description: l`
|
|
1803
1801
|
<p>Attaching event handlers to native web components in React cannot be done the usual way at this time.
|
|
1804
1802
|
Here is how to do it:</p>
|
|
1805
1803
|
`,
|
|
1806
1804
|
examples: {
|
|
1807
1805
|
events: {
|
|
1808
|
-
react:
|
|
1806
|
+
react: l`
|
|
1809
1807
|
function Component() {
|
|
1810
1808
|
function handleClick() {
|
|
1811
1809
|
window.alert("Insight card clicked");
|
|
@@ -1845,7 +1843,7 @@ const Os = {
|
|
|
1845
1843
|
label: "Using alternate icons",
|
|
1846
1844
|
examples: {
|
|
1847
1845
|
basic: {
|
|
1848
|
-
react:
|
|
1846
|
+
react: l`
|
|
1849
1847
|
function DemoComponent() {
|
|
1850
1848
|
return (
|
|
1851
1849
|
<sps-insights>
|
|
@@ -1887,20 +1885,14 @@ const Os = {
|
|
|
1887
1885
|
}
|
|
1888
1886
|
}
|
|
1889
1887
|
};
|
|
1890
|
-
var
|
|
1891
|
-
for (var i = n > 1 ? void 0 : n ?
|
|
1892
|
-
(
|
|
1893
|
-
return n && i &&
|
|
1894
|
-
}
|
|
1895
|
-
let
|
|
1888
|
+
var ss = Object.defineProperty, ns = Object.getOwnPropertyDescriptor, I = (e, t, s, n) => {
|
|
1889
|
+
for (var i = n > 1 ? void 0 : n ? ns(t, s) : t, r = e.length - 1, o; r >= 0; r--)
|
|
1890
|
+
(o = e[r]) && (i = (n ? o(t, s, i) : o(i)) || i);
|
|
1891
|
+
return n && i && ss(t, s, i), i;
|
|
1892
|
+
};
|
|
1893
|
+
let O = class extends HTMLElement {
|
|
1896
1894
|
constructor() {
|
|
1897
|
-
super(...arguments);
|
|
1898
|
-
a(this, "active", !1);
|
|
1899
|
-
a(this, "label", "");
|
|
1900
|
-
a(this, "icon");
|
|
1901
|
-
a(this, "tag", "");
|
|
1902
|
-
a(this, "href");
|
|
1903
|
-
a(this, "target");
|
|
1895
|
+
super(...arguments), this.active = !1, this.label = "", this.tag = "";
|
|
1904
1896
|
}
|
|
1905
1897
|
get [j]() {
|
|
1906
1898
|
return [
|
|
@@ -1909,66 +1901,69 @@ let P = (K = class extends HTMLElement {
|
|
|
1909
1901
|
];
|
|
1910
1902
|
}
|
|
1911
1903
|
render() {
|
|
1912
|
-
return /* @__PURE__ */
|
|
1904
|
+
return /* @__PURE__ */ a("a", { href: this.href, target: this.target, className: "sps-tabbed-nav__nav-item-link", tabIndex: 0 }, this.icon && /* @__PURE__ */ a("i", { className: `sps-icon sps-icon-${this.icon}` }), this.label && /* @__PURE__ */ a("span", null, this.label), this.tag && /* @__PURE__ */ a("span", { className: "sps-tag sps-tag--default" }, this.tag));
|
|
1913
1905
|
}
|
|
1914
|
-
}
|
|
1906
|
+
};
|
|
1907
|
+
O.displayName = "sps-nav-tab";
|
|
1908
|
+
O.props = {
|
|
1915
1909
|
active: "boolean",
|
|
1916
1910
|
label: "string",
|
|
1917
1911
|
icon: "SpsIcon",
|
|
1918
1912
|
tag: "string",
|
|
1919
1913
|
href: "string",
|
|
1920
1914
|
target: "string"
|
|
1921
|
-
}
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
],
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
],
|
|
1928
|
-
|
|
1929
|
-
|
|
1930
|
-
],
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
],
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
],
|
|
1937
|
-
|
|
1938
|
-
|
|
1939
|
-
],
|
|
1940
|
-
|
|
1915
|
+
};
|
|
1916
|
+
I([
|
|
1917
|
+
c()
|
|
1918
|
+
], O.prototype, "active", 2);
|
|
1919
|
+
I([
|
|
1920
|
+
c()
|
|
1921
|
+
], O.prototype, "label", 2);
|
|
1922
|
+
I([
|
|
1923
|
+
c()
|
|
1924
|
+
], O.prototype, "icon", 2);
|
|
1925
|
+
I([
|
|
1926
|
+
c()
|
|
1927
|
+
], O.prototype, "tag", 2);
|
|
1928
|
+
I([
|
|
1929
|
+
c()
|
|
1930
|
+
], O.prototype, "href", 2);
|
|
1931
|
+
I([
|
|
1932
|
+
c()
|
|
1933
|
+
], O.prototype, "target", 2);
|
|
1934
|
+
O = I([
|
|
1941
1935
|
T({ tag: "sps-nav-tab" })
|
|
1942
|
-
],
|
|
1943
|
-
var
|
|
1944
|
-
for (var i = n > 1 ? void 0 : n ?
|
|
1945
|
-
(
|
|
1946
|
-
return n && i &&
|
|
1947
|
-
}
|
|
1948
|
-
let
|
|
1936
|
+
], O);
|
|
1937
|
+
var is = Object.defineProperty, rs = Object.getOwnPropertyDescriptor, Qe = (e, t, s, n) => {
|
|
1938
|
+
for (var i = n > 1 ? void 0 : n ? rs(t, s) : t, r = e.length - 1, o; r >= 0; r--)
|
|
1939
|
+
(o = e[r]) && (i = (n ? o(t, s, i) : o(i)) || i);
|
|
1940
|
+
return n && i && is(t, s, i), i;
|
|
1941
|
+
};
|
|
1942
|
+
let H = class extends HTMLElement {
|
|
1949
1943
|
constructor() {
|
|
1950
|
-
super(...arguments);
|
|
1951
|
-
a(this, "content", []);
|
|
1944
|
+
super(...arguments), this.content = [];
|
|
1952
1945
|
}
|
|
1953
1946
|
render() {
|
|
1954
|
-
return /* @__PURE__ */
|
|
1947
|
+
return /* @__PURE__ */ a("nav", { className: "sps-tabbed-nav" }, this.content);
|
|
1955
1948
|
}
|
|
1956
|
-
}
|
|
1957
|
-
|
|
1958
|
-
|
|
1959
|
-
|
|
1960
|
-
|
|
1949
|
+
};
|
|
1950
|
+
H.displayName = "sps-nav-tab-set";
|
|
1951
|
+
H.props = {};
|
|
1952
|
+
Qe([
|
|
1953
|
+
fe()
|
|
1954
|
+
], H.prototype, "content", 2);
|
|
1955
|
+
H = Qe([
|
|
1961
1956
|
T({ tag: "sps-nav-tab-set" })
|
|
1962
|
-
],
|
|
1963
|
-
const
|
|
1957
|
+
], H);
|
|
1958
|
+
const vs = {
|
|
1964
1959
|
basic: {
|
|
1965
1960
|
label: "Basic Navigation Tabs",
|
|
1966
|
-
description:
|
|
1961
|
+
description: l`
|
|
1967
1962
|
<p>Navigation tabs native web component</p>
|
|
1968
1963
|
`,
|
|
1969
1964
|
examples: {
|
|
1970
1965
|
basic: {
|
|
1971
|
-
react:
|
|
1966
|
+
react: l`
|
|
1972
1967
|
function DemoComponent() {
|
|
1973
1968
|
const tabs = [
|
|
1974
1969
|
{ label: "Tab A", icon: "chart-line" },
|
|
@@ -1998,36 +1993,26 @@ const As = {
|
|
|
1998
1993
|
}
|
|
1999
1994
|
}
|
|
2000
1995
|
};
|
|
2001
|
-
var
|
|
2002
|
-
for (var i = n > 1 ? void 0 : n ?
|
|
2003
|
-
(
|
|
2004
|
-
return n && i &&
|
|
2005
|
-
},
|
|
1996
|
+
var as = Object.defineProperty, os = Object.getOwnPropertyDescriptor, P = (e, t, s, n) => {
|
|
1997
|
+
for (var i = n > 1 ? void 0 : n ? os(t, s) : t, r = e.length - 1, o; r >= 0; r--)
|
|
1998
|
+
(o = e[r]) && (i = (n ? o(t, s, i) : o(i)) || i);
|
|
1999
|
+
return n && i && as(t, s, i), i;
|
|
2000
|
+
}, ls = /* @__PURE__ */ ((e) => (e.FIT = "fit", e.FILL = "fill", e))(ls || {});
|
|
2006
2001
|
const F = "sps-photo";
|
|
2007
|
-
|
|
2008
|
-
let A = (Z = class extends HTMLElement {
|
|
2002
|
+
let y = class extends HTMLElement {
|
|
2009
2003
|
constructor() {
|
|
2010
|
-
super(...arguments);
|
|
2011
|
-
a(this, "src");
|
|
2012
|
-
a(this, "altText");
|
|
2013
|
-
a(this, "mode", "fill");
|
|
2014
|
-
a(this, "placeholderIcon");
|
|
2015
|
-
a(this, "width");
|
|
2016
|
-
a(this, "fitWidth");
|
|
2017
|
-
a(this, "imageInternal");
|
|
2018
|
-
a(this, "waitForWidthInterval");
|
|
2019
|
-
a(this, "waitForImgHeightInterval");
|
|
2004
|
+
super(...arguments), this.mode = "fill";
|
|
2020
2005
|
}
|
|
2021
2006
|
get image() {
|
|
2022
2007
|
return this.imageInternal;
|
|
2023
2008
|
}
|
|
2024
|
-
set image(
|
|
2025
|
-
this.imageInternal =
|
|
2026
|
-
const
|
|
2027
|
-
if (
|
|
2009
|
+
set image(e) {
|
|
2010
|
+
this.imageInternal = e, e && (this.waitForImgHeightInterval && window.clearInterval(this.waitForImgHeightInterval), this.waitForImgHeightInterval = window.setInterval(() => {
|
|
2011
|
+
const t = e.getBoundingClientRect();
|
|
2012
|
+
if (t.height) {
|
|
2028
2013
|
window.clearInterval(this.waitForImgHeightInterval), delete this.waitForImgHeightInterval;
|
|
2029
|
-
let
|
|
2030
|
-
|
|
2014
|
+
let s = !0;
|
|
2015
|
+
s = t.width / t.height > 1, this.fitWidth = s === (this.mode === "fit");
|
|
2031
2016
|
}
|
|
2032
2017
|
}, 1e3 / 60));
|
|
2033
2018
|
}
|
|
@@ -2038,7 +2023,7 @@ let A = (Z = class extends HTMLElement {
|
|
|
2038
2023
|
this.placeholderIcon && `${F}--placeholder`
|
|
2039
2024
|
];
|
|
2040
2025
|
}
|
|
2041
|
-
get [
|
|
2026
|
+
get [ae]() {
|
|
2042
2027
|
return {
|
|
2043
2028
|
fontSize: `${this.width * 0.05}rem`,
|
|
2044
2029
|
width: `${this.width}rem`,
|
|
@@ -2047,56 +2032,58 @@ let A = (Z = class extends HTMLElement {
|
|
|
2047
2032
|
}
|
|
2048
2033
|
connectedCallback() {
|
|
2049
2034
|
this.waitForWidthInterval = window.setInterval(() => {
|
|
2050
|
-
const
|
|
2051
|
-
|
|
2035
|
+
const e = this.getBoundingClientRect();
|
|
2036
|
+
e.width && (this.setWidth(e.width), window.clearInterval(this.waitForWidthInterval), delete this.waitForWidthInterval);
|
|
2052
2037
|
}, 1e3 / 60);
|
|
2053
2038
|
}
|
|
2054
2039
|
disconnectedCallback() {
|
|
2055
2040
|
this.waitForWidthInterval && window.clearInterval(this.waitForWidthInterval), this.waitForImgHeightInterval && window.clearInterval(this.waitForImgHeightInterval);
|
|
2056
2041
|
}
|
|
2057
2042
|
render() {
|
|
2058
|
-
return this.src ? this.width ? /* @__PURE__ */
|
|
2043
|
+
return this.src ? this.width ? /* @__PURE__ */ a("img", { src: this.src, alt: this.altText }) : /* @__PURE__ */ a("span", null) : /* @__PURE__ */ a("i", { className: `sps-icon sps-icon-${this.placeholderIcon}` });
|
|
2059
2044
|
}
|
|
2060
|
-
setWidth(
|
|
2061
|
-
if (
|
|
2062
|
-
const
|
|
2063
|
-
this.width =
|
|
2045
|
+
setWidth(e) {
|
|
2046
|
+
if (e && !this.width) {
|
|
2047
|
+
const t = document.body.parentElement.style.fontSize || "16px", s = Number(t.substr(0, t.length - 2));
|
|
2048
|
+
this.width = e / s;
|
|
2064
2049
|
}
|
|
2065
2050
|
}
|
|
2066
|
-
}
|
|
2051
|
+
};
|
|
2052
|
+
y.displayName = F;
|
|
2053
|
+
y.props = {
|
|
2067
2054
|
src: "string",
|
|
2068
2055
|
altText: "string",
|
|
2069
2056
|
mode: "SpsPhotoDisplayMode",
|
|
2070
2057
|
placeholderIcon: "SpsIcon"
|
|
2071
|
-
}
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
],
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
],
|
|
2078
|
-
|
|
2079
|
-
|
|
2080
|
-
],
|
|
2081
|
-
|
|
2082
|
-
|
|
2083
|
-
],
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
],
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
],
|
|
2090
|
-
|
|
2091
|
-
|
|
2092
|
-
],
|
|
2093
|
-
|
|
2058
|
+
};
|
|
2059
|
+
P([
|
|
2060
|
+
c()
|
|
2061
|
+
], y.prototype, "src", 2);
|
|
2062
|
+
P([
|
|
2063
|
+
c()
|
|
2064
|
+
], y.prototype, "altText", 2);
|
|
2065
|
+
P([
|
|
2066
|
+
c()
|
|
2067
|
+
], y.prototype, "mode", 2);
|
|
2068
|
+
P([
|
|
2069
|
+
c()
|
|
2070
|
+
], y.prototype, "placeholderIcon", 2);
|
|
2071
|
+
P([
|
|
2072
|
+
Xe()
|
|
2073
|
+
], y.prototype, "width", 2);
|
|
2074
|
+
P([
|
|
2075
|
+
Xe()
|
|
2076
|
+
], y.prototype, "fitWidth", 2);
|
|
2077
|
+
P([
|
|
2078
|
+
me("img", { refresh: !0 })
|
|
2079
|
+
], y.prototype, "image", 1);
|
|
2080
|
+
y = P([
|
|
2094
2081
|
T({ tag: F })
|
|
2095
|
-
],
|
|
2096
|
-
const
|
|
2082
|
+
], y);
|
|
2083
|
+
const bs = {
|
|
2097
2084
|
sizing: {
|
|
2098
2085
|
label: "Sizing",
|
|
2099
|
-
description:
|
|
2086
|
+
description: l`
|
|
2100
2087
|
<p>
|
|
2101
2088
|
Photos are block elements, so a photo fills its container's width unless
|
|
2102
2089
|
an explicit width is set. It is always a 4:3 aspect ratio. In this example,
|
|
@@ -2106,7 +2093,7 @@ const Ds = {
|
|
|
2106
2093
|
`,
|
|
2107
2094
|
examples: {
|
|
2108
2095
|
basic: {
|
|
2109
|
-
jsx:
|
|
2096
|
+
jsx: l`
|
|
2110
2097
|
<div className="sfg-row">
|
|
2111
2098
|
<div className="sfg-col-2">
|
|
2112
2099
|
<sps-card>
|
|
@@ -2130,7 +2117,7 @@ const Ds = {
|
|
|
2130
2117
|
},
|
|
2131
2118
|
displayMode: {
|
|
2132
2119
|
label: "Fill vs. Fit",
|
|
2133
|
-
description:
|
|
2120
|
+
description: l`
|
|
2134
2121
|
<p>
|
|
2135
2122
|
There are two display modes available:
|
|
2136
2123
|
<ul>
|
|
@@ -2142,7 +2129,7 @@ const Ds = {
|
|
|
2142
2129
|
examples: {
|
|
2143
2130
|
landscape: {
|
|
2144
2131
|
description: "<p>Landscape oriented photo (container outline added for illustrative purposes)</p>",
|
|
2145
|
-
jsx:
|
|
2132
|
+
jsx: l`
|
|
2146
2133
|
<div className="sfg-row">
|
|
2147
2134
|
<div className="sfg-col-4">
|
|
2148
2135
|
<sps-photo src="assets/images/photo-landscape.jpg" mode="fill"></sps-photo>
|
|
@@ -2155,7 +2142,7 @@ const Ds = {
|
|
|
2155
2142
|
},
|
|
2156
2143
|
portrait: {
|
|
2157
2144
|
description: "<p>Portrait oriented photo (container outline added for illustrative purposes)</p>",
|
|
2158
|
-
jsx:
|
|
2145
|
+
jsx: l`
|
|
2159
2146
|
<div className="sfg-row">
|
|
2160
2147
|
<div className="sfg-col-4">
|
|
2161
2148
|
<sps-photo src="assets/images/photo-portrait.jpg" mode="fill"></sps-photo>
|
|
@@ -2170,7 +2157,7 @@ const Ds = {
|
|
|
2170
2157
|
},
|
|
2171
2158
|
placeholder: {
|
|
2172
2159
|
label: "Placeholders",
|
|
2173
|
-
description:
|
|
2160
|
+
description: l`
|
|
2174
2161
|
<p>
|
|
2175
2162
|
When an image is not provided for a particular use case (such as a user avatar,
|
|
2176
2163
|
a company photo, item image, etc.), a placeholder should be shown in its place.
|
|
@@ -2182,7 +2169,7 @@ const Ds = {
|
|
|
2182
2169
|
examples: {
|
|
2183
2170
|
general: {
|
|
2184
2171
|
description: "<p>General Photo</p>",
|
|
2185
|
-
jsx:
|
|
2172
|
+
jsx: l`
|
|
2186
2173
|
<div className="sfg-row">
|
|
2187
2174
|
<div className="sfg-col-3">
|
|
2188
2175
|
<sps-photo placeholderIcon="photo"></sps-photo>
|
|
@@ -2192,7 +2179,7 @@ const Ds = {
|
|
|
2192
2179
|
},
|
|
2193
2180
|
photoAlt: {
|
|
2194
2181
|
description: "<p>Photo Alt</p>",
|
|
2195
|
-
jsx:
|
|
2182
|
+
jsx: l`
|
|
2196
2183
|
<div className="sfg-row">
|
|
2197
2184
|
<div className="sfg-col-3">
|
|
2198
2185
|
<sps-photo placeholderIcon="camera"></sps-photo>
|
|
@@ -2202,7 +2189,7 @@ const Ds = {
|
|
|
2202
2189
|
},
|
|
2203
2190
|
user: {
|
|
2204
2191
|
description: "<p>User / Single Person</p>",
|
|
2205
|
-
jsx:
|
|
2192
|
+
jsx: l`
|
|
2206
2193
|
<div className="sfg-row">
|
|
2207
2194
|
<div className="sfg-col-3">
|
|
2208
2195
|
<sps-photo placeholderIcon="user"></sps-photo>
|
|
@@ -2212,7 +2199,7 @@ const Ds = {
|
|
|
2212
2199
|
},
|
|
2213
2200
|
group: {
|
|
2214
2201
|
description: "<p>Group / Multiple People</p>",
|
|
2215
|
-
jsx:
|
|
2202
|
+
jsx: l`
|
|
2216
2203
|
<div className="sfg-row">
|
|
2217
2204
|
<div className="sfg-col-3">
|
|
2218
2205
|
<sps-photo placeholderIcon="group"></sps-photo>
|
|
@@ -2222,7 +2209,7 @@ const Ds = {
|
|
|
2222
2209
|
},
|
|
2223
2210
|
company: {
|
|
2224
2211
|
description: "<p>Company / Building</p>",
|
|
2225
|
-
jsx:
|
|
2212
|
+
jsx: l`
|
|
2226
2213
|
<div className="sfg-row">
|
|
2227
2214
|
<div className="sfg-col-3">
|
|
2228
2215
|
<sps-photo placeholderIcon="building"></sps-photo>
|
|
@@ -2234,32 +2221,32 @@ const Ds = {
|
|
|
2234
2221
|
}
|
|
2235
2222
|
};
|
|
2236
2223
|
export {
|
|
2237
|
-
|
|
2224
|
+
ye as AttrBindings,
|
|
2238
2225
|
j as ClassBindings,
|
|
2239
2226
|
T as Component,
|
|
2240
|
-
|
|
2241
|
-
|
|
2242
|
-
|
|
2243
|
-
|
|
2244
|
-
|
|
2245
|
-
|
|
2246
|
-
|
|
2247
|
-
|
|
2248
|
-
|
|
2249
|
-
|
|
2250
|
-
|
|
2251
|
-
|
|
2252
|
-
|
|
2253
|
-
|
|
2254
|
-
|
|
2255
|
-
|
|
2256
|
-
|
|
2257
|
-
|
|
2258
|
-
|
|
2259
|
-
|
|
2260
|
-
|
|
2261
|
-
|
|
2262
|
-
|
|
2263
|
-
|
|
2264
|
-
|
|
2227
|
+
fe as Content,
|
|
2228
|
+
ge as EventDispatcher,
|
|
2229
|
+
M as EventListener,
|
|
2230
|
+
ds as MANIFEST,
|
|
2231
|
+
Ke as MIMEType,
|
|
2232
|
+
c as Prop,
|
|
2233
|
+
me as QuerySelector,
|
|
2234
|
+
Qt as QuerySelectorAll,
|
|
2235
|
+
u as SpsFileUploadComponent,
|
|
2236
|
+
gs as SpsFileUploadExamples,
|
|
2237
|
+
N as SpsInsightCardComponent,
|
|
2238
|
+
ms as SpsInsightCardExamples,
|
|
2239
|
+
R as SpsInsightsComponent,
|
|
2240
|
+
O as SpsNavTabComponent,
|
|
2241
|
+
H as SpsNavTabSetComponent,
|
|
2242
|
+
vs as SpsNavTabsExamples,
|
|
2243
|
+
y as SpsPhotoComponent,
|
|
2244
|
+
ls as SpsPhotoDisplayMode,
|
|
2245
|
+
bs as SpsPhotoExamples,
|
|
2246
|
+
ae as StyleBindings,
|
|
2247
|
+
Xe as Watch,
|
|
2248
|
+
a as h,
|
|
2249
|
+
fs as namespaceOverrideRegistrar,
|
|
2250
|
+
us as register,
|
|
2251
|
+
hs as webComponentsUseI18n
|
|
2265
2252
|
};
|