@albi_scando/as-design-system-lib 1.7.0 → 1.7.2
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 bt = "as-design-system-lib";
|
|
2
|
+
class vt {
|
|
3
3
|
/**
|
|
4
4
|
* Creates an instance of WebComponentsRegistry.
|
|
5
5
|
* Registers all custom elements provided in the map of components.
|
|
@@ -36,13 +36,13 @@ class ht {
|
|
|
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 _ = {
|
|
40
40
|
CONFIRMATION_DIALOG_CONFIRM: "confirmation-dialog-confirm",
|
|
41
41
|
CONFIRMATION_DIALOG_UNDO: "confirmation-dialog-undo"
|
|
42
|
-
},
|
|
42
|
+
}, o = "", p = {
|
|
43
43
|
SHOW_MODAL: "show-modal",
|
|
44
44
|
CLOSE: "close"
|
|
45
|
-
},
|
|
45
|
+
}, H = {
|
|
46
46
|
CUSTOM_CROSSHAIR: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
|
47
47
|
<!-- White border (underneath) -->
|
|
48
48
|
<line x1="16" y1="2" x2="16" y2="30" stroke="white" stroke-width="5"/>
|
|
@@ -53,19 +53,29 @@ const m = {
|
|
|
53
53
|
<line x1="2" y1="16" x2="30" y2="16" stroke="black" stroke-width="2"/>
|
|
54
54
|
</svg>`
|
|
55
55
|
};
|
|
56
|
-
`${btoa(
|
|
56
|
+
`${btoa(H.CUSTOM_CROSSHAIR)}`;
|
|
57
57
|
const A = {
|
|
58
58
|
ANY: "any",
|
|
59
59
|
NONE: "none"
|
|
60
|
-
},
|
|
60
|
+
}, E = {
|
|
61
61
|
KEY_DOWN: "keydown"
|
|
62
62
|
}, h = {
|
|
63
63
|
CLICK: "click"
|
|
64
|
-
},
|
|
64
|
+
}, P = {
|
|
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">
|
|
65
75
|
<slot></slot>
|
|
66
76
|
</button>
|
|
67
|
-
`,
|
|
68
|
-
x.replaceSync(
|
|
77
|
+
`, q = ":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)}", x = new CSSStyleSheet();
|
|
78
|
+
x.replaceSync(q);
|
|
69
79
|
class i extends HTMLElement {
|
|
70
80
|
/**
|
|
71
81
|
* @see HTMLButtonElement.autofocus
|
|
@@ -342,17 +352,17 @@ class i extends HTMLElement {
|
|
|
342
352
|
});
|
|
343
353
|
}
|
|
344
354
|
}
|
|
345
|
-
const
|
|
355
|
+
const yt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
346
356
|
__proto__: null,
|
|
347
357
|
BaseButtonComponent: i,
|
|
348
|
-
selector:
|
|
349
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
358
|
+
selector: D
|
|
359
|
+
}, Symbol.toStringTag, { value: "Module" })), z = `<button title="Undo" part="button">
|
|
350
360
|
<span class="material-symbols-outlined">undo</span>
|
|
351
361
|
<span>Undo</span>
|
|
352
362
|
</button>
|
|
353
|
-
`,
|
|
354
|
-
I.replaceSync(
|
|
355
|
-
class
|
|
363
|
+
`, F = "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)}", I = new CSSStyleSheet();
|
|
364
|
+
I.replaceSync(F);
|
|
365
|
+
class U extends i {
|
|
356
366
|
/**
|
|
357
367
|
* @constructor
|
|
358
368
|
* @ignore
|
|
@@ -376,7 +386,7 @@ class z extends i {
|
|
|
376
386
|
* Renders the component's HTML structure.
|
|
377
387
|
*/
|
|
378
388
|
_render() {
|
|
379
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
389
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = z, this._syncAttributes());
|
|
380
390
|
}
|
|
381
391
|
/**
|
|
382
392
|
* It finds the closest parent dialog and
|
|
@@ -391,17 +401,17 @@ class z extends i {
|
|
|
391
401
|
e !== null && (this.commandfor = e.id);
|
|
392
402
|
}
|
|
393
403
|
}
|
|
394
|
-
const S = "undo-button",
|
|
404
|
+
const S = "undo-button", gt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
395
405
|
__proto__: null,
|
|
396
|
-
UndoButtonComponent:
|
|
406
|
+
UndoButtonComponent: U,
|
|
397
407
|
selector: S
|
|
398
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
408
|
+
}, Symbol.toStringTag, { value: "Module" })), K = `<button title="Confirm" part="button">
|
|
399
409
|
<span class="material-symbols-outlined">check</span>
|
|
400
410
|
<span>Confirm</span>
|
|
401
411
|
</button>
|
|
402
|
-
`,
|
|
403
|
-
O.replaceSync(
|
|
404
|
-
class
|
|
412
|
+
`, B = "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)}", O = new CSSStyleSheet();
|
|
413
|
+
O.replaceSync(B);
|
|
414
|
+
class W extends i {
|
|
405
415
|
/**
|
|
406
416
|
* @constructor
|
|
407
417
|
* @ignore
|
|
@@ -425,7 +435,7 @@ class K extends i {
|
|
|
425
435
|
* Renders the component's HTML structure.
|
|
426
436
|
*/
|
|
427
437
|
_render() {
|
|
428
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
438
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = K, this._syncAttributes());
|
|
429
439
|
}
|
|
430
440
|
/**
|
|
431
441
|
* It finds the closest parent dialog and
|
|
@@ -440,16 +450,16 @@ class K extends i {
|
|
|
440
450
|
e !== null && (this.commandfor = e.id);
|
|
441
451
|
}
|
|
442
452
|
}
|
|
443
|
-
const w = "confirm-button",
|
|
453
|
+
const w = "confirm-button", mt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
444
454
|
__proto__: null,
|
|
445
|
-
ConfirmButtonComponent:
|
|
455
|
+
ConfirmButtonComponent: W,
|
|
446
456
|
selector: w
|
|
447
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
457
|
+
}, Symbol.toStringTag, { value: "Module" })), G = `<button part="button">
|
|
448
458
|
<span class="material-symbols-outlined">chevron_left</span>
|
|
449
459
|
</button>
|
|
450
|
-
`,
|
|
451
|
-
|
|
452
|
-
class
|
|
460
|
+
`, Y = "button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", R = new CSSStyleSheet();
|
|
461
|
+
R.replaceSync(Y);
|
|
462
|
+
class m extends i {
|
|
453
463
|
static _disabledAttribute = "disabled";
|
|
454
464
|
static _titleAttribute = "title";
|
|
455
465
|
/**
|
|
@@ -457,7 +467,7 @@ class g extends i {
|
|
|
457
467
|
* @ignore
|
|
458
468
|
*/
|
|
459
469
|
constructor() {
|
|
460
|
-
super(), this.shadowRoot?.adoptedStyleSheets.push(
|
|
470
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push(R), this.command = p.CLOSE;
|
|
461
471
|
}
|
|
462
472
|
/**
|
|
463
473
|
* Specifies which attributes should be observed for changes.
|
|
@@ -476,13 +486,13 @@ class g extends i {
|
|
|
476
486
|
* Updates the title visibility based on disabled state.
|
|
477
487
|
*/
|
|
478
488
|
attributeChangedCallback(t, e, s) {
|
|
479
|
-
super.attributeChangedCallback(t, e, s), t ===
|
|
489
|
+
super.attributeChangedCallback(t, e, s), t === m._disabledAttribute && this._updateTitle();
|
|
480
490
|
}
|
|
481
491
|
/**
|
|
482
492
|
* Renders the component's HTML structure.
|
|
483
493
|
*/
|
|
484
494
|
_render() {
|
|
485
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
495
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = G, this._syncAttributes());
|
|
486
496
|
}
|
|
487
497
|
/**
|
|
488
498
|
* Updates the title attribute based on disabled state.
|
|
@@ -492,18 +502,18 @@ class g extends i {
|
|
|
492
502
|
const t = this.shadowRoot?.querySelector(
|
|
493
503
|
"button"
|
|
494
504
|
);
|
|
495
|
-
t !== null && (this.disabled ? t.removeAttribute(
|
|
505
|
+
t !== null && (this.disabled ? t.removeAttribute(m._titleAttribute) : t.setAttribute(m._titleAttribute, "Previous"));
|
|
496
506
|
}
|
|
497
507
|
}
|
|
498
|
-
const
|
|
508
|
+
const X = "previous-button", ft = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
499
509
|
__proto__: null,
|
|
500
|
-
PreviousButtonComponent:
|
|
501
|
-
selector:
|
|
502
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
510
|
+
PreviousButtonComponent: m,
|
|
511
|
+
selector: X
|
|
512
|
+
}, Symbol.toStringTag, { value: "Module" })), J = `<button part="button">
|
|
503
513
|
<span class="material-symbols-outlined">chevron_right</span>
|
|
504
514
|
</button>
|
|
505
|
-
`,
|
|
506
|
-
k.replaceSync(
|
|
515
|
+
`, Q = "button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", k = new CSSStyleSheet();
|
|
516
|
+
k.replaceSync(Q);
|
|
507
517
|
class f extends i {
|
|
508
518
|
static _disabledAttribute = "disabled";
|
|
509
519
|
static _titleAttribute = "title";
|
|
@@ -537,7 +547,7 @@ class f extends i {
|
|
|
537
547
|
* Renders the component's HTML structure.
|
|
538
548
|
*/
|
|
539
549
|
_render() {
|
|
540
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
550
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = J, this._syncAttributes());
|
|
541
551
|
}
|
|
542
552
|
/**
|
|
543
553
|
* Updates the title attribute based on disabled state.
|
|
@@ -550,15 +560,15 @@ class f extends i {
|
|
|
550
560
|
t !== null && (this.disabled ? t.removeAttribute(f._titleAttribute) : t.setAttribute(f._titleAttribute, "Next"));
|
|
551
561
|
}
|
|
552
562
|
}
|
|
553
|
-
const
|
|
563
|
+
const Z = "next-button", _t = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
554
564
|
__proto__: null,
|
|
555
565
|
NextButtonComponent: f,
|
|
556
|
-
selector:
|
|
557
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
566
|
+
selector: Z
|
|
567
|
+
}, Symbol.toStringTag, { value: "Module" })), tt = `<dialog part="dialog">
|
|
558
568
|
<slot></slot>
|
|
559
569
|
</dialog>
|
|
560
|
-
`,
|
|
561
|
-
|
|
570
|
+
`, et = "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}}", N = new CSSStyleSheet();
|
|
571
|
+
N.replaceSync(et);
|
|
562
572
|
class b extends HTMLElement {
|
|
563
573
|
/**
|
|
564
574
|
* @see HTMLDialogElement.closedBy
|
|
@@ -574,7 +584,7 @@ class b extends HTMLElement {
|
|
|
574
584
|
* @ignore
|
|
575
585
|
*/
|
|
576
586
|
constructor() {
|
|
577
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(
|
|
587
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(N);
|
|
578
588
|
}
|
|
579
589
|
/**
|
|
580
590
|
* Specifies which attributes should be observed for changes.
|
|
@@ -644,7 +654,7 @@ class b extends HTMLElement {
|
|
|
644
654
|
* @returns {void}
|
|
645
655
|
*/
|
|
646
656
|
_render() {
|
|
647
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
657
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = tt, this._syncAttributes());
|
|
648
658
|
}
|
|
649
659
|
/**
|
|
650
660
|
* Syncs a single attribute from host to dialog element.
|
|
@@ -689,11 +699,11 @@ class b extends HTMLElement {
|
|
|
689
699
|
}, 300);
|
|
690
700
|
}
|
|
691
701
|
}
|
|
692
|
-
const
|
|
702
|
+
const it = "base-dialog", At = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
693
703
|
__proto__: null,
|
|
694
704
|
BaseDialogComponent: b,
|
|
695
|
-
selector:
|
|
696
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
705
|
+
selector: it
|
|
706
|
+
}, Symbol.toStringTag, { value: "Module" })), st = `<dialog part="dialog">
|
|
697
707
|
<header part="header">
|
|
698
708
|
<h2></h2>
|
|
699
709
|
</header>
|
|
@@ -705,7 +715,7 @@ const tt = "base-dialog", ft = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Obj
|
|
|
705
715
|
<undo-button></undo-button>
|
|
706
716
|
</footer>
|
|
707
717
|
</dialog>
|
|
708
|
-
`,
|
|
718
|
+
`, rt = "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}", nt = `<dialog part="dialog">
|
|
709
719
|
<header part="header">
|
|
710
720
|
<slot name="header"></slot>
|
|
711
721
|
</header>
|
|
@@ -716,9 +726,9 @@ const tt = "base-dialog", ft = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Obj
|
|
|
716
726
|
<slot name="footer"></slot>
|
|
717
727
|
</footer>
|
|
718
728
|
</dialog>
|
|
719
|
-
`,
|
|
720
|
-
C.replaceSync(
|
|
721
|
-
class
|
|
729
|
+
`, ot = '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}', C = new CSSStyleSheet();
|
|
730
|
+
C.replaceSync(ot);
|
|
731
|
+
class L extends b {
|
|
722
732
|
_sectionNames = ["header", "body", "footer"];
|
|
723
733
|
_handleSlotChange = () => {
|
|
724
734
|
this._updateSectionState();
|
|
@@ -744,7 +754,7 @@ class E extends b {
|
|
|
744
754
|
* @returns {void}
|
|
745
755
|
*/
|
|
746
756
|
_render() {
|
|
747
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
757
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = nt, this._syncAttributes());
|
|
748
758
|
}
|
|
749
759
|
/**
|
|
750
760
|
* Adds slot listeners so sections can react to projected content changes.
|
|
@@ -791,8 +801,8 @@ class E extends b {
|
|
|
791
801
|
}
|
|
792
802
|
}
|
|
793
803
|
const M = new CSSStyleSheet();
|
|
794
|
-
M.replaceSync(
|
|
795
|
-
class d extends
|
|
804
|
+
M.replaceSync(rt);
|
|
805
|
+
class d extends L {
|
|
796
806
|
/**
|
|
797
807
|
* The title of the confirmation dialog.
|
|
798
808
|
*/
|
|
@@ -829,7 +839,7 @@ class d extends E {
|
|
|
829
839
|
*/
|
|
830
840
|
static get observedAttributes() {
|
|
831
841
|
return [
|
|
832
|
-
...
|
|
842
|
+
...L.observedAttributes,
|
|
833
843
|
d.textAttribute,
|
|
834
844
|
d.headlineAttribute,
|
|
835
845
|
d.valueAttribute
|
|
@@ -868,7 +878,7 @@ class d extends E {
|
|
|
868
878
|
* @returns {void}
|
|
869
879
|
*/
|
|
870
880
|
_render() {
|
|
871
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
881
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = st, this._syncAttributes());
|
|
872
882
|
}
|
|
873
883
|
/**
|
|
874
884
|
* Syncs a single attribute from host to the DOM elements.
|
|
@@ -940,7 +950,7 @@ class d extends E {
|
|
|
940
950
|
*/
|
|
941
951
|
_handleConfirm = () => {
|
|
942
952
|
const t = new CustomEvent(
|
|
943
|
-
|
|
953
|
+
_.CONFIRMATION_DIALOG_CONFIRM,
|
|
944
954
|
{
|
|
945
955
|
bubbles: !0,
|
|
946
956
|
composed: !0,
|
|
@@ -953,7 +963,7 @@ class d extends E {
|
|
|
953
963
|
};
|
|
954
964
|
_handleUndo = () => {
|
|
955
965
|
const t = new CustomEvent(
|
|
956
|
-
|
|
966
|
+
_.CONFIRMATION_DIALOG_UNDO,
|
|
957
967
|
{
|
|
958
968
|
bubbles: !0,
|
|
959
969
|
composed: !0,
|
|
@@ -965,19 +975,19 @@ class d extends E {
|
|
|
965
975
|
this.dispatchEvent(t), this._value = void 0;
|
|
966
976
|
};
|
|
967
977
|
}
|
|
968
|
-
const
|
|
969
|
-
CONFIRMATION_DIALOG_CONFIRM:
|
|
970
|
-
CONFIRMATION_DIALOG_UNDO:
|
|
971
|
-
},
|
|
978
|
+
const at = "confirmation-dialog", lt = {
|
|
979
|
+
CONFIRMATION_DIALOG_CONFIRM: _.CONFIRMATION_DIALOG_CONFIRM,
|
|
980
|
+
CONFIRMATION_DIALOG_UNDO: _.CONFIRMATION_DIALOG_UNDO
|
|
981
|
+
}, St = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
972
982
|
__proto__: null,
|
|
973
|
-
COMPONENT_CUSTOM_MESSAGES:
|
|
983
|
+
COMPONENT_CUSTOM_MESSAGES: lt,
|
|
974
984
|
ConfirmationDialogComponent: d,
|
|
975
|
-
selector: nt
|
|
976
|
-
}, Symbol.toStringTag, { value: "Module" })), at = "header-body-footer-dialog", _t = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
977
|
-
__proto__: null,
|
|
978
|
-
HeaderBodyFooterDialogComponent: E,
|
|
979
985
|
selector: at
|
|
980
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
986
|
+
}, Symbol.toStringTag, { value: "Module" })), ut = "header-body-footer-dialog", wt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
987
|
+
__proto__: null,
|
|
988
|
+
HeaderBodyFooterDialogComponent: L,
|
|
989
|
+
selector: ut
|
|
990
|
+
}, Symbol.toStringTag, { value: "Module" })), dt = `<div class="bar-menu-container">
|
|
981
991
|
<previous-button class="nav-prev" part="nav-prev-button"></previous-button>
|
|
982
992
|
|
|
983
993
|
<div class="buttons-wrapper" part="buttons-wrapper">
|
|
@@ -986,8 +996,8 @@ const nt = "confirmation-dialog", ot = {
|
|
|
986
996
|
|
|
987
997
|
<next-button class="nav-next" part="nav-next-button"></next-button>
|
|
988
998
|
</div>
|
|
989
|
-
`,
|
|
990
|
-
T.replaceSync(
|
|
999
|
+
`, ct = ":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)}", T = new CSSStyleSheet();
|
|
1000
|
+
T.replaceSync(ct);
|
|
991
1001
|
class c extends HTMLElement {
|
|
992
1002
|
static _visibleCountAttribute = "visible-count";
|
|
993
1003
|
static _cyclicalNavigationAttribute = "cyclical-navigation";
|
|
@@ -1066,7 +1076,7 @@ class c extends HTMLElement {
|
|
|
1066
1076
|
* Render the component's Shadow DOM structure
|
|
1067
1077
|
*/
|
|
1068
1078
|
_render() {
|
|
1069
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
1079
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = dt);
|
|
1070
1080
|
}
|
|
1071
1081
|
/**
|
|
1072
1082
|
* Cache Shadow DOM elements for performance
|
|
@@ -1104,13 +1114,13 @@ class c extends HTMLElement {
|
|
|
1104
1114
|
_setupKeyboardListener() {
|
|
1105
1115
|
this._keyDownListener = (t) => {
|
|
1106
1116
|
t.key === "ArrowLeft" ? (t.preventDefault(), this._scrollPrevious()) : t.key === "ArrowRight" && (t.preventDefault(), this._scrollNext());
|
|
1107
|
-
}, this.addEventListener(
|
|
1117
|
+
}, this.addEventListener(E.KEY_DOWN, this._keyDownListener);
|
|
1108
1118
|
}
|
|
1109
1119
|
/**
|
|
1110
1120
|
* Remove keyboard listener
|
|
1111
1121
|
*/
|
|
1112
1122
|
_removeKeyboardListener() {
|
|
1113
|
-
this._keyDownListener !== null && this.removeEventListener(
|
|
1123
|
+
this._keyDownListener !== null && this.removeEventListener(E.KEY_DOWN, this._keyDownListener);
|
|
1114
1124
|
}
|
|
1115
1125
|
/**
|
|
1116
1126
|
* Get all slotted button elements
|
|
@@ -1124,8 +1134,8 @@ class c extends HTMLElement {
|
|
|
1124
1134
|
_updateButtonVisibility(t) {
|
|
1125
1135
|
const e = this._getSlottedButtons(), s = e.length, r = this.visibleButtons, n = this._currentIndex, l = Math.min(n + r, s);
|
|
1126
1136
|
e.forEach((a, u) => {
|
|
1127
|
-
const
|
|
1128
|
-
|
|
1137
|
+
const g = u >= n && u < l, v = a;
|
|
1138
|
+
g || (a.classList.remove("visible-button"), a.classList.remove("animating"), v.style.display = "none");
|
|
1129
1139
|
}), t !== void 0 ? (e[0]?.offsetHeight, e.forEach((a, u) => {
|
|
1130
1140
|
if (u >= n && u < l) {
|
|
1131
1141
|
const v = a;
|
|
@@ -1140,8 +1150,8 @@ class c extends HTMLElement {
|
|
|
1140
1150
|
a.classList.remove("animating"), a.style.transitionDelay = o;
|
|
1141
1151
|
});
|
|
1142
1152
|
}, 400)) : e.forEach((a, u) => {
|
|
1143
|
-
const
|
|
1144
|
-
|
|
1153
|
+
const g = u >= n && u < l, v = a;
|
|
1154
|
+
g && (v.style.display = "inline-flex", a.classList.add("visible-button"));
|
|
1145
1155
|
}), this._updateNavigationButtons(s, r);
|
|
1146
1156
|
}
|
|
1147
1157
|
/**
|
|
@@ -1198,22 +1208,24 @@ class c extends HTMLElement {
|
|
|
1198
1208
|
return this._currentIndex;
|
|
1199
1209
|
}
|
|
1200
1210
|
}
|
|
1201
|
-
const
|
|
1211
|
+
const ht = "bar-menu", Lt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
1202
1212
|
__proto__: null,
|
|
1203
1213
|
BarMenuComponent: c,
|
|
1204
|
-
selector:
|
|
1214
|
+
selector: ht
|
|
1205
1215
|
}, Symbol.toStringTag, { value: "Module" }));
|
|
1206
1216
|
export {
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1217
|
+
bt as APPLICATION_NAME,
|
|
1218
|
+
Lt as BarMenu,
|
|
1219
|
+
yt as BaseButton,
|
|
1220
|
+
At as BaseDialog,
|
|
1221
|
+
_ as CUSTOM_MESSAGES,
|
|
1222
|
+
mt as ConfirmButton,
|
|
1223
|
+
St as ConfirmationDialog,
|
|
1224
|
+
wt as HeaderBodyFooterDialog,
|
|
1225
|
+
_t as NextButton,
|
|
1226
|
+
ft as PreviousButton,
|
|
1227
|
+
gt as UndoButton,
|
|
1228
|
+
vt as WebComponentsRegistry,
|
|
1229
|
+
j as clearThemes,
|
|
1230
|
+
pt as switchTheme
|
|
1219
1231
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(l,f){typeof exports=="object"&&typeof module<"u"?f(exports):typeof define=="function"&&define.amd?define(["exports"],f):(l=typeof globalThis<"u"?globalThis:l||self,f(l["as-design-system-lib"]={}))})(this,(function(l){"use strict";const f="as-design-system-lib";class
|
|
1
|
+
(function(l,f){typeof exports=="object"&&typeof module<"u"?f(exports):typeof define=="function"&&define.amd?define(["exports"],f):(l=typeof globalThis<"u"?globalThis:l||self,f(l["as-design-system-lib"]={}))})(this,(function(l){"use strict";const f="as-design-system-lib";class j{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 g={CONFIRMATION_DIALOG_CONFIRM:"confirmation-dialog-confirm",CONFIRMATION_DIALOG_UNDO:"confirmation-dialog-undo"},n="",p={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 w={ANY:"any",NONE:"none"},I={KEY_DOWN:"keydown"},b={CLICK:"click"},D={FERRARI:"ferrari",LIGHT:"light",LIGHT_BLUE:"light-blue",DARK:"dark",DARK_PURPLE:"dark-purple"},V=A=>{O(),document.body.classList.add(A)},O=()=>{document.body.classList.remove(...Object.values(D))},q="base-button",z=`<button part="button">
|
|
10
10
|
<slot></slot>
|
|
11
11
|
</button>
|
|
12
|
-
`,
|
|
12
|
+
`,U=":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)}",R=new CSSStyleSheet;R.replaceSync(U);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(R)}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=z,this._syncAttributes())}_addEventListeners(){this.buttonElement.addEventListener(b.CLICK,this._handleClick)}_removeEventListeners(){this.buttonElement.addEventListener(b.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 p.SHOW_MODAL:e.showModal?.();break;case p.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 F=Object.freeze(Object.defineProperty({__proto__:null,BaseButtonComponent:i,selector:q},Symbol.toStringTag,{value:"Module"})),K=`<button title="Undo" part="button">
|
|
13
13
|
<span class="material-symbols-outlined">undo</span>
|
|
14
14
|
<span>Undo</span>
|
|
15
15
|
</button>
|
|
16
|
-
`,
|
|
16
|
+
`,B="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)}",N=new CSSStyleSheet;N.replaceSync(B);class W extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(N),this.command=p.CLOSE,this.title="Undo"}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._setCommandForAttribute(),this._addEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=K,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 E="undo-button",G=Object.freeze(Object.defineProperty({__proto__:null,UndoButtonComponent:W,selector:E},Symbol.toStringTag,{value:"Module"})),Y=`<button title="Confirm" part="button">
|
|
17
17
|
<span class="material-symbols-outlined">check</span>
|
|
18
18
|
<span>Confirm</span>
|
|
19
19
|
</button>
|
|
20
|
-
`,
|
|
20
|
+
`,X="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)}",k=new CSSStyleSheet;k.replaceSync(X);class J extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(k),this.command=p.CLOSE,this.title="Confirm"}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._setCommandForAttribute(),this._addEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Y,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 L="confirm-button",Q=Object.freeze(Object.defineProperty({__proto__:null,ConfirmButtonComponent:J,selector:L},Symbol.toStringTag,{value:"Module"})),Z=`<button part="button">
|
|
21
21
|
<span class="material-symbols-outlined">chevron_left</span>
|
|
22
22
|
</button>
|
|
23
|
-
`,
|
|
23
|
+
`,tt="button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",C=new CSSStyleSheet;C.replaceSync(tt);class m extends i{static _disabledAttribute="disabled";static _titleAttribute="title";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(C),this.command=p.CLOSE}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}attributeChangedCallback(t,e,s){super.attributeChangedCallback(t,e,s),t===m._disabledAttribute&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Z,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");t!==null&&(this.disabled?t.removeAttribute(m._titleAttribute):t.setAttribute(m._titleAttribute,"Previous"))}}const et=Object.freeze(Object.defineProperty({__proto__:null,PreviousButtonComponent:m,selector:"previous-button"},Symbol.toStringTag,{value:"Module"})),it=`<button part="button">
|
|
24
24
|
<span class="material-symbols-outlined">chevron_right</span>
|
|
25
25
|
</button>
|
|
26
|
-
`,
|
|
26
|
+
`,st="button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",M=new CSSStyleSheet;M.replaceSync(st);class _ extends i{static _disabledAttribute="disabled";static _titleAttribute="title";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(M),this.command=p.CLOSE}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}attributeChangedCallback(t,e,s){super.attributeChangedCallback(t,e,s),t===_._disabledAttribute&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=it,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");t!==null&&(this.disabled?t.removeAttribute(_._titleAttribute):t.setAttribute(_._titleAttribute,"Next"))}}const rt=Object.freeze(Object.defineProperty({__proto__:null,NextButtonComponent:_,selector:"next-button"},Symbol.toStringTag,{value:"Module"})),nt=`<dialog part="dialog">
|
|
27
27
|
<slot></slot>
|
|
28
28
|
</dialog>
|
|
29
|
-
`,
|
|
29
|
+
`,ot="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}}",T=new CSSStyleSheet;T.replaceSync(ot);class v extends HTMLElement{static closedByAttribute="closedby";_closedBy=w.ANY;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(T)}static get observedAttributes(){return[v.closedByAttribute]}get dialogElement(){return this.shadowRoot?.querySelector("dialog")}get command(){return this.getAttribute(v.closedByAttribute)??w.ANY}get closedBy(){return this._closedBy}set closedBy(t){this._closedBy=t,this.setAttribute(v.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=nt,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(){v.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 at=Object.freeze(Object.defineProperty({__proto__:null,BaseDialogComponent:v,selector:"base-dialog"},Symbol.toStringTag,{value:"Module"})),lt=`<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
|
+
`,dt="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">
|
|
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
|
+
`,ct='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}',$=new CSSStyleSheet;$.replaceSync(ct);class x extends v{_sectionNames=["header","body","footer"];_handleSlotChange=()=>{this._updateSectionState()};constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push($)}static get observedAttributes(){return v.observedAttributes}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=ut,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 P=new CSSStyleSheet;P.replaceSync(dt);class u extends x{_headline=n;_text=n;_value=void 0;static textAttribute="text";static headlineAttribute="headline";static valueAttribute="value";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(P)}static get observedAttributes(){return[...x.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=w.NONE}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=lt,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(L)?.addEventListener(b.CLICK,this._handleConfirm),this.shadowRoot?.querySelector(E)?.addEventListener(b.CLICK,this._handleUndo)}_removeEventListeners(){super._removeEventListeners(),this.shadowRoot?.querySelector(L)?.removeEventListener(b.CLICK,this._handleConfirm),this.shadowRoot?.querySelector(E)?.removeEventListener(b.CLICK,this._handleUndo)}_handleConfirm=()=>{const t=new CustomEvent(g.CONFIRMATION_DIALOG_CONFIRM,{bubbles:!0,composed:!0,detail:{value:this._value}});this.dispatchEvent(t)};_handleUndo=()=>{const t=new CustomEvent(g.CONFIRMATION_DIALOG_UNDO,{bubbles:!0,composed:!0,detail:{value:this._value}});this.dispatchEvent(t),this._value=void 0}}const ht="confirmation-dialog",bt={CONFIRMATION_DIALOG_CONFIRM:g.CONFIRMATION_DIALOG_CONFIRM,CONFIRMATION_DIALOG_UNDO:g.CONFIRMATION_DIALOG_UNDO},vt=Object.freeze(Object.defineProperty({__proto__:null,COMPONENT_CUSTOM_MESSAGES:bt,ConfirmationDialogComponent:u,selector:ht},Symbol.toStringTag,{value:"Module"})),pt=Object.freeze(Object.defineProperty({__proto__:null,HeaderBodyFooterDialogComponent:x,selector:"header-body-footer-dialog"},Symbol.toStringTag,{value:"Module"})),yt=`<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
|
+
`,ft=":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)}",H=new CSSStyleSheet;H.replaceSync(ft);class h 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(H)}static get observedAttributes(){return[h._visibleCountAttribute,h._cyclicalNavigationAttribute]}get visibleButtons(){const t=this.getAttribute(h._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(h._visibleCountAttribute,String(e))}get cyclicalNavigation(){return this.hasAttribute(h._cyclicalNavigationAttribute)}set cyclicalNavigation(t){t?this.setAttribute(h._cyclicalNavigationAttribute,n):this.removeAttribute(h._cyclicalNavigationAttribute)}connectedCallback(){this._render(),this._cacheElements(),this._setupSlotListener(),this._setupKeyboardListener(),this._updateButtonVisibility()}disconnectedCallback(){this._removeSlotListener(),this._removeKeyboardListener()}attributeChangedCallback(t,e,s){t===h._visibleCountAttribute?(this._visibleCount=this.visibleButtons,this._buttonsWrapper!==null&&this._buttonsWrapper.style.setProperty("--bar-menu-visible-count",String(this.visibleButtons)),this._updateButtonVisibility()):t===h._cyclicalNavigationAttribute&&(this._cyclicalNavigation=this.cyclicalNavigation,this._updateButtonVisibility())}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=yt)}_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(b.CLICK,()=>{this._scrollPrevious()})),this._navNextButton!==null&&(this._navNextButton.setAttribute("aria-label","Next"),this._navNextButton.addEventListener(b.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(I.KEY_DOWN,this._keyDownListener)}_removeKeyboardListener(){this._keyDownListener!==null&&this.removeEventListener(I.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 S=c>=o&&c<d,y=a;S||(a.classList.remove("visible-button"),a.classList.remove("animating"),y.style.display="none")}),t!==void 0?(e[0]?.offsetHeight,e.forEach((a,c)=>{if(c>=o&&c<d){const y=a;y.style.display="inline-flex",a.classList.add("animating");const mt=c%this.visibleButtons*50;y.style.transitionDelay=`${mt}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 S=c>=o&&c<d,y=a;S&&(y.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 gt=Object.freeze(Object.defineProperty({__proto__:null,BarMenuComponent:h,selector:"bar-menu"},Symbol.toStringTag,{value:"Module"}));l.APPLICATION_NAME=f,l.BarMenu=gt,l.BaseButton=F,l.BaseDialog=at,l.CUSTOM_MESSAGES=g,l.ConfirmButton=Q,l.ConfirmationDialog=vt,l.HeaderBodyFooterDialog=pt,l.NextButton=rt,l.PreviousButton=et,l.UndoButton=G,l.WebComponentsRegistry=j,l.clearThemes=O,l.switchTheme=V,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));
|
package/dist/types/main.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import { APPLICATION_NAME } from './constants/application.constant.ts';
|
|
|
2
2
|
export { APPLICATION_NAME };
|
|
3
3
|
export { WebComponentsRegistry } from './web-components/registry.ts';
|
|
4
4
|
export { CUSTOM_MESSAGES } from './constants/custom-messages.const.ts';
|
|
5
|
+
export { switchTheme, clearThemes } from './utils/themes.utils.ts';
|
|
5
6
|
export * as BaseButton from './web-components/buttons/base-button/main.ts';
|
|
6
7
|
export * as UndoButton from './web-components/buttons/undo-button/main.ts';
|
|
7
8
|
export * as ConfirmButton from './web-components/buttons/confirm-button/main.ts';
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Themes } from '@albi_scando/as-const-lib';
|
|
2
|
+
/**
|
|
3
|
+
* Utility function to switch the theme of the application by manipulating the body class.
|
|
4
|
+
* @param theme The theme to apply.
|
|
5
|
+
*/
|
|
6
|
+
export declare const switchTheme: (theme: Themes) => void;
|
|
7
|
+
/**
|
|
8
|
+
* Utility function to clear all theme classes from the body element.
|
|
9
|
+
*/
|
|
10
|
+
export declare const clearThemes: () => void;
|
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.2",
|
|
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": {
|