@albi_scando/as-design-system-lib 1.6.6 → 1.7.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 +103 -88
- package/dist/as-design-system-lib.umd.js +11 -11
- package/dist/types/constants/custom-messages.const.d.ts +1 -0
- package/dist/types/web-components/dialogs/confirmation-dialog/component.d.ts +3 -2
- package/dist/types/web-components/dialogs/confirmation-dialog/custom-messages.const.d.ts +1 -0
- package/package.json +5 -5
|
@@ -36,12 +36,13 @@ class ht {
|
|
|
36
36
|
customElements.get(t) === void 0 ? (customElements.define(t, e), console.log(`Registered Web Component: ${t}`)) : console.warn(`Web Component "${t}" is already registered.`);
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
|
-
const
|
|
40
|
-
CONFIRMATION_DIALOG_CONFIRM: "confirmation-dialog-confirm"
|
|
41
|
-
|
|
39
|
+
const m = {
|
|
40
|
+
CONFIRMATION_DIALOG_CONFIRM: "confirmation-dialog-confirm",
|
|
41
|
+
CONFIRMATION_DIALOG_UNDO: "confirmation-dialog-undo"
|
|
42
|
+
}, H = "base-button", o = "", p = {
|
|
42
43
|
SHOW_MODAL: "show-modal",
|
|
43
44
|
CLOSE: "close"
|
|
44
|
-
},
|
|
45
|
+
}, P = {
|
|
45
46
|
CUSTOM_CROSSHAIR: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
|
46
47
|
<!-- White border (underneath) -->
|
|
47
48
|
<line x1="16" y1="2" x2="16" y2="30" stroke="white" stroke-width="5"/>
|
|
@@ -52,19 +53,19 @@ const E = {
|
|
|
52
53
|
<line x1="2" y1="16" x2="30" y2="16" stroke="black" stroke-width="2"/>
|
|
53
54
|
</svg>`
|
|
54
55
|
};
|
|
55
|
-
`${btoa(
|
|
56
|
-
const
|
|
56
|
+
`${btoa(P.CUSTOM_CROSSHAIR)}`;
|
|
57
|
+
const A = {
|
|
57
58
|
ANY: "any",
|
|
58
59
|
NONE: "none"
|
|
59
|
-
},
|
|
60
|
+
}, L = {
|
|
60
61
|
KEY_DOWN: "keydown"
|
|
61
|
-
},
|
|
62
|
+
}, h = {
|
|
62
63
|
CLICK: "click"
|
|
63
|
-
},
|
|
64
|
+
}, V = `<button part="button">
|
|
64
65
|
<slot></slot>
|
|
65
66
|
</button>
|
|
66
|
-
`,
|
|
67
|
-
x.replaceSync(
|
|
67
|
+
`, j = ":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();
|
|
68
|
+
x.replaceSync(j);
|
|
68
69
|
class i extends HTMLElement {
|
|
69
70
|
/**
|
|
70
71
|
* @see HTMLButtonElement.autofocus
|
|
@@ -204,7 +205,7 @@ class i extends HTMLElement {
|
|
|
204
205
|
* Syncs host attributes to the internal button element.
|
|
205
206
|
*/
|
|
206
207
|
_render() {
|
|
207
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
208
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = V, this._syncAttributes());
|
|
208
209
|
}
|
|
209
210
|
/**
|
|
210
211
|
* Adds event listeners to the component.
|
|
@@ -212,7 +213,7 @@ class i extends HTMLElement {
|
|
|
212
213
|
* @returns {void}
|
|
213
214
|
*/
|
|
214
215
|
_addEventListeners() {
|
|
215
|
-
this.buttonElement.addEventListener(
|
|
216
|
+
this.buttonElement.addEventListener(h.CLICK, this._handleClick);
|
|
216
217
|
}
|
|
217
218
|
/**
|
|
218
219
|
* Removes event listeners from the component.
|
|
@@ -220,7 +221,7 @@ class i extends HTMLElement {
|
|
|
220
221
|
* @returns {void}
|
|
221
222
|
*/
|
|
222
223
|
_removeEventListeners() {
|
|
223
|
-
this.buttonElement.addEventListener(
|
|
224
|
+
this.buttonElement.addEventListener(h.CLICK, this._handleClick);
|
|
224
225
|
}
|
|
225
226
|
/**
|
|
226
227
|
* Handles the internal button click event and executes the configured command.
|
|
@@ -252,10 +253,10 @@ class i extends HTMLElement {
|
|
|
252
253
|
return;
|
|
253
254
|
const e = t;
|
|
254
255
|
switch (this.command) {
|
|
255
|
-
case
|
|
256
|
+
case p.SHOW_MODAL:
|
|
256
257
|
e.showModal?.();
|
|
257
258
|
break;
|
|
258
|
-
case
|
|
259
|
+
case p.CLOSE:
|
|
259
260
|
e.close?.();
|
|
260
261
|
break;
|
|
261
262
|
}
|
|
@@ -344,20 +345,20 @@ class i extends HTMLElement {
|
|
|
344
345
|
const bt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
345
346
|
__proto__: null,
|
|
346
347
|
BaseButtonComponent: i,
|
|
347
|
-
selector:
|
|
348
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
348
|
+
selector: H
|
|
349
|
+
}, Symbol.toStringTag, { value: "Module" })), D = `<button title="Undo" part="button">
|
|
349
350
|
<span class="material-symbols-outlined">undo</span>
|
|
350
351
|
<span>Undo</span>
|
|
351
352
|
</button>
|
|
352
|
-
`,
|
|
353
|
-
|
|
354
|
-
class
|
|
353
|
+
`, q = "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();
|
|
354
|
+
I.replaceSync(q);
|
|
355
|
+
class z extends i {
|
|
355
356
|
/**
|
|
356
357
|
* @constructor
|
|
357
358
|
* @ignore
|
|
358
359
|
*/
|
|
359
360
|
constructor() {
|
|
360
|
-
super(), this.shadowRoot?.adoptedStyleSheets.push(
|
|
361
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push(I), this.command = p.CLOSE, this.title = "Undo";
|
|
361
362
|
}
|
|
362
363
|
/**
|
|
363
364
|
* Specifies which attributes should be observed for changes.
|
|
@@ -375,7 +376,7 @@ class q extends i {
|
|
|
375
376
|
* Renders the component's HTML structure.
|
|
376
377
|
*/
|
|
377
378
|
_render() {
|
|
378
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
379
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = D, this._syncAttributes());
|
|
379
380
|
}
|
|
380
381
|
/**
|
|
381
382
|
* It finds the closest parent dialog and
|
|
@@ -390,23 +391,23 @@ class q extends i {
|
|
|
390
391
|
e !== null && (this.commandfor = e.id);
|
|
391
392
|
}
|
|
392
393
|
}
|
|
393
|
-
const
|
|
394
|
+
const S = "undo-button", vt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
394
395
|
__proto__: null,
|
|
395
|
-
UndoButtonComponent:
|
|
396
|
-
selector:
|
|
397
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
396
|
+
UndoButtonComponent: z,
|
|
397
|
+
selector: S
|
|
398
|
+
}, Symbol.toStringTag, { value: "Module" })), F = `<button title="Confirm" part="button">
|
|
398
399
|
<span class="material-symbols-outlined">check</span>
|
|
399
400
|
<span>Confirm</span>
|
|
400
401
|
</button>
|
|
401
|
-
`,
|
|
402
|
-
|
|
402
|
+
`, U = "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();
|
|
403
|
+
O.replaceSync(U);
|
|
403
404
|
class K extends i {
|
|
404
405
|
/**
|
|
405
406
|
* @constructor
|
|
406
407
|
* @ignore
|
|
407
408
|
*/
|
|
408
409
|
constructor() {
|
|
409
|
-
super(), this.shadowRoot?.adoptedStyleSheets.push(
|
|
410
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push(O), this.command = p.CLOSE, this.title = "Confirm";
|
|
410
411
|
}
|
|
411
412
|
/**
|
|
412
413
|
* Specifies which attributes should be observed for changes.
|
|
@@ -424,7 +425,7 @@ class K extends i {
|
|
|
424
425
|
* Renders the component's HTML structure.
|
|
425
426
|
*/
|
|
426
427
|
_render() {
|
|
427
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
428
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = F, this._syncAttributes());
|
|
428
429
|
}
|
|
429
430
|
/**
|
|
430
431
|
* It finds the closest parent dialog and
|
|
@@ -439,15 +440,15 @@ class K extends i {
|
|
|
439
440
|
e !== null && (this.commandfor = e.id);
|
|
440
441
|
}
|
|
441
442
|
}
|
|
442
|
-
const
|
|
443
|
+
const w = "confirm-button", pt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
443
444
|
__proto__: null,
|
|
444
445
|
ConfirmButtonComponent: K,
|
|
445
|
-
selector:
|
|
446
|
+
selector: w
|
|
446
447
|
}, Symbol.toStringTag, { value: "Module" })), B = `<button part="button">
|
|
447
448
|
<span class="material-symbols-outlined">chevron_left</span>
|
|
448
449
|
</button>
|
|
449
|
-
`,
|
|
450
|
-
|
|
450
|
+
`, W = "button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", N = new CSSStyleSheet();
|
|
451
|
+
N.replaceSync(W);
|
|
451
452
|
class g extends i {
|
|
452
453
|
static _disabledAttribute = "disabled";
|
|
453
454
|
static _titleAttribute = "title";
|
|
@@ -456,7 +457,7 @@ class g extends i {
|
|
|
456
457
|
* @ignore
|
|
457
458
|
*/
|
|
458
459
|
constructor() {
|
|
459
|
-
super(), this.shadowRoot?.adoptedStyleSheets.push(
|
|
460
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push(N), this.command = p.CLOSE;
|
|
460
461
|
}
|
|
461
462
|
/**
|
|
462
463
|
* Specifies which attributes should be observed for changes.
|
|
@@ -494,15 +495,15 @@ class g extends i {
|
|
|
494
495
|
t !== null && (this.disabled ? t.removeAttribute(g._titleAttribute) : t.setAttribute(g._titleAttribute, "Previous"));
|
|
495
496
|
}
|
|
496
497
|
}
|
|
497
|
-
const
|
|
498
|
+
const G = "previous-button", yt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
498
499
|
__proto__: null,
|
|
499
500
|
PreviousButtonComponent: g,
|
|
500
|
-
selector:
|
|
501
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
501
|
+
selector: G
|
|
502
|
+
}, Symbol.toStringTag, { value: "Module" })), Y = `<button part="button">
|
|
502
503
|
<span class="material-symbols-outlined">chevron_right</span>
|
|
503
504
|
</button>
|
|
504
|
-
`, X = "button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",
|
|
505
|
-
|
|
505
|
+
`, X = "button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", k = new CSSStyleSheet();
|
|
506
|
+
k.replaceSync(X);
|
|
506
507
|
class f extends i {
|
|
507
508
|
static _disabledAttribute = "disabled";
|
|
508
509
|
static _titleAttribute = "title";
|
|
@@ -511,7 +512,7 @@ class f extends i {
|
|
|
511
512
|
* @ignore
|
|
512
513
|
*/
|
|
513
514
|
constructor() {
|
|
514
|
-
super(), this.shadowRoot?.adoptedStyleSheets.push(
|
|
515
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push(k), this.command = p.CLOSE;
|
|
515
516
|
}
|
|
516
517
|
/**
|
|
517
518
|
* Specifies which attributes should be observed for changes.
|
|
@@ -536,7 +537,7 @@ class f extends i {
|
|
|
536
537
|
* Renders the component's HTML structure.
|
|
537
538
|
*/
|
|
538
539
|
_render() {
|
|
539
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
540
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = Y, this._syncAttributes());
|
|
540
541
|
}
|
|
541
542
|
/**
|
|
542
543
|
* Updates the title attribute based on disabled state.
|
|
@@ -556,9 +557,9 @@ const J = "next-button", gt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Obje
|
|
|
556
557
|
}, Symbol.toStringTag, { value: "Module" })), Q = `<dialog part="dialog">
|
|
557
558
|
<slot></slot>
|
|
558
559
|
</dialog>
|
|
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}}",
|
|
560
|
-
|
|
561
|
-
class
|
|
560
|
+
`, 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();
|
|
561
|
+
R.replaceSync(Z);
|
|
562
|
+
class b extends HTMLElement {
|
|
562
563
|
/**
|
|
563
564
|
* @see HTMLDialogElement.closedBy
|
|
564
565
|
*/
|
|
@@ -567,31 +568,31 @@ class h extends HTMLElement {
|
|
|
567
568
|
* Defines how the dialog can be closed.
|
|
568
569
|
* @see DialogClosedBy
|
|
569
570
|
*/
|
|
570
|
-
_closedBy =
|
|
571
|
+
_closedBy = A.ANY;
|
|
571
572
|
/**
|
|
572
573
|
* @constructor
|
|
573
574
|
* @ignore
|
|
574
575
|
*/
|
|
575
576
|
constructor() {
|
|
576
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(
|
|
577
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(R);
|
|
577
578
|
}
|
|
578
579
|
/**
|
|
579
580
|
* Specifies which attributes should be observed for changes.
|
|
580
581
|
*/
|
|
581
582
|
static get observedAttributes() {
|
|
582
|
-
return [
|
|
583
|
+
return [b.closedByAttribute];
|
|
583
584
|
}
|
|
584
585
|
get dialogElement() {
|
|
585
586
|
return this.shadowRoot?.querySelector("dialog");
|
|
586
587
|
}
|
|
587
588
|
get command() {
|
|
588
|
-
return this.getAttribute(
|
|
589
|
+
return this.getAttribute(b.closedByAttribute) ?? A.ANY;
|
|
589
590
|
}
|
|
590
591
|
get closedBy() {
|
|
591
592
|
return this._closedBy;
|
|
592
593
|
}
|
|
593
594
|
set closedBy(t) {
|
|
594
|
-
this._closedBy = t, this.setAttribute(
|
|
595
|
+
this._closedBy = t, this.setAttribute(b.closedByAttribute, t);
|
|
595
596
|
}
|
|
596
597
|
/**
|
|
597
598
|
* Lifecycle
|
|
@@ -662,7 +663,7 @@ class h extends HTMLElement {
|
|
|
662
663
|
* @returns {void}
|
|
663
664
|
*/
|
|
664
665
|
_syncAttributes() {
|
|
665
|
-
|
|
666
|
+
b.observedAttributes.forEach((t) => {
|
|
666
667
|
this._syncAttribute(t);
|
|
667
668
|
});
|
|
668
669
|
}
|
|
@@ -690,7 +691,7 @@ class h extends HTMLElement {
|
|
|
690
691
|
}
|
|
691
692
|
const tt = "base-dialog", ft = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
692
693
|
__proto__: null,
|
|
693
|
-
BaseDialogComponent:
|
|
694
|
+
BaseDialogComponent: b,
|
|
694
695
|
selector: tt
|
|
695
696
|
}, Symbol.toStringTag, { value: "Module" })), et = `<dialog part="dialog">
|
|
696
697
|
<header part="header">
|
|
@@ -715,9 +716,9 @@ const tt = "base-dialog", ft = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Obj
|
|
|
715
716
|
<slot name="footer"></slot>
|
|
716
717
|
</footer>
|
|
717
718
|
</dialog>
|
|
718
|
-
`, rt = 'dialog[open]{display:flex;flex-direction:column;gap:var(--spacing-4)}dialog>[part]{position:relative}dialog>[part][hidden]{display:none}dialog>[part][data-divider=true]:after{content:"";position:absolute;left:0;right:0;bottom:0;border-bottom:var(--border-width-1) solid var(--color-neutral-600)}dialog>[part][data-divider=true]{padding-bottom:var(--spacing-4)}dialog div[part=body]{flex:1;min-height:0}',
|
|
719
|
-
|
|
720
|
-
class
|
|
719
|
+
`, rt = 'dialog[open]{display:flex;flex-direction:column;gap:var(--spacing-4)}dialog>[part]{position:relative}dialog>[part][hidden]{display:none}dialog>[part][data-divider=true]:after{content:"";position:absolute;left:0;right:0;bottom:0;border-bottom:var(--border-width-1) solid var(--color-neutral-600)}dialog>[part][data-divider=true]{padding-bottom:var(--spacing-4)}dialog div[part=body]{flex:1;min-height:0}', C = new CSSStyleSheet();
|
|
720
|
+
C.replaceSync(rt);
|
|
721
|
+
class E extends b {
|
|
721
722
|
_sectionNames = ["header", "body", "footer"];
|
|
722
723
|
_handleSlotChange = () => {
|
|
723
724
|
this._updateSectionState();
|
|
@@ -727,14 +728,14 @@ class S extends h {
|
|
|
727
728
|
* @ignore
|
|
728
729
|
*/
|
|
729
730
|
constructor() {
|
|
730
|
-
super(), this.shadowRoot?.adoptedStyleSheets.push(
|
|
731
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push(C);
|
|
731
732
|
}
|
|
732
733
|
/**
|
|
733
734
|
* Specifies which attributes should be observed for changes.
|
|
734
735
|
* Uses parent's attributes since we're extending the base dialog.
|
|
735
736
|
*/
|
|
736
737
|
static get observedAttributes() {
|
|
737
|
-
return
|
|
738
|
+
return b.observedAttributes;
|
|
738
739
|
}
|
|
739
740
|
/**
|
|
740
741
|
* Renders the component's HTML structure.
|
|
@@ -789,9 +790,9 @@ class S extends h {
|
|
|
789
790
|
});
|
|
790
791
|
}
|
|
791
792
|
}
|
|
792
|
-
const
|
|
793
|
-
|
|
794
|
-
class d extends
|
|
793
|
+
const M = new CSSStyleSheet();
|
|
794
|
+
M.replaceSync(it);
|
|
795
|
+
class d extends E {
|
|
795
796
|
/**
|
|
796
797
|
* The title of the confirmation dialog.
|
|
797
798
|
*/
|
|
@@ -803,7 +804,7 @@ class d extends S {
|
|
|
803
804
|
/**
|
|
804
805
|
* The value associated with the confirmation action, emitted in the confirm event.
|
|
805
806
|
*/
|
|
806
|
-
_value;
|
|
807
|
+
_value = void 0;
|
|
807
808
|
/**
|
|
808
809
|
* The name of the attribute that holds the dialog's text content.
|
|
809
810
|
*/
|
|
@@ -820,7 +821,7 @@ class d extends S {
|
|
|
820
821
|
* @constructor
|
|
821
822
|
*/
|
|
822
823
|
constructor() {
|
|
823
|
-
super(), this.shadowRoot?.adoptedStyleSheets.push(
|
|
824
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push(M);
|
|
824
825
|
}
|
|
825
826
|
/**
|
|
826
827
|
* Specifies which attributes should be observed for changes.
|
|
@@ -828,7 +829,7 @@ class d extends S {
|
|
|
828
829
|
*/
|
|
829
830
|
static get observedAttributes() {
|
|
830
831
|
return [
|
|
831
|
-
...
|
|
832
|
+
...E.observedAttributes,
|
|
832
833
|
d.textAttribute,
|
|
833
834
|
d.headlineAttribute,
|
|
834
835
|
d.valueAttribute
|
|
@@ -858,7 +859,7 @@ class d extends S {
|
|
|
858
859
|
* @returns {void}
|
|
859
860
|
*/
|
|
860
861
|
connectedCallback() {
|
|
861
|
-
this._render(), this._addEventListeners(), this.closedBy =
|
|
862
|
+
this._render(), this._addEventListeners(), this.closedBy = A.NONE;
|
|
862
863
|
}
|
|
863
864
|
/**
|
|
864
865
|
* Renders the component's HTML structure.
|
|
@@ -918,8 +919,8 @@ class d extends S {
|
|
|
918
919
|
*/
|
|
919
920
|
_addEventListeners() {
|
|
920
921
|
super._addEventListeners(), this.shadowRoot?.querySelector(
|
|
921
|
-
|
|
922
|
-
)?.addEventListener(
|
|
922
|
+
w
|
|
923
|
+
)?.addEventListener(h.CLICK, this._handleConfirm), this.shadowRoot?.querySelector(S)?.addEventListener(h.CLICK, this._handleUndo);
|
|
923
924
|
}
|
|
924
925
|
/**
|
|
925
926
|
* Removes event listeners.
|
|
@@ -928,8 +929,8 @@ class d extends S {
|
|
|
928
929
|
*/
|
|
929
930
|
_removeEventListeners() {
|
|
930
931
|
super._removeEventListeners(), this.shadowRoot?.querySelector(
|
|
931
|
-
|
|
932
|
-
)?.removeEventListener(
|
|
932
|
+
w
|
|
933
|
+
)?.removeEventListener(h.CLICK, this._handleConfirm), this.shadowRoot?.querySelector(S)?.removeEventListener(h.CLICK, this._handleUndo);
|
|
933
934
|
}
|
|
934
935
|
/**
|
|
935
936
|
* Handles the confirm button click event.
|
|
@@ -939,7 +940,7 @@ class d extends S {
|
|
|
939
940
|
*/
|
|
940
941
|
_handleConfirm = () => {
|
|
941
942
|
const t = new CustomEvent(
|
|
942
|
-
|
|
943
|
+
m.CONFIRMATION_DIALOG_CONFIRM,
|
|
943
944
|
{
|
|
944
945
|
bubbles: !0,
|
|
945
946
|
composed: !0,
|
|
@@ -950,9 +951,23 @@ class d extends S {
|
|
|
950
951
|
);
|
|
951
952
|
this.dispatchEvent(t);
|
|
952
953
|
};
|
|
954
|
+
_handleUndo = () => {
|
|
955
|
+
const t = new CustomEvent(
|
|
956
|
+
m.CONFIRMATION_DIALOG_UNDO,
|
|
957
|
+
{
|
|
958
|
+
bubbles: !0,
|
|
959
|
+
composed: !0,
|
|
960
|
+
detail: {
|
|
961
|
+
value: this._value
|
|
962
|
+
}
|
|
963
|
+
}
|
|
964
|
+
);
|
|
965
|
+
this.dispatchEvent(t), this._value = void 0;
|
|
966
|
+
};
|
|
953
967
|
}
|
|
954
968
|
const nt = "confirmation-dialog", ot = {
|
|
955
|
-
CONFIRMATION_DIALOG_CONFIRM:
|
|
969
|
+
CONFIRMATION_DIALOG_CONFIRM: m.CONFIRMATION_DIALOG_CONFIRM,
|
|
970
|
+
CONFIRMATION_DIALOG_UNDO: m.CONFIRMATION_DIALOG_UNDO
|
|
956
971
|
}, mt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
957
972
|
__proto__: null,
|
|
958
973
|
COMPONENT_CUSTOM_MESSAGES: ot,
|
|
@@ -960,7 +975,7 @@ const nt = "confirmation-dialog", ot = {
|
|
|
960
975
|
selector: nt
|
|
961
976
|
}, Symbol.toStringTag, { value: "Module" })), at = "header-body-footer-dialog", _t = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
962
977
|
__proto__: null,
|
|
963
|
-
HeaderBodyFooterDialogComponent:
|
|
978
|
+
HeaderBodyFooterDialogComponent: E,
|
|
964
979
|
selector: at
|
|
965
980
|
}, Symbol.toStringTag, { value: "Module" })), lt = `<div class="bar-menu-container">
|
|
966
981
|
<previous-button class="nav-prev" part="nav-prev-button"></previous-button>
|
|
@@ -971,8 +986,8 @@ const nt = "confirmation-dialog", ot = {
|
|
|
971
986
|
|
|
972
987
|
<next-button class="nav-next" part="nav-next-button"></next-button>
|
|
973
988
|
</div>
|
|
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)}",
|
|
975
|
-
|
|
989
|
+
`, 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)}", T = new CSSStyleSheet();
|
|
990
|
+
T.replaceSync(ut);
|
|
976
991
|
class c extends HTMLElement {
|
|
977
992
|
static _visibleCountAttribute = "visible-count";
|
|
978
993
|
static _cyclicalNavigationAttribute = "cyclical-navigation";
|
|
@@ -991,7 +1006,7 @@ class c extends HTMLElement {
|
|
|
991
1006
|
* @constructor
|
|
992
1007
|
*/
|
|
993
1008
|
constructor() {
|
|
994
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(
|
|
1009
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(T);
|
|
995
1010
|
}
|
|
996
1011
|
/**
|
|
997
1012
|
* Specifies which attributes should be observed for changes.
|
|
@@ -1060,9 +1075,9 @@ class c extends HTMLElement {
|
|
|
1060
1075
|
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(
|
|
1061
1076
|
"--bar-menu-visible-count",
|
|
1062
1077
|
String(this.visibleButtons)
|
|
1063
|
-
), this._navPrevButton !== null && (this._navPrevButton.setAttribute("aria-label", "Previous"), this._navPrevButton.addEventListener(
|
|
1078
|
+
), this._navPrevButton !== null && (this._navPrevButton.setAttribute("aria-label", "Previous"), this._navPrevButton.addEventListener(h.CLICK, () => {
|
|
1064
1079
|
this._scrollPrevious();
|
|
1065
|
-
})), this._navNextButton !== null && (this._navNextButton.setAttribute("aria-label", "Next"), this._navNextButton.addEventListener(
|
|
1080
|
+
})), this._navNextButton !== null && (this._navNextButton.setAttribute("aria-label", "Next"), this._navNextButton.addEventListener(h.CLICK, () => {
|
|
1066
1081
|
this._scrollNext();
|
|
1067
1082
|
}));
|
|
1068
1083
|
}
|
|
@@ -1089,13 +1104,13 @@ class c extends HTMLElement {
|
|
|
1089
1104
|
_setupKeyboardListener() {
|
|
1090
1105
|
this._keyDownListener = (t) => {
|
|
1091
1106
|
t.key === "ArrowLeft" ? (t.preventDefault(), this._scrollPrevious()) : t.key === "ArrowRight" && (t.preventDefault(), this._scrollNext());
|
|
1092
|
-
}, this.addEventListener(
|
|
1107
|
+
}, this.addEventListener(L.KEY_DOWN, this._keyDownListener);
|
|
1093
1108
|
}
|
|
1094
1109
|
/**
|
|
1095
1110
|
* Remove keyboard listener
|
|
1096
1111
|
*/
|
|
1097
1112
|
_removeKeyboardListener() {
|
|
1098
|
-
this._keyDownListener !== null && this.removeEventListener(
|
|
1113
|
+
this._keyDownListener !== null && this.removeEventListener(L.KEY_DOWN, this._keyDownListener);
|
|
1099
1114
|
}
|
|
1100
1115
|
/**
|
|
1101
1116
|
* Get all slotted button elements
|
|
@@ -1109,14 +1124,14 @@ class c extends HTMLElement {
|
|
|
1109
1124
|
_updateButtonVisibility(t) {
|
|
1110
1125
|
const e = this._getSlottedButtons(), s = e.length, r = this.visibleButtons, n = this._currentIndex, l = Math.min(n + r, s);
|
|
1111
1126
|
e.forEach((a, u) => {
|
|
1112
|
-
const y = u >= n && u < l,
|
|
1113
|
-
y || (a.classList.remove("visible-button"), a.classList.remove("animating"),
|
|
1127
|
+
const y = u >= n && u < l, v = a;
|
|
1128
|
+
y || (a.classList.remove("visible-button"), a.classList.remove("animating"), v.style.display = "none");
|
|
1114
1129
|
}), t !== void 0 ? (e[0]?.offsetHeight, e.forEach((a, u) => {
|
|
1115
1130
|
if (u >= n && u < l) {
|
|
1116
|
-
const
|
|
1117
|
-
|
|
1118
|
-
const
|
|
1119
|
-
|
|
1131
|
+
const v = a;
|
|
1132
|
+
v.style.display = "inline-flex", a.classList.add("animating");
|
|
1133
|
+
const $ = u % this.visibleButtons * 50;
|
|
1134
|
+
v.style.transitionDelay = `${$}ms`;
|
|
1120
1135
|
}
|
|
1121
1136
|
}), e[0]?.offsetHeight, e.forEach((a, u) => {
|
|
1122
1137
|
u >= n && u < l && a.classList.add("visible-button");
|
|
@@ -1125,8 +1140,8 @@ class c extends HTMLElement {
|
|
|
1125
1140
|
a.classList.remove("animating"), a.style.transitionDelay = o;
|
|
1126
1141
|
});
|
|
1127
1142
|
}, 400)) : e.forEach((a, u) => {
|
|
1128
|
-
const y = u >= n && u < l,
|
|
1129
|
-
y && (
|
|
1143
|
+
const y = u >= n && u < l, v = a;
|
|
1144
|
+
y && (v.style.display = "inline-flex", a.classList.add("visible-button"));
|
|
1130
1145
|
}), this._updateNavigationButtons(s, r);
|
|
1131
1146
|
}
|
|
1132
1147
|
/**
|
|
@@ -1193,7 +1208,7 @@ export {
|
|
|
1193
1208
|
At as BarMenu,
|
|
1194
1209
|
bt as BaseButton,
|
|
1195
1210
|
ft as BaseDialog,
|
|
1196
|
-
|
|
1211
|
+
m as CUSTOM_MESSAGES,
|
|
1197
1212
|
pt as ConfirmButton,
|
|
1198
1213
|
mt as ConfirmationDialog,
|
|
1199
1214
|
_t as HeaderBodyFooterDialog,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(l,f){typeof exports=="object"&&typeof module<"u"?f(exports):typeof define=="function"&&define.amd?define(["exports"],f):(l=typeof globalThis<"u"?globalThis:l||self,f(l["as-design-system-lib"]={}))})(this,(function(l){"use strict";const f="as-design-system-lib";class
|
|
1
|
+
(function(l,f){typeof exports=="object"&&typeof module<"u"?f(exports):typeof define=="function"&&define.amd?define(["exports"],f):(l=typeof globalThis<"u"?globalThis:l||self,f(l["as-design-system-lib"]={}))})(this,(function(l){"use strict";const f="as-design-system-lib";class H{constructor(t=new Map){this.registerAllComponents(t)}registerAllComponents(t){Array.from(t.entries()).forEach(([e,s])=>{this.registerComponent(e,s)})}registerComponent(t,e){customElements.get(t)===void 0?(customElements.define(t,e),console.log(`Registered Web Component: ${t}`)):console.warn(`Web Component "${t}" is already registered.`)}}const g={CONFIRMATION_DIALOG_CONFIRM:"confirmation-dialog-confirm",CONFIRMATION_DIALOG_UNDO:"confirmation-dialog-undo"},j="base-button",n="",p={SHOW_MODAL:"show-modal",CLOSE:"close"};`${btoa({CUSTOM_CROSSHAIR:`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
|
2
2
|
<!-- White border (underneath) -->
|
|
3
3
|
<line x1="16" y1="2" x2="16" y2="30" stroke="white" stroke-width="5"/>
|
|
4
4
|
<line x1="2" y1="16" x2="30" y2="16" stroke="white" stroke-width="5"/>
|
|
@@ -6,27 +6,27 @@
|
|
|
6
6
|
<!-- Black crosshair lines (on top) -->
|
|
7
7
|
<line x1="16" y1="2" x2="16" y2="30" stroke="black" stroke-width="2"/>
|
|
8
8
|
<line x1="2" y1="16" x2="30" y2="16" stroke="black" stroke-width="2"/>
|
|
9
|
-
</svg>`}.CUSTOM_CROSSHAIR)}`;const S={ANY:"any",NONE:"none"},
|
|
9
|
+
</svg>`}.CUSTOM_CROSSHAIR)}`;const S={ANY:"any",NONE:"none"},I={KEY_DOWN:"keydown"},b={CLICK:"click"},V=`<button part="button">
|
|
10
10
|
<slot></slot>
|
|
11
11
|
</button>
|
|
12
|
-
`,
|
|
12
|
+
`,D=":where(button,input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::file-selector-button{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);font-family:var(--font-family-base);letter-spacing:var(--letter-spacing-normal);line-height:var(--line-height-normal);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);display:inline-flex;justify-content:center;align-items:center;text-align:center;gap:var(--gap-sm);background:var(--color-bg-secondary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-primary);border-radius:var(--border-radius-lg);transition:all var(--transition-base)}:where(button,input[type=button],input[type=submit],input[type=reset])>.material-symbols-outlined{font-size:var(--font-size-xl);font-family:Material Symbols Outlined;line-height:1}:where(button,input[type=button],input[type=submit],input[type=reset])[disabled]{opacity:.3;cursor:not-allowed}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):hover),:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):active){background:var(--color-hover-bg-secondary);border-color:var(--color-hover-border-secondary)}:where(input[type=file]){inline-size:100%;max-inline-size:max-content;background-color:var(--color-bg-secondary)}",O=new CSSStyleSheet;O.replaceSync(D);class i extends HTMLElement{static autofocusAttribute="autofocus";static commandAttribute="command";static commandforAttribute="commandfor";static disabledAttribute="disabled";static nameAttribute="name";static titleAttribute="title";static typeAttribute="type";static valueAttribute="value";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(O)}static get observedAttributes(){return[i.autofocusAttribute,i.commandAttribute,i.commandforAttribute,i.disabledAttribute,i.nameAttribute,i.titleAttribute,i.typeAttribute,i.valueAttribute]}get buttonElement(){return this.shadowRoot?.querySelector("button")}get autofocus(){return this.hasAttribute(i.autofocusAttribute)}set autofocus(t){t?this.setAttribute(i.autofocusAttribute,n):this.removeAttribute(i.autofocusAttribute)}get command(){return this.getAttribute(i.commandAttribute)??n}set command(t){this.setAttribute(i.commandAttribute,t)}get commandfor(){return this.getAttribute(i.commandforAttribute)??n}set commandfor(t){t!==n?this.setAttribute(i.commandforAttribute,t):this.removeAttribute(i.commandforAttribute)}get disabled(){return this.hasAttribute(i.disabledAttribute)}set disabled(t){t?this.setAttribute(i.disabledAttribute,n):this.removeAttribute(i.disabledAttribute)}get name(){return this.getAttribute(i.nameAttribute)??n}set name(t){t!==n?this.setAttribute(i.nameAttribute,t):this.removeAttribute(i.nameAttribute)}get headline(){return this.getAttribute(i.titleAttribute)??n}set headline(t){t!==n?this.setAttribute(i.titleAttribute,t):this.removeAttribute(i.titleAttribute)}get type(){return this.getAttribute(i.typeAttribute)??"button"}set type(t){t!==n?this.setAttribute(i.typeAttribute,t):this.removeAttribute(i.typeAttribute)}get value(){return this.getAttribute(i.valueAttribute)??"button"}set value(t){t!==n?this.setAttribute(i.valueAttribute,t):this.removeAttribute(i.valueAttribute)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,s){s!==e&&this._syncAttribute(t)}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=V,this._syncAttributes())}_addEventListeners(){this.buttonElement.addEventListener(b.CLICK,this._handleClick)}_removeEventListeners(){this.buttonElement.addEventListener(b.CLICK,this._handleClick)}_handleClick=()=>{if(this.command===n||this.commandfor===n)return;let t=document.getElementById(this.commandfor);if(t??=this._findElementInShadowDOM(this.commandfor),t===null)return;const e=t;switch(this.command){case p.SHOW_MODAL:e.showModal?.();break;case p.CLOSE:e.close?.();break}};_findElementInShadowDOM(t){const s=`#${CSS.escape(t)}`;let r=this.querySelector(s);if(r!==null||(r=this._searchInShadowRootsOfChildren(this,s),r!==null))return r;let o=this.parentElement;for(;o!==null;){if(r=o.querySelector(s),r!==null||(r=this._searchInShadowRootsOfChildren(o,s),r!==null))return r;const 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 q=Object.freeze(Object.defineProperty({__proto__:null,BaseButtonComponent:i,selector:j},Symbol.toStringTag,{value:"Module"})),z=`<button title="Undo" part="button">
|
|
13
13
|
<span class="material-symbols-outlined">undo</span>
|
|
14
14
|
<span>Undo</span>
|
|
15
15
|
</button>
|
|
16
|
-
`,
|
|
16
|
+
`,F="button[part=button]{background:var(--color-warning);font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{filter:brightness(1.2)}",N=new CSSStyleSheet;N.replaceSync(F);class U extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(N),this.command=p.CLOSE,this.title="Undo"}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._setCommandForAttribute(),this._addEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=z,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="undo-button",K=Object.freeze(Object.defineProperty({__proto__:null,UndoButtonComponent:U,selector:w},Symbol.toStringTag,{value:"Module"})),W=`<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)}",
|
|
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)}",R=new CSSStyleSheet;R.replaceSync(B);class G extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(R),this.command=p.CLOSE,this.title="Confirm"}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._setCommandForAttribute(),this._addEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=W,this._syncAttributes())}_setCommandForAttribute(){let t=this.getRootNode();"host"in t&&t.host!==null&&t.host!==void 0&&(t=t.host);const e=t instanceof Element?t.closest("base-dialog")??t.closest("confirmation-dialog"):null;e!==null&&(this.commandfor=e.id)}}const E="confirm-button",Y=Object.freeze(Object.defineProperty({__proto__:null,ConfirmButtonComponent:G,selector:E},Symbol.toStringTag,{value:"Module"})),X=`<button part="button">
|
|
21
21
|
<span class="material-symbols-outlined">chevron_left</span>
|
|
22
22
|
</button>
|
|
23
|
-
`,
|
|
23
|
+
`,J="button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",k=new CSSStyleSheet;k.replaceSync(J);class m extends i{static _disabledAttribute="disabled";static _titleAttribute="title";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(k),this.command=p.CLOSE}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}attributeChangedCallback(t,e,s){super.attributeChangedCallback(t,e,s),t===m._disabledAttribute&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=X,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");t!==null&&(this.disabled?t.removeAttribute(m._titleAttribute):t.setAttribute(m._titleAttribute,"Previous"))}}const Q=Object.freeze(Object.defineProperty({__proto__:null,PreviousButtonComponent:m,selector:"previous-button"},Symbol.toStringTag,{value:"Module"})),Z=`<button part="button">
|
|
24
24
|
<span class="material-symbols-outlined">chevron_right</span>
|
|
25
25
|
</button>
|
|
26
|
-
`,
|
|
26
|
+
`,tt="button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",C=new CSSStyleSheet;C.replaceSync(tt);class _ extends i{static _disabledAttribute="disabled";static _titleAttribute="title";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(C),this.command=p.CLOSE}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}attributeChangedCallback(t,e,s){super.attributeChangedCallback(t,e,s),t===_._disabledAttribute&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Z,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");t!==null&&(this.disabled?t.removeAttribute(_._titleAttribute):t.setAttribute(_._titleAttribute,"Next"))}}const et=Object.freeze(Object.defineProperty({__proto__:null,NextButtonComponent:_,selector:"next-button"},Symbol.toStringTag,{value:"Module"})),it=`<dialog part="dialog">
|
|
27
27
|
<slot></slot>
|
|
28
28
|
</dialog>
|
|
29
|
-
`,
|
|
29
|
+
`,st="dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-secondary);border-radius:var(--border-radius-xl);padding:var(--spacing-4);max-width:90vw;max-height:90vh;font-family:var(--font-family-base);line-height:var(--line-height-normal);font-size:var(--font-size-sm);box-shadow:var(--shadow-2xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:slideIn var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog.closing{animation:slideOut var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog::backdrop{background:var(--window-backdrop);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn var(--transition-base) ease-out forwards}dialog.closing::backdrop{animation:fadeOut var(--transition-base) ease-out forwards}@keyframes slideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes slideOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(-20px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}",M=new CSSStyleSheet;M.replaceSync(st);class v extends HTMLElement{static closedByAttribute="closedby";_closedBy=S.ANY;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(M)}static get observedAttributes(){return[v.closedByAttribute]}get dialogElement(){return this.shadowRoot?.querySelector("dialog")}get command(){return this.getAttribute(v.closedByAttribute)??S.ANY}get closedBy(){return this._closedBy}set closedBy(t){this._closedBy=t,this.setAttribute(v.closedByAttribute,t)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,s){const r=this.dialogElement;r!=null&&s!==e&&this._syncAttribute(t)}_addEventListeners(){}_removeEventListeners(){}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=it,this._syncAttributes())}_syncAttribute(t){const e=this.dialogElement;e!=null&&(this.hasAttribute(t)===!0?e.setAttribute(t,this.getAttribute(t)??n):e.removeAttribute(t))}_syncAttributes(){v.observedAttributes.forEach(t=>{this._syncAttribute(t)})}show(){this.dialogElement.show()}showModal(){this.dialogElement.showModal()}close(t){const e=this.dialogElement;e.classList.add("closing"),setTimeout(()=>{e.close(t),e.classList.remove("closing")},300)}}const rt=Object.freeze(Object.defineProperty({__proto__:null,BaseDialogComponent:v,selector:"base-dialog"},Symbol.toStringTag,{value:"Module"})),nt=`<dialog part="dialog">
|
|
30
30
|
<header part="header">
|
|
31
31
|
<h2></h2>
|
|
32
32
|
</header>
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
<undo-button></undo-button>
|
|
39
39
|
</footer>
|
|
40
40
|
</dialog>
|
|
41
|
-
`,
|
|
41
|
+
`,ot="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}",at=`<dialog part="dialog">
|
|
42
42
|
<header part="header">
|
|
43
43
|
<slot name="header"></slot>
|
|
44
44
|
</header>
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
<slot name="footer"></slot>
|
|
50
50
|
</footer>
|
|
51
51
|
</dialog>
|
|
52
|
-
`,
|
|
52
|
+
`,lt='dialog[open]{display:flex;flex-direction:column;gap:var(--spacing-4)}dialog>[part]{position:relative}dialog>[part][hidden]{display:none}dialog>[part][data-divider=true]:after{content:"";position:absolute;left:0;right:0;bottom:0;border-bottom:var(--border-width-1) solid var(--color-neutral-600)}dialog>[part][data-divider=true]{padding-bottom:var(--spacing-4)}dialog div[part=body]{flex:1;min-height:0}',T=new CSSStyleSheet;T.replaceSync(lt);class L extends v{_sectionNames=["header","body","footer"];_handleSlotChange=()=>{this._updateSectionState()};constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(T)}static get observedAttributes(){return v.observedAttributes}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=at,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 $=new CSSStyleSheet;$.replaceSync(ot);class d extends L{_headline=n;_text=n;_value=void 0;static textAttribute="text";static headlineAttribute="headline";static valueAttribute="value";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push($)}static get observedAttributes(){return[...L.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=nt,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(E)?.addEventListener(b.CLICK,this._handleConfirm),this.shadowRoot?.querySelector(w)?.addEventListener(b.CLICK,this._handleUndo)}_removeEventListeners(){super._removeEventListeners(),this.shadowRoot?.querySelector(E)?.removeEventListener(b.CLICK,this._handleConfirm),this.shadowRoot?.querySelector(w)?.removeEventListener(b.CLICK,this._handleUndo)}_handleConfirm=()=>{const t=new CustomEvent(g.CONFIRMATION_DIALOG_CONFIRM,{bubbles:!0,composed:!0,detail:{value:this._value}});this.dispatchEvent(t)};_handleUndo=()=>{const t=new CustomEvent(g.CONFIRMATION_DIALOG_UNDO,{bubbles:!0,composed:!0,detail:{value:this._value}});this.dispatchEvent(t),this._value=void 0}}const ut="confirmation-dialog",dt={CONFIRMATION_DIALOG_CONFIRM:g.CONFIRMATION_DIALOG_CONFIRM,CONFIRMATION_DIALOG_UNDO:g.CONFIRMATION_DIALOG_UNDO},ct=Object.freeze(Object.defineProperty({__proto__:null,COMPONENT_CUSTOM_MESSAGES:dt,ConfirmationDialogComponent:d,selector:ut},Symbol.toStringTag,{value:"Module"})),ht=Object.freeze(Object.defineProperty({__proto__:null,HeaderBodyFooterDialogComponent:L,selector:"header-body-footer-dialog"},Symbol.toStringTag,{value:"Module"})),bt=`<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
|
+
`,vt=":host{display:block;width:100%}.bar-menu-container{display:flex;align-items:center;justify-content:space-between;height:100%;gap:var(--gap-sm);padding:var(--spacing-1);background:var(--color-bg-primary);border-radius:var(--border-radius-full);border:var(--border-width-2) solid var(--color-border-secondary);box-shadow:var(--shadow-sm);margin:0 auto}.bar-menu-container .nav-prev,.bar-menu-container .nav-next{flex-shrink:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.bar-menu-container .nav-prev.visible,.bar-menu-container .nav-next.visible{opacity:1;visibility:visible;pointer-events:auto}.bar-menu-container .nav-prev::part(button),.bar-menu-container .nav-next::part(button){background-color:transparent;box-shadow:none}.bar-menu-container .buttons-wrapper{display:grid;grid-template-columns:repeat(var(--bar-menu-visible-count, 3),1fr);grid-auto-rows:max-content;align-items:center;justify-items:center;gap:var(--gap-sm);overflow:hidden;position:relative;width:auto}::slotted(*){display:none;flex-shrink:0;will-change:opacity,transform;contain:layout style paint;opacity:0;transform:scale(.8)}::slotted(.animating){transition:opacity .4s cubic-bezier(.34,1.56,.64,1),transform .4s cubic-bezier(.34,1.56,.64,1)}::slotted(.visible-button){display:inline-flex!important;pointer-events:auto;opacity:1;transform:scale(1)}",P=new CSSStyleSheet;P.replaceSync(vt);class h extends HTMLElement{static _visibleCountAttribute="visible-count";static _cyclicalNavigationAttribute="cyclical-navigation";_currentIndex=0;_visibleCount=3;_cyclicalNavigation=!1;_MIN_VISIBLE=1;_MAX_VISIBLE=5;_slotElement=null;_navPrevButton=null;_navNextButton=null;_buttonsWrapper=null;_slotChangeListener=null;_keyDownListener=null;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(P)}static get observedAttributes(){return[h._visibleCountAttribute,h._cyclicalNavigationAttribute]}get visibleButtons(){const t=this.getAttribute(h._visibleCountAttribute);if(t!==null&&t!==n){const e=parseInt(t,10);return Math.max(this._MIN_VISIBLE,Math.min(this._MAX_VISIBLE,e))}return this._visibleCount}set visibleButtons(t){const e=Math.max(this._MIN_VISIBLE,Math.min(this._MAX_VISIBLE,t));this.setAttribute(h._visibleCountAttribute,String(e))}get cyclicalNavigation(){return this.hasAttribute(h._cyclicalNavigationAttribute)}set cyclicalNavigation(t){t?this.setAttribute(h._cyclicalNavigationAttribute,n):this.removeAttribute(h._cyclicalNavigationAttribute)}connectedCallback(){this._render(),this._cacheElements(),this._setupSlotListener(),this._setupKeyboardListener(),this._updateButtonVisibility()}disconnectedCallback(){this._removeSlotListener(),this._removeKeyboardListener()}attributeChangedCallback(t,e,s){t===h._visibleCountAttribute?(this._visibleCount=this.visibleButtons,this._buttonsWrapper!==null&&this._buttonsWrapper.style.setProperty("--bar-menu-visible-count",String(this.visibleButtons)),this._updateButtonVisibility()):t===h._cyclicalNavigationAttribute&&(this._cyclicalNavigation=this.cyclicalNavigation,this._updateButtonVisibility())}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=bt)}_cacheElements(){this._slotElement=this.shadowRoot?.querySelector("slot")??null,this._navPrevButton=this.shadowRoot?.querySelector(".nav-prev")??null,this._navNextButton=this.shadowRoot?.querySelector(".nav-next")??null,this._buttonsWrapper=this.shadowRoot?.querySelector(".buttons-wrapper")??null,this._buttonsWrapper!==null&&this._buttonsWrapper.style.setProperty("--bar-menu-visible-count",String(this.visibleButtons)),this._navPrevButton!==null&&(this._navPrevButton.setAttribute("aria-label","Previous"),this._navPrevButton.addEventListener(b.CLICK,()=>{this._scrollPrevious()})),this._navNextButton!==null&&(this._navNextButton.setAttribute("aria-label","Next"),this._navNextButton.addEventListener(b.CLICK,()=>{this._scrollNext()}))}_setupSlotListener(){this._slotElement!==null&&(this._slotChangeListener=()=>{this._currentIndex=0,this._updateButtonVisibility()},this._slotElement.addEventListener("slotchange",this._slotChangeListener))}_removeSlotListener(){this._slotElement!==null&&this._slotChangeListener!==null&&this._slotElement.removeEventListener("slotchange",this._slotChangeListener)}_setupKeyboardListener(){this._keyDownListener=t=>{t.key==="ArrowLeft"?(t.preventDefault(),this._scrollPrevious()):t.key==="ArrowRight"&&(t.preventDefault(),this._scrollNext())},this.addEventListener(I.KEY_DOWN,this._keyDownListener)}_removeKeyboardListener(){this._keyDownListener!==null&&this.removeEventListener(I.KEY_DOWN,this._keyDownListener)}_getSlottedButtons(){return this._slotElement===null?[]:this._slotElement.assignedElements()}_updateButtonVisibility(t){const e=this._getSlottedButtons(),s=e.length,r=this.visibleButtons,o=this._currentIndex,u=Math.min(o+r,s);e.forEach((a,c)=>{const A=c>=o&&c<u,y=a;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 yt=c%this.visibleButtons*50;y.style.transitionDelay=`${yt}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 A=c>=o&&c<u,y=a;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 pt=Object.freeze(Object.defineProperty({__proto__:null,BarMenuComponent:h,selector:"bar-menu"},Symbol.toStringTag,{value:"Module"}));l.APPLICATION_NAME=f,l.BarMenu=pt,l.BaseButton=q,l.BaseDialog=rt,l.CUSTOM_MESSAGES=g,l.ConfirmButton=Y,l.ConfirmationDialog=ct,l.HeaderBodyFooterDialog=ht,l.NextButton=et,l.PreviousButton=Q,l.UndoButton=K,l.WebComponentsRegistry=H,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));
|
|
@@ -43,8 +43,8 @@ export declare class ConfirmationDialogComponent<T> extends HeaderBodyFooterDial
|
|
|
43
43
|
set headline(value: string);
|
|
44
44
|
get text(): string;
|
|
45
45
|
set text(value: string);
|
|
46
|
-
get value(): T;
|
|
47
|
-
set value(value: T);
|
|
46
|
+
get value(): T | undefined;
|
|
47
|
+
set value(value: T | undefined);
|
|
48
48
|
/**
|
|
49
49
|
* Lifecycle hook invoked when the component is inserted into the DOM.
|
|
50
50
|
*
|
|
@@ -91,4 +91,5 @@ export declare class ConfirmationDialogComponent<T> extends HeaderBodyFooterDial
|
|
|
91
91
|
* @returns {void}
|
|
92
92
|
*/
|
|
93
93
|
private _handleConfirm;
|
|
94
|
+
private _handleUndo;
|
|
94
95
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@albi_scando/as-design-system-lib",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.7.0",
|
|
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": {
|
|
@@ -55,8 +55,8 @@
|
|
|
55
55
|
"@semantic-release/git": "^10.0.1",
|
|
56
56
|
"@semantic-release/github": "^12.0.3",
|
|
57
57
|
"@semantic-release/npm": "^13.1.3",
|
|
58
|
-
"@storybook/addon-docs": "10.
|
|
59
|
-
"@storybook/html-vite": "10.
|
|
58
|
+
"@storybook/addon-docs": "10.3.0",
|
|
59
|
+
"@storybook/html-vite": "10.3.0",
|
|
60
60
|
"@types/node": "^25.2.1",
|
|
61
61
|
"@types/numeric": "^1.2.6",
|
|
62
62
|
"@vitest/coverage-v8": "^4.0.18",
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"eslint-plugin-prettier": "^5.5.5",
|
|
70
70
|
"eslint-plugin-regexp": "^3.0.0",
|
|
71
71
|
"eslint-plugin-security": "^3.0.1",
|
|
72
|
-
"eslint-plugin-storybook": "10.
|
|
72
|
+
"eslint-plugin-storybook": "10.3.0",
|
|
73
73
|
"globals": "^17.3.0",
|
|
74
74
|
"http-server": "^14.1.1",
|
|
75
75
|
"husky": "^9.1.7",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"prettier": "3.8.1",
|
|
78
78
|
"sass": "^1.97.3",
|
|
79
79
|
"semantic-release": "^25.0.3",
|
|
80
|
-
"storybook": "10.
|
|
80
|
+
"storybook": "10.3.0",
|
|
81
81
|
"typedoc": "^0.28.16",
|
|
82
82
|
"typescript": "^5.9.3",
|
|
83
83
|
"typescript-eslint": "^8.54.0",
|