npm - @nyaruka/temba-components - Versions diffs - 0.129.7 → 0.129.9 - Mend

@nyaruka/temba-components 0.129.7 → 0.129.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (269) hide show

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

@@ -0,0 +1,305 @@
+import { html } from 'lit';
+/**
+ * FieldRenderer provides a consistent way to render field configurations
+ * into web components across different contexts (NodeEditor, ArrayEditor, etc.)
+ */
+export class FieldRenderer {
+    /**
+     * Renders a field based on its configuration
+     * @param fieldName - The name of the field
+     * @param config - The field configuration
+     * @param value - The current value of the field
+     * @param context - Additional context for rendering
+     * @returns A TemplateResult for the rendered field
+     */
+    static renderField(fieldName, config, value, context = {}) {
+        /*const {
+          errors = [],
+          onChange,
+          showLabel = true,
+          flavor,
+          extraClasses = '',
+          style = ''
+        } = context;*/
+        switch (config.type) {
+            case 'text':
+                return FieldRenderer.renderTextInput(fieldName, config, value, context);
+            case 'textarea':
+                return FieldRenderer.renderTextarea(fieldName, config, value, context);
+            case 'select':
+                return FieldRenderer.renderSelect(fieldName, config, value, context);
+            case 'checkbox':
+                return FieldRenderer.renderCheckbox(fieldName, config, value, context);
+            case 'key-value':
+                return FieldRenderer.renderKeyValue(fieldName, config, value, context);
+            case 'array':
+                return FieldRenderer.renderArray(fieldName, config, value, context);
+            case 'message-editor':
+                return FieldRenderer.renderMessageEditor(fieldName, config, value, context);
+            default:
+                return html `<div>Unsupported field type: ${config.type}</div>`;
+        }
+    }
+    static renderTextInput(fieldName, config, value, context) {
+        const { errors = [], onChange, showLabel = true, extraClasses, style } = context;
+        // If field supports expression evaluation, use temba-completion
+        if (config.evaluated) {
+            return html `<temba-completion
+        name="${fieldName}"
+        label="${showLabel ? config.label : ''}"
+        ?required="${config.required}"
+        .errors="${errors}"
+        .value="${value || ''}"
+        placeholder="${config.placeholder || ''}"
+        expressions="session"
+        .helpText="${config.helpText || ''}"
+        class="${extraClasses}"
+        style="${style}"
+        @input="${onChange || (() => { })}"
+      ></temba-completion>`;
+        }
+        return html `<temba-textinput
+      name="${fieldName}"
+      label="${showLabel ? config.label : ''}"
+      ?required="${config.required}"
+      .errors="${errors}"
+      .value="${value || ''}"
+      placeholder="${config.placeholder || ''}"
+      .helpText="${config.helpText || ''}"
+      class="${extraClasses}"
+      style="${style}"
+      @input="${onChange || (() => { })}"
+    ></temba-textinput>`;
+    }
+    static renderTextarea(fieldName, config, value, context) {
+        const { errors = [], onChange, showLabel = true, extraClasses, style } = context;
+        const minHeightStyle = config.minHeight
+            ? `--textarea-min-height: ${config.minHeight}px;`
+            : '';
+        const combinedStyle = `${minHeightStyle}${style}`;
+        // If field supports expression evaluation, use temba-completion
+        if (config.evaluated) {
+            return html `<temba-completion
+        name="${fieldName}"
+        label="${showLabel ? config.label : ''}"
+        ?required="${config.required}"
+        .errors="${errors}"
+        .value="${value || ''}"
+        placeholder="${config.placeholder || ''}"
+        textarea
+        expressions="session"
+        .helpText="${config.helpText || ''}"
+        class="${extraClasses}"
+        style="${combinedStyle}"
+        @input="${onChange || (() => { })}"
+      ></temba-completion>`;
+        }
+        return html `<temba-textinput
+      name="${fieldName}"
+      label="${showLabel ? config.label : ''}"
+      ?required="${config.required}"
+      .errors="${errors}"
+      .value="${value || ''}"
+      placeholder="${config.placeholder || ''}"
+      textarea
+      .rows="${config.rows || 3}"
+      .helpText="${config.helpText || ''}"
+      class="${extraClasses}"
+      style="${combinedStyle}"
+      @input="${onChange || (() => { })}"
+    ></temba-textinput>`;
+    }
+    static renderSelect(fieldName, config, value, context) {
+        var _a, _b;
+        const { errors = [], onChange, showLabel = true, flavor, extraClasses, style } = context;
+        // Ensure proper value handling for multi vs single select
+        const normalizedValue = (() => {
+            if (config.multi) {
+                // Multi-select: ensure we have an array and convert strings to option objects
+                const valueArray = Array.isArray(value) ? value : value ? [value] : [];
+                return valueArray.map((val) => {
+                    if (typeof val === 'string') {
+                        // Convert string values to option objects
+                        return { name: val, value: val };
+                    }
+                    return val;
+                });
+            }
+            else {
+                // Single select: use the value as-is
+                return value || '';
+            }
+        })();
+        if (typeof normalizedValue === 'string') {
+            return html `<temba-select
+        name="${fieldName}"
+        ?required="${config.required}"
+        .errors="${errors}"
+        value="${config.multi ? '' : normalizedValue}"
+        .values="${config.multi ? normalizedValue : undefined}"
+        ?multi="${config.multi}"
+        ?searchable="${config.searchable}"
+        ?tags="${config.tags}"
+        ?emails="${config.emails}"
+        ?clearable="${config.clearable || false}"
+        label="${showLabel ? config.label : ''}"
+        placeholder="${config.placeholder || ''}"
+        maxItems="${config.maxItems || 0}"
+        valueKey="${config.valueKey || 'value'}"
+        nameKey="${config.nameKey || 'name'}"
+        endpoint="${config.endpoint || ''}"
+        .helpText="${config.helpText || ''}"
+        flavor="${flavor || config.flavor || 'small'}"
+        class="${extraClasses}"
+        style="${style}"
+        .getName=${config.getName}
+        .createArbitraryOption=${config.createArbitraryOption}
+        ?allowCreate="${config.allowCreate || false}"
+        @change="${onChange || (() => { })}"
+      >
+        ${(_a = config.options) === null || _a === void 0 ? void 0 : _a.map((option) => {
+                if (typeof option === 'string') {
+                    return html `<temba-option
+              name="${option}"
+              value="${option}"
+            ></temba-option>`;
+                }
+                else {
+                    return html `<temba-option
+              name="${option.label || option.name}"
+              value="${option.value}"
+            ></temba-option>`;
+                }
+            })}
+      </temba-select>`;
+        }
+        return html `<temba-select
+      name="${fieldName}"
+      label="${showLabel ? config.label : ''}"
+      ?required="${config.required}"
+      .errors="${errors}"
+      .values="${normalizedValue}"
+      ?multi="${config.multi}"
+      ?searchable="${config.searchable}"
+      ?tags="${config.tags}"
+      ?emails="${config.emails}"
+      ?clearable="${config.clearable || false}"
+      placeholder="${config.placeholder || ''}"
+      maxItems="${config.maxItems || 0}"
+      valueKey="${config.valueKey || 'value'}"
+      nameKey="${config.nameKey || 'name'}"
+      endpoint="${config.endpoint || ''}"
+      .helpText="${config.helpText || ''}"
+      flavor="${flavor || config.flavor || 'small'}"
+      class="${extraClasses}"
+      style="${style}"
+      .getName=${config.getName}
+      .createArbitraryOption=${config.createArbitraryOption}
+      ?allowCreate="${config.allowCreate || false}"
+      @change="${onChange || (() => { })}"
+    >
+      ${(_b = config.options) === null || _b === void 0 ? void 0 : _b.map((option) => {
+            if (typeof option === 'string') {
+                return html `<temba-option
+            name="${option}"
+            value="${option}"
+          ></temba-option>`;
+            }
+            else {
+                return html `<temba-option
+            name="${option.label || option.name}"
+            value="${option.value}"
+          ></temba-option>`;
+            }
+        })}
+    </temba-select>`;
+    }
+    static renderCheckbox(fieldName, config, value, context) {
+        const { errors = [], onChange, extraClasses, style } = context;
+        return html `<div class="form-field">
+      <temba-checkbox
+        name="${fieldName}"
+        label="${config.label}"
+        .helpText="${config.helpText || ''}"
+        ?required="${config.required}"
+        .errors="${errors}"
+        ?checked="${value || false}"
+        size="${config.size || 1.2}"
+        animateChange="${config.animateChange || 'pulse'}"
+        class="${extraClasses}"
+        style="${style}"
+        @change="${onChange || (() => { })}"
+      ></temba-checkbox>
+      ${errors.length
+            ? html `<div class="field-errors">${errors.join(', ')}</div>`
+            : ''}
+    </div>`;
+    }
+    static renderKeyValue(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-key-value-editor
+        name="${fieldName}"
+        .value="${value || []}"
+        .sortable="${config.sortable}"
+        .keyPlaceholder="${config.keyPlaceholder || 'Key'}"
+        .valuePlaceholder="${config.valuePlaceholder || 'Value'}"
+        .minRows="${config.minRows || 0}"
+        class="${extraClasses}"
+        style="${style}"
+        @change="${onChange || (() => { })}"
+      ></temba-key-value-editor>
+      ${errors.length
+            ? html `<div class="field-errors">${errors.join(', ')}</div>`
+            : ''}
+    </div>`;
+    }
+    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
+        .value="${value || []}"
+        .itemConfig="${config.itemConfig}"
+        .sortable="${config.sortable}"
+        .itemLabel="${config.itemLabel || 'Item'}"
+        .minItems="${config.minItems || 0}"
+        .maxItems="${config.maxItems || 0}"
+        .onItemChange="${config.onItemChange}"
+        .isEmptyItemFn="${config.isEmptyItem}"
+        class="${extraClasses}"
+        style="${style}"
+        @change="${onChange || (() => { })}"
+      ></temba-array-editor>
+      ${errors.length
+            ? html `<div class="field-errors">${errors.join(', ')}</div>`
+            : ''}
+    </div>`;
+    }
+    static renderMessageEditor(fieldName, config, value, context) {
+        const { errors = [], onChange, showLabel = true, extraClasses, style, additionalData = {} } = context;
+        return html `<temba-message-editor
+      name="${fieldName}"
+      label="${showLabel ? config.label : ''}"
+      ?required="${config.required}"
+      .errors="${errors}"
+      .value="${value || ''}"
+      .attachments="${additionalData.attachments || []}"
+      placeholder="${config.placeholder || ''}"
+      .helpText="${config.helpText || ''}"
+      ?autogrow="${config.autogrow}"
+      ?gsm="${config.gsm}"
+      ?disableCompletion="${config.disableCompletion}"
+      counter="${config.counter || ''}"
+      accept="${config.accept || ''}"
+      endpoint="${config.endpoint || ''}"
+      max-attachments="${config.maxAttachments || 3}"
+      minHeight="${config.minHeight || 60}"
+      class="${extraClasses}"
+      style="${style}"
+      @change="${onChange || (() => { })}"
+    ></temba-message-editor>`;
+    }
+}
+//# sourceMappingURL=FieldRenderer.js.map

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

@@ -0,0 +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"]}

package/out-tsc/src/form/FormField.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { html, css, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import { renderMarkdown } from '../markdown';
+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.
@@ -33,7 +33,7 @@ export class FormField extends LitElement {
         font-size: var(--label-size);
         letter-spacing: 0.05em;
         line-height: normal;
-        color: #777;
+        color: var(--color-label, #777);
       }
       .help-text {
@@ -175,7 +175,7 @@ export class FormField extends LitElement {
         const errors = hasErrors
             ? this.errors.map((error) => {
                 return html `
-            <div class="alert-error">${renderMarkdown(error)}</div>
+            <div class="alert-error">${renderMarkdownInline(error)}</div>
           `;
             })
             : [];
@@ -205,7 +205,7 @@ export class FormField extends LitElement {
         ${this.helpText && this.helpText !== 'None'
             ? html `
               <div class="help-text ${this.helpAlways ? 'help-always' : null}">
-                ${this.helpText}
+                ${renderMarkdownInline(this.helpText)}
               </div>
             `
             : null}

package/out-tsc/src/form/FormField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/form/FormField.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { renderMarkdown } from '../markdown';\n\n/*\n A small wrapper to display labels and help text in a smartmin style.\n * This exists so we can display things consistently before restyling.\n /\nexport class FormField extends LitElement {\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: #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: -16px;\n opacity: 0;\n transition: opacity ease-in-out 100ms, margin-top ease-in-out 200ms;\n pointer-events: none;\n }\n\n .help-text.help-always {\n opacity: 1;\n margin-top: 6px;\n margin-left: var(--help-text-margin-left);\n }\n\n .field:focus-within .help-text {\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 @property({ type: Boolean, attribute: 'hide_label' })\n hideLabel = false;\n\n @property({ type: Boolean, attribute: 'widget_only' })\n widgetOnly = false;\n\n @property({ type: Array, attribute: false })\n errors: string[] = [];\n\n @property({ type: Boolean })\n hideErrors = false;\n\n @property({ type: String, attribute: 'help_text' })\n helpText = '';\n\n @property({ type: Boolean, attribute: 'help_always' })\n helpAlways = true;\n\n @property({ type: String })\n label = '';\n\n @property({ type: String })\n name = '';\n\n @property({ type: Boolean })\n disabled = false;\n\n updated(changedProperties: Map<string \| number \| symbol, unknown>): void {\n super.updated(changedProperties);\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 public render(): 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\">${renderMarkdown(error)}</div>\n `;\n })\n : [];\n\n if (this.widgetOnly) {\n return html`\n <div class=\"${this.disabled ? 'disabled' : ''}\"><slot></slot></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\">\n <slot></slot>\n ${errors}\n </div>\n ${this.helpText && this.helpText !== 'None'\n ? html`\n <div class=\"help-text ${this.helpAlways ? 'help-always' : null}\">\n ${this.helpText}\n </div>\n `\n : null}\n </div>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/form/FormField.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { renderMarkdownInline } from '../markdown';\n\n/*\n A small wrapper to display labels and help text in a smartmin style.\n * This exists so we can display things consistently before restyling.\n /\nexport class FormField extends LitElement {\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: -16px;\n opacity: 0;\n transition: opacity ease-in-out 100ms, margin-top ease-in-out 200ms;\n pointer-events: none;\n }\n\n .help-text.help-always {\n opacity: 1;\n margin-top: 6px;\n margin-left: var(--help-text-margin-left);\n }\n\n .field:focus-within .help-text {\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 @property({ type: Boolean, attribute: 'hide_label' })\n hideLabel = false;\n\n @property({ type: Boolean, attribute: 'widget_only' })\n widgetOnly = false;\n\n @property({ type: Array, attribute: false })\n errors: string[] = [];\n\n @property({ type: Boolean })\n hideErrors = false;\n\n @property({ type: String, attribute: 'help_text' })\n helpText = '';\n\n @property({ type: Boolean, attribute: 'help_always' })\n helpAlways = true;\n\n @property({ type: String })\n label = '';\n\n @property({ type: String })\n name = '';\n\n @property({ type: Boolean })\n disabled = false;\n\n updated(changedProperties: Map<string \| number \| symbol, unknown>): void {\n super.updated(changedProperties);\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 public render(): 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' : ''}\"><slot></slot></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\">\n <slot></slot>\n ${errors}\n </div>\n ${this.helpText && this.helpText !== 'None'\n ? html`\n <div class=\"help-text ${this.helpAlways ? 'help-always' : null}\">\n ${renderMarkdownInline(this.helpText)}\n </div>\n `\n : null}\n </div>\n `;\n }\n}\n"]}

package/out-tsc/src/form/KeyValueEditor.js CHANGED Viewed

@@ -169,8 +169,8 @@ KeyValueEditor.styles = css `
     .row {
       display: grid;
       grid-template-columns: 1fr 1fr auto;
-      gap: 8px;
       align-items: center;
+      column-gap: 6px;
     }
     .remove-btn {

package/out-tsc/src/form/KeyValueEditor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"KeyValueEditor.js","sourceRoot":"","sources":["../../../src/form/KeyValueEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { BaseListEditor, ListItem } from './BaseListEditor';\n\ninterface KeyValueItem extends ListItem {\n key: string;\n value: string;\n}\n\n@customElement('temba-key-value-editor')\nexport class KeyValueEditor extends BaseListEditor<KeyValueItem> {\n @property({ type: String })\n keyPlaceholder = 'Key';\n\n @property({ type: String })\n valuePlaceholder = 'Value';\n\n @property({ type: Boolean })\n showValidation = true;\n\n @state()\n private keyErrors: { [index: number]: string } = {};\n\n // Configure to maintain empty items\n maintainEmptyItem = true;\n\n constructor() {\n super();\n this._items = [];\n }\n\n // External API uses array format to preserve duplicate keys\n @property({ type: Array })\n get value(): KeyValueItem[] {\n return this._items.filter(\n ({ key, value }) => key.trim() !== '' \|\| value.trim() !== ''\n );\n }\n\n set value(newValue: KeyValueItem[] \| Record<string, string>) {\n if (Array.isArray(newValue)) {\n this._items = [...newValue];\n } else {\n // Convert Record to array format\n this._items = Object.entries(newValue \|\| {}).map(([key, value]) => ({\n key,\n value: typeof value === 'string' ? value : String(value)\n }));\n }\n this.requestUpdate();\n }\n\n // Implement abstract methods\n isEmptyItem(item: KeyValueItem): boolean {\n return item.key.trim() === '' && item.value.trim() === '';\n }\n\n createEmptyItem(): KeyValueItem {\n return { key: '', value: '' };\n }\n\n // Override cleanItems to return array format to preserve duplicate keys\n protected cleanItems(items: KeyValueItem[]): KeyValueItem[] {\n return items.filter(\n ({ key, value }) => key.trim() !== '' \|\| value.trim() !== ''\n );\n }\n\n // Method to convert to Record format for final form submission\n toRecord(): Record<string, string> {\n const result: Record<string, string> = {};\n this._items.forEach(({ key, value }) => {\n if (key.trim() !== '' \|\| value.trim() !== '') {\n result[key] = value;\n }\n });\n return result;\n }\n\n // Method to validate and set key errors for duplicates and empty keys with values\n validateKeys(): boolean {\n const newKeyErrors: { [index: number]: string } = {};\n\n // Check for empty keys with values\n this._items.forEach(({ key, value }, index) => {\n if (key.trim() === '' && value.trim() !== '') {\n newKeyErrors[index] = 'Key is required when value is provided';\n }\n });\n\n // Check for duplicate keys (only non-empty ones)\n const nonEmptyKeys = this._items\n .map(({ key }, index) => ({ key: key.trim(), index }))\n .filter(({ key }) => key !== '');\n\n const keyCount = new Map<string, number[]>();\n nonEmptyKeys.forEach(({ key, index }) => {\n if (!keyCount.has(key)) {\n keyCount.set(key, []);\n }\n keyCount.get(key)!.push(index);\n });\n\n // Mark duplicate keys with errors\n keyCount.forEach((indices, key) => {\n if (indices.length > 1) {\n indices.forEach((index) => {\n // Only show duplicate error if there's no empty key error already\n if (!newKeyErrors[index]) {\n newKeyErrors[index] = `Duplicate key \"${key}\"`;\n }\n });\n }\n });\n\n this.keyErrors = newKeyErrors;\n return Object.keys(newKeyErrors).length === 0;\n }\n\n // Clear key errors\n clearKeyErrors(): void {\n this.keyErrors = {};\n }\n\n // Override updateValue to emit array format and validate keys\n protected updateValue(newValue: KeyValueItem[]) {\n this._items = newValue;\n\n // Clear errors and re-validate when items change\n this.clearKeyErrors();\n this.validateKeys();\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: { value: this.cleanItems(newValue) },\n bubbles: true\n })\n );\n this.requestUpdate();\n }\n\n private handleKeyChange(index: number, newKey: string) {\n const items = this.displayItems;\n const currentItem = items[index];\n\n // Clear any existing error for this key when it's modified\n if (this.keyErrors[index]) {\n const newKeyErrors = { ...this.keyErrors };\n delete newKeyErrors[index];\n this.keyErrors = newKeyErrors;\n }\n\n this.handleItemChange(index, {\n key: newKey,\n value: currentItem.value\n });\n }\n\n private handleValueChange(index: number, newValue: string) {\n const items = this.displayItems;\n const currentItem = items[index];\n\n // Clear any existing error for this key when value is modified\n if (this.keyErrors[index]) {\n const newKeyErrors = { ...this.keyErrors };\n delete newKeyErrors[index];\n this.keyErrors = newKeyErrors;\n }\n\n this.handleItemChange(index, {\n key: currentItem.key,\n value: newValue\n });\n }\n\n renderItem(item: KeyValueItem, index: number): TemplateResult {\n const canRemove = this.canRemoveItem(index);\n const keyError =\n this.showValidation && this.keyErrors[index] ? this.keyErrors[index] : '';\n\n return html`\n <div class=\"row\">\n <temba-textinput\n .value=${item.key}\n .placeholder=${this.keyPlaceholder}\n .errors=${keyError ? [keyError] : []}\n @change=${(e: any) => this.handleKeyChange(index, e.target.value)}\n ></temba-textinput>\n <temba-textinput\n .value=${item.value}\n .placeholder=${this.valuePlaceholder}\n @change=${(e: any) => this.handleValueChange(index, e.target.value)}\n ></temba-textinput>\n ${canRemove\n ? html`\n <button class=\"remove-btn\" @click=${() => this.removeItem(index)}>\n ×\n </button>\n `\n : html`<div class=\"remove-btn-spacer\"></div>`}\n </div>\n `;\n }\n\n protected getContainerClass(): string {\n return 'key-value-editor';\n }\n\n static styles = css`\n .key-value-editor {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n\n .row {\n display: grid;\n grid-template-columns: 1fr 1fr auto;\n gap: 8px;\n align-items: center;\n }\n\n .remove-btn {\n width: 32px;\n height: 32px;\n border: 1px solid #ccc;\n border-radius: 4px;\n background: #f8f8f8;\n color: #666;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n }\n\n .remove-btn:hover:not(:disabled) {\n background: #f0f0f0;\n }\n\n .remove-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .remove-btn-spacer {\n width: 32px;\n height: 32px;\n }\n `;\n}\n"]}
1	+ {"version":3,"file":"KeyValueEditor.js","sourceRoot":"","sources":["../../../src/form/KeyValueEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { BaseListEditor, ListItem } from './BaseListEditor';\n\ninterface KeyValueItem extends ListItem {\n key: string;\n value: string;\n}\n\n@customElement('temba-key-value-editor')\nexport class KeyValueEditor extends BaseListEditor<KeyValueItem> {\n @property({ type: String })\n keyPlaceholder = 'Key';\n\n @property({ type: String })\n valuePlaceholder = 'Value';\n\n @property({ type: Boolean })\n showValidation = true;\n\n @state()\n private keyErrors: { [index: number]: string } = {};\n\n // Configure to maintain empty items\n maintainEmptyItem = true;\n\n constructor() {\n super();\n this._items = [];\n }\n\n // External API uses array format to preserve duplicate keys\n @property({ type: Array })\n get value(): KeyValueItem[] {\n return this._items.filter(\n ({ key, value }) => key.trim() !== '' \|\| value.trim() !== ''\n );\n }\n\n set value(newValue: KeyValueItem[] \| Record<string, string>) {\n if (Array.isArray(newValue)) {\n this._items = [...newValue];\n } else {\n // Convert Record to array format\n this._items = Object.entries(newValue \|\| {}).map(([key, value]) => ({\n key,\n value: typeof value === 'string' ? value : String(value)\n }));\n }\n this.requestUpdate();\n }\n\n // Implement abstract methods\n isEmptyItem(item: KeyValueItem): boolean {\n return item.key.trim() === '' && item.value.trim() === '';\n }\n\n createEmptyItem(): KeyValueItem {\n return { key: '', value: '' };\n }\n\n // Override cleanItems to return array format to preserve duplicate keys\n protected cleanItems(items: KeyValueItem[]): KeyValueItem[] {\n return items.filter(\n ({ key, value }) => key.trim() !== '' \|\| value.trim() !== ''\n );\n }\n\n // Method to convert to Record format for final form submission\n toRecord(): Record<string, string> {\n const result: Record<string, string> = {};\n this._items.forEach(({ key, value }) => {\n if (key.trim() !== '' \|\| value.trim() !== '') {\n result[key] = value;\n }\n });\n return result;\n }\n\n // Method to validate and set key errors for duplicates and empty keys with values\n validateKeys(): boolean {\n const newKeyErrors: { [index: number]: string } = {};\n\n // Check for empty keys with values\n this._items.forEach(({ key, value }, index) => {\n if (key.trim() === '' && value.trim() !== '') {\n newKeyErrors[index] = 'Key is required when value is provided';\n }\n });\n\n // Check for duplicate keys (only non-empty ones)\n const nonEmptyKeys = this._items\n .map(({ key }, index) => ({ key: key.trim(), index }))\n .filter(({ key }) => key !== '');\n\n const keyCount = new Map<string, number[]>();\n nonEmptyKeys.forEach(({ key, index }) => {\n if (!keyCount.has(key)) {\n keyCount.set(key, []);\n }\n keyCount.get(key)!.push(index);\n });\n\n // Mark duplicate keys with errors\n keyCount.forEach((indices, key) => {\n if (indices.length > 1) {\n indices.forEach((index) => {\n // Only show duplicate error if there's no empty key error already\n if (!newKeyErrors[index]) {\n newKeyErrors[index] = `Duplicate key \"${key}\"`;\n }\n });\n }\n });\n\n this.keyErrors = newKeyErrors;\n return Object.keys(newKeyErrors).length === 0;\n }\n\n // Clear key errors\n clearKeyErrors(): void {\n this.keyErrors = {};\n }\n\n // Override updateValue to emit array format and validate keys\n protected updateValue(newValue: KeyValueItem[]) {\n this._items = newValue;\n\n // Clear errors and re-validate when items change\n this.clearKeyErrors();\n this.validateKeys();\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: { value: this.cleanItems(newValue) },\n bubbles: true\n })\n );\n this.requestUpdate();\n }\n\n private handleKeyChange(index: number, newKey: string) {\n const items = this.displayItems;\n const currentItem = items[index];\n\n // Clear any existing error for this key when it's modified\n if (this.keyErrors[index]) {\n const newKeyErrors = { ...this.keyErrors };\n delete newKeyErrors[index];\n this.keyErrors = newKeyErrors;\n }\n\n this.handleItemChange(index, {\n key: newKey,\n value: currentItem.value\n });\n }\n\n private handleValueChange(index: number, newValue: string) {\n const items = this.displayItems;\n const currentItem = items[index];\n\n // Clear any existing error for this key when value is modified\n if (this.keyErrors[index]) {\n const newKeyErrors = { ...this.keyErrors };\n delete newKeyErrors[index];\n this.keyErrors = newKeyErrors;\n }\n\n this.handleItemChange(index, {\n key: currentItem.key,\n value: newValue\n });\n }\n\n renderItem(item: KeyValueItem, index: number): TemplateResult {\n const canRemove = this.canRemoveItem(index);\n const keyError =\n this.showValidation && this.keyErrors[index] ? this.keyErrors[index] : '';\n\n return html`\n <div class=\"row\">\n <temba-textinput\n .value=${item.key}\n .placeholder=${this.keyPlaceholder}\n .errors=${keyError ? [keyError] : []}\n @change=${(e: any) => this.handleKeyChange(index, e.target.value)}\n ></temba-textinput>\n <temba-textinput\n .value=${item.value}\n .placeholder=${this.valuePlaceholder}\n @change=${(e: any) => this.handleValueChange(index, e.target.value)}\n ></temba-textinput>\n ${canRemove\n ? html`\n <button class=\"remove-btn\" @click=${() => this.removeItem(index)}>\n ×\n </button>\n `\n : html`<div class=\"remove-btn-spacer\"></div>`}\n </div>\n `;\n }\n\n protected getContainerClass(): string {\n return 'key-value-editor';\n }\n\n static styles = css`\n .key-value-editor {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n\n .row {\n display: grid;\n grid-template-columns: 1fr 1fr auto;\n align-items: center;\n column-gap: 6px;\n }\n\n .remove-btn {\n width: 32px;\n height: 32px;\n border: 1px solid #ccc;\n border-radius: 4px;\n background: #f8f8f8;\n color: #666;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n }\n\n .remove-btn:hover:not(:disabled) {\n background: #f0f0f0;\n }\n\n .remove-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .remove-btn-spacer {\n width: 32px;\n height: 32px;\n }\n `;\n}\n"]}

package/out-tsc/src/form/MediaPicker.js CHANGED Viewed

@@ -16,6 +16,7 @@ export class MediaPicker extends RapidElement {
     constructor() {
         super(...arguments);
         this.endpoint = DEFAULT_MEDIA_ENDPOINT;
+        this.ignoreDrops = false;
         this.icon = Icon.add;
         this.accept = ''; //e.g. ".xls,.xlsx"
         this.max = 3;
@@ -29,7 +30,6 @@ export class MediaPicker extends RapidElement {
       }
       .highlight .drop-mask {
-        background: rgba(210, 243, 184, 0.8);
       }
       .drop-mask > div {
@@ -150,6 +150,9 @@ export class MediaPicker extends RapidElement {
         this.unhighlight(evt);
     }
     handleDrop(evt) {
+        if (this.ignoreDrops) {
+            return;
+        }
         this.unhighlight(evt);
         if (this.canAcceptAttachments()) {
             this.uploadFiles(this.getAcceptableFiles(evt));
@@ -159,6 +162,9 @@ export class MediaPicker extends RapidElement {
         return this.attachments.length < this.max;
     }
     highlight(evt) {
+        if (this.ignoreDrops) {
+            return;
+        }
         evt.preventDefault();
         evt.stopPropagation();
         if (this.canAcceptAttachments()) {
@@ -166,6 +172,9 @@ export class MediaPicker extends RapidElement {
         }
     }
     unhighlight(evt) {
+        if (this.ignoreDrops) {
+            return;
+        }
         evt.preventDefault();
         evt.stopPropagation();
         this.pendingDrop = false;
@@ -297,6 +306,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], MediaPicker.prototype, "pendingDrop", void 0);
+__decorate([
+    property({ type: Boolean })
+], MediaPicker.prototype, "ignoreDrops", void 0);
 __decorate([
     property({ type: String })
 ], MediaPicker.prototype, "icon", void 0);