@doku-com/tala 1.0.0-alpha.1 → 1.0.0-alpha.3
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 +319 -6
- package/fesm2022/doku-com-tala.mjs.map +1 -1
- package/llms.txt +241 -0
- package/package.json +1 -1
- package/styles/_color.scss +159 -112
- package/styles/_shadow.scss +5 -5
- package/types/doku-com-tala.d.ts +96 -2
package/styles/_color.scss
CHANGED
|
@@ -1,131 +1,178 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
/*
|
|
2
|
+
/* ═══════════════════════════════════════════════
|
|
3
|
+
REFERENCE
|
|
4
|
+
Raw palette values. Never use directly in
|
|
5
|
+
components — use system tokens instead.
|
|
6
|
+
═══════════════════════════════════════════════ */
|
|
3
7
|
|
|
4
8
|
/* Red */
|
|
5
|
-
--color-red-5: #fff0f0;
|
|
6
|
-
--color-red-10: #ffd6d5;
|
|
7
|
-
--color-red-20: #ff9b99;
|
|
8
|
-
--color-red-30: #f76b68;
|
|
9
|
-
--color-red-40: #ef4340;
|
|
10
|
-
--color-red-50: #e1251b;
|
|
11
|
-
--color-red-60: #c41e15;
|
|
12
|
-
--color-red-
|
|
13
|
-
--color-red-
|
|
14
|
-
--color-red-
|
|
15
|
-
--color-red-
|
|
9
|
+
--tala-ref-color-red-5: #fff0f0;
|
|
10
|
+
--tala-ref-color-red-10: #ffd6d5;
|
|
11
|
+
--tala-ref-color-red-20: #ff9b99;
|
|
12
|
+
--tala-ref-color-red-30: #f76b68;
|
|
13
|
+
--tala-ref-color-red-40: #ef4340;
|
|
14
|
+
--tala-ref-color-red-50: #e1251b;
|
|
15
|
+
--tala-ref-color-red-60: #c41e15;
|
|
16
|
+
--tala-ref-color-red-65: #b91c1c;
|
|
17
|
+
--tala-ref-color-red-70: #a0170f;
|
|
18
|
+
--tala-ref-color-red-80: #7d110a;
|
|
19
|
+
--tala-ref-color-red-90: #5c0b06;
|
|
20
|
+
--tala-ref-color-red-100: #3a0603;
|
|
16
21
|
|
|
17
22
|
/* Neutral */
|
|
18
|
-
--color-neutral-0: #ffffff;
|
|
19
|
-
--color-neutral-5: #f7f7f8;
|
|
20
|
-
--color-neutral-10: #f0f0f2;
|
|
21
|
-
--color-neutral-20: #e2e2e6;
|
|
22
|
-
--color-neutral-30: #c8c8cf;
|
|
23
|
-
--color-neutral-40: #ababb5;
|
|
24
|
-
--color-neutral-50: #8e8e9a;
|
|
25
|
-
--color-neutral-60: #6e6e7c;
|
|
26
|
-
--color-neutral-70: #52525e;
|
|
27
|
-
--color-neutral-80: #363640;
|
|
28
|
-
--color-neutral-90: #1e1e26;
|
|
29
|
-
--color-neutral-100: #09090d;
|
|
23
|
+
--tala-ref-color-neutral-0: #ffffff;
|
|
24
|
+
--tala-ref-color-neutral-5: #f7f7f8;
|
|
25
|
+
--tala-ref-color-neutral-10: #f0f0f2;
|
|
26
|
+
--tala-ref-color-neutral-20: #e2e2e6;
|
|
27
|
+
--tala-ref-color-neutral-30: #c8c8cf;
|
|
28
|
+
--tala-ref-color-neutral-40: #ababb5;
|
|
29
|
+
--tala-ref-color-neutral-50: #8e8e9a;
|
|
30
|
+
--tala-ref-color-neutral-60: #6e6e7c;
|
|
31
|
+
--tala-ref-color-neutral-70: #52525e;
|
|
32
|
+
--tala-ref-color-neutral-80: #363640;
|
|
33
|
+
--tala-ref-color-neutral-90: #1e1e26;
|
|
34
|
+
--tala-ref-color-neutral-100: #09090d;
|
|
30
35
|
|
|
31
36
|
/* Green */
|
|
32
|
-
--color-green-5: #f0fbf6;
|
|
33
|
-
--color-green-10: #d1f0e3;
|
|
34
|
-
--color-green-20: #a3dbca;
|
|
35
|
-
--color-green-30: #4ab98a;
|
|
36
|
-
--color-green-40: #22a470;
|
|
37
|
-
--color-green-50: #008856;
|
|
38
|
-
--color-green-60: #006b44;
|
|
39
|
-
--color-green-
|
|
40
|
-
--color-green-
|
|
41
|
-
--color-green-
|
|
42
|
-
--color-green-
|
|
37
|
+
--tala-ref-color-green-5: #f0fbf6;
|
|
38
|
+
--tala-ref-color-green-10: #d1f0e3;
|
|
39
|
+
--tala-ref-color-green-20: #a3dbca;
|
|
40
|
+
--tala-ref-color-green-30: #4ab98a;
|
|
41
|
+
--tala-ref-color-green-40: #22a470;
|
|
42
|
+
--tala-ref-color-green-50: #008856;
|
|
43
|
+
--tala-ref-color-green-60: #006b44;
|
|
44
|
+
--tala-ref-color-green-65: #005535;
|
|
45
|
+
--tala-ref-color-green-70: #005436;
|
|
46
|
+
--tala-ref-color-green-80: #003d28;
|
|
47
|
+
--tala-ref-color-green-90: #00261a;
|
|
48
|
+
--tala-ref-color-green-100: #00100c;
|
|
43
49
|
|
|
44
50
|
/* Amber */
|
|
45
|
-
--color-amber-5: #fffbf0;
|
|
46
|
-
--color-amber-10: #fef3c7;
|
|
47
|
-
--color-amber-20: #fde68a;
|
|
48
|
-
--color-amber-30: #ffd24a;
|
|
49
|
-
--color-amber-40: #d97706;
|
|
50
|
-
--color-amber-50: #b45309;
|
|
51
|
-
--color-amber-60: #92400e;
|
|
52
|
-
--color-amber-
|
|
53
|
-
--color-amber-
|
|
54
|
-
--color-amber-
|
|
55
|
-
--color-amber-
|
|
51
|
+
--tala-ref-color-amber-5: #fffbf0;
|
|
52
|
+
--tala-ref-color-amber-10: #fef3c7;
|
|
53
|
+
--tala-ref-color-amber-20: #fde68a;
|
|
54
|
+
--tala-ref-color-amber-30: #ffd24a;
|
|
55
|
+
--tala-ref-color-amber-40: #d97706;
|
|
56
|
+
--tala-ref-color-amber-50: #b45309;
|
|
57
|
+
--tala-ref-color-amber-60: #92400e;
|
|
58
|
+
--tala-ref-color-amber-65: #734a00;
|
|
59
|
+
--tala-ref-color-amber-70: #78350f;
|
|
60
|
+
--tala-ref-color-amber-80: #5e2a0c;
|
|
61
|
+
--tala-ref-color-amber-90: #451e08;
|
|
62
|
+
--tala-ref-color-amber-100: #2d1206;
|
|
56
63
|
|
|
57
64
|
/* Blue */
|
|
58
|
-
--color-blue-5: #f0f6ff;
|
|
59
|
-
--color-blue-10: #dbeafe;
|
|
60
|
-
--color-blue-20: #bfdbfe;
|
|
61
|
-
--color-blue-30: #6aabfd;
|
|
62
|
-
--color-blue-40: #3b82f6;
|
|
63
|
-
--color-blue-50: #1d4ed8;
|
|
64
|
-
--color-blue-60: #1e40af;
|
|
65
|
-
--color-blue-
|
|
66
|
-
--color-blue-
|
|
67
|
-
--color-blue-
|
|
68
|
-
--color-blue-
|
|
65
|
+
--tala-ref-color-blue-5: #f0f6ff;
|
|
66
|
+
--tala-ref-color-blue-10: #dbeafe;
|
|
67
|
+
--tala-ref-color-blue-20: #bfdbfe;
|
|
68
|
+
--tala-ref-color-blue-30: #6aabfd;
|
|
69
|
+
--tala-ref-color-blue-40: #3b82f6;
|
|
70
|
+
--tala-ref-color-blue-50: #1d4ed8;
|
|
71
|
+
--tala-ref-color-blue-60: #1e40af;
|
|
72
|
+
--tala-ref-color-blue-65: #07469e;
|
|
73
|
+
--tala-ref-color-blue-70: #1e3a8a;
|
|
74
|
+
--tala-ref-color-blue-80: #1a3070;
|
|
75
|
+
--tala-ref-color-blue-90: #142558;
|
|
76
|
+
--tala-ref-color-blue-100: #0c1840;
|
|
69
77
|
|
|
70
|
-
/*
|
|
78
|
+
/* ═══════════════════════════════════════════════
|
|
79
|
+
SYSTEM
|
|
80
|
+
Role-based tokens. Use these in components.
|
|
81
|
+
Never reference primitives directly.
|
|
82
|
+
═══════════════════════════════════════════════ */
|
|
71
83
|
|
|
72
|
-
/*
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
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
|
+
--tala-sys-color-surface-sunken: var(--tala-ref-color-neutral-5);
|
|
94
|
+
--tala-sys-color-surface-default: var(--tala-ref-color-neutral-0);
|
|
95
|
+
--tala-sys-color-surface-raised: var(--tala-ref-color-neutral-0);
|
|
96
|
+
--tala-sys-color-surface-overlay: var(--tala-ref-color-neutral-0);
|
|
97
|
+
--tala-sys-color-surface-inverse: var(--tala-ref-color-neutral-100);
|
|
77
98
|
|
|
78
|
-
/*
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
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
|
+
--tala-sys-color-text-primary: var(--tala-ref-color-neutral-100);
|
|
112
|
+
--tala-sys-color-text-secondary: var(--tala-ref-color-neutral-70);
|
|
113
|
+
--tala-sys-color-text-tertiary: var(--tala-ref-color-neutral-50);
|
|
114
|
+
--tala-sys-color-text-disabled: var(--tala-ref-color-neutral-30);
|
|
115
|
+
--tala-sys-color-text-inverse: var(--tala-ref-color-neutral-0);
|
|
116
|
+
--tala-sys-color-text-placeholder: var(--tala-ref-color-neutral-40);
|
|
117
|
+
--tala-sys-color-text-link: var(--tala-ref-color-red-50);
|
|
83
118
|
|
|
84
|
-
/*
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
119
|
+
/* ── Outline ───────────────────────────────────────────────────────────────
|
|
120
|
+
Borders and dividers that separate or define elements.
|
|
121
|
+
Do not use for status — use feedback tokens for that.
|
|
122
|
+
default → subtle dividers and input borders at rest
|
|
123
|
+
strong → more prominent borders needing higher contrast
|
|
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);
|
|
89
129
|
|
|
90
|
-
/*
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
--color-
|
|
98
|
-
--color-
|
|
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);
|
|
99
141
|
|
|
100
|
-
/*
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
--
|
|
108
|
-
--color-
|
|
109
|
-
--color-
|
|
110
|
-
--color-action-danger-bg: var(--color-red-60);
|
|
111
|
-
--color-action-danger-text: var(--color-neutral-0);
|
|
112
|
-
--color-action-accent-bg: var(--color-red-50);
|
|
113
|
-
--color-action-accent-text: var(--color-neutral-0);
|
|
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);
|
|
114
152
|
|
|
115
|
-
/*
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
--color-
|
|
126
|
-
--color-
|
|
127
|
-
--color-
|
|
128
|
-
|
|
129
|
-
--color-
|
|
130
|
-
--color-
|
|
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);
|
|
170
|
+
|
|
171
|
+
--tala-sys-color-error-surface: var(--tala-ref-color-red-5);
|
|
172
|
+
--tala-sys-color-error-text: var(--tala-ref-color-red-70);
|
|
173
|
+
--tala-sys-color-error-outline: var(--tala-ref-color-red-30);
|
|
174
|
+
|
|
175
|
+
--tala-sys-color-info-surface: var(--tala-ref-color-blue-5);
|
|
176
|
+
--tala-sys-color-info-text: var(--tala-ref-color-blue-65);
|
|
177
|
+
--tala-sys-color-info-outline: var(--tala-ref-color-blue-30);
|
|
131
178
|
}
|
package/styles/_shadow.scss
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--shadow-xs: 0 1px 2px color-mix(in srgb, var(--color-neutral-100) 5%, transparent);
|
|
3
|
-
--shadow-sm: 0 1px 3px color-mix(in srgb, var(--color-neutral-100) 8%, transparent);
|
|
4
|
-
--shadow-md: 0 4px 6px color-mix(in srgb, var(--color-neutral-100) 7%, transparent);
|
|
5
|
-
--shadow-lg: 0 10px 15px color-mix(in srgb, var(--color-neutral-100) 8%, transparent);
|
|
6
|
-
--shadow-xl: 0 20px 25px color-mix(in srgb, var(--color-neutral-100) 10%, transparent);
|
|
2
|
+
--shadow-xs: 0 1px 2px color-mix(in srgb, var(--tala-ref-color-neutral-100) 5%, transparent);
|
|
3
|
+
--shadow-sm: 0 1px 3px color-mix(in srgb, var(--tala-ref-color-neutral-100) 8%, transparent);
|
|
4
|
+
--shadow-md: 0 4px 6px color-mix(in srgb, var(--tala-ref-color-neutral-100) 7%, transparent);
|
|
5
|
+
--shadow-lg: 0 10px 15px color-mix(in srgb, var(--tala-ref-color-neutral-100) 8%, transparent);
|
|
6
|
+
--shadow-xl: 0 20px 25px color-mix(in srgb, var(--tala-ref-color-neutral-100) 10%, transparent);
|
|
7
7
|
}
|
package/types/doku-com-tala.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { ControlValueAccessor } from '@angular/forms';
|
|
2
3
|
|
|
3
4
|
type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
4
5
|
type AvatarShape = 'circle' | 'square';
|
|
@@ -45,5 +46,98 @@ declare class TalaButton {
|
|
|
45
46
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaButton, "tala-button", 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>;
|
|
46
47
|
}
|
|
47
48
|
|
|
48
|
-
|
|
49
|
-
|
|
49
|
+
type InputSize = 'sm' | 'md' | 'lg';
|
|
50
|
+
type InputStatus = 'default' | 'error' | 'success' | 'warning';
|
|
51
|
+
declare class TalaInput implements ControlValueAccessor {
|
|
52
|
+
private static _nextId;
|
|
53
|
+
readonly size: _angular_core.InputSignal<InputSize>;
|
|
54
|
+
readonly status: _angular_core.InputSignal<InputStatus>;
|
|
55
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
56
|
+
readonly placeholder: _angular_core.InputSignal<string>;
|
|
57
|
+
readonly helperText: _angular_core.InputSignal<string>;
|
|
58
|
+
readonly required: _angular_core.InputSignal<boolean>;
|
|
59
|
+
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
60
|
+
readonly readonly: _angular_core.InputSignal<boolean>;
|
|
61
|
+
readonly prefix: _angular_core.InputSignal<string>;
|
|
62
|
+
readonly suffix: _angular_core.InputSignal<string>;
|
|
63
|
+
readonly type: _angular_core.InputSignal<string>;
|
|
64
|
+
readonly name: _angular_core.InputSignal<string>;
|
|
65
|
+
protected readonly _id: string;
|
|
66
|
+
protected readonly _helperId: string;
|
|
67
|
+
protected readonly _value: _angular_core.WritableSignal<string>;
|
|
68
|
+
protected readonly _disabledByForm: _angular_core.WritableSignal<boolean>;
|
|
69
|
+
protected readonly _isDisabled: _angular_core.Signal<boolean>;
|
|
70
|
+
protected readonly hostClasses: _angular_core.Signal<string>;
|
|
71
|
+
private _onChange;
|
|
72
|
+
private _onTouched;
|
|
73
|
+
writeValue(value: string): void;
|
|
74
|
+
registerOnChange(fn: (value: string) => void): void;
|
|
75
|
+
registerOnTouched(fn: () => void): void;
|
|
76
|
+
setDisabledState(isDisabled: boolean): void;
|
|
77
|
+
protected _onInput(event: Event): void;
|
|
78
|
+
protected _onBlur(): void;
|
|
79
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalaInput, never>;
|
|
80
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalaInput, "tala-input", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "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; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; }, {}, never, ["[slot=leading-icon]", "[slot=trailing-icon]"], true, never>;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
type SelectType = 'single' | 'searchable' | 'multi';
|
|
84
|
+
type SelectSize = 'sm' | 'md' | 'lg';
|
|
85
|
+
type SelectStatus = 'default' | 'error' | 'success';
|
|
86
|
+
interface SelectOption {
|
|
87
|
+
value: string;
|
|
88
|
+
label: string;
|
|
89
|
+
disabled?: boolean;
|
|
90
|
+
}
|
|
91
|
+
declare class TalaSelect implements ControlValueAccessor {
|
|
92
|
+
private static _nextId;
|
|
93
|
+
private readonly _elementRef;
|
|
94
|
+
readonly type: _angular_core.InputSignal<SelectType>;
|
|
95
|
+
readonly size: _angular_core.InputSignal<SelectSize>;
|
|
96
|
+
readonly status: _angular_core.InputSignal<SelectStatus>;
|
|
97
|
+
readonly options: _angular_core.InputSignal<SelectOption[]>;
|
|
98
|
+
readonly placeholder: _angular_core.InputSignal<string>;
|
|
99
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
100
|
+
readonly helperText: _angular_core.InputSignal<string>;
|
|
101
|
+
readonly required: _angular_core.InputSignal<boolean>;
|
|
102
|
+
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
103
|
+
readonly loading: _angular_core.InputSignal<boolean>;
|
|
104
|
+
readonly width: _angular_core.InputSignal<string>;
|
|
105
|
+
protected readonly _id: string;
|
|
106
|
+
protected readonly _helperId: string;
|
|
107
|
+
protected readonly _listboxId: string;
|
|
108
|
+
protected readonly _isOpen: _angular_core.WritableSignal<boolean>;
|
|
109
|
+
protected readonly _value: _angular_core.WritableSignal<string | string[]>;
|
|
110
|
+
protected readonly _searchQuery: _angular_core.WritableSignal<string>;
|
|
111
|
+
protected readonly _focusedIndex: _angular_core.WritableSignal<number>;
|
|
112
|
+
protected readonly _disabledByForm: _angular_core.WritableSignal<boolean>;
|
|
113
|
+
protected readonly _isDisabled: _angular_core.Signal<boolean>;
|
|
114
|
+
protected readonly _hostWidth: _angular_core.Signal<string>;
|
|
115
|
+
protected readonly _filteredOptions: _angular_core.Signal<SelectOption[]>;
|
|
116
|
+
protected readonly _hasValue: _angular_core.Signal<boolean>;
|
|
117
|
+
protected readonly _displayValue: _angular_core.Signal<string>;
|
|
118
|
+
protected readonly _selectedLabels: _angular_core.Signal<{
|
|
119
|
+
value: string;
|
|
120
|
+
label: string;
|
|
121
|
+
}[]>;
|
|
122
|
+
protected readonly hostClasses: _angular_core.Signal<string>;
|
|
123
|
+
private _onChange;
|
|
124
|
+
private _onTouched;
|
|
125
|
+
_onDocumentClick(target: EventTarget | null): void;
|
|
126
|
+
writeValue(value: string | string[]): void;
|
|
127
|
+
registerOnChange(fn: (value: string | string[]) => void): void;
|
|
128
|
+
registerOnTouched(fn: () => void): void;
|
|
129
|
+
setDisabledState(isDisabled: boolean): void;
|
|
130
|
+
protected _onTriggerClick(event: MouseEvent): void;
|
|
131
|
+
protected _onTriggerKeydown(event: KeyboardEvent): void;
|
|
132
|
+
protected _selectOption(opt: SelectOption, event: Event): void;
|
|
133
|
+
protected _removeChip(value: string, event: MouseEvent): void;
|
|
134
|
+
protected _isSelected(value: string): boolean;
|
|
135
|
+
protected _onSearchInput(event: Event): void;
|
|
136
|
+
protected _onDropdownClick(event: MouseEvent): void;
|
|
137
|
+
protected _onSearchKeydown(event: KeyboardEvent): void;
|
|
138
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalaSelect, never>;
|
|
139
|
+
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; }; }, {}, never, never, true, never>;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
export { TalaAvatar, TalaAvatarGroup, TalaButton, TalaInput, TalaSelect };
|
|
143
|
+
export type { AvatarShape, AvatarSize, AvatarStatus, ButtonSize, ButtonVariant, InputSize, InputStatus, SelectOption, SelectSize, SelectStatus, SelectType };
|