@nyaruka/temba-components 0.129.9 → 0.129.10

package/test/temba-slider.test.ts

@@ -15,7 +15,6 @@ describe('temba-slider', () => {
       <temba-slider label="My Slider"></temba-slider>
     `);
 
-    expect(slider.label).to.equal('My Slider');
     await assertScreenshot('slider/default', getClip(slider));
   });
 

package/test-assets/contacts/history.json

@@ -62,13 +62,14 @@
       "logs_url": null
     },
     {
-      "type": "flow_exited",
-      "created_on": "2021-03-30T22:20:35.573809+00:00",
+      "type": "run_ended",
+      "created_on": "2021-03-30T22:20:26.704467+00:00",
+      "run_uuid": "0198c846-da2b-799f-8af9-aaf8857f947f",
       "flow": {
         "uuid": "d076d716-8071-417e-b188-d9746db223a1",
         "name": "Favorites"
       },
-      "status": "C"
+      "status": "completed"
     },
     {
       "uuid": "01988a70-3e8f-7890-b1d2-7418db7a575e",
@@ -209,13 +210,9 @@
       "logs_url": "/channels/channellog/read/1472/"
     },
     {
-      "type": "flow_entered",
-      "created_on": "2021-03-30T22:20:26.704467+00:00",
-      "flow": {
-        "uuid": "d076d716-8071-417e-b188-d9746db223a1",
-        "name": "Favorites"
-      },
-      "logs_url": null
+      "uuid": "0198e7b8-fe00-76e6-91e4-1253dd9a6230",
+      "type": "call_missed",
+      "created_on": "2021-03-30T22:20:26.704467+00:00"
     },
     {
       "type": "run_started",
@@ -226,16 +223,6 @@
         "name": "Favorites"
       }
     },
-    {
-      "type": "run_ended",
-      "created_on": "2021-03-30T22:20:26.704467+00:00",
-      "run_uuid": "0198c846-da2b-799f-8af9-aaf8857f947f",
-      "flow": {
-        "uuid": "d076d716-8071-417e-b188-d9746db223a1",
-        "name": "Favorites"
-      },
-      "status": "completed"
-    },
     {
       "uuid": "01988a77-979e-7768-a940-8d9c348e24fe",
       "type": "msg_received",

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 { 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/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":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEzD,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,SAAS,GAAc,MAAM,OAAO,CAAC,IAAI,CAAA;;;;kBAIjC,CAAC,4BAA4B,EAAE,uBAAuB,CAAC;;;;KAIpE,CAAC,CAAC;QAEH,MAAM,SAAS,CAAC,cAAc,CAAC;QAE/B,iCAAiC;QACjC,MAAM,aAAa,GAAG,SAAS,CAAC,UAAU,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;QAC5E,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACzC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAClD,4BAA4B,CAC7B,CAAC;QACF,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAClD,uBAAuB,CACxB,CAAC;QAEF,MAAM,gBAAgB,CAAC,6BAA6B,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5E,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;QAClD,MAAM,SAAS,GAAc,MAAM,OAAO,CAAC,IAAI,CAAA;;;;kBAIjC;YACR,uBAAuB;YACvB,wCAAwC;YACxC,kEAAkE;SACnE;;;;KAIJ,CAAC,CAAC;QAEH,MAAM,SAAS,CAAC,cAAc,CAAC;QAE/B,iCAAiC;QACjC,MAAM,aAAa,GAAG,SAAS,CAAC,UAAU,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;QAC5E,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAEzC,oCAAoC;QACpC,MAAM,UAAU,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;QACpC,MAAM,WAAW,GAAG,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACvD,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC;QACnC,MAAM,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAEjD,kCAAkC;QAClC,MAAM,WAAW,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;QACrC,MAAM,WAAW,GAAG,WAAW,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACnD,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC;QACnC,MAAM,CAAC,WAAW,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC;QACzE,MAAM,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAEjD,sDAAsD;QACtD,MAAM,UAAU,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;QACpC,MAAM,gBAAgB,GAAG,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC5D,MAAM,kBAAkB,GAAG,UAAU,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAC1D,MAAM,gBAAgB,GAAG,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACvD,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC;QACxC,MAAM,CAAC,kBAAkB,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC;QAC1C,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC;QAExC,MAAM,gBAAgB,CAAC,2BAA2B,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC;IAC1E,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,SAAS,GAAc,MAAM,OAAO,CAAC,IAAI,CAAA;;;;KAI9C,CAAC,CAAC;QAEH,MAAM,SAAS,CAAC,cAAc,CAAC;QAE/B,oCAAoC;QACpC,MAAM,aAAa,GAAG,SAAS,CAAC,UAAU,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;QAC5E,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAEzC,MAAM,gBAAgB,CAAC,qBAAqB,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC;IACpE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;QACvD,MAAM,SAAS,GAAc,MAAM,OAAO,CAAC,IAAI,CAAA;;;kBAGjC,CAAC,wDAAwD,CAAC;;;;KAIvE,CAAC,CAAC;QAEH,MAAM,SAAS,CAAC,cAAc,CAAC;QAE/B,mDAAmD;QACnD,MAAM,aAAa,GAAG,SAAS,CAAC,UAAU,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;QAC5E,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAEzC,MAAM,YAAY,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;QACtC,MAAM,WAAW,GAAG,YAAY,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACzD,MAAM,WAAW,GAAG,YAAY,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACpD,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC;QACnC,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC;QAEnC,MAAM,gBAAgB,CACpB,uCAAuC,EACvC,OAAO,CAAC,SAAS,CAAC,CACnB,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","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);
-  }
-}

package/test/temba-formfield.test.ts

@@ -1,121 +0,0 @@
-import { html, fixture, expect } from '@open-wc/testing';
-import { FormField } from '../src/form/FormField';
-import { assertScreenshot, getClip } from './utils.test';
-
-describe('temba-field', () => {
-  it('renders field with plain text errors', async () => {
-    const formField: 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: 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: 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: 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)
-    );
-  });
-});