@3mo/date-time-fields 0.0.14 → 0.1.0

package/dist/selection/SecondList.js

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

package/dist/selection/YearList.d.ts

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

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

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

package/dist/selection/YearList.js

@@ -0,0 +1,27 @@
+import { __decorate } from "tslib";
+import { component, html } from '@a11d/lit';
+import { DateList } from './DateList.js';
+let YearList = class YearList extends DateList {
+    get listItemsTemplate() {
+        var _a;
+        (_a = this.years) !== null && _a !== void 0 ? _a : (this.years = new Array(150)
+            .fill(undefined)
+            .map((_, i) => this.navigatingValue.year - 100 + i));
+        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>
+			`;
+        })}
+		`;
+    }
+};
+YearList = __decorate([
+    component('mo-year-list')
+], YearList);
+export { YearList };

package/dist/selection/calendar/Calendar.d.ts

@@ -0,0 +1,18 @@
+import { Component, ClassInfo } from '@a11d/lit';
+import '@a11d/array.prototype.group';
+export declare class Calendar extends Component {
+    includeWeekNumbers: boolean;
+    navigatingValue: import("@3mo/date-time/DateTime.js").DateTime;
+    static get styles(): import("@a11d/lit").CSSResult;
+    protected get template(): import("lit-html").TemplateResult<1>;
+    private rangeOf;
+    protected getDayTemplate(day: DateTime): import("lit-html").TemplateResult<1>;
+    protected handleDayClick(day: DateTime): void;
+    protected getDayElementClasses(day: DateTime): ClassInfo;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mo-calendar': Calendar;
+    }
+}
+//# sourceMappingURL=Calendar.d.ts.map

package/dist/selection/calendar/Calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../selection/calendar/Calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA4D,SAAS,EAAE,MAAM,WAAW,CAAA;AAC1G,OAAO,6BAA6B,CAAA;AAEpC,qBACa,QAAS,SAAQ,SAAS;IACM,kBAAkB,UAAQ;IAC1C,eAAe,gDAAe;IAE1D,WAAoB,MAAM,kCAmDzB;IAED,cAAuB,QAAQ,yCA0B9B;IAED,OAAO,CAAG,OAAO;IAOjB,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,QAAQ;IAQtC,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,QAAQ;IAItC,SAAS,CAAC,oBAAoB,CAAC,GAAG,EAAE,QAAQ,GAAG,SAAS;CAQxD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,QAAQ,CAAA;KACvB;CACD"}

package/dist/selection/calendar/Calendar.js

@@ -0,0 +1,123 @@
+import { __decorate } from "tslib";
+import { Component, css, component, html, nothing, property, classMap, style } from '@a11d/lit';
+import '@a11d/array.prototype.group';
+let Calendar = class Calendar extends Component {
+    constructor() {
+        super(...arguments);
+        this.includeWeekNumbers = false;
+        this.navigatingValue = new DateTime;
+    }
+    static get styles() {
+        return css `
+			:host {
+				--mo-calendar-day-size: 36px;
+				--mo-calendar-week-number-width: var(--mo-calendar-day-size);
+				padding-inline: 10px;
+			}
+
+			.monthHeader {
+				color: var(--mo-color-gray);
+				align-items: center;
+			}
+
+			.week {
+				color: var(--mo-color-gray);
+			}
+
+			.day {
+				text-align: center;
+				border-radius: 100px;
+				cursor: pointer;
+				transition: 100ms;
+				font-weight: 500;
+				user-select: none;
+				font-size: medium;
+				width: var(--mo-calendar-day-size);
+				-webkit-user-select: none;
+				align-items: center;
+				justify-content: center;
+			}
+
+			.day {
+				height: var(--mo-calendar-day-size);
+			}
+
+			.day:hover {
+				background: var(--mo-color-transparent-gray-3);
+			}
+
+			.day:not(.isInMonth) {
+				color: var(--mo-color-gray);
+			}
+
+			.day.today {
+				outline: 2px dashed var(--mo-color-gray-transparent);
+			}
+
+			.day.navigation {
+				background: var(--mo-color-transparent-gray-3);
+			}
+		`;
+    }
+    get template() {
+        const start = this.navigatingValue.monthStart.weekStart;
+        const end = this.navigatingValue.monthEnd.weekEnd;
+        const range = [...this.rangeOf(start, end)];
+        const weekDaysInMonth = [...range.groupToMap(d => String(d.weekOfYear))]
+            .sort(([, dates1], [, dates2]) => { var _a; return ((_a = dates1[0]) === null || _a === void 0 ? void 0 : _a.isBefore(dates2[0])) ? -1 : +1; });
+        return html `
+			<mo-grid class='month'
+				rows='repeat(auto-fill, var(--mo-calendar-day-size))'
+				columns=${this.includeWeekNumbers ? 'var(--mo-calendar-week-number-width) repeat(7, var(--mo-calendar-day-size))' : 'repeat(7, var(--mo-calendar-day-size))'}
+				${style({ alignItems: 'center', justifyItems: 'center' })}
+			>
+				${this.includeWeekNumbers === false ? nothing : html `<div></div>`}
+
+				${this.navigatingValue.weekDayNames.map(dayName => html `
+					<div class='monthHeader'>
+						${dayName.charAt(0).toUpperCase() + dayName.charAt(1)}
+					</div>
+				`)}
+
+				${weekDaysInMonth.map(([weekNumber, days]) => html `
+					${this.includeWeekNumbers === false ? nothing : html `<div class='week'>${weekNumber}</div>`}
+					${days.map(day => this.getDayTemplate(day))}
+				`)}
+			</mo-grid>
+		`;
+    }
+    *rangeOf(start, end) {
+        while (start.isBefore(end)) {
+            yield start;
+            start = start.add({ days: 1 });
+        }
+    }
+    getDayTemplate(day) {
+        return html `
+			<mo-flex class=${classMap(this.getDayElementClasses(day))} @click=${() => this.handleDayClick(day)}>
+				${day.format({ day: 'numeric' })}
+			</mo-flex>
+		`;
+    }
+    handleDayClick(day) {
+        day;
+    }
+    getDayElementClasses(day) {
+        const now = new DateTime();
+        return {
+            day: true,
+            today: now.dayStart.equals(day.dayStart),
+            isInMonth: day.month === this.navigatingValue.month
+        };
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Calendar.prototype, "includeWeekNumbers", void 0);
+__decorate([
+    property({ type: Object })
+], Calendar.prototype, "navigatingValue", void 0);
+Calendar = __decorate([
+    component('mo-calendar')
+], Calendar);
+export { Calendar };

package/dist/selection/calendar/SelectableCalendar.d.ts

@@ -0,0 +1,18 @@
+import { Calendar } from './Calendar.js';
+import { DateTime } from '@3mo/date-time';
+/** @fires change {CustomEvent<T>} */
+export declare class SelectableCalendar extends Calendar {
+    readonly change: EventDispatcher<DateTime>;
+    value?: DateTime;
+    static get styles(): import("@a11d/lit").CSSResult;
+    protected handleDayClick(day: DateTime): void;
+    protected getDayElementClasses(day: DateTime): {
+        selected: boolean;
+    };
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mo-selectable-calendar': SelectableCalendar;
+    }
+}
+//# sourceMappingURL=SelectableCalendar.d.ts.map

package/dist/selection/calendar/SelectableCalendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableCalendar.d.ts","sourceRoot":"","sources":["../../../selection/calendar/SelectableCalendar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAEzC,qCAAqC;AACrC,qBACa,kBAAmB,SAAQ,QAAQ;IACtC,QAAQ,CAAC,MAAM,EAAG,eAAe,CAAC,QAAQ,CAAC,CAAA;IAExB,KAAK,CAAC,EAAE,QAAQ,CAAA;IAE5C,WAAoB,MAAM,kCASzB;cAEkB,cAAc,CAAC,GAAG,EAAE,QAAQ;cAK5B,oBAAoB,CAAC,GAAG,EAAE,QAAQ;;;CAMrD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,wBAAwB,EAAE,kBAAkB,CAAA;KAC5C;CACD"}

package/dist/selection/calendar/SelectableCalendar.js

@@ -0,0 +1,34 @@
+import { __decorate } from "tslib";
+import { component, css, event, property } from '@a11d/lit';
+import { Calendar } from './Calendar.js';
+/** @fires change {CustomEvent<T>} */
+let SelectableCalendar = class SelectableCalendar extends Calendar {
+    static get styles() {
+        return css `
+			${super.styles}
+
+			.day.selected {
+				background: var(--mo-color-accent-transparent);
+				color: var(--mo-color-accent) !important;
+			}
+		`;
+    }
+    handleDayClick(day) {
+        this.value = day;
+        this.change.dispatch(day);
+    }
+    getDayElementClasses(day) {
+        var _a;
+        return Object.assign(Object.assign({}, super.getDayElementClasses(day)), { selected: !!this.value && day.dayStart.equals((_a = this.value) === null || _a === void 0 ? void 0 : _a.dayStart) });
+    }
+};
+__decorate([
+    event()
+], SelectableCalendar.prototype, "change", void 0);
+__decorate([
+    property({ type: Object })
+], SelectableCalendar.prototype, "value", void 0);
+SelectableCalendar = __decorate([
+    component('mo-selectable-calendar')
+], SelectableCalendar);
+export { SelectableCalendar };

package/dist/selection/calendar/SelectableRangeCalendar.d.ts

@@ -0,0 +1,19 @@
+import { DateTime } from '@3mo/date-time';
+import { SelectableCalendar } from './SelectableCalendar.js';
+/** @fires change {CustomEvent<T>} */
+export declare class SelectableRangeCalendar extends SelectableCalendar {
+    dateRange?: DateTimeRange;
+    static get styles(): import("@a11d/lit").CSSResult;
+    protected getDayElementClasses(day: DateTime): {
+        isInRange: boolean;
+        first: boolean;
+        last: boolean;
+        selected: boolean;
+    };
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mo-selectable-range-calendar': SelectableRangeCalendar;
+    }
+}
+//# sourceMappingURL=SelectableRangeCalendar.d.ts.map

package/dist/selection/calendar/SelectableRangeCalendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableRangeCalendar.d.ts","sourceRoot":"","sources":["../../../selection/calendar/SelectableRangeCalendar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAE5D,qCAAqC;AACrC,qBACa,uBAAwB,SAAQ,kBAAkB;IAClC,SAAS,CAAC,EAAE,aAAa,CAAA;IAErD,WAAoB,MAAM,kCAwBzB;cAEkB,oBAAoB,CAAC,GAAG,EAAE,QAAQ;;;;;;CAWrD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,8BAA8B,EAAE,uBAAuB,CAAA;KACvD;CACD"}

package/dist/selection/calendar/SelectableRangeCalendar.js

@@ -0,0 +1,45 @@
+import { __decorate } from "tslib";
+import { component, css, property } from '@a11d/lit';
+import { SelectableCalendar } from './SelectableCalendar.js';
+/** @fires change {CustomEvent<T>} */
+let SelectableRangeCalendar = class SelectableRangeCalendar extends SelectableCalendar {
+    static get styles() {
+        return css `
+			${super.styles}
+
+			.day.isInRange:not(.selected) {
+				background: rgba(var(--mo-color-accent-base), 0.08);
+			}
+
+			.day.isInRange {
+				border-radius: 0px;
+			}
+
+			.day.selected.first {
+				border-radius: 100px 0 0 100px;
+			}
+
+			.day.selected.last {
+				border-radius: 0 100px 100px 0;
+			}
+
+			.day.selected.first.last {
+				border-radius: 100px;
+			}
+		`;
+    }
+    getDayElementClasses(day) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const first = (_c = (_b = (_a = this.dateRange) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.dayStart.equals(day.dayStart)) !== null && _c !== void 0 ? _c : false;
+        const last = (_f = (_e = (_d = this.dateRange) === null || _d === void 0 ? void 0 : _d.end) === null || _e === void 0 ? void 0 : _e.dayStart.equals(day.dayStart)) !== null && _f !== void 0 ? _f : false;
+        return Object.assign(Object.assign({}, super.getDayElementClasses(day)), { isInRange: (_h = (_g = this.dateRange) === null || _g === void 0 ? void 0 : _g.includes(day)) !== null && _h !== void 0 ? _h : false, first,
+            last, selected: first || last });
+    }
+};
+__decorate([
+    property({ type: Object })
+], SelectableRangeCalendar.prototype, "dateRange", void 0);
+SelectableRangeCalendar = __decorate([
+    component('mo-selectable-range-calendar')
+], SelectableRangeCalendar);
+export { SelectableRangeCalendar };

package/dist/selection/calendar/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Calendar.js';
+export * from './SelectableCalendar.js';
+export * from './SelectableRangeCalendar.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/selection/calendar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../selection/calendar/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA;AACvC,cAAc,8BAA8B,CAAA"}

package/dist/{calendar → selection/calendar}/index.js

@@ -1,3 +1,3 @@
-export * from './CalendarSelectionAdapter.js';
 export * from './Calendar.js';
 export * from './SelectableCalendar.js';
+export * from './SelectableRangeCalendar.js';

package/dist/selection/index.d.ts

@@ -0,0 +1,7 @@
+export * from './MonthList.js';
+export * from './YearList.js';
+export * from './HourList.js';
+export * from './MinuteList.js';
+export * from './SecondList.js';
+export * from './calendar/index.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../selection/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA"}

package/dist/selection/index.js

@@ -0,0 +1,6 @@
+export * from './MonthList.js';
+export * from './YearList.js';
+export * from './HourList.js';
+export * from './MinuteList.js';
+export * from './SecondList.js';
+export * from './calendar/index.js';