@doku-com/tala 1.0.0-alpha.6 → 1.0.0-alpha.7
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/fesm2022/doku-com-tala.mjs +380 -154
- package/fesm2022/doku-com-tala.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/_typography.scss +42 -23
- package/styles/index.scss +6 -6
- package/styles/tokens/_color.scss +74 -117
- package/types/doku-com-tala.d.ts +205 -51
- package/llms.txt +0 -244
|
@@ -1,25 +1,21 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
═══════════════════════════════════════════════ */
|
|
2
|
+
// ══════════════════════════════════════════════════════════════════════════════════════════════
|
|
3
|
+
// REFERENCE
|
|
4
|
+
// Raw palette values. Never use directly in components — use system tokens instead.
|
|
5
|
+
// ══════════════════════════════════════════════════════════════════════════════════════════════
|
|
7
6
|
|
|
8
|
-
|
|
9
|
-
--tala-ref-color-red-5: #fff0f0;
|
|
7
|
+
--tala-ref-color-red-5: #fff0ef;
|
|
10
8
|
--tala-ref-color-red-10: #ffd6d5;
|
|
11
9
|
--tala-ref-color-red-20: #ff9b99;
|
|
12
10
|
--tala-ref-color-red-30: #f76b68;
|
|
13
|
-
--tala-ref-color-red-40: #
|
|
14
|
-
--tala-ref-color-red-50: #
|
|
15
|
-
--tala-ref-color-red-60: #
|
|
16
|
-
--tala-ref-color-red-65: #b91c1c;
|
|
11
|
+
--tala-ref-color-red-40: #ef4441;
|
|
12
|
+
--tala-ref-color-red-50: #e1261b;
|
|
13
|
+
--tala-ref-color-red-60: #c41e16;
|
|
17
14
|
--tala-ref-color-red-70: #a0170f;
|
|
18
15
|
--tala-ref-color-red-80: #7d110a;
|
|
19
|
-
--tala-ref-color-red-90: #
|
|
20
|
-
--tala-ref-color-red-100: #
|
|
16
|
+
--tala-ref-color-red-90: #5c0a06;
|
|
17
|
+
--tala-ref-color-red-100: #3a0604;
|
|
21
18
|
|
|
22
|
-
/* Neutral */
|
|
23
19
|
--tala-ref-color-neutral-0: #ffffff;
|
|
24
20
|
--tala-ref-color-neutral-5: #f7f7f8;
|
|
25
21
|
--tala-ref-color-neutral-10: #f0f0f2;
|
|
@@ -33,81 +29,64 @@
|
|
|
33
29
|
--tala-ref-color-neutral-90: #1e1e26;
|
|
34
30
|
--tala-ref-color-neutral-100: #09090d;
|
|
35
31
|
|
|
36
|
-
|
|
37
|
-
--tala-ref-color-green-5: #f0fbf6;
|
|
32
|
+
--tala-ref-color-green-5: #f0fbf5;
|
|
38
33
|
--tala-ref-color-green-10: #d1f0e3;
|
|
39
34
|
--tala-ref-color-green-20: #a3dbca;
|
|
40
|
-
--tala-ref-color-green-30: #
|
|
41
|
-
--tala-ref-color-green-40: #
|
|
35
|
+
--tala-ref-color-green-30: #4bb98a;
|
|
36
|
+
--tala-ref-color-green-40: #23a470;
|
|
42
37
|
--tala-ref-color-green-50: #008856;
|
|
43
38
|
--tala-ref-color-green-60: #006b44;
|
|
44
|
-
--tala-ref-color-green-
|
|
45
|
-
--tala-ref-color-green-70: #005436;
|
|
39
|
+
--tala-ref-color-green-70: #015437;
|
|
46
40
|
--tala-ref-color-green-80: #003d28;
|
|
47
41
|
--tala-ref-color-green-90: #00261a;
|
|
48
42
|
--tala-ref-color-green-100: #00100c;
|
|
49
43
|
|
|
50
|
-
/* Amber */
|
|
51
44
|
--tala-ref-color-amber-5: #fffbf0;
|
|
52
45
|
--tala-ref-color-amber-10: #fef3c7;
|
|
53
46
|
--tala-ref-color-amber-20: #fde68a;
|
|
54
47
|
--tala-ref-color-amber-30: #ffd24a;
|
|
55
|
-
--tala-ref-color-amber-40: #
|
|
56
|
-
--tala-ref-color-amber-50: #
|
|
57
|
-
--tala-ref-color-amber-60: #
|
|
58
|
-
--tala-ref-color-amber-
|
|
59
|
-
--tala-ref-color-amber-70: #78350f;
|
|
48
|
+
--tala-ref-color-amber-40: #d97707;
|
|
49
|
+
--tala-ref-color-amber-50: #b4530a;
|
|
50
|
+
--tala-ref-color-amber-60: #92400f;
|
|
51
|
+
--tala-ref-color-amber-70: #783510;
|
|
60
52
|
--tala-ref-color-amber-80: #5e2a0c;
|
|
61
53
|
--tala-ref-color-amber-90: #451e08;
|
|
62
54
|
--tala-ref-color-amber-100: #2d1206;
|
|
63
55
|
|
|
64
|
-
/* Blue */
|
|
65
56
|
--tala-ref-color-blue-5: #f0f6ff;
|
|
66
57
|
--tala-ref-color-blue-10: #dbeafe;
|
|
67
|
-
--tala-ref-color-blue-20: #
|
|
58
|
+
--tala-ref-color-blue-20: #c0dbfe;
|
|
68
59
|
--tala-ref-color-blue-30: #6aabfd;
|
|
69
60
|
--tala-ref-color-blue-40: #3b82f6;
|
|
70
|
-
--tala-ref-color-blue-50: #
|
|
71
|
-
--tala-ref-color-blue-60: #
|
|
72
|
-
--tala-ref-color-blue-
|
|
73
|
-
--tala-ref-color-blue-70: #1e3a8a;
|
|
61
|
+
--tala-ref-color-blue-50: #1e4ed8;
|
|
62
|
+
--tala-ref-color-blue-60: #1f40af;
|
|
63
|
+
--tala-ref-color-blue-70: #1e3b8a;
|
|
74
64
|
--tala-ref-color-blue-80: #1a3070;
|
|
75
65
|
--tala-ref-color-blue-90: #142558;
|
|
76
|
-
--tala-ref-color-blue-100: #
|
|
66
|
+
--tala-ref-color-blue-100: #0b1840;
|
|
77
67
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
68
|
+
// Miscellaneous
|
|
69
|
+
--tala-ref-color-misc-red-1: #b91c1b;
|
|
70
|
+
--tala-ref-color-misc-green-1: #005535;
|
|
71
|
+
--tala-ref-color-misc-amber-1: #734a01;
|
|
72
|
+
--tala-ref-color-misc-blue-1: #09469e;
|
|
73
|
+
|
|
74
|
+
// ══════════════════════════════════════════════════════════════════════════════════════════════
|
|
75
|
+
// SYSTEM
|
|
76
|
+
// Role-based tokens. Use these in components.
|
|
77
|
+
// Never reference primitives directly.
|
|
78
|
+
// ══════════════════════════════════════════════════════════════════════════════════════════════
|
|
79
|
+
|
|
80
|
+
--tala-sys-color-background-base: var(--tala-ref-color-neutral-0);
|
|
81
|
+
--tala-sys-color-background-subtle: var(--tala-ref-color-neutral-5);
|
|
82
|
+
--tala-sys-color-background-muted: var(--tala-ref-color-neutral-10);
|
|
83
|
+
--tala-sys-color-background-inverse: var(--tala-ref-color-neutral-100);
|
|
83
84
|
|
|
84
|
-
/* ── Surface ──────────────────────────────────────────────────────────────
|
|
85
|
-
Background layers that establish visual depth.
|
|
86
|
-
Use to differentiate page regions — not for interactive or status color.
|
|
87
|
-
sunken → recessed areas like inputs or code blocks
|
|
88
|
-
default → base page and standard cards
|
|
89
|
-
raised → cards or panels that sit above the page
|
|
90
|
-
overlay → modals, drawers, and popovers
|
|
91
|
-
inverse → dark/inverted sections
|
|
92
|
-
──────────────────────────────────────────────────────────────────────── */
|
|
93
85
|
--tala-sys-color-surface-sunken: var(--tala-ref-color-neutral-5);
|
|
94
86
|
--tala-sys-color-surface-default: var(--tala-ref-color-neutral-0);
|
|
95
87
|
--tala-sys-color-surface-raised: var(--tala-ref-color-neutral-0);
|
|
96
88
|
--tala-sys-color-surface-overlay: var(--tala-ref-color-neutral-0);
|
|
97
|
-
--tala-sys-color-surface-inverse: var(--tala-ref-color-neutral-100);
|
|
98
89
|
|
|
99
|
-
/* ── Text ──────────────────────────────────────────────────────────────────
|
|
100
|
-
Controls text legibility and visual hierarchy.
|
|
101
|
-
Use the hierarchy variants (primary → tertiary) to guide reading order,
|
|
102
|
-
not to convey status or meaning.
|
|
103
|
-
primary → main body copy and headings
|
|
104
|
-
secondary → supporting labels, captions, and metadata
|
|
105
|
-
tertiary → de-emphasized hints or supplemental info
|
|
106
|
-
disabled → non-interactive / unavailable text
|
|
107
|
-
inverse → text on dark or inverse surfaces
|
|
108
|
-
placeholder → input placeholder copy
|
|
109
|
-
link → interactive inline links
|
|
110
|
-
──────────────────────────────────────────────────────────────────────── */
|
|
111
90
|
--tala-sys-color-text-primary: var(--tala-ref-color-neutral-100);
|
|
112
91
|
--tala-sys-color-text-secondary: var(--tala-ref-color-neutral-70);
|
|
113
92
|
--tala-sys-color-text-tertiary: var(--tala-ref-color-neutral-50);
|
|
@@ -115,64 +94,42 @@
|
|
|
115
94
|
--tala-sys-color-text-inverse: var(--tala-ref-color-neutral-0);
|
|
116
95
|
--tala-sys-color-text-placeholder: var(--tala-ref-color-neutral-40);
|
|
117
96
|
--tala-sys-color-text-link: var(--tala-ref-color-red-50);
|
|
97
|
+
--tala-sys-color-text-accent: var(--tala-ref-color-red-50);
|
|
118
98
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
focus → keyboard focus ring on interactive elements
|
|
125
|
-
──────────────────────────────────────────────────────────────────────── */
|
|
126
|
-
--tala-sys-color-outline-default: var(--tala-ref-color-neutral-20);
|
|
127
|
-
--tala-sys-color-outline-strong: var(--tala-ref-color-neutral-30);
|
|
128
|
-
--tala-sys-color-outline-focus: var(--tala-ref-color-neutral-100);
|
|
129
|
-
|
|
130
|
-
/* ── Brand ─────────────────────────────────────────────────────────────────
|
|
131
|
-
Primary brand identity color for interactive elements.
|
|
132
|
-
Use for CTAs, primary buttons, and key accents.
|
|
133
|
-
on-brand → content (icon/text) placed on top of a brand-colored surface
|
|
134
|
-
hover → brand color on pointer hover
|
|
135
|
-
subtle → light tinted surface for brand-adjacent areas
|
|
136
|
-
──────────────────────────────────────────────────────────────────────── */
|
|
137
|
-
--tala-sys-color-brand: var(--tala-ref-color-red-50);
|
|
138
|
-
--tala-sys-color-on-brand: var(--tala-ref-color-neutral-0);
|
|
139
|
-
--tala-sys-color-brand-hover: var(--tala-ref-color-red-60);
|
|
140
|
-
--tala-sys-color-brand-subtle: var(--tala-ref-color-red-5);
|
|
141
|
-
|
|
142
|
-
/* ── Error ─────────────────────────────────────────────────────────────────
|
|
143
|
-
Destructive interactive states for clickable elements.
|
|
144
|
-
Use on buttons, icons, or controls that perform a destructive action.
|
|
145
|
-
Do NOT use for read-only status — use error feedback tokens instead.
|
|
146
|
-
on-error → content (icon/text) placed on top of an error-colored surface
|
|
147
|
-
hover → error color on pointer hover
|
|
148
|
-
──────────────────────────────────────────────────────────────────────── */
|
|
149
|
-
--tala-sys-color-error: var(--tala-ref-color-red-65);
|
|
150
|
-
--tala-sys-color-on-error: var(--tala-ref-color-neutral-0);
|
|
151
|
-
--tala-sys-color-error-hover: var(--tala-ref-color-red-70);
|
|
152
|
-
|
|
153
|
-
/* ── Feedback ──────────────────────────────────────────────────────────────
|
|
154
|
-
Read-only status communication for non-interactive display components
|
|
155
|
-
such as alerts, banners, badges, and toasts.
|
|
156
|
-
Each status provides a surface/text/outline triad for composing these
|
|
157
|
-
components — do NOT use for interactive or clickable elements.
|
|
158
|
-
success → positive outcome or completion
|
|
159
|
-
warning → potential issue requiring attention
|
|
160
|
-
error → failure or blocking problem
|
|
161
|
-
info → neutral informational message
|
|
162
|
-
──────────────────────────────────────────────────────────────────────── */
|
|
163
|
-
--tala-sys-color-success-surface: var(--tala-ref-color-green-5);
|
|
164
|
-
--tala-sys-color-success-text: var(--tala-ref-color-green-65);
|
|
165
|
-
--tala-sys-color-success-outline: var(--tala-ref-color-green-30);
|
|
166
|
-
|
|
167
|
-
--tala-sys-color-warning-surface: var(--tala-ref-color-amber-5);
|
|
168
|
-
--tala-sys-color-warning-text: var(--tala-ref-color-amber-65);
|
|
169
|
-
--tala-sys-color-warning-outline: var(--tala-ref-color-amber-30);
|
|
99
|
+
--tala-sys-color-border-default: var(--tala-ref-color-neutral-20);
|
|
100
|
+
--tala-sys-color-border-strong: var(--tala-ref-color-neutral-30);
|
|
101
|
+
--tala-sys-color-border-focus: var(--tala-ref-color-neutral-100);
|
|
102
|
+
--tala-sys-color-border-danger: var(--tala-ref-color-red-50);
|
|
103
|
+
--tala-sys-color-border-error: var(--tala-ref-color-misc-red-1);
|
|
170
104
|
|
|
171
|
-
--tala-sys-color-
|
|
172
|
-
--tala-sys-color-
|
|
173
|
-
--tala-sys-color-
|
|
105
|
+
--tala-sys-color-action-primary-bg: var(--tala-ref-color-neutral-100);
|
|
106
|
+
--tala-sys-color-action-primary-fg: var(--tala-ref-color-neutral-0);
|
|
107
|
+
--tala-sys-color-action-secondary-bg: var(--tala-ref-color-neutral-0);
|
|
108
|
+
--tala-sys-color-action-secondary-border: var(--tala-ref-color-neutral-20);
|
|
109
|
+
--tala-sys-color-action-danger-bg: var(--tala-ref-color-misc-red-1);
|
|
110
|
+
--tala-sys-color-action-ghost-hover: var(--tala-ref-color-neutral-10);
|
|
111
|
+
--tala-sys-color-action-primary-text: var(--tala-ref-color-neutral-0);
|
|
112
|
+
--tala-sys-color-action-primary-hover: var(--tala-ref-color-neutral-90);
|
|
113
|
+
--tala-sys-color-action-secondary-text: var(--tala-ref-color-neutral-100);
|
|
114
|
+
--tala-sys-color-action-secondary-hover: var(--tala-ref-color-neutral-20);
|
|
115
|
+
--tala-sys-color-action-ghost-text: var(--tala-ref-color-neutral-100);
|
|
116
|
+
--tala-sys-color-action-danger-text: var(--tala-ref-color-neutral-0);
|
|
117
|
+
--tala-sys-color-action-accent-bg: var(--tala-ref-color-red-50);
|
|
118
|
+
--tala-sys-color-action-accent-text: var(--tala-ref-color-neutral-0);
|
|
174
119
|
|
|
175
|
-
--tala-sys-color-
|
|
176
|
-
--tala-sys-color-
|
|
177
|
-
--tala-sys-color-
|
|
120
|
+
--tala-sys-color-feedback-success-bg: var(--tala-ref-color-green-5);
|
|
121
|
+
--tala-sys-color-feedback-success-text: var(--tala-ref-color-misc-green-1);
|
|
122
|
+
--tala-sys-color-feedback-success-border: var(--tala-ref-color-green-30);
|
|
123
|
+
--tala-sys-color-feedback-warning-bg: var(--tala-ref-color-amber-5);
|
|
124
|
+
--tala-sys-color-feedback-warning-text: var(--tala-ref-color-misc-amber-1);
|
|
125
|
+
--tala-sys-color-feedback-warning-border: var(--tala-ref-color-amber-30);
|
|
126
|
+
--tala-sys-color-feedback-danger-bg: var(--tala-ref-color-red-5);
|
|
127
|
+
--tala-sys-color-feedback-danger-text: var(--tala-ref-color-red-70);
|
|
128
|
+
--tala-sys-color-feedback-danger-border: var(--tala-ref-color-red-30);
|
|
129
|
+
--tala-sys-color-feedback-info-bg: var(--tala-ref-color-blue-5);
|
|
130
|
+
--tala-sys-color-feedback-info-text: var(--tala-ref-color-misc-blue-1);
|
|
131
|
+
--tala-sys-color-feedback-info-border: var(--tala-ref-color-blue-30);
|
|
132
|
+
--tala-sys-color-feedback-neutral-bg: var(--tala-ref-color-neutral-5);
|
|
133
|
+
--tala-sys-color-feedback-neutral-text: var(--tala-ref-color-neutral-70);
|
|
134
|
+
--tala-sys-color-feedback-neutral-border: var(--tala-ref-color-neutral-30);
|
|
178
135
|
}
|
package/types/doku-com-tala.d.ts
CHANGED
|
@@ -1,15 +1,43 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { InjectionToken, Signal, TemplateRef } from '@angular/core';
|
|
3
|
+
import { FormValueControl } from '@angular/forms/signals';
|
|
4
|
+
|
|
5
|
+
type AlertVariant = 'info' | 'success' | 'warning' | 'danger';
|
|
6
|
+
type AlertType = 'inline' | 'banner';
|
|
7
|
+
type AlertAction = 'none' | 'label' | 'custom';
|
|
8
|
+
declare class TalaAlert {
|
|
9
|
+
readonly variant: _angular_core.InputSignal<AlertVariant>;
|
|
10
|
+
readonly type: _angular_core.InputSignal<AlertType>;
|
|
11
|
+
readonly title: _angular_core.InputSignal<string>;
|
|
12
|
+
readonly message: _angular_core.InputSignal<string>;
|
|
13
|
+
readonly dismissible: _angular_core.InputSignal<boolean>;
|
|
14
|
+
readonly action: _angular_core.InputSignal<AlertAction>;
|
|
15
|
+
readonly actionLabel: _angular_core.InputSignal<string>;
|
|
16
|
+
readonly actionClick: _angular_core.OutputEmitterRef<void>;
|
|
17
|
+
readonly dismissed: _angular_core.OutputEmitterRef<void>;
|
|
18
|
+
protected readonly _dismissed: _angular_core.WritableSignal<boolean>;
|
|
19
|
+
protected readonly hostClasses: _angular_core.Signal<string>;
|
|
20
|
+
protected _onActionClick(): void;
|
|
21
|
+
protected _onDismiss(): void;
|
|
22
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalaAlert, never>;
|
|
23
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaAlert, "tala-alert", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "action": { "alias": "action"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; }, { "actionClick": "actionClick"; "dismissed": "dismissed"; }, never, ["*"], true, never>;
|
|
24
|
+
}
|
|
3
25
|
|
|
4
26
|
type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
5
27
|
type AvatarShape = 'circle' | 'square';
|
|
6
28
|
type AvatarStatus = 'none' | 'online' | 'busy' | 'away' | 'offline';
|
|
7
29
|
declare class TalaAvatar {
|
|
30
|
+
/** Accessible display name used for initials and the generated aria label. */
|
|
8
31
|
readonly name: _angular_core.InputSignal<string>;
|
|
32
|
+
/** Visual size of the avatar. */
|
|
9
33
|
readonly size: _angular_core.InputSignal<AvatarSize>;
|
|
34
|
+
/** Outer shape of the avatar container. */
|
|
10
35
|
readonly shape: _angular_core.InputSignal<AvatarShape>;
|
|
36
|
+
/** Optional presence indicator shown on the avatar. */
|
|
11
37
|
readonly status: _angular_core.InputSignal<AvatarStatus>;
|
|
38
|
+
/** Optional notification badge count. Values above 99 render as `99+`. */
|
|
12
39
|
readonly badgeCount: _angular_core.InputSignal<number>;
|
|
40
|
+
/** Image URL. When omitted, the component falls back to generated initials. */
|
|
13
41
|
readonly src: _angular_core.InputSignal<string>;
|
|
14
42
|
protected readonly initials: _angular_core.Signal<string>;
|
|
15
43
|
protected readonly bgColor: _angular_core.Signal<string>;
|
|
@@ -26,6 +54,7 @@ declare class TalaAvatar {
|
|
|
26
54
|
}
|
|
27
55
|
|
|
28
56
|
declare class TalaAvatarGroup {
|
|
57
|
+
/** Shared avatar size applied to items inside the group. */
|
|
29
58
|
readonly size: _angular_core.InputSignal<AvatarSize>;
|
|
30
59
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalaAvatarGroup, never>;
|
|
31
60
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaAvatarGroup, "tala-avatar-group", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
@@ -33,52 +62,142 @@ declare class TalaAvatarGroup {
|
|
|
33
62
|
|
|
34
63
|
type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'accent' | 'danger' | 'link';
|
|
35
64
|
type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
36
|
-
type ButtonType = 'button' | 'submit' | 'reset';
|
|
37
65
|
declare class TalaButton {
|
|
66
|
+
private readonly el;
|
|
67
|
+
/**
|
|
68
|
+
* Selects the button's visual treatment.
|
|
69
|
+
*
|
|
70
|
+
* @default 'primary'
|
|
71
|
+
*/
|
|
38
72
|
readonly variant: _angular_core.InputSignal<ButtonVariant>;
|
|
73
|
+
/**
|
|
74
|
+
* Controls the button's height and horizontal padding.
|
|
75
|
+
*
|
|
76
|
+
* @default 'md'
|
|
77
|
+
*/
|
|
39
78
|
readonly size: _angular_core.InputSignal<ButtonSize>;
|
|
40
|
-
|
|
79
|
+
/**
|
|
80
|
+
* Disables interaction.
|
|
81
|
+
* Applies the native `disabled` attribute on `<button>` and `aria-disabled="true"` plus
|
|
82
|
+
* `tabindex="-1"` on `<a>`.
|
|
83
|
+
*
|
|
84
|
+
* @default false
|
|
85
|
+
*/
|
|
41
86
|
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
87
|
+
/**
|
|
88
|
+
* Shows the loading state and blocks interaction.
|
|
89
|
+
* Adds `aria-busy="true"` and reuses disabled behavior while loading, including removing
|
|
90
|
+
* anchors from the tab order.
|
|
91
|
+
*
|
|
92
|
+
* @default false
|
|
93
|
+
*/
|
|
42
94
|
readonly loading: _angular_core.InputSignal<boolean>;
|
|
95
|
+
/**
|
|
96
|
+
* Collapses horizontal padding for icon-only buttons.
|
|
97
|
+
* Provide an accessible name such as `aria-label` when no visible text is present.
|
|
98
|
+
*
|
|
99
|
+
* @default false
|
|
100
|
+
*/
|
|
43
101
|
readonly iconOnly: _angular_core.InputSignal<boolean>;
|
|
102
|
+
protected readonly isButton: boolean;
|
|
44
103
|
protected readonly hostClasses: _angular_core.Signal<string>;
|
|
45
|
-
protected
|
|
104
|
+
protected onHostClick(event: Event): void;
|
|
46
105
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalaButton, never>;
|
|
47
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaButton, "
|
|
106
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaButton, "button[talaButton], a[talaButton]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; }, {}, never, ["[slot=prefix]", "*", "[slot=suffix]"], true, never>;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/**
|
|
110
|
+
* Contract a control (e.g. `TalaInput`) provides to a hosting `TalaFormField` so the wrapper can
|
|
111
|
+
* reflect the control's presentational state (label `for`, container border, disabled styling)
|
|
112
|
+
* without either side importing the other's concrete class.
|
|
113
|
+
*/
|
|
114
|
+
interface TalaFormFieldControl {
|
|
115
|
+
readonly id: Signal<string>;
|
|
116
|
+
readonly disabled: Signal<boolean>;
|
|
117
|
+
readonly readonly: Signal<boolean>;
|
|
118
|
+
readonly required: Signal<boolean>;
|
|
119
|
+
readonly status: Signal<string>;
|
|
120
|
+
readonly size: Signal<string>;
|
|
121
|
+
}
|
|
122
|
+
declare const TALA_FORM_FIELD_CONTROL: InjectionToken<TalaFormFieldControl>;
|
|
123
|
+
/**
|
|
124
|
+
* Contract a `TalaFormField` provides to its projected control so the control can wire its own
|
|
125
|
+
* `aria-describedby` to the wrapper's helper text without the wrapper writing to it directly.
|
|
126
|
+
*
|
|
127
|
+
* The helper row is always rendered (visible whenever a consumer projects `slot="helper"`
|
|
128
|
+
* content, regardless of `disabled` — CSS collapses it only when genuinely empty, see
|
|
129
|
+
* `form-field.scss`), so `helperId` is always a stable id, not conditionally `null`. An
|
|
130
|
+
* `aria-describedby` pointing at a rendered-but-empty element is harmless to assistive tech
|
|
131
|
+
* (nothing to announce), so this avoids needing a way to detect "did the consumer project
|
|
132
|
+
* content into this slot", which would otherwise require a marker directive the consumer has to
|
|
133
|
+
* remember to import.
|
|
134
|
+
*/
|
|
135
|
+
interface TalaFormFieldHost {
|
|
136
|
+
readonly helperId: Signal<string>;
|
|
137
|
+
}
|
|
138
|
+
declare const TALA_FORM_FIELD_HOST: InjectionToken<TalaFormFieldHost>;
|
|
139
|
+
|
|
140
|
+
declare class TalaFormField implements TalaFormFieldHost {
|
|
141
|
+
private static _nextId;
|
|
142
|
+
protected readonly _id: string;
|
|
143
|
+
protected readonly _helperId: string;
|
|
144
|
+
protected readonly _control: _angular_core.Signal<TalaFormFieldControl | undefined>;
|
|
145
|
+
protected readonly _controlId: _angular_core.Signal<string | undefined>;
|
|
146
|
+
protected readonly _status: _angular_core.Signal<string>;
|
|
147
|
+
protected readonly _size: _angular_core.Signal<string>;
|
|
148
|
+
protected readonly _required: _angular_core.Signal<boolean>;
|
|
149
|
+
protected readonly _isDisabled: _angular_core.Signal<boolean>;
|
|
150
|
+
protected readonly _isReadonly: _angular_core.Signal<boolean>;
|
|
151
|
+
readonly helperId: _angular_core.Signal<string>;
|
|
152
|
+
protected readonly hostClasses: _angular_core.Signal<string>;
|
|
153
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalaFormField, never>;
|
|
154
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaFormField, "tala-form-field", never, {}, {}, ["_control"], ["[slot=label]", "[slot=prefix]", "[slot=leading-icon]", "*", "[slot=trailing-icon]", "[slot=suffix]", "[slot=helper]"], true, never>;
|
|
48
155
|
}
|
|
49
156
|
|
|
50
157
|
type InputSize = 'sm' | 'md' | 'lg';
|
|
51
158
|
type InputStatus = 'default' | 'error' | 'success' | 'warning';
|
|
52
|
-
declare class TalaInput implements
|
|
159
|
+
declare class TalaInput implements TalaFormFieldControl {
|
|
53
160
|
private static _nextId;
|
|
161
|
+
private readonly _field;
|
|
162
|
+
readonly id: _angular_core.InputSignal<string>;
|
|
54
163
|
readonly size: _angular_core.InputSignal<InputSize>;
|
|
55
164
|
readonly status: _angular_core.InputSignal<InputStatus>;
|
|
56
|
-
readonly label: _angular_core.InputSignal<string>;
|
|
57
|
-
readonly placeholder: _angular_core.InputSignal<string>;
|
|
58
|
-
readonly helperText: _angular_core.InputSignal<string>;
|
|
59
|
-
readonly required: _angular_core.InputSignal<boolean>;
|
|
60
165
|
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
61
166
|
readonly readonly: _angular_core.InputSignal<boolean>;
|
|
62
|
-
readonly
|
|
63
|
-
readonly
|
|
64
|
-
readonly type: _angular_core.InputSignal<string>;
|
|
65
|
-
readonly name: _angular_core.InputSignal<string>;
|
|
66
|
-
protected readonly _id: string;
|
|
67
|
-
protected readonly _helperId: string;
|
|
68
|
-
protected readonly _value: _angular_core.WritableSignal<string>;
|
|
69
|
-
protected readonly _disabledByForm: _angular_core.WritableSignal<boolean>;
|
|
70
|
-
protected readonly _isDisabled: _angular_core.Signal<boolean>;
|
|
71
|
-
protected readonly hostClasses: _angular_core.Signal<string>;
|
|
72
|
-
private _onChange;
|
|
73
|
-
private _onTouched;
|
|
74
|
-
writeValue(value: string): void;
|
|
75
|
-
registerOnChange(fn: (value: string) => void): void;
|
|
76
|
-
registerOnTouched(fn: () => void): void;
|
|
77
|
-
setDisabledState(isDisabled: boolean): void;
|
|
78
|
-
protected _onInput(event: Event): void;
|
|
79
|
-
protected _onBlur(): void;
|
|
167
|
+
readonly required: _angular_core.InputSignal<boolean>;
|
|
168
|
+
protected readonly _describedBy: _angular_core.Signal<string>;
|
|
80
169
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalaInput, never>;
|
|
81
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaInput, "
|
|
170
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaInput, "input[talaInput]", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
interface SelectOptionTemplateContext {
|
|
174
|
+
$implicit: SelectOption;
|
|
175
|
+
selected: boolean;
|
|
176
|
+
focused: boolean;
|
|
177
|
+
}
|
|
178
|
+
interface SelectValueTemplateContext {
|
|
179
|
+
$implicit: SelectOption;
|
|
180
|
+
}
|
|
181
|
+
/**
|
|
182
|
+
* Apply to an `ng-template` projected into `tala-select` to override how each
|
|
183
|
+
* option is rendered inside the dropdown list.
|
|
184
|
+
*/
|
|
185
|
+
declare class TalaSelectOptionTemplate {
|
|
186
|
+
static ngTemplateContextGuard(_dir: TalaSelectOptionTemplate, ctx: unknown): ctx is SelectOptionTemplateContext;
|
|
187
|
+
readonly templateRef: TemplateRef<SelectOptionTemplateContext>;
|
|
188
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalaSelectOptionTemplate, never>;
|
|
189
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TalaSelectOptionTemplate, "ng-template[talaSelectOption]", never, {}, {}, never, never, true, never>;
|
|
190
|
+
}
|
|
191
|
+
/**
|
|
192
|
+
* Apply to an `ng-template` projected into `tala-select` to override how the
|
|
193
|
+
* chosen value is rendered — the trigger label for `single`/`searchable`, or
|
|
194
|
+
* each chip for `multi`.
|
|
195
|
+
*/
|
|
196
|
+
declare class TalaSelectValueTemplate {
|
|
197
|
+
static ngTemplateContextGuard(_dir: TalaSelectValueTemplate, ctx: unknown): ctx is SelectValueTemplateContext;
|
|
198
|
+
readonly templateRef: TemplateRef<SelectValueTemplateContext>;
|
|
199
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalaSelectValueTemplate, never>;
|
|
200
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TalaSelectValueTemplate, "ng-template[talaSelectValue]", never, {}, {}, never, never, true, never>;
|
|
82
201
|
}
|
|
83
202
|
|
|
84
203
|
type SelectType = 'single' | 'searchable' | 'multi';
|
|
@@ -89,7 +208,7 @@ interface SelectOption {
|
|
|
89
208
|
label: string;
|
|
90
209
|
disabled?: boolean;
|
|
91
210
|
}
|
|
92
|
-
declare class TalaSelect implements
|
|
211
|
+
declare class TalaSelect implements FormValueControl<string | string[]> {
|
|
93
212
|
private static _nextId;
|
|
94
213
|
private readonly _elementRef;
|
|
95
214
|
readonly type: _angular_core.InputSignal<SelectType>;
|
|
@@ -103,31 +222,25 @@ declare class TalaSelect implements ControlValueAccessor {
|
|
|
103
222
|
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
104
223
|
readonly loading: _angular_core.InputSignal<boolean>;
|
|
105
224
|
readonly width: _angular_core.InputSignal<string>;
|
|
225
|
+
readonly value: _angular_core.ModelSignal<string | string[]>;
|
|
226
|
+
readonly touched: _angular_core.ModelSignal<boolean>;
|
|
106
227
|
protected readonly _id: string;
|
|
107
228
|
protected readonly _helperId: string;
|
|
108
229
|
protected readonly _listboxId: string;
|
|
109
230
|
protected readonly _isOpen: _angular_core.WritableSignal<boolean>;
|
|
110
|
-
protected readonly _value: _angular_core.WritableSignal<string | string[]>;
|
|
111
231
|
protected readonly _searchQuery: _angular_core.WritableSignal<string>;
|
|
112
232
|
protected readonly _focusedIndex: _angular_core.WritableSignal<number>;
|
|
113
|
-
protected readonly _disabledByForm: _angular_core.WritableSignal<boolean>;
|
|
114
|
-
protected readonly _isDisabled: _angular_core.Signal<boolean>;
|
|
115
233
|
protected readonly _hostWidth: _angular_core.Signal<string>;
|
|
116
234
|
protected readonly _filteredOptions: _angular_core.Signal<SelectOption[]>;
|
|
117
235
|
protected readonly _hasValue: _angular_core.Signal<boolean>;
|
|
118
236
|
protected readonly _displayValue: _angular_core.Signal<string>;
|
|
119
|
-
protected readonly
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
237
|
+
protected readonly _selectedOption: _angular_core.Signal<SelectOption | undefined>;
|
|
238
|
+
protected readonly _selectedOptions: _angular_core.Signal<SelectOption[]>;
|
|
239
|
+
protected readonly _optionTemplate: _angular_core.Signal<TalaSelectOptionTemplate | undefined>;
|
|
240
|
+
protected readonly _valueTemplate: _angular_core.Signal<TalaSelectValueTemplate | undefined>;
|
|
123
241
|
protected readonly hostClasses: _angular_core.Signal<string>;
|
|
124
|
-
private _onChange;
|
|
125
|
-
private _onTouched;
|
|
126
242
|
_onDocumentClick(target: EventTarget | null): void;
|
|
127
|
-
|
|
128
|
-
registerOnChange(fn: (value: string | string[]) => void): void;
|
|
129
|
-
registerOnTouched(fn: () => void): void;
|
|
130
|
-
setDisabledState(isDisabled: boolean): void;
|
|
243
|
+
focus(options?: FocusOptions): void;
|
|
131
244
|
protected _onTriggerClick(event: MouseEvent): void;
|
|
132
245
|
protected _onTriggerKeydown(event: KeyboardEvent): void;
|
|
133
246
|
protected _selectOption(opt: SelectOption, event: Event): void;
|
|
@@ -137,22 +250,63 @@ declare class TalaSelect implements ControlValueAccessor {
|
|
|
137
250
|
protected _onDropdownClick(event: MouseEvent): void;
|
|
138
251
|
protected _onSearchKeydown(event: KeyboardEvent): void;
|
|
139
252
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalaSelect, never>;
|
|
140
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaSelect, "tala-select", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, {},
|
|
253
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaSelect, "tala-select", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, ["_optionTemplate", "_valueTemplate"], never, true, never>;
|
|
141
254
|
}
|
|
142
255
|
|
|
143
|
-
type TextVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body' | 'label' | 'caption' | 'code';
|
|
144
|
-
type TextSize = '
|
|
145
|
-
type TextWeight = 'medium' | 'semibold' | 'bold';
|
|
256
|
+
type TextVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body' | 'label' | 'caption' | 'code' | 'docTitle' | 'docSection';
|
|
257
|
+
type TextSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
258
|
+
type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';
|
|
146
259
|
declare class TalaText {
|
|
260
|
+
/**
|
|
261
|
+
* Sets the text variant/semantic type.
|
|
262
|
+
* Determines the HTML semantics and typography styles applied to the element.
|
|
263
|
+
*
|
|
264
|
+
* @default 'body'
|
|
265
|
+
* @example
|
|
266
|
+
* // Heading variant
|
|
267
|
+
* <h1 talaText="h1">Heading 1</h1>
|
|
268
|
+
* // Body text with custom size
|
|
269
|
+
* <p talaText="body">Body text</p>
|
|
270
|
+
* // Code block
|
|
271
|
+
* <code talaText="code">const x = 42;</code>
|
|
272
|
+
*/
|
|
147
273
|
readonly talaText: _angular_core.InputSignal<TextVariant>;
|
|
274
|
+
/**
|
|
275
|
+
* Controls the font size relative to the current variant.
|
|
276
|
+
* Size mapping varies by variant:
|
|
277
|
+
* - Ignored for headings (h1-h6), code, and documentation text
|
|
278
|
+
* - body: 'sm' | 'md' (default) | 'lg'
|
|
279
|
+
* - label: 'xs' | 'sm' | 'md' (default) | 'lg'
|
|
280
|
+
* - caption: 'sm' (default) | 'lg'
|
|
281
|
+
*
|
|
282
|
+
* @default 'md'
|
|
283
|
+
* @example
|
|
284
|
+
* <p talaText="body" [size]="'lg'">Large body text</p>
|
|
285
|
+
*/
|
|
148
286
|
readonly size: _angular_core.InputSignal<TextSize>;
|
|
149
|
-
|
|
287
|
+
/**
|
|
288
|
+
* Controls the font weight.
|
|
289
|
+
* Weight application varies by variant:
|
|
290
|
+
* - Ignored for headings (h1-h6), code, caption, and documentation text
|
|
291
|
+
* - For body/label: 'regular' (default) | 'medium' | 'semibold' | 'bold'
|
|
292
|
+
*
|
|
293
|
+
* @default 'regular'
|
|
294
|
+
* @example
|
|
295
|
+
* <p talaText="body" [weight]="'bold'">Bold body text</p>
|
|
296
|
+
*/
|
|
297
|
+
readonly weight: _angular_core.InputSignal<TextWeight>;
|
|
298
|
+
private readonly normalizedVariant;
|
|
299
|
+
private readonly normalizedSize;
|
|
300
|
+
private readonly normalizedWeight;
|
|
150
301
|
protected readonly classes: _angular_core.Signal<string>;
|
|
151
302
|
private readonly variantClass;
|
|
152
303
|
private readonly weightClass;
|
|
304
|
+
private readonly bodySizeKey;
|
|
305
|
+
private readonly labelSizeKey;
|
|
306
|
+
private readonly captionSizeKey;
|
|
153
307
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalaText, never>;
|
|
154
|
-
static
|
|
308
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaText, "[talaText]", never, { "talaText": { "alias": "talaText"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "weight": { "alias": "weight"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
155
309
|
}
|
|
156
310
|
|
|
157
|
-
export { TalaAvatar, TalaAvatarGroup, TalaButton, TalaInput, TalaSelect, TalaText };
|
|
158
|
-
export type { AvatarShape, AvatarSize, AvatarStatus, ButtonSize,
|
|
311
|
+
export { TALA_FORM_FIELD_CONTROL, TALA_FORM_FIELD_HOST, TalaAlert, TalaAvatar, TalaAvatarGroup, TalaButton, TalaFormField, TalaInput, TalaSelect, TalaSelectOptionTemplate, TalaSelectValueTemplate, TalaText };
|
|
312
|
+
export type { AlertAction, AlertType, AlertVariant, AvatarShape, AvatarSize, AvatarStatus, ButtonSize, ButtonVariant, InputSize, InputStatus, SelectOption, SelectOptionTemplateContext, SelectSize, SelectStatus, SelectType, SelectValueTemplateContext, TalaFormFieldControl, TalaFormFieldHost, TextSize, TextVariant, TextWeight };
|