@tzslot/angular 0.1.0-beta.0 → 1.1.0

package/fesm2022/tzslot-angular.mjs

@@ -1,9 +1,9 @@
 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 { InjectionToken, inject, input, model, computed, signal, 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';
+import { EN, getSlotChoices, createTimeSlots, createCalendar, createDateField, createDateTimeField, createRangeField, createDateRange, createDateTimeRange, createDailyRange, createMultiDate } from '@tzslot/dom';
 export { EN, FR } from '@tzslot/dom';
-import { Temporal, toPlainDate, fromPlainDate } from '@tzslot/core';
+import { Temporal, toInstant, fromInstant, toPlainDate, fromPlainDate } from '@tzslot/core';
 
 const TZSLOT_MESSAGES = new InjectionToken('tzslot.messages', {
     providedIn: 'root',
@@ -14,6 +14,24 @@ function provideTzslotMessages(messages) {
     return { provide: TZSLOT_MESSAGES, useValue: messages };
 }
 
+const TZSLOT_DEFAULTS = new InjectionToken('tzslot.defaults', {
+    providedIn: 'root',
+    factory: () => ({}),
+});
+/**
+ * `providers: [provideTzslot({ valueAs: 'utc', timeZone: 'Europe/Paris' })]`
+ *
+ * In an application: `bootstrapApplication(App, { providers: [provideTzslot({ … })] })`.
+ */
+function provideTzslot(defaults) {
+    const providers = [
+        { provide: TZSLOT_DEFAULTS, useValue: defaults },
+    ];
+    if (defaults.messages)
+        providers.push({ provide: TZSLOT_MESSAGES, useValue: defaults.messages });
+    return providers;
+}
+
 /**
  * `<tz-time-slots>` — the slot list from @tzslot/dom, spoken in Angular.
  *
@@ -22,10 +40,22 @@ function provideTzslotMessages(messages) {
  */
 class TimeSlotPicker {
     constructor() {
+        /** Set once for the application with provideTzslot(); a binding still wins. */
+        this.defaults = inject(TZSLOT_DEFAULTS);
         /** The day to list, as a PlainDate or an ISO date string. */
+        /**
+         * What the form control holds. `'utc'` gives an ISO string; the default
+         * gives an Instant.
+         */
+        this.valueAs = input(this.defaults.valueAs ?? 'temporal', ...(ngDevMode ? [{ debugName: "valueAs" }] : /* istanbul ignore next */ []));
         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 */ []));
+        /**
+         * An IANA identifier. Required in spirit: given here, it wins; left out, it
+         * is the zone provideTzslot() settled for the application, and only when
+         * nothing was settled anywhere does it fall back to the browser's — which
+         * is a guess, and the one thing this library exists not to do silently.
+         */
+        this.timeZone = input(this.defaults.timeZone ?? Temporal.Now.timeZoneId(), ...(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 */ []));
@@ -94,11 +124,12 @@ class TimeSlotPicker {
     clear() {
         this.slots.clear();
     }
+    /** Typed `unknown`: a form holds what the application put there. */
     writeValue(value) {
-        this.value.set(value ?? null);
+        this.value.set(value === null || value === undefined ? null : toInstant(value));
     }
     registerOnChange(fn) {
-        this.onChange = fn;
+        this.onChange = (next) => fn(fromInstant(next, this.valueAs()));
     }
     registerOnTouched(fn) {
         this.onTouched = fn;
@@ -107,7 +138,7 @@ class TimeSlotPicker {
         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: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: TimeSlotPicker, isStandalone: true, selector: "tz-time-slots", inputs: { valueAs: { classPropertyName: "valueAs", publicName: "valueAs", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, 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 }); }
 }
@@ -122,7 +153,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                     ],
                     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 }] }] } });
+        }], ctorParameters: () => [], propDecorators: { valueAs: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueAs", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: true }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], 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 }] }] } });
+
+/** Whatever the form holds, as two moments. */
+function pairIn(value) {
+    if (value === null || value === undefined)
+        return { start: null, end: null };
+    const given = value;
+    const one = (at) => at === null || at === undefined ? null : toInstant(at);
+    return { start: one(given.start), end: one(given.end) };
+}
+/** And back out, in the shape the application asked for. */
+function pairOut(pair, shape, extra) {
+    return {
+        ...extra,
+        start: fromInstant(pair.start, shape),
+        end: fromInstant(pair.end, shape),
+    };
+}
 
 /**
  * `<tz-calendar>` — the calendar from @tzslot/dom, spoken in Angular.
@@ -133,12 +181,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
  */
 class Calendar {
     constructor() {
+        /** Set once for the application with provideTzslot(); a binding still wins. */
+        this.defaults = inject(TZSLOT_DEFAULTS);
         /** 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 */ []));
+        /** Left out, the locale decides — see `provideTzslot` to settle it once. */
+        this.firstDayOfWeek = input(this.defaults.firstDayOfWeek, ...(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.locale = input(this.defaults.locale, ...(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 */ []));
@@ -147,13 +198,13 @@ class Calendar {
          * 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 */ []));
+        this.valueAs = input(this.defaults.valueAs ?? '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 */ []));
+        this.valueTimeZone = input(this.defaults.timeZone ?? 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. */
@@ -167,6 +218,8 @@ class Calendar {
         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 */ []));
+        /** A column of ISO week numbers down the left. */
+        this.weekNumbers = input(false, ...(ngDevMode ? [{ debugName: "weekNumbers" }] : /* 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;
@@ -187,6 +240,7 @@ class Calendar {
             today: this.today(),
             renderCell: this.renderCell(),
             buttons: this.buttons(),
+            weekNumbers: this.weekNumbers(),
             messages: this.messages,
         }), ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
         /**
@@ -255,7 +309,7 @@ class Calendar {
         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: [
+    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 }, weekNumbers: { classPropertyName: "weekNumbers", publicName: "weekNumbers", 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>
@@ -278,7 +332,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
     <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 }] }] } });
+        }], 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 }] }], weekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekNumbers", 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.
@@ -290,12 +344,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
  */
 class DateField {
     constructor() {
+        /** Set once for the application with provideTzslot(); a binding still wins. */
+        this.defaults = inject(TZSLOT_DEFAULTS);
         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.locale = input(this.defaults.locale, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+        /** Left out, the locale decides — see `provideTzslot` to settle it once. */
+        this.firstDayOfWeek = input(this.defaults.firstDayOfWeek, ...(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 */ []));
@@ -305,17 +362,19 @@ class DateField {
          * 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 */ []));
+        this.valueAs = input(this.defaults.valueAs ?? '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 */ []));
+        this.valueTimeZone = input(this.defaults.timeZone ?? 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 */ []));
+        /** A column of ISO week numbers down the left. */
+        this.weekNumbers = input(false, ...(ngDevMode ? [{ debugName: "weekNumbers" }] : /* 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();
@@ -323,6 +382,8 @@ class DateField {
         /** 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 */ []));
+        /** Set while the component is being destroyed, so no output fires after it. */
+        this.gone = false;
         this.host = inject(ElementRef).nativeElement;
         this.messages = inject(TZSLOT_MESSAGES);
         this.iconSlot = viewChild.required('icon');
@@ -340,6 +401,7 @@ class DateField {
             displayWith: this.displayWith(),
             renderCell: this.renderCell(),
             buttons: this.buttons(),
+            weekNumbers: this.weekNumbers(),
             messages: this.messages,
         }), ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
         this.field = createDateField(this.host, {
@@ -351,11 +413,15 @@ class DateField {
             onOpen: () => {
                 this.isOpen.set(true);
                 this.onTouched();
-                this.opened.emit();
+                if (!this.gone)
+                    this.opened.emit();
             },
             onClose: () => {
                 this.isOpen.set(false);
-                this.closed.emit();
+                // Destroying the component closes its panel; an output that fires then
+                // is an emit on a destroyed ref (NG0953), and nothing is listening.
+                if (!this.gone)
+                    this.closed.emit();
             },
         });
         // ── ControlValueAccessor ────────────────────────────────────
@@ -369,7 +435,10 @@ class DateField {
             const settings = this.settings();
             untracked(() => this.field.update(settings));
         });
-        inject(DestroyRef).onDestroy(() => this.field.destroy());
+        inject(DestroyRef).onDestroy(() => {
+            this.gone = true;
+            this.field.destroy();
+        });
     }
     ngAfterViewInit() {
         const slot = this.iconSlot().nativeElement;
@@ -410,7 +479,7 @@ class DateField {
         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: [
+    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 }, weekNumbers: { classPropertyName: "weekNumbers", publicName: "weekNumbers", 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 }); }
 }
@@ -425,15 +494,494 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                     ],
                     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 }] }] } });
+        }], 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 }] }], weekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekNumbers", 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 }] }] } });
+
+/**
+ * `<tz-datetime-field>` — a field that opens a calendar and a time, from
+ * @tzslot/dom, spoken in Angular.
+ *
+ * Its value is an Instant, so it says which moment was meant even when the
+ * clock face does not: a time the zone skips is moved on and explained, and
+ * one that happens twice is offered by its two offsets rather than guessed.
+ */
+class DateTimeField {
+    constructor() {
+        /** Set once for the application with provideTzslot(); a binding still wins. */
+        this.defaults = inject(TZSLOT_DEFAULTS);
+        this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /**
+         * An IANA identifier. Required in spirit: given here, it wins; left out, it
+         * is the zone provideTzslot() settled for the application, and only when
+         * nothing was settled anywhere does it fall back to the browser's — which
+         * is a guess, and the one thing this library exists not to do silently.
+         */
+        this.timeZone = input(this.defaults.timeZone ?? Temporal.Now.timeZoneId(), ...(ngDevMode ? [{ debugName: "timeZone" }] : /* 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(this.defaults.locale, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+        /** Left out, the locale decides — see `provideTzslot` to settle it once. */
+        this.firstDayOfWeek = input(this.defaults.firstDayOfWeek, ...(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 */ []));
+        /** 'input' (default) for a compact time field, 'list' for the day's times. */
+        /**
+         * Whether a time is asked for at all. False leaves a field that chooses a
+         * day and holds the moment it starts.
+         */
+        this.showTime = input(true, ...(ngDevMode ? [{ debugName: "showTime" }] : /* istanbul ignore next */ []));
+        this.timeLayout = input('input', ...(ngDevMode ? [{ debugName: "timeLayout" }] : /* istanbul ignore next */ []));
+        /**
+         * Move a typed time to the nearest mark of this grid — 15 for quarter-hour
+         * appointments, ties upward. Off by default: a screen that accepts any
+         * minute must not have them quietly moved.
+         */
+        this.snapMinutes = input(null, ...(ngDevMode ? [{ debugName: "snapMinutes" }] : /* istanbul ignore next */ []));
+        /**
+         * Arrows beside the field that step the chosen moment without opening the
+         * panel: `{ hours: 1 }`, `{ days: 1 }`. `false` — the default — draws none.
+         * Counted on the zone's clocks, so a day is 23 or 25 hours when they change.
+         */
+        this.shift = input(false, ...(ngDevMode ? [{ debugName: "shift" }] : /* istanbul ignore next */ []));
+        /** Whether the step sits between the arrows, to be read and pressed. */
+        this.showStep = input(true, ...(ngDevMode ? [{ debugName: "showStep" }] : /* istanbul ignore next */ []));
+        this.stepMinutes = input(30, ...(ngDevMode ? [{ debugName: "stepMinutes" }] : /* istanbul ignore next */ []));
+        /** With timeLayout 'select': minutes between the options. Every minute by default. */
+        this.minuteStep = input(1, ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
+        this.minTime = input(undefined, ...(ngDevMode ? [{ debugName: "minTime" }] : /* istanbul ignore next */ []));
+        this.maxTime = input(undefined, ...(ngDevMode ? [{ debugName: "maxTime" }] : /* istanbul ignore next */ []));
+        /** Only with timeLayout 'list': rules out slots while still showing them. */
+        this.isSlotDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "isSlotDisabled" }] : /* istanbul ignore next */ []));
+        this.hour12 = input(undefined, ...(ngDevMode ? [{ debugName: "hour12" }] : /* istanbul ignore next */ []));
+        /** The time a newly chosen day starts at. Midnight by default. */
+        this.defaultTime = input('00:00', ...(ngDevMode ? [{ debugName: "defaultTime" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /** The text can be typed as well as chosen. On by default. */
+        this.editable = input(true, ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
+        /** Separators appear as the figures are typed, like a card number. On by default. */
+        this.mask = input(true, ...(ngDevMode ? [{ debugName: "mask" }] : /* istanbul ignore next */ []));
+        /** A pattern — `yyyy-MM-dd HH:mm` — when the shape matters more than the reader. */
+        this.format = input(undefined, ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+        /** Used when the field is not typable and no pattern is given. */
+        this.dateStyle = input('medium', ...(ngDevMode ? [{ debugName: "dateStyle" }] : /* istanbul ignore next */ []));
+        this.timeStyle = input('short', ...(ngDevMode ? [{ debugName: "timeStyle" }] : /* istanbul ignore next */ []));
+        /** The last word on the text. Given both, this one wins. */
+        this.displayWith = input(undefined, ...(ngDevMode ? [{ debugName: "displayWith" }] : /* istanbul ignore next */ []));
+        this.today = input(Temporal.Now.plainDateISO(), ...(ngDevMode ? [{ debugName: "today" }] : /* istanbul ignore next */ []));
+        this.renderCell = input(undefined, ...(ngDevMode ? [{ debugName: "renderCell" }] : /* istanbul ignore next */ []));
+        /** A column of ISO week numbers down the left. */
+        this.weekNumbers = input(false, ...(ngDevMode ? [{ debugName: "weekNumbers" }] : /* istanbul ignore next */ []));
+        this.buttons = input([], ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
+        /** What the form control holds: a Temporal Instant, a Date, or an ISO string. */
+        this.valueAs = input(this.defaults.valueAs ?? 'temporal', ...(ngDevMode ? [{ debugName: "valueAs" }] : /* 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 */ []));
+        /** Set while the component is being destroyed, so no output fires after it. */
+        this.gone = false;
+        this.host = inject(ElementRef).nativeElement;
+        this.messages = inject(TZSLOT_MESSAGES);
+        this.iconSlot = viewChild.required('icon');
+        this.settings = computed(() => ({
+            value: this.value(),
+            timeZone: this.timeZone(),
+            mode: this.mode(),
+            placeholder: this.placeholder(),
+            ariaLabel: this.ariaLabel(),
+            locale: this.locale(),
+            firstDayOfWeek: this.firstDayOfWeek(),
+            min: this.min(),
+            max: this.max(),
+            isDateDisabled: this.isDateDisabled(),
+            showTime: this.showTime(),
+            timeLayout: this.timeLayout(),
+            snapMinutes: this.snapMinutes(),
+            shift: this.shift(),
+            showStep: this.showStep(),
+            stepMinutes: this.stepMinutes(),
+            minuteStep: this.minuteStep(),
+            minTime: this.minTime(),
+            maxTime: this.maxTime(),
+            isSlotDisabled: this.isSlotDisabled(),
+            hour12: this.hour12(),
+            defaultTime: this.defaultTime(),
+            disabled: this.disabled() || this.formDisabled(),
+            editable: this.editable(),
+            mask: this.mask(),
+            format: this.format(),
+            dateStyle: this.dateStyle(),
+            timeStyle: this.timeStyle(),
+            displayWith: this.displayWith(),
+            today: this.today(),
+            renderCell: this.renderCell(),
+            buttons: this.buttons(),
+            weekNumbers: this.weekNumbers(),
+            messages: this.messages,
+        }), ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+        /** Created before the required timeZone is bound; the first change detection fills it in. */
+        this.field = createDateTimeField(this.host, {
+            messages: this.messages,
+            onChange: (value) => {
+                this.value.set(value);
+                this.onChange(value);
+            },
+            onOpen: () => {
+                this.isOpen.set(true);
+                this.onTouched();
+                if (!this.gone)
+                    this.opened.emit();
+            },
+            onClose: () => {
+                this.isOpen.set(false);
+                // Destroying the component closes its panel; an output that fires then
+                // is an emit on a destroyed ref (NG0953), and nothing is listening.
+                if (!this.gone)
+                    this.closed.emit();
+            },
+        });
+        // ── ControlValueAccessor ────────────────────────────────────
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        effect(() => {
+            const settings = this.settings();
+            untracked(() => this.field.update(settings));
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.gone = true;
+            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);
+        }
+    }
+    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 : toInstant(value));
+    }
+    registerOnChange(fn) {
+        this.onChange = (value) => fn(fromInstant(value, this.valueAs()));
+    }
+    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: DateTimeField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.23", type: DateTimeField, isStandalone: true, selector: "tz-datetime-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", 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 }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, timeLayout: { classPropertyName: "timeLayout", publicName: "timeLayout", isSignal: true, isRequired: false, transformFunction: null }, snapMinutes: { classPropertyName: "snapMinutes", publicName: "snapMinutes", isSignal: true, isRequired: false, transformFunction: null }, shift: { classPropertyName: "shift", publicName: "shift", isSignal: true, isRequired: false, transformFunction: null }, showStep: { classPropertyName: "showStep", publicName: "showStep", isSignal: true, isRequired: false, transformFunction: null }, stepMinutes: { classPropertyName: "stepMinutes", publicName: "stepMinutes", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", 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 }, hour12: { classPropertyName: "hour12", publicName: "hour12", isSignal: true, isRequired: false, transformFunction: null }, defaultTime: { classPropertyName: "defaultTime", publicName: "defaultTime", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, dateStyle: { classPropertyName: "dateStyle", publicName: "dateStyle", isSignal: true, isRequired: false, transformFunction: null }, timeStyle: { classPropertyName: "timeStyle", publicName: "timeStyle", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, today: { classPropertyName: "today", publicName: "today", isSignal: true, isRequired: false, transformFunction: null }, renderCell: { classPropertyName: "renderCell", publicName: "renderCell", isSignal: true, isRequired: false, transformFunction: null }, weekNumbers: { classPropertyName: "weekNumbers", publicName: "weekNumbers", 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 } }, outputs: { value: "valueChange", opened: "opened", closed: "closed" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimeField), 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: DateTimeField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tz-datetime-field',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimeField), 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"] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], 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 }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], timeLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLayout", required: false }] }], snapMinutes: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapMinutes", required: false }] }], shift: [{ type: i0.Input, args: [{ isSignal: true, alias: "shift", required: false }] }], showStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStep", required: false }] }], stepMinutes: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepMinutes", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", 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 }] }], hour12: [{ type: i0.Input, args: [{ isSignal: true, alias: "hour12", required: false }] }], defaultTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultTime", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], dateStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateStyle", required: false }] }], timeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeStyle", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], today: [{ type: i0.Input, args: [{ isSignal: true, alias: "today", required: false }] }], renderCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderCell", required: false }] }], weekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekNumbers", required: false }] }], buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }], valueAs: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueAs", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], iconSlot: [{ type: i0.ViewChild, args: ['icon', { isSignal: true }] }] } });
+
+const EMPTY$3 = { start: null, end: null };
+/**
+ * `<tz-range-field>` — one field for a period, from @tzslot/dom, spoken in
+ * Angular. Named ranges beside the calendar, months side by side, and whole
+ * days or moments.
+ */
+class RangeField {
+    constructor() {
+        /** Set once for the application with provideTzslot(); a binding still wins. */
+        this.defaults = inject(TZSLOT_DEFAULTS);
+        this.value = model(EMPTY$3, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /**
+         * What the form control holds. `'utc'` gives two ISO strings; the default
+         * gives the library's own moments. Settled for a whole application with
+         * provideTzslot(), which documents it as applying to every component — and
+         * this one did not listen.
+         */
+        this.valueAs = input(this.defaults.valueAs ?? 'temporal', ...(ngDevMode ? [{ debugName: "valueAs" }] : /* istanbul ignore next */ []));
+        /**
+         * An IANA identifier. Required in spirit: given here, it wins; left out, it
+         * is the zone provideTzslot() settled for the application, and only when
+         * nothing was settled anywhere does it fall back to the browser's — which
+         * is a guess, and the one thing this library exists not to do silently.
+         */
+        this.timeZone = input(this.defaults.timeZone ?? Temporal.Now.timeZoneId(), ...(ngDevMode ? [{ debugName: "timeZone" }] : /* istanbul ignore next */ []));
+        /** Named ranges beside the calendar: the built-in names, or your own. */
+        this.presets = input([
+            'thisQuarterHour',
+            'lastHour',
+            'thisHour',
+            'nextHour',
+            'yesterday',
+            'today',
+            'tomorrow',
+            'last7Days',
+            'thisMonth',
+            'thisQuarter',
+        ], ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
+        /**
+         * Lets a period stop at one end — "from 14 September", "until the 20th".
+         * The panel then offers Between / From / Until, and each chosen end can be
+         * dropped with the cross beside it. Off by default: a booking form must not
+         * accept a period with no end.
+         */
+        this.openEnded = input(false, ...(ngDevMode ? [{ debugName: "openEnded" }] : /* istanbul ignore next */ []));
+        /** A word or two saying what is being chosen — "Travel dates". */
+        this.title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        /** How an hour is asked for: two menus (default), or figures with arrows. */
+        this.timeLayout = input('select', ...(ngDevMode ? [{ debugName: "timeLayout" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the period carries times as well as days — the screen's decision,
+         * not the reader's. There is no "all day" switch: on, every chosen day
+         * starts at `defaultTimes`.
+         */
+        this.showTime = input(false, ...(ngDevMode ? [{ debugName: "showTime" }] : /* istanbul ignore next */ []));
+        /**
+         * The hours a newly chosen day is given: midnight unless the screen knows
+         * better — `{ start: '09:00', end: '18:00' }` for a working day. A value
+         * handed to the field keeps its own hours.
+         */
+        this.defaultTimes = input({}, ...(ngDevMode ? [{ debugName: "defaultTimes" }] : /* istanbul ignore next */ []));
+        this.stepMinutes = input(30, ...(ngDevMode ? [{ debugName: "stepMinutes" }] : /* istanbul ignore next */ []));
+        /**
+         * Move a time typed by hand to the nearest mark of this grid — 15 for
+         * quarter-hour appointments, ties upward. Off by default.
+         */
+        this.snapMinutes = input(null, ...(ngDevMode ? [{ debugName: "snapMinutes" }] : /* istanbul ignore next */ []));
+        /**
+         * How long the period may be, and how short — `'30d'`, `{ hours: 2 }`.
+         * Moving one end pushes the other rather than refusing the move.
+         */
+        this.maxSpan = input(null, ...(ngDevMode ? [{ debugName: "maxSpan" }] : /* istanbul ignore next */ []));
+        this.minSpan = input(null, ...(ngDevMode ? [{ debugName: "minSpan" }] : /* istanbul ignore next */ []));
+        /** Minutes between the options of the hour menu. Five by default. */
+        this.minuteStep = input(5, ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
+        /** Nothing is reported until Apply is pressed. */
+        this.confirm = input(false, ...(ngDevMode ? [{ debugName: "confirm" }] : /* istanbul ignore next */ []));
+        /**
+         * Arrows that step the whole period without opening the panel.
+         *
+         * `false` — the default — draws none. `true` draws them and follows what is
+         * being chosen: an hour for a period, a day when `singleDay` says it is one
+         * date. A duration such as `{ months: 3 }` or `'45mn'` imposes the step; a
+         * list offers several and lets the reader pick.
+         */
+        this.shift = input(false, ...(ngDevMode ? [{ debugName: "shift" }] : /* istanbul ignore next */ []));
+        /** Whether the column of shortcuts is drawn. The list itself is kept. */
+        this.showPresets = input(true, ...(ngDevMode ? [{ debugName: "showPresets" }] : /* istanbul ignore next */ []));
+        /** Whether the step sits between the arrows, to be read and pressed. */
+        this.showStep = input(true, ...(ngDevMode ? [{ debugName: "showStep" }] : /* istanbul ignore next */ []));
+        /** One field instead of two; a click means that whole day. */
+        this.singleDay = input(false, ...(ngDevMode ? [{ debugName: "singleDay" }] : /* istanbul ignore next */ []));
+        this.months = input(2, ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
+        this.weekNumbers = input(false, ...(ngDevMode ? [{ debugName: "weekNumbers" }] : /* istanbul ignore next */ []));
+        /** Left out, the locale decides — see `provideTzslot` to settle it once. */
+        this.firstDayOfWeek = input(this.defaults.firstDayOfWeek, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* 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(this.defaults.locale, ...(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 */ []));
+        /** The moment the shortcuts shorter than a day are counted from. The clock by default. */
+        this.now = input(null, ...(ngDevMode ? [{ debugName: "now" }] : /* istanbul ignore next */ []));
+        /**
+         * The whole field, or one end of it: `{ end: true }` for a period whose end
+         * the screen works out itself. A locked end is read-only rather than
+         * disabled — still readable, still reachable by the keyboard.
+         */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /** A pattern for each end — `yyyy-MM-dd`. */
+        this.format = input(undefined, ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+        /**
+         * What is written above the panel's two fields, and between them. Words by
+         * default; `{ start: null, end: null, between: '»' }` for a screen that
+         * prefers a mark. A DOM node is taken as it is.
+         */
+        /**
+         * The mark inside the panel's two fields — a calendar by default, `null`
+         * for none, or a node of your own.
+         */
+        this.fieldIcon = input(undefined, ...(ngDevMode ? [{ debugName: "fieldIcon" }] : /* istanbul ignore next */ []));
+        this.fieldIconSide = input('start', ...(ngDevMode ? [{ debugName: "fieldIconSide" }] : /* istanbul ignore next */ []));
+        this.labels = input({}, ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+        /** Separators appear as figures are typed in those fields. */
+        this.mask = input(true, ...(ngDevMode ? [{ debugName: "mask" }] : /* istanbul ignore next */ []));
+        this.displayWith = input(undefined, ...(ngDevMode ? [{ debugName: "displayWith" }] : /* 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.gone = false;
+        this.messages = inject(TZSLOT_MESSAGES);
+        this.settings = computed(() => ({
+            value: this.value(),
+            timeZone: this.timeZone(),
+            presets: this.presets(),
+            openEnded: this.openEnded(),
+            title: this.title(),
+            timeLayout: this.timeLayout(),
+            showTime: this.showTime(),
+            defaultTimes: this.defaultTimes(),
+            stepMinutes: this.stepMinutes(),
+            snapMinutes: this.snapMinutes(),
+            maxSpan: this.maxSpan(),
+            minSpan: this.minSpan(),
+            minuteStep: this.minuteStep(),
+            confirm: this.confirm(),
+            shift: this.shift(),
+            showPresets: this.showPresets(),
+            showStep: this.showStep(),
+            singleDay: this.singleDay(),
+            months: this.months(),
+            weekNumbers: this.weekNumbers(),
+            firstDayOfWeek: this.firstDayOfWeek(),
+            mode: this.mode(),
+            placeholder: this.placeholder(),
+            ariaLabel: this.ariaLabel(),
+            locale: this.locale(),
+            min: this.min(),
+            max: this.max(),
+            isDateDisabled: this.isDateDisabled(),
+            renderCell: this.renderCell(),
+            today: this.today(),
+            now: this.now(),
+            // A form disabling the control wins over a per-end lock: it means the
+            // whole thing is out of play, not that one end of it is.
+            disabled: this.formDisabled() ? true : this.disabled(),
+            format: this.format(),
+            labels: this.labels(),
+            fieldIcon: this.fieldIcon(),
+            fieldIconSide: this.fieldIconSide(),
+            mask: this.mask(),
+            displayWith: this.displayWith(),
+            messages: this.messages,
+        }), ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+        /** Created before the required timeZone is bound; the first change detection fills it in. */
+        this.field = createRangeField(inject(ElementRef).nativeElement, {
+            messages: this.messages,
+            onChange: (value) => {
+                this.value.set(value);
+                this.onChange(value);
+                this.onTouched();
+            },
+            onOpen: () => {
+                this.isOpen.set(true);
+                if (!this.gone)
+                    this.opened.emit();
+            },
+            onClose: () => {
+                this.isOpen.set(false);
+                if (!this.gone)
+                    this.closed.emit();
+            },
+        });
+        // ── ControlValueAccessor ────────────────────────────────────
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        effect(() => {
+            const settings = this.settings();
+            untracked(() => this.field.update(settings));
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.gone = true;
+            this.field.destroy();
+        });
+    }
+    open() {
+        this.field.open();
+    }
+    close() {
+        this.field.close();
+    }
+    toggle() {
+        this.field.toggle();
+    }
+    /** Empties the period and tells any form control about it. */
+    clear() {
+        this.field.clear();
+    }
+    /**
+     * Typed `unknown` because that is what a form control holds: a string from
+     * a back end, a Date from older code, or the library's own objects. It was
+     * typed `RangeFieldValue | null` and threw on the first of those.
+     */
+    writeValue(value) {
+        if (value === null || value === undefined) {
+            this.value.set(EMPTY$3);
+            return;
+        }
+        // Two moments, nothing else. An allDay a form still carries is ignored:
+        // whether a period is whole days is read off the moments themselves.
+        const pair = pairIn(value);
+        this.value.set({ start: pair.start, end: pair.end });
+    }
+    registerOnChange(fn) {
+        this.onChange = (next) => fn(pairOut(next, this.valueAs(), {}));
+    }
+    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: RangeField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: RangeField, isStandalone: true, selector: "tz-range-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, valueAs: { classPropertyName: "valueAs", publicName: "valueAs", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, openEnded: { classPropertyName: "openEnded", publicName: "openEnded", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, timeLayout: { classPropertyName: "timeLayout", publicName: "timeLayout", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, defaultTimes: { classPropertyName: "defaultTimes", publicName: "defaultTimes", isSignal: true, isRequired: false, transformFunction: null }, stepMinutes: { classPropertyName: "stepMinutes", publicName: "stepMinutes", isSignal: true, isRequired: false, transformFunction: null }, snapMinutes: { classPropertyName: "snapMinutes", publicName: "snapMinutes", isSignal: true, isRequired: false, transformFunction: null }, maxSpan: { classPropertyName: "maxSpan", publicName: "maxSpan", isSignal: true, isRequired: false, transformFunction: null }, minSpan: { classPropertyName: "minSpan", publicName: "minSpan", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, confirm: { classPropertyName: "confirm", publicName: "confirm", isSignal: true, isRequired: false, transformFunction: null }, shift: { classPropertyName: "shift", publicName: "shift", isSignal: true, isRequired: false, transformFunction: null }, showPresets: { classPropertyName: "showPresets", publicName: "showPresets", isSignal: true, isRequired: false, transformFunction: null }, showStep: { classPropertyName: "showStep", publicName: "showStep", isSignal: true, isRequired: false, transformFunction: null }, singleDay: { classPropertyName: "singleDay", publicName: "singleDay", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, weekNumbers: { classPropertyName: "weekNumbers", publicName: "weekNumbers", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", 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 }, 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 }, now: { classPropertyName: "now", publicName: "now", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, fieldIcon: { classPropertyName: "fieldIcon", publicName: "fieldIcon", isSignal: true, isRequired: false, transformFunction: null }, fieldIconSide: { classPropertyName: "fieldIconSide", publicName: "fieldIconSide", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", opened: "opened", closed: "closed" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RangeField), multi: true },
+        ], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: RangeField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tz-range-field',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RangeField), multi: true },
+                    ],
+                    template: '',
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueAs: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueAs", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], openEnded: [{ type: i0.Input, args: [{ isSignal: true, alias: "openEnded", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], timeLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLayout", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], defaultTimes: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultTimes", required: false }] }], stepMinutes: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepMinutes", required: false }] }], snapMinutes: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapMinutes", required: false }] }], maxSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSpan", required: false }] }], minSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSpan", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], confirm: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirm", required: false }] }], shift: [{ type: i0.Input, args: [{ isSignal: true, alias: "shift", required: false }] }], showPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPresets", required: false }] }], showStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStep", required: false }] }], singleDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleDay", required: false }] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], weekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekNumbers", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], 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 }] }], 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 }] }], now: [{ type: i0.Input, args: [{ isSignal: true, alias: "now", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], fieldIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldIcon", required: false }] }], fieldIconSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldIconSide", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 const EMPTY$2 = { start: null, end: null };
 /** `<tz-date-range>` — the range from @tzslot/dom, spoken in Angular. */
 class DateRange {
     constructor() {
+        /** Set once for the application with provideTzslot(); a binding still wins. */
+        this.defaults = inject(TZSLOT_DEFAULTS);
         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 */ []));
+        /** Left out, the locale decides — see `provideTzslot` to settle it once. */
+        this.firstDayOfWeek = input(this.defaults.firstDayOfWeek, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+        this.locale = input(this.defaults.locale, ...(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 */ []));
@@ -441,6 +989,10 @@ class DateRange {
         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 */ []));
+        /** A column of ISO week numbers down the left. */
+        this.weekNumbers = input(false, ...(ngDevMode ? [{ debugName: "weekNumbers" }] : /* istanbul ignore next */ []));
+        /** How many months to show side by side. Two is what most ranges want. */
+        this.months = input(1, ...(ngDevMode ? [{ debugName: "months" }] : /* 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. */
@@ -462,6 +1014,8 @@ class DateRange {
             blockAcrossDisabled: this.blockAcrossDisabled(),
             rangeSpansBlockedMessage: this.rangeSpansBlockedMessage(),
             renderCell: this.renderCell(),
+            weekNumbers: this.weekNumbers(),
+            months: this.months(),
             messages: this.messages,
         }), ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
         this.range = createDateRange(this.host, {
@@ -508,7 +1062,7 @@ class DateRange {
         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: [
+    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 }, weekNumbers: { classPropertyName: "weekNumbers", publicName: "weekNumbers", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", 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>
@@ -529,7 +1083,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
     <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 }] }] } });
+        }], 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 }] }], weekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekNumbers", required: false }] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", 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);
@@ -549,15 +1103,59 @@ const EMPTY$1 = { start: null, end: null };
  */
 class DateTimeRange {
     constructor() {
+        /** Set once for the application with provideTzslot(); a binding still wins. */
+        this.defaults = inject(TZSLOT_DEFAULTS);
         this.value = model(EMPTY$1, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-        this.timeZone = input.required(...(ngDevMode ? [{ debugName: "timeZone" }] : /* istanbul ignore next */ []));
+        /**
+         * An IANA identifier. Required in spirit: given here, it wins; left out, it
+         * is the zone provideTzslot() settled for the application, and only when
+         * nothing was settled anywhere does it fall back to the browser's — which
+         * is a guess, and the one thing this library exists not to do silently.
+         */
+        this.timeZone = input(this.defaults.timeZone ?? Temporal.Now.timeZoneId(), ...(ngDevMode ? [{ debugName: "timeZone" }] : /* istanbul ignore next */ []));
+        /**
+         * Whole days rather than moments. Two-way: the switch inside the widget
+         * sets it, and so can you.
+         */
+        /**
+         * What the form control holds. `'utc'` gives two ISO strings; the default
+         * gives the library's own moments.
+         */
+        this.valueAs = input(this.defaults.valueAs ?? 'temporal', ...(ngDevMode ? [{ debugName: "valueAs" }] : /* istanbul ignore next */ []));
+        this.allDay = model(false, ...(ngDevMode ? [{ debugName: "allDay" }] : /* istanbul ignore next */ []));
+        /** Whether that switch is shown at all. */
+        this.allDaySwitch = input(true, ...(ngDevMode ? [{ debugName: "allDaySwitch" }] : /* istanbul ignore next */ []));
+        /**
+         * Lets the interval stop at one end. The summary then says what it means —
+         * "From 14 Sept 2026, 09:00" — instead of going blank, which reads as
+         * nothing chosen. Off by default.
+         */
+        this.openEnded = input(false, ...(ngDevMode ? [{ debugName: "openEnded" }] : /* istanbul ignore next */ []));
+        /** How each end asks for its time: 'input', 'select' or 'list'. */
+        this.timeLayout = input('input', ...(ngDevMode ? [{ debugName: "timeLayout" }] : /* istanbul ignore next */ []));
         this.stepMinutes = input(30, ...(ngDevMode ? [{ debugName: "stepMinutes" }] : /* istanbul ignore next */ []));
+        /** With 'select': minutes between the options. Every minute by default. */
+        this.minuteStep = input(1, ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
+        this.hour12 = input(undefined, ...(ngDevMode ? [{ debugName: "hour12" }] : /* istanbul ignore next */ []));
+        /** The time a newly chosen day starts at. Midnight by default. */
+        this.defaultTime = input('00:00', ...(ngDevMode ? [{ debugName: "defaultTime" }] : /* istanbul ignore next */ []));
+        /** Both ends can be typed into as well as chosen from. */
+        this.editable = input(true, ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
+        /** A pattern for both ends — `yyyy-MM-dd HH:mm`. */
+        this.format = input(undefined, ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+        this.isDateDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "isDateDisabled" }] : /* istanbul ignore next */ []));
+        /** Which day is today, in both panels. */
+        this.today = input(Temporal.Now.plainDateISO(), ...(ngDevMode ? [{ debugName: "today" }] : /* istanbul ignore next */ []));
+        this.renderCell = input(undefined, ...(ngDevMode ? [{ debugName: "renderCell" }] : /* istanbul ignore next */ []));
+        /** A column of ISO week numbers down the left. */
+        this.weekNumbers = input(false, ...(ngDevMode ? [{ debugName: "weekNumbers" }] : /* istanbul ignore next */ []));
+        this.buttons = input([], ...(ngDevMode ? [{ debugName: "buttons" }] : /* 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.locale = input(this.defaults.locale, ...(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 */ []));
@@ -567,7 +1165,21 @@ class DateTimeRange {
         this.settings = computed(() => ({
             value: this.value(),
             timeZone: this.timeZone(),
+            allDay: this.allDay(),
+            allDaySwitch: this.allDaySwitch(),
+            openEnded: this.openEnded(),
+            timeLayout: this.timeLayout(),
             stepMinutes: this.stepMinutes(),
+            minuteStep: this.minuteStep(),
+            hour12: this.hour12(),
+            defaultTime: this.defaultTime(),
+            editable: this.editable(),
+            format: this.format(),
+            isDateDisabled: this.isDateDisabled(),
+            today: this.today(),
+            renderCell: this.renderCell(),
+            buttons: this.buttons(),
+            weekNumbers: this.weekNumbers(),
             minTime: this.minTime(),
             maxTime: this.maxTime(),
             isSlotDisabled: this.isSlotDisabled(),
@@ -584,6 +1196,7 @@ class DateTimeRange {
         this.range = createDateTimeRange(inject(ElementRef).nativeElement, {
             messages: this.messages,
             onChange: (next) => {
+                this.allDay.set(next.allDay === true);
                 this.value.set(next);
                 this.onChange(next);
                 this.onTouched();
@@ -606,11 +1219,21 @@ class DateTimeRange {
     clear() {
         this.range.clear();
     }
+    /**
+     * Typed `unknown` because that is what a form control holds: a string from
+     * a back end, a Date from older code, or the library's own objects.
+     */
     writeValue(value) {
-        this.value.set(value ?? EMPTY$1);
+        if (value === null || value === undefined) {
+            this.value.set({ start: null, end: null });
+            return;
+        }
+        const pair = pairIn(value);
+        const allDay = value.allDay;
+        this.value.set(allDay === undefined ? pair : { ...pair, allDay });
     }
     registerOnChange(fn) {
-        this.onChange = fn;
+        this.onChange = (next) => fn(pairOut(next, this.valueAs(), { allDay: next.allDay === true }));
     }
     registerOnTouched(fn) {
         this.onTouched = fn;
@@ -619,7 +1242,7 @@ class DateTimeRange {
         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: [
+    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: false, transformFunction: null }, valueAs: { classPropertyName: "valueAs", publicName: "valueAs", isSignal: true, isRequired: false, transformFunction: null }, allDay: { classPropertyName: "allDay", publicName: "allDay", isSignal: true, isRequired: false, transformFunction: null }, allDaySwitch: { classPropertyName: "allDaySwitch", publicName: "allDaySwitch", isSignal: true, isRequired: false, transformFunction: null }, openEnded: { classPropertyName: "openEnded", publicName: "openEnded", isSignal: true, isRequired: false, transformFunction: null }, timeLayout: { classPropertyName: "timeLayout", publicName: "timeLayout", isSignal: true, isRequired: false, transformFunction: null }, stepMinutes: { classPropertyName: "stepMinutes", publicName: "stepMinutes", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, hour12: { classPropertyName: "hour12", publicName: "hour12", isSignal: true, isRequired: false, transformFunction: null }, defaultTime: { classPropertyName: "defaultTime", publicName: "defaultTime", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", 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 }, renderCell: { classPropertyName: "renderCell", publicName: "renderCell", isSignal: true, isRequired: false, transformFunction: null }, weekNumbers: { classPropertyName: "weekNumbers", publicName: "weekNumbers", isSignal: true, isRequired: false, transformFunction: null }, buttons: { classPropertyName: "buttons", publicName: "buttons", 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", allDay: "allDayChange" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimeRange), multi: true },
         ], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -634,7 +1257,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                     ],
                     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 }] }] } });
+        }], 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: false }] }], valueAs: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueAs", required: false }] }], allDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "allDay", required: false }] }, { type: i0.Output, args: ["allDayChange"] }], allDaySwitch: [{ type: i0.Input, args: [{ isSignal: true, alias: "allDaySwitch", required: false }] }], openEnded: [{ type: i0.Input, args: [{ isSignal: true, alias: "openEnded", required: false }] }], timeLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLayout", required: false }] }], stepMinutes: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepMinutes", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], hour12: [{ type: i0.Input, args: [{ isSignal: true, alias: "hour12", required: false }] }], defaultTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultTime", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], isDateDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDateDisabled", required: false }] }], today: [{ type: i0.Input, args: [{ isSignal: true, alias: "today", required: false }] }], renderCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderCell", required: false }] }], weekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekNumbers", required: false }] }], buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", 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 };
 /**
@@ -643,15 +1266,29 @@ const EMPTY = { start: null, end: null, from: null, to: null };
  */
 class DailyRange {
     constructor() {
+        /** Set once for the application with provideTzslot(); a binding still wins. */
+        this.defaults = inject(TZSLOT_DEFAULTS);
         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 */ []));
+        /**
+         * An IANA identifier. Required in spirit: given here, it wins; left out, it
+         * is the zone provideTzslot() settled for the application, and only when
+         * nothing was settled anywhere does it fall back to the browser's — which
+         * is a guess, and the one thing this library exists not to do silently.
+         */
+        this.timeZone = input(this.defaults.timeZone ?? Temporal.Now.timeZoneId(), ...(ngDevMode ? [{ debugName: "timeZone" }] : /* istanbul ignore next */ []));
         this.stepMinutes = input(30, ...(ngDevMode ? [{ debugName: "stepMinutes" }] : /* istanbul ignore next */ []));
+        /** 'input' (default) for two compact fields, 'list' for times to click. */
+        this.timeLayout = input('input', ...(ngDevMode ? [{ debugName: "timeLayout" }] : /* istanbul ignore next */ []));
+        /** 12-hour fields with an AM/PM button; the locale decides when unset. */
+        this.hour12 = input(undefined, ...(ngDevMode ? [{ debugName: "hour12" }] : /* istanbul ignore next */ []));
+        /** With timeLayout 'columns': minutes between the options. Every minute by default. */
+        this.minuteStep = input(1, ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* 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 */ []));
+        /** Left out, the locale decides — see `provideTzslot` to settle it once. */
+        this.firstDayOfWeek = input(this.defaults.firstDayOfWeek, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+        this.locale = input(this.defaults.locale, ...(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 */ []));
@@ -666,6 +1303,9 @@ class DailyRange {
             value: this.value(),
             timeZone: this.timeZone(),
             stepMinutes: this.stepMinutes(),
+            timeLayout: this.timeLayout(),
+            hour12: this.hour12(),
+            minuteStep: this.minuteStep(),
             minTime: this.minTime(),
             maxTime: this.maxTime(),
             firstDayOfWeek: this.firstDayOfWeek(),
@@ -707,6 +1347,11 @@ class DailyRange {
     clear() {
         this.range.clear();
     }
+    /**
+     * A pattern, not a moment: two days and the clock faces repeated over them.
+     * `valueAs` has nothing to convert here, which is why this component does
+     * not take it — see the note on TzslotDefaults.
+     */
     writeValue(value) {
         this.value.set(value ?? EMPTY);
     }
@@ -720,7 +1365,7 @@ class DailyRange {
         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: [
+    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: false, transformFunction: null }, stepMinutes: { classPropertyName: "stepMinutes", publicName: "stepMinutes", isSignal: true, isRequired: false, transformFunction: null }, timeLayout: { classPropertyName: "timeLayout", publicName: "timeLayout", isSignal: true, isRequired: false, transformFunction: null }, hour12: { classPropertyName: "hour12", publicName: "hour12", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", 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 }); }
 }
@@ -735,7 +1380,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                     ],
                     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 }] }] } });
+        }], 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: false }] }], stepMinutes: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepMinutes", required: false }] }], timeLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLayout", required: false }] }], hour12: [{ type: i0.Input, args: [{ isSignal: true, alias: "hour12", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", 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
@@ -743,12 +1388,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
  */
 class MultiDate {
     constructor() {
+        /** Set once for the application with provideTzslot(); a binding still wins. */
+        this.defaults = inject(TZSLOT_DEFAULTS);
         /** 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 */ []));
+        /** Left out, the locale decides — see `provideTzslot` to settle it once. */
+        this.firstDayOfWeek = input(this.defaults.firstDayOfWeek, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+        this.locale = input(this.defaults.locale, ...(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 */ []));
@@ -756,11 +1404,13 @@ class MultiDate {
         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 */ []));
+        /** A column of ISO week numbers down the left. */
+        this.weekNumbers = input(false, ...(ngDevMode ? [{ debugName: "weekNumbers" }] : /* 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 */ []));
+        this.valueAs = input(this.defaults.valueAs ?? '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.valueTimeZone = input(this.defaults.timeZone ?? 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);
@@ -779,6 +1429,7 @@ class MultiDate {
             today: this.today(),
             renderCell: this.renderCell(),
             buttons: this.buttons(),
+            weekNumbers: this.weekNumbers(),
             messages: this.messages,
         }), ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
         this.calendar = createMultiDate(this.host, {
@@ -836,7 +1487,7 @@ class MultiDate {
         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: [
+    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 }, weekNumbers: { classPropertyName: "weekNumbers", publicName: "weekNumbers", 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>
@@ -857,7 +1508,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
     <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 }] }] } });
+        }], 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 }] }], weekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekNumbers", 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.
@@ -871,5 +1522,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Calendar, DailyRange, DateField, DateRange, DateTimeRange, MultiDate, TZSLOT_MESSAGES, TimeSlotPicker, provideTzslotMessages };
+export { Calendar, DailyRange, DateField, DateRange, DateTimeField, DateTimeRange, MultiDate, RangeField, TZSLOT_DEFAULTS, TZSLOT_MESSAGES, TimeSlotPicker, pairIn, pairOut, provideTzslot, provideTzslotMessages };
 //# sourceMappingURL=tzslot-angular.mjs.map