@tzslot/angular 1.0.0 → 1.2.0

package/fesm2022/tzslot-angular.mjs

@@ -1,7 +1,7 @@
 import * as i0 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, createDateTimeField, createRangeField, createDateRange, createDateTimeRange, createDailyRange, createMultiDate } from '@tzslot/dom';
+import { EN, getSlotChoices, createTimeSlots, createCalendar, createDateField, createDateTimeField, createRangeField, createDateRange, createDateTimeRange, createDailyRange, createMultiDate, createTimeSelect, createTimeInput } from '@tzslot/dom';
 export { EN, FR } from '@tzslot/dom';
 import { Temporal, toInstant, fromInstant, toPlainDate, fromPlainDate } from '@tzslot/core';
 
@@ -79,7 +79,17 @@ class TimeSlotPicker {
             ...(this.isDisabled() !== undefined ? { isDisabled: this.isDisabled() } : {}),
         }), ...(ngDevMode ? [{ debugName: "choices" }] : /* istanbul ignore next */ []));
         this.formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
-        this.messages = inject(TZSLOT_MESSAGES);
+        /**
+         * The words the widget says itself — not the month names, which come from
+         * `locale`.
+         *
+         * An application speaks one language, so the usual place to say it once is
+         * `provideTzslotMessages(FR)` or `provideTzslot({ messages: FR })`, and that
+         * is what this falls back to. Written on the tag it wins, which is what a
+         * screen switching language while it runs needs: an injected value is read
+         * once and never changes again.
+         */
+        this.messages = input(inject(TZSLOT_MESSAGES), ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
         this.settings = computed(() => ({
             date: this.date(),
             timeZone: this.timeZone(),
@@ -93,14 +103,14 @@ class TimeSlotPicker {
             ariaLabel: this.ariaLabel(),
             missingLabel: this.missingLabel(),
             emptyLabel: this.emptyLabel(),
-            messages: this.messages,
+            messages: this.messages(),
         }), ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
         /**
          * Created empty: `date` and `timeZone` are required inputs, which cannot be
          * read before they are bound. The first change detection fills it in.
          */
         this.slots = createTimeSlots(inject(ElementRef).nativeElement, {
-            messages: this.messages,
+            messages: this.messages(),
             onChange: (instant) => {
                 this.value.set(instant);
                 this.onChange(instant);
@@ -138,7 +148,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: { 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: [
+    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 }, messages: { classPropertyName: "messages", publicName: "messages", 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 }); }
 }
@@ -153,7 +163,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                     ],
                     template: '',
                 }]
-        }], 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 }] }] } });
+        }], 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 }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }] } });
 
 /** Whatever the form holds, as two moments. */
 function pairIn(value) {
@@ -223,7 +233,17 @@ class Calendar {
         /** Buttons under the grid: `['today', 'clear']`. None by default. */
         this.buttons = input([], ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
         this.host = inject(ElementRef).nativeElement;
-        this.messages = inject(TZSLOT_MESSAGES);
+        /**
+         * The words the widget says itself — not the month names, which come from
+         * `locale`.
+         *
+         * An application speaks one language, so the usual place to say it once is
+         * `provideTzslotMessages(FR)` or `provideTzslot({ messages: FR })`, and that
+         * is what this falls back to. Written on the tag it wins, which is what a
+         * screen switching language while it runs needs: an injected value is read
+         * once and never changes again.
+         */
+        this.messages = input(inject(TZSLOT_MESSAGES), ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
         this.prevSlot = viewChild.required('prev');
         this.nextSlot = viewChild.required('next');
         this.formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
@@ -241,7 +261,7 @@ class Calendar {
             renderCell: this.renderCell(),
             buttons: this.buttons(),
             weekNumbers: this.weekNumbers(),
-            messages: this.messages,
+            messages: this.messages(),
         }), ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
         /**
          * Drawn at construction, so the cells exist as soon as the component does —
@@ -309,7 +329,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 }, 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: [
+    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 }, messages: { classPropertyName: "messages", publicName: "messages", 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>
@@ -332,7 +352,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 }] }], 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 }] }] } });
+        }], 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 }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", 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.
@@ -385,7 +405,17 @@ class DateField {
         /** 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);
+        /**
+         * The words the widget says itself — not the month names, which come from
+         * `locale`.
+         *
+         * An application speaks one language, so the usual place to say it once is
+         * `provideTzslotMessages(FR)` or `provideTzslot({ messages: FR })`, and that
+         * is what this falls back to. Written on the tag it wins, which is what a
+         * screen switching language while it runs needs: an injected value is read
+         * once and never changes again.
+         */
+        this.messages = input(inject(TZSLOT_MESSAGES), ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
         this.iconSlot = viewChild.required('icon');
         this.settings = computed(() => ({
             value: this.value(),
@@ -402,7 +432,7 @@ class DateField {
             renderCell: this.renderCell(),
             buttons: this.buttons(),
             weekNumbers: this.weekNumbers(),
-            messages: this.messages,
+            messages: this.messages(),
         }), ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
         this.field = createDateField(this.host, {
             ...untracked(this.settings),
@@ -479,7 +509,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 }, 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: [
+    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 }, messages: { classPropertyName: "messages", publicName: "messages", 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 }); }
 }
@@ -494,7 +524,7 @@ 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 }] }], 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 }] }] } });
+        }], 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"] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], iconSlot: [{ type: i0.ViewChild, args: ['icon', { isSignal: true }] }] } });
 
 /**
  * `<tz-datetime-field>` — a field that opens a calendar and a time, from
@@ -544,6 +574,8 @@ class DateTimeField {
          * 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 */ []));
@@ -581,7 +613,17 @@ class DateTimeField {
         /** 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);
+        /**
+         * The words the widget says itself — not the month names, which come from
+         * `locale`.
+         *
+         * An application speaks one language, so the usual place to say it once is
+         * `provideTzslotMessages(FR)` or `provideTzslot({ messages: FR })`, and that
+         * is what this falls back to. Written on the tag it wins, which is what a
+         * screen switching language while it runs needs: an injected value is read
+         * once and never changes again.
+         */
+        this.messages = input(inject(TZSLOT_MESSAGES), ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
         this.iconSlot = viewChild.required('icon');
         this.settings = computed(() => ({
             value: this.value(),
@@ -598,6 +640,7 @@ class DateTimeField {
             timeLayout: this.timeLayout(),
             snapMinutes: this.snapMinutes(),
             shift: this.shift(),
+            showStep: this.showStep(),
             stepMinutes: this.stepMinutes(),
             minuteStep: this.minuteStep(),
             minTime: this.minTime(),
@@ -616,11 +659,11 @@ class DateTimeField {
             renderCell: this.renderCell(),
             buttons: this.buttons(),
             weekNumbers: this.weekNumbers(),
-            messages: this.messages,
+            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,
+            messages: this.messages(),
             onChange: (value) => {
                 this.value.set(value);
                 this.onChange(value);
@@ -686,7 +729,7 @@ class DateTimeField {
         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 }, 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: [
+    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 }, messages: { classPropertyName: "messages", publicName: "messages", 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 }); }
 }
@@ -701,7 +744,7 @@ 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"] }], 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 }] }], 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 }] }] } });
+        }], 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"] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], iconSlot: [{ type: i0.ViewChild, args: ['icon', { isSignal: true }] }] } });
 
 const EMPTY$3 = { start: null, end: null };
 /**
@@ -781,11 +824,20 @@ class RangeField {
         /** 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. `'auto'` moves by what is selected; a duration
-         * such as `{ months: 3 }` imposes the step.
+         * 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. */
@@ -830,7 +882,17 @@ class RangeField {
         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);
+        /**
+         * The words the widget says itself — not the month names, which come from
+         * `locale`.
+         *
+         * An application speaks one language, so the usual place to say it once is
+         * `provideTzslotMessages(FR)` or `provideTzslot({ messages: FR })`, and that
+         * is what this falls back to. Written on the tag it wins, which is what a
+         * screen switching language while it runs needs: an injected value is read
+         * once and never changes again.
+         */
+        this.messages = input(inject(TZSLOT_MESSAGES), ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
         this.settings = computed(() => ({
             value: this.value(),
             timeZone: this.timeZone(),
@@ -847,6 +909,9 @@ class RangeField {
             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(),
@@ -869,11 +934,11 @@ class RangeField {
             fieldIconSide: this.fieldIconSide(),
             mask: this.mask(),
             displayWith: this.displayWith(),
-            messages: this.messages,
+            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,
+            messages: this.messages(),
             onChange: (value) => {
                 this.value.set(value);
                 this.onChange(value);
@@ -940,7 +1005,7 @@ class RangeField {
         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 }, 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: [
+    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 }, messages: { classPropertyName: "messages", publicName: "messages", 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 }); }
 }
@@ -955,7 +1020,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"] }], 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 }] }], 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"] }] } });
+        }], 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"] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }] } });
 
 const EMPTY$2 = { start: null, end: null };
 /** `<tz-date-range>` — the range from @tzslot/dom, spoken in Angular. */
@@ -984,7 +1049,17 @@ class DateRange {
         this.rangeSpansBlockedMessage = input(undefined, ...(ngDevMode ? [{ debugName: "rangeSpansBlockedMessage" }] : /* istanbul ignore next */ []));
         this.formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
         this.host = inject(ElementRef).nativeElement;
-        this.messages = inject(TZSLOT_MESSAGES);
+        /**
+         * The words the widget says itself — not the month names, which come from
+         * `locale`.
+         *
+         * An application speaks one language, so the usual place to say it once is
+         * `provideTzslotMessages(FR)` or `provideTzslot({ messages: FR })`, and that
+         * is what this falls back to. Written on the tag it wins, which is what a
+         * screen switching language while it runs needs: an injected value is read
+         * once and never changes again.
+         */
+        this.messages = input(inject(TZSLOT_MESSAGES), ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
         this.prevSlot = viewChild.required('prev');
         this.nextSlot = viewChild.required('next');
         this.settings = computed(() => ({
@@ -1001,7 +1076,7 @@ class DateRange {
             renderCell: this.renderCell(),
             weekNumbers: this.weekNumbers(),
             months: this.months(),
-            messages: this.messages,
+            messages: this.messages(),
         }), ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
         this.range = createDateRange(this.host, {
             ...untracked(this.settings),
@@ -1047,7 +1122,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 }, 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: [
+    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 }, messages: { classPropertyName: "messages", publicName: "messages", 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>
@@ -1068,7 +1143,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 }] }], 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 }] }] } });
+        }], 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 }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", 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);
@@ -1146,7 +1221,17 @@ class DateTimeRange {
         this.endLabel = input(undefined, ...(ngDevMode ? [{ debugName: "endLabel" }] : /* istanbul ignore next */ []));
         this.endBeforeStartMessage = input(undefined, ...(ngDevMode ? [{ debugName: "endBeforeStartMessage" }] : /* istanbul ignore next */ []));
         this.formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
-        this.messages = inject(TZSLOT_MESSAGES);
+        /**
+         * The words the widget says itself — not the month names, which come from
+         * `locale`.
+         *
+         * An application speaks one language, so the usual place to say it once is
+         * `provideTzslotMessages(FR)` or `provideTzslot({ messages: FR })`, and that
+         * is what this falls back to. Written on the tag it wins, which is what a
+         * screen switching language while it runs needs: an injected value is read
+         * once and never changes again.
+         */
+        this.messages = input(inject(TZSLOT_MESSAGES), ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
         this.settings = computed(() => ({
             value: this.value(),
             timeZone: this.timeZone(),
@@ -1175,11 +1260,11 @@ class DateTimeRange {
             startLabel: this.startLabel(),
             endLabel: this.endLabel(),
             endBeforeStartMessage: this.endBeforeStartMessage(),
-            messages: this.messages,
+            messages: this.messages(),
         }), ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
         /** Created before the required timeZone is bound; the first change detection fills it in. */
         this.range = createDateTimeRange(inject(ElementRef).nativeElement, {
-            messages: this.messages,
+            messages: this.messages(),
             onChange: (next) => {
                 this.allDay.set(next.allDay === true);
                 this.value.set(next);
@@ -1227,7 +1312,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: 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: [
+    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 }, messages: { classPropertyName: "messages", publicName: "messages", 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 }); }
 }
@@ -1242,7 +1327,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: 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 }] }] } });
+        }], 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 }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }] } });
 
 const EMPTY = { start: null, end: null, from: null, to: null };
 /**
@@ -1283,7 +1368,17 @@ class DailyRange {
         /** Every day's window and the real total, once all four parts are chosen. */
         this.summary = signal(null, ...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
         this.formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
-        this.messages = inject(TZSLOT_MESSAGES);
+        /**
+         * The words the widget says itself — not the month names, which come from
+         * `locale`.
+         *
+         * An application speaks one language, so the usual place to say it once is
+         * `provideTzslotMessages(FR)` or `provideTzslot({ messages: FR })`, and that
+         * is what this falls back to. Written on the tag it wins, which is what a
+         * screen switching language while it runs needs: an injected value is read
+         * once and never changes again.
+         */
+        this.messages = input(inject(TZSLOT_MESSAGES), ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
         this.settings = computed(() => ({
             value: this.value(),
             timeZone: this.timeZone(),
@@ -1301,11 +1396,11 @@ class DailyRange {
             renderCell: this.renderCell(),
             today: this.today(),
             disabled: this.disabled() || this.formDisabled(),
-            messages: this.messages,
+            messages: this.messages(),
         }), ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
         /** Created before the required timeZone is bound; the first change detection fills it in. */
         this.range = createDailyRange(inject(ElementRef).nativeElement, {
-            messages: this.messages,
+            messages: this.messages(),
             onChange: (next) => {
                 this.value.set(next);
                 this.onChange(next);
@@ -1350,7 +1445,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: 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: [
+    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 }, messages: { classPropertyName: "messages", publicName: "messages", 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 }); }
 }
@@ -1365,7 +1460,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: 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 }] }] } });
+        }], 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 }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }] } });
 
 /**
  * `<tz-multi-date>` — several days, not necessarily next to each other, from
@@ -1398,7 +1493,17 @@ class MultiDate {
         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);
+        /**
+         * The words the widget says itself — not the month names, which come from
+         * `locale`.
+         *
+         * An application speaks one language, so the usual place to say it once is
+         * `provideTzslotMessages(FR)` or `provideTzslot({ messages: FR })`, and that
+         * is what this falls back to. Written on the tag it wins, which is what a
+         * screen switching language while it runs needs: an injected value is read
+         * once and never changes again.
+         */
+        this.messages = input(inject(TZSLOT_MESSAGES), ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
         this.prevSlot = viewChild.required('prev');
         this.nextSlot = viewChild.required('next');
         this.settings = computed(() => ({
@@ -1415,7 +1520,7 @@ class MultiDate {
             renderCell: this.renderCell(),
             buttons: this.buttons(),
             weekNumbers: this.weekNumbers(),
-            messages: this.messages,
+            messages: this.messages(),
         }), ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
         this.calendar = createMultiDate(this.host, {
             ...untracked(this.settings),
@@ -1472,7 +1577,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 }, 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: [
+    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 }, messages: { classPropertyName: "messages", publicName: "messages", 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>
@@ -1493,7 +1598,263 @@ 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 }] }], 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 }] }] } });
+        }], 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 }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], prevSlot: [{ type: i0.ViewChild, args: ['prev', { isSignal: true }] }], nextSlot: [{ type: i0.ViewChild, args: ['next', { isSignal: true }] }] } });
+
+/**
+ * `<tz-time-select>` — an hour menu and a minute menu, spoken in Angular.
+ *
+ * What it holds is a `PlainTime`: a clock face, with no day and no zone. Give
+ * it `date` and `timeZone` and the menus show that day as the zone really has
+ * it — the hour that is skipped is absent, the hour that happens twice is
+ * offered twice — and `offsetChange` says which of the two was taken.
+ *
+ * A screen that fills two of these from a list built by hand is the screen
+ * this replaces: walking a day hour by hand and guessing the transitions is
+ * where the two mornings a year go wrong.
+ */
+class TimeSelect {
+    constructor() {
+        /** Set once for the application with provideTzslot(); a binding still wins. */
+        this.defaults = inject(TZSLOT_DEFAULTS);
+        /** The clock face chosen. */
+        this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /**
+         * Which reading of an ambiguous time is held, as `+02:00` or `+01:00`.
+         *
+         * It means nothing on an ordinary hour and is ignored there. On the morning
+         * an hour happens twice it is the difference between two moments an hour
+         * apart, so a screen that stores instants has to carry it.
+         */
+        this.offset = model(null, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+        /**
+         * The day the menus stand on. Without it they are a plain clock face; with
+         * it they are that day as the zone has it.
+         */
+        this.date = input(null, ...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
+        /** An IANA identifier. Left out, `provideTzslot` answers. */
+        this.timeZone = input(this.defaults.timeZone, ...(ngDevMode ? [{ debugName: "timeZone" }] : /* istanbul ignore next */ []));
+        /** Minutes between the options of the minute menu. */
+        this.minuteStep = input(1, ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
+        /** Hours between the options of the hour menu. */
+        this.hourStep = input(1, ...(ngDevMode ? [{ debugName: "hourStep" }] : /* istanbul ignore next */ []));
+        /** Twelve-hour menus with an AM/PM one beside them; the locale decides when unset. */
+        this.hour12 = input(undefined, ...(ngDevMode ? [{ debugName: "hour12" }] : /* 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 */ []));
+        /**
+         * How the repeated hour is shown: `'named'` writes it once and names the
+         * reading in force underneath, `'marked'` puts both in the menu as `02` and
+         * `02*`.
+         */
+        this.readingStyle = input('named', ...(ngDevMode ? [{ debugName: "readingStyle" }] : /* istanbul ignore next */ []));
+        /** A BCP-47 tag. Decides twelve or twenty-four hours, and nothing else here. */
+        this.locale = input(this.defaults.locale, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * The words the widget says itself — not the figures, which are the locale's.
+         *
+         * An application speaks one language, so the usual place to say it once is
+         * `provideTzslotMessages(FR)` or `provideTzslot({ messages: FR })`, and that
+         * is what this falls back to. Written on the tag it wins, which is what a
+         * screen switching language while it runs needs.
+         */
+        this.messages = input(inject(TZSLOT_MESSAGES), ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+        this.formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+        this.settings = computed(() => ({
+            value: this.value(),
+            offset: this.offset(),
+            date: this.date(),
+            timeZone: this.timeZone(),
+            minuteStep: this.minuteStep(),
+            hourStep: this.hourStep(),
+            hour12: this.hour12(),
+            minTime: this.minTime(),
+            maxTime: this.maxTime(),
+            readingStyle: this.readingStyle(),
+            locale: this.locale(),
+            disabled: this.disabled() || this.formDisabled(),
+            messages: this.messages(),
+        }), ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+        this.menus = createTimeSelect(inject(ElementRef).nativeElement, {
+            messages: this.messages(),
+            onChange: (time, offset) => {
+                this.value.set(time);
+                // `offset` is a model, so writing it *is* `(offsetChange)`. An output of
+                // the same name declared beside it won the binding and left the model's
+                // own emitter dead, so any other write to `offset` went unannounced.
+                this.offset.set(offset);
+                this.onChange(time);
+                this.onTouched();
+            },
+        });
+        // ── ControlValueAccessor ────────────────────────────────────
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        // The settings are read here so the effect follows them; the call into the
+        // widget runs untracked, because a widget may answer by calling back and a
+        // callback that writes a signal inside an effect is an error on Angular 18.
+        effect(() => {
+            const settings = this.settings();
+            untracked(() => this.menus.update(settings));
+        });
+        inject(DestroyRef).onDestroy(() => this.menus.destroy());
+    }
+    /** Typed `unknown`: a form holds what the application put there. */
+    writeValue(value) {
+        // Whatever reading was held belonged to the value being replaced.
+        this.offset.set(null);
+        this.value.set(value === null || value === undefined
+            ? null
+            : typeof value === 'string'
+                ? Temporal.PlainTime.from(value)
+                : value);
+    }
+    registerOnChange(fn) {
+        this.onChange = (next) => fn(next);
+    }
+    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: TimeSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: TimeSelect, isStandalone: true, selector: "tz-time-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, hourStep: { classPropertyName: "hourStep", publicName: "hourStep", isSignal: true, isRequired: false, transformFunction: null }, hour12: { classPropertyName: "hour12", publicName: "hour12", 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 }, readingStyle: { classPropertyName: "readingStyle", publicName: "readingStyle", 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 }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", offset: "offsetChange" }, host: { listeners: { "focusout": "onTouched()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimeSelect), multi: true },
+        ], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TimeSelect, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tz-time-select',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    // Leaving the menus counts as having answered them, even with nothing
+                    // chosen: without it a `touched && invalid` message never appears for the
+                    // reader who looked at a required field and walked away.
+                    host: { '(focusout)': 'onTouched()' },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimeSelect), multi: true },
+                    ],
+                    template: '',
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }, { type: i0.Output, args: ["offsetChange"] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], hourStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourStep", required: false }] }], hour12: [{ type: i0.Input, args: [{ isSignal: true, alias: "hour12", required: false }] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTime", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTime", required: false }] }], readingStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "readingStyle", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }] } });
+
+/**
+ * `<tz-time-input>` — the compact time field, spoken in Angular.
+ *
+ * Arrows, the wheel, the up and down keys, and typing. It holds a `PlainTime`:
+ * a clock face, with no day and no zone. Given `date` and `timeZone` it knows
+ * which day it stands on, so the arrows step over an hour that does not happen
+ * and a time typed into the gap settles on the first moment that does.
+ */
+class TimeInput {
+    constructor() {
+        /** Set once for the application with provideTzslot(); a binding still wins. */
+        this.defaults = inject(TZSLOT_DEFAULTS);
+        /** The clock face chosen. */
+        this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** What one press of an arrow, or the wheel, moves the minutes by. */
+        this.stepMinutes = input(5, ...(ngDevMode ? [{ debugName: "stepMinutes" }] : /* istanbul ignore next */ []));
+        /** A twelve-hour field with AM/PM beside it; the locale decides when unset. */
+        this.hour12 = input(undefined, ...(ngDevMode ? [{ debugName: "hour12" }] : /* istanbul ignore next */ []));
+        /** The window the arrows and the typing stay inside. */
+        this.minTime = input(undefined, ...(ngDevMode ? [{ debugName: "minTime" }] : /* istanbul ignore next */ []));
+        this.maxTime = input(undefined, ...(ngDevMode ? [{ debugName: "maxTime" }] : /* istanbul ignore next */ []));
+        /** A BCP-47 tag. Decides twelve or twenty-four hours, and nothing else here. */
+        this.locale = input(this.defaults.locale, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+        /**
+         * The day the field stands on. Without it it is a clock face and nothing
+         * more; with it the two mornings a year stop being ordinary.
+         */
+        this.date = input(null, ...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
+        /** An IANA identifier. Left out, `provideTzslot` answers. */
+        this.timeZone = input(this.defaults.timeZone, ...(ngDevMode ? [{ debugName: "timeZone" }] : /* istanbul ignore next */ []));
+        /**
+         * `'boxed'` is a bordered field. `'bare'` drops the box and stacks the
+         * arrows above and below the figures, which is how a panel draws it.
+         */
+        this.variant = input('boxed', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * The words the widget says itself — not the figures, which are the locale's.
+         *
+         * An application speaks one language, so the usual place to say it once is
+         * `provideTzslotMessages(FR)` or `provideTzslot({ messages: FR })`, and that
+         * is what this falls back to. Written on the tag it wins, which is what a
+         * screen switching language while it runs needs.
+         */
+        this.messages = input(inject(TZSLOT_MESSAGES), ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+        this.formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+        this.settings = computed(() => ({
+            value: this.value(),
+            stepMinutes: this.stepMinutes(),
+            hour12: this.hour12(),
+            minTime: this.minTime(),
+            maxTime: this.maxTime(),
+            locale: this.locale(),
+            date: this.date(),
+            timeZone: this.timeZone(),
+            variant: this.variant(),
+            disabled: this.disabled() || this.formDisabled(),
+            messages: this.messages(),
+        }), ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+        this.field = createTimeInput(inject(ElementRef).nativeElement, {
+            messages: this.messages(),
+            onChange: (time) => {
+                this.value.set(time);
+                this.onChange(time);
+                this.onTouched();
+            },
+        });
+        // ── ControlValueAccessor ────────────────────────────────────
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        effect(() => {
+            const settings = this.settings();
+            untracked(() => this.field.update(settings));
+        });
+        inject(DestroyRef).onDestroy(() => this.field.destroy());
+    }
+    /** Typed `unknown`: a form holds what the application put there. */
+    writeValue(value) {
+        this.value.set(value === null || value === undefined
+            ? null
+            : typeof value === 'string'
+                ? Temporal.PlainTime.from(value)
+                : value);
+    }
+    registerOnChange(fn) {
+        this.onChange = (next) => fn(next);
+    }
+    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: TimeInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: TimeInput, isStandalone: true, selector: "tz-time-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, stepMinutes: { classPropertyName: "stepMinutes", publicName: "stepMinutes", isSignal: true, isRequired: false, transformFunction: null }, hour12: { classPropertyName: "hour12", publicName: "hour12", 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 }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focusout": "onTouched()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimeInput), multi: true },
+        ], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TimeInput, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tz-time-input',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    // Leaving the field counts as having answered it, even with nothing typed:
+                    // without it a `touched && invalid` message never appears for the reader who
+                    // looked at a required field and walked away.
+                    host: { '(focusout)': 'onTouched()' },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimeInput), multi: true },
+                    ],
+                    template: '',
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], stepMinutes: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepMinutes", required: false }] }], hour12: [{ type: i0.Input, args: [{ isSignal: true, alias: "hour12", required: false }] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTime", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTime", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }] } });
 
 /**
  * @tzslot/ui — Angular components over the core.
@@ -1507,5 +1868,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Calendar, DailyRange, DateField, DateRange, DateTimeField, DateTimeRange, MultiDate, RangeField, TZSLOT_DEFAULTS, TZSLOT_MESSAGES, TimeSlotPicker, pairIn, pairOut, provideTzslot, provideTzslotMessages };
+export { Calendar, DailyRange, DateField, DateRange, DateTimeField, DateTimeRange, MultiDate, RangeField, TZSLOT_DEFAULTS, TZSLOT_MESSAGES, TimeInput, TimeSelect, TimeSlotPicker, pairIn, pairOut, provideTzslot, provideTzslotMessages };
 //# sourceMappingURL=tzslot-angular.mjs.map