@nyaruka/temba-components 0.75.1 → 0.75.3

package/src/dialog/Dialog.ts

@@ -53,6 +53,19 @@ export class Dialog extends ResizeElement {
         height: 100vh;
       }
 
+      .mobile .flex {
+        height: 100%;
+        position: fixed;
+      }
+
+      .mobile .grow-top {
+        flex-grow: 0;
+      }
+
+      .mobile .grow-bottom {
+        flex-grow: 0;
+      }
+
       .grow-top {
         flex-grow: 1;
       }
@@ -77,6 +90,10 @@ export class Dialog extends ResizeElement {
         pointer-events: none;
       }
 
+      .mobile.dialog-mask .dialog-container {
+        border-radius: 0px;
+      }
+
       .dialog-mask .dialog-container {
         position: relative;
         transition: transform var(--transition-speed) var(--bounce),
@@ -425,6 +442,7 @@ export class Dialog extends ResizeElement {
           'dialog-loading': this.loading,
           'dialog-animation-end': this.animationEnd,
           'dialog-ready': this.ready,
+          mobile: this.isMobile(),
         })}"
       >
         <div style="position: absolute; width: 100%;">
@@ -446,9 +464,7 @@ export class Dialog extends ResizeElement {
             class="dialog-container"
           >
             ${header}
-            <div class="dialog-body" @keypress=${this.handleKeyUp} ${
-      this.isMobile() ? 'flex-grow:1;max-height:""' : ''
-    } >
+            <div class="dialog-body" @keypress=${this.handleKeyUp}>
               ${this.body ? this.body : html`<slot></slot>`}
               <temba-loading units="6" size="8"></temba-loading>
             </div>
@@ -473,9 +489,7 @@ export class Dialog extends ResizeElement {
               )}
               </div>
             </div>
-            <div class="grow-bottom" style="${
-              this.isMobile() ? 'flex-grow:0' : ''
-            }"></div>
+            <div class="grow-bottom"></div>
           </div>
         </div>
       </div>

package/src/dropdown/Dropdown.ts

@@ -2,6 +2,7 @@ import { css, html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 import { getClasses } from '../utils';
+import { ContactStoreElement } from '../contacts/ContactStoreElement';
 
 export class Dropdown extends RapidElement {
   static get styles() {
@@ -111,6 +112,11 @@ export class Dropdown extends RapidElement {
   @property({ type: Boolean })
   mask = false;
 
+  constructor() {
+    super();
+    this.ensureOnScreen = this.ensureOnScreen.bind(this);
+  }
+
   public firstUpdated(props: any) {
     super.firstUpdated(props);
 
@@ -161,44 +167,49 @@ 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);
     }
   }
 
   public ensureOnScreen() {
-    window.setTimeout(() => {
-      const dropdown = this.shadowRoot.querySelector(
-        '.dropdown'
-      ) as HTMLDivElement;
+    const dropdown = this.shadowRoot.querySelector(
+      '.dropdown'
+    ) as HTMLDivElement;
 
-      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';
-          }
-        } 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 = '';
-          }
-        }
+    if (dropdown) {
+      // dropdown will go off the screen, let's push it up
+      const toggle = this.querySelector('div[slot="toggle"]');
 
-        if (dropdown.getBoundingClientRect().right > window.innerWidth) {
-          dropdown.style.left = '';
-          dropdown.style.right = 0 + 'px';
-        } else if (dropdown.getBoundingClientRect().left < 0) {
-          dropdown.style.left = 0 + 'px';
-          dropdown.style.right = '';
+      if (!toggle) {
+        return;
+      }
+
+      if (dropdown.getBoundingClientRect().bottom > window.innerHeight - 100) {
+        if (this.bottom) {
+          dropdown.style.top = toggle.clientHeight + 'px';
+        } else {
+          dropdown.style.top = '';
+          dropdown.style.bottom = 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 = '';
         }
       }
-    }, 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 = '';
+      }
+    }
   }
 
   public handleToggleClicked(event: MouseEvent): void {

package/src/lightbox/Lightbox.ts

@@ -21,8 +21,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;
       }
 
@@ -80,7 +80,6 @@ export class Lightbox extends RapidElement {
 
   public showElement(ele: HTMLElement) {
     // size our matte according to the ele's boundaries
-    console.log(ele);
     const bounds = ele.getBoundingClientRect();
     this.ele = ele.cloneNode() as HTMLElement;
     this.left = bounds.left;

package/src/list/TembaList.ts

@@ -403,7 +403,7 @@ export class TembaList extends RapidElement {
       this.setSelection(this.nextSelection);
       this.nextSelection = false;
     } else {
-      if (this.cursorIndex === -1) {
+      if (this.cursorIndex === -1 && !this.isMobile()) {
         this.cursorIndex = 0;
       }
     }
@@ -414,6 +414,12 @@ export class TembaList extends RapidElement {
     if (this.value) {
       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();

package/src/list/TembaMenu.ts

@@ -348,13 +348,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;
       }
@@ -1159,7 +1163,6 @@ export class TembaMenu extends ResizeElement {
           arrowoffset="8"
           arrowSize="0"
           drop_align="left"
-          mask
           id="dd-${menuItem.id}"
         >
           <div slot="toggle">${item}</div>

package/src/vectoricon/index.ts

@@ -1,5 +1,5 @@
 // for cache busting we dynamically generate a fingerprint, use yarn svg to update
-export const SVG_FINGERPRINT = 'e1e2e60148b356e01cbc9f97dc0253dd';
+export const SVG_FINGERPRINT = '96c407ade55885693432afd343de1cc0';
 
 // only icons below are included in the sprite sheet
 export enum Icon {
@@ -16,7 +16,7 @@ export enum Icon {
   arrow_left = 'chevron-left',
   arrow_right = 'chevron-right',
   attachment = 'paperclip',
-  attachment_audio = 'volume~--min',
+  attachment_audio = 'volume-min',
   attachment_document = 'file-06',
   attachment_image = 'image-01',
   attachment_location = 'marker-pin-01',