@nyaruka/temba-components 0.156.18 → 0.157.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.
Files changed (56) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/temba-components.js +2119 -1617
  3. package/dist/temba-components.js.map +1 -1
  4. package/package.json +1 -1
  5. package/src/display/Button.ts +102 -121
  6. package/src/display/Chat.ts +74 -9
  7. package/src/display/Dropdown.ts +11 -0
  8. package/src/display/Label.ts +154 -2
  9. package/src/display/LeafletMap.ts +4 -3
  10. package/src/display/Options.ts +71 -16
  11. package/src/display/TembaUser.ts +32 -8
  12. package/src/events/eventRenderers.ts +243 -95
  13. package/src/excellent/caret-utils.ts +0 -1
  14. package/src/flow/AutoTranslate.ts +2 -2
  15. package/src/flow/Editor.ts +4 -4
  16. package/src/flow/NodeEditor.ts +2 -2
  17. package/src/flow/NodeTypeSelector.ts +0 -5
  18. package/src/flow/RevisionsWindow.ts +1 -3
  19. package/src/flow/actions/set_contact_language.ts +5 -4
  20. package/src/flow/nodes/shared.ts +14 -0
  21. package/src/flow/nodes/split_by_llm_categorize.ts +28 -8
  22. package/src/flow/utils.ts +39 -60
  23. package/src/form/ArrayEditor.ts +9 -11
  24. package/src/form/Checkbox.ts +2 -2
  25. package/src/form/ColorPicker.ts +5 -3
  26. package/src/form/Compose.ts +1 -1
  27. package/src/form/FieldElement.ts +8 -8
  28. package/src/form/KeyValueEditor.ts +4 -4
  29. package/src/form/MessageEditor.ts +2 -3
  30. package/src/form/RangePicker.ts +17 -17
  31. package/src/form/TembaSlider.ts +10 -10
  32. package/src/form/TemplateEditor.ts +4 -4
  33. package/src/form/TextInput.ts +19 -1
  34. package/src/form/select/Omnibox.ts +21 -20
  35. package/src/form/select/Select.ts +382 -173
  36. package/src/form/select/WorkspaceSelect.ts +7 -1
  37. package/src/interfaces.ts +1 -0
  38. package/src/languages.ts +56 -0
  39. package/src/layout/Accordion.ts +2 -2
  40. package/src/layout/Dialog.ts +1 -3
  41. package/src/layout/Modax.ts +1 -1
  42. package/src/list/ContentMenu.ts +1 -2
  43. package/src/list/SortableList.ts +156 -0
  44. package/src/list/TembaMenu.ts +159 -113
  45. package/src/live/ContactBadges.ts +2 -1
  46. package/src/live/ContactChat.ts +62 -45
  47. package/src/live/ContactDetails.ts +3 -1
  48. package/src/live/ContactFieldEditor.ts +36 -31
  49. package/src/live/FieldManager.ts +4 -4
  50. package/src/store/AppState.ts +3 -21
  51. package/src/store/Store.ts +0 -29
  52. package/src/styles/designTokens.ts +158 -0
  53. package/src/styles/pillVariants.ts +147 -0
  54. package/static/css/temba-components.css +141 -36
  55. package/web-dev-server.config.mjs +0 -1
  56. package/web-test-runner.config.mjs +98 -1
package/src/form/select/Omnibox.ts CHANGED
@@ -105,28 +105,29 @@ export class Omnibox extends Select<OmniOption> {
105
105
  return null;
106
106
  }
107
107
 
108
- /** Selection in the multi-select select box */
108
+ /**
109
+ * Chip rendering — icon + name, plus the group count when the option
110
+ * is a Group. Counts are intentionally suppressed in the base Select
111
+ * chip (noise for action editors like Add to Group), but Omnibox is
112
+ * the start-flow recipients picker where group size is a key part
113
+ * of the chip's identity. Contacts skip the post-name URN that the
114
+ * dropdown shows — chips already have a tight footprint.
115
+ */
109
116
  public renderSelectedItemDefault(option: OmniOption): TemplateResult {
110
- return html`
111
- <div
112
- style="flex:1 1 auto; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; display: flex; align-items: stretch; color: var(--color-text-dark); font-size: 12px;"
113
- >
114
- <div style="align-self: center; padding: 0px 7px; color: #bbb">
115
- ${this.getIcon(option)}
116
- </div>
117
- <div
118
- class="name"
119
- style="align-self: center; padding: 0px; font-size: 12px;"
120
- >
121
- ${option.name}
122
- </div>
123
- <div
124
- style="background: rgba(100, 100, 100, 0.05); border-left: 1px solid rgba(100, 100, 100, 0.1); margin-left: 12px; display: flex; align-items: center"
117
+ const base = super.renderOptionDefault(option);
118
+ if (
119
+ option.type === OmniType.Group &&
120
+ option.count !== undefined &&
121
+ option.count !== null
122
+ ) {
123
+ return html`<div style="display:flex; align-items:center; gap:6px;">
124
+ ${base}<span
125
+ style="opacity:0.7; font-size:11px; font-variant-numeric: tabular-nums; font-weight: var(--w-medium);"
126
+ >${option.count.toLocaleString()}</span
125
127
  >
126
- ${this.getPostName(option)}
127
- </div>
128
- </div>
129
- `;
128
+ </div>`;
129
+ }
130
+ return base;
130
131
  }
131
132
 
132
133
  private getIcon(option: OmniOption): TemplateResult {