@truenas/ui-components 0.3.20 → 0.3.22
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.
|
@@ -1,16 +1,17 @@
|
|
|
1
|
+
import * as _truenas_ui_components from '@truenas/ui-components';
|
|
1
2
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import { Signal, InjectionToken, Renderer2, OnDestroy, ElementRef, AfterViewInit, OnInit, TemplateRef, AfterContentInit, Provider, ChangeDetectorRef, PipeTransform, ViewContainerRef, AfterViewChecked, ComponentRef } from '@angular/core';
|
|
3
|
+
import { Signal, InjectionToken, Renderer2, OnDestroy, ElementRef, AfterViewInit, OnInit, TemplateRef, AfterContentInit, Provider, ChangeDetectorRef, TrackByFunction, OnChanges, DoCheck, SimpleChanges, PipeTransform, ViewContainerRef, AfterViewChecked, ComponentRef } from '@angular/core';
|
|
3
4
|
import { ControlValueAccessor, NgControl, AbstractControl } from '@angular/forms';
|
|
4
5
|
import { ComponentHarness, BaseHarnessFilters, HarnessPredicate, TestKey, HarnessLoader } from '@angular/cdk/testing';
|
|
5
6
|
import { SafeHtml, SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
|
|
6
7
|
import { ComponentFixture } from '@angular/core/testing';
|
|
7
|
-
import * as _truenas_ui_components from '@truenas/ui-components';
|
|
8
8
|
import { SelectionModel, DataSource } from '@angular/cdk/collections';
|
|
9
9
|
import * as rxjs from 'rxjs';
|
|
10
|
-
import { Observable } from 'rxjs';
|
|
10
|
+
import { Observable, BehaviorSubject } from 'rxjs';
|
|
11
11
|
import * as i1 from '@angular/cdk/tree';
|
|
12
|
-
import { CdkTree, FlatTreeControl, CdkTreeNode, CdkNestedTreeNode } from '@angular/cdk/tree';
|
|
12
|
+
import { CdkTree, FlatTreeControl, CdkTreeNode, CdkNestedTreeNode, CdkTreeNodeOutletContext, CdkTreeNodeDef } from '@angular/cdk/tree';
|
|
13
13
|
export { FlatTreeControl } from '@angular/cdk/tree';
|
|
14
|
+
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
|
|
14
15
|
import { Overlay } from '@angular/cdk/overlay';
|
|
15
16
|
import { DialogRef, DialogConfig } from '@angular/cdk/dialog';
|
|
16
17
|
import { ComponentType } from '@angular/cdk/portal';
|
|
@@ -210,17 +211,44 @@ interface TnSelectOptionGroup<T = unknown> {
|
|
|
210
211
|
options: TnSelectOption<T>[];
|
|
211
212
|
disabled?: boolean;
|
|
212
213
|
}
|
|
214
|
+
/**
|
|
215
|
+
* A keyboard-navigable row in the open dropdown. Either the synthetic
|
|
216
|
+
* "select all" action (multiple mode with `showSelectAll`) or a real option.
|
|
217
|
+
* Both carry the stable DOM `id` used for `aria-activedescendant`.
|
|
218
|
+
*/
|
|
219
|
+
type TnSelectNavEntry<T> = {
|
|
220
|
+
kind: 'select-all';
|
|
221
|
+
id: string;
|
|
222
|
+
} | {
|
|
223
|
+
kind: 'option';
|
|
224
|
+
option: TnSelectOption<T>;
|
|
225
|
+
id: string;
|
|
226
|
+
};
|
|
213
227
|
declare class TnSelectComponent<T = unknown> implements ControlValueAccessor, OnDestroy {
|
|
214
228
|
options: _angular_core.InputSignal<TnSelectOption<T>[]>;
|
|
215
229
|
optionGroups: _angular_core.InputSignal<TnSelectOptionGroup<T>[]>;
|
|
216
230
|
placeholder: _angular_core.InputSignal<string>;
|
|
217
231
|
/**
|
|
218
|
-
*
|
|
219
|
-
* trigger's `aria-label` instead of the visible `placeholder` — useful in
|
|
232
|
+
* Explicit accessible label for the select trigger. When set, this is used as
|
|
233
|
+
* the trigger's `aria-label` instead of the visible `placeholder` — useful in
|
|
220
234
|
* contexts (e.g. a pager's page-size dropdown) where the placeholder text
|
|
221
|
-
* doesn't accurately describe the field's purpose to screen readers.
|
|
235
|
+
* doesn't accurately describe the field's purpose to screen readers. Inside a
|
|
236
|
+
* `tn-form-field` the field's label is associated automatically (via
|
|
237
|
+
* `aria-labelledby`) and takes precedence over the placeholder fallback;
|
|
238
|
+
* setting this overrides both.
|
|
222
239
|
*/
|
|
223
240
|
ariaLabel: _angular_core.InputSignal<string | undefined>;
|
|
241
|
+
/**
|
|
242
|
+
* ARIA wiring from an enclosing `tn-form-field` (label, error/hint,
|
|
243
|
+
* invalid, required). All-null when standalone or when `ariaLabel` overrides.
|
|
244
|
+
*/
|
|
245
|
+
protected readonly fieldAria: _truenas_ui_components.TnFormFieldAriaBindings;
|
|
246
|
+
/**
|
|
247
|
+
* `aria-label` for the trigger. An explicit `ariaLabel` always wins; the
|
|
248
|
+
* `placeholder` fallback only applies while no form-field label is wired via
|
|
249
|
+
* `aria-labelledby`, so the trigger never advertises two names at once.
|
|
250
|
+
*/
|
|
251
|
+
protected triggerAriaLabel: _angular_core.Signal<string | null>;
|
|
224
252
|
/**
|
|
225
253
|
* Message shown inside the dropdown when no options (and no option groups)
|
|
226
254
|
* are available. Defaults to the English `'No options available'`; consumers
|
|
@@ -239,6 +267,16 @@ declare class TnSelectComponent<T = unknown> implements ControlValueAccessor, On
|
|
|
239
267
|
/** Label of the empty option rendered when `allowEmpty` is set. */
|
|
240
268
|
emptyLabel: _angular_core.InputSignal<string>;
|
|
241
269
|
disabled: _angular_core.InputSignal<boolean>;
|
|
270
|
+
/**
|
|
271
|
+
* When `true` (multiple mode only), renders a "select all" row at the top of
|
|
272
|
+
* the dropdown that toggles every selectable (non-disabled) option on/off in
|
|
273
|
+
* one click. Mirrors webui ix-select's `[showSelectAll]`. Ignored in single
|
|
274
|
+
* mode. Its checkbox reflects the aggregate state: checked when all are
|
|
275
|
+
* selected, indeterminate when only some are.
|
|
276
|
+
*/
|
|
277
|
+
showSelectAll: _angular_core.InputSignal<boolean>;
|
|
278
|
+
/** Label of the select-all row rendered when `showSelectAll` is set. */
|
|
279
|
+
selectAllLabel: _angular_core.InputSignal<string>;
|
|
242
280
|
testId: _angular_core.InputSignal<TnTestIdValue>;
|
|
243
281
|
/** Test-id base, falling back to the bound control name when `testId` is unset. */
|
|
244
282
|
protected resolvedTestId: _angular_core.Signal<TnTestIdValue>;
|
|
@@ -310,10 +348,7 @@ declare class TnSelectComponent<T = unknown> implements ControlValueAccessor, On
|
|
|
310
348
|
* then groups). Used by keyboard navigation so we can skip disabled
|
|
311
349
|
* entries and group headers without a separate filter pass.
|
|
312
350
|
*/
|
|
313
|
-
navigableOptions: _angular_core.Signal<
|
|
314
|
-
option: TnSelectOption<T>;
|
|
315
|
-
id: string;
|
|
316
|
-
}[]>;
|
|
351
|
+
navigableOptions: _angular_core.Signal<TnSelectNavEntry<T>[]>;
|
|
317
352
|
/** Stable DOM id of the currently-highlighted option, for aria-activedescendant. */
|
|
318
353
|
focusedOptionId: _angular_core.Signal<string | null>;
|
|
319
354
|
/** Stable DOM id for an option; matches what navigableOptions() assigns. */
|
|
@@ -383,6 +418,39 @@ declare class TnSelectComponent<T = unknown> implements ControlValueAccessor, On
|
|
|
383
418
|
protected displayText: _angular_core.Signal<string>;
|
|
384
419
|
private findOptionByValue;
|
|
385
420
|
protected hasAnyOptions: _angular_core.Signal<boolean>;
|
|
421
|
+
/**
|
|
422
|
+
* Values of every selectable (non-disabled) option, across ungrouped options
|
|
423
|
+
* and enabled groups. This is the set the select-all row operates on —
|
|
424
|
+
* disabled options and options in disabled groups are excluded because they
|
|
425
|
+
* can't be toggled individually either.
|
|
426
|
+
*
|
|
427
|
+
* Values are deduped with `compareValues` so a value that appears both
|
|
428
|
+
* ungrouped and inside a group isn't pushed twice — that would make
|
|
429
|
+
* select-all diverge from `toggleOption()`, which never produces duplicates.
|
|
430
|
+
*/
|
|
431
|
+
protected selectableValues: _angular_core.Signal<T[]>;
|
|
432
|
+
/** Whether the select-all row is shown (multiple mode, opted in, with options). */
|
|
433
|
+
protected showSelectAllRow: _angular_core.Signal<boolean>;
|
|
434
|
+
/** Stable DOM id of the select-all row, for aria-activedescendant. */
|
|
435
|
+
protected selectAllId: _angular_core.Signal<string>;
|
|
436
|
+
/** True when every selectable option is currently selected. */
|
|
437
|
+
protected allSelected: _angular_core.Signal<boolean>;
|
|
438
|
+
/** True when some — but not all — selectable options are selected. */
|
|
439
|
+
protected selectAllIndeterminate: _angular_core.Signal<boolean>;
|
|
440
|
+
/** Test-id segments for the select-all row; mirrors ix-select's `[name, 'select-all']`. */
|
|
441
|
+
protected selectAllTestIdParts(): (string | number | null | undefined)[];
|
|
442
|
+
/**
|
|
443
|
+
* Toggles every selectable option: clears them all when they're all already
|
|
444
|
+
* selected, otherwise selects them all. Preserves the multi-select "open"
|
|
445
|
+
* behaviour — the dropdown stays open so the user can keep adjusting.
|
|
446
|
+
*
|
|
447
|
+
* Disabled-but-selected values (e.g. a disabled option pre-selected via
|
|
448
|
+
* `writeValue`) are preserved on both paths: the user can't toggle those
|
|
449
|
+
* rows individually, so select-all must not silently discard them either.
|
|
450
|
+
*/
|
|
451
|
+
protected toggleSelectAll(): void;
|
|
452
|
+
/** Whether the select-all row is the keyboard-highlighted item. */
|
|
453
|
+
protected isSelectAllFocused(): boolean;
|
|
386
454
|
/** One-shot guard so the object-compare warning fires at most once per instance. */
|
|
387
455
|
private warnedAboutObjectCompare;
|
|
388
456
|
/**
|
|
@@ -422,7 +490,7 @@ declare class TnSelectComponent<T = unknown> implements ControlValueAccessor, On
|
|
|
422
490
|
private activateFocusedOption;
|
|
423
491
|
private scrollFocusedIntoView;
|
|
424
492
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnSelectComponent<any>, never>;
|
|
425
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnSelectComponent<any>, "tn-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionGroups": { "alias": "optionGroups"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "noOptionsLabel": { "alias": "noOptionsLabel"; "required": false; "isSignal": true; }; "allowEmpty": { "alias": "allowEmpty"; "required": false; "isSignal": true; }; "emptyLabel": { "alias": "emptyLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "optionTestIdKey": { "alias": "optionTestIdKey"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "multiSelectionChange": "multiSelectionChange"; }, never, never, true, never>;
|
|
493
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnSelectComponent<any>, "tn-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionGroups": { "alias": "optionGroups"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "noOptionsLabel": { "alias": "noOptionsLabel"; "required": false; "isSignal": true; }; "allowEmpty": { "alias": "allowEmpty"; "required": false; "isSignal": true; }; "emptyLabel": { "alias": "emptyLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showSelectAll": { "alias": "showSelectAll"; "required": false; "isSignal": true; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "optionTestIdKey": { "alias": "optionTestIdKey"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "multiSelectionChange": "multiSelectionChange"; }, never, never, true, never>;
|
|
426
494
|
}
|
|
427
495
|
|
|
428
496
|
/**
|
|
@@ -493,8 +561,21 @@ declare class TnAutocompleteComponent<T = unknown> implements ControlValueAccess
|
|
|
493
561
|
* custom property so it can also be themed in CSS.
|
|
494
562
|
*/
|
|
495
563
|
panelMaxHeight: _angular_core.InputSignal<string | number>;
|
|
564
|
+
/**
|
|
565
|
+
* Explicit accessible name for the text field. Inside a `tn-form-field` the
|
|
566
|
+
* field's label is associated automatically (via `aria-labelledby`), so leave
|
|
567
|
+
* this unset there unless the announced name must differ from the visible
|
|
568
|
+
* label — when set, it wins. Standalone without either, the input has no
|
|
569
|
+
* accessible name (the placeholder is not one).
|
|
570
|
+
*/
|
|
571
|
+
ariaLabel: _angular_core.InputSignal<string | undefined>;
|
|
496
572
|
/** Test ID attribute */
|
|
497
573
|
testId: _angular_core.InputSignal<TnTestIdValue>;
|
|
574
|
+
/**
|
|
575
|
+
* ARIA wiring from an enclosing `tn-form-field` (label, error/hint,
|
|
576
|
+
* invalid, required). All-null when standalone or when `ariaLabel` overrides.
|
|
577
|
+
*/
|
|
578
|
+
protected readonly fieldAria: _truenas_ui_components.TnFormFieldAriaBindings;
|
|
498
579
|
/** Emits the full option (label + value) when one is selected */
|
|
499
580
|
optionSelected: _angular_core.OutputEmitterRef<TnAutocompleteOption<T>>;
|
|
500
581
|
/**
|
|
@@ -632,7 +713,7 @@ declare class TnAutocompleteComponent<T = unknown> implements ControlValueAccess
|
|
|
632
713
|
private detachOverlay;
|
|
633
714
|
private scrollToHighlighted;
|
|
634
715
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnAutocompleteComponent<any>, never>;
|
|
635
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnAutocompleteComponent<any>, "tn-autocomplete", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "requireSelection": { "alias": "requireSelection"; "required": false; "isSignal": true; }; "allowCustomValue": { "alias": "allowCustomValue"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "filterFn": { "alias": "filterFn"; "required": false; "isSignal": true; }; "noResultsText": { "alias": "noResultsText"; "required": false; "isSignal": true; }; "maxResults": { "alias": "maxResults"; "required": false; "isSignal": true; }; "panelMaxHeight": { "alias": "panelMaxHeight"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; }, { "optionSelected": "optionSelected"; "searchChange": "searchChange"; "loadMore": "loadMore"; "opened": "opened"; }, never, never, true, never>;
|
|
716
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnAutocompleteComponent<any>, "tn-autocomplete", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "requireSelection": { "alias": "requireSelection"; "required": false; "isSignal": true; }; "allowCustomValue": { "alias": "allowCustomValue"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "filterFn": { "alias": "filterFn"; "required": false; "isSignal": true; }; "noResultsText": { "alias": "noResultsText"; "required": false; "isSignal": true; }; "maxResults": { "alias": "maxResults"; "required": false; "isSignal": true; }; "panelMaxHeight": { "alias": "panelMaxHeight"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; }, { "optionSelected": "optionSelected"; "searchChange": "searchChange"; "loadMore": "loadMore"; "opened": "opened"; }, never, never, true, never>;
|
|
636
717
|
}
|
|
637
718
|
|
|
638
719
|
/**
|
|
@@ -1664,13 +1745,18 @@ declare class TnInputComponent implements AfterViewInit, OnDestroy, ControlValue
|
|
|
1664
1745
|
multiline: _angular_core.InputSignal<boolean>;
|
|
1665
1746
|
rows: _angular_core.InputSignal<number>;
|
|
1666
1747
|
/**
|
|
1667
|
-
*
|
|
1668
|
-
*
|
|
1669
|
-
*
|
|
1670
|
-
*
|
|
1671
|
-
* the a11y tree.
|
|
1748
|
+
* Explicit accessible name for the control. Rendered as `aria-label` on the
|
|
1749
|
+
* input/textarea. Inside a `tn-form-field` the field's label is associated
|
|
1750
|
+
* automatically (via `aria-labelledby`), so leave this unset there unless the
|
|
1751
|
+
* announced name must differ from the visible label — when set, it wins. Set
|
|
1752
|
+
* it for standalone usage so the control isn't unnamed in the a11y tree.
|
|
1672
1753
|
*/
|
|
1673
1754
|
ariaLabel: _angular_core.InputSignal<string | undefined>;
|
|
1755
|
+
/**
|
|
1756
|
+
* ARIA wiring from an enclosing `tn-form-field` (label, error/hint,
|
|
1757
|
+
* invalid, required). All-null when standalone or when `ariaLabel` overrides.
|
|
1758
|
+
*/
|
|
1759
|
+
protected readonly fieldAria: _truenas_ui_components.TnFormFieldAriaBindings;
|
|
1674
1760
|
/**
|
|
1675
1761
|
* Native `autocomplete` hint rendered on the input/textarea. Pass the standard
|
|
1676
1762
|
* autofill tokens (`'username'`, `'current-password'`, `'new-password'`,
|
|
@@ -2676,8 +2762,18 @@ declare class TnChipInputComponent<T = string> implements ControlValueAccessor,
|
|
|
2676
2762
|
* provide this when values are objects (e.g. `(a, b) => a?.id === b?.id`).
|
|
2677
2763
|
*/
|
|
2678
2764
|
compareWith: _angular_core.InputSignal<((a: T | null, b: T | null) => boolean) | undefined>;
|
|
2679
|
-
/**
|
|
2765
|
+
/**
|
|
2766
|
+
* Explicit accessible name for the text field. Inside a `tn-form-field` the
|
|
2767
|
+
* field's label is associated automatically (via `aria-labelledby`), so leave
|
|
2768
|
+
* this unset there unless the announced name must differ from the visible
|
|
2769
|
+
* label — when set, it wins.
|
|
2770
|
+
*/
|
|
2680
2771
|
ariaLabel: _angular_core.InputSignal<string | undefined>;
|
|
2772
|
+
/**
|
|
2773
|
+
* ARIA wiring from an enclosing `tn-form-field` (label, error/hint,
|
|
2774
|
+
* invalid, required). All-null when standalone or when `ariaLabel` overrides.
|
|
2775
|
+
*/
|
|
2776
|
+
protected readonly fieldAria: _truenas_ui_components.TnFormFieldAriaBindings;
|
|
2681
2777
|
/**
|
|
2682
2778
|
* Semantic test-id base. The library prepends the `chip-input` element type
|
|
2683
2779
|
* (e.g. `testId="tags"` → `chip-input-tags`); each chip and suggestion is
|
|
@@ -4445,8 +4541,72 @@ declare class TnKeyboardShortcutComponent {
|
|
|
4445
4541
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnKeyboardShortcutComponent, "tn-keyboard-shortcut", never, { "shortcut": { "alias": "shortcut"; "required": false; "isSignal": true; }; "platform": { "alias": "platform"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
4446
4542
|
}
|
|
4447
4543
|
|
|
4544
|
+
/**
|
|
4545
|
+
* Contract between `tn-form-field` and its projected form control, published
|
|
4546
|
+
* over DI so the control can wire its ARIA attributes to the field's chrome
|
|
4547
|
+
* without the consumer duplicating anything (e.g. re-passing the label as
|
|
4548
|
+
* `ariaLabel`).
|
|
4549
|
+
*
|
|
4550
|
+
* `tn-form-field` provides itself under {@link TN_FORM_FIELD_CONTEXT}; a
|
|
4551
|
+
* projected control injects it optionally (absent when used standalone) and
|
|
4552
|
+
* binds:
|
|
4553
|
+
*
|
|
4554
|
+
* - `aria-labelledby` ← {@link labelId} — the field's visible label names the control
|
|
4555
|
+
* - `aria-describedby` ← {@link describedBy} — the currently shown error or hint
|
|
4556
|
+
* - `aria-invalid` ← {@link errorState} — mirrors the field's visual error state
|
|
4557
|
+
* - `aria-required` ← {@link requiredState} — forced or inferred from validators
|
|
4558
|
+
*
|
|
4559
|
+
* Library controls consume this via {@link injectTnFormFieldAria} rather than
|
|
4560
|
+
* hand-rolling the bindings.
|
|
4561
|
+
*/
|
|
4562
|
+
interface TnFormFieldContext {
|
|
4563
|
+
/** Id of the visible label text, or `null` when the field has no label. */
|
|
4564
|
+
labelId: Signal<string | null>;
|
|
4565
|
+
/** Id of the currently shown error or hint message, or `null` when neither renders. */
|
|
4566
|
+
describedBy: Signal<string | null>;
|
|
4567
|
+
/**
|
|
4568
|
+
* Whether the field currently shows its error state (invalid AND interacted —
|
|
4569
|
+
* the same gate as the visual error message, so `aria-invalid` never fires on
|
|
4570
|
+
* a pristine required field).
|
|
4571
|
+
*/
|
|
4572
|
+
errorState: Signal<boolean>;
|
|
4573
|
+
/** Whether the field is required — forced via input or inferred from validators. */
|
|
4574
|
+
requiredState: Signal<boolean>;
|
|
4575
|
+
}
|
|
4576
|
+
/** DI token under which `tn-form-field` exposes its {@link TnFormFieldContext}. */
|
|
4577
|
+
declare const TN_FORM_FIELD_CONTEXT: InjectionToken<TnFormFieldContext>;
|
|
4578
|
+
/** Ready-to-bind ARIA attribute values derived from an enclosing `tn-form-field`. */
|
|
4579
|
+
interface TnFormFieldAriaBindings {
|
|
4580
|
+
/** Value for `aria-labelledby`; `null` standalone, without a field label, or when `ariaLabel` overrides. */
|
|
4581
|
+
labelledby: Signal<string | null>;
|
|
4582
|
+
/** Value for `aria-describedby`; the shown error/hint id or `null`. */
|
|
4583
|
+
describedby: Signal<string | null>;
|
|
4584
|
+
/** Value for `aria-invalid`; `true` while the field shows an error, else `null` (attribute omitted). */
|
|
4585
|
+
invalid: Signal<true | null>;
|
|
4586
|
+
/** Value for `aria-required`; `true` when the field is required, else `null` (attribute omitted). */
|
|
4587
|
+
required: Signal<true | null>;
|
|
4588
|
+
}
|
|
4589
|
+
/**
|
|
4590
|
+
* Wires a form control to an enclosing `tn-form-field`'s accessibility context.
|
|
4591
|
+
* Must be called in an injection context (field initializer or constructor).
|
|
4592
|
+
*
|
|
4593
|
+
* Standalone usage (no enclosing field) yields all-`null` signals, so the
|
|
4594
|
+
* attribute bindings simply render nothing.
|
|
4595
|
+
*
|
|
4596
|
+
* @param ariaLabel The control's own explicit accessible-name input, when it has
|
|
4597
|
+
* one. While set, it wins: `labelledby` goes `null` so the explicit
|
|
4598
|
+
* `aria-label` is what assistive tech announces.
|
|
4599
|
+
*/
|
|
4600
|
+
declare function injectTnFormFieldAria(ariaLabel?: Signal<string | undefined>): TnFormFieldAriaBindings;
|
|
4601
|
+
|
|
4448
4602
|
type SubscriptSizing = 'fixed' | 'dynamic';
|
|
4449
|
-
declare class TnFormFieldComponent implements AfterContentInit {
|
|
4603
|
+
declare class TnFormFieldComponent implements AfterContentInit, TnFormFieldContext {
|
|
4604
|
+
/** Unique instance id namespacing the label/error/hint ids for ARIA linkage. */
|
|
4605
|
+
private readonly uid;
|
|
4606
|
+
/** Id carried by the error message element (only meaningful while it renders). */
|
|
4607
|
+
protected readonly errorId: string;
|
|
4608
|
+
/** Id carried by the hint element (only meaningful while it renders). */
|
|
4609
|
+
protected readonly hintId: string;
|
|
4450
4610
|
label: _angular_core.InputSignal<string>;
|
|
4451
4611
|
hint: _angular_core.InputSignal<string>;
|
|
4452
4612
|
/**
|
|
@@ -4456,9 +4616,10 @@ declare class TnFormFieldComponent implements AfterContentInit {
|
|
|
4456
4616
|
* see the requirement — e.g. a validator wrapped in `Validators.compose(...)`
|
|
4457
4617
|
* or a custom validator that emits a `required`-style error.
|
|
4458
4618
|
*
|
|
4459
|
-
*
|
|
4460
|
-
*
|
|
4461
|
-
* the native
|
|
4619
|
+
* Library form controls surface this state as `aria-required` automatically
|
|
4620
|
+
* (via {@link TnFormFieldContext}); pairing it with the projected control's
|
|
4621
|
+
* own `required` input (e.g. `tn-input`'s, which renders the native
|
|
4622
|
+
* attribute) additionally blocks native form submission.
|
|
4462
4623
|
*/
|
|
4463
4624
|
required: _angular_core.InputSignal<boolean>;
|
|
4464
4625
|
testId: _angular_core.InputSignal<TnTestIdValue>;
|
|
@@ -4540,6 +4701,18 @@ declare class TnFormFieldComponent implements AfterContentInit {
|
|
|
4540
4701
|
showError: _angular_core.Signal<boolean>;
|
|
4541
4702
|
showHint: _angular_core.Signal<boolean>;
|
|
4542
4703
|
protected showSubscript: _angular_core.Signal<boolean>;
|
|
4704
|
+
/**
|
|
4705
|
+
* Id of the label *text* span — deliberately not the whole `<label>`, so an
|
|
4706
|
+
* `aria-labelledby` pointing here never picks up the required asterisk's
|
|
4707
|
+
* "required" into the accessible name (that state travels as `aria-required`).
|
|
4708
|
+
*/
|
|
4709
|
+
labelId: _angular_core.Signal<string | null>;
|
|
4710
|
+
/** Id of the currently shown error or hint (they are mutually exclusive), or null. */
|
|
4711
|
+
describedBy: _angular_core.Signal<string | null>;
|
|
4712
|
+
/** Mirrors the visual error state (invalid AND interacted) for `aria-invalid`. */
|
|
4713
|
+
errorState: _angular_core.Signal<boolean>;
|
|
4714
|
+
/** Forced or validator-inferred required state, for `aria-required`. */
|
|
4715
|
+
requiredState: _angular_core.Signal<boolean>;
|
|
4543
4716
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnFormFieldComponent, never>;
|
|
4544
4717
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnFormFieldComponent, "tn-form-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; "errorMessages": { "alias": "errorMessages"; "required": false; "isSignal": true; }; }, {}, ["control"], ["*"], true, never>;
|
|
4545
4718
|
}
|
|
@@ -5031,6 +5204,27 @@ declare class TnSelectHarness extends ComponentHarness {
|
|
|
5031
5204
|
* ```
|
|
5032
5205
|
*/
|
|
5033
5206
|
getOptions(): Promise<string[]>;
|
|
5207
|
+
/**
|
|
5208
|
+
* Toggles the select-all row (multiple mode with `showSelectAll`). Opens the
|
|
5209
|
+
* dropdown if needed. Throws when the select-all row isn't present.
|
|
5210
|
+
*
|
|
5211
|
+
* @returns Promise that resolves once the row has been clicked.
|
|
5212
|
+
*
|
|
5213
|
+
* @example
|
|
5214
|
+
* ```typescript
|
|
5215
|
+
* const select = await loader.getHarness(TnSelectHarness);
|
|
5216
|
+
* await select.toggleSelectAll(); // selects every option
|
|
5217
|
+
* await select.toggleSelectAll(); // clears them again
|
|
5218
|
+
* ```
|
|
5219
|
+
*/
|
|
5220
|
+
toggleSelectAll(): Promise<void>;
|
|
5221
|
+
/**
|
|
5222
|
+
* Whether the select-all checkbox reads as fully checked (all options
|
|
5223
|
+
* selected). Opens the dropdown if needed. Throws when the row isn't present.
|
|
5224
|
+
*
|
|
5225
|
+
* @returns Promise resolving to true when every option is selected.
|
|
5226
|
+
*/
|
|
5227
|
+
isSelectAllChecked(): Promise<boolean>;
|
|
5034
5228
|
}
|
|
5035
5229
|
/**
|
|
5036
5230
|
* A set of criteria that can be used to filter a list of `TnSelectHarness` instances.
|
|
@@ -6268,6 +6462,349 @@ declare class TnTreeNodeOutletDirective {
|
|
|
6268
6462
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnTreeNodeOutletDirective, "[tnTreeNodeOutlet]", never, {}, {}, never, never, true, [{ directive: typeof i1.CdkTreeNodeOutlet; inputs: {}; outputs: {}; }]>;
|
|
6269
6463
|
}
|
|
6270
6464
|
|
|
6465
|
+
/**
|
|
6466
|
+
* A single flattened tree node prepared for virtual-scroll rendering.
|
|
6467
|
+
*
|
|
6468
|
+
* `TnTreeVirtualScrollViewComponent` intercepts CDK's `renderNodeChanges` and,
|
|
6469
|
+
* instead of letting the CDK tree insert every visible node into its outlet,
|
|
6470
|
+
* wraps each node in this shape so the node can be materialised on demand by the
|
|
6471
|
+
* `cdk-virtual-scroll-viewport` (only rows in view are created in the DOM).
|
|
6472
|
+
*/
|
|
6473
|
+
interface TnTreeVirtualNodeData<T> {
|
|
6474
|
+
/** The raw data node. */
|
|
6475
|
+
data: T;
|
|
6476
|
+
/** The outlet context (carries `$implicit`, `level`, etc.) for the node template. */
|
|
6477
|
+
context: CdkTreeNodeOutletContext<T>;
|
|
6478
|
+
/** The matched node definition whose template renders this row. */
|
|
6479
|
+
nodeDef: CdkTreeNodeDef<T>;
|
|
6480
|
+
/** 1-based position within the node's SIBLING set (same parent/level), for `aria-posinset`. */
|
|
6481
|
+
posInSet: number;
|
|
6482
|
+
/** Size of the node's SIBLING set (same parent/level), for `aria-setsize`. */
|
|
6483
|
+
setSize: number;
|
|
6484
|
+
}
|
|
6485
|
+
|
|
6486
|
+
/** Default fixed row height (px) used by the virtual scroll viewport. */
|
|
6487
|
+
declare const defaultTreeItemSize = 48;
|
|
6488
|
+
/**
|
|
6489
|
+
* A `tn-tree` that renders through a `cdk-virtual-scroll-viewport`, so only the
|
|
6490
|
+
* rows currently in view are materialised in the DOM. Drop-in for large trees
|
|
6491
|
+
* (thousands of nodes) where the plain `tn-tree` would render every node.
|
|
6492
|
+
*
|
|
6493
|
+
* Usage mirrors `tn-tree`: provide a `TnTreeFlatDataSource` + `FlatTreeControl`
|
|
6494
|
+
* and one `*cdkTreeNodeDef` template. Rows are a fixed height (`itemSize`).
|
|
6495
|
+
*
|
|
6496
|
+
* ```html
|
|
6497
|
+
* <tn-tree-virtual-scroll-view [dataSource]="dataSource" [treeControl]="treeControl" [itemSize]="52">
|
|
6498
|
+
* <tn-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding [routerLink]="...">
|
|
6499
|
+
* {{ node.name }}
|
|
6500
|
+
* </tn-tree-node>
|
|
6501
|
+
* </tn-tree-virtual-scroll-view>
|
|
6502
|
+
* ```
|
|
6503
|
+
*
|
|
6504
|
+
* Accessibility: rows are exposed with `role="treeitem"` plus `aria-level`,
|
|
6505
|
+
* `aria-posinset` and `aria-setsize` (the latter two relative to the node's
|
|
6506
|
+
* siblings — nodes sharing the same parent/level — per the WAI-ARIA tree
|
|
6507
|
+
* pattern, not the flattened list of all visible rows), and the virtual-scroll
|
|
6508
|
+
* wrappers are marked `role="presentation"` so assistive tech still sees the
|
|
6509
|
+
* items as children of the `role="tree"` host.
|
|
6510
|
+
*
|
|
6511
|
+
* Keyboard: expandable rows are focusable and expand/collapse with Enter/Space (see
|
|
6512
|
+
* {@link onTreeKeydown}), so a keyboard/AT user can operate the `aria-expanded` that
|
|
6513
|
+
* each expandable `treeitem` advertises. Roving arrow-key / Home / End navigation
|
|
6514
|
+
* BETWEEN nodes is NOT supported here, though — because rows are materialised (and
|
|
6515
|
+
* recycled) by the virtual scroll viewport rather than registered with CdkTree's node
|
|
6516
|
+
* outlet, the CDK `TreeKeyManager` has no stable node set to drive. Use Tab to move
|
|
6517
|
+
* between rows, or the non-virtual `tn-tree` when full roving navigation is required.
|
|
6518
|
+
*/
|
|
6519
|
+
declare class TnTreeVirtualScrollViewComponent<T, K = T> extends CdkTree<T, K> implements AfterViewInit {
|
|
6520
|
+
private destroyRef;
|
|
6521
|
+
private cdr;
|
|
6522
|
+
readonly virtualScrollViewport: _angular_core.Signal<CdkVirtualScrollViewport>;
|
|
6523
|
+
/** Fixed row height in px. Must match the actual rendered node height. */
|
|
6524
|
+
readonly itemSize: _angular_core.InputSignal<number>;
|
|
6525
|
+
/**
|
|
6526
|
+
* Viewport buffer sizes (px). Leave at 0 (the default) to derive them from `itemSize()`
|
|
6527
|
+
* — {@link defaultMinBufferRows} / {@link defaultBufferRows} rows — so the buffers scale
|
|
6528
|
+
* with a custom row height; pass an explicit px value to override. (A fixed px default
|
|
6529
|
+
* would under-buffer a tall `itemSize`, even failing to buffer a single row when
|
|
6530
|
+
* `itemSize > maxBufferPx`.)
|
|
6531
|
+
*/
|
|
6532
|
+
readonly minBufferPx: _angular_core.InputSignal<number>;
|
|
6533
|
+
readonly maxBufferPx: _angular_core.InputSignal<number>;
|
|
6534
|
+
/** `minBufferPx` resolved to px, falling back to a row-count default that tracks `itemSize()`. */
|
|
6535
|
+
protected readonly resolvedMinBufferPx: _angular_core.Signal<number>;
|
|
6536
|
+
/** `maxBufferPx` resolved to px, falling back to a row-count default that tracks `itemSize()`. */
|
|
6537
|
+
protected readonly resolvedMaxBufferPx: _angular_core.Signal<number>;
|
|
6538
|
+
/**
|
|
6539
|
+
* When true the viewport scrolls with the window instead of an internal scroll area.
|
|
6540
|
+
* `booleanAttribute` so the bare presence form (`<... scrollWindow>`) coerces to `true`
|
|
6541
|
+
* rather than the empty-string (falsy) an un-transformed input would receive.
|
|
6542
|
+
*
|
|
6543
|
+
* Set once at initialisation — NOT reactive. The scroll listener, presentational roles
|
|
6544
|
+
* and ResizeObserver are wired in `ngAfterViewInit` against the viewport that this input
|
|
6545
|
+
* selected; toggling it later re-renders the viewport but does not re-run that wiring.
|
|
6546
|
+
*/
|
|
6547
|
+
readonly scrollWindow: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
6548
|
+
/** Whether to show the floating "scroll to top" button once scrolled down. */
|
|
6549
|
+
readonly showScrollToTop: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
6550
|
+
/** Accessible label / tooltip for the scroll-to-top button (i18n is the consumer's job). */
|
|
6551
|
+
readonly scrollToTopLabel: _angular_core.InputSignal<string>;
|
|
6552
|
+
/**
|
|
6553
|
+
* Per-row trackBy over the ORIGINAL data node (not the internal wrapper). Strongly
|
|
6554
|
+
* recommended: without it rows track by index, so the recycling viewport reuses a
|
|
6555
|
+
* detached view for whatever node lands at that index on data changes. Pass a stable
|
|
6556
|
+
* key (e.g. `(_, node) => node.id`) as the stories do.
|
|
6557
|
+
*/
|
|
6558
|
+
readonly nodeTrackBy: _angular_core.InputSignal<TrackByFunction<T> | undefined>;
|
|
6559
|
+
/** Emits the viewport's horizontal `scrollLeft` (used to sync a sticky column header). */
|
|
6560
|
+
readonly viewportScrolled: _angular_core.OutputEmitterRef<number>;
|
|
6561
|
+
/**
|
|
6562
|
+
* Emits the observed content size whenever it changes (used to size a sticky header).
|
|
6563
|
+
* `width` is the full rendered content width — including horizontal overflow past the
|
|
6564
|
+
* viewport — which is what a horizontally-synced header needs. `height` is the observed
|
|
6565
|
+
* content wrapper's height: the visible viewport height in internal-scroll mode, but the
|
|
6566
|
+
* FULL content height (row count × `itemSize`) in `scrollWindow` mode, where the wrapper
|
|
6567
|
+
* grows with the document. Consumers wanting the visible viewport height should not rely
|
|
6568
|
+
* on this field in window mode.
|
|
6569
|
+
*/
|
|
6570
|
+
readonly viewportResized: _angular_core.OutputEmitterRef<{
|
|
6571
|
+
width: number;
|
|
6572
|
+
height: number;
|
|
6573
|
+
}>;
|
|
6574
|
+
/** Last `scrollLeft` emitted via {@link viewportScrolled}; used to skip redundant emits. */
|
|
6575
|
+
private lastEmittedScrollLeft;
|
|
6576
|
+
protected nodes$: BehaviorSubject<TnTreeVirtualNodeData<T>[]>;
|
|
6577
|
+
protected readonly innerTrackBy: _angular_core.Signal<TrackByFunction<TnTreeVirtualNodeData<T>>>;
|
|
6578
|
+
private renderNodeChanges$;
|
|
6579
|
+
private resizeObserver;
|
|
6580
|
+
private scrollViewportElement;
|
|
6581
|
+
private scrollFrameSubscription;
|
|
6582
|
+
constructor();
|
|
6583
|
+
ngAfterViewInit(): void;
|
|
6584
|
+
ngOnDestroy(): void;
|
|
6585
|
+
/**
|
|
6586
|
+
* Cached visibility of the scroll-to-top button. Recomputed only on scroll (see
|
|
6587
|
+
* {@link onViewportScroll}) rather than read as a getter every change-detection
|
|
6588
|
+
* pass, so `measureScrollOffset` — a layout-forcing read — is not called each cycle.
|
|
6589
|
+
*/
|
|
6590
|
+
protected isScrollTopButtonVisible: boolean;
|
|
6591
|
+
scrollToTop(): void;
|
|
6592
|
+
/**
|
|
6593
|
+
* Enter/Space on a focused expandable row toggles its expansion. The virtual viewport
|
|
6594
|
+
* recycles rows so CDK's `TreeKeyManager` can't drive them (see class docs); this keeps
|
|
6595
|
+
* the expand/collapse that each `aria-expanded` row advertises keyboard-operable, via
|
|
6596
|
+
* event delegation on the `role="tree"` host that reuses the row's `cdkTreeNodeToggle`
|
|
6597
|
+
* click handler. Ignored when focus is on an inner control (e.g. a `routerLink` anchor)
|
|
6598
|
+
* so that element keeps its own Enter/Space behaviour.
|
|
6599
|
+
*/
|
|
6600
|
+
protected onTreeKeydown(event: KeyboardEvent): void;
|
|
6601
|
+
private updateScrollTopButtonVisibility;
|
|
6602
|
+
renderNodeChanges(data: readonly T[]): void;
|
|
6603
|
+
private getNodeLevel;
|
|
6604
|
+
/**
|
|
6605
|
+
* Compute per-row `aria-posinset` / `aria-setsize` scoped to each node's SIBLINGS
|
|
6606
|
+
* (same parent / same level), as the WAI-ARIA tree pattern requires — not the flat
|
|
6607
|
+
* list of all visible rows. The flat node set is depth-first ordered and each node
|
|
6608
|
+
* carries a level, so siblings at level L are the consecutive level-L nodes bounded
|
|
6609
|
+
* by any shallower node (level < L = a parent boundary); deeper nodes in between are
|
|
6610
|
+
* descendants of an earlier sibling and don't split the group. One pass, tracking the
|
|
6611
|
+
* open sibling group at each level.
|
|
6612
|
+
*/
|
|
6613
|
+
private computeAriaPositions;
|
|
6614
|
+
private createNode;
|
|
6615
|
+
private buildVirtualNodes;
|
|
6616
|
+
private listenForNodeChanges;
|
|
6617
|
+
private readonly onViewportScroll;
|
|
6618
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnTreeVirtualScrollViewComponent<any, any>, never>;
|
|
6619
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnTreeVirtualScrollViewComponent<any, any>, "tn-tree-virtual-scroll-view", ["tnTreeVirtualScrollView"], { "itemSize": { "alias": "itemSize"; "required": false; "isSignal": true; }; "minBufferPx": { "alias": "minBufferPx"; "required": false; "isSignal": true; }; "maxBufferPx": { "alias": "maxBufferPx"; "required": false; "isSignal": true; }; "scrollWindow": { "alias": "scrollWindow"; "required": false; "isSignal": true; }; "showScrollToTop": { "alias": "showScrollToTop"; "required": false; "isSignal": true; }; "scrollToTopLabel": { "alias": "scrollToTopLabel"; "required": false; "isSignal": true; }; "nodeTrackBy": { "alias": "nodeTrackBy"; "required": false; "isSignal": true; }; }, { "viewportScrolled": "viewportScrolled"; "viewportResized": "viewportResized"; }, never, never, true, [{ directive: typeof TnTestIdDirective; inputs: { "tnTestId": "testId"; }; outputs: {}; }]>;
|
|
6620
|
+
}
|
|
6621
|
+
|
|
6622
|
+
/**
|
|
6623
|
+
* Renders a single virtual tree row.
|
|
6624
|
+
*
|
|
6625
|
+
* `cdk-virtual-scroll-viewport` materialises this outlet for each row that scrolls
|
|
6626
|
+
* into view; the outlet instantiates the node's template with its context and
|
|
6627
|
+
* (re)binds `CdkTreeNode.mostRecentTreeNode.data`, so the row behaves exactly as a
|
|
6628
|
+
* node rendered directly by the CDK tree. When the same DOM view is recycled for a
|
|
6629
|
+
* different node (virtual scrolling reuses views), only the context is patched.
|
|
6630
|
+
*/
|
|
6631
|
+
declare class TnTreeVirtualScrollNodeOutletDirective<T> implements OnChanges, DoCheck {
|
|
6632
|
+
private _viewContainerRef;
|
|
6633
|
+
private _viewRef;
|
|
6634
|
+
readonly data: _angular_core.InputSignal<TnTreeVirtualNodeData<T>>;
|
|
6635
|
+
/**
|
|
6636
|
+
* Re-assert the row's aria position every check. The viewport's recycling view
|
|
6637
|
+
* repeater can swap the underlying DOM view for a different row without our
|
|
6638
|
+
* `ngOnChanges` writing the new `aria-setsize`/`aria-posinset` in a way that
|
|
6639
|
+
* survives the swap, so we reconcile the current element against the current data
|
|
6640
|
+
* on each change-detection pass (two cheap attribute writes) — self-healing.
|
|
6641
|
+
*/
|
|
6642
|
+
ngDoCheck(): void;
|
|
6643
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
6644
|
+
/**
|
|
6645
|
+
* Whether the row must be re-instantiated (vs. patched in place). Every wrapper
|
|
6646
|
+
* carries the same fixed key set (`data`/`context`/`nodeDef`/`posInSet`/`setSize`),
|
|
6647
|
+
* so recreation comes down to whether the raw data node is a different reference —
|
|
6648
|
+
* that is what marks a genuinely different row (a missing wrapper also recreates).
|
|
6649
|
+
*/
|
|
6650
|
+
private shouldRecreateView;
|
|
6651
|
+
/**
|
|
6652
|
+
* Reflect posinset/setsize onto the row element so screen readers can announce
|
|
6653
|
+
* "item N of M". Runs on every `ngDoCheck` (the hot CD path), so only write when the
|
|
6654
|
+
* attribute actually differs — skipping the redundant `setAttribute` on the common
|
|
6655
|
+
* pass where nothing changed.
|
|
6656
|
+
*/
|
|
6657
|
+
private applyAriaPosition;
|
|
6658
|
+
/**
|
|
6659
|
+
* Make expandable rows keyboard-focusable so a user can Tab to a pool/branch and
|
|
6660
|
+
* expand it with Enter/Space (the host `TnTreeVirtualScrollViewComponent` handles the
|
|
6661
|
+
* key). The virtual viewport recycles a row's view between expandable and leaf nodes,
|
|
6662
|
+
* so this reconciles every check; leaf rows are left to the consumer's own interactive
|
|
6663
|
+
* content (e.g. a `routerLink` anchor). Expandability is read from `aria-expanded`,
|
|
6664
|
+
* which `tn-tree-node` sets only on expandable nodes. Only touch the DOM on change —
|
|
6665
|
+
* this runs on the hot CD path.
|
|
6666
|
+
*/
|
|
6667
|
+
private applyKeyboardAffordance;
|
|
6668
|
+
private updateExistingContext;
|
|
6669
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnTreeVirtualScrollNodeOutletDirective<any>, never>;
|
|
6670
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnTreeVirtualScrollNodeOutletDirective<any>, "[tnTreeVirtualScrollNodeOutlet]", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
6671
|
+
}
|
|
6672
|
+
|
|
6673
|
+
/**
|
|
6674
|
+
* Harness for interacting with `tn-tree-virtual-scroll-view` in tests.
|
|
6675
|
+
*
|
|
6676
|
+
* Because the component virtualises its rows, every query below operates over the
|
|
6677
|
+
* currently-MATERIALISED (visible + buffered) rows only — nodes scrolled far out of view
|
|
6678
|
+
* are not in the DOM. Indexes are positions within that visible set, not the full data.
|
|
6679
|
+
*
|
|
6680
|
+
* @example
|
|
6681
|
+
* ```typescript
|
|
6682
|
+
* const tree = await loader.getHarness(TnTreeVirtualScrollViewHarness);
|
|
6683
|
+
* expect(await tree.getRowTexts()).toEqual(['pool', 'other']);
|
|
6684
|
+
*
|
|
6685
|
+
* await tree.expand(0);
|
|
6686
|
+
* expect(await tree.isExpanded(0)).toBe(true);
|
|
6687
|
+
* expect(await tree.getAriaLevel(1)).toBe(2);
|
|
6688
|
+
* ```
|
|
6689
|
+
*/
|
|
6690
|
+
declare class TnTreeVirtualScrollViewHarness extends ComponentHarness {
|
|
6691
|
+
static hostSelector: string;
|
|
6692
|
+
/**
|
|
6693
|
+
* Gets a `HarnessPredicate` that can be used to search for a virtual-scroll tree
|
|
6694
|
+
* with specific attributes.
|
|
6695
|
+
*
|
|
6696
|
+
* @param options Options for filtering which instances are considered a match.
|
|
6697
|
+
* @returns A `HarnessPredicate` configured with the given options.
|
|
6698
|
+
*/
|
|
6699
|
+
static with(options?: TnTreeVirtualScrollViewHarnessFilters): HarnessPredicate<TnTreeVirtualScrollViewHarness>;
|
|
6700
|
+
private readonly rows;
|
|
6701
|
+
private readonly scrollTopButton;
|
|
6702
|
+
/**
|
|
6703
|
+
* Gets the number of currently-materialised tree rows.
|
|
6704
|
+
*
|
|
6705
|
+
* @returns Promise resolving to the visible row count.
|
|
6706
|
+
*/
|
|
6707
|
+
getRowCount(): Promise<number>;
|
|
6708
|
+
/**
|
|
6709
|
+
* Gets the text label of every materialised row (the node's text cell only, excluding
|
|
6710
|
+
* the expand chevron glyph).
|
|
6711
|
+
*
|
|
6712
|
+
* @returns Promise resolving to an array of row label strings.
|
|
6713
|
+
*/
|
|
6714
|
+
getRowTexts(): Promise<string[]>;
|
|
6715
|
+
/**
|
|
6716
|
+
* Gets the text label of a single materialised row.
|
|
6717
|
+
*
|
|
6718
|
+
* @param index Zero-based index within the visible rows.
|
|
6719
|
+
* @returns Promise resolving to the row's label.
|
|
6720
|
+
*/
|
|
6721
|
+
getRowText(index: number): Promise<string>;
|
|
6722
|
+
/**
|
|
6723
|
+
* Gets the 1-based `aria-level` of a row (root nodes are 1).
|
|
6724
|
+
*
|
|
6725
|
+
* @param index Zero-based index within the visible rows.
|
|
6726
|
+
* @returns Promise resolving to the aria-level, or null if unset.
|
|
6727
|
+
*/
|
|
6728
|
+
getAriaLevel(index: number): Promise<number | null>;
|
|
6729
|
+
/**
|
|
6730
|
+
* Gets a row's `aria-posinset` — its 1-based position within its SIBLING set.
|
|
6731
|
+
*
|
|
6732
|
+
* @param index Zero-based index within the visible rows.
|
|
6733
|
+
* @returns Promise resolving to the aria-posinset, or null if unset.
|
|
6734
|
+
*/
|
|
6735
|
+
getAriaPosInSet(index: number): Promise<number | null>;
|
|
6736
|
+
/**
|
|
6737
|
+
* Gets a row's `aria-setsize` — the size of its SIBLING set.
|
|
6738
|
+
*
|
|
6739
|
+
* @param index Zero-based index within the visible rows.
|
|
6740
|
+
* @returns Promise resolving to the aria-setsize, or null if unset.
|
|
6741
|
+
*/
|
|
6742
|
+
getAriaSetSize(index: number): Promise<number | null>;
|
|
6743
|
+
/**
|
|
6744
|
+
* Whether a row is expandable (advertises `aria-expanded`).
|
|
6745
|
+
*
|
|
6746
|
+
* @param index Zero-based index within the visible rows.
|
|
6747
|
+
* @returns Promise resolving to true if the row is expandable.
|
|
6748
|
+
*/
|
|
6749
|
+
isExpandable(index: number): Promise<boolean>;
|
|
6750
|
+
/**
|
|
6751
|
+
* Whether an expandable row is currently expanded.
|
|
6752
|
+
*
|
|
6753
|
+
* @param index Zero-based index within the visible rows.
|
|
6754
|
+
* @returns Promise resolving to true if `aria-expanded="true"`.
|
|
6755
|
+
*/
|
|
6756
|
+
isExpanded(index: number): Promise<boolean>;
|
|
6757
|
+
/**
|
|
6758
|
+
* Whether a row is keyboard tab-focusable (`tabindex="0"`). Only expandable rows are.
|
|
6759
|
+
*
|
|
6760
|
+
* @param index Zero-based index within the visible rows.
|
|
6761
|
+
* @returns Promise resolving to true if the row is tab-focusable.
|
|
6762
|
+
*/
|
|
6763
|
+
isFocusable(index: number): Promise<boolean>;
|
|
6764
|
+
/**
|
|
6765
|
+
* Toggles a row's expansion by clicking its toggle. No-op semantics are the tree's
|
|
6766
|
+
* (clicking a leaf does nothing).
|
|
6767
|
+
*
|
|
6768
|
+
* @param index Zero-based index within the visible rows.
|
|
6769
|
+
*/
|
|
6770
|
+
toggle(index: number): Promise<void>;
|
|
6771
|
+
/**
|
|
6772
|
+
* Expands a row if it is expandable and currently collapsed.
|
|
6773
|
+
*
|
|
6774
|
+
* @param index Zero-based index within the visible rows.
|
|
6775
|
+
*/
|
|
6776
|
+
expand(index: number): Promise<void>;
|
|
6777
|
+
/**
|
|
6778
|
+
* Collapses a row if it is currently expanded.
|
|
6779
|
+
*
|
|
6780
|
+
* @param index Zero-based index within the visible rows.
|
|
6781
|
+
*/
|
|
6782
|
+
collapse(index: number): Promise<void>;
|
|
6783
|
+
/**
|
|
6784
|
+
* Focuses a row and presses a key on it (Enter/Space toggle an expandable row).
|
|
6785
|
+
*
|
|
6786
|
+
* @param index Zero-based index within the visible rows.
|
|
6787
|
+
* @param key Which key to press — Enter or Space.
|
|
6788
|
+
*/
|
|
6789
|
+
pressKeyOnRow(index: number, key: 'enter' | 'space'): Promise<void>;
|
|
6790
|
+
/**
|
|
6791
|
+
* Whether the floating scroll-to-top button is currently visible.
|
|
6792
|
+
*
|
|
6793
|
+
* @returns Promise resolving to true if the button is rendered.
|
|
6794
|
+
*/
|
|
6795
|
+
isScrollToTopVisible(): Promise<boolean>;
|
|
6796
|
+
/**
|
|
6797
|
+
* Clicks the scroll-to-top button. Throws if it is not currently visible.
|
|
6798
|
+
*/
|
|
6799
|
+
clickScrollToTop(): Promise<void>;
|
|
6800
|
+
private getRow;
|
|
6801
|
+
private getRowNumberAttribute;
|
|
6802
|
+
}
|
|
6803
|
+
/**
|
|
6804
|
+
* Filters for finding `TnTreeVirtualScrollViewHarness` instances.
|
|
6805
|
+
*/
|
|
6806
|
+
type TnTreeVirtualScrollViewHarnessFilters = BaseHarnessFilters;
|
|
6807
|
+
|
|
6271
6808
|
declare enum CommonShortcuts {
|
|
6272
6809
|
NEW = "\u2318N",
|
|
6273
6810
|
OPEN = "\u2318O",
|
|
@@ -8822,5 +9359,5 @@ declare const TN_THEME_DEFINITIONS: readonly TnThemeDefinition[];
|
|
|
8822
9359
|
*/
|
|
8823
9360
|
declare const THEME_MAP: Map<TnTheme, TnThemeDefinition>;
|
|
8824
9361
|
|
|
8825
|
-
export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LabelMarkupPipe, LabelTextPipe, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_FORM_FIELD_ERRORS, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCardFooterActionsDirective, TnCardHeaderActionsDirective, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnChipInputComponent, TnChipInputHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFileInputComponent, TnFileInputHarness, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, TnFormSectionComponent, TnFormSectionHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioHarness, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnStepperHarness, TnStepperNextDirective, TnStepperPreviousDirective, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, composeTestId, controlTestId, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, formatSize, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, parseLabelMarkup, parseSize, registerLucideIcons, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
|
|
8826
|
-
export type { AutocompleteHarnessFilters, BannerHarnessFilters, ButtonHarnessFilters, ButtonToggleHarnessFilters, CalendarCell, CheckboxHarnessFilters, ChipColor, ChipHarnessFilters, CreateFolderEvent, DateInputHarnessFilters, DateRange, DateRangeInputHarnessFilters, DialogHarnessFilters, EmptyHarnessFilters, ExpansionPanelHarnessFilters, FileInputHarnessFilters, FilePickerCallbacks, FilePickerError, FilePickerMode, FileSystemItem, FormFieldHarnessFilters, FormSectionHarnessFilters, IconButtonHarnessFilters, IconHarnessFilters, IconLibrary, IconLibraryType, IconResult, IconSize, IconSource, IconTestingMockOverrides, InputHarnessFilters, KeyCombination, LabelMarkupSegment, LabelMarkupSegmentType, LabelType, LucideIconOptions, MenuHarnessFilters, MockIconRegistry, MockSpriteLoader, PathSegment, PlatformType, ProgressBarMode, RadioHarnessFilters, ResolvedIcon, SelectHarnessFilters, ShortcutHandler, SidePanelHarnessFilters, SizeStandard, SlideToggleColor, SlideToggleHarnessFilters, SpinnerMode, SpriteConfig, StepperHarnessFilters, SubscriptSizing, TabChangeEvent, TabHarnessFilters, TabPanelHarnessFilters, TabsHarnessFilters, TnAutocompleteOption, TnBannerType, TnButtonToggleType, TnCardAction, TnCardControl, TnCardFooterLink, TnCardHeaderStatus, TnChipInputHarnessFilters, TnChipInputOption, TnConfirmDialogData, TnDialogDefaults, TnDialogOpenTarget, TnDrawerMode, TnDrawerPosition, TnEmptySize, TnFlatTreeNode, TnFormFieldErrorMessage, TnFormFieldErrorMessages, TnFormFieldErrorResolver, TnMenuItem, TnSelectOption, TnSelectOptionGroup, TnSelectionChange, TnSortEvent, TnTableDataProvider, TnTableDataSource, TnTableHarnessFilters, TnTablePagerHarnessFilters, TnTablePagerLabels, TnTablePagination, TnTestAttrName, TnTestIdValue, TnThemeDefinition, TnToastCall, TnToastConfig, TooltipPosition, YearCell };
|
|
9362
|
+
export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LabelMarkupPipe, LabelTextPipe, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_FORM_FIELD_CONTEXT, TN_FORM_FIELD_ERRORS, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCardFooterActionsDirective, TnCardHeaderActionsDirective, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnChipInputComponent, TnChipInputHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFileInputComponent, TnFileInputHarness, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, TnFormSectionComponent, TnFormSectionHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioHarness, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnStepperHarness, TnStepperNextDirective, TnStepperPreviousDirective, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TnTreeVirtualScrollNodeOutletDirective, TnTreeVirtualScrollViewComponent, TnTreeVirtualScrollViewHarness, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, composeTestId, controlTestId, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, defaultTreeItemSize, formatSize, injectTnFormFieldAria, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, parseLabelMarkup, parseSize, registerLucideIcons, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
|
|
9363
|
+
export type { AutocompleteHarnessFilters, BannerHarnessFilters, ButtonHarnessFilters, ButtonToggleHarnessFilters, CalendarCell, CheckboxHarnessFilters, ChipColor, ChipHarnessFilters, CreateFolderEvent, DateInputHarnessFilters, DateRange, DateRangeInputHarnessFilters, DialogHarnessFilters, EmptyHarnessFilters, ExpansionPanelHarnessFilters, FileInputHarnessFilters, FilePickerCallbacks, FilePickerError, FilePickerMode, FileSystemItem, FormFieldHarnessFilters, FormSectionHarnessFilters, IconButtonHarnessFilters, IconHarnessFilters, IconLibrary, IconLibraryType, IconResult, IconSize, IconSource, IconTestingMockOverrides, InputHarnessFilters, KeyCombination, LabelMarkupSegment, LabelMarkupSegmentType, LabelType, LucideIconOptions, MenuHarnessFilters, MockIconRegistry, MockSpriteLoader, PathSegment, PlatformType, ProgressBarMode, RadioHarnessFilters, ResolvedIcon, SelectHarnessFilters, ShortcutHandler, SidePanelHarnessFilters, SizeStandard, SlideToggleColor, SlideToggleHarnessFilters, SpinnerMode, SpriteConfig, StepperHarnessFilters, SubscriptSizing, TabChangeEvent, TabHarnessFilters, TabPanelHarnessFilters, TabsHarnessFilters, TnAutocompleteOption, TnBannerType, TnButtonToggleType, TnCardAction, TnCardControl, TnCardFooterLink, TnCardHeaderStatus, TnChipInputHarnessFilters, TnChipInputOption, TnConfirmDialogData, TnDialogDefaults, TnDialogOpenTarget, TnDrawerMode, TnDrawerPosition, TnEmptySize, TnFlatTreeNode, TnFormFieldAriaBindings, TnFormFieldContext, TnFormFieldErrorMessage, TnFormFieldErrorMessages, TnFormFieldErrorResolver, TnMenuItem, TnSelectOption, TnSelectOptionGroup, TnSelectionChange, TnSortEvent, TnTableDataProvider, TnTableDataSource, TnTableHarnessFilters, TnTablePagerHarnessFilters, TnTablePagerLabels, TnTablePagination, TnTestAttrName, TnTestIdValue, TnThemeDefinition, TnToastCall, TnToastConfig, TnTreeVirtualNodeData, TnTreeVirtualScrollViewHarnessFilters, TooltipPosition, YearCell };
|