genesys-spark-components 4.115.0 → 4.116.0

package/dist/cjs/gux-form-field-file-beta.cjs.entry.js

@@ -0,0 +1,234 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-2dd05ef3.js');
+const index$1 = require('./index-d7208697.js');
+const onMutation = require('./on-mutation-c0879d47.js');
+const hasSlot = require('./has-slot-3edae188.js');
+const usage = require('./usage-8174e7ca.js');
+const guxFormFieldError = require('./gux-form-field-error-c55f1055.js');
+const guxFormFieldContainer = require('./gux-form-field-container-ad5588d7.js');
+const guxFormField_service = require('./gux-form-field.service-9cc5debc.js');
+const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-132644ad.js');
+const onAttributeChange = require('./on-attribute-change-a9f44523.js');
+const simulateNativeEvent = require('./simulate-native-event-e88bf64f.js');
+require('./get-closest-element-9e41d6b9.js');
+require('./random-html-id-71c43d5a.js');
+require('./log-error-7b9d4b57.js');
+
+const uploadFile = "Upload file";
+const uploadFiles = "Upload files";
+const changeFile = "Change file";
+const changeFiles = "Change files";
+const clickToUpload = "Click to upload";
+const dragAndDropFileInstructions = "Drag and drop a file here or";
+const dragAndDropFilesInstructions = "Drag and drop files here or";
+const componentResources = {
+	uploadFile: uploadFile,
+	uploadFiles: uploadFiles,
+	changeFile: changeFile,
+	changeFiles: changeFiles,
+	clickToUpload: clickToUpload,
+	dragAndDropFileInstructions: dragAndDropFileInstructions,
+	dragAndDropFilesInstructions: dragAndDropFilesInstructions
+};
+
+const guxFormFieldFileCss = ".gux-form-field-container.gux-beside{display:flex;flex-direction:row}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-helper-gap);place-content:stretch flex-start;padding:var(--gse-ui-formControl-helper-errorPadding);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;order:0;min-inline-size:var(--gse-ui-icon-small-size);min-block-size:var(--gse-ui-icon-small-size);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-label{display:inline-flex;flex:1 0 auto}.gux-form-field-label ::slotted(gux-label-info-beta){padding-inline-start:var(--gse-ui-formControl-formField-gap)}.gux-form-field-label.gux-beside{position:relative;inset-block-start:var(--gse-ui-formControl-input-top);inline-size:fit-content;min-inline-size:var(--gse-ui-formControl-input-textfield-minWidth);max-inline-size:fit-content;margin-inline-end:var(--gse-ui-formControl-group-gapItems)}.gux-form-field-label.gux-above{padding-block-end:var(--gse-ui-formControl-formField-gap)}.gux-form-field-label.gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}.gux-form-field-help{display:none;flex-direction:row;flex-wrap:nowrap;place-content:stretch flex-start;align-items:flex-start;justify-content:flex-start;padding-block-start:var(--gse-ui-formControl-formField-gap);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-defaultColor)}.gux-form-field-help.gux-show{display:flex}.gux-form-field-help .gux-message{flex:0 1 auto;align-self:none;order:0}:host{display:block}::slotted(label){font-family:var(--gse-ui-formControl-label-textBold-fontFamily);font-size:var(--gse-ui-formControl-label-textBold-fontSize);font-weight:var(--gse-ui-formControl-label-textBold-fontWeight);line-height:var(--gse-ui-formControl-label-textBold-lineHeight);color:var(--gse-ui-formControl-label-labelColor)}.gux-input-and-error-container{flex-grow:1}.gux-drop-container{box-sizing:border-box;display:flex;flex-direction:column;flex-wrap:nowrap;gap:var(--gse-ui-fileUpload-dragDrop-btnText-gap);margin-block:var(--gse-ui-fileUpload-mainContainer-gap);margin-inline:0;font-family:var(--gse-ui-fileUpload-dragAndDrop-dropZone-text-fontFamily);font-size:var(--gse-ui-fileUpload-dragAndDrop-dropZone-text-fontSize);font-weight:var(--gse-ui-fileUpload-dragAndDrop-dropZone-text-fontWeight);line-height:var(--gse-ui-fileUpload-dragAndDrop-dropZone-text-lineHeight);color:var(--gse-ui-fileUpload-dragAndDrop-dropZoneText-color)}.gux-drop-container.gux-drop-zone{place-content:stretch center;align-items:center;min-block-size:var(--gse-ui-fileUpload-dragAndDrop-dropZone-minHeight);padding:20px;border:var(--gse-ui-fileUpload-dragAndDrop-dropZone-default-border-width) var(--gse-ui-fileUpload-dragAndDrop-dropZone-default-border-style) var(--gse-ui-fileUpload-dragAndDrop-dropZone-default-border-color);border-radius:var(--gse-ui-fileUpload-dropZone-borderRadius)}.gux-drop-container.gux-drop-zone.gux-drag-over:not(.gux-disabled){background-color:var(--gse-ui-fileUpload-dragAndDrop-dropZone-background-active);border:var(--gse-ui-fileUpload-dragAndDrop-dropZone-active-border-width) var(--gse-ui-fileUpload-dragAndDrop-dropZone-active-border-style) var(--gse-ui-fileUpload-dragAndDrop-dropZone-active-border-color)}.gux-drop-container.gux-drop-zone.gux-disabled{border-color:rgba(0, 0, 64, 0.2509803922)}.gux-drop-container.gux-drop-zone.gux-disabled .gux-drag-and-drop-text{opacity:0.5}.gux-offscreen{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}.gux-proxy-button{inline-size:fit-content;border-radius:var(--gse-ui-button-borderRadius)}.gux-proxy-button:focus-within{outline:var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);outline-offset:var(--gse-semantic-focusOutline-offset)}.gux-file-list{display:flex;flex-direction:column;gap:var(--gse-ui-fileUpload-fileCard-cardGroup-gap);inline-size:100%}";
+const GuxFormFieldFileBetaStyle0 = guxFormFieldFileCss;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const GuxFormFieldFileBeta = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.indicatorMark = 'required';
+        this.dragAndDrop = false;
+        this.disabled = false;
+        this.hasError = false;
+        this.hasHelp = false;
+        this.required = false;
+    }
+    onMutation() {
+        this.labelInfo = this.root.querySelector('[slot=label-info]');
+        this.hasError = hasSlot.hasSlot(this.root, 'error');
+        this.hasHelp = hasSlot.hasSlot(this.root, 'help');
+    }
+    handleKeyup(event) {
+        var _a, _b;
+        switch (event.key) {
+            case 'Tab': {
+                if (this.input.matches(':focus-visible')) {
+                    void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.showTooltip());
+                    this.hideLabelInfoTimeout = setTimeout(() => {
+                        var _a;
+                        void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
+                    }, 6000);
+                }
+                break;
+            }
+            default: {
+                if (this.input.matches(':focus-visible')) {
+                    void ((_b = this.labelInfo) === null || _b === void 0 ? void 0 : _b.hideTooltip());
+                    clearTimeout(this.hideLabelInfoTimeout);
+                }
+                break;
+            }
+        }
+    }
+    onFocusout() {
+        var _a;
+        void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
+        clearTimeout(this.hideLabelInfoTimeout);
+    }
+    onGuxRemoveFile(event) {
+        this.removeFile(event.detail);
+    }
+    async componentWillLoad() {
+        this.getI18nValue = await index$1.buildI18nForComponent(this.root, componentResources);
+        this.setInput();
+        this.hasError = hasSlot.hasSlot(this.root, 'error');
+        this.hasHelp = hasSlot.hasSlot(this.root, 'help');
+        this.labelInfo = this.root.querySelector('[slot=label-info]');
+        usage.trackComponent(this.root);
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        (_a = this.disabledObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.requiredObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        (_c = this.multipleObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
+    }
+    render() {
+        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '00c36efa4405c0b5a91f862cb01ec2b8a71046ec', labelPosition: "above" }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '70256247ed84be23f88ae9bb38c49269b171ccf8', position: "above", required: this.required }, index.h("slot", { key: 'd533077057b2e9ba5a7d93db92227b370ca01958', name: "label" }), index.h("gux-form-field-label-indicator", { key: 'e97db53e8a57d4788e362145ead6edf1d06c6856', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '3404533998a709fe4de78b3d4acaf769892ae6a0', name: "label-info" })), index.h("div", { key: 'a76911d55098f00f1d3ad972aab42d9a4670328f', class: "gux-input-and-error-container" }, index.h(guxFormFieldError.GuxFormFieldHelp, { key: '97d13f4d962563a6128a18f06d70b5adc830d0ee', show: this.hasHelp }, index.h("slot", { key: '15db9f5259d63b803cf34cb8d82974e79f2c7328', name: "help" })), this.renderInputSlot(), this.renderFileList(), index.h(guxFormFieldError.GuxFormFieldError, { key: '7160af25b00b911a46598cc694c27abf9cddef9f', show: this.hasError }, index.h("slot", { key: '9cad5228cefbff40f83f7a3657927421d64900ee', name: "error" })))));
+    }
+    setInput() {
+        this.input = guxFormField_service.getSlottedInput(this.root, 'input[type="file"][slot="input"]');
+        this.input.addEventListener('input', () => {
+            index.forceUpdate(this.root);
+        });
+        preventBrowserValidationStyling.preventBrowserValidationStyling(this.input);
+        this.disabled = this.input.disabled;
+        this.required = this.input.required;
+        this.disabledObserver = onAttributeChange.onDisabledChange(this.input, (disabled) => {
+            this.disabled = disabled;
+        });
+        this.requiredObserver = onAttributeChange.onRequiredChange(this.input, (required) => {
+            this.required = required;
+        });
+        this.multipleObserver = onAttributeChange.onMultipleChange(this.input, () => {
+            index.forceUpdate(this.root);
+        });
+        guxFormField_service.validateFormIds(this.root, this.input);
+    }
+    getDropZoneText() {
+        if (this.input.multiple) {
+            return this.getI18nValue('dragAndDropFilesInstructions');
+        }
+        else {
+            return this.getI18nValue('dragAndDropFileInstructions');
+        }
+    }
+    getProxyButtonText() {
+        if (this.dragAndDrop) {
+            return this.getI18nValue('clickToUpload');
+        }
+        else if (this.input.multiple) {
+            if (this.input.files.length > 0) {
+                return this.getI18nValue('changeFiles');
+            }
+            return this.getI18nValue('uploadFiles');
+        }
+        else {
+            if (this.input.files.length > 0) {
+                return this.getI18nValue('changeFile');
+            }
+            return this.getI18nValue('uploadFile');
+        }
+    }
+    removeFile(index) {
+        const fileList = this.input.files;
+        const dt = new DataTransfer();
+        for (let i = 0; i < fileList.length; i++) {
+            if (index !== i) {
+                dt.items.add(fileList[i]);
+            }
+        }
+        this.modifyInputFiles(dt.files);
+    }
+    modifyInputFiles(files) {
+        this.input.files = files;
+        simulateNativeEvent.simulateNativeEvent(this.root, 'input');
+        simulateNativeEvent.simulateNativeEvent(this.root, 'change');
+        index.forceUpdate(this.root);
+    }
+    onProxyFileButtonClick(event) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        this.input.focus();
+        this.input.click();
+    }
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.disabled) {
+            return;
+        }
+        const currentFileList = this.input.files;
+        const newFileList = event.dataTransfer.items;
+        const dt = new DataTransfer();
+        for (let i = 0; i < currentFileList.length; i++) {
+            dt.items.add(currentFileList[i]);
+        }
+        for (let i = 0; i < newFileList.length; i++) {
+            const item = newFileList[i];
+            if (item.kind === 'file' && item.webkitGetAsEntry().isFile) {
+                dt.items.add(item.getAsFile());
+            }
+        }
+        this.dropContainer.classList.remove('gux-drag-over');
+        this.modifyInputFiles(dt.files);
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.disabled) {
+            this.dropContainer.classList.add('gux-drag-over');
+        }
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dropContainer.classList.remove('gux-drag-over');
+    }
+    renderFileList() {
+        const files = Array.from(this.input.files || new DataTransfer().files);
+        if (files.length === 0) {
+            return null;
+        }
+        return (index.h("div", { class: "gux-file-list" }, files.map((file, index$1) => {
+            return (index.h("slot", { name: `file-${index$1}` }, index.h("gux-file-list-item", { name: file.name, index: index$1, disabled: this.disabled })));
+        })));
+    }
+    renderInputSlot() {
+        return (index.h("div", { ref: el => (this.dropContainer = el), class: {
+                'gux-drop-container': true,
+                'gux-drop-zone': this.dragAndDrop,
+                'gux-disabled': this.disabled
+            }, onDrop: event => this.onDrop(event), onDragOver: event => this.onDragOver(event), onDragEnter: event => this.onDragOver(event), onDragLeave: event => this.onDragLeave(event) }, this.dragAndDrop && (index.h("div", { class: "gux-drag-and-drop-text" }, this.getDropZoneText())), index.h("div", { class: "gux-proxy-button" }, index.h("gux-button-slot", { accent: "tertiary" }, index.h("button", { tabIndex: -1, type: "button", disabled: this.disabled, onClick: e => this.onProxyFileButtonClick(e) }, index.h("div", null, this.getProxyButtonText()))), index.h("div", { class: "gux-offscreen" }, index.h("slot", { name: "input", onSlotchange: () => this.setInput() })))));
+    }
+    get root() { return index.getElement(this); }
+};
+__decorate([
+    onMutation.OnMutation({ childList: true, subtree: true })
+], GuxFormFieldFileBeta.prototype, "onMutation", null);
+GuxFormFieldFileBeta.style = GuxFormFieldFileBetaStyle0;
+
+exports.gux_form_field_file_beta = GuxFormFieldFileBeta;

package/dist/cjs/gux-form-field-file.cjs.entry.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-2dd05ef3.js');
 const onMutation = require('./on-mutation-c0879d47.js');
 const hasSlot = require('./has-slot-3edae188.js');
-const usage = require('./usage-edbca2c4.js');
+const usage = require('./usage-8174e7ca.js');
 const guxFormFieldError = require('./gux-form-field-error-c55f1055.js');
 const guxFormFieldContainer = require('./gux-form-field-container-ad5588d7.js');
 const guxFormField_service = require('./gux-form-field.service-9cc5debc.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-132644ad.js');
-const onAttributeChange = require('./on-attribute-change-321d434b.js');
+const onAttributeChange = require('./on-attribute-change-a9f44523.js');
 require('./random-html-id-71c43d5a.js');
 require('./log-error-7b9d4b57.js');
 require('./simulate-native-event-e88bf64f.js');

package/dist/cjs/gux-form-field-input-clear-button.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2dd05ef3.js');
-const usage = require('./usage-edbca2c4.js');
+const usage = require('./usage-8174e7ca.js');
 const index$1 = require('./index-d7208697.js');
 require('./get-closest-element-9e41d6b9.js');
 
@@ -24,7 +24,7 @@ const GuxFormFieldInputClearButton = class {
         this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (index.h("button", { key: '7b3bf8233b3811ff21eb4be651d224e077c37ba7', tabIndex: -1, type: "button", title: this.i18n('clear') }, index.h("gux-icon", { key: '80b20642d65c087f39d5efd9a41a3eab2cb54c5a', "icon-name": "fa/xmark-large-regular", decorative: true })));
+        return (index.h("button", { key: '6e86e3de8c890587307feea9fb87fcf126e61b2c', tabIndex: -1, type: "button", title: this.i18n('clear') }, index.h("gux-icon", { key: 'd46f7ad0760b695fb26cce1d1db27f0c7674c58c', "icon-name": "fa/xmark-large-regular", decorative: true })));
     }
     static get delegatesFocus() { return true; }
     get root() { return index.getElement(this); }

package/dist/cjs/gux-form-field-label-indicator.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2dd05ef3.js');
-const usage = require('./usage-edbca2c4.js');
+const usage = require('./usage-8174e7ca.js');
 const index$1 = require('./index-d7208697.js');
 require('./get-closest-element-9e41d6b9.js');
 

package/dist/cjs/gux-form-field-number_2.cjs.entry.js

@@ -6,14 +6,14 @@ const index = require('./index-2dd05ef3.js');
 const index$1 = require('./index-d7208697.js');
 const onInputDisabledStateChange = require('./on-input-disabled-state-change-660a5191.js');
 const onMutation = require('./on-mutation-c0879d47.js');
-const onAttributeChange = require('./on-attribute-change-321d434b.js');
+const onAttributeChange = require('./on-attribute-change-a9f44523.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-132644ad.js');
 const guxFormField_service = require('./gux-form-field.service-9cc5debc.js');
 const simulateNativeEvent = require('./simulate-native-event-e88bf64f.js');
 const hasSlot = require('./has-slot-3edae188.js');
 const guxFormFieldError = require('./gux-form-field-error-c55f1055.js');
 const guxFormFieldContainer = require('./gux-form-field-container-ad5588d7.js');
-const usage = require('./usage-edbca2c4.js');
+const usage = require('./usage-8174e7ca.js');
 const focusInputElement = require('./focus-input-element-3a0c1858.js');
 const en = require('./en-66d2b744.js');
 const onClickOutside = require('./on-click-outside-bb55ad5e.js');
@@ -113,14 +113,14 @@ const GuxFormFieldNumber = class {
     }
     render() {
         const showClearButton = this.clearable && this.hasContent && !this.disabled;
-        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '9fe2d60e7ae731e094c68998d51a5a2099a80cd5', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '3ceafc7cacdb3d46ca1f4b2d0446677cc8c7e46e', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: 'fcad7e7a18ab32c48cdf39fe63fe11d0669ebd66', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '6db058d0c69764d20cc4203a6335213349dc0a0a', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: 'd7aebaabd6b3deb33683abe8b7ca8b59dd066273', name: "label-info" })), index.h("div", { key: '3aecafbafe1f545e4de2caa9027b1923fc303900', class: "gux-input-and-error-container" }, index.h("div", { key: '68d6777d215ca7be80462a655912065c9436e888', class: {
+        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: 'ac43d3e00fd5df500e494d87e7324698acd4e0d3', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '97ba50cd5cea0ea57ed638b4abbf0b6edf9d193f', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: '584c04853deedafd0cdd8621defeca51fef4cc5d', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: 'b4e9f91216e8a327a0e25f9dc8ae65a1f3e3e02a', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: 'b011385f1fbaf8f825fab9a67f477ce20a42392a', name: "label-info" })), index.h("div", { key: '6ae1d9c9007f0cb6058aed17887e4d42260b7e65', class: "gux-input-and-error-container" }, index.h("div", { key: '5d41e8f121ac8272a0475d11e0d8b97a3b5fcdd3', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            }, part: "input-section" }, index.h("div", { key: 'e5a8bb31f04c76d5513dae6180719a26ce9b029c', class: {
+            }, part: "input-section" }, index.h("div", { key: '44320059d441eca83c239358cfe0a87f1fa413e9', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled,
                 'gux-clear': showClearButton
-            }, onClick: () => focusInputElement.focusInputElement(this.input) }, index.h("slot", { key: '7bd49d7eb743604cccf1a1f67d46ca2aa5ff37d8', name: "input", onSlotchange: () => this.setInput() }), showClearButton && (index.h("gux-form-field-input-clear-button", { key: 'c0c085810b2b48ab3998e4bf6cf6899645e758bc', onClick: () => guxFormField_service.clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), index.h(guxFormFieldError.GuxFormFieldError, { key: 'd8d284916a98589e15c2fba272ade4fa85997c5d', show: this.hasError }, index.h("slot", { key: '1fb61143cc901e56c8d9fbad4acf11e3425e5af4', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '832dd5c8568a4e84dd1505d1d6517648769b58ed', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '36cf83fa87f92081c9e1db7bf8f0aaea43a0d81b', name: "help" })))));
+            }, onClick: () => focusInputElement.focusInputElement(this.input) }, index.h("slot", { key: 'bfc922e0c92a8827fa06e1f58a17a69c94a5a20b', name: "input", onSlotchange: () => this.setInput() }), showClearButton && (index.h("gux-form-field-input-clear-button", { key: '7e124f97a6e4f71882cb7ecf2696d6fa78ea9793', onClick: () => guxFormField_service.clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), index.h(guxFormFieldError.GuxFormFieldError, { key: '983f0c0a61491972c37a1bdf96852da45374296a', show: this.hasError }, index.h("slot", { key: '681c52116a4f3f38a122528f55026889decec2c2', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '8c85f169d647fe851ad214cf7bd6c5d516f45798', show: !this.hasError && this.hasHelp }, index.h("slot", { key: 'b8ad7cfa8e5ddd3655118905fc4877dbd5bd88db', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition
@@ -281,10 +281,10 @@ const GuxPaginationEllipsisButton = class {
     }
     render() {
         return [
-            index.h("gux-button", { key: '064531b62fc4848ff0928d1357e396190fbf0d73', accent: "ghost", id: "popover-target", type: "button", disabled: this.disabled, ref: el => (this.ellipsisButton = el), onClick: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, index.h("gux-icon", { key: '297f137d486c1623dbf3bed48963cb832d35d513', screenreaderText: this.i18n('goToPage'), "icon-name": "fa/ellipsis-regular" })),
-            index.h("gux-tooltip", { key: '8a3af1f9980e3b0380361ea79bd645b4b83ba76c', for: "popover-target" }, index.h("div", { key: '9f63300284de2c39e5edda85d02f84cce6a86531', slot: "content" }, this.i18n('goToPage'))),
-            index.h("gux-popover", { key: '81e459874a49f8f8860232d2418950c21a598302', "is-open": this.isOpen, for: "popover-target" }, index.h("span", { key: 'fcc15272ac3857c29ea1489ac74c90acbf3e2b7e', slot: "title" }, this.i18n('goToPage')), index.h("gux-form-field-number", { key: '7d34e06d57e87c1b0e9dd8411fa73ef1dc94f5f4' }, index.h("input", { key: '77f7d260d720848fa9df55917c329f881f58daf5', slot: "input", type: "number", ref: el => (this.inputElement = el), min: "1", max: this.totalPages, value: "1", onKeyDown: evt => ['e', 'E', '+', '-', '.'].includes(evt.key) &&
-                    evt.preventDefault() }), index.h("label", { key: '94a27ac8c6210d06227cd02f2cbec35df2a32831', slot: "label" })))
+            index.h("gux-button", { key: '7765d2c90e47d168ba2f2492370bef18e1b224bc', accent: "ghost", id: "popover-target", type: "button", disabled: this.disabled, ref: el => (this.ellipsisButton = el), onClick: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, index.h("gux-icon", { key: '440dba63e9b2f979e05eb2729b5f33c25222c0bf', screenreaderText: this.i18n('goToPage'), "icon-name": "fa/ellipsis-regular" })),
+            index.h("gux-tooltip", { key: 'f6ac963dd5cd96f312712e56bb38660f5ddc722d', for: "popover-target" }, index.h("div", { key: '47749ce9824722e918a637e35d8db9cc57fb312d', slot: "content" }, this.i18n('goToPage'))),
+            index.h("gux-popover", { key: '374abe1f13942da30b986fbcaf2061e487451dc6', "is-open": this.isOpen, for: "popover-target" }, index.h("span", { key: '2029e8e45a2504954c688e1cdfb21d450f196e55', slot: "title" }, this.i18n('goToPage')), index.h("gux-form-field-number", { key: '5ea400bc7fd9068f2f295c27fb5c610fc9608f77' }, index.h("input", { key: '8aeca3c756bff9228548e431eb177947067509fb', slot: "input", type: "number", ref: el => (this.inputElement = el), min: "1", max: this.totalPages, value: "1", onKeyDown: evt => ['e', 'E', '+', '-', '.'].includes(evt.key) &&
+                    evt.preventDefault() }), index.h("label", { key: '9413e3e0f566b9193700aa1ceec1ad969441c830', slot: "label" })))
         ];
     }
     get root() { return index.getElement(this); }

package/dist/cjs/gux-form-field-phone.cjs.entry.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-2dd05ef3.js');
 const index$1 = require('./index-d7208697.js');
 const onMutation = require('./on-mutation-c0879d47.js');
-const onAttributeChange = require('./on-attribute-change-321d434b.js');
-const usage = require('./usage-edbca2c4.js');
+const onAttributeChange = require('./on-attribute-change-a9f44523.js');
+const usage = require('./usage-8174e7ca.js');
 const guxFormFieldError = require('./gux-form-field-error-c55f1055.js');
 const guxFormFieldFieldsetContainer = require('./gux-form-field-fieldset-container-48d63d04.js');
 const hasSlot = require('./has-slot-3edae188.js');
@@ -102,14 +102,14 @@ const GuxFormFieldPhone = class {
     }
     render() {
         var _a;
-        return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { key: '4033587ecc7f9d14a95c6388b5240fc000b35362', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldScreenreaderLabel, { key: '0dbe6f44f64c58b277c504978926a0c189ec69b6' }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), index.h(guxFormFieldFieldsetContainer.GuxFormFieldVisualLabel, { key: '4212361a7da48e80fb6644e91227475548ceb16d', position: this.computedLabelPosition, required: this.required }, index.h("slot", { key: '4a39db24b9c62b9b287f8f20246eef3e37b79910', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: 'eef893fe39ecb9d43cc47c1dc20b20b698ccc65c', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '8318a51d01a4cf48b01652d0604b2f006072025a', name: "label-info" })), index.h("div", { key: 'a34e3bf2a60b418cbacafd3fc921eb57917b8eeb', class: "gux-input-and-error-container" }, index.h("div", { key: '3c5730f1d80484789345645fd4b216c4502d110b', class: {
+        return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { key: 'c93531f34fd250f1eb87a3648985015bb8c47c28', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldScreenreaderLabel, { key: 'a91c9df2dc59a24499b5a180251f9dfbb4967a09' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), index.h(guxFormFieldFieldsetContainer.GuxFormFieldVisualLabel, { key: '35480b4f84ecb8f1d75c728280e2aa4954678d20', position: this.computedLabelPosition, required: this.required }, index.h("slot", { key: '88e910a85326f24d17a9d3238ed152de4f07794d', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '633fa98eeb2b3be9d31316ff0a8583e67a2f9b27', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '97505c8a83c10c7a235b6b847ff2a6d71a401be2', name: "label-info" })), index.h("div", { key: '4dda89cb69f96b795f394f6507e0f9df9a169d6a', class: "gux-input-and-error-container" }, index.h("div", { key: 'f20777a0d251c8c18686ea3d8a7be3c0fa514d43', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, index.h("div", { key: '0946b1e552926c2abe69b26f5c8d7c93f80829a7', class: {
+            } }, index.h("div", { key: 'e70478460b99c1810436761d1a7ee9b83fe158db', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, index.h("slot", { key: '1651c44bda8d5983564143412363207a47d45465' }))), index.h(guxFormFieldError.GuxFormFieldError, { key: '45bcb523d3ce076f9c2b92f876812aa08e2ed063', show: this.hasError }, index.h("slot", { key: '75f98de65f93eb22d561c3a6186a6db0f18c16d0', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '828b128b8457969838561683d2fc98de260105ff', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '555d9a314841611b848c3e6fa89f811587871de0', name: "help" })))));
+            } }, index.h("slot", { key: '7a663e8dcf1eefdd1568e0e81baff975360c50c0' }))), index.h(guxFormFieldError.GuxFormFieldError, { key: 'bf3c57ac3b1fcfe7ba368b3a3ff81ef125a62a24', show: this.hasError }, index.h("slot", { key: 'a0678cc8d2900f3c46ae748009f6c4950cbf73db', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '309a6b11b3e6cd88711a561d17d6788699426ffc', show: !this.hasError && this.hasHelp }, index.h("slot", { key: 'bc3114fdf65b8d052004896c30f816973dc2af2d', name: "help" })))));
     }
     renderText(text, condition = false) {
         if (condition) {

package/dist/cjs/gux-form-field-radio-group-beta.cjs.entry.js

@@ -9,7 +9,7 @@ const index$1 = require('./index-d7208697.js');
 const guxFormFieldError = require('./gux-form-field-error-c55f1055.js');
 const guxFormFieldFieldsetContainer = require('./gux-form-field-fieldset-container-48d63d04.js');
 const getSlotTextContent = require('./get-slot-text-content-83cb3c6d.js');
-const usage = require('./usage-edbca2c4.js');
+const usage = require('./usage-8174e7ca.js');
 require('./get-closest-element-9e41d6b9.js');
 
 const required = "Required";
@@ -113,8 +113,8 @@ const GuxFormFieldRadioGroupBeta = class {
     }
     render() {
         var _a;
-        return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { key: 'dbfd1fbf7433197bd3fa3c0916c83179cd7f6126', labelPosition: "above", disabled: this.disabled }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldScreenreaderLabel, { key: '1ac4adb29e5864803e3091d87ba2d87f3e490490' }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'group-label-info'), this.hasGroupLabelInfo)), index.h(guxFormFieldFieldsetContainer.GuxFormFieldVisualLabel, { key: '68b80b835359d30d034ad53bb20a7134a45c0231', position: "above", required: this.required }, index.h("slot", { key: 'e1bd8a17e79cc7d1a5c89b6acd439b736526c980', name: "group-label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '0d4da7437e97244c1fd1bb64cf983e76838b5736', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: 'f0982ea5528442ff241ba7c670d476e976704826', name: "group-label-info" })), index.h("slot", { key: 'c819d8ef5b4c3ea70c85f8c044e2d06bbe5dbd73' }), index.h(guxFormFieldError.GuxFormFieldError, { key: '70d2b7e13b963713f9419482790bc2d6c796c6db', show: this.hasGroupError }, index.h("slot", { key: '7bc7db9d77b25c051f699b65e227246d76c9b034', name: "group-error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '95edee33353f037864f08980dd6ca0cf650a4f6f', show: !this.hasGroupError && this.hasGroupHelp }, index.h("slot", { key: '2128cd99862d7b9ca1b98830e549fbf70a9fec1f', name: "group-help" }))));
+        return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { key: 'c7d14a27a6f4c2695e9c04de9403db6899b727f2', labelPosition: "above", disabled: this.disabled }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldScreenreaderLabel, { key: '3fced6220650dce263ff4c6225e8f858e3ade718' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'group-label-info'), this.hasGroupLabelInfo)), index.h(guxFormFieldFieldsetContainer.GuxFormFieldVisualLabel, { key: '5b7fc368bf6b1f793816e7f2c2b0ccb6ec0a70c4', position: "above", required: this.required }, index.h("slot", { key: '2b0cba5e51e8ae3c34313c587b03d22223d801b6', name: "group-label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '5bb4b22f9dc73924b01b70a636e1337945ff3090', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: 'de06c0f5e0e94d84726cfb7acb1bff3e095d7b2b', name: "group-label-info" })), index.h("slot", { key: 'cb0850aab6e295d74abb35cfaa3f31b09e104de0' }), index.h(guxFormFieldError.GuxFormFieldError, { key: 'f22cb70df0e5b738278176f79f70384d09c3d6bf', show: this.hasGroupError }, index.h("slot", { key: '4116b53dcbd33c54e8e272a5dee2f1ebea89f5d2', name: "group-error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '97b2cf259a1c983819dc124bf3bc876a9ab271e8', show: !this.hasGroupError && this.hasGroupHelp }, index.h("slot", { key: '398190b7d563d24b5db92c21f97f2c3aafb0666c', name: "group-help" }))));
     }
     setLabel() {
         this.label = this.root.querySelector('label[slot="group-label"]');

package/dist/cjs/gux-form-field-radio.cjs.entry.js

@@ -9,7 +9,7 @@ const preventBrowserValidationStyling = require('./prevent-browser-validation-st
 const hasSlot = require('./has-slot-3edae188.js');
 const guxFormFieldError = require('./gux-form-field-error-c55f1055.js');
 const guxFormField_service = require('./gux-form-field.service-9cc5debc.js');
-const usage = require('./usage-edbca2c4.js');
+const usage = require('./usage-8174e7ca.js');
 require('./random-html-id-71c43d5a.js');
 require('./log-error-7b9d4b57.js');
 require('./simulate-native-event-e88bf64f.js');
@@ -52,10 +52,10 @@ const GuxFormFieldRadio = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '560cbdecf43e08dadab6931c24ccbfc911d54d3e', class: {
+        return (index.h(index.Host, { key: '6666752113d7cc54d93ecc03e39f4ae79c4b4c3e', class: {
                 'gux-input-error': this.hasError || this.hasGroupError,
                 'gux-disabled': this.disabled
-            } }, index.h("div", { key: 'aad62148a263916930f601bbe743d389d44d0317', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("div", { key: 'e6c669679198fb93b26d971df6f7951f592b7ee1', class: "gux-input-label" }, index.h("div", { key: '86146038e32e4b835a231bf46d8c6f8f5a623b87', class: "gux-input" }, index.h("slot", { key: 'ff0f31a8c14331d32e52d64c55d8ff78ce973dcd', name: "input", onSlotchange: () => this.setInput() })), index.h("div", { key: 'd36e8bd01ff2eeb30e2978ed297d301daa347869', class: "gux-label" }, index.h("slot", { key: '893da0327de98f89e133b23fcf2c7f6c9f1da830', name: "label" }))), index.h("div", { key: '8acc4f27e6a035ef674b5fe4f5642218a5b97674', class: "error-and-help-text" }, index.h(guxFormFieldError.GuxFormFieldError, { key: '90b93cf7c6f6249cfff5317cccc9a363ec19debb', show: this.hasError }, index.h("slot", { key: '81e6e7aec500c69489331f64ebef22e21f2b99f8', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: 'b0dc0a5a71b40cacb0987c382c4a7854323cbfb8', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '1d7772ca5ac735bf5af51d3e983a03fd1b50d664', name: "help" }))))));
+            } }, index.h("div", { key: '37d807601e261fb975067c3a34ff7cd5d4d35960', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("div", { key: '963f0c694f739cc0471150d520b5bb3bc589ca60', class: "gux-input-label" }, index.h("div", { key: '9f169688ec401f48256058cdca76fc7d57cd4e81', class: "gux-input" }, index.h("slot", { key: '648e1c0ad77e044a705893b1f8bd5e01cf15f3f9', name: "input", onSlotchange: () => this.setInput() })), index.h("div", { key: 'ef20edaffa3add8f3346742b1a1c67407260c243', class: "gux-label" }, index.h("slot", { key: '5d872e8a456876ccd3a7146f423528791e59befc', name: "label" }))), index.h("div", { key: '6d9b6bcc13aabeea73c2569e5c75cded2187ac20', class: "error-and-help-text" }, index.h(guxFormFieldError.GuxFormFieldError, { key: 'b4d6736b16687aa8c6c068faec518966a86f6f4d', show: this.hasError }, index.h("slot", { key: '7fb8a2e55e86292f0a484511942bf2eb6a0359a3', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '2ef7e15ee387b4955a43238cb272d374c3717e82', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '727179c2ccdadbae131825b613c42140a8783a56', name: "help" }))))));
     }
     setInput() {
         this.input = guxFormField_service.getSlottedInput(this.root, 'input[type="radio"][slot="input"]');

package/dist/cjs/gux-form-field-range.cjs.entry.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-2dd05ef3.js');
 const onInputDisabledStateChange = require('./on-input-disabled-state-change-660a5191.js');
 const onMutation = require('./on-mutation-c0879d47.js');
-const onAttributeChange = require('./on-attribute-change-321d434b.js');
+const onAttributeChange = require('./on-attribute-change-a9f44523.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-132644ad.js');
 const hasSlot = require('./has-slot-3edae188.js');
 const guxFormFieldError = require('./gux-form-field-error-c55f1055.js');
 const guxFormFieldContainer = require('./gux-form-field-container-ad5588d7.js');
 const guxFormField_service = require('./gux-form-field.service-9cc5debc.js');
-const usage = require('./usage-edbca2c4.js');
+const usage = require('./usage-8174e7ca.js');
 const onResize = require('./on-resize-62f7838d.js');
 require('./random-html-id-71c43d5a.js');
 require('./log-error-7b9d4b57.js');
@@ -119,9 +119,9 @@ const GuxFormField = class {
         clearInterval(this.valueWatcherId);
     }
     render() {
-        return (index.h(index.Host, { key: 'efdec5b05dc939ae35c8be76a32e1a007d7308ea', class: {
+        return (index.h(index.Host, { key: 'c99e1a14767177104ac7f733f5f6ca6d150e0eff', class: {
                 'gux-active': this.active
-            } }, index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '04666e490c17816bea66d37f8e3477f8f6442840', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: 'be72f865c14fa0ad765087c38749916aaf8caa6b', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: '6fe99fc9e1cad0bc1eb458b0ea2b7fd30214c743', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '5be7bc89b2619867b7d2de8765256e4381eb08ae', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: 'fb8c186f81cbe84ff54136f5700fbef1bedac972', name: "label-info" })), index.h("div", { key: 'eed009174352e28030bfaca0dc5fc9a588206011', class: "gux-input-and-error-container" }, this.renderRangeInput(), index.h(guxFormFieldError.GuxFormFieldError, { key: '3bf2a9583bb6e7004a49f8185c843043e9fa7b37', show: this.hasError }, index.h("slot", { key: '5a3cbbe0b35b318a7ac62bb2dbd6ba79e5d5136d', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: 'ca0cf1aeb0ed8c508fd4298c62e92221998e7ca7', show: !this.hasError && this.hasHelp }, index.h("slot", { key: 'cd787b966f3662e8af1a4e3b7cdcc6c0e9bfc4ec', name: "help" }))))));
+            } }, index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '870297b7670bf5ba072454ae1eaf83521410c508', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: 'f9681cf3541f38478509061b65095db9c2bd7d18', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: 'b7996687ffcf1f9c94563f6312742f46b72577d6', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: 'ad6a38c825b8d809b2af5555e4475cabf16af971', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: 'cdd67828c38e5d584a59f0e708763644e830bba2', name: "label-info" })), index.h("div", { key: 'c5d63608d0a64fede86505309d48dddc02dd1a72', class: "gux-input-and-error-container" }, this.renderRangeInput(), index.h(guxFormFieldError.GuxFormFieldError, { key: '551d86777213d48f1a57353ba7f9cae7493a5321', show: this.hasError }, index.h("slot", { key: 'fb87d31e460c0a70a9c8538ae4550d4ad57f30ec', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: 'fa41ac1ca1b8deb473191b7feaeab75dfeefea14', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '594f71fa1ac41b1d4e0a9892decd54535c827f94', name: "help" }))))));
     }
     get variant() {
         return this.labelPosition ? this.labelPosition.toLowerCase() : 'none';

package/dist/cjs/gux-form-field-search.cjs.entry.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-2dd05ef3.js');
 const onInputDisabledStateChange = require('./on-input-disabled-state-change-660a5191.js');
 const onMutation = require('./on-mutation-c0879d47.js');
-const onAttributeChange = require('./on-attribute-change-321d434b.js');
+const onAttributeChange = require('./on-attribute-change-a9f44523.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-132644ad.js');
 const hasSlot = require('./has-slot-3edae188.js');
 const guxFormFieldError = require('./gux-form-field-error-c55f1055.js');
 const guxFormFieldContainer = require('./gux-form-field-container-ad5588d7.js');
 const guxFormField_service = require('./gux-form-field.service-9cc5debc.js');
-const usage = require('./usage-edbca2c4.js');
+const usage = require('./usage-8174e7ca.js');
 const focusInputElement = require('./focus-input-element-3a0c1858.js');
 require('./random-html-id-71c43d5a.js');
 require('./log-error-7b9d4b57.js');
@@ -99,13 +99,13 @@ const GuxFormFieldSearch = class {
         }
     }
     render() {
-        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: 'fae9d2bde3b9f15520d7cf963352a9cb315ddacc', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: 'c2dfab5ed0dc314a7dd6aa866747375ceae599df', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: 'ce66cd8e59f0e21d9d55319a468effac53af1af3', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '7c6fbdcfc0c2144ce4c93b2f1dc3730f45f00ef5', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '3d382bee6d91e00f76dea6053012b0ea890871f6', name: "label-info" })), index.h("div", { key: '2710be721228743cbc5864865dd4a7307ba86cf6', class: "gux-input-and-error-container" }, index.h("div", { key: '9d895f5095c690d9042dae6a0c6506575e59c082', class: {
+        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: 'a2336e7651a6f5ff3820c3e2563a7c90c3874c08', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '6e097e2824de2fddc0a82bdf8e80cbb3657dcd14', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: '242a597a2fea8220c73d8b75c0587d25301d5f75', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '6fa3c4a77948a92e97ce7c67cf4cc48ac6f1939b', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '110f0db57d97eb5eb3a34a2ad9801a6afafb650c', name: "label-info" })), index.h("div", { key: '3fe4dafec0206dca0a83202086751e5269309b7a', class: "gux-input-and-error-container" }, index.h("div", { key: '786847c177cbe89d548008faf92cd6c506a443da', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, index.h("div", { key: '4a340e271b02549be901f60b9cfa85c044a5d1d9', class: {
+            } }, index.h("div", { key: '3eb4d02673dc99dbb421ae0c362e15cdc1f67972', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            }, onClick: () => focusInputElement.focusInputElement(this.input) }, index.h("gux-icon", { key: '4a2f32b34255decaf73aaf32ecb5d5520ad935b2', "icon-name": "fa/magnifying-glass-regular", decorative: true }), index.h("slot", { key: 'b3e0aad95f7af9617fff5718e9a17e3c666d57ed', name: "input" }), this.clearable && this.hasContent && !this.disabled && (index.h("gux-form-field-input-clear-button", { key: 'be4c68fa3184f04bdb3e7f1b5c6dda9ea9e6921f', onClick: () => guxFormField_service.clearInput(this.input) })))), index.h(guxFormFieldError.GuxFormFieldError, { key: 'a18b0950fe0a6814da3e4f25e5b5ae9841bf0e94', show: this.hasError }, index.h("slot", { key: '90359f820a41b241e16a596e8c37273ecfd61781', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: 'f9a40baa4a08a153e5dda5b542712822956698f4', show: !this.hasError && this.hasHelp }, index.h("slot", { key: 'a135a1a2e80cad4e8c287a357a5290f735a33e4d', name: "help" })))));
+            }, onClick: () => focusInputElement.focusInputElement(this.input) }, index.h("gux-icon", { key: '3ba253edcb34ab1f074302cad02676e1ae0791df', "icon-name": "fa/magnifying-glass-regular", decorative: true }), index.h("slot", { key: '070b82abdc3bd54a946a99e62ad03beac74a097a', name: "input" }), this.clearable && this.hasContent && !this.disabled && (index.h("gux-form-field-input-clear-button", { key: '6a0d7bf586fd25c55a2de4c043b1625126306af8', onClick: () => guxFormField_service.clearInput(this.input) })))), index.h(guxFormFieldError.GuxFormFieldError, { key: '4466425ff65f008288e9d3fba5a9e208a2a1c6a1', show: this.hasError }, index.h("slot", { key: '3b5e6dd26e7024f7a4154eb5aefb1dc51d396cc4', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '4b062ea601c2d5fc9b0bf234870f520264ced92e', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '11cf3ac8d19f9609d968b555bd468f138d1da4a3', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

package/dist/cjs/gux-form-field-select.cjs.entry.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-2dd05ef3.js');
 const onInputDisabledStateChange = require('./on-input-disabled-state-change-660a5191.js');
 const onMutation = require('./on-mutation-c0879d47.js');
-const onAttributeChange = require('./on-attribute-change-321d434b.js');
+const onAttributeChange = require('./on-attribute-change-a9f44523.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-132644ad.js');
 const hasSlot = require('./has-slot-3edae188.js');
 const guxFormFieldError = require('./gux-form-field-error-c55f1055.js');
 const guxFormFieldContainer = require('./gux-form-field-container-ad5588d7.js');
 const guxFormField_service = require('./gux-form-field.service-9cc5debc.js');
-const usage = require('./usage-edbca2c4.js');
+const usage = require('./usage-8174e7ca.js');
 require('./random-html-id-71c43d5a.js');
 require('./log-error-7b9d4b57.js');
 require('./simulate-native-event-e88bf64f.js');
@@ -89,13 +89,13 @@ const GuxFormFieldSelect = class {
         }
     }
     render() {
-        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: 'cf9b60de02dc645231b392ab46e91408ae937d76', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '5cc32d72c253c9b38954824d36815b58c590865e', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: '125fc6ba3deeedc3676a9cd8e0c3697f75ad9e81', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '74f88c1305203e9032c0402de011b4610ff3d928', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '64b6cbc9be3a8aa617cbf1cbc3db883854c16b1d', name: "label-info" })), index.h("div", { key: '8c0d65ae4e05ae5be03744e7baedb19cb4198ddb', class: "gux-input-and-error-container" }, index.h("div", { key: '75ad79a390b93b54cb0ee21c426d908c9f096803', class: {
+        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: 'bc2c490c7ad6a1fd9fb35fe7c17720ae0434d353', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '1d9d352c69498c7c18b0af044919c0353aa99916', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: '32c9ba5e2a27c5b867bbcfbbbabe0ccb22c90a1f', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '4b7a813d4f844e4e81d47ed8a1015a368e15d53c', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: 'b1ecdf7980f691819057bf5d9235709315bfaa7d', name: "label-info" })), index.h("div", { key: '0e433faf1800d4155488c7ccb7410e07281a2274', class: "gux-input-and-error-container" }, index.h("div", { key: '51783b00b2f96fd486ddceaaaa86f6f44deee720', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, index.h("div", { key: 'a65f1b161716ea1d29752c7625f8f8314656f5e3', class: {
+            } }, index.h("div", { key: 'c2e8f32366a97e19cddc0c88ff95c4c938e9f957', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, index.h("slot", { key: 'ebe490e4ef8acd982ecfc0dd82835b193e003945', name: "input" }), index.h("gux-icon", { key: '8f024b3621a087cde0871f5587942618254e59c6', "icon-name": "custom/chevron-down-small-regular", decorative: true }))), index.h(guxFormFieldError.GuxFormFieldError, { key: '3dcd33346761e4faec0f006bb931cd599d62c496', show: this.hasError }, index.h("slot", { key: '38ff107bff216be2ef6dca3a109ca1c44564db85', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: 'd549c71211e2dcc0fb3d59dd0da56be6a6fa58c2', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '982cdba7d61099fcf99f9e70747459d2da71ac9b', name: "help" })))));
+            } }, index.h("slot", { key: '9255c1eb21a504e0ce4a8f6262b24d949e0b57de', name: "input" }), index.h("gux-icon", { key: '781da46b1bafae98554a1a734c1d4b0a4e1d1dd9', "icon-name": "custom/chevron-down-small-regular", decorative: true }))), index.h(guxFormFieldError.GuxFormFieldError, { key: '0e5b86d31fbc2d7ca0a2336b880feff6b8ad3395', show: this.hasError }, index.h("slot", { key: '2ca26adcb51cf8d14f701065eec4186424c0fe55', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '9c17f9bf58289bac8626a4f5d1df003d30953598', show: !this.hasError && this.hasHelp }, index.h("slot", { key: 'd224d3b3b65864305ee0dc4d0a13f12722905d02', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

package/dist/cjs/gux-form-field-text-like.cjs.entry.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-2dd05ef3.js');
 const onInputDisabledStateChange = require('./on-input-disabled-state-change-660a5191.js');
 const onMutation = require('./on-mutation-c0879d47.js');
-const onAttributeChange = require('./on-attribute-change-321d434b.js');
+const onAttributeChange = require('./on-attribute-change-a9f44523.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-132644ad.js');
 const hasSlot = require('./has-slot-3edae188.js');
 const guxFormFieldError = require('./gux-form-field-error-c55f1055.js');
 const guxFormFieldContainer = require('./gux-form-field-container-ad5588d7.js');
 const guxFormField_service = require('./gux-form-field.service-9cc5debc.js');
-const usage = require('./usage-edbca2c4.js');
+const usage = require('./usage-8174e7ca.js');
 const focusInputElement = require('./focus-input-element-3a0c1858.js');
 require('./random-html-id-71c43d5a.js');
 require('./log-error-7b9d4b57.js');

package/dist/cjs/gux-form-field-textarea.cjs.entry.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-2dd05ef3.js');
 const onInputDisabledStateChange = require('./on-input-disabled-state-change-660a5191.js');
 const onMutation = require('./on-mutation-c0879d47.js');
-const onAttributeChange = require('./on-attribute-change-321d434b.js');
+const onAttributeChange = require('./on-attribute-change-a9f44523.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-132644ad.js');
 const hasSlot = require('./has-slot-3edae188.js');
 const guxFormFieldError = require('./gux-form-field-error-c55f1055.js');
 const guxFormFieldContainer = require('./gux-form-field-container-ad5588d7.js');
 const guxFormField_service = require('./gux-form-field.service-9cc5debc.js');
-const usage = require('./usage-edbca2c4.js');
+const usage = require('./usage-8174e7ca.js');
 require('./random-html-id-71c43d5a.js');
 require('./log-error-7b9d4b57.js');
 require('./simulate-native-event-e88bf64f.js');
@@ -93,12 +93,12 @@ const GuxFormFieldTextarea = class {
         }
     }
     render() {
-        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '911413e5bc044254be5302c018a9ec464edd40ff', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: 'a01e54a6b6df5cc0c5046dcfb39e30a12193d67a', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: '9f8759c55ce2b7958506dbb666b8311f04594848', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: 'fcd7a77bc13727fe5b6417d6fced16a7dc07cd3a', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '6bd8a95ec0392ab106a52ee1f2ebafc665e754f9', name: "label-info" })), index.h("div", { key: '36d50195f5a9db72fa4823a75a8665ed7ba30e26', class: "gux-input-and-error-container" }, index.h("div", { key: '3183ab5a87a464be3f30ecad6abcfc09a0d35cf3', ref: el => (this.textareaContainerElement = el), class: {
+        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: 'ff1116e958e1f4014e7b6d7b64be67fe9553b4e3', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '2b8585aece1242a77a09d3c7e6be911cfafdf2ef', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: '4bdc31c30e46b6992551674313bdc71ce3433813', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '774e5db50ddb91302eaecc1cb6ac37b589275b9d', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '93ac6b4edb3c526a4fc8713b4b70e833c154b5d1', name: "label-info" })), index.h("div", { key: '7398484c3e0cd708cda2a585d49e1f4b878e8442', class: "gux-input-and-error-container" }, index.h("div", { key: '6e89f5a2942bd719be32e109a06bb9ef500ea784', ref: el => (this.textareaContainerElement = el), class: {
                 'gux-input': true,
                 [`gux-resize-${this.resize}`]: true,
                 'gux-disabled': this.disabled,
                 'gux-input-error': this.hasError
-            } }, index.h("slot", { key: '28d2a79fec541d0b583a4f9bad0e4b703e11a2a8', name: "input" })), index.h(guxFormFieldError.GuxFormFieldError, { key: 'c7f87321ecc5cce01cfe170ffd930a2776d342bd', show: this.hasError }, index.h("slot", { key: '976c7e01fd76cea875de287bc7ebc822f3ab2e02', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: 'b60e636ff3995288651e32b8e2dae51219457c54', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '8e34f88cbbb2b841f07c02097f5becca3f4d6698', name: "help" })))));
+            } }, index.h("slot", { key: '05b9db97c55a3a7d23a614478365ee04dec6324c', name: "input" })), index.h(guxFormFieldError.GuxFormFieldError, { key: '3f092b502db804352a8b2934f6004572ab8dde20', show: this.hasError }, index.h("slot", { key: '63ade17e80798d9f3127282aff876c61cfcdb9b8', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '7c23febf13fc9779645305345afd0f807c778bcb', show: !this.hasError && this.hasHelp }, index.h("slot", { key: 'df027b22b429b5e66ffa793b821a009ba83d45c9', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition