ng-primitives 0.124.0 → 0.126.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/date-time-date-fns/README.md +3 -0
- package/fesm2022/ng-primitives-avatar.mjs +4 -2
- package/fesm2022/ng-primitives-avatar.mjs.map +1 -1
- package/fesm2022/ng-primitives-checkbox.mjs +4 -2
- package/fesm2022/ng-primitives-checkbox.mjs.map +1 -1
- package/fesm2022/ng-primitives-date-picker.mjs +42 -44
- package/fesm2022/ng-primitives-date-picker.mjs.map +1 -1
- package/fesm2022/ng-primitives-date-time-date-fns.mjs +95 -0
- package/fesm2022/ng-primitives-date-time-date-fns.mjs.map +1 -0
- package/fesm2022/ng-primitives-date-time-luxon.mjs +21 -3
- package/fesm2022/ng-primitives-date-time-luxon.mjs.map +1 -1
- package/fesm2022/ng-primitives-date-time.mjs +18 -3
- package/fesm2022/ng-primitives-date-time.mjs.map +1 -1
- package/fesm2022/ng-primitives-dialog.mjs +11 -4
- package/fesm2022/ng-primitives-dialog.mjs.map +1 -1
- package/fesm2022/ng-primitives-form-field.mjs +3 -0
- package/fesm2022/ng-primitives-form-field.mjs.map +1 -1
- package/fesm2022/ng-primitives-input-otp.mjs +15 -7
- package/fesm2022/ng-primitives-input-otp.mjs.map +1 -1
- package/fesm2022/ng-primitives-listbox.mjs +5 -4
- package/fesm2022/ng-primitives-listbox.mjs.map +1 -1
- package/fesm2022/ng-primitives-menu.mjs +8 -0
- package/fesm2022/ng-primitives-menu.mjs.map +1 -1
- package/fesm2022/ng-primitives-meter.mjs +20 -5
- package/fesm2022/ng-primitives-meter.mjs.map +1 -1
- package/fesm2022/ng-primitives-number-field.mjs +10 -0
- package/fesm2022/ng-primitives-number-field.mjs.map +1 -1
- package/fesm2022/ng-primitives-pagination.mjs +16 -6
- package/fesm2022/ng-primitives-pagination.mjs.map +1 -1
- package/fesm2022/ng-primitives-password.mjs +293 -0
- package/fesm2022/ng-primitives-password.mjs.map +1 -0
- package/fesm2022/ng-primitives-popover.mjs +4 -0
- package/fesm2022/ng-primitives-popover.mjs.map +1 -1
- package/fesm2022/ng-primitives-progress.mjs +36 -11
- package/fesm2022/ng-primitives-progress.mjs.map +1 -1
- package/fesm2022/ng-primitives-roving-focus.mjs +13 -2
- package/fesm2022/ng-primitives-roving-focus.mjs.map +1 -1
- package/fesm2022/ng-primitives-search.mjs +2 -1
- package/fesm2022/ng-primitives-search.mjs.map +1 -1
- package/fesm2022/ng-primitives-slider.mjs +38 -18
- package/fesm2022/ng-primitives-slider.mjs.map +1 -1
- package/fesm2022/ng-primitives-switch.mjs +18 -8
- package/fesm2022/ng-primitives-switch.mjs.map +1 -1
- package/fesm2022/ng-primitives-tabs.mjs +22 -6
- package/fesm2022/ng-primitives-tabs.mjs.map +1 -1
- package/fesm2022/ng-primitives-textarea.mjs +10 -8
- package/fesm2022/ng-primitives-textarea.mjs.map +1 -1
- package/fesm2022/ng-primitives-toast.mjs +3 -0
- package/fesm2022/ng-primitives-toast.mjs.map +1 -1
- package/fesm2022/ng-primitives-toggle-group.mjs +31 -8
- package/fesm2022/ng-primitives-toggle-group.mjs.map +1 -1
- package/package.json +12 -1
- package/password/README.md +3 -0
- package/schematics/ng-generate/templates/checkbox/checkbox.__fileSuffix@dasherize__.ts.template +2 -1
- package/schematics/ng-generate/templates/combobox/combobox.__fileSuffix@dasherize__.ts.template +3 -2
- package/schematics/ng-generate/templates/date-picker/date-picker.__fileSuffix@dasherize__.ts.template +2 -1
- package/schematics/ng-generate/templates/listbox/listbox.__fileSuffix@dasherize__.ts.template +9 -4
- package/schematics/ng-generate/templates/pagination/pagination.__fileSuffix@dasherize__.ts.template +7 -1
- package/schematics/ng-generate/templates/password/password.__fileSuffix@dasherize__.ts.template +141 -0
- package/schematics/ng-generate/templates/range-slider/range-slider.__fileSuffix@dasherize__.ts.template +4 -3
- package/schematics/ng-generate/templates/slider/slider.__fileSuffix@dasherize__.ts.template +2 -1
- package/schematics/ng-generate/templates/switch/switch.__fileSuffix@dasherize__.ts.template +2 -1
- package/types/ng-primitives-checkbox.d.ts +5 -1
- package/types/ng-primitives-date-picker.d.ts +7 -9
- package/types/ng-primitives-date-time-date-fns.d.ts +30 -0
- package/types/ng-primitives-date-time.d.ts +15 -3
- package/types/ng-primitives-dialog.d.ts +4 -0
- package/types/ng-primitives-input-otp.d.ts +5 -5
- package/types/ng-primitives-meter.d.ts +9 -2
- package/types/ng-primitives-pagination.d.ts +34 -8
- package/types/ng-primitives-password.d.ts +296 -0
- package/types/ng-primitives-progress.d.ts +4 -2
- package/types/ng-primitives-roving-focus.d.ts +7 -0
- package/types/ng-primitives-slider.d.ts +5 -4
- package/types/ng-primitives-switch.d.ts +14 -4
- package/types/ng-primitives-tabs.d.ts +6 -1
- package/types/ng-primitives-toggle-group.d.ts +51 -37
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { NgpDateAdapter, NgpDateUnits, NgpDuration } from 'ng-primitives/date-time';
|
|
2
|
+
|
|
3
|
+
declare class NgpDateFnsDateAdapter implements NgpDateAdapter<Date> {
|
|
4
|
+
create({ day, hour, minute, month, second, year, millisecond }: NgpDateUnits): Date;
|
|
5
|
+
now(): Date;
|
|
6
|
+
set(date: Date, values: NgpDateUnits): Date;
|
|
7
|
+
add(date: Date, duration: NgpDuration): Date;
|
|
8
|
+
subtract(date: Date, duration: NgpDuration): Date;
|
|
9
|
+
compare(a: Date, b: Date): number;
|
|
10
|
+
isEqual(a: Date, b: Date): boolean;
|
|
11
|
+
isBefore(a: Date, b: Date): boolean;
|
|
12
|
+
isAfter(a: Date, b: Date): boolean;
|
|
13
|
+
isSameDay(a: Date, b: Date): boolean;
|
|
14
|
+
isSameMonth(a: Date, b: Date): boolean;
|
|
15
|
+
isSameYear(a: Date, b: Date): boolean;
|
|
16
|
+
getYear(date: Date): number;
|
|
17
|
+
getMonth(date: Date): number;
|
|
18
|
+
getDate(date: Date): number;
|
|
19
|
+
getDay(date: Date): number;
|
|
20
|
+
getHours(date: Date): number;
|
|
21
|
+
getMinutes(date: Date): number;
|
|
22
|
+
getSeconds(date: Date): number;
|
|
23
|
+
getMilliseconds(date: Date): number;
|
|
24
|
+
startOfMonth(date: Date): Date;
|
|
25
|
+
endOfMonth(date: Date): Date;
|
|
26
|
+
startOfDay(date: Date): Date;
|
|
27
|
+
endOfDay(date: Date): Date;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export { NgpDateFnsDateAdapter };
|
|
@@ -6,7 +6,9 @@ import { Type, ClassProvider } from '@angular/core';
|
|
|
6
6
|
*/
|
|
7
7
|
interface NgpDateAdapter<T> {
|
|
8
8
|
/**
|
|
9
|
-
* Create a new date time object.
|
|
9
|
+
* Create a new date time object. Here `month` is one-based (1-12), matching
|
|
10
|
+
* the `NgpDateUnits` documentation. Note this differs from `set` and
|
|
11
|
+
* `getMonth`, which use a zero-based month (0-11).
|
|
10
12
|
*/
|
|
11
13
|
create(values: NgpDateUnits): T;
|
|
12
14
|
/**
|
|
@@ -14,7 +16,10 @@ interface NgpDateAdapter<T> {
|
|
|
14
16
|
*/
|
|
15
17
|
now(): T;
|
|
16
18
|
/**
|
|
17
|
-
* Set the
|
|
19
|
+
* Set the specified units on the date time object, leaving the rest
|
|
20
|
+
* unchanged. Here `month` is zero-based (0-11), matching `getMonth` so
|
|
21
|
+
* `set(date, { month: getMonth(other) })` round-trips. Note this differs from
|
|
22
|
+
* `create`, which takes a one-based month (1-12).
|
|
18
23
|
*/
|
|
19
24
|
set(date: T, values: NgpDateUnits): T;
|
|
20
25
|
/**
|
|
@@ -58,7 +63,8 @@ interface NgpDateAdapter<T> {
|
|
|
58
63
|
*/
|
|
59
64
|
getYear(date: T): number;
|
|
60
65
|
/**
|
|
61
|
-
* Get the month.
|
|
66
|
+
* Get the month as a zero-based number (0-11, January = 0). This matches the
|
|
67
|
+
* range accepted by `set`, so `set(date, { month: getMonth(other) })` round-trips.
|
|
62
68
|
*/
|
|
63
69
|
getMonth(date: T): number;
|
|
64
70
|
/**
|
|
@@ -200,6 +206,12 @@ declare class NgpNativeDateAdapter implements NgpDateAdapter<Date> {
|
|
|
200
206
|
* Subtract a duration from the date time object
|
|
201
207
|
*/
|
|
202
208
|
subtract(date: Date, duration: NgpDuration): Date;
|
|
209
|
+
/**
|
|
210
|
+
* Apply a duration in `sign` direction. Year/month are applied first with the
|
|
211
|
+
* day clamped to the target month's length (so 31 Jan + 1 month is 28 Feb, not
|
|
212
|
+
* 3 Mar), matching the Luxon and date-fns adapters; day/time deltas follow.
|
|
213
|
+
*/
|
|
214
|
+
private shift;
|
|
203
215
|
/**
|
|
204
216
|
* Compare two date time objects
|
|
205
217
|
*/
|
|
@@ -321,6 +321,10 @@ declare class NgpDialog<T = unknown, R = unknown> implements OnDestroy {
|
|
|
321
321
|
protected readonly labelledBy: _angular_core.WritableSignal<string[]>;
|
|
322
322
|
/** The describedby ids */
|
|
323
323
|
protected readonly describedBy: _angular_core.WritableSignal<string[]>;
|
|
324
|
+
/** The aria-labelledby value, omitted when there are no ids to reference. */
|
|
325
|
+
protected readonly ariaLabelledBy: _angular_core.Signal<string | null>;
|
|
326
|
+
/** The aria-describedby value, omitted when there are no ids to reference. */
|
|
327
|
+
protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
|
|
324
328
|
/** The dialog state */
|
|
325
329
|
protected readonly state: ng_primitives_state.CreatedState<NgpDialog<T, R>>;
|
|
326
330
|
ngOnDestroy(): void;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as ng_primitives_state from 'ng-primitives/state';
|
|
2
2
|
import * as ng_primitives_input_otp from 'ng-primitives/input-otp';
|
|
3
3
|
import * as _angular_core from '@angular/core';
|
|
4
|
-
import {
|
|
4
|
+
import { OnDestroy } from '@angular/core';
|
|
5
5
|
import * as i1 from 'ng-primitives/a11y';
|
|
6
6
|
import { BooleanInput } from '@angular/cdk/coercion';
|
|
7
7
|
|
|
8
|
-
declare class NgpInputOtpInput
|
|
8
|
+
declare class NgpInputOtpInput {
|
|
9
9
|
/**
|
|
10
10
|
* Access the element reference.
|
|
11
11
|
*/
|
|
@@ -15,7 +15,6 @@ declare class NgpInputOtpInput implements AfterViewInit {
|
|
|
15
15
|
*/
|
|
16
16
|
protected readonly state: _angular_core.Signal<ng_primitives_state.State<ng_primitives_input_otp.NgpInputOtp>>;
|
|
17
17
|
constructor();
|
|
18
|
-
ngAfterViewInit(): void;
|
|
19
18
|
/**
|
|
20
19
|
* Focus the input.
|
|
21
20
|
* @internal
|
|
@@ -115,9 +114,10 @@ declare class NgpInputOtp {
|
|
|
115
114
|
*/
|
|
116
115
|
readonly id: _angular_core.InputSignal<string>;
|
|
117
116
|
/**
|
|
118
|
-
* The current value of the OTP.
|
|
117
|
+
* The current value of the OTP. A null/undefined value (e.g. from a form
|
|
118
|
+
* `writeValue(null)` or `reset()`) is coerced to an empty string.
|
|
119
119
|
*/
|
|
120
|
-
readonly value: _angular_core.
|
|
120
|
+
readonly value: _angular_core.InputSignalWithTransform<string, string | null | undefined>;
|
|
121
121
|
/**
|
|
122
122
|
* The regex pattern for allowed characters.
|
|
123
123
|
*/
|
|
@@ -24,19 +24,26 @@ declare class NgpMeter {
|
|
|
24
24
|
* Define a function that returns the meter value label.
|
|
25
25
|
* @param value The current value
|
|
26
26
|
* @param max The maximum value
|
|
27
|
+
* @param min The minimum value
|
|
27
28
|
* @returns The value label
|
|
28
29
|
*/
|
|
29
30
|
readonly valueLabel: _angular_core.InputSignal<NgpMeterValueTextFn>;
|
|
30
31
|
/** @internal Store the label instance */
|
|
31
32
|
readonly label: _angular_core.WritableSignal<NgpMeterLabel | null>;
|
|
32
|
-
/** @internal The percentage of the meter. */
|
|
33
|
+
/** @internal The percentage of the meter, used for the visual indicator width. */
|
|
33
34
|
readonly percentage: _angular_core.Signal<number>;
|
|
35
|
+
/**
|
|
36
|
+
* @internal
|
|
37
|
+
* The raw value exposed via `aria-valuenow`, clamped to the [min, max] range.
|
|
38
|
+
* Per the ARIA meter pattern, `aria-valuenow` is the actual value, not a percentage.
|
|
39
|
+
*/
|
|
40
|
+
readonly valueNow: _angular_core.Signal<number>;
|
|
34
41
|
/** The state of the meter. */
|
|
35
42
|
private readonly state;
|
|
36
43
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpMeter, never>;
|
|
37
44
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpMeter, "[ngpMeter]", ["ngpMeter"], { "value": { "alias": "ngpMeterValue"; "required": false; "isSignal": true; }; "min": { "alias": "ngpMeterMin"; "required": false; "isSignal": true; }; "max": { "alias": "ngpMeterMax"; "required": false; "isSignal": true; }; "valueLabel": { "alias": "ngpMeterValueLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
38
45
|
}
|
|
39
|
-
type NgpMeterValueTextFn = (value: number, max: number) => string;
|
|
46
|
+
type NgpMeterValueTextFn = (value: number, max: number, min: number) => string;
|
|
40
47
|
|
|
41
48
|
/**
|
|
42
49
|
* Provides the Meter state.
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
2
|
import { WritableSignal, Signal } from '@angular/core';
|
|
3
3
|
import { NumberInput, BooleanInput } from '@angular/cdk/coercion';
|
|
4
|
+
import * as ng_primitives_state from 'ng-primitives/state';
|
|
5
|
+
import { SetterOptions } from 'ng-primitives/state';
|
|
4
6
|
import * as rxjs from 'rxjs';
|
|
5
7
|
import { Observable } from 'rxjs';
|
|
6
|
-
import * as ng_primitives_state from 'ng-primitives/state';
|
|
7
8
|
|
|
8
9
|
/**
|
|
9
10
|
* The `NgpPaginationButton` directive is used to create a pagination button.
|
|
@@ -144,9 +145,11 @@ declare class NgpPagination {
|
|
|
144
145
|
page: _angular_core.WritableSignal<number>;
|
|
145
146
|
pageCount: _angular_core.Signal<number>;
|
|
146
147
|
pageChange: rxjs.Observable<number>;
|
|
147
|
-
disabled: _angular_core.
|
|
148
|
+
disabled: _angular_core.WritableSignal<boolean>;
|
|
149
|
+
setDisabled: (value: boolean) => void;
|
|
148
150
|
firstPage: _angular_core.Signal<boolean>;
|
|
149
151
|
lastPage: _angular_core.Signal<boolean>;
|
|
152
|
+
setPage: (value: number, options?: ng_primitives_state.SetterOptions) => void;
|
|
150
153
|
goToPage: (page: number) => void;
|
|
151
154
|
};
|
|
152
155
|
/**
|
|
@@ -171,6 +174,11 @@ interface NgpPaginationState {
|
|
|
171
174
|
* Whether the pagination is disabled.
|
|
172
175
|
*/
|
|
173
176
|
readonly disabled: Signal<boolean>;
|
|
177
|
+
/**
|
|
178
|
+
* Set the disabled state (e.g. from a form control).
|
|
179
|
+
* @param disabled The disabled state.
|
|
180
|
+
*/
|
|
181
|
+
setDisabled: (disabled: boolean) => void;
|
|
174
182
|
/**
|
|
175
183
|
* Determine if we are on the first page.
|
|
176
184
|
* @internal
|
|
@@ -185,6 +193,12 @@ interface NgpPaginationState {
|
|
|
185
193
|
* The event that is fired when the page changes.
|
|
186
194
|
*/
|
|
187
195
|
readonly pageChange: Observable<number>;
|
|
196
|
+
/**
|
|
197
|
+
* Set the current page directly (no bounds navigation logic).
|
|
198
|
+
* @param page The page to set.
|
|
199
|
+
* @param options Setter options, e.g. `{ emit: false }` to suppress change emission.
|
|
200
|
+
*/
|
|
201
|
+
setPage: (page: number, options?: SetterOptions) => void;
|
|
188
202
|
/**
|
|
189
203
|
* Go to the specified page.
|
|
190
204
|
* @param page The page to go to.
|
|
@@ -216,18 +230,22 @@ declare const NgpPaginationStateToken: _angular_core.InjectionToken<WritableSign
|
|
|
216
230
|
page: WritableSignal<number>;
|
|
217
231
|
pageCount: Signal<number>;
|
|
218
232
|
pageChange: Observable<number>;
|
|
219
|
-
disabled:
|
|
233
|
+
disabled: WritableSignal<boolean>;
|
|
234
|
+
setDisabled: (value: boolean) => void;
|
|
220
235
|
firstPage: Signal<boolean>;
|
|
221
236
|
lastPage: Signal<boolean>;
|
|
237
|
+
setPage: (value: number, options?: SetterOptions) => void;
|
|
222
238
|
goToPage: (page: number) => void;
|
|
223
239
|
}>>;
|
|
224
240
|
declare const ngpPagination: ({ page: _page, defaultPage: _defaultPage, pageCount: _pageCount, disabled: _disabled, onPageChange, }: NgpPaginationProps) => {
|
|
225
241
|
page: WritableSignal<number>;
|
|
226
242
|
pageCount: Signal<number>;
|
|
227
243
|
pageChange: Observable<number>;
|
|
228
|
-
disabled:
|
|
244
|
+
disabled: WritableSignal<boolean>;
|
|
245
|
+
setDisabled: (value: boolean) => void;
|
|
229
246
|
firstPage: Signal<boolean>;
|
|
230
247
|
lastPage: Signal<boolean>;
|
|
248
|
+
setPage: (value: number, options?: SetterOptions) => void;
|
|
231
249
|
goToPage: (page: number) => void;
|
|
232
250
|
};
|
|
233
251
|
declare const injectPaginationState: {
|
|
@@ -235,35 +253,43 @@ declare const injectPaginationState: {
|
|
|
235
253
|
page: WritableSignal<number>;
|
|
236
254
|
pageCount: Signal<number>;
|
|
237
255
|
pageChange: Observable<number>;
|
|
238
|
-
disabled:
|
|
256
|
+
disabled: WritableSignal<boolean>;
|
|
257
|
+
setDisabled: (value: boolean) => void;
|
|
239
258
|
firstPage: Signal<boolean>;
|
|
240
259
|
lastPage: Signal<boolean>;
|
|
260
|
+
setPage: (value: number, options?: SetterOptions) => void;
|
|
241
261
|
goToPage: (page: number) => void;
|
|
242
262
|
}>;
|
|
243
263
|
(options: ng_primitives_state.StateInjectionOptions): Signal<{
|
|
244
264
|
page: WritableSignal<number>;
|
|
245
265
|
pageCount: Signal<number>;
|
|
246
266
|
pageChange: Observable<number>;
|
|
247
|
-
disabled:
|
|
267
|
+
disabled: WritableSignal<boolean>;
|
|
268
|
+
setDisabled: (value: boolean) => void;
|
|
248
269
|
firstPage: Signal<boolean>;
|
|
249
270
|
lastPage: Signal<boolean>;
|
|
271
|
+
setPage: (value: number, options?: SetterOptions) => void;
|
|
250
272
|
goToPage: (page: number) => void;
|
|
251
273
|
} | null>;
|
|
252
274
|
(options?: ng_primitives_state.StateInjectionOptions): Signal<{
|
|
253
275
|
page: WritableSignal<number>;
|
|
254
276
|
pageCount: Signal<number>;
|
|
255
277
|
pageChange: Observable<number>;
|
|
256
|
-
disabled:
|
|
278
|
+
disabled: WritableSignal<boolean>;
|
|
279
|
+
setDisabled: (value: boolean) => void;
|
|
257
280
|
firstPage: Signal<boolean>;
|
|
258
281
|
lastPage: Signal<boolean>;
|
|
282
|
+
setPage: (value: number, options?: SetterOptions) => void;
|
|
259
283
|
goToPage: (page: number) => void;
|
|
260
284
|
}> | Signal<{
|
|
261
285
|
page: WritableSignal<number>;
|
|
262
286
|
pageCount: Signal<number>;
|
|
263
287
|
pageChange: Observable<number>;
|
|
264
|
-
disabled:
|
|
288
|
+
disabled: WritableSignal<boolean>;
|
|
289
|
+
setDisabled: (value: boolean) => void;
|
|
265
290
|
firstPage: Signal<boolean>;
|
|
266
291
|
lastPage: Signal<boolean>;
|
|
292
|
+
setPage: (value: number, options?: SetterOptions) => void;
|
|
267
293
|
goToPage: (page: number) => void;
|
|
268
294
|
} | null>;
|
|
269
295
|
};
|
|
@@ -0,0 +1,296 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { InjectionToken, Provider, Signal, WritableSignal } from '@angular/core';
|
|
3
|
+
import * as ng_primitives_input from 'ng-primitives/input';
|
|
4
|
+
import { NgpInputState } from 'ng-primitives/input';
|
|
5
|
+
import { BooleanInput } from '@angular/cdk/coercion';
|
|
6
|
+
import * as ng_primitives_state from 'ng-primitives/state';
|
|
7
|
+
import { SetterOptions } from 'ng-primitives/state';
|
|
8
|
+
import * as ng_primitives_password from 'ng-primitives/password';
|
|
9
|
+
import { Observable } from 'rxjs';
|
|
10
|
+
|
|
11
|
+
interface NgpPasswordConfig {
|
|
12
|
+
/**
|
|
13
|
+
* The accessible label for the toggle button when the password is hidden.
|
|
14
|
+
* @default 'Show password'
|
|
15
|
+
*/
|
|
16
|
+
showLabel: string;
|
|
17
|
+
/**
|
|
18
|
+
* The accessible label for the toggle button when the password is visible.
|
|
19
|
+
* @default 'Hide password'
|
|
20
|
+
*/
|
|
21
|
+
hideLabel: string;
|
|
22
|
+
/**
|
|
23
|
+
* The message announced to screen readers when the password becomes visible.
|
|
24
|
+
* @default 'Your password is shown'
|
|
25
|
+
*/
|
|
26
|
+
shownAnnouncement: string;
|
|
27
|
+
/**
|
|
28
|
+
* The message announced to screen readers when the password becomes hidden.
|
|
29
|
+
* @default 'Your password is hidden'
|
|
30
|
+
*/
|
|
31
|
+
hiddenAnnouncement: string;
|
|
32
|
+
/**
|
|
33
|
+
* Whether to opt the input out of password manager injection by default.
|
|
34
|
+
* @default false
|
|
35
|
+
*/
|
|
36
|
+
ignorePasswordManagers: boolean;
|
|
37
|
+
}
|
|
38
|
+
declare const defaultPasswordConfig: NgpPasswordConfig;
|
|
39
|
+
declare const NgpPasswordConfigToken: InjectionToken<NgpPasswordConfig>;
|
|
40
|
+
/**
|
|
41
|
+
* Provide the default Password configuration
|
|
42
|
+
* @param config The Password configuration
|
|
43
|
+
* @returns The provider
|
|
44
|
+
*/
|
|
45
|
+
declare function providePasswordConfig(config: Partial<NgpPasswordConfig>): Provider[];
|
|
46
|
+
/**
|
|
47
|
+
* Inject the Password configuration
|
|
48
|
+
* @returns The global Password configuration
|
|
49
|
+
*/
|
|
50
|
+
declare function injectPasswordConfig(): NgpPasswordConfig;
|
|
51
|
+
|
|
52
|
+
/**
|
|
53
|
+
* Apply the `ngpPasswordInput` directive to an `input` element within an `ngpPassword` container.
|
|
54
|
+
* It is a complete input (form control, interactions, autofill) with password visibility toggling
|
|
55
|
+
* layered on top, so it does not need to be combined with `ngpInput`.
|
|
56
|
+
*/
|
|
57
|
+
declare class NgpPasswordInput {
|
|
58
|
+
/**
|
|
59
|
+
* Access the global password configuration.
|
|
60
|
+
*/
|
|
61
|
+
private readonly config;
|
|
62
|
+
/**
|
|
63
|
+
* The id of the input.
|
|
64
|
+
*/
|
|
65
|
+
readonly id: _angular_core.InputSignal<string>;
|
|
66
|
+
/**
|
|
67
|
+
* Whether the input is disabled.
|
|
68
|
+
*/
|
|
69
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
70
|
+
/**
|
|
71
|
+
* Whether to opt the input out of password manager injection
|
|
72
|
+
* (1Password, LastPass, Bitwarden, etc.).
|
|
73
|
+
*/
|
|
74
|
+
readonly ignorePasswordManagers: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
75
|
+
/**
|
|
76
|
+
* The state for the password input primitive.
|
|
77
|
+
*/
|
|
78
|
+
protected readonly state: ng_primitives_input.NgpInputState;
|
|
79
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpPasswordInput, never>;
|
|
80
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpPasswordInput, "input[ngpPasswordInput]", ["ngpPasswordInput"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ignorePasswordManagers": { "alias": "ngpPasswordInputIgnorePasswordManagers"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/**
|
|
84
|
+
* The state for the PasswordInput pattern, extending the Input state.
|
|
85
|
+
*/
|
|
86
|
+
type NgpPasswordInputState = NgpInputState;
|
|
87
|
+
/**
|
|
88
|
+
* The props interface for the PasswordInput pattern.
|
|
89
|
+
*/
|
|
90
|
+
interface NgpPasswordInputProps {
|
|
91
|
+
/**
|
|
92
|
+
* The id of the input.
|
|
93
|
+
*/
|
|
94
|
+
readonly id?: Signal<string>;
|
|
95
|
+
/**
|
|
96
|
+
* Whether the input is disabled.
|
|
97
|
+
*/
|
|
98
|
+
readonly disabled?: Signal<boolean>;
|
|
99
|
+
/**
|
|
100
|
+
* Whether to opt the input out of password manager injection.
|
|
101
|
+
*/
|
|
102
|
+
readonly ignorePasswordManagers?: Signal<boolean>;
|
|
103
|
+
}
|
|
104
|
+
declare const ngpPasswordInput: ({ id, disabled, ignorePasswordManagers, }: NgpPasswordInputProps) => NgpPasswordInputState;
|
|
105
|
+
declare const injectPasswordInputState: {
|
|
106
|
+
(): Signal<NgpInputState>;
|
|
107
|
+
(options: ng_primitives_state.StateInjectionOptions): Signal<NgpInputState | null>;
|
|
108
|
+
(options?: ng_primitives_state.StateInjectionOptions): Signal<NgpInputState> | Signal<NgpInputState | null>;
|
|
109
|
+
};
|
|
110
|
+
declare const providePasswordInputState: (opts?: {
|
|
111
|
+
inherit?: boolean;
|
|
112
|
+
}) => _angular_core.FactoryProvider;
|
|
113
|
+
|
|
114
|
+
/**
|
|
115
|
+
* Apply the `ngpPasswordToggle` directive to a `button` element to toggle the visibility of the
|
|
116
|
+
* password within an `ngpPassword` container.
|
|
117
|
+
*/
|
|
118
|
+
declare class NgpPasswordToggle {
|
|
119
|
+
/**
|
|
120
|
+
* Access the global password configuration.
|
|
121
|
+
*/
|
|
122
|
+
private readonly config;
|
|
123
|
+
/**
|
|
124
|
+
* The accessible label shown when the password is hidden.
|
|
125
|
+
*/
|
|
126
|
+
readonly showLabel: _angular_core.InputSignal<string>;
|
|
127
|
+
/**
|
|
128
|
+
* The accessible label shown when the password is visible.
|
|
129
|
+
*/
|
|
130
|
+
readonly hideLabel: _angular_core.InputSignal<string>;
|
|
131
|
+
/**
|
|
132
|
+
* The message announced when the password becomes visible.
|
|
133
|
+
*/
|
|
134
|
+
readonly shownAnnouncement: _angular_core.InputSignal<string>;
|
|
135
|
+
/**
|
|
136
|
+
* The message announced when the password becomes hidden.
|
|
137
|
+
*/
|
|
138
|
+
readonly hiddenAnnouncement: _angular_core.InputSignal<string>;
|
|
139
|
+
/**
|
|
140
|
+
* The state for the password toggle primitive.
|
|
141
|
+
*/
|
|
142
|
+
protected readonly state: ng_primitives_password.NgpPasswordToggleState;
|
|
143
|
+
/**
|
|
144
|
+
* Toggle the visibility of the password.
|
|
145
|
+
*/
|
|
146
|
+
toggle(): void;
|
|
147
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpPasswordToggle, never>;
|
|
148
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpPasswordToggle, "button[ngpPasswordToggle]", ["ngpPasswordToggle"], { "showLabel": { "alias": "ngpPasswordToggleShowLabel"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "ngpPasswordToggleHideLabel"; "required": false; "isSignal": true; }; "shownAnnouncement": { "alias": "ngpPasswordToggleShownAnnouncement"; "required": false; "isSignal": true; }; "hiddenAnnouncement": { "alias": "ngpPasswordToggleHiddenAnnouncement"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
/**
|
|
152
|
+
* The state interface for the PasswordToggle pattern.
|
|
153
|
+
*/
|
|
154
|
+
interface NgpPasswordToggleState {
|
|
155
|
+
/**
|
|
156
|
+
* Toggle the visibility of the password.
|
|
157
|
+
*/
|
|
158
|
+
toggle(): void;
|
|
159
|
+
}
|
|
160
|
+
/**
|
|
161
|
+
* The props interface for the PasswordToggle pattern.
|
|
162
|
+
*/
|
|
163
|
+
interface NgpPasswordToggleProps {
|
|
164
|
+
/**
|
|
165
|
+
* The accessible label shown when the password is hidden.
|
|
166
|
+
*/
|
|
167
|
+
readonly showLabel: Signal<string>;
|
|
168
|
+
/**
|
|
169
|
+
* The accessible label shown when the password is visible.
|
|
170
|
+
*/
|
|
171
|
+
readonly hideLabel: Signal<string>;
|
|
172
|
+
/**
|
|
173
|
+
* The message announced when the password becomes visible.
|
|
174
|
+
*/
|
|
175
|
+
readonly shownAnnouncement: Signal<string>;
|
|
176
|
+
/**
|
|
177
|
+
* The message announced when the password becomes hidden.
|
|
178
|
+
*/
|
|
179
|
+
readonly hiddenAnnouncement: Signal<string>;
|
|
180
|
+
}
|
|
181
|
+
declare const ngpPasswordToggle: ({ showLabel, hideLabel, shownAnnouncement, hiddenAnnouncement, }: NgpPasswordToggleProps) => NgpPasswordToggleState;
|
|
182
|
+
declare const injectPasswordToggleState: {
|
|
183
|
+
(): Signal<NgpPasswordToggleState>;
|
|
184
|
+
(options: ng_primitives_state.StateInjectionOptions): Signal<NgpPasswordToggleState | null>;
|
|
185
|
+
(options?: ng_primitives_state.StateInjectionOptions): Signal<NgpPasswordToggleState> | Signal<NgpPasswordToggleState | null>;
|
|
186
|
+
};
|
|
187
|
+
declare const providePasswordToggleState: (opts?: {
|
|
188
|
+
inherit?: boolean;
|
|
189
|
+
}) => _angular_core.FactoryProvider;
|
|
190
|
+
|
|
191
|
+
/**
|
|
192
|
+
* The `NgpPassword` directive is a container for a password field and its visibility toggle.
|
|
193
|
+
*/
|
|
194
|
+
declare class NgpPassword {
|
|
195
|
+
/**
|
|
196
|
+
* Whether the password is visible.
|
|
197
|
+
*/
|
|
198
|
+
readonly visible: _angular_core.InputSignalWithTransform<boolean | undefined, BooleanInput>;
|
|
199
|
+
/**
|
|
200
|
+
* The default visibility state for uncontrolled usage.
|
|
201
|
+
* @default false
|
|
202
|
+
*/
|
|
203
|
+
readonly defaultVisible: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
204
|
+
/**
|
|
205
|
+
* Emits when the visibility state changes.
|
|
206
|
+
*/
|
|
207
|
+
readonly visibleChange: _angular_core.OutputEmitterRef<boolean>;
|
|
208
|
+
/**
|
|
209
|
+
* The state for the password primitive.
|
|
210
|
+
*/
|
|
211
|
+
protected readonly state: ng_primitives_password.NgpPasswordState;
|
|
212
|
+
/**
|
|
213
|
+
* Whether the password is currently visible.
|
|
214
|
+
*/
|
|
215
|
+
readonly isVisible: Signal<boolean>;
|
|
216
|
+
/**
|
|
217
|
+
* Toggle the visibility of the password.
|
|
218
|
+
*/
|
|
219
|
+
toggle(): void;
|
|
220
|
+
/**
|
|
221
|
+
* Set the visibility of the password.
|
|
222
|
+
*/
|
|
223
|
+
setVisible(value: boolean, options?: SetterOptions): void;
|
|
224
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpPassword, never>;
|
|
225
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpPassword, "[ngpPassword]", ["ngpPassword"], { "visible": { "alias": "ngpPasswordVisible"; "required": false; "isSignal": true; }; "defaultVisible": { "alias": "ngpPasswordDefaultVisible"; "required": false; "isSignal": true; }; }, { "visibleChange": "ngpPasswordVisibleChange"; }, never, never, true, never>;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
/**
|
|
229
|
+
* Public state surface for the Password primitive.
|
|
230
|
+
*/
|
|
231
|
+
interface NgpPasswordState {
|
|
232
|
+
/**
|
|
233
|
+
* Whether the password is currently visible.
|
|
234
|
+
*/
|
|
235
|
+
readonly visible: WritableSignal<boolean>;
|
|
236
|
+
/**
|
|
237
|
+
* Emits when the visibility state changes.
|
|
238
|
+
*/
|
|
239
|
+
readonly visibleChange: Observable<boolean>;
|
|
240
|
+
/**
|
|
241
|
+
* The id of the registered input, used to wire up `aria-controls`.
|
|
242
|
+
* @internal
|
|
243
|
+
*/
|
|
244
|
+
readonly inputId: Signal<string | null>;
|
|
245
|
+
/**
|
|
246
|
+
* Toggle the visibility state.
|
|
247
|
+
*/
|
|
248
|
+
toggle(): void;
|
|
249
|
+
/**
|
|
250
|
+
* Set the visibility state.
|
|
251
|
+
*/
|
|
252
|
+
setVisible(value: boolean, options?: SetterOptions): void;
|
|
253
|
+
/**
|
|
254
|
+
* Set the default visibility state.
|
|
255
|
+
*/
|
|
256
|
+
setDefaultVisible(value: boolean): void;
|
|
257
|
+
/**
|
|
258
|
+
* Register the password input with the container.
|
|
259
|
+
* @internal
|
|
260
|
+
*/
|
|
261
|
+
registerInput(input: HTMLInputElement, id: Signal<string>): void;
|
|
262
|
+
/**
|
|
263
|
+
* Focus the registered input.
|
|
264
|
+
* @internal
|
|
265
|
+
*/
|
|
266
|
+
focusInput(): void;
|
|
267
|
+
}
|
|
268
|
+
/**
|
|
269
|
+
* Inputs for configuring the Password primitive.
|
|
270
|
+
*/
|
|
271
|
+
interface NgpPasswordProps {
|
|
272
|
+
/**
|
|
273
|
+
* Whether the password is visible.
|
|
274
|
+
*/
|
|
275
|
+
readonly visible: Signal<boolean | undefined>;
|
|
276
|
+
/**
|
|
277
|
+
* The default visibility state for uncontrolled usage.
|
|
278
|
+
*/
|
|
279
|
+
readonly defaultVisible?: Signal<boolean>;
|
|
280
|
+
/**
|
|
281
|
+
* Callback fired when the visibility state changes.
|
|
282
|
+
*/
|
|
283
|
+
readonly onVisibleChange?: (visible: boolean) => void;
|
|
284
|
+
}
|
|
285
|
+
declare const ngpPassword: ({ visible: _visible, defaultVisible: _defaultVisible, onVisibleChange, }: NgpPasswordProps) => NgpPasswordState;
|
|
286
|
+
declare const injectPasswordState: {
|
|
287
|
+
(): Signal<NgpPasswordState>;
|
|
288
|
+
(options: ng_primitives_state.StateInjectionOptions): Signal<NgpPasswordState | null>;
|
|
289
|
+
(options?: ng_primitives_state.StateInjectionOptions): Signal<NgpPasswordState> | Signal<NgpPasswordState | null>;
|
|
290
|
+
};
|
|
291
|
+
declare const providePasswordState: (opts?: {
|
|
292
|
+
inherit?: boolean;
|
|
293
|
+
}) => _angular_core.FactoryProvider;
|
|
294
|
+
|
|
295
|
+
export { NgpPassword, NgpPasswordConfigToken, NgpPasswordInput, NgpPasswordToggle, defaultPasswordConfig, injectPasswordConfig, injectPasswordInputState, injectPasswordState, injectPasswordToggleState, ngpPassword, ngpPasswordInput, ngpPasswordToggle, providePasswordConfig, providePasswordInputState, providePasswordState, providePasswordToggleState };
|
|
296
|
+
export type { NgpPasswordConfig, NgpPasswordInputProps, NgpPasswordInputState, NgpPasswordProps, NgpPasswordState, NgpPasswordToggleProps, NgpPasswordToggleState };
|
|
@@ -81,6 +81,7 @@ declare class NgpProgress {
|
|
|
81
81
|
* Define a function that returns the progress value label.
|
|
82
82
|
* @param value The current value
|
|
83
83
|
* @param max The maximum value
|
|
84
|
+
* @param min The minimum value
|
|
84
85
|
* @returns The value label
|
|
85
86
|
*/
|
|
86
87
|
readonly valueLabel: _angular_core.InputSignal<NgpProgressValueTextFn>;
|
|
@@ -100,7 +101,7 @@ declare class NgpProgress {
|
|
|
100
101
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpProgress, never>;
|
|
101
102
|
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>;
|
|
102
103
|
}
|
|
103
|
-
type NgpProgressValueTextFn = (value: number, max: number) => string;
|
|
104
|
+
type NgpProgressValueTextFn = (value: number, max: number, min: number) => string;
|
|
104
105
|
|
|
105
106
|
interface NgpProgressProps {
|
|
106
107
|
/**
|
|
@@ -149,7 +150,8 @@ interface NgpProgressState {
|
|
|
149
150
|
*/
|
|
150
151
|
readonly max: WritableSignal<number>;
|
|
151
152
|
/**
|
|
152
|
-
* Get the progress value text.
|
|
153
|
+
* Get the progress value text. An empty string while the progress is
|
|
154
|
+
* indeterminate (the `aria-valuetext` attribute is omitted in that case).
|
|
153
155
|
*/
|
|
154
156
|
readonly valueText: Signal<string>;
|
|
155
157
|
/**
|
|
@@ -142,6 +142,13 @@ interface NgpRovingFocusGroupState {
|
|
|
142
142
|
* @param origin The origin of the focus change
|
|
143
143
|
*/
|
|
144
144
|
setActiveItem(id: string | null, origin?: FocusOrigin): void;
|
|
145
|
+
/**
|
|
146
|
+
* Set which item holds the tab stop without moving focus. Used by items that
|
|
147
|
+
* declare themselves active (e.g. the selected tab) to claim the tab stop
|
|
148
|
+
* without stealing focus.
|
|
149
|
+
* @param id The id of the item that should hold the tab stop.
|
|
150
|
+
*/
|
|
151
|
+
setTabStop(id: string | null): void;
|
|
145
152
|
/**
|
|
146
153
|
* Register an item with the roving focus group.
|
|
147
154
|
* @param item The item to register
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
2
|
import { Signal, WritableSignal, ElementRef } from '@angular/core';
|
|
3
3
|
import * as ng_primitives_state from 'ng-primitives/state';
|
|
4
|
+
import { SetterOptions } from 'ng-primitives/state';
|
|
4
5
|
import { FocusOrigin } from '@angular/cdk/a11y';
|
|
5
6
|
import * as ng_primitives_slider from 'ng-primitives/slider';
|
|
6
7
|
import { NumberInput, BooleanInput } from '@angular/cdk/coercion';
|
|
@@ -162,7 +163,7 @@ declare class NgpSlider {
|
|
|
162
163
|
/**
|
|
163
164
|
* Set the value of the slider.
|
|
164
165
|
*/
|
|
165
|
-
setValue(value: number): void;
|
|
166
|
+
setValue(value: number, options?: SetterOptions): void;
|
|
166
167
|
/**
|
|
167
168
|
* Set the disabled state.
|
|
168
169
|
*/
|
|
@@ -226,7 +227,7 @@ interface NgpSliderState {
|
|
|
226
227
|
/**
|
|
227
228
|
* Set the current value (clamped).
|
|
228
229
|
*/
|
|
229
|
-
setValue(value: number): void;
|
|
230
|
+
setValue(value: number, options?: SetterOptions): void;
|
|
230
231
|
/**
|
|
231
232
|
* Register the track element.
|
|
232
233
|
*/
|
|
@@ -598,11 +599,11 @@ interface NgpRangeSliderState {
|
|
|
598
599
|
/**
|
|
599
600
|
* Updates the low value, ensuring it doesn't exceed the high value.
|
|
600
601
|
*/
|
|
601
|
-
setLowValue(value: number): void;
|
|
602
|
+
setLowValue(value: number, options?: SetterOptions): void;
|
|
602
603
|
/**
|
|
603
604
|
* Updates the high value, ensuring it doesn't go below the low value.
|
|
604
605
|
*/
|
|
605
|
-
setHighValue(value: number): void;
|
|
606
|
+
setHighValue(value: number, options?: SetterOptions): void;
|
|
606
607
|
/**
|
|
607
608
|
* Determines which thumb should be moved based on the position clicked.
|
|
608
609
|
*/
|