@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.
- package/CHANGELOG.md +34 -0
- package/{button.element-3a7rRHbA.js → button.element-CJay43iR.js} +16 -13
- package/{calendar-BuJgwvZx.js → calendar-D31xNsxx.js} +72 -59
- package/{calendar.element-M5MPJmap.js → calendar.element-BhFrCsns.js} +22 -20
- package/{checkbox.element-CVskoXEc.js → checkbox.element-DAAVB651.js} +49 -49
- package/{currency.element-CfFrAtrr.js → currency.element-D8A2ObpM.js} +11 -10
- package/{date-Bj9mI3GU.js → date-DBuYpvcO.js} +35 -27
- package/{date-input-cJDkNnVw.js → date-input-DLiMreSS.js} +64 -44
- package/date-picker.element-DeUQtbLg.js +357 -0
- package/{date-time-calendar-BzRfkLKU.js → date-time-calendar-DzU-FtVl.js} +89 -76
- package/{date-time-calendar.element-DC4NK0y1.js → date-time-calendar.element-BLBcVsFu.js} +13 -11
- package/{date-time-input-BXxsfuyZ.js → date-time-input-DZaz2heD.js} +75 -43
- package/{date-time-picker.element-Dy-8cb-_.js → date-time-picker.element-BUbLdV6i.js} +125 -65
- package/{date-time.element-Bv4XdzMi.js → date-time.element-B5onfSBG.js} +31 -25
- package/{date.element-Consgsbb.js → date.element-BsKhLrEc.js} +22 -19
- package/{day-status-0-hJHrI7.js → day-status-CsWStVQV.js} +153 -129
- package/{dropdown.element-WsD61Qel.js → dropdown.element-CXpMwJsU.js} +19 -13
- package/{errors-QjKhr6mA.js → errors-Byb2dIhK.js} +3 -2
- package/index.js +2933 -2336
- package/index.umd.cjs +798 -405
- package/{list-CrLIL4by.js → list-D730tmGN.js} +115 -116
- package/{list.element-DV82YxnJ.js → list.element-eo3DIOrp.js} +2 -2
- package/{markdown.element-p-kC47D7.js → markdown.element-FbtwdnAv.js} +310 -218
- package/{number.element-CBr47IiY.js → number.element-BEpOCzXy.js} +76 -61
- package/package.json +9 -6
- package/{part-templates-Db871PS3.js → part-templates-VORbpgs2.js} +132 -118
- package/{password.element-n-R9RbkB.js → password.element-CBaB8h5b.js} +19 -17
- package/{pill-ranges-DCqDmpkk.js → pill-ranges-DpvWwP-3.js} +12 -12
- package/{pills-Be1UrLgq.js → pills-BDMO2NiR.js} +80 -58
- package/popup.controller-B33OvX_y.js +86 -0
- package/{radiogroup.element-CeQn623u.js → radiogroup.element-KWzBx8mx.js} +55 -51
- package/{range-calendar-CKPYeSGt.js → range-calendar-DO_woqcF.js} +101 -87
- package/{range-calendar.element-D6KYq18B.js → range-calendar.element-DHLZhpnj.js} +15 -13
- package/{range-date-input-D--AqBMv.js → range-date-input-Br7XqQPK.js} +90 -71
- package/{range-date-input.element-D4nIXJbw.js → range-date-input.element-BdD4SlB4.js} +15 -12
- package/{range-date-picker.element-dhxPAAE6.js → range-date-picker.element-DWRHiAoC.js} +97 -49
- package/{range-date-time-calendar-yksWrR7b.js → range-date-time-calendar-B3EMgN1E.js} +150 -136
- package/{range-date-time-calendar.element-C00aDefZ.js → range-date-time-calendar.element-Coea6RF4.js} +9 -7
- package/{range-date-time-input-B37TUoM3.js → range-date-time-input-Cu-T_nuC.js} +125 -94
- package/{range-date-time-input.element-DUnbv4ed.js → range-date-time-input.element-Cti44iuW.js} +31 -25
- package/{range-date-time-picker.element-Cbps6s_G.js → range-date-time-picker.element-CDN2RL1y.js} +107 -47
- package/{range-time-input-3lhqR1Ku.js → range-time-input-BP9ZL9O8.js} +85 -66
- package/{range-time-input.element-dU2iBdmJ.js → range-time-input.element-B7wtHJoQ.js} +14 -11
- package/{range-time-picker.element-v6nQsIPw.js → range-time-picker.element-CPIAiQPC.js} +92 -51
- package/{repeater.element-CtNgB4F5.js → repeater.element-BM1Keckd.js} +1 -1
- package/{select.element-C0V-Bv3L.js → select.element-eepcXTpL.js} +84 -78
- package/{tabs.element-BvAyI71N.js → tabs.element-CvcIA8P3.js} +1 -0
- package/{tags.element-DvwEpxpK.js → tags.element-CPHgotb0.js} +21 -14
- package/templates-Dmr34nwp.js +88 -0
- package/{textarea.element-HThYqdR_.js → textarea.element-CiNEy9uq.js} +8 -7
- package/{textinput.element-CkXNzMUg.js → textinput.element-AL2Nr768.js} +10 -9
- package/{time-input-BOhlBGJZ.js → time-input-5dkSm8UW.js} +67 -47
- package/{time-list-Czo48bZm.js → time-list-DLcq8BAp.js} +1 -1
- package/{time-picker-bFJ63ky8.js → time-picker-g337F8d0.js} +89 -51
- package/{time-picker.element-CYZVXgRS.js → time-picker.element-DLihegjg.js} +23 -19
- package/{time.element-fK3oLi49.js → time.element-BneqgMlQ.js} +22 -19
- package/{toggle.element-C1kCw5H8.js → toggle.element-Cz91CRdp.js} +44 -43
- package/date-picker.element-va_-LGZD.js +0 -312
- package/popup.controller-eUDxE6jD.js +0 -71
- package/templates-Dk1jxLwS.js +0 -75
package/{range-date-time-picker.element-Cbps6s_G.js → range-date-time-picker.element-CDN2RL1y.js}
RENAMED
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import { InputWidgetAdapter as g, formContext as
|
|
2
|
-
import { LitElement as m, html as h, nothing as
|
|
3
|
-
import { property as i,
|
|
4
|
-
import { classMap as
|
|
5
|
-
import "./range-date-time-input-
|
|
6
|
-
import "./range-date-time-calendar-
|
|
7
|
-
import { G as
|
|
8
|
-
import { a as
|
|
9
|
-
import { consume as
|
|
1
|
+
import { InputWidgetAdapter as g, formContext as c, inputContext as y } from "@golemui/lit";
|
|
2
|
+
import { LitElement as m, html as h, nothing as $ } from "lit";
|
|
3
|
+
import { property as i, state as v, customElement as b } from "lit/decorators.js";
|
|
4
|
+
import { classMap as L } from "lit/directives/class-map.js";
|
|
5
|
+
import "./range-date-time-input-Cu-T_nuC.js";
|
|
6
|
+
import "./range-date-time-calendar-B3EMgN1E.js";
|
|
7
|
+
import { G as A } from "./popup.controller-B33OvX_y.js";
|
|
8
|
+
import { a as D, b as T, c as f } from "./templates-Dmr34nwp.js";
|
|
9
|
+
import { consume as M, provide as C } from "@lit/context";
|
|
10
10
|
import "rxjs";
|
|
11
|
-
var
|
|
12
|
-
for (var o = s > 1 ? void 0 : s ?
|
|
11
|
+
var w = Object.defineProperty, S = Object.getOwnPropertyDescriptor, a = (e, r, n, s) => {
|
|
12
|
+
for (var o = s > 1 ? void 0 : s ? S(r, n) : r, l = e.length - 1, d; l >= 0; l--)
|
|
13
13
|
(d = e[l]) && (o = (s ? d(r, n, o) : d(o)) || o);
|
|
14
|
-
return s && o &&
|
|
14
|
+
return s && o && w(r, n, o), o;
|
|
15
15
|
};
|
|
16
16
|
let t = class extends m {
|
|
17
17
|
constructor() {
|
|
18
|
-
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 = [], this.separator = void 0, this.removePillAriaLabel = void 0, this.startDateTimeAriaLabel = void 0, this.endDateTimeAriaLabel = void 0, this.invalidDateMessage = 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.numberOfMonths = void 0, this.hourFormat = void 0, this.minuteStep = void 0, this.allowCustomTime = !1, this.startTimeLabel = void 0, this.endTimeLabel = void 0, this.minDateTime = void 0, this.maxDateTime = void 0, this.minDateTimeMessage = void 0, this.maxDateTimeMessage = void 0, this.disabledRanges = void 0, this.disabledRangeMessage = void 0, this.noAvailableTimesMessage = void 0, this.dayCountAriaLabel = void 0, this.disabledDayCountAriaLabel = void 0, this._focusDate = void 0, this._popup = new
|
|
19
|
-
getInteriorElements: () => [this._dateRef, this._calendarRef],
|
|
18
|
+
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 = [], this.toggleAriaLabel = 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.separator = void 0, this.removePillAriaLabel = void 0, this.startDateTimeAriaLabel = void 0, this.endDateTimeAriaLabel = void 0, this.invalidDateMessage = void 0, this.prevMonthIcon = "", this.nextMonthIcon = "", this.prevMonthAriaLabel = void 0, this.nextMonthAriaLabel = void 0, this.selectYearAriaLabel = void 0, this.yearGridAriaLabel = void 0, this.dayFormat = void 0, this.weekdayFormat = void 0, this.monthFormat = void 0, this.numberOfMonths = void 0, this.hourFormat = void 0, this.minuteStep = void 0, this.allowCustomTime = !1, this.startTimeLabel = void 0, this.endTimeLabel = void 0, this.minDateTime = void 0, this.maxDateTime = void 0, this.minDateTimeMessage = void 0, this.maxDateTimeMessage = void 0, this.disabledRanges = void 0, this.disabledRangeMessage = void 0, this.noAvailableTimesMessage = void 0, this.dayCountAriaLabel = void 0, this.disabledDayCountAriaLabel = void 0, this._focusDate = void 0, this._popup = new A(this, {
|
|
20
19
|
focusRestoreSelector: "gui-range-date-time input",
|
|
20
|
+
focusPopupSelector: '.gui-calendar__day-button[tabindex="0"]',
|
|
21
21
|
isDisabled: () => !!this.disabled,
|
|
22
22
|
clickIntent: (e) => e.closest(".gui-calendar__day-button") || e.closest(".gui-time-list__option") || e.closest("gui-time-picker") ? "ignore" : e.closest(".gui-range-date-time-input__field") || e.closest("gui-range-date-time-calendar") ? "open" : "toggle",
|
|
23
23
|
keyToggleMode: "openClose",
|
|
@@ -29,6 +29,8 @@ let t = class extends m {
|
|
|
29
29
|
}
|
|
30
30
|
}), this.onDropdownToggle = (e) => {
|
|
31
31
|
e.detail?.open && this._popup.open && this._popup.close();
|
|
32
|
+
}, this.onToggleClick = (e) => {
|
|
33
|
+
e.stopPropagation(), this._popup.open ? this._popup.close() : this._popup.openAndFocus();
|
|
32
34
|
};
|
|
33
35
|
}
|
|
34
36
|
createRenderRoot() {
|
|
@@ -41,8 +43,10 @@ let t = class extends m {
|
|
|
41
43
|
super.disconnectedCallback(), this.removeEventListener("dropdowntoggle", this.onDropdownToggle);
|
|
42
44
|
}
|
|
43
45
|
render() {
|
|
44
|
-
const e =
|
|
45
|
-
id
|
|
46
|
+
const e = D("datePicker", { icon: this.icon }), r = this._popup.open ? h`<gui-range-date-time-calendar
|
|
47
|
+
id=${`${this.uid}_popup`}
|
|
48
|
+
role="dialog"
|
|
49
|
+
aria-label=${this.label ?? "Calendar"}
|
|
46
50
|
.uid=${this.uid}
|
|
47
51
|
.hint=${this.hint}
|
|
48
52
|
?touched=${this.touched}
|
|
@@ -57,6 +61,8 @@ let t = class extends m {
|
|
|
57
61
|
.nextMonthIcon=${this.nextMonthIcon}
|
|
58
62
|
.prevMonthAriaLabel=${this.prevMonthAriaLabel}
|
|
59
63
|
.nextMonthAriaLabel=${this.nextMonthAriaLabel}
|
|
64
|
+
.selectYearAriaLabel=${this.selectYearAriaLabel}
|
|
65
|
+
.yearGridAriaLabel=${this.yearGridAriaLabel}
|
|
60
66
|
.dayFormat=${this.dayFormat}
|
|
61
67
|
.weekdayFormat=${this.weekdayFormat}
|
|
62
68
|
.monthFormat=${this.monthFormat}
|
|
@@ -78,26 +84,28 @@ let t = class extends m {
|
|
|
78
84
|
@blur=${this.onCalendarBlur}
|
|
79
85
|
@change=${this.onCalendarChange}
|
|
80
86
|
@inputError=${this.onCalendarInputError}
|
|
81
|
-
></gui-range-date-time-calendar>` :
|
|
87
|
+
></gui-range-date-time-calendar>` : $;
|
|
82
88
|
return h`
|
|
83
|
-
${
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
89
|
+
${T(
|
|
90
|
+
this.uid ?? "",
|
|
91
|
+
{
|
|
92
|
+
label: this.label,
|
|
93
|
+
hint: this.hint,
|
|
94
|
+
required: this.required
|
|
95
|
+
},
|
|
96
|
+
!1,
|
|
97
|
+
void 0,
|
|
98
|
+
!1
|
|
99
|
+
)}
|
|
88
100
|
|
|
89
101
|
<div
|
|
90
|
-
role="button"
|
|
91
|
-
tabindex="-1"
|
|
92
102
|
class="gui-widget"
|
|
93
|
-
aria-expanded=${this._popup.open}
|
|
94
|
-
@keyup=${this._popup.onAnchorKeyUp}
|
|
95
103
|
@keydown=${this._popup.onAnchorKeyDown}
|
|
96
104
|
@click=${this._popup.onAnchorClick}
|
|
97
105
|
>
|
|
98
106
|
<gui-range-date-time
|
|
99
107
|
id="date-input"
|
|
100
|
-
class=${
|
|
108
|
+
class=${L(e.widgetClasses)}
|
|
101
109
|
.uid=${this.uid}
|
|
102
110
|
.hint=${this.hint}
|
|
103
111
|
.showErrors=${!1}
|
|
@@ -115,6 +123,12 @@ let t = class extends m {
|
|
|
115
123
|
.removePillAriaLabel=${this.removePillAriaLabel}
|
|
116
124
|
.startDateTimeAriaLabel=${this.startDateTimeAriaLabel}
|
|
117
125
|
.endDateTimeAriaLabel=${this.endDateTimeAriaLabel}
|
|
126
|
+
.dayAriaLabel=${this.dayAriaLabel}
|
|
127
|
+
.monthAriaLabel=${this.monthAriaLabel}
|
|
128
|
+
.yearAriaLabel=${this.yearAriaLabel}
|
|
129
|
+
.hourAriaLabel=${this.hourAriaLabel}
|
|
130
|
+
.minuteAriaLabel=${this.minuteAriaLabel}
|
|
131
|
+
.dayPeriodAriaLabel=${this.dayPeriodAriaLabel}
|
|
118
132
|
.invalidDateMessage=${this.invalidDateMessage}
|
|
119
133
|
.minDateTime=${this.minDateTime}
|
|
120
134
|
.maxDateTime=${this.maxDateTime}
|
|
@@ -127,17 +141,33 @@ let t = class extends m {
|
|
|
127
141
|
@change=${this.onDateChange}
|
|
128
142
|
@pillClick=${this.onPillClick}
|
|
129
143
|
></gui-range-date-time>
|
|
130
|
-
<
|
|
131
|
-
|
|
144
|
+
<button
|
|
145
|
+
type="button"
|
|
146
|
+
class="gui-range-date-time-picker__arrow"
|
|
147
|
+
aria-label=${this.toggleAriaLabel ?? "Show calendar"}
|
|
148
|
+
aria-haspopup="dialog"
|
|
149
|
+
aria-expanded=${this._popup.open ? "true" : "false"}
|
|
150
|
+
aria-controls=${`${this.uid}_popup`}
|
|
151
|
+
?disabled=${this.disabled}
|
|
152
|
+
@click=${this.onToggleClick}
|
|
153
|
+
>
|
|
154
|
+
<svg
|
|
155
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
156
|
+
width="16"
|
|
157
|
+
height="16"
|
|
158
|
+
viewBox="0 0 256 256"
|
|
159
|
+
aria-hidden="true"
|
|
160
|
+
>
|
|
132
161
|
<path
|
|
133
162
|
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"
|
|
134
|
-
></path
|
|
135
|
-
|
|
163
|
+
></path>
|
|
164
|
+
</svg>
|
|
165
|
+
</button>
|
|
136
166
|
|
|
137
167
|
${r}
|
|
138
168
|
</div>
|
|
139
169
|
|
|
140
|
-
${this.showErrors ?
|
|
170
|
+
${this.showErrors ? f(this.uid ?? "", { errors: this.errors, touched: this.touched }) : ""}
|
|
141
171
|
`;
|
|
142
172
|
}
|
|
143
173
|
onDateChange(e) {
|
|
@@ -177,7 +207,7 @@ let t = class extends m {
|
|
|
177
207
|
);
|
|
178
208
|
}
|
|
179
209
|
onCalendarBlur() {
|
|
180
|
-
this._popup.
|
|
210
|
+
this._popup.closeOnFocusLeave();
|
|
181
211
|
}
|
|
182
212
|
onPillClick(e) {
|
|
183
213
|
this._focusDate = e.detail.range.start, this._popup.show();
|
|
@@ -222,6 +252,27 @@ a([
|
|
|
222
252
|
a([
|
|
223
253
|
i({ type: Array })
|
|
224
254
|
], t.prototype, "value", 2);
|
|
255
|
+
a([
|
|
256
|
+
i({ type: String, attribute: "toggle-aria-label" })
|
|
257
|
+
], t.prototype, "toggleAriaLabel", 2);
|
|
258
|
+
a([
|
|
259
|
+
i({ type: String })
|
|
260
|
+
], t.prototype, "dayAriaLabel", 2);
|
|
261
|
+
a([
|
|
262
|
+
i({ type: String })
|
|
263
|
+
], t.prototype, "monthAriaLabel", 2);
|
|
264
|
+
a([
|
|
265
|
+
i({ type: String })
|
|
266
|
+
], t.prototype, "yearAriaLabel", 2);
|
|
267
|
+
a([
|
|
268
|
+
i({ type: String })
|
|
269
|
+
], t.prototype, "hourAriaLabel", 2);
|
|
270
|
+
a([
|
|
271
|
+
i({ type: String })
|
|
272
|
+
], t.prototype, "minuteAriaLabel", 2);
|
|
273
|
+
a([
|
|
274
|
+
i({ type: String })
|
|
275
|
+
], t.prototype, "dayPeriodAriaLabel", 2);
|
|
225
276
|
a([
|
|
226
277
|
i({ type: String })
|
|
227
278
|
], t.prototype, "separator", 2);
|
|
@@ -249,6 +300,12 @@ a([
|
|
|
249
300
|
a([
|
|
250
301
|
i({ type: String, attribute: "next-month-aria-label" })
|
|
251
302
|
], t.prototype, "nextMonthAriaLabel", 2);
|
|
303
|
+
a([
|
|
304
|
+
i({ type: String, attribute: "select-year-aria-label" })
|
|
305
|
+
], t.prototype, "selectYearAriaLabel", 2);
|
|
306
|
+
a([
|
|
307
|
+
i({ type: String, attribute: "year-grid-aria-label" })
|
|
308
|
+
], t.prototype, "yearGridAriaLabel", 2);
|
|
252
309
|
a([
|
|
253
310
|
i({ type: String, attribute: "day-format" })
|
|
254
311
|
], t.prototype, "dayFormat", 2);
|
|
@@ -304,22 +361,16 @@ a([
|
|
|
304
361
|
i({ type: String, attribute: "disabled-day-count-aria-label" })
|
|
305
362
|
], t.prototype, "disabledDayCountAriaLabel", 2);
|
|
306
363
|
a([
|
|
307
|
-
|
|
308
|
-
], t.prototype, "_dateRef", 2);
|
|
309
|
-
a([
|
|
310
|
-
b("#calendar-input")
|
|
311
|
-
], t.prototype, "_calendarRef", 2);
|
|
312
|
-
a([
|
|
313
|
-
D()
|
|
364
|
+
v()
|
|
314
365
|
], t.prototype, "_focusDate", 2);
|
|
315
366
|
t = a([
|
|
316
|
-
|
|
367
|
+
b("gui-range-date-time-picker")
|
|
317
368
|
], t);
|
|
318
369
|
typeof customElements < "u" && !customElements.get("gui-range-date-time-picker") && customElements.define("gui-range-date-time-picker", t);
|
|
319
|
-
var
|
|
320
|
-
for (var o = s > 1 ? void 0 : s ?
|
|
370
|
+
var x = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, u = (e, r, n, s) => {
|
|
371
|
+
for (var o = s > 1 ? void 0 : s ? _(r, n) : r, l = e.length - 1, d; l >= 0; l--)
|
|
321
372
|
(d = e[l]) && (o = (s ? d(r, n, o) : d(o)) || o);
|
|
322
|
-
return s && o &&
|
|
373
|
+
return s && o && x(r, n, o), o;
|
|
323
374
|
};
|
|
324
375
|
let p = class extends m {
|
|
325
376
|
constructor() {
|
|
@@ -362,11 +413,20 @@ let p = class extends m {
|
|
|
362
413
|
.nextMonthIcon=${e.nextMonthIcon}
|
|
363
414
|
.prevMonthAriaLabel=${e.prevMonthAriaLabel}
|
|
364
415
|
.nextMonthAriaLabel=${e.nextMonthAriaLabel}
|
|
416
|
+
.selectYearAriaLabel=${e.selectYearAriaLabel}
|
|
417
|
+
.yearGridAriaLabel=${e.yearGridAriaLabel}
|
|
365
418
|
.dayFormat=${e.dayFormat}
|
|
366
419
|
.weekdayFormat=${e.weekdayFormat}
|
|
367
420
|
.monthFormat=${e.monthFormat}
|
|
368
421
|
.numberOfMonths=${e.numberOfMonths}
|
|
369
422
|
.localeId=${e.lang}
|
|
423
|
+
.toggleAriaLabel=${e.toggleAriaLabel}
|
|
424
|
+
.dayAriaLabel=${e.dayAriaLabel}
|
|
425
|
+
.monthAriaLabel=${e.monthAriaLabel}
|
|
426
|
+
.yearAriaLabel=${e.yearAriaLabel}
|
|
427
|
+
.hourAriaLabel=${e.hourAriaLabel}
|
|
428
|
+
.minuteAriaLabel=${e.minuteAriaLabel}
|
|
429
|
+
.dayPeriodAriaLabel=${e.dayPeriodAriaLabel}
|
|
370
430
|
.hourFormat=${e.hourFormat}
|
|
371
431
|
.minuteStep=${e.minuteStep}
|
|
372
432
|
?allow-custom-time=${e.allowCustomTime}
|
|
@@ -398,14 +458,14 @@ let p = class extends m {
|
|
|
398
458
|
}
|
|
399
459
|
};
|
|
400
460
|
u([
|
|
401
|
-
|
|
461
|
+
M({ context: c }),
|
|
402
462
|
i({ attribute: !1 })
|
|
403
463
|
], p.prototype, "formContext", 2);
|
|
404
464
|
u([
|
|
405
|
-
|
|
465
|
+
C({ context: y })
|
|
406
466
|
], p.prototype, "adapter", 2);
|
|
407
467
|
p = u([
|
|
408
|
-
|
|
468
|
+
b("gui-range-date-time-picker-input")
|
|
409
469
|
], p);
|
|
410
470
|
export {
|
|
411
471
|
p as RangeDateTimePickerElement
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import { LitElement as c, nothing as d, html as p } from "lit";
|
|
2
|
-
import { property as
|
|
2
|
+
import { property as a, customElement as g } from "lit/decorators.js";
|
|
3
3
|
import { classMap as v } from "lit/directives/class-map.js";
|
|
4
4
|
import { styleMap as y } from "lit-html/directives/style-map.js";
|
|
5
|
-
import { G as b, b as f, c as T } from "./templates-
|
|
6
|
-
import { G as
|
|
7
|
-
import { c as
|
|
8
|
-
import { r as
|
|
9
|
-
import "./pills-
|
|
10
|
-
import {
|
|
11
|
-
var
|
|
12
|
-
for (var l = r > 1 ? void 0 : r ?
|
|
13
|
-
(u = t[n]) && (l = (r ? u(
|
|
14
|
-
return r && l &&
|
|
5
|
+
import { G as b, b as f, c as T } from "./templates-Dmr34nwp.js";
|
|
6
|
+
import { G as _, g as E, u as P, r as h, l as L, s as m, v as S, w as A, x as C, t as D, P as R } from "./part-templates-VORbpgs2.js";
|
|
7
|
+
import { c as $ } from "./range-commit-8-MmYUyo.js";
|
|
8
|
+
import { r as I, f as w, b as k, a as M, s as F } from "./pill-ranges-DpvWwP-3.js";
|
|
9
|
+
import "./pills-BDMO2NiR.js";
|
|
10
|
+
import { f as B, e as O } from "./date-DBuYpvcO.js";
|
|
11
|
+
var G = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (t, s, o, r) => {
|
|
12
|
+
for (var l = r > 1 ? void 0 : r ? x(s, o) : s, n = t.length - 1, u; n >= 0; n--)
|
|
13
|
+
(u = t[n]) && (l = (r ? u(s, o, l) : u(l)) || l);
|
|
14
|
+
return r && l && G(s, o, l), l;
|
|
15
15
|
};
|
|
16
16
|
let e = class extends c {
|
|
17
17
|
constructor() {
|
|
18
|
-
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.hourFormat = void 0, this.minuteStep = 1, this.minTime = void 0, this.maxTime = void 0, this.minTimeMessage = void 0, this.maxTimeMessage = void 0, this.value = [], this.rangeOrderMessage = void 0, this.removePillAriaLabel = void 0, this.startTimeAriaLabel = void 0, this.endTimeAriaLabel = void 0, this.separator = void 0, this.allowCustomTime = void 0, this.disabledRanges = void 0, this.disabledRangeMessage = void 0, this.inputBlockClass = "gui-range-time-input", this.groups = ["start", "end"], this._validationTriggered = !1, this._parts = new
|
|
18
|
+
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.hourAriaLabel = void 0, this.minuteAriaLabel = void 0, this.dayPeriodAriaLabel = void 0, this.hourFormat = void 0, this.minuteStep = 1, this.minTime = void 0, this.maxTime = void 0, this.minTimeMessage = void 0, this.maxTimeMessage = void 0, this.value = [], this.rangeOrderMessage = void 0, this.removePillAriaLabel = void 0, this.startTimeAriaLabel = void 0, this.endTimeAriaLabel = void 0, this.separator = void 0, this.allowCustomTime = void 0, this.disabledRanges = void 0, this.disabledRangeMessage = void 0, this.inputBlockClass = "gui-range-time-input", this.groups = ["start", "end"], this._validationTriggered = !1, this._parts = new _(this, {
|
|
19
19
|
blockClass: this.inputBlockClass,
|
|
20
20
|
groups: this.groups,
|
|
21
21
|
getDescriptor: (t) => this.getPartDescriptor(t),
|
|
@@ -44,20 +44,21 @@ let e = class extends c {
|
|
|
44
44
|
errors: this.errors,
|
|
45
45
|
readonly: this.readOnly,
|
|
46
46
|
disabled: this.disabled,
|
|
47
|
-
touched: this.touched
|
|
47
|
+
touched: this.touched,
|
|
48
|
+
required: this.required
|
|
48
49
|
}
|
|
49
50
|
})
|
|
50
51
|
}), this.onPillRemoveEvent = (t) => {
|
|
51
52
|
if (this.disabled || this.readOnly) return;
|
|
52
|
-
const
|
|
53
|
-
|
|
53
|
+
const s = I(this.value, t.detail.key);
|
|
54
|
+
s && (this.value = s.next, this.dispatchEvent(
|
|
54
55
|
new CustomEvent("change", { detail: { value: this.value }, bubbles: !0, composed: !0 })
|
|
55
|
-
),
|
|
56
|
+
), s.next.length === 0 && requestAnimationFrame(() => {
|
|
56
57
|
this.querySelector(".gui-range-time-input__field input")?.focus();
|
|
57
58
|
}));
|
|
58
59
|
}, this.onPillClickEvent = (t) => {
|
|
59
|
-
const
|
|
60
|
-
|
|
60
|
+
const s = w(this.getSortedPills(), t.detail.key);
|
|
61
|
+
s && this.onPillClick(s);
|
|
61
62
|
};
|
|
62
63
|
}
|
|
63
64
|
createRenderRoot() {
|
|
@@ -67,7 +68,7 @@ let e = class extends c {
|
|
|
67
68
|
super.connectedCallback(), this.classList.add("gui-field");
|
|
68
69
|
}
|
|
69
70
|
get timeLocaleData() {
|
|
70
|
-
return
|
|
71
|
+
return E(this.localeId, this.hourFormat, this.minuteStep);
|
|
71
72
|
}
|
|
72
73
|
getPartDescriptor(t) {
|
|
73
74
|
return this.timeLocaleData.descriptors[t];
|
|
@@ -86,19 +87,22 @@ let e = class extends c {
|
|
|
86
87
|
readonly: this.readOnly,
|
|
87
88
|
value: this.value,
|
|
88
89
|
hint: this.hint
|
|
89
|
-
},
|
|
90
|
+
}, s = {
|
|
90
91
|
blockClass: this.inputBlockClass,
|
|
91
92
|
groups: this.groups,
|
|
92
93
|
formatParts: P(this.localeId, this.timeLocaleData.effectiveHourFormat),
|
|
93
94
|
getDescriptor: (l) => this.getPartDescriptor(l),
|
|
94
95
|
getDisplayValue: this._parts.getPartDisplay,
|
|
95
|
-
|
|
96
|
+
getPartAriaLabel: (l, n) => ({
|
|
97
|
+
hour: this.hourAriaLabel,
|
|
98
|
+
minute: this.minuteAriaLabel
|
|
99
|
+
})[n] ?? R[n],
|
|
100
|
+
dayPeriodAriaLabel: this.dayPeriodAriaLabel,
|
|
96
101
|
disabled: this.disabled,
|
|
97
102
|
partsReadonly: !!this.readOnly || this.allowCustomTime === !1
|
|
98
|
-
}, o =
|
|
103
|
+
}, o = k(
|
|
99
104
|
this.getSortedPills(),
|
|
100
|
-
(l) =>
|
|
101
|
-
this.removePillAriaLabel ?? "Remove time"
|
|
105
|
+
(l) => M(l, (n) => this.formatTimeForDisplay(n))
|
|
102
106
|
), r = {
|
|
103
107
|
"gui-widget-icon": !0,
|
|
104
108
|
[this.icon]: !!this.icon
|
|
@@ -112,11 +116,17 @@ let e = class extends c {
|
|
|
112
116
|
role="group"
|
|
113
117
|
aria-label=${this.label ?? "Time range input"}
|
|
114
118
|
>
|
|
115
|
-
${this.icon ? p`<span
|
|
119
|
+
${this.icon ? p`<span
|
|
120
|
+
class=${v(r)}
|
|
121
|
+
data-icon=${this.icon}
|
|
122
|
+
aria-hidden="true"
|
|
123
|
+
></span>` : d}
|
|
116
124
|
|
|
117
125
|
<gui-pills
|
|
118
126
|
class="gui-range-time-input__pills"
|
|
119
127
|
style=${y(o.length ? {} : { "min-width": 0 })}
|
|
128
|
+
.uid=${this.uid}
|
|
129
|
+
.toolbarAriaLabel=${"Selected time ranges"}
|
|
120
130
|
.items=${o}
|
|
121
131
|
.removable=${!0}
|
|
122
132
|
.clickable=${!0}
|
|
@@ -135,7 +145,7 @@ let e = class extends c {
|
|
|
135
145
|
role="group"
|
|
136
146
|
aria-label=${this.startTimeAriaLabel ?? "Start time"}
|
|
137
147
|
>
|
|
138
|
-
${
|
|
148
|
+
${h("start", s, this._parts)}
|
|
139
149
|
</div>
|
|
140
150
|
|
|
141
151
|
<span class="gui-range-time-input__separator">${this.separator ?? "-"}</span>
|
|
@@ -145,7 +155,7 @@ let e = class extends c {
|
|
|
145
155
|
role="group"
|
|
146
156
|
aria-label=${this.endTimeAriaLabel ?? "End time"}
|
|
147
157
|
>
|
|
148
|
-
${
|
|
158
|
+
${h("end", s, this._parts)}
|
|
149
159
|
</div>
|
|
150
160
|
</div>
|
|
151
161
|
</div>
|
|
@@ -160,10 +170,10 @@ let e = class extends c {
|
|
|
160
170
|
);
|
|
161
171
|
}
|
|
162
172
|
formatTimeForDisplay(t) {
|
|
163
|
-
return
|
|
173
|
+
return L(t, this.localeId, this.timeLocaleData.effectiveHourFormat);
|
|
164
174
|
}
|
|
165
175
|
getSortedPills() {
|
|
166
|
-
return
|
|
176
|
+
return F(this.value, m);
|
|
167
177
|
}
|
|
168
178
|
/**
|
|
169
179
|
* Parses a group's parts into an ISO time via the shared clamp/bounds
|
|
@@ -171,12 +181,12 @@ let e = class extends c {
|
|
|
171
181
|
* the group is incomplete or out of bounds.
|
|
172
182
|
*/
|
|
173
183
|
validateTimeParts(t) {
|
|
174
|
-
const { effectiveHourFormat:
|
|
175
|
-
hourFormat:
|
|
184
|
+
const { effectiveHourFormat: s, descriptors: o } = this.timeLocaleData, { result: r, writeBacks: l } = S(this._parts.values[t] ?? {}, {
|
|
185
|
+
hourFormat: s,
|
|
176
186
|
descriptors: o
|
|
177
187
|
});
|
|
178
188
|
if (this._parts.applyWriteBacks(t, l), r.kind !== "valid") return { kind: "incomplete" };
|
|
179
|
-
const n =
|
|
189
|
+
const n = A(r.iso, {
|
|
180
190
|
minTime: this.minTime,
|
|
181
191
|
maxTime: this.maxTime,
|
|
182
192
|
minTimeMessage: this.minTimeMessage,
|
|
@@ -189,8 +199,8 @@ let e = class extends c {
|
|
|
189
199
|
* calls this so a list pick lands in the visible input (start/end field)
|
|
190
200
|
* before it attempts to commit — see {@link commitFromParts}.
|
|
191
201
|
*/
|
|
192
|
-
fillGroup(t,
|
|
193
|
-
this._parts.setGroupFromISO(t,
|
|
202
|
+
fillGroup(t, s) {
|
|
203
|
+
this._parts.setGroupFromISO(t, s, "time", this.timeLocaleData.effectiveHourFormat), this.requestUpdate();
|
|
194
204
|
}
|
|
195
205
|
/**
|
|
196
206
|
* Attempts to commit the currently-entered parts as a pill, returning whether
|
|
@@ -207,24 +217,24 @@ let e = class extends c {
|
|
|
207
217
|
* follow the typed values. Runs on every part change.
|
|
208
218
|
*/
|
|
209
219
|
syncParts() {
|
|
210
|
-
const t = this.validateTimeParts("start"),
|
|
220
|
+
const t = this.validateTimeParts("start"), s = this.validateTimeParts("end"), o = (r) => r.kind === "valid" ? r.value : null;
|
|
211
221
|
return this.dispatchEvent(
|
|
212
222
|
new CustomEvent("partsChange", {
|
|
213
|
-
detail: { start: o(t), end: o(
|
|
223
|
+
detail: { start: o(t), end: o(s) },
|
|
214
224
|
bubbles: !0,
|
|
215
225
|
composed: !0
|
|
216
226
|
})
|
|
217
|
-
), { start: t, end:
|
|
227
|
+
), { start: t, end: s };
|
|
218
228
|
}
|
|
219
229
|
/**
|
|
220
230
|
* Parses the range and updates the error state, without ever committing.
|
|
221
231
|
* Shared by the Enter commit and by {@link revalidate}.
|
|
222
232
|
*/
|
|
223
233
|
evaluateRange() {
|
|
224
|
-
const { start: t, end:
|
|
225
|
-
validate: (r) =>
|
|
234
|
+
const { start: t, end: s } = this.syncParts(), o = $(t, s, this.value, {
|
|
235
|
+
validate: (r) => m(r.end, r.start) <= 0 ? this.rangeOrderMessage ?? B : D(r.start, r.end, this.disabledRanges) ? this.disabledRangeMessage ?? O : null,
|
|
226
236
|
toRange: (r) => ({ start: r.start, end: r.end }),
|
|
227
|
-
merge:
|
|
237
|
+
merge: C
|
|
228
238
|
});
|
|
229
239
|
return o.kind === "incomplete" && this._parts.clearSurfacedInputError(this.value ?? []), o.kind === "invalid" && this._parts.surfaceInputError(o.message), o;
|
|
230
240
|
}
|
|
@@ -246,82 +256,91 @@ let e = class extends c {
|
|
|
246
256
|
}
|
|
247
257
|
};
|
|
248
258
|
i([
|
|
249
|
-
|
|
259
|
+
a({ type: String })
|
|
250
260
|
], e.prototype, "uid", 2);
|
|
251
261
|
i([
|
|
252
|
-
|
|
262
|
+
a({ type: String })
|
|
253
263
|
], e.prototype, "label", 2);
|
|
254
264
|
i([
|
|
255
|
-
|
|
265
|
+
a({ type: String, attribute: "locale-id" })
|
|
256
266
|
], e.prototype, "localeId", 2);
|
|
257
267
|
i([
|
|
258
|
-
|
|
268
|
+
a({ type: Array })
|
|
259
269
|
], e.prototype, "errors", 2);
|
|
260
270
|
i([
|
|
261
|
-
|
|
271
|
+
a({ type: Boolean })
|
|
262
272
|
], e.prototype, "showErrors", 2);
|
|
263
273
|
i([
|
|
264
|
-
|
|
274
|
+
a({ type: Boolean })
|
|
265
275
|
], e.prototype, "touched", 2);
|
|
266
276
|
i([
|
|
267
|
-
|
|
277
|
+
a({ type: Boolean })
|
|
268
278
|
], e.prototype, "required", 2);
|
|
269
279
|
i([
|
|
270
|
-
|
|
280
|
+
a({ type: Boolean })
|
|
271
281
|
], e.prototype, "disabled", 2);
|
|
272
282
|
i([
|
|
273
|
-
|
|
283
|
+
a({ type: Boolean, attribute: "readonly" })
|
|
274
284
|
], e.prototype, "readOnly", 2);
|
|
275
285
|
i([
|
|
276
|
-
|
|
286
|
+
a({ type: String })
|
|
277
287
|
], e.prototype, "icon", 2);
|
|
278
288
|
i([
|
|
279
|
-
|
|
289
|
+
a({ type: String })
|
|
280
290
|
], e.prototype, "hint", 2);
|
|
281
291
|
i([
|
|
282
|
-
|
|
292
|
+
a({ type: String })
|
|
293
|
+
], e.prototype, "hourAriaLabel", 2);
|
|
294
|
+
i([
|
|
295
|
+
a({ type: String })
|
|
296
|
+
], e.prototype, "minuteAriaLabel", 2);
|
|
297
|
+
i([
|
|
298
|
+
a({ type: String })
|
|
299
|
+
], e.prototype, "dayPeriodAriaLabel", 2);
|
|
300
|
+
i([
|
|
301
|
+
a({ type: String, attribute: "hour-format" })
|
|
283
302
|
], e.prototype, "hourFormat", 2);
|
|
284
303
|
i([
|
|
285
|
-
|
|
304
|
+
a({ type: Number, attribute: "minute-step" })
|
|
286
305
|
], e.prototype, "minuteStep", 2);
|
|
287
306
|
i([
|
|
288
|
-
|
|
307
|
+
a({ type: String, attribute: "min-time" })
|
|
289
308
|
], e.prototype, "minTime", 2);
|
|
290
309
|
i([
|
|
291
|
-
|
|
310
|
+
a({ type: String, attribute: "max-time" })
|
|
292
311
|
], e.prototype, "maxTime", 2);
|
|
293
312
|
i([
|
|
294
|
-
|
|
313
|
+
a({ type: String, attribute: "min-time-message" })
|
|
295
314
|
], e.prototype, "minTimeMessage", 2);
|
|
296
315
|
i([
|
|
297
|
-
|
|
316
|
+
a({ type: String, attribute: "max-time-message" })
|
|
298
317
|
], e.prototype, "maxTimeMessage", 2);
|
|
299
318
|
i([
|
|
300
|
-
|
|
319
|
+
a({ type: Array })
|
|
301
320
|
], e.prototype, "value", 2);
|
|
302
321
|
i([
|
|
303
|
-
|
|
322
|
+
a({ type: String, attribute: "range-order-message" })
|
|
304
323
|
], e.prototype, "rangeOrderMessage", 2);
|
|
305
324
|
i([
|
|
306
|
-
|
|
325
|
+
a({ type: String })
|
|
307
326
|
], e.prototype, "removePillAriaLabel", 2);
|
|
308
327
|
i([
|
|
309
|
-
|
|
328
|
+
a({ type: String })
|
|
310
329
|
], e.prototype, "startTimeAriaLabel", 2);
|
|
311
330
|
i([
|
|
312
|
-
|
|
331
|
+
a({ type: String })
|
|
313
332
|
], e.prototype, "endTimeAriaLabel", 2);
|
|
314
333
|
i([
|
|
315
|
-
|
|
334
|
+
a({ type: String })
|
|
316
335
|
], e.prototype, "separator", 2);
|
|
317
336
|
i([
|
|
318
|
-
|
|
337
|
+
a({ type: Boolean, attribute: "allow-custom-time" })
|
|
319
338
|
], e.prototype, "allowCustomTime", 2);
|
|
320
339
|
i([
|
|
321
|
-
|
|
340
|
+
a({ type: Array, attribute: "disabled-ranges" })
|
|
322
341
|
], e.prototype, "disabledRanges", 2);
|
|
323
342
|
i([
|
|
324
|
-
|
|
343
|
+
a({ type: String, attribute: "disabled-range-message" })
|
|
325
344
|
], e.prototype, "disabledRangeMessage", 2);
|
|
326
345
|
e = i([
|
|
327
346
|
g("gui-range-time")
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import { InputWidgetAdapter as
|
|
2
|
-
import "./range-time-input-
|
|
1
|
+
import { InputWidgetAdapter as m, formContext as n, inputContext as o } from "@golemui/lit";
|
|
2
|
+
import "./range-time-input-BP9ZL9O8.js";
|
|
3
3
|
import { consume as h, provide as u } from "@lit/context";
|
|
4
|
-
import { LitElement as c, html as
|
|
5
|
-
import { property as
|
|
4
|
+
import { LitElement as c, html as b } from "lit";
|
|
5
|
+
import { property as g, customElement as D } from "lit/decorators.js";
|
|
6
6
|
import "rxjs";
|
|
7
|
-
var
|
|
7
|
+
var $ = Object.defineProperty, f = Object.getOwnPropertyDescriptor, d = (e, t, s, r) => {
|
|
8
8
|
for (var a = r > 1 ? void 0 : r ? f(t, s) : t, p = e.length - 1, l; p >= 0; p--)
|
|
9
9
|
(l = e[p]) && (a = (r ? l(t, s, a) : l(a)) || a);
|
|
10
|
-
return r && a &&
|
|
10
|
+
return r && a && $(t, s, a), a;
|
|
11
11
|
};
|
|
12
12
|
let i = class extends c {
|
|
13
13
|
constructor() {
|
|
14
|
-
super(...arguments), this.adapter = new
|
|
14
|
+
super(...arguments), this.adapter = new m(), this.subscriptions = [];
|
|
15
15
|
}
|
|
16
16
|
createRenderRoot() {
|
|
17
17
|
return this;
|
|
@@ -27,7 +27,7 @@ let i = class extends c {
|
|
|
27
27
|
);
|
|
28
28
|
}
|
|
29
29
|
render() {
|
|
30
|
-
return super.render(),
|
|
30
|
+
return super.render(), b`
|
|
31
31
|
<gui-range-time
|
|
32
32
|
.uid=${this.widget.uid}
|
|
33
33
|
.label=${this.adapter.templateData.label}
|
|
@@ -40,6 +40,9 @@ let i = class extends c {
|
|
|
40
40
|
?readonly=${this.adapter.templateData.readonly}
|
|
41
41
|
.value=${this.adapter.templateData.value}
|
|
42
42
|
.localeId=${this.adapter.templateData.lang}
|
|
43
|
+
.hourAriaLabel=${this.adapter.templateData.hourAriaLabel}
|
|
44
|
+
.minuteAriaLabel=${this.adapter.templateData.minuteAriaLabel}
|
|
45
|
+
.dayPeriodAriaLabel=${this.adapter.templateData.dayPeriodAriaLabel}
|
|
43
46
|
.separator=${this.adapter.templateData.separator}
|
|
44
47
|
.removePillAriaLabel=${this.adapter.templateData.removePillAriaLabel}
|
|
45
48
|
.startTimeAriaLabel=${this.adapter.templateData.startTimeAriaLabel}
|
|
@@ -67,14 +70,14 @@ let i = class extends c {
|
|
|
67
70
|
}
|
|
68
71
|
};
|
|
69
72
|
d([
|
|
70
|
-
h({ context:
|
|
71
|
-
|
|
73
|
+
h({ context: n }),
|
|
74
|
+
g({ attribute: !1 })
|
|
72
75
|
], i.prototype, "formContext", 2);
|
|
73
76
|
d([
|
|
74
77
|
u({ context: o })
|
|
75
78
|
], i.prototype, "adapter", 2);
|
|
76
79
|
i = d([
|
|
77
|
-
|
|
80
|
+
D("gui-range-time-input")
|
|
78
81
|
], i);
|
|
79
82
|
export {
|
|
80
83
|
i as RangeTimeInputElement
|