@albi_scando/as-design-system-lib 1.2.0 → 1.3.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 +126 -128
- package/dist/as-design-system-lib.umd.js +11 -11
- package/package.json +3 -4
|
@@ -19,8 +19,8 @@ class J {
|
|
|
19
19
|
* @returns {void}
|
|
20
20
|
*/
|
|
21
21
|
registerAllComponents(t) {
|
|
22
|
-
Array.from(t.entries()).forEach(([e,
|
|
23
|
-
this.registerComponent(e,
|
|
22
|
+
Array.from(t.entries()).forEach(([e, i]) => {
|
|
23
|
+
this.registerComponent(e, i);
|
|
24
24
|
});
|
|
25
25
|
}
|
|
26
26
|
/**
|
|
@@ -51,19 +51,19 @@ const Q = "base-button", r = "", c = {
|
|
|
51
51
|
</svg>`
|
|
52
52
|
};
|
|
53
53
|
`${btoa(M.CUSTOM_CROSSHAIR)}`;
|
|
54
|
-
const
|
|
54
|
+
const g = {
|
|
55
55
|
ANY: "any",
|
|
56
56
|
NONE: "none"
|
|
57
57
|
}, f = {
|
|
58
58
|
KEY_DOWN: "keydown"
|
|
59
|
-
},
|
|
59
|
+
}, y = {
|
|
60
60
|
CLICK: "click"
|
|
61
61
|
}, N = `<button part="button">
|
|
62
62
|
<slot></slot>
|
|
63
63
|
</button>
|
|
64
|
-
`, T = ":where(button,input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::file-selector-button{cursor:pointer;
|
|
65
|
-
|
|
66
|
-
class
|
|
64
|
+
`, T = ":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)}", _ = new CSSStyleSheet();
|
|
65
|
+
_.replaceSync(T);
|
|
66
|
+
class s extends HTMLElement {
|
|
67
67
|
/**
|
|
68
68
|
* @see HTMLButtonElement.autofocus
|
|
69
69
|
*/
|
|
@@ -101,73 +101,73 @@ class i extends HTMLElement {
|
|
|
101
101
|
* @ignore
|
|
102
102
|
*/
|
|
103
103
|
constructor() {
|
|
104
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(
|
|
104
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(_);
|
|
105
105
|
}
|
|
106
106
|
/**
|
|
107
107
|
* Specifies which attributes should be observed for changes.
|
|
108
108
|
*/
|
|
109
109
|
static get observedAttributes() {
|
|
110
110
|
return [
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
111
|
+
s.autofocusAttribute,
|
|
112
|
+
s.commandAttribute,
|
|
113
|
+
s.commandforAttribute,
|
|
114
|
+
s.disabledAttribute,
|
|
115
|
+
s.nameAttribute,
|
|
116
|
+
s.titleAttribute,
|
|
117
|
+
s.typeAttribute,
|
|
118
|
+
s.valueAttribute
|
|
119
119
|
];
|
|
120
120
|
}
|
|
121
121
|
get buttonElement() {
|
|
122
122
|
return this.shadowRoot?.querySelector("button");
|
|
123
123
|
}
|
|
124
124
|
get autofocus() {
|
|
125
|
-
return this.hasAttribute(
|
|
125
|
+
return this.hasAttribute(s.autofocusAttribute);
|
|
126
126
|
}
|
|
127
127
|
set autofocus(t) {
|
|
128
|
-
t ? this.setAttribute(
|
|
128
|
+
t ? this.setAttribute(s.autofocusAttribute, r) : this.removeAttribute(s.autofocusAttribute);
|
|
129
129
|
}
|
|
130
130
|
get command() {
|
|
131
|
-
return this.getAttribute(
|
|
131
|
+
return this.getAttribute(s.commandAttribute) ?? r;
|
|
132
132
|
}
|
|
133
133
|
set command(t) {
|
|
134
|
-
this.setAttribute(
|
|
134
|
+
this.setAttribute(s.commandAttribute, t);
|
|
135
135
|
}
|
|
136
136
|
get commandfor() {
|
|
137
|
-
return this.getAttribute(
|
|
137
|
+
return this.getAttribute(s.commandforAttribute) ?? r;
|
|
138
138
|
}
|
|
139
139
|
set commandfor(t) {
|
|
140
|
-
t !== r ? this.setAttribute(
|
|
140
|
+
t !== r ? this.setAttribute(s.commandforAttribute, t) : this.removeAttribute(s.commandforAttribute);
|
|
141
141
|
}
|
|
142
142
|
get disabled() {
|
|
143
|
-
return this.hasAttribute(
|
|
143
|
+
return this.hasAttribute(s.disabledAttribute);
|
|
144
144
|
}
|
|
145
145
|
set disabled(t) {
|
|
146
|
-
t ? this.setAttribute(
|
|
146
|
+
t ? this.setAttribute(s.disabledAttribute, r) : this.removeAttribute(s.disabledAttribute);
|
|
147
147
|
}
|
|
148
148
|
get name() {
|
|
149
|
-
return this.getAttribute(
|
|
149
|
+
return this.getAttribute(s.nameAttribute) ?? r;
|
|
150
150
|
}
|
|
151
151
|
set name(t) {
|
|
152
|
-
t !== r ? this.setAttribute(
|
|
152
|
+
t !== r ? this.setAttribute(s.nameAttribute, t) : this.removeAttribute(s.nameAttribute);
|
|
153
153
|
}
|
|
154
154
|
get headline() {
|
|
155
|
-
return this.getAttribute(
|
|
155
|
+
return this.getAttribute(s.titleAttribute) ?? r;
|
|
156
156
|
}
|
|
157
157
|
set headline(t) {
|
|
158
|
-
t !== r ? this.setAttribute(
|
|
158
|
+
t !== r ? this.setAttribute(s.titleAttribute, t) : this.removeAttribute(s.titleAttribute);
|
|
159
159
|
}
|
|
160
160
|
get type() {
|
|
161
|
-
return this.getAttribute(
|
|
161
|
+
return this.getAttribute(s.typeAttribute) ?? "button";
|
|
162
162
|
}
|
|
163
163
|
set type(t) {
|
|
164
|
-
t !== r ? this.setAttribute(
|
|
164
|
+
t !== r ? this.setAttribute(s.typeAttribute, t) : this.removeAttribute(s.typeAttribute);
|
|
165
165
|
}
|
|
166
166
|
get value() {
|
|
167
|
-
return this.getAttribute(
|
|
167
|
+
return this.getAttribute(s.valueAttribute) ?? "button";
|
|
168
168
|
}
|
|
169
169
|
set value(t) {
|
|
170
|
-
t !== r ? this.setAttribute(
|
|
170
|
+
t !== r ? this.setAttribute(s.valueAttribute, t) : this.removeAttribute(s.valueAttribute);
|
|
171
171
|
}
|
|
172
172
|
/**
|
|
173
173
|
* Lifecycle hook invoked when the component is inserted into the DOM.
|
|
@@ -194,8 +194,8 @@ class i extends HTMLElement {
|
|
|
194
194
|
* @param newValue - The new value (or null if removed)
|
|
195
195
|
* @returns {void}
|
|
196
196
|
*/
|
|
197
|
-
attributeChangedCallback(t, e,
|
|
198
|
-
|
|
197
|
+
attributeChangedCallback(t, e, i) {
|
|
198
|
+
i !== e && this._syncAttribute(t);
|
|
199
199
|
}
|
|
200
200
|
/**
|
|
201
201
|
* Renders the component's HTML structure.
|
|
@@ -210,7 +210,7 @@ class i extends HTMLElement {
|
|
|
210
210
|
* @returns {void}
|
|
211
211
|
*/
|
|
212
212
|
_addEventListeners() {
|
|
213
|
-
this.addEventListener(
|
|
213
|
+
this.addEventListener(y.CLICK, this._handleClick);
|
|
214
214
|
}
|
|
215
215
|
/**
|
|
216
216
|
* Removes event listeners from the component.
|
|
@@ -218,7 +218,7 @@ class i extends HTMLElement {
|
|
|
218
218
|
* @returns {void}
|
|
219
219
|
*/
|
|
220
220
|
_removeEventListeners() {
|
|
221
|
-
this.removeEventListener(
|
|
221
|
+
this.removeEventListener(y.CLICK, this._handleClick);
|
|
222
222
|
}
|
|
223
223
|
/**
|
|
224
224
|
* Handles the internal button click event and executes the configured command.
|
|
@@ -275,7 +275,7 @@ class i extends HTMLElement {
|
|
|
275
275
|
* @returns {void}
|
|
276
276
|
*/
|
|
277
277
|
_syncAttributes() {
|
|
278
|
-
|
|
278
|
+
s.observedAttributes.forEach((t) => {
|
|
279
279
|
this._syncAttribute(t);
|
|
280
280
|
});
|
|
281
281
|
}
|
|
@@ -284,21 +284,21 @@ const Z = "undo-button", $ = `<button title="Undo" part="button">
|
|
|
284
284
|
<span class="material-symbols-outlined">undo</span>
|
|
285
285
|
<span>Undo</span>
|
|
286
286
|
</button>
|
|
287
|
-
`, H = "
|
|
288
|
-
|
|
289
|
-
class tt extends
|
|
287
|
+
`, H = "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)}", w = new CSSStyleSheet();
|
|
288
|
+
w.replaceSync(H);
|
|
289
|
+
class tt extends s {
|
|
290
290
|
/**
|
|
291
291
|
* @constructor
|
|
292
292
|
* @ignore
|
|
293
293
|
*/
|
|
294
294
|
constructor() {
|
|
295
|
-
super(), this.shadowRoot?.adoptedStyleSheets.push(
|
|
295
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push(w), this.command = c.CLOSE, this.title = "Undo";
|
|
296
296
|
}
|
|
297
297
|
/**
|
|
298
298
|
* Specifies which attributes should be observed for changes.
|
|
299
299
|
*/
|
|
300
300
|
static get observedAttributes() {
|
|
301
|
-
return
|
|
301
|
+
return s.observedAttributes;
|
|
302
302
|
}
|
|
303
303
|
/**
|
|
304
304
|
* Lifecycle hook invoked when the component is inserted into the DOM.
|
|
@@ -329,21 +329,21 @@ const O = `<button title="Confirm" part="button">
|
|
|
329
329
|
<span class="material-symbols-outlined">check</span>
|
|
330
330
|
<span>Confirm</span>
|
|
331
331
|
</button>
|
|
332
|
-
`, W = "
|
|
333
|
-
|
|
334
|
-
class et extends
|
|
332
|
+
`, W = "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)}", S = new CSSStyleSheet();
|
|
333
|
+
S.replaceSync(W);
|
|
334
|
+
class et extends s {
|
|
335
335
|
/**
|
|
336
336
|
* @constructor
|
|
337
337
|
* @ignore
|
|
338
338
|
*/
|
|
339
339
|
constructor() {
|
|
340
|
-
super(), this.shadowRoot?.adoptedStyleSheets.push(
|
|
340
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push(S), this.command = c.CLOSE, this.title = "Confirm";
|
|
341
341
|
}
|
|
342
342
|
/**
|
|
343
343
|
* Specifies which attributes should be observed for changes.
|
|
344
344
|
*/
|
|
345
345
|
static get observedAttributes() {
|
|
346
|
-
return
|
|
346
|
+
return s.observedAttributes;
|
|
347
347
|
}
|
|
348
348
|
/**
|
|
349
349
|
* Lifecycle hook invoked when the component is inserted into the DOM.
|
|
@@ -370,24 +370,24 @@ class et extends i {
|
|
|
370
370
|
e !== null && (this.commandfor = e.id);
|
|
371
371
|
}
|
|
372
372
|
}
|
|
373
|
-
const
|
|
373
|
+
const st = "confirm-button", V = `<button part="button">
|
|
374
374
|
<span class="material-symbols-outlined">chevron_left</span>
|
|
375
375
|
</button>
|
|
376
|
-
`,
|
|
377
|
-
|
|
378
|
-
class
|
|
376
|
+
`, P = "button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", x = new CSSStyleSheet();
|
|
377
|
+
x.replaceSync(P);
|
|
378
|
+
class it extends s {
|
|
379
379
|
/**
|
|
380
380
|
* @constructor
|
|
381
381
|
* @ignore
|
|
382
382
|
*/
|
|
383
383
|
constructor() {
|
|
384
|
-
super(), this.shadowRoot?.adoptedStyleSheets.push(
|
|
384
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push(x), this.command = c.CLOSE;
|
|
385
385
|
}
|
|
386
386
|
/**
|
|
387
387
|
* Specifies which attributes should be observed for changes.
|
|
388
388
|
*/
|
|
389
389
|
static get observedAttributes() {
|
|
390
|
-
return
|
|
390
|
+
return s.observedAttributes;
|
|
391
391
|
}
|
|
392
392
|
/**
|
|
393
393
|
* Lifecycle hook invoked when the component is inserted into the DOM.
|
|
@@ -399,8 +399,8 @@ class st extends i {
|
|
|
399
399
|
* Lifecycle hook invoked whenever an observed attribute changes.
|
|
400
400
|
* Updates the title visibility based on disabled state.
|
|
401
401
|
*/
|
|
402
|
-
attributeChangedCallback(t, e,
|
|
403
|
-
super.attributeChangedCallback(t, e,
|
|
402
|
+
attributeChangedCallback(t, e, i) {
|
|
403
|
+
super.attributeChangedCallback(t, e, i), t === "disabled" && this._updateTitle();
|
|
404
404
|
}
|
|
405
405
|
/**
|
|
406
406
|
* Renders the component's HTML structure.
|
|
@@ -419,24 +419,24 @@ class st extends i {
|
|
|
419
419
|
this.disabled ? t.removeAttribute("title") : t.setAttribute("title", "Previous");
|
|
420
420
|
}
|
|
421
421
|
}
|
|
422
|
-
const rt = "previous-button",
|
|
422
|
+
const rt = "previous-button", z = `<button part="button">
|
|
423
423
|
<span class="material-symbols-outlined">chevron_right</span>
|
|
424
424
|
</button>
|
|
425
|
-
`,
|
|
426
|
-
|
|
427
|
-
class
|
|
425
|
+
`, K = "button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", L = new CSSStyleSheet();
|
|
426
|
+
L.replaceSync(K);
|
|
427
|
+
class nt extends s {
|
|
428
428
|
/**
|
|
429
429
|
* @constructor
|
|
430
430
|
* @ignore
|
|
431
431
|
*/
|
|
432
432
|
constructor() {
|
|
433
|
-
super(), this.shadowRoot?.adoptedStyleSheets.push(
|
|
433
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push(L), this.command = c.CLOSE;
|
|
434
434
|
}
|
|
435
435
|
/**
|
|
436
436
|
* Specifies which attributes should be observed for changes.
|
|
437
437
|
*/
|
|
438
438
|
static get observedAttributes() {
|
|
439
|
-
return
|
|
439
|
+
return s.observedAttributes;
|
|
440
440
|
}
|
|
441
441
|
/**
|
|
442
442
|
* Lifecycle hook invoked when the component is inserted into the DOM.
|
|
@@ -448,14 +448,14 @@ class ot extends i {
|
|
|
448
448
|
* Lifecycle hook invoked whenever an observed attribute changes.
|
|
449
449
|
* Updates the title visibility based on disabled state.
|
|
450
450
|
*/
|
|
451
|
-
attributeChangedCallback(t, e,
|
|
452
|
-
super.attributeChangedCallback(t, e,
|
|
451
|
+
attributeChangedCallback(t, e, i) {
|
|
452
|
+
super.attributeChangedCallback(t, e, i), t === "disabled" && this._updateTitle();
|
|
453
453
|
}
|
|
454
454
|
/**
|
|
455
455
|
* Renders the component's HTML structure.
|
|
456
456
|
*/
|
|
457
457
|
_render() {
|
|
458
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
458
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = z, this._syncAttributes());
|
|
459
459
|
}
|
|
460
460
|
/**
|
|
461
461
|
* Updates the title attribute based on disabled state.
|
|
@@ -468,11 +468,11 @@ class ot extends i {
|
|
|
468
468
|
this.disabled ? t.removeAttribute("title") : t.setAttribute("title", "Next");
|
|
469
469
|
}
|
|
470
470
|
}
|
|
471
|
-
const
|
|
471
|
+
const ot = "next-button", at = "base-dialog", q = `<dialog part="dialog">
|
|
472
472
|
<slot></slot>
|
|
473
473
|
</dialog>
|
|
474
|
-
`, B = "dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-
|
|
475
|
-
|
|
474
|
+
`, B = "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:#00000080;-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}}", E = new CSSStyleSheet();
|
|
475
|
+
E.replaceSync(B);
|
|
476
476
|
class d extends HTMLElement {
|
|
477
477
|
/**
|
|
478
478
|
* @see HTMLDialogElement.closedBy
|
|
@@ -482,13 +482,13 @@ class d extends HTMLElement {
|
|
|
482
482
|
* Defines how the dialog can be closed.
|
|
483
483
|
* @see DialogClosedBy
|
|
484
484
|
*/
|
|
485
|
-
_closedBy =
|
|
485
|
+
_closedBy = g.ANY;
|
|
486
486
|
/**
|
|
487
487
|
* @constructor
|
|
488
488
|
* @ignore
|
|
489
489
|
*/
|
|
490
490
|
constructor() {
|
|
491
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(
|
|
491
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(E);
|
|
492
492
|
}
|
|
493
493
|
/**
|
|
494
494
|
* Specifies which attributes should be observed for changes.
|
|
@@ -500,7 +500,7 @@ class d extends HTMLElement {
|
|
|
500
500
|
return this.shadowRoot?.querySelector("dialog");
|
|
501
501
|
}
|
|
502
502
|
get command() {
|
|
503
|
-
return this.getAttribute(d.closedByAttribute) ??
|
|
503
|
+
return this.getAttribute(d.closedByAttribute) ?? g.ANY;
|
|
504
504
|
}
|
|
505
505
|
get closedBy() {
|
|
506
506
|
return this._closedBy;
|
|
@@ -534,9 +534,9 @@ class d extends HTMLElement {
|
|
|
534
534
|
* @param newValue - The new value (or null if removed)
|
|
535
535
|
* @returns {void}
|
|
536
536
|
*/
|
|
537
|
-
attributeChangedCallback(t, e,
|
|
537
|
+
attributeChangedCallback(t, e, i) {
|
|
538
538
|
const l = this.dialogElement;
|
|
539
|
-
l != null &&
|
|
539
|
+
l != null && i !== e && this._syncAttribute(t);
|
|
540
540
|
}
|
|
541
541
|
/**
|
|
542
542
|
* Adds event listeners to the component.
|
|
@@ -558,7 +558,7 @@ class d extends HTMLElement {
|
|
|
558
558
|
* @returns {void}
|
|
559
559
|
*/
|
|
560
560
|
_render() {
|
|
561
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
561
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = q, this._syncAttributes());
|
|
562
562
|
}
|
|
563
563
|
/**
|
|
564
564
|
* Syncs a single attribute from host to dialog element.
|
|
@@ -597,10 +597,13 @@ class d extends HTMLElement {
|
|
|
597
597
|
* @see HTMLDialogElement.close
|
|
598
598
|
*/
|
|
599
599
|
close(t) {
|
|
600
|
-
this.dialogElement
|
|
600
|
+
const e = this.dialogElement;
|
|
601
|
+
e.classList.add("closing"), setTimeout(() => {
|
|
602
|
+
e.close(t), e.classList.remove("closing");
|
|
603
|
+
}, 300);
|
|
601
604
|
}
|
|
602
605
|
}
|
|
603
|
-
const lt = "confirmation-dialog",
|
|
606
|
+
const lt = "confirmation-dialog", Y = `<dialog part="dialog">
|
|
604
607
|
<header part="header">
|
|
605
608
|
<h2></h2>
|
|
606
609
|
</header>
|
|
@@ -612,7 +615,7 @@ const lt = "confirmation-dialog", F = `<dialog part="dialog">
|
|
|
612
615
|
<undo-button></undo-button>
|
|
613
616
|
</footer>
|
|
614
617
|
</dialog>
|
|
615
|
-
`,
|
|
618
|
+
`, D = "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}", U = `<dialog part="dialog">
|
|
616
619
|
<header part="header">
|
|
617
620
|
<slot name="header"></slot>
|
|
618
621
|
</header>
|
|
@@ -623,15 +626,15 @@ const lt = "confirmation-dialog", F = `<dialog part="dialog">
|
|
|
623
626
|
<slot name="footer"></slot>
|
|
624
627
|
</footer>
|
|
625
628
|
</dialog>
|
|
626
|
-
`,
|
|
627
|
-
|
|
628
|
-
class
|
|
629
|
+
`, F = "dialog header[part=header]{border-bottom:var(--border-width-1) solid var(--color-neutral-600);padding-bottom:var(--spacing-4)}dialog header[part=header]:empty{display:none}dialog div[part=body]{padding:var(--spacing-4) 0}dialog div[part=body]:empty{display:none}dialog footer[part=footer]{border-top:var(--border-width-1) solid var(--color-neutral-600);padding-top:var(--spacing-4)}dialog footer[part=footer]:empty{display:none}", k = new CSSStyleSheet();
|
|
630
|
+
k.replaceSync(F);
|
|
631
|
+
class A extends d {
|
|
629
632
|
/**
|
|
630
633
|
* @constructor
|
|
631
634
|
* @ignore
|
|
632
635
|
*/
|
|
633
636
|
constructor() {
|
|
634
|
-
super(), this.shadowRoot?.adoptedStyleSheets.push(
|
|
637
|
+
super(), this.shadowRoot?.adoptedStyleSheets.push(k);
|
|
635
638
|
}
|
|
636
639
|
/**
|
|
637
640
|
* Specifies which attributes should be observed for changes.
|
|
@@ -647,12 +650,12 @@ class w extends d {
|
|
|
647
650
|
* @returns {void}
|
|
648
651
|
*/
|
|
649
652
|
_render() {
|
|
650
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
653
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = U, this._syncAttributes());
|
|
651
654
|
}
|
|
652
655
|
}
|
|
653
656
|
const C = new CSSStyleSheet();
|
|
654
|
-
C.replaceSync(
|
|
655
|
-
class a extends
|
|
657
|
+
C.replaceSync(D);
|
|
658
|
+
class a extends A {
|
|
656
659
|
/**
|
|
657
660
|
* The text content of the confirmation dialog.
|
|
658
661
|
*/
|
|
@@ -681,7 +684,7 @@ class a extends w {
|
|
|
681
684
|
*/
|
|
682
685
|
static get observedAttributes() {
|
|
683
686
|
return [
|
|
684
|
-
...
|
|
687
|
+
...A.observedAttributes,
|
|
685
688
|
a.textAttribute,
|
|
686
689
|
a.headlineAttribute
|
|
687
690
|
];
|
|
@@ -704,7 +707,7 @@ class a extends w {
|
|
|
704
707
|
* @returns {void}
|
|
705
708
|
*/
|
|
706
709
|
connectedCallback() {
|
|
707
|
-
this._render(), this._addEventListeners(), this.closedBy =
|
|
710
|
+
this._render(), this._addEventListeners(), this.closedBy = g.NONE;
|
|
708
711
|
}
|
|
709
712
|
/**
|
|
710
713
|
* Renders the component's HTML structure.
|
|
@@ -713,7 +716,7 @@ class a extends w {
|
|
|
713
716
|
* @returns {void}
|
|
714
717
|
*/
|
|
715
718
|
_render() {
|
|
716
|
-
this.shadowRoot !== null && (this.shadowRoot.innerHTML =
|
|
719
|
+
this.shadowRoot !== null && (this.shadowRoot.innerHTML = Y, this._syncAttributes());
|
|
717
720
|
}
|
|
718
721
|
/**
|
|
719
722
|
* Syncs a single attribute from host to the DOM elements.
|
|
@@ -763,8 +766,8 @@ const dt = "header-body-footer-dialog", j = `<div class="bar-menu-container">
|
|
|
763
766
|
|
|
764
767
|
<next-button class="nav-next" part="nav-next-button"></next-button>
|
|
765
768
|
</div>
|
|
766
|
-
`, X = '@charset "UTF-8";:host{display:block;width:100%}@media(max-width:600px){:host{--game-menu-width: 90%}}@media(min-width:601px)and (max-width:1200px){:host{--game-menu-width: calc(90% - (40%*(100vw - 601px)/599px)) }}@media(min-width:1201px){:host{--game-menu-width: 50%}}.bar-menu-container{display:flex;align-items:center;justify-content:space-between;width:var(--game-menu-width, 90%);max-width:900px;height:100%;gap:var(--gap-sm);padding:var(--spacing-1);background:var(--color-bg-
|
|
767
|
-
|
|
769
|
+
`, X = '@charset "UTF-8";:host{display:block;width:100%}@media(max-width:600px){:host{--game-menu-width: 90%}}@media(min-width:601px)and (max-width:1200px){:host{--game-menu-width: calc(90% - (40%*(100vw - 601px)/599px)) }}@media(min-width:1201px){:host{--game-menu-width: 50%}}.bar-menu-container{display:flex;align-items:center;justify-content:space-between;width:var(--game-menu-width, 90%);max-width:900px;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-bg-primary);box-shadow:var(--shadow-sm);margin:0 auto}.bar-menu-container previous-button,.bar-menu-container next-button{flex-shrink:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.bar-menu-container previous-button.visible,.bar-menu-container next-button.visible{opacity:1;visibility:visible;pointer-events:auto}.bar-menu-container previous-button::part(button),.bar-menu-container next-button::part(button){background-color:transparent;box-shadow:none}.bar-menu-container .buttons-wrapper{display:grid;grid-template-columns:repeat(var(--game-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)}', R = new CSSStyleSheet();
|
|
770
|
+
R.replaceSync(X);
|
|
768
771
|
class v extends HTMLElement {
|
|
769
772
|
static _visibleCountAttribute = "visible-count";
|
|
770
773
|
_currentIndex = 0;
|
|
@@ -781,7 +784,7 @@ class v extends HTMLElement {
|
|
|
781
784
|
* @constructor
|
|
782
785
|
*/
|
|
783
786
|
constructor() {
|
|
784
|
-
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(
|
|
787
|
+
super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(R);
|
|
785
788
|
}
|
|
786
789
|
/**
|
|
787
790
|
* Specifies which attributes should be observed for changes.
|
|
@@ -819,7 +822,7 @@ class v extends HTMLElement {
|
|
|
819
822
|
/**
|
|
820
823
|
* Lifecycle hook: observed attribute changed
|
|
821
824
|
*/
|
|
822
|
-
attributeChangedCallback(t, e,
|
|
825
|
+
attributeChangedCallback(t, e, i) {
|
|
823
826
|
t === v._visibleCountAttribute && (this._visibleCount = this.visibleButtons, this._buttonsWrapper !== null && this._buttonsWrapper.style.setProperty(
|
|
824
827
|
"--bar-menu-visible-count",
|
|
825
828
|
String(this.visibleButtons)
|
|
@@ -838,9 +841,9 @@ class v extends HTMLElement {
|
|
|
838
841
|
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(
|
|
839
842
|
"--bar-menu-visible-count",
|
|
840
843
|
String(this.visibleButtons)
|
|
841
|
-
), this._navPrevButton !== null && (this._navPrevButton.setAttribute("aria-label", "Previous"), this._navPrevButton.addEventListener(
|
|
844
|
+
), this._navPrevButton !== null && (this._navPrevButton.setAttribute("aria-label", "Previous"), this._navPrevButton.addEventListener(y.CLICK, () => {
|
|
842
845
|
this._scrollPrevious();
|
|
843
|
-
})), this._navNextButton !== null && (this._navNextButton.setAttribute("aria-label", "Next"), this._navNextButton.addEventListener(
|
|
846
|
+
})), this._navNextButton !== null && (this._navNextButton.setAttribute("aria-label", "Next"), this._navNextButton.addEventListener(y.CLICK, () => {
|
|
844
847
|
this._scrollNext();
|
|
845
848
|
}));
|
|
846
849
|
}
|
|
@@ -879,45 +882,40 @@ class v extends HTMLElement {
|
|
|
879
882
|
* Get all slotted button elements
|
|
880
883
|
*/
|
|
881
884
|
_getSlottedButtons() {
|
|
882
|
-
|
|
883
|
-
return [];
|
|
884
|
-
const t = this._slotElement.assignedElements();
|
|
885
|
-
return Array.from(t).filter(
|
|
886
|
-
(e) => e instanceof HTMLElement && (e.tagName === "BUTTON" || e.getAttribute("role") === "button")
|
|
887
|
-
);
|
|
885
|
+
return this._slotElement === null ? [] : this._slotElement.assignedElements();
|
|
888
886
|
}
|
|
889
887
|
/**
|
|
890
888
|
* Update button visibility by showing/hiding rows with fade
|
|
891
889
|
*/
|
|
892
890
|
_updateButtonVisibility(t) {
|
|
893
|
-
const e = this._getSlottedButtons(),
|
|
894
|
-
e.forEach((
|
|
895
|
-
const p =
|
|
896
|
-
p || (
|
|
897
|
-
}), t !== void 0 ? (e[0]?.offsetHeight, e.forEach((
|
|
898
|
-
if (
|
|
899
|
-
const u =
|
|
900
|
-
u.style.display = "inline-flex",
|
|
901
|
-
const
|
|
902
|
-
u.style.transitionDelay = `${
|
|
891
|
+
const e = this._getSlottedButtons(), i = e.length, l = this.visibleButtons, h = this._currentIndex, m = Math.min(h + l, i);
|
|
892
|
+
e.forEach((n, o) => {
|
|
893
|
+
const p = o >= h && o < m, u = n;
|
|
894
|
+
p || (n.classList.remove("visible-button"), n.classList.remove("animating"), u.style.display = "none");
|
|
895
|
+
}), t !== void 0 ? (e[0]?.offsetHeight, e.forEach((n, o) => {
|
|
896
|
+
if (o >= h && o < m) {
|
|
897
|
+
const u = n;
|
|
898
|
+
u.style.display = "inline-flex", n.classList.add("animating");
|
|
899
|
+
const I = o % this.visibleButtons * 50;
|
|
900
|
+
u.style.transitionDelay = `${I}ms`;
|
|
903
901
|
}
|
|
904
|
-
}), e[0]?.offsetHeight, e.forEach((
|
|
905
|
-
|
|
902
|
+
}), e[0]?.offsetHeight, e.forEach((n, o) => {
|
|
903
|
+
o >= h && o < m && n.classList.add("visible-button");
|
|
906
904
|
}), setTimeout(() => {
|
|
907
|
-
e.forEach((
|
|
908
|
-
|
|
905
|
+
e.forEach((n) => {
|
|
906
|
+
n.classList.remove("animating"), n.style.transitionDelay = r;
|
|
909
907
|
});
|
|
910
|
-
}, 400)) : e.forEach((
|
|
911
|
-
const p =
|
|
912
|
-
p && (u.style.display = "inline-flex",
|
|
913
|
-
}), this._updateNavigationButtons(
|
|
908
|
+
}, 400)) : e.forEach((n, o) => {
|
|
909
|
+
const p = o >= h && o < m, u = n;
|
|
910
|
+
p && (u.style.display = "inline-flex", n.classList.add("visible-button"));
|
|
911
|
+
}), this._updateNavigationButtons(i, l);
|
|
914
912
|
}
|
|
915
913
|
/**
|
|
916
914
|
* Update navigation buttons visibility and disabled state
|
|
917
915
|
*/
|
|
918
916
|
_updateNavigationButtons(t, e) {
|
|
919
|
-
const
|
|
920
|
-
this._navPrevButton !== null && (
|
|
917
|
+
const i = t > e, l = this._currentIndex + e < t;
|
|
918
|
+
this._navPrevButton !== null && (i ? (this._navPrevButton.classList.add("visible"), this._navPrevButton.disabled = this._currentIndex === 0) : this._navPrevButton.classList.remove("visible")), this._navNextButton !== null && (i ? (this._navNextButton.classList.add("visible"), this._navNextButton.disabled = !l) : this._navNextButton.classList.remove("visible"));
|
|
921
919
|
}
|
|
922
920
|
/**
|
|
923
921
|
* Navigate to previous page (scrolls by visibleCount buttons)
|
|
@@ -932,17 +930,17 @@ class v extends HTMLElement {
|
|
|
932
930
|
* Navigate to next page (scrolls by visibleCount buttons)
|
|
933
931
|
*/
|
|
934
932
|
_scrollNext() {
|
|
935
|
-
const t = this._getSlottedButtons().length, e = this.visibleButtons,
|
|
936
|
-
|
|
933
|
+
const t = this._getSlottedButtons().length, e = this.visibleButtons, i = this._currentIndex + e;
|
|
934
|
+
i < t && (this._currentIndex = i, this._updateButtonVisibility("next"));
|
|
937
935
|
}
|
|
938
936
|
/**
|
|
939
937
|
* Public API: scroll to specific button by index
|
|
940
938
|
*/
|
|
941
939
|
scrollToButton(t) {
|
|
942
|
-
const e = this._getSlottedButtons().length,
|
|
940
|
+
const e = this._getSlottedButtons().length, i = this.visibleButtons;
|
|
943
941
|
t >= 0 && t < e && (this._currentIndex = Math.max(
|
|
944
942
|
0,
|
|
945
|
-
Math.min(t, e -
|
|
943
|
+
Math.min(t, e - i)
|
|
946
944
|
), this._updateButtonVisibility());
|
|
947
945
|
}
|
|
948
946
|
/**
|
|
@@ -970,22 +968,22 @@ const ut = "bar-menu";
|
|
|
970
968
|
export {
|
|
971
969
|
G as APPLICATION_NAME,
|
|
972
970
|
v as BarMenuComponent,
|
|
973
|
-
|
|
971
|
+
s as BaseButtonComponent,
|
|
974
972
|
d as BaseDialogComponent,
|
|
975
973
|
et as ConfirmButtonComponent,
|
|
976
974
|
a as ConfirmationDialogComponent,
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
975
|
+
A as HeaderBodyFooterDialogComponent,
|
|
976
|
+
nt as NextButtonComponent,
|
|
977
|
+
it as PreviousButtonComponent,
|
|
980
978
|
tt as UndoButtonComponent,
|
|
981
979
|
J as WebComponentsRegistry,
|
|
982
980
|
ut as barMenuWebComponentSelector,
|
|
983
981
|
Q as baseButtonWebComponentSelector,
|
|
984
982
|
at as baseDialogWebComponentSelector,
|
|
985
|
-
|
|
983
|
+
st as confirmButtonWebComponentSelector,
|
|
986
984
|
lt as confirmationDialogWebComponentSelector,
|
|
987
985
|
dt as headerBodyFooterDialogWebComponentSelector,
|
|
988
|
-
|
|
986
|
+
ot as nextButtonWebComponentSelector,
|
|
989
987
|
rt as previousButtonWebComponentSelector,
|
|
990
988
|
Z as undoButtonWebComponentSelector
|
|
991
989
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(s,p){typeof exports=="object"&&typeof module<"u"?p(exports):typeof define=="function"&&define.amd?define(["exports"],p):(s=typeof globalThis<"u"?globalThis:s||self,p(s["as-design-system-lib"]={}))})(this,(function(s){"use strict";const p="as-design-system-lib";class T{constructor(t=new Map){this.registerAllComponents(t)}registerAllComponents(t){Array.from(t.entries()).forEach(([e,
|
|
1
|
+
(function(s,p){typeof exports=="object"&&typeof module<"u"?p(exports):typeof define=="function"&&define.amd?define(["exports"],p):(s=typeof globalThis<"u"?globalThis:s||self,p(s["as-design-system-lib"]={}))})(this,(function(s){"use strict";const p="as-design-system-lib";class T{constructor(t=new Map){this.registerAllComponents(t)}registerAllComponents(t){Array.from(t.entries()).forEach(([e,r])=>{this.registerComponent(e,r)})}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 N="base-button",n="",c={SHOW_MODAL:"show-modal",CLOSE:"close"};`${btoa({CUSTOM_CROSSHAIR:`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
|
2
2
|
<!-- White border (underneath) -->
|
|
3
3
|
<line x1="16" y1="2" x2="16" y2="30" stroke="white" stroke-width="5"/>
|
|
4
4
|
<line x1="2" y1="16" x2="30" y2="16" stroke="white" stroke-width="5"/>
|
|
@@ -6,27 +6,27 @@
|
|
|
6
6
|
<!-- Black crosshair lines (on top) -->
|
|
7
7
|
<line x1="16" y1="2" x2="16" y2="30" stroke="black" stroke-width="2"/>
|
|
8
8
|
<line x1="2" y1="16" x2="30" y2="16" stroke="black" stroke-width="2"/>
|
|
9
|
-
</svg>`}.CUSTOM_CROSSHAIR)}`;const
|
|
9
|
+
</svg>`}.CUSTOM_CROSSHAIR)}`;const A={ANY:"any",NONE:"none"},w={KEY_DOWN:"keydown"},g={CLICK:"click"},$=`<button part="button">
|
|
10
10
|
<slot></slot>
|
|
11
11
|
</button>
|
|
12
|
-
`,H=":where(button,input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::file-selector-button{cursor:pointer;
|
|
12
|
+
`,H=":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)}",S=new CSSStyleSheet;S.replaceSync(H);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(S)}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,r){r!==e&&this._syncAttribute(t)}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=$,this._syncAttributes())}_addEventListeners(){this.addEventListener(g.CLICK,this._handleClick)}_removeEventListeners(){this.removeEventListener(g.CLICK,this._handleClick)}_handleClick=()=>{if(this.command===n||this.commandfor===n)return;const t=document.getElementById(this.commandfor);if(t===null)return;const e=t;switch(this.command){case c.SHOW_MODAL:e.showModal?.();break;case c.CLOSE:e.close?.();break}};_syncAttribute(t){const e=this.buttonElement;this.hasAttribute(t)?e.setAttribute(t,this.getAttribute(t)??n):e.removeAttribute(t)}_syncAttributes(){i.observedAttributes.forEach(t=>{this._syncAttribute(t)})}}const O="undo-button",W=`<button title="Undo" part="button">
|
|
13
13
|
<span class="material-symbols-outlined">undo</span>
|
|
14
14
|
<span>Undo</span>
|
|
15
15
|
</button>
|
|
16
|
-
`,P="
|
|
16
|
+
`,P="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)}",x=new CSSStyleSheet;x.replaceSync(P);class V extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(x),this.command=c.CLOSE,this.title="Undo"}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 B=`<button title="Confirm" part="button">
|
|
17
17
|
<span class="material-symbols-outlined">check</span>
|
|
18
18
|
<span>Confirm</span>
|
|
19
19
|
</button>
|
|
20
|
-
`,
|
|
20
|
+
`,z="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)}",L=new CSSStyleSheet;L.replaceSync(z);class D extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(L),this.command=c.CLOSE,this.title="Confirm"}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._setCommandForAttribute(),this._addEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=B,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 K="confirm-button",q=`<button part="button">
|
|
21
21
|
<span class="material-symbols-outlined">chevron_left</span>
|
|
22
22
|
</button>
|
|
23
|
-
`,
|
|
23
|
+
`,Y="button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",E=new CSSStyleSheet;E.replaceSync(Y);class U extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(E),this.command=c.CLOSE}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}attributeChangedCallback(t,e,r){super.attributeChangedCallback(t,e,r),t==="disabled"&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=q,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");this.disabled?t.removeAttribute("title"):t.setAttribute("title","Previous")}}const j="previous-button",F=`<button part="button">
|
|
24
24
|
<span class="material-symbols-outlined">chevron_right</span>
|
|
25
25
|
</button>
|
|
26
|
-
`,X="",
|
|
26
|
+
`,X="button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",k=new CSSStyleSheet;k.replaceSync(X);class G extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(k),this.command=c.CLOSE}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}attributeChangedCallback(t,e,r){super.attributeChangedCallback(t,e,r),t==="disabled"&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=F,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");this.disabled?t.removeAttribute("title"):t.setAttribute("title","Next")}}const J="next-button",Q="base-dialog",Z=`<dialog part="dialog">
|
|
27
27
|
<slot></slot>
|
|
28
28
|
</dialog>
|
|
29
|
-
`,tt="dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-
|
|
29
|
+
`,tt="dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-secondary);border-radius:var(--border-radius-xl);padding:var(--spacing-4);max-width:90vw;max-height:90vh;font-family:var(--font-family-base);line-height:var(--line-height-normal);font-size:var(--font-size-sm);box-shadow:var(--shadow-2xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:slideIn var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog.closing{animation:slideOut var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog::backdrop{background:#00000080;-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(tt);class d extends HTMLElement{static closedByAttribute="closedby";_closedBy=A.ANY;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(C)}static get observedAttributes(){return[d.closedByAttribute]}get dialogElement(){return this.shadowRoot?.querySelector("dialog")}get command(){return this.getAttribute(d.closedByAttribute)??A.ANY}get closedBy(){return this._closedBy}set closedBy(t){this._closedBy=t,this.setAttribute(d.closedByAttribute,t)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,r){const u=this.dialogElement;u!=null&&r!==e&&this._syncAttribute(t)}_addEventListeners(){}_removeEventListeners(){}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Z,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(){d.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 et="confirmation-dialog",it=`<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
|
-
`,st="
|
|
41
|
+
`,st="dialog header[part=header] h2{margin:0;padding:0}dialog div[part=body] p{margin:0;padding:0}dialog footer[part=footer]{display:flex;gap:var(--gap-md);justify-content:flex-end}",nt=`<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
|
+
`,rt="dialog header[part=header]{border-bottom:var(--border-width-1) solid var(--color-neutral-600);padding-bottom:var(--spacing-4)}dialog header[part=header]:empty{display:none}dialog div[part=body]{padding:var(--spacing-4) 0}dialog div[part=body]:empty{display:none}dialog footer[part=footer]{border-top:var(--border-width-1) solid var(--color-neutral-600);padding-top:var(--spacing-4)}dialog footer[part=footer]:empty{display:none}",I=new CSSStyleSheet;I.replaceSync(rt);class _ extends d{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(I)}static get observedAttributes(){return d.observedAttributes}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=nt,this._syncAttributes())}}const R=new CSSStyleSheet;R.replaceSync(st);class l extends _{_text=n;_headline=n;static textAttribute="text";static headlineAttribute="headline";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(R)}static get observedAttributes(){return[..._.observedAttributes,l.textAttribute,l.headlineAttribute]}get headline(){return this._headline}set headline(t){this._headline=t,this.setAttribute(l.headlineAttribute,t)}get text(){return this._text}set text(t){this._text=t,this.setAttribute(l.textAttribute,t)}connectedCallback(){this._render(),this._addEventListeners(),this.closedBy=A.NONE}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=it,this._syncAttributes())}_syncAttribute(t){if(l.observedAttributes.includes(t))switch(t){case l.headlineAttribute:{this._headline=this.getAttribute(t)??n;const e=this.shadowRoot?.querySelector("h2");e!=null&&(e.textContent=this._headline);break}case l.textAttribute:{this._text=this.getAttribute(t)??n;const e=this.shadowRoot?.querySelector("p");e!=null&&(e.textContent=this._text);break}default:super._syncAttribute(t)}else super._syncAttribute(t)}_syncAttributes(){super._syncAttributes(),l.observedAttributes.forEach(t=>{this._syncAttribute(t)})}}const ot="header-body-footer-dialog",at=`<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
|
-
`,lt='@charset "UTF-8";:host{display:block;width:100%}@media(max-width:600px){:host{--game-menu-width: 90%}}@media(min-width:601px)and (max-width:1200px){:host{--game-menu-width: calc(90% - (40%*(100vw - 601px)/599px)) }}@media(min-width:1201px){:host{--game-menu-width: 50%}}.bar-menu-container{display:flex;align-items:center;justify-content:space-between;width:var(--game-menu-width, 90%);max-width:900px;height:100%;gap:var(--gap-sm);padding:var(--spacing-1);background:var(--color-bg-
|
|
61
|
+
`,lt='@charset "UTF-8";:host{display:block;width:100%}@media(max-width:600px){:host{--game-menu-width: 90%}}@media(min-width:601px)and (max-width:1200px){:host{--game-menu-width: calc(90% - (40%*(100vw - 601px)/599px)) }}@media(min-width:1201px){:host{--game-menu-width: 50%}}.bar-menu-container{display:flex;align-items:center;justify-content:space-between;width:var(--game-menu-width, 90%);max-width:900px;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-bg-primary);box-shadow:var(--shadow-sm);margin:0 auto}.bar-menu-container previous-button,.bar-menu-container next-button{flex-shrink:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.bar-menu-container previous-button.visible,.bar-menu-container next-button.visible{opacity:1;visibility:visible;pointer-events:auto}.bar-menu-container previous-button::part(button),.bar-menu-container next-button::part(button){background-color:transparent;box-shadow:none}.bar-menu-container .buttons-wrapper{display:grid;grid-template-columns:repeat(var(--game-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;M.replaceSync(lt);class b extends HTMLElement{static _visibleCountAttribute="visible-count";_currentIndex=0;_visibleCount=3;_MIN_VISIBLE=3;_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(M)}static get observedAttributes(){return[b._visibleCountAttribute]}get visibleButtons(){const t=this.getAttribute(b._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(b._visibleCountAttribute,String(e))}connectedCallback(){this._render(),this._cacheElements(),this._setupSlotListener(),this._setupKeyboardListener(),this._updateButtonVisibility()}disconnectedCallback(){this._removeSlotListener(),this._removeKeyboardListener()}attributeChangedCallback(t,e,r){t===b._visibleCountAttribute&&(this._visibleCount=this.visibleButtons,this._buttonsWrapper!==null&&this._buttonsWrapper.style.setProperty("--bar-menu-visible-count",String(this.visibleButtons)),this._updateButtonVisibility())}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=at)}_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(g.CLICK,()=>{this._scrollPrevious()})),this._navNextButton!==null&&(this._navNextButton.setAttribute("aria-label","Next"),this._navNextButton.addEventListener(g.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(w.KEY_DOWN,this._keyDownListener)}_removeKeyboardListener(){this._keyDownListener!==null&&this.removeEventListener(w.KEY_DOWN,this._keyDownListener)}_getSlottedButtons(){return this._slotElement===null?[]:this._slotElement.assignedElements()}_updateButtonVisibility(t){const e=this._getSlottedButtons(),r=e.length,u=this.visibleButtons,v=this._currentIndex,f=Math.min(v+u,r);e.forEach((o,a)=>{const y=a>=v&&a<f,h=o;y||(o.classList.remove("visible-button"),o.classList.remove("animating"),h.style.display="none")}),t!==void 0?(e[0]?.offsetHeight,e.forEach((o,a)=>{if(a>=v&&a<f){const h=o;h.style.display="inline-flex",o.classList.add("animating");const ut=a%this.visibleButtons*50;h.style.transitionDelay=`${ut}ms`}}),e[0]?.offsetHeight,e.forEach((o,a)=>{a>=v&&a<f&&o.classList.add("visible-button")}),setTimeout(()=>{e.forEach(o=>{o.classList.remove("animating"),o.style.transitionDelay=n})},400)):e.forEach((o,a)=>{const y=a>=v&&a<f,h=o;y&&(h.style.display="inline-flex",o.classList.add("visible-button"))}),this._updateNavigationButtons(r,u)}_updateNavigationButtons(t,e){const r=t>e,u=this._currentIndex+e<t;this._navPrevButton!==null&&(r?(this._navPrevButton.classList.add("visible"),this._navPrevButton.disabled=this._currentIndex===0):this._navPrevButton.classList.remove("visible")),this._navNextButton!==null&&(r?(this._navNextButton.classList.add("visible"),this._navNextButton.disabled=!u):this._navNextButton.classList.remove("visible"))}_scrollPrevious(){this._currentIndex>0&&(this._currentIndex=Math.max(0,this._currentIndex-this.visibleButtons),this._updateButtonVisibility("previous"))}_scrollNext(){const t=this._getSlottedButtons().length,e=this.visibleButtons,r=this._currentIndex+e;r<t&&(this._currentIndex=r,this._updateButtonVisibility("next"))}scrollToButton(t){const e=this._getSlottedButtons().length,r=this.visibleButtons;t>=0&&t<e&&(this._currentIndex=Math.max(0,Math.min(t,e-r)),this._updateButtonVisibility())}getVisibleButtons(){return this._getSlottedButtons().filter(t=>t.classList.contains("visible-button"))}getAllButtons(){return this._getSlottedButtons()}getCurrentIndex(){return this._currentIndex}}const dt="bar-menu";s.APPLICATION_NAME=p,s.BarMenuComponent=b,s.BaseButtonComponent=i,s.BaseDialogComponent=d,s.ConfirmButtonComponent=D,s.ConfirmationDialogComponent=l,s.HeaderBodyFooterDialogComponent=_,s.NextButtonComponent=G,s.PreviousButtonComponent=U,s.UndoButtonComponent=V,s.WebComponentsRegistry=T,s.barMenuWebComponentSelector=dt,s.baseButtonWebComponentSelector=N,s.baseDialogWebComponentSelector=Q,s.confirmButtonWebComponentSelector=K,s.confirmationDialogWebComponentSelector=et,s.headerBodyFooterDialogWebComponentSelector=ot,s.nextButtonWebComponentSelector=J,s.previousButtonWebComponentSelector=j,s.undoButtonWebComponentSelector=O,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));
|
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.3.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
|
"files": [
|
|
@@ -38,12 +38,11 @@
|
|
|
38
38
|
"storybook": "storybook dev -p 6006",
|
|
39
39
|
"storybook-build": "storybook build"
|
|
40
40
|
},
|
|
41
|
-
"dependencies": {},
|
|
42
41
|
"devDependencies": {
|
|
43
|
-
"@fontsource/material-symbols-outlined": "^5.2.36",
|
|
44
42
|
"@commitlint/cli": "^20.4.1",
|
|
45
43
|
"@commitlint/config-conventional": "^20.4.1",
|
|
46
44
|
"@eslint/js": "^9.39.2",
|
|
45
|
+
"@fontsource/material-symbols-outlined": "^5.2.36",
|
|
47
46
|
"@semantic-release/changelog": "^6.0.3",
|
|
48
47
|
"@semantic-release/git": "^10.0.1",
|
|
49
48
|
"@semantic-release/github": "^12.0.3",
|
|
@@ -81,7 +80,7 @@
|
|
|
81
80
|
"vitest": "^4.0.18"
|
|
82
81
|
},
|
|
83
82
|
"peerDependencies": {
|
|
84
|
-
"@albi_scando/as-const-lib": "^1.
|
|
83
|
+
"@albi_scando/as-const-lib": "^1.5.2",
|
|
85
84
|
"@albi_scando/as-mixins-lib": "^1.1.0",
|
|
86
85
|
"@fontsource/material-symbols-outlined": "^5.2.36"
|
|
87
86
|
},
|