@tzslot/angular 0.1.0-beta.0

package/fesm2022/tzslot-angular.mjs

@@ -0,0 +1,875 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, input, model, computed, signal, inject, ElementRef, effect, untracked, DestroyRef, forwardRef, ChangeDetectionStrategy, Component, viewChild, output } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { EN, getSlotChoices, createTimeSlots, createCalendar, createDateField, createDateRange, createDateTimeRange, createDailyRange, createMultiDate } from '@tzslot/dom';
+export { EN, FR } from '@tzslot/dom';
+import { Temporal, toPlainDate, fromPlainDate } from '@tzslot/core';
+
+const TZSLOT_MESSAGES = new InjectionToken('tzslot.messages', {
+    providedIn: 'root',
+    factory: () => EN,
+});
+/** `providers: [provideTzslotMessages(FR)]` */
+function provideTzslotMessages(messages) {
+    return { provide: TZSLOT_MESSAGES, useValue: messages };
+}
+
+/**
+ * `<tz-time-slots>` — the slot list from @tzslot/dom, spoken in Angular.
+ *
+ * What it selects is an `Instant`, never a wall time. A wall time is what a
+ * clock shows; an instant is when it happened. Only one of those can be stored.
+ */
+class TimeSlotPicker {
+    constructor() {
+        /** The day to list, as a PlainDate or an ISO date string. */
+        this.date = input.required(...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
+        /** An IANA identifier — 'Europe/Paris', not an offset. Offsets change twice a year. */
+        this.timeZone = input.required(...(ngDevMode ? [{ debugName: "timeZone" }] : /* istanbul ignore next */ []));
+        this.stepMinutes = input(30, ...(ngDevMode ? [{ debugName: "stepMinutes" }] : /* istanbul ignore next */ []));
+        /** The working day. Slots outside these bounds are not produced at all. */
+        this.minTime = input(undefined, ...(ngDevMode ? [{ debugName: "minTime" }] : /* istanbul ignore next */ []));
+        this.maxTime = input(undefined, ...(ngDevMode ? [{ debugName: "maxTime" }] : /* istanbul ignore next */ []));
+        /** Rules out individual slots while still showing them: booked, over capacity. */
+        this.isDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        /** Leave out the times that cannot happen, rather than showing them struck through. */
+        this.skipNonExistent = input(false, ...(ngDevMode ? [{ debugName: "skipNonExistent" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /** What is selected, as a moment. Two-way: `[(value)]`. */
+        this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.missingLabel = input(undefined, ...(ngDevMode ? [{ debugName: "missingLabel" }] : /* istanbul ignore next */ []));
+        this.emptyLabel = input(undefined, ...(ngDevMode ? [{ debugName: "emptyLabel" }] : /* istanbul ignore next */ []));
+        /** The rows listed, one per selectable moment: an ambiguous time gives two. */
+        this.choices = computed(() => getSlotChoices(this.date(), this.timeZone(), {
+            stepMinutes: this.stepMinutes(),
+            skipNonExistent: this.skipNonExistent(),
+            ...(this.minTime() !== undefined ? { minTime: this.minTime() } : {}),
+            ...(this.maxTime() !== undefined ? { maxTime: this.maxTime() } : {}),
+            ...(this.isDisabled() !== undefined ? { isDisabled: this.isDisabled() } : {}),
+        }), ...(ngDevMode ? [{ debugName: "choices" }] : /* istanbul ignore next */ []));
+        this.formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+        this.messages = inject(TZSLOT_MESSAGES);
+        this.settings = computed(() => ({
+            date: this.date(),
+            timeZone: this.timeZone(),
+            stepMinutes: this.stepMinutes(),
+            minTime: this.minTime(),
+            maxTime: this.maxTime(),
+            isDisabled: this.isDisabled(),
+            skipNonExistent: this.skipNonExistent(),
+            disabled: this.disabled() || this.formDisabled(),
+            value: this.value(),
+            ariaLabel: this.ariaLabel(),
+            missingLabel: this.missingLabel(),
+            emptyLabel: this.emptyLabel(),
+            messages: this.messages,
+        }), ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+        /**
+         * Created empty: `date` and `timeZone` are required inputs, which cannot be
+         * read before they are bound. The first change detection fills it in.
+         */
+        this.slots = createTimeSlots(inject(ElementRef).nativeElement, {
+            messages: this.messages,
+            onChange: (instant) => {
+                this.value.set(instant);
+                this.onChange(instant);
+                this.onTouched();
+            },
+        });
+        // ── ControlValueAccessor ────────────────────────────────────
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        // The settings are read here, so the effect follows them; the call into the
+        // widget runs untracked. A widget may answer by calling back — closing a
+        // panel, say — and a callback that writes a signal inside an effect is an
+        // error on Angular 18 (NG0600), and a hidden dependency on any version.
+        effect(() => {
+            const settings = this.settings();
+            untracked(() => this.slots.update(settings));
+        });
+        inject(DestroyRef).onDestroy(() => this.slots.destroy());
+    }
+    /** Clears the selection and tells any form control about it. */
+    clear() {
+        this.slots.clear();
+    }
+    writeValue(value) {
+        this.value.set(value ?? null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TimeSlotPicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: TimeSlotPicker, isStandalone: true, selector: "tz-time-slots", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: true, transformFunction: null }, stepMinutes: { classPropertyName: "stepMinutes", publicName: "stepMinutes", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, skipNonExistent: { classPropertyName: "skipNonExistent", publicName: "skipNonExistent", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, missingLabel: { classPropertyName: "missingLabel", publicName: "missingLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimeSlotPicker), multi: true },
+        ], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TimeSlotPicker, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tz-time-slots',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimeSlotPicker), multi: true },
+                    ],
+                    template: '',
+                }]
+        }], ctorParameters: () => [], propDecorators: { date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: true }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: true }] }], stepMinutes: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepMinutes", required: false }] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTime", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTime", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], skipNonExistent: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipNonExistent", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], missingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "missingLabel", required: false }] }], emptyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyLabel", required: false }] }] } });
+
+/**
+ * `<tz-calendar>` — the calendar from @tzslot/dom, spoken in Angular.
+ *
+ * Everything the user sees and does is drawn by `createCalendar`. This class
+ * only translates: inputs and models into `update()`, the calendar's callbacks
+ * into `valueChange` and form notifications, projected content into icons.
+ */
+class Calendar {
+    constructor() {
+        /** The selected day. Two-way: `[(value)]`. */
+        this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Monday by default, as ISO-8601 numbers the week. */
+        this.firstDayOfWeek = input(1, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+        /** A BCP-47 tag for the month and weekday names. Defaults to the browser's. */
+        this.locale = input(undefined, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+        this.min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        this.max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * What the form control holds. 'temporal' by default; 'date' lets an
+         * existing FormControl<Date> keep working untouched, which is the whole of a
+         * flatpickr migration on most screens.
+         */
+        this.valueAs = input('temporal', ...(ngDevMode ? [{ debugName: "valueAs" }] : /* istanbul ignore next */ []));
+        /**
+         * The zone used to turn a Date into a calendar day and back. Only consulted
+         * when valueAs is 'date': which day an instant falls on depends on where you
+         * are standing, so it is explicit rather than guessed.
+         */
+        this.valueTimeZone = input(Temporal.Now.timeZoneId(), ...(ngDevMode ? [{ debugName: "valueTimeZone" }] : /* istanbul ignore next */ []));
+        /** Rules out individual days inside the range: closures, weekends, full days. */
+        this.isDateDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "isDateDisabled" }] : /* istanbul ignore next */ []));
+        /** Today, injectable so a test does not depend on the day it runs. */
+        this.today = input(Temporal.Now.plainDateISO(), ...(ngDevMode ? [{ debugName: "today" }] : /* istanbul ignore next */ []));
+        /**
+         * Which level the grid is choosing between. A model, so a consumer can open
+         * straight on years — a birthdate picker should not start on this month.
+         */
+        this.view = model('days', ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+        /** 'months' turns this into a month picker, 'years' into a year picker. */
+        this.minView = input('days', ...(ngDevMode ? [{ debugName: "minView" }] : /* istanbul ignore next */ []));
+        /** Adds to each day: a price, places left, a class, a reason to rule it out. */
+        this.renderCell = input(undefined, ...(ngDevMode ? [{ debugName: "renderCell" }] : /* istanbul ignore next */ []));
+        /** Buttons under the grid: `['today', 'clear']`. None by default. */
+        this.buttons = input([], ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
+        this.host = inject(ElementRef).nativeElement;
+        this.messages = inject(TZSLOT_MESSAGES);
+        this.prevSlot = viewChild.required('prev');
+        this.nextSlot = viewChild.required('next');
+        this.formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+        this.settings = computed(() => ({
+            value: this.value(),
+            view: this.view(),
+            minView: this.minView(),
+            firstDayOfWeek: this.firstDayOfWeek(),
+            locale: this.locale(),
+            min: this.min(),
+            max: this.max(),
+            disabled: this.disabled() || this.formDisabled(),
+            isDateDisabled: this.isDateDisabled(),
+            today: this.today(),
+            renderCell: this.renderCell(),
+            buttons: this.buttons(),
+            messages: this.messages,
+        }), ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+        /**
+         * Drawn at construction, so the cells exist as soon as the component does —
+         * as they did when this was a template. Inputs are not bound yet at this
+         * point; the effect below brings them in on the first change detection.
+         */
+        this.calendar = createCalendar(this.host, {
+            ...untracked(this.settings),
+            onChange: (date) => {
+                this.value.set(date);
+                this.onChange(date);
+                this.onTouched();
+            },
+            onViewChange: (view) => this.view.set(view),
+        });
+        // ── ControlValueAccessor ────────────────────────────────────
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        // The settings are read here, so the effect follows them; the call into the
+        // widget runs untracked. A widget may answer by calling back — closing a
+        // panel, say — and a callback that writes a signal inside an effect is an
+        // error on Angular 18 (NG0600), and a hidden dependency on any version.
+        effect(() => {
+            const settings = this.settings();
+            untracked(() => this.calendar.update(settings));
+        });
+    }
+    /** Projected content only exists once the view does. */
+    ngAfterViewInit() {
+        this.calendar.setIcons({
+            prev: this.projected(this.prevSlot()),
+            next: this.projected(this.nextSlot()),
+        });
+    }
+    ngOnDestroy() {
+        this.calendar.destroy();
+    }
+    /** Moves the grid without selecting anything — flatpickr's setViewDate. */
+    goTo(date) {
+        this.calendar.goTo({ year: date.year, month: date.month });
+    }
+    /** Clears the selection and tells any form control about it. */
+    clear() {
+        this.calendar.clear();
+    }
+    /** Whatever was projected into a slot, or undefined so the default chevron stays. */
+    projected(slot) {
+        const nodes = Array.from(slot.nativeElement.childNodes);
+        if (!nodes.some((n) => n.nodeType === Node.ELEMENT_NODE || n.textContent?.trim()))
+            return undefined;
+        const fragment = this.host.ownerDocument.createDocumentFragment();
+        fragment.append(...nodes);
+        return fragment;
+    }
+    writeValue(value) {
+        this.value.set(value === null || value === undefined ? null : toPlainDate(value, this.valueTimeZone()));
+    }
+    registerOnChange(fn) {
+        this.onChange = (date) => fn(fromPlainDate(date, this.valueAs(), this.valueTimeZone()));
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: Calendar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.23", type: Calendar, isStandalone: true, selector: "tz-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, valueAs: { classPropertyName: "valueAs", publicName: "valueAs", isSignal: true, isRequired: false, transformFunction: null }, valueTimeZone: { classPropertyName: "valueTimeZone", publicName: "valueTimeZone", isSignal: true, isRequired: false, transformFunction: null }, isDateDisabled: { classPropertyName: "isDateDisabled", publicName: "isDateDisabled", isSignal: true, isRequired: false, transformFunction: null }, today: { classPropertyName: "today", publicName: "today", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, minView: { classPropertyName: "minView", publicName: "minView", isSignal: true, isRequired: false, transformFunction: null }, renderCell: { classPropertyName: "renderCell", publicName: "renderCell", isSignal: true, isRequired: false, transformFunction: null }, buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", view: "viewChange" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Calendar), multi: true },
+        ], viewQueries: [{ propertyName: "prevSlot", first: true, predicate: ["prev"], descendants: true, isSignal: true }, { propertyName: "nextSlot", first: true, predicate: ["next"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <span #prev hidden><ng-content select="[tzPrev]" /></span>
+    <span #next hidden><ng-content select="[tzNext]" /></span>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: Calendar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tz-calendar',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Calendar), multi: true },
+                    ],
+                    // The slots only collect projected icons; the calendar moves them into its
+                    // buttons and the slots stay empty and hidden.
+                    template: `
+    <span #prev hidden><ng-content select="[tzPrev]" /></span>
+    <span #next hidden><ng-content select="[tzNext]" /></span>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], valueAs: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueAs", required: false }] }], valueTimeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTimeZone", required: false }] }], isDateDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDateDisabled", required: false }] }], today: [{ type: i0.Input, args: [{ isSignal: true, alias: "today", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], minView: [{ type: i0.Input, args: [{ isSignal: true, alias: "minView", required: false }] }], renderCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderCell", required: false }] }], buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }], prevSlot: [{ type: i0.ViewChild, args: ['prev', { isSignal: true }] }], nextSlot: [{ type: i0.ViewChild, args: ['next', { isSignal: true }] }] } });
+
+/**
+ * `<tz-date-field>` — the field from @tzslot/dom, spoken in Angular.
+ *
+ * The trigger, the panel, its position, focus and theme are all drawn by
+ * `createDateField`. This class maps inputs to `update()`, callbacks to
+ * `valueChange`, `opened`, `closed` and form notifications, and a projected
+ * `[tzIcon]` to the field's icon.
+ */
+class DateField {
+    constructor() {
+        this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.mode = input('popup', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        this.placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.locale = input(undefined, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+        this.firstDayOfWeek = input(1, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+        this.min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        this.max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        this.isDateDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "isDateDisabled" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * What the form control holds. 'temporal' by default; 'date' lets an
+         * existing FormControl<Date> keep working untouched, which is the whole of a
+         * flatpickr migration on most screens.
+         */
+        this.valueAs = input('temporal', ...(ngDevMode ? [{ debugName: "valueAs" }] : /* istanbul ignore next */ []));
+        /**
+         * The zone used to turn a Date into a calendar day and back. Only consulted
+         * when valueAs is 'date': which day an instant falls on depends on where you
+         * are standing, so it is explicit rather than guessed.
+         */
+        this.valueTimeZone = input(Temporal.Now.timeZoneId(), ...(ngDevMode ? [{ debugName: "valueTimeZone" }] : /* istanbul ignore next */ []));
+        /** How the chosen date is written in the field. Defaults to the locale's medium form. */
+        this.displayWith = input(undefined, ...(ngDevMode ? [{ debugName: "displayWith" }] : /* istanbul ignore next */ []));
+        /** Passed to the calendar in the panel. */
+        this.renderCell = input(undefined, ...(ngDevMode ? [{ debugName: "renderCell" }] : /* istanbul ignore next */ []));
+        /** Under the panel's grid: `['today', 'clear']`. Choosing either closes it. */
+        this.buttons = input([], ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
+        this.opened = output();
+        this.closed = output();
+        /** Whether the panel is showing. Readable from a ViewChild. */
+        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+        this.host = inject(ElementRef).nativeElement;
+        this.messages = inject(TZSLOT_MESSAGES);
+        this.iconSlot = viewChild.required('icon');
+        this.settings = computed(() => ({
+            value: this.value(),
+            mode: this.mode(),
+            placeholder: this.placeholder(),
+            ariaLabel: this.ariaLabel(),
+            locale: this.locale(),
+            firstDayOfWeek: this.firstDayOfWeek(),
+            min: this.min(),
+            max: this.max(),
+            isDateDisabled: this.isDateDisabled(),
+            disabled: this.disabled() || this.formDisabled(),
+            displayWith: this.displayWith(),
+            renderCell: this.renderCell(),
+            buttons: this.buttons(),
+            messages: this.messages,
+        }), ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+        this.field = createDateField(this.host, {
+            ...untracked(this.settings),
+            onChange: (date) => {
+                this.value.set(date);
+                this.onChange(date);
+            },
+            onOpen: () => {
+                this.isOpen.set(true);
+                this.onTouched();
+                this.opened.emit();
+            },
+            onClose: () => {
+                this.isOpen.set(false);
+                this.closed.emit();
+            },
+        });
+        // ── ControlValueAccessor ────────────────────────────────────
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        // The settings are read here, so the effect follows them; the call into the
+        // widget runs untracked. A widget may answer by calling back — closing a
+        // panel, say — and a callback that writes a signal inside an effect is an
+        // error on Angular 18 (NG0600), and a hidden dependency on any version.
+        effect(() => {
+            const settings = this.settings();
+            untracked(() => this.field.update(settings));
+        });
+        inject(DestroyRef).onDestroy(() => this.field.destroy());
+    }
+    ngAfterViewInit() {
+        const slot = this.iconSlot().nativeElement;
+        if (Array.from(slot.childNodes).some((n) => n.nodeType === Node.ELEMENT_NODE || n.textContent?.trim())) {
+            const fragment = this.host.ownerDocument.createDocumentFragment();
+            fragment.append(...Array.from(slot.childNodes));
+            this.field.setIcon(fragment);
+        }
+    }
+    /**
+     * Opening and closing are public so a ViewChild can drive the field — a
+     * button elsewhere on the page, a wizard step, a keyboard shortcut.
+     */
+    toggle() {
+        this.field.toggle();
+    }
+    /** No-op when already open. */
+    open() {
+        this.field.open();
+    }
+    close() {
+        this.field.close();
+    }
+    /** Clears the selection and tells any form control about it. */
+    clear() {
+        this.field.clear();
+    }
+    writeValue(value) {
+        this.value.set(value === null || value === undefined ? null : toPlainDate(value, this.valueTimeZone()));
+    }
+    registerOnChange(fn) {
+        this.onChange = (date) => fn(fromPlainDate(date, this.valueAs(), this.valueTimeZone()));
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DateField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.23", type: DateField, isStandalone: true, selector: "tz-date-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, isDateDisabled: { classPropertyName: "isDateDisabled", publicName: "isDateDisabled", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, valueAs: { classPropertyName: "valueAs", publicName: "valueAs", isSignal: true, isRequired: false, transformFunction: null }, valueTimeZone: { classPropertyName: "valueTimeZone", publicName: "valueTimeZone", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, renderCell: { classPropertyName: "renderCell", publicName: "renderCell", isSignal: true, isRequired: false, transformFunction: null }, buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", opened: "opened", closed: "closed" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateField), multi: true },
+        ], viewQueries: [{ propertyName: "iconSlot", first: true, predicate: ["icon"], descendants: true, isSignal: true }], ngImport: i0, template: `<span #icon hidden><ng-content select="[tzIcon]" /></span>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DateField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tz-date-field',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateField), multi: true },
+                    ],
+                    template: `<span #icon hidden><ng-content select="[tzIcon]" /></span>`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], isDateDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDateDisabled", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], valueAs: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueAs", required: false }] }], valueTimeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTimeZone", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], renderCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderCell", required: false }] }], buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], iconSlot: [{ type: i0.ViewChild, args: ['icon', { isSignal: true }] }] } });
+
+const EMPTY$2 = { start: null, end: null };
+/** `<tz-date-range>` — the range from @tzslot/dom, spoken in Angular. */
+class DateRange {
+    constructor() {
+        this.value = model(EMPTY$2, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.firstDayOfWeek = input(1, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+        this.locale = input(undefined, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+        this.min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        this.max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.isDateDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "isDateDisabled" }] : /* istanbul ignore next */ []));
+        this.today = input(Temporal.Now.plainDateISO(), ...(ngDevMode ? [{ debugName: "today" }] : /* istanbul ignore next */ []));
+        /** Refuse a range that steps over a day isDateDisabled rules out. On by default. */
+        this.blockAcrossDisabled = input(true, ...(ngDevMode ? [{ debugName: "blockAcrossDisabled" }] : /* istanbul ignore next */ []));
+        /** Adds to each day: a price per night, places left, a class of your own. */
+        this.renderCell = input(undefined, ...(ngDevMode ? [{ debugName: "renderCell" }] : /* istanbul ignore next */ []));
+        /** Overrides the bundle for this one instance. */
+        this.rangeSpansBlockedMessage = input(undefined, ...(ngDevMode ? [{ debugName: "rangeSpansBlockedMessage" }] : /* istanbul ignore next */ []));
+        this.formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+        this.host = inject(ElementRef).nativeElement;
+        this.messages = inject(TZSLOT_MESSAGES);
+        this.prevSlot = viewChild.required('prev');
+        this.nextSlot = viewChild.required('next');
+        this.settings = computed(() => ({
+            value: this.value(),
+            firstDayOfWeek: this.firstDayOfWeek(),
+            locale: this.locale(),
+            min: this.min(),
+            max: this.max(),
+            disabled: this.disabled() || this.formDisabled(),
+            isDateDisabled: this.isDateDisabled(),
+            today: this.today(),
+            blockAcrossDisabled: this.blockAcrossDisabled(),
+            rangeSpansBlockedMessage: this.rangeSpansBlockedMessage(),
+            renderCell: this.renderCell(),
+            messages: this.messages,
+        }), ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+        this.range = createDateRange(this.host, {
+            ...untracked(this.settings),
+            onChange: (next) => {
+                this.value.set(next);
+                this.onChange(next);
+                this.onTouched();
+            },
+        });
+        // ── ControlValueAccessor ────────────────────────────────────
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        // The settings are read here, so the effect follows them; the call into the
+        // widget runs untracked. A widget may answer by calling back — closing a
+        // panel, say — and a callback that writes a signal inside an effect is an
+        // error on Angular 18 (NG0600), and a hidden dependency on any version.
+        effect(() => {
+            const settings = this.settings();
+            untracked(() => this.range.update(settings));
+        });
+        inject(DestroyRef).onDestroy(() => this.range.destroy());
+    }
+    ngAfterViewInit() {
+        this.range.setIcons({
+            prev: projected(this.host, this.prevSlot()),
+            next: projected(this.host, this.nextSlot()),
+        });
+    }
+    /** Clears the selection and tells any form control about it. */
+    clear() {
+        this.range.clear();
+    }
+    writeValue(value) {
+        this.value.set(value ?? EMPTY$2);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DateRange, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.23", type: DateRange, isStandalone: true, selector: "tz-date-range", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isDateDisabled: { classPropertyName: "isDateDisabled", publicName: "isDateDisabled", isSignal: true, isRequired: false, transformFunction: null }, today: { classPropertyName: "today", publicName: "today", isSignal: true, isRequired: false, transformFunction: null }, blockAcrossDisabled: { classPropertyName: "blockAcrossDisabled", publicName: "blockAcrossDisabled", isSignal: true, isRequired: false, transformFunction: null }, renderCell: { classPropertyName: "renderCell", publicName: "renderCell", isSignal: true, isRequired: false, transformFunction: null }, rangeSpansBlockedMessage: { classPropertyName: "rangeSpansBlockedMessage", publicName: "rangeSpansBlockedMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateRange), multi: true },
+        ], viewQueries: [{ propertyName: "prevSlot", first: true, predicate: ["prev"], descendants: true, isSignal: true }, { propertyName: "nextSlot", first: true, predicate: ["next"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <span #prev hidden><ng-content select="[tzPrev]" /></span>
+    <span #next hidden><ng-content select="[tzNext]" /></span>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DateRange, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tz-date-range',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateRange), multi: true },
+                    ],
+                    template: `
+    <span #prev hidden><ng-content select="[tzPrev]" /></span>
+    <span #next hidden><ng-content select="[tzNext]" /></span>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], isDateDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDateDisabled", required: false }] }], today: [{ type: i0.Input, args: [{ isSignal: true, alias: "today", required: false }] }], blockAcrossDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockAcrossDisabled", required: false }] }], renderCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderCell", required: false }] }], rangeSpansBlockedMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeSpansBlockedMessage", required: false }] }], prevSlot: [{ type: i0.ViewChild, args: ['prev', { isSignal: true }] }], nextSlot: [{ type: i0.ViewChild, args: ['next', { isSignal: true }] }] } });
+/** Whatever was projected into a slot, or undefined so the default chevron stays. */
+function projected(host, slot) {
+    const nodes = Array.from(slot.nativeElement.childNodes);
+    if (!nodes.some((n) => n.nodeType === Node.ELEMENT_NODE || n.textContent?.trim()))
+        return undefined;
+    const fragment = host.ownerDocument.createDocumentFragment();
+    fragment.append(...nodes);
+    return fragment;
+}
+
+const EMPTY$1 = { start: null, end: null };
+/**
+ * `<tz-datetime-range>` — the interval from @tzslot/dom, spoken in Angular.
+ *
+ * The duration shown is the measured one, and when it disagrees with the clock
+ * faces the widget says so in words.
+ */
+class DateTimeRange {
+    constructor() {
+        this.value = model(EMPTY$1, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.timeZone = input.required(...(ngDevMode ? [{ debugName: "timeZone" }] : /* istanbul ignore next */ []));
+        this.stepMinutes = input(30, ...(ngDevMode ? [{ debugName: "stepMinutes" }] : /* istanbul ignore next */ []));
+        this.minTime = input(undefined, ...(ngDevMode ? [{ debugName: "minTime" }] : /* istanbul ignore next */ []));
+        this.maxTime = input(undefined, ...(ngDevMode ? [{ debugName: "maxTime" }] : /* istanbul ignore next */ []));
+        this.isSlotDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "isSlotDisabled" }] : /* istanbul ignore next */ []));
+        this.min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        this.max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        this.locale = input(undefined, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.startLabel = input(undefined, ...(ngDevMode ? [{ debugName: "startLabel" }] : /* istanbul ignore next */ []));
+        this.endLabel = input(undefined, ...(ngDevMode ? [{ debugName: "endLabel" }] : /* istanbul ignore next */ []));
+        this.endBeforeStartMessage = input(undefined, ...(ngDevMode ? [{ debugName: "endBeforeStartMessage" }] : /* istanbul ignore next */ []));
+        this.formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+        this.messages = inject(TZSLOT_MESSAGES);
+        this.settings = computed(() => ({
+            value: this.value(),
+            timeZone: this.timeZone(),
+            stepMinutes: this.stepMinutes(),
+            minTime: this.minTime(),
+            maxTime: this.maxTime(),
+            isSlotDisabled: this.isSlotDisabled(),
+            min: this.min(),
+            max: this.max(),
+            locale: this.locale(),
+            disabled: this.disabled() || this.formDisabled(),
+            startLabel: this.startLabel(),
+            endLabel: this.endLabel(),
+            endBeforeStartMessage: this.endBeforeStartMessage(),
+            messages: this.messages,
+        }), ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+        /** Created before the required timeZone is bound; the first change detection fills it in. */
+        this.range = createDateTimeRange(inject(ElementRef).nativeElement, {
+            messages: this.messages,
+            onChange: (next) => {
+                this.value.set(next);
+                this.onChange(next);
+                this.onTouched();
+            },
+        });
+        // ── ControlValueAccessor ────────────────────────────────────
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        // The settings are read here, so the effect follows them; the call into the
+        // widget runs untracked. A widget may answer by calling back — closing a
+        // panel, say — and a callback that writes a signal inside an effect is an
+        // error on Angular 18 (NG0600), and a hidden dependency on any version.
+        effect(() => {
+            const settings = this.settings();
+            untracked(() => this.range.update(settings));
+        });
+        inject(DestroyRef).onDestroy(() => this.range.destroy());
+    }
+    /** Clears the selection and tells any form control about it. */
+    clear() {
+        this.range.clear();
+    }
+    writeValue(value) {
+        this.value.set(value ?? EMPTY$1);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DateTimeRange, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: DateTimeRange, isStandalone: true, selector: "tz-datetime-range", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: true, transformFunction: null }, stepMinutes: { classPropertyName: "stepMinutes", publicName: "stepMinutes", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, isSlotDisabled: { classPropertyName: "isSlotDisabled", publicName: "isSlotDisabled", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, startLabel: { classPropertyName: "startLabel", publicName: "startLabel", isSignal: true, isRequired: false, transformFunction: null }, endLabel: { classPropertyName: "endLabel", publicName: "endLabel", isSignal: true, isRequired: false, transformFunction: null }, endBeforeStartMessage: { classPropertyName: "endBeforeStartMessage", publicName: "endBeforeStartMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimeRange), multi: true },
+        ], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DateTimeRange, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tz-datetime-range',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimeRange), multi: true },
+                    ],
+                    template: '',
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: true }] }], stepMinutes: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepMinutes", required: false }] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTime", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTime", required: false }] }], isSlotDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSlotDisabled", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], startLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startLabel", required: false }] }], endLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endLabel", required: false }] }], endBeforeStartMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "endBeforeStartMessage", required: false }] }] } });
+
+const EMPTY = { start: null, end: null, from: null, to: null };
+/**
+ * `<tz-daily-range>` — a range of days with the same hours on each, from
+ * @tzslot/dom, spoken in Angular. "The 3rd to the 7th, 09:00 to 17:00."
+ */
+class DailyRange {
+    constructor() {
+        this.value = model(EMPTY, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** An IANA identifier. The hours are read on the clocks of this zone. */
+        this.timeZone = input.required(...(ngDevMode ? [{ debugName: "timeZone" }] : /* istanbul ignore next */ []));
+        this.stepMinutes = input(30, ...(ngDevMode ? [{ debugName: "stepMinutes" }] : /* istanbul ignore next */ []));
+        /** The first and last times offered. */
+        this.minTime = input(undefined, ...(ngDevMode ? [{ debugName: "minTime" }] : /* istanbul ignore next */ []));
+        this.maxTime = input(undefined, ...(ngDevMode ? [{ debugName: "maxTime" }] : /* istanbul ignore next */ []));
+        this.firstDayOfWeek = input(1, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+        this.locale = input(undefined, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+        this.min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        this.max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        this.isDateDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "isDateDisabled" }] : /* istanbul ignore next */ []));
+        this.renderCell = input(undefined, ...(ngDevMode ? [{ debugName: "renderCell" }] : /* istanbul ignore next */ []));
+        this.today = input(Temporal.Now.plainDateISO(), ...(ngDevMode ? [{ debugName: "today" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /** Every day's window and the real total, once all four parts are chosen. */
+        this.summary = signal(null, ...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
+        this.formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+        this.messages = inject(TZSLOT_MESSAGES);
+        this.settings = computed(() => ({
+            value: this.value(),
+            timeZone: this.timeZone(),
+            stepMinutes: this.stepMinutes(),
+            minTime: this.minTime(),
+            maxTime: this.maxTime(),
+            firstDayOfWeek: this.firstDayOfWeek(),
+            locale: this.locale(),
+            min: this.min(),
+            max: this.max(),
+            isDateDisabled: this.isDateDisabled(),
+            renderCell: this.renderCell(),
+            today: this.today(),
+            disabled: this.disabled() || this.formDisabled(),
+            messages: this.messages,
+        }), ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+        /** Created before the required timeZone is bound; the first change detection fills it in. */
+        this.range = createDailyRange(inject(ElementRef).nativeElement, {
+            messages: this.messages,
+            onChange: (next) => {
+                this.value.set(next);
+                this.onChange(next);
+                this.onTouched();
+            },
+        });
+        // ── ControlValueAccessor ────────────────────────────────────
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        // The settings are read here, so the effect follows them; the call into the
+        // widget runs untracked. A widget may answer by calling back — closing a
+        // panel, say — and a callback that writes a signal inside an effect is an
+        // error on Angular 18 (NG0600), and a hidden dependency on any version.
+        effect(() => {
+            const settings = this.settings();
+            untracked(() => {
+                this.range.update(settings);
+                this.summary.set(this.range.summary);
+            });
+        });
+        inject(DestroyRef).onDestroy(() => this.range.destroy());
+    }
+    /** Clears all four parts and tells any form control about it. */
+    clear() {
+        this.range.clear();
+    }
+    writeValue(value) {
+        this.value.set(value ?? EMPTY);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DailyRange, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: DailyRange, isStandalone: true, selector: "tz-daily-range", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: true, transformFunction: null }, stepMinutes: { classPropertyName: "stepMinutes", publicName: "stepMinutes", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, isDateDisabled: { classPropertyName: "isDateDisabled", publicName: "isDateDisabled", isSignal: true, isRequired: false, transformFunction: null }, renderCell: { classPropertyName: "renderCell", publicName: "renderCell", isSignal: true, isRequired: false, transformFunction: null }, today: { classPropertyName: "today", publicName: "today", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DailyRange), multi: true },
+        ], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: DailyRange, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tz-daily-range',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DailyRange), multi: true },
+                    ],
+                    template: '',
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: true }] }], stepMinutes: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepMinutes", required: false }] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTime", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTime", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], isDateDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDateDisabled", required: false }] }], renderCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderCell", required: false }] }], today: [{ type: i0.Input, args: [{ isSignal: true, alias: "today", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * `<tz-multi-date>` — several days, not necessarily next to each other, from
+ * @tzslot/dom, spoken in Angular. The value is always in date order.
+ */
+class MultiDate {
+    constructor() {
+        /** The chosen days, in date order. Two-way: `[(value)]`. */
+        this.value = model([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Once this many are chosen, the other days stop taking clicks. */
+        this.maxDates = input(undefined, ...(ngDevMode ? [{ debugName: "maxDates" }] : /* istanbul ignore next */ []));
+        this.firstDayOfWeek = input(1, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+        this.locale = input(undefined, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+        this.min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        this.max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.isDateDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "isDateDisabled" }] : /* istanbul ignore next */ []));
+        this.today = input(Temporal.Now.plainDateISO(), ...(ngDevMode ? [{ debugName: "today" }] : /* istanbul ignore next */ []));
+        this.view = model('days', ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+        this.renderCell = input(undefined, ...(ngDevMode ? [{ debugName: "renderCell" }] : /* istanbul ignore next */ []));
+        this.buttons = input([], ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
+        /** What the form control holds, each day as a Temporal date, a Date, or an ISO string. */
+        this.valueAs = input('temporal', ...(ngDevMode ? [{ debugName: "valueAs" }] : /* istanbul ignore next */ []));
+        /** The zone a Date is read in. Only consulted when valueAs is 'date'. */
+        this.valueTimeZone = input(Temporal.Now.timeZoneId(), ...(ngDevMode ? [{ debugName: "valueTimeZone" }] : /* istanbul ignore next */ []));
+        this.formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+        this.host = inject(ElementRef).nativeElement;
+        this.messages = inject(TZSLOT_MESSAGES);
+        this.prevSlot = viewChild.required('prev');
+        this.nextSlot = viewChild.required('next');
+        this.settings = computed(() => ({
+            value: this.value(),
+            maxDates: this.maxDates(),
+            view: this.view(),
+            firstDayOfWeek: this.firstDayOfWeek(),
+            locale: this.locale(),
+            min: this.min(),
+            max: this.max(),
+            disabled: this.disabled() || this.formDisabled(),
+            isDateDisabled: this.isDateDisabled(),
+            today: this.today(),
+            renderCell: this.renderCell(),
+            buttons: this.buttons(),
+            messages: this.messages,
+        }), ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+        this.calendar = createMultiDate(this.host, {
+            ...untracked(this.settings),
+            onChange: (dates) => {
+                this.value.set(dates);
+                this.onChange(dates);
+                this.onTouched();
+            },
+            onViewChange: (view) => this.view.set(view),
+        });
+        // ── ControlValueAccessor ────────────────────────────────────
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        // The settings are read here, so the effect follows them; the call into the
+        // widget runs untracked. A widget may answer by calling back — closing a
+        // panel, say — and a callback that writes a signal inside an effect is an
+        // error on Angular 18 (NG0600), and a hidden dependency on any version.
+        effect(() => {
+            const settings = this.settings();
+            untracked(() => this.calendar.update(settings));
+        });
+        inject(DestroyRef).onDestroy(() => this.calendar.destroy());
+    }
+    ngAfterViewInit() {
+        const projected = (slot) => {
+            const nodes = Array.from(slot.nativeElement.childNodes);
+            if (!nodes.some((n) => n.nodeType === Node.ELEMENT_NODE || n.textContent?.trim()))
+                return undefined;
+            const fragment = this.host.ownerDocument.createDocumentFragment();
+            fragment.append(...nodes);
+            return fragment;
+        };
+        this.calendar.setIcons({ prev: projected(this.prevSlot()), next: projected(this.nextSlot()) });
+    }
+    /** Moves the grid without choosing anything. */
+    goTo(date) {
+        this.calendar.goTo({ year: date.year, month: date.month });
+    }
+    /** Empties the selection and tells any form control about it. */
+    clear() {
+        this.calendar.clear();
+    }
+    writeValue(value) {
+        const days = (value ?? []).map((d) => toPlainDate(d, this.valueTimeZone()));
+        this.value.set([...days].sort(Temporal.PlainDate.compare));
+    }
+    registerOnChange(fn) {
+        this.onChange = (dates) => fn(dates.map((d) => fromPlainDate(d, this.valueAs(), this.valueTimeZone())));
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MultiDate, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.23", type: MultiDate, isStandalone: true, selector: "tz-multi-date", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxDates: { classPropertyName: "maxDates", publicName: "maxDates", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isDateDisabled: { classPropertyName: "isDateDisabled", publicName: "isDateDisabled", isSignal: true, isRequired: false, transformFunction: null }, today: { classPropertyName: "today", publicName: "today", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, renderCell: { classPropertyName: "renderCell", publicName: "renderCell", isSignal: true, isRequired: false, transformFunction: null }, buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null }, valueAs: { classPropertyName: "valueAs", publicName: "valueAs", isSignal: true, isRequired: false, transformFunction: null }, valueTimeZone: { classPropertyName: "valueTimeZone", publicName: "valueTimeZone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", view: "viewChange" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiDate), multi: true },
+        ], viewQueries: [{ propertyName: "prevSlot", first: true, predicate: ["prev"], descendants: true, isSignal: true }, { propertyName: "nextSlot", first: true, predicate: ["next"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <span #prev hidden><ng-content select="[tzPrev]" /></span>
+    <span #next hidden><ng-content select="[tzNext]" /></span>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MultiDate, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tz-multi-date',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiDate), multi: true },
+                    ],
+                    template: `
+    <span #prev hidden><ng-content select="[tzPrev]" /></span>
+    <span #next hidden><ng-content select="[tzNext]" /></span>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], maxDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDates", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], isDateDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDateDisabled", required: false }] }], today: [{ type: i0.Input, args: [{ isSignal: true, alias: "today", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], renderCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderCell", required: false }] }], buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }], valueAs: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueAs", required: false }] }], valueTimeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTimeZone", required: false }] }], prevSlot: [{ type: i0.ViewChild, args: ['prev', { isSignal: true }] }], nextSlot: [{ type: i0.ViewChild, args: ['next', { isSignal: true }] }] } });
+
+/**
+ * @tzslot/ui — Angular components over the core.
+ *
+ * Angular CDK only; no Material, no design system. Structural class names and
+ * CSS custom properties (--tz-*), so a consumer restyles without fighting
+ * specificity.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Calendar, DailyRange, DateField, DateRange, DateTimeRange, MultiDate, TZSLOT_MESSAGES, TimeSlotPicker, provideTzslotMessages };
+//# sourceMappingURL=tzslot-angular.mjs.map