@nyaruka/temba-components 0.130.3 → 0.130.5

package/out-tsc/src/form/ArrayEditor.js

@@ -3,11 +3,14 @@ import { html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { BaseListEditor } from './BaseListEditor';
 import { FieldRenderer } from './FieldRenderer';
+import '../list/SortableList';
+import { Icon } from '../Icons';
 let TembaArrayEditor = class TembaArrayEditor extends BaseListEditor {
     constructor() {
         super();
         this.itemConfig = {};
         this.itemLabel = 'Item';
+        this.sortable = false;
         this.maintainEmptyItem = true; // Enable by default for better UX
         this._items = [];
     }
@@ -58,6 +61,70 @@ let TembaArrayEditor = class TembaArrayEditor extends BaseListEditor {
         }
         this.updateValue(updatedItems);
     }
+    handleOrderChanged(event) {
+        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() {
+        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>
+      `;
+        }
+    }
     computeFieldValue(itemIndex, fieldName, config) {
         const item = this._items[itemIndex] || {};
         const currentValue = item[fieldName];
@@ -138,11 +205,9 @@ let TembaArrayEditor = class TembaArrayEditor extends BaseListEditor {
                 }
                 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>
@@ -156,11 +221,31 @@ let TembaArrayEditor = class TembaArrayEditor extends BaseListEditor {
         }
         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>
@@ -176,12 +261,6 @@ let TembaArrayEditor = class TembaArrayEditor extends BaseListEditor {
         return css `
       ${super.styles}
 
-      .array-editor {
-      }
-
-      .array-item {
-      }
-
       .item-header {
         display: flex;
         justify-content: space-between;
@@ -193,24 +272,10 @@ let TembaArrayEditor = class TembaArrayEditor extends BaseListEditor {
         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 */
       }
@@ -235,10 +300,20 @@ let TembaArrayEditor = class TembaArrayEditor extends BaseListEditor {
         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;
+      }
     `;
     }
 };
@@ -254,6 +329,9 @@ __decorate([
 __decorate([
     property({ type: Function })
 ], TembaArrayEditor.prototype, "isEmptyItemFn", void 0);
+__decorate([
+    property({ type: Boolean })
+], TembaArrayEditor.prototype, "sortable", void 0);
 __decorate([
     property({ type: Boolean })
 ], TembaArrayEditor.prototype, "maintainEmptyItem", void 0);

package/out-tsc/src/form/ArrayEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArrayEditor.js","sourceRoot":"","sources":["../../../src/form/ArrayEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { FieldConfig } from '../flow/types';\nimport { BaseListEditor, ListItem } from './BaseListEditor';\nimport { FieldRenderer } from './FieldRenderer';\n\n@customElement('temba-array-editor')\nexport class TembaArrayEditor extends BaseListEditor<ListItem> {\n  @property({ type: Object })\n  itemConfig: Record<string, FieldConfig> = {};\n\n  @property({ type: String })\n  itemLabel = 'Item';\n\n  @property({ type: Function })\n  onItemChange?: (\n    itemIndex: number,\n    field: string,\n    value: any,\n    allItems: any[]\n  ) => any[];\n\n  @property({ type: Function })\n  isEmptyItemFn?: (item: any) => boolean;\n\n  @property({ type: Boolean })\n  maintainEmptyItem = true; // Enable by default for better UX\n\n  constructor() {\n    super();\n    this._items = [];\n  }\n\n  // External API\n  @property({ type: Array })\n  get value(): any[] {\n    return [...this._items];\n  }\n\n  set value(newValue: any[]) {\n    this._items = newValue || [];\n    this.requestUpdate();\n  }\n\n  // Implement abstract methods\n  isEmptyItem(item: ListItem): boolean {\n    // Use configurable function if provided\n    if (this.isEmptyItemFn) {\n      return this.isEmptyItemFn(item);\n    }\n\n    // Default behavior: check if all values are empty\n    const values = Object.values(item);\n    if (values.length === 0) {\n      return true;\n    }\n\n    return values.every(\n      (value) => value === undefined || value === null || value === ''\n    );\n  }\n\n  // Override cleanItems to be more permissive for form data\n  protected cleanItems(items: ListItem[]): any {\n    // For runtime attachments, keep items that have at least one non-empty field\n    return items.filter((item) => {\n      const values = Object.values(item);\n      return (\n        values.length > 0 &&\n        values.some(\n          (value) => value !== undefined && value !== null && value !== ''\n        )\n      );\n    });\n  }\n\n  createEmptyItem(): ListItem {\n    return {};\n  }\n\n  protected handleFieldChange(\n    itemIndex: number,\n    fieldName: string,\n    newValue: any\n  ) {\n    let updatedItems: any[];\n\n    if (this.onItemChange) {\n      updatedItems = this.onItemChange(\n        itemIndex,\n        fieldName,\n        newValue,\n        this._items\n      );\n    } else {\n      updatedItems = [...this._items];\n      updatedItems[itemIndex] = {\n        ...updatedItems[itemIndex],\n        [fieldName]: newValue\n      };\n    }\n\n    this.updateValue(updatedItems);\n  }\n\n  private computeFieldValue(\n    itemIndex: number,\n    fieldName: string,\n    config: FieldConfig\n  ): any {\n    const item = this._items[itemIndex] || {};\n    const currentValue = item[fieldName];\n\n    if (config.computeValue) {\n      return config.computeValue(item, currentValue);\n    }\n\n    // For select fields, ensure we return the right type\n    /*if (config.type === 'select') {\n      console.log('computeFieldValue select', currentValue, config);\n      const selectConfig = config as SelectFieldConfig;\n      if (currentValue === undefined || currentValue === null) {\n        return selectConfig.multi ? [] : '';\n      }\n    }*/\n\n    return currentValue;\n  }\n\n  private renderArrayField(\n    itemIndex: number,\n    fieldName: string,\n    config: FieldConfig\n  ): TemplateResult {\n    const computedValue = this.computeFieldValue(itemIndex, fieldName, config);\n\n    // Extract flavor from select config if available\n    const flavor =\n      config.type === 'select' ? (config as any).flavor || 'small' : 'small';\n\n    // Build container style with width/maxWidth if specified\n    let containerStyle = '';\n    if (config.width) {\n      containerStyle = `width: ${config.width};`;\n    } else if (config.maxWidth) {\n      containerStyle = `max-width: ${config.maxWidth};`;\n    }\n\n    // Use FieldRenderer for consistent field rendering\n    const fieldContent = FieldRenderer.renderField(\n      fieldName,\n      config,\n      computedValue,\n      {\n        showLabel: false, // ArrayEditor doesn't show labels for individual fields\n        flavor: flavor,\n        extraClasses: 'form-control',\n        onChange: (e: Event) => {\n          let value: any;\n          const target = e.target as any;\n\n          // Handle different field types and their change events\n          if (config.type === 'select') {\n            // Use consistent temba-select value normalization\n            value = target.values;\n          } else {\n            // For other field types, use the target value directly\n            value = target.value;\n          }\n\n          this.handleFieldChange(itemIndex, fieldName, value);\n        }\n      }\n    );\n\n    // Wrap in container with style if maxWidth is specified\n    if (containerStyle) {\n      return html`<div style=\"${containerStyle}\">${fieldContent}</div>`;\n    }\n\n    return fieldContent;\n  }\n\n  renderItem(item: ListItem, index: number): TemplateResult {\n    const canRemove = this.canRemoveItem(index);\n\n    // Render fields and track if any value fields are visible\n    const fieldElements: TemplateResult[] = [];\n    let hasVisibleValueField = false;\n\n    Object.entries(this.itemConfig).forEach(([fieldName, config]) => {\n      // Check visibility condition\n      let isVisible = true;\n      if (config.conditions?.visible) {\n        try {\n          const currentItem = this._items[index] || {};\n          isVisible = config.conditions.visible(currentItem);\n        } catch (error) {\n          console.error(`Error checking visibility for ${fieldName}:`, error);\n        }\n      }\n\n      if (isVisible) {\n        // Check if this is a value field (text input without fixed sizing)\n        const isValueField =\n          !config.width && !config.maxWidth && config.type === 'text';\n        if (isValueField) {\n          hasVisibleValueField = true;\n        }\n\n        fieldElements.push(html`\n          <div\n            class=\"field ${config.width ||\n            config.maxWidth ||\n            config.type === 'select'\n              ? 'field-fixed'\n              : 'field-flex'}\"\n          >\n            ${this.renderArrayField(index, fieldName, config)}\n          </div>\n        `);\n      }\n    });\n\n    // If no value fields are visible, add a spacer to maintain alignment\n    if (!hasVisibleValueField) {\n      // Insert spacer after operator (first field) and before category (last field)\n      fieldElements.splice(\n        -1,\n        0,\n        html`<div class=\"field field-flex spacer\"></div>`\n      );\n    }\n\n    return html`\n      <div class=\"array-item\">\n        <div class=\"item-fields\">\n          ${fieldElements}\n          <button\n            @click=${canRemove ? () => this.removeItem(index) : undefined}\n            class=\"remove-btn ${canRemove ? '' : 'invisible'}\"\n            ?disabled=${!canRemove}\n          >\n            <temba-icon name=\"x\"></temba-icon>\n          </button>\n        </div>\n      </div>\n    `;\n  }\n\n  protected getContainerClass(): string {\n    return 'array-editor';\n  }\n\n  static get styles() {\n    return css`\n      ${super.styles}\n\n      .array-editor {\n      }\n\n      .array-item {\n      }\n\n      .item-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n      }\n\n      .item-title {\n        font-weight: 600;\n        color: #333;\n      }\n\n      .item-fields {\n        display: flex;\n        gap: 12px;\n        align-items: center;\n      }\n\n      .field {\n        /* Base field styles */\n      }\n\n      .field-flex {\n        flex: 1; /* Grow to fill remaining space */\n      }\n\n      .field-fixed {\n        flex: none; /* Don't grow, use content/maxWidth size */\n      }\n\n      .spacer {\n        /* Empty spacer to maintain layout alignment */\n      }\n\n      .add-btn,\n      .remove-btn {\n        padding: 4px;\n        border: 1px solid #ccc;\n        border-radius: 4px;\n        background: white;\n        cursor: pointer;\n        font-size: 14px;\n      }\n\n      .add-btn:hover,\n      .remove-btn:hover {\n        background: #f8f8f8;\n      }\n\n      .remove-btn {\n        background: #fefefe;\n        color: #999;\n      }\n\n      .remove-btn.invisible {\n        visibility: hidden;\n        cursor: default;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ArrayEditor.js","sourceRoot":"","sources":["../../../src/form/ArrayEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { FieldConfig } from '../flow/types';\nimport { BaseListEditor, ListItem } from './BaseListEditor';\nimport { FieldRenderer } from './FieldRenderer';\nimport '../list/SortableList';\nimport { Icon } from '../Icons';\n\n@customElement('temba-array-editor')\nexport class TembaArrayEditor extends BaseListEditor<ListItem> {\n  @property({ type: Object })\n  itemConfig: Record<string, FieldConfig> = {};\n\n  @property({ type: String })\n  itemLabel = 'Item';\n\n  @property({ type: Function })\n  onItemChange?: (\n    itemIndex: number,\n    field: string,\n    value: any,\n    allItems: any[]\n  ) => any[];\n\n  @property({ type: Function })\n  isEmptyItemFn?: (item: any) => boolean;\n\n  @property({ type: Boolean })\n  sortable = false;\n\n  @property({ type: Boolean })\n  maintainEmptyItem = true; // Enable by default for better UX\n\n  constructor() {\n    super();\n    this._items = [];\n  }\n\n  // External API\n  @property({ type: Array })\n  get value(): any[] {\n    return [...this._items];\n  }\n\n  set value(newValue: any[]) {\n    this._items = newValue || [];\n    this.requestUpdate();\n  }\n\n  // Implement abstract methods\n  isEmptyItem(item: ListItem): boolean {\n    // Use configurable function if provided\n    if (this.isEmptyItemFn) {\n      return this.isEmptyItemFn(item);\n    }\n\n    // Default behavior: check if all values are empty\n    const values = Object.values(item);\n    if (values.length === 0) {\n      return true;\n    }\n\n    return values.every(\n      (value) => value === undefined || value === null || value === ''\n    );\n  }\n\n  // Override cleanItems to be more permissive for form data\n  protected cleanItems(items: ListItem[]): any {\n    // For runtime attachments, keep items that have at least one non-empty field\n    return items.filter((item) => {\n      const values = Object.values(item);\n      return (\n        values.length > 0 &&\n        values.some(\n          (value) => value !== undefined && value !== null && value !== ''\n        )\n      );\n    });\n  }\n\n  createEmptyItem(): ListItem {\n    return {};\n  }\n\n  protected handleFieldChange(\n    itemIndex: number,\n    fieldName: string,\n    newValue: any\n  ) {\n    let updatedItems: any[];\n\n    if (this.onItemChange) {\n      updatedItems = this.onItemChange(\n        itemIndex,\n        fieldName,\n        newValue,\n        this._items\n      );\n    } else {\n      updatedItems = [...this._items];\n      updatedItems[itemIndex] = {\n        ...updatedItems[itemIndex],\n        [fieldName]: newValue\n      };\n    }\n\n    this.updateValue(updatedItems);\n  }\n\n  private handleOrderChanged(event: CustomEvent): void {\n    const detail = event.detail;\n\n    // Handle swap-based logic from SortableList\n    if (detail.swap && Array.isArray(detail.swap) && detail.swap.length === 2) {\n      const [fromIdx, toIdx] = detail.swap;\n\n      // Only reorder if the indexes are different and valid\n      if (\n        fromIdx !== toIdx &&\n        fromIdx >= 0 &&\n        toIdx >= 0 &&\n        fromIdx < this._items.length &&\n        toIdx < this._items.length\n      ) {\n        const updatedItems = [...this._items];\n        // Move the item using splice operations\n        const movedItem = updatedItems.splice(fromIdx, 1)[0];\n        updatedItems.splice(toIdx, 0, movedItem);\n        this.updateValue(updatedItems);\n      }\n    }\n  }\n\n  renderWidget(): TemplateResult {\n    const items = this.displayItems;\n\n    const itemsContent = items.map((item, index) => {\n      const renderedItem = this.renderItem(item, index);\n\n      if (this.sortable && !this.isEmptyItem(item)) {\n        // Wrap non-empty items with sortable class and unique ID for drag-and-drop\n        return html`\n          <div class=\"sortable\" id=\"array-item-${index}\">${renderedItem}</div>\n        `;\n      } else {\n        // Non-sortable items or empty items don't get the sortable wrapper\n        return renderedItem;\n      }\n    });\n\n    if (this.sortable) {\n      return html`\n        <div class=${this.getContainerClass()}>\n          <temba-sortable-list\n            dragHandle=\"drag-handle\"\n            gap=\"0.4em\"\n            @temba-order-changed=${this.handleOrderChanged}\n            style=\"display: grid; grid-template-columns: 1fr; gap: 8px;\"\n          >\n            ${itemsContent}\n          </temba-sortable-list>\n          ${this.shouldShowAddButton() ? this.renderAddButton() : ''}\n        </div>\n      `;\n    } else {\n      // Non-sortable rendering (original behavior)\n      return html`\n        <div class=${this.getContainerClass()}>\n          <div\n            class=\"list-items\"\n            style=\"display: grid; grid-template-columns: 1fr; gap: 8px;\"\n          >\n            ${itemsContent}\n          </div>\n          ${this.shouldShowAddButton() ? this.renderAddButton() : ''}\n        </div>\n      `;\n    }\n  }\n\n  private computeFieldValue(\n    itemIndex: number,\n    fieldName: string,\n    config: FieldConfig\n  ): any {\n    const item = this._items[itemIndex] || {};\n    const currentValue = item[fieldName];\n\n    if (config.computeValue) {\n      return config.computeValue(item, currentValue);\n    }\n\n    // For select fields, ensure we return the right type\n    /*if (config.type === 'select') {\n      console.log('computeFieldValue select', currentValue, config);\n      const selectConfig = config as SelectFieldConfig;\n      if (currentValue === undefined || currentValue === null) {\n        return selectConfig.multi ? [] : '';\n      }\n    }*/\n\n    return currentValue;\n  }\n\n  private renderArrayField(\n    itemIndex: number,\n    fieldName: string,\n    config: FieldConfig\n  ): TemplateResult {\n    const computedValue = this.computeFieldValue(itemIndex, fieldName, config);\n\n    // Extract flavor from select config if available\n    const flavor =\n      config.type === 'select' ? (config as any).flavor || 'small' : 'small';\n\n    // Build container style with width/maxWidth if specified\n    let containerStyle = '';\n    if (config.width) {\n      containerStyle = `width: ${config.width};`;\n    } else if (config.maxWidth) {\n      containerStyle = `max-width: ${config.maxWidth};`;\n    }\n\n    // Use FieldRenderer for consistent field rendering\n    const fieldContent = FieldRenderer.renderField(\n      fieldName,\n      config,\n      computedValue,\n      {\n        showLabel: false, // ArrayEditor doesn't show labels for individual fields\n        flavor: flavor,\n        extraClasses: 'form-control',\n        onChange: (e: Event) => {\n          let value: any;\n          const target = e.target as any;\n\n          // Handle different field types and their change events\n          if (config.type === 'select') {\n            // Use consistent temba-select value normalization\n            value = target.values;\n          } else {\n            // For other field types, use the target value directly\n            value = target.value;\n          }\n\n          this.handleFieldChange(itemIndex, fieldName, value);\n        }\n      }\n    );\n\n    // Wrap in container with style if maxWidth is specified\n    if (containerStyle) {\n      return html`<div style=\"${containerStyle}\">${fieldContent}</div>`;\n    }\n\n    return fieldContent;\n  }\n\n  renderItem(item: ListItem, index: number): TemplateResult {\n    const canRemove = this.canRemoveItem(index);\n\n    // Render fields and track if any value fields are visible\n    const fieldElements: TemplateResult[] = [];\n    let hasVisibleValueField = false;\n\n    Object.entries(this.itemConfig).forEach(([fieldName, config]) => {\n      // Check visibility condition\n      let isVisible = true;\n      if (config.conditions?.visible) {\n        try {\n          const currentItem = this._items[index] || {};\n          isVisible = config.conditions.visible(currentItem);\n        } catch (error) {\n          console.error(`Error checking visibility for ${fieldName}:`, error);\n        }\n      }\n\n      if (isVisible) {\n        // Check if this is a value field (text input without fixed sizing)\n        const isValueField =\n          !config.width && !config.maxWidth && config.type === 'text';\n        if (isValueField) {\n          hasVisibleValueField = true;\n        }\n\n        fieldElements.push(html`\n          <div\n            style=\"${config.width || config.maxWidth || config.type === 'select'\n              ? 'flex:none'\n              : 'flex:1'}\"\n          >\n            ${this.renderArrayField(index, fieldName, config)}\n          </div>\n        `);\n      }\n    });\n\n    // If no value fields are visible, add a spacer to maintain alignment\n    if (!hasVisibleValueField) {\n      // Insert spacer after operator (first field) and before category (last field)\n      fieldElements.splice(\n        -1,\n        0,\n        html`<div class=\"field field-flex spacer\"></div>`\n      );\n    }\n\n    return html`\n      <div class=\"array-item\">\n        <div\n          class=\"item-fields  ${canRemove ? '' : 'removable'}\"\n          style=\"display: flex; gap: 12px; align-items: center\"\n        >\n          ${this.sortable\n            ? html`<temba-icon\n                name=${Icon.sort}\n                style=\"margin-right: -6px;\"\n                class=\"drag-handle\"\n              ></temba-icon>`\n            : null}\n          ${fieldElements}\n          <button\n            @click=${canRemove ? () => this.removeItem(index) : undefined}\n            class=\"remove-btn\"\n            style=\"\n              padding: 4px;\n              border: 1px solid #ccc;\n              border-radius: 4px;\n              background: white;\n              cursor: pointer;\n              background: #fefefe;\n              color: #999;\n              font-size: 14px;\n            \"\n            ?disabled=${!canRemove}\n          >\n            <temba-icon name=\"x\"></temba-icon>\n          </button>\n        </div>\n      </div>\n    `;\n  }\n\n  protected getContainerClass(): string {\n    return 'array-editor';\n  }\n\n  static get styles() {\n    return css`\n      ${super.styles}\n\n      .item-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n      }\n\n      .item-title {\n        font-weight: 600;\n        color: #333;\n      }\n\n      .field {\n        /* Base field styles */\n      }\n\n      .spacer {\n        /* Empty spacer to maintain layout alignment */\n      }\n\n      .add-btn,\n      .remove-btn {\n        padding: 4px;\n        border: 1px solid #ccc;\n        border-radius: 4px;\n        background: white;\n        cursor: pointer;\n        font-size: 14px;\n      }\n\n      .add-btn:hover,\n      .remove-btn:hover {\n        background: #f8f8f8;\n      }\n\n      .remove-btn {\n        background: #fefefe;\n        color: #999;\n      }\n\n      .removable .remove-btn {\n        visibility: hidden;\n        cursor: default;\n      }\n\n      .removable .drag-handle {\n        visibility: hidden;\n        cursor: default;\n      }\n\n      .drag-handle {\n        cursor: grab;\n        color: #ccc;\n      }\n    `;\n  }\n}\n"]}

package/out-tsc/src/form/select/Select.js

@@ -223,13 +223,15 @@ export class Select 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 {
@@ -288,6 +290,7 @@ export class Select extends FieldElement {
         display: none;
         line-height: var(--temba-select-selected-line-height);
         margin-left: 6px;
+        pointer-events: none;
       }
 
       .empty .placeholder {
@@ -347,10 +350,6 @@ export class Select extends FieldElement {
         pointer-events: none;
         padding: 0px;
       }
-
-      .ghost .remove-item {
-        display: none !important;
-      }
     `;
     }
     // Override the setter to ensure values is always an array
@@ -1328,10 +1327,13 @@ export class Select 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}
@@ -1348,14 +1350,10 @@ export class Select extends FieldElement {
           <temba-sortable-list
             horizontal
             @temba-order-changed=${this.handleOrderChanged}
-            .prepareGhost=${(item) => {
-                item.style.transform = 'scale(1)';
-                item.querySelector('.remove-item').style.display = 'none';
-            }}
           >
             ${this.values.map((selected, index) => html `
                 <div
-                  class="selected-item sortable ${index === this.selectedIndex
+                  class="sortable selected-item ${index === this.selectedIndex
                 ? 'focused'
                 : ''} ${this.draggingId === `selected-${index}`
                 ? 'dragging'
@@ -1412,7 +1410,7 @@ export class Select extends FieldElement {
                   ${this.renderSelectedItem(selected)}
                 </div>
               `)}
-            ${this.searchable && this.focused ? input : null}
+            ${input}
           </temba-sortable-list>
         `
             : html `${this.values.map((selected, index) => html `
@@ -1435,15 +1433,9 @@ export class Select 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) => {
                     evt.preventDefault();
                     evt.stopPropagation();
@@ -1473,9 +1465,9 @@ export class Select 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
                       style="margin-left:1em"
@@ -1488,7 +1480,11 @@ export class Select 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
                   class="right-side arrow"