@3mo/date-time-fields 0.5.2 → 0.5.3

package/dist/FieldDateTime.js

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

package/dist/FieldDateTimeBase.js

@@ -80,73 +80,73 @@ export class FieldDateTimeBase extends InputFieldComponent {
         return '';
     }
     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);
-			}
-
-			input::placeholder {
-				color: transparent;
-			}
-
-			mo-field[active]:not([dense]) input::placeholder {
-				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);
+			}
+
+			input::placeholder {
+				color: transparent;
+			}
+
+			mo-field[active]:not([dense]) input::placeholder {
+				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}
-				placeholder=${this.placeholder}
-				.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}
+				placeholder=${this.placeholder}
+				.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.pickerHidden ? html.nothing : html `
-			<mo-icon tabindex='-1' dense slot='end'
-				icon=${this.calendarIconButtonIcon}
-				${style({ color: this.isActive ? 'var(--mo-color-accent)' : 'var(--mo-color-gray)', fontSize: '22px', marginTop: '2px', cursor: 'pointer', userSelect: 'none' })}
-			></mo-icon>
+        return this.pickerHidden ? html.nothing : html `
+			<mo-icon tabindex='-1' dense slot='end'
+				icon=${this.calendarIconButtonIcon}
+				${style({ color: this.isActive ? 'var(--mo-color-accent)' : 'var(--mo-color-gray)', fontSize: '22px', marginTop: '2px', cursor: 'pointer', userSelect: 'none' })}
+			></mo-icon>
 		`;
     }
     handleFocus(bubbled, method) {
@@ -160,90 +160,90 @@ export class FieldDateTimeBase extends InputFieldComponent {
         this.open = false;
     }
     get popoverTemplate() {
-        return this.pickerHidden ? html.nothing : html `
-			<mo-popover tabindex='-1' fixed manual
-				.anchor=${this}
-				?open=${this.open}
-				@openChange=${(e) => this.open = e.detail}
-			>${cache(!this.open ? html.nothing : this.popoverContentTemplate)}</mo-popover>
+        return this.pickerHidden ? html.nothing : html `
+			<mo-popover tabindex='-1' fixed manual
+				.anchor=${this}
+				?open=${this.open}
+				@openChange=${(e) => this.open = e.detail}
+			>${cache(!this.open ? html.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, FieldDateTimePrecision.Year)}
-			></mo-year-list>
+        return html `
+			<mo-year-list
+				.navigatingValue=${this.navigatingDate}
+				.value=${this.selectedDate}
+				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Year)}
+			></mo-year-list>
 		`;
     }
     get monthListTemplate() {
-        return [FieldDateTimePrecision.Year].includes(this.precision) ? html.nothing : html `
-			<mo-month-list
-				.navigatingValue=${this.navigatingDate}
-				.value=${this.selectedDate}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Month)}
-			></mo-month-list>
+        return [FieldDateTimePrecision.Year].includes(this.precision) ? html.nothing : html `
+			<mo-month-list
+				.navigatingValue=${this.navigatingDate}
+				.value=${this.selectedDate}
+				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Month)}
+			></mo-month-list>
 		`;
     }
     get dayTemplate() {
         return [FieldDateTimePrecision.Year, FieldDateTimePrecision.Month].includes(this.precision) ? html.nothing : this.calendarTemplate;
     }
     get timeTemplate() {
-        return [FieldDateTimePrecision.Year, FieldDateTimePrecision.Month, FieldDateTimePrecision.Day].includes(this.precision) ? html.nothing : html `
-			<mo-flex gap='6px'>
-				<div class='timezone'>
-					${this.navigatingDate?.formatToParts({ timeZoneName: 'long' }).find(x => x.type === 'timeZoneName')?.value}
-					(${this.navigatingDate?.formatToParts({ timeZoneName: 'shortOffset' }).find(x => x.type === 'timeZoneName')?.value})
-				</div>
-				<mo-flex direction='horizontal' style='flex: 1'>
-					${this.hourListTemplate}
-					${this.minuteListTemplate}
-					${this.secondListTemplate}
-				</mo-flex>
-			</mo-flex>
+        return [FieldDateTimePrecision.Year, FieldDateTimePrecision.Month, FieldDateTimePrecision.Day].includes(this.precision) ? html.nothing : html `
+			<mo-flex gap='6px'>
+				<div class='timezone'>
+					${this.navigatingDate?.formatToParts({ timeZoneName: 'long' }).find(x => x.type === 'timeZoneName')?.value}
+					(${this.navigatingDate?.formatToParts({ timeZoneName: 'shortOffset' }).find(x => x.type === 'timeZoneName')?.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, 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, FieldDateTimePrecision.Hour)}
+			></mo-hour-list>
 		`;
     }
     get minuteListTemplate() {
-        return [FieldDateTimePrecision.Hour].includes(this.precision) ? html.nothing : html `
-			<mo-minute-list style='flex: 1'
-				.navigatingValue=${this.navigatingDate}
-				.value=${this.selectedDate}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Minute)}
-			></mo-minute-list>
+        return [FieldDateTimePrecision.Hour].includes(this.precision) ? html.nothing : html `
+			<mo-minute-list style='flex: 1'
+				.navigatingValue=${this.navigatingDate}
+				.value=${this.selectedDate}
+				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Minute)}
+			></mo-minute-list>
 		`;
     }
     get secondListTemplate() {
-        return [FieldDateTimePrecision.Hour, FieldDateTimePrecision.Minute].includes(this.precision) ? html.nothing : html `
-			<mo-second-list style='flex: 1'
-				.navigatingValue=${this.navigatingDate}
-				.value=${this.selectedDate}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Second)}
-			></mo-second-list>
+        return [FieldDateTimePrecision.Hour, FieldDateTimePrecision.Minute].includes(this.precision) ? html.nothing : html `
+			<mo-second-list style='flex: 1'
+				.navigatingValue=${this.navigatingDate}
+				.value=${this.selectedDate}
+				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Second)}
+			></mo-second-list>
 		`;
     }
     handleSelectedDateChange(date, precision) {

package/dist/FieldDateTimeRange.js

@@ -31,55 +31,55 @@ let FieldDateTimeRange = class FieldDateTimeRange extends FieldDateTimeBase {
     get navigatingDate() { return (this.selection === FieldDateRangeSelection.Start ? this.value?.start : this.value?.end) ?? new DateTime(); }
     get selectedDate() { return this.selection === FieldDateRangeSelection.Start ? this.value?.start : this.value?.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 placeholder() {
         return new DateTimeRange(new DateTime().subtract({ years: 1 }), new DateTime()).format(this.formatOptions);
     }
     get calendarTemplate() {
-        return html `
-			<mo-selectable-range-calendar
-				.navigatingValue=${this.navigatingDate}
-				.dateRange=${this.value}
-				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Day)}
-			></mo-selectable-range-calendar>
+        return html `
+			<mo-selectable-range-calendar
+				.navigatingValue=${this.navigatingDate}
+				.dateRange=${this.value}
+				@change=${(e) => this.handleSelectedDateChange(e.detail, FieldDateTimePrecision.Day)}
+			></mo-selectable-range-calendar>
 		`;
     }
     get popoverContentTemplate() {
-        return html `
-			${this.popoverToolbarTemplate}
-			${super.popoverContentTemplate}
+        return html `
+			${this.popoverToolbarTemplate}
+			${super.popoverContentTemplate}
 		`;
     }
     get popoverToolbarTemplate() {
-        return html `
-			${this.startEndTabBarTemplate}
+        return html `
+			${this.startEndTabBarTemplate}
 		`;
     }
     get startEndTabBarTemplate() {
-        return html `
-			<mo-flex>
-				<mo-tab-bar ${bind(this, 'selection')}>
-					<mo-tab value=${FieldDateRangeSelection.Start}>${t('Start')}</mo-tab>
-					<mo-tab value=${FieldDateRangeSelection.End}>${t('End')}</mo-tab>
-				</mo-tab-bar>
-			</mo-flex>
+        return html `
+			<mo-flex>
+				<mo-tab-bar ${bind(this, 'selection')}>
+					<mo-tab value=${FieldDateRangeSelection.Start}>${t('Start')}</mo-tab>
+					<mo-tab value=${FieldDateRangeSelection.End}>${t('End')}</mo-tab>
+				</mo-tab-bar>
+			</mo-flex>
 		`;
     }
     handleSelectedDateChange(date, precision) {

package/dist/FieldTime.js

@@ -7,9 +7,9 @@ let FieldTime = class FieldTime extends FieldText {
         return '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/FieldToggleableDateTimeRange.js

@@ -19,16 +19,16 @@ let FieldToggleableDateTimeRange = class FieldToggleableDateTimeRange extends Fi
     get includeTime() { return this.precision === FieldDateTimePrecision.Minute; }
     set includeTime(includeTime) { this.precision = includeTime ? FieldDateTimePrecision.Minute : FieldDateTimePrecision.Day; }
     get popoverToolbarTemplate() {
-        return html `
-			<mo-grid style='width: calc(100% - 16px); padding-inline: 8px;' columns='* auto'>
-				${super.popoverToolbarTemplate}
-				${this.toggleTemplate}
-			</mo-grid>
+        return html `
+			<mo-grid style='width: calc(100% - 16px); padding-inline: 8px;' columns='* auto'>
+				${super.popoverToolbarTemplate}
+				${this.toggleTemplate}
+			</mo-grid>
 		`;
     }
     get toggleTemplate() {
-        return html `
-			<mo-switch label=${t('Include time')} ${bind(this, 'includeTime')}></mo-switch>
+        return html `
+			<mo-switch label=${t('Include time')} ${bind(this, 'includeTime')}></mo-switch>
 		`;
     }
 };