@3mo/date-time-fields 0.14.3 → 0.15.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/dist/FieldDateTime.js +13 -13
- package/dist/FieldDateTimeBase.js +140 -140
- package/dist/FieldDateTimeRange.d.ts.map +1 -1
- package/dist/FieldDateTimeRange.js +46 -42
- package/dist/selection/Calendar.js +245 -245
- package/dist/selection/CalendarDatesController.d.ts +8 -2
- package/dist/selection/CalendarDatesController.d.ts.map +1 -1
- package/dist/selection/CalendarDatesController.js +35 -6
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +49 -49
package/dist/FieldDateTime.js
CHANGED
|
@@ -69,19 +69,19 @@ let FieldDateTime = class FieldDateTime extends FieldDateTimeBase {
|
|
|
69
69
|
return new DateTimeRange(this.selectedDate, this.selectedDate);
|
|
70
70
|
}
|
|
71
71
|
get presetsTemplate() {
|
|
72
|
-
return join([this.precision < FieldDateTimePrecision.Day ? undefined : html `
|
|
73
|
-
${this.getPresetTemplate(t('Today'), () => new DateTime().dayStart)}
|
|
74
|
-
${this.getPresetTemplate(t('Yesterday'), () => new DateTime().subtract({ days: 1 }).dayStart)}
|
|
75
|
-
${this.getPresetTemplate(t('Tomorrow'), () => new DateTime().add({ days: 1 }).dayStart)}
|
|
76
|
-
<mo-line></mo-line>
|
|
77
|
-
${this.getPresetTemplate(t('Week start'), () => new DateTime().weekStart.dayStart)}
|
|
78
|
-
${this.getPresetTemplate(t('Week end'), () => new DateTime().weekEnd.dayEnd)}
|
|
79
|
-
<mo-line></mo-line>
|
|
80
|
-
${this.getPresetTemplate(t('Month start'), () => new DateTime().monthStart.dayStart)}
|
|
81
|
-
${this.getPresetTemplate(t('Month end'), () => new DateTime().monthEnd.dayEnd)}
|
|
82
|
-
<mo-line></mo-line>
|
|
83
|
-
${this.getPresetTemplate(t('Year start'), () => new DateTime().yearStart.dayStart)}
|
|
84
|
-
${this.getPresetTemplate(t('Year end'), () => new DateTime().yearEnd.dayEnd)}
|
|
72
|
+
return join([this.precision < FieldDateTimePrecision.Day ? undefined : html `
|
|
73
|
+
${this.getPresetTemplate(t('Today'), () => new DateTime().dayStart)}
|
|
74
|
+
${this.getPresetTemplate(t('Yesterday'), () => new DateTime().subtract({ days: 1 }).dayStart)}
|
|
75
|
+
${this.getPresetTemplate(t('Tomorrow'), () => new DateTime().add({ days: 1 }).dayStart)}
|
|
76
|
+
<mo-line></mo-line>
|
|
77
|
+
${this.getPresetTemplate(t('Week start'), () => new DateTime().weekStart.dayStart)}
|
|
78
|
+
${this.getPresetTemplate(t('Week end'), () => new DateTime().weekEnd.dayEnd)}
|
|
79
|
+
<mo-line></mo-line>
|
|
80
|
+
${this.getPresetTemplate(t('Month start'), () => new DateTime().monthStart.dayStart)}
|
|
81
|
+
${this.getPresetTemplate(t('Month end'), () => new DateTime().monthEnd.dayEnd)}
|
|
82
|
+
<mo-line></mo-line>
|
|
83
|
+
${this.getPresetTemplate(t('Year start'), () => new DateTime().yearStart.dayStart)}
|
|
84
|
+
${this.getPresetTemplate(t('Year end'), () => new DateTime().yearEnd.dayEnd)}
|
|
85
85
|
`].filter(Boolean), html `<mo-line></mo-line>`);
|
|
86
86
|
}
|
|
87
87
|
handleSelectedDateChange(date, precision) {
|
|
@@ -63,86 +63,86 @@ export class FieldDateTimeBase extends InputFieldComponent {
|
|
|
63
63
|
return '';
|
|
64
64
|
}
|
|
65
65
|
static get styles() {
|
|
66
|
-
return css `
|
|
67
|
-
${super.styles}
|
|
68
|
-
|
|
69
|
-
:host {
|
|
70
|
-
position: relative;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
:host([disabled]) {
|
|
74
|
-
pointer-events: none;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
mo-field {
|
|
78
|
-
anchor-name: --mo-field-date-time;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
mo-popover {
|
|
82
|
-
position-anchor: --mo-field-date-time;
|
|
83
|
-
position-visibility: anchors-visible;
|
|
84
|
-
background: var(--mo-color-background);
|
|
85
|
-
box-shadow: var(--mo-shadow);
|
|
86
|
-
border-radius: var(--mo-border-radius);
|
|
87
|
-
color: var(--mo-color-foreground);
|
|
88
|
-
font-size: 0.875em;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
#selector {
|
|
92
|
-
height: clamp(175px, 100vh, 450px);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.timezone {
|
|
96
|
-
padding: 0.4rem;
|
|
97
|
-
font-size: small;
|
|
98
|
-
text-align: center;
|
|
99
|
-
font-weight: 500;
|
|
100
|
-
color: var(--mo-color-gray);
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
input::placeholder {
|
|
104
|
-
color: transparent;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
mo-field[active]:not([dense]) input::placeholder {
|
|
108
|
-
color: var(--mo-color-gray);
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
#presets {
|
|
112
|
-
background-color: var(--mo-color-transparent-gray-1);
|
|
113
|
-
mo-list-item {
|
|
114
|
-
padding-block: 0.5rem;
|
|
115
|
-
min-height: auto;
|
|
116
|
-
opacity: 0.9;
|
|
117
|
-
}
|
|
118
|
-
}
|
|
66
|
+
return css `
|
|
67
|
+
${super.styles}
|
|
68
|
+
|
|
69
|
+
:host {
|
|
70
|
+
position: relative;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
:host([disabled]) {
|
|
74
|
+
pointer-events: none;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
mo-field {
|
|
78
|
+
anchor-name: --mo-field-date-time;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
mo-popover {
|
|
82
|
+
position-anchor: --mo-field-date-time;
|
|
83
|
+
position-visibility: anchors-visible;
|
|
84
|
+
background: var(--mo-color-background);
|
|
85
|
+
box-shadow: var(--mo-shadow);
|
|
86
|
+
border-radius: var(--mo-border-radius);
|
|
87
|
+
color: var(--mo-color-foreground);
|
|
88
|
+
font-size: 0.875em;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
#selector {
|
|
92
|
+
height: clamp(175px, 100vh, 450px);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.timezone {
|
|
96
|
+
padding: 0.4rem;
|
|
97
|
+
font-size: small;
|
|
98
|
+
text-align: center;
|
|
99
|
+
font-weight: 500;
|
|
100
|
+
color: var(--mo-color-gray);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
input::placeholder {
|
|
104
|
+
color: transparent;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
mo-field[active]:not([dense]) input::placeholder {
|
|
108
|
+
color: var(--mo-color-gray);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
#presets {
|
|
112
|
+
background-color: var(--mo-color-transparent-gray-1);
|
|
113
|
+
mo-list-item {
|
|
114
|
+
padding-block: 0.5rem;
|
|
115
|
+
min-height: auto;
|
|
116
|
+
opacity: 0.9;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
119
|
`;
|
|
120
120
|
}
|
|
121
121
|
get template() {
|
|
122
|
-
return html `
|
|
123
|
-
${super.template}
|
|
124
|
-
${this.popoverTemplate}
|
|
122
|
+
return html `
|
|
123
|
+
${super.template}
|
|
124
|
+
${this.popoverTemplate}
|
|
125
125
|
`;
|
|
126
126
|
}
|
|
127
127
|
get endSlotTemplate() {
|
|
128
|
-
return html `
|
|
129
|
-
${super.endSlotTemplate}
|
|
130
|
-
${this.clearIconButtonTemplate}
|
|
131
|
-
${this.calendarIconButtonTemplate}
|
|
128
|
+
return html `
|
|
129
|
+
${super.endSlotTemplate}
|
|
130
|
+
${this.clearIconButtonTemplate}
|
|
131
|
+
${this.calendarIconButtonTemplate}
|
|
132
132
|
`;
|
|
133
133
|
}
|
|
134
134
|
get inputTemplate() {
|
|
135
|
-
return html `
|
|
136
|
-
<input
|
|
137
|
-
part='input'
|
|
138
|
-
?readonly=${this.readonly}
|
|
139
|
-
?required=${this.required}
|
|
140
|
-
?disabled=${this.disabled}
|
|
141
|
-
placeholder=${this.placeholder}
|
|
142
|
-
.value=${live(this.inputStringValue || '')}
|
|
143
|
-
@input=${(e) => this.handleInput(this.inputValueToValue(this.inputElement.value || ''), e)}
|
|
144
|
-
@change=${(e) => this.handleChange(this.inputValueToValue(this.inputElement.value || ''), e)}
|
|
145
|
-
>
|
|
135
|
+
return html `
|
|
136
|
+
<input
|
|
137
|
+
part='input'
|
|
138
|
+
?readonly=${this.readonly}
|
|
139
|
+
?required=${this.required}
|
|
140
|
+
?disabled=${this.disabled}
|
|
141
|
+
placeholder=${this.placeholder}
|
|
142
|
+
.value=${live(this.inputStringValue || '')}
|
|
143
|
+
@input=${(e) => this.handleInput(this.inputValueToValue(this.inputElement.value || ''), e)}
|
|
144
|
+
@change=${(e) => this.handleChange(this.inputValueToValue(this.inputElement.value || ''), e)}
|
|
145
|
+
>
|
|
146
146
|
`;
|
|
147
147
|
}
|
|
148
148
|
get clearIconButtonTemplate() {
|
|
@@ -151,46 +151,46 @@ export class FieldDateTimeBase extends InputFieldComponent {
|
|
|
151
151
|
this.handleInput(undefined);
|
|
152
152
|
this.handleChange(undefined);
|
|
153
153
|
};
|
|
154
|
-
return !this.value || !this.focusController.focused ? html.nothing : html `
|
|
155
|
-
<mo-icon-button tabindex='-1' dense slot='end' icon='cancel'
|
|
156
|
-
@click=${clear}
|
|
157
|
-
${style({ color: 'var(--mo-color-gray)', fontSize: '20px', cursor: 'pointer', userSelect: 'none', marginBlockStart: '2.75px', marginInlineEnd: '5px' })}
|
|
158
|
-
></mo-icon-button>
|
|
154
|
+
return !this.value || !this.focusController.focused ? html.nothing : html `
|
|
155
|
+
<mo-icon-button tabindex='-1' dense slot='end' icon='cancel'
|
|
156
|
+
@click=${clear}
|
|
157
|
+
${style({ color: 'var(--mo-color-gray)', fontSize: '20px', cursor: 'pointer', userSelect: 'none', marginBlockStart: '2.75px', marginInlineEnd: '5px' })}
|
|
158
|
+
></mo-icon-button>
|
|
159
159
|
`;
|
|
160
160
|
}
|
|
161
161
|
get calendarIconButtonTemplate() {
|
|
162
|
-
return this.pickerHidden ? html.nothing : html `
|
|
163
|
-
<mo-icon tabindex='-1' slot='end'
|
|
164
|
-
icon=${this.calendarIconButtonIcon}
|
|
165
|
-
${style({ color: this.isActive ? 'var(--mo-color-accent)' : 'var(--mo-color-gray)', fontSize: '22px', marginBlockStart: '2px', cursor: 'pointer', userSelect: 'none' })}
|
|
166
|
-
></mo-icon>
|
|
162
|
+
return this.pickerHidden ? html.nothing : html `
|
|
163
|
+
<mo-icon tabindex='-1' slot='end'
|
|
164
|
+
icon=${this.calendarIconButtonIcon}
|
|
165
|
+
${style({ color: this.isActive ? 'var(--mo-color-accent)' : 'var(--mo-color-gray)', fontSize: '22px', marginBlockStart: '2px', cursor: 'pointer', userSelect: 'none' })}
|
|
166
|
+
></mo-icon>
|
|
167
167
|
`;
|
|
168
168
|
}
|
|
169
169
|
get popoverTemplate() {
|
|
170
|
-
return this.pickerHidden ? html.nothing : html `
|
|
171
|
-
<mo-popover tabindex='-1'
|
|
172
|
-
.anchor=${this} target='field'
|
|
173
|
-
?open=${bind(this, 'open', { sourceUpdated: () => setTimeout(() => this.calendar?.setNavigatingValue(this.navigationDate)) })}
|
|
174
|
-
>
|
|
175
|
-
${cache(!this.open ? html.nothing : html `
|
|
176
|
-
<mo-flex direction='horizontal'>
|
|
177
|
-
${this.presetsTemplate === html.nothing ? html.nothing : html `
|
|
178
|
-
<mo-flex id='presets'>
|
|
179
|
-
${this.presetsTemplate}
|
|
180
|
-
</mo-flex>
|
|
181
|
-
`}
|
|
182
|
-
${this.popoverSelectionTemplate}
|
|
183
|
-
</mo-flex>
|
|
184
|
-
`)}
|
|
185
|
-
</mo-popover>
|
|
170
|
+
return this.pickerHidden ? html.nothing : html `
|
|
171
|
+
<mo-popover tabindex='-1'
|
|
172
|
+
.anchor=${this} target='field'
|
|
173
|
+
?open=${bind(this, 'open', { sourceUpdated: () => setTimeout(() => this.calendar?.setNavigatingValue(this.navigationDate)) })}
|
|
174
|
+
>
|
|
175
|
+
${cache(!this.open ? html.nothing : html `
|
|
176
|
+
<mo-flex direction='horizontal'>
|
|
177
|
+
${this.presetsTemplate === html.nothing ? html.nothing : html `
|
|
178
|
+
<mo-flex id='presets'>
|
|
179
|
+
${this.presetsTemplate}
|
|
180
|
+
</mo-flex>
|
|
181
|
+
`}
|
|
182
|
+
${this.popoverSelectionTemplate}
|
|
183
|
+
</mo-flex>
|
|
184
|
+
`)}
|
|
185
|
+
</mo-popover>
|
|
186
186
|
`;
|
|
187
187
|
}
|
|
188
188
|
get popoverSelectionTemplate() {
|
|
189
|
-
return html `
|
|
190
|
-
<mo-flex id='selector' direction='horizontal' style='flex: 1'>
|
|
191
|
-
${this.dateTemplate}
|
|
192
|
-
${this.timeTemplate}
|
|
193
|
-
</mo-flex>
|
|
189
|
+
return html `
|
|
190
|
+
<mo-flex id='selector' direction='horizontal' style='flex: 1'>
|
|
191
|
+
${this.dateTemplate}
|
|
192
|
+
${this.timeTemplate}
|
|
193
|
+
</mo-flex>
|
|
194
194
|
`;
|
|
195
195
|
}
|
|
196
196
|
getPresetTemplate(label, value) {
|
|
@@ -217,56 +217,56 @@ export class FieldDateTimeBase extends InputFieldComponent {
|
|
|
217
217
|
return this.calendarTemplate;
|
|
218
218
|
}
|
|
219
219
|
get calendarTemplate() {
|
|
220
|
-
return html `
|
|
221
|
-
<mo-calendar
|
|
222
|
-
.precision=${this.precision > FieldDateTimePrecision.Day ? FieldDateTimePrecision.Day : this.precision}
|
|
223
|
-
.value=${this.calendarValue}
|
|
224
|
-
.min=${this.min}
|
|
225
|
-
.max=${this.max}
|
|
226
|
-
.dateDisabled=${this.dateDisabled}
|
|
227
|
-
@dateClick=${(e) => this.handleSelectedDateChange(e.detail, this.precision)}
|
|
228
|
-
></mo-calendar>
|
|
220
|
+
return html `
|
|
221
|
+
<mo-calendar
|
|
222
|
+
.precision=${this.precision > FieldDateTimePrecision.Day ? FieldDateTimePrecision.Day : this.precision}
|
|
223
|
+
.value=${this.calendarValue}
|
|
224
|
+
.min=${this.min}
|
|
225
|
+
.max=${this.max}
|
|
226
|
+
.dateDisabled=${this.dateDisabled}
|
|
227
|
+
@dateClick=${(e) => this.handleSelectedDateChange(e.detail, this.precision)}
|
|
228
|
+
></mo-calendar>
|
|
229
229
|
`;
|
|
230
230
|
}
|
|
231
231
|
get timeTemplate() {
|
|
232
|
-
return this.precision <= FieldDateTimePrecision.Day ? html.nothing : html `
|
|
233
|
-
<mo-flex gap='0.5rem' style='border-inline-start: 1px solid var(--mo-color-transparent-gray-3); min-height: 0'>
|
|
234
|
-
<mo-flex direction='horizontal' style='flex: 1; min-height: 0'>
|
|
235
|
-
${this.hourListTemplate}
|
|
236
|
-
${this.minuteListTemplate}
|
|
237
|
-
${this.secondListTemplate}
|
|
238
|
-
</mo-flex>
|
|
239
|
-
<div class='timezone' title=${ifDefined(this.navigationDate?.formatToParts({ timeZoneName: 'long' }).find(x => x.type === 'timeZoneName')?.value)}>
|
|
240
|
-
${this.navigationDate?.formatToParts({ timeZoneName: 'shortOffset' }).find(x => x.type === 'timeZoneName')?.value}
|
|
241
|
-
</div>
|
|
242
|
-
</mo-flex>
|
|
232
|
+
return this.precision <= FieldDateTimePrecision.Day ? html.nothing : html `
|
|
233
|
+
<mo-flex gap='0.5rem' style='border-inline-start: 1px solid var(--mo-color-transparent-gray-3); min-height: 0'>
|
|
234
|
+
<mo-flex direction='horizontal' style='flex: 1; min-height: 0'>
|
|
235
|
+
${this.hourListTemplate}
|
|
236
|
+
${this.minuteListTemplate}
|
|
237
|
+
${this.secondListTemplate}
|
|
238
|
+
</mo-flex>
|
|
239
|
+
<div class='timezone' title=${ifDefined(this.navigationDate?.formatToParts({ timeZoneName: 'long' }).find(x => x.type === 'timeZoneName')?.value)}>
|
|
240
|
+
${this.navigationDate?.formatToParts({ timeZoneName: 'shortOffset' }).find(x => x.type === 'timeZoneName')?.value}
|
|
241
|
+
</div>
|
|
242
|
+
</mo-flex>
|
|
243
243
|
`;
|
|
244
244
|
}
|
|
245
245
|
get hourListTemplate() {
|
|
246
|
-
return this.precision < FieldDateTimePrecision.Hour ? html.nothing : html `
|
|
247
|
-
<mo-hour-list style='flex: 1'
|
|
248
|
-
.navigationDate=${bind(this, 'navigationDate')}
|
|
249
|
-
.value=${this.selectedDate}
|
|
250
|
-
@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Hour)}
|
|
251
|
-
></mo-hour-list>
|
|
246
|
+
return this.precision < FieldDateTimePrecision.Hour ? html.nothing : html `
|
|
247
|
+
<mo-hour-list style='flex: 1'
|
|
248
|
+
.navigationDate=${bind(this, 'navigationDate')}
|
|
249
|
+
.value=${this.selectedDate}
|
|
250
|
+
@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Hour)}
|
|
251
|
+
></mo-hour-list>
|
|
252
252
|
`;
|
|
253
253
|
}
|
|
254
254
|
get minuteListTemplate() {
|
|
255
|
-
return this.precision < FieldDateTimePrecision.Minute ? html.nothing : html `
|
|
256
|
-
<mo-minute-list style='flex: 1'
|
|
257
|
-
.navigationDate=${bind(this, 'navigationDate')}
|
|
258
|
-
.value=${this.selectedDate}
|
|
259
|
-
@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Minute)}
|
|
260
|
-
></mo-minute-list>
|
|
255
|
+
return this.precision < FieldDateTimePrecision.Minute ? html.nothing : html `
|
|
256
|
+
<mo-minute-list style='flex: 1'
|
|
257
|
+
.navigationDate=${bind(this, 'navigationDate')}
|
|
258
|
+
.value=${this.selectedDate}
|
|
259
|
+
@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Minute)}
|
|
260
|
+
></mo-minute-list>
|
|
261
261
|
`;
|
|
262
262
|
}
|
|
263
263
|
get secondListTemplate() {
|
|
264
|
-
return this.precision < FieldDateTimePrecision.Second ? html.nothing : html `
|
|
265
|
-
<mo-second-list style='flex: 1'
|
|
266
|
-
.navigationDate=${bind(this, 'navigationDate')}
|
|
267
|
-
.value=${this.selectedDate}
|
|
268
|
-
@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Second)}
|
|
269
|
-
></mo-second-list>
|
|
264
|
+
return this.precision < FieldDateTimePrecision.Second ? html.nothing : html `
|
|
265
|
+
<mo-second-list style='flex: 1'
|
|
266
|
+
.navigationDate=${bind(this, 'navigationDate')}
|
|
267
|
+
.value=${this.selectedDate}
|
|
268
|
+
@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Second)}
|
|
269
|
+
></mo-second-list>
|
|
270
270
|
`;
|
|
271
271
|
}
|
|
272
272
|
handleSelectedDateChange(date, precision) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldDateTimeRange.d.ts","sourceRoot":"","sources":["../FieldDateTimeRange.ts"],"names":[],"mappings":"AACA,OAAO,EAA8C,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAC/F,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAG7C,OAAO,EAAE,iBAAiB,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC/E,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAmBpE,aAAK,uBAAuB;IAC3B,KAAK,UAAU;IACf,GAAG,QAAQ;CACX;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,kBAAmB,SAAQ,iBAAiB,CAAC,aAAa,GAAG,SAAS,CAAC;IACnF,SAAS,KAAK,YAAY,8DAAoG;IAElH,SAAS,0BAAgC;IACzB,KAAK,CAAC,EAAE,aAAa,CAAA;IAEjD,SAAS,CAAC,mBAAmB;IAM7B,cAAuB,MAAM,WAE5B;IAED,cAAuB,eAAe,IAoBuB,kBAAkB,CAC9E;IAED,WAAoB,MAAM,
|
|
1
|
+
{"version":3,"file":"FieldDateTimeRange.d.ts","sourceRoot":"","sources":["../FieldDateTimeRange.ts"],"names":[],"mappings":"AACA,OAAO,EAA8C,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAC/F,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAG7C,OAAO,EAAE,iBAAiB,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC/E,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAmBpE,aAAK,uBAAuB;IAC3B,KAAK,UAAU;IACf,GAAG,QAAQ;CACX;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,kBAAmB,SAAQ,iBAAiB,CAAC,aAAa,GAAG,SAAS,CAAC;IACnF,SAAS,KAAK,YAAY,8DAAoG;IAElH,SAAS,0BAAgC;IACzB,KAAK,CAAC,EAAE,aAAa,CAAA;IAEjD,SAAS,CAAC,mBAAmB;IAM7B,cAAuB,MAAM,WAE5B;IAED,cAAuB,eAAe,IAoBuB,kBAAkB,CAC9E;IAED,WAAoB,MAAM,kCAmBzB;IAED,UAAmB,sBAAsB,EAAE,YAAY,CAAe;IAEtE,cACuB,WAAW,WAEjC;IAED,SAAS,KAAK,aAAa,wEAE1B;IAED,cAAuB,wBAAwB,uBAO9C;IAED,SAAS,KAAK,sBAAsB,uBAInC;IAED,OAAO,KAAK,sBAAsB,GASjC;IAEQ,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,sBAAsB;IAiBnF,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"}
|
|
@@ -62,40 +62,44 @@ let FieldDateTimeRange = class FieldDateTimeRange extends FieldDateTimeBase {
|
|
|
62
62
|
}
|
|
63
63
|
get presetsTemplate() {
|
|
64
64
|
return join([
|
|
65
|
-
this.precision < FieldDateTimePrecision.Day ? undefined : html `
|
|
66
|
-
${this.getPresetTemplate(t('Last week'), () => new DateTimeRange(new DateTime().add({ weeks: -1 }).weekStart.dayStart, new DateTime().add({ weeks: -1 }).weekEnd.dayEnd))}
|
|
67
|
-
${this.getPresetTemplate(t('This week'), () => new DateTimeRange(new DateTime().weekStart.dayStart, new DateTime().weekEnd.dayEnd))}
|
|
68
|
-
${this.getPresetTemplate(t('Next week'), () => new DateTimeRange(new DateTime().add({ weeks: 1 }).weekStart.dayStart, new DateTime().add({ weeks: 1 }).weekEnd.dayEnd))}
|
|
69
|
-
${this.getPresetTemplate(t('Last ${count:number} days', { count: 7 }), () => new DateTimeRange(new DateTime().subtract({ days: 6 }).dayStart, new DateTime().dayEnd))}
|
|
70
|
-
${this.getPresetTemplate(t('Last ${count:number} days', { count: 30 }), () => new DateTimeRange(new DateTime().subtract({ days: 29 }).dayStart, new DateTime().dayEnd))}
|
|
71
|
-
${this.getPresetTemplate(t('Last ${count:number} days', { count: 90 }), () => new DateTimeRange(new DateTime().subtract({ days: 89 }).dayStart, new DateTime().dayEnd))}
|
|
65
|
+
this.precision < FieldDateTimePrecision.Day ? undefined : html `
|
|
66
|
+
${this.getPresetTemplate(t('Last week'), () => new DateTimeRange(new DateTime().add({ weeks: -1 }).weekStart.dayStart, new DateTime().add({ weeks: -1 }).weekEnd.dayEnd))}
|
|
67
|
+
${this.getPresetTemplate(t('This week'), () => new DateTimeRange(new DateTime().weekStart.dayStart, new DateTime().weekEnd.dayEnd))}
|
|
68
|
+
${this.getPresetTemplate(t('Next week'), () => new DateTimeRange(new DateTime().add({ weeks: 1 }).weekStart.dayStart, new DateTime().add({ weeks: 1 }).weekEnd.dayEnd))}
|
|
69
|
+
${this.getPresetTemplate(t('Last ${count:number} days', { count: 7 }), () => new DateTimeRange(new DateTime().subtract({ days: 6 }).dayStart, new DateTime().dayEnd))}
|
|
70
|
+
${this.getPresetTemplate(t('Last ${count:number} days', { count: 30 }), () => new DateTimeRange(new DateTime().subtract({ days: 29 }).dayStart, new DateTime().dayEnd))}
|
|
71
|
+
${this.getPresetTemplate(t('Last ${count:number} days', { count: 90 }), () => new DateTimeRange(new DateTime().subtract({ days: 89 }).dayStart, new DateTime().dayEnd))}
|
|
72
72
|
`,
|
|
73
|
-
this.precision < FieldDateTimePrecision.Month ? undefined : html `
|
|
74
|
-
${this.getPresetTemplate(t('Last month'), () => new DateTimeRange(new DateTime().add({ months: -1 }).monthStart.dayStart, new DateTime().add({ months: -1 }).monthEnd.dayEnd))}
|
|
75
|
-
${this.getPresetTemplate(t('This month'), () => new DateTimeRange(new DateTime().monthStart.dayStart, new DateTime().monthEnd.dayEnd))}
|
|
76
|
-
${this.getPresetTemplate(t('Next month'), () => new DateTimeRange(new DateTime().add({ months: 1 }).monthStart.dayStart, new DateTime().add({ months: 1 }).monthEnd.dayEnd))}
|
|
73
|
+
this.precision < FieldDateTimePrecision.Month ? undefined : html `
|
|
74
|
+
${this.getPresetTemplate(t('Last month'), () => new DateTimeRange(new DateTime().add({ months: -1 }).monthStart.dayStart, new DateTime().add({ months: -1 }).monthEnd.dayEnd))}
|
|
75
|
+
${this.getPresetTemplate(t('This month'), () => new DateTimeRange(new DateTime().monthStart.dayStart, new DateTime().monthEnd.dayEnd))}
|
|
76
|
+
${this.getPresetTemplate(t('Next month'), () => new DateTimeRange(new DateTime().add({ months: 1 }).monthStart.dayStart, new DateTime().add({ months: 1 }).monthEnd.dayEnd))}
|
|
77
77
|
`,
|
|
78
|
-
this.precision < FieldDateTimePrecision.Year ? undefined : html `
|
|
79
|
-
${this.getPresetTemplate(t('Last year'), () => new DateTimeRange(new DateTime().add({ years: -1 }).yearStart.dayStart, new DateTime().add({ years: -1 }).yearEnd.dayEnd))}
|
|
80
|
-
${this.getPresetTemplate(t('This year'), () => new DateTimeRange(new DateTime().yearStart.dayStart, new DateTime().yearEnd.dayEnd))}
|
|
81
|
-
${this.getPresetTemplate(t('Next year'), () => new DateTimeRange(new DateTime().add({ years: 1 }).yearStart.dayStart, new DateTime().add({ years: 1 }).yearEnd.dayEnd))}
|
|
78
|
+
this.precision < FieldDateTimePrecision.Year ? undefined : html `
|
|
79
|
+
${this.getPresetTemplate(t('Last year'), () => new DateTimeRange(new DateTime().add({ years: -1 }).yearStart.dayStart, new DateTime().add({ years: -1 }).yearEnd.dayEnd))}
|
|
80
|
+
${this.getPresetTemplate(t('This year'), () => new DateTimeRange(new DateTime().yearStart.dayStart, new DateTime().yearEnd.dayEnd))}
|
|
81
|
+
${this.getPresetTemplate(t('Next year'), () => new DateTimeRange(new DateTime().add({ years: 1 }).yearStart.dayStart, new DateTime().add({ years: 1 }).yearEnd.dayEnd))}
|
|
82
82
|
`
|
|
83
83
|
].filter(Boolean), html `<mo-line></mo-line>`);
|
|
84
84
|
}
|
|
85
85
|
static get styles() {
|
|
86
|
-
return css `
|
|
87
|
-
${super.styles}
|
|
88
|
-
|
|
89
|
-
mo-tab-bar {
|
|
90
|
-
max-width: 200px;
|
|
91
|
-
place-self: center;
|
|
92
|
-
padding-block: 4px;
|
|
93
|
-
mo-tab {
|
|
94
|
-
&:not([active]) {
|
|
95
|
-
opacity: 0.5;
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
}
|
|
86
|
+
return css `
|
|
87
|
+
${super.styles}
|
|
88
|
+
|
|
89
|
+
mo-tab-bar {
|
|
90
|
+
max-width: 200px;
|
|
91
|
+
place-self: center;
|
|
92
|
+
padding-block: 4px;
|
|
93
|
+
mo-tab {
|
|
94
|
+
&:not([active]) {
|
|
95
|
+
opacity: 0.5;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
#selector {
|
|
101
|
+
flex: none !important;
|
|
102
|
+
}
|
|
99
103
|
`;
|
|
100
104
|
}
|
|
101
105
|
get placeholder() {
|
|
@@ -105,26 +109,26 @@ let FieldDateTimeRange = class FieldDateTimeRange extends FieldDateTimeBase {
|
|
|
105
109
|
return this.value;
|
|
106
110
|
}
|
|
107
111
|
get popoverSelectionTemplate() {
|
|
108
|
-
return html `
|
|
109
|
-
<mo-flex>
|
|
110
|
-
${this.popoverToolbarTemplate}
|
|
111
|
-
${super.popoverSelectionTemplate}
|
|
112
|
-
</mo-flex>
|
|
112
|
+
return html `
|
|
113
|
+
<mo-flex style='flex: 1'>
|
|
114
|
+
${this.popoverToolbarTemplate}
|
|
115
|
+
${super.popoverSelectionTemplate}
|
|
116
|
+
</mo-flex>
|
|
113
117
|
`;
|
|
114
118
|
}
|
|
115
119
|
get popoverToolbarTemplate() {
|
|
116
|
-
return html `
|
|
117
|
-
${this.startEndTabBarTemplate}
|
|
120
|
+
return html `
|
|
121
|
+
${this.startEndTabBarTemplate}
|
|
118
122
|
`;
|
|
119
123
|
}
|
|
120
124
|
get startEndTabBarTemplate() {
|
|
121
|
-
return html `
|
|
122
|
-
<mo-flex style='border-inline-start: 1px solid var(--mo-color-transparent-gray-3)'>
|
|
123
|
-
<mo-tab-bar ${bind(this, 'selection', { sourceUpdated: () => this.resetNavigationDate() })}>
|
|
124
|
-
<mo-tab value=${FieldDateRangeSelection.Start}>${t('Start')}</mo-tab>
|
|
125
|
-
<mo-tab value=${FieldDateRangeSelection.End}>${t('End')}</mo-tab>
|
|
126
|
-
</mo-tab-bar>
|
|
127
|
-
</mo-flex>
|
|
125
|
+
return html `
|
|
126
|
+
<mo-flex style='border-inline-start: 1px solid var(--mo-color-transparent-gray-3)'>
|
|
127
|
+
<mo-tab-bar ${bind(this, 'selection', { sourceUpdated: () => this.resetNavigationDate() })}>
|
|
128
|
+
<mo-tab value=${FieldDateRangeSelection.Start}>${t('Start')}</mo-tab>
|
|
129
|
+
<mo-tab value=${FieldDateRangeSelection.End}>${t('End')}</mo-tab>
|
|
130
|
+
</mo-tab-bar>
|
|
131
|
+
</mo-flex>
|
|
128
132
|
`;
|
|
129
133
|
}
|
|
130
134
|
handleSelectedDateChange(date, precision) {
|