@nyaruka/temba-components 0.157.0 → 0.158.0

package/src/form/select/Select.ts

@@ -74,7 +74,8 @@ const ENDPOINT_PILL_TYPES: { pattern: RegExp; type: string }[] = [
   { pattern: /\/contacts(\.json|\/|\?|$)/, type: 'contact' },
   { pattern: /\/labels(\.json|\/|\?|$)/, type: 'label' },
   { pattern: /\/flows(\.json|\/|\?|$)/, type: 'flow' },
-  { pattern: /\/fields(\.json|\/|\?|$)/, type: 'field' }
+  { pattern: /\/fields(\.json|\/|\?|$)/, type: 'field' },
+  { pattern: /\/topics(\.json|\/|\?|$)/, type: 'topic' }
 ];
 
 export class Select<T extends SelectOption> extends FieldElement {
@@ -2204,9 +2205,9 @@ export class Select<T extends SelectOption> extends FieldElement {
         class="option-name"
         style="display:flex; align-items:center; gap:6px;"
       >
-        ${icon
-          ? html`<temba-icon name="${icon}"></temba-icon>`
-          : null}<span>${this.renderHighlightedName(option)}</span>
+        ${icon ? html`<temba-icon name="${icon}"></temba-icon>` : null}<span
+          >${this.renderHighlightedName(option)}</span
+        >
       </div>
     `;
   }

package/src/interfaces.ts

@@ -59,6 +59,7 @@ export interface NamedUser extends User {
 
 export interface User {
   id?: number;
+  uuid?: string;
   first_name?: string;
   last_name?: string;
   name?: string;

package/src/languages.ts

@@ -0,0 +1,56 @@
+const intlLanguageNames = new Intl.DisplayNames(['en'], {
+  type: 'language',
+  fallback: 'none'
+});
+
+const ADDITIONAL_LANGUAGE_NAMES: { [code: string]: string } = {
+  aab: 'Alumu-Tesu',
+  aac: 'Ari',
+  aas: 'Aasáx',
+  abp: 'Abellen Ayta',
+  acf: 'Saint Lucian Creole French',
+  aec: 'Saidi Arabic',
+  afb: 'Gulf Arabic',
+  apd: 'Sudanese Arabic',
+  ayl: 'Libyan Arabic',
+  blk: "Pa'o Karen",
+  bog: 'Bamako Sign Language',
+  bzs: 'Brazilian Sign Language',
+  csn: 'Colombian Sign Language',
+  dag: 'Dagbani',
+  ecs: 'Ecuadorian Sign Language',
+  frk: 'Frankish',
+  fsl: 'French Sign Language',
+  fuv: 'Nigerian Fulfulde',
+  gcr: 'Guianese Creole French',
+  gpe: 'Ghanaian Pidgin English',
+  gux: 'Gourmanchéma',
+  ise: 'Italian Sign Language',
+  ksw: "S'gaw Karen",
+  kun: 'Kunama',
+  kyu: 'Western Kayah',
+  laj: 'Lango',
+  nyj: 'Nyanga',
+  prd: 'Parsi-Dari',
+  prl: 'Peruvian Sign Language',
+  pst: 'Central Pashto',
+  rop: 'Kriol',
+  tdt: 'Tetun Dili',
+  toi: 'Tonga',
+  tuv: 'Turkana',
+  vsl: 'Venezuelan Sign Language'
+};
+
+export function getLanguageName(code: string): string {
+  if (!code) return '';
+  if (code === 'und') return 'Unknown';
+
+  try {
+    const name = intlLanguageNames.of(code);
+    if (name) return name;
+  } catch {
+    // fall through to additional lookup
+  }
+
+  return ADDITIONAL_LANGUAGE_NAMES[code] || code;
+}

package/src/layout/Dialog.ts

@@ -181,8 +181,6 @@ export class Dialog extends ResizeElement {
 
       temba-button {
         margin-left: 10px;
-        --button-y: 0.4em;
-        --button-x: 1em;
       }
 
       .dialog-body temba-loading {
@@ -555,7 +553,7 @@ export class Dialog extends ResizeElement {
                     ?destructive=${button.type == 'primary' && this.destructive}
                     ?primary=${button.type == 'primary' && !this.destructive}
                     ?secondary=${button.type == 'secondary'}
-                    ?submitting=${this.submitting}
+                    ?submitting=${this.submitting && button.type == 'primary'}
                     ?disabled=${this.disabled && !button.closes}
                     index=${index}
                     @click=${this.handleClick}

package/src/layout/Tab.ts

@@ -27,24 +27,9 @@ export class Tab extends RapidElement {
   @property({ type: String })
   icon: string;
 
-  @property({ type: String })
-  selectionColor: string;
-
-  @property({ type: String })
-  selectionBackground: string;
-
-  @property({ type: String })
-  borderColor: string = 'var(--color-widget-border)';
-
-  @property({ type: String })
-  activityColor: string = `var(--color-link-primary)`;
-
   @property({ type: Boolean })
   selected = false;
 
-  @property({ type: Boolean })
-  notify = false;
-
   @property({ type: Boolean })
   alert = false;
 

package/src/layout/TabPane.ts

@@ -18,43 +18,48 @@ export class TabPane extends RapidElement {
       .options {
         display: flex;
         align-items: stretch;
-        padding: var(--temba-tabs-options-padding, 0);
-        border-bottom: none;
+        gap: 4px;
+        border-bottom: 1px solid var(--border);
       }
 
       .option {
         user-select: none;
-        padding: 0.5em 0.7em;
-        margin: 0em 0em;
-        cursor: pointer;
         display: flex;
-        font-size: 1.1em;
         align-items: center;
-        border: 1px inset transparent;
-        border-bottom: 0px;
-        border-radius: var(--curvature);
-        border-bottom-right-radius: 0px;
-        border-bottom-left-radius: 0px;
-
-        color: var(--color-text-dark);
-        --icon-color: var(--color-text-dark);
+        cursor: pointer;
+        padding: 8px 14px 10px;
+        margin-bottom: -1px;
+        background: transparent;
+        color: var(--text-2);
+        --icon-color: var(--text-2);
+        font-size: 13px;
+        font-weight: var(--w-medium);
+        border-bottom: 2px solid transparent;
         white-space: nowrap;
-        transition: all 100ms linear;
+        transition:
+          color 100ms linear,
+          border-color 100ms linear;
       }
 
-      .focusedname .option .name {
-        transition: all 0s linear !important;
+      .option:hover {
+        color: var(--text-1);
+        --icon-color: var(--text-1);
       }
 
-      .focusedname .option.selected .name {
-        transition: all 200ms linear !important;
+      .option.selected,
+      .option.selected:hover {
+        cursor: default;
+        color: var(--accent-700);
+        --icon-color: var(--accent-700);
+        border-bottom-color: var(--accent-600);
       }
 
-      .option.hidden {
-        display: none;
+      .unselect .option.selected {
+        cursor: pointer;
       }
 
-      .option temba-icon {
+      .option.hidden {
+        display: none;
       }
 
       .option .name {
@@ -70,6 +75,9 @@ export class TabPane extends RapidElement {
 
       .option .badge {
         margin-left: 0.4em;
+        margin-right: -6px;
+        display: inline-flex;
+        align-items: center;
       }
 
       @media (max-width: 900px) {
@@ -85,9 +93,6 @@ export class TabPane extends RapidElement {
         }
       }
 
-      .focusedname .option.selected {
-      }
-
       .focusedname .option .name {
         max-width: 0px;
         margin: 0;
@@ -101,137 +106,81 @@ export class TabPane extends RapidElement {
         max-width: 200px;
       }
 
-      .option {
-        transform: scale(0.9) translateY(0em);
-        --icon-color: rgba(0, 0, 0, 0.5);
-        color: rgba(0, 0, 0, 0.5);
-      }
-
-      .option.selected {
-      }
-
-      .option.selected,
-      .option.selected:hover {
-        cursor: default;
-        box-shadow: 0px -3px 3px 1px rgba(0, 0, 0, 0.02);
-
-        background: var(--focused-tab-color, #fff);
-        transform: scale(1) translateY(1px);
-        --icon-color: #666;
-        color: #666;
-        border: 1px inset rgba(0, 0, 0, 0.15);
-        border-bottom: 0px;
-      }
-
-      .option.selected .dot {
-        display: none;
-      }
-
-      .unselect .option.selected {
-        cursor: pointer;
+      .focusedname .option .name {
+        transition: all 0s linear !important;
       }
 
-      .unselect .option.selected:hover {
-        background: var(--unselect-tab-color, #eee);
+      .focusedname .option.selected .name {
+        transition: all 200ms linear !important;
       }
 
-      .option:hover {
-        --icon-color: #666;
-        color: #666;
-        background: rgba(0, 0, 0, 0.02);
+      .option.dirty {
+        font-weight: var(--w-semibold);
       }
 
-      .option.dirty {
-        font-weight: 500;
+      .option.alert {
+        color: var(--danger);
+        --icon-color: var(--danger);
       }
 
       .pane {
         display: flex;
         flex-direction: column;
         flex-grow: 1;
-        background: var(--focused-tab-color, #fff);
-        border-bottom-left-radius: var(--curvature);
-        border-bottom-right-radius: var(--curvature);
-        overflow: hidden;
-
-        box-shadow: var(
-          --tabs-shadow,
-          rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
-          rgba(0, 0, 0, 0.03) 0px 1px 2px 0px
-        );
         min-height: 0;
-      }
-
-      .pane.first {
-        border-top-left-radius: 0px;
         overflow: hidden;
       }
 
       .count {
-        border-radius: 99px;
-        background: rgba(0, 0, 0, 0.1);
-        color: rgba(0, 0, 0, 0.5);
-        font-size: 0.7em;
-        font-weight: 500;
-        min-width: 1.5em;
-        text-align: center;
-      }
-
-      .dot {
-        height: 0.5em;
-        width: 0.5em;
-        margin-left: 0.2em;
-        background: var(--color-primary-dark);
-        border-radius: 99px;
-      }
-
-      .notify .count {
-        background: var(--color-alert);
-        color: #fff;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: 16px;
+        padding: 0 2px;
+        color: inherit;
+        opacity: 0.6;
+        font-size: 11px;
+        font-weight: var(--w-medium);
+        font-variant-numeric: tabular-nums;
       }
 
-      .alert {
-        color: var(--color-alert);
-        --icon-color: var(--color-alert);
+      .option.selected .count,
+      .option.alert .count {
+        min-width: 16px;
+        padding: 0 4px;
+        border-radius: 999px;
+        opacity: 1;
       }
 
-      .embedded.pane {
-        box-shadow: none;
-        margin: 0;
-        border-left: none !important;
-        border-right: none !important;
-        border-bottom: none !important;
+      .option.selected .count {
+        background: var(--accent-100);
+        color: var(--accent-700);
+        font-weight: var(--w-semibold);
       }
 
-      .embedded .option {
-        border-bottom: none !important;
-        border-radius: 0em;
-        border-top: none !important;
+      .option.alert .count {
+        background: var(--danger-bg);
+        color: var(--danger);
       }
 
-      .embedded .option.first {
-        margin-left: 0em;
-        border-top: none !important;
-        border-left: none;
+      .dot {
+        height: 0.5em;
+        width: 0.5em;
+        margin-left: 0.2em;
+        background: var(--accent-600);
+        border-radius: 99px;
       }
 
-      .embedded.options .option.selected {
-        box-shadow: none !important;
+      .option.selected .dot {
+        display: none;
       }
 
       .check {
         margin-left: 0.4em;
       }
-
-      .pane {
-        display: flex;
-      }
     `;
   }
 
-  @property({ type: Boolean })
-  embedded = false;
-
   @property({ type: Boolean })
   collapses = false;
 
@@ -367,13 +316,11 @@ export class TabPane extends RapidElement {
   }
 
   public render(): TemplateResult {
-    const activeTab = this.options[this.index];
     return html`
       <div
         class="${getClasses({
           options: true,
           collapses: this.collapses,
-          embedded: this.embedded,
           focusedname: this.focusedName,
           unselect: this.unselect
         })}"
@@ -388,15 +335,9 @@ export class TabPane extends RapidElement {
                 first: index == 0,
                 selected: index == this.index,
                 hidden: tab.hidden,
-                notify: tab.notify,
                 alert: tab.alert,
                 dirty: tab.dirty
               })}"
-              style="${tab.selectionColor && index == this.index
-                ? `color:${tab.selectionColor};--icon-color:${tab.selectionColor};`
-                : ''} ${tab.selectionBackground && index == this.index
-                ? `background-color:${tab.selectionBackground};`
-                : ''}"
             >
               ${tab.icon ? html`<temba-icon name=${tab.icon} />` : null}
               <div class="name">${tab.name} ${tab.dirty ? ` *` : ``}</div>
@@ -405,14 +346,11 @@ export class TabPane extends RapidElement {
                     <div class="badge">
                       ${tab.count > 0 && !tab.activity
                         ? html`<div class="count">
-                            ${tab.activity ? '' : tab.count.toLocaleString()}
+                            ${tab.count.toLocaleString()}
                           </div>`
                         : null}
                       ${tab.activity && tab.count > 0 && !tab.dirty
-                        ? html`<div
-                            class="dot"
-                            style="background:${tab.activityColor}"
-                          ></div>`
+                        ? html`<div class="dot"></div>`
                         : null}
                     </div>
                   `
@@ -429,35 +367,7 @@ export class TabPane extends RapidElement {
           <slot name="tab-right"></slot>
         </div>
       </div>
-      <div
-        @temba-details-changed=${this.handleTabDetailsChanged}
-        style="${activeTab?.borderColor
-          ? `
-            border-top: var(--temba-tabs-border-top, 1px solid ${
-              activeTab?.borderColor || 'var(--color-widget-border)'
-            });
-
-            border-left: var(--temba-tabs-border-left, 1px solid ${
-              activeTab?.borderColor || 'var(--color-widget-border)'
-            });
-
-            border-bottom: var(--temba-tabs-border-bottom, 1px solid ${
-              activeTab?.borderColor || 'var(--color-widget-border)'
-            });
-
-            border-right: var(--temba-tabs-border-right, 1px solid ${
-              activeTab?.borderColor || 'var(--color-widget-border)'
-            });
-
-            `
-          : ''} ${activeTab?.selectionBackground
-          ? `background:${activeTab?.selectionBackground};`
-          : ``}"
-        class="pane ${getClasses({
-          first: this.index == 0,
-          embedded: this.embedded
-        })}"
-      >
+      <div @temba-details-changed=${this.handleTabDetailsChanged} class="pane">
         <slot></slot>
         <slot name="pane-bottom"></slot>
       </div>

package/src/list/ContentMenu.ts

@@ -39,8 +39,6 @@ export class ContentMenu extends RapidElement {
         z-index: 5000;
       }
       .container {
-        --button-y: 0.4em;
-        --button-x: 1em;
         display: flex;
         align-items: center;
       }
@@ -52,6 +50,7 @@ export class ContentMenu extends RapidElement {
 
       temba-button {
         margin-right: 0.5rem;
+        align-self: center;
       }
       .toggle {
         --icon-color: rgb(102, 102, 102);

package/src/list/SortableList.ts

@@ -372,10 +372,7 @@ export class SortableList extends RapidElement {
   ];
 
   private inlineComputedStyles(original: Element, clone: Element): void {
-    if (
-      !(original instanceof HTMLElement) ||
-      !(clone instanceof HTMLElement)
-    ) {
+    if (!(original instanceof HTMLElement) || !(clone instanceof HTMLElement)) {
       return;
     }