@nyaruka/temba-components 0.129.8 → 0.129.10

package/web-dev-mock.mjs

@@ -1,6 +1,7 @@
 import { Client as MinioClient } from 'minio';
 import busboy from 'busboy';
 import { v4 as uuidv4 } from 'uuid';
+import fs from 'fs';
 
 /**
  * Generates FlowInfo dynamically from a FlowDefinition
@@ -271,10 +272,11 @@ function extractDependenciesFromAction(action, dependencyMap, resultMap, nodeUui
           }
         } else {
           // Create new result
+          const categories = action.category ? [action.category] : ['All Responses'];
           resultMap.set(action.name, {
-            key: action.name.toLowerCase(),
+            key: action.name.toLowerCase().replace(/[^a-z0-9_]/g, '_'),
             name: action.name,
-            categories: action.category ? [action.category] : [],
+            categories: categories,
             node_uuids: [nodeUuid]
           });
         }
@@ -288,14 +290,20 @@ function extractDependenciesFromRouter(router, dependencyMap, resultMap, nodeUui
   if (router.result_name && router.categories) {
     const existingResult = resultMap.get(router.result_name);
     if (existingResult) {
-      // Add this node to existing result
-      existingResult.node_uuids.push(nodeUuid);
+      // Add this node to existing result if not already present
+      if (!existingResult.node_uuids.includes(nodeUuid)) {
+        existingResult.node_uuids.push(nodeUuid);
+      }
     } else {
       // Create new result
+      const categories = router.categories.length > 0 
+        ? router.categories.map((cat) => cat.name)
+        : ['All Responses'];
+      
       const result = {
-        key: router.result_name,
+        key: router.result_name.toLowerCase().replace(/[^a-z0-9_]/g, '_'),
         name: router.result_name,
-        categories: router.categories.map((cat) => cat.name),
+        categories: categories,
         node_uuids: [nodeUuid]
       };
       resultMap.set(router.result_name, result);
@@ -431,3 +439,85 @@ export function handleMinioUpload(context) {
     }
   });
 }
+
+// Handle label creation for the labels API
+export function handleLabelCreation(context) {
+  return new Promise((resolve) => {
+    let body = '';
+    
+    context.req.on('data', chunk => {
+      body += chunk.toString();
+    });
+    
+    context.req.on('end', () => {
+      try {
+        const requestData = JSON.parse(body);
+        const labelName = requestData.name || '';
+        
+        if (!labelName.trim()) {
+          context.status = 400;
+          context.body = JSON.stringify({ error: 'Label name is required' });
+          resolve();
+          return;
+        }
+        
+        // Read existing labels file
+        const labelsPath = './static/api/labels.json';
+        let labelsData;
+        
+        try {
+          labelsData = JSON.parse(fs.readFileSync(labelsPath, 'utf-8'));
+        } catch (error) {
+          // If file doesn't exist, create basic structure
+          labelsData = {
+            next: null,
+            previous: null,
+            results: []
+          };
+        }
+        
+        // Check if label already exists
+        const existingLabel = labelsData.results.find(
+          label => label.name.toLowerCase() === labelName.trim().toLowerCase()
+        );
+        
+        if (existingLabel) {
+          // Return existing label
+          context.contentType = 'application/json';
+          context.body = JSON.stringify(existingLabel);
+          resolve();
+          return;
+        }
+        
+        // Create new label with UUID
+        const newLabel = {
+          uuid: uuidv4(),
+          name: labelName.trim(),
+          count: 0
+        };
+        
+        // Add to labels data
+        labelsData.results.push(newLabel);
+        
+        // Write back to file
+        fs.writeFileSync(labelsPath, JSON.stringify(labelsData, null, 2));
+        
+        // Return the new label
+        context.contentType = 'application/json';
+        context.body = JSON.stringify(newLabel);
+        
+        console.log('📝 Label created:', newLabel);
+        
+      } catch (error) {
+        console.error('Label creation error:', error);
+        context.status = 500;
+        context.body = JSON.stringify({ 
+          error: 'Label creation failed',
+          details: error.message 
+        });
+      }
+      
+      resolve();
+    });
+  });
+}

package/web-dev-server.config.mjs

@@ -4,7 +4,7 @@ import fs from 'fs';
 import path from 'path';
 
 // Import the shared flow info generator and Minio functionality
-import { generateFlowInfo, handleMinioUpload } from './web-dev-mock.mjs';
+import { generateFlowInfo, handleMinioUpload, handleLabelCreation } from './web-dev-mock.mjs';
 
 const replacePlugin = fromRollup(replace);
 
@@ -32,6 +32,7 @@ export default {
           // Map API endpoints to static files
           const apiMappings = {
             '/api/v2/groups.json': './static/api/groups.json',
+            '/api/v2/labels.json': './static/api/labels.json',
             '/api/v2/fields.json': './static/api/fields.json', 
             '/api/v2/globals.json': './static/api/globals.json',
             '/api/v2/completion.json': './static/mr/docs/en-us/editor.json',
@@ -61,6 +62,11 @@ export default {
         if (context.request.method === 'POST' && context.path === '/api/v2/media.json') {
           return handleMinioUpload(context);
         }
+
+        // Handle label creation
+        if (context.request.method === 'POST' && context.path === '/api/v2/labels.json') {
+          return handleLabelCreation(context);
+        }
       }
     },
     {
@@ -106,23 +112,39 @@ export default {
                 // Generate metadata similar to production
                 const metadata = generateFlowMetadata(flowDefinition);
                 
-                context.body = {
+                const response = {
                   status: 'success',
                   saved_on: new Date().toISOString(),
                   revision: {
                     id: Math.floor(Math.random() * 1000) + 1,
                     user: {
-                      email: 'test@textit.com',
-                      name: 'Test User'
+                      email: 'admin1@textit.com',
+                      name: 'Adam McAdmin'
                     },
                     created_on: new Date().toISOString(),
                     version: flowDefinition.spec_version || '14.3.0',
-                    revision: flowDefinition.revision || 1
+                    revision: (flowDefinition.revision || 0) + 1
+                  },
+                  info: {
+                    counts: metadata.counts,
+                    dependencies: metadata.dependencies,
+                    locals: metadata.locals,
+                    results: metadata.results,
+                    parent_refs: [],
+                    issues: []
                   },
-                  info: metadata,
                   issues: [],
-                  metadata: metadata
+                  metadata: {
+                    counts: metadata.counts,
+                    dependencies: metadata.dependencies,
+                    locals: metadata.locals,
+                    results: metadata.results,
+                    parent_refs: [],
+                    issues: []
+                  }
                 };
+                
+                context.body = JSON.stringify(response);
                 context.status = 200;
               } else {
                 console.log(`No body received for flow ${uuid}.`);

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

@@ -1,67 +0,0 @@
-import { __decorate } from "tslib";
-import { RapidElement } from '../RapidElement';
-import { property } from 'lit/decorators.js';
-/**
- * FormElement is a component that appends a hidden input (outside of
- * its own shadow) with its value to be included in forms.
- */
-export class FormElement extends RapidElement {
-    constructor() {
-        super();
-        this.name = '';
-        this.value = null;
-        this.inputRoot = this;
-        this.disabled = false;
-        this.internals = this.attachInternals();
-    }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('value')) {
-            this.internals.setFormValue(this.value);
-        }
-    }
-    get form() {
-        return this.internals.form;
-    }
-    setValue(value) {
-        this.value = this.serializeValue(value);
-    }
-    getDeserializedValue() {
-        return JSON.parse(this.value);
-    }
-    serializeValue(value) {
-        return JSON.stringify(value);
-    }
-}
-FormElement.formAssociated = true;
-__decorate([
-    property({ type: String })
-], FormElement.prototype, "name", void 0);
-__decorate([
-    property({ type: String, attribute: 'help_text' })
-], FormElement.prototype, "helpText", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'help_always' })
-], FormElement.prototype, "helpAlways", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'widget_only' })
-], FormElement.prototype, "widgetOnly", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'hide_label' })
-], FormElement.prototype, "hideLabel", void 0);
-__decorate([
-    property({ type: String })
-], FormElement.prototype, "label", void 0);
-__decorate([
-    property({ type: Array })
-], FormElement.prototype, "errors", void 0);
-__decorate([
-    property({ type: String })
-], FormElement.prototype, "value", void 0);
-__decorate([
-    property({ attribute: false })
-], FormElement.prototype, "inputRoot", void 0);
-__decorate([
-    property({ type: Boolean })
-], FormElement.prototype, "disabled", void 0);
-//# sourceMappingURL=FormElement.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"FormElement.js","sourceRoot":"","sources":["../../../src/form/FormElement.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C;;;GAGG;AACH,MAAM,OAAO,WAAY,SAAQ,YAAY;IAkC3C;QACE,KAAK,EAAE,CAAC;QAjCV,SAAI,GAAG,EAAE,CAAC;QAqBV,UAAK,GAAG,IAAI,CAAC;QAGb,cAAS,GAAgB,IAAI,CAAC;QAG9B,aAAQ,GAAG,KAAK,CAAC;QAOf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAC1C,CAAC;IAEM,OAAO,CAAC,iBAAmC;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1C,CAAC;IACH,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7B,CAAC;IAEM,QAAQ,CAAC,KAAU;QACxB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC;IAEM,oBAAoB;QACzB,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC;IAEM,cAAc,CAAC,KAAU;QAC9B,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;;AA9BM,0BAAc,GAAG,IAAI,AAAP,CAAQ;AA5B7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;6CAClC;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CAClC;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CAClC;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;8CAClC;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CACT;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACd;AAGb;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;8CACD;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACX","sourcesContent":["import { RapidElement } from '../RapidElement';\nimport { property } from 'lit/decorators.js';\n\n/**\n * FormElement is a component that appends a hidden input (outside of\n * its own shadow) with its value to be included in forms.\n */\nexport class FormElement extends RapidElement {\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String, attribute: 'help_text' })\n  helpText: string;\n\n  @property({ type: Boolean, attribute: 'help_always' })\n  helpAlways: boolean;\n\n  @property({ type: Boolean, attribute: 'widget_only' })\n  widgetOnly: boolean;\n\n  @property({ type: Boolean, attribute: 'hide_label' })\n  hideLabel: boolean;\n\n  @property({ type: String })\n  label: string;\n\n  @property({ type: Array })\n  errors: string[];\n\n  @property({ type: String })\n  value = null;\n\n  @property({ attribute: false })\n  inputRoot: HTMLElement = this;\n\n  @property({ type: Boolean })\n  disabled = false;\n  static formAssociated = true;\n\n  protected internals: ElementInternals;\n\n  constructor() {\n    super();\n    this.internals = this.attachInternals();\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('value')) {\n      this.internals.setFormValue(this.value);\n    }\n  }\n\n  get form() {\n    return this.internals.form;\n  }\n\n  public setValue(value: any) {\n    this.value = this.serializeValue(value);\n  }\n\n  public getDeserializedValue(): any {\n    return JSON.parse(this.value);\n  }\n\n  public serializeValue(value: any): string {\n    return JSON.stringify(value);\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"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: 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\">${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"]}

package/out-tsc/test/temba-formfield.test.js

@@ -1,94 +0,0 @@
-import { html, fixture, expect } from '@open-wc/testing';
-import { assertScreenshot, getClip } from './utils.test';
-describe('temba-field', () => {
-    it('renders field with plain text errors', async () => {
-        const formField = await fixture(html `
-      <temba-field
-        label="Test Field"
-        name="test"
-        .errors=${['This is a plain text error', 'Another error message']}
-      >
-        <input type="text" />
-      </temba-field>
-    `);
-        await formField.updateComplete;
-        // Check that errors are rendered
-        const errorElements = formField.shadowRoot.querySelectorAll('.alert-error');
-        expect(errorElements.length).to.equal(2);
-        expect(errorElements[0].textContent.trim()).to.equal('This is a plain text error');
-        expect(errorElements[1].textContent.trim()).to.equal('Another error message');
-        await assertScreenshot('formfield/plain-text-errors', getClip(formField));
-    });
-    it('renders field with markdown errors', async () => {
-        const formField = await fixture(html `
-      <temba-field
-        label="Test Field"
-        name="test"
-        .errors=${[
-            'This is **bold** text',
-            'This has a [link](https://example.com)',
-            'This is *italic* and **bold** with a [link](https://example.com)'
-        ]}
-      >
-        <input type="text" />
-      </temba-field>
-    `);
-        await formField.updateComplete;
-        // Check that errors are rendered
-        const errorElements = formField.shadowRoot.querySelectorAll('.alert-error');
-        expect(errorElements.length).to.equal(3);
-        // First error should have bold text
-        const firstError = errorElements[0];
-        const boldElement = firstError.querySelector('strong');
-        expect(boldElement).to.not.be.null;
-        expect(boldElement.textContent).to.equal('bold');
-        // Second error should have a link
-        const secondError = errorElements[1];
-        const linkElement = secondError.querySelector('a');
-        expect(linkElement).to.not.be.null;
-        expect(linkElement.getAttribute('href')).to.equal('https://example.com');
-        expect(linkElement.textContent).to.equal('link');
-        // Third error should have both bold, italic, and link
-        const thirdError = errorElements[2];
-        const thirdBoldElement = thirdError.querySelector('strong');
-        const thirdItalicElement = thirdError.querySelector('em');
-        const thirdLinkElement = thirdError.querySelector('a');
-        expect(thirdBoldElement).to.not.be.null;
-        expect(thirdItalicElement).to.not.be.null;
-        expect(thirdLinkElement).to.not.be.null;
-        await assertScreenshot('formfield/markdown-errors', getClip(formField));
-    });
-    it('renders field without errors', async () => {
-        const formField = await fixture(html `
-      <temba-field label="Test Field" name="test">
-        <input type="text" />
-      </temba-field>
-    `);
-        await formField.updateComplete;
-        // Check that no errors are rendered
-        const errorElements = formField.shadowRoot.querySelectorAll('.alert-error');
-        expect(errorElements.length).to.equal(0);
-        await assertScreenshot('formfield/no-errors', getClip(formField));
-    });
-    it('renders in widget-only mode with errors', async () => {
-        const formField = await fixture(html `
-      <temba-field
-        widget_only
-        .errors=${['Widget only **error** with [link](https://example.com)']}
-      >
-        <input type="text" />
-      </temba-field>
-    `);
-        await formField.updateComplete;
-        // Check that error is rendered in widget-only mode
-        const errorElements = formField.shadowRoot.querySelectorAll('.alert-error');
-        expect(errorElements.length).to.equal(1);
-        const errorElement = errorElements[0];
-        const boldElement = errorElement.querySelector('strong');
-        const linkElement = errorElement.querySelector('a');
-        expect(boldElement).to.not.be.null;
-        expect(linkElement).to.not.be.null;
-        await assertScreenshot('formfield/widget-only-markdown-errors', getClip(formField));
-    });
-});
-//# sourceMappingURL=temba-formfield.test.js.map

package/out-tsc/test/temba-formfield.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"temba-formfield.test.js","sourceRoot":"","sources":["../../test/temba-formfield.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, fixture, expect } from '@open-wc/testing';\nimport { FormField } from '../src/form/FormField';\nimport { assertScreenshot, getClip } from './utils.test';\n\ndescribe('temba-field', () => {\n  it('renders field with plain text errors', async () => {\n    const formField: FormField = await fixture(html`\n      <temba-field\n        label=\"Test Field\"\n        name=\"test\"\n        .errors=${['This is a plain text error', 'Another error message']}\n      >\n        <input type=\"text\" />\n      </temba-field>\n    `);\n\n    await formField.updateComplete;\n\n    // Check that errors are rendered\n    const errorElements = formField.shadowRoot.querySelectorAll('.alert-error');\n    expect(errorElements.length).to.equal(2);\n    expect(errorElements[0].textContent.trim()).to.equal(\n      'This is a plain text error'\n    );\n    expect(errorElements[1].textContent.trim()).to.equal(\n      'Another error message'\n    );\n\n    await assertScreenshot('formfield/plain-text-errors', getClip(formField));\n  });\n\n  it('renders field with markdown errors', async () => {\n    const formField: FormField = await fixture(html`\n      <temba-field\n        label=\"Test Field\"\n        name=\"test\"\n        .errors=${[\n          'This is **bold** text',\n          'This has a [link](https://example.com)',\n          'This is *italic* and **bold** with a [link](https://example.com)'\n        ]}\n      >\n        <input type=\"text\" />\n      </temba-field>\n    `);\n\n    await formField.updateComplete;\n\n    // Check that errors are rendered\n    const errorElements = formField.shadowRoot.querySelectorAll('.alert-error');\n    expect(errorElements.length).to.equal(3);\n\n    // First error should have bold text\n    const firstError = errorElements[0];\n    const boldElement = firstError.querySelector('strong');\n    expect(boldElement).to.not.be.null;\n    expect(boldElement.textContent).to.equal('bold');\n\n    // Second error should have a link\n    const secondError = errorElements[1];\n    const linkElement = secondError.querySelector('a');\n    expect(linkElement).to.not.be.null;\n    expect(linkElement.getAttribute('href')).to.equal('https://example.com');\n    expect(linkElement.textContent).to.equal('link');\n\n    // Third error should have both bold, italic, and link\n    const thirdError = errorElements[2];\n    const thirdBoldElement = thirdError.querySelector('strong');\n    const thirdItalicElement = thirdError.querySelector('em');\n    const thirdLinkElement = thirdError.querySelector('a');\n    expect(thirdBoldElement).to.not.be.null;\n    expect(thirdItalicElement).to.not.be.null;\n    expect(thirdLinkElement).to.not.be.null;\n\n    await assertScreenshot('formfield/markdown-errors', getClip(formField));\n  });\n\n  it('renders field without errors', async () => {\n    const formField: FormField = await fixture(html`\n      <temba-field label=\"Test Field\" name=\"test\">\n        <input type=\"text\" />\n      </temba-field>\n    `);\n\n    await formField.updateComplete;\n\n    // Check that no errors are rendered\n    const errorElements = formField.shadowRoot.querySelectorAll('.alert-error');\n    expect(errorElements.length).to.equal(0);\n\n    await assertScreenshot('formfield/no-errors', getClip(formField));\n  });\n\n  it('renders in widget-only mode with errors', async () => {\n    const formField: FormField = await fixture(html`\n      <temba-field\n        widget_only\n        .errors=${['Widget only **error** with [link](https://example.com)']}\n      >\n        <input type=\"text\" />\n      </temba-field>\n    `);\n\n    await formField.updateComplete;\n\n    // Check that error is rendered in widget-only mode\n    const errorElements = formField.shadowRoot.querySelectorAll('.alert-error');\n    expect(errorElements.length).to.equal(1);\n\n    const errorElement = errorElements[0];\n    const boldElement = errorElement.querySelector('strong');\n    const linkElement = errorElement.querySelector('a');\n    expect(boldElement).to.not.be.null;\n    expect(linkElement).to.not.be.null;\n\n    await assertScreenshot(\n      'formfield/widget-only-markdown-errors',\n      getClip(formField)\n    );\n  });\n});\n"]}

package/src/form/FormElement.ts

@@ -1,69 +0,0 @@
-import { RapidElement } from '../RapidElement';
-import { property } from 'lit/decorators.js';
-
-/**
- * FormElement is a component that appends a hidden input (outside of
- * its own shadow) with its value to be included in forms.
- */
-export class FormElement extends RapidElement {
-  @property({ type: String })
-  name = '';
-
-  @property({ type: String, attribute: 'help_text' })
-  helpText: string;
-
-  @property({ type: Boolean, attribute: 'help_always' })
-  helpAlways: boolean;
-
-  @property({ type: Boolean, attribute: 'widget_only' })
-  widgetOnly: boolean;
-
-  @property({ type: Boolean, attribute: 'hide_label' })
-  hideLabel: boolean;
-
-  @property({ type: String })
-  label: string;
-
-  @property({ type: Array })
-  errors: string[];
-
-  @property({ type: String })
-  value = null;
-
-  @property({ attribute: false })
-  inputRoot: HTMLElement = this;
-
-  @property({ type: Boolean })
-  disabled = false;
-  static formAssociated = true;
-
-  protected internals: ElementInternals;
-
-  constructor() {
-    super();
-    this.internals = this.attachInternals();
-  }
-
-  public updated(changedProperties: Map<string, any>) {
-    super.updated(changedProperties);
-    if (changedProperties.has('value')) {
-      this.internals.setFormValue(this.value);
-    }
-  }
-
-  get form() {
-    return this.internals.form;
-  }
-
-  public setValue(value: any) {
-    this.value = this.serializeValue(value);
-  }
-
-  public getDeserializedValue(): any {
-    return JSON.parse(this.value);
-  }
-
-  public serializeValue(value: any): string {
-    return JSON.stringify(value);
-  }
-}