@nyaruka/temba-components 0.122.0 → 0.124.0

package/src/select/Select.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { TemplateResult, html, css, CSSResult, CSSResultArray } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import {
   getUrl,
   getClasses,
@@ -9,6 +9,7 @@ import {
   postJSON
 } from '../utils';
 import '../options/Options';
+import '../list/SortableList';
 import { EventHandler } from '../RapidElement';
 import { FormElement } from '../FormElement';
 
@@ -76,7 +77,7 @@ export class Select<T extends SelectOption> extends FormElement {
         background: rgba(100, 100, 100, 0.05);
       }
 
-      .selected-item.multi .remove-item {
+      . selected-item.multi .remove-item {
         display: none;
       }
 
@@ -112,7 +113,7 @@ export class Select<T extends SelectOption> extends FormElement {
         padding-top: 1px;
         box-shadow: var(--widget-box-shadow);
         position: relative;
-        min-height: var(--temba-select-min-height, 2.5em);
+        min-height: var(--temba-select-min-height, 2.4em);
       }
 
       temba-icon.select-open:hover,
@@ -148,7 +149,7 @@ export class Select<T extends SelectOption> extends FormElement {
         flex-direction: row;
         align-items: stretch;
         user-select: none;
-        padding: var(--temba-select-selected-padding);
+        padding: var(--temba-select-selected-padding, 0px 4px);
       }
 
       .searchable .selected {
@@ -207,6 +208,18 @@ export class Select<T extends SelectOption> extends FormElement {
         background: rgba(100, 100, 100, 0.3);
       }
 
+      .multi .selected-item.sortable {
+        cursor: move;
+      }
+
+      .multi .selected-item.dragging {
+        opacity: 0.5;
+      }
+
+      .multi temba-sortable-list {
+        margin: 0 !important;
+      }
+
       input {
         font-size: 13px;
         width: 0px;
@@ -225,16 +238,15 @@ export class Select<T extends SelectOption> extends FormElement {
         border: 0px solid purple !important;
       }
 
-      .input-wrapper {
-        min-width: 1px;
-      }
-
       .input-wrapper:focus-within {
         min-width: 1px;
       }
 
       .input-wrapper {
+        min-width: 1px;
         margin-left: 6px;
+        margin-right: -6px;
+        display: flex;
       }
 
       .multi .input-wrapper {
@@ -274,9 +286,9 @@ export class Select<T extends SelectOption> extends FormElement {
         box-shadow: none !important;
       }
 
-      .input-wrapper {
-        display: flex;
-        margin-right: 0em;
+      .multi .input-wrapper {
+        flex-shrink: 0;
+        min-width: 100px;
       }
 
       .input-wrapper .searchbox {
@@ -291,6 +303,7 @@ export class Select<T extends SelectOption> extends FormElement {
         color: var(--color-placeholder);
         display: none;
         line-height: var(--temba-select-selected-line-height);
+        margin-left: 6px;
       }
 
       .footer {
@@ -332,6 +345,10 @@ export class Select<T extends SelectOption> extends FormElement {
         pointer-events: none;
         padding: 0px;
       }
+
+      .ghost .remove-item {
+        display: none !important;
+      }
     `;
   }
 
@@ -410,6 +427,9 @@ export class Select<T extends SelectOption> extends FormElement {
   @property({ type: Boolean })
   disabled = false;
 
+  @state()
+  attemptedOpen = false;
+
   @property({ attribute: false })
   selectedIndex = -1;
 
@@ -512,6 +532,9 @@ export class Select<T extends SelectOption> extends FormElement {
   @property({ type: Boolean })
   allowAnchor: boolean = true;
 
+  @property({ type: String })
+  draggingId: string;
+
   private alphaSort = (a: any, b: any) => {
     // by default, all endpoint values are sorted by name
     if (this.endpoint) {
@@ -535,6 +558,7 @@ export class Select<T extends SelectOption> extends FormElement {
     this.renderSelectedItemDefault = this.renderSelectedItemDefault.bind(this);
     this.prepareOptionsDefault = this.prepareOptionsDefault.bind(this);
     this.isMatchDefault = this.isMatchDefault.bind(this);
+    this.handleOrderChanged = this.handleOrderChanged.bind(this);
   }
 
   public prepareOptionsDefault(options: T[]): T[] {
@@ -863,6 +887,7 @@ export class Select<T extends SelectOption> extends FormElement {
     }
 
     this.visibleOptions = [];
+    this.attemptedOpen = false;
     this.input = '';
     this.next = null;
     this.complete = true;
@@ -955,7 +980,9 @@ export class Select<T extends SelectOption> extends FormElement {
   }
 
   public isOpen(): boolean {
-    return this.visibleOptions.length > 0;
+    return (
+      this.visibleOptions.length > 0 || (this.attemptedOpen && this.focused)
+    );
   }
 
   public setOptions(options: any[]): void {
@@ -1212,6 +1239,7 @@ export class Select<T extends SelectOption> extends FormElement {
 
   private handleBlur() {
     this.focused = false;
+    this.attemptedOpen = false;
     if (this.visibleOptions.length > 0) {
       this.input = '';
       this.next = null;
@@ -1285,8 +1313,10 @@ export class Select<T extends SelectOption> extends FormElement {
     ) {
       if (
         this.visibleOptions.length === 0 &&
-        this.completionOptions.length === 0
+        this.completionOptions.length === 0 &&
+        !this.input
       ) {
+        this.attemptedOpen = true;
         this.requestUpdate('input');
         return;
       }
@@ -1322,6 +1352,7 @@ export class Select<T extends SelectOption> extends FormElement {
 
   private handleCancel() {
     this.visibleOptions = [];
+    this.attemptedOpen = false;
   }
 
   private handleCursorChanged(event: CustomEvent) {
@@ -1329,8 +1360,13 @@ export class Select<T extends SelectOption> extends FormElement {
   }
 
   private handleContainerClick(event: MouseEvent) {
-    event.stopPropagation();
-    event.preventDefault();
+    if (this.disabled) {
+      // prevent opening dropdown right after drag-and-drop
+      event.stopPropagation();
+      event.preventDefault();
+      return;
+    }
+
     this.focused = true;
     if ((event.target as any).tagName !== 'INPUT') {
       const input = this.shadowRoot.querySelector('input');
@@ -1340,10 +1376,15 @@ export class Select<T extends SelectOption> extends FormElement {
         return;
       }
 
-      if (this.visibleOptions.length > 0) {
+      // Check if dropdown is currently open (either with options or showing "No options")
+      if (this.isOpen()) {
         this.visibleOptions = [];
+        this.attemptedOpen = false;
       } else {
+        this.attemptedOpen = true;
         this.requestUpdate('input');
+        // Also trigger an immediate update to show empty dropdown
+        this.requestUpdate();
       }
     }
   }
@@ -1361,6 +1402,9 @@ export class Select<T extends SelectOption> extends FormElement {
   }
 
   private handleArrowClick(event: MouseEvent): void {
+    if (this.disabled) {
+      return;
+    }
     if (this.isOpen()) {
       event.preventDefault();
       event.stopPropagation();
@@ -1376,7 +1420,16 @@ export class Select<T extends SelectOption> extends FormElement {
     // special case for icons on any option type
     const icon = (option as any).icon;
     return html`
-      <div class="option-name" style="display:flex">
+      <div
+        class="option-name"
+        style="flex: 1 1 auto;
+        align-self: center;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding: 2px 8px;
+        display: flex;"
+      >
         ${icon
           ? html`<temba-icon
               name="${icon}"
@@ -1443,6 +1496,18 @@ export class Select<T extends SelectOption> extends FormElement {
     const idx = this.values.indexOf(valueToRemove);
     if (idx > -1) {
       this.values.splice(idx, 1);
+
+      // Also remove the 'selected' attribute from the corresponding temba-option element
+      const valueToMatch = this.getValue(valueToRemove);
+      for (const child of this.children) {
+        if (child.tagName === 'TEMBA-OPTION') {
+          const childValue = child.getAttribute('value');
+          if (childValue === valueToMatch) {
+            child.removeAttribute('selected');
+            break;
+          }
+        }
+      }
     }
     this.requestUpdate('values', oldValues);
     this.infoText = '';
@@ -1461,6 +1526,41 @@ export class Select<T extends SelectOption> extends FormElement {
     this.requestUpdate('values', oldValues);
   }
 
+  private shouldShowEmptyMessage(): boolean {
+    return (
+      this.attemptedOpen &&
+      this.focused &&
+      this.visibleOptions.length === 0 &&
+      !this.input &&
+      this.staticOptions.length === 0 &&
+      !this.endpoint
+    );
+  }
+
+  private handleOrderChanged(event: CustomEvent): void {
+    const detail = event.detail;
+
+    // Handle new swap-based format
+    if (detail.swap && Array.isArray(detail.swap) && detail.swap.length === 2) {
+      const [fromIdx, toIdx] = detail.swap;
+
+      // Only reorder if the indexes are different and valid
+      if (
+        fromIdx !== toIdx &&
+        fromIdx >= 0 &&
+        toIdx >= 0 &&
+        fromIdx < this.values.length &&
+        toIdx < this.values.length
+      ) {
+        const oldValues = [...this.values];
+        // Move the item from fromIdx to toIdx
+        const movedItem = this.values.splice(fromIdx, 1)[0];
+        this.values.splice(toIdx, 0, movedItem);
+        this.requestUpdate('values', oldValues);
+      }
+    }
+  }
+
   public render(): TemplateResult {
     const placeholder = this.values.length === 0 ? this.placeholder : '';
     const placeholderDiv = html`
@@ -1545,35 +1645,132 @@ export class Select<T extends SelectOption> extends FormElement {
                   : null
               }
               ${!this.multi && !this.resolving ? input : null}
-              ${this.values.map(
-                (selected: any, index: number) => html`
-                  <div
-                    class="selected-item ${index === this.selectedIndex
-                      ? 'focused'
-                      : ''}"
-                  >
-                    ${this.multi
-                      ? html`
-                          <div
-                            class="remove-item"
-                            style="margin-top:1px"
-                            @click=${(evt: MouseEvent) => {
-                              evt.preventDefault();
-                              evt.stopPropagation();
-                              this.handleRemoveSelection(selected);
-                            }}
-                          >
-                            <temba-icon
-                              name="${Icon.delete_small}"
-                              size="1"
-                            ></temba-icon>
-                          </div>
-                        `
-                      : null}
-                    ${this.renderSelectedItem(selected)}
-                  </div>
-                `
-              )}
+              ${
+                this.multi && this.values.length > 1
+                  ? html`
+                      <temba-sortable-list
+                        horizontal
+                        @temba-order-changed=${this.handleOrderChanged}
+                        .prepareGhost=${(item: any) => {
+                          item.style.transform = 'scale(1)';
+                          item.querySelector('.remove-item').style.display =
+                            'none';
+                        }}
+                      >
+                        ${this.values.map(
+                          (selected: any, index: number) => html`
+                            <div
+                              class="selected-item sortable ${index ===
+                              this.selectedIndex
+                                ? 'focused'
+                                : ''} ${this.draggingId === `selected-${index}`
+                                ? 'dragging'
+                                : ''}"
+                              id="selected-${index}"
+                              style="
+                                vertical-align: middle;
+                                background: rgba(100,100,100,0.1);
+                                user-select: none;
+                                border-radius: 2px;
+                                align-items: center;
+                                flex-direction: row;
+                                flex-wrap: nowrap;
+                                margin: 2px 2px;
+                                display: flex;
+                                overflow: hidden;
+                                color: var(--color-widget-text);
+                                line-height: var(--temba-select-selected-line-height);
+                                --icon-color: var(--color-text-dark);
+                                ${index === this.selectedIndex
+                                ? 'background: rgba(100,100,100,0.3);'
+                                : ''}
+                                ${this.draggingId === `selected-${index}`
+                                ? 'opacity: 0.5;'
+                                : ''}
+                              "
+                            >
+                              ${this.multi
+                                ? html`
+                                    <div
+                                      class="remove-item"
+                                      style="
+                                        cursor: pointer;
+                                        display: inline-block;
+                                        padding: 3px 6px;
+                                        border-right: 1px solid rgba(100,100,100,0.2);
+                                        margin: 0;
+                                        background: rgba(100,100,100,0.05);
+                                        margin-top:1px;
+                                      "
+                                      @click=${(evt: MouseEvent) => {
+                                        evt.preventDefault();
+                                        evt.stopPropagation();
+                                        this.handleRemoveSelection(selected);
+                                      }}
+                                    >
+                                      <temba-icon
+                                        name="${Icon.delete_small}"
+                                        size="1"
+                                      ></temba-icon>
+                                    </div>
+                                  `
+                                : null}
+                              ${this.renderSelectedItem(selected)}
+                            </div>
+                          `
+                        )}
+                      </temba-sortable-list>
+                    `
+                  : this.values.map(
+                      (selected: any, index: number) => html`
+                        <div
+                          class="selected-item ${index === this.selectedIndex
+                            ? 'focused'
+                            : ''}"
+                          style="
+                            display: flex;
+                            overflow: hidden;
+                            color: var(--color-widget-text);
+                            line-height: var(--temba-select-selected-line-height);
+                            --icon-color: var(--color-text-dark);
+                            ${index === this.selectedIndex
+                            ? 'background: rgba(100,100,100,0.3);'
+                            : ''}
+                          "
+                        >
+                          ${this.multi
+                            ? html`
+                                <div
+                                  class="remove-item"
+                                  style="
+                                    cursor: pointer;
+                                    display: inline-block;
+                                    padding: 3px 6px;
+                                    border-right: 1px solid rgba(100,100,100,0.2);
+                                    margin: 0;
+                                    background: rgba(100,100,100,0.05);
+                                    margin-top:1px;
+                                  "
+                                  @click=${(evt: MouseEvent) => {
+                                    evt.preventDefault();
+                                    evt.stopPropagation();
+                                    this.handleRemoveSelection(selected);
+                                  }}
+                                >
+                                  <temba-icon
+                                    name="${Icon.delete_small}"
+                                    size="1"
+                                  ></temba-icon>
+                                </div>
+                              `
+                            : null}
+                          ${!this.input
+                            ? this.renderSelectedItem(selected)
+                            : null}
+                        </div>
+                      `
+                    )
+              }
               ${this.multi ? input : null}
             </div>
 
@@ -1620,7 +1817,8 @@ export class Select<T extends SelectOption> extends FormElement {
     .getName=${this.getNameInternal}
     ?static-width=${this.optionWidth}
     ?anchor-right=${this.anchorRight}
-    ?visible=${this.visibleOptions.length > 0}
+    ?visible=${this.visibleOptions.length > 0 || this.shouldShowEmptyMessage()}
+    ?showEmptyMessage=${this.shouldShowEmptyMessage()}
     ></temba-options>
 
     <temba-options

package/src/store/AppState.ts

@@ -157,11 +157,11 @@ export const zustand = createStore<AppState>()(
       setFlowContents: (flow: FlowContents) => {
         set((state: AppState) => {
           const flowLang = flow.definition.language;
-          const languageCode = state.languageCode || flowLang;
           state.flowDefinition = flow.definition;
           state.flowInfo = flow.info;
-          state.isTranslating = flowLang !== languageCode;
-          state.languageCode = languageCode || flowLang;
+          // Reset to the flow's default language when loading a new flow
+          state.languageCode = flowLang;
+          state.isTranslating = false;
         });
       },
 

package/src/utils/index.ts

@@ -494,7 +494,7 @@ export const getScrollParent = (node: any): any => {
   return null;
 };
 
-export const isElementVisible = (el: any, holder: any) => {
+export const isElementVisible = (el: any, holder?: any) => {
   holder = holder || document.body;
   const { top, bottom } = el.getBoundingClientRect();
   const holderRect = holder.getBoundingClientRect();
@@ -575,7 +575,7 @@ export const timeSince = (
   }
 };
 
-export const isDate = (value: string): boolean => {
+export const isDate = (value: any): boolean => {
   if (toString.call(value) === '[object Date]') {
     return true;
   }
@@ -635,6 +635,10 @@ export const truncate = (input: string, max: number): string => {
 };
 
 export const oxford = (items: any[], joiner = 'and'): any => {
+  if (items.length === 0) {
+    return '';
+  }
+
   if (items.length === 1) {
     return items[0];
   }
@@ -657,7 +661,9 @@ export const oxford = (items: any[], joiner = 'and'): any => {
     });
   }
 
-  return items.join(', ') + joiner + items[items.length - 1];
+  const allButLast = items.slice(0, -1);
+  const last = items[items.length - 1];
+  return allButLast.join(', ') + ', ' + joiner + ' ' + last;
 };
 
 export const oxfordFn = (
@@ -713,13 +719,19 @@ export enum COOKIE_KEYS {
   TICKET_SHOW_DETAILS = 'tickets.show-details'
 }
 
-export const capitalize = ([first, ...rest], locale = navigator.language) =>
+export const capitalize = (
+  [first, ...rest]: string[] | string,
+  locale = navigator.language
+) =>
   first === undefined ? '' : first.toLocaleUpperCase(locale) + rest.join('');
 
 export const formatFileType = (type: string): string => {
   return type.split('/')[1];
 };
-export const formatFileSize = (bytes: number, decimalPoint: number): string => {
+export const formatFileSize = (
+  bytes: number,
+  decimalPoint?: number
+): string => {
   if (bytes == 0) return '0 KB';
   const k = 1024,
     dm = decimalPoint || 2,

package/src/vectoricon/VectorIcon.ts

@@ -127,9 +127,10 @@ export class VectorIcon extends LitElement {
 
       .spin-forever {
         animation-name: spin;
-        animation-duration: 2000ms;
+        animation-duration: var(--test-animation-duration, 2000ms);
         animation-iteration-count: infinite;
         animation-timing-function: linear;
+        animation-play-state: var(--test-animation-play-state, running);
       }
 
       @keyframes spin {

package/src/webchat/WebChat.ts

@@ -398,8 +398,11 @@ export class WebChat extends LitElement {
     super.firstUpdated(changed);
     this.chat = this.shadowRoot.querySelector('temba-chat');
 
-    const lightbox = document.createElement('temba-lightbox');
-    document.querySelector('body').appendChild(lightbox);
+    // Only create lightbox if one doesn't already exist
+    if (!document.querySelector('temba-lightbox')) {
+      const lightbox = document.createElement('temba-lightbox');
+      document.querySelector('body').appendChild(lightbox);
+    }
   }
 
   private handleReconnect() {

package/temba-modules.ts

@@ -58,7 +58,6 @@ import { MediaPicker } from './src/mediapicker/MediaPicker';
 import { Editor } from './src/flow/Editor';
 import { EditorNode } from './src/flow/EditorNode';
 import { ContactNotepad } from './src/contacts/ContactNotepad';
-import { OutboxMonitor } from './src/outboxmonitor/OutboxMonitor';
 import { ProgressBar } from './src/progress/ProgressBar';
 import { StartProgress } from './src/progress/StartProgress';
 import { ShortcutList } from './src/list/ShortcutList';
@@ -134,7 +133,6 @@ addCustomElement('temba-media-picker', MediaPicker);
 addCustomElement('temba-flow-editor', Editor);
 addCustomElement('temba-flow-node', EditorNode);
 addCustomElement('temba-contact-notepad', ContactNotepad);
-addCustomElement('temba-outbox-monitor', OutboxMonitor);
 addCustomElement('temba-progress', ProgressBar);
 addCustomElement('temba-start-progress', StartProgress);
 addCustomElement('temba-shortcuts', ShortcutList);