ng-primitives 0.43.0 → 0.44.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/a11y/active-descendant/active-descendant.d.ts +38 -0
- package/a11y/index.d.ts +2 -1
- package/combobox/README.md +3 -0
- package/combobox/combobox/combobox-state.d.ts +59 -0
- package/combobox/combobox/combobox.d.ts +176 -0
- package/combobox/combobox-button/combobox-button.d.ts +60 -0
- package/combobox/combobox-dropdown/combobox-dropdown.d.ts +15 -0
- package/combobox/combobox-input/combobox-input.d.ts +78 -0
- package/combobox/combobox-option/combobox-option.d.ts +93 -0
- package/combobox/combobox-portal/combobox-portal.d.ts +48 -0
- package/combobox/index.d.ts +7 -0
- package/dialog/config/dialog-config.d.ts +2 -0
- package/dialog/dialog/dialog-ref.d.ts +2 -0
- package/dialog/dialog-trigger/dialog-trigger.d.ts +8 -1
- package/fesm2022/ng-primitives-a11y.mjs +100 -1
- package/fesm2022/ng-primitives-a11y.mjs.map +1 -1
- package/fesm2022/ng-primitives-combobox.mjs +807 -0
- package/fesm2022/ng-primitives-combobox.mjs.map +1 -0
- package/fesm2022/ng-primitives-dialog.mjs +19 -3
- package/fesm2022/ng-primitives-dialog.mjs.map +1 -1
- package/fesm2022/ng-primitives-resize.mjs +21 -2
- package/fesm2022/ng-primitives-resize.mjs.map +1 -1
- package/fesm2022/ng-primitives-tabs.mjs +7 -2
- package/fesm2022/ng-primitives-tabs.mjs.map +1 -1
- package/package.json +9 -5
- package/resize/index.d.ts +1 -1
- package/resize/utils/resize.d.ts +5 -0
- package/schematics/ng-generate/schema.d.ts +2 -1
- package/schematics/ng-generate/schema.json +1 -0
- package/schematics/ng-generate/templates/combobox/combobox.__fileSuffix@dasherize__.ts.template +233 -0
- package/schematics/ng-generate/templates/listbox/listbox.__fileSuffix@dasherize__.ts.template +2 -0
- package/tabs/tab-button/tab-button.d.ts +8 -4
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { Signal } from '@angular/core';
|
|
2
|
+
interface ActiveDescendantManagerOptions<T extends NgpActivatable> {
|
|
3
|
+
/**
|
|
4
|
+
* The disabled state of the active descendant group.
|
|
5
|
+
* @default false
|
|
6
|
+
*/
|
|
7
|
+
disabled?: Signal<boolean>;
|
|
8
|
+
/**
|
|
9
|
+
* The items in the active descendant group.
|
|
10
|
+
*/
|
|
11
|
+
items: Signal<T[]>;
|
|
12
|
+
/**
|
|
13
|
+
* Whether active descendant should wrap around.
|
|
14
|
+
* @default false
|
|
15
|
+
*/
|
|
16
|
+
wrap?: Signal<boolean>;
|
|
17
|
+
}
|
|
18
|
+
export interface NgpActivatable {
|
|
19
|
+
/**
|
|
20
|
+
* The id of the item.
|
|
21
|
+
*/
|
|
22
|
+
id: Signal<string>;
|
|
23
|
+
/**
|
|
24
|
+
* Whether the item is disabled.
|
|
25
|
+
*/
|
|
26
|
+
disabled?: Signal<boolean>;
|
|
27
|
+
}
|
|
28
|
+
export declare function activeDescendantManager<T extends NgpActivatable>(options: ActiveDescendantManagerOptions<T>): {
|
|
29
|
+
activeDescendant: Signal<string | undefined>;
|
|
30
|
+
activeItem: Signal<T | undefined>;
|
|
31
|
+
activate: (item: T | undefined) => void;
|
|
32
|
+
first: () => void;
|
|
33
|
+
last: () => void;
|
|
34
|
+
next: () => void;
|
|
35
|
+
previous: () => void;
|
|
36
|
+
reset: () => void;
|
|
37
|
+
};
|
|
38
|
+
export {};
|
package/a11y/index.d.ts
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
+
export * from './active-descendant/active-descendant';
|
|
1
2
|
export * from './visually-hidden/visually-hidden';
|
|
2
|
-
export {
|
|
3
|
+
export { injectVisuallyHiddenState, provideVisuallyHiddenState, } from './visually-hidden/visually-hidden-state';
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import type { NgpCombobox } from './combobox';
|
|
2
|
+
/**
|
|
3
|
+
* The state token for the Combobox primitive.
|
|
4
|
+
*/
|
|
5
|
+
export declare const NgpComboboxStateToken: import("@angular/core").InjectionToken<NgpCombobox>;
|
|
6
|
+
/**
|
|
7
|
+
* Provides the Combobox state.
|
|
8
|
+
*/
|
|
9
|
+
export declare const provideComboboxState: (options?: import("ng-primitives/state").CreateStateProviderOptions) => import("@angular/core").FactoryProvider;
|
|
10
|
+
/**
|
|
11
|
+
* Injects the Combobox state.
|
|
12
|
+
*/
|
|
13
|
+
export declare const injectComboboxState: <U = {
|
|
14
|
+
readonly elementRef: import("@angular/core").ElementRef<HTMLElement>;
|
|
15
|
+
readonly injector: import("@angular/core").Injector;
|
|
16
|
+
readonly value: import("@angular/core").InputSignal<any>;
|
|
17
|
+
readonly valueChange: import("@angular/core").OutputEmitterRef<any>;
|
|
18
|
+
readonly multiple: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
|
|
19
|
+
readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
|
|
20
|
+
readonly openChange: import("@angular/core").OutputEmitterRef<boolean>;
|
|
21
|
+
readonly compareWith: import("@angular/core").InputSignal<(a: any | undefined, b: any | undefined) => boolean>;
|
|
22
|
+
readonly dropdownPosition: import("@angular/core").InputSignal<"top" | "bottom" | "auto">;
|
|
23
|
+
readonly input: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxInput | undefined>;
|
|
24
|
+
readonly button: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxButton | undefined>;
|
|
25
|
+
readonly portal: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxPortal | undefined>;
|
|
26
|
+
readonly dropdown: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxDropdown | undefined>;
|
|
27
|
+
readonly options: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxOption[]>;
|
|
28
|
+
readonly open: import("@angular/core").Signal<boolean>;
|
|
29
|
+
readonly activeDescendantManager: {
|
|
30
|
+
activeDescendant: import("@angular/core").Signal<string | undefined>;
|
|
31
|
+
activeItem: import("@angular/core").Signal<import("ng-primitives/combobox").NgpComboboxOption | undefined>;
|
|
32
|
+
activate: (item: import("ng-primitives/combobox").NgpComboboxOption | undefined) => void;
|
|
33
|
+
first: () => void;
|
|
34
|
+
last: () => void;
|
|
35
|
+
next: () => void;
|
|
36
|
+
previous: () => void;
|
|
37
|
+
reset: () => void;
|
|
38
|
+
};
|
|
39
|
+
readonly state: import("ng-primitives/state").CreatedState<NgpCombobox>;
|
|
40
|
+
openDropdown: () => void;
|
|
41
|
+
closeDropdown: () => void;
|
|
42
|
+
toggleDropdown: () => void;
|
|
43
|
+
selectOption: (option: import("ng-primitives/combobox").NgpComboboxOption) => void;
|
|
44
|
+
deselectOption: (option: import("ng-primitives/combobox").NgpComboboxOption) => void;
|
|
45
|
+
toggleOption: (option: import("ng-primitives/combobox").NgpComboboxOption) => void;
|
|
46
|
+
isOptionSelected: (option: import("ng-primitives/combobox").NgpComboboxOption) => boolean;
|
|
47
|
+
activateNextOption: () => void;
|
|
48
|
+
activatePreviousOption: () => void;
|
|
49
|
+
registerPortal: (portal: import("ng-primitives/combobox").NgpComboboxPortal) => void;
|
|
50
|
+
registerInput: (input: import("ng-primitives/combobox").NgpComboboxInput) => void;
|
|
51
|
+
registerButton: (button: import("ng-primitives/combobox").NgpComboboxButton) => void;
|
|
52
|
+
registerDropdown: (dropdown: import("ng-primitives/combobox").NgpComboboxDropdown) => void;
|
|
53
|
+
registerOption: (option: import("ng-primitives/combobox").NgpComboboxOption) => void;
|
|
54
|
+
unregisterOption: (option: import("ng-primitives/combobox").NgpComboboxOption) => void;
|
|
55
|
+
}>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
|
|
56
|
+
/**
|
|
57
|
+
* The Combobox state registration function.
|
|
58
|
+
*/
|
|
59
|
+
export declare const comboboxState: <U>(state: U) => import("ng-primitives/state").CreatedState<U>;
|
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
import { BooleanInput } from '@angular/cdk/coercion';
|
|
2
|
+
import { Injector } from '@angular/core';
|
|
3
|
+
import type { NgpComboboxButton } from '../combobox-button/combobox-button';
|
|
4
|
+
import type { NgpComboboxDropdown } from '../combobox-dropdown/combobox-dropdown';
|
|
5
|
+
import type { NgpComboboxInput } from '../combobox-input/combobox-input';
|
|
6
|
+
import { NgpComboboxOption } from '../combobox-option/combobox-option';
|
|
7
|
+
import type { NgpComboboxPortal } from '../combobox-portal/combobox-portal';
|
|
8
|
+
import * as i0 from "@angular/core";
|
|
9
|
+
/**
|
|
10
|
+
* Ideally we would use a generic type here, unfortunately, unlike in React,
|
|
11
|
+
* we cannot infer the type based on another input. For example, if multiple
|
|
12
|
+
* is true, we cannot infer that the value is an array of T. Using a union
|
|
13
|
+
* type is not ideal either because it requires the user to handle multiple cases.
|
|
14
|
+
* Using a generic also isn't ideal because we need to use T as both an array and
|
|
15
|
+
* a single value.
|
|
16
|
+
*
|
|
17
|
+
* Any seems to be used by Angular Material, ng-select, and other libraries
|
|
18
|
+
* so we will use it here as well.
|
|
19
|
+
*/
|
|
20
|
+
type T = any;
|
|
21
|
+
export declare class NgpCombobox {
|
|
22
|
+
/** @internal Access the combobox element. */
|
|
23
|
+
readonly elementRef: import("@angular/core").ElementRef<HTMLElement>;
|
|
24
|
+
/** Access the injector. */
|
|
25
|
+
protected readonly injector: Injector;
|
|
26
|
+
/** The value of the combobox. */
|
|
27
|
+
readonly value: import("@angular/core").InputSignal<any>;
|
|
28
|
+
/** Event emitted when the value changes. */
|
|
29
|
+
readonly valueChange: import("@angular/core").OutputEmitterRef<any>;
|
|
30
|
+
/** Whether the combobox is multiple selection. */
|
|
31
|
+
readonly multiple: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
|
|
32
|
+
/** Whether the combobox is disabled. */
|
|
33
|
+
readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
|
|
34
|
+
/** Emit when the dropdown open state changes. */
|
|
35
|
+
readonly openChange: import("@angular/core").OutputEmitterRef<boolean>;
|
|
36
|
+
/** The comparator function used to compare options. */
|
|
37
|
+
readonly compareWith: import("@angular/core").InputSignal<(a: T | undefined, b: T | undefined) => boolean>;
|
|
38
|
+
/** The position of the dropdown. */
|
|
39
|
+
readonly dropdownPosition: import("@angular/core").InputSignal<"top" | "bottom" | "auto">;
|
|
40
|
+
/**
|
|
41
|
+
* Store the combobox input
|
|
42
|
+
* @internal
|
|
43
|
+
*/
|
|
44
|
+
readonly input: import("@angular/core").WritableSignal<NgpComboboxInput | undefined>;
|
|
45
|
+
/**
|
|
46
|
+
* Store the combobox button.
|
|
47
|
+
* @internal
|
|
48
|
+
*/
|
|
49
|
+
readonly button: import("@angular/core").WritableSignal<NgpComboboxButton | undefined>;
|
|
50
|
+
/**
|
|
51
|
+
* Store the combobox portal.
|
|
52
|
+
* @internal
|
|
53
|
+
*/
|
|
54
|
+
readonly portal: import("@angular/core").WritableSignal<NgpComboboxPortal | undefined>;
|
|
55
|
+
/**
|
|
56
|
+
* Store the combobox dropdown.
|
|
57
|
+
* @internal
|
|
58
|
+
*/
|
|
59
|
+
readonly dropdown: import("@angular/core").WritableSignal<NgpComboboxDropdown | undefined>;
|
|
60
|
+
/**
|
|
61
|
+
* Store the combobox options.
|
|
62
|
+
* @internal
|
|
63
|
+
*/
|
|
64
|
+
readonly options: import("@angular/core").WritableSignal<NgpComboboxOption[]>;
|
|
65
|
+
/**
|
|
66
|
+
* The open state of the combobox.
|
|
67
|
+
* @internal
|
|
68
|
+
*/
|
|
69
|
+
readonly open: import("@angular/core").Signal<boolean>;
|
|
70
|
+
/**
|
|
71
|
+
* The active key descendant manager.
|
|
72
|
+
* @internal
|
|
73
|
+
*/
|
|
74
|
+
readonly activeDescendantManager: {
|
|
75
|
+
activeDescendant: import("@angular/core").Signal<string | undefined>;
|
|
76
|
+
activeItem: import("@angular/core").Signal<NgpComboboxOption | undefined>;
|
|
77
|
+
activate: (item: NgpComboboxOption | undefined) => void;
|
|
78
|
+
first: () => void;
|
|
79
|
+
last: () => void;
|
|
80
|
+
next: () => void;
|
|
81
|
+
previous: () => void;
|
|
82
|
+
reset: () => void;
|
|
83
|
+
};
|
|
84
|
+
/** The state of the combobox. */
|
|
85
|
+
protected readonly state: import("ng-primitives/state").CreatedState<NgpCombobox>;
|
|
86
|
+
constructor();
|
|
87
|
+
/**
|
|
88
|
+
* Open the dropdown.
|
|
89
|
+
* @internal
|
|
90
|
+
*/
|
|
91
|
+
openDropdown(): void;
|
|
92
|
+
/**
|
|
93
|
+
* Close the dropdown.
|
|
94
|
+
* @internal
|
|
95
|
+
*/
|
|
96
|
+
closeDropdown(): void;
|
|
97
|
+
/**
|
|
98
|
+
* Toggle the dropdown.
|
|
99
|
+
* @internal
|
|
100
|
+
*/
|
|
101
|
+
toggleDropdown(): void;
|
|
102
|
+
/**
|
|
103
|
+
* Select an option.
|
|
104
|
+
* @param option The option to select.
|
|
105
|
+
* @internal
|
|
106
|
+
*/
|
|
107
|
+
selectOption(option: NgpComboboxOption): void;
|
|
108
|
+
/**
|
|
109
|
+
* Deselect an option.
|
|
110
|
+
* @param option The option to deselect.
|
|
111
|
+
* @internal
|
|
112
|
+
*/
|
|
113
|
+
deselectOption(option: NgpComboboxOption): void;
|
|
114
|
+
/**
|
|
115
|
+
* Toggle the selection of an option.
|
|
116
|
+
* @param option The option to toggle.
|
|
117
|
+
* @internal
|
|
118
|
+
*/
|
|
119
|
+
toggleOption(option: NgpComboboxOption): void;
|
|
120
|
+
/**
|
|
121
|
+
* Determine if an option is selected.
|
|
122
|
+
* @param option The option to check.
|
|
123
|
+
* @internal
|
|
124
|
+
*/
|
|
125
|
+
isOptionSelected(option: NgpComboboxOption): boolean;
|
|
126
|
+
/**
|
|
127
|
+
* Activate the next option in the list if there is one.
|
|
128
|
+
* If there is no option currently active, activate the selected option or the first option.
|
|
129
|
+
* @internal
|
|
130
|
+
*/
|
|
131
|
+
activateNextOption(): void;
|
|
132
|
+
/**
|
|
133
|
+
* Activate the previous option in the list if there is one.
|
|
134
|
+
* @internal
|
|
135
|
+
*/
|
|
136
|
+
activatePreviousOption(): void;
|
|
137
|
+
/**
|
|
138
|
+
* Register the dropdown portal with the combobox.
|
|
139
|
+
* @param portal The dropdown portal.
|
|
140
|
+
* @internal
|
|
141
|
+
*/
|
|
142
|
+
registerPortal(portal: NgpComboboxPortal): void;
|
|
143
|
+
/**
|
|
144
|
+
* Register the combobox input with the combobox.
|
|
145
|
+
* @param input The combobox input.
|
|
146
|
+
* @internal
|
|
147
|
+
*/
|
|
148
|
+
registerInput(input: NgpComboboxInput): void;
|
|
149
|
+
/**
|
|
150
|
+
* Register the combobox button with the combobox.
|
|
151
|
+
* @param button The combobox button.
|
|
152
|
+
* @internal
|
|
153
|
+
*/
|
|
154
|
+
registerButton(button: NgpComboboxButton): void;
|
|
155
|
+
/**
|
|
156
|
+
* Register the dropdown with the combobox.
|
|
157
|
+
* @param dropdown The dropdown to register.
|
|
158
|
+
* @internal
|
|
159
|
+
*/
|
|
160
|
+
registerDropdown(dropdown: NgpComboboxDropdown): void;
|
|
161
|
+
/**
|
|
162
|
+
* Register an option with the combobox.
|
|
163
|
+
* @param option The option to register.
|
|
164
|
+
* @internal
|
|
165
|
+
*/
|
|
166
|
+
registerOption(option: NgpComboboxOption): void;
|
|
167
|
+
/**
|
|
168
|
+
* Unregister an option from the combobox.
|
|
169
|
+
* @param option The option to unregister.
|
|
170
|
+
* @internal
|
|
171
|
+
*/
|
|
172
|
+
unregisterOption(option: NgpComboboxOption): void;
|
|
173
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgpCombobox, never>;
|
|
174
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<NgpCombobox, "[ngpCombobox]", ["ngpCombobox"], { "value": { "alias": "ngpComboboxValue"; "required": false; "isSignal": true; }; "multiple": { "alias": "ngpComboboxMultiple"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpComboboxDisabled"; "required": false; "isSignal": true; }; "compareWith": { "alias": "ngpComboboxCompareWith"; "required": false; "isSignal": true; }; "dropdownPosition": { "alias": "ngpComboboxDropdownPosition"; "required": false; "isSignal": true; }; }, { "valueChange": "ngpComboboxValueChange"; "openChange": "ngpComboboxOpenChange"; }, never, never, true, never>;
|
|
175
|
+
}
|
|
176
|
+
export {};
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
export declare class NgpComboboxButton {
|
|
3
|
+
/** Access the combobox state. */
|
|
4
|
+
protected readonly state: import("@angular/core").Signal<import("ng-primitives/state").State<{
|
|
5
|
+
readonly elementRef: import("@angular/core").ElementRef<HTMLElement>;
|
|
6
|
+
readonly injector: import("@angular/core").Injector;
|
|
7
|
+
readonly value: import("@angular/core").InputSignal<any>;
|
|
8
|
+
readonly valueChange: import("@angular/core").OutputEmitterRef<any>;
|
|
9
|
+
readonly multiple: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
|
|
10
|
+
readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
|
|
11
|
+
readonly openChange: import("@angular/core").OutputEmitterRef<boolean>;
|
|
12
|
+
readonly compareWith: import("@angular/core").InputSignal<(a: any | undefined, b: any | undefined) => boolean>;
|
|
13
|
+
readonly dropdownPosition: import("@angular/core").InputSignal<"top" | "bottom" | "auto">;
|
|
14
|
+
readonly input: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxInput | undefined>;
|
|
15
|
+
readonly button: import("@angular/core").WritableSignal<NgpComboboxButton | undefined>;
|
|
16
|
+
readonly portal: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxPortal | undefined>;
|
|
17
|
+
readonly dropdown: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxDropdown | undefined>;
|
|
18
|
+
readonly options: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxOption[]>;
|
|
19
|
+
readonly open: import("@angular/core").Signal<boolean>;
|
|
20
|
+
readonly activeDescendantManager: {
|
|
21
|
+
activeDescendant: import("@angular/core").Signal<string | undefined>;
|
|
22
|
+
activeItem: import("@angular/core").Signal<import("ng-primitives/combobox").NgpComboboxOption | undefined>;
|
|
23
|
+
activate: (item: import("ng-primitives/combobox").NgpComboboxOption | undefined) => void;
|
|
24
|
+
first: () => void;
|
|
25
|
+
last: () => void;
|
|
26
|
+
next: () => void;
|
|
27
|
+
previous: () => void;
|
|
28
|
+
reset: () => void;
|
|
29
|
+
};
|
|
30
|
+
readonly state: import("ng-primitives/state").CreatedState<import("ng-primitives/combobox").NgpCombobox>;
|
|
31
|
+
openDropdown: () => void;
|
|
32
|
+
closeDropdown: () => void;
|
|
33
|
+
toggleDropdown: () => void;
|
|
34
|
+
selectOption: (option: import("ng-primitives/combobox").NgpComboboxOption) => void;
|
|
35
|
+
deselectOption: (option: import("ng-primitives/combobox").NgpComboboxOption) => void;
|
|
36
|
+
toggleOption: (option: import("ng-primitives/combobox").NgpComboboxOption) => void;
|
|
37
|
+
isOptionSelected: (option: import("ng-primitives/combobox").NgpComboboxOption) => boolean;
|
|
38
|
+
activateNextOption: () => void;
|
|
39
|
+
activatePreviousOption: () => void;
|
|
40
|
+
registerPortal: (portal: import("ng-primitives/combobox").NgpComboboxPortal) => void;
|
|
41
|
+
registerInput: (input: import("ng-primitives/combobox").NgpComboboxInput) => void;
|
|
42
|
+
registerButton: (button: NgpComboboxButton) => void;
|
|
43
|
+
registerDropdown: (dropdown: import("ng-primitives/combobox").NgpComboboxDropdown) => void;
|
|
44
|
+
registerOption: (option: import("ng-primitives/combobox").NgpComboboxOption) => void;
|
|
45
|
+
unregisterOption: (option: import("ng-primitives/combobox").NgpComboboxOption) => void;
|
|
46
|
+
}>>;
|
|
47
|
+
/**
|
|
48
|
+
* Access the element reference.
|
|
49
|
+
* @internal
|
|
50
|
+
*/
|
|
51
|
+
readonly elementRef: import("@angular/core").ElementRef<HTMLButtonElement>;
|
|
52
|
+
/** The id of the button. */
|
|
53
|
+
readonly id: import("@angular/core").InputSignal<string>;
|
|
54
|
+
/** The id of the dropdown. */
|
|
55
|
+
readonly dropdownId: import("@angular/core").Signal<string | undefined>;
|
|
56
|
+
constructor();
|
|
57
|
+
protected toggleDropdown(): void;
|
|
58
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgpComboboxButton, never>;
|
|
59
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<NgpComboboxButton, "[ngpComboboxButton]", ["ngpComboboxButton"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
60
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
export declare class NgpComboboxDropdown {
|
|
3
|
+
/** Access the combobox state. */
|
|
4
|
+
private readonly state;
|
|
5
|
+
/**
|
|
6
|
+
* Access the element reference.
|
|
7
|
+
* @internal
|
|
8
|
+
*/
|
|
9
|
+
readonly elementRef: import("@angular/core").ElementRef<HTMLElement>;
|
|
10
|
+
/** The id of the dropdown. */
|
|
11
|
+
readonly id: import("@angular/core").InputSignal<string>;
|
|
12
|
+
constructor();
|
|
13
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgpComboboxDropdown, never>;
|
|
14
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<NgpComboboxDropdown, "[ngpComboboxDropdown]", ["ngpComboboxDropdown"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
15
|
+
}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import type { NgpComboboxOption } from '../combobox-option/combobox-option';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export declare class NgpComboboxInput {
|
|
4
|
+
/** Access the combobox state. */
|
|
5
|
+
protected readonly state: import("@angular/core").Signal<import("ng-primitives/state").State<{
|
|
6
|
+
readonly elementRef: import("@angular/core").ElementRef<HTMLElement>;
|
|
7
|
+
readonly injector: import("@angular/core").Injector;
|
|
8
|
+
readonly value: import("@angular/core").InputSignal<any>;
|
|
9
|
+
readonly valueChange: import("@angular/core").OutputEmitterRef<any>;
|
|
10
|
+
readonly multiple: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
|
|
11
|
+
readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
|
|
12
|
+
readonly openChange: import("@angular/core").OutputEmitterRef<boolean>;
|
|
13
|
+
readonly compareWith: import("@angular/core").InputSignal<(a: any | undefined, b: any | undefined) => boolean>;
|
|
14
|
+
readonly dropdownPosition: import("@angular/core").InputSignal<"top" | "bottom" | "auto">;
|
|
15
|
+
readonly input: import("@angular/core").WritableSignal<NgpComboboxInput | undefined>;
|
|
16
|
+
readonly button: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxButton | undefined>;
|
|
17
|
+
readonly portal: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxPortal | undefined>;
|
|
18
|
+
readonly dropdown: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxDropdown | undefined>;
|
|
19
|
+
readonly options: import("@angular/core").WritableSignal<NgpComboboxOption[]>;
|
|
20
|
+
readonly open: import("@angular/core").Signal<boolean>;
|
|
21
|
+
readonly activeDescendantManager: {
|
|
22
|
+
activeDescendant: import("@angular/core").Signal<string | undefined>;
|
|
23
|
+
activeItem: import("@angular/core").Signal<NgpComboboxOption | undefined>;
|
|
24
|
+
activate: (item: NgpComboboxOption | undefined) => void;
|
|
25
|
+
first: () => void;
|
|
26
|
+
last: () => void;
|
|
27
|
+
next: () => void;
|
|
28
|
+
previous: () => void;
|
|
29
|
+
reset: () => void;
|
|
30
|
+
};
|
|
31
|
+
readonly state: import("ng-primitives/state").CreatedState<import("ng-primitives/combobox").NgpCombobox>;
|
|
32
|
+
openDropdown: () => void;
|
|
33
|
+
closeDropdown: () => void;
|
|
34
|
+
toggleDropdown: () => void;
|
|
35
|
+
selectOption: (option: NgpComboboxOption) => void;
|
|
36
|
+
deselectOption: (option: NgpComboboxOption) => void;
|
|
37
|
+
toggleOption: (option: NgpComboboxOption) => void;
|
|
38
|
+
isOptionSelected: (option: NgpComboboxOption) => boolean;
|
|
39
|
+
activateNextOption: () => void;
|
|
40
|
+
activatePreviousOption: () => void;
|
|
41
|
+
registerPortal: (portal: import("ng-primitives/combobox").NgpComboboxPortal) => void;
|
|
42
|
+
registerInput: (input: NgpComboboxInput) => void;
|
|
43
|
+
registerButton: (button: import("ng-primitives/combobox").NgpComboboxButton) => void;
|
|
44
|
+
registerDropdown: (dropdown: import("ng-primitives/combobox").NgpComboboxDropdown) => void;
|
|
45
|
+
registerOption: (option: NgpComboboxOption) => void;
|
|
46
|
+
unregisterOption: (option: NgpComboboxOption) => void;
|
|
47
|
+
}>>;
|
|
48
|
+
/**
|
|
49
|
+
* Access the element reference.
|
|
50
|
+
* @internal
|
|
51
|
+
*/
|
|
52
|
+
readonly elementRef: import("@angular/core").ElementRef<HTMLInputElement>;
|
|
53
|
+
/** The id of the input. */
|
|
54
|
+
readonly id: import("@angular/core").InputSignal<string>;
|
|
55
|
+
/**
|
|
56
|
+
* Extract the string representation of the value.
|
|
57
|
+
*/
|
|
58
|
+
readonly displayWith: import("@angular/core").InputSignal<(value: any) => string>;
|
|
59
|
+
/** The id of the dropdown. */
|
|
60
|
+
readonly dropdownId: import("@angular/core").Signal<string | undefined>;
|
|
61
|
+
/** The id of the active descendant. */
|
|
62
|
+
protected readonly activeDescendant: import("@angular/core").Signal<string | undefined>;
|
|
63
|
+
/** Determine if the pointer was used to focus the input. */
|
|
64
|
+
protected pointerFocused: boolean;
|
|
65
|
+
constructor();
|
|
66
|
+
/** Handle keydown events for accessibility. */
|
|
67
|
+
protected handleKeydown(event: KeyboardEvent): void;
|
|
68
|
+
protected closeDropdown(event: FocusEvent): void;
|
|
69
|
+
/**
|
|
70
|
+
* Focus the input field
|
|
71
|
+
* @internal
|
|
72
|
+
*/
|
|
73
|
+
focus(): void;
|
|
74
|
+
protected highlightText(): void;
|
|
75
|
+
protected handlePointerDown(): void;
|
|
76
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgpComboboxInput, never>;
|
|
77
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<NgpComboboxInput, "input[ngpComboboxInput]", ["ngpComboboxInput"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
78
|
+
}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { BooleanInput } from '@angular/cdk/coercion';
|
|
2
|
+
import { OnDestroy, OnInit } from '@angular/core';
|
|
3
|
+
import { NgpActivatable } from 'ng-primitives/a11y';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
export declare class NgpComboboxOption implements OnInit, OnDestroy, NgpActivatable {
|
|
6
|
+
/** Access the combobox state. */
|
|
7
|
+
protected readonly state: import("@angular/core").Signal<import("ng-primitives/state").State<{
|
|
8
|
+
readonly elementRef: import("@angular/core").ElementRef<HTMLElement>;
|
|
9
|
+
readonly injector: import("@angular/core").Injector;
|
|
10
|
+
readonly value: import("@angular/core").InputSignal<any>;
|
|
11
|
+
readonly valueChange: import("@angular/core").OutputEmitterRef<any>;
|
|
12
|
+
readonly multiple: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
|
|
13
|
+
readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
|
|
14
|
+
readonly openChange: import("@angular/core").OutputEmitterRef<boolean>;
|
|
15
|
+
readonly compareWith: import("@angular/core").InputSignal<(a: any | undefined, b: any | undefined) => boolean>;
|
|
16
|
+
readonly dropdownPosition: import("@angular/core").InputSignal<"top" | "bottom" | "auto">;
|
|
17
|
+
readonly input: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxInput | undefined>;
|
|
18
|
+
readonly button: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxButton | undefined>;
|
|
19
|
+
readonly portal: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxPortal | undefined>;
|
|
20
|
+
readonly dropdown: import("@angular/core").WritableSignal<import("ng-primitives/combobox").NgpComboboxDropdown | undefined>;
|
|
21
|
+
readonly options: import("@angular/core").WritableSignal<NgpComboboxOption[]>;
|
|
22
|
+
readonly open: import("@angular/core").Signal<boolean>;
|
|
23
|
+
readonly activeDescendantManager: {
|
|
24
|
+
activeDescendant: import("@angular/core").Signal<string | undefined>;
|
|
25
|
+
activeItem: import("@angular/core").Signal<NgpComboboxOption | undefined>;
|
|
26
|
+
activate: (item: NgpComboboxOption | undefined) => void;
|
|
27
|
+
first: () => void;
|
|
28
|
+
last: () => void;
|
|
29
|
+
next: () => void;
|
|
30
|
+
previous: () => void;
|
|
31
|
+
reset: () => void;
|
|
32
|
+
};
|
|
33
|
+
readonly state: import("ng-primitives/state").CreatedState<import("ng-primitives/combobox").NgpCombobox>;
|
|
34
|
+
openDropdown: () => void;
|
|
35
|
+
closeDropdown: () => void;
|
|
36
|
+
toggleDropdown: () => void;
|
|
37
|
+
selectOption: (option: NgpComboboxOption) => void;
|
|
38
|
+
deselectOption: (option: NgpComboboxOption) => void;
|
|
39
|
+
toggleOption: (option: NgpComboboxOption) => void;
|
|
40
|
+
isOptionSelected: (option: NgpComboboxOption) => boolean;
|
|
41
|
+
activateNextOption: () => void;
|
|
42
|
+
activatePreviousOption: () => void;
|
|
43
|
+
registerPortal: (portal: import("ng-primitives/combobox").NgpComboboxPortal) => void;
|
|
44
|
+
registerInput: (input: import("ng-primitives/combobox").NgpComboboxInput) => void;
|
|
45
|
+
registerButton: (button: import("ng-primitives/combobox").NgpComboboxButton) => void;
|
|
46
|
+
registerDropdown: (dropdown: import("ng-primitives/combobox").NgpComboboxDropdown) => void;
|
|
47
|
+
registerOption: (option: NgpComboboxOption) => void;
|
|
48
|
+
unregisterOption: (option: NgpComboboxOption) => void;
|
|
49
|
+
}>>;
|
|
50
|
+
/**
|
|
51
|
+
* The element reference of the option.
|
|
52
|
+
* @internal
|
|
53
|
+
*/
|
|
54
|
+
readonly elementRef: import("@angular/core").ElementRef<HTMLElement>;
|
|
55
|
+
/** The id of the option. */
|
|
56
|
+
readonly id: import("@angular/core").InputSignal<string>;
|
|
57
|
+
/** The value of the option. */
|
|
58
|
+
readonly value: import("@angular/core").InputSignal<any>;
|
|
59
|
+
/** The disabled state of the option. */
|
|
60
|
+
readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
|
|
61
|
+
/**
|
|
62
|
+
* Whether this option is the active descendant.
|
|
63
|
+
* @internal
|
|
64
|
+
*/
|
|
65
|
+
protected readonly active: import("@angular/core").Signal<boolean>;
|
|
66
|
+
/** Whether this option is selected. */
|
|
67
|
+
protected readonly selected: import("@angular/core").Signal<boolean>;
|
|
68
|
+
constructor();
|
|
69
|
+
ngOnInit(): void;
|
|
70
|
+
ngOnDestroy(): void;
|
|
71
|
+
/**
|
|
72
|
+
* Select the option.
|
|
73
|
+
* @internal
|
|
74
|
+
*/
|
|
75
|
+
select(): void;
|
|
76
|
+
/**
|
|
77
|
+
* Scroll the option into view.
|
|
78
|
+
* @internal
|
|
79
|
+
*/
|
|
80
|
+
scrollIntoView(): void;
|
|
81
|
+
/**
|
|
82
|
+
* Whenever the pointer enters the option, activate it.
|
|
83
|
+
* @internal
|
|
84
|
+
*/
|
|
85
|
+
protected onPointerEnter(): void;
|
|
86
|
+
/**
|
|
87
|
+
* Whenever the pointer leaves the option, deactivate it.
|
|
88
|
+
* @internal
|
|
89
|
+
*/
|
|
90
|
+
protected onPointerLeave(): void;
|
|
91
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgpComboboxOption, never>;
|
|
92
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<NgpComboboxOption, "[ngpComboboxOption]", ["ngpComboboxOption"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "ngpComboboxOptionValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpComboboxOptionDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
93
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { OnDestroy } from '@angular/core';
|
|
2
|
+
import { NgpPortal } from 'ng-primitives/portal';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export declare class NgpComboboxPortal implements OnDestroy {
|
|
5
|
+
/** Access the combobox state. */
|
|
6
|
+
private readonly state;
|
|
7
|
+
/** Access the template reference. */
|
|
8
|
+
private readonly templateRef;
|
|
9
|
+
/** Access the view container reference. */
|
|
10
|
+
private readonly viewContainerRef;
|
|
11
|
+
/** Access the injector. */
|
|
12
|
+
private readonly injector;
|
|
13
|
+
/** Access the document. */
|
|
14
|
+
private readonly document;
|
|
15
|
+
/**
|
|
16
|
+
* Store the embedded view reference.
|
|
17
|
+
* @internal
|
|
18
|
+
*/
|
|
19
|
+
readonly viewRef: import("@angular/core").WritableSignal<NgpPortal | null>;
|
|
20
|
+
/** Store the dispose function. */
|
|
21
|
+
private dispose;
|
|
22
|
+
/** The position of the dropdown. */
|
|
23
|
+
readonly position: import("@angular/core").WritableSignal<{
|
|
24
|
+
x: number;
|
|
25
|
+
y: number;
|
|
26
|
+
}>;
|
|
27
|
+
/** The dimensions of the combobox. */
|
|
28
|
+
private readonly comboboxDimensions;
|
|
29
|
+
/** The dimensions of the combobox. */
|
|
30
|
+
private readonly inputDimensions;
|
|
31
|
+
/** Store the combobox button dimensions. */
|
|
32
|
+
private readonly buttonDimensions;
|
|
33
|
+
constructor();
|
|
34
|
+
/** Cleanup the portal. */
|
|
35
|
+
ngOnDestroy(): void;
|
|
36
|
+
/**
|
|
37
|
+
* Attach the portal.
|
|
38
|
+
* @internal
|
|
39
|
+
*/
|
|
40
|
+
attach(): void;
|
|
41
|
+
/**
|
|
42
|
+
* Detach the portal.
|
|
43
|
+
* @internal
|
|
44
|
+
*/
|
|
45
|
+
detach(): Promise<void>;
|
|
46
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgpComboboxPortal, never>;
|
|
47
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<NgpComboboxPortal, "[ngpComboboxPortal]", ["ngpComboboxPortal"], {}, {}, never, never, true, never>;
|
|
48
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export { NgpComboboxDropdown } from './combobox-dropdown/combobox-dropdown';
|
|
2
|
+
export { NgpComboboxInput } from './combobox-input/combobox-input';
|
|
3
|
+
export { NgpComboboxOption } from './combobox-option/combobox-option';
|
|
4
|
+
export { NgpComboboxPortal } from './combobox-portal/combobox-portal';
|
|
5
|
+
export { NgpCombobox } from './combobox/combobox';
|
|
6
|
+
export { injectComboboxState, provideComboboxState } from './combobox/combobox-state';
|
|
7
|
+
export { NgpComboboxButton } from './combobox-button/combobox-button';
|
|
@@ -20,6 +20,8 @@ export interface NgpDialogConfig<T = any> {
|
|
|
20
20
|
* history.
|
|
21
21
|
*/
|
|
22
22
|
closeOnNavigation?: boolean;
|
|
23
|
+
/** Whether the dialog should close when the user presses the escape key. */
|
|
24
|
+
closeOnEscape?: boolean;
|
|
23
25
|
data?: T;
|
|
24
26
|
}
|
|
25
27
|
export declare const defaultDialogConfig: NgpDialogConfig;
|
|
@@ -11,6 +11,8 @@ export declare class NgpDialogRef<T = unknown> {
|
|
|
11
11
|
readonly config: NgpDialogConfig<T>;
|
|
12
12
|
/** Whether the user is allowed to close the dialog. */
|
|
13
13
|
disableClose: boolean | undefined;
|
|
14
|
+
/** Whether the escape key is allowed to close the dialog. */
|
|
15
|
+
closeOnEscape: boolean | undefined;
|
|
14
16
|
/** Emits when the dialog has been closed. */
|
|
15
17
|
readonly closed: Subject<FocusOrigin>;
|
|
16
18
|
/** Emits when on keyboard events within the dialog. */
|
|
@@ -2,10 +2,17 @@ import { TemplateRef } from '@angular/core';
|
|
|
2
2
|
import { NgpDialogContext } from '../dialog/dialog.service';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
export declare class NgpDialogTrigger {
|
|
5
|
+
/** Access the global configuration */
|
|
6
|
+
private readonly config;
|
|
5
7
|
/** Access the dialog manager. */
|
|
6
8
|
private readonly dialogManager;
|
|
7
9
|
/** The template to launch. */
|
|
8
10
|
readonly template: import("@angular/core").InputSignal<TemplateRef<NgpDialogContext>>;
|
|
11
|
+
/**
|
|
12
|
+
* Whether the dialog should close on escape.
|
|
13
|
+
* @default `true`
|
|
14
|
+
*/
|
|
15
|
+
readonly closeOnEscape: import("@angular/core").InputSignal<boolean | undefined>;
|
|
9
16
|
/**
|
|
10
17
|
* Store the dialog ref.
|
|
11
18
|
* @internal
|
|
@@ -13,5 +20,5 @@ export declare class NgpDialogTrigger {
|
|
|
13
20
|
private dialogRef;
|
|
14
21
|
protected launch(): void;
|
|
15
22
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgpDialogTrigger, never>;
|
|
16
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<NgpDialogTrigger, "[ngpDialogTrigger]", ["ngpDialogTrigger"], { "template": { "alias": "ngpDialogTrigger"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
23
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<NgpDialogTrigger, "[ngpDialogTrigger]", ["ngpDialogTrigger"], { "template": { "alias": "ngpDialogTrigger"; "required": true; "isSignal": true; }; "closeOnEscape": { "alias": "ngpDialogTriggerCloseOnEscape"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
17
24
|
}
|