@nyaruka/temba-components 0.130.4 → 0.130.5

package/src/form/ArrayEditor.ts

@@ -3,6 +3,8 @@ import { customElement, property } from 'lit/decorators.js';
 import { FieldConfig } from '../flow/types';
 import { BaseListEditor, ListItem } from './BaseListEditor';
 import { FieldRenderer } from './FieldRenderer';
+import '../list/SortableList';
+import { Icon } from '../Icons';
 
 @customElement('temba-array-editor')
 export class TembaArrayEditor extends BaseListEditor<ListItem> {
@@ -23,6 +25,9 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
   @property({ type: Function })
   isEmptyItemFn?: (item: any) => boolean;
 
+  @property({ type: Boolean })
+  sortable = false;
+
   @property({ type: Boolean })
   maintainEmptyItem = true; // Enable by default for better UX
 
@@ -103,6 +108,77 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
     this.updateValue(updatedItems);
   }
 
+  private handleOrderChanged(event: CustomEvent): void {
+    const detail = event.detail;
+
+    // Handle swap-based logic from SortableList
+    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._items.length &&
+        toIdx < this._items.length
+      ) {
+        const updatedItems = [...this._items];
+        // Move the item using splice operations
+        const movedItem = updatedItems.splice(fromIdx, 1)[0];
+        updatedItems.splice(toIdx, 0, movedItem);
+        this.updateValue(updatedItems);
+      }
+    }
+  }
+
+  renderWidget(): TemplateResult {
+    const items = this.displayItems;
+
+    const itemsContent = items.map((item, index) => {
+      const renderedItem = this.renderItem(item, index);
+
+      if (this.sortable && !this.isEmptyItem(item)) {
+        // Wrap non-empty items with sortable class and unique ID for drag-and-drop
+        return html`
+          <div class="sortable" id="array-item-${index}">${renderedItem}</div>
+        `;
+      } else {
+        // Non-sortable items or empty items don't get the sortable wrapper
+        return renderedItem;
+      }
+    });
+
+    if (this.sortable) {
+      return html`
+        <div class=${this.getContainerClass()}>
+          <temba-sortable-list
+            dragHandle="drag-handle"
+            gap="0.4em"
+            @temba-order-changed=${this.handleOrderChanged}
+            style="display: grid; grid-template-columns: 1fr; gap: 8px;"
+          >
+            ${itemsContent}
+          </temba-sortable-list>
+          ${this.shouldShowAddButton() ? this.renderAddButton() : ''}
+        </div>
+      `;
+    } else {
+      // Non-sortable rendering (original behavior)
+      return html`
+        <div class=${this.getContainerClass()}>
+          <div
+            class="list-items"
+            style="display: grid; grid-template-columns: 1fr; gap: 8px;"
+          >
+            ${itemsContent}
+          </div>
+          ${this.shouldShowAddButton() ? this.renderAddButton() : ''}
+        </div>
+      `;
+    }
+  }
+
   private computeFieldValue(
     itemIndex: number,
     fieldName: string,
@@ -210,11 +286,9 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
 
         fieldElements.push(html`
           <div
-            class="field ${config.width ||
-            config.maxWidth ||
-            config.type === 'select'
-              ? 'field-fixed'
-              : 'field-flex'}"
+            style="${config.width || config.maxWidth || config.type === 'select'
+              ? 'flex:none'
+              : 'flex:1'}"
           >
             ${this.renderArrayField(index, fieldName, config)}
           </div>
@@ -234,11 +308,31 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
 
     return html`
       <div class="array-item">
-        <div class="item-fields">
+        <div
+          class="item-fields  ${canRemove ? '' : 'removable'}"
+          style="display: flex; gap: 12px; align-items: center"
+        >
+          ${this.sortable
+            ? html`<temba-icon
+                name=${Icon.sort}
+                style="margin-right: -6px;"
+                class="drag-handle"
+              ></temba-icon>`
+            : null}
           ${fieldElements}
           <button
             @click=${canRemove ? () => this.removeItem(index) : undefined}
-            class="remove-btn ${canRemove ? '' : 'invisible'}"
+            class="remove-btn"
+            style="
+              padding: 4px;
+              border: 1px solid #ccc;
+              border-radius: 4px;
+              background: white;
+              cursor: pointer;
+              background: #fefefe;
+              color: #999;
+              font-size: 14px;
+            "
             ?disabled=${!canRemove}
           >
             <temba-icon name="x"></temba-icon>
@@ -256,12 +350,6 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
     return css`
       ${super.styles}
 
-      .array-editor {
-      }
-
-      .array-item {
-      }
-
       .item-header {
         display: flex;
         justify-content: space-between;
@@ -273,24 +361,10 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
         color: #333;
       }
 
-      .item-fields {
-        display: flex;
-        gap: 12px;
-        align-items: center;
-      }
-
       .field {
         /* Base field styles */
       }
 
-      .field-flex {
-        flex: 1; /* Grow to fill remaining space */
-      }
-
-      .field-fixed {
-        flex: none; /* Don't grow, use content/maxWidth size */
-      }
-
       .spacer {
         /* Empty spacer to maintain layout alignment */
       }
@@ -315,10 +389,20 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
         color: #999;
       }
 
-      .remove-btn.invisible {
+      .removable .remove-btn {
         visibility: hidden;
         cursor: default;
       }
+
+      .removable .drag-handle {
+        visibility: hidden;
+        cursor: default;
+      }
+
+      .drag-handle {
+        cursor: grab;
+        color: #ccc;
+      }
     `;
   }
 }

package/src/form/select/Select.ts

@@ -247,13 +247,15 @@ export class Select<T extends SelectOption> extends FieldElement {
 
       .input-wrapper:focus-within {
         min-width: 1px;
+        display: flex;
       }
 
       .input-wrapper {
         min-width: 1px;
         margin-left: 6px;
         margin-right: -6px;
-        display: flex;
+        display: none;
+        pointer-events: none;
       }
 
       .multi .input-wrapper {
@@ -312,6 +314,7 @@ export class Select<T extends SelectOption> extends FieldElement {
         display: none;
         line-height: var(--temba-select-selected-line-height);
         margin-left: 6px;
+        pointer-events: none;
       }
 
       .empty .placeholder {
@@ -371,10 +374,6 @@ export class Select<T extends SelectOption> extends FieldElement {
         pointer-events: none;
         padding: 0px;
       }
-
-      .ghost .remove-item {
-        display: none !important;
-      }
     `;
   }
 
@@ -1566,6 +1565,7 @@ export class Select<T extends SelectOption> extends FieldElement {
   public removeValue(valueToRemove: any) {
     const oldValues = [...this.values];
     const idx = this.values.indexOf(valueToRemove);
+
     if (idx > -1) {
       this.values.splice(idx, 1);
 
@@ -1683,10 +1683,13 @@ export class Select<T extends SelectOption> extends FieldElement {
 
     const input = this.searchable
       ? html`
-          <div class="input-wrapper">
+          <div
+            class="input-wrapper"
+            style="${this.focused ? 'display:flex;' : ''}"
+          >
             <input
               class="searchbox"
-              style=${this.inputStyle ? styleMap(this.inputStyle) : ''}
+              style="${this.inputStyle ? styleMap(this.inputStyle) : ''};"
               @input=${this.handleInput}
               @keydown=${this.handleKeyDown}
               @click=${this.handleClick}
@@ -1704,15 +1707,11 @@ export class Select<T extends SelectOption> extends FieldElement {
           <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
+                  class="sortable selected-item ${index === this.selectedIndex
                     ? 'focused'
                     : ''} ${this.draggingId === `selected-${index}`
                     ? 'dragging'
@@ -1770,7 +1769,7 @@ export class Select<T extends SelectOption> extends FieldElement {
                 </div>
               `
             )}
-            ${this.searchable && this.focused ? input : null}
+            ${input}
           </temba-sortable-list>
         `
       : html`${this.values.map(
@@ -1794,15 +1793,9 @@ export class Select<T extends SelectOption> extends FieldElement {
                 ? 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;
-                                  "
+                      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();
@@ -1834,9 +1827,9 @@ export class Select<T extends SelectOption> extends FieldElement {
           class="select-container ${classes}"
           @click=${this.handleContainerClick}
         > 
-          <div class="left-side" >
+          <div class="left-side">
           <slot name="prefix"></slot>
-            <div class="selected" >
+            <div class="selected">
               ${
                 this.resolving
                   ? html`<temba-loading
@@ -1851,7 +1844,13 @@ export class Select<T extends SelectOption> extends FieldElement {
 
           ${clear}
 
-          <slot name="right"></slot>
+          <slot name="right">${
+            this.fetching
+              ? html`<temba-loading
+                  style="position:absolute;background:rgba(255,255,255,0.7);padding:2px;border-radius:var(--curvature);right:25px"
+                ></temba-loading>`
+              : null
+          }</slot>
           ${
             !this.tags && !this.emails
               ? html`<div