@albi_scando/as-design-system-lib 1.7.2 → 1.7.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
const
|
|
2
|
-
class
|
|
1
|
+
const yt = "as-design-system-lib";
|
|
2
|
+
class ft {
|
|
3
3
|
/**
|
|
4
4
|
* Creates an instance of WebComponentsRegistry.
|
|
5
5
|
* Registers all custom elements provided in the map of components.
|
|
@@ -36,13 +36,100 @@ class vt {
|
|
|
36
36
|
customElements.get(t) === void 0 ? (customElements.define(t, e), console.log(`Registered Web Component: ${t}`)) : console.warn(`Web Component "${t}" is already registered.`);
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
|
-
const
|
|
39
|
+
const E = {
|
|
40
40
|
CONFIRMATION_DIALOG_CONFIRM: "confirmation-dialog-confirm",
|
|
41
41
|
CONFIRMATION_DIALOG_UNDO: "confirmation-dialog-undo"
|
|
42
|
-
},
|
|
42
|
+
}, f = {
|
|
43
|
+
FERRARI: "Ferrari theme inspired by the iconic red color of Ferrari cars.",
|
|
44
|
+
LIGHT: "Light theme with a clean and minimalistic design.",
|
|
45
|
+
LIGHT_BLUE: "Light Blue theme with a refreshing and calm appearance.",
|
|
46
|
+
DARK: "Dark theme with a sleek and modern look.",
|
|
47
|
+
DARK_PURPLE: "Dark Purple theme with a luxurious and elegant feel."
|
|
48
|
+
}, _ = {
|
|
49
|
+
FERRARI: "🏎️",
|
|
50
|
+
LIGHT: "☀️",
|
|
51
|
+
LIGHT_BLUE: "🫧",
|
|
52
|
+
DARK: "🌙",
|
|
53
|
+
DARK_PURPLE: "🟣"
|
|
54
|
+
}, A = {
|
|
55
|
+
FERRARI: "Ferrari",
|
|
56
|
+
LIGHT: "Light",
|
|
57
|
+
LIGHT_BLUE: "Light Blue",
|
|
58
|
+
DARK: "Dark",
|
|
59
|
+
DARK_PURPLE: "Dark Purple"
|
|
60
|
+
}, S = {
|
|
61
|
+
FERRARI: "ferrari",
|
|
62
|
+
LIGHT: "light",
|
|
63
|
+
LIGHT_BLUE: "light-blue",
|
|
64
|
+
DARK: "dark",
|
|
65
|
+
DARK_PURPLE: "dark-purple"
|
|
66
|
+
}, c = {
|
|
67
|
+
FERRARI: "ferrari",
|
|
68
|
+
LIGHT: "light",
|
|
69
|
+
LIGHT_BLUE: "light-blue",
|
|
70
|
+
DARK: "dark",
|
|
71
|
+
DARK_PURPLE: "dark-purple"
|
|
72
|
+
}, G = /* @__PURE__ */ new Map([
|
|
73
|
+
[
|
|
74
|
+
c.DARK,
|
|
75
|
+
{
|
|
76
|
+
description: f.DARK,
|
|
77
|
+
icon: _.DARK,
|
|
78
|
+
id: c.DARK,
|
|
79
|
+
name: A.DARK,
|
|
80
|
+
value: S.DARK
|
|
81
|
+
}
|
|
82
|
+
],
|
|
83
|
+
[
|
|
84
|
+
c.DARK_PURPLE,
|
|
85
|
+
{
|
|
86
|
+
description: f.DARK_PURPLE,
|
|
87
|
+
icon: _.DARK_PURPLE,
|
|
88
|
+
id: c.DARK_PURPLE,
|
|
89
|
+
name: A.DARK_PURPLE,
|
|
90
|
+
value: S.DARK_PURPLE
|
|
91
|
+
}
|
|
92
|
+
],
|
|
93
|
+
[
|
|
94
|
+
c.FERRARI,
|
|
95
|
+
{
|
|
96
|
+
description: f.FERRARI,
|
|
97
|
+
icon: _.FERRARI,
|
|
98
|
+
id: c.FERRARI,
|
|
99
|
+
name: A.FERRARI,
|
|
100
|
+
value: S.FERRARI
|
|
101
|
+
}
|
|
102
|
+
],
|
|
103
|
+
[
|
|
104
|
+
c.LIGHT,
|
|
105
|
+
{
|
|
106
|
+
description: f.LIGHT,
|
|
107
|
+
icon: _.LIGHT,
|
|
108
|
+
id: c.LIGHT,
|
|
109
|
+
name: A.LIGHT,
|
|
110
|
+
value: S.LIGHT
|
|
111
|
+
}
|
|
112
|
+
],
|
|
113
|
+
[
|
|
114
|
+
c.LIGHT_BLUE,
|
|
115
|
+
{
|
|
116
|
+
description: f.LIGHT_BLUE,
|
|
117
|
+
icon: _.LIGHT_BLUE,
|
|
118
|
+
id: c.LIGHT_BLUE,
|
|
119
|
+
name: A.LIGHT_BLUE,
|
|
120
|
+
value: S.LIGHT_BLUE
|
|
121
|
+
}
|
|
122
|
+
]
|
|
123
|
+
]), _t = (m) => {
|
|
124
|
+
F();
|
|
125
|
+
const t = G.get(m)?.value;
|
|
126
|
+
t !== void 0 && document.body.classList.add(t);
|
|
127
|
+
}, F = () => {
|
|
128
|
+
document.body.classList.remove(...Object.values(c));
|
|
129
|
+
}, z = "base-button", o = "", g = {
|
|
43
130
|
SHOW_MODAL: "show-modal",
|
|
44
131
|
CLOSE: "close"
|
|
45
|
-
},
|
|
132
|
+
}, B = {
|
|
46
133
|
CUSTOM_CROSSHAIR: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
|
47
134
|
<!-- White border (underneath) -->
|
|
48
135
|
<line x1="16" y1="2" x2="16" y2="30" stroke="white" stroke-width="5"/>
|
|
@@ -53,29 +140,19 @@ const _ = {
|
|
|
53
140
|
<line x1="2" y1="16" x2="30" y2="16" stroke="black" stroke-width="2"/>
|
|
54
141
|
</svg>`
|
|
55
142
|
};
|
|
56
|
-
`${btoa(
|
|
57
|
-
const
|
|
143
|
+
`${btoa(B.CUSTOM_CROSSHAIR)}`;
|
|
144
|
+
const R = {
|
|
58
145
|
ANY: "any",
|
|
59
146
|
NONE: "none"
|
|
60
|
-
},
|
|
147
|
+
}, O = {
|
|
61
148
|
KEY_DOWN: "keydown"
|
|
62
|
-
},
|
|
149
|
+
}, b = {
|
|
63
150
|
CLICK: "click"
|
|
64
|
-
},
|
|
65
|
-
FERRARI: "ferrari",
|
|
66
|
-
LIGHT: "light",
|
|
67
|
-
LIGHT_BLUE: "light-blue",
|
|
68
|
-
DARK: "dark",
|
|
69
|
-
DARK_PURPLE: "dark-purple"
|
|
70
|
-
}, pt = (y) => {
|
|
71
|
-
j(), document.body.classList.add(y);
|
|
72
|
-
}, j = () => {
|
|
73
|
-
document.body.classList.remove(...Object.values(P));
|
|
74
|
-
}, D = "base-button", V = `<button part="button">
|
|
151
|
+
}, j = `<button part="button">
|
|
75
152
|
<slot></slot>
|
|
76
153
|
</button>
|
|
77
|
-
`,
|
|
78
|
-
|
|
154
|
+
`, V = "*{box-sizing:border-box}:where(button,input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::file-selector-button{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);font-family:var(--font-family-base);letter-spacing:var(--letter-spacing-normal);line-height:var(--line-height-normal);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);display:inline-flex;justify-content:center;align-items:center;text-align:center;gap:var(--gap-sm);background:var(--color-bg-secondary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-primary);border-radius:var(--border-radius-lg);transition:all var(--transition-base)}:where(button,input[type=button],input[type=submit],input[type=reset])>.material-symbols-outlined{font-size:var(--font-size-xl);font-family:Material Symbols Outlined;line-height:1}:where(button,input[type=button],input[type=submit],input[type=reset])[disabled]{opacity:.3;cursor:not-allowed}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):hover),:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):active){background:var(--color-hover-bg-secondary);border-color:var(--color-hover-border-secondary)}:where(input[type=file]){inline-size:100%;max-inline-size:max-content;background-color:var(--color-bg-secondary)}", N = new CSSStyleSheet();
|
|
155
|
+
N.replaceSync(V);
|
|
79
156
|
class i extends HTMLElement {
|
|
80
157
|
/**
|
|
81
158
|
* @see HTMLButtonElement.autofocus
|
|
@@ -114,7 +191,7 @@ class i extends HTMLElement {
|
|
|
114
191
|
* @ignore
|
|
115
192
|
*/
|
|
116
193
|
constructor() {
|
|
117
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(
|
|
194
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(N);
|
|
118
195
|
}
|
|
119
196
|
/**
|
|
120
197
|
* Specifies which attributes should be observed for changes.
|
|
@@ -215,7 +292,7 @@ class i extends HTMLElement {
|
|
|
215
292
|
* Syncs host attributes to the internal button element.
|
|
216
293
|
*/
|
|
217
294
|
_render() {
|
|
218
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
295
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = j, this._syncAttributes());
|
|
219
296
|
}
|
|
220
297
|
/**
|
|
221
298
|
* Adds event listeners to the component.
|
|
@@ -223,7 +300,7 @@ class i extends HTMLElement {
|
|
|
223
300
|
* @returns {void}
|
|
224
301
|
*/
|
|
225
302
|
_addEventListeners() {
|
|
226
|
-
this.buttonElement.addEventListener(
|
|
303
|
+
this.buttonElement.addEventListener(b.CLICK, this._handleClick);
|
|
227
304
|
}
|
|
228
305
|
/**
|
|
229
306
|
* Removes event listeners from the component.
|
|
@@ -231,7 +308,7 @@ class i extends HTMLElement {
|
|
|
231
308
|
* @returns {void}
|
|
232
309
|
*/
|
|
233
310
|
_removeEventListeners() {
|
|
234
|
-
this.buttonElement.addEventListener(
|
|
311
|
+
this.buttonElement.addEventListener(b.CLICK, this._handleClick);
|
|
235
312
|
}
|
|
236
313
|
/**
|
|
237
314
|
* Handles the internal button click event and executes the configured command.
|
|
@@ -263,10 +340,10 @@ class i extends HTMLElement {
|
|
|
263
340
|
return;
|
|
264
341
|
const e = t;
|
|
265
342
|
switch (this.command) {
|
|
266
|
-
case
|
|
343
|
+
case g.SHOW_MODAL:
|
|
267
344
|
e.showModal?.();
|
|
268
345
|
break;
|
|
269
|
-
case
|
|
346
|
+
case g.CLOSE:
|
|
270
347
|
e.close?.();
|
|
271
348
|
break;
|
|
272
349
|
}
|
|
@@ -352,23 +429,23 @@ class i extends HTMLElement {
|
|
|
352
429
|
});
|
|
353
430
|
}
|
|
354
431
|
}
|
|
355
|
-
const
|
|
432
|
+
const At = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
356
433
|
__proto__: null,
|
|
357
434
|
BaseButtonComponent: i,
|
|
358
|
-
selector:
|
|
359
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
435
|
+
selector: z
|
|
436
|
+
}, Symbol.toStringTag, { value: "Module" })), q = `<button title="Undo" part="button">
|
|
360
437
|
<span class="material-symbols-outlined">undo</span>
|
|
361
438
|
<span>Undo</span>
|
|
362
439
|
</button>
|
|
363
|
-
`,
|
|
364
|
-
|
|
365
|
-
class
|
|
440
|
+
`, W = "*{box-sizing:border-box}button[part=button]{background:var(--color-warning);font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{filter:brightness(1.2)}", T = new CSSStyleSheet();
|
|
441
|
+
T.replaceSync(W);
|
|
442
|
+
class Y extends i {
|
|
366
443
|
/**
|
|
367
444
|
* @constructor
|
|
368
445
|
* @ignore
|
|
369
446
|
*/
|
|
370
447
|
constructor() {
|
|
371
|
-
super(), this.shadowRoot?.adoptedStyleSheets.push(
|
|
448
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push(T), this.command = g.CLOSE, this.title = "Undo";
|
|
372
449
|
}
|
|
373
450
|
/**
|
|
374
451
|
* Specifies which attributes should be observed for changes.
|
|
@@ -386,7 +463,7 @@ class U extends i {
|
|
|
386
463
|
* Renders the component's HTML structure.
|
|
387
464
|
*/
|
|
388
465
|
_render() {
|
|
389
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
466
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = q, this._syncAttributes());
|
|
390
467
|
}
|
|
391
468
|
/**
|
|
392
469
|
* It finds the closest parent dialog and
|
|
@@ -401,23 +478,23 @@ class U extends i {
|
|
|
401
478
|
e !== null && (this.commandfor = e.id);
|
|
402
479
|
}
|
|
403
480
|
}
|
|
404
|
-
const
|
|
481
|
+
const x = "undo-button", St = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
405
482
|
__proto__: null,
|
|
406
|
-
UndoButtonComponent:
|
|
407
|
-
selector:
|
|
408
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
483
|
+
UndoButtonComponent: Y,
|
|
484
|
+
selector: x
|
|
485
|
+
}, Symbol.toStringTag, { value: "Module" })), X = `<button title="Confirm" part="button">
|
|
409
486
|
<span class="material-symbols-outlined">check</span>
|
|
410
487
|
<span>Confirm</span>
|
|
411
488
|
</button>
|
|
412
|
-
`,
|
|
413
|
-
|
|
414
|
-
class
|
|
489
|
+
`, J = "*{box-sizing:border-box}button[part=button]{background:var(--color-success);font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{filter:brightness(1.2)}", C = new CSSStyleSheet();
|
|
490
|
+
C.replaceSync(J);
|
|
491
|
+
class Q extends i {
|
|
415
492
|
/**
|
|
416
493
|
* @constructor
|
|
417
494
|
* @ignore
|
|
418
495
|
*/
|
|
419
496
|
constructor() {
|
|
420
|
-
super(), this.shadowRoot?.adoptedStyleSheets.push(
|
|
497
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push(C), this.command = g.CLOSE, this.title = "Confirm";
|
|
421
498
|
}
|
|
422
499
|
/**
|
|
423
500
|
* Specifies which attributes should be observed for changes.
|
|
@@ -435,7 +512,7 @@ class W extends i {
|
|
|
435
512
|
* Renders the component's HTML structure.
|
|
436
513
|
*/
|
|
437
514
|
_render() {
|
|
438
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
515
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = X, this._syncAttributes());
|
|
439
516
|
}
|
|
440
517
|
/**
|
|
441
518
|
* It finds the closest parent dialog and
|
|
@@ -450,16 +527,16 @@ class W extends i {
|
|
|
450
527
|
e !== null && (this.commandfor = e.id);
|
|
451
528
|
}
|
|
452
529
|
}
|
|
453
|
-
const
|
|
530
|
+
const I = "confirm-button", Lt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
454
531
|
__proto__: null,
|
|
455
|
-
ConfirmButtonComponent:
|
|
456
|
-
selector:
|
|
457
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
532
|
+
ConfirmButtonComponent: Q,
|
|
533
|
+
selector: I
|
|
534
|
+
}, Symbol.toStringTag, { value: "Module" })), Z = `<button part="button">
|
|
458
535
|
<span class="material-symbols-outlined">chevron_left</span>
|
|
459
536
|
</button>
|
|
460
|
-
`,
|
|
461
|
-
|
|
462
|
-
class
|
|
537
|
+
`, tt = "*{box-sizing:border-box}button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", M = new CSSStyleSheet();
|
|
538
|
+
M.replaceSync(tt);
|
|
539
|
+
class L extends i {
|
|
463
540
|
static _disabledAttribute = "disabled";
|
|
464
541
|
static _titleAttribute = "title";
|
|
465
542
|
/**
|
|
@@ -467,7 +544,7 @@ class m extends i {
|
|
|
467
544
|
* @ignore
|
|
468
545
|
*/
|
|
469
546
|
constructor() {
|
|
470
|
-
super(), this.shadowRoot?.adoptedStyleSheets.push(
|
|
547
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push(M), this.command = g.CLOSE;
|
|
471
548
|
}
|
|
472
549
|
/**
|
|
473
550
|
* Specifies which attributes should be observed for changes.
|
|
@@ -486,13 +563,13 @@ class m extends i {
|
|
|
486
563
|
* Updates the title visibility based on disabled state.
|
|
487
564
|
*/
|
|
488
565
|
attributeChangedCallback(t, e, s) {
|
|
489
|
-
super.attributeChangedCallback(t, e, s), t ===
|
|
566
|
+
super.attributeChangedCallback(t, e, s), t === L._disabledAttribute && this._updateTitle();
|
|
490
567
|
}
|
|
491
568
|
/**
|
|
492
569
|
* Renders the component's HTML structure.
|
|
493
570
|
*/
|
|
494
571
|
_render() {
|
|
495
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
572
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = Z, this._syncAttributes());
|
|
496
573
|
}
|
|
497
574
|
/**
|
|
498
575
|
* Updates the title attribute based on disabled state.
|
|
@@ -502,19 +579,19 @@ class m extends i {
|
|
|
502
579
|
const t = this.shadowRoot?.querySelector(
|
|
503
580
|
"button"
|
|
504
581
|
);
|
|
505
|
-
t !== null && (this.disabled ? t.removeAttribute(
|
|
582
|
+
t !== null && (this.disabled ? t.removeAttribute(L._titleAttribute) : t.setAttribute(L._titleAttribute, "Previous"));
|
|
506
583
|
}
|
|
507
584
|
}
|
|
508
|
-
const
|
|
585
|
+
const et = "previous-button", wt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
509
586
|
__proto__: null,
|
|
510
|
-
PreviousButtonComponent:
|
|
511
|
-
selector:
|
|
512
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
587
|
+
PreviousButtonComponent: L,
|
|
588
|
+
selector: et
|
|
589
|
+
}, Symbol.toStringTag, { value: "Module" })), it = `<button part="button">
|
|
513
590
|
<span class="material-symbols-outlined">chevron_right</span>
|
|
514
591
|
</button>
|
|
515
|
-
`,
|
|
516
|
-
|
|
517
|
-
class
|
|
592
|
+
`, st = "*{box-sizing:border-box}button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", H = new CSSStyleSheet();
|
|
593
|
+
H.replaceSync(st);
|
|
594
|
+
class w extends i {
|
|
518
595
|
static _disabledAttribute = "disabled";
|
|
519
596
|
static _titleAttribute = "title";
|
|
520
597
|
/**
|
|
@@ -522,7 +599,7 @@ class f extends i {
|
|
|
522
599
|
* @ignore
|
|
523
600
|
*/
|
|
524
601
|
constructor() {
|
|
525
|
-
super(), this.shadowRoot?.adoptedStyleSheets.push(
|
|
602
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push(H), this.command = g.CLOSE;
|
|
526
603
|
}
|
|
527
604
|
/**
|
|
528
605
|
* Specifies which attributes should be observed for changes.
|
|
@@ -541,13 +618,13 @@ class f extends i {
|
|
|
541
618
|
* Updates the title visibility based on disabled state.
|
|
542
619
|
*/
|
|
543
620
|
attributeChangedCallback(t, e, s) {
|
|
544
|
-
super.attributeChangedCallback(t, e, s), t ===
|
|
621
|
+
super.attributeChangedCallback(t, e, s), t === w._disabledAttribute && this._updateTitle();
|
|
545
622
|
}
|
|
546
623
|
/**
|
|
547
624
|
* Renders the component's HTML structure.
|
|
548
625
|
*/
|
|
549
626
|
_render() {
|
|
550
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
627
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = it, this._syncAttributes());
|
|
551
628
|
}
|
|
552
629
|
/**
|
|
553
630
|
* Updates the title attribute based on disabled state.
|
|
@@ -557,19 +634,19 @@ class f extends i {
|
|
|
557
634
|
const t = this.shadowRoot?.querySelector(
|
|
558
635
|
"button"
|
|
559
636
|
);
|
|
560
|
-
t !== null && (this.disabled ? t.removeAttribute(
|
|
637
|
+
t !== null && (this.disabled ? t.removeAttribute(w._titleAttribute) : t.setAttribute(w._titleAttribute, "Next"));
|
|
561
638
|
}
|
|
562
639
|
}
|
|
563
|
-
const
|
|
640
|
+
const rt = "next-button", Et = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
564
641
|
__proto__: null,
|
|
565
|
-
NextButtonComponent:
|
|
566
|
-
selector:
|
|
567
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
642
|
+
NextButtonComponent: w,
|
|
643
|
+
selector: rt
|
|
644
|
+
}, Symbol.toStringTag, { value: "Module" })), nt = `<dialog part="dialog">
|
|
568
645
|
<slot></slot>
|
|
569
646
|
</dialog>
|
|
570
|
-
`,
|
|
571
|
-
|
|
572
|
-
class
|
|
647
|
+
`, ot = "*{box-sizing:border-box}dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-secondary);border-radius:var(--border-radius-xl);padding:var(--spacing-4);max-width:90vw;max-height:90vh;font-family:var(--font-family-base);line-height:var(--line-height-normal);font-size:var(--font-size-sm);box-shadow:var(--shadow-2xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:slideIn var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog.closing{animation:slideOut var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog::backdrop{background:var(--window-backdrop);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn var(--transition-base) ease-out forwards}dialog.closing::backdrop{animation:fadeOut var(--transition-base) ease-out forwards}@keyframes slideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes slideOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(-20px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}", P = new CSSStyleSheet();
|
|
648
|
+
P.replaceSync(ot);
|
|
649
|
+
class v extends HTMLElement {
|
|
573
650
|
/**
|
|
574
651
|
* @see HTMLDialogElement.closedBy
|
|
575
652
|
*/
|
|
@@ -578,31 +655,31 @@ class b extends HTMLElement {
|
|
|
578
655
|
* Defines how the dialog can be closed.
|
|
579
656
|
* @see DialogClosedBy
|
|
580
657
|
*/
|
|
581
|
-
_closedBy =
|
|
658
|
+
_closedBy = R.ANY;
|
|
582
659
|
/**
|
|
583
660
|
* @constructor
|
|
584
661
|
* @ignore
|
|
585
662
|
*/
|
|
586
663
|
constructor() {
|
|
587
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(
|
|
664
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(P);
|
|
588
665
|
}
|
|
589
666
|
/**
|
|
590
667
|
* Specifies which attributes should be observed for changes.
|
|
591
668
|
*/
|
|
592
669
|
static get observedAttributes() {
|
|
593
|
-
return [
|
|
670
|
+
return [v.closedByAttribute];
|
|
594
671
|
}
|
|
595
672
|
get dialogElement() {
|
|
596
673
|
return this.shadowRoot?.querySelector("dialog");
|
|
597
674
|
}
|
|
598
675
|
get command() {
|
|
599
|
-
return this.getAttribute(
|
|
676
|
+
return this.getAttribute(v.closedByAttribute) ?? R.ANY;
|
|
600
677
|
}
|
|
601
678
|
get closedBy() {
|
|
602
679
|
return this._closedBy;
|
|
603
680
|
}
|
|
604
681
|
set closedBy(t) {
|
|
605
|
-
this._closedBy = t, this.setAttribute(
|
|
682
|
+
this._closedBy = t, this.setAttribute(v.closedByAttribute, t);
|
|
606
683
|
}
|
|
607
684
|
/**
|
|
608
685
|
* Lifecycle
|
|
@@ -654,7 +731,7 @@ class b extends HTMLElement {
|
|
|
654
731
|
* @returns {void}
|
|
655
732
|
*/
|
|
656
733
|
_render() {
|
|
657
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
734
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = nt, this._syncAttributes());
|
|
658
735
|
}
|
|
659
736
|
/**
|
|
660
737
|
* Syncs a single attribute from host to dialog element.
|
|
@@ -673,7 +750,7 @@ class b extends HTMLElement {
|
|
|
673
750
|
* @returns {void}
|
|
674
751
|
*/
|
|
675
752
|
_syncAttributes() {
|
|
676
|
-
|
|
753
|
+
v.observedAttributes.forEach((t) => {
|
|
677
754
|
this._syncAttribute(t);
|
|
678
755
|
});
|
|
679
756
|
}
|
|
@@ -699,11 +776,11 @@ class b extends HTMLElement {
|
|
|
699
776
|
}, 300);
|
|
700
777
|
}
|
|
701
778
|
}
|
|
702
|
-
const
|
|
779
|
+
const at = "base-dialog", Rt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
703
780
|
__proto__: null,
|
|
704
|
-
BaseDialogComponent:
|
|
705
|
-
selector:
|
|
706
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
781
|
+
BaseDialogComponent: v,
|
|
782
|
+
selector: at
|
|
783
|
+
}, Symbol.toStringTag, { value: "Module" })), lt = `<dialog part="dialog">
|
|
707
784
|
<header part="header">
|
|
708
785
|
<h2></h2>
|
|
709
786
|
</header>
|
|
@@ -715,7 +792,7 @@ const it = "base-dialog", At = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Obj
|
|
|
715
792
|
<undo-button></undo-button>
|
|
716
793
|
</footer>
|
|
717
794
|
</dialog>
|
|
718
|
-
`,
|
|
795
|
+
`, dt = "*{box-sizing:border-box}dialog header[part=header] h2{margin:0;padding:0}dialog div[part=body] p{margin:0;padding:0}dialog footer[part=footer]{display:flex;gap:var(--gap-md);justify-content:flex-end}", ut = `<dialog part="dialog">
|
|
719
796
|
<header part="header">
|
|
720
797
|
<slot name="header"></slot>
|
|
721
798
|
</header>
|
|
@@ -726,9 +803,9 @@ const it = "base-dialog", At = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Obj
|
|
|
726
803
|
<slot name="footer"></slot>
|
|
727
804
|
</footer>
|
|
728
805
|
</dialog>
|
|
729
|
-
`,
|
|
730
|
-
|
|
731
|
-
class
|
|
806
|
+
`, ct = '*{box-sizing:border-box}dialog[open]{display:flex;flex-direction:column;gap:var(--spacing-4)}dialog>[part]{position:relative}dialog>[part][hidden]{display:none}dialog>[part][data-divider=true]:after{content:"";position:absolute;left:0;right:0;bottom:0;border-bottom:var(--border-width-1) solid var(--color-neutral-600)}dialog>[part][data-divider=true]{padding-bottom:var(--spacing-4)}dialog div[part=body]{flex:1;min-height:0}', D = new CSSStyleSheet();
|
|
807
|
+
D.replaceSync(ct);
|
|
808
|
+
class k extends v {
|
|
732
809
|
_sectionNames = ["header", "body", "footer"];
|
|
733
810
|
_handleSlotChange = () => {
|
|
734
811
|
this._updateSectionState();
|
|
@@ -738,14 +815,14 @@ class L extends b {
|
|
|
738
815
|
* @ignore
|
|
739
816
|
*/
|
|
740
817
|
constructor() {
|
|
741
|
-
super(), this.shadowRoot?.adoptedStyleSheets.push(
|
|
818
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push(D);
|
|
742
819
|
}
|
|
743
820
|
/**
|
|
744
821
|
* Specifies which attributes should be observed for changes.
|
|
745
822
|
* Uses parent's attributes since we're extending the base dialog.
|
|
746
823
|
*/
|
|
747
824
|
static get observedAttributes() {
|
|
748
|
-
return
|
|
825
|
+
return v.observedAttributes;
|
|
749
826
|
}
|
|
750
827
|
/**
|
|
751
828
|
* Renders the component's HTML structure.
|
|
@@ -754,7 +831,7 @@ class L extends b {
|
|
|
754
831
|
* @returns {void}
|
|
755
832
|
*/
|
|
756
833
|
_render() {
|
|
757
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
834
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = ut, this._syncAttributes());
|
|
758
835
|
}
|
|
759
836
|
/**
|
|
760
837
|
* Adds slot listeners so sections can react to projected content changes.
|
|
@@ -800,9 +877,9 @@ class L extends b {
|
|
|
800
877
|
});
|
|
801
878
|
}
|
|
802
879
|
}
|
|
803
|
-
const
|
|
804
|
-
|
|
805
|
-
class
|
|
880
|
+
const $ = new CSSStyleSheet();
|
|
881
|
+
$.replaceSync(dt);
|
|
882
|
+
class u extends k {
|
|
806
883
|
/**
|
|
807
884
|
* The title of the confirmation dialog.
|
|
808
885
|
*/
|
|
@@ -831,7 +908,7 @@ class d extends L {
|
|
|
831
908
|
* @constructor
|
|
832
909
|
*/
|
|
833
910
|
constructor() {
|
|
834
|
-
super(), this.shadowRoot?.adoptedStyleSheets.push(
|
|
911
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push($);
|
|
835
912
|
}
|
|
836
913
|
/**
|
|
837
914
|
* Specifies which attributes should be observed for changes.
|
|
@@ -839,23 +916,23 @@ class d extends L {
|
|
|
839
916
|
*/
|
|
840
917
|
static get observedAttributes() {
|
|
841
918
|
return [
|
|
842
|
-
...
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
919
|
+
...k.observedAttributes,
|
|
920
|
+
u.textAttribute,
|
|
921
|
+
u.headlineAttribute,
|
|
922
|
+
u.valueAttribute
|
|
846
923
|
];
|
|
847
924
|
}
|
|
848
925
|
get headline() {
|
|
849
926
|
return this._headline;
|
|
850
927
|
}
|
|
851
928
|
set headline(t) {
|
|
852
|
-
this._headline = t, this.setAttribute(
|
|
929
|
+
this._headline = t, this.setAttribute(u.headlineAttribute, t);
|
|
853
930
|
}
|
|
854
931
|
get text() {
|
|
855
932
|
return this._text;
|
|
856
933
|
}
|
|
857
934
|
set text(t) {
|
|
858
|
-
this._text = t, this.setAttribute(
|
|
935
|
+
this._text = t, this.setAttribute(u.textAttribute, t);
|
|
859
936
|
}
|
|
860
937
|
get value() {
|
|
861
938
|
return this._value;
|
|
@@ -869,7 +946,7 @@ class d extends L {
|
|
|
869
946
|
* @returns {void}
|
|
870
947
|
*/
|
|
871
948
|
connectedCallback() {
|
|
872
|
-
this._render(), this._addEventListeners(), this.closedBy =
|
|
949
|
+
this._render(), this._addEventListeners(), this.closedBy = R.NONE;
|
|
873
950
|
}
|
|
874
951
|
/**
|
|
875
952
|
* Renders the component's HTML structure.
|
|
@@ -878,7 +955,7 @@ class d extends L {
|
|
|
878
955
|
* @returns {void}
|
|
879
956
|
*/
|
|
880
957
|
_render() {
|
|
881
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
958
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = lt, this._syncAttributes());
|
|
882
959
|
}
|
|
883
960
|
/**
|
|
884
961
|
* Syncs a single attribute from host to the DOM elements.
|
|
@@ -887,21 +964,21 @@ class d extends L {
|
|
|
887
964
|
* @returns {void}
|
|
888
965
|
*/
|
|
889
966
|
_syncAttribute(t) {
|
|
890
|
-
if (
|
|
967
|
+
if (u.observedAttributes.includes(t))
|
|
891
968
|
switch (t) {
|
|
892
|
-
case
|
|
969
|
+
case u.headlineAttribute: {
|
|
893
970
|
this._headline = this.getAttribute(t) ?? o;
|
|
894
971
|
const e = this.shadowRoot?.querySelector("h2");
|
|
895
972
|
e != null && (e.textContent = this._headline);
|
|
896
973
|
break;
|
|
897
974
|
}
|
|
898
|
-
case
|
|
975
|
+
case u.textAttribute: {
|
|
899
976
|
this._text = this.getAttribute(t) ?? o;
|
|
900
977
|
const e = this.shadowRoot?.querySelector("p");
|
|
901
978
|
e != null && (e.textContent = this._text);
|
|
902
979
|
break;
|
|
903
980
|
}
|
|
904
|
-
case
|
|
981
|
+
case u.valueAttribute: {
|
|
905
982
|
this._value = this.getAttribute(t);
|
|
906
983
|
break;
|
|
907
984
|
}
|
|
@@ -918,7 +995,7 @@ class d extends L {
|
|
|
918
995
|
* @returns {void}
|
|
919
996
|
*/
|
|
920
997
|
_syncAttributes() {
|
|
921
|
-
super._syncAttributes(),
|
|
998
|
+
super._syncAttributes(), u.observedAttributes.forEach((t) => {
|
|
922
999
|
this._syncAttribute(t);
|
|
923
1000
|
});
|
|
924
1001
|
}
|
|
@@ -929,8 +1006,8 @@ class d extends L {
|
|
|
929
1006
|
*/
|
|
930
1007
|
_addEventListeners() {
|
|
931
1008
|
super._addEventListeners(), this.shadowRoot?.querySelector(
|
|
932
|
-
|
|
933
|
-
)?.addEventListener(
|
|
1009
|
+
I
|
|
1010
|
+
)?.addEventListener(b.CLICK, this._handleConfirm), this.shadowRoot?.querySelector(x)?.addEventListener(b.CLICK, this._handleUndo);
|
|
934
1011
|
}
|
|
935
1012
|
/**
|
|
936
1013
|
* Removes event listeners.
|
|
@@ -939,8 +1016,8 @@ class d extends L {
|
|
|
939
1016
|
*/
|
|
940
1017
|
_removeEventListeners() {
|
|
941
1018
|
super._removeEventListeners(), this.shadowRoot?.querySelector(
|
|
942
|
-
|
|
943
|
-
)?.removeEventListener(
|
|
1019
|
+
I
|
|
1020
|
+
)?.removeEventListener(b.CLICK, this._handleConfirm), this.shadowRoot?.querySelector(x)?.removeEventListener(b.CLICK, this._handleUndo);
|
|
944
1021
|
}
|
|
945
1022
|
/**
|
|
946
1023
|
* Handles the confirm button click event.
|
|
@@ -950,7 +1027,7 @@ class d extends L {
|
|
|
950
1027
|
*/
|
|
951
1028
|
_handleConfirm = () => {
|
|
952
1029
|
const t = new CustomEvent(
|
|
953
|
-
|
|
1030
|
+
E.CONFIRMATION_DIALOG_CONFIRM,
|
|
954
1031
|
{
|
|
955
1032
|
bubbles: !0,
|
|
956
1033
|
composed: !0,
|
|
@@ -963,7 +1040,7 @@ class d extends L {
|
|
|
963
1040
|
};
|
|
964
1041
|
_handleUndo = () => {
|
|
965
1042
|
const t = new CustomEvent(
|
|
966
|
-
|
|
1043
|
+
E.CONFIRMATION_DIALOG_UNDO,
|
|
967
1044
|
{
|
|
968
1045
|
bubbles: !0,
|
|
969
1046
|
composed: !0,
|
|
@@ -975,19 +1052,19 @@ class d extends L {
|
|
|
975
1052
|
this.dispatchEvent(t), this._value = void 0;
|
|
976
1053
|
};
|
|
977
1054
|
}
|
|
978
|
-
const
|
|
979
|
-
CONFIRMATION_DIALOG_CONFIRM:
|
|
980
|
-
CONFIRMATION_DIALOG_UNDO:
|
|
981
|
-
},
|
|
1055
|
+
const ht = "confirmation-dialog", bt = {
|
|
1056
|
+
CONFIRMATION_DIALOG_CONFIRM: E.CONFIRMATION_DIALOG_CONFIRM,
|
|
1057
|
+
CONFIRMATION_DIALOG_UNDO: E.CONFIRMATION_DIALOG_UNDO
|
|
1058
|
+
}, xt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
982
1059
|
__proto__: null,
|
|
983
|
-
COMPONENT_CUSTOM_MESSAGES:
|
|
984
|
-
ConfirmationDialogComponent:
|
|
985
|
-
selector:
|
|
986
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
1060
|
+
COMPONENT_CUSTOM_MESSAGES: bt,
|
|
1061
|
+
ConfirmationDialogComponent: u,
|
|
1062
|
+
selector: ht
|
|
1063
|
+
}, Symbol.toStringTag, { value: "Module" })), vt = "header-body-footer-dialog", It = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
987
1064
|
__proto__: null,
|
|
988
|
-
HeaderBodyFooterDialogComponent:
|
|
989
|
-
selector:
|
|
990
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
1065
|
+
HeaderBodyFooterDialogComponent: k,
|
|
1066
|
+
selector: vt
|
|
1067
|
+
}, Symbol.toStringTag, { value: "Module" })), pt = `<div class="bar-menu-container">
|
|
991
1068
|
<previous-button class="nav-prev" part="nav-prev-button"></previous-button>
|
|
992
1069
|
|
|
993
1070
|
<div class="buttons-wrapper" part="buttons-wrapper">
|
|
@@ -996,9 +1073,9 @@ const at = "confirmation-dialog", lt = {
|
|
|
996
1073
|
|
|
997
1074
|
<next-button class="nav-next" part="nav-next-button"></next-button>
|
|
998
1075
|
</div>
|
|
999
|
-
`,
|
|
1000
|
-
|
|
1001
|
-
class
|
|
1076
|
+
`, gt = "*{box-sizing:border-box}:host{display:block;width:100%}.bar-menu-container{display:flex;align-items:center;justify-content:space-between;height:100%;gap:var(--gap-sm);padding:var(--spacing-1);background:var(--color-bg-primary);border-radius:var(--border-radius-full);border:var(--border-width-2) solid var(--color-border-secondary);box-shadow:var(--shadow-sm);margin:0 auto}.bar-menu-container .nav-prev,.bar-menu-container .nav-next{flex-shrink:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.bar-menu-container .nav-prev.visible,.bar-menu-container .nav-next.visible{opacity:1;visibility:visible;pointer-events:auto}.bar-menu-container .nav-prev::part(button),.bar-menu-container .nav-next::part(button){background-color:transparent;box-shadow:none}.bar-menu-container .buttons-wrapper{display:grid;grid-template-columns:repeat(var(--bar-menu-visible-count, 3),1fr);grid-auto-rows:max-content;align-items:center;justify-items:center;gap:var(--gap-sm);overflow:hidden;position:relative;width:auto}::slotted(*){display:none;flex-shrink:0;will-change:opacity,transform;contain:layout style paint;opacity:0;transform:scale(.8)}::slotted(.animating){transition:opacity .4s cubic-bezier(.34,1.56,.64,1),transform .4s cubic-bezier(.34,1.56,.64,1)}::slotted(.visible-button){display:inline-flex!important;pointer-events:auto;opacity:1;transform:scale(1)}", U = new CSSStyleSheet();
|
|
1077
|
+
U.replaceSync(gt);
|
|
1078
|
+
class h extends HTMLElement {
|
|
1002
1079
|
static _visibleCountAttribute = "visible-count";
|
|
1003
1080
|
static _cyclicalNavigationAttribute = "cyclical-navigation";
|
|
1004
1081
|
_currentIndex = 0;
|
|
@@ -1016,19 +1093,19 @@ class c extends HTMLElement {
|
|
|
1016
1093
|
* @constructor
|
|
1017
1094
|
*/
|
|
1018
1095
|
constructor() {
|
|
1019
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(
|
|
1096
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(U);
|
|
1020
1097
|
}
|
|
1021
1098
|
/**
|
|
1022
1099
|
* Specifies which attributes should be observed for changes.
|
|
1023
1100
|
*/
|
|
1024
1101
|
static get observedAttributes() {
|
|
1025
1102
|
return [
|
|
1026
|
-
|
|
1027
|
-
|
|
1103
|
+
h._visibleCountAttribute,
|
|
1104
|
+
h._cyclicalNavigationAttribute
|
|
1028
1105
|
];
|
|
1029
1106
|
}
|
|
1030
1107
|
get visibleButtons() {
|
|
1031
|
-
const t = this.getAttribute(
|
|
1108
|
+
const t = this.getAttribute(h._visibleCountAttribute);
|
|
1032
1109
|
if (t !== null && t !== o) {
|
|
1033
1110
|
const e = parseInt(t, 10);
|
|
1034
1111
|
return Math.max(this._MIN_VISIBLE, Math.min(this._MAX_VISIBLE, e));
|
|
@@ -1040,16 +1117,16 @@ class c extends HTMLElement {
|
|
|
1040
1117
|
this._MIN_VISIBLE,
|
|
1041
1118
|
Math.min(this._MAX_VISIBLE, t)
|
|
1042
1119
|
);
|
|
1043
|
-
this.setAttribute(
|
|
1120
|
+
this.setAttribute(h._visibleCountAttribute, String(e));
|
|
1044
1121
|
}
|
|
1045
1122
|
get cyclicalNavigation() {
|
|
1046
|
-
return this.hasAttribute(
|
|
1123
|
+
return this.hasAttribute(h._cyclicalNavigationAttribute);
|
|
1047
1124
|
}
|
|
1048
1125
|
set cyclicalNavigation(t) {
|
|
1049
1126
|
t ? this.setAttribute(
|
|
1050
|
-
|
|
1127
|
+
h._cyclicalNavigationAttribute,
|
|
1051
1128
|
o
|
|
1052
|
-
) : this.removeAttribute(
|
|
1129
|
+
) : this.removeAttribute(h._cyclicalNavigationAttribute);
|
|
1053
1130
|
}
|
|
1054
1131
|
/**
|
|
1055
1132
|
* Lifecycle hook: component inserted into DOM
|
|
@@ -1067,16 +1144,16 @@ class c extends HTMLElement {
|
|
|
1067
1144
|
* Lifecycle hook: observed attribute changed
|
|
1068
1145
|
*/
|
|
1069
1146
|
attributeChangedCallback(t, e, s) {
|
|
1070
|
-
t ===
|
|
1147
|
+
t === h._visibleCountAttribute ? (this._visibleCount = this.visibleButtons, this._buttonsWrapper !== null && this._buttonsWrapper.style.setProperty(
|
|
1071
1148
|
"--bar-menu-visible-count",
|
|
1072
1149
|
String(this.visibleButtons)
|
|
1073
|
-
), this._updateButtonVisibility()) : t ===
|
|
1150
|
+
), this._updateButtonVisibility()) : t === h._cyclicalNavigationAttribute && (this._cyclicalNavigation = this.cyclicalNavigation, this._updateButtonVisibility());
|
|
1074
1151
|
}
|
|
1075
1152
|
/**
|
|
1076
1153
|
* Render the component's Shadow DOM structure
|
|
1077
1154
|
*/
|
|
1078
1155
|
_render() {
|
|
1079
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
1156
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = pt);
|
|
1080
1157
|
}
|
|
1081
1158
|
/**
|
|
1082
1159
|
* Cache Shadow DOM elements for performance
|
|
@@ -1085,9 +1162,9 @@ class c extends HTMLElement {
|
|
|
1085
1162
|
this._slotElement = this.shadowRoot?.querySelector("slot") ?? null, this._navPrevButton = this.shadowRoot?.querySelector(".nav-prev") ?? null, this._navNextButton = this.shadowRoot?.querySelector(".nav-next") ?? null, this._buttonsWrapper = this.shadowRoot?.querySelector(".buttons-wrapper") ?? null, this._buttonsWrapper !== null && this._buttonsWrapper.style.setProperty(
|
|
1086
1163
|
"--bar-menu-visible-count",
|
|
1087
1164
|
String(this.visibleButtons)
|
|
1088
|
-
), this._navPrevButton !== null && (this._navPrevButton.setAttribute("aria-label", "Previous"), this._navPrevButton.addEventListener(
|
|
1165
|
+
), this._navPrevButton !== null && (this._navPrevButton.setAttribute("aria-label", "Previous"), this._navPrevButton.addEventListener(b.CLICK, () => {
|
|
1089
1166
|
this._scrollPrevious();
|
|
1090
|
-
})), this._navNextButton !== null && (this._navNextButton.setAttribute("aria-label", "Next"), this._navNextButton.addEventListener(
|
|
1167
|
+
})), this._navNextButton !== null && (this._navNextButton.setAttribute("aria-label", "Next"), this._navNextButton.addEventListener(b.CLICK, () => {
|
|
1091
1168
|
this._scrollNext();
|
|
1092
1169
|
}));
|
|
1093
1170
|
}
|
|
@@ -1114,13 +1191,13 @@ class c extends HTMLElement {
|
|
|
1114
1191
|
_setupKeyboardListener() {
|
|
1115
1192
|
this._keyDownListener = (t) => {
|
|
1116
1193
|
t.key === "ArrowLeft" ? (t.preventDefault(), this._scrollPrevious()) : t.key === "ArrowRight" && (t.preventDefault(), this._scrollNext());
|
|
1117
|
-
}, this.addEventListener(
|
|
1194
|
+
}, this.addEventListener(O.KEY_DOWN, this._keyDownListener);
|
|
1118
1195
|
}
|
|
1119
1196
|
/**
|
|
1120
1197
|
* Remove keyboard listener
|
|
1121
1198
|
*/
|
|
1122
1199
|
_removeKeyboardListener() {
|
|
1123
|
-
this._keyDownListener !== null && this.removeEventListener(
|
|
1200
|
+
this._keyDownListener !== null && this.removeEventListener(O.KEY_DOWN, this._keyDownListener);
|
|
1124
1201
|
}
|
|
1125
1202
|
/**
|
|
1126
1203
|
* Get all slotted button elements
|
|
@@ -1133,25 +1210,25 @@ class c extends HTMLElement {
|
|
|
1133
1210
|
*/
|
|
1134
1211
|
_updateButtonVisibility(t) {
|
|
1135
1212
|
const e = this._getSlottedButtons(), s = e.length, r = this.visibleButtons, n = this._currentIndex, l = Math.min(n + r, s);
|
|
1136
|
-
e.forEach((a,
|
|
1137
|
-
const
|
|
1138
|
-
|
|
1139
|
-
}), t !== void 0 ? (e[0]?.offsetHeight, e.forEach((a,
|
|
1140
|
-
if (
|
|
1141
|
-
const
|
|
1142
|
-
|
|
1143
|
-
const
|
|
1144
|
-
|
|
1213
|
+
e.forEach((a, d) => {
|
|
1214
|
+
const y = d >= n && d < l, p = a;
|
|
1215
|
+
y || (a.classList.remove("visible-button"), a.classList.remove("animating"), p.style.display = "none");
|
|
1216
|
+
}), t !== void 0 ? (e[0]?.offsetHeight, e.forEach((a, d) => {
|
|
1217
|
+
if (d >= n && d < l) {
|
|
1218
|
+
const p = a;
|
|
1219
|
+
p.style.display = "inline-flex", a.classList.add("animating");
|
|
1220
|
+
const K = d % this.visibleButtons * 50;
|
|
1221
|
+
p.style.transitionDelay = `${K}ms`;
|
|
1145
1222
|
}
|
|
1146
|
-
}), e[0]?.offsetHeight, e.forEach((a,
|
|
1147
|
-
|
|
1223
|
+
}), e[0]?.offsetHeight, e.forEach((a, d) => {
|
|
1224
|
+
d >= n && d < l && a.classList.add("visible-button");
|
|
1148
1225
|
}), setTimeout(() => {
|
|
1149
1226
|
e.forEach((a) => {
|
|
1150
1227
|
a.classList.remove("animating"), a.style.transitionDelay = o;
|
|
1151
1228
|
});
|
|
1152
|
-
}, 400)) : e.forEach((a,
|
|
1153
|
-
const
|
|
1154
|
-
|
|
1229
|
+
}, 400)) : e.forEach((a, d) => {
|
|
1230
|
+
const y = d >= n && d < l, p = a;
|
|
1231
|
+
y && (p.style.display = "inline-flex", a.classList.add("visible-button"));
|
|
1155
1232
|
}), this._updateNavigationButtons(s, r);
|
|
1156
1233
|
}
|
|
1157
1234
|
/**
|
|
@@ -1208,24 +1285,24 @@ class c extends HTMLElement {
|
|
|
1208
1285
|
return this._currentIndex;
|
|
1209
1286
|
}
|
|
1210
1287
|
}
|
|
1211
|
-
const
|
|
1288
|
+
const mt = "bar-menu", kt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
1212
1289
|
__proto__: null,
|
|
1213
|
-
BarMenuComponent:
|
|
1214
|
-
selector:
|
|
1290
|
+
BarMenuComponent: h,
|
|
1291
|
+
selector: mt
|
|
1215
1292
|
}, Symbol.toStringTag, { value: "Module" }));
|
|
1216
1293
|
export {
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1294
|
+
yt as APPLICATION_NAME,
|
|
1295
|
+
kt as BarMenu,
|
|
1296
|
+
At as BaseButton,
|
|
1297
|
+
Rt as BaseDialog,
|
|
1298
|
+
E as CUSTOM_MESSAGES,
|
|
1299
|
+
Lt as ConfirmButton,
|
|
1300
|
+
xt as ConfirmationDialog,
|
|
1301
|
+
It as HeaderBodyFooterDialog,
|
|
1302
|
+
Et as NextButton,
|
|
1303
|
+
wt as PreviousButton,
|
|
1304
|
+
St as UndoButton,
|
|
1305
|
+
ft as WebComponentsRegistry,
|
|
1306
|
+
F as clearThemes,
|
|
1307
|
+
_t as switchTheme
|
|
1231
1308
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(l,
|
|
1
|
+
(function(l,y){typeof exports=="object"&&typeof module<"u"?y(exports):typeof define=="function"&&define.amd?define(["exports"],y):(l=typeof globalThis<"u"?globalThis:l||self,y(l["as-design-system-lib"]={}))})(this,(function(l){"use strict";const y="as-design-system-lib";class z{constructor(t=new Map){this.registerAllComponents(t)}registerAllComponents(t){Array.from(t.entries()).forEach(([e,s])=>{this.registerComponent(e,s)})}registerComponent(t,e){customElements.get(t)===void 0?(customElements.define(t,e),console.log(`Registered Web Component: ${t}`)):console.warn(`Web Component "${t}" is already registered.`)}}const f={CONFIRMATION_DIALOG_CONFIRM:"confirmation-dialog-confirm",CONFIRMATION_DIALOG_UNDO:"confirmation-dialog-undo"},_={FERRARI:"Ferrari theme inspired by the iconic red color of Ferrari cars.",LIGHT:"Light theme with a clean and minimalistic design.",LIGHT_BLUE:"Light Blue theme with a refreshing and calm appearance.",DARK:"Dark theme with a sleek and modern look.",DARK_PURPLE:"Dark Purple theme with a luxurious and elegant feel."},A={FERRARI:"🏎️",LIGHT:"☀️",LIGHT_BLUE:"🫧",DARK:"🌙",DARK_PURPLE:"🟣"},S={FERRARI:"Ferrari",LIGHT:"Light",LIGHT_BLUE:"Light Blue",DARK:"Dark",DARK_PURPLE:"Dark Purple"},L={FERRARI:"ferrari",LIGHT:"light",LIGHT_BLUE:"light-blue",DARK:"dark",DARK_PURPLE:"dark-purple"},h={FERRARI:"ferrari",LIGHT:"light",LIGHT_BLUE:"light-blue",DARK:"dark",DARK_PURPLE:"dark-purple"},B=new Map([[h.DARK,{description:_.DARK,icon:A.DARK,id:h.DARK,name:S.DARK,value:L.DARK}],[h.DARK_PURPLE,{description:_.DARK_PURPLE,icon:A.DARK_PURPLE,id:h.DARK_PURPLE,name:S.DARK_PURPLE,value:L.DARK_PURPLE}],[h.FERRARI,{description:_.FERRARI,icon:A.FERRARI,id:h.FERRARI,name:S.FERRARI,value:L.FERRARI}],[h.LIGHT,{description:_.LIGHT,icon:A.LIGHT,id:h.LIGHT,name:S.LIGHT,value:L.LIGHT}],[h.LIGHT_BLUE,{description:_.LIGHT_BLUE,icon:A.LIGHT_BLUE,id:h.LIGHT_BLUE,name:S.LIGHT_BLUE,value:L.LIGHT_BLUE}]]),j=R=>{N();const t=B.get(R)?.value;t!==void 0&&document.body.classList.add(t)},N=()=>{document.body.classList.remove(...Object.values(h))},V="base-button",n="",g={SHOW_MODAL:"show-modal",CLOSE:"close"};`${btoa({CUSTOM_CROSSHAIR:`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
|
2
2
|
<!-- White border (underneath) -->
|
|
3
3
|
<line x1="16" y1="2" x2="16" y2="30" stroke="white" stroke-width="5"/>
|
|
4
4
|
<line x1="2" y1="16" x2="30" y2="16" stroke="white" stroke-width="5"/>
|
|
@@ -6,27 +6,27 @@
|
|
|
6
6
|
<!-- Black crosshair lines (on top) -->
|
|
7
7
|
<line x1="16" y1="2" x2="16" y2="30" stroke="black" stroke-width="2"/>
|
|
8
8
|
<line x1="2" y1="16" x2="30" y2="16" stroke="black" stroke-width="2"/>
|
|
9
|
-
</svg>`}.CUSTOM_CROSSHAIR)}`;const
|
|
9
|
+
</svg>`}.CUSTOM_CROSSHAIR)}`;const x={ANY:"any",NONE:"none"},C={KEY_DOWN:"keydown"},v={CLICK:"click"},q=`<button part="button">
|
|
10
10
|
<slot></slot>
|
|
11
11
|
</button>
|
|
12
|
-
`,
|
|
12
|
+
`,W="*{box-sizing:border-box}:where(button,input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::file-selector-button{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);font-family:var(--font-family-base);letter-spacing:var(--letter-spacing-normal);line-height:var(--line-height-normal);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);display:inline-flex;justify-content:center;align-items:center;text-align:center;gap:var(--gap-sm);background:var(--color-bg-secondary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-primary);border-radius:var(--border-radius-lg);transition:all var(--transition-base)}:where(button,input[type=button],input[type=submit],input[type=reset])>.material-symbols-outlined{font-size:var(--font-size-xl);font-family:Material Symbols Outlined;line-height:1}:where(button,input[type=button],input[type=submit],input[type=reset])[disabled]{opacity:.3;cursor:not-allowed}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):hover),:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):active){background:var(--color-hover-bg-secondary);border-color:var(--color-hover-border-secondary)}:where(input[type=file]){inline-size:100%;max-inline-size:max-content;background-color:var(--color-bg-secondary)}",M=new CSSStyleSheet;M.replaceSync(W);class i extends HTMLElement{static autofocusAttribute="autofocus";static commandAttribute="command";static commandforAttribute="commandfor";static disabledAttribute="disabled";static nameAttribute="name";static titleAttribute="title";static typeAttribute="type";static valueAttribute="value";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(M)}static get observedAttributes(){return[i.autofocusAttribute,i.commandAttribute,i.commandforAttribute,i.disabledAttribute,i.nameAttribute,i.titleAttribute,i.typeAttribute,i.valueAttribute]}get buttonElement(){return this.shadowRoot?.querySelector("button")}get autofocus(){return this.hasAttribute(i.autofocusAttribute)}set autofocus(t){t?this.setAttribute(i.autofocusAttribute,n):this.removeAttribute(i.autofocusAttribute)}get command(){return this.getAttribute(i.commandAttribute)??n}set command(t){this.setAttribute(i.commandAttribute,t)}get commandfor(){return this.getAttribute(i.commandforAttribute)??n}set commandfor(t){t!==n?this.setAttribute(i.commandforAttribute,t):this.removeAttribute(i.commandforAttribute)}get disabled(){return this.hasAttribute(i.disabledAttribute)}set disabled(t){t?this.setAttribute(i.disabledAttribute,n):this.removeAttribute(i.disabledAttribute)}get name(){return this.getAttribute(i.nameAttribute)??n}set name(t){t!==n?this.setAttribute(i.nameAttribute,t):this.removeAttribute(i.nameAttribute)}get headline(){return this.getAttribute(i.titleAttribute)??n}set headline(t){t!==n?this.setAttribute(i.titleAttribute,t):this.removeAttribute(i.titleAttribute)}get type(){return this.getAttribute(i.typeAttribute)??"button"}set type(t){t!==n?this.setAttribute(i.typeAttribute,t):this.removeAttribute(i.typeAttribute)}get value(){return this.getAttribute(i.valueAttribute)??"button"}set value(t){t!==n?this.setAttribute(i.valueAttribute,t):this.removeAttribute(i.valueAttribute)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,s){s!==e&&this._syncAttribute(t)}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=q,this._syncAttributes())}_addEventListeners(){this.buttonElement.addEventListener(v.CLICK,this._handleClick)}_removeEventListeners(){this.buttonElement.addEventListener(v.CLICK,this._handleClick)}_handleClick=()=>{if(this.command===n||this.commandfor===n)return;let t=document.getElementById(this.commandfor);if(t??=this._findElementInShadowDOM(this.commandfor),t===null)return;const e=t;switch(this.command){case g.SHOW_MODAL:e.showModal?.();break;case g.CLOSE:e.close?.();break}};_findElementInShadowDOM(t){const s=`#${CSS.escape(t)}`;let r=this.querySelector(s);if(r!==null||(r=this._searchInShadowRootsOfChildren(this,s),r!==null))return r;let o=this.parentElement;for(;o!==null;){if(r=o.querySelector(s),r!==null||(r=this._searchInShadowRootsOfChildren(o,s),r!==null))return r;const d=o.parentElement;if(d!==null)o=d;else{const a=o.getRootNode();if(a instanceof ShadowRoot&&a.host!==null)o=a.host;else break}}return null}_searchInShadowRootsOfChildren(t,e){const s=t.children;for(const r of s){if(r.shadowRoot!==null){const d=r.shadowRoot.querySelector(e);if(d!==null)return d;const a=this._searchInShadowRootsOfChildren(r.shadowRoot,e);if(a!==null)return a}const o=this._searchInShadowRootsOfChildren(r,e);if(o!==null)return o}return null}_syncAttribute(t){const e=this.buttonElement;e!==null&&(this.hasAttribute(t)?e.setAttribute(t,this.getAttribute(t)??n):e.removeAttribute(t))}_syncAttributes(){i.observedAttributes.forEach(t=>{this._syncAttribute(t)})}}const Y=Object.freeze(Object.defineProperty({__proto__:null,BaseButtonComponent:i,selector:V},Symbol.toStringTag,{value:"Module"})),X=`<button title="Undo" part="button">
|
|
13
13
|
<span class="material-symbols-outlined">undo</span>
|
|
14
14
|
<span>Undo</span>
|
|
15
15
|
</button>
|
|
16
|
-
`,
|
|
16
|
+
`,J="*{box-sizing:border-box}button[part=button]{background:var(--color-warning);font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{filter:brightness(1.2)}",P=new CSSStyleSheet;P.replaceSync(J);class Q extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(P),this.command=g.CLOSE,this.title="Undo"}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._setCommandForAttribute(),this._addEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=X,this._syncAttributes())}_setCommandForAttribute(){let t=this.getRootNode();"host"in t&&t.host!==null&&t.host!==void 0&&(t=t.host);const e=t instanceof Element?t.closest("base-dialog")??t.closest("confirmation-dialog"):null;e!==null&&(this.commandfor=e.id)}}const O="undo-button",Z=Object.freeze(Object.defineProperty({__proto__:null,UndoButtonComponent:Q,selector:O},Symbol.toStringTag,{value:"Module"})),tt=`<button title="Confirm" part="button">
|
|
17
17
|
<span class="material-symbols-outlined">check</span>
|
|
18
18
|
<span>Confirm</span>
|
|
19
19
|
</button>
|
|
20
|
-
`,
|
|
20
|
+
`,et="*{box-sizing:border-box}button[part=button]{background:var(--color-success);font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{filter:brightness(1.2)}",$=new CSSStyleSheet;$.replaceSync(et);class it extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push($),this.command=g.CLOSE,this.title="Confirm"}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._setCommandForAttribute(),this._addEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=tt,this._syncAttributes())}_setCommandForAttribute(){let t=this.getRootNode();"host"in t&&t.host!==null&&t.host!==void 0&&(t=t.host);const e=t instanceof Element?t.closest("base-dialog")??t.closest("confirmation-dialog"):null;e!==null&&(this.commandfor=e.id)}}const k="confirm-button",st=Object.freeze(Object.defineProperty({__proto__:null,ConfirmButtonComponent:it,selector:k},Symbol.toStringTag,{value:"Module"})),rt=`<button part="button">
|
|
21
21
|
<span class="material-symbols-outlined">chevron_left</span>
|
|
22
22
|
</button>
|
|
23
|
-
`,
|
|
23
|
+
`,nt="*{box-sizing:border-box}button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",H=new CSSStyleSheet;H.replaceSync(nt);class w extends i{static _disabledAttribute="disabled";static _titleAttribute="title";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(H),this.command=g.CLOSE}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}attributeChangedCallback(t,e,s){super.attributeChangedCallback(t,e,s),t===w._disabledAttribute&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=rt,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");t!==null&&(this.disabled?t.removeAttribute(w._titleAttribute):t.setAttribute(w._titleAttribute,"Previous"))}}const ot=Object.freeze(Object.defineProperty({__proto__:null,PreviousButtonComponent:w,selector:"previous-button"},Symbol.toStringTag,{value:"Module"})),at=`<button part="button">
|
|
24
24
|
<span class="material-symbols-outlined">chevron_right</span>
|
|
25
25
|
</button>
|
|
26
|
-
`,
|
|
26
|
+
`,lt="*{box-sizing:border-box}button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",D=new CSSStyleSheet;D.replaceSync(lt);class E extends i{static _disabledAttribute="disabled";static _titleAttribute="title";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(D),this.command=g.CLOSE}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}attributeChangedCallback(t,e,s){super.attributeChangedCallback(t,e,s),t===E._disabledAttribute&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=at,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");t!==null&&(this.disabled?t.removeAttribute(E._titleAttribute):t.setAttribute(E._titleAttribute,"Next"))}}const dt=Object.freeze(Object.defineProperty({__proto__:null,NextButtonComponent:E,selector:"next-button"},Symbol.toStringTag,{value:"Module"})),ut=`<dialog part="dialog">
|
|
27
27
|
<slot></slot>
|
|
28
28
|
</dialog>
|
|
29
|
-
`,
|
|
29
|
+
`,ct="*{box-sizing:border-box}dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-secondary);border-radius:var(--border-radius-xl);padding:var(--spacing-4);max-width:90vw;max-height:90vh;font-family:var(--font-family-base);line-height:var(--line-height-normal);font-size:var(--font-size-sm);box-shadow:var(--shadow-2xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:slideIn var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog.closing{animation:slideOut var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog::backdrop{background:var(--window-backdrop);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn var(--transition-base) ease-out forwards}dialog.closing::backdrop{animation:fadeOut var(--transition-base) ease-out forwards}@keyframes slideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes slideOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(-20px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}",U=new CSSStyleSheet;U.replaceSync(ct);class p extends HTMLElement{static closedByAttribute="closedby";_closedBy=x.ANY;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(U)}static get observedAttributes(){return[p.closedByAttribute]}get dialogElement(){return this.shadowRoot?.querySelector("dialog")}get command(){return this.getAttribute(p.closedByAttribute)??x.ANY}get closedBy(){return this._closedBy}set closedBy(t){this._closedBy=t,this.setAttribute(p.closedByAttribute,t)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,s){const r=this.dialogElement;r!=null&&s!==e&&this._syncAttribute(t)}_addEventListeners(){}_removeEventListeners(){}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=ut,this._syncAttributes())}_syncAttribute(t){const e=this.dialogElement;e!=null&&(this.hasAttribute(t)===!0?e.setAttribute(t,this.getAttribute(t)??n):e.removeAttribute(t))}_syncAttributes(){p.observedAttributes.forEach(t=>{this._syncAttribute(t)})}show(){this.dialogElement.show()}showModal(){this.dialogElement.showModal()}close(t){const e=this.dialogElement;e.classList.add("closing"),setTimeout(()=>{e.close(t),e.classList.remove("closing")},300)}}const ht=Object.freeze(Object.defineProperty({__proto__:null,BaseDialogComponent:p,selector:"base-dialog"},Symbol.toStringTag,{value:"Module"})),bt=`<dialog part="dialog">
|
|
30
30
|
<header part="header">
|
|
31
31
|
<h2></h2>
|
|
32
32
|
</header>
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
<undo-button></undo-button>
|
|
39
39
|
</footer>
|
|
40
40
|
</dialog>
|
|
41
|
-
`,
|
|
41
|
+
`,vt="*{box-sizing:border-box}dialog header[part=header] h2{margin:0;padding:0}dialog div[part=body] p{margin:0;padding:0}dialog footer[part=footer]{display:flex;gap:var(--gap-md);justify-content:flex-end}",pt=`<dialog part="dialog">
|
|
42
42
|
<header part="header">
|
|
43
43
|
<slot name="header"></slot>
|
|
44
44
|
</header>
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
<slot name="footer"></slot>
|
|
50
50
|
</footer>
|
|
51
51
|
</dialog>
|
|
52
|
-
`,
|
|
52
|
+
`,gt='*{box-sizing:border-box}dialog[open]{display:flex;flex-direction:column;gap:var(--spacing-4)}dialog>[part]{position:relative}dialog>[part][hidden]{display:none}dialog>[part][data-divider=true]:after{content:"";position:absolute;left:0;right:0;bottom:0;border-bottom:var(--border-width-1) solid var(--color-neutral-600)}dialog>[part][data-divider=true]{padding-bottom:var(--spacing-4)}dialog div[part=body]{flex:1;min-height:0}',K=new CSSStyleSheet;K.replaceSync(gt);class T extends p{_sectionNames=["header","body","footer"];_handleSlotChange=()=>{this._updateSectionState()};constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(K)}static get observedAttributes(){return p.observedAttributes}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=pt,this._syncAttributes())}_addEventListeners(){super._addEventListeners(),this.shadowRoot!==null&&(this.shadowRoot.querySelectorAll("slot").forEach(t=>{t.addEventListener("slotchange",this._handleSlotChange)}),this._updateSectionState())}_removeEventListeners(){super._removeEventListeners(),this.shadowRoot!==null&&this.shadowRoot.querySelectorAll("slot").forEach(t=>{t.removeEventListener("slotchange",this._handleSlotChange)})}_updateSectionState(){if(this.shadowRoot===null)return;const t=[];this._sectionNames.forEach(e=>{const s=this.shadowRoot?.querySelector(`[part='${e}']`),r=this.shadowRoot?.querySelector(`slot[name='${e}']`);if(s===null||r===null)return;const o=r.assignedNodes({flatten:!0}).some(d=>d.nodeType===Node.TEXT_NODE?d.textContent?.trim().length!==0:d.nodeType===Node.ELEMENT_NODE);s.toggleAttribute("hidden",o===!1),s.dataset.filled=String(o),s.removeAttribute("data-divider"),o===!0&&t.push(s)}),t.slice(0,-1).forEach(e=>{e.dataset.divider="true"})}}const G=new CSSStyleSheet;G.replaceSync(vt);class u extends T{_headline=n;_text=n;_value=void 0;static textAttribute="text";static headlineAttribute="headline";static valueAttribute="value";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(G)}static get observedAttributes(){return[...T.observedAttributes,u.textAttribute,u.headlineAttribute,u.valueAttribute]}get headline(){return this._headline}set headline(t){this._headline=t,this.setAttribute(u.headlineAttribute,t)}get text(){return this._text}set text(t){this._text=t,this.setAttribute(u.textAttribute,t)}get value(){return this._value}set value(t){this._value=t}connectedCallback(){this._render(),this._addEventListeners(),this.closedBy=x.NONE}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=bt,this._syncAttributes())}_syncAttribute(t){if(u.observedAttributes.includes(t))switch(t){case u.headlineAttribute:{this._headline=this.getAttribute(t)??n;const e=this.shadowRoot?.querySelector("h2");e!=null&&(e.textContent=this._headline);break}case u.textAttribute:{this._text=this.getAttribute(t)??n;const e=this.shadowRoot?.querySelector("p");e!=null&&(e.textContent=this._text);break}case u.valueAttribute:{this._value=this.getAttribute(t);break}default:super._syncAttribute(t)}else super._syncAttribute(t)}_syncAttributes(){super._syncAttributes(),u.observedAttributes.forEach(t=>{this._syncAttribute(t)})}_addEventListeners(){super._addEventListeners(),this.shadowRoot?.querySelector(k)?.addEventListener(v.CLICK,this._handleConfirm),this.shadowRoot?.querySelector(O)?.addEventListener(v.CLICK,this._handleUndo)}_removeEventListeners(){super._removeEventListeners(),this.shadowRoot?.querySelector(k)?.removeEventListener(v.CLICK,this._handleConfirm),this.shadowRoot?.querySelector(O)?.removeEventListener(v.CLICK,this._handleUndo)}_handleConfirm=()=>{const t=new CustomEvent(f.CONFIRMATION_DIALOG_CONFIRM,{bubbles:!0,composed:!0,detail:{value:this._value}});this.dispatchEvent(t)};_handleUndo=()=>{const t=new CustomEvent(f.CONFIRMATION_DIALOG_UNDO,{bubbles:!0,composed:!0,detail:{value:this._value}});this.dispatchEvent(t),this._value=void 0}}const mt="confirmation-dialog",yt={CONFIRMATION_DIALOG_CONFIRM:f.CONFIRMATION_DIALOG_CONFIRM,CONFIRMATION_DIALOG_UNDO:f.CONFIRMATION_DIALOG_UNDO},ft=Object.freeze(Object.defineProperty({__proto__:null,COMPONENT_CUSTOM_MESSAGES:yt,ConfirmationDialogComponent:u,selector:mt},Symbol.toStringTag,{value:"Module"})),_t=Object.freeze(Object.defineProperty({__proto__:null,HeaderBodyFooterDialogComponent:T,selector:"header-body-footer-dialog"},Symbol.toStringTag,{value:"Module"})),At=`<div class="bar-menu-container">
|
|
53
53
|
<previous-button class="nav-prev" part="nav-prev-button"></previous-button>
|
|
54
54
|
|
|
55
55
|
<div class="buttons-wrapper" part="buttons-wrapper">
|
|
@@ -58,4 +58,4 @@
|
|
|
58
58
|
|
|
59
59
|
<next-button class="nav-next" part="nav-next-button"></next-button>
|
|
60
60
|
</div>
|
|
61
|
-
`,
|
|
61
|
+
`,St="*{box-sizing:border-box}:host{display:block;width:100%}.bar-menu-container{display:flex;align-items:center;justify-content:space-between;height:100%;gap:var(--gap-sm);padding:var(--spacing-1);background:var(--color-bg-primary);border-radius:var(--border-radius-full);border:var(--border-width-2) solid var(--color-border-secondary);box-shadow:var(--shadow-sm);margin:0 auto}.bar-menu-container .nav-prev,.bar-menu-container .nav-next{flex-shrink:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.bar-menu-container .nav-prev.visible,.bar-menu-container .nav-next.visible{opacity:1;visibility:visible;pointer-events:auto}.bar-menu-container .nav-prev::part(button),.bar-menu-container .nav-next::part(button){background-color:transparent;box-shadow:none}.bar-menu-container .buttons-wrapper{display:grid;grid-template-columns:repeat(var(--bar-menu-visible-count, 3),1fr);grid-auto-rows:max-content;align-items:center;justify-items:center;gap:var(--gap-sm);overflow:hidden;position:relative;width:auto}::slotted(*){display:none;flex-shrink:0;will-change:opacity,transform;contain:layout style paint;opacity:0;transform:scale(.8)}::slotted(.animating){transition:opacity .4s cubic-bezier(.34,1.56,.64,1),transform .4s cubic-bezier(.34,1.56,.64,1)}::slotted(.visible-button){display:inline-flex!important;pointer-events:auto;opacity:1;transform:scale(1)}",F=new CSSStyleSheet;F.replaceSync(St);class b extends HTMLElement{static _visibleCountAttribute="visible-count";static _cyclicalNavigationAttribute="cyclical-navigation";_currentIndex=0;_visibleCount=3;_cyclicalNavigation=!1;_MIN_VISIBLE=1;_MAX_VISIBLE=5;_slotElement=null;_navPrevButton=null;_navNextButton=null;_buttonsWrapper=null;_slotChangeListener=null;_keyDownListener=null;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(F)}static get observedAttributes(){return[b._visibleCountAttribute,b._cyclicalNavigationAttribute]}get visibleButtons(){const t=this.getAttribute(b._visibleCountAttribute);if(t!==null&&t!==n){const e=parseInt(t,10);return Math.max(this._MIN_VISIBLE,Math.min(this._MAX_VISIBLE,e))}return this._visibleCount}set visibleButtons(t){const e=Math.max(this._MIN_VISIBLE,Math.min(this._MAX_VISIBLE,t));this.setAttribute(b._visibleCountAttribute,String(e))}get cyclicalNavigation(){return this.hasAttribute(b._cyclicalNavigationAttribute)}set cyclicalNavigation(t){t?this.setAttribute(b._cyclicalNavigationAttribute,n):this.removeAttribute(b._cyclicalNavigationAttribute)}connectedCallback(){this._render(),this._cacheElements(),this._setupSlotListener(),this._setupKeyboardListener(),this._updateButtonVisibility()}disconnectedCallback(){this._removeSlotListener(),this._removeKeyboardListener()}attributeChangedCallback(t,e,s){t===b._visibleCountAttribute?(this._visibleCount=this.visibleButtons,this._buttonsWrapper!==null&&this._buttonsWrapper.style.setProperty("--bar-menu-visible-count",String(this.visibleButtons)),this._updateButtonVisibility()):t===b._cyclicalNavigationAttribute&&(this._cyclicalNavigation=this.cyclicalNavigation,this._updateButtonVisibility())}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=At)}_cacheElements(){this._slotElement=this.shadowRoot?.querySelector("slot")??null,this._navPrevButton=this.shadowRoot?.querySelector(".nav-prev")??null,this._navNextButton=this.shadowRoot?.querySelector(".nav-next")??null,this._buttonsWrapper=this.shadowRoot?.querySelector(".buttons-wrapper")??null,this._buttonsWrapper!==null&&this._buttonsWrapper.style.setProperty("--bar-menu-visible-count",String(this.visibleButtons)),this._navPrevButton!==null&&(this._navPrevButton.setAttribute("aria-label","Previous"),this._navPrevButton.addEventListener(v.CLICK,()=>{this._scrollPrevious()})),this._navNextButton!==null&&(this._navNextButton.setAttribute("aria-label","Next"),this._navNextButton.addEventListener(v.CLICK,()=>{this._scrollNext()}))}_setupSlotListener(){this._slotElement!==null&&(this._slotChangeListener=()=>{this._currentIndex=0,this._updateButtonVisibility()},this._slotElement.addEventListener("slotchange",this._slotChangeListener))}_removeSlotListener(){this._slotElement!==null&&this._slotChangeListener!==null&&this._slotElement.removeEventListener("slotchange",this._slotChangeListener)}_setupKeyboardListener(){this._keyDownListener=t=>{t.key==="ArrowLeft"?(t.preventDefault(),this._scrollPrevious()):t.key==="ArrowRight"&&(t.preventDefault(),this._scrollNext())},this.addEventListener(C.KEY_DOWN,this._keyDownListener)}_removeKeyboardListener(){this._keyDownListener!==null&&this.removeEventListener(C.KEY_DOWN,this._keyDownListener)}_getSlottedButtons(){return this._slotElement===null?[]:this._slotElement.assignedElements()}_updateButtonVisibility(t){const e=this._getSlottedButtons(),s=e.length,r=this.visibleButtons,o=this._currentIndex,d=Math.min(o+r,s);e.forEach((a,c)=>{const I=c>=o&&c<d,m=a;I||(a.classList.remove("visible-button"),a.classList.remove("animating"),m.style.display="none")}),t!==void 0?(e[0]?.offsetHeight,e.forEach((a,c)=>{if(c>=o&&c<d){const m=a;m.style.display="inline-flex",a.classList.add("animating");const wt=c%this.visibleButtons*50;m.style.transitionDelay=`${wt}ms`}}),e[0]?.offsetHeight,e.forEach((a,c)=>{c>=o&&c<d&&a.classList.add("visible-button")}),setTimeout(()=>{e.forEach(a=>{a.classList.remove("animating"),a.style.transitionDelay=n})},400)):e.forEach((a,c)=>{const I=c>=o&&c<d,m=a;I&&(m.style.display="inline-flex",a.classList.add("visible-button"))}),this._updateNavigationButtons(s,r)}_updateNavigationButtons(t,e){const s=t>e,r=this._currentIndex+e<t,o=this._currentIndex===0,d=!r;this._navPrevButton!==null&&(s?(this._navPrevButton.classList.add("visible"),this._navPrevButton.disabled=!this._cyclicalNavigation&&o):this._navPrevButton.classList.remove("visible")),this._navNextButton!==null&&(s?(this._navNextButton.classList.add("visible"),this._navNextButton.disabled=!this._cyclicalNavigation&&d):this._navNextButton.classList.remove("visible"))}_scrollPrevious(){const t=this._getSlottedButtons().length,e=this.visibleButtons;this._currentIndex>0?(this._currentIndex=Math.max(0,this._currentIndex-e),this._updateButtonVisibility("previous")):this._cyclicalNavigation&&t>e&&(this._currentIndex=Math.max(0,t-e),this._updateButtonVisibility("previous"))}_scrollNext(){const t=this._getSlottedButtons().length,e=this.visibleButtons,s=this._currentIndex+e;s<t?(this._currentIndex=s,this._updateButtonVisibility("next")):this._cyclicalNavigation&&t>e&&(this._currentIndex=0,this._updateButtonVisibility("next"))}scrollToButton(t){const e=this._getSlottedButtons().length,s=this.visibleButtons;t>=0&&t<e&&(this._currentIndex=Math.max(0,Math.min(t,e-s)),this._updateButtonVisibility())}getVisibleButtons(){return this._getSlottedButtons().filter(t=>t.classList.contains("visible-button"))}getAllButtons(){return this._getSlottedButtons()}getCurrentIndex(){return this._currentIndex}}const Lt=Object.freeze(Object.defineProperty({__proto__:null,BarMenuComponent:b,selector:"bar-menu"},Symbol.toStringTag,{value:"Module"}));l.APPLICATION_NAME=y,l.BarMenu=Lt,l.BaseButton=Y,l.BaseDialog=ht,l.CUSTOM_MESSAGES=f,l.ConfirmButton=st,l.ConfirmationDialog=ft,l.HeaderBodyFooterDialog=_t,l.NextButton=dt,l.PreviousButton=ot,l.UndoButton=Z,l.WebComponentsRegistry=z,l.clearThemes=N,l.switchTheme=j,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@albi_scando/as-design-system-lib",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.4",
|
|
4
4
|
"description": "A library of reusable, strongly typed Web Components built with TypeScript, designed for creating consistent and maintainable user interfaces.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": {
|
|
@@ -55,8 +55,8 @@
|
|
|
55
55
|
"@semantic-release/git": "^10.0.1",
|
|
56
56
|
"@semantic-release/github": "^12.0.3",
|
|
57
57
|
"@semantic-release/npm": "^13.1.3",
|
|
58
|
-
"@storybook/addon-docs": "10.3.
|
|
59
|
-
"@storybook/html-vite": "10.3.
|
|
58
|
+
"@storybook/addon-docs": "10.3.3",
|
|
59
|
+
"@storybook/html-vite": "10.3.3",
|
|
60
60
|
"@types/node": "^25.2.1",
|
|
61
61
|
"@types/numeric": "^1.2.6",
|
|
62
62
|
"@vitest/coverage-v8": "^4.0.18",
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"eslint-plugin-prettier": "^5.5.5",
|
|
70
70
|
"eslint-plugin-regexp": "^3.0.0",
|
|
71
71
|
"eslint-plugin-security": "^3.0.1",
|
|
72
|
-
"eslint-plugin-storybook": "10.3.
|
|
72
|
+
"eslint-plugin-storybook": "10.3.3",
|
|
73
73
|
"globals": "^17.3.0",
|
|
74
74
|
"http-server": "^14.1.1",
|
|
75
75
|
"husky": "^9.1.7",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"prettier": "3.8.1",
|
|
78
78
|
"sass": "^1.97.3",
|
|
79
79
|
"semantic-release": "^25.0.3",
|
|
80
|
-
"storybook": "10.3.
|
|
80
|
+
"storybook": "10.3.3",
|
|
81
81
|
"typedoc": "^0.28.16",
|
|
82
82
|
"typescript": "^5.9.3",
|
|
83
83
|
"typescript-eslint": "^8.54.0",
|
|
@@ -88,7 +88,8 @@
|
|
|
88
88
|
"vitest": "^4.0.18"
|
|
89
89
|
},
|
|
90
90
|
"peerDependencies": {
|
|
91
|
-
"@albi_scando/as-const-lib": "^1.
|
|
91
|
+
"@albi_scando/as-const-lib": "^1.12.0",
|
|
92
|
+
"@albi_scando/as-const-themes-lib": "^1.0.0",
|
|
92
93
|
"@albi_scando/as-mixins-lib": "^1.1.0",
|
|
93
94
|
"@fontsource/material-symbols-outlined": "^5.2.36"
|
|
94
95
|
},
|