@nyaruka/temba-components 0.156.18 → 0.157.1

package/src/form/select/WorkspaceSelect.ts

@@ -14,8 +14,14 @@ export class WorkspaceSelect extends Select<WorkspaceOption> {
     return css`
       ${super.styles}
 
+      /* Workspace chooser is embedded in the account menu, not a
+         standalone form widget — suppress the focus border + halo
+         on both the select itself and the dropdown popup. */
       :host {
-        border: 0px solid blue;
+        --temba-select-focus-border: transparent;
+        --temba-select-focus-halo: none;
+        --temba-options-focus-border: transparent;
+        --temba-options-focus-halo: none;
       }
     `;
   }

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/Accordion.ts

@@ -7,8 +7,8 @@ export class Accordion extends LitElement {
     return css`
       :host {
         display: block;
-        border: 1px solid #e0e0e0;
-        border-radius: 6px;
+        border: 1px solid var(--color-widget-border);
+        border-radius: var(--curvature-widget);
         overflow: hidden;
       }
     `;

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/Modax.ts

@@ -70,7 +70,7 @@ export class Modax extends RapidElement {
         color: tomato;
         padding: 10px;
         margin-bottom: 10px;
-        border-radius: 6px;
+        border-radius: var(--curvature);
       }
 
       .step-ball {

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

@@ -252,9 +252,165 @@ export class SortableList extends RapidElement {
     // Copy form values for the root element and all descendants
     copyFormValues(element, clone);
 
+    // Inline computed styles onto the clone so it renders faithfully
+    // once detached from its original shadow-DOM scope. The ghost is
+    // appended to document.body (see startDrag), which means the
+    // original's shadow-root-scoped CSS rules no longer apply — chips
+    // would lose their flex layout, the X button would lose its shape,
+    // and the pill --icon-color would stop inheriting. Walk the cloned
+    // light DOM in parallel with the original and inline the layout
+    // properties + a curated set of DS custom properties.
+    this.inlineComputedStyles(element, clone);
+
     return clone;
   }
 
+  /** CSS properties copied from the original to the ghost. Covers
+   * layout (flex/sizing/spacing), visual (colors, borders, radii,
+   * shadows), and text (font, white-space, alignment) — enough to
+   * make a faithful free-floating clone without resolving the entire
+   * ~400 properties getComputedStyle returns.
+   *
+   * Important: `getComputedStyle` returns LONGHAND values only —
+   * asking for shorthand like `padding` / `margin` / `border` returns
+   * an empty string in most browsers. We list longhands explicitly so
+   * inlined chip padding / borders survive the move to document.body.
+   *
+   * Width/height ARE included: nested elements that depend on
+   * shadow-root class rules for sized boxes (e.g. select's
+   * `.remove-item { width: 16px; height: 16px }`) collapse to their
+   * content size without it, leaving a stray gap inside the chip. */
+  private static GHOST_COPY_PROPS = [
+    'display',
+    'flex-grow',
+    'flex-shrink',
+    'flex-basis',
+    'flex-direction',
+    'flex-wrap',
+    'align-items',
+    'align-self',
+    'justify-content',
+    'gap',
+    'column-gap',
+    'row-gap',
+    'padding-top',
+    'padding-right',
+    'padding-bottom',
+    'padding-left',
+    'margin-top',
+    'margin-right',
+    'margin-bottom',
+    'margin-left',
+    'border-top-width',
+    'border-right-width',
+    'border-bottom-width',
+    'border-left-width',
+    'border-top-style',
+    'border-right-style',
+    'border-bottom-style',
+    'border-left-style',
+    'border-top-color',
+    'border-right-color',
+    'border-bottom-color',
+    'border-left-color',
+    'border-top-left-radius',
+    'border-top-right-radius',
+    'border-bottom-right-radius',
+    'border-bottom-left-radius',
+    'background-color',
+    'background-image',
+    'color',
+    'font-family',
+    'font-size',
+    'font-weight',
+    'font-style',
+    'line-height',
+    'letter-spacing',
+    'text-align',
+    'white-space',
+    'overflow',
+    'text-overflow',
+    'box-shadow',
+    'opacity',
+    'width',
+    'min-width',
+    'max-width',
+    'height',
+    'min-height',
+    'max-height',
+    'box-sizing',
+    'cursor',
+    'user-select',
+    'vertical-align'
+  ];
+
+  /** Design-system custom properties carried over to the ghost so
+   * nested custom elements (temba-icon's --icon-color, pill variants,
+   * etc.) read the correct values once detached from the original
+   * shadow-root scope. */
+  private static GHOST_COPY_CUSTOM_PROPS = [
+    '--icon-color',
+    '--color-widget-text',
+    '--color-text-help',
+    '--accent',
+    '--accent-100',
+    '--accent-200',
+    '--accent-700',
+    '--flow',
+    '--field',
+    '--channel',
+    '--text-1',
+    '--text-2',
+    '--sunken',
+    '--border',
+    '--border-strong',
+    '--font-family',
+    '--w-regular',
+    '--w-medium',
+    '--curvature',
+    '--curvature-widget'
+  ];
+
+  private inlineComputedStyles(original: Element, clone: Element): void {
+    if (!(original instanceof HTMLElement) || !(clone instanceof HTMLElement)) {
+      return;
+    }
+
+    const apply = (orig: HTMLElement, cln: HTMLElement) => {
+      const cs = window.getComputedStyle(orig);
+      let inline = '';
+      for (const p of SortableList.GHOST_COPY_PROPS) {
+        const v = cs.getPropertyValue(p);
+        if (v) inline += `${p}:${v};`;
+      }
+      for (const p of SortableList.GHOST_COPY_CUSTOM_PROPS) {
+        const v = cs.getPropertyValue(p);
+        if (v) inline += `${p}:${v};`;
+      }
+      // existing inline style wins by sitting AFTER the inlined
+      // computed values — preserves anything we just authored elsewhere
+      // (e.g. .option-name's explicit display:flex).
+      cln.setAttribute('style', inline + (cln.getAttribute('style') || ''));
+    };
+
+    const walk = (orig: Element, cln: Element) => {
+      if (orig instanceof HTMLElement && cln instanceof HTMLElement) {
+        apply(orig, cln);
+      }
+      // Descend into both light-DOM and custom-element subtrees: the
+      // latter's slotted/light children still need styles inlined, and
+      // its own shadow DOM rebuilds itself when the clone upgrades.
+      const oc = Array.from(orig.children);
+      const cc = Array.from(cln.children);
+      const n = Math.min(oc.length, cc.length);
+      for (let i = 0; i < n; i++) {
+        walk(oc[i], cc[i]);
+      }
+    };
+
+    walk(original, clone);
+  }
+
   public getIds() {
     return this.getSortableElements().map((ele) => ele.id);
   }