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

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 +34 -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 +2933 -2336
  20. package/index.umd.cjs +798 -405
  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 +9 -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,15 +1,15 @@
1
- import { InputWidgetAdapter as d, formContext as p, inputContext as m } from "@golemui/lit";
2
- import "./time-picker-bFJ63ky8.js";
3
- import { consume as u, provide as c } from "@lit/context";
4
- import { LitElement as h, html as g } from "lit";
5
- import { property as $, customElement as b } from "lit/decorators.js";
1
+ import { InputWidgetAdapter as d, formContext as u, inputContext as m } from "@golemui/lit";
2
+ import "./time-picker-g337F8d0.js";
3
+ import { consume as p, provide as h } from "@lit/context";
4
+ import { LitElement as c, html as g } from "lit";
5
+ import { property as b, customElement as $ } from "lit/decorators.js";
6
6
  import "rxjs";
7
- var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, l = (e, t, r, a) => {
8
- for (var i = a > 1 ? void 0 : a ? v(t, r) : t, n = e.length - 1, o; n >= 0; n--)
9
- (o = e[n]) && (i = (a ? o(t, r, i) : o(i)) || i);
10
- return a && i && f(t, r, i), i;
7
+ var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, l = (e, t, s, a) => {
8
+ for (var i = a > 1 ? void 0 : a ? v(t, s) : t, o = e.length - 1, n; o >= 0; o--)
9
+ (n = e[o]) && (i = (a ? n(t, s, i) : n(i)) || i);
10
+ return a && i && f(t, s, i), i;
11
11
  };
12
- let s = class extends h {
12
+ let r = class extends c {
13
13
  constructor() {
14
14
  super(...arguments), this.adapter = new d(), this.subscriptions = [];
15
15
  }
@@ -42,6 +42,10 @@ let s = class extends h {
42
42
  .value=${e.value}
43
43
  .icon=${e.icon}
44
44
  .localeId=${e.lang}
45
+ .toggleAriaLabel=${e.toggleAriaLabel}
46
+ .hourAriaLabel=${e.hourAriaLabel}
47
+ .minuteAriaLabel=${e.minuteAriaLabel}
48
+ .dayPeriodAriaLabel=${e.dayPeriodAriaLabel}
45
49
  .hourFormat=${e.hourFormat}
46
50
  .minuteStep=${e.minuteStep}
47
51
  .minTime=${e.minTime}
@@ -71,15 +75,15 @@ let s = class extends h {
71
75
  }
72
76
  };
73
77
  l([
74
- u({ context: p }),
75
- $({ attribute: !1 })
76
- ], s.prototype, "formContext", 2);
78
+ p({ context: u }),
79
+ b({ attribute: !1 })
80
+ ], r.prototype, "formContext", 2);
77
81
  l([
78
- c({ context: m })
79
- ], s.prototype, "adapter", 2);
80
- s = l([
81
- b("gui-time-picker-input")
82
- ], s);
82
+ h({ context: m })
83
+ ], r.prototype, "adapter", 2);
84
+ r = l([
85
+ $("gui-time-picker-input")
86
+ ], r);
83
87
  export {
84
- s as TimePickerElement
88
+ r as TimePickerElement
85
89
  };
@@ -1,19 +1,19 @@
1
- import { InputWidgetAdapter as l, formContext as m, inputContext as n } from "@golemui/lit";
2
- import { a as u } from "./templates-Dk1jxLwS.js";
3
- import "./time-input-BOhlBGJZ.js";
4
- import { consume as h, provide as c } from "@lit/context";
5
- import { LitElement as g, html as $ } from "lit";
6
- import { property as D, customElement as f } from "lit/decorators.js";
1
+ import { InputWidgetAdapter as o, formContext as m, inputContext as n } from "@golemui/lit";
2
+ import { a as h } from "./templates-Dmr34nwp.js";
3
+ import "./time-input-5dkSm8UW.js";
4
+ import { consume as u, provide as c } from "@lit/context";
5
+ import { LitElement as b, html as $ } from "lit";
6
+ import { property as D, customElement as g } from "lit/decorators.js";
7
7
  import "rxjs";
8
- import { classMap as b } from "lit/directives/class-map.js";
9
- var v = Object.defineProperty, x = Object.getOwnPropertyDescriptor, d = (t, e, s, i) => {
10
- for (var a = i > 1 ? void 0 : i ? x(e, s) : e, p = t.length - 1, o; p >= 0; p--)
11
- (o = t[p]) && (a = (i ? o(e, s, a) : o(a)) || a);
8
+ import { classMap as f } from "lit/directives/class-map.js";
9
+ var v = Object.defineProperty, x = Object.getOwnPropertyDescriptor, l = (t, e, s, i) => {
10
+ for (var a = i > 1 ? void 0 : i ? x(e, s) : e, p = t.length - 1, d; p >= 0; p--)
11
+ (d = t[p]) && (a = (i ? d(e, s, a) : d(a)) || a);
12
12
  return i && a && v(e, s, a), a;
13
13
  };
14
- let r = class extends g {
14
+ let r = class extends b {
15
15
  constructor() {
16
- super(...arguments), this.adapter = new l(), this.subscriptions = [];
16
+ super(...arguments), this.adapter = new o(), this.subscriptions = [];
17
17
  }
18
18
  createRenderRoot() {
19
19
  return this;
@@ -30,10 +30,10 @@ let r = class extends g {
30
30
  }
31
31
  render() {
32
32
  super.render();
33
- const t = u("time", this.adapter.templateData);
33
+ const t = h("time", this.adapter.templateData);
34
34
  return $`
35
35
  <gui-time
36
- class=${b(t.widgetClasses)}
36
+ class=${f(t.widgetClasses)}
37
37
  .uid=${this.widget.uid}
38
38
  .label=${this.adapter.templateData.label}
39
39
  .hint=${this.adapter.templateData.hint}
@@ -45,6 +45,9 @@ let r = class extends g {
45
45
  .value=${this.adapter.templateData.value}
46
46
  .icon=${this.adapter.templateData.icon}
47
47
  .localeId=${this.adapter.templateData.lang}
48
+ .hourAriaLabel=${this.adapter.templateData.hourAriaLabel}
49
+ .minuteAriaLabel=${this.adapter.templateData.minuteAriaLabel}
50
+ .dayPeriodAriaLabel=${this.adapter.templateData.dayPeriodAriaLabel}
48
51
  .hourFormat=${this.adapter.templateData.hourFormat}
49
52
  .minuteStep=${this.adapter.templateData.minuteStep}
50
53
  .minTime=${this.adapter.templateData.minTime}
@@ -67,15 +70,15 @@ let r = class extends g {
67
70
  super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
68
71
  }
69
72
  };
70
- d([
71
- h({ context: m }),
73
+ l([
74
+ u({ context: m }),
72
75
  D({ attribute: !1 })
73
76
  ], r.prototype, "formContext", 2);
74
- d([
77
+ l([
75
78
  c({ context: n })
76
79
  ], r.prototype, "adapter", 2);
77
- r = d([
78
- f("gui-time-input")
80
+ r = l([
81
+ g("gui-time-input")
79
82
  ], r);
80
83
  export {
81
84
  r as TimeElement
@@ -1,18 +1,18 @@
1
1
  import { InputWidgetAdapter as b, formContext as m, inputContext as y } from "@golemui/lit";
2
- import { G as v, c as f } from "./templates-Dk1jxLwS.js";
3
- import { LitElement as h, nothing as $, html as g } from "lit";
4
- import { property as r, customElement as c } from "lit/decorators.js";
5
- import { consume as C, provide as _ } from "@lit/context";
2
+ import { G as v, r as f, c as $ } from "./templates-Dmr34nwp.js";
3
+ import { LitElement as h, nothing as C, html as g } from "lit";
4
+ import { property as a, customElement as c } from "lit/decorators.js";
5
+ import { consume as _, provide as D } from "@lit/context";
6
6
  import "rxjs";
7
- var D = Object.defineProperty, P = Object.getOwnPropertyDescriptor, s = (t, e, l, o) => {
8
- for (var i = o > 1 ? void 0 : o ? P(e, l) : e, d = t.length - 1, n; d >= 0; d--)
7
+ var P = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (t, e, l, o) => {
8
+ for (var i = o > 1 ? void 0 : o ? w(e, l) : e, d = t.length - 1, n; d >= 0; d--)
9
9
  (n = t[d]) && (i = (o ? n(e, l, i) : n(i)) || i);
10
- return o && i && D(e, l, i), i;
10
+ return o && i && P(e, l, i), i;
11
11
  };
12
- let a = class extends h {
12
+ let r = class extends h {
13
13
  constructor() {
14
14
  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.togglePosition = "left", this.ariaController = new v(this, {
15
- getTargets: () => this.querySelectorAll('span[role="presentation"]'),
15
+ getTargets: () => this.querySelectorAll(`input[id="${this.uid}"]`),
16
16
  getState: () => ({
17
17
  uid: this.uid,
18
18
  templateData: {
@@ -21,7 +21,8 @@ let a = class extends h {
21
21
  touched: this.touched,
22
22
  // Checkboxes can't have aria-readonly
23
23
  readonly: !1,
24
- disabled: !1
24
+ disabled: !1,
25
+ required: this.required
25
26
  }
26
27
  })
27
28
  });
@@ -56,7 +57,7 @@ let a = class extends h {
56
57
  <div class="gui-widget gui-widget--horizontal gui-toggle--switch">
57
58
  <input
58
59
  type="checkbox"
59
- tabindex="0"
60
+ role="switch"
60
61
  id=${this.uid}
61
62
  data-cy=${`${this.uid}_toggle`}
62
63
  ?checked=${t.value}
@@ -70,12 +71,12 @@ let a = class extends h {
70
71
  </div>
71
72
 
72
73
  <span class="gui-label__container">
73
- ${t.label + (t.required ? " *" : "")}
74
+ ${t.label}${f(t.required)}
74
75
  </span>
75
76
  </label>
76
77
 
77
78
  <div class="gui-widget-hint" id=${`${t.uid}_hint`}>
78
- ${t.hint ?? $} ${f(this.uid, t)}
79
+ ${t.hint ?? C} ${$(this.uid, t)}
79
80
  </div>
80
81
  `;
81
82
  }
@@ -101,46 +102,46 @@ let a = class extends h {
101
102
  }
102
103
  };
103
104
  s([
104
- r({ type: String })
105
- ], a.prototype, "uid", 2);
105
+ a({ type: String })
106
+ ], r.prototype, "uid", 2);
106
107
  s([
107
- r({ type: String })
108
- ], a.prototype, "label", 2);
108
+ a({ type: String })
109
+ ], r.prototype, "label", 2);
109
110
  s([
110
- r({ type: String, attribute: "locale-id" })
111
- ], a.prototype, "localeId", 2);
111
+ a({ type: String, attribute: "locale-id" })
112
+ ], r.prototype, "localeId", 2);
112
113
  s([
113
- r({ type: Array })
114
- ], a.prototype, "errors", 2);
114
+ a({ type: Array })
115
+ ], r.prototype, "errors", 2);
115
116
  s([
116
- r({ type: Boolean })
117
- ], a.prototype, "touched", 2);
117
+ a({ type: Boolean })
118
+ ], r.prototype, "touched", 2);
118
119
  s([
119
- r({ type: Boolean })
120
- ], a.prototype, "required", 2);
120
+ a({ type: Boolean })
121
+ ], r.prototype, "required", 2);
121
122
  s([
122
- r({ type: Boolean })
123
- ], a.prototype, "disabled", 2);
123
+ a({ type: Boolean })
124
+ ], r.prototype, "disabled", 2);
124
125
  s([
125
- r({ type: Boolean, attribute: "readonly" })
126
- ], a.prototype, "readOnly", 2);
126
+ a({ type: Boolean, attribute: "readonly" })
127
+ ], r.prototype, "readOnly", 2);
127
128
  s([
128
- r({ type: String })
129
- ], a.prototype, "value", 2);
129
+ a({ type: String })
130
+ ], r.prototype, "value", 2);
130
131
  s([
131
- r({ type: String })
132
- ], a.prototype, "hint", 2);
132
+ a({ type: String })
133
+ ], r.prototype, "hint", 2);
133
134
  s([
134
- r({ type: String })
135
- ], a.prototype, "togglePosition", 2);
136
- a = s([
135
+ a({ type: String })
136
+ ], r.prototype, "togglePosition", 2);
137
+ r = s([
137
138
  c("gui-toggle")
138
- ], a);
139
- typeof customElements < "u" && !customElements.get("gui-toggle") && customElements.define("gui-toggle", a);
140
- var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, p = (t, e, l, o) => {
139
+ ], r);
140
+ typeof customElements < "u" && !customElements.get("gui-toggle") && customElements.define("gui-toggle", r);
141
+ var q = Object.defineProperty, x = Object.getOwnPropertyDescriptor, p = (t, e, l, o) => {
141
142
  for (var i = o > 1 ? void 0 : o ? x(e, l) : e, d = t.length - 1, n; d >= 0; d--)
142
143
  (n = t[d]) && (i = (o ? n(e, l, i) : n(i)) || i);
143
- return o && i && w(e, l, i), i;
144
+ return o && i && q(e, l, i), i;
144
145
  };
145
146
  let u = class extends h {
146
147
  constructor() {
@@ -186,11 +187,11 @@ let u = class extends h {
186
187
  }
187
188
  };
188
189
  p([
189
- C({ context: m }),
190
- r({ attribute: !1 })
190
+ _({ context: m }),
191
+ a({ attribute: !1 })
191
192
  ], u.prototype, "formContext", 2);
192
193
  p([
193
- _({ context: y })
194
+ D({ context: y })
194
195
  ], u.prototype, "adapter", 2);
195
196
  u = p([
196
197
  c("gui-toggle-input")
@@ -1,312 +0,0 @@
1
- import { InputWidgetAdapter as b, formContext as y, inputContext as v } from "@golemui/lit";
2
- import { LitElement as c, html as l, nothing as $ } from "lit";
3
- import { property as i, query as m, customElement as g } from "lit/decorators.js";
4
- import { classMap as M } from "lit/directives/class-map.js";
5
- import "./date-input-cJDkNnVw.js";
6
- import "./calendar-BuJgwvZx.js";
7
- import { G as f } from "./popup.controller-eUDxE6jD.js";
8
- import { d as D } from "./date-Bj9mI3GU.js";
9
- import { a as x, b as w, c as _ } from "./templates-Dk1jxLwS.js";
10
- import { consume as I, provide as C } from "@lit/context";
11
- import "rxjs";
12
- var E = Object.defineProperty, R = Object.getOwnPropertyDescriptor, a = (t, r, n, s) => {
13
- for (var o = s > 1 ? void 0 : s ? R(r, n) : r, d = t.length - 1, p; d >= 0; d--)
14
- (p = t[d]) && (o = (s ? p(r, n, o) : p(o)) || o);
15
- return s && o && E(r, n, o), o;
16
- };
17
- let e = class extends c {
18
- constructor() {
19
- super(...arguments), this.uid = void 0, this.label = void 0, this.hint = void 0, this.icon = "", this.errors = [], this.showErrors = !0, this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.localeId = void 0, this.value = void 0, this.prevMonthIcon = "", this.nextMonthIcon = "", this.prevMonthAriaLabel = void 0, this.nextMonthAriaLabel = void 0, this.dayFormat = void 0, this.weekdayFormat = void 0, this.monthFormat = void 0, this.minDate = void 0, this.maxDate = void 0, this.disabledRanges = void 0, this.numberOfMonths = void 0, this.invalidDateMessage = void 0, this.minDateMessage = void 0, this.maxDateMessage = void 0, this.disabledDateRangeMessage = void 0, this._popup = new f(this, {
20
- getInteriorElements: () => [this._dateRef, this._calendarRef],
21
- focusRestoreSelector: "gui-date input",
22
- isDisabled: () => !!this.disabled,
23
- clickIntent: (t) => t.closest(".gui-calendar__day-button") ? "ignore" : t.closest(".gui-date-input__part") || t.closest("gui-calendar") ? "open" : "toggle",
24
- keyToggleMode: "toggle"
25
- });
26
- }
27
- createRenderRoot() {
28
- return this;
29
- }
30
- render() {
31
- const t = x("datePicker", { icon: this.icon }), r = this._popup.open ? l`<gui-calendar
32
- id="calendar-input"
33
- .uid=${this.uid}
34
- .hint=${this.hint}
35
- ?touched=${this.touched}
36
- ?required=${this.required}
37
- ?disabled=${this.disabled}
38
- ?readonly=${this.readOnly}
39
- .value=${this.value}
40
- .prevMonthIcon=${this.prevMonthIcon}
41
- .nextMonthIcon=${this.nextMonthIcon}
42
- .prevMonthAriaLabel=${this.prevMonthAriaLabel}
43
- .nextMonthAriaLabel=${this.nextMonthAriaLabel}
44
- .dayFormat=${this.dayFormat}
45
- .weekdayFormat=${this.weekdayFormat}
46
- .monthFormat=${this.monthFormat}
47
- .minDate=${this.minDate}
48
- .maxDate=${this.maxDate}
49
- .disabledRanges=${this.disabledRanges}
50
- .numberOfMonths=${this.numberOfMonths}
51
- .localeId=${this.localeId}
52
- @blur=${this.onCalendarBlur}
53
- @change=${this.onCalendarChange}
54
- ></gui-calendar>` : $;
55
- return l`
56
- ${w(this.uid ?? "", {
57
- label: this.label,
58
- hint: this.hint,
59
- required: this.required
60
- })}
61
-
62
- <div
63
- role="button"
64
- tabindex="-1"
65
- class="gui-widget"
66
- aria-expanded=${this._popup.open}
67
- @keyup=${this._popup.onAnchorKeyUp}
68
- @keydown=${this._popup.onAnchorKeyDown}
69
- @click=${this._popup.onAnchorClick}
70
- >
71
- <gui-date
72
- id="date-input"
73
- class=${M(t.widgetClasses)}
74
- .uid=${this.uid}
75
- .hint=${this.hint}
76
- .showErrors=${!1}
77
- .errors=${this.errors}
78
- ?touched=${this.touched}
79
- ?required=${this.required}
80
- ?disabled=${this.disabled}
81
- ?readonly=${this.readOnly}
82
- .value=${this.value}
83
- .icon=${this.icon}
84
- .localeId=${this.localeId}
85
- .invalidDateMessage=${this.invalidDateMessage}
86
- @blur=${this.onDateBlur}
87
- @focus=${this._popup.show}
88
- @change=${this.onDateChange}
89
- ></gui-date>
90
- <span class="gui-date-picker__arrow"
91
- ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256">
92
- <path
93
- d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"
94
- ></path></svg
95
- ></span>
96
-
97
- ${r}
98
- </div>
99
-
100
- ${this.showErrors ? _(this.uid ?? "", { errors: this.errors, touched: this.touched }) : ""}
101
- `;
102
- }
103
- onDateChange(t) {
104
- t.stopPropagation(), this.commitValue(t.detail.value);
105
- }
106
- onDateBlur() {
107
- this.dispatchEvent(new CustomEvent("blur"));
108
- }
109
- onCalendarChange(t) {
110
- t.stopPropagation(), this.commitValue(t.detail.value), this._popup.close();
111
- }
112
- commitValue(t) {
113
- this.value = t ?? void 0;
114
- const r = this.validateBounds(this.value);
115
- this.dispatchEvent(
116
- new CustomEvent("change", {
117
- detail: { value: t ?? null },
118
- bubbles: !0,
119
- composed: !0
120
- })
121
- ), r && this.dispatchEvent(
122
- new CustomEvent("inputError", {
123
- detail: { message: r },
124
- bubbles: !0,
125
- composed: !0
126
- })
127
- );
128
- }
129
- validateBounds(t) {
130
- return t ? D(t, this.minDate, this.maxDate, this.disabledRanges, {
131
- minDateMessage: this.minDateMessage,
132
- maxDateMessage: this.maxDateMessage,
133
- disabledDateRangeMessage: this.disabledDateRangeMessage
134
- }) : null;
135
- }
136
- onCalendarBlur() {
137
- this._popup.close();
138
- }
139
- };
140
- a([
141
- i({ type: String })
142
- ], e.prototype, "uid", 2);
143
- a([
144
- i({ type: String })
145
- ], e.prototype, "label", 2);
146
- a([
147
- i({ type: String })
148
- ], e.prototype, "hint", 2);
149
- a([
150
- i({ type: String })
151
- ], e.prototype, "icon", 2);
152
- a([
153
- i({ type: Array })
154
- ], e.prototype, "errors", 2);
155
- a([
156
- i({ type: Boolean })
157
- ], e.prototype, "showErrors", 2);
158
- a([
159
- i({ type: Boolean })
160
- ], e.prototype, "touched", 2);
161
- a([
162
- i({ type: Boolean })
163
- ], e.prototype, "required", 2);
164
- a([
165
- i({ type: Boolean })
166
- ], e.prototype, "disabled", 2);
167
- a([
168
- i({ type: Boolean, attribute: "readonly" })
169
- ], e.prototype, "readOnly", 2);
170
- a([
171
- i({ type: String, attribute: "locale-id" })
172
- ], e.prototype, "localeId", 2);
173
- a([
174
- i({ type: String })
175
- ], e.prototype, "value", 2);
176
- a([
177
- i({ type: String, attribute: "prev-month-icon" })
178
- ], e.prototype, "prevMonthIcon", 2);
179
- a([
180
- i({ type: String, attribute: "next-month-icon" })
181
- ], e.prototype, "nextMonthIcon", 2);
182
- a([
183
- i({ type: String, attribute: "prev-month-aria-label" })
184
- ], e.prototype, "prevMonthAriaLabel", 2);
185
- a([
186
- i({ type: String, attribute: "next-month-aria-label" })
187
- ], e.prototype, "nextMonthAriaLabel", 2);
188
- a([
189
- i({ type: String, attribute: "day-format" })
190
- ], e.prototype, "dayFormat", 2);
191
- a([
192
- i({ type: String, attribute: "weekday-format" })
193
- ], e.prototype, "weekdayFormat", 2);
194
- a([
195
- i({ type: String, attribute: "month-format" })
196
- ], e.prototype, "monthFormat", 2);
197
- a([
198
- i({ type: String, attribute: "min-date" })
199
- ], e.prototype, "minDate", 2);
200
- a([
201
- i({ type: String, attribute: "max-date" })
202
- ], e.prototype, "maxDate", 2);
203
- a([
204
- i({ type: Array, attribute: "disabled-ranges" })
205
- ], e.prototype, "disabledRanges", 2);
206
- a([
207
- i({ type: Number, attribute: "number-of-months" })
208
- ], e.prototype, "numberOfMonths", 2);
209
- a([
210
- i({ type: String, attribute: "invalid-date-message" })
211
- ], e.prototype, "invalidDateMessage", 2);
212
- a([
213
- i({ type: String, attribute: "min-date-message" })
214
- ], e.prototype, "minDateMessage", 2);
215
- a([
216
- i({ type: String, attribute: "max-date-message" })
217
- ], e.prototype, "maxDateMessage", 2);
218
- a([
219
- i({ type: String, attribute: "disabled-date-range-message" })
220
- ], e.prototype, "disabledDateRangeMessage", 2);
221
- a([
222
- m("#date-input")
223
- ], e.prototype, "_dateRef", 2);
224
- a([
225
- m("#calendar-input")
226
- ], e.prototype, "_calendarRef", 2);
227
- e = a([
228
- g("gui-date-picker")
229
- ], e);
230
- typeof customElements < "u" && !customElements.get("gui-date-picker") && customElements.define("gui-date-picker", e);
231
- var S = Object.defineProperty, k = Object.getOwnPropertyDescriptor, u = (t, r, n, s) => {
232
- for (var o = s > 1 ? void 0 : s ? k(r, n) : r, d = t.length - 1, p; d >= 0; d--)
233
- (p = t[d]) && (o = (s ? p(r, n, o) : p(o)) || o);
234
- return s && o && S(r, n, o), o;
235
- };
236
- let h = class extends c {
237
- constructor() {
238
- super(...arguments), this.adapter = new b(), this.subscriptions = [];
239
- }
240
- createRenderRoot() {
241
- return this;
242
- }
243
- updated(t) {
244
- super.updated(t);
245
- const r = this.adapter.templateData.size;
246
- r ? this.style.flex = String(r) : this.style.removeProperty("flex");
247
- }
248
- connectedCallback() {
249
- super.connectedCallback(), this.classList.add("gui-date-picker", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
250
- this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
251
- );
252
- }
253
- render() {
254
- super.render();
255
- const t = this.adapter.templateData;
256
- return l`
257
- <gui-date-picker
258
- .uid=${this.widget.uid}
259
- .label=${t.label}
260
- .hint=${t.hint}
261
- .errors=${t.errors}
262
- ?touched=${t.touched}
263
- ?required=${t.validator?.required}
264
- ?disabled=${t.disabled}
265
- ?readonly=${t.readonly}
266
- .value=${t.value}
267
- .icon=${t.icon}
268
- .localeId=${t.lang}
269
- .prevMonthIcon=${t.prevMonthIcon}
270
- .nextMonthIcon=${t.nextMonthIcon}
271
- .prevMonthAriaLabel=${t.prevMonthAriaLabel}
272
- .nextMonthAriaLabel=${t.nextMonthAriaLabel}
273
- .dayFormat=${t.dayFormat}
274
- .weekdayFormat=${t.weekdayFormat}
275
- .monthFormat=${t.monthFormat}
276
- .minDate=${t.minDate}
277
- .maxDate=${t.maxDate}
278
- .disabledRanges=${t.disabledRanges}
279
- .numberOfMonths=${t.numberOfMonths}
280
- .invalidDateMessage=${t.invalidDateMessage}
281
- .minDateMessage=${t.minDateMessage}
282
- .maxDateMessage=${t.maxDateMessage}
283
- .disabledDateRangeMessage=${t.disabledDateRangeMessage}
284
- @inputError=${this.onInputError}
285
- @blur=${() => this.adapter.onBlur()}
286
- @change=${this.valueChanged}
287
- ></gui-date-picker>
288
- `;
289
- }
290
- valueChanged(t) {
291
- this.adapter.injectValidationIssues(null), this.adapter.valueChanged(t.detail.value);
292
- }
293
- onInputError(t) {
294
- this.adapter.injectValidationIssues([t.detail.message]);
295
- }
296
- disconnectedCallback() {
297
- super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
298
- }
299
- };
300
- u([
301
- I({ context: y }),
302
- i({ attribute: !1 })
303
- ], h.prototype, "formContext", 2);
304
- u([
305
- C({ context: v })
306
- ], h.prototype, "adapter", 2);
307
- h = u([
308
- g("gui-date-picker-input")
309
- ], h);
310
- export {
311
- h as DatePickerElement
312
- };
@@ -1,71 +0,0 @@
1
- import "lit";
2
- import { G as r } from "./focus-leave.controller-2gV0pQd5.js";
3
- class p {
4
- constructor(s, n) {
5
- this._open = !1, this._restoringFocus = !1, this._suppressNextFocusOut = !1, this.show = () => {
6
- this.options.isDisabled() || this._restoringFocus || (this.options.beforeOpen?.(this), this.setOpen(!0));
7
- }, this.close = () => {
8
- this.setOpen(!1);
9
- }, this.toggle = () => {
10
- this.options.isDisabled() || (this.options.keyToggleMode === "toggle" ? this.setOpen(!this._open) : this._open ? this.close() : this.show());
11
- }, this.onAnchorClick = (t) => {
12
- if (this.options.isDisabled()) return;
13
- const e = t.target, o = this.options.clickIntent(e);
14
- if (o !== "ignore") {
15
- if (o === "open") {
16
- this.show();
17
- return;
18
- }
19
- this.toggle();
20
- }
21
- }, this.onAnchorKeyUp = (t) => {
22
- this.options.isDisabled() || t.target === t.currentTarget && (t.key === "Enter" || t.key === " ") && this.toggle();
23
- }, 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) => {
24
- if (!this._open) return;
25
- const e = t.composedPath();
26
- this.options.getInteriorElements().some((i) => !!i && e.includes(i)) || this.close();
27
- }, this.onHostFocusOut = (t) => {
28
- if (this._suppressNextFocusOut) {
29
- this._suppressNextFocusOut = !1;
30
- return;
31
- }
32
- this._open && this.focusLeave.handleFocusOut(t);
33
- }, this.host = s, this.options = n, this.focusLeave = new r(s, {
34
- onLeave: () => this.close()
35
- }), s.addController(this);
36
- }
37
- get open() {
38
- return this._open;
39
- }
40
- /**
41
- * Swallows exactly the next focusout pass — even one that arrives while
42
- * the popup is closed — then re-arms normal behavior. Used around
43
- * operations that transiently move focus (pills dropdown coordination).
44
- */
45
- suppressNextFocusOut() {
46
- this._suppressNextFocusOut = !0;
47
- }
48
- setOpen(s) {
49
- this._open !== s && (this._open = s, this.host.requestUpdate(), this.options.onOpenChanged?.(s));
50
- }
51
- /**
52
- * Focuses the `focusRestoreSelector` element, arming the restoring-focus
53
- * flag (reset via setTimeout(0)) so the resulting focus event does not
54
- * re-open the popup through show().
55
- */
56
- restoreFocusToInput() {
57
- const s = this.host.querySelector(this.options.focusRestoreSelector);
58
- s && (this._restoringFocus = !0, s.focus(), setTimeout(() => {
59
- this._restoringFocus = !1;
60
- }));
61
- }
62
- hostConnected() {
63
- document.addEventListener("click", this.onDocumentClick), this.host.addEventListener("focusout", this.onHostFocusOut);
64
- }
65
- hostDisconnected() {
66
- document.removeEventListener("click", this.onDocumentClick), this.host.removeEventListener("focusout", this.onHostFocusOut);
67
- }
68
- }
69
- export {
70
- p as G
71
- };