@3mo/date-time-fields 0.5.3 → 0.5.5
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/dist/FieldDateTime.js +6 -6
- package/dist/FieldDateTimeBase.d.ts +1 -4
- package/dist/FieldDateTimeBase.d.ts.map +1 -1
- package/dist/FieldDateTimeBase.js +111 -123
- package/dist/FieldDateTimeRange.d.ts +1 -1
- package/dist/FieldDateTimeRange.d.ts.map +1 -1
- package/dist/FieldDateTimeRange.js +34 -34
- package/dist/FieldTime.js +3 -3
- package/dist/FieldToggleableDateTimeRange.js +7 -7
- package/dist/custom-elements.json +5 -5
- package/dist/selection/DateList.d.ts +1 -1
- package/dist/selection/DateList.d.ts.map +1 -1
- package/dist/selection/DateList.js +24 -24
- package/dist/selection/HourList.js +8 -8
- package/dist/selection/MinuteList.js +8 -8
- package/dist/selection/MonthList.js +14 -14
- package/dist/selection/SecondList.js +8 -8
- package/dist/selection/YearList.js +8 -8
- package/dist/selection/calendar/Calendar.d.ts +1 -1
- package/dist/selection/calendar/Calendar.d.ts.map +1 -1
- package/dist/selection/calendar/Calendar.js +72 -72
- package/dist/selection/calendar/SelectableCalendar.d.ts +1 -1
- package/dist/selection/calendar/SelectableCalendar.d.ts.map +1 -1
- package/dist/selection/calendar/SelectableCalendar.js +7 -7
- package/dist/selection/calendar/SelectableRangeCalendar.d.ts +1 -1
- package/dist/selection/calendar/SelectableRangeCalendar.d.ts.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
package/dist/FieldDateTime.js
CHANGED
|
@@ -10,12 +10,12 @@ let FieldDateTime = class FieldDateTime extends FieldDateTimeBase {
|
|
|
10
10
|
return new DateTime().format(this.formatOptions);
|
|
11
11
|
}
|
|
12
12
|
get calendarTemplate() {
|
|
13
|
-
return html `
|
|
14
|
-
<mo-selectable-calendar
|
|
15
|
-
.navigatingValue=${this.navigatingDate}
|
|
16
|
-
.value=${this.selectedDate}
|
|
17
|
-
@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Day)}
|
|
18
|
-
></mo-selectable-calendar>
|
|
13
|
+
return html `
|
|
14
|
+
<mo-selectable-calendar
|
|
15
|
+
.navigatingValue=${this.navigatingDate}
|
|
16
|
+
.value=${this.selectedDate}
|
|
17
|
+
@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Day)}
|
|
18
|
+
></mo-selectable-calendar>
|
|
19
19
|
`;
|
|
20
20
|
}
|
|
21
21
|
handleSelectedDateChange(date, precision) {
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import { HTMLTemplateResult } from '@a11d/lit';
|
|
1
|
+
import { type HTMLTemplateResult } from '@a11d/lit';
|
|
2
2
|
import { InputFieldComponent } from '@3mo/field';
|
|
3
3
|
import type { MaterialIcon } from '@3mo/icon';
|
|
4
|
-
import type { FocusMethod } from '@3mo/focus-controller';
|
|
5
4
|
export declare enum FieldDateTimePrecision {
|
|
6
5
|
Year = "year",
|
|
7
6
|
Month = "month",
|
|
@@ -38,8 +37,6 @@ export declare abstract class FieldDateTimeBase<T> extends InputFieldComponent<T
|
|
|
38
37
|
protected abstract inputValueToValue(value: string): T | undefined;
|
|
39
38
|
protected abstract valueToInputValue(value: T | undefined): string;
|
|
40
39
|
protected get calendarIconButtonTemplate(): HTMLTemplateResult;
|
|
41
|
-
protected handleFocus(bubbled: boolean, method: FocusMethod): void;
|
|
42
|
-
protected handleBlur(bubbled: boolean, method: FocusMethod): void;
|
|
43
40
|
protected get popoverTemplate(): HTMLTemplateResult;
|
|
44
41
|
protected get popoverContentTemplate(): HTMLTemplateResult;
|
|
45
42
|
protected get dateTemplate(): HTMLTemplateResult;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldDateTimeBase.d.ts","sourceRoot":"","sources":["../FieldDateTimeBase.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,
|
|
1
|
+
{"version":3,"file":"FieldDateTimeBase.d.ts","sourceRoot":"","sources":["../FieldDateTimeBase.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,kBAAkB,EAAiD,MAAM,WAAW,CAAA;AAClG,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAE7C,oBAAY,sBAAsB;IACjC,IAAI,SAAS;IACb,KAAK,UAAU;IACf,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,MAAM,WAAW;CACjB;AAcD;;;;;GAKG;AACH,8BAAsB,iBAAiB,CAAC,CAAC,CAAE,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAWrE,IAAI,UAAQ;IACc,YAAY,UAAQ;IACrB,qBAAqB,gDAAe;IACpD,SAAS,yBAAgC;IAErD,OAAO,CAAC,SAAS,CAAC,CAAG;IAErB,SAAS,CAAC,QAAQ,CAAC,sBAAsB,EAAE,YAAY,CAAU;IAEjE,SAAS,CAAC,QAAQ,KAAK,cAAc,IAAI,QAAQ,CAAA;IAEjD,SAAS,CAAC,QAAQ,KAAK,YAAY,IAAI,QAAQ,GAAG,SAAS,CAAA;IAE3D,SAAS,KAAK,aAAa,IAAI,IAAI,CAAC,qBAAqB,CAYxD;IAED,SAAS,CAAC,gBAAgB,CAAC,IAAI,EAAE,QAAQ;IAWzC,SAAS,CAAC,eAAe,CAAC,IAAI,EAAE,QAAQ;cAWrB,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK;IAKpD,cAAuB,QAAQ,YAE9B;IAED,SAAS,KAAK,WAAW,WAExB;IAED,WAAoB,MAAM,kCAmCzB;IAED,cAAuB,QAAQ,uBAK9B;IAED,cAAuB,eAAe,uBAKrC;IAED,cAAuB,aAAa,uBAanC;IAED,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,GAAG,SAAS;uBACtC,iBAAiB,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,GAAG,MAAM;IAE3E,SAAS,KAAK,0BAA0B,uBAOvC;IAED,SAAS,KAAK,eAAe,uBAM5B;IAED,SAAS,KAAK,sBAAsB,uBAOnC;IAED,SAAS,KAAK,YAAY,uBAMzB;IAED,OAAO,KAAK,gBAAgB,GAQ3B;IAED,OAAO,KAAK,iBAAiB,GAQ5B;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,SAAS,CAAC,QAAQ,KAAK,gBAAgB,IAAI,kBAAkB,CAAA;IAE7D,OAAO,KAAK,YAAY,GAcvB;IAED,OAAO,KAAK,gBAAgB,GAQ3B;IAED,OAAO,KAAK,kBAAkB,GAQ7B;IAED,OAAO,KAAK,kBAAkB,GAQ7B;IAED,SAAS,CAAC,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,sBAAsB;CAKpF"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { cache, css, html, live, property, style } from '@a11d/lit';
|
|
2
|
+
import { cache, css, html, live, property, style, bind } from '@a11d/lit';
|
|
3
3
|
import { InputFieldComponent } from '@3mo/field';
|
|
4
4
|
export var FieldDateTimePrecision;
|
|
5
5
|
(function (FieldDateTimePrecision) {
|
|
@@ -80,170 +80,158 @@ export class FieldDateTimeBase extends InputFieldComponent {
|
|
|
80
80
|
return '';
|
|
81
81
|
}
|
|
82
82
|
static get styles() {
|
|
83
|
-
return css `
|
|
84
|
-
${super.styles}
|
|
85
|
-
|
|
86
|
-
:host {
|
|
87
|
-
position: relative;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
mo-popover {
|
|
91
|
-
background: var(--mo-color-background);
|
|
92
|
-
box-shadow: var(--mo-shadow);
|
|
93
|
-
border-radius: var(--mo-border-radius);
|
|
94
|
-
color: var(--mo-color-foreground);
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
#selector {
|
|
98
|
-
min-height: 175px;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
.timezone {
|
|
102
|
-
padding: 3px;
|
|
103
|
-
font-size: small;
|
|
104
|
-
text-align: end;
|
|
105
|
-
font-weight: 500;
|
|
106
|
-
color: var(--mo-color-gray);
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
input::placeholder {
|
|
110
|
-
color: transparent;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
mo-field[active]:not([dense]) input::placeholder {
|
|
114
|
-
color: var(--mo-color-gray);
|
|
115
|
-
}
|
|
83
|
+
return css `
|
|
84
|
+
${super.styles}
|
|
85
|
+
|
|
86
|
+
:host {
|
|
87
|
+
position: relative;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
mo-popover {
|
|
91
|
+
background: var(--mo-color-background);
|
|
92
|
+
box-shadow: var(--mo-shadow);
|
|
93
|
+
border-radius: var(--mo-border-radius);
|
|
94
|
+
color: var(--mo-color-foreground);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
#selector {
|
|
98
|
+
min-height: 175px;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.timezone {
|
|
102
|
+
padding: 3px;
|
|
103
|
+
font-size: small;
|
|
104
|
+
text-align: end;
|
|
105
|
+
font-weight: 500;
|
|
106
|
+
color: var(--mo-color-gray);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
input::placeholder {
|
|
110
|
+
color: transparent;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
mo-field[active]:not([dense]) input::placeholder {
|
|
114
|
+
color: var(--mo-color-gray);
|
|
115
|
+
}
|
|
116
116
|
`;
|
|
117
117
|
}
|
|
118
118
|
get template() {
|
|
119
|
-
return html `
|
|
120
|
-
${super.template}
|
|
121
|
-
${this.popoverTemplate}
|
|
119
|
+
return html `
|
|
120
|
+
${super.template}
|
|
121
|
+
${this.popoverTemplate}
|
|
122
122
|
`;
|
|
123
123
|
}
|
|
124
124
|
get endSlotTemplate() {
|
|
125
|
-
return html `
|
|
126
|
-
${super.endSlotTemplate}
|
|
127
|
-
${this.calendarIconButtonTemplate}
|
|
125
|
+
return html `
|
|
126
|
+
${super.endSlotTemplate}
|
|
127
|
+
${this.calendarIconButtonTemplate}
|
|
128
128
|
`;
|
|
129
129
|
}
|
|
130
130
|
get inputTemplate() {
|
|
131
|
-
return html `
|
|
132
|
-
<input
|
|
133
|
-
part='input'
|
|
134
|
-
?readonly=${this.readonly}
|
|
135
|
-
?required=${this.required}
|
|
136
|
-
?disabled=${this.disabled}
|
|
137
|
-
placeholder=${this.placeholder}
|
|
138
|
-
.value=${live(this.inputStringValue || '')}
|
|
139
|
-
@input=${(e) => this.handleInput(this.inputValueToValue(this.inputElement.value || ''), e)}
|
|
140
|
-
@change=${(e) => this.handleChange(this.inputValueToValue(this.inputElement.value || ''), e)}
|
|
141
|
-
>
|
|
131
|
+
return html `
|
|
132
|
+
<input
|
|
133
|
+
part='input'
|
|
134
|
+
?readonly=${this.readonly}
|
|
135
|
+
?required=${this.required}
|
|
136
|
+
?disabled=${this.disabled}
|
|
137
|
+
placeholder=${this.placeholder}
|
|
138
|
+
.value=${live(this.inputStringValue || '')}
|
|
139
|
+
@input=${(e) => this.handleInput(this.inputValueToValue(this.inputElement.value || ''), e)}
|
|
140
|
+
@change=${(e) => this.handleChange(this.inputValueToValue(this.inputElement.value || ''), e)}
|
|
141
|
+
>
|
|
142
142
|
`;
|
|
143
143
|
}
|
|
144
144
|
get calendarIconButtonTemplate() {
|
|
145
|
-
return this.pickerHidden ? html.nothing : html `
|
|
146
|
-
<mo-icon tabindex='-1' dense slot='end'
|
|
147
|
-
icon=${this.calendarIconButtonIcon}
|
|
148
|
-
${style({ color: this.isActive ? 'var(--mo-color-accent)' : 'var(--mo-color-gray)', fontSize: '22px', marginTop: '2px', cursor: 'pointer', userSelect: 'none' })}
|
|
149
|
-
></mo-icon>
|
|
145
|
+
return this.pickerHidden ? html.nothing : html `
|
|
146
|
+
<mo-icon tabindex='-1' dense slot='end'
|
|
147
|
+
icon=${this.calendarIconButtonIcon}
|
|
148
|
+
${style({ color: this.isActive ? 'var(--mo-color-accent)' : 'var(--mo-color-gray)', fontSize: '22px', marginTop: '2px', cursor: 'pointer', userSelect: 'none' })}
|
|
149
|
+
></mo-icon>
|
|
150
150
|
`;
|
|
151
151
|
}
|
|
152
|
-
handleFocus(bubbled, method) {
|
|
153
|
-
super.handleFocus(bubbled, method);
|
|
154
|
-
if (method === 'pointer') {
|
|
155
|
-
this.open = true;
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
handleBlur(bubbled, method) {
|
|
159
|
-
super.handleBlur(bubbled, method);
|
|
160
|
-
this.open = false;
|
|
161
|
-
}
|
|
162
152
|
get popoverTemplate() {
|
|
163
|
-
return this.pickerHidden ? html.nothing : html `
|
|
164
|
-
<mo-popover tabindex='-1' fixed
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
@openChange=${(e) => this.open = e.detail}
|
|
168
|
-
>${cache(!this.open ? html.nothing : this.popoverContentTemplate)}</mo-popover>
|
|
153
|
+
return this.pickerHidden ? html.nothing : html `
|
|
154
|
+
<mo-popover tabindex='-1' fixed .anchor=${this} ?open=${bind(this, 'open')}>
|
|
155
|
+
${cache(!this.open ? html.nothing : this.popoverContentTemplate)}
|
|
156
|
+
</mo-popover>
|
|
169
157
|
`;
|
|
170
158
|
}
|
|
171
159
|
get popoverContentTemplate() {
|
|
172
|
-
return html `
|
|
173
|
-
<mo-flex id='selector' direction='horizontal' style='height: 100%'>
|
|
174
|
-
${this.dateTemplate}
|
|
175
|
-
${this.timeTemplate}
|
|
176
|
-
</mo-flex>
|
|
160
|
+
return html `
|
|
161
|
+
<mo-flex id='selector' direction='horizontal' style='height: 100%'>
|
|
162
|
+
${this.dateTemplate}
|
|
163
|
+
${this.timeTemplate}
|
|
164
|
+
</mo-flex>
|
|
177
165
|
`;
|
|
178
166
|
}
|
|
179
167
|
get dateTemplate() {
|
|
180
|
-
return html `
|
|
181
|
-
${this.yearListTemplate}
|
|
182
|
-
${this.monthListTemplate}
|
|
183
|
-
${this.dayTemplate}
|
|
168
|
+
return html `
|
|
169
|
+
${this.yearListTemplate}
|
|
170
|
+
${this.monthListTemplate}
|
|
171
|
+
${this.dayTemplate}
|
|
184
172
|
`;
|
|
185
173
|
}
|
|
186
174
|
get yearListTemplate() {
|
|
187
|
-
return html `
|
|
188
|
-
<mo-year-list
|
|
189
|
-
.navigatingValue=${this.navigatingDate}
|
|
190
|
-
.value=${this.selectedDate}
|
|
191
|
-
@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Year)}
|
|
192
|
-
></mo-year-list>
|
|
175
|
+
return html `
|
|
176
|
+
<mo-year-list
|
|
177
|
+
.navigatingValue=${this.navigatingDate}
|
|
178
|
+
.value=${this.selectedDate}
|
|
179
|
+
@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Year)}
|
|
180
|
+
></mo-year-list>
|
|
193
181
|
`;
|
|
194
182
|
}
|
|
195
183
|
get monthListTemplate() {
|
|
196
|
-
return [FieldDateTimePrecision.Year].includes(this.precision) ? html.nothing : html `
|
|
197
|
-
<mo-month-list
|
|
198
|
-
.navigatingValue=${this.navigatingDate}
|
|
199
|
-
.value=${this.selectedDate}
|
|
200
|
-
@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Month)}
|
|
201
|
-
></mo-month-list>
|
|
184
|
+
return [FieldDateTimePrecision.Year].includes(this.precision) ? html.nothing : html `
|
|
185
|
+
<mo-month-list
|
|
186
|
+
.navigatingValue=${this.navigatingDate}
|
|
187
|
+
.value=${this.selectedDate}
|
|
188
|
+
@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Month)}
|
|
189
|
+
></mo-month-list>
|
|
202
190
|
`;
|
|
203
191
|
}
|
|
204
192
|
get dayTemplate() {
|
|
205
193
|
return [FieldDateTimePrecision.Year, FieldDateTimePrecision.Month].includes(this.precision) ? html.nothing : this.calendarTemplate;
|
|
206
194
|
}
|
|
207
195
|
get timeTemplate() {
|
|
208
|
-
return [FieldDateTimePrecision.Year, FieldDateTimePrecision.Month, FieldDateTimePrecision.Day].includes(this.precision) ? html.nothing : html `
|
|
209
|
-
<mo-flex gap='6px'>
|
|
210
|
-
<div class='timezone'>
|
|
211
|
-
${this.navigatingDate?.formatToParts({ timeZoneName: 'long' }).find(x => x.type === 'timeZoneName')?.value}
|
|
212
|
-
(${this.navigatingDate?.formatToParts({ timeZoneName: 'shortOffset' }).find(x => x.type === 'timeZoneName')?.value})
|
|
213
|
-
</div>
|
|
214
|
-
<mo-flex direction='horizontal' style='flex: 1'>
|
|
215
|
-
${this.hourListTemplate}
|
|
216
|
-
${this.minuteListTemplate}
|
|
217
|
-
${this.secondListTemplate}
|
|
218
|
-
</mo-flex>
|
|
219
|
-
</mo-flex>
|
|
196
|
+
return [FieldDateTimePrecision.Year, FieldDateTimePrecision.Month, FieldDateTimePrecision.Day].includes(this.precision) ? html.nothing : html `
|
|
197
|
+
<mo-flex gap='6px'>
|
|
198
|
+
<div class='timezone'>
|
|
199
|
+
${this.navigatingDate?.formatToParts({ timeZoneName: 'long' }).find(x => x.type === 'timeZoneName')?.value}
|
|
200
|
+
(${this.navigatingDate?.formatToParts({ timeZoneName: 'shortOffset' }).find(x => x.type === 'timeZoneName')?.value})
|
|
201
|
+
</div>
|
|
202
|
+
<mo-flex direction='horizontal' style='flex: 1'>
|
|
203
|
+
${this.hourListTemplate}
|
|
204
|
+
${this.minuteListTemplate}
|
|
205
|
+
${this.secondListTemplate}
|
|
206
|
+
</mo-flex>
|
|
207
|
+
</mo-flex>
|
|
220
208
|
`;
|
|
221
209
|
}
|
|
222
210
|
get hourListTemplate() {
|
|
223
|
-
return html `
|
|
224
|
-
<mo-hour-list style='flex: 1'
|
|
225
|
-
.navigatingValue=${this.navigatingDate}
|
|
226
|
-
.value=${this.selectedDate}
|
|
227
|
-
@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Hour)}
|
|
228
|
-
></mo-hour-list>
|
|
211
|
+
return html `
|
|
212
|
+
<mo-hour-list style='flex: 1'
|
|
213
|
+
.navigatingValue=${this.navigatingDate}
|
|
214
|
+
.value=${this.selectedDate}
|
|
215
|
+
@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Hour)}
|
|
216
|
+
></mo-hour-list>
|
|
229
217
|
`;
|
|
230
218
|
}
|
|
231
219
|
get minuteListTemplate() {
|
|
232
|
-
return [FieldDateTimePrecision.Hour].includes(this.precision) ? html.nothing : html `
|
|
233
|
-
<mo-minute-list style='flex: 1'
|
|
234
|
-
.navigatingValue=${this.navigatingDate}
|
|
235
|
-
.value=${this.selectedDate}
|
|
236
|
-
@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Minute)}
|
|
237
|
-
></mo-minute-list>
|
|
220
|
+
return [FieldDateTimePrecision.Hour].includes(this.precision) ? html.nothing : html `
|
|
221
|
+
<mo-minute-list style='flex: 1'
|
|
222
|
+
.navigatingValue=${this.navigatingDate}
|
|
223
|
+
.value=${this.selectedDate}
|
|
224
|
+
@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Minute)}
|
|
225
|
+
></mo-minute-list>
|
|
238
226
|
`;
|
|
239
227
|
}
|
|
240
228
|
get secondListTemplate() {
|
|
241
|
-
return [FieldDateTimePrecision.Hour, FieldDateTimePrecision.Minute].includes(this.precision) ? html.nothing : html `
|
|
242
|
-
<mo-second-list style='flex: 1'
|
|
243
|
-
.navigatingValue=${this.navigatingDate}
|
|
244
|
-
.value=${this.selectedDate}
|
|
245
|
-
@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Second)}
|
|
246
|
-
></mo-second-list>
|
|
229
|
+
return [FieldDateTimePrecision.Hour, FieldDateTimePrecision.Minute].includes(this.precision) ? html.nothing : html `
|
|
230
|
+
<mo-second-list style='flex: 1'
|
|
231
|
+
.navigatingValue=${this.navigatingDate}
|
|
232
|
+
.value=${this.selectedDate}
|
|
233
|
+
@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Second)}
|
|
234
|
+
></mo-second-list>
|
|
247
235
|
`;
|
|
248
236
|
}
|
|
249
237
|
handleSelectedDateChange(date, precision) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldDateTimeRange.d.ts","sourceRoot":"","sources":["../FieldDateTimeRange.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;
|
|
1
|
+
{"version":3,"file":"FieldDateTimeRange.d.ts","sourceRoot":"","sources":["../FieldDateTimeRange.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAC7C,OAAO,EAAE,iBAAiB,IAAI,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAA;AAUvG,aAAK,uBAAuB;IAC3B,KAAK,UAAU;IACf,GAAG,QAAQ;CACX;AAED;;;;;;;;GAQG;AACH,qBACa,kBAAmB,SAAQ,iBAAiB,CAAC,aAAa,GAAG,SAAS,CAAC;IACnF,SAAS,KAAK,cAAc,kDAAwH;IAEpJ,SAAS,KAAK,YAAY,8DAAoG;IAElH,SAAS,0BAAgC;IACzB,KAAK,CAAC,EAAE,aAAa,CAAA;IAEjD,WAAoB,MAAM,kCAkBzB;IAED,UAAmB,sBAAsB,EAAE,YAAY,CAAe;IAEtE,cACuB,WAAW,WAEjC;IAED,SAAS,KAAK,gBAAgB,0CAQ7B;IAED,cAAuB,sBAAsB,0CAK5C;IAED,SAAS,KAAK,sBAAsB,0CAInC;IAED,OAAO,KAAK,sBAAsB,GASjC;IAEQ,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,sBAAsB;IAcnF,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS;cAIzC,iBAAiB,CAAC,KAAK,EAAE,MAAM;CAGlD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,0BAA0B,EAAE,kBAAkB,CAAA;KAC9C;CACD"}
|
|
@@ -31,55 +31,55 @@ let FieldDateTimeRange = class FieldDateTimeRange extends FieldDateTimeBase {
|
|
|
31
31
|
get navigatingDate() { return (this.selection === FieldDateRangeSelection.Start ? this.value?.start : this.value?.end) ?? new DateTime(); }
|
|
32
32
|
get selectedDate() { return this.selection === FieldDateRangeSelection.Start ? this.value?.start : this.value?.end; }
|
|
33
33
|
static get styles() {
|
|
34
|
-
return css `
|
|
35
|
-
${super.styles}
|
|
36
|
-
|
|
37
|
-
mo-tab-bar {
|
|
38
|
-
max-width: 200px;
|
|
39
|
-
place-self: center;
|
|
40
|
-
padding-block: 4px;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
mo-tab {
|
|
44
|
-
--mdc-tab-height: 40px;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
mo-tab:not([active]) {
|
|
48
|
-
opacity: 0.5;
|
|
49
|
-
}
|
|
34
|
+
return css `
|
|
35
|
+
${super.styles}
|
|
36
|
+
|
|
37
|
+
mo-tab-bar {
|
|
38
|
+
max-width: 200px;
|
|
39
|
+
place-self: center;
|
|
40
|
+
padding-block: 4px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
mo-tab {
|
|
44
|
+
--mdc-tab-height: 40px;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
mo-tab:not([active]) {
|
|
48
|
+
opacity: 0.5;
|
|
49
|
+
}
|
|
50
50
|
`;
|
|
51
51
|
}
|
|
52
52
|
get placeholder() {
|
|
53
53
|
return new DateTimeRange(new DateTime().subtract({ years: 1 }), new DateTime()).format(this.formatOptions);
|
|
54
54
|
}
|
|
55
55
|
get calendarTemplate() {
|
|
56
|
-
return html `
|
|
57
|
-
<mo-selectable-range-calendar
|
|
58
|
-
.navigatingValue=${this.navigatingDate}
|
|
59
|
-
.dateRange=${this.value}
|
|
60
|
-
@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Day)}
|
|
61
|
-
></mo-selectable-range-calendar>
|
|
56
|
+
return html `
|
|
57
|
+
<mo-selectable-range-calendar
|
|
58
|
+
.navigatingValue=${this.navigatingDate}
|
|
59
|
+
.dateRange=${this.value}
|
|
60
|
+
@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Day)}
|
|
61
|
+
></mo-selectable-range-calendar>
|
|
62
62
|
`;
|
|
63
63
|
}
|
|
64
64
|
get popoverContentTemplate() {
|
|
65
|
-
return html `
|
|
66
|
-
${this.popoverToolbarTemplate}
|
|
67
|
-
${super.popoverContentTemplate}
|
|
65
|
+
return html `
|
|
66
|
+
${this.popoverToolbarTemplate}
|
|
67
|
+
${super.popoverContentTemplate}
|
|
68
68
|
`;
|
|
69
69
|
}
|
|
70
70
|
get popoverToolbarTemplate() {
|
|
71
|
-
return html `
|
|
72
|
-
${this.startEndTabBarTemplate}
|
|
71
|
+
return html `
|
|
72
|
+
${this.startEndTabBarTemplate}
|
|
73
73
|
`;
|
|
74
74
|
}
|
|
75
75
|
get startEndTabBarTemplate() {
|
|
76
|
-
return html `
|
|
77
|
-
<mo-flex>
|
|
78
|
-
<mo-tab-bar ${bind(this, 'selection')}>
|
|
79
|
-
<mo-tab value=${FieldDateRangeSelection.Start}>${t('Start')}</mo-tab>
|
|
80
|
-
<mo-tab value=${FieldDateRangeSelection.End}>${t('End')}</mo-tab>
|
|
81
|
-
</mo-tab-bar>
|
|
82
|
-
</mo-flex>
|
|
76
|
+
return html `
|
|
77
|
+
<mo-flex>
|
|
78
|
+
<mo-tab-bar ${bind(this, 'selection')}>
|
|
79
|
+
<mo-tab value=${FieldDateRangeSelection.Start}>${t('Start')}</mo-tab>
|
|
80
|
+
<mo-tab value=${FieldDateRangeSelection.End}>${t('End')}</mo-tab>
|
|
81
|
+
</mo-tab-bar>
|
|
82
|
+
</mo-flex>
|
|
83
83
|
`;
|
|
84
84
|
}
|
|
85
85
|
handleSelectedDateChange(date, precision) {
|
package/dist/FieldTime.js
CHANGED
|
@@ -7,9 +7,9 @@ let FieldTime = class FieldTime extends FieldText {
|
|
|
7
7
|
return 'time';
|
|
8
8
|
}
|
|
9
9
|
get startSlotTemplate() {
|
|
10
|
-
return html `
|
|
11
|
-
<mo-icon slot='start' @click=${() => this.focus()} icon='schedule' ${style({ color: 'var(--mo-color-gray)' })}></mo-icon>
|
|
12
|
-
${super.startSlotTemplate}
|
|
10
|
+
return html `
|
|
11
|
+
<mo-icon slot='start' @click=${() => this.focus()} icon='schedule' ${style({ color: 'var(--mo-color-gray)' })}></mo-icon>
|
|
12
|
+
${super.startSlotTemplate}
|
|
13
13
|
`;
|
|
14
14
|
}
|
|
15
15
|
};
|
|
@@ -19,16 +19,16 @@ let FieldToggleableDateTimeRange = class FieldToggleableDateTimeRange extends Fi
|
|
|
19
19
|
get includeTime() { return this.precision === FieldDateTimePrecision.Minute; }
|
|
20
20
|
set includeTime(includeTime) { this.precision = includeTime ? FieldDateTimePrecision.Minute : FieldDateTimePrecision.Day; }
|
|
21
21
|
get popoverToolbarTemplate() {
|
|
22
|
-
return html `
|
|
23
|
-
<mo-grid style='width: calc(100% - 16px); padding-inline: 8px;' columns='* auto'>
|
|
24
|
-
${super.popoverToolbarTemplate}
|
|
25
|
-
${this.toggleTemplate}
|
|
26
|
-
</mo-grid>
|
|
22
|
+
return html `
|
|
23
|
+
<mo-grid style='width: calc(100% - 16px); padding-inline: 8px;' columns='* auto'>
|
|
24
|
+
${super.popoverToolbarTemplate}
|
|
25
|
+
${this.toggleTemplate}
|
|
26
|
+
</mo-grid>
|
|
27
27
|
`;
|
|
28
28
|
}
|
|
29
29
|
get toggleTemplate() {
|
|
30
|
-
return html `
|
|
31
|
-
<mo-switch label=${t('Include time')} ${bind(this, 'includeTime')}></mo-switch>
|
|
30
|
+
return html `
|
|
31
|
+
<mo-switch label=${t('Include time')} ${bind(this, 'includeTime')}></mo-switch>
|
|
32
32
|
`;
|
|
33
33
|
}
|
|
34
34
|
};
|
|
@@ -3560,7 +3560,7 @@
|
|
|
3560
3560
|
{
|
|
3561
3561
|
"name": "intervalController",
|
|
3562
3562
|
"type": "IntervalController",
|
|
3563
|
-
"default": "\"new IntervalController(this, 1000, () => {\\
|
|
3563
|
+
"default": "\"new IntervalController(this, 1000, () => {\\n\\t\\tthis.requestUpdate()\\n\\t\\tif (this.preventIntervalScrolling === false) {\\n\\t\\t\\tthis.scrollIntoSelectedItem()\\n\\t\\t}\\n\\t})\""
|
|
3564
3564
|
}
|
|
3565
3565
|
]
|
|
3566
3566
|
},
|
|
@@ -3603,7 +3603,7 @@
|
|
|
3603
3603
|
{
|
|
3604
3604
|
"name": "intervalController",
|
|
3605
3605
|
"type": "IntervalController",
|
|
3606
|
-
"default": "\"new IntervalController(this, 1000, () => {\\
|
|
3606
|
+
"default": "\"new IntervalController(this, 1000, () => {\\n\\t\\tthis.requestUpdate()\\n\\t\\tif (this.preventIntervalScrolling === false) {\\n\\t\\t\\tthis.scrollIntoSelectedItem()\\n\\t\\t}\\n\\t})\""
|
|
3607
3607
|
}
|
|
3608
3608
|
]
|
|
3609
3609
|
},
|
|
@@ -3646,7 +3646,7 @@
|
|
|
3646
3646
|
{
|
|
3647
3647
|
"name": "intervalController",
|
|
3648
3648
|
"type": "IntervalController",
|
|
3649
|
-
"default": "\"new IntervalController(this, 1000, () => {\\
|
|
3649
|
+
"default": "\"new IntervalController(this, 1000, () => {\\n\\t\\tthis.requestUpdate()\\n\\t\\tif (this.preventIntervalScrolling === false) {\\n\\t\\t\\tthis.scrollIntoSelectedItem()\\n\\t\\t}\\n\\t})\""
|
|
3650
3650
|
}
|
|
3651
3651
|
]
|
|
3652
3652
|
},
|
|
@@ -3689,7 +3689,7 @@
|
|
|
3689
3689
|
{
|
|
3690
3690
|
"name": "intervalController",
|
|
3691
3691
|
"type": "IntervalController",
|
|
3692
|
-
"default": "\"new IntervalController(this, 1000, () => {\\
|
|
3692
|
+
"default": "\"new IntervalController(this, 1000, () => {\\n\\t\\tthis.requestUpdate()\\n\\t\\tif (this.preventIntervalScrolling === false) {\\n\\t\\t\\tthis.scrollIntoSelectedItem()\\n\\t\\t}\\n\\t})\""
|
|
3693
3693
|
}
|
|
3694
3694
|
]
|
|
3695
3695
|
},
|
|
@@ -3732,7 +3732,7 @@
|
|
|
3732
3732
|
{
|
|
3733
3733
|
"name": "intervalController",
|
|
3734
3734
|
"type": "IntervalController",
|
|
3735
|
-
"default": "\"new IntervalController(this, 1000, () => {\\
|
|
3735
|
+
"default": "\"new IntervalController(this, 1000, () => {\\n\\t\\tthis.requestUpdate()\\n\\t\\tif (this.preventIntervalScrolling === false) {\\n\\t\\t\\tthis.scrollIntoSelectedItem()\\n\\t\\t}\\n\\t})\""
|
|
3736
3736
|
}
|
|
3737
3737
|
]
|
|
3738
3738
|
},
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, HTMLTemplateResult } from '@a11d/lit';
|
|
1
|
+
import { Component, type HTMLTemplateResult } from '@a11d/lit';
|
|
2
2
|
import { IntervalController } from '@3mo/interval-controller';
|
|
3
3
|
export declare abstract class DateList extends Component {
|
|
4
4
|
readonly change: EventDispatcher<DateTime>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateList.d.ts","sourceRoot":"","sources":["../../selection/DateList.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAqC,MAAM,WAAW,CAAA;
|
|
1
|
+
{"version":3,"file":"DateList.d.ts","sourceRoot":"","sources":["../../selection/DateList.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,kBAAkB,EAAqC,MAAM,WAAW,CAAA;AACjG,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AAG7D,8BAAsB,QAAS,SAAQ,SAAS;IACtC,QAAQ,CAAC,MAAM,EAAG,eAAe,CAAC,QAAQ,CAAC,CAAA;IAExB,eAAe,EAAG,QAAQ,CAAA;IACiC,KAAK,CAAC,EAAE,QAAQ,CAAA;IAEvG,OAAO,CAAC,wBAAwB,CAAQ;IAExC,IAAI,GAAG,kDAA4B;IAEnC,IAAI,IAAI,WAAe;IAEvB,QAAQ,CAAC,kBAAkB,qBAKzB;IAEF,WAAoB,MAAM,kCAkBzB;IAE2C,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAoB;IACtD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAoB;cAE1E,SAAS;IAI5B,cAAuB,QAAQ,uBAU9B;cAEe,sBAAsB,CAAC,QAAQ,GAAE,cAAyB;IAQ1E,SAAS,CAAC,QAAQ,KAAK,iBAAiB,IAAI,kBAAkB,CAAA;CAC9D"}
|
|
@@ -15,36 +15,36 @@ export class DateList extends Component {
|
|
|
15
15
|
get now() { return new DateTime(); }
|
|
16
16
|
get zero() { return 0; }
|
|
17
17
|
static get styles() {
|
|
18
|
-
return css `
|
|
19
|
-
mo-scroller {
|
|
20
|
-
min-width: 70px;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.pad {
|
|
24
|
-
height: 50px;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
mo-selectable-list-item {
|
|
28
|
-
height: 32px;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
mo-selectable-list-item[data-now] {
|
|
32
|
-
outline: 2px dashed var(--mo-color-gray-transparent);
|
|
33
|
-
}
|
|
18
|
+
return css `
|
|
19
|
+
mo-scroller {
|
|
20
|
+
min-width: 70px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.pad {
|
|
24
|
+
height: 50px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
mo-selectable-list-item {
|
|
28
|
+
height: 32px;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
mo-selectable-list-item[data-now] {
|
|
32
|
+
outline: 2px dashed var(--mo-color-gray-transparent);
|
|
33
|
+
}
|
|
34
34
|
`;
|
|
35
35
|
}
|
|
36
36
|
connected() {
|
|
37
37
|
this.scrollIntoSelectedItem('instant');
|
|
38
38
|
}
|
|
39
39
|
get template() {
|
|
40
|
-
return this.navigatingValue === undefined ? html.nothing : html `
|
|
41
|
-
<mo-scroller @pointerenter=${() => this.preventIntervalScrolling = true} @pointerleave=${() => this.preventIntervalScrolling = false}>
|
|
42
|
-
<mo-selectable-list @change=${() => this.scrollIntoSelectedItem()}>
|
|
43
|
-
<div class='pad'></div>
|
|
44
|
-
${this.listItemsTemplate}
|
|
45
|
-
<div class='pad'></div>
|
|
46
|
-
</mo-selectable-list>
|
|
47
|
-
</mo-scroller>
|
|
40
|
+
return this.navigatingValue === undefined ? html.nothing : html `
|
|
41
|
+
<mo-scroller @pointerenter=${() => this.preventIntervalScrolling = true} @pointerleave=${() => this.preventIntervalScrolling = false}>
|
|
42
|
+
<mo-selectable-list @change=${() => this.scrollIntoSelectedItem()}>
|
|
43
|
+
<div class='pad'></div>
|
|
44
|
+
${this.listItemsTemplate}
|
|
45
|
+
<div class='pad'></div>
|
|
46
|
+
</mo-selectable-list>
|
|
47
|
+
</mo-scroller>
|
|
48
48
|
`;
|
|
49
49
|
}
|
|
50
50
|
async scrollIntoSelectedItem(behavior = 'smooth') {
|
|
@@ -3,14 +3,14 @@ import { component, html, range } from '@a11d/lit';
|
|
|
3
3
|
import { DateList } from './DateList.js';
|
|
4
4
|
let HourList = class HourList extends DateList {
|
|
5
5
|
get listItemsTemplate() {
|
|
6
|
-
return html `
|
|
7
|
-
${[...range(0, this.navigatingValue.hoursInDay)].map(hour => html `
|
|
8
|
-
<mo-selectable-list-item
|
|
9
|
-
?selected=${this.value?.hour === hour}
|
|
10
|
-
?data-now=${this.now.hour === hour}
|
|
11
|
-
@change=${(e) => !e.selected ? void 0 : this.change.dispatch((this.value ?? new DateTime).with({ hour }))}
|
|
12
|
-
>${hour.format().padStart(2, this.zero.format())}</mo-selectable-list-item>
|
|
13
|
-
`)}
|
|
6
|
+
return html `
|
|
7
|
+
${[...range(0, this.navigatingValue.hoursInDay)].map(hour => html `
|
|
8
|
+
<mo-selectable-list-item
|
|
9
|
+
?selected=${this.value?.hour === hour}
|
|
10
|
+
?data-now=${this.now.hour === hour}
|
|
11
|
+
@change=${(e) => !e.selected ? void 0 : this.change.dispatch((this.value ?? new DateTime).with({ hour }))}
|
|
12
|
+
>${hour.format().padStart(2, this.zero.format())}</mo-selectable-list-item>
|
|
13
|
+
`)}
|
|
14
14
|
`;
|
|
15
15
|
}
|
|
16
16
|
};
|
|
@@ -3,14 +3,14 @@ import { component, html, range } from '@a11d/lit';
|
|
|
3
3
|
import { DateList } from './DateList.js';
|
|
4
4
|
let MinuteList = class MinuteList extends DateList {
|
|
5
5
|
get listItemsTemplate() {
|
|
6
|
-
return html `
|
|
7
|
-
${[...range(0, 60)].map(minute => html `
|
|
8
|
-
<mo-selectable-list-item
|
|
9
|
-
?selected=${this.value?.minute === minute}
|
|
10
|
-
?data-now=${this.now.minute === minute}
|
|
11
|
-
@change=${(e) => !e.selected ? void 0 : this.change.dispatch((this.value ?? new DateTime).with({ minute }))}
|
|
12
|
-
>${minute.format().padStart(2, this.zero.format())}</mo-selectable-list-item>
|
|
13
|
-
`)}
|
|
6
|
+
return html `
|
|
7
|
+
${[...range(0, 60)].map(minute => html `
|
|
8
|
+
<mo-selectable-list-item
|
|
9
|
+
?selected=${this.value?.minute === minute}
|
|
10
|
+
?data-now=${this.now.minute === minute}
|
|
11
|
+
@change=${(e) => !e.selected ? void 0 : this.change.dispatch((this.value ?? new DateTime).with({ minute }))}
|
|
12
|
+
>${minute.format().padStart(2, this.zero.format())}</mo-selectable-list-item>
|
|
13
|
+
`)}
|
|
14
14
|
`;
|
|
15
15
|
}
|
|
16
16
|
};
|