@cdevhub/ngx-tw 0.5.0 → 0.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +78 -15
- package/fesm2022/cdevhub-ngx-tw-accordion.mjs +16 -5
- package/fesm2022/cdevhub-ngx-tw-accordion.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-avatar.mjs +26 -15
- package/fesm2022/cdevhub-ngx-tw-avatar.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-badge.mjs +17 -5
- package/fesm2022/cdevhub-ngx-tw-badge.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-breadcrumbs.mjs +27 -6
- package/fesm2022/cdevhub-ngx-tw-breadcrumbs.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-button.mjs +23 -11
- package/fesm2022/cdevhub-ngx-tw-button.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-calendar-luxon.mjs +5 -5
- package/fesm2022/cdevhub-ngx-tw-calendar-luxon.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-calendar-testing.mjs +3 -3
- package/fesm2022/cdevhub-ngx-tw-calendar-testing.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-calendar.mjs +427 -122
- package/fesm2022/cdevhub-ngx-tw-calendar.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-card.mjs +21 -11
- package/fesm2022/cdevhub-ngx-tw-card.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-carousel.mjs +215 -96
- package/fesm2022/cdevhub-ngx-tw-carousel.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-checkbox.mjs +108 -64
- package/fesm2022/cdevhub-ngx-tw-checkbox.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-code-block.mjs +18 -6
- package/fesm2022/cdevhub-ngx-tw-code-block.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-collapsible.mjs +55 -30
- package/fesm2022/cdevhub-ngx-tw-collapsible.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-combobox-testing.mjs +218 -0
- package/fesm2022/cdevhub-ngx-tw-combobox-testing.mjs.map +1 -0
- package/fesm2022/cdevhub-ngx-tw-combobox.mjs +236 -211
- package/fesm2022/cdevhub-ngx-tw-combobox.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-command-palette-testing.mjs +200 -0
- package/fesm2022/cdevhub-ngx-tw-command-palette-testing.mjs.map +1 -0
- package/fesm2022/cdevhub-ngx-tw-command-palette.mjs +34 -7
- package/fesm2022/cdevhub-ngx-tw-command-palette.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-core.mjs +135 -15
- package/fesm2022/cdevhub-ngx-tw-core.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-date-picker-testing.mjs +203 -0
- package/fesm2022/cdevhub-ngx-tw-date-picker-testing.mjs.map +1 -0
- package/fesm2022/cdevhub-ngx-tw-date-picker.mjs +160 -102
- package/fesm2022/cdevhub-ngx-tw-date-picker.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-date-range-picker-testing.mjs +209 -0
- package/fesm2022/cdevhub-ngx-tw-date-range-picker-testing.mjs.map +1 -0
- package/fesm2022/cdevhub-ngx-tw-date-range-picker.mjs +182 -107
- package/fesm2022/cdevhub-ngx-tw-date-range-picker.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-dialog-testing.mjs +122 -0
- package/fesm2022/cdevhub-ngx-tw-dialog-testing.mjs.map +1 -0
- package/fesm2022/cdevhub-ngx-tw-dialog.mjs +11 -2
- package/fesm2022/cdevhub-ngx-tw-dialog.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-empty-state.mjs +1 -1
- package/fesm2022/cdevhub-ngx-tw-empty-state.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-file-upload-testing.mjs +149 -0
- package/fesm2022/cdevhub-ngx-tw-file-upload-testing.mjs.map +1 -0
- package/fesm2022/cdevhub-ngx-tw-file-upload.mjs +57 -67
- package/fesm2022/cdevhub-ngx-tw-file-upload.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-flip-card.mjs +42 -24
- package/fesm2022/cdevhub-ngx-tw-flip-card.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-form-field.mjs +114 -21
- package/fesm2022/cdevhub-ngx-tw-form-field.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-icon.mjs +16 -6
- package/fesm2022/cdevhub-ngx-tw-icon.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-input.mjs +52 -61
- package/fesm2022/cdevhub-ngx-tw-input.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-item.mjs +28 -4
- package/fesm2022/cdevhub-ngx-tw-item.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-menu-testing.mjs +168 -0
- package/fesm2022/cdevhub-ngx-tw-menu-testing.mjs.map +1 -0
- package/fesm2022/cdevhub-ngx-tw-menu.mjs +58 -21
- package/fesm2022/cdevhub-ngx-tw-menu.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-number-input.mjs +34 -1
- package/fesm2022/cdevhub-ngx-tw-number-input.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-paginator.mjs +95 -45
- package/fesm2022/cdevhub-ngx-tw-paginator.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-popover.mjs +81 -32
- package/fesm2022/cdevhub-ngx-tw-popover.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-progress-bar.mjs +1 -1
- package/fesm2022/cdevhub-ngx-tw-progress-bar.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-radio.mjs +131 -98
- package/fesm2022/cdevhub-ngx-tw-radio.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-segmented-control.mjs +207 -42
- package/fesm2022/cdevhub-ngx-tw-segmented-control.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-select-testing.mjs +165 -0
- package/fesm2022/cdevhub-ngx-tw-select-testing.mjs.map +1 -0
- package/fesm2022/cdevhub-ngx-tw-select.mjs +386 -210
- package/fesm2022/cdevhub-ngx-tw-select.mjs.map +1 -1
- package/fesm2022/{cdevhub-ngx-tw-sheet-sheet-renderer-ByyNluUd.mjs → cdevhub-ngx-tw-sheet-sheet-renderer-CqVJwgmp.mjs} +3 -3
- package/fesm2022/cdevhub-ngx-tw-sheet-sheet-renderer-CqVJwgmp.mjs.map +1 -0
- package/fesm2022/cdevhub-ngx-tw-sheet-testing.mjs +129 -0
- package/fesm2022/cdevhub-ngx-tw-sheet-testing.mjs.map +1 -0
- package/fesm2022/cdevhub-ngx-tw-sheet.mjs +23 -7
- package/fesm2022/cdevhub-ngx-tw-sheet.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-slider.mjs +89 -54
- package/fesm2022/cdevhub-ngx-tw-slider.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-sort.mjs +122 -17
- package/fesm2022/cdevhub-ngx-tw-sort.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-split.mjs +72 -19
- package/fesm2022/cdevhub-ngx-tw-split.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-stat.mjs +63 -25
- package/fesm2022/cdevhub-ngx-tw-stat.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-stepper.mjs +35 -8
- package/fesm2022/cdevhub-ngx-tw-stepper.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-switch.mjs +54 -48
- package/fesm2022/cdevhub-ngx-tw-switch.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-tab-nav.mjs +12 -15
- package/fesm2022/cdevhub-ngx-tw-tab-nav.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-table.mjs +74 -13
- package/fesm2022/cdevhub-ngx-tw-table.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-tabs.mjs +84 -30
- package/fesm2022/cdevhub-ngx-tw-tabs.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-tags-input-testing.mjs +172 -0
- package/fesm2022/cdevhub-ngx-tw-tags-input-testing.mjs.map +1 -0
- package/fesm2022/cdevhub-ngx-tw-tags-input.mjs +107 -71
- package/fesm2022/cdevhub-ngx-tw-tags-input.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-textarea.mjs +41 -9
- package/fesm2022/cdevhub-ngx-tw-textarea.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-theme.mjs +257 -45
- package/fesm2022/cdevhub-ngx-tw-theme.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-time-picker-testing.mjs +201 -0
- package/fesm2022/cdevhub-ngx-tw-time-picker-testing.mjs.map +1 -0
- package/fesm2022/cdevhub-ngx-tw-time-picker.mjs +184 -77
- package/fesm2022/cdevhub-ngx-tw-time-picker.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-timeline.mjs +110 -27
- package/fesm2022/cdevhub-ngx-tw-timeline.mjs.map +1 -1
- package/fesm2022/{cdevhub-ngx-tw-toast-toast-renderer-DSu4YoTy.mjs → cdevhub-ngx-tw-toast-toast-renderer-BlDxemsU.mjs} +107 -19
- package/fesm2022/cdevhub-ngx-tw-toast-toast-renderer-BlDxemsU.mjs.map +1 -0
- package/fesm2022/cdevhub-ngx-tw-toast.mjs +21 -13
- package/fesm2022/cdevhub-ngx-tw-toast.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-tooltip.mjs +102 -15
- package/fesm2022/cdevhub-ngx-tw-tooltip.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-transfer-testing.mjs +219 -0
- package/fesm2022/cdevhub-ngx-tw-transfer-testing.mjs.map +1 -0
- package/fesm2022/cdevhub-ngx-tw-transfer.mjs +88 -69
- package/fesm2022/cdevhub-ngx-tw-transfer.mjs.map +1 -1
- package/fesm2022/cdevhub-ngx-tw-tree.mjs +68 -19
- package/fesm2022/cdevhub-ngx-tw-tree.mjs.map +1 -1
- package/index.json +1 -1
- package/package.json +63 -2
- package/theme/_base.css +13 -0
- package/theme/_dark.css +111 -36
- package/theme/_high-contrast-dark.css +367 -0
- package/theme/_high-contrast.css +13 -2
- package/theme/_light.css +332 -0
- package/theme/_semantic.css +60 -26
- package/theme/_typography.css +17 -0
- package/theme/index.css +86 -7
- package/types/cdevhub-ngx-tw-accordion.d.ts +12 -4
- package/types/cdevhub-ngx-tw-avatar.d.ts +10 -3
- package/types/cdevhub-ngx-tw-button.d.ts +1 -0
- package/types/cdevhub-ngx-tw-calendar-luxon.d.ts +2 -2
- package/types/cdevhub-ngx-tw-calendar-testing.d.ts +1 -1
- package/types/cdevhub-ngx-tw-calendar.d.ts +179 -73
- package/types/cdevhub-ngx-tw-card.d.ts +11 -3
- package/types/cdevhub-ngx-tw-carousel.d.ts +89 -20
- package/types/cdevhub-ngx-tw-checkbox.d.ts +40 -12
- package/types/cdevhub-ngx-tw-code-block.d.ts +11 -2
- package/types/cdevhub-ngx-tw-collapsible.d.ts +32 -5
- package/types/cdevhub-ngx-tw-combobox-testing.d.ts +157 -0
- package/types/cdevhub-ngx-tw-combobox.d.ts +94 -53
- package/types/cdevhub-ngx-tw-command-palette-testing.d.ts +136 -0
- package/types/cdevhub-ngx-tw-command-palette.d.ts +33 -5
- package/types/cdevhub-ngx-tw-core.d.ts +152 -21
- package/types/cdevhub-ngx-tw-date-picker-testing.d.ts +141 -0
- package/types/cdevhub-ngx-tw-date-picker.d.ts +37 -29
- package/types/cdevhub-ngx-tw-date-range-picker-testing.d.ts +148 -0
- package/types/cdevhub-ngx-tw-date-range-picker.d.ts +36 -29
- package/types/cdevhub-ngx-tw-dialog-testing.d.ts +98 -0
- package/types/cdevhub-ngx-tw-dialog.d.ts +12 -3
- package/types/cdevhub-ngx-tw-file-upload-testing.d.ts +120 -0
- package/types/cdevhub-ngx-tw-file-upload.d.ts +8 -10
- package/types/cdevhub-ngx-tw-flip-card.d.ts +18 -11
- package/types/cdevhub-ngx-tw-form-field.d.ts +19 -2
- package/types/cdevhub-ngx-tw-icon.d.ts +3 -3
- package/types/cdevhub-ngx-tw-input.d.ts +5 -8
- package/types/cdevhub-ngx-tw-item.d.ts +2 -0
- package/types/cdevhub-ngx-tw-menu-testing.d.ts +131 -0
- package/types/cdevhub-ngx-tw-menu.d.ts +2 -2
- package/types/cdevhub-ngx-tw-number-input.d.ts +20 -0
- package/types/cdevhub-ngx-tw-paginator.d.ts +58 -24
- package/types/cdevhub-ngx-tw-popover.d.ts +41 -10
- package/types/cdevhub-ngx-tw-progress-bar.d.ts +1 -1
- package/types/cdevhub-ngx-tw-radio.d.ts +68 -25
- package/types/cdevhub-ngx-tw-segmented-control.d.ts +79 -16
- package/types/cdevhub-ngx-tw-select-testing.d.ts +114 -0
- package/types/cdevhub-ngx-tw-select.d.ts +104 -33
- package/types/cdevhub-ngx-tw-sheet-testing.d.ts +104 -0
- package/types/cdevhub-ngx-tw-sheet.d.ts +19 -3
- package/types/cdevhub-ngx-tw-slider.d.ts +79 -25
- package/types/cdevhub-ngx-tw-sort.d.ts +45 -4
- package/types/cdevhub-ngx-tw-split.d.ts +32 -2
- package/types/cdevhub-ngx-tw-stat.d.ts +14 -4
- package/types/cdevhub-ngx-tw-stepper.d.ts +16 -2
- package/types/cdevhub-ngx-tw-switch.d.ts +35 -13
- package/types/cdevhub-ngx-tw-tab-nav.d.ts +7 -6
- package/types/cdevhub-ngx-tw-table.d.ts +53 -10
- package/types/cdevhub-ngx-tw-tabs.d.ts +41 -10
- package/types/cdevhub-ngx-tw-tags-input-testing.d.ts +135 -0
- package/types/cdevhub-ngx-tw-tags-input.d.ts +26 -11
- package/types/cdevhub-ngx-tw-textarea.d.ts +3 -2
- package/types/cdevhub-ngx-tw-theme.d.ts +245 -39
- package/types/cdevhub-ngx-tw-time-picker-testing.d.ts +129 -0
- package/types/cdevhub-ngx-tw-time-picker.d.ts +76 -19
- package/types/cdevhub-ngx-tw-timeline.d.ts +36 -12
- package/types/cdevhub-ngx-tw-toast.d.ts +20 -6
- package/types/cdevhub-ngx-tw-tooltip.d.ts +28 -6
- package/types/cdevhub-ngx-tw-transfer-testing.d.ts +152 -0
- package/types/cdevhub-ngx-tw-transfer.d.ts +21 -8
- package/types/cdevhub-ngx-tw-tree.d.ts +6 -1
- package/fesm2022/cdevhub-ngx-tw-sheet-sheet-renderer-ByyNluUd.mjs.map +0 -1
- package/fesm2022/cdevhub-ngx-tw-toast-toast-renderer-DSu4YoTy.mjs.map +0 -1
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
2
|
|
|
3
3
|
/** Visual style of the flip card chrome. Mirrors `tw-card`. */
|
|
4
|
-
type FlipCardVariant = '
|
|
4
|
+
type FlipCardVariant = 'outline' | 'elevated' | 'ghost' | FlipCardVariantLegacy;
|
|
5
|
+
/**
|
|
6
|
+
* Legacy `variant` spellings, kept so existing templates keep compiling.
|
|
7
|
+
* @deprecated `'outlined'` is an alias for `'outline'` and renders identically.
|
|
8
|
+
* It will be removed in the next major — prefer `'outline'`.
|
|
9
|
+
*/
|
|
10
|
+
type FlipCardVariantLegacy = 'outlined';
|
|
5
11
|
/** Axis of rotation for the flip animation. */
|
|
6
12
|
type FlipCardDirection = 'horizontal' | 'vertical';
|
|
7
13
|
/** Which user interaction flips the card. */
|
|
@@ -22,8 +28,9 @@ type FlipCardTrigger = 'hover' | 'click' | 'manual' | 'both';
|
|
|
22
28
|
declare class FlipCardComponent {
|
|
23
29
|
/**
|
|
24
30
|
* Visual style of the card chrome. Mirrors `tw-card`'s variant vocabulary.
|
|
25
|
-
* Defaults to `'
|
|
31
|
+
* Defaults to `'outline'` (vs `tw-card`'s `'elevated'` default) so the flip
|
|
26
32
|
* animation reads more clearly without a baseline shadow underneath.
|
|
33
|
+
* `'outlined'` is a deprecated alias for `'outline'` and renders identically.
|
|
27
34
|
*/
|
|
28
35
|
readonly variant: _angular_core.InputSignal<FlipCardVariant>;
|
|
29
36
|
/** Axis of rotation. `'horizontal'` rotates around the Y axis (left/right flip); `'vertical'` rotates around the X axis (top/bottom flip). Defaults to `'horizontal'`. */
|
|
@@ -35,12 +42,12 @@ declare class FlipCardComponent {
|
|
|
35
42
|
/** Whether the back face is currently visible. Two-way bindable via `[(flipped)]`. Defaults to `false`. The `flippedChange` event fires on every toggle. */
|
|
36
43
|
readonly flipped: _angular_core.ModelSignal<boolean>;
|
|
37
44
|
/**
|
|
38
|
-
* Accessible name for the host element
|
|
39
|
-
* `'manual'` (the host renders as `role="region"`, which
|
|
40
|
-
* have an accessible name); a default of `'Flip card'` is
|
|
41
|
-
* mode if no value is provided. In interactive modes the host's
|
|
42
|
-
* name is normally derived from the visible face's content — set
|
|
43
|
-
* input to override.
|
|
45
|
+
* Accessible name for the host element, mirrored to `aria-label`. Required
|
|
46
|
+
* when `trigger` is `'manual'` (the host renders as `role="region"`, which
|
|
47
|
+
* AXE requires to have an accessible name); a default of `'Flip card'` is
|
|
48
|
+
* used in that mode if no value is provided. In interactive modes the host's
|
|
49
|
+
* accessible name is normally derived from the visible face's content — set
|
|
50
|
+
* this input to override. Defaults to `undefined`.
|
|
44
51
|
*/
|
|
45
52
|
readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
|
|
46
53
|
private readonly liveAnnouncer;
|
|
@@ -58,8 +65,6 @@ declare class FlipCardComponent {
|
|
|
58
65
|
/** @internal */
|
|
59
66
|
readonly ariaPressed: _angular_core.Signal<string | null>;
|
|
60
67
|
/** @internal */
|
|
61
|
-
readonly ariaLive: _angular_core.Signal<"polite" | null>;
|
|
62
|
-
/** @internal */
|
|
63
68
|
readonly ariaDisabled: _angular_core.Signal<"true" | null>;
|
|
64
69
|
/** @internal */
|
|
65
70
|
readonly hostAriaLabel: _angular_core.Signal<string | null>;
|
|
@@ -71,6 +76,8 @@ declare class FlipCardComponent {
|
|
|
71
76
|
readonly frontInert: _angular_core.Signal<"" | null>;
|
|
72
77
|
/** @internal */
|
|
73
78
|
readonly backInert: _angular_core.Signal<"" | null>;
|
|
79
|
+
/** @internal Canonical variant with legacy spellings folded in. */
|
|
80
|
+
private readonly resolvedVariant;
|
|
74
81
|
private readonly variantResult;
|
|
75
82
|
readonly rootClasses: _angular_core.Signal<string>;
|
|
76
83
|
readonly innerClasses: _angular_core.Signal<string>;
|
|
@@ -88,7 +95,7 @@ declare class FlipCardComponent {
|
|
|
88
95
|
private toggle;
|
|
89
96
|
private setFlipped;
|
|
90
97
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<FlipCardComponent, never>;
|
|
91
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<FlipCardComponent, "tw-flip-card", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "flipped": { "alias": "flipped"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "
|
|
98
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<FlipCardComponent, "tw-flip-card", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "flipped": { "alias": "flipped"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, { "flipped": "flippedChange"; }, never, ["[slot='front']", "[slot='back']"], true, never>;
|
|
92
99
|
}
|
|
93
100
|
|
|
94
101
|
export { FlipCardComponent };
|
|
@@ -28,7 +28,24 @@ declare abstract class FormFieldControl<T = unknown> {
|
|
|
28
28
|
abstract readonly required: Signal<boolean>;
|
|
29
29
|
/** Whether the control should be rendered as invalid. Usually derived from `NgControl.invalid` combined with `touched`/`submitted`. */
|
|
30
30
|
abstract readonly errorState: Signal<boolean>;
|
|
31
|
-
/**
|
|
31
|
+
/**
|
|
32
|
+
* Active validation errors map keyed by validator name (e.g. `{ required: true, email: true }`).
|
|
33
|
+
* Returns `null` when the control has no validation errors.
|
|
34
|
+
*
|
|
35
|
+
* This is the *only* source the form-field consults for `[twError match="…"]` filtering: it
|
|
36
|
+
* feeds `FormFieldComponent.activeErrorKeys`, and an error with a `match` renders only while
|
|
37
|
+
* that key is present. A control that leaves this undefined therefore reports an empty key set,
|
|
38
|
+
* and **every `match`-targeted message under it is permanently hidden** — in all three form
|
|
39
|
+
* strategies, with no warning. Unmatched `[twError]` messages are unaffected; they follow
|
|
40
|
+
* `errorState` alone.
|
|
41
|
+
*
|
|
42
|
+
* Optional only so the member can be added to existing controls without a breaking change. Any
|
|
43
|
+
* control that resolves an `NgControl` should implement it — typically as
|
|
44
|
+
* `computed(() => ngControl?.control?.errors ?? null)`, reading whatever revision signal the
|
|
45
|
+
* control already uses to invalidate `errorState`, so the map tracks validator transitions that
|
|
46
|
+
* do not flip `VALID`/`INVALID`. Omit it only for a control that genuinely has no validation
|
|
47
|
+
* errors to report.
|
|
48
|
+
*/
|
|
32
49
|
readonly errors?: Signal<Record<string, unknown> | null>;
|
|
33
50
|
/** Optional control-type identifier (e.g. `'input'`, `'select'`). When set, the form-field appends `tw-form-field-type-{controlType}` to its host for styling hooks. */
|
|
34
51
|
abstract readonly controlType?: string;
|
|
@@ -141,7 +158,7 @@ declare class SuffixIconDirective extends SuffixDirective {
|
|
|
141
158
|
declare class FormFieldComponent implements AfterContentInit, TwFormFieldParent {
|
|
142
159
|
/** Visual appearance of the field container. `'outline'` draws a full border around the control; `'filled'` uses a filled surface with a bottom border. Defaults to `'outline'`. */
|
|
143
160
|
readonly appearance: i0.InputSignal<FormFieldAppearance>;
|
|
144
|
-
/** Density of the field container. Maps to the inline-padding scale (`px-2 py-1` xs … `px-5 py-3` xl) and the
|
|
161
|
+
/** Density of the field container. Maps to the inline-padding scale (`px-2 py-1` xs … `px-5 py-3` xl), the control-row font scale (`text-xs` xs, `text-sm` sm/md, `text-base` lg/xl — inherited by the nested control and by prefix/suffix adornments), the label font scale, and a `min-h-*` floor on the control row from the control-height scale (24/32/36/44/48px). The floor is a minimum, not a fixed height: the row grows for a textarea or any other multi-line control. Defaults to `'md'`. */
|
|
145
162
|
readonly size: i0.InputSignal<TwSize>;
|
|
146
163
|
/** Floating label behavior. `'auto'` floats when focused or non-empty; `'always'` stays floated; `'never'` disables floating entirely (the label wrapper is not rendered and the wrapped control's placeholder is always visible). Defaults to `'auto'`. */
|
|
147
164
|
readonly floatLabel: i0.InputSignal<FloatLabel>;
|
|
@@ -38,7 +38,7 @@ interface TwIconSvgConfig {
|
|
|
38
38
|
* ```html
|
|
39
39
|
* <tw-icon name="star" />
|
|
40
40
|
* <tw-icon name="check" color="success" size="lg" />
|
|
41
|
-
* <tw-icon name="alert-triangle" color="warning"
|
|
41
|
+
* <tw-icon name="alert-triangle" color="warning" aria-label="Warning" />
|
|
42
42
|
* <tw-icon name="star" [svg]="{ strokeWidth: 1.5, absoluteStrokeWidth: true }" />
|
|
43
43
|
* ```
|
|
44
44
|
*/
|
|
@@ -56,7 +56,7 @@ declare class IconComponent {
|
|
|
56
56
|
readonly color: _angular_core.InputSignal<TwIconColor>;
|
|
57
57
|
/** Icon size. Defaults to `'md'` (20px). */
|
|
58
58
|
readonly size: _angular_core.InputSignal<TwSize>;
|
|
59
|
-
/** Accessible label
|
|
59
|
+
/** Accessible label, supplied as the plain `aria-label` attribute. When set, the generated SVG takes `role="img"` plus the label instead of `aria-hidden="true"`. Defaults to `undefined` (icon is decorative, `aria-hidden="true"`). */
|
|
60
60
|
readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
|
|
61
61
|
/**
|
|
62
62
|
* SVG-author configuration: `strokeWidth`, `absoluteStrokeWidth`, `viewBox`.
|
|
@@ -82,7 +82,7 @@ declare class IconComponent {
|
|
|
82
82
|
constructor();
|
|
83
83
|
private renderSvg;
|
|
84
84
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<IconComponent, never>;
|
|
85
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<IconComponent, "tw-icon", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "img": { "alias": "img"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "
|
|
85
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<IconComponent, "tw-icon", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "img": { "alias": "img"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "svg": { "alias": "svg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
/**
|
|
@@ -23,7 +23,7 @@ declare const TW_INPUT_VALUE_ACCESSOR: InjectionToken<{
|
|
|
23
23
|
* and provide under `TW_FORM_FIELD_CONTROL`.
|
|
24
24
|
* - Swap value storage for an existing `<input twInput>` (masked input,
|
|
25
25
|
* date parser, etc.) → provide {@link TW_INPUT_VALUE_ACCESSOR}.
|
|
26
|
-
* - Change when errors show → override
|
|
26
|
+
* - Change when errors show → override `TW_ERROR_STATE_MATCHER` at any
|
|
27
27
|
* injector level, or pass `errorStateMatcher` per instance.
|
|
28
28
|
*
|
|
29
29
|
* Forms integration is inherited: Angular's native value accessors attach to
|
|
@@ -38,9 +38,6 @@ declare class InputDirective extends FormFieldControl<string> implements OnInit
|
|
|
38
38
|
private readonly destroyRef;
|
|
39
39
|
private readonly formField;
|
|
40
40
|
private readonly ngControl;
|
|
41
|
-
private readonly parentForm;
|
|
42
|
-
private readonly parentFormGroup;
|
|
43
|
-
private readonly defaultMatcher;
|
|
44
41
|
private readonly valueAccessor;
|
|
45
42
|
/** @internal */
|
|
46
43
|
readonly _isTextarea: boolean;
|
|
@@ -51,7 +48,7 @@ declare class InputDirective extends FormFieldControl<string> implements OnInit
|
|
|
51
48
|
readonly idInput: _angular_core.InputSignal<string | undefined>;
|
|
52
49
|
/** Native HTML input `type`. Defaults to `'text'`. Dev-mode throws on unsupported values (`checkbox`, `radio`, `submit`, etc.) — use the dedicated component instead. Ignored on `<textarea>`. */
|
|
53
50
|
readonly type: _angular_core.InputSignal<string>;
|
|
54
|
-
/** Density of a standalone field. Maps to the
|
|
51
|
+
/** Density of a standalone field. Maps to the pinned control-height scale (24/32/36/44/48px, `h-6` xs … `h-12` xl), the horizontal-padding scale (`px-2` xs … `px-6` xl), and the font scale (`text-xs` xs, `text-sm` sm/md, `text-base` lg/xl). On a `<textarea>` the height becomes a `min-h-*` floor and the vertical padding is retained. Ignored inside a `<tw-form-field>` — the wrapper's `size` carries density. Defaults to `'md'`. */
|
|
55
52
|
readonly size: _angular_core.InputSignal<TwSize>;
|
|
56
53
|
/** Disables the control. Also reflects `ngControl.disabled` when the element is bound to a reactive form. Defaults to `false`. */
|
|
57
54
|
readonly disabledInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -68,8 +65,8 @@ declare class InputDirective extends FormFieldControl<string> implements OnInit
|
|
|
68
65
|
private readonly _value;
|
|
69
66
|
private readonly _focused;
|
|
70
67
|
private readonly _autofilled;
|
|
71
|
-
|
|
72
|
-
private readonly
|
|
68
|
+
/** @internal Shared `errorState` / `required` / `errors` derivation — see `wireErrorState`. */
|
|
69
|
+
private readonly errorWiring;
|
|
73
70
|
/** @internal */
|
|
74
71
|
readonly id: Signal<string>;
|
|
75
72
|
/** @internal */
|
|
@@ -84,7 +81,7 @@ declare class InputDirective extends FormFieldControl<string> implements OnInit
|
|
|
84
81
|
readonly required: Signal<boolean>;
|
|
85
82
|
/** @internal */
|
|
86
83
|
readonly errorState: Signal<boolean>;
|
|
87
|
-
/** @internal Active validation errors map from the bound `NgControl
|
|
84
|
+
/** @internal Active validation errors map from the bound `NgControl`, for `[twError match="…"]` filtering. */
|
|
88
85
|
readonly errors: Signal<Record<string, unknown> | null>;
|
|
89
86
|
/** @internal */
|
|
90
87
|
readonly classes: Signal<string>;
|
|
@@ -36,7 +36,9 @@ declare class ItemComponent implements OnInit {
|
|
|
36
36
|
readonly descriptionClasses: _angular_core.Signal<string>;
|
|
37
37
|
readonly trailingClasses: _angular_core.Signal<string>;
|
|
38
38
|
ngOnInit(): void;
|
|
39
|
+
/** @internal Emits `selected` on click when the item is interactive and enabled. */
|
|
39
40
|
onActivate(event: Event): void;
|
|
41
|
+
/** @internal Emits `selected` on Enter/Space when the item is interactive and enabled. */
|
|
40
42
|
onKeydown(event: KeyboardEvent): void;
|
|
41
43
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ItemComponent, never>;
|
|
42
44
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ItemComponent, "tw-item", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "current": { "alias": "current"; "required": false; "isSignal": true; }; }, { "selected": "selected"; }, never, ["[twItemLeading]", "[twItemTitle]", "[twItemDescription]", "[twItemTrailing]"], true, never>;
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
|
|
2
|
+
|
|
3
|
+
/** Filters accepted by `MenuItemHarness.with`. */
|
|
4
|
+
interface MenuItemHarnessFilters extends BaseHarnessFilters {
|
|
5
|
+
/** Match by the item's visible text. */
|
|
6
|
+
text?: string | RegExp;
|
|
7
|
+
/** Match disabled / enabled items. */
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
/** Match checked / unchecked checkbox and radio items. Never matches a plain item. */
|
|
10
|
+
checked?: boolean;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Harness for a single item inside an open `tw-menu` panel.
|
|
14
|
+
*
|
|
15
|
+
* Hosts on the ARIA role rather than on the `twMenuItem*` attribute selectors,
|
|
16
|
+
* so one harness covers plain items, checkbox items and radio items — the roles
|
|
17
|
+
* are contributed by the CDK directives `tw-menu` composes and are the same
|
|
18
|
+
* thing assistive technology reads.
|
|
19
|
+
*
|
|
20
|
+
* Items render into the CDK overlay, not inside the trigger, so they are reached
|
|
21
|
+
* through {@link MenuHarness} rather than located directly against a fixture.
|
|
22
|
+
*/
|
|
23
|
+
declare class MenuItemHarness extends ComponentHarness {
|
|
24
|
+
static hostSelector: string;
|
|
25
|
+
/** Predicate for `locatorFor` / `locatorForAll`. */
|
|
26
|
+
static with(options?: MenuItemHarnessFilters): HarnessPredicate<MenuItemHarness>;
|
|
27
|
+
/** The item's rendered text, trimmed. Includes any projected description or shortcut text. */
|
|
28
|
+
getText(): Promise<string>;
|
|
29
|
+
/**
|
|
30
|
+
* The item's ARIA role — `'menuitem'`, `'menuitemcheckbox'` or
|
|
31
|
+
* `'menuitemradio'`. Lets a test tell the three kinds apart.
|
|
32
|
+
*/
|
|
33
|
+
getRole(): Promise<string | null>;
|
|
34
|
+
/** Whether the item reports `aria-disabled="true"`. */
|
|
35
|
+
isDisabled(): Promise<boolean>;
|
|
36
|
+
/**
|
|
37
|
+
* Checked state of a checkbox or radio item, or `null` for a plain item,
|
|
38
|
+
* which carries no `aria-checked` at all.
|
|
39
|
+
*/
|
|
40
|
+
isChecked(): Promise<boolean | null>;
|
|
41
|
+
/** Clicks the item. A disabled item ignores the click, as in the browser. */
|
|
42
|
+
click(): Promise<void>;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/** Filters accepted by `MenuHarness.with`. */
|
|
46
|
+
interface MenuHarnessFilters extends BaseHarnessFilters {
|
|
47
|
+
/** Match by the text rendered in the trigger. */
|
|
48
|
+
triggerText?: string | RegExp;
|
|
49
|
+
}
|
|
50
|
+
/**
|
|
51
|
+
* Harness for a `[twMenuTrigger]` and the `tw-menu` panel it opens.
|
|
52
|
+
*
|
|
53
|
+
* ## Why this is a parallel harness and not a delegating one
|
|
54
|
+
*
|
|
55
|
+
* `tw-menu` composes `CdkMenu` / `CdkMenuItem` through `hostDirectives`, so a
|
|
56
|
+
* thin harness delegating to a CDK one would be preferable — except that
|
|
57
|
+
* `@angular/cdk` ships **no component harnesses at all**. Its only testing
|
|
58
|
+
* entry points are `@angular/cdk/testing`, `@angular/cdk/testing/testbed` and
|
|
59
|
+
* `@angular/cdk/testing/selenium-webdriver`, all of which are harness
|
|
60
|
+
* *infrastructure*; the component harnesses live in `@angular/material/*\/testing`,
|
|
61
|
+
* and `@angular/material` is not a dependency of this library. There is nothing
|
|
62
|
+
* to delegate to. What composition does buy us is that the locators below are
|
|
63
|
+
* ARIA roles and attributes CDK guarantees (`role="menuitem"`,
|
|
64
|
+
* `aria-expanded`, `aria-controls`), not ngx-tw class names.
|
|
65
|
+
*
|
|
66
|
+
* ## Why the host selector is not `[twMenuTrigger]`
|
|
67
|
+
*
|
|
68
|
+
* `twMenuTrigger` takes a required `TemplateRef`, so it is always written as a
|
|
69
|
+
* property binding — `[twMenuTrigger]="menu"` — and Angular renders **no
|
|
70
|
+
* attribute** for a bound input. `[twMenuTrigger]` therefore matches nothing in
|
|
71
|
+
* the DOM. `MenuTriggerDirective` adds no host class or attribute of its own
|
|
72
|
+
* (contrast Material, whose `MatMenuTrigger` adds `.mat-mdc-menu-trigger`
|
|
73
|
+
* precisely so its harness can find it), so the only durable marker is the one
|
|
74
|
+
* CDK contributes: `aria-haspopup="menu"`, bound unconditionally by
|
|
75
|
+
* `CdkMenuTrigger` whenever it has a template. Nothing else in ngx-tw renders
|
|
76
|
+
* that value — `[twContextMenuTrigger]` deliberately renders none — so the match
|
|
77
|
+
* is exact today. If `MenuTriggerDirective` ever grows a host marker, widening
|
|
78
|
+
* this selector to it is a non-breaking change.
|
|
79
|
+
*
|
|
80
|
+
* ## Loading it
|
|
81
|
+
*
|
|
82
|
+
* The host is the trigger, which lives in the fixture, so the ordinary
|
|
83
|
+
* `TestbedHarnessEnvironment.loader(fixture)` is correct. The panel renders into
|
|
84
|
+
* the CDK overlay container outside the fixture, and this harness resolves it
|
|
85
|
+
* internally via `documentRootLocatorFactory()` — a consumer never needs
|
|
86
|
+
* `documentRootLoader`.
|
|
87
|
+
*
|
|
88
|
+
* The panel is located by the id in the trigger's `aria-controls`, so a fixture
|
|
89
|
+
* holding several menus (or an open submenu) still resolves each trigger to its
|
|
90
|
+
* own panel.
|
|
91
|
+
*
|
|
92
|
+
* Only `[twMenuTrigger]` is covered. `[twContextMenuTrigger]` opens on a
|
|
93
|
+
* `contextmenu` event at pointer coordinates and exposes neither `aria-expanded`
|
|
94
|
+
* nor `aria-haspopup`; it is deliberately out of scope.
|
|
95
|
+
*/
|
|
96
|
+
declare class MenuHarness extends ComponentHarness {
|
|
97
|
+
static hostSelector: string;
|
|
98
|
+
/** Predicate for `locatorFor` / `locatorForAll`. */
|
|
99
|
+
static with(options?: MenuHarnessFilters): HarnessPredicate<MenuHarness>;
|
|
100
|
+
/** The text currently rendered in the trigger, trimmed. */
|
|
101
|
+
getTriggerText(): Promise<string>;
|
|
102
|
+
/** Whether the menu is open, read from the trigger's `aria-expanded`. */
|
|
103
|
+
isOpen(): Promise<boolean>;
|
|
104
|
+
/** Opens the menu by clicking the trigger. No-op when already open. */
|
|
105
|
+
open(): Promise<void>;
|
|
106
|
+
/** Closes the menu by clicking the trigger again. No-op when already closed. */
|
|
107
|
+
close(): Promise<void>;
|
|
108
|
+
/**
|
|
109
|
+
* Every item in the open panel — plain, checkbox and radio alike. Returns an
|
|
110
|
+
* empty array when the menu is closed, because CDK removes the panel from the
|
|
111
|
+
* DOM rather than hiding it.
|
|
112
|
+
*/
|
|
113
|
+
getItems(filters?: MenuItemHarnessFilters): Promise<MenuItemHarness[]>;
|
|
114
|
+
/**
|
|
115
|
+
* Opens the menu if needed and clicks the first item whose text matches.
|
|
116
|
+
* Throws when nothing matches, rather than failing silently.
|
|
117
|
+
*
|
|
118
|
+
* CDK closes the menu when an item is activated, so a `getItems()` chained
|
|
119
|
+
* after this returns an empty array — call {@link open} again before
|
|
120
|
+
* re-reading item state.
|
|
121
|
+
*/
|
|
122
|
+
clickItem(text: string | RegExp): Promise<void>;
|
|
123
|
+
/**
|
|
124
|
+
* A loader rooted at this trigger's own panel, or `null` when the menu is
|
|
125
|
+
* closed. Scoping by `aria-controls` keeps sibling menus and submenus apart.
|
|
126
|
+
*/
|
|
127
|
+
private getPanelLoader;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
export { MenuHarness, MenuItemHarness };
|
|
131
|
+
export type { MenuHarnessFilters, MenuItemHarnessFilters };
|
|
@@ -6,9 +6,9 @@ import { TwSize, TwColor } from '@cdevhub/ngx-tw/core';
|
|
|
6
6
|
declare class MenuComponent {
|
|
7
7
|
/** Controls item density and padding. Defaults to `'md'`. */
|
|
8
8
|
readonly size: i0.InputSignal<TwSize>;
|
|
9
|
-
/** Accessible label for the menu panel. Use when no visible heading describes the menu (e.g. a kebab-icon trigger). */
|
|
9
|
+
/** Accessible label for the menu panel. Use when no visible heading describes the menu (e.g. a kebab-icon trigger). Defaults to `undefined`. Alias: `aria-label`. */
|
|
10
10
|
readonly ariaLabel: i0.InputSignal<string | undefined>;
|
|
11
|
-
/** ID of an element that labels the menu panel. Ignored when `ariaLabel` is set. */
|
|
11
|
+
/** ID of an element that labels the menu panel. Ignored when `ariaLabel` is set. Defaults to `undefined`. Alias: `aria-labelledby`. */
|
|
12
12
|
readonly ariaLabelledBy: i0.InputSignal<string | undefined>;
|
|
13
13
|
readonly classes: i0.Signal<string>;
|
|
14
14
|
static ɵfac: i0.ɵɵFactoryDeclaration<MenuComponent, never>;
|
|
@@ -42,6 +42,26 @@ declare class NumberInputDirective implements ControlValueAccessor {
|
|
|
42
42
|
readonly disabled: _angular_core.Signal<boolean>;
|
|
43
43
|
/** True when the host input carries the `readonly` attribute (static / declarative, seeded after render). A runtime toggle of the bare `readonly` attribute is not reactively tracked (v2). Read by the companion stepper so its buttons disable in lock-step. */
|
|
44
44
|
readonly readonly: _angular_core.Signal<boolean>;
|
|
45
|
+
/**
|
|
46
|
+
* @internal `aria-disabled` for the host `<input>`.
|
|
47
|
+
*
|
|
48
|
+
* Derived from the CVA disabled state ALONE, deliberately not from
|
|
49
|
+
* {@link disabled}. Three reasons, in order of weight:
|
|
50
|
+
*
|
|
51
|
+
* 1. It is the only case that needs the attribute. When the element is
|
|
52
|
+
* natively disabled (`el.disabled`, whether from a static attribute or
|
|
53
|
+
* from the sibling `InputDirective`'s `[disabled]` binding) assistive tech
|
|
54
|
+
* already has the state. The gap is `setDisabledState(true)` on a
|
|
55
|
+
* standalone `input[twNumberInput]` — no sibling directive, so nothing
|
|
56
|
+
* writes the native property and the spinbutton looked enabled.
|
|
57
|
+
* 2. `disabled` reads the non-reactive `el.disabled`. Read from a host
|
|
58
|
+
* binding it would memoize during the host-binding phase, so its value
|
|
59
|
+
* would depend on which of the two directives on the element runs first —
|
|
60
|
+
* and could latch a stale `true` across a `control.enable()`.
|
|
61
|
+
* 3. `[disabled]` itself is not an option: `InputDirective` already binds it,
|
|
62
|
+
* and this directive's `disabled` reads the very property it would write.
|
|
63
|
+
*/
|
|
64
|
+
readonly ariaDisabled: _angular_core.Signal<"true" | null>;
|
|
45
65
|
/** @internal Mobile-keyboard hint: `'numeric'` for integer-only formats, else `'decimal'`. */
|
|
46
66
|
readonly inputMode: _angular_core.Signal<"numeric" | "decimal">;
|
|
47
67
|
/** @internal Locale group / decimal separators, memoized per `locale()`. */
|
|
@@ -11,36 +11,44 @@ type TwPaginatorLayout = 'compact' | 'spread';
|
|
|
11
11
|
type TwPaginatorResponsive = 'auto' | 'off';
|
|
12
12
|
/** Named slot accepted by `*twPaginatorLabel`. */
|
|
13
13
|
type TwPaginatorLabelSlot = 'pageInfo' | 'previous' | 'next' | 'first' | 'last' | 'pageSizeLabel';
|
|
14
|
-
/**
|
|
14
|
+
/**
|
|
15
|
+
* String labels used throughout the paginator.
|
|
16
|
+
*
|
|
17
|
+
* Every member is optional. This interface only ever reaches consumers through
|
|
18
|
+
* `input<Partial<TwPaginatorLabels>>`, and unset keys fall back to the English
|
|
19
|
+
* defaults — so a consumer holding an i18n bundle typed as `TwPaginatorLabels`
|
|
20
|
+
* must not be forced to restate all fourteen keys, and adding a label in a
|
|
21
|
+
* future minor must not break them on a non-major release.
|
|
22
|
+
*/
|
|
15
23
|
interface TwPaginatorLabels {
|
|
16
24
|
/** Accessible name for the `<nav>` landmark. */
|
|
17
|
-
ariaLabel
|
|
25
|
+
ariaLabel?: string;
|
|
18
26
|
/** Label on the Previous button. */
|
|
19
|
-
previous
|
|
27
|
+
previous?: string;
|
|
20
28
|
/** Label on the Next button. */
|
|
21
|
-
next
|
|
29
|
+
next?: string;
|
|
22
30
|
/** Label on the First-page button. */
|
|
23
|
-
first
|
|
31
|
+
first?: string;
|
|
24
32
|
/** Label on the Last-page button. */
|
|
25
|
-
last
|
|
33
|
+
last?: string;
|
|
26
34
|
/** Visible label before the current-page indicator. Used as `"{pageInfo} {page}{pageInfoSeparator}{totalPages}"`. */
|
|
27
|
-
pageInfo
|
|
35
|
+
pageInfo?: string;
|
|
28
36
|
/** Text that joins the current page and total. */
|
|
29
|
-
pageInfoSeparator
|
|
37
|
+
pageInfoSeparator?: string;
|
|
30
38
|
/** Range-style page info template. Variables: `{start}`, `{end}`, `{total}`. */
|
|
31
|
-
pageRange
|
|
39
|
+
pageRange?: string;
|
|
32
40
|
/** Visible label next to the page-size selector. */
|
|
33
|
-
pageSizeLabel
|
|
41
|
+
pageSizeLabel?: string;
|
|
34
42
|
/** `LiveAnnouncer` template used on every page change. Variables: `{page}`, `{totalPages}`, `{start}`, `{end}`, `{total}`. */
|
|
35
|
-
announcement
|
|
43
|
+
announcement?: string;
|
|
36
44
|
/** Accessible label per numbered page button. Variable: `{page}`. */
|
|
37
|
-
pageButtonAriaLabel
|
|
45
|
+
pageButtonAriaLabel?: string;
|
|
38
46
|
/** Accessible label for the current numbered page button. Variable: `{page}`. */
|
|
39
|
-
currentPageAriaLabel
|
|
47
|
+
currentPageAriaLabel?: string;
|
|
40
48
|
/** Accessible label applied to ellipsis items. */
|
|
41
|
-
ellipsis
|
|
49
|
+
ellipsis?: string;
|
|
42
50
|
/** Rendered when `hideOnEmpty` is `false` and `totalItems === 0`. */
|
|
43
|
-
empty
|
|
51
|
+
empty?: string;
|
|
44
52
|
}
|
|
45
53
|
/** Emitted by `pageChange`. */
|
|
46
54
|
interface TwPaginatorPageChangeEvent {
|
|
@@ -143,7 +151,7 @@ declare class PaginatorPageSizeSelectorDirective {
|
|
|
143
151
|
*/
|
|
144
152
|
declare class PaginatorFocusableDirective implements FocusableOption {
|
|
145
153
|
readonly elementRef: ElementRef<any>;
|
|
146
|
-
/** When true, the element is skipped by `FocusKeyManager` roving focus. */
|
|
154
|
+
/** When true, the element is skipped by `FocusKeyManager` roving focus. Defaults to `false`. */
|
|
147
155
|
readonly isDisabled: _angular_core.InputSignal<boolean>;
|
|
148
156
|
focus(): void;
|
|
149
157
|
/**
|
|
@@ -158,9 +166,9 @@ declare class PaginatorFocusableDirective implements FocusableOption {
|
|
|
158
166
|
declare class PaginatorComponent {
|
|
159
167
|
/** Total number of items across all pages. Defaults to `0`. */
|
|
160
168
|
readonly totalItems: _angular_core.InputSignal<number>;
|
|
161
|
-
/** Items per page. Two-way bindable via `[(pageSize)]
|
|
169
|
+
/** Items per page. Two-way bindable via `[(pageSize)]`; writes back when the user picks a different size in the page-size selector. Defaults to `10`. */
|
|
162
170
|
readonly pageSize: _angular_core.ModelSignal<number>;
|
|
163
|
-
/** 1-based current page. Two-way bindable via `[(page)]
|
|
171
|
+
/** 1-based current page. Two-way bindable via `[(page)]`; writes back when the user navigates, and whenever the value is clamped into the valid `1…totalPages` range. Defaults to `1`. */
|
|
164
172
|
readonly page: _angular_core.ModelSignal<number>;
|
|
165
173
|
/** Rendering type. Defaults to `'numbered'`. */
|
|
166
174
|
readonly type: _angular_core.InputSignal<TwPaginatorType>;
|
|
@@ -174,15 +182,15 @@ declare class PaginatorComponent {
|
|
|
174
182
|
readonly siblingCount: _angular_core.InputSignal<number>;
|
|
175
183
|
/** How many pages to always show at the start and end boundaries. Defaults to `1`. */
|
|
176
184
|
readonly boundaryCount: _angular_core.InputSignal<number>;
|
|
177
|
-
/** When true, renders jump-to-first and jump-to-last buttons. Defaults to `true
|
|
185
|
+
/** When true, renders jump-to-first and jump-to-last buttons. Defaults to `true` — first/last jumps are the standard pagination affordance for any list large enough to need a paginator; the special case is a compact paginator that opts out. */
|
|
178
186
|
readonly showFirstLastButtons: _angular_core.InputSignal<boolean>;
|
|
179
187
|
/** When true, renders the page-size selector region. Defaults to `false`. */
|
|
180
188
|
readonly showPageSizeSelector: _angular_core.InputSignal<boolean>;
|
|
181
189
|
/** Options for the default page-size selector. Ignored when `*twPaginatorPageSizeSelector` is projected. Defaults to `[10, 25, 50, 100]`. */
|
|
182
190
|
readonly pageSizeOptions: _angular_core.InputSignal<readonly number[]>;
|
|
183
|
-
/** When true, renders the page-info text region. Defaults to `true
|
|
191
|
+
/** When true, renders the page-info text region. Defaults to `true` — showing "X–Y of Z" is the expected pagination context; the special case is an ultra-compact paginator in tight UI that opts out. */
|
|
184
192
|
readonly showPageInfo: _angular_core.InputSignal<boolean>;
|
|
185
|
-
/** When true, renders nothing when `totalItems === 0`. Defaults to `true
|
|
193
|
+
/** When true, renders nothing when `totalItems === 0`. Defaults to `true` — hiding the paginator on empty data is the expected UX; the special case is a layout that opts out to reserve the paginator's vertical space. */
|
|
186
194
|
readonly hideOnEmpty: _angular_core.InputSignal<boolean>;
|
|
187
195
|
/** When true, renders nothing when `totalPages <= 1`. Defaults to `false`. */
|
|
188
196
|
readonly hideOnSinglePage: _angular_core.InputSignal<boolean>;
|
|
@@ -194,7 +202,16 @@ declare class PaginatorComponent {
|
|
|
194
202
|
readonly labels: _angular_core.InputSignal<Partial<TwPaginatorLabels>>;
|
|
195
203
|
/** When provided, buttons render as anchor links using the returned `href`. Defaults to `undefined` (renders as buttons). */
|
|
196
204
|
readonly linkFactory: _angular_core.InputSignal<((page: number) => string) | undefined>;
|
|
197
|
-
/**
|
|
205
|
+
/**
|
|
206
|
+
* Overrides `labels.ariaLabel` for the root `<nav>` element. Bound as `aria-label`.
|
|
207
|
+
* Defaults to `undefined` (the resolved `labels.ariaLabel` is used).
|
|
208
|
+
*
|
|
209
|
+
* The host renders as a `navigation` landmark, so a page showing more than one
|
|
210
|
+
* paginator (the common "controls above and below a table" shape) MUST give each
|
|
211
|
+
* one a distinct name here — two landmarks of the same role sharing an accessible
|
|
212
|
+
* name are indistinguishable to a screen-reader landmark list (axe:
|
|
213
|
+
* `landmark-unique`).
|
|
214
|
+
*/
|
|
198
215
|
readonly customAriaLabel: _angular_core.InputSignal<string | undefined>;
|
|
199
216
|
/** Fires when `page` or `pageSize` changes. Payload includes derived helpers (`start`, `end`, `totalPages`, `source`). Use `[(page)]` / `[(pageSize)]` for two-way binding; subscribe to this for the rich event payload. */
|
|
200
217
|
readonly paginated: _angular_core.OutputEmitterRef<TwPaginatorPageChangeEvent>;
|
|
@@ -206,6 +223,11 @@ declare class PaginatorComponent {
|
|
|
206
223
|
readonly pageSizeSelectorDirective: _angular_core.Signal<PaginatorPageSizeSelectorDirective | undefined>;
|
|
207
224
|
private readonly _liveAnnouncer;
|
|
208
225
|
private readonly _elementRef;
|
|
226
|
+
/**
|
|
227
|
+
* Optional so a consumer that never imports `BidiModule` still gets a working
|
|
228
|
+
* paginator — the key manager falls back to `'ltr'` when the token is absent.
|
|
229
|
+
*/
|
|
230
|
+
private readonly _directionality;
|
|
209
231
|
/** @internal All nav-group focusables (first/prev/page/next/last) for `FocusKeyManager`. */
|
|
210
232
|
readonly focusableItems: _angular_core.Signal<readonly PaginatorFocusableDirective[]>;
|
|
211
233
|
private readonly _componentId;
|
|
@@ -223,8 +245,20 @@ declare class PaginatorComponent {
|
|
|
223
245
|
readonly endItem: _angular_core.Signal<number>;
|
|
224
246
|
/** @internal Visible page range for the numbered type. */
|
|
225
247
|
readonly range: _angular_core.Signal<PaginationRangeItem[]>;
|
|
226
|
-
/**
|
|
227
|
-
|
|
248
|
+
/**
|
|
249
|
+
* @internal Merged labels.
|
|
250
|
+
*
|
|
251
|
+
* Explicitly-undefined keys are dropped before merging. Root `tsconfig.json`
|
|
252
|
+
* does not set `exactOptionalPropertyTypes`, so
|
|
253
|
+
* `[labels]="{ pageButtonAriaLabel: i18n.pageBtn }"` type-checks even when
|
|
254
|
+
* the i18n bundle has no such key — and a plain spread would then overwrite
|
|
255
|
+
* the default with `undefined`, which reaches `formatLabel()` and throws
|
|
256
|
+
* `Cannot read properties of undefined (reading 'replace')` inside a
|
|
257
|
+
* `computed`, taking the whole page down on first render. Same filter
|
|
258
|
+
* `table.ts` and `timeline.ts` already use; `Required<>` then guarantees the
|
|
259
|
+
* template a string for every label.
|
|
260
|
+
*/
|
|
261
|
+
readonly resolvedLabels: _angular_core.Signal<Required<TwPaginatorLabels>>;
|
|
228
262
|
/** @internal Resolved aria-label for the root. */
|
|
229
263
|
readonly resolvedAriaLabel: _angular_core.Signal<string>;
|
|
230
264
|
/** @internal `container-name` for the CSS container query (set only when responsive="auto"). */
|
|
@@ -19,8 +19,22 @@ interface PopoverRef {
|
|
|
19
19
|
_removeAriaLabelledBy?: (id: string) => void;
|
|
20
20
|
}
|
|
21
21
|
/** Injection token providing arbitrary data to popover component content. */
|
|
22
|
-
declare const
|
|
22
|
+
declare const TW_POPOVER_DATA: InjectionToken<unknown>;
|
|
23
23
|
/** Injection token providing a `PopoverRef` to popover component content. */
|
|
24
|
+
declare const TW_POPOVER_REF: InjectionToken<PopoverRef>;
|
|
25
|
+
/**
|
|
26
|
+
* @deprecated Renamed to {@link TW_POPOVER_DATA} for consistency with every
|
|
27
|
+
* other ngx-tw injection token. This is the *same token instance*, not a copy —
|
|
28
|
+
* providing under either name and injecting under the other resolves — so the
|
|
29
|
+
* rename is safe to adopt incrementally. Removed in the next major.
|
|
30
|
+
*/
|
|
31
|
+
declare const POPOVER_DATA: InjectionToken<unknown>;
|
|
32
|
+
/**
|
|
33
|
+
* @deprecated Renamed to {@link TW_POPOVER_REF} for consistency with every
|
|
34
|
+
* other ngx-tw injection token. This is the *same token instance*, not a copy —
|
|
35
|
+
* providing under either name and injecting under the other resolves — so the
|
|
36
|
+
* rename is safe to adopt incrementally. Removed in the next major.
|
|
37
|
+
*/
|
|
24
38
|
declare const POPOVER_REF: InjectionToken<PopoverRef>;
|
|
25
39
|
|
|
26
40
|
/** Placement position of the popover relative to its trigger element. */
|
|
@@ -40,31 +54,31 @@ declare class PopoverDirective {
|
|
|
40
54
|
readonly twPopoverTriggerOn: _angular_core.InputSignal<PopoverTrigger>;
|
|
41
55
|
/** When true, all trigger interactions are suppressed. Defaults to `false`. */
|
|
42
56
|
readonly twPopoverDisabled: _angular_core.InputSignal<boolean>;
|
|
43
|
-
/** Two-way bindable open state. Setting to `true` opens the popover; the popover sets it to `false` on close. */
|
|
57
|
+
/** Two-way bindable open state. Setting to `true` opens the popover; the popover sets it to `false` on close. Defaults to `false`. */
|
|
44
58
|
readonly twPopoverOpen: _angular_core.ModelSignal<boolean>;
|
|
45
59
|
/** Controls panel padding using the standard spacing scale. Defaults to `'md'`. */
|
|
46
60
|
readonly twPopoverSize: _angular_core.InputSignal<TwSize>;
|
|
47
61
|
/** Pixel distance between trigger and panel edge. Defaults to `8`. */
|
|
48
62
|
readonly twPopoverOffset: _angular_core.InputSignal<number>;
|
|
49
|
-
/** Whether to render a directional arrow pointing at the trigger. Defaults to `true
|
|
63
|
+
/** Whether to render a directional arrow pointing at the trigger. Defaults to `true` — the arrow is the visual anchor tying the panel to its trigger; the special case is a compact iconic trigger where the arrow would crowd the layout. */
|
|
50
64
|
readonly twPopoverArrow: _angular_core.InputSignal<boolean>;
|
|
51
65
|
/** Backdrop behavior. `'transparent'` catches outside clicks invisibly. `'dimmed'` adds a semi-transparent overlay. `'none'` disables the backdrop. Defaults to `'transparent'`. */
|
|
52
66
|
readonly twPopoverBackdrop: _angular_core.InputSignal<PopoverBackdrop>;
|
|
53
|
-
/** Whether clicking outside the panel closes the popover. Only relevant when backdrop is `'none'`. Defaults to `true
|
|
67
|
+
/** Whether clicking outside the panel closes the popover. Only relevant when backdrop is `'none'`. Defaults to `true` — clicking away is the universal dismiss gesture for floating panels; the special case is a popover owning a multi-step flow the user must complete. */
|
|
54
68
|
readonly twPopoverCloseOnOutside: _angular_core.InputSignal<boolean>;
|
|
55
|
-
/** Whether pressing Escape closes the popover. Defaults to `true
|
|
69
|
+
/** Whether pressing Escape closes the popover. Defaults to `true` — the WAI-ARIA dialog pattern mandates that Escape closes; the special case is a popover owning a child layer (nested dialog or menu) that should consume Escape first. */
|
|
56
70
|
readonly twPopoverCloseOnEscape: _angular_core.InputSignal<boolean>;
|
|
57
71
|
/** CDK scroll strategy for the overlay. Defaults to `'reposition'`. */
|
|
58
72
|
readonly twPopoverScrollStrategy: _angular_core.InputSignal<PopoverScrollStrategy>;
|
|
59
|
-
/** Whether to trap focus inside the popover panel using CDK FocusTrapFactory. Defaults to `true
|
|
73
|
+
/** Whether to trap focus inside the popover panel using CDK FocusTrapFactory. Defaults to `true` — it matches the `role="dialog"` baseline, where a focus-trapped panel announces itself as modal; the special case is an inline popover acting as an informational tooltip. */
|
|
60
74
|
readonly twPopoverTrapFocus: _angular_core.InputSignal<boolean>;
|
|
61
|
-
/** Arbitrary data passed to template context or component via `
|
|
75
|
+
/** Arbitrary data passed to template context or component via `TW_POPOVER_DATA` token. Defaults to `undefined`. */
|
|
62
76
|
readonly twPopoverData: _angular_core.InputSignal<unknown>;
|
|
63
|
-
/** Additional CSS classes applied to the overlay panel for consumer customization. */
|
|
77
|
+
/** Additional CSS classes applied to the overlay panel for consumer customization. Defaults to an empty string. */
|
|
64
78
|
readonly twPopoverPanelClass: _angular_core.InputSignal<string | string[]>;
|
|
65
79
|
/** Optional semantic color. When set, adds a colored top border accent to the panel. */
|
|
66
80
|
readonly twPopoverColor: _angular_core.InputSignal<TwColor | undefined>;
|
|
67
|
-
/** Explicit `aria-label` for the dialog panel. */
|
|
81
|
+
/** Explicit `aria-label` for the dialog panel. Defaults to `undefined`. */
|
|
68
82
|
readonly twPopoverAriaLabel: _angular_core.InputSignal<string | undefined>;
|
|
69
83
|
/** Fires after the popover becomes visible. */
|
|
70
84
|
readonly twPopoverOpened: _angular_core.OutputEmitterRef<void>;
|
|
@@ -80,6 +94,10 @@ declare class PopoverDirective {
|
|
|
80
94
|
private popoverInstance;
|
|
81
95
|
private focusTrap;
|
|
82
96
|
private perOpenSubs;
|
|
97
|
+
/** The `twPopoverBackdrop` value baked into the current `overlayRef`. */
|
|
98
|
+
private appliedBackdrop;
|
|
99
|
+
/** The `twPopoverScrollStrategy` value baked into the current `overlayRef`. */
|
|
100
|
+
private appliedScrollStrategy;
|
|
83
101
|
private closing;
|
|
84
102
|
private closeTimer;
|
|
85
103
|
/** Tracked focus-blur close timer; cleared on destroy so it can't fire post-teardown. */
|
|
@@ -104,6 +122,19 @@ declare class PopoverDirective {
|
|
|
104
122
|
private closePopover;
|
|
105
123
|
private currentPositionStrategy;
|
|
106
124
|
private buildPositionStrategy;
|
|
125
|
+
/**
|
|
126
|
+
* Ensures an `OverlayRef` exists whose creation-time configuration matches the
|
|
127
|
+
* current inputs. Returns `true` when a fresh ref was built.
|
|
128
|
+
*
|
|
129
|
+
* `hasBackdrop` / `backdropClass` are read by CDK inside `OverlayRef.attach()`
|
|
130
|
+
* straight off the config object handed to `Overlay.create()`, and there is no
|
|
131
|
+
* public setter that re-renders them. Since closing only detaches, a ref built
|
|
132
|
+
* on the first open would otherwise keep the first open's backdrop for the
|
|
133
|
+
* directive's whole lifetime — while `subscribePerOpen` re-reads
|
|
134
|
+
* `twPopoverBackdrop` every open to decide whether backdrop-click closes, so
|
|
135
|
+
* the two reads of one input disagreed. Rebuilding only when a creation-time
|
|
136
|
+
* input actually changed keeps the common reopen path on the same ref.
|
|
137
|
+
*/
|
|
107
138
|
private ensureOverlay;
|
|
108
139
|
private updatePositionStrategy;
|
|
109
140
|
private subscribePerOpen;
|
|
@@ -161,5 +192,5 @@ declare class PopoverTitleDirective implements OnInit, OnDestroy {
|
|
|
161
192
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<PopoverTitleDirective, "[twPopoverTitle], tw-popover-title", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
162
193
|
}
|
|
163
194
|
|
|
164
|
-
export { POPOVER_DATA, POPOVER_REF, PopoverCloseDirective, PopoverDirective, PopoverTitleDirective };
|
|
195
|
+
export { POPOVER_DATA, POPOVER_REF, PopoverCloseDirective, PopoverDirective, PopoverTitleDirective, TW_POPOVER_DATA, TW_POPOVER_REF };
|
|
165
196
|
export type { PopoverBackdrop, PopoverPosition, PopoverRef, PopoverScrollStrategy, PopoverTemplateContext, PopoverTrigger };
|