@golemui/gui-lit 1.1.0 → 1.1.1-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/{button.element-3a7rRHbA.js → button.element-CJay43iR.js} +16 -13
  3. package/{calendar-BuJgwvZx.js → calendar-D31xNsxx.js} +72 -59
  4. package/{calendar.element-M5MPJmap.js → calendar.element-BhFrCsns.js} +22 -20
  5. package/{checkbox.element-CVskoXEc.js → checkbox.element-DAAVB651.js} +49 -49
  6. package/{currency.element-CfFrAtrr.js → currency.element-D8A2ObpM.js} +11 -10
  7. package/{date-Bj9mI3GU.js → date-DBuYpvcO.js} +35 -27
  8. package/{date-input-cJDkNnVw.js → date-input-DLiMreSS.js} +64 -44
  9. package/date-picker.element-DeUQtbLg.js +357 -0
  10. package/{date-time-calendar-BzRfkLKU.js → date-time-calendar-DzU-FtVl.js} +89 -76
  11. package/{date-time-calendar.element-DC4NK0y1.js → date-time-calendar.element-BLBcVsFu.js} +13 -11
  12. package/{date-time-input-BXxsfuyZ.js → date-time-input-DZaz2heD.js} +75 -43
  13. package/{date-time-picker.element-Dy-8cb-_.js → date-time-picker.element-BUbLdV6i.js} +125 -65
  14. package/{date-time.element-Bv4XdzMi.js → date-time.element-B5onfSBG.js} +31 -25
  15. package/{date.element-Consgsbb.js → date.element-BsKhLrEc.js} +22 -19
  16. package/{day-status-0-hJHrI7.js → day-status-CsWStVQV.js} +153 -129
  17. package/{dropdown.element-WsD61Qel.js → dropdown.element-CXpMwJsU.js} +19 -13
  18. package/{errors-QjKhr6mA.js → errors-Byb2dIhK.js} +3 -2
  19. package/index.js +1643 -1184
  20. package/index.umd.cjs +792 -399
  21. package/{list-CrLIL4by.js → list-D730tmGN.js} +115 -116
  22. package/{list.element-DV82YxnJ.js → list.element-eo3DIOrp.js} +2 -2
  23. package/{markdown.element-p-kC47D7.js → markdown.element-FbtwdnAv.js} +310 -218
  24. package/{number.element-CBr47IiY.js → number.element-BEpOCzXy.js} +76 -61
  25. package/package.json +6 -6
  26. package/{part-templates-Db871PS3.js → part-templates-VORbpgs2.js} +132 -118
  27. package/{password.element-n-R9RbkB.js → password.element-CBaB8h5b.js} +19 -17
  28. package/{pill-ranges-DCqDmpkk.js → pill-ranges-DpvWwP-3.js} +12 -12
  29. package/{pills-Be1UrLgq.js → pills-BDMO2NiR.js} +80 -58
  30. package/popup.controller-B33OvX_y.js +86 -0
  31. package/{radiogroup.element-CeQn623u.js → radiogroup.element-KWzBx8mx.js} +55 -51
  32. package/{range-calendar-CKPYeSGt.js → range-calendar-DO_woqcF.js} +101 -87
  33. package/{range-calendar.element-D6KYq18B.js → range-calendar.element-DHLZhpnj.js} +15 -13
  34. package/{range-date-input-D--AqBMv.js → range-date-input-Br7XqQPK.js} +90 -71
  35. package/{range-date-input.element-D4nIXJbw.js → range-date-input.element-BdD4SlB4.js} +15 -12
  36. package/{range-date-picker.element-dhxPAAE6.js → range-date-picker.element-DWRHiAoC.js} +97 -49
  37. package/{range-date-time-calendar-yksWrR7b.js → range-date-time-calendar-B3EMgN1E.js} +150 -136
  38. package/{range-date-time-calendar.element-C00aDefZ.js → range-date-time-calendar.element-Coea6RF4.js} +9 -7
  39. package/{range-date-time-input-B37TUoM3.js → range-date-time-input-Cu-T_nuC.js} +125 -94
  40. package/{range-date-time-input.element-DUnbv4ed.js → range-date-time-input.element-Cti44iuW.js} +31 -25
  41. package/{range-date-time-picker.element-Cbps6s_G.js → range-date-time-picker.element-CDN2RL1y.js} +107 -47
  42. package/{range-time-input-3lhqR1Ku.js → range-time-input-BP9ZL9O8.js} +85 -66
  43. package/{range-time-input.element-dU2iBdmJ.js → range-time-input.element-B7wtHJoQ.js} +14 -11
  44. package/{range-time-picker.element-v6nQsIPw.js → range-time-picker.element-CPIAiQPC.js} +92 -51
  45. package/{repeater.element-CtNgB4F5.js → repeater.element-BM1Keckd.js} +1 -1
  46. package/{select.element-C0V-Bv3L.js → select.element-eepcXTpL.js} +84 -78
  47. package/{tabs.element-BvAyI71N.js → tabs.element-CvcIA8P3.js} +1 -0
  48. package/{tags.element-DvwEpxpK.js → tags.element-CPHgotb0.js} +21 -14
  49. package/templates-Dmr34nwp.js +88 -0
  50. package/{textarea.element-HThYqdR_.js → textarea.element-CiNEy9uq.js} +8 -7
  51. package/{textinput.element-CkXNzMUg.js → textinput.element-AL2Nr768.js} +10 -9
  52. package/{time-input-BOhlBGJZ.js → time-input-5dkSm8UW.js} +67 -47
  53. package/{time-list-Czo48bZm.js → time-list-DLcq8BAp.js} +1 -1
  54. package/{time-picker-bFJ63ky8.js → time-picker-g337F8d0.js} +89 -51
  55. package/{time-picker.element-CYZVXgRS.js → time-picker.element-DLihegjg.js} +23 -19
  56. package/{time.element-fK3oLi49.js → time.element-BneqgMlQ.js} +22 -19
  57. package/{toggle.element-C1kCw5H8.js → toggle.element-Cz91CRdp.js} +44 -43
  58. package/date-picker.element-va_-LGZD.js +0 -312
  59. package/popup.controller-eUDxE6jD.js +0 -71
  60. package/templates-Dk1jxLwS.js +0 -75
@@ -1,20 +1,20 @@
1
- import { p as o } from "./date-Bj9mI3GU.js";
2
- function i(t) {
1
+ import { p as o } from "./date-DBuYpvcO.js";
2
+ function s(t) {
3
3
  return `${t.start}-${t.end ?? t.start}`;
4
4
  }
5
5
  function f(t, n) {
6
6
  return !t || !Array.isArray(t) ? [] : [...t].sort((r, e) => n(r.start, e.start));
7
7
  }
8
8
  function u(t, n) {
9
- return t.find((r) => i(r) === n);
9
+ return t.find((r) => s(r) === n);
10
10
  }
11
11
  function c(t, n) {
12
12
  const r = t ?? [], e = u(r, n);
13
13
  if (!e) return null;
14
- const a = r.filter(
15
- (s) => !(s.start === e.start && (s.end ?? null) === (e.end ?? null))
14
+ const i = r.filter(
15
+ (a) => !(a.start === e.start && (a.end ?? null) === (e.end ?? null))
16
16
  );
17
- return { removed: e, next: a };
17
+ return { removed: e, next: i };
18
18
  }
19
19
  function d(t, n) {
20
20
  const r = o(t);
@@ -28,13 +28,13 @@ function m(t, n) {
28
28
  const r = n(t.start), e = t.end ? n(t.end) : r;
29
29
  return `${r} - ${e}`;
30
30
  }
31
- function y(t, n, r) {
32
- return t.map((e) => {
33
- const a = n(e);
31
+ function y(t, n) {
32
+ return t.map((r) => {
33
+ const e = n(r);
34
34
  return {
35
- key: i(e),
36
- label: a,
37
- ariaLabel: `${r} ${a}`
35
+ key: s(r),
36
+ label: e,
37
+ ariaLabel: e
38
38
  };
39
39
  });
40
40
  }
@@ -1,16 +1,16 @@
1
- import { LitElement as m, nothing as p, html as d } from "lit";
1
+ import { LitElement as m, nothing as d, html as a } from "lit";
2
2
  import { property as l, state as u, customElement as w } from "lit/decorators.js";
3
3
  import { classMap as c } from "lit/directives/class-map.js";
4
4
  import { repeat as b } from "lit/directives/repeat.js";
5
5
  import { c as v } from "./tabs-DzSCq_98.js";
6
- var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (e, t, i, s) => {
7
- for (var n = s > 1 ? void 0 : s ? _(t, i) : t, a = e.length - 1, h; a >= 0; a--)
8
- (h = e[a]) && (n = (s ? h(t, i, n) : h(n)) || n);
9
- return s && n && y(t, i, n), n;
6
+ var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (e, t, i, r) => {
7
+ for (var n = r > 1 ? void 0 : r ? _(t, i) : t, p = e.length - 1, h; p >= 0; p--)
8
+ (h = e[p]) && (n = (r ? h(t, i, n) : h(n)) || n);
9
+ return r && n && y(t, i, n), n;
10
10
  };
11
- let r = class extends m {
11
+ let s = class extends m {
12
12
  constructor() {
13
- super(...arguments), this.items = [], this.clickable = !1, this.removable = !0, this.bubble = !0, this.tabbable = !0, this.disabled = !1, this.readOnly = !1, this.removeAriaLabel = "Remove", this._isStartVisible = !0, this._isEndVisible = !0, this._showDropdown = !1, this._pendingFocusIndex = null, this.handlePillFocus = (e) => {
13
+ super(...arguments), this.uid = void 0, this.items = [], this.clickable = !1, this.removable = !0, this.bubble = !0, this.tabbable = !0, this.disabled = !1, this.readOnly = !1, this.removeAriaLabel = "Remove", this.toolbarAriaLabel = "Selected items", this._isStartVisible = !0, this._isEndVisible = !0, this._showDropdown = !1, this._pendingFocusIndex = null, this.handlePillFocus = (e) => {
14
14
  e.target.scrollIntoView({
15
15
  behavior: "smooth",
16
16
  block: "nearest",
@@ -19,8 +19,8 @@ let r = class extends m {
19
19
  }, this.toggleDropdown = () => {
20
20
  this._showDropdown ? this.closeDropdown() : this.openDropdown();
21
21
  }, this.handleOutsideInteraction = (e) => {
22
- const t = this.querySelector(".gui-pills__compact"), i = this.querySelector(".gui-pills__dropdown"), s = e.composedPath()[0];
23
- !t?.contains(s) && !i?.contains(s) && this.closeDropdown();
22
+ const t = this.querySelector(".gui-pills__compact"), i = this.querySelector(".gui-pills__dropdown"), r = e.composedPath()[0];
23
+ !t?.contains(r) && !i?.contains(r) && this.closeDropdown();
24
24
  };
25
25
  }
26
26
  createRenderRoot() {
@@ -35,8 +35,8 @@ let r = class extends m {
35
35
  this._showDropdown && this.closeDropdown();
36
36
  return;
37
37
  }
38
- const s = Math.max(0, Math.min(t, i - 1));
39
- this.focusPillAt(s);
38
+ const r = Math.max(0, Math.min(t, i - 1));
39
+ this.focusPillAt(r);
40
40
  }
41
41
  }
42
42
  disconnectedCallback() {
@@ -44,13 +44,13 @@ let r = class extends m {
44
44
  }
45
45
  render() {
46
46
  const e = this.items.length;
47
- return e === 0 ? p : d`
48
- ${this.renderStrip()} ${this.bubble ? this.renderCompact(e) : p}
49
- ${this.bubble && this._showDropdown ? this.renderDropdown() : p}
47
+ return e === 0 ? d : a`
48
+ ${this.renderStrip()} ${this.bubble ? this.renderCompact(e) : d}
49
+ ${this.bubble && this._showDropdown ? this.renderDropdown() : d}
50
50
  `;
51
51
  }
52
52
  renderStrip() {
53
- return d`
53
+ return a`
54
54
  <div
55
55
  class=${c({
56
56
  "gui-pills__strip-wrapper": !0,
@@ -58,7 +58,12 @@ let r = class extends m {
58
58
  "gui-pills--end-shadow": !this._isEndVisible
59
59
  })}
60
60
  >
61
- <div class="gui-pills__strip" role="list" tabindex="-1">
61
+ <div
62
+ class="gui-pills__strip"
63
+ role="toolbar"
64
+ aria-label=${this.toolbarAriaLabel}
65
+ tabindex="-1"
66
+ >
62
67
  <span class="gui-sentinel gui-sentinel__start"></span>
63
68
  ${b(
64
69
  this.items,
@@ -70,14 +75,19 @@ let r = class extends m {
70
75
  </div>
71
76
  `;
72
77
  }
78
+ get dropdownId() {
79
+ return this.uid ? `${this.uid}_pills_dropdown` : void 0;
80
+ }
73
81
  renderCompact(e) {
74
- return d`
82
+ return a`
75
83
  <div class="gui-pills__compact">
76
84
  <button
77
85
  type="button"
78
86
  class="gui-pills__count"
79
87
  aria-label=${this.compactAriaLabel ?? `${e} items`}
88
+ aria-haspopup="true"
80
89
  aria-expanded=${this._showDropdown}
90
+ aria-controls=${this.dropdownId ?? d}
81
91
  ?disabled=${this.disabled || this.readOnly}
82
92
  @click=${(t) => {
83
93
  t.stopPropagation(), this.toggleDropdown();
@@ -89,8 +99,14 @@ let r = class extends m {
89
99
  `;
90
100
  }
91
101
  renderDropdown() {
92
- return d`
93
- <div class="gui-pills__dropdown" role="list">
102
+ return a`
103
+ <div
104
+ id=${this.dropdownId ?? d}
105
+ class="gui-pills__dropdown"
106
+ role="toolbar"
107
+ aria-orientation="vertical"
108
+ aria-label=${this.toolbarAriaLabel}
109
+ >
94
110
  ${b(
95
111
  this.items,
96
112
  (e) => `dd-${e.key}`,
@@ -100,36 +116,35 @@ let r = class extends m {
100
116
  `;
101
117
  }
102
118
  renderPill(e, t, i) {
103
- const s = e.ariaLabel ?? `${this.removeAriaLabel}: ${e.label}`, n = this.clickable && !this.disabled && !this.readOnly;
104
- return d`
105
- <div
119
+ const r = this.clickable && !this.disabled && !this.readOnly;
120
+ return a`
121
+ <button
122
+ type="button"
106
123
  class=${c({
107
124
  "gui-pills__pill": !0,
108
- "gui-pills__pill--clickable": n
125
+ "gui-pills__pill--clickable": r
109
126
  })}
110
- role="listitem"
111
127
  data-key=${e.key}
112
128
  data-index=${t}
113
129
  data-in-dropdown=${i}
114
130
  tabindex=${this.tabbable && !this.disabled && !this.readOnly ? 0 : -1}
115
- aria-label=${s}
116
- @click=${(a) => this.onPillClick(a, e)}
131
+ ?disabled=${this.disabled || this.readOnly}
132
+ aria-label=${e.ariaLabel ?? e.label}
133
+ aria-description=${this.removable && !this.disabled && !this.readOnly ? this.removeAriaLabel : d}
134
+ @click=${(n) => this.onPillClick(n, e)}
117
135
  @focus=${this.handlePillFocus}
118
- @keydown=${(a) => this.onPillKeydown(a, e, t)}
136
+ @keydown=${(n) => this.onPillKeydown(n, e, t)}
119
137
  >
120
138
  <span class="gui-pills__pill-text">${e.label}</span>
121
- ${this.removable ? this.renderRemoveButton(e) : p}
122
- </div>
139
+ ${this.removable ? this.renderRemoveButton(e) : d}
140
+ </button>
123
141
  `;
124
142
  }
125
143
  renderRemoveButton(e) {
126
- return d`
127
- <button
128
- type="button"
144
+ return a`
145
+ <span
129
146
  class="gui-pills__pill-remove"
130
- tabindex="-1"
131
147
  aria-hidden="true"
132
- ?disabled=${this.disabled || this.readOnly}
133
148
  @mousedown=${(t) => {
134
149
  t.stopPropagation(), t.preventDefault();
135
150
  }}
@@ -137,10 +152,11 @@ let r = class extends m {
137
152
  t.stopPropagation(), this.emitRemove(e.key, this.items.indexOf(e));
138
153
  }}
139
154
  >
140
- ${this.removeIcon ? d`<span
155
+ ${this.removeIcon ? a`<span
141
156
  class=${`gui-widget-icon ${this.removeIcon}`}
142
157
  data-icon=${this.removeIcon}
143
- ></span>` : d`<svg
158
+ aria-hidden="true"
159
+ ></span>` : a`<svg
144
160
  xmlns="http://www.w3.org/2000/svg"
145
161
  width="16"
146
162
  height="16"
@@ -152,7 +168,7 @@ let r = class extends m {
152
168
  d="M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
153
169
  ></path>
154
170
  </svg>`}
155
- </button>
171
+ </span>
156
172
  `;
157
173
  }
158
174
  onPillClick(e, t) {
@@ -183,12 +199,12 @@ let r = class extends m {
183
199
  );
184
200
  return;
185
201
  }
186
- const s = this._showDropdown, n = s ? "ArrowUp" : "ArrowLeft", a = s ? "ArrowDown" : "ArrowRight";
202
+ const r = this._showDropdown, n = r ? "ArrowUp" : "ArrowLeft", p = r ? "ArrowDown" : "ArrowRight";
187
203
  if (e.key === n) {
188
204
  i > 0 ? (e.preventDefault(), this.focusPillAt(i - 1)) : this.emitKeydown(t.key, e);
189
205
  return;
190
206
  }
191
- if (e.key === a) {
207
+ if (e.key === p) {
192
208
  i < this.items.length - 1 ? (e.preventDefault(), this.focusPillAt(i + 1)) : this.emitKeydown(t.key, e);
193
209
  return;
194
210
  }
@@ -200,7 +216,7 @@ let r = class extends m {
200
216
  e.preventDefault(), this.focusPillAt(this.items.length - 1);
201
217
  return;
202
218
  }
203
- if (e.key === "Escape" && s) {
219
+ if (e.key === "Escape" && r) {
204
220
  e.preventDefault(), e.stopPropagation(), this.closeDropdown();
205
221
  return;
206
222
  }
@@ -235,8 +251,8 @@ let r = class extends m {
235
251
  requestAnimationFrame(() => {
236
252
  const t = this._showDropdown ? ".gui-pills__dropdown .gui-pills__pill" : ".gui-pills__strip .gui-pills__pill", i = this.querySelectorAll(t);
237
253
  if (i.length === 0) return;
238
- const s = Math.max(0, Math.min(e, i.length - 1));
239
- i[s].focus();
254
+ const r = Math.max(0, Math.min(e, i.length - 1));
255
+ i[r].focus();
240
256
  });
241
257
  }
242
258
  /** Open the dropdown and focus its first pill. No-op if `bubble` is false. */
@@ -281,46 +297,52 @@ let r = class extends m {
281
297
  this.startObserver?.disconnect(), this.endObserver?.disconnect(), this.startObserver = void 0, this.endObserver = void 0;
282
298
  }
283
299
  };
300
+ o([
301
+ l({ type: String })
302
+ ], s.prototype, "uid", 2);
284
303
  o([
285
304
  l({ type: Array })
286
- ], r.prototype, "items", 2);
305
+ ], s.prototype, "items", 2);
287
306
  o([
288
307
  l({ type: Boolean })
289
- ], r.prototype, "clickable", 2);
308
+ ], s.prototype, "clickable", 2);
290
309
  o([
291
310
  l({ type: Boolean })
292
- ], r.prototype, "removable", 2);
311
+ ], s.prototype, "removable", 2);
293
312
  o([
294
313
  l({ type: Boolean })
295
- ], r.prototype, "bubble", 2);
314
+ ], s.prototype, "bubble", 2);
296
315
  o([
297
316
  l({ type: Boolean })
298
- ], r.prototype, "tabbable", 2);
317
+ ], s.prototype, "tabbable", 2);
299
318
  o([
300
319
  l({ type: Boolean })
301
- ], r.prototype, "disabled", 2);
320
+ ], s.prototype, "disabled", 2);
302
321
  o([
303
322
  l({ type: Boolean, attribute: "readonly" })
304
- ], r.prototype, "readOnly", 2);
323
+ ], s.prototype, "readOnly", 2);
305
324
  o([
306
325
  l({ type: String, attribute: "remove-aria-label" })
307
- ], r.prototype, "removeAriaLabel", 2);
326
+ ], s.prototype, "removeAriaLabel", 2);
308
327
  o([
309
328
  l({ type: String, attribute: "remove-icon" })
310
- ], r.prototype, "removeIcon", 2);
329
+ ], s.prototype, "removeIcon", 2);
311
330
  o([
312
331
  l({ type: String, attribute: "compact-aria-label" })
313
- ], r.prototype, "compactAriaLabel", 2);
332
+ ], s.prototype, "compactAriaLabel", 2);
333
+ o([
334
+ l({ type: String, attribute: "toolbar-aria-label" })
335
+ ], s.prototype, "toolbarAriaLabel", 2);
314
336
  o([
315
337
  u()
316
- ], r.prototype, "_isStartVisible", 2);
338
+ ], s.prototype, "_isStartVisible", 2);
317
339
  o([
318
340
  u()
319
- ], r.prototype, "_isEndVisible", 2);
341
+ ], s.prototype, "_isEndVisible", 2);
320
342
  o([
321
343
  u()
322
- ], r.prototype, "_showDropdown", 2);
323
- r = o([
344
+ ], s.prototype, "_showDropdown", 2);
345
+ s = o([
324
346
  w("gui-pills")
325
- ], r);
326
- typeof customElements < "u" && !customElements.get("gui-pills") && customElements.define("gui-pills", r);
347
+ ], s);
348
+ typeof customElements < "u" && !customElements.get("gui-pills") && customElements.define("gui-pills", s);
@@ -0,0 +1,86 @@
1
+ import "lit";
2
+ import { G as n } from "./focus-leave.controller-2gV0pQd5.js";
3
+ class c {
4
+ constructor(e, i) {
5
+ this._open = !1, this._restoringFocus = !1, this._suppressNextFocusOut = !1, this._pointerDownInside = !1, this._pointerDownTarget = null, this.show = () => {
6
+ this.options.isDisabled() || this._restoringFocus || (this.options.beforeOpen?.(this), this.setOpen(!0));
7
+ }, this.close = () => {
8
+ this.setOpen(!1);
9
+ }, this.openAndFocus = () => {
10
+ this.show(), !(!this._open || !this.options.focusPopupSelector) && Promise.resolve(this.host.updateComplete).then(() => {
11
+ this.host.querySelector(this.options.focusPopupSelector)?.focus();
12
+ });
13
+ }, this.toggle = () => {
14
+ this.options.isDisabled() || (this.options.keyToggleMode === "toggle" ? this.setOpen(!this._open) : this._open ? this.close() : this.show());
15
+ }, this.onAnchorClick = (t) => {
16
+ if (this.options.isDisabled()) return;
17
+ const s = this._pointerDownTarget ?? t.target, o = this.options.clickIntent(s);
18
+ if (o !== "ignore") {
19
+ if (o === "open") {
20
+ this.show();
21
+ return;
22
+ }
23
+ this.toggle();
24
+ }
25
+ }, this.onAnchorKeyDown = (t) => this.options.isDisabled() ? !1 : t.key === "Escape" && this._open ? (t.preventDefault(), t.stopPropagation(), this.restoreFocusToInput(), this.close(), !0) : !1, this.onDocumentClick = (t) => {
26
+ if (!this._open) return;
27
+ !t.composedPath().includes(this.host) && !this._pointerDownInside && this.close();
28
+ }, this.onDocumentPointerDown = (t) => {
29
+ const s = t.composedPath();
30
+ this._pointerDownInside = s.includes(this.host), this._pointerDownTarget = s[0] ?? null;
31
+ }, this.onDocumentKeyDown = (t) => {
32
+ t.key !== "Tab" && t.key !== "Escape" || (this._pointerDownInside = !1, this._pointerDownTarget = null);
33
+ }, this.closeOnFocusLeave = () => {
34
+ this._pointerDownInside || this.close();
35
+ }, this.onHostFocusOut = (t) => {
36
+ if (this._suppressNextFocusOut) {
37
+ this._suppressNextFocusOut = !1;
38
+ return;
39
+ }
40
+ if (!this._open) return;
41
+ const s = t.relatedTarget;
42
+ this._pointerDownInside && (!s || s.contains(this.host)) || this.focusLeave.handleFocusOut(t);
43
+ }, this.host = e, this.options = i, this.focusLeave = new n(e, {
44
+ onLeave: () => {
45
+ this.close();
46
+ }
47
+ }), e.addController(this);
48
+ }
49
+ get open() {
50
+ return this._open;
51
+ }
52
+ /**
53
+ * Swallows exactly the next focusout pass — even one that arrives while
54
+ * the popup is closed — then re-arms normal behavior. Used around
55
+ * operations that transiently move focus (pills dropdown coordination).
56
+ */
57
+ suppressNextFocusOut() {
58
+ this._suppressNextFocusOut = !0;
59
+ }
60
+ setOpen(e) {
61
+ this._open !== e && (this._open = e, this.host.requestUpdate(), this.options.onOpenChanged?.(e));
62
+ }
63
+ /**
64
+ * Focuses the `focusRestoreSelector` element, arming the restoring-focus
65
+ * flag (reset via setTimeout(0)) so the resulting focus event does not
66
+ * re-open the popup through show().
67
+ */
68
+ restoreFocusToInput() {
69
+ const e = this.host.querySelector(this.options.focusRestoreSelector);
70
+ e && (this._restoringFocus = !0, e.focus(), setTimeout(() => {
71
+ this._restoringFocus = !1;
72
+ }));
73
+ }
74
+ hostUpdated() {
75
+ this._open && this.options.isDisabled() && this.close();
76
+ }
77
+ hostConnected() {
78
+ document.addEventListener("click", this.onDocumentClick), document.addEventListener("pointerdown", this.onDocumentPointerDown, !0), document.addEventListener("keydown", this.onDocumentKeyDown, !0), this.host.addEventListener("focusout", this.onHostFocusOut);
79
+ }
80
+ hostDisconnected() {
81
+ document.removeEventListener("click", this.onDocumentClick), document.removeEventListener("pointerdown", this.onDocumentPointerDown, !0), document.removeEventListener("keydown", this.onDocumentKeyDown, !0), this.host.removeEventListener("focusout", this.onHostFocusOut);
82
+ }
83
+ }
84
+ export {
85
+ c as G
86
+ };
@@ -1,17 +1,17 @@
1
1
  import { InputWidgetAdapter as m, formContext as y, inputContext as $ } from "@golemui/lit";
2
- import { LitElement as b, html as p, nothing as c } from "lit";
2
+ import { LitElement as g, html as u, nothing as p } from "lit";
3
3
  import { repeat as f } from "lit-html/directives/repeat.js";
4
- import { property as s, customElement as g } from "lit/decorators.js";
5
- import { G as C, b as D, c as _ } from "./templates-Dk1jxLwS.js";
6
- import { u as F, i as O } from "./one-of-C0ur6b_n.js";
7
- import { consume as w, provide as E } from "@lit/context";
4
+ import { property as s, customElement as b } from "lit/decorators.js";
5
+ import { G as C, b as D, c as _ } from "./templates-Dmr34nwp.js";
6
+ import { u as F, i as q } from "./one-of-C0ur6b_n.js";
7
+ import { consume as O, provide as w } from "@lit/context";
8
8
  import "rxjs";
9
- var S = Object.defineProperty, q = Object.getOwnPropertyDescriptor, o = (t, i, d, a) => {
10
- for (var e = a > 1 ? void 0 : a ? q(i, d) : i, l = t.length - 1, n; l >= 0; l--)
11
- (n = t[l]) && (e = (a ? n(i, d, e) : n(e)) || e);
12
- return a && e && S(i, d, e), e;
9
+ var E = Object.defineProperty, S = Object.getOwnPropertyDescriptor, o = (e, i, d, a) => {
10
+ for (var t = a > 1 ? void 0 : a ? S(i, d) : i, l = e.length - 1, n; l >= 0; l--)
11
+ (n = e[l]) && (t = (a ? n(i, d, t) : n(t)) || t);
12
+ return a && t && E(i, d, t), t;
13
13
  };
14
- let r = class extends b {
14
+ let r = class extends g {
15
15
  constructor() {
16
16
  super(...arguments), this.uid = void 0, this.label = void 0, this.localeId = "en", this.errors = [], this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.value = void 0, this.hint = void 0, this.options = [], this.labelField = void 0, this.valueField = void 0, this.direction = "column", this.optionsLoading = !1, this.hasMatchingValue = !1, this.ariaController = new C(this, {
17
17
  getTargets: () => this.querySelectorAll(`input[name="${this.uid}"]`),
@@ -23,7 +23,8 @@ let r = class extends b {
23
23
  touched: this.touched,
24
24
  // Radiogroup inputs can't be readonly
25
25
  readonly: !1,
26
- disabled: !1
26
+ disabled: !1,
27
+ required: this.required
27
28
  }
28
29
  })
29
30
  });
@@ -36,7 +37,7 @@ let r = class extends b {
36
37
  }
37
38
  render() {
38
39
  super.render();
39
- const t = {
40
+ const e = {
40
41
  uid: this.uid,
41
42
  label: this.label,
42
43
  errors: this.errors,
@@ -57,23 +58,23 @@ let r = class extends b {
57
58
  });
58
59
  const i = this.value;
59
60
  this.hasMatchingValue = this.options?.length ? this.options.find(({ value: a }) => a === i) !== void 0 : !1;
60
- const d = this.optionsLoading ? p`<span>Loading...</span>` : p`
61
+ const d = this.optionsLoading ? u`<span>Loading...</span>` : u`
61
62
  ${f(
62
63
  this.options || [],
63
64
  (a) => a?.value,
64
- (a, e) => {
65
- const l = this.hasMatchingValue && a.value === t.value, n = !this.hasMatchingValue && e === 0, v = l || n;
66
- return p`<label for=${`${this.uid}_${e}`}>
65
+ (a, t) => {
66
+ const l = this.hasMatchingValue && a.value === e.value, n = !this.hasMatchingValue && t === 0, v = l || n;
67
+ return u`<label for=${`${this.uid}_${t}`}>
67
68
  <input
68
69
  type="radio"
69
70
  tabindex=${v ? "0" : "-1"}
70
- id=${`${this.uid}_${e}`}
71
- data-cy=${`${this.uid}_radiogroup_${e}`}
71
+ id=${`${this.uid}_${t}`}
72
+ data-cy=${`${this.uid}_radiogroup_${t}`}
72
73
  name=${this.uid}
73
74
  value=${a.value}
74
75
  ?checked=${l}
75
- ?required=${t.required}
76
- ?disabled=${t.disabled || t.readonly}
76
+ ?required=${e.required}
77
+ ?disabled=${e.disabled || e.readonly}
77
78
  @change=${this.valueChanged}
78
79
  @blur=${this.onBlur}
79
80
  />
@@ -82,28 +83,31 @@ let r = class extends b {
82
83
  }
83
84
  )}
84
85
  `;
85
- return p`
86
- ${D(this.uid, t, !1, void 0, !1)}
86
+ return u`
87
+ ${D(this.uid, e, !1, void 0, !1)}
87
88
 
88
89
  <div
89
90
  class="gui-widget${this.direction === "row" ? " gui-widget--horizontal" : ""}"
90
91
  role="radiogroup"
91
92
  id=${this.uid}
92
- aria-labelledby=${t.label ? `${this.uid}_label` : c}
93
- aria-describedby=${t.hint ? `${this.uid}_hint` : c}
93
+ aria-labelledby=${e.label ? `${this.uid}_label` : p}
94
+ aria-describedby=${e.hint ? `${this.uid}_hint` : p}
95
+ aria-required=${this.required ? "true" : p}
96
+ aria-invalid=${this.touched && this.errors?.length ? "true" : p}
97
+ aria-errormessage=${this.touched && this.errors?.length ? `${this.uid}_errors` : p}
94
98
  >
95
99
  ${d}
96
100
  </div>
97
101
 
98
- ${_(this.uid, t)}
102
+ ${_(this.uid, e)}
99
103
  `;
100
104
  }
101
- valueChanged(t) {
102
- if (t.stopPropagation(), !this.readOnly) {
103
- const i = t.target;
105
+ valueChanged(e) {
106
+ if (e.stopPropagation(), !this.readOnly) {
107
+ const i = e.target;
104
108
  this.dispatchEvent(
105
109
  new CustomEvent("change", {
106
- detail: { value: O(i.value, this.options) },
110
+ detail: { value: q(i.value, this.options) },
107
111
  bubbles: !0,
108
112
  composed: !0
109
113
  })
@@ -162,23 +166,23 @@ o([
162
166
  s({ type: String })
163
167
  ], r.prototype, "direction", 2);
164
168
  r = o([
165
- g("gui-radiogroup")
169
+ b("gui-radiogroup")
166
170
  ], r);
167
171
  typeof customElements < "u" && !customElements.get("gui-radiogroup") && customElements.define("gui-radiogroup", r);
168
- var x = Object.defineProperty, P = Object.getOwnPropertyDescriptor, h = (t, i, d, a) => {
169
- for (var e = a > 1 ? void 0 : a ? P(i, d) : i, l = t.length - 1, n; l >= 0; l--)
170
- (n = t[l]) && (e = (a ? n(i, d, e) : n(e)) || e);
171
- return a && e && x(i, d, e), e;
172
+ var x = Object.defineProperty, P = Object.getOwnPropertyDescriptor, c = (e, i, d, a) => {
173
+ for (var t = a > 1 ? void 0 : a ? P(i, d) : i, l = e.length - 1, n; l >= 0; l--)
174
+ (n = e[l]) && (t = (a ? n(i, d, t) : n(t)) || t);
175
+ return a && t && x(i, d, t), t;
172
176
  };
173
- let u = class extends b {
177
+ let h = class extends g {
174
178
  constructor() {
175
179
  super(...arguments), this.adapter = new m(), this.subscriptions = [];
176
180
  }
177
181
  createRenderRoot() {
178
182
  return this;
179
183
  }
180
- updated(t) {
181
- super.updated(t);
184
+ updated(e) {
185
+ super.updated(e);
182
186
  const i = this.adapter.templateData.size;
183
187
  i ? this.style.flex = String(i) : this.style.removeProperty("flex");
184
188
  }
@@ -188,7 +192,7 @@ let u = class extends b {
188
192
  );
189
193
  }
190
194
  render() {
191
- return super.render(), p`
195
+ return super.render(), u`
192
196
  <gui-radiogroup
193
197
  .uid=${this.widget.uid}
194
198
  .label=${this.adapter.templateData.label}
@@ -208,24 +212,24 @@ let u = class extends b {
208
212
  ></gui-radiogroup>
209
213
  `;
210
214
  }
211
- valueChanged(t) {
212
- const i = t.detail.value;
215
+ valueChanged(e) {
216
+ const i = e.detail.value;
213
217
  this.adapter.valueChanged(i);
214
218
  }
215
219
  disconnectedCallback() {
216
- super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
220
+ super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
217
221
  }
218
222
  };
219
- h([
220
- w({ context: y }),
223
+ c([
224
+ O({ context: y }),
221
225
  s({ attribute: !1 })
222
- ], u.prototype, "formContext", 2);
223
- h([
224
- E({ context: $ })
225
- ], u.prototype, "adapter", 2);
226
- u = h([
227
- g("gui-radiogroup-input")
228
- ], u);
226
+ ], h.prototype, "formContext", 2);
227
+ c([
228
+ w({ context: $ })
229
+ ], h.prototype, "adapter", 2);
230
+ h = c([
231
+ b("gui-radiogroup-input")
232
+ ], h);
229
233
  export {
230
- u as RadiogroupElement
234
+ h as RadiogroupElement
231
235
  };