@nyaruka/temba-components 0.123.0 → 0.124.0

package/out-tsc/src/fields/FieldManager.js

@@ -120,7 +120,7 @@ export class FieldManager extends EndpointMonitorElement {
         border-radius: var(--curvature);
       }
 
-      .featured temba-sortable-list .field:hover {
+      .featured:not(.dragging) temba-sortable-list .field:hover {
         cursor: move;
         border-color: #e6e6e6;
         background: #fcfcfc;
@@ -163,30 +163,26 @@ export class FieldManager extends EndpointMonitorElement {
             this.filterFields();
         }
     }
-    handleSaveOrder(event) {
-        const list = event.currentTarget;
-        postJSON(this.priorityEndpoint, list
-            .getIds()
-            .reverse()
-            .reduce((map, key, idx) => {
-            map[key] = idx;
-            return map;
-        }, {})).then(() => {
-            this.store.refreshFields();
-        });
-    }
     handleOrderChanged(event) {
-        const swapsies = event.detail;
-        const temp = this.featuredFields[swapsies.fromIdx];
-        this.featuredFields[swapsies.fromIdx] = this.featuredFields[swapsies.toIdx];
-        this.featuredFields[swapsies.toIdx] = temp;
-        this.requestUpdate('featuredFields');
-    }
-    handleDragStart(event) {
-        this.draggingId = event.detail.id;
-    }
-    handleDragStop() {
-        this.draggingId = null;
+        // Apply the reordering immediately - the SortableList now provides accurate indexes
+        const [fromIdx, toIdx] = event.detail.swap;
+        const temp = this.featuredFields[fromIdx];
+        this.featuredFields.splice(fromIdx, 1);
+        this.featuredFields.splice(toIdx, 0, temp);
+        this.requestUpdate();
+        // Save the new order to the server
+        const list = event.currentTarget;
+        setTimeout(() => {
+            postJSON(this.priorityEndpoint, list
+                .getIds()
+                .reverse()
+                .reduce((map, key, idx) => {
+                map[key] = idx;
+                return map;
+            }, {})).then(() => {
+                this.store.refreshFields();
+            });
+        }, 0);
     }
     handleFieldAction(event) {
         const ele = event.target;
@@ -210,10 +206,13 @@ export class FieldManager extends EndpointMonitorElement {
             display: flex; 
             flex-direction: row; 
             align-items: center;
-            padding: 0.25em 1em; 
-            ${field.key === this.draggingId
-            ? 'background: var(--color-selection)'
-            : ''}"
+            padding: 0.25em 1em;"
+        @click=${(e) => {
+            const ele = e.currentTarget;
+            const key = ele.dataset.key;
+            const action = ele.dataset.action;
+            this.fireCustomEvent(CustomEventType.Selection, { key, action });
+        }}
       >
         <div
           style="display: flex; min-width: 200px; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 2em"
@@ -285,10 +284,7 @@ export class FieldManager extends EndpointMonitorElement {
                   `
                 : html `
                     <temba-sortable-list
-                      @change=${this.handleSaveOrder}
                       @temba-order-changed=${this.handleOrderChanged}
-                      @temba-drag-start=${this.handleDragStart}
-                      @temba-drag-stop=${this.handleDragStop}
                     >
                       ${this.featuredFields.map((field) => this.renderField(field))}
                     </temba-sortable-list>
@@ -318,9 +314,6 @@ __decorate([
 __decorate([
     property({ type: Object, attribute: false })
 ], FieldManager.prototype, "otherFieldKeys", void 0);
-__decorate([
-    property({ type: String })
-], FieldManager.prototype, "draggingId", void 0);
 __decorate([
     property({ type: String })
 ], FieldManager.prototype, "query", void 0);

package/out-tsc/src/fields/FieldManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldManager.js","sourceRoot":"","sources":["../../../src/fields/FieldManager.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAoC,MAAM,KAAK,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAgB,eAAe,EAAE,MAAM,eAAe,CAAC;AAG9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,MAAM,UAAU,GAAG;IACjB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,QAAQ;IACjB,MAAM,EAAE,QAAQ;IAChB,QAAQ,EAAE,aAAa;IACvB,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;IACZ,QAAQ,EAAE,UAAU;CACrB,CAAC;AAEF,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAE,KAAa,EAAW,EAAE;IAC9D,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,IAAI,CAAC;IACd,CAAC;IACD,MAAM,MAAM,GAAG,CACb,KAAK,CAAC,KAAK;QACX,KAAK,CAAC,GAAG;QACT,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC,CAC7B,CAAC,WAAW,EAAE,CAAC;IAChB,IAAI,MAAM,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;QAC7C,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,OAAO,YAAa,SAAQ,sBAAsB;IAAxD;;QAyGE,mBAAc,GAAa,EAAE,CAAC;QAM9B,UAAK,GAAG,EAAE,CAAC;IAoNb,CAAC;IAlUC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6FT,CAAC;IACJ,CAAC;IAiBS,YAAY,CACpB,kBAAqE;QAErE,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;QACvC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC;IACvC,CAAC;IAEO,YAAY;QAClB,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE;YAC5D,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;YAC9C,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;gBACnB,OAAO,KAAK,CAAC;YACf,CAAC;YACD,OAAO,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC,CAAC,CAAC;QAEH,uCAAuC;QACvC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACzB,OAAO,IAAI,CAAC,KAAK;iBACd,eAAe,CAAC,CAAC,CAAC;iBAClB,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QAC9D,CAAC,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAmB,EAAE,CAAC;QACpC,IAAI,CAAC,KAAK,CAAC,iBAAiB,EAAE,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;YAC/C,IAAI,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC/B,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACvB,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC;QACnC,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;IACjC,CAAC;IAES,OAAO,CACf,UAA6D;QAE7D,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QACzB,IAAI,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YAC3B,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;aAAM,IAAI,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAEO,eAAe,CAAC,KAAK;QAC3B,MAAM,IAAI,GAAG,KAAK,CAAC,aAA6B,CAAC;QACjD,QAAQ,CACN,IAAI,CAAC,gBAAgB,EACrB,IAAI;aACD,MAAM,EAAE;aACR,OAAO,EAAE;aACT,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE;YACxB,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;YACf,OAAO,GAAG,CAAC;QACb,CAAC,EAAE,EAAE,CAAC,CACT,CAAC,IAAI,CAAC,GAAG,EAAE;YACV,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;QAC7B,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,kBAAkB,CAAC,KAAK;QAC9B,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC;QAC9B,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QACnD,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC5E,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;QAC3C,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACvC,CAAC;IAEO,eAAe,CAAC,KAAK;QAC3B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;IACpC,CAAC;IAEO,cAAc;QACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;IACzB,CAAC;IAEO,iBAAiB,CAAC,KAAiB;QACzC,MAAM,GAAG,GAAG,KAAK,CAAC,MAAwB,CAAC;QAC3C,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC;QAC5B,MAAM,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC;QAClC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,SAAS,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC;IACnE,CAAC;IAEO,YAAY,CAAC,KAAK;QACxB,IAAI,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;IACjD,CAAC;IAEO,SAAS,CAAC,KAAmB;QACnC,OAAO,CACL,KAAK,CAAC,MAAM,CAAC,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM;YACvE,CAAC,CACF,CAAC;IACJ,CAAC;IAEO,WAAW,CAAC,KAAmB;QACrC,OAAO,IAAI,CAAA;;;cAGD,KAAK,CAAC,GAAG;;;;;;cAMT,KAAK,CAAC,GAAG,KAAK,IAAI,CAAC,UAAU;YACjC,CAAC,CAAC,oCAAoC;YACtC,CAAC,CAAC,EAAE;;;;;;qBAMO,IAAI,CAAC,iBAAiB;uBACpB,KAAK,CAAC,GAAG;;;;cAIlB,KAAK,CAAC,KAAK;;YAEb,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;YACrB,CAAC,CAAC,IAAI,CAAA;;;;;6BAKW,KAAK,CAAC,GAAG;;2BAEX,IAAI,CAAC,iBAAiB;;;eAGlC;YACH,CAAC,CAAC,IAAI;;;;;;oBAME,KAAK,CAAC,GAAG;;eAEd,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC;;;;qBAItB,KAAK,CAAC,GAAG;;mBAEX,IAAI,CAAC,iBAAiB;;;KAGpC,CAAC;IACJ,CAAC;IAEM,MAAM;QACX,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;YACzB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,IAAI,CAAA;;;;kBAIG,IAAI,CAAC,YAAY;;gBAEnB,IAAI,CAAC,KAAK;;;QAGlB,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC;YAC9B,CAAC,CAAC,IAAI,CAAA;;;;;;gBAME,IAAI,CAAC,KAAK;gBACV,CAAC,CAAC,IAAI,CAAA;;wBAEE,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAClC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CACxB;;mBAEJ;gBACH,CAAC,CAAC,IAAI,CAAA;;gCAEU,IAAI,CAAC,eAAe;6CACP,IAAI,CAAC,kBAAkB;0CAC1B,IAAI,CAAC,eAAe;yCACrB,IAAI,CAAC,cAAc;;wBAEpC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAClC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CACxB;;mBAEJ;;WAER;YACH,CAAC,CAAC,IAAI;;;;;;;;YAQF,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAClC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CACpD;;;KAGN,CAAC;IACJ,CAAC;CACF;AAhOC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;sDAClC;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;oDACd;AAG/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;oDACf;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACR;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAChB","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ContactField, CustomEventType } from '../interfaces';\n\nimport { SortableList } from '../list/SortableList';\nimport { EndpointMonitorElement } from '../store/EndpointMonitorElement';\nimport { postJSON } from '../utils';\n\nconst TYPE_NAMES = {\n  text: 'Text',\n  numeric: 'Number',\n  number: 'Number',\n  datetime: 'Date & Time',\n  state: 'State',\n  ward: 'Ward',\n  district: 'District'\n};\n\nconst matches = (field: ContactField, query: string): boolean => {\n  if (!query) {\n    return true;\n  }\n  const search = (\n    field.label +\n    field.key +\n    TYPE_NAMES[field.value_type]\n  ).toLowerCase();\n  if (search.toLowerCase().indexOf(query) > -1) {\n    return true;\n  }\n  return false;\n};\n\nexport class FieldManager extends EndpointMonitorElement {\n  static get styles() {\n    return css`\n      :host {\n        display: flex;\n        flex-grow: 1;\n        flex-direction: column;\n        min-height: 0px;\n      }\n\n      .featured,\n      .other-fields {\n        background: #fff;\n        border-radius: var(--curvature);\n        box-shadow: var(--shadow);\n        margin-bottom: 1em;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .featured {\n        max-height: 40%;\n      }\n\n      .other-fields {\n        flex-grow: 2;\n        min-height: 0px;\n        margin-bottom: 0px;\n      }\n\n      temba-textinput {\n        margin-bottom: 1em;\n      }\n\n      .scroll-box {\n        overflow-y: auto;\n        flex-grow: 1;\n        flex-direction: column;\n        display: flex;\n      }\n\n      .header temba-icon {\n        margin-right: 0.5em;\n      }\n\n      .label {\n        flex-grow: 1;\n      }\n\n      .header {\n        padding: 0.5em 1em;\n        display: flex;\n        align-items: flex-start;\n        border-bottom: 1px solid var(--color-widget-border);\n      }\n\n      .featured-field {\n        user-select: none;\n      }\n\n      temba-sortable-list {\n        padding: 0.5em 0em;\n        width: 100%;\n        overflow-y: auto;\n      }\n\n      .scroll-box {\n        padding: 0.5em 0em;\n      }\n\n      temba-icon[name='usages']:hover {\n        --icon-color: var(--color-link-primary);\n      }\n\n      .field:hover temba-icon[name='delete_small'] {\n        opacity: 1 !important;\n        cursor: pointer !important;\n        pointer-events: all !important;\n      }\n\n      temba-icon[name='delete_small']:hover {\n        --icon-color: var(--color-link-primary);\n      }\n\n      .field {\n        border: 1px solid transparent;\n        margin: 0 0.5em;\n        border-radius: var(--curvature);\n      }\n\n      .featured temba-sortable-list .field:hover {\n        cursor: move;\n        border-color: #e6e6e6;\n        background: #fcfcfc;\n      }\n    `;\n  }\n\n  @property({ type: String, attribute: 'priority-endpoint' })\n  priorityEndpoint: string;\n\n  @property({ type: Object, attribute: false })\n  featuredFields: ContactField[];\n\n  @property({ type: Object, attribute: false })\n  otherFieldKeys: string[] = [];\n\n  @property({ type: String })\n  draggingId: string;\n\n  @property({ type: String })\n  query = '';\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(_changedProperties);\n    this.url = this.store.fieldsEndpoint;\n  }\n\n  private filterFields() {\n    const filteredKeys = this.store.getFieldKeys().filter((key) => {\n      const field = this.store.getContactField(key);\n      if (field.featured) {\n        return false;\n      }\n      return matches(field, this.query);\n    });\n\n    // sort by the label instead of the key\n    filteredKeys.sort((a, b) => {\n      return this.store\n        .getContactField(a)\n        .label.localeCompare(this.store.getContactField(b).label);\n    });\n\n    const featured: ContactField[] = [];\n    this.store.getFeaturedFields().forEach((field) => {\n      if (matches(field, this.query)) {\n        featured.push(field);\n      }\n    });\n\n    this.otherFieldKeys = filteredKeys;\n    this.featuredFields = featured;\n  }\n\n  protected updated(\n    properties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.update(properties);\n    if (properties.has('data')) {\n      this.filterFields();\n    } else if (properties.has('query')) {\n      this.filterFields();\n    }\n  }\n\n  private handleSaveOrder(event) {\n    const list = event.currentTarget as SortableList;\n    postJSON(\n      this.priorityEndpoint,\n      list\n        .getIds()\n        .reverse()\n        .reduce((map, key, idx) => {\n          map[key] = idx;\n          return map;\n        }, {})\n    ).then(() => {\n      this.store.refreshFields();\n    });\n  }\n\n  private handleOrderChanged(event) {\n    const swapsies = event.detail;\n    const temp = this.featuredFields[swapsies.fromIdx];\n    this.featuredFields[swapsies.fromIdx] = this.featuredFields[swapsies.toIdx];\n    this.featuredFields[swapsies.toIdx] = temp;\n    this.requestUpdate('featuredFields');\n  }\n\n  private handleDragStart(event) {\n    this.draggingId = event.detail.id;\n  }\n\n  private handleDragStop() {\n    this.draggingId = null;\n  }\n\n  private handleFieldAction(event: MouseEvent) {\n    const ele = event.target as HTMLDivElement;\n    const key = ele.dataset.key;\n    const action = ele.dataset.action;\n    this.fireCustomEvent(CustomEventType.Selection, { key, action });\n  }\n\n  private handleSearch(event) {\n    this.query = (event.target.value || '').trim();\n  }\n\n  private hasUsages(field: ContactField): boolean {\n    return (\n      field.usages.campaign_events + field.usages.flows + field.usages.groups >\n      0\n    );\n  }\n\n  private renderField(field: ContactField) {\n    return html`\n      <div\n        class=\"field sortable\"\n        id=\"${field.key}\"\n        style=\"\n            display: flex; \n            flex-direction: row; \n            align-items: center;\n            padding: 0.25em 1em; \n            ${field.key === this.draggingId\n          ? 'background: var(--color-selection)'\n          : ''}\"\n      >\n        <div\n          style=\"display: flex; min-width: 200px; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 2em\"\n        >\n          <span\n            @click=${this.handleFieldAction}\n            data-key=${field.key}\n            data-action=\"update\"\n            style=\"color: var(--color-link-primary); cursor:pointer;\"\n          >\n            ${field.label}\n          </span>\n          ${this.hasUsages(field)\n            ? html`\n                <temba-icon\n                  size=\"0.8\"\n                  style=\"color: #ccc; margin-left: 0.7em;\"\n                  name=\"usages\"\n                  data-key=${field.key}\n                  data-action=\"usages\"\n                  @click=${this.handleFieldAction}\n                  clickable\n                ></temba-icon>\n              `\n            : null}\n          <div class=\"flex-grow:1\"></div>\n        </div>\n        <div\n          style=\"flex-grow:1; font-family: Roboto Mono, monospace; font-size:0.8em;\"\n        >\n          @fields.${field.key}\n        </div>\n        <div>${TYPE_NAMES[field.value_type]}</div>\n        <temba-icon\n          style=\"pointer-events:none;color:#ccc;margin-left:0.3em;margin-right:-0.5em;opacity:0\"\n          name=\"delete_small\"\n          data-key=${field.key}\n          data-action=\"delete\"\n          @click=${this.handleFieldAction}\n        ></temba-icon>\n      </div>\n    `;\n  }\n\n  public render(): TemplateResult {\n    if (!this.featuredFields) {\n      return null;\n    }\n\n    return html`\n      <temba-textinput\n        id=\"search\"\n        placeholder=\"Search\"\n        @change=${this.handleSearch}\n        clearable\n        value=${this.query}\n      ></temba-textinput>\n\n      ${this.featuredFields.length > 0\n        ? html`\n            <div class=\"featured\">\n              <div class=\"header\">\n                <temba-icon name=\"featured\"></temba-icon>\n                <div class=\"label\">Featured</div>\n              </div>\n              ${this.query\n                ? html`\n                    <div class=\"scroll-box\">\n                      ${this.featuredFields.map((field) =>\n                        this.renderField(field)\n                      )}\n                    </div>\n                  `\n                : html`\n                    <temba-sortable-list\n                      @change=${this.handleSaveOrder}\n                      @temba-order-changed=${this.handleOrderChanged}\n                      @temba-drag-start=${this.handleDragStart}\n                      @temba-drag-stop=${this.handleDragStop}\n                    >\n                      ${this.featuredFields.map((field) =>\n                        this.renderField(field)\n                      )}\n                    </temba-sortable-list>\n                  `}\n            </div>\n          `\n        : null}\n\n      <div class=\"other-fields\">\n        <div class=\"header\">\n          <temba-icon name=\"fields\"></temba-icon>\n          <div class=\"label\">Everything Else</div>\n        </div>\n        <div class=\"scroll-box\">\n          ${this.otherFieldKeys.map((field) =>\n            this.renderField(this.store.getContactField(field))\n          )}\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"FieldManager.js","sourceRoot":"","sources":["../../../src/fields/FieldManager.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ContactField, CustomEventType } from '../interfaces';\n\nimport { SortableList } from '../list/SortableList';\nimport { EndpointMonitorElement } from '../store/EndpointMonitorElement';\nimport { postJSON } from '../utils';\n\nconst TYPE_NAMES = {\n  text: 'Text',\n  numeric: 'Number',\n  number: 'Number',\n  datetime: 'Date & Time',\n  state: 'State',\n  ward: 'Ward',\n  district: 'District'\n};\n\nconst matches = (field: ContactField, query: string): boolean => {\n  if (!query) {\n    return true;\n  }\n  const search = (\n    field.label +\n    field.key +\n    TYPE_NAMES[field.value_type]\n  ).toLowerCase();\n  if (search.toLowerCase().indexOf(query) > -1) {\n    return true;\n  }\n  return false;\n};\n\nexport class FieldManager extends EndpointMonitorElement {\n  static get styles() {\n    return css`\n      :host {\n        display: flex;\n        flex-grow: 1;\n        flex-direction: column;\n        min-height: 0px;\n      }\n\n      .featured,\n      .other-fields {\n        background: #fff;\n        border-radius: var(--curvature);\n        box-shadow: var(--shadow);\n        margin-bottom: 1em;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .featured {\n        max-height: 40%;\n      }\n\n      .other-fields {\n        flex-grow: 2;\n        min-height: 0px;\n        margin-bottom: 0px;\n      }\n\n      temba-textinput {\n        margin-bottom: 1em;\n      }\n\n      .scroll-box {\n        overflow-y: auto;\n        flex-grow: 1;\n        flex-direction: column;\n        display: flex;\n      }\n\n      .header temba-icon {\n        margin-right: 0.5em;\n      }\n\n      .label {\n        flex-grow: 1;\n      }\n\n      .header {\n        padding: 0.5em 1em;\n        display: flex;\n        align-items: flex-start;\n        border-bottom: 1px solid var(--color-widget-border);\n      }\n\n      .featured-field {\n        user-select: none;\n      }\n\n      temba-sortable-list {\n        padding: 0.5em 0em;\n        width: 100%;\n        overflow-y: auto;\n      }\n\n      .scroll-box {\n        padding: 0.5em 0em;\n      }\n\n      temba-icon[name='usages']:hover {\n        --icon-color: var(--color-link-primary);\n      }\n\n      .field:hover temba-icon[name='delete_small'] {\n        opacity: 1 !important;\n        cursor: pointer !important;\n        pointer-events: all !important;\n      }\n\n      temba-icon[name='delete_small']:hover {\n        --icon-color: var(--color-link-primary);\n      }\n\n      .field {\n        border: 1px solid transparent;\n        margin: 0 0.5em;\n        border-radius: var(--curvature);\n      }\n\n      .featured:not(.dragging) temba-sortable-list .field:hover {\n        cursor: move;\n        border-color: #e6e6e6;\n        background: #fcfcfc;\n      }\n    `;\n  }\n\n  @property({ type: String, attribute: 'priority-endpoint' })\n  priorityEndpoint: string;\n\n  @property({ type: Object, attribute: false })\n  featuredFields: ContactField[];\n\n  @property({ type: Object, attribute: false })\n  otherFieldKeys: string[] = [];\n\n  @property({ type: String })\n  query = '';\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(_changedProperties);\n    this.url = this.store.fieldsEndpoint;\n  }\n\n  private filterFields() {\n    const filteredKeys = this.store.getFieldKeys().filter((key) => {\n      const field = this.store.getContactField(key);\n      if (field.featured) {\n        return false;\n      }\n      return matches(field, this.query);\n    });\n\n    // sort by the label instead of the key\n    filteredKeys.sort((a, b) => {\n      return this.store\n        .getContactField(a)\n        .label.localeCompare(this.store.getContactField(b).label);\n    });\n\n    const featured: ContactField[] = [];\n    this.store.getFeaturedFields().forEach((field) => {\n      if (matches(field, this.query)) {\n        featured.push(field);\n      }\n    });\n\n    this.otherFieldKeys = filteredKeys;\n    this.featuredFields = featured;\n  }\n\n  protected updated(\n    properties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.update(properties);\n    if (properties.has('data')) {\n      this.filterFields();\n    } else if (properties.has('query')) {\n      this.filterFields();\n    }\n  }\n\n  private handleOrderChanged(event) {\n    // Apply the reordering immediately - the SortableList now provides accurate indexes\n    const [fromIdx, toIdx] = event.detail.swap;\n\n    const temp = this.featuredFields[fromIdx];\n    this.featuredFields.splice(fromIdx, 1);\n    this.featuredFields.splice(toIdx, 0, temp);\n    this.requestUpdate();\n\n    // Save the new order to the server\n    const list = event.currentTarget as SortableList;\n    setTimeout(() => {\n      postJSON(\n        this.priorityEndpoint,\n        list\n          .getIds()\n          .reverse()\n          .reduce((map, key, idx) => {\n            map[key] = idx;\n            return map;\n          }, {})\n      ).then(() => {\n        this.store.refreshFields();\n      });\n    }, 0);\n  }\n\n  private handleFieldAction(event: MouseEvent) {\n    const ele = event.target as HTMLDivElement;\n    const key = ele.dataset.key;\n    const action = ele.dataset.action;\n    this.fireCustomEvent(CustomEventType.Selection, { key, action });\n  }\n\n  private handleSearch(event) {\n    this.query = (event.target.value || '').trim();\n  }\n\n  private hasUsages(field: ContactField): boolean {\n    return (\n      field.usages.campaign_events + field.usages.flows + field.usages.groups >\n      0\n    );\n  }\n\n  private renderField(field: ContactField) {\n    return html`\n      <div\n        class=\"field sortable\"\n        id=\"${field.key}\"\n        style=\"\n            display: flex; \n            flex-direction: row; \n            align-items: center;\n            padding: 0.25em 1em;\"\n        @click=${(e: MouseEvent) => {\n          const ele = e.currentTarget as HTMLDivElement;\n          const key = ele.dataset.key;\n          const action = ele.dataset.action;\n          this.fireCustomEvent(CustomEventType.Selection, { key, action });\n        }}\n      >\n        <div\n          style=\"display: flex; min-width: 200px; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 2em\"\n        >\n          <span\n            @click=${this.handleFieldAction}\n            data-key=${field.key}\n            data-action=\"update\"\n            style=\"color: var(--color-link-primary); cursor:pointer;\"\n          >\n            ${field.label}\n          </span>\n          ${this.hasUsages(field)\n            ? html`\n                <temba-icon\n                  size=\"0.8\"\n                  style=\"color: #ccc; margin-left: 0.7em;\"\n                  name=\"usages\"\n                  data-key=${field.key}\n                  data-action=\"usages\"\n                  @click=${this.handleFieldAction}\n                  clickable\n                ></temba-icon>\n              `\n            : null}\n          <div class=\"flex-grow:1\"></div>\n        </div>\n        <div\n          style=\"flex-grow:1; font-family: Roboto Mono, monospace; font-size:0.8em;\"\n        >\n          @fields.${field.key}\n        </div>\n        <div>${TYPE_NAMES[field.value_type]}</div>\n        <temba-icon\n          style=\"pointer-events:none;color:#ccc;margin-left:0.3em;margin-right:-0.5em;opacity:0\"\n          name=\"delete_small\"\n          data-key=${field.key}\n          data-action=\"delete\"\n          @click=${this.handleFieldAction}\n        ></temba-icon>\n      </div>\n    `;\n  }\n\n  public render(): TemplateResult {\n    if (!this.featuredFields) {\n      return null;\n    }\n\n    return html`\n      <temba-textinput\n        id=\"search\"\n        placeholder=\"Search\"\n        @change=${this.handleSearch}\n        clearable\n        value=${this.query}\n      ></temba-textinput>\n\n      ${this.featuredFields.length > 0\n        ? html`\n            <div class=\"featured\">\n              <div class=\"header\">\n                <temba-icon name=\"featured\"></temba-icon>\n                <div class=\"label\">Featured</div>\n              </div>\n              ${this.query\n                ? html`\n                    <div class=\"scroll-box\">\n                      ${this.featuredFields.map((field) =>\n                        this.renderField(field)\n                      )}\n                    </div>\n                  `\n                : html`\n                    <temba-sortable-list\n                      @temba-order-changed=${this.handleOrderChanged}\n                    >\n                      ${this.featuredFields.map((field) =>\n                        this.renderField(field)\n                      )}\n                    </temba-sortable-list>\n                  `}\n            </div>\n          `\n        : null}\n\n      <div class=\"other-fields\">\n        <div class=\"header\">\n          <temba-icon name=\"fields\"></temba-icon>\n          <div class=\"label\">Everything Else</div>\n        </div>\n        <div class=\"scroll-box\">\n          ${this.otherFieldKeys.map((field) =>\n            this.renderField(this.store.getContactField(field))\n          )}\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/list/SortableList.js

@@ -7,7 +7,7 @@ import { RapidElement } from '../RapidElement';
  * A simple list that can be sorted by dragging
  */
 // how far we have to drag before it starts
-const DRAG_THRESHOLD = 5;
+const DRAG_THRESHOLD = 2;
 export class SortableList extends RapidElement {
     static get styles() {
         return css `
@@ -17,18 +17,54 @@ export class SortableList extends RapidElement {
 
       .container {
         user-select: none;
+        position: relative;
+      }
+
+      .container.horizontal {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
       }
 
       .dragging {
         background: var(--color-selection);
       }
 
+      .dragged-item {
+        opacity: 0;
+        pointer-events: none;
+      }
+
       .sortable {
         transition: all 300ms ease-in-out;
         display: flex;
         padding: 0.4em 0;
       }
 
+      .container.horizontal .sortable {
+        padding: 0;
+        margin-right: 0.25em;
+        margin-bottom: 0.25em;
+      }
+
+      .drop-indicator {
+        position: absolute;
+        background: var(--color-primary-dark, #1c7cd6);
+        z-index: 1000;
+        pointer-events: none;
+      }
+
+      .container.horizontal .drop-indicator {
+        width: 2px;
+        margin-top: -5px;
+        padding-bottom: 10px;
+      }
+
+      .container:not(.horizontal) .drop-indicator {
+        height: 2px;
+        left: 0;
+      }
+
       .sortable:hover temba-icon {
         opacity: 1;
         cursor: move;
@@ -36,8 +72,14 @@ export class SortableList extends RapidElement {
 
       .ghost {
         position: absolute;
-        opacity: 0.5;
+        opacity: 0.7;
         transition: none;
+        background: var(--color-background, white);
+        border: 1px solid var(--color-primary, #1c7cd6);
+        border-radius: 4px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+        pointer-events: none;
+        z-index: 999;
       }
 
       .slot {
@@ -57,13 +99,19 @@ export class SortableList extends RapidElement {
     }
     constructor() {
         super();
+        this.horizontal = false;
         this.ghostElement = null;
         this.downEle = null;
         this.xOffset = 0;
         this.yOffset = 0;
         this.yDown = 0;
+        this.xDown = 0;
         this.draggingIdx = -1;
         this.draggingEle = null;
+        this.dropIndicator = null;
+        this.pendingDropIndex = -1;
+        this.pendingTargetElement = null;
+        this.clickBlocker = null;
         this.handleMouseMove = this.handleMouseMove.bind(this);
         this.handleMouseUp = this.handleMouseUp.bind(this);
         this.handleMouseDown = this.handleMouseDown.bind(this);
@@ -71,109 +119,249 @@ export class SortableList extends RapidElement {
     firstUpdated(_changedProperties) {
         super.firstUpdated(_changedProperties);
     }
-    getIds() {
+    getSortableElements() {
         return this.shadowRoot
             .querySelector('slot')
             .assignedElements()
-            .map((ele) => ele.id);
+            .filter((ele) => ele.classList.contains('sortable'));
+    }
+    getIds() {
+        return this.getSortableElements().map((ele) => ele.id);
     }
     getRowIndex(id) {
-        return this.shadowRoot
-            .querySelector('slot')
-            .assignedElements()
-            .findIndex((ele) => ele.id === id);
+        return this.getSortableElements().findIndex((ele) => ele.id === id);
     }
-    getOverlappingElement(mouseY) {
-        const ghostRect = this.ghostElement.getBoundingClientRect();
-        const ele = this.shadowRoot
-            .querySelector('slot')
-            .assignedElements()
-            .find((otherEle) => {
-            const rect = otherEle.getBoundingClientRect();
-            // don't return ourselves
-            if (otherEle.id === this.ghostElement.id) {
-                return false;
+    getDropTargetInfo(mouseX, mouseY) {
+        const elements = this.getSortableElements().filter((ele) => { var _a; return ele.id !== ((_a = this.draggingEle) === null || _a === void 0 ? void 0 : _a.id); });
+        if (elements.length === 0)
+            return null;
+        if (this.horizontal) {
+            // For horizontal layout, find the insertion point based on mouse X position
+            for (let i = 0; i < elements.length; i++) {
+                const ele = elements[i];
+                const rect = ele.getBoundingClientRect();
+                const centerX = rect.left + rect.width / 2;
+                if (mouseX < centerX) {
+                    // Insert before this element
+                    return { element: ele, insertAfter: false };
+                }
             }
-            if (mouseY > this.yDown) {
-                // moving down
-                return ghostRect.top < rect.bottom && ghostRect.bottom > rect.bottom;
+            // If we're past all elements, insert after the last one
+            return {
+                element: elements[elements.length - 1],
+                insertAfter: true
+            };
+        }
+        else {
+            // For vertical layout, find the insertion point based on mouse Y position
+            for (let i = 0; i < elements.length; i++) {
+                const ele = elements[i];
+                const rect = ele.getBoundingClientRect();
+                const centerY = rect.top + rect.height / 2;
+                if (mouseY < centerY) {
+                    // Insert before this element
+                    return { element: ele, insertAfter: false };
+                }
+            }
+            // If we're past all elements, insert after the last one
+            return {
+                element: elements[elements.length - 1],
+                insertAfter: true
+            };
+        }
+    }
+    showDropIndicator(targetElement, insertAfter) {
+        this.hideDropIndicator();
+        if (!targetElement)
+            return;
+        const container = this.shadowRoot.querySelector('.container');
+        this.dropIndicator = document.createElement('div');
+        this.dropIndicator.className = 'drop-indicator';
+        const targetRect = targetElement.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+        if (this.horizontal) {
+            // For horizontal layout, show vertical line
+            this.dropIndicator.style.height = targetRect.height + 'px';
+            this.dropIndicator.style.top = targetRect.top - containerRect.top + 'px';
+            if (insertAfter) {
+                // Show line after target
+                this.dropIndicator.style.left =
+                    targetRect.right - containerRect.left + 'px';
+            }
+            else {
+                // Show line before target
+                this.dropIndicator.style.left =
+                    targetRect.left - containerRect.left + 'px';
+            }
+        }
+        else {
+            // For vertical layout, show horizontal line
+            this.dropIndicator.style.width = targetRect.width + 'px';
+            this.dropIndicator.style.left =
+                targetRect.left - containerRect.left + 'px';
+            if (insertAfter) {
+                // Show line after target
+                this.dropIndicator.style.top =
+                    targetRect.bottom - containerRect.top + 'px';
             }
             else {
-                // moving up
-                return rect.top < ghostRect.bottom && rect.bottom > ghostRect.bottom;
+                // Show line before target
+                this.dropIndicator.style.top =
+                    targetRect.top - containerRect.top + 'px';
             }
-        });
-        return ele;
+        }
+        container.appendChild(this.dropIndicator);
+    }
+    hideDropIndicator() {
+        if (this.dropIndicator) {
+            this.dropIndicator.remove();
+            this.dropIndicator = null;
+        }
     }
     handleMouseDown(event) {
         let ele = event.target;
         ele = ele.closest('.sortable');
         if (ele) {
+            event.preventDefault();
+            event.stopPropagation();
             this.downEle = ele;
             this.draggingId = ele.id;
             this.draggingIdx = this.getRowIndex(ele.id);
             this.draggingEle = ele;
-            this.xOffset = event.clientX - ele.offsetLeft;
-            this.yOffset = event.clientY - ele.offsetTop;
+            // Use getBoundingClientRect for accurate offsets
+            const rect = ele.getBoundingClientRect();
+            this.xOffset = event.clientX - rect.left;
+            this.yOffset = event.clientY - rect.top;
             this.yDown = event.clientY;
+            this.xDown = event.clientX;
             document.addEventListener('mousemove', this.handleMouseMove);
             document.addEventListener('mouseup', this.handleMouseUp);
         }
     }
     handleMouseMove(event) {
-        const scrollTop = this.shadowRoot
-            .querySelector('slot')
-            .assignedElements()[0].parentElement.scrollTop;
         if (!this.ghostElement &&
             this.downEle &&
-            Math.abs(event.clientY - this.yDown) > DRAG_THRESHOLD) {
+            (Math.abs(event.clientY - this.yDown) > DRAG_THRESHOLD ||
+                Math.abs(event.clientX - this.xDown) > DRAG_THRESHOLD)) {
             this.fireCustomEvent(CustomEventType.DragStart, {
                 id: this.downEle.id
             });
             this.ghostElement = this.downEle.cloneNode(true);
             this.ghostElement.classList.add('ghost');
-            const computedStyle = getComputedStyle(this.downEle);
-            this.ghostElement.style.width =
-                this.downEle.clientWidth -
-                    parseFloat(computedStyle.paddingLeft) -
-                    parseFloat(computedStyle.paddingRight) +
-                    'px';
-            const container = this.shadowRoot.querySelector('.container');
-            container.appendChild(this.ghostElement);
-            this.downEle = null;
+            // dim the original element while dragging
+            this.downEle.style.pointerEvents = 'none';
+            this.downEle.style.opacity = '0.5';
+            const rect = this.downEle.getBoundingClientRect();
+            this.ghostElement.style.transition = 'transform 300ms linear';
+            this.ghostElement.style.width = rect.width + 'px';
+            this.ghostElement.style.height = rect.height + 'px';
+            this.ghostElement.style.position = 'fixed';
+            this.ghostElement.style.left = event.clientX - this.xOffset + 'px';
+            this.ghostElement.style.top = event.clientY - this.yOffset + 'px';
+            this.ghostElement.style.pointerEvents = 'none';
+            this.ghostElement.style.border =
+                '1px solid var(--color-primary, #1c7cd6)';
+            this.ghostElement.style.zIndex = '99999';
+            this.ghostElement.style.background = '#fff';
+            this.ghostElement.style.opacity = '0.7';
+            this.ghostElement.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.2)';
+            this.ghostElement.style.borderRadius = 'var(--curvature)';
+            // allow component to customize the ghost node
+            if (this.prepareGhost) {
+                this.prepareGhost(this.ghostElement);
+            }
+            document.body.appendChild(this.ghostElement);
+            // this.downEle = null;
+            // Add global click blocker when drag starts
+            if (!this.clickBlocker) {
+                this.clickBlocker = (e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                };
+                // Use capture phase to intercept clicks before they reach any elements
+                document.addEventListener('click', this.clickBlocker, true);
+            }
         }
         if (this.ghostElement) {
             this.ghostElement.style.left = event.clientX - this.xOffset + 'px';
-            this.ghostElement.style.top =
-                event.clientY - this.yOffset - scrollTop + 'px';
-            const other = this.getOverlappingElement(event.clientY);
-            if (other) {
-                const otherIdx = this.getRowIndex(other.id);
-                const dragId = this.ghostElement.id;
-                const otherId = other.id;
-                this.fireCustomEvent(CustomEventType.OrderChanged, {
-                    from: dragId,
-                    to: otherId,
-                    fromIdx: this.draggingIdx,
-                    toIdx: otherIdx
-                });
-                // TODO: Dont do swapping, just send the full order?
-                this.draggingIdx = otherIdx;
-                this.draggingId = otherId;
+            this.ghostElement.style.top = event.clientY - this.yOffset + 'px';
+            const targetInfo = this.getDropTargetInfo(event.clientX, event.clientY);
+            if (targetInfo) {
+                const { element: targetElement, insertAfter } = targetInfo;
+                const targetIdx = this.getRowIndex(targetElement.id);
+                const originalDragIdx = this.getRowIndex(this.draggingEle.id);
+                // Calculate the intended drop index
+                let dropIdx = targetIdx;
+                if (insertAfter) {
+                    dropIdx += 1;
+                }
+                // Adjust dropIdx if dragging forward in the list
+                if (originalDragIdx < dropIdx) {
+                    dropIdx -= 1;
+                }
+                // Store pending drop info but don't fire event yet
+                this.dropTargetId = targetElement.id;
+                this.pendingDropIndex = dropIdx;
+                this.pendingTargetElement = targetElement;
+                // Show drop indicator
+                this.showDropIndicator(targetElement, insertAfter);
+            }
+            else {
+                this.hideDropIndicator();
+                this.dropTargetId = null;
+                this.pendingDropIndex = -1;
+                this.pendingTargetElement = null;
             }
         }
     }
-    handleMouseUp() {
-        if (this.draggingId) {
+    handleMouseUp(evt) {
+        if (this.draggingId && this.ghostElement) {
+            evt.preventDefault();
+            evt.stopPropagation();
+            // restore visibility of the dragged item
+            if (this.downEle) {
+                this.downEle.style.pointerEvents = '';
+                this.downEle.style.opacity = '1';
+            }
+            // fire the order changed event only when dropped if we have a valid drop position
+            if (this.pendingDropIndex >= 0 && this.pendingTargetElement) {
+                const originalDragIdx = this.getRowIndex(this.draggingEle.id);
+                // use swap-based logic - report which indexes need to be swapped
+                const fromIdx = originalDragIdx;
+                const toIdx = this.pendingDropIndex;
+                // only fire if the position actually changed
+                if (fromIdx !== toIdx) {
+                    this.fireCustomEvent(CustomEventType.OrderChanged, {
+                        swap: [fromIdx, toIdx]
+                    });
+                }
+            }
             this.fireCustomEvent(CustomEventType.DragStop, {
                 id: this.draggingId
             });
             this.draggingId = null;
+            this.dropTargetId = null;
             this.downEle = null;
+            this.pendingDropIndex = -1;
+            this.pendingTargetElement = null;
             if (this.ghostElement) {
-                this.ghostElement.remove();
+                // Remove from body if present
+                if (this.ghostElement.parentNode) {
+                    this.ghostElement.parentNode.removeChild(this.ghostElement);
+                }
                 this.ghostElement = null;
             }
+            this.hideDropIndicator();
+            // Keep the click blocker active for a short time after drop
+            if (this.clickBlocker) {
+                // We'll clean it up after a timeout
+                setTimeout(() => {
+                    if (this.clickBlocker) {
+                        document.removeEventListener('click', this.clickBlocker, true);
+                        this.clickBlocker = null;
+                    }
+                }, 100);
+            }
         }
         document.removeEventListener('mousemove', this.handleMouseMove);
         document.removeEventListener('mouseup', this.handleMouseUp);
@@ -181,7 +369,7 @@ export class SortableList extends RapidElement {
     }
     render() {
         return html `
-      <div class="container">
+      <div class="container ${this.horizontal ? 'horizontal' : ''}">
         <slot @mousedown=${this.handleMouseDown}></slot>
       </div>
     `;
@@ -190,4 +378,13 @@ export class SortableList extends RapidElement {
 __decorate([
     property({ type: String })
 ], SortableList.prototype, "draggingId", void 0);
+__decorate([
+    property({ type: Boolean })
+], SortableList.prototype, "horizontal", void 0);
+__decorate([
+    property({ type: String })
+], SortableList.prototype, "dropTargetId", void 0);
+__decorate([
+    property({ attribute: false })
+], SortableList.prototype, "prepareGhost", void 0);
 //# sourceMappingURL=SortableList.js.map