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

package/dist/segments/DateTimeSegmenter.js

@@ -0,0 +1,247 @@
+import { DirectionsByLanguage, LocalizableString, Localizer } from '@3mo/localization';
+import { FieldDateTimePrecision } from '../FieldDateTimePrecision.js';
+import { isEditableDateTimeSegmentType } from './DateTimeSegment.js';
+const hourCycles = ['h11', 'h12', 'h23', 'h24'];
+/** Reads an `hourCycle` attribute, ignoring anything which is not one of the four cycles. */
+export const hourCycleConverter = (value) => hourCycles.includes(value) ? value : undefined;
+const yearLimit = 9999;
+const placeholderWidths = { year: 4, month: 2, week: 2, day: 2 };
+const timePlaceholder = '--';
+/**
+ * Derives the segments of a date-time value for a language, calendar and precision from
+ * `Intl.DateTimeFormat.formatToParts`, and edits them with Temporal's calendar arithmetic.
+ */
+export class DateTimeSegmenter {
+    static { this.pageSteps = { year: 5, month: 2, week: 4, day: 7, hour: 2, minute: 15, second: 15 }; }
+    static defaultHourCycle(language) {
+        return (new Intl.DateTimeFormat(language, { hour: 'numeric' }).resolvedOptions().hourCycle ?? 'h23');
+    }
+    constructor(options) {
+        this.precision = options.precision;
+        this.language = options.language ?? Localizer.languages.current;
+        this.calendar = options.calendar ?? DateTime.getCalendar(this.language);
+        this.timeZone = options.timeZone ?? DateTime.getTimeZone(this.language);
+        this.hourCycle = options.hourCycle ?? DateTimeSegmenter.defaultHourCycle(this.language);
+        this.timeOnly = options.timeOnly ?? false;
+        this.direction = DirectionsByLanguage.get(this.language);
+        this.formatOptions = this.buildFormatOptions();
+        this.formatter = new Intl.DateTimeFormat(this.language, this.formatOptions);
+        this.monthFormatter = new Intl.DateTimeFormat(this.language, { month: 'long', calendar: this.calendar, timeZone: this.timeZone });
+        this.hourFormatter = new Intl.DateTimeFormat(this.language, { hour: 'numeric', hourCycle: this.hourCycle, timeZone: this.timeZone });
+        try {
+            this.displayNames = new Intl.DisplayNames(this.language, { type: 'dateTimeField' });
+        }
+        catch {
+            this.displayNames = undefined;
+        }
+        const numberFormat = new Intl.NumberFormat(this.language, { useGrouping: false });
+        this.digits = Array.from({ length: 10 }, (_, digit) => numberFormat.format(digit)).join('');
+        const dayPeriodOf = (hour) => new Intl.DateTimeFormat(this.language, { hour: 'numeric', hour12: true, timeZone: 'UTC' })
+            .formatToParts(new Date(Date.UTC(2026, 0, 1, hour)))
+            .find(part => part.type === 'dayPeriod')?.value ?? '';
+        this.dayPeriods = [dayPeriodOf(9), dayPeriodOf(21)];
+    }
+    /** Identifies the configuration, so a consumer can tell when its segmenter is stale. */
+    get key() {
+        return [this.precision.key, this.language, this.calendar, this.timeZone, this.hourCycle, this.timeOnly].join('|');
+    }
+    get twelveHours() {
+        return this.hourCycle === 'h11' || this.hourCycle === 'h12';
+    }
+    buildFormatOptions() {
+        const precision = this.precision === FieldDateTimePrecision.Week ? FieldDateTimePrecision.Day : this.precision;
+        const options = { ...precision.formatOptions, calendar: this.calendar, timeZone: this.timeZone };
+        if (this.timeOnly) {
+            delete options.year;
+            delete options.month;
+            delete options.day;
+        }
+        if (options.hour !== undefined) {
+            options.hourCycle = this.hourCycle;
+        }
+        return options;
+    }
+    /** Brings a date into this segmenter's calendar and time zone. */
+    adopt(date) {
+        return date.calendarId === this.calendar && date.timeZoneId === this.timeZone
+            ? date
+            : DateTime.from(date.valueOf(), this.calendar, this.timeZone);
+    }
+    /** The editable unit types present, in rendering order. */
+    get types() {
+        return this.parts(new DateTime).map(part => part.type).filter(isEditableDateTimeSegmentType);
+    }
+    segments(date, filled) {
+        date = this.adopt(date);
+        let literals = 0;
+        return this.parts(date).map(part => {
+            if (!isEditableDateTimeSegmentType(part.type)) {
+                // A key identifies a segment within its group, and a date has several literals.
+                return { key: part.type === 'literal' ? `literal-${literals++}` : part.type, type: part.type, editable: false, text: part.value };
+            }
+            const type = part.type;
+            const isFilled = filled.has(type);
+            const placeholder = this.placeholderOf(type);
+            const label = this.labelOf(type);
+            const limits = this.limits(date, type);
+            return {
+                key: type,
+                type,
+                editable: true,
+                filled: isFilled,
+                text: isFilled ? part.value : placeholder,
+                label,
+                // As many digits as the largest value takes, so that typing moves on once it cannot grow.
+                capacity: type === 'dayPeriod' ? 1 : String(limits.max).length,
+                inputMode: type === 'dayPeriod' ? undefined : 'numeric',
+                ...limits,
+                value: this.valueOf(date, type),
+                valueText: this.valueTextOf(date, type, part.value),
+            };
+        });
+    }
+    parts(date) {
+        if (this.precision === FieldDateTimePrecision.Week) {
+            return [
+                { type: 'year', value: (date.yearOfWeek ?? date.year).format(this.language) },
+                { type: 'literal', value: ` ${LocalizableString.get('✂Week').localize(this.language)}` },
+                { type: 'week', value: (date.weekOfYear ?? 1).format(this.language).padStart(2, this.digits[0]) },
+            ];
+        }
+        return this.formatter.formatToParts(date).map(part => ({ type: this.typeOf(part.type), value: part.value }));
+    }
+    typeOf(partType) {
+        switch (partType) {
+            case 'relatedYear':
+                return 'year';
+            case 'year':
+            case 'month':
+            case 'day':
+            case 'hour':
+            case 'minute':
+            case 'second':
+            case 'dayPeriod':
+            case 'era':
+                return partType;
+            default:
+                return 'literal';
+        }
+    }
+    labelOf(type) {
+        return this.displayNames?.of(type === 'week' ? 'weekOfYear' : type) ?? type;
+    }
+    placeholderOf(type) {
+        const width = placeholderWidths[type];
+        if (!width) {
+            return timePlaceholder;
+        }
+        const word = this.labelOf(type);
+        return /^\p{Script=Latin}/u.test(word) ? word[0].toLocaleLowerCase(this.language).repeat(width) : word;
+    }
+    limits(date, type) {
+        date = this.adopt(date);
+        switch (type) {
+            case 'year': return { min: 1, max: yearLimit };
+            case 'month': return { min: 1, max: date.monthsInYear };
+            case 'week': return { min: 1, max: DateTimeSegmenter.weeksInYear(date) };
+            case 'day': return { min: 1, max: date.daysInMonth };
+            case 'hour': return this.hourCycle === 'h12' ? { min: 1, max: 12 } : this.hourCycle === 'h11' ? { min: 0, max: 11 } : { min: 0, max: 23 };
+            case 'minute':
+            case 'second': return { min: 0, max: 59 };
+            case 'dayPeriod': return { min: 0, max: 1 };
+        }
+    }
+    static weeksInYear(date) {
+        const lastWeek = date.with({ month: date.monthsInYear, day: 28 }).weekOfYear ?? 52;
+        return lastWeek === 1 ? 52 : lastWeek;
+    }
+    valueOf(date, type) {
+        date = this.adopt(date);
+        switch (type) {
+            case 'year': return date.eraYear ?? date.year;
+            case 'month': return date.month;
+            case 'week': return date.weekOfYear ?? 1;
+            case 'day': return date.day;
+            case 'hour': return this.hourCycle === 'h12' ? (date.hour % 12 || 12) : this.hourCycle === 'h11' ? date.hour % 12 : date.hour;
+            case 'minute': return date.minute;
+            case 'second': return date.second;
+            case 'dayPeriod': return date.hour >= 12 ? 1 : 0;
+        }
+    }
+    valueTextOf(date, type, text) {
+        switch (type) {
+            case 'month':
+                return this.monthFormatter.format(date);
+            case 'hour':
+                return this.hourFormatter.format(date);
+            default:
+                return text;
+        }
+    }
+    set(date, type, value) {
+        date = this.adopt(date);
+        switch (type) {
+            case 'year':
+                return date.era !== undefined && date.eraYear !== undefined
+                    ? date.with({ era: date.era, eraYear: value })
+                    : date.with({ year: value });
+            case 'month':
+                return date.with({ month: value });
+            case 'week':
+                return date.add({ weeks: value - (date.weekOfYear ?? value) });
+            case 'day':
+                return date.with({ day: value });
+            case 'hour': {
+                const afternoon = date.hour >= 12;
+                const hour = this.twelveHours ? (value % 12) + (afternoon ? 12 : 0) : value % 24;
+                return date.with({ hour });
+            }
+            case 'minute':
+                return date.with({ minute: value });
+            case 'second':
+                return date.with({ second: value });
+            case 'dayPeriod': {
+                const afternoon = date.hour >= 12;
+                return value >= 1 === afternoon ? date : date.with({ hour: afternoon ? date.hour - 12 : date.hour + 12 });
+            }
+        }
+    }
+    /** Moves a unit by `delta`, wrapping at its limits — except the year, which is clamped. */
+    step(date, type, delta) {
+        date = this.adopt(date);
+        const { min, max } = this.limits(date, type);
+        const current = this.valueOf(date, type);
+        const span = max - min + 1;
+        const next = type === 'year'
+            ? Math.min(max, Math.max(min, current + delta))
+            : ((((current - min + delta) % span) + span) % span) + min;
+        return this.set(date, type, next);
+    }
+    /** The numeric value of a typed character in the language's numbering system or ASCII, if it is a digit. */
+    digitOf(character) {
+        const index = this.digits.indexOf(character);
+        if (index >= 0) {
+            return index;
+        }
+        return /^[0-9]$/.test(character) ? Number(character) : undefined;
+    }
+    /** Which day period a typed character selects, matching the first character of the localized "AM"/"PM". */
+    dayPeriodOf(character) {
+        const matches = (period) => !!period && period.localeCompare(character, this.language, { sensitivity: 'base' }) === 0
+            || period.toLocaleLowerCase(this.language).startsWith(character.toLocaleLowerCase(this.language));
+        if (matches(this.dayPeriods[0])) {
+            return 0;
+        }
+        if (matches(this.dayPeriods[1])) {
+            return 1;
+        }
+        return undefined;
+    }
+    /** The whole value as one localized string, for the group's accessible description. */
+    describe(date) {
+        date = this.adopt(date);
+        return this.precision === FieldDateTimePrecision.Week
+            ? date.format(this.language, { week: 'medium' })
+            : this.formatter.format(date);
+    }
+}

package/dist/segments/DateTimeSegmentsController.d.ts

@@ -0,0 +1,90 @@
+import { Controller, type ReactiveControllerHost } from '@a11d/lit';
+import { type LanguageCode } from '@3mo/localization';
+import { SegmentedInputController } from '@3mo/segmented-input';
+import { type FieldDateTimePrecision } from '../FieldDateTimePrecision.js';
+import { type DateTimeSegment, type EditableDateTimeSegmentType } from './DateTimeSegment.js';
+import { DateTimeSegmenter, type HourCycle } from './DateTimeSegmenter.js';
+export type DateTimeSegmentsControllerOptions = {
+    readonly value?: DateTime;
+    readonly precision: FieldDateTimePrecision;
+    /** Completes the units the user leaves out, and anchors relative shortcuts. Defaults to now. */
+    readonly referenceDate?: DateTime;
+    readonly language?: LanguageCode;
+    readonly calendar?: string;
+    readonly timeZone?: string;
+    readonly hourCycle?: HourCycle;
+    readonly timeOnly?: boolean;
+    /** The field's label, appended to every segment's own name. */
+    readonly label?: string;
+    readonly disabled?: boolean;
+    readonly readonly?: boolean;
+    readonly required?: boolean;
+    readonly invalid?: boolean;
+    /** Fired while editing, once every unit is filled and the value differs. */
+    handleInput?(value: DateTime | undefined): void;
+    /** Fired on commit — leaving the group, Enter, a shortcut or a paste. */
+    handleChange?(value: DateTime | undefined): void;
+    handleFocusChange?(focused: boolean): void;
+    /** Fired when the focus would move past the first or last segment. */
+    handleMoveBeyond?(direction: -1 | 1): void;
+    /** Resolves a typed shortcut ("+1", "h", "adw") or pasted text to a value. Defaults to `DateTime.parseAsDateTime`. */
+    parseShortcut?(text: string, referenceDate: DateTime): DateTime | undefined;
+};
+type OptionsOrFactory<THost> = DateTimeSegmentsControllerOptions | ((host: THost) => DateTimeSegmentsControllerOptions);
+/**
+ * A segmented input whose units are the units of a date: one focusable spinbutton each, edited by
+ * typing digits in the language's own numbering system or by stepping through the calendar.
+ *
+ * ```html
+ * <div ${this.segments.group.ref()}>
+ *     ${this.segments.segments.map(segment => html`<span ${this.segments.segment.ref(segment)}></span>`)}
+ * </div>
+ * ```
+ */
+export declare class DateTimeSegmentsController<THost extends ReactiveControllerHost = ReactiveControllerHost> extends Controller {
+    protected readonly host: THost;
+    protected readonly options: DateTimeSegmentsControllerOptions;
+    private _segmenter?;
+    private date;
+    private filled;
+    private syncedValue?;
+    readonly input: SegmentedInputController<DateTimeSegment, THost>;
+    constructor(host: THost, options: OptionsOrFactory<THost>);
+    get segmenter(): DateTimeSegmenter;
+    get segments(): ReadonlyArray<DateTimeSegment>;
+    /** The reference the unfilled units are taken from. */
+    get referenceDate(): import("@3mo/date-time/DateTime.js").DateTime;
+    get isEmpty(): boolean;
+    get isComplete(): boolean;
+    /** The value the filled units describe, normalized to the precision; undefined while a unit is missing. */
+    get value(): DateTime | undefined;
+    private get editable();
+    get group(): import("@a11d/lit").ElementRef<HTMLElement, void>;
+    get segment(): import("@a11d/lit").ElementRefs<HTMLElement, DateTimeSegment>;
+    focus(type?: EditableDateTimeSegmentType): void;
+    focusFirst(): void;
+    focusLast(): void;
+    hostUpdate(): void;
+    private sync;
+    private normalize;
+    /** A digit which would take the unit past its largest value starts it over: a month holding "1" typed "3" reads "3". */
+    private accept;
+    private isSegmentComplete;
+    /** Sets the unit, unless what is typed so far is not yet a value it could hold — "0" of "05". */
+    private handleSegmentInput;
+    private handleStep;
+    private set;
+    private step;
+    private clearSegment;
+    private replace;
+    private lastInput?;
+    private edited;
+    private applyShortcut;
+    private handleCommit;
+    private stamp;
+    commit(): void;
+    /** Empties every segment and clears the host's value. */
+    clear(): void;
+}
+export {};
+//# sourceMappingURL=DateTimeSegmentsController.d.ts.map

package/dist/segments/DateTimeSegmentsController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeSegmentsController.d.ts","sourceRoot":"","sources":["../../segments/DateTimeSegmentsController.ts"],"names":[],"mappings":"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"}

package/dist/segments/DateTimeSegmentsController.js

@@ -0,0 +1,235 @@
+import { Controller } from '@a11d/lit';
+import { Localizer } from '@3mo/localization';
+import { SegmentedInputController } from '@3mo/segmented-input';
+import { DateTimeSegmenter } from './DateTimeSegmenter.js';
+Localizer.dictionaries.add('de', {
+    'Empty': 'Leer',
+});
+/**
+ * A segmented input whose units are the units of a date: one focusable spinbutton each, edited by
+ * typing digits in the language's own numbering system or by stepping through the calendar.
+ *
+ * ```html
+ * <div ${this.segments.group.ref()}>
+ *     ${this.segments.segments.map(segment => html`<span ${this.segments.segment.ref(segment)}></span>`)}
+ * </div>
+ * ```
+ */
+export class DateTimeSegmentsController extends Controller {
+    constructor(host, options) {
+        super(host);
+        this.host = host;
+        this.filled = new Set();
+        this.options = typeof options === 'function' ? options(host) : options;
+        this.sync();
+        const controller = this;
+        this.input = new SegmentedInputController(host, {
+            get segments() { return controller.segments; },
+            get direction() { return controller.segmenter.direction; },
+            get label() { return controller.options.label; },
+            get description() { return controller.isEmpty ? undefined : controller.segmenter.describe(controller.date); },
+            get disabled() { return controller.options.disabled; },
+            get readonly() { return controller.options.readonly; },
+            get required() { return controller.options.required; },
+            get invalid() { return controller.options.invalid; },
+            accept: (segment, typed, character) => controller.accept(segment, typed, character),
+            isComplete: (segment, text) => controller.isSegmentComplete(segment, text),
+            handleSegmentInput: (segment, text) => text ? controller.handleSegmentInput(segment, text) : controller.clearSegment(segment.type),
+            handleStep: (segment, step) => controller.handleStep(segment, step),
+            // Every keyword resolves to a day, which a time-only field cannot show.
+            get handleShortcut() { return controller.options.timeOnly && !controller.options.parseShortcut ? undefined : (text) => controller.applyShortcut(text); },
+            handleCommit: () => controller.handleCommit(),
+            handleFocusChange: focused => controller.options.handleFocusChange?.(focused),
+            handleMoveBeyond: direction => controller.options.handleMoveBeyond?.(direction),
+            stamp: (element, segment) => controller.stamp(element, segment),
+        });
+    }
+    get segmenter() {
+        const segmenter = new DateTimeSegmenter({
+            precision: this.options.precision,
+            language: this.options.language,
+            calendar: this.options.calendar,
+            // The reference's zone, never the value's: a zone which flips between commits would move the wall time.
+            timeZone: this.options.timeZone ?? this.options.referenceDate?.timeZoneId,
+            hourCycle: this.options.hourCycle,
+            timeOnly: this.options.timeOnly,
+        });
+        if (this._segmenter?.key !== segmenter.key) {
+            this._segmenter = segmenter;
+            if (this.date) {
+                this.date = segmenter.adopt(this.date);
+            }
+        }
+        return this._segmenter;
+    }
+    get segments() {
+        return this.segmenter.segments(this.date, this.filled);
+    }
+    /** The reference the unfilled units are taken from. */
+    get referenceDate() {
+        return this.segmenter.adopt(this.options.referenceDate ?? new DateTime);
+    }
+    get isEmpty() {
+        return this.filled.size === 0;
+    }
+    get isComplete() {
+        return this.segmenter.types.every(type => this.filled.has(type));
+    }
+    /** The value the filled units describe, normalized to the precision; undefined while a unit is missing. */
+    get value() {
+        return this.isComplete ? this.normalize(this.date) : undefined;
+    }
+    get editable() {
+        return !this.options.disabled && !this.options.readonly;
+    }
+    // #region Parts
+    get group() {
+        return this.input.group;
+    }
+    get segment() {
+        return this.input.segment;
+    }
+    focus(type) {
+        this.input.focus(type);
+    }
+    focusFirst() {
+        this.input.focusFirst();
+    }
+    focusLast() {
+        this.input.focusLast();
+    }
+    // #endregion
+    hostUpdate() {
+        this.sync();
+    }
+    sync() {
+        const value = this.options.value;
+        const segmenter = this.segmenter;
+        if (value?.valueOf() !== this.syncedValue || !this.date) {
+            this.syncedValue = value?.valueOf();
+            this.date = value ? segmenter.adopt(value) : this.referenceDate;
+            this.filled = new Set(value ? segmenter.types : []);
+        }
+        else if (this.filled.size === 0) {
+            this.date = this.referenceDate;
+        }
+    }
+    normalize(date) {
+        const precision = this.options.precision;
+        return this.segmenter.adopt(precision.key === 'week' ? date.weekStart.dayStart : precision.getRange(date).start);
+    }
+    // #region Editing
+    /** A digit which would take the unit past its largest value starts it over: a month holding "1" typed "3" reads "3". */
+    accept(segment, typed, character) {
+        if (segment.type === 'dayPeriod') {
+            const period = this.segmenter.dayPeriodOf(character);
+            return period === undefined ? undefined : String(period);
+        }
+        const digit = this.segmenter.digitOf(character);
+        if (digit === undefined) {
+            return undefined;
+        }
+        const text = typed + digit;
+        return Number(text) > (segment.max ?? Infinity) ? String(digit) : text;
+    }
+    isSegmentComplete(segment, text) {
+        const max = segment.max ?? 0;
+        return Number(text) * 10 > max || text.length >= String(max).length;
+    }
+    /** Sets the unit, unless what is typed so far is not yet a value it could hold — "0" of "05". */
+    handleSegmentInput(segment, text) {
+        const value = Number(text);
+        if (!isNaN(value) && value >= (segment.min ?? 0)) {
+            this.set(segment.type, value);
+        }
+    }
+    handleStep(segment, step) {
+        const type = segment.type;
+        const page = DateTimeSegmenter.pageSteps[type] ?? 1;
+        switch (step) {
+            case 'increment': return this.step(type, 1);
+            case 'decrement': return this.step(type, -1);
+            case 'incrementPage': return this.step(type, page);
+            case 'decrementPage': return this.step(type, -page);
+            case 'min': return this.set(type, this.segmenter.limits(this.date, type).min);
+            case 'max': return this.set(type, this.segmenter.limits(this.date, type).max);
+        }
+    }
+    set(type, value) {
+        if (!this.editable) {
+            return;
+        }
+        this.date = this.segmenter.set(this.date, type, value);
+        this.filled.add(type);
+        this.edited();
+    }
+    step(type, delta) {
+        if (!this.editable) {
+            return;
+        }
+        if (this.filled.has(type)) {
+            this.date = this.segmenter.step(this.date, type, delta);
+        }
+        this.filled.add(type);
+        this.edited();
+    }
+    clearSegment(type) {
+        this.filled.delete(type);
+        this.date = this.segmenter.set(this.date, type, this.segmenter.valueOf(this.referenceDate, type));
+        this.edited();
+    }
+    replace(date) {
+        this.date = this.segmenter.adopt(date);
+        this.filled = new Set(this.segmenter.types);
+        this.edited();
+    }
+    edited() {
+        const value = this.value;
+        // A unit still being typed ("202" of "2026") is not a value anyone wants to hear about yet.
+        if (!this.input.typedText && value && value.valueOf() !== this.lastInput && value.valueOf() !== this.options.value?.valueOf()) {
+            this.lastInput = value.valueOf();
+            this.options.handleInput?.(value);
+        }
+    }
+    // #endregion
+    applyShortcut(text) {
+        const parsed = this.options.parseShortcut
+            ? this.options.parseShortcut(text, this.referenceDate)
+            : DateTime.parseAsDateTime(text, this.referenceDate);
+        if (parsed) {
+            this.replace(parsed);
+        }
+        else {
+            // The host may have taken the value itself (a range keyword sets both ends); follow it.
+            this.sync();
+        }
+        return true;
+    }
+    handleCommit() {
+        let value;
+        if (!this.isEmpty) {
+            this.filled = new Set(this.segmenter.types);
+            value = this.value;
+        }
+        if (value?.valueOf() !== this.options.value?.valueOf()) {
+            this.syncedValue = value?.valueOf();
+            this.lastInput = value?.valueOf();
+            this.options.handleChange?.(value);
+        }
+    }
+    stamp(element, segment) {
+        segment.filled ? element.setAttribute('aria-valuenow', String(segment.value)) : element.removeAttribute('aria-valuenow');
+        element.setAttribute('aria-valuemin', String(segment.min));
+        element.setAttribute('aria-valuemax', String(segment.max));
+        element.setAttribute('aria-valuetext', segment.filled ? segment.valueText ?? segment.text : String(t('Empty')));
+    }
+    commit() {
+        this.input.commit();
+    }
+    /** Empties every segment and clears the host's value. */
+    clear() {
+        this.filled = new Set();
+        this.date = this.referenceDate;
+        this.input.commit();
+    }
+}

package/dist/segments/index.d.ts

@@ -0,0 +1,5 @@
+export * from './DateTimeSegment.js';
+export * from './DateTimeSegmenter.js';
+export * from './DateTimeSegmentsController.js';
+export * from './segmentsStyles.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../segments/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,qBAAqB,CAAA"}

package/dist/segments/index.js

@@ -0,0 +1,4 @@
+export * from './DateTimeSegment.js';
+export * from './DateTimeSegmenter.js';
+export * from './DateTimeSegmentsController.js';
+export * from './segmentsStyles.js';

package/dist/segments/segmentsStyles.d.ts

@@ -0,0 +1,3 @@
+/** The styling a field gives to a group of date-time segments. */
+export declare const segmentsStyles: import("@a11d/lit").CSSResult;
+//# sourceMappingURL=segmentsStyles.d.ts.map

package/dist/segments/segmentsStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmentsStyles.d.ts","sourceRoot":"","sources":["../../segments/segmentsStyles.ts"],"names":[],"mappings":"AAEA,kEAAkE;AAClE,eAAO,MAAM,cAAc,+BA2C1B,CAAA"}

package/dist/segments/segmentsStyles.js

@@ -0,0 +1,46 @@
+import { css } from '@a11d/lit';
+/** The styling a field gives to a group of date-time segments. */
+export const segmentsStyles = css `
+	[part=segments], [part=segments-range] {
+		white-space: nowrap;
+		cursor: text;
+		/* What a browser gives the <input> of the other fields, which never set either themselves. */
+		font-size: 13.333px;
+		line-height: normal;
+		font-variant-numeric: tabular-nums;
+	}
+
+	[part=segments] {
+		display: inline;
+	}
+
+	[part=segment], [part=literal] {
+		display: inline;
+	}
+
+	[part=segment] {
+		border-radius: 2px;
+		padding-inline: 1px;
+		outline: none;
+		caret-color: transparent;
+		user-select: none;
+
+		&:focus {
+			background: var(--mo-color-selected);
+			color: var(--mo-color-on-selected);
+		}
+
+		&[data-placeholder] {
+			color: transparent;
+		}
+	}
+
+	[part=literal] {
+		color: transparent;
+	}
+
+	mo-field[active] :is([part=segment][data-placeholder], [part=literal]),
+	mo-field[populated] :is([part=segment][data-placeholder], [part=literal]) {
+		color: var(--mo-color-gray);
+	}
+`;

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../selection/Calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmE,MAAM,WAAW,CAAA;AAGtG,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAA;AAErE;;GAEG;AACH,qBACa,QAAS,SAAQ,SAAS;IAC7B,QAAQ,CAAC,SAAS,EAAG,eAAe,CAAC,QAAQ,CAAC,CAAA;IAE3B,KAAK,CAAC,EAAE,aAAa,CAAA;IACqC,SAAS,EAAG,sBAAsB,CAAA;IAC5E,WAAW,UAAQ;IACnC,GAAG,CAAC,EAAE,QAAQ,CAAA;IACd,GAAG,CAAC,EAAE,QAAQ,CAAA;IACF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAA;IAElF,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAoC;IAE3D,IAAI,yBAA6B;IAC1C,OAAO,CAAC,IAAI,EAAE,sBAAsB,EAAE,cAAc,gDAAsC;IAK1F,IAAI,cAAc,kDAAiD;IAC7D,kBAAkB,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAE,SAAS,GAAG,QAAoB;IAWnF,WAAoB,MAAM,kCAwKzB;IAED,OAAO,KAAK,iBAAiB,GAE5B;IAED,OAAO,KAAK,OAAO,GAKlB;IAED,OAAO,CAAC,aAAa;IAIrB,cAAuB,QAAQ,0CAM9B;IAED,OAAO,CAAC,eAAe;IAsBvB,OAAO,CAAC,MAAM,KAAK,gBAAgB,GAiBlC;IAED,OAAO,CAAC,gBAAgB;IA0BxB,SAAS,CAAC,eAAe,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC;IA0BxE,OAAO,CAAC,cAAc;IAqBtB,OAAO,CAAC,eAAe,CAmBtB;IAED,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,KAAK;IAIb,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,KAAK;IAIb,OAAO,CAAC,SAAS;CAKjB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,QAAQ,CAAA;KACvB;CACD"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../selection/Calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmE,MAAM,WAAW,CAAA;AAGtG,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAA;AAErE;;GAEG;AACH,qBACa,QAAS,SAAQ,SAAS;IAC7B,QAAQ,CAAC,SAAS,EAAG,eAAe,CAAC,QAAQ,CAAC,CAAA;IAE3B,KAAK,CAAC,EAAE,aAAa,CAAA;IACqC,SAAS,EAAG,sBAAsB,CAAA;IAC5E,WAAW,UAAQ;IACnC,GAAG,CAAC,EAAE,QAAQ,CAAA;IACd,GAAG,CAAC,EAAE,QAAQ,CAAA;IACF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAA;IAElF,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAoC;IAE3D,IAAI,yBAA6B;IAC1C,OAAO,CAAC,IAAI,EAAE,sBAAsB,EAAE,cAAc,gDAAsC;IAK1F,IAAI,cAAc,kDAAiD;IAC7D,kBAAkB,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAE,SAAS,GAAG,QAAoB;IAcnF,WAAoB,MAAM,kCAwKzB;IAED,OAAO,KAAK,iBAAiB,GAE5B;IAED,OAAO,KAAK,OAAO,GAKlB;IAED,OAAO,CAAC,aAAa;IAIrB,cAAuB,QAAQ,0CAM9B;IAED,OAAO,CAAC,eAAe;IAsBvB,OAAO,CAAC,MAAM,KAAK,gBAAgB,GAiBlC;IAED,OAAO,CAAC,gBAAgB;IA0BxB,SAAS,CAAC,eAAe,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC;IA0BxE,OAAO,CAAC,cAAc;IAqBtB,OAAO,CAAC,eAAe,CAmBtB;IAED,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,KAAK;IAIb,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,KAAK;IAIb,OAAO,CAAC,SAAS;CAKjB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,QAAQ,CAAA;KACvB;CACD"}

package/dist/selection/Calendar.js

@@ -43,6 +43,9 @@ let Calendar = Calendar_1 = class Calendar extends Component {
     async setNavigatingValue(date, behavior = 'instant') {
         this.datesController.disableObservers = true;
         this.datesController.navigationDate = date;
+        // Only a date beyond the generated range requests an update by itself, so without this the
+        // item marked as navigating - and thereby scrolled to - would still be the previous one.
+        this.requestUpdate();
         await this.updateComplete;
         await new Promise(r => setTimeout(r, 10));
         this.renderRoot.querySelector(`.${this.view}[data-navigating]`)