@radix-ng/primitives 0.27.0 → 0.29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/collapsible/src/collapsible-content.directive.d.ts +1 -1
  2. package/collapsible/src/collapsible-root.directive.d.ts +11 -11
  3. package/dialog/src/dialog-close.directive.d.ts +1 -1
  4. package/fesm2022/radix-ng-primitives-collapsible.mjs +20 -27
  5. package/fesm2022/radix-ng-primitives-collapsible.mjs.map +1 -1
  6. package/fesm2022/radix-ng-primitives-dialog.mjs +2 -3
  7. package/fesm2022/radix-ng-primitives-dialog.mjs.map +1 -1
  8. package/fesm2022/radix-ng-primitives-presence.mjs +250 -0
  9. package/fesm2022/radix-ng-primitives-presence.mjs.map +1 -0
  10. package/fesm2022/radix-ng-primitives-separator.mjs +1 -1
  11. package/fesm2022/radix-ng-primitives-separator.mjs.map +1 -1
  12. package/fesm2022/radix-ng-primitives-slider.mjs +101 -72
  13. package/fesm2022/radix-ng-primitives-slider.mjs.map +1 -1
  14. package/fesm2022/radix-ng-primitives-toggle-group.mjs +137 -280
  15. package/fesm2022/radix-ng-primitives-toggle-group.mjs.map +1 -1
  16. package/fesm2022/radix-ng-primitives-toggle.mjs +15 -2
  17. package/fesm2022/radix-ng-primitives-toggle.mjs.map +1 -1
  18. package/fesm2022/radix-ng-primitives-toolbar.mjs +155 -0
  19. package/fesm2022/radix-ng-primitives-toolbar.mjs.map +1 -0
  20. package/hover-card/src/hover-card-root.directive.d.ts +4 -4
  21. package/package.json +17 -8
  22. package/popover/src/popover-root.directive.d.ts +4 -4
  23. package/presence/index.d.ts +4 -0
  24. package/presence/src/presence.d.ts +42 -0
  25. package/presence/src/transitions/transition.collapse.d.ts +15 -0
  26. package/presence/src/transitions/transition.toast.d.ts +3 -0
  27. package/presence/src/types.d.ts +15 -0
  28. package/presence/src/utils.d.ts +42 -0
  29. package/schematics/collection.json +11 -0
  30. package/schematics/ng-add/index.d.ts +7 -0
  31. package/schematics/ng-add/index.js +31 -0
  32. package/schematics/ng-add/index.js.map +1 -0
  33. package/schematics/ng-add/schema.d.ts +3 -0
  34. package/schematics/ng-add/schema.js +3 -0
  35. package/schematics/ng-add/schema.js.map +1 -0
  36. package/separator/src/separator.directive.d.ts +1 -1
  37. package/slider/src/slider-horizontal.component.d.ts +6 -7
  38. package/slider/src/slider-impl.directive.d.ts +6 -7
  39. package/slider/src/slider-root.component.d.ts +78 -4
  40. package/slider/src/slider-vertical.component.d.ts +6 -7
  41. package/toggle/src/toggle.directive.d.ts +14 -1
  42. package/toggle-group/index.d.ts +1 -1
  43. package/toggle-group/src/toggle-group-item.directive.d.ts +20 -28
  44. package/toggle-group/src/toggle-group-item.token.d.ts +1 -0
  45. package/toggle-group/src/toggle-group-without-focus.directive.d.ts +69 -0
  46. package/toggle-group/src/toggle-group.directive.d.ts +26 -43
  47. package/toggle-group/src/toggle-group.token.d.ts +8 -4
  48. package/toolbar/README.md +3 -0
  49. package/toolbar/index.d.ts +19 -0
  50. package/toolbar/src/toolbar-button.directive.d.ts +11 -0
  51. package/toolbar/src/toolbar-link.directive.d.ts +7 -0
  52. package/toolbar/src/toolbar-root.directive.d.ts +8 -0
  53. package/toolbar/src/toolbar-root.token.d.ts +5 -0
  54. package/toolbar/src/toolbar-separator.directive.d.ts +6 -0
  55. package/toolbar/src/toolbar-toggle-group.directive.d.ts +6 -0
  56. package/toolbar/src/toolbar-toggle-item.directive.d.ts +6 -0
  57. package/tooltip/src/tooltip-root.directive.d.ts +4 -4
  58. package/compodoc/documentation.json +0 -39701
  59. package/toggle-group/src/toggle-group-multiple.directive.d.ts +0 -99
@@ -0,0 +1,250 @@
1
+ import { Observable, EMPTY, of, Subject, endWith, fromEvent, filter, takeUntil, timer, race } from 'rxjs';
2
+
3
+ /**
4
+ * Ensures that the observable stream runs inside Angular's NgZone.
5
+ *
6
+ * This function is a higher-order function that takes an observable stream as input and ensures
7
+ * that all emissions, errors, and completion notifications are run inside Angular's NgZone. This
8
+ * is particularly useful for ensuring that change detection is triggered properly in Angular
9
+ * applications.
10
+ *
11
+ * @template T - The type of the items emitted by the observable.
12
+ * @param {NgZone} zone - The Angular zone to control the change detection context.
13
+ * @returns {(source: Observable<T>) => Observable<T>} - A function that takes an observable as input
14
+ * and returns an observable that runs inside Angular's NgZone.
15
+ *
16
+ * Example usage:
17
+ *
18
+ * const source$ = of('some value');
19
+ * const zoned$ = source$.pipe(runInZone(zone));
20
+ * zoned$.subscribe(value => {
21
+ * console.log('Value:', value);
22
+ * });
23
+ */
24
+ function runInZone(zone) {
25
+ return (source) => new Observable((observer) => source.subscribe({
26
+ next: (value) => zone.run(() => observer.next(value)),
27
+ error: (err) => zone.run(() => observer.error(err)),
28
+ complete: () => zone.run(() => observer.complete())
29
+ }));
30
+ }
31
+ /**
32
+ * Calculates the total transition duration in milliseconds for a given HTML element.
33
+ *
34
+ * This function retrieves the computed style of the specified element and extracts the
35
+ * transition duration and delay properties. It then converts these values from seconds
36
+ * to milliseconds and returns their sum, representing the total transition duration.
37
+ *
38
+ * @param {HTMLElement} element - The HTML element for which to calculate the transition duration.
39
+ * @returns {number} - The total transition duration in milliseconds.
40
+ *
41
+ * Example usage:
42
+ *
43
+ * const durationMs = getTransitionDurationMs(element);
44
+ * console.log(`Transition duration: ${durationMs} ms`);
45
+ */
46
+ function getTransitionDurationMs(element) {
47
+ const { transitionDelay, transitionDuration } = window.getComputedStyle(element);
48
+ const transitionDelaySec = parseFloat(transitionDelay);
49
+ const transitionDurationSec = parseFloat(transitionDuration);
50
+ return (transitionDelaySec + transitionDurationSec) * 1000;
51
+ }
52
+ function triggerReflow(element) {
53
+ return (element || document.body).getBoundingClientRect();
54
+ }
55
+
56
+ const noopFn = () => {
57
+ /* Noop */
58
+ };
59
+ const TransitionsMap = new Map();
60
+ /**
61
+ * Manages the presence of an element with optional transition animation.
62
+ *
63
+ * @template T - The type of the context object used in the transition.
64
+ * @param {NgZone} zone - The Angular zone to control the change detection context.
65
+ * @param {HTMLElement} element - The target HTML element to apply the transition.
66
+ * @param {TransitionOptions<T>} options - Options for controlling the transition behavior.
67
+ * @param {T} [options.context] - An optional context object to pass through the transition.
68
+ * @param {boolean} options.animation - A flag indicating if the transition should be animated.
69
+ * @param {'start' | 'continue' | 'stop'} options.state - The desired state of the transition.
70
+ * @param {TransitionStartFn<T>} startFn - A function to start the transition.
71
+ * @returns {Observable<void>} - An observable that emits when the transition completes.
72
+ *
73
+ * The `usePresence` function is designed to manage the presence and visibility of an HTML element,
74
+ * optionally applying a transition animation. It utilizes Angular's NgZone for efficient change
75
+ * detection management and allows for different states of transitions ('start', 'continue', 'stop').
76
+ * The function takes a start function to handle the beginning of the transition and returns an
77
+ * observable that completes when the transition ends.
78
+ *
79
+ * Example usage:
80
+ *
81
+ * const options: TransitionOptions<MyContext> = {
82
+ * context: {}, // your context object
83
+ * animation: true,
84
+ * state: 'start'
85
+ * };
86
+ *
87
+ * const startFn: TransitionStartFn<MyContext> = (el, animation, context) => {
88
+ * el.classList.add('active');
89
+ * return () => el.classList.remove('active');
90
+ * };
91
+ *
92
+ * usePresence(zone, element, startFn, options).subscribe(() => {
93
+ * console.log('Transition completed');
94
+ * });
95
+ */
96
+ const usePresence = (zone, element, startFn, options) => {
97
+ let context = options.context || {};
98
+ const transitionTimerDelayMs = options.transitionTimerDelayMs ?? 5;
99
+ const state = options.state ?? 'stop';
100
+ const running = TransitionsMap.get(element);
101
+ if (running) {
102
+ switch (state) {
103
+ case 'continue':
104
+ return EMPTY;
105
+ case 'stop':
106
+ zone.run(() => running.transition$.complete());
107
+ context = { ...running.context, ...context };
108
+ TransitionsMap.delete(element);
109
+ break;
110
+ }
111
+ }
112
+ const endFn = startFn(element, options.animation, context) || noopFn;
113
+ if (!options.animation || window.getComputedStyle(element).transitionProperty === 'none') {
114
+ zone.run(() => endFn());
115
+ return of(undefined).pipe(runInZone(zone));
116
+ }
117
+ const transition$ = new Subject();
118
+ const finishTransition$ = new Subject();
119
+ const stop$ = transition$.pipe(endWith(true));
120
+ TransitionsMap.set(element, {
121
+ transition$,
122
+ complete: () => {
123
+ finishTransition$.next();
124
+ finishTransition$.complete();
125
+ },
126
+ context
127
+ });
128
+ const transitionDurationMs = getTransitionDurationMs(element);
129
+ zone.runOutsideAngular(() => {
130
+ const transitionEnd$ = fromEvent(element, 'transitionend').pipe(filter(({ target }) => target === element), takeUntil(stop$));
131
+ const timer$ = timer(transitionDurationMs + transitionTimerDelayMs).pipe(takeUntil(stop$));
132
+ race(timer$, transitionEnd$, finishTransition$)
133
+ .pipe(takeUntil(stop$))
134
+ .subscribe(() => {
135
+ TransitionsMap.delete(element);
136
+ zone.run(() => {
137
+ endFn();
138
+ transition$.next();
139
+ transition$.complete();
140
+ });
141
+ });
142
+ });
143
+ return transition$.asObservable();
144
+ };
145
+ const completeTransition = (element) => {
146
+ TransitionsMap.get(element)?.complete();
147
+ };
148
+
149
+ // Define constants for class names
150
+ const COLLAPSE_CLASS = 'collapse';
151
+ const COLLAPSING_CLASS = 'collapsing';
152
+ const SHOW_CLASS = 'show';
153
+ /**
154
+ * Function to handle the start of a collapsing transition.
155
+ *
156
+ * @param element - The HTML element to animate.
157
+ * @param animation - Whether to use animation or not.
158
+ * @param context - The context containing direction and dimension information.
159
+ * @returns A function to clean up the animation.
160
+ */
161
+ const transitionCollapsing = (element, animation, context) => {
162
+ const { direction, dimension } = context;
163
+ let { maxSize } = context;
164
+ const { classList } = element;
165
+ /**
166
+ * Sets initial classes based on the direction.
167
+ */
168
+ function setInitialClasses() {
169
+ classList.add(COLLAPSE_CLASS);
170
+ if (direction === 'show') {
171
+ classList.add(SHOW_CLASS);
172
+ }
173
+ else {
174
+ classList.remove(SHOW_CLASS);
175
+ }
176
+ }
177
+ if (!animation) {
178
+ setInitialClasses();
179
+ return;
180
+ }
181
+ if (!maxSize) {
182
+ maxSize = measureCollapsingElementDimensionPx(element, dimension);
183
+ context.maxSize = maxSize;
184
+ // Fix the height before starting the animation
185
+ element.style[dimension] = direction !== 'show' ? maxSize : '0px';
186
+ classList.remove(COLLAPSE_CLASS, COLLAPSING_CLASS, 'show');
187
+ triggerReflow(element);
188
+ // Start the animation
189
+ classList.add(COLLAPSING_CLASS);
190
+ }
191
+ element.style[dimension] = direction === 'show' ? maxSize : '0px';
192
+ return () => {
193
+ setInitialClasses();
194
+ classList.remove(COLLAPSING_CLASS);
195
+ element.style[dimension] = '';
196
+ };
197
+ };
198
+ /**
199
+ * Measures the dimension of the collapsing element in pixels.
200
+ *
201
+ * @param element - The HTML element to measure.
202
+ * @param dimension - The dimension ('width' or 'height') to measure.
203
+ * @returns The size of the dimension in pixels.
204
+ */
205
+ function measureCollapsingElementDimensionPx(element, dimension) {
206
+ // SSR fix
207
+ if (typeof navigator === 'undefined') {
208
+ return '0px';
209
+ }
210
+ const { classList } = element;
211
+ const hasShownClass = classList.contains(SHOW_CLASS);
212
+ if (!hasShownClass) {
213
+ classList.add(SHOW_CLASS);
214
+ }
215
+ element.style[dimension] = '';
216
+ const dimensionSize = element.getBoundingClientRect()[dimension] + 'px';
217
+ if (!hasShownClass) {
218
+ classList.remove(SHOW_CLASS);
219
+ }
220
+ return dimensionSize;
221
+ }
222
+
223
+ const toastFadeInTransition = (element, animation) => {
224
+ const { classList } = element;
225
+ if (animation) {
226
+ classList.add('fade');
227
+ }
228
+ else {
229
+ classList.add('show');
230
+ return;
231
+ }
232
+ triggerReflow(element);
233
+ classList.add('show', 'showing');
234
+ return () => {
235
+ classList.remove('showing');
236
+ };
237
+ };
238
+ const toastFadeOutTransition = ({ classList }) => {
239
+ classList.add('showing');
240
+ return () => {
241
+ classList.remove('show', 'showing');
242
+ };
243
+ };
244
+
245
+ /**
246
+ * Generated bundle index. Do not edit.
247
+ */
248
+
249
+ export { completeTransition, toastFadeInTransition, toastFadeOutTransition, transitionCollapsing, usePresence };
250
+ //# sourceMappingURL=radix-ng-primitives-presence.mjs.map
@@ -0,0 +1 @@
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":";;AAGA;;;;;;;;;;;;;;;;;;;;AAoBG;AACH,SAAS,SAAS,CAAI,IAAY,EAAA;AAC9B,IAAA,OAAO,CAAC,MAAqB,KACzB,IAAI,UAAU,CAAC,CAAC,QAAQ,KACpB,MAAM,CAAC,SAAS,CAAC;AACb,QAAA,IAAI,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,GAAG,CAAC,MAAM,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AACrD,QAAA,KAAK,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,CAAC,MAAM,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AACnD,QAAA,QAAQ,EAAE,MAAM,IAAI,CAAC,GAAG,CAAC,MAAM,QAAQ,CAAC,QAAQ,EAAE;AACrD,KAAA,CAAC,CACL;AACT;AAEA;;;;;;;;;;;;;;AAcG;AACH,SAAS,uBAAuB,CAAC,OAAoB,EAAA;AACjD,IAAA,MAAM,EAAE,eAAe,EAAE,kBAAkB,EAAE,GAAG,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC;AAChF,IAAA,MAAM,kBAAkB,GAAG,UAAU,CAAC,eAAe,CAAC;AACtD,IAAA,MAAM,qBAAqB,GAAG,UAAU,CAAC,kBAAkB,CAAC;AAE5D,IAAA,OAAO,CAAC,kBAAkB,GAAG,qBAAqB,IAAI,IAAI;AAC9D;AAIM,SAAU,aAAa,CAAC,OAAoB,EAAA;IAC9C,OAAO,CAAC,OAAO,IAAI,QAAQ,CAAC,IAAI,EAAE,qBAAqB,EAAE;AAC7D;;ACzDA,MAAM,MAAM,GAAoB,MAAK;;AAErC,CAAC;AACD,MAAM,cAAc,GAAG,IAAI,GAAG,EAAuC;AAErE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCG;AACG,MAAA,WAAW,GAAG,CAChB,IAAY,EACZ,OAAoB,EACpB,OAA6B,EAC7B,OAA6B,KACX;AAClB,IAAA,IAAI,OAAO,GAAG,OAAO,CAAC,OAAO,IAAO,EAAE;AAEtC,IAAA,MAAM,sBAAsB,GAAG,OAAO,CAAC,sBAAsB,IAAI,CAAC;AAClE,IAAA,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,IAAI,MAAM;IAErC,MAAM,OAAO,GAAG,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC;IAE3C,IAAI,OAAO,EAAE;QACT,QAAQ,KAAK;AACT,YAAA,KAAK,UAAU;AACX,gBAAA,OAAO,KAAK;AAChB,YAAA,KAAK,MAAM;AACP,gBAAA,IAAI,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC;gBAC9C,OAAO,GAAG,EAAE,GAAG,OAAO,CAAC,OAAO,EAAE,GAAG,OAAO,EAAE;AAC5C,gBAAA,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC;gBAC9B;;;AAGZ,IAAA,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,IAAI,MAAM;AAEpE,IAAA,IAAI,CAAC,OAAO,CAAC,SAAS,IAAI,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,kBAAkB,KAAK,MAAM,EAAE;QACtF,IAAI,CAAC,GAAG,CAAC,MAAM,KAAK,EAAE,CAAC;AACvB,QAAA,OAAO,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;;AAG9C,IAAA,MAAM,WAAW,GAAG,IAAI,OAAO,EAAQ;AACvC,IAAA,MAAM,iBAAiB,GAAG,IAAI,OAAO,EAAQ;IAC7C,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;AAE7C,IAAA,cAAc,CAAC,GAAG,CAAC,OAAO,EAAE;QACxB,WAAW;QACX,QAAQ,EAAE,MAAK;YACX,iBAAiB,CAAC,IAAI,EAAE;YACxB,iBAAiB,CAAC,QAAQ,EAAE;SAC/B;QACD;AACH,KAAA,CAAC;AAEF,IAAA,MAAM,oBAAoB,GAAG,uBAAuB,CAAC,OAAO,CAAC;AAE7D,IAAA,IAAI,CAAC,iBAAiB,CAAC,MAAK;AACxB,QAAA,MAAM,cAAc,GAAG,SAAS,CAAkB,OAAO,EAAE,eAAe,CAAC,CAAC,IAAI,CAC5E,MAAM,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,MAAM,KAAK,OAAO,CAAC,EAC1C,SAAS,CAAC,KAAK,CAAC,CACnB;AACD,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,oBAAoB,GAAG,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;AAE1F,QAAA,IAAI,CAAC,MAAM,EAAE,cAAc,EAAE,iBAAiB;AACzC,aAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;aACrB,SAAS,CAAC,MAAK;AACZ,YAAA,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC;AAC9B,YAAA,IAAI,CAAC,GAAG,CAAC,MAAK;AACV,gBAAA,KAAK,EAAE;gBACP,WAAW,CAAC,IAAI,EAAE;gBAClB,WAAW,CAAC,QAAQ,EAAE;AAC1B,aAAC,CAAC;AACN,SAAC,CAAC;AACV,KAAC,CAAC;AAEF,IAAA,OAAO,WAAW,CAAC,YAAY,EAAE;AACrC;AAEA,MAAM,kBAAkB,GAAG,CAAC,OAAoB,KAAI;IAChD,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,QAAQ,EAAE;AAC3C;;AC3GA;AACA,MAAM,cAAc,GAAG,UAAU;AACjC,MAAM,gBAAgB,GAAG,YAAY;AACrC,MAAM,UAAU,GAAG,MAAM;AACzB;;;;;;;AAOG;AACU,MAAA,oBAAoB,GAAuC,CACpE,OAAoB,EACpB,SAAkB,EAClB,OAAwB,KACxB;AACA,IAAA,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,OAAO;AACxC,IAAA,IAAI,EAAE,OAAO,EAAE,GAAG,OAAO;AACzB,IAAA,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO;AAE7B;;AAEG;AACH,IAAA,SAAS,iBAAiB,GAAA;AACtB,QAAA,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC;AAC7B,QAAA,IAAI,SAAS,KAAK,MAAM,EAAE;AACtB,YAAA,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC;;aACtB;AACH,YAAA,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC;;;IAIpC,IAAI,CAAC,SAAS,EAAE;AACZ,QAAA,iBAAiB,EAAE;QACnB;;IAGJ,IAAI,CAAC,OAAO,EAAE;AACV,QAAA,OAAO,GAAG,mCAAmC,CAAC,OAAO,EAAE,SAAS,CAAC;AACjE,QAAA,OAAO,CAAC,OAAO,GAAG,OAAO;;AAGzB,QAAA,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,SAAS,KAAK,MAAM,GAAG,OAAO,GAAG,KAAK;QAEjE,SAAS,CAAC,MAAM,CAAC,cAAc,EAAE,gBAAgB,EAAE,MAAM,CAAC;QAE1D,aAAa,CAAC,OAAO,CAAC;;AAGtB,QAAA,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC;;AAGnC,IAAA,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,SAAS,KAAK,MAAM,GAAG,OAAO,GAAG,KAAK;AAEjE,IAAA,OAAO,MAAK;AACR,QAAA,iBAAiB,EAAE;AACnB,QAAA,SAAS,CAAC,MAAM,CAAC,gBAAgB,CAAC;AAClC,QAAA,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;AACjC,KAAC;AACL;AAEA;;;;;;AAMG;AACH,SAAS,mCAAmC,CAAC,OAAoB,EAAE,SAA6B,EAAA;;AAE5F,IAAA,IAAI,OAAO,SAAS,KAAK,WAAW,EAAE;AAClC,QAAA,OAAO,KAAK;;AAGhB,IAAA,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO;IAC7B,MAAM,aAAa,GAAG,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC;IACpD,IAAI,CAAC,aAAa,EAAE;AAChB,QAAA,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC;;AAG7B,IAAA,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;IAC7B,MAAM,aAAa,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC,SAAS,CAAC,GAAG,IAAI;IAEvE,IAAI,CAAC,aAAa,EAAE;AAChB,QAAA,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC;;AAGhC,IAAA,OAAO,aAAa;AACxB;;MC/Fa,qBAAqB,GAAsB,CAAC,OAAoB,EAAE,SAAkB,KAAI;AACjG,IAAA,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO;IAE7B,IAAI,SAAS,EAAE;AACX,QAAA,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC;;SAClB;AACH,QAAA,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC;QACrB;;IAGJ,aAAa,CAAC,OAAO,CAAC;AACtB,IAAA,SAAS,CAAC,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC;AAEhC,IAAA,OAAO,MAAK;AACR,QAAA,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC;AAC/B,KAAC;AACL;MAEa,sBAAsB,GAAsB,CAAC,EAAE,SAAS,EAAe,KAAI;AACpF,IAAA,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC;AACxB,IAAA,OAAO,MAAK;AACR,QAAA,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC;AACvC,KAAC;AACL;;AC1BA;;AAEG;;;;"}
@@ -42,7 +42,7 @@ class RdxSeparatorRootDirective {
42
42
  *
43
43
  * @ignore
44
44
  */
45
- this.computedAriaOrientation = computed(() => !this.decorative() && this.orientation() === 'vertical' ? 'vertical' : null);
45
+ this.computedAriaOrientation = computed(() => !this.decorative() && this.orientation() === 'vertical' ? 'vertical' : undefined);
46
46
  }
47
47
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxSeparatorRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
48
48
  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 }); }
@@ -1 +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;;;;"}
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' : 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;;;;"}
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { inject, EventEmitter, Directive, Output, input, booleanAttribute, viewChild, signal, Component, Input, Injectable, numberAttribute, model, computed, ElementRef, PLATFORM_ID, NgModule } from '@angular/core';
2
+ import { inject, output, Directive, input, booleanAttribute, viewChild, signal, Component, Input, Injectable, numberAttribute, model, computed, ElementRef, PLATFORM_ID, NgModule } from '@angular/core';
3
3
  import { NgIf, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
4
4
 
5
5
  // 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
99
99
  class RdxSliderImplDirective {
100
100
  constructor() {
101
101
  this.rootContext = inject(RdxSliderRootComponent);
102
- this.slideStart = new EventEmitter();
103
- this.slideMove = new EventEmitter();
104
- this.slideEnd = new EventEmitter();
105
- this.homeKeyDown = new EventEmitter();
106
- this.endKeyDown = new EventEmitter();
107
- this.stepKeyDown = new EventEmitter();
102
+ this.slideStart = output();
103
+ this.slideMove = output();
104
+ this.slideEnd = output();
105
+ this.homeKeyDown = output();
106
+ this.endKeyDown = output();
107
+ this.stepKeyDown = output();
108
108
  }
109
109
  onKeyDown(event) {
110
110
  if (event.key === 'Home') {
@@ -157,7 +157,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
157
157
  type: Directive,
158
158
  args: [{
159
159
  selector: '[rdxSliderImpl]',
160
- standalone: true,
161
160
  host: {
162
161
  role: 'slider',
163
162
  tabindex: '0',
@@ -167,19 +166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
167
166
  '(pointerup)': 'onPointerUp($event)'
168
167
  }
169
168
  }]
170
- }], propDecorators: { slideStart: [{
171
- type: Output
172
- }], slideMove: [{
173
- type: Output
174
- }], slideEnd: [{
175
- type: Output
176
- }], homeKeyDown: [{
177
- type: Output
178
- }], endKeyDown: [{
179
- type: Output
180
- }], stepKeyDown: [{
181
- type: Output
182
- }] } });
169
+ }] });
183
170
 
184
171
  class RdxSliderHorizontalComponent {
185
172
  constructor() {
@@ -189,12 +176,12 @@ class RdxSliderHorizontalComponent {
189
176
  this.min = 0;
190
177
  this.max = 100;
191
178
  this.className = '';
192
- this.slideStart = new EventEmitter();
193
- this.slideMove = new EventEmitter();
194
- this.slideEnd = new EventEmitter();
195
- this.stepKeyDown = new EventEmitter();
196
- this.endKeyDown = new EventEmitter();
197
- this.homeKeyDown = new EventEmitter();
179
+ this.slideStart = output();
180
+ this.slideMove = output();
181
+ this.slideEnd = output();
182
+ this.stepKeyDown = output();
183
+ this.endKeyDown = output();
184
+ this.homeKeyDown = output();
198
185
  this.sliderElement = viewChild('sliderElement');
199
186
  this.rect = signal(undefined);
200
187
  }
@@ -278,18 +265,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
278
265
  type: Input
279
266
  }], className: [{
280
267
  type: Input
281
- }], slideStart: [{
282
- type: Output
283
- }], slideMove: [{
284
- type: Output
285
- }], slideEnd: [{
286
- type: Output
287
- }], stepKeyDown: [{
288
- type: Output
289
- }], endKeyDown: [{
290
- type: Output
291
- }], homeKeyDown: [{
292
- type: Output
293
268
  }] } });
294
269
 
295
270
  class RdxSliderOrientationContextService {
@@ -325,12 +300,12 @@ class RdxSliderVerticalComponent {
325
300
  this.min = 0;
326
301
  this.max = 100;
327
302
  this.className = '';
328
- this.slideStart = new EventEmitter();
329
- this.slideMove = new EventEmitter();
330
- this.slideEnd = new EventEmitter();
331
- this.stepKeyDown = new EventEmitter();
332
- this.endKeyDown = new EventEmitter();
333
- this.homeKeyDown = new EventEmitter();
303
+ this.slideStart = output();
304
+ this.slideMove = output();
305
+ this.slideEnd = output();
306
+ this.stepKeyDown = output();
307
+ this.endKeyDown = output();
308
+ this.homeKeyDown = output();
334
309
  this.sliderElement = viewChild('sliderElement');
335
310
  this.rect = signal(undefined);
336
311
  }
@@ -414,36 +389,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
414
389
  type: Input
415
390
  }], className: [{
416
391
  type: Input
417
- }], slideStart: [{
418
- type: Output
419
- }], slideMove: [{
420
- type: Output
421
- }], slideEnd: [{
422
- type: Output
423
- }], stepKeyDown: [{
424
- type: Output
425
- }], endKeyDown: [{
426
- type: Output
427
- }], homeKeyDown: [{
428
- type: Output
429
392
  }] } });
430
393
 
394
+ /**
395
+ * @group Components
396
+ */
431
397
  class RdxSliderRootComponent {
432
398
  constructor() {
433
399
  /** @ignore */
434
400
  this.orientationContext = inject(RdxSliderOrientationContextService);
401
+ /**
402
+ * The minimum value for the range.
403
+ *
404
+ * @group Props
405
+ * @defaultValue 0
406
+ */
435
407
  this.min = input(0, { transform: numberAttribute });
408
+ /**
409
+ * The maximum value for the range.
410
+ *
411
+ * @group Props
412
+ * @defaultValue 100
413
+ */
436
414
  this.max = input(100, { transform: numberAttribute });
415
+ /**
416
+ * The stepping interval.
417
+ *
418
+ * @group Props
419
+ * @defaultValue 1
420
+ */
437
421
  this.step = input(1, { transform: numberAttribute });
422
+ /**
423
+ * The minimum permitted steps between multiple thumbs.
424
+ *
425
+ * @group Props
426
+ * @defaultValue 0
427
+ */
438
428
  this.minStepsBetweenThumbs = input(0, { transform: numberAttribute });
429
+ /**
430
+ * The orientation of the slider.
431
+ *
432
+ * @group Props
433
+ * @defaultValue 'horizontal'
434
+ */
439
435
  this.orientation = input('horizontal');
436
+ /**
437
+ * When true, prevents the user from interacting with the slider.
438
+ *
439
+ * @group Props
440
+ * @defaultValue false
441
+ */
440
442
  this.disabled = input(false, { transform: booleanAttribute });
443
+ /**
444
+ * Whether the slider is visually inverted.
445
+ *
446
+ * @group Props
447
+ * @defaultValue false
448
+ */
441
449
  this.inverted = input(false, { transform: booleanAttribute });
450
+ /**
451
+ * The reading direction of the combobox when applicable.
452
+ *
453
+ * @group Props
454
+ * @defaultValue 'ltr'
455
+ */
442
456
  this.dir = input('ltr');
443
457
  this.className = '';
444
- this.valueChange = new EventEmitter();
445
- this.valueCommit = new EventEmitter();
458
+ /**
459
+ * Style class of the component.
460
+ *
461
+ * @group Props
462
+ */
463
+ this.styleClass = input();
464
+ /**
465
+ * The controlled value of the slider.
466
+ *
467
+ * @group Props
468
+ */
446
469
  this.modelValue = model([0]);
470
+ /**
471
+ * Event handler called when the slider value changes.
472
+ *
473
+ * @group Emits
474
+ */
475
+ this.valueChange = output();
476
+ /**
477
+ * Event handler called when the value changes at the end of an interaction.
478
+ *
479
+ * Useful when you only need to capture a final value e.g. to update a backend service.
480
+ *
481
+ * @group Emits
482
+ */
483
+ this.valueCommit = output();
447
484
  /** @ignore */
448
485
  this.valueIndexToChange = model(0);
449
486
  /** @ignore */
@@ -524,12 +561,12 @@ class RdxSliderRootComponent {
524
561
  }
525
562
  }
526
563
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxSliderRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
527
- 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: `
564
+ 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: `
528
565
  <ng-template #transclude><ng-content /></ng-template>
529
566
 
530
567
  <ng-container *ngIf="orientation() === 'horizontal'">
531
568
  <rdx-slider-horizontal
532
- [className]="className"
569
+ [className]="styleClass() || className"
533
570
  [min]="min()"
534
571
  [max]="max()"
535
572
  [dir]="dir()"
@@ -550,7 +587,7 @@ class RdxSliderRootComponent {
550
587
 
551
588
  <ng-container *ngIf="orientation() === 'vertical'">
552
589
  <rdx-slider-vertical
553
- [className]="className"
590
+ [className]="styleClass() || className"
554
591
  [min]="min()"
555
592
  [max]="max()"
556
593
  [dir]="dir()"
@@ -581,7 +618,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
581
618
 
582
619
  <ng-container *ngIf="orientation() === 'horizontal'">
583
620
  <rdx-slider-horizontal
584
- [className]="className"
621
+ [className]="styleClass() || className"
585
622
  [min]="min()"
586
623
  [max]="max()"
587
624
  [dir]="dir()"
@@ -602,7 +639,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
602
639
 
603
640
  <ng-container *ngIf="orientation() === 'vertical'">
604
641
  <rdx-slider-vertical
605
- [className]="className"
642
+ [className]="styleClass() || className"
606
643
  [min]="min()"
607
644
  [max]="max()"
608
645
  [dir]="dir()"
@@ -624,10 +661,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
624
661
  }]
625
662
  }], propDecorators: { className: [{
626
663
  type: Input
627
- }], valueChange: [{
628
- type: Output
629
- }], valueCommit: [{
630
- type: Output
631
664
  }] } });
632
665
 
633
666
  class RdxSliderRangeComponent {
@@ -655,7 +688,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
655
688
  type: Component,
656
689
  args: [{
657
690
  selector: 'rdx-slider-range',
658
- standalone: true,
659
691
  host: {
660
692
  '[attr.data-disabled]': 'rootContext.disabled() ? "" : undefined',
661
693
  '[attr.data-orientation]': 'rootContext.orientation()',
@@ -752,7 +784,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
752
784
  type: Directive,
753
785
  args: [{
754
786
  selector: '[rdxSliderThumbImpl]',
755
- standalone: true,
756
787
  host: {
757
788
  role: 'slider',
758
789
  '[tabindex]': 'rootContext.disabled() ? undefined : 0',
@@ -778,7 +809,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
778
809
  type: Component,
779
810
  args: [{
780
811
  selector: 'rdx-slider-thumb',
781
- standalone: true,
782
812
  hostDirectives: [RdxSliderThumbImplDirective],
783
813
  template: `
784
814
  <ng-content />
@@ -799,7 +829,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
799
829
  type: Component,
800
830
  args: [{
801
831
  selector: 'rdx-slider-track',
802
- standalone: true,
803
832
  host: {
804
833
  '[attr.data-disabled]': "rootContext.disabled() ? '' : undefined",
805
834
  '[attr.data-orientation]': 'rootContext.orientation()'