@radix-ng/primitives 0.34.0 → 0.36.0

package/fesm2022/radix-ng-primitives-core.mjs

@@ -1,6 +1,6 @@
-import { NG_VALUE_ACCESSOR, NgControl, FormControlDirective, FormControlName, NgModel } from '@angular/forms';
 import * as i0 from '@angular/core';
-import { inject, ElementRef, NgZone, booleanAttribute, Input, Directive, APP_ID, Injectable, InjectionToken, effect, untracked } from '@angular/core';
+import { forwardRef, inject, ElementRef, NgZone, booleanAttribute, Input, Directive, APP_ID, Injectable, InjectionToken, computed, effect, untracked } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NgControl, FormControlDirective, FormControlName, NgModel } from '@angular/forms';
 import { DOCUMENT } from '@angular/common';
 import { Platform } from '@angular/cdk/platform';
 import { getLocalTimeZone, CalendarDateTime, ZonedDateTime, getDayOfWeek, DateFormatter, createCalendar, toCalendar, CalendarDate, startOfMonth, endOfMonth, today } from '@internationalized/date';
@@ -18,7 +18,7 @@ import { getLocalTimeZone, CalendarDateTime, ZonedDateTime, getDayOfWeek, DateFo
 function provideValueAccessor(type) {
     return {
         provide: NG_VALUE_ACCESSOR,
-        useExisting: type,
+        useExisting: forwardRef(() => type),
         multi: true
     };
 }
@@ -101,6 +101,76 @@ function getRequestAnimationFrame() {
 // Get the requestAnimationFrame function or its polyfill.
 const reqAnimationFrame = getRequestAnimationFrame();
 
+/**
+ * The `clamp` function restricts a number within a specified range by returning the value itself if it
+ * falls within the range, or the closest boundary value if it exceeds the range.
+ * @param {number} value - The `value` parameter represents the number that you want to clamp within
+ * the specified range defined by `min` and `max` values.
+ * @param {number} min - If the `value` parameter is less than the `min` value, the
+ * function will return the `min` value.
+ * @param {number} max - If the `value` parameter is greater than the `max` value,
+ * the function will return `max`.
+ * @returns The `clamp` function returns the value of `value` constrained within the range defined by
+ * `min` and `max`.
+ */
+function clamp(value, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY) {
+    return Math.min(max, Math.max(min, value));
+}
+/**
+ * The function `roundToStepPrecision` rounds a number to a specified precision step.
+ * @param {number} value - The `value` parameter is the number that you want to round to a specific
+ * precision based on the `step` parameter.
+ * @param {number} step - The `step` parameter in the `roundToStepPrecision` function represents the
+ * interval at which you want to round the `value`. For example, if `step` is 0.5, the `value` will be
+ * rounded to the nearest half.
+ * @returns the `roundedValue` after rounding it to the precision specified by the `step`.
+ */
+function roundToStepPrecision(value, step) {
+    let roundedValue = value;
+    const stepString = step.toString();
+    const pointIndex = stepString.indexOf('.');
+    const precision = pointIndex >= 0 ? stepString.length - pointIndex : 0;
+    if (precision > 0) {
+        const pow = 10 ** precision;
+        roundedValue = Math.round(roundedValue * pow) / pow;
+    }
+    return roundedValue;
+}
+/**
+ * The function `snapValueToStep` snaps a given value to the nearest step within a specified range.
+ * @param {number} value - The `value` parameter represents the number that you want to snap to the
+ * nearest step value.
+ * @param {number | undefined} min - The `min` parameter represents the minimum value that the `value`
+ * should be snapped to. If `value` is less than `min`, it will be snapped to `min`. If `min` is not
+ * provided (undefined), then the snapping will not consider a minimum value.
+ * @param {number | undefined} max - The `max` parameter represents the maximum value that the `value`
+ * should be snapped to. It ensures that the snapped value does not exceed this maximum value.
+ * @param {number} step - The `step` parameter in the `snapValueToStep` function represents the
+ * interval at which the `value` should be snapped to. It determines the granularity of the snapping
+ * operation. For example, if `step` is 5, the `value` will be snapped to the nearest multiple of
+ * @returns a number that has been snapped to the nearest step value within the specified range of minimum and maximum values.
+ */
+function snapValueToStep(value, min, max, step) {
+    min = Number(min);
+    max = Number(max);
+    const remainder = (value - (Number.isNaN(min) ? 0 : min)) % step;
+    let snappedValue = roundToStepPrecision(Math.abs(remainder) * 2 >= step
+        ? value + Math.sign(remainder) * (step - Math.abs(remainder))
+        : value - remainder, step);
+    if (!Number.isNaN(min)) {
+        if (snappedValue < min)
+            snappedValue = min;
+        else if (!Number.isNaN(max) && snappedValue > max)
+            snappedValue = min + Math.floor(roundToStepPrecision((max - min) / step, step)) * step;
+    }
+    else if (!Number.isNaN(max) && snappedValue > max) {
+        snappedValue = Math.floor(roundToStepPrecision(max / step, step)) * step;
+    }
+    // correct floating point behavior by rounding to step precision
+    snappedValue = roundToStepPrecision(snappedValue, step);
+    return snappedValue;
+}
+
 function injectDocument() {
     return inject(DOCUMENT);
 }
@@ -124,6 +194,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 }]
         }] });
 
+function getActiveElement() {
+    let activeElement = document.activeElement;
+    if (activeElement == null) {
+        return null;
+    }
+    while (activeElement != null &&
+        activeElement.shadowRoot != null &&
+        activeElement.shadowRoot.activeElement != null) {
+        activeElement = activeElement.shadowRoot.activeElement;
+    }
+    return activeElement;
+}
+
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -239,6 +322,33 @@ const j = 'j';
 const k = 'k';
 const SPACE_CODE = 'Space';
 
+/**
+ * Creates an Angular provider that binds the given token to the existing instance
+ * of the specified class. This is especially useful when you want multiple
+ * tokens (or interfaces) to resolve to the same directive/component instance.
+ *
+ * @template T - The type associated with the injection token.
+ * @param token - The InjectionToken or abstract type you want to provide.
+ * @param type  - The class type whose existing instance will be used for this token.
+ * @returns A Provider configuration object for Angular's DI system.
+ *
+ * @example
+ *
+ * @Directive({
+ *   providers: [
+ *     provideToken(RdxToggleGroupToken, RdxToggleGroupDirective),
+ *     provideValueAccessor(RdxToggleGroupDirective)
+ *   ]
+ * })
+ * export class RdxToggleGroupDirective {}
+ */
+function provideToken(token, type) {
+    return {
+        provide: token,
+        useExisting: forwardRef(() => type)
+    };
+}
+
 const WINDOW = new InjectionToken('An abstraction over global window object', {
     factory: () => {
         const { defaultView } = injectDocument();
@@ -606,6 +716,32 @@ function createFormatter(initialLocale) {
     };
 }
 
+/*
+ * Implementation ported from https://github.com/melt-ui/melt-ui/blob/develop/src/lib/builders/date-field/_internal/helpers.ts
+ */
+const DATE_SEGMENT_PARTS = ['day', 'month', 'year'];
+const TIME_SEGMENT_PARTS = ['hour', 'minute', 'second', 'dayPeriod'];
+const NON_EDITABLE_SEGMENT_PARTS = ['literal', 'timeZoneName'];
+const EDITABLE_SEGMENT_PARTS = [...DATE_SEGMENT_PARTS, ...TIME_SEGMENT_PARTS];
+const EDITABLE_TIME_SEGMENT_PARTS = [...TIME_SEGMENT_PARTS];
+const ALL_SEGMENT_PARTS = [
+    ...EDITABLE_SEGMENT_PARTS,
+    ...NON_EDITABLE_SEGMENT_PARTS
+];
+const ALL_EXCEPT_LITERAL_PARTS = ALL_SEGMENT_PARTS.filter((part) => part !== 'literal');
+function isDateSegmentPart(part) {
+    return DATE_SEGMENT_PARTS.includes(part);
+}
+function isTimeSegmentPart(part) {
+    return TIME_SEGMENT_PARTS.includes(part);
+}
+function isSegmentPart(part) {
+    return EDITABLE_SEGMENT_PARTS.includes(part);
+}
+function isAnySegmentPart(part) {
+    return ALL_SEGMENT_PARTS.includes(part);
+}
+
 /*
  * Implementation ported from from from https://github.com/melt-ui/melt-ui/blob/develop/src/lib/internal/helpers/date/placeholders.ts
  */
@@ -739,10 +875,37 @@ function getLocaleLanguage(locale) {
     return locale.split('-')[0];
 }
 
-/*
- * Implementation ported from https://github.com/melt-ui/melt-ui/blob/develop/src/lib/internal/helpers/date/types.ts
- */
-
+function getOptsByGranularity(granularity, hourCycle, isTimeValue = false) {
+    const opts = {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        timeZoneName: 'short',
+        hourCycle: hourCycle === 24 ? 'h23' : undefined,
+        hour12: hourCycle === 24 ? false : undefined
+    };
+    if (isTimeValue) {
+        delete opts.year;
+        delete opts.month;
+        delete opts.day;
+    }
+    if (granularity === 'day') {
+        delete opts.second;
+        delete opts.hour;
+        delete opts.minute;
+        delete opts.timeZoneName;
+    }
+    if (granularity === 'hour') {
+        delete opts.minute;
+        delete opts.second;
+    }
+    if (granularity === 'minute')
+        delete opts.second;
+    return opts;
+}
 function handleCalendarInitialFocus(calendar) {
     const selectedDay = calendar.querySelector('[data-selected]');
     if (selectedDay)
@@ -755,6 +918,932 @@ function handleCalendarInitialFocus(calendar) {
         return firstDay.focus();
 }
 
+const calendarDateTimeGranularities = ['hour', 'minute', 'second'];
+function syncTimeSegmentValues(props) {
+    return Object.fromEntries(TIME_SEGMENT_PARTS.map((part) => {
+        if (part === 'dayPeriod')
+            return [part, props.formatter.dayPeriod(toDate(props.value))];
+        return [part, props.value[part]];
+    }));
+}
+function initializeSegmentValues(granularity) {
+    const initialParts = EDITABLE_SEGMENT_PARTS.map((part) => {
+        if (part === 'dayPeriod')
+            return [part, 'AM'];
+        return [part, null];
+    }).filter(([key]) => {
+        if (key === 'literal' || key === null)
+            return false;
+        if (granularity === 'minute' && key === 'second')
+            return false;
+        if (granularity === 'hour' && (key === 'second' || key === 'minute'))
+            return false;
+        if (granularity === 'day')
+            return !calendarDateTimeGranularities.includes(key) && key !== 'dayPeriod';
+        else
+            return true;
+    });
+    return Object.fromEntries(initialParts);
+}
+function syncSegmentValues(props) {
+    const { formatter } = props;
+    const dateValues = DATE_SEGMENT_PARTS.map((part) => {
+        return [part, props.value[part]];
+    });
+    if ('hour' in props.value) {
+        const timeValues = syncTimeSegmentValues({ value: props.value, formatter });
+        return { ...Object.fromEntries(dateValues), ...timeValues };
+    }
+    return Object.fromEntries(dateValues);
+}
+function createContentObj(props) {
+    const { segmentValues, formatter, locale } = props;
+    function getPartContent(part) {
+        if ('hour' in segmentValues) {
+            const value = segmentValues[part];
+            if (value !== null) {
+                /**
+                 * Edge case for when the month field is filled and the day field snaps to the maximum value of the value of the placeholder month
+                 */
+                if (part === 'day' && segmentValues.month !== null) {
+                    return formatter.part(props.dateRef.set({ [part]: value, month: segmentValues.month }), part, {
+                        hourCycle: props.hourCycle === 24 ? 'h23' : undefined
+                    });
+                }
+                return formatter.part(props.dateRef.set({ [part]: value }), part, {
+                    hourCycle: props.hourCycle === 24 ? 'h23' : undefined
+                });
+            }
+            else {
+                return getPlaceholder(part, '', locale());
+            }
+        }
+        else {
+            if (isDateSegmentPart(part)) {
+                const value = segmentValues[part];
+                if (value !== null) {
+                    if (part === 'day' && segmentValues.month !== null)
+                        /**
+                         * As described above, same function
+                         */
+                        return formatter.part(props.dateRef.set({ [part]: value, month: segmentValues.month }), part);
+                    return formatter.part(props.dateRef.set({ [part]: value }), part);
+                }
+                else {
+                    return getPlaceholder(part, '', locale());
+                }
+            }
+            return '';
+        }
+    }
+    const content = Object.keys(segmentValues).reduce((obj, part) => {
+        if (!isSegmentPart(part))
+            return obj;
+        if ('hour' in segmentValues && part === 'dayPeriod') {
+            const value = segmentValues[part];
+            if (value !== null)
+                obj[part] = value;
+            else
+                obj[part] = getPlaceholder(part, 'AM', locale());
+        }
+        else {
+            obj[part] = getPartContent(part);
+        }
+        return obj;
+    }, {});
+    return content;
+}
+function createContentArr(props) {
+    const { granularity, formatter, contentObj, hideTimeZone, hourCycle, isTimeValue } = props;
+    const parts = formatter.toParts(props.dateRef, getOptsByGranularity(granularity, hourCycle, isTimeValue));
+    const segmentContentArr = parts
+        .map((part) => {
+        const defaultParts = ['literal', 'timeZoneName', null];
+        if (defaultParts.includes(part.type) || !isSegmentPart(part.type)) {
+            return {
+                part: part.type,
+                value: part.value
+            };
+        }
+        return {
+            part: part.type,
+            value: contentObj[part.type]
+        };
+    })
+        .filter((segment) => {
+        if (segment.part === null || segment.value === null)
+            return false;
+        if (segment.part === 'timeZoneName' && (!isZonedDateTime(props.dateRef) || hideTimeZone))
+            return false;
+        return true;
+    });
+    return segmentContentArr;
+}
+function createContent(props) {
+    const contentObj = createContentObj(props);
+    const contentArr = createContentArr({
+        contentObj,
+        ...props
+    });
+    return {
+        obj: contentObj,
+        arr: contentArr
+    };
+}
+
+function isSegmentNavigationKey(key) {
+    if (key === ARROW_RIGHT || key === ARROW_LEFT)
+        return true;
+    return false;
+}
+function isNumberString(value) {
+    if (Number.isNaN(Number.parseInt(value)))
+        return false;
+    return true;
+}
+function isAcceptableSegmentKey(key) {
+    const acceptableSegmentKeys = [
+        ENTER,
+        ARROW_UP,
+        ARROW_DOWN,
+        ARROW_LEFT,
+        ARROW_RIGHT,
+        BACKSPACE,
+        SPACE,
+        'a',
+        'A',
+        'p',
+        'P'
+    ];
+    if (acceptableSegmentKeys.includes(key))
+        return true;
+    if (isNumberString(key))
+        return true;
+    return false;
+}
+function getSegmentElements(parentElement) {
+    return Array.from(parentElement.querySelectorAll('[data-rdx-date-field-segment]')).filter((item) => item.getAttribute('data-rdx-date-field-segment') !== 'literal');
+}
+
+/*
+ * Implementation ported from https://github.com/melt-ui/melt-ui/blob/develop/src/lib/internal/helpers/date/types.ts
+ */
+
+// https://github.com/unovue/reka-ui/blob/v2/packages/core/src/shared/date/useDateField.ts
+function commonSegmentAttrs(props) {
+    return {
+        role: 'spinbutton',
+        contenteditable: true,
+        tabindex: props.disabled ? undefined : 0,
+        spellcheck: false,
+        inputmode: 'numeric',
+        autocorrect: 'off',
+        enterkeyhint: 'next',
+        style: 'caret-color: transparent;'
+    };
+}
+function daySegmentAttrs(props) {
+    const { segmentValues, placeholder } = props;
+    const isEmpty = segmentValues.day === null;
+    const date = segmentValues.day ? placeholder.set({ day: segmentValues.day }) : placeholder;
+    const valueNow = date.day;
+    const valueMin = 1;
+    const valueMax = getDaysInMonth(date);
+    const valueText = isEmpty ? 'Empty' : `${valueNow}`;
+    return {
+        ...commonSegmentAttrs(props),
+        'aria-label': 'day,',
+        'aria-valuemin': valueMin,
+        'aria-valuemax': valueMax,
+        'aria-valuenow': valueNow,
+        'aria-valuetext': valueText,
+        'data-placeholder': isEmpty ? '' : undefined
+    };
+}
+function monthSegmentAttrs(props) {
+    const { segmentValues, placeholder, formatter } = props;
+    const isEmpty = segmentValues.month === null;
+    const date = segmentValues.month ? placeholder.set({ month: segmentValues.month }) : placeholder;
+    const valueNow = date.month;
+    const valueMin = 1;
+    const valueMax = 12;
+    const valueText = isEmpty ? 'Empty' : `${valueNow} - ${formatter.fullMonth(toDate(date))}`;
+    return {
+        ...commonSegmentAttrs(props),
+        'aria-label': 'month, ',
+        contenteditable: true,
+        'aria-valuemin': valueMin,
+        'aria-valuemax': valueMax,
+        'aria-valuenow': valueNow,
+        'aria-valuetext': valueText,
+        'data-placeholder': isEmpty ? '' : undefined
+    };
+}
+function yearSegmentAttrs(props) {
+    const { segmentValues, placeholder } = props;
+    const isEmpty = segmentValues.year === null;
+    const date = segmentValues.year ? placeholder.set({ year: segmentValues.year }) : placeholder;
+    const valueMin = 1;
+    const valueMax = 9999;
+    const valueNow = date.year;
+    const valueText = isEmpty ? 'Empty' : `${valueNow}`;
+    return {
+        ...commonSegmentAttrs(props),
+        'aria-label': 'year, ',
+        'aria-valuemin': valueMin,
+        'aria-valuemax': valueMax,
+        'aria-valuenow': valueNow,
+        'aria-valuetext': valueText,
+        'data-placeholder': isEmpty ? '' : undefined
+    };
+}
+function hourSegmentAttrs(props) {
+    const { segmentValues, hourCycle, placeholder } = props;
+    if (!('hour' in segmentValues) || !('hour' in placeholder))
+        return {};
+    const isEmpty = segmentValues.hour === null;
+    const date = segmentValues.hour ? placeholder.set({ hour: segmentValues.hour }) : placeholder;
+    const valueMin = hourCycle === 12 ? 1 : 0;
+    const valueMax = hourCycle === 12 ? 12 : 23;
+    const valueNow = date.hour;
+    const valueText = isEmpty ? 'Empty' : `${valueNow} ${segmentValues.dayPeriod ?? ''}`;
+    return {
+        ...commonSegmentAttrs(props),
+        'aria-label': 'hour, ',
+        'aria-valuemin': valueMin,
+        'aria-valuemax': valueMax,
+        'aria-valuenow': valueNow,
+        'aria-valuetext': valueText,
+        'data-placeholder': isEmpty ? '' : undefined
+    };
+}
+function minuteSegmentAttrs(props) {
+    const { segmentValues, placeholder } = props;
+    if (!('minute' in segmentValues) || !('minute' in placeholder))
+        return {};
+    const isEmpty = segmentValues.minute === null;
+    const date = segmentValues.minute ? placeholder.set({ minute: segmentValues.minute }) : placeholder;
+    const valueNow = date.minute;
+    const valueMin = 0;
+    const valueMax = 59;
+    const valueText = isEmpty ? 'Empty' : `${valueNow}`;
+    return {
+        ...commonSegmentAttrs(props),
+        'aria-label': 'minute, ',
+        'aria-valuemin': valueMin,
+        'aria-valuemax': valueMax,
+        'aria-valuenow': valueNow,
+        'aria-valuetext': valueText,
+        'data-placeholder': isEmpty ? '' : undefined
+    };
+}
+function secondSegmentAttrs(props) {
+    const { segmentValues, placeholder } = props;
+    if (!('second' in segmentValues) || !('second' in placeholder))
+        return {};
+    const isEmpty = segmentValues.second === null;
+    const date = segmentValues.second ? placeholder.set({ second: segmentValues.second }) : placeholder;
+    const valueNow = date.second;
+    const valueMin = 0;
+    const valueMax = 59;
+    const valueText = isEmpty ? 'Empty' : `${valueNow}`;
+    return {
+        ...commonSegmentAttrs(props),
+        'aria-label': 'second, ',
+        'aria-valuemin': valueMin,
+        'aria-valuemax': valueMax,
+        'aria-valuenow': valueNow,
+        'aria-valuetext': valueText,
+        'data-placeholder': isEmpty ? '' : undefined
+    };
+}
+function dayPeriodSegmentAttrs(props) {
+    const { segmentValues } = props;
+    if (!('dayPeriod' in segmentValues))
+        return {};
+    const valueMin = 0;
+    const valueMax = 12;
+    const valueNow = segmentValues.hour ? (segmentValues.hour > 12 ? segmentValues.hour - 12 : segmentValues.hour) : 0;
+    const valueText = segmentValues.dayPeriod ?? 'AM';
+    return {
+        ...commonSegmentAttrs(props),
+        inputmode: 'text',
+        'aria-label': 'AM/PM',
+        'aria-valuemin': valueMin,
+        'aria-valuemax': valueMax,
+        'aria-valuenow': valueNow,
+        'aria-valuetext': valueText
+    };
+}
+function literalSegmentAttrs(_props) {
+    return {
+        'aria-hidden': true,
+        'data-segment': 'literal'
+    };
+}
+function timeZoneSegmentAttrs(props) {
+    return {
+        role: 'textbox',
+        'aria-label': 'timezone, ',
+        'data-readonly': true,
+        'data-segment': 'timeZoneName',
+        tabindex: props.disabled ? undefined : 0,
+        style: 'caret-color: transparent;'
+    };
+}
+function eraSegmentAttrs(props) {
+    const { segmentValues, placeholder } = props;
+    const valueMin = 0;
+    const valueMax = 0;
+    const valueNow = 0;
+    const valueText = 'era' in segmentValues ? segmentValues.era : placeholder.era;
+    return {
+        ...commonSegmentAttrs(props),
+        'aria-label': 'era',
+        'aria-valuemin': valueMin,
+        'aria-valuemax': valueMax,
+        'aria-valuenow': valueNow,
+        'aria-valuetext': valueText
+    };
+}
+const segmentBuilders = {
+    day: {
+        attrs: daySegmentAttrs
+    },
+    month: {
+        attrs: monthSegmentAttrs
+    },
+    year: {
+        attrs: yearSegmentAttrs
+    },
+    hour: {
+        attrs: hourSegmentAttrs
+    },
+    minute: {
+        attrs: minuteSegmentAttrs
+    },
+    second: {
+        attrs: secondSegmentAttrs
+    },
+    dayPeriod: {
+        attrs: dayPeriodSegmentAttrs
+    },
+    literal: {
+        attrs: literalSegmentAttrs
+    },
+    timeZoneName: {
+        attrs: timeZoneSegmentAttrs
+    },
+    era: {
+        attrs: eraSegmentAttrs
+    }
+};
+function useDateField(props) {
+    function handleSegmentClick(e) {
+        const disabled = props.disabled();
+        if (disabled)
+            e.preventDefault();
+    }
+    function deleteValue(prevValue) {
+        props.hasLeftFocus.set(false);
+        if (prevValue === null)
+            return prevValue;
+        const str = prevValue.toString();
+        if (str.length === 1) {
+            props.modelValue.set(undefined);
+            return null;
+        }
+        return Number.parseInt(str.slice(0, -1));
+    }
+    function dateTimeValueIncrementation({ e, part, dateRef, prevValue, hourCycle }) {
+        const sign = e.key === ARROW_UP ? 1 : -1;
+        if (prevValue === null)
+            return dateRef[part];
+        if (part === 'hour' && 'hour' in dateRef) {
+            const cycleArgs = [
+                part,
+                sign,
+                { hourCycle }
+            ];
+            return dateRef.set({ [part]: prevValue }).cycle(...cycleArgs)[part];
+        }
+        const cycleArgs = [part, sign];
+        if (part === 'day' && props.segmentValues().month !== null)
+            return dateRef
+                .set({ [part]: prevValue, month: props.segmentValues().month })
+                .cycle(...cycleArgs)[part];
+        return dateRef.set({ [part]: prevValue }).cycle(...cycleArgs)[part];
+    }
+    function updateDayOrMonth(max, num, prev) {
+        let moveToNext = false;
+        const maxStart = Math.floor(max / 10);
+        /**
+         * If the user has left the segment, we want to reset the
+         * `prev` value so that we can start the segment over again
+         * when the user types a number.
+         */
+        if (props.hasLeftFocus()) {
+            props.hasLeftFocus.set(false);
+            prev = null;
+        }
+        if (prev === null) {
+            /**
+             * If the user types a 0 as the first number, we want
+             * to keep track of that so that when they type the next
+             * number, we can move to the next segment.
+             */
+            if (num === 0) {
+                props.lastKeyZero.set(true);
+                return { value: null, moveToNext };
+            }
+            /**
+             * If the last key was a 0, or if the first number is
+             * greater than the max start digit (0-3 in most cases), then
+             * we want to move to the next segment, since it's not possible
+             * to continue typing a valid number in this segment.
+             */
+            if (props.lastKeyZero() || num > maxStart) {
+                // move to next
+                moveToNext = true;
+            }
+            props.lastKeyZero.set(false);
+            /**
+             * If none of the above conditions are met, then we can just
+             * return the number as the segment value and continue typing
+             * in this segment.
+             */
+            return { value: num, moveToNext };
+        }
+        /**
+         * If the number of digits is 2, or if the total with the existing digit
+         * and the pressed digit is greater than the maximum value for this
+         * month, then we will reset the segment as if the user had pressed the
+         * backspace key and then typed the number.
+         */
+        const digits = prev.toString().length;
+        const total = Number.parseInt(prev.toString() + num.toString());
+        /**
+         * If the number of digits is 2, or if the total with the existing digit
+         * and the pressed digit is greater than the maximum value for this
+         * month, then we will reset the segment as if the user had pressed the
+         * backspace key and then typed the number.
+         */
+        if (digits === 2 || total > max) {
+            /**
+             * As we're doing elsewhere, we're checking if the number is greater
+             * than the max start digit (0-3 in most months), and if so, we're
+             * going to move to the next segment.
+             */
+            if (num > maxStart || total > max) {
+                // move to next
+                moveToNext = true;
+            }
+            return { value: num, moveToNext };
+        }
+        // move to next
+        moveToNext = true;
+        return { value: total, moveToNext };
+    }
+    function updateYear(num, prev) {
+        let moveToNext = false;
+        /**
+         * If the user has left the segment, we want to reset the
+         * `prev` value so that we can start the segment over again
+         * when the user types a number.
+         */
+        // probably not implement, kind of weird
+        if (props.hasLeftFocus()) {
+            props.hasLeftFocus.set(false);
+            prev = null;
+        }
+        if (prev === null)
+            return { value: num === 0 ? 1 : num, moveToNext };
+        const str = prev.toString() + num.toString();
+        if (str.length > 4)
+            return { value: num === 0 ? 1 : num, moveToNext };
+        if (str.length === 4)
+            moveToNext = true;
+        const int = Number.parseInt(str);
+        return { value: int, moveToNext };
+    }
+    function updateHour(num, prev) {
+        const max = 24;
+        let moveToNext = false;
+        const maxStart = Math.floor(max / 10);
+        /**
+         * If the user has left the segment, we want to reset the
+         * `prev` value so that we can start the segment over again
+         * when the user types a number.
+         */
+        // probably not implement, kind of weird
+        if (props.hasLeftFocus()) {
+            props.hasLeftFocus.set(false);
+            prev = null;
+        }
+        if (prev === null) {
+            /**
+             * If the user types a 0 as the first number, we want
+             * to keep track of that so that when they type the next
+             * number, we can move to the next segment.
+             */
+            if (num === 0) {
+                props.lastKeyZero.set(true);
+                return { value: 0, moveToNext };
+            }
+            /**
+             * If the last key was a 0, or if the first number is
+             * greater than the max start digit (0-3 in most cases), then
+             * we want to move to the next segment, since it's not possible
+             * to continue typing a valid number in this segment.
+             */
+            if (props.lastKeyZero() || num > maxStart) {
+                // move to next
+                moveToNext = true;
+            }
+            props.lastKeyZero.set(false);
+            /**
+             * If none of the above conditions are met, then we can just
+             * return the number as the segment value and continue typing
+             * in this segment.
+             */
+            return { value: num, moveToNext };
+        }
+        /**
+         * If the number of digits is 2, or if the total with the existing digit
+         * and the pressed digit is greater than the maximum value for this
+         * month, then we will reset the segment as if the user had pressed the
+         * backspace key and then typed the number.
+         */
+        const digits = prev.toString().length;
+        const total = Number.parseInt(prev.toString() + num.toString());
+        /**
+         * If the number of digits is 2, or if the total with the existing digit
+         * and the pressed digit is greater than the maximum value for this
+         * month, then we will reset the segment as if the user had pressed the
+         * backspace key and then typed the number.
+         */
+        if (digits === 2 || total > max) {
+            /**
+             * As we're doing elsewhere, we're checking if the number is greater
+             * than the max start digit (0-3 in most months), and if so, we're
+             * going to move to the next segment.
+             */
+            if (num > maxStart) {
+                // move to next
+                moveToNext = true;
+            }
+            return { value: num, moveToNext };
+        }
+        // move to next
+        moveToNext = true;
+        return { value: total, moveToNext };
+    }
+    function updateMinuteOrSecond(num, prev) {
+        const max = 59;
+        let moveToNext = false;
+        const maxStart = Math.floor(max / 10);
+        /**
+         * If the user has left the segment, we want to reset the
+         * `prev` value so that we can start the segment over again
+         * when the user types a number.
+         */
+        if (props.hasLeftFocus()) {
+            props.hasLeftFocus.set(false);
+            prev = null;
+        }
+        if (prev === null) {
+            /**
+             * If the user types a 0 as the first number, we want
+             * to keep track of that so that when they type the next
+             * number, we can move to the next segment.
+             */
+            if (num === 0) {
+                props.lastKeyZero.set(true);
+                return { value: 0, moveToNext };
+            }
+            /**
+             * If the last key was a 0, or if the first number is
+             * greater than the max start digit (0-3 in most cases), then
+             * we want to move to the next segment, since it's not possible
+             * to continue typing a valid number in this segment.
+             */
+            if (props.lastKeyZero() || num > maxStart) {
+                // move to next
+                moveToNext = true;
+            }
+            props.lastKeyZero.set(false);
+            /**
+             * If none of the above conditions are met, then we can just
+             * return the number as the segment value and continue typing
+             * in this segment.
+             */
+            return { value: num, moveToNext };
+        }
+        /**
+         * If the number of digits is 2, or if the total with the existing digit
+         * and the pressed digit is greater than the maximum value for this
+         * month, then we will reset the segment as if the user had pressed the
+         * backspace key and then typed the number.
+         */
+        const digits = prev.toString().length;
+        const total = Number.parseInt(prev.toString() + num.toString());
+        /**
+         * If the number of digits is 2, or if the total with the existing digit
+         * and the pressed digit is greater than the maximum value for this
+         * month, then we will reset the segment as if the user had pressed the
+         * backspace key and then typed the number.
+         */
+        if (digits === 2 || total > max) {
+            /**
+             * As we're doing elsewhere, we're checking if the number is greater
+             * than the max start digit (0-3 in most months), and if so, we're
+             * going to move to the next segment.
+             */
+            if (num > maxStart) {
+                // move to next
+                moveToNext = true;
+            }
+            return { value: num, moveToNext };
+        }
+        // move to next
+        moveToNext = true;
+        return { value: total, moveToNext };
+    }
+    function minuteSecondIncrementation({ e, part, dateRef, prevValue }) {
+        const sign = e.key === ARROW_UP ? 1 : -1;
+        const min = 0;
+        const max = 59;
+        if (prevValue === null)
+            return sign > 0 ? min : max;
+        const cycleArgs = [part, sign];
+        return dateRef.set({ [part]: prevValue }).cycle(...cycleArgs)[part];
+    }
+    const attributes = computed(() => segmentBuilders[props.part]?.attrs({
+        disabled: props.disabled(),
+        placeholder: props.placeholder(),
+        hourCycle: props.hourCycle,
+        segmentValues: props.segmentValues(),
+        formatter: props.formatter
+    }) ?? {});
+    function handleMonthSegmentKeydown(e) {
+        if (!isAcceptableSegmentKey(e.key) || isSegmentNavigationKey(e.key))
+            return;
+        const prevValue = props.segmentValues().month;
+        if (e.key === ARROW_DOWN || e.key === ARROW_UP) {
+            props.segmentValues.update((prev) => ({
+                ...prev,
+                month: dateTimeValueIncrementation({
+                    e,
+                    part: 'month',
+                    dateRef: props.placeholder(),
+                    prevValue
+                })
+            }));
+            return;
+        }
+        if (isNumberString(e.key)) {
+            const num = Number.parseInt(e.key);
+            const { value, moveToNext } = updateDayOrMonth(12, num, prevValue);
+            props.segmentValues.update((prev) => ({ ...prev, month: value }));
+            if (moveToNext)
+                props.focusNext();
+        }
+        if (e.key === BACKSPACE) {
+            props.hasLeftFocus.set(false);
+            props.segmentValues.update((prev) => ({ ...prev, month: deleteValue(prevValue) }));
+        }
+    }
+    function handleDaySegmentKeydown(e) {
+        if (!isAcceptableSegmentKey(e.key) || isSegmentNavigationKey(e.key))
+            return;
+        const prevValue = props.segmentValues().day;
+        if (e.key === ARROW_DOWN || e.key === ARROW_UP) {
+            props.segmentValues.update((prev) => ({
+                ...prev,
+                day: dateTimeValueIncrementation({
+                    e,
+                    part: 'day',
+                    dateRef: props.placeholder(),
+                    prevValue
+                })
+            }));
+            return;
+        }
+        if (isNumberString(e.key)) {
+            const num = Number.parseInt(e.key);
+            const segmentMonthValue = props.segmentValues().month;
+            const daysInMonth = segmentMonthValue
+                ? getDaysInMonth(props.placeholder().set({ month: segmentMonthValue }))
+                : getDaysInMonth(props.placeholder());
+            const { value, moveToNext } = updateDayOrMonth(daysInMonth, num, prevValue);
+            props.segmentValues.update((prev) => ({ ...prev, day: value }));
+            if (moveToNext)
+                props.focusNext();
+        }
+        if (e.key === BACKSPACE) {
+            props.hasLeftFocus.set(false);
+            props.segmentValues.update((prev) => ({ ...prev, day: deleteValue(prevValue) }));
+        }
+    }
+    function handleYearSegmentKeydown(e) {
+        if (!isAcceptableSegmentKey(e.key) || isSegmentNavigationKey(e.key))
+            return;
+        const prevValue = props.segmentValues().year;
+        if (e.key === ARROW_DOWN || e.key === ARROW_UP) {
+            props.segmentValues.update((prev) => ({
+                ...prev,
+                year: dateTimeValueIncrementation({
+                    e,
+                    part: 'year',
+                    dateRef: props.placeholder(),
+                    prevValue
+                })
+            }));
+            return;
+        }
+        if (isNumberString(e.key)) {
+            const num = Number.parseInt(e.key);
+            const { value, moveToNext } = updateYear(num, prevValue);
+            props.segmentValues.update((prev) => ({ ...prev, year: value }));
+            if (moveToNext)
+                props.focusNext();
+        }
+        if (e.key === BACKSPACE) {
+            props.hasLeftFocus.set(false);
+            props.segmentValues.update((prev) => ({ ...prev, year: deleteValue(prevValue) }));
+        }
+    }
+    function handleHourSegmentKeydown(e) {
+        const dateRef = props.placeholder();
+        const values = props.segmentValues();
+        if (!isAcceptableSegmentKey(e.key) ||
+            isSegmentNavigationKey(e.key) ||
+            !('hour' in dateRef) ||
+            !('hour' in values))
+            return;
+        const prevValue = values.hour;
+        const hourCycle = props.hourCycle;
+        if (e.key === ARROW_UP || e.key === ARROW_DOWN) {
+            props.segmentValues.update((prev) => ({
+                ...prev,
+                hour: dateTimeValueIncrementation({
+                    e,
+                    part: 'hour',
+                    dateRef: props.placeholder(),
+                    prevValue,
+                    hourCycle
+                })
+            }));
+            if ('dayPeriod' in props.segmentValues() && values.hour != null) {
+                if (values.hour < 12)
+                    props.segmentValues.update((prev) => ({ ...prev, dayPeriod: 'AM' }));
+                else if (values.hour)
+                    props.segmentValues.update((prev) => ({ ...prev, dayPeriod: 'PM' }));
+            }
+            return;
+        }
+        if (isNumberString(e.key)) {
+            const num = Number.parseInt(e.key);
+            const { value, moveToNext } = updateHour(num, prevValue);
+            if ('dayPeriod' in props.segmentValues() && value && value > 12)
+                props.segmentValues.update((prev) => ({ ...prev, dayPeriod: 'AM' }));
+            else if ('dayPeriod' in props.segmentValues() && value)
+                props.segmentValues.update((prev) => ({ ...prev, dayPeriod: 'PM' }));
+            props.segmentValues.update((prev) => ({ ...prev, hour: value }));
+            if (moveToNext)
+                props.focusNext();
+        }
+        if (e.key === BACKSPACE) {
+            props.hasLeftFocus.set(false);
+            props.segmentValues.update((prev) => ({ ...prev, hour: deleteValue(prevValue) }));
+        }
+    }
+    function handleMinuteSegmentKeydown(e) {
+        const dateRef = props.placeholder();
+        const values = props.segmentValues();
+        if (!isAcceptableSegmentKey(e.key) ||
+            isSegmentNavigationKey(e.key) ||
+            !('minute' in dateRef) ||
+            !('minute' in values))
+            return;
+        const prevValue = values.minute;
+        props.segmentValues.update((prev) => ({
+            ...prev,
+            minute: minuteSecondIncrementation({
+                e,
+                part: 'minute',
+                dateRef: props.placeholder(),
+                prevValue
+            })
+        }));
+        if (isNumberString(e.key)) {
+            const num = Number.parseInt(e.key);
+            const { value, moveToNext } = updateMinuteOrSecond(num, prevValue);
+            props.segmentValues.update((prev) => ({ ...prev, minute: value }));
+            if (moveToNext)
+                props.focusNext();
+        }
+        if (e.key === BACKSPACE) {
+            props.hasLeftFocus.set(false);
+            props.segmentValues.update((prev) => ({ ...prev, minute: deleteValue(prevValue) }));
+        }
+    }
+    function handleSecondSegmentKeydown(e) {
+        const dateRef = props.placeholder();
+        const values = props.segmentValues();
+        if (!isAcceptableSegmentKey(e.key) ||
+            isSegmentNavigationKey(e.key) ||
+            !('second' in dateRef) ||
+            !('second' in values))
+            return;
+        const prevValue = values.second;
+        props.segmentValues.update((prev) => ({
+            ...prev,
+            second: minuteSecondIncrementation({
+                e,
+                part: 'second',
+                dateRef: props.placeholder(),
+                prevValue
+            })
+        }));
+        if (isNumberString(e.key)) {
+            const num = Number.parseInt(e.key);
+            const { value, moveToNext } = updateMinuteOrSecond(num, prevValue);
+            props.segmentValues.update((prev) => ({ ...prev, second: value }));
+            if (moveToNext)
+                props.focusNext();
+        }
+        if (e.key === BACKSPACE) {
+            props.hasLeftFocus.set(false);
+            props.segmentValues.update((prev) => ({ ...prev, second: deleteValue(prevValue) }));
+        }
+    }
+    function handleDayPeriodSegmentKeydown(e) {
+        if (((!isAcceptableSegmentKey(e.key) || isSegmentNavigationKey(e.key)) && e.key !== 'a' && e.key !== 'p') ||
+            !('hour' in props.placeholder()) ||
+            !('dayPeriod' in props.segmentValues()))
+            return;
+        const values = props.segmentValues();
+        if (e.key === ARROW_UP || e.key === ARROW_DOWN) {
+            if (values.dayPeriod === 'AM') {
+                props.segmentValues.update((prev) => ({ ...prev, dayPeriod: 'PM' }));
+                props.segmentValues.update((prev) => ({ ...prev, hour: values.hour + 12 }));
+                return;
+            }
+            props.segmentValues.update((prev) => ({ ...prev, dayPeriod: 'AM' }));
+            props.segmentValues.update((prev) => ({ ...prev, hour: values.hour - 12 }));
+            return;
+        }
+        if (['a', 'A'].includes(e.key) && values.dayPeriod !== 'AM') {
+            props.segmentValues.update((prev) => ({ ...prev, dayPeriod: 'AM' }));
+            props.segmentValues.update((prev) => ({ ...prev, hour: values.hour - 12 }));
+            return;
+        }
+        if (['p', 'P'].includes(e.key) && values.dayPeriod !== 'PM') {
+            props.segmentValues.update((prev) => ({ ...prev, dayPeriod: 'PM' }));
+            props.segmentValues.update((prev) => ({ ...prev, hour: values.hour + 12 }));
+        }
+    }
+    function handleSegmentKeydown(e) {
+        const disabled = props.disabled();
+        const readonly = props.readonly();
+        if (e.key !== TAB)
+            e.preventDefault();
+        if (disabled || readonly)
+            return;
+        const segmentKeydownHandlers = {
+            month: handleMonthSegmentKeydown,
+            day: handleDaySegmentKeydown,
+            year: handleYearSegmentKeydown,
+            hour: handleHourSegmentKeydown,
+            minute: handleMinuteSegmentKeydown,
+            second: handleSecondSegmentKeydown,
+            dayPeriod: handleDayPeriodSegmentKeydown,
+            timeZoneName: () => { }
+        };
+        segmentKeydownHandlers[props.part](e);
+        if (![ARROW_LEFT, ARROW_RIGHT].includes(e.key) &&
+            e.key !== TAB &&
+            e.key !== SHIFT &&
+            isAcceptableSegmentKey(e.key)) {
+            if (Object.values(props.segmentValues()).every((item) => item !== null)) {
+                const updateObject = { ...props.segmentValues() };
+                let dateRef = props.placeholder().copy();
+                Object.keys(updateObject).forEach((part) => {
+                    const value = updateObject[part];
+                    dateRef = dateRef.set({ [part]: value });
+                });
+                props.modelValue.set(dateRef.copy());
+            }
+        }
+    }
+    return {
+        handleSegmentClick,
+        handleSegmentKeydown,
+        attributes
+    };
+}
+
 var RdxPositionSide;
 (function (RdxPositionSide) {
     RdxPositionSide["Top"] = "top";
@@ -1011,5 +2100,5 @@ function watch(deps, fn, options) {
  * Generated bundle index. Do not edit.
  */
 
-export { A, ALT, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, ASTERISK, BACKSPACE, CAPS_LOCK, CONTROL, CTRL, DELETE, END, ENTER, ESCAPE, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, HOME, META, P, PAGE_DOWN, PAGE_UP, RDX_POSITIONING_DEFAULTS, RDX_POSITIONS, RdxAutoFocusDirective, RdxFocusInitialDirective, RdxPositionAlign, RdxPositionSide, SHIFT, SPACE, SPACE_CODE, TAB, WINDOW, _IdGenerator, a, areAllDaysBetweenValid, createFormatter, createMonth, createMonths, getAllPossibleConnectedPositions, getArrowPositionParams, getContentPosition, getDaysBetween, getDaysInMonth, getDefaultDate, getLastFirstDayOfWeek, getNextLastDayOfWeek, getPlaceholder, getSideAndAlignFromAllPossibleConnectedPositions, handleCalendarInitialFocus, hasTime, injectDocument, injectIsClient, injectNgControl, injectWindow, isAfter, isAfterOrSame, isBefore, isBeforeOrSame, isBetween, isBetweenInclusive, isCalendarDateTime, isInsideForm, isNullish, isNumber, isZonedDateTime, j, k, n, p, provideValueAccessor, toDate, watch };
+export { A, ALT, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, ASTERISK, BACKSPACE, CAPS_LOCK, CONTROL, CTRL, DELETE, END, ENTER, ESCAPE, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, HOME, META, P, PAGE_DOWN, PAGE_UP, RDX_POSITIONING_DEFAULTS, RDX_POSITIONS, RdxAutoFocusDirective, RdxFocusInitialDirective, RdxPositionAlign, RdxPositionSide, SHIFT, SPACE, SPACE_CODE, TAB, WINDOW, _IdGenerator, a, areAllDaysBetweenValid, clamp, createContent, createFormatter, createMonth, createMonths, getActiveElement, getAllPossibleConnectedPositions, getArrowPositionParams, getContentPosition, getDaysBetween, getDaysInMonth, getDefaultDate, getLastFirstDayOfWeek, getNextLastDayOfWeek, getOptsByGranularity, getPlaceholder, getSegmentElements, getSideAndAlignFromAllPossibleConnectedPositions, handleCalendarInitialFocus, hasTime, initializeSegmentValues, injectDocument, injectIsClient, injectNgControl, injectWindow, isAcceptableSegmentKey, isAfter, isAfterOrSame, isBefore, isBeforeOrSame, isBetween, isBetweenInclusive, isCalendarDateTime, isInsideForm, isNullish, isNumber, isNumberString, isSegmentNavigationKey, isZonedDateTime, j, k, n, p, provideToken, provideValueAccessor, roundToStepPrecision, segmentBuilders, snapValueToStep, syncSegmentValues, syncTimeSegmentValues, toDate, useDateField, watch };
 //# sourceMappingURL=radix-ng-primitives-core.mjs.map