@radix-ng/primitives 0.27.0 → 0.29.0

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

@@ -0,0 +1,250 @@
+import { Observable, EMPTY, of, Subject, endWith, fromEvent, filter, takeUntil, timer, race } from 'rxjs';
+
+/**
+ * Ensures that the observable stream runs inside Angular's NgZone.
+ *
+ * This function is a higher-order function that takes an observable stream as input and ensures
+ * that all emissions, errors, and completion notifications are run inside Angular's NgZone. This
+ * is particularly useful for ensuring that change detection is triggered properly in Angular
+ * applications.
+ *
+ * @template T - The type of the items emitted by the observable.
+ * @param {NgZone} zone - The Angular zone to control the change detection context.
+ * @returns {(source: Observable<T>) => Observable<T>} - A function that takes an observable as input
+ * and returns an observable that runs inside Angular's NgZone.
+ *
+ * Example usage:
+ *
+ * const source$ = of('some value');
+ * const zoned$ = source$.pipe(runInZone(zone));
+ * zoned$.subscribe(value => {
+ *   console.log('Value:', value);
+ * });
+ */
+function runInZone(zone) {
+    return (source) => new Observable((observer) => source.subscribe({
+        next: (value) => zone.run(() => observer.next(value)),
+        error: (err) => zone.run(() => observer.error(err)),
+        complete: () => zone.run(() => observer.complete())
+    }));
+}
+/**
+ * Calculates the total transition duration in milliseconds for a given HTML element.
+ *
+ * This function retrieves the computed style of the specified element and extracts the
+ * transition duration and delay properties. It then converts these values from seconds
+ * to milliseconds and returns their sum, representing the total transition duration.
+ *
+ * @param {HTMLElement} element - The HTML element for which to calculate the transition duration.
+ * @returns {number} - The total transition duration in milliseconds.
+ *
+ * Example usage:
+ *
+ * const durationMs = getTransitionDurationMs(element);
+ * console.log(`Transition duration: ${durationMs} ms`);
+ */
+function getTransitionDurationMs(element) {
+    const { transitionDelay, transitionDuration } = window.getComputedStyle(element);
+    const transitionDelaySec = parseFloat(transitionDelay);
+    const transitionDurationSec = parseFloat(transitionDuration);
+    return (transitionDelaySec + transitionDurationSec) * 1000;
+}
+function triggerReflow(element) {
+    return (element || document.body).getBoundingClientRect();
+}
+
+const noopFn = () => {
+    /* Noop */
+};
+const TransitionsMap = new Map();
+/**
+ * Manages the presence of an element with optional transition animation.
+ *
+ * @template T - The type of the context object used in the transition.
+ * @param {NgZone} zone - The Angular zone to control the change detection context.
+ * @param {HTMLElement} element - The target HTML element to apply the transition.
+ * @param {TransitionOptions<T>} options - Options for controlling the transition behavior.
+ *   @param {T} [options.context] - An optional context object to pass through the transition.
+ *   @param {boolean} options.animation - A flag indicating if the transition should be animated.
+ *   @param {'start' | 'continue' | 'stop'} options.state - The desired state of the transition.
+ * @param {TransitionStartFn<T>} startFn - A function to start the transition.
+ * @returns {Observable<void>} - An observable that emits when the transition completes.
+ *
+ * The `usePresence` function is designed to manage the presence and visibility of an HTML element,
+ * optionally applying a transition animation. It utilizes Angular's NgZone for efficient change
+ * detection management and allows for different states of transitions ('start', 'continue', 'stop').
+ * The function takes a start function to handle the beginning of the transition and returns an
+ * observable that completes when the transition ends.
+ *
+ * Example usage:
+ *
+ * const options: TransitionOptions<MyContext> = {
+ *   context: {}, // your context object
+ *   animation: true,
+ *   state: 'start'
+ * };
+ *
+ * const startFn: TransitionStartFn<MyContext> = (el, animation, context) => {
+ *   el.classList.add('active');
+ *   return () => el.classList.remove('active');
+ * };
+ *
+ * usePresence(zone, element, startFn, options).subscribe(() => {
+ *   console.log('Transition completed');
+ * });
+ */
+const usePresence = (zone, element, startFn, options) => {
+    let context = options.context || {};
+    const transitionTimerDelayMs = options.transitionTimerDelayMs ?? 5;
+    const state = options.state ?? 'stop';
+    const running = TransitionsMap.get(element);
+    if (running) {
+        switch (state) {
+            case 'continue':
+                return EMPTY;
+            case 'stop':
+                zone.run(() => running.transition$.complete());
+                context = { ...running.context, ...context };
+                TransitionsMap.delete(element);
+                break;
+        }
+    }
+    const endFn = startFn(element, options.animation, context) || noopFn;
+    if (!options.animation || window.getComputedStyle(element).transitionProperty === 'none') {
+        zone.run(() => endFn());
+        return of(undefined).pipe(runInZone(zone));
+    }
+    const transition$ = new Subject();
+    const finishTransition$ = new Subject();
+    const stop$ = transition$.pipe(endWith(true));
+    TransitionsMap.set(element, {
+        transition$,
+        complete: () => {
+            finishTransition$.next();
+            finishTransition$.complete();
+        },
+        context
+    });
+    const transitionDurationMs = getTransitionDurationMs(element);
+    zone.runOutsideAngular(() => {
+        const transitionEnd$ = fromEvent(element, 'transitionend').pipe(filter(({ target }) => target === element), takeUntil(stop$));
+        const timer$ = timer(transitionDurationMs + transitionTimerDelayMs).pipe(takeUntil(stop$));
+        race(timer$, transitionEnd$, finishTransition$)
+            .pipe(takeUntil(stop$))
+            .subscribe(() => {
+            TransitionsMap.delete(element);
+            zone.run(() => {
+                endFn();
+                transition$.next();
+                transition$.complete();
+            });
+        });
+    });
+    return transition$.asObservable();
+};
+const completeTransition = (element) => {
+    TransitionsMap.get(element)?.complete();
+};
+
+// Define constants for class names
+const COLLAPSE_CLASS = 'collapse';
+const COLLAPSING_CLASS = 'collapsing';
+const SHOW_CLASS = 'show';
+/**
+ * Function to handle the start of a collapsing transition.
+ *
+ * @param element - The HTML element to animate.
+ * @param animation - Whether to use animation or not.
+ * @param context - The context containing direction and dimension information.
+ * @returns A function to clean up the animation.
+ */
+const transitionCollapsing = (element, animation, context) => {
+    const { direction, dimension } = context;
+    let { maxSize } = context;
+    const { classList } = element;
+    /**
+     * Sets initial classes based on the direction.
+     */
+    function setInitialClasses() {
+        classList.add(COLLAPSE_CLASS);
+        if (direction === 'show') {
+            classList.add(SHOW_CLASS);
+        }
+        else {
+            classList.remove(SHOW_CLASS);
+        }
+    }
+    if (!animation) {
+        setInitialClasses();
+        return;
+    }
+    if (!maxSize) {
+        maxSize = measureCollapsingElementDimensionPx(element, dimension);
+        context.maxSize = maxSize;
+        // Fix the height before starting the animation
+        element.style[dimension] = direction !== 'show' ? maxSize : '0px';
+        classList.remove(COLLAPSE_CLASS, COLLAPSING_CLASS, 'show');
+        triggerReflow(element);
+        // Start the animation
+        classList.add(COLLAPSING_CLASS);
+    }
+    element.style[dimension] = direction === 'show' ? maxSize : '0px';
+    return () => {
+        setInitialClasses();
+        classList.remove(COLLAPSING_CLASS);
+        element.style[dimension] = '';
+    };
+};
+/**
+ * Measures the dimension of the collapsing element in pixels.
+ *
+ * @param element - The HTML element to measure.
+ * @param dimension - The dimension ('width' or 'height') to measure.
+ * @returns The size of the dimension in pixels.
+ */
+function measureCollapsingElementDimensionPx(element, dimension) {
+    // SSR fix
+    if (typeof navigator === 'undefined') {
+        return '0px';
+    }
+    const { classList } = element;
+    const hasShownClass = classList.contains(SHOW_CLASS);
+    if (!hasShownClass) {
+        classList.add(SHOW_CLASS);
+    }
+    element.style[dimension] = '';
+    const dimensionSize = element.getBoundingClientRect()[dimension] + 'px';
+    if (!hasShownClass) {
+        classList.remove(SHOW_CLASS);
+    }
+    return dimensionSize;
+}
+
+const toastFadeInTransition = (element, animation) => {
+    const { classList } = element;
+    if (animation) {
+        classList.add('fade');
+    }
+    else {
+        classList.add('show');
+        return;
+    }
+    triggerReflow(element);
+    classList.add('show', 'showing');
+    return () => {
+        classList.remove('showing');
+    };
+};
+const toastFadeOutTransition = ({ classList }) => {
+    classList.add('showing');
+    return () => {
+        classList.remove('show', 'showing');
+    };
+};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { completeTransition, toastFadeInTransition, toastFadeOutTransition, transitionCollapsing, usePresence };
+//# sourceMappingURL=radix-ng-primitives-presence.mjs.map

package/fesm2022/radix-ng-primitives-presence.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radix-ng-primitives-presence.mjs","sources":["../../../packages/primitives/presence/src/utils.ts","../../../packages/primitives/presence/src/presence.ts","../../../packages/primitives/presence/src/transitions/transition.collapse.ts","../../../packages/primitives/presence/src/transitions/transition.toast.ts","../../../packages/primitives/presence/radix-ng-primitives-presence.ts"],"sourcesContent":["import { NgZone } from '@angular/core';\nimport { Observable } from 'rxjs';\n\n/**\n * Ensures that the observable stream runs inside Angular's NgZone.\n *\n * This function is a higher-order function that takes an observable stream as input and ensures\n * that all emissions, errors, and completion notifications are run inside Angular's NgZone. This\n * is particularly useful for ensuring that change detection is triggered properly in Angular\n * applications.\n *\n * @template T - The type of the items emitted by the observable.\n * @param {NgZone} zone - The Angular zone to control the change detection context.\n * @returns {(source: Observable<T>) => Observable<T>} - A function that takes an observable as input\n * and returns an observable that runs inside Angular's NgZone.\n *\n * Example usage:\n *\n * const source$ = of('some value');\n * const zoned$ = source$.pipe(runInZone(zone));\n * zoned$.subscribe(value => {\n *   console.log('Value:', value);\n * });\n */\nfunction runInZone<T>(zone: NgZone): (source: Observable<T>) => Observable<T> {\n    return (source: Observable<T>) =>\n        new Observable((observer) =>\n            source.subscribe({\n                next: (value) => zone.run(() => observer.next(value)),\n                error: (err) => zone.run(() => observer.error(err)),\n                complete: () => zone.run(() => observer.complete())\n            })\n        );\n}\n\n/**\n * Calculates the total transition duration in milliseconds for a given HTML element.\n *\n * This function retrieves the computed style of the specified element and extracts the\n * transition duration and delay properties. It then converts these values from seconds\n * to milliseconds and returns their sum, representing the total transition duration.\n *\n * @param {HTMLElement} element - The HTML element for which to calculate the transition duration.\n * @returns {number} - The total transition duration in milliseconds.\n *\n * Example usage:\n *\n * const durationMs = getTransitionDurationMs(element);\n * console.log(`Transition duration: ${durationMs} ms`);\n */\nfunction getTransitionDurationMs(element: HTMLElement): number {\n    const { transitionDelay, transitionDuration } = window.getComputedStyle(element);\n    const transitionDelaySec = parseFloat(transitionDelay);\n    const transitionDurationSec = parseFloat(transitionDuration);\n\n    return (transitionDelaySec + transitionDurationSec) * 1000;\n}\n\nexport { getTransitionDurationMs, runInZone };\n\nexport function triggerReflow(element: HTMLElement) {\n    return (element || document.body).getBoundingClientRect();\n}\n","import { NgZone } from '@angular/core';\nimport { EMPTY, endWith, filter, fromEvent, Observable, of, race, Subject, takeUntil, timer } from 'rxjs';\nimport { TransitionContext, TransitionEndFn, TransitionOptions, TransitionStartFn } from './types';\nimport { getTransitionDurationMs, runInZone } from './utils';\n\nconst noopFn: TransitionEndFn = () => {\n    /* Noop */\n};\nconst TransitionsMap = new Map<HTMLElement, TransitionContext<any>>();\n\n/**\n * Manages the presence of an element with optional transition animation.\n *\n * @template T - The type of the context object used in the transition.\n * @param {NgZone} zone - The Angular zone to control the change detection context.\n * @param {HTMLElement} element - The target HTML element to apply the transition.\n * @param {TransitionOptions<T>} options - Options for controlling the transition behavior.\n *   @param {T} [options.context] - An optional context object to pass through the transition.\n *   @param {boolean} options.animation - A flag indicating if the transition should be animated.\n *   @param {'start' | 'continue' | 'stop'} options.state - The desired state of the transition.\n * @param {TransitionStartFn<T>} startFn - A function to start the transition.\n * @returns {Observable<void>} - An observable that emits when the transition completes.\n *\n * The `usePresence` function is designed to manage the presence and visibility of an HTML element,\n * optionally applying a transition animation. It utilizes Angular's NgZone for efficient change\n * detection management and allows for different states of transitions ('start', 'continue', 'stop').\n * The function takes a start function to handle the beginning of the transition and returns an\n * observable that completes when the transition ends.\n *\n * Example usage:\n *\n * const options: TransitionOptions<MyContext> = {\n *   context: {}, // your context object\n *   animation: true,\n *   state: 'start'\n * };\n *\n * const startFn: TransitionStartFn<MyContext> = (el, animation, context) => {\n *   el.classList.add('active');\n *   return () => el.classList.remove('active');\n * };\n *\n * usePresence(zone, element, startFn, options).subscribe(() => {\n *   console.log('Transition completed');\n * });\n */\nconst usePresence = <T>(\n    zone: NgZone,\n    element: HTMLElement,\n    startFn: TransitionStartFn<T>,\n    options: TransitionOptions<T>\n): Observable<void> => {\n    let context = options.context || <T>{};\n\n    const transitionTimerDelayMs = options.transitionTimerDelayMs ?? 5;\n    const state = options.state ?? 'stop';\n\n    const running = TransitionsMap.get(element);\n\n    if (running) {\n        switch (state) {\n            case 'continue':\n                return EMPTY;\n            case 'stop':\n                zone.run(() => running.transition$.complete());\n                context = { ...running.context, ...context };\n                TransitionsMap.delete(element);\n                break;\n        }\n    }\n    const endFn = startFn(element, options.animation, context) || noopFn;\n\n    if (!options.animation || window.getComputedStyle(element).transitionProperty === 'none') {\n        zone.run(() => endFn());\n        return of(undefined).pipe(runInZone(zone));\n    }\n\n    const transition$ = new Subject<void>();\n    const finishTransition$ = new Subject<void>();\n    const stop$ = transition$.pipe(endWith(true));\n\n    TransitionsMap.set(element, {\n        transition$,\n        complete: () => {\n            finishTransition$.next();\n            finishTransition$.complete();\n        },\n        context\n    });\n\n    const transitionDurationMs = getTransitionDurationMs(element);\n\n    zone.runOutsideAngular(() => {\n        const transitionEnd$ = fromEvent<TransitionEvent>(element, 'transitionend').pipe(\n            filter(({ target }) => target === element),\n            takeUntil(stop$)\n        );\n        const timer$ = timer(transitionDurationMs + transitionTimerDelayMs).pipe(takeUntil(stop$));\n\n        race(timer$, transitionEnd$, finishTransition$)\n            .pipe(takeUntil(stop$))\n            .subscribe(() => {\n                TransitionsMap.delete(element);\n                zone.run(() => {\n                    endFn();\n                    transition$.next();\n                    transition$.complete();\n                });\n            });\n    });\n\n    return transition$.asObservable();\n};\n\nconst completeTransition = (element: HTMLElement) => {\n    TransitionsMap.get(element)?.complete();\n};\n\nexport { completeTransition, usePresence };\n","import { TransitionStartFn } from '../types';\nimport { triggerReflow } from '../utils';\n\nexport type CollapseContext = {\n    direction: 'show' | 'hide';\n    dimension: 'width' | 'height';\n    maxSize?: string;\n};\n\n// Define constants for class names\nconst COLLAPSE_CLASS = 'collapse';\nconst COLLAPSING_CLASS = 'collapsing';\nconst SHOW_CLASS = 'show';\n/**\n * Function to handle the start of a collapsing transition.\n *\n * @param element - The HTML element to animate.\n * @param animation - Whether to use animation or not.\n * @param context - The context containing direction and dimension information.\n * @returns A function to clean up the animation.\n */\nexport const transitionCollapsing: TransitionStartFn<CollapseContext> = (\n    element: HTMLElement,\n    animation: boolean,\n    context: CollapseContext\n) => {\n    const { direction, dimension } = context;\n    let { maxSize } = context;\n    const { classList } = element;\n\n    /**\n     * Sets initial classes based on the direction.\n     */\n    function setInitialClasses() {\n        classList.add(COLLAPSE_CLASS);\n        if (direction === 'show') {\n            classList.add(SHOW_CLASS);\n        } else {\n            classList.remove(SHOW_CLASS);\n        }\n    }\n\n    if (!animation) {\n        setInitialClasses();\n        return;\n    }\n\n    if (!maxSize) {\n        maxSize = measureCollapsingElementDimensionPx(element, dimension);\n        context.maxSize = maxSize;\n\n        // Fix the height before starting the animation\n        element.style[dimension] = direction !== 'show' ? maxSize : '0px';\n\n        classList.remove(COLLAPSE_CLASS, COLLAPSING_CLASS, 'show');\n\n        triggerReflow(element);\n\n        // Start the animation\n        classList.add(COLLAPSING_CLASS);\n    }\n\n    element.style[dimension] = direction === 'show' ? maxSize : '0px';\n\n    return () => {\n        setInitialClasses();\n        classList.remove(COLLAPSING_CLASS);\n        element.style[dimension] = '';\n    };\n};\n\n/**\n * Measures the dimension of the collapsing element in pixels.\n *\n * @param element - The HTML element to measure.\n * @param dimension - The dimension ('width' or 'height') to measure.\n * @returns The size of the dimension in pixels.\n */\nfunction measureCollapsingElementDimensionPx(element: HTMLElement, dimension: 'width' | 'height'): string {\n    // SSR fix\n    if (typeof navigator === 'undefined') {\n        return '0px';\n    }\n\n    const { classList } = element;\n    const hasShownClass = classList.contains(SHOW_CLASS);\n    if (!hasShownClass) {\n        classList.add(SHOW_CLASS);\n    }\n\n    element.style[dimension] = '';\n    const dimensionSize = element.getBoundingClientRect()[dimension] + 'px';\n\n    if (!hasShownClass) {\n        classList.remove(SHOW_CLASS);\n    }\n\n    return dimensionSize;\n}\n","import { TransitionStartFn } from '../types';\nimport { triggerReflow } from '../utils';\n\nexport const toastFadeInTransition: TransitionStartFn = (element: HTMLElement, animation: boolean) => {\n    const { classList } = element;\n\n    if (animation) {\n        classList.add('fade');\n    } else {\n        classList.add('show');\n        return;\n    }\n\n    triggerReflow(element);\n    classList.add('show', 'showing');\n\n    return () => {\n        classList.remove('showing');\n    };\n};\n\nexport const toastFadeOutTransition: TransitionStartFn = ({ classList }: HTMLElement) => {\n    classList.add('showing');\n    return () => {\n        classList.remove('show', 'showing');\n    };\n};\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -42,7 +42,7 @@ class RdxSeparatorRootDirective {
          *
          * @ignore
          */
-        this.computedAriaOrientation = computed(() => !this.decorative() && this.orientation() === 'vertical' ? 'vertical' : null);
+        this.computedAriaOrientation = computed(() => !this.decorative() && this.orientation() === 'vertical' ? 'vertical' : undefined);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxSeparatorRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: RdxSeparatorRootDirective, isStandalone: true, selector: "div[rdxSeparatorRoot]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "computedRole()", "attr.aria-orientation": "computedAriaOrientation()", "attr.data-orientation": "orientation()" } }, ngImport: i0 }); }

package/fesm2022/radix-ng-primitives-separator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"radix-ng-primitives-separator.mjs","sources":["../../../packages/primitives/separator/src/separator.directive.ts","../../../packages/primitives/separator/radix-ng-primitives-separator.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, computed, Directive, input } from '@angular/core';\n\nconst DEFAULT_ORIENTATION = 'horizontal';\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst ORIENTATIONS = ['horizontal', 'vertical'] as const;\n\nexport type Orientation = (typeof ORIENTATIONS)[number];\n\nexport interface SeparatorProps {\n    /**\n     * Either `vertical` or `horizontal`. Defaults to `horizontal`.\n     */\n    orientation?: Orientation;\n    /**\n     * Whether the component is purely decorative. When true, accessibility-related attributes\n     * are updated so that the rendered element is removed from the accessibility tree.\n     */\n    decorative?: boolean;\n}\n\n/**\n * Directive that adds accessible and configurable separator element to the DOM.\n * This can be either horizontal or vertical and optionally decorative (which removes\n * it from the accessibility tree).\n *\n * @group Components\n */\n@Directive({\n    selector: 'div[rdxSeparatorRoot]',\n    standalone: true,\n    host: {\n        '[attr.role]': 'computedRole()',\n        '[attr.aria-orientation]': 'computedAriaOrientation()',\n\n        '[attr.data-orientation]': 'orientation()'\n    }\n})\nexport class RdxSeparatorRootDirective {\n    /**\n     * Orientation of the separator, can be either 'horizontal' or 'vertical'.\n     *\n     * @defaultValue 'horizontal'\n     * @group Props\n     */\n    readonly orientation = input<Orientation>(DEFAULT_ORIENTATION);\n\n    /**\n     * If true, the separator will be considered decorative and removed from\n     * the accessibility tree. Defaults to false.\n     *\n     * @defaultValue false\n     * @group Props\n     */\n    readonly decorative = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /**\n     * Computes the `role` attribute for the separator. If `decorative` is true,\n     * the role is set to \"none\", otherwise it is \"separator\".\n     *\n     * @ignore\n     */\n    protected readonly computedRole = computed(() => (this.decorative() ? 'none' : 'separator'));\n\n    /**\n     * Computes the `aria-orientation` attribute. It is set to \"vertical\" only if\n     * the separator is not decorative and the orientation is set to \"vertical\".\n     * For horizontal orientation, the attribute is omitted.\n     *\n     * @ignore\n     */\n    protected readonly computedAriaOrientation = computed(() =>\n        !this.decorative() && this.orientation() === 'vertical' ? 'vertical' : null\n    );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAGA,MAAM,mBAAmB,GAAG,YAAY;AAExC;AACA,MAAM,YAAY,GAAG,CAAC,YAAY,EAAE,UAAU,CAAU;AAgBxD;;;;;;AAMG;MAWU,yBAAyB,CAAA;AAVtC,IAAA,WAAA,GAAA;AAWI;;;;;AAKG;AACM,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAc,mBAAmB,CAAC;AAE9D;;;;;;AAMG;QACM,IAAU,CAAA,UAAA,GAAG,KAAK,CAAwB,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAE1F;;;;;AAKG;QACgB,IAAY,CAAA,YAAA,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,UAAU,EAAE,GAAG,MAAM,GAAG,WAAW,CAAC,CAAC;AAE5F;;;;;;AAMG;QACgB,IAAuB,CAAA,uBAAA,GAAG,QAAQ,CAAC,MAClD,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,UAAU,GAAG,UAAU,GAAG,IAAI,CAC9E;AACJ;8GApCY,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAzB,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,uBAAA,EAAA,2BAAA,EAAA,uBAAA,EAAA,eAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAzB,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAVrC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,uBAAuB;AACjC,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACF,wBAAA,aAAa,EAAE,gBAAgB;AAC/B,wBAAA,yBAAyB,EAAE,2BAA2B;AAEtD,wBAAA,yBAAyB,EAAE;AAC9B;AACJ,iBAAA;;;ACtCD;;AAEG;;;;"}
+{"version":3,"file":"radix-ng-primitives-separator.mjs","sources":["../../../packages/primitives/separator/src/separator.directive.ts","../../../packages/primitives/separator/radix-ng-primitives-separator.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, computed, Directive, input } from '@angular/core';\n\nconst DEFAULT_ORIENTATION = 'horizontal';\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst ORIENTATIONS = ['horizontal', 'vertical'] as const;\n\nexport type Orientation = (typeof ORIENTATIONS)[number];\n\nexport interface SeparatorProps {\n    /**\n     * Either `vertical` or `horizontal`. Defaults to `horizontal`.\n     */\n    orientation?: Orientation;\n    /**\n     * Whether the component is purely decorative. When true, accessibility-related attributes\n     * are updated so that the rendered element is removed from the accessibility tree.\n     */\n    decorative?: boolean;\n}\n\n/**\n * Directive that adds accessible and configurable separator element to the DOM.\n * This can be either horizontal or vertical and optionally decorative (which removes\n * it from the accessibility tree).\n *\n * @group Components\n */\n@Directive({\n    selector: 'div[rdxSeparatorRoot]',\n    standalone: true,\n    host: {\n        '[attr.role]': 'computedRole()',\n        '[attr.aria-orientation]': 'computedAriaOrientation()',\n\n        '[attr.data-orientation]': 'orientation()'\n    }\n})\nexport class RdxSeparatorRootDirective {\n    /**\n     * Orientation of the separator, can be either 'horizontal' or 'vertical'.\n     *\n     * @defaultValue 'horizontal'\n     * @group Props\n     */\n    readonly orientation = input<Orientation>(DEFAULT_ORIENTATION);\n\n    /**\n     * If true, the separator will be considered decorative and removed from\n     * the accessibility tree. Defaults to false.\n     *\n     * @defaultValue false\n     * @group Props\n     */\n    readonly decorative = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /**\n     * Computes the `role` attribute for the separator. If `decorative` is true,\n     * the role is set to \"none\", otherwise it is \"separator\".\n     *\n     * @ignore\n     */\n    protected readonly computedRole = computed(() => (this.decorative() ? 'none' : 'separator'));\n\n    /**\n     * Computes the `aria-orientation` attribute. It is set to \"vertical\" only if\n     * the separator is not decorative and the orientation is set to \"vertical\".\n     * For horizontal orientation, the attribute is omitted.\n     *\n     * @ignore\n     */\n    protected readonly computedAriaOrientation = computed(() =>\n        !this.decorative() && this.orientation() === 'vertical' ? 'vertical' : undefined\n    );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAGA,MAAM,mBAAmB,GAAG,YAAY;AAExC;AACA,MAAM,YAAY,GAAG,CAAC,YAAY,EAAE,UAAU,CAAU;AAgBxD;;;;;;AAMG;MAWU,yBAAyB,CAAA;AAVtC,IAAA,WAAA,GAAA;AAWI;;;;;AAKG;AACM,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAc,mBAAmB,CAAC;AAE9D;;;;;;AAMG;QACM,IAAU,CAAA,UAAA,GAAG,KAAK,CAAwB,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAE1F;;;;;AAKG;QACgB,IAAY,CAAA,YAAA,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,UAAU,EAAE,GAAG,MAAM,GAAG,WAAW,CAAC,CAAC;AAE5F;;;;;;AAMG;QACgB,IAAuB,CAAA,uBAAA,GAAG,QAAQ,CAAC,MAClD,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,UAAU,GAAG,UAAU,GAAG,SAAS,CACnF;AACJ;8GApCY,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAzB,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,uBAAA,EAAA,2BAAA,EAAA,uBAAA,EAAA,eAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAzB,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAVrC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,uBAAuB;AACjC,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACF,wBAAA,aAAa,EAAE,gBAAgB;AAC/B,wBAAA,yBAAyB,EAAE,2BAA2B;AAEtD,wBAAA,yBAAyB,EAAE;AAC9B;AACJ,iBAAA;;;ACtCD;;AAEG;;;;"}

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, EventEmitter, Directive, Output, input, booleanAttribute, viewChild, signal, Component, Input, Injectable, numberAttribute, model, computed, ElementRef, PLATFORM_ID, NgModule } from '@angular/core';
+import { inject, output, Directive, input, booleanAttribute, viewChild, signal, Component, Input, Injectable, numberAttribute, model, computed, ElementRef, PLATFORM_ID, NgModule } from '@angular/core';
 import { NgIf, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
 
 // https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js
@@ -99,12 +99,12 @@ function clamp(value, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFI
 class RdxSliderImplDirective {
     constructor() {
         this.rootContext = inject(RdxSliderRootComponent);
-        this.slideStart = new EventEmitter();
-        this.slideMove = new EventEmitter();
-        this.slideEnd = new EventEmitter();
-        this.homeKeyDown = new EventEmitter();
-        this.endKeyDown = new EventEmitter();
-        this.stepKeyDown = new EventEmitter();
+        this.slideStart = output();
+        this.slideMove = output();
+        this.slideEnd = output();
+        this.homeKeyDown = output();
+        this.endKeyDown = output();
+        this.stepKeyDown = output();
     }
     onKeyDown(event) {
         if (event.key === 'Home') {
@@ -157,7 +157,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             type: Directive,
             args: [{
                     selector: '[rdxSliderImpl]',
-                    standalone: true,
                     host: {
                         role: 'slider',
                         tabindex: '0',
@@ -167,19 +166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         '(pointerup)': 'onPointerUp($event)'
                     }
                 }]
-        }], propDecorators: { slideStart: [{
-                type: Output
-            }], slideMove: [{
-                type: Output
-            }], slideEnd: [{
-                type: Output
-            }], homeKeyDown: [{
-                type: Output
-            }], endKeyDown: [{
-                type: Output
-            }], stepKeyDown: [{
-                type: Output
-            }] } });
+        }] });
 
 class RdxSliderHorizontalComponent {
     constructor() {
@@ -189,12 +176,12 @@ class RdxSliderHorizontalComponent {
         this.min = 0;
         this.max = 100;
         this.className = '';
-        this.slideStart = new EventEmitter();
-        this.slideMove = new EventEmitter();
-        this.slideEnd = new EventEmitter();
-        this.stepKeyDown = new EventEmitter();
-        this.endKeyDown = new EventEmitter();
-        this.homeKeyDown = new EventEmitter();
+        this.slideStart = output();
+        this.slideMove = output();
+        this.slideEnd = output();
+        this.stepKeyDown = output();
+        this.endKeyDown = output();
+        this.homeKeyDown = output();
         this.sliderElement = viewChild('sliderElement');
         this.rect = signal(undefined);
     }
@@ -278,18 +265,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 type: Input
             }], className: [{
                 type: Input
-            }], slideStart: [{
-                type: Output
-            }], slideMove: [{
-                type: Output
-            }], slideEnd: [{
-                type: Output
-            }], stepKeyDown: [{
-                type: Output
-            }], endKeyDown: [{
-                type: Output
-            }], homeKeyDown: [{
-                type: Output
             }] } });
 
 class RdxSliderOrientationContextService {
@@ -325,12 +300,12 @@ class RdxSliderVerticalComponent {
         this.min = 0;
         this.max = 100;
         this.className = '';
-        this.slideStart = new EventEmitter();
-        this.slideMove = new EventEmitter();
-        this.slideEnd = new EventEmitter();
-        this.stepKeyDown = new EventEmitter();
-        this.endKeyDown = new EventEmitter();
-        this.homeKeyDown = new EventEmitter();
+        this.slideStart = output();
+        this.slideMove = output();
+        this.slideEnd = output();
+        this.stepKeyDown = output();
+        this.endKeyDown = output();
+        this.homeKeyDown = output();
         this.sliderElement = viewChild('sliderElement');
         this.rect = signal(undefined);
     }
@@ -414,36 +389,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 type: Input
             }], className: [{
                 type: Input
-            }], slideStart: [{
-                type: Output
-            }], slideMove: [{
-                type: Output
-            }], slideEnd: [{
-                type: Output
-            }], stepKeyDown: [{
-                type: Output
-            }], endKeyDown: [{
-                type: Output
-            }], homeKeyDown: [{
-                type: Output
             }] } });
 
+/**
+ * @group Components
+ */
 class RdxSliderRootComponent {
     constructor() {
         /** @ignore */
         this.orientationContext = inject(RdxSliderOrientationContextService);
+        /**
+         * The minimum value for the range.
+         *
+         * @group Props
+         * @defaultValue 0
+         */
         this.min = input(0, { transform: numberAttribute });
+        /**
+         * The maximum value for the range.
+         *
+         * @group Props
+         * @defaultValue 100
+         */
         this.max = input(100, { transform: numberAttribute });
+        /**
+         * The stepping interval.
+         *
+         * @group Props
+         * @defaultValue 1
+         */
         this.step = input(1, { transform: numberAttribute });
+        /**
+         * The minimum permitted steps between multiple thumbs.
+         *
+         * @group Props
+         * @defaultValue 0
+         */
         this.minStepsBetweenThumbs = input(0, { transform: numberAttribute });
+        /**
+         * The orientation of the slider.
+         *
+         * @group Props
+         * @defaultValue 'horizontal'
+         */
         this.orientation = input('horizontal');
+        /**
+         * When true, prevents the user from interacting with the slider.
+         *
+         * @group Props
+         * @defaultValue false
+         */
         this.disabled = input(false, { transform: booleanAttribute });
+        /**
+         * Whether the slider is visually inverted.
+         *
+         * @group Props
+         * @defaultValue false
+         */
         this.inverted = input(false, { transform: booleanAttribute });
+        /**
+         * The reading direction of the combobox when applicable.
+         *
+         * @group Props
+         * @defaultValue 'ltr'
+         */
         this.dir = input('ltr');
         this.className = '';
-        this.valueChange = new EventEmitter();
-        this.valueCommit = new EventEmitter();
+        /**
+         * Style class of the component.
+         *
+         * @group Props
+         */
+        this.styleClass = input();
+        /**
+         * The controlled value of the slider.
+         *
+         * @group Props
+         */
         this.modelValue = model([0]);
+        /**
+         * Event handler called when the slider value changes.
+         *
+         * @group Emits
+         */
+        this.valueChange = output();
+        /**
+         * Event handler called when the value changes at the end of an interaction.
+         *
+         * Useful when you only need to capture a final value e.g. to update a backend service.
+         *
+         * @group Emits
+         */
+        this.valueCommit = output();
         /** @ignore */
         this.valueIndexToChange = model(0);
         /** @ignore */
@@ -524,12 +561,12 @@ class RdxSliderRootComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxSliderRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: RdxSliderRootComponent, isStandalone: true, selector: "rdx-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, minStepsBetweenThumbs: { classPropertyName: "minStepsBetweenThumbs", publicName: "minStepsBetweenThumbs", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: false, isRequired: false, transformFunction: null }, modelValue: { classPropertyName: "modelValue", publicName: "modelValue", isSignal: true, isRequired: false, transformFunction: null }, valueIndexToChange: { classPropertyName: "valueIndexToChange", publicName: "valueIndexToChange", isSignal: true, isRequired: false, transformFunction: null }, valuesBeforeSlideStart: { classPropertyName: "valuesBeforeSlideStart", publicName: "valuesBeforeSlideStart", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", valueCommit: "valueCommit", modelValue: "modelValueChange", valueIndexToChange: "valueIndexToChangeChange", valuesBeforeSlideStart: "valuesBeforeSlideStartChange" }, providers: [RdxSliderOrientationContextService], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: RdxSliderRootComponent, isStandalone: true, selector: "rdx-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, minStepsBetweenThumbs: { classPropertyName: "minStepsBetweenThumbs", publicName: "minStepsBetweenThumbs", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, modelValue: { classPropertyName: "modelValue", publicName: "modelValue", isSignal: true, isRequired: false, transformFunction: null }, valueIndexToChange: { classPropertyName: "valueIndexToChange", publicName: "valueIndexToChange", isSignal: true, isRequired: false, transformFunction: null }, valuesBeforeSlideStart: { classPropertyName: "valuesBeforeSlideStart", publicName: "valuesBeforeSlideStart", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modelValue: "modelValueChange", valueChange: "valueChange", valueCommit: "valueCommit", valueIndexToChange: "valueIndexToChangeChange", valuesBeforeSlideStart: "valuesBeforeSlideStartChange" }, providers: [RdxSliderOrientationContextService], ngImport: i0, template: `
         <ng-template #transclude><ng-content /></ng-template>
 
         <ng-container *ngIf="orientation() === 'horizontal'">
             <rdx-slider-horizontal
-                [className]="className"
+                [className]="styleClass() || className"
                 [min]="min()"
                 [max]="max()"
                 [dir]="dir()"
@@ -550,7 +587,7 @@ class RdxSliderRootComponent {
 
         <ng-container *ngIf="orientation() === 'vertical'">
             <rdx-slider-vertical
-                [className]="className"
+                [className]="styleClass() || className"
                 [min]="min()"
                 [max]="max()"
                 [dir]="dir()"
@@ -581,7 +618,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
         <ng-container *ngIf="orientation() === 'horizontal'">
             <rdx-slider-horizontal
-                [className]="className"
+                [className]="styleClass() || className"
                 [min]="min()"
                 [max]="max()"
                 [dir]="dir()"
@@ -602,7 +639,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
         <ng-container *ngIf="orientation() === 'vertical'">
             <rdx-slider-vertical
-                [className]="className"
+                [className]="styleClass() || className"
                 [min]="min()"
                 [max]="max()"
                 [dir]="dir()"
@@ -624,10 +661,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 }]
         }], propDecorators: { className: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
-            }], valueCommit: [{
-                type: Output
             }] } });
 
 class RdxSliderRangeComponent {
@@ -655,7 +688,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             type: Component,
             args: [{
                     selector: 'rdx-slider-range',
-                    standalone: true,
                     host: {
                         '[attr.data-disabled]': 'rootContext.disabled() ? "" : undefined',
                         '[attr.data-orientation]': 'rootContext.orientation()',
@@ -752,7 +784,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             type: Directive,
             args: [{
                     selector: '[rdxSliderThumbImpl]',
-                    standalone: true,
                     host: {
                         role: 'slider',
                         '[tabindex]': 'rootContext.disabled() ? undefined : 0',
@@ -778,7 +809,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             type: Component,
             args: [{
                     selector: 'rdx-slider-thumb',
-                    standalone: true,
                     hostDirectives: [RdxSliderThumbImplDirective],
                     template: `
         <ng-content />
@@ -799,7 +829,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             type: Component,
             args: [{
                     selector: 'rdx-slider-track',
-                    standalone: true,
                     host: {
                         '[attr.data-disabled]': "rootContext.disabled() ? '' : undefined",
                         '[attr.data-orientation]': 'rootContext.orientation()'