ng-primitives 0.95.0 → 0.96.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/fesm2022/ng-primitives-progress.mjs +121 -121
- package/fesm2022/ng-primitives-progress.mjs.map +1 -1
- package/fesm2022/ng-primitives-slider.mjs +260 -264
- package/fesm2022/ng-primitives-slider.mjs.map +1 -1
- package/fesm2022/ng-primitives-toast.mjs.map +1 -1
- package/package.json +1 -1
- package/progress/index.d.ts +66 -56
- package/schematics/ng-generate/templates/range-slider/range-slider.__fileSuffix@dasherize__.ts.template +6 -5
- package/slider/index.d.ts +251 -91
- package/toast/index.d.ts +1 -1
package/progress/index.d.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import
|
|
3
|
-
import * as ng_primitives_progress from 'ng-primitives/progress';
|
|
2
|
+
import { Signal } from '@angular/core';
|
|
4
3
|
import { NumberInput } from '@angular/cdk/coercion';
|
|
5
4
|
|
|
6
5
|
/**
|
|
@@ -8,27 +7,12 @@ import { NumberInput } from '@angular/cdk/coercion';
|
|
|
8
7
|
* The width of this element can be set to the percentage of the progress value.
|
|
9
8
|
*/
|
|
10
9
|
declare class NgpProgressIndicator {
|
|
11
|
-
|
|
12
|
-
* Access the progress state.
|
|
13
|
-
*/
|
|
14
|
-
protected readonly state: _angular_core.Signal<ng_primitives_state.State<ng_primitives_progress.NgpProgress>>;
|
|
15
|
-
/**
|
|
16
|
-
* Get the percentage of the progress value.
|
|
17
|
-
*/
|
|
18
|
-
protected readonly percentage: _angular_core.Signal<number | null>;
|
|
10
|
+
constructor();
|
|
19
11
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpProgressIndicator, never>;
|
|
20
12
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpProgressIndicator, "[ngpProgressIndicator]", never, {}, {}, never, never, true, never>;
|
|
21
13
|
}
|
|
22
14
|
|
|
23
15
|
declare class NgpProgressLabel {
|
|
24
|
-
/**
|
|
25
|
-
* Access the progress state.
|
|
26
|
-
*/
|
|
27
|
-
protected readonly state: _angular_core.Signal<ng_primitives_state.State<ng_primitives_progress.NgpProgress>>;
|
|
28
|
-
/**
|
|
29
|
-
* Access the element ref.
|
|
30
|
-
*/
|
|
31
|
-
protected readonly elementRef: _angular_core.ElementRef<HTMLElement>;
|
|
32
16
|
/**
|
|
33
17
|
* The unique identifier for the progress label.
|
|
34
18
|
*/
|
|
@@ -39,19 +23,13 @@ declare class NgpProgressLabel {
|
|
|
39
23
|
}
|
|
40
24
|
|
|
41
25
|
declare class NgpProgressTrack {
|
|
42
|
-
|
|
43
|
-
* Access the progress state.
|
|
44
|
-
*/
|
|
45
|
-
protected readonly state: _angular_core.Signal<ng_primitives_state.State<ng_primitives_progress.NgpProgress>>;
|
|
26
|
+
constructor();
|
|
46
27
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpProgressTrack, never>;
|
|
47
28
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpProgressTrack, "[ngpProgressTrack]", ["ngpProgressTrack"], {}, {}, never, never, true, never>;
|
|
48
29
|
}
|
|
49
30
|
|
|
50
31
|
declare class NgpProgressValue {
|
|
51
|
-
|
|
52
|
-
* Access the progress state.
|
|
53
|
-
*/
|
|
54
|
-
protected readonly state: _angular_core.Signal<ng_primitives_state.State<ng_primitives_progress.NgpProgress>>;
|
|
32
|
+
constructor();
|
|
55
33
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpProgressValue, never>;
|
|
56
34
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpProgressValue, "[ngpProgressValue]", ["ngpProgressValue"], {}, {}, never, never, true, never>;
|
|
57
35
|
}
|
|
@@ -86,47 +64,79 @@ declare class NgpProgress {
|
|
|
86
64
|
*/
|
|
87
65
|
readonly id: _angular_core.InputSignal<string>;
|
|
88
66
|
/**
|
|
89
|
-
*
|
|
90
|
-
* @internal
|
|
91
|
-
*/
|
|
92
|
-
readonly indeterminate: _angular_core.Signal<boolean>;
|
|
93
|
-
/**
|
|
94
|
-
* Determine if the progress is in a progressing state.
|
|
95
|
-
* @internal
|
|
96
|
-
*/
|
|
97
|
-
readonly progressing: _angular_core.Signal<boolean>;
|
|
98
|
-
/**
|
|
99
|
-
* Determine if the progress is complete.
|
|
67
|
+
* The state of the progress bar.
|
|
100
68
|
* @internal
|
|
101
69
|
*/
|
|
102
|
-
readonly
|
|
70
|
+
private readonly state;
|
|
103
71
|
/**
|
|
104
72
|
* Get the progress value text.
|
|
105
73
|
*/
|
|
106
74
|
protected readonly valueText: _angular_core.Signal<string>;
|
|
107
|
-
/**
|
|
108
|
-
* The label associated with the progress bar.
|
|
109
|
-
* @internal
|
|
110
|
-
*/
|
|
111
|
-
readonly label: _angular_core.WritableSignal<NgpProgressLabel | null>;
|
|
112
|
-
/**
|
|
113
|
-
* The state of the progress bar.
|
|
114
|
-
* @internal
|
|
115
|
-
*/
|
|
116
|
-
protected readonly state: ng_primitives_state.CreatedState<NgpProgress>;
|
|
117
75
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpProgress, never>;
|
|
118
76
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpProgress, "[ngpProgress]", never, { "value": { "alias": "ngpProgressValue"; "required": false; "isSignal": true; }; "min": { "alias": "ngpProgressMin"; "required": false; "isSignal": true; }; "max": { "alias": "ngpProgressMax"; "required": false; "isSignal": true; }; "valueLabel": { "alias": "ngpProgressValueLabel"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
119
77
|
}
|
|
120
78
|
type NgpProgressValueTextFn = (value: number, max: number) => string;
|
|
121
79
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
80
|
+
declare const injectProgressState: {
|
|
81
|
+
(): Signal<{
|
|
82
|
+
max: Signal<number>;
|
|
83
|
+
min: Signal<number>;
|
|
84
|
+
labelId: _angular_core.WritableSignal<string | undefined>;
|
|
85
|
+
valueText: Signal<string>;
|
|
86
|
+
id: Signal<string>;
|
|
87
|
+
value: Signal<number | null>;
|
|
88
|
+
indeterminate: Signal<boolean>;
|
|
89
|
+
progressing: Signal<boolean>;
|
|
90
|
+
complete: Signal<boolean>;
|
|
91
|
+
setLabel: (id: string) => void;
|
|
92
|
+
}>;
|
|
93
|
+
(options: {
|
|
94
|
+
hoisted: true;
|
|
95
|
+
optional?: boolean;
|
|
96
|
+
skipSelf?: boolean;
|
|
97
|
+
}): Signal<{
|
|
98
|
+
max: Signal<number>;
|
|
99
|
+
min: Signal<number>;
|
|
100
|
+
labelId: _angular_core.WritableSignal<string | undefined>;
|
|
101
|
+
valueText: Signal<string>;
|
|
102
|
+
id: Signal<string>;
|
|
103
|
+
value: Signal<number | null>;
|
|
104
|
+
indeterminate: Signal<boolean>;
|
|
105
|
+
progressing: Signal<boolean>;
|
|
106
|
+
complete: Signal<boolean>;
|
|
107
|
+
setLabel: (id: string) => void;
|
|
108
|
+
} | null>;
|
|
109
|
+
(options?: {
|
|
110
|
+
hoisted?: boolean;
|
|
111
|
+
optional?: boolean;
|
|
112
|
+
skipSelf?: boolean;
|
|
113
|
+
}): Signal<{
|
|
114
|
+
max: Signal<number>;
|
|
115
|
+
min: Signal<number>;
|
|
116
|
+
labelId: _angular_core.WritableSignal<string | undefined>;
|
|
117
|
+
valueText: Signal<string>;
|
|
118
|
+
id: Signal<string>;
|
|
119
|
+
value: Signal<number | null>;
|
|
120
|
+
indeterminate: Signal<boolean>;
|
|
121
|
+
progressing: Signal<boolean>;
|
|
122
|
+
complete: Signal<boolean>;
|
|
123
|
+
setLabel: (id: string) => void;
|
|
124
|
+
}> | Signal<{
|
|
125
|
+
max: Signal<number>;
|
|
126
|
+
min: Signal<number>;
|
|
127
|
+
labelId: _angular_core.WritableSignal<string | undefined>;
|
|
128
|
+
valueText: Signal<string>;
|
|
129
|
+
id: Signal<string>;
|
|
130
|
+
value: Signal<number | null>;
|
|
131
|
+
indeterminate: Signal<boolean>;
|
|
132
|
+
progressing: Signal<boolean>;
|
|
133
|
+
complete: Signal<boolean>;
|
|
134
|
+
setLabel: (id: string) => void;
|
|
135
|
+
} | null>;
|
|
136
|
+
};
|
|
137
|
+
declare const provideProgressState: (opts?: {
|
|
138
|
+
inherit?: boolean;
|
|
139
|
+
}) => _angular_core.FactoryProvider;
|
|
130
140
|
|
|
131
141
|
export { NgpProgress, NgpProgressIndicator, NgpProgressLabel, NgpProgressTrack, NgpProgressValue, injectProgressState, provideProgressState };
|
|
132
142
|
export type { NgpProgressValueTextFn };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Component, input } from '@angular/core';
|
|
2
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
2
3
|
import { ControlValueAccessor } from '@angular/forms';
|
|
3
|
-
import { explicitEffect } from 'ng-primitives/internal';
|
|
4
4
|
import {
|
|
5
5
|
injectRangeSliderState,
|
|
6
6
|
NgpRangeSlider,
|
|
@@ -10,6 +10,7 @@ import {
|
|
|
10
10
|
provideRangeSliderState,
|
|
11
11
|
} from 'ng-primitives/slider';
|
|
12
12
|
import { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';
|
|
13
|
+
import { merge } from 'rxjs';
|
|
13
14
|
|
|
14
15
|
@Component({
|
|
15
16
|
selector: '<%= prefix %>-range-slider',
|
|
@@ -106,9 +107,9 @@ export class RangeSlider<%= componentSuffix %> implements ControlValueAccessor {
|
|
|
106
107
|
|
|
107
108
|
constructor() {
|
|
108
109
|
// Whenever either value changes, call the onChange function with the new tuple [low, high].
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
110
|
+
merge(this.state().lowChange, this.state().highChange)
|
|
111
|
+
.pipe(takeUntilDestroyed())
|
|
112
|
+
.subscribe(() => this.onChange?.([this.state().low(), this.state().high()]));
|
|
112
113
|
}
|
|
113
114
|
|
|
114
115
|
writeValue(value: [number, number]): void {
|
|
@@ -131,6 +132,6 @@ export class RangeSlider<%= componentSuffix %> implements ControlValueAccessor {
|
|
|
131
132
|
}
|
|
132
133
|
|
|
133
134
|
setDisabledState(isDisabled: boolean): void {
|
|
134
|
-
this.state().
|
|
135
|
+
this.state().setDisabled(isDisabled);
|
|
135
136
|
}
|
|
136
137
|
}
|
package/slider/index.d.ts
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import { Signal, WritableSignal, ElementRef
|
|
2
|
+
import { Signal, WritableSignal, ElementRef } from '@angular/core';
|
|
3
3
|
import { NgpOrientation } from 'ng-primitives/common';
|
|
4
4
|
import { Observable } from 'rxjs';
|
|
5
5
|
import { NumberInput, BooleanInput } from '@angular/cdk/coercion';
|
|
6
|
-
import * as ng_primitives_state from 'ng-primitives/state';
|
|
7
|
-
import * as ng_primitives_slider from 'ng-primitives/slider';
|
|
8
6
|
|
|
9
7
|
/**
|
|
10
8
|
* Apply the `ngpSliderRange` directive to an element that represents the range of the slider.
|
|
@@ -302,79 +300,146 @@ declare class NgpSlider {
|
|
|
302
300
|
* Apply the `ngpRangeSliderRange` directive to an element that represents the range between the low and high values.
|
|
303
301
|
*/
|
|
304
302
|
declare class NgpRangeSliderRange {
|
|
305
|
-
|
|
306
|
-
* Access the range slider state.
|
|
307
|
-
*/
|
|
308
|
-
protected readonly rangeSliderState: _angular_core.Signal<ng_primitives_state.State<ng_primitives_slider.NgpRangeSlider>>;
|
|
303
|
+
constructor();
|
|
309
304
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpRangeSliderRange, never>;
|
|
310
305
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpRangeSliderRange, "[ngpRangeSliderRange]", ["ngpRangeSliderRange"], {}, {}, never, never, true, never>;
|
|
311
306
|
}
|
|
312
307
|
|
|
308
|
+
/**
|
|
309
|
+
* Public state surface for the RangeSliderRange primitive.
|
|
310
|
+
*/
|
|
311
|
+
interface NgpRangeSliderRangeState {
|
|
312
|
+
}
|
|
313
|
+
/**
|
|
314
|
+
* Inputs for configuring the RangeSliderRange primitive.
|
|
315
|
+
*/
|
|
316
|
+
interface NgpRangeSliderRangeProps {
|
|
317
|
+
}
|
|
318
|
+
declare const ngpRangeSliderRange: ({}: NgpRangeSliderRangeProps) => {};
|
|
319
|
+
declare const injectRangeSliderRangeState: {
|
|
320
|
+
(): _angular_core.Signal<{}>;
|
|
321
|
+
(options: {
|
|
322
|
+
hoisted: true;
|
|
323
|
+
optional?: boolean;
|
|
324
|
+
skipSelf?: boolean;
|
|
325
|
+
}): _angular_core.Signal<{} | null>;
|
|
326
|
+
(options?: {
|
|
327
|
+
hoisted?: boolean;
|
|
328
|
+
optional?: boolean;
|
|
329
|
+
skipSelf?: boolean;
|
|
330
|
+
}): _angular_core.Signal<{}> | _angular_core.Signal<{} | null>;
|
|
331
|
+
};
|
|
332
|
+
declare const provideRangeSliderRangeState: (opts?: {
|
|
333
|
+
inherit?: boolean;
|
|
334
|
+
}) => _angular_core.FactoryProvider;
|
|
335
|
+
|
|
313
336
|
/**
|
|
314
337
|
* Apply the `ngpRangeSliderThumb` directive to an element that represents a thumb of the range slider.
|
|
315
338
|
* Each thumb can be configured to control either the 'low' or 'high' value.
|
|
316
339
|
*/
|
|
317
|
-
declare class NgpRangeSliderThumb
|
|
318
|
-
/**
|
|
319
|
-
* Access the range slider state.
|
|
320
|
-
*/
|
|
321
|
-
protected readonly state: _angular_core.Signal<ng_primitives_state.State<ng_primitives_slider.NgpRangeSlider>>;
|
|
322
|
-
/**
|
|
323
|
-
* Access the thumb element.
|
|
324
|
-
*/
|
|
325
|
-
private readonly elementRef;
|
|
326
|
-
/**
|
|
327
|
-
* Determines which value this thumb controls ('low' or 'high').
|
|
328
|
-
*/
|
|
329
|
-
protected readonly thumb: _angular_core.Signal<"low" | "high">;
|
|
330
|
-
/**
|
|
331
|
-
* Store the dragging state.
|
|
332
|
-
*/
|
|
333
|
-
protected dragging: boolean;
|
|
334
|
-
/**
|
|
335
|
-
* Get the current value for this thumb.
|
|
336
|
-
*/
|
|
337
|
-
protected readonly value: _angular_core.Signal<number>;
|
|
338
|
-
/**
|
|
339
|
-
* Get the current percentage for this thumb.
|
|
340
|
-
*/
|
|
341
|
-
protected readonly percentage: _angular_core.Signal<number>;
|
|
340
|
+
declare class NgpRangeSliderThumb {
|
|
342
341
|
constructor();
|
|
343
|
-
ngOnDestroy(): void;
|
|
344
|
-
protected handlePointerDown(event: PointerEvent): void;
|
|
345
|
-
protected handlePointerUp(): void;
|
|
346
|
-
protected handlePointerMove(event: PointerEvent): void;
|
|
347
|
-
/**
|
|
348
|
-
* Handle keyboard events.
|
|
349
|
-
* @param event
|
|
350
|
-
*/
|
|
351
|
-
protected handleKeydown(event: KeyboardEvent): void;
|
|
352
342
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpRangeSliderThumb, never>;
|
|
353
343
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpRangeSliderThumb, "[ngpRangeSliderThumb]", ["ngpRangeSliderThumb"], {}, {}, never, never, true, never>;
|
|
354
344
|
}
|
|
355
345
|
|
|
356
346
|
/**
|
|
357
|
-
*
|
|
347
|
+
* Public state surface for the RangeSliderThumb primitive.
|
|
358
348
|
*/
|
|
359
|
-
|
|
349
|
+
interface NgpRangeSliderThumbState {
|
|
360
350
|
/**
|
|
361
|
-
*
|
|
351
|
+
* Which value this thumb controls ('low' or 'high').
|
|
362
352
|
*/
|
|
363
|
-
|
|
353
|
+
readonly thumb: Signal<'low' | 'high'>;
|
|
364
354
|
/**
|
|
365
|
-
* The
|
|
355
|
+
* The current value for this thumb.
|
|
366
356
|
*/
|
|
367
|
-
readonly
|
|
368
|
-
constructor();
|
|
357
|
+
readonly value: Signal<number>;
|
|
369
358
|
/**
|
|
370
|
-
*
|
|
371
|
-
* @param event The click event.
|
|
359
|
+
* The current percentage for this thumb.
|
|
372
360
|
*/
|
|
373
|
-
|
|
361
|
+
readonly percentage: Signal<number>;
|
|
362
|
+
}
|
|
363
|
+
/**
|
|
364
|
+
* Inputs for configuring the RangeSliderThumb primitive.
|
|
365
|
+
*/
|
|
366
|
+
interface NgpRangeSliderThumbProps {
|
|
367
|
+
}
|
|
368
|
+
declare const ngpRangeSliderThumb: ({}: NgpRangeSliderThumbProps) => {
|
|
369
|
+
thumb: Signal<"low" | "high">;
|
|
370
|
+
value: Signal<number>;
|
|
371
|
+
percentage: Signal<number>;
|
|
372
|
+
};
|
|
373
|
+
declare const injectRangeSliderThumbState: {
|
|
374
|
+
(): Signal<{
|
|
375
|
+
thumb: Signal<"low" | "high">;
|
|
376
|
+
value: Signal<number>;
|
|
377
|
+
percentage: Signal<number>;
|
|
378
|
+
}>;
|
|
379
|
+
(options: {
|
|
380
|
+
hoisted: true;
|
|
381
|
+
optional?: boolean;
|
|
382
|
+
skipSelf?: boolean;
|
|
383
|
+
}): Signal<{
|
|
384
|
+
thumb: Signal<"low" | "high">;
|
|
385
|
+
value: Signal<number>;
|
|
386
|
+
percentage: Signal<number>;
|
|
387
|
+
} | null>;
|
|
388
|
+
(options?: {
|
|
389
|
+
hoisted?: boolean;
|
|
390
|
+
optional?: boolean;
|
|
391
|
+
skipSelf?: boolean;
|
|
392
|
+
}): Signal<{
|
|
393
|
+
thumb: Signal<"low" | "high">;
|
|
394
|
+
value: Signal<number>;
|
|
395
|
+
percentage: Signal<number>;
|
|
396
|
+
}> | Signal<{
|
|
397
|
+
thumb: Signal<"low" | "high">;
|
|
398
|
+
value: Signal<number>;
|
|
399
|
+
percentage: Signal<number>;
|
|
400
|
+
} | null>;
|
|
401
|
+
};
|
|
402
|
+
declare const provideRangeSliderThumbState: (opts?: {
|
|
403
|
+
inherit?: boolean;
|
|
404
|
+
}) => _angular_core.FactoryProvider;
|
|
405
|
+
|
|
406
|
+
/**
|
|
407
|
+
* Apply the `ngpRangeSliderTrack` directive to an element that represents the track of the range slider.
|
|
408
|
+
*/
|
|
409
|
+
declare class NgpRangeSliderTrack {
|
|
410
|
+
constructor();
|
|
374
411
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpRangeSliderTrack, never>;
|
|
375
412
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpRangeSliderTrack, "[ngpRangeSliderTrack]", ["ngpRangeSliderTrack"], {}, {}, never, never, true, never>;
|
|
376
413
|
}
|
|
377
414
|
|
|
415
|
+
/**
|
|
416
|
+
* Public state surface for the RangeSliderTrack primitive.
|
|
417
|
+
*/
|
|
418
|
+
interface NgpRangeSliderTrackState {
|
|
419
|
+
}
|
|
420
|
+
/**
|
|
421
|
+
* Inputs for configuring the RangeSliderTrack primitive.
|
|
422
|
+
*/
|
|
423
|
+
interface NgpRangeSliderTrackProps {
|
|
424
|
+
}
|
|
425
|
+
declare const ngpRangeSliderTrack: ({}: NgpRangeSliderTrackProps) => void;
|
|
426
|
+
declare const injectRangeSliderTrackState: {
|
|
427
|
+
(): _angular_core.Signal<void>;
|
|
428
|
+
(options: {
|
|
429
|
+
hoisted: true;
|
|
430
|
+
optional?: boolean;
|
|
431
|
+
skipSelf?: boolean;
|
|
432
|
+
}): _angular_core.Signal<void | null>;
|
|
433
|
+
(options?: {
|
|
434
|
+
hoisted?: boolean;
|
|
435
|
+
optional?: boolean;
|
|
436
|
+
skipSelf?: boolean;
|
|
437
|
+
}): _angular_core.Signal<void> | _angular_core.Signal<void | null>;
|
|
438
|
+
};
|
|
439
|
+
declare const provideRangeSliderTrackState: (opts?: {
|
|
440
|
+
inherit?: boolean;
|
|
441
|
+
}) => _angular_core.FactoryProvider;
|
|
442
|
+
|
|
378
443
|
/**
|
|
379
444
|
* Apply the `ngpRangeSlider` directive to an element that represents the range slider and contains the track, range, and thumbs.
|
|
380
445
|
*/
|
|
@@ -420,80 +485,175 @@ declare class NgpRangeSlider {
|
|
|
420
485
|
*/
|
|
421
486
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
422
487
|
/**
|
|
423
|
-
*
|
|
424
|
-
* @internal
|
|
488
|
+
* The state of the range slider.
|
|
425
489
|
*/
|
|
426
|
-
readonly
|
|
490
|
+
private readonly state;
|
|
491
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpRangeSlider, never>;
|
|
492
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpRangeSlider, "[ngpRangeSlider]", ["ngpRangeSlider"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "low": { "alias": "ngpRangeSliderLow"; "required": false; "isSignal": true; }; "high": { "alias": "ngpRangeSliderHigh"; "required": false; "isSignal": true; }; "min": { "alias": "ngpRangeSliderMin"; "required": false; "isSignal": true; }; "max": { "alias": "ngpRangeSliderMax"; "required": false; "isSignal": true; }; "step": { "alias": "ngpRangeSliderStep"; "required": false; "isSignal": true; }; "orientation": { "alias": "ngpRangeSliderOrientation"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpRangeSliderDisabled"; "required": false; "isSignal": true; }; }, { "lowChange": "ngpRangeSliderLowChange"; "highChange": "ngpRangeSliderHighChange"; }, never, never, true, never>;
|
|
493
|
+
}
|
|
494
|
+
|
|
495
|
+
/**
|
|
496
|
+
* Inputs for configuring the RangeSlider primitive.
|
|
497
|
+
*/
|
|
498
|
+
interface NgpRangeSliderProps {
|
|
427
499
|
/**
|
|
428
|
-
* The
|
|
429
|
-
|
|
500
|
+
* The id of the range slider.
|
|
501
|
+
*/
|
|
502
|
+
readonly id?: Signal<string>;
|
|
503
|
+
/**
|
|
504
|
+
* The low value of the range slider.
|
|
505
|
+
*/
|
|
506
|
+
readonly low?: Signal<number>;
|
|
507
|
+
/**
|
|
508
|
+
* The high value of the range slider.
|
|
509
|
+
*/
|
|
510
|
+
readonly high?: Signal<number>;
|
|
511
|
+
/**
|
|
512
|
+
* The minimum value.
|
|
513
|
+
*/
|
|
514
|
+
readonly min?: Signal<number>;
|
|
515
|
+
/**
|
|
516
|
+
* The maximum value.
|
|
517
|
+
*/
|
|
518
|
+
readonly max?: Signal<number>;
|
|
519
|
+
/**
|
|
520
|
+
* The step value.
|
|
521
|
+
*/
|
|
522
|
+
readonly step?: Signal<number>;
|
|
523
|
+
/**
|
|
524
|
+
* The range slider orientation.
|
|
525
|
+
*/
|
|
526
|
+
readonly orientation?: Signal<NgpOrientation>;
|
|
527
|
+
/**
|
|
528
|
+
* Whether the range slider is disabled.
|
|
529
|
+
*/
|
|
530
|
+
readonly disabled?: Signal<boolean>;
|
|
531
|
+
/**
|
|
532
|
+
* Callback fired when the low value changes.
|
|
533
|
+
*/
|
|
534
|
+
readonly onLowChange?: (value: number) => void;
|
|
535
|
+
/**
|
|
536
|
+
* Callback fired when the high value changes.
|
|
537
|
+
*/
|
|
538
|
+
readonly onHighChange?: (value: number) => void;
|
|
539
|
+
}
|
|
540
|
+
/**
|
|
541
|
+
* Public state surface for the RangeSlider primitive.
|
|
542
|
+
*/
|
|
543
|
+
interface NgpRangeSliderState {
|
|
544
|
+
/**
|
|
545
|
+
* The id of the range slider.
|
|
546
|
+
*/
|
|
547
|
+
readonly id: Signal<string>;
|
|
548
|
+
/**
|
|
549
|
+
* The low value of the range slider.
|
|
550
|
+
*/
|
|
551
|
+
readonly low: WritableSignal<number>;
|
|
552
|
+
/**
|
|
553
|
+
* The high value of the range slider.
|
|
554
|
+
*/
|
|
555
|
+
readonly high: WritableSignal<number>;
|
|
556
|
+
/**
|
|
557
|
+
* The minimum value of the range slider.
|
|
430
558
|
*/
|
|
431
|
-
readonly
|
|
559
|
+
readonly min: Signal<number>;
|
|
560
|
+
/**
|
|
561
|
+
* The maximum value of the range slider.
|
|
562
|
+
*/
|
|
563
|
+
readonly max: Signal<number>;
|
|
564
|
+
/**
|
|
565
|
+
* The step value of the range slider.
|
|
566
|
+
*/
|
|
567
|
+
readonly step: Signal<number>;
|
|
568
|
+
/**
|
|
569
|
+
* The orientation of the range slider.
|
|
570
|
+
*/
|
|
571
|
+
readonly orientation: WritableSignal<NgpOrientation>;
|
|
572
|
+
/**
|
|
573
|
+
* Whether the range slider is disabled.
|
|
574
|
+
*/
|
|
575
|
+
readonly disabled: WritableSignal<boolean>;
|
|
432
576
|
/**
|
|
433
577
|
* The low value as a percentage based on the min and max values.
|
|
434
578
|
* @internal
|
|
435
579
|
*/
|
|
436
|
-
readonly lowPercentage:
|
|
580
|
+
readonly lowPercentage: Signal<number>;
|
|
437
581
|
/**
|
|
438
582
|
* The high value as a percentage based on the min and max values.
|
|
439
583
|
* @internal
|
|
440
584
|
*/
|
|
441
|
-
readonly highPercentage:
|
|
585
|
+
readonly highPercentage: Signal<number>;
|
|
442
586
|
/**
|
|
443
587
|
* The range between low and high values as a percentage.
|
|
444
588
|
* @internal
|
|
445
589
|
*/
|
|
446
|
-
readonly rangePercentage:
|
|
590
|
+
readonly rangePercentage: Signal<number>;
|
|
447
591
|
/**
|
|
448
|
-
* The
|
|
449
|
-
* @internal
|
|
592
|
+
* @internal The track element reference.
|
|
450
593
|
*/
|
|
451
|
-
|
|
452
|
-
|
|
594
|
+
readonly track: Signal<ElementRef<HTMLElement> | undefined>;
|
|
595
|
+
/**
|
|
596
|
+
* @internal The thumbs array.
|
|
597
|
+
*/
|
|
598
|
+
readonly thumbs: Signal<ElementRef<HTMLElement>[]>;
|
|
599
|
+
/**
|
|
600
|
+
* Emit when the low value changes.
|
|
601
|
+
*/
|
|
602
|
+
readonly lowChange: Observable<number>;
|
|
603
|
+
/**
|
|
604
|
+
* Emit when the high value changes.
|
|
605
|
+
*/
|
|
606
|
+
readonly highChange: Observable<number>;
|
|
453
607
|
/**
|
|
454
608
|
* Updates the low value, ensuring it doesn't exceed the high value.
|
|
455
|
-
* @param value The new low value
|
|
456
|
-
* @internal
|
|
457
609
|
*/
|
|
458
610
|
setLowValue(value: number): void;
|
|
459
611
|
/**
|
|
460
612
|
* Updates the high value, ensuring it doesn't go below the low value.
|
|
461
|
-
* @param value The new high value
|
|
462
|
-
* @internal
|
|
463
613
|
*/
|
|
464
614
|
setHighValue(value: number): void;
|
|
465
615
|
/**
|
|
466
616
|
* Determines which thumb should be moved based on the position clicked.
|
|
467
|
-
* @param percentage The percentage position of the click
|
|
468
|
-
* @returns 'low' or 'high' indicating which thumb should move
|
|
469
|
-
*
|
|
470
|
-
* @internal
|
|
471
617
|
*/
|
|
472
618
|
getClosestThumb(percentage: number): 'low' | 'high';
|
|
473
619
|
/**
|
|
474
620
|
* Updates the thumbs array when a new thumb is added.
|
|
475
|
-
* @param thumb The new thumb to add
|
|
476
|
-
* @internal
|
|
477
621
|
*/
|
|
478
|
-
addThumb(thumb:
|
|
622
|
+
addThumb(thumb: ElementRef<HTMLElement>): void;
|
|
479
623
|
/**
|
|
480
624
|
* Removes a thumb from the thumbs array.
|
|
481
|
-
* @param thumb The thumb to remove
|
|
482
|
-
* @internal
|
|
483
625
|
*/
|
|
484
|
-
removeThumb(thumb:
|
|
485
|
-
|
|
486
|
-
|
|
626
|
+
removeThumb(thumb: ElementRef<HTMLElement>): void;
|
|
627
|
+
/**
|
|
628
|
+
* Set the track element reference.
|
|
629
|
+
*/
|
|
630
|
+
setTrack(track: ElementRef<HTMLElement>): void;
|
|
631
|
+
/**
|
|
632
|
+
* Set the disabled state.
|
|
633
|
+
*/
|
|
634
|
+
setDisabled(disabled: boolean): void;
|
|
635
|
+
/**
|
|
636
|
+
* Set the orientation.
|
|
637
|
+
*/
|
|
638
|
+
setOrientation(orientation: NgpOrientation): void;
|
|
487
639
|
}
|
|
640
|
+
declare const ngpRangeSlider: ({ id, low: _low, high: _high, min, max, step, orientation: _orientation, disabled: _disabled, onLowChange, onHighChange, }: NgpRangeSliderProps) => NgpRangeSliderState;
|
|
641
|
+
declare const injectRangeSliderState: {
|
|
642
|
+
(): Signal<NgpRangeSliderState>;
|
|
643
|
+
(options: {
|
|
644
|
+
hoisted: true;
|
|
645
|
+
optional?: boolean;
|
|
646
|
+
skipSelf?: boolean;
|
|
647
|
+
}): Signal<NgpRangeSliderState | null>;
|
|
648
|
+
(options?: {
|
|
649
|
+
hoisted?: boolean;
|
|
650
|
+
optional?: boolean;
|
|
651
|
+
skipSelf?: boolean;
|
|
652
|
+
}): Signal<NgpRangeSliderState> | Signal<NgpRangeSliderState | null>;
|
|
653
|
+
};
|
|
654
|
+
declare const provideRangeSliderState: (opts?: {
|
|
655
|
+
inherit?: boolean;
|
|
656
|
+
}) => _angular_core.FactoryProvider;
|
|
488
657
|
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
*/
|
|
492
|
-
declare const provideRangeSliderState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
|
|
493
|
-
/**
|
|
494
|
-
* Injects the Range Slider state.
|
|
495
|
-
*/
|
|
496
|
-
declare const injectRangeSliderState: <U = NgpRangeSlider>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
|
|
497
|
-
|
|
498
|
-
export { NgpRangeSlider, NgpRangeSliderRange, NgpRangeSliderThumb, NgpRangeSliderTrack, NgpSlider, NgpSliderRange, NgpSliderThumb, NgpSliderTrack, injectRangeSliderState, injectSliderRangeState, injectSliderState, injectSliderThumbState, injectSliderTrackState, ngpSlider, ngpSliderRange, ngpSliderThumb, ngpSliderTrack, provideRangeSliderState, provideSliderRangeState, provideSliderState, provideSliderThumbState, provideSliderTrackState };
|
|
499
|
-
export type { NgpSliderProps, NgpSliderRangeProps, NgpSliderRangeState, NgpSliderState, NgpSliderThumbProps, NgpSliderThumbState, NgpSliderTrackProps, NgpSliderTrackState };
|
|
658
|
+
export { NgpRangeSlider, NgpRangeSliderRange, NgpRangeSliderThumb, NgpRangeSliderTrack, NgpSlider, NgpSliderRange, NgpSliderThumb, NgpSliderTrack, injectRangeSliderRangeState, injectRangeSliderState, injectRangeSliderThumbState, injectRangeSliderTrackState, injectSliderRangeState, injectSliderState, injectSliderThumbState, injectSliderTrackState, ngpRangeSlider, ngpRangeSliderRange, ngpRangeSliderThumb, ngpRangeSliderTrack, ngpSlider, ngpSliderRange, ngpSliderThumb, ngpSliderTrack, provideRangeSliderRangeState, provideRangeSliderState, provideRangeSliderThumbState, provideRangeSliderTrackState, provideSliderRangeState, provideSliderState, provideSliderThumbState, provideSliderTrackState };
|
|
659
|
+
export type { NgpRangeSliderProps, NgpRangeSliderRangeProps, NgpRangeSliderRangeState, NgpRangeSliderState, NgpRangeSliderThumbProps, NgpRangeSliderThumbState, NgpRangeSliderTrackProps, NgpRangeSliderTrackState, NgpSliderProps, NgpSliderRangeProps, NgpSliderRangeState, NgpSliderState, NgpSliderThumbProps, NgpSliderThumbState, NgpSliderTrackProps, NgpSliderTrackState };
|
package/toast/index.d.ts
CHANGED