@3mo/date-time-fields 0.0.15 → 0.1.1

package/dist/FieldDateTimeBase.js

@@ -0,0 +1,236 @@
+import { __decorate } from "tslib";
+import { cache, css, html, live, nothing, property, style } from '@a11d/lit';
+import { InputFieldComponent } from '@3mo/field';
+function isDateTimePrecisionSmaller(precision, other) {
+    const precisions = [
+        "year" /* FieldDateTimePrecision.Year */,
+        "month" /* FieldDateTimePrecision.Month */,
+        "day" /* FieldDateTimePrecision.Day */,
+        "hour" /* FieldDateTimePrecision.Hour */,
+        "minute" /* FieldDateTimePrecision.Minute */,
+        "second" /* FieldDateTimePrecision.Second */,
+    ];
+    return precisions.indexOf(precision) < precisions.indexOf(other);
+}
+/**
+ * @attr open - Whether the date picker is open
+ * @attr hideDatePicker - Hide the date picker
+ * @attr shortcutReferenceDate - The date to use as a reference for shortcuts
+ * @attr precision - The precision of the date picker. Defaults to 'minute'
+ */
+export class FieldDateTimeBase extends InputFieldComponent {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.hideDatePicker = false;
+        this.shortcutReferenceDate = new DateTime;
+        this.precision = "minute" /* FieldDateTimePrecision.Minute */;
+        this.calendarIconButtonIcon = 'today';
+    }
+    get formatOptions() {
+        var _a, _b;
+        return {
+            calendar: (_a = this.selectedDate) === null || _a === void 0 ? void 0 : _a.calendarId,
+            timeZone: (_b = this.selectedDate) === null || _b === void 0 ? void 0 : _b.timeZoneId,
+            year: 'numeric',
+            month: isDateTimePrecisionSmaller(this.precision, "month" /* FieldDateTimePrecision.Month */) ? undefined : '2-digit',
+            day: isDateTimePrecisionSmaller(this.precision, "day" /* FieldDateTimePrecision.Day */) ? undefined : '2-digit',
+            hour: isDateTimePrecisionSmaller(this.precision, "hour" /* FieldDateTimePrecision.Hour */) ? undefined : '2-digit',
+            minute: isDateTimePrecisionSmaller(this.precision, "minute" /* FieldDateTimePrecision.Minute */) ? undefined : '2-digit',
+            second: isDateTimePrecisionSmaller(this.precision, "second" /* FieldDateTimePrecision.Second */) ? undefined : '2-digit',
+            hourCycle: 'h23',
+        };
+    }
+    roundToPrecision(date) {
+        return date.with({
+            year: date.year,
+            month: isDateTimePrecisionSmaller(this.precision, "month" /* FieldDateTimePrecision.Month */) ? 1 : date.month,
+            day: isDateTimePrecisionSmaller(this.precision, "day" /* FieldDateTimePrecision.Day */) ? 1 : date.day,
+            hour: isDateTimePrecisionSmaller(this.precision, "hour" /* FieldDateTimePrecision.Hour */) ? 0 : date.hour,
+            minute: isDateTimePrecisionSmaller(this.precision, "minute" /* FieldDateTimePrecision.Minute */) ? 0 : date.minute,
+            second: isDateTimePrecisionSmaller(this.precision, "second" /* FieldDateTimePrecision.Second */) ? 0 : date.second,
+        });
+    }
+    handleChange(value, e) {
+        super.handleChange(value, e);
+        this.inputStringValue = this.valueToInputValue(value);
+    }
+    get isActive() {
+        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);
+			}
+		`;
+    }
+    get template() {
+        return html `
+			${super.template}
+			${this.popoverTemplate}
+		`;
+    }
+    get endSlotTemplate() {
+        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)}
+			>
+		`;
+    }
+    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>
+		`;
+    }
+    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>
+		`;
+    }
+    get popoverContentTemplate() {
+        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}
+		`;
+    }
+    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>
+		`;
+    }
+    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>
+		`;
+    }
+    get dayTemplate() {
+        return ["year" /* FieldDateTimePrecision.Year */, "month" /* FieldDateTimePrecision.Month */].includes(this.precision) ? nothing : this.calendarTemplate;
+    }
+    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>
+		`;
+    }
+    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>
+		`;
+    }
+    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>
+		`;
+    }
+    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>
+		`;
+    }
+    handleSelectedDateChange(date, precision) {
+        date;
+        precision;
+        this.requestUpdate();
+    }
+}
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        updated(open, wasOpen) {
+            if (open === false && wasOpen === true) {
+                this.change.dispatch(this.value);
+            }
+        }
+    })
+], FieldDateTimeBase.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean })
+], FieldDateTimeBase.prototype, "hideDatePicker", void 0);
+__decorate([
+    property({ type: Object })
+], FieldDateTimeBase.prototype, "shortcutReferenceDate", void 0);
+__decorate([
+    property()
+], FieldDateTimeBase.prototype, "precision", void 0);

package/dist/FieldDateTimeRange.d.ts

@@ -0,0 +1,35 @@
+import { MaterialIcon } from '@3mo/icon';
+import { FieldDateTimeBase as FieldDateTimeBase, FieldDateTimePrecision } from './FieldDateTimeBase.js';
+declare const enum FieldDateRangeSelection {
+    Start = "start",
+    End = "end"
+}
+/**
+ * @element mo-field-date-range
+ *
+ * @attr selection - The selected date range. Either "start" or "end". Defaults to "start".
+ * @attr value - The selected date range.
+ *
+ * @i18n "Start"
+ * @i18n "End"
+ */
+export declare class FieldDateTimeRange extends FieldDateTimeBase<DateTimeRange | undefined> {
+    protected get navigatingDate(): import("@3mo/date-time/DateTime.js").DateTime;
+    protected get selectedDate(): import("@3mo/date-time/DateTime.js").DateTime | undefined;
+    selection: FieldDateRangeSelection;
+    value?: DateTimeRange;
+    static get styles(): import("@a11d/lit").CSSResult;
+    protected calendarIconButtonIcon: MaterialIcon;
+    protected get calendarTemplate(): import("lit-html").TemplateResult<1>;
+    protected get popoverContentTemplate(): import("lit-html").TemplateResult<1>;
+    handleSelectedDateChange(date: DateTime, precision: FieldDateTimePrecision): void;
+    protected valueToInputValue(value: DateTimeRange | undefined): string;
+    protected inputValueToValue(value: string): import("@3mo/date-time/DateTimeRange.js").DateTimeRange | undefined;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mo-field-date-time-range': FieldDateTimeRange;
+    }
+}
+export {};
+//# sourceMappingURL=FieldDateTimeRange.d.ts.map

package/dist/FieldDateTimeRange.d.ts.map

@@ -0,0 +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;AAGvG,mBAAW,uBAAuB;IACjC,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,SAAS,KAAK,gBAAgB,yCAQ7B;IAED,cAAuB,sBAAsB,yCAW5C;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"}

package/dist/FieldDateTimeRange.js

@@ -0,0 +1,91 @@
+import { __decorate } from "tslib";
+import { component, css, html, property } from '@a11d/lit';
+import { FieldDateTimeBase as FieldDateTimeBase } from './FieldDateTimeBase.js';
+import { DateRangeParser } from './DateRangeParser.js';
+/**
+ * @element mo-field-date-range
+ *
+ * @attr selection - The selected date range. Either "start" or "end". Defaults to "start".
+ * @attr value - The selected date range.
+ *
+ * @i18n "Start"
+ * @i18n "End"
+ */
+let FieldDateTimeRange = class FieldDateTimeRange extends FieldDateTimeBase {
+    constructor() {
+        super(...arguments);
+        this.selection = "start" /* FieldDateRangeSelection.Start */;
+        this.calendarIconButtonIcon = 'date_range';
+    }
+    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;
+			}
+		`;
+    }
+    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>
+		`;
+    }
+    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}
+		`;
+    }
+    handleSelectedDateChange(date, precision) {
+        var _a, _b;
+        this.value = this.selection === "start" /* FieldDateRangeSelection.Start */
+            ? new DateTimeRange(this.roundToPrecision(date), (_a = this.value) === null || _a === void 0 ? void 0 : _a.end)
+            : new DateTimeRange((_b = this.value) === null || _b === void 0 ? void 0 : _b.start, this.roundToPrecision(date));
+        if (this.precision === precision) {
+            this.selection = this.selection === "start" /* FieldDateRangeSelection.Start */
+                ? "end" /* FieldDateRangeSelection.End */
+                : "start" /* FieldDateRangeSelection.Start */;
+        }
+        super.handleSelectedDateChange(date, precision);
+    }
+    valueToInputValue(value) {
+        var _a;
+        return value ? (_a = value.format(this.formatOptions)) !== null && _a !== void 0 ? _a : '' : '';
+    }
+    inputValueToValue(value) {
+        return value ? DateRangeParser.parse(value, this.shortcutReferenceDate) : undefined;
+    }
+};
+__decorate([
+    property()
+], FieldDateTimeRange.prototype, "selection", void 0);
+__decorate([
+    property({ type: Object })
+], FieldDateTimeRange.prototype, "value", void 0);
+FieldDateTimeRange = __decorate([
+    component('mo-field-date-time-range')
+], FieldDateTimeRange);
+export { FieldDateTimeRange };

package/dist/FieldTime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldTime.d.ts","sourceRoot":"","sources":["../FieldTime.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAE5C,qBACa,SAAU,SAAQ,SAAS;IACvC,SAAkB,SAAS,UAAS;IAEpC,cAAuB,iBAAiB,yCAKvC;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,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAI5C,qBACa,SAAU,SAAQ,SAAS;IACvC,SAAkB,SAAS,UAAS;IAEpC,cAAuB,iBAAiB,yCAKvC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,SAAS,CAAA;KAC1B;CACD"}

package/dist/FieldTime.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { component, html, style } from '@a11d/lit';
 import { FieldText } from '@3mo/text-fields';
+// TODO: Migrate to Temporal.PlainTime
 let FieldTime = class FieldTime extends FieldText {
     constructor() {
         super(...arguments);

package/dist/index.d.ts

@@ -3,9 +3,15 @@ import '@3mo/icon';
 import '@3mo/icon-button';
 import '@3mo/popover';
 import '@3mo/flex';
+import '@3mo/grid';
 import '@3mo/field';
+import '@3mo/tab';
+import '@3mo/scroller';
+import '@3mo/list';
+export * from './selection/index.js';
 export * from './FieldTime.js';
-export * from './calendar/index.js';
-export * from './FieldDate.js';
+export * from './FieldDateTime.js';
+export * from './FieldDateTimeRange.js';
 export * from './FieldDateRange.js';
+export * from './FieldDate.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAA;AACvB,OAAO,WAAW,CAAA;AAClB,OAAO,kBAAkB,CAAA;AACzB,OAAO,cAAc,CAAA;AACrB,OAAO,WAAW,CAAA;AAClB,OAAO,YAAY,CAAA;AACnB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAA;AACvB,OAAO,WAAW,CAAA;AAClB,OAAO,kBAAkB,CAAA;AACzB,OAAO,cAAc,CAAA;AACrB,OAAO,WAAW,CAAA;AAClB,OAAO,WAAW,CAAA;AAClB,OAAO,YAAY,CAAA;AACnB,OAAO,UAAU,CAAA;AACjB,OAAO,eAAe,CAAA;AACtB,OAAO,WAAW,CAAA;AAClB,cAAc,sBAAsB,CAAA;AACpC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA"}

package/dist/index.js

@@ -3,8 +3,14 @@ import '@3mo/icon';
 import '@3mo/icon-button';
 import '@3mo/popover';
 import '@3mo/flex';
+import '@3mo/grid';
 import '@3mo/field';
+import '@3mo/tab';
+import '@3mo/scroller';
+import '@3mo/list';
+export * from './selection/index.js';
 export * from './FieldTime.js';
-export * from './calendar/index.js';
-export * from './FieldDate.js';
+export * from './FieldDateTime.js';
+export * from './FieldDateTimeRange.js';
 export * from './FieldDateRange.js';
+export * from './FieldDate.js';

package/dist/selection/DateList.d.ts

@@ -0,0 +1,18 @@
+import { Component, HTMLTemplateResult } from '@a11d/lit';
+import { IntervalController } from '@3mo/interval-controller';
+export declare abstract class DateList extends Component {
+    readonly change: EventDispatcher<DateTime>;
+    navigatingValue: DateTime;
+    value?: DateTime;
+    private preventIntervalScrolling;
+    get now(): import("@3mo/date-time/DateTime.js").DateTime;
+    readonly intervalController: IntervalController;
+    static get styles(): import("@a11d/lit").CSSResult;
+    private readonly selectedListItem?;
+    private readonly nowListItem?;
+    protected connected(): void;
+    protected get template(): HTMLTemplateResult;
+    protected scrollIntoSelectedItem(): Promise<void>;
+    protected abstract get listItemsTemplate(): HTMLTemplateResult;
+}
+//# sourceMappingURL=DateList.d.ts.map

package/dist/selection/DateList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateList.d.ts","sourceRoot":"","sources":["../../selection/DateList.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAA8C,MAAM,WAAW,CAAA;AACrG,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,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;IAKtC,SAAS,CAAC,QAAQ,KAAK,iBAAiB,IAAI,kBAAkB,CAAA;CAC9D"}

package/dist/selection/DateList.js

@@ -0,0 +1,69 @@
+import { __decorate } from "tslib";
+import { Component, css, event, html, nothing, property, query } from '@a11d/lit';
+import { IntervalController } from '@3mo/interval-controller';
+export class DateList extends Component {
+    constructor() {
+        super(...arguments);
+        this.preventIntervalScrolling = false;
+        this.intervalController = new IntervalController(this, 1000, () => {
+            this.requestUpdate();
+            if (!this.value && this.preventIntervalScrolling === false) {
+                this.scrollIntoSelectedItem();
+            }
+        });
+    }
+    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);
+			}
+		`;
+    }
+    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>
+		`;
+    }
+    async scrollIntoSelectedItem() {
+        var _a, _b;
+        await this.updateComplete;
+        (_b = ((_a = this.selectedListItem) !== null && _a !== void 0 ? _a : this.nowListItem)) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+}
+__decorate([
+    event()
+], DateList.prototype, "change", void 0);
+__decorate([
+    property({ type: Object })
+], DateList.prototype, "navigatingValue", void 0);
+__decorate([
+    property({ type: Object, updated() { this.scrollIntoSelectedItem(); } })
+], DateList.prototype, "value", void 0);
+__decorate([
+    query('mo-selectable-list-item[selected]')
+], DateList.prototype, "selectedListItem", void 0);
+__decorate([
+    query('mo-selectable-list-item[data-now]')
+], DateList.prototype, "nowListItem", void 0);

package/dist/selection/HourList.d.ts

@@ -0,0 +1,10 @@
+import { DateList } from './DateList.js';
+export declare class HourList extends DateList {
+    protected get listItemsTemplate(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mo-hour-list': HourList;
+    }
+}
+//# sourceMappingURL=HourList.d.ts.map

package/dist/selection/HourList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HourList.d.ts","sourceRoot":"","sources":["../../selection/HourList.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGxC,qBACa,QAAS,SAAQ,QAAQ;IACrC,cAAuB,iBAAiB,yCAUvC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,QAAQ,CAAA;KACxB;CACD"}

package/dist/selection/HourList.js

@@ -0,0 +1,23 @@
+import { __decorate } from "tslib";
+import { component, html, range } from '@a11d/lit';
+import { DateList } from './DateList.js';
+let HourList = class HourList extends DateList {
+    get listItemsTemplate() {
+        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>
+			`;
+        })}
+		`;
+    }
+};
+HourList = __decorate([
+    component('mo-hour-list')
+], HourList);
+export { HourList };

package/dist/selection/MinuteList.d.ts

@@ -0,0 +1,10 @@
+import { DateList } from './DateList.js';
+export declare class MinuteList extends DateList {
+    protected get listItemsTemplate(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mo-minute-list': MinuteList;
+    }
+}
+//# sourceMappingURL=MinuteList.d.ts.map

package/dist/selection/MinuteList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinuteList.d.ts","sourceRoot":"","sources":["../../selection/MinuteList.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,qBACa,UAAW,SAAQ,QAAQ;IACvC,cAAuB,iBAAiB,yCAUvC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,UAAU,CAAA;KAC5B;CACD"}

package/dist/selection/MinuteList.js

@@ -0,0 +1,23 @@
+import { __decorate } from "tslib";
+import { component, html, range } from '@a11d/lit';
+import { DateList } from './DateList.js';
+let MinuteList = class MinuteList extends DateList {
+    get listItemsTemplate() {
+        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>
+			`;
+        })}
+		`;
+    }
+};
+MinuteList = __decorate([
+    component('mo-minute-list')
+], MinuteList);
+export { MinuteList };

package/dist/selection/MonthList.d.ts

@@ -0,0 +1,12 @@
+import { DateList } from './DateList.js';
+export declare class MonthList extends DateList {
+    static get styles(): import("@a11d/lit").CSSResult;
+    private get monthNames();
+    protected get listItemsTemplate(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mo-month-list': MonthList;
+    }
+}
+//# sourceMappingURL=MonthList.d.ts.map

package/dist/selection/MonthList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthList.d.ts","sourceRoot":"","sources":["../../selection/MonthList.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,qBACa,SAAU,SAAQ,QAAQ;IACtC,WAAoB,MAAM,kCAQzB;IAED,OAAO,KAAK,UAAU,GAKrB;IAED,cAAuB,iBAAiB,yCAUvC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,SAAS,CAAA;KAC1B;CACD"}

package/dist/selection/MonthList.js

@@ -0,0 +1,38 @@
+import { __decorate } from "tslib";
+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;
+			}
+		`;
+    }
+    get monthNames() {
+        return new Array(this.navigatingValue.monthsInYear)
+            .fill(undefined)
+            .map((_, i) => this.navigatingValue.yearStart.add({ months: i }))
+            .map(date => [date.month, date.format({ month: 'long' })]);
+    }
+    get listItemsTemplate() {
+        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>
+			`;
+        })}
+		`;
+    }
+};
+MonthList = __decorate([
+    component('mo-month-list')
+], MonthList);
+export { MonthList };

package/dist/selection/SecondList.d.ts

@@ -0,0 +1,10 @@
+import { DateList } from './DateList.js';
+export declare class SecondList extends DateList {
+    protected get listItemsTemplate(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mo-second-list': SecondList;
+    }
+}
+//# sourceMappingURL=SecondList.d.ts.map

package/dist/selection/SecondList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecondList.d.ts","sourceRoot":"","sources":["../../selection/SecondList.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,qBACa,UAAW,SAAQ,QAAQ;IACvC,cAAuB,iBAAiB,yCAUvC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,UAAU,CAAA;KAC5B;CACD"}