@nyaruka/temba-components 0.157.0 → 0.158.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/dist/temba-components.js +1617 -1590
- package/dist/temba-components.js.map +1 -1
- package/orca/setup.sh +81 -0
- package/orca.yaml +3 -0
- package/package.json +1 -1
- package/src/display/Button.ts +102 -121
- package/src/display/Chat.ts +60 -9
- package/src/display/Dropdown.ts +11 -0
- package/src/display/Label.ts +1 -3
- package/src/display/LeafletMap.ts +4 -3
- package/src/display/TembaUser.ts +9 -3
- package/src/events/eventRenderers.ts +151 -71
- package/src/flow/AutoTranslate.ts +2 -2
- package/src/flow/CanvasNode.ts +14 -6
- package/src/flow/DragManager.ts +4 -2
- package/src/flow/Editor.ts +4 -4
- package/src/flow/NodeEditor.ts +2 -2
- package/src/flow/NodeTypeSelector.ts +0 -5
- package/src/flow/actions/set_contact_language.ts +5 -4
- package/src/flow/nodes/split_by_llm_categorize.ts +1 -6
- package/src/flow/utils.ts +2 -20
- package/src/form/ColorPicker.ts +5 -3
- package/src/form/DatePicker.ts +2 -1
- package/src/form/select/Omnibox.ts +1 -3
- package/src/form/select/Select.ts +5 -4
- package/src/interfaces.ts +1 -0
- package/src/languages.ts +56 -0
- package/src/layout/Dialog.ts +1 -3
- package/src/layout/Tab.ts +0 -15
- package/src/layout/TabPane.ts +73 -163
- package/src/list/ContentMenu.ts +1 -2
- package/src/list/SortableList.ts +1 -4
- package/src/list/TembaMenu.ts +159 -113
- package/src/live/ContactBadges.ts +2 -1
- package/src/live/ContactChat.ts +22 -3
- package/src/live/ContactDetails.ts +42 -36
- package/src/live/ContactFieldEditor.ts +35 -57
- package/src/live/ContactFields.ts +1 -2
- package/src/live/ContactNotepad.ts +9 -1
- package/src/live/ContactPending.ts +1 -0
- package/src/store/AppState.ts +3 -21
- package/src/store/Store.ts +0 -29
- package/src/styles/designTokens.ts +33 -18
- package/src/styles/pillVariants.ts +24 -13
- package/static/css/temba-components.css +84 -55
- package/web-dev-server.config.mjs +0 -1
- package/web-test-runner.config.mjs +0 -1
|
@@ -11,25 +11,30 @@
|
|
|
11
11
|
component. Legacy tokens below are aliased to these — keep both in
|
|
12
12
|
sync if the design system evolves. */
|
|
13
13
|
|
|
14
|
-
/* accent ramp —
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
--accent
|
|
19
|
-
--accent-
|
|
20
|
-
--accent-
|
|
21
|
-
--accent-
|
|
22
|
-
--accent-
|
|
23
|
-
--accent-
|
|
24
|
-
--accent-
|
|
25
|
-
--accent-
|
|
14
|
+
/* accent ramp — the primary color sits at 400 and the ramp is
|
|
15
|
+
derived from it in both directions via sRGB mixing.
|
|
16
|
+
The anchor reads from --primary-rgb so host pages can re-theme
|
|
17
|
+
the entire ramp by setting e.g. --primary-rgb: 112, 0, 132. */
|
|
18
|
+
--accent: rgb(var(--primary-rgb, 98, 147, 201));
|
|
19
|
+
--accent-50: color-mix(in srgb, var(--accent) 6%, white);
|
|
20
|
+
--accent-100: color-mix(in srgb, var(--accent) 16%, white);
|
|
21
|
+
--accent-200: color-mix(in srgb, var(--accent) 32%, white);
|
|
22
|
+
--accent-300: color-mix(in srgb, var(--accent) 60%, white);
|
|
23
|
+
--accent-400: var(--accent);
|
|
24
|
+
--accent-500: color-mix(in srgb, var(--accent) 90%, black);
|
|
25
|
+
--accent-600: color-mix(in srgb, var(--accent) 80%, black);
|
|
26
|
+
--accent-700: color-mix(in srgb, var(--accent) 65%, black);
|
|
27
|
+
--accent-800: color-mix(in srgb, var(--accent) 50%, black);
|
|
28
|
+
--accent-900: color-mix(in srgb, var(--accent) 35%, black);
|
|
26
29
|
|
|
27
30
|
/* neutrals */
|
|
28
31
|
--bg: #F6F7F9;
|
|
29
32
|
--surface: #FFFFFF;
|
|
33
|
+
--surface-note: #FFF9C2;
|
|
30
34
|
--sunken: #F1F3F5;
|
|
31
35
|
--border: #E6E8EC;
|
|
32
36
|
--border-strong: #D2D6DC;
|
|
37
|
+
--border-note: #EBDF6F;
|
|
33
38
|
--text-1: #1A1F26;
|
|
34
39
|
--text-2: #4D5664;
|
|
35
40
|
--text-3: #7B8593;
|
|
@@ -58,7 +63,7 @@
|
|
|
58
63
|
--w-regular: 400;
|
|
59
64
|
--w-medium: 500;
|
|
60
65
|
--w-semibold: 600;
|
|
61
|
-
--w-bold:
|
|
66
|
+
--w-bold: 600;
|
|
62
67
|
|
|
63
68
|
/* shape */
|
|
64
69
|
--r: 8px;
|
|
@@ -80,11 +85,11 @@
|
|
|
80
85
|
/* ─── legacy aliases — point at the DS tokens above ────────────────── */
|
|
81
86
|
|
|
82
87
|
--font-family: var(--font);
|
|
83
|
-
--primary-rgb:
|
|
88
|
+
--primary-rgb: 58, 102, 150;
|
|
84
89
|
--secondary-rgb: 140, 51, 140;
|
|
85
90
|
--tertiary-rgb: 135, 202, 35;
|
|
86
91
|
|
|
87
|
-
--focus-rgb:
|
|
92
|
+
--focus-rgb: 91, 156, 229;
|
|
88
93
|
--error-rgb: 255, 99, 71;
|
|
89
94
|
--success-rgb: 102, 186, 104;
|
|
90
95
|
|
|
@@ -94,51 +99,66 @@
|
|
|
94
99
|
--select-input-height: inherit;
|
|
95
100
|
|
|
96
101
|
--disabled-opacity: 0.6;
|
|
97
|
-
--curvature:
|
|
98
|
-
--curvature-widget:
|
|
99
|
-
--focus:
|
|
100
|
-
--focus-
|
|
102
|
+
--curvature: 6px;
|
|
103
|
+
--curvature-widget: 6px;
|
|
104
|
+
--focus: rgb(var(--focus-rgb, 91, 156, 229));
|
|
105
|
+
--focus-50: color-mix(in srgb, var(--focus) 12%, white);
|
|
106
|
+
--focus-100: color-mix(in srgb, var(--focus) 24%, white);
|
|
107
|
+
--focus-200: color-mix(in srgb, var(--focus) 40%, white);
|
|
108
|
+
--focus-300: color-mix(in srgb, var(--focus) 60%, white);
|
|
109
|
+
--focus-600: color-mix(in srgb, var(--focus) 60%, black);
|
|
110
|
+
--focus-700: color-mix(in srgb, var(--focus) 45%, black);
|
|
111
|
+
--focus-muted: color-mix(in srgb, var(--focus) 60%, white);
|
|
101
112
|
--focus-halo: 0 0 0 3px
|
|
102
|
-
color-mix(in
|
|
103
|
-
--color-focus:
|
|
104
|
-
--color-widget-bg:
|
|
105
|
-
--color-widget-bg-focused:
|
|
106
|
-
--color-widget-border:
|
|
113
|
+
color-mix(in srgb, var(--focus) 30%, transparent);
|
|
114
|
+
--color-focus: #a4cafe;
|
|
115
|
+
--color-widget-bg: #fff;
|
|
116
|
+
--color-widget-bg-focused: #fff;
|
|
117
|
+
--color-widget-border: rgb(225, 225, 225);
|
|
107
118
|
|
|
108
119
|
--color-options-bg: var(--surface);
|
|
109
120
|
|
|
110
|
-
/* primary colors
|
|
111
|
-
--color-selection:
|
|
112
|
-
--color-success:
|
|
113
|
-
|
|
114
|
-
--
|
|
115
|
-
--
|
|
121
|
+
/* primary colors */
|
|
122
|
+
--color-selection: #f0f6ff;
|
|
123
|
+
--color-success: #3ca96a;
|
|
124
|
+
--color-row-hover: rgba(var(--selection-light-rgb), 0.4);
|
|
125
|
+
--color-message: #3c92dd;
|
|
126
|
+
--color-available: #00f100;
|
|
127
|
+
|
|
128
|
+
--widget-box-shadow: rgba(-1, -1, 0, 0.1) 0px 1px 7px 0px,
|
|
129
|
+
rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
|
|
130
|
+
--widget-box-shadow-focused: 0 0 0 3px rgba(164, 202, 254, 0.45),
|
|
131
|
+
rgba(0, 0, 0, 0.05) 0px 3px 7px 0px,
|
|
132
|
+
rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
|
|
116
133
|
--widget-box-shadow-focused-error: 0 0 0 3px rgba(var(--error-rgb), 0.3);
|
|
117
134
|
|
|
118
|
-
--shadow:
|
|
119
|
-
--shadow-widget:
|
|
135
|
+
--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
|
136
|
+
--shadow-widget: 0 3px 20px 0 rgba(0, 0, 0, 0.04),
|
|
137
|
+
0 1px 2px 0 rgba(0, 0, 0, 0.02);
|
|
120
138
|
|
|
121
139
|
/* page text, borders, widgets */
|
|
122
|
-
--color-text:
|
|
123
|
-
--color-widget-text:
|
|
124
|
-
--color-borders:
|
|
125
|
-
--color-placeholder:
|
|
140
|
+
--color-text: #555;
|
|
141
|
+
--color-widget-text: #555;
|
|
142
|
+
--color-borders: rgba(0, 0, 0, 0.07);
|
|
143
|
+
--color-placeholder: #ccc;
|
|
126
144
|
|
|
127
145
|
/* light colors, panel backgrounds, selection, etc */
|
|
128
|
-
--color-primary-light:
|
|
129
|
-
--color-secondary-light:
|
|
146
|
+
--color-primary-light: #eee;
|
|
147
|
+
--color-secondary-light: rgba(var(--secondary-rgb), 0.3);
|
|
130
148
|
|
|
131
149
|
--color-label: var(--text-1);
|
|
132
150
|
|
|
133
|
-
/* dark colors, nav bar, buttons, etc
|
|
134
|
-
|
|
151
|
+
/* dark colors, nav bar, buttons, etc — default to a ramp step
|
|
152
|
+
so they auto-theme when --primary-rgb changes. Hosts can still
|
|
153
|
+
override the legacy variable directly to break out of the ramp. */
|
|
154
|
+
--color-primary-dark: var(--accent-500);
|
|
135
155
|
--color-secondary-dark: rgb(var(--secondary-rgb));
|
|
136
156
|
|
|
137
157
|
/* light text goes over dark, dark over lights */
|
|
138
158
|
--color-text-light: rgba(255, 255, 255, 1);
|
|
139
|
-
--color-text-dark:
|
|
159
|
+
--color-text-dark: #555;
|
|
140
160
|
--color-text-dark-secondary: rgba(0, 0, 0, 0.25);
|
|
141
|
-
--color-text-help:
|
|
161
|
+
--color-text-help: rgb(120, 120, 120);
|
|
142
162
|
--color-tertiary: rgb(var(--tertiary-rgb));
|
|
143
163
|
|
|
144
164
|
--help-text-size: 0.85em;
|
|
@@ -150,12 +170,13 @@
|
|
|
150
170
|
--color-overlay-light: rgba(0, 0, 0, 0.05);
|
|
151
171
|
--color-overlay-light-text: rgba(0, 0, 0, 0.6);
|
|
152
172
|
|
|
153
|
-
/* links, buttons, and label badges
|
|
154
|
-
|
|
155
|
-
--color-link-primary
|
|
173
|
+
/* links, buttons, and label badges — default to ramp steps so
|
|
174
|
+
they auto-theme; overridable via direct variable setting. */
|
|
175
|
+
--color-link-primary: var(--accent-500);
|
|
176
|
+
--color-link-primary-hover: var(--accent-600);
|
|
156
177
|
--color-link-secondary: rgba(var(--secondary-rgb), 0.8);
|
|
157
178
|
--color-link-secondary-hover: rgba(var(--secondary-rgb), 0.9);
|
|
158
|
-
--color-button-primary: var(--
|
|
179
|
+
--color-button-primary: var(--accent-500);
|
|
159
180
|
--color-button-primary-text: var(--color-text-light);
|
|
160
181
|
--color-button-light: rgb(246, 248, 250);
|
|
161
182
|
--color-button-light-text: rgb(36, 41, 47);
|
|
@@ -165,10 +186,17 @@
|
|
|
165
186
|
--color-button-destructive: rgb(var(--error-rgb));
|
|
166
187
|
--color-button-destructive-text: var(--color-text-light);
|
|
167
188
|
|
|
168
|
-
--color-button-attention: #
|
|
189
|
+
--color-button-attention: #3ca96a;
|
|
169
190
|
|
|
170
191
|
--color-connectors: #95cbef;
|
|
171
192
|
|
|
193
|
+
--color-label-primary: var(--color-primary-dark);
|
|
194
|
+
--color-label-primary-text: var(--color-text-light);
|
|
195
|
+
--color-label-secondary: var(--color-secondary-dark);
|
|
196
|
+
--color-label-secondary-text: var(--color-text-light);
|
|
197
|
+
--color-label-tertiary: var(--color-tertiary);
|
|
198
|
+
--color-label-tertiary-text: var(--color-text-light);
|
|
199
|
+
|
|
172
200
|
--color-nav-unselected: #fff;
|
|
173
201
|
--color-nav-selected-bg: #fff;
|
|
174
202
|
--color-nav-selected-text: var(--color-primary-dark);
|
|
@@ -207,20 +235,21 @@
|
|
|
207
235
|
--temba-textinput-font-size: 13.5px;
|
|
208
236
|
--temba-textinput-min-height: var(--input-h);
|
|
209
237
|
|
|
210
|
-
--options-block-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
|
|
211
|
-
|
|
212
|
-
--
|
|
238
|
+
--options-block-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
|
|
239
|
+
0 1px 2px 0 rgba(0, 0, 0, 0.03);
|
|
240
|
+
--options-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
|
241
|
+
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
242
|
+
--dropdown-shadow: rgb(0 0 0 / 15%) 0px 0px 30px,
|
|
243
|
+
rgb(0 0 0 / 12%) 0px 2px 6px;
|
|
213
244
|
|
|
214
245
|
--label-size: 14px;
|
|
246
|
+
--control-margin-bottom: 15px;
|
|
215
247
|
|
|
216
248
|
--menu-padding: 1em;
|
|
217
249
|
|
|
218
250
|
font-size: var(--font-size);
|
|
219
251
|
font-family: var(--font-family);
|
|
220
252
|
|
|
221
|
-
--button-y: 6px;
|
|
222
|
-
--button-x: 14px;
|
|
223
|
-
|
|
224
253
|
--bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
225
254
|
|
|
226
255
|
--temba-charcount-counts-margin-top: 4px;
|
|
@@ -234,14 +263,14 @@
|
|
|
234
263
|
}
|
|
235
264
|
|
|
236
265
|
temba-button {
|
|
237
|
-
--button-bg: var(--
|
|
266
|
+
--button-bg: var(--accent-500);
|
|
238
267
|
--button-text: var(--color-text-light);
|
|
239
268
|
--button-border: none;
|
|
240
269
|
--button-shadow: var(--widget-box-shadow);
|
|
241
270
|
}
|
|
242
271
|
|
|
243
272
|
temba-button:hover {
|
|
244
|
-
--button-bg-img: linear-gradient(to bottom, rgba(
|
|
273
|
+
--button-bg-img: linear-gradient(to bottom, rgba(255, 255, 255, .1), transparent, transparent);
|
|
245
274
|
}
|
|
246
275
|
|
|
247
276
|
temba-button.active {
|
|
@@ -255,7 +255,6 @@ export default {
|
|
|
255
255
|
'/api/v2/contacts.json': 'contacts.json',
|
|
256
256
|
'/api/v2/optins.json': 'optins.json',
|
|
257
257
|
'/api/v2/topics.json': 'topics.json',
|
|
258
|
-
'/api/v2/languages.json': 'languages.json',
|
|
259
258
|
'/api/v2/workspace.json': 'workspace.json',
|
|
260
259
|
'/api/internal/locations.json': 'locations.json',
|
|
261
260
|
'/api/internal/orgs.json': 'orgs.json',
|
|
@@ -478,7 +478,6 @@ export default {
|
|
|
478
478
|
'/api/v2/contacts.json': './static/api/contacts.json',
|
|
479
479
|
'/api/v2/optins.json': './static/api/optins.json',
|
|
480
480
|
'/api/v2/topics.json': './static/api/topics.json',
|
|
481
|
-
'/api/v2/languages.json': './static/api/languages.json',
|
|
482
481
|
'/api/v2/workspace.json': './static/api/workspace.json',
|
|
483
482
|
'/api/internal/locations.json': './static/api/locations.json',
|
|
484
483
|
'/api/internal/orgs.json': './static/api/orgs.json'
|