@golemui/gui-lit 1.2.0 → 1.2.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.
- package/CHANGELOG.md +31 -0
- package/{accordion.element-BIgxl5e9.js → accordion.element-C9GzfKrY.js} +29 -30
- package/alert.element-CHn49Yaf.js +55 -0
- package/button.element-C9fHivSw.js +59 -0
- package/{calendar.element-Cv3RBphf.js → calendar.element-XkojKTJk.js} +30 -31
- package/checkbox.element-DU_tVMXu.js +66 -0
- package/currency.element-BmAH5KS_.js +73 -0
- package/date-picker.element-Bg3rF95F.js +94 -0
- package/{date-time-calendar.element-DlbWZjoe.js → date-time-calendar.element-sywQCeQQ.js} +24 -24
- package/date-time-picker.element-HHpwjWTQ.js +107 -0
- package/{date-time.element-CLLxM2nV.js → date-time.element-ucETvSTC.js} +26 -26
- package/{date.element-B8ZHK9KJ.js → date.element-BEHGxRFF.js} +27 -27
- package/default-list-item-renderer-CuPJ9jUD.js +24 -0
- package/{dropdown.element-DMZ7oL5n.js → dropdown.element-DUqG_p1x.js} +85 -84
- package/{flex.element-DG4Uaj_X.js → flex.element-pwba7621.js} +27 -28
- package/{grid.element-DCZsh-3J.js → grid.element-C8K7_Qi3.js} +29 -30
- package/index.js +1316 -3883
- package/index.umd.cjs +117 -2132
- package/{list.element-ADtUK2na.js → list.element-ZtEMKE2x.js} +41 -40
- package/markdown-text.element-DDm36qD0.js +54 -0
- package/markdown.element-DWz3U9rG.js +84 -0
- package/number.element-VkG5wScD.js +71 -0
- package/package.json +6 -6
- package/password.element-C5vQHq5P.js +72 -0
- package/radiogroup.element-CKdO9HwO.js +69 -0
- package/{range-calendar.element-D5eb2f7p.js → range-calendar.element-BznGrej5.js} +23 -24
- package/{range-date-input.element-C35grlYo.js → range-date-input.element-BloTHRDl.js} +24 -24
- package/range-date-picker.element-DKhwFasW.js +98 -0
- package/{range-date-time-calendar.element-BV0J96Gu.js → range-date-time-calendar.element-CZCET-sb.js} +26 -26
- package/{range-date-time-input.element-CzgRbR9F.js → range-date-time-input.element-Dr2VrYhG.js} +24 -24
- package/range-date-time-picker.element-CYeIMWLp.js +109 -0
- package/{range-time-input.element-BOHLUO8z.js → range-time-input.element-7OZhPQqx.js} +23 -23
- package/range-time-picker.element-D0mRFZkK.js +96 -0
- package/renderer.element-DbsFoBba.js +48 -0
- package/{repeater.element-Da8YN1Vy.js → repeater.element-DGEbwvhY.js} +54 -65
- package/select.element-Bb_9jAVB.js +76 -0
- package/{tabs.element-CvcIA8P3.js → tabs.element-BYDNF_pm.js} +49 -50
- package/tags.element-BSN3i9Gx.js +73 -0
- package/textarea.element-Dl1ZEOqO.js +71 -0
- package/textinput.element-C5Vbbkxq.js +68 -0
- package/{time-picker.element-C3oR0EkQ.js → time-picker.element-Crmj9YDy.js} +26 -26
- package/{time.element-X286nthD.js → time.element-DfSeAZp4.js} +29 -29
- package/toggle.element-ORsprZ2M.js +66 -0
- package/alert.element-DPWq9-0F.js +0 -56
- package/button.element-CJay43iR.js +0 -132
- package/calendar-DleRbmvP.js +0 -267
- package/checkbox.element-CpmrzdH0.js +0 -200
- package/currency.element-Cezgzbbs.js +0 -276
- package/date-DBuYpvcO.js +0 -849
- package/date-input-B3yHsn-g.js +0 -204
- package/date-picker.element-ByZefznr.js +0 -357
- package/date-time-calendar-CB5cNoOX.js +0 -374
- package/date-time-input-DrY68YDX.js +0 -246
- package/date-time-picker.element-CYwmumfq.js +0 -440
- package/day-status-ljexnwEO.js +0 -554
- package/errors-Bs_vYN-_.js +0 -110
- package/focus-leave.controller-2gV0pQd5.js +0 -73
- package/list-D730tmGN.js +0 -297
- package/markdown-text-X-BRJT6K.js +0 -30
- package/markdown-text.element-B8TfVLIO.js +0 -55
- package/markdown.element-D5zcxAUS.js +0 -693
- package/number.element-DEY5tR_y.js +0 -291
- package/numeric-jmOOKz30.js +0 -12
- package/one-of-anKkm7mD.js +0 -50
- package/part-templates-VORbpgs2.js +0 -691
- package/password.element-C1aQh_iz.js +0 -240
- package/pill-ranges-DpvWwP-3.js +0 -48
- package/pills-BDMO2NiR.js +0 -348
- package/popup.controller-B33OvX_y.js +0 -86
- package/radiogroup.element-B2G-XyGx.js +0 -235
- package/range-calendar-D7sG24Kx.js +0 -466
- package/range-commit-8-MmYUyo.js +0 -14
- package/range-date-input-BChaoBC1.js +0 -311
- package/range-date-picker.element-Do5YsL5V.js +0 -434
- package/range-date-time-calendar-DulGK2EQ.js +0 -734
- package/range-date-time-input-8ggqckP7.js +0 -353
- package/range-date-time-picker.element-hi5KdopZ.js +0 -472
- package/range-selection-CU3hxLJE.js +0 -25
- package/range-time-input-D7GFdDeA.js +0 -348
- package/range-time-picker.element-DDNQMA_u.js +0 -470
- package/renderer.element-CNyMn2Lu.js +0 -49
- package/select.element-SDxBhGjz.js +0 -266
- package/tabs-DzSCq_98.js +0 -13
- package/tags.element-Bnhfevp3.js +0 -369
- package/templates-Df7abEkB.js +0 -92
- package/textarea.element-Dx7eYEnl.js +0 -239
- package/textinput.element-BnIoDRmY.js +0 -205
- package/time-input-Kk4EX6at.js +0 -201
- package/time-list-DLcq8BAp.js +0 -217
- package/time-picker-DLj1rhOf.js +0 -299
- 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);
|