@nyaruka/temba-components 0.86.1 → 0.88.0

package/out-tsc/src/thumbnail/Thumbnail.js

@@ -36,7 +36,7 @@ export class Thumbnail extends RapidElement {
       }
     `;
     }
-    handleClick(evt) {
+    handleClick() {
         window.setTimeout(() => {
             const lightbox = document.querySelector('temba-lightbox');
             lightbox.showElement(this);
@@ -50,7 +50,7 @@ export class Thumbnail extends RapidElement {
           style=${styleMap({
                 background: 'red',
                 borderRadius: '0',
-                boxShadow: 'var(--widget-box-shadow)',
+                boxShadow: 'var(--widget-box-shadow)'
             })}
         >
           <div
@@ -68,7 +68,7 @@ export class Thumbnail extends RapidElement {
                 alignItems: 'center',
                 justifyContent: 'center',
                 fontWeight: '400',
-                color: '#bbb',
+                color: '#bbb'
             })}
           >
             ${this.label}
@@ -82,7 +82,7 @@ export class Thumbnail extends RapidElement {
                 padding: 'var(--thumb-padding, 0.4em)',
                 background: '#fff',
                 borderRadius: 'var(--curvature)',
-                boxShadow: 'var(--widget-box-shadow)',
+                boxShadow: 'var(--widget-box-shadow)'
             })}">
 
           <div class="thumb" style=${styleMap({
@@ -97,7 +97,7 @@ export class Thumbnail extends RapidElement {
                 alignItems: 'center',
                 justifyContent: 'center',
                 fontWeight: '400',
-                color: '#bbb',
+                color: '#bbb'
             })}>
             ${this.label}
             </div>

package/out-tsc/src/thumbnail/Thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail.js","sourceRoot":"","sources":["../../../src/thumbnail/Thumbnail.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;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAE5D,MAAM,OAAO,SAAU,SAAQ,YAAY;IAA3C;;QAmCE,SAAI,GAAG,IAAI,CAAC;QAGZ,YAAO,GAAG,KAAK,CAAC;IAyElB,CAAC;IA9GC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;KAuBT,CAAC;IACJ,CAAC;IAcM,WAAW,CAAC,GAAe;QAChC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACrB,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAa,CAAC;YACtE,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAC7B,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC;IAEM,MAAM;QACX,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO,IAAI,CAAA;;mBAEE,UAAU,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kBAC9B,QAAQ,CAAC;gBACf,UAAU,EAAE,KAAK;gBACjB,YAAY,EAAE,GAAG;gBACjB,SAAS,EAAE,0BAA0B;aACtC,CAAC;;;;oBAIQ,QAAQ,CAAC;gBACf,eAAe,EAAE,OAAO,IAAI,CAAC,GAAG,GAAG;gBACnC,cAAc,EAAE,SAAS;gBACzB,kBAAkB,EAAE,QAAQ;gBAC5B,gBAAgB,EAAE,WAAW;gBAC7B,SAAS,EAAE,wBAAwB;gBACnC,MAAM,EAAE,wBAAwB;gBAChC,KAAK,EAAE,wBAAwB;gBAC/B,YAAY,EAAE,GAAG;gBAEjB,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,cAAc,EAAE,QAAQ;gBACxB,UAAU,EAAE,KAAK;gBACjB,KAAK,EAAE,MAAM;aACd,CAAC;;cAEA,IAAI,CAAC,KAAK;;;OAGjB,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAA;oBACG,UAAU,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,WAAW,QAAQ,CAAC;gBAC7D,OAAO,EAAE,6BAA6B;gBACtC,UAAU,EAAE,MAAM;gBAClB,YAAY,EAAE,kBAAkB;gBAChC,SAAS,EAAE,0BAA0B;aACtC,CAAC;;qCAE6B,QAAQ,CAAC;gBAClC,eAAe,EAAE,OAAO,IAAI,CAAC,GAAG,GAAG;gBACnC,cAAc,EAAE,OAAO;gBACvB,kBAAkB,EAAE,QAAQ;gBAC5B,SAAS,EAAE,wBAAwB;gBACnC,MAAM,EAAE,wBAAwB;gBAChC,KAAK,EAAE,wBAAwB;gBAC/B,YAAY,EAAE,kBAAkB;gBAEhC,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,cAAc,EAAE,QAAQ;gBACxB,UAAU,EAAE,KAAK;gBACjB,KAAK,EAAE,MAAM;aACd,CAAC;cACE,IAAI,CAAC,KAAK;;;KAGnB,CAAC;QACF,CAAC;IACH,CAAC;CACF;AAlFC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCAChB;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACZ","sourcesContent":["import { css, html } from 'lit';\nimport { RapidElement } from '../RapidElement';\nimport { property } from 'lit/decorators.js';\nimport { getClasses } from '../utils';\nimport { Lightbox } from '../lightbox/Lightbox';\nimport { styleMap } from 'lit-html/directives/style-map.js';\n\nexport class Thumbnail extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        display: inline-block;\n      }\n\n      .zooming.wrapper {\n        padding: 0 !important;\n        border-radius: 0;\n      }\n\n      .zooming .thumb {\n        border-radius: 0;\n      }\n\n      .wrapper {\n        padding: var(--thumb-padding, 0.4em);\n        background: #fff;\n        border-radius: var(--curvature);\n        box-shadow: var(--widget-box-shadow);\n      }\n\n      .thumb {\n      }\n    `;\n  }\n\n  @property({ type: String })\n  url: string;\n\n  @property({ type: String })\n  label: string;\n\n  @property({ type: Boolean })\n  zoom = true;\n\n  @property({ type: Boolean })\n  zooming = false;\n\n  public handleClick(evt: MouseEvent) {\n    window.setTimeout(() => {\n      const lightbox = document.querySelector('temba-lightbox') as Lightbox;\n      lightbox.showElement(this);\n    }, 0);\n  }\n\n  public render() {\n    if (this.zooming) {\n      return html`\n        <div\n          class=\"${getClasses({ wrapper: true })}\"\n          style=${styleMap({\n            background: 'red',\n            borderRadius: '0',\n            boxShadow: 'var(--widget-box-shadow)',\n          })}\n        >\n          <div\n            class=\"thumb\"\n            style=${styleMap({\n              backgroundImage: `url(${this.url})`,\n              backgroundSize: 'contain',\n              backgroundPosition: 'center',\n              backgroundRepeat: 'no-repeat',\n              maxHeight: 'var(--thumb-size, 4em)',\n              height: 'var(--thumb-size, 4em)',\n              width: 'var(--thumb-size, 4em)',\n              borderRadius: '0',\n\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              fontWeight: '400',\n              color: '#bbb',\n            })}\n          >\n            ${this.label}\n          </div>\n        </div>\n      `;\n    } else {\n      return html`\n      <div class=\"${getClasses({ wrapper: true })}\" style=${styleMap({\n        padding: 'var(--thumb-padding, 0.4em)',\n        background: '#fff',\n        borderRadius: 'var(--curvature)',\n        boxShadow: 'var(--widget-box-shadow)',\n      })}\">\n\n          <div class=\"thumb\" style=${styleMap({\n            backgroundImage: `url(${this.url})`,\n            backgroundSize: 'cover',\n            backgroundPosition: 'center',\n            maxHeight: 'var(--thumb-size, 4em)',\n            height: 'var(--thumb-size, 4em)',\n            width: 'var(--thumb-size, 4em)',\n            borderRadius: 'var(--curvature)',\n\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            fontWeight: '400',\n            color: '#bbb',\n          })}>\n            ${this.label}\n            </div>\n      </div>\n    `;\n    }\n  }\n}\n"]}
+{"version":3,"file":"Thumbnail.js","sourceRoot":"","sources":["../../../src/thumbnail/Thumbnail.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;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAE5D,MAAM,OAAO,SAAU,SAAQ,YAAY;IAA3C;;QAmCE,SAAI,GAAG,IAAI,CAAC;QAGZ,YAAO,GAAG,KAAK,CAAC;IAyElB,CAAC;IA9GC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;KAuBT,CAAC;IACJ,CAAC;IAcM,WAAW;QAChB,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACrB,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAa,CAAC;YACtE,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAC7B,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC;IAEM,MAAM;QACX,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO,IAAI,CAAA;;mBAEE,UAAU,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kBAC9B,QAAQ,CAAC;gBACf,UAAU,EAAE,KAAK;gBACjB,YAAY,EAAE,GAAG;gBACjB,SAAS,EAAE,0BAA0B;aACtC,CAAC;;;;oBAIQ,QAAQ,CAAC;gBACf,eAAe,EAAE,OAAO,IAAI,CAAC,GAAG,GAAG;gBACnC,cAAc,EAAE,SAAS;gBACzB,kBAAkB,EAAE,QAAQ;gBAC5B,gBAAgB,EAAE,WAAW;gBAC7B,SAAS,EAAE,wBAAwB;gBACnC,MAAM,EAAE,wBAAwB;gBAChC,KAAK,EAAE,wBAAwB;gBAC/B,YAAY,EAAE,GAAG;gBAEjB,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,cAAc,EAAE,QAAQ;gBACxB,UAAU,EAAE,KAAK;gBACjB,KAAK,EAAE,MAAM;aACd,CAAC;;cAEA,IAAI,CAAC,KAAK;;;OAGjB,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAA;oBACG,UAAU,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,WAAW,QAAQ,CAAC;gBAC7D,OAAO,EAAE,6BAA6B;gBACtC,UAAU,EAAE,MAAM;gBAClB,YAAY,EAAE,kBAAkB;gBAChC,SAAS,EAAE,0BAA0B;aACtC,CAAC;;qCAE6B,QAAQ,CAAC;gBAClC,eAAe,EAAE,OAAO,IAAI,CAAC,GAAG,GAAG;gBACnC,cAAc,EAAE,OAAO;gBACvB,kBAAkB,EAAE,QAAQ;gBAC5B,SAAS,EAAE,wBAAwB;gBACnC,MAAM,EAAE,wBAAwB;gBAChC,KAAK,EAAE,wBAAwB;gBAC/B,YAAY,EAAE,kBAAkB;gBAEhC,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,cAAc,EAAE,QAAQ;gBACxB,UAAU,EAAE,KAAK;gBACjB,KAAK,EAAE,MAAM;aACd,CAAC;cACE,IAAI,CAAC,KAAK;;;KAGnB,CAAC;QACF,CAAC;IACH,CAAC;CACF;AAlFC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCAChB;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACZ","sourcesContent":["import { css, html } from 'lit';\nimport { RapidElement } from '../RapidElement';\nimport { property } from 'lit/decorators.js';\nimport { getClasses } from '../utils';\nimport { Lightbox } from '../lightbox/Lightbox';\nimport { styleMap } from 'lit-html/directives/style-map.js';\n\nexport class Thumbnail extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        display: inline-block;\n      }\n\n      .zooming.wrapper {\n        padding: 0 !important;\n        border-radius: 0;\n      }\n\n      .zooming .thumb {\n        border-radius: 0;\n      }\n\n      .wrapper {\n        padding: var(--thumb-padding, 0.4em);\n        background: #fff;\n        border-radius: var(--curvature);\n        box-shadow: var(--widget-box-shadow);\n      }\n\n      .thumb {\n      }\n    `;\n  }\n\n  @property({ type: String })\n  url: string;\n\n  @property({ type: String })\n  label: string;\n\n  @property({ type: Boolean })\n  zoom = true;\n\n  @property({ type: Boolean })\n  zooming = false;\n\n  public handleClick() {\n    window.setTimeout(() => {\n      const lightbox = document.querySelector('temba-lightbox') as Lightbox;\n      lightbox.showElement(this);\n    }, 0);\n  }\n\n  public render() {\n    if (this.zooming) {\n      return html`\n        <div\n          class=\"${getClasses({ wrapper: true })}\"\n          style=${styleMap({\n            background: 'red',\n            borderRadius: '0',\n            boxShadow: 'var(--widget-box-shadow)'\n          })}\n        >\n          <div\n            class=\"thumb\"\n            style=${styleMap({\n              backgroundImage: `url(${this.url})`,\n              backgroundSize: 'contain',\n              backgroundPosition: 'center',\n              backgroundRepeat: 'no-repeat',\n              maxHeight: 'var(--thumb-size, 4em)',\n              height: 'var(--thumb-size, 4em)',\n              width: 'var(--thumb-size, 4em)',\n              borderRadius: '0',\n\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              fontWeight: '400',\n              color: '#bbb'\n            })}\n          >\n            ${this.label}\n          </div>\n        </div>\n      `;\n    } else {\n      return html`\n      <div class=\"${getClasses({ wrapper: true })}\" style=${styleMap({\n        padding: 'var(--thumb-padding, 0.4em)',\n        background: '#fff',\n        borderRadius: 'var(--curvature)',\n        boxShadow: 'var(--widget-box-shadow)'\n      })}\">\n\n          <div class=\"thumb\" style=${styleMap({\n            backgroundImage: `url(${this.url})`,\n            backgroundSize: 'cover',\n            backgroundPosition: 'center',\n            maxHeight: 'var(--thumb-size, 4em)',\n            height: 'var(--thumb-size, 4em)',\n            width: 'var(--thumb-size, 4em)',\n            borderRadius: 'var(--curvature)',\n\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            fontWeight: '400',\n            color: '#bbb'\n          })}>\n            ${this.label}\n            </div>\n      </div>\n    `;\n    }\n  }\n}\n"]}

package/out-tsc/src/tip/Tip.js

@@ -134,11 +134,11 @@ export class Tip extends RapidElement {
     render() {
         const tipStyle = {
             top: this.top ? `${this.top}px` : '0px',
-            left: this.left ? `${this.left}px` : '0px',
+            left: this.left ? `${this.left}px` : '0px'
         };
         const arrowStyle = {
             top: this.arrowTop ? `${this.arrowTop}px` : '0px',
-            left: this.arrowLeft ? `${this.arrowLeft}px` : '0px',
+            left: this.arrowLeft ? `${this.arrowLeft}px` : '0px'
         };
         if (this.width) {
             tipStyle.width = `${this.width}px`;
@@ -147,7 +147,7 @@ export class Tip extends RapidElement {
             tip: true,
             show: this.visible,
             top: this.poppedTop,
-            'hide-on-change': this.hideOnChange,
+            'hide-on-change': this.hideOnChange
         });
         return html `
       <div

package/out-tsc/src/tip/Tip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tip.js","sourceRoot":"","sources":["../../../src/tip/Tip.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { getCenter, getMiddle } from './helpers';\n\nexport class Tip extends RapidElement {\n  static get styles() {\n    return css`\n      .tip {\n        transition: opacity 200ms ease-in-out;\n        margin: 0px;\n        position: fixed;\n        opacity: 0;\n        background: #fff;\n        padding: 4px 8px;\n        pointer-events: none;\n        border-radius: var(--curvature-widget);\n        box-shadow: 0 1px 10px 10px rgba(0, 0, 0, 0.035),\n          0 1px 3px 0px rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n        font-size: 14px;\n        z-index: 10000;\n        color: #333;\n      }\n\n      .tip.hide-on-change {\n        transition: none;\n      }\n\n      .show {\n        opacity: 1;\n      }\n\n      .slot {\n        display: flex;\n        flex-direction: column;\n      }\n\n      .arrow {\n        position: absolute;\n        color: #fff;\n        font-size: 10px;\n        line-height: 0px;\n      }\n\n      .◀ {\n        text-shadow: -1px 2px 2px rgba(0, 0, 0, 0.1);\n      }\n\n      .▶ {\n        text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);\n      }\n\n      .▼ {\n        text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);\n      }\n\n      .▲ {\n        text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.1);\n      }\n    `;\n  }\n\n  @property({ type: String })\n  text: string;\n\n  @property({ type: Boolean })\n  visible = false;\n\n  @property({ type: String })\n  position = 'auto';\n\n  @property({ type: Boolean })\n  hideOnChange: boolean;\n\n  @property({ type: Number, attribute: false })\n  top: number;\n\n  @property({ type: Number, attribute: false })\n  left: number;\n\n  @property({ type: Number, attribute: false })\n  width: number;\n\n  @property({ type: Boolean, attribute: false })\n  poppedTop: boolean;\n\n  arrow: string;\n  arrowTop: number;\n  arrowLeft: number;\n  arrowDirection: string;\n\n  lastEnter = 0;\n  failSafe = 0;\n\n  public updated(changed: Map<string, any>) {\n    if ((changed.has('visible') || changed.has('text')) && this.visible) {\n      this.calculatePosition();\n    }\n\n    if (changed.has('text') && this.hideOnChange) {\n      this.visible = false;\n    }\n  }\n\n  private calculatePosition() {\n    if (this.visible) {\n      const tipBounds = this.getDiv('.tip').getBoundingClientRect();\n      const anchorBounds = this.getDiv('.slot').getBoundingClientRect();\n\n      // TODO: pick a direction automatically\n      let tipSide = this.position;\n      if (tipSide === 'auto') {\n        tipSide = 'left';\n      }\n\n      this.arrowLeft = 0;\n      this.arrowTop = 0;\n\n      if (tipSide === 'left') {\n        this.left = anchorBounds.left - tipBounds.width - 16;\n        this.top = getMiddle(anchorBounds, tipBounds);\n\n        // position our arrow\n        this.arrowTop = tipBounds.height / 2;\n        this.arrowLeft = tipBounds.width - 1;\n        this.arrow = '▶';\n      } else if (tipSide === 'right') {\n        this.left = anchorBounds.right + 12;\n        this.top = getMiddle(anchorBounds, tipBounds);\n\n        this.arrowTop = tipBounds.height / 2;\n        this.arrowLeft = -8;\n        this.arrow = '◀';\n      } else if (tipSide === 'top') {\n        this.top = anchorBounds.top - tipBounds.height - 12;\n        this.left = getCenter(anchorBounds, tipBounds);\n\n        this.arrowTop = tipBounds.height + 2;\n        this.arrowLeft = tipBounds.width / 2 - 4;\n        this.arrow = '▼';\n      } else if (tipSide === 'bottom') {\n        this.top = anchorBounds.bottom + 10;\n        this.left = getCenter(anchorBounds, tipBounds);\n\n        this.arrowTop = -2;\n        this.arrowLeft = tipBounds.width / 2 - 3;\n        this.arrow = '▲';\n      }\n    }\n  }\n\n  private handleMouseEnter() {\n    this.lastEnter = window.setTimeout(() => {\n      this.visible = true;\n      this.failSafe = window.setTimeout(() => {\n        this.visible = false;\n      }, 2000);\n    }, 600);\n  }\n\n  private handleMouseLeave() {\n    window.clearTimeout(this.lastEnter);\n    window.clearTimeout(this.failSafe);\n    this.visible = false;\n  }\n\n  public render(): TemplateResult {\n    const tipStyle: any = {\n      top: this.top ? `${this.top}px` : '0px',\n      left: this.left ? `${this.left}px` : '0px',\n    };\n\n    const arrowStyle: any = {\n      top: this.arrowTop ? `${this.arrowTop}px` : '0px',\n      left: this.arrowLeft ? `${this.arrowLeft}px` : '0px',\n    };\n\n    if (this.width) {\n      tipStyle.width = `${this.width}px`;\n    }\n\n    const classes = getClasses({\n      tip: true,\n      show: this.visible,\n      top: this.poppedTop,\n      'hide-on-change': this.hideOnChange,\n    });\n\n    return html`\n      <div\n        class=\"slot\"\n        @click=${this.handleMouseLeave}\n        @mouseenter=${this.handleMouseEnter}\n        @mouseleave=${this.handleMouseLeave}\n      >\n        <slot></slot>\n      </div>\n      <div class=\"${classes}\" style=${styleMap(tipStyle)}>\n        ${this.text}\n        <div class=\"arrow ${this.arrow}\" style=${styleMap(arrowStyle)}>\n          ${this.arrow}\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Tip.js","sourceRoot":"","sources":["../../../src/tip/Tip.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEjD,MAAM,OAAO,GAAI,SAAQ,YAAY;IAArC;;QA6DE,YAAO,GAAG,KAAK,CAAC;QAGhB,aAAQ,GAAG,MAAM,CAAC;QAsBlB,cAAS,GAAG,CAAC,CAAC;QACd,aAAQ,GAAG,CAAC,CAAC;IAiHf,CAAC;IAvMC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoDT,CAAC;IACJ,CAAC;IAkCM,OAAO,CAAC,OAAyB;QACtC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACpE,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YAC7C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC;IACH,CAAC;IAEO,iBAAiB;QACvB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,qBAAqB,EAAE,CAAC;YAC9D,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,qBAAqB,EAAE,CAAC;YAElE,uCAAuC;YACvC,IAAI,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC5B,IAAI,OAAO,KAAK,MAAM,EAAE,CAAC;gBACvB,OAAO,GAAG,MAAM,CAAC;YACnB,CAAC;YAED,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;YACnB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;YAElB,IAAI,OAAO,KAAK,MAAM,EAAE,CAAC;gBACvB,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,GAAG,EAAE,CAAC;gBACrD,IAAI,CAAC,GAAG,GAAG,SAAS,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;gBAE9C,qBAAqB;gBACrB,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;gBACrC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,KAAK,GAAG,CAAC,CAAC;gBACrC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;YACnB,CAAC;iBAAM,IAAI,OAAO,KAAK,OAAO,EAAE,CAAC;gBAC/B,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,KAAK,GAAG,EAAE,CAAC;gBACpC,IAAI,CAAC,GAAG,GAAG,SAAS,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;gBAE9C,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;gBACrC,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;gBACpB,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;YACnB,CAAC;iBAAM,IAAI,OAAO,KAAK,KAAK,EAAE,CAAC;gBAC7B,IAAI,CAAC,GAAG,GAAG,YAAY,CAAC,GAAG,GAAG,SAAS,CAAC,MAAM,GAAG,EAAE,CAAC;gBACpD,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;gBAE/C,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;gBACrC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC;gBACzC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;YACnB,CAAC;iBAAM,IAAI,OAAO,KAAK,QAAQ,EAAE,CAAC;gBAChC,IAAI,CAAC,GAAG,GAAG,YAAY,CAAC,MAAM,GAAG,EAAE,CAAC;gBACpC,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;gBAE/C,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;gBACnB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC;gBACzC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;YACnB,CAAC;QACH,CAAC;IACH,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACtC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACrC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACvB,CAAC,EAAE,IAAI,CAAC,CAAC;QACX,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAEO,gBAAgB;QACtB,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACpC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACnC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACvB,CAAC;IAEM,MAAM;QACX,MAAM,QAAQ,GAAQ;YACpB,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK;YACvC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,KAAK;SAC3C,CAAC;QAEF,MAAM,UAAU,GAAQ;YACtB,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAC,KAAK;YACjD,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC,KAAK;SACrD,CAAC;QAEF,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,QAAQ,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;QACrC,CAAC;QAED,MAAM,OAAO,GAAG,UAAU,CAAC;YACzB,GAAG,EAAE,IAAI;YACT,IAAI,EAAE,IAAI,CAAC,OAAO;YAClB,GAAG,EAAE,IAAI,CAAC,SAAS;YACnB,gBAAgB,EAAE,IAAI,CAAC,YAAY;SACpC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,gBAAgB;sBAChB,IAAI,CAAC,gBAAgB;sBACrB,IAAI,CAAC,gBAAgB;;;;oBAIvB,OAAO,WAAW,QAAQ,CAAC,QAAQ,CAAC;UAC9C,IAAI,CAAC,IAAI;4BACS,IAAI,CAAC,KAAK,WAAW,QAAQ,CAAC,UAAU,CAAC;YACzD,IAAI,CAAC,KAAK;;;KAGjB,CAAC;IACJ,CAAC;CACF;AA9IC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oCACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACT;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACN;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;gCACjC;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iCAChC;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;kCAC/B;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;sCAC3B","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { getCenter, getMiddle } from './helpers';\n\nexport class Tip extends RapidElement {\n  static get styles() {\n    return css`\n      .tip {\n        transition: opacity 200ms ease-in-out;\n        margin: 0px;\n        position: fixed;\n        opacity: 0;\n        background: #fff;\n        padding: 4px 8px;\n        pointer-events: none;\n        border-radius: var(--curvature-widget);\n        box-shadow: 0 1px 10px 10px rgba(0, 0, 0, 0.035),\n          0 1px 3px 0px rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n        font-size: 14px;\n        z-index: 10000;\n        color: #333;\n      }\n\n      .tip.hide-on-change {\n        transition: none;\n      }\n\n      .show {\n        opacity: 1;\n      }\n\n      .slot {\n        display: flex;\n        flex-direction: column;\n      }\n\n      .arrow {\n        position: absolute;\n        color: #fff;\n        font-size: 10px;\n        line-height: 0px;\n      }\n\n      .◀ {\n        text-shadow: -1px 2px 2px rgba(0, 0, 0, 0.1);\n      }\n\n      .▶ {\n        text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);\n      }\n\n      .▼ {\n        text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);\n      }\n\n      .▲ {\n        text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.1);\n      }\n    `;\n  }\n\n  @property({ type: String })\n  text: string;\n\n  @property({ type: Boolean })\n  visible = false;\n\n  @property({ type: String })\n  position = 'auto';\n\n  @property({ type: Boolean })\n  hideOnChange: boolean;\n\n  @property({ type: Number, attribute: false })\n  top: number;\n\n  @property({ type: Number, attribute: false })\n  left: number;\n\n  @property({ type: Number, attribute: false })\n  width: number;\n\n  @property({ type: Boolean, attribute: false })\n  poppedTop: boolean;\n\n  arrow: string;\n  arrowTop: number;\n  arrowLeft: number;\n  arrowDirection: string;\n\n  lastEnter = 0;\n  failSafe = 0;\n\n  public updated(changed: Map<string, any>) {\n    if ((changed.has('visible') || changed.has('text')) && this.visible) {\n      this.calculatePosition();\n    }\n\n    if (changed.has('text') && this.hideOnChange) {\n      this.visible = false;\n    }\n  }\n\n  private calculatePosition() {\n    if (this.visible) {\n      const tipBounds = this.getDiv('.tip').getBoundingClientRect();\n      const anchorBounds = this.getDiv('.slot').getBoundingClientRect();\n\n      // TODO: pick a direction automatically\n      let tipSide = this.position;\n      if (tipSide === 'auto') {\n        tipSide = 'left';\n      }\n\n      this.arrowLeft = 0;\n      this.arrowTop = 0;\n\n      if (tipSide === 'left') {\n        this.left = anchorBounds.left - tipBounds.width - 16;\n        this.top = getMiddle(anchorBounds, tipBounds);\n\n        // position our arrow\n        this.arrowTop = tipBounds.height / 2;\n        this.arrowLeft = tipBounds.width - 1;\n        this.arrow = '▶';\n      } else if (tipSide === 'right') {\n        this.left = anchorBounds.right + 12;\n        this.top = getMiddle(anchorBounds, tipBounds);\n\n        this.arrowTop = tipBounds.height / 2;\n        this.arrowLeft = -8;\n        this.arrow = '◀';\n      } else if (tipSide === 'top') {\n        this.top = anchorBounds.top - tipBounds.height - 12;\n        this.left = getCenter(anchorBounds, tipBounds);\n\n        this.arrowTop = tipBounds.height + 2;\n        this.arrowLeft = tipBounds.width / 2 - 4;\n        this.arrow = '▼';\n      } else if (tipSide === 'bottom') {\n        this.top = anchorBounds.bottom + 10;\n        this.left = getCenter(anchorBounds, tipBounds);\n\n        this.arrowTop = -2;\n        this.arrowLeft = tipBounds.width / 2 - 3;\n        this.arrow = '▲';\n      }\n    }\n  }\n\n  private handleMouseEnter() {\n    this.lastEnter = window.setTimeout(() => {\n      this.visible = true;\n      this.failSafe = window.setTimeout(() => {\n        this.visible = false;\n      }, 2000);\n    }, 600);\n  }\n\n  private handleMouseLeave() {\n    window.clearTimeout(this.lastEnter);\n    window.clearTimeout(this.failSafe);\n    this.visible = false;\n  }\n\n  public render(): TemplateResult {\n    const tipStyle: any = {\n      top: this.top ? `${this.top}px` : '0px',\n      left: this.left ? `${this.left}px` : '0px'\n    };\n\n    const arrowStyle: any = {\n      top: this.arrowTop ? `${this.arrowTop}px` : '0px',\n      left: this.arrowLeft ? `${this.arrowLeft}px` : '0px'\n    };\n\n    if (this.width) {\n      tipStyle.width = `${this.width}px`;\n    }\n\n    const classes = getClasses({\n      tip: true,\n      show: this.visible,\n      top: this.poppedTop,\n      'hide-on-change': this.hideOnChange\n    });\n\n    return html`\n      <div\n        class=\"slot\"\n        @click=${this.handleMouseLeave}\n        @mouseenter=${this.handleMouseEnter}\n        @mouseleave=${this.handleMouseLeave}\n      >\n        <slot></slot>\n      </div>\n      <div class=\"${classes}\" style=${styleMap(tipStyle)}>\n        ${this.text}\n        <div class=\"arrow ${this.arrow}\" style=${styleMap(arrowStyle)}>\n          ${this.arrow}\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/toast/Toast.js

@@ -0,0 +1,199 @@
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { RapidElement } from '../RapidElement';
+import { property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+export class Toast extends RapidElement {
+    constructor() {
+        super(...arguments);
+        this.messages = [];
+        this.staleDuration = 5000;
+        this.animationDuration = 200;
+        this.errorSticky = false;
+        this.warningSticky = false;
+        this.infoSticky = false;
+        this.messageId = 0;
+    }
+    checkForStaleMessages() {
+        const now = new Date();
+        // ignore sticky messages
+        const staleMessages = this.messages.filter((message) => {
+            if (message.level === 'error' && this.errorSticky) {
+                return false;
+            }
+            if (message.level === 'warning' && this.warningSticky) {
+                return false;
+            }
+            if (message.level === 'info' && this.infoSticky) {
+                return false;
+            }
+            return true;
+        });
+        staleMessages.forEach((message) => {
+            // error messages do not remove themselves
+            if (now.getTime() - message.time.getTime() > this.staleDuration) {
+                this.removeMessage(message);
+            }
+        });
+        if (this.messages.length === 0 && this.checker) {
+            window.clearInterval(this.checker);
+            this.checker = 0;
+        }
+    }
+    addMessages(messages) {
+        messages.forEach((message) => {
+            this.addMessage(message.text, message.level);
+        });
+    }
+    addMessage(text, level) {
+        const message = {
+            id: ++this.messageId,
+            text,
+            level,
+            time: new Date()
+        };
+        this.messages.push(message);
+        window.setTimeout(() => {
+            message.visible = true;
+            this.requestUpdate('messages');
+        }, 100);
+        this.requestUpdate('messages');
+        if (this.checker) {
+            window.clearInterval(this.checker);
+            this.checker = 0;
+        }
+        this.checker = window.setInterval(this.checkForStaleMessages.bind(this), 1000);
+    }
+    info(message) {
+        this.addMessage(message, 'info');
+    }
+    warning(message) {
+        this.addMessage(message, 'warning');
+    }
+    error(message) {
+        this.addMessage(message, 'error');
+    }
+    removeMessage(message) {
+        message.removeTime = new Date();
+        window.setTimeout(() => {
+            this.messages = this.messages.filter((m) => m !== message);
+            this.requestUpdate('messages');
+        }, this.animationDuration);
+        this.requestUpdate('messages');
+    }
+    handleMessageClicked(e) {
+        const ele = e.target;
+        const id = parseInt(ele.getAttribute('message_id'));
+        const message = this.messages.find((m) => m.id === id);
+        if (message) {
+            this.removeMessage(message);
+        }
+    }
+    render() {
+        return html `
+      ${repeat(this.messages, (message) => message.id, (message) => html `
+          <div
+            style="transition-duration: ${this.animationDuration}ms"
+            class="message ${message.level} ${message.visible
+            ? 'visible'
+            : ''} ${message.removeTime ? 'removing' : ''}"
+          >
+            <div class="text">${message.text}</div>
+            <temba-icon
+              name="close"
+              size="1.3"
+              message_id="${message.id}"
+              @click=${this.handleMessageClicked}
+            ></temba-icon>
+          </div>
+        `)}
+    `;
+    }
+}
+Toast.styles = css `
+    :host {
+      position: fixed;
+      width: 400px;
+      z-index: 10000;
+      right: 0;
+    }
+
+    .message {
+      background-color: rgba(50, 50, 50, 0.85);
+      background-color: rgba(255, 255, 255, 0.97);
+      color: rgba(0, 0, 0, 0.85);
+      padding: 0.5em 1em;
+      margin: 0.75em;
+      border-radius: 0.5em;
+      display: flex;
+      transition-property: transform, opacity;
+      transition-timing-function: ease-in-out;
+      transform: translateY(-100%);
+      opacity: 0;
+      box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3em 2px;
+      border: 2px solid rgba(0, 0, 0, 0.3);
+    }
+
+    .message.visible {
+      transform: translateY(0);
+      opacity: 1;
+    }
+
+    .message.info {
+    }
+
+    .message.warning {
+      color: rgba(255, 167, 0, 0.9);
+    }
+
+    .message.error {
+      border-color: var(--color-error);
+      color: var(--color-error);
+    }
+
+    .message.removing {
+      opacity: 0;
+      transform: translateY(-100%);
+    }
+
+    temba-icon {
+      cursor: pointer;
+      padding-left: 1em;
+      opacity: 0;
+      transition: all 200ms ease-in-out;
+    }
+
+    .message:hover temba-icon {
+      opacity: 1;
+    }
+
+    temba-icon:hover {
+      transform: scale(1.3) translateX(-0.1em);
+    }
+
+    .message .text {
+      flex-grow: 1;
+    }
+
+    .info {
+    }
+  `;
+__decorate([
+    property({ type: Array })
+], Toast.prototype, "messages", void 0);
+__decorate([
+    property({ type: Number, attribute: 'duration' })
+], Toast.prototype, "staleDuration", void 0);
+__decorate([
+    property({ type: Number, attribute: 'animation' })
+], Toast.prototype, "animationDuration", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'error-sticky' })
+], Toast.prototype, "errorSticky", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'warning-sticky' })
+], Toast.prototype, "warningSticky", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'info-sticky' })
+], Toast.prototype, "infoSticky", void 0);
+//# sourceMappingURL=Toast.js.map

package/out-tsc/src/toast/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../../src/toast/Toast.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, css, html } from 'lit';\nimport { RapidElement } from '../RapidElement';\nimport { property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\n\ninterface ToastMessage {\n  id: number;\n  text: string;\n  level: 'info' | 'warning' | 'error';\n  visible?: boolean;\n  time: Date;\n  removeTime?: Date;\n}\n\nexport class Toast extends RapidElement {\n  @property({ type: Array })\n  messages: ToastMessage[] = [];\n\n  @property({ type: Number, attribute: 'duration' })\n  staleDuration = 5000;\n\n  @property({ type: Number, attribute: 'animation' })\n  animationDuration = 200;\n\n  @property({ type: Boolean, attribute: 'error-sticky' })\n  errorSticky = false;\n\n  @property({ type: Boolean, attribute: 'warning-sticky' })\n  warningSticky = false;\n\n  @property({ type: Boolean, attribute: 'info-sticky' })\n  infoSticky = false;\n\n  static styles = css`\n    :host {\n      position: fixed;\n      width: 400px;\n      z-index: 10000;\n      right: 0;\n    }\n\n    .message {\n      background-color: rgba(50, 50, 50, 0.85);\n      background-color: rgba(255, 255, 255, 0.97);\n      color: rgba(0, 0, 0, 0.85);\n      padding: 0.5em 1em;\n      margin: 0.75em;\n      border-radius: 0.5em;\n      display: flex;\n      transition-property: transform, opacity;\n      transition-timing-function: ease-in-out;\n      transform: translateY(-100%);\n      opacity: 0;\n      box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3em 2px;\n      border: 2px solid rgba(0, 0, 0, 0.3);\n    }\n\n    .message.visible {\n      transform: translateY(0);\n      opacity: 1;\n    }\n\n    .message.info {\n    }\n\n    .message.warning {\n      color: rgba(255, 167, 0, 0.9);\n    }\n\n    .message.error {\n      border-color: var(--color-error);\n      color: var(--color-error);\n    }\n\n    .message.removing {\n      opacity: 0;\n      transform: translateY(-100%);\n    }\n\n    temba-icon {\n      cursor: pointer;\n      padding-left: 1em;\n      opacity: 0;\n      transition: all 200ms ease-in-out;\n    }\n\n    .message:hover temba-icon {\n      opacity: 1;\n    }\n\n    temba-icon:hover {\n      transform: scale(1.3) translateX(-0.1em);\n    }\n\n    .message .text {\n      flex-grow: 1;\n    }\n\n    .info {\n    }\n  `;\n\n  public checkForStaleMessages() {\n    const now = new Date();\n\n    // ignore sticky messages\n    const staleMessages = this.messages.filter((message) => {\n      if (message.level === 'error' && this.errorSticky) {\n        return false;\n      }\n      if (message.level === 'warning' && this.warningSticky) {\n        return false;\n      }\n      if (message.level === 'info' && this.infoSticky) {\n        return false;\n      }\n      return true;\n    });\n\n    staleMessages.forEach((message) => {\n      // error messages do not remove themselves\n      if (now.getTime() - message.time.getTime() > this.staleDuration) {\n        this.removeMessage(message);\n      }\n    });\n\n    if (this.messages.length === 0 && this.checker) {\n      window.clearInterval(this.checker);\n      this.checker = 0;\n    }\n  }\n\n  private checker: number;\n  private messageId: number = 0;\n\n  public addMessages(messages: ToastMessage[]) {\n    messages.forEach((message) => {\n      this.addMessage(message.text, message.level);\n    });\n  }\n\n  public addMessage(text: string, level: 'info' | 'warning' | 'error') {\n    const message: ToastMessage = {\n      id: ++this.messageId,\n      text,\n      level,\n      time: new Date()\n    };\n    this.messages.push(message);\n\n    window.setTimeout(() => {\n      message.visible = true;\n      this.requestUpdate('messages');\n    }, 100);\n\n    this.requestUpdate('messages');\n\n    if (this.checker) {\n      window.clearInterval(this.checker);\n      this.checker = 0;\n    }\n\n    this.checker = window.setInterval(\n      this.checkForStaleMessages.bind(this),\n      1000\n    );\n  }\n\n  public info(message: string) {\n    this.addMessage(message, 'info');\n  }\n\n  public warning(message: string) {\n    this.addMessage(message, 'warning');\n  }\n\n  public error(message: string) {\n    this.addMessage(message, 'error');\n  }\n\n  public removeMessage(message: ToastMessage) {\n    message.removeTime = new Date();\n    window.setTimeout(() => {\n      this.messages = this.messages.filter((m) => m !== message);\n      this.requestUpdate('messages');\n    }, this.animationDuration);\n\n    this.requestUpdate('messages');\n  }\n\n  private handleMessageClicked(e: MouseEvent) {\n    const ele = e.target as HTMLElement;\n    const id = parseInt(ele.getAttribute('message_id'));\n    const message = this.messages.find((m) => m.id === id);\n    if (message) {\n      this.removeMessage(message);\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      ${repeat(\n        this.messages,\n        (message) => message.id,\n        (message) => html`\n          <div\n            style=\"transition-duration: ${this.animationDuration}ms\"\n            class=\"message ${message.level} ${message.visible\n              ? 'visible'\n              : ''} ${message.removeTime ? 'removing' : ''}\"\n          >\n            <div class=\"text\">${message.text}</div>\n            <temba-icon\n              name=\"close\"\n              size=\"1.3\"\n              message_id=\"${message.id}\"\n              @click=${this.handleMessageClicked}\n            ></temba-icon>\n          </div>\n        `\n      )}\n    `;\n  }\n}\n"]}

package/out-tsc/src/utils/index.js

@@ -42,7 +42,7 @@ export const getHeaders = (headers = {}) => {
     const fetchHeaders = csrf ? { 'X-CSRFToken': csrf } : {};
     // mark us as ajax
     fetchHeaders['X-Requested-With'] = 'XMLHttpRequest';
-    Object.keys(headers).forEach(key => {
+    Object.keys(headers).forEach((key) => {
         fetchHeaders[key] = headers[key];
     });
     return fetchHeaders;
@@ -51,13 +51,13 @@ export const getUrl = (url, controller = null, headers = {}) => {
     return new Promise((resolve, reject) => {
         const options = {
             method: 'GET',
-            headers: getHeaders(headers),
+            headers: getHeaders(headers)
         };
         if (controller) {
             options['signal'] = controller.signal;
         }
         fetch(url, options)
-            .then(response => {
+            .then((response) => {
             response.text().then((body) => {
                 let json = {};
                 try {
@@ -71,11 +71,11 @@ export const getUrl = (url, controller = null, headers = {}) => {
                     json,
                     url: response.url,
                     headers: response.headers,
-                    status: response.status,
+                    status: response.status
                 });
             });
         })
-            .catch(error => {
+            .catch((error) => {
             reject(error);
         });
     });
@@ -99,15 +99,15 @@ export const fetchResultsPage = (url, controller = null) => {
             .then((response) => {
             resolve({
                 results: response.json.results,
-                next: response.json.next,
+                next: response.json.next
             });
         })
-            .catch(error => reject(error));
+            .catch((error) => reject(error));
     });
 };
 export const fetchResults = async (url) => {
     if (!url) {
-        return new Promise(resolve => resolve([]));
+        return new Promise((resolve) => resolve([]));
     }
     let results = [];
     let pageUrl = url;
@@ -127,19 +127,19 @@ export const getAssetPage = (url) => {
             if (response.status >= 200 && response.status < 300) {
                 resolve({
                     assets: response.json.results,
-                    next: response.json.next,
+                    next: response.json.next
                 });
             }
             else {
                 reject(response);
             }
         })
-            .catch(error => reject(error));
+            .catch((error) => reject(error));
     });
 };
 export const getAssets = async (url) => {
     if (!url) {
-        return new Promise(resolve => resolve([]));
+        return new Promise((resolve) => resolve([]));
     }
     let assets = [];
     let pageUrl = url;
@@ -163,7 +163,7 @@ export const postUrl = (url, payload, headers = {}, contentType = null) => {
     const options = {
         method: 'POST',
         headers: fetchHeaders,
-        body: payload,
+        body: payload
     };
     return new Promise((resolve, reject) => {
         fetch(url, options)
@@ -172,6 +172,13 @@ export const postUrl = (url, payload, headers = {}, contentType = null) => {
                 reject(response);
                 return;
             }
+            const toasts = response.headers.get('x-temba-toasts');
+            if (toasts) {
+                const toastEle = document.querySelector('temba-toast');
+                if (toastEle) {
+                    toastEle.addMessages(JSON.parse(toasts));
+                }
+            }
             response.text().then((body) => {
                 let json = {};
                 try {
@@ -185,11 +192,11 @@ export const postUrl = (url, payload, headers = {}, contentType = null) => {
                     headers: response.headers,
                     status: response.status,
                     redirected: response.redirected,
-                    url: response.url,
+                    url: response.url
                 });
             });
         })
-            .catch(error => {
+            .catch((error) => {
             reject(error);
         });
     });
@@ -200,7 +207,7 @@ export const postJSON = (url, payload) => {
 export const postFormData = (url, formData, headers = {}) => {
     return new Promise((resolve, reject) => {
         postUrl(url, formData, headers)
-            .then(response => {
+            .then((response) => {
             if (response.status >= 200 && response.status < 400) {
                 resolve(response);
             }
@@ -213,7 +220,7 @@ export const postFormData = (url, formData, headers = {}) => {
                 }
             }
         })
-            .catch(err => {
+            .catch((err) => {
             console.error(err);
             reject(err);
         });
@@ -237,7 +244,7 @@ export const hexToRgb = (hex) => {
         ? {
             r: parseInt(result[1], 16),
             g: parseInt(result[2], 16),
-            b: parseInt(result[3], 16),
+            b: parseInt(result[3], 16)
         }
         : null;
 };
@@ -251,7 +258,7 @@ export const getElementOffset = (ele) => {
         bottom: rect.top + rect.height,
         right: rect.left + rect.width,
         width: rect.width,
-        height: rect.height,
+        height: rect.height
     };
 };
 export const plural = (count, singular, plural) => {
@@ -348,7 +355,7 @@ export class Stubbable {
 }
 export const stubbable = new Stubbable();
 export const timeSince = (date, options = {
-    suffix: '',
+    suffix: ''
 }) => {
     const { compareDate, hideRecentText, suffix } = options;
     const now = compareDate || stubbable.getCurrentDate();
@@ -547,7 +554,7 @@ export const extractInitials = (text) => {
         return words[0].substring(0, 2).toUpperCase();
     }
     // use initial letters of words with preference to first word and capital letters
-    const firstLetters = words.map(w => w.substring(0, 1));
+    const firstLetters = words.map((w) => w.substring(0, 1));
     const firstCapitals = firstLetters.filter((l, index) => l == l.toUpperCase() || index == 0);
     if (firstCapitals.length >= 2) {
         return (firstCapitals[0] + firstCapitals[1]).toUpperCase();
@@ -559,7 +566,7 @@ export const extractInitials = (text) => {
 export const hslToHex = (h, s, l) => {
     l /= 100;
     const a = (s * Math.min(l, 1 - l)) / 100;
-    const f = n => {
+    const f = (n) => {
         const k = (n + h / 30) % 12;
         const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
         return Math.round(255 * color)