@radix-ng/primitives 0.37.0 → 0.39.0

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

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { forwardRef, inject, ElementRef, NgZone, booleanAttribute, Input, Directive, APP_ID, Injectable, InjectionToken, computed, effect, untracked } from '@angular/core';
+import { forwardRef, input, booleanAttribute, output, linkedSignal, untracked, Directive, inject, ElementRef, NgZone, Input, APP_ID, Injectable, InjectionToken, computed, effect } 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';
+import { getLocalTimeZone, CalendarDateTime, ZonedDateTime, getDayOfWeek, DateFormatter, createCalendar, toCalendar, CalendarDate, Time, startOfMonth, endOfMonth, today } from '@internationalized/date';
 
 /**
  * Include in the providers section of a component which utilizes ControlValueAccessor to redundant code.
@@ -23,6 +23,97 @@ function provideValueAccessor(type) {
     };
 }
 
+/**
+ * A reusable ControlValueAccessor implementation for form controls
+ * @template T The type of the control's value
+ */
+class RdxControlValueAccessor {
+    constructor() {
+        /**
+         * Input for the control's value with alias 'value'
+         * @default undefined
+         */
+        this.valueInput = input(undefined, { alias: 'value' });
+        /**
+         * Input for the disabled state with alias 'disabled'
+         * Uses booleanAttribute transform to convert string attributes to booleans
+         * @default false
+         */
+        this.disabledInput = input(false, {
+            alias: 'disabled',
+            transform: booleanAttribute
+        });
+        this.valueChange = output();
+        this._value = linkedSignal(() => this.valueInput());
+        /**
+         * Readonly access to the current value
+         */
+        this.value = this._value.asReadonly();
+        this._disabled = linkedSignal(() => this.disabledInput());
+        /**
+         * Readonly access to the disabled state
+         */
+        this.disabled = this._disabled.asReadonly();
+    }
+    /**
+     * Writes a new value to the control (ControlValueAccessor interface)
+     * @param value The new value for the control
+     */
+    writeValue(value) {
+        untracked(() => this._value.set(value));
+    }
+    /**
+     * Registers a callback for when the control value changes (ControlValueAccessor interface)
+     * @param fn The callback function
+     */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /**
+     * Registers a callback for when the control is touched (ControlValueAccessor interface)
+     * @param fn The callback function
+     */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /**
+     * Sets the disabled state of the control (ControlValueAccessor interface)
+     * @param isDisabled Whether the control should be disabled
+     */
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+    }
+    /**
+     * Updates the control's value and triggers change detection
+     * @param value The new value
+     */
+    setValue(value) {
+        this._value.set(value);
+        this.valueChange.emit(value);
+        this.onChange?.(value);
+    }
+    markAsTouched() {
+        this.onTouched?.();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxControlValueAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: RdxControlValueAccessor, isStandalone: true, inputs: { valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [provideValueAccessor(RdxControlValueAccessor)], exportAs: ["rdxControlValueAccessor"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxControlValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    exportAs: 'rdxControlValueAccessor',
+                    providers: [provideValueAccessor(RdxControlValueAccessor)]
+                }]
+        }] });
+/**
+ * Provides a type-safe way to inject the RdxControlValueAccessor
+ * @template T The type of the control's value
+ * @returns An instance of RdxControlValueAccessor<T>
+ */
+function injectControlValueAccessor() {
+    return inject(RdxControlValueAccessor);
+}
+
 /*
  * <div [rdxAutoFocus]="true"></div>
  */
@@ -362,6 +453,43 @@ function injectWindow() {
     return inject(WINDOW);
 }
 
+// Thanks for idea.
+// https://github.com/unovue/reka-ui/blob/v2/packages/core/src/shared/createContext.ts
+/**
+ * Creates a context with injector and provider functions for a given type
+ * @template T The type of the context value
+ * @param description Descriptive string for the context (used in token creation)
+ * @returns A tuple containing:
+ *   - injectContext: Function to retrieve the context value
+ *   - provideContext: Function to create a provider for the context
+ */
+function createContext(description) {
+    const CONTEXT_TOKEN = new InjectionToken(`${description}Context`);
+    /**
+     * Retrieves the context value from Angular's dependency injection
+     * @param optional If true, returns null when context is not provided instead of throwing
+     * @returns The context value or null if optional and not provided
+     * @throws Error when context is not provided and not optional
+     */
+    const injectContext = (optional = false) => {
+        const value = optional ? inject(CONTEXT_TOKEN, { optional: true }) : inject(CONTEXT_TOKEN);
+        if (value == null && !optional) {
+            throw new Error(`No context provided for token ${CONTEXT_TOKEN.toString()}`);
+        }
+        return value;
+    };
+    /**
+     * Creates a provider that can be used to supply the context value
+     * @param useFactory Factory function that creates the context value
+     * @returns A provider that can be registered in Angular's DI system
+     */
+    const provideContext = (useFactory) => ({
+        provide: CONTEXT_TOKEN,
+        useFactory: useFactory
+    });
+    return [injectContext, provideContext];
+}
+
 /**
  * Splits an array into chunks of a given size.
  * @param arr The array to split.
@@ -544,6 +672,16 @@ function getDefaultDate(props) {
         return toCalendar(new CalendarDateTime(year, month, day, 0, 0, 0), calendar);
     return toCalendar(new CalendarDate(year, month, day), calendar);
 }
+function getDefaultTime(props) {
+    const { defaultValue, defaultPlaceholder } = props;
+    if (defaultValue) {
+        return defaultValue.copy();
+    }
+    if (defaultPlaceholder) {
+        return defaultPlaceholder.copy();
+    }
+    return new Time(0, 0, 0);
+}
 
 /**
  * Retrieves an array of date values representing the days between
@@ -724,10 +862,7 @@ 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_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);
@@ -2059,6 +2194,112 @@ function getArrowPositionParams(sideAndAlign, arrowWidthAndHeight, triggerWidthA
     return posParams;
 }
 
+// made by https://reka-ui.com/
+const ignoredElement = ['INPUT', 'TEXTAREA'];
+/**
+ * Allow arrow navigation for every html element with data-rdx-collection-item tag
+ *
+ * @param e               Keyboard event
+ * @param currentElement  Event initiator element or any element that wants to handle the navigation
+ * @param parentElement   Parent element where contains all the collection items, this will collect every item to be used when nav
+ * @param options         further options
+ * @returns               the navigated html element or null if none
+ */
+function useArrowNavigation(e, currentElement, parentElement, options = {}) {
+    if (!currentElement || (options.enableIgnoredElement && ignoredElement.includes(currentElement.nodeName)))
+        return null;
+    const { arrowKeyOptions = 'both', attributeName = '[data-rdx-collection-item]', itemsArray = [], loop = true, dir = 'ltr', preventScroll = true, focus = false } = options;
+    const [right, left, up, down, home, end] = [
+        e.key === 'ArrowRight',
+        e.key === 'ArrowLeft',
+        e.key === 'ArrowUp',
+        e.key === 'ArrowDown',
+        e.key === 'Home',
+        e.key === 'End'
+    ];
+    const goingVertical = up || down;
+    const goingHorizontal = right || left;
+    if (!home &&
+        !end &&
+        ((!goingVertical && !goingHorizontal) ||
+            (arrowKeyOptions === 'vertical' && goingHorizontal) ||
+            (arrowKeyOptions === 'horizontal' && goingVertical))) {
+        return null;
+    }
+    const allCollectionItems = parentElement
+        ? Array.from(parentElement.querySelectorAll(attributeName))
+        : itemsArray;
+    if (!allCollectionItems.length)
+        return null;
+    if (preventScroll)
+        e.preventDefault();
+    let item = null;
+    if (goingHorizontal || goingVertical) {
+        const goForward = goingVertical ? down : dir === 'ltr' ? right : left;
+        item = findNextFocusableElement(allCollectionItems, currentElement, {
+            goForward,
+            loop
+        });
+    }
+    else if (home) {
+        item = allCollectionItems.length ? allCollectionItems[0] : null;
+    }
+    else if (end) {
+        item = allCollectionItems.length ? allCollectionItems[allCollectionItems.length - 1] : null;
+    }
+    if (focus)
+        item?.focus();
+    return item;
+}
+/**
+ * Recursive function to find the next focusable element to avoid disabled elements
+ *
+ * @param elements Elements to navigate
+ * @param currentElement Current active element
+ * @param options
+ * @param iterations
+ * @returns next focusable element
+ */
+function findNextFocusableElement(elements, currentElement, options, iterations = elements.length) {
+    if (--iterations === 0)
+        return null;
+    const index = elements.indexOf(currentElement);
+    const newIndex = options.goForward ? index + 1 : index - 1;
+    if (!options.loop && (newIndex < 0 || newIndex >= elements.length))
+        return null;
+    const adjustedNewIndex = (newIndex + elements.length) % elements.length;
+    const candidate = elements[adjustedNewIndex];
+    if (!candidate)
+        return null;
+    const isDisabled = candidate.hasAttribute('disabled') && candidate.getAttribute('disabled') !== 'false';
+    if (isDisabled) {
+        return findNextFocusableElement(elements, candidate, options, iterations);
+    }
+    return candidate;
+}
+
+/**
+ * Creates a resize observer effect for element
+ *
+ * @param options Configuration options
+ * @param options.injector Angular injector
+ * @param options.element Signal returning the element to observe
+ * @param options.onResize Callback when element is resized
+ * @returns EffectRef that can be destroyed when needed
+ */
+function resizeEffect(options) {
+    return effect((onCleanup) => {
+        const elementOrRef = options.element();
+        if (!elementOrRef)
+            return;
+        // Extract native element from ElementRef or use directly if it's HTMLElement
+        const element = elementOrRef instanceof ElementRef ? elementOrRef.nativeElement : elementOrRef;
+        const resizeObserver = new ResizeObserver(options.onResize);
+        resizeObserver.observe(element);
+        onCleanup(() => resizeObserver.disconnect());
+    }, { injector: options.injector });
+}
+
 // https://ngxtension.netlify.app/utilities/signals/explicit-effect/
 /**
  * This explicit effect function will take the dependencies and the function to run when the dependencies change.
@@ -2100,5 +2341,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, 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 };
+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, RdxControlValueAccessor, RdxFocusInitialDirective, RdxPositionAlign, RdxPositionSide, SHIFT, SPACE, SPACE_CODE, TAB, WINDOW, _IdGenerator, a, areAllDaysBetweenValid, clamp, createContent, createContext, createFormatter, createMonth, createMonths, getActiveElement, getAllPossibleConnectedPositions, getArrowPositionParams, getContentPosition, getDaysBetween, getDaysInMonth, getDefaultDate, getDefaultTime, getLastFirstDayOfWeek, getNextLastDayOfWeek, getOptsByGranularity, getPlaceholder, getSegmentElements, getSideAndAlignFromAllPossibleConnectedPositions, handleCalendarInitialFocus, hasTime, initializeSegmentValues, injectControlValueAccessor, injectDocument, injectIsClient, injectNgControl, injectWindow, isAcceptableSegmentKey, isAfter, isAfterOrSame, isBefore, isBeforeOrSame, isBetween, isBetweenInclusive, isCalendarDateTime, isInsideForm, isNullish, isNumber, isNumberString, isSegmentNavigationKey, isZonedDateTime, j, k, n, p, provideToken, provideValueAccessor, resizeEffect, roundToStepPrecision, segmentBuilders, snapValueToStep, syncSegmentValues, syncTimeSegmentValues, toDate, useArrowNavigation, useDateField, watch };
 //# sourceMappingURL=radix-ng-primitives-core.mjs.map