@nyaruka/temba-components 0.129.9 → 0.129.11

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldElement.js","sourceRoot":"","sources":["../../../src/form/FieldElement.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { renderMarkdownInline } from '../markdown';\n\n/**\n * FieldElement is a base class for form components that provides built-in\n * field wrapper functionality, eliminating the need for manual temba-field embedding.\n *\n * Components extending this class only need to implement renderWidget() with their\n * specific widget content, and the field wrapper (label, errors, help text) is\n * automatically handled.\n */\nexport abstract class FieldElement extends RapidElement {\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String, attribute: 'help_text' })\n  helpText: string;\n\n  @property({ type: Boolean, attribute: 'widget_only' })\n  widgetOnly: boolean;\n\n  @property({ type: Array })\n  errors: string[];\n\n  // Use @property with custom getter/setter to handle both attribute and programmatic access\n  private _value: any = '';\n\n  @property({ type: String })\n  public get value() {\n    return this._value;\n  }\n\n  public set value(value) {\n    this._value = value;\n  }\n\n  @property({ attribute: false })\n  inputRoot: HTMLElement = this;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  static formAssociated = true;\n\n  protected internals: ElementInternals;\n\n  @property({ type: Boolean })\n  hideErrors = false;\n\n  @property({ type: Boolean, attribute: 'hide_label' })\n  hideLabel: boolean;\n\n  @property({ type: String })\n  label: string;\n\n  constructor() {\n    super();\n    this.internals = this.attachInternals();\n  }\n\n  static get styles() {\n    return css`\n      :host {\n        font-family: var(--font-family);\n      }\n\n      label {\n        margin-bottom: 5px;\n        margin-left: 4px;\n        display: block;\n        font-weight: 400;\n        font-size: var(--label-size);\n        letter-spacing: 0.05em;\n        line-height: normal;\n        color: var(--color-label, #777);\n      }\n\n      .help-text {\n        font-size: var(--help-text-size);\n        line-height: normal;\n        color: var(--color-text-help);\n        margin-left: var(--help-text-margin-left);\n        margin-top: 6px;\n        opacity: 1;\n      }\n\n      .alert-error {\n        position: absolute;\n        top: 100%;\n        left: 0;\n        right: 0;\n        z-index: 1000;\n        background: white;\n        border: 1px solid var(--color-error);\n        color: var(--color-error);\n        padding: 8px 12px;\n        margin: 2px 0 0 0;\n        border-radius: var(--curvature);\n        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n          0 2px 4px -1px rgba(0, 0, 0, 0.06);\n        font-size: 0.85em;\n        line-height: 1.2;\n        opacity: 0;\n        visibility: hidden;\n        transform: translateY(-12px);\n        transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out,\n          transform 0.2s ease-in-out;\n      }\n\n      .field:hover .alert-error {\n        opacity: 1;\n        visibility: visible;\n        transform: translateY(2px);\n      }\n\n      /* Hide error popup when widget is focused */\n      .field:focus-within .alert-error {\n        opacity: 0;\n        visibility: hidden;\n        transform: translateY(-4px);\n      }\n\n      .field.has-error {\n        position: relative;\n        /* Set CSS custom properties that form components can use */\n        --color-widget-border: var(--color-error);\n        --widget-box-shadow-focused: var(\n          --widget-box-shadow-focused-error,\n          0 0 0 3px rgba(255, 99, 71, 0.3)\n        );\n        --color-focus: var(--color-error);\n      }\n\n      .field.has-error .widget {\n        border-radius: var(--curvature-widget);\n        position: relative;\n      }\n\n      /* Force error styling with higher specificity */\n      :host(.has-error) .field.has-error .widget .input-container,\n      :host(.has-error) .field.has-error .widget .select-container,\n      :host(.has-error) .field.has-error .widget .comp-container,\n      :host(.has-error) .field.has-error .widget .checkbox-container,\n      :host(.has-error) .field.has-error .widget .container,\n      :host(.has-error) .field.has-error .widget .range-container,\n      .field.has-error .widget .input-container,\n      .field.has-error .widget .select-container,\n      .field.has-error .widget .comp-container,\n      .field.has-error .widget .checkbox-container,\n      .field.has-error .widget .container,\n      .field.has-error .widget .range-container {\n        border-color: var(--color-error) !important;\n      }\n\n      /* When error field is focused, use error-colored focus ring */\n      :host(.has-error) .field.has-error .widget .input-container:focus-within,\n      :host(.has-error) .field.has-error .widget .select-container:focus-within,\n      :host(.has-error) .field.has-error .widget .select-container.focused,\n      :host(.has-error) .field.has-error .widget .comp-container:focus-within,\n      :host(.has-error)\n        .field.has-error\n        .widget\n        .checkbox-container:focus-within,\n      :host(.has-error) .field.has-error .widget .container:focus-within,\n      :host(.has-error) .field.has-error .widget .range-container:focus-within,\n      .field.has-error .widget .input-container:focus-within,\n      .field.has-error .widget .select-container:focus-within,\n      .field.has-error .widget .select-container.focused,\n      .field.has-error .widget .comp-container:focus-within,\n      .field.has-error .widget .checkbox-container:focus-within,\n      .field.has-error .widget .container:focus-within,\n      .field.has-error .widget .range-container:focus-within {\n        border-color: var(--color-error) !important;\n        box-shadow: var(\n          --widget-box-shadow-focused-error,\n          0 0 0 3px rgba(255, 99, 71, 0.3)\n        ) !important;\n      }\n\n      .alert-error p {\n        margin: 0;\n        padding: 0;\n      }\n\n      .disabled {\n        opacity: var(--disabled-opacity) !important;\n        pointer-events: none !important;\n      }\n    `;\n  }\n\n  updated(changedProperties: Map<string, any>): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('value')) {\n      this.internals.setFormValue(this.value);\n    }\n\n    if (\n      changedProperties.has('errors') ||\n      changedProperties.has('hideErrors')\n    ) {\n      const hasErrors =\n        !this.hideErrors && this.errors && this.errors.length > 0;\n      this.classList.toggle('has-error', hasErrors);\n    }\n  }\n\n  get form() {\n    return this.internals.form;\n  }\n\n  public setValue(value: any) {\n    this.value = this.serializeValue(value);\n  }\n\n  public getDeserializedValue(): any {\n    if (!this.value || this.value === '') {\n      return null;\n    }\n    return JSON.parse(this.value);\n  }\n\n  public serializeValue(value: any): string {\n    return JSON.stringify(value);\n  }\n\n  /**\n   * Abstract method that components must implement to render their specific widget content.\n   * This replaces the need to manually embed temba-field.\n   */\n  protected abstract renderWidget(): TemplateResult;\n\n  /**\n   * Renders the complete field including label, widget, errors, and help text.\n   * Components can override this for custom layouts, but typically should just implement renderWidget().\n   */\n  protected renderField(): TemplateResult {\n    const hasErrors = !this.hideErrors && this.errors && this.errors.length > 0;\n    const errors = hasErrors\n      ? this.errors.map((error: string) => {\n          return html`\n            <div class=\"alert-error\">${renderMarkdownInline(error)}</div>\n          `;\n        })\n      : [];\n\n    if (this.widgetOnly) {\n      return html`\n        <div class=\"${this.disabled ? 'disabled' : ''}\">\n          ${this.renderWidget()}\n        </div>\n        ${errors}\n      `;\n    }\n\n    return html`\n      <div\n        class=\"field ${this.disabled ? 'disabled' : ''} ${hasErrors\n          ? 'has-error'\n          : ''}\"\n      >\n        ${!!this.name && !this.hideLabel && !!this.label\n          ? html`\n              <label class=\"control-label\" for=\"${this.name}\"\n                >${this.label}</label\n              >\n            `\n          : null}\n        <div class=\"widget\">${this.renderWidget()} ${errors}</div>\n        ${this.helpText && this.helpText !== 'None'\n          ? html`\n              <div class=\"help-text\">\n                ${renderMarkdownInline(this.helpText)}\n              </div>\n            `\n          : null}\n      </div>\n    `;\n  }\n\n  /**\n   * Main render method that automatically provides field wrapper functionality.\n   * Components extending FieldElement should not override this unless they need custom field layouts.\n   */\n  public render(): TemplateResult {\n    return this.renderField();\n  }\n}\n"]}

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

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

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      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    // Ensure proper value handling for multi vs single select\n    const normalizedValue = (() => {\n      if (config.multi) {\n        // Multi-select: ensure we have an array and convert strings to option objects\n        const valueArray = Array.isArray(value) ? value : value ? [value] : [];\n        return valueArray.map((val) => {\n          if (typeof val === 'string') {\n            // Convert string values to option objects\n            return { name: val, value: val };\n          }\n          return val;\n        });\n      } else {\n        // Single select: use the value as-is\n        return value || '';\n      }\n    })();\n\n    if (typeof normalizedValue === 'string') {\n      return html`<temba-select\n        name=\"${fieldName}\"\n        ?required=\"${config.required}\"\n        .errors=\"${errors}\"\n        value=\"${config.multi ? '' : normalizedValue}\"\n        .values=\"${config.multi ? normalizedValue : undefined}\"\n        ?multi=\"${config.multi}\"\n        ?searchable=\"${config.searchable}\"\n        ?tags=\"${config.tags}\"\n        ?emails=\"${config.emails}\"\n        ?clearable=\"${config.clearable || false}\"\n        label=\"${showLabel ? config.label : ''}\"\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        ${config.options?.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    return html`<temba-select\n      name=\"${fieldName}\"\n      label=\"${showLabel ? config.label : ''}\"\n      ?required=\"${config.required}\"\n      .errors=\"${errors}\"\n      .values=\"${normalizedValue}\"\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      ${config.options?.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 { errors = [], onChange, extraClasses, style } = context;\n\n    return html`<div class=\"form-field\">\n      <temba-checkbox\n        name=\"${fieldName}\"\n        label=\"${config.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=\"${style}\"\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      ${showLabel ? html`<label>${config.label}</label>` : ''}\n      <temba-array-editor\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        .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\n/**\n * Context object for field rendering that provides additional options\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}\n"]}
+{"version":3,"file":"FieldRenderer.js","sourceRoot":"","sources":["../../../src/form/FieldRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAY3C;;;GAGG;AACH,MAAM,OAAO,aAAa;IACxB;;;;;;;OAOG;IACH,MAAM,CAAC,WAAW,CAChB,SAAiB,EACjB,MAAmB,EACnB,KAAU,EACV,UAA8B,EAAE;QAEhC;;;;;;;sBAOc;QACd,QAAQ,MAAM,CAAC,IAAI,EAAE,CAAC;YACpB,KAAK,MAAM;gBACT,OAAO,aAAa,CAAC,eAAe,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC;YAE1E,KAAK,UAAU;gBACb,OAAO,aAAa,CAAC,cAAc,CACjC,SAAS,EACT,MAA6B,EAC7B,KAAK,EACL,OAAO,CACR,CAAC;YAEJ,KAAK,QAAQ;gBACX,OAAO,aAAa,CAAC,YAAY,CAC/B,SAAS,EACT,MAA2B,EAC3B,KAAK,EACL,OAAO,CACR,CAAC;YAEJ,KAAK,UAAU;gBACb,OAAO,aAAa,CAAC,cAAc,CACjC,SAAS,EACT,MAA6B,EAC7B,KAAK,EACL,OAAO,CACR,CAAC;YAEJ,KAAK,WAAW;gBACd,OAAO,aAAa,CAAC,cAAc,CACjC,SAAS,EACT,MAA6B,EAC7B,KAAK,EACL,OAAO,CACR,CAAC;YAEJ,KAAK,OAAO;gBACV,OAAO,aAAa,CAAC,WAAW,CAC9B,SAAS,EACT,MAA0B,EAC1B,KAAK,EACL,OAAO,CACR,CAAC;YAEJ,KAAK,gBAAgB;gBACnB,OAAO,aAAa,CAAC,mBAAmB,CACtC,SAAS,EACT,MAAkC,EAClC,KAAK,EACL,OAAO,CACR,CAAC;YAEJ;gBACE,OAAO,IAAI,CAAA,gCAAiC,MAAc,CAAC,IAAI,QAAQ,CAAC;QAC5E,CAAC;IACH,CAAC;IAEO,MAAM,CAAC,eAAe,CAC5B,SAAiB,EACjB,MAAuB,EACvB,KAAU,EACV,OAA2B;QAE3B,MAAM,EACJ,MAAM,GAAG,EAAE,EACX,QAAQ,EACR,SAAS,GAAG,IAAI,EAChB,YAAY,EACZ,KAAK,EACN,GAAG,OAAO,CAAC;QAEZ,gEAAgE;QAChE,IAAI,MAAM,CAAC,SAAS,EAAE,CAAC;YACrB,OAAO,IAAI,CAAA;gBACD,SAAS;iBACR,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;qBACzB,MAAM,CAAC,QAAQ;mBACjB,MAAM;kBACP,KAAK,IAAI,EAAE;uBACN,MAAM,CAAC,WAAW,IAAI,EAAE;;qBAE1B,MAAM,CAAC,QAAQ,IAAI,EAAE;iBACzB,YAAY;iBACZ,KAAK;kBACJ,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC;2BACb,CAAC;QACxB,CAAC;QAED,OAAO,IAAI,CAAA;cACD,SAAS;eACR,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;mBACzB,MAAM,CAAC,QAAQ;iBACjB,MAAM;gBACP,KAAK,IAAI,EAAE;qBACN,MAAM,CAAC,WAAW,IAAI,EAAE;mBAC1B,MAAM,CAAC,QAAQ,IAAI,EAAE;eACzB,YAAY;eACZ,KAAK;gBACJ,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC;wBACd,CAAC;IACvB,CAAC;IAEO,MAAM,CAAC,cAAc,CAC3B,SAAiB,EACjB,MAA2B,EAC3B,KAAU,EACV,OAA2B;QAE3B,MAAM,EACJ,MAAM,GAAG,EAAE,EACX,QAAQ,EACR,SAAS,GAAG,IAAI,EAChB,YAAY,EACZ,KAAK,EACN,GAAG,OAAO,CAAC;QAEZ,MAAM,cAAc,GAAG,MAAM,CAAC,SAAS;YACrC,CAAC,CAAC,0BAA0B,MAAM,CAAC,SAAS,KAAK;YACjD,CAAC,CAAC,EAAE,CAAC;QACP,MAAM,aAAa,GAAG,GAAG,cAAc,GAAG,KAAK,EAAE,CAAC;QAElD,gEAAgE;QAChE,IAAI,MAAM,CAAC,SAAS,EAAE,CAAC;YACrB,OAAO,IAAI,CAAA;gBACD,SAAS;iBACR,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;qBACzB,MAAM,CAAC,QAAQ;mBACjB,MAAM;kBACP,KAAK,IAAI,EAAE;uBACN,MAAM,CAAC,WAAW,IAAI,EAAE;;;qBAG1B,MAAM,CAAC,QAAQ,IAAI,EAAE;iBACzB,YAAY;iBACZ,aAAa;kBACZ,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC;2BACb,CAAC;QACxB,CAAC;QAED,OAAO,IAAI,CAAA;cACD,SAAS;eACR,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;mBACzB,MAAM,CAAC,QAAQ;iBACjB,MAAM;gBACP,KAAK,IAAI,EAAE;qBACN,MAAM,CAAC,WAAW,IAAI,EAAE;;eAE9B,MAAM,CAAC,IAAI,IAAI,CAAC;mBACZ,MAAM,CAAC,QAAQ,IAAI,EAAE;eACzB,YAAY;eACZ,aAAa;gBACZ,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC;wBACd,CAAC;IACvB,CAAC;IAEO,MAAM,CAAC,YAAY,CACzB,SAAiB,EACjB,MAAyB,EACzB,KAAU,EACV,OAA2B;;QAE3B,MAAM,EACJ,MAAM,GAAG,EAAE,EACX,QAAQ,EACR,SAAS,GAAG,IAAI,EAChB,MAAM,EACN,YAAY,EACZ,KAAK,EACN,GAAG,OAAO,CAAC;QAEZ,0DAA0D;QAC1D,MAAM,eAAe,GAAG,CAAC,GAAG,EAAE;YAC5B,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC;gBACjB,8EAA8E;gBAC9E,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBACvE,OAAO,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;oBAC5B,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;wBAC5B,0CAA0C;wBAC1C,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;oBACnC,CAAC;oBACD,OAAO,GAAG,CAAC;gBACb,CAAC,CAAC,CAAC;YACL,CAAC;iBAAM,CAAC;gBACN,qCAAqC;gBACrC,OAAO,KAAK,IAAI,EAAE,CAAC;YACrB,CAAC;QACH,CAAC,CAAC,EAAE,CAAC;QAEL,IAAI,OAAO,eAAe,KAAK,QAAQ,EAAE,CAAC;YACxC,OAAO,IAAI,CAAA;gBACD,SAAS;qBACJ,MAAM,CAAC,QAAQ;mBACjB,MAAM;iBACR,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;mBACjC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS;kBAC3C,MAAM,CAAC,KAAK;uBACP,MAAM,CAAC,UAAU;iBACvB,MAAM,CAAC,IAAI;mBACT,MAAM,CAAC,MAAM;sBACV,MAAM,CAAC,SAAS,IAAI,KAAK;iBAC9B,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;uBACvB,MAAM,CAAC,WAAW,IAAI,EAAE;oBAC3B,MAAM,CAAC,QAAQ,IAAI,CAAC;oBACpB,MAAM,CAAC,QAAQ,IAAI,OAAO;mBAC3B,MAAM,CAAC,OAAO,IAAI,MAAM;oBACvB,MAAM,CAAC,QAAQ,IAAI,EAAE;qBACpB,MAAM,CAAC,QAAQ,IAAI,EAAE;kBACxB,MAAM,IAAI,MAAM,CAAC,MAAM,IAAI,OAAO;iBACnC,YAAY;iBACZ,KAAK;mBACH,MAAM,CAAC,OAAO;iCACA,MAAM,CAAC,qBAAqB;wBACrC,MAAM,CAAC,WAAW,IAAI,KAAK;mBAChC,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC;;UAE/B,MAAA,MAAM,CAAC,OAAO,0CAAE,GAAG,CAAC,CAAC,MAAW,EAAE,EAAE;gBACpC,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE,CAAC;oBAC/B,OAAO,IAAI,CAAA;sBACD,MAAM;uBACL,MAAM;6BACA,CAAC;gBACpB,CAAC;qBAAM,CAAC;oBACN,OAAO,IAAI,CAAA;sBACD,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI;uBAC1B,MAAM,CAAC,KAAK;6BACN,CAAC;gBACpB,CAAC;YACH,CAAC,CAAC;sBACY,CAAC;QACnB,CAAC;QAED,OAAO,IAAI,CAAA;cACD,SAAS;eACR,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;mBACzB,MAAM,CAAC,QAAQ;iBACjB,MAAM;iBACN,eAAe;gBAChB,MAAM,CAAC,KAAK;qBACP,MAAM,CAAC,UAAU;eACvB,MAAM,CAAC,IAAI;iBACT,MAAM,CAAC,MAAM;oBACV,MAAM,CAAC,SAAS,IAAI,KAAK;qBACxB,MAAM,CAAC,WAAW,IAAI,EAAE;kBAC3B,MAAM,CAAC,QAAQ,IAAI,CAAC;kBACpB,MAAM,CAAC,QAAQ,IAAI,OAAO;iBAC3B,MAAM,CAAC,OAAO,IAAI,MAAM;kBACvB,MAAM,CAAC,QAAQ,IAAI,EAAE;mBACpB,MAAM,CAAC,QAAQ,IAAI,EAAE;gBACxB,MAAM,IAAI,MAAM,CAAC,MAAM,IAAI,OAAO;eACnC,YAAY;eACZ,KAAK;iBACH,MAAM,CAAC,OAAO;+BACA,MAAM,CAAC,qBAAqB;sBACrC,MAAM,CAAC,WAAW,IAAI,KAAK;iBAChC,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC;;QAE/B,MAAA,MAAM,CAAC,OAAO,0CAAE,GAAG,CAAC,CAAC,MAAW,EAAE,EAAE;YACpC,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE,CAAC;gBAC/B,OAAO,IAAI,CAAA;oBACD,MAAM;qBACL,MAAM;2BACA,CAAC;YACpB,CAAC;iBAAM,CAAC;gBACN,OAAO,IAAI,CAAA;oBACD,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI;qBAC1B,MAAM,CAAC,KAAK;2BACN,CAAC;YACpB,CAAC;QACH,CAAC,CAAC;oBACY,CAAC;IACnB,CAAC;IAEO,MAAM,CAAC,cAAc,CAC3B,SAAiB,EACjB,MAA2B,EAC3B,KAAU,EACV,OAA2B;QAE3B,MAAM,EAAE,MAAM,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC;QAE/D,OAAO,IAAI,CAAA;;gBAEC,SAAS;iBACR,MAAM,CAAC,KAAK;qBACR,MAAM,CAAC,QAAQ,IAAI,EAAE;qBACrB,MAAM,CAAC,QAAQ;mBACjB,MAAM;oBACL,KAAK,IAAI,KAAK;gBAClB,MAAM,CAAC,IAAI,IAAI,GAAG;yBACT,MAAM,CAAC,aAAa,IAAI,OAAO;iBACvC,YAAY;iBACZ,KAAK;mBACH,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC;;QAEjC,MAAM,CAAC,MAAM;YACb,CAAC,CAAC,IAAI,CAAA,6BAA6B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC5D,CAAC,CAAC,EAAE;WACD,CAAC;IACV,CAAC;IAEO,MAAM,CAAC,cAAc,CAC3B,SAAiB,EACjB,MAA2B,EAC3B,KAAU,EACV,OAA2B;QAE3B,MAAM,EACJ,MAAM,GAAG,EAAE,EACX,QAAQ,EACR,SAAS,GAAG,IAAI,EAChB,YAAY,EACZ,KAAK,EACN,GAAG,OAAO,CAAC;QAEZ,OAAO,IAAI,CAAA;QACP,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA,UAAU,MAAM,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,EAAE;;gBAE7C,SAAS;kBACP,KAAK,IAAI,EAAE;qBACR,MAAM,CAAC,QAAQ;2BACT,MAAM,CAAC,cAAc,IAAI,KAAK;6BAC5B,MAAM,CAAC,gBAAgB,IAAI,OAAO;oBAC3C,MAAM,CAAC,OAAO,IAAI,CAAC;iBACtB,YAAY;iBACZ,KAAK;mBACH,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC;;QAEjC,MAAM,CAAC,MAAM;YACb,CAAC,CAAC,IAAI,CAAA,6BAA6B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC5D,CAAC,CAAC,EAAE;WACD,CAAC;IACV,CAAC;IAEO,MAAM,CAAC,WAAW,CACxB,SAAiB,EACjB,MAAwB,EACxB,KAAU,EACV,OAA2B;QAE3B,MAAM,EACJ,MAAM,GAAG,EAAE,EACX,QAAQ,EACR,SAAS,GAAG,IAAI,EAChB,YAAY,EACZ,KAAK,EACN,GAAG,OAAO,CAAC;QAEZ,OAAO,IAAI,CAAA;;gBAEC,SAAS;kBACP,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;kBAC7B,KAAK,IAAI,EAAE;uBACN,MAAM,CAAC,UAAU;qBACnB,MAAM,CAAC,QAAQ;sBACd,MAAM,CAAC,SAAS,IAAI,MAAM;qBAC3B,MAAM,CAAC,QAAQ,IAAI,CAAC;qBACpB,MAAM,CAAC,QAAQ,IAAI,CAAC;yBAChB,MAAM,CAAC,YAAY;0BAClB,MAAM,CAAC,WAAW;iBAC3B,YAAY;iBACZ,KAAK;mBACH,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC;;QAEjC,MAAM,CAAC,MAAM;YACb,CAAC,CAAC,IAAI,CAAA,6BAA6B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC5D,CAAC,CAAC,EAAE;WACD,CAAC;IACV,CAAC;IAEO,MAAM,CAAC,mBAAmB,CAChC,SAAiB,EACjB,MAAgC,EAChC,KAAU,EACV,OAA2B;QAE3B,MAAM,EACJ,MAAM,GAAG,EAAE,EACX,QAAQ,EACR,SAAS,GAAG,IAAI,EAChB,YAAY,EACZ,KAAK,EACL,cAAc,GAAG,EAAE,EACpB,GAAG,OAAO,CAAC;QAEZ,OAAO,IAAI,CAAA;cACD,SAAS;eACR,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;mBACzB,MAAM,CAAC,QAAQ;iBACjB,MAAM;gBACP,KAAK,IAAI,EAAE;sBACL,cAAc,CAAC,WAAW,IAAI,EAAE;qBACjC,MAAM,CAAC,WAAW,IAAI,EAAE;mBAC1B,MAAM,CAAC,QAAQ,IAAI,EAAE;mBACrB,MAAM,CAAC,QAAQ;cACpB,MAAM,CAAC,GAAG;4BACI,MAAM,CAAC,iBAAiB;iBACnC,MAAM,CAAC,OAAO,IAAI,EAAE;gBACrB,MAAM,CAAC,MAAM,IAAI,EAAE;kBACjB,MAAM,CAAC,QAAQ,IAAI,EAAE;yBACd,MAAM,CAAC,cAAc,IAAI,CAAC;mBAChC,MAAM,CAAC,SAAS,IAAI,EAAE;eAC1B,YAAY;eACZ,KAAK;iBACH,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC;6BACV,CAAC;IAC5B,CAAC;CACF","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      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    // Ensure proper value handling for multi vs single select\n    const normalizedValue = (() => {\n      if (config.multi) {\n        // Multi-select: ensure we have an array and convert strings to option objects\n        const valueArray = Array.isArray(value) ? value : value ? [value] : [];\n        return valueArray.map((val) => {\n          if (typeof val === 'string') {\n            // Convert string values to option objects\n            return { name: val, value: val };\n          }\n          return val;\n        });\n      } else {\n        // Single select: use the value as-is\n        return value || '';\n      }\n    })();\n\n    if (typeof normalizedValue === 'string') {\n      return html`<temba-select\n        name=\"${fieldName}\"\n        ?required=\"${config.required}\"\n        .errors=\"${errors}\"\n        value=\"${config.multi ? '' : normalizedValue}\"\n        .values=\"${config.multi ? normalizedValue : undefined}\"\n        ?multi=\"${config.multi}\"\n        ?searchable=\"${config.searchable}\"\n        ?tags=\"${config.tags}\"\n        ?emails=\"${config.emails}\"\n        ?clearable=\"${config.clearable || false}\"\n        label=\"${showLabel ? config.label : ''}\"\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        ${config.options?.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    return html`<temba-select\n      name=\"${fieldName}\"\n      label=\"${showLabel ? config.label : ''}\"\n      ?required=\"${config.required}\"\n      .errors=\"${errors}\"\n      .values=\"${normalizedValue}\"\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      ${config.options?.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 { errors = [], onChange, extraClasses, style } = context;\n\n    return html`<div class=\"form-field\">\n      <temba-checkbox\n        name=\"${fieldName}\"\n        label=\"${config.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=\"${style}\"\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        .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\n/**\n * Context object for field rendering that provides additional options\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}\n"]}

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

@@ -4,14 +4,128 @@ import { html, css } from 'lit';
 import { CroppieCSS } from './CroppieCSS';
 import { property } from 'lit/decorators.js';
 import { Icon } from '../Icons';
-import { FormElement } from './FormElement';
-export class ImagePicker extends FormElement {
+import { FieldElement } from './FieldElement';
+export class ImagePicker extends FieldElement {
     constructor() {
         super(...arguments);
         this.shape = 'square';
         this.showCroppie = false;
         this.uploadReader = new FileReader();
     }
+    static get styles() {
+        return css `
+      ${super.styles}
+      ${CroppieCSS}
+
+      .croppie {
+        max-width: 400px;
+        border: 0px solid #ccc;
+        border-radius: 0.5em;
+        overflow: hidden;
+        background: #fff;
+        margin-top: -20%;
+        box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1);
+      }
+
+      .croppie .controls {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        justify-content: center;
+        position: absolute;
+        z-index: 1;
+        width: 400px;
+        margin-top: -42px;
+      }
+
+      .toggle {
+        height: 110px;
+        width: 110px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .circle .toggle {
+        border-radius: 50%;
+      }
+
+      .toggle.set {
+        box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 7px 0px,
+          rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, inset 0 0 0 5px rgba(0, 0, 0, 0.1);
+      }
+
+      .toggle.set:hover {
+        box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 7px 0px,
+          rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, inset 0 0 0 5px rgba(0, 0, 0, 0.2);
+      }
+
+      .toggle temba-icon {
+        color: rgba(0, 0, 0, 0.2);
+        padding: 5px;
+      }
+
+      toggle:hover temba-icon {
+        color: rgba(0, 0, 0, 0.8);
+      }
+
+      .toggle.set temba-icon {
+        border-radius: 50%;
+        margin-right: -90%;
+        margin-bottom: -50%;
+        background: rgba(240, 240, 240, 1);
+        box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px 0px;
+      }
+
+      .toggle.set:hover temba-icon {
+        background: #fff;
+        color: var(--color-primary-dark);
+      }
+
+      .circle .toggle.set temba-icon {
+        margin-right: -70%;
+        margin-bottom: -70%;
+      }
+
+      .hidden {
+        display: none;
+      }
+
+      .controls temba-icon {
+        margin: 0em 0.75em;
+        background: rgba(255, 255, 255, 0.8);
+        border-radius: 50%;
+        padding: 6px;
+        transition: all 0.1s ease-in-out;
+      }
+
+      .controls {
+        pointer-events: none;
+        display: flex;
+      }
+
+      .controls temba-icon {
+        pointer-events: all;
+      }
+
+      .controls temba-icon.close {
+        color: rgba(0, 0, 0, 0.2);
+        background: rgba(255, 255, 255, 0.2);
+      }
+
+      .controls temba-icon.submit {
+        color: rgba(0, 0, 0, 0.2);
+        box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
+      }
+
+      .controls temba-icon:hover {
+        color: white;
+        cursor: pointer;
+        background: var(--color-primary-dark);
+      }
+    `;
+    }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         const picker = this;
@@ -86,18 +200,9 @@ export class ImagePicker extends FormElement {
         }
         input.value = '';
     }
-    render() {
+    renderWidget() {
         return html `
-    <div class="wrapper ${this.shape} ${this.label ? 'label' : ''}">
-      <temba-field
-        name=${this.name}
-        label=${this.label}
-        .helpText=${this.helpText}
-        .errors=${this.errors}
-        .widgetOnly=${this.widgetOnly}
-        .helpAlways=${true}
-        ?disabled=${this.disabled}
-      >
+      <div class="wrapper ${this.shape} ${this.label ? 'label' : ''}">
         <input class='hidden' type="file" accept="image/*" capture="camera" id="file" name="file" @change=${this.handleFileChanged}/>
         <div class='toggle ${this.url ? 'set' : ''}  ${this.showCroppie ? 'hidden' : ''}' @click=${this.handleToggleClicked} style="background: ${this.url
             ? `url('${this.url}') center / contain no-repeat`
@@ -114,122 +219,13 @@ export class ImagePicker extends FormElement {
               <temba-icon class="submit" size="1" name=${Icon.submit} @click=${this.saveResult}></temba-icon>
             </div>
         </temba-mask>
-      </temba-field>
-    </div>
+      </div>
     `;
     }
-}
-ImagePicker.styles = css `
-    ${CroppieCSS}
-
-    .croppie {
-      max-width: 400px;
-      border: 0px solid #ccc;
-      border-radius: 0.5em;
-      overflow: hidden;
-      background: #fff;
-      margin-top: -20%;
-      box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1);
-    }
-
-    .croppie .controls {
-      display: flex;
-      align-items: center;
-      flex-direction: row;
-      justify-content: center;
-      position: absolute;
-      z-index: 1;
-      width: 400px;
-      margin-top: -42px;
-    }
-
-    .toggle {
-      height: 110px;
-      width: 110px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .circle .toggle {
-      border-radius: 50%;
-    }
-
-    .toggle.set {
-      box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 7px 0px,
-        rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, inset 0 0 0 5px rgba(0, 0, 0, 0.1);
-    }
-
-    .toggle.set:hover {
-      box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 7px 0px,
-        rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, inset 0 0 0 5px rgba(0, 0, 0, 0.2);
-    }
-
-    .toggle temba-icon {
-      color: rgba(0, 0, 0, 0.2);
-      padding: 5px;
-    }
-
-    toggle:hover temba-icon {
-      color: rgba(0, 0, 0, 0.8);
-    }
-
-    .toggle.set temba-icon {
-      border-radius: 50%;
-      margin-right: -90%;
-      margin-bottom: -50%;
-      background: rgba(240, 240, 240, 1);
-      box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px 0px;
-    }
-
-    .toggle.set:hover temba-icon {
-      background: #fff;
-      color: var(--color-primary-dark);
-    }
-
-    .circle .toggle.set temba-icon {
-      margin-right: -70%;
-      margin-bottom: -70%;
-    }
-
-    .hidden {
-      display: none;
-    }
-
-    .controls temba-icon {
-      margin: 0em 0.75em;
-      background: rgba(255, 255, 255, 0.8);
-      border-radius: 50%;
-      padding: 6px;
-      transition: all 0.1s ease-in-out;
-    }
-
-    .controls {
-      pointer-events: none;
-      display: flex;
-    }
-
-    .controls temba-icon {
-      pointer-events: all;
-    }
-
-    .controls temba-icon.close {
-      color: rgba(0, 0, 0, 0.2);
-      background: rgba(255, 255, 255, 0.2);
-    }
-
-    .controls temba-icon.submit {
-      color: rgba(0, 0, 0, 0.2);
-      box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
-    }
-
-    .controls temba-icon:hover {
-      color: white;
-      cursor: pointer;
-      background: var(--color-primary-dark);
+    render() {
+        return this.renderField();
     }
-  `;
+}
 __decorate([
     property({ type: String })
 ], ImagePicker.prototype, "tempImage", void 0);