@neuravision/ng-construct 0.1.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.
|
@@ -0,0 +1,2121 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { ElementRef, TemplateRef, OnDestroy, AfterViewInit, Signal, AfterContentInit, AfterContentChecked, PipeTransform } from '@angular/core';
|
|
3
|
+
import { ControlValueAccessor } from '@angular/forms';
|
|
4
|
+
|
|
5
|
+
type AfAlertVariant = 'info' | 'success' | 'warning' | 'danger';
|
|
6
|
+
/**
|
|
7
|
+
* Alert component for displaying contextual feedback messages.
|
|
8
|
+
*
|
|
9
|
+
* Automatically assigns the appropriate ARIA role based on variant:
|
|
10
|
+
* - `danger` / `warning` → `role="alert"` (assertive announcement)
|
|
11
|
+
* - `info` / `success` → `role="status"` (polite announcement)
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* <af-alert variant="warning" [dismissible]="true" (dismissed)="onDismiss()">
|
|
15
|
+
* <span icon>⚠</span>
|
|
16
|
+
* <span title>Action required</span>
|
|
17
|
+
* Please review the pending changes before continuing.
|
|
18
|
+
* <div actions>
|
|
19
|
+
* <button class="ct-button ct-button--secondary ct-button--sm">Review</button>
|
|
20
|
+
* </div>
|
|
21
|
+
* </af-alert>
|
|
22
|
+
*/
|
|
23
|
+
declare class AfAlertComponent {
|
|
24
|
+
/** Color variant determining the alert's visual style and ARIA role */
|
|
25
|
+
variant: _angular_core.InputSignal<AfAlertVariant>;
|
|
26
|
+
/** Whether the alert can be dismissed by the user */
|
|
27
|
+
dismissible: _angular_core.InputSignal<boolean>;
|
|
28
|
+
/** Emits when the user dismisses the alert */
|
|
29
|
+
dismissed: _angular_core.OutputEmitterRef<void>;
|
|
30
|
+
/** Controls alert visibility */
|
|
31
|
+
visible: _angular_core.WritableSignal<boolean>;
|
|
32
|
+
alertClasses: _angular_core.Signal<string>;
|
|
33
|
+
/**
|
|
34
|
+
* Maps variant to ARIA role:
|
|
35
|
+
* - danger/warning → 'alert' (assertive, immediate announcement)
|
|
36
|
+
* - info/success → 'status' (polite, non-intrusive announcement)
|
|
37
|
+
*/
|
|
38
|
+
alertRole: _angular_core.Signal<"alert" | "status">;
|
|
39
|
+
/** Hides the alert and emits the dismissed event */
|
|
40
|
+
dismiss(): void;
|
|
41
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfAlertComponent, never>;
|
|
42
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfAlertComponent, "af-alert", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "dismissed": "dismissed"; }, never, ["[icon]", "[title]", "*", "[actions]"], true, never>;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/**
|
|
46
|
+
* Individual accordion item used within af-accordion.
|
|
47
|
+
*
|
|
48
|
+
* @example
|
|
49
|
+
* <af-accordion-item heading="Section Title">
|
|
50
|
+
* <p>Content goes here</p>
|
|
51
|
+
* </af-accordion-item>
|
|
52
|
+
*/
|
|
53
|
+
declare class AfAccordionItemComponent {
|
|
54
|
+
private itemId;
|
|
55
|
+
private accordion;
|
|
56
|
+
/** Heading text displayed in the accordion trigger. */
|
|
57
|
+
heading: _angular_core.InputSignal<string>;
|
|
58
|
+
/** Whether this item is expanded (supports two-way binding). */
|
|
59
|
+
expanded: _angular_core.ModelSignal<boolean>;
|
|
60
|
+
/** Whether this item is disabled. */
|
|
61
|
+
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
62
|
+
detailsRef: _angular_core.Signal<ElementRef<HTMLDetailsElement>>;
|
|
63
|
+
triggerId: _angular_core.Signal<string>;
|
|
64
|
+
panelId: _angular_core.Signal<string>;
|
|
65
|
+
/** Sync signal when the native details state diverges (e.g. programmatic open). */
|
|
66
|
+
onToggle(event: Event): void;
|
|
67
|
+
/**
|
|
68
|
+
* Prevent native details toggle and manage state via signals
|
|
69
|
+
* so the expanded signal is always the source of truth.
|
|
70
|
+
*/
|
|
71
|
+
onClick(event: MouseEvent): void;
|
|
72
|
+
/** Programmatically collapse this item. */
|
|
73
|
+
collapse(): void;
|
|
74
|
+
/** Focus the trigger (summary) element. */
|
|
75
|
+
focusTrigger(): void;
|
|
76
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfAccordionItemComponent, never>;
|
|
77
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfAccordionItemComponent, "af-accordion-item", never, { "heading": { "alias": "heading"; "required": true; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, ["*"], true, never>;
|
|
78
|
+
}
|
|
79
|
+
/**
|
|
80
|
+
* Accordion container that manages expand/collapse behaviour of child items.
|
|
81
|
+
*
|
|
82
|
+
* @example
|
|
83
|
+
* <af-accordion>
|
|
84
|
+
* <af-accordion-item heading="Section 1">Content 1</af-accordion-item>
|
|
85
|
+
* <af-accordion-item heading="Section 2">Content 2</af-accordion-item>
|
|
86
|
+
* </af-accordion>
|
|
87
|
+
*
|
|
88
|
+
* @example Single-expand mode
|
|
89
|
+
* <af-accordion [multi]="false">
|
|
90
|
+
* <af-accordion-item heading="Only one open">Content</af-accordion-item>
|
|
91
|
+
* </af-accordion>
|
|
92
|
+
*/
|
|
93
|
+
declare class AfAccordionComponent {
|
|
94
|
+
/** Allow multiple items to be open at the same time (default: true). */
|
|
95
|
+
multi: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
96
|
+
/** Use the bordered variant. */
|
|
97
|
+
bordered: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
98
|
+
items: _angular_core.Signal<readonly AfAccordionItemComponent[]>;
|
|
99
|
+
accordionClasses: _angular_core.Signal<string>;
|
|
100
|
+
/**
|
|
101
|
+
* Enforce single-expand constraint when `multi` is false
|
|
102
|
+
* and multiple items are initially expanded.
|
|
103
|
+
*/
|
|
104
|
+
private enforceConstraint;
|
|
105
|
+
/** Called by child items when they expand. */
|
|
106
|
+
onItemExpanded(expandedItem: AfAccordionItemComponent): void;
|
|
107
|
+
handleKeydown(event: KeyboardEvent): void;
|
|
108
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfAccordionComponent, never>;
|
|
109
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfAccordionComponent, "af-accordion", never, { "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; }, {}, ["items"], ["*"], true, never>;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
type AfAvatarSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
113
|
+
type AfAvatarStatus = 'online' | 'offline' | 'busy' | 'away';
|
|
114
|
+
/**
|
|
115
|
+
* Avatar component displaying a user image with fallback to initials.
|
|
116
|
+
*
|
|
117
|
+
* When `src` is provided the component renders an `<img>`. If the image
|
|
118
|
+
* fails to load or no `src` is given, initials derived from `name` are
|
|
119
|
+
* shown instead.
|
|
120
|
+
*
|
|
121
|
+
* @example
|
|
122
|
+
* <af-avatar src="/photo.jpg" name="Jane Doe" alt="Jane Doe" size="lg" />
|
|
123
|
+
* <af-avatar name="John Smith" status="online" />
|
|
124
|
+
*/
|
|
125
|
+
declare class AfAvatarComponent {
|
|
126
|
+
/** Image URL. Falls back to initials when missing or on load error. */
|
|
127
|
+
src: _angular_core.InputSignal<string>;
|
|
128
|
+
/** Full name used to compute initials and as default alt text. */
|
|
129
|
+
name: _angular_core.InputSignal<string>;
|
|
130
|
+
/** Size variant. */
|
|
131
|
+
size: _angular_core.InputSignal<AfAvatarSize>;
|
|
132
|
+
/** Alt text for the avatar image. Defaults to `name` if not set. */
|
|
133
|
+
alt: _angular_core.InputSignal<string>;
|
|
134
|
+
/** Online status indicator. */
|
|
135
|
+
status: _angular_core.InputSignal<AfAvatarStatus | undefined>;
|
|
136
|
+
/** Tracks whether the image failed to load. */
|
|
137
|
+
imageError: _angular_core.WritableSignal<boolean>;
|
|
138
|
+
/** Whether to render the `<img>` element. */
|
|
139
|
+
showImage: _angular_core.Signal<boolean>;
|
|
140
|
+
/** Initials derived from the first letter of each word in `name`. */
|
|
141
|
+
initials: _angular_core.Signal<string>;
|
|
142
|
+
/** Accessible label for the avatar. */
|
|
143
|
+
ariaLabel: _angular_core.Signal<string>;
|
|
144
|
+
avatarClasses: _angular_core.Signal<string>;
|
|
145
|
+
/** Handles image load failure by switching to initials fallback. */
|
|
146
|
+
onImageError(): void;
|
|
147
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfAvatarComponent, never>;
|
|
148
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfAvatarComponent, "af-avatar", never, { "src": { "alias": "src"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
type AfButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'danger' | 'accent' | 'link';
|
|
152
|
+
type AfButtonSize = 'sm' | 'md' | 'lg';
|
|
153
|
+
type AfButtonType = 'button' | 'submit' | 'reset';
|
|
154
|
+
/**
|
|
155
|
+
* Button component from the Construct Design System
|
|
156
|
+
*
|
|
157
|
+
* @example
|
|
158
|
+
* <af-button variant="primary" (clicked)="handleClick()">Click me</af-button>
|
|
159
|
+
*
|
|
160
|
+
* @example Icon-only button
|
|
161
|
+
* <af-button variant="ghost" size="sm" iconOnly ariaLabel="Delete item">
|
|
162
|
+
* <af-icon name="delete" />
|
|
163
|
+
* </af-button>
|
|
164
|
+
*/
|
|
165
|
+
declare class AfButtonComponent {
|
|
166
|
+
/** Button variant/style */
|
|
167
|
+
variant: _angular_core.InputSignal<AfButtonVariant>;
|
|
168
|
+
/** Button size */
|
|
169
|
+
size: _angular_core.InputSignal<AfButtonSize>;
|
|
170
|
+
/** Button type attribute */
|
|
171
|
+
type: _angular_core.InputSignal<AfButtonType>;
|
|
172
|
+
/** Whether button is disabled */
|
|
173
|
+
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
174
|
+
/** Whether this is an icon-only button (no visible text) */
|
|
175
|
+
iconOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
176
|
+
/** Accessible label for icon-only buttons */
|
|
177
|
+
ariaLabel: _angular_core.InputSignal<string>;
|
|
178
|
+
/** Tooltip text shown on hover */
|
|
179
|
+
title: _angular_core.InputSignal<string>;
|
|
180
|
+
/** Click event emitter */
|
|
181
|
+
clicked: _angular_core.OutputEmitterRef<MouseEvent>;
|
|
182
|
+
buttonClasses: _angular_core.Signal<string>;
|
|
183
|
+
handleClick(event: MouseEvent): void;
|
|
184
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfButtonComponent, never>;
|
|
185
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfButtonComponent, "af-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
type AfInputType = 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url';
|
|
189
|
+
/**
|
|
190
|
+
* Input field component with form control support
|
|
191
|
+
*
|
|
192
|
+
* @example
|
|
193
|
+
* <af-input
|
|
194
|
+
* label="Email"
|
|
195
|
+
* type="email"
|
|
196
|
+
* placeholder="name@company.com"
|
|
197
|
+
* [(ngModel)]="email"
|
|
198
|
+
* hint="We will not share this."
|
|
199
|
+
* ></af-input>
|
|
200
|
+
*
|
|
201
|
+
* @example
|
|
202
|
+
* <af-input
|
|
203
|
+
* label="Name"
|
|
204
|
+
* [error]="nameError"
|
|
205
|
+
* required
|
|
206
|
+
* ></af-input>
|
|
207
|
+
*/
|
|
208
|
+
declare class AfInputComponent implements ControlValueAccessor {
|
|
209
|
+
private static nextId;
|
|
210
|
+
/** Input label */
|
|
211
|
+
label: _angular_core.InputSignal<string>;
|
|
212
|
+
/** Input type */
|
|
213
|
+
type: _angular_core.InputSignal<AfInputType>;
|
|
214
|
+
/** Placeholder text */
|
|
215
|
+
placeholder: _angular_core.InputSignal<string>;
|
|
216
|
+
/** Hint text shown below input */
|
|
217
|
+
hint: _angular_core.InputSignal<string>;
|
|
218
|
+
/** Error message - shows error state and message */
|
|
219
|
+
error: _angular_core.InputSignal<string>;
|
|
220
|
+
/** Whether input is required */
|
|
221
|
+
required: _angular_core.InputSignal<boolean>;
|
|
222
|
+
/** Whether input is disabled */
|
|
223
|
+
disabled: _angular_core.ModelSignal<boolean>;
|
|
224
|
+
/** Icon position (if icon content is projected) */
|
|
225
|
+
iconPosition: _angular_core.InputSignal<"left" | "right" | null>;
|
|
226
|
+
/** Unique input ID */
|
|
227
|
+
inputId: _angular_core.InputSignal<string>;
|
|
228
|
+
value: string;
|
|
229
|
+
onChange: (value: string) => void;
|
|
230
|
+
onTouched: () => void;
|
|
231
|
+
hintId: _angular_core.Signal<string>;
|
|
232
|
+
errorId: _angular_core.Signal<string>;
|
|
233
|
+
inputClasses: _angular_core.Signal<string>;
|
|
234
|
+
getAriaDescribedBy(): string | null;
|
|
235
|
+
onInput(event: Event): void;
|
|
236
|
+
/** ControlValueAccessor implementation */
|
|
237
|
+
writeValue(value: string): void;
|
|
238
|
+
registerOnChange(fn: (value: string) => void): void;
|
|
239
|
+
registerOnTouched(fn: () => void): void;
|
|
240
|
+
setDisabledState(isDisabled: boolean): void;
|
|
241
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfInputComponent, never>;
|
|
242
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfInputComponent, "af-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; }, never, ["[icon]", "[icon]"], true, never>;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
interface AfSelectOption {
|
|
246
|
+
value: unknown;
|
|
247
|
+
label: string;
|
|
248
|
+
disabled?: boolean;
|
|
249
|
+
}
|
|
250
|
+
/**
|
|
251
|
+
* Select dropdown component with form control support
|
|
252
|
+
*
|
|
253
|
+
* @example
|
|
254
|
+
* <af-select
|
|
255
|
+
* label="Role"
|
|
256
|
+
* [options]="roleOptions"
|
|
257
|
+
* [(ngModel)]="selectedRole"
|
|
258
|
+
* hint="Choose your primary role"
|
|
259
|
+
* ></af-select>
|
|
260
|
+
*/
|
|
261
|
+
declare class AfSelectComponent implements ControlValueAccessor {
|
|
262
|
+
private static nextId;
|
|
263
|
+
/** Select label */
|
|
264
|
+
label: _angular_core.InputSignal<string>;
|
|
265
|
+
/** Placeholder option */
|
|
266
|
+
placeholder: _angular_core.InputSignal<string>;
|
|
267
|
+
/** Options array */
|
|
268
|
+
options: _angular_core.InputSignal<AfSelectOption[]>;
|
|
269
|
+
/** Hint text shown below select */
|
|
270
|
+
hint: _angular_core.InputSignal<string>;
|
|
271
|
+
/** Error message */
|
|
272
|
+
error: _angular_core.InputSignal<string>;
|
|
273
|
+
/** Whether select is required */
|
|
274
|
+
required: _angular_core.InputSignal<boolean>;
|
|
275
|
+
/** Whether select is disabled */
|
|
276
|
+
disabled: _angular_core.ModelSignal<boolean>;
|
|
277
|
+
/** Value comparison function (for object values) */
|
|
278
|
+
compareWith: _angular_core.InputSignal<(a: unknown, b: unknown) => boolean>;
|
|
279
|
+
/** Unique select ID */
|
|
280
|
+
selectId: _angular_core.InputSignal<string>;
|
|
281
|
+
value: unknown;
|
|
282
|
+
onChangeCallback: (value: unknown) => void;
|
|
283
|
+
onTouched: () => void;
|
|
284
|
+
hintId: _angular_core.Signal<string>;
|
|
285
|
+
errorId: _angular_core.Signal<string>;
|
|
286
|
+
getAriaDescribedBy(): string | null;
|
|
287
|
+
get isPlaceholderSelected(): boolean;
|
|
288
|
+
private hasMatchingOption;
|
|
289
|
+
isOptionSelected(option: AfSelectOption): boolean;
|
|
290
|
+
onChange(event: Event): void;
|
|
291
|
+
/** ControlValueAccessor implementation */
|
|
292
|
+
writeValue(value: unknown): void;
|
|
293
|
+
registerOnChange(fn: (value: unknown) => void): void;
|
|
294
|
+
registerOnTouched(fn: () => void): void;
|
|
295
|
+
setDisabledState(isDisabled: boolean): void;
|
|
296
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfSelectComponent, never>;
|
|
297
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfSelectComponent, "af-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "selectId": { "alias": "selectId"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; }, never, never, true, never>;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
/**
|
|
301
|
+
* Textarea component with form control support
|
|
302
|
+
*
|
|
303
|
+
* @example
|
|
304
|
+
* <af-textarea
|
|
305
|
+
* label="Notes"
|
|
306
|
+
* placeholder="Enter your notes..."
|
|
307
|
+
* [(ngModel)]="notes"
|
|
308
|
+
* [rows]="5"
|
|
309
|
+
* ></af-textarea>
|
|
310
|
+
*/
|
|
311
|
+
declare class AfTextareaComponent implements ControlValueAccessor {
|
|
312
|
+
private static nextId;
|
|
313
|
+
/** Textarea label */
|
|
314
|
+
label: _angular_core.InputSignal<string>;
|
|
315
|
+
/** Placeholder text */
|
|
316
|
+
placeholder: _angular_core.InputSignal<string>;
|
|
317
|
+
/** Hint text shown below textarea */
|
|
318
|
+
hint: _angular_core.InputSignal<string>;
|
|
319
|
+
/** Error message */
|
|
320
|
+
error: _angular_core.InputSignal<string>;
|
|
321
|
+
/** Whether textarea is required */
|
|
322
|
+
required: _angular_core.InputSignal<boolean>;
|
|
323
|
+
/** Whether textarea is disabled */
|
|
324
|
+
disabled: _angular_core.ModelSignal<boolean>;
|
|
325
|
+
/** Number of visible rows */
|
|
326
|
+
rows: _angular_core.InputSignal<number>;
|
|
327
|
+
/** Unique textarea ID */
|
|
328
|
+
textareaId: _angular_core.InputSignal<string>;
|
|
329
|
+
value: string;
|
|
330
|
+
onChange: (value: string) => void;
|
|
331
|
+
onTouched: () => void;
|
|
332
|
+
hintId: _angular_core.Signal<string>;
|
|
333
|
+
errorId: _angular_core.Signal<string>;
|
|
334
|
+
getAriaDescribedBy(): string | null;
|
|
335
|
+
onInput(event: Event): void;
|
|
336
|
+
/** ControlValueAccessor implementation */
|
|
337
|
+
writeValue(value: string): void;
|
|
338
|
+
registerOnChange(fn: (value: string) => void): void;
|
|
339
|
+
registerOnTouched(fn: () => void): void;
|
|
340
|
+
setDisabledState(isDisabled: boolean): void;
|
|
341
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfTextareaComponent, never>;
|
|
342
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfTextareaComponent, "af-textarea", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "textareaId": { "alias": "textareaId"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; }, never, never, true, never>;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
/**
|
|
346
|
+
* Checkbox component with form control support
|
|
347
|
+
*
|
|
348
|
+
* Supports both ControlValueAccessor (reactive forms / ngModel) and
|
|
349
|
+
* standalone usage via [(checked)] bindings (two-way via model).
|
|
350
|
+
*
|
|
351
|
+
* @example Reactive Forms
|
|
352
|
+
* <af-checkbox formControlName="rememberMe">Remember me</af-checkbox>
|
|
353
|
+
*
|
|
354
|
+
* @example Standalone with indeterminate (e.g. "select all" in tables)
|
|
355
|
+
* <af-checkbox
|
|
356
|
+
* [(checked)]="allSelected"
|
|
357
|
+
* [indeterminate]="hasPartialSelection()"
|
|
358
|
+
* (checkedChange)="onToggleAll($event)">
|
|
359
|
+
* </af-checkbox>
|
|
360
|
+
*/
|
|
361
|
+
declare class AfCheckboxComponent implements ControlValueAccessor {
|
|
362
|
+
/** Whether checkbox is disabled */
|
|
363
|
+
disabled: _angular_core.ModelSignal<boolean>;
|
|
364
|
+
/** Whether checkbox shows indeterminate state (partial selection) */
|
|
365
|
+
indeterminate: _angular_core.ModelSignal<boolean>;
|
|
366
|
+
/** Checked state - supports two-way binding via [(checked)] */
|
|
367
|
+
checked: _angular_core.ModelSignal<boolean>;
|
|
368
|
+
private onChangeCallback;
|
|
369
|
+
onTouched: () => void;
|
|
370
|
+
onChange(event: Event): void;
|
|
371
|
+
writeValue(value: boolean): void;
|
|
372
|
+
registerOnChange(fn: (value: boolean) => void): void;
|
|
373
|
+
registerOnTouched(fn: () => void): void;
|
|
374
|
+
setDisabledState(isDisabled: boolean): void;
|
|
375
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfCheckboxComponent, never>;
|
|
376
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfCheckboxComponent, "af-checkbox", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "indeterminate": "indeterminateChange"; "checked": "checkedChange"; }, never, ["*"], true, never>;
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
/**
|
|
380
|
+
* Radio button component with form control support
|
|
381
|
+
*
|
|
382
|
+
* @example
|
|
383
|
+
* <af-radio name="plan" value="standard" [(ngModel)]="selectedPlan">
|
|
384
|
+
* Standard
|
|
385
|
+
* </af-radio>
|
|
386
|
+
* <af-radio name="plan" value="premium" [(ngModel)]="selectedPlan">
|
|
387
|
+
* Premium
|
|
388
|
+
* </af-radio>
|
|
389
|
+
*/
|
|
390
|
+
declare class AfRadioComponent implements ControlValueAccessor {
|
|
391
|
+
/** Radio group name */
|
|
392
|
+
name: _angular_core.InputSignal<string>;
|
|
393
|
+
/** Radio value */
|
|
394
|
+
value: _angular_core.InputSignal<unknown>;
|
|
395
|
+
/** Whether radio is disabled */
|
|
396
|
+
disabled: _angular_core.ModelSignal<boolean>;
|
|
397
|
+
modelValue: _angular_core.WritableSignal<unknown>;
|
|
398
|
+
onChangeCallback: (value: unknown) => void;
|
|
399
|
+
onTouched: () => void;
|
|
400
|
+
isChecked: _angular_core.Signal<boolean>;
|
|
401
|
+
onChangeEvent(event: Event): void;
|
|
402
|
+
/** ControlValueAccessor implementation */
|
|
403
|
+
writeValue(value: unknown): void;
|
|
404
|
+
registerOnChange(fn: (value: unknown) => void): void;
|
|
405
|
+
registerOnTouched(fn: () => void): void;
|
|
406
|
+
setDisabledState(isDisabled: boolean): void;
|
|
407
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfRadioComponent, never>;
|
|
408
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfRadioComponent, "af-radio", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; }, never, ["*"], true, never>;
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
/**
|
|
412
|
+
* Switch/Toggle component with form control support
|
|
413
|
+
*
|
|
414
|
+
* @example
|
|
415
|
+
* <af-switch [(ngModel)]="autoRenew">
|
|
416
|
+
* Auto renew
|
|
417
|
+
* </af-switch>
|
|
418
|
+
*/
|
|
419
|
+
declare class AfSwitchComponent implements ControlValueAccessor {
|
|
420
|
+
/** Whether switch is disabled */
|
|
421
|
+
disabled: _angular_core.ModelSignal<boolean>;
|
|
422
|
+
/** Checked state - supports two-way binding via [(checked)] */
|
|
423
|
+
checked: _angular_core.ModelSignal<boolean>;
|
|
424
|
+
private onChangeCallback;
|
|
425
|
+
onTouched: () => void;
|
|
426
|
+
onChange(event: Event): void;
|
|
427
|
+
/** ControlValueAccessor implementation */
|
|
428
|
+
writeValue(value: boolean): void;
|
|
429
|
+
registerOnChange(fn: (value: boolean) => void): void;
|
|
430
|
+
registerOnTouched(fn: () => void): void;
|
|
431
|
+
setDisabledState(isDisabled: boolean): void;
|
|
432
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfSwitchComponent, never>;
|
|
433
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfSwitchComponent, "af-switch", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "checked": "checkedChange"; }, never, ["*"], true, never>;
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
type AfCardElevation = 'none' | 'sm' | 'md' | 'lg';
|
|
437
|
+
type AfCardPadding = 'none' | 'sm' | 'md' | 'lg';
|
|
438
|
+
/**
|
|
439
|
+
* Card component for containing content
|
|
440
|
+
*
|
|
441
|
+
* @example
|
|
442
|
+
* <af-card elevation="md" padding="lg">
|
|
443
|
+
* <div header>
|
|
444
|
+
* <h3>Title</h3>
|
|
445
|
+
* </div>
|
|
446
|
+
* <div body>
|
|
447
|
+
* <p>Card content</p>
|
|
448
|
+
* </div>
|
|
449
|
+
* </af-card>
|
|
450
|
+
*/
|
|
451
|
+
declare class AfCardComponent {
|
|
452
|
+
/** Whether card is interactive (clickable/hoverable) */
|
|
453
|
+
interactive: _angular_core.InputSignal<boolean>;
|
|
454
|
+
/** Shadow elevation level */
|
|
455
|
+
elevation: _angular_core.InputSignal<AfCardElevation | null>;
|
|
456
|
+
/** Content padding level */
|
|
457
|
+
padding: _angular_core.InputSignal<AfCardPadding | null>;
|
|
458
|
+
/** Click event emitter */
|
|
459
|
+
cardClick: _angular_core.OutputEmitterRef<void>;
|
|
460
|
+
hasHeader: _angular_core.WritableSignal<boolean>;
|
|
461
|
+
hasFooter: _angular_core.WritableSignal<boolean>;
|
|
462
|
+
set headerContent(value: ElementRef | undefined);
|
|
463
|
+
set footerContent(value: ElementRef | undefined);
|
|
464
|
+
private static readonly ELEVATION_MAP;
|
|
465
|
+
private static readonly PADDING_MAP;
|
|
466
|
+
cardClasses: _angular_core.Signal<string>;
|
|
467
|
+
cardStyles: _angular_core.Signal<string>;
|
|
468
|
+
onCardClick(): void;
|
|
469
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfCardComponent, never>;
|
|
470
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfCardComponent, "af-card", never, { "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "elevation": { "alias": "elevation"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; }, { "cardClick": "cardClick"; }, ["headerContent", "footerContent"], ["[header]", "[body]", "*", "[footer]"], true, never>;
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
/**
|
|
474
|
+
* Directive for defining custom cell templates in AfDataTableComponent.
|
|
475
|
+
*
|
|
476
|
+
* @example
|
|
477
|
+
* <af-data-table [data]="items" [columns]="columns">
|
|
478
|
+
* <ng-template afCellDef="status" let-row>
|
|
479
|
+
* <af-badge [variant]="getVariant(row.status)">{{ row.status }}</af-badge>
|
|
480
|
+
* </ng-template>
|
|
481
|
+
* <ng-template afCellDef="actions" let-row>
|
|
482
|
+
* <af-button variant="ghost" iconOnly (clicked)="onEdit(row)">
|
|
483
|
+
* <af-icon name="edit" />
|
|
484
|
+
* </af-button>
|
|
485
|
+
* </ng-template>
|
|
486
|
+
* </af-data-table>
|
|
487
|
+
*/
|
|
488
|
+
declare class AfCellDefDirective {
|
|
489
|
+
/** Column key this template applies to */
|
|
490
|
+
columnKey: _angular_core.InputSignal<string>;
|
|
491
|
+
readonly templateRef: TemplateRef<any>;
|
|
492
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfCellDefDirective, never>;
|
|
493
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AfCellDefDirective, "[afCellDef]", never, { "columnKey": { "alias": "afCellDef"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
494
|
+
}
|
|
495
|
+
|
|
496
|
+
interface AfColumn {
|
|
497
|
+
key: string;
|
|
498
|
+
header: string;
|
|
499
|
+
sortable?: boolean;
|
|
500
|
+
/** CSS class(es) for the cell */
|
|
501
|
+
cellClass?: string;
|
|
502
|
+
}
|
|
503
|
+
interface AfDataTableConfig {
|
|
504
|
+
striped?: boolean;
|
|
505
|
+
compact?: boolean;
|
|
506
|
+
/** Whether to show the selection checkbox column */
|
|
507
|
+
selectable?: boolean;
|
|
508
|
+
}
|
|
509
|
+
/** Row type for the data table — uses `any` values to allow typed interfaces without index signatures. */
|
|
510
|
+
type AfDataRow = Record<string, any>;
|
|
511
|
+
type AfSortDirection = 'asc' | 'desc';
|
|
512
|
+
interface AfSortState {
|
|
513
|
+
key: string;
|
|
514
|
+
direction: AfSortDirection;
|
|
515
|
+
}
|
|
516
|
+
/**
|
|
517
|
+
* Data table with sorting, selection, and custom cell templates.
|
|
518
|
+
*
|
|
519
|
+
* @example
|
|
520
|
+
* <af-data-table
|
|
521
|
+
* [data]="items()"
|
|
522
|
+
* [columns]="columns"
|
|
523
|
+
* [config]="{ striped: true, selectable: true }"
|
|
524
|
+
* rowId="id"
|
|
525
|
+
* (sortChange)="onSort($event)"
|
|
526
|
+
* (selectionChange)="onSelect($event)">
|
|
527
|
+
*
|
|
528
|
+
* <ng-template afCellDef="status" let-row>
|
|
529
|
+
* <af-badge [variant]="getVariant(row.status)">
|
|
530
|
+
* {{ row.status | afFormatLabel }}
|
|
531
|
+
* </af-badge>
|
|
532
|
+
* </ng-template>
|
|
533
|
+
*
|
|
534
|
+
* <ng-template afCellDef="actions" let-row>
|
|
535
|
+
* <af-button variant="ghost" iconOnly (clicked)="onDelete(row)">
|
|
536
|
+
* <af-icon name="delete" />
|
|
537
|
+
* </af-button>
|
|
538
|
+
* </ng-template>
|
|
539
|
+
* </af-data-table>
|
|
540
|
+
*/
|
|
541
|
+
declare class AfDataTableComponent {
|
|
542
|
+
data: _angular_core.InputSignal<AfDataRow[]>;
|
|
543
|
+
columns: _angular_core.InputSignal<AfColumn[]>;
|
|
544
|
+
config: _angular_core.InputSignal<AfDataTableConfig>;
|
|
545
|
+
/** Sort state (controlled). */
|
|
546
|
+
sort: _angular_core.InputSignal<AfSortState | null>;
|
|
547
|
+
/** Row id key or accessor for stable selection. */
|
|
548
|
+
rowId: _angular_core.InputSignal<string | ((row: AfDataRow) => string | number) | null>;
|
|
549
|
+
rowClick: _angular_core.OutputEmitterRef<AfDataRow>;
|
|
550
|
+
selectionChange: _angular_core.OutputEmitterRef<AfDataRow[]>;
|
|
551
|
+
sortChange: _angular_core.OutputEmitterRef<AfSortState | null>;
|
|
552
|
+
cellDefs: _angular_core.Signal<readonly AfCellDefDirective[]>;
|
|
553
|
+
private selectedRowIds;
|
|
554
|
+
private internalSort;
|
|
555
|
+
private cellTemplateMap;
|
|
556
|
+
allSelected: boolean;
|
|
557
|
+
someSelected: boolean;
|
|
558
|
+
private cellDefsEffect;
|
|
559
|
+
private dataEffect;
|
|
560
|
+
isSelectable: _angular_core.Signal<boolean>;
|
|
561
|
+
tableClasses: _angular_core.Signal<string>;
|
|
562
|
+
sortedData: _angular_core.Signal<AfDataRow[]>;
|
|
563
|
+
activeSort: _angular_core.Signal<AfSortState | null>;
|
|
564
|
+
/** Returns the custom cell template for a column, or null for default rendering. */
|
|
565
|
+
getCellTemplate(columnKey: string): TemplateRef<unknown> | null;
|
|
566
|
+
getAriaSort(column: AfColumn): string | null;
|
|
567
|
+
toggleSort(column: AfColumn): void;
|
|
568
|
+
onRowClick(row: AfDataRow): void;
|
|
569
|
+
toggleSelection(row: AfDataRow, event: Event): void;
|
|
570
|
+
toggleAll(checked: boolean): void;
|
|
571
|
+
isSelected(row: AfDataRow): boolean;
|
|
572
|
+
private updateSelectionState;
|
|
573
|
+
private getRowId;
|
|
574
|
+
private getSelectedRows;
|
|
575
|
+
private syncSelectionWithData;
|
|
576
|
+
private compareValues;
|
|
577
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfDataTableComponent, never>;
|
|
578
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfDataTableComponent, "af-data-table", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "rowId": { "alias": "rowId"; "required": false; "isSignal": true; }; }, { "rowClick": "rowClick"; "selectionChange": "selectionChange"; "sortChange": "sortChange"; }, ["cellDefs"], never, true, never>;
|
|
579
|
+
}
|
|
580
|
+
|
|
581
|
+
/**
|
|
582
|
+
* Modal/Dialog component with accessibility features
|
|
583
|
+
*
|
|
584
|
+
* @example
|
|
585
|
+
* <af-modal
|
|
586
|
+
* [open]="isOpen"
|
|
587
|
+
* title="Confirm action"
|
|
588
|
+
* (closed)="handleClose()">
|
|
589
|
+
* <div body>
|
|
590
|
+
* <p>Are you sure?</p>
|
|
591
|
+
* </div>
|
|
592
|
+
* <div footer>
|
|
593
|
+
* <button (click)="cancel()">Cancel</button>
|
|
594
|
+
* <button (click)="confirm()">Confirm</button>
|
|
595
|
+
* </div>
|
|
596
|
+
* </af-modal>
|
|
597
|
+
*/
|
|
598
|
+
declare class AfModalComponent implements OnDestroy, AfterViewInit {
|
|
599
|
+
private static nextId;
|
|
600
|
+
/** Whether modal is open */
|
|
601
|
+
open: _angular_core.InputSignal<boolean>;
|
|
602
|
+
/** Modal title */
|
|
603
|
+
title: _angular_core.InputSignal<string>;
|
|
604
|
+
/** Whether to show close button */
|
|
605
|
+
showCloseButton: _angular_core.InputSignal<boolean>;
|
|
606
|
+
/** Whether clicking backdrop closes modal */
|
|
607
|
+
closeOnBackdropClick: _angular_core.InputSignal<boolean>;
|
|
608
|
+
/** Close event emitter */
|
|
609
|
+
closed: _angular_core.OutputEmitterRef<void>;
|
|
610
|
+
/** Unique title ID for aria-labelledby */
|
|
611
|
+
titleId: string;
|
|
612
|
+
hasFooter: _angular_core.WritableSignal<boolean>;
|
|
613
|
+
set footerContent(value: ElementRef | undefined);
|
|
614
|
+
private previousActiveElement;
|
|
615
|
+
private focusableElements;
|
|
616
|
+
private viewInitialized;
|
|
617
|
+
dialogRef: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
|
|
618
|
+
private openEffect;
|
|
619
|
+
ngAfterViewInit(): void;
|
|
620
|
+
ngOnDestroy(): void;
|
|
621
|
+
onEscapeKey(): void;
|
|
622
|
+
onKeydown(event: KeyboardEvent): void;
|
|
623
|
+
onBackdropClick(event: MouseEvent): void;
|
|
624
|
+
close(): void;
|
|
625
|
+
private onOpen;
|
|
626
|
+
private restoreFocus;
|
|
627
|
+
private refreshFocusableElements;
|
|
628
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfModalComponent, never>;
|
|
629
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfModalComponent, "af-modal", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, ["footerContent"], ["[body]", "*", "[footer]"], true, never>;
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
type AfToastVariant = 'info' | 'success' | 'warning' | 'error';
|
|
633
|
+
interface AfToast {
|
|
634
|
+
id: string;
|
|
635
|
+
title: string;
|
|
636
|
+
description?: string;
|
|
637
|
+
variant?: AfToastVariant;
|
|
638
|
+
duration?: number;
|
|
639
|
+
action?: {
|
|
640
|
+
label: string;
|
|
641
|
+
callback: () => void;
|
|
642
|
+
};
|
|
643
|
+
}
|
|
644
|
+
/**
|
|
645
|
+
* Toast notification service
|
|
646
|
+
*
|
|
647
|
+
* @example
|
|
648
|
+
* const toast = inject(AfToastService);
|
|
649
|
+
*
|
|
650
|
+
* showSuccess() {
|
|
651
|
+
* this.toast.success('Saved', 'Your changes were saved successfully.');
|
|
652
|
+
* }
|
|
653
|
+
*/
|
|
654
|
+
declare class AfToastService {
|
|
655
|
+
private toastsSignal;
|
|
656
|
+
private nextId;
|
|
657
|
+
/** Reactive signal for toast list */
|
|
658
|
+
toasts: _angular_core.Signal<AfToast[]>;
|
|
659
|
+
/**
|
|
660
|
+
* Show a toast notification
|
|
661
|
+
*/
|
|
662
|
+
show(toast: Omit<AfToast, 'id'>): string;
|
|
663
|
+
/**
|
|
664
|
+
* Show success toast
|
|
665
|
+
*/
|
|
666
|
+
success(title: string, description?: string): string;
|
|
667
|
+
/**
|
|
668
|
+
* Show error toast
|
|
669
|
+
*/
|
|
670
|
+
error(title: string, description?: string): string;
|
|
671
|
+
/**
|
|
672
|
+
* Show warning toast
|
|
673
|
+
*/
|
|
674
|
+
warning(title: string, description?: string): string;
|
|
675
|
+
/**
|
|
676
|
+
* Show info toast
|
|
677
|
+
*/
|
|
678
|
+
info(title: string, description?: string): string;
|
|
679
|
+
/**
|
|
680
|
+
* Dismiss a toast by ID
|
|
681
|
+
*/
|
|
682
|
+
dismiss(id: string): void;
|
|
683
|
+
/**
|
|
684
|
+
* Clear all toasts
|
|
685
|
+
*/
|
|
686
|
+
clear(): void;
|
|
687
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfToastService, never>;
|
|
688
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<AfToastService>;
|
|
689
|
+
}
|
|
690
|
+
|
|
691
|
+
/**
|
|
692
|
+
* Toast notification container component
|
|
693
|
+
* Place once in your app root template
|
|
694
|
+
*
|
|
695
|
+
* @example
|
|
696
|
+
* <!-- app.component.html -->
|
|
697
|
+
* <ct-toast-container></ct-toast-container>
|
|
698
|
+
*/
|
|
699
|
+
declare class AfToastContainerComponent {
|
|
700
|
+
toastService: AfToastService;
|
|
701
|
+
handleAction(toast: AfToast): void;
|
|
702
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfToastContainerComponent, never>;
|
|
703
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfToastContainerComponent, "af-toast-container", never, {}, {}, never, never, true, never>;
|
|
704
|
+
}
|
|
705
|
+
|
|
706
|
+
interface AfTab {
|
|
707
|
+
id: string;
|
|
708
|
+
label: string;
|
|
709
|
+
disabled?: boolean;
|
|
710
|
+
}
|
|
711
|
+
/**
|
|
712
|
+
* Tab panel component (used within af-tabs)
|
|
713
|
+
*/
|
|
714
|
+
declare class AfTabPanelComponent {
|
|
715
|
+
private static nextId;
|
|
716
|
+
id: _angular_core.ModelSignal<string>;
|
|
717
|
+
label: _angular_core.InputSignal<string>;
|
|
718
|
+
isActive: _angular_core.ModelSignal<boolean>;
|
|
719
|
+
disabled: _angular_core.InputSignal<boolean>;
|
|
720
|
+
ensureId(): string;
|
|
721
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfTabPanelComponent, never>;
|
|
722
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfTabPanelComponent, "af-tab-panel", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "isActive": { "alias": "isActive"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "id": "idChange"; "isActive": "isActiveChange"; }, never, ["*"], true, never>;
|
|
723
|
+
}
|
|
724
|
+
/**
|
|
725
|
+
* Tabs component for organizing content into panels
|
|
726
|
+
*
|
|
727
|
+
* @example
|
|
728
|
+
* <af-tabs [(activeTab)]="activeTab">
|
|
729
|
+
* <af-tab-panel id="overview" label="Overview">
|
|
730
|
+
* <p>Overview content</p>
|
|
731
|
+
* </af-tab-panel>
|
|
732
|
+
* <af-tab-panel id="settings" label="Settings">
|
|
733
|
+
* <p>Settings content</p>
|
|
734
|
+
* </af-tab-panel>
|
|
735
|
+
* </af-tabs>
|
|
736
|
+
*/
|
|
737
|
+
declare class AfTabsComponent {
|
|
738
|
+
/** Array of tabs (generated from projected tab panels) */
|
|
739
|
+
tabs: AfTab[];
|
|
740
|
+
/** Currently active tab ID (two-way bound) */
|
|
741
|
+
activeTab: _angular_core.ModelSignal<string>;
|
|
742
|
+
panels: _angular_core.Signal<readonly AfTabPanelComponent[]>;
|
|
743
|
+
tabButtons: _angular_core.Signal<readonly ElementRef<HTMLButtonElement>[]>;
|
|
744
|
+
private panelsEffect;
|
|
745
|
+
selectTab(id: string): void;
|
|
746
|
+
onKeydown(event: KeyboardEvent, currentId: string): void;
|
|
747
|
+
private syncTabsFromPanels;
|
|
748
|
+
private syncActivePanel;
|
|
749
|
+
private focusTab;
|
|
750
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfTabsComponent, never>;
|
|
751
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfTabsComponent, "af-tabs", never, { "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; }, ["panels"], ["*"], true, never>;
|
|
752
|
+
}
|
|
753
|
+
|
|
754
|
+
interface AfDropdownItem {
|
|
755
|
+
label: string;
|
|
756
|
+
value: unknown;
|
|
757
|
+
disabled?: boolean;
|
|
758
|
+
separator?: boolean;
|
|
759
|
+
}
|
|
760
|
+
/**
|
|
761
|
+
* Dropdown menu component
|
|
762
|
+
*
|
|
763
|
+
* @example
|
|
764
|
+
* <af-dropdown
|
|
765
|
+
* label="Actions"
|
|
766
|
+
* [items]="menuItems"
|
|
767
|
+
* (itemSelected)="handleAction($event)">
|
|
768
|
+
* </af-dropdown>
|
|
769
|
+
*/
|
|
770
|
+
declare class AfDropdownComponent {
|
|
771
|
+
private static nextId;
|
|
772
|
+
/** Dropdown button label */
|
|
773
|
+
label: _angular_core.InputSignal<string>;
|
|
774
|
+
/** Menu items */
|
|
775
|
+
items: _angular_core.InputSignal<AfDropdownItem[]>;
|
|
776
|
+
/** Item selected event */
|
|
777
|
+
itemSelected: _angular_core.OutputEmitterRef<unknown>;
|
|
778
|
+
triggerRef: _angular_core.Signal<ElementRef<HTMLButtonElement> | undefined>;
|
|
779
|
+
itemButtons: _angular_core.Signal<readonly ElementRef<HTMLButtonElement>[]>;
|
|
780
|
+
isOpen: _angular_core.WritableSignal<boolean>;
|
|
781
|
+
menuId: string;
|
|
782
|
+
toggle(): void;
|
|
783
|
+
selectItem(item: AfDropdownItem): void;
|
|
784
|
+
private open;
|
|
785
|
+
private close;
|
|
786
|
+
private focusFirstItem;
|
|
787
|
+
onDocumentClick(event: MouseEvent): void;
|
|
788
|
+
onEscape(): void;
|
|
789
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfDropdownComponent, never>;
|
|
790
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfDropdownComponent, "af-dropdown", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; }, { "itemSelected": "itemSelected"; }, never, never, true, never>;
|
|
791
|
+
}
|
|
792
|
+
|
|
793
|
+
/**
|
|
794
|
+
* Pagination component
|
|
795
|
+
*
|
|
796
|
+
* @example
|
|
797
|
+
* <af-pagination
|
|
798
|
+
* [currentPage]="page"
|
|
799
|
+
* [totalPages]="10"
|
|
800
|
+
* (pageChange)="onPageChange($event)">
|
|
801
|
+
* </af-pagination>
|
|
802
|
+
*/
|
|
803
|
+
declare class AfPaginationComponent {
|
|
804
|
+
/** Current page number (1-indexed) */
|
|
805
|
+
currentPage: _angular_core.InputSignal<number>;
|
|
806
|
+
/** Total number of pages */
|
|
807
|
+
totalPages: _angular_core.InputSignal<number>;
|
|
808
|
+
/** Label for previous button */
|
|
809
|
+
previousLabel: _angular_core.InputSignal<string>;
|
|
810
|
+
/** Label for next button */
|
|
811
|
+
nextLabel: _angular_core.InputSignal<string>;
|
|
812
|
+
/** Maximum number of page buttons to show */
|
|
813
|
+
maxVisiblePages: _angular_core.InputSignal<number>;
|
|
814
|
+
/** Page change event */
|
|
815
|
+
pageChange: _angular_core.OutputEmitterRef<number>;
|
|
816
|
+
visiblePages: _angular_core.Signal<(string | number)[]>;
|
|
817
|
+
goToPage(page: number | string): void;
|
|
818
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfPaginationComponent, never>;
|
|
819
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfPaginationComponent, "af-pagination", never, { "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "totalPages": { "alias": "totalPages"; "required": false; "isSignal": true; }; "previousLabel": { "alias": "previousLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "maxVisiblePages": { "alias": "maxVisiblePages"; "required": false; "isSignal": true; }; }, { "pageChange": "pageChange"; }, never, never, true, never>;
|
|
820
|
+
}
|
|
821
|
+
|
|
822
|
+
interface AfBreadcrumb {
|
|
823
|
+
label: string;
|
|
824
|
+
url?: string;
|
|
825
|
+
}
|
|
826
|
+
/**
|
|
827
|
+
* Breadcrumbs navigation component
|
|
828
|
+
*
|
|
829
|
+
* @example
|
|
830
|
+
* <af-breadcrumbs [items]="breadcrumbs"></af-breadcrumbs>
|
|
831
|
+
*/
|
|
832
|
+
declare class AfBreadcrumbsComponent {
|
|
833
|
+
/** Breadcrumb items */
|
|
834
|
+
items: _angular_core.InputSignal<AfBreadcrumb[]>;
|
|
835
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfBreadcrumbsComponent, never>;
|
|
836
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfBreadcrumbsComponent, "af-breadcrumbs", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
837
|
+
}
|
|
838
|
+
|
|
839
|
+
interface CalendarDay {
|
|
840
|
+
date: Date;
|
|
841
|
+
isCurrentMonth: boolean;
|
|
842
|
+
isToday: boolean;
|
|
843
|
+
isSelected: boolean;
|
|
844
|
+
}
|
|
845
|
+
/**
|
|
846
|
+
* Datepicker component with calendar popup
|
|
847
|
+
*
|
|
848
|
+
* @example
|
|
849
|
+
* <af-datepicker
|
|
850
|
+
* label="Select date"
|
|
851
|
+
* placeholder="Pick a date"
|
|
852
|
+
* [(ngModel)]="selectedDate">
|
|
853
|
+
* </af-datepicker>
|
|
854
|
+
*/
|
|
855
|
+
declare class AfDatepickerComponent implements ControlValueAccessor {
|
|
856
|
+
private static nextId;
|
|
857
|
+
/** Input label */
|
|
858
|
+
label: _angular_core.InputSignal<string>;
|
|
859
|
+
/** Placeholder text */
|
|
860
|
+
placeholder: _angular_core.InputSignal<string>;
|
|
861
|
+
/** Whether datepicker is disabled */
|
|
862
|
+
disabled: _angular_core.ModelSignal<boolean>;
|
|
863
|
+
/** Date format for display */
|
|
864
|
+
dateFormat: _angular_core.InputSignal<string>;
|
|
865
|
+
/** Unique input ID */
|
|
866
|
+
inputId: _angular_core.InputSignal<string>;
|
|
867
|
+
/** Selected date change event */
|
|
868
|
+
dateChange: _angular_core.OutputEmitterRef<Date>;
|
|
869
|
+
inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
|
|
870
|
+
popoverRef: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
|
|
871
|
+
weekdayLabels: string[];
|
|
872
|
+
monthNames: string[];
|
|
873
|
+
selectedDate: _angular_core.WritableSignal<Date | null>;
|
|
874
|
+
currentMonth: _angular_core.WritableSignal<number>;
|
|
875
|
+
currentYear: _angular_core.WritableSignal<number>;
|
|
876
|
+
isOpen: _angular_core.WritableSignal<boolean>;
|
|
877
|
+
focusedDate: _angular_core.WritableSignal<Date | null>;
|
|
878
|
+
onChange: (value: Date | null) => void;
|
|
879
|
+
onTouched: () => void;
|
|
880
|
+
calendarDays: _angular_core.Signal<CalendarDay[]>;
|
|
881
|
+
formattedDate: _angular_core.Signal<string>;
|
|
882
|
+
popoverId: _angular_core.Signal<string>;
|
|
883
|
+
toggle(): void;
|
|
884
|
+
selectDate(date: Date): void;
|
|
885
|
+
previousMonth(): void;
|
|
886
|
+
nextMonth(): void;
|
|
887
|
+
private generateCalendarDays;
|
|
888
|
+
getDayTabIndex(day: CalendarDay): number;
|
|
889
|
+
getDateKey(date: Date): string;
|
|
890
|
+
onInputKeydown(event: KeyboardEvent): void;
|
|
891
|
+
onGridKeydown(event: KeyboardEvent): void;
|
|
892
|
+
onEscape(): void;
|
|
893
|
+
onDocumentClick(event: MouseEvent): void;
|
|
894
|
+
private open;
|
|
895
|
+
private close;
|
|
896
|
+
private setFocusedDate;
|
|
897
|
+
private focusDayButton;
|
|
898
|
+
private addDays;
|
|
899
|
+
private addMonths;
|
|
900
|
+
private getWeekdayIndex;
|
|
901
|
+
private shiftMonth;
|
|
902
|
+
private isSameDay;
|
|
903
|
+
private formatDate;
|
|
904
|
+
writeValue(value: Date | null): void;
|
|
905
|
+
registerOnChange(fn: (value: Date | null) => void): void;
|
|
906
|
+
registerOnTouched(fn: () => void): void;
|
|
907
|
+
setDisabledState(isDisabled: boolean): void;
|
|
908
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfDatepickerComponent, never>;
|
|
909
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfDatepickerComponent, "af-datepicker", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "dateChange": "dateChange"; }, never, never, true, never>;
|
|
910
|
+
}
|
|
911
|
+
|
|
912
|
+
/**
|
|
913
|
+
* Chip input component for managing a list of string values.
|
|
914
|
+
*
|
|
915
|
+
* Renders existing values as removable chips and provides a text input
|
|
916
|
+
* that creates new chips on configurable separator keys (Enter, Comma, Semicolon).
|
|
917
|
+
* Implements ControlValueAccessor for seamless integration with Angular Reactive Forms
|
|
918
|
+
* and template-driven forms, binding to a `string[]` value.
|
|
919
|
+
*
|
|
920
|
+
* @example
|
|
921
|
+
* <af-chip-input
|
|
922
|
+
* label="Roles"
|
|
923
|
+
* placeholder="Add role..."
|
|
924
|
+
* [(ngModel)]="roles">
|
|
925
|
+
* </af-chip-input>
|
|
926
|
+
*
|
|
927
|
+
* @example
|
|
928
|
+
* <af-chip-input
|
|
929
|
+
* label="Tags"
|
|
930
|
+
* [separators]="[',', ';']"
|
|
931
|
+
* [formControl]="tagsControl">
|
|
932
|
+
* </af-chip-input>
|
|
933
|
+
*/
|
|
934
|
+
declare class AfChipInputComponent implements ControlValueAccessor {
|
|
935
|
+
private static nextId;
|
|
936
|
+
/** Label shown above the input */
|
|
937
|
+
label: _angular_core.InputSignal<string>;
|
|
938
|
+
/** Placeholder text for the text input */
|
|
939
|
+
placeholder: _angular_core.InputSignal<string>;
|
|
940
|
+
/** Hint text shown below the input */
|
|
941
|
+
hint: _angular_core.InputSignal<string>;
|
|
942
|
+
/** Error message -- shows error state */
|
|
943
|
+
error: _angular_core.InputSignal<string>;
|
|
944
|
+
/** Whether the field is required */
|
|
945
|
+
required: _angular_core.InputSignal<boolean>;
|
|
946
|
+
/** Whether the component is disabled */
|
|
947
|
+
disabled: _angular_core.ModelSignal<boolean>;
|
|
948
|
+
/** Whether to allow duplicate chip values */
|
|
949
|
+
allowDuplicates: _angular_core.InputSignal<boolean>;
|
|
950
|
+
/** Separator characters that trigger chip creation (in addition to Enter) */
|
|
951
|
+
separators: _angular_core.InputSignal<string[]>;
|
|
952
|
+
/** Emitted when a chip is added */
|
|
953
|
+
added: _angular_core.OutputEmitterRef<string>;
|
|
954
|
+
/** Emitted when a chip is removed */
|
|
955
|
+
removed: _angular_core.OutputEmitterRef<string>;
|
|
956
|
+
inputRef: _angular_core.Signal<ElementRef<HTMLInputElement>>;
|
|
957
|
+
inputId: string;
|
|
958
|
+
chips: _angular_core.WritableSignal<string[]>;
|
|
959
|
+
focused: _angular_core.WritableSignal<boolean>;
|
|
960
|
+
private onChange;
|
|
961
|
+
private onTouched;
|
|
962
|
+
hintId: _angular_core.Signal<string>;
|
|
963
|
+
errorId: _angular_core.Signal<string>;
|
|
964
|
+
getAriaDescribedBy(): string | null;
|
|
965
|
+
focusInput(): void;
|
|
966
|
+
onKeydown(event: KeyboardEvent): void;
|
|
967
|
+
onInputChange(event: Event): void;
|
|
968
|
+
onBlur(): void;
|
|
969
|
+
/** Removes a chip by value */
|
|
970
|
+
remove(chip: string, event?: Event): void;
|
|
971
|
+
writeValue(value: string[]): void;
|
|
972
|
+
registerOnChange(fn: (value: string[]) => void): void;
|
|
973
|
+
registerOnTouched(fn: () => void): void;
|
|
974
|
+
setDisabledState(isDisabled: boolean): void;
|
|
975
|
+
private addChip;
|
|
976
|
+
private addChipValue;
|
|
977
|
+
private emitChange;
|
|
978
|
+
private escapeSeparators;
|
|
979
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfChipInputComponent, never>;
|
|
980
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfChipInputComponent, "af-chip-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "allowDuplicates": { "alias": "allowDuplicates"; "required": false; "isSignal": true; }; "separators": { "alias": "separators"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "added": "added"; "removed": "removed"; }, never, never, true, never>;
|
|
981
|
+
}
|
|
982
|
+
|
|
983
|
+
type AfTooltipPosition = 'top' | 'bottom' | 'left' | 'right';
|
|
984
|
+
/**
|
|
985
|
+
* Directive that attaches a tooltip to any host element.
|
|
986
|
+
*
|
|
987
|
+
* Uses the design system's `ct-tooltip` CSS classes for styling and animation.
|
|
988
|
+
* Shows on hover and focus, hides on blur, mouse leave, and Escape key.
|
|
989
|
+
* Includes a configurable delay before showing.
|
|
990
|
+
*
|
|
991
|
+
* @example
|
|
992
|
+
* <button afTooltip="Save changes">Save</button>
|
|
993
|
+
*
|
|
994
|
+
* @example
|
|
995
|
+
* <button
|
|
996
|
+
* afTooltip="Delete item"
|
|
997
|
+
* afTooltipPosition="bottom"
|
|
998
|
+
* [afTooltipDelay]="500">
|
|
999
|
+
* Delete
|
|
1000
|
+
* </button>
|
|
1001
|
+
*/
|
|
1002
|
+
declare class AfTooltipDirective implements OnDestroy {
|
|
1003
|
+
/** Tooltip text content */
|
|
1004
|
+
text: _angular_core.InputSignal<string>;
|
|
1005
|
+
/** Position relative to the host element */
|
|
1006
|
+
afTooltipPosition: _angular_core.InputSignal<AfTooltipPosition>;
|
|
1007
|
+
/** Delay in ms before showing the tooltip */
|
|
1008
|
+
afTooltipDelay: _angular_core.InputSignal<number>;
|
|
1009
|
+
/** Whether the tooltip is disabled */
|
|
1010
|
+
afTooltipDisabled: _angular_core.InputSignal<boolean>;
|
|
1011
|
+
private el;
|
|
1012
|
+
private renderer;
|
|
1013
|
+
private contentEl;
|
|
1014
|
+
private tooltipId;
|
|
1015
|
+
private showTimeout;
|
|
1016
|
+
private readonly listeners;
|
|
1017
|
+
constructor();
|
|
1018
|
+
private textEffect;
|
|
1019
|
+
private positionEffect;
|
|
1020
|
+
ngOnDestroy(): void;
|
|
1021
|
+
private initHost;
|
|
1022
|
+
private setupListeners;
|
|
1023
|
+
private scheduleShow;
|
|
1024
|
+
private show;
|
|
1025
|
+
private hide;
|
|
1026
|
+
private clearTimeout;
|
|
1027
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfTooltipDirective, never>;
|
|
1028
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AfTooltipDirective, "[afTooltip]", never, { "text": { "alias": "afTooltip"; "required": false; "isSignal": true; }; "afTooltipPosition": { "alias": "afTooltipPosition"; "required": false; "isSignal": true; }; "afTooltipDelay": { "alias": "afTooltipDelay"; "required": false; "isSignal": true; }; "afTooltipDisabled": { "alias": "afTooltipDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1029
|
+
}
|
|
1030
|
+
|
|
1031
|
+
type AfBadgeVariant = 'default' | 'info' | 'success' | 'warning' | 'danger';
|
|
1032
|
+
/**
|
|
1033
|
+
* Badge component for status indicators
|
|
1034
|
+
*
|
|
1035
|
+
* @example
|
|
1036
|
+
* <af-badge variant="success" icon="+">Approved</af-badge>
|
|
1037
|
+
* <af-badge variant="danger">Blocked</af-badge>
|
|
1038
|
+
*/
|
|
1039
|
+
declare class AfBadgeComponent {
|
|
1040
|
+
/** Color variant */
|
|
1041
|
+
variant: _angular_core.InputSignal<AfBadgeVariant>;
|
|
1042
|
+
/** Icon character to display */
|
|
1043
|
+
icon: _angular_core.InputSignal<string>;
|
|
1044
|
+
/** Show a dot indicator instead of icon */
|
|
1045
|
+
dot: _angular_core.InputSignal<boolean>;
|
|
1046
|
+
badgeClasses: _angular_core.Signal<string>;
|
|
1047
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfBadgeComponent, never>;
|
|
1048
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfBadgeComponent, "af-badge", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
1049
|
+
}
|
|
1050
|
+
|
|
1051
|
+
type AfProgressBarVariant = 'default' | 'info' | 'success' | 'warning' | 'danger';
|
|
1052
|
+
type AfProgressBarSize = 'sm' | 'md' | 'lg';
|
|
1053
|
+
/**
|
|
1054
|
+
* Progress bar for showing completion state
|
|
1055
|
+
*
|
|
1056
|
+
* @example
|
|
1057
|
+
* <af-progress-bar [value]="75" variant="success" label="Upload progress"></af-progress-bar>
|
|
1058
|
+
* <af-progress-bar [indeterminate]="true" label="Loading"></af-progress-bar>
|
|
1059
|
+
*/
|
|
1060
|
+
declare class AfProgressBarComponent {
|
|
1061
|
+
/** Current progress value (0-100) */
|
|
1062
|
+
value: _angular_core.InputSignal<number>;
|
|
1063
|
+
/** Color variant */
|
|
1064
|
+
variant: _angular_core.InputSignal<AfProgressBarVariant>;
|
|
1065
|
+
/** Track height */
|
|
1066
|
+
size: _angular_core.InputSignal<AfProgressBarSize>;
|
|
1067
|
+
/** Accessible label for screen readers */
|
|
1068
|
+
label: _angular_core.InputSignal<string>;
|
|
1069
|
+
/** Indeterminate mode (animated, no fixed value) */
|
|
1070
|
+
indeterminate: _angular_core.InputSignal<boolean>;
|
|
1071
|
+
barClasses: _angular_core.Signal<string>;
|
|
1072
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfProgressBarComponent, never>;
|
|
1073
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfProgressBarComponent, "af-progress-bar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1074
|
+
}
|
|
1075
|
+
|
|
1076
|
+
type AfSpinnerSize = 'sm' | 'md' | 'lg';
|
|
1077
|
+
/**
|
|
1078
|
+
* Spinner component for loading states
|
|
1079
|
+
*
|
|
1080
|
+
* @example
|
|
1081
|
+
* <af-spinner label="Loading data"></af-spinner>
|
|
1082
|
+
* <af-spinner size="lg" label="Processing"></af-spinner>
|
|
1083
|
+
*/
|
|
1084
|
+
declare class AfSpinnerComponent {
|
|
1085
|
+
/** Spinner size */
|
|
1086
|
+
size: _angular_core.InputSignal<AfSpinnerSize>;
|
|
1087
|
+
/** Accessible label for screen readers */
|
|
1088
|
+
label: _angular_core.InputSignal<string>;
|
|
1089
|
+
spinnerClasses: _angular_core.Signal<string>;
|
|
1090
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfSpinnerComponent, never>;
|
|
1091
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfSpinnerComponent, "af-spinner", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1092
|
+
}
|
|
1093
|
+
|
|
1094
|
+
interface AfToggleItem {
|
|
1095
|
+
label: string;
|
|
1096
|
+
value: string;
|
|
1097
|
+
disabled?: boolean;
|
|
1098
|
+
}
|
|
1099
|
+
type AfToggleGroupSize = 'sm' | 'md' | 'lg';
|
|
1100
|
+
/**
|
|
1101
|
+
* Toggle group for single or multi-select button groups
|
|
1102
|
+
*
|
|
1103
|
+
* @example
|
|
1104
|
+
* <af-toggle-group
|
|
1105
|
+
* [items]="viewModes"
|
|
1106
|
+
* [(value)]="selectedMode"
|
|
1107
|
+
* ariaLabel="View mode">
|
|
1108
|
+
* </af-toggle-group>
|
|
1109
|
+
*
|
|
1110
|
+
* <af-toggle-group
|
|
1111
|
+
* [items]="filters"
|
|
1112
|
+
* [multiple]="true"
|
|
1113
|
+
* [(value)]="activeFilters"
|
|
1114
|
+
* ariaLabel="Status filter">
|
|
1115
|
+
* </af-toggle-group>
|
|
1116
|
+
*/
|
|
1117
|
+
declare class AfToggleGroupComponent implements ControlValueAccessor {
|
|
1118
|
+
/** Toggle items */
|
|
1119
|
+
items: _angular_core.InputSignal<AfToggleItem[]>;
|
|
1120
|
+
/** Group size */
|
|
1121
|
+
size: _angular_core.InputSignal<AfToggleGroupSize>;
|
|
1122
|
+
/** Allow multiple selections */
|
|
1123
|
+
multiple: _angular_core.InputSignal<boolean>;
|
|
1124
|
+
/** Accessible group label */
|
|
1125
|
+
ariaLabel: _angular_core.InputSignal<string>;
|
|
1126
|
+
/** Disabled state */
|
|
1127
|
+
disabled: _angular_core.ModelSignal<boolean>;
|
|
1128
|
+
/** Current value (string for single, string[] for multiple) */
|
|
1129
|
+
value: _angular_core.ModelSignal<string | string[]>;
|
|
1130
|
+
private onChange;
|
|
1131
|
+
private onTouched;
|
|
1132
|
+
groupClasses: _angular_core.Signal<string>;
|
|
1133
|
+
isPressed(itemValue: string): boolean;
|
|
1134
|
+
toggle(itemValue: string): void;
|
|
1135
|
+
writeValue(value: string | string[]): void;
|
|
1136
|
+
registerOnChange(fn: (value: string | string[]) => void): void;
|
|
1137
|
+
registerOnTouched(fn: () => void): void;
|
|
1138
|
+
setDisabledState(isDisabled: boolean): void;
|
|
1139
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfToggleGroupComponent, never>;
|
|
1140
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfToggleGroupComponent, "af-toggle-group", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "value": "valueChange"; }, never, never, true, never>;
|
|
1141
|
+
}
|
|
1142
|
+
|
|
1143
|
+
/**
|
|
1144
|
+
* Toolbar component for top-level app navigation
|
|
1145
|
+
*
|
|
1146
|
+
* @example
|
|
1147
|
+
* <af-toolbar ariaLabel="Main navigation">
|
|
1148
|
+
* <a brand href="#">Construct</a>
|
|
1149
|
+
* <ul nav>
|
|
1150
|
+
* <li><a href="/dashboard" class="ct-toolbar__nav-link ct-toolbar__nav-link--active" aria-current="page">Dashboard</a></li>
|
|
1151
|
+
* <li><a href="/documents" class="ct-toolbar__nav-link">Documents</a></li>
|
|
1152
|
+
* </ul>
|
|
1153
|
+
* <div actions>
|
|
1154
|
+
* <button class="ct-button ct-button--ghost">Profile</button>
|
|
1155
|
+
* </div>
|
|
1156
|
+
* </af-toolbar>
|
|
1157
|
+
*/
|
|
1158
|
+
declare class AfToolbarComponent {
|
|
1159
|
+
/** Accessible label for the navigation landmark */
|
|
1160
|
+
ariaLabel: _angular_core.InputSignal<string>;
|
|
1161
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfToolbarComponent, never>;
|
|
1162
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfToolbarComponent, "af-toolbar", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[brand]", "[nav]", "[actions]"], true, never>;
|
|
1163
|
+
}
|
|
1164
|
+
|
|
1165
|
+
type AfSidebarMode = 'side' | 'over';
|
|
1166
|
+
/**
|
|
1167
|
+
* Sidebar component for collapsible navigation
|
|
1168
|
+
*
|
|
1169
|
+
* @example
|
|
1170
|
+
* <af-sidebar [open]="sidebarOpen" mode="side" ariaLabel="Folder navigation" (openChange)="sidebarOpen = $event">
|
|
1171
|
+
* <div header>
|
|
1172
|
+
* <strong>Folders</strong>
|
|
1173
|
+
* </div>
|
|
1174
|
+
* <ul content class="ct-nav-list">
|
|
1175
|
+
* <li><a class="ct-nav-item ct-nav-item--active" href="#" aria-current="page">
|
|
1176
|
+
* <span class="ct-nav-item__label">Inbox</span>
|
|
1177
|
+
* <span class="ct-nav-item__badge">12</span>
|
|
1178
|
+
* </a></li>
|
|
1179
|
+
* </ul>
|
|
1180
|
+
* </af-sidebar>
|
|
1181
|
+
*/
|
|
1182
|
+
declare class AfSidebarComponent {
|
|
1183
|
+
/** Sidebar open state */
|
|
1184
|
+
open: _angular_core.ModelSignal<boolean>;
|
|
1185
|
+
/** Display mode: side (pushes content) or over (overlays) */
|
|
1186
|
+
mode: _angular_core.InputSignal<AfSidebarMode>;
|
|
1187
|
+
/** Accessible label for the sidebar landmark */
|
|
1188
|
+
ariaLabel: _angular_core.InputSignal<string>;
|
|
1189
|
+
/** Show close button in overlay mode */
|
|
1190
|
+
showCloseButton: _angular_core.InputSignal<boolean>;
|
|
1191
|
+
sidebarClasses: _angular_core.Signal<string>;
|
|
1192
|
+
close(): void;
|
|
1193
|
+
onEscape(): void;
|
|
1194
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfSidebarComponent, never>;
|
|
1195
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfSidebarComponent, "af-sidebar", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["[header]", "[content]", "*"], true, never>;
|
|
1196
|
+
}
|
|
1197
|
+
|
|
1198
|
+
type AfIconSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
1199
|
+
/**
|
|
1200
|
+
* Icon component that abstracts the icon rendering strategy.
|
|
1201
|
+
*
|
|
1202
|
+
* Currently uses Material Icons font ligatures. The icon strategy
|
|
1203
|
+
* can be changed centrally without modifying consumers.
|
|
1204
|
+
*
|
|
1205
|
+
* @example
|
|
1206
|
+
* <af-icon name="delete" />
|
|
1207
|
+
* <af-icon name="edit" size="sm" />
|
|
1208
|
+
*/
|
|
1209
|
+
declare class AfIconComponent {
|
|
1210
|
+
/** Material Icon name (ligature) */
|
|
1211
|
+
name: _angular_core.InputSignal<string>;
|
|
1212
|
+
/** Icon size variant */
|
|
1213
|
+
size: _angular_core.InputSignal<AfIconSize>;
|
|
1214
|
+
iconClasses: _angular_core.Signal<string>;
|
|
1215
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfIconComponent, never>;
|
|
1216
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfIconComponent, "af-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1217
|
+
}
|
|
1218
|
+
|
|
1219
|
+
type AfSliderSize = 'sm' | 'md' | 'lg';
|
|
1220
|
+
/**
|
|
1221
|
+
* Slider component with full form control and accessibility support.
|
|
1222
|
+
*
|
|
1223
|
+
* Wraps the `ct-slider` design system CSS. Supports min/max/step,
|
|
1224
|
+
* keyboard navigation, ARIA attributes, and reactive forms.
|
|
1225
|
+
*
|
|
1226
|
+
* @example Reactive Forms
|
|
1227
|
+
* <af-slider formControlName="volume" [min]="0" [max]="100" label="Volume" />
|
|
1228
|
+
*
|
|
1229
|
+
* @example Standalone two-way binding
|
|
1230
|
+
* <af-slider [(value)]="brightness" [min]="0" [max]="100" [step]="5" [showValue]="true" />
|
|
1231
|
+
*
|
|
1232
|
+
* @example With min/max labels
|
|
1233
|
+
* <af-slider [(value)]="temperature" [min]="16" [max]="30" [showMinMax]="true" label="Temperature" />
|
|
1234
|
+
*/
|
|
1235
|
+
declare class AfSliderComponent implements ControlValueAccessor {
|
|
1236
|
+
private static nextId;
|
|
1237
|
+
/** Accessible label for the slider */
|
|
1238
|
+
label: _angular_core.InputSignal<string>;
|
|
1239
|
+
/** Minimum value */
|
|
1240
|
+
min: _angular_core.InputSignal<number>;
|
|
1241
|
+
/** Maximum value */
|
|
1242
|
+
max: _angular_core.InputSignal<number>;
|
|
1243
|
+
/** Step increment */
|
|
1244
|
+
step: _angular_core.InputSignal<number>;
|
|
1245
|
+
/** Component size variant */
|
|
1246
|
+
size: _angular_core.InputSignal<AfSliderSize>;
|
|
1247
|
+
/** Whether the slider is disabled */
|
|
1248
|
+
disabled: _angular_core.ModelSignal<boolean>;
|
|
1249
|
+
/** Whether the slider is in an invalid state */
|
|
1250
|
+
invalid: _angular_core.InputSignal<boolean>;
|
|
1251
|
+
/** Show the current value next to the slider */
|
|
1252
|
+
showValue: _angular_core.InputSignal<boolean>;
|
|
1253
|
+
/** Show min/max labels */
|
|
1254
|
+
showMinMax: _angular_core.InputSignal<boolean>;
|
|
1255
|
+
/** Custom aria-valuetext for screen readers */
|
|
1256
|
+
valueTextFn: _angular_core.InputSignal<((value: number) => string) | null>;
|
|
1257
|
+
/** Unique slider ID */
|
|
1258
|
+
sliderId: _angular_core.InputSignal<string>;
|
|
1259
|
+
/** Current value — supports two-way binding via [(value)] */
|
|
1260
|
+
value: _angular_core.ModelSignal<number>;
|
|
1261
|
+
sliderInput: _angular_core.Signal<ElementRef<HTMLInputElement>>;
|
|
1262
|
+
private onChangeCallback;
|
|
1263
|
+
onTouched: () => void;
|
|
1264
|
+
hostClasses: _angular_core.Signal<string>;
|
|
1265
|
+
valuePercent: _angular_core.Signal<number>;
|
|
1266
|
+
ariaValueText: _angular_core.Signal<string | null>;
|
|
1267
|
+
onInput(event: Event): void;
|
|
1268
|
+
/** Writes a new value from the form model. */
|
|
1269
|
+
writeValue(value: number): void;
|
|
1270
|
+
registerOnChange(fn: (value: number) => void): void;
|
|
1271
|
+
registerOnTouched(fn: () => void): void;
|
|
1272
|
+
setDisabledState(isDisabled: boolean): void;
|
|
1273
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfSliderComponent, never>;
|
|
1274
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfSliderComponent, "af-slider", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "showMinMax": { "alias": "showMinMax"; "required": false; "isSignal": true; }; "valueTextFn": { "alias": "valueTextFn"; "required": false; "isSignal": true; }; "sliderId": { "alias": "sliderId"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "value": "valueChange"; }, never, never, true, never>;
|
|
1275
|
+
}
|
|
1276
|
+
|
|
1277
|
+
type AfDrawerPosition = 'right' | 'left' | 'top' | 'bottom';
|
|
1278
|
+
type AfDrawerSize = 'sm' | 'md' | 'lg' | 'full';
|
|
1279
|
+
/**
|
|
1280
|
+
* Drawer/slide-out panel with full accessibility support.
|
|
1281
|
+
*
|
|
1282
|
+
* @example
|
|
1283
|
+
* ```html
|
|
1284
|
+
* <af-drawer [(open)]="isOpen" position="right" ariaLabel="Settings">
|
|
1285
|
+
* <div header>
|
|
1286
|
+
* <h2>Settings</h2>
|
|
1287
|
+
* </div>
|
|
1288
|
+
* <div body>
|
|
1289
|
+
* <p>Drawer content here.</p>
|
|
1290
|
+
* </div>
|
|
1291
|
+
* <div footer>
|
|
1292
|
+
* <button (click)="isOpen = false">Close</button>
|
|
1293
|
+
* </div>
|
|
1294
|
+
* </af-drawer>
|
|
1295
|
+
* ```
|
|
1296
|
+
*/
|
|
1297
|
+
declare class AfDrawerComponent implements OnDestroy {
|
|
1298
|
+
private static nextId;
|
|
1299
|
+
/** Two-way bindable open state */
|
|
1300
|
+
open: _angular_core.ModelSignal<boolean>;
|
|
1301
|
+
/** Slide-in position */
|
|
1302
|
+
position: _angular_core.InputSignal<AfDrawerPosition>;
|
|
1303
|
+
/** Panel size */
|
|
1304
|
+
size: _angular_core.InputSignal<AfDrawerSize>;
|
|
1305
|
+
/** Accessible label for the drawer dialog */
|
|
1306
|
+
ariaLabel: _angular_core.InputSignal<string>;
|
|
1307
|
+
/** Show built-in close button in the header */
|
|
1308
|
+
showCloseButton: _angular_core.InputSignal<boolean>;
|
|
1309
|
+
/** Whether clicking the backdrop closes the drawer */
|
|
1310
|
+
closeOnBackdropClick: _angular_core.InputSignal<boolean>;
|
|
1311
|
+
/** Aria label for the close button */
|
|
1312
|
+
closeButtonAriaLabel: _angular_core.InputSignal<string>;
|
|
1313
|
+
/** Emits when the drawer requests to be closed */
|
|
1314
|
+
closed: _angular_core.OutputEmitterRef<void>;
|
|
1315
|
+
/** Unique ID for aria-labelledby fallback */
|
|
1316
|
+
readonly titleId: string;
|
|
1317
|
+
private panelRef;
|
|
1318
|
+
private previousActiveElement;
|
|
1319
|
+
private focusableElements;
|
|
1320
|
+
containerClasses: _angular_core.Signal<string>;
|
|
1321
|
+
private openEffect;
|
|
1322
|
+
ngOnDestroy(): void;
|
|
1323
|
+
/** Closes the drawer and emits the closed event */
|
|
1324
|
+
close(): void;
|
|
1325
|
+
onBackdropClick(event: MouseEvent): void;
|
|
1326
|
+
onKeydown(event: KeyboardEvent): void;
|
|
1327
|
+
private onOpen;
|
|
1328
|
+
private onClose;
|
|
1329
|
+
private trapFocus;
|
|
1330
|
+
private restoreFocus;
|
|
1331
|
+
private lockBodyScroll;
|
|
1332
|
+
private unlockBodyScroll;
|
|
1333
|
+
private refreshFocusableElements;
|
|
1334
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfDrawerComponent, never>;
|
|
1335
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfDrawerComponent, "af-drawer", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "closeButtonAriaLabel": { "alias": "closeButtonAriaLabel"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "closed": "closed"; }, never, ["[header]", "[body]", "*", "[footer]"], true, never>;
|
|
1336
|
+
}
|
|
1337
|
+
|
|
1338
|
+
interface AfComboboxOption {
|
|
1339
|
+
value: unknown;
|
|
1340
|
+
label: string;
|
|
1341
|
+
disabled?: boolean;
|
|
1342
|
+
description?: string;
|
|
1343
|
+
}
|
|
1344
|
+
/**
|
|
1345
|
+
* Combobox component with autocomplete filtering, keyboard navigation,
|
|
1346
|
+
* and full ARIA support following the WAI-ARIA 1.2 combobox pattern.
|
|
1347
|
+
*
|
|
1348
|
+
* @example
|
|
1349
|
+
* <af-combobox
|
|
1350
|
+
* label="Country"
|
|
1351
|
+
* placeholder="Search countries..."
|
|
1352
|
+
* [options]="countries"
|
|
1353
|
+
* [(ngModel)]="selectedCountry"
|
|
1354
|
+
* hint="Start typing to filter"
|
|
1355
|
+
* ></af-combobox>
|
|
1356
|
+
*
|
|
1357
|
+
* @example
|
|
1358
|
+
* <af-combobox
|
|
1359
|
+
* label="Assignee"
|
|
1360
|
+
* [options]="teamMembers"
|
|
1361
|
+
* [formControl]="assigneeControl"
|
|
1362
|
+
* [error]="assigneeError"
|
|
1363
|
+
* required
|
|
1364
|
+
* ></af-combobox>
|
|
1365
|
+
*/
|
|
1366
|
+
declare class AfComboboxComponent implements ControlValueAccessor {
|
|
1367
|
+
private static nextId;
|
|
1368
|
+
/** Label for the combobox field */
|
|
1369
|
+
label: _angular_core.InputSignal<string>;
|
|
1370
|
+
/** Placeholder text for the input */
|
|
1371
|
+
placeholder: _angular_core.InputSignal<string>;
|
|
1372
|
+
/** Available options */
|
|
1373
|
+
options: _angular_core.InputSignal<AfComboboxOption[]>;
|
|
1374
|
+
/** Hint text shown below the combobox */
|
|
1375
|
+
hint: _angular_core.InputSignal<string>;
|
|
1376
|
+
/** Error message — shows error state and message */
|
|
1377
|
+
error: _angular_core.InputSignal<string>;
|
|
1378
|
+
/** Whether the combobox is required */
|
|
1379
|
+
required: _angular_core.InputSignal<boolean>;
|
|
1380
|
+
/** Whether the combobox is disabled */
|
|
1381
|
+
disabled: _angular_core.ModelSignal<boolean>;
|
|
1382
|
+
/** Size variant */
|
|
1383
|
+
size: _angular_core.InputSignal<"sm" | "md" | "lg">;
|
|
1384
|
+
/** Text shown when no options match the filter */
|
|
1385
|
+
emptyText: _angular_core.InputSignal<string>;
|
|
1386
|
+
/** Value comparison function for object values */
|
|
1387
|
+
compareWith: _angular_core.InputSignal<(a: unknown, b: unknown) => boolean>;
|
|
1388
|
+
/** Unique combobox ID */
|
|
1389
|
+
comboboxId: _angular_core.InputSignal<string>;
|
|
1390
|
+
inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
|
|
1391
|
+
listboxRef: _angular_core.Signal<ElementRef<HTMLUListElement> | undefined>;
|
|
1392
|
+
isOpen: _angular_core.WritableSignal<boolean>;
|
|
1393
|
+
query: _angular_core.WritableSignal<string>;
|
|
1394
|
+
highlightedIndex: _angular_core.WritableSignal<number>;
|
|
1395
|
+
private value;
|
|
1396
|
+
private onChange;
|
|
1397
|
+
private onTouchedCallback;
|
|
1398
|
+
get inputId(): string;
|
|
1399
|
+
get listboxId(): string;
|
|
1400
|
+
get hintId(): string;
|
|
1401
|
+
get errorId(): string;
|
|
1402
|
+
comboboxClasses: _angular_core.Signal<string>;
|
|
1403
|
+
selectedOption: _angular_core.Signal<AfComboboxOption | null>;
|
|
1404
|
+
filteredOptions: _angular_core.Signal<AfComboboxOption[]>;
|
|
1405
|
+
activeDescendantId: _angular_core.Signal<string | null>;
|
|
1406
|
+
statusMessage: _angular_core.Signal<string>;
|
|
1407
|
+
getAriaDescribedBy(): string | null;
|
|
1408
|
+
getOptionId(index: number): string;
|
|
1409
|
+
isSelected(option: AfComboboxOption): boolean;
|
|
1410
|
+
/** Opens the listbox and highlights the selected option or first enabled option */
|
|
1411
|
+
openListbox(): void;
|
|
1412
|
+
/** Closes the listbox and restores the display value */
|
|
1413
|
+
closeListbox(restoreDisplay?: boolean): void;
|
|
1414
|
+
/** Toggles the listbox open/closed */
|
|
1415
|
+
toggleListbox(): void;
|
|
1416
|
+
/** Selects an option and closes the listbox */
|
|
1417
|
+
selectOption(option: AfComboboxOption): void;
|
|
1418
|
+
onInput(event: Event): void;
|
|
1419
|
+
onFocus(): void;
|
|
1420
|
+
onBlur(): void;
|
|
1421
|
+
onKeydown(event: KeyboardEvent): void;
|
|
1422
|
+
onDocumentClick(event: MouseEvent): void;
|
|
1423
|
+
/** Writes a value from the form model */
|
|
1424
|
+
writeValue(value: unknown): void;
|
|
1425
|
+
registerOnChange(fn: (value: unknown) => void): void;
|
|
1426
|
+
registerOnTouched(fn: () => void): void;
|
|
1427
|
+
setDisabledState(isDisabled: boolean): void;
|
|
1428
|
+
private moveHighlight;
|
|
1429
|
+
private scrollHighlightedIntoView;
|
|
1430
|
+
private findSelectedIndex;
|
|
1431
|
+
private findFirstEnabledIndex;
|
|
1432
|
+
private findLastEnabledIndex;
|
|
1433
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfComboboxComponent, never>;
|
|
1434
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfComboboxComponent, "af-combobox", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "comboboxId": { "alias": "comboboxId"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; }, never, never, true, never>;
|
|
1435
|
+
}
|
|
1436
|
+
|
|
1437
|
+
interface AfFileValidationError {
|
|
1438
|
+
file: File;
|
|
1439
|
+
type: 'type' | 'size';
|
|
1440
|
+
message: string;
|
|
1441
|
+
}
|
|
1442
|
+
interface AfFileEntry {
|
|
1443
|
+
file: File;
|
|
1444
|
+
status: 'success' | 'error';
|
|
1445
|
+
error?: string;
|
|
1446
|
+
}
|
|
1447
|
+
/**
|
|
1448
|
+
* File upload component with drag-and-drop, validation, and form control support.
|
|
1449
|
+
*
|
|
1450
|
+
* @example
|
|
1451
|
+
* <af-file-upload
|
|
1452
|
+
* label="Attachments"
|
|
1453
|
+
* hint="PDF, DOCX up to 10MB"
|
|
1454
|
+
* accept=".pdf,.docx"
|
|
1455
|
+
* [maxSize]="10485760"
|
|
1456
|
+
* multiple
|
|
1457
|
+
* [(ngModel)]="files">
|
|
1458
|
+
* </af-file-upload>
|
|
1459
|
+
*
|
|
1460
|
+
* @example
|
|
1461
|
+
* <af-file-upload
|
|
1462
|
+
* label="Avatar"
|
|
1463
|
+
* accept="image/*"
|
|
1464
|
+
* [maxSize]="2097152"
|
|
1465
|
+
* [formControl]="avatarControl">
|
|
1466
|
+
* </af-file-upload>
|
|
1467
|
+
*/
|
|
1468
|
+
declare class AfFileUploadComponent implements ControlValueAccessor {
|
|
1469
|
+
private static nextId;
|
|
1470
|
+
/** Label shown above the dropzone */
|
|
1471
|
+
label: _angular_core.InputSignal<string>;
|
|
1472
|
+
/** Hint text shown in the dropzone (e.g. accepted types and size limit) */
|
|
1473
|
+
hint: _angular_core.InputSignal<string>;
|
|
1474
|
+
/** Error message — shows error state */
|
|
1475
|
+
error: _angular_core.InputSignal<string>;
|
|
1476
|
+
/** Accepted file types (e.g. '.pdf,.docx' or 'image/*') */
|
|
1477
|
+
accept: _angular_core.InputSignal<string>;
|
|
1478
|
+
/** Maximum file size in bytes (0 = unlimited) */
|
|
1479
|
+
maxSize: _angular_core.InputSignal<number>;
|
|
1480
|
+
/** Allow selecting multiple files */
|
|
1481
|
+
multiple: _angular_core.InputSignal<boolean>;
|
|
1482
|
+
/** Whether the field is required */
|
|
1483
|
+
required: _angular_core.InputSignal<boolean>;
|
|
1484
|
+
/** Whether the component is disabled */
|
|
1485
|
+
disabled: _angular_core.ModelSignal<boolean>;
|
|
1486
|
+
/** Emits validation errors when invalid files are added */
|
|
1487
|
+
validationErrors: _angular_core.OutputEmitterRef<AfFileValidationError[]>;
|
|
1488
|
+
/** Unique component ID */
|
|
1489
|
+
inputId: _angular_core.InputSignal<string>;
|
|
1490
|
+
fileEntries: _angular_core.WritableSignal<AfFileEntry[]>;
|
|
1491
|
+
dragOver: _angular_core.WritableSignal<boolean>;
|
|
1492
|
+
liveAnnouncement: _angular_core.WritableSignal<string>;
|
|
1493
|
+
onChange: (value: File | File[] | null) => void;
|
|
1494
|
+
onTouched: () => void;
|
|
1495
|
+
labelId: _angular_core.Signal<string>;
|
|
1496
|
+
hintId: _angular_core.Signal<string>;
|
|
1497
|
+
errorId: _angular_core.Signal<string>;
|
|
1498
|
+
ariaDescribedBy: _angular_core.Signal<string | null>;
|
|
1499
|
+
onDragEnter(event: DragEvent): void;
|
|
1500
|
+
onDragOver(event: DragEvent): void;
|
|
1501
|
+
onDragLeave(event: DragEvent): void;
|
|
1502
|
+
onDrop(event: DragEvent): void;
|
|
1503
|
+
onFileSelected(event: Event): void;
|
|
1504
|
+
/** Removes a file entry from the list */
|
|
1505
|
+
removeFile(entry: AfFileEntry): void;
|
|
1506
|
+
/** Formats bytes into a human-readable size string */
|
|
1507
|
+
formatSize(bytes: number): string;
|
|
1508
|
+
writeValue(value: File | File[] | null): void;
|
|
1509
|
+
registerOnChange(fn: (value: File | File[] | null) => void): void;
|
|
1510
|
+
registerOnTouched(fn: () => void): void;
|
|
1511
|
+
setDisabledState(isDisabled: boolean): void;
|
|
1512
|
+
private processFiles;
|
|
1513
|
+
private validateFile;
|
|
1514
|
+
private isFileTypeAccepted;
|
|
1515
|
+
private emitValue;
|
|
1516
|
+
private announce;
|
|
1517
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfFileUploadComponent, never>;
|
|
1518
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfFileUploadComponent, "af-file-upload", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "validationErrors": "validationErrors"; }, never, never, true, never>;
|
|
1519
|
+
}
|
|
1520
|
+
|
|
1521
|
+
interface AfSelectMenuOption {
|
|
1522
|
+
value: unknown;
|
|
1523
|
+
label: string;
|
|
1524
|
+
disabled?: boolean;
|
|
1525
|
+
}
|
|
1526
|
+
/**
|
|
1527
|
+
* Custom dropdown select component with keyboard navigation
|
|
1528
|
+
* and full ARIA listbox pattern for single and multi-select.
|
|
1529
|
+
*
|
|
1530
|
+
* @example Single select
|
|
1531
|
+
* <af-select-menu
|
|
1532
|
+
* label="Country"
|
|
1533
|
+
* placeholder="Select a country"
|
|
1534
|
+
* [options]="countries"
|
|
1535
|
+
* [(ngModel)]="selectedCountry">
|
|
1536
|
+
* </af-select-menu>
|
|
1537
|
+
*
|
|
1538
|
+
* @example Multi-select with reactive forms
|
|
1539
|
+
* <af-select-menu
|
|
1540
|
+
* label="Roles"
|
|
1541
|
+
* placeholder="Select roles"
|
|
1542
|
+
* [options]="roles"
|
|
1543
|
+
* [multiple]="true"
|
|
1544
|
+
* [formControl]="rolesControl">
|
|
1545
|
+
* </af-select-menu>
|
|
1546
|
+
*/
|
|
1547
|
+
declare class AfSelectMenuComponent implements ControlValueAccessor {
|
|
1548
|
+
private static nextId;
|
|
1549
|
+
/** Label shown above the select */
|
|
1550
|
+
label: _angular_core.InputSignal<string>;
|
|
1551
|
+
/** Placeholder text when nothing is selected */
|
|
1552
|
+
placeholder: _angular_core.InputSignal<string>;
|
|
1553
|
+
/** Available options */
|
|
1554
|
+
options: _angular_core.InputSignal<AfSelectMenuOption[]>;
|
|
1555
|
+
/** Hint text shown below the select */
|
|
1556
|
+
hint: _angular_core.InputSignal<string>;
|
|
1557
|
+
/** Error message — shows error state */
|
|
1558
|
+
error: _angular_core.InputSignal<string>;
|
|
1559
|
+
/** Whether the field is required */
|
|
1560
|
+
required: _angular_core.InputSignal<boolean>;
|
|
1561
|
+
/** Whether the component is disabled */
|
|
1562
|
+
disabled: _angular_core.ModelSignal<boolean>;
|
|
1563
|
+
/** Allow selecting multiple options */
|
|
1564
|
+
multiple: _angular_core.InputSignal<boolean>;
|
|
1565
|
+
/** Size variant */
|
|
1566
|
+
size: _angular_core.InputSignal<"sm" | "md" | "lg">;
|
|
1567
|
+
/** Value comparison function for object values */
|
|
1568
|
+
compareWith: _angular_core.InputSignal<(a: unknown, b: unknown) => boolean>;
|
|
1569
|
+
/** Unique component ID */
|
|
1570
|
+
componentId: _angular_core.InputSignal<string>;
|
|
1571
|
+
triggerRef: _angular_core.Signal<ElementRef<HTMLButtonElement> | undefined>;
|
|
1572
|
+
listboxRef: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
|
|
1573
|
+
menuRef: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
|
|
1574
|
+
isOpen: _angular_core.WritableSignal<boolean>;
|
|
1575
|
+
highlightedIndex: _angular_core.WritableSignal<number>;
|
|
1576
|
+
private value;
|
|
1577
|
+
private onChange;
|
|
1578
|
+
private onTouchedCallback;
|
|
1579
|
+
get labelId(): string;
|
|
1580
|
+
get listboxId(): string;
|
|
1581
|
+
get hintId(): string;
|
|
1582
|
+
get errorId(): string;
|
|
1583
|
+
menuClasses: _angular_core.Signal<string>;
|
|
1584
|
+
isPlaceholder: _angular_core.Signal<boolean>;
|
|
1585
|
+
displayValue: _angular_core.Signal<string>;
|
|
1586
|
+
activeDescendantId: _angular_core.Signal<string | null>;
|
|
1587
|
+
getAriaDescribedBy(): string | null;
|
|
1588
|
+
getOptionId(index: number): string;
|
|
1589
|
+
isSelected(option: AfSelectMenuOption): boolean;
|
|
1590
|
+
/** Toggles the listbox open/closed */
|
|
1591
|
+
toggleListbox(): void;
|
|
1592
|
+
/** Opens the listbox and highlights the selected or first enabled option */
|
|
1593
|
+
openListbox(): void;
|
|
1594
|
+
/** Closes the listbox */
|
|
1595
|
+
closeListbox(): void;
|
|
1596
|
+
/** Selects or toggles an option */
|
|
1597
|
+
selectOption(option: AfSelectMenuOption): void;
|
|
1598
|
+
onKeydown(event: KeyboardEvent): void;
|
|
1599
|
+
onBlur(): void;
|
|
1600
|
+
onDocumentClick(event: MouseEvent): void;
|
|
1601
|
+
writeValue(value: unknown): void;
|
|
1602
|
+
registerOnChange(fn: (value: unknown) => void): void;
|
|
1603
|
+
registerOnTouched(fn: () => void): void;
|
|
1604
|
+
setDisabledState(isDisabled: boolean): void;
|
|
1605
|
+
private moveHighlight;
|
|
1606
|
+
private scrollHighlightedIntoView;
|
|
1607
|
+
private findSelectedOrFirstIndex;
|
|
1608
|
+
private findFirstEnabledIndex;
|
|
1609
|
+
private findLastEnabledIndex;
|
|
1610
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfSelectMenuComponent, never>;
|
|
1611
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfSelectMenuComponent, "af-select-menu", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "componentId": { "alias": "componentId"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; }, never, never, true, never>;
|
|
1612
|
+
}
|
|
1613
|
+
|
|
1614
|
+
type AfNavbarSize = 'sm' | 'md' | 'lg';
|
|
1615
|
+
type AfNavbarVariant = 'default' | 'sticky' | 'fixed' | 'elevated' | 'transparent' | 'dark' | 'bordered';
|
|
1616
|
+
/**
|
|
1617
|
+
* Individual navigation item used within af-navbar.
|
|
1618
|
+
*
|
|
1619
|
+
* @example
|
|
1620
|
+
* <af-nav-item label="Dashboard" href="/dashboard" [active]="true" />
|
|
1621
|
+
*/
|
|
1622
|
+
declare class AfNavItemComponent {
|
|
1623
|
+
/** Text label for the navigation item. */
|
|
1624
|
+
label: _angular_core.InputSignal<string>;
|
|
1625
|
+
/** URL for the navigation link. Renders as `<a>` when provided, `<button>` otherwise. */
|
|
1626
|
+
href: _angular_core.InputSignal<string>;
|
|
1627
|
+
/** Marks this item as the currently active page. */
|
|
1628
|
+
active: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1629
|
+
/** Disables interaction with this item. */
|
|
1630
|
+
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1631
|
+
/** Emits when the item is clicked (only fires when not disabled). */
|
|
1632
|
+
clicked: _angular_core.OutputEmitterRef<MouseEvent>;
|
|
1633
|
+
/** Roving tabindex managed by the parent AfNavbarComponent. */
|
|
1634
|
+
rovingTabindex: _angular_core.WritableSignal<number>;
|
|
1635
|
+
linkRef: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
|
|
1636
|
+
/** Focus the link or button element. */
|
|
1637
|
+
focusLink(): void;
|
|
1638
|
+
onClick(event: MouseEvent): void;
|
|
1639
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfNavItemComponent, never>;
|
|
1640
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfNavItemComponent, "af-nav-item", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, never, true, never>;
|
|
1641
|
+
}
|
|
1642
|
+
/**
|
|
1643
|
+
* Responsive navbar with mobile menu, keyboard navigation, and ARIA landmarks.
|
|
1644
|
+
*
|
|
1645
|
+
* @example
|
|
1646
|
+
* <af-navbar ariaLabel="Main navigation">
|
|
1647
|
+
* <a brand class="ct-navbar__brand" href="/">My App</a>
|
|
1648
|
+
* <af-nav-item label="Dashboard" href="/dashboard" [active]="true" />
|
|
1649
|
+
* <af-nav-item label="Settings" href="/settings" />
|
|
1650
|
+
* <button actions class="ct-button">Profile</button>
|
|
1651
|
+
* </af-navbar>
|
|
1652
|
+
*/
|
|
1653
|
+
declare class AfNavbarComponent {
|
|
1654
|
+
private componentId;
|
|
1655
|
+
private hostEl;
|
|
1656
|
+
/** Size variant of the navbar. */
|
|
1657
|
+
size: _angular_core.InputSignal<AfNavbarSize>;
|
|
1658
|
+
/** Visual variant of the navbar. */
|
|
1659
|
+
variant: _angular_core.InputSignal<AfNavbarVariant>;
|
|
1660
|
+
/** Center the navigation items. */
|
|
1661
|
+
center: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1662
|
+
/** Accessible label for the navigation landmark. */
|
|
1663
|
+
ariaLabel: _angular_core.InputSignal<string>;
|
|
1664
|
+
/** Projected nav item children. */
|
|
1665
|
+
items: _angular_core.Signal<readonly AfNavItemComponent[]>;
|
|
1666
|
+
/** Whether the mobile menu is currently open. */
|
|
1667
|
+
mobileMenuOpen: _angular_core.WritableSignal<boolean>;
|
|
1668
|
+
readonly mobileMenuId: string;
|
|
1669
|
+
private focusedIndex;
|
|
1670
|
+
private toggleRef;
|
|
1671
|
+
private mobileLinks;
|
|
1672
|
+
navbarClasses: _angular_core.Signal<string>;
|
|
1673
|
+
/** Manage roving tabindex across child nav items. */
|
|
1674
|
+
private rovingTabindexEffect;
|
|
1675
|
+
/** Toggle mobile menu open/closed and auto-focus the first enabled item. */
|
|
1676
|
+
toggleMobileMenu(): void;
|
|
1677
|
+
onMobileItemClick(event: MouseEvent, item: AfNavItemComponent): void;
|
|
1678
|
+
onDocumentClick(event: Event): void;
|
|
1679
|
+
handleKeydown(event: KeyboardEvent): void;
|
|
1680
|
+
private handleDesktopKeydown;
|
|
1681
|
+
private handleMobileKeydown;
|
|
1682
|
+
private isMobileMenuTarget;
|
|
1683
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfNavbarComponent, never>;
|
|
1684
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfNavbarComponent, "af-navbar", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "center": { "alias": "center"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, ["items"], ["[brand]", "*", "[actions]"], true, never>;
|
|
1685
|
+
}
|
|
1686
|
+
|
|
1687
|
+
type AfPopoverPosition = 'top' | 'bottom' | 'left' | 'right';
|
|
1688
|
+
type AfPopoverAlign = 'start' | 'center' | 'end';
|
|
1689
|
+
type AfPopoverSize = 'sm' | 'md' | 'lg';
|
|
1690
|
+
/** @internal API surface exposed to the trigger directive. */
|
|
1691
|
+
interface AfPopoverApi {
|
|
1692
|
+
toggle(): void;
|
|
1693
|
+
open: Signal<boolean>;
|
|
1694
|
+
contentId: string;
|
|
1695
|
+
}
|
|
1696
|
+
/**
|
|
1697
|
+
* Marks the trigger element for an `af-popover`.
|
|
1698
|
+
* Automatically sets ARIA attributes and toggles on click.
|
|
1699
|
+
*
|
|
1700
|
+
* @example
|
|
1701
|
+
* ```html
|
|
1702
|
+
* <af-popover>
|
|
1703
|
+
* <button afPopoverTrigger>Open</button>
|
|
1704
|
+
* ...
|
|
1705
|
+
* </af-popover>
|
|
1706
|
+
* ```
|
|
1707
|
+
*/
|
|
1708
|
+
declare class AfPopoverTriggerDirective {
|
|
1709
|
+
/** @internal */
|
|
1710
|
+
readonly popover: AfPopoverApi;
|
|
1711
|
+
/** @internal */
|
|
1712
|
+
readonly elementRef: ElementRef<any>;
|
|
1713
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfPopoverTriggerDirective, never>;
|
|
1714
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AfPopoverTriggerDirective, "[afPopoverTrigger]", never, {}, {}, never, never, true, never>;
|
|
1715
|
+
}
|
|
1716
|
+
/**
|
|
1717
|
+
* Popover with configurable positioning, auto-flip, focus management,
|
|
1718
|
+
* and full ARIA support.
|
|
1719
|
+
*
|
|
1720
|
+
* @example
|
|
1721
|
+
* ```html
|
|
1722
|
+
* <af-popover position="bottom" align="center" title="Info">
|
|
1723
|
+
* <button afPopoverTrigger>More info</button>
|
|
1724
|
+
* <p>Some helpful content.</p>
|
|
1725
|
+
* </af-popover>
|
|
1726
|
+
* ```
|
|
1727
|
+
*/
|
|
1728
|
+
declare class AfPopoverComponent implements AfPopoverApi, OnDestroy {
|
|
1729
|
+
private static nextId;
|
|
1730
|
+
/** Two-way bindable open state. */
|
|
1731
|
+
open: _angular_core.ModelSignal<boolean>;
|
|
1732
|
+
/** Preferred position relative to the trigger. Flips automatically when space is insufficient. */
|
|
1733
|
+
position: _angular_core.InputSignal<AfPopoverPosition>;
|
|
1734
|
+
/** Alignment along the position axis. */
|
|
1735
|
+
align: _angular_core.InputSignal<AfPopoverAlign>;
|
|
1736
|
+
/** Size variant (`sm` = 240px, `md` = default, `lg` = 480px). */
|
|
1737
|
+
size: _angular_core.InputSignal<AfPopoverSize>;
|
|
1738
|
+
/** Title displayed in the header section. */
|
|
1739
|
+
title: _angular_core.InputSignal<string>;
|
|
1740
|
+
/** Accessible label (overrides `aria-labelledby` from title). */
|
|
1741
|
+
ariaLabel: _angular_core.InputSignal<string>;
|
|
1742
|
+
/** Whether to show the decorative arrow. */
|
|
1743
|
+
showArrow: _angular_core.InputSignal<boolean>;
|
|
1744
|
+
/** Whether clicking outside closes the popover. */
|
|
1745
|
+
closeOnClickOutside: _angular_core.InputSignal<boolean>;
|
|
1746
|
+
/** Emits when the popover closes. */
|
|
1747
|
+
closed: _angular_core.OutputEmitterRef<void>;
|
|
1748
|
+
readonly contentId: string;
|
|
1749
|
+
readonly headerId: string;
|
|
1750
|
+
private wrapperRef;
|
|
1751
|
+
private contentRef;
|
|
1752
|
+
private triggerDirective;
|
|
1753
|
+
private previousActiveElement;
|
|
1754
|
+
private focusableElements;
|
|
1755
|
+
private flippedSide;
|
|
1756
|
+
/** Effective side after auto-flip evaluation. */
|
|
1757
|
+
activeSide: Signal<AfPopoverPosition>;
|
|
1758
|
+
containerClasses: Signal<string>;
|
|
1759
|
+
private openEffect;
|
|
1760
|
+
ngOnDestroy(): void;
|
|
1761
|
+
/** Toggle the popover open state. */
|
|
1762
|
+
toggle(): void;
|
|
1763
|
+
/** Close the popover and emit the `closed` event. */
|
|
1764
|
+
close(): void;
|
|
1765
|
+
onDocumentClick(event: MouseEvent): void;
|
|
1766
|
+
onEscapeKey(): void;
|
|
1767
|
+
onKeydown(event: KeyboardEvent): void;
|
|
1768
|
+
private onOpen;
|
|
1769
|
+
private onClose;
|
|
1770
|
+
private restoreFocus;
|
|
1771
|
+
private trapFocus;
|
|
1772
|
+
private computeFlippedSide;
|
|
1773
|
+
private refreshFocusableElements;
|
|
1774
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfPopoverComponent, never>;
|
|
1775
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfPopoverComponent, "af-popover", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "showArrow": { "alias": "showArrow"; "required": false; "isSignal": true; }; "closeOnClickOutside": { "alias": "closeOnClickOutside"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "closed": "closed"; }, ["triggerDirective"], ["[afPopoverTrigger]", "[body]", "*"], true, never>;
|
|
1776
|
+
}
|
|
1777
|
+
|
|
1778
|
+
/** Semantic variants controlling colors and ARIA behavior */
|
|
1779
|
+
type AfBannerVariant = 'info' | 'warning' | 'danger' | 'success' | 'neutral';
|
|
1780
|
+
/** Visual appearance styles */
|
|
1781
|
+
type AfBannerAppearance = 'subtle' | 'solid' | 'left-accent' | 'top-accent';
|
|
1782
|
+
/** Positioning strategies */
|
|
1783
|
+
type AfBannerPosition = 'inline' | 'fixed-top' | 'fixed-bottom' | 'sticky';
|
|
1784
|
+
/**
|
|
1785
|
+
* Persistent page- or section-level notice component.
|
|
1786
|
+
* Wraps the `ct-banner` design system component with dismiss logic,
|
|
1787
|
+
* optional auto-close timer, and ARIA live region support.
|
|
1788
|
+
*
|
|
1789
|
+
* Uses attribute-based content projection for icon, heading, message,
|
|
1790
|
+
* and actions slots. The component automatically applies the correct
|
|
1791
|
+
* `ct-banner__*` CSS wrapper classes.
|
|
1792
|
+
*
|
|
1793
|
+
* @example
|
|
1794
|
+
* ```html
|
|
1795
|
+
* <af-banner variant="warning" [dismissible]="true" (dismissed)="onDismissed()">
|
|
1796
|
+
* <span icon>⚠️</span>
|
|
1797
|
+
* <span heading>Attention</span>
|
|
1798
|
+
* <span message>Something needs your attention.</span>
|
|
1799
|
+
* <div actions>
|
|
1800
|
+
* <button class="ct-button ct-button--sm">Fix now</button>
|
|
1801
|
+
* </div>
|
|
1802
|
+
* </af-banner>
|
|
1803
|
+
* ```
|
|
1804
|
+
*/
|
|
1805
|
+
declare class AfBannerComponent implements OnDestroy {
|
|
1806
|
+
/** Semantic variant controlling colors and ARIA role */
|
|
1807
|
+
variant: _angular_core.InputSignal<AfBannerVariant>;
|
|
1808
|
+
/** Visual appearance style */
|
|
1809
|
+
appearance: _angular_core.InputSignal<AfBannerAppearance>;
|
|
1810
|
+
/** Positioning strategy */
|
|
1811
|
+
position: _angular_core.InputSignal<AfBannerPosition>;
|
|
1812
|
+
/** Whether the banner displays a close/dismiss button */
|
|
1813
|
+
dismissible: _angular_core.InputSignal<boolean>;
|
|
1814
|
+
/** Compact size mode */
|
|
1815
|
+
compact: _angular_core.InputSignal<boolean>;
|
|
1816
|
+
/** Full-width layout (no radius, no inline border) */
|
|
1817
|
+
full: _angular_core.InputSignal<boolean>;
|
|
1818
|
+
/** Auto-close delay in milliseconds. 0 means no auto-close */
|
|
1819
|
+
autoClose: _angular_core.InputSignal<number>;
|
|
1820
|
+
/** Aria label for the close button */
|
|
1821
|
+
closeAriaLabel: _angular_core.InputSignal<string>;
|
|
1822
|
+
/** Emits when the banner is dismissed (by user or auto-close) */
|
|
1823
|
+
dismissed: _angular_core.OutputEmitterRef<void>;
|
|
1824
|
+
private readonly isDismissed;
|
|
1825
|
+
private autoCloseTimerId;
|
|
1826
|
+
/** Current open/closed state for the data-state attribute */
|
|
1827
|
+
state: _angular_core.Signal<"closed" | "open">;
|
|
1828
|
+
/** ARIA role based on variant: alert for danger/warning, status for others */
|
|
1829
|
+
ariaRole: _angular_core.Signal<"alert" | "status">;
|
|
1830
|
+
/** Computed CSS class string for the banner element */
|
|
1831
|
+
hostClasses: _angular_core.Signal<string>;
|
|
1832
|
+
private autoCloseEffect;
|
|
1833
|
+
ngOnDestroy(): void;
|
|
1834
|
+
/** Dismisses the banner and emits the dismissed event */
|
|
1835
|
+
dismiss(): void;
|
|
1836
|
+
private clearAutoCloseTimer;
|
|
1837
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfBannerComponent, never>;
|
|
1838
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfBannerComponent, "af-banner", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "full": { "alias": "full"; "required": false; "isSignal": true; }; "autoClose": { "alias": "autoClose"; "required": false; "isSignal": true; }; "closeAriaLabel": { "alias": "closeAriaLabel"; "required": false; "isSignal": true; }; }, { "dismissed": "dismissed"; }, never, ["[icon]", "[heading]", "[message]", "*", "[actions]"], true, never>;
|
|
1839
|
+
}
|
|
1840
|
+
|
|
1841
|
+
/**
|
|
1842
|
+
* Skip-link component for keyboard-only navigation bypass.
|
|
1843
|
+
*
|
|
1844
|
+
* Renders an anchor that is visually hidden off-screen and slides into view
|
|
1845
|
+
* when focused. On activation it moves focus to the target element, allowing
|
|
1846
|
+
* keyboard users to skip repetitive navigation blocks.
|
|
1847
|
+
*
|
|
1848
|
+
* Must be placed as the first focusable element in the document.
|
|
1849
|
+
*
|
|
1850
|
+
* @example
|
|
1851
|
+
* <af-skip-link target="main-content" />
|
|
1852
|
+
* <nav>…</nav>
|
|
1853
|
+
* <main id="main-content" tabindex="-1">…</main>
|
|
1854
|
+
*/
|
|
1855
|
+
declare class AfSkipLinkComponent {
|
|
1856
|
+
/** ID of the element to skip to (without the leading `#`). */
|
|
1857
|
+
target: _angular_core.InputSignal<string>;
|
|
1858
|
+
/** Visible label text shown when the link receives focus. */
|
|
1859
|
+
label: _angular_core.InputSignal<string>;
|
|
1860
|
+
private readonly document;
|
|
1861
|
+
/**
|
|
1862
|
+
* Moves focus to the target element so keyboard navigation
|
|
1863
|
+
* continues from there instead of the top of the page.
|
|
1864
|
+
*/
|
|
1865
|
+
focusTarget(event: Event): void;
|
|
1866
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfSkipLinkComponent, never>;
|
|
1867
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfSkipLinkComponent, "af-skip-link", never, { "target": { "alias": "target"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1868
|
+
}
|
|
1869
|
+
|
|
1870
|
+
type AfEmptyStateSize = 'sm' | 'md' | 'lg';
|
|
1871
|
+
type AfEmptyStateVariant = 'default' | 'error';
|
|
1872
|
+
/**
|
|
1873
|
+
* Empty state component for displaying placeholder content when no data is available.
|
|
1874
|
+
*
|
|
1875
|
+
* Supports content projection for icon, title, description, and actions.
|
|
1876
|
+
* Alternatively, use the `icon` input for simple text/emoji icons.
|
|
1877
|
+
*
|
|
1878
|
+
* @example
|
|
1879
|
+
* <af-empty-state variant="default" size="md" [bordered]="true">
|
|
1880
|
+
* <span icon>📦</span>
|
|
1881
|
+
* <span title>No items found</span>
|
|
1882
|
+
* <span description>Try adjusting your search or filter criteria.</span>
|
|
1883
|
+
* <div actions>
|
|
1884
|
+
* <button class="ct-button ct-button--primary">Add Item</button>
|
|
1885
|
+
* </div>
|
|
1886
|
+
* </af-empty-state>
|
|
1887
|
+
*
|
|
1888
|
+
* @example
|
|
1889
|
+
* <af-empty-state icon="🔍" variant="error">
|
|
1890
|
+
* <span title>Search failed</span>
|
|
1891
|
+
* <span description>An error occurred while searching.</span>
|
|
1892
|
+
* </af-empty-state>
|
|
1893
|
+
*/
|
|
1894
|
+
declare class AfEmptyStateComponent {
|
|
1895
|
+
/** Size variant controlling icon size, padding, and font sizes */
|
|
1896
|
+
size: _angular_core.InputSignal<AfEmptyStateSize>;
|
|
1897
|
+
/** Visual variant — `error` highlights icon and title in danger color */
|
|
1898
|
+
variant: _angular_core.InputSignal<AfEmptyStateVariant>;
|
|
1899
|
+
/** Whether to display a dashed border around the empty state */
|
|
1900
|
+
bordered: _angular_core.InputSignal<boolean>;
|
|
1901
|
+
/** Icon character or emoji to display (alternative to icon content projection) */
|
|
1902
|
+
icon: _angular_core.InputSignal<string>;
|
|
1903
|
+
containerClasses: _angular_core.Signal<string>;
|
|
1904
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfEmptyStateComponent, never>;
|
|
1905
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfEmptyStateComponent, "af-empty-state", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, ["[icon]", "[title]", "[description]", "[actions]"], true, never>;
|
|
1906
|
+
}
|
|
1907
|
+
|
|
1908
|
+
type AfSkeletonVariant = 'text' | 'title' | 'avatar' | 'rect';
|
|
1909
|
+
/**
|
|
1910
|
+
* Skeleton placeholder component for loading states.
|
|
1911
|
+
* Renders animated placeholders while content is loading.
|
|
1912
|
+
*
|
|
1913
|
+
* @example
|
|
1914
|
+
* <af-skeleton variant="text" count="3"></af-skeleton>
|
|
1915
|
+
* <af-skeleton variant="avatar"></af-skeleton>
|
|
1916
|
+
* <af-skeleton variant="rect" width="200px" height="120px"></af-skeleton>
|
|
1917
|
+
*/
|
|
1918
|
+
declare class AfSkeletonComponent {
|
|
1919
|
+
/** Visual variant of the skeleton placeholder */
|
|
1920
|
+
variant: _angular_core.InputSignal<AfSkeletonVariant>;
|
|
1921
|
+
/** Custom width (CSS value, e.g. '200px', '50%') */
|
|
1922
|
+
width: _angular_core.InputSignal<string | undefined>;
|
|
1923
|
+
/** Custom height (CSS value, e.g. '100px', '2em') */
|
|
1924
|
+
height: _angular_core.InputSignal<string | undefined>;
|
|
1925
|
+
/** Number of skeleton lines to render */
|
|
1926
|
+
count: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
1927
|
+
/** Accessible label for screen readers */
|
|
1928
|
+
label: _angular_core.InputSignal<string>;
|
|
1929
|
+
items: _angular_core.Signal<unknown[]>;
|
|
1930
|
+
skeletonClasses: _angular_core.Signal<string>;
|
|
1931
|
+
skeletonStyle: _angular_core.Signal<string | null>;
|
|
1932
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfSkeletonComponent, never>;
|
|
1933
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfSkeletonComponent, "af-skeleton", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "count": { "alias": "count"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1934
|
+
}
|
|
1935
|
+
|
|
1936
|
+
type AfDividerOrientation = 'horizontal' | 'vertical';
|
|
1937
|
+
type AfDividerColor = 'default' | 'strong' | 'muted';
|
|
1938
|
+
type AfDividerSpacing = 'sm' | 'md' | 'lg' | 'none';
|
|
1939
|
+
/**
|
|
1940
|
+
* Divider component for visually separating content sections.
|
|
1941
|
+
*
|
|
1942
|
+
* @example
|
|
1943
|
+
* <af-divider />
|
|
1944
|
+
* <af-divider orientation="vertical" />
|
|
1945
|
+
* <af-divider color="strong" spacing="lg" />
|
|
1946
|
+
* <af-divider label="Section" />
|
|
1947
|
+
*/
|
|
1948
|
+
declare class AfDividerComponent {
|
|
1949
|
+
/** Orientation of the divider. */
|
|
1950
|
+
orientation: _angular_core.InputSignal<AfDividerOrientation>;
|
|
1951
|
+
/** Color variant of the divider line. */
|
|
1952
|
+
color: _angular_core.InputSignal<AfDividerColor>;
|
|
1953
|
+
/** Spacing around the divider. */
|
|
1954
|
+
spacing: _angular_core.InputSignal<AfDividerSpacing>;
|
|
1955
|
+
/** Optional label text displayed in the center of the divider. */
|
|
1956
|
+
label: _angular_core.InputSignal<string>;
|
|
1957
|
+
dividerClasses: _angular_core.Signal<string>;
|
|
1958
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfDividerComponent, never>;
|
|
1959
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfDividerComponent, "af-divider", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "spacing": { "alias": "spacing"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1960
|
+
}
|
|
1961
|
+
|
|
1962
|
+
/**
|
|
1963
|
+
* Form field wrapper that binds label, hint, and error message to a projected form control.
|
|
1964
|
+
*
|
|
1965
|
+
* Automatically links the label via `for`/`id` and sets `aria-describedby`
|
|
1966
|
+
* and `aria-invalid` on the first interactive element found inside the projection.
|
|
1967
|
+
*
|
|
1968
|
+
* @example
|
|
1969
|
+
* <af-field label="Email" hint="We will not share this.">
|
|
1970
|
+
* <input class="ct-input" type="email" />
|
|
1971
|
+
* </af-field>
|
|
1972
|
+
*
|
|
1973
|
+
* @example
|
|
1974
|
+
* <af-field label="Name" [error]="nameError" required>
|
|
1975
|
+
* <input class="ct-input" />
|
|
1976
|
+
* </af-field>
|
|
1977
|
+
*/
|
|
1978
|
+
declare class AfFieldComponent implements AfterContentInit, AfterContentChecked {
|
|
1979
|
+
private static nextId;
|
|
1980
|
+
/** Field label text */
|
|
1981
|
+
label: _angular_core.InputSignal<string>;
|
|
1982
|
+
/** Hint text shown below the control */
|
|
1983
|
+
hint: _angular_core.InputSignal<string>;
|
|
1984
|
+
/** Error message — replaces hint and marks the control as invalid */
|
|
1985
|
+
error: _angular_core.InputSignal<string>;
|
|
1986
|
+
/** Whether the field is required (appends visual indicator to label) */
|
|
1987
|
+
required: _angular_core.InputSignal<boolean>;
|
|
1988
|
+
/** Unique ID applied to the projected control, auto-generated if omitted */
|
|
1989
|
+
fieldId: _angular_core.InputSignal<string>;
|
|
1990
|
+
hintId: _angular_core.Signal<string>;
|
|
1991
|
+
errorId: _angular_core.Signal<string>;
|
|
1992
|
+
private elementRef;
|
|
1993
|
+
private controlEl;
|
|
1994
|
+
ngAfterContentInit(): void;
|
|
1995
|
+
ngAfterContentChecked(): void;
|
|
1996
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfFieldComponent, never>;
|
|
1997
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfFieldComponent, "af-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "fieldId": { "alias": "fieldId"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
1998
|
+
}
|
|
1999
|
+
|
|
2000
|
+
type AfTableVariant = 'default' | 'striped' | 'bordered';
|
|
2001
|
+
type AfTableCellType = 'text' | 'numeric' | 'checkbox' | 'actions';
|
|
2002
|
+
/**
|
|
2003
|
+
* Lightweight table container wrapping the Construct Design System table styles.
|
|
2004
|
+
*
|
|
2005
|
+
* @example
|
|
2006
|
+
* <af-table variant="striped" caption="Team members">
|
|
2007
|
+
* <af-table-header>
|
|
2008
|
+
* <af-table-row>
|
|
2009
|
+
* <af-table-header-cell>Name</af-table-header-cell>
|
|
2010
|
+
* <af-table-header-cell type="numeric">Age</af-table-header-cell>
|
|
2011
|
+
* </af-table-row>
|
|
2012
|
+
* </af-table-header>
|
|
2013
|
+
* <af-table-body>
|
|
2014
|
+
* <af-table-row>
|
|
2015
|
+
* <af-table-cell>Alice</af-table-cell>
|
|
2016
|
+
* <af-table-cell type="numeric">30</af-table-cell>
|
|
2017
|
+
* </af-table-row>
|
|
2018
|
+
* </af-table-body>
|
|
2019
|
+
* </af-table>
|
|
2020
|
+
*/
|
|
2021
|
+
declare class AfTableComponent {
|
|
2022
|
+
/** Visual variant of the table. */
|
|
2023
|
+
variant: _angular_core.InputSignal<AfTableVariant>;
|
|
2024
|
+
/** Use compact cell padding. */
|
|
2025
|
+
compact: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2026
|
+
/** Accessible caption rendered as a `<caption>` element. */
|
|
2027
|
+
caption: _angular_core.InputSignal<string>;
|
|
2028
|
+
tableClasses: _angular_core.Signal<string>;
|
|
2029
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfTableComponent, never>;
|
|
2030
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfTableComponent, "af-table", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
2031
|
+
}
|
|
2032
|
+
/**
|
|
2033
|
+
* Table header section rendering a semantic `<thead>` element.
|
|
2034
|
+
*
|
|
2035
|
+
* @example
|
|
2036
|
+
* <af-table-header>
|
|
2037
|
+
* <af-table-row>
|
|
2038
|
+
* <af-table-header-cell>Column</af-table-header-cell>
|
|
2039
|
+
* </af-table-row>
|
|
2040
|
+
* </af-table-header>
|
|
2041
|
+
*/
|
|
2042
|
+
declare class AfTableHeaderComponent {
|
|
2043
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfTableHeaderComponent, never>;
|
|
2044
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfTableHeaderComponent, "af-table-header", never, {}, {}, never, ["*"], true, never>;
|
|
2045
|
+
}
|
|
2046
|
+
/**
|
|
2047
|
+
* Table body section rendering a semantic `<tbody>` element.
|
|
2048
|
+
*
|
|
2049
|
+
* @example
|
|
2050
|
+
* <af-table-body>
|
|
2051
|
+
* <af-table-row>
|
|
2052
|
+
* <af-table-cell>Data</af-table-cell>
|
|
2053
|
+
* </af-table-row>
|
|
2054
|
+
* </af-table-body>
|
|
2055
|
+
*/
|
|
2056
|
+
declare class AfTableBodyComponent {
|
|
2057
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfTableBodyComponent, never>;
|
|
2058
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfTableBodyComponent, "af-table-body", never, {}, {}, never, ["*"], true, never>;
|
|
2059
|
+
}
|
|
2060
|
+
/**
|
|
2061
|
+
* Table row rendering a semantic `<tr>` element.
|
|
2062
|
+
*/
|
|
2063
|
+
declare class AfTableRowComponent {
|
|
2064
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfTableRowComponent, never>;
|
|
2065
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfTableRowComponent, "af-table-row", never, {}, {}, never, ["*"], true, never>;
|
|
2066
|
+
}
|
|
2067
|
+
/**
|
|
2068
|
+
* Header cell rendering a semantic `<th>` element.
|
|
2069
|
+
*
|
|
2070
|
+
* @example
|
|
2071
|
+
* <af-table-header>
|
|
2072
|
+
* <af-table-row>
|
|
2073
|
+
* <af-table-header-cell>Name</af-table-header-cell>
|
|
2074
|
+
* <af-table-header-cell type="numeric">Age</af-table-header-cell>
|
|
2075
|
+
* </af-table-row>
|
|
2076
|
+
* </af-table-header>
|
|
2077
|
+
*/
|
|
2078
|
+
declare class AfTableHeaderCellComponent {
|
|
2079
|
+
/** Cell type for specialized styling (numeric, checkbox, actions). */
|
|
2080
|
+
type: _angular_core.InputSignal<AfTableCellType>;
|
|
2081
|
+
/** Scope attribute for the header cell. */
|
|
2082
|
+
scope: _angular_core.InputSignal<"col" | "row">;
|
|
2083
|
+
cellClasses: _angular_core.Signal<string>;
|
|
2084
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfTableHeaderCellComponent, never>;
|
|
2085
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfTableHeaderCellComponent, "af-table-header-cell", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "scope": { "alias": "scope"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
2086
|
+
}
|
|
2087
|
+
/**
|
|
2088
|
+
* Data cell rendering a semantic `<td>` element.
|
|
2089
|
+
*
|
|
2090
|
+
* @example
|
|
2091
|
+
* <af-table-body>
|
|
2092
|
+
* <af-table-row>
|
|
2093
|
+
* <af-table-cell>Alice</af-table-cell>
|
|
2094
|
+
* <af-table-cell type="numeric">42</af-table-cell>
|
|
2095
|
+
* </af-table-row>
|
|
2096
|
+
* </af-table-body>
|
|
2097
|
+
*/
|
|
2098
|
+
declare class AfTableCellComponent {
|
|
2099
|
+
/** Cell type for specialized styling (numeric, checkbox, actions). */
|
|
2100
|
+
type: _angular_core.InputSignal<AfTableCellType>;
|
|
2101
|
+
cellClasses: _angular_core.Signal<string>;
|
|
2102
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfTableCellComponent, never>;
|
|
2103
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AfTableCellComponent, "af-table-cell", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
2104
|
+
}
|
|
2105
|
+
|
|
2106
|
+
/**
|
|
2107
|
+
* Transforms snake_case or SCREAMING_SNAKE_CASE strings to Title Case labels.
|
|
2108
|
+
*
|
|
2109
|
+
* @example
|
|
2110
|
+
* {{ 'IN_PROGRESS' | afFormatLabel }} => 'In Progress'
|
|
2111
|
+
* {{ 'pending_review' | afFormatLabel }} => 'Pending Review'
|
|
2112
|
+
* {{ null | afFormatLabel }} => '—'
|
|
2113
|
+
*/
|
|
2114
|
+
declare class AfFormatLabelPipe implements PipeTransform {
|
|
2115
|
+
transform(value: string | null | undefined): string;
|
|
2116
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfFormatLabelPipe, never>;
|
|
2117
|
+
static ɵpipe: _angular_core.ɵɵPipeDeclaration<AfFormatLabelPipe, "afFormatLabel", true>;
|
|
2118
|
+
}
|
|
2119
|
+
|
|
2120
|
+
export { AfAccordionComponent, AfAccordionItemComponent, AfAlertComponent, AfAvatarComponent, AfBadgeComponent, AfBannerComponent, AfBreadcrumbsComponent, AfButtonComponent, AfCardComponent, AfCellDefDirective, AfCheckboxComponent, AfChipInputComponent, AfComboboxComponent, AfDataTableComponent, AfDatepickerComponent, AfDividerComponent, AfDrawerComponent, AfDropdownComponent, AfEmptyStateComponent, AfFieldComponent, AfFileUploadComponent, AfFormatLabelPipe, AfIconComponent, AfInputComponent, AfModalComponent, AfNavItemComponent, AfNavbarComponent, AfPaginationComponent, AfPopoverComponent, AfPopoverTriggerDirective, AfProgressBarComponent, AfRadioComponent, AfSelectComponent, AfSelectMenuComponent, AfSidebarComponent, AfSkeletonComponent, AfSkipLinkComponent, AfSliderComponent, AfSpinnerComponent, AfSwitchComponent, AfTabPanelComponent, AfTableBodyComponent, AfTableCellComponent, AfTableComponent, AfTableHeaderCellComponent, AfTableHeaderComponent, AfTableRowComponent, AfTabsComponent, AfTextareaComponent, AfToastContainerComponent, AfToastService, AfToggleGroupComponent, AfToolbarComponent, AfTooltipDirective };
|
|
2121
|
+
export type { AfAlertVariant, AfAvatarSize, AfAvatarStatus, AfBadgeVariant, AfBannerAppearance, AfBannerPosition, AfBannerVariant, AfBreadcrumb, AfButtonSize, AfButtonType, AfButtonVariant, AfCardElevation, AfCardPadding, AfColumn, AfComboboxOption, AfDataRow, AfDataTableConfig, AfDividerColor, AfDividerOrientation, AfDividerSpacing, AfDrawerPosition, AfDrawerSize, AfDropdownItem, AfEmptyStateSize, AfEmptyStateVariant, AfFileEntry, AfFileValidationError, AfIconSize, AfInputType, AfNavbarSize, AfNavbarVariant, AfPopoverAlign, AfPopoverPosition, AfPopoverSize, AfProgressBarSize, AfProgressBarVariant, AfSelectMenuOption, AfSelectOption, AfSidebarMode, AfSkeletonVariant, AfSliderSize, AfSortDirection, AfSortState, AfSpinnerSize, AfTab, AfTableCellType, AfTableVariant, AfToast, AfToastVariant, AfToggleGroupSize, AfToggleItem, AfTooltipPosition };
|