@nyaruka/temba-components 0.131.1 → 0.131.3

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

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

package/out-tsc/src/interfaces.js

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

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

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

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

@@ -0,0 +1,346 @@
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { RapidElement } from '../RapidElement';
+import { CustomEventType } from '../interfaces';
+import { getClasses } from '../utils';
+import { FloatingTab } from '../display/FloatingTab';
+export class FloatingWindow extends RapidElement {
+    constructor() {
+        super(...arguments);
+        this.header = '';
+        this.width = 500;
+        this.minHeight = 200;
+        this.maxHeight = 800;
+        this.top = 100;
+        this.left = -1; // -1 means calculate from right side
+        this.hidden = true;
+        this.dragging = false;
+        this.chromeless = false;
+        this.color = '#6B7280';
+        this.dragStartX = 0;
+        this.dragStartY = 0;
+        this.dragOffsetX = 0;
+        this.dragOffsetY = 0;
+        this.positionFromRight = false;
+        this.defaultTop = 100;
+        this.defaultLeft = -1;
+        this.handleSlotMouseDown = (event) => {
+            // check if the target or any parent has the drag-handle class
+            const target = event.target;
+            const dragHandle = target.closest('.drag-handle');
+            if (!dragHandle) {
+                return;
+            }
+            this.dragging = true;
+            this.dragStartX = event.clientX;
+            this.dragStartY = event.clientY;
+            this.dragOffsetX = this.left;
+            this.dragOffsetY = this.top;
+            document.addEventListener('mousemove', this.handleMouseMove);
+            document.addEventListener('mouseup', this.handleMouseUp);
+            event.preventDefault();
+        };
+        this.handleMouseMove = (event) => {
+            var _a;
+            if (!this.dragging)
+                return;
+            const deltaX = event.clientX - this.dragStartX;
+            const deltaY = event.clientY - this.dragStartY;
+            this.left = this.dragOffsetX + deltaX;
+            this.top = this.dragOffsetY + deltaY;
+            // keep window within viewport bounds with 20px padding
+            const padding = 20;
+            this.left = Math.max(padding, Math.min(this.left, window.innerWidth - this.width - padding));
+            // get the actual rendered height of the window element
+            const windowElement = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.window');
+            const currentHeight = (windowElement === null || windowElement === void 0 ? void 0 : windowElement.offsetHeight) || this.maxHeight || window.innerHeight;
+            const maxTop = Math.max(padding, window.innerHeight - currentHeight - padding);
+            this.top = Math.max(padding, Math.min(this.top, maxTop));
+        };
+        this.handleMouseUp = () => {
+            this.dragging = false;
+            document.removeEventListener('mousemove', this.handleMouseMove);
+            document.removeEventListener('mouseup', this.handleMouseUp);
+            // once user drags the window, stop auto-positioning from right
+            this.positionFromRight = false;
+        };
+        this.handleResize = () => {
+            var _a;
+            // only constrain position if window is visible
+            if (this.hidden)
+                return;
+            const padding = 20;
+            const windowElement = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.window');
+            const currentHeight = (windowElement === null || windowElement === void 0 ? void 0 : windowElement.offsetHeight) || this.maxHeight || window.innerHeight;
+            // if positioned from right, always recalculate from right edge
+            if (this.positionFromRight) {
+                this.left = window.innerWidth - this.width - padding;
+            }
+            else {
+                // only adjust left if out of bounds
+                const minLeft = padding;
+                const maxLeft = window.innerWidth - this.width - padding;
+                if (this.left < minLeft) {
+                    this.left = minLeft;
+                }
+                else if (this.left > maxLeft) {
+                    this.left = maxLeft;
+                }
+            }
+            // only adjust top if out of bounds
+            const minTop = padding;
+            const maxTop = Math.max(padding, window.innerHeight - currentHeight - padding);
+            if (this.top < minTop) {
+                this.top = minTop;
+            }
+            else if (this.top > maxTop) {
+                this.top = maxTop;
+            }
+        };
+    }
+    static get styles() {
+        return css `
+      .window.hidden {
+        transform: translateX(100%);
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      .window {
+        transition: transform var(--transition-duration, 300ms) ease-in-out,
+          opacity var(--transition-duration, 300ms) ease-in-out;
+        position: fixed;
+        z-index: 9999;
+        top: 100px;
+        background: white;
+        border-radius: 8px;
+        box-shadow: -4px 4px 20px rgba(0, 0, 0, 0.3);
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      .window.chromeless {
+        background: transparent;
+        border-radius: 0;
+        box-shadow: none;
+      }
+
+      .window.dragging {
+        user-select: none;
+        cursor: move;
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 6px 6px;
+        background: var(--header-color, var(--color-primary-light, #f3f4f6));
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        cursor: move;
+        user-select: none;
+      }
+
+      .title {
+        font-weight: 600;
+        font-size: 16px;
+        color: white;
+        padding-left: 8px;
+      }
+
+      .close-button {
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        transition: background-color calc(var(--transition-duration, 150ms) / 2)
+          ease-in-out;
+      }
+
+      .close-button:hover {
+        background-color: rgba(255, 255, 255, 0.2);
+      }
+
+      .close-button temba-icon {
+        --icon-color: white;
+      }
+
+      .body {
+        flex: 1;
+        overflow-y: auto;
+        padding: 16px;
+      }
+
+      .window.chromeless .body {
+        padding: 0;
+      }
+
+      ::slotted(.drag-handle) {
+        cursor: move;
+        user-select: none;
+        border: 1px solid red;
+      }
+    `;
+    }
+    firstUpdated(changes) {
+        super.firstUpdated(changes);
+        // store the default position from properties
+        this.defaultTop = this.top;
+        this.defaultLeft = this.left;
+        // determine if we should position from right side
+        if (this.left === -1) {
+            this.positionFromRight = true;
+        }
+        // set up drag handle listeners for chromeless windows
+        if (this.chromeless) {
+            this.setupDragHandles();
+        }
+        // listen for window resize to keep window in bounds
+        window.addEventListener('resize', this.handleResize);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('resize', this.handleResize);
+    }
+    setupDragHandles() {
+        // listen for mousedown on slotted content
+        this.addEventListener('mousedown', this.handleSlotMouseDown);
+    }
+    updated(changes) {
+        super.updated(changes);
+        if (changes.has('hidden')) {
+            this.classList.toggle('hidden', this.hidden);
+            // when hiding, reset positioning behavior to original
+            if (this.hidden && !changes.get('hidden')) {
+                if (this.defaultLeft === -1) {
+                    this.positionFromRight = true;
+                }
+            }
+            // reset to default position when showing
+            if (!this.hidden && changes.get('hidden')) {
+                // reset top to default
+                this.top = this.defaultTop;
+                // if positioned from right, recalculate based on current viewport
+                if (this.positionFromRight) {
+                    this.left = window.innerWidth - this.width - 20;
+                }
+                else {
+                    // reset left to default
+                    this.left = this.defaultLeft;
+                }
+            }
+        }
+        // setup drag handles if chromeless changed to true
+        if (changes.has('chromeless') && this.chromeless) {
+            this.setupDragHandles();
+        }
+    }
+    handleClose() {
+        this.hidden = true;
+        // show all tabs when window is closed
+        FloatingTab.showAllTabs();
+        this.fireCustomEvent(CustomEventType.DialogHidden);
+    }
+    handleHeaderMouseDown(event) {
+        // don't start drag if clicking on close button
+        if (event.target.closest('.close-button')) {
+            return;
+        }
+        this.dragging = true;
+        this.dragStartX = event.clientX;
+        this.dragStartY = event.clientY;
+        this.dragOffsetX = this.left;
+        this.dragOffsetY = this.top;
+        document.addEventListener('mousemove', this.handleMouseMove);
+        document.addEventListener('mouseup', this.handleMouseUp);
+        event.preventDefault();
+    }
+    show() {
+        this.hidden = false;
+    }
+    hide() {
+        this.hidden = true;
+    }
+    close() {
+        this.hidden = true;
+        // show all tabs when window is closed
+        FloatingTab.showAllTabs();
+        this.fireCustomEvent(CustomEventType.DialogHidden);
+    }
+    render() {
+        const minHeightStyle = this.minHeight
+            ? `min-height: ${this.minHeight}px;`
+            : '';
+        const maxHeightStyle = this.maxHeight
+            ? `max-height: ${this.maxHeight}px;`
+            : '';
+        const windowStyle = `
+      width: ${this.width}px;
+      ${minHeightStyle}
+      ${maxHeightStyle}
+      top: ${this.top}px;
+      left: ${this.left}px;
+      --header-color: ${this.color};
+    `;
+        const windowClasses = getClasses({
+            window: true,
+            dragging: this.dragging,
+            hidden: this.hidden,
+            chromeless: this.chromeless
+        });
+        return html `
+      <div class="${windowClasses}" style="${windowStyle}">
+        ${!this.chromeless
+            ? html `
+              <div class="header" @mousedown=${this.handleHeaderMouseDown}>
+                <div class="title">${this.header}</div>
+                <button class="close-button" @click=${this.handleClose}>
+                  <temba-icon name="close" size="1.5"></temba-icon>
+                </button>
+              </div>
+            `
+            : ''}
+        <div class="body">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], FloatingWindow.prototype, "header", void 0);
+__decorate([
+    property({ type: Number })
+], FloatingWindow.prototype, "width", void 0);
+__decorate([
+    property({ type: Number })
+], FloatingWindow.prototype, "minHeight", void 0);
+__decorate([
+    property({ type: Number })
+], FloatingWindow.prototype, "maxHeight", void 0);
+__decorate([
+    property({ type: Number })
+], FloatingWindow.prototype, "top", void 0);
+__decorate([
+    property({ type: Number })
+], FloatingWindow.prototype, "left", void 0);
+__decorate([
+    property({ type: Boolean })
+], FloatingWindow.prototype, "hidden", void 0);
+__decorate([
+    property({ type: Boolean })
+], FloatingWindow.prototype, "dragging", void 0);
+__decorate([
+    property({ type: Boolean })
+], FloatingWindow.prototype, "chromeless", void 0);
+__decorate([
+    property({ type: String })
+], FloatingWindow.prototype, "color", void 0);
+//# sourceMappingURL=FloatingWindow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingWindow.js","sourceRoot":"","sources":["../../../src/layout/FloatingWindow.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { CustomEventType } from '../interfaces';\nimport { getClasses } from '../utils';\nimport { FloatingTab } from '../display/FloatingTab';\n\nexport class FloatingWindow extends RapidElement {\n  static get styles() {\n    return css`\n      .window.hidden {\n        transform: translateX(100%);\n        opacity: 0;\n        pointer-events: none;\n      }\n\n      .window {\n        transition: transform var(--transition-duration, 300ms) ease-in-out,\n          opacity var(--transition-duration, 300ms) ease-in-out;\n        position: fixed;\n        z-index: 9999;\n        top: 100px;\n        background: white;\n        border-radius: 8px;\n        box-shadow: -4px 4px 20px rgba(0, 0, 0, 0.3);\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n      }\n\n      .window.chromeless {\n        background: transparent;\n        border-radius: 0;\n        box-shadow: none;\n      }\n\n      .window.dragging {\n        user-select: none;\n        cursor: move;\n      }\n\n      .header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 6px 6px;\n        background: var(--header-color, var(--color-primary-light, #f3f4f6));\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        cursor: move;\n        user-select: none;\n      }\n\n      .title {\n        font-weight: 600;\n        font-size: 16px;\n        color: white;\n        padding-left: 8px;\n      }\n\n      .close-button {\n        background: none;\n        border: none;\n        cursor: pointer;\n        padding: 4px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border-radius: 4px;\n        transition: background-color calc(var(--transition-duration, 150ms) / 2)\n          ease-in-out;\n      }\n\n      .close-button:hover {\n        background-color: rgba(255, 255, 255, 0.2);\n      }\n\n      .close-button temba-icon {\n        --icon-color: white;\n      }\n\n      .body {\n        flex: 1;\n        overflow-y: auto;\n        padding: 16px;\n      }\n\n      .window.chromeless .body {\n        padding: 0;\n      }\n\n      ::slotted(.drag-handle) {\n        cursor: move;\n        user-select: none;\n        border: 1px solid red;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  header = '';\n\n  @property({ type: Number })\n  width = 500;\n\n  @property({ type: Number })\n  minHeight = 200;\n\n  @property({ type: Number })\n  maxHeight = 800;\n\n  @property({ type: Number })\n  top = 100;\n\n  @property({ type: Number })\n  left = -1; // -1 means calculate from right side\n\n  @property({ type: Boolean })\n  hidden = true;\n\n  @property({ type: Boolean })\n  dragging = false;\n\n  @property({ type: Boolean })\n  chromeless = false;\n\n  @property({ type: String })\n  color = '#6B7280';\n\n  private dragStartX = 0;\n  private dragStartY = 0;\n  private dragOffsetX = 0;\n  private dragOffsetY = 0;\n  private positionFromRight = false;\n  private defaultTop = 100;\n  private defaultLeft = -1;\n\n  public firstUpdated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changes);\n\n    // store the default position from properties\n    this.defaultTop = this.top;\n    this.defaultLeft = this.left;\n\n    // determine if we should position from right side\n    if (this.left === -1) {\n      this.positionFromRight = true;\n    }\n\n    // set up drag handle listeners for chromeless windows\n    if (this.chromeless) {\n      this.setupDragHandles();\n    }\n\n    // listen for window resize to keep window in bounds\n    window.addEventListener('resize', this.handleResize);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener('resize', this.handleResize);\n  }\n\n  private setupDragHandles() {\n    // listen for mousedown on slotted content\n    this.addEventListener('mousedown', this.handleSlotMouseDown);\n  }\n\n  private handleSlotMouseDown = (event: MouseEvent) => {\n    // check if the target or any parent has the drag-handle class\n    const target = event.target as HTMLElement;\n    const dragHandle = target.closest('.drag-handle');\n\n    if (!dragHandle) {\n      return;\n    }\n\n    this.dragging = true;\n    this.dragStartX = event.clientX;\n    this.dragStartY = event.clientY;\n    this.dragOffsetX = this.left;\n    this.dragOffsetY = this.top;\n\n    document.addEventListener('mousemove', this.handleMouseMove);\n    document.addEventListener('mouseup', this.handleMouseUp);\n\n    event.preventDefault();\n  };\n\n  public updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('hidden')) {\n      this.classList.toggle('hidden', this.hidden);\n\n      // when hiding, reset positioning behavior to original\n      if (this.hidden && !changes.get('hidden')) {\n        if (this.defaultLeft === -1) {\n          this.positionFromRight = true;\n        }\n      }\n\n      // reset to default position when showing\n      if (!this.hidden && changes.get('hidden')) {\n        // reset top to default\n        this.top = this.defaultTop;\n\n        // if positioned from right, recalculate based on current viewport\n        if (this.positionFromRight) {\n          this.left = window.innerWidth - this.width - 20;\n        } else {\n          // reset left to default\n          this.left = this.defaultLeft;\n        }\n      }\n    }\n\n    // setup drag handles if chromeless changed to true\n    if (changes.has('chromeless') && this.chromeless) {\n      this.setupDragHandles();\n    }\n  }\n\n  private handleClose() {\n    this.hidden = true;\n    // show all tabs when window is closed\n    FloatingTab.showAllTabs();\n    this.fireCustomEvent(CustomEventType.DialogHidden);\n  }\n\n  private handleHeaderMouseDown(event: MouseEvent) {\n    // don't start drag if clicking on close button\n    if ((event.target as HTMLElement).closest('.close-button')) {\n      return;\n    }\n\n    this.dragging = true;\n    this.dragStartX = event.clientX;\n    this.dragStartY = event.clientY;\n    this.dragOffsetX = this.left;\n    this.dragOffsetY = this.top;\n\n    document.addEventListener('mousemove', this.handleMouseMove);\n    document.addEventListener('mouseup', this.handleMouseUp);\n\n    event.preventDefault();\n  }\n\n  private handleMouseMove = (event: MouseEvent) => {\n    if (!this.dragging) return;\n\n    const deltaX = event.clientX - this.dragStartX;\n    const deltaY = event.clientY - this.dragStartY;\n\n    this.left = this.dragOffsetX + deltaX;\n    this.top = this.dragOffsetY + deltaY;\n\n    // keep window within viewport bounds with 20px padding\n    const padding = 20;\n    this.left = Math.max(\n      padding,\n      Math.min(this.left, window.innerWidth - this.width - padding)\n    );\n\n    // get the actual rendered height of the window element\n    const windowElement = this.shadowRoot?.querySelector(\n      '.window'\n    ) as HTMLElement;\n    const currentHeight =\n      windowElement?.offsetHeight || this.maxHeight || window.innerHeight;\n    const maxTop = Math.max(\n      padding,\n      window.innerHeight - currentHeight - padding\n    );\n    this.top = Math.max(padding, Math.min(this.top, maxTop));\n  };\n\n  private handleMouseUp = () => {\n    this.dragging = false;\n    document.removeEventListener('mousemove', this.handleMouseMove);\n    document.removeEventListener('mouseup', this.handleMouseUp);\n\n    // once user drags the window, stop auto-positioning from right\n    this.positionFromRight = false;\n  };\n\n  private handleResize = () => {\n    // only constrain position if window is visible\n    if (this.hidden) return;\n\n    const padding = 20;\n    const windowElement = this.shadowRoot?.querySelector(\n      '.window'\n    ) as HTMLElement;\n    const currentHeight =\n      windowElement?.offsetHeight || this.maxHeight || window.innerHeight;\n\n    // if positioned from right, always recalculate from right edge\n    if (this.positionFromRight) {\n      this.left = window.innerWidth - this.width - padding;\n    } else {\n      // only adjust left if out of bounds\n      const minLeft = padding;\n      const maxLeft = window.innerWidth - this.width - padding;\n\n      if (this.left < minLeft) {\n        this.left = minLeft;\n      } else if (this.left > maxLeft) {\n        this.left = maxLeft;\n      }\n    }\n\n    // only adjust top if out of bounds\n    const minTop = padding;\n    const maxTop = Math.max(\n      padding,\n      window.innerHeight - currentHeight - padding\n    );\n\n    if (this.top < minTop) {\n      this.top = minTop;\n    } else if (this.top > maxTop) {\n      this.top = maxTop;\n    }\n  };\n\n  public show() {\n    this.hidden = false;\n  }\n\n  public hide() {\n    this.hidden = true;\n  }\n\n  public close() {\n    this.hidden = true;\n    // show all tabs when window is closed\n    FloatingTab.showAllTabs();\n    this.fireCustomEvent(CustomEventType.DialogHidden);\n  }\n\n  public render(): TemplateResult {\n    const minHeightStyle = this.minHeight\n      ? `min-height: ${this.minHeight}px;`\n      : '';\n    const maxHeightStyle = this.maxHeight\n      ? `max-height: ${this.maxHeight}px;`\n      : '';\n\n    const windowStyle = `\n      width: ${this.width}px;\n      ${minHeightStyle}\n      ${maxHeightStyle}\n      top: ${this.top}px;\n      left: ${this.left}px;\n      --header-color: ${this.color};\n    `;\n\n    const windowClasses = getClasses({\n      window: true,\n      dragging: this.dragging,\n      hidden: this.hidden,\n      chromeless: this.chromeless\n    });\n\n    return html`\n      <div class=\"${windowClasses}\" style=\"${windowStyle}\">\n        ${!this.chromeless\n          ? html`\n              <div class=\"header\" @mousedown=${this.handleHeaderMouseDown}>\n                <div class=\"title\">${this.header}</div>\n                <button class=\"close-button\" @click=${this.handleClose}>\n                  <temba-icon name=\"close\" size=\"1.5\"></temba-icon>\n                </button>\n              </div>\n            `\n          : ''}\n        <div class=\"body\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}