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

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, input, computed, signal, effect, Directive, model, booleanAttribute, NgModule } from '@angular/core';
-import { useDateField, normalizeDateStep, getDefaultDate, hasTime, isBefore, createContent, watch, isNullish, createFormatter, normalizeHourCycle, initializeSegmentValues, syncSegmentValues, getSegmentElements, ARROW_LEFT, ARROW_RIGHT, isSegmentNavigationKey, provideToken } from '@radix-ng/primitives/core';
+import { InjectionToken, inject, ElementRef, input, computed, signal, effect, Directive, model, booleanAttribute, contentChildren, linkedSignal, NgModule } from '@angular/core';
+import { useDateField, normalizeDateStep, createFormatter, normalizeHourCycle, getDefaultDate, hasTime, syncSegmentValues, initializeSegmentValues, isBefore, createContent, watch, isNullish, ARROW_LEFT, ARROW_RIGHT, isSegmentNavigationKey, provideToken } from '@radix-ng/primitives/core';
 
 const DATE_FIELDS_ROOT_CONTEXT = new InjectionToken('DATE_FIELDS_ROOT_CONTEXT');
 function injectDateFieldsRootContext() {
@@ -10,32 +10,38 @@ function injectDateFieldsRootContext() {
 class RdxDateFieldInputDirective {
     constructor() {
         this.elementRef = inject(ElementRef);
+        /**
+         * The host element of this segment. Consumed by the root to collect focusable
+         * segments in DOM order.
+         * @ignore
+         */
+        this.element = this.elementRef.nativeElement;
         this.rootContext = injectDateFieldsRootContext();
         /**
          * The part of the date to render
          * `'day' | 'month' | 'year' | '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,
@@ -43,7 +49,7 @@ class RdxDateFieldInputDirective {
                 placeholder: this.rootContext.placeholder,
                 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,
@@ -51,8 +57,8 @@ class RdxDateFieldInputDirective {
                 modelValue: this.rootContext.value,
                 focusNext: this.rootContext.focusNext
             });
-        }, ...(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;
@@ -77,10 +83,10 @@ class RdxDateFieldInputDirective {
     onFocusOut() {
         this.hasLeftFocus.set(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDateFieldInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxDateFieldInputDirective, isStandalone: true, selector: "[rdxDateFieldInput]", 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: RdxDateFieldInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxDateFieldInputDirective, isStandalone: true, selector: "[rdxDateFieldInput]", 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: RdxDateFieldInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDateFieldInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxDateFieldInput]',
@@ -97,55 +103,62 @@ 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 }] }] } });
 
 class RdxDateFieldRootDirective {
     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 */ []));
         /**
          * A callback fired when the date field's value is invalid.
          */
-        this.isDateUnavailable = input(undefined, ...(ngDevMode ? [{ debugName: "isDateUnavailable" }] : []));
+        this.isDateUnavailable = input(undefined, ...(ngDevMode ? [{ debugName: "isDateUnavailable" }] : /* 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
          */
@@ -154,32 +167,30 @@ class RdxDateFieldRootDirective {
             granularity: this.granularity(),
             defaultValue: this.value(),
             locale: this.locale()
-        }), ...(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(RdxDateFieldInputDirective, ...(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({
-            year: null,
-            month: null,
-            day: null,
-            hour: null,
-            minute: null,
-            second: null,
-            dayPeriod: null
-        }, ...(ngDevMode ? [{ debugName: "segmentValues" }] : []));
+        this.currentFocusedElement = signal(null, ...(ngDevMode ? [{ debugName: "currentFocusedElement" }] : /* istanbul ignore next */ []));
         /**
          * @ignore
          */
@@ -188,7 +199,20 @@ class RdxDateFieldRootDirective {
             if (this.granularity())
                 return placeholder && !hasTime(placeholder) ? 'day' : this.granularity();
             return placeholder && hasTime(placeholder) ? 'minute' : 'day';
-        }, ...(ngDevMode ? [{ debugName: "inferredGranularity" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "inferredGranularity" }] : /* istanbul ignore next */ []));
+        /**
+         * 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.value(),
+                granularity: this.inferredGranularity(),
+                formatter: this.formatter()
+            }),
+            computation: ({ value, granularity, formatter }) => value ? { ...syncSegmentValues({ value, formatter }) } : { ...initializeSegmentValues(granularity) } });
         /**
          * @ignore
          */
@@ -202,50 +226,51 @@ class RdxDateFieldRootDirective {
             if (this.maxValue() && isBefore(this.maxValue(), this.value()))
                 return true;
             return false;
-        }, ...(ngDevMode ? [{ debugName: "isInvalid" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
         /**
          * @ignore
          */
         this.allSegmentContent = computed(() => createContent({
             granularity: this.inferredGranularity(),
             dateRef: this.placeholder(),
-            formatter: this.formatter,
+            formatter: this.formatter(),
             hideTimeZone: this.hideTimeZone(),
             hourCycle: this.hourCycle(),
             segmentValues: this.segmentValues(),
             locale: this.locale
-        }), ...(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
          */
@@ -258,32 +283,14 @@ class RdxDateFieldRootDirective {
             }
         });
     }
-    ngOnInit() {
-        const defDate = getDefaultDate({
-            defaultPlaceholder: undefined,
-            granularity: this.granularity(),
-            defaultValue: this.value(),
-            locale: this.locale()
-        });
-        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) {
-        const code = event.code;
+        const keyEvent = event;
+        const code = keyEvent.code;
         if ([ARROW_LEFT, ARROW_RIGHT].includes(code)) {
-            if (!isSegmentNavigationKey(event.key))
+            if (!isSegmentNavigationKey(keyEvent.key))
                 return;
             if (code === ARROW_LEFT) {
                 this.prevFocusableSegment()?.focus();
@@ -299,10 +306,10 @@ class RdxDateFieldRootDirective {
     setFocusedElement(el) {
         this.currentFocusedElement.set(el);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDateFieldRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxDateFieldRootDirective, isStandalone: true, selector: "[rdxDateFieldRoot]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, isDateUnavailable: { classPropertyName: "isDateUnavailable", publicName: "isDateUnavailable", 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(DATE_FIELDS_ROOT_CONTEXT, RdxDateFieldRootDirective)], exportAs: ["rdxDateFieldRoot"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDateFieldRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.9", type: RdxDateFieldRootDirective, isStandalone: true, selector: "[rdxDateFieldRoot]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, isDateUnavailable: { classPropertyName: "isDateUnavailable", publicName: "isDateUnavailable", 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(DATE_FIELDS_ROOT_CONTEXT, RdxDateFieldRootDirective)], queries: [{ propertyName: "segmentInputs", predicate: RdxDateFieldInputDirective, isSignal: true }], exportAs: ["rdxDateFieldRoot"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDateFieldRootDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDateFieldRootDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxDateFieldRoot]',
@@ -318,15 +325,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"] }], isDateUnavailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDateUnavailable", required: false }] }], 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(() => RdxDateFieldInputDirective), { isSignal: true }] }] } });
 
 const _imports = [RdxDateFieldRootDirective, RdxDateFieldInputDirective];
 class RdxDateFieldModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDateFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: RdxDateFieldModule, imports: [RdxDateFieldRootDirective, RdxDateFieldInputDirective], exports: [RdxDateFieldRootDirective, RdxDateFieldInputDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDateFieldModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDateFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxDateFieldModule, imports: [RdxDateFieldRootDirective, RdxDateFieldInputDirective], exports: [RdxDateFieldRootDirective, RdxDateFieldInputDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDateFieldModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDateFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDateFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [..._imports],