@albi_scando/as-design-system-lib 1.6.4 → 1.6.5
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
1
|
const ct = "as-design-system-lib";
|
|
2
|
-
class
|
|
2
|
+
class ht {
|
|
3
3
|
/**
|
|
4
4
|
* Creates an instance of WebComponentsRegistry.
|
|
5
5
|
* Registers all custom elements provided in the map of components.
|
|
@@ -36,9 +36,9 @@ class bt {
|
|
|
36
36
|
customElements.get(t) === void 0 ? (customElements.define(t, e), console.log(`Registered Web Component: ${t}`)) : console.warn(`Web Component "${t}" is already registered.`);
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
|
-
const
|
|
39
|
+
const E = {
|
|
40
40
|
CONFIRMATION_DIALOG_CONFIRM: "confirmation-dialog-confirm"
|
|
41
|
-
}, $ = "base-button",
|
|
41
|
+
}, $ = "base-button", o = "", v = {
|
|
42
42
|
SHOW_MODAL: "show-modal",
|
|
43
43
|
CLOSE: "close"
|
|
44
44
|
}, H = {
|
|
@@ -63,8 +63,8 @@ const _ = {
|
|
|
63
63
|
}, P = `<button part="button">
|
|
64
64
|
<slot></slot>
|
|
65
65
|
</button>
|
|
66
|
-
`, V = ":where(button,input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::file-selector-button{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);font-family:var(--font-family-base);letter-spacing:var(--letter-spacing-normal);line-height:var(--line-height-normal);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);display:inline-flex;justify-content:center;align-items:center;text-align:center;gap:var(--gap-sm);background:var(--color-bg-secondary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-primary);border-radius:var(--border-radius-lg);transition:all var(--transition-base)}:where(button,input[type=button],input[type=submit],input[type=reset])>.material-symbols-outlined{font-size:var(--font-size-xl);font-family:Material Symbols Outlined;line-height:1}:where(button,input[type=button],input[type=submit],input[type=reset])[disabled]{opacity:.3;cursor:not-allowed}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):hover),:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):active){background:var(--color-hover-bg-secondary);border-color:var(--color-hover-border-secondary)}:where(input[type=file]){inline-size:100%;max-inline-size:max-content;background-color:var(--color-bg-secondary)}",
|
|
67
|
-
|
|
66
|
+
`, V = ":where(button,input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::file-selector-button{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);font-family:var(--font-family-base);letter-spacing:var(--letter-spacing-normal);line-height:var(--line-height-normal);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);display:inline-flex;justify-content:center;align-items:center;text-align:center;gap:var(--gap-sm);background:var(--color-bg-secondary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-primary);border-radius:var(--border-radius-lg);transition:all var(--transition-base)}:where(button,input[type=button],input[type=submit],input[type=reset])>.material-symbols-outlined{font-size:var(--font-size-xl);font-family:Material Symbols Outlined;line-height:1}:where(button,input[type=button],input[type=submit],input[type=reset])[disabled]{opacity:.3;cursor:not-allowed}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):hover),:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):active){background:var(--color-hover-bg-secondary);border-color:var(--color-hover-border-secondary)}:where(input[type=file]){inline-size:100%;max-inline-size:max-content;background-color:var(--color-bg-secondary)}", x = new CSSStyleSheet();
|
|
67
|
+
x.replaceSync(V);
|
|
68
68
|
class i extends HTMLElement {
|
|
69
69
|
/**
|
|
70
70
|
* @see HTMLButtonElement.autofocus
|
|
@@ -103,7 +103,7 @@ class i extends HTMLElement {
|
|
|
103
103
|
* @ignore
|
|
104
104
|
*/
|
|
105
105
|
constructor() {
|
|
106
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(
|
|
106
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(x);
|
|
107
107
|
}
|
|
108
108
|
/**
|
|
109
109
|
* Specifies which attributes should be observed for changes.
|
|
@@ -127,49 +127,49 @@ class i extends HTMLElement {
|
|
|
127
127
|
return this.hasAttribute(i.autofocusAttribute);
|
|
128
128
|
}
|
|
129
129
|
set autofocus(t) {
|
|
130
|
-
t ? this.setAttribute(i.autofocusAttribute,
|
|
130
|
+
t ? this.setAttribute(i.autofocusAttribute, o) : this.removeAttribute(i.autofocusAttribute);
|
|
131
131
|
}
|
|
132
132
|
get command() {
|
|
133
|
-
return this.getAttribute(i.commandAttribute) ??
|
|
133
|
+
return this.getAttribute(i.commandAttribute) ?? o;
|
|
134
134
|
}
|
|
135
135
|
set command(t) {
|
|
136
136
|
this.setAttribute(i.commandAttribute, t);
|
|
137
137
|
}
|
|
138
138
|
get commandfor() {
|
|
139
|
-
return this.getAttribute(i.commandforAttribute) ??
|
|
139
|
+
return this.getAttribute(i.commandforAttribute) ?? o;
|
|
140
140
|
}
|
|
141
141
|
set commandfor(t) {
|
|
142
|
-
t !==
|
|
142
|
+
t !== o ? this.setAttribute(i.commandforAttribute, t) : this.removeAttribute(i.commandforAttribute);
|
|
143
143
|
}
|
|
144
144
|
get disabled() {
|
|
145
145
|
return this.hasAttribute(i.disabledAttribute);
|
|
146
146
|
}
|
|
147
147
|
set disabled(t) {
|
|
148
|
-
t ? this.setAttribute(i.disabledAttribute,
|
|
148
|
+
t ? this.setAttribute(i.disabledAttribute, o) : this.removeAttribute(i.disabledAttribute);
|
|
149
149
|
}
|
|
150
150
|
get name() {
|
|
151
|
-
return this.getAttribute(i.nameAttribute) ??
|
|
151
|
+
return this.getAttribute(i.nameAttribute) ?? o;
|
|
152
152
|
}
|
|
153
153
|
set name(t) {
|
|
154
|
-
t !==
|
|
154
|
+
t !== o ? this.setAttribute(i.nameAttribute, t) : this.removeAttribute(i.nameAttribute);
|
|
155
155
|
}
|
|
156
156
|
get headline() {
|
|
157
|
-
return this.getAttribute(i.titleAttribute) ??
|
|
157
|
+
return this.getAttribute(i.titleAttribute) ?? o;
|
|
158
158
|
}
|
|
159
159
|
set headline(t) {
|
|
160
|
-
t !==
|
|
160
|
+
t !== o ? this.setAttribute(i.titleAttribute, t) : this.removeAttribute(i.titleAttribute);
|
|
161
161
|
}
|
|
162
162
|
get type() {
|
|
163
163
|
return this.getAttribute(i.typeAttribute) ?? "button";
|
|
164
164
|
}
|
|
165
165
|
set type(t) {
|
|
166
|
-
t !==
|
|
166
|
+
t !== o ? this.setAttribute(i.typeAttribute, t) : this.removeAttribute(i.typeAttribute);
|
|
167
167
|
}
|
|
168
168
|
get value() {
|
|
169
169
|
return this.getAttribute(i.valueAttribute) ?? "button";
|
|
170
170
|
}
|
|
171
171
|
set value(t) {
|
|
172
|
-
t !==
|
|
172
|
+
t !== o ? this.setAttribute(i.valueAttribute, t) : this.removeAttribute(i.valueAttribute);
|
|
173
173
|
}
|
|
174
174
|
/**
|
|
175
175
|
* Lifecycle hook invoked when the component is inserted into the DOM.
|
|
@@ -245,7 +245,7 @@ class i extends HTMLElement {
|
|
|
245
245
|
* @returns {void}
|
|
246
246
|
*/
|
|
247
247
|
_handleClick = () => {
|
|
248
|
-
if (this.command ===
|
|
248
|
+
if (this.command === o || this.commandfor === o)
|
|
249
249
|
return;
|
|
250
250
|
let t = document.getElementById(this.commandfor);
|
|
251
251
|
if (t ??= this._findElementInShadowDOM(this.commandfor), t === null)
|
|
@@ -272,17 +272,17 @@ class i extends HTMLElement {
|
|
|
272
272
|
let r = this.querySelector(s);
|
|
273
273
|
if (r !== null || (r = this._searchInShadowRootsOfChildren(this, s), r !== null))
|
|
274
274
|
return r;
|
|
275
|
-
let
|
|
276
|
-
for (;
|
|
277
|
-
if (r =
|
|
275
|
+
let n = this.parentElement;
|
|
276
|
+
for (; n !== null; ) {
|
|
277
|
+
if (r = n.querySelector(s), r !== null || (r = this._searchInShadowRootsOfChildren(n, s), r !== null))
|
|
278
278
|
return r;
|
|
279
|
-
const l =
|
|
279
|
+
const l = n.parentElement;
|
|
280
280
|
if (l !== null)
|
|
281
|
-
|
|
281
|
+
n = l;
|
|
282
282
|
else {
|
|
283
|
-
const
|
|
284
|
-
if (
|
|
285
|
-
|
|
283
|
+
const a = n.getRootNode();
|
|
284
|
+
if (a instanceof ShadowRoot && a.host !== null)
|
|
285
|
+
n = a.host;
|
|
286
286
|
else
|
|
287
287
|
break;
|
|
288
288
|
}
|
|
@@ -303,19 +303,19 @@ class i extends HTMLElement {
|
|
|
303
303
|
const l = r.shadowRoot.querySelector(e);
|
|
304
304
|
if (l !== null)
|
|
305
305
|
return l;
|
|
306
|
-
const
|
|
306
|
+
const a = this._searchInShadowRootsOfChildren(
|
|
307
307
|
r.shadowRoot,
|
|
308
308
|
e
|
|
309
309
|
);
|
|
310
|
-
if (
|
|
311
|
-
return
|
|
310
|
+
if (a !== null)
|
|
311
|
+
return a;
|
|
312
312
|
}
|
|
313
|
-
const
|
|
313
|
+
const n = this._searchInShadowRootsOfChildren(
|
|
314
314
|
r,
|
|
315
315
|
e
|
|
316
316
|
);
|
|
317
|
-
if (
|
|
318
|
-
return
|
|
317
|
+
if (n !== null)
|
|
318
|
+
return n;
|
|
319
319
|
}
|
|
320
320
|
return null;
|
|
321
321
|
}
|
|
@@ -327,7 +327,7 @@ class i extends HTMLElement {
|
|
|
327
327
|
*/
|
|
328
328
|
_syncAttribute(t) {
|
|
329
329
|
const e = this.buttonElement;
|
|
330
|
-
this.hasAttribute(t) ? e.setAttribute(t, this.getAttribute(t) ??
|
|
330
|
+
e !== null && (this.hasAttribute(t) ? e.setAttribute(t, this.getAttribute(t) ?? o) : e.removeAttribute(t));
|
|
331
331
|
}
|
|
332
332
|
/**
|
|
333
333
|
* Syncs all observed attributes from host to button element.
|
|
@@ -341,7 +341,7 @@ class i extends HTMLElement {
|
|
|
341
341
|
});
|
|
342
342
|
}
|
|
343
343
|
}
|
|
344
|
-
const
|
|
344
|
+
const bt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
345
345
|
__proto__: null,
|
|
346
346
|
BaseButtonComponent: i,
|
|
347
347
|
selector: $
|
|
@@ -349,15 +349,15 @@ const ht = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
|
349
349
|
<span class="material-symbols-outlined">undo</span>
|
|
350
350
|
<span>Undo</span>
|
|
351
351
|
</button>
|
|
352
|
-
`, z = "button[part=button]{background:var(--color-warning);font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{filter:brightness(1.2)}",
|
|
353
|
-
|
|
352
|
+
`, z = "button[part=button]{background:var(--color-warning);font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{filter:brightness(1.2)}", L = new CSSStyleSheet();
|
|
353
|
+
L.replaceSync(z);
|
|
354
354
|
class q extends i {
|
|
355
355
|
/**
|
|
356
356
|
* @constructor
|
|
357
357
|
* @ignore
|
|
358
358
|
*/
|
|
359
359
|
constructor() {
|
|
360
|
-
super(), this.shadowRoot?.adoptedStyleSheets.push(
|
|
360
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push(L), this.command = v.CLOSE, this.title = "Undo";
|
|
361
361
|
}
|
|
362
362
|
/**
|
|
363
363
|
* Specifies which attributes should be observed for changes.
|
|
@@ -390,17 +390,17 @@ class q extends i {
|
|
|
390
390
|
e !== null && (this.commandfor = e.id);
|
|
391
391
|
}
|
|
392
392
|
}
|
|
393
|
-
const
|
|
393
|
+
const D = "undo-button", vt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
394
394
|
__proto__: null,
|
|
395
395
|
UndoButtonComponent: q,
|
|
396
|
-
selector:
|
|
397
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
396
|
+
selector: D
|
|
397
|
+
}, Symbol.toStringTag, { value: "Module" })), W = `<button title="Confirm" part="button">
|
|
398
398
|
<span class="material-symbols-outlined">check</span>
|
|
399
399
|
<span>Confirm</span>
|
|
400
400
|
</button>
|
|
401
|
-
`,
|
|
402
|
-
k.replaceSync(
|
|
403
|
-
class
|
|
401
|
+
`, F = "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();
|
|
402
|
+
k.replaceSync(F);
|
|
403
|
+
class K extends i {
|
|
404
404
|
/**
|
|
405
405
|
* @constructor
|
|
406
406
|
* @ignore
|
|
@@ -424,7 +424,7 @@ class D extends i {
|
|
|
424
424
|
* Renders the component's HTML structure.
|
|
425
425
|
*/
|
|
426
426
|
_render() {
|
|
427
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
427
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = W, this._syncAttributes());
|
|
428
428
|
}
|
|
429
429
|
/**
|
|
430
430
|
* It finds the closest parent dialog and
|
|
@@ -441,7 +441,7 @@ class D extends i {
|
|
|
441
441
|
}
|
|
442
442
|
const A = "confirm-button", pt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
443
443
|
__proto__: null,
|
|
444
|
-
ConfirmButtonComponent:
|
|
444
|
+
ConfirmButtonComponent: K,
|
|
445
445
|
selector: A
|
|
446
446
|
}, Symbol.toStringTag, { value: "Module" })), B = `<button part="button">
|
|
447
447
|
<span class="material-symbols-outlined">chevron_left</span>
|
|
@@ -503,7 +503,7 @@ const Y = "previous-button", yt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */
|
|
|
503
503
|
</button>
|
|
504
504
|
`, X = "button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", O = new CSSStyleSheet();
|
|
505
505
|
O.replaceSync(X);
|
|
506
|
-
class
|
|
506
|
+
class f extends i {
|
|
507
507
|
static _disabledAttribute = "disabled";
|
|
508
508
|
static _titleAttribute = "title";
|
|
509
509
|
/**
|
|
@@ -530,7 +530,7 @@ class m extends i {
|
|
|
530
530
|
* Updates the title visibility based on disabled state.
|
|
531
531
|
*/
|
|
532
532
|
attributeChangedCallback(t, e, s) {
|
|
533
|
-
super.attributeChangedCallback(t, e, s), t ===
|
|
533
|
+
super.attributeChangedCallback(t, e, s), t === f._disabledAttribute && this._updateTitle();
|
|
534
534
|
}
|
|
535
535
|
/**
|
|
536
536
|
* Renders the component's HTML structure.
|
|
@@ -546,19 +546,19 @@ class m extends i {
|
|
|
546
546
|
const t = this.shadowRoot?.querySelector(
|
|
547
547
|
"button"
|
|
548
548
|
);
|
|
549
|
-
t !== null && (this.disabled ? t.removeAttribute(
|
|
549
|
+
t !== null && (this.disabled ? t.removeAttribute(f._titleAttribute) : t.setAttribute(f._titleAttribute, "Next"));
|
|
550
550
|
}
|
|
551
551
|
}
|
|
552
552
|
const J = "next-button", gt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
553
553
|
__proto__: null,
|
|
554
|
-
NextButtonComponent:
|
|
554
|
+
NextButtonComponent: f,
|
|
555
555
|
selector: J
|
|
556
556
|
}, Symbol.toStringTag, { value: "Module" })), Q = `<dialog part="dialog">
|
|
557
557
|
<slot></slot>
|
|
558
558
|
</dialog>
|
|
559
559
|
`, Z = "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}}", R = new CSSStyleSheet();
|
|
560
560
|
R.replaceSync(Z);
|
|
561
|
-
class
|
|
561
|
+
class h extends HTMLElement {
|
|
562
562
|
/**
|
|
563
563
|
* @see HTMLDialogElement.closedBy
|
|
564
564
|
*/
|
|
@@ -579,19 +579,19 @@ class b extends HTMLElement {
|
|
|
579
579
|
* Specifies which attributes should be observed for changes.
|
|
580
580
|
*/
|
|
581
581
|
static get observedAttributes() {
|
|
582
|
-
return [
|
|
582
|
+
return [h.closedByAttribute];
|
|
583
583
|
}
|
|
584
584
|
get dialogElement() {
|
|
585
585
|
return this.shadowRoot?.querySelector("dialog");
|
|
586
586
|
}
|
|
587
587
|
get command() {
|
|
588
|
-
return this.getAttribute(
|
|
588
|
+
return this.getAttribute(h.closedByAttribute) ?? _.ANY;
|
|
589
589
|
}
|
|
590
590
|
get closedBy() {
|
|
591
591
|
return this._closedBy;
|
|
592
592
|
}
|
|
593
593
|
set closedBy(t) {
|
|
594
|
-
this._closedBy = t, this.setAttribute(
|
|
594
|
+
this._closedBy = t, this.setAttribute(h.closedByAttribute, t);
|
|
595
595
|
}
|
|
596
596
|
/**
|
|
597
597
|
* Lifecycle
|
|
@@ -653,7 +653,7 @@ class b extends HTMLElement {
|
|
|
653
653
|
*/
|
|
654
654
|
_syncAttribute(t) {
|
|
655
655
|
const e = this.dialogElement;
|
|
656
|
-
e != null && (this.hasAttribute(t) === !0 ? e.setAttribute(t, this.getAttribute(t) ??
|
|
656
|
+
e != null && (this.hasAttribute(t) === !0 ? e.setAttribute(t, this.getAttribute(t) ?? o) : e.removeAttribute(t));
|
|
657
657
|
}
|
|
658
658
|
/**
|
|
659
659
|
* Syncs all observed attributes from host to dialog element.
|
|
@@ -662,7 +662,7 @@ class b extends HTMLElement {
|
|
|
662
662
|
* @returns {void}
|
|
663
663
|
*/
|
|
664
664
|
_syncAttributes() {
|
|
665
|
-
|
|
665
|
+
h.observedAttributes.forEach((t) => {
|
|
666
666
|
this._syncAttribute(t);
|
|
667
667
|
});
|
|
668
668
|
}
|
|
@@ -688,9 +688,9 @@ class b extends HTMLElement {
|
|
|
688
688
|
}, 300);
|
|
689
689
|
}
|
|
690
690
|
}
|
|
691
|
-
const tt = "base-dialog",
|
|
691
|
+
const tt = "base-dialog", ft = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
692
692
|
__proto__: null,
|
|
693
|
-
BaseDialogComponent:
|
|
693
|
+
BaseDialogComponent: h,
|
|
694
694
|
selector: tt
|
|
695
695
|
}, Symbol.toStringTag, { value: "Module" })), et = `<dialog part="dialog">
|
|
696
696
|
<header part="header">
|
|
@@ -715,22 +715,26 @@ const tt = "base-dialog", mt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Obj
|
|
|
715
715
|
<slot name="footer"></slot>
|
|
716
716
|
</footer>
|
|
717
717
|
</dialog>
|
|
718
|
-
`, rt =
|
|
719
|
-
|
|
720
|
-
class S extends
|
|
718
|
+
`, rt = 'dialog{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}', N = new CSSStyleSheet();
|
|
719
|
+
N.replaceSync(rt);
|
|
720
|
+
class S extends h {
|
|
721
|
+
_sectionNames = ["header", "body", "footer"];
|
|
722
|
+
_handleSlotChange = () => {
|
|
723
|
+
this._updateSectionState();
|
|
724
|
+
};
|
|
721
725
|
/**
|
|
722
726
|
* @constructor
|
|
723
727
|
* @ignore
|
|
724
728
|
*/
|
|
725
729
|
constructor() {
|
|
726
|
-
super(), this.shadowRoot?.adoptedStyleSheets.push(
|
|
730
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push(N);
|
|
727
731
|
}
|
|
728
732
|
/**
|
|
729
733
|
* Specifies which attributes should be observed for changes.
|
|
730
734
|
* Uses parent's attributes since we're extending the base dialog.
|
|
731
735
|
*/
|
|
732
736
|
static get observedAttributes() {
|
|
733
|
-
return
|
|
737
|
+
return h.observedAttributes;
|
|
734
738
|
}
|
|
735
739
|
/**
|
|
736
740
|
* Renders the component's HTML structure.
|
|
@@ -741,18 +745,61 @@ class S extends b {
|
|
|
741
745
|
_render() {
|
|
742
746
|
this.shadowRoot !== null && (this.shadowRoot.innerHTML = st, this._syncAttributes());
|
|
743
747
|
}
|
|
748
|
+
/**
|
|
749
|
+
* Adds slot listeners so sections can react to projected content changes.
|
|
750
|
+
*
|
|
751
|
+
* @returns {void}
|
|
752
|
+
*/
|
|
753
|
+
_addEventListeners() {
|
|
754
|
+
super._addEventListeners(), this.shadowRoot !== null && (this.shadowRoot.querySelectorAll("slot").forEach((t) => {
|
|
755
|
+
t.addEventListener("slotchange", this._handleSlotChange);
|
|
756
|
+
}), this._updateSectionState());
|
|
757
|
+
}
|
|
758
|
+
/**
|
|
759
|
+
* Removes listeners created in _addEventListeners.
|
|
760
|
+
*
|
|
761
|
+
* @returns {void}
|
|
762
|
+
*/
|
|
763
|
+
_removeEventListeners() {
|
|
764
|
+
super._removeEventListeners(), this.shadowRoot !== null && this.shadowRoot.querySelectorAll("slot").forEach((t) => {
|
|
765
|
+
t.removeEventListener("slotchange", this._handleSlotChange);
|
|
766
|
+
});
|
|
767
|
+
}
|
|
768
|
+
/**
|
|
769
|
+
* Syncs section visibility and divider placement based on non-empty slots.
|
|
770
|
+
*
|
|
771
|
+
* @returns {void}
|
|
772
|
+
*/
|
|
773
|
+
_updateSectionState() {
|
|
774
|
+
if (this.shadowRoot === null)
|
|
775
|
+
return;
|
|
776
|
+
const t = [];
|
|
777
|
+
this._sectionNames.forEach((e) => {
|
|
778
|
+
const s = this.shadowRoot?.querySelector(
|
|
779
|
+
`[part='${e}']`
|
|
780
|
+
), r = this.shadowRoot?.querySelector(
|
|
781
|
+
`slot[name='${e}']`
|
|
782
|
+
);
|
|
783
|
+
if (s === null || r === null)
|
|
784
|
+
return;
|
|
785
|
+
const n = r.assignedNodes({ flatten: !0 }).some((l) => l.nodeType === Node.TEXT_NODE ? l.textContent?.trim().length !== 0 : l.nodeType === Node.ELEMENT_NODE);
|
|
786
|
+
s.toggleAttribute("hidden", n === !1), s.dataset.filled = String(n), s.removeAttribute("data-divider"), n === !0 && t.push(s);
|
|
787
|
+
}), t.slice(0, -1).forEach((e) => {
|
|
788
|
+
e.dataset.divider = "true";
|
|
789
|
+
});
|
|
790
|
+
}
|
|
744
791
|
}
|
|
745
|
-
const
|
|
746
|
-
|
|
792
|
+
const C = new CSSStyleSheet();
|
|
793
|
+
C.replaceSync(it);
|
|
747
794
|
class d extends S {
|
|
748
795
|
/**
|
|
749
796
|
* The title of the confirmation dialog.
|
|
750
797
|
*/
|
|
751
|
-
_headline =
|
|
798
|
+
_headline = o;
|
|
752
799
|
/**
|
|
753
800
|
* The text content of the confirmation dialog.
|
|
754
801
|
*/
|
|
755
|
-
_text =
|
|
802
|
+
_text = o;
|
|
756
803
|
/**
|
|
757
804
|
* The value associated with the confirmation action, emitted in the confirm event.
|
|
758
805
|
*/
|
|
@@ -773,7 +820,7 @@ class d extends S {
|
|
|
773
820
|
* @constructor
|
|
774
821
|
*/
|
|
775
822
|
constructor() {
|
|
776
|
-
super(), this.shadowRoot?.adoptedStyleSheets.push(
|
|
823
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push(C);
|
|
777
824
|
}
|
|
778
825
|
/**
|
|
779
826
|
* Specifies which attributes should be observed for changes.
|
|
@@ -832,13 +879,13 @@ class d extends S {
|
|
|
832
879
|
if (d.observedAttributes.includes(t))
|
|
833
880
|
switch (t) {
|
|
834
881
|
case d.headlineAttribute: {
|
|
835
|
-
this._headline = this.getAttribute(t) ??
|
|
882
|
+
this._headline = this.getAttribute(t) ?? o;
|
|
836
883
|
const e = this.shadowRoot?.querySelector("h2");
|
|
837
884
|
e != null && (e.textContent = this._headline);
|
|
838
885
|
break;
|
|
839
886
|
}
|
|
840
887
|
case d.textAttribute: {
|
|
841
|
-
this._text = this.getAttribute(t) ??
|
|
888
|
+
this._text = this.getAttribute(t) ?? o;
|
|
842
889
|
const e = this.shadowRoot?.querySelector("p");
|
|
843
890
|
e != null && (e.textContent = this._text);
|
|
844
891
|
break;
|
|
@@ -892,7 +939,7 @@ class d extends S {
|
|
|
892
939
|
*/
|
|
893
940
|
_handleConfirm = () => {
|
|
894
941
|
const t = new CustomEvent(
|
|
895
|
-
|
|
942
|
+
E.CONFIRMATION_DIALOG_CONFIRM,
|
|
896
943
|
{
|
|
897
944
|
bubbles: !0,
|
|
898
945
|
composed: !0,
|
|
@@ -905,8 +952,8 @@ class d extends S {
|
|
|
905
952
|
};
|
|
906
953
|
}
|
|
907
954
|
const nt = "confirmation-dialog", ot = {
|
|
908
|
-
CONFIRMATION_DIALOG_CONFIRM:
|
|
909
|
-
},
|
|
955
|
+
CONFIRMATION_DIALOG_CONFIRM: E.CONFIRMATION_DIALOG_CONFIRM
|
|
956
|
+
}, mt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
910
957
|
__proto__: null,
|
|
911
958
|
COMPONENT_CUSTOM_MESSAGES: ot,
|
|
912
959
|
ConfirmationDialogComponent: d,
|
|
@@ -924,8 +971,8 @@ const nt = "confirmation-dialog", ot = {
|
|
|
924
971
|
|
|
925
972
|
<next-button class="nav-next" part="nav-next-button"></next-button>
|
|
926
973
|
</div>
|
|
927
|
-
`, ut = ":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)}",
|
|
928
|
-
|
|
974
|
+
`, ut = ":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)}", M = new CSSStyleSheet();
|
|
975
|
+
M.replaceSync(ut);
|
|
929
976
|
class c extends HTMLElement {
|
|
930
977
|
static _visibleCountAttribute = "visible-count";
|
|
931
978
|
static _cyclicalNavigationAttribute = "cyclical-navigation";
|
|
@@ -944,7 +991,7 @@ class c extends HTMLElement {
|
|
|
944
991
|
* @constructor
|
|
945
992
|
*/
|
|
946
993
|
constructor() {
|
|
947
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(
|
|
994
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(M);
|
|
948
995
|
}
|
|
949
996
|
/**
|
|
950
997
|
* Specifies which attributes should be observed for changes.
|
|
@@ -957,7 +1004,7 @@ class c extends HTMLElement {
|
|
|
957
1004
|
}
|
|
958
1005
|
get visibleButtons() {
|
|
959
1006
|
const t = this.getAttribute(c._visibleCountAttribute);
|
|
960
|
-
if (t !== null && t !==
|
|
1007
|
+
if (t !== null && t !== o) {
|
|
961
1008
|
const e = parseInt(t, 10);
|
|
962
1009
|
return Math.max(this._MIN_VISIBLE, Math.min(this._MAX_VISIBLE, e));
|
|
963
1010
|
}
|
|
@@ -976,7 +1023,7 @@ class c extends HTMLElement {
|
|
|
976
1023
|
set cyclicalNavigation(t) {
|
|
977
1024
|
t ? this.setAttribute(
|
|
978
1025
|
c._cyclicalNavigationAttribute,
|
|
979
|
-
|
|
1026
|
+
o
|
|
980
1027
|
) : this.removeAttribute(c._cyclicalNavigationAttribute);
|
|
981
1028
|
}
|
|
982
1029
|
/**
|
|
@@ -1060,34 +1107,34 @@ class c extends HTMLElement {
|
|
|
1060
1107
|
* Update button visibility by showing/hiding rows with fade
|
|
1061
1108
|
*/
|
|
1062
1109
|
_updateButtonVisibility(t) {
|
|
1063
|
-
const e = this._getSlottedButtons(), s = e.length, r = this.visibleButtons,
|
|
1064
|
-
e.forEach((
|
|
1065
|
-
const y = u >=
|
|
1066
|
-
y || (
|
|
1067
|
-
}), t !== void 0 ? (e[0]?.offsetHeight, e.forEach((
|
|
1068
|
-
if (u >=
|
|
1069
|
-
const
|
|
1070
|
-
|
|
1110
|
+
const e = this._getSlottedButtons(), s = e.length, r = this.visibleButtons, n = this._currentIndex, l = Math.min(n + r, s);
|
|
1111
|
+
e.forEach((a, u) => {
|
|
1112
|
+
const y = u >= n && u < l, b = a;
|
|
1113
|
+
y || (a.classList.remove("visible-button"), a.classList.remove("animating"), b.style.display = "none");
|
|
1114
|
+
}), t !== void 0 ? (e[0]?.offsetHeight, e.forEach((a, u) => {
|
|
1115
|
+
if (u >= n && u < l) {
|
|
1116
|
+
const b = a;
|
|
1117
|
+
b.style.display = "inline-flex", a.classList.add("animating");
|
|
1071
1118
|
const T = u % this.visibleButtons * 50;
|
|
1072
|
-
|
|
1119
|
+
b.style.transitionDelay = `${T}ms`;
|
|
1073
1120
|
}
|
|
1074
|
-
}), e[0]?.offsetHeight, e.forEach((
|
|
1075
|
-
u >=
|
|
1121
|
+
}), e[0]?.offsetHeight, e.forEach((a, u) => {
|
|
1122
|
+
u >= n && u < l && a.classList.add("visible-button");
|
|
1076
1123
|
}), setTimeout(() => {
|
|
1077
|
-
e.forEach((
|
|
1078
|
-
|
|
1124
|
+
e.forEach((a) => {
|
|
1125
|
+
a.classList.remove("animating"), a.style.transitionDelay = o;
|
|
1079
1126
|
});
|
|
1080
|
-
}, 400)) : e.forEach((
|
|
1081
|
-
const y = u >=
|
|
1082
|
-
y && (
|
|
1127
|
+
}, 400)) : e.forEach((a, u) => {
|
|
1128
|
+
const y = u >= n && u < l, b = a;
|
|
1129
|
+
y && (b.style.display = "inline-flex", a.classList.add("visible-button"));
|
|
1083
1130
|
}), this._updateNavigationButtons(s, r);
|
|
1084
1131
|
}
|
|
1085
1132
|
/**
|
|
1086
1133
|
* Update navigation buttons visibility and disabled state
|
|
1087
1134
|
*/
|
|
1088
1135
|
_updateNavigationButtons(t, e) {
|
|
1089
|
-
const s = t > e, r = this._currentIndex + e < t,
|
|
1090
|
-
this._navPrevButton !== null && (s ? (this._navPrevButton.classList.add("visible"), this._navPrevButton.disabled = !this._cyclicalNavigation &&
|
|
1136
|
+
const s = t > e, r = this._currentIndex + e < t, n = this._currentIndex === 0, l = !r;
|
|
1137
|
+
this._navPrevButton !== null && (s ? (this._navPrevButton.classList.add("visible"), this._navPrevButton.disabled = !this._cyclicalNavigation && n) : this._navPrevButton.classList.remove("visible")), this._navNextButton !== null && (s ? (this._navNextButton.classList.add("visible"), this._navNextButton.disabled = !this._cyclicalNavigation && l) : this._navNextButton.classList.remove("visible"));
|
|
1091
1138
|
}
|
|
1092
1139
|
/**
|
|
1093
1140
|
* Navigate to previous page (scrolls by visibleCount buttons)
|
|
@@ -1144,14 +1191,14 @@ const dt = "bar-menu", At = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object
|
|
|
1144
1191
|
export {
|
|
1145
1192
|
ct as APPLICATION_NAME,
|
|
1146
1193
|
At as BarMenu,
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1194
|
+
bt as BaseButton,
|
|
1195
|
+
ft as BaseDialog,
|
|
1196
|
+
E as CUSTOM_MESSAGES,
|
|
1150
1197
|
pt as ConfirmButton,
|
|
1151
|
-
|
|
1198
|
+
mt as ConfirmationDialog,
|
|
1152
1199
|
_t as HeaderBodyFooterDialog,
|
|
1153
1200
|
gt as NextButton,
|
|
1154
1201
|
yt as PreviousButton,
|
|
1155
1202
|
vt as UndoButton,
|
|
1156
|
-
|
|
1203
|
+
ht as WebComponentsRegistry
|
|
1157
1204
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(l,
|
|
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 P{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 A={CONFIRMATION_DIALOG_CONFIRM:"confirmation-dialog-confirm"},H="base-button",n="",v={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"/>
|
|
@@ -9,24 +9,24 @@
|
|
|
9
9
|
</svg>`}.CUSTOM_CROSSHAIR)}`;const S={ANY:"any",NONE:"none"},x={KEY_DOWN:"keydown"},p={CLICK:"click"},j=`<button part="button">
|
|
10
10
|
<slot></slot>
|
|
11
11
|
</button>
|
|
12
|
-
`,V=":where(button,input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::file-selector-button{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);font-family:var(--font-family-base);letter-spacing:var(--letter-spacing-normal);line-height:var(--line-height-normal);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);display:inline-flex;justify-content:center;align-items:center;text-align:center;gap:var(--gap-sm);background:var(--color-bg-secondary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-primary);border-radius:var(--border-radius-lg);transition:all var(--transition-base)}:where(button,input[type=button],input[type=submit],input[type=reset])>.material-symbols-outlined{font-size:var(--font-size-xl);font-family:Material Symbols Outlined;line-height:1}:where(button,input[type=button],input[type=submit],input[type=reset])[disabled]{opacity:.3;cursor:not-allowed}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):hover),:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):active){background:var(--color-hover-bg-secondary);border-color:var(--color-hover-border-secondary)}:where(input[type=file]){inline-size:100%;max-inline-size:max-content;background-color:var(--color-bg-secondary)}",k=new CSSStyleSheet;k.replaceSync(V);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(k)}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=j,this._syncAttributes())}_addEventListeners(){this.buttonElement.addEventListener(p.CLICK,this._handleClick)}_removeEventListeners(){this.buttonElement.addEventListener(p.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 v.SHOW_MODAL:e.showModal?.();break;case v.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
|
|
12
|
+
`,V=":where(button,input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::file-selector-button{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);font-family:var(--font-family-base);letter-spacing:var(--letter-spacing-normal);line-height:var(--line-height-normal);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);display:inline-flex;justify-content:center;align-items:center;text-align:center;gap:var(--gap-sm);background:var(--color-bg-secondary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-primary);border-radius:var(--border-radius-lg);transition:all var(--transition-base)}:where(button,input[type=button],input[type=submit],input[type=reset])>.material-symbols-outlined{font-size:var(--font-size-xl);font-family:Material Symbols Outlined;line-height:1}:where(button,input[type=button],input[type=submit],input[type=reset])[disabled]{opacity:.3;cursor:not-allowed}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):hover),:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):active){background:var(--color-hover-bg-secondary);border-color:var(--color-hover-border-secondary)}:where(input[type=file]){inline-size:100%;max-inline-size:max-content;background-color:var(--color-bg-secondary)}",k=new CSSStyleSheet;k.replaceSync(V);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(k)}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=j,this._syncAttributes())}_addEventListeners(){this.buttonElement.addEventListener(p.CLICK,this._handleClick)}_removeEventListeners(){this.buttonElement.addEventListener(p.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 v.SHOW_MODAL:e.showModal?.();break;case v.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 u=o.parentElement;if(u!==null)o=u;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 u=r.shadowRoot.querySelector(e);if(u!==null)return u;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 z=Object.freeze(Object.defineProperty({__proto__:null,BaseButtonComponent:i,selector:H},Symbol.toStringTag,{value:"Module"})),q=`<button title="Undo" part="button">
|
|
13
13
|
<span class="material-symbols-outlined">undo</span>
|
|
14
14
|
<span>Undo</span>
|
|
15
15
|
</button>
|
|
16
|
-
`,
|
|
16
|
+
`,W="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;I.replaceSync(W);class D extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(I),this.command=v.CLOSE,this.title="Undo"}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._setCommandForAttribute(),this._addEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=q,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 F=Object.freeze(Object.defineProperty({__proto__:null,UndoButtonComponent:D,selector:"undo-button"},Symbol.toStringTag,{value:"Module"})),K=`<button title="Confirm" part="button">
|
|
17
17
|
<span class="material-symbols-outlined">check</span>
|
|
18
18
|
<span>Confirm</span>
|
|
19
19
|
</button>
|
|
20
|
-
`,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;O.replaceSync(B);class U extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(O),this.command=v.CLOSE,this.title="Confirm"}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._setCommandForAttribute(),this._addEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=
|
|
20
|
+
`,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;O.replaceSync(B);class U extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(O),this.command=v.CLOSE,this.title="Confirm"}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 w="confirm-button",Y=Object.freeze(Object.defineProperty({__proto__:null,ConfirmButtonComponent:U,selector:w},Symbol.toStringTag,{value:"Module"})),G=`<button part="button">
|
|
21
21
|
<span class="material-symbols-outlined">chevron_left</span>
|
|
22
22
|
</button>
|
|
23
|
-
`,X="button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",R=new CSSStyleSheet;R.replaceSync(X);class
|
|
23
|
+
`,X="button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",R=new CSSStyleSheet;R.replaceSync(X);class g extends i{static _disabledAttribute="disabled";static _titleAttribute="title";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(R),this.command=v.CLOSE}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}attributeChangedCallback(t,e,s){super.attributeChangedCallback(t,e,s),t===g._disabledAttribute&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=G,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");t!==null&&(this.disabled?t.removeAttribute(g._titleAttribute):t.setAttribute(g._titleAttribute,"Previous"))}}const J=Object.freeze(Object.defineProperty({__proto__:null,PreviousButtonComponent:g,selector:"previous-button"},Symbol.toStringTag,{value:"Module"})),Q=`<button part="button">
|
|
24
24
|
<span class="material-symbols-outlined">chevron_right</span>
|
|
25
25
|
</button>
|
|
26
|
-
`,Z="button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",
|
|
26
|
+
`,Z="button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",N=new CSSStyleSheet;N.replaceSync(Z);class m extends i{static _disabledAttribute="disabled";static _titleAttribute="title";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(N),this.command=v.CLOSE}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}attributeChangedCallback(t,e,s){super.attributeChangedCallback(t,e,s),t===m._disabledAttribute&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Q,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");t!==null&&(this.disabled?t.removeAttribute(m._titleAttribute):t.setAttribute(m._titleAttribute,"Next"))}}const tt=Object.freeze(Object.defineProperty({__proto__:null,NextButtonComponent:m,selector:"next-button"},Symbol.toStringTag,{value:"Module"})),et=`<dialog part="dialog">
|
|
27
27
|
<slot></slot>
|
|
28
28
|
</dialog>
|
|
29
|
-
`,it="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}}",C=new CSSStyleSheet;C.replaceSync(it);class
|
|
29
|
+
`,it="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}}",C=new CSSStyleSheet;C.replaceSync(it);class b extends HTMLElement{static closedByAttribute="closedby";_closedBy=S.ANY;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(C)}static get observedAttributes(){return[b.closedByAttribute]}get dialogElement(){return this.shadowRoot?.querySelector("dialog")}get command(){return this.getAttribute(b.closedByAttribute)??S.ANY}get closedBy(){return this._closedBy}set closedBy(t){this._closedBy=t,this.setAttribute(b.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=et,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(){b.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 st=Object.freeze(Object.defineProperty({__proto__:null,BaseDialogComponent:b,selector:"base-dialog"},Symbol.toStringTag,{value:"Module"})),rt=`<dialog part="dialog">
|
|
30
30
|
<header part="header">
|
|
31
31
|
<h2></h2>
|
|
32
32
|
</header>
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
<slot name="footer"></slot>
|
|
50
50
|
</footer>
|
|
51
51
|
</dialog>
|
|
52
|
-
`,at=
|
|
52
|
+
`,at='dialog{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}',M=new CSSStyleSheet;M.replaceSync(at);class E extends b{_sectionNames=["header","body","footer"];_handleSlotChange=()=>{this._updateSectionState()};constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(M)}static get observedAttributes(){return b.observedAttributes}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=ot,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(u=>u.nodeType===Node.TEXT_NODE?u.textContent?.trim().length!==0:u.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 T=new CSSStyleSheet;T.replaceSync(nt);class d extends E{_headline=n;_text=n;_value;static textAttribute="text";static headlineAttribute="headline";static valueAttribute="value";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(T)}static get observedAttributes(){return[...E.observedAttributes,d.textAttribute,d.headlineAttribute,d.valueAttribute]}get headline(){return this._headline}set headline(t){this._headline=t,this.setAttribute(d.headlineAttribute,t)}get text(){return this._text}set text(t){this._text=t,this.setAttribute(d.textAttribute,t)}get value(){return this._value}set value(t){this._value=t}connectedCallback(){this._render(),this._addEventListeners(),this.closedBy=S.NONE}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=rt,this._syncAttributes())}_syncAttribute(t){if(d.observedAttributes.includes(t))switch(t){case d.headlineAttribute:{this._headline=this.getAttribute(t)??n;const e=this.shadowRoot?.querySelector("h2");e!=null&&(e.textContent=this._headline);break}case d.textAttribute:{this._text=this.getAttribute(t)??n;const e=this.shadowRoot?.querySelector("p");e!=null&&(e.textContent=this._text);break}case d.valueAttribute:{this._value=this.getAttribute(t);break}default:super._syncAttribute(t)}else super._syncAttribute(t)}_syncAttributes(){super._syncAttributes(),d.observedAttributes.forEach(t=>{this._syncAttribute(t)})}_addEventListeners(){super._addEventListeners(),this.shadowRoot?.querySelector(w)?.addEventListener(p.CLICK,this._handleConfirm)}_removeEventListeners(){super._removeEventListeners(),this.shadowRoot?.querySelector(w)?.removeEventListener(p.CLICK,this._handleConfirm)}_handleConfirm=()=>{const t=new CustomEvent(A.CONFIRMATION_DIALOG_CONFIRM,{bubbles:!0,composed:!0,detail:{value:this._value}});this.dispatchEvent(t)}}const lt="confirmation-dialog",ut={CONFIRMATION_DIALOG_CONFIRM:A.CONFIRMATION_DIALOG_CONFIRM},dt=Object.freeze(Object.defineProperty({__proto__:null,COMPONENT_CUSTOM_MESSAGES:ut,ConfirmationDialogComponent:d,selector:lt},Symbol.toStringTag,{value:"Module"})),ct=Object.freeze(Object.defineProperty({__proto__:null,HeaderBodyFooterDialogComponent:E,selector:"header-body-footer-dialog"},Symbol.toStringTag,{value:"Module"})),ht=`<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
|
+
`,bt=":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)}",$=new CSSStyleSheet;$.replaceSync(bt);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($)}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=ht)}_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(p.CLICK,()=>{this._scrollPrevious()})),this._navNextButton!==null&&(this._navNextButton.setAttribute("aria-label","Next"),this._navNextButton.addEventListener(p.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(x.KEY_DOWN,this._keyDownListener)}_removeKeyboardListener(){this._keyDownListener!==null&&this.removeEventListener(x.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,u=Math.min(o+r,s);e.forEach((a,c)=>{const _=c>=o&&c<u,y=a;_||(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<u){const y=a;y.style.display="inline-flex",a.classList.add("animating");const pt=c%this.visibleButtons*50;y.style.transitionDelay=`${pt}ms`}}),e[0]?.offsetHeight,e.forEach((a,c)=>{c>=o&&c<u&&a.classList.add("visible-button")}),setTimeout(()=>{e.forEach(a=>{a.classList.remove("animating"),a.style.transitionDelay=n})},400)):e.forEach((a,c)=>{const _=c>=o&&c<u,y=a;_&&(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,u=!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&&u):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 vt=Object.freeze(Object.defineProperty({__proto__:null,BarMenuComponent:h,selector:"bar-menu"},Symbol.toStringTag,{value:"Module"}));l.APPLICATION_NAME=f,l.BarMenu=vt,l.BaseButton=z,l.BaseDialog=st,l.CUSTOM_MESSAGES=A,l.ConfirmButton=Y,l.ConfirmationDialog=dt,l.HeaderBodyFooterDialog=ct,l.NextButton=tt,l.PreviousButton=J,l.UndoButton=F,l.WebComponentsRegistry=P,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));
|
|
@@ -5,6 +5,8 @@ import { BaseDialogComponent } from '../base-dialog/component';
|
|
|
5
5
|
* Each section can be populated via named slots.
|
|
6
6
|
*/
|
|
7
7
|
export declare class HeaderBodyFooterDialogComponent extends BaseDialogComponent {
|
|
8
|
+
private readonly _sectionNames;
|
|
9
|
+
private readonly _handleSlotChange;
|
|
8
10
|
/**
|
|
9
11
|
* @constructor
|
|
10
12
|
* @ignore
|
|
@@ -22,4 +24,22 @@ export declare class HeaderBodyFooterDialogComponent extends BaseDialogComponent
|
|
|
22
24
|
* @returns {void}
|
|
23
25
|
*/
|
|
24
26
|
protected _render(): void;
|
|
27
|
+
/**
|
|
28
|
+
* Adds slot listeners so sections can react to projected content changes.
|
|
29
|
+
*
|
|
30
|
+
* @returns {void}
|
|
31
|
+
*/
|
|
32
|
+
protected _addEventListeners(): void;
|
|
33
|
+
/**
|
|
34
|
+
* Removes listeners created in _addEventListeners.
|
|
35
|
+
*
|
|
36
|
+
* @returns {void}
|
|
37
|
+
*/
|
|
38
|
+
protected _removeEventListeners(): void;
|
|
39
|
+
/**
|
|
40
|
+
* Syncs section visibility and divider placement based on non-empty slots.
|
|
41
|
+
*
|
|
42
|
+
* @returns {void}
|
|
43
|
+
*/
|
|
44
|
+
private _updateSectionState;
|
|
25
45
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@albi_scando/as-design-system-lib",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.5",
|
|
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": {
|