@nyaruka/temba-components 0.129.9 → 0.129.11

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateEditor.js","sourceRoot":"","sources":["../../../src/form/TemplateEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { property } from 'lit/decorators.js';\nimport { FormElement } from './FormElement';\nimport { TemplateResult, html, css, LitElement } from 'lit';\nimport { CustomEventType } from '../interfaces';\nimport { MediaPicker } from './MediaPicker';\nimport { getClasses } from '../utils';\n\ninterface Component {\n  name: string;\n  type: string;\n  content: string;\n  variables: { [key: string]: number };\n}\n\ninterface Translation {\n  locale: string;\n  status: string;\n  channel: { uuid: string; name: string };\n  components: Component[];\n  variables: { type: string }[];\n}\n\ninterface Template {\n  created_on: string;\n  modified_on: string;\n  name: string;\n  uuid: string;\n  base_translation: Translation;\n}\n\nexport class TemplateEditor extends FormElement {\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true\n  };\n\n  static get styles() {\n    return css`\n      .component {\n        background: #fff;\n        border: 1px solid var(--color-widget-border);\n        border-radius: var(--curvature);\n        padding: 1em;\n        margin-top: 1em;\n      }\n\n      .content {\n      }\n\n      .picker {\n        margin-bottom: 0.5em;\n        display: block;\n      }\n      .param {\n        display: flex;\n        margin-bottom: 0.5em;\n        align-items: center;\n      }\n      label {\n        margin-right: 0.5em;\n      }\n\n      .content span {\n        margin-right: 0.25em;\n      }\n\n      .error-message {\n        padding-left: 0.5em;\n        padding-bottom: 1em;\n      }\n\n      .variable {\n        display: inline-block;\n        margin: 0.25em 0em;\n        margin-right: 0.25em;\n      }\n\n      .button-wrapper {\n        background: #f9f9f9;\n        border-radius: var(--curvature);\n        padding: 0.5em;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .button-header {\n        font-weight: normal;\n        margin-left: 0.25em;\n        margin-bottom: -0.5em;\n        font-size: 0.9em;\n        color: #777;\n      }\n\n      .buttons {\n        display: flex;\n        align-items: center;\n        flex-wrap: wrap;\n        margin-bottom: 1em;\n      }\n\n      .button {\n        background: #fff;\n        padding: 0.3em 1em;\n        border: 1px solid #e6e6e6;\n        border-radius: var(--curvature);\n        min-height: 23px;\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        margin-right: 0.5em;\n        margin-top: 0.5em;\n        align-items: center;\n      }\n\n      .button .content {\n        margin-bottom: 0;\n      }\n\n      .button .display {\n        margin-right: 0.5em;\n        background: #f9f9f9;\n        padding: 0.25em 1em;\n        border-radius: var(--curvature);\n      }\n\n      .variable {\n        --temba-textinput-padding: 5px 5px;\n        --temba-textinput-font-size: 0.9em;\n        line-height: initial;\n      }\n\n      .template {\n        background: #fff;\n        border-radius: var(--curvature);\n        border: 1px solid var(--color-widget-border);\n        padding: 1em;\n        line-height: 2.2em;\n        max-height: 50vh;\n        overflow-y: auto;\n        overflow-x: hidden;\n        padding-bottom: 0;\n      }\n\n      .label {\n        font-size: 0.9em;\n        color: #777;\n        margin-left: 0.25em;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  url: string;\n\n  // initial template uuid\n  @property({ type: String })\n  template: string;\n\n  @property({ type: Object })\n  selectedTemplate: Template;\n\n  // initial variables, not reflected back\n  @property({ type: Array })\n  variables: string[];\n\n  @property({ type: Array })\n  currentVariables: string[];\n\n  @property({ type: Object, attribute: false })\n  translation: Translation;\n\n  @property({ type: Boolean })\n  translating: boolean;\n\n  pickersLoading: { [key: number]: boolean } = {};\n\n  textInputAttachments: { [index: number]: boolean } = {};\n\n  public updated(changes: Map<string, any>): void {\n    super.updated(changes);\n    if (changes.has('template')) {\n      this.textInputAttachments = {};\n      this.currentVariables = this.variables || [];\n\n      // check if our variables should be a textinput\n      if (this.currentVariables.length > 0) {\n        this.currentVariables.forEach((variable, index) => {\n          const split = variable.split(':');\n          if (split.length > 1) {\n            // we have a generary content type\n            if (split[0].indexOf('/') === -1) {\n              this.textInputAttachments[index] = true;\n            }\n          }\n        });\n      }\n    }\n  }\n\n  private handleTemplateChanged(event: CustomEvent) {\n    const prev = this.selectedTemplate;\n    this.selectedTemplate = (event.target as any).values[0] as Template;\n    if (prev) {\n      this.currentVariables = [];\n      this.textInputAttachments = {};\n    }\n\n    if (this.selectedTemplate) {\n      this.translation = this.selectedTemplate.base_translation;\n      if (this.translation) {\n        this.variables = new Array(\n          (this.translation.variables || []).length\n        ).fill('');\n      } else {\n        this.variables = [];\n      }\n    } else {\n      this.translation = null;\n      this.variables = [];\n    }\n\n    this.fireCustomEvent(CustomEventType.ContextChanged, {\n      template: this.selectedTemplate,\n      translation: this.translation,\n      variables: this.currentVariables\n    });\n  }\n\n  private handleAttachmentLoading(event: CustomEvent) {\n    const media = event.target as MediaPicker;\n    const index = parseInt(media.getAttribute('index'));\n    this.pickersLoading[index] = event.detail.loading;\n    this.requestUpdate();\n  }\n\n  private handleAttachmentsChanged(event: CustomEvent) {\n    const media = event.target as MediaPicker;\n    const index = parseInt(media.getAttribute('index'));\n\n    if (media.attachments.length === 0) {\n      this.currentVariables[index] = '';\n    } else {\n      const attachment = media.attachments[0];\n      if (attachment.url && attachment.content_type) {\n        this.currentVariables[\n          index\n        ] = `${attachment.content_type}:${attachment.url}`;\n      } else {\n        this.currentVariables[index] = ``;\n      }\n    }\n    this.fireContentChange();\n    this.requestUpdate('currentVariables');\n  }\n\n  private handleVariableChanged(event: InputEvent) {\n    const target = event.target as HTMLInputElement;\n    const variableIndex = parseInt(target.getAttribute('index'));\n    const prefix = target.getAttribute('prefix') || '';\n\n    // add our prefix if we have a value\n    let value = target.value;\n    if (value) {\n      value = prefix + value;\n    }\n\n    this.currentVariables[variableIndex] = value;\n    this.fireContentChange();\n  }\n\n  private fireContentChange() {\n    this.fireCustomEvent(CustomEventType.ContentChanged, {\n      template: this.selectedTemplate,\n      translation: this.translation,\n      variables: this.currentVariables\n    });\n  }\n\n  private renderVariables(component: Component) {\n    // create a regex match based on the variable names\n    const variableRegex = new RegExp(\n      `{{(${Object.keys(component.variables || []).join('|')})}}`,\n      'g'\n    );\n\n    let variables = null;\n\n    let parts = [];\n    if (component.content && component.content.trim().length > 0) {\n      parts = component.content?.split(variableRegex) || [];\n    }\n    const currVariables = this.currentVariables || [];\n    if (parts.length > 0) {\n      variables = parts.map((part, index) => {\n        if (index % 2 === 0) {\n          return html`<span class=\"text\">${part}</span>`;\n        }\n        const variableIndex = component.variables[part];\n\n        return html`<temba-completion\n          class=\"variable\"\n          type=\"text\"\n          value=${variableIndex < currVariables.length\n            ? currVariables[variableIndex]\n            : null}\n          @keyup=${this.handleVariableChanged}\n          name=\"${component.name}\"\n          index=\"${variableIndex}\"\n          placeholder=\"{{${part}}}\"\n        ></temba-completion>`;\n      });\n    } else {\n      variables = Object.values(component.variables).map((variableIndex) => {\n        const variableSpec = this.translation.variables[variableIndex];\n        if (\n          variableSpec.type === 'image' ||\n          variableSpec.type === 'document' ||\n          variableSpec.type === 'audio' ||\n          variableSpec.type === 'video'\n        ) {\n          let attachments = [];\n          if (this.currentVariables[variableIndex]) {\n            const parts = this.currentVariables[variableIndex].split(':');\n            const content_type = parts[0];\n            const url = parts.slice(1).join(':');\n            attachments = [{ url, content_type }];\n          }\n\n          const loading = this.pickersLoading[variableIndex];\n\n          const prefix = variableSpec.type + ':';\n          let value =\n            variableIndex < currVariables.length\n              ? currVariables[variableIndex]\n              : null;\n\n          if (value && value.startsWith(prefix)) {\n            value = value.slice(prefix.length);\n          }\n\n          return html`\n            ${this.textInputAttachments[variableIndex]\n              ? html` <div class=\"label\">\n                    ${variableSpec.type.charAt(0).toUpperCase() +\n                    variableSpec.type.slice(1)}\n                    URL\n                  </div>\n                  <div\n                    style=\"display:flex;align-items:center;margin-bottom:1em;\"\n                  >\n                    <temba-completion\n                      style=\"flex-grow:1; margin-right:1em;\"\n                      prefix=\"${prefix}\"\n                      index=${variableIndex}\n                      value=${value}\n                      @keyup=${this.handleVariableChanged}\n                    ></temba-completion>\n                    <temba-icon\n                      name=\"close\"\n                      clickable\n                      @click=${() => {\n                        this.textInputAttachments[variableIndex] = false;\n                        this.currentVariables[variableIndex] = '';\n                        this.requestUpdate();\n                      }}\n                    >\n                    </temba-icon>\n                    <div></div>\n                  </div>`\n              : html`\n                  <div\n                    class=${getClasses({ loading })}\n                    style=\"\n              display: flex; \n              align-items: center; \n              border-radius: var(--curvature);\n              margin-bottom: 0.5em;\n              ${attachments.length === 0 && !loading\n                      ? `background-color:rgba(0,0,0,.04);`\n                      : ``}\"\n                  >\n                    <temba-media-picker\n                      accept=\"${variableSpec.type === 'document'\n                        ? 'application/pdf'\n                        : variableSpec.type + '/*'}\"\n                      max=\"1\"\n                      index=${variableIndex}\n                      icon=\"attachment_${variableSpec.type}\"\n                      attachments=${JSON.stringify(attachments)}\n                      @temba-loading=${this.handleAttachmentLoading.bind(this)}\n                      @change=${this.handleAttachmentsChanged.bind(this)}\n                    ></temba-media-picker>\n                    <div style=\"flex-grow:1\">\n                      ${attachments.length == 0 && !loading\n                        ? html`Attach ${variableSpec.type} to continue`\n                        : ''}\n                    </div>\n                    <temba-icon\n                      clickable\n                      name=\"edit\"\n                      @click=${() => {\n                        this.currentVariables[variableIndex] = '';\n                        this.textInputAttachments[variableIndex] = true;\n                        this.requestUpdate();\n                      }}\n                      style=\"margin-right:1em\"\n                    ></temba-icon>\n                  </div>\n                `}\n          `;\n        }\n      });\n    }\n\n    return html`<div class=\"content\">${variables}</div> `;\n  }\n\n  public renderComponents(components: Component[]): TemplateResult {\n    const nonButtons = components\n      .filter((comp) => !comp.type.startsWith('button/'))\n      .map(\n        (component) =>\n          html`<div class=\"${component['name']}\">\n            ${this.renderVariables(component)}\n          </div>`\n      );\n    const buttonComponents = components.filter((comp) =>\n      comp.type.startsWith('button/')\n    );\n    const buttons =\n      buttonComponents.length > 0 ? this.renderButtons(buttonComponents) : null;\n    return html`<div class=\"main\">${nonButtons}</div>\n      <div class=\"buttons\">\n        ${buttons}\n        <div></div>\n      </div>`;\n  }\n\n  public renderButtons(components): TemplateResult {\n    const buttons = components.map((component) => {\n      if (component.display) {\n        return html`\n          <div class=\"button\">\n            <div class=\"display\">${component.display}</div>\n            ${this.renderVariables(component)}\n          </div>\n        `;\n      } else {\n        return html`\n          <div class=\"button\">${this.renderVariables(component)}</div>\n        `;\n      }\n    });\n    return html`<div class=\"button-wrapper\">\n      <div class=\"button-header\">Template Buttons</div>\n      <div class=\"buttons\">${buttons}</div>\n    </div>`;\n  }\n\n  public render(): TemplateResult {\n    let content = null;\n    if (this.translation) {\n      content = this.renderComponents(this.translation.components);\n    } else if (this.selectedTemplate) {\n      content = html`<div class=\"error-message\">\n        This template currently has no approved translations.\n      </div>`;\n    }\n\n    return html`\n      <div>\n        <temba-select\n          searchable\n          ?clearable=${!this.translating}\n          ?disabled=${this.translating}\n          valuekey=\"uuid\"\n          class=\"picker\"\n          value=\"${this.template}\"\n          endpoint=\"${this.url}\"\n          shouldExclude=${(template) => template.status !== 'approved'}\n          placeholder=\"Select a template\"\n          @temba-content-changed=${this.swallowEvent}\n          @change=${this.handleTemplateChanged}\n        >\n        </temba-select>\n        ${content ? html` <div class=\"template\">${content}</div>` : null}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"TemplateEditor.js","sourceRoot":"","sources":["../../../src/form/TemplateEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { property } from 'lit/decorators.js';\nimport { TemplateResult, html, css, LitElement } from 'lit';\nimport { CustomEventType } from '../interfaces';\nimport { MediaPicker } from './MediaPicker';\nimport { getClasses } from '../utils';\nimport { FieldElement } from './FieldElement';\n\ninterface Component {\n  name: string;\n  type: string;\n  content: string;\n  variables: { [key: string]: number };\n}\n\ninterface Translation {\n  locale: string;\n  status: string;\n  channel: { uuid: string; name: string };\n  components: Component[];\n  variables: { type: string }[];\n}\n\ninterface Template {\n  created_on: string;\n  modified_on: string;\n  name: string;\n  uuid: string;\n  base_translation: Translation;\n}\n\nexport class TemplateEditor extends FieldElement {\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true\n  };\n\n  static get styles() {\n    return css`\n      .component {\n        background: #fff;\n        border: 1px solid var(--color-widget-border);\n        border-radius: var(--curvature);\n        padding: 1em;\n        margin-top: 1em;\n      }\n\n      .content {\n      }\n\n      .picker {\n        margin-bottom: 0.5em;\n        display: block;\n      }\n      .param {\n        display: flex;\n        margin-bottom: 0.5em;\n        align-items: center;\n      }\n      label {\n        margin-right: 0.5em;\n      }\n\n      .content span {\n        margin-right: 0.25em;\n      }\n\n      .error-message {\n        padding-left: 0.5em;\n        padding-bottom: 1em;\n      }\n\n      .variable {\n        display: inline-block;\n        margin: 0.25em 0em;\n        margin-right: 0.25em;\n      }\n\n      .button-wrapper {\n        background: #f9f9f9;\n        border-radius: var(--curvature);\n        padding: 0.5em;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .button-header {\n        font-weight: normal;\n        margin-left: 0.25em;\n        margin-bottom: -0.5em;\n        font-size: 0.9em;\n        color: #777;\n      }\n\n      .buttons {\n        display: flex;\n        align-items: center;\n        flex-wrap: wrap;\n        margin-bottom: 1em;\n      }\n\n      .button {\n        background: #fff;\n        padding: 0.3em 1em;\n        border: 1px solid #e6e6e6;\n        border-radius: var(--curvature);\n        min-height: 23px;\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        margin-right: 0.5em;\n        margin-top: 0.5em;\n        align-items: center;\n      }\n\n      .button .content {\n        margin-bottom: 0;\n      }\n\n      .button .display {\n        margin-right: 0.5em;\n        background: #f9f9f9;\n        padding: 0.25em 1em;\n        border-radius: var(--curvature);\n      }\n\n      .variable {\n        --temba-textinput-padding: 5px 5px;\n        --temba-textinput-font-size: 0.9em;\n        line-height: initial;\n      }\n\n      .template {\n        background: #fff;\n        border-radius: var(--curvature);\n        border: 1px solid var(--color-widget-border);\n        padding: 1em;\n        line-height: 2.2em;\n        max-height: 50vh;\n        overflow-y: auto;\n        overflow-x: hidden;\n        padding-bottom: 0;\n      }\n\n      .label {\n        font-size: 0.9em;\n        color: #777;\n        margin-left: 0.25em;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  url: string;\n\n  // initial template uuid\n  @property({ type: String })\n  template: string;\n\n  @property({ type: Object })\n  selectedTemplate: Template;\n\n  // initial variables, not reflected back\n  @property({ type: Array })\n  variables: string[];\n\n  @property({ type: Array })\n  currentVariables: string[];\n\n  @property({ type: Object, attribute: false })\n  translation: Translation;\n\n  @property({ type: Boolean })\n  translating: boolean;\n\n  pickersLoading: { [key: number]: boolean } = {};\n\n  textInputAttachments: { [index: number]: boolean } = {};\n\n  public updated(changes: Map<string, any>): void {\n    super.updated(changes);\n    if (changes.has('template')) {\n      this.textInputAttachments = {};\n      this.currentVariables = this.variables || [];\n\n      // check if our variables should be a textinput\n      if (this.currentVariables.length > 0) {\n        this.currentVariables.forEach((variable, index) => {\n          const split = variable.split(':');\n          if (split.length > 1) {\n            // we have a generary content type\n            if (split[0].indexOf('/') === -1) {\n              this.textInputAttachments[index] = true;\n            }\n          }\n        });\n      }\n    }\n  }\n\n  private handleTemplateChanged(event: CustomEvent) {\n    const prev = this.selectedTemplate;\n    this.selectedTemplate = (event.target as any).values[0] as Template;\n    if (prev) {\n      this.currentVariables = [];\n      this.textInputAttachments = {};\n    }\n\n    if (this.selectedTemplate) {\n      this.translation = this.selectedTemplate.base_translation;\n      if (this.translation) {\n        this.variables = new Array(\n          (this.translation.variables || []).length\n        ).fill('');\n      } else {\n        this.variables = [];\n      }\n    } else {\n      this.translation = null;\n      this.variables = [];\n    }\n\n    this.fireCustomEvent(CustomEventType.ContextChanged, {\n      template: this.selectedTemplate,\n      translation: this.translation,\n      variables: this.currentVariables\n    });\n  }\n\n  private handleAttachmentLoading(event: CustomEvent) {\n    const media = event.target as MediaPicker;\n    const index = parseInt(media.getAttribute('index'));\n    this.pickersLoading[index] = event.detail.loading;\n    this.requestUpdate();\n  }\n\n  private handleAttachmentsChanged(event: CustomEvent) {\n    const media = event.target as MediaPicker;\n    const index = parseInt(media.getAttribute('index'));\n\n    if (media.attachments.length === 0) {\n      this.currentVariables[index] = '';\n    } else {\n      const attachment = media.attachments[0];\n      if (attachment.url && attachment.content_type) {\n        this.currentVariables[\n          index\n        ] = `${attachment.content_type}:${attachment.url}`;\n      } else {\n        this.currentVariables[index] = ``;\n      }\n    }\n    this.fireContentChange();\n    this.requestUpdate('currentVariables');\n  }\n\n  private handleVariableChanged(event: InputEvent) {\n    const target = event.target as HTMLInputElement;\n    const variableIndex = parseInt(target.getAttribute('index'));\n    const prefix = target.getAttribute('prefix') || '';\n\n    // add our prefix if we have a value\n    let value = target.value;\n    if (value) {\n      value = prefix + value;\n    }\n\n    this.currentVariables[variableIndex] = value;\n    this.fireContentChange();\n  }\n\n  private fireContentChange() {\n    this.fireCustomEvent(CustomEventType.ContentChanged, {\n      template: this.selectedTemplate,\n      translation: this.translation,\n      variables: this.currentVariables\n    });\n  }\n\n  private renderVariables(component: Component) {\n    // create a regex match based on the variable names\n    const variableRegex = new RegExp(\n      `{{(${Object.keys(component.variables || []).join('|')})}}`,\n      'g'\n    );\n\n    let variables = null;\n\n    let parts = [];\n    if (component.content && component.content.trim().length > 0) {\n      parts = component.content?.split(variableRegex) || [];\n    }\n    const currVariables = this.currentVariables || [];\n    if (parts.length > 0) {\n      variables = parts.map((part, index) => {\n        if (index % 2 === 0) {\n          return html`<span class=\"text\">${part}</span>`;\n        }\n        const variableIndex = component.variables[part];\n\n        return html`<temba-completion\n          class=\"variable\"\n          type=\"text\"\n          value=${variableIndex < currVariables.length\n            ? currVariables[variableIndex]\n            : null}\n          @keyup=${this.handleVariableChanged}\n          name=\"${component.name}\"\n          index=\"${variableIndex}\"\n          placeholder=\"{{${part}}}\"\n        ></temba-completion>`;\n      });\n    } else {\n      variables = Object.values(component.variables).map((variableIndex) => {\n        const variableSpec = this.translation.variables[variableIndex];\n        if (\n          variableSpec.type === 'image' ||\n          variableSpec.type === 'document' ||\n          variableSpec.type === 'audio' ||\n          variableSpec.type === 'video'\n        ) {\n          let attachments = [];\n          if (this.currentVariables[variableIndex]) {\n            const parts = this.currentVariables[variableIndex].split(':');\n            const content_type = parts[0];\n            const url = parts.slice(1).join(':');\n            attachments = [{ url, content_type }];\n          }\n\n          const loading = this.pickersLoading[variableIndex];\n\n          const prefix = variableSpec.type + ':';\n          let value =\n            variableIndex < currVariables.length\n              ? currVariables[variableIndex]\n              : null;\n\n          if (value && value.startsWith(prefix)) {\n            value = value.slice(prefix.length);\n          }\n\n          return html`\n            ${this.textInputAttachments[variableIndex]\n              ? html` <div class=\"label\">\n                    ${variableSpec.type.charAt(0).toUpperCase() +\n                    variableSpec.type.slice(1)}\n                    URL\n                  </div>\n                  <div\n                    style=\"display:flex;align-items:center;margin-bottom:1em;\"\n                  >\n                    <temba-completion\n                      style=\"flex-grow:1; margin-right:1em;\"\n                      prefix=\"${prefix}\"\n                      index=${variableIndex}\n                      value=${value}\n                      @keyup=${this.handleVariableChanged}\n                    ></temba-completion>\n                    <temba-icon\n                      name=\"close\"\n                      clickable\n                      @click=${() => {\n                        this.textInputAttachments[variableIndex] = false;\n                        this.currentVariables[variableIndex] = '';\n                        this.requestUpdate();\n                      }}\n                    >\n                    </temba-icon>\n                    <div></div>\n                  </div>`\n              : html`\n                  <div\n                    class=${getClasses({ loading })}\n                    style=\"\n              display: flex; \n              align-items: center; \n              border-radius: var(--curvature);\n              margin-bottom: 0.5em;\n              ${attachments.length === 0 && !loading\n                      ? `background-color:rgba(0,0,0,.04);`\n                      : ``}\"\n                  >\n                    <temba-media-picker\n                      accept=\"${variableSpec.type === 'document'\n                        ? 'application/pdf'\n                        : variableSpec.type + '/*'}\"\n                      max=\"1\"\n                      index=${variableIndex}\n                      icon=\"attachment_${variableSpec.type}\"\n                      attachments=${JSON.stringify(attachments)}\n                      @temba-loading=${this.handleAttachmentLoading.bind(this)}\n                      @change=${this.handleAttachmentsChanged.bind(this)}\n                    ></temba-media-picker>\n                    <div style=\"flex-grow:1\">\n                      ${attachments.length == 0 && !loading\n                        ? html`Attach ${variableSpec.type} to continue`\n                        : ''}\n                    </div>\n                    <temba-icon\n                      clickable\n                      name=\"edit\"\n                      @click=${() => {\n                        this.currentVariables[variableIndex] = '';\n                        this.textInputAttachments[variableIndex] = true;\n                        this.requestUpdate();\n                      }}\n                      style=\"margin-right:1em\"\n                    ></temba-icon>\n                  </div>\n                `}\n          `;\n        }\n      });\n    }\n\n    return html`<div class=\"content\">${variables}</div> `;\n  }\n\n  public renderComponents(components: Component[]): TemplateResult {\n    const nonButtons = components\n      .filter((comp) => !comp.type.startsWith('button/'))\n      .map(\n        (component) =>\n          html`<div class=\"${component['name']}\">\n            ${this.renderVariables(component)}\n          </div>`\n      );\n    const buttonComponents = components.filter((comp) =>\n      comp.type.startsWith('button/')\n    );\n    const buttons =\n      buttonComponents.length > 0 ? this.renderButtons(buttonComponents) : null;\n    return html`<div class=\"main\">${nonButtons}</div>\n      <div class=\"buttons\">\n        ${buttons}\n        <div></div>\n      </div>`;\n  }\n\n  public renderButtons(components): TemplateResult {\n    const buttons = components.map((component) => {\n      if (component.display) {\n        return html`\n          <div class=\"button\">\n            <div class=\"display\">${component.display}</div>\n            ${this.renderVariables(component)}\n          </div>\n        `;\n      } else {\n        return html`\n          <div class=\"button\">${this.renderVariables(component)}</div>\n        `;\n      }\n    });\n    return html`<div class=\"button-wrapper\">\n      <div class=\"button-header\">Template Buttons</div>\n      <div class=\"buttons\">${buttons}</div>\n    </div>`;\n  }\n\n  public renderWidget(): TemplateResult {\n    let content = null;\n    if (this.translation) {\n      content = this.renderComponents(this.translation.components);\n    } else if (this.selectedTemplate) {\n      content = html`<div class=\"error-message\">\n        This template currently has no approved translations.\n      </div>`;\n    }\n\n    return html`\n      <div>\n        <temba-select\n          searchable\n          ?clearable=${!this.translating}\n          ?disabled=${this.translating}\n          valuekey=\"uuid\"\n          class=\"picker\"\n          value=\"${this.template}\"\n          endpoint=\"${this.url}\"\n          shouldExclude=${(template) => template.status !== 'approved'}\n          placeholder=\"Select a template\"\n          @temba-content-changed=${this.swallowEvent}\n          @change=${this.handleTemplateChanged}\n        >\n        </temba-select>\n        ${content ? html` <div class=\"template\">${content}</div>` : null}\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -3,7 +3,7 @@ import { html, css } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { styleMap } from 'lit-html/directives/style-map.js';
-import { FormElement } from './FormElement';
+import { FieldElement } from './FieldElement';
 import { sanitizeUnintendedUnicode } from '../utils';
 export var InputType;
 (function (InputType) {
@@ -11,9 +11,10 @@ export var InputType;
     InputType["Password"] = "password";
     InputType["Number"] = "number";
 })(InputType || (InputType = {}));
-export class TextInput extends FormElement {
+export class TextInput extends FieldElement {
     static get styles() {
         return css `
+      ${super.styles}
       .input-container {
         border-radius: var(--curvature-widget);
         cursor: var(--input-cursor);
@@ -296,9 +297,14 @@ export class TextInput extends FormElement {
     }
     // TODO make this a formelement and have contactsearch set the root
     render() {
-        const containerStyle = {
-            height: `${this.textarea ? '100%' : 'auto'}`
-        };
+        return this.renderField();
+    }
+    renderWidget() {
+        const containerStyle = {};
+        if (this.counter) {
+            containerStyle['--counter-background'] =
+                'var(--color-widget-border, transparent)';
+        }
         const clear = this.clearable && this.inputElement && this.inputElement.value
             ? html `<temba-icon
             name="x"
@@ -389,31 +395,21 @@ export class TextInput extends FormElement {
             }
         }
         return html `
-      <temba-field
-        name=${this.name}
-        .label="${this.label}"
-        .helpText="${this.helpText}"
-        .errors=${this.errors}
-        .widgetOnly=${this.widgetOnly}
-        .hideLabel=${this.hideLabel}
-        .disabled=${this.disabled}
+      <div
+        class="input-container"
+        style=${styleMap(containerStyle)}
+        @click=${this.handleContainerClick}
       >
-        <div
-          class="input-container"
-          style=${styleMap(containerStyle)}
-          @click=${this.handleContainerClick}
-        >
-          <slot name="prefix"></slot>
+        <slot name="prefix"></slot>
 
-          ${input} ${clear}
-          <slot name="type" class="type-icon"
-            >${this.type === InputType.Number
+        ${input} ${clear}
+        <slot name="type" class="type-icon"
+          >${this.type === InputType.Number
             ? html `<temba-icon name="number"></temba-icon>`
             : null}</slot
-          >
-          <slot></slot>
-        </div>
-      </temba-field>
+        >
+        <slot></slot>
+      </div>
     `;
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../src/form/TextInput.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { FormElement } from './FormElement';\nimport { Modax } from '../layout/Modax';\nimport { sanitizeUnintendedUnicode } from '../utils';\nimport { CharCount } from '../display/CharCount';\n\nexport enum InputType {\n  Text = 'text',\n  Password = 'password',\n  Number = 'number'\n}\n\nexport class TextInput extends FormElement {\n  static get styles() {\n    return css`\n      .input-container {\n        border-radius: var(--curvature-widget);\n        cursor: var(--input-cursor);\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        position: relative;\n      }\n\n      .input-container:hover {\n      }\n\n      textarea {\n        height: var(--textarea-height);\n        min-height: var(--textarea-min-height, var(--textarea-height));\n        transition: height var(--transition-speed) ease-in-out;\n        unicode-bidi: var(--unicode-bidi, normal);\n      }\n\n      .textinput:focus {\n      }\n\n      .textinput {\n        padding: var(--temba-textinput-padding);\n        border: none;\n        flex: 1;\n        margin: 0;\n        background: transparent;\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: var(--input-cursor);\n        resize: none;\n        width: 100%;\n      }\n\n      .textinput:focus {\n        outline: none;\n        box-shadow: none;\n        cursor: text;\n        color: var(--color-widget-text-focused, var(--color-widget-text));\n      }\n\n      .textinput::placeholder {\n        color: var(--color-placeholder);\n      }\n\n      .grow-wrap {\n        display: flex;\n        align-items: stretch;\n        width: 100%;\n        margin-bottom: 1em;\n      }\n\n      .grow-wrap > div {\n        border: 0px solid green;\n        white-space: pre-wrap;\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        width: 100%;\n        word-break: break-word;\n        opacity: 0;\n        z-index: -1;\n        max-height: var(--temba-textinput-max-height, 30em);\n      }\n\n      .grow-wrap textarea {\n        margin-left: -100%;\n        height: 100%;\n        flex-grow: 1;\n      }\n\n      input[type='number'] {\n        appearance: none;\n      }\n\n      input[type='number']::-webkit-inner-spin-button {\n        display: none;\n      }\n\n      .type-icon {\n        color: #e3e3e3;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  textarea: boolean;\n\n  @property({ type: String })\n  placeholder = '';\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: 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  autogrow = false;\n\n  @property({ type: String })\n  type = InputType.Text;\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.inputElement = this.shadowRoot.querySelector('.textinput');\n\n    if (changes.has('counter') && this.counter && this.counter.trim()) {\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      if (this.counterElement) {\n        this.counterElement.text = this.value;\n      }\n    }\n  }\n\n  private updateAutogrowSize(): void {\n    if (this.textarea && this.autogrow) {\n      const autogrow = this.shadowRoot.querySelector(\n        '.grow-wrap > div'\n      ) as HTMLDivElement;\n      if (autogrow) {\n        autogrow.innerText = this.value + String.fromCharCode(10);\n      }\n    }\n  }\n\n  public updated(changes: Map<string, any>) {\n    super.updated(changes);\n\n    if (changes.has('value')) {\n      if (changes.get('value') !== undefined) {\n        this.fireEvent('change');\n      }\n\n      this.updateAutogrowSize();\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  public getDisplayValue() {\n    return this.inputElement.value;\n  }\n\n  private handleClear(event: any): void {\n    event.stopPropagation();\n    event.preventDefault();\n    this.value = null;\n  }\n\n  public getTextInput(): TextInput {\n    return this;\n  }\n\n  public updateValue(value: string): void {\n    const cursorStart = this.inputElement.selectionStart;\n    const cursorEnd = this.inputElement.selectionEnd;\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 ? sanitizeUnintendedUnicode(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 handleContainerClick(): void {\n    if (this.disabled) {\n      return;\n    }\n    if (this.inputElement) {\n      this.inputElement.click();\n    }\n  }\n\n  private handleContainerFocus(): void {\n    if (this.disabled) {\n      return;\n    }\n    if (this.inputElement) {\n      this.inputElement.focus();\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.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  public focus(): void {\n    super.focus();\n    this.handleContainerFocus();\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        autofocus\n        class=\"textinput\"\n        autocomplete=\"off\"\n        name=${this.name}\n        type=\"${this.password || this.type === InputType.Password\n          ? 'password'\n          : this.type}\"\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              // if we don't have something to submit then bail\n              if (!parentModax && !parentForm) {\n                return false;\n              }\n\n              // don't submit disabled forms on enter\n              if (parentModax && parentModax.disabled) {\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          maxlength=\"${ifDefined(this.maxlength)}\"\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    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\n          ${input} ${clear}\n          <slot name=\"type\" class=\"type-icon\"\n            >${this.type === InputType.Number\n              ? html`<temba-icon name=\"number\"></temba-icon>`\n              : null}</slot\n          >\n          <slot></slot>\n        </div>\n      </temba-field>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../src/form/TextInput.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { FieldElement } from './FieldElement';\nimport { Modax } from '../layout/Modax';\nimport { sanitizeUnintendedUnicode } from '../utils';\nimport { CharCount } from '../display/CharCount';\n\nexport enum InputType {\n  Text = 'text',\n  Password = 'password',\n  Number = 'number'\n}\n\nexport class TextInput extends FieldElement {\n  static get styles() {\n    return css`\n      ${super.styles}\n      .input-container {\n        border-radius: var(--curvature-widget);\n        cursor: var(--input-cursor);\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        position: relative;\n      }\n\n      .input-container:hover {\n      }\n\n      textarea {\n        height: var(--textarea-height);\n        min-height: var(--textarea-min-height, var(--textarea-height));\n        transition: height var(--transition-speed) ease-in-out;\n        unicode-bidi: var(--unicode-bidi, normal);\n      }\n\n      .textinput:focus {\n      }\n\n      .textinput {\n        padding: var(--temba-textinput-padding);\n        border: none;\n        flex: 1;\n        margin: 0;\n        background: transparent;\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: var(--input-cursor);\n        resize: none;\n        width: 100%;\n      }\n\n      .textinput:focus {\n        outline: none;\n        box-shadow: none;\n        cursor: text;\n        color: var(--color-widget-text-focused, var(--color-widget-text));\n      }\n\n      .textinput::placeholder {\n        color: var(--color-placeholder);\n      }\n\n      .grow-wrap {\n        display: flex;\n        align-items: stretch;\n        width: 100%;\n        margin-bottom: 1em;\n      }\n\n      .grow-wrap > div {\n        border: 0px solid green;\n        white-space: pre-wrap;\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        width: 100%;\n        word-break: break-word;\n        opacity: 0;\n        z-index: -1;\n        max-height: var(--temba-textinput-max-height, 30em);\n      }\n\n      .grow-wrap textarea {\n        margin-left: -100%;\n        height: 100%;\n        flex-grow: 1;\n      }\n\n      input[type='number'] {\n        appearance: none;\n      }\n\n      input[type='number']::-webkit-inner-spin-button {\n        display: none;\n      }\n\n      .type-icon {\n        color: #e3e3e3;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  textarea: boolean;\n\n  @property({ type: String })\n  placeholder = '';\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: 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  autogrow = false;\n\n  @property({ type: String })\n  type = InputType.Text;\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.inputElement = this.shadowRoot.querySelector('.textinput');\n\n    if (changes.has('counter') && this.counter && this.counter.trim()) {\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      if (this.counterElement) {\n        this.counterElement.text = this.value;\n      }\n    }\n  }\n\n  private updateAutogrowSize(): void {\n    if (this.textarea && this.autogrow) {\n      const autogrow = this.shadowRoot.querySelector(\n        '.grow-wrap > div'\n      ) as HTMLDivElement;\n      if (autogrow) {\n        autogrow.innerText = this.value + String.fromCharCode(10);\n      }\n    }\n  }\n\n  public updated(changes: Map<string, any>) {\n    super.updated(changes);\n\n    if (changes.has('value')) {\n      if (changes.get('value') !== undefined) {\n        this.fireEvent('change');\n      }\n\n      this.updateAutogrowSize();\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  public getDisplayValue() {\n    return this.inputElement.value;\n  }\n\n  private handleClear(event: any): void {\n    event.stopPropagation();\n    event.preventDefault();\n    this.value = null;\n  }\n\n  public getTextInput(): TextInput {\n    return this;\n  }\n\n  public updateValue(value: string): void {\n    const cursorStart = this.inputElement.selectionStart;\n    const cursorEnd = this.inputElement.selectionEnd;\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 ? sanitizeUnintendedUnicode(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 handleContainerClick(): void {\n    if (this.disabled) {\n      return;\n    }\n    if (this.inputElement) {\n      this.inputElement.click();\n    }\n  }\n\n  private handleContainerFocus(): void {\n    if (this.disabled) {\n      return;\n    }\n    if (this.inputElement) {\n      this.inputElement.focus();\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.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  public focus(): void {\n    super.focus();\n    this.handleContainerFocus();\n  }\n\n  // TODO make this a formelement and have contactsearch set the root\n  public render(): TemplateResult {\n    return this.renderField();\n  }\n\n  protected renderWidget() {\n    const containerStyle: any = {};\n    if (this.counter) {\n      containerStyle['--counter-background'] =\n        'var(--color-widget-border, transparent)';\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        autofocus\n        class=\"textinput\"\n        autocomplete=\"off\"\n        name=${this.name}\n        type=\"${this.password || this.type === InputType.Password\n          ? 'password'\n          : this.type}\"\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              // if we don't have something to submit then bail\n              if (!parentModax && !parentForm) {\n                return false;\n              }\n\n              // don't submit disabled forms on enter\n              if (parentModax && parentModax.disabled) {\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          maxlength=\"${ifDefined(this.maxlength)}\"\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    return html`\n      <div\n        class=\"input-container\"\n        style=${styleMap(containerStyle)}\n        @click=${this.handleContainerClick}\n      >\n        <slot name=\"prefix\"></slot>\n\n        ${input} ${clear}\n        <slot name=\"type\" class=\"type-icon\"\n          >${this.type === InputType.Number\n            ? html`<temba-icon name=\"number\"></temba-icon>`\n            : null}</slot\n        >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/form/select/Select.js

@@ -5,7 +5,7 @@ import { property, state } from 'lit/decorators.js';
 import { getUrl, getClasses, fetchResults, postJSON } from '../../utils';
 import '../../display/Options';
 import '../../list/SortableList';
-import { FormElement } from '../../form/FormElement';
+import { FieldElement } from '../../form/FieldElement';
 import { lru } from 'tiny-lru';
 import { CustomEventType } from '../../interfaces';
 import { renderCompletionOption, updateInputElementWithCompletion, executeCompletionQuery } from '../../excellent/helpers';
@@ -13,9 +13,11 @@ import { styleMap } from 'lit-html/directives/style-map.js';
 import { Icon } from '../../Icons';
 import { msg } from '@lit/localize';
 const LOOK_AHEAD = 20;
-export class Select extends FormElement {
+export class Select extends FieldElement {
     static get styles() {
         return css `
+      ${super.styles}
+
       :host {
         --transition-speed: 0;
         font-family: var(--font-family);
@@ -1307,7 +1309,7 @@ export class Select extends FormElement {
             }
         }
     }
-    render() {
+    renderWidget() {
         const placeholder = this.values.length === 0 ? this.placeholder : '';
         // Single unified placeholder - shows when empty and (not focused OR not searchable)
         const shouldShowPlaceholder = this.values.length === 0 && (!this.focused || !this.searchable);
@@ -1479,16 +1481,6 @@ export class Select extends FormElement {
         ${this.isMultiMode && this.searchable && this.focused ? input : null}
         ${placeholderElement}`}`;
         return html `
-            
-      <temba-field
-        name=${this.name}
-        .label=${this.label}
-        .helpText=${this.helpText}
-        .errors=${this.errors}
-        .widgetOnly=${this.widgetOnly}
-        .hideErrors=${this.hideErrors}
-        ?disabled=${this.disabled}
-      >
         <slot></slot>
         <div class="wrapper-bg">
         
@@ -1572,8 +1564,10 @@ export class Select extends FormElement {
             </div>`
             : null}
     </temba-options>
-  </temba-field>
-  `;
+    `;
+    }
+    render() {
+        return this.renderField();
     }
 }
 __decorate([