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.
Files changed (77) hide show
  1. package/date-time-date-fns/README.md +3 -0
  2. package/fesm2022/ng-primitives-avatar.mjs +4 -2
  3. package/fesm2022/ng-primitives-avatar.mjs.map +1 -1
  4. package/fesm2022/ng-primitives-checkbox.mjs +4 -2
  5. package/fesm2022/ng-primitives-checkbox.mjs.map +1 -1
  6. package/fesm2022/ng-primitives-date-picker.mjs +42 -44
  7. package/fesm2022/ng-primitives-date-picker.mjs.map +1 -1
  8. package/fesm2022/ng-primitives-date-time-date-fns.mjs +95 -0
  9. package/fesm2022/ng-primitives-date-time-date-fns.mjs.map +1 -0
  10. package/fesm2022/ng-primitives-date-time-luxon.mjs +21 -3
  11. package/fesm2022/ng-primitives-date-time-luxon.mjs.map +1 -1
  12. package/fesm2022/ng-primitives-date-time.mjs +18 -3
  13. package/fesm2022/ng-primitives-date-time.mjs.map +1 -1
  14. package/fesm2022/ng-primitives-dialog.mjs +11 -4
  15. package/fesm2022/ng-primitives-dialog.mjs.map +1 -1
  16. package/fesm2022/ng-primitives-form-field.mjs +3 -0
  17. package/fesm2022/ng-primitives-form-field.mjs.map +1 -1
  18. package/fesm2022/ng-primitives-input-otp.mjs +15 -7
  19. package/fesm2022/ng-primitives-input-otp.mjs.map +1 -1
  20. package/fesm2022/ng-primitives-listbox.mjs +5 -4
  21. package/fesm2022/ng-primitives-listbox.mjs.map +1 -1
  22. package/fesm2022/ng-primitives-menu.mjs +8 -0
  23. package/fesm2022/ng-primitives-menu.mjs.map +1 -1
  24. package/fesm2022/ng-primitives-meter.mjs +20 -5
  25. package/fesm2022/ng-primitives-meter.mjs.map +1 -1
  26. package/fesm2022/ng-primitives-number-field.mjs +10 -0
  27. package/fesm2022/ng-primitives-number-field.mjs.map +1 -1
  28. package/fesm2022/ng-primitives-pagination.mjs +16 -6
  29. package/fesm2022/ng-primitives-pagination.mjs.map +1 -1
  30. package/fesm2022/ng-primitives-password.mjs +293 -0
  31. package/fesm2022/ng-primitives-password.mjs.map +1 -0
  32. package/fesm2022/ng-primitives-popover.mjs +4 -0
  33. package/fesm2022/ng-primitives-popover.mjs.map +1 -1
  34. package/fesm2022/ng-primitives-progress.mjs +36 -11
  35. package/fesm2022/ng-primitives-progress.mjs.map +1 -1
  36. package/fesm2022/ng-primitives-roving-focus.mjs +13 -2
  37. package/fesm2022/ng-primitives-roving-focus.mjs.map +1 -1
  38. package/fesm2022/ng-primitives-search.mjs +2 -1
  39. package/fesm2022/ng-primitives-search.mjs.map +1 -1
  40. package/fesm2022/ng-primitives-slider.mjs +38 -18
  41. package/fesm2022/ng-primitives-slider.mjs.map +1 -1
  42. package/fesm2022/ng-primitives-switch.mjs +18 -8
  43. package/fesm2022/ng-primitives-switch.mjs.map +1 -1
  44. package/fesm2022/ng-primitives-tabs.mjs +22 -6
  45. package/fesm2022/ng-primitives-tabs.mjs.map +1 -1
  46. package/fesm2022/ng-primitives-textarea.mjs +10 -8
  47. package/fesm2022/ng-primitives-textarea.mjs.map +1 -1
  48. package/fesm2022/ng-primitives-toast.mjs +3 -0
  49. package/fesm2022/ng-primitives-toast.mjs.map +1 -1
  50. package/fesm2022/ng-primitives-toggle-group.mjs +31 -8
  51. package/fesm2022/ng-primitives-toggle-group.mjs.map +1 -1
  52. package/package.json +12 -1
  53. package/password/README.md +3 -0
  54. package/schematics/ng-generate/templates/checkbox/checkbox.__fileSuffix@dasherize__.ts.template +2 -1
  55. package/schematics/ng-generate/templates/combobox/combobox.__fileSuffix@dasherize__.ts.template +3 -2
  56. package/schematics/ng-generate/templates/date-picker/date-picker.__fileSuffix@dasherize__.ts.template +2 -1
  57. package/schematics/ng-generate/templates/listbox/listbox.__fileSuffix@dasherize__.ts.template +9 -4
  58. package/schematics/ng-generate/templates/pagination/pagination.__fileSuffix@dasherize__.ts.template +7 -1
  59. package/schematics/ng-generate/templates/password/password.__fileSuffix@dasherize__.ts.template +141 -0
  60. package/schematics/ng-generate/templates/range-slider/range-slider.__fileSuffix@dasherize__.ts.template +4 -3
  61. package/schematics/ng-generate/templates/slider/slider.__fileSuffix@dasherize__.ts.template +2 -1
  62. package/schematics/ng-generate/templates/switch/switch.__fileSuffix@dasherize__.ts.template +2 -1
  63. package/types/ng-primitives-checkbox.d.ts +5 -1
  64. package/types/ng-primitives-date-picker.d.ts +7 -9
  65. package/types/ng-primitives-date-time-date-fns.d.ts +30 -0
  66. package/types/ng-primitives-date-time.d.ts +15 -3
  67. package/types/ng-primitives-dialog.d.ts +4 -0
  68. package/types/ng-primitives-input-otp.d.ts +5 -5
  69. package/types/ng-primitives-meter.d.ts +9 -2
  70. package/types/ng-primitives-pagination.d.ts +34 -8
  71. package/types/ng-primitives-password.d.ts +296 -0
  72. package/types/ng-primitives-progress.d.ts +4 -2
  73. package/types/ng-primitives-roving-focus.d.ts +7 -0
  74. package/types/ng-primitives-slider.d.ts +5 -4
  75. package/types/ng-primitives-switch.d.ts +14 -4
  76. package/types/ng-primitives-tabs.d.ts +6 -1
  77. 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 year of the date time object based on a duration.
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 { AfterViewInit, OnDestroy } from '@angular/core';
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 implements AfterViewInit {
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.InputSignal<string>;
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.Signal<boolean>;
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: Signal<boolean>;
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: Signal<boolean>;
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: Signal<boolean>;
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: Signal<boolean>;
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: Signal<boolean>;
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: Signal<boolean>;
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
  */