@3mo/date-time-fields 0.15.1 → 0.16.0

package/dist/FieldDateTimeBase.d.ts

@@ -3,6 +3,7 @@ import { InputFieldComponent } from '@3mo/field';
 import { type MaterialIcon } from '@3mo/icon';
 import { FieldDateTimePrecision } from './FieldDateTimePrecision.js';
 import type { Calendar } from './selection/index.js';
+export declare const dateTimeConverter: (value: unknown) => import("@3mo/date-time/DateTime.js").DateTime | undefined;
 /**
  * @attr open - Whether the date picker is open
  * @attr pickerHidden - Hide the date picker

package/dist/FieldDateTimeBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldDateTimeBase.d.ts","sourceRoot":"","sources":["../FieldDateTimeBase.ts"],"names":[],"mappings":"AACA,OAAO,EAA0E,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAE3H,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AACpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAepD;;;;;;;;GAQG;AACH,8BAAsB,iBAAiB,CAAC,CAAC,CAAE,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAC5B,IAAI,UAAQ;IAC3B,YAAY,UAAQ;IACS,qBAAqB,gDAAiB;IACE,SAAS,yBAAgC;IACjF,GAAG,CAAC,EAAE,QAAQ,CAAA;IACd,GAAG,CAAC,EAAE,QAAQ,CAAA;IAChC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAA;IAEzE,cAAc,gDAAiB;IAElB,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAA;cAEzC,SAAS;cAIT,YAAY;IAI/B,OAAO,CAAC,oBAAoB,CAE3B;IAED,SAAS,CAAC,QAAQ,CAAC,sBAAsB,EAAE,YAAY,CAAU;IAEjE,SAAS,CAAC,QAAQ,KAAK,YAAY,IAAI,QAAQ,GAAG,SAAS,CAAA;IAE3D,SAAS,KAAK,aAAa,IAAI,IAAI,CAAC,qBAAqB,CAMxD;cAEkB,YAAY;IAK/B,SAAS,CAAC,QAAQ,CAAC,mBAAmB,IAAI,IAAI;cAE3B,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK;IAKpD,cAAuB,QAAQ,YAE9B;IAED,SAAS,KAAK,WAAW,WAExB;IAED,WAAoB,MAAM,kCAuDzB;IAED,cAAuB,QAAQ,uBAK9B;IAED,cAAuB,eAAe,uBAMrC;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,KAAK,uBAAuB,GAYlC;IAED,SAAS,KAAK,0BAA0B,uBAOvC;IAED,SAAS,KAAK,eAAe,uBAkB5B;IAED,SAAS,KAAK,wBAAwB,uBAOrC;IAED,SAAS,CAAC,QAAQ,KAAK,eAAe,IAAI,kBAAkB,CAAA;IAE5D,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC;IAYzD,OAAO,CAAC,gBAAgB;IAaxB,SAAS,KAAK,YAAY,uBAEzB;IAED,SAAS,KAAK,gBAAgB,uBAW7B;IAED,SAAS,CAAC,QAAQ,KAAK,aAAa,IAAI,aAAa,GAAG,SAAS,CAAA;IAEjE,OAAO,KAAK,YAAY,GAavB;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;CAMpF"}
+{"version":3,"file":"FieldDateTimeBase.d.ts","sourceRoot":"","sources":["../FieldDateTimeBase.ts"],"names":[],"mappings":"AACA,OAAO,EAA0E,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAE3H,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AACpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAEpD,eAAO,MAAM,iBAAiB,GAAI,OAAO,OAAO,8DAW/C,CAAA;AAED;;;;;;;;GAQG;AACH,8BAAsB,iBAAiB,CAAC,CAAC,CAAE,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAC5B,IAAI,UAAQ;IAC3B,YAAY,UAAQ;IACS,qBAAqB,gDAAiB;IACE,SAAS,yBAAgC;IACjF,GAAG,CAAC,EAAE,QAAQ,CAAA;IACd,GAAG,CAAC,EAAE,QAAQ,CAAA;IAChC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAA;IAEzE,cAAc,gDAAiB;IAElB,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAA;cAEzC,SAAS;cAIT,YAAY;IAI/B,OAAO,CAAC,oBAAoB,CAE3B;IAED,SAAS,CAAC,QAAQ,CAAC,sBAAsB,EAAE,YAAY,CAAU;IAEjE,SAAS,CAAC,QAAQ,KAAK,YAAY,IAAI,QAAQ,GAAG,SAAS,CAAA;IAE3D,SAAS,KAAK,aAAa,IAAI,IAAI,CAAC,qBAAqB,CAMxD;cAEkB,YAAY;IAK/B,SAAS,CAAC,QAAQ,CAAC,mBAAmB,IAAI,IAAI;cAE3B,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK;IAKpD,cAAuB,QAAQ,YAE9B;IAED,SAAS,KAAK,WAAW,WAExB;IAED,WAAoB,MAAM,kCAuDzB;IAED,cAAuB,QAAQ,uBAK9B;IAED,cAAuB,eAAe,uBAMrC;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,KAAK,uBAAuB,GAYlC;IAED,SAAS,KAAK,0BAA0B,uBAOvC;IAED,SAAS,KAAK,eAAe,uBAkB5B;IAED,SAAS,KAAK,wBAAwB,uBAOrC;IAED,SAAS,CAAC,QAAQ,KAAK,eAAe,IAAI,kBAAkB,CAAA;IAE5D,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC;IAYzD,OAAO,CAAC,gBAAgB;IAaxB,SAAS,KAAK,YAAY,uBAEzB;IAED,SAAS,KAAK,gBAAgB,uBAW7B;IAED,SAAS,CAAC,QAAQ,KAAK,aAAa,IAAI,aAAa,GAAG,SAAS,CAAA;IAEjE,OAAO,KAAK,YAAY,GAavB;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;CAMpF"}

package/dist/FieldDateTimeBase.js

@@ -3,7 +3,7 @@ import { cache, css, html, live, property, style, bind, state, query, ifDefined
 import { hasChanged } from '@a11d/equals';
 import { InputFieldComponent } from '@3mo/field';
 import { FieldDateTimePrecision } from './FieldDateTimePrecision.js';
-const dateTimeConverter = (value) => {
+export const dateTimeConverter = (value) => {
     if (value instanceof DateTime) {
         return value;
     }

package/dist/FieldTime.d.ts

@@ -1,13 +1,58 @@
-import { FieldText } from '@3mo/text-fields';
+import { FieldComponent } from '@3mo/field';
+import { FieldDateTimePrecision } from './FieldDateTimePrecision.js';
+import { DateTimeSegmentsController, type HourCycle } from './segments/index.js';
 /**
+ * A time-of-day field. Its value is the 24-hour `HH:mm` (or `HH:mm:ss` at second precision) string the
+ * native time input uses, so that it drops in where one was, while the segments follow the language's
+ * own clock — "02:07 PM" for English, "14:07" for German — and the popover offers the hour and minute wheels.
+ *
  * @element mo-field-time
  *
+ * @attr value - The time as `HH:mm` or `HH:mm:ss`
+ * @attr open - Whether the time picker is open
+ * @attr pickerHidden - Hide the time picker
+ * @attr dense - Whether the field is dense
+ * @attr precision - 'minute' (default) or 'second'
+ * @attr hourCycle - The hour cycle of the segments ('h11', 'h12', 'h23' or 'h24'). Defaults to the language's convention.
+ * @attr shortcutReferenceDate - The date the units the user leaves out are taken from. Defaults to now.
+ *
+ * @csspart segments - The group of segments making up the time
+ * @csspart segment - An editable unit of the time
+ * @csspart literal - A separator between the units
+ *
  * @i18n "Time"
  */
-export declare class FieldTime extends FieldText {
+export declare class FieldTime extends FieldComponent<string> {
     label: string;
-    get inputType(): string;
-    protected get startSlotTemplate(): import("lit-html").HTMLTemplateResult;
+    value?: string;
+    open: boolean;
+    pickerHidden: boolean;
+    dense: boolean;
+    precision: FieldDateTimePrecision;
+    hourCycle?: HourCycle;
+    shortcutReferenceDate: import("@3mo/date-time/DateTime.js").DateTime;
+    navigationDate: import("@3mo/date-time/DateTime.js").DateTime;
+    readonly segments: DateTimeSegmentsController<this>;
+    /** Alt+ArrowDown opens the picker, as it does on a native date-time input. */
+    protected handlePickerKey(event: KeyboardEvent): void;
+    /** The value as a time on the reference day, which is all the segments need to render and edit it. */
+    get selectedDate(): DateTime | undefined;
+    protected toValue(date: DateTime | undefined): string | undefined;
+    protected valueUpdated(): void;
+    protected get isActive(): boolean;
+    protected get isDense(): boolean;
+    protected get isPopulated(): boolean;
+    focus(): void;
+    private customValidity;
+    setCustomValidity(error: string): void;
+    checkValidity(): Promise<boolean>;
+    reportValidity(): void;
+    static get styles(): import("@a11d/lit").CSSResult;
+    protected get template(): import("lit-html").HTMLTemplateResult;
+    protected get inputTemplate(): import("lit-html").HTMLTemplateResult;
+    protected get endSlotTemplate(): import("lit-html").HTMLTemplateResult;
+    protected get popoverTemplate(): import("lit-html").HTMLTemplateResult;
+    private handleListChange;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/FieldTime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldTime.d.ts","sourceRoot":"","sources":["../FieldTime.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAQ5C;;;;GAIG;AACH,qBACa,SAAU,SAAQ,SAAS;IAClB,KAAK,SAAY;IAEtC,IAAa,SAAS,WAErB;IAED,cAAuB,iBAAiB,0CAKvC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,SAAS,CAAA;KAC1B;CACD"}
+{"version":3,"file":"FieldTime.d.ts","sourceRoot":"","sources":["../FieldTime.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAE3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAEpE,OAAO,EAAE,0BAA0B,EAAsC,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAQpH;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,SAAU,SAAQ,cAAc,CAAC,MAAM,CAAC;IAC/B,KAAK,SAAY;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACkB,IAAI,UAAQ;IAC3B,YAAY,UAAQ;IACpB,KAAK,UAAQ;IACwD,SAAS,yBAAgC;IAChF,SAAS,CAAC,EAAE,SAAS,CAAA;IACtB,qBAAqB,gDAAiB;IAEvF,cAAc,gDAAiB;IAExC,QAAQ,CAAC,QAAQ,mCAad;IAEH,8EAA8E;IAC9E,SAAS,CAAC,eAAe,CAAC,KAAK,EAAE,aAAa;IAO9C,sGAAsG;IACtG,IAAI,YAAY,IAAI,QAAQ,GAAG,SAAS,CAOvC;IAED,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,QAAQ,GAAG,SAAS;cASzB,YAAY;IAK/B,cAAuB,QAAQ,YAE9B;IAED,cAAuB,OAAO,YAE7B;IAED,cAAuB,WAAW,YAEjC;IAEQ,KAAK;IAId,OAAO,CAAC,cAAc,CAAK;IAElB,iBAAiB,CAAC,KAAK,EAAE,MAAM;IAIzB,aAAa;IAKnB,cAAc;IAIvB,WAAoB,MAAM,kCAgCzB;IAED,cAAuB,QAAQ,0CAK9B;IAED,cAAuB,aAAa,0CAMnC;IAED,cAAuB,eAAe,0CASrC;IAED,SAAS,KAAK,eAAe,0CA2B5B;IAED,OAAO,CAAC,gBAAgB;CAGxB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,SAAS,CAAA;KAC1B;CACD"}

package/dist/FieldTime.js

@@ -1,34 +1,226 @@
 import { __decorate } from "tslib";
-import { component, html, property, style } from '@a11d/lit';
+import { bind, cache, component, css, html, property, state, style } from '@a11d/lit';
+import { FieldComponent } from '@3mo/field';
 import { Localizer } from '@3mo/localization';
-import { FieldText } from '@3mo/text-fields';
+import { FieldDateTimePrecision } from './FieldDateTimePrecision.js';
+import { dateTimeConverter } from './FieldDateTimeBase.js';
+import { DateTimeSegmentsController, hourCycleConverter, segmentsStyles } from './segments/index.js';
 Localizer.dictionaries.add('de', {
     'Time': 'Uhrzeit',
 });
-// TODO: Migrate to Temporal.PlainTime
+const timePattern = /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/;
 /**
+ * A time-of-day field. Its value is the 24-hour `HH:mm` (or `HH:mm:ss` at second precision) string the
+ * native time input uses, so that it drops in where one was, while the segments follow the language's
+ * own clock — "02:07 PM" for English, "14:07" for German — and the popover offers the hour and minute wheels.
+ *
  * @element mo-field-time
  *
+ * @attr value - The time as `HH:mm` or `HH:mm:ss`
+ * @attr open - Whether the time picker is open
+ * @attr pickerHidden - Hide the time picker
+ * @attr dense - Whether the field is dense
+ * @attr precision - 'minute' (default) or 'second'
+ * @attr hourCycle - The hour cycle of the segments ('h11', 'h12', 'h23' or 'h24'). Defaults to the language's convention.
+ * @attr shortcutReferenceDate - The date the units the user leaves out are taken from. Defaults to now.
+ *
+ * @csspart segments - The group of segments making up the time
+ * @csspart segment - An editable unit of the time
+ * @csspart literal - A separator between the units
+ *
  * @i18n "Time"
  */
-let FieldTime = class FieldTime extends FieldText {
+let FieldTime = class FieldTime extends FieldComponent {
     constructor() {
         super(...arguments);
         this.label = t('Time');
+        this.open = false;
+        this.pickerHidden = false;
+        this.dense = false;
+        this.precision = FieldDateTimePrecision.Minute;
+        this.shortcutReferenceDate = new DateTime();
+        this.navigationDate = new DateTime();
+        this.segments = new DateTimeSegmentsController(this, host => ({
+            timeOnly: true,
+            get value() { return host.selectedDate; },
+            get precision() { return host.precision; },
+            get referenceDate() { return host.shortcutReferenceDate; },
+            get hourCycle() { return host.hourCycle; },
+            get label() { return host._label; },
+            get disabled() { return host.disabled; },
+            get readonly() { return host.readonly; },
+            get required() { return host.required; },
+            get invalid() { return host.invalid; },
+            handleInput: value => host.handleInput(host.toValue(value)),
+            handleChange: value => host.handleChange(host.toValue(value)),
+        }));
+        this.customValidity = '';
+    }
+    /** Alt+ArrowDown opens the picker, as it does on a native date-time input. */
+    handlePickerKey(event) {
+        if (event.altKey && event.key === 'ArrowDown' && !this.pickerHidden) {
+            event.preventDefault();
+            this.open = true;
+        }
+    }
+    /** The value as a time on the reference day, which is all the segments need to render and edit it. */
+    get selectedDate() {
+        const match = this.value?.match(timePattern);
+        if (!match) {
+            return undefined;
+        }
+        const [, hour, minute, second] = match.map(Number);
+        return this.shortcutReferenceDate.dayStart.with({ hour, minute, second: second || 0 });
+    }
+    toValue(date) {
+        if (!date) {
+            return undefined;
+        }
+        const pad = (value) => String(value).padStart(2, '0');
+        const time = `${pad(date.hour)}:${pad(date.minute)}`;
+        return this.precision >= FieldDateTimePrecision.Second ? `${time}:${pad(date.second)}` : time;
+    }
+    valueUpdated() {
+        super.valueUpdated();
+        this.navigationDate = this.selectedDate ?? new DateTime();
+    }
+    get isActive() {
+        return super.isActive || this.open;
+    }
+    get isDense() {
+        return this.dense;
     }
-    get inputType() {
-        return 'time';
+    get isPopulated() {
+        return !!this.value || !this.segments.isEmpty;
     }
-    get startSlotTemplate() {
+    focus() {
+        this.segments.focus();
+    }
+    setCustomValidity(error) {
+        this.customValidity = error;
+    }
+    async checkValidity() {
+        await this.updateComplete;
+        return !this.customValidity && !(this.required && !this.value);
+    }
+    reportValidity() {
+        this.focus();
+    }
+    static get styles() {
+        return css `
+			${super.styles}
+
+			:host {
+				position: relative;
+			}
+
+			:host([disabled]) {
+				pointer-events: none;
+			}
+
+			mo-field {
+				anchor-name: --mo-field-time;
+			}
+
+			mo-popover {
+				position-anchor: --mo-field-time;
+				position-visibility: anchors-visible;
+				background: var(--mo-color-background);
+				box-shadow: var(--mo-shadow);
+				border-radius: var(--mo-border-radius);
+				color: var(--mo-color-foreground);
+				font-size: 0.875em;
+			}
+
+			#selector {
+				height: clamp(175px, 100vh, 300px);
+			}
+
+			${segmentsStyles}
+		`;
+    }
+    get template() {
         return html `
-			<mo-icon slot='start' @click=${() => this.focus()} icon='schedule' ${style({ color: 'var(--mo-color-gray)' })}></mo-icon>
-			${super.startSlotTemplate}
+			${super.template}
+			${this.popoverTemplate}
 		`;
     }
+    get inputTemplate() {
+        return html `
+			<div part='segments' @keydown=${(e) => this.handlePickerKey(e)} ${this.segments.group.ref()}>
+				${this.segments.segments.map(segment => html `<span part=${segment.editable ? 'segment' : 'literal'} ${this.segments.segment.ref(segment)}></span>`)}
+			</div>
+		`;
+    }
+    get endSlotTemplate() {
+        return html `
+			${super.endSlotTemplate}
+			${this.pickerHidden ? html.nothing : html `
+				<mo-icon id='picker' slot='end' icon='schedule'
+					${style({ color: this.isActive ? 'var(--mo-color-accent)' : 'var(--mo-color-gray)', cursor: 'pointer', userSelect: 'none' })}
+				></mo-icon>
+			`}
+		`;
+    }
+    get popoverTemplate() {
+        return this.pickerHidden ? html.nothing : html `
+			<mo-popover tabindex='-1' .anchor=${this} target='picker' ?open=${bind(this, 'open')}>
+				${cache(!this.open ? html.nothing : html `
+					<mo-flex id='selector' direction='horizontal'>
+						<mo-hour-list style='flex: 1'
+							.hourCycle=${this.hourCycle}
+							.navigationDate=${bind(this, 'navigationDate')}
+							.value=${this.selectedDate}
+							@change=${(e) => this.handleListChange(e.detail)}
+						></mo-hour-list>
+						<mo-minute-list style='flex: 1'
+							.navigationDate=${bind(this, 'navigationDate')}
+							.value=${this.selectedDate}
+							@change=${(e) => this.handleListChange(e.detail)}
+						></mo-minute-list>
+						${this.precision < FieldDateTimePrecision.Second ? html.nothing : html `
+							<mo-second-list style='flex: 1'
+								.navigationDate=${bind(this, 'navigationDate')}
+								.value=${this.selectedDate}
+								@change=${(e) => this.handleListChange(e.detail)}
+							></mo-second-list>
+						`}
+					</mo-flex>
+				`)}
+			</mo-popover>
+		`;
+    }
+    handleListChange(date) {
+        this.handleChange(this.toValue(date));
+    }
 };
 __decorate([
     property()
 ], FieldTime.prototype, "label", void 0);
+__decorate([
+    property()
+], FieldTime.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FieldTime.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean })
+], FieldTime.prototype, "pickerHidden", void 0);
+__decorate([
+    property({ type: Boolean })
+], FieldTime.prototype, "dense", void 0);
+__decorate([
+    property({ type: String, converter: value => FieldDateTimePrecision.parse(value || undefined) })
+], FieldTime.prototype, "precision", void 0);
+__decorate([
+    property({ type: String, converter: hourCycleConverter })
+], FieldTime.prototype, "hourCycle", void 0);
+__decorate([
+    property({ type: Object, converter: dateTimeConverter })
+], FieldTime.prototype, "shortcutReferenceDate", void 0);
+__decorate([
+    state()
+], FieldTime.prototype, "navigationDate", void 0);
 FieldTime = __decorate([
     component('mo-field-time')
 ], FieldTime);