@3mo/date-time-fields 0.1.2 → 0.1.3

package/README.md

@@ -1,3 +1,3 @@
-# Date Time Fields
-
+# Date Time Fields
+
 A set of date-time related fields.

package/dist/FieldDateTime.js

@@ -7,12 +7,12 @@ let FieldDateTime = class FieldDateTime extends FieldDateTimeBase {
     get navigatingDate() { return this.value ? new DateTime(this.value) : new DateTime(); }
     get selectedDate() { return this.value ? new DateTime(this.value) : undefined; }
     get calendarTemplate() {
-        return html `
-			<mo-selectable-calendar
-				.navigatingValue=${this.navigatingDate}
-				.value=${this.selectedDate}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, "day" /* FieldDateTimePrecision.Day */)}
-			></mo-selectable-calendar>
+        return html `
+			<mo-selectable-calendar
+				.navigatingValue=${this.navigatingDate}
+				.value=${this.selectedDate}
+				@change=${(e) => this.handleSelectedDateChange(e.detail, "day" /* FieldDateTimePrecision.Day */)}
+			></mo-selectable-calendar>
 		`;
     }
     handleSelectedDateChange(date, precision) {

package/dist/FieldDateTimeBase.js

@@ -59,107 +59,107 @@ export class FieldDateTimeBase extends InputFieldComponent {
         return super.isActive || this.open;
     }
     static get styles() {
-        return css `
-			${super.styles}
-
-			:host {
-				position: relative;
-			}
-
-			mo-popover {
-				background: var(--mo-color-background);
-				box-shadow: var(--mo-shadow);
-				border-radius: var(--mo-border-radius);
-				color: var(--mo-color-foreground);
-			}
-
-			#selector {
-				min-height: 175px;
-			}
-
-			.timezone {
-				padding: 3px;
-				font-size: small;
-				text-align: end;
-				font-weight: 500;
-				color: var(--mo-color-gray);
-			}
+        return css `
+			${super.styles}
+
+			:host {
+				position: relative;
+			}
+
+			mo-popover {
+				background: var(--mo-color-background);
+				box-shadow: var(--mo-shadow);
+				border-radius: var(--mo-border-radius);
+				color: var(--mo-color-foreground);
+			}
+
+			#selector {
+				min-height: 175px;
+			}
+
+			.timezone {
+				padding: 3px;
+				font-size: small;
+				text-align: end;
+				font-weight: 500;
+				color: var(--mo-color-gray);
+			}
 		`;
     }
     get template() {
-        return html `
-			${super.template}
-			${this.popoverTemplate}
+        return html `
+			${super.template}
+			${this.popoverTemplate}
 		`;
     }
     get endSlotTemplate() {
-        return html `
-			${super.endSlotTemplate}
-			${this.calendarIconButtonTemplate}
+        return html `
+			${super.endSlotTemplate}
+			${this.calendarIconButtonTemplate}
 		`;
     }
     get inputTemplate() {
-        return html `
-			<input
-				part='input'
-				?readonly=${this.readonly}
-				?required=${this.required}
-				?disabled=${this.disabled}
-				.value=${live(this.inputStringValue || '')}
-				@input=${(e) => this.handleInput(this.inputValueToValue(this.inputElement.value || ''), e)}
-				@change=${(e) => this.handleChange(this.inputValueToValue(this.inputElement.value || ''), e)}
-			>
+        return html `
+			<input
+				part='input'
+				?readonly=${this.readonly}
+				?required=${this.required}
+				?disabled=${this.disabled}
+				.value=${live(this.inputStringValue || '')}
+				@input=${(e) => this.handleInput(this.inputValueToValue(this.inputElement.value || ''), e)}
+				@change=${(e) => this.handleChange(this.inputValueToValue(this.inputElement.value || ''), e)}
+			>
 		`;
     }
     get calendarIconButtonTemplate() {
-        return this.hideDatePicker ? nothing : html `
-			<mo-icon-button tabindex='-1' dense slot='end'
-				icon=${this.calendarIconButtonIcon}
-				${style({ color: this.isActive ? 'var(--mo-color-accent)' : 'var(--mo-color-gray)' })}
-				@click=${() => this.open = !this.open}>
-			</mo-icon-button>
+        return this.hideDatePicker ? nothing : html `
+			<mo-icon-button tabindex='-1' dense slot='end'
+				icon=${this.calendarIconButtonIcon}
+				${style({ color: this.isActive ? 'var(--mo-color-accent)' : 'var(--mo-color-gray)' })}
+				@click=${() => this.open = !this.open}>
+			</mo-icon-button>
 		`;
     }
     get popoverTemplate() {
-        return this.hideDatePicker ? nothing : html `
-			<mo-popover tabindex='-1' fixed openOnFocus
-				.anchor=${this}
-				?open=${this.open}
-				@openChange=${(e) => this.open = e.detail}
-			>${cache(!this.open ? nothing : this.popoverContentTemplate)}</mo-popover>
+        return this.hideDatePicker ? nothing : html `
+			<mo-popover tabindex='-1' fixed openOnFocus
+				.anchor=${this}
+				?open=${this.open}
+				@openChange=${(e) => this.open = e.detail}
+			>${cache(!this.open ? nothing : this.popoverContentTemplate)}</mo-popover>
 		`;
     }
     get popoverContentTemplate() {
-        return html `
-			<mo-flex id='selector' direction='horizontal' style='height: 100%'>
-				${this.dateTemplate}
-				${this.timeTemplate}
-			</mo-flex>
+        return html `
+			<mo-flex id='selector' direction='horizontal' style='height: 100%'>
+				${this.dateTemplate}
+				${this.timeTemplate}
+			</mo-flex>
 		`;
     }
     get dateTemplate() {
-        return html `
-			${this.yearListTemplate}
-			${this.monthListTemplate}
-			${this.dayTemplate}
+        return html `
+			${this.yearListTemplate}
+			${this.monthListTemplate}
+			${this.dayTemplate}
 		`;
     }
     get yearListTemplate() {
-        return html `
-			<mo-year-list
-				.navigatingValue=${this.navigatingDate}
-				.value=${this.selectedDate}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, "year" /* FieldDateTimePrecision.Year */)}
-			></mo-year-list>
+        return html `
+			<mo-year-list
+				.navigatingValue=${this.navigatingDate}
+				.value=${this.selectedDate}
+				@change=${(e) => this.handleSelectedDateChange(e.detail, "year" /* FieldDateTimePrecision.Year */)}
+			></mo-year-list>
 		`;
     }
     get monthListTemplate() {
-        return ["year" /* FieldDateTimePrecision.Year */].includes(this.precision) ? nothing : html `
-			<mo-month-list
-				.navigatingValue=${this.navigatingDate}
-				.value=${this.selectedDate}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, "month" /* FieldDateTimePrecision.Month */)}
-			></mo-month-list>
+        return ["year" /* FieldDateTimePrecision.Year */].includes(this.precision) ? nothing : html `
+			<mo-month-list
+				.navigatingValue=${this.navigatingDate}
+				.value=${this.selectedDate}
+				@change=${(e) => this.handleSelectedDateChange(e.detail, "month" /* FieldDateTimePrecision.Month */)}
+			></mo-month-list>
 		`;
     }
     get dayTemplate() {
@@ -167,45 +167,45 @@ export class FieldDateTimeBase extends InputFieldComponent {
     }
     get timeTemplate() {
         var _a, _b, _c, _d;
-        return ["year" /* FieldDateTimePrecision.Year */, "month" /* FieldDateTimePrecision.Month */, "day" /* FieldDateTimePrecision.Day */].includes(this.precision) ? nothing : html `
-			<mo-flex gap='6px'>
-				<div class='timezone'>
-					${(_b = (_a = this.navigatingDate) === null || _a === void 0 ? void 0 : _a.formatToParts({ timeZoneName: 'long' }).find(x => x.type === 'timeZoneName')) === null || _b === void 0 ? void 0 : _b.value}
-					(${(_d = (_c = this.navigatingDate) === null || _c === void 0 ? void 0 : _c.formatToParts({ timeZoneName: 'shortOffset' }).find(x => x.type === 'timeZoneName')) === null || _d === void 0 ? void 0 : _d.value})
-				</div>
-				<mo-flex direction='horizontal' style='flex: 1'>
-					${this.hourListTemplate}
-					${this.minuteListTemplate}
-					${this.secondListTemplate}
-				</mo-flex>
-			</mo-flex>
+        return ["year" /* FieldDateTimePrecision.Year */, "month" /* FieldDateTimePrecision.Month */, "day" /* FieldDateTimePrecision.Day */].includes(this.precision) ? nothing : html `
+			<mo-flex gap='6px'>
+				<div class='timezone'>
+					${(_b = (_a = this.navigatingDate) === null || _a === void 0 ? void 0 : _a.formatToParts({ timeZoneName: 'long' }).find(x => x.type === 'timeZoneName')) === null || _b === void 0 ? void 0 : _b.value}
+					(${(_d = (_c = this.navigatingDate) === null || _c === void 0 ? void 0 : _c.formatToParts({ timeZoneName: 'shortOffset' }).find(x => x.type === 'timeZoneName')) === null || _d === void 0 ? void 0 : _d.value})
+				</div>
+				<mo-flex direction='horizontal' style='flex: 1'>
+					${this.hourListTemplate}
+					${this.minuteListTemplate}
+					${this.secondListTemplate}
+				</mo-flex>
+			</mo-flex>
 		`;
     }
     get hourListTemplate() {
-        return html `
-			<mo-hour-list style='flex: 1'
-				.navigatingValue=${this.navigatingDate}
-				.value=${this.selectedDate}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, "hour" /* FieldDateTimePrecision.Hour */)}
-			></mo-hour-list>
+        return html `
+			<mo-hour-list style='flex: 1'
+				.navigatingValue=${this.navigatingDate}
+				.value=${this.selectedDate}
+				@change=${(e) => this.handleSelectedDateChange(e.detail, "hour" /* FieldDateTimePrecision.Hour */)}
+			></mo-hour-list>
 		`;
     }
     get minuteListTemplate() {
-        return ["hour" /* FieldDateTimePrecision.Hour */].includes(this.precision) ? nothing : html `
-			<mo-minute-list style='flex: 1'
-				.navigatingValue=${this.navigatingDate}
-				.value=${this.selectedDate}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, "minute" /* FieldDateTimePrecision.Minute */)}
-			></mo-minute-list>
+        return ["hour" /* FieldDateTimePrecision.Hour */].includes(this.precision) ? nothing : html `
+			<mo-minute-list style='flex: 1'
+				.navigatingValue=${this.navigatingDate}
+				.value=${this.selectedDate}
+				@change=${(e) => this.handleSelectedDateChange(e.detail, "minute" /* FieldDateTimePrecision.Minute */)}
+			></mo-minute-list>
 		`;
     }
     get secondListTemplate() {
-        return ["hour" /* FieldDateTimePrecision.Hour */, "minute" /* FieldDateTimePrecision.Minute */].includes(this.precision) ? nothing : html `
-			<mo-second-list style='flex: 1'
-				.navigatingValue=${this.navigatingDate}
-				.value=${this.selectedDate}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, "second" /* FieldDateTimePrecision.Second */)}
-			></mo-second-list>
+        return ["hour" /* FieldDateTimePrecision.Hour */, "minute" /* FieldDateTimePrecision.Minute */].includes(this.precision) ? nothing : html `
+			<mo-second-list style='flex: 1'
+				.navigatingValue=${this.navigatingDate}
+				.value=${this.selectedDate}
+				@change=${(e) => this.handleSelectedDateChange(e.detail, "second" /* FieldDateTimePrecision.Second */)}
+			></mo-second-list>
 		`;
     }
     handleSelectedDateChange(date, precision) {

package/dist/FieldDateTimeRange.js

@@ -20,43 +20,43 @@ let FieldDateTimeRange = class FieldDateTimeRange extends FieldDateTimeBase {
     get navigatingDate() { var _a, _b, _c; return (_c = (this.selection === "start" /* FieldDateRangeSelection.Start */ ? (_a = this.value) === null || _a === void 0 ? void 0 : _a.start : (_b = this.value) === null || _b === void 0 ? void 0 : _b.end)) !== null && _c !== void 0 ? _c : new DateTime(); }
     get selectedDate() { var _a, _b; return this.selection === "start" /* FieldDateRangeSelection.Start */ ? (_a = this.value) === null || _a === void 0 ? void 0 : _a.start : (_b = this.value) === null || _b === void 0 ? void 0 : _b.end; }
     static get styles() {
-        return css `
-			${super.styles}
-
-			mo-tab-bar {
-				max-width: 200px;
-				place-self: center;
-				padding-block: 4px;
-			}
-
-			mo-tab {
-				--mdc-tab-height: 40px;
-			}
-
-			mo-tab:not([active]) {
-				opacity: 0.5;
-			}
+        return css `
+			${super.styles}
+
+			mo-tab-bar {
+				max-width: 200px;
+				place-self: center;
+				padding-block: 4px;
+			}
+
+			mo-tab {
+				--mdc-tab-height: 40px;
+			}
+
+			mo-tab:not([active]) {
+				opacity: 0.5;
+			}
 		`;
     }
     get calendarTemplate() {
-        return html `
-			<mo-selectable-range-calendar
-				.navigatingValue=${this.navigatingDate}
-				.dateRange=${this.value}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, "day" /* FieldDateTimePrecision.Day */)}
-			></mo-selectable-range-calendar>
+        return html `
+			<mo-selectable-range-calendar
+				.navigatingValue=${this.navigatingDate}
+				.dateRange=${this.value}
+				@change=${(e) => this.handleSelectedDateChange(e.detail, "day" /* FieldDateTimePrecision.Day */)}
+			></mo-selectable-range-calendar>
 		`;
     }
     get popoverContentTemplate() {
-        return html `
-			<mo-flex>
-				<mo-tab-bar value=${this.selection} @change=${(e) => this.selection = e.detail}>
-					<mo-tab value=${"start" /* FieldDateRangeSelection.Start */} label=${t('Start')}></mo-tab>
-					<mo-tab value=${"end" /* FieldDateRangeSelection.End */} label=${t('End')}></mo-tab>
-				</mo-tab-bar>
-			</mo-flex>
-
-			${super.popoverContentTemplate}
+        return html `
+			<mo-flex>
+				<mo-tab-bar value=${this.selection} @change=${(e) => this.selection = e.detail}>
+					<mo-tab value=${"start" /* FieldDateRangeSelection.Start */} label=${t('Start')}></mo-tab>
+					<mo-tab value=${"end" /* FieldDateRangeSelection.End */} label=${t('End')}></mo-tab>
+				</mo-tab-bar>
+			</mo-flex>
+
+			${super.popoverContentTemplate}
 		`;
     }
     handleSelectedDateChange(date, precision) {

package/dist/FieldTime.js

@@ -8,9 +8,9 @@ let FieldTime = class FieldTime extends FieldText {
         this.inputType = 'time';
     }
     get startSlotTemplate() {
-        return html `
-			<mo-icon slot='start' @click=${() => this.focus()} icon='schedule' ${style({ color: 'var(--mo-color-gray)' })}></mo-icon>
-			${super.startSlotTemplate}
+        return html `
+			<mo-icon slot='start' @click=${() => this.focus()} icon='schedule' ${style({ color: 'var(--mo-color-gray)' })}></mo-icon>
+			${super.startSlotTemplate}
 		`;
     }
 };

package/dist/selection/DateList.js

@@ -14,36 +14,36 @@ export class DateList extends Component {
     }
     get now() { return new DateTime(); }
     static get styles() {
-        return css `
-			mo-scroller {
-				min-width: 70px;
-			}
-
-			.pad {
-				height: 50px;
-			}
-
-			mo-selectable-list-item {
-				height: 32px;
-			}
-
-			mo-selectable-list-item[data-now] {
-				outline: 2px dashed var(--mo-color-gray-transparent);
-			}
+        return css `
+			mo-scroller {
+				min-width: 70px;
+			}
+
+			.pad {
+				height: 50px;
+			}
+
+			mo-selectable-list-item {
+				height: 32px;
+			}
+
+			mo-selectable-list-item[data-now] {
+				outline: 2px dashed var(--mo-color-gray-transparent);
+			}
 		`;
     }
     connected() {
         this.scrollIntoSelectedItem();
     }
     get template() {
-        return this.navigatingValue === undefined ? nothing : html `
-			<mo-scroller @pointerenter=${() => this.preventIntervalScrolling = true} @pointerleave=${() => this.preventIntervalScrolling = false}>
-				<mo-selectable-list @change=${() => this.scrollIntoSelectedItem()}>
-					<div class='pad'></div>
-					${this.listItemsTemplate}
-					<div class='pad'></div>
-				</mo-selectable-list>
-			</mo-scroller>
+        return this.navigatingValue === undefined ? nothing : html `
+			<mo-scroller @pointerenter=${() => this.preventIntervalScrolling = true} @pointerleave=${() => this.preventIntervalScrolling = false}>
+				<mo-selectable-list @change=${() => this.scrollIntoSelectedItem()}>
+					<div class='pad'></div>
+					${this.listItemsTemplate}
+					<div class='pad'></div>
+				</mo-selectable-list>
+			</mo-scroller>
 		`;
     }
     async scrollIntoSelectedItem() {

package/dist/selection/HourList.js

@@ -3,17 +3,17 @@ import { component, html, range } from '@a11d/lit';
 import { DateList } from './DateList.js';
 let HourList = class HourList extends DateList {
     get listItemsTemplate() {
-        return html `
+        return html `
 			${[...range(0, this.navigatingValue.hoursInDay)].map(hour => {
             var _a;
-            return html `
-				<mo-selectable-list-item
-					?selected=${((_a = this.value) === null || _a === void 0 ? void 0 : _a.hour) === hour}
-					?data-now=${this.now.hour === hour}
-					@change=${(e) => { var _a; return !e.selected ? void 0 : this.change.dispatch(((_a = this.value) !== null && _a !== void 0 ? _a : new DateTime).with({ hour })); }}
-				>${hour.format().padStart(2, 0.0.format())}</mo-selectable-list-item>
+            return html `
+				<mo-selectable-list-item
+					?selected=${((_a = this.value) === null || _a === void 0 ? void 0 : _a.hour) === hour}
+					?data-now=${this.now.hour === hour}
+					@change=${(e) => { var _a; return !e.selected ? void 0 : this.change.dispatch(((_a = this.value) !== null && _a !== void 0 ? _a : new DateTime).with({ hour })); }}
+				>${hour.format().padStart(2, 0.0.format())}</mo-selectable-list-item>
 			`;
-        })}
+        })}
 		`;
     }
 };

package/dist/selection/MinuteList.js

@@ -3,17 +3,17 @@ import { component, html, range } from '@a11d/lit';
 import { DateList } from './DateList.js';
 let MinuteList = class MinuteList extends DateList {
     get listItemsTemplate() {
-        return html `
+        return html `
 			${[...range(0, 60)].map(minute => {
             var _a;
-            return html `
-				<mo-selectable-list-item
-					?selected=${((_a = this.value) === null || _a === void 0 ? void 0 : _a.minute) === minute}
-					?data-now=${this.now.minute === minute}
-					@change=${(e) => { var _a; return !e.selected ? void 0 : this.change.dispatch(((_a = this.value) !== null && _a !== void 0 ? _a : new DateTime).with({ minute })); }}
-				>${minute.format().padStart(2, 0.0.format())}</mo-selectable-list-item>
+            return html `
+				<mo-selectable-list-item
+					?selected=${((_a = this.value) === null || _a === void 0 ? void 0 : _a.minute) === minute}
+					?data-now=${this.now.minute === minute}
+					@change=${(e) => { var _a; return !e.selected ? void 0 : this.change.dispatch(((_a = this.value) !== null && _a !== void 0 ? _a : new DateTime).with({ minute })); }}
+				>${minute.format().padStart(2, 0.0.format())}</mo-selectable-list-item>
 			`;
-        })}
+        })}
 		`;
     }
 };

package/dist/selection/MonthList.js

@@ -3,12 +3,12 @@ import { component, css, html } from '@a11d/lit';
 import { DateList } from './DateList.js';
 let MonthList = class MonthList extends DateList {
     static get styles() {
-        return css `
-			${super.styles}
-
-			mo-scroller {
-				min-width: 125px;
-			}
+        return css `
+			${super.styles}
+
+			mo-scroller {
+				min-width: 125px;
+			}
 		`;
     }
     get monthNames() {
@@ -18,17 +18,17 @@ let MonthList = class MonthList extends DateList {
             .map(date => [date.month, date.format({ month: 'long' })]);
     }
     get listItemsTemplate() {
-        return html `
+        return html `
 			${this.monthNames.map(([month, name]) => {
             var _a;
-            return html `
-				<mo-selectable-list-item
-					?selected=${((_a = this.value) === null || _a === void 0 ? void 0 : _a.month) === month}
-					?data-now=${this.now.month === month}
-					@change=${(e) => { var _a; return !e.selected ? void 0 : this.change.dispatch(((_a = this.value) !== null && _a !== void 0 ? _a : new DateTime).with({ month })); }}
-				>${name}</mo-selectable-list-item>
+            return html `
+				<mo-selectable-list-item
+					?selected=${((_a = this.value) === null || _a === void 0 ? void 0 : _a.month) === month}
+					?data-now=${this.now.month === month}
+					@change=${(e) => { var _a; return !e.selected ? void 0 : this.change.dispatch(((_a = this.value) !== null && _a !== void 0 ? _a : new DateTime).with({ month })); }}
+				>${name}</mo-selectable-list-item>
 			`;
-        })}
+        })}
 		`;
     }
 };

package/dist/selection/SecondList.js

@@ -3,17 +3,17 @@ import { component, html, range } from '@a11d/lit';
 import { DateList } from './DateList.js';
 let SecondList = class SecondList extends DateList {
     get listItemsTemplate() {
-        return html `
+        return html `
 			${[...range(0, 60)].map(second => {
             var _a;
-            return html `
-				<mo-selectable-list-item
-					?selected=${((_a = this.value) === null || _a === void 0 ? void 0 : _a.second) === second}
-					?data-now=${this.now.second === second}
-					@change=${(e) => { var _a; return !e.selected ? void 0 : this.change.dispatch(((_a = this.value) !== null && _a !== void 0 ? _a : new DateTime).with({ second })); }}
-				>${second.format().padStart(2, 0.0.format())}</mo-selectable-list-item>
+            return html `
+				<mo-selectable-list-item
+					?selected=${((_a = this.value) === null || _a === void 0 ? void 0 : _a.second) === second}
+					?data-now=${this.now.second === second}
+					@change=${(e) => { var _a; return !e.selected ? void 0 : this.change.dispatch(((_a = this.value) !== null && _a !== void 0 ? _a : new DateTime).with({ second })); }}
+				>${second.format().padStart(2, 0.0.format())}</mo-selectable-list-item>
 			`;
-        })}
+        })}
 		`;
     }
 };

package/dist/selection/YearList.js

@@ -7,17 +7,17 @@ let YearList = class YearList extends DateList {
         (_a = this.years) !== null && _a !== void 0 ? _a : (this.years = new Array(150)
             .fill(undefined)
             .map((_, i) => this.navigatingValue.year - 100 + i));
-        return html `
+        return html `
 			${this.years.map(year => {
             var _a;
-            return html `
-				<mo-selectable-list-item
-					?selected=${((_a = this.value) === null || _a === void 0 ? void 0 : _a.year) === year}
-					?data-now=${this.now.year === year}
-					@change=${(e) => !e.selected || !this.value ? void 0 : this.change.dispatch(this.value.with({ year }))}
-				>${year.format()}</mo-selectable-list-item>
+            return html `
+				<mo-selectable-list-item
+					?selected=${((_a = this.value) === null || _a === void 0 ? void 0 : _a.year) === year}
+					?data-now=${this.now.year === year}
+					@change=${(e) => !e.selected || !this.value ? void 0 : this.change.dispatch(this.value.with({ year }))}
+				>${year.format()}</mo-selectable-list-item>
 			`;
-        })}
+        })}
 		`;
     }
 };