@3t-transform/threeteeui 0.1.6 → 0.1.7

package/dist/cjs/tttx.cjs.js

@@ -1,19 +1,131 @@
 'use strict';
 
-const index = require('./index-b3010e55.js');
+const index = require('./index-11cfdabe.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
  Stencil Client Patch Browser v2.20.0 | MIT Licensed | https://stenciljs.com
  */
+const getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\s|-/g, '_')}`;
 const patchBrowser = () => {
+    // NOTE!! This fn cannot use async/await!
+    if (index.BUILD.isDev && !index.BUILD.isTesting) {
+        index.consoleDevInfo('Running in development mode.');
+    }
+    if (index.BUILD.cssVarShim) {
+        // shim css vars
+        index.plt.$cssShim$ = index.win.__cssshim;
+    }
+    if (index.BUILD.cloneNodeFix) {
+        // opted-in to polyfill cloneNode() for slot polyfilled components
+        patchCloneNodeFix(index.H.prototype);
+    }
+    if (index.BUILD.profile && !performance.mark) {
+        // not all browsers support performance.mark/measure (Safari 10)
+        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,
+        // simply stub the implementations out.
+        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)
+        // @ts-ignore
+        performance.mark = performance.measure = () => {
+            /*noop*/
+        };
+        performance.getEntriesByName = () => [];
+    }
+    // @ts-ignore
+    const scriptElm = index.BUILD.scriptDataOpts || index.BUILD.safari10 || index.BUILD.dynamicImportShim
+        ? Array.from(index.doc.querySelectorAll('script')).find((s) => new RegExp(`\/${index.NAMESPACE}(\\.esm)?\\.js($|\\?|#)`).test(s.src) ||
+            s.getAttribute('data-stencil-namespace') === index.NAMESPACE)
+        : null;
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('tttx.cjs.js', document.baseURI).href));
-    const opts = {};
-    if (importMeta !== '') {
+    const opts = index.BUILD.scriptDataOpts ? scriptElm['data-opts'] || {} : {};
+    if (index.BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {
+        // Safari < v11 support: This IF is true if it's Safari below v11.
+        // This fn cannot use async/await since Safari didn't support it until v11,
+        // however, Safari 10 did support modules. Safari 10 also didn't support "nomodule",
+        // so both the ESM file and nomodule file would get downloaded. Only Safari
+        // has 'onbeforeload' in the script, and "history.scrollRestoration" was added
+        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.
+        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.
+        return {
+            then() {
+                /* promise noop */
+            },
+        };
+    }
+    if (!index.BUILD.safari10 && importMeta !== '') {
         opts.resourcesUrl = new URL('.', importMeta).href;
     }
+    else if (index.BUILD.dynamicImportShim || index.BUILD.safari10) {
+        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, index.win.location.href)).href;
+        if (index.BUILD.dynamicImportShim) {
+            patchDynamicImport(opts.resourcesUrl, scriptElm);
+        }
+        if (index.BUILD.dynamicImportShim && !index.win.customElements) {
+            // module support, but no custom elements support (Old Edge)
+            // @ts-ignore
+            return Promise.resolve().then(function () { return require(/* webpackChunkName: "polyfills-dom" */ './dom-9deb26c8.js'); }).then(() => opts);
+        }
+    }
     return index.promiseResolve(opts);
 };
+const patchDynamicImport = (base, orgScriptElm) => {
+    const importFunctionName = getDynamicImportFunction(index.NAMESPACE);
+    try {
+        // test if this browser supports dynamic imports
+        // There is a caching issue in V8, that breaks using import() in Function
+        // By generating a random string, we can workaround it
+        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info
+        index.win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);
+    }
+    catch (e) {
+        // this shim is specifically for browsers that do support "esm" imports
+        // however, they do NOT support "dynamic" imports
+        // basically this code is for old Edge, v18 and below
+        const moduleMap = new Map();
+        index.win[importFunctionName] = (src) => {
+            const url = new URL(src, base).href;
+            let mod = moduleMap.get(url);
+            if (!mod) {
+                const script = index.doc.createElement('script');
+                script.type = 'module';
+                script.crossOrigin = orgScriptElm.crossOrigin;
+                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {
+                    type: 'application/javascript',
+                }));
+                mod = new Promise((resolve) => {
+                    script.onload = () => {
+                        resolve(index.win[importFunctionName].m);
+                        script.remove();
+                    };
+                });
+                moduleMap.set(url, mod);
+                index.doc.head.appendChild(script);
+            }
+            return mod;
+        };
+    }
+};
+const patchCloneNodeFix = (HTMLElementPrototype) => {
+    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;
+    HTMLElementPrototype.cloneNode = function (deep) {
+        if (this.nodeName === 'TEMPLATE') {
+            return nativeCloneNodeFn.call(this, deep);
+        }
+        const clonedNode = nativeCloneNodeFn.call(this, false);
+        const srcChildNodes = this.childNodes;
+        if (deep) {
+            for (let i = 0; i < srcChildNodes.length; i++) {
+                // Node.ATTRIBUTE_NODE === 2, and checking because IE11
+                if (srcChildNodes[i].nodeType !== 2) {
+                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));
+                }
+            }
+        }
+        return clonedNode;
+    };
+};
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-list.cjs",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"inputicon":[1],"inline":[4],"inputAutocapitalize":[1,"input-autocapitalize"],"inputAutofocus":[4,"input-autofocus"],"inputKeyhint":[1,"input-keyhint"],"inputIndex":[8,"input-index"],"inputTitle":[1,"input-title"],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[1032],"submitValue":[1032,"submit-value"]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
+  appGlobals.globalScripts();
+  return index.bootstrapLazy([["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-list.cjs",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"inputicon":[1],"inline":[4],"inputAutocapitalize":[1,"input-autocapitalize"],"inputAutofocus":[4,"input-autofocus"],"inputKeyhint":[1,"input-keyhint"],"inputIndex":[8,"input-index"],"inputTitle":[1,"input-title"],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[1032],"submitValue":[1032,"submit-value"]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-toolbar.cjs",[[1,"tttx-toolbar",{"border":[4]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -6,7 +6,8 @@
     "./components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js",
     "./components/atoms/tttx-loading-spinner/tttx-loading-spinner.js",
     "./components/molecules/tttx-form/tttx-form.js",
-    "./components/molecules/tttx-list/tttx-list.js"
+    "./components/molecules/tttx-list/tttx-list.js",
+    "./components/molecules/tttx-toolbar/tttx-toolbar.js"
   ],
   "compiler": {
     "name": "@stencil/core",

package/dist/collection/components/atoms/tttx-button/test/tttx-button.e2e.js

@@ -0,0 +1,9 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('tttx-button', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<tttx-button></tttx-button>');
+    const element = await page.find('tttx-button');
+    expect(element).toHaveClass('hydrated');
+  });
+});

package/dist/collection/components/atoms/tttx-button/test/tttx-button.spec.js

@@ -0,0 +1,83 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { TttxButton } from '../tttx-button';
+describe('tttx-button', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [TttxButton],
+      html: '<tttx-button></tttx-button>',
+    });
+    expect(page.root).toEqualHtml(`
+            <tttx-button>
+                <mock:shadow-root>
+                    <button class="button default">
+                        <div class="button-content">
+                            <slot></slot>
+                        </div>
+                    </button>
+                </mock:shadow-root>
+            </tttx-button>
+        `);
+  });
+  it('renders a white icon', async () => {
+    const page = await newSpecPage({
+      components: [TttxButton],
+      html: '<tttx-button design="primary" icon="person"></tttx-button>',
+    });
+    expect(page.root).toEqualHtml(`
+            <tttx-button design="primary" icon="person">
+                <mock:shadow-root>
+                    <button class="button iconleft primary withicon">
+                        <div class="icon-left">
+                            <tttx-icon color="white" icon="person"></tttx-icon>
+                        </div>
+                        <div class="button-content">
+                            <slot></slot>
+                        </div>
+                    </button>
+                </mock:shadow-root>
+            </tttx-button>
+        `);
+  });
+  it('design doesn\'t exist', async () => {
+    const page = await newSpecPage({
+      components: [TttxButton],
+      html: '<tttx-button design="memphis" icon="person"></tttx-button>',
+    });
+    expect(page.root).toEqualHtml(`
+            <tttx-button design="memphis" icon="person">
+                <mock:shadow-root>
+                    <button class="button default iconleft withicon">
+                        <div class="icon-left">
+                            <tttx-icon color="black" icon="person"></tttx-icon>
+                        </div>
+                        <div class="button-content">
+                            <slot></slot>
+                        </div>
+                    </button>
+                </mock:shadow-root>
+            </tttx-button>
+        `);
+  });
+  it('clicks', async () => {
+    const page = await newSpecPage({
+      components: [TttxButton],
+      html: '<tttx-button></tttx-button>',
+    });
+    expect(page.root).toEqualHtml(`
+            <tttx-button>
+                <mock:shadow-root>
+                    <button class="button default">
+                        <div class="button-content">
+                            <slot></slot>
+                        </div>
+                    </button>
+                </mock:shadow-root>
+            </tttx-button>
+        `);
+    const callbackFn = jest.fn();
+    // add an event listener directly to the tttx-button host and click it
+    page.root.addEventListener('click', callbackFn);
+    page.root.click();
+    expect(callbackFn).toHaveBeenCalled();
+  });
+});

package/dist/collection/components/atoms/tttx-icon/test/tttx-icon.e2e.js

@@ -0,0 +1,9 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('tttx-icon', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<tttx-icon></tttx-icon>');
+    const element = await page.find('tttx-icon');
+    expect(element).toHaveClass('hydrated');
+  });
+});

package/dist/collection/components/atoms/tttx-icon/test/tttx-icon.spec.js

@@ -0,0 +1,16 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { TttxIcon } from '../tttx-icon';
+describe('tttx-icon', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [TttxIcon],
+      html: '<tttx-icon color="danger" icon="warning"></tttx-icon>',
+    });
+    expect(page.root).toEqualHtml(`
+        <tttx-icon color="danger" icon="warning">
+            <mock:shadow-root>
+                <span class="material-symbols-rounded danger">warning</span>
+            </mock:shadow-root>
+        </tttx-icon>`);
+  });
+});

package/dist/collection/components/atoms/tttx-keyvalue-block/test/tttx-keyvalue-block.spec.js

@@ -0,0 +1,216 @@
+import { h } from '@stencil/core';
+import { newSpecPage } from '@stencil/core/testing';
+import { TttxKeyvalueBlock } from '../tttx-keyvalue-block';
+describe('tttx-keyvalue-block', () => {
+  it('renders multiple key value pairs', async () => {
+    const keyValuePair = {
+      'Name': 'John Doe',
+      'Date of birth': '14 Jan 1981',
+      'Start of postcode': 'AB10'
+    };
+    const page = await newSpecPage({
+      components: [TttxKeyvalueBlock],
+      html: `<tttx-keyvalue-block keyvalues='${JSON.stringify(keyValuePair)}' />`
+    });
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+            <tttx-keyvalue-block keyvalues='{"Name":"John Doe","Date of birth":"14 Jan 1981","Start of postcode":"AB10"}'>
+                <mock:shadow-root>
+                    <dl>
+                        <dt>
+                            Name
+                        </dt>
+                        <dd>
+                            John Doe
+                        </dd>
+                        <dt>
+                            Date of birth
+                        </dt>
+                        <dd>
+                            14 Jan 1981
+                        </dd>
+                        <dt>
+                            Start of postcode
+                        </dt>
+                        <dd>
+                            AB10
+                        </dd>
+                    </dl>
+                </mock:shadow-root>
+            </tttx-keyvalue-block>
+        `);
+  });
+  it('renders multiple key value pairs from a stencil template', async () => {
+    const keyValuePair = {
+      'Name': 'John Doe',
+      'Date of birth': '14 Jan 1981',
+      'Start of postcode': 'AB10'
+    };
+    const page = await newSpecPage({
+      components: [TttxKeyvalueBlock],
+      template: () => (h("tttx-keyvalue-block", { keyvalues: keyValuePair }))
+    });
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+            <tttx-keyvalue-block>
+                <mock:shadow-root>
+                    <dl>
+                        <dt>
+                            Name
+                        </dt>
+                        <dd>
+                            John Doe
+                        </dd>
+                        <dt>
+                            Date of birth
+                        </dt>
+                        <dd>
+                            14 Jan 1981
+                        </dd>
+                        <dt>
+                            Start of postcode
+                        </dt>
+                        <dd>
+                            AB10
+                        </dd>
+                    </dl>
+                </mock:shadow-root>
+            </tttx-keyvalue-block>
+        `);
+  });
+  it('renders with missing keyvalue object', async () => {
+    const page = await newSpecPage({
+      components: [TttxKeyvalueBlock],
+      template: () => (h("tttx-keyvalue-block", null))
+    });
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+            <tttx-keyvalue-block>
+                <mock:shadow-root>
+                </mock:shadow-root>
+            </tttx-keyvalue-block>
+        `);
+  });
+  it('renders an array of key value subtitles', async () => {
+    const keyValueArray = [
+      { title: 'title', subTitle: 'sub', data: 'data' },
+      { title: 'title2', subTitle: 'sub2', data: 'data2' }
+    ];
+    const page = await newSpecPage({
+      components: [TttxKeyvalueBlock],
+      html: `<tttx-keyvalue-block keyvalues='${JSON.stringify(keyValueArray)}' />`
+    });
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+            <tttx-keyvalue-block keyvalues='[{"title":"title","subTitle":"sub","data":"data"},{"title":"title2","subTitle":"sub2","data":"data2"}]'>
+                <mock:shadow-root>
+                    <dl>
+                        <dt class="mainTitle">
+                            title
+                        </dt>
+                        <dt class="subTitle">
+                            sub
+                        </dt>
+                        <dd>
+                            data
+                        </dd>
+                        <dt class="mainTitle">
+                            title2
+                        </dt>
+                        <dt class="subTitle">
+                            sub2
+                        </dt>
+                        <dd>
+                            data2
+                        </dd>
+                    </dl>
+                </mock:shadow-root>
+            </tttx-keyvalue-block>
+        `);
+  });
+  it('renders multiple horizontal key value pairs', async () => {
+    const keyValuePair = {
+      'Name': 'John Doe',
+      'Date of birth': '14 Jan 1981',
+      'Start of postcode': 'AB10'
+    };
+    const page = await newSpecPage({
+      components: [TttxKeyvalueBlock],
+      html: `<tttx-keyvalue-block horizontal="true" keyvalues='${JSON.stringify(keyValuePair)}' />`
+    });
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+            <tttx-keyvalue-block horizontal="true" keyvalues='{"Name":"John Doe","Date of birth":"14 Jan 1981","Start of postcode":"AB10"}'>
+                <mock:shadow-root>
+                    <dl class="horizontal">
+                        <div>
+                            <dt>
+                                Name
+                            </dt>
+                            <dd>
+                                John Doe
+                            </dd>
+                        </div>
+                        <div>
+                            <dt>
+                                Date of birth
+                            </dt>
+                            <dd>
+                                14 Jan 1981
+                            </dd>
+                        </div>
+                        <div>
+                            <dt>
+                                Start of postcode
+                            </dt>
+                            <dd>
+                                AB10
+                            </dd>
+                        </div>
+                    </dl>
+                </mock:shadow-root>
+            </tttx-keyvalue-block>
+        `);
+  });
+  it('renders an array of horizontal key value subtitles', async () => {
+    const keyValueArray = [
+      { title: 'title', subTitle: 'sub', data: 'data' },
+      { title: 'title2', subTitle: 'sub2', data: 'data2' }
+    ];
+    const page = await newSpecPage({
+      components: [TttxKeyvalueBlock],
+      html: `<tttx-keyvalue-block horizontal="true" keyvalues='${JSON.stringify(keyValueArray)}' />`
+    });
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+            <tttx-keyvalue-block horizontal="true" keyvalues='[{"title":"title","subTitle":"sub","data":"data"},{"title":"title2","subTitle":"sub2","data":"data2"}]'>
+                <mock:shadow-root>
+                    <dl class="horizontal">
+                        <div>
+                            <dt class="mainTitle">
+                                title
+                            </dt>
+                            <dt class="subTitle">
+                                sub
+                            </dt>
+                            <dd>
+                                data
+                            </dd>
+                        </div>
+                        <div>
+                            <dt class="mainTitle">
+                                title2
+                            </dt>
+                            <dt class="subTitle">
+                                sub2
+                            </dt>
+                            <dd>
+                                data2
+                            </dd>
+                        </div>
+                    </dl>
+                </mock:shadow-root>
+            </tttx-keyvalue-block>
+        `);
+  });
+});

package/dist/collection/components/atoms/tttx-loading-spinner/Test/tttx-loading-spinner.spec.js

@@ -0,0 +1,64 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { TttxLoadingSpinner } from '../tttx-loading-spinner';
+describe('tttx-loading-spinner', () => {
+  it('renders the loading text when the loading message prop is set to true', async () => {
+    const page = await newSpecPage({
+      components: [TttxLoadingSpinner],
+      html: '<tttx-loading-spinner></tttx-loading-spinner>',
+    });
+    page.rootInstance.loadingMessage = true;
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+      <tttx-loading-spinner>
+        <mock:shadow-root>
+          <div class='spinner-container'><div class="loading-box"><span class='spinner large'></span></div><div class='loading-text'>Loading, please wait...</div></div>
+        </mock:shadow-root>
+      </tttx-loading-spinner>
+    `);
+  });
+  it('renders without the loading text when the loading message prop is set to false', async () => {
+    const page = await newSpecPage({
+      components: [TttxLoadingSpinner],
+      html: '<tttx-loading-spinner></tttx-loading-spinner>',
+    });
+    page.rootInstance.loadingMessage = false;
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+      <tttx-loading-spinner>
+        <mock:shadow-root>
+          <div class='spinner-container'><div class="loading-box"><span class='spinner large'></span></div></div>
+        </mock:shadow-root>
+      </tttx-loading-spinner>
+    `);
+  });
+  it('renders the small spinner when the size prop is set to small', async () => {
+    const page = await newSpecPage({
+      components: [TttxLoadingSpinner],
+      html: '<tttx-loading-spinner></tttx-loading-spinner>',
+    });
+    page.rootInstance.size = 'small';
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+      <tttx-loading-spinner>
+        <mock:shadow-root>
+          <div class='spinner-container'><div class="loading-box"><span class='spinner small'></span></div></div>
+        </mock:shadow-root>
+      </tttx-loading-spinner>
+    `);
+  });
+  it('renders the large spinner when the size prop is set to large', async () => {
+    const page = await newSpecPage({
+      components: [TttxLoadingSpinner],
+      html: '<tttx-loading-spinner></tttx-loading-spinner>',
+    });
+    page.rootInstance.size = 'large';
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+      <tttx-loading-spinner>
+        <mock:shadow-root>
+          <div class='spinner-container'><div class="loading-box"><span class='spinner large'></span></div></div>
+        </mock:shadow-root>
+      </tttx-loading-spinner>
+    `);
+  });
+});

package/dist/collection/components/molecules/tttx-form/lib/setErrorState.spec.js

@@ -0,0 +1,38 @@
+import setErrorState from './setErrorState';
+describe('setErrorState', () => {
+  let target;
+  let errorBubble;
+  beforeEach(() => {
+    target = document.createElement('input');
+    errorBubble = document.createElement('div');
+    errorBubble.className = 'errorBubble';
+    target.parentElement = document.createElement('div');
+    target.parentElement.appendChild(errorBubble);
+  });
+  afterEach(() => {
+    target = null;
+    errorBubble = null;
+  });
+  test('should set error state correctly when hasError is true', () => {
+    setErrorState(target, true, 'Invalid value');
+    expect(target.className).toBe('invalid');
+    expect(errorBubble.innerHTML).toBe('<span class="material-symbols-rounded">warning</span>Invalid value');
+  });
+  test('should clear error state correctly when hasError is false', () => {
+    target.className = 'invalid';
+    errorBubble.innerHTML = '<span class="material-symbols-rounded">warning</span>Invalid value';
+    setErrorState(target, false, '');
+    expect(target.className).toBe('');
+    expect(errorBubble.innerHTML).toBe('');
+  });
+  test('should set error state correctly with custom error message', () => {
+    setErrorState(target, true, 'Custom error message');
+    expect(target.className).toBe('invalid');
+    expect(errorBubble.innerHTML).toBe('<span class="material-symbols-rounded">warning</span>Custom error message');
+  });
+  test('should set error state correctly with no error message', () => {
+    setErrorState(target, true, '');
+    expect(target.className).toBe('invalid');
+    expect(errorBubble.innerHTML).toBe('<span class="material-symbols-rounded">warning</span> ');
+  });
+});