@nyaruka/temba-components 0.75.0 → 0.75.3

package/out-tsc/src/dropdown/Dropdown.js

@@ -4,19 +4,6 @@ import { property } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 import { getClasses } from '../utils';
 export class Dropdown extends RapidElement {
-    constructor() {
-        super(...arguments);
-        this.open = false;
-        this.top = false;
-        this.bottom = false;
-        this.left = false;
-        this.right = false;
-        this.arrowSize = 6;
-        this.arrowOffset = this.arrowSize * 2;
-        this.offsetX = 0;
-        this.offsetY = 0;
-        this.mask = false;
-    }
     static get styles() {
         return css `
       .wrapper {
@@ -93,6 +80,20 @@ export class Dropdown extends RapidElement {
       }
     `;
     }
+    constructor() {
+        super();
+        this.open = false;
+        this.top = false;
+        this.bottom = false;
+        this.left = false;
+        this.right = false;
+        this.arrowSize = 6;
+        this.arrowOffset = this.arrowSize * 2;
+        this.offsetX = 0;
+        this.offsetY = 0;
+        this.mask = false;
+        this.ensureOnScreen = this.ensureOnScreen.bind(this);
+    }
     firstUpdated(props) {
         super.firstUpdated(props);
         const arrow = this.shadowRoot.querySelector('.arrow');
@@ -135,43 +136,46 @@ export class Dropdown extends RapidElement {
             }
         }
         if (changedProperties.has('open')) {
-            this.ensureOnScreen();
+            // check right away if we are on the screen, and then again moments after render
+            window.setTimeout(this.ensureOnScreen, 0);
+            window.setTimeout(this.ensureOnScreen, 100);
         }
     }
     ensureOnScreen() {
-        window.setTimeout(() => {
-            const dropdown = this.shadowRoot.querySelector('.dropdown');
-            if (dropdown) {
-                // dropdown will go off the screen, let's push it up
-                const toggle = this.querySelector('div[slot="toggle"]');
-                if (dropdown.getBoundingClientRect().bottom > window.innerHeight) {
-                    if (this.bottom) {
-                        dropdown.style.top = toggle.clientHeight + 'px';
-                    }
-                    else {
-                        dropdown.style.top = '';
-                        dropdown.style.bottom = toggle.clientHeight + 'px';
-                    }
+        const dropdown = this.shadowRoot.querySelector('.dropdown');
+        if (dropdown) {
+            // dropdown will go off the screen, let's push it up
+            const toggle = this.querySelector('div[slot="toggle"]');
+            if (!toggle) {
+                return;
+            }
+            if (dropdown.getBoundingClientRect().bottom > window.innerHeight - 100) {
+                if (this.bottom) {
+                    dropdown.style.top = toggle.clientHeight + 'px';
                 }
-                else if (dropdown.getBoundingClientRect().top < 0) {
-                    if (this.bottom) {
-                        dropdown.style.top = toggle.clientHeight + 'px';
-                    }
-                    else {
-                        dropdown.style.top = toggle.clientHeight + 'px';
-                        dropdown.style.bottom = '';
-                    }
+                else {
+                    dropdown.style.top = '';
+                    dropdown.style.bottom = toggle.clientHeight + 'px';
                 }
-                if (dropdown.getBoundingClientRect().right > window.innerWidth) {
-                    dropdown.style.left = '';
-                    dropdown.style.right = 0 + 'px';
+            }
+            else if (dropdown.getBoundingClientRect().top < 0) {
+                if (this.bottom) {
+                    dropdown.style.top = toggle.clientHeight + 'px';
                 }
-                else if (dropdown.getBoundingClientRect().left < 0) {
-                    dropdown.style.left = 0 + 'px';
-                    dropdown.style.right = '';
+                else {
+                    dropdown.style.top = toggle.clientHeight + 'px';
+                    dropdown.style.bottom = '';
                 }
             }
-        }, 100);
+            if (dropdown.getBoundingClientRect().right > window.innerWidth) {
+                dropdown.style.left = '';
+                dropdown.style.right = '0px';
+            }
+            else if (dropdown.getBoundingClientRect().left < 0) {
+                dropdown.style.left = 0 + 'px';
+                dropdown.style.right = '';
+            }
+        }
     }
     handleToggleClicked(event) {
         event.preventDefault();

package/out-tsc/src/dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/dropdown/Dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\n\nexport class Dropdown extends RapidElement {\n  static get styles() {\n    return css`\n      .wrapper {\n        position: relative;\n      }\n\n      .toggle {\n        cursor: pointer;\n      }\n\n      .dropdown-wrapper {\n        position: relative;\n        overflow: auto;\n      }\n\n      .dropdown {\n        position: absolute;\n        opacity: 0;\n        z-index: 2;\n        pointer-events: none;\n        padding: 0;\n        border-radius: var(--curvature);\n        background: #fff;\n        transform: translateY(1em) scale(0.9);\n        transition: all calc(0.8 * var(--transition-speed)) var(--bounce);\n        user-select: none;\n        margin-top: 0px;\n        margin-left: 0px;\n        box-shadow: var(--dropdown-shadow);\n      }\n\n      .dropdown:focus {\n        outline: none;\n      }\n\n      .arrow {\n        content: '';\n        width: 0px;\n        height: 0;\n        top: -6px;\n        z-index: 10;\n        position: absolute;\n        border-left: 6px solid transparent;\n        border-right: 6px solid transparent;\n        border-bottom: 6px solid white;\n      }\n\n      .open .dropdown {\n        opacity: 1;\n        pointer-events: auto;\n        transform: translateY(0.5em) scale(1);\n      }\n\n      .mask {\n        position: absolute;\n        left: 0;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        background: rgba(0, 0, 0, 0.7);\n        opacity: 0;\n        transition: opacity var(--transition-speed) ease-in-out;\n        pointer-events: none;\n        z-index: 1;\n      }\n\n      .mask.open {\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      .right {\n        right: 0;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  open = false;\n\n  @property({ type: Boolean })\n  top = false;\n\n  @property({ type: Boolean })\n  bottom = false;\n\n  @property({ type: Boolean })\n  left = false;\n\n  @property({ type: Boolean })\n  right = false;\n\n  @property({ type: Number })\n  arrowSize = 6;\n\n  @property({ type: Number })\n  arrowOffset = this.arrowSize * 2;\n\n  @property({ type: Number })\n  offsetX = 0;\n\n  @property({ type: Number })\n  offsetY = 0;\n\n  @property({ type: Boolean })\n  mask = false;\n\n  public firstUpdated(props: any) {\n    super.firstUpdated(props);\n\n    const arrow = this.shadowRoot.querySelector('.arrow') as HTMLDivElement;\n    arrow.style.borderWidth = this.arrowSize + 'px';\n    arrow.style.top = '-' + this.arrowSize + 'px';\n\n    if (this.arrowOffset < 0) {\n      arrow.style.right = Math.abs(this.arrowOffset) + 'px';\n    } else {\n      arrow.style.left = this.arrowOffset + 'px';\n    }\n\n    const dropdown = this.shadowRoot.querySelector(\n      '.dropdown'\n    ) as HTMLDivElement;\n\n    dropdown.addEventListener('blur', () => {\n      // we nest this to deal with clicking the toggle to close\n      // as we don't want it to toggle an immediate open, probably\n      // a better way to deal with this\n      window.setTimeout(() => {\n        this.open = false;\n        // blur our host element too\n        (this.shadowRoot.host as HTMLDivElement).blur();\n      }, 200);\n    });\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n    const dropdown = this.shadowRoot.querySelector(\n      '.dropdown'\n    ) as HTMLDivElement;\n\n    if (changedProperties.has('offsetY') || changedProperties.has('offsetX')) {\n      dropdown.style.marginTop = this.offsetY + 'px';\n      if (dropdown.offsetLeft + dropdown.clientWidth > window.outerWidth) {\n        dropdown.style.marginLeft =\n          '-' + (dropdown.clientWidth - this.clientWidth - this.offsetX) + 'px';\n      } else {\n        if (this.right) {\n          dropdown.style.marginRight = this.offsetX + 'px';\n        } else {\n          dropdown.style.marginLeft = this.offsetX + 'px';\n        }\n      }\n    }\n\n    if (changedProperties.has('open')) {\n      this.ensureOnScreen();\n    }\n  }\n\n  public ensureOnScreen() {\n    window.setTimeout(() => {\n      const dropdown = this.shadowRoot.querySelector(\n        '.dropdown'\n      ) as HTMLDivElement;\n\n      if (dropdown) {\n        // dropdown will go off the screen, let's push it up\n        const toggle = this.querySelector('div[slot=\"toggle\"]');\n        if (dropdown.getBoundingClientRect().bottom > window.innerHeight) {\n          if (this.bottom) {\n            dropdown.style.top = toggle.clientHeight + 'px';\n          } else {\n            dropdown.style.top = '';\n            dropdown.style.bottom = toggle.clientHeight + 'px';\n          }\n        } else if (dropdown.getBoundingClientRect().top < 0) {\n          if (this.bottom) {\n            dropdown.style.top = toggle.clientHeight + 'px';\n          } else {\n            dropdown.style.top = toggle.clientHeight + 'px';\n            dropdown.style.bottom = '';\n          }\n        }\n\n        if (dropdown.getBoundingClientRect().right > window.innerWidth) {\n          dropdown.style.left = '';\n          dropdown.style.right = 0 + 'px';\n        } else if (dropdown.getBoundingClientRect().left < 0) {\n          dropdown.style.left = 0 + 'px';\n          dropdown.style.right = '';\n        }\n      }\n    }, 100);\n  }\n\n  public handleToggleClicked(event: MouseEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n    if (!this.open) {\n      this.open = true;\n\n      const dropdown = this.shadowRoot.querySelector(\n        '.dropdown'\n      ) as HTMLDivElement;\n      dropdown.focus();\n    }\n  }\n\n  private handleDropdownMouseDown(event: MouseEvent): void {\n    // block mouse down when clicking inside dropdown so we don't lose focus yet\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  public render(): TemplateResult {\n    return html`\n      ${this.mask\n        ? html`<div class=\"mask  ${this.open ? 'open' : ''}\" />`\n        : null}\n\n      <div class=\"wrapper ${this.open ? 'open' : ''}\">\n        <slot\n          name=\"toggle\"\n          class=\"toggle\"\n          @click=${this.handleToggleClicked}\n        ></slot>\n        <div\n          class=\"${getClasses({\n            dropdown: true,\n            right: this.right,\n            left: this.left,\n            top: this.top,\n            bottom: this.bottom,\n          })}\"\n          tabindex=\"0\"\n          @mousedown=${this.handleDropdownMouseDown}\n        >\n          <div class=\"arrow\"></div>\n          <div class=\"dropdown-wrapper\">\n            <slot name=\"dropdown\" tabindex=\"1\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/dropdown/Dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { ContactStoreElement } from '../contacts/ContactStoreElement';\n\nexport class Dropdown extends RapidElement {\n  static get styles() {\n    return css`\n      .wrapper {\n        position: relative;\n      }\n\n      .toggle {\n        cursor: pointer;\n      }\n\n      .dropdown-wrapper {\n        position: relative;\n        overflow: auto;\n      }\n\n      .dropdown {\n        position: absolute;\n        opacity: 0;\n        z-index: 2;\n        pointer-events: none;\n        padding: 0;\n        border-radius: var(--curvature);\n        background: #fff;\n        transform: translateY(1em) scale(0.9);\n        transition: all calc(0.8 * var(--transition-speed)) var(--bounce);\n        user-select: none;\n        margin-top: 0px;\n        margin-left: 0px;\n        box-shadow: var(--dropdown-shadow);\n      }\n\n      .dropdown:focus {\n        outline: none;\n      }\n\n      .arrow {\n        content: '';\n        width: 0px;\n        height: 0;\n        top: -6px;\n        z-index: 10;\n        position: absolute;\n        border-left: 6px solid transparent;\n        border-right: 6px solid transparent;\n        border-bottom: 6px solid white;\n      }\n\n      .open .dropdown {\n        opacity: 1;\n        pointer-events: auto;\n        transform: translateY(0.5em) scale(1);\n      }\n\n      .mask {\n        position: absolute;\n        left: 0;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        background: rgba(0, 0, 0, 0.7);\n        opacity: 0;\n        transition: opacity var(--transition-speed) ease-in-out;\n        pointer-events: none;\n        z-index: 1;\n      }\n\n      .mask.open {\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      .right {\n        right: 0;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  open = false;\n\n  @property({ type: Boolean })\n  top = false;\n\n  @property({ type: Boolean })\n  bottom = false;\n\n  @property({ type: Boolean })\n  left = false;\n\n  @property({ type: Boolean })\n  right = false;\n\n  @property({ type: Number })\n  arrowSize = 6;\n\n  @property({ type: Number })\n  arrowOffset = this.arrowSize * 2;\n\n  @property({ type: Number })\n  offsetX = 0;\n\n  @property({ type: Number })\n  offsetY = 0;\n\n  @property({ type: Boolean })\n  mask = false;\n\n  constructor() {\n    super();\n    this.ensureOnScreen = this.ensureOnScreen.bind(this);\n  }\n\n  public firstUpdated(props: any) {\n    super.firstUpdated(props);\n\n    const arrow = this.shadowRoot.querySelector('.arrow') as HTMLDivElement;\n    arrow.style.borderWidth = this.arrowSize + 'px';\n    arrow.style.top = '-' + this.arrowSize + 'px';\n\n    if (this.arrowOffset < 0) {\n      arrow.style.right = Math.abs(this.arrowOffset) + 'px';\n    } else {\n      arrow.style.left = this.arrowOffset + 'px';\n    }\n\n    const dropdown = this.shadowRoot.querySelector(\n      '.dropdown'\n    ) as HTMLDivElement;\n\n    dropdown.addEventListener('blur', () => {\n      // we nest this to deal with clicking the toggle to close\n      // as we don't want it to toggle an immediate open, probably\n      // a better way to deal with this\n      window.setTimeout(() => {\n        this.open = false;\n        // blur our host element too\n        (this.shadowRoot.host as HTMLDivElement).blur();\n      }, 200);\n    });\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n    const dropdown = this.shadowRoot.querySelector(\n      '.dropdown'\n    ) as HTMLDivElement;\n\n    if (changedProperties.has('offsetY') || changedProperties.has('offsetX')) {\n      dropdown.style.marginTop = this.offsetY + 'px';\n      if (dropdown.offsetLeft + dropdown.clientWidth > window.outerWidth) {\n        dropdown.style.marginLeft =\n          '-' + (dropdown.clientWidth - this.clientWidth - this.offsetX) + 'px';\n      } else {\n        if (this.right) {\n          dropdown.style.marginRight = this.offsetX + 'px';\n        } else {\n          dropdown.style.marginLeft = this.offsetX + 'px';\n        }\n      }\n    }\n\n    if (changedProperties.has('open')) {\n      // check right away if we are on the screen, and then again moments after render\n      window.setTimeout(this.ensureOnScreen, 0);\n      window.setTimeout(this.ensureOnScreen, 100);\n    }\n  }\n\n  public ensureOnScreen() {\n    const dropdown = this.shadowRoot.querySelector(\n      '.dropdown'\n    ) as HTMLDivElement;\n\n    if (dropdown) {\n      // dropdown will go off the screen, let's push it up\n      const toggle = this.querySelector('div[slot=\"toggle\"]');\n\n      if (!toggle) {\n        return;\n      }\n\n      if (dropdown.getBoundingClientRect().bottom > window.innerHeight - 100) {\n        if (this.bottom) {\n          dropdown.style.top = toggle.clientHeight + 'px';\n        } else {\n          dropdown.style.top = '';\n          dropdown.style.bottom = toggle.clientHeight + 'px';\n        }\n      } else if (dropdown.getBoundingClientRect().top < 0) {\n        if (this.bottom) {\n          dropdown.style.top = toggle.clientHeight + 'px';\n        } else {\n          dropdown.style.top = toggle.clientHeight + 'px';\n          dropdown.style.bottom = '';\n        }\n      }\n\n      if (dropdown.getBoundingClientRect().right > window.innerWidth) {\n        dropdown.style.left = '';\n        dropdown.style.right = '0px';\n      } else if (dropdown.getBoundingClientRect().left < 0) {\n        dropdown.style.left = 0 + 'px';\n        dropdown.style.right = '';\n      }\n    }\n  }\n\n  public handleToggleClicked(event: MouseEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n    if (!this.open) {\n      this.open = true;\n\n      const dropdown = this.shadowRoot.querySelector(\n        '.dropdown'\n      ) as HTMLDivElement;\n      dropdown.focus();\n    }\n  }\n\n  private handleDropdownMouseDown(event: MouseEvent): void {\n    // block mouse down when clicking inside dropdown so we don't lose focus yet\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  public render(): TemplateResult {\n    return html`\n      ${this.mask\n        ? html`<div class=\"mask  ${this.open ? 'open' : ''}\" />`\n        : null}\n\n      <div class=\"wrapper ${this.open ? 'open' : ''}\">\n        <slot\n          name=\"toggle\"\n          class=\"toggle\"\n          @click=${this.handleToggleClicked}\n        ></slot>\n        <div\n          class=\"${getClasses({\n            dropdown: true,\n            right: this.right,\n            left: this.left,\n            top: this.top,\n            bottom: this.bottom,\n          })}\"\n          tabindex=\"0\"\n          @mousedown=${this.handleDropdownMouseDown}\n        >\n          <div class=\"arrow\"></div>\n          <div class=\"dropdown-wrapper\">\n            <slot name=\"dropdown\" tabindex=\"1\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/lightbox/Lightbox.js

@@ -31,8 +31,8 @@ export class Lightbox extends RapidElement {
         opacity: 0;
         background: rgba(0, 0, 0, 0.5);
         position: absolute;
-        height: 100vh;
-        width: 100vw;
+        height: 100svh;
+        width: 100svw;
         pointer-events: none;
       }
 
@@ -64,7 +64,6 @@ export class Lightbox extends RapidElement {
     }
     showElement(ele) {
         // size our matte according to the ele's boundaries
-        console.log(ele);
         const bounds = ele.getBoundingClientRect();
         this.ele = ele.cloneNode();
         this.left = bounds.left;

package/out-tsc/src/lightbox/Lightbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Lightbox.js","sourceRoot":"","sources":["../../../src/lightbox/Lightbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { styleMap } from 'lit-html/directives/style-map.js';\n\n/**\n * This component relies on a bit of sleight of hand magic\n * to achieve it's effect. As such, it requires the use of\n * computed animation times and window.setTimeout().\n */\nexport class Lightbox extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        position: absolute;\n      }\n\n      .mask {\n        display: flex;\n        opacity: 0;\n        background: rgba(0, 0, 0, 0.5);\n        position: absolute;\n        height: 100vh;\n        width: 100vw;\n        pointer-events: none;\n      }\n\n      .zoom .mask {\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      .matte {\n        position: absolute;\n        transform: translate(400, 400) scale(3, 3);\n        border-radius: 2%;\n        overflow: hidden;\n        box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.15);\n      }\n    `;\n  }\n\n  @property({ type: Number })\n  animationTime = 300;\n\n  @property({ type: Boolean })\n  show = false;\n\n  @property({ type: Boolean })\n  zoom = false;\n\n  @property({ type: Number })\n  zoomPct = 0.9;\n\n  private ele: HTMLElement;\n  private left: number;\n  private top: number;\n  private height: number;\n  private width: number;\n  private scale = 1;\n  private xTrans = '0px';\n  private yTrans = '0px';\n\n  protected updated(\n    changed: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    if (changed.has('show') && this.show) {\n      window.setTimeout(() => {\n        this.zoom = true;\n      }, 0);\n    }\n\n    if (changed.has('zoom') && !this.zoom && this.show) {\n      window.setTimeout(() => {\n        this.show = false;\n      }, this.animationTime);\n    }\n  }\n\n  public showElement(ele: HTMLElement) {\n    // size our matte according to the ele's boundaries\n    console.log(ele);\n    const bounds = ele.getBoundingClientRect();\n    this.ele = ele.cloneNode() as HTMLElement;\n    this.left = bounds.left;\n    this.top = bounds.top;\n    this.width = bounds.width;\n    this.height = bounds.height;\n\n    this.xTrans = '0px';\n    this.yTrans = '0px';\n    this.scale = 1;\n\n    let desiredWidth = this.width;\n    let desiredHeight = this.height;\n    let desiredScale = this.scale;\n\n    const maxHeight = window.innerHeight * this.zoomPct;\n    const maxWidth = window.innerWidth * this.zoomPct;\n\n    // if the width fits, constrain by height\n    if (this.width * (maxHeight / this.height) < maxWidth) {\n      desiredHeight = window.innerHeight * this.zoomPct;\n      desiredScale = desiredHeight / this.height;\n      desiredWidth = this.width * desiredScale;\n    } else {\n      desiredWidth = window.innerWidth * this.zoomPct;\n      desiredScale = desiredWidth / this.width;\n      desiredHeight = this.height * desiredScale;\n    }\n\n    const xGrowth = (desiredWidth - this.width) / 2;\n    const xDest = (window.innerWidth - desiredWidth) / 2;\n    this.xTrans = xDest - this.left + xGrowth + 'px';\n\n    const yGrowth = (desiredHeight - this.height) / 2;\n    const yDest = (window.innerHeight - desiredHeight) / 2;\n    this.yTrans = yDest - this.top + yGrowth + 'px';\n\n    this.scale = desiredScale;\n    this.show = true;\n  }\n\n  public handleClick() {\n    this.zoom = false;\n  }\n\n  public render() {\n    const styles = {\n      transition: `transform ${this.animationTime}ms ease, box-shadow ${this.animationTime}ms ease`,\n    };\n\n    if (this.show) {\n      styles['left'] = this.left + 'px';\n      styles['top'] = this.top + 'px';\n      styles['width'] = this.width + 'px';\n      styles['height'] = this.height + 'px';\n    }\n\n    if (this.zoom) {\n      styles[\n        'transform'\n      ] = `translate(${this.xTrans}, ${this.yTrans}) scale(${this.scale}, ${this.scale})`;\n    }\n\n    return html`\n      <div\n        class=${getClasses({\n          container: true,\n          show: this.show,\n          zoom: this.zoom,\n        })}\n        @click=${this.handleClick}\n      >\n        <div\n          class=${getClasses({ mask: true })}\n          style=\"transition: all ${this.animationTime}ms; ease\"\n        ></div>\n        <div class=${getClasses({ matte: true })} style=${styleMap(styles)}>\n          ${this.show ? this.ele : null}\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Lightbox.js","sourceRoot":"","sources":["../../../src/lightbox/Lightbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { styleMap } from 'lit-html/directives/style-map.js';\n\n/**\n * This component relies on a bit of sleight of hand magic\n * to achieve it's effect. As such, it requires the use of\n * computed animation times and window.setTimeout().\n */\nexport class Lightbox extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        position: absolute;\n      }\n\n      .mask {\n        display: flex;\n        opacity: 0;\n        background: rgba(0, 0, 0, 0.5);\n        position: absolute;\n        height: 100svh;\n        width: 100svw;\n        pointer-events: none;\n      }\n\n      .zoom .mask {\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      .matte {\n        position: absolute;\n        transform: translate(400, 400) scale(3, 3);\n        border-radius: 2%;\n        overflow: hidden;\n        box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.15);\n      }\n    `;\n  }\n\n  @property({ type: Number })\n  animationTime = 300;\n\n  @property({ type: Boolean })\n  show = false;\n\n  @property({ type: Boolean })\n  zoom = false;\n\n  @property({ type: Number })\n  zoomPct = 0.9;\n\n  private ele: HTMLElement;\n  private left: number;\n  private top: number;\n  private height: number;\n  private width: number;\n  private scale = 1;\n  private xTrans = '0px';\n  private yTrans = '0px';\n\n  protected updated(\n    changed: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    if (changed.has('show') && this.show) {\n      window.setTimeout(() => {\n        this.zoom = true;\n      }, 0);\n    }\n\n    if (changed.has('zoom') && !this.zoom && this.show) {\n      window.setTimeout(() => {\n        this.show = false;\n      }, this.animationTime);\n    }\n  }\n\n  public showElement(ele: HTMLElement) {\n    // size our matte according to the ele's boundaries\n    const bounds = ele.getBoundingClientRect();\n    this.ele = ele.cloneNode() as HTMLElement;\n    this.left = bounds.left;\n    this.top = bounds.top;\n    this.width = bounds.width;\n    this.height = bounds.height;\n\n    this.xTrans = '0px';\n    this.yTrans = '0px';\n    this.scale = 1;\n\n    let desiredWidth = this.width;\n    let desiredHeight = this.height;\n    let desiredScale = this.scale;\n\n    const maxHeight = window.innerHeight * this.zoomPct;\n    const maxWidth = window.innerWidth * this.zoomPct;\n\n    // if the width fits, constrain by height\n    if (this.width * (maxHeight / this.height) < maxWidth) {\n      desiredHeight = window.innerHeight * this.zoomPct;\n      desiredScale = desiredHeight / this.height;\n      desiredWidth = this.width * desiredScale;\n    } else {\n      desiredWidth = window.innerWidth * this.zoomPct;\n      desiredScale = desiredWidth / this.width;\n      desiredHeight = this.height * desiredScale;\n    }\n\n    const xGrowth = (desiredWidth - this.width) / 2;\n    const xDest = (window.innerWidth - desiredWidth) / 2;\n    this.xTrans = xDest - this.left + xGrowth + 'px';\n\n    const yGrowth = (desiredHeight - this.height) / 2;\n    const yDest = (window.innerHeight - desiredHeight) / 2;\n    this.yTrans = yDest - this.top + yGrowth + 'px';\n\n    this.scale = desiredScale;\n    this.show = true;\n  }\n\n  public handleClick() {\n    this.zoom = false;\n  }\n\n  public render() {\n    const styles = {\n      transition: `transform ${this.animationTime}ms ease, box-shadow ${this.animationTime}ms ease`,\n    };\n\n    if (this.show) {\n      styles['left'] = this.left + 'px';\n      styles['top'] = this.top + 'px';\n      styles['width'] = this.width + 'px';\n      styles['height'] = this.height + 'px';\n    }\n\n    if (this.zoom) {\n      styles[\n        'transform'\n      ] = `translate(${this.xTrans}, ${this.yTrans}) scale(${this.scale}, ${this.scale})`;\n    }\n\n    return html`\n      <div\n        class=${getClasses({\n          container: true,\n          show: this.show,\n          zoom: this.zoom,\n        })}\n        @click=${this.handleClick}\n      >\n        <div\n          class=${getClasses({ mask: true })}\n          style=\"transition: all ${this.animationTime}ms; ease\"\n        ></div>\n        <div class=${getClasses({ matte: true })} style=${styleMap(styles)}>\n          ${this.show ? this.ele : null}\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -276,7 +276,7 @@ export class TembaList extends RapidElement {
             this.nextSelection = false;
         }
         else {
-            if (this.cursorIndex === -1) {
+            if (this.cursorIndex === -1 && !this.isMobile()) {
                 this.cursorIndex = 0;
             }
         }
@@ -286,6 +286,13 @@ export class TembaList extends RapidElement {
             this.setSelection(this.value);
             this.value = null;
         }
+        else if (this.isMobile() && !this.selected) {
+            this.cursorIndex = -1;
+            this.value = null;
+            this.selected = null;
+            const evt = new Event('change', { bubbles: true });
+            this.dispatchEvent(evt);
+        }
         return Promise.resolve();
     }
     handleScrollThreshold() {

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

@@ -1 +1 @@
-{"version":3,"file":"TembaList.js","sourceRoot":"","sources":["../../../src/list/TembaList.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { Store } from '../store/Store';\nimport { fetchResultsPage, ResultsPage } from '../utils';\n\nconst DEFAULT_REFRESH = 10000;\n\nexport class TembaList extends RapidElement {\n  @property({ type: Array, attribute: false })\n  items: any[] = [];\n\n  @property({ type: Object, attribute: false })\n  selected: any;\n\n  @property({ type: Number })\n  cursorIndex = -1;\n\n  @property({ type: String })\n  endpoint: string;\n\n  @property({ type: String })\n  nextSelection: any;\n\n  @property({ type: Number })\n  tabIndex = 1;\n\n  @property({ type: String })\n  valueKey = 'id';\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: Boolean })\n  loading = false;\n\n  @property({ type: Boolean })\n  collapsed: boolean;\n\n  @property({ type: Boolean })\n  hideShadow: boolean;\n\n  @property({ type: Boolean })\n  paused = false;\n\n  @property({ type: Boolean })\n  internalFocusDisabled = false;\n\n  @property({ attribute: false })\n  getNextRefresh: (firstOption: any) => any;\n\n  @property({ attribute: false })\n  sanitizeOption: (option: any) => any;\n\n  @property({ attribute: false })\n  renderOption: (option: any, selected: boolean) => TemplateResult;\n\n  @property({ attribute: false })\n  renderOptionDetail: (option: any, selected: boolean) => TemplateResult;\n\n  @property({ attribute: false, type: Object })\n  mostRecentItem: any;\n\n  // changes to the refresh key force a refresh\n  @property({ type: String })\n  refreshKey = '0';\n\n  reverseRefresh = true;\n\n  // our next page from our endpoint\n  nextPage: string = null;\n\n  pages = 0;\n  clearRefreshTimeout: any;\n  pending: AbortController[] = [];\n\n  store: Store;\n\n  // used for testing only\n  preserve: boolean;\n\n  static get styles() {\n    return css`\n      temba-options {\n        display: block;\n        width: 100%;\n        flex-grow: 1;\n      }\n    `;\n  }\n\n  constructor() {\n    super();\n    this.store = document.querySelector('temba-store') as Store;\n    this.handleSelection.bind(this);\n  }\n\n  private reset(): void {\n    this.selected = null;\n    this.nextPage = null;\n    this.cursorIndex = -1;\n    this.mostRecentItem = null;\n    this.items = [];\n  }\n\n  refreshInterval = null;\n\n  public connectedCallback() {\n    super.connectedCallback();\n    this.refreshInterval = setInterval(() => {\n      if (!this.paused) {\n        this.refreshKey = 'default_' + new Date().getTime();\n      }\n    }, DEFAULT_REFRESH);\n  }\n\n  public disconnectedCallback() {\n    clearInterval(this.refreshInterval);\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('endpoint') && this.endpoint) {\n      this.reset();\n      this.loading = true;\n      this.fetchItems();\n    }\n\n    if (changedProperties.has('loading')) {\n      if (!this.loading) {\n        this.fireCustomEvent(CustomEventType.FetchComplete);\n      }\n    }\n\n    if (\n      changedProperties.has('refreshKey') &&\n      !changedProperties.has('endpoint')\n    ) {\n      this.refreshTop();\n    }\n\n    if (changedProperties.has('mostRecentItem') && this.mostRecentItem) {\n      this.fireCustomEvent(CustomEventType.Refreshed);\n    }\n\n    if (changedProperties.has('cursorIndex')) {\n      if (this.cursorIndex > -1) {\n        this.selected = this.items[this.cursorIndex];\n        this.handleSelected(this.selected);\n      }\n    }\n\n    if (changedProperties.has('items')) {\n      //\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  public handleSelected(selected: any) {\n    const evt = new Event('change', { bubbles: true });\n    this.dispatchEvent(evt);\n  }\n\n  private getValue(obj: any): any {\n    if (!obj) {\n      return null;\n    }\n\n    const path = this.valueKey.split('.');\n    let current = obj;\n    while (path.length > 0) {\n      const key = path.shift();\n      current = current[key];\n    }\n    return current;\n  }\n\n  public setSelection(value: string) {\n    const index = this.items.findIndex(item => {\n      return this.getValue(item) === value;\n    });\n    this.cursorIndex = index;\n    this.selected = this.items[index];\n    const evt = new Event('change', { bubbles: true });\n    this.dispatchEvent(evt);\n  }\n\n  public getItemIndex(value: string) {\n    return this.items.findIndex(option => this.getValue(option) === value);\n  }\n\n  public removeItem(value: string) {\n    const index = this.getItemIndex(value);\n    this.items.splice(index, 1);\n    this.items = [...this.items];\n\n    // if we were at the end, move us down\n    this.cursorIndex = Math.max(\n      0,\n      Math.min(this.items.length - 1, this.cursorIndex - 1)\n    );\n\n    // request a change even if it is the same, the item is different\n    this.requestUpdate('cursorIndex');\n    this.requestUpdate('items');\n  }\n\n  public getSelection(): any {\n    return this.selected;\n  }\n\n  public refresh(): void {\n    this.refreshKey = 'requested_' + new Date().getTime();\n  }\n\n  public setEndpoint(endpoint: string, nextSelection: any = null) {\n    this.endpoint = endpoint;\n    this.nextSelection = nextSelection;\n  }\n\n  public getRefreshEndpoint() {\n    return this.endpoint;\n  }\n\n  /**\n   * Refreshes the first page, updating any found items in our list\n   */\n  private async refreshTop(): Promise<void> {\n    const refreshEndpoint = this.getRefreshEndpoint();\n    if (!refreshEndpoint) {\n      return;\n    }\n\n    // cancel any outstanding requests\n    while (this.pending.length > 0) {\n      const pending = this.pending.pop();\n      pending.abort();\n    }\n\n    const controller = new AbortController();\n    this.pending.push(controller);\n\n    const prevItem = this.items[this.cursorIndex];\n\n    try {\n      const page = await fetchResultsPage(\n        this.getRefreshEndpoint(),\n        controller\n      );\n\n      const items = [...this.items];\n      // remove any dupes already in our list\n      if (page.results) {\n        page.results.forEach((newOption: any) => {\n          if (this.sanitizeOption) {\n            this.sanitizeOption(newOption);\n          }\n          const newValue = this.getValue(newOption);\n          const removeIndex = items.findIndex(\n            option => this.getValue(option) === newValue\n          );\n\n          if (removeIndex > -1) {\n            items.splice(removeIndex, 1);\n          }\n        });\n\n        // insert our new items at the front\n        let results = page.results;\n        if (this.reverseRefresh) {\n          results = page.results.reverse();\n        }\n        const newItems = [...results, ...items];\n\n        const topItem = newItems[0];\n        if (\n          !this.mostRecentItem ||\n          JSON.stringify(this.mostRecentItem) !== JSON.stringify(topItem)\n        ) {\n          this.mostRecentItem = topItem;\n        }\n\n        if (prevItem) {\n          const newItem = newItems[this.cursorIndex];\n          const prevValue = this.getValue(prevItem);\n          if (prevValue !== this.getValue(newItem)) {\n            const newIndex = newItems.findIndex(\n              option => this.getValue(option) === prevValue\n            );\n            this.cursorIndex = newIndex;\n\n            // make sure our focused item is visible\n            window.setTimeout(() => {\n              const options = this.shadowRoot.querySelector('temba-options');\n              if (options) {\n                const option =\n                  options.shadowRoot.querySelector('.option.focused');\n                option.scrollIntoView({ block: 'end', inline: 'nearest' });\n              }\n            }, 0);\n          }\n        }\n\n        this.items = newItems;\n      }\n    } catch (error) {\n      console.error(error);\n    }\n  }\n\n  private async fetchItems(): Promise<void> {\n    // cancel any outstanding requests\n    while (this.pending.length > 0) {\n      const pending = this.pending.pop();\n      pending.abort();\n    }\n\n    let endpoint = this.endpoint;\n    let pagesToFetch = this.pages || 1;\n    let pages = 0;\n    let nextPage = null;\n\n    let fetchedItems: any[] = [];\n\n    while (pagesToFetch > 0 && endpoint) {\n      const controller = new AbortController();\n      this.pending.push(controller);\n\n      try {\n        const page = await fetchResultsPage(endpoint, controller);\n\n        // sanitize our options if necessary\n        if (this.sanitizeOption) {\n          page.results.forEach(this.sanitizeOption);\n        }\n\n        if (page.results) {\n          fetchedItems = fetchedItems.concat(page.results);\n        }\n\n        // save our next pages\n        nextPage = page.next;\n        endpoint = nextPage;\n        pagesToFetch--;\n        pages++;\n      } catch (error) {\n        // aborted\n        this.reset();\n        console.log(error);\n        return;\n      }\n\n      this.nextPage = nextPage;\n    }\n    this.pages = pages;\n\n    const topItem = fetchedItems[0];\n    if (\n      !this.mostRecentItem ||\n      JSON.stringify(this.mostRecentItem) !== JSON.stringify(topItem)\n    ) {\n      this.mostRecentItem = topItem;\n    }\n\n    // see if our cursor needs to move to stay on the same item\n    const newItem = fetchedItems[this.cursorIndex];\n\n    if (\n      !this.nextSelection &&\n      this.selected &&\n      newItem &&\n      this.getValue(newItem) !== this.getValue(this.selected)\n    ) {\n      const index = fetchedItems.findIndex(item => {\n        return this.getValue(item) === this.getValue(this.selected);\n      });\n\n      // old selection is in the new fetch\n      if (index > -1) {\n        this.cursorIndex = index;\n      }\n      // old selection is missing from the new fetch\n      else {\n        // if our index didn't change, our item still did, fire change\n        if (this.cursorIndex === 0) {\n          this.requestUpdate('cursorIndex');\n        }\n        // otherwise select the first item\n        else {\n          this.cursorIndex = 0;\n        }\n      }\n    }\n\n    // save our results\n    this.items = fetchedItems;\n    this.loading = false;\n    this.pending = [];\n\n    if (this.nextSelection) {\n      this.setSelection(this.nextSelection);\n      this.nextSelection = false;\n    } else {\n      if (this.cursorIndex === -1) {\n        this.cursorIndex = 0;\n      }\n    }\n\n    // TODO: Not sure why this is needed\n    // this.requestUpdate('cursorIndex');\n\n    if (this.value) {\n      this.setSelection(this.value);\n      this.value = null;\n    }\n\n    return Promise.resolve();\n  }\n\n  private handleScrollThreshold() {\n    if (this.nextPage && !this.loading) {\n      this.loading = true;\n      fetchResultsPage(this.nextPage).then((page: ResultsPage) => {\n        if (this.sanitizeOption) {\n          page.results.forEach(this.sanitizeOption);\n        }\n\n        this.items = [...this.items, ...page.results];\n        this.nextPage = page.next;\n        this.pages++;\n        this.loading = false;\n      });\n    }\n  }\n\n  public renderHeader(): TemplateResult {\n    return null;\n  }\n\n  public renderFooter(): TemplateResult {\n    return null;\n  }\n\n  public getListStyle() {\n    return '';\n  }\n\n  protected handleSelection(event: CustomEvent) {\n    const { selected, index } = event.detail;\n\n    this.selected = selected;\n    this.cursorIndex = index;\n\n    event.stopPropagation();\n    event.preventDefault();\n  }\n\n  public render(): TemplateResult {\n    return html`\n      ${this.renderHeader()}\n      <temba-options\n        style=\"${this.getListStyle()}\"\n        ?visible=${true}\n        ?block=${true}\n        ?hideShadow=${this.hideShadow}\n        ?collapsed=${this.collapsed}\n        ?loading=${this.loading}\n        ?internalFocusDisabled=${this.internalFocusDisabled}\n        .renderOption=${this.renderOption}\n        .renderOptionDetail=${this.renderOptionDetail}\n        @temba-scroll-threshold=${this.handleScrollThreshold}\n        @temba-selection=${this.handleSelection.bind(this)}\n        .options=${this.items}\n        .cursorIndex=${this.cursorIndex}\n      >\n        <slot></slot>\n      </temba-options>\n      ${this.renderFooter()}\n    `;\n  }\n}\n"]}
+{"version":3,"file":"TembaList.js","sourceRoot":"","sources":["../../../src/list/TembaList.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { Store } from '../store/Store';\nimport { fetchResultsPage, ResultsPage } from '../utils';\n\nconst DEFAULT_REFRESH = 10000;\n\nexport class TembaList extends RapidElement {\n  @property({ type: Array, attribute: false })\n  items: any[] = [];\n\n  @property({ type: Object, attribute: false })\n  selected: any;\n\n  @property({ type: Number })\n  cursorIndex = -1;\n\n  @property({ type: String })\n  endpoint: string;\n\n  @property({ type: String })\n  nextSelection: any;\n\n  @property({ type: Number })\n  tabIndex = 1;\n\n  @property({ type: String })\n  valueKey = 'id';\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: Boolean })\n  loading = false;\n\n  @property({ type: Boolean })\n  collapsed: boolean;\n\n  @property({ type: Boolean })\n  hideShadow: boolean;\n\n  @property({ type: Boolean })\n  paused = false;\n\n  @property({ type: Boolean })\n  internalFocusDisabled = false;\n\n  @property({ attribute: false })\n  getNextRefresh: (firstOption: any) => any;\n\n  @property({ attribute: false })\n  sanitizeOption: (option: any) => any;\n\n  @property({ attribute: false })\n  renderOption: (option: any, selected: boolean) => TemplateResult;\n\n  @property({ attribute: false })\n  renderOptionDetail: (option: any, selected: boolean) => TemplateResult;\n\n  @property({ attribute: false, type: Object })\n  mostRecentItem: any;\n\n  // changes to the refresh key force a refresh\n  @property({ type: String })\n  refreshKey = '0';\n\n  reverseRefresh = true;\n\n  // our next page from our endpoint\n  nextPage: string = null;\n\n  pages = 0;\n  clearRefreshTimeout: any;\n  pending: AbortController[] = [];\n\n  store: Store;\n\n  // used for testing only\n  preserve: boolean;\n\n  static get styles() {\n    return css`\n      temba-options {\n        display: block;\n        width: 100%;\n        flex-grow: 1;\n      }\n    `;\n  }\n\n  constructor() {\n    super();\n    this.store = document.querySelector('temba-store') as Store;\n    this.handleSelection.bind(this);\n  }\n\n  private reset(): void {\n    this.selected = null;\n    this.nextPage = null;\n    this.cursorIndex = -1;\n    this.mostRecentItem = null;\n    this.items = [];\n  }\n\n  refreshInterval = null;\n\n  public connectedCallback() {\n    super.connectedCallback();\n    this.refreshInterval = setInterval(() => {\n      if (!this.paused) {\n        this.refreshKey = 'default_' + new Date().getTime();\n      }\n    }, DEFAULT_REFRESH);\n  }\n\n  public disconnectedCallback() {\n    clearInterval(this.refreshInterval);\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('endpoint') && this.endpoint) {\n      this.reset();\n      this.loading = true;\n      this.fetchItems();\n    }\n\n    if (changedProperties.has('loading')) {\n      if (!this.loading) {\n        this.fireCustomEvent(CustomEventType.FetchComplete);\n      }\n    }\n\n    if (\n      changedProperties.has('refreshKey') &&\n      !changedProperties.has('endpoint')\n    ) {\n      this.refreshTop();\n    }\n\n    if (changedProperties.has('mostRecentItem') && this.mostRecentItem) {\n      this.fireCustomEvent(CustomEventType.Refreshed);\n    }\n\n    if (changedProperties.has('cursorIndex')) {\n      if (this.cursorIndex > -1) {\n        this.selected = this.items[this.cursorIndex];\n        this.handleSelected(this.selected);\n      }\n    }\n\n    if (changedProperties.has('items')) {\n      //\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  public handleSelected(selected: any) {\n    const evt = new Event('change', { bubbles: true });\n    this.dispatchEvent(evt);\n  }\n\n  private getValue(obj: any): any {\n    if (!obj) {\n      return null;\n    }\n\n    const path = this.valueKey.split('.');\n    let current = obj;\n    while (path.length > 0) {\n      const key = path.shift();\n      current = current[key];\n    }\n    return current;\n  }\n\n  public setSelection(value: string) {\n    const index = this.items.findIndex(item => {\n      return this.getValue(item) === value;\n    });\n    this.cursorIndex = index;\n    this.selected = this.items[index];\n    const evt = new Event('change', { bubbles: true });\n    this.dispatchEvent(evt);\n  }\n\n  public getItemIndex(value: string) {\n    return this.items.findIndex(option => this.getValue(option) === value);\n  }\n\n  public removeItem(value: string) {\n    const index = this.getItemIndex(value);\n    this.items.splice(index, 1);\n    this.items = [...this.items];\n\n    // if we were at the end, move us down\n    this.cursorIndex = Math.max(\n      0,\n      Math.min(this.items.length - 1, this.cursorIndex - 1)\n    );\n\n    // request a change even if it is the same, the item is different\n    this.requestUpdate('cursorIndex');\n    this.requestUpdate('items');\n  }\n\n  public getSelection(): any {\n    return this.selected;\n  }\n\n  public refresh(): void {\n    this.refreshKey = 'requested_' + new Date().getTime();\n  }\n\n  public setEndpoint(endpoint: string, nextSelection: any = null) {\n    this.endpoint = endpoint;\n    this.nextSelection = nextSelection;\n  }\n\n  public getRefreshEndpoint() {\n    return this.endpoint;\n  }\n\n  /**\n   * Refreshes the first page, updating any found items in our list\n   */\n  private async refreshTop(): Promise<void> {\n    const refreshEndpoint = this.getRefreshEndpoint();\n    if (!refreshEndpoint) {\n      return;\n    }\n\n    // cancel any outstanding requests\n    while (this.pending.length > 0) {\n      const pending = this.pending.pop();\n      pending.abort();\n    }\n\n    const controller = new AbortController();\n    this.pending.push(controller);\n\n    const prevItem = this.items[this.cursorIndex];\n\n    try {\n      const page = await fetchResultsPage(\n        this.getRefreshEndpoint(),\n        controller\n      );\n\n      const items = [...this.items];\n      // remove any dupes already in our list\n      if (page.results) {\n        page.results.forEach((newOption: any) => {\n          if (this.sanitizeOption) {\n            this.sanitizeOption(newOption);\n          }\n          const newValue = this.getValue(newOption);\n          const removeIndex = items.findIndex(\n            option => this.getValue(option) === newValue\n          );\n\n          if (removeIndex > -1) {\n            items.splice(removeIndex, 1);\n          }\n        });\n\n        // insert our new items at the front\n        let results = page.results;\n        if (this.reverseRefresh) {\n          results = page.results.reverse();\n        }\n        const newItems = [...results, ...items];\n\n        const topItem = newItems[0];\n        if (\n          !this.mostRecentItem ||\n          JSON.stringify(this.mostRecentItem) !== JSON.stringify(topItem)\n        ) {\n          this.mostRecentItem = topItem;\n        }\n\n        if (prevItem) {\n          const newItem = newItems[this.cursorIndex];\n          const prevValue = this.getValue(prevItem);\n          if (prevValue !== this.getValue(newItem)) {\n            const newIndex = newItems.findIndex(\n              option => this.getValue(option) === prevValue\n            );\n            this.cursorIndex = newIndex;\n\n            // make sure our focused item is visible\n            window.setTimeout(() => {\n              const options = this.shadowRoot.querySelector('temba-options');\n              if (options) {\n                const option =\n                  options.shadowRoot.querySelector('.option.focused');\n                option.scrollIntoView({ block: 'end', inline: 'nearest' });\n              }\n            }, 0);\n          }\n        }\n\n        this.items = newItems;\n      }\n    } catch (error) {\n      console.error(error);\n    }\n  }\n\n  private async fetchItems(): Promise<void> {\n    // cancel any outstanding requests\n    while (this.pending.length > 0) {\n      const pending = this.pending.pop();\n      pending.abort();\n    }\n\n    let endpoint = this.endpoint;\n    let pagesToFetch = this.pages || 1;\n    let pages = 0;\n    let nextPage = null;\n\n    let fetchedItems: any[] = [];\n\n    while (pagesToFetch > 0 && endpoint) {\n      const controller = new AbortController();\n      this.pending.push(controller);\n\n      try {\n        const page = await fetchResultsPage(endpoint, controller);\n\n        // sanitize our options if necessary\n        if (this.sanitizeOption) {\n          page.results.forEach(this.sanitizeOption);\n        }\n\n        if (page.results) {\n          fetchedItems = fetchedItems.concat(page.results);\n        }\n\n        // save our next pages\n        nextPage = page.next;\n        endpoint = nextPage;\n        pagesToFetch--;\n        pages++;\n      } catch (error) {\n        // aborted\n        this.reset();\n        console.log(error);\n        return;\n      }\n\n      this.nextPage = nextPage;\n    }\n    this.pages = pages;\n\n    const topItem = fetchedItems[0];\n    if (\n      !this.mostRecentItem ||\n      JSON.stringify(this.mostRecentItem) !== JSON.stringify(topItem)\n    ) {\n      this.mostRecentItem = topItem;\n    }\n\n    // see if our cursor needs to move to stay on the same item\n    const newItem = fetchedItems[this.cursorIndex];\n\n    if (\n      !this.nextSelection &&\n      this.selected &&\n      newItem &&\n      this.getValue(newItem) !== this.getValue(this.selected)\n    ) {\n      const index = fetchedItems.findIndex(item => {\n        return this.getValue(item) === this.getValue(this.selected);\n      });\n\n      // old selection is in the new fetch\n      if (index > -1) {\n        this.cursorIndex = index;\n      }\n      // old selection is missing from the new fetch\n      else {\n        // if our index didn't change, our item still did, fire change\n        if (this.cursorIndex === 0) {\n          this.requestUpdate('cursorIndex');\n        }\n        // otherwise select the first item\n        else {\n          this.cursorIndex = 0;\n        }\n      }\n    }\n\n    // save our results\n    this.items = fetchedItems;\n    this.loading = false;\n    this.pending = [];\n\n    if (this.nextSelection) {\n      this.setSelection(this.nextSelection);\n      this.nextSelection = false;\n    } else {\n      if (this.cursorIndex === -1 && !this.isMobile()) {\n        this.cursorIndex = 0;\n      }\n    }\n\n    // TODO: Not sure why this is needed\n    // this.requestUpdate('cursorIndex');\n\n    if (this.value) {\n      this.setSelection(this.value);\n      this.value = null;\n    } else if (this.isMobile() && !this.selected) {\n      this.cursorIndex = -1;\n      this.value = null;\n      this.selected = null;\n      const evt = new Event('change', { bubbles: true });\n      this.dispatchEvent(evt);\n    }\n\n    return Promise.resolve();\n  }\n\n  private handleScrollThreshold() {\n    if (this.nextPage && !this.loading) {\n      this.loading = true;\n      fetchResultsPage(this.nextPage).then((page: ResultsPage) => {\n        if (this.sanitizeOption) {\n          page.results.forEach(this.sanitizeOption);\n        }\n\n        this.items = [...this.items, ...page.results];\n        this.nextPage = page.next;\n        this.pages++;\n        this.loading = false;\n      });\n    }\n  }\n\n  public renderHeader(): TemplateResult {\n    return null;\n  }\n\n  public renderFooter(): TemplateResult {\n    return null;\n  }\n\n  public getListStyle() {\n    return '';\n  }\n\n  protected handleSelection(event: CustomEvent) {\n    const { selected, index } = event.detail;\n\n    this.selected = selected;\n    this.cursorIndex = index;\n\n    event.stopPropagation();\n    event.preventDefault();\n  }\n\n  public render(): TemplateResult {\n    return html`\n      ${this.renderHeader()}\n      <temba-options\n        style=\"${this.getListStyle()}\"\n        ?visible=${true}\n        ?block=${true}\n        ?hideShadow=${this.hideShadow}\n        ?collapsed=${this.collapsed}\n        ?loading=${this.loading}\n        ?internalFocusDisabled=${this.internalFocusDisabled}\n        .renderOption=${this.renderOption}\n        .renderOptionDetail=${this.renderOptionDetail}\n        @temba-scroll-threshold=${this.handleScrollThreshold}\n        @temba-selection=${this.handleSelection.bind(this)}\n        .options=${this.items}\n        .cursorIndex=${this.cursorIndex}\n      >\n        <slot></slot>\n      </temba-options>\n      ${this.renderFooter()}\n    `;\n  }\n}\n"]}

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

@@ -305,13 +305,17 @@ export class TembaMenu extends ResizeElement {
       }
 
       .mobile.root {
-        height: 100vh;
+        height: 100svh;
       }
 
       .mobile.root.fully-collapsed {
         height: initial;
       }
 
+      .root.fully-collapsed.mobile .level.level-0 {
+        padding-right: 0.5em;
+      }
+
       .root.fully-collapsed.mobile .level.level-0 {
         flex-direction: row;
       }
@@ -728,7 +732,6 @@ export class TembaMenu extends ResizeElement {
           arrowoffset="8"
           arrowSize="0"
           drop_align="left"
-          mask
           id="dd-${menuItem.id}"
         >
           <div slot="toggle">${item}</div>