@nyaruka/temba-components 0.131.0 → 0.131.2

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 { 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"]}
+{"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 { 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>\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/FieldRenderer.js

@@ -1,4 +1,5 @@
 import { html } from 'lit';
+import { spread } from '@open-wc/lit-helpers';
 /**
  * FieldRenderer provides a consistent way to render field configurations
  * into web components across different contexts (NodeEditor, ArrayEditor, etc.)
@@ -149,10 +150,7 @@ export class FieldRenderer {
           ></temba-option>`;
             }
             else {
-                return html `<temba-option
-            name="${option.label || option.name}"
-            value="${option.value}"
-          ></temba-option>`;
+                return html `<temba-option ${spread(option)}></temba-option>`;
             }
         })}
     </temba-select>`;

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

@@ -1 +1 @@
-{"version":3,"file":"FieldRenderer.js","sourceRoot":"","sources":["../../../src/form/FieldRenderer.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport {\n  FieldConfig,\n  TextFieldConfig,\n  TextareaFieldConfig,\n  SelectFieldConfig,\n  CheckboxFieldConfig,\n  MessageEditorFieldConfig,\n  KeyValueFieldConfig,\n  ArrayFieldConfig\n} from '../flow/types';\n\n/**\n * FieldRenderer provides a consistent way to render field configurations\n * into web components across different contexts (NodeEditor, ArrayEditor, etc.)\n */\nexport class FieldRenderer {\n  /**\n   * Renders a field based on its configuration\n   * @param fieldName - The name of the field\n   * @param config - The field configuration\n   * @param value - The current value of the field\n   * @param context - Additional context for rendering\n   * @returns A TemplateResult for the rendered field\n   */\n  static renderField(\n    fieldName: string,\n    config: FieldConfig,\n    value: any,\n    context: FieldRenderContext = {}\n  ): TemplateResult {\n    /*const {\n      errors = [],\n      onChange,\n      showLabel = true,\n      flavor,\n      extraClasses = '',\n      style = ''\n    } = context;*/\n    switch (config.type) {\n      case 'text':\n        return FieldRenderer.renderTextInput(fieldName, config, value, context);\n\n      case 'textarea':\n        return FieldRenderer.renderTextarea(\n          fieldName,\n          config as TextareaFieldConfig,\n          value,\n          context\n        );\n\n      case 'select':\n        return FieldRenderer.renderSelect(\n          fieldName,\n          config as SelectFieldConfig,\n          value,\n          context\n        );\n\n      case 'checkbox':\n        return FieldRenderer.renderCheckbox(\n          fieldName,\n          config as CheckboxFieldConfig,\n          value,\n          context\n        );\n\n      case 'key-value':\n        return FieldRenderer.renderKeyValue(\n          fieldName,\n          config as KeyValueFieldConfig,\n          value,\n          context\n        );\n\n      case 'array':\n        return FieldRenderer.renderArray(\n          fieldName,\n          config as ArrayFieldConfig,\n          value,\n          context\n        );\n\n      case 'message-editor':\n        return FieldRenderer.renderMessageEditor(\n          fieldName,\n          config as MessageEditorFieldConfig,\n          value,\n          context\n        );\n\n      default:\n        return html`<div>Unsupported field type: ${(config as any).type}</div>`;\n    }\n  }\n\n  private static renderTextInput(\n    fieldName: string,\n    config: TextFieldConfig,\n    value: any,\n    context: FieldRenderContext\n  ): TemplateResult {\n    const {\n      errors = [],\n      onChange,\n      showLabel = true,\n      extraClasses,\n      style\n    } = context;\n\n    // If field supports expression evaluation, use temba-completion\n    if (config.evaluated) {\n      return html`<temba-completion\n        name=\"${fieldName}\"\n        label=\"${showLabel ? config.label : ''}\"\n        ?required=\"${config.required}\"\n        .errors=\"${errors}\"\n        .value=\"${value || ''}\"\n        placeholder=\"${config.placeholder || ''}\"\n        expressions=\"session\"\n        .helpText=\"${config.helpText || ''}\"\n        class=\"${extraClasses}\"\n        style=\"${style}\"\n        @input=\"${onChange || (() => {})}\"\n      ></temba-completion>`;\n    }\n\n    return html`<temba-textinput\n      name=\"${fieldName}\"\n      label=\"${showLabel ? config.label : ''}\"\n      ?required=\"${config.required}\"\n      .errors=\"${errors}\"\n      .value=\"${value || ''}\"\n      placeholder=\"${config.placeholder || ''}\"\n      .helpText=\"${config.helpText || ''}\"\n      flavor=\"${config.flavor || 'default'}\"\n      class=\"${extraClasses}\"\n      style=\"${style}\"\n      @input=\"${onChange || (() => {})}\"\n    ></temba-textinput>`;\n  }\n\n  private static renderTextarea(\n    fieldName: string,\n    config: TextareaFieldConfig,\n    value: any,\n    context: FieldRenderContext\n  ): TemplateResult {\n    const {\n      errors = [],\n      onChange,\n      showLabel = true,\n      extraClasses,\n      style\n    } = context;\n\n    const minHeightStyle = config.minHeight\n      ? `--textarea-min-height: ${config.minHeight}px;`\n      : '';\n    const combinedStyle = `${minHeightStyle}${style}`;\n\n    // If field supports expression evaluation, use temba-completion\n    if (config.evaluated) {\n      return html`<temba-completion\n        name=\"${fieldName}\"\n        label=\"${showLabel ? config.label : ''}\"\n        ?required=\"${config.required}\"\n        .errors=\"${errors}\"\n        .value=\"${value || ''}\"\n        placeholder=\"${config.placeholder || ''}\"\n        textarea\n        expressions=\"session\"\n        .helpText=\"${config.helpText || ''}\"\n        class=\"${extraClasses}\"\n        style=\"${combinedStyle}\"\n        @input=\"${onChange || (() => {})}\"\n      ></temba-completion>`;\n    }\n\n    return html`<temba-textinput\n      name=\"${fieldName}\"\n      label=\"${showLabel ? config.label : ''}\"\n      ?required=\"${config.required}\"\n      .errors=\"${errors}\"\n      .value=\"${value || ''}\"\n      placeholder=\"${config.placeholder || ''}\"\n      textarea\n      .rows=\"${config.rows || 3}\"\n      .helpText=\"${config.helpText || ''}\"\n      class=\"${extraClasses}\"\n      style=\"${combinedStyle}\"\n      @input=\"${onChange || (() => {})}\"\n    ></temba-textinput>`;\n  }\n\n  private static renderSelect(\n    fieldName: string,\n    config: SelectFieldConfig,\n    value: any,\n    context: FieldRenderContext\n  ): TemplateResult {\n    const {\n      errors = [],\n      onChange,\n      showLabel = true,\n      flavor,\n      extraClasses,\n      style\n    } = context;\n\n    // Get options - use dynamic options if available, otherwise use static options\n    const optionsToRender = config.getDynamicOptions\n      ? config.getDynamicOptions()\n      : config.options;\n\n    return html`<temba-select\n      name=\"${fieldName}\"\n      label=\"${showLabel ? config.label : ''}\"\n      ?required=\"${config.required}\"\n      .errors=\"${errors}\"\n      .values=${value}\n      ?multi=\"${config.multi}\"\n      ?searchable=\"${config.searchable}\"\n      ?tags=\"${config.tags}\"\n      ?emails=\"${config.emails}\"\n      ?clearable=\"${config.clearable || false}\"\n      placeholder=\"${config.placeholder || ''}\"\n      maxItems=\"${config.maxItems || 0}\"\n      valueKey=\"${config.valueKey || 'value'}\"\n      nameKey=\"${config.nameKey || 'name'}\"\n      endpoint=\"${config.endpoint || ''}\"\n      .helpText=\"${config.helpText || ''}\"\n      flavor=\"${flavor || config.flavor || 'small'}\"\n      class=\"${extraClasses}\"\n      style=\"${style}\"\n      .getName=${config.getName}\n      .createArbitraryOption=${config.createArbitraryOption}\n      ?allowCreate=\"${config.allowCreate || false}\"\n      @change=\"${onChange || (() => {})}\"\n    >\n      ${optionsToRender?.map((option: any) => {\n        if (typeof option === 'string') {\n          return html`<temba-option\n            name=\"${option}\"\n            value=\"${option}\"\n          ></temba-option>`;\n        } else {\n          return html`<temba-option\n            name=\"${option.label || option.name}\"\n            value=\"${option.value}\"\n          ></temba-option>`;\n        }\n      })}\n    </temba-select>`;\n  }\n\n  private static renderCheckbox(\n    fieldName: string,\n    config: CheckboxFieldConfig,\n    value: any,\n    context: FieldRenderContext\n  ): TemplateResult {\n    const {\n      errors = [],\n      onChange,\n      extraClasses,\n      style,\n      formData = {}\n    } = context;\n\n    // Handle dynamic labels\n    const label =\n      typeof config.label === 'function'\n        ? config.label(formData)\n        : config.label;\n\n    // Build custom style including labelPadding\n    const customStyle = config.labelPadding\n      ? `--checkbox-padding: ${config.labelPadding}; ${style || ''}`\n      : style || '';\n\n    return html`<div class=\"form-field\">\n      <temba-checkbox\n        name=\"${fieldName}\"\n        label=\"${label}\"\n        .helpText=\"${config.helpText || ''}\"\n        ?required=\"${config.required}\"\n        .errors=\"${errors}\"\n        ?checked=\"${value || false}\"\n        size=\"${config.size || 1.2}\"\n        animateChange=\"${config.animateChange || 'pulse'}\"\n        class=\"${extraClasses}\"\n        style=\"${customStyle}\"\n        @change=\"${onChange || (() => {})}\"\n      ></temba-checkbox>\n      ${errors.length\n        ? html`<div class=\"field-errors\">${errors.join(', ')}</div>`\n        : ''}\n    </div>`;\n  }\n\n  private static renderKeyValue(\n    fieldName: string,\n    config: KeyValueFieldConfig,\n    value: any,\n    context: FieldRenderContext\n  ): TemplateResult {\n    const {\n      errors = [],\n      onChange,\n      showLabel = true,\n      extraClasses,\n      style\n    } = context;\n\n    return html`<div class=\"form-field\">\n      ${showLabel ? html`<label>${config.label}</label>` : ''}\n      <temba-key-value-editor\n        name=\"${fieldName}\"\n        .value=\"${value || []}\"\n        .sortable=\"${config.sortable}\"\n        .keyPlaceholder=\"${config.keyPlaceholder || 'Key'}\"\n        .valuePlaceholder=\"${config.valuePlaceholder || 'Value'}\"\n        .minRows=\"${config.minRows || 0}\"\n        class=\"${extraClasses}\"\n        style=\"${style}\"\n        @change=\"${onChange || (() => {})}\"\n      ></temba-key-value-editor>\n      ${errors.length\n        ? html`<div class=\"field-errors\">${errors.join(', ')}</div>`\n        : ''}\n    </div>`;\n  }\n\n  private static renderArray(\n    fieldName: string,\n    config: ArrayFieldConfig,\n    value: any,\n    context: FieldRenderContext\n  ): TemplateResult {\n    const {\n      errors = [],\n      onChange,\n      showLabel = true,\n      extraClasses,\n      style\n    } = context;\n\n    return html`<div class=\"form-field\">\n      <temba-array-editor\n        name=\"${fieldName}\"\n        .label=\"${showLabel ? config.label : ''}\"\n        .value=\"${value || []}\"\n        .itemConfig=\"${config.itemConfig}\"\n        .sortable=\"${config.sortable}\"\n        .itemLabel=\"${config.itemLabel || 'Item'}\"\n        .minItems=\"${config.minItems || 0}\"\n        .maxItems=\"${config.maxItems || 0}\"\n        ?maintainEmptyItem=\"${config.maintainEmptyItem !== false}\"\n        .onItemChange=\"${config.onItemChange}\"\n        .isEmptyItemFn=\"${config.isEmptyItem}\"\n        class=\"${extraClasses}\"\n        style=\"${style}\"\n        @change=\"${onChange || (() => {})}\"\n      ></temba-array-editor>\n      ${errors.length\n        ? html`<div class=\"field-errors\">${errors.join(', ')}</div>`\n        : ''}\n    </div>`;\n  }\n\n  private static renderMessageEditor(\n    fieldName: string,\n    config: MessageEditorFieldConfig,\n    value: any,\n    context: FieldRenderContext\n  ): TemplateResult {\n    const {\n      errors = [],\n      onChange,\n      showLabel = true,\n      extraClasses,\n      style,\n      additionalData = {}\n    } = context;\n\n    return html`<temba-message-editor\n      name=\"${fieldName}\"\n      label=\"${showLabel ? config.label : ''}\"\n      ?required=\"${config.required}\"\n      .errors=\"${errors}\"\n      .value=\"${value || ''}\"\n      .attachments=\"${additionalData.attachments || []}\"\n      placeholder=\"${config.placeholder || ''}\"\n      .helpText=\"${config.helpText || ''}\"\n      ?autogrow=\"${config.autogrow}\"\n      ?gsm=\"${config.gsm}\"\n      ?disableCompletion=\"${config.disableCompletion}\"\n      counter=\"${config.counter || ''}\"\n      accept=\"${config.accept || ''}\"\n      endpoint=\"${config.endpoint || ''}\"\n      max-attachments=\"${config.maxAttachments || 3}\"\n      minHeight=\"${config.minHeight || 60}\"\n      class=\"${extraClasses}\"\n      style=\"${style}\"\n      @change=\"${onChange || (() => {})}\"\n    ></temba-message-editor>`;\n  }\n}\n\nexport interface FieldRenderContext {\n  /** Array of error messages for the field */\n  errors?: string[];\n  /** Change event handler */\n  onChange?: (event: Event) => void;\n  /** Whether to show the field label */\n  showLabel?: boolean;\n  /** Flavor for components that support it (like temba-select) */\n  flavor?: string;\n  /** Additional CSS classes to apply */\n  extraClasses?: string;\n  /** Additional CSS styles to apply */\n  style?: string;\n  /** Additional data needed for specific field types */\n  additionalData?: Record<string, any>;\n  /** Form data for dynamic field configurations */\n  formData?: Record<string, any>;\n}\n"]}
+{"version":3,"file":"FieldRenderer.js","sourceRoot":"","sources":["../../../src/form/FieldRenderer.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport { spread } from '@open-wc/lit-helpers';\nimport {\n  FieldConfig,\n  TextFieldConfig,\n  TextareaFieldConfig,\n  SelectFieldConfig,\n  CheckboxFieldConfig,\n  MessageEditorFieldConfig,\n  KeyValueFieldConfig,\n  ArrayFieldConfig\n} from '../flow/types';\n\n/**\n * FieldRenderer provides a consistent way to render field configurations\n * into web components across different contexts (NodeEditor, ArrayEditor, etc.)\n */\nexport class FieldRenderer {\n  /**\n   * Renders a field based on its configuration\n   * @param fieldName - The name of the field\n   * @param config - The field configuration\n   * @param value - The current value of the field\n   * @param context - Additional context for rendering\n   * @returns A TemplateResult for the rendered field\n   */\n  static renderField(\n    fieldName: string,\n    config: FieldConfig,\n    value: any,\n    context: FieldRenderContext = {}\n  ): TemplateResult {\n    /*const {\n      errors = [],\n      onChange,\n      showLabel = true,\n      flavor,\n      extraClasses = '',\n      style = ''\n    } = context;*/\n    switch (config.type) {\n      case 'text':\n        return FieldRenderer.renderTextInput(fieldName, config, value, context);\n\n      case 'textarea':\n        return FieldRenderer.renderTextarea(\n          fieldName,\n          config as TextareaFieldConfig,\n          value,\n          context\n        );\n\n      case 'select':\n        return FieldRenderer.renderSelect(\n          fieldName,\n          config as SelectFieldConfig,\n          value,\n          context\n        );\n\n      case 'checkbox':\n        return FieldRenderer.renderCheckbox(\n          fieldName,\n          config as CheckboxFieldConfig,\n          value,\n          context\n        );\n\n      case 'key-value':\n        return FieldRenderer.renderKeyValue(\n          fieldName,\n          config as KeyValueFieldConfig,\n          value,\n          context\n        );\n\n      case 'array':\n        return FieldRenderer.renderArray(\n          fieldName,\n          config as ArrayFieldConfig,\n          value,\n          context\n        );\n\n      case 'message-editor':\n        return FieldRenderer.renderMessageEditor(\n          fieldName,\n          config as MessageEditorFieldConfig,\n          value,\n          context\n        );\n\n      default:\n        return html`<div>Unsupported field type: ${(config as any).type}</div>`;\n    }\n  }\n\n  private static renderTextInput(\n    fieldName: string,\n    config: TextFieldConfig,\n    value: any,\n    context: FieldRenderContext\n  ): TemplateResult {\n    const {\n      errors = [],\n      onChange,\n      showLabel = true,\n      extraClasses,\n      style\n    } = context;\n\n    // If field supports expression evaluation, use temba-completion\n    if (config.evaluated) {\n      return html`<temba-completion\n        name=\"${fieldName}\"\n        label=\"${showLabel ? config.label : ''}\"\n        ?required=\"${config.required}\"\n        .errors=\"${errors}\"\n        .value=\"${value || ''}\"\n        placeholder=\"${config.placeholder || ''}\"\n        expressions=\"session\"\n        .helpText=\"${config.helpText || ''}\"\n        class=\"${extraClasses}\"\n        style=\"${style}\"\n        @input=\"${onChange || (() => {})}\"\n      ></temba-completion>`;\n    }\n\n    return html`<temba-textinput\n      name=\"${fieldName}\"\n      label=\"${showLabel ? config.label : ''}\"\n      ?required=\"${config.required}\"\n      .errors=\"${errors}\"\n      .value=\"${value || ''}\"\n      placeholder=\"${config.placeholder || ''}\"\n      .helpText=\"${config.helpText || ''}\"\n      flavor=\"${config.flavor || 'default'}\"\n      class=\"${extraClasses}\"\n      style=\"${style}\"\n      @input=\"${onChange || (() => {})}\"\n    ></temba-textinput>`;\n  }\n\n  private static renderTextarea(\n    fieldName: string,\n    config: TextareaFieldConfig,\n    value: any,\n    context: FieldRenderContext\n  ): TemplateResult {\n    const {\n      errors = [],\n      onChange,\n      showLabel = true,\n      extraClasses,\n      style\n    } = context;\n\n    const minHeightStyle = config.minHeight\n      ? `--textarea-min-height: ${config.minHeight}px;`\n      : '';\n    const combinedStyle = `${minHeightStyle}${style}`;\n\n    // If field supports expression evaluation, use temba-completion\n    if (config.evaluated) {\n      return html`<temba-completion\n        name=\"${fieldName}\"\n        label=\"${showLabel ? config.label : ''}\"\n        ?required=\"${config.required}\"\n        .errors=\"${errors}\"\n        .value=\"${value || ''}\"\n        placeholder=\"${config.placeholder || ''}\"\n        textarea\n        expressions=\"session\"\n        .helpText=\"${config.helpText || ''}\"\n        class=\"${extraClasses}\"\n        style=\"${combinedStyle}\"\n        @input=\"${onChange || (() => {})}\"\n      ></temba-completion>`;\n    }\n\n    return html`<temba-textinput\n      name=\"${fieldName}\"\n      label=\"${showLabel ? config.label : ''}\"\n      ?required=\"${config.required}\"\n      .errors=\"${errors}\"\n      .value=\"${value || ''}\"\n      placeholder=\"${config.placeholder || ''}\"\n      textarea\n      .rows=\"${config.rows || 3}\"\n      .helpText=\"${config.helpText || ''}\"\n      class=\"${extraClasses}\"\n      style=\"${combinedStyle}\"\n      @input=\"${onChange || (() => {})}\"\n    ></temba-textinput>`;\n  }\n\n  private static renderSelect(\n    fieldName: string,\n    config: SelectFieldConfig,\n    value: any,\n    context: FieldRenderContext\n  ): TemplateResult {\n    const {\n      errors = [],\n      onChange,\n      showLabel = true,\n      flavor,\n      extraClasses,\n      style\n    } = context;\n\n    // Get options - use dynamic options if available, otherwise use static options\n    const optionsToRender = config.getDynamicOptions\n      ? config.getDynamicOptions()\n      : config.options;\n\n    return html`<temba-select\n      name=\"${fieldName}\"\n      label=\"${showLabel ? config.label : ''}\"\n      ?required=\"${config.required}\"\n      .errors=\"${errors}\"\n      .values=${value}\n      ?multi=\"${config.multi}\"\n      ?searchable=\"${config.searchable}\"\n      ?tags=\"${config.tags}\"\n      ?emails=\"${config.emails}\"\n      ?clearable=\"${config.clearable || false}\"\n      placeholder=\"${config.placeholder || ''}\"\n      maxItems=\"${config.maxItems || 0}\"\n      valueKey=\"${config.valueKey || 'value'}\"\n      nameKey=\"${config.nameKey || 'name'}\"\n      endpoint=\"${config.endpoint || ''}\"\n      .helpText=\"${config.helpText || ''}\"\n      flavor=\"${flavor || config.flavor || 'small'}\"\n      class=\"${extraClasses}\"\n      style=\"${style}\"\n      .getName=${config.getName}\n      .createArbitraryOption=${config.createArbitraryOption}\n      ?allowCreate=\"${config.allowCreate || false}\"\n      @change=\"${onChange || (() => {})}\"\n    >\n      ${optionsToRender?.map((option: any) => {\n        if (typeof option === 'string') {\n          return html`<temba-option\n            name=\"${option}\"\n            value=\"${option}\"\n          ></temba-option>`;\n        } else {\n          return html`<temba-option ${spread(option)}></temba-option>`;\n        }\n      })}\n    </temba-select>`;\n  }\n\n  private static renderCheckbox(\n    fieldName: string,\n    config: CheckboxFieldConfig,\n    value: any,\n    context: FieldRenderContext\n  ): TemplateResult {\n    const {\n      errors = [],\n      onChange,\n      extraClasses,\n      style,\n      formData = {}\n    } = context;\n\n    // Handle dynamic labels\n    const label =\n      typeof config.label === 'function'\n        ? config.label(formData)\n        : config.label;\n\n    // Build custom style including labelPadding\n    const customStyle = config.labelPadding\n      ? `--checkbox-padding: ${config.labelPadding}; ${style || ''}`\n      : style || '';\n\n    return html`<div class=\"form-field\">\n      <temba-checkbox\n        name=\"${fieldName}\"\n        label=\"${label}\"\n        .helpText=\"${config.helpText || ''}\"\n        ?required=\"${config.required}\"\n        .errors=\"${errors}\"\n        ?checked=\"${value || false}\"\n        size=\"${config.size || 1.2}\"\n        animateChange=\"${config.animateChange || 'pulse'}\"\n        class=\"${extraClasses}\"\n        style=\"${customStyle}\"\n        @change=\"${onChange || (() => {})}\"\n      ></temba-checkbox>\n      ${errors.length\n        ? html`<div class=\"field-errors\">${errors.join(', ')}</div>`\n        : ''}\n    </div>`;\n  }\n\n  private static renderKeyValue(\n    fieldName: string,\n    config: KeyValueFieldConfig,\n    value: any,\n    context: FieldRenderContext\n  ): TemplateResult {\n    const {\n      errors = [],\n      onChange,\n      showLabel = true,\n      extraClasses,\n      style\n    } = context;\n\n    return html`<div class=\"form-field\">\n      ${showLabel ? html`<label>${config.label}</label>` : ''}\n      <temba-key-value-editor\n        name=\"${fieldName}\"\n        .value=\"${value || []}\"\n        .sortable=\"${config.sortable}\"\n        .keyPlaceholder=\"${config.keyPlaceholder || 'Key'}\"\n        .valuePlaceholder=\"${config.valuePlaceholder || 'Value'}\"\n        .minRows=\"${config.minRows || 0}\"\n        class=\"${extraClasses}\"\n        style=\"${style}\"\n        @change=\"${onChange || (() => {})}\"\n      ></temba-key-value-editor>\n      ${errors.length\n        ? html`<div class=\"field-errors\">${errors.join(', ')}</div>`\n        : ''}\n    </div>`;\n  }\n\n  private static renderArray(\n    fieldName: string,\n    config: ArrayFieldConfig,\n    value: any,\n    context: FieldRenderContext\n  ): TemplateResult {\n    const {\n      errors = [],\n      onChange,\n      showLabel = true,\n      extraClasses,\n      style\n    } = context;\n\n    return html`<div class=\"form-field\">\n      <temba-array-editor\n        name=\"${fieldName}\"\n        .label=\"${showLabel ? config.label : ''}\"\n        .value=\"${value || []}\"\n        .itemConfig=\"${config.itemConfig}\"\n        .sortable=\"${config.sortable}\"\n        .itemLabel=\"${config.itemLabel || 'Item'}\"\n        .minItems=\"${config.minItems || 0}\"\n        .maxItems=\"${config.maxItems || 0}\"\n        ?maintainEmptyItem=\"${config.maintainEmptyItem !== false}\"\n        .onItemChange=\"${config.onItemChange}\"\n        .isEmptyItemFn=\"${config.isEmptyItem}\"\n        class=\"${extraClasses}\"\n        style=\"${style}\"\n        @change=\"${onChange || (() => {})}\"\n      ></temba-array-editor>\n      ${errors.length\n        ? html`<div class=\"field-errors\">${errors.join(', ')}</div>`\n        : ''}\n    </div>`;\n  }\n\n  private static renderMessageEditor(\n    fieldName: string,\n    config: MessageEditorFieldConfig,\n    value: any,\n    context: FieldRenderContext\n  ): TemplateResult {\n    const {\n      errors = [],\n      onChange,\n      showLabel = true,\n      extraClasses,\n      style,\n      additionalData = {}\n    } = context;\n\n    return html`<temba-message-editor\n      name=\"${fieldName}\"\n      label=\"${showLabel ? config.label : ''}\"\n      ?required=\"${config.required}\"\n      .errors=\"${errors}\"\n      .value=\"${value || ''}\"\n      .attachments=\"${additionalData.attachments || []}\"\n      placeholder=\"${config.placeholder || ''}\"\n      .helpText=\"${config.helpText || ''}\"\n      ?autogrow=\"${config.autogrow}\"\n      ?gsm=\"${config.gsm}\"\n      ?disableCompletion=\"${config.disableCompletion}\"\n      counter=\"${config.counter || ''}\"\n      accept=\"${config.accept || ''}\"\n      endpoint=\"${config.endpoint || ''}\"\n      max-attachments=\"${config.maxAttachments || 3}\"\n      minHeight=\"${config.minHeight || 60}\"\n      class=\"${extraClasses}\"\n      style=\"${style}\"\n      @change=\"${onChange || (() => {})}\"\n    ></temba-message-editor>`;\n  }\n}\n\nexport interface FieldRenderContext {\n  /** Array of error messages for the field */\n  errors?: string[];\n  /** Change event handler */\n  onChange?: (event: Event) => void;\n  /** Whether to show the field label */\n  showLabel?: boolean;\n  /** Flavor for components that support it (like temba-select) */\n  flavor?: string;\n  /** Additional CSS classes to apply */\n  extraClasses?: string;\n  /** Additional CSS styles to apply */\n  style?: string;\n  /** Additional data needed for specific field types */\n  additionalData?: Record<string, any>;\n  /** Form data for dynamic field configurations */\n  formData?: Record<string, any>;\n}\n"]}

package/out-tsc/src/interfaces.js

@@ -38,6 +38,8 @@ export var CustomEventType;
     CustomEventType["OrderChanged"] = "temba-order-changed";
     CustomEventType["DragStart"] = "temba-drag-start";
     CustomEventType["DragStop"] = "temba-drag-stop";
+    CustomEventType["DragExternal"] = "temba-drag-external";
+    CustomEventType["DragInternal"] = "temba-drag-internal";
     CustomEventType["Resized"] = "temba-resized";
     CustomEventType["DetailsChanged"] = "temba-details-changed";
     CustomEventType["Error"] = "temba-error";
@@ -48,6 +50,7 @@ export var CustomEventType;
     CustomEventType["DateRangeChanged"] = "temba-date-range-changed";
     CustomEventType["NodeDeleted"] = "temba-node-deleted";
     CustomEventType["ActionEditRequested"] = "temba-action-edit-requested";
+    CustomEventType["AddActionRequested"] = "temba-add-action-requested";
     CustomEventType["ActionSaved"] = "temba-action-saved";
     CustomEventType["ActionEditCanceled"] = "temba-action-edit-canceled";
     CustomEventType["NodeEditRequested"] = "temba-node-edit-requested";

package/out-tsc/src/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../src/interfaces.ts"],"names":[],"mappings":"AAwBA,MAAM,CAAN,IAAY,SAIX;AAJD,WAAY,SAAS;IACnB,mCAAsB,CAAA;IACtB,uCAA0B,CAAA;IAC1B,qCAAwB,CAAA;AAC1B,CAAC,EAJW,SAAS,KAAT,SAAS,QAIpB;AAED,MAAM,CAAN,IAAY,kBAIX;AAJD,WAAY,kBAAkB;IAC5B,sDAAgC,CAAA;IAChC,gEAA0C,CAAA;IAC1C,4DAAsC,CAAA;AACxC,CAAC,EAJW,kBAAkB,KAAlB,kBAAkB,QAI7B;AAED,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,6BAAa,CAAA;IACb,iCAAiB,CAAA;AACnB,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AA2ND,MAAM,CAAN,IAAY,eAqCX;AArCD,WAAY,eAAe;IACzB,0CAAuB,CAAA;IACvB,4CAAyB,CAAA;IACzB,8CAA2B,CAAA;IAC3B,yDAAsC,CAAA;IACtC,gDAA6B,CAAA;IAC7B,gDAA6B,CAAA;IAC7B,yDAAsC,CAAA;IACtC,uDAAoC,CAAA;IACpC,6DAA0C,CAAA;IAC1C,2DAAwC,CAAA;IACxC,2DAAwC,CAAA;IACxC,yDAAsC,CAAA;IACtC,qDAAkC,CAAA;IAClC,gDAA6B,CAAA;IAC7B,kDAA+B,CAAA;IAC/B,2CAAwB,CAAA;IACxB,uDAAoC,CAAA;IACpC,wCAAqB,CAAA;IACrB,uDAAoC,CAAA;IACpC,iDAA8B,CAAA;IAC9B,+CAA4B,CAAA;IAC5B,4CAAyB,CAAA;IACzB,2DAAwC,CAAA;IACxC,wCAAqB,CAAA;IACrB,gDAA6B,CAAA;IAC7B,0CAAuB,CAAA;IACvB,yDAAsC,CAAA;IACtC,wCAAqB,CAAA;IACrB,gEAA6C,CAAA;IAC7C,qDAAkC,CAAA;IAClC,sEAAmD,CAAA;IACnD,qDAAkC,CAAA;IAClC,oEAAiD,CAAA;IACjD,kEAA+C,CAAA;IAC/C,iDAA8B,CAAA;IAC9B,kEAA+C,CAAA;AACjD,CAAC,EArCW,eAAe,KAAf,eAAe,QAqC1B","sourcesContent":["export interface Workspace {\n  uuid: string;\n  name: string;\n  country: string;\n  languages: string[];\n  timezone: string;\n  date_style: DateStyle;\n  anon: boolean;\n}\n\nexport interface Language {\n  iso: string;\n  name: string;\n}\n\nexport interface Attachment {\n  uuid: string;\n  content_type: string;\n  url: string;\n  filename: string;\n  size: number;\n  error: string;\n}\n\nexport enum DateStyle {\n  DayFirst = 'day_first',\n  MonthFirst = 'month_first',\n  YearFirst = 'year_first'\n}\n\nexport enum ScheduledEventType {\n  CampaignEvent = 'campaign_event',\n  ScheduledBroadcast = 'scheduled_broadcast',\n  ScheduledTrigger = 'scheduled_trigger'\n}\n\nexport enum TicketStatus {\n  Open = 'open',\n  Closed = 'closed'\n}\n\nexport interface ScheduledEvent {\n  type: ScheduledEventType;\n  scheduled: string;\n  repeat_period: string;\n  campaign?: ObjectReference;\n  flow?: ObjectReference;\n  message?: string;\n}\n\nexport interface NamedUser extends User {\n  name: string;\n}\n\nexport interface User {\n  id?: number;\n  first_name?: string;\n  last_name?: string;\n  name?: string;\n  email?: string;\n  role?: string;\n  created_on?: string;\n  avatar?: string;\n}\n\nexport interface Ticket {\n  uuid: string;\n  subject: string;\n  body?: string;\n  closed_on: string;\n  opened_on: string;\n  status: string;\n  contact: ObjectReference;\n  topic: ObjectReference;\n  assignee?: { email: string; name: string; avatar?: string };\n}\n\nexport interface FlowResult {\n  key: string;\n  name: string;\n  categories: string[];\n  node_uuids: string[];\n}\n\nexport interface FlowDetails {\n  name: string;\n  results: FlowResult[];\n  modified_on: string;\n  runs: {\n    active: number;\n    completed: number;\n    expired: number;\n    interrupted: number;\n  };\n}\n\nexport interface Msg {\n  text: string;\n  status: string;\n  channel: ObjectReference;\n  quick_replies: string[];\n  urn: string;\n  direction: string;\n  type: string;\n  attachments: string[];\n}\n\nexport interface ObjectReference {\n  uuid: string;\n  name: string;\n}\n\nexport interface Shortcut {\n  uuid: string;\n  name: string;\n  text: string;\n  modified_on: string;\n}\n\nexport interface ContactField {\n  key: string;\n  label: string;\n  value_type: string;\n  featured: boolean;\n  priority: number;\n  agent_access: string;\n  type: string;\n  usages: { campaign_events: number; flows: number; groups: number };\n}\n\nexport interface ContactGroup {\n  uuid: string;\n  count: number;\n  name: string;\n  query?: string;\n  status: string;\n}\n\nexport interface URN {\n  scheme: string;\n  path: string;\n}\n\nexport interface Group {\n  name: string;\n  uuid: string;\n  is_dynamic?: boolean;\n}\n\nexport interface ContactNote {\n  text: string;\n  created_on: string;\n  created_by: NamedUser;\n}\n\nexport interface ContactTicket {\n  name: string;\n  uuid: string;\n  status: string;\n\n  contact: {\n    uuid: string;\n    name: string;\n    created_on: Date;\n    last_seen_on: Date;\n  };\n}\n\nexport interface Contact {\n  name: string;\n  uuid: string;\n  stopped: boolean;\n  blocked: boolean;\n  urns: string[];\n  language?: string;\n  fields: { [key: string]: string };\n  groups: Group[];\n  notes: ContactNote[];\n  modified_on: string;\n  created_on: string;\n  last_seen_on: string;\n  status: string;\n\n  ref?: string; // only returned for anon workspaces\n  flow?: ObjectReference;\n  last_msg?: Msg;\n  direction?: string;\n  ticket: {\n    uuid: string;\n    subject: string;\n    closed_on?: string;\n    last_activity_on: string;\n    assignee?: User;\n    topic?: ObjectReference;\n  };\n}\n\nexport interface FeatureProperties {\n  name: string;\n  osm_id: string;\n  level: number;\n  children?: FeatureProperties[];\n  has_children?: boolean;\n  aliases?: string;\n  parent_osm_id?: string;\n  id?: number;\n  path?: string;\n}\n\nexport interface Position {\n  top: number;\n  left: number;\n}\n\nexport interface FunctionExample {\n  template: string;\n  output: string;\n}\n\nexport interface CompletionOption {\n  name?: string;\n  summary: string;\n\n  // functions\n  signature?: string;\n  detail?: string;\n  examples?: FunctionExample[];\n}\n\nexport interface CompletionResult {\n  anchorPosition: Position;\n  query: string;\n  options: CompletionOption[];\n  currentFunction: CompletionOption;\n}\n\nexport interface CompletionProperty {\n  key: string;\n  help: string;\n  type: string;\n}\n\nexport interface CompletionType {\n  name: string;\n\n  key_source?: string;\n  property_template?: CompletionProperty;\n  properties?: CompletionProperty[];\n}\n\nexport interface CompletionSchema {\n  types: CompletionType[];\n  root: CompletionProperty[];\n  root_no_session: CompletionProperty[];\n}\n\nexport type KeyedAssets = { [assetType: string]: string[] };\n\nexport enum CustomEventType {\n  Loaded = 'temba-loaded',\n  Loading = 'temba-loading',\n  Canceled = 'temba-canceled',\n  CursorChanged = 'temba-cursor-changed',\n  Refreshed = 'temba-refreshed',\n  Selection = 'temba-selection',\n  ButtonClicked = 'temba-button-clicked',\n  DialogHidden = 'temba-dialog-hidden',\n  ScrollThreshold = 'temba-scroll-threshold',\n  ContentChanged = 'temba-content-changed',\n  ContextChanged = 'temba-context-changed',\n  FetchComplete = 'temba-fetch-complete',\n  MessageSent = 'temba-message-sent',\n  Submitted = 'temba-submitted',\n  Redirected = 'temba-redirected',\n  NoPath = 'temba-no-path',\n  StoreUpdated = 'temba-store-updated',\n  Ready = 'temba-ready',\n  OrderChanged = 'temba-order-changed',\n  DragStart = 'temba-drag-start',\n  DragStop = 'temba-drag-stop',\n  Resized = 'temba-resized',\n  DetailsChanged = 'temba-details-changed',\n  Error = 'temba-error',\n  Interrupt = 'temba-interrupt',\n  Opened = 'temba-opened',\n  TicketUpdated = 'temba-ticket-updated',\n  Moved = 'temba-moved',\n  DateRangeChanged = 'temba-date-range-changed',\n  NodeDeleted = 'temba-node-deleted',\n  ActionEditRequested = 'temba-action-edit-requested',\n  ActionSaved = 'temba-action-saved',\n  ActionEditCanceled = 'temba-action-edit-canceled',\n  NodeEditRequested = 'temba-node-edit-requested',\n  NodeSaved = 'temba-node-saved',\n  NodeEditCancelled = 'temba-node-edit-cancelled'\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../src/interfaces.ts"],"names":[],"mappings":"AAwBA,MAAM,CAAN,IAAY,SAIX;AAJD,WAAY,SAAS;IACnB,mCAAsB,CAAA;IACtB,uCAA0B,CAAA;IAC1B,qCAAwB,CAAA;AAC1B,CAAC,EAJW,SAAS,KAAT,SAAS,QAIpB;AAED,MAAM,CAAN,IAAY,kBAIX;AAJD,WAAY,kBAAkB;IAC5B,sDAAgC,CAAA;IAChC,gEAA0C,CAAA;IAC1C,4DAAsC,CAAA;AACxC,CAAC,EAJW,kBAAkB,KAAlB,kBAAkB,QAI7B;AAED,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,6BAAa,CAAA;IACb,iCAAiB,CAAA;AACnB,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AA2ND,MAAM,CAAN,IAAY,eAwCX;AAxCD,WAAY,eAAe;IACzB,0CAAuB,CAAA;IACvB,4CAAyB,CAAA;IACzB,8CAA2B,CAAA;IAC3B,yDAAsC,CAAA;IACtC,gDAA6B,CAAA;IAC7B,gDAA6B,CAAA;IAC7B,yDAAsC,CAAA;IACtC,uDAAoC,CAAA;IACpC,6DAA0C,CAAA;IAC1C,2DAAwC,CAAA;IACxC,2DAAwC,CAAA;IACxC,yDAAsC,CAAA;IACtC,qDAAkC,CAAA;IAClC,gDAA6B,CAAA;IAC7B,kDAA+B,CAAA;IAC/B,2CAAwB,CAAA;IACxB,uDAAoC,CAAA;IACpC,wCAAqB,CAAA;IACrB,uDAAoC,CAAA;IACpC,iDAA8B,CAAA;IAC9B,+CAA4B,CAAA;IAC5B,uDAAoC,CAAA;IACpC,uDAAoC,CAAA;IACpC,4CAAyB,CAAA;IACzB,2DAAwC,CAAA;IACxC,wCAAqB,CAAA;IACrB,gDAA6B,CAAA;IAC7B,0CAAuB,CAAA;IACvB,yDAAsC,CAAA;IACtC,wCAAqB,CAAA;IACrB,gEAA6C,CAAA;IAC7C,qDAAkC,CAAA;IAClC,sEAAmD,CAAA;IACnD,oEAAiD,CAAA;IACjD,qDAAkC,CAAA;IAClC,oEAAiD,CAAA;IACjD,kEAA+C,CAAA;IAC/C,iDAA8B,CAAA;IAC9B,kEAA+C,CAAA;AACjD,CAAC,EAxCW,eAAe,KAAf,eAAe,QAwC1B","sourcesContent":["export interface Workspace {\n  uuid: string;\n  name: string;\n  country: string;\n  languages: string[];\n  timezone: string;\n  date_style: DateStyle;\n  anon: boolean;\n}\n\nexport interface Language {\n  iso: string;\n  name: string;\n}\n\nexport interface Attachment {\n  uuid: string;\n  content_type: string;\n  url: string;\n  filename: string;\n  size: number;\n  error: string;\n}\n\nexport enum DateStyle {\n  DayFirst = 'day_first',\n  MonthFirst = 'month_first',\n  YearFirst = 'year_first'\n}\n\nexport enum ScheduledEventType {\n  CampaignEvent = 'campaign_event',\n  ScheduledBroadcast = 'scheduled_broadcast',\n  ScheduledTrigger = 'scheduled_trigger'\n}\n\nexport enum TicketStatus {\n  Open = 'open',\n  Closed = 'closed'\n}\n\nexport interface ScheduledEvent {\n  type: ScheduledEventType;\n  scheduled: string;\n  repeat_period: string;\n  campaign?: ObjectReference;\n  flow?: ObjectReference;\n  message?: string;\n}\n\nexport interface NamedUser extends User {\n  name: string;\n}\n\nexport interface User {\n  id?: number;\n  first_name?: string;\n  last_name?: string;\n  name?: string;\n  email?: string;\n  role?: string;\n  created_on?: string;\n  avatar?: string;\n}\n\nexport interface Ticket {\n  uuid: string;\n  subject: string;\n  body?: string;\n  closed_on: string;\n  opened_on: string;\n  status: string;\n  contact: ObjectReference;\n  topic: ObjectReference;\n  assignee?: { email: string; name: string; avatar?: string };\n}\n\nexport interface FlowResult {\n  key: string;\n  name: string;\n  categories: string[];\n  node_uuids: string[];\n}\n\nexport interface FlowDetails {\n  name: string;\n  results: FlowResult[];\n  modified_on: string;\n  runs: {\n    active: number;\n    completed: number;\n    expired: number;\n    interrupted: number;\n  };\n}\n\nexport interface Msg {\n  text: string;\n  status: string;\n  channel: ObjectReference;\n  quick_replies: string[];\n  urn: string;\n  direction: string;\n  type: string;\n  attachments: string[];\n}\n\nexport interface ObjectReference {\n  uuid: string;\n  name: string;\n}\n\nexport interface Shortcut {\n  uuid: string;\n  name: string;\n  text: string;\n  modified_on: string;\n}\n\nexport interface ContactField {\n  key: string;\n  label: string;\n  value_type: string;\n  featured: boolean;\n  priority: number;\n  agent_access: string;\n  type: string;\n  usages: { campaign_events: number; flows: number; groups: number };\n}\n\nexport interface ContactGroup {\n  uuid: string;\n  count: number;\n  name: string;\n  query?: string;\n  status: string;\n}\n\nexport interface URN {\n  scheme: string;\n  path: string;\n}\n\nexport interface Group {\n  name: string;\n  uuid: string;\n  is_dynamic?: boolean;\n}\n\nexport interface ContactNote {\n  text: string;\n  created_on: string;\n  created_by: NamedUser;\n}\n\nexport interface ContactTicket {\n  name: string;\n  uuid: string;\n  status: string;\n\n  contact: {\n    uuid: string;\n    name: string;\n    created_on: Date;\n    last_seen_on: Date;\n  };\n}\n\nexport interface Contact {\n  name: string;\n  uuid: string;\n  stopped: boolean;\n  blocked: boolean;\n  urns: string[];\n  language?: string;\n  fields: { [key: string]: string };\n  groups: Group[];\n  notes: ContactNote[];\n  modified_on: string;\n  created_on: string;\n  last_seen_on: string;\n  status: string;\n\n  ref?: string; // only returned for anon workspaces\n  flow?: ObjectReference;\n  last_msg?: Msg;\n  direction?: string;\n  ticket: {\n    uuid: string;\n    subject: string;\n    closed_on?: string;\n    last_activity_on: string;\n    assignee?: User;\n    topic?: ObjectReference;\n  };\n}\n\nexport interface FeatureProperties {\n  name: string;\n  osm_id: string;\n  level: number;\n  children?: FeatureProperties[];\n  has_children?: boolean;\n  aliases?: string;\n  parent_osm_id?: string;\n  id?: number;\n  path?: string;\n}\n\nexport interface Position {\n  top: number;\n  left: number;\n}\n\nexport interface FunctionExample {\n  template: string;\n  output: string;\n}\n\nexport interface CompletionOption {\n  name?: string;\n  summary: string;\n\n  // functions\n  signature?: string;\n  detail?: string;\n  examples?: FunctionExample[];\n}\n\nexport interface CompletionResult {\n  anchorPosition: Position;\n  query: string;\n  options: CompletionOption[];\n  currentFunction: CompletionOption;\n}\n\nexport interface CompletionProperty {\n  key: string;\n  help: string;\n  type: string;\n}\n\nexport interface CompletionType {\n  name: string;\n\n  key_source?: string;\n  property_template?: CompletionProperty;\n  properties?: CompletionProperty[];\n}\n\nexport interface CompletionSchema {\n  types: CompletionType[];\n  root: CompletionProperty[];\n  root_no_session: CompletionProperty[];\n}\n\nexport type KeyedAssets = { [assetType: string]: string[] };\n\nexport enum CustomEventType {\n  Loaded = 'temba-loaded',\n  Loading = 'temba-loading',\n  Canceled = 'temba-canceled',\n  CursorChanged = 'temba-cursor-changed',\n  Refreshed = 'temba-refreshed',\n  Selection = 'temba-selection',\n  ButtonClicked = 'temba-button-clicked',\n  DialogHidden = 'temba-dialog-hidden',\n  ScrollThreshold = 'temba-scroll-threshold',\n  ContentChanged = 'temba-content-changed',\n  ContextChanged = 'temba-context-changed',\n  FetchComplete = 'temba-fetch-complete',\n  MessageSent = 'temba-message-sent',\n  Submitted = 'temba-submitted',\n  Redirected = 'temba-redirected',\n  NoPath = 'temba-no-path',\n  StoreUpdated = 'temba-store-updated',\n  Ready = 'temba-ready',\n  OrderChanged = 'temba-order-changed',\n  DragStart = 'temba-drag-start',\n  DragStop = 'temba-drag-stop',\n  DragExternal = 'temba-drag-external',\n  DragInternal = 'temba-drag-internal',\n  Resized = 'temba-resized',\n  DetailsChanged = 'temba-details-changed',\n  Error = 'temba-error',\n  Interrupt = 'temba-interrupt',\n  Opened = 'temba-opened',\n  TicketUpdated = 'temba-ticket-updated',\n  Moved = 'temba-moved',\n  DateRangeChanged = 'temba-date-range-changed',\n  NodeDeleted = 'temba-node-deleted',\n  ActionEditRequested = 'temba-action-edit-requested',\n  AddActionRequested = 'temba-add-action-requested',\n  ActionSaved = 'temba-action-saved',\n  ActionEditCanceled = 'temba-action-edit-canceled',\n  NodeEditRequested = 'temba-node-edit-requested',\n  NodeSaved = 'temba-node-saved',\n  NodeEditCancelled = 'temba-node-edit-cancelled'\n}\n"]}

package/out-tsc/src/list/SortableList.js

@@ -8,6 +8,8 @@ import { RapidElement } from '../RapidElement';
  */
 // how far we have to drag before it starts
 const DRAG_THRESHOLD = 2;
+// padding around container for external drag detection
+const EXTERNAL_DRAG_PADDING = 50;
 export class SortableList extends RapidElement {
     static get styles() {
         return css `
@@ -51,6 +53,7 @@ export class SortableList extends RapidElement {
         super();
         this.horizontal = false;
         this.gap = '0em';
+        this.externalDrag = false;
         this.ghostElement = null;
         this.downEle = null;
         this.originalElementRect = null; // Store original dimensions
@@ -64,6 +67,7 @@ export class SortableList extends RapidElement {
         this.dropPlaceholder = null;
         this.pendingDropIndex = -1;
         this.pendingTargetElement = null;
+        this.isExternalDrag = false;
         this.clickBlocker = null;
         this.handleMouseMove = this.handleMouseMove.bind(this);
         this.handleMouseUp = this.handleMouseUp.bind(this);
@@ -77,6 +81,17 @@ export class SortableList extends RapidElement {
             !ele.classList.contains('drop-placeholder'));
         return eles;
     }
+    isMouseOverContainer(mouseX, mouseY) {
+        const container = this.shadowRoot.querySelector('.container');
+        if (!container)
+            return false;
+        const rect = container.getBoundingClientRect();
+        // add some padding to make it easier to stay within the container
+        return (mouseX >= rect.left - EXTERNAL_DRAG_PADDING &&
+            mouseX <= rect.right + EXTERNAL_DRAG_PADDING &&
+            mouseY >= rect.top - EXTERNAL_DRAG_PADDING &&
+            mouseY <= rect.bottom + EXTERNAL_DRAG_PADDING);
+    }
     cloneElementWithState(element) {
         // First create a basic clone
         const clone = element.cloneNode(true);
@@ -241,6 +256,8 @@ export class SortableList extends RapidElement {
             this.dropPlaceholder.style.minHeight = rect.height + 'px';
             this.dropPlaceholder.style.borderRadius = 'var(--curvature)';
             this.dropPlaceholder.style.flexShrink = '0';
+            this.dropPlaceholder.style.background = '#f3f4f6';
+            this.dropPlaceholder.style.border = '2px dashed #d1d5db';
         }
         // Insert the placeholder in the correct position in the DOM
         if (insertAfter) {
@@ -268,10 +285,8 @@ export class SortableList extends RapidElement {
         this.dropPlaceholder.style.minHeight = rect.height + 'px';
         this.dropPlaceholder.style.borderRadius = 'var(--curvature)';
         this.dropPlaceholder.style.flexShrink = '0';
-        this.dropPlaceholder.style.background =
-            'rgba(var(--color-primary-rgb), 0.1)';
-        this.dropPlaceholder.style.border =
-            '2px dashed rgba(var(--color-primary-rgb), 0.3)';
+        this.dropPlaceholder.style.background = '#f3f4f6';
+        this.dropPlaceholder.style.border = '2px dashed #d1d5db';
         // Insert the placeholder right after the hidden original element
         this.downEle.insertAdjacentElement('afterend', this.dropPlaceholder);
     }
@@ -350,38 +365,79 @@ export class SortableList extends RapidElement {
         if (this.ghostElement) {
             this.ghostElement.style.left = event.clientX - this.xOffset + 'px';
             this.ghostElement.style.top = event.clientY - this.yOffset + 'px';
-            const targetInfo = this.getDropTargetInfo(event.clientX, event.clientY);
-            if (targetInfo) {
-                const { element: targetElement, insertAfter } = targetInfo;
-                const targetIdx = this.getRowIndex(targetElement.id);
-                // Use the original drag index we captured before moving the element
-                const originalDragIdx = this.originalDragIndex;
-                // Calculate where the dragged element will end up in the final array
-                // targetIdx is the position of target element in current DOM (missing dragged element)
-                let dropIdx;
-                if (targetIdx < originalDragIdx) {
-                    // Target is before the original drag position - moving backward
-                    dropIdx = insertAfter ? targetIdx + 1 : targetIdx;
+            // check if the drag is over the container (only if external dragging is allowed)
+            const isOverContainer = this.externalDrag
+                ? this.isMouseOverContainer(event.clientX, event.clientY)
+                : true; // always consider "over container" if external drag is disabled
+            // detect transition between internal and external drag (only if allowed)
+            if (this.externalDrag && !isOverContainer && !this.isExternalDrag) {
+                // transitioning to external drag
+                this.isExternalDrag = true;
+                this.hideDropPlaceholder();
+                // hide the ghost element when dragging externally
+                if (this.ghostElement) {
+                    this.ghostElement.style.display = 'none';
+                }
+                this.fireCustomEvent(CustomEventType.DragExternal, {
+                    id: this.downEle.id,
+                    mouseX: event.clientX,
+                    mouseY: event.clientY
+                });
+            }
+            else if (this.externalDrag && isOverContainer && this.isExternalDrag) {
+                // transitioning back to internal drag
+                this.isExternalDrag = false;
+                // show the ghost element again when dragging internally
+                if (this.ghostElement) {
+                    this.ghostElement.style.display = 'block';
+                }
+                this.fireCustomEvent(CustomEventType.DragInternal, {
+                    id: this.downEle.id
+                });
+            }
+            // only show drop placeholder and calculate drop position if internal drag
+            if (!this.isExternalDrag) {
+                const targetInfo = this.getDropTargetInfo(event.clientX, event.clientY);
+                if (targetInfo) {
+                    const { element: targetElement, insertAfter } = targetInfo;
+                    const targetIdx = this.getRowIndex(targetElement.id);
+                    // Use the original drag index we captured before moving the element
+                    const originalDragIdx = this.originalDragIndex;
+                    // Calculate where the dragged element will end up in the final array
+                    // targetIdx is the position of target element in current DOM (missing dragged element)
+                    let dropIdx;
+                    if (targetIdx < originalDragIdx) {
+                        // Target is before the original drag position - moving backward
+                        dropIdx = insertAfter ? targetIdx + 1 : targetIdx;
+                    }
+                    else {
+                        // Target was originally after the drag position - moving forward
+                        // When moving the dragged element forward (i.e., to a higher index), the targetIdx is based on the current DOM,
+                        // which no longer includes the dragged element. This means all elements after the original position have shifted left by one,
+                        // so we need to subtract 1 from targetIdx to get the correct insertion index. If inserting after the target, we use targetIdx as is.
+                        dropIdx = insertAfter ? targetIdx : targetIdx - 1;
+                    }
+                    // Store pending drop info but don't fire event yet
+                    this.dropTargetId = targetElement.id;
+                    this.pendingDropIndex = dropIdx;
+                    this.pendingTargetElement = targetElement;
+                    // Show drop placeholder
+                    this.showDropPlaceholder(targetElement, insertAfter);
                 }
                 else {
-                    // Target was originally after the drag position - moving forward
-                    // When moving the dragged element forward (i.e., to a higher index), the targetIdx is based on the current DOM,
-                    // which no longer includes the dragged element. This means all elements after the original position have shifted left by one,
-                    // so we need to subtract 1 from targetIdx to get the correct insertion index. If inserting after the target, we use targetIdx as is.
-                    dropIdx = insertAfter ? targetIdx : targetIdx - 1;
+                    this.hideDropPlaceholder();
+                    this.dropTargetId = null;
+                    this.pendingDropIndex = -1;
+                    this.pendingTargetElement = null;
                 }
-                // Store pending drop info but don't fire event yet
-                this.dropTargetId = targetElement.id;
-                this.pendingDropIndex = dropIdx;
-                this.pendingTargetElement = targetElement;
-                // Show drop placeholder
-                this.showDropPlaceholder(targetElement, insertAfter);
             }
             else {
-                this.hideDropPlaceholder();
-                this.dropTargetId = null;
-                this.pendingDropIndex = -1;
-                this.pendingTargetElement = null;
+                // external drag - continue firing external drag events with updated position
+                this.fireCustomEvent(CustomEventType.DragExternal, {
+                    id: this.downEle.id,
+                    mouseX: event.clientX,
+                    mouseY: event.clientY
+                });
             }
         }
     }
@@ -400,7 +456,9 @@ export class SortableList extends RapidElement {
             // Clear visual effects before firing events
             this.hideDropPlaceholder();
             // fire the order changed event only when dropped if we have a valid drop position
-            if (this.pendingDropIndex >= 0 && this.pendingTargetElement) {
+            if (!this.isExternalDrag &&
+                this.pendingDropIndex >= 0 &&
+                this.pendingTargetElement) {
                 // Use the original drag index we captured before hiding the element
                 const originalDragIdx = this.originalDragIndex;
                 // use swap-based logic - report which indexes need to be swapped
@@ -414,7 +472,10 @@ export class SortableList extends RapidElement {
                 }
             }
             this.fireCustomEvent(CustomEventType.DragStop, {
-                id: this.draggingId
+                id: this.draggingId,
+                isExternal: this.isExternalDrag,
+                mouseX: evt.clientX,
+                mouseY: evt.clientY
             });
             this.draggingId = null;
             this.dropTargetId = null;
@@ -423,6 +484,7 @@ export class SortableList extends RapidElement {
             this.originalDragIndex = -1;
             this.pendingDropIndex = -1;
             this.pendingTargetElement = null;
+            this.isExternalDrag = false;
             // Clear the ghost reference since we removed it
             this.ghostElement = null;
             this.hideDropPlaceholder();
@@ -467,6 +529,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], SortableList.prototype, "gap", void 0);
+__decorate([
+    property({ type: Boolean })
+], SortableList.prototype, "externalDrag", void 0);
 __decorate([
     property({ attribute: false })
 ], SortableList.prototype, "prepareGhost", void 0);