@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.
@@ -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,EAA2C,MAAM,WAAW,CAAA;AACvF,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAC7C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAExD,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;cAEkB,WAAW,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW;cAOjD,UAAU,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW;IAKnE,SAAS,KAAK,eAAe,uBAQ5B;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
+ {"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 manual
165
- .anchor=${this}
166
- ?open=${this.open}
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,4 +1,4 @@
1
- import { MaterialIcon } from '@3mo/icon';
1
+ import { type MaterialIcon } from '@3mo/icon';
2
2
  import { FieldDateTimeBase as FieldDateTimeBase, FieldDateTimePrecision } from './FieldDateTimeBase.js';
3
3
  declare enum FieldDateRangeSelection {
4
4
  Start = "start",
@@ -1 +1 @@
1
- {"version":3,"file":"FieldDateTimeRange.d.ts","sourceRoot":"","sources":["../FieldDateTimeRange.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,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"}
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, () => {\\r\\n\\t\\tthis.requestUpdate()\\r\\n\\t\\tif (this.preventIntervalScrolling === false) {\\r\\n\\t\\t\\tthis.scrollIntoSelectedItem()\\r\\n\\t\\t}\\r\\n\\t})\""
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, () => {\\r\\n\\t\\tthis.requestUpdate()\\r\\n\\t\\tif (this.preventIntervalScrolling === false) {\\r\\n\\t\\t\\tthis.scrollIntoSelectedItem()\\r\\n\\t\\t}\\r\\n\\t})\""
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, () => {\\r\\n\\t\\tthis.requestUpdate()\\r\\n\\t\\tif (this.preventIntervalScrolling === false) {\\r\\n\\t\\t\\tthis.scrollIntoSelectedItem()\\r\\n\\t\\t}\\r\\n\\t})\""
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, () => {\\r\\n\\t\\tthis.requestUpdate()\\r\\n\\t\\tif (this.preventIntervalScrolling === false) {\\r\\n\\t\\t\\tthis.scrollIntoSelectedItem()\\r\\n\\t\\t}\\r\\n\\t})\""
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, () => {\\r\\n\\t\\tthis.requestUpdate()\\r\\n\\t\\tif (this.preventIntervalScrolling === false) {\\r\\n\\t\\t\\tthis.scrollIntoSelectedItem()\\r\\n\\t\\t}\\r\\n\\t})\""
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;AAC5F,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"}
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
  };