@nyaruka/temba-components 0.26.7 → 0.26.10

package/out-tsc/src/tabpane/TabPane.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { property } from 'lit/decorators';
+import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 export class TabPane extends RapidElement {
     constructor() {
@@ -24,6 +25,7 @@ export class TabPane extends RapidElement {
         margin: 0em 0em;
         cursor: pointer;
         display: flex;
+        align-items: center;
         border-radius: var(--curvature);
         border-bottom-right-radius: 0px;
         border-bottom-left-radius: 0px;
@@ -56,11 +58,27 @@ export class TabPane extends RapidElement {
       .pane.first {
         border-top-left-radius: 0px;
       }
+
+      .badge {
+        margin-left: 0.4em;
+      }
+
+      .count {
+        border-radius: 99px;
+        background: rgba(0, 0, 0, 0.05);
+        color: rgba(0, 0, 0, 0.5);
+        font-size: 0.7em;
+        font-weight: 400;
+        padding: 0.1em 0.4em;
+        min-width: 1em;
+        text-align: center;
+      }
     `;
     }
     handleTabClick(event) {
         this.index = parseInt(event.currentTarget.dataset.index);
         this.requestUpdate('index');
+        this.fireEvent(CustomEventType.ContextChanged);
     }
     updated(changedProperties) {
         super.updated(changedProperties);
@@ -79,6 +97,9 @@ export class TabPane extends RapidElement {
             }
         }
     }
+    getTab(index) {
+        return this.children.item(index);
+    }
     render() {
         const tabs = [];
         for (const tab of this.children) {
@@ -91,9 +112,23 @@ export class TabPane extends RapidElement {
               @click=${this.handleTabClick}
               data-index=${index}
               class="tab ${index == this.index ? 'selected' : ''}"
+              style="${tab.selectionColor && index == this.index
+            ? `color:${tab.selectionColor};--icon-color:${tab.selectionColor};`
+            : ''} ${tab.selectionBackground && index == this.index
+            ? `background-color:${tab.selectionBackground};`
+            : ''}"
             >
               ${tab.icon ? html `<temba-icon name=${tab.icon} />` : null}
               ${tab.name}
+              ${tab.hasBadge()
+            ? html `
+                    <div class="badge">
+                      ${tab.count > 0
+                ? html `<div class="count">${tab.count}</div>`
+                : null}
+                    </div>
+                  `
+            : null}
             </div>
           `)}
       </div>

package/out-tsc/src/tabpane/TabPane.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPane.js","sourceRoot":"","sources":["../../../src/tabpane/TabPane.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAG/C,MAAM,OAAO,OAAQ,SAAQ,YAAY;IAAzC;;QAsDE,UAAK,GAAG,CAAC,CAAC;IAqDZ,CAAC;IA1GC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgDT,CAAC;IACJ,CAAC;IAKO,cAAc,CAAC,KAAiB;QACtC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAClB,KAAK,CAAC,aAAgC,CAAC,OAAO,CAAC,KAAK,CACtD,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAEM,OAAO,CAAC,iBAAmC;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YAClC,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE;gBACrC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;oBAC7C,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAQ,CAAC;oBACpC,GAAG,CAAC,QAAQ,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC;oBAE/B,IAAI,GAAG,CAAC,QAAQ,EAAE;wBAChB,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;qBAC5B;yBAAM;wBACL,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;qBAC5B;iBACF;aACF;SACF;IACH,CAAC;IAEM,MAAM;QACX,MAAM,IAAI,GAAU,EAAE,CAAC;QACvB,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,QAAQ,EAAE;YAC/B,IAAI,CAAC,IAAI,CAAC,GAAU,CAAC,CAAC;SACvB;QAED,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,GAAG,CACR,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;uBAEP,IAAI,CAAC,cAAc;2BACf,KAAK;2BACL,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;gBAEhD,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,oBAAoB,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI;gBACvD,GAAG,CAAC,IAAI;;WAEb,CACF;;yBAEgB,IAAI,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI;;;KAGrD,CAAC;IACJ,CAAC;CACF;AArDC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACjB","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { RapidElement } from '../RapidElement';\nimport { Tab } from './Tab';\n\nexport class TabPane extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n      }\n\n      .tabs {\n        display: flex;\n      }\n\n      .tab {\n        padding: 0.5em 1em;\n        margin: 0em 0em;\n        cursor: pointer;\n        display: flex;\n        border-radius: var(--curvature);\n        border-bottom-right-radius: 0px;\n        border-bottom-left-radius: 0px;\n        border: 0px solid rgba(0, 0, 0, 0.45);\n        color: var(--color-text-dark);\n        --icon-color: var(--color-text-dark);\n      }\n\n      .tab temba-icon {\n        margin-right: 0.4em;\n      }\n\n      .tab.selected {\n        cursor: default;\n        box-shadow: 2px 1px 3px 2px rgba(0, 0, 0, 0.07);\n        background: #fff;\n      }\n\n      .pane {\n        display: flex;\n        flex-direction: column;\n        flex-grow: 1;\n        background: #fff;\n        border-radius: var(--curvature);\n        box-shadow: 2px 5px 12px 2px rgba(0, 0, 0, 0.09),\n          3px 3px 2px 1px rgba(0, 0, 0, 0.05);\n        min-height: 0;\n      }\n\n      .pane.first {\n        border-top-left-radius: 0px;\n      }\n    `;\n  }\n\n  @property({ type: Number })\n  index = 0;\n\n  private handleTabClick(event: MouseEvent): void {\n    this.index = parseInt(\n      (event.currentTarget as HTMLDivElement).dataset.index\n    );\n    this.requestUpdate('index');\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('index')) {\n      if (this.children.length > this.index) {\n        for (let i = 0; i < this.children.length; i++) {\n          const tab = this.children[i] as Tab;\n          tab.selected = i == this.index;\n\n          if (tab.selected) {\n            tab.style.display = 'flex';\n          } else {\n            tab.style.display = 'none';\n          }\n        }\n      }\n    }\n  }\n\n  public render(): TemplateResult {\n    const tabs: Tab[] = [];\n    for (const tab of this.children) {\n      tabs.push(tab as Tab);\n    }\n\n    return html`\n      <div class=\"tabs\">\n        ${tabs.map(\n          (tab, index) => html`\n            <div\n              @click=${this.handleTabClick}\n              data-index=${index}\n              class=\"tab ${index == this.index ? 'selected' : ''}\"\n            >\n              ${tab.icon ? html`<temba-icon name=${tab.icon} />` : null}\n              ${tab.name}\n            </div>\n          `\n        )}\n      </div>\n      <div class=\"pane ${this.index === 0 ? 'first' : null}\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"TabPane.js","sourceRoot":"","sources":["../../../src/tabpane/TabPane.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { Tab } from './Tab';\n\nexport class TabPane extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n      }\n\n      .tabs {\n        display: flex;\n      }\n\n      .tab {\n        padding: 0.5em 1em;\n        margin: 0em 0em;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        border-radius: var(--curvature);\n        border-bottom-right-radius: 0px;\n        border-bottom-left-radius: 0px;\n        border: 0px solid rgba(0, 0, 0, 0.45);\n        color: var(--color-text-dark);\n        --icon-color: var(--color-text-dark);\n      }\n\n      .tab temba-icon {\n        margin-right: 0.4em;\n      }\n\n      .tab.selected {\n        cursor: default;\n        box-shadow: 2px 1px 3px 2px rgba(0, 0, 0, 0.07);\n        background: #fff;\n      }\n\n      .pane {\n        display: flex;\n        flex-direction: column;\n        flex-grow: 1;\n        background: #fff;\n        border-radius: var(--curvature);\n        box-shadow: 2px 5px 12px 2px rgba(0, 0, 0, 0.09),\n          3px 3px 2px 1px rgba(0, 0, 0, 0.05);\n        min-height: 0;\n      }\n\n      .pane.first {\n        border-top-left-radius: 0px;\n      }\n\n      .badge {\n        margin-left: 0.4em;\n      }\n\n      .count {\n        border-radius: 99px;\n        background: rgba(0, 0, 0, 0.05);\n        color: rgba(0, 0, 0, 0.5);\n        font-size: 0.7em;\n        font-weight: 400;\n        padding: 0.1em 0.4em;\n        min-width: 1em;\n        text-align: center;\n      }\n    `;\n  }\n\n  @property({ type: Number })\n  index = 0;\n\n  private handleTabClick(event: MouseEvent): void {\n    this.index = parseInt(\n      (event.currentTarget as HTMLDivElement).dataset.index\n    );\n    this.requestUpdate('index');\n    this.fireEvent(CustomEventType.ContextChanged);\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('index')) {\n      if (this.children.length > this.index) {\n        for (let i = 0; i < this.children.length; i++) {\n          const tab = this.children[i] as Tab;\n          tab.selected = i == this.index;\n\n          if (tab.selected) {\n            tab.style.display = 'flex';\n          } else {\n            tab.style.display = 'none';\n          }\n        }\n      }\n    }\n  }\n\n  public getTab(index: number): Tab {\n    return this.children.item(index) as Tab;\n  }\n\n  public render(): TemplateResult {\n    const tabs: Tab[] = [];\n    for (const tab of this.children) {\n      tabs.push(tab as Tab);\n    }\n\n    return html`\n      <div class=\"tabs\">\n        ${tabs.map(\n          (tab, index) => html`\n            <div\n              @click=${this.handleTabClick}\n              data-index=${index}\n              class=\"tab ${index == this.index ? 'selected' : ''}\"\n              style=\"${tab.selectionColor && index == this.index\n                ? `color:${tab.selectionColor};--icon-color:${tab.selectionColor};`\n                : ''} ${tab.selectionBackground && index == this.index\n                ? `background-color:${tab.selectionBackground};`\n                : ''}\"\n            >\n              ${tab.icon ? html`<temba-icon name=${tab.icon} />` : null}\n              ${tab.name}\n              ${tab.hasBadge()\n                ? html`\n                    <div class=\"badge\">\n                      ${tab.count > 0\n                        ? html`<div class=\"count\">${tab.count}</div>`\n                        : null}\n                    </div>\n                  `\n                : null}\n            </div>\n          `\n        )}\n      </div>\n      <div class=\"pane ${this.index === 0 ? 'first' : null}\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/textinput/TextInput.js

@@ -32,9 +32,7 @@ export class TextInput extends FormElement {
         display: flex;
         flex-direction: row;
         align-items: stretch;
-
         box-shadow: var(--widget-box-shadow);
-
         caret-color: var(--input-caret);
       }
 
@@ -59,6 +57,8 @@ export class TextInput extends FormElement {
         border-color: var(--color-focus);
         background: var(--color-widget-bg-focused);
         box-shadow: var(--widget-box-shadow-focused);
+        z-index: 10000;
+        position: relative;
       }
 
       .input-container:hover {
@@ -144,6 +144,7 @@ export class TextInput extends FormElement {
         if (this.dateElement) {
             this.onDateUpdated = this.onDateUpdated.bind(this);
             this.onDateReady = this.onDateReady.bind(this);
+            this.onDateClose = this.onDateClose.bind(this);
         }
         this.inputElement = this.shadowRoot.querySelector('.textinput');
         if (changes.has('counter')) {
@@ -161,35 +162,50 @@ export class TextInput extends FormElement {
     updated(changes) {
         super.updated(changes);
         if (changes.has('value')) {
-            this.setValues([this.value]);
-            this.fireEvent('change');
-            if (this.textarea && this.autogrow) {
-                const autogrow = this.shadowRoot.querySelector('.grow-wrap > div');
-                autogrow.innerText = this.value + String.fromCharCode(10);
+            if (this.datepicker || this.datetimepicker) {
+                this.onDateReady();
             }
-            if (this.cursorStart > -1 && this.cursorEnd > -1) {
-                this.inputElement.setSelectionRange(this.cursorStart, this.cursorEnd);
-                this.cursorStart = -1;
-                this.cursorEnd = -1;
+            else {
+                this.setValues([this.value]);
+                this.fireEvent('change');
+                if (this.textarea && this.autogrow) {
+                    const autogrow = this.shadowRoot.querySelector('.grow-wrap > div');
+                    autogrow.innerText = this.value + String.fromCharCode(10);
+                }
+                if (this.cursorStart > -1 && this.cursorEnd > -1) {
+                    this.inputElement.setSelectionRange(this.cursorStart, this.cursorEnd);
+                    this.cursorStart = -1;
+                    this.cursorEnd = -1;
+                }
             }
         }
     }
-    onDateUpdated(dates, formattedDate) {
+    onDateUpdated(dates, isoFormatDate) {
         if (dates.length > 0) {
+            this.isoFormattedDate = isoFormatDate;
             this.inputElement.value = this.dateElement.formatDate(dates[0], this.dateElement.altFormat);
-            this.setValue(formattedDate);
-            this.inputElement.blur();
         }
     }
+    getDisplayValue() {
+        return this.inputElement.value;
+    }
     onDateReady() {
         window.setTimeout(() => {
-            if (this.value) {
-                this.inputElement.value = this.dateElement.formatDate(this.dateElement.parseDate(this.value), this.dateElement.altFormat);
-                this.dateElement.setDate(this.value);
+            if (this.dateElement) {
+                if (this.value) {
+                    this.inputElement.value = this.dateElement.formatDate(this.dateElement.parseDate(this.value), this.dateElement.altFormat);
+                    this.dateElement.setDate(this.value);
+                }
+                this.loading = false;
             }
-            this.loading = false;
         }, 0);
     }
+    onDateClose() {
+        if (this.isoFormattedDate) {
+            this.setValue(this.isoFormattedDate);
+            this.fireEvent('blur');
+        }
+    }
     handleClear(event) {
         event.stopPropagation();
         event.preventDefault();
@@ -396,9 +412,10 @@ export class TextInput extends FormElement {
           class="datepicker hidden"
           altInput
           altFormat="${this.datepicker ? 'F j, Y' : 'F j, Y h:i K'}"
-          dateFormat="${this.datepicker ? 'Y-m-d' : 'Y-m-d H:i'}"
+          dateFormat="${this.datepicker ? 'Y-m-d' : 'Z'}"
           .onValueUpdate=${this.onDateUpdated}
           .onReady=${this.onDateReady}
+          .onClose=${this.onDateClose}
           ?enableTime=${this.datetimepicker}
         ></lit-flatpickr>
       `;
@@ -418,6 +435,7 @@ export class TextInput extends FormElement {
           style=${styleMap(containerStyle)}
           @click=${this.handleContainerClick}
         >
+          <slot name="prefix"></slot>
           ${input} ${clear}
           <slot></slot>
         </div>

package/out-tsc/src/textinput/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../src/textinput/TextInput.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { styleMap } from 'lit-html/directives/style-map';\nimport { FormElement } from '../FormElement';\nimport { Modax } from '../dialog/Modax';\nimport { sanitize } from './helpers';\nimport { CharCount } from '../charcount/CharCount';\nimport 'lit-flatpickr';\n\nexport class TextInput extends FormElement {\n  static get styles() {\n    return css`\n      .input-container {\n        border-radius: var(--curvature-widget);\n        cursor: text;\n        background: var(--color-widget-bg);\n        border: 1px solid var(--color-widget-border);\n        transition: all ease-in-out var(--transition-speed);\n        display: flex;\n        flex-direction: row;\n        align-items: stretch;\n\n        box-shadow: var(--widget-box-shadow);\n\n        caret-color: var(--input-caret);\n      }\n\n      .clear-icon {\n        --icon-color: var(--color-text-dark-secondary);\n        cursor: pointer;\n        margin: auto;\n        padding-right: 10px;\n        line-height: 1;\n      }\n\n      .clear-icon:hover {\n        --icon-color: var(--color-text-dark);\n      }\n\n      .hidden {\n        visibility: hidden;\n        position: absolute;\n      }\n\n      .input-container:focus-within {\n        border-color: var(--color-focus);\n        background: var(--color-widget-bg-focused);\n        box-shadow: var(--widget-box-shadow-focused);\n      }\n\n      .input-container:hover {\n        background: var(--color-widget-bg-focused);\n      }\n\n      textarea {\n        height: var(--textarea-height);\n      }\n\n      .textinput {\n        padding: var(--temba-textinput-padding);\n        border: none;\n        flex: 1;\n        margin: 0;\n        background: none;\n        color: var(--color-widget-text);\n        font-family: var(--font-family);\n        font-size: var(--temba-textinput-font-size);\n        line-height: normal;\n        cursor: text;\n        resize: none;\n        font-weight: 300;\n        width: 100%;\n      }\n\n      .textinput.withdate {\n        cursor: pointer;\n      }\n\n      .textinput.withdate.loading {\n        color: #fff;\n      }\n\n      .datepicker {\n        padding: 9px;\n        margin: 0px;\n        border: 1px red solid;\n      }\n\n      .textinput:focus {\n        outline: none;\n        box-shadow: none;\n        cursor: text;\n      }\n\n      .textinput::placeholder {\n        color: var(--color-placeholder);\n        font-weight: 300;\n      }\n\n      .grow-wrap {\n        display: flex;\n        align-items: stretch;\n        width: 100%;\n      }\n\n      .grow-wrap > div {\n        border: 0px solid green;\n        width: 100%;\n        padding: var(--temba-textinput-padding);\n        flex: 1;\n        margin: 0;\n        background: none;\n        color: var(--color-widget-text);\n        font-family: var(--font-family);\n        font-size: var(--temba-textinput-font-size);\n        line-height: normal;\n        cursor: text;\n        resize: none;\n        font-weight: 300;\n        width: 100%;\n      }\n\n      .grow-wrap textarea {\n        margin-left: -100%;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  textarea: boolean;\n\n  @property({ type: Boolean })\n  datepicker: boolean;\n\n  @property({ type: Boolean })\n  datetimepicker: boolean;\n\n  @property({ type: String })\n  placeholder = '';\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: Boolean })\n  password: boolean;\n\n  @property({ type: Number })\n  maxlength: number;\n\n  @property({ type: Object })\n  inputElement: HTMLInputElement;\n\n  @property({ type: Object })\n  dateElement: any;\n\n  @property({ type: Boolean })\n  clearable: boolean;\n\n  @property({ type: Boolean })\n  gsm: boolean;\n\n  @property({ type: String })\n  counter: string;\n\n  // if we are still loading\n  @property({ type: Boolean })\n  loading = true;\n\n  @property({ type: Boolean })\n  submitOnEnter = true;\n\n  @property()\n  onBlur: any;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  autogrow = false;\n\n  counterElement: CharCount = null;\n  cursorStart = -1;\n  cursorEnd = -1;\n\n  public constructor() {\n    super();\n  }\n\n  public firstUpdated(changes: Map<string, any>) {\n    super.firstUpdated(changes);\n\n    this.dateElement = this.shadowRoot.querySelector('.datepicker');\n    if (this.dateElement) {\n      this.onDateUpdated = this.onDateUpdated.bind(this);\n      this.onDateReady = this.onDateReady.bind(this);\n    }\n\n    this.inputElement = this.shadowRoot.querySelector('.textinput');\n\n    if (changes.has('counter')) {\n      let root = this.getParentModax() as any;\n      if (root) {\n        root = root.shadowRoot;\n      }\n      if (!root) {\n        root = document;\n      }\n      this.counterElement = root.querySelector(this.counter);\n      this.counterElement.text = this.value;\n    }\n  }\n\n  public updated(changes: Map<string, any>) {\n    super.updated(changes);\n    if (changes.has('value')) {\n      this.setValues([this.value]);\n      this.fireEvent('change');\n\n      if (this.textarea && this.autogrow) {\n        const autogrow = this.shadowRoot.querySelector(\n          '.grow-wrap > div'\n        ) as HTMLDivElement;\n        autogrow.innerText = this.value + String.fromCharCode(10);\n      }\n\n      if (this.cursorStart > -1 && this.cursorEnd > -1) {\n        this.inputElement.setSelectionRange(this.cursorStart, this.cursorEnd);\n        this.cursorStart = -1;\n        this.cursorEnd = -1;\n      }\n    }\n  }\n\n  private onDateUpdated(dates: Date[], formattedDate: string) {\n    if (dates.length > 0) {\n      this.inputElement.value = this.dateElement.formatDate(\n        dates[0],\n        this.dateElement.altFormat\n      );\n\n      this.setValue(formattedDate);\n      this.inputElement.blur();\n    }\n  }\n\n  private onDateReady() {\n    window.setTimeout(() => {\n      if (this.value) {\n        this.inputElement.value = this.dateElement.formatDate(\n          this.dateElement.parseDate(this.value),\n          this.dateElement.altFormat\n        );\n        this.dateElement.setDate(this.value);\n      }\n\n      this.loading = false;\n    }, 0);\n  }\n\n  private handleClear(event: any): void {\n    event.stopPropagation();\n    event.preventDefault();\n    this.setValue(null);\n  }\n\n  private updateValue(value: string): void {\n    const cursorStart = this.inputElement.selectionStart;\n    const cursorEnd = this.inputElement.selectionEnd;\n\n    const sanitized = this.sanitizeGSM(value);\n\n    if (sanitized !== value) {\n      this.cursorStart = cursorStart;\n      this.cursorEnd = cursorEnd;\n    }\n\n    this.value = sanitized;\n\n    if (this.textarea) {\n      this.inputElement.value = this.value;\n    }\n\n    if (this.counterElement) {\n      this.counterElement.text = value;\n    }\n  }\n\n  private sanitizeGSM(text: string): string {\n    return this.gsm ? sanitize(text) : text;\n  }\n\n  private handleChange(update: any): void {\n    if (this.disabled) {\n      return;\n    }\n    this.updateValue(update.target.value);\n    this.fireEvent('change');\n  }\n\n  private handleDateClick(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.dateElement.open();\n    this.dateElement.focus();\n  }\n\n  private handleContainerClick(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    if (this.inputElement) {\n      this.inputElement.focus();\n    } else {\n      this.handleDateClick();\n    }\n  }\n\n  private handleInput(update: any): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.updateValue(update.target.value);\n    this.setValues([this.value]);\n    this.fireEvent('input');\n  }\n\n  /** we just return the value since it should be a string */\n  public serializeValue(value: any): string {\n    return value;\n  }\n\n  public getParentModax(): Modax {\n    let parent = this as HTMLElement;\n\n    while (parent) {\n      if (parent.parentElement) {\n        parent = parent.parentElement;\n      } else {\n        parent = (parent as any).getRootNode().host;\n      }\n\n      if (!parent) {\n        return null;\n      }\n\n      if (parent.tagName == 'TEMBA-MODAX') {\n        return parent as Modax;\n      }\n    }\n  }\n\n  public getParentForm(): HTMLFormElement {\n    let parent = this as HTMLElement;\n\n    while (parent) {\n      if (parent.parentElement) {\n        parent = parent.parentElement;\n      } else {\n        parent = (parent as any).getRootNode().host;\n      }\n\n      if (!parent) {\n        return null;\n      }\n\n      if (parent.tagName === 'FORM') {\n        return parent as HTMLFormElement;\n      }\n    }\n  }\n\n  public click(): void {\n    super.click();\n    this.handleContainerClick();\n  }\n\n  // TODO make this a formelement and have contactsearch set the root\n  public render(): TemplateResult {\n    const containerStyle = {\n      height: `${this.textarea ? '100%' : 'auto'}`,\n    };\n\n    const clear =\n      this.clearable && this.inputElement && this.inputElement.value\n        ? html`<temba-icon\n            name=\"x\"\n            class=\"clear-icon\"\n            @click=${this.handleClear}\n          />`\n        : null;\n\n    let input = html`\n      <input\n        class=\"textinput\"\n        name=${this.name}\n        type=\"${this.password ? 'password' : 'text'}\"\n        maxlength=\"${ifDefined(this.maxlength)}\"\n        @change=${this.handleChange}\n        @input=${this.handleInput}\n        @blur=${this.blur}\n        @keydown=${(e: KeyboardEvent) => {\n          if (e.key === 'Enter') {\n            // eslint-disable-next-line @typescript-eslint/no-this-alias\n            const input = this;\n\n            if (this.submitOnEnter) {\n              const parentModax = input.getParentModax();\n              const parentForm = !parentModax ? input.getParentForm() : null;\n\n              this.value = this.values[0];\n              this.fireEvent('change');\n\n              // if we don't have something to submit then bail\n              if (!parentModax && !parentForm) {\n                return false;\n              }\n\n              input.blur();\n\n              // look for a form to submit\n              window.setTimeout(function () {\n                // first, look for a modax that contains us\n                const modax = input.getParentModax();\n                if (modax) {\n                  input.blur();\n\n                  modax.submit();\n                } else {\n                  // otherwise, just look for a vanilla submit button\n                  const form = input.getParentForm();\n\n                  if (form) {\n                    const submitButton = form.querySelector(\n                      \"input[type='submit']\"\n                    ) as HTMLInputElement;\n                    if (submitButton) {\n                      submitButton.click();\n                    } else {\n                      form.submit();\n                    }\n                  }\n                }\n              }, 10);\n              // this is needed for firefox, would be nice to\n              // find a way to do this with a callback instead\n            }\n          }\n        }}\n        placeholder=${this.placeholder}\n        .value=${this.value}\n        .disabled=${this.disabled}\n      />\n    `;\n\n    if (this.textarea) {\n      input = html`\n        <textarea\n          class=\"textinput\"\n          name=${this.name}\n          placeholder=${this.placeholder}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          @blur=${this.blur}\n          .value=${this.value}\n          .disabled=${this.disabled}\n        ></textarea>\n      `;\n\n      if (this.autogrow) {\n        input = html` <div class=\"grow-wrap\">\n          <div></div>\n          ${input}\n        </div>`;\n      }\n    }\n\n    if (this.datepicker || this.datetimepicker) {\n      input = html`\n        <input\n          class=\"textinput withdate ${this.loading ? 'loading' : ''}\"\n          name=${this.name}\n          type=\"text\"\n          @click=${this.handleDateClick}\n          @focus=${this.handleDateClick}\n          @keydown=${(e: any) => {\n            e.preventDefault();\n          }}\n          readonly=\"true\"\n          placeholder=\"${this.placeholder}\"\n          .value=\"${this.value}\"\n          ?disabled=${this.disabled}\n        />\n        <lit-flatpickr\n          class=\"datepicker hidden\"\n          altInput\n          altFormat=\"${this.datepicker ? 'F j, Y' : 'F j, Y h:i K'}\"\n          dateFormat=\"${this.datepicker ? 'Y-m-d' : 'Y-m-d H:i'}\"\n          .onValueUpdate=${this.onDateUpdated}\n          .onReady=${this.onDateReady}\n          ?enableTime=${this.datetimepicker}\n        ></lit-flatpickr>\n      `;\n    }\n\n    return html`\n      <temba-field\n        name=${this.name}\n        .label=\"${this.label}\"\n        .helpText=\"${this.helpText}\"\n        .errors=${this.errors}\n        .widgetOnly=${this.widgetOnly}\n        .hideLabel=${this.hideLabel}\n        .disabled=${this.disabled}\n      >\n        <div\n          class=\"input-container\"\n          style=${styleMap(containerStyle)}\n          @click=${this.handleContainerClick}\n        >\n          ${input} ${clear}\n          <slot></slot>\n        </div>\n      </temba-field>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../src/textinput/TextInput.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { styleMap } from 'lit-html/directives/style-map';\nimport { FormElement } from '../FormElement';\nimport { Modax } from '../dialog/Modax';\nimport { sanitize } from './helpers';\nimport { CharCount } from '../charcount/CharCount';\nimport 'lit-flatpickr';\n\nexport class TextInput extends FormElement {\n  static get styles() {\n    return css`\n      .input-container {\n        border-radius: var(--curvature-widget);\n        cursor: text;\n        background: var(--color-widget-bg);\n        border: 1px solid var(--color-widget-border);\n        transition: all ease-in-out var(--transition-speed);\n        display: flex;\n        flex-direction: row;\n        align-items: stretch;\n        box-shadow: var(--widget-box-shadow);\n        caret-color: var(--input-caret);\n      }\n\n      .clear-icon {\n        --icon-color: var(--color-text-dark-secondary);\n        cursor: pointer;\n        margin: auto;\n        padding-right: 10px;\n        line-height: 1;\n      }\n\n      .clear-icon:hover {\n        --icon-color: var(--color-text-dark);\n      }\n\n      .hidden {\n        visibility: hidden;\n        position: absolute;\n      }\n\n      .input-container:focus-within {\n        border-color: var(--color-focus);\n        background: var(--color-widget-bg-focused);\n        box-shadow: var(--widget-box-shadow-focused);\n        z-index: 10000;\n        position: relative;\n      }\n\n      .input-container:hover {\n        background: var(--color-widget-bg-focused);\n      }\n\n      textarea {\n        height: var(--textarea-height);\n      }\n\n      .textinput {\n        padding: var(--temba-textinput-padding);\n        border: none;\n        flex: 1;\n        margin: 0;\n        background: none;\n        color: var(--color-widget-text);\n        font-family: var(--font-family);\n        font-size: var(--temba-textinput-font-size);\n        line-height: normal;\n        cursor: text;\n        resize: none;\n        font-weight: 300;\n        width: 100%;\n      }\n\n      .textinput.withdate {\n        cursor: pointer;\n      }\n\n      .textinput.withdate.loading {\n        color: #fff;\n      }\n\n      .datepicker {\n        padding: 9px;\n        margin: 0px;\n        border: 1px red solid;\n      }\n\n      .textinput:focus {\n        outline: none;\n        box-shadow: none;\n        cursor: text;\n      }\n\n      .textinput::placeholder {\n        color: var(--color-placeholder);\n        font-weight: 300;\n      }\n\n      .grow-wrap {\n        display: flex;\n        align-items: stretch;\n        width: 100%;\n      }\n\n      .grow-wrap > div {\n        border: 0px solid green;\n        width: 100%;\n        padding: var(--temba-textinput-padding);\n        flex: 1;\n        margin: 0;\n        background: none;\n        color: var(--color-widget-text);\n        font-family: var(--font-family);\n        font-size: var(--temba-textinput-font-size);\n        line-height: normal;\n        cursor: text;\n        resize: none;\n        font-weight: 300;\n        width: 100%;\n      }\n\n      .grow-wrap textarea {\n        margin-left: -100%;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  textarea: boolean;\n\n  @property({ type: Boolean })\n  datepicker: boolean;\n\n  @property({ type: Boolean })\n  datetimepicker: boolean;\n\n  @property({ type: String })\n  placeholder = '';\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: Boolean })\n  password: boolean;\n\n  @property({ type: Number })\n  maxlength: number;\n\n  @property({ type: Object })\n  inputElement: HTMLInputElement;\n\n  @property({ type: Object })\n  dateElement: any;\n\n  @property({ type: Boolean })\n  clearable: boolean;\n\n  @property({ type: Boolean })\n  gsm: boolean;\n\n  @property({ type: String })\n  counter: string;\n\n  // if we are still loading\n  @property({ type: Boolean })\n  loading = true;\n\n  @property({ type: Boolean })\n  submitOnEnter = true;\n\n  @property()\n  onBlur: any;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  autogrow = false;\n\n  counterElement: CharCount = null;\n  cursorStart = -1;\n  cursorEnd = -1;\n\n  isoFormattedDate: string;\n\n  public constructor() {\n    super();\n  }\n\n  public firstUpdated(changes: Map<string, any>) {\n    super.firstUpdated(changes);\n\n    this.dateElement = this.shadowRoot.querySelector('.datepicker');\n    if (this.dateElement) {\n      this.onDateUpdated = this.onDateUpdated.bind(this);\n      this.onDateReady = this.onDateReady.bind(this);\n      this.onDateClose = this.onDateClose.bind(this);\n    }\n\n    this.inputElement = this.shadowRoot.querySelector('.textinput');\n\n    if (changes.has('counter')) {\n      let root = this.getParentModax() as any;\n      if (root) {\n        root = root.shadowRoot;\n      }\n      if (!root) {\n        root = document;\n      }\n      this.counterElement = root.querySelector(this.counter);\n      this.counterElement.text = this.value;\n    }\n  }\n\n  public updated(changes: Map<string, any>) {\n    super.updated(changes);\n\n    if (changes.has('value')) {\n      if (this.datepicker || this.datetimepicker) {\n        this.onDateReady();\n      } else {\n        this.setValues([this.value]);\n        this.fireEvent('change');\n\n        if (this.textarea && this.autogrow) {\n          const autogrow = this.shadowRoot.querySelector(\n            '.grow-wrap > div'\n          ) as HTMLDivElement;\n          autogrow.innerText = this.value + String.fromCharCode(10);\n        }\n\n        if (this.cursorStart > -1 && this.cursorEnd > -1) {\n          this.inputElement.setSelectionRange(this.cursorStart, this.cursorEnd);\n          this.cursorStart = -1;\n          this.cursorEnd = -1;\n        }\n      }\n    }\n  }\n\n  private onDateUpdated(dates: Date[], isoFormatDate: string) {\n    if (dates.length > 0) {\n      this.isoFormattedDate = isoFormatDate;\n      this.inputElement.value = this.dateElement.formatDate(\n        dates[0],\n        this.dateElement.altFormat\n      );\n    }\n  }\n\n  public getDisplayValue() {\n    return this.inputElement.value;\n  }\n\n  private onDateReady() {\n    window.setTimeout(() => {\n      if (this.dateElement) {\n        if (this.value) {\n          this.inputElement.value = this.dateElement.formatDate(\n            this.dateElement.parseDate(this.value),\n            this.dateElement.altFormat\n          );\n          this.dateElement.setDate(this.value);\n        }\n\n        this.loading = false;\n      }\n    }, 0);\n  }\n\n  private onDateClose() {\n    if (this.isoFormattedDate) {\n      this.setValue(this.isoFormattedDate);\n      this.fireEvent('blur');\n    }\n  }\n\n  private handleClear(event: any): void {\n    event.stopPropagation();\n    event.preventDefault();\n    this.setValue(null);\n  }\n\n  private updateValue(value: string): void {\n    const cursorStart = this.inputElement.selectionStart;\n    const cursorEnd = this.inputElement.selectionEnd;\n\n    const sanitized = this.sanitizeGSM(value);\n\n    if (sanitized !== value) {\n      this.cursorStart = cursorStart;\n      this.cursorEnd = cursorEnd;\n    }\n\n    this.value = sanitized;\n\n    if (this.textarea) {\n      this.inputElement.value = this.value;\n    }\n\n    if (this.counterElement) {\n      this.counterElement.text = value;\n    }\n  }\n\n  private sanitizeGSM(text: string): string {\n    return this.gsm ? sanitize(text) : text;\n  }\n\n  private handleChange(update: any): void {\n    if (this.disabled) {\n      return;\n    }\n    this.updateValue(update.target.value);\n    this.fireEvent('change');\n  }\n\n  private handleDateClick(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.dateElement.open();\n    this.dateElement.focus();\n  }\n\n  private handleContainerClick(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    if (this.inputElement) {\n      this.inputElement.focus();\n    } else {\n      this.handleDateClick();\n    }\n  }\n\n  private handleInput(update: any): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.updateValue(update.target.value);\n    this.setValues([this.value]);\n    this.fireEvent('input');\n  }\n\n  /** we just return the value since it should be a string */\n  public serializeValue(value: any): string {\n    return value;\n  }\n\n  public getParentModax(): Modax {\n    let parent = this as HTMLElement;\n\n    while (parent) {\n      if (parent.parentElement) {\n        parent = parent.parentElement;\n      } else {\n        parent = (parent as any).getRootNode().host;\n      }\n\n      if (!parent) {\n        return null;\n      }\n\n      if (parent.tagName == 'TEMBA-MODAX') {\n        return parent as Modax;\n      }\n    }\n  }\n\n  public getParentForm(): HTMLFormElement {\n    let parent = this as HTMLElement;\n\n    while (parent) {\n      if (parent.parentElement) {\n        parent = parent.parentElement;\n      } else {\n        parent = (parent as any).getRootNode().host;\n      }\n\n      if (!parent) {\n        return null;\n      }\n\n      if (parent.tagName === 'FORM') {\n        return parent as HTMLFormElement;\n      }\n    }\n  }\n\n  public click(): void {\n    super.click();\n    this.handleContainerClick();\n  }\n\n  // TODO make this a formelement and have contactsearch set the root\n  public render(): TemplateResult {\n    const containerStyle = {\n      height: `${this.textarea ? '100%' : 'auto'}`,\n    };\n\n    const clear =\n      this.clearable && this.inputElement && this.inputElement.value\n        ? html`<temba-icon\n            name=\"x\"\n            class=\"clear-icon\"\n            @click=${this.handleClear}\n          />`\n        : null;\n\n    let input = html`\n      <input\n        class=\"textinput\"\n        name=${this.name}\n        type=\"${this.password ? 'password' : 'text'}\"\n        maxlength=\"${ifDefined(this.maxlength)}\"\n        @change=${this.handleChange}\n        @input=${this.handleInput}\n        @blur=${this.blur}\n        @keydown=${(e: KeyboardEvent) => {\n          if (e.key === 'Enter') {\n            // eslint-disable-next-line @typescript-eslint/no-this-alias\n            const input = this;\n\n            if (this.submitOnEnter) {\n              const parentModax = input.getParentModax();\n              const parentForm = !parentModax ? input.getParentForm() : null;\n\n              this.value = this.values[0];\n              this.fireEvent('change');\n\n              // if we don't have something to submit then bail\n              if (!parentModax && !parentForm) {\n                return false;\n              }\n\n              input.blur();\n\n              // look for a form to submit\n              window.setTimeout(function () {\n                // first, look for a modax that contains us\n                const modax = input.getParentModax();\n                if (modax) {\n                  input.blur();\n\n                  modax.submit();\n                } else {\n                  // otherwise, just look for a vanilla submit button\n                  const form = input.getParentForm();\n\n                  if (form) {\n                    const submitButton = form.querySelector(\n                      \"input[type='submit']\"\n                    ) as HTMLInputElement;\n                    if (submitButton) {\n                      submitButton.click();\n                    } else {\n                      form.submit();\n                    }\n                  }\n                }\n              }, 10);\n              // this is needed for firefox, would be nice to\n              // find a way to do this with a callback instead\n            }\n          }\n        }}\n        placeholder=${this.placeholder}\n        .value=${this.value}\n        .disabled=${this.disabled}\n      />\n    `;\n\n    if (this.textarea) {\n      input = html`\n        <textarea\n          class=\"textinput\"\n          name=${this.name}\n          placeholder=${this.placeholder}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          @blur=${this.blur}\n          .value=${this.value}\n          .disabled=${this.disabled}\n        ></textarea>\n      `;\n\n      if (this.autogrow) {\n        input = html` <div class=\"grow-wrap\">\n          <div></div>\n          ${input}\n        </div>`;\n      }\n    }\n\n    if (this.datepicker || this.datetimepicker) {\n      input = html`\n        <input\n          class=\"textinput withdate ${this.loading ? 'loading' : ''}\"\n          name=${this.name}\n          type=\"text\"\n          @click=${this.handleDateClick}\n          @focus=${this.handleDateClick}\n          @keydown=${(e: any) => {\n            e.preventDefault();\n          }}\n          readonly=\"true\"\n          placeholder=\"${this.placeholder}\"\n          .value=\"${this.value}\"\n          ?disabled=${this.disabled}\n        />\n        <lit-flatpickr\n          class=\"datepicker hidden\"\n          altInput\n          altFormat=\"${this.datepicker ? 'F j, Y' : 'F j, Y h:i K'}\"\n          dateFormat=\"${this.datepicker ? 'Y-m-d' : 'Z'}\"\n          .onValueUpdate=${this.onDateUpdated}\n          .onReady=${this.onDateReady}\n          .onClose=${this.onDateClose}\n          ?enableTime=${this.datetimepicker}\n        ></lit-flatpickr>\n      `;\n    }\n\n    return html`\n      <temba-field\n        name=${this.name}\n        .label=\"${this.label}\"\n        .helpText=\"${this.helpText}\"\n        .errors=${this.errors}\n        .widgetOnly=${this.widgetOnly}\n        .hideLabel=${this.hideLabel}\n        .disabled=${this.disabled}\n      >\n        <div\n          class=\"input-container\"\n          style=${styleMap(containerStyle)}\n          @click=${this.handleContainerClick}\n        >\n          <slot name=\"prefix\"></slot>\n          ${input} ${clear}\n          <slot></slot>\n        </div>\n      </temba-field>\n    `;\n  }\n}\n"]}

package/out-tsc/src/vectoricon/VectorIcon.js

@@ -3,12 +3,13 @@ import { LitElement, html, css } from 'lit';
 import { property } from 'lit/decorators';
 import { getClasses } from '../utils';
 // for cache busting, increase whenever the icon set changes
-const ICON_VERSION = 6;
+const ICON_VERSION = 12;
 export class VectorIcon extends LitElement {
     constructor() {
         super();
         this.size = 1;
         this.animationDuration = 200;
+        this.href = '';
         this.steps = 2;
         this.easing = 'cubic-bezier(0.68, -0.55, 0.265, 1.55)';
     }
@@ -24,7 +25,7 @@ export class VectorIcon extends LitElement {
         padding-bottom: 0.2em;
       }
 
-      svg {
+      .sheet {
         fill: var(--icon-color);
         transform: scale(1);
         transition: fill 100ms ease-in-out,
@@ -33,28 +34,28 @@ export class VectorIcon extends LitElement {
           margin 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
       }
 
-      svg.spin {
+      .sheet.spin {
         transform: rotate(0deg);
       }
 
-      svg.spin-1 {
+      .sheet.spin-1 {
         transform: rotate(180deg);
       }
 
-      svg.spin-2 {
+      .sheet.spin-2 {
         transform: rotate(360deg);
       }
 
-      svg.spin-3 {
+      .sheet.spin-3 {
         transform: rotate(0deg);
         transition-duration: 0ms !important;
       }
 
-      svg.pulse {
+      .sheet.pulse {
         transform: scale(1);
       }
 
-      svg.pulse-1 {
+      .sheet.pulse-1 {
         transform: scale(1.2);
       }
 
@@ -110,6 +111,11 @@ export class VectorIcon extends LitElement {
             }
         }
     }
+    handleClicked() {
+        if (this.animateClick) {
+            this.animationStep = 1;
+        }
+    }
     updated(changes) {
         super.updated(changes);
         if (changes.has('animationStep')) {
@@ -138,10 +144,11 @@ export class VectorIcon extends LitElement {
     render() {
         return html `
       <div
+        @click=${this.handleClicked}
         class="wrapper ${getClasses({
             clickable: this.clickable,
             circled: this.circled,
-            animate: !!this.animateChange,
+            animate: !!this.animateChange || !!this.animateClick,
         })}"
       >
         <svg
@@ -150,17 +157,17 @@ export class VectorIcon extends LitElement {
             this.steps}ms
           ${this.easing}"
           class="${getClasses({
+            sheet: this.href === '',
             [this.animateChange]: !!this.animateChange,
             [this.animateChange + '-' + this.animationStep]: this.animationStep > 0,
+            [this.animateClick]: !!this.animateClick,
+            [this.animateClick + '-' + this.animationStep]: this.animationStep > 0,
         })}"
         >
           <use
-            href="${this.prefix ||
-            window.static_url ||
-            '/static/'}icons/symbol-defs.svg?v=${ICON_VERSION}#icon-${this
-            .lastName ||
-            this.name ||
-            this.id}"
+            href="${this.href
+            ? this.href
+            : `${this.prefix || window.static_url || '/static/'}icons/symbol-defs.svg?v=${ICON_VERSION}#icon-${this.lastName || this.name || this.id}`}"
           />
         </svg>
       </div>
@@ -188,9 +195,15 @@ __decorate([
 __decorate([
     property({ type: String })
 ], VectorIcon.prototype, "animateChange", void 0);
+__decorate([
+    property({ type: String })
+], VectorIcon.prototype, "animateClick", void 0);
 __decorate([
     property({ type: Number })
 ], VectorIcon.prototype, "animationDuration", void 0);
+__decorate([
+    property({ type: String })
+], VectorIcon.prototype, "href", void 0);
 __decorate([
     property({ type: Number, attribute: false })
 ], VectorIcon.prototype, "steps", void 0);

package/out-tsc/src/vectoricon/VectorIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"VectorIcon.js","sourceRoot":"","sources":["../../../src/vectoricon/VectorIcon.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators';\n\nimport { getClasses } from '../utils';\n\n// for cache busting, increase whenever the icon set changes\nconst ICON_VERSION = 6;\n\nexport class VectorIcon extends LitElement {\n  @property({ type: String })\n  name: string;\n\n  @property({ type: String })\n  prefix: string;\n\n  // same as name but without implicit coloring\n  @property({ type: String })\n  id: string;\n\n  @property({ type: Number })\n  size = 1;\n\n  @property({ type: Boolean })\n  clickable: boolean;\n\n  @property({ type: Boolean })\n  circled: boolean;\n\n  @property({ type: String })\n  animateChange: string;\n\n  @property({ type: Number })\n  animationDuration = 200;\n\n  @property({ type: Number, attribute: false })\n  steps = 2;\n\n  @property({ type: Number, attribute: false })\n  animationStep: number;\n\n  @property({ type: String })\n  easing = 'cubic-bezier(0.68, -0.55, 0.265, 1.55)';\n\n  static get styles() {\n    return css`\n      :host {\n        margin: auto;\n        --color1: var(--icon-color);\n      }\n\n      :host([id='flow']),\n      :host([name='flow']) {\n        padding-bottom: 0.2em;\n      }\n\n      svg {\n        fill: var(--icon-color);\n        transform: scale(1);\n        transition: fill 100ms ease-in-out,\n          background 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n          padding 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n          margin 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55);\n      }\n\n      svg.spin {\n        transform: rotate(0deg);\n      }\n\n      svg.spin-1 {\n        transform: rotate(180deg);\n      }\n\n      svg.spin-2 {\n        transform: rotate(360deg);\n      }\n\n      svg.spin-3 {\n        transform: rotate(0deg);\n        transition-duration: 0ms !important;\n      }\n\n      svg.pulse {\n        transform: scale(1);\n      }\n\n      svg.pulse-1 {\n        transform: scale(1.2);\n      }\n\n      .clickable:hover {\n        cursor: pointer;\n        fill: var(--color-link-primary);\n        background: rgb(255, 255, 255);\n      }\n\n      .circled {\n        background: rgb(240, 240, 240);\n        padding: 0.15em;\n        margin: -0.15em;\n        box-shadow: var(--shadow);\n      }\n\n      .wrapper {\n        display: flex;\n        flex-direction: column;\n        border-radius: 999px;\n        transition: background 200ms linear,\n          transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n          padding 150ms linear, margin 150ms linear;\n      }\n\n      .wrapper.clickable {\n        transform: scale(1);\n      }\n\n      .wrapper.clickable:hover {\n        --icon-circle-size: 0.35em;\n        --icon-background: var(--icon-color-circle-hover);\n      }\n\n      .wrapper.clickable {\n        padding: var(--icon-circle-size);\n        margin: calc(-1 * var(--icon-circle-size));\n        background: var(--icon-background);\n      }\n    `;\n  }\n\n  constructor() {\n    super();\n  }\n\n  private lastName: string;\n\n  public firstUpdated(changes: Map<string, any>) {\n    super.firstUpdated(changes);\n    if (changes.has('animateChange')) {\n      // set our default duration if we need one\n      if (!changes.has('animationDuration')) {\n        this.animationDuration = this.steps * this.animationDuration;\n      }\n\n      if (this.animateChange === 'spin') {\n        this.steps = 3;\n        this.animationDuration = 400;\n        this.easing = 'linear';\n      }\n    }\n  }\n\n  public updated(changes: Map<string, any>) {\n    super.updated(changes);\n\n    if (changes.has('animationStep')) {\n      // if we are halfway through, change the icon\n      if (this.lastName && this.animationStep >= this.steps / 2) {\n        this.lastName = null;\n        this.requestUpdate();\n      }\n\n      setTimeout(() => {\n        if (this.animationStep > 0 && this.animationStep < this.steps) {\n          this.animationStep++;\n        } else {\n          this.animationStep = 0;\n        }\n      }, this.animationDuration / this.steps);\n    }\n\n    if (changes.has('name') && this.animateChange) {\n      this.lastName = changes.get('name');\n\n      // our name changed, lets animate it\n      if (this.lastName && this.animateChange) {\n        this.animationStep = 1;\n      }\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div\n        class=\"wrapper ${getClasses({\n          clickable: this.clickable,\n          circled: this.circled,\n          animate: !!this.animateChange,\n        })}\"\n      >\n        <svg\n          style=\"height:${this.size}em;width:${this\n            .size}em;transition:transform ${this.animationDuration /\n          this.steps}ms\n          ${this.easing}\"\n          class=\"${getClasses({\n            [this.animateChange]: !!this.animateChange,\n            [this.animateChange + '-' + this.animationStep]:\n              this.animationStep > 0,\n          })}\"\n        >\n          <use\n            href=\"${this.prefix ||\n            (window as any).static_url ||\n            '/static/'}icons/symbol-defs.svg?v=${ICON_VERSION}#icon-${this\n              .lastName ||\n            this.name ||\n            this.id}\"\n          />\n        </svg>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"VectorIcon.js","sourceRoot":"","sources":["../../../src/vectoricon/VectorIcon.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators';\n\nimport { getClasses } from '../utils';\n\n// for cache busting, increase whenever the icon set changes\nconst ICON_VERSION = 12;\n\nexport class VectorIcon extends LitElement {\n  @property({ type: String })\n  name: string;\n\n  @property({ type: String })\n  prefix: string;\n\n  // same as name but without implicit coloring\n  @property({ type: String })\n  id: string;\n\n  @property({ type: Number })\n  size = 1;\n\n  @property({ type: Boolean })\n  clickable: boolean;\n\n  @property({ type: Boolean })\n  circled: boolean;\n\n  @property({ type: String })\n  animateChange: string;\n\n  @property({ type: String })\n  animateClick: string;\n\n  @property({ type: Number })\n  animationDuration = 200;\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: Number, attribute: false })\n  steps = 2;\n\n  @property({ type: Number, attribute: false })\n  animationStep: number;\n\n  @property({ type: String })\n  easing = 'cubic-bezier(0.68, -0.55, 0.265, 1.55)';\n\n  static get styles() {\n    return css`\n      :host {\n        margin: auto;\n        --color1: var(--icon-color);\n      }\n\n      :host([id='flow']),\n      :host([name='flow']) {\n        padding-bottom: 0.2em;\n      }\n\n      .sheet {\n        fill: var(--icon-color);\n        transform: scale(1);\n        transition: fill 100ms ease-in-out,\n          background 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n          padding 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n          margin 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55);\n      }\n\n      .sheet.spin {\n        transform: rotate(0deg);\n      }\n\n      .sheet.spin-1 {\n        transform: rotate(180deg);\n      }\n\n      .sheet.spin-2 {\n        transform: rotate(360deg);\n      }\n\n      .sheet.spin-3 {\n        transform: rotate(0deg);\n        transition-duration: 0ms !important;\n      }\n\n      .sheet.pulse {\n        transform: scale(1);\n      }\n\n      .sheet.pulse-1 {\n        transform: scale(1.2);\n      }\n\n      .clickable:hover {\n        cursor: pointer;\n        fill: var(--color-link-primary);\n        background: rgb(255, 255, 255);\n      }\n\n      .circled {\n        background: rgb(240, 240, 240);\n        padding: 0.15em;\n        margin: -0.15em;\n        box-shadow: var(--shadow);\n      }\n\n      .wrapper {\n        display: flex;\n        flex-direction: column;\n        border-radius: 999px;\n        transition: background 200ms linear,\n          transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n          padding 150ms linear, margin 150ms linear;\n      }\n\n      .wrapper.clickable {\n        transform: scale(1);\n      }\n\n      .wrapper.clickable:hover {\n        --icon-circle-size: 0.35em;\n        --icon-background: var(--icon-color-circle-hover);\n      }\n\n      .wrapper.clickable {\n        padding: var(--icon-circle-size);\n        margin: calc(-1 * var(--icon-circle-size));\n        background: var(--icon-background);\n      }\n    `;\n  }\n\n  constructor() {\n    super();\n  }\n\n  private lastName: string;\n\n  public firstUpdated(changes: Map<string, any>) {\n    super.firstUpdated(changes);\n    if (changes.has('animateChange')) {\n      // set our default duration if we need one\n      if (!changes.has('animationDuration')) {\n        this.animationDuration = this.steps * this.animationDuration;\n      }\n\n      if (this.animateChange === 'spin') {\n        this.steps = 3;\n        this.animationDuration = 400;\n        this.easing = 'linear';\n      }\n    }\n  }\n\n  public handleClicked() {\n    if (this.animateClick) {\n      this.animationStep = 1;\n    }\n  }\n\n  public updated(changes: Map<string, any>) {\n    super.updated(changes);\n\n    if (changes.has('animationStep')) {\n      // if we are halfway through, change the icon\n      if (this.lastName && this.animationStep >= this.steps / 2) {\n        this.lastName = null;\n        this.requestUpdate();\n      }\n\n      setTimeout(() => {\n        if (this.animationStep > 0 && this.animationStep < this.steps) {\n          this.animationStep++;\n        } else {\n          this.animationStep = 0;\n        }\n      }, this.animationDuration / this.steps);\n    }\n\n    if (changes.has('name') && this.animateChange) {\n      this.lastName = changes.get('name');\n\n      // our name changed, lets animate it\n      if (this.lastName && this.animateChange) {\n        this.animationStep = 1;\n      }\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div\n        @click=${this.handleClicked}\n        class=\"wrapper ${getClasses({\n          clickable: this.clickable,\n          circled: this.circled,\n          animate: !!this.animateChange || !!this.animateClick,\n        })}\"\n      >\n        <svg\n          style=\"height:${this.size}em;width:${this\n            .size}em;transition:transform ${this.animationDuration /\n          this.steps}ms\n          ${this.easing}\"\n          class=\"${getClasses({\n            sheet: this.href === '',\n            [this.animateChange]: !!this.animateChange,\n            [this.animateChange + '-' + this.animationStep]:\n              this.animationStep > 0,\n            [this.animateClick]: !!this.animateClick,\n            [this.animateClick + '-' + this.animationStep]:\n              this.animationStep > 0,\n          })}\"\n        >\n          <use\n            href=\"${this.href\n              ? this.href\n              : `${\n                  this.prefix || (window as any).static_url || '/static/'\n                }icons/symbol-defs.svg?v=${ICON_VERSION}#icon-${\n                  this.lastName || this.name || this.id\n                }`}\"\n          />\n        </svg>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/temba-modules.js

@@ -25,6 +25,12 @@ import { Anchor } from './src/anchor/Anchor';
 import { Dropdown } from './src/dropdown/Dropdown';
 import { TabPane } from './src/tabpane/TabPane';
 import { Tab } from './src/tabpane/Tab';
+import Label from './src/label/Label';
+import { ContactName } from './src/contacts/ContactName';
+import { ContactUrn } from './src/contacts/ContactUrn';
+import { ContactFields } from './src/contacts/ContactFields';
+import { ContactFieldEditor } from './src/contacts/ContactFieldEditor';
+import { ContactBadges } from './src/contacts/ContactBadges';
 export function addCustomElement(name, comp) {
     if (!window.customElements.get(name)) {
         window.customElements.define(name, comp);
@@ -42,6 +48,10 @@ addCustomElement('temba-loading', Loading);
 addCustomElement('temba-button', Button);
 addCustomElement('temba-omnibox', Omnibox);
 addCustomElement('temba-tip', Tip);
+addCustomElement('temba-contact-name', ContactName);
+addCustomElement('temba-contact-field', ContactFieldEditor);
+addCustomElement('temba-contact-fields', ContactFields);
+addCustomElement('temba-urn', ContactUrn);
 addCustomElement('temba-field', FormField);
 addCustomElement('temba-dialog', Dialog);
 addCustomElement('temba-modax', Modax);
@@ -51,10 +61,12 @@ addCustomElement('temba-contact-chat', ContactChat);
 addCustomElement('temba-contact-details', ContactDetails);
 addCustomElement('temba-ticket-list', TicketList);
 addCustomElement('temba-list', TembaList);
+addCustomElement('temba-label', Label);
 addCustomElement('temba-menu', TembaMenu);
 addCustomElement('temba-contact-search', ContactSearch);
 addCustomElement('temba-icon', VectorIcon);
 addCustomElement('temba-dropdown', Dropdown);
 addCustomElement('temba-tabs', TabPane);
 addCustomElement('temba-tab', Tab);
+addCustomElement('temba-contact-groups', ContactBadges);
 //# sourceMappingURL=temba-modules.js.map

package/out-tsc/temba-modules.js.map

@@ -1 +1 @@
-{"version":3,"file":"temba-modules.js","sourceRoot":"","sources":["../temba-modules.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,MAAM,UAAU,gBAAgB,CAAC,IAAY,EAAE,IAAS;IACtD,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;QACpC,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;KAC1C;AACH,CAAC;AAED,gBAAgB,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;AACzC,gBAAgB,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;AACvC,gBAAgB,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;AACvC,gBAAgB,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC;AAC/C,gBAAgB,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC;AACjD,gBAAgB,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;AAC7C,gBAAgB,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;AACzC,gBAAgB,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;AAC3C,gBAAgB,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;AAC3C,gBAAgB,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;AACzC,gBAAgB,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;AAC3C,gBAAgB,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;AAEnC,gBAAgB,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;AAC3C,gBAAgB,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;AACzC,gBAAgB,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;AACvC,gBAAgB,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC;AAC/C,gBAAgB,CAAC,uBAAuB,EAAE,cAAc,CAAC,CAAC;AAC1D,gBAAgB,CAAC,oBAAoB,EAAE,WAAW,CAAC,CAAC;AACpD,gBAAgB,CAAC,uBAAuB,EAAE,cAAc,CAAC,CAAC;AAC1D,gBAAgB,CAAC,mBAAmB,EAAE,UAAU,CAAC,CAAC;AAClD,gBAAgB,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;AAC1C,gBAAgB,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;AAC1C,gBAAgB,CAAC,sBAAsB,EAAE,aAAa,CAAC,CAAC;AACxD,gBAAgB,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;AAC3C,gBAAgB,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;AAC7C,gBAAgB,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;AACxC,gBAAgB,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC","sourcesContent":["import { Checkbox } from './src/checkbox/Checkbox';\nimport { TextInput } from './src/textinput/TextInput';\nimport { Store } from './src/store/Store';\nimport { Select } from './src/select/Select';\nimport { Completion } from './src/completion/Completion';\nimport { Modax } from './src/dialog/Modax';\nimport { Dialog } from './src/dialog/Dialog';\nimport { Button } from './src/button/Button';\nimport { FormField } from './src/formfield/FormField';\nimport { Loading } from './src/loading/Loading';\nimport { CharCount } from './src/charcount/CharCount';\nimport { Options } from './src/options/Options';\nimport { ContactChat } from './src/contacts/ContactChat';\nimport { ContactHistory } from './src/contacts/ContactHistory';\nimport { TicketList } from './src/list/TicketList';\nimport { ContactDetails } from './src/contacts/ContactDetails';\nimport { TembaList } from './src/list/TembaList';\nimport { ContactSearch } from './src/contactsearch/ContactSearch';\nimport { VectorIcon } from './src/vectoricon/VectorIcon';\nimport { Alert } from './src/alert/Alert';\nimport { Omnibox } from './src/omnibox/Omnibox';\nimport { Tip } from './src/tip/Tip';\nimport { TembaMenu } from './src/list/TembaMenu';\nimport { Anchor } from './src/anchor/Anchor';\nimport { Dropdown } from './src/dropdown/Dropdown';\nimport { TabPane } from './src/tabpane/TabPane';\nimport { Tab } from './src/tabpane/Tab';\n\nexport function addCustomElement(name: string, comp: any) {\n  if (!window.customElements.get(name)) {\n    window.customElements.define(name, comp);\n  }\n}\n\naddCustomElement('temba-anchor', Anchor);\naddCustomElement('temba-alert', Alert);\naddCustomElement('temba-store', Store);\naddCustomElement('temba-textinput', TextInput);\naddCustomElement('temba-completion', Completion);\naddCustomElement('temba-checkbox', Checkbox);\naddCustomElement('temba-select', Select);\naddCustomElement('temba-options', Options);\naddCustomElement('temba-loading', Loading);\naddCustomElement('temba-button', Button);\naddCustomElement('temba-omnibox', Omnibox);\naddCustomElement('temba-tip', Tip);\n\naddCustomElement('temba-field', FormField);\naddCustomElement('temba-dialog', Dialog);\naddCustomElement('temba-modax', Modax);\naddCustomElement('temba-charcount', CharCount);\naddCustomElement('temba-contact-history', ContactHistory);\naddCustomElement('temba-contact-chat', ContactChat);\naddCustomElement('temba-contact-details', ContactDetails);\naddCustomElement('temba-ticket-list', TicketList);\naddCustomElement('temba-list', TembaList);\naddCustomElement('temba-menu', TembaMenu);\naddCustomElement('temba-contact-search', ContactSearch);\naddCustomElement('temba-icon', VectorIcon);\naddCustomElement('temba-dropdown', Dropdown);\naddCustomElement('temba-tabs', TabPane);\naddCustomElement('temba-tab', Tab);\n"]}
+{"version":3,"file":"temba-modules.js","sourceRoot":"","sources":["../temba-modules.ts"],"names":[],"mappings":"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","sourcesContent":["import { Checkbox } from './src/checkbox/Checkbox';\nimport { TextInput } from './src/textinput/TextInput';\nimport { Store } from './src/store/Store';\nimport { Select } from './src/select/Select';\nimport { Completion } from './src/completion/Completion';\nimport { Modax } from './src/dialog/Modax';\nimport { Dialog } from './src/dialog/Dialog';\nimport { Button } from './src/button/Button';\nimport { FormField } from './src/formfield/FormField';\nimport { Loading } from './src/loading/Loading';\nimport { CharCount } from './src/charcount/CharCount';\nimport { Options } from './src/options/Options';\nimport { ContactChat } from './src/contacts/ContactChat';\nimport { ContactHistory } from './src/contacts/ContactHistory';\nimport { TicketList } from './src/list/TicketList';\nimport { ContactDetails } from './src/contacts/ContactDetails';\nimport { TembaList } from './src/list/TembaList';\nimport { ContactSearch } from './src/contactsearch/ContactSearch';\nimport { VectorIcon } from './src/vectoricon/VectorIcon';\nimport { Alert } from './src/alert/Alert';\nimport { Omnibox } from './src/omnibox/Omnibox';\nimport { Tip } from './src/tip/Tip';\nimport { TembaMenu } from './src/list/TembaMenu';\nimport { Anchor } from './src/anchor/Anchor';\nimport { Dropdown } from './src/dropdown/Dropdown';\nimport { TabPane } from './src/tabpane/TabPane';\nimport { Tab } from './src/tabpane/Tab';\nimport Label from './src/label/Label';\nimport { ContactName } from './src/contacts/ContactName';\nimport { ContactUrn } from './src/contacts/ContactUrn';\nimport { ContactFields } from './src/contacts/ContactFields';\nimport { ContactFieldEditor } from './src/contacts/ContactFieldEditor';\n\nimport { ContactBadges } from './src/contacts/ContactBadges';\n\nexport function addCustomElement(name: string, comp: any) {\n  if (!window.customElements.get(name)) {\n    window.customElements.define(name, comp);\n  }\n}\n\naddCustomElement('temba-anchor', Anchor);\naddCustomElement('temba-alert', Alert);\naddCustomElement('temba-store', Store);\naddCustomElement('temba-textinput', TextInput);\naddCustomElement('temba-completion', Completion);\naddCustomElement('temba-checkbox', Checkbox);\naddCustomElement('temba-select', Select);\naddCustomElement('temba-options', Options);\naddCustomElement('temba-loading', Loading);\naddCustomElement('temba-button', Button);\naddCustomElement('temba-omnibox', Omnibox);\naddCustomElement('temba-tip', Tip);\naddCustomElement('temba-contact-name', ContactName);\naddCustomElement('temba-contact-field', ContactFieldEditor);\naddCustomElement('temba-contact-fields', ContactFields);\naddCustomElement('temba-urn', ContactUrn);\n\naddCustomElement('temba-field', FormField);\naddCustomElement('temba-dialog', Dialog);\naddCustomElement('temba-modax', Modax);\naddCustomElement('temba-charcount', CharCount);\naddCustomElement('temba-contact-history', ContactHistory);\naddCustomElement('temba-contact-chat', ContactChat);\naddCustomElement('temba-contact-details', ContactDetails);\naddCustomElement('temba-ticket-list', TicketList);\naddCustomElement('temba-list', TembaList);\naddCustomElement('temba-label', Label);\naddCustomElement('temba-menu', TembaMenu);\naddCustomElement('temba-contact-search', ContactSearch);\naddCustomElement('temba-icon', VectorIcon);\naddCustomElement('temba-dropdown', Dropdown);\naddCustomElement('temba-tabs', TabPane);\naddCustomElement('temba-tab', Tab);\naddCustomElement('temba-contact-groups', ContactBadges);\n"]}

package/out-tsc/test/temba-contact-history.test.js

@@ -61,7 +61,7 @@ describe('temba-contact-history', () => {
             const group = history.shadowRoot.querySelector(`.event-count[data-group-index='${idx}']`);
             group.click();
         }
-        await waitFor(500);
+        await waitFor(800);
         await assertScreenshot('contacts/history-expanded', getHistoryClip(history));
     });
 });

package/out-tsc/test/temba-contact-history.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"temba-contact-history.test.js","sourceRoot":"","sources":["../../test/temba-contact-history.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, assert, expect } from '@open-wc/testing';\nimport sinon from 'sinon';\nimport { ContactHistory } from '../src/contacts/ContactHistory';\nimport { stubbable } from '../src/utils';\nimport {\n  assertScreenshot,\n  getClip,\n  getHTML,\n  mockGET,\n} from '../test/utils.test';\nimport './utils.test';\n\nexport const createHistory = async (def: string) => {\n  const parentNode = document.createElement('div');\n  parentNode.setAttribute(\n    'style',\n    'width: 500px;height:750px;display:flex;flex-direction:column;flex-grow:1;min-height:0;'\n  );\n  const history = (await fixture(def, { parentNode })) as ContactHistory;\n\n  // let history fetch start and wait for it\n  await waitFor(0);\n  await history.httpComplete;\n\n  // wait for scroll update\n  await waitFor(0);\n  await history.httpComplete;\n\n  return history;\n};\n\nconst getHistoryHTML = (attrs: any = {} as any) =>\n  // attrs = \"min-height:0;display:flex;flex-grow:1;flex-direction:column\";\n  getHTML('temba-contact-history', attrs);\n\nconst getHistoryClip = (ele: ContactHistory) => {\n  const clip = getClip(ele);\n  clip.height = Math.min(clip.height, 750);\n  clip.bottom = clip.top + clip.height;\n  return clip;\n};\n\n// stub our current date for consistent screenshots\nsinon.stub(stubbable, 'getCurrentDate').callsFake(() => {\n  return new Date('2021-03-31T00:00:00.000-00:00');\n});\n\ndescribe('temba-contact-history', () => {\n  beforeEach(() => {\n    mockGET(\n      /\\/contact\\/history\\/1234\\/.*/,\n      '/test-assets/contacts/history.json'\n    );\n\n    mockGET(\n      /\\/api\\/v2\\/tickets\\.json\\?contact=1234/,\n      '/test-assets/api/tickets.json'\n    );\n  });\n\n  it('can be created', async () => {\n    const history = await createHistory(getHistoryHTML());\n    assert.instanceOf(history, ContactHistory);\n  });\n\n  it('renders history', async () => {\n    const history = await createHistory(\n      getHistoryHTML({\n        uuid: '1234',\n      })\n    );\n\n    await waitFor(500);\n\n    // we should have scrolled to the bottom\n    const events = history.shadowRoot.querySelector('.events');\n    const top = events.scrollHeight - events.getBoundingClientRect().height;\n\n    expect(top).to.equal(533);\n\n    // make sure we actually scrolled to there\n    expect(events.scrollTop).to.equal(top);\n\n    await assertScreenshot('contacts/history', getHistoryClip(history));\n  });\n\n  it('expands event groups', async () => {\n    const history = await createHistory(\n      getHistoryHTML({\n        uuid: '1234',\n      })\n    );\n\n    // our groups with collapsed events\n    const groups = [3, 5, 7];\n    for (const idx of groups) {\n      const group = history.shadowRoot.querySelector(\n        `.event-count[data-group-index='${idx}']`\n      ) as HTMLDivElement;\n      group.click();\n    }\n\n    await waitFor(500);\n\n    await assertScreenshot(\n      'contacts/history-expanded',\n      getHistoryClip(history)\n    );\n  });\n});\n"]}
+{"version":3,"file":"temba-contact-history.test.js","sourceRoot":"","sources":["../../test/temba-contact-history.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, assert, expect } from '@open-wc/testing';\nimport sinon from 'sinon';\nimport { ContactHistory } from '../src/contacts/ContactHistory';\nimport { stubbable } from '../src/utils';\nimport {\n  assertScreenshot,\n  getClip,\n  getHTML,\n  mockGET,\n} from '../test/utils.test';\nimport './utils.test';\n\nexport const createHistory = async (def: string) => {\n  const parentNode = document.createElement('div');\n  parentNode.setAttribute(\n    'style',\n    'width: 500px;height:750px;display:flex;flex-direction:column;flex-grow:1;min-height:0;'\n  );\n  const history = (await fixture(def, { parentNode })) as ContactHistory;\n\n  // let history fetch start and wait for it\n  await waitFor(0);\n  await history.httpComplete;\n\n  // wait for scroll update\n  await waitFor(0);\n  await history.httpComplete;\n\n  return history;\n};\n\nconst getHistoryHTML = (attrs: any = {} as any) =>\n  // attrs = \"min-height:0;display:flex;flex-grow:1;flex-direction:column\";\n  getHTML('temba-contact-history', attrs);\n\nconst getHistoryClip = (ele: ContactHistory) => {\n  const clip = getClip(ele);\n  clip.height = Math.min(clip.height, 750);\n  clip.bottom = clip.top + clip.height;\n  return clip;\n};\n\n// stub our current date for consistent screenshots\nsinon.stub(stubbable, 'getCurrentDate').callsFake(() => {\n  return new Date('2021-03-31T00:00:00.000-00:00');\n});\n\ndescribe('temba-contact-history', () => {\n  beforeEach(() => {\n    mockGET(\n      /\\/contact\\/history\\/1234\\/.*/,\n      '/test-assets/contacts/history.json'\n    );\n\n    mockGET(\n      /\\/api\\/v2\\/tickets\\.json\\?contact=1234/,\n      '/test-assets/api/tickets.json'\n    );\n  });\n\n  it('can be created', async () => {\n    const history = await createHistory(getHistoryHTML());\n    assert.instanceOf(history, ContactHistory);\n  });\n\n  it('renders history', async () => {\n    const history = await createHistory(\n      getHistoryHTML({\n        uuid: '1234',\n      })\n    );\n\n    await waitFor(500);\n\n    // we should have scrolled to the bottom\n    const events = history.shadowRoot.querySelector('.events');\n    const top = events.scrollHeight - events.getBoundingClientRect().height;\n\n    expect(top).to.equal(533);\n\n    // make sure we actually scrolled to there\n    expect(events.scrollTop).to.equal(top);\n\n    await assertScreenshot('contacts/history', getHistoryClip(history));\n  });\n\n  it('expands event groups', async () => {\n    const history = await createHistory(\n      getHistoryHTML({\n        uuid: '1234',\n      })\n    );\n\n    // our groups with collapsed events\n    const groups = [3, 5, 7];\n    for (const idx of groups) {\n      const group = history.shadowRoot.querySelector(\n        `.event-count[data-group-index='${idx}']`\n      ) as HTMLDivElement;\n      group.click();\n    }\n\n    await waitFor(800);\n\n    await assertScreenshot(\n      'contacts/history-expanded',\n      getHistoryClip(history)\n    );\n  });\n});\n"]}