@tzslot/angular 1.4.1 → 1.6.0

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@tzslot/angular",
-  "version": "1.4.1",
+  "version": "1.6.0",
   "description": "Angular components for DST-safe date and time selection: signals, forms, no design system.",
   "type": "module",
   "license": "MIT",
   "dependencies": {
-    "@tzslot/core": "^1.4.1",
-    "@tzslot/dom": "^1.4.1",
+    "@tzslot/core": "^1.6.0",
+    "@tzslot/dom": "^1.6.0",
     "tslib": "^2.3.0"
   },
   "peerDependencies": {

package/types/tzslot-angular.d.ts

@@ -390,6 +390,26 @@ declare class DateTimeField implements ControlValueAccessor, AfterViewInit {
     readonly disabled: _angular_core.InputSignal<boolean>;
     /** The text can be typed as well as chosen. On by default. */
     readonly editable: _angular_core.InputSignal<boolean>;
+    /**
+     * When the change reaches your screen: at every gesture, or once on the way out.
+     *
+     * A session here is a day, then an hour, then a minute — three
+     * `(valueChange)` events for one decision, and three queries on a screen that
+     * pays for them. `'close'` holds the report, not the value: the reader sees
+     * every change as it happens and your screen hears once, when the panel
+     * closes, only if the moment really moved.
+     *
+     * Escape hands the moment back as your screen last saw it and says nothing,
+     * and a field destroyed with a change in hand hands it back too rather than
+     * reporting into a component that is going away.
+     *
+     * One thing to know: `value` — and the form control — stay at the last
+     * *reported* moment for the whole session, which is what "held" means. The
+     * field ignores that value being handed back to it while it holds, so an
+     * unrelated input changing mid-session cannot wipe the reader's work; a value
+     * that genuinely differs is still taken as an instruction.
+     */
+    readonly reportOn: _angular_core.InputSignal<"change" | "close">;
     /** Separators appear as the figures are typed, like a card number. On by default. */
     readonly mask: _angular_core.InputSignal<boolean>;
     /** A pattern — `yyyy-MM-dd HH:mm` — when the shape matters more than the reader. */
@@ -444,7 +464,7 @@ declare class DateTimeField implements ControlValueAccessor, AfterViewInit {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DateTimeField, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DateTimeField, "tz-datetime-field", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "timeZone": { "alias": "timeZone"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "isDateDisabled": { "alias": "isDateDisabled"; "required": false; "isSignal": true; }; "showTime": { "alias": "showTime"; "required": false; "isSignal": true; }; "timeLayout": { "alias": "timeLayout"; "required": false; "isSignal": true; }; "snapMinutes": { "alias": "snapMinutes"; "required": false; "isSignal": true; }; "shift": { "alias": "shift"; "required": false; "isSignal": true; }; "showStep": { "alias": "showStep"; "required": false; "isSignal": true; }; "stepMinutes": { "alias": "stepMinutes"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "minTime": { "alias": "minTime"; "required": false; "isSignal": true; }; "maxTime": { "alias": "maxTime"; "required": false; "isSignal": true; }; "isSlotDisabled": { "alias": "isSlotDisabled"; "required": false; "isSignal": true; }; "hour12": { "alias": "hour12"; "required": false; "isSignal": true; }; "defaultTime": { "alias": "defaultTime"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "mask": { "alias": "mask"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "dateStyle": { "alias": "dateStyle"; "required": false; "isSignal": true; }; "timeStyle": { "alias": "timeStyle"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "today": { "alias": "today"; "required": false; "isSignal": true; }; "renderCell": { "alias": "renderCell"; "required": false; "isSignal": true; }; "weekNumbers": { "alias": "weekNumbers"; "required": false; "isSignal": true; }; "buttons": { "alias": "buttons"; "required": false; "isSignal": true; }; "valueAs": { "alias": "valueAs"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "opened": "opened"; "closed": "closed"; }, never, ["[tzIcon]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DateTimeField, "tz-datetime-field", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "timeZone": { "alias": "timeZone"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "isDateDisabled": { "alias": "isDateDisabled"; "required": false; "isSignal": true; }; "showTime": { "alias": "showTime"; "required": false; "isSignal": true; }; "timeLayout": { "alias": "timeLayout"; "required": false; "isSignal": true; }; "snapMinutes": { "alias": "snapMinutes"; "required": false; "isSignal": true; }; "shift": { "alias": "shift"; "required": false; "isSignal": true; }; "showStep": { "alias": "showStep"; "required": false; "isSignal": true; }; "stepMinutes": { "alias": "stepMinutes"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "minTime": { "alias": "minTime"; "required": false; "isSignal": true; }; "maxTime": { "alias": "maxTime"; "required": false; "isSignal": true; }; "isSlotDisabled": { "alias": "isSlotDisabled"; "required": false; "isSignal": true; }; "hour12": { "alias": "hour12"; "required": false; "isSignal": true; }; "defaultTime": { "alias": "defaultTime"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "reportOn": { "alias": "reportOn"; "required": false; "isSignal": true; }; "mask": { "alias": "mask"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "dateStyle": { "alias": "dateStyle"; "required": false; "isSignal": true; }; "timeStyle": { "alias": "timeStyle"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "today": { "alias": "today"; "required": false; "isSignal": true; }; "renderCell": { "alias": "renderCell"; "required": false; "isSignal": true; }; "weekNumbers": { "alias": "weekNumbers"; "required": false; "isSignal": true; }; "buttons": { "alias": "buttons"; "required": false; "isSignal": true; }; "valueAs": { "alias": "valueAs"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "opened": "opened"; "closed": "closed"; }, never, ["[tzIcon]"], true, never>;
 }
 
 /**
@@ -510,10 +530,43 @@ declare class RangeField implements ControlValueAccessor {
      */
     readonly maxSpan: _angular_core.InputSignal<DurationLike | null>;
     readonly minSpan: _angular_core.InputSignal<DurationLike | null>;
+    /**
+     * A window of one length: the reader says where it starts, the end follows.
+     *
+     * For a screen whose rows cover a fixed three quarters of an hour. The end
+     * cannot be typed into and no click arms it, and every gesture that moves the
+     * start — a day, a typed date, an hour, a shortcut, an arrow — carries the end
+     * with it, so the screen has no rule of its own to run after each change.
+     *
+     * Bind a field, not a literal: `{ minutes: 45 }` written in the template is
+     * a new object on every pass, and the widget is told its settings changed
+     * each time.
+     *
+     *     readonly window = { minutes: 45 };
+     *     <tz-range-field [fixedSpan]="window" ... />
+     *
+     * See the dom setting for what it deliberately leaves alone — `singleDay`,
+     * the span limits, and a value pushed in from outside.
+     */
+    readonly fixedSpan: _angular_core.InputSignal<DurationLike | null>;
     /** Minutes between the options of the hour menu. Five by default. */
     readonly minuteStep: _angular_core.InputSignal<number>;
     /** Nothing is reported until Apply is pressed. */
     readonly confirm: _angular_core.InputSignal<boolean>;
+    /**
+     * When the change reaches your screen: at every touch, or once on the way out.
+     *
+     * `'close'` for a screen that pays for every query. The field and the panel
+     * show each change as it happens — nothing is held back from the reader — and
+     * `(valueChange)` fires once when the panel closes, only if something moved:
+     * the period, or the name of the shortcut it came from. An Apply button is
+     * offered as well.
+     *
+     * Escape and Cancel hand the value back as your screen last saw it, and say
+     * nothing: a field showing one period while the screen queries another is
+     * worse than either.
+     */
+    readonly reportOn: _angular_core.InputSignal<"change" | "close">;
     /**
      * Arrows that step the whole period without opening the panel.
      *
@@ -639,7 +692,7 @@ declare class RangeField implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RangeField, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RangeField, "tz-range-field", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "valueAs": { "alias": "valueAs"; "required": false; "isSignal": true; }; "timeZone": { "alias": "timeZone"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; "openEnded": { "alias": "openEnded"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "timeLayout": { "alias": "timeLayout"; "required": false; "isSignal": true; }; "showTime": { "alias": "showTime"; "required": false; "isSignal": true; }; "defaultTimes": { "alias": "defaultTimes"; "required": false; "isSignal": true; }; "stepMinutes": { "alias": "stepMinutes"; "required": false; "isSignal": true; }; "snapMinutes": { "alias": "snapMinutes"; "required": false; "isSignal": true; }; "maxSpan": { "alias": "maxSpan"; "required": false; "isSignal": true; }; "minSpan": { "alias": "minSpan"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "confirm": { "alias": "confirm"; "required": false; "isSignal": true; }; "shift": { "alias": "shift"; "required": false; "isSignal": true; }; "showPresets": { "alias": "showPresets"; "required": false; "isSignal": true; }; "showStep": { "alias": "showStep"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "preset": { "alias": "preset"; "required": false; "isSignal": true; }; "singleDay": { "alias": "singleDay"; "required": false; "isSignal": true; }; "months": { "alias": "months"; "required": false; "isSignal": true; }; "weekNumbers": { "alias": "weekNumbers"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "isDateDisabled": { "alias": "isDateDisabled"; "required": false; "isSignal": true; }; "blockAcrossDisabled": { "alias": "blockAcrossDisabled"; "required": false; "isSignal": true; }; "rangeSpansBlockedMessage": { "alias": "rangeSpansBlockedMessage"; "required": false; "isSignal": true; }; "renderCell": { "alias": "renderCell"; "required": false; "isSignal": true; }; "today": { "alias": "today"; "required": false; "isSignal": true; }; "now": { "alias": "now"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "fieldIcon": { "alias": "fieldIcon"; "required": false; "isSignal": true; }; "fieldIconSide": { "alias": "fieldIconSide"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "mask": { "alias": "mask"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "preset": "presetChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RangeField, "tz-range-field", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "valueAs": { "alias": "valueAs"; "required": false; "isSignal": true; }; "timeZone": { "alias": "timeZone"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; "openEnded": { "alias": "openEnded"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "timeLayout": { "alias": "timeLayout"; "required": false; "isSignal": true; }; "showTime": { "alias": "showTime"; "required": false; "isSignal": true; }; "defaultTimes": { "alias": "defaultTimes"; "required": false; "isSignal": true; }; "stepMinutes": { "alias": "stepMinutes"; "required": false; "isSignal": true; }; "snapMinutes": { "alias": "snapMinutes"; "required": false; "isSignal": true; }; "maxSpan": { "alias": "maxSpan"; "required": false; "isSignal": true; }; "minSpan": { "alias": "minSpan"; "required": false; "isSignal": true; }; "fixedSpan": { "alias": "fixedSpan"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "confirm": { "alias": "confirm"; "required": false; "isSignal": true; }; "reportOn": { "alias": "reportOn"; "required": false; "isSignal": true; }; "shift": { "alias": "shift"; "required": false; "isSignal": true; }; "showPresets": { "alias": "showPresets"; "required": false; "isSignal": true; }; "showStep": { "alias": "showStep"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "preset": { "alias": "preset"; "required": false; "isSignal": true; }; "singleDay": { "alias": "singleDay"; "required": false; "isSignal": true; }; "months": { "alias": "months"; "required": false; "isSignal": true; }; "weekNumbers": { "alias": "weekNumbers"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "isDateDisabled": { "alias": "isDateDisabled"; "required": false; "isSignal": true; }; "blockAcrossDisabled": { "alias": "blockAcrossDisabled"; "required": false; "isSignal": true; }; "rangeSpansBlockedMessage": { "alias": "rangeSpansBlockedMessage"; "required": false; "isSignal": true; }; "renderCell": { "alias": "renderCell"; "required": false; "isSignal": true; }; "today": { "alias": "today"; "required": false; "isSignal": true; }; "now": { "alias": "now"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "fieldIcon": { "alias": "fieldIcon"; "required": false; "isSignal": true; }; "fieldIconSide": { "alias": "fieldIconSide"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "mask": { "alias": "mask"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "preset": "presetChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
 }
 
 /** `<tz-date-range>` — the range from @tzslot/dom, spoken in Angular. */