@3mo/date-time-fields 0.10.3 → 0.11.0-preview.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@3mo/date-time-fields",
-	"version": "0.10.3",
+	"version": "0.11.0-preview.0",
 	"description": "Date time fields let people select dates, date-ranges, and times.",
 	"repository": {
 		"type": "git",
@@ -33,13 +33,13 @@
 		"@3mo/icon-button": "x",
 		"@3mo/interval-controller": "x",
 		"@3mo/focus-controller": "x",
+		"@3mo/intersection-observer": "x",
 		"@3mo/list": "x",
 		"@3mo/localization": "x",
 		"@3mo/popover": ">=0.9.x",
 		"@3mo/scroller": "x",
 		"@3mo/tab": "x",
 		"@3mo/text-fields": "x",
-		"@a11d/array.prototype.group": "x",
 		"@a11d/lit": "x",
 		"tslib": "x",
 		"typescript-memoize": "1.x"

package/dist/selection/MonthList.d.ts

@@ -1,12 +0,0 @@
-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").HTMLTemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'mo-month-list': MonthList;
-    }
-}
-//# sourceMappingURL=MonthList.d.ts.map

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

@@ -1 +0,0 @@
-{"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,0CAWvC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,SAAS,CAAA;KAC1B;CACD"}

package/dist/selection/MonthList.js

@@ -1,36 +0,0 @@
-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]) => html `
-				<mo-selectable-list-item
-					?selected=${this.value?.month === month}
-					?data-navigating=${this.navigatingValue.month === month}
-					@navigate=${() => this.navigate.dispatch(this.navigatingValue.with({ month }))}
-					@change=${(e) => !e.selected ? void 0 : this.change.dispatch((this.value ?? new DateTime).with({ month }))}
-				>${name}</mo-selectable-list-item>
-			`)}
-		`;
-    }
-};
-MonthList = __decorate([
-    component('mo-month-list')
-], MonthList);
-export { MonthList };

package/dist/selection/YearList.d.ts

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

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

@@ -1 +0,0 @@
-{"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,QAAQ,CAAC,OAAO,CAAsB;IAC9C,OAAO,CAAC,KAAK,CAE0B;IAEvC,cAAuB,iBAAiB,0CAWvC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,QAAQ,CAAA;KACxB;CACD"}

package/dist/selection/YearList.js

@@ -1,28 +0,0 @@
-import { __decorate } from "tslib";
-import { component, html } from '@a11d/lit';
-import { DateList } from './DateList.js';
-let YearList = class YearList extends DateList {
-    constructor() {
-        super(...arguments);
-        this.nowYear = new DateTime().year;
-        this.years = new Array(150)
-            .fill(undefined)
-            .map((_, i) => this.nowYear - 100 + i);
-    }
-    get listItemsTemplate() {
-        return html `
-			${this.years.map(year => html `
-				<mo-selectable-list-item
-					?selected=${this.value?.year === year}
-					?data-navigating=${this.navigatingValue.year === year}
-					@navigate=${() => this.navigate.dispatch(this.navigatingValue.with({ year }))}
-					@change=${(e) => !e.selected ? void 0 : this.change.dispatch((this.value ?? new DateTime).with({ year }))}
-				>${year.format()}</mo-selectable-list-item>
-			`)}
-		`;
-    }
-};
-YearList = __decorate([
-    component('mo-year-list')
-], YearList);
-export { YearList };

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

@@ -1,24 +0,0 @@
-import { Component, type ClassInfo } from '@a11d/lit';
-import '@a11d/array.prototype.group';
-/**
- * @fires dayClick - Dispatched when a day is clicked, with the clicked date as detail.
- */
-export declare class Calendar extends Component {
-    readonly dayClick: EventDispatcher<DateTime>;
-    private static rangeOf;
-    includeWeek: boolean;
-    navigatingValue: import("@3mo/date-time/DateTime.js").DateTime;
-    private days;
-    static get styles(): import("@a11d/lit").CSSResult;
-    private get columns();
-    private getColumnName;
-    protected get template(): import("lit-html").HTMLTemplateResult;
-    protected getDayElementClasses(day: DateTime): ClassInfo;
-    private get today();
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'mo-calendar': Calendar;
-    }
-}
-//# sourceMappingURL=Calendar.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../selection/calendar/Calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA4C,KAAK,SAAS,EAAgB,MAAM,WAAW,CAAA;AAC7G,OAAO,6BAA6B,CAAA;AAGpC;;GAEG;AACH,qBACa,QAAS,SAAQ,SAAS;IAC7B,QAAQ,CAAC,QAAQ,EAAG,eAAe,CAAC,QAAQ,CAAC,CAAA;IAEtD,OAAO,CAAC,MAAM,CAAE,OAAO;IAOqB,WAAW,UAAQ;IAQ5D,eAAe,gDAAe;IAExB,OAAO,CAAC,IAAI,CAAwB;IAE7C,WAAoB,MAAM,kCA2DzB;IAED,OAAO,KAAK,OAAO,GAMlB;IAED,OAAO,CAAC,aAAa;IAIrB,cAAuB,QAAQ,0CAkC9B;IAED,SAAS,CAAC,oBAAoB,CAAC,GAAG,EAAE,QAAQ,GAAG,SAAS;IASxD,OAAO,KAAK,KAAK,GAAqC;CACtD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,QAAQ,CAAA;KACvB;CACD"}

package/dist/selection/calendar/Calendar.js

@@ -1,160 +0,0 @@
-import { __decorate } from "tslib";
-import { Component, css, component, html, property, classMap, state, event } from '@a11d/lit';
-import '@a11d/array.prototype.group';
-import { MemoizeExpiring as memoizeExpiring } from 'typescript-memoize';
-/**
- * @fires dayClick - Dispatched when a day is clicked, with the clicked date as detail.
- */
-let Calendar = class Calendar extends Component {
-    constructor() {
-        super(...arguments);
-        this.includeWeek = false;
-        this.navigatingValue = new DateTime;
-        this.days = new Array();
-    }
-    static *rangeOf(start, end) {
-        while (!start.isAfter(end)) {
-            yield start;
-            start = start.add({ days: 1 });
-        }
-    }
-    static get styles() {
-        return css `
-			:host {
-				--mo-calendar-day-size: 36px;
-				--mo-calendar-week-number-width: var(--mo-calendar-day-size);
-				padding: 0.5rem;
-			}
-
-			.month {
-				place-items: center;
-
-				.heading {
-					font-weight: 500;
-					font-size: 16px;
-					grid-column: 1 / -1;
-					place-self: stretch;
-					display: flex;
-					align-items: center;
-					padding-inline-start: 6px;
-					padding-block-end: 0.5rem;
-				}
-
-				.header {
-					text-align: center;
-					color: var(--mo-color-gray);
-					padding-block: 0.25rem
-				}
-			}
-
-			.week {
-				color: var(--mo-color-gray);
-			}
-
-			.day {
-				text-align: center;
-				border-radius: var(--mo-border-radius);
-				cursor: pointer;
-				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;
-				height: var(--mo-calendar-day-size);
-
-				&:hover {
-					background: var(--mo-color-transparent-gray-3);
-				}
-
-				&.outsideMonth {
-					color: var(--mo-color-gray);
-				}
-
-				&.today {
-					outline: 2px dashed var(--mo-color-gray-transparent);
-				}
-			}
-		`;
-    }
-    get columns() {
-        const daysInWeek = this.days[0]?.daysInWeek ?? 7;
-        return [
-            !this.includeWeek ? undefined : '[week] var(--mo-calendar-week-number-width)',
-            ...this.days.slice(0, daysInWeek).map(day => `[${this.getColumnName(day)}] var(--mo-calendar-day-size)`),
-        ].join(' ');
-    }
-    getColumnName(date) {
-        return `day-${date.dayOfWeek}`;
-    }
-    get template() {
-        return html `
-			<mo-grid class='month'
-				rows='repeat(auto-fill, var(--mo-calendar-day-size))'
-				columns=${this.columns}
-			>
-				<div class='heading' style='grid-column: 1 / -1'>
-					${this.navigatingValue.format({ year: 'numeric' })}
-					${this.navigatingValue.format({ month: 'long' })}
-				</div>
-
-				<mo-grid class='header' columns='subgrid' style='grid-column: 1 / -1'>
-					${this.includeWeek === false ? html.nothing : html `<div></div>`}
-					${this.days.slice(0, this.days[0]?.daysInWeek).map(day => html `
-						<span style='grid-column: ${this.getColumnName(day)}' title=${day.format({ weekday: 'long' })}>
-							${day.format({ weekday: 'narrow' })}
-						</span>
-					`)}
-				</mo-grid>
-
-				${this.days.map(day => html `
-					${this.includeWeek === false || day.dayOfWeek !== 1 ? html.nothing : html `
-						<div class='week' style='grid-column: week'>${day.weekOfYear}</div>
-					`}
-					<mo-flex tabindex='0'
-						style='grid-column: ${this.getColumnName(day)}'
-						class=${classMap(this.getDayElementClasses(day))}
-						@click=${() => this.dayClick.dispatch(day)}
-					>
-						${day.format({ day: 'numeric' })}
-					</mo-flex>
-				`)}
-			</mo-grid>
-		`;
-    }
-    getDayElementClasses(day) {
-        return {
-            day: true,
-            today: this.today.equals(day.dayStart),
-            outsideMonth: day.month !== this.navigatingValue.month
-        };
-    }
-    get today() { return new DateTime().dayStart; }
-};
-__decorate([
-    event()
-], Calendar.prototype, "dayClick", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Calendar.prototype, "includeWeek", void 0);
-__decorate([
-    property({
-        type: Object,
-        updated() {
-            const start = this.navigatingValue.monthStart.weekStart;
-            const end = this.navigatingValue.monthEnd.weekEnd;
-            this.days = [...Calendar.rangeOf(start, end)];
-        }
-    })
-], Calendar.prototype, "navigatingValue", void 0);
-__decorate([
-    state()
-], Calendar.prototype, "days", void 0);
-__decorate([
-    memoizeExpiring(60000)
-], Calendar.prototype, "today", null);
-Calendar = __decorate([
-    component('mo-calendar')
-], Calendar);
-export { Calendar };

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

@@ -1,20 +0,0 @@
-import { type PropertyValues } from '@a11d/lit';
-import { Calendar } from './Calendar.js';
-import { type DateTime } from '@3mo/date-time';
-export declare class SelectableCalendar extends Calendar {
-    value?: DateTimeRange;
-    private readonly monthElement;
-    protected updated(pops: PropertyValues<this>): void;
-    static get styles(): import("@a11d/lit").CSSResult;
-    protected getDayElementClasses(day: DateTime): {
-        start: boolean;
-        end: boolean;
-        selected: boolean;
-    };
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'mo-selectable-calendar': SelectableCalendar;
-    }
-}
-//# sourceMappingURL=SelectableCalendar.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SelectableCalendar.d.ts","sourceRoot":"","sources":["../../../selection/calendar/SelectableCalendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8C,KAAK,cAAc,EAAE,MAAM,WAAW,CAAA;AAC3F,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAE9C,qBACa,kBAAmB,SAAQ,QAAQ;IACnB,KAAK,CAAC,EAAE,aAAa,CAAA;IAEhC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAc;cAEzC,OAAO,CAAC,IAAI,EAAE,cAAc,CAAC,IAAI,CAAC;IASrD,WAAoB,MAAM,kCA0CzB;cAEkB,oBAAoB,CAAC,GAAG,EAAE,QAAQ;;;;;CAUrD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,wBAAwB,EAAE,kBAAkB,CAAA;KAC5C;CACD"}

package/dist/selection/calendar/SelectableCalendar.js

@@ -1,76 +0,0 @@
-import { __decorate } from "tslib";
-import { component, css, property, query, unsafeCSS } from '@a11d/lit';
-import { Calendar } from './Calendar.js';
-let SelectableCalendar = class SelectableCalendar extends Calendar {
-    updated(pops) {
-        super.updated(pops);
-        this.monthElement.dataset.selection = this.dataset.selection;
-        this.monthElement.toggleAttribute('data-start-exists', !!this.value?.start);
-        this.monthElement.toggleAttribute('data-end-exists', !!this.value?.end);
-        this.monthElement.toggleAttribute('data-start-behind', this.value?.start?.isBefore(this.navigatingValue.monthEnd.weekEnd) ?? false);
-        this.monthElement.toggleAttribute('data-end-ahead', this.value?.end?.isAfter(this.navigatingValue.monthEnd.weekEnd) ?? false);
-    }
-    static get styles() {
-        const getRangeStyles = ({ start, end }) => {
-            return css `
-				.day${unsafeCSS(start)}, .day${unsafeCSS(end)} {
-					background: var(--mo-color-accent-transparent) !important;
-					color: color-mix(in srgb, var(--mo-color-accent), var(--mo-color-foreground));
-				}
-
-				.day${unsafeCSS(start)} ~ :not(${unsafeCSS(end)}):not(${unsafeCSS(end)} ~ *), /* Start is visible, end is visible or not */
-				&[data-start-exists]:has(${unsafeCSS(end)}):not(:has(${unsafeCSS(start)})) .day:not(${unsafeCSS(end)}):not(${unsafeCSS(end)} ~ *), /* Start is not visible, end is visible */
-				&[data-start-before][data-end-ahead] .day /* Start is before, end is after */
-				{
-					background: color-mix(in srgb, var(--mo-color-accent), transparent 92%);
-				}
-			`;
-        };
-        return css `
-			${super.styles}
-
-			.day.selected {
-				background: var(--mo-color-accent-transparent);
-				color: color-mix(in srgb, var(--mo-color-accent), var(--mo-color-foreground)) !important;
-			}
-
-			.month {
-				&:not(:hover) {
-					${getRangeStyles({ start: '.selected.start', end: '.selected.end' })};
-				}
-
-				&:hover {
-					/* After start is selected: */
-					&[data-selection=end] {
-						${getRangeStyles({ start: '.selected.start', end: ':hover' })};
-					}
-
-					/* After end is selected: */
-					&[data-selection=start] {
-						${getRangeStyles({ start: ':hover', end: '.selected.end' })};
-					}
-				}
-			}
-		`;
-    }
-    getDayElementClasses(day) {
-        const start = this.value?.start?.dayStart.equals(day.dayStart) ?? false;
-        const end = this.value?.end?.dayStart.equals(day.dayStart) ?? false;
-        return {
-            ...super.getDayElementClasses(day),
-            start,
-            end,
-            selected: start || end,
-        };
-    }
-};
-__decorate([
-    property({ type: Object })
-], SelectableCalendar.prototype, "value", void 0);
-__decorate([
-    query('.month')
-], SelectableCalendar.prototype, "monthElement", void 0);
-SelectableCalendar = __decorate([
-    component('mo-selectable-calendar')
-], SelectableCalendar);
-export { SelectableCalendar };

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

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

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

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

package/dist/selection/calendar/index.js

@@ -1,2 +0,0 @@
-export * from './Calendar.js';
-export * from './SelectableCalendar.js';