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