@nyaruka/temba-components 0.139.0 → 0.140.0

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

@@ -1 +1 @@
-{"version":3,"file":"ArrayEditor.js","sourceRoot":"","sources":["../../../src/form/ArrayEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { FieldConfig } from '../flow/types';\nimport { BaseListEditor, ListItem } from './BaseListEditor';\nimport { FieldRenderer } from './FieldRenderer';\nimport '../list/SortableList';\nimport { Icon } from '../Icons';\n\n@customElement('temba-array-editor')\nexport class TembaArrayEditor extends BaseListEditor<ListItem> {\n  @property({ type: Object })\n  itemConfig: Record<string, FieldConfig> = {};\n\n  @property({ type: String })\n  itemLabel = 'Item';\n\n  @property({ type: Function })\n  onItemChange?: (\n    itemIndex: number,\n    field: string,\n    value: any,\n    allItems: any[]\n  ) => any[];\n\n  @property({ type: Function })\n  isEmptyItemFn?: (item: any) => boolean;\n\n  @property({ type: Boolean })\n  sortable = false;\n\n  @property({ type: Boolean })\n  maintainEmptyItem = true; // Enable by default for better UX\n\n  // Focus preservation properties\n  private focusInfo: {\n    itemIndex: number;\n    fieldName: string;\n    selectionStart?: number;\n    selectionEnd?: number;\n  } | null = null;\n\n  constructor() {\n    super();\n    this._items = [];\n  }\n\n  // External API\n  @property({ type: Array })\n  get value(): any[] {\n    return [...this._items];\n  }\n\n  set value(newValue: any[]) {\n    this._items = newValue || [];\n    this.requestUpdate();\n  }\n\n  // Implement abstract methods\n  isEmptyItem(item: ListItem): boolean {\n    // Use configurable function if provided\n    if (this.isEmptyItemFn) {\n      return this.isEmptyItemFn(item);\n    }\n\n    // Default behavior: check if all values are empty\n    const values = Object.values(item);\n    if (values.length === 0) {\n      return true;\n    }\n\n    return values.every(\n      (value) => value === undefined || value === null || value === ''\n    );\n  }\n\n  // Override cleanItems to be more permissive for form data\n  protected cleanItems(items: ListItem[]): any {\n    // For runtime attachments, keep items that have at least one non-empty field\n    return items.filter((item) => {\n      const values = Object.values(item);\n      return (\n        values.length > 0 &&\n        values.some(\n          (value) => value !== undefined && value !== null && value !== ''\n        )\n      );\n    });\n  }\n\n  // Capture focus information before update\n  private captureFocus(): void {\n    const activeElement = this.shadowRoot?.activeElement as HTMLElement;\n\n    // Also try document.activeElement as a fallback\n    const globalActive = document.activeElement as HTMLElement;\n    let targetElement = activeElement || globalActive;\n\n    // If active element is within this component's shadow root, use it\n    if (globalActive && this.shadowRoot?.contains(globalActive)) {\n      targetElement = globalActive;\n    }\n\n    if (!targetElement) {\n      this.focusInfo = null;\n      return;\n    }\n\n    // Find the array item container by traversing up the DOM\n    let currentElement = targetElement;\n    let arrayItemElement: HTMLElement | null = null;\n\n    // Traverse up through shadow DOM boundaries\n    while (currentElement) {\n      if (currentElement.classList?.contains('array-item')) {\n        arrayItemElement = currentElement;\n        break;\n      }\n\n      // Move up to parent, or cross shadow boundaries\n      if (currentElement.parentElement) {\n        currentElement = currentElement.parentElement;\n      } else if (\n        currentElement.parentNode &&\n        (currentElement.parentNode as any).host\n      ) {\n        // Cross shadow boundary\n        currentElement = (currentElement.parentNode as any).host;\n      } else {\n        break;\n      }\n    }\n\n    if (!arrayItemElement) {\n      this.focusInfo = null;\n      return;\n    }\n\n    // Find the item index by looking at the item ID\n    const itemIdMatch = arrayItemElement.id?.match(/array-item-(\\d+)/);\n    if (!itemIdMatch) {\n      this.focusInfo = null;\n      return;\n    }\n\n    const itemIndex = parseInt(itemIdMatch[1], 10);\n\n    // Determine the field name by examining the input element and its containers\n    let fieldName = '';\n\n    // First, check if it's a temba component with a name attribute\n    if (targetElement.tagName?.toLowerCase().startsWith('temba-')) {\n      fieldName =\n        (targetElement as any).name || targetElement.getAttribute('name') || '';\n    }\n\n    // If not found, check regular HTML elements\n    if (\n      !fieldName &&\n      targetElement.hasAttribute &&\n      targetElement.hasAttribute('name')\n    ) {\n      fieldName = targetElement.getAttribute('name') || '';\n    }\n\n    // If still not found, look for data-field-name in parent containers\n    if (!fieldName) {\n      let searchElement = targetElement;\n      while (searchElement && searchElement !== arrayItemElement) {\n        if (\n          searchElement.hasAttribute &&\n          searchElement.hasAttribute('data-field-name')\n        ) {\n          fieldName = searchElement.getAttribute('data-field-name') || '';\n          break;\n        }\n        searchElement = searchElement.parentElement;\n      }\n    }\n\n    if (!fieldName) {\n      this.focusInfo = null;\n      return;\n    }\n\n    // Capture selection for text inputs (try the actual input element inside temba components)\n    let inputForSelection = targetElement;\n    if (targetElement.tagName?.toLowerCase().startsWith('temba-')) {\n      // Look for the actual input element inside the temba component\n      const innerInput =\n        targetElement.shadowRoot?.querySelector('input, textarea') ||\n        targetElement.querySelector('input, textarea');\n      if (innerInput) {\n        inputForSelection = innerInput as HTMLElement;\n      }\n    }\n\n    const selectionStart = (inputForSelection as any).selectionStart;\n    const selectionEnd = (inputForSelection as any).selectionEnd;\n\n    this.focusInfo = {\n      itemIndex,\n      fieldName,\n      selectionStart,\n      selectionEnd\n    };\n  }\n\n  // Restore focus after update\n  private restoreFocus(): void {\n    if (!this.focusInfo) {\n      return;\n    }\n\n    const { itemIndex, fieldName, selectionStart, selectionEnd } =\n      this.focusInfo;\n\n    // Find the target element by array item index\n    const arrayItemId = `array-item-${itemIndex}`;\n    const arrayItemElement = this.shadowRoot?.getElementById(arrayItemId);\n\n    if (!arrayItemElement) {\n      // If the exact item doesn't exist (e.g., due to reordering), try to find by field name\n      const allItems = this.shadowRoot?.querySelectorAll('.array-item');\n      if (allItems && allItems.length > itemIndex) {\n        const fallbackItem = allItems[itemIndex];\n        if (fallbackItem) {\n          this.attemptFocusRestore(\n            fallbackItem as HTMLElement,\n            fieldName,\n            selectionStart,\n            selectionEnd\n          );\n        }\n      }\n      this.focusInfo = null;\n      return;\n    }\n\n    this.attemptFocusRestore(\n      arrayItemElement,\n      fieldName,\n      selectionStart,\n      selectionEnd\n    );\n    this.focusInfo = null;\n  }\n\n  private attemptFocusRestore(\n    container: HTMLElement,\n    fieldName: string,\n    selectionStart?: number,\n    selectionEnd?: number\n  ): void {\n    // Look for the field container first\n    const fieldContainer = container.querySelector(\n      `[data-field-name=\"${fieldName}\"]`\n    );\n\n    let targetElement: HTMLElement | null = null;\n\n    if (fieldContainer) {\n      // Look for temba components or input elements within the field container\n      targetElement = fieldContainer.querySelector(\n        'temba-textinput, temba-completion, input, textarea'\n      ) as HTMLElement;\n    }\n\n    // Fallback: search entire container\n    if (!targetElement) {\n      const selectors = [\n        `temba-textinput[name=\"${fieldName}\"]`,\n        `temba-completion[name=\"${fieldName}\"]`,\n        `input[name=\"${fieldName}\"]`,\n        `textarea[name=\"${fieldName}\"]`,\n        `[name=\"${fieldName}\"]`\n      ];\n\n      for (const selector of selectors) {\n        targetElement = container.querySelector(selector) as HTMLElement;\n        if (targetElement) break;\n      }\n    }\n\n    if (targetElement) {\n      // Use multiple animation frames to ensure DOM is fully settled\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          try {\n            targetElement.focus();\n\n            // Restore selection if it's a text input\n            if (selectionStart !== undefined && selectionEnd !== undefined) {\n              // For temba components, we need to focus the inner input\n              let inputForSelection = targetElement;\n              if (targetElement.tagName?.toLowerCase().startsWith('temba-')) {\n                const innerInput =\n                  targetElement.shadowRoot?.querySelector('input, textarea') ||\n                  targetElement.querySelector('input, textarea');\n                if (innerInput && 'setSelectionRange' in innerInput) {\n                  inputForSelection = innerInput as any;\n                }\n              }\n\n              if ('setSelectionRange' in inputForSelection) {\n                (inputForSelection as any).setSelectionRange(\n                  selectionStart,\n                  selectionEnd\n                );\n              }\n            }\n          } catch (error) {\n            // Ignore focus errors - element might not be focusable\n            // Focus restoration failed, silently continue\n          }\n        });\n      });\n    }\n  }\n\n  createEmptyItem(): ListItem {\n    return {};\n  }\n\n  protected handleFieldChange(\n    itemIndex: number,\n    fieldName: string,\n    newValue: any\n  ) {\n    let updatedItems: any[];\n\n    if (this.onItemChange) {\n      updatedItems = this.onItemChange(\n        itemIndex,\n        fieldName,\n        newValue,\n        this._items\n      );\n    } else {\n      updatedItems = [...this._items];\n      updatedItems[itemIndex] = {\n        ...updatedItems[itemIndex],\n        [fieldName]: newValue\n      };\n    }\n\n    this.updateValue(updatedItems);\n  }\n\n  // Override Lit's update lifecycle methods for focus preservation\n  protected willUpdate(changedProperties: Map<string, any>): void {\n    super.willUpdate(changedProperties);\n\n    // Capture focus before update if items are changing\n    if (changedProperties.has('_items') || changedProperties.has('value')) {\n      this.captureFocus();\n    }\n  }\n\n  updated(changedProperties: Map<string, any>): void {\n    super.updated(changedProperties);\n\n    // Restore focus after update if items changed\n    if (changedProperties.has('_items') || changedProperties.has('value')) {\n      this.restoreFocus();\n    }\n  }\n\n  private handleOrderChanged(event: CustomEvent): void {\n    const detail = event.detail;\n\n    // Handle swap-based logic from SortableList\n    if (detail.swap && Array.isArray(detail.swap) && detail.swap.length === 2) {\n      const [fromIdx, toIdx] = detail.swap;\n\n      // Only reorder if the indexes are different and valid\n      if (\n        fromIdx !== toIdx &&\n        fromIdx >= 0 &&\n        toIdx >= 0 &&\n        fromIdx < this._items.length &&\n        toIdx < this._items.length\n      ) {\n        const updatedItems = [...this._items];\n        // Move the item using splice operations\n        const movedItem = updatedItems.splice(fromIdx, 1)[0];\n        updatedItems.splice(toIdx, 0, movedItem);\n        this.updateValue(updatedItems);\n      }\n    }\n  }\n\n  renderWidget(): TemplateResult {\n    const items = this.displayItems;\n\n    const itemsContent = items.map((item, index) => {\n      const renderedItem = this.renderItem(item, index);\n\n      if (this.sortable && !this.isEmptyItem(item)) {\n        // Wrap non-empty items with sortable class and unique ID for drag-and-drop\n        return html`\n          <div class=\"sortable\" id=\"array-item-${index}\">${renderedItem}</div>\n        `;\n      } else {\n        // Non-sortable items or empty items don't get the sortable wrapper\n        return renderedItem;\n      }\n    });\n\n    if (this.sortable) {\n      return html`\n        <div class=${this.getContainerClass()}>\n          <temba-sortable-list\n            dragHandle=\"drag-handle\"\n            gap=\"0.4em\"\n            @temba-order-changed=${this.handleOrderChanged}\n            style=\"display: grid; grid-template-columns: 1fr; gap: 8px;\"\n          >\n            ${itemsContent}\n          </temba-sortable-list>\n          ${this.shouldShowAddButton() ? this.renderAddButton() : ''}\n        </div>\n      `;\n    } else {\n      // Non-sortable rendering (original behavior)\n      return html`\n        <div class=${this.getContainerClass()}>\n          <div\n            class=\"list-items\"\n            style=\"display: grid; grid-template-columns: 1fr; gap: 8px;\"\n          >\n            ${itemsContent}\n          </div>\n          ${this.shouldShowAddButton() ? this.renderAddButton() : ''}\n        </div>\n      `;\n    }\n  }\n\n  private computeFieldValue(\n    itemIndex: number,\n    fieldName: string,\n    config: FieldConfig\n  ): any {\n    const item = this._items[itemIndex] || {};\n    const currentValue = item[fieldName];\n\n    if (config.computeValue) {\n      return config.computeValue(item, currentValue);\n    }\n\n    // For select fields, ensure we return the right type\n    /*if (config.type === 'select') {\n      console.log('computeFieldValue select', currentValue, config);\n      const selectConfig = config as SelectFieldConfig;\n      if (currentValue === undefined || currentValue === null) {\n        return selectConfig.multi ? [] : '';\n      }\n    }*/\n\n    return currentValue;\n  }\n\n  private renderArrayField(\n    itemIndex: number,\n    fieldName: string,\n    config: FieldConfig\n  ): TemplateResult {\n    const computedValue = this.computeFieldValue(itemIndex, fieldName, config);\n\n    // Extract flavor from select config if available\n    const flavor =\n      config.type === 'select' ? (config as any).flavor || 'small' : 'small';\n\n    // Build container style with width/maxWidth if specified\n    let containerStyle = '';\n    if (config.width) {\n      containerStyle = `width: ${config.width};`;\n    } else if (config.maxWidth) {\n      containerStyle = `max-width: ${config.maxWidth};`;\n    }\n\n    // Use FieldRenderer for consistent field rendering\n    const fieldContent = FieldRenderer.renderField(\n      fieldName,\n      config,\n      computedValue,\n      {\n        showLabel: false, // ArrayEditor doesn't show labels for individual fields\n        flavor: flavor,\n        extraClasses: 'form-control',\n        onChange: (e: Event) => {\n          let value: any;\n          const target = e.target as any;\n\n          // Handle different field types and their change events\n          if (config.type === 'select') {\n            // Use consistent temba-select value normalization\n            value = target.values;\n          } else {\n            // For other field types, use the target value directly\n            value = target.value;\n          }\n\n          this.handleFieldChange(itemIndex, fieldName, value);\n        }\n      }\n    );\n\n    // Wrap in container with style if maxWidth is specified\n    if (containerStyle) {\n      return html`<div style=\"${containerStyle}\">${fieldContent}</div>`;\n    }\n\n    return fieldContent;\n  }\n\n  renderItem(item: ListItem, index: number): TemplateResult {\n    const canRemove = this.canRemoveItem(index);\n\n    // Render fields and track if any value fields are visible\n    const fieldElements: TemplateResult[] = [];\n    let hasVisibleValueField = false;\n\n    Object.entries(this.itemConfig).forEach(([fieldName, config]) => {\n      // Check visibility condition\n      let isVisible = true;\n      if (config.conditions?.visible) {\n        try {\n          const currentItem = this._items[index] || {};\n          isVisible = config.conditions.visible(currentItem);\n        } catch (error) {\n          console.error(`Error checking visibility for ${fieldName}:`, error);\n        }\n      }\n\n      if (isVisible) {\n        // Check if this is a value field (text input without fixed sizing)\n        const isValueField =\n          !config.width && !config.maxWidth && config.type === 'text';\n        if (isValueField) {\n          hasVisibleValueField = true;\n        }\n\n        fieldElements.push(html`\n          <div\n            data-field-name=\"${fieldName}\"\n            style=\"${config.width || config.maxWidth || config.type === 'select'\n              ? 'flex:none'\n              : 'flex:1'}\"\n          >\n            ${this.renderArrayField(index, fieldName, config)}\n          </div>\n        `);\n      }\n    });\n\n    // If no value fields are visible, add a spacer to maintain alignment\n    if (!hasVisibleValueField) {\n      // Insert spacer after operator (first field) and before category (last field)\n      fieldElements.splice(\n        -1,\n        0,\n        html`<div class=\"field field-flex spacer\" style=\"flex-grow:1\"></div>`\n      );\n    }\n\n    return html`\n      <div class=\"array-item\" id=\"array-item-${index}\">\n        <div\n          class=\"item-fields  ${canRemove ? '' : 'removable'}\"\n          style=\"display: flex; gap: 12px; align-items: center\"\n        >\n          ${this.sortable\n            ? html`<temba-icon\n                name=${Icon.sort}\n                style=\"margin-right: -6px;\"\n                class=\"drag-handle\"\n              ></temba-icon>`\n            : null}\n          ${fieldElements}\n          <button\n            @click=${canRemove ? () => this.removeItem(index) : undefined}\n            class=\"remove-btn\"\n            style=\"\n              padding: 4px;\n              border: 1px solid #ccc;\n              border-radius: 4px;\n              background: white;\n              cursor: pointer;\n              background: #fefefe;\n              color: #999;\n              font-size: 14px;\n            \"\n            ?disabled=${!canRemove}\n          >\n            <temba-icon name=\"x\"></temba-icon>\n          </button>\n        </div>\n      </div>\n    `;\n  }\n\n  protected getContainerClass(): string {\n    return 'array-editor';\n  }\n\n  static get styles() {\n    return css`\n      ${super.styles}\n\n      .item-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n      }\n\n      .item-title {\n        font-weight: 600;\n        color: #333;\n      }\n\n      .field {\n        /* Base field styles */\n      }\n\n      .spacer {\n        /* Empty spacer to maintain layout alignment */\n      }\n\n      .add-btn,\n      .remove-btn {\n        padding: 4px;\n        border: 1px solid #ccc;\n        border-radius: 4px;\n        background: white;\n        cursor: pointer;\n        font-size: 14px;\n      }\n\n      .add-btn:hover,\n      .remove-btn:hover {\n        background: #f8f8f8;\n      }\n\n      .remove-btn {\n        background: #fefefe;\n        color: #999;\n      }\n\n      .removable .remove-btn {\n        visibility: hidden;\n        cursor: default;\n      }\n\n      .removable .drag-handle {\n        visibility: hidden;\n        cursor: default;\n      }\n\n      .drag-handle {\n        cursor: grab;\n        color: #ccc;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ArrayEditor.js","sourceRoot":"","sources":["../../../src/form/ArrayEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { FieldConfig } from '../flow/types';\nimport { BaseListEditor, ListItem } from './BaseListEditor';\nimport { FieldRenderer } from './FieldRenderer';\nimport '../list/SortableList';\nimport { Icon } from '../Icons';\n\n@customElement('temba-array-editor')\nexport class TembaArrayEditor extends BaseListEditor<ListItem> {\n  @property({ type: Object })\n  itemConfig: Record<string, FieldConfig> = {};\n\n  @property({ type: String })\n  itemLabel = 'Item';\n\n  @property({ type: Function })\n  onItemChange?: (\n    itemIndex: number,\n    field: string,\n    value: any,\n    allItems: any[]\n  ) => any[];\n\n  @property({ type: Function })\n  isEmptyItemFn?: (item: any) => boolean;\n\n  @property({ type: Boolean })\n  sortable = false;\n\n  @property({ type: Boolean })\n  maintainEmptyItem = true; // Enable by default for better UX\n\n  // Focus preservation properties\n  private focusInfo: {\n    itemIndex: number;\n    fieldName: string;\n    selectionStart?: number;\n    selectionEnd?: number;\n  } | null = null;\n\n  constructor() {\n    super();\n    this._items = [];\n  }\n\n  // External API\n  @property({ type: Array })\n  get value(): any[] {\n    return [...this._items];\n  }\n\n  set value(newValue: any[]) {\n    this._items = newValue || [];\n    this.requestUpdate();\n  }\n\n  // Implement abstract methods\n  isEmptyItem(item: ListItem): boolean {\n    // Use configurable function if provided\n    if (this.isEmptyItemFn) {\n      return this.isEmptyItemFn(item);\n    }\n\n    // Default behavior: check if all values are empty\n    const values = Object.values(item);\n    if (values.length === 0) {\n      return true;\n    }\n\n    return values.every(\n      (value) => value === undefined || value === null || value === ''\n    );\n  }\n\n  // Override cleanItems to be more permissive for form data\n  protected cleanItems(items: ListItem[]): any {\n    // For runtime attachments, keep items that have at least one non-empty field\n    return items.filter((item) => {\n      const values = Object.values(item);\n      return (\n        values.length > 0 &&\n        values.some(\n          (value) => value !== undefined && value !== null && value !== ''\n        )\n      );\n    });\n  }\n\n  // Capture focus information before update\n  private captureFocus(): void {\n    const activeElement = this.shadowRoot?.activeElement as HTMLElement;\n\n    // Also try document.activeElement as a fallback\n    const globalActive = document.activeElement as HTMLElement;\n    let targetElement = activeElement || globalActive;\n\n    // If active element is within this component's shadow root, use it\n    if (globalActive && this.shadowRoot?.contains(globalActive)) {\n      targetElement = globalActive;\n    }\n\n    if (!targetElement) {\n      this.focusInfo = null;\n      return;\n    }\n\n    // Find the array item container by traversing up the DOM\n    let currentElement = targetElement;\n    let arrayItemElement: HTMLElement | null = null;\n\n    // Traverse up through shadow DOM boundaries\n    while (currentElement) {\n      if (currentElement.classList?.contains('array-item')) {\n        arrayItemElement = currentElement;\n        break;\n      }\n\n      // Move up to parent, or cross shadow boundaries\n      if (currentElement.parentElement) {\n        currentElement = currentElement.parentElement;\n      } else if (\n        currentElement.parentNode &&\n        (currentElement.parentNode as any).host\n      ) {\n        // Cross shadow boundary\n        currentElement = (currentElement.parentNode as any).host;\n      } else {\n        break;\n      }\n    }\n\n    if (!arrayItemElement) {\n      this.focusInfo = null;\n      return;\n    }\n\n    // Find the item index by looking at the item ID\n    const itemIdMatch = arrayItemElement.id?.match(/array-item-(\\d+)/);\n    if (!itemIdMatch) {\n      this.focusInfo = null;\n      return;\n    }\n\n    const itemIndex = parseInt(itemIdMatch[1], 10);\n\n    // Determine the field name by examining the input element and its containers\n    let fieldName = '';\n\n    // First, check if it's a temba component with a name attribute\n    if (targetElement.tagName?.toLowerCase().startsWith('temba-')) {\n      fieldName =\n        (targetElement as any).name || targetElement.getAttribute('name') || '';\n    }\n\n    // If not found, check regular HTML elements\n    if (\n      !fieldName &&\n      targetElement.hasAttribute &&\n      targetElement.hasAttribute('name')\n    ) {\n      fieldName = targetElement.getAttribute('name') || '';\n    }\n\n    // If still not found, look for data-field-name in parent containers\n    if (!fieldName) {\n      let searchElement = targetElement;\n      while (searchElement && searchElement !== arrayItemElement) {\n        if (\n          searchElement.hasAttribute &&\n          searchElement.hasAttribute('data-field-name')\n        ) {\n          fieldName = searchElement.getAttribute('data-field-name') || '';\n          break;\n        }\n        searchElement = searchElement.parentElement;\n      }\n    }\n\n    if (!fieldName) {\n      this.focusInfo = null;\n      return;\n    }\n\n    // Capture selection for text inputs (try the actual input element inside temba components)\n    let inputForSelection = targetElement;\n    if (targetElement.tagName?.toLowerCase().startsWith('temba-')) {\n      // Look for the actual input element inside the temba component\n      const innerInput =\n        targetElement.shadowRoot?.querySelector('input, textarea') ||\n        targetElement.querySelector('input, textarea');\n      if (innerInput) {\n        inputForSelection = innerInput as HTMLElement;\n      }\n    }\n\n    const selectionStart = (inputForSelection as any).selectionStart;\n    const selectionEnd = (inputForSelection as any).selectionEnd;\n\n    this.focusInfo = {\n      itemIndex,\n      fieldName,\n      selectionStart,\n      selectionEnd\n    };\n  }\n\n  // Restore focus after update\n  private restoreFocus(): void {\n    if (!this.focusInfo) {\n      return;\n    }\n\n    const { itemIndex, fieldName, selectionStart, selectionEnd } =\n      this.focusInfo;\n\n    // Find the target element by array item index\n    const arrayItemId = `array-item-${itemIndex}`;\n    const arrayItemElement = this.shadowRoot?.getElementById(arrayItemId);\n\n    if (!arrayItemElement) {\n      // If the exact item doesn't exist (e.g., due to reordering), try to find by field name\n      const allItems = this.shadowRoot?.querySelectorAll('.array-item');\n      if (allItems && allItems.length > itemIndex) {\n        const fallbackItem = allItems[itemIndex];\n        if (fallbackItem) {\n          this.attemptFocusRestore(\n            fallbackItem as HTMLElement,\n            fieldName,\n            selectionStart,\n            selectionEnd\n          );\n        }\n      }\n      this.focusInfo = null;\n      return;\n    }\n\n    this.attemptFocusRestore(\n      arrayItemElement,\n      fieldName,\n      selectionStart,\n      selectionEnd\n    );\n    this.focusInfo = null;\n  }\n\n  private attemptFocusRestore(\n    container: HTMLElement,\n    fieldName: string,\n    selectionStart?: number,\n    selectionEnd?: number\n  ): void {\n    // Look for the field container first\n    const fieldContainer = container.querySelector(\n      `[data-field-name=\"${fieldName}\"]`\n    );\n\n    let targetElement: HTMLElement | null = null;\n\n    if (fieldContainer) {\n      // Look for temba components or input elements within the field container\n      targetElement = fieldContainer.querySelector(\n        'temba-textinput, temba-completion, input, textarea'\n      ) as HTMLElement;\n    }\n\n    // Fallback: search entire container\n    if (!targetElement) {\n      const selectors = [\n        `temba-textinput[name=\"${fieldName}\"]`,\n        `temba-completion[name=\"${fieldName}\"]`,\n        `input[name=\"${fieldName}\"]`,\n        `textarea[name=\"${fieldName}\"]`,\n        `[name=\"${fieldName}\"]`\n      ];\n\n      for (const selector of selectors) {\n        targetElement = container.querySelector(selector) as HTMLElement;\n        if (targetElement) break;\n      }\n    }\n\n    if (targetElement) {\n      // Use multiple animation frames to ensure DOM is fully settled\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          try {\n            targetElement.focus();\n\n            // Restore selection if it's a text input\n            if (selectionStart !== undefined && selectionEnd !== undefined) {\n              // For temba components, we need to focus the inner input\n              let inputForSelection = targetElement;\n              if (targetElement.tagName?.toLowerCase().startsWith('temba-')) {\n                const innerInput =\n                  targetElement.shadowRoot?.querySelector('input, textarea') ||\n                  targetElement.querySelector('input, textarea');\n                if (innerInput && 'setSelectionRange' in innerInput) {\n                  inputForSelection = innerInput as any;\n                }\n              }\n\n              if ('setSelectionRange' in inputForSelection) {\n                (inputForSelection as any).setSelectionRange(\n                  selectionStart,\n                  selectionEnd\n                );\n              }\n            }\n          } catch (error) {\n            // Ignore focus errors - element might not be focusable\n            // Focus restoration failed, silently continue\n          }\n        });\n      });\n    }\n  }\n\n  createEmptyItem(): ListItem {\n    return {};\n  }\n\n  protected handleFieldChange(\n    itemIndex: number,\n    fieldName: string,\n    newValue: any\n  ) {\n    let updatedItems: any[];\n\n    if (this.onItemChange) {\n      updatedItems = this.onItemChange(\n        itemIndex,\n        fieldName,\n        newValue,\n        this._items\n      );\n    } else {\n      updatedItems = [...this._items];\n      updatedItems[itemIndex] = {\n        ...updatedItems[itemIndex],\n        [fieldName]: newValue\n      };\n    }\n\n    this.updateValue(updatedItems);\n  }\n\n  // Override Lit's update lifecycle methods for focus preservation\n  protected willUpdate(changedProperties: Map<string, any>): void {\n    super.willUpdate(changedProperties);\n\n    // Capture focus before update if items are changing\n    if (changedProperties.has('_items') || changedProperties.has('value')) {\n      this.captureFocus();\n    }\n  }\n\n  updated(changedProperties: Map<string, any>): void {\n    super.updated(changedProperties);\n\n    // Restore focus after update if items changed\n    if (changedProperties.has('_items') || changedProperties.has('value')) {\n      this.restoreFocus();\n    }\n  }\n\n  private handleOrderChanged(event: CustomEvent): void {\n    const detail = event.detail;\n\n    // Handle swap-based logic from SortableList\n    if (detail.swap && Array.isArray(detail.swap) && detail.swap.length === 2) {\n      const [fromIdx, toIdx] = detail.swap;\n\n      // Only reorder if the indexes are different and valid\n      if (\n        fromIdx !== toIdx &&\n        fromIdx >= 0 &&\n        toIdx >= 0 &&\n        fromIdx < this._items.length &&\n        toIdx < this._items.length\n      ) {\n        const updatedItems = [...this._items];\n        // Move the item using splice operations\n        const movedItem = updatedItems.splice(fromIdx, 1)[0];\n        updatedItems.splice(toIdx, 0, movedItem);\n        this.updateValue(updatedItems);\n      }\n    }\n  }\n\n  renderWidget(): TemplateResult {\n    const items = this.displayItems;\n\n    const itemsContent = items.map((item, index) => {\n      const renderedItem = this.renderItem(item, index);\n\n      if (this.sortable && !this.isEmptyItem(item)) {\n        // Wrap non-empty items with sortable class and unique ID for drag-and-drop\n        return html`\n          <div class=\"sortable\" id=\"array-item-${index}\">${renderedItem}</div>\n        `;\n      } else {\n        // Non-sortable items or empty items don't get the sortable wrapper\n        return renderedItem;\n      }\n    });\n\n    if (this.sortable) {\n      return html`\n        <div class=${this.getContainerClass()}>\n          <temba-sortable-list\n            dragHandle=\"drag-handle\"\n            gap=\"0.4em\"\n            @temba-order-changed=${this.handleOrderChanged}\n            style=\"display: grid; grid-template-columns: 1fr; gap: 8px;\"\n          >\n            ${itemsContent}\n          </temba-sortable-list>\n          ${this.shouldShowAddButton() ? this.renderAddButton() : ''}\n        </div>\n      `;\n    } else {\n      // Non-sortable rendering (original behavior)\n      return html`\n        <div class=${this.getContainerClass()}>\n          <div\n            class=\"list-items\"\n            style=\"display: grid; grid-template-columns: 1fr; gap: 8px;\"\n          >\n            ${itemsContent}\n          </div>\n          ${this.shouldShowAddButton() ? this.renderAddButton() : ''}\n        </div>\n      `;\n    }\n  }\n\n  private computeFieldValue(\n    itemIndex: number,\n    fieldName: string,\n    config: FieldConfig\n  ): any {\n    const item = this._items[itemIndex] || {};\n    const currentValue = item[fieldName];\n\n    if (config.computeValue) {\n      return config.computeValue(item, currentValue);\n    }\n\n    // For select fields, ensure we return the right type\n    /*if (config.type === 'select') {\n      console.log('computeFieldValue select', currentValue, config);\n      const selectConfig = config as SelectFieldConfig;\n      if (currentValue === undefined || currentValue === null) {\n        return selectConfig.multi ? [] : '';\n      }\n    }*/\n\n    return currentValue;\n  }\n\n  private renderArrayField(\n    itemIndex: number,\n    fieldName: string,\n    config: FieldConfig\n  ): TemplateResult {\n    const computedValue = this.computeFieldValue(itemIndex, fieldName, config);\n\n    // Extract flavor from select config if available\n    const flavor =\n      config.type === 'select' ? (config as any).flavor || 'small' : 'small';\n\n    // Build container style with width/maxWidth if specified\n    let containerStyle = '';\n    if (config.width) {\n      containerStyle = `width: ${config.width};`;\n    } else if (config.maxWidth) {\n      containerStyle = `max-width: ${config.maxWidth};`;\n    }\n\n    // Use FieldRenderer for consistent field rendering\n    const fieldContent = FieldRenderer.renderField(\n      fieldName,\n      config,\n      computedValue,\n      {\n        showLabel: false, // ArrayEditor doesn't show labels for individual fields\n        flavor: flavor,\n        extraClasses: 'form-control',\n        onChange: (e: Event) => {\n          let value: any;\n          const target = e.target as any;\n\n          // Handle different field types and their change events\n          if (config.type === 'select') {\n            // Use consistent temba-select value normalization\n            value = target.values;\n          } else {\n            // For other field types, use the target value directly\n            value = target.value;\n          }\n\n          this.handleFieldChange(itemIndex, fieldName, value);\n        }\n      }\n    );\n\n    // Wrap in container with style if maxWidth is specified\n    if (containerStyle) {\n      return html`<div style=\"${containerStyle}\">${fieldContent}</div>`;\n    }\n\n    return fieldContent;\n  }\n\n  renderItem(item: ListItem, index: number): TemplateResult {\n    const canRemove = this.canRemoveItem(index);\n\n    // Render fields and track if any value fields are visible\n    const fieldElements: TemplateResult[] = [];\n    let hasVisibleValueField = false;\n\n    Object.entries(this.itemConfig).forEach(([fieldName, config]) => {\n      // Check visibility condition\n      let isVisible = true;\n      if (config.conditions?.visible) {\n        try {\n          const currentItem = this._items[index] || {};\n          isVisible = config.conditions.visible(currentItem);\n        } catch (error) {\n          console.error(`Error checking visibility for ${fieldName}:`, error);\n        }\n      }\n\n      if (isVisible) {\n        // Check if this is a value field (text input without fixed sizing)\n        const isValueField =\n          !config.width && !config.maxWidth && config.type === 'text';\n        if (isValueField) {\n          hasVisibleValueField = true;\n        }\n\n        fieldElements.push(html`\n          <div\n            data-field-name=\"${fieldName}\"\n            style=\"${config.width || config.maxWidth || config.type === 'select'\n              ? 'flex:none'\n              : 'flex:1'}\"\n          >\n            ${this.renderArrayField(index, fieldName, config)}\n          </div>\n        `);\n      }\n    });\n\n    // If no value fields are visible, add a spacer to maintain alignment\n    if (!hasVisibleValueField) {\n      // Insert spacer after operator (first field) and before category (last field)\n      fieldElements.splice(\n        -1,\n        0,\n        html`<div class=\"field field-flex spacer\" style=\"flex-grow:1\"></div>`\n      );\n    }\n\n    return html`\n      <div class=\"array-item\" id=\"array-item-${index}\">\n        <div\n          class=\"item-fields  ${canRemove ? '' : 'removable'}\"\n          style=\"display: flex; gap: 12px; align-items: center\"\n        >\n          ${this.sortable\n            ? html`<temba-icon\n                name=${Icon.sort}\n                style=\"margin-right: -6px;\"\n                class=\"drag-handle\"\n              ></temba-icon>`\n            : null}\n          ${fieldElements}\n          <button\n            @click=${canRemove ? () => this.removeItem(index) : undefined}\n            class=\"remove-btn\"\n            style=\"\n              padding: 4px;\n              border: 1px solid #ccc;\n              border-radius: 4px;\n              background: white;\n              cursor: pointer;\n              background: #fefefe;\n              color: #999;\n              font-size: 14px;\n            \"\n            ?disabled=${!canRemove}\n          >\n            <temba-icon name=\"x\"></temba-icon>\n          </button>\n        </div>\n      </div>\n    `;\n  }\n\n  protected getContainerClass(): string {\n    return 'array-editor';\n  }\n\n  static get styles() {\n    return css`\n      ${super.styles}\n\n      .item-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n      }\n\n      .item-title {\n        font-weight: 600;\n        color: #333;\n      }\n\n      .field {\n        /* Base field styles */\n      }\n\n      .spacer {\n        /* Empty spacer to maintain layout alignment */\n      }\n\n      .add-btn,\n      .remove-btn {\n        padding: 4px;\n        border: 1px solid #ccc;\n        border-radius: 4px;\n        background: white;\n        cursor: pointer;\n        font-size: 14px;\n      }\n\n      .add-btn:hover,\n      .remove-btn:hover {\n        background: #f8f8f8;\n      }\n\n      .remove-btn {\n        background: #fefefe;\n        color: #999;\n      }\n\n      .removable .remove-btn {\n        opacity: 0.3;\n        cursor: default;\n        pointer-events: none;\n      }\n\n      .removable .drag-handle {\n        opacity: 0.3;\n        cursor: default;\n        pointer-events: none;\n      }\n\n      .drag-handle {\n        cursor: grab;\n        color: #ccc;\n      }\n    `;\n  }\n}\n"]}

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

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import { spread } from '@open-wc/lit-helpers';
+import { DEFAULT_MEDIA_ENDPOINT } from '../utils';
 /**
  * FieldRenderer provides a consistent way to render field configurations
  * into web components across different contexts (NodeEditor, ArrayEditor, etc.)
@@ -37,6 +38,8 @@ export class FieldRenderer {
                 return FieldRenderer.renderArray(fieldName, config, value, context);
             case 'message-editor':
                 return FieldRenderer.renderMessageEditor(fieldName, config, value, context);
+            case 'media':
+                return FieldRenderer.renderMedia(fieldName, config, value, context);
             default:
                 return html `<div>Unsupported field type: ${config.type}</div>`;
         }
@@ -228,6 +231,52 @@ export class FieldRenderer {
             : ''}
     </div>`;
     }
+    static urlToAttachments(url) {
+        var _a;
+        if (!url || !url.trim())
+            return [];
+        const filename = url.split('/').pop() || 'recording';
+        const ext = ((_a = filename.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
+        const contentTypes = {
+            mp3: 'audio/mpeg',
+            wav: 'audio/wav',
+            ogg: 'audio/ogg',
+            m4a: 'audio/mp4'
+        };
+        return [
+            {
+                uuid: '',
+                content_type: contentTypes[ext] || 'audio/mpeg',
+                url,
+                filename,
+                size: 0,
+                error: ''
+            }
+        ];
+    }
+    static renderMedia(fieldName, config, value, context) {
+        const { onChange, showLabel = true } = context;
+        const endpoint = config.endpoint || DEFAULT_MEDIA_ENDPOINT;
+        const attachments = FieldRenderer.urlToAttachments(value);
+        return html `
+      <div>
+        ${showLabel && config.label
+            ? html `<label
+              style="margin-bottom: 5px; margin-left: 4px; display: block; font-weight: 400; font-size: var(--label-size); letter-spacing: 0.05em; line-height: normal; color: var(--color-label, #777);"
+              >${config.label}</label
+            >`
+            : ''}
+        <temba-media-picker
+          name="${fieldName}"
+          accept="${config.accept || ''}"
+          endpoint="${endpoint}"
+          max="1"
+          .attachments="${attachments}"
+          @change="${onChange || (() => { })}"
+        ></temba-media-picker>
+      </div>
+    `;
+    }
     static renderMessageEditor(fieldName, config, value, context) {
         const { errors = [], onChange, showLabel = true, extraClasses, style, additionalData = {} } = context;
         return html `<temba-message-editor

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 { 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"]}
+{"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  MediaFieldConfig\n} from '../flow/types';\nimport { Attachment } from '../interfaces';\nimport { DEFAULT_MEDIA_ENDPOINT } from '../utils';\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      case 'media':\n        return FieldRenderer.renderMedia(\n          fieldName,\n          config as MediaFieldConfig,\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 urlToAttachments(url: string): Attachment[] {\n    if (!url || !url.trim()) return [];\n    const filename = url.split('/').pop() || 'recording';\n    const ext = filename.split('.').pop()?.toLowerCase() || '';\n    const contentTypes: Record<string, string> = {\n      mp3: 'audio/mpeg',\n      wav: 'audio/wav',\n      ogg: 'audio/ogg',\n      m4a: 'audio/mp4'\n    };\n    return [\n      {\n        uuid: '',\n        content_type: contentTypes[ext] || 'audio/mpeg',\n        url,\n        filename,\n        size: 0,\n        error: ''\n      }\n    ];\n  }\n\n  private static renderMedia(\n    fieldName: string,\n    config: MediaFieldConfig,\n    value: any,\n    context: FieldRenderContext\n  ): TemplateResult {\n    const { onChange, showLabel = true } = context;\n    const endpoint = config.endpoint || DEFAULT_MEDIA_ENDPOINT;\n    const attachments = FieldRenderer.urlToAttachments(value);\n\n    return html`\n      <div>\n        ${showLabel && config.label\n          ? html`<label\n              style=\"margin-bottom: 5px; margin-left: 4px; display: block; font-weight: 400; font-size: var(--label-size); letter-spacing: 0.05em; line-height: normal; color: var(--color-label, #777);\"\n              >${config.label}</label\n            >`\n          : ''}\n        <temba-media-picker\n          name=\"${fieldName}\"\n          accept=\"${config.accept || ''}\"\n          endpoint=\"${endpoint}\"\n          max=\"1\"\n          .attachments=\"${attachments}\"\n          @change=\"${onChange || (() => {})}\"\n        ></temba-media-picker>\n      </div>\n    `;\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

@@ -58,5 +58,6 @@ export var CustomEventType;
     CustomEventType["NodeEditCancelled"] = "temba-node-edit-cancelled";
     CustomEventType["FollowSimulation"] = "temba-follow-simulation";
     CustomEventType["ContactClicked"] = "temba-contact-clicked";
+    CustomEventType["ShowIssue"] = "temba-show-issue";
 })(CustomEventType || (CustomEventType = {}));
 //# sourceMappingURL=interfaces.js.map

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;AAkOD,MAAM,CAAN,IAAY,eA0CX;AA1CD,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;IAC/C,+DAA4C,CAAA;IAC5C,2DAAwC,CAAA;AAC1C,CAAC,EA1CW,eAAe,KAAf,eAAe,QA0C1B","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  unsendable_reason?:\n    | 'no_route'\n    | 'contact_blocked'\n    | 'contact_stopped'\n    | 'contact_archived'\n    | 'org_suspended'\n    | 'looping';\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  FollowSimulation = 'temba-follow-simulation',\n  ContactClicked = 'temba-contact-clicked'\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;AAkOD,MAAM,CAAN,IAAY,eA2CX;AA3CD,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;IAC/C,+DAA4C,CAAA;IAC5C,2DAAwC,CAAA;IACxC,iDAA8B,CAAA;AAChC,CAAC,EA3CW,eAAe,KAAf,eAAe,QA2C1B","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  unsendable_reason?:\n    | 'no_route'\n    | 'contact_blocked'\n    | 'contact_stopped'\n    | 'contact_archived'\n    | 'org_suspended'\n    | 'looping';\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  FollowSimulation = 'temba-follow-simulation',\n  ContactClicked = 'temba-contact-clicked',\n  ShowIssue = 'temba-show-issue'\n}\n"]}

package/out-tsc/src/layout/Dialog.js

@@ -88,8 +88,9 @@ export class Dialog extends ResizeElement {
       }
 
       .dialog-mask .dialog-container {
+        
         position: relative;
-        transition: transform var(--transition-speed) var(--bounce),
+        transition: transform var(--transition-speed) ease-in-out,
           opacity ease-in-out calc(var(--transition-speed) - 50ms);
         border-radius: var(--curvature);
         box-shadow: 0px 0px 2px 4px rgba(0, 0, 0, 0.06);
@@ -104,6 +105,7 @@ export class Dialog extends ResizeElement {
       .dialog-body {
         background: #fff;
         overflow-y: auto;
+        overflow-x: hidden;
         flex-grow: 1;
       }
 
@@ -117,7 +119,7 @@ export class Dialog extends ResizeElement {
       }
 
       .dialog-mask.dialog-animation-end .dialog-container {
-        transform: scale(1) !important;
+        transform: scale(1) translate(0, 0) !important;
       }
 
       .dialog-mask.dialog-ready .dialog-container {
@@ -199,6 +201,8 @@ export class Dialog extends ResizeElement {
         this.width = null;
         this.submittingName = 'Saving';
         this.buttons = [];
+        this.originX = null;
+        this.originY = null;
         this.scrollOffset = 0;
     }
     updateButtons() {
@@ -226,11 +230,46 @@ export class Dialog extends ResizeElement {
         if (changes.has('open')) {
             const body = document.querySelector('body');
             if (this.open) {
-                this.animationEnd = true;
-                window.setTimeout(() => {
-                    this.ready = true;
-                    this.animationEnd = false;
-                }, 400);
+                if (this.originX != null && this.originY != null) {
+                    // Spring-from-origin animation: measure final position, then
+                    // set initial transform at click point and transition to center
+                    const ox = this.originX;
+                    const oy = this.originY;
+                    this.originX = null;
+                    this.originY = null;
+                    requestAnimationFrame(() => {
+                        var _a;
+                        const container = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dialog-container');
+                        if (container) {
+                            const rect = container.getBoundingClientRect();
+                            const cx = rect.left + rect.width / 2;
+                            const cy = rect.top + rect.height / 2;
+                            const dx = ox - cx;
+                            const dy = oy - cy;
+                            // Disable transition so we can set the start position instantly
+                            container.style.transition = 'none';
+                            container.style.transform = `translate(${dx}px, ${dy}px) scale(0.2)`;
+                            // Force reflow to register the start position
+                            container.getBoundingClientRect();
+                            // Re-enable transition and trigger animation to final position
+                            container.style.transition = '';
+                            this.animationEnd = true;
+                            window.setTimeout(() => {
+                                this.ready = true;
+                                this.animationEnd = false;
+                                container.style.transform = '';
+                            }, 400);
+                        }
+                    });
+                }
+                else {
+                    // Default animation (no origin)
+                    this.animationEnd = true;
+                    window.setTimeout(() => {
+                        this.ready = true;
+                        this.animationEnd = false;
+                    }, 400);
+                }
                 this.scrollOffset = -document.documentElement.scrollTop;
                 body.style.position = 'fixed';
                 body.style.overflowY = 'scroll';
@@ -461,4 +500,10 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], Dialog.prototype, "onButtonClicked", void 0);
+__decorate([
+    property({ type: Number })
+], Dialog.prototype, "originX", void 0);
+__decorate([
+    property({ type: Number })
+], Dialog.prototype, "originY", void 0);
 //# sourceMappingURL=Dialog.js.map

package/out-tsc/src/layout/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/layout/Dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { property } from 'lit/decorators.js';\nimport { TemplateResult, html, css } from 'lit';\nimport { Button } from '../display/Button';\nimport { CustomEventType } from '../interfaces';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { getClasses } from '../utils';\nimport { ResizeElement } from '../ResizeElement';\n\nexport enum ButtonType {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive'\n}\nexport class DialogButton {\n  name?: string;\n  id?: string;\n  details?: any;\n  type?: string;\n  closes?: boolean;\n}\n\nexport class Dialog extends ResizeElement {\n  static get widths(): { [size: string]: string } {\n    return {\n      small: '400px',\n      medium: '600px',\n      large: '655px',\n      xlarge: '800px'\n    };\n  }\n\n  static get styles() {\n    return css`\n      :host {\n        position: absolute;\n        z-index: 10000;\n        font-family: var(--font-family);\n        background: white;\n      }\n\n      .flex-grow {\n        flex-grow: 1;\n      }\n\n      .flex {\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        position: relative;\n        left: 0px;\n        top: 0px;\n        align-items: center;\n        height: 100vh;\n      }\n\n      .mobile .flex {\n        height: 100%;\n        position: fixed;\n      }\n\n      .mobile .grow-top {\n        flex-grow: 0;\n      }\n\n      .mobile .grow-bottom {\n        flex-grow: 0;\n      }\n\n      .grow-top {\n        flex-grow: 1;\n      }\n\n      .grow-bottom {\n        flex-grow: 3;\n      }\n\n      .bottom-padding {\n        padding: 3rem;\n      }\n\n      .dialog-mask {\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 0, 0, 0.5);\n        opacity: 0;\n        position: fixed;\n        top: 0px;\n        left: 0px;\n        transition: opacity linear calc(var(--transition-speed) / 2ms);\n        pointer-events: none;\n      }\n\n      .mobile.dialog-mask .dialog-container {\n        border-radius: 0px;\n      }\n\n      .dialog-mask .dialog-container {\n        position: relative;\n        transition: transform var(--transition-speed) var(--bounce),\n          opacity ease-in-out calc(var(--transition-speed) - 50ms);\n        border-radius: var(--curvature);\n        box-shadow: 0px 0px 2px 4px rgba(0, 0, 0, 0.06);\n        overflow: hidden;\n        transform: scale(0.9) translatey(2em);\n        background: white;\n        margin: auto;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .dialog-body {\n        background: #fff;\n        overflow-y: auto;\n        flex-grow: 1;\n      }\n\n      .dialog-mask.dialog-open {\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      .dialog-mask.dialog-open .dialog-container {\n        top: inherit;\n      }\n\n      .dialog-mask.dialog-animation-end .dialog-container {\n        transform: scale(1) !important;\n      }\n\n      .dialog-mask.dialog-ready .dialog-container {\n        transform: none;\n      }\n\n      .dialog-mask.dialog-loading .dialog-container {\n        margin-top: -10000px;\n      }\n\n      .header-text {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        font-size: 20px;\n        padding: 12px 20px;\n        color: var(--header-text);\n        background: var(--header-bg);\n      }\n\n      .header-text .title {\n        flex-grow: 1;\n      }\n\n      .header-text .status {\n        font-size: 0.6em;\n        font-weight: bold;\n      }\n\n      .dialog-footer {\n        background: var(--color-primary-light);\n        padding: 10px;\n        display: flex;\n        flex-flow: row;\n        align-items: center;\n      }\n\n      temba-button {\n        margin-left: 10px;\n      }\n\n      .dialog-body temba-loading {\n        position: absolute;\n        right: 12px;\n        margin-top: -30px;\n        padding-bottom: 9px;\n        display: none;\n      }\n\n      #page-loader {\n        text-align: center;\n        display: block;\n        position: relative;\n        opacity: 0;\n        margin: auto;\n        margin-top: 30px;\n        width: 154px;\n        transition: opacity calc(var(--transition-speed) * 5ms) ease-in\n          calc(var(--transition-speed * 2));\n        visibility: hidden;\n      }\n\n      .dialog-mask.dialog-loading #page-loader {\n        opacity: 1;\n        visibility: visible;\n      }\n\n      #submit-loader {\n        flex-grow: 1;\n        text-align: right;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  open: boolean;\n\n  @property()\n  header: string;\n\n  @property()\n  body: string;\n\n  @property({ type: Boolean })\n  submitting: boolean;\n\n  @property({ type: Boolean })\n  destructive: boolean;\n\n  @property({ type: Boolean })\n  disabled: boolean;\n\n  @property({ type: Boolean })\n  loading: boolean;\n\n  @property({ type: Boolean })\n  hideOnClick: boolean;\n\n  @property({ type: Boolean })\n  noFocus: boolean;\n\n  @property()\n  size = 'medium';\n\n  @property({ type: String })\n  primaryButtonName = 'Ok';\n\n  @property({ type: String })\n  cancelButtonName = 'Cancel';\n\n  @property({ type: String })\n  width = null;\n\n  @property()\n  submittingName = 'Saving';\n\n  @property()\n  animationEnd: boolean;\n\n  @property()\n  ready: boolean;\n\n  @property({ type: Array })\n  buttons: DialogButton[] = [];\n\n  @property({ attribute: false })\n  onButtonClicked: (button: Button) => void;\n\n  scrollOffset: any = 0;\n\n  public constructor() {\n    super();\n  }\n\n  private updateButtons() {\n    this.buttons = [];\n    if (this.cancelButtonName) {\n      this.buttons.push({\n        name: this.cancelButtonName,\n        type: ButtonType.SECONDARY,\n        closes: true\n      });\n    }\n\n    if (this.primaryButtonName) {\n      this.buttons.push({\n        name: this.primaryButtonName,\n        type: ButtonType.PRIMARY\n      });\n    }\n    this.requestUpdate();\n  }\n\n  public updated(changes: Map<string, any>) {\n    super.updated(changes);\n\n    if (changes.has('cancelButtonName') || changes.has('primaryButtonName')) {\n      this.updateButtons();\n    }\n\n    if (changes.has('open')) {\n      const body = document.querySelector('body');\n\n      if (this.open) {\n        this.animationEnd = true;\n        window.setTimeout(() => {\n          this.ready = true;\n          this.animationEnd = false;\n        }, 400);\n\n        this.scrollOffset = -document.documentElement.scrollTop;\n        body.style.position = 'fixed';\n        body.style.overflowY = 'scroll';\n        body.style.top = this.scrollOffset + 'px';\n        body.style.width = '100%';\n        body.style.overflowY = 'hidden';\n      } else {\n        body.style.position = '';\n        body.style.overflowY = '';\n        body.style.width = '';\n        body.style.marginRight = '';\n        body.style.paddingRight = '0px';\n        window.scrollTo(0, parseInt(this.scrollOffset || '0') * -1);\n      }\n\n      // make sure our buttons aren't in progress on show\n      if (this.open && !changes.get('open')) {\n        this.shadowRoot\n          .querySelectorAll('temba-button')\n          .forEach((button: Button) => {\n            if (button) button.submitting = false;\n          });\n\n        if (!this.noFocus) {\n          this.focusFirstInput();\n        }\n      } else {\n        window.setTimeout(() => {\n          this.ready = false;\n        }, 400);\n      }\n    }\n  }\n\n  public focusFirstInput(): void {\n    window.setTimeout(() => {\n      let input = this.querySelector(\n        'temba-textinput, temba-completion, input[type=\"text\"], textarea'\n      ) as any;\n      if (input) {\n        input = input.textInputElement || input.inputElement || input;\n        if (!input.readOnly) {\n          input.focus();\n          input.click();\n        }\n      }\n    }, 100);\n  }\n\n  public handleClick(evt: MouseEvent) {\n    const button = evt.currentTarget as Button;\n    if (!button.disabled) {\n      let detail: DialogButton = {};\n      if (button.index >= 0 && button.index < this.buttons.length) {\n        detail = this.buttons[button.index];\n      }\n\n      this.fireCustomEvent(CustomEventType.ButtonClicked, { button, detail });\n      if (button.name === this.cancelButtonName || (detail && detail.closes)) {\n        this.open = false;\n      }\n    }\n  }\n\n  private getDocumentHeight(): number {\n    const body = document.body;\n    const html = document.documentElement;\n    return Math.max(\n      body.scrollHeight,\n      body.offsetHeight,\n      html.clientHeight,\n      html.scrollHeight,\n      html.offsetHeight\n    );\n  }\n\n  private clickCancel() {\n    const cancel = this.getCancelButton();\n    if (cancel) {\n      cancel.click();\n    }\n  }\n\n  public getCancelButton(): Button {\n    return this.shadowRoot.querySelector(\n      `temba-button[name='${this.cancelButtonName}']`\n    );\n  }\n\n  public getPrimaryButton(): Button {\n    return this.shadowRoot.querySelector(`temba-button[primary]`);\n  }\n\n  private handleKeyUp(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.clickCancel();\n    }\n  }\n\n  private handleClickMask(event: MouseEvent) {\n    if (this.hideOnClick) {\n      const id = (event.target as HTMLElement).id;\n      if (id === 'dialog-mask' || id === 'dialog-bg') {\n        this.fireCustomEvent(CustomEventType.DialogHidden);\n        this.clickCancel();\n      }\n    }\n  }\n\n  public show(): void {\n    this.open = true;\n  }\n\n  public hide(): void {\n    this.open = false;\n  }\n\n  public render(): TemplateResult {\n    const dialogStyle = {\n      width: this.width\n    };\n\n    if (!this.width) {\n      dialogStyle['width'] = Dialog.widths[this.size];\n    }\n\n    if (this.isMobile()) {\n      dialogStyle['width'] = '100%';\n      dialogStyle['height'] = '100%';\n      delete dialogStyle['maxWidth'];\n    }\n\n    const header = this.header\n      ? html`\n          <div class=\"dialog-header\">\n            <div class=\"header-text\">\n              <div class=\"title\">${this.header}</div>\n            </div>\n          </div>\n        `\n      : null;\n\n    return html`\n      <div\n        id=\"dialog-mask\"\n        @click=${this.handleClickMask}\n        class=\"dialog-mask ${getClasses({\n          'dialog-open': this.open,\n          'dialog-loading': this.loading,\n          'dialog-animation-end': this.animationEnd,\n          'dialog-ready': this.ready,\n          mobile: this.isMobile()\n        })}\"\n      >\n        <div style=\"position: absolute; width: 100%;\">\n          <temba-loading\n            id=\"page-loader\"\n            units=\"6\"\n            size=\"12\"\n            color=\"#ccc\"\n          ></temba-loading>\n        </div>\n\n        <div class=\"flex\">\n          <div class=\"grow-top\" style=\"${\n            this.isMobile() ? 'flex-grow:0' : ''\n          }\"></div>\n          <div\n            @keyup=${this.handleKeyUp}\n            style=${styleMap(dialogStyle)}\n            class=\"dialog-container\"\n          >\n            ${header}\n            <div class=\"dialog-body\" @keypress=${this.handleKeyUp}>\n              ${this.body ? this.body : html`<slot></slot>`}\n              <temba-loading units=\"6\" size=\"8\"></temba-loading>\n            </div>\n\n            <div class=\"dialog-footer\">\n              <div class=\"flex-grow\">\n                <slot name=\"gutter\"></slot>\n              </div>\n              ${this.buttons.map(\n                (button: DialogButton, index) => html`\n                  <temba-button\n                    name=${button.name}\n                    ?destructive=${button.type == 'primary' && this.destructive}\n                    ?primary=${button.type == 'primary' && !this.destructive}\n                    ?secondary=${button.type == 'secondary'}\n                    ?submitting=${this.submitting}\n                    ?disabled=${this.disabled && !button.closes}\n                    index=${index}\n                    @click=${this.handleClick}\n                  ></temba-button>\n                `\n              )}\n              </div>\n            </div>\n            <div class=\"grow-bottom\"></div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/layout/Dialog.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,MAAM,CAAN,IAAY,UAIX;AAJD,WAAY,UAAU;IACpB,iCAAmB,CAAA;IACnB,qCAAuB,CAAA;IACvB,yCAA2B,CAAA;AAC7B,CAAC,EAJW,UAAU,KAAV,UAAU,QAIrB;AACD,MAAM,OAAO,YAAY;CAMxB;AAED,MAAM,OAAO,MAAO,SAAQ,aAAa;IACvC,MAAM,KAAK,MAAM;QACf,OAAO;YACL,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;YACf,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;SAChB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwKT,CAAC;IACJ,CAAC;IAgED;QACE,KAAK,EAAE,CAAC;QAnCV,SAAI,GAAG,QAAQ,CAAC;QAGhB,sBAAiB,GAAG,IAAI,CAAC;QAGzB,qBAAgB,GAAG,QAAQ,CAAC;QAG5B,UAAK,GAAG,IAAI,CAAC;QAGb,mBAAc,GAAG,QAAQ,CAAC;QAS1B,YAAO,GAAmB,EAAE,CAAC;QAM7B,YAAO,GAAkB,IAAI,CAAC;QAG9B,YAAO,GAAkB,IAAI,CAAC;QAE9B,iBAAY,GAAQ,CAAC,CAAC;IAItB,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;gBAChB,IAAI,EAAE,IAAI,CAAC,gBAAgB;gBAC3B,IAAI,EAAE,UAAU,CAAC,SAAS;gBAC1B,MAAM,EAAE,IAAI;aACb,CAAC,CAAC;QACL,CAAC;QAED,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;gBAChB,IAAI,EAAE,IAAI,CAAC,iBAAiB;gBAC5B,IAAI,EAAE,UAAU,CAAC,OAAO;aACzB,CAAC,CAAC;QACL,CAAC;QACD,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEM,OAAO,CAAC,OAAyB;QACtC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEvB,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,mBAAmB,CAAC,EAAE,CAAC;YACxE,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YAE5C,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,EAAE,CAAC;oBACjD,6DAA6D;oBAC7D,gEAAgE;oBAChE,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;oBACxB,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;oBACxB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;oBACpB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;oBAEpB,qBAAqB,CAAC,GAAG,EAAE;;wBACzB,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAC9C,mBAAmB,CACL,CAAC;wBACjB,IAAI,SAAS,EAAE,CAAC;4BACd,MAAM,IAAI,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;4BAC/C,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;4BACtC,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;4BACtC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;4BACnB,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;4BAEnB,gEAAgE;4BAChE,SAAS,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC;4BACpC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,aAAa,EAAE,OAAO,EAAE,gBAAgB,CAAC;4BACrE,8CAA8C;4BAC9C,SAAS,CAAC,qBAAqB,EAAE,CAAC;4BAElC,+DAA+D;4BAC/D,SAAS,CAAC,KAAK,CAAC,UAAU,GAAG,EAAE,CAAC;4BAChC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;4BACzB,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gCACrB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;gCAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;gCAC1B,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC;4BACjC,CAAC,EAAE,GAAG,CAAC,CAAC;wBACV,CAAC;oBACH,CAAC,CAAC,CAAC;gBACL,CAAC;qBAAM,CAAC;oBACN,gCAAgC;oBAChC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;oBACzB,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;wBACrB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;wBAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;oBAC5B,CAAC,EAAE,GAAG,CAAC,CAAC;gBACV,CAAC;gBAED,IAAI,CAAC,YAAY,GAAG,CAAC,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC;gBACxD,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;gBAC9B,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,QAAQ,CAAC;gBAChC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;gBAC1C,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;gBAC1B,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,QAAQ,CAAC;YAClC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;gBACzB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC;gBAC1B,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;gBACtB,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,EAAE,CAAC;gBAC5B,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC;gBAChC,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,YAAY,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YAC9D,CAAC;YAED,mDAAmD;YACnD,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;gBACtC,IAAI,CAAC,UAAU;qBACZ,gBAAgB,CAAC,cAAc,CAAC;qBAChC,OAAO,CAAC,CAAC,MAAc,EAAE,EAAE;oBAC1B,IAAI,MAAM;wBAAE,MAAM,CAAC,UAAU,GAAG,KAAK,CAAC;gBACxC,CAAC,CAAC,CAAC;gBAEL,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;oBAClB,IAAI,CAAC,eAAe,EAAE,CAAC;gBACzB,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;oBACrB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;gBACrB,CAAC,EAAE,GAAG,CAAC,CAAC;YACV,CAAC;QACH,CAAC;IACH,CAAC;IAEM,eAAe;QACpB,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACrB,IAAI,KAAK,GAAG,IAAI,CAAC,aAAa,CAC5B,iEAAiE,CAC3D,CAAC;YACT,IAAI,KAAK,EAAE,CAAC;gBACV,KAAK,GAAG,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,YAAY,IAAI,KAAK,CAAC;gBAC9D,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;oBACpB,KAAK,CAAC,KAAK,EAAE,CAAC;oBACd,KAAK,CAAC,KAAK,EAAE,CAAC;gBAChB,CAAC;YACH,CAAC;QACH,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAEM,WAAW,CAAC,GAAe;QAChC,MAAM,MAAM,GAAG,GAAG,CAAC,aAAuB,CAAC;QAC3C,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;YACrB,IAAI,MAAM,GAAiB,EAAE,CAAC;YAC9B,IAAI,MAAM,CAAC,KAAK,IAAI,CAAC,IAAI,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;gBAC5D,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YACtC,CAAC;YAED,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;YACxE,IAAI,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,gBAAgB,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC;gBACvE,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YACpB,CAAC;QACH,CAAC;IACH,CAAC;IAEO,iBAAiB;QACvB,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;QAC3B,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;QACtC,OAAO,IAAI,CAAC,GAAG,CACb,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,YAAY,CAClB,CAAC;IACJ,CAAC;IAEO,WAAW;QACjB,MAAM,MAAM,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACtC,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,KAAK,EAAE,CAAC;QACjB,CAAC;IACH,CAAC;IAEM,eAAe;QACpB,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAClC,sBAAsB,IAAI,CAAC,gBAAgB,IAAI,CAChD,CAAC;IACJ,CAAC;IAEM,gBAAgB;QACrB,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IAChE,CAAC;IAEO,WAAW,CAAC,KAAoB;QACtC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC3B,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;IAEO,eAAe,CAAC,KAAiB;QACvC,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,MAAM,EAAE,GAAI,KAAK,CAAC,MAAsB,CAAC,EAAE,CAAC;YAC5C,IAAI,EAAE,KAAK,aAAa,IAAI,EAAE,KAAK,WAAW,EAAE,CAAC;gBAC/C,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;gBACnD,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,CAAC;QACH,CAAC;IACH,CAAC;IAEM,IAAI;QACT,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAEM,IAAI;QACT,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAEM,MAAM;QACX,MAAM,WAAW,GAAG;YAClB,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC;QAEF,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,WAAW,CAAC,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClD,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC;YACpB,WAAW,CAAC,OAAO,CAAC,GAAG,MAAM,CAAC;YAC9B,WAAW,CAAC,QAAQ,CAAC,GAAG,MAAM,CAAC;YAC/B,OAAO,WAAW,CAAC,UAAU,CAAC,CAAC;QACjC,CAAC;QAED,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM;YACxB,CAAC,CAAC,IAAI,CAAA;;;mCAGuB,IAAI,CAAC,MAAM;;;SAGrC;YACH,CAAC,CAAC,IAAI,CAAC;QAET,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,eAAe;6BACR,UAAU,CAAC;YAC9B,aAAa,EAAE,IAAI,CAAC,IAAI;YACxB,gBAAgB,EAAE,IAAI,CAAC,OAAO;YAC9B,sBAAsB,EAAE,IAAI,CAAC,YAAY;YACzC,cAAc,EAAE,IAAI,CAAC,KAAK;YAC1B,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE;SACxB,CAAC;;;;;;;;;;;;yCAaE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EACpC;;qBAEW,IAAI,CAAC,WAAW;oBACjB,QAAQ,CAAC,WAAW,CAAC;;;cAG3B,MAAM;iDAC6B,IAAI,CAAC,WAAW;gBACjD,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe;;;;;;;;gBAQ3C,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,CAAC,MAAoB,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;2BAE1B,MAAM,CAAC,IAAI;mCACH,MAAM,CAAC,IAAI,IAAI,SAAS,IAAI,IAAI,CAAC,WAAW;+BAChD,MAAM,CAAC,IAAI,IAAI,SAAS,IAAI,CAAC,IAAI,CAAC,WAAW;iCAC3C,MAAM,CAAC,IAAI,IAAI,WAAW;kCACzB,IAAI,CAAC,UAAU;gCACjB,IAAI,CAAC,QAAQ,IAAI,CAAC,MAAM,CAAC,MAAM;4BACnC,KAAK;6BACJ,IAAI,CAAC,WAAW;;iBAE5B,CACF;;;;;;;KAOV,CAAC;IACJ,CAAC;CACF;AAvVC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oCACd;AAGd;IADC,QAAQ,EAAE;sCACI;AAGf;IADC,QAAQ,EAAE;oCACE;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACR;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACP;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACV;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACP;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACX;AAGjB;IADC,QAAQ,EAAE;oCACK;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACF;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACC;AAG5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACd;AAGb;IADC,QAAQ,EAAE;8CACe;AAG1B;IADC,QAAQ,EAAE;4CACW;AAGtB;IADC,QAAQ,EAAE;qCACI;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;uCACG;AAG7B;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;+CACW;AAG1C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACG;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACG","sourcesContent":["import { property } from 'lit/decorators.js';\nimport { TemplateResult, html, css } from 'lit';\nimport { Button } from '../display/Button';\nimport { CustomEventType } from '../interfaces';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { getClasses } from '../utils';\nimport { ResizeElement } from '../ResizeElement';\n\nexport enum ButtonType {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive'\n}\nexport class DialogButton {\n  name?: string;\n  id?: string;\n  details?: any;\n  type?: string;\n  closes?: boolean;\n}\n\nexport class Dialog extends ResizeElement {\n  static get widths(): { [size: string]: string } {\n    return {\n      small: '400px',\n      medium: '600px',\n      large: '655px',\n      xlarge: '800px'\n    };\n  }\n\n  static get styles() {\n    return css`\n      :host {\n        position: absolute;\n        z-index: 10000;\n        font-family: var(--font-family);\n        background: white;\n      }\n\n      .flex-grow {\n        flex-grow: 1;\n      }\n\n      .flex {\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        position: relative;\n        left: 0px;\n        top: 0px;\n        align-items: center;\n        height: 100vh;\n      }\n\n      .mobile .flex {\n        height: 100%;\n        position: fixed;\n      }\n\n      .mobile .grow-top {\n        flex-grow: 0;\n      }\n\n      .mobile .grow-bottom {\n        flex-grow: 0;\n      }\n\n      .grow-top {\n        flex-grow: 1;\n      }\n\n      .grow-bottom {\n        flex-grow: 3;\n      }\n\n      .bottom-padding {\n        padding: 3rem;\n      }\n\n      .dialog-mask {\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 0, 0, 0.5);\n        opacity: 0;\n        position: fixed;\n        top: 0px;\n        left: 0px;\n        transition: opacity linear calc(var(--transition-speed) / 2ms);\n        pointer-events: none;\n      }\n\n      .mobile.dialog-mask .dialog-container {\n        border-radius: 0px;\n      }\n\n      .dialog-mask .dialog-container {\n        \n        position: relative;\n        transition: transform var(--transition-speed) ease-in-out,\n          opacity ease-in-out calc(var(--transition-speed) - 50ms);\n        border-radius: var(--curvature);\n        box-shadow: 0px 0px 2px 4px rgba(0, 0, 0, 0.06);\n        overflow: hidden;\n        transform: scale(0.9) translatey(2em);\n        background: white;\n        margin: auto;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .dialog-body {\n        background: #fff;\n        overflow-y: auto;\n        overflow-x: hidden;\n        flex-grow: 1;\n      }\n\n      .dialog-mask.dialog-open {\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      .dialog-mask.dialog-open .dialog-container {\n        top: inherit;\n      }\n\n      .dialog-mask.dialog-animation-end .dialog-container {\n        transform: scale(1) translate(0, 0) !important;\n      }\n\n      .dialog-mask.dialog-ready .dialog-container {\n        transform: none;\n      }\n\n      .dialog-mask.dialog-loading .dialog-container {\n        margin-top: -10000px;\n      }\n\n      .header-text {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        font-size: 20px;\n        padding: 12px 20px;\n        color: var(--header-text);\n        background: var(--header-bg);\n      }\n\n      .header-text .title {\n        flex-grow: 1;\n      }\n\n      .header-text .status {\n        font-size: 0.6em;\n        font-weight: bold;\n      }\n\n      .dialog-footer {\n        background: var(--color-primary-light);\n        padding: 10px;\n        display: flex;\n        flex-flow: row;\n        align-items: center;\n      }\n\n      temba-button {\n        margin-left: 10px;\n      }\n\n      .dialog-body temba-loading {\n        position: absolute;\n        right: 12px;\n        margin-top: -30px;\n        padding-bottom: 9px;\n        display: none;\n      }\n\n      #page-loader {\n        text-align: center;\n        display: block;\n        position: relative;\n        opacity: 0;\n        margin: auto;\n        margin-top: 30px;\n        width: 154px;\n        transition: opacity calc(var(--transition-speed) * 5ms) ease-in\n          calc(var(--transition-speed * 2));\n        visibility: hidden;\n      }\n\n      .dialog-mask.dialog-loading #page-loader {\n        opacity: 1;\n        visibility: visible;\n      }\n\n      #submit-loader {\n        flex-grow: 1;\n        text-align: right;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  open: boolean;\n\n  @property()\n  header: string;\n\n  @property()\n  body: string;\n\n  @property({ type: Boolean })\n  submitting: boolean;\n\n  @property({ type: Boolean })\n  destructive: boolean;\n\n  @property({ type: Boolean })\n  disabled: boolean;\n\n  @property({ type: Boolean })\n  loading: boolean;\n\n  @property({ type: Boolean })\n  hideOnClick: boolean;\n\n  @property({ type: Boolean })\n  noFocus: boolean;\n\n  @property()\n  size = 'medium';\n\n  @property({ type: String })\n  primaryButtonName = 'Ok';\n\n  @property({ type: String })\n  cancelButtonName = 'Cancel';\n\n  @property({ type: String })\n  width = null;\n\n  @property()\n  submittingName = 'Saving';\n\n  @property()\n  animationEnd: boolean;\n\n  @property()\n  ready: boolean;\n\n  @property({ type: Array })\n  buttons: DialogButton[] = [];\n\n  @property({ attribute: false })\n  onButtonClicked: (button: Button) => void;\n\n  @property({ type: Number })\n  originX: number | null = null;\n\n  @property({ type: Number })\n  originY: number | null = null;\n\n  scrollOffset: any = 0;\n\n  public constructor() {\n    super();\n  }\n\n  private updateButtons() {\n    this.buttons = [];\n    if (this.cancelButtonName) {\n      this.buttons.push({\n        name: this.cancelButtonName,\n        type: ButtonType.SECONDARY,\n        closes: true\n      });\n    }\n\n    if (this.primaryButtonName) {\n      this.buttons.push({\n        name: this.primaryButtonName,\n        type: ButtonType.PRIMARY\n      });\n    }\n    this.requestUpdate();\n  }\n\n  public updated(changes: Map<string, any>) {\n    super.updated(changes);\n\n    if (changes.has('cancelButtonName') || changes.has('primaryButtonName')) {\n      this.updateButtons();\n    }\n\n    if (changes.has('open')) {\n      const body = document.querySelector('body');\n\n      if (this.open) {\n        if (this.originX != null && this.originY != null) {\n          // Spring-from-origin animation: measure final position, then\n          // set initial transform at click point and transition to center\n          const ox = this.originX;\n          const oy = this.originY;\n          this.originX = null;\n          this.originY = null;\n\n          requestAnimationFrame(() => {\n            const container = this.shadowRoot?.querySelector(\n              '.dialog-container'\n            ) as HTMLElement;\n            if (container) {\n              const rect = container.getBoundingClientRect();\n              const cx = rect.left + rect.width / 2;\n              const cy = rect.top + rect.height / 2;\n              const dx = ox - cx;\n              const dy = oy - cy;\n\n              // Disable transition so we can set the start position instantly\n              container.style.transition = 'none';\n              container.style.transform = `translate(${dx}px, ${dy}px) scale(0.2)`;\n              // Force reflow to register the start position\n              container.getBoundingClientRect();\n\n              // Re-enable transition and trigger animation to final position\n              container.style.transition = '';\n              this.animationEnd = true;\n              window.setTimeout(() => {\n                this.ready = true;\n                this.animationEnd = false;\n                container.style.transform = '';\n              }, 400);\n            }\n          });\n        } else {\n          // Default animation (no origin)\n          this.animationEnd = true;\n          window.setTimeout(() => {\n            this.ready = true;\n            this.animationEnd = false;\n          }, 400);\n        }\n\n        this.scrollOffset = -document.documentElement.scrollTop;\n        body.style.position = 'fixed';\n        body.style.overflowY = 'scroll';\n        body.style.top = this.scrollOffset + 'px';\n        body.style.width = '100%';\n        body.style.overflowY = 'hidden';\n      } else {\n        body.style.position = '';\n        body.style.overflowY = '';\n        body.style.width = '';\n        body.style.marginRight = '';\n        body.style.paddingRight = '0px';\n        window.scrollTo(0, parseInt(this.scrollOffset || '0') * -1);\n      }\n\n      // make sure our buttons aren't in progress on show\n      if (this.open && !changes.get('open')) {\n        this.shadowRoot\n          .querySelectorAll('temba-button')\n          .forEach((button: Button) => {\n            if (button) button.submitting = false;\n          });\n\n        if (!this.noFocus) {\n          this.focusFirstInput();\n        }\n      } else {\n        window.setTimeout(() => {\n          this.ready = false;\n        }, 400);\n      }\n    }\n  }\n\n  public focusFirstInput(): void {\n    window.setTimeout(() => {\n      let input = this.querySelector(\n        'temba-textinput, temba-completion, input[type=\"text\"], textarea'\n      ) as any;\n      if (input) {\n        input = input.textInputElement || input.inputElement || input;\n        if (!input.readOnly) {\n          input.focus();\n          input.click();\n        }\n      }\n    }, 100);\n  }\n\n  public handleClick(evt: MouseEvent) {\n    const button = evt.currentTarget as Button;\n    if (!button.disabled) {\n      let detail: DialogButton = {};\n      if (button.index >= 0 && button.index < this.buttons.length) {\n        detail = this.buttons[button.index];\n      }\n\n      this.fireCustomEvent(CustomEventType.ButtonClicked, { button, detail });\n      if (button.name === this.cancelButtonName || (detail && detail.closes)) {\n        this.open = false;\n      }\n    }\n  }\n\n  private getDocumentHeight(): number {\n    const body = document.body;\n    const html = document.documentElement;\n    return Math.max(\n      body.scrollHeight,\n      body.offsetHeight,\n      html.clientHeight,\n      html.scrollHeight,\n      html.offsetHeight\n    );\n  }\n\n  private clickCancel() {\n    const cancel = this.getCancelButton();\n    if (cancel) {\n      cancel.click();\n    }\n  }\n\n  public getCancelButton(): Button {\n    return this.shadowRoot.querySelector(\n      `temba-button[name='${this.cancelButtonName}']`\n    );\n  }\n\n  public getPrimaryButton(): Button {\n    return this.shadowRoot.querySelector(`temba-button[primary]`);\n  }\n\n  private handleKeyUp(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.clickCancel();\n    }\n  }\n\n  private handleClickMask(event: MouseEvent) {\n    if (this.hideOnClick) {\n      const id = (event.target as HTMLElement).id;\n      if (id === 'dialog-mask' || id === 'dialog-bg') {\n        this.fireCustomEvent(CustomEventType.DialogHidden);\n        this.clickCancel();\n      }\n    }\n  }\n\n  public show(): void {\n    this.open = true;\n  }\n\n  public hide(): void {\n    this.open = false;\n  }\n\n  public render(): TemplateResult {\n    const dialogStyle = {\n      width: this.width\n    };\n\n    if (!this.width) {\n      dialogStyle['width'] = Dialog.widths[this.size];\n    }\n\n    if (this.isMobile()) {\n      dialogStyle['width'] = '100%';\n      dialogStyle['height'] = '100%';\n      delete dialogStyle['maxWidth'];\n    }\n\n    const header = this.header\n      ? html`\n          <div class=\"dialog-header\">\n            <div class=\"header-text\">\n              <div class=\"title\">${this.header}</div>\n            </div>\n          </div>\n        `\n      : null;\n\n    return html`\n      <div\n        id=\"dialog-mask\"\n        @click=${this.handleClickMask}\n        class=\"dialog-mask ${getClasses({\n          'dialog-open': this.open,\n          'dialog-loading': this.loading,\n          'dialog-animation-end': this.animationEnd,\n          'dialog-ready': this.ready,\n          mobile: this.isMobile()\n        })}\"\n      >\n        <div style=\"position: absolute; width: 100%;\">\n          <temba-loading\n            id=\"page-loader\"\n            units=\"6\"\n            size=\"12\"\n            color=\"#ccc\"\n          ></temba-loading>\n        </div>\n\n        <div class=\"flex\">\n          <div class=\"grow-top\" style=\"${\n            this.isMobile() ? 'flex-grow:0' : ''\n          }\"></div>\n          <div\n            @keyup=${this.handleKeyUp}\n            style=${styleMap(dialogStyle)}\n            class=\"dialog-container\"\n          >\n            ${header}\n            <div class=\"dialog-body\" @keypress=${this.handleKeyUp}>\n              ${this.body ? this.body : html`<slot></slot>`}\n              <temba-loading units=\"6\" size=\"8\"></temba-loading>\n            </div>\n\n            <div class=\"dialog-footer\">\n              <div class=\"flex-grow\">\n                <slot name=\"gutter\"></slot>\n              </div>\n              ${this.buttons.map(\n                (button: DialogButton, index) => html`\n                  <temba-button\n                    name=${button.name}\n                    ?destructive=${button.type == 'primary' && this.destructive}\n                    ?primary=${button.type == 'primary' && !this.destructive}\n                    ?secondary=${button.type == 'secondary'}\n                    ?submitting=${this.submitting}\n                    ?disabled=${this.disabled && !button.closes}\n                    index=${index}\n                    @click=${this.handleClick}\n                  ></temba-button>\n                `\n              )}\n              </div>\n            </div>\n            <div class=\"grow-bottom\"></div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}