@nyaruka/temba-components 0.123.0 → 0.124.1

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

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

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

package/out-tsc/src/omnibox/Omnibox.js

@@ -72,7 +72,7 @@ export class Omnibox extends Select {
     renderSelectedItemDefault(option) {
         return html `
       <div
-        style="flex:1 1 auto; display: flex; align-items: stretch; color: var(--color-text-dark); font-size: 12px;"
+        style="flex:1 1 auto; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; display: flex; align-items: stretch; color: var(--color-text-dark); font-size: 12px;"
       >
         <div style="align-self: center; padding: 0px 7px; color: #bbb">
           ${this.getIcon(option)}

package/out-tsc/src/omnibox/Omnibox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Omnibox.js","sourceRoot":"","sources":["../../../src/omnibox/Omnibox.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { Select, SelectOption } from '../select/Select';\nimport { Icon } from '../vectoricon';\n\nenum OmniType {\n  Group = 'group',\n  Contact = 'contact'\n}\n\nexport interface OmniOption extends SelectOption {\n  id: string;\n  name: string;\n  type: OmniType;\n  urn?: string;\n  count?: number;\n  contact?: string;\n  scheme?: string;\n}\n\nconst postNameStyle = {\n  color: 'var(--color-text-dark)',\n  padding: '0px 6px',\n  fontSize: '12px'\n};\n\nexport class Omnibox extends Select<OmniOption> {\n  @property({ type: String })\n  valueKey = 'uuid';\n\n  @property({ type: Boolean })\n  groups = false;\n\n  @property({ type: Boolean })\n  contacts = false;\n\n  @property({ type: String })\n  placeholder = 'Select recipients';\n\n  @property({ type: Boolean })\n  multi = true;\n\n  @property({ type: Boolean })\n  searchable = true;\n\n  @property({ type: Boolean })\n  searchOnFocus = true;\n\n  @property({ type: Boolean })\n  queryParam = 'search';\n\n  public update(changes: PropertyValues): void {\n    super.update(changes);\n\n    if (\n      (changes.has('groups') || changes.has('contacts')) &&\n      (this.groups || this.contacts)\n    ) {\n      let types = '&types=';\n      if (this.groups) {\n        types += 'g';\n      }\n\n      if (this.contacts) {\n        types += 'c';\n      }\n\n      this.endpoint = this.endpoint + types;\n    }\n  }\n\n  /** An option in the drop down */\n  public renderOptionDefault(option: OmniOption): TemplateResult {\n    return html`\n      <div style=\"display:flex;\">\n        <div style=\"margin-right: 8px\">${this.getIcon(option)}</div>\n        <div style=\"flex: 1\">${option.name}</div>\n        <div\n          style=\"background: rgba(50, 50, 50, 0.15); margin-left: 5px; display: flex; align-items: center; border-radius: 4px\"\n        >\n          ${this.getPostName(option)}\n        </div>\n      </div>\n    `;\n  }\n\n  private getPostName(option: OmniOption): TemplateResult {\n    const style = { ...postNameStyle };\n\n    if (option.urn && option.type === OmniType.Contact) {\n      if (option.urn !== option.name) {\n        return html`<div style=${styleMap(style)}>${option.urn}</div>`;\n      }\n    }\n\n    if (option.type === OmniType.Group) {\n      return html`\n        <div style=${styleMap(style)}>${option.count.toLocaleString()}</div>\n      `;\n    }\n\n    return null;\n  }\n\n  /** Selection in the multi-select select box */\n  public renderSelectedItemDefault(option: OmniOption): TemplateResult {\n    return html`\n      <div\n        style=\"flex:1 1 auto; display: flex; align-items: stretch; color: var(--color-text-dark); font-size: 12px;\"\n      >\n        <div style=\"align-self: center; padding: 0px 7px; color: #bbb\">\n          ${this.getIcon(option)}\n        </div>\n        <div\n          class=\"name\"\n          style=\"align-self: center; padding: 0px; font-size: 12px;\"\n        >\n          ${option.name}\n        </div>\n        <div\n          style=\"background: rgba(100, 100, 100, 0.05); border-left: 1px solid rgba(100, 100, 100, 0.1); margin-left: 12px; display: flex; align-items: center\"\n        >\n          ${this.getPostName(option)}\n        </div>\n      </div>\n    `;\n  }\n\n  private getIcon(option: OmniOption): TemplateResult {\n    if (option.type === OmniType.Group) {\n      return html`<temba-icon name=\"${Icon.group}\"></temba-icon>`;\n    }\n\n    if (option.type === OmniType.Contact) {\n      return html`<temba-icon name=\"${Icon.contact}\"></temba-icon>`;\n    }\n  }\n}\n"]}
+{"version":3,"file":"Omnibox.js","sourceRoot":"","sources":["../../../src/omnibox/Omnibox.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { Select, SelectOption } from '../select/Select';\nimport { Icon } from '../vectoricon';\n\nenum OmniType {\n  Group = 'group',\n  Contact = 'contact'\n}\n\nexport interface OmniOption extends SelectOption {\n  id: string;\n  name: string;\n  type: OmniType;\n  urn?: string;\n  count?: number;\n  contact?: string;\n  scheme?: string;\n}\n\nconst postNameStyle = {\n  color: 'var(--color-text-dark)',\n  padding: '0px 6px',\n  fontSize: '12px'\n};\n\nexport class Omnibox extends Select<OmniOption> {\n  @property({ type: String })\n  valueKey = 'uuid';\n\n  @property({ type: Boolean })\n  groups = false;\n\n  @property({ type: Boolean })\n  contacts = false;\n\n  @property({ type: String })\n  placeholder = 'Select recipients';\n\n  @property({ type: Boolean })\n  multi = true;\n\n  @property({ type: Boolean })\n  searchable = true;\n\n  @property({ type: Boolean })\n  searchOnFocus = true;\n\n  @property({ type: Boolean })\n  queryParam = 'search';\n\n  public update(changes: PropertyValues): void {\n    super.update(changes);\n\n    if (\n      (changes.has('groups') || changes.has('contacts')) &&\n      (this.groups || this.contacts)\n    ) {\n      let types = '&types=';\n      if (this.groups) {\n        types += 'g';\n      }\n\n      if (this.contacts) {\n        types += 'c';\n      }\n\n      this.endpoint = this.endpoint + types;\n    }\n  }\n\n  /** An option in the drop down */\n  public renderOptionDefault(option: OmniOption): TemplateResult {\n    return html`\n      <div style=\"display:flex;\">\n        <div style=\"margin-right: 8px\">${this.getIcon(option)}</div>\n        <div style=\"flex: 1\">${option.name}</div>\n        <div\n          style=\"background: rgba(50, 50, 50, 0.15); margin-left: 5px; display: flex; align-items: center; border-radius: 4px\"\n        >\n          ${this.getPostName(option)}\n        </div>\n      </div>\n    `;\n  }\n\n  private getPostName(option: OmniOption): TemplateResult {\n    const style = { ...postNameStyle };\n\n    if (option.urn && option.type === OmniType.Contact) {\n      if (option.urn !== option.name) {\n        return html`<div style=${styleMap(style)}>${option.urn}</div>`;\n      }\n    }\n\n    if (option.type === OmniType.Group) {\n      return html`\n        <div style=${styleMap(style)}>${option.count.toLocaleString()}</div>\n      `;\n    }\n\n    return null;\n  }\n\n  /** Selection in the multi-select select box */\n  public renderSelectedItemDefault(option: OmniOption): TemplateResult {\n    return html`\n      <div\n        style=\"flex:1 1 auto; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; display: flex; align-items: stretch; color: var(--color-text-dark); font-size: 12px;\"\n      >\n        <div style=\"align-self: center; padding: 0px 7px; color: #bbb\">\n          ${this.getIcon(option)}\n        </div>\n        <div\n          class=\"name\"\n          style=\"align-self: center; padding: 0px; font-size: 12px;\"\n        >\n          ${option.name}\n        </div>\n        <div\n          style=\"background: rgba(100, 100, 100, 0.05); border-left: 1px solid rgba(100, 100, 100, 0.1); margin-left: 12px; display: flex; align-items: center\"\n        >\n          ${this.getPostName(option)}\n        </div>\n      </div>\n    `;\n  }\n\n  private getIcon(option: OmniOption): TemplateResult {\n    if (option.type === OmniType.Group) {\n      return html`<temba-icon name=\"${Icon.group}\"></temba-icon>`;\n    }\n\n    if (option.type === OmniType.Contact) {\n      return html`<temba-icon name=\"${Icon.contact}\"></temba-icon>`;\n    }\n  }\n}\n"]}