@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.
- package/collapsible/src/collapsible-content.directive.d.ts +1 -1
- package/collapsible/src/collapsible-root.directive.d.ts +11 -11
- package/dialog/src/dialog-close.directive.d.ts +1 -1
- package/fesm2022/radix-ng-primitives-collapsible.mjs +20 -27
- package/fesm2022/radix-ng-primitives-collapsible.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-dialog.mjs +2 -3
- package/fesm2022/radix-ng-primitives-dialog.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-presence.mjs +250 -0
- package/fesm2022/radix-ng-primitives-presence.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-separator.mjs +1 -1
- package/fesm2022/radix-ng-primitives-separator.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-slider.mjs +101 -72
- package/fesm2022/radix-ng-primitives-slider.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-toggle-group.mjs +137 -280
- package/fesm2022/radix-ng-primitives-toggle-group.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-toggle.mjs +15 -2
- package/fesm2022/radix-ng-primitives-toggle.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-toolbar.mjs +155 -0
- package/fesm2022/radix-ng-primitives-toolbar.mjs.map +1 -0
- package/hover-card/src/hover-card-root.directive.d.ts +4 -4
- package/package.json +17 -8
- package/popover/src/popover-root.directive.d.ts +4 -4
- package/presence/index.d.ts +4 -0
- package/presence/src/presence.d.ts +42 -0
- package/presence/src/transitions/transition.collapse.d.ts +15 -0
- package/presence/src/transitions/transition.toast.d.ts +3 -0
- package/presence/src/types.d.ts +15 -0
- package/presence/src/utils.d.ts +42 -0
- package/schematics/collection.json +11 -0
- package/schematics/ng-add/index.d.ts +7 -0
- package/schematics/ng-add/index.js +31 -0
- package/schematics/ng-add/index.js.map +1 -0
- package/schematics/ng-add/schema.d.ts +3 -0
- package/schematics/ng-add/schema.js +3 -0
- package/schematics/ng-add/schema.js.map +1 -0
- package/separator/src/separator.directive.d.ts +1 -1
- package/slider/src/slider-horizontal.component.d.ts +6 -7
- package/slider/src/slider-impl.directive.d.ts +6 -7
- package/slider/src/slider-root.component.d.ts +78 -4
- package/slider/src/slider-vertical.component.d.ts +6 -7
- package/toggle/src/toggle.directive.d.ts +14 -1
- package/toggle-group/index.d.ts +1 -1
- package/toggle-group/src/toggle-group-item.directive.d.ts +20 -28
- package/toggle-group/src/toggle-group-item.token.d.ts +1 -0
- package/toggle-group/src/toggle-group-without-focus.directive.d.ts +69 -0
- package/toggle-group/src/toggle-group.directive.d.ts +26 -43
- package/toggle-group/src/toggle-group.token.d.ts +8 -4
- package/toolbar/README.md +3 -0
- package/toolbar/index.d.ts +19 -0
- package/toolbar/src/toolbar-button.directive.d.ts +11 -0
- package/toolbar/src/toolbar-link.directive.d.ts +7 -0
- package/toolbar/src/toolbar-root.directive.d.ts +8 -0
- package/toolbar/src/toolbar-root.token.d.ts +5 -0
- package/toolbar/src/toolbar-separator.directive.d.ts +6 -0
- package/toolbar/src/toolbar-toggle-group.directive.d.ts +6 -0
- package/toolbar/src/toolbar-toggle-item.directive.d.ts +6 -0
- package/tooltip/src/tooltip-root.directive.d.ts +4 -4
- package/compodoc/documentation.json +0 -39701
- 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":"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"}
|
@@ -42,7 +42,7 @@ class RdxSeparatorRootDirective {
|
|
42
42
|
*
|
43
43
|
* @ignore
|
44
44
|
*/
|
45
|
-
this.computedAriaOrientation = computed(() => !this.decorative() && this.orientation() === 'vertical' ? 'vertical' :
|
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' :
|
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,
|
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 =
|
103
|
-
this.slideMove =
|
104
|
-
this.slideEnd =
|
105
|
-
this.homeKeyDown =
|
106
|
-
this.endKeyDown =
|
107
|
-
this.stepKeyDown =
|
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
|
-
}]
|
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 =
|
193
|
-
this.slideMove =
|
194
|
-
this.slideEnd =
|
195
|
-
this.stepKeyDown =
|
196
|
-
this.endKeyDown =
|
197
|
-
this.homeKeyDown =
|
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 =
|
329
|
-
this.slideMove =
|
330
|
-
this.slideEnd =
|
331
|
-
this.stepKeyDown =
|
332
|
-
this.endKeyDown =
|
333
|
-
this.homeKeyDown =
|
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
|
-
|
445
|
-
|
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: {
|
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()'
|