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

package/dist/selection/CalendarDatesController.js

@@ -1,25 +1,54 @@
 import { __decorate } from "tslib";
 import { Controller, html } from '@a11d/lit';
 import { observeIntersection } from '@3mo/intersection-observer';
-import { MemoizeExpiring as memoizeExpiring } from 'typescript-memoize';
+import { Memoize as memoize, clear } from 'typescript-memoize';
+import { Localizer } from '@3mo/localization';
 import { FieldDateTimePrecision } from '../FieldDateTimePrecision.js';
 export class CalendarDatesController extends Controller {
+    static { this.cacheKey = 'CalendarDatesController'; }
     static get today() { return new DateTime().dayStart; }
     static *generate(start, count, step) {
         for (let i = 0; i < count; i++) {
             yield start.add({ [step]: i });
         }
     }
-    static { this._sampleWeek = new Array(); }
-    static get sampleWeek() { return this._sampleWeek; }
+    static get sampleWeek() { return CalendarDatesController._sampleWeek ??= CalendarDatesController.generateWeek(); }
     static generateWeek() {
         const sample = [...CalendarDatesController.generate(CalendarDatesController.today, CalendarDatesController.today.daysInWeek * 2, 'days')];
         const indexOfFirstWeekStart = sample.findIndex(d => d.dayOfWeek === 1);
         const daysInWeek = sample[0].daysInWeek;
-        CalendarDatesController._sampleWeek = sample.slice(indexOfFirstWeekStart, indexOfFirstWeekStart + daysInWeek).map(d => d.dayStart);
+        return sample.slice(indexOfFirstWeekStart, indexOfFirstWeekStart + daysInWeek).map(d => d.dayStart);
     }
+    static { this.connectedControllers = new Set(); }
     static {
-        CalendarDatesController.generateWeek();
+        // `DateTime` freezes its calendar and time zone at construction, so every date which has already
+        // been generated still belongs to the previous language's calendar. Without discarding them,
+        // switching language only re-formats the existing Gregorian grid instead of rebuilding it.
+        Localizer.languages.change.subscribe(() => {
+            // Deferred so that every other subscriber has run first — in particular `DateTime`, which
+            // clears its own memoized calendar and time zone on the very same event. Regenerating any
+            // date before that happens would just reproduce the outgoing calendar.
+            queueMicrotask(() => {
+                clear([CalendarDatesController.cacheKey]);
+                CalendarDatesController._sampleWeek = undefined;
+                for (const controller of CalendarDatesController.connectedControllers) {
+                    controller.invalidate();
+                }
+            });
+        });
+    }
+    hostConnected() {
+        CalendarDatesController.connectedControllers.add(this);
+    }
+    hostDisconnected() {
+        CalendarDatesController.connectedControllers.delete(this);
+    }
+    /** Discards every generated date and regenerates them for the current calendar. */
+    invalidate() {
+        this.days = [];
+        this.months = [];
+        this.years = [];
+        this.navigationDate = DateTime.from(this._navigationDate.valueOf());
     }
     observerIntersectionNavigation(date, ...views) {
         return !views.includes(this.host.view) ? html.nothing : observeIntersection(data => {
@@ -72,5 +101,5 @@ export class CalendarDatesController extends Controller {
     }
 }
 __decorate([
-    memoizeExpiring(60_000)
+    memoize({ expiring: 60_000, tags: [CalendarDatesController.cacheKey] })
 ], CalendarDatesController, "today", null);

package/dist/selection/HourList.d.ts

@@ -1,5 +1,9 @@
 import { DateList } from './DateList.js';
 export declare class HourList extends DateList {
+    /** Defaults to the language's convention, so English lists "02 PM" where German lists "14". */
+    hourCycle?: 'h11' | 'h12' | 'h23' | 'h24';
+    private labelTemplate;
+    static get styles(): import("@a11d/lit").CSSResult;
     protected get listItemsTemplate(): import("lit-html").HTMLTemplateResult;
 }
 declare global {

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

@@ -1 +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,0CAWvC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,QAAQ,CAAA;KACxB;CACD"}
+{"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,+FAA+F;IACnF,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAA;IAErD,OAAO,CAAC,aAAa;IAMrB,WAAoB,MAAM,kCAazB;IAED,cAAuB,iBAAiB,0CAWvC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,QAAQ,CAAA;KACxB;CACD"}

package/dist/selection/HourList.js

@@ -1,7 +1,26 @@
 import { __decorate } from "tslib";
-import { component, html, range } from '@a11d/lit';
+import { component, css, html, property, range } from '@a11d/lit';
 import { DateList } from './DateList.js';
 let HourList = class HourList extends DateList {
+    labelTemplate(hour) {
+        const parts = this.navigationDate.with({ hour }).formatToParts({ hour: '2-digit', hourCycle: this.hourCycle });
+        const dayPeriod = parts.find(part => part.type === 'dayPeriod')?.value;
+        return html `${parts.find(part => part.type === 'hour')?.value}${!dayPeriod ? html.nothing : html ` <small>${dayPeriod}</small>`}`;
+    }
+    static get styles() {
+        return css `
+			${super.styles}
+
+			mo-selectable-list-item {
+				white-space: nowrap;
+			}
+
+			small {
+				font-size: 0.65em;
+				opacity: 0.7;
+			}
+		`;
+    }
     get listItemsTemplate() {
         return html `
 			${[...range(0, this.navigationDate.hoursInDay)].map(hour => html `
@@ -10,11 +29,14 @@ let HourList = class HourList extends DateList {
 					?data-navigating=${this.navigationDate.hour === hour}
 					@navigate=${() => this.navigate.dispatch(this.navigationDate.with({ hour }))}
 					@change=${(e) => !e.selected ? void 0 : this.change.dispatch((this.value ?? new DateTime).with({ hour }))}
-				>${hour.format().padStart(2, this.zero.format())}</mo-selectable-list-item>
+				>${this.labelTemplate(hour)}</mo-selectable-list-item>
 			`)}
 		`;
     }
 };
+__decorate([
+    property()
+], HourList.prototype, "hourCycle", void 0);
 HourList = __decorate([
     component('mo-hour-list')
 ], HourList);