@3mo/date-time-fields 0.5.1 → 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.d.ts

@@ -1,7 +1,7 @@
 import { HTMLTemplateResult } from '@a11d/lit';
 import { InputFieldComponent } from '@3mo/field';
 import type { MaterialIcon } from '@3mo/icon';
-import { FocusMethod } from '@3mo/focus-controller';
+import type { FocusMethod } from '@3mo/focus-controller';
 export declare enum FieldDateTimePrecision {
     Year = "year",
     Month = "month",
@@ -37,9 +37,8 @@ export declare abstract class FieldDateTimeBase<T> extends InputFieldComponent<T
     protected get inputTemplate(): HTMLTemplateResult;
     protected abstract inputValueToValue(value: string): T | undefined;
     protected abstract valueToInputValue(value: T | undefined): string;
-    private iconButtonActivated;
     protected get calendarIconButtonTemplate(): HTMLTemplateResult;
-    protected handleFocus(bubbled: boolean, method: FocusMethod): Promise<void>;
+    protected handleFocus(bubbled: boolean, method: FocusMethod): void;
     protected handleBlur(bubbled: boolean, method: FocusMethod): void;
     protected get popoverTemplate(): HTMLTemplateResult;
     protected get popoverContentTemplate(): HTMLTemplateResult;

package/dist/FieldDateTimeBase.d.ts.map

@@ -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,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAEnD,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,OAAO,CAAC,mBAAmB,CAAQ;IACnC,SAAS,KAAK,0BAA0B,uBAQvC;cAEwB,WAAW,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW;cASvD,UAAU,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW;IAMnE,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"}
+{"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"}

package/dist/FieldDateTimeBase.js

@@ -35,7 +35,6 @@ export class FieldDateTimeBase extends InputFieldComponent {
         this.shortcutReferenceDate = new DateTime;
         this.precision = FieldDateTimePrecision.Minute;
         this.calendarIconButtonIcon = 'today';
-        this.iconButtonActivated = false;
     }
     get formatOptions() {
         return {
@@ -81,174 +80,170 @@ 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-button tabindex='-1' dense slot='end'
-				icon=${this.calendarIconButtonIcon}
-				${style({ color: this.isActive ? 'var(--mo-color-accent)' : 'var(--mo-color-gray)', fontSize: '22px', marginTop: '2px' })}
-				@click=${() => !this.iconButtonActivated ? void 0 : this.open = !this.open}
-			></mo-icon-button>
+        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>
 		`;
     }
-    async handleFocus(bubbled, method) {
+    handleFocus(bubbled, method) {
         super.handleFocus(bubbled, method);
         if (method === 'pointer') {
             this.open = true;
         }
-        await new Promise(r => setTimeout(r));
-        this.iconButtonActivated = true;
     }
     handleBlur(bubbled, method) {
         super.handleBlur(bubbled, method);
         this.open = false;
-        this.iconButtonActivated = 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>
 		`;
     }
 };