@nyaruka/temba-components 0.113.0 → 0.114.0

package/out-tsc/src/options/Options.js

@@ -4,7 +4,7 @@ import { property } from 'lit/decorators.js';
 import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 import { styleMap } from 'lit-html/directives/style-map.js';
-import { getClasses, getScrollParent, isElementVisible, throttle } from '../utils';
+import { getClasses, getScrollParent, throttle } from '../utils';
 export class Options extends RapidElement {
     constructor() {
         super(...arguments);
@@ -35,6 +35,10 @@ export class Options extends RapidElement {
     }
     static get styles() {
         return css `
+      :host {
+        --transition-speed: 0;
+      }
+
       .options-container {
         background: var(--color-options-bg);
         user-select: none;
@@ -43,7 +47,7 @@ export class Options extends RapidElement {
         margin-top: var(--options-margin-top);
         display: flex;
         flex-direction: column;
-        transform: scaleY(0.5) translateY(-5em);
+        // transform: scaleY(0.5) translateY(-5em);
         transition: transform var(--transition-speed)
             cubic-bezier(0.71, 0.18, 0.61, 1.33),
           opacity var(--transition-speed) cubic-bezier(0.71, 0.18, 0.61, 1.33);
@@ -115,12 +119,12 @@ export class Options extends RapidElement {
       .options {
         border-radius: var(--curvature-widget);
         overflow-y: auto;
-        max-height: 225px;
+        max-height: 200px;
         border: none;
       }
 
       .show {
-        transform: scaleY(1) translateY(0);
+        // transform: scaleY(1) translateY(0);
         border: 1px solid var(--color-widget-border);
         opacity: 1;
         z-index: 1;
@@ -202,14 +206,14 @@ export class Options extends RapidElement {
       }
     `;
     }
-    firstUpdated() {
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
         if (!this.block) {
             this.scrollParent = getScrollParent(this);
             this.calculatePosition = this.calculatePosition.bind(this);
             if (this.scrollParent) {
                 this.scrollParent.addEventListener('scroll', this.calculatePosition);
             }
-            this.calculatePosition();
         }
         this.resolvedRenderOption = (this.renderOption || this.renderOptionDefault).bind(this);
     }
@@ -219,14 +223,33 @@ export class Options extends RapidElement {
                 this.scrollParent.removeEventListener('scroll', this.calculatePosition);
             }
         }
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
     }
     isFocused() {
+        // TODO: this really doesn't seem right
         const focused = this.closestElement(document.activeElement.tagName) ===
             document.activeElement;
         return focused;
     }
     updated(changed) {
         super.updated(changed);
+        if (changed.has('anchorTo') && this.anchorTo) {
+            const optionsContainer = this.shadowRoot.querySelector('.options-container');
+            if (!this.resizeObserver) {
+                this.resizeObserver = new ResizeObserver((entries) => {
+                    window.requestAnimationFrame(() => {
+                        if (!Array.isArray(entries) || !entries.length) {
+                            return;
+                        }
+                        this.calculatePosition();
+                        this.adjustWidth();
+                    });
+                });
+                this.resizeObserver.observe(optionsContainer);
+            }
+        }
         // if our cursor changed, lets make sure our scrollbox is showing it
         if (!this.internalFocusDisabled && changed.has('cursorIndex')) {
             this.fireCustomEvent(CustomEventType.CursorChanged, {
@@ -238,10 +261,11 @@ export class Options extends RapidElement {
                 this.tempOptions = changed.get('options');
                 window.setTimeout(() => {
                     this.tempOptions = [];
-                }, 300);
+                }, 0);
             }
         }
         if (changed.has('options')) {
+            this.adjustWidth();
             this.calculatePosition();
             // allow scrolls to trigger again
             this.triggerScroll = true;
@@ -274,11 +298,6 @@ export class Options extends RapidElement {
                 }
             }
         }
-        if (changed.has('visible')) {
-            window.setTimeout(() => {
-                this.calculatePosition();
-            }, 100);
-        }
     }
     renderOptionDefault(option, selected) {
         const renderOptionName = (this.renderOptionName || this.renderOptionNameDefault).bind(this);
@@ -396,35 +415,30 @@ export class Options extends RapidElement {
             }
         }
     }
+    adjustWidth() {
+        if (this.anchorTo) {
+            const anchorBounds = this.anchorTo.getBoundingClientRect();
+            this.width =
+                this.staticWidth > 0
+                    ? this.staticWidth
+                    : anchorBounds.width - 2 - this.marginHorizontal * 2;
+        }
+    }
     calculatePosition() {
         if (this.visible && !this.block) {
             const optionsBounds = this.shadowRoot
                 .querySelector('.options-container')
                 .getBoundingClientRect();
             if (this.anchorTo) {
+                this.top = 0;
                 const anchorBounds = this.anchorTo.getBoundingClientRect();
-                const topTop = anchorBounds.top - optionsBounds.height;
-                if (this.anchorTo && this.scrollParent) {
-                    if (!isElementVisible(this.anchorTo, this.scrollParent)) {
-                        // this.fireCustomEvent(CustomEventType.Canceled);
-                    }
-                }
-                if (topTop > 0 &&
-                    anchorBounds.bottom + optionsBounds.height > window.innerHeight) {
-                    this.top = topTop; //  + window.pageYOffset;
-                    this.poppedTop = true;
-                }
-                else {
-                    this.top = anchorBounds.bottom; //  + window.pageYOffset;
-                    this.poppedTop = false;
+                if (anchorBounds.bottom + optionsBounds.height > window.innerHeight) {
+                    this.top = -(optionsBounds.height + anchorBounds.height + 20);
                 }
                 this.left = anchorBounds.left;
-                this.width =
-                    this.staticWidth > 0
-                        ? this.staticWidth
-                        : anchorBounds.width - 2 - this.marginHorizontal * 2;
-                if (this.anchorRight) {
-                    this.left = anchorBounds.right - this.width;
+                // adjust for parent scrolling
+                if (this.scrollParent) {
+                    this.top += -this.scrollParent.scrollTop;
                 }
             }
         }
@@ -451,14 +465,7 @@ export class Options extends RapidElement {
             }
         }
     }
-    // we need to swallow mouse down so we don't grab focus
-    handleMouseDown(evt) {
-        evt.preventDefault();
-        evt.stopPropagation();
-    }
     handleOptionClick(evt) {
-        evt.preventDefault();
-        evt.stopPropagation();
         const index = evt.currentTarget.getAttribute('data-option-index');
         if (index) {
             const newIndex = parseInt(index);
@@ -479,7 +486,7 @@ export class Options extends RapidElement {
             'margin-top': `${vertical}px`
         };
         if (this.top) {
-            containerStyle['top'] = `${this.top}px`;
+            containerStyle[`transform`] = `translateY(${this.top}px)`;
         }
         if (this.left) {
             containerStyle['left'] = `${this.left}px`;
@@ -508,18 +515,13 @@ export class Options extends RapidElement {
         }
         return html `
       <div class=${classes} style=${styleMap(containerStyle)}>
-        <div
-          class="options-scroll"
-          @scroll=${this.handleInnerScroll}
-          @mousedown=${this.handleMouseDown}
-        >
+        <div class="options-scroll" @scroll=${this.handleInnerScroll}>
           <div class="${classesInner}" style=${styleMap(optionsStyle)}>
             ${options.map((option, index) => {
             return html `<div
                 data-option-index="${index}"
                 @mousemove=${this.handleMouseMove}
-                @click=${this.handleOptionClick}
-                @mousedown=${this.handleMouseDown}
+                @mousedown=${this.handleOptionClick}
                 class="option ${index === this.cursorIndex &&
                 !this.internalFocusDisabled
                 ? 'focused'

package/out-tsc/src/options/Options.js.map

@@ -1 +1 @@
-{"version":3,"file":"Options.js","sourceRoot":"","sources":["../../../src/options/Options.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement, EventHandler } from '../RapidElement';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport {\n  getClasses,\n  getScrollParent,\n  isElementVisible,\n  throttle\n} from '../utils';\n\nexport class Options extends RapidElement {\n  static get styles() {\n    return css`\n      .options-container {\n        background: var(--color-options-bg);\n        user-select: none;\n        border-radius: var(--curvature-widget);\n        overflow: hidden;\n        margin-top: var(--options-margin-top);\n        display: flex;\n        flex-direction: column;\n        transform: scaleY(0.5) translateY(-5em);\n        transition: transform var(--transition-speed)\n            cubic-bezier(0.71, 0.18, 0.61, 1.33),\n          opacity var(--transition-speed) cubic-bezier(0.71, 0.18, 0.61, 1.33);\n        opacity: 0;\n        border: 1px transparent;\n        z-index: 1000;\n      }\n\n      .shadow {\n        box-shadow: var(--options-shadow);\n      }\n\n      .anchored {\n        position: fixed;\n      }\n\n      :host([block]) .options-container {\n        flex-grow: 1;\n        height: 100%;\n        border: none;\n      }\n\n      :host([block]) .options-scroll {\n        height: 100%;\n        visibility: visible;\n        overflow-y: auto;\n        flex-grow: 1;\n        -webkit-mask-image: -webkit-radial-gradient(white, black);\n      }\n\n      :host([block]) {\n        border-radius: var(--curvature);\n        display: block;\n        height: 100%;\n      }\n\n      :host([block]) .shadow {\n        box-shadow: var(--options-block-shadow);\n      }\n\n      .bordered {\n        border: 1px solid var(--color-widget-border) !important;\n      }\n\n      :host([block]) .options {\n        margin-bottom: 1.5em;\n      }\n\n      .options-scroll {\n        display: flex;\n        flex-direction: column;\n      }\n\n      :host([collapsed]) temba-icon {\n        flex-grow: 1;\n        margin-right: 0px !important;\n        padding-top: 0.25em;\n        padding-bottom: 0.25em;\n      }\n\n      :host([collapsed]) .name {\n        display: none;\n      }\n\n      :host([collapsed]) .count {\n        display: none;\n      }\n\n      .options {\n        border-radius: var(--curvature-widget);\n        overflow-y: auto;\n        max-height: 225px;\n        border: none;\n      }\n\n      .show {\n        transform: scaleY(1) translateY(0);\n        border: 1px solid var(--color-widget-border);\n        opacity: 1;\n        z-index: 1;\n      }\n\n      .option {\n        font-size: var(--temba-options-font-size);\n        padding: 5px 10px;\n        border-radius: 4px;\n        margin: 0.3em;\n        cursor: pointer;\n        color: var(--color-text-dark);\n        scroll-margin: 5px 0px;\n        text-align: left;\n      }\n\n      .option * {\n        user-select: none;\n        -webkit-user-select: none;\n        -ms-user-select: none;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        -ms-word-break: break-all;\n        word-break: break-word;\n        -ms-hyphens: auto;\n        -moz-hyphens: auto;\n        -webkit-hyphens: auto;\n        hyphens: auto;\n      }\n\n      .option .detail {\n        font-size: 85%;\n        color: rgba(0, 0, 0, 0.4);\n      }\n\n      code {\n        background: rgba(0, 0, 0, 0.05);\n        padding: 1px 5px;\n        border-radius: var(--curvature-widget);\n      }\n\n      :host([block]) {\n        position: relative;\n      }\n\n      :host([block]) .options {\n        overflow-y: initial;\n      }\n\n      temba-loading {\n        align-self: center;\n        margin-top: 0.025em;\n      }\n\n      .loader-bar {\n        pointer-events: none;\n        align-items: center;\n        background: #eee;\n        max-height: 0;\n        transition: max-height var(--transition-speed) ease-in-out;\n        border-bottom-left-radius: var(--curvature-widget);\n        border-bottom-right-radius: var(--curvature-widget);\n        display: flex;\n        overflow: hidden;\n      }\n\n      .loading .loader-bar {\n        max-height: 1.1em;\n      }\n\n      .option:hover {\n        background: var(--option-hover-bg);\n        color: var(--option-hover-text);\n      }\n\n      .option.focused {\n        background: var(--color-selection);\n        color: var(--color-text-dark);\n      }\n    `;\n  }\n\n  @property({ type: Number })\n  top: number;\n\n  @property({ type: Number })\n  left: number;\n\n  @property({ type: Number })\n  width: number;\n\n  @property({ type: Number, attribute: 'static-width' })\n  staticWidth: number;\n\n  @property({ type: Boolean, attribute: 'anchor-right' })\n  anchorRight: boolean;\n\n  @property({ type: Number })\n  marginHorizontal = 0;\n\n  @property({ type: Number })\n  marginVertical = 7;\n\n  @property({ type: Object })\n  anchorTo: HTMLElement;\n\n  @property({ type: Boolean })\n  visible: boolean;\n\n  @property({ type: Boolean })\n  block: boolean;\n\n  // if we allow the focus to follow the cursor\n  @property({ type: Boolean })\n  cursorHover: boolean;\n\n  // fire selection events when cursor changes\n  @property({ type: Boolean })\n  cursorSelection: boolean;\n\n  @property({ type: Number })\n  scrollPct = 75;\n\n  @property({ type: Number })\n  cursorIndex = -1;\n\n  @property({ type: Boolean })\n  internalFocusDisabled = false;\n\n  @property({ type: Array })\n  options: any[];\n\n  @property({ type: Array })\n  tempOptions: any[];\n\n  @property({ type: Boolean })\n  poppedTop: boolean;\n\n  @property({ type: Boolean })\n  spaceSelect: boolean;\n\n  @property({ type: String })\n  nameKey = 'name';\n\n  @property({ type: Boolean })\n  loading = false;\n\n  @property({ type: Boolean })\n  collapsed: boolean;\n\n  @property({ type: Boolean })\n  hideShadow = false;\n\n  @property({ attribute: false })\n  getName: { (option: any): string } = function (option: any) {\n    return option[this.nameKey || 'name'];\n  };\n\n  @property({ attribute: false })\n  renderInputOption: { (): TemplateResult } = function () {\n    return null;\n  };\n\n  @property({ attribute: false })\n  renderOption: { (option: any, selected: boolean): TemplateResult };\n\n  @property({ attribute: false })\n  renderOptionName: { (option: any, selected: boolean): TemplateResult };\n\n  @property({ attribute: false })\n  renderOptionDetail: { (option: any, selected: boolean): TemplateResult };\n\n  @property({ type: Number })\n  scrollHeight = 0;\n\n  @property({ type: Boolean })\n  triggerScroll = false;\n\n  scrollParent: HTMLElement = null;\n\n  resolvedRenderOption: { (option: any, selected: boolean): TemplateResult };\n\n  public firstUpdated() {\n    if (!this.block) {\n      this.scrollParent = getScrollParent(this);\n      this.calculatePosition = this.calculatePosition.bind(this);\n      if (this.scrollParent) {\n        this.scrollParent.addEventListener('scroll', this.calculatePosition);\n      }\n      this.calculatePosition();\n    }\n\n    this.resolvedRenderOption = (\n      this.renderOption || this.renderOptionDefault\n    ).bind(this);\n  }\n\n  public disconnectedCallback() {\n    if (!this.block) {\n      if (this.scrollParent) {\n        this.scrollParent.removeEventListener('scroll', this.calculatePosition);\n      }\n    }\n  }\n\n  private isFocused() {\n    const focused =\n      this.closestElement(document.activeElement.tagName) ===\n      document.activeElement;\n\n    return focused;\n  }\n\n  public updated(changed: Map<string, any>) {\n    super.updated(changed);\n\n    // if our cursor changed, lets make sure our scrollbox is showing it\n    if (!this.internalFocusDisabled && changed.has('cursorIndex')) {\n      this.fireCustomEvent(CustomEventType.CursorChanged, {\n        index: this.cursorIndex\n      });\n    }\n\n    if (changed.has('visible') && changed.has('options')) {\n      if (!this.visible && this.options.length == 0) {\n        this.tempOptions = changed.get('options');\n        window.setTimeout(() => {\n          this.tempOptions = [];\n        }, 300);\n      }\n    }\n\n    if (changed.has('options')) {\n      this.calculatePosition();\n\n      // allow scrolls to trigger again\n      this.triggerScroll = true;\n\n      const prevOptions = changed.get('options');\n      const previousCount = prevOptions ? prevOptions.length : 0;\n      const newCount = this.options ? this.options.length : 0;\n\n      if (\n        this.cursorIndex === -1 ||\n        newCount < previousCount ||\n        (previousCount === 0 && newCount > 0 && !changed.has('cursorIndex'))\n      ) {\n        if (!this.internalFocusDisabled) {\n          if (!this.block || this.cursorIndex === -1) {\n            this.cursorIndex = 0;\n          } else {\n            if (this.cursorIndex >= newCount) {\n              this.cursorIndex = newCount - 1;\n            }\n          }\n\n          if (this.cursorSelection) {\n            this.handleSelection(false);\n          }\n        }\n      }\n\n      // if on initial load we don't have enough options to load, trigger a scroll\n      // threshold event in case the page size is smaller than our control height\n      const scrollBox = this.shadowRoot.querySelector('.options');\n      if (scrollBox) {\n        if (scrollBox.scrollHeight == scrollBox.clientHeight) {\n          this.fireCustomEvent(CustomEventType.ScrollThreshold);\n        }\n      }\n    }\n\n    if (changed.has('visible')) {\n      window.setTimeout(() => {\n        this.calculatePosition();\n      }, 100);\n    }\n  }\n\n  private renderOptionDefault(option: any, selected: boolean): TemplateResult {\n    const renderOptionName = (\n      this.renderOptionName || this.renderOptionNameDefault\n    ).bind(this);\n    const renderOptionDetail = (\n      this.renderOptionDetail || this.renderOptionDetailDefault\n    ).bind(this);\n\n    if (selected) {\n      return html`\n        <div class=\"name\">${renderOptionName(option, selected)}</div>\n        <div class=\"detail\">${renderOptionDetail(option, selected)}</div>\n      `;\n    } else {\n      return html`\n        <div class=\"name\">${renderOptionName(option, selected)}</div>\n      `;\n    }\n  }\n\n  private renderOptionNameDefault(option: any): TemplateResult {\n    return html`<div style=\"display:flex; align-items:flex-start\">\n      ${option.icon\n        ? html`<temba-icon\n            name=\"${option.icon}\"\n            style=\"margin-right:0.5em; fill: var(--color-text-dark);\"\n          ></temba-icon>`\n        : null}\n      <div style=\"flex-grow:1\">${option.prefix}${this.getName(option)}</div>\n    </div>`;\n  }\n\n  private renderOptionDetailDefault(option: any): TemplateResult {\n    return html` ${option.detail} `;\n  }\n\n  public getSelection() {\n    return this.options[this.cursorIndex];\n  }\n\n  private handleSelection(tabbed = false, index = -1) {\n    if (!this.internalFocusDisabled) {\n      if (index === -1) {\n        index = this.cursorIndex;\n      }\n    }\n\n    const selected = this.options[index];\n    this.fireCustomEvent(CustomEventType.Selection, {\n      selected,\n      tabbed,\n      index\n    });\n  }\n\n  private moveCursor(direction: number): void {\n    if (!this.internalFocusDisabled) {\n      const newIndex = Math.max(\n        Math.min(this.cursorIndex + direction, this.options.length - 1),\n        0\n      );\n      this.setCursor(newIndex);\n    }\n  }\n\n  private setCursor: (index: number) => void = throttle(function (\n    index: number\n  ) {\n    if (!this.internalFocusDisabled) {\n      if (index !== this.cursorIndex) {\n        this.cursorIndex = index;\n      }\n    }\n  },\n  50);\n\n  public scrollToTop() {\n    const scrollBox = this.shadowRoot.querySelector('.options-scroll');\n    scrollBox.scrollTop = 0;\n  }\n\n  private ensureOptionVisible() {\n    const focusedOption = this.shadowRoot.querySelector(\n      `div[data-option-index=\"${this.cursorIndex}\"]`\n    ) as HTMLDivElement;\n    if (focusedOption) {\n      focusedOption.scrollIntoView({\n        block: 'nearest',\n        inline: 'start'\n      });\n    }\n  }\n  private handleKeyDown(evt: KeyboardEvent) {\n    if (this.internalFocusDisabled || (this.block && !this.isFocused())) {\n      return;\n    }\n\n    if (this.offsetParent === null) {\n      return;\n    }\n\n    if (this.options && this.options.length > 0) {\n      if ((evt.ctrlKey && evt.key === 'n') || evt.key === 'ArrowDown') {\n        this.moveCursor(1);\n        evt.preventDefault();\n        evt.stopPropagation();\n        if (this.cursorSelection) {\n          this.handleSelection(false);\n        }\n        this.ensureOptionVisible();\n      } else if ((evt.ctrlKey && evt.key === 'p') || evt.key === 'ArrowUp') {\n        this.moveCursor(-1);\n        evt.preventDefault();\n        if (this.cursorSelection) {\n          this.handleSelection(false);\n        }\n        this.ensureOptionVisible();\n      } else if (\n        evt.key === 'Enter' ||\n        evt.key === 'Tab' ||\n        (this.spaceSelect && evt.key === ' ')\n      ) {\n        evt.preventDefault();\n        evt.stopPropagation();\n        this.handleSelection(evt.key === 'Tab');\n      } else if (evt.key === 'Escape') {\n        this.fireCustomEvent(CustomEventType.Canceled);\n      }\n    }\n  }\n\n  private handleInnerScroll(evt: Event) {\n    const scrollbox = evt.target as HTMLDivElement;\n\n    // scroll height has changed, enable scroll trigger\n    if (scrollbox.scrollHeight > this.scrollHeight) {\n      this.scrollHeight = scrollbox.scrollHeight;\n      this.triggerScroll = true;\n    }\n\n    if (this.triggerScroll) {\n      const scrollPct =\n        scrollbox.scrollTop / (scrollbox.scrollHeight - scrollbox.clientHeight);\n      if (scrollPct * 100 > this.scrollPct) {\n        this.fireCustomEvent(CustomEventType.ScrollThreshold);\n        this.triggerScroll = false;\n      }\n    }\n  }\n\n  private calculatePosition() {\n    if (this.visible && !this.block) {\n      const optionsBounds = this.shadowRoot\n        .querySelector('.options-container')\n        .getBoundingClientRect();\n\n      if (this.anchorTo) {\n        const anchorBounds = this.anchorTo.getBoundingClientRect();\n        const topTop = anchorBounds.top - optionsBounds.height;\n\n        if (this.anchorTo && this.scrollParent) {\n          if (!isElementVisible(this.anchorTo, this.scrollParent)) {\n            // this.fireCustomEvent(CustomEventType.Canceled);\n          }\n        }\n\n        if (\n          topTop > 0 &&\n          anchorBounds.bottom + optionsBounds.height > window.innerHeight\n        ) {\n          this.top = topTop; //  + window.pageYOffset;\n          this.poppedTop = true;\n        } else {\n          this.top = anchorBounds.bottom; //  + window.pageYOffset;\n          this.poppedTop = false;\n        }\n\n        this.left = anchorBounds.left;\n        this.width =\n          this.staticWidth > 0\n            ? this.staticWidth\n            : anchorBounds.width - 2 - this.marginHorizontal * 2;\n\n        if (this.anchorRight) {\n          this.left = anchorBounds.right - this.width;\n        }\n      }\n    }\n  }\n\n  public getEventHandlers(): EventHandler[] {\n    return [\n      {\n        event: 'keydown',\n        method: this.handleKeyDown,\n        isDocument: true\n      },\n      {\n        event: 'scroll',\n        method: this.calculatePosition,\n        isDocument: true\n      }\n    ];\n  }\n\n  private handleMouseMove(evt: MouseEvent) {\n    if (!this.block || this.cursorHover) {\n      if (Math.abs(evt.movementX) + Math.abs(evt.movementY) > 0) {\n        const index = (evt.currentTarget as HTMLElement).getAttribute(\n          'data-option-index'\n        );\n        this.setCursor(parseInt(index));\n      }\n    }\n  }\n\n  // we need to swallow mouse down so we don't grab focus\n  private handleMouseDown(evt: MouseEvent) {\n    evt.preventDefault();\n    evt.stopPropagation();\n  }\n\n  private handleOptionClick(evt: MouseEvent) {\n    evt.preventDefault();\n    evt.stopPropagation();\n\n    const index = (evt.currentTarget as HTMLElement).getAttribute(\n      'data-option-index'\n    );\n\n    if (index) {\n      const newIndex = parseInt(index);\n      this.setCursor(newIndex);\n      this.handleSelection(false, newIndex);\n    }\n  }\n\n  public render(): TemplateResult {\n    if (!this.resolvedRenderOption) {\n      return null;\n    }\n\n    let vertical = this.block ? 0 : this.marginVertical;\n    if (this.poppedTop) {\n      vertical *= -1;\n    }\n\n    const containerStyle = {\n      'margin-left': `${this.marginHorizontal}px`,\n      'margin-top': `${vertical}px`\n    };\n\n    if (this.top) {\n      containerStyle['top'] = `${this.top}px`;\n    }\n\n    if (this.left) {\n      containerStyle['left'] = `${this.left}px`;\n    }\n\n    const optionsStyle = {};\n    if (this.width) {\n      optionsStyle['width'] = `${this.width}px`;\n    }\n\n    const classes = getClasses({\n      'options-container': true,\n      show: this.visible,\n      top: this.poppedTop,\n      anchored: !this.block,\n      loading: this.loading,\n      shadow: !this.hideShadow,\n      bordered: this.hideShadow\n    });\n\n    const classesInner = getClasses({\n      options: true\n    });\n\n    let options = this.options || [];\n    if (\n      options.length == 0 &&\n      this.tempOptions &&\n      this.tempOptions.length > 0\n    ) {\n      options = this.tempOptions;\n    }\n\n    return html`\n      <div class=${classes} style=${styleMap(containerStyle)}>\n        <div\n          class=\"options-scroll\"\n          @scroll=${this.handleInnerScroll}\n          @mousedown=${this.handleMouseDown}\n        >\n          <div class=\"${classesInner}\" style=${styleMap(optionsStyle)}>\n            ${options.map((option, index) => {\n              return html`<div\n                data-option-index=\"${index}\"\n                @mousemove=${this.handleMouseMove}\n                @click=${this.handleOptionClick}\n                @mousedown=${this.handleMouseDown}\n                class=\"option ${index === this.cursorIndex &&\n                !this.internalFocusDisabled\n                  ? 'focused'\n                  : ''}\"\n              >\n                ${this.resolvedRenderOption(option, index === this.cursorIndex)}\n              </div>`;\n            })}\n            ${this.block ? html`<div style=\"height:0.1em\"></div>` : null}\n          </div>\n          <slot></slot>\n        </div>\n\n        <div class=\"loader-bar\">\n          <temba-loading></temba-loading>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Options.js","sourceRoot":"","sources":["../../../src/options/Options.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement, EventHandler } from '../RapidElement';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { getClasses, getScrollParent, throttle } from '../utils';\n\nexport class Options extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        --transition-speed: 0;\n      }\n\n      .options-container {\n        background: var(--color-options-bg);\n        user-select: none;\n        border-radius: var(--curvature-widget);\n        overflow: hidden;\n        margin-top: var(--options-margin-top);\n        display: flex;\n        flex-direction: column;\n        // transform: scaleY(0.5) translateY(-5em);\n        transition: transform var(--transition-speed)\n            cubic-bezier(0.71, 0.18, 0.61, 1.33),\n          opacity var(--transition-speed) cubic-bezier(0.71, 0.18, 0.61, 1.33);\n        opacity: 0;\n        border: 1px transparent;\n        z-index: 1000;\n      }\n\n      .shadow {\n        box-shadow: var(--options-shadow);\n      }\n\n      .anchored {\n        position: fixed;\n      }\n\n      :host([block]) .options-container {\n        flex-grow: 1;\n        height: 100%;\n        border: none;\n      }\n\n      :host([block]) .options-scroll {\n        height: 100%;\n        visibility: visible;\n        overflow-y: auto;\n        flex-grow: 1;\n        -webkit-mask-image: -webkit-radial-gradient(white, black);\n      }\n\n      :host([block]) {\n        border-radius: var(--curvature);\n        display: block;\n        height: 100%;\n      }\n\n      :host([block]) .shadow {\n        box-shadow: var(--options-block-shadow);\n      }\n\n      .bordered {\n        border: 1px solid var(--color-widget-border) !important;\n      }\n\n      :host([block]) .options {\n        margin-bottom: 1.5em;\n      }\n\n      .options-scroll {\n        display: flex;\n        flex-direction: column;\n      }\n\n      :host([collapsed]) temba-icon {\n        flex-grow: 1;\n        margin-right: 0px !important;\n        padding-top: 0.25em;\n        padding-bottom: 0.25em;\n      }\n\n      :host([collapsed]) .name {\n        display: none;\n      }\n\n      :host([collapsed]) .count {\n        display: none;\n      }\n\n      .options {\n        border-radius: var(--curvature-widget);\n        overflow-y: auto;\n        max-height: 200px;\n        border: none;\n      }\n\n      .show {\n        // transform: scaleY(1) translateY(0);\n        border: 1px solid var(--color-widget-border);\n        opacity: 1;\n        z-index: 1;\n      }\n\n      .option {\n        font-size: var(--temba-options-font-size);\n        padding: 5px 10px;\n        border-radius: 4px;\n        margin: 0.3em;\n        cursor: pointer;\n        color: var(--color-text-dark);\n        scroll-margin: 5px 0px;\n        text-align: left;\n      }\n\n      .option * {\n        user-select: none;\n        -webkit-user-select: none;\n        -ms-user-select: none;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        -ms-word-break: break-all;\n        word-break: break-word;\n        -ms-hyphens: auto;\n        -moz-hyphens: auto;\n        -webkit-hyphens: auto;\n        hyphens: auto;\n      }\n\n      .option .detail {\n        font-size: 85%;\n        color: rgba(0, 0, 0, 0.4);\n      }\n\n      code {\n        background: rgba(0, 0, 0, 0.05);\n        padding: 1px 5px;\n        border-radius: var(--curvature-widget);\n      }\n\n      :host([block]) {\n        position: relative;\n      }\n\n      :host([block]) .options {\n        overflow-y: initial;\n      }\n\n      temba-loading {\n        align-self: center;\n        margin-top: 0.025em;\n      }\n\n      .loader-bar {\n        pointer-events: none;\n        align-items: center;\n        background: #eee;\n        max-height: 0;\n        transition: max-height var(--transition-speed) ease-in-out;\n        border-bottom-left-radius: var(--curvature-widget);\n        border-bottom-right-radius: var(--curvature-widget);\n        display: flex;\n        overflow: hidden;\n      }\n\n      .loading .loader-bar {\n        max-height: 1.1em;\n      }\n\n      .option:hover {\n        background: var(--option-hover-bg);\n        color: var(--option-hover-text);\n      }\n\n      .option.focused {\n        background: var(--color-selection);\n        color: var(--color-text-dark);\n      }\n    `;\n  }\n\n  @property({ type: Number })\n  top: number;\n\n  @property({ type: Number })\n  left: number;\n\n  @property({ type: Number })\n  width: number;\n\n  @property({ type: Number, attribute: 'static-width' })\n  staticWidth: number;\n\n  @property({ type: Boolean, attribute: 'anchor-right' })\n  anchorRight: boolean;\n\n  @property({ type: Number })\n  marginHorizontal = 0;\n\n  @property({ type: Number })\n  marginVertical = 7;\n\n  @property({ type: Object })\n  anchorTo: HTMLElement;\n\n  @property({ type: Boolean })\n  visible: boolean;\n\n  @property({ type: Boolean })\n  block: boolean;\n\n  // if we allow the focus to follow the cursor\n  @property({ type: Boolean })\n  cursorHover: boolean;\n\n  // fire selection events when cursor changes\n  @property({ type: Boolean })\n  cursorSelection: boolean;\n\n  @property({ type: Number })\n  scrollPct = 75;\n\n  @property({ type: Number })\n  cursorIndex = -1;\n\n  @property({ type: Boolean })\n  internalFocusDisabled = false;\n\n  @property({ type: Array })\n  options: any[];\n\n  @property({ type: Array })\n  tempOptions: any[];\n\n  @property({ type: Boolean })\n  poppedTop: boolean;\n\n  @property({ type: Boolean })\n  spaceSelect: boolean;\n\n  @property({ type: String })\n  nameKey = 'name';\n\n  @property({ type: Boolean })\n  loading = false;\n\n  @property({ type: Boolean })\n  collapsed: boolean;\n\n  @property({ type: Boolean })\n  hideShadow = false;\n\n  @property({ attribute: false })\n  getName: { (option: any): string } = function (option: any) {\n    return option[this.nameKey || 'name'];\n  };\n\n  @property({ attribute: false })\n  renderInputOption: { (): TemplateResult } = function () {\n    return null;\n  };\n\n  @property({ attribute: false })\n  renderOption: { (option: any, selected: boolean): TemplateResult };\n\n  @property({ attribute: false })\n  renderOptionName: { (option: any, selected: boolean): TemplateResult };\n\n  @property({ attribute: false })\n  renderOptionDetail: { (option: any, selected: boolean): TemplateResult };\n\n  @property({ type: Number })\n  scrollHeight = 0;\n\n  @property({ type: Boolean })\n  triggerScroll = false;\n\n  scrollParent: HTMLElement = null;\n\n  resolvedRenderOption: { (option: any, selected: boolean): TemplateResult };\n\n  public firstUpdated(changed: Map<string, any>) {\n    super.firstUpdated(changed);\n    if (!this.block) {\n      this.scrollParent = getScrollParent(this);\n      this.calculatePosition = this.calculatePosition.bind(this);\n      if (this.scrollParent) {\n        this.scrollParent.addEventListener('scroll', this.calculatePosition);\n      }\n    }\n\n    this.resolvedRenderOption = (\n      this.renderOption || this.renderOptionDefault\n    ).bind(this);\n  }\n\n  public disconnectedCallback() {\n    if (!this.block) {\n      if (this.scrollParent) {\n        this.scrollParent.removeEventListener('scroll', this.calculatePosition);\n      }\n    }\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  private isFocused(): boolean {\n    // TODO: this really doesn't seem right\n    const focused =\n      this.closestElement(document.activeElement.tagName) ===\n      document.activeElement;\n\n    return focused;\n  }\n\n  private resizeObserver: ResizeObserver;\n\n  public updated(changed: Map<string, any>) {\n    super.updated(changed);\n\n    if (changed.has('anchorTo') && this.anchorTo) {\n      const optionsContainer =\n        this.shadowRoot.querySelector('.options-container');\n\n      if (!this.resizeObserver) {\n        this.resizeObserver = new ResizeObserver((entries) => {\n          window.requestAnimationFrame((): void | undefined => {\n            if (!Array.isArray(entries) || !entries.length) {\n              return;\n            }\n            this.calculatePosition();\n            this.adjustWidth();\n          });\n        });\n        this.resizeObserver.observe(optionsContainer);\n      }\n    }\n\n    // if our cursor changed, lets make sure our scrollbox is showing it\n    if (!this.internalFocusDisabled && changed.has('cursorIndex')) {\n      this.fireCustomEvent(CustomEventType.CursorChanged, {\n        index: this.cursorIndex\n      });\n    }\n\n    if (changed.has('visible') && changed.has('options')) {\n      if (!this.visible && this.options.length == 0) {\n        this.tempOptions = changed.get('options');\n        window.setTimeout(() => {\n          this.tempOptions = [];\n        }, 0);\n      }\n    }\n\n    if (changed.has('options')) {\n      this.adjustWidth();\n      this.calculatePosition();\n\n      // allow scrolls to trigger again\n      this.triggerScroll = true;\n\n      const prevOptions = changed.get('options');\n      const previousCount = prevOptions ? prevOptions.length : 0;\n      const newCount = this.options ? this.options.length : 0;\n\n      if (\n        this.cursorIndex === -1 ||\n        newCount < previousCount ||\n        (previousCount === 0 && newCount > 0 && !changed.has('cursorIndex'))\n      ) {\n        if (!this.internalFocusDisabled) {\n          if (!this.block || this.cursorIndex === -1) {\n            this.cursorIndex = 0;\n          } else {\n            if (this.cursorIndex >= newCount) {\n              this.cursorIndex = newCount - 1;\n            }\n          }\n\n          if (this.cursorSelection) {\n            this.handleSelection(false);\n          }\n        }\n      }\n\n      // if on initial load we don't have enough options to load, trigger a scroll\n      // threshold event in case the page size is smaller than our control height\n      const scrollBox = this.shadowRoot.querySelector('.options');\n      if (scrollBox) {\n        if (scrollBox.scrollHeight == scrollBox.clientHeight) {\n          this.fireCustomEvent(CustomEventType.ScrollThreshold);\n        }\n      }\n    }\n  }\n\n  private renderOptionDefault(option: any, selected: boolean): TemplateResult {\n    const renderOptionName = (\n      this.renderOptionName || this.renderOptionNameDefault\n    ).bind(this);\n    const renderOptionDetail = (\n      this.renderOptionDetail || this.renderOptionDetailDefault\n    ).bind(this);\n\n    if (selected) {\n      return html`\n        <div class=\"name\">${renderOptionName(option, selected)}</div>\n        <div class=\"detail\">${renderOptionDetail(option, selected)}</div>\n      `;\n    } else {\n      return html`\n        <div class=\"name\">${renderOptionName(option, selected)}</div>\n      `;\n    }\n  }\n\n  private renderOptionNameDefault(option: any): TemplateResult {\n    return html`<div style=\"display:flex; align-items:flex-start\">\n      ${option.icon\n        ? html`<temba-icon\n            name=\"${option.icon}\"\n            style=\"margin-right:0.5em; fill: var(--color-text-dark);\"\n          ></temba-icon>`\n        : null}\n      <div style=\"flex-grow:1\">${option.prefix}${this.getName(option)}</div>\n    </div>`;\n  }\n\n  private renderOptionDetailDefault(option: any): TemplateResult {\n    return html` ${option.detail} `;\n  }\n\n  public getSelection() {\n    return this.options[this.cursorIndex];\n  }\n\n  private handleSelection(tabbed = false, index = -1) {\n    if (!this.internalFocusDisabled) {\n      if (index === -1) {\n        index = this.cursorIndex;\n      }\n    }\n\n    const selected = this.options[index];\n    this.fireCustomEvent(CustomEventType.Selection, {\n      selected,\n      tabbed,\n      index\n    });\n  }\n\n  private moveCursor(direction: number): void {\n    if (!this.internalFocusDisabled) {\n      const newIndex = Math.max(\n        Math.min(this.cursorIndex + direction, this.options.length - 1),\n        0\n      );\n      this.setCursor(newIndex);\n    }\n  }\n\n  private setCursor: (index: number) => void = throttle(function (\n    index: number\n  ) {\n    if (!this.internalFocusDisabled) {\n      if (index !== this.cursorIndex) {\n        this.cursorIndex = index;\n      }\n    }\n  },\n  50);\n\n  public scrollToTop() {\n    const scrollBox = this.shadowRoot.querySelector('.options-scroll');\n    scrollBox.scrollTop = 0;\n  }\n\n  private ensureOptionVisible() {\n    const focusedOption = this.shadowRoot.querySelector(\n      `div[data-option-index=\"${this.cursorIndex}\"]`\n    ) as HTMLDivElement;\n    if (focusedOption) {\n      focusedOption.scrollIntoView({\n        block: 'nearest',\n        inline: 'start'\n      });\n    }\n  }\n  private handleKeyDown(evt: KeyboardEvent) {\n    if (this.internalFocusDisabled || (this.block && !this.isFocused())) {\n      return;\n    }\n\n    if (this.offsetParent === null) {\n      return;\n    }\n\n    if (this.options && this.options.length > 0) {\n      if ((evt.ctrlKey && evt.key === 'n') || evt.key === 'ArrowDown') {\n        this.moveCursor(1);\n        evt.preventDefault();\n        evt.stopPropagation();\n        if (this.cursorSelection) {\n          this.handleSelection(false);\n        }\n        this.ensureOptionVisible();\n      } else if ((evt.ctrlKey && evt.key === 'p') || evt.key === 'ArrowUp') {\n        this.moveCursor(-1);\n        evt.preventDefault();\n        if (this.cursorSelection) {\n          this.handleSelection(false);\n        }\n        this.ensureOptionVisible();\n      } else if (\n        evt.key === 'Enter' ||\n        evt.key === 'Tab' ||\n        (this.spaceSelect && evt.key === ' ')\n      ) {\n        evt.preventDefault();\n        evt.stopPropagation();\n        this.handleSelection(evt.key === 'Tab');\n      } else if (evt.key === 'Escape') {\n        this.fireCustomEvent(CustomEventType.Canceled);\n      }\n    }\n  }\n\n  private handleInnerScroll(evt: Event) {\n    const scrollbox = evt.target as HTMLDivElement;\n\n    // scroll height has changed, enable scroll trigger\n    if (scrollbox.scrollHeight > this.scrollHeight) {\n      this.scrollHeight = scrollbox.scrollHeight;\n      this.triggerScroll = true;\n    }\n\n    if (this.triggerScroll) {\n      const scrollPct =\n        scrollbox.scrollTop / (scrollbox.scrollHeight - scrollbox.clientHeight);\n      if (scrollPct * 100 > this.scrollPct) {\n        this.fireCustomEvent(CustomEventType.ScrollThreshold);\n        this.triggerScroll = false;\n      }\n    }\n  }\n\n  private adjustWidth() {\n    if (this.anchorTo) {\n      const anchorBounds = this.anchorTo.getBoundingClientRect();\n      this.width =\n        this.staticWidth > 0\n          ? this.staticWidth\n          : anchorBounds.width - 2 - this.marginHorizontal * 2;\n    }\n  }\n\n  private calculatePosition() {\n    if (this.visible && !this.block) {\n      const optionsBounds = this.shadowRoot\n        .querySelector('.options-container')\n        .getBoundingClientRect();\n\n      if (this.anchorTo) {\n        this.top = 0;\n        const anchorBounds = this.anchorTo.getBoundingClientRect();\n        if (anchorBounds.bottom + optionsBounds.height > window.innerHeight) {\n          this.top = -(optionsBounds.height + anchorBounds.height + 20);\n        }\n        this.left = anchorBounds.left;\n\n        // adjust for parent scrolling\n        if (this.scrollParent) {\n          this.top += -this.scrollParent.scrollTop;\n        }\n      }\n    }\n  }\n\n  public getEventHandlers(): EventHandler[] {\n    return [\n      {\n        event: 'keydown',\n        method: this.handleKeyDown,\n        isDocument: true\n      },\n      {\n        event: 'scroll',\n        method: this.calculatePosition,\n        isDocument: true\n      }\n    ];\n  }\n\n  private handleMouseMove(evt: MouseEvent) {\n    if (!this.block || this.cursorHover) {\n      if (Math.abs(evt.movementX) + Math.abs(evt.movementY) > 0) {\n        const index = (evt.currentTarget as HTMLElement).getAttribute(\n          'data-option-index'\n        );\n        this.setCursor(parseInt(index));\n      }\n    }\n  }\n\n  private handleOptionClick(evt: MouseEvent) {\n    const index = (evt.currentTarget as HTMLElement).getAttribute(\n      'data-option-index'\n    );\n\n    if (index) {\n      const newIndex = parseInt(index);\n      this.setCursor(newIndex);\n      this.handleSelection(false, newIndex);\n    }\n  }\n\n  public render(): TemplateResult {\n    if (!this.resolvedRenderOption) {\n      return null;\n    }\n\n    let vertical = this.block ? 0 : this.marginVertical;\n    if (this.poppedTop) {\n      vertical *= -1;\n    }\n\n    const containerStyle = {\n      'margin-left': `${this.marginHorizontal}px`,\n      'margin-top': `${vertical}px`\n    };\n\n    if (this.top) {\n      containerStyle[`transform`] = `translateY(${this.top}px)`;\n    }\n\n    if (this.left) {\n      containerStyle['left'] = `${this.left}px`;\n    }\n\n    const optionsStyle = {};\n    if (this.width) {\n      optionsStyle['width'] = `${this.width}px`;\n    }\n\n    const classes = getClasses({\n      'options-container': true,\n      show: this.visible,\n      top: this.poppedTop,\n      anchored: !this.block,\n      loading: this.loading,\n      shadow: !this.hideShadow,\n      bordered: this.hideShadow\n    });\n\n    const classesInner = getClasses({\n      options: true\n    });\n\n    let options = this.options || [];\n    if (\n      options.length == 0 &&\n      this.tempOptions &&\n      this.tempOptions.length > 0\n    ) {\n      options = this.tempOptions;\n    }\n\n    return html`\n      <div class=${classes} style=${styleMap(containerStyle)}>\n        <div class=\"options-scroll\" @scroll=${this.handleInnerScroll}>\n          <div class=\"${classesInner}\" style=${styleMap(optionsStyle)}>\n            ${options.map((option, index) => {\n              return html`<div\n                data-option-index=\"${index}\"\n                @mousemove=${this.handleMouseMove}\n                @mousedown=${this.handleOptionClick}\n                class=\"option ${index === this.cursorIndex &&\n                !this.internalFocusDisabled\n                  ? 'focused'\n                  : ''}\"\n              >\n                ${this.resolvedRenderOption(option, index === this.cursorIndex)}\n              </div>`;\n            })}\n            ${this.block ? html`<div style=\"height:0.1em\"></div>` : null}\n          </div>\n          <slot></slot>\n        </div>\n\n        <div class=\"loader-bar\">\n          <temba-loading></temba-loading>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/select/PopupSelect.js

@@ -0,0 +1,57 @@
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { RapidElement } from '../RapidElement';
+import { property } from 'lit/decorators.js';
+export class PopupSelect extends RapidElement {
+    constructor() {
+        super(...arguments);
+        this.placeholder = '';
+        this.endpoint = '';
+    }
+    handleChange() {
+        this.blur();
+    }
+    render() {
+        return html `
+      <div>
+        <temba-dropdown>
+          <div slot="toggle"><slot name="toggle"></slot></div>
+          <div class="dropdown" slot="dropdown">
+            <temba-select
+              placeholder=${this.placeholder}
+              endpoint=${this.endpoint}
+              clearable
+              searchable
+              @change=${this.handleChange}
+            ></temba-select>
+          </div>
+        </temba-dropdown>
+      </div>
+    `;
+    }
+}
+PopupSelect.styles = css `
+    :host {
+    }
+
+    .dropdown {
+      background: #fff;
+      border-radius: 0.5em;
+      padding: 0.15em;
+      border-radius: var(--curvature);
+    }
+
+    temba-select {
+      width: 250px;
+      display: block;
+      --color-widget-border: transparent;
+      --widget-box-shadow: none;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], PopupSelect.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String })
+], PopupSelect.prototype, "endpoint", void 0);
+//# sourceMappingURL=PopupSelect.js.map

package/out-tsc/src/select/PopupSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupSelect.js","sourceRoot":"","sources":["../../../src/select/PopupSelect.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,OAAO,WAAY,SAAQ,YAAY;IAA7C;;QAqBE,gBAAW,GAAW,EAAE,CAAC;QAGzB,aAAQ,GAAW,EAAE,CAAC;IAwBxB,CAAC;IAtBS,YAAY;QAClB,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;;;;4BAMa,IAAI,CAAC,WAAW;yBACnB,IAAI,CAAC,QAAQ;;;wBAGd,IAAI,CAAC,YAAY;;;;;KAKpC,CAAC;IACJ,CAAC;;AA9Ca,kBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;GAiBzB,AAjBmB,CAiBlB;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACF;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACL","sourcesContent":["import { css, html } from 'lit';\nimport { RapidElement } from '../RapidElement';\nimport { property } from 'lit/decorators.js';\n\nexport class PopupSelect extends RapidElement {\n  public static styles = css`\n    :host {\n    }\n\n    .dropdown {\n      background: #fff;\n      border-radius: 0.5em;\n      padding: 0.15em;\n      border-radius: var(--curvature);\n    }\n\n    temba-select {\n      width: 250px;\n      display: block;\n      --color-widget-border: transparent;\n      --widget-box-shadow: none;\n    }\n  `;\n\n  @property({ type: String })\n  placeholder: string = '';\n\n  @property({ type: String })\n  endpoint: string = '';\n\n  private handleChange() {\n    this.blur();\n  }\n\n  public render() {\n    return html`\n      <div>\n        <temba-dropdown>\n          <div slot=\"toggle\"><slot name=\"toggle\"></slot></div>\n          <div class=\"dropdown\" slot=\"dropdown\">\n            <temba-select\n              placeholder=${this.placeholder}\n              endpoint=${this.endpoint}\n              clearable\n              searchable\n              @change=${this.handleChange}\n            ></temba-select>\n          </div>\n        </temba-dropdown>\n      </div>\n    `;\n  }\n}\n"]}