@albi_scando/as-design-system-lib 1.7.1 → 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.
|
|
@@ -67,14 +67,15 @@ const A = {
|
|
|
67
67
|
LIGHT_BLUE: "light-blue",
|
|
68
68
|
DARK: "dark",
|
|
69
69
|
DARK_PURPLE: "dark-purple"
|
|
70
|
-
},
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
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">
|
|
74
75
|
<slot></slot>
|
|
75
76
|
</button>
|
|
76
|
-
`,
|
|
77
|
-
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);
|
|
78
79
|
class i extends HTMLElement {
|
|
79
80
|
/**
|
|
80
81
|
* @see HTMLButtonElement.autofocus
|
|
@@ -214,7 +215,7 @@ class i extends HTMLElement {
|
|
|
214
215
|
* Syncs host attributes to the internal button element.
|
|
215
216
|
*/
|
|
216
217
|
_render() {
|
|
217
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
218
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = V, this._syncAttributes());
|
|
218
219
|
}
|
|
219
220
|
/**
|
|
220
221
|
* Adds event listeners to the component.
|
|
@@ -351,17 +352,17 @@ class i extends HTMLElement {
|
|
|
351
352
|
});
|
|
352
353
|
}
|
|
353
354
|
}
|
|
354
|
-
const
|
|
355
|
+
const yt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
355
356
|
__proto__: null,
|
|
356
357
|
BaseButtonComponent: i,
|
|
357
|
-
selector:
|
|
358
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
358
|
+
selector: D
|
|
359
|
+
}, Symbol.toStringTag, { value: "Module" })), z = `<button title="Undo" part="button">
|
|
359
360
|
<span class="material-symbols-outlined">undo</span>
|
|
360
361
|
<span>Undo</span>
|
|
361
362
|
</button>
|
|
362
|
-
`,
|
|
363
|
-
I.replaceSync(
|
|
364
|
-
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 {
|
|
365
366
|
/**
|
|
366
367
|
* @constructor
|
|
367
368
|
* @ignore
|
|
@@ -385,7 +386,7 @@ class F extends i {
|
|
|
385
386
|
* Renders the component's HTML structure.
|
|
386
387
|
*/
|
|
387
388
|
_render() {
|
|
388
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
389
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = z, this._syncAttributes());
|
|
389
390
|
}
|
|
390
391
|
/**
|
|
391
392
|
* It finds the closest parent dialog and
|
|
@@ -400,17 +401,17 @@ class F extends i {
|
|
|
400
401
|
e !== null && (this.commandfor = e.id);
|
|
401
402
|
}
|
|
402
403
|
}
|
|
403
|
-
const S = "undo-button",
|
|
404
|
+
const S = "undo-button", gt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
404
405
|
__proto__: null,
|
|
405
|
-
UndoButtonComponent:
|
|
406
|
+
UndoButtonComponent: U,
|
|
406
407
|
selector: S
|
|
407
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
408
|
+
}, Symbol.toStringTag, { value: "Module" })), K = `<button title="Confirm" part="button">
|
|
408
409
|
<span class="material-symbols-outlined">check</span>
|
|
409
410
|
<span>Confirm</span>
|
|
410
411
|
</button>
|
|
411
|
-
`,
|
|
412
|
-
O.replaceSync(
|
|
413
|
-
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 {
|
|
414
415
|
/**
|
|
415
416
|
* @constructor
|
|
416
417
|
* @ignore
|
|
@@ -434,7 +435,7 @@ class B extends i {
|
|
|
434
435
|
* Renders the component's HTML structure.
|
|
435
436
|
*/
|
|
436
437
|
_render() {
|
|
437
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
438
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = K, this._syncAttributes());
|
|
438
439
|
}
|
|
439
440
|
/**
|
|
440
441
|
* It finds the closest parent dialog and
|
|
@@ -449,16 +450,16 @@ class B extends i {
|
|
|
449
450
|
e !== null && (this.commandfor = e.id);
|
|
450
451
|
}
|
|
451
452
|
}
|
|
452
|
-
const w = "confirm-button",
|
|
453
|
+
const w = "confirm-button", mt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
453
454
|
__proto__: null,
|
|
454
|
-
ConfirmButtonComponent:
|
|
455
|
+
ConfirmButtonComponent: W,
|
|
455
456
|
selector: w
|
|
456
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
457
|
+
}, Symbol.toStringTag, { value: "Module" })), G = `<button part="button">
|
|
457
458
|
<span class="material-symbols-outlined">chevron_left</span>
|
|
458
459
|
</button>
|
|
459
|
-
`,
|
|
460
|
-
R.replaceSync(
|
|
461
|
-
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 {
|
|
462
463
|
static _disabledAttribute = "disabled";
|
|
463
464
|
static _titleAttribute = "title";
|
|
464
465
|
/**
|
|
@@ -485,13 +486,13 @@ class f extends i {
|
|
|
485
486
|
* Updates the title visibility based on disabled state.
|
|
486
487
|
*/
|
|
487
488
|
attributeChangedCallback(t, e, s) {
|
|
488
|
-
super.attributeChangedCallback(t, e, s), t ===
|
|
489
|
+
super.attributeChangedCallback(t, e, s), t === m._disabledAttribute && this._updateTitle();
|
|
489
490
|
}
|
|
490
491
|
/**
|
|
491
492
|
* Renders the component's HTML structure.
|
|
492
493
|
*/
|
|
493
494
|
_render() {
|
|
494
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
495
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = G, this._syncAttributes());
|
|
495
496
|
}
|
|
496
497
|
/**
|
|
497
498
|
* Updates the title attribute based on disabled state.
|
|
@@ -501,19 +502,19 @@ class f extends i {
|
|
|
501
502
|
const t = this.shadowRoot?.querySelector(
|
|
502
503
|
"button"
|
|
503
504
|
);
|
|
504
|
-
t !== null && (this.disabled ? t.removeAttribute(
|
|
505
|
+
t !== null && (this.disabled ? t.removeAttribute(m._titleAttribute) : t.setAttribute(m._titleAttribute, "Previous"));
|
|
505
506
|
}
|
|
506
507
|
}
|
|
507
|
-
const
|
|
508
|
+
const X = "previous-button", ft = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
508
509
|
__proto__: null,
|
|
509
|
-
PreviousButtonComponent:
|
|
510
|
-
selector:
|
|
511
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
510
|
+
PreviousButtonComponent: m,
|
|
511
|
+
selector: X
|
|
512
|
+
}, Symbol.toStringTag, { value: "Module" })), J = `<button part="button">
|
|
512
513
|
<span class="material-symbols-outlined">chevron_right</span>
|
|
513
514
|
</button>
|
|
514
|
-
`,
|
|
515
|
-
k.replaceSync(
|
|
516
|
-
class
|
|
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);
|
|
517
|
+
class f extends i {
|
|
517
518
|
static _disabledAttribute = "disabled";
|
|
518
519
|
static _titleAttribute = "title";
|
|
519
520
|
/**
|
|
@@ -540,13 +541,13 @@ class m extends i {
|
|
|
540
541
|
* Updates the title visibility based on disabled state.
|
|
541
542
|
*/
|
|
542
543
|
attributeChangedCallback(t, e, s) {
|
|
543
|
-
super.attributeChangedCallback(t, e, s), t ===
|
|
544
|
+
super.attributeChangedCallback(t, e, s), t === f._disabledAttribute && this._updateTitle();
|
|
544
545
|
}
|
|
545
546
|
/**
|
|
546
547
|
* Renders the component's HTML structure.
|
|
547
548
|
*/
|
|
548
549
|
_render() {
|
|
549
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
550
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = J, this._syncAttributes());
|
|
550
551
|
}
|
|
551
552
|
/**
|
|
552
553
|
* Updates the title attribute based on disabled state.
|
|
@@ -556,18 +557,18 @@ class m extends i {
|
|
|
556
557
|
const t = this.shadowRoot?.querySelector(
|
|
557
558
|
"button"
|
|
558
559
|
);
|
|
559
|
-
t !== null && (this.disabled ? t.removeAttribute(
|
|
560
|
+
t !== null && (this.disabled ? t.removeAttribute(f._titleAttribute) : t.setAttribute(f._titleAttribute, "Next"));
|
|
560
561
|
}
|
|
561
562
|
}
|
|
562
|
-
const
|
|
563
|
+
const Z = "next-button", _t = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
563
564
|
__proto__: null,
|
|
564
|
-
NextButtonComponent:
|
|
565
|
-
selector:
|
|
566
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
565
|
+
NextButtonComponent: f,
|
|
566
|
+
selector: Z
|
|
567
|
+
}, Symbol.toStringTag, { value: "Module" })), tt = `<dialog part="dialog">
|
|
567
568
|
<slot></slot>
|
|
568
569
|
</dialog>
|
|
569
|
-
`,
|
|
570
|
-
N.replaceSync(
|
|
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);
|
|
571
572
|
class b extends HTMLElement {
|
|
572
573
|
/**
|
|
573
574
|
* @see HTMLDialogElement.closedBy
|
|
@@ -653,7 +654,7 @@ class b extends HTMLElement {
|
|
|
653
654
|
* @returns {void}
|
|
654
655
|
*/
|
|
655
656
|
_render() {
|
|
656
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
657
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = tt, this._syncAttributes());
|
|
657
658
|
}
|
|
658
659
|
/**
|
|
659
660
|
* Syncs a single attribute from host to dialog element.
|
|
@@ -698,11 +699,11 @@ class b extends HTMLElement {
|
|
|
698
699
|
}, 300);
|
|
699
700
|
}
|
|
700
701
|
}
|
|
701
|
-
const
|
|
702
|
+
const it = "base-dialog", At = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
702
703
|
__proto__: null,
|
|
703
704
|
BaseDialogComponent: b,
|
|
704
|
-
selector:
|
|
705
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
705
|
+
selector: it
|
|
706
|
+
}, Symbol.toStringTag, { value: "Module" })), st = `<dialog part="dialog">
|
|
706
707
|
<header part="header">
|
|
707
708
|
<h2></h2>
|
|
708
709
|
</header>
|
|
@@ -714,7 +715,7 @@ const et = "base-dialog", _t = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Obj
|
|
|
714
715
|
<undo-button></undo-button>
|
|
715
716
|
</footer>
|
|
716
717
|
</dialog>
|
|
717
|
-
`,
|
|
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">
|
|
718
719
|
<header part="header">
|
|
719
720
|
<slot name="header"></slot>
|
|
720
721
|
</header>
|
|
@@ -725,8 +726,8 @@ const et = "base-dialog", _t = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Obj
|
|
|
725
726
|
<slot name="footer"></slot>
|
|
726
727
|
</footer>
|
|
727
728
|
</dialog>
|
|
728
|
-
`,
|
|
729
|
-
C.replaceSync(
|
|
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);
|
|
730
731
|
class L extends b {
|
|
731
732
|
_sectionNames = ["header", "body", "footer"];
|
|
732
733
|
_handleSlotChange = () => {
|
|
@@ -753,7 +754,7 @@ class L extends b {
|
|
|
753
754
|
* @returns {void}
|
|
754
755
|
*/
|
|
755
756
|
_render() {
|
|
756
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
757
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = nt, this._syncAttributes());
|
|
757
758
|
}
|
|
758
759
|
/**
|
|
759
760
|
* Adds slot listeners so sections can react to projected content changes.
|
|
@@ -800,7 +801,7 @@ class L extends b {
|
|
|
800
801
|
}
|
|
801
802
|
}
|
|
802
803
|
const M = new CSSStyleSheet();
|
|
803
|
-
M.replaceSync(
|
|
804
|
+
M.replaceSync(rt);
|
|
804
805
|
class d extends L {
|
|
805
806
|
/**
|
|
806
807
|
* The title of the confirmation dialog.
|
|
@@ -877,7 +878,7 @@ class d extends L {
|
|
|
877
878
|
* @returns {void}
|
|
878
879
|
*/
|
|
879
880
|
_render() {
|
|
880
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
881
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = st, this._syncAttributes());
|
|
881
882
|
}
|
|
882
883
|
/**
|
|
883
884
|
* Syncs a single attribute from host to the DOM elements.
|
|
@@ -974,19 +975,19 @@ class d extends L {
|
|
|
974
975
|
this.dispatchEvent(t), this._value = void 0;
|
|
975
976
|
};
|
|
976
977
|
}
|
|
977
|
-
const
|
|
978
|
+
const at = "confirmation-dialog", lt = {
|
|
978
979
|
CONFIRMATION_DIALOG_CONFIRM: _.CONFIRMATION_DIALOG_CONFIRM,
|
|
979
980
|
CONFIRMATION_DIALOG_UNDO: _.CONFIRMATION_DIALOG_UNDO
|
|
980
|
-
},
|
|
981
|
+
}, St = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
981
982
|
__proto__: null,
|
|
982
|
-
COMPONENT_CUSTOM_MESSAGES:
|
|
983
|
+
COMPONENT_CUSTOM_MESSAGES: lt,
|
|
983
984
|
ConfirmationDialogComponent: d,
|
|
984
|
-
selector:
|
|
985
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
985
|
+
selector: at
|
|
986
|
+
}, Symbol.toStringTag, { value: "Module" })), ut = "header-body-footer-dialog", wt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
986
987
|
__proto__: null,
|
|
987
988
|
HeaderBodyFooterDialogComponent: L,
|
|
988
|
-
selector:
|
|
989
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
989
|
+
selector: ut
|
|
990
|
+
}, Symbol.toStringTag, { value: "Module" })), dt = `<div class="bar-menu-container">
|
|
990
991
|
<previous-button class="nav-prev" part="nav-prev-button"></previous-button>
|
|
991
992
|
|
|
992
993
|
<div class="buttons-wrapper" part="buttons-wrapper">
|
|
@@ -995,8 +996,8 @@ const ot = "confirmation-dialog", at = {
|
|
|
995
996
|
|
|
996
997
|
<next-button class="nav-next" part="nav-next-button"></next-button>
|
|
997
998
|
</div>
|
|
998
|
-
`,
|
|
999
|
-
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);
|
|
1000
1001
|
class c extends HTMLElement {
|
|
1001
1002
|
static _visibleCountAttribute = "visible-count";
|
|
1002
1003
|
static _cyclicalNavigationAttribute = "cyclical-navigation";
|
|
@@ -1075,7 +1076,7 @@ class c extends HTMLElement {
|
|
|
1075
1076
|
* Render the component's Shadow DOM structure
|
|
1076
1077
|
*/
|
|
1077
1078
|
_render() {
|
|
1078
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
1079
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = dt);
|
|
1079
1080
|
}
|
|
1080
1081
|
/**
|
|
1081
1082
|
* Cache Shadow DOM elements for performance
|
|
@@ -1207,23 +1208,24 @@ class c extends HTMLElement {
|
|
|
1207
1208
|
return this._currentIndex;
|
|
1208
1209
|
}
|
|
1209
1210
|
}
|
|
1210
|
-
const
|
|
1211
|
+
const ht = "bar-menu", Lt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
1211
1212
|
__proto__: null,
|
|
1212
1213
|
BarMenuComponent: c,
|
|
1213
|
-
selector:
|
|
1214
|
+
selector: ht
|
|
1214
1215
|
}, Symbol.toStringTag, { value: "Module" }));
|
|
1215
1216
|
export {
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1217
|
+
bt as APPLICATION_NAME,
|
|
1218
|
+
Lt as BarMenu,
|
|
1219
|
+
yt as BaseButton,
|
|
1220
|
+
At as BaseDialog,
|
|
1220
1221
|
_ as CUSTOM_MESSAGES,
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1222
|
+
mt as ConfirmButton,
|
|
1223
|
+
St as ConfirmationDialog,
|
|
1224
|
+
wt as HeaderBodyFooterDialog,
|
|
1225
|
+
_t as NextButton,
|
|
1225
1226
|
ft as PreviousButton,
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1227
|
+
gt as UndoButton,
|
|
1228
|
+
vt as WebComponentsRegistry,
|
|
1229
|
+
j as clearThemes,
|
|
1230
|
+
pt as switchTheme
|
|
1229
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 w={ANY:"any",NONE:"none"},I={KEY_DOWN:"keydown"},b={CLICK:"click"},
|
|
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,7 +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/
|
|
5
|
+
export { switchTheme, clearThemes } from './utils/themes.utils.ts';
|
|
6
6
|
export * as BaseButton from './web-components/buttons/base-button/main.ts';
|
|
7
7
|
export * as UndoButton from './web-components/buttons/undo-button/main.ts';
|
|
8
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": {
|
|
@@ -1,6 +0,0 @@
|
|
|
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;
|