@nonoun/native-ui 0.2.8 → 0.2.9

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.
Files changed (62) hide show
  1. package/dist/components-lean.css +119 -6
  2. package/dist/components.css +119 -6
  3. package/dist/containers/ui-layout-sidebar/ui-layout-sidebar-element.d.ts.map +1 -1
  4. package/dist/core/trait-runtime.d.ts.map +1 -1
  5. package/dist/custom-elements.json +1602 -1602
  6. package/dist/dialog-controller.js +38 -350
  7. package/dist/foundation.css +1 -15
  8. package/dist/{nav/inspector → inspector}/build-inspector.d.ts +2 -2
  9. package/dist/inspector/build-inspector.d.ts.map +1 -0
  10. package/dist/{nav/inspector → inspector}/ds-color-swatch-element.d.ts +1 -1
  11. package/dist/inspector/ds-color-swatch-element.d.ts.map +1 -0
  12. package/dist/inspector/ds-color-swatch.d.ts.map +1 -0
  13. package/dist/{nav/inspector → inspector}/ds-colors-element.d.ts +1 -1
  14. package/dist/inspector/ds-colors-element.d.ts.map +1 -0
  15. package/dist/inspector/ds-colors.d.ts.map +1 -0
  16. package/dist/inspector/ds-inspector-element.d.ts +15 -0
  17. package/dist/inspector/ds-inspector-element.d.ts.map +1 -0
  18. package/dist/inspector/ds-inspector.d.ts +3 -0
  19. package/dist/inspector/ds-inspector.d.ts.map +1 -0
  20. package/dist/{nav/inspector → inspector}/ds-themes-element.d.ts +1 -1
  21. package/dist/inspector/ds-themes-element.d.ts.map +1 -0
  22. package/dist/inspector/ds-themes.d.ts.map +1 -0
  23. package/dist/{nav/inspector → inspector}/ds-variable-element.d.ts +1 -1
  24. package/dist/inspector/ds-variable-element.d.ts.map +1 -0
  25. package/dist/inspector/ds-variable.d.ts.map +1 -0
  26. package/dist/{nav/inspector → inspector}/index.d.ts +1 -0
  27. package/dist/inspector/index.d.ts.map +1 -0
  28. package/dist/inspector.css +1 -1
  29. package/dist/inspector.d.ts +10 -6
  30. package/dist/inspector.d.ts.map +1 -1
  31. package/dist/inspector.js +94 -75
  32. package/dist/kernel.js +185 -186
  33. package/dist/list-navigate-controller.js +457 -0
  34. package/dist/native-ui-lean.css +120 -21
  35. package/dist/native-ui.css +120 -21
  36. package/dist/native-ui.js +7 -7
  37. package/dist/register-all.js +4 -3
  38. package/dist/register-all2.js +20 -19
  39. package/dist/traits/adapters/draggable-adapter.d.ts.map +1 -1
  40. package/dist/traits/drag-controller.d.ts +3 -0
  41. package/dist/traits/drag-controller.d.ts.map +1 -1
  42. package/dist/traits.js +5 -6
  43. package/dist/ui-icon-element.js +391 -4153
  44. package/dist/ui-layout-inspector-element.js +3777 -0
  45. package/dist/uid.js +63 -3
  46. package/package.json +1 -1
  47. package/dist/define.js +0 -62
  48. package/dist/nav/inspector/build-inspector.d.ts.map +0 -1
  49. package/dist/nav/inspector/ds-color-swatch-element.d.ts.map +0 -1
  50. package/dist/nav/inspector/ds-color-swatch.d.ts.map +0 -1
  51. package/dist/nav/inspector/ds-colors-element.d.ts.map +0 -1
  52. package/dist/nav/inspector/ds-colors.d.ts.map +0 -1
  53. package/dist/nav/inspector/ds-themes-element.d.ts.map +0 -1
  54. package/dist/nav/inspector/ds-themes.d.ts.map +0 -1
  55. package/dist/nav/inspector/ds-variable-element.d.ts.map +0 -1
  56. package/dist/nav/inspector/ds-variable.d.ts.map +0 -1
  57. package/dist/nav/inspector/index.d.ts.map +0 -1
  58. package/dist/ui-element.js +0 -133
  59. /package/dist/{nav/inspector → inspector}/ds-color-swatch.d.ts +0 -0
  60. /package/dist/{nav/inspector → inspector}/ds-colors.d.ts +0 -0
  61. /package/dist/{nav/inspector → inspector}/ds-themes.d.ts +0 -0
  62. /package/dist/{nav/inspector → inspector}/ds-variable.d.ts +0 -0
@@ -1,8 +1,6 @@
1
- import { t as e } from "./uid.js";
2
- import { i as t, n, r } from "./define.js";
3
- import { a as i, c as a, n as o, o as s, p as c, r as l, s as u, t as d } from "./dialog-controller.js";
4
- import { a as f, i as p, n as m, o as h, r as g, t as _ } from "./ui-element.js";
5
- function v(e, t, n, r) {
1
+ import { a as e, o as t, r as n, t as r } from "./uid.js";
2
+ import { a as i, n as a, t as o, u as s } from "./list-navigate-controller.js";
3
+ function c(e, t, n, r) {
6
4
  let i;
7
5
  return () => {
8
6
  let n = t.value;
@@ -13,7 +11,7 @@ function v(e, t, n, r) {
13
11
  })), i = n;
14
12
  };
15
13
  }
16
- function y(e, n, r) {
14
+ function l(e, n, r) {
17
15
  let i = r.attribute ?? n;
18
16
  if (r.type === "boolean") {
19
17
  let n = t(!1);
@@ -78,7 +76,7 @@ function y(e, n, r) {
78
76
  * }
79
77
  * ```
80
78
  */
81
- function b(e, t, n) {
79
+ function u(e, t, n) {
82
80
  let r = e[t];
83
81
  return r ? (r.fromAttribute(n), !0) : !1;
84
82
  }
@@ -101,7 +99,7 @@ function b(e, t, n) {
101
99
  * }
102
100
  * ```
103
101
  */
104
- function x(e) {
102
+ function d(e) {
105
103
  return class extends e {
106
104
  static formAssociated = !0;
107
105
  /** Override to handle form-initiated disabled state changes. */
@@ -122,10 +120,10 @@ function x(e) {
122
120
  formAssociatedCallback(e) {}
123
121
  };
124
122
  }
125
- function S(e, t) {
123
+ function f(e, t) {
126
124
  return e.label.toLowerCase().includes(t.toLowerCase());
127
125
  }
128
- var C = class {
126
+ var p = class {
129
127
  data;
130
128
  query;
131
129
  #e;
@@ -139,20 +137,20 @@ var C = class {
139
137
  #n;
140
138
  selectedItem;
141
139
  empty;
142
- constructor(e = {}) {
143
- this.data = t([]), this.query = t(""), this.#e = t(e.filterFn ?? S), this.#t = t(e.sortFn ?? null), this.#n = t(e.multiple ?? !1), this.activeIndex = t(e.initialActiveIndex ?? -1), this.value = t(null), this.selected = t(/* @__PURE__ */ new Set()), this.filtered = r(() => {
140
+ constructor(n = {}) {
141
+ this.data = t([]), this.query = t(""), this.#e = t(n.filterFn ?? f), this.#t = t(n.sortFn ?? null), this.#n = t(n.multiple ?? !1), this.activeIndex = t(n.initialActiveIndex ?? -1), this.value = t(null), this.selected = t(/* @__PURE__ */ new Set()), this.filtered = e(() => {
144
142
  let e = this.data.value, t = this.query.value, n = this.#e.value;
145
143
  return t ? e.filter((e) => n(e, t)) : e;
146
- }), this.sorted = r(() => {
144
+ }), this.sorted = e(() => {
147
145
  let e = this.filtered.value, t = this.#t.value;
148
146
  return t ? [...e].sort(t) : e;
149
- }), this.activeItem = r(() => {
147
+ }), this.activeItem = e(() => {
150
148
  let e = this.view.value, t = this.activeIndex.value;
151
149
  return t >= 0 && t < e.length ? e[t] : null;
152
- }), this.selectedItem = r(() => {
150
+ }), this.selectedItem = e(() => {
153
151
  let e = this.value.value;
154
152
  return e === null ? null : this.data.value.find((t) => t.value === e) ?? null;
155
- }), this.empty = r(() => this.view.value.length === 0);
153
+ }), this.empty = e(() => this.view.value.length === 0);
156
154
  }
157
155
  get view() {
158
156
  return this.sorted;
@@ -224,14 +222,14 @@ var C = class {
224
222
  this.#t.value = e;
225
223
  }
226
224
  };
227
- function ee(e) {
228
- return new C(e);
225
+ function m(e) {
226
+ return new p(e);
229
227
  }
230
228
  /**
231
229
  * Validates a JSON string → typed option array.
232
230
  * Filters out entries missing `value` or `label` strings.
233
231
  */
234
- function w(e, t) {
232
+ function h(e, t) {
235
233
  try {
236
234
  let t = JSON.parse(e);
237
235
  return Array.isArray(t) ? t.filter((e) => typeof e == "object" && !!e && typeof e.value == "string" && typeof e.label == "string") : [];
@@ -244,7 +242,7 @@ function w(e, t) {
244
242
  * Aborts any in-flight request before starting a new one.
245
243
  * Returns the new AbortController for the caller to store.
246
244
  */
247
- async function T(e, t, n, r) {
245
+ async function g(e, t, n, r) {
248
246
  t?.abort();
249
247
  let i = new AbortController();
250
248
  try {
@@ -265,14 +263,14 @@ async function T(e, t, n, r) {
265
263
  * @attr {string} type - Form button type: "button" | "submit" | "reset"
266
264
  * @fires ui-press - Fired on activation (click, Enter, Space)
267
265
  */
268
- var te = class extends x(_) {
266
+ var _ = class extends d(s) {
269
267
  static observedAttributes = ["disabled", "type"];
270
268
  #e;
271
269
  #t;
272
270
  #n;
273
271
  #r;
274
272
  constructor() {
275
- super(), this.#e = this.attachInternals(), this.#e.role = "button", this.#t = y(this, "disabled", { type: "boolean" }), this.#n = y(this, "type", {
273
+ super(), this.#e = this.attachInternals(), this.#e.role = "button", this.#t = l(this, "disabled", { type: "boolean" }), this.#n = l(this, "type", {
276
274
  type: "string",
277
275
  initial: "button"
278
276
  });
@@ -290,13 +288,13 @@ var te = class extends x(_) {
290
288
  this.#n.set(e);
291
289
  }
292
290
  attributeChangedCallback(e, t, n) {
293
- t !== n && (b({
291
+ t !== n && (u({
294
292
  disabled: this.#t,
295
293
  type: this.#n
296
294
  }, e, n), super.attributeChangedCallback?.(e, t, n));
297
295
  }
298
296
  setup() {
299
- super.setup(), this.#r = new s(this, { disabled: () => this.disabled }), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.addEffect(v(this, this.#t.signal, this.#e, { manageTabindex: !0 })), this.addEventListener("ui-press", this.#i);
297
+ super.setup(), this.#r = new i(this, { disabled: () => this.disabled }), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.addEffect(c(this, this.#t.signal, this.#e, { manageTabindex: !0 })), this.addEventListener("ui-press", this.#i);
300
298
  }
301
299
  teardown() {
302
300
  this.removeEventListener("ui-press", this.#i), this.#r.destroy(), super.teardown();
@@ -314,138 +312,7 @@ var te = class extends x(_) {
314
312
  onFormReset() {
315
313
  this.#t.signal.value = this.hasAttribute("disabled");
316
314
  }
317
- }, ne = class extends x(_) {
318
- static observedAttributes = [
319
- "value",
320
- "placeholder",
321
- "disabled",
322
- "readonly",
323
- "required",
324
- "pattern"
325
- ];
326
- #e;
327
- #t = t(!1);
328
- #n = t(!1);
329
- #r = t("");
330
- #i = "";
331
- #a = null;
332
- #o = [];
333
- constructor() {
334
- super(), this.#e = this.attachInternals(), this.#e.role = "textbox";
335
- }
336
- get value() {
337
- return this.#s();
338
- }
339
- set value(e) {
340
- this.#c(e), this.#r.value = e, this.#e.setFormValue(e), this.#l();
341
- }
342
- #s() {
343
- let e = "";
344
- for (let t of this.childNodes) t.nodeType === Node.TEXT_NODE && (e += t.textContent);
345
- return e;
346
- }
347
- #c(e) {
348
- for (let e of [...this.childNodes]) e.nodeType === Node.TEXT_NODE && e.remove();
349
- e && this.append(e);
350
- }
351
- get placeholder() {
352
- return this.getAttribute("placeholder") ?? "";
353
- }
354
- set placeholder(e) {
355
- this.setAttribute("placeholder", e);
356
- }
357
- get name() {
358
- return this.getAttribute("name") ?? "";
359
- }
360
- set name(e) {
361
- this.setAttribute("name", e);
362
- }
363
- get disabled() {
364
- return this.#t.value;
365
- }
366
- set disabled(e) {
367
- this.#t.value = e, this.toggleAttribute("disabled", e);
368
- }
369
- get readOnly() {
370
- return this.hasAttribute("readonly");
371
- }
372
- set readOnly(e) {
373
- this.toggleAttribute("readonly", e), this.setAttribute("contenteditable", e ? "false" : "plaintext-only");
374
- }
375
- get required() {
376
- return this.#n.value;
377
- }
378
- set required(e) {
379
- this.#n.value = e, this.toggleAttribute("required", e);
380
- }
381
- attributeChangedCallback(e, t, n) {
382
- if (t !== n) {
383
- switch (e) {
384
- case "value":
385
- this.#c(n ?? ""), this.#r.value = n ?? "", this.#e.setFormValue(n ?? ""), this.#l();
386
- break;
387
- case "disabled":
388
- this.#t.value = n !== null, this.setAttribute("contenteditable", n !== null || this.hasAttribute("readonly") ? "false" : "plaintext-only");
389
- break;
390
- case "readonly":
391
- this.setAttribute("contenteditable", n !== null || this.#t.value ? "false" : "plaintext-only");
392
- break;
393
- case "required":
394
- this.#n.value = n !== null;
395
- break;
396
- case "pattern":
397
- this.#a = n;
398
- break;
399
- }
400
- super.attributeChangedCallback?.(e, t, n);
401
- }
402
- }
403
- setup() {
404
- super.setup(), this.hasAttribute("contenteditable") || this.setAttribute("contenteditable", "plaintext-only"), this.#o = [...this.querySelectorAll(":scope > [slot]")];
405
- for (let e of this.#o) e.setAttribute("contenteditable", "false");
406
- this.#n.value = this.hasAttribute("required"), this.#a = this.getAttribute("pattern"), this.#i = this.getAttribute("value") ?? this.#s(), this.#r.value = this.#s(), this.#l(), this.addEffect(v(this, this.#t, this.#e, { manageTabindex: !0 })), this.addEffect(() => {
407
- let e = this.#r.value;
408
- this.#n.value && e === "" ? this.#e.setValidity({ valueMissing: !0 }, "Please fill out this field.", this) : this.#a !== null && e !== "" && !RegExp(`^(?:${this.#a})$`).test(e) ? this.#e.setValidity({ patternMismatch: !0 }, "Please match the requested format.", this) : this.#e.setValidity({});
409
- }), this.addEventListener("input", this.#u), this.addEventListener("blur", this.#d);
410
- }
411
- teardown() {
412
- this.removeEventListener("input", this.#u), this.removeEventListener("blur", this.#d), super.teardown();
413
- }
414
- select() {
415
- let e = document.createRange();
416
- e.selectNodeContents(this);
417
- let t = window.getSelection();
418
- t?.removeAllRanges(), t?.addRange(e);
419
- }
420
- onFormDisabled(e) {
421
- this.#t.value = e, this.setAttribute("contenteditable", e || this.hasAttribute("readonly") ? "false" : "plaintext-only");
422
- }
423
- onFormReset() {
424
- this.#c(this.#i), this.#r.value = this.#i, this.#e.setFormValue(this.#i), this.#l(), this.#t.value = this.hasAttribute("disabled"), this.setAttribute("contenteditable", this.#t.value || this.hasAttribute("readonly") ? "false" : "plaintext-only");
425
- }
426
- onFormStateRestore(e) {
427
- this.value = typeof e == "string" ? e : "";
428
- }
429
- #l() {
430
- this.#s().trim() === "" ? this.#e.states.add("empty") : this.#e.states.delete("empty");
431
- }
432
- #u = () => {
433
- for (let e of this.#o) e.parentNode || this.appendChild(e);
434
- let e = this.#s();
435
- this.#r.value = e, this.#e.setFormValue(e), this.#l(), this.dispatchEvent(new CustomEvent("ui-input", {
436
- bubbles: !0,
437
- composed: !0,
438
- detail: { value: e }
439
- }));
440
- };
441
- #d = () => {
442
- this.dispatchEvent(new CustomEvent("ui-change", {
443
- bubbles: !0,
444
- composed: !0,
445
- detail: { value: this.#s() }
446
- }));
447
- };
448
- }, re = class extends _ {
315
+ }, v = class extends s {
449
316
  static observedAttributes = [
450
317
  "disabled",
451
318
  "multiple",
@@ -454,10 +321,10 @@ var te = class extends x(_) {
454
321
  #e;
455
322
  #t;
456
323
  #n = t(!1);
457
- #r = new C();
324
+ #r = new p();
458
325
  #i;
459
326
  constructor() {
460
- super(), this.#e = this.attachInternals(), this.#e.role = "listbox", this.#t = y(this, "disabled", { type: "boolean" });
327
+ super(), this.#e = this.attachInternals(), this.#e.role = "listbox", this.#t = l(this, "disabled", { type: "boolean" });
461
328
  }
462
329
  get virtualFocus() {
463
330
  return this.hasAttribute("virtual-focus");
@@ -488,7 +355,7 @@ var te = class extends x(_) {
488
355
  }
489
356
  attributeChangedCallback(e, t, n) {
490
357
  if (t !== n) {
491
- if (b({ disabled: this.#t }, e, n)) {
358
+ if (u({ disabled: this.#t }, e, n)) {
492
359
  super.attributeChangedCallback?.(e, t, n);
493
360
  return;
494
361
  }
@@ -519,7 +386,7 @@ var te = class extends x(_) {
519
386
  },
520
387
  addEffect: (e) => this.addEffect(e),
521
388
  deferChildren: (e) => this.deferChildren(e)
522
- }), this.addEffect(v(this, this.#t.signal, this.#e)), this.deferChildren(() => {
389
+ }), this.addEffect(c(this, this.#t.signal, this.#e)), this.deferChildren(() => {
523
390
  this.addEffect(() => {
524
391
  let e = this.#r.value.value, t = this.#r.selected.value, n = this.#n.value, r = this.querySelectorAll(":scope ui-option");
525
392
  for (let i of r) {
@@ -527,12 +394,12 @@ var te = class extends x(_) {
527
394
  i.setAttribute("aria-selected", a ? "true" : "false");
528
395
  }
529
396
  }), this.addEffect(() => {
530
- let t = this.#r.activeIndex.value, n = this.querySelectorAll(":scope ui-option:not([disabled])");
531
- for (let r = 0; r < n.length; r++) {
532
- let i = n[r], a = r === t;
533
- i.toggleAttribute("active", a), a && (i.id ||= e("opt"), this.setAttribute("aria-activedescendant", i.id));
397
+ let e = this.#r.activeIndex.value, t = this.querySelectorAll(":scope ui-option:not([disabled])");
398
+ for (let n = 0; n < t.length; n++) {
399
+ let i = t[n], a = n === e;
400
+ i.toggleAttribute("active", a), a && (i.id ||= r("opt"), this.setAttribute("aria-activedescendant", i.id));
534
401
  }
535
- (t < 0 || t >= n.length) && this.removeAttribute("aria-activedescendant");
402
+ (e < 0 || e >= t.length) && this.removeAttribute("aria-activedescendant");
536
403
  });
537
404
  });
538
405
  }
@@ -543,7 +410,7 @@ var te = class extends x(_) {
543
410
  let e = this.#r.activeIndex.value;
544
411
  return this.querySelectorAll(":scope ui-option:not([disabled])")[e] ?? null;
545
412
  }
546
- }, ie = class extends _ {
413
+ }, y = class extends s {
547
414
  static observedAttributes = [
548
415
  "value",
549
416
  "disabled",
@@ -554,7 +421,7 @@ var te = class extends x(_) {
554
421
  #n;
555
422
  #r = t("");
556
423
  constructor() {
557
- super(), this.#e = this.attachInternals(), this.#e.role = "option", this.#n = y(this, "disabled", { type: "boolean" });
424
+ super(), this.#e = this.attachInternals(), this.#e.role = "option", this.#n = l(this, "disabled", { type: "boolean" });
558
425
  }
559
426
  get value() {
560
427
  return this.#t.value;
@@ -576,7 +443,7 @@ var te = class extends x(_) {
576
443
  }
577
444
  attributeChangedCallback(e, t, n) {
578
445
  if (t !== n) {
579
- if (b({ disabled: this.#n }, e, n)) {
446
+ if (u({ disabled: this.#n }, e, n)) {
580
447
  super.attributeChangedCallback?.(e, t, n);
581
448
  return;
582
449
  }
@@ -592,7 +459,7 @@ var te = class extends x(_) {
592
459
  }
593
460
  }
594
461
  setup() {
595
- super.setup(), this.addEffect(v(this, this.#n.signal, this.#e)), this.addEventListener("click", this.#i);
462
+ super.setup(), this.addEffect(c(this, this.#n.signal, this.#e)), this.addEventListener("click", this.#i);
596
463
  }
597
464
  teardown() {
598
465
  this.removeEventListener("click", this.#i), super.teardown();
@@ -607,165 +474,75 @@ var te = class extends x(_) {
607
474
  }
608
475
  }));
609
476
  };
610
- }, ae = class extends _ {
611
- constructor() {
612
- super();
613
- let e = this.attachInternals();
614
- e.role = "presentation";
615
- }
616
- setup() {
617
- super.setup(), this.id ||= e("ogh");
618
- let t = this.closest("ui-option-group");
619
- t && t.setAttribute("aria-labelledby", this.id);
620
- }
621
- }, oe = class extends _ {
622
- constructor() {
623
- super();
624
- let e = this.attachInternals();
625
- e.role = "group";
626
- }
627
- }, se = class extends _ {
628
- static observedAttributes = ["disabled"];
629
- #e;
630
- #t = new C({ initialActiveIndex: 0 });
631
- #n = t(!1);
632
- constructor() {
633
- super(), this.#e = this.attachInternals(), this.#e.role = "search";
634
- }
635
- get store() {
636
- return this.#t;
637
- }
638
- get disabled() {
639
- return this.#n.value;
477
+ }, b = class {
478
+ open = t(!1);
479
+ value = t(null);
480
+ label = t("");
481
+ toggle() {
482
+ this.open.value = !this.open.value;
640
483
  }
641
- set disabled(e) {
642
- this.#n.value = e, this.toggleAttribute("disabled", e);
484
+ show() {
485
+ this.open.value = !0;
643
486
  }
644
- attributeChangedCallback(e, t, n) {
645
- t !== n && (e === "disabled" && (this.#n.value = n !== null), super.attributeChangedCallback?.(e, t, n));
487
+ hide() {
488
+ this.open.value = !1;
646
489
  }
647
- setup() {
648
- super.setup(), this.addEffect(v(this, this.#n, this.#e)), this.addEventListener("ui-input", this.#i), this.addEventListener("ui-select", this.#a), this.addEventListener("keydown", this.#o), this.deferChildren(() => {
649
- this.addEffect(() => {
650
- let e = this.#t.query.value.toLowerCase().trim(), t = this.querySelectorAll("ui-command-item");
651
- for (let n of t) {
652
- let t = !e || n.searchText.includes(e);
653
- n.toggleAttribute("hidden", !t);
654
- }
655
- }), this.addEffect(() => {
656
- this.#t.query.value;
657
- let t = this.#t.activeIndex.value, n = this.#r(), r = this.querySelector("ui-command-list");
658
- for (let e = 0; e < n.length; e++) n[e].toggleAttribute("active", e === t);
659
- let i = n[t];
660
- i && r ? (i.id ||= e("cmd"), r.setAttribute("aria-activedescendant", i.id), i.scrollIntoView({ block: "nearest" })) : r?.removeAttribute("aria-activedescendant");
661
- }), this.addEffect(() => {
662
- this.#t.query.value;
663
- let e = this.#r(), t = this.querySelector("ui-command-empty");
664
- t && t.toggleAttribute("hidden", e.length > 0);
665
- });
490
+ select(e, t) {
491
+ n(() => {
492
+ this.value.value = e, this.label.value = t, this.open.value = !1;
666
493
  });
667
494
  }
668
- teardown() {
669
- this.removeEventListener("ui-input", this.#i), this.removeEventListener("ui-select", this.#a), this.removeEventListener("keydown", this.#o), super.teardown();
670
- }
671
- #r() {
672
- return [...this.querySelectorAll("ui-command-item:not([hidden]):not([disabled])")];
673
- }
674
- #i = (e) => {
675
- if (this.#n.value) return;
676
- let t = e.detail;
677
- this.#t.setQuery(t.value, 0);
678
- };
679
- #a = (e) => {
680
- if (this.#n.value) return;
681
- let t = e.detail;
682
- this.dispatchEvent(new CustomEvent("ui-change", {
683
- bubbles: !0,
684
- composed: !0,
685
- detail: t
686
- }));
687
- };
688
- #o = (e) => {
689
- if (this.#n.value) return;
690
- let t = this.#r();
691
- if (!(t.length === 0 && e.key !== "Escape")) switch (e.key) {
692
- case "ArrowDown":
693
- e.preventDefault(), this.#t.moveActive(1, t.length);
694
- break;
695
- case "ArrowUp":
696
- e.preventDefault(), this.#t.moveActive(-1, t.length);
697
- break;
698
- case "Home":
699
- e.preventDefault(), this.#t.activeIndex.value = 0;
700
- break;
701
- case "End":
702
- e.preventDefault(), this.#t.activeIndex.value = Math.max(0, t.length - 1);
703
- break;
704
- case "Enter": {
705
- e.preventDefault();
706
- let n = t[this.#t.activeIndex.value];
707
- n && n.click();
708
- break;
709
- }
710
- case "Escape":
711
- this.dispatchEvent(new CustomEvent("ui-dismiss", {
712
- bubbles: !0,
713
- composed: !0
714
- }));
715
- break;
716
- }
717
- };
718
- }, ce = class extends _ {
719
- #e = null;
720
- setup() {
721
- super.setup(), this.deferChildren(() => {
722
- this.#e = this.querySelector("input"), this.#e && this.#e.addEventListener("input", this.#t);
495
+ reset() {
496
+ n(() => {
497
+ this.open.value = !1, this.value.value = null, this.label.value = "";
723
498
  });
724
499
  }
725
- teardown() {
726
- this.#e && this.#e.removeEventListener("input", this.#t), this.#e = null, super.teardown();
727
- }
728
- get inputElement() {
729
- return this.#e;
730
- }
731
- focus(e) {
732
- this.#e?.focus(e);
733
- }
734
- clear() {
735
- this.#e && (this.#e.value = "", this.#t());
736
- }
737
- #t = () => {
738
- let e = this.#e?.value ?? "";
739
- this.dispatchEvent(new CustomEvent("ui-input", {
740
- bubbles: !0,
741
- composed: !0,
742
- detail: { value: e }
743
- }));
744
- };
745
- }, le = class extends _ {
746
- constructor() {
747
- super();
748
- let e = this.attachInternals();
749
- e.role = "listbox";
750
- }
751
- }, ue = class extends _ {
500
+ }, x = class extends d(s) {
752
501
  static observedAttributes = [
753
502
  "value",
754
503
  "disabled",
755
- "keywords"
504
+ "name",
505
+ "options",
506
+ "src",
507
+ "placeholder",
508
+ "required"
756
509
  ];
757
510
  #e;
758
- #t = t("");
511
+ #t = new b();
759
512
  #n = t(!1);
760
- #r = t("");
513
+ #r = t(!1);
514
+ #i;
515
+ #a = t([]);
516
+ #o = t(null);
517
+ #s = t("");
518
+ #c = !1;
519
+ #l = null;
520
+ #u = null;
521
+ #d = null;
522
+ #f = null;
523
+ #p = "";
761
524
  constructor() {
762
- super(), this.#e = this.attachInternals(), this.#e.role = "option";
525
+ super(), this.#e = this.attachInternals();
526
+ }
527
+ get controller() {
528
+ return this.#t;
763
529
  }
764
530
  get value() {
765
- return this.#t.value;
531
+ return this.#t.value.value;
766
532
  }
767
533
  set value(e) {
768
- this.#t.value = e, this.getAttribute("value") !== e && this.setAttribute("value", e);
534
+ if (e === null) {
535
+ this.#t.reset();
536
+ return;
537
+ }
538
+ let t = this.querySelector(`ui-option[value="${CSS.escape(e)}"]`), n = t?.getAttribute("label") ?? t?.textContent?.trim() ?? e;
539
+ this.#t.select(e, n);
540
+ }
541
+ get name() {
542
+ return this.getAttribute("name") ?? "";
543
+ }
544
+ set name(e) {
545
+ this.setAttribute("name", e);
769
546
  }
770
547
  get disabled() {
771
548
  return this.#n.value;
@@ -773,3682 +550,247 @@ var te = class extends x(_) {
773
550
  set disabled(e) {
774
551
  this.#n.value = e, this.toggleAttribute("disabled", e);
775
552
  }
776
- get keywords() {
553
+ get required() {
777
554
  return this.#r.value;
778
555
  }
779
- set keywords(e) {
780
- this.#r.value = e, e ? this.getAttribute("keywords") !== e && this.setAttribute("keywords", e) : this.removeAttribute("keywords");
556
+ set required(e) {
557
+ this.#r.value = e, this.toggleAttribute("required", e);
781
558
  }
782
- get label() {
783
- return this.textContent?.trim() || "";
559
+ get options() {
560
+ return this.#a.value;
561
+ }
562
+ set options(e) {
563
+ this.#a.value = e, this.setAttribute("options", JSON.stringify(e));
564
+ }
565
+ get src() {
566
+ return this.#o.value;
567
+ }
568
+ set src(e) {
569
+ this.#o.value = e, e == null ? this.removeAttribute("src") : this.setAttribute("src", e);
570
+ }
571
+ get placeholder() {
572
+ return this.#s.value;
573
+ }
574
+ set placeholder(e) {
575
+ this.#s.value = e, e ? this.setAttribute("placeholder", e) : this.removeAttribute("placeholder");
576
+ }
577
+ #m(e) {
578
+ return h(e, "ui-select");
579
+ }
580
+ async #h(e) {
581
+ this.#l = await g(e, this.#l, this.#a, "ui-select");
582
+ }
583
+ #g() {
584
+ let e = document.createElement("ui-button");
585
+ e.setAttribute("justify", "spread");
586
+ let t = document.createElement("span");
587
+ t.setAttribute("slot", "label"), t.textContent = this.#s.value || "\xA0", e.appendChild(t);
588
+ let n = document.createElement("ui-icon");
589
+ n.setAttribute("name", "caret-up-down"), n.setAttribute("slot", "trailing"), e.appendChild(n);
590
+ let r = document.createElement("ui-listbox");
591
+ r.setAttribute("popover", "manual"), this.appendChild(e), this.appendChild(r);
784
592
  }
785
- get searchText() {
786
- return `${this.label} ${this.#t.value} ${this.#r.value}`.toLowerCase();
593
+ #_(e) {
594
+ let t = this.#u;
595
+ if (t) {
596
+ for (; t.firstChild;) t.removeChild(t.firstChild);
597
+ for (let n of e) {
598
+ let e = document.createElement("ui-option");
599
+ e.setAttribute("value", n.value), e.setAttribute("label", n.label), e.textContent = n.label, n.disabled && e.setAttribute("disabled", ""), t.appendChild(e);
600
+ }
601
+ }
787
602
  }
788
603
  attributeChangedCallback(e, t, n) {
789
604
  if (t !== n) {
790
605
  switch (e) {
791
606
  case "value":
792
- this.#t.value = n ?? "";
607
+ if (n !== null) {
608
+ let e = this.querySelector(`ui-option[value="${CSS.escape(n)}"]`), t = e?.getAttribute("label") ?? e?.textContent?.trim() ?? n;
609
+ this.#t.select(n, t);
610
+ } else this.#t.reset();
793
611
  break;
794
612
  case "disabled":
795
613
  this.#n.value = n !== null;
796
614
  break;
797
- case "keywords":
798
- this.#r.value = n ?? "";
615
+ case "required":
616
+ this.#r.value = n !== null;
799
617
  break;
800
- }
801
- super.attributeChangedCallback?.(e, t, n);
802
- }
803
- }
804
- setup() {
805
- super.setup(), this.addEffect(v(this, this.#n, this.#e)), this.addEventListener("click", this.#i);
806
- }
807
- teardown() {
808
- this.removeEventListener("click", this.#i), super.teardown();
809
- }
810
- #i = () => {
811
- this.#n.value || this.dispatchEvent(new CustomEvent("ui-select", {
812
- bubbles: !0,
813
- composed: !0,
814
- detail: {
815
- value: this.#t.value,
816
- label: this.label
817
- }
818
- }));
819
- };
820
- }, E = class extends _ {
821
- constructor() {
822
- super();
823
- let e = this.attachInternals();
824
- e.role = "group";
825
- }
826
- setup() {
827
- super.setup();
828
- let t = this.querySelector("[slot=\"heading\"]");
829
- t && (t.id ||= e("cg"), this.setAttribute("aria-labelledby", t.id));
830
- }
831
- }, D = class extends _ {}, O = class extends x(_) {
832
- static observedAttributes = [
833
- "checked",
834
- "indeterminate",
835
- "disabled",
836
- "name",
837
- "value",
838
- "required"
839
- ];
840
- #e;
841
- #t;
842
- #n;
843
- #r;
844
- #i = t(!1);
845
- #a = !1;
846
- #o;
847
- constructor() {
848
- super(), this.#e = this.attachInternals(), this.#e.role = "checkbox", this.#t = y(this, "checked", { type: "boolean" }), this.#n = y(this, "indeterminate", { type: "boolean" }), this.#r = y(this, "disabled", { type: "boolean" });
849
- }
850
- get checked() {
851
- return this.#t.value;
852
- }
853
- set checked(e) {
854
- this.#t.set(e);
855
- }
856
- get indeterminate() {
857
- return this.#n.value;
858
- }
859
- set indeterminate(e) {
860
- this.#n.set(e);
861
- }
862
- get disabled() {
863
- return this.#r.value;
864
- }
865
- set disabled(e) {
866
- this.#r.set(e);
867
- }
868
- get name() {
869
- return this.getAttribute("name") ?? "";
870
- }
871
- set name(e) {
872
- this.setAttribute("name", e);
873
- }
874
- get value() {
875
- return this.getAttribute("value") ?? "on";
876
- }
877
- set value(e) {
878
- this.setAttribute("value", e);
879
- }
880
- get required() {
881
- return this.#i.value;
882
- }
883
- set required(e) {
884
- this.#i.value = e, this.toggleAttribute("required", e);
885
- }
886
- attributeChangedCallback(e, t, n) {
887
- if (t !== n) {
888
- if (b({
889
- checked: this.#t,
890
- indeterminate: this.#n,
891
- disabled: this.#r
892
- }, e, n)) {
893
- super.attributeChangedCallback?.(e, t, n);
894
- return;
895
- }
896
- e === "required" && (this.#i.value = n !== null), super.attributeChangedCallback?.(e, t, n);
897
- }
898
- }
899
- setup() {
900
- super.setup(), this.#o = new s(this, { disabled: () => this.disabled }), this.#a = this.hasAttribute("checked"), this.#i.value = this.hasAttribute("required"), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.addEffect(v(this, this.#r.signal, this.#e, { manageTabindex: !0 })), this.addEffect(() => {
901
- let e = this.#t.value, t = this.#n.value ? "mixed" : e ? "true" : "false";
902
- this.setAttribute("aria-checked", t), this.#e.setFormValue(e ? this.value : null);
903
- }), this.addEffect(() => {
904
- this.#i.value ? this.setAttribute("aria-required", "true") : this.removeAttribute("aria-required");
905
- }), this.addEffect(() => {
906
- this.#i.value && !this.#t.value ? this.#e.setValidity({ valueMissing: !0 }, "Please check this box if you want to proceed.", this) : this.#e.setValidity({});
907
- }), this.addEventListener("ui-press", this.#s);
908
- }
909
- teardown() {
910
- this.removeEventListener("ui-press", this.#s), this.#o.destroy(), super.teardown();
911
- }
912
- onFormDisabled(e) {
913
- this.#r.signal.value = e;
914
- }
915
- onFormReset() {
916
- this.#t.set(this.#a), this.#n.set(!1);
917
- }
918
- onFormStateRestore(e) {
919
- this.checked = typeof e == "string" && e === this.value;
920
- }
921
- #s = () => {
922
- this.#r.value || (this.#n.value ? (this.indeterminate = !1, this.checked = !0) : this.checked = !this.#t.value, this.dispatchEvent(new CustomEvent("ui-change", {
923
- bubbles: !0,
924
- composed: !0,
925
- detail: {
926
- checked: this.#t.value,
927
- value: this.value
928
- }
929
- })));
930
- };
931
- }, k = class extends x(_) {
932
- static observedAttributes = [
933
- "checked",
934
- "disabled",
935
- "name",
936
- "value",
937
- "required"
938
- ];
939
- #e;
940
- #t;
941
- #n;
942
- #r;
943
- #i = !1;
944
- #a;
945
- constructor() {
946
- super(), this.#e = this.attachInternals(), this.#e.role = "switch", this.#t = y(this, "checked", { type: "boolean" }), this.#n = y(this, "disabled", { type: "boolean" }), this.#r = y(this, "required", { type: "boolean" });
947
- }
948
- get checked() {
949
- return this.#t.value;
950
- }
951
- set checked(e) {
952
- this.#t.set(e);
953
- }
954
- get disabled() {
955
- return this.#n.value;
956
- }
957
- set disabled(e) {
958
- this.#n.set(e);
959
- }
960
- get name() {
961
- return this.getAttribute("name") ?? "";
962
- }
963
- set name(e) {
964
- this.setAttribute("name", e);
965
- }
966
- get value() {
967
- return this.getAttribute("value") ?? "on";
968
- }
969
- set value(e) {
970
- this.setAttribute("value", e);
971
- }
972
- get required() {
973
- return this.#r.value;
974
- }
975
- set required(e) {
976
- this.#r.set(e);
977
- }
978
- attributeChangedCallback(e, t, n) {
979
- t !== n && (b({
980
- checked: this.#t,
981
- disabled: this.#n,
982
- required: this.#r
983
- }, e, n), super.attributeChangedCallback?.(e, t, n));
984
- }
985
- setup() {
986
- super.setup(), this.#a = new s(this, { disabled: () => this.disabled }), this.#i = this.hasAttribute("checked"), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.addEffect(v(this, this.#n.signal, this.#e, { manageTabindex: !0 })), this.addEffect(() => {
987
- let e = this.#t.value;
988
- this.setAttribute("aria-checked", e ? "true" : "false"), this.#e.setFormValue(e ? this.value : null);
989
- }), this.addEffect(() => {
990
- this.#r.value && !this.#t.value ? this.#e.setValidity({ valueMissing: !0 }, "Please toggle this switch.", this) : this.#e.setValidity({});
991
- }), this.addEventListener("ui-press", this.#o);
992
- }
993
- teardown() {
994
- this.removeEventListener("ui-press", this.#o), this.#a.destroy(), super.teardown();
995
- }
996
- onFormDisabled(e) {
997
- this.#n.signal.value = e;
998
- }
999
- onFormReset() {
1000
- this.#t.set(this.#i);
1001
- }
1002
- onFormStateRestore(e) {
1003
- this.checked = typeof e == "string" && e === this.value;
1004
- }
1005
- #o = () => {
1006
- this.#n.value || (this.checked = !this.#t.value, this.dispatchEvent(new CustomEvent("ui-change", {
1007
- bubbles: !0,
1008
- composed: !0,
1009
- detail: {
1010
- checked: this.#t.value,
1011
- value: this.value
1012
- }
1013
- })));
1014
- };
1015
- }, A = class extends _ {
1016
- static observedAttributes = ["disabled"];
1017
- #e;
1018
- #t;
1019
- #n;
1020
- constructor() {
1021
- super(), this.#e = this.attachInternals(), this.#e.role = "radio", this.#t = y(this, "disabled", { type: "boolean" });
1022
- }
1023
- get value() {
1024
- return this.getAttribute("value") ?? "";
1025
- }
1026
- set value(e) {
1027
- this.setAttribute("value", e);
1028
- }
1029
- get disabled() {
1030
- return this.#t.value;
1031
- }
1032
- set disabled(e) {
1033
- this.#t.set(e);
1034
- }
1035
- get label() {
1036
- return this.getAttribute("label") ?? this.textContent?.trim() ?? "";
1037
- }
1038
- attributeChangedCallback(e, t, n) {
1039
- t !== n && (b({ disabled: this.#t }, e, n), super.attributeChangedCallback?.(e, t, n));
1040
- }
1041
- setup() {
1042
- super.setup(), this.setAttribute("aria-checked", "false"), this.#n = new s(this, { disabled: () => this.disabled }), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "-1"), this.addEffect(v(this, this.#t.signal, this.#e)), this.addEventListener("click", this.#r), this.addEventListener("keydown", this.#i);
1043
- }
1044
- teardown() {
1045
- this.removeEventListener("click", this.#r), this.removeEventListener("keydown", this.#i), this.#n.destroy(), super.teardown();
1046
- }
1047
- #r = () => {
1048
- this.disabled || this.dispatchEvent(new CustomEvent("ui-select", {
1049
- bubbles: !0,
1050
- composed: !0,
1051
- detail: {
1052
- value: this.value,
1053
- label: this.label
1054
- }
1055
- }));
1056
- };
1057
- #i = (e) => {
1058
- e.key !== "Enter" && e.key !== " " || this.disabled || (e.preventDefault(), this.dispatchEvent(new CustomEvent("ui-select", {
1059
- bubbles: !0,
1060
- composed: !0,
1061
- detail: {
1062
- value: this.value,
1063
- label: this.label
1064
- }
1065
- })));
1066
- };
1067
- }, j = class extends x(_) {
1068
- static observedAttributes = [
1069
- "value",
1070
- "disabled",
1071
- "name",
1072
- "required",
1073
- "orientation"
1074
- ];
1075
- #e;
1076
- #t = t(!1);
1077
- #n = t(!1);
1078
- #r = null;
1079
- #i;
1080
- constructor() {
1081
- super(), this.#e = this.attachInternals(), this.#e.role = "radiogroup";
1082
- }
1083
- get value() {
1084
- return this.#i?.listValue.value ?? null;
1085
- }
1086
- set value(e) {
1087
- this.#i && (this.#i.listValue.value = e), e === null ? this.removeAttribute("value") : this.setAttribute("value", e);
1088
- }
1089
- get disabled() {
1090
- return this.#t.value;
1091
- }
1092
- set disabled(e) {
1093
- this.#t.value = e, this.toggleAttribute("disabled", e);
1094
- }
1095
- get name() {
1096
- return this.getAttribute("name") ?? "";
1097
- }
1098
- set name(e) {
1099
- this.setAttribute("name", e);
1100
- }
1101
- get required() {
1102
- return this.#n.value;
1103
- }
1104
- set required(e) {
1105
- this.#n.value = e, this.toggleAttribute("required", e);
1106
- }
1107
- attributeChangedCallback(e, t, n) {
1108
- if (t !== n) {
1109
- switch (e) {
1110
- case "value":
1111
- this.#i && (this.#i.listValue.value = n);
1112
- break;
1113
- case "disabled":
1114
- this.#t.value = n !== null;
1115
- break;
1116
- case "required":
1117
- this.#n.value = n !== null;
1118
- break;
1119
- case "orientation":
1120
- this.#i && (this.#i.rovingFocus.orientation = n ?? "vertical");
1121
- break;
1122
- }
1123
- super.attributeChangedCallback?.(e, t, n);
1124
- }
1125
- }
1126
- setup() {
1127
- super.setup(), this.#r = this.getAttribute("value"), this.#n.value = this.hasAttribute("required"), this.#i = new o(this, {
1128
- itemSelector: ":scope ui-radio:not([disabled])",
1129
- ariaAttr: "aria-checked",
1130
- orientation: "vertical",
1131
- onChildSelect: (e) => {
1132
- this.#i.listValue.value = e.value, this.setAttribute("value", e.value), this.dispatchEvent(new CustomEvent("ui-change", {
1133
- bubbles: !0,
1134
- composed: !0,
1135
- detail: e
1136
- }));
1137
- },
1138
- addEffect: (e) => this.addEffect(e),
1139
- deferChildren: (e) => this.deferChildren(e)
1140
- });
1141
- let e = this.getAttribute("value");
1142
- e !== null && (this.#i.listValue.value = e), this.addEffect(v(this, this.#t, this.#e)), this.addEffect(() => {
1143
- let e = this.#t.value, t = this.querySelectorAll("ui-radio");
1144
- for (let n of t) n.toggleAttribute("disabled", e);
1145
- }), this.addEffect(() => {
1146
- this.#n.value ? this.setAttribute("aria-required", "true") : this.removeAttribute("aria-required");
1147
- }), this.addEffect(() => {
1148
- let e = this.#i.listValue.value;
1149
- this.#e.setFormValue(e);
1150
- }), this.addEffect(() => {
1151
- let e = this.#i.listValue.value;
1152
- this.#n.value && (e === null || e === "") ? this.#e.setValidity({ valueMissing: !0 }, "Please select one of these options.", this) : this.#e.setValidity({});
1153
- });
1154
- }
1155
- teardown() {
1156
- this.#i.destroy(), super.teardown();
1157
- }
1158
- onFormDisabled(e) {
1159
- this.#t.value = e;
1160
- }
1161
- onFormReset() {
1162
- this.#i && (this.#i.listValue.value = this.#r), this.#r === null ? this.removeAttribute("value") : this.setAttribute("value", this.#r);
1163
- }
1164
- onFormStateRestore(e) {
1165
- typeof e == "string" && e && (this.value = e);
1166
- }
1167
- }, M = class extends x(_) {
1168
- static observedAttributes = [
1169
- "value",
1170
- "disabled",
1171
- "name",
1172
- "required"
1173
- ];
1174
- #e;
1175
- #t = t(!1);
1176
- #n = t(!1);
1177
- #r = null;
1178
- #i;
1179
- constructor() {
1180
- super(), this.#e = this.attachInternals(), this.#e.role = "radiogroup";
1181
- }
1182
- get value() {
1183
- return this.#i?.listValue.value ?? null;
1184
- }
1185
- set value(e) {
1186
- this.#i && (this.#i.listValue.value = e), e === null ? this.removeAttribute("value") : this.setAttribute("value", e);
1187
- }
1188
- get disabled() {
1189
- return this.#t.value;
1190
- }
1191
- set disabled(e) {
1192
- this.#t.value = e, this.toggleAttribute("disabled", e);
1193
- }
1194
- get name() {
1195
- return this.getAttribute("name") ?? "";
1196
- }
1197
- set name(e) {
1198
- this.setAttribute("name", e);
1199
- }
1200
- get required() {
1201
- return this.#n.value;
1202
- }
1203
- set required(e) {
1204
- this.#n.value = e, this.toggleAttribute("required", e);
1205
- }
1206
- attributeChangedCallback(e, t, n) {
1207
- if (t !== n) {
1208
- switch (e) {
1209
- case "value":
1210
- this.#i && (this.#i.listValue.value = n);
1211
- break;
1212
- case "disabled":
1213
- this.#t.value = n !== null;
1214
- break;
1215
- case "required":
1216
- this.#n.value = n !== null;
1217
- break;
1218
- }
1219
- super.attributeChangedCallback?.(e, t, n);
1220
- }
1221
- }
1222
- setup() {
1223
- super.setup(), this.#r = this.getAttribute("value"), this.#i = new o(this, {
1224
- itemSelector: ":scope > ui-segment:not([disabled])",
1225
- ariaAttr: "aria-checked",
1226
- orientation: "horizontal",
1227
- onChildSelect: (e) => {
1228
- this.#i.listValue.value = e.value, this.setAttribute("value", e.value), this.dispatchEvent(new CustomEvent("ui-change", {
1229
- bubbles: !0,
1230
- composed: !0,
1231
- detail: e
1232
- }));
1233
- },
1234
- addEffect: (e) => this.addEffect(e),
1235
- deferChildren: (e) => this.deferChildren(e)
1236
- });
1237
- let e = this.getAttribute("value");
1238
- e !== null && (this.#i.listValue.value = e), this.addEffect(v(this, this.#t, this.#e)), this.#n.value = this.hasAttribute("required"), this.addEffect(() => {
1239
- let e = this.#i.listValue.value;
1240
- this.#n.value && (e === null || e === "") ? this.#e.setValidity({ valueMissing: !0 }, "Please select one of these options.", this) : this.#e.setValidity({});
1241
- }), this.addEffect(() => {
1242
- let e = this.#i.listValue.value;
1243
- this.#e.setFormValue(e);
1244
- }), this.deferChildren(() => {
1245
- this.addEffect(() => {
1246
- let e = this.#i.listValue.value, t = this.querySelectorAll(":scope > ui-segment"), n = -1, r = 0;
1247
- for (let i of t) (i.getAttribute("value") ?? "") === e && (n = r), r++;
1248
- this.#a(n, r);
1249
- });
1250
- });
1251
- }
1252
- teardown() {
1253
- this.#i.destroy(), super.teardown();
1254
- }
1255
- onFormDisabled(e) {
1256
- this.#t.value = e;
1257
- }
1258
- onFormReset() {
1259
- this.#i && (this.#i.listValue.value = this.#r), this.#r === null ? this.removeAttribute("value") : this.setAttribute("value", this.#r);
1260
- }
1261
- onFormStateRestore(e) {
1262
- typeof e == "string" && e && (this.value = e);
1263
- }
1264
- #a(e, t) {
1265
- if (e < 0) {
1266
- this.#e.states.delete("ready");
1267
- return;
1268
- }
1269
- this.style.setProperty("--_indicator-index", `${e}`), this.style.setProperty("--_segment-count", `${t}`), this.#e.states.add("ready");
1270
- }
1271
- }, N = class extends _ {
1272
- static observedAttributes = ["disabled"];
1273
- #e;
1274
- #t;
1275
- #n;
1276
- constructor() {
1277
- super(), this.#e = this.attachInternals(), this.#e.role = "radio", this.#t = y(this, "disabled", { type: "boolean" }), this.setAttribute("aria-checked", "false");
1278
- }
1279
- get value() {
1280
- return this.getAttribute("value") ?? "";
1281
- }
1282
- set value(e) {
1283
- this.setAttribute("value", e);
1284
- }
1285
- get disabled() {
1286
- return this.#t.value;
1287
- }
1288
- set disabled(e) {
1289
- this.#t.set(e);
1290
- }
1291
- get label() {
1292
- return this.getAttribute("label") ?? this.textContent?.trim() ?? "";
1293
- }
1294
- attributeChangedCallback(e, t, n) {
1295
- t !== n && (b({ disabled: this.#t }, e, n), super.attributeChangedCallback?.(e, t, n));
1296
- }
1297
- setup() {
1298
- super.setup(), this.#n = new s(this, { disabled: () => this.disabled }), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "-1"), this.addEffect(v(this, this.#t.signal, this.#e)), this.addEventListener("ui-press", this.#r);
1299
- }
1300
- teardown() {
1301
- this.removeEventListener("ui-press", this.#r), this.#n.destroy(), super.teardown();
1302
- }
1303
- #r = () => {
1304
- this.#t.value || this.dispatchEvent(new CustomEvent("ui-select", {
1305
- bubbles: !0,
1306
- composed: !0,
1307
- detail: {
1308
- value: this.value,
1309
- label: this.label
1310
- }
1311
- }));
1312
- };
1313
- }, P = class extends _ {
1314
- static observedAttributes = [
1315
- "placement",
1316
- "delay",
1317
- "disabled"
1318
- ];
1319
- #e;
1320
- #t = t(!1);
1321
- #n = t(!1);
1322
- #r = null;
1323
- #i = null;
1324
- #a = "";
1325
- constructor() {
1326
- super(), this.#e = this.attachInternals();
1327
- }
1328
- get disabled() {
1329
- return this.#n.value;
1330
- }
1331
- set disabled(e) {
1332
- this.#n.value = e, this.toggleAttribute("disabled", e);
1333
- }
1334
- get placement() {
1335
- return this.getAttribute("placement") ?? "top";
1336
- }
1337
- set placement(e) {
1338
- this.setAttribute("placement", e);
1339
- }
1340
- get delay() {
1341
- return Number(this.getAttribute("delay") ?? 500);
1342
- }
1343
- set delay(e) {
1344
- this.setAttribute("delay", String(e));
1345
- }
1346
- attributeChangedCallback(e, t, n) {
1347
- t !== n && (e === "disabled" && (this.#n.value = n !== null), super.attributeChangedCallback?.(e, t, n));
1348
- }
1349
- setup() {
1350
- super.setup(), this.addEffect(v(this, this.#n, this.#e)), this.#i = this.parentElement, this.#i && (this.#a = e("tip"), this.#i.style.setProperty("anchor-name", `--${this.#a}`), this.style.setProperty("position-anchor", `--${this.#a}`), this.hasAttribute("popover") || this.setAttribute("popover", "manual"), this.id ||= e("tooltip"), this.#i.setAttribute("aria-describedby", this.id), this.#i.addEventListener("mouseenter", this.#o), this.#i.addEventListener("mouseleave", this.#s), this.#i.addEventListener("focusin", this.#o), this.#i.addEventListener("focusout", this.#s), this.#i.addEventListener("keydown", this.#c), this.addEffect(() => {
1351
- this.#n.value && this.#t.value && (this.#l(), this.#t.value = !1);
1352
- }), this.addEffect(() => {
1353
- if (this.#t.value) try {
1354
- this.showPopover();
1355
- } catch {}
1356
- else try {
1357
- this.hidePopover();
1358
- } catch {}
1359
- }));
1360
- }
1361
- teardown() {
1362
- this.#l(), this.#i &&= (this.#i.removeEventListener("mouseenter", this.#o), this.#i.removeEventListener("mouseleave", this.#s), this.#i.removeEventListener("focusin", this.#o), this.#i.removeEventListener("focusout", this.#s), this.#i.removeEventListener("keydown", this.#c), this.#i.removeAttribute("aria-describedby"), this.#i.style.removeProperty("anchor-name"), null), super.teardown();
1363
- }
1364
- #o = () => {
1365
- this.#n.value || (this.#l(), this.#r = setTimeout(() => {
1366
- this.#t.value = !0;
1367
- }, this.delay));
1368
- };
1369
- #s = () => {
1370
- this.#l(), this.#t.value = !1;
1371
- };
1372
- #c = (e) => {
1373
- e.key === "Escape" && this.#t.value && (this.#t.value = !1);
1374
- };
1375
- #l() {
1376
- this.#r !== null && (clearTimeout(this.#r), this.#r = null);
1377
- }
1378
- }, F = class extends _ {
1379
- static observedAttributes = ["multiple", "disabled"];
1380
- #e = t(!1);
1381
- get multiple() {
1382
- return this.hasAttribute("multiple");
1383
- }
1384
- set multiple(e) {
1385
- this.toggleAttribute("multiple", e);
1386
- }
1387
- get disabled() {
1388
- return this.#e.value;
1389
- }
1390
- set disabled(e) {
1391
- this.#e.value = e, this.toggleAttribute("disabled", e);
1392
- }
1393
- attributeChangedCallback(e, t, n) {
1394
- if (t !== n) {
1395
- switch (e) {
1396
- case "disabled":
1397
- this.#e.value = n !== null;
1398
- break;
1399
- case "multiple":
1400
- if (n === null && this.isConnected) {
1401
- let e = [...this.querySelectorAll(":scope > ui-accordion-item[open]")];
1402
- for (let t = 1; t < e.length; t++) e[t].open = !1;
1403
- }
1404
- break;
1405
- }
1406
- super.attributeChangedCallback?.(e, t, n);
1407
- }
1408
- }
1409
- setup() {
1410
- super.setup(), this.addEffect(v(this, this.#e)), this.addEventListener("toggle", this.#t, !0);
1411
- }
1412
- teardown() {
1413
- this.removeEventListener("toggle", this.#t, !0), super.teardown();
1414
- }
1415
- #t = (e) => {
1416
- if (this.multiple) return;
1417
- let t = e.target;
1418
- if (!t.open) return;
1419
- let n = t.closest("ui-accordion-item");
1420
- if (!n) return;
1421
- let r = this.querySelectorAll(":scope > ui-accordion-item[open]");
1422
- for (let e of r) e !== n && (e.open = !1);
1423
- };
1424
- }, I = class extends _ {
1425
- static observedAttributes = ["open", "disabled"];
1426
- #e = t(!1);
1427
- #t = t(!1);
1428
- #n = null;
1429
- get open() {
1430
- return this.#e.value;
1431
- }
1432
- set open(e) {
1433
- this.#e.value = e, this.toggleAttribute("open", e);
1434
- }
1435
- get disabled() {
1436
- return this.#t.value;
1437
- }
1438
- set disabled(e) {
1439
- this.#t.value = e, this.toggleAttribute("disabled", e);
1440
- }
1441
- attributeChangedCallback(e, t, n) {
1442
- if (t !== n) {
1443
- switch (e) {
1444
- case "open":
1445
- this.#e.value = n !== null;
1446
- break;
1447
- case "disabled":
1448
- this.#t.value = n !== null;
1449
- break;
1450
- }
1451
- super.attributeChangedCallback?.(e, t, n);
1452
- }
1453
- }
1454
- setup() {
1455
- super.setup();
1456
- let e = document.createElement("details"), t = document.createElement("summary"), n = this.querySelector(":scope > [slot=\"heading\"]");
1457
- n && (n.removeAttribute("slot"), t.appendChild(n));
1458
- let r = document.createElement("div");
1459
- for (r.setAttribute("part", "content"); this.firstChild;) r.appendChild(this.firstChild);
1460
- e.appendChild(t), e.appendChild(r), this.appendChild(e), this.#n = e, this.addEffect(() => {
1461
- let e = this.#e.value;
1462
- this.#n && (this.#n.open = e);
1463
- }), this.addEffect(v(this, this.#t)), e.addEventListener("toggle", this.#r);
1464
- }
1465
- teardown() {
1466
- this.#n?.removeEventListener("toggle", this.#r), this.#n = null, super.teardown();
1467
- }
1468
- #r = () => {
1469
- if (!this.#n) return;
1470
- let e = this.#n.open;
1471
- this.#e.value = e, this.toggleAttribute("open", e);
1472
- };
1473
- }, L = class extends _ {
1474
- #e;
1475
- get open() {
1476
- return this.#e.open;
1477
- }
1478
- showModal() {
1479
- this.#e.showModal();
1480
- }
1481
- close() {
1482
- this.#e.close();
1483
- }
1484
- setup() {
1485
- super.setup(), this.#e = new d(this);
1486
- }
1487
- teardown() {
1488
- this.#e.destroy(), super.teardown();
1489
- }
1490
- }, R = class extends _ {
1491
- static observedAttributes = [
1492
- "value",
1493
- "disabled",
1494
- "orientation"
1495
- ];
1496
- #e;
1497
- #t = t(!1);
1498
- #n;
1499
- constructor() {
1500
- super(), this.#e = this.attachInternals(), this.#e.role = "tablist";
1501
- }
1502
- get value() {
1503
- return this.#n?.listValue.value ?? null;
1504
- }
1505
- set value(e) {
1506
- this.#n && (this.#n.listValue.value = e), e === null ? this.removeAttribute("value") : this.setAttribute("value", e);
1507
- }
1508
- get disabled() {
1509
- return this.#t.value;
1510
- }
1511
- set disabled(e) {
1512
- this.#t.value = e, this.toggleAttribute("disabled", e);
1513
- }
1514
- attributeChangedCallback(e, t, n) {
1515
- if (t !== n) {
1516
- switch (e) {
1517
- case "value":
1518
- this.#n && (this.#n.listValue.value = n);
1519
- break;
1520
- case "disabled":
1521
- this.#t.value = n !== null;
1522
- break;
1523
- case "orientation":
1524
- this.#n && (this.#n.rovingFocus.orientation = n === "vertical" ? "vertical" : "horizontal");
1525
- break;
1526
- }
1527
- super.attributeChangedCallback?.(e, t, n);
1528
- }
1529
- }
1530
- setup() {
1531
- super.setup(), this.#n = new o(this, {
1532
- itemSelector: ":scope > ui-tab:not([disabled])",
1533
- orientation: "horizontal",
1534
- autoSync: !0,
1535
- onChildSelect: (e) => {
1536
- this.#n.listValue.value = e.value, this.setAttribute("value", e.value), this.dispatchEvent(new CustomEvent("ui-change", {
1537
- bubbles: !0,
1538
- composed: !0,
1539
- detail: e
1540
- }));
1541
- },
1542
- addEffect: (e) => this.addEffect(e),
1543
- deferChildren: (e) => this.deferChildren(e)
1544
- });
1545
- let e = this.getAttribute("value");
1546
- e !== null && (this.#n.listValue.value = e), this.hasAttribute("aria-label") || this.setAttribute("aria-label", "Tabs"), this.addEffect(v(this, this.#t, this.#e)), this.addEffect(() => {
1547
- let e = this.#t.value, t = this.querySelectorAll(":scope > ui-tab");
1548
- for (let n of t) n.toggleAttribute("disabled", e);
1549
- }), this.deferChildren(() => {
1550
- this.#r(), this.addEffect(() => {
1551
- let e = this.#n.listValue.value, t = this.querySelectorAll(":scope > ui-tab"), n = this.querySelectorAll(":scope > ui-tab-panels > ui-tab-panel"), r = -1, i = 0;
1552
- for (let n of t) (n.getAttribute("value") ?? "") === e && (r = i), i++;
1553
- for (let t of n) {
1554
- let n = (t.getAttribute("value") ?? "") === e;
1555
- t.toggleAttribute("hidden", !n), t.setAttribute("tabindex", n ? "0" : "-1");
1556
- }
1557
- this.#i(r, i);
1558
- });
1559
- });
1560
- }
1561
- teardown() {
1562
- this.#n.destroy(), super.teardown();
1563
- }
1564
- #r() {
1565
- let t = this.querySelectorAll(":scope > ui-tab"), n = this.querySelectorAll(":scope > ui-tab-panels > ui-tab-panel"), r = /* @__PURE__ */ new Map();
1566
- for (let t of n) t.id ||= e("tp"), r.set(t.getAttribute("value") ?? "", t);
1567
- for (let n of t) {
1568
- n.id ||= e("tab");
1569
- let t = r.get(n.getAttribute("value") ?? "");
1570
- t && (n.setAttribute("aria-controls", t.id), t.setAttribute("aria-labelledby", n.id));
1571
- }
1572
- }
1573
- #i(e, t) {
1574
- if (e < 0) {
1575
- this.#e.states.delete("ready");
1576
- return;
1577
- }
1578
- this.style.setProperty("--_indicator-index", `${e}`), this.style.setProperty("--_tab-count", `${t}`), this.#e.states.add("ready");
1579
- }
1580
- }, z = class extends _ {
1581
- static observedAttributes = ["disabled"];
1582
- #e;
1583
- #t;
1584
- #n;
1585
- constructor() {
1586
- super(), this.#e = this.attachInternals(), this.#e.role = "tab", this.#t = y(this, "disabled", { type: "boolean" });
1587
- }
1588
- get value() {
1589
- return this.getAttribute("value") ?? "";
1590
- }
1591
- set value(e) {
1592
- this.setAttribute("value", e);
1593
- }
1594
- get disabled() {
1595
- return this.#t.value;
1596
- }
1597
- set disabled(e) {
1598
- this.#t.set(e);
1599
- }
1600
- get label() {
1601
- return this.getAttribute("label") ?? this.textContent?.trim() ?? "";
1602
- }
1603
- attributeChangedCallback(e, t, n) {
1604
- t !== n && (b({ disabled: this.#t }, e, n), super.attributeChangedCallback?.(e, t, n));
1605
- }
1606
- setup() {
1607
- super.setup(), this.#n = new s(this, { disabled: () => this.disabled }), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "-1"), this.addEffect(v(this, this.#t.signal, this.#e)), this.addEventListener("ui-press", this.#r);
1608
- }
1609
- teardown() {
1610
- this.removeEventListener("ui-press", this.#r), this.#n.destroy(), super.teardown();
1611
- }
1612
- #r = () => {
1613
- this.disabled || this.dispatchEvent(new CustomEvent("ui-select", {
1614
- bubbles: !0,
1615
- composed: !0,
1616
- detail: {
1617
- value: this.value,
1618
- label: this.label
1619
- }
1620
- }));
1621
- };
1622
- }, B = class extends _ {
1623
- static observedAttributes = ["value"];
1624
- #e;
1625
- constructor() {
1626
- super(), this.#e = this.attachInternals(), this.#e.role = "tabpanel";
1627
- }
1628
- get value() {
1629
- return this.getAttribute("value") ?? "";
1630
- }
1631
- set value(e) {
1632
- this.setAttribute("value", e);
1633
- }
1634
- attributeChangedCallback(e, t, n) {
1635
- t !== n && super.attributeChangedCallback?.(e, t, n);
1636
- }
1637
- }, V = class extends _ {
1638
- #e;
1639
- constructor() {
1640
- super(), this.#e = this.attachInternals(), this.#e.role = "presentation";
1641
- }
1642
- }, H = class {
1643
- sortColumn;
1644
- sortDirection;
1645
- selected;
1646
- columnWidths;
1647
- constructor(e = {}) {
1648
- this.sortColumn = t(e.sortColumn ?? null), this.sortDirection = t(e.sortDirection ?? "none"), this.selected = t(/* @__PURE__ */ new Set()), this.columnWidths = t([]);
1649
- }
1650
- toggleSort(e) {
1651
- n(() => {
1652
- if (this.sortColumn.value === e) {
1653
- let e = this.sortDirection.value;
1654
- this.sortDirection.value = e === "asc" ? "desc" : e === "desc" ? "none" : "asc", this.sortDirection.value === "none" && (this.sortColumn.value = null);
1655
- } else this.sortColumn.value = e, this.sortDirection.value = "asc";
1656
- });
1657
- }
1658
- select(e) {
1659
- let t = new Set(this.selected.value);
1660
- t.add(e), this.selected.value = t;
1661
- }
1662
- deselect(e) {
1663
- let t = new Set(this.selected.value);
1664
- t.delete(e), this.selected.value = t;
1665
- }
1666
- toggle(e) {
1667
- this.selected.value.has(e) ? this.deselect(e) : this.select(e);
1668
- }
1669
- selectAll(e) {
1670
- this.selected.value = new Set(e);
1671
- }
1672
- clearSelection() {
1673
- this.selected.value = /* @__PURE__ */ new Set();
1674
- }
1675
- isSelected(e) {
1676
- return this.selected.value.has(e);
1677
- }
1678
- };
1679
- function U(e = {}) {
1680
- return new H(e);
1681
- }
1682
- var W = class {
1683
- table;
1684
- #e = [];
1685
- #t = -1;
1686
- #n = 0;
1687
- #r = 0;
1688
- #i = !1;
1689
- #a;
1690
- #o;
1691
- constructor(e, t = {}) {
1692
- this.table = e, this.#a = t.minWidth ?? 48, this.#o = t.maxWidth ?? Infinity;
1693
- }
1694
- /** Call after table is in DOM and has computed layout. */
1695
- init() {
1696
- this.table.addEventListener("pointerdown", this.#l);
1697
- }
1698
- destroy() {
1699
- this.table.removeEventListener("pointerdown", this.#l), this.#m();
1700
- }
1701
- #s() {
1702
- this.#e = getComputedStyle(this.table).gridTemplateColumns.split(/\s+/).map((e) => parseFloat(e));
1703
- }
1704
- #c() {
1705
- this.table.style.gridTemplateColumns = this.#e.map((e) => `${e}px`).join(" ");
1706
- }
1707
- #l = (e) => {
1708
- if (e.button !== 0) return;
1709
- let t = e.target.closest?.(".table-resize-handle");
1710
- if (!t || !this.table.contains(t)) return;
1711
- let n = t.closest("ui-table-header");
1712
- if (!n) return;
1713
- let r = n.closest("ui-table-row");
1714
- if (!r) return;
1715
- let i = [...r.querySelectorAll("ui-table-header")];
1716
- this.#s();
1717
- let a = i.indexOf(n);
1718
- a === -1 || a >= this.#e.length || (e.preventDefault(), e.stopPropagation(), this.table.style.width || (this.table.style.width = `${this.table.offsetWidth}px`), this.#i = !0, this.#t = a, this.#n = e.clientX, this.#r = this.#e[a], t.setPointerCapture(e.pointerId), this.table.setAttribute("resizing", ""), document.addEventListener("pointermove", this.#u), document.addEventListener("pointerup", this.#d), document.addEventListener("pointercancel", this.#f), document.addEventListener("keydown", this.#p), this.table.dispatchEvent(new CustomEvent("ui-table-resize-start", {
1719
- bubbles: !0,
1720
- composed: !0,
1721
- detail: {
1722
- column: a,
1723
- width: this.#r
1724
- }
1725
- })));
1726
- };
1727
- #u = (e) => {
1728
- if (!this.#i) return;
1729
- let t = e.clientX - this.#n, n = Math.min(this.#o, Math.max(this.#a, this.#r + t));
1730
- this.#e[this.#t] = n, this.#c(), this.table.dispatchEvent(new CustomEvent("ui-table-resize", {
1731
- bubbles: !0,
1732
- composed: !0,
1733
- detail: {
1734
- column: this.#t,
1735
- width: n
1736
- }
1737
- }));
1738
- };
1739
- #d = (e) => {
1740
- this.#i && (this.table.dispatchEvent(new CustomEvent("ui-table-resize-end", {
1741
- bubbles: !0,
1742
- composed: !0,
1743
- detail: {
1744
- column: this.#t,
1745
- width: this.#e[this.#t],
1746
- allWidths: [...this.#e]
1747
- }
1748
- })), this.#m());
1749
- };
1750
- #f = () => {
1751
- this.#i && (this.#e[this.#t] = this.#r, this.#c(), this.#m());
1752
- };
1753
- #p = (e) => {
1754
- e.key === "Escape" && this.#i && (e.preventDefault(), this.#e[this.#t] = this.#r, this.#c(), this.#m());
1755
- };
1756
- #m() {
1757
- this.#i = !1, this.#t = -1, this.table.removeAttribute("resizing"), document.removeEventListener("pointermove", this.#u), document.removeEventListener("pointerup", this.#d), document.removeEventListener("pointercancel", this.#f), document.removeEventListener("keydown", this.#p);
1758
- }
1759
- }, de = class {
1760
- #e;
1761
- #t;
1762
- #n;
1763
- #r = !1;
1764
- constructor(e, t) {
1765
- this.#t = t, this.#n = e, this.#e = new a(e, {
1766
- selector: "ui-table-row:not([colspan])",
1767
- axis: "vertical",
1768
- mode: "slot"
1769
- }), e.addEventListener("ui-drag-start", this.#i), e.addEventListener("ui-drop", this.#a), e.addEventListener("click", this.#o, { capture: !0 });
1770
- }
1771
- #i = (e) => {
1772
- this.#r = !0;
1773
- let t = this.#n.querySelector(":scope > [popover][aria-hidden=\"true\"]");
1774
- t && (t.style.gridTemplateColumns = getComputedStyle(this.#t).gridTemplateColumns, t.style.display = "grid", t.style.alignItems = "center");
1775
- };
1776
- #a = (e) => {
1777
- let t = e.detail, n = new CustomEvent("ui-table-reorder", {
1778
- bubbles: !0,
1779
- composed: !0,
1780
- cancelable: !0,
1781
- detail: {
1782
- row: t.item,
1783
- fromIndex: t.fromIndex,
1784
- toIndex: t.toIndex
1785
- }
1786
- });
1787
- this.#t.dispatchEvent(n) && (t.insertBefore ? this.#n.insertBefore(t.item, t.insertBefore) : this.#n.appendChild(t.item));
1788
- };
1789
- #o = (e) => {
1790
- this.#r &&= (e.stopPropagation(), !1);
1791
- };
1792
- destroy() {
1793
- this.#n.removeEventListener("ui-drag-start", this.#i), this.#n.removeEventListener("ui-drop", this.#a), this.#n.removeEventListener("click", this.#o, { capture: !0 }), this.#e.destroy();
1794
- }
1795
- }, fe = class extends _ {
1796
- static observedAttributes = [
1797
- "selectable",
1798
- "resizable",
1799
- "reorderable"
1800
- ];
1801
- #e;
1802
- #t = new H();
1803
- #n = null;
1804
- #r = null;
1805
- #i = null;
1806
- constructor() {
1807
- super(), this.#e = this.attachInternals(), this.#e.role = "table";
1808
- }
1809
- get store() {
1810
- return this.#t;
1811
- }
1812
- set store(e) {
1813
- this.#t = e;
1814
- }
1815
- get selectable() {
1816
- return this.hasAttribute("selectable");
1817
- }
1818
- set selectable(e) {
1819
- this.toggleAttribute("selectable", e);
1820
- }
1821
- attributeChangedCallback(e, t, n) {
1822
- if (t !== n) {
1823
- switch (e) {
1824
- case "resizable":
1825
- n !== null && !this.#n ? this.#a() : n === null && this.#n && (this.#n.destroy(), this.#n = null);
1826
- break;
1827
- case "reorderable":
1828
- n !== null && !this.#i ? this.#s() : n === null && this.#i && (this.#i.destroy(), this.#i = null);
1829
- break;
1830
- }
1831
- super.attributeChangedCallback?.(e, t, n);
1832
- }
1833
- }
1834
- setup() {
1835
- super.setup(), this.addEventListener("ui-sort", this.#c), this.addEventListener("ui-row-select", this.#l), this.deferChildren(() => {
1836
- this.addEffect(() => {
1837
- let e = this.#t.sortColumn.value, t = this.#t.sortDirection.value, n = this.querySelectorAll("ui-table-header[sortable]");
1838
- for (let r of n) r.column === e ? (r.setAttribute("sort", t), r.setAttribute("aria-sort", t === "asc" ? "ascending" : t === "desc" ? "descending" : "none")) : (r.setAttribute("sort", "none"), r.removeAttribute("aria-sort"));
1839
- }), this.addEffect(() => {
1840
- let e = this.#t.selected.value, t = this.querySelectorAll("ui-table-body ui-table-row");
1841
- for (let n of t) {
1842
- let t = e.has(n.value);
1843
- n.toggleAttribute("selected", t), n.setAttribute("aria-selected", t ? "true" : "false");
1844
- }
1845
- }), this.addEffect(() => {
1846
- let e = this.#t.sortColumn.value, t = this.querySelectorAll("ui-table-body ui-table-row[colspan]");
1847
- for (let n of t) n.toggleAttribute("hidden", e !== null);
1848
- }), this.hasAttribute("resizable") && this.#a(), this.hasAttribute("sticky-header") && this.#o(), this.hasAttribute("reorderable") && this.#s();
1849
- });
1850
- }
1851
- teardown() {
1852
- this.#n?.destroy(), this.#n = null, this.#r?.disconnect(), this.#r = null, this.#i?.destroy(), this.#i = null, this.removeEventListener("ui-sort", this.#c), this.removeEventListener("ui-row-select", this.#l), super.teardown();
1853
- }
1854
- #a() {
1855
- let e = this.querySelectorAll("ui-table-header");
1856
- for (let t of e) {
1857
- let e = document.createElement("div");
1858
- e.className = "table-resize-handle", e.setAttribute("aria-hidden", "true"), e.addEventListener("click", (e) => e.stopPropagation()), t.appendChild(e);
1859
- }
1860
- this.#n = new W(this), this.#n.init();
1861
- }
1862
- #o() {
1863
- let e = this.querySelector(":scope > ui-table-head > ui-table-row");
1864
- e && (this.#r = new ResizeObserver((e) => {
1865
- for (let t of e) {
1866
- let e = t.borderBoxSize?.[0]?.blockSize ?? t.target.getBoundingClientRect().height;
1867
- this.style.setProperty("--_header-height", `${e}px`);
1868
- }
1869
- }), this.#r.observe(e));
1870
- }
1871
- #s() {
1872
- let e = this.querySelector(":scope > ui-table-body");
1873
- e && (this.#i = new de(e, this));
1874
- }
1875
- #c = (e) => {
1876
- let t = e.detail;
1877
- this.#t.toggleSort(t.column), this.dispatchEvent(new CustomEvent("ui-table-sort", {
1878
- bubbles: !0,
1879
- composed: !0,
1880
- detail: {
1881
- column: this.#t.sortColumn.value,
1882
- direction: this.#t.sortDirection.value
1883
- }
1884
- }));
1885
- };
1886
- #l = (e) => {
1887
- if (!this.selectable) return;
1888
- let t = e.detail;
1889
- this.#t.toggle(t.value), this.dispatchEvent(new CustomEvent("ui-table-select", {
1890
- bubbles: !0,
1891
- composed: !0,
1892
- detail: {
1893
- value: t.value,
1894
- selected: this.#t.isSelected(t.value),
1895
- allSelected: [...this.#t.selected.value]
1896
- }
1897
- }));
1898
- };
1899
- }, pe = class extends _ {
1900
- #e;
1901
- constructor() {
1902
- super(), this.#e = this.attachInternals(), this.#e.role = "rowgroup";
1903
- }
1904
- }, me = class extends _ {
1905
- #e;
1906
- constructor() {
1907
- super(), this.#e = this.attachInternals(), this.#e.role = "rowgroup";
1908
- }
1909
- }, he = class extends _ {
1910
- static observedAttributes = ["value", "selected"];
1911
- #e;
1912
- constructor() {
1913
- super(), this.#e = this.attachInternals(), this.#e.role = "row";
1914
- }
1915
- get value() {
1916
- return this.getAttribute("value") ?? "";
1917
- }
1918
- set value(e) {
1919
- this.setAttribute("value", e);
1920
- }
1921
- get selected() {
1922
- return this.hasAttribute("selected");
1923
- }
1924
- set selected(e) {
1925
- this.toggleAttribute("selected", e);
1926
- }
1927
- setup() {
1928
- super.setup(), this.addEventListener("click", this.#t);
1929
- }
1930
- teardown() {
1931
- this.removeEventListener("click", this.#t), super.teardown();
1932
- }
1933
- #t = () => {
1934
- this.hasAttribute("colspan") || this.closest("ui-table")?.hasAttribute("selectable") && this.dispatchEvent(new CustomEvent("ui-row-select", {
1935
- bubbles: !0,
1936
- composed: !0,
1937
- detail: { value: this.value }
1938
- }));
1939
- };
1940
- }, ge = class extends _ {
1941
- #e;
1942
- constructor() {
1943
- super(), this.#e = this.attachInternals(), this.#e.role = "cell";
1944
- }
1945
- }, _e = class extends _ {
1946
- static observedAttributes = ["sort", "sortable"];
1947
- #e;
1948
- constructor() {
1949
- super(), this.#e = this.attachInternals(), this.#e.role = "columnheader";
1950
- }
1951
- get column() {
1952
- return this.getAttribute("column") ?? "";
1953
- }
1954
- get sortable() {
1955
- return this.hasAttribute("sortable");
1956
- }
1957
- get sort() {
1958
- return this.getAttribute("sort") ?? "none";
1959
- }
1960
- set sort(e) {
1961
- this.setAttribute("sort", e);
1962
- }
1963
- attributeChangedCallback(e, t, n) {
1964
- if (t !== n) {
1965
- switch (e) {
1966
- case "sortable":
1967
- n === null ? (this.removeAttribute("tabindex"), this.removeEventListener("click", this.#t), this.removeEventListener("keydown", this.#n)) : (this.setAttribute("tabindex", "0"), this.addEventListener("click", this.#t), this.addEventListener("keydown", this.#n));
1968
- break;
1969
- }
1970
- super.attributeChangedCallback?.(e, t, n);
1971
- }
1972
- }
1973
- setup() {
1974
- super.setup(), this.sortable && (this.setAttribute("tabindex", "0"), this.addEventListener("click", this.#t), this.addEventListener("keydown", this.#n));
1975
- }
1976
- teardown() {
1977
- this.removeEventListener("click", this.#t), this.removeEventListener("keydown", this.#n), super.teardown();
1978
- }
1979
- #t = () => {
1980
- this.sortable && this.dispatchEvent(new CustomEvent("ui-sort", {
1981
- bubbles: !0,
1982
- composed: !0,
1983
- detail: { column: this.column }
1984
- }));
1985
- };
1986
- #n = (e) => {
1987
- (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.#t());
1988
- };
1989
- };
1990
- function G(e) {
1991
- if (!e) return null;
1992
- let t = /* @__PURE__ */ new Date(e + "T00:00:00");
1993
- return isNaN(t.getTime()) ? null : t;
1994
- }
1995
- function ve(e) {
1996
- return `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
1997
- }
1998
- function K(e, t) {
1999
- return e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
2000
- }
2001
- var q = class {
2002
- view;
2003
- focusedYear;
2004
- focusedMonth;
2005
- value;
2006
- rangeStart;
2007
- rangeEnd;
2008
- min;
2009
- max;
2010
- days;
2011
- months;
2012
- years;
2013
- title;
2014
- constructor(e = {}) {
2015
- let n = /* @__PURE__ */ new Date(), i = G(e.value ?? null) ?? n;
2016
- this.view = t("day"), this.focusedYear = t(i.getFullYear()), this.focusedMonth = t(i.getMonth()), this.value = t(e.value ?? null), this.rangeStart = t(e.rangeStart ?? null), this.rangeEnd = t(e.rangeEnd ?? null), this.min = t(e.min ?? null), this.max = t(e.max ?? null), this.days = r(() => this.#e()), this.months = r(() => this.#t()), this.years = r(() => this.#n()), this.title = r(() => this.#r());
2017
- }
2018
- prevMonth() {
2019
- n(() => {
2020
- this.focusedMonth.value === 0 ? (this.focusedMonth.value = 11, this.focusedYear.value--) : this.focusedMonth.value--;
2021
- });
2022
- }
2023
- nextMonth() {
2024
- n(() => {
2025
- this.focusedMonth.value === 11 ? (this.focusedMonth.value = 0, this.focusedYear.value++) : this.focusedMonth.value++;
2026
- });
2027
- }
2028
- prevYear() {
2029
- this.focusedYear.value--;
2030
- }
2031
- nextYear() {
2032
- this.focusedYear.value++;
2033
- }
2034
- prevDecade() {
2035
- this.focusedYear.value -= 10;
2036
- }
2037
- nextDecade() {
2038
- this.focusedYear.value += 10;
2039
- }
2040
- selectDate(e) {
2041
- this.value.value = e;
2042
- }
2043
- selectMonth(e) {
2044
- n(() => {
2045
- this.focusedMonth.value = e, this.view.value = "day";
2046
- });
2047
- }
2048
- selectYear(e) {
2049
- n(() => {
2050
- this.focusedYear.value = e, this.view.value = "month";
2051
- });
2052
- }
2053
- setRange(e, t) {
2054
- n(() => {
2055
- this.rangeStart.value = e, this.rangeEnd.value = t;
2056
- });
2057
- }
2058
- isDateDisabled(e) {
2059
- let t = G(this.min.value), n = G(this.max.value), r = G(e);
2060
- return !!(!r || t && r < t || n && r > n);
2061
- }
2062
- #e() {
2063
- let e = this.focusedYear.value, t = this.focusedMonth.value, n = G(this.value.value), r = /* @__PURE__ */ new Date(), i = G(this.rangeStart.value), a = G(this.rangeEnd.value), o = new Date(e, t, 1).getDay(), s = new Date(e, t, 1 - o), c = [];
2064
- for (let e = 0; e < 42; e++) {
2065
- let o = new Date(s.getFullYear(), s.getMonth(), s.getDate() + e), l = ve(o), u = o.getMonth() === t, d = K(o, r), f = n ? K(o, n) : !1, p = this.isDateDisabled(l), m = !1, h = !1, g = !1;
2066
- if (i && a) {
2067
- let e = i <= a ? i : a, t = i <= a ? a : i;
2068
- m = o >= e && o <= t, h = K(o, e), g = K(o, t);
2069
- }
2070
- c.push({
2071
- date: l,
2072
- day: o.getDate(),
2073
- inMonth: u,
2074
- isToday: d,
2075
- isSelected: f,
2076
- isDisabled: p,
2077
- inRange: m,
2078
- isRangeStart: h,
2079
- isRangeEnd: g
2080
- });
2081
- }
2082
- return c;
2083
- }
2084
- #t() {
2085
- let e = this.focusedYear.value, t = this.focusedMonth.value;
2086
- return [
2087
- "Jan",
2088
- "Feb",
2089
- "Mar",
2090
- "Apr",
2091
- "May",
2092
- "Jun",
2093
- "Jul",
2094
- "Aug",
2095
- "Sep",
2096
- "Oct",
2097
- "Nov",
2098
- "Dec"
2099
- ].map((n, r) => ({
2100
- month: r,
2101
- name: n,
2102
- isCurrent: r === t && e === (/* @__PURE__ */ new Date()).getFullYear(),
2103
- isSelected: r === t
2104
- }));
2105
- }
2106
- #n() {
2107
- let e = this.focusedYear.value, t = Math.floor(e / 10) * 10, n = (/* @__PURE__ */ new Date()).getFullYear(), r = [];
2108
- for (let i = t - 1; i <= t + 10; i++) r.push({
2109
- year: i,
2110
- inDecade: i >= t && i < t + 10,
2111
- isCurrent: i === n,
2112
- isSelected: i === e
2113
- });
2114
- return r;
2115
- }
2116
- #r() {
2117
- let e = [
2118
- "January",
2119
- "February",
2120
- "March",
2121
- "April",
2122
- "May",
2123
- "June",
2124
- "July",
2125
- "August",
2126
- "September",
2127
- "October",
2128
- "November",
2129
- "December"
2130
- ];
2131
- switch (this.view.value) {
2132
- case "day": return `${e[this.focusedMonth.value]} ${this.focusedYear.value}`;
2133
- case "month": return `${this.focusedYear.value}`;
2134
- case "year": {
2135
- let e = Math.floor(this.focusedYear.value / 10) * 10;
2136
- return `${e}–${e + 9}`;
2137
- }
2138
- }
2139
- }
2140
- };
2141
- function ye(e = {}) {
2142
- return new q(e);
2143
- }
2144
- /**
2145
- * Calendar date picker with day/month/year views and optional range selection.
2146
- * @attr {string} value - Selected date in ISO format (YYYY-MM-DD)
2147
- * @attr {string} min - Minimum selectable date in ISO format
2148
- * @attr {string} max - Maximum selectable date in ISO format
2149
- * @attr {boolean} disabled - Disables interaction
2150
- * @attr {string} name - Form field name
2151
- * @attr {boolean} range - Enables range selection mode
2152
- * @fires ui-change - Fired on single date selection with `{ value }` detail
2153
- * @fires ui-range-select - Fired on range commit with `{ start, end }` detail
2154
- */
2155
- var be = class extends x(_) {
2156
- static observedAttributes = [
2157
- "value",
2158
- "min",
2159
- "max",
2160
- "disabled",
2161
- "name",
2162
- "range",
2163
- "required"
2164
- ];
2165
- #e;
2166
- #t = new q();
2167
- #n = t(!1);
2168
- #r = t(!1);
2169
- #i = null;
2170
- #a = t(0);
2171
- #o = "idle";
2172
- constructor() {
2173
- super(), this.#e = this.attachInternals(), this.#e.role = "group";
2174
- }
2175
- get store() {
2176
- return this.#t;
2177
- }
2178
- get value() {
2179
- return this.#t.value.value;
2180
- }
2181
- set value(e) {
2182
- this.#t.value.value = e, e ? this.setAttribute("value", e) : this.removeAttribute("value");
2183
- }
2184
- get disabled() {
2185
- return this.#n.value;
2186
- }
2187
- set disabled(e) {
2188
- this.#n.value = e, this.toggleAttribute("disabled", e);
2189
- }
2190
- get required() {
2191
- return this.#r.value;
2192
- }
2193
- set required(e) {
2194
- this.#r.value = e, this.toggleAttribute("required", e);
2195
- }
2196
- get range() {
2197
- return this.hasAttribute("range");
2198
- }
2199
- attributeChangedCallback(e, t, n) {
2200
- if (t !== n) {
2201
- switch (e) {
2202
- case "value":
2203
- this.#t.value.value = n;
2204
- break;
2205
- case "min":
2206
- this.#t.min.value = n;
2207
- break;
2208
- case "max":
2209
- this.#t.max.value = n;
2210
- break;
2211
- case "disabled":
2212
- this.#n.value = n !== null;
2213
- break;
2214
- case "required":
2215
- this.#r.value = n !== null;
2216
- break;
2217
- case "range":
2218
- this.#o = "idle", this.#t.setRange(null, null);
2219
- break;
2220
- case "name": break;
2221
- }
2222
- super.attributeChangedCallback?.(e, t, n);
2223
- }
2224
- }
2225
- setup() {
2226
- super.setup(), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.#i = this.getAttribute("value");
2227
- let e = this.getAttribute("value"), t = this.getAttribute("min"), r = this.getAttribute("max");
2228
- n(() => {
2229
- e && (this.#t.value.value = e), t && (this.#t.min.value = t), r && (this.#t.max.value = r);
2230
- }), this.#s(), this.addEventListener("keydown", this.#b), this.addEffect(() => this.#c()), this.addEffect(() => {
2231
- this.#e.setFormValue(this.#t.value.value);
2232
- }), this.addEffect(() => {
2233
- this.setAttribute("aria-label", this.#t.title.value);
2234
- }), this.addEffect(v(this, this.#n, this.#e, { manageTabindex: !0 })), this.#r.value = this.hasAttribute("required"), this.addEffect(() => {
2235
- let e = this.#t.value.value;
2236
- this.#r.value && (e === null || e === "") ? this.#e.setValidity({ valueMissing: !0 }, "Please select a date.", this) : this.#e.setValidity({});
2237
- });
2238
- }
2239
- teardown() {
2240
- this.querySelector(".cal-prev")?.removeEventListener("click", this.#l), this.querySelector(".cal-next")?.removeEventListener("click", this.#u), this.querySelector(".cal-title")?.removeEventListener("click", this.#d);
2241
- let e = this.querySelector(".cal-grid");
2242
- e?.removeEventListener("click", this.#f), e?.removeEventListener("pointermove", this.#p), this.removeEventListener("keydown", this.#b), super.teardown();
2243
- }
2244
- onFormDisabled(e) {
2245
- this.#n.value = e;
2246
- }
2247
- onFormReset() {
2248
- this.#t.value.value = this.#i, this.#i ? this.setAttribute("value", this.#i) : this.removeAttribute("value");
2249
- }
2250
- onFormStateRestore(e) {
2251
- typeof e == "string" && e && (this.value = e);
2252
- }
2253
- #s() {
2254
- this.innerHTML = "\n <div class=\"cal-header\">\n <button type=\"button\" class=\"cal-prev\" aria-label=\"Previous\" tabindex=\"-1\"></button>\n <button type=\"button\" class=\"cal-title\" tabindex=\"-1\"></button>\n <button type=\"button\" class=\"cal-next\" aria-label=\"Next\" tabindex=\"-1\"></button>\n </div>\n <div class=\"cal-weekdays\"></div>\n <div class=\"cal-grid\" role=\"grid\"></div>\n ";
2255
- let e = this.querySelector(".cal-prev"), t = this.querySelector(".cal-next"), n = this.querySelector(".cal-title");
2256
- e?.addEventListener("click", this.#l), t?.addEventListener("click", this.#u), n?.addEventListener("click", this.#d);
2257
- let r = this.querySelector(".cal-grid");
2258
- r?.addEventListener("click", this.#f), r?.addEventListener("pointermove", this.#p);
2259
- }
2260
- #c() {
2261
- let e = this.#t.view.value, t = this.querySelector(".cal-title"), n = this.querySelector(".cal-weekdays"), r = this.querySelector(".cal-grid");
2262
- !t || !n || !r || (t.textContent = this.#t.title.value, e === "day" ? (this.setAttribute("view", "day"), n.innerHTML = [
2263
- "Su",
2264
- "Mo",
2265
- "Tu",
2266
- "We",
2267
- "Th",
2268
- "Fr",
2269
- "Sa"
2270
- ].map((e) => `<span class="cal-weekday">${e}</span>`).join(""), r.innerHTML = this.#t.days.value.map((e, t) => {
2271
- let n = `class="cal-cell" data-date="${e.date}" data-index="${t}" tabindex="-1"`;
2272
- return e.inMonth || (n += " data-outside"), e.isToday && (n += " data-today"), e.isSelected && (n += " data-selected"), e.isDisabled && (n += " disabled"), e.inRange && (n += " data-in-range"), e.isRangeStart && (n += " data-range-start"), e.isRangeEnd && (n += " data-range-end"), `<button type="button" ${n}>${e.day}</button>`;
2273
- }).join("")) : e === "month" ? (this.setAttribute("view", "month"), n.innerHTML = "", r.innerHTML = this.#t.months.value.map((e) => {
2274
- let t = `class="cal-cell" data-month="${e.month}" tabindex="-1"`;
2275
- return e.isCurrent && (t += " data-today"), e.isSelected && (t += " data-selected"), `<button type="button" ${t}>${e.name}</button>`;
2276
- }).join("")) : (this.setAttribute("view", "year"), n.innerHTML = "", r.innerHTML = this.#t.years.value.map((e) => {
2277
- let t = `class="cal-cell" data-year="${e.year}" tabindex="-1"`;
2278
- return e.inDecade || (t += " data-outside"), e.isCurrent && (t += " data-today"), e.isSelected && (t += " data-selected"), `<button type="button" ${t}>${e.year}</button>`;
2279
- }).join("")));
2280
- }
2281
- #l = () => {
2282
- this.#m();
2283
- };
2284
- #u = () => {
2285
- this.#h();
2286
- };
2287
- #d = () => {
2288
- this.#g();
2289
- };
2290
- #f = (e) => {
2291
- this.#_(e);
2292
- };
2293
- #p = (e) => {
2294
- this.#y(e);
2295
- };
2296
- #m() {
2297
- let e = this.#t.view.value;
2298
- e === "day" ? this.#t.prevMonth() : e === "month" ? this.#t.prevYear() : this.#t.prevDecade();
2299
- }
2300
- #h() {
2301
- let e = this.#t.view.value;
2302
- e === "day" ? this.#t.nextMonth() : e === "month" ? this.#t.nextYear() : this.#t.nextDecade();
2303
- }
2304
- #g() {
2305
- let e = this.#t.view.value;
2306
- e === "day" ? this.#t.view.value = "month" : e === "month" && (this.#t.view.value = "year");
2307
- }
2308
- #_(e) {
2309
- if (this.#n.value) return;
2310
- let t = e.target.closest(".cal-cell");
2311
- if (!t || t.hasAttribute("disabled")) return;
2312
- let n = t.dataset.date, r = t.dataset.month, i = t.dataset.year;
2313
- n ? this.#v(n) : r === void 0 ? i !== void 0 && this.#t.selectYear(Number(i)) : this.#t.selectMonth(Number(r));
2314
- }
2315
- #v(e) {
2316
- if (this.range) if (this.#o === "idle") n(() => {
2317
- this.#t.selectDate(e), this.#t.setRange(e, null);
2318
- }), this.setAttribute("value", e), this.#o = "selecting";
2319
- else if (this.#o === "selecting") {
2320
- let t = this.#t.rangeStart.value;
2321
- if (!t) return;
2322
- this.#t.setRange(t, e), this.#o = "committed", this.dispatchEvent(new CustomEvent("ui-range-select", {
2323
- bubbles: !0,
2324
- composed: !0,
2325
- detail: {
2326
- start: this.#t.rangeStart.value,
2327
- end: this.#t.rangeEnd.value
2328
- }
2329
- }));
2330
- } else n(() => {
2331
- this.#t.value.value = null, this.#t.setRange(null, null);
2332
- }), this.removeAttribute("value"), this.#o = "idle";
2333
- else this.#t.selectDate(e), this.setAttribute("value", e), this.dispatchEvent(new CustomEvent("ui-change", {
2334
- bubbles: !0,
2335
- composed: !0,
2336
- detail: { value: e }
2337
- }));
2338
- }
2339
- #y(e) {
2340
- if (this.#n.value || !this.range || this.#o !== "selecting") return;
2341
- let t = e.target.closest(".cal-cell");
2342
- if (!t || t.hasAttribute("disabled")) return;
2343
- let n = t.dataset.date;
2344
- if (!n) return;
2345
- let r = this.#t.rangeStart.value;
2346
- r && this.#t.setRange(r, n);
2347
- }
2348
- #b = (e) => {
2349
- if (this.#n.value || this.#t.view.value !== "day") return;
2350
- let t = this.#t.days.value, n = this.#a.value, r = !0;
2351
- switch (e.key) {
2352
- case "ArrowRight":
2353
- n += 1;
2354
- break;
2355
- case "ArrowLeft":
2356
- --n;
2357
- break;
2358
- case "ArrowDown":
2359
- n += 7;
2360
- break;
2361
- case "ArrowUp":
2362
- n -= 7;
2363
- break;
2364
- case "Home":
2365
- n -= n % 7;
2366
- break;
2367
- case "End":
2368
- n = n - n % 7 + 6;
2369
- break;
2370
- case "PageDown":
2371
- e.shiftKey ? this.#t.nextYear() : this.#t.nextMonth();
2372
- break;
2373
- case "PageUp":
2374
- e.shiftKey ? this.#t.prevYear() : this.#t.prevMonth();
2375
- break;
2376
- case "Enter":
2377
- case " ": {
2378
- let e = t[n];
2379
- e && !e.isDisabled && this.#v(e.date);
2380
- break;
2381
- }
2382
- default: r = !1;
2383
- }
2384
- r && (e.preventDefault(), n = Math.max(0, Math.min(41, n)), this.#a.value = n, n < 0 && this.#t.prevMonth(), n > 41 && this.#t.nextMonth());
2385
- };
2386
- }, J = class {
2387
- open = t(!1);
2388
- value = t(null);
2389
- label = t("");
2390
- toggle() {
2391
- this.open.value = !this.open.value;
2392
- }
2393
- show() {
2394
- this.open.value = !0;
2395
- }
2396
- hide() {
2397
- this.open.value = !1;
2398
- }
2399
- select(e, t) {
2400
- n(() => {
2401
- this.value.value = e, this.label.value = t, this.open.value = !1;
2402
- });
2403
- }
2404
- reset() {
2405
- n(() => {
2406
- this.open.value = !1, this.value.value = null, this.label.value = "";
2407
- });
2408
- }
2409
- }, xe = class extends x(_) {
2410
- static observedAttributes = [
2411
- "value",
2412
- "disabled",
2413
- "name",
2414
- "options",
2415
- "src",
2416
- "placeholder",
2417
- "required"
2418
- ];
2419
- #e;
2420
- #t = new J();
2421
- #n = t(!1);
2422
- #r = t(!1);
2423
- #i;
2424
- #a = t([]);
2425
- #o = t(null);
2426
- #s = t("");
2427
- #c = !1;
2428
- #l = null;
2429
- #u = null;
2430
- #d = null;
2431
- #f = null;
2432
- #p = "";
2433
- constructor() {
2434
- super(), this.#e = this.attachInternals();
2435
- }
2436
- get controller() {
2437
- return this.#t;
2438
- }
2439
- get value() {
2440
- return this.#t.value.value;
2441
- }
2442
- set value(e) {
2443
- if (e === null) {
2444
- this.#t.reset();
2445
- return;
2446
- }
2447
- let t = this.querySelector(`ui-option[value="${CSS.escape(e)}"]`), n = t?.getAttribute("label") ?? t?.textContent?.trim() ?? e;
2448
- this.#t.select(e, n);
2449
- }
2450
- get name() {
2451
- return this.getAttribute("name") ?? "";
2452
- }
2453
- set name(e) {
2454
- this.setAttribute("name", e);
2455
- }
2456
- get disabled() {
2457
- return this.#n.value;
2458
- }
2459
- set disabled(e) {
2460
- this.#n.value = e, this.toggleAttribute("disabled", e);
2461
- }
2462
- get required() {
2463
- return this.#r.value;
2464
- }
2465
- set required(e) {
2466
- this.#r.value = e, this.toggleAttribute("required", e);
2467
- }
2468
- get options() {
2469
- return this.#a.value;
2470
- }
2471
- set options(e) {
2472
- this.#a.value = e, this.setAttribute("options", JSON.stringify(e));
2473
- }
2474
- get src() {
2475
- return this.#o.value;
2476
- }
2477
- set src(e) {
2478
- this.#o.value = e, e == null ? this.removeAttribute("src") : this.setAttribute("src", e);
2479
- }
2480
- get placeholder() {
2481
- return this.#s.value;
2482
- }
2483
- set placeholder(e) {
2484
- this.#s.value = e, e ? this.setAttribute("placeholder", e) : this.removeAttribute("placeholder");
2485
- }
2486
- #m(e) {
2487
- return w(e, "ui-select");
2488
- }
2489
- async #h(e) {
2490
- this.#l = await T(e, this.#l, this.#a, "ui-select");
2491
- }
2492
- #g() {
2493
- let e = document.createElement("ui-button");
2494
- e.setAttribute("justify", "spread");
2495
- let t = document.createElement("span");
2496
- t.setAttribute("slot", "label"), t.textContent = this.#s.value || "\xA0", e.appendChild(t);
2497
- let n = document.createElement("ui-icon");
2498
- n.setAttribute("name", "caret-up-down"), n.setAttribute("slot", "trailing"), e.appendChild(n);
2499
- let r = document.createElement("ui-listbox");
2500
- r.setAttribute("popover", "manual"), this.appendChild(e), this.appendChild(r);
2501
- }
2502
- #_(e) {
2503
- let t = this.#u;
2504
- if (t) {
2505
- for (; t.firstChild;) t.removeChild(t.firstChild);
2506
- for (let n of e) {
2507
- let e = document.createElement("ui-option");
2508
- e.setAttribute("value", n.value), e.setAttribute("label", n.label), e.textContent = n.label, n.disabled && e.setAttribute("disabled", ""), t.appendChild(e);
2509
- }
2510
- }
2511
- }
2512
- attributeChangedCallback(e, t, n) {
2513
- if (t !== n) {
2514
- switch (e) {
2515
- case "value":
2516
- if (n !== null) {
2517
- let e = this.querySelector(`ui-option[value="${CSS.escape(n)}"]`), t = e?.getAttribute("label") ?? e?.textContent?.trim() ?? n;
2518
- this.#t.select(n, t);
2519
- } else this.#t.reset();
2520
- break;
2521
- case "disabled":
2522
- this.#n.value = n !== null;
2523
- break;
2524
- case "required":
2525
- this.#r.value = n !== null;
2526
- break;
2527
- case "options":
2528
- n ? this.#a.value = this.#m(n) : this.#a.value = [];
2529
- break;
2530
- case "src":
2531
- this.#o.value = n;
2532
- break;
2533
- case "placeholder":
2534
- this.#s.value = n ?? "";
2535
- break;
2536
- }
2537
- super.attributeChangedCallback?.(e, t, n);
2538
- }
2539
- }
2540
- setup() {
2541
- if (super.setup(), this.#i = new l(this), this.#c = this.hasAttribute("options") || this.hasAttribute("src"), this.#c) {
2542
- let e = this.getAttribute("options");
2543
- e && (this.#a.value = this.#m(e)), this.#o.value = this.getAttribute("src"), this.#s.value = this.getAttribute("placeholder") ?? "", this.#g();
2544
- }
2545
- let t = this.querySelector(":scope > ui-button");
2546
- this.#d = t;
2547
- let n = this.querySelector(":scope > ui-listbox[popover]");
2548
- this.#u = n, n?.setAttribute("popover", "manual"), t && n && this.#i.wirePopover(t, n), t?.setAttribute("aria-haspopup", "listbox"), t && n && (n.id ||= e("lb"), t.setAttribute("aria-controls", n.id)), this.#c && (this.addEffect(() => {
2549
- let e = this.#a.value;
2550
- this.#_(e);
2551
- }), this.addEffect(() => {
2552
- let e = this.#o.value;
2553
- e && this.#h(e);
2554
- }), this.addEffect(() => {
2555
- let e = this.#s.value, n = this.#t.label.value, r = t?.querySelector("[slot=\"label\"]");
2556
- r && !n && (r.textContent = e || "\xA0");
2557
- })), this.deferChildren(() => {
2558
- let e = this.getAttribute("value");
2559
- if (e) {
2560
- let t = this.querySelector(`ui-option[value="${CSS.escape(e)}"]`), n = t?.getAttribute("label") ?? t?.textContent?.trim() ?? e;
2561
- this.#t.value.value = e, this.#t.label.value = n, this.#f = e, this.#p = n;
2562
- }
2563
- this.addEffect(() => {
2564
- let e = this.#t.label.value, n = t?.querySelector("[slot=\"label\"]");
2565
- n && (n.textContent = e || (this.#c ? this.#s.value || "\xA0" : n.textContent ?? ""));
2566
- }), this.addEffect(() => {
2567
- let e = this.#t.value.value, t = n?.querySelectorAll("ui-option") ?? [];
2568
- for (let n of t) {
2569
- let t = n.getAttribute("value") === e;
2570
- n.setAttribute("aria-selected", String(t));
2571
- }
2572
- });
2573
- }), this.addEffect(v(this, this.#n, this.#e)), this.addEffect(() => {
2574
- let e = this.#n.value;
2575
- t && t.toggleAttribute("disabled", e), e && this.#t.open.peek() && this.#t.hide();
2576
- }), this.#r.value = this.hasAttribute("required"), this.addEffect(() => {
2577
- let e = this.#t.value.value;
2578
- this.#r.value && (e === null || e === "") ? this.#e.setValidity({ valueMissing: !0 }, "Please select an option.", this) : this.#e.setValidity({});
2579
- }), this.addEffect(() => {
2580
- let e = this.#t.open.value;
2581
- this.#i.syncPopover(e), t?.setAttribute("aria-expanded", String(e));
2582
- }), this.addEffect(() => {
2583
- let e = this.#t.value.value;
2584
- this.#e.setFormValue(e ?? ""), e == null ? this.removeAttribute("value") : this.setAttribute("value", e);
2585
- }), t?.addEventListener("ui-press", this.#v), this.addEventListener("ui-change", this.#y), this.addEventListener("ui-select", this.#b), this.addEventListener("ui-dismiss", this.#x), t?.addEventListener("keydown", this.#S);
2586
- }
2587
- #v = () => {
2588
- this.#n.value || this.#t.toggle();
2589
- };
2590
- #y = (e) => {
2591
- e.target !== this && e.stopImmediatePropagation();
2592
- };
2593
- #b = (e) => {
2594
- let t = e.detail;
2595
- this.#t.select(t.value, t.label), this.dispatchEvent(new CustomEvent("ui-change", {
2596
- bubbles: !0,
2597
- composed: !0,
2598
- detail: t
2599
- }));
2600
- };
2601
- #x = () => {
2602
- this.#t.hide();
2603
- };
2604
- #S = (e) => {
2605
- if (this.#n.value) return;
2606
- let t = this.#u;
2607
- switch (e.key) {
2608
- case "ArrowDown":
2609
- case "ArrowUp": {
2610
- e.preventDefault();
2611
- let n = t?.controller;
2612
- if (this.#t.open.value || this.#t.show(), n) {
2613
- let r = t?.querySelectorAll(":scope ui-option:not([disabled])")?.length ?? 0;
2614
- n.moveActive(e.key === "ArrowDown" ? 1 : -1, r);
2615
- }
2616
- break;
2617
- }
2618
- case "Enter":
2619
- case " ":
2620
- if (e.preventDefault(), this.#t.open.value) {
2621
- let e = t?.getActiveOption();
2622
- e && e.click();
2623
- } else this.#t.toggle();
2624
- break;
2625
- case "Escape":
2626
- this.#t.open.value && (e.preventDefault(), this.#t.hide());
2627
- break;
2628
- case "Home": {
2629
- e.preventDefault();
2630
- let n = t?.controller;
2631
- n && (n.activeIndex.value = 0);
2632
- break;
2633
- }
2634
- case "End": {
2635
- e.preventDefault();
2636
- let n = t?.controller;
2637
- if (n) {
2638
- let e = t?.querySelectorAll(":scope ui-option:not([disabled])");
2639
- n.activeIndex.value = Math.max(0, (e?.length ?? 1) - 1);
2640
- }
2641
- break;
2642
- }
2643
- }
2644
- };
2645
- teardown() {
2646
- this.#d?.removeEventListener("ui-press", this.#v), this.#d?.removeEventListener("keydown", this.#S), this.removeEventListener("ui-change", this.#y), this.removeEventListener("ui-select", this.#b), this.removeEventListener("ui-dismiss", this.#x), this.#d = null, this.#l?.abort(), this.#l = null, this.#u = null, this.#i.destroy(), super.teardown();
2647
- }
2648
- onFormReset() {
2649
- this.#f === null ? this.#t.reset() : this.#t.select(this.#f, this.#p);
2650
- }
2651
- onFormStateRestore(e) {
2652
- typeof e == "string" && e && (this.value = e);
2653
- }
2654
- onFormDisabled(e) {
2655
- this.#n.value = e;
2656
- }
2657
- }, Se = class extends x(_) {
2658
- static observedAttributes = [
2659
- "value",
2660
- "disabled",
2661
- "name",
2662
- "options",
2663
- "src",
2664
- "placeholder",
2665
- "required"
2666
- ];
2667
- #e;
2668
- #t = new C();
2669
- #n = t(!1);
2670
- #r = t(!1);
2671
- #i = t(!1);
2672
- #a;
2673
- #o = e("listbox");
2674
- #s = null;
2675
- #c = t([]);
2676
- #l = t(null);
2677
- #u = t("");
2678
- #d = !1;
2679
- #f = null;
2680
- #p = null;
2681
- #m = null;
2682
- #h = "";
2683
- constructor() {
2684
- super(), this.#e = this.attachInternals();
2685
- }
2686
- get store() {
2687
- return this.#t;
2688
- }
2689
- get value() {
2690
- return this.#t.value.value;
2691
- }
2692
- set value(e) {
2693
- if (e === null) {
2694
- n(() => {
2695
- this.#t.clearSelection(), this.#t.query.value = "", this.#t.activeIndex.value = -1, this.#n.value = !1;
2696
- });
2697
- return;
2698
- }
2699
- this.#t.select(e);
2700
- }
2701
- get name() {
2702
- return this.getAttribute("name") ?? "";
2703
- }
2704
- set name(e) {
2705
- this.setAttribute("name", e);
2706
- }
2707
- get disabled() {
2708
- return this.#r.value;
2709
- }
2710
- set disabled(e) {
2711
- this.#r.value = e, this.toggleAttribute("disabled", e);
2712
- }
2713
- get required() {
2714
- return this.#i.value;
2715
- }
2716
- set required(e) {
2717
- this.#i.value = e, this.toggleAttribute("required", e);
2718
- }
2719
- get options() {
2720
- return this.#c.value;
2721
- }
2722
- set options(e) {
2723
- this.#c.value = e, this.setAttribute("options", JSON.stringify(e));
2724
- }
2725
- get src() {
2726
- return this.#l.value;
2727
- }
2728
- set src(e) {
2729
- this.#l.value = e, e == null ? this.removeAttribute("src") : this.setAttribute("src", e);
2730
- }
2731
- get placeholder() {
2732
- return this.#u.value;
2733
- }
2734
- set placeholder(e) {
2735
- this.#u.value = e, e ? this.setAttribute("placeholder", e) : this.removeAttribute("placeholder");
2736
- }
2737
- #g(e) {
2738
- return w(e, "ui-combobox");
2739
- }
2740
- async #_(e) {
2741
- this.#f = await T(e, this.#f, this.#c, "ui-combobox");
2742
- }
2743
- #v() {
2744
- let e = document.createElement("ui-input"), t = this.#u.value;
2745
- t && e.setAttribute("placeholder", t);
2746
- let n = this.getAttribute("size");
2747
- n && e.setAttribute("size", n);
2748
- let r = document.createElement("ui-listbox");
2749
- r.setAttribute("popover", "manual"), this.appendChild(e), this.appendChild(r);
2750
- }
2751
- #y(e) {
2752
- let t = this.#p;
2753
- if (t) {
2754
- for (; t.firstChild;) t.removeChild(t.firstChild);
2755
- for (let n of e) {
2756
- let e = document.createElement("ui-option");
2757
- e.setAttribute("value", n.value), e.setAttribute("label", n.label), e.textContent = n.label, n.disabled && e.setAttribute("disabled", ""), t.appendChild(e);
2758
- }
2759
- this.#t.data.value = e;
2760
- }
2761
- }
2762
- attributeChangedCallback(e, t, r) {
2763
- if (t !== r) {
2764
- switch (e) {
2765
- case "value":
2766
- if (r !== null) {
2767
- let e = this.querySelector(`ui-option[value="${CSS.escape(r)}"]`), t = e?.getAttribute("label") ?? e?.textContent?.trim() ?? r;
2768
- this.#t.select(r), this.#t.query.value = t, this.#s && "value" in this.#s && (this.#s.value = t);
2769
- } else n(() => {
2770
- this.#t.clearSelection(), this.#t.query.value = "";
2771
- }), this.#s && "value" in this.#s && (this.#s.value = "");
2772
- break;
2773
- case "disabled":
2774
- this.#r.value = r !== null;
2775
- break;
2776
- case "required":
2777
- this.#i.value = r !== null;
2778
- break;
2779
- case "options":
2780
- r ? this.#c.value = this.#g(r) : this.#c.value = [];
2781
- break;
2782
- case "src":
2783
- this.#l.value = r;
2784
- break;
2785
- case "placeholder":
2786
- this.#u.value = r ?? "";
2787
- break;
2788
- }
2789
- super.attributeChangedCallback?.(e, t, r);
2790
- }
2791
- }
2792
- setup() {
2793
- if (super.setup(), this.#a = new l(this), this.#d = this.hasAttribute("options") || this.hasAttribute("src"), this.#d) {
2794
- let e = this.getAttribute("options");
2795
- e && (this.#c.value = this.#g(e)), this.#l.value = this.getAttribute("src"), this.#u.value = this.getAttribute("placeholder") ?? "", this.#v();
2796
- }
2797
- let t = this.querySelector(":scope > ui-input");
2798
- this.#s = t;
2799
- let n = this.querySelector(":scope > ui-listbox[popover]");
2800
- this.#p = n, n?.setAttribute("popover", "manual"), n?.setAttribute("virtual-focus", ""), t && n && (this.#a.wirePopover(t, n), n.id ||= this.#o), t?.setAttribute("role", "combobox"), t?.setAttribute("aria-autocomplete", "list"), t?.setAttribute("aria-controls", n?.id ?? ""), t?.setAttribute("aria-expanded", "false"), this.#d && (this.addEffect(() => {
2801
- let e = this.#c.value;
2802
- this.#y(e);
2803
- }), this.addEffect(() => {
2804
- let e = this.#l.value;
2805
- e && this.#_(e);
2806
- }), this.addEffect(() => {
2807
- let e = this.#u.value;
2808
- t && (e ? t.setAttribute("placeholder", e) : t.removeAttribute("placeholder"));
2809
- })), this.deferChildren(() => {
2810
- if (!this.#d) {
2811
- let e = n?.querySelectorAll("ui-option") ?? [];
2812
- this.#t.data.value = [...e].map((e) => ({
2813
- value: e.getAttribute("value") ?? "",
2814
- label: e.getAttribute("label") ?? e.textContent?.trim() ?? ""
2815
- }));
2816
- }
2817
- let r = this.getAttribute("value");
2818
- if (r) {
2819
- let e = this.querySelector(`ui-option[value="${CSS.escape(r)}"]`), t = e?.getAttribute("label") ?? e?.textContent?.trim() ?? r;
2820
- this.#t.value.value = r, this.#t.query.value = t, this.#m = r, this.#h = t;
2821
- }
2822
- this.addEffect(() => {
2823
- let e = this.#t.view.value, t = new Set(e.map((e) => e.value)), r = n?.querySelectorAll("ui-option") ?? [];
2824
- for (let e of r) e.toggleAttribute("hidden", !t.has(e.getAttribute("value") ?? ""));
2825
- }), this.addEffect(() => {
2826
- this.#t.view.value;
2827
- let r = this.#t.activeIndex.value, i = [...n?.querySelectorAll("ui-option:not([hidden]):not([disabled])") ?? []];
2828
- for (let e = 0; e < i.length; e++) i[e].toggleAttribute("active", e === r);
2829
- let a = i[r];
2830
- a ? (a.scrollIntoView({ block: "nearest" }), a.id ||= e("opt"), t?.setAttribute("aria-activedescendant", a.id)) : t?.removeAttribute("aria-activedescendant");
2831
- }), this.addEffect(() => {
2832
- let e = this.#t.value.value, t = n?.querySelectorAll("ui-option") ?? [];
2833
- for (let n of t) {
2834
- let t = n.getAttribute("value") === e;
2835
- n.setAttribute("aria-selected", String(t));
2836
- }
2837
- });
2838
- }), this.addEffect(v(this, this.#r, this.#e)), this.addEffect(() => {
2839
- let e = this.#r.value;
2840
- t && t.toggleAttribute("disabled", e), e && this.#n.peek() && (this.#n.value = !1);
2841
- }), this.#i.value = this.hasAttribute("required"), this.addEffect(() => {
2842
- let e = this.#t.value.value;
2843
- this.#i.value && (e === null || e === "") ? this.#e.setValidity({ valueMissing: !0 }, "Please select an option.", this) : this.#e.setValidity({});
2844
- }), this.addEffect(() => {
2845
- let e = this.#n.value;
2846
- this.#a.syncPopover(e), t?.setAttribute("aria-expanded", String(e));
2847
- }), this.addEffect(() => {
2848
- let e = this.#t.value.value;
2849
- this.#e.setFormValue(e ?? ""), e == null ? this.removeAttribute("value") : this.setAttribute("value", e);
2850
- }), t?.addEventListener("focus", this.#b), this.addEventListener("ui-input", this.#x), this.addEventListener("ui-change", this.#S), this.addEventListener("ui-select", this.#C), this.addEventListener("ui-dismiss", this.#w), t?.addEventListener("keydown", this.#T);
2851
- }
2852
- #b = () => {
2853
- !this.#r.value && !this.#n.value && (this.#n.value = !0);
2854
- };
2855
- #x = (e) => {
2856
- this.#t.setQuery(e.detail.value), this.#n.value = !0;
2857
- };
2858
- #S = (e) => {
2859
- e.target !== this && e.stopImmediatePropagation();
2860
- };
2861
- #C = (e) => {
2862
- let t = e.detail;
2863
- n(() => {
2864
- this.#t.select(t.value), this.#t.query.value = t.label, this.#t.activeIndex.value = -1, this.#n.value = !1;
2865
- });
2866
- let r = this.#s;
2867
- r && "value" in r && (r.value = t.label), this.dispatchEvent(new CustomEvent("ui-change", {
2868
- bubbles: !0,
2869
- composed: !0,
2870
- detail: t
2871
- }));
2872
- };
2873
- #w = () => {
2874
- this.#n.value = !1;
2875
- };
2876
- #T = (e) => {
2877
- if (this.#r.value) return;
2878
- let t = this.#s;
2879
- switch (e.key) {
2880
- case "ArrowDown":
2881
- e.preventDefault(), this.#n.value || (this.#n.value = !0), this.#t.moveActive(1);
2882
- break;
2883
- case "ArrowUp":
2884
- e.preventDefault(), this.#n.value || (this.#n.value = !0), this.#t.moveActive(-1);
2885
- break;
2886
- case "Enter":
2887
- if (this.#n.value) {
2888
- e.preventDefault();
2889
- let n = this.#t.activeItem.value;
2890
- this.#t.selectActive(), n && t && "value" in t && (this.#t.query.value = n.label, t.value = n.label), this.#t.activeIndex.value = -1, this.#n.value = !1;
2891
- }
2892
- break;
2893
- case "Escape":
2894
- this.#n.value && (e.preventDefault(), this.#n.value = !1);
2895
- break;
2896
- case "Home":
2897
- this.#n.value && (e.preventDefault(), this.#t.activeIndex.value = 0);
2898
- break;
2899
- case "End":
2900
- if (this.#n.value) {
2901
- e.preventDefault();
2902
- let t = this.#t.view.value.length;
2903
- this.#t.activeIndex.value = Math.max(0, t - 1);
2904
- }
2905
- break;
2906
- }
2907
- };
2908
- teardown() {
2909
- this.#s?.removeEventListener("focus", this.#b), this.#s?.removeEventListener("keydown", this.#T), this.removeEventListener("ui-input", this.#x), this.removeEventListener("ui-change", this.#S), this.removeEventListener("ui-select", this.#C), this.removeEventListener("ui-dismiss", this.#w), this.#s = null, this.#p = null, this.#f?.abort(), this.#f = null, this.#a.destroy(), super.teardown();
2910
- }
2911
- onFormReset() {
2912
- n(() => {
2913
- this.#m === null ? (this.#t.clearSelection(), this.#t.query.value = "") : (this.#t.select(this.#m), this.#t.query.value = this.#h), this.#t.activeIndex.value = -1, this.#n.value = !1;
2914
- });
2915
- let e = this.querySelector(":scope > ui-input");
2916
- e && (e.value = this.#h);
2917
- }
2918
- onFormStateRestore(e) {
2919
- typeof e == "string" && e && (this.value = e);
2920
- }
2921
- onFormDisabled(e) {
2922
- this.#r.value = e;
2923
- }
2924
- }, Ce = class extends _ {
2925
- static observedAttributes = ["disabled", "required"];
2926
- #e = e("field-label");
2927
- #t = e("field-desc");
2928
- #n = e("field-err");
2929
- #r = null;
2930
- setup() {
2931
- super.setup(), this.deferChildren(() => {
2932
- this.#i(), this.#a(), this.#o(), this.#s(), this.#c();
2933
- }), this.addEventListener("ui-invalid", this.#l), this.addEventListener("ui-valid", this.#u);
2934
- }
2935
- teardown() {
2936
- this.removeEventListener("ui-invalid", this.#l), this.removeEventListener("ui-valid", this.#u), super.teardown();
2937
- }
2938
- attributeChangedCallback(e, t, n) {
2939
- if (t !== n) {
2940
- switch (e) {
2941
- case "disabled":
2942
- this.#s();
2943
- break;
2944
- case "required":
2945
- this.#c();
2946
- break;
2947
- }
2948
- super.attributeChangedCallback(e, t, n);
2949
- }
2950
- }
2951
- #i() {
2952
- let e = this.querySelectorAll("ui-input, ui-select, ui-combobox, ui-checkbox, ui-switch, ui-radio, ui-range, ui-textarea, ui-input-otp, input, select, textarea");
2953
- for (let t of e) if (!t.hasAttribute("slot")) {
2954
- this.#r = t;
2955
- break;
2956
- }
2957
- }
2958
- #a() {
2959
- let e = this.querySelector("[slot=\"label\"]"), t = this.querySelector("[slot=\"description\"]"), n = this.querySelector("[slot=\"error\"]");
2960
- e && !e.id && (e.id = this.#e), t && !t.id && (t.id = this.#t), n && !n.id && (n.id = this.#n);
2961
- }
2962
- #o() {
2963
- if (!this.#r) return;
2964
- let e = this.querySelector("[slot=\"label\"]"), t = this.querySelector("[slot=\"description\"]");
2965
- e && this.#r.setAttribute("aria-labelledby", e.id), t && this.#r.setAttribute("aria-describedby", t.id);
2966
- }
2967
- #s() {
2968
- let e = this.hasAttribute("disabled");
2969
- e ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled"), this.#r && (e ? this.#r.setAttribute("disabled", "") : this.#r.removeAttribute("disabled"));
2970
- }
2971
- #c() {
2972
- this.#r && (this.hasAttribute("required") ? this.#r.setAttribute("required", "") : this.#r.removeAttribute("required"));
2973
- }
2974
- #l = (e) => {
2975
- let t = e;
2976
- this.setAttribute("invalid", "");
2977
- let n = this.querySelector("[slot=\"error\"]");
2978
- n && t.detail?.message && (n.textContent = t.detail.message), this.#d(!0);
2979
- };
2980
- #u = () => {
2981
- this.removeAttribute("invalid"), this.#d(!1);
2982
- };
2983
- #d(e) {
2984
- if (!this.#r) return;
2985
- let t = this.querySelector("[slot=\"description\"]"), n = this.querySelector("[slot=\"error\"]"), r = [];
2986
- t && r.push(t.id), e && n && r.push(n.id), r.length ? this.#r.setAttribute("aria-describedby", r.join(" ")) : this.#r.removeAttribute("aria-describedby");
2987
- }
2988
- }, we = class extends x(_) {
2989
- static observedAttributes = [
2990
- "value",
2991
- "placeholder",
2992
- "disabled",
2993
- "readonly",
2994
- "required",
2995
- "rows",
2996
- "maxlength",
2997
- "autogrow",
2998
- "pattern"
2999
- ];
3000
- #e;
3001
- #t = t(!1);
3002
- #n = t(!1);
3003
- #r = t(NaN);
3004
- #i = t("");
3005
- #a = "";
3006
- #o = 0;
3007
- #s = null;
3008
- constructor() {
3009
- super(), this.#e = this.attachInternals(), this.#e.role = "textbox", this.#e.ariaMultiLine = "true";
3010
- }
3011
- get value() {
3012
- return this.textContent ?? "";
3013
- }
3014
- set value(e) {
3015
- this.textContent = e, this.#i.value = e, this.#e.setFormValue(e), this.#c(), this.#l();
3016
- }
3017
- get placeholder() {
3018
- return this.getAttribute("placeholder") ?? "";
3019
- }
3020
- set placeholder(e) {
3021
- this.setAttribute("placeholder", e);
3022
- }
3023
- get name() {
3024
- return this.getAttribute("name") ?? "";
3025
- }
3026
- set name(e) {
3027
- this.setAttribute("name", e);
3028
- }
3029
- get disabled() {
3030
- return this.#t.value;
3031
- }
3032
- set disabled(e) {
3033
- this.#t.value = e, this.toggleAttribute("disabled", e);
3034
- }
3035
- get readOnly() {
3036
- return this.hasAttribute("readonly");
3037
- }
3038
- set readOnly(e) {
3039
- this.toggleAttribute("readonly", e), this.setAttribute("contenteditable", e ? "false" : "plaintext-only");
3040
- }
3041
- get required() {
3042
- return this.#n.value;
3043
- }
3044
- set required(e) {
3045
- this.#n.value = e, this.toggleAttribute("required", e);
3046
- }
3047
- attributeChangedCallback(e, t, n) {
3048
- if (t !== n) {
3049
- switch (e) {
3050
- case "value":
3051
- this.textContent = n ?? "", this.#i.value = n ?? "", this.#e.setFormValue(n ?? ""), this.#c(), this.#l();
3052
- break;
3053
- case "disabled":
3054
- this.#t.value = n !== null, this.setAttribute("contenteditable", n !== null || this.hasAttribute("readonly") ? "false" : "plaintext-only");
3055
- break;
3056
- case "readonly":
3057
- this.setAttribute("contenteditable", n !== null || this.#t.value ? "false" : "plaintext-only");
3058
- break;
3059
- case "required":
3060
- this.#n.value = n !== null;
3061
- break;
3062
- case "maxlength":
3063
- this.#r.value = n === null ? NaN : parseInt(n, 10);
3064
- break;
3065
- case "autogrow":
3066
- this.#l();
3067
- break;
3068
- case "pattern":
3069
- this.#s = n;
3070
- break;
3071
- }
3072
- super.attributeChangedCallback?.(e, t, n);
3073
- }
3074
- }
3075
- setup() {
3076
- super.setup(), this.setAttribute("aria-multiline", "true"), this.hasAttribute("contenteditable") || this.setAttribute("contenteditable", "plaintext-only"), this.#n.value = this.hasAttribute("required");
3077
- let e = this.getAttribute("maxlength");
3078
- this.#r.value = e === null ? NaN : parseInt(e, 10), this.#s = this.getAttribute("pattern"), this.#a = this.getAttribute("value") ?? this.textContent ?? "", this.#i.value = this.textContent ?? "", this.#c(), this.#l(), this.addEffect(v(this, this.#t, this.#e, { manageTabindex: !0 })), this.addEffect(() => {
3079
- let e = this.#i.value, t = this.#r.value;
3080
- this.#n.value && e === "" ? this.#e.setValidity({ valueMissing: !0 }, "Please fill out this field.", this) : !isNaN(t) && e.length > t ? this.#e.setValidity({ tooLong: !0 }, `Please shorten this text to ${t} characters or less.`, this) : this.#s !== null && e !== "" && !RegExp(`^(?:${this.#s})$`).test(e) ? this.#e.setValidity({ patternMismatch: !0 }, "Please match the requested format.", this) : this.#e.setValidity({});
3081
- }), this.addEventListener("input", this.#u), this.addEventListener("blur", this.#d);
3082
- }
3083
- teardown() {
3084
- cancelAnimationFrame(this.#o), this.removeEventListener("input", this.#u), this.removeEventListener("blur", this.#d), super.teardown();
3085
- }
3086
- onFormDisabled(e) {
3087
- this.#t.value = e, this.setAttribute("contenteditable", e || this.hasAttribute("readonly") ? "false" : "plaintext-only");
3088
- }
3089
- onFormReset() {
3090
- this.textContent = this.#a, this.#i.value = this.#a, this.#e.setFormValue(this.#a), this.#c(), this.#l(), this.#t.value = this.hasAttribute("disabled"), this.setAttribute("contenteditable", this.#t.value || this.hasAttribute("readonly") ? "false" : "plaintext-only");
3091
- }
3092
- onFormStateRestore(e) {
3093
- this.value = typeof e == "string" ? e : "";
3094
- }
3095
- #c() {
3096
- (this.textContent ?? "").trim() === "" ? this.#e.states.add("empty") : this.#e.states.delete("empty");
3097
- }
3098
- #l() {
3099
- !this.hasAttribute("autogrow") || !this.isConnected || (this.style.setProperty("--_autogrow-height", "auto"), cancelAnimationFrame(this.#o), this.#o = requestAnimationFrame(() => {
3100
- this.style.setProperty("--_autogrow-height", `${this.scrollHeight}px`);
3101
- }));
3102
- }
3103
- #u = () => {
3104
- let e = this.textContent ?? "";
3105
- this.#i.value = e, this.#e.setFormValue(e), this.#c(), this.#l(), this.dispatchEvent(new CustomEvent("ui-input", {
3106
- bubbles: !0,
3107
- composed: !0,
3108
- detail: { value: e }
3109
- }));
3110
- };
3111
- #d = () => {
3112
- this.dispatchEvent(new CustomEvent("ui-change", {
3113
- bubbles: !0,
3114
- composed: !0,
3115
- detail: { value: this.textContent ?? "" }
3116
- }));
3117
- };
3118
- }, Te = class extends x(_) {
3119
- static observedAttributes = [
3120
- "value",
3121
- "min",
3122
- "max",
3123
- "step",
3124
- "disabled",
3125
- "name",
3126
- "required"
3127
- ];
3128
- #e;
3129
- #t = t(!1);
3130
- #n = t(!1);
3131
- #r = t(50);
3132
- #i = 50;
3133
- #a = t(0);
3134
- #o = t(100);
3135
- #s = t(1);
3136
- #c = null;
3137
- #l = !1;
3138
- constructor() {
3139
- super(), this.#e = this.attachInternals(), this.#e.role = "slider";
3140
- }
3141
- get value() {
3142
- return this.#r.value;
3143
- }
3144
- set value(e) {
3145
- this.#r.value = this.#u(e);
3146
- }
3147
- get min() {
3148
- return this.#a.value;
3149
- }
3150
- set min(e) {
3151
- this.#a.value = e, this.setAttribute("min", String(e));
3152
- }
3153
- get max() {
3154
- return this.#o.value;
3155
- }
3156
- set max(e) {
3157
- this.#o.value = e, this.setAttribute("max", String(e));
3158
- }
3159
- get step() {
3160
- return this.#s.value;
3161
- }
3162
- set step(e) {
3163
- this.#s.value = e, this.setAttribute("step", String(e));
3164
- }
3165
- get disabled() {
3166
- return this.#t.value;
3167
- }
3168
- set disabled(e) {
3169
- this.#t.value = e, this.toggleAttribute("disabled", e);
3170
- }
3171
- get required() {
3172
- return this.#n.value;
3173
- }
3174
- set required(e) {
3175
- this.#n.value = e, this.toggleAttribute("required", e);
3176
- }
3177
- get name() {
3178
- return this.getAttribute("name") ?? "";
3179
- }
3180
- set name(e) {
3181
- this.setAttribute("name", e);
3182
- }
3183
- attributeChangedCallback(e, t, n) {
3184
- if (t !== n) {
3185
- switch (e) {
3186
- case "value":
3187
- this.#r.value = this.#u(parseFloat(n ?? "50") || 50);
3188
- break;
3189
- case "min":
3190
- this.#a.value = parseFloat(n ?? "0") || 0;
3191
- break;
3192
- case "max":
3193
- this.#o.value = parseFloat(n ?? "100") || 100;
3194
- break;
3195
- case "step":
3196
- this.#s.value = parseFloat(n ?? "1") || 1;
3197
- break;
3198
- case "disabled":
3199
- this.#t.value = n !== null;
3200
- break;
3201
- case "required":
3202
- this.#n.value = n !== null;
3203
- break;
3204
- }
3205
- super.attributeChangedCallback(e, t, n);
3206
- }
3207
- }
3208
- setup() {
3209
- super.setup(), this.#i = this.#r.value, this.#c = document.createElement("div"), this.#c.classList.add("ui-range-thumb"), this.appendChild(this.#c), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.addEffect(v(this, this.#t, this.#e, { manageTabindex: !0 })), this.#n.value = this.hasAttribute("required"), this.addEffect(() => {
3210
- let e = this.#r.value, t = this.#d();
3211
- this.style.setProperty("--_progress", String(t)), this.setAttribute("aria-valuenow", String(e)), this.setAttribute("aria-valuemin", String(this.#a.value)), this.setAttribute("aria-valuemax", String(this.#o.value)), this.#e.setFormValue(String(e));
3212
- }), this.addEventListener("pointerdown", this.#p), this.addEventListener("keydown", this.#_);
3213
- }
3214
- teardown() {
3215
- this.removeEventListener("pointerdown", this.#p), this.removeEventListener("keydown", this.#_), this.#c &&= (this.#c.remove(), null), super.teardown();
3216
- }
3217
- onFormDisabled(e) {
3218
- this.#t.value = e;
3219
- }
3220
- onFormReset() {
3221
- this.#r.value = this.#i;
3222
- }
3223
- onFormStateRestore(e) {
3224
- if (typeof e == "string") {
3225
- let t = parseFloat(e);
3226
- isNaN(t) || (this.value = t);
3227
- }
3228
- }
3229
- #u(e) {
3230
- let t = this.#a.value, n = this.#o.value, r = this.#s.value, i = Math.round((e - t) / r) * r + t;
3231
- return Math.min(n, Math.max(t, i));
3232
- }
3233
- #d() {
3234
- let e = this.#o.value - this.#a.value;
3235
- return e === 0 ? 0 : (this.#r.value - this.#a.value) / e;
3236
- }
3237
- #f(e) {
3238
- let t = this.getBoundingClientRect(), n = this.#c?.offsetWidth ?? 0, r = n / 2, i = t.width - n;
3239
- if (i <= 0) return this.#a.value;
3240
- let a = e.clientX - t.left - r, o = Math.min(1, Math.max(0, a / i));
3241
- return this.#a.value + o * (this.#o.value - this.#a.value);
3242
- }
3243
- #p = (e) => {
3244
- if (e.button !== 0 || this.#t.value) return;
3245
- this.setPointerCapture(e.pointerId), this.#l = !0, this.toggleAttribute("pressed", !0);
3246
- let t = this.#u(this.#f(e));
3247
- this.#r.value = t, this.#v(), this.addEventListener("pointermove", this.#m), this.addEventListener("pointerup", this.#h), this.addEventListener("pointercancel", this.#g);
3248
- };
3249
- #m = (e) => {
3250
- if (!this.#l || this.#t.value) return;
3251
- let t = this.#u(this.#f(e));
3252
- t !== this.#r.value && (this.#r.value = t, this.#v());
3253
- };
3254
- #h = () => {
3255
- this.#l = !1, this.removeAttribute("pressed"), this.removeEventListener("pointermove", this.#m), this.removeEventListener("pointerup", this.#h), this.removeEventListener("pointercancel", this.#g), this.#y();
3256
- };
3257
- #g = () => {
3258
- this.#l = !1, this.removeAttribute("pressed"), this.removeEventListener("pointermove", this.#m), this.removeEventListener("pointerup", this.#h), this.removeEventListener("pointercancel", this.#g);
3259
- };
3260
- #_ = (e) => {
3261
- if (this.#t.value) return;
3262
- let t = this.#s.value, n = t * 10, r = this.#r.value;
3263
- switch (e.key) {
3264
- case "ArrowRight":
3265
- case "ArrowUp":
3266
- r += t;
3267
- break;
3268
- case "ArrowLeft":
3269
- case "ArrowDown":
3270
- r -= t;
3271
- break;
3272
- case "PageUp":
3273
- r += n;
3274
- break;
3275
- case "PageDown":
3276
- r -= n;
3277
- break;
3278
- case "Home":
3279
- r = this.#a.value;
3280
- break;
3281
- case "End":
3282
- r = this.#o.value;
3283
- break;
3284
- default: return;
3285
- }
3286
- e.preventDefault(), r = this.#u(r), r !== this.#r.value && (this.#r.value = r, this.#v(), this.#y());
3287
- };
3288
- #v() {
3289
- this.dispatchEvent(new CustomEvent("ui-input", {
3290
- bubbles: !0,
3291
- composed: !0,
3292
- detail: { value: this.#r.value }
3293
- }));
3294
- }
3295
- #y() {
3296
- this.dispatchEvent(new CustomEvent("ui-change", {
3297
- bubbles: !0,
3298
- composed: !0,
3299
- detail: { value: this.#r.value }
3300
- }));
3301
- }
3302
- }, Ee = class extends x(_) {
3303
- static observedAttributes = [
3304
- "value",
3305
- "length",
3306
- "disabled",
3307
- "name",
3308
- "pattern",
3309
- "mask",
3310
- "required"
3311
- ];
3312
- #e;
3313
- #t = t(!1);
3314
- #n;
3315
- #r = [];
3316
- #i = [];
3317
- #a = 6;
3318
- #o = /[0-9]/;
3319
- #s = null;
3320
- #c = "";
3321
- constructor() {
3322
- super(), this.#e = this.attachInternals(), this.#e.role = "group", this.#n = y(this, "disabled", { type: "boolean" });
3323
- }
3324
- get value() {
3325
- return this.#i.join("");
3326
- }
3327
- set value(e) {
3328
- this.#i = e.split("").slice(0, this.#a), this.#u(), this.#d();
3329
- }
3330
- get name() {
3331
- return this.getAttribute("name") ?? "";
3332
- }
3333
- set name(e) {
3334
- this.setAttribute("name", e);
3335
- }
3336
- get disabled() {
3337
- return this.#n.value;
3338
- }
3339
- set disabled(e) {
3340
- this.#n.set(e);
3341
- }
3342
- get required() {
3343
- return this.#t.value;
3344
- }
3345
- set required(e) {
3346
- this.#t.value = e, this.toggleAttribute("required", e);
3347
- }
3348
- attributeChangedCallback(e, t, n) {
3349
- if (t !== n) {
3350
- if (b({ disabled: this.#n }, e, n)) {
3351
- super.attributeChangedCallback(e, t, n);
3352
- return;
3353
- }
3354
- switch (e) {
3355
- case "value":
3356
- this.value = n ?? "";
3357
- break;
3358
- case "length": {
3359
- let e = parseInt(n ?? "6", 10);
3360
- !isNaN(e) && e >= 1 && e <= 12 && (this.#a = e, this.isConnected && this.#l());
3361
- break;
3362
- }
3363
- case "pattern":
3364
- try {
3365
- this.#o = new RegExp(n ?? "[0-9]");
3366
- } catch {}
3367
- break;
3368
- case "mask":
3369
- this.#s = n, this.isConnected && this.#u();
3370
- break;
3371
- case "required":
3372
- this.#t.value = n !== null, this.isConnected && this.#d();
3373
- break;
3374
- }
3375
- super.attributeChangedCallback(e, t, n);
3376
- }
3377
- }
3378
- setup() {
3379
- super.setup();
3380
- let e = this.getAttribute("length");
3381
- if (e) {
3382
- let t = parseInt(e, 10);
3383
- !isNaN(t) && t >= 1 && t <= 12 && (this.#a = t);
3384
- }
3385
- let t = this.getAttribute("pattern");
3386
- if (t) try {
3387
- this.#o = new RegExp(t);
3388
- } catch {}
3389
- this.#s = this.getAttribute("mask"), this.#l(), this.addEffect(v(this, this.#n.signal, this.#e, { manageTabindex: !1 })), this.addEffect(() => {
3390
- let e = this.#n.value;
3391
- for (let t of this.#r) t.setAttribute("contenteditable", e ? "false" : "plaintext-only");
3392
- }), this.#t.value = this.hasAttribute("required");
3393
- let n = this.getAttribute("value");
3394
- this.#c = n ?? "", n && (this.value = n), this.addEventListener("paste", this.#g);
3395
- }
3396
- teardown() {
3397
- for (let e of this.#r) e.removeEventListener("input", this.#p), e.removeEventListener("keydown", this.#m), e.removeEventListener("focus", this.#h);
3398
- this.removeEventListener("paste", this.#g), super.teardown();
3399
- }
3400
- #l() {
3401
- for (let e of this.#r) e.removeEventListener("input", this.#p), e.removeEventListener("keydown", this.#m), e.removeEventListener("focus", this.#h), e.remove();
3402
- this.#r = [], this.#i = [];
3403
- for (let e = 0; e < this.#a; e++) {
3404
- let e = document.createElement("div");
3405
- e.classList.add("ui-otp-cell"), e.setAttribute("data-empty", ""), e.setAttribute("contenteditable", "plaintext-only"), e.setAttribute("inputmode", "numeric"), e.addEventListener("input", this.#p), e.addEventListener("keydown", this.#m), e.addEventListener("focus", this.#h), this.appendChild(e), this.#r.push(e), this.#i.push("");
3406
- }
3407
- }
3408
- #u() {
3409
- for (let e = 0; e < this.#a; e++) {
3410
- let t = this.#r[e];
3411
- if (!t) continue;
3412
- let n = this.#i[e] ?? "";
3413
- t.textContent = n ? this.#s ?? n : "", n ? t.removeAttribute("data-empty") : t.setAttribute("data-empty", "");
3414
- }
3415
- }
3416
- #d() {
3417
- let e = this.value;
3418
- this.#e.setFormValue(e), this.#t.value && e.length === 0 ? this.#e.setValidity({ valueMissing: !0 }, "Please fill out this field.", this) : this.#t.value && e.length < this.#a ? this.#e.setValidity({ tooShort: !0 }, `Please enter ${this.#a} characters.`, this) : this.#e.setValidity({});
3419
- }
3420
- #f(e) {
3421
- let t = this.#r[e];
3422
- if (t) {
3423
- t.focus();
3424
- let e = window.getSelection();
3425
- e && (e.selectAllChildren(t), e.collapseToEnd());
3426
- }
3427
- }
3428
- #p = (e) => {
3429
- if (this.disabled) return;
3430
- let t = e.target, n = this.#r.indexOf(t);
3431
- if (n === -1) return;
3432
- let r = t.textContent ?? "";
3433
- if (r.length > 0) {
3434
- let e = r[r.length - 1];
3435
- if (this.#o.test(e)) this.#i[n] = e, t.textContent = this.#s ?? e, t.removeAttribute("data-empty"), this.#d(), this.#_(), n < this.#a - 1 && this.#f(n + 1), this.value.length === this.#a && this.#v();
3436
- else {
3437
- let e = this.#i[n] || "";
3438
- t.textContent = e ? this.#s ?? e : "";
3439
- }
3440
- } else this.#i[n] = "", t.setAttribute("data-empty", ""), this.#d(), this.#_();
3441
- };
3442
- #m = (e) => {
3443
- if (this.disabled) return;
3444
- let t = e.target, n = this.#r.indexOf(t);
3445
- n !== -1 && (e.key === "Backspace" ? (this.#i[n] ? (this.#i[n] = "", t.textContent = "", t.setAttribute("data-empty", ""), this.#d(), this.#_()) : n > 0 && this.#f(n - 1), e.preventDefault()) : e.key === "ArrowLeft" && n > 0 ? (this.#f(n - 1), e.preventDefault()) : e.key === "ArrowRight" && n < this.#a - 1 ? (this.#f(n + 1), e.preventDefault()) : e.key === "Delete" && (this.#i[n] = "", t.textContent = "", t.setAttribute("data-empty", ""), this.#d(), this.#_(), e.preventDefault()));
3446
- };
3447
- #h = (e) => {
3448
- let t = e.target, n = window.getSelection();
3449
- n && (n.selectAllChildren(t), n.collapseToEnd());
3450
- };
3451
- #g = (e) => {
3452
- if (this.disabled) {
3453
- e.preventDefault();
3454
- return;
3455
- }
3456
- e.preventDefault();
3457
- let t = (e.clipboardData?.getData("text") ?? "").split("").filter((e) => this.#o.test(e)).slice(0, this.#a);
3458
- for (let e = 0; e < this.#a; e++) this.#i[e] = t[e] ?? "";
3459
- this.#u(), this.#d(), this.#_();
3460
- let n = this.#i.findIndex((e) => !e);
3461
- this.#f(n >= 0 ? n : this.#a - 1), t.length === this.#a && this.#v();
3462
- };
3463
- onFormDisabled(e) {
3464
- this.#n.signal.value = e;
3465
- for (let t of this.#r) t.setAttribute("contenteditable", e ? "false" : "plaintext-only");
3466
- }
3467
- onFormReset() {
3468
- this.value = this.#c, this.#n.signal.value = this.hasAttribute("disabled");
3469
- }
3470
- onFormStateRestore(e) {
3471
- this.value = typeof e == "string" ? e : "";
3472
- }
3473
- #_() {
3474
- this.dispatchEvent(new CustomEvent("ui-input", {
3475
- bubbles: !0,
3476
- composed: !0,
3477
- detail: { value: this.value }
3478
- }));
3479
- }
3480
- #v() {
3481
- this.dispatchEvent(new CustomEvent("ui-change", {
3482
- bubbles: !0,
3483
- composed: !0,
3484
- detail: { value: this.value }
3485
- }));
3486
- }
3487
- }, De = class extends _ {
3488
- static observedAttributes = [
3489
- "src",
3490
- "name",
3491
- "alt"
3492
- ];
3493
- #e;
3494
- #t = null;
3495
- constructor() {
3496
- super(), this.#e = this.attachInternals(), this.#e.role = "img";
3497
- }
3498
- get src() {
3499
- return this.getAttribute("src") ?? "";
3500
- }
3501
- set src(e) {
3502
- this.setAttribute("src", e);
3503
- }
3504
- get name() {
3505
- return this.getAttribute("name") ?? "";
3506
- }
3507
- set name(e) {
3508
- this.setAttribute("name", e);
3509
- }
3510
- get alt() {
3511
- return this.getAttribute("alt") ?? "";
3512
- }
3513
- set alt(e) {
3514
- this.setAttribute("alt", e);
3515
- }
3516
- attributeChangedCallback(e, t, n) {
3517
- t !== n && (this.isConnected && this.#n(), super.attributeChangedCallback(e, t, n));
3518
- }
3519
- setup() {
3520
- super.setup(), this.#n();
3521
- }
3522
- teardown() {
3523
- this.#t &&= (this.#t.removeEventListener("error", this.#i), null), super.teardown();
3524
- }
3525
- #n() {
3526
- this.textContent = "", this.#t = null;
3527
- let e = this.getAttribute("src"), t = this.getAttribute("name"), n = this.getAttribute("alt") ?? t ?? "";
3528
- this.#e.ariaLabel = n, this.setAttribute("aria-label", n), e ? (this.#t = document.createElement("img"), this.#t.src = e, this.#t.alt = n, this.#t.addEventListener("error", this.#i), this.appendChild(this.#t)) : t ? this.textContent = this.#r(t) : this.textContent = "?";
3529
- }
3530
- #r(e) {
3531
- let t = e.trim().split(/\s+/);
3532
- return t.length === 0 ? "?" : t.length === 1 ? t[0][0].toUpperCase() : (t[0][0] + t[t.length - 1][0]).toUpperCase();
3533
- }
3534
- #i = () => {
3535
- this.#t &&= (this.#t.removeEventListener("error", this.#i), this.#t.remove(), null);
3536
- let e = this.getAttribute("name");
3537
- e ? this.textContent = this.#r(e) : this.textContent = "?";
3538
- };
3539
- }, Oe = class extends _ {
3540
- static observedAttributes = ["max"];
3541
- #e;
3542
- #t = "";
3543
- constructor() {
3544
- super(), this.#e = this.attachInternals(), this.#e.role = "status";
3545
- }
3546
- attributeChangedCallback(e, t, n) {
3547
- t !== n && (e === "max" && this.isConnected && this.#n(), super.attributeChangedCallback(e, t, n));
3548
- }
3549
- setup() {
3550
- super.setup(), this.#t = this.textContent?.trim() ?? "", this.#n();
3551
- }
3552
- #n() {
3553
- let e = this.getAttribute("max");
3554
- if (!e) return;
3555
- let t = parseInt(e, 10);
3556
- if (isNaN(t)) return;
3557
- let n = parseInt(this.#t, 10);
3558
- isNaN(n) || (n > t ? this.textContent = `${t}+` : this.textContent = this.#t);
3559
- }
3560
- }, ke = class extends _ {}, Ae = class extends _ {
3561
- #e;
3562
- constructor() {
3563
- super(), this.#e = this.attachInternals(), this.#e.role = "navigation";
3564
- }
3565
- setup() {
3566
- super.setup();
3567
- let e = this.getAttribute("aria-label") ?? "Breadcrumb";
3568
- this.#e.ariaLabel = e, this.hasAttribute("aria-label") || this.setAttribute("aria-label", e);
3569
- }
3570
- }, je = class extends _ {
3571
- static observedAttributes = ["href", "current"];
3572
- #e;
3573
- constructor() {
3574
- super(), this.#e = this.attachInternals(), this.#e.role = "link";
3575
- }
3576
- setup() {
3577
- super.setup(), this.#t(), !this.hasAttribute("current") && !this.hasAttribute("tabindex") && this.setAttribute("tabindex", "0"), this.addEventListener("click", this.#n), this.addEventListener("keydown", this.#r);
3578
- }
3579
- teardown() {
3580
- this.removeEventListener("click", this.#n), this.removeEventListener("keydown", this.#r), super.teardown();
3581
- }
3582
- attributeChangedCallback(e, t, n) {
3583
- t !== n && (this.isConnected && this.#t(), super.attributeChangedCallback(e, t, n));
3584
- }
3585
- #t() {
3586
- this.hasAttribute("current") ? (this.setAttribute("aria-disabled", "true"), this.setAttribute("aria-current", "page"), this.removeAttribute("tabindex")) : (this.removeAttribute("aria-disabled"), this.removeAttribute("aria-current"), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"));
3587
- }
3588
- #n = () => {
3589
- if (this.hasAttribute("current")) return;
3590
- let e = this.getAttribute("href");
3591
- e && (window.location.href = e);
3592
- };
3593
- #r = (e) => {
3594
- (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.#n());
3595
- };
3596
- }, Me = class extends _ {
3597
- static observedAttributes = [
3598
- "total",
3599
- "value",
3600
- "siblings",
3601
- "boundaries",
3602
- "disabled"
3603
- ];
3604
- #e;
3605
- #t = t(1);
3606
- #n = t(1);
3607
- #r = t(1);
3608
- #i = t(1);
3609
- #a = t(!1);
3610
- constructor() {
3611
- super(), this.#e = this.attachInternals(), this.#e.role = "navigation";
3612
- }
3613
- get total() {
3614
- return this.#t.value;
3615
- }
3616
- set total(e) {
3617
- this.#t.value = Math.max(1, e);
3618
- }
3619
- get value() {
3620
- return this.#n.value;
3621
- }
3622
- set value(e) {
3623
- this.#n.value = Math.min(Math.max(1, e), this.#t.value);
3624
- }
3625
- get siblings() {
3626
- return this.#r.value;
3627
- }
3628
- set siblings(e) {
3629
- this.#r.value = Math.max(0, e);
3630
- }
3631
- get boundaries() {
3632
- return this.#i.value;
3633
- }
3634
- set boundaries(e) {
3635
- this.#i.value = Math.max(0, e);
3636
- }
3637
- get disabled() {
3638
- return this.#a.value;
3639
- }
3640
- set disabled(e) {
3641
- this.#a.value = e, this.toggleAttribute("disabled", e);
3642
- }
3643
- attributeChangedCallback(e, t, n) {
3644
- if (t === n) return;
3645
- let r = parseInt(n ?? "", 10);
3646
- switch (e) {
3647
- case "total":
3648
- this.#t.value = Math.max(1, isNaN(r) ? 1 : r);
3649
- break;
3650
- case "value":
3651
- this.#n.value = Math.min(Math.max(1, isNaN(r) ? 1 : r), this.#t.value);
3652
- break;
3653
- case "siblings":
3654
- this.#r.value = Math.max(0, isNaN(r) ? 1 : r);
3655
- break;
3656
- case "boundaries":
3657
- this.#i.value = Math.max(0, isNaN(r) ? 1 : r);
3658
- break;
3659
- case "disabled":
3660
- this.#a.value = n !== null;
3661
- break;
3662
- }
3663
- super.attributeChangedCallback(e, t, n);
3664
- }
3665
- setup() {
3666
- super.setup();
3667
- let e = this.getAttribute("aria-label") ?? "Pagination";
3668
- this.#e.ariaLabel = e, this.hasAttribute("aria-label") || this.setAttribute("aria-label", e), this.addEffect(v(this, this.#a, this.#e)), this.addEffect(() => {
3669
- this.#l();
3670
- }), this.addEffect(() => {
3671
- let e = this.#a.value, t = c(() => this.#n.value), n = c(() => this.#t.value);
3672
- for (let r of this.querySelectorAll("ui-button")) {
3673
- let i = r.getAttribute("aria-label") ?? "";
3674
- i === "Previous page" ? r.toggleAttribute("disabled", e || t <= 1) : i === "Next page" ? r.toggleAttribute("disabled", e || t >= n) : r.toggleAttribute("disabled", e);
3675
- }
3676
- });
3677
- }
3678
- teardown() {
3679
- this.textContent = "", super.teardown();
3680
- }
3681
- #o() {
3682
- let e = this.#t.value, t = this.#n.value, n = this.#r.value, r = this.#i.value;
3683
- if (e <= r * 2 + n * 2 + 3) return Array.from({ length: e }, (e, t) => t + 1);
3684
- let i = [];
3685
- for (let e = 1; e <= r; e++) i.push(e);
3686
- let a = Math.max(r + 1, t - n);
3687
- a > r + 1 && i.push("ellipsis");
3688
- let o = Math.min(e - r, t + n);
3689
- for (let e = a; e <= o; e++) i.includes(e) || i.push(e);
3690
- o < e - r && i.push("ellipsis");
3691
- for (let t = e - r + 1; t <= e; t++) i.includes(t) || i.push(t);
3692
- return i;
3693
- }
3694
- #s(e, t, n, r) {
3695
- let i = document.createElement("ui-button");
3696
- return i.setAttribute("variant", "ghost"), i.setAttribute("aria-label", t), n && i.setAttribute("disabled", ""), i.textContent = e, i.addEventListener("ui-press", r), i;
3697
- }
3698
- #c(e, t, n, r) {
3699
- let i = document.createElement("ui-button");
3700
- i.setAttribute("variant", "ghost"), i.setAttribute("aria-label", t), n && i.setAttribute("disabled", "");
3701
- let a = document.createElement("ui-icon");
3702
- return a.setAttribute("name", e), i.appendChild(a), i.addEventListener("ui-press", r), i;
3703
- }
3704
- #l() {
3705
- let e = this.#t.value, t = this.#n.value, n = c(() => this.#a.value), r = this.#o();
3706
- this.textContent = "", this.appendChild(this.#c("caret-left", "Previous page", n || t <= 1, () => this.#u(t - 1)));
3707
- for (let e of r) if (e === "ellipsis") {
3708
- let e = document.createElement("span");
3709
- e.classList.add("ui-pagination-ellipsis"), e.textContent = "…", this.appendChild(e);
3710
- } else {
3711
- let r = this.#s(String(e), `Page ${e}`, n, () => this.#u(e));
3712
- e === t && r.setAttribute("aria-current", "page"), this.appendChild(r);
3713
- }
3714
- this.appendChild(this.#c("caret-right", "Next page", n || t >= e, () => this.#u(t + 1)));
3715
- }
3716
- #u(e) {
3717
- if (this.#a.value) return;
3718
- let t = Math.min(Math.max(1, e), this.#t.value);
3719
- t !== this.#n.value && (this.#n.value = t, this.setAttribute("value", String(t)), this.dispatchEvent(new CustomEvent("ui-change", {
3720
- bubbles: !0,
3721
- composed: !0,
3722
- detail: { value: t }
3723
- })));
3724
- }
3725
- }, Ne = class extends _ {
3726
- #e;
3727
- get open() {
3728
- return this.#e.open;
3729
- }
3730
- showModal() {
3731
- this.#e.showModal();
3732
- }
3733
- close() {
3734
- this.#e.close();
3735
- }
3736
- setup() {
3737
- super.setup(), this.#e = new d(this, { contentTarget: () => document.createElement("ui-drawer-panel") });
3738
- }
3739
- teardown() {
3740
- this.#e.destroy(), super.teardown();
3741
- }
3742
- }, Pe = class extends _ {
3743
- static observedAttributes = ["disabled"];
3744
- #e;
3745
- #t = t(!1);
3746
- #n;
3747
- constructor() {
3748
- super(), this.#e = this.attachInternals(), this.#e.role = "tree";
3749
- }
3750
- get disabled() {
3751
- return this.#t.value;
3752
- }
3753
- set disabled(e) {
3754
- this.#t.value = e, this.toggleAttribute("disabled", e);
3755
- }
3756
- attributeChangedCallback(e, t, n) {
3757
- t !== n && (e === "disabled" && (this.#t.value = n !== null), super.attributeChangedCallback?.(e, t, n));
3758
- }
3759
- setup() {
3760
- super.setup(), this.#n = new i(this, {
3761
- selector: ":scope ui-tree-item > [slot=\"label\"]",
3762
- orientation: "vertical"
3763
- });
3764
- let e = this.getAttribute("aria-label") ?? "Tree";
3765
- this.#e.ariaLabel = e, this.hasAttribute("aria-label") || this.setAttribute("aria-label", e), this.addEffect(v(this, this.#t, this.#e));
3766
- }
3767
- teardown() {
3768
- this.#n.destroy(), super.teardown();
3769
- }
3770
- }, Fe = class extends _ {
3771
- static observedAttributes = [
3772
- "expanded",
3773
- "selected",
3774
- "disabled"
3775
- ];
3776
- #e;
3777
- #t = null;
3778
- #n = null;
3779
- #r = t(!1);
3780
- constructor() {
3781
- super(), this.#e = this.attachInternals(), this.#e.role = "treeitem";
3782
- }
3783
- get expanded() {
3784
- return this.hasAttribute("expanded");
3785
- }
3786
- set expanded(e) {
3787
- this.toggleAttribute("expanded", e), this.isConnected && this.#a();
3788
- }
3789
- get selected() {
3790
- return this.hasAttribute("selected");
3791
- }
3792
- set selected(e) {
3793
- this.toggleAttribute("selected", e), this.isConnected && this.#a();
3794
- }
3795
- get disabled() {
3796
- return this.#r.value;
3797
- }
3798
- set disabled(e) {
3799
- this.#r.value = e, this.toggleAttribute("disabled", e);
3800
- }
3801
- setup() {
3802
- super.setup(), this.addEffect(v(this, this.#r, this.#e)), this.deferChildren(() => {
3803
- this.#i(), this.#a();
3804
- }), this.addEventListener("click", this.#o), this.addEventListener("keydown", this.#s);
3805
- }
3806
- teardown() {
3807
- this.removeEventListener("click", this.#o), this.removeEventListener("keydown", this.#s), super.teardown();
3808
- }
3809
- attributeChangedCallback(e, t, n) {
3810
- t !== n && (e === "disabled" && (this.#r.value = n !== null), this.isConnected && this.#a(), super.attributeChangedCallback(e, t, n));
3811
- }
3812
- #i() {
3813
- let e = this.querySelectorAll(":scope > ui-tree-item");
3814
- if (e.length > 0) {
3815
- this.setAttribute("expandable", "");
3816
- let t = this.querySelector(":scope > [slot=\"label\"]");
3817
- t && (this.#n = document.createElement("ui-icon"), this.#n.setAttribute("name", this.hasAttribute("expanded") ? "caret-down" : "caret-right"), this.#n.classList.add("ui-tree-caret"), t.prepend(this.#n)), this.#t = document.createElement("div"), this.#t.classList.add("ui-tree-children");
3818
- for (let t of e) this.#t.appendChild(t);
3819
- this.appendChild(this.#t);
3820
- }
3821
- let t = 0, n = this.parentElement;
3822
- for (; n;) {
3823
- if (n.tagName === "UI-TREE-ITEM") t++;
3824
- else if (!n.classList?.contains("ui-tree-children")) break;
3825
- n = n.parentElement;
3826
- }
3827
- if (t > 0) {
3828
- let e = this.querySelector(":scope > [slot=\"label\"]");
3829
- e instanceof HTMLElement && e.style.setProperty("--_tree-depth", String(t));
3830
- }
3831
- let r = this.querySelector(":scope > [slot=\"label\"]");
3832
- r instanceof HTMLElement && !r.hasAttribute("tabindex") && r.setAttribute("tabindex", "-1");
3833
- }
3834
- #a() {
3835
- let e = this.hasAttribute("expanded"), t = this.hasAttribute("selected");
3836
- this.hasAttribute("expandable") ? this.setAttribute("aria-expanded", String(e)) : this.removeAttribute("aria-expanded"), this.setAttribute("aria-selected", String(t)), this.#n && this.#n.setAttribute("name", e ? "caret-down" : "caret-right");
3837
- }
3838
- #o = (e) => {
3839
- let t = e.target, n = this.querySelector(":scope > [slot=\"label\"]");
3840
- t !== n && !n?.contains(t) || (e.stopPropagation(), !this.#r.value && (this.hasAttribute("expandable") && this.toggleAttribute("expanded"), this.toggleAttribute("selected", !0)));
3841
- };
3842
- #s = (e) => {
3843
- if (e.target === this.querySelector(":scope > [slot=\"label\"]") && !this.#r.value) switch (e.key) {
3844
- case "ArrowRight":
3845
- if (this.hasAttribute("expandable") && !this.hasAttribute("expanded")) this.setAttribute("expanded", ""), e.preventDefault(), e.stopPropagation();
3846
- else if (this.hasAttribute("expanded")) {
3847
- let t = this.querySelector(":scope > .ui-tree-children > ui-tree-item > [slot=\"label\"]");
3848
- t && (t.focus(), e.preventDefault(), e.stopPropagation());
3849
- }
3850
- break;
3851
- case "ArrowLeft":
3852
- if (this.hasAttribute("expanded")) this.removeAttribute("expanded"), e.preventDefault(), e.stopPropagation();
3853
- else {
3854
- let t = (this.parentElement?.closest("ui-tree-item"))?.querySelector(":scope > [slot=\"label\"]");
3855
- t && (t.focus(), e.preventDefault(), e.stopPropagation());
3856
- }
3857
- break;
3858
- case "Enter":
3859
- case " ":
3860
- e.preventDefault(), e.stopPropagation(), this.toggleAttribute("selected", !0), this.hasAttribute("expandable") && this.toggleAttribute("expanded");
3861
- break;
3862
- }
3863
- };
3864
- }, Ie = class extends _ {
3865
- static observedAttributes = [
3866
- "direction",
3867
- "controls",
3868
- "indicators",
3869
- "autoplay",
3870
- "interval",
3871
- "loop",
3872
- "peek",
3873
- "per-view",
3874
- "gap",
3875
- "disabled"
3876
- ];
3877
- #e = null;
3878
- #t = null;
3879
- #n = null;
3880
- #r = null;
3881
- #i = null;
3882
- #a = t(0);
3883
- #o = t(0);
3884
- #s = t(!1);
3885
- #c = null;
3886
- #l = null;
3887
- #u = null;
3888
- #d = [];
3889
- #f = !1;
3890
- #p = 0;
3891
- #m = 0;
3892
- #h = 0;
3893
- #g = 0;
3894
- #_;
3895
- constructor() {
3896
- super(), this.#_ = this.attachInternals(), this.#_.role = "region";
3897
- }
3898
- get index() {
3899
- return this.#a.value;
3900
- }
3901
- goTo(e) {
3902
- let t = this.#d.length;
3903
- if (t === 0) return;
3904
- let n = e;
3905
- n = this.hasAttribute("loop") ? (e % t + t) % t : Math.max(0, Math.min(e, t - 1));
3906
- let r = this.#d[n];
3907
- if (!r) return;
3908
- let i = this.getAttribute("direction") === "vertical";
3909
- r.scrollIntoView({
3910
- block: i ? "start" : "nearest",
3911
- inline: i ? "nearest" : "start"
3912
- });
3913
- }
3914
- next() {
3915
- this.goTo(this.#a.value + 1);
3916
- }
3917
- prev() {
3918
- this.goTo(this.#a.value - 1);
3919
- }
3920
- attributeChangedCallback(e, t, n) {
3921
- if (t !== n) {
3922
- switch (e) {
3923
- case "disabled":
3924
- this.#s.value = n !== null;
3925
- break;
3926
- case "per-view":
3927
- this.#v(n);
3928
- break;
3929
- case "autoplay":
3930
- n === null ? this.#E() : this.#T();
618
+ case "options":
619
+ n ? this.#a.value = this.#m(n) : this.#a.value = [];
3931
620
  break;
3932
- case "interval":
3933
- this.hasAttribute("autoplay") && (this.#E(), this.#T());
621
+ case "src":
622
+ this.#o.value = n;
3934
623
  break;
3935
- case "loop":
3936
- this.#w(this.#a.value, this.#o.value);
624
+ case "placeholder":
625
+ this.#s.value = n ?? "";
3937
626
  break;
3938
627
  }
3939
628
  super.attributeChangedCallback?.(e, t, n);
3940
629
  }
3941
630
  }
3942
631
  setup() {
3943
- super.setup(), this.#l = window.matchMedia("(prefers-reduced-motion: reduce)");
3944
- let t = document.createElement("div");
3945
- t.setAttribute("part", "track"), t.id = e("ss-track"), t.setAttribute("tabindex", "0");
3946
- let n = [];
3947
- for (; this.firstChild;) {
3948
- let e = this.firstChild;
3949
- t.appendChild(e), e instanceof HTMLElement && e.tagName.toLowerCase() === "ui-slide" && n.push(e);
3950
- }
3951
- this.appendChild(t), this.#e = t, this.#d = n;
3952
- let r = document.createElement("div");
3953
- r.setAttribute("part", "controls");
3954
- let i = document.createElement("button");
3955
- i.setAttribute("part", "prev"), i.setAttribute("aria-label", "Previous slide"), i.setAttribute("type", "button"), i.innerHTML = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 256 256\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z\" fill=\"currentColor\"/></svg>";
3956
- let a = document.createElement("button");
3957
- a.setAttribute("part", "next"), a.setAttribute("aria-label", "Next slide"), a.setAttribute("type", "button"), a.innerHTML = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 256 256\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z\" fill=\"currentColor\"/></svg>", r.appendChild(i), r.appendChild(a), this.appendChild(r), this.#n = i, this.#r = a;
3958
- let o = document.createElement("div");
3959
- o.setAttribute("part", "indicators"), o.setAttribute("aria-hidden", "true"), this.appendChild(o), this.#t = o;
3960
- let s = document.createElement("div");
3961
- s.id = e("ss-live"), s.setAttribute("aria-live", "polite"), s.setAttribute("aria-atomic", "true"), s.setAttribute("data-visually-hidden", ""), this.appendChild(s), this.#i = s, this.setAttribute("aria-roledescription", "carousel"), this.hasAttribute("aria-label") || this.setAttribute("aria-label", "Slideshow"), this.#v(this.getAttribute("per-view")), this.#o.value = n.length, this.#y(n), this.#b(n.length), this.#S(n), n.length > 0 && n[0].toggleAttribute("active", !0), this.addEffect(() => {
3962
- let e = this.#a.value, t = this.#o.value;
3963
- this.#C(e), this.#w(e, t), this.#i && (this.#i.textContent = `Slide ${e + 1} of ${t}`);
3964
- }), this.addEffect(v(this, this.#s, this.#_)), i.addEventListener("click", this.#D), a.addEventListener("click", this.#O), t.addEventListener("keydown", this.#P), t.addEventListener("pointerdown", this.#j), this.addEventListener("mouseenter", this.#k), this.addEventListener("mouseleave", this.#A), this.addEventListener("focusin", this.#k), this.addEventListener("focusout", this.#A), this.hasAttribute("autoplay") && this.#T();
3965
- }
3966
- teardown() {
3967
- this.#E(), this.#u?.disconnect(), this.#u = null, this.#n?.removeEventListener("click", this.#D), this.#r?.removeEventListener("click", this.#O), this.#e?.removeEventListener("keydown", this.#P), this.#e?.removeEventListener("pointerdown", this.#j), this.removeEventListener("mouseenter", this.#k), this.removeEventListener("mouseleave", this.#A), this.removeEventListener("focusin", this.#k), this.removeEventListener("focusout", this.#A), this.#e = null, this.#t?.removeEventListener("click", this.#x), this.#t && (this.#t.innerHTML = ""), this.#t = null, this.#n = null, this.#r = null, this.#i = null, this.#d = [], super.teardown();
3968
- }
3969
- #v(e) {
3970
- let t = Math.max(1, parseInt(e ?? "1", 10) || 1);
3971
- this.style.setProperty("--_per-view", String(t));
3972
- }
3973
- #y(t) {
3974
- let n = t.length;
3975
- for (let r = 0; r < n; r++) {
3976
- let i = t[r];
3977
- i.setAttribute("role", "group"), i.setAttribute("aria-roledescription", "slide"), i.setAttribute("aria-label", `${r + 1} of ${n}`), i.id ||= e("slide");
632
+ if (super.setup(), this.#i = new a(this), this.#c = this.hasAttribute("options") || this.hasAttribute("src"), this.#c) {
633
+ let e = this.getAttribute("options");
634
+ e && (this.#a.value = this.#m(e)), this.#o.value = this.getAttribute("src"), this.#s.value = this.getAttribute("placeholder") ?? "", this.#g();
3978
635
  }
3979
- }
3980
- #b(e) {
3981
- let t = this.#t;
3982
- if (t) {
3983
- t.addEventListener("click", this.#x);
3984
- for (let n = 0; n < e; n++) {
3985
- let e = document.createElement("button");
3986
- e.setAttribute("part", "dot"), e.setAttribute("type", "button"), e.setAttribute("aria-label", `Go to slide ${n + 1}`), e.setAttribute("data-index", String(n)), n === 0 && e.toggleAttribute("active", !0), t.appendChild(e);
636
+ let e = this.querySelector(":scope > ui-button");
637
+ this.#d = e;
638
+ let t = this.querySelector(":scope > ui-listbox[popover]");
639
+ this.#u = t, t?.setAttribute("popover", "manual"), e && t && this.#i.wirePopover(e, t), e?.setAttribute("aria-haspopup", "listbox"), e && t && (t.id ||= r("lb"), e.setAttribute("aria-controls", t.id)), this.#c && (this.addEffect(() => {
640
+ let e = this.#a.value;
641
+ this.#_(e);
642
+ }), this.addEffect(() => {
643
+ let e = this.#o.value;
644
+ e && this.#h(e);
645
+ }), this.addEffect(() => {
646
+ let t = this.#s.value, n = this.#t.label.value, r = e?.querySelector("[slot=\"label\"]");
647
+ r && !n && (r.textContent = t || "\xA0");
648
+ })), this.deferChildren(() => {
649
+ let n = this.getAttribute("value");
650
+ if (n) {
651
+ let e = this.querySelector(`ui-option[value="${CSS.escape(n)}"]`), t = e?.getAttribute("label") ?? e?.textContent?.trim() ?? n;
652
+ this.#t.value.value = n, this.#t.label.value = t, this.#f = n, this.#p = t;
3987
653
  }
3988
- }
3989
- }
3990
- #x = (e) => {
3991
- let t = e.target.closest("[data-index]");
3992
- if (!t) return;
3993
- let n = parseInt(t.dataset.index ?? "", 10);
3994
- isNaN(n) || (this.#E(), this.goTo(n));
3995
- };
3996
- #S(e) {
3997
- let t = this.#e;
3998
- if (!(!t || e.length === 0)) {
3999
- this.#u = new IntersectionObserver((e) => {
4000
- for (let t of e) if (t.isIntersecting && t.intersectionRatio >= .5) {
4001
- let e = t.target, n = this.#d.indexOf(e);
4002
- n !== -1 && n !== this.#a.value && (this.#a.value = n, this.#d.forEach((e, t) => e.toggleAttribute("active", t === n)), this.dispatchEvent(new CustomEvent("ui-slide-change", {
4003
- bubbles: !0,
4004
- composed: !0,
4005
- detail: {
4006
- index: n,
4007
- slide: e
4008
- }
4009
- })));
654
+ this.addEffect(() => {
655
+ let t = this.#t.label.value, n = e?.querySelector("[slot=\"label\"]");
656
+ n && (n.textContent = t || (this.#c ? this.#s.value || "\xA0" : n.textContent ?? ""));
657
+ }), this.addEffect(() => {
658
+ let e = this.#t.value.value, n = t?.querySelectorAll("ui-option") ?? [];
659
+ for (let t of n) {
660
+ let n = t.getAttribute("value") === e;
661
+ t.setAttribute("aria-selected", String(n));
4010
662
  }
4011
- }, {
4012
- root: t,
4013
- threshold: .5
4014
663
  });
4015
- for (let t of e) this.#u.observe(t);
4016
- }
4017
- }
4018
- #C(e) {
4019
- let t = this.#t?.querySelectorAll("[part=\"dot\"]");
4020
- t && t.forEach((t, n) => t.toggleAttribute("active", n === e));
4021
- }
4022
- #w(e, t) {
4023
- if (!this.#n || !this.#r) return;
4024
- let n = this.hasAttribute("loop");
4025
- this.#n.disabled = !n && e === 0, this.#r.disabled = !n && e === t - 1;
4026
- }
4027
- #T() {
4028
- if (this.#l?.matches) return;
4029
- this.#E();
4030
- let e = parseInt(this.getAttribute("interval") ?? "5000", 10) || 5e3;
4031
- this.#c = setInterval(() => this.next(), e);
4032
- }
4033
- #E() {
4034
- this.#c !== null && (clearInterval(this.#c), this.#c = null);
664
+ }), this.addEffect(c(this, this.#n, this.#e)), this.addEffect(() => {
665
+ let t = this.#n.value;
666
+ e && e.toggleAttribute("disabled", t), t && this.#t.open.peek() && this.#t.hide();
667
+ }), this.#r.value = this.hasAttribute("required"), this.addEffect(() => {
668
+ let e = this.#t.value.value;
669
+ this.#r.value && (e === null || e === "") ? this.#e.setValidity({ valueMissing: !0 }, "Please select an option.", this) : this.#e.setValidity({});
670
+ }), this.addEffect(() => {
671
+ let t = this.#t.open.value;
672
+ this.#i.syncPopover(t), e?.setAttribute("aria-expanded", String(t));
673
+ }), this.addEffect(() => {
674
+ let e = this.#t.value.value;
675
+ this.#e.setFormValue(e ?? ""), e == null ? this.removeAttribute("value") : this.setAttribute("value", e);
676
+ }), e?.addEventListener("ui-press", this.#v), this.addEventListener("ui-change", this.#y), this.addEventListener("ui-select", this.#b), this.addEventListener("ui-dismiss", this.#x), e?.addEventListener("keydown", this.#S);
4035
677
  }
4036
- #D = () => {
4037
- this.#E(), this.prev();
4038
- };
4039
- #O = () => {
4040
- this.#E(), this.next();
4041
- };
4042
- #k = () => {
4043
- this.#c !== null && (clearInterval(this.#c), this.#c = null);
4044
- };
4045
- #A = () => {
4046
- this.hasAttribute("autoplay") && !this.#l?.matches && this.#c === null && this.#T();
4047
- };
4048
- #j = (e) => {
4049
- if (e.button !== 0 || e.pointerType === "touch") return;
4050
- let t = this.#e;
4051
- t && (this.#f = !0, this.#p = e.clientX, this.#m = e.clientY, this.#h = t.scrollLeft, this.#g = t.scrollTop, t.style.scrollBehavior = "auto", t.style.scrollSnapType = "none", t.setPointerCapture(e.pointerId), t.setAttribute("data-dragging", ""), t.addEventListener("pointermove", this.#M), t.addEventListener("pointerup", this.#N), t.addEventListener("pointercancel", this.#N));
4052
- };
4053
- #M = (e) => {
4054
- if (!(!this.#f || !this.#e)) if (e.preventDefault(), this.getAttribute("direction") === "vertical") {
4055
- let t = e.clientY - this.#m;
4056
- this.#e.scrollTop = this.#g - t;
4057
- } else {
4058
- let t = e.clientX - this.#p;
4059
- this.#e.scrollLeft = this.#h - t;
4060
- }
4061
- };
4062
- #N = (e) => {
4063
- !this.#f || !this.#e || (this.#f = !1, this.#e.releasePointerCapture(e.pointerId), this.#e.removeAttribute("data-dragging"), this.#e.removeEventListener("pointermove", this.#M), this.#e.removeEventListener("pointerup", this.#N), this.#e.removeEventListener("pointercancel", this.#N), this.#e.style.scrollBehavior = "", this.#e.style.scrollSnapType = "");
678
+ #v = () => {
679
+ this.#n.value || this.#t.toggle();
4064
680
  };
4065
- #P = (e) => {
4066
- if (this.#s.value) return;
4067
- let t = this.getAttribute("direction") === "vertical";
4068
- switch (e.key) {
4069
- case t ? "ArrowDown" : "ArrowRight":
4070
- e.preventDefault(), this.next();
4071
- break;
4072
- case t ? "ArrowUp" : "ArrowLeft":
4073
- e.preventDefault(), this.prev();
4074
- break;
4075
- case "Home":
4076
- e.preventDefault(), this.goTo(0);
4077
- break;
4078
- case "End":
4079
- e.preventDefault(), this.goTo(this.#o.value - 1);
4080
- break;
4081
- }
681
+ #y = (e) => {
682
+ e.target !== this && e.stopImmediatePropagation();
4082
683
  };
4083
- }, Le = class extends _ {
4084
- setup() {
4085
- super.setup(), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "-1");
4086
- }
4087
- }, Re = class extends _ {
4088
- static observedAttributes = ["value", "disabled"];
4089
- #e;
4090
- #t;
4091
- #n;
4092
- constructor() {
4093
- super(), this.#e = this.attachInternals(), this.#e.role = "navigation", this.#t = y(this, "disabled", { type: "boolean" });
4094
- }
4095
- get value() {
4096
- return this.#n?.listValue.value ?? null;
4097
- }
4098
- set value(e) {
4099
- this.#n && (this.#n.listValue.value = e), e === null ? this.removeAttribute("value") : this.setAttribute("value", e);
4100
- }
4101
- get disabled() {
4102
- return this.#t.value;
4103
- }
4104
- set disabled(e) {
4105
- this.#t.set(e);
4106
- }
4107
- attributeChangedCallback(e, t, n) {
4108
- if (t !== n) {
4109
- if (b({ disabled: this.#t }, e, n)) {
4110
- super.attributeChangedCallback?.(e, t, n);
4111
- return;
4112
- }
4113
- e === "value" && this.#n && (this.#n.listValue.value = n), super.attributeChangedCallback?.(e, t, n);
4114
- }
4115
- }
4116
- setup() {
4117
- super.setup(), this.#n = new o(this, {
4118
- itemSelector: ":scope ui-nav-item:not([disabled])",
4119
- orientation: "vertical",
4120
- ariaAttr: "aria-current",
4121
- onChildSelect: (e) => {
4122
- this.#n.listValue.value = e.value, this.setAttribute("value", e.value), this.dispatchEvent(new CustomEvent("ui-change", {
4123
- bubbles: !0,
4124
- composed: !0,
4125
- cancelable: !0,
4126
- detail: e
4127
- }));
4128
- },
4129
- addEffect: (e) => this.addEffect(e),
4130
- deferChildren: (e) => this.deferChildren(e)
4131
- });
4132
- let e = this.getAttribute("value");
4133
- e !== null && (this.#n.listValue.value = e), this.addEffect(v(this, this.#t.signal, this.#e));
4134
- }
4135
- teardown() {
4136
- this.#n.destroy(), super.teardown();
4137
- }
4138
- }, ze = class extends _ {
4139
- static observedAttributes = [
4140
- "value",
4141
- "disabled",
4142
- "label"
4143
- ];
4144
- #e;
4145
- #t = t("");
4146
- #n;
4147
- #r = t("");
4148
- constructor() {
4149
- super(), this.#e = this.attachInternals(), this.#e.role = "link", this.#n = y(this, "disabled", { type: "boolean" });
4150
- }
4151
- get value() {
4152
- return this.#t.value;
4153
- }
4154
- set value(e) {
4155
- this.#t.value = e, this.getAttribute("value") !== e && this.setAttribute("value", e);
4156
- }
4157
- get disabled() {
4158
- return this.#n.value;
4159
- }
4160
- set disabled(e) {
4161
- this.#n.set(e);
4162
- }
4163
- get label() {
4164
- return this.#r.value || this.textContent?.trim() || "";
4165
- }
4166
- set label(e) {
4167
- this.#r.value = e, e ? this.getAttribute("label") !== e && this.setAttribute("label", e) : this.removeAttribute("label");
4168
- }
4169
- attributeChangedCallback(e, t, n) {
4170
- if (t !== n) {
4171
- if (b({ disabled: this.#n }, e, n)) {
4172
- super.attributeChangedCallback?.(e, t, n);
4173
- return;
4174
- }
4175
- switch (e) {
4176
- case "value":
4177
- this.#t.value = n ?? "";
4178
- break;
4179
- case "label":
4180
- this.#r.value = n ?? "";
4181
- break;
4182
- }
4183
- super.attributeChangedCallback?.(e, t, n);
4184
- }
4185
- }
4186
- setup() {
4187
- super.setup(), this.addEffect(v(this, this.#n.signal, this.#e)), this.addEventListener("click", this.#i);
4188
- }
4189
- teardown() {
4190
- this.removeEventListener("click", this.#i), super.teardown();
4191
- }
4192
- #i = () => {
4193
- this.disabled || this.dispatchEvent(new CustomEvent("ui-select", {
684
+ #b = (e) => {
685
+ let t = e.detail;
686
+ this.#t.select(t.value, t.label), this.dispatchEvent(new CustomEvent("ui-change", {
4194
687
  bubbles: !0,
4195
688
  composed: !0,
4196
- detail: {
4197
- value: this.#t.value,
4198
- label: this.label
4199
- }
689
+ detail: t
4200
690
  }));
4201
691
  };
4202
- }, Be = class extends _ {
4203
- static observedAttributes = ["open"];
4204
- #e = t(!1);
4205
- #t = null;
4206
- #n;
4207
- #r = null;
4208
- #i = null;
4209
- #a = null;
4210
- #o = !1;
4211
- constructor() {
4212
- super(), this.#n = this.attachInternals(), this.#n.role = "group";
4213
- }
4214
- /** Whether the flyout popover is currently open. */
4215
- get flyoutOpen() {
4216
- return this.#o;
4217
- }
4218
- get open() {
4219
- return this.#e.value;
4220
- }
4221
- set open(e) {
4222
- this.#e.value = e, this.toggleAttribute("open", e);
4223
- }
4224
- attributeChangedCallback(e, t, n) {
4225
- t !== n && (e === "open" && (this.#e.value = n !== null), super.attributeChangedCallback?.(e, t, n));
4226
- }
4227
- setup() {
4228
- super.setup();
4229
- let e = document.createElement("details"), t = document.createElement("summary"), n = this.querySelector(":scope > ui-nav-group-header");
4230
- for (n && t.appendChild(n); this.firstChild;) e.appendChild(this.firstChild);
4231
- e.insertBefore(t, e.firstChild), this.appendChild(e), this.#t = e, this.addEffect(() => {
4232
- let e = this.#e.value;
4233
- this.#t && (this.#t.open = e);
4234
- }), e.addEventListener("toggle", this.#c), this.#r = new MutationObserver(() => this.#s()), this.#r.observe(e, {
4235
- subtree: !0,
4236
- attributes: !0,
4237
- attributeFilter: ["aria-current"]
4238
- }), this.#s();
4239
- let r = document.createElement("ui-listbox");
4240
- r.setAttribute("popover", "manual"), r.className = "nav-group-flyout", this.appendChild(r), this.#i = r, this.#a = new l(this), this.#a.wirePopover(this, r), r.addEventListener("ui-select", this.#u), r.addEventListener("ui-change", this.#d), this.addEventListener("ui-dismiss", this.#l);
4241
- }
4242
- teardown() {
4243
- this.closeFlyout(), this.#a?.destroy(), this.#a = null, this.#i?.remove(), this.#i = null, this.#r?.disconnect(), this.#r = null, this.#t?.removeEventListener("toggle", this.#c), this.#t = null, super.teardown();
4244
- }
4245
- #s() {
4246
- if (!this.#t) return;
4247
- let e = this.#t.querySelectorAll(":scope > ui-nav-item"), t = -1;
4248
- for (let n = 0; n < e.length; n++) if (e[n].hasAttribute("aria-current")) {
4249
- t = n;
4250
- break;
4251
- }
4252
- if (t < 0) {
4253
- this.#n.states.delete("has-selection");
4254
- return;
4255
- }
4256
- this.style.setProperty("--_indicator-index", `${t}`), this.#n.states.add("has-selection");
4257
- }
4258
- #c = () => {
4259
- if (!this.#t) return;
4260
- let e = this.#t.open;
4261
- this.#e.value = e, this.toggleAttribute("open", e);
4262
- };
4263
- /** Stamp ui-option elements from child nav-items, open the flyout popover. */
4264
- openFlyout() {
4265
- if (!this.#t || !this.#i) return;
4266
- this.#i.innerHTML = "";
4267
- let e = this.#t.querySelectorAll(":scope > ui-nav-item"), t = !0;
4268
- for (let n of e) {
4269
- let e = n.getAttribute("value") ?? "", r = n.getAttribute("label") || n.textContent?.trim() || "", i = n.hasAttribute("aria-disabled"), a = document.createElement("ui-option");
4270
- a.setAttribute("value", e), a.textContent = r, n.hasAttribute("aria-current") && a.setAttribute("selected", ""), i && a.setAttribute("disabled", ""), i || (a.setAttribute("tabindex", t ? "0" : "-1"), t = !1), this.#i.appendChild(a);
4271
- }
4272
- this.#o = !0, this.#a?.syncPopover(!0), queueMicrotask(() => {
4273
- (this.#i?.querySelector("ui-option:not([disabled])"))?.focus();
4274
- });
4275
- }
4276
- /** Clear the flyout and close the popover. Returns focus to the summary. */
4277
- closeFlyout() {
4278
- this.#i && (this.#i.innerHTML = "", this.#o = !1, this.#a?.syncPopover(!1), (this.#t?.querySelector("summary"))?.focus());
4279
- }
4280
- #l = () => {
4281
- this.closeFlyout();
4282
- };
4283
- #u = () => {
4284
- queueMicrotask(() => this.closeFlyout());
4285
- };
4286
- #d = (e) => {
4287
- e.stopPropagation();
4288
- };
4289
- }, Ve = class extends _ {
4290
- constructor() {
4291
- super();
4292
- let e = this.attachInternals();
4293
- e.role = "presentation";
4294
- }
4295
- setup() {
4296
- super.setup(), this.id ||= e("ngh");
4297
- let t = this.closest("ui-nav-group");
4298
- t && t.setAttribute("aria-labelledby", this.id);
4299
- let n = this.querySelector(":scope > ui-icon");
4300
- if (n) {
4301
- let e = document.createElement("span");
4302
- e.className = "icon-well", this.insertBefore(e, n), e.appendChild(n);
4303
- }
4304
- }
4305
- }, He = class extends _ {
4306
- static observedAttributes = [
4307
- "traits",
4308
- "for",
4309
- "provides"
4310
- ];
4311
- /** Per-target controller instances: target → Map<traitName, instance> */
4312
- #e = /* @__PURE__ */ new Map();
4313
- /** Watches for child additions/removals in selector mode, or first-child changes in wrapper mode */
4314
- #t = null;
4315
- /** Watches for trait option attribute changes on this element */
4316
- #n = null;
4317
- /** Traits requested but not yet registered — retried on registration */
4318
- #r = /* @__PURE__ */ new Set();
4319
- #i = null;
4320
- #a = !1;
4321
- connectedCallback() {
4322
- this.#a || (this.#a = !0, this.setup());
4323
- }
4324
- disconnectedCallback() {
4325
- this.#a = !1, super.disconnectedCallback();
4326
- }
4327
- setup() {
4328
- super.setup(), this.#o(), this.#m();
4329
- }
4330
- teardown() {
4331
- this.#p(), this.#t?.disconnect(), this.#t = null, this.#n?.disconnect(), this.#n = null, this.#i?.(), this.#i = null, this.#r.clear(), super.teardown();
4332
- }
4333
- attributeChangedCallback(e, t, n) {
4334
- super.attributeChangedCallback(e, t, n), this.isConnected && (e === "traits" || e === "for" || e === "provides") && (this.#p(), this.#t?.disconnect(), this.#t = null, this.#o());
4335
- }
4336
- #o() {
4337
- if (this.getAttribute("provides") !== null) return;
4338
- let e = this.getAttribute("traits");
4339
- if (!e) return;
4340
- let t = this.getAttribute("for");
4341
- t === null ? this.#s(e) : this.#c(e, t), this.#r.size > 0 && !this.#i && (this.#i = h((e) => {
4342
- this.#r.has(e) && (this.#r.delete(e), this.#o(), this.#r.size === 0 && (this.#i?.(), this.#i = null));
4343
- }));
4344
- }
4345
- #s(e) {
4346
- let t = this.#d();
4347
- t && this.#u(t, e), this.#t = new MutationObserver((t) => {
4348
- for (let n of t) {
4349
- if (n.type !== "childList") continue;
4350
- for (let e of n.removedNodes) if (e instanceof HTMLElement) {
4351
- let t = this.#e.get(e);
4352
- t && (this.#f(e, t), this.#e.delete(e));
692
+ #x = () => {
693
+ this.#t.hide();
694
+ };
695
+ #S = (e) => {
696
+ if (this.#n.value) return;
697
+ let t = this.#u;
698
+ switch (e.key) {
699
+ case "ArrowDown":
700
+ case "ArrowUp": {
701
+ e.preventDefault();
702
+ let n = t?.controller;
703
+ if (this.#t.open.value || this.#t.show(), n) {
704
+ let r = t?.querySelectorAll(":scope ui-option:not([disabled])")?.length ?? 0;
705
+ n.moveActive(e.key === "ArrowDown" ? 1 : -1, r);
4353
706
  }
4354
- let t = this.#d();
4355
- t && !this.#e.has(t) && this.#u(t, e);
707
+ break;
4356
708
  }
4357
- }), this.#t.observe(this, { childList: !0 });
4358
- }
4359
- #c(e, t) {
4360
- let n = this.querySelectorAll(t);
4361
- for (let t of n) this.#u(t, e);
4362
- this.#t = new MutationObserver(() => {
4363
- this.#l(e, t);
4364
- }), this.#t.observe(this, {
4365
- childList: !0,
4366
- subtree: !0
4367
- });
4368
- }
4369
- #l(e, t) {
4370
- let n = new Set(this.querySelectorAll(t));
4371
- for (let [e, t] of this.#e) n.has(e) || (this.#f(e, t), this.#e.delete(e));
4372
- for (let t of n) this.#e.has(t) || this.#u(t, e);
4373
- }
4374
- #u(e, t) {
4375
- let n = t.split(/\s+/).filter(Boolean), r = this.#e.get(e) ?? /* @__PURE__ */ new Map();
4376
- for (let t of n) {
4377
- if (r.has(t)) continue;
4378
- let n = f(t);
4379
- if (!n) {
4380
- this.#r.add(t);
4381
- continue;
709
+ case "Enter":
710
+ case " ":
711
+ if (e.preventDefault(), this.#t.open.value) {
712
+ let e = t?.getActiveOption();
713
+ e && e.click();
714
+ } else this.#t.toggle();
715
+ break;
716
+ case "Escape":
717
+ this.#t.open.value && (e.preventDefault(), this.#t.hide());
718
+ break;
719
+ case "Home": {
720
+ e.preventDefault();
721
+ let n = t?.controller;
722
+ n && (n.activeIndex.value = 0);
723
+ break;
4382
724
  }
4383
- for (let [e] of r) if (f(e)?.conflicts?.includes(t) || n.conflicts?.includes(e)) {
4384
- let n = `[native-ui] Trait conflict: "${t}" and "${e}" are incompatible.`;
4385
- console.warn(n);
725
+ case "End": {
726
+ e.preventDefault();
727
+ let n = t?.controller;
728
+ if (n) {
729
+ let e = t?.querySelectorAll(":scope ui-option:not([disabled])");
730
+ n.activeIndex.value = Math.max(0, (e?.length ?? 1) - 1);
731
+ }
732
+ break;
4386
733
  }
4387
- let i = m(this, t), a = n.create(e, i);
4388
- r.set(t, a);
4389
734
  }
4390
- this.#e.set(e, r);
4391
- }
4392
- #d() {
4393
- for (let e of this.children) if (e instanceof HTMLElement) return e;
4394
- return null;
4395
- }
4396
- #f(e, t) {
4397
- for (let [e, n] of t) {
4398
- let t = f(e);
4399
- t && t.destroy(n);
4400
- }
4401
- t.clear();
735
+ };
736
+ teardown() {
737
+ this.#d?.removeEventListener("ui-press", this.#v), this.#d?.removeEventListener("keydown", this.#S), this.removeEventListener("ui-change", this.#y), this.removeEventListener("ui-select", this.#b), this.removeEventListener("ui-dismiss", this.#x), this.#d = null, this.#l?.abort(), this.#l = null, this.#u = null, this.#i.destroy(), super.teardown();
4402
738
  }
4403
- #p() {
4404
- for (let [e, t] of this.#e) this.#f(e, t);
4405
- this.#e.clear();
739
+ onFormReset() {
740
+ this.#f === null ? this.#t.reset() : this.#t.select(this.#f, this.#p);
4406
741
  }
4407
- /** Watch trait option attributes (e.g. draggable-axis) on this element */
4408
- #m() {
4409
- this.#n = new MutationObserver((e) => {
4410
- for (let t of e) {
4411
- if (!t.attributeName) continue;
4412
- let e = g(t.attributeName);
4413
- if (!e) continue;
4414
- let n = f(e.trait);
4415
- if (!n?.update) continue;
4416
- let r = m(this, e.trait);
4417
- for (let [, t] of this.#e) {
4418
- let i = t.get(e.trait);
4419
- i && n.update(i, r);
4420
- }
4421
- }
4422
- });
4423
- let e = this.#h();
4424
- e.length > 0 ? this.#n.observe(this, {
4425
- attributes: !0,
4426
- attributeFilter: e
4427
- }) : this.#n.observe(this, { attributes: !0 });
742
+ onFormStateRestore(e) {
743
+ typeof e == "string" && e && (this.value = e);
4428
744
  }
4429
- /** Collect all attributes on this element that match any registered trait prefix. */
4430
- #h() {
4431
- let e = p(), t = [];
4432
- for (let n of this.attributes) for (let r of e) if (n.name.startsWith(r + "-")) {
4433
- t.push(n.name);
4434
- break;
4435
- }
4436
- return t;
745
+ onFormDisabled(e) {
746
+ this.#n.value = e;
4437
747
  }
4438
- }, Ue = class extends _ {
4439
- static observedAttributes = ["disabled"];
748
+ }, S = class extends d(s) {
749
+ static observedAttributes = [
750
+ "value",
751
+ "min",
752
+ "max",
753
+ "step",
754
+ "disabled",
755
+ "name",
756
+ "required"
757
+ ];
4440
758
  #e;
4441
759
  #t = t(!1);
4442
- #n = null;
4443
- #r = null;
760
+ #n = t(!1);
761
+ #r = t(50);
762
+ #i = 50;
763
+ #a = t(0);
764
+ #o = t(100);
765
+ #s = t(1);
766
+ #c = null;
767
+ #l = !1;
4444
768
  constructor() {
4445
- super(), this.#e = this.attachInternals();
769
+ super(), this.#e = this.attachInternals(), this.#e.role = "slider";
4446
770
  }
4447
771
  get value() {
4448
- return this.#n?.value ?? "";
772
+ return this.#r.value;
4449
773
  }
4450
774
  set value(e) {
4451
- this.#n && (this.#n.value = e);
775
+ this.#r.value = this.#u(e);
776
+ }
777
+ get min() {
778
+ return this.#a.value;
779
+ }
780
+ set min(e) {
781
+ this.#a.value = e, this.setAttribute("min", String(e));
782
+ }
783
+ get max() {
784
+ return this.#o.value;
785
+ }
786
+ set max(e) {
787
+ this.#o.value = e, this.setAttribute("max", String(e));
788
+ }
789
+ get step() {
790
+ return this.#s.value;
791
+ }
792
+ set step(e) {
793
+ this.#s.value = e, this.setAttribute("step", String(e));
4452
794
  }
4453
795
  get disabled() {
4454
796
  return this.#t.value;
@@ -4456,250 +798,146 @@ var be = class extends x(_) {
4456
798
  set disabled(e) {
4457
799
  this.#t.value = e, this.toggleAttribute("disabled", e);
4458
800
  }
801
+ get required() {
802
+ return this.#n.value;
803
+ }
804
+ set required(e) {
805
+ this.#n.value = e, this.toggleAttribute("required", e);
806
+ }
807
+ get name() {
808
+ return this.getAttribute("name") ?? "";
809
+ }
810
+ set name(e) {
811
+ this.setAttribute("name", e);
812
+ }
4459
813
  attributeChangedCallback(e, t, n) {
4460
814
  if (t !== n) {
4461
815
  switch (e) {
816
+ case "value":
817
+ this.#r.value = this.#u(parseFloat(n ?? "50") || 50);
818
+ break;
819
+ case "min":
820
+ this.#a.value = parseFloat(n ?? "0") || 0;
821
+ break;
822
+ case "max":
823
+ this.#o.value = parseFloat(n ?? "100") || 100;
824
+ break;
825
+ case "step":
826
+ this.#s.value = parseFloat(n ?? "1") || 1;
827
+ break;
4462
828
  case "disabled":
4463
829
  this.#t.value = n !== null;
4464
830
  break;
831
+ case "required":
832
+ this.#n.value = n !== null;
833
+ break;
4465
834
  }
4466
835
  super.attributeChangedCallback(e, t, n);
4467
836
  }
4468
837
  }
4469
838
  setup() {
4470
- super.setup(), this.addEffect(v(this, this.#t, this.#e)), this.deferChildren(() => {
4471
- this.#i(), this.addEffect(() => {
4472
- let e = this.#t.value;
4473
- this.#n && this.#n.toggleAttribute("disabled", e), this.#r && (e ? this.#r.setAttribute("disabled", "") : this.#o());
4474
- });
4475
- }), this.addEventListener("ui-input", this.#s), this.addEventListener("ui-press", this.#c), this.addEventListener("keydown", this.#l);
839
+ super.setup(), this.#i = this.#r.value, this.#c = document.createElement("div"), this.#c.classList.add("ui-range-thumb"), this.appendChild(this.#c), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.addEffect(c(this, this.#t, this.#e, { manageTabindex: !0 })), this.#n.value = this.hasAttribute("required"), this.addEffect(() => {
840
+ let e = this.#r.value, t = this.#d();
841
+ this.style.setProperty("--_progress", String(t)), this.setAttribute("aria-valuenow", String(e)), this.setAttribute("aria-valuemin", String(this.#a.value)), this.setAttribute("aria-valuemax", String(this.#o.value)), this.#e.setFormValue(String(e));
842
+ }), this.addEventListener("pointerdown", this.#p), this.addEventListener("keydown", this.#_);
4476
843
  }
4477
844
  teardown() {
4478
- this.removeEventListener("ui-input", this.#s), this.removeEventListener("ui-press", this.#c), this.removeEventListener("keydown", this.#l), this.#n = null, this.#r = null, super.teardown();
845
+ this.removeEventListener("pointerdown", this.#p), this.removeEventListener("keydown", this.#_), this.#c &&= (this.#c.remove(), null), super.teardown();
4479
846
  }
4480
- #i() {
4481
- this.#n = this.querySelector(":scope > ui-textarea"), this.#r = this.querySelector("[data-submit]") ?? this.#a();
847
+ onFormDisabled(e) {
848
+ this.#t.value = e;
4482
849
  }
4483
- #a() {
4484
- let e = this.querySelector(":scope > ui-chat-input-actions");
4485
- if (!e) return null;
4486
- let t = e.querySelectorAll("ui-button[variant=\"primary\"]");
4487
- return t.length ? t[t.length - 1] : null;
850
+ onFormReset() {
851
+ this.#r.value = this.#i;
4488
852
  }
4489
- #o() {
4490
- !this.#r || this.#t.value || (this.value.trim() ? this.#r.removeAttribute("disabled") : this.#r.setAttribute("disabled", ""));
853
+ onFormStateRestore(e) {
854
+ if (typeof e == "string") {
855
+ let t = parseFloat(e);
856
+ isNaN(t) || (this.value = t);
857
+ }
4491
858
  }
4492
- #s = (e) => {
4493
- this.#t.value || this.#o();
4494
- };
4495
- #c = (e) => {
4496
- this.#t.value || e.target === this.#r && this.#u();
4497
- };
4498
- #l = (e) => {
4499
- if (this.#t.value || this.hasAttribute("no-enter-submit")) return;
4500
- let t = e;
4501
- if (t.isComposing) return;
4502
- let n = t.target;
4503
- !this.#n?.contains(n) && n !== this.#n || t.key === "Enter" && !t.shiftKey && !t.ctrlKey && !t.metaKey && (t.preventDefault(), this.value.trim() && this.#u());
4504
- };
4505
- #u() {
4506
- let e = this.value.trim();
4507
- e && this.dispatchEvent(new CustomEvent("ui-send", {
4508
- bubbles: !0,
4509
- composed: !0,
4510
- cancelable: !0,
4511
- detail: { value: e }
4512
- })) && !this.hasAttribute("no-auto-clear") && (this.value = "", this.#r?.setAttribute("disabled", ""));
859
+ #u(e) {
860
+ let t = this.#a.value, n = this.#o.value, r = this.#s.value, i = Math.round((e - t) / r) * r + t;
861
+ return Math.min(n, Math.max(t, i));
4513
862
  }
4514
- }, We = class extends _ {
4515
- static observedAttributes = ["interactive", "href"];
4516
- setup() {
4517
- super.setup(), this.hasAttribute("interactive") && (this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.addEventListener("click", this.#e), this.addEventListener("keydown", this.#t));
863
+ #d() {
864
+ let e = this.#o.value - this.#a.value;
865
+ return e === 0 ? 0 : (this.#r.value - this.#a.value) / e;
4518
866
  }
4519
- teardown() {
4520
- this.removeEventListener("click", this.#e), this.removeEventListener("keydown", this.#t), super.teardown();
867
+ #f(e) {
868
+ let t = this.getBoundingClientRect(), n = this.#c?.offsetWidth ?? 0, r = n / 2, i = t.width - n;
869
+ if (i <= 0) return this.#a.value;
870
+ let a = e.clientX - t.left - r, o = Math.min(1, Math.max(0, a / i));
871
+ return this.#a.value + o * (this.#o.value - this.#a.value);
4521
872
  }
4522
- #e = () => {
4523
- let e = this.getAttribute("href");
4524
- e && (window.location.href = e);
873
+ #p = (e) => {
874
+ if (e.button !== 0 || this.#t.value) return;
875
+ this.setPointerCapture(e.pointerId), this.#l = !0, this.toggleAttribute("pressed", !0);
876
+ let t = this.#u(this.#f(e));
877
+ this.#r.value = t, this.#v(), this.addEventListener("pointermove", this.#m), this.addEventListener("pointerup", this.#h), this.addEventListener("pointercancel", this.#g);
4525
878
  };
4526
- #t = (e) => {
4527
- (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.#e());
879
+ #m = (e) => {
880
+ if (!this.#l || this.#t.value) return;
881
+ let t = this.#u(this.#f(e));
882
+ t !== this.#r.value && (this.#r.value = t, this.#v());
4528
883
  };
4529
- }, Ge = class extends _ {
4530
- static observedAttributes = [
4531
- "collapsible",
4532
- "collapsed",
4533
- "divider"
4534
- ];
4535
- setup() {
4536
- if (super.setup(), this.hasAttribute("collapsible")) {
4537
- let e = this.querySelector("[slot=\"heading\"]");
4538
- e && e.addEventListener("click", this.#e);
4539
- }
4540
- }
4541
- teardown() {
4542
- let e = this.querySelector("[slot=\"heading\"]");
4543
- e && e.removeEventListener("click", this.#e), super.teardown();
4544
- }
4545
- #e = () => {
4546
- this.hasAttribute("collapsible") && this.toggleAttribute("collapsed");
884
+ #h = () => {
885
+ this.#l = !1, this.removeAttribute("pressed"), this.removeEventListener("pointermove", this.#m), this.removeEventListener("pointerup", this.#h), this.removeEventListener("pointercancel", this.#g), this.#y();
4547
886
  };
4548
- }, Y = class extends _ {
4549
- #e;
4550
- #t;
4551
- constructor() {
4552
- super(), this.#e = this.attachInternals(), this.#e.role = "toolbar";
4553
- }
4554
- setup() {
4555
- super.setup(), this.#t = new i(this, {
4556
- selector: ":scope > ui-button:not([disabled]), :scope > button:not([disabled])",
4557
- orientation: "horizontal"
4558
- }), this.hasAttribute("aria-label") || this.setAttribute("aria-label", "Toolbar");
4559
- }
4560
- teardown() {
4561
- this.#t.destroy(), super.teardown();
4562
- }
4563
- }, Ke = class extends _ {
4564
- static observedAttributes = ["collapsed"];
4565
- #e = null;
4566
- #t = null;
4567
- #n = null;
4568
- #r = [];
4569
- attributeChangedCallback(e, t, n) {
4570
- t !== n && (e === "collapsed" && this.dataset.ready !== void 0 && this.#i(), super.attributeChangedCallback?.(e, t, n));
4571
- }
4572
- setup() {
4573
- super.setup();
4574
- let e = this.querySelector(":scope > [slot=\"sidebar\"]");
4575
- e?.querySelector(".layout-resize-handle") && (this.#e = new u(e, {
4576
- handleSelector: ".layout-resize-handle",
4577
- axis: "horizontal",
4578
- min: 160,
4579
- max: 400
4580
- })), e && this.#s(e), this.#i(), this.addEventListener("ui-dismiss", this.#o), this.dataset.ready = "";
4581
- }
4582
- teardown() {
4583
- this.removeEventListener("ui-dismiss", this.#o), this.#a(), this.#n = null, this.#t?.disconnect(), this.#t = null, this.#e?.destroy(), this.#e = null, super.teardown();
4584
- }
4585
- /** Attach or detach summary click interception based on collapsed state. */
4586
- #i() {
4587
- if (this.#a(), !this.hasAttribute("collapsed")) {
4588
- this.#n?.flyoutOpen && this.#n.closeFlyout(), this.#n = null;
4589
- return;
4590
- }
4591
- let e = this.querySelectorAll("ui-nav-group");
4592
- for (let t of e) {
4593
- let e = t.querySelector(":scope > details > summary");
4594
- if (!e) continue;
4595
- let n = (e) => {
4596
- e.preventDefault(), this.#n === t && t.flyoutOpen ? (t.closeFlyout(), this.#n = null) : (this.#n?.flyoutOpen && this.#n.closeFlyout(), t.openFlyout(), this.#n = t);
4597
- };
4598
- e.addEventListener("click", n), this.#r.push({
4599
- summary: e,
4600
- handler: n
4601
- });
4602
- }
4603
- }
4604
- /** Remove all summary click listeners. */
4605
- #a() {
4606
- for (let { summary: e, handler: t } of this.#r) e.removeEventListener("click", t);
4607
- this.#r = [];
4608
- }
4609
- /** When a group closes its flyout internally (dismiss, option select),
4610
- * clear our active reference so we stay in sync. */
4611
- #o = (e) => {
4612
- let t = e.target?.closest?.("ui-nav-group");
4613
- t && t === this.#n && (this.#n = null);
887
+ #g = () => {
888
+ this.#l = !1, this.removeAttribute("pressed"), this.removeEventListener("pointermove", this.#m), this.removeEventListener("pointerup", this.#h), this.removeEventListener("pointercancel", this.#g);
4614
889
  };
4615
- /** Watch header/footer size changes and sync CSS custom properties + data
4616
- * attributes so content gets correct padding offsets and fade masks. */
4617
- #s(e) {
4618
- let t = e.querySelector("ui-layout-sidebar-header"), n = e.querySelector("ui-layout-sidebar-footer"), r = e.querySelector("ui-layout-sidebar-content");
4619
- if (!r) return;
4620
- let i = () => {
4621
- let i = t ? t.offsetHeight : 0, a = n ? n.offsetHeight : 0;
4622
- e.style.setProperty("--_sidebar-header-height", `${i}px`), e.style.setProperty("--_sidebar-footer-height", `${a}px`), t ? r.dataset.hasHeader = "" : delete r.dataset.hasHeader, n ? r.dataset.hasFooter = "" : delete r.dataset.hasFooter;
4623
- };
4624
- i();
4625
- let a = [];
4626
- if (t && a.push(t), n && a.push(n), a.length > 0) {
4627
- this.#t = new ResizeObserver(i);
4628
- for (let e of a) this.#t.observe(e);
890
+ #_ = (e) => {
891
+ if (this.#t.value) return;
892
+ let t = this.#s.value, n = t * 10, r = this.#r.value;
893
+ switch (e.key) {
894
+ case "ArrowRight":
895
+ case "ArrowUp":
896
+ r += t;
897
+ break;
898
+ case "ArrowLeft":
899
+ case "ArrowDown":
900
+ r -= t;
901
+ break;
902
+ case "PageUp":
903
+ r += n;
904
+ break;
905
+ case "PageDown":
906
+ r -= n;
907
+ break;
908
+ case "Home":
909
+ r = this.#a.value;
910
+ break;
911
+ case "End":
912
+ r = this.#o.value;
913
+ break;
914
+ default: return;
4629
915
  }
4630
- }
4631
- }, qe = class extends _ {
4632
- #e = null;
4633
- #t = !1;
4634
- setup() {
4635
- super.setup();
4636
- let e = this.querySelector(":scope > ui-listbox[popover]");
4637
- e && (this.#e = new l(this), this.#e.wirePopover(this, e), this.addEventListener("click", this.#n), this.addEventListener("ui-dismiss", this.#r));
4638
- }
4639
- teardown() {
4640
- this.removeEventListener("click", this.#n), this.removeEventListener("ui-dismiss", this.#r), this.#e?.destroy(), this.#e = null, this.#t = !1, super.teardown();
4641
- }
4642
- #n = (e) => {
4643
- e.target.closest("ui-listbox") || (this.#t = !this.#t, this.#e?.syncPopover(this.#t));
4644
- };
4645
- #r = () => {
4646
- this.#t = !1, this.#e?.syncPopover(!1);
916
+ e.preventDefault(), r = this.#u(r), r !== this.#r.value && (this.#r.value = r, this.#v(), this.#y());
4647
917
  };
4648
- }, Je = class extends _ {
4649
- #e = null;
4650
- get open() {
4651
- return this.hasAttribute("open");
4652
- }
4653
- set open(e) {
4654
- this.toggleAttribute("open", e);
4655
- }
4656
- toggle() {
4657
- this.open = !this.open;
4658
- }
4659
- setup() {
4660
- super.setup(), this.querySelector(".layout-resize-handle") && (this.#e = new u(this, {
4661
- handleSelector: ".layout-resize-handle",
4662
- axis: "horizontal",
4663
- min: 280,
4664
- max: 480,
4665
- reverse: !0
918
+ #v() {
919
+ this.dispatchEvent(new CustomEvent("ui-input", {
920
+ bubbles: !0,
921
+ composed: !0,
922
+ detail: { value: this.#r.value }
4666
923
  }));
4667
924
  }
4668
- teardown() {
4669
- this.#e?.destroy(), this.#e = null, super.teardown();
4670
- }
4671
- }, Ye = class extends _ {
4672
- #e = null;
4673
- get open() {
4674
- return this.hasAttribute("open");
4675
- }
4676
- set open(e) {
4677
- this.toggleAttribute("open", e);
4678
- }
4679
- toggle() {
4680
- this.open = !this.open;
4681
- }
4682
- setup() {
4683
- super.setup(), this.querySelector(".layout-resize-handle") && (this.#e = new u(this, {
4684
- handleSelector: ".layout-resize-handle",
4685
- axis: "horizontal",
4686
- min: 280,
4687
- max: 480,
4688
- reverse: !0
925
+ #y() {
926
+ this.dispatchEvent(new CustomEvent("ui-change", {
927
+ bubbles: !0,
928
+ composed: !0,
929
+ detail: { value: this.#r.value }
4689
930
  }));
4690
931
  }
4691
- teardown() {
4692
- this.#e?.destroy(), this.#e = null, super.teardown();
4693
- }
4694
- }, X = /* @__PURE__ */ new Map(), Z = /* @__PURE__ */ new Set();
4695
- function Xe(e, t) {
4696
- X.set(e, t), Z.forEach((t) => t(e));
932
+ }, C = /* @__PURE__ */ new Map(), w = /* @__PURE__ */ new Set();
933
+ function T(e, t) {
934
+ C.set(e, t), w.forEach((t) => t(e));
4697
935
  }
4698
- function Q(e) {
4699
- return X.get(e);
936
+ function E(e) {
937
+ return C.get(e);
4700
938
  }
4701
- function $(e) {
4702
- return Z.add(e), () => Z.delete(e);
939
+ function D(e) {
940
+ return w.add(e), () => w.delete(e);
4703
941
  }
4704
942
  /**
4705
943
  * Icon component rendering SVG from the global icon registry.
@@ -4708,7 +946,7 @@ function $(e) {
4708
946
  * @attr {string} size - Icon size override
4709
947
  * @attr {string} aria-label - Accessible label (sets role="img" when present)
4710
948
  */
4711
- var Ze = class extends _ {
949
+ var O = class extends s {
4712
950
  static observedAttributes = [
4713
951
  "name",
4714
952
  "weight",
@@ -4739,10 +977,10 @@ var Ze = class extends _ {
4739
977
  this.innerHTML = "", this.#e?.(), this.#e = null;
4740
978
  return;
4741
979
  }
4742
- let t = Q(e);
4743
- t ? (this.innerHTML = t, this.#e?.(), this.#e = null) : (this.innerHTML = "", this.#e ||= $((e) => {
980
+ let t = E(e);
981
+ t ? (this.innerHTML = t, this.#e?.(), this.#e = null) : (this.innerHTML = "", this.#e ||= D((e) => {
4744
982
  e === this.#n() && this.#r();
4745
983
  }));
4746
984
  }
4747
985
  };
4748
- export { I as $, Te as A, ge as B, Me as C, ee as Ct, Oe as D, v as Dt, ke as E, b as Et, J as F, W as G, me as H, be as I, V as J, H as K, q as L, Ce as M, Se as N, De as O, xe as P, L as Q, ye as R, Ne as S, C as St, Ae as T, y as Tt, pe as U, he as V, fe as W, z as X, B as Y, R as Z, Re as _, re as _t, Ye as a, A as at, Fe as b, T as bt, Ke as c, D as ct, We as d, le as dt, F as et, Ue as f, ce as ft, ze as g, ie as gt, Be as h, ae as ht, Xe as i, j as it, we as j, Ee as k, Y as l, E as lt, Ve as m, oe as mt, Q as n, N as nt, Je as o, k as ot, He as p, se as pt, U as q, $ as r, M as rt, qe as s, O as st, Ze as t, P as tt, Ge as u, ue as ut, Le as v, ne as vt, je as w, x as wt, Pe as x, w as xt, Ie as y, te as yt, _e as z };
986
+ export { u as _, S as a, y as c, g as d, h as f, l as g, d as h, T as i, v as l, m, E as n, x as o, p, D as r, b as s, O as t, _ as u, c as v };