@golemui/gui-lit 1.2.0 → 1.2.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 (91) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/{accordion.element-BIgxl5e9.js → accordion.element-C9GzfKrY.js} +29 -30
  3. package/alert.element-CHn49Yaf.js +55 -0
  4. package/button.element-C9fHivSw.js +59 -0
  5. package/{calendar.element-Cv3RBphf.js → calendar.element-XkojKTJk.js} +30 -31
  6. package/checkbox.element-DU_tVMXu.js +66 -0
  7. package/currency.element-BmAH5KS_.js +73 -0
  8. package/date-picker.element-Bg3rF95F.js +94 -0
  9. package/{date-time-calendar.element-DlbWZjoe.js → date-time-calendar.element-sywQCeQQ.js} +24 -24
  10. package/date-time-picker.element-HHpwjWTQ.js +107 -0
  11. package/{date-time.element-CLLxM2nV.js → date-time.element-ucETvSTC.js} +26 -26
  12. package/{date.element-B8ZHK9KJ.js → date.element-BEHGxRFF.js} +27 -27
  13. package/default-list-item-renderer-CuPJ9jUD.js +24 -0
  14. package/{dropdown.element-DMZ7oL5n.js → dropdown.element-DUqG_p1x.js} +85 -84
  15. package/{flex.element-DG4Uaj_X.js → flex.element-pwba7621.js} +27 -28
  16. package/{grid.element-DCZsh-3J.js → grid.element-C8K7_Qi3.js} +29 -30
  17. package/index.js +1316 -3883
  18. package/index.umd.cjs +117 -2132
  19. package/{list.element-ADtUK2na.js → list.element-ZtEMKE2x.js} +41 -40
  20. package/markdown-text.element-DDm36qD0.js +54 -0
  21. package/markdown.element-DWz3U9rG.js +84 -0
  22. package/number.element-VkG5wScD.js +71 -0
  23. package/package.json +6 -6
  24. package/password.element-C5vQHq5P.js +72 -0
  25. package/radiogroup.element-CKdO9HwO.js +69 -0
  26. package/{range-calendar.element-D5eb2f7p.js → range-calendar.element-BznGrej5.js} +23 -24
  27. package/{range-date-input.element-C35grlYo.js → range-date-input.element-BloTHRDl.js} +24 -24
  28. package/range-date-picker.element-DKhwFasW.js +98 -0
  29. package/{range-date-time-calendar.element-BV0J96Gu.js → range-date-time-calendar.element-CZCET-sb.js} +26 -26
  30. package/{range-date-time-input.element-CzgRbR9F.js → range-date-time-input.element-Dr2VrYhG.js} +24 -24
  31. package/range-date-time-picker.element-CYeIMWLp.js +109 -0
  32. package/{range-time-input.element-BOHLUO8z.js → range-time-input.element-7OZhPQqx.js} +23 -23
  33. package/range-time-picker.element-D0mRFZkK.js +96 -0
  34. package/renderer.element-DbsFoBba.js +48 -0
  35. package/{repeater.element-Da8YN1Vy.js → repeater.element-DGEbwvhY.js} +54 -65
  36. package/select.element-Bb_9jAVB.js +76 -0
  37. package/{tabs.element-CvcIA8P3.js → tabs.element-BYDNF_pm.js} +49 -50
  38. package/tags.element-BSN3i9Gx.js +73 -0
  39. package/textarea.element-Dl1ZEOqO.js +71 -0
  40. package/textinput.element-C5Vbbkxq.js +68 -0
  41. package/{time-picker.element-C3oR0EkQ.js → time-picker.element-Crmj9YDy.js} +26 -26
  42. package/{time.element-X286nthD.js → time.element-DfSeAZp4.js} +29 -29
  43. package/toggle.element-ORsprZ2M.js +66 -0
  44. package/alert.element-DPWq9-0F.js +0 -56
  45. package/button.element-CJay43iR.js +0 -132
  46. package/calendar-DleRbmvP.js +0 -267
  47. package/checkbox.element-CpmrzdH0.js +0 -200
  48. package/currency.element-Cezgzbbs.js +0 -276
  49. package/date-DBuYpvcO.js +0 -849
  50. package/date-input-B3yHsn-g.js +0 -204
  51. package/date-picker.element-ByZefznr.js +0 -357
  52. package/date-time-calendar-CB5cNoOX.js +0 -374
  53. package/date-time-input-DrY68YDX.js +0 -246
  54. package/date-time-picker.element-CYwmumfq.js +0 -440
  55. package/day-status-ljexnwEO.js +0 -554
  56. package/errors-Bs_vYN-_.js +0 -110
  57. package/focus-leave.controller-2gV0pQd5.js +0 -73
  58. package/list-D730tmGN.js +0 -297
  59. package/markdown-text-X-BRJT6K.js +0 -30
  60. package/markdown-text.element-B8TfVLIO.js +0 -55
  61. package/markdown.element-D5zcxAUS.js +0 -693
  62. package/number.element-DEY5tR_y.js +0 -291
  63. package/numeric-jmOOKz30.js +0 -12
  64. package/one-of-anKkm7mD.js +0 -50
  65. package/part-templates-VORbpgs2.js +0 -691
  66. package/password.element-C1aQh_iz.js +0 -240
  67. package/pill-ranges-DpvWwP-3.js +0 -48
  68. package/pills-BDMO2NiR.js +0 -348
  69. package/popup.controller-B33OvX_y.js +0 -86
  70. package/radiogroup.element-B2G-XyGx.js +0 -235
  71. package/range-calendar-D7sG24Kx.js +0 -466
  72. package/range-commit-8-MmYUyo.js +0 -14
  73. package/range-date-input-BChaoBC1.js +0 -311
  74. package/range-date-picker.element-Do5YsL5V.js +0 -434
  75. package/range-date-time-calendar-DulGK2EQ.js +0 -734
  76. package/range-date-time-input-8ggqckP7.js +0 -353
  77. package/range-date-time-picker.element-hi5KdopZ.js +0 -472
  78. package/range-selection-CU3hxLJE.js +0 -25
  79. package/range-time-input-D7GFdDeA.js +0 -348
  80. package/range-time-picker.element-DDNQMA_u.js +0 -470
  81. package/renderer.element-CNyMn2Lu.js +0 -49
  82. package/select.element-SDxBhGjz.js +0 -266
  83. package/tabs-DzSCq_98.js +0 -13
  84. package/tags.element-Bnhfevp3.js +0 -369
  85. package/templates-Df7abEkB.js +0 -92
  86. package/textarea.element-Dx7eYEnl.js +0 -239
  87. package/textinput.element-BnIoDRmY.js +0 -205
  88. package/time-input-Kk4EX6at.js +0 -201
  89. package/time-list-DLcq8BAp.js +0 -217
  90. package/time-picker-DLj1rhOf.js +0 -299
  91. package/toggle.element-Dokdat_o.js +0 -203
@@ -1,374 +0,0 @@
1
- import { LitElement as g, nothing as l, html as m } from "lit";
2
- import { property as r, state as c, customElement as y } from "lit/decorators.js";
3
- import { classMap as b } from "lit/directives/class-map.js";
4
- import "./time-picker-DLj1rhOf.js";
5
- import { G as v } from "./templates-Df7abEkB.js";
6
- import { G as D, a as _, r as M, b as T, c as S, d as f, e as C } from "./day-status-ljexnwEO.js";
7
- import { G as I } from "./focus-leave.controller-2gV0pQd5.js";
8
- import { p, h as O, j as x, t as u, k as $, g as L } from "./date-DBuYpvcO.js";
9
- import { y as w, p as A, z as G } from "./part-templates-VORbpgs2.js";
10
- var P = Object.defineProperty, k = Object.getOwnPropertyDescriptor, a = (e, t, s, o) => {
11
- for (var n = o > 1 ? void 0 : o ? k(t, s) : t, h = e.length - 1, d; h >= 0; h--)
12
- (d = e[h]) && (n = (o ? d(t, s, n) : d(n)) || n);
13
- return o && n && P(t, s, n), n;
14
- };
15
- let i = class extends g {
16
- constructor() {
17
- super(...arguments), this.uid = void 0, this.label = void 0, this.hint = void 0, this.localeId = void 0, this.errors = [], this.touched = void 0, this.required = !1, this.disabled = !1, this.readOnly = !1, this.prevMonthIcon = "", this.nextMonthIcon = "", this.prevMonthAriaLabel = "", this.nextMonthAriaLabel = "", this.selectYearAriaLabel = void 0, this.yearGridAriaLabel = void 0, this.dayFormat = "numeric", this.weekdayFormat = "narrow", this.monthFormat = "long", this.minDate = void 0, this.maxDate = void 0, this.disabledRanges = void 0, this.numberOfMonths = 1, this.value = void 0, this.hourFormat = void 0, this.minuteStep = void 0, this.minTime = void 0, this.maxTime = void 0, this.disabledTimeRanges = void 0, this.minTimeMessage = void 0, this.maxTimeMessage = void 0, this.disabledTimeRangeMessage = void 0, this.noAvailableTimesMessage = void 0, this.allowCustomTime = !1, this._selectedDate = void 0, this._selectedTime = void 0, this._timeGridOpen = !1, this._internalValueChange = !1, this._nav = new D(this, {
18
- getMinDate: () => this.minDate,
19
- getMaxDate: () => this.maxDate,
20
- getNumberOfMonths: () => this.numberOfMonths,
21
- getDisabledRanges: () => this.disabledRanges,
22
- onYearSelectorToggled: () => this._keyboard.onYearGridToggled()
23
- }), this.ariaController = new v(this, {
24
- getTargets: () => this.querySelectorAll(".gui-calendar-input"),
25
- getState: () => ({
26
- uid: this.uid,
27
- templateData: {
28
- hint: this.hint,
29
- errors: this.errors,
30
- readonly: this.readOnly,
31
- disabled: this.disabled,
32
- touched: this.touched,
33
- required: this.required
34
- }
35
- })
36
- }), this._keyboard = new _(this, {
37
- canGoPrev: () => this._nav.canGoPrev(),
38
- canGoNext: () => this._nav.canGoNext(),
39
- goPrev: () => this._nav.prevMonth(),
40
- goNext: () => this._nav.nextMonth(),
41
- onActivateDay: (e) => {
42
- const t = p(e);
43
- this.selectDate({
44
- date: t,
45
- dayLabel: x(this.localeId, t),
46
- isCurrentMonth: !0,
47
- isToday: O(t),
48
- isSelected: !1,
49
- isFocusable: !0,
50
- isDisabled: this.isDisabled(t)
51
- });
52
- },
53
- onSelectYear: (e) => this._nav.selectYear(e),
54
- onCloseYearGrid: () => this._nav.closeYearSelector(),
55
- isYearGridOpen: () => this._nav.yearSelectorOpen
56
- }), this._focusLeave = new I(this, {
57
- onLeave: () => {
58
- this.dispatchEvent(new CustomEvent("blur", { bubbles: !0, composed: !0 }));
59
- }
60
- });
61
- }
62
- /** The disabled time ranges in effect on the selected day. */
63
- get resolvedTimeRanges() {
64
- return this._selectedDate ? w(this.disabledTimeRanges, this._selectedDate) : [];
65
- }
66
- get timePicker() {
67
- return this.querySelector("gui-time-picker");
68
- }
69
- createRenderRoot() {
70
- return this;
71
- }
72
- connectedCallback() {
73
- super.connectedCallback(), this.classList.add("gui-field");
74
- }
75
- willUpdate(e) {
76
- if (e.has("value")) {
77
- if (this._internalValueChange) {
78
- this._internalValueChange = !1;
79
- return;
80
- }
81
- if (this.value) {
82
- const t = A(this.value);
83
- isNaN(t.getTime()) || (this._selectedDate = u(t), this._selectedTime = G(t), $(t, this._nav.currentDate, this.numberOfMonths ?? 1) || (this._nav.currentDate = t));
84
- } else this._selectedTime && (this._selectedDate = void 0, this._selectedTime = void 0);
85
- }
86
- }
87
- setValueInternal(e) {
88
- this._internalValueChange = !0, this.value = e;
89
- }
90
- emitChange(e, t = !1) {
91
- this.dispatchEvent(
92
- new CustomEvent("change", {
93
- detail: { value: e, commit: t },
94
- bubbles: !0,
95
- composed: !0
96
- })
97
- );
98
- }
99
- selectDate(e) {
100
- if (!e.isCurrentMonth || e.isDisabled || this.disabled || this.readOnly) return;
101
- const t = u(e.date);
102
- t !== this._selectedDate && (this._selectedDate = t, this._selectedTime = void 0, this.value && (this.setValueInternal(void 0), this.emitChange(null)));
103
- }
104
- commitTime(e, t = !1) {
105
- this._selectedDate && (this._selectedTime = e, this.setValueInternal(`${this._selectedDate}T${e}`), this.emitChange(this.value, t));
106
- }
107
- onTimePickerChange(e) {
108
- e.stopPropagation();
109
- const t = e.detail.value, s = e.detail.commit === !0;
110
- if (!t) {
111
- this._selectedTime = void 0, this.value && (this.setValueInternal(void 0), this.emitChange(null));
112
- return;
113
- }
114
- this.commitTime(t, s);
115
- }
116
- onListToggle(e) {
117
- e.stopPropagation();
118
- const { open: t } = e.detail;
119
- if (t && this.readOnly) {
120
- this.timePicker?.closeList();
121
- return;
122
- }
123
- this._timeGridOpen = t, t && (this._nav.yearSelectorOpen = !1);
124
- }
125
- /** Closes the embedded time picker before flipping the year grid. */
126
- toggleYearSelector() {
127
- this.timePicker?.closeList(), this._nav.toggleYearSelector();
128
- }
129
- render() {
130
- return M({
131
- uid: this.uid,
132
- label: this.label,
133
- hint: this.hint,
134
- errors: this.errors,
135
- touched: this.touched,
136
- required: this.required,
137
- disabled: this.disabled,
138
- numberOfMonths: this.numberOfMonths,
139
- localeId: this.localeId,
140
- currentDate: this._nav.currentDate,
141
- prevMonthIcon: this.prevMonthIcon,
142
- nextMonthIcon: this.nextMonthIcon,
143
- prevMonthAriaLabel: this.prevMonthAriaLabel,
144
- nextMonthAriaLabel: this.nextMonthAriaLabel,
145
- canGoPrev: this._nav.canGoPrev(),
146
- canGoNext: this._nav.canGoNext(),
147
- onPrevMonthClick: this._keyboard.onPrevMonthClick,
148
- onNextMonthClick: this._keyboard.onNextMonthClick,
149
- onFocusOut: this._focusLeave.onFocusOut,
150
- renderAboveCalendar: () => l,
151
- renderMonthPanel: (e) => T({
152
- currentDate: this._nav.currentDate,
153
- offset: e,
154
- localeId: this.localeId,
155
- monthFormat: this.monthFormat,
156
- yearSelectorOpen: this._nav.yearSelectorOpen,
157
- selectYearAriaLabel: this.selectYearAriaLabel,
158
- onToggleYearSelector: () => this.toggleYearSelector(),
159
- renderBelowHeader: (t) => this.renderBelowHeader(t),
160
- renderPanelBody: (t) => this.renderPanelBody(t)
161
- })
162
- });
163
- }
164
- /** The embedded time-picker row under the first panel's header. */
165
- renderBelowHeader(e) {
166
- return e !== 0 ? l : m`
167
- <div class="gui-calendar__time-input-row">
168
- <gui-time-picker
169
- class="gui-time-picker gui-field"
170
- .uid=${this.uid ? `${this.uid}-time` : void 0}
171
- .showErrors=${!1}
172
- ?required=${this.required}
173
- ?disabled=${this.disabled || !this._selectedDate}
174
- ?readonly=${this.readOnly}
175
- .allowCustomTime=${this.allowCustomTime}
176
- .value=${this._selectedTime}
177
- .localeId=${this.localeId}
178
- .hourFormat=${this.hourFormat}
179
- .minuteStep=${this.minuteStep}
180
- .minTime=${this.minTime}
181
- .maxTime=${this.maxTime}
182
- .disabledRanges=${this.resolvedTimeRanges}
183
- .columns=${4}
184
- .minTimeMessage=${this.minTimeMessage}
185
- .maxTimeMessage=${this.maxTimeMessage}
186
- .disabledRangeMessage=${this.disabledTimeRangeMessage}
187
- .noAvailableTimesMessage=${this.noAvailableTimesMessage}
188
- @change=${this.onTimePickerChange}
189
- @listtoggle=${this.onListToggle}
190
- ></gui-time-picker>
191
- </div>
192
- `;
193
- }
194
- renderPanelBody(e) {
195
- return this._timeGridOpen && !this._nav.yearSelectorOpen && e === 0 ? m`` : S({
196
- offset: e,
197
- yearSelectorOpen: this._nav.yearSelectorOpen,
198
- years: this._nav.yearList,
199
- currentYear: this._nav.currentDate.getFullYear(),
200
- onSelectYear: (t) => this._keyboard.selectYear(t),
201
- onYearKeydown: this._keyboard.handleYearKeydown,
202
- localeId: this.localeId,
203
- currentDate: this._nav.currentDate,
204
- yearGridAriaLabel: this.yearGridAriaLabel,
205
- getDays: (t) => this.getDaysInMonth(t),
206
- renderDay: (t) => this.renderDay(t)
207
- });
208
- }
209
- renderDay(e) {
210
- const t = {
211
- "gui-calendar__day-button": !0,
212
- today: e.isToday,
213
- selected: e.isSelected,
214
- disabled: e.isDisabled,
215
- "other-month": !e.isCurrentMonth
216
- };
217
- return m`
218
- <button
219
- type="button"
220
- role="gridcell"
221
- class=${b(t)}
222
- tabindex=${e.isFocusable ? 0 : -1}
223
- ?disabled=${!e.isCurrentMonth}
224
- aria-disabled=${e.isCurrentMonth && e.isDisabled ? "true" : l}
225
- aria-label=${L(this.localeId, e.date)}
226
- aria-current=${e.isToday ? "date" : l}
227
- data-date=${u(e.date)}
228
- @click=${() => this.selectDate(e)}
229
- @keydown=${(s) => this._keyboard.handleDayKeydown(s)}
230
- aria-selected=${e.isSelected}
231
- >
232
- ${e.dayLabel}
233
- </button>
234
- `;
235
- }
236
- getDaysInMonth(e) {
237
- const t = this._selectedDate;
238
- return f({
239
- currentDate: this._nav.currentDate,
240
- offset: e,
241
- localeId: this.localeId,
242
- numberOfMonths: this.numberOfMonths ?? 1,
243
- isDisabled: (s) => this.isDisabled(s),
244
- toDay: (s) => {
245
- const o = C(s.date, { selectedISO: t }).isSelected;
246
- return {
247
- date: s.date,
248
- dayLabel: s.dayLabel,
249
- isCurrentMonth: s.isCurrentMonth,
250
- isToday: s.isToday,
251
- isDisabled: s.isDisabled,
252
- isSelected: o,
253
- isFocusable: (o || s.isToday) && s.isCurrentMonth
254
- };
255
- },
256
- focusFallbackDates: [t ? p(t) : /* @__PURE__ */ new Date()]
257
- });
258
- }
259
- isDisabled(e) {
260
- return this._nav.isDisabled(e);
261
- }
262
- };
263
- a([
264
- r({ type: String })
265
- ], i.prototype, "uid", 2);
266
- a([
267
- r({ type: String })
268
- ], i.prototype, "label", 2);
269
- a([
270
- r({ type: String })
271
- ], i.prototype, "hint", 2);
272
- a([
273
- r({ type: String, attribute: "locale-id" })
274
- ], i.prototype, "localeId", 2);
275
- a([
276
- r({ type: Array })
277
- ], i.prototype, "errors", 2);
278
- a([
279
- r({ type: Boolean })
280
- ], i.prototype, "touched", 2);
281
- a([
282
- r({ type: Boolean })
283
- ], i.prototype, "required", 2);
284
- a([
285
- r({ type: Boolean })
286
- ], i.prototype, "disabled", 2);
287
- a([
288
- r({ type: Boolean, attribute: "readonly" })
289
- ], i.prototype, "readOnly", 2);
290
- a([
291
- r({ type: String, attribute: "prev-month-icon" })
292
- ], i.prototype, "prevMonthIcon", 2);
293
- a([
294
- r({ type: String, attribute: "next-month-icon" })
295
- ], i.prototype, "nextMonthIcon", 2);
296
- a([
297
- r({ type: String, attribute: "prev-month-aria-label" })
298
- ], i.prototype, "prevMonthAriaLabel", 2);
299
- a([
300
- r({ type: String, attribute: "next-month-aria-label" })
301
- ], i.prototype, "nextMonthAriaLabel", 2);
302
- a([
303
- r({ type: String, attribute: "select-year-aria-label" })
304
- ], i.prototype, "selectYearAriaLabel", 2);
305
- a([
306
- r({ type: String, attribute: "year-grid-aria-label" })
307
- ], i.prototype, "yearGridAriaLabel", 2);
308
- a([
309
- r({ type: String })
310
- ], i.prototype, "dayFormat", 2);
311
- a([
312
- r({ type: String })
313
- ], i.prototype, "weekdayFormat", 2);
314
- a([
315
- r({ type: String })
316
- ], i.prototype, "monthFormat", 2);
317
- a([
318
- r({ type: String })
319
- ], i.prototype, "minDate", 2);
320
- a([
321
- r({ type: String })
322
- ], i.prototype, "maxDate", 2);
323
- a([
324
- r({ type: Array })
325
- ], i.prototype, "disabledRanges", 2);
326
- a([
327
- r({ type: Number })
328
- ], i.prototype, "numberOfMonths", 2);
329
- a([
330
- r({ type: String })
331
- ], i.prototype, "value", 2);
332
- a([
333
- r({ type: String, attribute: "hour-format" })
334
- ], i.prototype, "hourFormat", 2);
335
- a([
336
- r({ type: Number, attribute: "minute-step" })
337
- ], i.prototype, "minuteStep", 2);
338
- a([
339
- r({ type: String, attribute: "min-time" })
340
- ], i.prototype, "minTime", 2);
341
- a([
342
- r({ type: String, attribute: "max-time" })
343
- ], i.prototype, "maxTime", 2);
344
- a([
345
- r({ type: Array, attribute: "disabled-time-ranges" })
346
- ], i.prototype, "disabledTimeRanges", 2);
347
- a([
348
- r({ type: String, attribute: "min-time-message" })
349
- ], i.prototype, "minTimeMessage", 2);
350
- a([
351
- r({ type: String, attribute: "max-time-message" })
352
- ], i.prototype, "maxTimeMessage", 2);
353
- a([
354
- r({ type: String, attribute: "disabled-time-range-message" })
355
- ], i.prototype, "disabledTimeRangeMessage", 2);
356
- a([
357
- r({ type: String, attribute: "no-available-times-message" })
358
- ], i.prototype, "noAvailableTimesMessage", 2);
359
- a([
360
- r({ type: Boolean, attribute: "allow-custom-time" })
361
- ], i.prototype, "allowCustomTime", 2);
362
- a([
363
- c()
364
- ], i.prototype, "_selectedDate", 2);
365
- a([
366
- c()
367
- ], i.prototype, "_selectedTime", 2);
368
- a([
369
- c()
370
- ], i.prototype, "_timeGridOpen", 2);
371
- i = a([
372
- y("gui-date-time-calendar")
373
- ], i);
374
- typeof customElements < "u" && !customElements.get("gui-date-time-calendar") && customElements.define("gui-date-time-calendar", i);
@@ -1,246 +0,0 @@
1
- import { LitElement as u, nothing as h, html as p } from "lit";
2
- import { property as i, customElement as m } from "lit/decorators.js";
3
- import { classMap as g } from "lit/directives/class-map.js";
4
- import { G as y, b as c, c as b } from "./templates-Df7abEkB.js";
5
- import { G as v, g as D, w as f, z as E, a as S, r as A, b as L, P as T } from "./part-templates-VORbpgs2.js";
6
- import { d as M } from "./date-DBuYpvcO.js";
7
- var x = Object.defineProperty, P = Object.getOwnPropertyDescriptor, e = (a, o, l, s) => {
8
- for (var r = s > 1 ? void 0 : s ? P(o, l) : o, n = a.length - 1, d; n >= 0; n--)
9
- (d = a[n]) && (r = (s ? d(o, l, r) : d(r)) || r);
10
- return s && r && x(o, l, r), r;
11
- };
12
- let t = class extends u {
13
- constructor() {
14
- super(...arguments), this.uid = void 0, this.label = void 0, this.localeId = void 0, this.errors = [], this.showErrors = !0, this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.icon = "", this.hint = void 0, this.dayAriaLabel = void 0, this.monthAriaLabel = void 0, this.yearAriaLabel = void 0, this.hourAriaLabel = void 0, this.minuteAriaLabel = void 0, this.dayPeriodAriaLabel = void 0, this.hourFormat = void 0, this.minuteStep = 1, this.invalidDateMessage = void 0, this.value = void 0, this.minDate = void 0, this.maxDate = void 0, this.minTime = void 0, this.maxTime = void 0, this.minDateMessage = void 0, this.maxDateMessage = void 0, this.minTimeMessage = void 0, this.maxTimeMessage = void 0, this.inputBlockClass = "gui-date-time-input", this.groups = ["default"], this._parts = new v(this, {
15
- blockClass: this.inputBlockClass,
16
- groups: this.groups,
17
- getDescriptor: (a) => this.getPartDescriptor(a),
18
- commitGroup: (a) => this.validateAndEmit(a),
19
- isReadonly: () => !!this.readOnly,
20
- isDisabled: () => !!this.disabled,
21
- onEmptyPartBlur: () => this.dispatchEvent(new CustomEvent("change", { detail: { value: null }, bubbles: !0 })),
22
- getHourFormat: () => this.localeData.effectiveHourFormat,
23
- getDayPeriodLabels: () => this.localeData.dayPeriodLabels
24
- }), this.ariaController = new y(this, {
25
- getTargets: () => this.querySelectorAll(`.${this.inputBlockClass}`),
26
- getState: () => ({
27
- uid: this.uid,
28
- templateData: {
29
- hint: this.hint,
30
- errors: this.errors,
31
- readonly: this.readOnly,
32
- disabled: this.disabled,
33
- touched: this.touched,
34
- required: this.required
35
- }
36
- })
37
- });
38
- }
39
- createRenderRoot() {
40
- return this;
41
- }
42
- connectedCallback() {
43
- super.connectedCallback(), this.classList.add("gui-field");
44
- }
45
- get localeData() {
46
- return D(this.localeId, this.hourFormat, this.minuteStep, !0);
47
- }
48
- getPartDescriptor(a) {
49
- return this.localeData.descriptors[a];
50
- }
51
- /**
52
- * Constrains the date and time axes independently: `minDate`/`maxDate` bound
53
- * the day, `minTime`/`maxTime` bound the time-of-day on every allowed day.
54
- */
55
- boundsError(a, o) {
56
- return M(a, this.minDate, this.maxDate, void 0, {
57
- minDateMessage: this.minDateMessage,
58
- maxDateMessage: this.maxDateMessage
59
- }) ?? f(E(o), {
60
- minTime: this.minTime,
61
- maxTime: this.maxTime,
62
- minTimeMessage: this.minTimeMessage,
63
- maxTimeMessage: this.maxTimeMessage
64
- });
65
- }
66
- willUpdate(a) {
67
- (!this.hasUpdated || a.has("value") || a.has("hourFormat") || a.has("localeId")) && this._parts.setGroupFromISO(
68
- "default",
69
- this.value ?? "",
70
- "dateTime",
71
- this.localeData.effectiveHourFormat
72
- );
73
- }
74
- render() {
75
- const a = {
76
- uid: this.uid,
77
- label: this.label,
78
- errors: this.errors,
79
- touched: this.touched,
80
- required: this.required,
81
- disabled: this.disabled,
82
- readonly: this.readOnly,
83
- value: this.value,
84
- icon: this.icon,
85
- hint: this.hint
86
- }, o = {
87
- blockClass: this.inputBlockClass,
88
- groups: this.groups,
89
- formatParts: S(this.localeId, this.localeData.effectiveHourFormat),
90
- getDescriptor: (s) => this.getPartDescriptor(s),
91
- getDisplayValue: this._parts.getPartDisplay,
92
- getPartAriaLabel: (s, r) => ({
93
- day: this.dayAriaLabel,
94
- month: this.monthAriaLabel,
95
- year: this.yearAriaLabel,
96
- hour: this.hourAriaLabel,
97
- minute: this.minuteAriaLabel
98
- })[r] ?? T[r],
99
- dayPeriodAriaLabel: this.dayPeriodAriaLabel,
100
- disabled: this.disabled,
101
- partsReadonly: !!this.readOnly
102
- }, l = {
103
- "gui-widget-icon": !0,
104
- [this.icon]: !0
105
- };
106
- return p`
107
- ${this.label ? c(this.uid, a, !1, void 0, !1) : h}
108
-
109
- <div class="gui-widget">
110
- <div
111
- id=${this.uid}
112
- class="gui-widget-input gui-parts gui-parts-ring gui-date-time-input ${this.icon ? "gui-calendar--icon" : ""}"
113
- role="group"
114
- aria-labelledby=${`${this.uid}_label`}
115
- >
116
- ${A("default", o, this._parts)}
117
- </div>
118
- ${this.icon ? p`<span
119
- class=${g(l)}
120
- data-icon=${this.icon}
121
- aria-hidden="true"
122
- ></span>` : h}
123
- </div>
124
-
125
- ${this.showErrors && this.errors?.length ? b(this.uid, a) : h}
126
- `;
127
- }
128
- validateAndEmit(a) {
129
- const { effectiveHourFormat: o, descriptors: l } = this.localeData, { result: s, writeBacks: r } = L(this._parts.values[a] ?? {}, {
130
- hourFormat: o,
131
- descriptors: l,
132
- invalidDateMessage: this.invalidDateMessage
133
- });
134
- if (this._parts.applyWriteBacks(a, r), s.kind === "incomplete") {
135
- this.requestUpdate();
136
- return;
137
- }
138
- if (s.kind === "invalid") {
139
- this.dispatchEvent(
140
- new CustomEvent("inputError", { detail: { message: s.message }, bubbles: !0 })
141
- ), this.requestUpdate();
142
- return;
143
- }
144
- const n = this.boundsError(s.iso, s.instant);
145
- if (n) {
146
- this.dispatchEvent(
147
- new CustomEvent("change", { detail: { value: s.iso }, bubbles: !0 })
148
- ), this.dispatchEvent(
149
- new CustomEvent("inputError", { detail: { message: n }, bubbles: !0 })
150
- ), this.requestUpdate();
151
- return;
152
- }
153
- this.value = s.iso, this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value }, bubbles: !0 })), this.requestUpdate();
154
- }
155
- };
156
- e([
157
- i({ type: String })
158
- ], t.prototype, "uid", 2);
159
- e([
160
- i({ type: String })
161
- ], t.prototype, "label", 2);
162
- e([
163
- i({ type: String, attribute: "locale-id" })
164
- ], t.prototype, "localeId", 2);
165
- e([
166
- i({ type: Array })
167
- ], t.prototype, "errors", 2);
168
- e([
169
- i({ type: Boolean })
170
- ], t.prototype, "showErrors", 2);
171
- e([
172
- i({ type: Boolean })
173
- ], t.prototype, "touched", 2);
174
- e([
175
- i({ type: Boolean })
176
- ], t.prototype, "required", 2);
177
- e([
178
- i({ type: Boolean })
179
- ], t.prototype, "disabled", 2);
180
- e([
181
- i({ type: Boolean, attribute: "readonly" })
182
- ], t.prototype, "readOnly", 2);
183
- e([
184
- i({ type: String })
185
- ], t.prototype, "icon", 2);
186
- e([
187
- i({ type: String })
188
- ], t.prototype, "hint", 2);
189
- e([
190
- i({ type: String })
191
- ], t.prototype, "dayAriaLabel", 2);
192
- e([
193
- i({ type: String })
194
- ], t.prototype, "monthAriaLabel", 2);
195
- e([
196
- i({ type: String })
197
- ], t.prototype, "yearAriaLabel", 2);
198
- e([
199
- i({ type: String })
200
- ], t.prototype, "hourAriaLabel", 2);
201
- e([
202
- i({ type: String })
203
- ], t.prototype, "minuteAriaLabel", 2);
204
- e([
205
- i({ type: String })
206
- ], t.prototype, "dayPeriodAriaLabel", 2);
207
- e([
208
- i({ type: String, attribute: "hour-format" })
209
- ], t.prototype, "hourFormat", 2);
210
- e([
211
- i({ type: Number, attribute: "minute-step" })
212
- ], t.prototype, "minuteStep", 2);
213
- e([
214
- i({ type: String, attribute: "invalid-date-message" })
215
- ], t.prototype, "invalidDateMessage", 2);
216
- e([
217
- i({ type: String })
218
- ], t.prototype, "value", 2);
219
- e([
220
- i({ type: String, attribute: "min-date" })
221
- ], t.prototype, "minDate", 2);
222
- e([
223
- i({ type: String, attribute: "max-date" })
224
- ], t.prototype, "maxDate", 2);
225
- e([
226
- i({ type: String, attribute: "min-time" })
227
- ], t.prototype, "minTime", 2);
228
- e([
229
- i({ type: String, attribute: "max-time" })
230
- ], t.prototype, "maxTime", 2);
231
- e([
232
- i({ type: String, attribute: "min-date-message" })
233
- ], t.prototype, "minDateMessage", 2);
234
- e([
235
- i({ type: String, attribute: "max-date-message" })
236
- ], t.prototype, "maxDateMessage", 2);
237
- e([
238
- i({ type: String, attribute: "min-time-message" })
239
- ], t.prototype, "minTimeMessage", 2);
240
- e([
241
- i({ type: String, attribute: "max-time-message" })
242
- ], t.prototype, "maxTimeMessage", 2);
243
- t = e([
244
- m("gui-date-time")
245
- ], t);
246
- typeof customElements < "u" && !customElements.get("gui-date-time") && customElements.define("gui-date-time", t);