@radix-ng/primitives 0.50.0 → 1.0.0-beta.0

package/fesm2022/radix-ng-primitives-time-field.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, input, computed, signal, effect, Directive, model, booleanAttribute, linkedSignal, NgModule } from '@angular/core';
-import { useDateField, normalizeDateStep, getDefaultTime, isNullish, isBefore, createContent, watch, createFormatter, normalizeHourCycle, initializeSegmentValues, syncSegmentValues, getSegmentElements, isSegmentNavigationKey, ARROW_LEFT, ARROW_RIGHT, provideToken } from '@radix-ng/primitives/core';
-import { today, toCalendarDateTime, getLocalTimeZone, isEqualDay } from '@internationalized/date';
+import { InjectionToken, inject, ElementRef, input, computed, signal, effect, Directive, model, booleanAttribute, contentChildren, linkedSignal, NgModule } from '@angular/core';
+import { useDateField, normalizeDateStep, createFormatter, normalizeHourCycle, getDefaultTime, isNullish, syncSegmentValues, initializeSegmentValues, isBefore, createContent, watch, isSegmentNavigationKey, ARROW_LEFT, ARROW_RIGHT, provideToken } from '@radix-ng/primitives/core';
+import { toCalendarDateTime, today, getLocalTimeZone, isEqualDay } from '@internationalized/date';
 
 const TIME_FIELDS_ROOT_CONTEXT = new InjectionToken('TIME_FIELDS_ROOT_CONTEXT');
 function injectTimeFieldsRootContext() {
@@ -11,32 +11,38 @@ function injectTimeFieldsRootContext() {
 class RdxTimeFieldInputDirective {
     constructor() {
         this.el = inject(ElementRef);
+        /**
+         * The host element of this segment. Consumed by the root to collect focusable
+         * segments in DOM order.
+         * @ignore
+         */
+        this.element = this.el.nativeElement;
         this.rootContext = injectTimeFieldsRootContext();
         /**
          * The part of the date to render
          * `'hour' | 'minute' | 'second' | 'dayPeriod' | 'literal' | 'timeZoneName'`
          */
-        this.part = input(...(ngDevMode ? [undefined, { debugName: "part" }] : []));
+        this.part = input(...(ngDevMode ? [undefined, { debugName: "part" }] : /* istanbul ignore next */ []));
         /**
          * @ignore
          */
-        this.disabled = computed(() => this.rootContext.disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.disabled = computed(() => this.rootContext.disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         /**
          * @ignore
          */
-        this.readonly = computed(() => this.rootContext.readonly(), ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+        this.readonly = computed(() => this.rootContext.readonly(), ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
         /**
          * @ignore
          */
-        this.isInvalid = computed(() => this.rootContext.isInvalid(), ...(ngDevMode ? [{ debugName: "isInvalid" }] : []));
+        this.isInvalid = computed(() => this.rootContext.isInvalid(), ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
         /**
          * @ignore
          */
-        this.hasLeftFocus = signal(true, ...(ngDevMode ? [{ debugName: "hasLeftFocus" }] : []));
+        this.hasLeftFocus = signal(true, ...(ngDevMode ? [{ debugName: "hasLeftFocus" }] : /* istanbul ignore next */ []));
         /**
          * @ignore
          */
-        this.lastKeyZero = signal(false, ...(ngDevMode ? [{ debugName: "lastKeyZero" }] : []));
+        this.lastKeyZero = signal(false, ...(ngDevMode ? [{ debugName: "lastKeyZero" }] : /* istanbul ignore next */ []));
         this.fieldData = computed(() => {
             return useDateField({
                 hasLeftFocus: this.hasLeftFocus,
@@ -44,7 +50,7 @@ class RdxTimeFieldInputDirective {
                 placeholder: this.rootContext.convertedPlaceholder,
                 hourCycle: this.rootContext.hourCycle(),
                 segmentValues: this.rootContext.segmentValues,
-                formatter: this.rootContext.formatter,
+                formatter: this.rootContext.formatter(),
                 part: this.part(),
                 disabled: this.rootContext.disabled,
                 readonly: this.rootContext.readonly,
@@ -52,8 +58,8 @@ class RdxTimeFieldInputDirective {
                 focusNext: this.rootContext.focusNext,
                 step: this.rootContext.step$
             });
-        }, ...(ngDevMode ? [{ debugName: "fieldData" }] : []));
-        this.attributes = computed(() => this.fieldData().attributes(), ...(ngDevMode ? [{ debugName: "attributes" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "fieldData" }] : /* istanbul ignore next */ []));
+        this.attributes = computed(() => this.fieldData().attributes(), ...(ngDevMode ? [{ debugName: "attributes" }] : /* istanbul ignore next */ []));
         effect(() => {
             const { handleSegmentClick, handleSegmentKeydown } = this.fieldData();
             this.handleSegmentKeydown = handleSegmentKeydown;
@@ -78,10 +84,10 @@ class RdxTimeFieldInputDirective {
     onFocusOut() {
         this.hasLeftFocus.set(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTimeFieldInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxTimeFieldInputDirective, isStandalone: true, selector: "[rdxTimeFieldInput]", inputs: { part: { classPropertyName: "part", publicName: "part", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mousedown": "part() !== \"literal\" && handleSegmentClick($event)", "keydown": "part() !== \"literal\" && handleSegmentKeydown($event)", "focus": "part() !== \"literal\" && onFocus($event)", "focusout": "part() !== \"literal\" && onFocusOut()" }, properties: { "attr.contenteditable": "disabled() || readonly() ? false : part() !== \"literal\"", "attr.data-rdx-date-field-segment": "part()", "attr.aria-disabled": "disabled() ? \"\" : undefined", "attr.data-disabled": "disabled() ? \"\" : undefined", "attr.data-invalid": "isInvalid() ? \"\" : undefined", "attr.aria-invalid": "isInvalid() ? true : undefined" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTimeFieldInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxTimeFieldInputDirective, isStandalone: true, selector: "[rdxTimeFieldInput]", inputs: { part: { classPropertyName: "part", publicName: "part", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mousedown": "part() !== \"literal\" && handleSegmentClick($event)", "keydown": "part() !== \"literal\" && handleSegmentKeydown($event)", "focus": "part() !== \"literal\" && onFocus($event)", "focusout": "part() !== \"literal\" && onFocusOut()" }, properties: { "attr.contenteditable": "disabled() || readonly() ? false : part() !== \"literal\"", "attr.data-rdx-date-field-segment": "part()", "attr.aria-disabled": "disabled() ? \"\" : undefined", "attr.data-disabled": "disabled() ? \"\" : undefined", "attr.data-invalid": "isInvalid() ? \"\" : undefined", "attr.aria-invalid": "isInvalid() ? true : undefined" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTimeFieldInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTimeFieldInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxTimeFieldInput]',
@@ -98,7 +104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         '(focusout)': 'part() !== "literal" && onFocusOut()'
                     }
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { part: [{ type: i0.Input, args: [{ isSignal: true, alias: "part", required: false }] }] } });
 
 function convertValue(value, date = today(getLocalTimeZone())) {
     if (value && 'day' in value) {
@@ -108,116 +114,119 @@ function convertValue(value, date = today(getLocalTimeZone())) {
 }
 class RdxTimeFieldRootDirective {
     constructor() {
-        this.elementRef = inject((ElementRef));
         /**
          * The controlled checked state of the calendar.
          */
-        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
         /**
          * The hour cycle to use for formatting times. Defaults to the locale preference
          */
-        this.hourCycle = input(...(ngDevMode ? [undefined, { debugName: "hourCycle" }] : []));
+        this.hourCycle = input(...(ngDevMode ? [undefined, { debugName: "hourCycle" }] : /* istanbul ignore next */ []));
         /**
          * The granularity to use for formatting the field. Defaults to 'day' if a CalendarDate is provided, otherwise defaults to 'minute'.
          * The field will render segments for each part of the date up to and including the specified granularity.
          */
-        this.granularity = input(...(ngDevMode ? [undefined, { debugName: "granularity" }] : []));
+        this.granularity = input(...(ngDevMode ? [undefined, { debugName: "granularity" }] : /* istanbul ignore next */ []));
         /**
          * The locale to use for formatting dates.
          */
-        this.locale = input('en', ...(ngDevMode ? [{ debugName: "locale" }] : []));
-        this.dir = input('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : []));
+        this.locale = input('en', ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+        this.dir = input('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
         /**
          * The minimum valid date that can be entered.
          */
-        this.minValue = input(...(ngDevMode ? [undefined, { debugName: "minValue" }] : []));
+        this.minValue = input(...(ngDevMode ? [undefined, { debugName: "minValue" }] : /* istanbul ignore next */ []));
         /**
          * The maximum valid date that can be entered.
          */
-        this.maxValue = input(...(ngDevMode ? [undefined, { debugName: "maxValue" }] : []));
+        this.maxValue = input(...(ngDevMode ? [undefined, { debugName: "maxValue" }] : /* istanbul ignore next */ []));
         /**
          * Whether or not to hide the time zone segment of the field.
          */
-        this.hideTimeZone = input(false, ...(ngDevMode ? [{ debugName: "hideTimeZone", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.hideTimeZone = input(false, { ...(ngDevMode ? { debugName: "hideTimeZone" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Whether or not the field is readonly.
          */
-        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * The stepping interval for the time fields. Defaults to 1
          */
-        this.step = input(...(ngDevMode ? [undefined, { debugName: "step" }] : []));
-        this.step$ = computed(() => normalizeDateStep(this.step()), ...(ngDevMode ? [{ debugName: "step$" }] : []));
+        this.step = input(...(ngDevMode ? [undefined, { debugName: "step" }] : /* istanbul ignore next */ []));
+        this.step$ = computed(() => normalizeDateStep(this.step()), ...(ngDevMode ? [{ debugName: "step$" }] : /* istanbul ignore next */ []));
+        /**
+         * Locale- and hour-cycle-aware formatter. Recomputed whenever `locale` or
+         * `hourCycle` change so segments always render with the current settings.
+         * @ignore
+         */
+        this.formatter = computed(() => createFormatter(this.locale(), {
+            hourCycle: normalizeHourCycle(this.hourCycle())
+        }), ...(ngDevMode ? [{ debugName: "formatter" }] : /* istanbul ignore next */ []));
         /**
          * @ignore
          */
         this.defaultDate = computed(() => getDefaultTime({
             defaultPlaceholder: undefined,
             defaultValue: this.value()
-        }), ...(ngDevMode ? [{ debugName: "defaultDate" }] : []));
+        }), ...(ngDevMode ? [{ debugName: "defaultDate" }] : /* istanbul ignore next */ []));
         /**
          * The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view
          */
-        this.placeholder = model(this.defaultDate().copy(), ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+        this.placeholder = model(this.defaultDate().copy(), ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
         // Internal state
         /**
+         * Segment input parts, collected from the projected content in DOM order. This
+         * stays in sync with `segmentContents()` (granularity / locale / value changes
+         * add or remove segments) instead of being captured once after view init.
          * @ignore
          */
-        this.segmentElements = signal(new Set(), ...(ngDevMode ? [{ debugName: "segmentElements" }] : []));
+        this.segmentInputs = contentChildren(RdxTimeFieldInputDirective, ...(ngDevMode ? [{ debugName: "segmentInputs" }] : /* istanbul ignore next */ []));
         /**
+         * The focusable (non-literal) segment elements, in DOM order.
          * @ignore
          */
-        this.currentFocusedElement = signal(null, ...(ngDevMode ? [{ debugName: "currentFocusedElement" }] : []));
+        this.segmentElements = computed(() => this.segmentInputs()
+            .filter((seg) => seg.part() !== 'literal')
+            .map((seg) => seg.element), ...(ngDevMode ? [{ debugName: "segmentElements" }] : /* istanbul ignore next */ []));
         /**
          * @ignore
          */
-        this.segmentValues = signal({
-            hour: null,
-            minute: null,
-            second: null,
-            dayPeriod: null
-        }, ...(ngDevMode ? [{ debugName: "segmentValues" }] : []));
+        this.currentFocusedElement = signal(null, ...(ngDevMode ? [{ debugName: "currentFocusedElement" }] : /* istanbul ignore next */ []));
         /**
          * @ignore
          */
-        this.inferredGranularity = computed(() => {
-            if (this.granularity())
-                return this.granularity();
-            return 'minute';
-        }, ...(ngDevMode ? [{ debugName: "inferredGranularity" }] : []));
-        this.convertedMinValue = computed(() => (this.minValue() ? convertValue(this.minValue()) : undefined), ...(ngDevMode ? [{ debugName: "convertedMinValue" }] : []));
-        this.convertedMaxValue = computed(() => (this.maxValue() ? convertValue(this.maxValue()) : undefined), ...(ngDevMode ? [{ debugName: "convertedMaxValue" }] : []));
-        this.convertedModelValue = linkedSignal(...(ngDevMode ? [{ debugName: "convertedModelValue", source: () => {
-                    if (isNullish(this.value()))
-                        return this.value();
-                    return convertValue(this.value());
-                },
-                computation: (value) => {
-                    return value;
-                } }] : [{
-                source: () => {
-                    if (isNullish(this.value()))
-                        return this.value();
-                    return convertValue(this.value());
-                },
-                computation: (value) => {
-                    return value;
-                }
-            }]));
-        this.convertedPlaceholder = linkedSignal(...(ngDevMode ? [{ debugName: "convertedPlaceholder", source: () => {
-                    return convertValue(this.placeholder());
-                },
-                computation: (value) => {
-                    return value;
-                } }] : [{
-                source: () => {
-                    return convertValue(this.placeholder());
-                },
-                computation: (value) => {
-                    return value;
-                }
-            }]));
+        this.inferredGranularity = computed(() => this.granularity() ?? 'minute', ...(ngDevMode ? [{ debugName: "inferredGranularity" }] : /* istanbul ignore next */ []));
+        this.convertedMinValue = computed(() => (this.minValue() ? convertValue(this.minValue()) : undefined), ...(ngDevMode ? [{ debugName: "convertedMinValue" }] : /* istanbul ignore next */ []));
+        this.convertedMaxValue = computed(() => (this.maxValue() ? convertValue(this.maxValue()) : undefined), ...(ngDevMode ? [{ debugName: "convertedMaxValue" }] : /* istanbul ignore next */ []));
+        this.convertedModelValue = linkedSignal({ ...(ngDevMode ? { debugName: "convertedModelValue" } : /* istanbul ignore next */ {}), source: () => {
+                if (isNullish(this.value()))
+                    return this.value();
+                return convertValue(this.value());
+            },
+            computation: (value) => {
+                return value;
+            } });
+        this.convertedPlaceholder = linkedSignal({ ...(ngDevMode ? { debugName: "convertedPlaceholder" } : /* istanbul ignore next */ {}), source: () => {
+                return convertValue(this.placeholder());
+            },
+            computation: (value) => {
+                return value;
+            } });
+        /**
+         * The per-segment values. Writable so segment editing (via `useDateField`) can
+         * update individual parts, but re-synced from the model whenever the value,
+         * granularity or formatter change — so a controlled `value` set after init is
+         * reflected, and an empty field re-initializes when granularity changes.
+         * @ignore
+         */
+        this.segmentValues = linkedSignal({ ...(ngDevMode ? { debugName: "segmentValues" } : /* istanbul ignore next */ {}), source: () => ({
+                value: this.convertedModelValue(),
+                granularity: this.inferredGranularity(),
+                formatter: this.formatter()
+            }),
+            computation: ({ value, granularity, formatter }) => value
+                ? { ...syncSegmentValues({ value: value, formatter }) }
+                : { ...initializeSegmentValues(granularity) } });
         /**
          * @ignore
          */
@@ -231,51 +240,52 @@ class RdxTimeFieldRootDirective {
                 isBefore(this.convertedMaxValue(), this.convertedModelValue()))
                 return true;
             return false;
-        }, ...(ngDevMode ? [{ debugName: "isInvalid" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
         /**
          * @ignore
          */
         this.allSegmentContent = computed(() => createContent({
             granularity: this.inferredGranularity(),
             dateRef: this.convertedPlaceholder(),
-            formatter: this.formatter,
+            formatter: this.formatter(),
             hideTimeZone: this.hideTimeZone(),
             hourCycle: this.hourCycle(),
             segmentValues: this.segmentValues(),
             locale: this.locale,
             isTimeValue: true
-        }), ...(ngDevMode ? [{ debugName: "allSegmentContent" }] : []));
+        }), ...(ngDevMode ? [{ debugName: "allSegmentContent" }] : /* istanbul ignore next */ []));
         /**
          * An array of segments that should be readonly, which prevent user input on them.
          */
-        this.segmentContents = computed(() => this.allSegmentContent().arr, ...(ngDevMode ? [{ debugName: "segmentContents" }] : []));
+        this.segmentContents = computed(() => this.allSegmentContent().arr, ...(ngDevMode ? [{ debugName: "segmentContents" }] : /* istanbul ignore next */ []));
         /**
          * @ignore
          */
-        this.currentSegmentIndex = computed(() => Array.from(this.segmentElements()).findIndex((el) => el.getAttribute('data-rdx-date-field-segment') ===
-            this.currentFocusedElement()?.getAttribute('data-rdx-date-field-segment')), ...(ngDevMode ? [{ debugName: "currentSegmentIndex" }] : []));
+        this.currentSegmentIndex = computed(() => this.segmentElements().findIndex((el) => el === this.currentFocusedElement()), ...(ngDevMode ? [{ debugName: "currentSegmentIndex" }] : /* istanbul ignore next */ []));
         /**
          * @ignore
          */
         this.prevFocusableSegment = computed(() => {
             const sign = this.dir() === 'rtl' ? -1 : 1;
-            const prevCondition = sign > 0 ? this.currentSegmentIndex() < 0 : this.currentSegmentIndex() > this.segmentElements().size - 1;
+            const elements = this.segmentElements();
+            const index = this.currentSegmentIndex();
+            const prevCondition = sign > 0 ? index < 0 : index > elements.length - 1;
             if (prevCondition)
                 return null;
-            const segmentToFocus = Array.from(this.segmentElements())[this.currentSegmentIndex() - sign];
-            return segmentToFocus;
-        }, ...(ngDevMode ? [{ debugName: "prevFocusableSegment" }] : []));
+            return elements[index - sign];
+        }, ...(ngDevMode ? [{ debugName: "prevFocusableSegment" }] : /* istanbul ignore next */ []));
         /**
          * @ignore
          */
         this.nextFocusableSegment = computed(() => {
             const sign = this.dir() === 'rtl' ? -1 : 1;
-            const nextCondition = sign < 0 ? this.currentSegmentIndex() < 0 : this.currentSegmentIndex() > this.segmentElements().size - 1;
+            const elements = this.segmentElements();
+            const index = this.currentSegmentIndex();
+            const nextCondition = sign < 0 ? index < 0 : index > elements.length - 1;
             if (nextCondition)
                 return null;
-            const segmentToFocus = Array.from(this.segmentElements())[this.currentSegmentIndex() + sign];
-            return segmentToFocus;
-        }, ...(ngDevMode ? [{ debugName: "nextFocusableSegment" }] : []));
+            return elements[index + sign];
+        }, ...(ngDevMode ? [{ debugName: "nextFocusableSegment" }] : /* istanbul ignore next */ []));
         /**
          * @ignore
          */
@@ -291,30 +301,14 @@ class RdxTimeFieldRootDirective {
                 this.placeholder.set(value.copy());
         });
     }
-    ngOnInit() {
-        const defDate = getDefaultTime({
-            defaultPlaceholder: undefined,
-            defaultValue: this.value()
-        });
-        this.placeholder.set(defDate.copy());
-        this.formatter = createFormatter(this.locale(), {
-            hourCycle: normalizeHourCycle(this.hourCycle())
-        });
-        const initialSegments = initializeSegmentValues(this.inferredGranularity());
-        this.segmentValues.set(this.value()
-            ? { ...syncSegmentValues({ value: this.value(), formatter: this.formatter }) }
-            : { ...initialSegments });
-    }
-    ngAfterViewInit() {
-        getSegmentElements(this.elementRef.nativeElement).forEach((item) => this.segmentElements().add(item));
-    }
     /**
      * @ignore
      */
     onKeydown(event) {
-        if (!isSegmentNavigationKey(event.key))
+        const keyEvent = event;
+        if (!isSegmentNavigationKey(keyEvent.key))
             return;
-        const code = event.code;
+        const code = keyEvent.code;
         if (code === ARROW_LEFT) {
             this.prevFocusableSegment()?.focus();
         }
@@ -328,10 +322,10 @@ class RdxTimeFieldRootDirective {
     setFocusedElement(el) {
         this.currentFocusedElement.set(el);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTimeFieldRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxTimeFieldRootDirective, isStandalone: true, selector: "[rdxTimeFieldRoot]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, hourCycle: { classPropertyName: "hourCycle", publicName: "hourCycle", isSignal: true, isRequired: false, transformFunction: null }, granularity: { classPropertyName: "granularity", publicName: "granularity", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, hideTimeZone: { classPropertyName: "hideTimeZone", publicName: "hideTimeZone", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", placeholder: "placeholderChange" }, host: { attributes: { "role": "group" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.aria-disabled": "disabled() ? \"\" : undefined", "attr.data-disabled": "disabled() ? \"\" : undefined", "attr.data-readonly": "readonly() ? \"\" : undefined", "attr.data-invalid": "isInvalid() ? \"\" : undefined", "attr.dir": "dir()" } }, providers: [provideToken(TIME_FIELDS_ROOT_CONTEXT, RdxTimeFieldRootDirective)], exportAs: ["rdxTimeFieldRoot"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTimeFieldRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.9", type: RdxTimeFieldRootDirective, isStandalone: true, selector: "[rdxTimeFieldRoot]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, hourCycle: { classPropertyName: "hourCycle", publicName: "hourCycle", isSignal: true, isRequired: false, transformFunction: null }, granularity: { classPropertyName: "granularity", publicName: "granularity", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, hideTimeZone: { classPropertyName: "hideTimeZone", publicName: "hideTimeZone", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", placeholder: "placeholderChange" }, host: { attributes: { "role": "group" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.aria-disabled": "disabled() ? \"\" : undefined", "attr.data-disabled": "disabled() ? \"\" : undefined", "attr.data-readonly": "readonly() ? \"\" : undefined", "attr.data-invalid": "isInvalid() ? \"\" : undefined", "attr.dir": "dir()" } }, providers: [provideToken(TIME_FIELDS_ROOT_CONTEXT, RdxTimeFieldRootDirective)], queries: [{ propertyName: "segmentInputs", predicate: RdxTimeFieldInputDirective, isSignal: true }], exportAs: ["rdxTimeFieldRoot"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTimeFieldRootDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTimeFieldRootDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxTimeFieldRoot]',
@@ -347,15 +341,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         '(keydown)': 'onKeydown($event)'
                     }
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], hourCycle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourCycle", required: false }] }], granularity: [{ type: i0.Input, args: [{ isSignal: true, alias: "granularity", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], hideTimeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideTimeZone", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }, { type: i0.Output, args: ["placeholderChange"] }], segmentInputs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => RdxTimeFieldInputDirective), { isSignal: true }] }] } });
 
 const _imports = [RdxTimeFieldRootDirective, RdxTimeFieldInputDirective];
 class RdxTimeFieldModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTimeFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: RdxTimeFieldModule, imports: [RdxTimeFieldRootDirective, RdxTimeFieldInputDirective], exports: [RdxTimeFieldRootDirective, RdxTimeFieldInputDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTimeFieldModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTimeFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxTimeFieldModule, imports: [RdxTimeFieldRootDirective, RdxTimeFieldInputDirective], exports: [RdxTimeFieldRootDirective, RdxTimeFieldInputDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTimeFieldModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTimeFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTimeFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [..._imports],