genesys-spark-components 4.60.1 → 4.62.0

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-file/tests/gux-form-field-file.e2e.js

@@ -0,0 +1,102 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { newSparkE2EPage, a11yCheck } from "../../../../../../test/e2eTestUtils";
+const axeExclusions = [];
+async function newNonrandomE2EPage({ html }) {
+    const page = await newE2EPage();
+    await page.evaluateOnNewDocument(() => {
+        Math.random = () => 0.5;
+    });
+    await page.setContent(html);
+    await page.waitForChanges();
+    return page;
+}
+describe('gux-form-field-file', () => {
+    describe('#render', () => {
+        describe('label-position', () => {
+            [
+                '',
+                'label-position="above"',
+                'label-position="beside"',
+                'label-position="screenreader"'
+            ].forEach((componentAttribute, index) => {
+                const html = `
+        <gux-form-field-file ${componentAttribute}>
+        <label slot="label">Upload a profile picture</label>
+        <input
+          type="file"
+          id="avatar"
+          name="avatar"
+          accept="image/png, image/jpeg"
+          slot="input"
+        />
+      </gux-form-field-file>
+        `;
+                it(`should render component as expected (${index + 1})`, async () => {
+                    const page = await newNonrandomE2EPage({ html });
+                    const element = await page.find('gux-form-field-file');
+                    const elementShadowDom = await element.find('pierce/.gux-form-field-container');
+                    expect(element.outerHTML).toMatchSnapshot();
+                    expect(elementShadowDom).toMatchSnapshot();
+                });
+                it(`should be accessible (${index + 1})`, async () => {
+                    const page = await newSparkE2EPage({ html });
+                    await a11yCheck(page, axeExclusions);
+                });
+            });
+        });
+        describe('input attributes', () => {
+            ['', 'disabled', 'required'].forEach((inputAttribute, index) => {
+                const html = `
+        <gux-form-field-file>
+        <label slot="label">Upload a profile picture</label>
+        <input
+          slot="input"
+          type="file"
+          id="avatar"
+          name="avatar"
+          accept="image/png, image/jpeg"
+          ${inputAttribute}
+        />
+      </gux-form-field-file>
+        `;
+                it(`should render component as expected (${index + 1})`, async () => {
+                    const page = await newNonrandomE2EPage({ html });
+                    const element = await page.find('gux-form-field-file');
+                    const elementShadowDom = await element.find('pierce/.gux-form-field-container');
+                    expect(element.outerHTML).toMatchSnapshot();
+                    expect(elementShadowDom).toMatchSnapshot();
+                });
+                it(`should be accessible (${index + 1})`, async () => {
+                    const page = await newSparkE2EPage({ html });
+                    await a11yCheck(page, axeExclusions);
+                });
+            });
+        });
+        describe('help', () => {
+            const html = `
+      <gux-form-field-file>
+      <label slot="label">Upload a profile picture</label>
+      <input
+        slot="input"
+        type="file"
+        id="avatar"
+        name="avatar"
+        accept="image/png, image/jpeg"
+      />
+      <span slot="help">This is a help message </span>
+    </gux-form-field-file>
+      `;
+            it('should render component as expected', async () => {
+                const page = await newNonrandomE2EPage({ html });
+                const element = await page.find('gux-form-field-file');
+                const elementShadowDom = await element.find('pierce/.gux-form-field-container');
+                expect(element.outerHTML).toMatchSnapshot();
+                expect(elementShadowDom).toMatchSnapshot();
+            });
+            it('should be accessible', async () => {
+                const page = await newSparkE2EPage({ html });
+                await a11yCheck(page, axeExclusions);
+            });
+        });
+    });
+});

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-file/tests/gux-form-field-file.spec.js

@@ -0,0 +1,89 @@
+import { newSpecPage } from "../../../../../../test/specTestUtils";
+import { GuxFormFieldFile } from "../gux-form-field-file";
+const components = [GuxFormFieldFile];
+const language = 'en';
+describe('gux-form-field-file', () => {
+    it('should build', async () => {
+        const html = `
+    <gux-form-field-file>
+      <label slot="label">Upload a profile picture</label>
+      <input
+        type="file"
+        id="avatar"
+        name="avatar"
+        accept="image/png, image/jpeg"
+        slot="input"
+      />
+    </gux-form-field-file>
+    `;
+        const page = await newSpecPage({ components, html, language });
+        expect(page.rootInstance).toBeInstanceOf(GuxFormFieldFile);
+    });
+    describe('#render', () => {
+        describe('label-position', () => {
+            [
+                '',
+                'label-position="above"',
+                'label-position="beside"',
+                'label-position="screenreader"'
+            ].forEach((componentAttribute, index) => {
+                it(`should render component as expected (${index + 1})`, async () => {
+                    const html = `
+            <gux-form-field-file ${componentAttribute}>
+            <label slot="label">Upload a profile picture</label>
+            <input
+              type="file"
+              id="avatar"
+              name="avatar"
+              accept="image/png, image/jpeg"
+              slot="input"
+            />
+          </gux-form-field-file>
+          `;
+                    const page = await newSpecPage({ components, html, language });
+                    expect(page.root).toMatchSnapshot();
+                });
+            });
+        });
+        describe('input attributes', () => {
+            ['', 'disabled', 'required'].forEach((inputAttribute, index) => {
+                it(`should render component as expected (${index + 1})`, async () => {
+                    const html = `
+            <gux-form-field-file>
+            <label slot="label">Upload a profile picture</label>
+            <input
+              slot="input"
+              type="file"
+              id="avatar"
+              name="avatar"
+              accept="image/png, image/jpeg"
+              ${inputAttribute}
+            />
+          </gux-form-field-file>
+          `;
+                    const page = await newSpecPage({ components, html, language });
+                    expect(page.root).toMatchSnapshot();
+                });
+            });
+        });
+        describe('help', () => {
+            it('should render component as expected', async () => {
+                const html = `
+        <gux-form-field-file>
+        <label slot="label">Upload a profile picture</label>
+        <input
+          slot="input"
+          type="file"
+          id="avatar"
+          name="avatar"
+          accept="image/png, image/jpeg"
+        />
+        <span slot="help">This is a help message </span>
+      </gux-form-field-file>
+        `;
+                const page = await newSpecPage({ components, html, language });
+                expect(page.root).toMatchSnapshot();
+            });
+        });
+    });
+});

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-number/gux-form-field-number.js

@@ -69,14 +69,14 @@ export class GuxFormFieldNumber {
     }
     render() {
         const showClearButton = this.clearable && this.hasContent && !this.disabled;
-        return (h(GuxFormFieldContainer, { key: 'f8a6263300721fabed1598de265f03f057838f74', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'e32c773c643108d62c37d418f9cc6beba83e0e36', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'efc3fef4d86af9b7790cb230b3a27a11d4d6b907', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: '2acd69ecc8a21a92936bd585f9e9a4b621231bd9', class: "gux-input-and-error-container" }, h("div", { key: '233fd1e290da8bf45d0e77a0ca43a88677e6cf0a', class: {
+        return (h(GuxFormFieldContainer, { key: '06d690ac53196b338f63ffc43357ec2f767db8c3', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '8c0e4b58c2ffdfb2512d063354d306d1bf6bcf84', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '52630c99f6639976c957f5ffd7ef0f1eaee513c0', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: '884cd8c9a479f219af5993d6647373271ce38e3f', class: "gux-input-and-error-container" }, h("div", { key: 'fad6d2520508f8fbb72debf0c9ea4b7f4155da33', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            }, part: "input-section" }, h("div", { key: '7930f9f5df29d0c836d9f4abdc8887b8c3d1cfc2', class: {
+            }, part: "input-section" }, h("div", { key: '52ea9a851b4d833a785c2a67261714e0f82046be', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled,
                 'gux-clear': showClearButton
-            } }, h("slot", { key: '8d33ab29cbea52b965970e80567c0a7c5b70caab', name: "input", onSlotchange: () => this.setInput() }), showClearButton && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), h(GuxFormFieldError, { key: '14856b89f418274dbbd30b39e043c0adfcbe5b99', show: this.hasError }, h("slot", { key: 'a485d17c2c0edb3e4d6c47e9d1989f7de3c1e9d4', name: "error" })), h(GuxFormFieldHelp, { key: '9e5ad524d3593c58845d5d0c9fc2fffb984043b2', show: !this.hasError && this.hasHelp }, h("slot", { key: 'f215b7c1df4b4824bba6e9294eb4360de5a7ef1c', name: "help" })))));
+            } }, h("slot", { key: '8869341bffc6aa5d9e2044af0e909b551d817283', name: "input", onSlotchange: () => this.setInput() }), showClearButton && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), h(GuxFormFieldError, { key: '60ce4357b7f6bce84f7022555e6e0fedde67abac', show: this.hasError }, h("slot", { key: 'c1747439b8451b5733025f14274c7661a3138cb8', name: "error" })), h(GuxFormFieldHelp, { key: '4b8b48d158613a9549000729e04795f4e7925015', show: !this.hasError && this.hasHelp }, h("slot", { key: '3f55b12da9f0a678c2758f00fdaaa0c63fea1446', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-phone/gux-form-field-phone.js

@@ -60,13 +60,13 @@ export class GuxFormFieldPhone {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '6f3dcc2df1e049772e8fa25a9165092bbcb7e37a', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { key: '5c0ce7b6b7b76052811481e8c0d110600571d176', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: 'ce266647a05aa9ea122186d6eae6317756aed01f', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { key: '5f01ad183044592ddf5141d6109f347a97fae0d3', class: "gux-input-and-error-container" }, h("div", { key: '20dd9d00ffe2aa659ba2d62334454c5feb29c7e9', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: '4e15cadb0eb096b2609080f112df6a2ba8ea03da', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { key: '66b6d1acb37bdc0724dd7ba84e6efb486bcb6bfe', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: '77909d4f5530b80c06c0d5208d765b6ff0cc22ac', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { key: '8166739123cb47ba77b18222fb7b7fe91ab2dfbf', class: "gux-input-and-error-container" }, h("div", { key: 'b59c8329ecbc6ac0358aaf47c2c9d8ac230d9105', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: 'e53e678ece01ed35a0d30f8f5634180d7db1daf2', class: {
+            } }, h("div", { key: '098d02652a52fa7260aaa7e8d72f36afcb6fb320', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '1a01971423a7a0a5bedd726ce946c37d4f8a7952' }))), h(GuxFormFieldError, { key: '526dbfac1bfcda733f72816852ee529da891207e', show: this.hasError }, h("slot", { key: '04bb439b88d010b43d312b6bf5f95eddb476a216', name: "error" })), h(GuxFormFieldHelp, { key: 'a7f8f06b605800b4d03a9519e053a92cbd4e485c', show: !this.hasError && this.hasHelp }, h("slot", { key: '8242387ab7a043766c6ec74cf20352ca0ed7fa67', name: "help" })))));
+            } }, h("slot", { key: '01535a871d32c7f3c6b6c876add52655c82644d6' }))), h(GuxFormFieldError, { key: 'ea7ddb822798705b64c35198b9d60dee20133a3d', show: this.hasError }, h("slot", { key: '70c6fa4e41a5d4c6dec4a65cabee1333ecdebe03', name: "error" })), h(GuxFormFieldHelp, { key: '2c2952d3a7151b0a45f92d0b073f3c3a71099ca3', show: !this.hasError && this.hasHelp }, h("slot", { key: 'e788906cf4aa66f1f43224b19d9c0de033194376', name: "help" })))));
     }
     renderScreenReaderText(text, condition = true) {
         if (condition) {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-radio/gux-form-field-radio.js

@@ -47,10 +47,10 @@ export class GuxFormFieldRadio {
         }
     }
     render() {
-        return (h(Host, { key: 'e17456ce9b8015838eacb38cd698f3f4877b1a99', class: {
+        return (h(Host, { key: '103e6558a905331341f5984522d62ce28a0e9977', class: {
                 'gux-input-error': this.hasError || this.hasGroupError,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: 'fe8d1587dc9d4fc8f018820c71c732744953f207', class: "gux-form-field-container" }, h("div", { key: '808758ed100a768166f5293516deda32a0e43a76', class: "gux-input-label" }, h("div", { key: 'bf76f380a1eef45ddad060fc329692191d8975a7', class: "gux-input" }, h("slot", { key: '50b92448e54b4f8657d6635776797051640797cb', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: '96c770f17e7f9b64a321eedf688b494ff7d21934', class: "gux-label", "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '95a58e33847a0f69581dbdb7c5daf85c1f94d920', name: "label" }), h(GuxFormFieldError, { key: 'a55afaef6dce712f6642f32f5062b3390f39bd76', show: this.hasError }, h("slot", { key: '4aa4107d5024de21aa285af17d50be5855636309', name: "error" })), h(GuxFormFieldHelp, { key: '7e01a45a1f0e6d8ee1f72ecf90e890b35ebf3b99', show: !this.hasError && this.hasHelp }, h("slot", { key: '970ad77bfd7ff17c5d48f0786aa23c6af45cb9e2', name: "help" })))))));
+            } }, h("div", { key: '4ffd4e6a959cd95a775d039c6fd30c210ee67e62', class: "gux-form-field-container" }, h("div", { key: '486c5cc20301afe399a8019b8faa0ed7e8e91e92', class: "gux-input-label" }, h("div", { key: '384342b099a95c0c22de30676f610109a639c68b', class: "gux-input" }, h("slot", { key: '614bdc5b837453bf0b905515f75cbafbbcb52d6d', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: 'b31c7c52fd0342c54036e8923eddd45b0fbb86d8', class: "gux-label", "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '00abf1d396a7c7d3e85ada03f3252beca0a605b3', name: "label" }), h(GuxFormFieldError, { key: 'f37943064f7a1affdca7415d19fa1aafa5980a06', show: this.hasError }, h("slot", { key: '22fb9f64a29aef17e7f2960a9cd6adc392674e59', name: "error" })), h(GuxFormFieldHelp, { key: '76710558d201dd9c0284438db53edd4d549d5852', show: !this.hasError && this.hasHelp }, h("slot", { key: '21d96cceefea2b18cb73333d6c9da8092f4651ea', name: "help" })))))));
     }
     setInput() {
         this.input = getSlottedInput(this.root, 'input[type="radio"][slot="input"]');

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-radio-group/gux-form-field-radio-group.js

@@ -67,7 +67,7 @@ export class GuxFormFieldRadioGroupBeta {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '8f54b265084eb1c2da7fe3283746c5d7be789492', labelPosition: "above" }, h(GuxFormFieldLegendLabel, { key: 'd3589e14418dea8366238f3c51b9fe733c04ea68', position: "above", required: false, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: '388c245f668ab9bdf799c6796f2dfd0ec1f3fa6e', name: "group-label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderScreenReaderText(getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp)), h("slot", { key: '05ab0e89cb8796d91e744d527fce8f27af0a1707' }), h(GuxFormFieldError, { key: 'cea0ae86c19cf0de7c9606ef53b9371a6cc6311a', show: this.hasGroupError }, h("slot", { key: 'b58ebc4dad34f9b7dc5b3c0c513910e2dc2301ce', name: "group-error" })), h(GuxFormFieldHelp, { key: '567d7d9da1dca56dab2e8611bff268736b2c251c', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: 'ebaa33bca1a7e949e570556da99fe95977446a86', name: "group-help" }))));
+        return (h(GuxFormFieldFieldsetContainer, { key: '27afb9a6d9276abd37b5c68ce4747be7a890f6e3', labelPosition: "above" }, h(GuxFormFieldLegendLabel, { key: '80423b504cf7daed7c1e8e04120c01643e6488ca', position: "above", required: false, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: 'ab56ce608357019c087c6e4e638294f7d4670532', name: "group-label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderScreenReaderText(getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp)), h("slot", { key: 'e8cbcbb7bc62ca22f0d76b72df75149796fe3478' }), h(GuxFormFieldError, { key: 'de0d9249b65521238028acbf380842df2a511d70', show: this.hasGroupError }, h("slot", { key: 'bf0db1f80929a8058dd66b73b6888043446b46e8', name: "group-error" })), h(GuxFormFieldHelp, { key: '31fbd032ac3b195c2fb2a926fcb1d085a9b661a2', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: '6c221afbdfa6103b12e76b74247380ba13b362e1', name: "group-help" }))));
     }
     setLabel() {
         this.label = this.root.querySelector('label[slot="label"]');

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-range/gux-form-field-range.js

@@ -82,9 +82,9 @@ export class GuxFormField {
         clearInterval(this.valueWatcherId);
     }
     render() {
-        return (h(Host, { key: 'ab84b7a0a6ffe60550f76789f435a86e32850874', class: {
+        return (h(Host, { key: 'ab911417f8987db8dae45169245281a517a2e0bc', class: {
                 'gux-active': this.active
-            } }, h(GuxFormFieldContainer, { key: '7e37db581de411b3c8548ef9142e11362c59ff41', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '81bfda9e439bcdf6d4a444cd53ae80cb6d186d60', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'f1536b5af281b9051919c5c11d18a7e5633d9603', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: '0868eb6e6af3efe69db3b3d3c5324a6450f7eb73', class: "gux-input-and-error-container" }, this.renderRangeInput(), h(GuxFormFieldError, { key: '91130872a632988e5cde9765dd74a27a8a0cc4f7', show: this.hasError }, h("slot", { key: '3081f22e9dfc5d58cc42bd6075fa225fb4dbe036', name: "error" })), h(GuxFormFieldHelp, { key: '0e3d8cf3afc0773f369f19257916c919dd6c8ca2', show: !this.hasError && this.hasHelp }, h("slot", { key: '02b487e1c73af225d7227b56d9fc1bb9da51498e', name: "help" }))))));
+            } }, h(GuxFormFieldContainer, { key: '4fd8e66e4a8ce9b4d089f91ff858d376530ee311', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'b216389853b2fc1159d08c6197642a962c32a6f2', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'f0e54cd4a3c8f5138718a1f5dfc0f2d25fa3606c', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: '616c791c64a1f595a729f201a28efe3e2a816b20', class: "gux-input-and-error-container" }, this.renderRangeInput(), h(GuxFormFieldError, { key: '9c5a20f9fb423e34c0dd99e91aa40c994732ca54', show: this.hasError }, h("slot", { key: '6627e9d4bdf8e1f28add3de842b3305e4fda3f2f', name: "error" })), h(GuxFormFieldHelp, { key: '291c0dacc1116dc58eb41db4f54875bd3121c158', show: !this.hasError && this.hasHelp }, h("slot", { key: '97345b7e0f110c4ddd500f26848960d9c61d02d8', name: "help" }))))));
     }
     get variant() {
         return this.labelPosition ? this.labelPosition.toLowerCase() : 'none';

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-search/gux-form-field-search.js

@@ -62,13 +62,13 @@ export class GuxFormFieldSearch {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '42779f1c2d0cab45b38f18e6ae50166f70f257f7', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '080fb3751b41d43042a65ac6a2bbf666d25f0be4', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'c6ffd706741bb8daeb959b720daa0c03a44a27e5', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: '525766420143a047d9f7ed56ce06399f100931a2', class: "gux-input-and-error-container" }, h("div", { key: '83073128ad9ed6c7a168e77c690ee4792900a4f2', class: {
+        return (h(GuxFormFieldContainer, { key: 'f00607cfa9dd0dd961ca87d93aadc86dada59955', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'f97392a34ffd54d453e5fa8eab87af33a19aafee', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '40386b8ea847c417561968ce09cfef3218c2b779', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: '1b40b3d66c8ee971240dbb79477eccab3262daae', class: "gux-input-and-error-container" }, h("div", { key: '48596cfe8e15b3647c3446309947ae3439a2aa61', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '5ba45dde5c2aab840675dca2ff37272527793d01', class: {
+            } }, h("div", { key: 'f32239cdfa609f8637d70887364b1aa297431bc5', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("gux-icon", { key: 'f673d51be68a9a3ca29d75e71fc78b87bfc6e588', "icon-name": "fa/magnifying-glass-regular", decorative: true }), h("slot", { key: '317c0dab47ae69fece7829507aa3800e4f08a384', name: "input" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: '897ae0159c0abfe24724897b079d631e878c00a5', show: this.hasError }, h("slot", { key: '5ec68b0692c98b2154f2d7baefb109b1de6ad5f9', name: "error" })), h(GuxFormFieldHelp, { key: '1f457eae9906f50809f53510e36b9aa799294772', show: !this.hasError && this.hasHelp }, h("slot", { key: '5acac15b6f1306fe62398ff136cfb487b35e2be0', name: "help" })))));
+            } }, h("gux-icon", { key: '2b7f2f102517c1fa52a1f68d32d559ebbe8f4c27', "icon-name": "fa/magnifying-glass-regular", decorative: true }), h("slot", { key: 'a05847665f136b0a8ab2fb3cf99ae82e38b503eb', name: "input" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: 'ae5562689221e73b608d14884c32a4685023dfc9', show: this.hasError }, h("slot", { key: '4d3d2a02059ca3f22961a20b651f30698d0bb837', name: "error" })), h(GuxFormFieldHelp, { key: 'bbee0d886b9dfe5bb468b17062188df7de70fc53', show: !this.hasError && this.hasHelp }, h("slot", { key: '913206b4f832954b7d8b2e63eb4f04af3a6fc116', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-select/gux-form-field-select.js

@@ -53,13 +53,13 @@ export class GuxFormFieldSelect {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '0f05fda9050e25ffa3dafa20b650a79e5451b557', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'df77654c404549e8649b9fd0825f7cbf2e133271', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'cc902ff85b3a340db13c2bf984af0129be98b9fa', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: '5798224cf3620259bbcc051327772bf484b43065', class: "gux-input-and-error-container" }, h("div", { key: '7dc8d4a80418c7f26b4987e0f5a7b9124ae12399', class: {
+        return (h(GuxFormFieldContainer, { key: 'f58fc0d759ccdbceb99dcf2a3ad807ed8c4221b9', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '30ff86898ffb5770b3cd632d84cf481f8d1355ff', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'e4838ccd6ec174bae23902af8bc4446981503787', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: '65d278d8549366d02759698b511d60abf1db3389', class: "gux-input-and-error-container" }, h("div", { key: '8a89344b263745ef9a1f39cc66f4577daabffe87', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: 'd363aa3963e9be7174d74e96976244ccc3ce7d37', class: {
+            } }, h("div", { key: 'ba4bf085608671a1224a35fdb2c2227b04708c39', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '5933423758246e0a2e6ac345eb74398372c20f4f', name: "input" }), h("gux-icon", { key: '6ad7a5a76f4f84c4b2f8102705ea523baac3f542', "icon-name": "custom/chevron-down-small-regular", decorative: true }))), h(GuxFormFieldError, { key: '76effa57179c825bd47ac1c4b608d0528b5f55c5', show: this.hasError }, h("slot", { key: '675f20bf2273b7d82d34a7e628b1dbe70e9e70f7', name: "error" })), h(GuxFormFieldHelp, { key: '56d5679c4bdc9a436fc703b4450ae2d18bb13a9d', show: !this.hasError && this.hasHelp }, h("slot", { key: '3bf29e3d11f598851a2538f6096760a068cc2627', name: "help" })))));
+            } }, h("slot", { key: '4d8338db3bdd45abc4aefeb31f5dd3aec53d8471', name: "input" }), h("gux-icon", { key: '07d9a44ba9e17cf33bf83959c61788e9af21741e', "icon-name": "custom/chevron-down-small-regular", decorative: true }))), h(GuxFormFieldError, { key: 'cccd81f08fbd22012613882dc29391dbe0cd87bb', show: this.hasError }, h("slot", { key: '6afa10449eb38f0323b6a6d0dbb15a9516eddb8e', name: "error" })), h(GuxFormFieldHelp, { key: '3ee2f5880ce92ebc8ee37e9697235a60dc37da3e', show: !this.hasError && this.hasHelp }, h("slot", { key: 'f78fa30b128f5b50a76635475131478559473a8c', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-textarea/gux-form-field-textarea.js

@@ -57,12 +57,12 @@ export class GuxFormFieldTextarea {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '3e5c4c4fbcac1d5bf9d19d95d7bc1fd70d43019e', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '113d8de398b8f7d22bcb07531103c82a3a8e7abf', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '3a310279167b2adeeed50e44481c8bbf866d1157', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: 'f2d964b6e336fe7be88e6e0ba568fc01bf0ef485', class: "gux-input-and-error-container" }, h("div", { key: '712f3f48fb15d0c1481fa1cf81723e0121c736fd', ref: el => (this.textareaContainerElement = el), class: {
+        return (h(GuxFormFieldContainer, { key: '30002bf2fd4403de6a812ee46ab0ba04420bd58a', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '5acc27c24af2cc259363a0a9e551946ffe951cf2', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '605c33a9258b0a4b713454d59903256482e23d80', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: 'da821fd3c03fd7e815fcaf10d605c3218f542cc2', class: "gux-input-and-error-container" }, h("div", { key: '9c67ad442bcf103250fe0e517c4e12368efc51c8', ref: el => (this.textareaContainerElement = el), class: {
                 'gux-input': true,
                 [`gux-resize-${this.resize}`]: true,
                 'gux-disabled': this.disabled,
                 'gux-input-error': this.hasError
-            } }, h("slot", { key: 'd9da9023de29d890a935ec1e0b0b79bf0f7d19b1', name: "input" })), h(GuxFormFieldError, { key: 'fa7bbaf903fa1eb0554a29750bbbc018806620e4', show: this.hasError }, h("slot", { key: '790a3c8ae66649ff548e9c651882c529abd3df47', name: "error" })), h(GuxFormFieldHelp, { key: '689e7ce01a75b85e0219096b36bcad0020afd167', show: !this.hasError && this.hasHelp }, h("slot", { key: '2fe135afeb4851885897b3227fd8a67d18f40f53', name: "help" })))));
+            } }, h("slot", { key: '089685c1e8e4ad74a087bce1567cfaf9ea8cb0b0', name: "input" })), h(GuxFormFieldError, { key: 'b2dab4ad4c403f313704347847af60c1e3fd48a9', show: this.hasError }, h("slot", { key: '476b6baa6fd870cc9ed37e7dc2c0e6c5507513fe', name: "error" })), h(GuxFormFieldHelp, { key: '5cfcc2330057b42e5d8fabd3bd1fc834ee07fadd', show: !this.hasError && this.hasHelp }, h("slot", { key: '9899bd978401bf2ac9bfea2b98c3c1020971c3e4', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-time-picker/gux-form-field-time-picker.js

@@ -61,13 +61,13 @@ export class GuxFormFieldTimePicker {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: 'dd411e739df07f7c1eba5bd79dd57bc65cd03caf', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { key: 'ce01d20567e7424760c81e9fe6668e33ceb12d0b', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: '6f2915ad697f455b4f08139eb9838a9e636aa3b8', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { key: '068d6aadb8a70d7b77a82f7837d5a4021eb272fe', class: "gux-input-and-error-container" }, h("div", { key: '4e45c08204dba5e52018bdeb38c39d3454e8cb75', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: 'f5154769059a9725983ef4d4d3b93002c102da02', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { key: 'd58497619db5f569c82bc9e876853271d577d7b9', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: '753d15d89d8900991815ccc55afb738ec12ba1d3', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { key: 'ba3f292271b2cdcc6802830d5c3b1c176be107e7', class: "gux-input-and-error-container" }, h("div", { key: '380d8ebe10e0f54ef5c6b64f33c36069470d5b75', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '857c8ab3f5e7cd4c6bca4f3fb51509152d416a22', class: {
+            } }, h("div", { key: '7f84fd70ca81b1813063b1b8f3c5d42fc525af57', class: {
                 'gux-time-picker-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '8d5b8a0856f1562a4d7437f6512f592b6342c228' }))), h(GuxFormFieldError, { key: '00d2bacf3b165896326edf957e8b361d33a72cc4', show: this.hasError }, h("slot", { key: '409e5e1117d520e5a3e8d00f70726545114378df', name: "error" })), h(GuxFormFieldHelp, { key: '53b4932c7332ba0cf6428e7ffa6603afc793dcfa', show: !this.hasError && this.hasHelp }, h("slot", { key: 'e16ced5c18d6df46e4ff2fb849d74657dc16b068', name: "help" })))));
+            } }, h("slot", { key: '16e96b921b2fb64bd759bb5afb2dc0532fd8ae02' }))), h(GuxFormFieldError, { key: '0a0241f374fb75ff074d9c3c9cca3ab193307d78', show: this.hasError }, h("slot", { key: '0247e4a54be9d59103c5884dde53a129b156631b', name: "error" })), h(GuxFormFieldHelp, { key: 'b4c8f4b3c20edcea1c500f118671c239d75ce894', show: !this.hasError && this.hasHelp }, h("slot", { key: '0e669a3b49fa7c7520acdd3c08a27066e90bf167', name: "help" })))));
     }
     renderScreenReaderText(text, condition = true) {
         if (condition) {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-time-zone-picker/gux-form-field-time-zone-picker.js

@@ -61,12 +61,12 @@ export class GuxFormFieldTimeZonePicker {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: 'f94434c2698f294abbdb8bb06b05c634f6bd7544', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { key: '36b28fee558e5a55565ee0046a05a8e4074445e8', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: '4b1ae9a76308987b21ee89477e28f0b9ccee5590', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { key: '57e80ad01c6c5d4c70851a53c6af5960a194ead4', class: "gux-input-and-error-container" }, h("div", { key: '9dba2395f519b52dca9af3e343665a5a4b89f4a3', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: 'd450f811957fdc581b5889f22d70a56f96dfb139', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { key: 'ac18a55b69ea7ff65a3caa377cb1aa0e5afbd641', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: '94b4dfc511929b5e3380c62c999ec44d1e7564c5', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { key: '58cf1488239a1511bf870df57109a9f3011b06a6', class: "gux-input-and-error-container" }, h("div", { key: '62fa2d885f76d417e6e5e76fa47a213ba4f482ed', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError,
                 'gux-time-zone-picker-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: 'c21a0347234434ec2496fb03c2a45cb156109351' })), h(GuxFormFieldError, { key: '93c6e7fe6a8e300145ffba7d31dbd412978cf6c2', show: this.hasError }, h("slot", { key: 'f63893abd4985dc87d923f7b7df46d0979f70dac', name: "error" })), h(GuxFormFieldHelp, { key: 'e1646724b78fc3be329b135041edec3a455a8706', show: !this.hasError && this.hasHelp }, h("slot", { key: '907afd34c8a11d6dac079c7f2c07574e8e61e790', name: "help" })))));
+            } }, h("slot", { key: '9bf1a71c5f329e6daa3981892cb3d1556841b945' })), h(GuxFormFieldError, { key: '1d59017b5a8194225e5773fb94c8cf0e76c8559d', show: this.hasError }, h("slot", { key: '0ba994d4492af9cb930e867be15104b030f2c036', name: "error" })), h(GuxFormFieldHelp, { key: '5014b949671c39767ee2d289c2f1d4f4abf59658', show: !this.hasError && this.hasHelp }, h("slot", { key: 'eb50b5dd63bd44d33bc6c4506bf3dce893a80d91', name: "help" })))));
     }
     renderScreenReaderText(text, condition = true) {
         if (condition) {

package/dist/collection/components/stable/gux-form-field/helper-components/gux-form-field-input-clear-button/gux-form-field-input-clear-button.js

@@ -8,7 +8,7 @@ export class GuxFormFieldInputClearButton {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h("button", { key: '2fec9ebe928cf7f23d8752891952bda5809a7c82', tabIndex: -1, type: "button", title: this.i18n('clear') }, h("gux-icon", { key: '9470e5bd4e5784f7cbc4ecb1d67bca57502ecb78', "icon-name": "fa/xmark-large-regular", decorative: true })));
+        return (h("button", { key: 'a084accbb1073a43f220570ee24b483acd28ba00', tabIndex: -1, type: "button", title: this.i18n('clear') }, h("gux-icon", { key: '8d0b6d02390cdefb292a12fb0f0ff6417cf0e0c5', "icon-name": "fa/xmark-large-regular", decorative: true })));
     }
     static get is() { return "gux-form-field-input-clear-button"; }
     static get encapsulation() { return "shadow"; }