@albi_scando/as-design-system-lib 1.8.1 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/as-design-system-lib.es.js +282 -232
- package/dist/as-design-system-lib.umd.js +26 -22
- package/dist/styles/index.css +379 -197
- package/dist/styles/index.css.map +1 -1
- package/dist/types/main.d.ts +1 -0
- package/dist/types/web-components/buttons/close-button/component.d.ts +32 -0
- package/dist/types/web-components/buttons/close-button/main.d.ts +2 -0
- package/dist/types/web-components/buttons/close-button/selector.d.ts +4 -0
- package/package.json +5 -5
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
const
|
|
2
|
-
class
|
|
1
|
+
const Ee = "as-design-system-lib";
|
|
2
|
+
class xe {
|
|
3
3
|
/**
|
|
4
4
|
* Creates an instance of WebComponentsRegistry.
|
|
5
5
|
* Registers all custom elements provided in the map of components.
|
|
@@ -89,7 +89,7 @@ const T = {
|
|
|
89
89
|
LIGHT: "light",
|
|
90
90
|
LIGHT_BLUE: "light-blue",
|
|
91
91
|
WATER: "water"
|
|
92
|
-
},
|
|
92
|
+
}, ct = /* @__PURE__ */ new Map([
|
|
93
93
|
[
|
|
94
94
|
u.COSMO,
|
|
95
95
|
{
|
|
@@ -180,16 +180,16 @@ const T = {
|
|
|
180
180
|
value: x.WATER
|
|
181
181
|
}
|
|
182
182
|
]
|
|
183
|
-
]),
|
|
184
|
-
|
|
185
|
-
const t =
|
|
183
|
+
]), ke = (O) => {
|
|
184
|
+
ut();
|
|
185
|
+
const t = ct.get(O)?.value;
|
|
186
186
|
t !== void 0 && document.body.classList.add(t);
|
|
187
|
-
},
|
|
187
|
+
}, ut = () => {
|
|
188
188
|
document.body.classList.remove(...Object.values(u));
|
|
189
|
-
},
|
|
189
|
+
}, ht = "base-button", d = "", M = {
|
|
190
190
|
SHOW_MODAL: "show-modal",
|
|
191
191
|
CLOSE: "close"
|
|
192
|
-
},
|
|
192
|
+
}, bt = {
|
|
193
193
|
CUSTOM_CROSSHAIR: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
|
194
194
|
<!-- White border (underneath) -->
|
|
195
195
|
<line x1="16" y1="2" x2="16" y2="30" stroke="white" stroke-width="5"/>
|
|
@@ -200,19 +200,19 @@ const T = {
|
|
|
200
200
|
<line x1="2" y1="16" x2="30" y2="16" stroke="black" stroke-width="2"/>
|
|
201
201
|
</svg>`
|
|
202
202
|
};
|
|
203
|
-
`${btoa(
|
|
204
|
-
const
|
|
203
|
+
`${btoa(bt.CUSTOM_CROSSHAIR)}`;
|
|
204
|
+
const j = {
|
|
205
205
|
ANY: "any",
|
|
206
206
|
NONE: "none"
|
|
207
|
-
},
|
|
207
|
+
}, D = {
|
|
208
208
|
KEY_DOWN: "keydown"
|
|
209
209
|
}, R = {
|
|
210
210
|
CLICK: "click"
|
|
211
|
-
},
|
|
211
|
+
}, vt = `<button part="button">
|
|
212
212
|
<slot></slot>
|
|
213
213
|
</button>
|
|
214
|
-
`,
|
|
215
|
-
U.replaceSync(
|
|
214
|
+
`, pt = "*{box-sizing:border-box}:where(button,input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::file-selector-button{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);font-family:var(--font-family-base);letter-spacing:var(--letter-spacing-wide);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-secondary);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-sm);transition:background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast),filter var(--transition-fast)}: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:.35;cursor:not-allowed;box-shadow:none}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):hover){background:var(--color-hover-bg-secondary);border-color:var(--color-hover-border-secondary);box-shadow:var(--shadow-md)}: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);box-shadow:var(--shadow-sm)}:where(button,input[type=button],input[type=submit],input[type=reset]):focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}:where(input[type=file]){inline-size:100%;max-inline-size:max-content;background-color:var(--color-bg-secondary)}", U = new CSSStyleSheet();
|
|
215
|
+
U.replaceSync(pt);
|
|
216
216
|
class s extends HTMLElement {
|
|
217
217
|
/**
|
|
218
218
|
* @see HTMLButtonElement.autofocus
|
|
@@ -352,7 +352,7 @@ class s extends HTMLElement {
|
|
|
352
352
|
* Syncs host attributes to the internal button element.
|
|
353
353
|
*/
|
|
354
354
|
_render() {
|
|
355
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
355
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = vt, this._syncAttributes());
|
|
356
356
|
}
|
|
357
357
|
/**
|
|
358
358
|
* Adds event listeners to the component.
|
|
@@ -400,10 +400,10 @@ class s extends HTMLElement {
|
|
|
400
400
|
return;
|
|
401
401
|
const e = t;
|
|
402
402
|
switch (this.command) {
|
|
403
|
-
case
|
|
403
|
+
case M.SHOW_MODAL:
|
|
404
404
|
e.showModal?.();
|
|
405
405
|
break;
|
|
406
|
-
case
|
|
406
|
+
case M.CLOSE:
|
|
407
407
|
e.close?.();
|
|
408
408
|
break;
|
|
409
409
|
}
|
|
@@ -489,23 +489,23 @@ class s extends HTMLElement {
|
|
|
489
489
|
});
|
|
490
490
|
}
|
|
491
491
|
}
|
|
492
|
-
const
|
|
492
|
+
const Le = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
493
493
|
__proto__: null,
|
|
494
494
|
BaseButtonComponent: s,
|
|
495
|
-
selector:
|
|
495
|
+
selector: ht
|
|
496
496
|
}, Symbol.toStringTag, { value: "Module" })), gt = `<button title="Undo" part="button">
|
|
497
497
|
<span class="material-symbols-outlined">undo</span>
|
|
498
498
|
<span>Undo</span>
|
|
499
499
|
</button>
|
|
500
|
-
`,
|
|
501
|
-
K.replaceSync(
|
|
502
|
-
class
|
|
500
|
+
`, ft = "*{box-sizing:border-box}button[part=button]{background:var(--color-warning);font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{filter:brightness(1.2)}", K = new CSSStyleSheet();
|
|
501
|
+
K.replaceSync(ft);
|
|
502
|
+
class mt extends s {
|
|
503
503
|
/**
|
|
504
504
|
* @constructor
|
|
505
505
|
* @ignore
|
|
506
506
|
*/
|
|
507
507
|
constructor() {
|
|
508
|
-
super(), this.shadowRoot?.adoptedStyleSheets.push(K), this.command =
|
|
508
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push(K), this.command = M.CLOSE, this.title = "Undo";
|
|
509
509
|
}
|
|
510
510
|
/**
|
|
511
511
|
* Specifies which attributes should be observed for changes.
|
|
@@ -538,23 +538,72 @@ class ft extends s {
|
|
|
538
538
|
e !== null && (this.commandfor = e.id);
|
|
539
539
|
}
|
|
540
540
|
}
|
|
541
|
-
const
|
|
541
|
+
const F = "undo-button", Re = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
542
542
|
__proto__: null,
|
|
543
|
-
UndoButtonComponent:
|
|
544
|
-
selector:
|
|
545
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
543
|
+
UndoButtonComponent: mt,
|
|
544
|
+
selector: F
|
|
545
|
+
}, Symbol.toStringTag, { value: "Module" })), yt = `<div class="tooltip">Close</div>
|
|
546
|
+
<button part="button" title="Close">
|
|
547
|
+
<span class="material-symbols-outlined">close</span>
|
|
548
|
+
</button>
|
|
549
|
+
`, At = "*{box-sizing:border-box}:host{position:relative;display:inline-flex}.tooltip{position:absolute;top:auto;bottom:calc(100% + .5rem);left:50%;right:auto;transform:translate(-50%);width:max-content;height:auto;padding:var(--spacing-1) var(--spacing-2);background-color:var(--color-bg-tertiary, #1e1e2e);color:var(--color-text-primary);font-family:var(--font-family-base);font-size:var(--font-size-xs);border-radius:var(--border-radius-md);box-shadow:var(--shadow-lg);white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity var(--transition-fast),visibility var(--transition-fast);z-index:10000;margin:0}button[part=button]{background:var(--color-error);border:none;border-radius:var(--border-radius-md);padding:var(--spacing-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;aspect-ratio:1;transition:all var(--transition-base);box-shadow:var(--shadow-md);position:relative}button[part=button]:hover{filter:brightness(1.2)}:host(:hover) .tooltip{opacity:1;visibility:visible}", G = new CSSStyleSheet();
|
|
550
|
+
G.replaceSync(At);
|
|
551
|
+
class _t extends s {
|
|
552
|
+
/**
|
|
553
|
+
* @constructor
|
|
554
|
+
* @ignore
|
|
555
|
+
*/
|
|
556
|
+
constructor() {
|
|
557
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push(G), this.command = M.CLOSE, this.title = "Close";
|
|
558
|
+
}
|
|
559
|
+
/**
|
|
560
|
+
* Specifies which attributes should be observed for changes.
|
|
561
|
+
*/
|
|
562
|
+
static get observedAttributes() {
|
|
563
|
+
return s.observedAttributes;
|
|
564
|
+
}
|
|
565
|
+
/**
|
|
566
|
+
* Lifecycle hook invoked when the component is inserted into the DOM.
|
|
567
|
+
*/
|
|
568
|
+
connectedCallback() {
|
|
569
|
+
this._render(), this._setCommandForAttribute(), this._addEventListeners();
|
|
570
|
+
}
|
|
571
|
+
/**
|
|
572
|
+
* Renders the component's HTML structure.
|
|
573
|
+
*/
|
|
574
|
+
_render() {
|
|
575
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = yt, this._syncAttributes());
|
|
576
|
+
}
|
|
577
|
+
/**
|
|
578
|
+
* It finds the closest parent dialog and
|
|
579
|
+
* sets the commandfor attribute to its ID.
|
|
580
|
+
*
|
|
581
|
+
* @returns {void}
|
|
582
|
+
*/
|
|
583
|
+
_setCommandForAttribute() {
|
|
584
|
+
let t = this.getRootNode();
|
|
585
|
+
"host" in t && t.host !== null && t.host !== void 0 && (t = t.host);
|
|
586
|
+
const e = t instanceof Element ? t.closest("base-dialog") ?? t.closest("confirmation-dialog") : null;
|
|
587
|
+
e !== null && (this.commandfor = e.id);
|
|
588
|
+
}
|
|
589
|
+
}
|
|
590
|
+
const wt = "close-button", ze = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
591
|
+
__proto__: null,
|
|
592
|
+
CloseButtonComponent: _t,
|
|
593
|
+
selector: wt
|
|
594
|
+
}, Symbol.toStringTag, { value: "Module" })), St = `<button title="Confirm" part="button">
|
|
546
595
|
<span class="material-symbols-outlined">check</span>
|
|
547
596
|
<span>Confirm</span>
|
|
548
597
|
</button>
|
|
549
|
-
`,
|
|
550
|
-
|
|
551
|
-
class
|
|
598
|
+
`, Et = "*{box-sizing:border-box}button[part=button]{background:var(--color-success);font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{filter:brightness(1.2)}", C = new CSSStyleSheet();
|
|
599
|
+
C.replaceSync(Et);
|
|
600
|
+
class xt extends s {
|
|
552
601
|
/**
|
|
553
602
|
* @constructor
|
|
554
603
|
* @ignore
|
|
555
604
|
*/
|
|
556
605
|
constructor() {
|
|
557
|
-
super(), this.shadowRoot?.adoptedStyleSheets.push(
|
|
606
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push(C), this.command = M.CLOSE, this.title = "Confirm";
|
|
558
607
|
}
|
|
559
608
|
/**
|
|
560
609
|
* Specifies which attributes should be observed for changes.
|
|
@@ -572,7 +621,7 @@ class At extends s {
|
|
|
572
621
|
* Renders the component's HTML structure.
|
|
573
622
|
*/
|
|
574
623
|
_render() {
|
|
575
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
624
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = St, this._syncAttributes());
|
|
576
625
|
}
|
|
577
626
|
/**
|
|
578
627
|
* It finds the closest parent dialog and
|
|
@@ -587,15 +636,15 @@ class At extends s {
|
|
|
587
636
|
e !== null && (this.commandfor = e.id);
|
|
588
637
|
}
|
|
589
638
|
}
|
|
590
|
-
const q = "confirm-button",
|
|
639
|
+
const q = "confirm-button", Me = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
591
640
|
__proto__: null,
|
|
592
|
-
ConfirmButtonComponent:
|
|
641
|
+
ConfirmButtonComponent: xt,
|
|
593
642
|
selector: q
|
|
594
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
643
|
+
}, Symbol.toStringTag, { value: "Module" })), kt = `<button part="button">
|
|
595
644
|
<span class="material-symbols-outlined">chevron_left</span>
|
|
596
645
|
</button>
|
|
597
|
-
`,
|
|
598
|
-
W.replaceSync(
|
|
646
|
+
`, Lt = "*{box-sizing:border-box}button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", W = new CSSStyleSheet();
|
|
647
|
+
W.replaceSync(Lt);
|
|
599
648
|
class H extends s {
|
|
600
649
|
static _disabledAttribute = "disabled";
|
|
601
650
|
static _titleAttribute = "title";
|
|
@@ -604,7 +653,7 @@ class H extends s {
|
|
|
604
653
|
* @ignore
|
|
605
654
|
*/
|
|
606
655
|
constructor() {
|
|
607
|
-
super(), this.shadowRoot?.adoptedStyleSheets.push(W), this.command =
|
|
656
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push(W), this.command = M.CLOSE;
|
|
608
657
|
}
|
|
609
658
|
/**
|
|
610
659
|
* Specifies which attributes should be observed for changes.
|
|
@@ -629,7 +678,7 @@ class H extends s {
|
|
|
629
678
|
* Renders the component's HTML structure.
|
|
630
679
|
*/
|
|
631
680
|
_render() {
|
|
632
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
681
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = kt, this._syncAttributes());
|
|
633
682
|
}
|
|
634
683
|
/**
|
|
635
684
|
* Updates the title attribute based on disabled state.
|
|
@@ -642,15 +691,15 @@ class H extends s {
|
|
|
642
691
|
t !== null && (this.disabled ? t.removeAttribute(H._titleAttribute) : t.setAttribute(H._titleAttribute, "Previous"));
|
|
643
692
|
}
|
|
644
693
|
}
|
|
645
|
-
const
|
|
694
|
+
const Rt = "previous-button", Oe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
646
695
|
__proto__: null,
|
|
647
696
|
PreviousButtonComponent: H,
|
|
648
|
-
selector:
|
|
649
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
697
|
+
selector: Rt
|
|
698
|
+
}, Symbol.toStringTag, { value: "Module" })), zt = `<button part="button">
|
|
650
699
|
<span class="material-symbols-outlined">chevron_right</span>
|
|
651
700
|
</button>
|
|
652
|
-
`,
|
|
653
|
-
|
|
701
|
+
`, Mt = "*{box-sizing:border-box}button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", Y = new CSSStyleSheet();
|
|
702
|
+
Y.replaceSync(Mt);
|
|
654
703
|
class N extends s {
|
|
655
704
|
static _disabledAttribute = "disabled";
|
|
656
705
|
static _titleAttribute = "title";
|
|
@@ -659,7 +708,7 @@ class N extends s {
|
|
|
659
708
|
* @ignore
|
|
660
709
|
*/
|
|
661
710
|
constructor() {
|
|
662
|
-
super(), this.shadowRoot?.adoptedStyleSheets.push(
|
|
711
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push(Y), this.command = M.CLOSE;
|
|
663
712
|
}
|
|
664
713
|
/**
|
|
665
714
|
* Specifies which attributes should be observed for changes.
|
|
@@ -684,7 +733,7 @@ class N extends s {
|
|
|
684
733
|
* Renders the component's HTML structure.
|
|
685
734
|
*/
|
|
686
735
|
_render() {
|
|
687
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
736
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = zt, this._syncAttributes());
|
|
688
737
|
}
|
|
689
738
|
/**
|
|
690
739
|
* Updates the title attribute based on disabled state.
|
|
@@ -697,15 +746,15 @@ class N extends s {
|
|
|
697
746
|
t !== null && (this.disabled ? t.removeAttribute(N._titleAttribute) : t.setAttribute(N._titleAttribute, "Next"));
|
|
698
747
|
}
|
|
699
748
|
}
|
|
700
|
-
const
|
|
749
|
+
const Ot = "next-button", $e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
701
750
|
__proto__: null,
|
|
702
751
|
NextButtonComponent: N,
|
|
703
|
-
selector:
|
|
704
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
752
|
+
selector: Ot
|
|
753
|
+
}, Symbol.toStringTag, { value: "Module" })), $t = `<dialog part="dialog">
|
|
705
754
|
<slot></slot>
|
|
706
755
|
</dialog>
|
|
707
|
-
`,
|
|
708
|
-
|
|
756
|
+
`, It = "*{box-sizing:border-box}dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-secondary);border-radius:var(--border-radius-xl);padding:var(--spacing-4);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}}", V = new CSSStyleSheet();
|
|
757
|
+
V.replaceSync(It);
|
|
709
758
|
class z extends HTMLElement {
|
|
710
759
|
/**
|
|
711
760
|
* @see HTMLDialogElement.closedBy
|
|
@@ -715,13 +764,13 @@ class z extends HTMLElement {
|
|
|
715
764
|
* Defines how the dialog can be closed.
|
|
716
765
|
* @see DialogClosedBy
|
|
717
766
|
*/
|
|
718
|
-
_closedBy =
|
|
767
|
+
_closedBy = j.ANY;
|
|
719
768
|
/**
|
|
720
769
|
* @constructor
|
|
721
770
|
* @ignore
|
|
722
771
|
*/
|
|
723
772
|
constructor() {
|
|
724
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(
|
|
773
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(V);
|
|
725
774
|
}
|
|
726
775
|
/**
|
|
727
776
|
* Specifies which attributes should be observed for changes.
|
|
@@ -733,7 +782,7 @@ class z extends HTMLElement {
|
|
|
733
782
|
return this.shadowRoot?.querySelector("dialog");
|
|
734
783
|
}
|
|
735
784
|
get command() {
|
|
736
|
-
return this.getAttribute(z.closedByAttribute) ??
|
|
785
|
+
return this.getAttribute(z.closedByAttribute) ?? j.ANY;
|
|
737
786
|
}
|
|
738
787
|
get closedBy() {
|
|
739
788
|
return this._closedBy;
|
|
@@ -791,7 +840,7 @@ class z extends HTMLElement {
|
|
|
791
840
|
* @returns {void}
|
|
792
841
|
*/
|
|
793
842
|
_render() {
|
|
794
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
843
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = $t, this._syncAttributes());
|
|
795
844
|
}
|
|
796
845
|
/**
|
|
797
846
|
* Syncs a single attribute from host to dialog element.
|
|
@@ -836,11 +885,11 @@ class z extends HTMLElement {
|
|
|
836
885
|
}, 300);
|
|
837
886
|
}
|
|
838
887
|
}
|
|
839
|
-
const
|
|
888
|
+
const Ht = "base-dialog", Ie = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
840
889
|
__proto__: null,
|
|
841
890
|
BaseDialogComponent: z,
|
|
842
|
-
selector:
|
|
843
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
891
|
+
selector: Ht
|
|
892
|
+
}, Symbol.toStringTag, { value: "Module" })), Nt = `<dialog part="dialog">
|
|
844
893
|
<header part="header">
|
|
845
894
|
<h2></h2>
|
|
846
895
|
</header>
|
|
@@ -852,7 +901,7 @@ const zt = "base-dialog", ke = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Obj
|
|
|
852
901
|
<undo-button></undo-button>
|
|
853
902
|
</footer>
|
|
854
903
|
</dialog>
|
|
855
|
-
`,
|
|
904
|
+
`, Tt = "*{box-sizing:border-box}dialog header[part=header] h2{margin:0;padding:0}dialog div[part=body] p{margin:0;padding:0}dialog footer[part=footer]{display:flex;gap:var(--gap-md);justify-content:flex-end}", jt = `<dialog part="dialog">
|
|
856
905
|
<header part="header">
|
|
857
906
|
<slot name="header"></slot>
|
|
858
907
|
</header>
|
|
@@ -863,9 +912,9 @@ const zt = "base-dialog", ke = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Obj
|
|
|
863
912
|
<slot name="footer"></slot>
|
|
864
913
|
</footer>
|
|
865
914
|
</dialog>
|
|
866
|
-
`,
|
|
867
|
-
|
|
868
|
-
class
|
|
915
|
+
`, Ft = '*{box-sizing:border-box}dialog[open]{max-width:100%;max-height:100%;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;overflow-y:auto}', B = new CSSStyleSheet();
|
|
916
|
+
B.replaceSync(Ft);
|
|
917
|
+
class P extends z {
|
|
869
918
|
_sectionNames = ["header", "body", "footer"];
|
|
870
919
|
_handleSlotChange = () => {
|
|
871
920
|
this._updateSectionState();
|
|
@@ -875,7 +924,7 @@ class D extends z {
|
|
|
875
924
|
* @ignore
|
|
876
925
|
*/
|
|
877
926
|
constructor() {
|
|
878
|
-
super(), this.shadowRoot?.adoptedStyleSheets.push(
|
|
927
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push(B);
|
|
879
928
|
}
|
|
880
929
|
/**
|
|
881
930
|
* Specifies which attributes should be observed for changes.
|
|
@@ -891,7 +940,7 @@ class D extends z {
|
|
|
891
940
|
* @returns {void}
|
|
892
941
|
*/
|
|
893
942
|
_render() {
|
|
894
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
943
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = jt, this._syncAttributes());
|
|
895
944
|
}
|
|
896
945
|
/**
|
|
897
946
|
* Adds slot listeners so sections can react to projected content changes.
|
|
@@ -937,9 +986,9 @@ class D extends z {
|
|
|
937
986
|
});
|
|
938
987
|
}
|
|
939
988
|
}
|
|
940
|
-
const
|
|
941
|
-
|
|
942
|
-
class
|
|
989
|
+
const X = new CSSStyleSheet();
|
|
990
|
+
X.replaceSync(Tt);
|
|
991
|
+
class g extends P {
|
|
943
992
|
/**
|
|
944
993
|
* The title of the confirmation dialog.
|
|
945
994
|
*/
|
|
@@ -968,7 +1017,7 @@ class p extends D {
|
|
|
968
1017
|
* @constructor
|
|
969
1018
|
*/
|
|
970
1019
|
constructor() {
|
|
971
|
-
super(), this.shadowRoot?.adoptedStyleSheets.push(
|
|
1020
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push(X);
|
|
972
1021
|
}
|
|
973
1022
|
/**
|
|
974
1023
|
* Specifies which attributes should be observed for changes.
|
|
@@ -976,23 +1025,23 @@ class p extends D {
|
|
|
976
1025
|
*/
|
|
977
1026
|
static get observedAttributes() {
|
|
978
1027
|
return [
|
|
979
|
-
...
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
1028
|
+
...P.observedAttributes,
|
|
1029
|
+
g.textAttribute,
|
|
1030
|
+
g.headlineAttribute,
|
|
1031
|
+
g.valueAttribute
|
|
983
1032
|
];
|
|
984
1033
|
}
|
|
985
1034
|
get headline() {
|
|
986
1035
|
return this._headline;
|
|
987
1036
|
}
|
|
988
1037
|
set headline(t) {
|
|
989
|
-
this._headline = t, this.setAttribute(
|
|
1038
|
+
this._headline = t, this.setAttribute(g.headlineAttribute, t);
|
|
990
1039
|
}
|
|
991
1040
|
get text() {
|
|
992
1041
|
return this._text;
|
|
993
1042
|
}
|
|
994
1043
|
set text(t) {
|
|
995
|
-
this._text = t, this.setAttribute(
|
|
1044
|
+
this._text = t, this.setAttribute(g.textAttribute, t);
|
|
996
1045
|
}
|
|
997
1046
|
get value() {
|
|
998
1047
|
return this._value;
|
|
@@ -1006,7 +1055,7 @@ class p extends D {
|
|
|
1006
1055
|
* @returns {void}
|
|
1007
1056
|
*/
|
|
1008
1057
|
connectedCallback() {
|
|
1009
|
-
this._render(), this._addEventListeners(), this.closedBy =
|
|
1058
|
+
this._render(), this._addEventListeners(), this.closedBy = j.NONE;
|
|
1010
1059
|
}
|
|
1011
1060
|
/**
|
|
1012
1061
|
* Renders the component's HTML structure.
|
|
@@ -1015,7 +1064,7 @@ class p extends D {
|
|
|
1015
1064
|
* @returns {void}
|
|
1016
1065
|
*/
|
|
1017
1066
|
_render() {
|
|
1018
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
1067
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = Nt, this._syncAttributes());
|
|
1019
1068
|
}
|
|
1020
1069
|
/**
|
|
1021
1070
|
* Syncs a single attribute from host to the DOM elements.
|
|
@@ -1024,21 +1073,21 @@ class p extends D {
|
|
|
1024
1073
|
* @returns {void}
|
|
1025
1074
|
*/
|
|
1026
1075
|
_syncAttribute(t) {
|
|
1027
|
-
if (
|
|
1076
|
+
if (g.observedAttributes.includes(t))
|
|
1028
1077
|
switch (t) {
|
|
1029
|
-
case
|
|
1078
|
+
case g.headlineAttribute: {
|
|
1030
1079
|
this._headline = this.getAttribute(t) ?? d;
|
|
1031
1080
|
const e = this.shadowRoot?.querySelector("h2");
|
|
1032
1081
|
e != null && (e.textContent = this._headline);
|
|
1033
1082
|
break;
|
|
1034
1083
|
}
|
|
1035
|
-
case
|
|
1084
|
+
case g.textAttribute: {
|
|
1036
1085
|
this._text = this.getAttribute(t) ?? d;
|
|
1037
1086
|
const e = this.shadowRoot?.querySelector("p");
|
|
1038
1087
|
e != null && (e.textContent = this._text);
|
|
1039
1088
|
break;
|
|
1040
1089
|
}
|
|
1041
|
-
case
|
|
1090
|
+
case g.valueAttribute: {
|
|
1042
1091
|
this._value = this.getAttribute(t);
|
|
1043
1092
|
break;
|
|
1044
1093
|
}
|
|
@@ -1055,7 +1104,7 @@ class p extends D {
|
|
|
1055
1104
|
* @returns {void}
|
|
1056
1105
|
*/
|
|
1057
1106
|
_syncAttributes() {
|
|
1058
|
-
super._syncAttributes(),
|
|
1107
|
+
super._syncAttributes(), g.observedAttributes.forEach((t) => {
|
|
1059
1108
|
this._syncAttribute(t);
|
|
1060
1109
|
});
|
|
1061
1110
|
}
|
|
@@ -1067,7 +1116,7 @@ class p extends D {
|
|
|
1067
1116
|
_addEventListeners() {
|
|
1068
1117
|
super._addEventListeners(), this.shadowRoot?.querySelector(
|
|
1069
1118
|
q
|
|
1070
|
-
)?.addEventListener(R.CLICK, this._handleConfirm), this.shadowRoot?.querySelector(
|
|
1119
|
+
)?.addEventListener(R.CLICK, this._handleConfirm), this.shadowRoot?.querySelector(F)?.addEventListener(R.CLICK, this._handleUndo);
|
|
1071
1120
|
}
|
|
1072
1121
|
/**
|
|
1073
1122
|
* Removes event listeners.
|
|
@@ -1077,7 +1126,7 @@ class p extends D {
|
|
|
1077
1126
|
_removeEventListeners() {
|
|
1078
1127
|
super._removeEventListeners(), this.shadowRoot?.querySelector(
|
|
1079
1128
|
q
|
|
1080
|
-
)?.removeEventListener(R.CLICK, this._handleConfirm), this.shadowRoot?.querySelector(
|
|
1129
|
+
)?.removeEventListener(R.CLICK, this._handleConfirm), this.shadowRoot?.querySelector(F)?.removeEventListener(R.CLICK, this._handleUndo);
|
|
1081
1130
|
}
|
|
1082
1131
|
/**
|
|
1083
1132
|
* Handles the confirm button click event.
|
|
@@ -1112,19 +1161,19 @@ class p extends D {
|
|
|
1112
1161
|
this.dispatchEvent(t), this._value = void 0;
|
|
1113
1162
|
};
|
|
1114
1163
|
}
|
|
1115
|
-
const
|
|
1164
|
+
const qt = "confirmation-dialog", Pt = {
|
|
1116
1165
|
CONFIRMATION_DIALOG_CONFIRM: T.CONFIRMATION_DIALOG_CONFIRM,
|
|
1117
1166
|
CONFIRMATION_DIALOG_UNDO: T.CONFIRMATION_DIALOG_UNDO
|
|
1118
|
-
},
|
|
1167
|
+
}, He = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
1119
1168
|
__proto__: null,
|
|
1120
|
-
COMPONENT_CUSTOM_MESSAGES:
|
|
1121
|
-
ConfirmationDialogComponent:
|
|
1122
|
-
selector:
|
|
1123
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
1169
|
+
COMPONENT_CUSTOM_MESSAGES: Pt,
|
|
1170
|
+
ConfirmationDialogComponent: g,
|
|
1171
|
+
selector: qt
|
|
1172
|
+
}, Symbol.toStringTag, { value: "Module" })), Dt = "header-body-footer-dialog", Ne = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
1124
1173
|
__proto__: null,
|
|
1125
|
-
HeaderBodyFooterDialogComponent:
|
|
1126
|
-
selector:
|
|
1127
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
1174
|
+
HeaderBodyFooterDialogComponent: P,
|
|
1175
|
+
selector: Dt
|
|
1176
|
+
}, Symbol.toStringTag, { value: "Module" })), Ut = `<div class="bar-menu-container">
|
|
1128
1177
|
<previous-button class="nav-prev" part="nav-prev-button"></previous-button>
|
|
1129
1178
|
|
|
1130
1179
|
<div class="buttons-wrapper" part="buttons-wrapper">
|
|
@@ -1133,8 +1182,8 @@ const Ht = "confirmation-dialog", Nt = {
|
|
|
1133
1182
|
|
|
1134
1183
|
<next-button class="nav-next" part="nav-next-button"></next-button>
|
|
1135
1184
|
</div>
|
|
1136
|
-
`,
|
|
1137
|
-
|
|
1185
|
+
`, Kt = "*{box-sizing:border-box}:host{display:block;width:100%}.bar-menu-container{display:flex;align-items:center;justify-content:space-between;height:100%;gap:var(--gap-sm);padding:var(--spacing-1);background:var(--color-bg-primary);border-radius:var(--border-radius-full);border:var(--border-width-2) solid var(--color-border-secondary);box-shadow:var(--shadow-sm);margin:0 auto}.bar-menu-container .nav-prev,.bar-menu-container .nav-next{flex-shrink:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.bar-menu-container .nav-prev.visible,.bar-menu-container .nav-next.visible{opacity:1;visibility:visible;pointer-events:auto}.bar-menu-container .nav-prev::part(button),.bar-menu-container .nav-next::part(button){background-color:transparent;box-shadow:none}.bar-menu-container .buttons-wrapper{display:grid;grid-template-columns:repeat(var(--bar-menu-visible-count, 3),1fr);grid-auto-rows:max-content;align-items:center;justify-items:center;gap:var(--gap-sm);overflow:hidden;position:relative;width:auto}::slotted(*){display:none;flex-shrink:0;will-change:opacity,transform;contain:layout style paint;opacity:0;transform:scale(.8)}::slotted(.animating){transition:opacity .4s cubic-bezier(.34,1.56,.64,1),transform .4s cubic-bezier(.34,1.56,.64,1)}::slotted(.visible-button){display:inline-flex!important;pointer-events:auto;opacity:1;transform:scale(1)}", J = new CSSStyleSheet();
|
|
1186
|
+
J.replaceSync(Kt);
|
|
1138
1187
|
class y extends HTMLElement {
|
|
1139
1188
|
static _visibleCountAttribute = "visible-count";
|
|
1140
1189
|
static _cyclicalNavigationAttribute = "cyclical-navigation";
|
|
@@ -1153,7 +1202,7 @@ class y extends HTMLElement {
|
|
|
1153
1202
|
* @constructor
|
|
1154
1203
|
*/
|
|
1155
1204
|
constructor() {
|
|
1156
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(
|
|
1205
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(J);
|
|
1157
1206
|
}
|
|
1158
1207
|
/**
|
|
1159
1208
|
* Specifies which attributes should be observed for changes.
|
|
@@ -1213,7 +1262,7 @@ class y extends HTMLElement {
|
|
|
1213
1262
|
* Render the component's Shadow DOM structure
|
|
1214
1263
|
*/
|
|
1215
1264
|
_render() {
|
|
1216
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
1265
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = Ut);
|
|
1217
1266
|
}
|
|
1218
1267
|
/**
|
|
1219
1268
|
* Cache Shadow DOM elements for performance
|
|
@@ -1251,13 +1300,13 @@ class y extends HTMLElement {
|
|
|
1251
1300
|
_setupKeyboardListener() {
|
|
1252
1301
|
this._keyDownListener = (t) => {
|
|
1253
1302
|
t.key === "ArrowLeft" ? (t.preventDefault(), this._scrollPrevious()) : t.key === "ArrowRight" && (t.preventDefault(), this._scrollNext());
|
|
1254
|
-
}, this.addEventListener(
|
|
1303
|
+
}, this.addEventListener(D.KEY_DOWN, this._keyDownListener);
|
|
1255
1304
|
}
|
|
1256
1305
|
/**
|
|
1257
1306
|
* Remove keyboard listener
|
|
1258
1307
|
*/
|
|
1259
1308
|
_removeKeyboardListener() {
|
|
1260
|
-
this._keyDownListener !== null && this.removeEventListener(
|
|
1309
|
+
this._keyDownListener !== null && this.removeEventListener(D.KEY_DOWN, this._keyDownListener);
|
|
1261
1310
|
}
|
|
1262
1311
|
/**
|
|
1263
1312
|
* Get all slotted button elements
|
|
@@ -1270,25 +1319,25 @@ class y extends HTMLElement {
|
|
|
1270
1319
|
*/
|
|
1271
1320
|
_updateButtonVisibility(t) {
|
|
1272
1321
|
const e = this._getSlottedButtons(), r = e.length, i = this.visibleButtons, a = this._currentIndex, v = Math.min(a + i, r);
|
|
1273
|
-
e.forEach((c,
|
|
1274
|
-
const I =
|
|
1275
|
-
I || (c.classList.remove("visible-button"), c.classList.remove("animating"),
|
|
1276
|
-
}), t !== void 0 ? (e[0]?.offsetHeight, e.forEach((c,
|
|
1277
|
-
if (
|
|
1278
|
-
const
|
|
1279
|
-
|
|
1280
|
-
const
|
|
1281
|
-
|
|
1322
|
+
e.forEach((c, p) => {
|
|
1323
|
+
const I = p >= a && p < v, $ = c;
|
|
1324
|
+
I || (c.classList.remove("visible-button"), c.classList.remove("animating"), $.style.display = "none");
|
|
1325
|
+
}), t !== void 0 ? (e[0]?.offsetHeight, e.forEach((c, p) => {
|
|
1326
|
+
if (p >= a && p < v) {
|
|
1327
|
+
const $ = c;
|
|
1328
|
+
$.style.display = "inline-flex", c.classList.add("animating");
|
|
1329
|
+
const dt = p % this.visibleButtons * 50;
|
|
1330
|
+
$.style.transitionDelay = `${dt}ms`;
|
|
1282
1331
|
}
|
|
1283
|
-
}), e[0]?.offsetHeight, e.forEach((c,
|
|
1284
|
-
|
|
1332
|
+
}), e[0]?.offsetHeight, e.forEach((c, p) => {
|
|
1333
|
+
p >= a && p < v && c.classList.add("visible-button");
|
|
1285
1334
|
}), setTimeout(() => {
|
|
1286
1335
|
e.forEach((c) => {
|
|
1287
1336
|
c.classList.remove("animating"), c.style.transitionDelay = d;
|
|
1288
1337
|
});
|
|
1289
|
-
}, 400)) : e.forEach((c,
|
|
1290
|
-
const I =
|
|
1291
|
-
I && (
|
|
1338
|
+
}, 400)) : e.forEach((c, p) => {
|
|
1339
|
+
const I = p >= a && p < v, $ = c;
|
|
1340
|
+
I && ($.style.display = "inline-flex", c.classList.add("visible-button"));
|
|
1292
1341
|
}), this._updateNavigationButtons(r, i);
|
|
1293
1342
|
}
|
|
1294
1343
|
/**
|
|
@@ -1345,21 +1394,21 @@ class y extends HTMLElement {
|
|
|
1345
1394
|
return this._currentIndex;
|
|
1346
1395
|
}
|
|
1347
1396
|
}
|
|
1348
|
-
const
|
|
1397
|
+
const Gt = "bar-menu", Te = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
1349
1398
|
__proto__: null,
|
|
1350
1399
|
BarMenuComponent: y,
|
|
1351
|
-
selector:
|
|
1352
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
1400
|
+
selector: Gt
|
|
1401
|
+
}, Symbol.toStringTag, { value: "Module" })), Ct = "ds-spinner", Wt = `<div part="spinner" class="spinner" role="status" aria-label="Loading">
|
|
1353
1402
|
<div class="spinner-ring"></div>
|
|
1354
1403
|
</div>
|
|
1355
|
-
`,
|
|
1356
|
-
|
|
1404
|
+
`, Yt = "*{box-sizing:border-box}:host{display:inline-flex;align-items:center;justify-content:center}.spinner{display:inline-flex;align-items:center;justify-content:center}.spinner-ring{width:var(--spinner-size, 2rem);height:var(--spinner-size, 2rem);border:3px solid var(--color-border-primary);border-top-color:var(--color-primary);border-radius:var(--border-radius-full);animation:spin var(--transition-slow) linear infinite}:host([size=sm]) .spinner-ring{width:1rem;height:1rem;border-width:2px}:host([size=md]) .spinner-ring{width:2rem;height:2rem;border-width:3px}:host([size=lg]) .spinner-ring{width:3rem;height:3rem;border-width:4px}:host([variant=primary]) .spinner-ring{border-top-color:var(--color-primary)}:host([variant=success]) .spinner-ring{border-top-color:var(--color-success)}:host([variant=warning]) .spinner-ring{border-top-color:var(--color-warning)}:host([variant=error]) .spinner-ring{border-top-color:var(--color-error)}@keyframes spin{to{transform:rotate(360deg)}}", Q = new CSSStyleSheet();
|
|
1405
|
+
Q.replaceSync(Yt);
|
|
1357
1406
|
class f extends HTMLElement {
|
|
1358
1407
|
static _sizeAttribute = "size";
|
|
1359
1408
|
static _variantAttribute = "variant";
|
|
1360
1409
|
static _labelAttribute = "label";
|
|
1361
1410
|
constructor() {
|
|
1362
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(
|
|
1411
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(Q);
|
|
1363
1412
|
}
|
|
1364
1413
|
static get observedAttributes() {
|
|
1365
1414
|
return [
|
|
@@ -1397,14 +1446,14 @@ class f extends HTMLElement {
|
|
|
1397
1446
|
_render() {
|
|
1398
1447
|
if (this.shadowRoot === null)
|
|
1399
1448
|
return;
|
|
1400
|
-
this.shadowRoot.innerHTML =
|
|
1449
|
+
this.shadowRoot.innerHTML = Wt, this.shadowRoot.querySelector(".spinner")?.setAttribute("aria-label", this.label);
|
|
1401
1450
|
}
|
|
1402
1451
|
}
|
|
1403
|
-
const
|
|
1452
|
+
const je = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
1404
1453
|
__proto__: null,
|
|
1405
1454
|
SpinnerComponent: f,
|
|
1406
|
-
selector:
|
|
1407
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
1455
|
+
selector: Ct
|
|
1456
|
+
}, Symbol.toStringTag, { value: "Module" })), Vt = "ds-progress-bar", Bt = `<div
|
|
1408
1457
|
part="container"
|
|
1409
1458
|
class="progress-container"
|
|
1410
1459
|
role="progressbar"
|
|
@@ -1416,8 +1465,8 @@ const Oe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
|
1416
1465
|
</div>
|
|
1417
1466
|
<span class="progress-label"></span>
|
|
1418
1467
|
</div>
|
|
1419
|
-
`,
|
|
1420
|
-
|
|
1468
|
+
`, Xt = "*{box-sizing:border-box}:host{display:block;width:100%}.progress-container{display:flex;flex-direction:column;gap:var(--gap-xs)}.progress-track{width:100%;height:.5rem;background-color:var(--color-bg-secondary);border-radius:var(--border-radius-full);overflow:hidden;border:1px solid var(--color-border-primary)}:host([size=sm]) .progress-track{height:.25rem}:host([size=md]) .progress-track{height:.5rem}:host([size=lg]) .progress-track{height:1rem}.progress-fill{height:100%;width:0%;background:var(--color-primary);border-radius:var(--border-radius-full);transition:width var(--transition-base) ease}:host([variant=success]) .progress-fill{background:var(--color-success)}:host([variant=warning]) .progress-fill{background:var(--color-warning)}:host([variant=error]) .progress-fill{background:var(--color-error)}:host([variant=info]) .progress-fill{background:var(--color-info)}:host([indeterminate]) .progress-fill{width:40%!important;animation:indeterminate var(--transition-slow) ease-in-out infinite}.progress-label{font-family:var(--font-family-base);font-size:var(--font-size-xs);color:var(--color-text-secondary);align-self:flex-end}:host(:not([show-label])) .progress-label{display:none}@keyframes indeterminate{0%{transform:translate(-100%)}to{transform:translate(350%)}}", Z = new CSSStyleSheet();
|
|
1469
|
+
Z.replaceSync(Xt);
|
|
1421
1470
|
class h extends HTMLElement {
|
|
1422
1471
|
static _valueAttribute = "value";
|
|
1423
1472
|
static _variantAttribute = "variant";
|
|
@@ -1426,7 +1475,7 @@ class h extends HTMLElement {
|
|
|
1426
1475
|
static _showLabelAttribute = "show-label";
|
|
1427
1476
|
static _labelAttribute = "label";
|
|
1428
1477
|
constructor() {
|
|
1429
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(
|
|
1478
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(Z);
|
|
1430
1479
|
}
|
|
1431
1480
|
static get observedAttributes() {
|
|
1432
1481
|
return [
|
|
@@ -1472,7 +1521,7 @@ class h extends HTMLElement {
|
|
|
1472
1521
|
r !== e && this._update();
|
|
1473
1522
|
}
|
|
1474
1523
|
_render() {
|
|
1475
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
1524
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = Bt, this._update());
|
|
1476
1525
|
}
|
|
1477
1526
|
_update() {
|
|
1478
1527
|
const t = this.shadowRoot?.querySelector(".progress-fill"), e = this.shadowRoot?.querySelector(
|
|
@@ -1484,19 +1533,19 @@ class h extends HTMLElement {
|
|
|
1484
1533
|
)), r != null && (r.textContent = this.indeterminate ? "" : `${this.value}%`);
|
|
1485
1534
|
}
|
|
1486
1535
|
}
|
|
1487
|
-
const
|
|
1536
|
+
const Fe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
1488
1537
|
__proto__: null,
|
|
1489
1538
|
ProgressBarComponent: h,
|
|
1490
|
-
selector:
|
|
1491
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
1492
|
-
`,
|
|
1493
|
-
|
|
1539
|
+
selector: Vt
|
|
1540
|
+
}, Symbol.toStringTag, { value: "Module" })), Jt = "ds-skeleton", Qt = `<div part="skeleton" class="skeleton" aria-hidden="true"></div>
|
|
1541
|
+
`, Zt = "*{box-sizing:border-box}:host{display:block;width:100%}.skeleton{background:linear-gradient(90deg,var(--color-bg-secondary) 25%,var(--color-bg-tertiary) 50%,var(--color-bg-secondary) 75%);background-size:200% 100%;border-radius:var(--border-radius-md);animation:shimmer 1.5s infinite;min-height:1rem;width:100%}:host([shape=circle]) .skeleton{border-radius:var(--border-radius-full);width:var(--skeleton-size, 3rem);height:var(--skeleton-size, 3rem)}:host([shape=text]) .skeleton{border-radius:var(--border-radius-sm);height:1em}:host([shape=rect]) .skeleton{border-radius:var(--border-radius-md)}:host([width=full]){width:100%}:host([width=half]){width:50%}:host([width=quarter]){width:25%}:host([width=three-quarters]){width:75%}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}", tt = new CSSStyleSheet();
|
|
1542
|
+
tt.replaceSync(Zt);
|
|
1494
1543
|
class A extends HTMLElement {
|
|
1495
1544
|
static _shapeAttribute = "shape";
|
|
1496
1545
|
static _heightAttribute = "height";
|
|
1497
1546
|
static _widthAttribute = "width";
|
|
1498
1547
|
constructor() {
|
|
1499
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(
|
|
1548
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(tt);
|
|
1500
1549
|
}
|
|
1501
1550
|
static get observedAttributes() {
|
|
1502
1551
|
return [
|
|
@@ -1524,49 +1573,49 @@ class A extends HTMLElement {
|
|
|
1524
1573
|
r !== e && t === A._heightAttribute && this._applyHeight(r);
|
|
1525
1574
|
}
|
|
1526
1575
|
_render() {
|
|
1527
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
1576
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = Qt, this._applyHeight(this.height));
|
|
1528
1577
|
}
|
|
1529
1578
|
_applyHeight(t) {
|
|
1530
1579
|
const e = this.shadowRoot?.querySelector(".skeleton");
|
|
1531
1580
|
e != null && t !== null && t !== "" && (e.style.height = t);
|
|
1532
1581
|
}
|
|
1533
1582
|
}
|
|
1534
|
-
const
|
|
1583
|
+
const qe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
1535
1584
|
__proto__: null,
|
|
1536
1585
|
SkeletonComponent: A,
|
|
1537
|
-
selector:
|
|
1538
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
1586
|
+
selector: Jt
|
|
1587
|
+
}, Symbol.toStringTag, { value: "Module" })), te = "ds-card", ee = `<div part="card" class="card">
|
|
1539
1588
|
<slot name="header" class="card-header-slot"></slot>
|
|
1540
1589
|
<div class="card-body">
|
|
1541
1590
|
<slot></slot>
|
|
1542
1591
|
</div>
|
|
1543
1592
|
<slot name="footer" class="card-footer-slot"></slot>
|
|
1544
1593
|
</div>
|
|
1545
|
-
`,
|
|
1546
|
-
|
|
1547
|
-
class
|
|
1594
|
+
`, re = '*{box-sizing:border-box}:host{display:block}.card{background:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--border-radius-xl);box-shadow:var(--shadow-md);overflow:hidden;transition:box-shadow var(--transition-fast),transform var(--transition-fast),border-color var(--transition-fast);font-family:var(--font-family-base);color:var(--color-text-primary);position:relative}.card:before{content:"";display:block;height:2px;background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-primary-light) 100%);opacity:0;transition:opacity var(--transition-fast)}:host([hoverable]) .card:hover{box-shadow:var(--shadow-xl);transform:translateY(-3px);border-color:var(--color-border-secondary)}:host([hoverable]) .card:hover:before{opacity:1}:host([variant=outlined]) .card{background:transparent;box-shadow:none;border:var(--border-width-2) solid var(--color-border-secondary)}:host([variant=elevated]) .card{background:var(--color-bg-primary);box-shadow:var(--shadow-xl);border:none}:host([variant=filled]) .card{background:var(--color-bg-secondary);border:none;box-shadow:none}.card-body{padding:var(--spacing-4) var(--spacing-5)}::slotted([slot=header]){display:block;padding:var(--spacing-5) var(--spacing-5) var(--spacing-2);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-text-primary);letter-spacing:var(--letter-spacing-tight)}::slotted([slot=footer]){display:block;padding:var(--spacing-3) var(--spacing-5) var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-top:1px solid var(--color-border-primary)}', et = new CSSStyleSheet();
|
|
1595
|
+
et.replaceSync(re);
|
|
1596
|
+
class k extends HTMLElement {
|
|
1548
1597
|
static _variantAttribute = "variant";
|
|
1549
1598
|
static _hoverableAttribute = "hoverable";
|
|
1550
1599
|
constructor() {
|
|
1551
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(
|
|
1600
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(et);
|
|
1552
1601
|
}
|
|
1553
1602
|
static get observedAttributes() {
|
|
1554
1603
|
return [
|
|
1555
|
-
|
|
1556
|
-
|
|
1604
|
+
k._variantAttribute,
|
|
1605
|
+
k._hoverableAttribute
|
|
1557
1606
|
];
|
|
1558
1607
|
}
|
|
1559
1608
|
get variant() {
|
|
1560
|
-
return this.getAttribute(
|
|
1609
|
+
return this.getAttribute(k._variantAttribute) ?? "default";
|
|
1561
1610
|
}
|
|
1562
1611
|
set variant(t) {
|
|
1563
|
-
this.setAttribute(
|
|
1612
|
+
this.setAttribute(k._variantAttribute, t);
|
|
1564
1613
|
}
|
|
1565
1614
|
get hoverable() {
|
|
1566
|
-
return this.hasAttribute(
|
|
1615
|
+
return this.hasAttribute(k._hoverableAttribute);
|
|
1567
1616
|
}
|
|
1568
1617
|
set hoverable(t) {
|
|
1569
|
-
t ? this.setAttribute(
|
|
1618
|
+
t ? this.setAttribute(k._hoverableAttribute, "") : this.removeAttribute(k._hoverableAttribute);
|
|
1570
1619
|
}
|
|
1571
1620
|
connectedCallback() {
|
|
1572
1621
|
this._render();
|
|
@@ -1574,24 +1623,24 @@ class L extends HTMLElement {
|
|
|
1574
1623
|
attributeChangedCallback(t, e, r) {
|
|
1575
1624
|
}
|
|
1576
1625
|
_render() {
|
|
1577
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
1626
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = ee);
|
|
1578
1627
|
}
|
|
1579
1628
|
}
|
|
1580
|
-
const
|
|
1629
|
+
const Pe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
1581
1630
|
__proto__: null,
|
|
1582
|
-
BaseCardComponent:
|
|
1583
|
-
selector:
|
|
1584
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
1631
|
+
BaseCardComponent: k,
|
|
1632
|
+
selector: te
|
|
1633
|
+
}, Symbol.toStringTag, { value: "Module" })), ie = "ds-badge", se = `<span part="badge" class="badge">
|
|
1585
1634
|
<slot></slot>
|
|
1586
1635
|
</span>
|
|
1587
|
-
`,
|
|
1588
|
-
|
|
1636
|
+
`, oe = "*{box-sizing:border-box}:host{display:inline-flex}.badge{display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-xs);padding-block:.2em;padding-inline:.6em;border-radius:var(--border-radius-full);font-family:var(--font-family-base);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);line-height:1.4;white-space:nowrap;background-color:var(--color-primary);color:#fff;border:1px solid transparent}:host([variant=secondary]) .badge{background-color:var(--color-bg-secondary);color:var(--color-text-primary);border-color:var(--color-border-primary)}:host([variant=success]) .badge{background-color:var(--color-success);color:#fff}:host([variant=warning]) .badge{background-color:var(--color-warning);color:#1a1a1a}:host([variant=error]) .badge{background-color:var(--color-error);color:#fff}:host([variant=info]) .badge{background-color:var(--color-info);color:#fff}:host([variant=outline]) .badge{background-color:transparent;color:var(--color-primary);border-color:var(--color-primary)}:host([size=sm]) .badge{font-size:.65rem;padding-block:.1em;padding-inline:.4em}:host([size=lg]) .badge{font-size:var(--font-size-sm);padding-block:.3em;padding-inline:.8em}:host([dot]) .badge{width:.5rem;height:.5rem;padding:0;font-size:0}", rt = new CSSStyleSheet();
|
|
1637
|
+
rt.replaceSync(oe);
|
|
1589
1638
|
class m extends HTMLElement {
|
|
1590
1639
|
static _variantAttribute = "variant";
|
|
1591
1640
|
static _sizeAttribute = "size";
|
|
1592
1641
|
static _dotAttribute = "dot";
|
|
1593
1642
|
constructor() {
|
|
1594
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(
|
|
1643
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(rt);
|
|
1595
1644
|
}
|
|
1596
1645
|
static get observedAttributes() {
|
|
1597
1646
|
return [
|
|
@@ -1624,14 +1673,14 @@ class m extends HTMLElement {
|
|
|
1624
1673
|
attributeChangedCallback(t, e, r) {
|
|
1625
1674
|
}
|
|
1626
1675
|
_render() {
|
|
1627
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
1676
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = se);
|
|
1628
1677
|
}
|
|
1629
1678
|
}
|
|
1630
|
-
const
|
|
1679
|
+
const De = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
1631
1680
|
__proto__: null,
|
|
1632
1681
|
BadgeComponent: m,
|
|
1633
|
-
selector:
|
|
1634
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
1682
|
+
selector: ie
|
|
1683
|
+
}, Symbol.toStringTag, { value: "Module" })), ae = "ds-alert", ne = `<div part="alert" class="alert" role="alert">
|
|
1635
1684
|
<span class="alert-icon"></span>
|
|
1636
1685
|
<div class="alert-content">
|
|
1637
1686
|
<slot name="title" class="alert-title-slot"></slot>
|
|
@@ -1646,31 +1695,31 @@ const Ne = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
|
1646
1695
|
<span class="close-icon">✕</span>
|
|
1647
1696
|
</button>
|
|
1648
1697
|
</div>
|
|
1649
|
-
`,
|
|
1650
|
-
|
|
1651
|
-
class
|
|
1698
|
+
`, le = '@charset "UTF-8";*{box-sizing:border-box}:host{display:block}:host([hidden]){display:none}.alert{display:flex;align-items:center;gap:var(--gap-sm);padding:var(--spacing-3);border-radius:var(--border-radius-lg);border-left:4px solid var(--color-primary);background-color:var(--color-bg-secondary);color:var(--color-text-primary);font-family:var(--font-family-base);font-size:var(--font-size-sm);line-height:var(--line-height-normal);animation:alertIn var(--transition-fast) ease-out}:host([variant=success]) .alert{border-left-color:#22c55e;background-color:#1a3f1f;color:#d1fae5}:host([variant=warning]) .alert{border-left-color:#facc15;background-color:#3f3011;color:#e0c600}:host([variant=error]) .alert{border-left-color:#dc2626;background-color:color-mix(in srgb,#dc2626 10%,var(--color-bg-primary))}:host([variant=info]) .alert{border-left-color:var(--color-primary);background-color:color-mix(in srgb,var(--color-primary) 15%,var(--color-bg-primary));color:var(--color-text-primary)}.alert-icon{font-size:var(--font-size-lg);flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:1.25em;height:1.25em}:host([variant=success]) .alert-icon:before{content:"✓"}:host([variant=warning]) .alert-icon:before{content:"⚠"}:host([variant=error]) .alert-icon:before{content:"✕"}:host([variant=info]) .alert-icon:before{content:"ℹ"}.alert-content{flex:1;min-width:0;padding:0 var(--gap-sm);border-left:1px solid}::slotted([slot=title]){display:block;font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);margin-bottom:var(--spacing-1)}.alert-close{flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:var(--spacing-1);border-radius:var(--border-radius-sm);color:var(--color-text-secondary);font-size:var(--font-size-md);line-height:1;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast),color var(--transition-fast)}.alert-close:hover{background:var(--color-hover-bg-secondary);color:var(--color-text-primary)}:host(:not([dismissible])) .alert-close{display:none}@keyframes alertIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}', it = new CSSStyleSheet();
|
|
1699
|
+
it.replaceSync(le);
|
|
1700
|
+
class L extends HTMLElement {
|
|
1652
1701
|
static _variantAttribute = "variant";
|
|
1653
1702
|
static _dismissibleAttribute = "dismissible";
|
|
1654
1703
|
constructor() {
|
|
1655
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(
|
|
1704
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(it);
|
|
1656
1705
|
}
|
|
1657
1706
|
static get observedAttributes() {
|
|
1658
1707
|
return [
|
|
1659
|
-
|
|
1660
|
-
|
|
1708
|
+
L._variantAttribute,
|
|
1709
|
+
L._dismissibleAttribute
|
|
1661
1710
|
];
|
|
1662
1711
|
}
|
|
1663
1712
|
get variant() {
|
|
1664
|
-
return this.getAttribute(
|
|
1713
|
+
return this.getAttribute(L._variantAttribute) ?? "info";
|
|
1665
1714
|
}
|
|
1666
1715
|
set variant(t) {
|
|
1667
|
-
this.setAttribute(
|
|
1716
|
+
this.setAttribute(L._variantAttribute, t);
|
|
1668
1717
|
}
|
|
1669
1718
|
get dismissible() {
|
|
1670
|
-
return this.hasAttribute(
|
|
1719
|
+
return this.hasAttribute(L._dismissibleAttribute);
|
|
1671
1720
|
}
|
|
1672
1721
|
set dismissible(t) {
|
|
1673
|
-
t ? this.setAttribute(
|
|
1722
|
+
t ? this.setAttribute(L._dismissibleAttribute, "") : this.removeAttribute(L._dismissibleAttribute);
|
|
1674
1723
|
}
|
|
1675
1724
|
connectedCallback() {
|
|
1676
1725
|
this._render(), this._addEventListeners();
|
|
@@ -1692,14 +1741,14 @@ class k extends HTMLElement {
|
|
|
1692
1741
|
this.shadowRoot?.querySelector(".alert-close")?.removeEventListener("click", this._handleClose);
|
|
1693
1742
|
}
|
|
1694
1743
|
_render() {
|
|
1695
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
1744
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = ne, this._addEventListeners());
|
|
1696
1745
|
}
|
|
1697
1746
|
}
|
|
1698
|
-
const
|
|
1747
|
+
const Ue = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
1699
1748
|
__proto__: null,
|
|
1700
|
-
AlertComponent:
|
|
1701
|
-
selector:
|
|
1702
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
1749
|
+
AlertComponent: L,
|
|
1750
|
+
selector: ae
|
|
1751
|
+
}, Symbol.toStringTag, { value: "Module" })), de = "ds-tag", ce = `<span part="tag" class="tag">
|
|
1703
1752
|
<slot></slot>
|
|
1704
1753
|
<button
|
|
1705
1754
|
part="remove-button"
|
|
@@ -1710,14 +1759,14 @@ const Te = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
|
1710
1759
|
✕
|
|
1711
1760
|
</button>
|
|
1712
1761
|
</span>
|
|
1713
|
-
`,
|
|
1714
|
-
|
|
1762
|
+
`, ue = "*{box-sizing:border-box}:host{display:inline-flex}.tag{display:inline-flex;align-items:center;gap:var(--gap-xs);padding-block:.25em;padding-inline:.75em;border-radius:var(--border-radius-full);font-family:var(--font-family-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);background-color:var(--color-bg-secondary);color:var(--color-text-primary);border:1px solid var(--color-border-primary);transition:all var(--transition-fast)}:host([variant=primary]) .tag{background-color:var(--color-primary);color:#fff;border-color:transparent}:host([variant=success]) .tag{background-color:var(--color-success);color:#fff;border-color:transparent}:host([variant=warning]) .tag{background-color:var(--color-warning);color:#1a1a1a;border-color:transparent}:host([variant=error]) .tag{background-color:var(--color-error);color:#fff;border-color:transparent}:host([size=sm]) .tag{font-size:var(--font-size-xs);padding-block:.15em;padding-inline:.5em}:host([size=lg]) .tag{font-size:var(--font-size-md);padding-block:.35em;padding-inline:1em}.tag-remove{display:none;background:transparent;border:none;cursor:pointer;padding:0;font-size:.75em;color:inherit;opacity:.7;line-height:1;border-radius:var(--border-radius-full);transition:opacity var(--transition-fast)}:host([removable]) .tag-remove{display:inline-flex;align-items:center;justify-content:center}.tag-remove:hover{opacity:1}", st = new CSSStyleSheet();
|
|
1763
|
+
st.replaceSync(ue);
|
|
1715
1764
|
class _ extends HTMLElement {
|
|
1716
1765
|
static _variantAttribute = "variant";
|
|
1717
1766
|
static _sizeAttribute = "size";
|
|
1718
1767
|
static _removableAttribute = "removable";
|
|
1719
1768
|
constructor() {
|
|
1720
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(
|
|
1769
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(st);
|
|
1721
1770
|
}
|
|
1722
1771
|
static get observedAttributes() {
|
|
1723
1772
|
return [
|
|
@@ -1758,20 +1807,20 @@ class _ extends HTMLElement {
|
|
|
1758
1807
|
this.shadowRoot?.querySelector(".tag-remove")?.removeEventListener("click", this._handleRemove);
|
|
1759
1808
|
}
|
|
1760
1809
|
_render() {
|
|
1761
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
1810
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = ce, this._addEventListeners());
|
|
1762
1811
|
}
|
|
1763
1812
|
}
|
|
1764
|
-
const
|
|
1813
|
+
const Ke = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
1765
1814
|
__proto__: null,
|
|
1766
1815
|
TagComponent: _,
|
|
1767
|
-
selector:
|
|
1768
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
1816
|
+
selector: de
|
|
1817
|
+
}, Symbol.toStringTag, { value: "Module" })), he = "ds-avatar", be = `<div part="avatar" class="avatar" role="img">
|
|
1769
1818
|
<img class="avatar-image" alt="" />
|
|
1770
1819
|
<span class="avatar-initials"></span>
|
|
1771
1820
|
<span class="avatar-icon">👤</span>
|
|
1772
1821
|
</div>
|
|
1773
|
-
`,
|
|
1774
|
-
|
|
1822
|
+
`, ve = "*{box-sizing:border-box}:host{display:inline-flex}.avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:var(--border-radius-full);background-color:var(--color-primary);color:#fff;font-family:var(--font-family-base);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);overflow:hidden;-webkit-user-select:none;user-select:none;flex-shrink:0}:host([size=xs]) .avatar{width:1.5rem;height:1.5rem;font-size:var(--font-size-xs)}:host([size=sm]) .avatar{width:2rem;height:2rem;font-size:var(--font-size-xs)}:host([size=md]) .avatar{width:2.5rem;height:2.5rem;font-size:var(--font-size-sm)}:host([size=lg]) .avatar{width:3.5rem;height:3.5rem;font-size:var(--font-size-lg)}:host([size=xl]) .avatar{width:5rem;height:5rem;font-size:var(--font-size-2xl)}:host([shape=square]) .avatar{border-radius:var(--border-radius-md)}:host([shape=rounded]) .avatar{border-radius:var(--border-radius-lg)}:host([color=secondary]) .avatar{background-color:var(--color-bg-secondary);color:var(--color-text-primary);border:1px solid var(--color-border-primary)}:host([color=success]) .avatar{background-color:var(--color-success)}:host([color=warning]) .avatar{background-color:var(--color-warning);color:#1a1a1a}:host([color=error]) .avatar{background-color:var(--color-error)}.avatar-image{width:100%;height:100%;object-fit:cover;display:none;border-radius:inherit}.avatar-initials{display:none;line-height:1}.avatar-icon{display:flex;font-size:1.2em;line-height:1}:host([src]) .avatar-image{display:block}:host([src]) .avatar-initials{display:none}:host([src]) .avatar-icon{display:none}:host([initials]:not([src])) .avatar-initials{display:block}:host([initials]:not([src])) .avatar-icon{display:none}", ot = new CSSStyleSheet();
|
|
1823
|
+
ot.replaceSync(ve);
|
|
1775
1824
|
class n extends HTMLElement {
|
|
1776
1825
|
static _srcAttribute = "src";
|
|
1777
1826
|
static _altAttribute = "alt";
|
|
@@ -1780,7 +1829,7 @@ class n extends HTMLElement {
|
|
|
1780
1829
|
static _shapeAttribute = "shape";
|
|
1781
1830
|
static _colorAttribute = "color";
|
|
1782
1831
|
constructor() {
|
|
1783
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(
|
|
1832
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(ot);
|
|
1784
1833
|
}
|
|
1785
1834
|
static get observedAttributes() {
|
|
1786
1835
|
return [
|
|
@@ -1826,7 +1875,7 @@ class n extends HTMLElement {
|
|
|
1826
1875
|
r !== e && this._update(t, r);
|
|
1827
1876
|
}
|
|
1828
1877
|
_render() {
|
|
1829
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
1878
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = be, this._update(n._srcAttribute, this.src), this._update(n._initialsAttribute, this.initials), this._update(n._altAttribute, this.alt));
|
|
1830
1879
|
}
|
|
1831
1880
|
_update(t, e) {
|
|
1832
1881
|
if (t === n._srcAttribute) {
|
|
@@ -1841,16 +1890,16 @@ class n extends HTMLElement {
|
|
|
1841
1890
|
}
|
|
1842
1891
|
}
|
|
1843
1892
|
}
|
|
1844
|
-
const
|
|
1893
|
+
const Ge = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
1845
1894
|
__proto__: null,
|
|
1846
1895
|
AvatarComponent: n,
|
|
1847
|
-
selector:
|
|
1848
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
1896
|
+
selector: he
|
|
1897
|
+
}, Symbol.toStringTag, { value: "Module" })), pe = "ds-tooltip", ge = `<slot></slot>
|
|
1849
1898
|
<div part="tooltip" class="tooltip" role="tooltip">
|
|
1850
1899
|
<slot name="content"></slot>
|
|
1851
1900
|
</div>
|
|
1852
|
-
`,
|
|
1853
|
-
|
|
1901
|
+
`, fe = "*{box-sizing:border-box}:host{position:relative;display:inline-flex;align-items:center}.tooltip{position:absolute;z-index:var(--z-index-tooltip, 1070);bottom:calc(100% + .5rem);left:50%;transform:translate(-50%);padding:var(--spacing-1) var(--spacing-2);background-color:var(--color-bg-tertiary, #1e1e2e);color:var(--color-text-primary);font-family:var(--font-family-base);font-size:var(--font-size-xs);line-height:var(--line-height-normal);border-radius:var(--border-radius-md);box-shadow:var(--shadow-lg);white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity var(--transition-fast),visibility var(--transition-fast);max-width:16rem;white-space:normal;text-align:center}:host([placement=bottom]) .tooltip{bottom:auto;top:calc(100% + .5rem)}:host([placement=left]) .tooltip{bottom:auto;left:auto;right:calc(100% + .5rem);top:50%;transform:translateY(-50%)}:host([placement=right]) .tooltip{bottom:auto;left:calc(100% + .5rem);top:50%;transform:translateY(-50%)}:host([open]) .tooltip,:host(:hover) .tooltip,:host(:focus-within) .tooltip{opacity:1;visibility:visible}:host([follow-cursor]) .tooltip{position:fixed;bottom:auto;left:0;top:0;transform:none}:host([follow-cursor]) .tooltip{opacity:1;visibility:visible}", at = new CSSStyleSheet();
|
|
1902
|
+
at.replaceSync(fe);
|
|
1854
1903
|
class b extends HTMLElement {
|
|
1855
1904
|
static _placementAttribute = "placement";
|
|
1856
1905
|
static _contentAttribute = "content";
|
|
@@ -1859,7 +1908,7 @@ class b extends HTMLElement {
|
|
|
1859
1908
|
_lastMouseX = 0;
|
|
1860
1909
|
_lastMouseY = 0;
|
|
1861
1910
|
constructor() {
|
|
1862
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(
|
|
1911
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(at);
|
|
1863
1912
|
}
|
|
1864
1913
|
static get observedAttributes() {
|
|
1865
1914
|
return [
|
|
@@ -1907,7 +1956,7 @@ class b extends HTMLElement {
|
|
|
1907
1956
|
_render() {
|
|
1908
1957
|
if (this.shadowRoot === null)
|
|
1909
1958
|
return;
|
|
1910
|
-
this.shadowRoot.innerHTML =
|
|
1959
|
+
this.shadowRoot.innerHTML = ge, this._updateContent(this.content);
|
|
1911
1960
|
const t = this.shadowRoot.querySelector(".tooltip");
|
|
1912
1961
|
if (t != null) {
|
|
1913
1962
|
const e = `tooltip-${Math.random().toString(36).slice(2, 7)}`;
|
|
@@ -1946,11 +1995,11 @@ class b extends HTMLElement {
|
|
|
1946
1995
|
}
|
|
1947
1996
|
}
|
|
1948
1997
|
}
|
|
1949
|
-
const
|
|
1998
|
+
const Ce = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
1950
1999
|
__proto__: null,
|
|
1951
2000
|
TooltipComponent: b,
|
|
1952
|
-
selector:
|
|
1953
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
2001
|
+
selector: pe
|
|
2002
|
+
}, Symbol.toStringTag, { value: "Module" })), me = "ds-text-input", ye = `<div part="wrapper" class="input-wrapper">
|
|
1954
2003
|
<label class="input-label" part="label"></label>
|
|
1955
2004
|
<div class="input-container">
|
|
1956
2005
|
<slot name="prefix" class="input-prefix"></slot>
|
|
@@ -1959,8 +2008,8 @@ const qe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
|
1959
2008
|
</div>
|
|
1960
2009
|
<span class="input-helper" part="helper"></span>
|
|
1961
2010
|
</div>
|
|
1962
|
-
`,
|
|
1963
|
-
|
|
2011
|
+
`, Ae = "*{box-sizing:border-box}:host{display:block;width:100%}.input-wrapper{display:flex;flex-direction:column;gap:var(--gap-xs);font-family:var(--font-family-base)}.input-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.input-label:empty{display:none}.input-container{display:flex;align-items:center;background-color:var(--color-bg-primary);border:1px solid var(--color-border-primary);border-radius:var(--border-radius-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);overflow:hidden}.input-container:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 20%,transparent);outline:none}:host([state=error]) .input-container{border-color:#dc2626;box-shadow:none}:host([state=error]) .input-container:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,#dc2626 20%,transparent)}:host([state=success]) .input-container{border-color:var(--color-success)}.input{flex:1;min-width:0;padding:var(--spacing-2) var(--spacing-3);background:transparent;border:none;outline:none;font-family:var(--font-family-base);font-size:var(--font-size-sm);color:var(--color-text-primary);line-height:var(--line-height-normal)}.input::placeholder{color:var(--color-text-secondary);opacity:.7}.input:disabled{opacity:.5;cursor:not-allowed}:host([size=sm]) .input{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}:host([size=lg]) .input{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-md)}.input-helper{font-size:var(--font-size-xs);color:var(--color-text-secondary)}.input-helper:empty{display:none}:host([state=error]) .input-helper{color:#dc2626}:host([state=success]) .input-helper{color:var(--color-success)}::slotted([slot=prefix]),::slotted([slot=suffix]){display:flex;align-items:center;padding-inline:var(--spacing-2);color:var(--color-text-secondary);font-size:var(--font-size-sm);flex-shrink:0}", nt = new CSSStyleSheet();
|
|
2012
|
+
nt.replaceSync(Ae);
|
|
1964
2013
|
class o extends HTMLElement {
|
|
1965
2014
|
static _labelAttribute = "label";
|
|
1966
2015
|
static _placeholderAttribute = "placeholder";
|
|
@@ -1973,7 +2022,7 @@ class o extends HTMLElement {
|
|
|
1973
2022
|
static _sizeAttribute = "size";
|
|
1974
2023
|
static _nameAttribute = "name";
|
|
1975
2024
|
constructor() {
|
|
1976
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(
|
|
2025
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(nt);
|
|
1977
2026
|
}
|
|
1978
2027
|
static get observedAttributes() {
|
|
1979
2028
|
return [
|
|
@@ -2093,7 +2142,7 @@ class o extends HTMLElement {
|
|
|
2093
2142
|
_render() {
|
|
2094
2143
|
if (this.shadowRoot === null)
|
|
2095
2144
|
return;
|
|
2096
|
-
this.shadowRoot.innerHTML =
|
|
2145
|
+
this.shadowRoot.innerHTML = ye;
|
|
2097
2146
|
const t = this._inputElement;
|
|
2098
2147
|
if (t !== null) {
|
|
2099
2148
|
t.setAttribute(
|
|
@@ -2109,19 +2158,19 @@ class o extends HTMLElement {
|
|
|
2109
2158
|
r !== null && (r.textContent = this.helper), this._addEventListeners();
|
|
2110
2159
|
}
|
|
2111
2160
|
}
|
|
2112
|
-
const
|
|
2161
|
+
const We = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
2113
2162
|
__proto__: null,
|
|
2114
2163
|
TextInputComponent: o,
|
|
2115
|
-
selector:
|
|
2116
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
2164
|
+
selector: me
|
|
2165
|
+
}, Symbol.toStringTag, { value: "Module" })), _e = "ds-toggle", we = `<label class="toggle-wrapper" part="wrapper">
|
|
2117
2166
|
<input class="toggle-input" type="checkbox" role="switch" />
|
|
2118
2167
|
<span class="toggle-track" part="track">
|
|
2119
2168
|
<span class="toggle-thumb" part="thumb"></span>
|
|
2120
2169
|
</span>
|
|
2121
2170
|
<span class="toggle-label" part="label"><slot></slot></span>
|
|
2122
2171
|
</label>
|
|
2123
|
-
`,
|
|
2124
|
-
|
|
2172
|
+
`, Se = "*{box-sizing:border-box}:host{display:inline-flex}.toggle-wrapper{display:inline-flex;align-items:center;gap:var(--gap-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-base);font-size:var(--font-size-sm);color:var(--color-text-primary)}.toggle-input{position:absolute;opacity:0;width:0;height:0}.toggle-track{position:relative;display:inline-flex;align-items:center;width:2.75rem;height:1.5rem;border-radius:var(--border-radius-full);background-color:var(--color-border-primary);transition:background-color var(--transition-fast);flex-shrink:0}.toggle-input:checked+.toggle-track{background-color:var(--color-primary)}.toggle-thumb{position:absolute;left:3px;width:1.125rem;height:1.125rem;border-radius:var(--border-radius-full);background-color:#fff;box-shadow:var(--shadow-sm);transition:transform var(--transition-fast)}.toggle-input:checked+.toggle-track .toggle-thumb{transform:translate(1.25rem)}.toggle-input:focus-visible+.toggle-track{outline:2px solid var(--color-primary);outline-offset:2px}.toggle-input:disabled+.toggle-track{opacity:.4;cursor:not-allowed}:host([disabled]) .toggle-wrapper{cursor:not-allowed;opacity:.5}:host([size=sm]) .toggle-track{width:2rem;height:1.125rem}:host([size=sm]) .toggle-thumb{width:.875rem;height:.875rem}:host([size=sm]) .toggle-input:checked+.toggle-track .toggle-thumb{transform:translate(.875rem)}:host([size=lg]) .toggle-track{width:3.5rem;height:2rem}:host([size=lg]) .toggle-thumb{width:1.5rem;height:1.5rem}:host([size=lg]) .toggle-input:checked+.toggle-track .toggle-thumb{transform:translate(1.5rem)}:host([variant=success]) .toggle-input:checked+.toggle-track{background-color:var(--color-success)}:host([variant=warning]) .toggle-input:checked+.toggle-track{background-color:var(--color-warning)}:host([variant=error]) .toggle-input:checked+.toggle-track{background-color:var(--color-error)}.toggle-label:empty{display:none}", lt = new CSSStyleSheet();
|
|
2173
|
+
lt.replaceSync(Se);
|
|
2125
2174
|
class l extends HTMLElement {
|
|
2126
2175
|
static _checkedAttribute = "checked";
|
|
2127
2176
|
static _disabledAttribute = "disabled";
|
|
@@ -2130,7 +2179,7 @@ class l extends HTMLElement {
|
|
|
2130
2179
|
static _nameAttribute = "name";
|
|
2131
2180
|
static _valueAttribute = "value";
|
|
2132
2181
|
constructor() {
|
|
2133
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(
|
|
2182
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(lt);
|
|
2134
2183
|
}
|
|
2135
2184
|
static get observedAttributes() {
|
|
2136
2185
|
return [
|
|
@@ -2190,40 +2239,41 @@ class l extends HTMLElement {
|
|
|
2190
2239
|
_render() {
|
|
2191
2240
|
if (this.shadowRoot === null)
|
|
2192
2241
|
return;
|
|
2193
|
-
this.shadowRoot.innerHTML =
|
|
2242
|
+
this.shadowRoot.innerHTML = we;
|
|
2194
2243
|
const t = this._inputElement;
|
|
2195
2244
|
t != null && (t.checked = this.checked, t.disabled = this.disabled, this.getAttribute(l._nameAttribute) !== null && this.getAttribute(l._nameAttribute) !== "" && (t.name = this.getAttribute(l._nameAttribute) ?? ""), this.getAttribute(l._valueAttribute) !== null && this.getAttribute(l._valueAttribute) !== "" && (t.value = this.getAttribute(l._valueAttribute) ?? "on")), this._addEventListeners();
|
|
2196
2245
|
}
|
|
2197
2246
|
}
|
|
2198
|
-
const
|
|
2247
|
+
const Ye = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
2199
2248
|
__proto__: null,
|
|
2200
2249
|
ToggleComponent: l,
|
|
2201
|
-
selector:
|
|
2250
|
+
selector: _e
|
|
2202
2251
|
}, Symbol.toStringTag, { value: "Module" }));
|
|
2203
2252
|
export {
|
|
2204
|
-
|
|
2205
|
-
|
|
2206
|
-
|
|
2207
|
-
|
|
2208
|
-
|
|
2209
|
-
|
|
2210
|
-
|
|
2211
|
-
|
|
2253
|
+
Ee as APPLICATION_NAME,
|
|
2254
|
+
Ue as Alert,
|
|
2255
|
+
Ge as Avatar,
|
|
2256
|
+
De as Badge,
|
|
2257
|
+
Te as BarMenu,
|
|
2258
|
+
Le as BaseButton,
|
|
2259
|
+
Pe as BaseCard,
|
|
2260
|
+
Ie as BaseDialog,
|
|
2212
2261
|
T as CUSTOM_MESSAGES,
|
|
2213
|
-
|
|
2214
|
-
|
|
2215
|
-
|
|
2216
|
-
|
|
2217
|
-
|
|
2218
|
-
|
|
2219
|
-
|
|
2220
|
-
|
|
2221
|
-
|
|
2222
|
-
|
|
2223
|
-
|
|
2224
|
-
|
|
2225
|
-
|
|
2226
|
-
|
|
2227
|
-
|
|
2228
|
-
|
|
2262
|
+
ze as CloseButton,
|
|
2263
|
+
Me as ConfirmButton,
|
|
2264
|
+
He as ConfirmationDialog,
|
|
2265
|
+
Ne as HeaderBodyFooterDialog,
|
|
2266
|
+
$e as NextButton,
|
|
2267
|
+
Oe as PreviousButton,
|
|
2268
|
+
Fe as ProgressBar,
|
|
2269
|
+
qe as Skeleton,
|
|
2270
|
+
je as Spinner,
|
|
2271
|
+
Ke as Tag,
|
|
2272
|
+
We as TextInput,
|
|
2273
|
+
Ye as Toggle,
|
|
2274
|
+
Ce as Tooltip,
|
|
2275
|
+
Re as UndoButton,
|
|
2276
|
+
xe as WebComponentsRegistry,
|
|
2277
|
+
ut as clearThemes,
|
|
2278
|
+
ke as switchTheme
|
|
2229
2279
|
};
|