@nyaruka/temba-components 0.129.9 → 0.129.10

package/out-tsc/src/form/Completion.js

@@ -3,13 +3,13 @@ import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { renderCompletionOption, updateInputElementWithCompletion, executeCompletionQuery } from '../excellent/helpers';
-import { FormElement } from './FormElement';
+import { FieldElement } from './FieldElement';
 import { styleMap } from 'lit-html/directives/style-map.js';
 import { msg } from '@lit/localize';
 /**
  * Completion is a text input that handles excellent completion options in a popup
  */
-export class Completion extends FormElement {
+export class Completion extends FieldElement {
     constructor() {
         super(...arguments);
         this.submitOnEnter = false;
@@ -17,11 +17,11 @@ export class Completion extends FormElement {
         this.placeholder = '';
         this.options = [];
         this.name = '';
-        this.value = '';
         this.autogrow = false;
     }
     static get styles() {
         return css `
+      ${super.styles}
       :host {
         display: block;
       }
@@ -72,7 +72,6 @@ export class Completion extends FormElement {
       }
 
       code {
-        background: rgba(0, 0, 0, 0.1);
         padding: 1px 5px;
         border-radius: var(--curvature);
       }
@@ -177,7 +176,7 @@ export class Completion extends FormElement {
             input.focus();
         }
     }
-    render() {
+    renderWidget() {
         const anchorStyles = this.anchorPosition
             ? {
                 top: `${this.anchorPosition.top}px`,
@@ -186,57 +185,52 @@ export class Completion extends FormElement {
             : {};
         const visible = this.options && this.options.length > 0;
         return html `
-      <temba-field
-        name=${this.name}
-        .label=${this.label}
-        .helpText=${this.helpText}
-        .errors=${this.errors}
-        .widgetOnly=${this.widgetOnly}
-      >
-        <div class="comp-container">
-          <div id="anchor" style=${styleMap(anchorStyles)}></div>
-          <temba-textinput
-            name=${this.name}
-            placeholder=${this.placeholder}
-            gsm=${this.gsm}
-            counter=${ifDefined(this.counter)}
-            @keyup=${this.handleKeyUp}
-            @click=${this.handleClick}
-            @input=${this.handleInput}
-            @blur=${this.handleOptionCanceled}
-            maxlength="${ifDefined(this.maxLength)}"
-            .value=${this.value}
-            ?autogrow=${this.autogrow}
-            ?textarea=${this.textarea}
-            ?submitOnEnter=${this.submitOnEnter}
-            style=${this.minHeight
+      <div class="comp-container">
+        <div id="anchor" style=${styleMap(anchorStyles)}></div>
+        <temba-textinput
+          name=${this.name}
+          placeholder=${this.placeholder}
+          gsm=${this.gsm}
+          counter=${ifDefined(this.counter)}
+          @keyup=${this.handleKeyUp}
+          @click=${this.handleClick}
+          @input=${this.handleInput}
+          @blur=${this.handleOptionCanceled}
+          maxlength="${ifDefined(this.maxLength)}"
+          .value=${this.value}
+          ?autogrow=${this.autogrow}
+          ?textarea=${this.textarea}
+          ?submitOnEnter=${this.submitOnEnter}
+          style=${this.minHeight
             ? `--textarea-min-height: ${this.minHeight}px`
             : ''}
-          >
-          </temba-textinput>
-          <temba-options
-            @temba-selection=${this.handleOptionSelection}
-            @temba-canceled=${this.handleOptionCanceled}
-            .renderOption=${renderCompletionOption}
-            .anchorTo=${this.anchorElement}
-            .options=${this.options}
-            ?visible=${visible}
-          >
-            ${this.currentFunction
+        >
+        </temba-textinput>
+        <temba-options
+          @temba-selection=${this.handleOptionSelection}
+          @temba-canceled=${this.handleOptionCanceled}
+          .renderOption=${renderCompletionOption}
+          .anchorTo=${this.anchorElement}
+          .options=${this.options}
+          ?visible=${visible}
+        >
+          ${this.currentFunction
             ? html `
-                  <div class="current-fn">
-                    ${renderCompletionOption(this.currentFunction, true)}
-                  </div>
-                `
+                <div class="current-fn">
+                  ${renderCompletionOption(this.currentFunction, true)}
+                </div>
+              `
             : null}
-            <div class="footer" style="${!visible ? 'display:none' : null}">
-              ${msg('Tab to complete, enter to select')}
-            </div>
-          </temba-options>
-        </div>
-      </temba-field>
+          <div class="footer" style="${!visible ? 'display:none' : null}">
+            ${msg('Tab to complete, enter to select')}
+          </div>
+        </temba-options>
+      </div>
     `;
     }
+    render() {
+        return this.renderField();
+    }
 }
 __decorate([
     property({ type: Number })
@@ -268,9 +262,6 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Completion.prototype, "name", void 0);
-__decorate([
-    property({ type: String })
-], Completion.prototype, "value", void 0);
 __decorate([
     property({ type: Boolean })
 ], Completion.prototype, "textarea", void 0);

package/out-tsc/src/form/Completion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Completion.js","sourceRoot":"","sources":["../../../src/form/Completion.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { TextInput } from './TextInput';\nimport {\n  renderCompletionOption,\n  updateInputElementWithCompletion,\n  executeCompletionQuery\n} from '../excellent/helpers';\n\nimport { FormElement } from './FormElement';\nimport { CompletionOption, Position } from '../interfaces';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { msg } from '@lit/localize';\n\n/**\n * Completion is a text input that handles excellent completion options in a popup\n */\nexport class Completion extends FormElement {\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n      }\n\n      temba-options {\n        --widget-box-shadow-focused: 0 0 4px rgba(0, 0, 0, 0.15);\n        --color-focus: #e6e6e6;\n      }\n\n      .comp-container {\n        position: relative;\n        height: 100%;\n      }\n\n      #anchor {\n        /* background: rgba(132, 40, 158, .1); */\n        position: absolute;\n        visibility: hidden;\n        width: 250px;\n        height: 20px;\n      }\n\n      .fn-marker {\n        font-weight: bold;\n        font-size: 42px;\n      }\n\n      .option-slot {\n        background: #fff;\n      }\n\n      .current-fn {\n        padding: 10px;\n        margin: 5px;\n        background: var(--color-primary-light);\n        color: rgba(0, 0, 0, 0.5);\n        border-radius: var(--curvature-widget);\n        font-size: 90%;\n      }\n\n      .footer {\n        padding: 5px 10px;\n        background: var(--color-primary-light);\n        color: rgba(0, 0, 0, 0.5);\n        font-size: 80%;\n        border-bottom-left-radius: var(--curvature-widget);\n        border-bottom-right-radius: var(--curvature-widget);\n      }\n\n      code {\n        background: rgba(0, 0, 0, 0.1);\n        padding: 1px 5px;\n        border-radius: var(--curvature);\n      }\n    `;\n  }\n\n  @property({ type: Number })\n  maxLength: number;\n\n  @property({ type: Boolean })\n  session: boolean;\n\n  @property({ type: Boolean })\n  submitOnEnter = false;\n\n  @property({ type: Object })\n  anchorPosition: Position = { left: 0, top: 0 };\n\n  @property({ attribute: false })\n  currentFunction: CompletionOption;\n\n  @property({ type: String })\n  placeholder = '';\n\n  @property({ attribute: false })\n  textInputElement: TextInput;\n\n  @property({ attribute: false })\n  anchorElement: HTMLDivElement;\n\n  @property({ type: Array })\n  options: any[] = [];\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: Boolean })\n  textarea: boolean;\n\n  @property({ type: Boolean })\n  gsm: boolean;\n\n  @property({ type: Boolean })\n  disableCompletion: boolean;\n\n  @property({ type: String })\n  counter: string;\n\n  @property({ type: Boolean })\n  autogrow = false;\n\n  @property({ type: Number })\n  minHeight: number;\n\n  private hiddenElement: HTMLInputElement;\n  private query: string;\n\n  public firstUpdated() {\n    this.textInputElement = this.shadowRoot.querySelector(\n      'temba-textinput'\n    ) as TextInput;\n    this.anchorElement = this.shadowRoot.querySelector('#anchor');\n\n    // create our hidden container so it gets included in our host element's form\n    this.hiddenElement = document.createElement('input');\n    this.hiddenElement.setAttribute('type', 'hidden');\n    this.hiddenElement.setAttribute('name', this.getAttribute('name'));\n    this.hiddenElement.setAttribute('value', this.getAttribute('value') || '');\n    this.appendChild(this.hiddenElement);\n  }\n\n  private handleKeyUp(evt: KeyboardEvent) {\n    if (this.disableCompletion) {\n      // if we have options, ignore keys that are meant for them\n      if (this.options && this.options.length > 0) {\n        if (evt.key === 'ArrowUp' || evt.key === 'ArrowDown') {\n          return;\n        }\n\n        if (evt.ctrlKey) {\n          if (evt.key === 'n' || evt.key === 'p') {\n            return;\n          }\n        }\n\n        if (\n          evt.key === 'Enter' ||\n          evt.key === 'Escape' ||\n          evt.key === 'Tab' ||\n          evt.key.startsWith('Control')\n        ) {\n          evt.stopPropagation();\n          evt.preventDefault();\n          return;\n        }\n\n        this.executeQuery(evt.currentTarget as TextInput);\n      }\n    }\n  }\n\n  public hasVisibleOptions() {\n    return this.options.length > 0;\n  }\n\n  private executeQuery(ele: TextInput) {\n    if (this.disableCompletion) {\n      return;\n    }\n\n    if (!ele.inputElement) {\n      return;\n    }\n\n    const result = executeCompletionQuery(ele.inputElement, this.session);\n\n    this.query = result.query;\n    this.options = result.options;\n    this.anchorPosition = result.anchorPosition;\n  }\n\n  private handleClick(evt: MouseEvent) {\n    this.executeQuery(evt.currentTarget as TextInput);\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    // if our cursor changed, lets make sure our scrollbox is showing it\n    if (changedProperties.has('value')) {\n      this.hiddenElement.setAttribute('value', this.value);\n    }\n  }\n\n  private handleInput(evt: KeyboardEvent) {\n    const ele = evt.currentTarget as TextInput;\n    this.executeQuery(ele);\n    this.value = ele.inputElement.value;\n    this.fireEvent('change');\n  }\n\n  private handleOptionCanceled() {\n    // delay in case we are actively selecting\n    window.setTimeout(() => {\n      this.options = [];\n      this.query = '';\n    }, 100);\n  }\n\n  private handleOptionSelection(evt: CustomEvent) {\n    const option = evt.detail.selected as CompletionOption;\n    const tabbed = evt.detail.tabbed;\n\n    updateInputElementWithCompletion(\n      this.query,\n      this.textInputElement.inputElement,\n      option\n    );\n    this.query = '';\n    this.options = [];\n\n    if (tabbed) {\n      this.executeQuery(this.textInputElement);\n    }\n  }\n\n  public getTextInput(): TextInput {\n    return this.textInputElement;\n  }\n\n  public click() {\n    super.click();\n    const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;\n    if (input) {\n      input.click();\n    }\n  }\n\n  public focus() {\n    super.focus();\n    const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;\n    if (input) {\n      input.focus();\n    }\n  }\n\n  public render(): TemplateResult {\n    const anchorStyles = this.anchorPosition\n      ? {\n          top: `${this.anchorPosition.top}px`,\n          left: `${this.anchorPosition.left}px`\n        }\n      : {};\n\n    const visible = this.options && this.options.length > 0;\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      >\n        <div class=\"comp-container\">\n          <div id=\"anchor\" style=${styleMap(anchorStyles)}></div>\n          <temba-textinput\n            name=${this.name}\n            placeholder=${this.placeholder}\n            gsm=${this.gsm}\n            counter=${ifDefined(this.counter)}\n            @keyup=${this.handleKeyUp}\n            @click=${this.handleClick}\n            @input=${this.handleInput}\n            @blur=${this.handleOptionCanceled}\n            maxlength=\"${ifDefined(this.maxLength)}\"\n            .value=${this.value}\n            ?autogrow=${this.autogrow}\n            ?textarea=${this.textarea}\n            ?submitOnEnter=${this.submitOnEnter}\n            style=${this.minHeight\n              ? `--textarea-min-height: ${this.minHeight}px`\n              : ''}\n          >\n          </temba-textinput>\n          <temba-options\n            @temba-selection=${this.handleOptionSelection}\n            @temba-canceled=${this.handleOptionCanceled}\n            .renderOption=${renderCompletionOption}\n            .anchorTo=${this.anchorElement}\n            .options=${this.options}\n            ?visible=${visible}\n          >\n            ${this.currentFunction\n              ? html`\n                  <div class=\"current-fn\">\n                    ${renderCompletionOption(this.currentFunction, true)}\n                  </div>\n                `\n              : null}\n            <div class=\"footer\" style=\"${!visible ? 'display:none' : null}\">\n              ${msg('Tab to complete, enter to select')}\n            </div>\n          </temba-options>\n        </div>\n      </temba-field>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Completion.js","sourceRoot":"","sources":["../../../src/form/Completion.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { TextInput } from './TextInput';\nimport {\n  renderCompletionOption,\n  updateInputElementWithCompletion,\n  executeCompletionQuery\n} from '../excellent/helpers';\n\nimport { FieldElement } from './FieldElement';\nimport { CompletionOption, Position } from '../interfaces';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { msg } from '@lit/localize';\n\n/**\n * Completion is a text input that handles excellent completion options in a popup\n */\nexport class Completion extends FieldElement {\n  static get styles() {\n    return css`\n      ${super.styles}\n      :host {\n        display: block;\n      }\n\n      temba-options {\n        --widget-box-shadow-focused: 0 0 4px rgba(0, 0, 0, 0.15);\n        --color-focus: #e6e6e6;\n      }\n\n      .comp-container {\n        position: relative;\n        height: 100%;\n      }\n\n      #anchor {\n        /* background: rgba(132, 40, 158, .1); */\n        position: absolute;\n        visibility: hidden;\n        width: 250px;\n        height: 20px;\n      }\n\n      .fn-marker {\n        font-weight: bold;\n        font-size: 42px;\n      }\n\n      .option-slot {\n        background: #fff;\n      }\n\n      .current-fn {\n        padding: 10px;\n        margin: 5px;\n        background: var(--color-primary-light);\n        color: rgba(0, 0, 0, 0.5);\n        border-radius: var(--curvature-widget);\n        font-size: 90%;\n      }\n\n      .footer {\n        padding: 5px 10px;\n        background: var(--color-primary-light);\n        color: rgba(0, 0, 0, 0.5);\n        font-size: 80%;\n        border-bottom-left-radius: var(--curvature-widget);\n        border-bottom-right-radius: var(--curvature-widget);\n      }\n\n      code {\n        padding: 1px 5px;\n        border-radius: var(--curvature);\n      }\n    `;\n  }\n\n  @property({ type: Number })\n  maxLength: number;\n\n  @property({ type: Boolean })\n  session: boolean;\n\n  @property({ type: Boolean })\n  submitOnEnter = false;\n\n  @property({ type: Object })\n  anchorPosition: Position = { left: 0, top: 0 };\n\n  @property({ attribute: false })\n  currentFunction: CompletionOption;\n\n  @property({ type: String })\n  placeholder = '';\n\n  @property({ attribute: false })\n  textInputElement: TextInput;\n\n  @property({ attribute: false })\n  anchorElement: HTMLDivElement;\n\n  @property({ type: Array })\n  options: any[] = [];\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: Boolean })\n  textarea: boolean;\n\n  @property({ type: Boolean })\n  gsm: boolean;\n\n  @property({ type: Boolean })\n  disableCompletion: boolean;\n\n  @property({ type: String })\n  counter: string;\n\n  @property({ type: Boolean })\n  autogrow = false;\n\n  @property({ type: Number })\n  minHeight: number;\n\n  private hiddenElement: HTMLInputElement;\n  private query: string;\n\n  public firstUpdated() {\n    this.textInputElement = this.shadowRoot.querySelector(\n      'temba-textinput'\n    ) as TextInput;\n    this.anchorElement = this.shadowRoot.querySelector('#anchor');\n\n    // create our hidden container so it gets included in our host element's form\n    this.hiddenElement = document.createElement('input');\n    this.hiddenElement.setAttribute('type', 'hidden');\n    this.hiddenElement.setAttribute('name', this.getAttribute('name'));\n    this.hiddenElement.setAttribute('value', this.getAttribute('value') || '');\n    this.appendChild(this.hiddenElement);\n  }\n\n  private handleKeyUp(evt: KeyboardEvent) {\n    if (this.disableCompletion) {\n      // if we have options, ignore keys that are meant for them\n      if (this.options && this.options.length > 0) {\n        if (evt.key === 'ArrowUp' || evt.key === 'ArrowDown') {\n          return;\n        }\n\n        if (evt.ctrlKey) {\n          if (evt.key === 'n' || evt.key === 'p') {\n            return;\n          }\n        }\n\n        if (\n          evt.key === 'Enter' ||\n          evt.key === 'Escape' ||\n          evt.key === 'Tab' ||\n          evt.key.startsWith('Control')\n        ) {\n          evt.stopPropagation();\n          evt.preventDefault();\n          return;\n        }\n\n        this.executeQuery(evt.currentTarget as TextInput);\n      }\n    }\n  }\n\n  public hasVisibleOptions() {\n    return this.options.length > 0;\n  }\n\n  private executeQuery(ele: TextInput) {\n    if (this.disableCompletion) {\n      return;\n    }\n\n    if (!ele.inputElement) {\n      return;\n    }\n\n    const result = executeCompletionQuery(ele.inputElement, this.session);\n\n    this.query = result.query;\n    this.options = result.options;\n    this.anchorPosition = result.anchorPosition;\n  }\n\n  private handleClick(evt: MouseEvent) {\n    this.executeQuery(evt.currentTarget as TextInput);\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    // if our cursor changed, lets make sure our scrollbox is showing it\n    if (changedProperties.has('value')) {\n      this.hiddenElement.setAttribute('value', this.value);\n    }\n  }\n\n  private handleInput(evt: KeyboardEvent) {\n    const ele = evt.currentTarget as TextInput;\n    this.executeQuery(ele);\n    this.value = ele.inputElement.value;\n    this.fireEvent('change');\n  }\n\n  private handleOptionCanceled() {\n    // delay in case we are actively selecting\n    window.setTimeout(() => {\n      this.options = [];\n      this.query = '';\n    }, 100);\n  }\n\n  private handleOptionSelection(evt: CustomEvent) {\n    const option = evt.detail.selected as CompletionOption;\n    const tabbed = evt.detail.tabbed;\n\n    updateInputElementWithCompletion(\n      this.query,\n      this.textInputElement.inputElement,\n      option\n    );\n    this.query = '';\n    this.options = [];\n\n    if (tabbed) {\n      this.executeQuery(this.textInputElement);\n    }\n  }\n\n  public getTextInput(): TextInput {\n    return this.textInputElement;\n  }\n\n  public click() {\n    super.click();\n    const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;\n    if (input) {\n      input.click();\n    }\n  }\n\n  public focus() {\n    super.focus();\n    const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;\n    if (input) {\n      input.focus();\n    }\n  }\n\n  protected renderWidget(): TemplateResult {\n    const anchorStyles = this.anchorPosition\n      ? {\n          top: `${this.anchorPosition.top}px`,\n          left: `${this.anchorPosition.left}px`\n        }\n      : {};\n\n    const visible = this.options && this.options.length > 0;\n\n    return html`\n      <div class=\"comp-container\">\n        <div id=\"anchor\" style=${styleMap(anchorStyles)}></div>\n        <temba-textinput\n          name=${this.name}\n          placeholder=${this.placeholder}\n          gsm=${this.gsm}\n          counter=${ifDefined(this.counter)}\n          @keyup=${this.handleKeyUp}\n          @click=${this.handleClick}\n          @input=${this.handleInput}\n          @blur=${this.handleOptionCanceled}\n          maxlength=\"${ifDefined(this.maxLength)}\"\n          .value=${this.value}\n          ?autogrow=${this.autogrow}\n          ?textarea=${this.textarea}\n          ?submitOnEnter=${this.submitOnEnter}\n          style=${this.minHeight\n            ? `--textarea-min-height: ${this.minHeight}px`\n            : ''}\n        >\n        </temba-textinput>\n        <temba-options\n          @temba-selection=${this.handleOptionSelection}\n          @temba-canceled=${this.handleOptionCanceled}\n          .renderOption=${renderCompletionOption}\n          .anchorTo=${this.anchorElement}\n          .options=${this.options}\n          ?visible=${visible}\n        >\n          ${this.currentFunction\n            ? html`\n                <div class=\"current-fn\">\n                  ${renderCompletionOption(this.currentFunction, true)}\n                </div>\n              `\n            : null}\n          <div class=\"footer\" style=\"${!visible ? 'display:none' : null}\">\n            ${msg('Tab to complete, enter to select')}\n          </div>\n        </temba-options>\n      </div>\n    `;\n  }\n\n  public render(): TemplateResult {\n    return this.renderField();\n  }\n}\n"]}

package/out-tsc/src/form/Compose.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
 import { html, css } from 'lit';
-import { FormElement } from './FormElement';
+import { FieldElement } from './FieldElement';
 import { property } from 'lit/decorators.js';
 import { CustomEventType } from '../interfaces';
 import { DEFAULT_MEDIA_ENDPOINT, getClasses } from '../utils';
-export class Compose extends FormElement {
+export class Compose extends FieldElement {
     static get styles() {
         return css `
       :host {
@@ -385,12 +385,11 @@ export class Compose extends FormElement {
         return this.shadowRoot.querySelector('temba-tabs');
     }
     render() {
+        return this.renderField();
+    }
+    renderWidget() {
         return html `
-      <temba-field
-        name=${this.name}
-        .errors=${this.errors}
-        .widgetOnly=${this.widgetOnly}
-        .value=${this.value}
+      <div
         class=${getClasses({
             'active-template': !!this.currentTemplate &&
                 this.currentTab &&
@@ -410,7 +409,7 @@ export class Compose extends FormElement {
         <div class="container">
           <div class="items actions">${this.getActions()}</div>
         </div>
-      </temba-field>
+      </div>
     `;
     }
     handleTemplateChanged(evt) {

package/out-tsc/src/form/Compose.js.map

@@ -1 +1 @@
-{"version":3,"file":"Compose.js","sourceRoot":"","sources":["../../../src/form/Compose.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { FormElement } from './FormElement';\nimport { property } from 'lit/decorators.js';\nimport { Attachment, CustomEventType, Language, Shortcut } from '../interfaces';\nimport { DEFAULT_MEDIA_ENDPOINT, getClasses } from '../utils';\nimport { Completion } from './Completion';\nimport { Select } from './select/Select';\nimport { TabPane } from '../layout/TabPane';\nimport { MediaPicker } from './MediaPicker';\nimport { Tab } from '../layout/Tab';\nimport { TextInput } from './TextInput';\nimport { ShortcutList } from '../list/ShortcutList';\n\nexport interface ComposeValue {\n  text: string;\n  attachments: { uuid: string }[];\n  quick_replies: string[];\n  optin: string;\n  template: string;\n  variables: string[];\n}\n\nexport class Compose extends FormElement {\n  static get styles() {\n    return css`\n      :host {\n        overflow: hidden;\n        border-top-right-radius: var(--curvature);\n        border-top-left-radius: var(--curvature);\n      }\n\n      .active-template .chatbox {\n        display: none;\n      }\n\n      .active-template .actions {\n        border: none;\n      }\n\n      .container {\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n        position: relative;\n        overflow: hidden;\n        border-radius: var(--compose-curvature, var(--curvature-widget));\n        background: var(--color-widget-bg);\n        border: var(--compose-border, 1px solid var(--color-widget-border));\n        transition: all ease-in-out var(--transition-speed);\n        box-shadow: var(--compose-shadow, var(--widget-box-shadow));\n        caret-color: var(--input-caret);\n        --color-widget-bg-focused: transparent;\n        --color-widget-bg: transparent;\n      }\n\n      .chatbox {\n        --color-widget-border: none;\n        --curvature-widget: var(\n          --compose-curvature,\n          var(--curvature) var(--curvature) 0px 0px\n        );\n\n        --widget-box-shadow: none;\n        display: block;\n        flex-grow: 1;\n        --widget-box-shadow-focused: none;\n        --temba-textinput-padding: 1em 1em;\n      }\n\n      .actions {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 0em;\n        background: #f9f9f9;\n      }\n\n      .actions-right {\n        display: flex;\n        align-items: center;\n      }\n\n      temba-charcount {\n        margin-right: 5px;\n        overflow: hidden;\n        --temba-charcount-counts-margin-top: 0px;\n        --temba-charcount-summary-margin-top: 0px;\n        --temba-charcount-summary-position: fixed;\n        --temba-charcount-summary-right: 105px;\n        --temba-charcount-summary-bottom: 105px;\n      }\n\n      .send-error {\n        color: rgba(250, 0, 0, 0.75);\n        font-size: var(--help-text-size);\n        padding: 0.5em;\n      }\n\n      .language {\n        margin-bottom: 0.6em;\n        display: block;\n      }\n\n      .top-right {\n        align-items: center;\n        display: flex;\n      }\n\n      .gutter {\n        align-items: center;\n        display: flex;\n        margin: 0.5em;\n      }\n\n      temba-tabs {\n        --temba-tabs-border-bottom: none;\n        --temba-tabs-border-left: none;\n        --temba-tabs-border-right: none;\n        --temba-tabs-options-padding: 0.25em 0 0 0.25em;\n      }\n\n      temba-completion {\n        --textarea-min-height: 8em;\n      }\n\n      .quick-replies {\n        margin: 0.8em;\n      }\n\n      .optins {\n        margin: 0.8em;\n      }\n\n      .templates {\n        margin: 0.8em;\n      }\n\n      .attachments {\n        min-height: 5em;\n        padding: 0.2em;\n        align-items: center;\n        display: flex;\n        background: #f9f9f9;\n        border-radius: var(--curvature);\n        margin: 0.6em;\n        margin-bottom: 0em;\n      }\n\n      .pane-bottom {\n        border: 0px solid red;\n        --color-placeholder: rgba(0, 0, 0, 0.2);\n        flex-grow: 99;\n      }\n\n      .shortcut-wrapper {\n        max-height: var(--shortcuts-height, 12em);\n        display: flex;\n        flex-direction: row;\n        align-items: stretch;\n        --options-block-shadow: none;\n        --curvature-widget: 0px;\n        --color-options-bg: #fff;\n        border-bottom: 1px solid var(--color-widget-border);\n      }\n\n      temba-shortcuts {\n        flex-grow: 1;\n      }\n    `;\n  }\n\n  @property({ type: Number })\n  index = 1;\n\n  @property({ type: Number })\n  maxAttachments = 3;\n\n  @property({ type: Number })\n  maxLength = 640;\n\n  @property({ type: Number })\n  maxQuickReplies = 10;\n\n  @property({ type: Boolean })\n  completion: boolean;\n\n  @property({ type: Boolean })\n  attachments: boolean;\n\n  @property({ type: Boolean })\n  quickReplies: boolean;\n\n  @property({ type: Boolean })\n  optIns: boolean;\n\n  @property({ type: Boolean })\n  templates: boolean;\n\n  @property({ type: Boolean })\n  counter: boolean;\n\n  @property({ type: Boolean })\n  autogrow: boolean;\n\n  @property({ type: Boolean })\n  shortcuts: boolean;\n\n  @property({ type: String })\n  currentText = '';\n\n  @property({ type: String })\n  initialText = '';\n\n  @property({ type: String })\n  accept = ''; //e.g. \".xls,.xlsx\"\n\n  @property({ type: String, attribute: false })\n  endpoint = DEFAULT_MEDIA_ENDPOINT;\n\n  @property({ type: Boolean, attribute: false })\n  uploading: boolean;\n\n  @property({ type: Array })\n  languages: Language[] = [];\n\n  @property({ type: Array })\n  currentAttachments: Attachment[] = [];\n\n  @property({ type: Array })\n  currentQuickReplies: { name: string; value: string }[] = [];\n\n  @property({ type: Array })\n  currentOptin: { name: string; uuid: string }[] = [];\n\n  @property({ type: Array })\n  variables: string[] = [];\n\n  @property({ type: String })\n  template: string;\n\n  @property({ type: Object })\n  currentTemplate: { name: string; uuid: string };\n\n  // locale for the template\n  @property({ type: String })\n  locale: string;\n\n  @property({ type: String })\n  optinEndpoint = '/api/v2/optins.json';\n\n  @property({ type: String })\n  templateEndpoint = '/api/internal/templates.json';\n\n  @property({ type: Boolean, attribute: false })\n  empty = true;\n\n  @property({ type: Boolean, attribute: 'widget_only' })\n  widgetOnly: boolean;\n\n  @property({ type: Array })\n  errors: string[];\n\n  @property({ type: Object })\n  langValues: {\n    [lang: string]: {\n      text: string;\n      attachments: Attachment[];\n      quick_replies: string[];\n      optin?: { name: string; uuid: string };\n      template?: string;\n      variables?: string[];\n      locale?: string;\n    };\n  } = {};\n\n  @property({ type: String })\n  currentLanguage = 'und';\n\n  @property({ type: Object })\n  currentTab: Tab;\n\n  @property({ type: Boolean })\n  hasPendingText = false;\n\n  @property({ type: Object })\n  activeShortcut: Shortcut;\n\n  public constructor() {\n    super();\n  }\n\n  private isBaseLanguage(): boolean {\n    return (\n      this.currentLanguage == 'und' ||\n      this.currentLanguage == this.languages[0].iso\n    );\n  }\n\n  private handleTabChanged() {\n    const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;\n    this.currentTab = tabs.getCurrentTab();\n    if (this.currentTab && this.currentTab.name === 'Shortcuts') {\n      const shortcuts = this.shadowRoot.querySelector(\n        'temba-shortcuts'\n      ) as ShortcutList;\n      shortcuts.filter = '';\n    }\n    this.setFocusOnChatbox();\n  }\n\n  public firstUpdated(changes: Map<string, any>): void {\n    super.firstUpdated(changes);\n\n    if (changes.has('languages') && this.languages.length > 0) {\n      this.currentLanguage = this.languages[0].iso;\n    }\n\n    if (changes.has('value')) {\n      this.langValues = this.getDeserializedValue() || {};\n      this.variables = this.langValues[this.currentLanguage]?.variables || [];\n      this.template = this.langValues[this.currentLanguage]?.template || null;\n    }\n    this.setFocusOnChatbox();\n  }\n\n  public updated(changes: Map<string, any>): void {\n    super.updated(changes);\n\n    if (changes.has('currentLanguage') && this.langValues) {\n      let langValue = {\n        text: '',\n        attachments: [],\n        quick_replies: []\n      };\n\n      if (this.currentLanguage in this.langValues) {\n        langValue = this.langValues[this.currentLanguage];\n      }\n\n      this.currentText = langValue.text;\n      this.initialText = langValue.text;\n      this.currentAttachments = langValue.attachments;\n      this.currentQuickReplies = (langValue.quick_replies || []).map(\n        (value) => {\n          return { name: value, value };\n        }\n      );\n      this.currentOptin = langValue['optin'] ? [langValue['optin']] : [];\n      this.setFocusOnChatbox();\n\n      // TODO: this feels like it shouldn't be needed\n      const chatbox = this.shadowRoot.querySelector('.chatbox') as any;\n      if (chatbox) {\n        chatbox.value = this.initialText;\n      }\n      this.resetTabs();\n      this.requestUpdate('currentAttachments');\n    }\n\n    if (\n      (this.langValues &&\n        (changes.has('currentText') ||\n          changes.has('currentAttachments') ||\n          changes.has('currentQuickReplies'))) ||\n      changes.has('currentOptin') ||\n      changes.has('currentTemplate') ||\n      changes.has('variables')\n    ) {\n      this.checkIfEmpty();\n\n      const trimmed = this.currentText ? this.currentText.trim() : '';\n      if (\n        trimmed ||\n        (this.currentAttachments || []).length > 0 ||\n        this.currentQuickReplies.length > 0 ||\n        this.variables.length > 0\n      ) {\n        this.langValues[this.currentLanguage] = {\n          text: trimmed,\n          attachments: this.currentAttachments,\n          quick_replies: this.currentQuickReplies.map((option) => option.value),\n          optin: this.currentOptin.length > 0 ? this.currentOptin[0] : null,\n          template: this.currentTemplate ? this.currentTemplate.uuid : null,\n          variables: this.variables,\n          locale: this.locale\n        };\n      } else {\n        delete this.langValues[this.currentLanguage];\n      }\n      this.fireCustomEvent(CustomEventType.ContentChanged, this.langValues);\n      this.requestUpdate('langValues');\n      this.setValue(this.langValues);\n    }\n  }\n\n  private handleAttachmentsChanged(event: CustomEvent) {\n    const media = event.target as MediaPicker;\n    this.currentAttachments = media.attachments;\n    this.requestUpdate();\n  }\n\n  private setFocusOnChatbox(): void {\n    const completion = this.shadowRoot.querySelector('.chatbox') as Completion;\n    if (completion) {\n      window.setTimeout(() => {\n        completion.focus();\n      }, 0);\n    }\n  }\n\n  public reset(): void {\n    const completion = this.shadowRoot.querySelector('.chatbox') as Completion;\n    if (completion) {\n      completion.textInputElement.value = '';\n      completion.value = '';\n      this.initialText = '';\n      this.currentText = '';\n      this.currentQuickReplies = [];\n      this.currentAttachments = [];\n      this.resetTabs();\n    }\n  }\n\n  private handleQuickReplyChange() {\n    this.requestUpdate('currentQuickReplies');\n  }\n\n  private handleOptInChange(event: InputEvent) {\n    this.currentOptin = (event.target as any).values;\n    this.requestUpdate('optIn');\n  }\n\n  private handleChatboxChange(evt: Event) {\n    const chatbox = evt.target as Completion;\n    const inputElement = chatbox.getTextInput().inputElement;\n\n    this.currentText = inputElement.value;\n    this.hasPendingText = inputElement.value.length > 0;\n\n    // is the last character a / and is it at the beginning of the line\n    const cursor = inputElement.selectionStart;\n    const text = inputElement.value;\n    const lineStart = text.lastIndexOf('\\n', cursor - 1) + 1;\n    const line = text.substring(lineStart, cursor);\n\n    if (line.startsWith('/')) {\n      // switch to the shortcuts tab\n      if (this.currentTab.name !== 'Shortcuts') {\n        this.getTabs().focusTab('Shortcuts');\n      }\n      const shortcuts = this.shadowRoot.querySelector(\n        'temba-shortcuts'\n      ) as ShortcutList;\n      shortcuts.filter = line.substring(1);\n    }\n  }\n\n  public checkIfEmpty() {\n    const chatboxEmpty = this.currentText.trim().length === 0;\n    const attachmentsEmpty = this.currentAttachments.length === 0;\n    if (this.attachments) {\n      this.empty = chatboxEmpty && attachmentsEmpty;\n    } else {\n      this.empty = chatboxEmpty;\n    }\n  }\n\n  private getCurrentLine(): { text: string; index: number } {\n    const chatbox = this.shadowRoot.querySelector('.chatbox') as Completion;\n\n    const cursor = chatbox.getTextInput().inputElement.selectionStart - 1;\n    const text = chatbox.value;\n    const start = text.substring(0, cursor).lastIndexOf('\\n') + 1;\n\n    let end = chatbox.value.indexOf('\\n', start);\n    if (end === -1) {\n      end = chatbox.value.length;\n    }\n\n    return { text: chatbox.value.substring(start, end), index: start };\n  }\n\n  private handleKeyDown(evt: KeyboardEvent) {\n    const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;\n    const num = parseInt(evt.key);\n    if (\n      !Number.isNaN(num) &&\n      num > 0 &&\n      evt.ctrlKey &&\n      evt.metaKey &&\n      num <= tabs.options.length\n    ) {\n      tabs.index = num - 1;\n    }\n\n    if (evt.key === 'Backspace') {\n      const line = this.getCurrentLine();\n      const text = line.text;\n      if (text === '/') {\n        tabs.focusTab('Reply');\n      }\n    }\n\n    if (this.currentTab.name === 'Shortcuts') {\n      if (evt.key === 'Enter' && !evt.shiftKey) {\n        return;\n      }\n    }\n\n    if (evt.key === 'Enter') {\n      if (!evt.shiftKey) {\n        evt.preventDefault();\n        if (this.completion) {\n          const chat = evt.target as Completion;\n          if (!chat.hasVisibleOptions()) {\n            this.triggerSend();\n          }\n        } else {\n          this.triggerSend();\n        }\n      }\n    }\n  }\n\n  public triggerSend() {\n    if (!this.empty) {\n      this.fireCustomEvent(CustomEventType.Submitted, {\n        langValues: this.langValues\n      });\n    }\n  }\n\n  private handleLanguageChange(evt: Event) {\n    const select = evt.target as Select<any>;\n    this.currentLanguage = select.values[0].iso;\n  }\n\n  public resetTabs() {\n    this.getTabs().focusTab('Reply');\n  }\n\n  public getTabs(): TabPane {\n    return this.shadowRoot.querySelector('temba-tabs') as TabPane;\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <temba-field\n        name=${this.name}\n        .errors=${this.errors}\n        .widgetOnly=${this.widgetOnly}\n        .value=${this.value}\n        class=${getClasses({\n          'active-template':\n            !!this.currentTemplate &&\n            this.currentTab &&\n            this.currentTab.name === 'Template'\n        })}\n      >\n        ${this.languages.length > 1\n          ? html`<temba-select\n              @change=${this.handleLanguageChange}\n              class=\"language\"\n              name=\"language\"\n              .staticOptions=${this.languages}\n              valueKey=\"iso\"\n            >\n            </temba-select>`\n          : null}\n        <div class=\"container\">\n          <div class=\"items actions\">${this.getActions()}</div>\n        </div>\n      </temba-field>\n    `;\n  }\n\n  private handleTemplateChanged(evt: CustomEvent) {\n    this.currentTemplate = evt.detail.template;\n    this.locale = evt.detail.translation?.locale;\n    this.requestUpdate();\n  }\n\n  private handleTemplateVariablesChanged(evt: CustomEvent) {\n    this.variables = [...evt.detail.variables];\n  }\n\n  public getTextInput(): TextInput {\n    return (\n      this.shadowRoot.querySelector('.chatbox') as Completion\n    ).getTextInput();\n  }\n\n  public handleShortcutSelection(event: CustomEvent) {\n    this.activeShortcut = event.detail.selected;\n    const line = this.getCurrentLine();\n    const chatbox = this.getTextInput();\n\n    const originalText = chatbox.value;\n\n    if (line.text.startsWith('/')) {\n      const newText =\n        originalText.substring(0, line.index) +\n        this.activeShortcut.text +\n        originalText.substring(line.index + line.text.length);\n\n      chatbox.updateValue(newText);\n\n      // set our cursor to the end of the shortcut\n      const cursor = line.index + this.activeShortcut.text.length;\n      chatbox.inputElement.setSelectionRange(cursor, cursor);\n    } else {\n      // add the text where the cursor is\n      const cursor = chatbox.inputElement.selectionStart;\n      const newText =\n        originalText.substring(0, cursor) +\n        this.activeShortcut.text +\n        originalText.substring(cursor);\n      chatbox.updateValue(newText);\n\n      // set the cursor to the end of the shortcut text\n      const newCursor = cursor + this.activeShortcut.text.length;\n      chatbox.inputElement.setSelectionRange(newCursor, newCursor);\n    }\n\n    const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;\n    tabs.index = tabs.options.findIndex((tab) => tab.name === 'Reply');\n  }\n\n  private getActions(): TemplateResult {\n    const showOptins = this.optIns && this.isBaseLanguage();\n    const showTemplates = this.templates && this.isBaseLanguage();\n    return html`\n      <temba-tabs\n        focusedname\n        @temba-context-changed=${this.handleTabChanged}\n        refresh=\"${(this.currentAttachments || []).length}|${this.index}|${this\n          .currentQuickReplies.length}|${showOptins}|${this\n          .currentOptin}|${showTemplates}|${this.currentTemplate}\"\n      >\n        <temba-tab\n          name=\"Reply\"\n          icon=\"message\"\n          selectionBackground=\"#fff\"\n        ></temba-tab>\n        ${this.attachments\n          ? html`<temba-tab\n              name=\"Attachments\"\n              icon=\"attachment\"\n              selectionBackground=\"#fff\"\n              .count=${(this.currentAttachments || []).length}\n            >\n              <div class=\"items attachments\">\n                <temba-media-picker\n                  accept=${this.accept}\n                  max=${this.maxAttachments}\n                  attachments=${JSON.stringify(this.currentAttachments || [])}\n                  @change=${this.handleAttachmentsChanged.bind(this)}\n                ></temba-media-picker>\n              </div>\n            </temba-tab>`\n          : null}\n        ${this.quickReplies\n          ? html`<temba-tab\n              name=\"Quick Replies\"\n              icon=\"quick_replies\"\n              selectionBackground=\"#fff\"\n              .count=${this.currentQuickReplies.length}\n            >\n              <temba-select\n                @change=${this.handleQuickReplyChange}\n                .values=${this.currentQuickReplies}\n                maxItems=${this.maxQuickReplies}\n                maxItemsText=\"You can only add ${this\n                  .maxQuickReplies} Quick Replies\"\n                class=\"quick-replies\"\n                tags\n                multi\n                searchable\n                expressions\n                placeholder=\"Add Quick Reply\"\n              ></temba-select>\n            </temba-tab>`\n          : null}\n        ${showOptins\n          ? html`<temba-tab\n              name=\"Opt-in\"\n              icon=\"channel_fba\"\n              selectionBackground=\"#fff\"\n              ?hidden=${!showOptins}\n              ?checked=${this.currentOptin.length > 0}\n            >\n              <temba-select\n                @change=${this.handleOptInChange}\n                .values=${this.currentOptin}\n                endpoint=\"${this.optinEndpoint}\"\n                valueKey=\"uuid\"\n                class=\"optins\"\n                searchable\n                clearable\n                placeholder=\"Select an opt-in to use for Facebook (optional)\"\n              ></temba-select>\n            </temba-tab>`\n          : null}\n        ${showTemplates\n          ? html`<temba-tab\n              name=\"Template\"\n              icon=\"channel_wa\"\n              selectionBackground=\"#fff\"\n              ?alert=${this.errors &&\n              this.errors.find((error) => error.includes('template'))}\n              ?hidden=${!showTemplates}\n              ?checked=${this.currentTemplate}\n            >\n              <temba-template-editor\n                class=\"templates\"\n                @temba-context-changed=${this.handleTemplateChanged}\n                @temba-content-changed=${this.handleTemplateVariablesChanged}\n                template=${this.template}\n                variables=${JSON.stringify(this.variables)}\n                url=${this.templateEndpoint}\n                lang=${this.currentLanguage}\n              >\n              </temba-template-editor>\n            </temba-tab>`\n          : null}\n\n        <!--temba-tab\n          name=\"Note\"\n          icon=\"notes\"\n          activityColor=\"#ffbd00\"\n          selectionBackground=\"#fff9c2\"\n          borderColor=\"#ebdf6f\"\n        ></temba-tab-->\n\n        ${this.shortcuts\n          ? html`<temba-tab\n              name=\"Shortcuts\"\n              icon=\"shortcut\"\n              selectionBackground=\"#fff\"\n            >\n              <div class=\"shortcut-wrapper\">\n                <temba-shortcuts\n                  @temba-selection=${this.handleShortcutSelection}\n                ></temba-shortcuts>\n              </div>\n            </temba-tab>`\n          : null}\n\n        <div slot=\"tab-right\" class=\"top-right\">\n          ${this.counter ? this.getCounter() : null}\n        </div>\n\n        <div\n          slot=\"pane-bottom\"\n          class=\"pane-bottom ${this.hasPendingText ? 'pending' : ''}\"\n        >\n          <temba-completion\n            class=\"chatbox\"\n            .value=${this.initialText}\n            gsm\n            textarea\n            ?disableCompletion=${!this.completion}\n            ?autogrow=${this.autogrow}\n            maxlength=${this.maxLength}\n            @change=${this.handleChatboxChange}\n            @keydown=${this.handleKeyDown}\n            placeholder=\"Write something here\"\n          >\n          </temba-completion>\n        </div>\n      </temba-tabs>\n    `;\n  }\n\n  private getCounter(): TemplateResult {\n    return html`<temba-charcount\n      .text=\"${this.currentText}\"\n    ></temba-charcount>`;\n  }\n}\n"]}
+{"version":3,"file":"Compose.js","sourceRoot":"","sources":["../../../src/form/Compose.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { FieldElement } from './FieldElement';\nimport { property } from 'lit/decorators.js';\nimport { Attachment, CustomEventType, Language, Shortcut } from '../interfaces';\nimport { DEFAULT_MEDIA_ENDPOINT, getClasses } from '../utils';\nimport { Completion } from './Completion';\nimport { Select } from './select/Select';\nimport { TabPane } from '../layout/TabPane';\nimport { MediaPicker } from './MediaPicker';\nimport { Tab } from '../layout/Tab';\nimport { TextInput } from './TextInput';\nimport { ShortcutList } from '../list/ShortcutList';\n\nexport interface ComposeValue {\n  text: string;\n  attachments: { uuid: string }[];\n  quick_replies: string[];\n  optin: string;\n  template: string;\n  variables: string[];\n}\n\nexport class Compose extends FieldElement {\n  static get styles() {\n    return css`\n      :host {\n        overflow: hidden;\n        border-top-right-radius: var(--curvature);\n        border-top-left-radius: var(--curvature);\n      }\n\n      .active-template .chatbox {\n        display: none;\n      }\n\n      .active-template .actions {\n        border: none;\n      }\n\n      .container {\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n        position: relative;\n        overflow: hidden;\n        border-radius: var(--compose-curvature, var(--curvature-widget));\n        background: var(--color-widget-bg);\n        border: var(--compose-border, 1px solid var(--color-widget-border));\n        transition: all ease-in-out var(--transition-speed);\n        box-shadow: var(--compose-shadow, var(--widget-box-shadow));\n        caret-color: var(--input-caret);\n        --color-widget-bg-focused: transparent;\n        --color-widget-bg: transparent;\n      }\n\n      .chatbox {\n        --color-widget-border: none;\n        --curvature-widget: var(\n          --compose-curvature,\n          var(--curvature) var(--curvature) 0px 0px\n        );\n\n        --widget-box-shadow: none;\n        display: block;\n        flex-grow: 1;\n        --widget-box-shadow-focused: none;\n        --temba-textinput-padding: 1em 1em;\n      }\n\n      .actions {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 0em;\n        background: #f9f9f9;\n      }\n\n      .actions-right {\n        display: flex;\n        align-items: center;\n      }\n\n      temba-charcount {\n        margin-right: 5px;\n        overflow: hidden;\n        --temba-charcount-counts-margin-top: 0px;\n        --temba-charcount-summary-margin-top: 0px;\n        --temba-charcount-summary-position: fixed;\n        --temba-charcount-summary-right: 105px;\n        --temba-charcount-summary-bottom: 105px;\n      }\n\n      .send-error {\n        color: rgba(250, 0, 0, 0.75);\n        font-size: var(--help-text-size);\n        padding: 0.5em;\n      }\n\n      .language {\n        margin-bottom: 0.6em;\n        display: block;\n      }\n\n      .top-right {\n        align-items: center;\n        display: flex;\n      }\n\n      .gutter {\n        align-items: center;\n        display: flex;\n        margin: 0.5em;\n      }\n\n      temba-tabs {\n        --temba-tabs-border-bottom: none;\n        --temba-tabs-border-left: none;\n        --temba-tabs-border-right: none;\n        --temba-tabs-options-padding: 0.25em 0 0 0.25em;\n      }\n\n      temba-completion {\n        --textarea-min-height: 8em;\n      }\n\n      .quick-replies {\n        margin: 0.8em;\n      }\n\n      .optins {\n        margin: 0.8em;\n      }\n\n      .templates {\n        margin: 0.8em;\n      }\n\n      .attachments {\n        min-height: 5em;\n        padding: 0.2em;\n        align-items: center;\n        display: flex;\n        background: #f9f9f9;\n        border-radius: var(--curvature);\n        margin: 0.6em;\n        margin-bottom: 0em;\n      }\n\n      .pane-bottom {\n        border: 0px solid red;\n        --color-placeholder: rgba(0, 0, 0, 0.2);\n        flex-grow: 99;\n      }\n\n      .shortcut-wrapper {\n        max-height: var(--shortcuts-height, 12em);\n        display: flex;\n        flex-direction: row;\n        align-items: stretch;\n        --options-block-shadow: none;\n        --curvature-widget: 0px;\n        --color-options-bg: #fff;\n        border-bottom: 1px solid var(--color-widget-border);\n      }\n\n      temba-shortcuts {\n        flex-grow: 1;\n      }\n    `;\n  }\n\n  @property({ type: Number })\n  index = 1;\n\n  @property({ type: Number })\n  maxAttachments = 3;\n\n  @property({ type: Number })\n  maxLength = 640;\n\n  @property({ type: Number })\n  maxQuickReplies = 10;\n\n  @property({ type: Boolean })\n  completion: boolean;\n\n  @property({ type: Boolean })\n  attachments: boolean;\n\n  @property({ type: Boolean })\n  quickReplies: boolean;\n\n  @property({ type: Boolean })\n  optIns: boolean;\n\n  @property({ type: Boolean })\n  templates: boolean;\n\n  @property({ type: Boolean })\n  counter: boolean;\n\n  @property({ type: Boolean })\n  autogrow: boolean;\n\n  @property({ type: Boolean })\n  shortcuts: boolean;\n\n  @property({ type: String })\n  currentText = '';\n\n  @property({ type: String })\n  initialText = '';\n\n  @property({ type: String })\n  accept = ''; //e.g. \".xls,.xlsx\"\n\n  @property({ type: String, attribute: false })\n  endpoint = DEFAULT_MEDIA_ENDPOINT;\n\n  @property({ type: Boolean, attribute: false })\n  uploading: boolean;\n\n  @property({ type: Array })\n  languages: Language[] = [];\n\n  @property({ type: Array })\n  currentAttachments: Attachment[] = [];\n\n  @property({ type: Array })\n  currentQuickReplies: { name: string; value: string }[] = [];\n\n  @property({ type: Array })\n  currentOptin: { name: string; uuid: string }[] = [];\n\n  @property({ type: Array })\n  variables: string[] = [];\n\n  @property({ type: String })\n  template: string;\n\n  @property({ type: Object })\n  currentTemplate: { name: string; uuid: string };\n\n  // locale for the template\n  @property({ type: String })\n  locale: string;\n\n  @property({ type: String })\n  optinEndpoint = '/api/v2/optins.json';\n\n  @property({ type: String })\n  templateEndpoint = '/api/internal/templates.json';\n\n  @property({ type: Boolean, attribute: false })\n  empty = true;\n\n  @property({ type: Boolean, attribute: 'widget_only' })\n  widgetOnly: boolean;\n\n  @property({ type: Array })\n  errors: string[];\n\n  @property({ type: Object })\n  langValues: {\n    [lang: string]: {\n      text: string;\n      attachments: Attachment[];\n      quick_replies: string[];\n      optin?: { name: string; uuid: string };\n      template?: string;\n      variables?: string[];\n      locale?: string;\n    };\n  } = {};\n\n  @property({ type: String })\n  currentLanguage = 'und';\n\n  @property({ type: Object })\n  currentTab: Tab;\n\n  @property({ type: Boolean })\n  hasPendingText = false;\n\n  @property({ type: Object })\n  activeShortcut: Shortcut;\n\n  public constructor() {\n    super();\n  }\n\n  private isBaseLanguage(): boolean {\n    return (\n      this.currentLanguage == 'und' ||\n      this.currentLanguage == this.languages[0].iso\n    );\n  }\n\n  private handleTabChanged() {\n    const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;\n    this.currentTab = tabs.getCurrentTab();\n    if (this.currentTab && this.currentTab.name === 'Shortcuts') {\n      const shortcuts = this.shadowRoot.querySelector(\n        'temba-shortcuts'\n      ) as ShortcutList;\n      shortcuts.filter = '';\n    }\n    this.setFocusOnChatbox();\n  }\n\n  public firstUpdated(changes: Map<string, any>): void {\n    super.firstUpdated(changes);\n\n    if (changes.has('languages') && this.languages.length > 0) {\n      this.currentLanguage = this.languages[0].iso;\n    }\n\n    if (changes.has('value')) {\n      this.langValues = this.getDeserializedValue() || {};\n      this.variables = this.langValues[this.currentLanguage]?.variables || [];\n      this.template = this.langValues[this.currentLanguage]?.template || null;\n    }\n    this.setFocusOnChatbox();\n  }\n\n  public updated(changes: Map<string, any>): void {\n    super.updated(changes);\n\n    if (changes.has('currentLanguage') && this.langValues) {\n      let langValue = {\n        text: '',\n        attachments: [],\n        quick_replies: []\n      };\n\n      if (this.currentLanguage in this.langValues) {\n        langValue = this.langValues[this.currentLanguage];\n      }\n\n      this.currentText = langValue.text;\n      this.initialText = langValue.text;\n      this.currentAttachments = langValue.attachments;\n      this.currentQuickReplies = (langValue.quick_replies || []).map(\n        (value) => {\n          return { name: value, value };\n        }\n      );\n      this.currentOptin = langValue['optin'] ? [langValue['optin']] : [];\n      this.setFocusOnChatbox();\n\n      // TODO: this feels like it shouldn't be needed\n      const chatbox = this.shadowRoot.querySelector('.chatbox') as any;\n      if (chatbox) {\n        chatbox.value = this.initialText;\n      }\n      this.resetTabs();\n      this.requestUpdate('currentAttachments');\n    }\n\n    if (\n      (this.langValues &&\n        (changes.has('currentText') ||\n          changes.has('currentAttachments') ||\n          changes.has('currentQuickReplies'))) ||\n      changes.has('currentOptin') ||\n      changes.has('currentTemplate') ||\n      changes.has('variables')\n    ) {\n      this.checkIfEmpty();\n\n      const trimmed = this.currentText ? this.currentText.trim() : '';\n      if (\n        trimmed ||\n        (this.currentAttachments || []).length > 0 ||\n        this.currentQuickReplies.length > 0 ||\n        this.variables.length > 0\n      ) {\n        this.langValues[this.currentLanguage] = {\n          text: trimmed,\n          attachments: this.currentAttachments,\n          quick_replies: this.currentQuickReplies.map((option) => option.value),\n          optin: this.currentOptin.length > 0 ? this.currentOptin[0] : null,\n          template: this.currentTemplate ? this.currentTemplate.uuid : null,\n          variables: this.variables,\n          locale: this.locale\n        };\n      } else {\n        delete this.langValues[this.currentLanguage];\n      }\n      this.fireCustomEvent(CustomEventType.ContentChanged, this.langValues);\n      this.requestUpdate('langValues');\n      this.setValue(this.langValues);\n    }\n  }\n\n  private handleAttachmentsChanged(event: CustomEvent) {\n    const media = event.target as MediaPicker;\n    this.currentAttachments = media.attachments;\n    this.requestUpdate();\n  }\n\n  private setFocusOnChatbox(): void {\n    const completion = this.shadowRoot.querySelector('.chatbox') as Completion;\n    if (completion) {\n      window.setTimeout(() => {\n        completion.focus();\n      }, 0);\n    }\n  }\n\n  public reset(): void {\n    const completion = this.shadowRoot.querySelector('.chatbox') as Completion;\n    if (completion) {\n      completion.textInputElement.value = '';\n      completion.value = '';\n      this.initialText = '';\n      this.currentText = '';\n      this.currentQuickReplies = [];\n      this.currentAttachments = [];\n      this.resetTabs();\n    }\n  }\n\n  private handleQuickReplyChange() {\n    this.requestUpdate('currentQuickReplies');\n  }\n\n  private handleOptInChange(event: InputEvent) {\n    this.currentOptin = (event.target as any).values;\n    this.requestUpdate('optIn');\n  }\n\n  private handleChatboxChange(evt: Event) {\n    const chatbox = evt.target as Completion;\n    const inputElement = chatbox.getTextInput().inputElement;\n\n    this.currentText = inputElement.value;\n    this.hasPendingText = inputElement.value.length > 0;\n\n    // is the last character a / and is it at the beginning of the line\n    const cursor = inputElement.selectionStart;\n    const text = inputElement.value;\n    const lineStart = text.lastIndexOf('\\n', cursor - 1) + 1;\n    const line = text.substring(lineStart, cursor);\n\n    if (line.startsWith('/')) {\n      // switch to the shortcuts tab\n      if (this.currentTab.name !== 'Shortcuts') {\n        this.getTabs().focusTab('Shortcuts');\n      }\n      const shortcuts = this.shadowRoot.querySelector(\n        'temba-shortcuts'\n      ) as ShortcutList;\n      shortcuts.filter = line.substring(1);\n    }\n  }\n\n  public checkIfEmpty() {\n    const chatboxEmpty = this.currentText.trim().length === 0;\n    const attachmentsEmpty = this.currentAttachments.length === 0;\n    if (this.attachments) {\n      this.empty = chatboxEmpty && attachmentsEmpty;\n    } else {\n      this.empty = chatboxEmpty;\n    }\n  }\n\n  private getCurrentLine(): { text: string; index: number } {\n    const chatbox = this.shadowRoot.querySelector('.chatbox') as Completion;\n\n    const cursor = chatbox.getTextInput().inputElement.selectionStart - 1;\n    const text = chatbox.value;\n    const start = text.substring(0, cursor).lastIndexOf('\\n') + 1;\n\n    let end = chatbox.value.indexOf('\\n', start);\n    if (end === -1) {\n      end = chatbox.value.length;\n    }\n\n    return { text: chatbox.value.substring(start, end), index: start };\n  }\n\n  private handleKeyDown(evt: KeyboardEvent) {\n    const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;\n    const num = parseInt(evt.key);\n    if (\n      !Number.isNaN(num) &&\n      num > 0 &&\n      evt.ctrlKey &&\n      evt.metaKey &&\n      num <= tabs.options.length\n    ) {\n      tabs.index = num - 1;\n    }\n\n    if (evt.key === 'Backspace') {\n      const line = this.getCurrentLine();\n      const text = line.text;\n      if (text === '/') {\n        tabs.focusTab('Reply');\n      }\n    }\n\n    if (this.currentTab.name === 'Shortcuts') {\n      if (evt.key === 'Enter' && !evt.shiftKey) {\n        return;\n      }\n    }\n\n    if (evt.key === 'Enter') {\n      if (!evt.shiftKey) {\n        evt.preventDefault();\n        if (this.completion) {\n          const chat = evt.target as Completion;\n          if (!chat.hasVisibleOptions()) {\n            this.triggerSend();\n          }\n        } else {\n          this.triggerSend();\n        }\n      }\n    }\n  }\n\n  public triggerSend() {\n    if (!this.empty) {\n      this.fireCustomEvent(CustomEventType.Submitted, {\n        langValues: this.langValues\n      });\n    }\n  }\n\n  private handleLanguageChange(evt: Event) {\n    const select = evt.target as Select<any>;\n    this.currentLanguage = select.values[0].iso;\n  }\n\n  public resetTabs() {\n    this.getTabs().focusTab('Reply');\n  }\n\n  public getTabs(): TabPane {\n    return this.shadowRoot.querySelector('temba-tabs') as TabPane;\n  }\n\n  public render(): TemplateResult {\n    return this.renderField();\n  }\n\n  protected renderWidget(): TemplateResult {\n    return html`\n      <div\n        class=${getClasses({\n          'active-template':\n            !!this.currentTemplate &&\n            this.currentTab &&\n            this.currentTab.name === 'Template'\n        })}\n      >\n        ${this.languages.length > 1\n          ? html`<temba-select\n              @change=${this.handleLanguageChange}\n              class=\"language\"\n              name=\"language\"\n              .staticOptions=${this.languages}\n              valueKey=\"iso\"\n            >\n            </temba-select>`\n          : null}\n        <div class=\"container\">\n          <div class=\"items actions\">${this.getActions()}</div>\n        </div>\n      </div>\n    `;\n  }\n\n  private handleTemplateChanged(evt: CustomEvent) {\n    this.currentTemplate = evt.detail.template;\n    this.locale = evt.detail.translation?.locale;\n    this.requestUpdate();\n  }\n\n  private handleTemplateVariablesChanged(evt: CustomEvent) {\n    this.variables = [...evt.detail.variables];\n  }\n\n  public getTextInput(): TextInput {\n    return (\n      this.shadowRoot.querySelector('.chatbox') as Completion\n    ).getTextInput();\n  }\n\n  public handleShortcutSelection(event: CustomEvent) {\n    this.activeShortcut = event.detail.selected;\n    const line = this.getCurrentLine();\n    const chatbox = this.getTextInput();\n\n    const originalText = chatbox.value;\n\n    if (line.text.startsWith('/')) {\n      const newText =\n        originalText.substring(0, line.index) +\n        this.activeShortcut.text +\n        originalText.substring(line.index + line.text.length);\n\n      chatbox.updateValue(newText);\n\n      // set our cursor to the end of the shortcut\n      const cursor = line.index + this.activeShortcut.text.length;\n      chatbox.inputElement.setSelectionRange(cursor, cursor);\n    } else {\n      // add the text where the cursor is\n      const cursor = chatbox.inputElement.selectionStart;\n      const newText =\n        originalText.substring(0, cursor) +\n        this.activeShortcut.text +\n        originalText.substring(cursor);\n      chatbox.updateValue(newText);\n\n      // set the cursor to the end of the shortcut text\n      const newCursor = cursor + this.activeShortcut.text.length;\n      chatbox.inputElement.setSelectionRange(newCursor, newCursor);\n    }\n\n    const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;\n    tabs.index = tabs.options.findIndex((tab) => tab.name === 'Reply');\n  }\n\n  private getActions(): TemplateResult {\n    const showOptins = this.optIns && this.isBaseLanguage();\n    const showTemplates = this.templates && this.isBaseLanguage();\n    return html`\n      <temba-tabs\n        focusedname\n        @temba-context-changed=${this.handleTabChanged}\n        refresh=\"${(this.currentAttachments || []).length}|${this.index}|${this\n          .currentQuickReplies.length}|${showOptins}|${this\n          .currentOptin}|${showTemplates}|${this.currentTemplate}\"\n      >\n        <temba-tab\n          name=\"Reply\"\n          icon=\"message\"\n          selectionBackground=\"#fff\"\n        ></temba-tab>\n        ${this.attachments\n          ? html`<temba-tab\n              name=\"Attachments\"\n              icon=\"attachment\"\n              selectionBackground=\"#fff\"\n              .count=${(this.currentAttachments || []).length}\n            >\n              <div class=\"items attachments\">\n                <temba-media-picker\n                  accept=${this.accept}\n                  max=${this.maxAttachments}\n                  attachments=${JSON.stringify(this.currentAttachments || [])}\n                  @change=${this.handleAttachmentsChanged.bind(this)}\n                ></temba-media-picker>\n              </div>\n            </temba-tab>`\n          : null}\n        ${this.quickReplies\n          ? html`<temba-tab\n              name=\"Quick Replies\"\n              icon=\"quick_replies\"\n              selectionBackground=\"#fff\"\n              .count=${this.currentQuickReplies.length}\n            >\n              <temba-select\n                @change=${this.handleQuickReplyChange}\n                .values=${this.currentQuickReplies}\n                maxItems=${this.maxQuickReplies}\n                maxItemsText=\"You can only add ${this\n                  .maxQuickReplies} Quick Replies\"\n                class=\"quick-replies\"\n                tags\n                multi\n                searchable\n                expressions\n                placeholder=\"Add Quick Reply\"\n              ></temba-select>\n            </temba-tab>`\n          : null}\n        ${showOptins\n          ? html`<temba-tab\n              name=\"Opt-in\"\n              icon=\"channel_fba\"\n              selectionBackground=\"#fff\"\n              ?hidden=${!showOptins}\n              ?checked=${this.currentOptin.length > 0}\n            >\n              <temba-select\n                @change=${this.handleOptInChange}\n                .values=${this.currentOptin}\n                endpoint=\"${this.optinEndpoint}\"\n                valueKey=\"uuid\"\n                class=\"optins\"\n                searchable\n                clearable\n                placeholder=\"Select an opt-in to use for Facebook (optional)\"\n              ></temba-select>\n            </temba-tab>`\n          : null}\n        ${showTemplates\n          ? html`<temba-tab\n              name=\"Template\"\n              icon=\"channel_wa\"\n              selectionBackground=\"#fff\"\n              ?alert=${this.errors &&\n              this.errors.find((error) => error.includes('template'))}\n              ?hidden=${!showTemplates}\n              ?checked=${this.currentTemplate}\n            >\n              <temba-template-editor\n                class=\"templates\"\n                @temba-context-changed=${this.handleTemplateChanged}\n                @temba-content-changed=${this.handleTemplateVariablesChanged}\n                template=${this.template}\n                variables=${JSON.stringify(this.variables)}\n                url=${this.templateEndpoint}\n                lang=${this.currentLanguage}\n              >\n              </temba-template-editor>\n            </temba-tab>`\n          : null}\n\n        <!--temba-tab\n          name=\"Note\"\n          icon=\"notes\"\n          activityColor=\"#ffbd00\"\n          selectionBackground=\"#fff9c2\"\n          borderColor=\"#ebdf6f\"\n        ></temba-tab-->\n\n        ${this.shortcuts\n          ? html`<temba-tab\n              name=\"Shortcuts\"\n              icon=\"shortcut\"\n              selectionBackground=\"#fff\"\n            >\n              <div class=\"shortcut-wrapper\">\n                <temba-shortcuts\n                  @temba-selection=${this.handleShortcutSelection}\n                ></temba-shortcuts>\n              </div>\n            </temba-tab>`\n          : null}\n\n        <div slot=\"tab-right\" class=\"top-right\">\n          ${this.counter ? this.getCounter() : null}\n        </div>\n\n        <div\n          slot=\"pane-bottom\"\n          class=\"pane-bottom ${this.hasPendingText ? 'pending' : ''}\"\n        >\n          <temba-completion\n            class=\"chatbox\"\n            .value=${this.initialText}\n            gsm\n            textarea\n            ?disableCompletion=${!this.completion}\n            ?autogrow=${this.autogrow}\n            maxlength=${this.maxLength}\n            @change=${this.handleChatboxChange}\n            @keydown=${this.handleKeyDown}\n            placeholder=\"Write something here\"\n          >\n          </temba-completion>\n        </div>\n      </temba-tabs>\n    `;\n  }\n\n  private getCounter(): TemplateResult {\n    return html`<temba-charcount\n      .text=\"${this.currentText}\"\n    ></temba-charcount>`;\n  }\n}\n"]}

package/out-tsc/src/form/ContactSearch.js

@@ -5,10 +5,10 @@ import { property } from 'lit/decorators.js';
 import { getClasses, postJSON, stopEvent } from '../utils';
 import '../display/Alert';
 import { CustomEventType } from '../interfaces';
-import { FormElement } from './FormElement';
+import { FieldElement } from './FieldElement';
 import { msg } from '@lit/localize';
 const QUEIT_MILLIS = 2000;
-export class ContactSearch extends FormElement {
+export class ContactSearch extends FieldElement {
     constructor() {
         super(...arguments);
         this.placeholder = '';
@@ -393,7 +393,7 @@ export class ContactSearch extends FormElement {
             }
         }
     }
-    render() {
+    renderWidget() {
         let summary;
         if (this.summary) {
             if (!this.summary.error) {
@@ -447,7 +447,6 @@ export class ContactSearch extends FormElement {
       ${this.advanced
             ? html `<div class="query">
               <temba-textinput
-                .label=${this.label}
                 .helpText=${this.helpText}
                 .widgetOnly=${this.widgetOnly}
                 .errors=${this.errors}