@nyaruka/temba-components 0.129.3 → 0.129.4

package/out-tsc/src/flow/types.js

@@ -0,0 +1,79 @@
+export const COLORS = {
+    send: '#3498db',
+    update: '#01c1af',
+    broadcast: '#8e5ea7',
+    call: '#e68628',
+    create: '#df419f',
+    save: '#1a777c',
+    split: '#aaaaaa',
+    execute: '#666666',
+    wait: '#4d7dad',
+    add: '#309c42',
+    remove: '#e74c3c'
+};
+// Default property type mappings
+export function getDefaultComponent(value) {
+    if (typeof value === 'boolean') {
+        return 'temba-checkbox';
+    }
+    if (typeof value === 'number') {
+        return 'temba-textinput';
+    }
+    if (Array.isArray(value)) {
+        return 'temba-select'; // For arrays, use multi-select
+    }
+    // Default to text input for strings and unknown types
+    return 'temba-textinput';
+}
+// Get component properties for default mappings with proper typing
+export function getDefaultComponentProps(value) {
+    if (typeof value === 'boolean') {
+        return {
+            widget: { type: 'temba-checkbox' }
+        };
+    }
+    if (typeof value === 'number') {
+        return {
+            widget: {
+                type: 'temba-textinput',
+                attributes: { type: 'number' }
+            }
+        };
+    }
+    if (Array.isArray(value)) {
+        if (value.length > 0 && typeof value[0] === 'string') {
+            return {
+                widget: {
+                    type: 'temba-select',
+                    attributes: { multi: true, tags: true }
+                }
+            };
+        }
+        return {
+            widget: {
+                type: 'temba-select',
+                attributes: { multi: true }
+            }
+        };
+    }
+    return {
+        widget: { type: 'temba-textinput' }
+    };
+}
+// Type guard functions for working with WidgetConfig
+export function isTextInputWidget(config) {
+    return config.type === 'temba-textinput';
+}
+export function isCompletionWidget(config) {
+    return config.type === 'temba-completion';
+}
+export function isSelectWidget(config) {
+    return config.type === 'temba-select';
+}
+export function isCheckboxWidget(config) {
+    return config.type === 'temba-checkbox';
+}
+export function isSliderWidget(config) {
+    return config.type === 'temba-slider';
+}
+//# sourceMappingURL=types.js.map

package/out-tsc/src/flow/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/flow/types.ts"],"names":[],"mappings":"AAiQA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,SAAS;IAChB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,SAAS;IACf,GAAG,EAAE,SAAS;IACd,MAAM,EAAE,SAAS;CAClB,CAAC;AAEF,iCAAiC;AACjC,MAAM,UAAU,mBAAmB,CAAC,KAAU;IAC5C,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;QAC/B,OAAO,gBAAgB,CAAC;IAC1B,CAAC;IACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,iBAAiB,CAAC;IAC3B,CAAC;IACD,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACzB,OAAO,cAAc,CAAC,CAAC,+BAA+B;IACxD,CAAC;IACD,sDAAsD;IACtD,OAAO,iBAAiB,CAAC;AAC3B,CAAC;AAED,mEAAmE;AACnE,MAAM,UAAU,wBAAwB,CAAC,KAAU;IACjD,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;QAC/B,OAAO;YACL,MAAM,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE;SACnC,CAAC;IACJ,CAAC;IACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO;YACL,MAAM,EAAE;gBACN,IAAI,EAAE,iBAAiB;gBACvB,UAAU,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;aAC/B;SACF,CAAC;IACJ,CAAC;IACD,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACzB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,QAAQ,EAAE,CAAC;YACrD,OAAO;gBACL,MAAM,EAAE;oBACN,IAAI,EAAE,cAAc;oBACpB,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE;iBACxC;aACF,CAAC;QACJ,CAAC;QACD,OAAO;YACL,MAAM,EAAE;gBACN,IAAI,EAAE,cAAc;gBACpB,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;aAC5B;SACF,CAAC;IACJ,CAAC;IACD,OAAO;QACL,MAAM,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE;KACpC,CAAC;AACJ,CAAC;AAED,qDAAqD;AACrD,MAAM,UAAU,iBAAiB,CAC/B,MAAoB;IAEpB,OAAO,MAAM,CAAC,IAAI,KAAK,iBAAiB,CAAC;AAC3C,CAAC;AAED,MAAM,UAAU,kBAAkB,CAChC,MAAoB;IAEpB,OAAO,MAAM,CAAC,IAAI,KAAK,kBAAkB,CAAC;AAC5C,CAAC;AAED,MAAM,UAAU,cAAc,CAC5B,MAAoB;IAEpB,OAAO,MAAM,CAAC,IAAI,KAAK,cAAc,CAAC;AACxC,CAAC;AAED,MAAM,UAAU,gBAAgB,CAC9B,MAAoB;IAEpB,OAAO,MAAM,CAAC,IAAI,KAAK,gBAAgB,CAAC;AAC1C,CAAC;AAED,MAAM,UAAU,cAAc,CAC5B,MAAoB;IAEpB,OAAO,MAAM,CAAC,IAAI,KAAK,cAAc,CAAC;AACxC,CAAC","sourcesContent":["import { TemplateResult } from 'lit-html';\nimport { Action } from '../store/flow-definition';\n\nexport interface ValidationResult {\n  valid: boolean;\n  errors: { [key: string]: string };\n}\n\n// Component attribute interfaces - these define what's allowed for each component type\nexport interface TextInputAttributes {\n  type?: 'text' | 'email' | 'number' | 'url' | 'tel';\n  placeholder?: string;\n  clearable?: boolean;\n  maxlength?: number;\n  gsm?: boolean;\n  autogrow?: boolean;\n  textarea?: boolean;\n  submitOnEnter?: boolean;\n}\n\nexport interface CompletionAttributes {\n  placeholder?: string;\n  clearable?: boolean;\n  maxlength?: number;\n  gsm?: boolean;\n  autogrow?: boolean;\n  textarea?: boolean;\n  expressions?: string;\n  counter?: string;\n  minHeight?: number;\n}\n\nexport interface SelectAttributes {\n  placeholder?: string;\n  multi?: boolean;\n  searchable?: boolean;\n  tags?: boolean;\n  emails?: boolean;\n  clearable?: boolean;\n  endpoint?: string;\n  valueKey?: string;\n  nameKey?: string;\n  queryParam?: string;\n  maxItems?: number;\n  maxItemsText?: string;\n  expressions?: string;\n  options?: Array<{ name: string; value: any }>;\n  sorted?: boolean;\n  allowCreate?: boolean;\n  jsonValue?: boolean;\n  spaceSelect?: boolean;\n  infoText?: string;\n}\n\nexport interface CheckboxAttributes {\n  label?: string;\n  size?: number;\n  disabled?: boolean;\n  animateChange?: string;\n}\n\nexport interface SliderAttributes {\n  min?: number;\n  max?: number;\n  range?: boolean;\n}\n\n// Widget configuration using discriminated union for type safety\nexport type WidgetConfig =\n  | { type: 'temba-textinput'; attributes?: TextInputAttributes }\n  | { type: 'temba-completion'; attributes?: CompletionAttributes }\n  | { type: 'temba-select'; attributes?: SelectAttributes }\n  | { type: 'temba-checkbox'; attributes?: CheckboxAttributes }\n  | { type: 'temba-slider'; attributes?: SliderAttributes }\n  | { type: string; attributes?: { [key: string]: any } }; // Generic fallback\n\n// Property configuration with the clean structure you want\nexport interface PropertyConfig {\n  // Form field metadata\n  label?: string;\n  helpText?: string;\n  required?: boolean;\n  maxLength?: number;\n  minLength?: number;\n  pattern?: string;\n\n  // Widget configuration\n  widget: WidgetConfig;\n\n  // Conditional behavior based on other field values\n  conditions?: {\n    // When to show this field\n    visible?: (formData: any) => boolean;\n\n    // When this field is disabled\n    disabled?: (formData: any) => boolean;\n  };\n}\n\nexport interface NodeConfig {\n  type: string;\n  name?: string;\n  color?: string;\n  action?: ActionConfig;\n  router?: {\n    type: 'switch' | 'random';\n    defaultCategory?: string;\n    operand?: string;\n    configurable?: boolean; // can the rules be configured in the UI\n    rules?: {\n      type: 'has_number_between' | 'has_string' | 'has_value' | 'has_not_value';\n      arguments: string[];\n      categoryName: string;\n    }[];\n  };\n  properties?: { [key: string]: PropertyConfig };\n  toFormData?: (node: any) => any;\n  fromFormData?: (formData: any, originalNode: any) => any;\n}\n\n// New field configuration system for generic form generation\nexport interface BaseFieldConfig {\n  label?: string;\n  required?: boolean;\n  evaluated?: boolean; // if this field supports expression evaluation\n  dependsOn?: string[]; // fields this field depends on\n  computeValue?: (\n    values: Record<string, any>,\n    currentValue: any,\n    originalValues?: Record<string, any>\n  ) => any;\n\n  // Validation properties\n  minLength?: number;\n  maxLength?: number;\n  pattern?: string;\n  helpText?: string;\n\n  // Layout properties\n  maxWidth?: string; // CSS max-width value (e.g., '200px', '50%', '10rem')\n\n  // Conditional rendering\n  conditions?: {\n    visible?: (formData: Record<string, any>) => boolean;\n    disabled?: (formData: Record<string, any>) => boolean;\n  };\n}\n\nexport interface TextFieldConfig extends BaseFieldConfig {\n  type: 'text';\n  placeholder?: string;\n}\n\nexport interface TextareaFieldConfig extends BaseFieldConfig {\n  type: 'textarea';\n  placeholder?: string;\n  rows?: number;\n  minHeight?: number;\n}\n\nexport interface SelectFieldConfig extends BaseFieldConfig {\n  type: 'select';\n  options: string[] | { value: string; label: string }[];\n  multi?: boolean;\n  searchable?: boolean;\n  tags?: boolean;\n  placeholder?: string;\n  maxItems?: number;\n  valueKey?: string;\n  nameKey?: string;\n  endpoint?: string;\n  emails?: boolean;\n}\n\nexport interface KeyValueFieldConfig extends BaseFieldConfig {\n  type: 'key-value';\n  sortable?: boolean;\n  keyPlaceholder?: string;\n  valuePlaceholder?: string;\n  minRows?: number;\n}\n\nexport interface ArrayFieldConfig extends BaseFieldConfig {\n  type: 'array';\n  itemConfig: Record<string, FieldConfig>;\n  sortable?: boolean;\n  minItems?: number;\n  maxItems?: number;\n  itemLabel?: string;\n  onItemChange?: (\n    itemIndex: number,\n    field: string,\n    value: any,\n    allItems: any[]\n  ) => any[];\n}\n\nexport interface CheckboxFieldConfig extends BaseFieldConfig {\n  type: 'checkbox';\n  size?: number;\n  animateChange?: string;\n}\n\nexport type FieldConfig =\n  | TextFieldConfig\n  | TextareaFieldConfig\n  | SelectFieldConfig\n  | KeyValueFieldConfig\n  | ArrayFieldConfig\n  | CheckboxFieldConfig;\n\n// Layout configurations for better form organization\n// Recursive layout system - any layout item can contain other layout items\n\nexport interface FieldItemConfig {\n  type: 'field';\n  field: string; // field name to render\n}\n\nexport interface RowLayoutConfig {\n  type: 'row';\n  items: LayoutItem[]; // can contain fields, groups, or other rows\n  gap?: string; // CSS gap value, defaults to '1rem'\n}\n\nexport interface GroupLayoutConfig {\n  type: 'group';\n  label: string;\n  items: LayoutItem[]; // can contain fields, rows, or other groups\n  collapsible?: boolean;\n  collapsed?: boolean; // initial state if collapsible\n  helpText?: string;\n}\n\nexport type LayoutItem =\n  | FieldItemConfig\n  | RowLayoutConfig\n  | GroupLayoutConfig\n  | string; // string is shorthand for field\n\nexport interface ActionConfig {\n  name: string;\n  color: string;\n  evaluated?: string[];\n  render?: (node: any, action: any) => TemplateResult;\n\n  form?: Record<string, FieldConfig>;\n  layout?: LayoutItem[]; // optional layout configuration - array of layout items\n\n  // Action editor configuration (legacy)\n  // Form-level transformations\n  toFormData?: (action: Action) => any;\n  fromFormData?: (formData: any) => Action;\n\n  validate?: (action: Action) => ValidationResult;\n}\n\nexport const COLORS = {\n  send: '#3498db',\n  update: '#01c1af',\n  broadcast: '#8e5ea7',\n  call: '#e68628',\n  create: '#df419f',\n  save: '#1a777c',\n  split: '#aaaaaa',\n  execute: '#666666',\n  wait: '#4d7dad',\n  add: '#309c42',\n  remove: '#e74c3c'\n};\n\n// Default property type mappings\nexport function getDefaultComponent(value: any): WidgetConfig['type'] {\n  if (typeof value === 'boolean') {\n    return 'temba-checkbox';\n  }\n  if (typeof value === 'number') {\n    return 'temba-textinput';\n  }\n  if (Array.isArray(value)) {\n    return 'temba-select'; // For arrays, use multi-select\n  }\n  // Default to text input for strings and unknown types\n  return 'temba-textinput';\n}\n\n// Get component properties for default mappings with proper typing\nexport function getDefaultComponentProps(value: any): PropertyConfig {\n  if (typeof value === 'boolean') {\n    return {\n      widget: { type: 'temba-checkbox' }\n    };\n  }\n  if (typeof value === 'number') {\n    return {\n      widget: {\n        type: 'temba-textinput',\n        attributes: { type: 'number' }\n      }\n    };\n  }\n  if (Array.isArray(value)) {\n    if (value.length > 0 && typeof value[0] === 'string') {\n      return {\n        widget: {\n          type: 'temba-select',\n          attributes: { multi: true, tags: true }\n        }\n      };\n    }\n    return {\n      widget: {\n        type: 'temba-select',\n        attributes: { multi: true }\n      }\n    };\n  }\n  return {\n    widget: { type: 'temba-textinput' }\n  };\n}\n\n// Type guard functions for working with WidgetConfig\nexport function isTextInputWidget(\n  config: WidgetConfig\n): config is { type: 'temba-textinput'; attributes?: TextInputAttributes } {\n  return config.type === 'temba-textinput';\n}\n\nexport function isCompletionWidget(\n  config: WidgetConfig\n): config is { type: 'temba-completion'; attributes?: CompletionAttributes } {\n  return config.type === 'temba-completion';\n}\n\nexport function isSelectWidget(\n  config: WidgetConfig\n): config is { type: 'temba-select'; attributes?: SelectAttributes } {\n  return config.type === 'temba-select';\n}\n\nexport function isCheckboxWidget(\n  config: WidgetConfig\n): config is { type: 'temba-checkbox'; attributes?: CheckboxAttributes } {\n  return config.type === 'temba-checkbox';\n}\n\nexport function isSliderWidget(\n  config: WidgetConfig\n): config is { type: 'slider'; attributes?: SliderAttributes } {\n  return config.type === 'temba-slider';\n}\n"]}

package/out-tsc/src/flow/utils.js

@@ -0,0 +1,65 @@
+import { html } from 'lit-html';
+/**
+ * Renders a single line item with optional icon
+ */
+export const renderLineItem = (name, icon) => {
+    return html `<div style="display:flex;items-align:center;">
+    ${icon
+        ? html `<temba-icon name=${icon} style="margin-right:0.5em"></temba-icon>`
+        : null}
+    <div
+      style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px;"
+    >
+      ${name}
+    </div>
+  </div>`;
+};
+/**
+ * Renders a list of named objects with optional icon, showing up to 3 items
+ * with a "+X more" indicator if there are more items
+ */
+export const renderNamedObjects = (assets, icon) => {
+    return renderStringList(assets.map((asset) => asset.name), icon);
+};
+/**
+ * Renders a list of strings with optional icon, showing up to 3 items
+ * with a "+X more" indicator if there are more items
+ */
+export const renderStringList = (items, icon) => {
+    const itemElements = [];
+    const maxDisplay = 3;
+    // Show up to 3 items, or all 4 if exactly 4 items
+    const displayCount = items.length === 4 ? 4 : Math.min(maxDisplay, items.length);
+    for (let i = 0; i < displayCount; i++) {
+        const item = items[i];
+        itemElements.push(renderLineItem(item, icon));
+    }
+    // Add "+X more" if there are more than 3 items (and not exactly 4)
+    if (items.length > maxDisplay && items.length !== 4) {
+        const remainingCount = items.length - maxDisplay;
+        itemElements.push(html `<div
+      style="display:flex;items-align:center;margin-top:0.2em;"
+    >
+      ${icon
+            ? html `<div style="margin-right:0.4em; width: 1em;"></div>` // spacing placeholder
+            : null}
+      <div style="font-size:0.8em">+${remainingCount} more</div>
+    </div>`);
+    }
+    return itemElements;
+};
+// URN scheme mapping for user-friendly display
+export const urnSchemeMap = {
+    tel: 'Phone Number',
+    email: 'Email',
+    twitter: 'Twitter',
+    facebook: 'Facebook',
+    telegram: 'Telegram',
+    whatsapp: 'WhatsApp',
+    viber: 'Viber',
+    line: 'Line',
+    discord: 'Discord',
+    slack: 'Slack',
+    external: 'External ID'
+};
+//# sourceMappingURL=utils.js.map

package/out-tsc/src/flow/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/flow/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhC;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,IAAY,EAAE,IAAa,EAAE,EAAE;IAC5D,OAAO,IAAI,CAAA;MACP,IAAI;QACJ,CAAC,CAAC,IAAI,CAAA,oBAAoB,IAAI,2CAA2C;QACzE,CAAC,CAAC,IAAI;;;;QAIJ,IAAI;;SAEH,CAAC;AACV,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,MAAqB,EAAE,IAAa,EAAE,EAAE;IACzE,OAAO,gBAAgB,CACrB,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,EACjC,IAAI,CACL,CAAC;AACJ,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAe,EAAE,IAAa,EAAE,EAAE;IACjE,MAAM,YAAY,GAAG,EAAE,CAAC;IACxB,MAAM,UAAU,GAAG,CAAC,CAAC;IAErB,kDAAkD;IAClD,MAAM,YAAY,GAChB,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAE9D,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,YAAY,EAAE,CAAC,EAAE,EAAE,CAAC;QACtC,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;QACtB,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;IAChD,CAAC;IAED,mEAAmE;IACnE,IAAI,KAAK,CAAC,MAAM,GAAG,UAAU,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACpD,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,GAAG,UAAU,CAAC;QACjD,YAAY,CAAC,IAAI,CAAC,IAAI,CAAA;;;QAGlB,IAAI;YACJ,CAAC,CAAC,IAAI,CAAA,qDAAqD,CAAC,sBAAsB;YAClF,CAAC,CAAC,IAAI;sCACwB,cAAc;WACzC,CAAC,CAAC;IACX,CAAC;IACD,OAAO,YAAY,CAAC;AACtB,CAAC,CAAC;AAEF,+CAA+C;AAC/C,MAAM,CAAC,MAAM,YAAY,GAA2B;IAClD,GAAG,EAAE,cAAc;IACnB,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,UAAU;IACpB,QAAQ,EAAE,UAAU;IACpB,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,aAAa;CACxB,CAAC","sourcesContent":["import { html } from 'lit-html';\nimport { NamedObject } from '../store/flow-definition';\n\n/**\n * Renders a single line item with optional icon\n */\nexport const renderLineItem = (name: string, icon?: string) => {\n  return html`<div style=\"display:flex;items-align:center;\">\n    ${icon\n      ? html`<temba-icon name=${icon} style=\"margin-right:0.5em\"></temba-icon>`\n      : null}\n    <div\n      style=\"white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px;\"\n    >\n      ${name}\n    </div>\n  </div>`;\n};\n\n/**\n * Renders a list of named objects with optional icon, showing up to 3 items\n * with a \"+X more\" indicator if there are more items\n */\nexport const renderNamedObjects = (assets: NamedObject[], icon?: string) => {\n  return renderStringList(\n    assets.map((asset) => asset.name),\n    icon\n  );\n};\n\n/**\n * Renders a list of strings with optional icon, showing up to 3 items\n * with a \"+X more\" indicator if there are more items\n */\nexport const renderStringList = (items: string[], icon?: string) => {\n  const itemElements = [];\n  const maxDisplay = 3;\n\n  // Show up to 3 items, or all 4 if exactly 4 items\n  const displayCount =\n    items.length === 4 ? 4 : Math.min(maxDisplay, items.length);\n\n  for (let i = 0; i < displayCount; i++) {\n    const item = items[i];\n    itemElements.push(renderLineItem(item, icon));\n  }\n\n  // Add \"+X more\" if there are more than 3 items (and not exactly 4)\n  if (items.length > maxDisplay && items.length !== 4) {\n    const remainingCount = items.length - maxDisplay;\n    itemElements.push(html`<div\n      style=\"display:flex;items-align:center;margin-top:0.2em;\"\n    >\n      ${icon\n        ? html`<div style=\"margin-right:0.4em; width: 1em;\"></div>` // spacing placeholder\n        : null}\n      <div style=\"font-size:0.8em\">+${remainingCount} more</div>\n    </div>`);\n  }\n  return itemElements;\n};\n\n// URN scheme mapping for user-friendly display\nexport const urnSchemeMap: Record<string, string> = {\n  tel: 'Phone Number',\n  email: 'Email',\n  twitter: 'Twitter',\n  facebook: 'Facebook',\n  telegram: 'Telegram',\n  whatsapp: 'WhatsApp',\n  viber: 'Viber',\n  line: 'Line',\n  discord: 'Discord',\n  slack: 'Slack',\n  external: 'External ID'\n};\n"]}

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

@@ -0,0 +1,199 @@
+import { __decorate } from "tslib";
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { BaseListEditor } from './BaseListEditor';
+let TembaArrayEditor = class TembaArrayEditor extends BaseListEditor {
+    constructor() {
+        super();
+        this.itemConfig = {};
+        this.itemLabel = 'Item';
+        this._items = [];
+    }
+    // External API
+    get value() {
+        return [...this._items];
+    }
+    set value(newValue) {
+        this._items = newValue || [];
+        this.requestUpdate();
+    }
+    // Implement abstract methods
+    isEmptyItem(item) {
+        return Object.values(item).every((value) => value === undefined || value === null || value === '');
+    }
+    createEmptyItem() {
+        return {};
+    }
+    handleFieldChange(itemIndex, fieldName, newValue) {
+        let updatedItems;
+        if (this.onItemChange) {
+            updatedItems = this.onItemChange(itemIndex, fieldName, newValue, this._items);
+        }
+        else {
+            updatedItems = [...this._items];
+            updatedItems[itemIndex] = {
+                ...updatedItems[itemIndex],
+                [fieldName]: newValue
+            };
+        }
+        this.updateValue(updatedItems);
+    }
+    computeFieldValue(itemIndex, fieldName, config) {
+        const item = this._items[itemIndex] || {};
+        const currentValue = item[fieldName];
+        if (config.computeValue) {
+            return config.computeValue(item, currentValue);
+        }
+        return currentValue;
+    }
+    renderField(itemIndex, fieldName, config) {
+        const computedValue = this.computeFieldValue(itemIndex, fieldName, config);
+        switch (config.type) {
+            case 'text':
+                return html `<temba-textinput
+          .value=${computedValue || ''}
+          .placeholder=${config.placeholder}
+          @change=${(e) => this.handleFieldChange(itemIndex, fieldName, e.target.value)}
+        ></temba-textinput>`;
+            case 'textarea':
+                return html `<temba-textinput
+          .value=${computedValue || ''}
+          .placeholder=${config.placeholder}
+          textarea
+          .rows=${config.rows || 3}
+          @change=${(e) => this.handleFieldChange(itemIndex, fieldName, e.target.value)}
+        ></temba-textinput>`;
+            case 'select':
+                return html `<temba-select
+          .value=${computedValue || ''}
+          .options=${config.options}
+          @change=${(e) => this.handleFieldChange(itemIndex, fieldName, e.target.value)}
+        ></temba-select>`;
+            default:
+                return html `<span>Unsupported field type: ${config.type}</span>`;
+        }
+    }
+    renderItem(item, index) {
+        const canRemove = this.canRemoveItem(index);
+        return html `
+      <div class="array-item">
+        <div class="item-header">
+          <span class="item-title">${this.itemLabel} ${index + 1}</span>
+          ${canRemove
+            ? html `
+                <button
+                  @click=${() => this.removeItem(index)}
+                  class="remove-btn"
+                >
+                  Remove
+                </button>
+              `
+            : ''}
+        </div>
+        <div class="item-fields">
+          ${Object.entries(this.itemConfig).map(([fieldName, config]) => html `
+              <div class="field">
+                <label>${config.label}${config.required ? ' *' : ''}</label>
+                ${this.renderField(index, fieldName, config)}
+              </div>
+            `)}
+        </div>
+      </div>
+    `;
+    }
+    getContainerClass() {
+        return 'array-editor';
+    }
+    renderAddButton() {
+        return html `
+      <button class="add-btn" @click=${() => this.addItem()}>
+        Add ${this.itemLabel}
+      </button>
+    `;
+    }
+};
+TembaArrayEditor.styles = css `
+    .array-editor {
+      border: 1px solid #e0e0e0;
+      border-radius: 6px;
+      padding: 16px;
+      background: #fafafa;
+    }
+
+    .array-item {
+      border: 1px solid #d0d0d0;
+      border-radius: 4px;
+      padding: 16px;
+      margin-bottom: 12px;
+      background: white;
+    }
+
+    .item-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+      padding-bottom: 8px;
+      border-bottom: 1px solid #eee;
+    }
+
+    .item-title {
+      font-weight: 600;
+      color: #333;
+    }
+
+    .item-fields {
+      display: grid;
+      gap: 12px;
+    }
+
+    .field label {
+      display: block;
+      margin-bottom: 4px;
+      font-weight: 500;
+      color: #555;
+      font-size: 14px;
+    }
+
+    .add-btn,
+    .remove-btn {
+      padding: 8px 16px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      background: white;
+      cursor: pointer;
+      font-size: 14px;
+    }
+
+    .add-btn:hover,
+    .remove-btn:hover {
+      background: #f8f8f8;
+    }
+
+    .remove-btn {
+      background: #fff5f5;
+      border-color: #fecaca;
+      color: #dc2626;
+    }
+
+    .remove-btn:hover {
+      background: #fef2f2;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], TembaArrayEditor.prototype, "itemConfig", void 0);
+__decorate([
+    property({ type: String })
+], TembaArrayEditor.prototype, "itemLabel", void 0);
+__decorate([
+    property({ type: Function })
+], TembaArrayEditor.prototype, "onItemChange", void 0);
+__decorate([
+    property({ type: Array })
+], TembaArrayEditor.prototype, "value", null);
+TembaArrayEditor = __decorate([
+    customElement('temba-array-editor')
+], TembaArrayEditor);
+export { TembaArrayEditor };
+//# sourceMappingURL=ArrayEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArrayEditor.js","sourceRoot":"","sources":["../../../src/form/ArrayEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { FieldConfig } from '../flow/types';\nimport { BaseListEditor, ListItem } from './BaseListEditor';\n\n@customElement('temba-array-editor')\nexport class TembaArrayEditor extends BaseListEditor<ListItem> {\n  @property({ type: Object })\n  itemConfig: Record<string, FieldConfig> = {};\n\n  @property({ type: String })\n  itemLabel = 'Item';\n\n  @property({ type: Function })\n  onItemChange?: (\n    itemIndex: number,\n    field: string,\n    value: any,\n    allItems: any[]\n  ) => any[];\n\n  constructor() {\n    super();\n    this._items = [];\n  }\n\n  // External API\n  @property({ type: Array })\n  get value(): any[] {\n    return [...this._items];\n  }\n\n  set value(newValue: any[]) {\n    this._items = newValue || [];\n    this.requestUpdate();\n  }\n\n  // Implement abstract methods\n  isEmptyItem(item: ListItem): boolean {\n    return Object.values(item).every(\n      (value) => value === undefined || value === null || value === ''\n    );\n  }\n\n  createEmptyItem(): ListItem {\n    return {};\n  }\n\n  protected handleFieldChange(\n    itemIndex: number,\n    fieldName: string,\n    newValue: any\n  ) {\n    let updatedItems: any[];\n\n    if (this.onItemChange) {\n      updatedItems = this.onItemChange(\n        itemIndex,\n        fieldName,\n        newValue,\n        this._items\n      );\n    } else {\n      updatedItems = [...this._items];\n      updatedItems[itemIndex] = {\n        ...updatedItems[itemIndex],\n        [fieldName]: newValue\n      };\n    }\n\n    this.updateValue(updatedItems);\n  }\n\n  private computeFieldValue(\n    itemIndex: number,\n    fieldName: string,\n    config: FieldConfig\n  ): any {\n    const item = this._items[itemIndex] || {};\n    const currentValue = item[fieldName];\n\n    if (config.computeValue) {\n      return config.computeValue(item, currentValue);\n    }\n\n    return currentValue;\n  }\n\n  private renderField(\n    itemIndex: number,\n    fieldName: string,\n    config: FieldConfig\n  ): TemplateResult {\n    const computedValue = this.computeFieldValue(itemIndex, fieldName, config);\n\n    switch (config.type) {\n      case 'text':\n        return html`<temba-textinput\n          .value=${computedValue || ''}\n          .placeholder=${config.placeholder}\n          @change=${(e: any) =>\n            this.handleFieldChange(itemIndex, fieldName, e.target.value)}\n        ></temba-textinput>`;\n\n      case 'textarea':\n        return html`<temba-textinput\n          .value=${computedValue || ''}\n          .placeholder=${config.placeholder}\n          textarea\n          .rows=${config.rows || 3}\n          @change=${(e: any) =>\n            this.handleFieldChange(itemIndex, fieldName, e.target.value)}\n        ></temba-textinput>`;\n\n      case 'select':\n        return html`<temba-select\n          .value=${computedValue || ''}\n          .options=${config.options}\n          @change=${(e: any) =>\n            this.handleFieldChange(itemIndex, fieldName, e.target.value)}\n        ></temba-select>`;\n\n      default:\n        return html`<span>Unsupported field type: ${config.type}</span>`;\n    }\n  }\n\n  renderItem(item: ListItem, index: number): TemplateResult {\n    const canRemove = this.canRemoveItem(index);\n\n    return html`\n      <div class=\"array-item\">\n        <div class=\"item-header\">\n          <span class=\"item-title\">${this.itemLabel} ${index + 1}</span>\n          ${canRemove\n            ? html`\n                <button\n                  @click=${() => this.removeItem(index)}\n                  class=\"remove-btn\"\n                >\n                  Remove\n                </button>\n              `\n            : ''}\n        </div>\n        <div class=\"item-fields\">\n          ${Object.entries(this.itemConfig).map(\n            ([fieldName, config]) => html`\n              <div class=\"field\">\n                <label>${config.label}${config.required ? ' *' : ''}</label>\n                ${this.renderField(index, fieldName, config)}\n              </div>\n            `\n          )}\n        </div>\n      </div>\n    `;\n  }\n\n  protected getContainerClass(): string {\n    return 'array-editor';\n  }\n\n  protected renderAddButton(): TemplateResult {\n    return html`\n      <button class=\"add-btn\" @click=${() => this.addItem()}>\n        Add ${this.itemLabel}\n      </button>\n    `;\n  }\n\n  static styles = css`\n    .array-editor {\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      padding: 16px;\n      background: #fafafa;\n    }\n\n    .array-item {\n      border: 1px solid #d0d0d0;\n      border-radius: 4px;\n      padding: 16px;\n      margin-bottom: 12px;\n      background: white;\n    }\n\n    .item-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 12px;\n      padding-bottom: 8px;\n      border-bottom: 1px solid #eee;\n    }\n\n    .item-title {\n      font-weight: 600;\n      color: #333;\n    }\n\n    .item-fields {\n      display: grid;\n      gap: 12px;\n    }\n\n    .field label {\n      display: block;\n      margin-bottom: 4px;\n      font-weight: 500;\n      color: #555;\n      font-size: 14px;\n    }\n\n    .add-btn,\n    .remove-btn {\n      padding: 8px 16px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      background: white;\n      cursor: pointer;\n      font-size: 14px;\n    }\n\n    .add-btn:hover,\n    .remove-btn:hover {\n      background: #f8f8f8;\n    }\n\n    .remove-btn {\n      background: #fff5f5;\n      border-color: #fecaca;\n      color: #dc2626;\n    }\n\n    .remove-btn:hover {\n      background: #fef2f2;\n    }\n  `;\n}\n"]}

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

@@ -0,0 +1,128 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+export class BaseListEditor extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._items = [];
+        this.minItems = 0;
+        this.maintainEmptyItem = false;
+    }
+    // Optional methods that subclasses can override
+    getContainerClass() {
+        return 'base-list-editor';
+    }
+    renderAddButton() {
+        return html `
+      <button class="add-btn" @click=${() => this.addItem()}>Add Item</button>
+    `;
+    }
+    shouldShowAddButton() {
+        return (!this.maintainEmptyItem &&
+            (!this.maxItems || this._items.length < this.maxItems));
+    }
+    render() {
+        const items = this.displayItems;
+        return html `
+      <div class=${this.getContainerClass()}>
+        <div
+          class="list-items"
+          style="gap: 8px; display: grid; grid-template-columns: 1fr;"
+        >
+          ${items.map((item, index) => this.renderItem(item, index))}
+        </div>
+        ${this.shouldShowAddButton() ? this.renderAddButton() : ''}
+      </div>
+    `;
+    }
+    // Optional method for cleaning items before emission (can return any type)
+    cleanItems(items) {
+        if (!this.maintainEmptyItem) {
+            return items;
+        }
+        // Filter out empty items for the emitted value
+        return items.filter((item) => !this.isEmptyItem(item));
+    }
+    // Get the items to display (may include empty items for UI)
+    get displayItems() {
+        const items = [...this._items];
+        if (this.maintainEmptyItem) {
+            const hasEmptyItem = items.some((item) => this.isEmptyItem(item));
+            if (!hasEmptyItem) {
+                items.push(this.createEmptyItem());
+            }
+        }
+        return items;
+    }
+    // Handle changes to an item
+    handleItemChange(index, newItem) {
+        const updatedItems = [...this._items];
+        updatedItems[index] = newItem;
+        this.updateValue(updatedItems);
+    }
+    // Handle field changes within an item (for complex items)
+    handleFieldChange(index, fieldName, fieldValue) {
+        const updatedItems = [...this._items];
+        const currentItem = updatedItems[index] || this.createEmptyItem();
+        updatedItems[index] = {
+            ...currentItem,
+            [fieldName]: fieldValue
+        };
+        this.updateValue(updatedItems);
+    }
+    // Add a new item
+    addItem(item) {
+        if (this.maxItems && this._items.length >= this.maxItems) {
+            return;
+        }
+        const newItem = item || this.createEmptyItem();
+        const updatedItems = [...this._items, newItem];
+        this.updateValue(updatedItems);
+    }
+    // Remove an item
+    removeItem(index) {
+        if (this._items.length <= this.minItems) {
+            return;
+        }
+        const updatedItems = this._items.filter((_, i) => i !== index);
+        this.updateValue(updatedItems);
+    }
+    // Check if an item can be removed
+    canRemoveItem(index) {
+        const item = this.displayItems[index];
+        // Can't remove if it would go below minimum
+        if (this._items.length <= this.minItems) {
+            return false;
+        }
+        // Can't remove empty items if we're maintaining them
+        if (this.maintainEmptyItem && this.isEmptyItem(item)) {
+            return false;
+        }
+        return true;
+    }
+    // Update the value and emit change event
+    updateValue(newValue) {
+        this._items = newValue;
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { value: this.cleanItems(newValue) },
+            bubbles: true
+        }));
+    }
+    // Utility method for subclasses to check if two items are equal
+    itemsEqual(item1, item2) {
+        return JSON.stringify(item1) === JSON.stringify(item2);
+    }
+}
+__decorate([
+    property({ attribute: false })
+], BaseListEditor.prototype, "_items", void 0);
+__decorate([
+    property({ type: Number })
+], BaseListEditor.prototype, "minItems", void 0);
+__decorate([
+    property({ type: Number })
+], BaseListEditor.prototype, "maxItems", void 0);
+__decorate([
+    property({ type: Boolean })
+], BaseListEditor.prototype, "maintainEmptyItem", void 0);
+//# sourceMappingURL=BaseListEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseListEditor.js","sourceRoot":"","sources":["../../../src/form/BaseListEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, TemplateResult, html } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nexport interface ListItem {\n  [key: string]: any;\n}\n\nexport interface ListEditorConfig {\n  // Determines if empty items should be automatically maintained\n  maintainEmptyItem?: boolean;\n  // Function to check if an item is considered empty\n  isEmptyItem?: (item: ListItem) => boolean;\n  // Function to create a new empty item\n  createEmptyItem?: () => ListItem;\n  // Function to clean items before emitting (e.g., filter out empty items)\n  cleanItems?: (items: ListItem[]) => ListItem[];\n  // Minimum number of items to maintain\n  minItems?: number;\n  // Maximum number of items allowed\n  maxItems?: number;\n}\n\nexport abstract class BaseListEditor<\n  T extends ListItem = ListItem\n> extends LitElement {\n  @property({ attribute: false })\n  protected _items: T[] = [];\n\n  @property({ type: Number })\n  minItems = 0;\n\n  @property({ type: Number })\n  maxItems?: number;\n\n  @property({ type: Boolean })\n  maintainEmptyItem = false;\n\n  // Abstract methods that must be implemented by subclasses\n  abstract isEmptyItem(item: T): boolean;\n  abstract createEmptyItem(): T;\n  abstract renderItem(item: T, index: number): TemplateResult;\n\n  // Optional methods that subclasses can override\n  protected getContainerClass(): string {\n    return 'base-list-editor';\n  }\n\n  protected renderAddButton(): TemplateResult {\n    return html`\n      <button class=\"add-btn\" @click=${() => this.addItem()}>Add Item</button>\n    `;\n  }\n\n  protected shouldShowAddButton(): boolean {\n    return (\n      !this.maintainEmptyItem &&\n      (!this.maxItems || this._items.length < this.maxItems)\n    );\n  }\n\n  render(): TemplateResult {\n    const items = this.displayItems;\n\n    return html`\n      <div class=${this.getContainerClass()}>\n        <div\n          class=\"list-items\"\n          style=\"gap: 8px; display: grid; grid-template-columns: 1fr;\"\n        >\n          ${items.map((item, index) => this.renderItem(item, index))}\n        </div>\n        ${this.shouldShowAddButton() ? this.renderAddButton() : ''}\n      </div>\n    `;\n  }\n\n  // Optional method for cleaning items before emission (can return any type)\n  protected cleanItems(items: T[]): any {\n    if (!this.maintainEmptyItem) {\n      return items;\n    }\n    // Filter out empty items for the emitted value\n    return items.filter((item) => !this.isEmptyItem(item));\n  }\n\n  // Get the items to display (may include empty items for UI)\n  protected get displayItems(): T[] {\n    const items = [...this._items];\n\n    if (this.maintainEmptyItem) {\n      const hasEmptyItem = items.some((item) => this.isEmptyItem(item));\n      if (!hasEmptyItem) {\n        items.push(this.createEmptyItem());\n      }\n    }\n\n    return items;\n  }\n\n  // Handle changes to an item\n  protected handleItemChange(index: number, newItem: T) {\n    const updatedItems = [...this._items];\n    updatedItems[index] = newItem;\n    this.updateValue(updatedItems);\n  }\n\n  // Handle field changes within an item (for complex items)\n  protected handleFieldChange(\n    index: number,\n    fieldName: string,\n    fieldValue: any\n  ) {\n    const updatedItems = [...this._items];\n    const currentItem = updatedItems[index] || this.createEmptyItem();\n\n    updatedItems[index] = {\n      ...currentItem,\n      [fieldName]: fieldValue\n    };\n\n    this.updateValue(updatedItems);\n  }\n\n  // Add a new item\n  protected addItem(item?: T) {\n    if (this.maxItems && this._items.length >= this.maxItems) {\n      return;\n    }\n\n    const newItem = item || this.createEmptyItem();\n    const updatedItems = [...this._items, newItem];\n    this.updateValue(updatedItems);\n  }\n\n  // Remove an item\n  protected removeItem(index: number) {\n    if (this._items.length <= this.minItems) {\n      return;\n    }\n\n    const updatedItems = this._items.filter((_, i) => i !== index);\n    this.updateValue(updatedItems);\n  }\n\n  // Check if an item can be removed\n  protected canRemoveItem(index: number): boolean {\n    const item = this.displayItems[index];\n\n    // Can't remove if it would go below minimum\n    if (this._items.length <= this.minItems) {\n      return false;\n    }\n\n    // Can't remove empty items if we're maintaining them\n    if (this.maintainEmptyItem && this.isEmptyItem(item)) {\n      return false;\n    }\n\n    return true;\n  }\n\n  // Update the value and emit change event\n  protected updateValue(newValue: T[]) {\n    this._items = newValue;\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: { value: this.cleanItems(newValue) },\n        bubbles: true\n      })\n    );\n  }\n\n  // Utility method for subclasses to check if two items are equal\n  protected itemsEqual(item1: T, item2: T): boolean {\n    return JSON.stringify(item1) === JSON.stringify(item2);\n  }\n}\n"]}

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

@@ -63,8 +63,24 @@ export class Checkbox extends FormElement {
       }
     `;
     }
+    connectedCallback() {
+        super.connectedCallback();
+    }
     updated(changes) {
         super.updated(changes);
+        // Normalize label property changes
+        if (changes.has('label')) {
+            // Normalize whitespace labels to empty string for proper behavior
+            if (this.label &&
+                typeof this.label === 'string' &&
+                this.label.trim() === '') {
+                this.label = '';
+            }
+            // Ensure undefined labels remain as null to match test expectations
+            if (this.label === undefined) {
+                this.label = null;
+            }
+        }
         if (changes.has('checked') || changes.has('value')) {
             if (this.checked || this.partial) {
                 this.internals.setFormValue(this.value || '1');
@@ -97,7 +113,6 @@ export class Checkbox extends FormElement {
       size="${this.size}"
       animatechange="${this.animateChange}"
     />`;
-        this.label = this.label ? this.label.trim() : null;
         return html `
       <div class="wrapper ${this.label ? 'label' : ''}">
         <temba-field
@@ -111,7 +126,7 @@ export class Checkbox extends FormElement {
         >
           <div class="checkbox-container ${this.disabled ? 'disabled' : ''}">
             ${icon}
-            ${this.label
+            ${this.label && String(this.label).trim()
             ? html `<div class="checkbox-label">${this.label}</div>`
             : null}
           </div>

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/form/Checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { FormElement } from './FormElement';\nimport { property } from 'lit/decorators.js';\nimport { Icon } from '../Icons';\n\nexport class Checkbox extends FormElement {\n  static get styles() {\n    return css`\n      :host {\n        color: var(--color-text);\n        display: inline-block;\n      }\n\n      :host([label]) {\n        width: 100%;\n      }\n\n      .wrapper.label {\n        padding: var(--checkbox-padding, 10px);\n        border-radius: var(--curvature);\n      }\n\n      .wrapper.label:hover {\n        background: var(--checkbox-hover-bg, #f9f9f9);\n      }\n\n      temba-field {\n        --help-text-margin-left: 24px;\n        cursor: pointer;\n      }\n\n      .checkbox-container {\n        cursor: pointer;\n        display: flex;\n        user-select: none;\n        -webkit-user-select: none;\n      }\n\n      .checkbox-label {\n        font-family: var(--font-family);\n        padding: 0px;\n        margin-left: 8px;\n        font-size: 14px;\n        line-height: 19px;\n        flex-grow: 1;\n      }\n\n      .far {\n        height: 16px;\n        margin-top: 1px;\n      }\n\n      .disabled {\n        cursor: not-allowed;\n        --icon-color: #ccc;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: Boolean })\n  checked: boolean;\n\n  @property({ type: Boolean })\n  partial: boolean;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Number })\n  size = 1.2;\n\n  @property({ type: String })\n  animateChange = 'pulse';\n\n  public updated(changes: Map<string, any>) {\n    super.updated(changes);\n    if (changes.has('checked') || changes.has('value')) {\n      if (this.checked || this.partial) {\n        this.internals.setFormValue(this.value || '1');\n      } else {\n        this.internals.setFormValue(undefined);\n      }\n      this.fireEvent('change');\n    }\n  }\n\n  public serializeValue(value: any): string {\n    return value;\n  }\n\n  private handleClick(): void {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n    }\n  }\n\n  public click(): void {\n    this.handleClick();\n    super.click();\n  }\n\n  public render(): TemplateResult {\n    const icon = html`<temba-icon\n      name=\"${this.checked\n        ? Icon.checkbox_checked\n        : this.partial\n        ? Icon.checkbox_partial\n        : Icon.checkbox}\"\n      size=\"${this.size}\"\n      animatechange=\"${this.animateChange}\"\n    />`;\n\n    this.label = this.label ? this.label.trim() : null;\n\n    return html`\n      <div class=\"wrapper ${this.label ? 'label' : ''}\">\n        <temba-field\n          name=${this.name}\n          .helpText=${this.helpText}\n          .errors=${this.errors}\n          .widgetOnly=${this.widgetOnly}\n          .helpAlways=${true}\n          ?disabled=${this.disabled}\n          @click=${this.handleClick}\n        >\n          <div class=\"checkbox-container ${this.disabled ? 'disabled' : ''}\">\n            ${icon}\n            ${this.label\n              ? html`<div class=\"checkbox-label\">${this.label}</div>`\n              : null}\n          </div>\n        </temba-field>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/form/Checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { FormElement } from './FormElement';\nimport { property } from 'lit/decorators.js';\nimport { Icon } from '../Icons';\n\nexport class Checkbox extends FormElement {\n  static get styles() {\n    return css`\n      :host {\n        color: var(--color-text);\n        display: inline-block;\n      }\n\n      :host([label]) {\n        width: 100%;\n      }\n\n      .wrapper.label {\n        padding: var(--checkbox-padding, 10px);\n        border-radius: var(--curvature);\n      }\n\n      .wrapper.label:hover {\n        background: var(--checkbox-hover-bg, #f9f9f9);\n      }\n\n      temba-field {\n        --help-text-margin-left: 24px;\n        cursor: pointer;\n      }\n\n      .checkbox-container {\n        cursor: pointer;\n        display: flex;\n        user-select: none;\n        -webkit-user-select: none;\n      }\n\n      .checkbox-label {\n        font-family: var(--font-family);\n        padding: 0px;\n        margin-left: 8px;\n        font-size: 14px;\n        line-height: 19px;\n        flex-grow: 1;\n      }\n\n      .far {\n        height: 16px;\n        margin-top: 1px;\n      }\n\n      .disabled {\n        cursor: not-allowed;\n        --icon-color: #ccc;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: Boolean })\n  checked: boolean;\n\n  @property({ type: Boolean })\n  partial: boolean;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Number })\n  size = 1.2;\n\n  @property({ type: String })\n  animateChange = 'pulse';\n\n  public connectedCallback() {\n    super.connectedCallback();\n  }\n\n  public updated(changes: Map<string, any>) {\n    super.updated(changes);\n\n    // Normalize label property changes\n    if (changes.has('label')) {\n      // Normalize whitespace labels to empty string for proper behavior\n      if (\n        this.label &&\n        typeof this.label === 'string' &&\n        this.label.trim() === ''\n      ) {\n        this.label = '';\n      }\n      // Ensure undefined labels remain as null to match test expectations\n      if (this.label === undefined) {\n        this.label = null;\n      }\n    }\n\n    if (changes.has('checked') || changes.has('value')) {\n      if (this.checked || this.partial) {\n        this.internals.setFormValue(this.value || '1');\n      } else {\n        this.internals.setFormValue(undefined);\n      }\n      this.fireEvent('change');\n    }\n  }\n\n  public serializeValue(value: any): string {\n    return value;\n  }\n\n  private handleClick(): void {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n    }\n  }\n\n  public click(): void {\n    this.handleClick();\n    super.click();\n  }\n\n  public render(): TemplateResult {\n    const icon = html`<temba-icon\n      name=\"${this.checked\n        ? Icon.checkbox_checked\n        : this.partial\n        ? Icon.checkbox_partial\n        : Icon.checkbox}\"\n      size=\"${this.size}\"\n      animatechange=\"${this.animateChange}\"\n    />`;\n\n    return html`\n      <div class=\"wrapper ${this.label ? 'label' : ''}\">\n        <temba-field\n          name=${this.name}\n          .helpText=${this.helpText}\n          .errors=${this.errors}\n          .widgetOnly=${this.widgetOnly}\n          .helpAlways=${true}\n          ?disabled=${this.disabled}\n          @click=${this.handleClick}\n        >\n          <div class=\"checkbox-container ${this.disabled ? 'disabled' : ''}\">\n            ${icon}\n            ${this.label && String(this.label).trim()\n              ? html`<div class=\"checkbox-label\">${this.label}</div>`\n              : null}\n          </div>\n        </temba-field>\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -209,6 +209,9 @@ export class Completion extends FormElement {
             ?autogrow=${this.autogrow}
             ?textarea=${this.textarea}
             ?submitOnEnter=${this.submitOnEnter}
+            style=${this.minHeight
+            ? `--textarea-min-height: ${this.minHeight}px`
+            : ''}
           >
           </temba-textinput>
           <temba-options
@@ -283,4 +286,7 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], Completion.prototype, "autogrow", void 0);
+__decorate([
+    property({ type: Number })
+], Completion.prototype, "minHeight", void 0);
 //# sourceMappingURL=Completion.js.map