@nyaruka/temba-components 0.129.9 → 0.129.10

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

@@ -1 +1 @@
-{"version":3,"file":"ContactSearch.js","sourceRoot":"","sources":["../../../src/form/ContactSearch.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css, PropertyValueMap } from 'lit';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport { property } from 'lit/decorators.js';\nimport { getClasses, postJSON, stopEvent, WebResponse } from '../utils';\nimport { TextInput } from './TextInput';\nimport '../display/Alert';\nimport { Contact, CustomEventType } from '../interfaces';\nimport { FormElement } from './FormElement';\nimport { Checkbox } from './Checkbox';\nimport { msg } from '@lit/localize';\nimport { OmniOption } from './select/Omnibox';\nimport { Select } from './select/Select';\n\nconst QUEIT_MILLIS = 2000;\n\ninterface SummaryResponse {\n  total: number;\n  sample: Contact[];\n  query: string;\n  fields: { [uuid: string]: { label: string; type: string } };\n  error?: string;\n  warnings: string[];\n  blockers: string[];\n}\n\nexport class ContactSearch extends FormElement {\n  static get styles() {\n    return css`\n      :host {\n        color: var(--color-text);\n      }\n\n      .urn {\n        width: 120px;\n      }\n\n      .name {\n        width: 160px;\n      }\n\n      .date {\n        text-align: right;\n      }\n\n      .field-header {\n        font-size: 80%;\n        color: var(--color-text-dark);\n      }\n\n      .field-header.date {\n        text-align: right;\n      }\n\n      .more {\n        font-size: 90%;\n        padding-top: 5px;\n        padding-right: 3px;\n        text-align: right;\n        width: 100px;\n        vertical-align: top;\n      }\n\n      table {\n        width: 100%;\n      }\n\n      .contact td {\n        border-bottom: 1px solid var(--color-borders);\n        padding: 5px 3px;\n      }\n\n      .table-footer td {\n        padding: 10px 3px;\n      }\n\n      .query-replaced,\n      .count-replaced {\n        display: inline-block;\n        background: var(--color-primary-light);\n        color: var(--color-text-dark);\n        padding: 3px 6px;\n        border-radius: var(--curvature);\n        font-size: 85%;\n        margin: 0px 3px;\n      }\n\n      temba-loading {\n        transform: scale(0);\n        max-width: 0;\n        opacity: 0;\n        transition: transform 200ms ease-in-out;\n      }\n\n      .fetching temba-loading {\n        transform: scale(1);\n        max-width: 500px;\n        opacity: 1;\n        display: block;\n      }\n\n      .error {\n        margin-top: 10px;\n      }\n\n      .match-count {\n        padding: 4px;\n        margin-top: 6px;\n      }\n\n      .linked {\n        color: var(--color-link-primary);\n        text-decoration: none;\n        cursor: pointer;\n      }\n\n      .header td {\n        border-bottom: 0px solid var(--color-borders);\n        padding: 5px 3px;\n      }\n\n      .expanded .header td {\n        border-bottom: 2px solid var(--color-borders);\n      }\n\n      td.field-header,\n      tr.table-footer,\n      tr.contact {\n        display: none;\n      }\n\n      .expanded td.field-header {\n        display: table-cell;\n      }\n\n      .expanded tr.contact,\n      .expanded tr.table-footer {\n        display: table-row;\n      }\n\n      .query {\n        display: var(--contact-search-query-display);\n        margin-bottom: 10px;\n      }\n\n      .results {\n        display: none;\n      }\n\n      .summary {\n        min-height: 2.2em;\n        display: flex;\n        flex-grow: 1;\n        align-items: center;\n      }\n\n      .summary .result-count {\n        flex-grow: 1;\n      }\n\n      .results.empty {\n        display: none !important;\n      }\n\n      .results.initialized {\n        display: flex;\n        align-items: center;\n        margin-top: 0.5em;\n        margin-left: 0.6em;\n      }\n\n      .advanced-icon {\n        cursor: pointer;\n        margin-right: 0.5em;\n      }\n\n      .query .advanced-icon {\n        margin-top: 1em;\n        margin-right: 1em;\n      }\n\n      .advanced-icon:hover {\n        --icon-color: var(--color-link-primary-hover) !important;\n      }\n\n      .query {\n        --textarea-height: 5em;\n      }\n\n      #recipients {\n        margin-bottom: 1em;\n        display: block;\n      }\n\n      temba-alert {\n        margin: 1em 0;\n      }\n\n      temba-select[name='not_seen_since_days'] {\n        margin-bottom: 1em;\n        display: block;\n      }\n\n      .activity-select {\n        display: flex;\n        align-items: center;\n        padding: var(--checkbox-padding, 10px);\n        border-radius: var(--curvature);\n        cursor: pointer;\n      }\n\n      .activity-select:hover {\n        background: #f9f9f9;\n      }\n\n      .small-select {\n        --temba-select-selected-padding: 0px 0.5em;\n        --temba-select-selected-line-height: 1em;\n        --temba-select-selected-font-size: 1em;\n        --search-input-height: 0px !important;\n        --temba-select-min-height: 1.8em;\n        min-width: 100px;\n      }\n\n      .filters {\n        padding: 1em;\n        border: 1px solid var(--color-borders);\n        border-radius: var(--curvature);\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  in_a_flow: boolean;\n\n  @property({ type: Boolean })\n  started_previously: boolean;\n\n  @property({ type: Boolean })\n  not_seen_since_days: boolean;\n\n  @property({ type: Boolean })\n  fetching: boolean;\n\n  @property({ type: Boolean })\n  expanded: boolean;\n\n  @property({ type: String })\n  endpoint: string;\n\n  @property({ type: String })\n  placeholder = '';\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String })\n  query = '';\n\n  @property({ type: Number })\n  inactiveThreshold = 1000;\n\n  @property({ type: Number })\n  inactiveDays = 90;\n\n  @property({ type: Object, attribute: false })\n  summary: SummaryResponse;\n\n  @property({ type: Object, attribute: false })\n  flow: any;\n\n  @property({ type: Array })\n  recipients: OmniOption[] = [];\n\n  @property({ type: Boolean })\n  advanced = false;\n\n  @property({ type: String })\n  refreshKey = '0';\n\n  public refresh(): void {\n    if (this.advanced || this.recipients.length > 0) {\n      this.refreshKey = 'requested_' + new Date().getTime();\n    } else {\n      this.summary = null;\n      this.fetching = false;\n      this.requestUpdate();\n      this.fireCustomEvent(CustomEventType.ContentChanged, { reset: true });\n    }\n  }\n\n  @property({ type: Object })\n  public exclusions = {};\n\n  private lastQuery: number;\n  private initialized = false;\n\n  public firstUpdated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changes);\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('recipients')) {\n      this.handleRecipientsChanged();\n    }\n\n    // if we remove the in_a_flow option, make sure it's not part of our exclusions\n    if (changedProperties.has('in_a_flow') && !this.in_a_flow) {\n      delete this.exclusions['in_a_flow'];\n      this.requestUpdate('exclusions');\n    }\n\n    if (\n      (changedProperties.has('query') && this.advanced) ||\n      (changedProperties.has('refreshKey') && this.refreshKey !== '0')\n    ) {\n      this.summary = null;\n      // this.errors = [];\n      this.fireCustomEvent(CustomEventType.ContentChanged, { reset: true });\n      if (this.lastQuery) {\n        window.clearTimeout(this.lastQuery);\n        this.fetching = false;\n      }\n\n      if (this.query.trim().length > 0 || this.recipients.length > 0) {\n        this.fetching = true;\n        this.lastQuery = window.setTimeout(() => {\n          this.fetchSummary();\n        }, QUEIT_MILLIS);\n      }\n    }\n  }\n\n  public fetchSummary(): any {\n    if (this.endpoint) {\n      const group_uuids = this.recipients\n        .filter((value: OmniOption) => value.type === 'group')\n        .map((value: OmniOption) => value.id);\n\n      const contact_uuids = this.recipients\n        .filter((value: OmniOption) => value.type === 'contact')\n        .map((value: OmniOption) => value.id);\n\n      postJSON(this.endpoint, {\n        include: this.advanced\n          ? { query: this.query }\n          : { contact_uuids, group_uuids },\n\n        exclude: this.exclusions\n      }).then((response: WebResponse) => {\n        this.fetching = false;\n        this.initialized = true;\n        if (this.recipients.length == 0 && !this.advanced) {\n          return;\n        }\n        if (response.status === 200) {\n          this.summary = response.json as SummaryResponse;\n          if (!this.advanced) {\n            this.query = this.summary.query;\n          }\n          this.setValue({\n            advanced: this.advanced,\n            query: this.query,\n            exclusions: this.exclusions,\n            recipients: this.recipients\n          });\n\n          if (this.summary.error) {\n            this.errors = [this.summary.error];\n          } else {\n            this.errors = [];\n          }\n          this.requestUpdate('errors');\n          this.fireCustomEvent(CustomEventType.ContentChanged, this.summary);\n        } else {\n          this.summary = response.json as SummaryResponse;\n          if (this.summary.error) {\n            this.errors = [this.summary.error];\n          }\n          this.requestUpdate('errors');\n          this.fireCustomEvent(CustomEventType.ContentChanged, this.summary);\n        }\n      });\n    }\n  }\n\n  private handleAdvancedToggle(evt: MouseEvent) {\n    stopEvent(evt);\n    this.recipients = [];\n    this.exclusions = {};\n    if (this.advanced) {\n      this.query = '';\n      this.value = null;\n    }\n    this.advanced = !this.advanced;\n\n    this.setValue({\n      advanced: this.advanced,\n      query: this.query,\n      exclusions: this.exclusions,\n      recipients: this.recipients\n    });\n  }\n\n  private handleQueryChange(evt: KeyboardEvent) {\n    const input = evt.target as TextInput;\n    this.query = input.inputElement.value;\n  }\n\n  private handleRecipientsChanged() {\n    if (!this.endpoint) {\n      return;\n    }\n\n    if (this.recipients && (this.refreshKey !== '0' || this.initialized)) {\n      this.refresh();\n    } else {\n      this.initialized = true;\n    }\n  }\n\n  private handleActivityLevelChanged(evt: any) {\n    const select = evt.target as Select<any>;\n    const option = select.values[0];\n    if (option) {\n      if (this.exclusions['not_seen_since_days']) {\n        this.exclusions['not_seen_since_days'] = parseInt(option.value);\n        this.refresh();\n      }\n    }\n  }\n\n  private handleActivityLabelClicked(evt: any) {\n    if (\n      evt.target &&\n      evt.target.tagName !== 'TEMBA-CHECKBOX' &&\n      evt.target.tagName !== 'TEMBA-SELECT' &&\n      !evt.target.disabled\n    ) {\n      const checkbox = evt.currentTarget.querySelector('temba-checkbox');\n      checkbox.checked = !checkbox.checked;\n    }\n  }\n\n  private handleExclusionChanged(evt: any) {\n    if (evt.target.tagName === 'TEMBA-CHECKBOX') {\n      const ex = JSON.stringify(this.exclusions);\n      const checkbox = evt.target as Checkbox;\n      let value = checkbox.checked as any;\n\n      // if we check the activity box, look inside the select for the value\n      if (checkbox.name === 'not_seen_since_days' && value) {\n        const select = checkbox.parentElement.querySelector(\n          'temba-select'\n        ) as Select<any>;\n        if (select.values[0]) {\n          value = parseInt(select.values[0].value);\n        } else {\n          value = this.exclusions[checkbox.name];\n        }\n      }\n\n      if (!value) {\n        delete this.exclusions[checkbox.name];\n      } else {\n        this.exclusions[checkbox.name] = value;\n      }\n\n      if (ex !== JSON.stringify(this.exclusions) && this.endpoint) {\n        this.refresh();\n      }\n    }\n  }\n\n  public render(): TemplateResult {\n    let summary: TemplateResult;\n    if (this.summary) {\n      if (!this.summary.error) {\n        const count = this.summary.total || 0;\n\n        summary = html`\n          <div class=\"result-count\">\n            Found\n            <a\n              class=\"linked\"\n              target=\"_\"\n              href=\"/contact/?search=${encodeURIComponent(this.summary.query)}\"\n            >\n              ${count.toLocaleString()}\n            </a>\n            contact${count !== 1 ? 's' : ''}\n          </div>\n          <temba-button\n            class=\"edit\"\n            name=\"edit\"\n            secondary\n            small\n            @click=${this.handleAdvancedToggle}\n          >\n            <div slot=\"name\">\n              <div style=\"display: flex; align-items: center;\">\n                ${this.advanced\n                  ? html` <temba-icon\n                        name=\"reset\"\n                        style=\"margin-right:0.5em\"\n                      ></temba-icon>\n                      Start Over`\n                  : html` <temba-icon\n                        name=\"edit\"\n                        style=\"margin-right:0.5em\"\n                      ></temba-icon>\n                      Edit Query`}\n              </div>\n            </div>\n          </temba-button>\n        `;\n      }\n    }\n\n    const notSeenSinceDays = this.exclusions['not_seen_since_days'];\n    let blockers = null;\n\n    if (\n      this.summary &&\n      this.summary.blockers &&\n      this.summary.blockers.length > 0\n    ) {\n      blockers = html`${this.summary.blockers.map(\n        (error) =>\n          html`<temba-alert level=\"error\">${unsafeHTML(error)}</temba-alert>`\n      )}`;\n    }\n\n    return html`\n      ${\n        this.advanced\n          ? html`<div class=\"query\">\n              <temba-textinput\n                .label=${this.label}\n                .helpText=${this.helpText}\n                .widgetOnly=${this.widgetOnly}\n                .errors=${this.errors}\n                name=${this.name}\n                .inputRoot=${this}\n                @input=${this.handleQueryChange}\n                placeholder=${this.placeholder}\n                .value=${this.query}\n                textarea\n                autogrow\n              >\n              </temba-textinput>\n            </div>`\n          : html`<temba-omnibox\n                placeholder=\"Search for contacts or groups\"\n                widget_only=\"\"\n                groups=\"\"\n                contacts=\"\"\n                label=\"Recipients\"\n                help_text=\"The contacts to send the message to.\"\n                .errors=${this.errors}\n                id=\"recipients\"\n                name=\"recipients\"\n                .values=${this.recipients}\n                endpoint=\"/contact/omnibox/?\"\n                @change=${this.handleRecipientsChanged}\n              >\n              </temba-omnibox>\n\n              ${this.not_seen_since_days ||\n              this.in_a_flow ||\n              this.started_previously\n                ? html`\n                    <div class=\"filters\">\n                      <div\n                        style=\"display:flex;font-size:1em;margin-bottom:0.5em\"\n                      >\n                        <temba-icon size=\"1\" name=\"filter\"></temba-icon>\n                        <div style=\"margin-left:0.5em\">\n                          Only include contacts who...\n                        </div>\n                      </div>\n                      ${this.in_a_flow\n                        ? html`<temba-checkbox\n                            name=\"in_a_flow\"\n                            label=\"${msg('Are not currently in a flow')}\"\n                            ?checked=${this.exclusions['in_a_flow']}\n                            @change=${this.handleExclusionChanged}\n                          ></temba-checkbox>`\n                        : null}\n                      ${this.not_seen_since_days\n                        ? html`\n                            <div\n                              class=\"activity-select\"\n                              @click=${this.handleActivityLabelClicked}\n                            >\n                              <temba-checkbox\n                                style=\"display:inline;\"\n                                name=\"not_seen_since_days\"\n                                ?checked=${notSeenSinceDays}\n                                @change=${this.handleExclusionChanged}\n                              >\n                              </temba-checkbox>\n\n                              <div style=\"margin-left:0.5em\">\n                                ${msg('Have sent a message in the last')}\n                              </div>\n\n                              <temba-select\n                                style=\"margin-left:0.5em\"\n                                class=\"small-select\"\n                                @change=${this.handleActivityLevelChanged}\n                                ?disabled=${!notSeenSinceDays}\n                              >\n                                <temba-option\n                                  name=\"90 days\"\n                                  value=\"90\"\n                                  ?selected=${notSeenSinceDays === 90}\n                                ></temba-option>\n                                <temba-option\n                                  name=\"180 days\"\n                                  value=\"180\"\n                                  ?selected=${notSeenSinceDays === 180}\n                                ></temba-option>\n                                <temba-option\n                                  name=\"Year\"\n                                  value=\"365\"\n                                  ?selected=${notSeenSinceDays === 365}\n                                ></temba-option>\n                              </temba-select>\n                              <div></div>\n                            </div>\n                          `\n                        : null}\n                      ${this.started_previously\n                        ? html`<temba-checkbox\n                            name=\"started_previously\"\n                            label=\"${msg(\n                              'Have not started this flow in the last 90 days'\n                            )}\"\n                            ?checked=${this.exclusions['started_previously']}\n                            @change=${this.handleExclusionChanged}\n                          ></temba-checkbox>`\n                        : null}\n                    </div>\n                  `\n                : null} `\n      }\n              </div>\n      <div\n        class=\"results ${getClasses({\n          fetching: this.fetching,\n          initialized: this.initialized || this.fetching,\n          empty:\n            ((this.summary && this.summary.error) || !this.summary) &&\n            !this.fetching\n        })}\"\n      >\n        <temba-loading units=\"6\" size=\"8\"></temba-loading>\n        <div class=\"summary ${this.expanded ? 'expanded' : ''}\">${summary}</div>\n      </div>\n      ${blockers}\n      ${\n        !blockers && this.summary && this.summary.warnings\n          ? this.summary.warnings.map(\n              (warning) =>\n                html`<temba-alert level=\"warning\"\n                  >${unsafeHTML(warning)}</temba-alert\n                >`\n            )\n          : ``\n      }\n\n\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ContactSearch.js","sourceRoot":"","sources":["../../../src/form/ContactSearch.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,IAAI,EAAE,GAAG,EAAoB,MAAM,KAAK,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAe,MAAM,UAAU,CAAC;AAExE,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAW,eAAe,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAIpC,MAAM,YAAY,GAAG,IAAI,CAAC;AAY1B,MAAM,OAAO,aAAc,SAAQ,YAAY;IAA/C;;QAiOE,gBAAW,GAAG,EAAE,CAAC;QAGjB,SAAI,GAAG,EAAE,CAAC;QAGV,UAAK,GAAG,EAAE,CAAC;QAGX,sBAAiB,GAAG,IAAI,CAAC;QAGzB,iBAAY,GAAG,EAAE,CAAC;QASlB,eAAU,GAAiB,EAAE,CAAC;QAG9B,aAAQ,GAAG,KAAK,CAAC;QAGjB,eAAU,GAAG,GAAG,CAAC;QAcV,eAAU,GAAG,EAAE,CAAC;QAGf,gBAAW,GAAG,KAAK,CAAC;IA+X9B,CAAC;IA3oBC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyMT,CAAC;IACJ,CAAC;IAkDM,OAAO;QACZ,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAChD,IAAI,CAAC,UAAU,GAAG,YAAY,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,CAAC;QACxD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,cAAc,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;QACxE,CAAC;IACH,CAAC;IAQM,YAAY,CACjB,OAA0D;QAE1D,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAEM,OAAO,CAAC,iBAAmC;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;YACxC,IAAI,CAAC,uBAAuB,EAAE,CAAC;QACjC,CAAC;QAED,+EAA+E;QAC/E,IAAI,iBAAiB,CAAC,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YAC1D,OAAO,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;YACpC,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;QACnC,CAAC;QAED,IACE,CAAC,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC;YACjD,CAAC,iBAAiB,CAAC,GAAG,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC,UAAU,KAAK,GAAG,CAAC,EAChE,CAAC;YACD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,oBAAoB;YACpB,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,cAAc,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;YACtE,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACnB,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;gBACpC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACxB,CAAC;YAED,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC/D,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACrB,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;oBACtC,IAAI,CAAC,YAAY,EAAE,CAAC;gBACtB,CAAC,EAAE,YAAY,CAAC,CAAC;YACnB,CAAC;QACH,CAAC;IACH,CAAC;IAEM,YAAY;QACjB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU;iBAChC,MAAM,CAAC,CAAC,KAAiB,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC;iBACrD,GAAG,CAAC,CAAC,KAAiB,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YAExC,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU;iBAClC,MAAM,CAAC,CAAC,KAAiB,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC;iBACvD,GAAG,CAAC,CAAC,KAAiB,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YAExC,QAAQ,CAAC,IAAI,CAAC,QAAQ,EAAE;gBACtB,OAAO,EAAE,IAAI,CAAC,QAAQ;oBACpB,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;oBACvB,CAAC,CAAC,EAAE,aAAa,EAAE,WAAW,EAAE;gBAElC,OAAO,EAAE,IAAI,CAAC,UAAU;aACzB,CAAC,CAAC,IAAI,CAAC,CAAC,QAAqB,EAAE,EAAE;gBAChC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;gBACtB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;gBACxB,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAClD,OAAO;gBACT,CAAC;gBACD,IAAI,QAAQ,CAAC,MAAM,KAAK,GAAG,EAAE,CAAC;oBAC5B,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAuB,CAAC;oBAChD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;wBACnB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;oBAClC,CAAC;oBACD,IAAI,CAAC,QAAQ,CAAC;wBACZ,QAAQ,EAAE,IAAI,CAAC,QAAQ;wBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;wBACjB,UAAU,EAAE,IAAI,CAAC,UAAU;wBAC3B,UAAU,EAAE,IAAI,CAAC,UAAU;qBAC5B,CAAC,CAAC;oBAEH,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;wBACvB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;oBACrC,CAAC;yBAAM,CAAC;wBACN,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;oBACnB,CAAC;oBACD,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;oBAC7B,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,cAAc,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;gBACrE,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAuB,CAAC;oBAChD,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;wBACvB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;oBACrC,CAAC;oBACD,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;oBAC7B,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,cAAc,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;gBACrE,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAEO,oBAAoB,CAAC,GAAe;QAC1C,SAAS,CAAC,GAAG,CAAC,CAAC;QACf,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QACrB,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QACrB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAChB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QACpB,CAAC;QACD,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAE/B,IAAI,CAAC,QAAQ,CAAC;YACZ,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,UAAU,EAAE,IAAI,CAAC,UAAU;SAC5B,CAAC,CAAC;IACL,CAAC;IAEO,iBAAiB,CAAC,GAAkB;QAC1C,MAAM,KAAK,GAAG,GAAG,CAAC,MAAmB,CAAC;QACtC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC;IACxC,CAAC;IAEO,uBAAuB;QAC7B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO;QACT,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,UAAU,KAAK,GAAG,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YACrE,IAAI,CAAC,OAAO,EAAE,CAAC;QACjB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QAC1B,CAAC;IACH,CAAC;IAEO,0BAA0B,CAAC,GAAQ;QACzC,MAAM,MAAM,GAAG,GAAG,CAAC,MAAqB,CAAC;QACzC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QAChC,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,IAAI,CAAC,UAAU,CAAC,qBAAqB,CAAC,EAAE,CAAC;gBAC3C,IAAI,CAAC,UAAU,CAAC,qBAAqB,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBAChE,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,CAAC;QACH,CAAC;IACH,CAAC;IAEO,0BAA0B,CAAC,GAAQ;QACzC,IACE,GAAG,CAAC,MAAM;YACV,GAAG,CAAC,MAAM,CAAC,OAAO,KAAK,gBAAgB;YACvC,GAAG,CAAC,MAAM,CAAC,OAAO,KAAK,cAAc;YACrC,CAAC,GAAG,CAAC,MAAM,CAAC,QAAQ,EACpB,CAAC;YACD,MAAM,QAAQ,GAAG,GAAG,CAAC,aAAa,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;YACnE,QAAQ,CAAC,OAAO,GAAG,CAAC,QAAQ,CAAC,OAAO,CAAC;QACvC,CAAC;IACH,CAAC;IAEO,sBAAsB,CAAC,GAAQ;QACrC,IAAI,GAAG,CAAC,MAAM,CAAC,OAAO,KAAK,gBAAgB,EAAE,CAAC;YAC5C,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAC3C,MAAM,QAAQ,GAAG,GAAG,CAAC,MAAkB,CAAC;YACxC,IAAI,KAAK,GAAG,QAAQ,CAAC,OAAc,CAAC;YAEpC,qEAAqE;YACrE,IAAI,QAAQ,CAAC,IAAI,KAAK,qBAAqB,IAAI,KAAK,EAAE,CAAC;gBACrD,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CACjD,cAAc,CACA,CAAC;gBACjB,IAAI,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;oBACrB,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;gBAC3C,CAAC;qBAAM,CAAC;oBACN,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;gBACzC,CAAC;YACH,CAAC;YAED,IAAI,CAAC,KAAK,EAAE,CAAC;gBACX,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YACxC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC;YACzC,CAAC;YAED,IAAI,EAAE,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAC5D,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,CAAC;QACH,CAAC;IACH,CAAC;IAEM,YAAY;QACjB,IAAI,OAAuB,CAAC;QAC5B,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBACxB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,CAAC;gBAEtC,OAAO,GAAG,IAAI,CAAA;;;;;;uCAMiB,kBAAkB,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;;gBAE7D,KAAK,CAAC,cAAc,EAAE;;qBAEjB,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;;;;;;;qBAOtB,IAAI,CAAC,oBAAoB;;;;kBAI5B,IAAI,CAAC,QAAQ;oBACb,CAAC,CAAC,IAAI,CAAA;;;;iCAIS;oBACf,CAAC,CAAC,IAAI,CAAA;;;;iCAIS;;;;SAIxB,CAAC;YACJ,CAAC;QACH,CAAC;QAED,MAAM,gBAAgB,GAAG,IAAI,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAC;QAChE,IAAI,QAAQ,GAAG,IAAI,CAAC;QAEpB,IACE,IAAI,CAAC,OAAO;YACZ,IAAI,CAAC,OAAO,CAAC,QAAQ;YACrB,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAChC,CAAC;YACD,QAAQ,GAAG,IAAI,CAAA,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CACzC,CAAC,KAAK,EAAE,EAAE,CACR,IAAI,CAAA,8BAA8B,UAAU,CAAC,KAAK,CAAC,gBAAgB,CACtE,EAAE,CAAC;QACN,CAAC;QAED,OAAO,IAAI,CAAA;QAEP,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,IAAI,CAAA;;4BAEY,IAAI,CAAC,QAAQ;8BACX,IAAI,CAAC,UAAU;0BACnB,IAAI,CAAC,MAAM;uBACd,IAAI,CAAC,IAAI;6BACH,IAAI;yBACR,IAAI,CAAC,iBAAiB;8BACjB,IAAI,CAAC,WAAW;yBACrB,IAAI,CAAC,KAAK;;;;;mBAKhB;YACT,CAAC,CAAC,IAAI,CAAA;;;;;;;0BAOU,IAAI,CAAC,MAAM;;;0BAGX,IAAI,CAAC,UAAU;;0BAEf,IAAI,CAAC,uBAAuB;;;;gBAItC,IAAI,CAAC,mBAAmB;gBAC1B,IAAI,CAAC,SAAS;gBACd,IAAI,CAAC,kBAAkB;gBACrB,CAAC,CAAC,IAAI,CAAA;;;;;;;;;;wBAUE,IAAI,CAAC,SAAS;oBACd,CAAC,CAAC,IAAI,CAAA;;qCAEO,GAAG,CAAC,6BAA6B,CAAC;uCAChC,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC;sCAC7B,IAAI,CAAC,sBAAsB;6CACpB;oBACrB,CAAC,CAAC,IAAI;wBACN,IAAI,CAAC,mBAAmB;oBACxB,CAAC,CAAC,IAAI,CAAA;;;uCAGS,IAAI,CAAC,0BAA0B;;;;;2CAK3B,gBAAgB;0CACjB,IAAI,CAAC,sBAAsB;;;;;kCAKnC,GAAG,CAAC,iCAAiC,CAAC;;;;;;0CAM9B,IAAI,CAAC,0BAA0B;4CAC7B,CAAC,gBAAgB;;;;;8CAKf,gBAAgB,KAAK,EAAE;;;;;8CAKvB,gBAAgB,KAAK,GAAG;;;;;8CAKxB,gBAAgB,KAAK,GAAG;;;;;2BAK3C;oBACH,CAAC,CAAC,IAAI;wBACN,IAAI,CAAC,kBAAkB;oBACvB,CAAC,CAAC,IAAI,CAAA;;qCAEO,GAAG,CACV,gDAAgD,CACjD;uCACU,IAAI,CAAC,UAAU,CAAC,oBAAoB,CAAC;sCACtC,IAAI,CAAC,sBAAsB;6CACpB;oBACrB,CAAC,CAAC,IAAI;;mBAEX;gBACH,CAAC,CAAC,IAAI,GAChB;;;yBAGmB,UAAU,CAAC;YAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,WAAW,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,QAAQ;YAC9C,KAAK,EACH,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;gBACvD,CAAC,IAAI,CAAC,QAAQ;SACjB,CAAC;;;8BAGoB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,OAAO;;QAEjE,QAAQ;QAER,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ;YAChD,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CACvB,CAAC,OAAO,EAAE,EAAE,CACV,IAAI,CAAA;qBACC,UAAU,CAAC,OAAO,CAAC;kBACtB,CACL;YACH,CAAC,CAAC,EACN;;;KAGD,CAAC;IACJ,CAAC;CACF;AA7bC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDACT;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yDACA;AAG5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0DACC;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACV;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACV;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDACF;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACT;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;8CACpB;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;2CACnC;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;iDACI;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACV;AAcV;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACJ","sourcesContent":["import { TemplateResult, html, css, PropertyValueMap } from 'lit';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport { property } from 'lit/decorators.js';\nimport { getClasses, postJSON, stopEvent, WebResponse } from '../utils';\nimport { TextInput } from './TextInput';\nimport '../display/Alert';\nimport { Contact, CustomEventType } from '../interfaces';\nimport { FieldElement } from './FieldElement';\nimport { Checkbox } from './Checkbox';\nimport { msg } from '@lit/localize';\nimport { OmniOption } from './select/Omnibox';\nimport { Select } from './select/Select';\n\nconst QUEIT_MILLIS = 2000;\n\ninterface SummaryResponse {\n  total: number;\n  sample: Contact[];\n  query: string;\n  fields: { [uuid: string]: { label: string; type: string } };\n  error?: string;\n  warnings: string[];\n  blockers: string[];\n}\n\nexport class ContactSearch extends FieldElement {\n  static get styles() {\n    return css`\n      :host {\n        color: var(--color-text);\n      }\n\n      .urn {\n        width: 120px;\n      }\n\n      .name {\n        width: 160px;\n      }\n\n      .date {\n        text-align: right;\n      }\n\n      .field-header {\n        font-size: 80%;\n        color: var(--color-text-dark);\n      }\n\n      .field-header.date {\n        text-align: right;\n      }\n\n      .more {\n        font-size: 90%;\n        padding-top: 5px;\n        padding-right: 3px;\n        text-align: right;\n        width: 100px;\n        vertical-align: top;\n      }\n\n      table {\n        width: 100%;\n      }\n\n      .contact td {\n        border-bottom: 1px solid var(--color-borders);\n        padding: 5px 3px;\n      }\n\n      .table-footer td {\n        padding: 10px 3px;\n      }\n\n      .query-replaced,\n      .count-replaced {\n        display: inline-block;\n        background: var(--color-primary-light);\n        color: var(--color-text-dark);\n        padding: 3px 6px;\n        border-radius: var(--curvature);\n        font-size: 85%;\n        margin: 0px 3px;\n      }\n\n      temba-loading {\n        transform: scale(0);\n        max-width: 0;\n        opacity: 0;\n        transition: transform 200ms ease-in-out;\n      }\n\n      .fetching temba-loading {\n        transform: scale(1);\n        max-width: 500px;\n        opacity: 1;\n        display: block;\n      }\n\n      .error {\n        margin-top: 10px;\n      }\n\n      .match-count {\n        padding: 4px;\n        margin-top: 6px;\n      }\n\n      .linked {\n        color: var(--color-link-primary);\n        text-decoration: none;\n        cursor: pointer;\n      }\n\n      .header td {\n        border-bottom: 0px solid var(--color-borders);\n        padding: 5px 3px;\n      }\n\n      .expanded .header td {\n        border-bottom: 2px solid var(--color-borders);\n      }\n\n      td.field-header,\n      tr.table-footer,\n      tr.contact {\n        display: none;\n      }\n\n      .expanded td.field-header {\n        display: table-cell;\n      }\n\n      .expanded tr.contact,\n      .expanded tr.table-footer {\n        display: table-row;\n      }\n\n      .query {\n        display: var(--contact-search-query-display);\n        margin-bottom: 10px;\n      }\n\n      .results {\n        display: none;\n      }\n\n      .summary {\n        min-height: 2.2em;\n        display: flex;\n        flex-grow: 1;\n        align-items: center;\n      }\n\n      .summary .result-count {\n        flex-grow: 1;\n      }\n\n      .results.empty {\n        display: none !important;\n      }\n\n      .results.initialized {\n        display: flex;\n        align-items: center;\n        margin-top: 0.5em;\n        margin-left: 0.6em;\n      }\n\n      .advanced-icon {\n        cursor: pointer;\n        margin-right: 0.5em;\n      }\n\n      .query .advanced-icon {\n        margin-top: 1em;\n        margin-right: 1em;\n      }\n\n      .advanced-icon:hover {\n        --icon-color: var(--color-link-primary-hover) !important;\n      }\n\n      .query {\n        --textarea-height: 5em;\n      }\n\n      #recipients {\n        margin-bottom: 1em;\n        display: block;\n      }\n\n      temba-alert {\n        margin: 1em 0;\n      }\n\n      temba-select[name='not_seen_since_days'] {\n        margin-bottom: 1em;\n        display: block;\n      }\n\n      .activity-select {\n        display: flex;\n        align-items: center;\n        padding: var(--checkbox-padding, 10px);\n        border-radius: var(--curvature);\n        cursor: pointer;\n      }\n\n      .activity-select:hover {\n        background: #f9f9f9;\n      }\n\n      .small-select {\n        --temba-select-selected-padding: 0px 0.5em;\n        --temba-select-selected-line-height: 1em;\n        --temba-select-selected-font-size: 1em;\n        --search-input-height: 0px !important;\n        --temba-select-min-height: 1.8em;\n        min-width: 100px;\n      }\n\n      .filters {\n        padding: 1em;\n        border: 1px solid var(--color-borders);\n        border-radius: var(--curvature);\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  in_a_flow: boolean;\n\n  @property({ type: Boolean })\n  started_previously: boolean;\n\n  @property({ type: Boolean })\n  not_seen_since_days: boolean;\n\n  @property({ type: Boolean })\n  fetching: boolean;\n\n  @property({ type: Boolean })\n  expanded: boolean;\n\n  @property({ type: String })\n  endpoint: string;\n\n  @property({ type: String })\n  placeholder = '';\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String })\n  query = '';\n\n  @property({ type: Number })\n  inactiveThreshold = 1000;\n\n  @property({ type: Number })\n  inactiveDays = 90;\n\n  @property({ type: Object, attribute: false })\n  summary: SummaryResponse;\n\n  @property({ type: Object, attribute: false })\n  flow: any;\n\n  @property({ type: Array })\n  recipients: OmniOption[] = [];\n\n  @property({ type: Boolean })\n  advanced = false;\n\n  @property({ type: String })\n  refreshKey = '0';\n\n  public refresh(): void {\n    if (this.advanced || this.recipients.length > 0) {\n      this.refreshKey = 'requested_' + new Date().getTime();\n    } else {\n      this.summary = null;\n      this.fetching = false;\n      this.requestUpdate();\n      this.fireCustomEvent(CustomEventType.ContentChanged, { reset: true });\n    }\n  }\n\n  @property({ type: Object })\n  public exclusions = {};\n\n  private lastQuery: number;\n  private initialized = false;\n\n  public firstUpdated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changes);\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('recipients')) {\n      this.handleRecipientsChanged();\n    }\n\n    // if we remove the in_a_flow option, make sure it's not part of our exclusions\n    if (changedProperties.has('in_a_flow') && !this.in_a_flow) {\n      delete this.exclusions['in_a_flow'];\n      this.requestUpdate('exclusions');\n    }\n\n    if (\n      (changedProperties.has('query') && this.advanced) ||\n      (changedProperties.has('refreshKey') && this.refreshKey !== '0')\n    ) {\n      this.summary = null;\n      // this.errors = [];\n      this.fireCustomEvent(CustomEventType.ContentChanged, { reset: true });\n      if (this.lastQuery) {\n        window.clearTimeout(this.lastQuery);\n        this.fetching = false;\n      }\n\n      if (this.query.trim().length > 0 || this.recipients.length > 0) {\n        this.fetching = true;\n        this.lastQuery = window.setTimeout(() => {\n          this.fetchSummary();\n        }, QUEIT_MILLIS);\n      }\n    }\n  }\n\n  public fetchSummary(): any {\n    if (this.endpoint) {\n      const group_uuids = this.recipients\n        .filter((value: OmniOption) => value.type === 'group')\n        .map((value: OmniOption) => value.id);\n\n      const contact_uuids = this.recipients\n        .filter((value: OmniOption) => value.type === 'contact')\n        .map((value: OmniOption) => value.id);\n\n      postJSON(this.endpoint, {\n        include: this.advanced\n          ? { query: this.query }\n          : { contact_uuids, group_uuids },\n\n        exclude: this.exclusions\n      }).then((response: WebResponse) => {\n        this.fetching = false;\n        this.initialized = true;\n        if (this.recipients.length == 0 && !this.advanced) {\n          return;\n        }\n        if (response.status === 200) {\n          this.summary = response.json as SummaryResponse;\n          if (!this.advanced) {\n            this.query = this.summary.query;\n          }\n          this.setValue({\n            advanced: this.advanced,\n            query: this.query,\n            exclusions: this.exclusions,\n            recipients: this.recipients\n          });\n\n          if (this.summary.error) {\n            this.errors = [this.summary.error];\n          } else {\n            this.errors = [];\n          }\n          this.requestUpdate('errors');\n          this.fireCustomEvent(CustomEventType.ContentChanged, this.summary);\n        } else {\n          this.summary = response.json as SummaryResponse;\n          if (this.summary.error) {\n            this.errors = [this.summary.error];\n          }\n          this.requestUpdate('errors');\n          this.fireCustomEvent(CustomEventType.ContentChanged, this.summary);\n        }\n      });\n    }\n  }\n\n  private handleAdvancedToggle(evt: MouseEvent) {\n    stopEvent(evt);\n    this.recipients = [];\n    this.exclusions = {};\n    if (this.advanced) {\n      this.query = '';\n      this.value = null;\n    }\n    this.advanced = !this.advanced;\n\n    this.setValue({\n      advanced: this.advanced,\n      query: this.query,\n      exclusions: this.exclusions,\n      recipients: this.recipients\n    });\n  }\n\n  private handleQueryChange(evt: KeyboardEvent) {\n    const input = evt.target as TextInput;\n    this.query = input.inputElement.value;\n  }\n\n  private handleRecipientsChanged() {\n    if (!this.endpoint) {\n      return;\n    }\n\n    if (this.recipients && (this.refreshKey !== '0' || this.initialized)) {\n      this.refresh();\n    } else {\n      this.initialized = true;\n    }\n  }\n\n  private handleActivityLevelChanged(evt: any) {\n    const select = evt.target as Select<any>;\n    const option = select.values[0];\n    if (option) {\n      if (this.exclusions['not_seen_since_days']) {\n        this.exclusions['not_seen_since_days'] = parseInt(option.value);\n        this.refresh();\n      }\n    }\n  }\n\n  private handleActivityLabelClicked(evt: any) {\n    if (\n      evt.target &&\n      evt.target.tagName !== 'TEMBA-CHECKBOX' &&\n      evt.target.tagName !== 'TEMBA-SELECT' &&\n      !evt.target.disabled\n    ) {\n      const checkbox = evt.currentTarget.querySelector('temba-checkbox');\n      checkbox.checked = !checkbox.checked;\n    }\n  }\n\n  private handleExclusionChanged(evt: any) {\n    if (evt.target.tagName === 'TEMBA-CHECKBOX') {\n      const ex = JSON.stringify(this.exclusions);\n      const checkbox = evt.target as Checkbox;\n      let value = checkbox.checked as any;\n\n      // if we check the activity box, look inside the select for the value\n      if (checkbox.name === 'not_seen_since_days' && value) {\n        const select = checkbox.parentElement.querySelector(\n          'temba-select'\n        ) as Select<any>;\n        if (select.values[0]) {\n          value = parseInt(select.values[0].value);\n        } else {\n          value = this.exclusions[checkbox.name];\n        }\n      }\n\n      if (!value) {\n        delete this.exclusions[checkbox.name];\n      } else {\n        this.exclusions[checkbox.name] = value;\n      }\n\n      if (ex !== JSON.stringify(this.exclusions) && this.endpoint) {\n        this.refresh();\n      }\n    }\n  }\n\n  public renderWidget(): TemplateResult {\n    let summary: TemplateResult;\n    if (this.summary) {\n      if (!this.summary.error) {\n        const count = this.summary.total || 0;\n\n        summary = html`\n          <div class=\"result-count\">\n            Found\n            <a\n              class=\"linked\"\n              target=\"_\"\n              href=\"/contact/?search=${encodeURIComponent(this.summary.query)}\"\n            >\n              ${count.toLocaleString()}\n            </a>\n            contact${count !== 1 ? 's' : ''}\n          </div>\n          <temba-button\n            class=\"edit\"\n            name=\"edit\"\n            secondary\n            small\n            @click=${this.handleAdvancedToggle}\n          >\n            <div slot=\"name\">\n              <div style=\"display: flex; align-items: center;\">\n                ${this.advanced\n                  ? html` <temba-icon\n                        name=\"reset\"\n                        style=\"margin-right:0.5em\"\n                      ></temba-icon>\n                      Start Over`\n                  : html` <temba-icon\n                        name=\"edit\"\n                        style=\"margin-right:0.5em\"\n                      ></temba-icon>\n                      Edit Query`}\n              </div>\n            </div>\n          </temba-button>\n        `;\n      }\n    }\n\n    const notSeenSinceDays = this.exclusions['not_seen_since_days'];\n    let blockers = null;\n\n    if (\n      this.summary &&\n      this.summary.blockers &&\n      this.summary.blockers.length > 0\n    ) {\n      blockers = html`${this.summary.blockers.map(\n        (error) =>\n          html`<temba-alert level=\"error\">${unsafeHTML(error)}</temba-alert>`\n      )}`;\n    }\n\n    return html`\n      ${\n        this.advanced\n          ? html`<div class=\"query\">\n              <temba-textinput\n                .helpText=${this.helpText}\n                .widgetOnly=${this.widgetOnly}\n                .errors=${this.errors}\n                name=${this.name}\n                .inputRoot=${this}\n                @input=${this.handleQueryChange}\n                placeholder=${this.placeholder}\n                .value=${this.query}\n                textarea\n                autogrow\n              >\n              </temba-textinput>\n            </div>`\n          : html`<temba-omnibox\n                placeholder=\"Search for contacts or groups\"\n                widget_only=\"\"\n                groups=\"\"\n                contacts=\"\"\n                label=\"Recipients\"\n                help_text=\"The contacts to send the message to.\"\n                .errors=${this.errors}\n                id=\"recipients\"\n                name=\"recipients\"\n                .values=${this.recipients}\n                endpoint=\"/contact/omnibox/?\"\n                @change=${this.handleRecipientsChanged}\n              >\n              </temba-omnibox>\n\n              ${this.not_seen_since_days ||\n              this.in_a_flow ||\n              this.started_previously\n                ? html`\n                    <div class=\"filters\">\n                      <div\n                        style=\"display:flex;font-size:1em;margin-bottom:0.5em\"\n                      >\n                        <temba-icon size=\"1\" name=\"filter\"></temba-icon>\n                        <div style=\"margin-left:0.5em\">\n                          Only include contacts who...\n                        </div>\n                      </div>\n                      ${this.in_a_flow\n                        ? html`<temba-checkbox\n                            name=\"in_a_flow\"\n                            label=\"${msg('Are not currently in a flow')}\"\n                            ?checked=${this.exclusions['in_a_flow']}\n                            @change=${this.handleExclusionChanged}\n                          ></temba-checkbox>`\n                        : null}\n                      ${this.not_seen_since_days\n                        ? html`\n                            <div\n                              class=\"activity-select\"\n                              @click=${this.handleActivityLabelClicked}\n                            >\n                              <temba-checkbox\n                                style=\"display:inline;\"\n                                name=\"not_seen_since_days\"\n                                ?checked=${notSeenSinceDays}\n                                @change=${this.handleExclusionChanged}\n                              >\n                              </temba-checkbox>\n\n                              <div style=\"margin-left:0.5em\">\n                                ${msg('Have sent a message in the last')}\n                              </div>\n\n                              <temba-select\n                                style=\"margin-left:0.5em\"\n                                class=\"small-select\"\n                                @change=${this.handleActivityLevelChanged}\n                                ?disabled=${!notSeenSinceDays}\n                              >\n                                <temba-option\n                                  name=\"90 days\"\n                                  value=\"90\"\n                                  ?selected=${notSeenSinceDays === 90}\n                                ></temba-option>\n                                <temba-option\n                                  name=\"180 days\"\n                                  value=\"180\"\n                                  ?selected=${notSeenSinceDays === 180}\n                                ></temba-option>\n                                <temba-option\n                                  name=\"Year\"\n                                  value=\"365\"\n                                  ?selected=${notSeenSinceDays === 365}\n                                ></temba-option>\n                              </temba-select>\n                              <div></div>\n                            </div>\n                          `\n                        : null}\n                      ${this.started_previously\n                        ? html`<temba-checkbox\n                            name=\"started_previously\"\n                            label=\"${msg(\n                              'Have not started this flow in the last 90 days'\n                            )}\"\n                            ?checked=${this.exclusions['started_previously']}\n                            @change=${this.handleExclusionChanged}\n                          ></temba-checkbox>`\n                        : null}\n                    </div>\n                  `\n                : null} `\n      }\n              </div>\n      <div\n        class=\"results ${getClasses({\n          fetching: this.fetching,\n          initialized: this.initialized || this.fetching,\n          empty:\n            ((this.summary && this.summary.error) || !this.summary) &&\n            !this.fetching\n        })}\"\n      >\n        <temba-loading units=\"6\" size=\"8\"></temba-loading>\n        <div class=\"summary ${this.expanded ? 'expanded' : ''}\">${summary}</div>\n      </div>\n      ${blockers}\n      ${\n        !blockers && this.summary && this.summary.warnings\n          ? this.summary.warnings.map(\n              (warning) =>\n                html`<temba-alert level=\"warning\"\n                  >${unsafeHTML(warning)}</temba-alert\n                >`\n            )\n          : ``\n      }\n\n\n    `;\n  }\n}\n"]}

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

@@ -1,12 +1,13 @@
 import { __decorate } from "tslib";
 import { html, css } from 'lit';
 import { property } from 'lit/decorators.js';
-import { FormElement } from './FormElement';
+import { FieldElement } from './FieldElement';
 import { getClasses } from '../utils';
 import { DateTime } from 'luxon';
-export class DatePicker extends FormElement {
+export class DatePicker extends FieldElement {
     static get styles() {
         return css `
+      ${super.styles}
       :host {
         display: block;
       }
@@ -185,7 +186,7 @@ export class DatePicker extends FormElement {
     handleClicked() {
         this.shadowRoot.querySelector('input').focus();
     }
-    render() {
+    renderWidget() {
         const classes = getClasses({ unset: !this.value });
         let dateWidgetValue = null;
         if (this.time && this.datetime && !this.datetime.invalid) {
@@ -195,44 +196,36 @@ export class DatePicker extends FormElement {
             dateWidgetValue = this.value;
         }
         return html `
-      <temba-field
-        class=${getClasses({ disabled: this.disabled })}
-        name=${this.name}
-        .label="${this.label}"
-        .helpText="${this.helpText}"
-        .errors=${this.errors}
-        .widgetOnly=${this.widgetOnly}
-        .hideLabel=${this.hideLabel}
-        .disabled=${this.disabled}
-      >
-        <div class="container" @click=${this.handleClicked}>
-          <slot name="prefix"></slot>
-          <div class="input-wrapper">
-            <input
-              class=${classes}
-              name=${this.label}
-              value=${dateWidgetValue}
-              type="${this.time ? 'datetime-local' : 'date'}"
-              @change=${this.handleChange}
-              min=${this.min || undefined}
-              max=${this.max || undefined}
-            />
-          </div>
-          ${this.time
+      <div class="container" @click=${this.handleClicked}>
+        <slot name="prefix"></slot>
+        <div class="input-wrapper">
+          <input
+            class=${classes}
+            name=${this.label}
+            value=${dateWidgetValue}
+            type="${this.time ? 'datetime-local' : 'date'}"
+            @change=${this.handleChange}
+            min=${this.min || undefined}
+            max=${this.max || undefined}
+          />
+        </div>
+        ${this.time
             ? html `
-                <div class="tz-wrapper">
-                  <div class="tz">
-                    <div class="label">Time Zone</div>
-                    <div class="zone">${this.timezoneFriendly}</div>
-                  </div>
+              <div class="tz-wrapper">
+                <div class="tz">
+                  <div class="label">Time Zone</div>
+                  <div class="zone">${this.timezoneFriendly}</div>
                 </div>
-              `
+              </div>
+            `
             : null}
-          <slot name="postfix"></slot>
-        </div>
-      </temba-field>
+        <slot name="postfix"></slot>
+      </div>
     `;
     }
+    render() {
+        return this.renderField();
+    }
 }
 __decorate([
     property({ type: String })

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/form/DatePicker.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,IAAI,EAAE,GAAG,EAAoB,MAAM,KAAK,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,OAAO,UAAW,SAAQ,WAAW;IACzC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8GT,CAAC;IACJ,CAAC;IAoBD,2DAA2D;IACpD,cAAc,CAAC,KAAU;QAC9B,OAAO,KAAK,CAAC;IACf,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAvBV,aAAQ,GAAG,EAAE,CAAC;QAGd,qBAAgB,GAAG,EAAE,CAAC;QAGtB,aAAQ,GAAG,IAAI,CAAC;QAGhB,SAAI,GAAG,KAAK,CAAC;QAGb,QAAG,GAAG,EAAE,CAAC;QAGT,QAAG,GAAG,EAAE,CAAC;IAST,CAAC;IAES,YAAY,CACpB,OAA0D;QAE1D,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACzB,oCAAoC;YACpC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,IAAI,CAAC,QAAQ;oBACX,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC,eAAe,EAAE,CAAC,QAAQ,CAAC;gBACpE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,QAAQ;qBAClC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC;qBACjB,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;gBAEtB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;oBACf,iCAAiC;oBACjC,IAAI,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;oBACnE,8CAA8C;oBAC9C,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;wBACrB,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;oBACjE,CAAC;oBACD,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;oBACzB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC;gBAC7C,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC7C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC;YACzC,CAAC;QACH,CAAC;IACH,CAAC;IAEM,OAAO,CAAC,OAAyB;QACtC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACzC,IAAI,CAAC,QAAQ;gBACX,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC,eAAe,EAAE,CAAC,QAAQ,CAAC;YACpE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,QAAQ;iBAClC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC;iBACjB,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;YACtB,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;IAEM,YAAY,CAAC,KAAK;QACvB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE;gBACnD,IAAI,EAAE,IAAI,CAAC,QAAQ;aACpB,CAAC,CAAC;YACH,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC;QAC7C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAClC,CAAC;QACD,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC3B,CAAC;IAEM,aAAa;QAClB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC;IACjD,CAAC;IAEM,MAAM;QACX,MAAM,OAAO,GAAG,UAAU,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QAEnD,IAAI,eAAe,GAAG,IAAI,CAAC;QAC3B,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;YACzD,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,oBAAoB,CAAC,CAAC;QACjE,CAAC;aAAM,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACtB,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC;QAC/B,CAAC;QAED,OAAO,IAAI,CAAA;;gBAEC,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;eACxC,IAAI,CAAC,IAAI;kBACN,IAAI,CAAC,KAAK;qBACP,IAAI,CAAC,QAAQ;kBAChB,IAAI,CAAC,MAAM;sBACP,IAAI,CAAC,UAAU;qBAChB,IAAI,CAAC,SAAS;oBACf,IAAI,CAAC,QAAQ;;wCAEO,IAAI,CAAC,aAAa;;;;sBAIpC,OAAO;qBACR,IAAI,CAAC,KAAK;sBACT,eAAe;sBACf,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM;wBACnC,IAAI,CAAC,YAAY;oBACrB,IAAI,CAAC,GAAG,IAAI,SAAS;oBACrB,IAAI,CAAC,GAAG,IAAI,SAAS;;;YAG7B,IAAI,CAAC,IAAI;YACT,CAAC,CAAC,IAAI,CAAA;;;;wCAIsB,IAAI,CAAC,gBAAgB;;;eAG9C;YACH,CAAC,CAAC,IAAI;;;;KAIb,CAAC;IACJ,CAAC;CACF;AAtIC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACL;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACX;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACf;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAClB;AAGT;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAClB","sourcesContent":["import { TemplateResult, html, css, PropertyValueMap } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { FormElement } from './FormElement';\nimport { getClasses } from '../utils';\nimport { DateTime } from 'luxon';\n\nexport class DatePicker extends FormElement {\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n      }\n\n      input {\n        width: inherit;\n      }\n\n      .container {\n        border-radius: var(--curvature);\n        border: 1px solid var(--color-widget-border);\n        display: flex;\n        cursor: pointer;\n        box-shadow: var(--widget-box-shadow);\n        flex-wrap: wrap;\n        overflow: hidden;\n      }\n\n      .input-wrapper {\n        padding: var(--temba-textinput-padding);\n        flex-grow: 1;\n      }\n\n      .tz {\n        margin-left: 0.5em;\n        font-size: 0.8em;\n        flex-direction: column;\n        align-self: stretch;\n        color: #888;\n        display: flex;\n        align-items: flex-start;\n        flex-direction: column;\n        padding: 0em 1em;\n        font-weight: 400;\n        cursor: pointer;\n        margin: auto 0;\n      }\n\n      .tz .label {\n        font-size: 0.8em;\n        color: #aaa;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      .tz .zone {\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      .tz-wrapper {\n        background: #efefef;\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        padding: 0.4em 0em;\n      }\n\n      .container:focus-within {\n        border-color: var(--color-focus);\n        background: var(--color-widget-bg-focused);\n        box-shadow: var(--widget-box-shadow-focused);\n      }\n\n      input {\n        color: var(--color-widget-text);\n        border: 0px;\n        font-family: var(--font-family);\n        outline: none;\n        width: 100%;\n        font-size: 13px;\n        padding: 0px;\n        margin: 0px;\n        line-height: 1em;\n      }\n\n      input.unset {\n        color: #ddd;\n      }\n\n      input.unset:focus {\n        color: var(--color-widget-text);\n      }\n\n      input:focus {\n        outline: none;\n      }\n\n      .disabled ::-webkit-calendar-picker-indicator {\n        display: none;\n      }\n\n      .disabled .tz-wrapper {\n        border-radius: var(--curvature);\n      }\n\n      ::-webkit-calendar-picker-indicator {\n        background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"15\" viewBox=\"0 0 24 24\"><path fill=\"%23bbbbbb\" d=\"M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z\"/></svg>');\n        cursor: pointer;\n        margin: 0;\n        padding: 0;\n      }\n\n      ::-webkit-calendar-picker-indicator:hover {\n        background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"15\" viewBox=\"0 0 24 24\"><path fill=\"%23777777\" d=\"M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z\"/></svg>');\n        cursor: pointer;\n        margin: 0;\n        padding: 0;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  timezone = '';\n\n  @property({ type: String })\n  timezoneFriendly = '';\n\n  @property({ type: Object })\n  datetime = null;\n\n  @property({ type: Boolean })\n  time = false;\n\n  @property({ type: String })\n  min = '';\n\n  @property({ type: String })\n  max = '';\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 constructor() {\n    super();\n  }\n\n  protected firstUpdated(\n    changed: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    if (changed.has('value')) {\n      // default to the local browser zone\n      if (this.time) {\n        this.timezone =\n          this.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;\n        this.timezoneFriendly = this.timezone\n          .replace('_', ' ')\n          .replace('/', ', ');\n\n        if (this.value) {\n          // we fire a change event on blur\n          let datetime = DateTime.fromSQL(this.value).setZone(this.timezone);\n          // if we can't read it as a sql stamp, try iso\n          if (datetime.invalid) {\n            datetime = DateTime.fromISO(this.value).setZone(this.timezone);\n          }\n          this.datetime = datetime;\n          this.value = this.datetime.toUTC().toISO();\n        }\n      } else {\n        this.datetime = DateTime.fromSQL(this.value);\n        this.value = this.datetime.toISODate();\n      }\n    }\n  }\n\n  public updated(changed: Map<string, any>): void {\n    super.updated(changed);\n    if (changed.has('timezone') && this.time) {\n      this.timezone =\n        this.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;\n      this.timezoneFriendly = this.timezone\n        .replace('_', ' ')\n        .replace('/', ', ');\n      this.requestUpdate('value');\n    }\n  }\n\n  public handleChange(event) {\n    event.preventDefault();\n    event.stopPropagation();\n    if (this.time) {\n      this.datetime = DateTime.fromISO(event.target.value, {\n        zone: this.timezone\n      });\n      this.value = this.datetime.toUTC().toISO();\n    } else {\n      this.value = event.target.value;\n    }\n    this.fireEvent('change');\n  }\n\n  public handleClicked() {\n    this.shadowRoot.querySelector('input').focus();\n  }\n\n  public render(): TemplateResult {\n    const classes = getClasses({ unset: !this.value });\n\n    let dateWidgetValue = null;\n    if (this.time && this.datetime && !this.datetime.invalid) {\n      dateWidgetValue = this.datetime.toFormat(\"yyyy-LL-dd'T'HH:mm\");\n    } else if (!this.time) {\n      dateWidgetValue = this.value;\n    }\n\n    return html`\n      <temba-field\n        class=${getClasses({ disabled: this.disabled })}\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 class=\"container\" @click=${this.handleClicked}>\n          <slot name=\"prefix\"></slot>\n          <div class=\"input-wrapper\">\n            <input\n              class=${classes}\n              name=${this.label}\n              value=${dateWidgetValue}\n              type=\"${this.time ? 'datetime-local' : 'date'}\"\n              @change=${this.handleChange}\n              min=${this.min || undefined}\n              max=${this.max || undefined}\n            />\n          </div>\n          ${this.time\n            ? html`\n                <div class=\"tz-wrapper\">\n                  <div class=\"tz\">\n                    <div class=\"label\">Time Zone</div>\n                    <div class=\"zone\">${this.timezoneFriendly}</div>\n                  </div>\n                </div>\n              `\n            : null}\n          <slot name=\"postfix\"></slot>\n        </div>\n      </temba-field>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/form/DatePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css, PropertyValueMap } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { FieldElement } from './FieldElement';\nimport { getClasses } from '../utils';\nimport { DateTime } from 'luxon';\n\nexport class DatePicker extends FieldElement {\n  static get styles() {\n    return css`\n      ${super.styles}\n      :host {\n        display: block;\n      }\n\n      input {\n        width: inherit;\n      }\n\n      .container {\n        border-radius: var(--curvature);\n        border: 1px solid var(--color-widget-border);\n        display: flex;\n        cursor: pointer;\n        box-shadow: var(--widget-box-shadow);\n        flex-wrap: wrap;\n        overflow: hidden;\n      }\n\n      .input-wrapper {\n        padding: var(--temba-textinput-padding);\n        flex-grow: 1;\n      }\n\n      .tz {\n        margin-left: 0.5em;\n        font-size: 0.8em;\n        flex-direction: column;\n        align-self: stretch;\n        color: #888;\n        display: flex;\n        align-items: flex-start;\n        flex-direction: column;\n        padding: 0em 1em;\n        font-weight: 400;\n        cursor: pointer;\n        margin: auto 0;\n      }\n\n      .tz .label {\n        font-size: 0.8em;\n        color: #aaa;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      .tz .zone {\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      .tz-wrapper {\n        background: #efefef;\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        padding: 0.4em 0em;\n      }\n\n      .container:focus-within {\n        border-color: var(--color-focus);\n        background: var(--color-widget-bg-focused);\n        box-shadow: var(--widget-box-shadow-focused);\n      }\n\n      input {\n        color: var(--color-widget-text);\n        border: 0px;\n        font-family: var(--font-family);\n        outline: none;\n        width: 100%;\n        font-size: 13px;\n        padding: 0px;\n        margin: 0px;\n        line-height: 1em;\n      }\n\n      input.unset {\n        color: #ddd;\n      }\n\n      input.unset:focus {\n        color: var(--color-widget-text);\n      }\n\n      input:focus {\n        outline: none;\n      }\n\n      .disabled ::-webkit-calendar-picker-indicator {\n        display: none;\n      }\n\n      .disabled .tz-wrapper {\n        border-radius: var(--curvature);\n      }\n\n      ::-webkit-calendar-picker-indicator {\n        background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"15\" viewBox=\"0 0 24 24\"><path fill=\"%23bbbbbb\" d=\"M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z\"/></svg>');\n        cursor: pointer;\n        margin: 0;\n        padding: 0;\n      }\n\n      ::-webkit-calendar-picker-indicator:hover {\n        background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"15\" viewBox=\"0 0 24 24\"><path fill=\"%23777777\" d=\"M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z\"/></svg>');\n        cursor: pointer;\n        margin: 0;\n        padding: 0;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  timezone = '';\n\n  @property({ type: String })\n  timezoneFriendly = '';\n\n  @property({ type: Object })\n  datetime = null;\n\n  @property({ type: Boolean })\n  time = false;\n\n  @property({ type: String })\n  min = '';\n\n  @property({ type: String })\n  max = '';\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 constructor() {\n    super();\n  }\n\n  protected firstUpdated(\n    changed: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    if (changed.has('value')) {\n      // default to the local browser zone\n      if (this.time) {\n        this.timezone =\n          this.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;\n        this.timezoneFriendly = this.timezone\n          .replace('_', ' ')\n          .replace('/', ', ');\n\n        if (this.value) {\n          // we fire a change event on blur\n          let datetime = DateTime.fromSQL(this.value).setZone(this.timezone);\n          // if we can't read it as a sql stamp, try iso\n          if (datetime.invalid) {\n            datetime = DateTime.fromISO(this.value).setZone(this.timezone);\n          }\n          this.datetime = datetime;\n          this.value = this.datetime.toUTC().toISO();\n        }\n      } else {\n        this.datetime = DateTime.fromSQL(this.value);\n        this.value = this.datetime.toISODate();\n      }\n    }\n  }\n\n  public updated(changed: Map<string, any>): void {\n    super.updated(changed);\n    if (changed.has('timezone') && this.time) {\n      this.timezone =\n        this.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;\n      this.timezoneFriendly = this.timezone\n        .replace('_', ' ')\n        .replace('/', ', ');\n      this.requestUpdate('value');\n    }\n  }\n\n  public handleChange(event) {\n    event.preventDefault();\n    event.stopPropagation();\n    if (this.time) {\n      this.datetime = DateTime.fromISO(event.target.value, {\n        zone: this.timezone\n      });\n      this.value = this.datetime.toUTC().toISO();\n    } else {\n      this.value = event.target.value;\n    }\n    this.fireEvent('change');\n  }\n\n  public handleClicked() {\n    this.shadowRoot.querySelector('input').focus();\n  }\n\n  protected renderWidget(): TemplateResult {\n    const classes = getClasses({ unset: !this.value });\n\n    let dateWidgetValue = null;\n    if (this.time && this.datetime && !this.datetime.invalid) {\n      dateWidgetValue = this.datetime.toFormat(\"yyyy-LL-dd'T'HH:mm\");\n    } else if (!this.time) {\n      dateWidgetValue = this.value;\n    }\n\n    return html`\n      <div class=\"container\" @click=${this.handleClicked}>\n        <slot name=\"prefix\"></slot>\n        <div class=\"input-wrapper\">\n          <input\n            class=${classes}\n            name=${this.label}\n            value=${dateWidgetValue}\n            type=\"${this.time ? 'datetime-local' : 'date'}\"\n            @change=${this.handleChange}\n            min=${this.min || undefined}\n            max=${this.max || undefined}\n          />\n        </div>\n        ${this.time\n          ? html`\n              <div class=\"tz-wrapper\">\n                <div class=\"tz\">\n                  <div class=\"label\">Time Zone</div>\n                  <div class=\"zone\">${this.timezoneFriendly}</div>\n                </div>\n              </div>\n            `\n          : null}\n        <slot name=\"postfix\"></slot>\n      </div>\n    `;\n  }\n\n  public render(): TemplateResult {\n    return this.renderField();\n  }\n}\n"]}

package/out-tsc/src/form/{FormField.js → FieldElement.js}

@@ -1,23 +1,32 @@
 import { __decorate } from "tslib";
-import { html, css, LitElement } from 'lit';
+import { html, css } from 'lit';
 import { property } from 'lit/decorators.js';
+import { RapidElement } from '../RapidElement';
 import { renderMarkdownInline } from '../markdown';
 /**
- * A small wrapper to display labels and help text in a smartmin style.
- * This exists so we can display things consistently before restyling.
+ * FieldElement is a base class for form components that provides built-in
+ * field wrapper functionality, eliminating the need for manual temba-field embedding.
+ *
+ * Components extending this class only need to implement renderWidget() with their
+ * specific widget content, and the field wrapper (label, errors, help text) is
+ * automatically handled.
  */
-export class FormField extends LitElement {
+export class FieldElement extends RapidElement {
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        this._value = value;
+    }
     constructor() {
-        super(...arguments);
-        this.hideLabel = false;
-        this.widgetOnly = false;
-        this.errors = [];
-        this.hideErrors = false;
-        this.helpText = '';
-        this.helpAlways = true;
-        this.label = '';
+        super();
         this.name = '';
+        // Use @property with custom getter/setter to handle both attribute and programmatic access
+        this._value = '';
+        this.inputRoot = this;
         this.disabled = false;
+        this.hideErrors = false;
+        this.internals = this.attachInternals();
     }
     static get styles() {
         return css `
@@ -41,19 +50,6 @@ export class FormField extends LitElement {
         line-height: normal;
         color: var(--color-text-help);
         margin-left: var(--help-text-margin-left);
-        margin-top: -16px;
-        opacity: 0;
-        transition: opacity ease-in-out 100ms, margin-top ease-in-out 200ms;
-        pointer-events: none;
-      }
-
-      .help-text.help-always {
-        opacity: 1;
-        margin-top: 6px;
-        margin-left: var(--help-text-margin-left);
-      }
-
-      .field:focus-within .help-text {
         margin-top: 6px;
         opacity: 1;
       }
@@ -164,13 +160,35 @@ export class FormField extends LitElement {
     }
     updated(changedProperties) {
         super.updated(changedProperties);
+        if (changedProperties.has('value')) {
+            this.internals.setFormValue(this.value);
+        }
         if (changedProperties.has('errors') ||
             changedProperties.has('hideErrors')) {
             const hasErrors = !this.hideErrors && this.errors && this.errors.length > 0;
             this.classList.toggle('has-error', hasErrors);
         }
     }
-    render() {
+    get form() {
+        return this.internals.form;
+    }
+    setValue(value) {
+        this.value = this.serializeValue(value);
+    }
+    getDeserializedValue() {
+        if (!this.value || this.value === '') {
+            return null;
+        }
+        return JSON.parse(this.value);
+    }
+    serializeValue(value) {
+        return JSON.stringify(value);
+    }
+    /**
+     * Renders the complete field including label, widget, errors, and help text.
+     * Components can override this for custom layouts, but typically should just implement renderWidget().
+     */
+    renderField() {
         const hasErrors = !this.hideErrors && this.errors && this.errors.length > 0;
         const errors = hasErrors
             ? this.errors.map((error) => {
@@ -181,7 +199,9 @@ export class FormField extends LitElement {
             : [];
         if (this.widgetOnly) {
             return html `
-        <div class="${this.disabled ? 'disabled' : ''}"><slot></slot></div>
+        <div class="${this.disabled ? 'disabled' : ''}">
+          ${this.renderWidget()}
+        </div>
         ${errors}
       `;
         }
@@ -198,13 +218,10 @@ export class FormField extends LitElement {
               >
             `
             : null}
-        <div class="widget">
-          <slot></slot>
-          ${errors}
-        </div>
+        <div class="widget">${this.renderWidget()} ${errors}</div>
         ${this.helpText && this.helpText !== 'None'
             ? html `
-              <div class="help-text ${this.helpAlways ? 'help-always' : null}">
+              <div class="help-text">
                 ${renderMarkdownInline(this.helpText)}
               </div>
             `
@@ -212,32 +229,43 @@ export class FormField extends LitElement {
       </div>
     `;
     }
+    /**
+     * Main render method that automatically provides field wrapper functionality.
+     * Components extending FieldElement should not override this unless they need custom field layouts.
+     */
+    render() {
+        return this.renderField();
+    }
 }
+FieldElement.formAssociated = true;
 __decorate([
-    property({ type: Boolean, attribute: 'hide_label' })
-], FormField.prototype, "hideLabel", void 0);
+    property({ type: String })
+], FieldElement.prototype, "name", void 0);
+__decorate([
+    property({ type: String, attribute: 'help_text' })
+], FieldElement.prototype, "helpText", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'widget_only' })
-], FormField.prototype, "widgetOnly", void 0);
+], FieldElement.prototype, "widgetOnly", void 0);
 __decorate([
-    property({ type: Array, attribute: false })
-], FormField.prototype, "errors", void 0);
+    property({ type: Array })
+], FieldElement.prototype, "errors", void 0);
 __decorate([
-    property({ type: Boolean })
-], FormField.prototype, "hideErrors", void 0);
+    property({ type: String })
+], FieldElement.prototype, "value", null);
 __decorate([
-    property({ type: String, attribute: 'help_text' })
-], FormField.prototype, "helpText", void 0);
+    property({ attribute: false })
+], FieldElement.prototype, "inputRoot", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'help_always' })
-], FormField.prototype, "helpAlways", void 0);
+    property({ type: Boolean })
+], FieldElement.prototype, "disabled", void 0);
 __decorate([
-    property({ type: String })
-], FormField.prototype, "label", void 0);
+    property({ type: Boolean })
+], FieldElement.prototype, "hideErrors", void 0);
 __decorate([
-    property({ type: String })
-], FormField.prototype, "name", void 0);
+    property({ type: Boolean, attribute: 'hide_label' })
+], FieldElement.prototype, "hideLabel", void 0);
 __decorate([
-    property({ type: Boolean })
-], FormField.prototype, "disabled", void 0);
-//# sourceMappingURL=FormField.js.map
+    property({ type: String })
+], FieldElement.prototype, "label", void 0);
+//# sourceMappingURL=FieldElement.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldElement.js","sourceRoot":"","sources":["../../../src/form/FieldElement.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAEnD;;;;;;;GAOG;AACH,MAAM,OAAgB,YAAa,SAAQ,YAAY;IAiBrD,IAAW,KAAK;QACd,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,IAAW,KAAK,CAAC,KAAK;QACpB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACtB,CAAC;IAqBD;QACE,KAAK,EAAE,CAAC;QA3CV,SAAI,GAAG,EAAE,CAAC;QAWV,2FAA2F;QACnF,WAAM,GAAQ,EAAE,CAAC;QAYzB,cAAS,GAAgB,IAAI,CAAC;QAG9B,aAAQ,GAAG,KAAK,CAAC;QAOjB,eAAU,GAAG,KAAK,CAAC;QAUjB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAC1C,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+HT,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,iBAAmC;QACzC,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1C,CAAC;QAED,IACE,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC;YAC/B,iBAAiB,CAAC,GAAG,CAAC,YAAY,CAAC,EACnC,CAAC;YACD,MAAM,SAAS,GACb,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;YAC5D,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;QAChD,CAAC;IACH,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7B,CAAC;IAEM,QAAQ,CAAC,KAAU;QACxB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC;IAEM,oBAAoB;QACzB,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE,CAAC;YACrC,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC;IAEM,cAAc,CAAC,KAAU;QAC9B,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IAQD;;;OAGG;IACO,WAAW;QACnB,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;QAC5E,MAAM,MAAM,GAAG,SAAS;YACtB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAa,EAAE,EAAE;gBAChC,OAAO,IAAI,CAAA;uCACkB,oBAAoB,CAAC,KAAK,CAAC;WACvD,CAAC;YACJ,CAAC,CAAC;YACJ,CAAC,CAAC,EAAE,CAAC;QAEP,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,OAAO,IAAI,CAAA;sBACK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;YACzC,IAAI,CAAC,YAAY,EAAE;;UAErB,MAAM;OACT,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAA;;uBAEQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS;YACzD,CAAC,CAAC,WAAW;YACb,CAAC,CAAC,EAAE;;UAEJ,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK;YAC9C,CAAC,CAAC,IAAI,CAAA;kDACkC,IAAI,CAAC,IAAI;mBACxC,IAAI,CAAC,KAAK;;aAEhB;YACH,CAAC,CAAC,IAAI;8BACc,IAAI,CAAC,YAAY,EAAE,IAAI,MAAM;UACjD,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,MAAM;YACzC,CAAC,CAAC,IAAI,CAAA;;kBAEE,oBAAoB,CAAC,IAAI,CAAC,QAAQ,CAAC;;aAExC;YACH,CAAC,CAAC,IAAI;;KAEX,CAAC;IACJ,CAAC;IAED;;;OAGG;IACI,MAAM;QACX,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC;IAC5B,CAAC;;AArPM,2BAAc,GAAG,IAAI,AAAP,CAAQ;AA7B7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;8CAClC;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;gDAClC;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4CACT;AAMjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAG1B;AAOD;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;+CACD;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACX;AAOjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDACT;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;+CAClC;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACb","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { renderMarkdownInline } from '../markdown';\n\n/**\n * FieldElement is a base class for form components that provides built-in\n * field wrapper functionality, eliminating the need for manual temba-field embedding.\n *\n * Components extending this class only need to implement renderWidget() with their\n * specific widget content, and the field wrapper (label, errors, help text) is\n * automatically handled.\n */\nexport abstract class FieldElement extends RapidElement {\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String, attribute: 'help_text' })\n  helpText: string;\n\n  @property({ type: Boolean, attribute: 'widget_only' })\n  widgetOnly: boolean;\n\n  @property({ type: Array })\n  errors: string[];\n\n  // Use @property with custom getter/setter to handle both attribute and programmatic access\n  private _value: any = '';\n\n  @property({ type: String })\n  public get value() {\n    return this._value;\n  }\n\n  public set value(value) {\n    this._value = value;\n  }\n\n  @property({ attribute: false })\n  inputRoot: HTMLElement = this;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  static formAssociated = true;\n\n  protected internals: ElementInternals;\n\n  @property({ type: Boolean })\n  hideErrors = false;\n\n  @property({ type: Boolean, attribute: 'hide_label' })\n  hideLabel: boolean;\n\n  @property({ type: String })\n  label: string;\n\n  constructor() {\n    super();\n    this.internals = this.attachInternals();\n  }\n\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: var(--color-label, #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: 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  updated(changedProperties: Map<string, any>): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('value')) {\n      this.internals.setFormValue(this.value);\n    }\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  get form() {\n    return this.internals.form;\n  }\n\n  public setValue(value: any) {\n    this.value = this.serializeValue(value);\n  }\n\n  public getDeserializedValue(): any {\n    if (!this.value || this.value === '') {\n      return null;\n    }\n    return JSON.parse(this.value);\n  }\n\n  public serializeValue(value: any): string {\n    return JSON.stringify(value);\n  }\n\n  /**\n   * Abstract method that components must implement to render their specific widget content.\n   * This replaces the need to manually embed temba-field.\n   */\n  protected abstract renderWidget(): TemplateResult;\n\n  /**\n   * Renders the complete field including label, widget, errors, and help text.\n   * Components can override this for custom layouts, but typically should just implement renderWidget().\n   */\n  protected renderField(): 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\">${renderMarkdownInline(error)}</div>\n          `;\n        })\n      : [];\n\n    if (this.widgetOnly) {\n      return html`\n        <div class=\"${this.disabled ? 'disabled' : ''}\">\n          ${this.renderWidget()}\n        </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\">${this.renderWidget()} ${errors}</div>\n        ${this.helpText && this.helpText !== 'None'\n          ? html`\n              <div class=\"help-text\">\n                ${renderMarkdownInline(this.helpText)}\n              </div>\n            `\n          : null}\n      </div>\n    `;\n  }\n\n  /**\n   * Main render method that automatically provides field wrapper functionality.\n   * Components extending FieldElement should not override this unless they need custom field layouts.\n   */\n  public render(): TemplateResult {\n    return this.renderField();\n  }\n}\n"]}

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

@@ -258,8 +258,9 @@ export class FieldRenderer {
     static renderArray(fieldName, config, value, context) {
         const { errors = [], onChange, showLabel = true, extraClasses, style } = context;
         return html `<div class="form-field">
-      ${showLabel ? html `<label>${config.label}</label>` : ''}
       <temba-array-editor
+        name="${fieldName}"
+        .label="${showLabel ? config.label : ''}"
         .value="${value || []}"
         .itemConfig="${config.itemConfig}"
         .sortable="${config.sortable}"