@cdevhub/ngx-tw 0.2.0

package/fesm2022/cdevhub-ngx-tw-time-picker.mjs

@@ -0,0 +1,1344 @@
+import * as i0 from '@angular/core';
+import { Injectable, input, booleanAttribute, model, output, inject, ElementRef, DestroyRef, viewChild, signal, linkedSignal, computed, effect, untracked, afterNextRender, isDevMode, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgControl, NgForm, FormGroupDirective, Validators } from '@angular/forms';
+import { FocusMonitor, LiveAnnouncer } from '@angular/cdk/a11y';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { merge } from 'rxjs';
+import { tv } from 'tailwind-variants';
+import { TW_ERROR_STATE_MATCHER, fieldMin, fieldMax, parseField, padTwo, to12h, appendDigit, isTerminalDigit, stepWithWrap, from12h, timeOfDaySeconds, clamp } from '@cdevhub/ngx-tw/core';
+import { FormFieldControl, FormFieldComponent, TW_FORM_FIELD_CONTROL } from '@cdevhub/ngx-tw/form-field';
+import { DATE_ADAPTER } from '@cdevhub/ngx-tw/calendar';
+
+/**
+ * Localized strings + ARIA announcements consumed by the time-picker.
+ *
+ * Override per-field via Angular DI — provide a custom instance, or supply a
+ * `Partial<TimePickerIntl>` through `provideTimePickerIntl`. Unset fields
+ * fall through to the English defaults shipped here.
+ *
+ * All members take primitives so consumers can write straight string
+ * literals or template helpers without depending on internal types.
+ */
+class TimePickerIntl {
+    // ---------------------------------------------------------------------------
+    // Group + field labels
+    // ---------------------------------------------------------------------------
+    /** Accessible name for the fields group (the wrapper around hours/minutes/seconds). */
+    groupLabel = 'Time';
+    /** Accessible name for the hours field. */
+    hoursLabel = 'Hours';
+    /** Accessible name for the minutes field. */
+    minutesLabel = 'Minutes';
+    /** Accessible name for the seconds field. */
+    secondsLabel = 'Seconds';
+    /** Accessible name for the meridiem (AM/PM) radio group. */
+    meridiemGroupLabel = 'AM or PM';
+    /** Display + accessible name for the AM option. */
+    amLabel = 'AM';
+    /** Display + accessible name for the PM option. */
+    pmLabel = 'PM';
+    // ---------------------------------------------------------------------------
+    // Stepper + clear button labels
+    // ---------------------------------------------------------------------------
+    /** Aria label template for the up stepper. Receives the active field name (`'hours'`, `'minutes'`, `'seconds'`). */
+    increaseLabel(field) {
+        return `Increase ${field}`;
+    }
+    /** Aria label template for the down stepper. Receives the active field name (`'hours'`, `'minutes'`, `'seconds'`). */
+    decreaseLabel(field) {
+        return `Decrease ${field}`;
+    }
+    /** Aria label for the clear button. */
+    clearLabel = 'Clear time';
+    // ---------------------------------------------------------------------------
+    // Live announcements
+    // ---------------------------------------------------------------------------
+    /** Live-region message announced after the value is cleared. */
+    clearedAnnouncement = 'Time cleared';
+    /** Live-region message after a commit. Receives the pre-formatted time string (e.g. `'02:30 PM'`). */
+    selectedAnnouncement(formattedTime) {
+        return `${formattedTime} selected`;
+    }
+    /** Spoken text for an empty hour/minute/second field — used as `aria-valuetext` when the field is blank. */
+    emptyValueText = 'Empty';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TimePickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TimePickerIntl });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TimePickerIntl, decorators: [{
+            type: Injectable
+        }] });
+/**
+ * Provides a custom `TimePickerIntl` instance. Place at any injector level —
+ * the time-picker resolves the closest one.
+ *
+ * @example
+ * ```ts
+ * providers: [
+ *   provideTimePickerIntl({
+ *     hoursLabel: 'Heures',
+ *     minutesLabel: 'Minutes',
+ *     meridiemGroupLabel: 'AM ou PM',
+ *   }),
+ * ]
+ * ```
+ */
+function provideTimePickerIntl(custom) {
+    return {
+        provide: TimePickerIntl,
+        useFactory: () => Object.assign(new TimePickerIntl(), custom),
+    };
+}
+
+// ── tv() config ───────────────────────────────────────────────────
+const timePickerVariants = tv({
+    slots: {
+        root: 'inline-flex items-center text-fg transition-[color,border-color,box-shadow] duration-normal motion-reduce:transition-none',
+        fieldGroup: 'inline-flex items-center tabular-nums font-medium',
+        field: 'bg-transparent text-center outline-none border-0 p-0 m-0 text-fg placeholder:text-fg-subtle rounded-md caret-transparent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
+        separator: 'text-fg-subtle select-none px-0.5',
+        stepperGroup: 'flex flex-col ml-0.5',
+        stepper: 'inline-flex items-center justify-center text-fg-muted hover:text-fg hover:bg-surface-muted rounded-md transition-colors duration-normal motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 disabled:opacity-40 disabled:pointer-events-none',
+        stepperIcon: '',
+        meridiem: 'inline-flex items-center rounded-md border border-border overflow-hidden ml-2 shrink-0',
+        meridiemButton: 'font-medium text-fg-muted hover:bg-surface-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 transition-colors duration-normal motion-reduce:transition-none disabled:opacity-40 disabled:pointer-events-none',
+        clearButton: 'inline-flex items-center justify-center shrink-0 rounded-md text-fg-muted hover:text-fg hover:bg-surface-muted transition-colors duration-normal motion-reduce:transition-none size-6 ml-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
+    },
+    variants: {
+        size: {
+            xs: {
+                root: 'gap-1 text-xs',
+                // Numeric field width is sized to fit a 2-digit value at the current font scale. Off
+                // the standard width scale because the field is content-driven, not a layout primitive
+                // — see CLAUDE.md spacing scale rationale.
+                field: 'w-5 text-xs',
+                stepper: 'size-6',
+                stepperIcon: 'size-3',
+                meridiemButton: 'px-1.5 py-1 text-2xs',
+            },
+            sm: {
+                root: 'gap-1 text-sm',
+                // sm-density numeric field — sized to fit a 2-digit value at text-sm; see CLAUDE.md spacing scale rationale.
+                field: 'w-6 text-sm',
+                stepper: 'size-7',
+                stepperIcon: 'size-3',
+                meridiemButton: 'px-2 py-1 text-xs',
+            },
+            md: {
+                root: 'gap-1.5 text-sm',
+                // md-density numeric field — sized to fit a 2-digit value at text-sm; see CLAUDE.md spacing scale rationale.
+                field: 'w-7 text-sm',
+                stepper: 'size-7',
+                stepperIcon: 'size-3',
+                meridiemButton: 'px-2 py-1 text-xs',
+            },
+            lg: {
+                root: 'gap-1.5 text-base',
+                // lg-density numeric field — sized to fit a 2-digit value at text-base; see CLAUDE.md spacing scale rationale.
+                field: 'w-8 text-base',
+                stepper: 'size-8',
+                stepperIcon: 'size-4',
+                meridiemButton: 'px-2.5 py-1.5 text-sm',
+            },
+            xl: {
+                root: 'gap-2 text-base',
+                // xl-density numeric field — sized to fit a 2-digit value at text-base; see CLAUDE.md spacing scale rationale.
+                field: 'w-9 text-base',
+                stepper: 'size-8',
+                stepperIcon: 'size-4',
+                meridiemButton: 'px-3 py-1.5 text-sm',
+            },
+        },
+        variant: {
+            default: {
+                root: 'rounded-md border border-border bg-surface px-3 py-2 hover:border-border-strong',
+            },
+            naked: {
+                root: 'bg-transparent border-0 rounded-none p-0 focus-within:outline-none',
+            },
+        },
+        disabled: {
+            true: { root: 'opacity-50 pointer-events-none cursor-not-allowed' },
+            false: {},
+        },
+        focused: { true: {}, false: {} },
+        errorState: { true: {}, false: {} },
+        color: {
+            primary: {},
+            secondary: {},
+            accent: {},
+            neutral: {},
+            info: {},
+            success: {},
+            warning: {},
+            error: {},
+        },
+    },
+    compoundVariants: [
+        { variant: 'default', focused: true, color: 'primary', class: { root: 'border-primary-500' } },
+        { variant: 'default', focused: true, color: 'secondary', class: { root: 'border-secondary-500' } },
+        { variant: 'default', focused: true, color: 'accent', class: { root: 'border-accent-500' } },
+        { variant: 'default', focused: true, color: 'neutral', class: { root: 'border-border-strong' } },
+        { variant: 'default', focused: true, color: 'info', class: { root: 'border-info-500' } },
+        { variant: 'default', focused: true, color: 'success', class: { root: 'border-success-500' } },
+        { variant: 'default', focused: true, color: 'warning', class: { root: 'border-warning-500' } },
+        { variant: 'default', focused: true, color: 'error', class: { root: 'border-error-500' } },
+        { variant: 'default', errorState: true, class: { root: 'border-error-500' } },
+    ],
+    defaultVariants: {
+        size: 'md',
+        variant: 'default',
+        disabled: false,
+        errorState: false,
+        focused: false,
+        color: 'primary',
+    },
+}, { twMerge: true });
+// ── Static active-state color lookup for the AM/PM meridiem button ─────────────
+// Each entry is written out so Tailwind v4's static scanner picks the classes up.
+// Mirrors the lookup-table pattern used by `checkbox.ts` and `radio.ts`.
+const MERIDIEM_ACTIVE_COLOR = {
+    primary: 'bg-primary-500 text-on-primary hover:bg-primary-600',
+    secondary: 'bg-secondary-500 text-on-secondary hover:bg-secondary-600',
+    accent: 'bg-accent-500 text-on-accent hover:bg-accent-600',
+    neutral: 'bg-fg text-on-neutral hover:bg-fg/90',
+    info: 'bg-info-500 text-on-info hover:bg-info-600',
+    success: 'bg-success-500 text-on-success hover:bg-success-600',
+    warning: 'bg-warning-500 text-on-warning hover:bg-warning-600',
+    error: 'bg-error-500 text-on-error hover:bg-error-600',
+};
+let nextTimePickerId = 0;
+/**
+ * Segmented time editor. Renders `HH : MM` (with an optional `: SS` and/or
+ * `AM/PM` toggle) and integrates with all three Angular form strategies via
+ * `ControlValueAccessor`. Also participates in `<tw-form-field>` through
+ * `FormFieldControl` — wrapping is optional.
+ *
+ * Value type is `D | null`. Every time operation flows through the injected
+ * `DateAdapter<D>`, so the component works with the default native adapter
+ * (`provideNativeDateAdapter()`) or any custom adapter a consumer ships.
+ */
+class TimePickerComponent extends FormFieldControl {
+    // ── Inputs ──
+    /** Id on the time-picker's host element. Auto-generated when not provided. Used by the form-field's `<label for>` attribute. */
+    idInput = input(undefined, { ...(ngDevMode ? { debugName: "idInput" } : /* istanbul ignore next */ {}), alias: 'id' });
+    /** When true, the whole component is disabled and every field sets `aria-disabled="true"`. Defaults to `false`. */
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+        transform: booleanAttribute });
+    /** When true, exposes `aria-required="true"`. Validators.required on a bound NgControl is also honoured. Defaults to `false`. */
+    requiredInput = input(false, { ...(ngDevMode ? { debugName: "requiredInput" } : /* istanbul ignore next */ {}), alias: 'required',
+        transform: booleanAttribute });
+    /** When true, blocks typing, stepping, and the AM/PM toggle — the value is still read-only visible. Defaults to `false`. */
+    readonlyInput = input(false, { ...(ngDevMode ? { debugName: "readonlyInput" } : /* istanbul ignore next */ {}), alias: 'readonly',
+        transform: booleanAttribute });
+    /** Controls field height, font size, and stepper density. Defaults to `'md'`. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Semantic color used for the focused border and focus ring. Defaults to `'primary'`. */
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Visual style of the chrome. `'default'` draws its own border; `'naked'` strips chrome. Auto-resolves to `'naked'` inside `<tw-form-field>`. */
+    variant = input(undefined, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** `'12h'` renders 1–12 hours with an AM/PM toggle; `'24h'` renders 00–23. Defaults to `'24h'`. */
+    format = input('24h', ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    /** When true, renders a seconds field after minutes. Defaults to `false`. */
+    showSeconds = input(false, ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
+    /** Amount to add/subtract when stepping hours. Defaults to `1`. */
+    hourStep = input(1, ...(ngDevMode ? [{ debugName: "hourStep" }] : /* istanbul ignore next */ []));
+    /** Amount to add/subtract when stepping minutes. Defaults to `1`. */
+    minuteStep = input(1, ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
+    /** Amount to add/subtract when stepping seconds. Defaults to `1`. */
+    secondStep = input(1, ...(ngDevMode ? [{ debugName: "secondStep" }] : /* istanbul ignore next */ []));
+    /** Earliest accepted time-of-day. Values earlier than this set `errorState`. Defaults to `null`. Note: when `showSeconds` is `false`, the seconds component of any value still participates in the range comparison — supply `minTime` with zeroed seconds to match the 2-field display. */
+    minTime = input(null, ...(ngDevMode ? [{ debugName: "minTime" }] : /* istanbul ignore next */ []));
+    /** Latest accepted time-of-day. Values later than this set `errorState`. Defaults to `null`. Note: when `showSeconds` is `false`, the seconds component of any value still participates in the range comparison — supply `maxTime` with zeroed seconds to match the 2-field display. */
+    maxTime = input(null, ...(ngDevMode ? [{ debugName: "maxTime" }] : /* istanbul ignore next */ []));
+    /** Date portion used when the user types a time while `value` is `null`. Defaults to today. */
+    referenceDate = input(null, ...(ngDevMode ? [{ debugName: "referenceDate" }] : /* istanbul ignore next */ []));
+    /** Placeholder shown in each field when empty. Defaults to `'--'`. */
+    placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Whether to render the up/down stepper column. Defaults to `true`. */
+    // TRUE-default: pointer users expect inline up/down chevrons next to a numeric editor — without them the picker reads as a static display, and consumers must rebuild stepping for every instance.
+    showSteppers = input(true, ...(ngDevMode ? [{ debugName: "showSteppers" }] : /* istanbul ignore next */ []));
+    /** Whether to render the clear affordance when a value is set. Defaults to `true`. */
+    // TRUE-default: matches `<tw-date-picker>` and `<tw-input>` clear behaviour; without the inline clear, every form has to wire its own reset surface for an obvious affordance.
+    showClear = input(true, ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the clear button. Defaults to `'Clear time'`. */
+    clearLabel = input('Clear time', ...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
+    /** Per-instance override of the `ErrorStateMatcher`. */
+    errorStateMatcher = input(undefined, ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the fields group. Required when no visible label is supplied. Alias: `aria-label`. */
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    /** ID of an external element that labels the group. Alias: `aria-labelledby`. */
+    ariaLabelledby = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    /** Consumer-supplied `aria-describedby` ids. The form-field preserves these when merging hint/error ids. Alias: `aria-describedby`. */
+    userAriaDescribedByInput = input(undefined, { ...(ngDevMode ? { debugName: "userAriaDescribedByInput" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    // ── Models ──
+    /** Two-way bound current time. `null` when empty. Setting programmatically updates the fields without firing `onChange`. */
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    // ── Outputs ──
+    /** Fires on every keystroke, stepper press, or AM/PM toggle — before the new value is committed. */
+    timeInput = output();
+    /** Fires after a committed change — digit + auto-advance, stepper, meridiem toggle, clear, or programmatic write. */
+    timeChange = output();
+    // ── Injected deps ──
+    adapter = inject(DATE_ADAPTER);
+    focusMonitor = inject(FocusMonitor);
+    liveAnnouncer = inject(LiveAnnouncer);
+    elementRef = inject((ElementRef));
+    destroyRef = inject(DestroyRef);
+    formField = inject(FormFieldComponent, { optional: true });
+    ngControl = inject(NgControl, { optional: true, self: true });
+    parentForm = inject(NgForm, { optional: true });
+    parentFormGroup = inject(FormGroupDirective, { optional: true });
+    defaultMatcher = inject(TW_ERROR_STATE_MATCHER);
+    /** @internal — exposed for the template; consumers configure via `provideTimePickerIntl()`. */
+    intl = inject(TimePickerIntl, { optional: true }) ?? new TimePickerIntl();
+    // ── View refs ──
+    hourInputRef = viewChild.required('hourInput');
+    minuteInputRef = viewChild.required('minuteInput');
+    secondInputRef = viewChild('secondInput', ...(ngDevMode ? [{ debugName: "secondInputRef" }] : /* istanbul ignore next */ []));
+    // ── Identity ──
+    uid = nextTimePickerId++;
+    /** @internal */
+    hostId = `tw-time-picker-${this.uid}`;
+    // ── Internal state ──
+    /** @internal raw display text per field — always the numerals the user sees. */
+    hourText = signal('', ...(ngDevMode ? [{ debugName: "hourText" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    minuteText = signal('', ...(ngDevMode ? [{ debugName: "minuteText" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    secondText = signal('', ...(ngDevMode ? [{ debugName: "secondText" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    meridiem = signal('AM', ...(ngDevMode ? [{ debugName: "meridiem" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    focusedField = signal(null, ...(ngDevMode ? [{ debugName: "focusedField" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    internalValue = linkedSignal(() => this.value(), ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    describedByIdsSignal = signal([], ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
+    focusedSignal = signal(false, ...(ngDevMode ? [{ debugName: "focusedSignal" }] : /* istanbul ignore next */ []));
+    _ngControlRev = signal(0, ...(ngDevMode ? [{ debugName: "_ngControlRev" }] : /* istanbul ignore next */ []));
+    _formSubmitRev = signal(0, ...(ngDevMode ? [{ debugName: "_formSubmitRev" }] : /* istanbul ignore next */ []));
+    /** When true, an effect should not rewrite field text from the external value. */
+    editing = false;
+    onChange = () => { };
+    onTouched = () => { };
+    // ── Derived state ──
+    /** @internal */
+    isDisabled = computed(() => {
+        this._ngControlRev();
+        return this.disabledInput() || this.cvaDisabled() || !!this.ngControl?.disabled;
+    }, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    isEmpty = computed(() => this.internalValue() === null, ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+    /** @internal Effective variant — auto-naked when wrapped in tw-form-field. */
+    resolvedVariant = computed(() => this.variant() ?? (this.formField ? 'naked' : 'default'), ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    hourMin = computed(() => fieldMin('hour', this.format()), ...(ngDevMode ? [{ debugName: "hourMin" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    hourMax = computed(() => fieldMax('hour', this.format()), ...(ngDevMode ? [{ debugName: "hourMax" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    hourDisplay = computed(() => this.hourText(), ...(ngDevMode ? [{ debugName: "hourDisplay" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    hourValueNow = computed(() => {
+        const n = parseField(this.hourText());
+        return n === null ? null : n;
+    }, ...(ngDevMode ? [{ debugName: "hourValueNow" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    hourValueText = computed(() => {
+        const n = this.hourValueNow();
+        if (n === null)
+            return this.intl.emptyValueText;
+        const meridiemLabel = this.meridiem() === 'AM' ? this.intl.amLabel : this.intl.pmLabel;
+        const suffix = this.format() === '12h' ? ` ${meridiemLabel}` : '';
+        return `${padTwo(n)}${suffix}`;
+    }, ...(ngDevMode ? [{ debugName: "hourValueText" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    minuteValueNow = computed(() => parseField(this.minuteText()), ...(ngDevMode ? [{ debugName: "minuteValueNow" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    minuteValueText = computed(() => {
+        const n = this.minuteValueNow();
+        return n === null ? this.intl.emptyValueText : padTwo(n);
+    }, ...(ngDevMode ? [{ debugName: "minuteValueText" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    secondValueNow = computed(() => parseField(this.secondText()), ...(ngDevMode ? [{ debugName: "secondValueNow" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    secondValueText = computed(() => {
+        const n = this.secondValueNow();
+        return n === null ? this.intl.emptyValueText : padTwo(n);
+    }, ...(ngDevMode ? [{ debugName: "secondValueText" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    groupAriaLabel = computed(() => this.ariaLabel() ?? this.intl.groupLabel, ...(ngDevMode ? [{ debugName: "groupAriaLabel" }] : /* istanbul ignore next */ []));
+    /** @internal Label of the currently focused field, used by stepper aria-labels. */
+    focusedFieldLabel = computed(() => {
+        const f = this.focusedField();
+        if (f === 'minute')
+            return this.intl.minutesLabel.toLowerCase();
+        if (f === 'second')
+            return this.intl.secondsLabel.toLowerCase();
+        return this.intl.hoursLabel.toLowerCase();
+    }, ...(ngDevMode ? [{ debugName: "focusedFieldLabel" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    describedBy = computed(() => {
+        const extra = this.describedByIdsSignal();
+        const user = this.userAriaDescribedByInput();
+        const merged = [...extra];
+        if (user) {
+            for (const id of user.split(/\s+/))
+                if (id)
+                    merged.push(id);
+        }
+        return merged.length ? merged.join(' ') : '';
+    }, ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    // ── Range / error state ──
+    rangeError = signal(false, ...(ngDevMode ? [{ debugName: "rangeError" }] : /* istanbul ignore next */ []));
+    // ── tv() output ──
+    variantResult = computed(() => timePickerVariants({
+        size: this.size(),
+        variant: this.resolvedVariant(),
+        disabled: this.isDisabled(),
+        errorState: this.errorState(),
+        focused: this.focusedSignal(),
+        color: this.color(),
+    }), ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
+    /** @internal */ rootClasses = computed(() => this.variantResult().root(), ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */ fieldGroupClasses = computed(() => this.variantResult().fieldGroup(), ...(ngDevMode ? [{ debugName: "fieldGroupClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */ fieldClasses = computed(() => this.variantResult().field(), ...(ngDevMode ? [{ debugName: "fieldClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */ separatorClasses = computed(() => this.variantResult().separator(), ...(ngDevMode ? [{ debugName: "separatorClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */ stepperGroupClasses = computed(() => this.variantResult().stepperGroup(), ...(ngDevMode ? [{ debugName: "stepperGroupClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */ stepperClasses = computed(() => this.variantResult().stepper(), ...(ngDevMode ? [{ debugName: "stepperClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */ stepperIconClasses = computed(() => this.variantResult().stepperIcon(), ...(ngDevMode ? [{ debugName: "stepperIconClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */ meridiemClasses = computed(() => this.variantResult().meridiem(), ...(ngDevMode ? [{ debugName: "meridiemClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */ clearButtonClasses = computed(() => this.variantResult().clearButton(), ...(ngDevMode ? [{ debugName: "clearButtonClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    meridiemButtonClasses(which) {
+        const base = this.variantResult().meridiemButton();
+        const active = this.meridiem() === which;
+        return active ? `${base} ${MERIDIEM_ACTIVE_COLOR[this.color()]}` : base;
+    }
+    // ── FormFieldControl impl ──
+    /** @internal */ id = computed(() => this.idInput() ?? this.hostId, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** @internal */ focused = this.focusedSignal.asReadonly();
+    /** @internal */ empty = this.isEmpty;
+    /** @internal */ disabled = this.isDisabled;
+    /** @internal */ required = computed(() => {
+        this._ngControlRev();
+        if (this.requiredInput())
+            return true;
+        return !!this.ngControl?.control?.hasValidator(Validators.required);
+    }, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    errorState = computed(() => {
+        this._ngControlRev();
+        this._formSubmitRev();
+        this.focusedSignal();
+        if (this.rangeError())
+            return true;
+        const matcher = this.errorStateMatcher() ?? this.defaultMatcher;
+        const form = this.parentFormGroup ??
+            this.parentForm;
+        return matcher.isErrorState(this.ngControl?.control ?? null, form);
+    }, ...(ngDevMode ? [{ debugName: "errorState" }] : /* istanbul ignore next */ []));
+    /** @internal */ controlType = 'time-picker';
+    /** @internal */
+    userAriaDescribedBy = computed(() => this.userAriaDescribedByInput(), ...(ngDevMode ? [{ debugName: "userAriaDescribedBy" }] : /* istanbul ignore next */ []));
+    // ── Constructor ──
+    constructor() {
+        super();
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+        // Sync the field text whenever the underlying value changes (programmatic).
+        effect(() => {
+            const v = this.internalValue();
+            const fmt = this.format();
+            const showS = this.showSeconds();
+            untracked(() => {
+                if (this.editing)
+                    return;
+                if (v === null || !this.adapter.isValid(v)) {
+                    this.hourText.set('');
+                    this.minuteText.set('');
+                    this.secondText.set('');
+                    this.rangeError.set(false);
+                    return;
+                }
+                const h24 = this.adapter.getHours(v);
+                const m = this.adapter.getMinutes(v);
+                const s = this.adapter.getSeconds(v);
+                if (fmt === '12h') {
+                    this.hourText.set(padTwo(to12h(h24)));
+                    this.meridiem.set(h24 >= 12 ? 'PM' : 'AM');
+                }
+                else {
+                    this.hourText.set(padTwo(h24));
+                }
+                this.minuteText.set(padTwo(m));
+                this.secondText.set(showS ? padTwo(s) : '');
+                this.rangeError.set(!this.isInRange(v));
+            });
+        });
+        // Re-render the hour text when switching format (e.g., 24h → 12h) or showSeconds.
+        effect(() => {
+            this.format();
+            this.showSeconds();
+            untracked(() => {
+                const v = this.internalValue();
+                if (v === null || !this.adapter.isValid(v))
+                    return;
+                const h24 = this.adapter.getHours(v);
+                if (this.format() === '12h') {
+                    this.hourText.set(padTwo(to12h(h24)));
+                    this.meridiem.set(h24 >= 12 ? 'PM' : 'AM');
+                }
+                else {
+                    this.hourText.set(padTwo(h24));
+                }
+                if (this.showSeconds() && !this.secondText()) {
+                    this.secondText.set(padTwo(this.adapter.getSeconds(v)));
+                }
+            });
+        });
+        // Dev-mode warning for missing accessible name.
+        afterNextRender(() => {
+            if (!isDevMode())
+                return;
+            const hasLabel = !!this.ariaLabel() ||
+                !!this.ariaLabelledby() ||
+                !!this.formField?.labelChild();
+            if (!hasLabel) {
+                console.warn('[tw-time-picker] The time-picker has no accessible name. Set aria-label, aria-labelledby, or wrap the component in a <tw-form-field> with a <label twLabel>.');
+            }
+        });
+        // Dev-mode warning for bogus steps.
+        afterNextRender(() => {
+            if (!isDevMode())
+                return;
+            for (const [name, step] of [
+                ['hourStep', this.hourStep()],
+                ['minuteStep', this.minuteStep()],
+                ['secondStep', this.secondStep()],
+            ]) {
+                if (step < 1 || !Number.isFinite(step)) {
+                    console.warn(`[tw-time-picker] ${name}=${step} is invalid. Using 1 instead.`);
+                }
+            }
+        });
+        // Host focus tracking.
+        const monitorSub = this.focusMonitor
+            .monitor(this.elementRef, true)
+            .subscribe((origin) => {
+            const wasFocused = this.focusedSignal();
+            this.focusedSignal.set(!!origin);
+            if (wasFocused && !origin) {
+                this.focusedField.set(null);
+                this.editing = false;
+                this.normalizeEmptyFields();
+                this.onTouched();
+                this._ngControlRev.update((n) => n + 1);
+            }
+        });
+        this.destroyRef.onDestroy(() => {
+            monitorSub.unsubscribe();
+            this.focusMonitor.stopMonitoring(this.elementRef);
+        });
+    }
+    ngOnInit() {
+        const ctrl = this.ngControl?.control;
+        if (ctrl) {
+            const streams = [ctrl.statusChanges, ctrl.valueChanges].filter((s) => !!s);
+            if (streams.length) {
+                merge(...streams)
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe(() => this._ngControlRev.update((n) => n + 1));
+            }
+        }
+        const submit = this.parentFormGroup?.ngSubmit ?? this.parentForm?.ngSubmit;
+        if (submit) {
+            submit
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => this._formSubmitRev.update((n) => n + 1));
+        }
+    }
+    // ── Public imperative API ──
+    /** Moves focus to the hours field. */
+    focus() {
+        this.hourInputRef().nativeElement.focus();
+    }
+    /** Clears the value and emits `timeChange` with `source: 'clear'`. */
+    clear() {
+        this.commit(null, 'clear');
+    }
+    // ── Field interactions ──
+    /** @internal */
+    onFieldFocus(field) {
+        this.focusedField.set(field);
+        this.editing = true;
+        const el = this.getFieldEl(field);
+        if (el)
+            el.select();
+    }
+    /** @internal */
+    onFieldBlur(_field) {
+        this.editing = false;
+        this.normalizeEmptyFields();
+    }
+    /** @internal */
+    onBeforeInput(event, field) {
+        const evt = event;
+        const data = evt.data ?? '';
+        // Let browsers drive Backspace / Delete natively.
+        if (evt.inputType === 'deleteContentBackward' || evt.inputType === 'deleteContentForward') {
+            return;
+        }
+        // Replace default text insertion with our buffered digit logic.
+        if (evt.inputType === 'insertText' && /^\d$/.test(data)) {
+            evt.preventDefault();
+            this.typeDigit(field, data);
+        }
+        else if (evt.inputType === 'insertText') {
+            // Reject non-digit insertions.
+            evt.preventDefault();
+        }
+    }
+    /** @internal Handle native delete events (Backspace/Delete). */
+    onInputEvent(event, field) {
+        const evt = event;
+        const el = event.target;
+        if (evt.inputType === 'deleteContentBackward' || evt.inputType === 'deleteContentForward') {
+            this.editing = true;
+            const currentLen = this.getFieldText(field).length;
+            const nativeText = el.value.replace(/\D/g, '').slice(0, 2);
+            if (nativeText.length < currentLen || nativeText.length === 0) {
+                this.setFieldText(field, nativeText);
+                this.commitFromFields('input', field);
+            }
+        }
+    }
+    /** @internal */
+    onFieldKeydown(event, field) {
+        if (this.isDisabled() || this.readonlyInput())
+            return;
+        const key = event.key;
+        switch (key) {
+            case 'ArrowUp':
+                event.preventDefault();
+                this.stepField(field, 1, event.shiftKey);
+                return;
+            case 'ArrowDown':
+                event.preventDefault();
+                this.stepField(field, -1, event.shiftKey);
+                return;
+            case 'ArrowLeft':
+                if (this.isFieldCaretAtStart(field)) {
+                    event.preventDefault();
+                    this.moveFocus(field, -1);
+                }
+                return;
+            case 'ArrowRight':
+                if (this.isFieldCaretAtEnd(field)) {
+                    event.preventDefault();
+                    this.moveFocus(field, 1);
+                }
+                return;
+            case 'Home':
+                event.preventDefault();
+                this.setFieldText(field, padTwo(this.fieldMinFor(field)));
+                this.commitFromFields('input', field);
+                return;
+            case 'End':
+                event.preventDefault();
+                this.setFieldText(field, padTwo(this.fieldMaxFor(field)));
+                this.commitFromFields('input', field);
+                return;
+            case 'Delete':
+            case 'Backspace':
+                // Let native input drive these; `onInputEvent` syncs state.
+                return;
+            default:
+                if (key.length === 1 && !/\d/.test(key)) {
+                    event.preventDefault();
+                }
+                return;
+        }
+    }
+    /** @internal */
+    setMeridiem(m) {
+        if (this.isDisabled() || this.readonlyInput())
+            return;
+        if (this.meridiem() === m)
+            return;
+        this.meridiem.set(m);
+        this.commitFromFields('meridiem', 'meridiem');
+    }
+    /** @internal */
+    onMeridiemKeydown(event, m) {
+        if (this.isDisabled() || this.readonlyInput())
+            return;
+        if (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this.setMeridiem(m === 'AM' ? 'PM' : 'AM');
+        }
+    }
+    /** @internal */
+    onStepperMouseDown(event) {
+        // Keep focus on the current field when clicking the stepper.
+        event.preventDefault();
+    }
+    /** @internal */
+    onStepperClick(direction) {
+        const field = this.focusedField() ?? 'hour';
+        if (field === 'meridiem') {
+            this.setMeridiem(this.meridiem() === 'AM' ? 'PM' : 'AM');
+            return;
+        }
+        this.stepField(field, direction, false);
+        // Restore focus to the field we stepped.
+        const el = this.getFieldEl(field);
+        el?.focus();
+    }
+    /** @internal */
+    onClearClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.clear();
+    }
+    // ── Helpers ──
+    typeDigit(field, digit) {
+        if (field === 'meridiem')
+            return;
+        const max = this.fieldMaxFor(field);
+        const current = this.getFieldText(field);
+        const next = appendDigit(current, digit, max);
+        const advance = isTerminalDigit(current, digit, max) || next.length === 2;
+        this.setFieldText(field, next);
+        this.commitFromFields('input', field);
+        if (advance)
+            this.moveFocus(field, 1);
+    }
+    stepField(field, direction, shift) {
+        if (field === 'meridiem') {
+            this.setMeridiem(this.meridiem() === 'AM' ? 'PM' : 'AM');
+            return;
+        }
+        const step = this.stepFor(field) * (shift ? 2 : 1);
+        const min = this.fieldMinFor(field);
+        const max = this.fieldMaxFor(field);
+        const current = parseField(this.getFieldText(field)) ?? min;
+        const next = stepWithWrap(current, step, direction, min, max);
+        this.setFieldText(field, padTwo(next));
+        this.commitFromFields('stepper', field);
+    }
+    commitFromFields(source, field) {
+        const hourRaw = parseField(this.hourText());
+        const minuteRaw = parseField(this.minuteText());
+        const secondRaw = this.showSeconds() ? parseField(this.secondText()) : 0;
+        this.timeInput.emit({
+            field,
+            rawText: field === 'meridiem' ? this.meridiem() : this.getFieldText(field),
+            parsed: this.buildValueIfComplete(hourRaw, minuteRaw, secondRaw),
+        });
+        if (hourRaw === null || minuteRaw === null || (this.showSeconds() && secondRaw === null)) {
+            return;
+        }
+        const h24 = this.toCanonicalHour(hourRaw);
+        if (h24 === null)
+            return;
+        const base = this.resolveBaseDate();
+        const next = this.adapter.withTime(base, h24, minuteRaw, this.showSeconds() ? (secondRaw ?? 0) : 0);
+        if (!this.adapter.isValid(next))
+            return;
+        this.commit(next, source);
+    }
+    buildValueIfComplete(h, m, s) {
+        if (h === null || m === null)
+            return null;
+        if (this.showSeconds() && s === null)
+            return null;
+        const h24 = this.toCanonicalHour(h);
+        if (h24 === null)
+            return null;
+        const base = this.resolveBaseDate();
+        const built = this.adapter.withTime(base, h24, m, this.showSeconds() ? (s ?? 0) : 0);
+        return this.adapter.isValid(built) ? built : null;
+    }
+    toCanonicalHour(display) {
+        if (this.format() === '12h') {
+            if (display < 1 || display > 12)
+                return null;
+            return from12h(display, this.meridiem());
+        }
+        if (display < 0 || display > 23)
+            return null;
+        return display;
+    }
+    resolveBaseDate() {
+        const current = this.internalValue();
+        if (current !== null && this.adapter.isValid(current))
+            return current;
+        const reference = this.referenceDate();
+        if (reference !== null && this.adapter.isValid(reference))
+            return reference;
+        return this.adapter.today();
+    }
+    commit(next, source) {
+        const previous = this.internalValue();
+        this.internalValue.set(next);
+        this.value.set(next);
+        this.rangeError.set(next !== null ? !this.isInRange(next) : false);
+        if (source !== 'programmatic') {
+            this.onChange(next);
+            this.onTouched();
+            if (next === null) {
+                this.liveAnnouncer.announce(this.intl.clearedAnnouncement, 'polite');
+            }
+            else {
+                this.liveAnnouncer.announce(this.intl.selectedAnnouncement(this.formatAnnouncement(next)), 'polite');
+            }
+        }
+        this.timeChange.emit({ value: next, previousValue: previous, source });
+    }
+    formatAnnouncement(v) {
+        const h24 = this.adapter.getHours(v);
+        const m = this.adapter.getMinutes(v);
+        const s = this.adapter.getSeconds(v);
+        const secPart = this.showSeconds() ? `:${padTwo(s)}` : '';
+        if (this.format() === '12h') {
+            const meridiemLabel = h24 >= 12 ? this.intl.pmLabel : this.intl.amLabel;
+            return `${padTwo(to12h(h24))}:${padTwo(m)}${secPart} ${meridiemLabel}`;
+        }
+        return `${padTwo(h24)}:${padTwo(m)}${secPart}`;
+    }
+    isInRange(v) {
+        const min = this.minTime();
+        const max = this.maxTime();
+        if (!min && !max)
+            return true;
+        const vSecs = timeOfDaySeconds(this.adapter.getHours(v), this.adapter.getMinutes(v), this.adapter.getSeconds(v));
+        if (min && this.adapter.isValid(min)) {
+            const minSecs = timeOfDaySeconds(this.adapter.getHours(min), this.adapter.getMinutes(min), this.adapter.getSeconds(min));
+            if (vSecs < minSecs)
+                return false;
+        }
+        if (max && this.adapter.isValid(max)) {
+            const maxSecs = timeOfDaySeconds(this.adapter.getHours(max), this.adapter.getMinutes(max), this.adapter.getSeconds(max));
+            if (vSecs > maxSecs)
+                return false;
+        }
+        return true;
+    }
+    normalizeEmptyFields() {
+        // Zero-pad single-digit entries once the user leaves the component so the
+        // display always settles to "HH : MM".
+        for (const field of ['hour', 'minute', 'second']) {
+            if (field === 'second' && !this.showSeconds())
+                continue;
+            const raw = this.getFieldText(field);
+            if (raw.length === 1) {
+                this.setFieldText(field, padTwo(Number(raw)));
+            }
+        }
+    }
+    moveFocus(field, direction) {
+        const order = this.showSeconds()
+            ? ['hour', 'minute', 'second']
+            : ['hour', 'minute'];
+        const idx = order.indexOf(field);
+        if (idx === -1)
+            return;
+        const nextIdx = clamp(idx + direction, 0, order.length - 1);
+        if (nextIdx === idx)
+            return;
+        const el = this.getFieldEl(order[nextIdx]);
+        el?.focus();
+    }
+    isFieldCaretAtStart(field) {
+        const el = this.getFieldEl(field);
+        if (!el)
+            return true;
+        return (el.selectionStart ?? 0) === 0;
+    }
+    isFieldCaretAtEnd(field) {
+        const el = this.getFieldEl(field);
+        if (!el)
+            return true;
+        const end = el.selectionEnd ?? 0;
+        return end === el.value.length;
+    }
+    getFieldEl(field) {
+        switch (field) {
+            case 'hour':
+                return this.hourInputRef().nativeElement;
+            case 'minute':
+                return this.minuteInputRef().nativeElement;
+            case 'second':
+                return this.secondInputRef()?.nativeElement ?? null;
+            default:
+                return null;
+        }
+    }
+    getFieldText(field) {
+        switch (field) {
+            case 'hour':
+                return this.hourText();
+            case 'minute':
+                return this.minuteText();
+            case 'second':
+                return this.secondText();
+            default:
+                return '';
+        }
+    }
+    setFieldText(field, next) {
+        this.editing = true;
+        switch (field) {
+            case 'hour':
+                this.hourText.set(next);
+                return;
+            case 'minute':
+                this.minuteText.set(next);
+                return;
+            case 'second':
+                this.secondText.set(next);
+                return;
+            default:
+                return;
+        }
+    }
+    stepFor(field) {
+        switch (field) {
+            case 'hour':
+                return Math.max(1, Math.floor(this.hourStep()));
+            case 'minute':
+                return Math.max(1, Math.floor(this.minuteStep()));
+            case 'second':
+                return Math.max(1, Math.floor(this.secondStep()));
+            default:
+                return 1;
+        }
+    }
+    fieldMinFor(field) {
+        if (field === 'hour')
+            return fieldMin('hour', this.format());
+        return 0;
+    }
+    fieldMaxFor(field) {
+        if (field === 'hour')
+            return fieldMax('hour', this.format());
+        return 59;
+    }
+    // ── ControlValueAccessor ──
+    writeValue(value) {
+        if (value === null || value === undefined || value === '') {
+            const previous = this.internalValue();
+            this.internalValue.set(null);
+            this.value.set(null);
+            this.rangeError.set(false);
+            this.hourText.set('');
+            this.minuteText.set('');
+            this.secondText.set('');
+            this.timeChange.emit({ value: null, previousValue: previous, source: 'programmatic' });
+            return;
+        }
+        const coerced = this.adapter.deserialize(value);
+        if (coerced === null || !this.adapter.isValid(coerced)) {
+            this.internalValue.set(null);
+            this.value.set(null);
+            this.hourText.set('');
+            this.minuteText.set('');
+            this.secondText.set('');
+            this.rangeError.set(true);
+            return;
+        }
+        const previous = this.internalValue();
+        this.internalValue.set(coerced);
+        this.value.set(coerced);
+        this.rangeError.set(!this.isInRange(coerced));
+        this.timeChange.emit({ value: coerced, previousValue: previous, source: 'programmatic' });
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    // ── FormFieldControl methods ──
+    /** @internal */
+    setDescribedByIds(ids) {
+        this.describedByIdsSignal.set([...ids]);
+    }
+    /** @internal */
+    onContainerClick(event) {
+        if (this.isDisabled())
+            return;
+        const target = event.target;
+        // Clicks that land on an actual field or button should settle focus naturally.
+        if (target && (target.tagName === 'INPUT' || target.tagName === 'BUTTON'))
+            return;
+        this.hourInputRef().nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TimePickerComponent, isStandalone: true, selector: "tw-time-picker", inputs: { idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, hourStep: { classPropertyName: "hourStep", publicName: "hourStep", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", 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 }, referenceDate: { classPropertyName: "referenceDate", publicName: "referenceDate", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showSteppers: { classPropertyName: "showSteppers", publicName: "showSteppers", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, userAriaDescribedByInput: { classPropertyName: "userAriaDescribedByInput", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", timeInput: "timeInput", timeChange: "timeChange" }, host: { properties: { "class": "rootClasses()", "id": "hostId", "attr.aria-disabled": "isDisabled() || null", "attr.aria-invalid": "errorState() || null", "attr.data-variant": "resolvedVariant()" } }, providers: [
+            {
+                provide: TW_FORM_FIELD_CONTROL,
+                useExisting: forwardRef(() => TimePickerComponent),
+            },
+        ], viewQueries: [{ propertyName: "hourInputRef", first: true, predicate: ["hourInput"], descendants: true, isSignal: true }, { propertyName: "minuteInputRef", first: true, predicate: ["minuteInput"], descendants: true, isSignal: true }, { propertyName: "secondInputRef", first: true, predicate: ["secondInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <div [class]="fieldGroupClasses()" role="group" [attr.aria-label]="groupAriaLabel()">
+      <input
+        #hourInput
+        type="text"
+        inputmode="numeric"
+        autocomplete="off"
+        maxlength="2"
+        [class]="fieldClasses()"
+        [value]="hourDisplay()"
+        [placeholder]="placeholder() ?? '--'"
+        [disabled]="isDisabled()"
+        [attr.readonly]="readonlyInput() ? 'true' : null"
+        [attr.aria-label]="intl.hoursLabel"
+        [attr.role]="'spinbutton'"
+        [attr.aria-valuemin]="hourMin()"
+        [attr.aria-valuemax]="hourMax()"
+        [attr.aria-valuenow]="hourValueNow()"
+        [attr.aria-valuetext]="hourValueText()"
+        [attr.aria-invalid]="errorState() || null"
+        [attr.aria-disabled]="isDisabled() || null"
+        (keydown)="onFieldKeydown($event, 'hour')"
+        (beforeinput)="onBeforeInput($event, 'hour')"
+        (input)="onInputEvent($event, 'hour')"
+        (focus)="onFieldFocus('hour')"
+        (blur)="onFieldBlur('hour')"
+      />
+
+      <span [class]="separatorClasses()" aria-hidden="true">:</span>
+
+      <input
+        #minuteInput
+        type="text"
+        inputmode="numeric"
+        autocomplete="off"
+        maxlength="2"
+        [class]="fieldClasses()"
+        [value]="minuteText()"
+        [placeholder]="placeholder() ?? '--'"
+        [disabled]="isDisabled()"
+        [attr.readonly]="readonlyInput() ? 'true' : null"
+        [attr.aria-label]="intl.minutesLabel"
+        [attr.role]="'spinbutton'"
+        [attr.aria-valuemin]="0"
+        [attr.aria-valuemax]="59"
+        [attr.aria-valuenow]="minuteValueNow()"
+        [attr.aria-valuetext]="minuteValueText()"
+        [attr.aria-invalid]="errorState() || null"
+        [attr.aria-disabled]="isDisabled() || null"
+        (keydown)="onFieldKeydown($event, 'minute')"
+        (beforeinput)="onBeforeInput($event, 'minute')"
+        (input)="onInputEvent($event, 'minute')"
+        (focus)="onFieldFocus('minute')"
+        (blur)="onFieldBlur('minute')"
+      />
+
+      @if (showSeconds()) {
+        <span [class]="separatorClasses()" aria-hidden="true">:</span>
+
+        <input
+          #secondInput
+          type="text"
+          inputmode="numeric"
+          autocomplete="off"
+          maxlength="2"
+          [class]="fieldClasses()"
+          [value]="secondText()"
+          [placeholder]="placeholder() ?? '--'"
+          [disabled]="isDisabled()"
+          [attr.readonly]="readonlyInput() ? 'true' : null"
+          [attr.aria-label]="intl.secondsLabel"
+          [attr.role]="'spinbutton'"
+          [attr.aria-valuemin]="0"
+          [attr.aria-valuemax]="59"
+          [attr.aria-valuenow]="secondValueNow()"
+          [attr.aria-valuetext]="secondValueText()"
+          [attr.aria-invalid]="errorState() || null"
+          [attr.aria-disabled]="isDisabled() || null"
+          (keydown)="onFieldKeydown($event, 'second')"
+          (beforeinput)="onBeforeInput($event, 'second')"
+          (input)="onInputEvent($event, 'second')"
+          (focus)="onFieldFocus('second')"
+          (blur)="onFieldBlur('second')"
+        />
+      }
+    </div>
+
+    @if (showSteppers()) {
+      <div [class]="stepperGroupClasses()">
+        <button
+          type="button"
+          tabindex="-1"
+          [class]="stepperClasses()"
+          [attr.aria-label]="intl.increaseLabel(focusedFieldLabel())"
+          [disabled]="isDisabled() || readonlyInput()"
+          (mousedown)="onStepperMouseDown($event)"
+          (click)="onStepperClick(1)"
+        >
+          <ng-content select="[slot=stepper-up]">
+            <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" [class]="stepperIconClasses()">
+              <path fill-rule="evenodd" d="M14.77 12.79a.75.75 0 0 1-1.06-.02L10 8.94l-3.71 3.83a.75.75 0 1 1-1.08-1.04l4.25-4.39a.75.75 0 0 1 1.08 0l4.25 4.39a.75.75 0 0 1-.02 1.06Z" clip-rule="evenodd" />
+            </svg>
+          </ng-content>
+        </button>
+        <button
+          type="button"
+          tabindex="-1"
+          [class]="stepperClasses()"
+          [attr.aria-label]="intl.decreaseLabel(focusedFieldLabel())"
+          [disabled]="isDisabled() || readonlyInput()"
+          (mousedown)="onStepperMouseDown($event)"
+          (click)="onStepperClick(-1)"
+        >
+          <ng-content select="[slot=stepper-down]">
+            <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" [class]="stepperIconClasses()">
+              <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.06l3.71-3.83a.75.75 0 1 1 1.08 1.04l-4.25 4.39a.75.75 0 0 1-1.08 0L5.21 8.27a.75.75 0 0 1 .02-1.06Z" clip-rule="evenodd" />
+            </svg>
+          </ng-content>
+        </button>
+      </div>
+    }
+
+    @if (format() === '12h') {
+      <div [class]="meridiemClasses()" role="radiogroup" [attr.aria-label]="intl.meridiemGroupLabel">
+        <button
+          type="button"
+          role="radio"
+          [class]="meridiemButtonClasses('AM')"
+          [attr.aria-checked]="meridiem() === 'AM'"
+          [attr.aria-label]="intl.amLabel"
+          [disabled]="isDisabled() || readonlyInput()"
+          (click)="setMeridiem('AM')"
+          (keydown)="onMeridiemKeydown($event, 'AM')"
+        >{{ intl.amLabel }}</button>
+        <button
+          type="button"
+          role="radio"
+          [class]="meridiemButtonClasses('PM')"
+          [attr.aria-checked]="meridiem() === 'PM'"
+          [attr.aria-label]="intl.pmLabel"
+          [disabled]="isDisabled() || readonlyInput()"
+          (click)="setMeridiem('PM')"
+          (keydown)="onMeridiemKeydown($event, 'PM')"
+        >{{ intl.pmLabel }}</button>
+      </div>
+    }
+
+    @if (showClear() && !isEmpty() && !isDisabled() && !readonlyInput()) {
+      <button
+        type="button"
+        tabindex="-1"
+        [class]="clearButtonClasses()"
+        [attr.aria-label]="clearLabel()"
+        (click)="onClearClick($event)"
+      >
+        <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-3">
+          <path
+            fill-rule="evenodd"
+            d="M10 8.586 4.707 3.293a1 1 0 0 0-1.414 1.414L8.586 10l-5.293 5.293a1 1 0 1 0 1.414 1.414L10 11.414l5.293 5.293a1 1 0 0 0 1.414-1.414L11.414 10l5.293-5.293a1 1 0 0 0-1.414-1.414L10 8.586Z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </button>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TimePickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-time-picker',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: TW_FORM_FIELD_CONTROL,
+                            useExisting: forwardRef(() => TimePickerComponent),
+                        },
+                    ],
+                    template: `
+    <div [class]="fieldGroupClasses()" role="group" [attr.aria-label]="groupAriaLabel()">
+      <input
+        #hourInput
+        type="text"
+        inputmode="numeric"
+        autocomplete="off"
+        maxlength="2"
+        [class]="fieldClasses()"
+        [value]="hourDisplay()"
+        [placeholder]="placeholder() ?? '--'"
+        [disabled]="isDisabled()"
+        [attr.readonly]="readonlyInput() ? 'true' : null"
+        [attr.aria-label]="intl.hoursLabel"
+        [attr.role]="'spinbutton'"
+        [attr.aria-valuemin]="hourMin()"
+        [attr.aria-valuemax]="hourMax()"
+        [attr.aria-valuenow]="hourValueNow()"
+        [attr.aria-valuetext]="hourValueText()"
+        [attr.aria-invalid]="errorState() || null"
+        [attr.aria-disabled]="isDisabled() || null"
+        (keydown)="onFieldKeydown($event, 'hour')"
+        (beforeinput)="onBeforeInput($event, 'hour')"
+        (input)="onInputEvent($event, 'hour')"
+        (focus)="onFieldFocus('hour')"
+        (blur)="onFieldBlur('hour')"
+      />
+
+      <span [class]="separatorClasses()" aria-hidden="true">:</span>
+
+      <input
+        #minuteInput
+        type="text"
+        inputmode="numeric"
+        autocomplete="off"
+        maxlength="2"
+        [class]="fieldClasses()"
+        [value]="minuteText()"
+        [placeholder]="placeholder() ?? '--'"
+        [disabled]="isDisabled()"
+        [attr.readonly]="readonlyInput() ? 'true' : null"
+        [attr.aria-label]="intl.minutesLabel"
+        [attr.role]="'spinbutton'"
+        [attr.aria-valuemin]="0"
+        [attr.aria-valuemax]="59"
+        [attr.aria-valuenow]="minuteValueNow()"
+        [attr.aria-valuetext]="minuteValueText()"
+        [attr.aria-invalid]="errorState() || null"
+        [attr.aria-disabled]="isDisabled() || null"
+        (keydown)="onFieldKeydown($event, 'minute')"
+        (beforeinput)="onBeforeInput($event, 'minute')"
+        (input)="onInputEvent($event, 'minute')"
+        (focus)="onFieldFocus('minute')"
+        (blur)="onFieldBlur('minute')"
+      />
+
+      @if (showSeconds()) {
+        <span [class]="separatorClasses()" aria-hidden="true">:</span>
+
+        <input
+          #secondInput
+          type="text"
+          inputmode="numeric"
+          autocomplete="off"
+          maxlength="2"
+          [class]="fieldClasses()"
+          [value]="secondText()"
+          [placeholder]="placeholder() ?? '--'"
+          [disabled]="isDisabled()"
+          [attr.readonly]="readonlyInput() ? 'true' : null"
+          [attr.aria-label]="intl.secondsLabel"
+          [attr.role]="'spinbutton'"
+          [attr.aria-valuemin]="0"
+          [attr.aria-valuemax]="59"
+          [attr.aria-valuenow]="secondValueNow()"
+          [attr.aria-valuetext]="secondValueText()"
+          [attr.aria-invalid]="errorState() || null"
+          [attr.aria-disabled]="isDisabled() || null"
+          (keydown)="onFieldKeydown($event, 'second')"
+          (beforeinput)="onBeforeInput($event, 'second')"
+          (input)="onInputEvent($event, 'second')"
+          (focus)="onFieldFocus('second')"
+          (blur)="onFieldBlur('second')"
+        />
+      }
+    </div>
+
+    @if (showSteppers()) {
+      <div [class]="stepperGroupClasses()">
+        <button
+          type="button"
+          tabindex="-1"
+          [class]="stepperClasses()"
+          [attr.aria-label]="intl.increaseLabel(focusedFieldLabel())"
+          [disabled]="isDisabled() || readonlyInput()"
+          (mousedown)="onStepperMouseDown($event)"
+          (click)="onStepperClick(1)"
+        >
+          <ng-content select="[slot=stepper-up]">
+            <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" [class]="stepperIconClasses()">
+              <path fill-rule="evenodd" d="M14.77 12.79a.75.75 0 0 1-1.06-.02L10 8.94l-3.71 3.83a.75.75 0 1 1-1.08-1.04l4.25-4.39a.75.75 0 0 1 1.08 0l4.25 4.39a.75.75 0 0 1-.02 1.06Z" clip-rule="evenodd" />
+            </svg>
+          </ng-content>
+        </button>
+        <button
+          type="button"
+          tabindex="-1"
+          [class]="stepperClasses()"
+          [attr.aria-label]="intl.decreaseLabel(focusedFieldLabel())"
+          [disabled]="isDisabled() || readonlyInput()"
+          (mousedown)="onStepperMouseDown($event)"
+          (click)="onStepperClick(-1)"
+        >
+          <ng-content select="[slot=stepper-down]">
+            <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" [class]="stepperIconClasses()">
+              <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.06l3.71-3.83a.75.75 0 1 1 1.08 1.04l-4.25 4.39a.75.75 0 0 1-1.08 0L5.21 8.27a.75.75 0 0 1 .02-1.06Z" clip-rule="evenodd" />
+            </svg>
+          </ng-content>
+        </button>
+      </div>
+    }
+
+    @if (format() === '12h') {
+      <div [class]="meridiemClasses()" role="radiogroup" [attr.aria-label]="intl.meridiemGroupLabel">
+        <button
+          type="button"
+          role="radio"
+          [class]="meridiemButtonClasses('AM')"
+          [attr.aria-checked]="meridiem() === 'AM'"
+          [attr.aria-label]="intl.amLabel"
+          [disabled]="isDisabled() || readonlyInput()"
+          (click)="setMeridiem('AM')"
+          (keydown)="onMeridiemKeydown($event, 'AM')"
+        >{{ intl.amLabel }}</button>
+        <button
+          type="button"
+          role="radio"
+          [class]="meridiemButtonClasses('PM')"
+          [attr.aria-checked]="meridiem() === 'PM'"
+          [attr.aria-label]="intl.pmLabel"
+          [disabled]="isDisabled() || readonlyInput()"
+          (click)="setMeridiem('PM')"
+          (keydown)="onMeridiemKeydown($event, 'PM')"
+        >{{ intl.pmLabel }}</button>
+      </div>
+    }
+
+    @if (showClear() && !isEmpty() && !isDisabled() && !readonlyInput()) {
+      <button
+        type="button"
+        tabindex="-1"
+        [class]="clearButtonClasses()"
+        [attr.aria-label]="clearLabel()"
+        (click)="onClearClick($event)"
+      >
+        <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-3">
+          <path
+            fill-rule="evenodd"
+            d="M10 8.586 4.707 3.293a1 1 0 0 0-1.414 1.414L8.586 10l-5.293 5.293a1 1 0 1 0 1.414 1.414L10 11.414l5.293 5.293a1 1 0 0 0 1.414-1.414L11.414 10l5.293-5.293a1 1 0 0 0-1.414-1.414L10 8.586Z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </button>
+    }
+  `,
+                    host: {
+                        '[class]': 'rootClasses()',
+                        '[id]': 'hostId',
+                        '[attr.aria-disabled]': 'isDisabled() || null',
+                        '[attr.aria-invalid]': 'errorState() || null',
+                        '[attr.data-variant]': 'resolvedVariant()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], hourStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourStep", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], secondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondStep", required: false }] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTime", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTime", required: false }] }], referenceDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "referenceDate", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showSteppers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSteppers", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], userAriaDescribedByInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], timeInput: [{ type: i0.Output, args: ["timeInput"] }], timeChange: [{ type: i0.Output, args: ["timeChange"] }], hourInputRef: [{ type: i0.ViewChild, args: ['hourInput', { isSignal: true }] }], minuteInputRef: [{ type: i0.ViewChild, args: ['minuteInput', { isSignal: true }] }], secondInputRef: [{ type: i0.ViewChild, args: ['secondInput', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TimePickerComponent, TimePickerIntl, provideTimePickerIntl };
+//# sourceMappingURL=cdevhub-ngx-tw-time-picker.mjs.map