@nyaruka/temba-components 0.129.3 → 0.129.5

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

@@ -1 +1 @@
-{"version":3,"file":"Completion.js","sourceRoot":"","sources":["../../../src/form/Completion.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAE9D,OAAO,EACL,sBAAsB,EACtB,gCAAgC,EAChC,sBAAsB,EACvB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAEpC;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;IAA3C;;QAmEE,kBAAa,GAAG,KAAK,CAAC;QAGtB,mBAAc,GAAa,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC;QAM/C,gBAAW,GAAG,EAAE,CAAC;QASjB,YAAO,GAAU,EAAE,CAAC;QAGpB,SAAI,GAAG,EAAE,CAAC;QAGV,UAAK,GAAG,EAAE,CAAC;QAeX,aAAQ,GAAG,KAAK,CAAC;IAiMnB,CAAC;IA1SC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuDT,CAAC;IACJ,CAAC;IAqDM,YAAY;QACjB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CACnD,iBAAiB,CACL,CAAC;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;QAE9D,6EAA6E;QAC7E,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACrD,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QAClD,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;QACnE,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC;QAC3E,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACvC,CAAC;IAEO,WAAW,CAAC,GAAkB;QACpC,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,0DAA0D;YAC1D,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC5C,IAAI,GAAG,CAAC,GAAG,KAAK,SAAS,IAAI,GAAG,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;oBACrD,OAAO;gBACT,CAAC;gBAED,IAAI,GAAG,CAAC,OAAO,EAAE,CAAC;oBAChB,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;wBACvC,OAAO;oBACT,CAAC;gBACH,CAAC;gBAED,IACE,GAAG,CAAC,GAAG,KAAK,OAAO;oBACnB,GAAG,CAAC,GAAG,KAAK,QAAQ;oBACpB,GAAG,CAAC,GAAG,KAAK,KAAK;oBACjB,GAAG,CAAC,GAAG,CAAC,UAAU,CAAC,SAAS,CAAC,EAC7B,CAAC;oBACD,GAAG,CAAC,eAAe,EAAE,CAAC;oBACtB,GAAG,CAAC,cAAc,EAAE,CAAC;oBACrB,OAAO;gBACT,CAAC;gBAED,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,aAA0B,CAAC,CAAC;YACpD,CAAC;QACH,CAAC;IACH,CAAC;IAEM,iBAAiB;QACtB,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;IACjC,CAAC;IAEO,YAAY,CAAC,GAAc;QACjC,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;YACtB,OAAO;QACT,CAAC;QAED,MAAM,MAAM,GAAG,sBAAsB,CAAC,GAAG,CAAC,YAAY,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAEtE,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC1B,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;QAC9B,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC;IAC9C,CAAC;IAEO,WAAW,CAAC,GAAe;QACjC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,aAA0B,CAAC,CAAC;IACpD,CAAC;IAEM,OAAO,CAAC,iBAAmC;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEjC,oEAAoE;QACpE,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QACvD,CAAC;IACH,CAAC;IAEO,WAAW,CAAC,GAAkB;QACpC,MAAM,GAAG,GAAG,GAAG,CAAC,aAA0B,CAAC;QAC3C,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;QACvB,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,YAAY,CAAC,KAAK,CAAC;QACpC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC3B,CAAC;IAEO,oBAAoB;QAC1B,0CAA0C;QAC1C,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACrB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;YAClB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAClB,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAEO,qBAAqB,CAAC,GAAgB;QAC5C,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,QAA4B,CAAC;QACvD,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC;QAEjC,gCAAgC,CAC9B,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAClC,MAAM,CACP,CAAC;QACF,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAElB,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC;IAEM,YAAY;QACjB,OAAO,IAAI,CAAC,gBAAgB,CAAC;IAC/B,CAAC;IAEM,KAAK;QACV,KAAK,CAAC,KAAK,EAAE,CAAC;QACd,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAc,CAAC;QAC5E,IAAI,KAAK,EAAE,CAAC;YACV,KAAK,CAAC,KAAK,EAAE,CAAC;QAChB,CAAC;IACH,CAAC;IAEM,KAAK;QACV,KAAK,CAAC,KAAK,EAAE,CAAC;QACd,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAc,CAAC;QAC5E,IAAI,KAAK,EAAE,CAAC;YACV,KAAK,CAAC,KAAK,EAAE,CAAC;QAChB,CAAC;IACH,CAAC;IAEM,MAAM;QACX,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc;YACtC,CAAC,CAAC;gBACE,GAAG,EAAE,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,IAAI;gBACnC,IAAI,EAAE,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,IAAI;aACtC;YACH,CAAC,CAAC,EAAE,CAAC;QAEP,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;QAExD,OAAO,IAAI,CAAA;;eAEA,IAAI,CAAC,IAAI;iBACP,IAAI,CAAC,KAAK;oBACP,IAAI,CAAC,QAAQ;kBACf,IAAI,CAAC,MAAM;sBACP,IAAI,CAAC,UAAU;;;mCAGF,QAAQ,CAAC,YAAY,CAAC;;mBAEtC,IAAI,CAAC,IAAI;0BACF,IAAI,CAAC,WAAW;kBACxB,IAAI,CAAC,GAAG;sBACJ,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;qBACxB,IAAI,CAAC,WAAW;qBAChB,IAAI,CAAC,WAAW;qBAChB,IAAI,CAAC,WAAW;oBACjB,IAAI,CAAC,oBAAoB;yBACpB,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;qBAC7B,IAAI,CAAC,KAAK;wBACP,IAAI,CAAC,QAAQ;wBACb,IAAI,CAAC,QAAQ;6BACR,IAAI,CAAC,aAAa;;;;+BAIhB,IAAI,CAAC,qBAAqB;8BAC3B,IAAI,CAAC,oBAAoB;4BAC3B,sBAAsB;wBAC1B,IAAI,CAAC,aAAa;uBACnB,IAAI,CAAC,OAAO;uBACZ,OAAO;;cAEhB,IAAI,CAAC,eAAe;YACpB,CAAC,CAAC,IAAI,CAAA;;sBAEE,sBAAsB,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC;;iBAEvD;YACH,CAAC,CAAC,IAAI;yCACqB,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI;gBACzD,GAAG,CAAC,kCAAkC,CAAC;;;;;KAKlD,CAAC;IACJ,CAAC;CACF;AA9OC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACT;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACN;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACoB;AAG/C;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;mDACG;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACV;AAGjB;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;oDACH;AAG5B;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iDACD;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CACN;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACV;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACf;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDACD;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACX;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACX","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  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          >\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 { 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"]}

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

@@ -59,15 +59,101 @@ export class FormField extends LitElement {
       }
 
       .alert-error {
-        background: rgba(255, 181, 181, 0.17);
-        border: none;
-        border-left: 0px solid var(--color-error);
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        z-index: 1000;
+        background: white;
+        border: 1px solid var(--color-error);
         color: var(--color-error);
-        padding: 10px;
-        margin: 15px 0px;
+        padding: 8px 12px;
+        margin: 2px 0 0 0;
         border-radius: var(--curvature);
-        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
-          0 1px 2px 0 rgba(0, 0, 0, 0.06);
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+          0 2px 4px -1px rgba(0, 0, 0, 0.06);
+        font-size: 0.85em;
+        line-height: 1.2;
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(-12px);
+        transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out,
+          transform 0.2s ease-in-out;
+      }
+
+      .field:hover .alert-error {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(2px);
+      }
+
+      /* Hide error popup when widget is focused */
+      .field:focus-within .alert-error {
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(-4px);
+      }
+
+      .field.has-error {
+        position: relative;
+        /* Set CSS custom properties that form components can use */
+        --color-widget-border: var(--color-error);
+        --widget-box-shadow-focused: var(
+          --widget-box-shadow-focused-error,
+          0 0 0 3px rgba(255, 99, 71, 0.3)
+        );
+        --color-focus: var(--color-error);
+      }
+
+      .field.has-error .widget {
+        border-radius: var(--curvature-widget);
+        position: relative;
+      }
+
+      /* Force error styling with higher specificity */
+      :host(.has-error) .field.has-error .widget .input-container,
+      :host(.has-error) .field.has-error .widget .select-container,
+      :host(.has-error) .field.has-error .widget .comp-container,
+      :host(.has-error) .field.has-error .widget .checkbox-container,
+      :host(.has-error) .field.has-error .widget .container,
+      :host(.has-error) .field.has-error .widget .range-container,
+      .field.has-error .widget .input-container,
+      .field.has-error .widget .select-container,
+      .field.has-error .widget .comp-container,
+      .field.has-error .widget .checkbox-container,
+      .field.has-error .widget .container,
+      .field.has-error .widget .range-container {
+        border-color: var(--color-error) !important;
+      }
+
+      /* When error field is focused, use error-colored focus ring */
+      :host(.has-error) .field.has-error .widget .input-container:focus-within,
+      :host(.has-error) .field.has-error .widget .select-container:focus-within,
+      :host(.has-error) .field.has-error .widget .select-container.focused,
+      :host(.has-error) .field.has-error .widget .comp-container:focus-within,
+      :host(.has-error)
+        .field.has-error
+        .widget
+        .checkbox-container:focus-within,
+      :host(.has-error) .field.has-error .widget .container:focus-within,
+      :host(.has-error) .field.has-error .widget .range-container:focus-within,
+      .field.has-error .widget .input-container:focus-within,
+      .field.has-error .widget .select-container:focus-within,
+      .field.has-error .widget .select-container.focused,
+      .field.has-error .widget .comp-container:focus-within,
+      .field.has-error .widget .checkbox-container:focus-within,
+      .field.has-error .widget .container:focus-within,
+      .field.has-error .widget .range-container:focus-within {
+        border-color: var(--color-error) !important;
+        box-shadow: var(
+          --widget-box-shadow-focused-error,
+          0 0 0 3px rgba(255, 99, 71, 0.3)
+        ) !important;
+      }
+
+      .alert-error p {
+        margin: 0;
+        padding: 0;
       }
 
       .disabled {
@@ -76,9 +162,18 @@ export class FormField extends LitElement {
       }
     `;
     }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('errors') ||
+            changedProperties.has('hideErrors')) {
+            const hasErrors = !this.hideErrors && this.errors && this.errors.length > 0;
+            this.classList.toggle('has-error', hasErrors);
+        }
+    }
     render() {
-        const errors = !this.hideErrors
-            ? (this.errors || []).map((error) => {
+        const hasErrors = !this.hideErrors && this.errors && this.errors.length > 0;
+        const errors = hasErrors
+            ? this.errors.map((error) => {
                 return html `
             <div class="alert-error">${renderMarkdown(error)}</div>
           `;
@@ -91,7 +186,11 @@ export class FormField extends LitElement {
       `;
         }
         return html `
-      <div class="field ${this.disabled ? 'disabled' : ''}">
+      <div
+        class="field ${this.disabled ? 'disabled' : ''} ${hasErrors
+            ? 'has-error'
+            : ''}"
+      >
         ${!!this.name && !this.hideLabel && !!this.label
             ? html `
               <label class="control-label" for="${this.name}"
@@ -101,6 +200,7 @@ export class FormField extends LitElement {
             : null}
         <div class="widget">
           <slot></slot>
+          ${errors}
         </div>
         ${this.helpText && this.helpText !== 'None'
             ? html `
@@ -109,7 +209,6 @@ export class FormField extends LitElement {
               </div>
             `
             : null}
-        ${errors}
       </div>
     `;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/form/FormField.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { renderMarkdown } from '../markdown';\n\n/**\n * A small wrapper to display labels and help text in a smartmin style.\n * This exists so we can display things consistently before restyling.\n */\nexport class FormField extends LitElement {\n  static get styles() {\n    return css`\n      :host {\n        font-family: var(--font-family);\n      }\n\n      label {\n        margin-bottom: 5px;\n        margin-left: 4px;\n        display: block;\n        font-weight: 400;\n        font-size: var(--label-size);\n        letter-spacing: 0.05em;\n        line-height: normal;\n        color: #777;\n      }\n\n      .help-text {\n        font-size: var(--help-text-size);\n        line-height: normal;\n        color: var(--color-text-help);\n        margin-left: var(--help-text-margin-left);\n        margin-top: -16px;\n        opacity: 0;\n        transition: opacity ease-in-out 100ms, margin-top ease-in-out 200ms;\n        pointer-events: none;\n      }\n\n      .help-text.help-always {\n        opacity: 1;\n        margin-top: 6px;\n        margin-left: var(--help-text-margin-left);\n      }\n\n      .field:focus-within .help-text {\n        margin-top: 6px;\n        opacity: 1;\n      }\n\n      .alert-error {\n        background: rgba(255, 181, 181, 0.17);\n        border: none;\n        border-left: 0px solid var(--color-error);\n        color: var(--color-error);\n        padding: 10px;\n        margin: 15px 0px;\n        border-radius: var(--curvature);\n        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),\n          0 1px 2px 0 rgba(0, 0, 0, 0.06);\n      }\n\n      .disabled {\n        opacity: var(--disabled-opacity) !important;\n        pointer-events: none !important;\n      }\n    `;\n  }\n\n  @property({ type: Boolean, attribute: 'hide_label' })\n  hideLabel = false;\n\n  @property({ type: Boolean, attribute: 'widget_only' })\n  widgetOnly = false;\n\n  @property({ type: Array, attribute: false })\n  errors: string[] = [];\n\n  @property({ type: Boolean })\n  hideErrors = false;\n\n  @property({ type: String, attribute: 'help_text' })\n  helpText = '';\n\n  @property({ type: Boolean, attribute: 'help_always' })\n  helpAlways = true;\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  public render(): TemplateResult {\n    const errors = !this.hideErrors\n      ? (this.errors || []).map((error: string) => {\n          return html`\n            <div class=\"alert-error\">${renderMarkdown(error)}</div>\n          `;\n        })\n      : [];\n\n    if (this.widgetOnly) {\n      return html`\n        <div class=\"${this.disabled ? 'disabled' : ''}\"><slot></slot></div>\n        ${errors}\n      `;\n    }\n\n    return html`\n      <div class=\"field ${this.disabled ? 'disabled' : ''}\">\n        ${!!this.name && !this.hideLabel && !!this.label\n          ? html`\n              <label class=\"control-label\" for=\"${this.name}\"\n                >${this.label}</label\n              >\n            `\n          : null}\n        <div class=\"widget\">\n          <slot></slot>\n        </div>\n        ${this.helpText && this.helpText !== 'None'\n          ? html`\n              <div class=\"help-text ${this.helpAlways ? 'help-always' : null}\">\n                ${this.helpText}\n              </div>\n            `\n          : null}\n        ${errors}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/form/FormField.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { renderMarkdown } from '../markdown';\n\n/**\n * A small wrapper to display labels and help text in a smartmin style.\n * This exists so we can display things consistently before restyling.\n */\nexport class FormField extends LitElement {\n  static get styles() {\n    return css`\n      :host {\n        font-family: var(--font-family);\n      }\n\n      label {\n        margin-bottom: 5px;\n        margin-left: 4px;\n        display: block;\n        font-weight: 400;\n        font-size: var(--label-size);\n        letter-spacing: 0.05em;\n        line-height: normal;\n        color: #777;\n      }\n\n      .help-text {\n        font-size: var(--help-text-size);\n        line-height: normal;\n        color: var(--color-text-help);\n        margin-left: var(--help-text-margin-left);\n        margin-top: -16px;\n        opacity: 0;\n        transition: opacity ease-in-out 100ms, margin-top ease-in-out 200ms;\n        pointer-events: none;\n      }\n\n      .help-text.help-always {\n        opacity: 1;\n        margin-top: 6px;\n        margin-left: var(--help-text-margin-left);\n      }\n\n      .field:focus-within .help-text {\n        margin-top: 6px;\n        opacity: 1;\n      }\n\n      .alert-error {\n        position: absolute;\n        top: 100%;\n        left: 0;\n        right: 0;\n        z-index: 1000;\n        background: white;\n        border: 1px solid var(--color-error);\n        color: var(--color-error);\n        padding: 8px 12px;\n        margin: 2px 0 0 0;\n        border-radius: var(--curvature);\n        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n          0 2px 4px -1px rgba(0, 0, 0, 0.06);\n        font-size: 0.85em;\n        line-height: 1.2;\n        opacity: 0;\n        visibility: hidden;\n        transform: translateY(-12px);\n        transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out,\n          transform 0.2s ease-in-out;\n      }\n\n      .field:hover .alert-error {\n        opacity: 1;\n        visibility: visible;\n        transform: translateY(2px);\n      }\n\n      /* Hide error popup when widget is focused */\n      .field:focus-within .alert-error {\n        opacity: 0;\n        visibility: hidden;\n        transform: translateY(-4px);\n      }\n\n      .field.has-error {\n        position: relative;\n        /* Set CSS custom properties that form components can use */\n        --color-widget-border: var(--color-error);\n        --widget-box-shadow-focused: var(\n          --widget-box-shadow-focused-error,\n          0 0 0 3px rgba(255, 99, 71, 0.3)\n        );\n        --color-focus: var(--color-error);\n      }\n\n      .field.has-error .widget {\n        border-radius: var(--curvature-widget);\n        position: relative;\n      }\n\n      /* Force error styling with higher specificity */\n      :host(.has-error) .field.has-error .widget .input-container,\n      :host(.has-error) .field.has-error .widget .select-container,\n      :host(.has-error) .field.has-error .widget .comp-container,\n      :host(.has-error) .field.has-error .widget .checkbox-container,\n      :host(.has-error) .field.has-error .widget .container,\n      :host(.has-error) .field.has-error .widget .range-container,\n      .field.has-error .widget .input-container,\n      .field.has-error .widget .select-container,\n      .field.has-error .widget .comp-container,\n      .field.has-error .widget .checkbox-container,\n      .field.has-error .widget .container,\n      .field.has-error .widget .range-container {\n        border-color: var(--color-error) !important;\n      }\n\n      /* When error field is focused, use error-colored focus ring */\n      :host(.has-error) .field.has-error .widget .input-container:focus-within,\n      :host(.has-error) .field.has-error .widget .select-container:focus-within,\n      :host(.has-error) .field.has-error .widget .select-container.focused,\n      :host(.has-error) .field.has-error .widget .comp-container:focus-within,\n      :host(.has-error)\n        .field.has-error\n        .widget\n        .checkbox-container:focus-within,\n      :host(.has-error) .field.has-error .widget .container:focus-within,\n      :host(.has-error) .field.has-error .widget .range-container:focus-within,\n      .field.has-error .widget .input-container:focus-within,\n      .field.has-error .widget .select-container:focus-within,\n      .field.has-error .widget .select-container.focused,\n      .field.has-error .widget .comp-container:focus-within,\n      .field.has-error .widget .checkbox-container:focus-within,\n      .field.has-error .widget .container:focus-within,\n      .field.has-error .widget .range-container:focus-within {\n        border-color: var(--color-error) !important;\n        box-shadow: var(\n          --widget-box-shadow-focused-error,\n          0 0 0 3px rgba(255, 99, 71, 0.3)\n        ) !important;\n      }\n\n      .alert-error p {\n        margin: 0;\n        padding: 0;\n      }\n\n      .disabled {\n        opacity: var(--disabled-opacity) !important;\n        pointer-events: none !important;\n      }\n    `;\n  }\n\n  @property({ type: Boolean, attribute: 'hide_label' })\n  hideLabel = false;\n\n  @property({ type: Boolean, attribute: 'widget_only' })\n  widgetOnly = false;\n\n  @property({ type: Array, attribute: false })\n  errors: string[] = [];\n\n  @property({ type: Boolean })\n  hideErrors = false;\n\n  @property({ type: String, attribute: 'help_text' })\n  helpText = '';\n\n  @property({ type: Boolean, attribute: 'help_always' })\n  helpAlways = true;\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  updated(changedProperties: Map<string | number | symbol, unknown>): void {\n    super.updated(changedProperties);\n\n    if (\n      changedProperties.has('errors') ||\n      changedProperties.has('hideErrors')\n    ) {\n      const hasErrors =\n        !this.hideErrors && this.errors && this.errors.length > 0;\n      this.classList.toggle('has-error', hasErrors);\n    }\n  }\n\n  public render(): TemplateResult {\n    const hasErrors = !this.hideErrors && this.errors && this.errors.length > 0;\n    const errors = hasErrors\n      ? this.errors.map((error: string) => {\n          return html`\n            <div class=\"alert-error\">${renderMarkdown(error)}</div>\n          `;\n        })\n      : [];\n\n    if (this.widgetOnly) {\n      return html`\n        <div class=\"${this.disabled ? 'disabled' : ''}\"><slot></slot></div>\n        ${errors}\n      `;\n    }\n\n    return html`\n      <div\n        class=\"field ${this.disabled ? 'disabled' : ''} ${hasErrors\n          ? 'has-error'\n          : ''}\"\n      >\n        ${!!this.name && !this.hideLabel && !!this.label\n          ? html`\n              <label class=\"control-label\" for=\"${this.name}\"\n                >${this.label}</label\n              >\n            `\n          : null}\n        <div class=\"widget\">\n          <slot></slot>\n          ${errors}\n        </div>\n        ${this.helpText && this.helpText !== 'None'\n          ? html`\n              <div class=\"help-text ${this.helpAlways ? 'help-always' : null}\">\n                ${this.helpText}\n              </div>\n            `\n          : null}\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,223 @@
+import { __decorate } from "tslib";
+import { html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { BaseListEditor } from './BaseListEditor';
+let KeyValueEditor = class KeyValueEditor extends BaseListEditor {
+    constructor() {
+        super();
+        this.keyPlaceholder = 'Key';
+        this.valuePlaceholder = 'Value';
+        this.showValidation = true;
+        this.keyErrors = {};
+        // Configure to maintain empty items
+        this.maintainEmptyItem = true;
+        this._items = [];
+    }
+    // External API uses array format to preserve duplicate keys
+    get value() {
+        return this._items.filter(({ key, value }) => key.trim() !== '' || value.trim() !== '');
+    }
+    set value(newValue) {
+        if (Array.isArray(newValue)) {
+            this._items = [...newValue];
+        }
+        else {
+            // Convert Record to array format
+            this._items = Object.entries(newValue || {}).map(([key, value]) => ({
+                key,
+                value: typeof value === 'string' ? value : String(value)
+            }));
+        }
+        this.requestUpdate();
+    }
+    // Implement abstract methods
+    isEmptyItem(item) {
+        return item.key.trim() === '' && item.value.trim() === '';
+    }
+    createEmptyItem() {
+        return { key: '', value: '' };
+    }
+    // Override cleanItems to return array format to preserve duplicate keys
+    cleanItems(items) {
+        return items.filter(({ key, value }) => key.trim() !== '' || value.trim() !== '');
+    }
+    // Method to convert to Record format for final form submission
+    toRecord() {
+        const result = {};
+        this._items.forEach(({ key, value }) => {
+            if (key.trim() !== '' || value.trim() !== '') {
+                result[key] = value;
+            }
+        });
+        return result;
+    }
+    // Method to validate and set key errors for duplicates and empty keys with values
+    validateKeys() {
+        const newKeyErrors = {};
+        // Check for empty keys with values
+        this._items.forEach(({ key, value }, index) => {
+            if (key.trim() === '' && value.trim() !== '') {
+                newKeyErrors[index] = 'Key is required when value is provided';
+            }
+        });
+        // Check for duplicate keys (only non-empty ones)
+        const nonEmptyKeys = this._items
+            .map(({ key }, index) => ({ key: key.trim(), index }))
+            .filter(({ key }) => key !== '');
+        const keyCount = new Map();
+        nonEmptyKeys.forEach(({ key, index }) => {
+            if (!keyCount.has(key)) {
+                keyCount.set(key, []);
+            }
+            keyCount.get(key).push(index);
+        });
+        // Mark duplicate keys with errors
+        keyCount.forEach((indices, key) => {
+            if (indices.length > 1) {
+                indices.forEach((index) => {
+                    // Only show duplicate error if there's no empty key error already
+                    if (!newKeyErrors[index]) {
+                        newKeyErrors[index] = `Duplicate key "${key}"`;
+                    }
+                });
+            }
+        });
+        this.keyErrors = newKeyErrors;
+        return Object.keys(newKeyErrors).length === 0;
+    }
+    // Clear key errors
+    clearKeyErrors() {
+        this.keyErrors = {};
+    }
+    // Override updateValue to emit array format and validate keys
+    updateValue(newValue) {
+        this._items = newValue;
+        // Clear errors and re-validate when items change
+        this.clearKeyErrors();
+        this.validateKeys();
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { value: this.cleanItems(newValue) },
+            bubbles: true
+        }));
+        this.requestUpdate();
+    }
+    handleKeyChange(index, newKey) {
+        const items = this.displayItems;
+        const currentItem = items[index];
+        // Clear any existing error for this key when it's modified
+        if (this.keyErrors[index]) {
+            const newKeyErrors = { ...this.keyErrors };
+            delete newKeyErrors[index];
+            this.keyErrors = newKeyErrors;
+        }
+        this.handleItemChange(index, {
+            key: newKey,
+            value: currentItem.value
+        });
+    }
+    handleValueChange(index, newValue) {
+        const items = this.displayItems;
+        const currentItem = items[index];
+        // Clear any existing error for this key when value is modified
+        if (this.keyErrors[index]) {
+            const newKeyErrors = { ...this.keyErrors };
+            delete newKeyErrors[index];
+            this.keyErrors = newKeyErrors;
+        }
+        this.handleItemChange(index, {
+            key: currentItem.key,
+            value: newValue
+        });
+    }
+    renderItem(item, index) {
+        const canRemove = this.canRemoveItem(index);
+        const keyError = this.showValidation && this.keyErrors[index] ? this.keyErrors[index] : '';
+        return html `
+      <div class="row">
+        <temba-textinput
+          .value=${item.key}
+          .placeholder=${this.keyPlaceholder}
+          .errors=${keyError ? [keyError] : []}
+          @change=${(e) => this.handleKeyChange(index, e.target.value)}
+        ></temba-textinput>
+        <temba-textinput
+          .value=${item.value}
+          .placeholder=${this.valuePlaceholder}
+          @change=${(e) => this.handleValueChange(index, e.target.value)}
+        ></temba-textinput>
+        ${canRemove
+            ? html `
+              <button class="remove-btn" @click=${() => this.removeItem(index)}>
+                ×
+              </button>
+            `
+            : html `<div class="remove-btn-spacer"></div>`}
+      </div>
+    `;
+    }
+    getContainerClass() {
+        return 'key-value-editor';
+    }
+};
+KeyValueEditor.styles = css `
+    .key-value-editor {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .row {
+      display: grid;
+      grid-template-columns: 1fr 1fr auto;
+      gap: 8px;
+      align-items: center;
+    }
+
+    .remove-btn {
+      width: 32px;
+      height: 32px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      background: #f8f8f8;
+      color: #666;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+    }
+
+    .remove-btn:hover:not(:disabled) {
+      background: #f0f0f0;
+    }
+
+    .remove-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .remove-btn-spacer {
+      width: 32px;
+      height: 32px;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], KeyValueEditor.prototype, "keyPlaceholder", void 0);
+__decorate([
+    property({ type: String })
+], KeyValueEditor.prototype, "valuePlaceholder", void 0);
+__decorate([
+    property({ type: Boolean })
+], KeyValueEditor.prototype, "showValidation", void 0);
+__decorate([
+    state()
+], KeyValueEditor.prototype, "keyErrors", void 0);
+__decorate([
+    property({ type: Array })
+], KeyValueEditor.prototype, "value", null);
+KeyValueEditor = __decorate([
+    customElement('temba-key-value-editor')
+], KeyValueEditor);
+export { KeyValueEditor };
+//# sourceMappingURL=KeyValueEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyValueEditor.js","sourceRoot":"","sources":["../../../src/form/KeyValueEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { BaseListEditor, ListItem } from './BaseListEditor';\n\ninterface KeyValueItem extends ListItem {\n  key: string;\n  value: string;\n}\n\n@customElement('temba-key-value-editor')\nexport class KeyValueEditor extends BaseListEditor<KeyValueItem> {\n  @property({ type: String })\n  keyPlaceholder = 'Key';\n\n  @property({ type: String })\n  valuePlaceholder = 'Value';\n\n  @property({ type: Boolean })\n  showValidation = true;\n\n  @state()\n  private keyErrors: { [index: number]: string } = {};\n\n  // Configure to maintain empty items\n  maintainEmptyItem = true;\n\n  constructor() {\n    super();\n    this._items = [];\n  }\n\n  // External API uses array format to preserve duplicate keys\n  @property({ type: Array })\n  get value(): KeyValueItem[] {\n    return this._items.filter(\n      ({ key, value }) => key.trim() !== '' || value.trim() !== ''\n    );\n  }\n\n  set value(newValue: KeyValueItem[] | Record<string, string>) {\n    if (Array.isArray(newValue)) {\n      this._items = [...newValue];\n    } else {\n      // Convert Record to array format\n      this._items = Object.entries(newValue || {}).map(([key, value]) => ({\n        key,\n        value: typeof value === 'string' ? value : String(value)\n      }));\n    }\n    this.requestUpdate();\n  }\n\n  // Implement abstract methods\n  isEmptyItem(item: KeyValueItem): boolean {\n    return item.key.trim() === '' && item.value.trim() === '';\n  }\n\n  createEmptyItem(): KeyValueItem {\n    return { key: '', value: '' };\n  }\n\n  // Override cleanItems to return array format to preserve duplicate keys\n  protected cleanItems(items: KeyValueItem[]): KeyValueItem[] {\n    return items.filter(\n      ({ key, value }) => key.trim() !== '' || value.trim() !== ''\n    );\n  }\n\n  // Method to convert to Record format for final form submission\n  toRecord(): Record<string, string> {\n    const result: Record<string, string> = {};\n    this._items.forEach(({ key, value }) => {\n      if (key.trim() !== '' || value.trim() !== '') {\n        result[key] = value;\n      }\n    });\n    return result;\n  }\n\n  // Method to validate and set key errors for duplicates and empty keys with values\n  validateKeys(): boolean {\n    const newKeyErrors: { [index: number]: string } = {};\n\n    // Check for empty keys with values\n    this._items.forEach(({ key, value }, index) => {\n      if (key.trim() === '' && value.trim() !== '') {\n        newKeyErrors[index] = 'Key is required when value is provided';\n      }\n    });\n\n    // Check for duplicate keys (only non-empty ones)\n    const nonEmptyKeys = this._items\n      .map(({ key }, index) => ({ key: key.trim(), index }))\n      .filter(({ key }) => key !== '');\n\n    const keyCount = new Map<string, number[]>();\n    nonEmptyKeys.forEach(({ key, index }) => {\n      if (!keyCount.has(key)) {\n        keyCount.set(key, []);\n      }\n      keyCount.get(key)!.push(index);\n    });\n\n    // Mark duplicate keys with errors\n    keyCount.forEach((indices, key) => {\n      if (indices.length > 1) {\n        indices.forEach((index) => {\n          // Only show duplicate error if there's no empty key error already\n          if (!newKeyErrors[index]) {\n            newKeyErrors[index] = `Duplicate key \"${key}\"`;\n          }\n        });\n      }\n    });\n\n    this.keyErrors = newKeyErrors;\n    return Object.keys(newKeyErrors).length === 0;\n  }\n\n  // Clear key errors\n  clearKeyErrors(): void {\n    this.keyErrors = {};\n  }\n\n  // Override updateValue to emit array format and validate keys\n  protected updateValue(newValue: KeyValueItem[]) {\n    this._items = newValue;\n\n    // Clear errors and re-validate when items change\n    this.clearKeyErrors();\n    this.validateKeys();\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: { value: this.cleanItems(newValue) },\n        bubbles: true\n      })\n    );\n    this.requestUpdate();\n  }\n\n  private handleKeyChange(index: number, newKey: string) {\n    const items = this.displayItems;\n    const currentItem = items[index];\n\n    // Clear any existing error for this key when it's modified\n    if (this.keyErrors[index]) {\n      const newKeyErrors = { ...this.keyErrors };\n      delete newKeyErrors[index];\n      this.keyErrors = newKeyErrors;\n    }\n\n    this.handleItemChange(index, {\n      key: newKey,\n      value: currentItem.value\n    });\n  }\n\n  private handleValueChange(index: number, newValue: string) {\n    const items = this.displayItems;\n    const currentItem = items[index];\n\n    // Clear any existing error for this key when value is modified\n    if (this.keyErrors[index]) {\n      const newKeyErrors = { ...this.keyErrors };\n      delete newKeyErrors[index];\n      this.keyErrors = newKeyErrors;\n    }\n\n    this.handleItemChange(index, {\n      key: currentItem.key,\n      value: newValue\n    });\n  }\n\n  renderItem(item: KeyValueItem, index: number): TemplateResult {\n    const canRemove = this.canRemoveItem(index);\n    const keyError =\n      this.showValidation && this.keyErrors[index] ? this.keyErrors[index] : '';\n\n    return html`\n      <div class=\"row\">\n        <temba-textinput\n          .value=${item.key}\n          .placeholder=${this.keyPlaceholder}\n          .errors=${keyError ? [keyError] : []}\n          @change=${(e: any) => this.handleKeyChange(index, e.target.value)}\n        ></temba-textinput>\n        <temba-textinput\n          .value=${item.value}\n          .placeholder=${this.valuePlaceholder}\n          @change=${(e: any) => this.handleValueChange(index, e.target.value)}\n        ></temba-textinput>\n        ${canRemove\n          ? html`\n              <button class=\"remove-btn\" @click=${() => this.removeItem(index)}>\n                ×\n              </button>\n            `\n          : html`<div class=\"remove-btn-spacer\"></div>`}\n      </div>\n    `;\n  }\n\n  protected getContainerClass(): string {\n    return 'key-value-editor';\n  }\n\n  static styles = css`\n    .key-value-editor {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .row {\n      display: grid;\n      grid-template-columns: 1fr 1fr auto;\n      gap: 8px;\n      align-items: center;\n    }\n\n    .remove-btn {\n      width: 32px;\n      height: 32px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      background: #f8f8f8;\n      color: #666;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 18px;\n    }\n\n    .remove-btn:hover:not(:disabled) {\n      background: #f0f0f0;\n    }\n\n    .remove-btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .remove-btn-spacer {\n      width: 32px;\n      height: 32px;\n    }\n  `;\n}\n"]}