genesys-spark-components 4.70.0 → 4.71.1

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list-item/gux-month-list-item.js

@@ -14,13 +14,15 @@ export class GuxMonthListItem {
     }
     focusParentList() {
         const parentList = getClosestElement('gux-month-list', this.root);
-        if (parentList && parentList.shadowRoot.activeElement === null) {
+        if (parentList &&
+            parentList.shadowRoot.activeElement === null &&
+            !this.selected) {
             this.root.blur();
             parentList.focus();
         }
     }
     render() {
-        return (h(Host, { key: '20264b60771afe08d5639262ac2d79b75cd105d0', role: "listitem", value: this.value }, h("div", { key: '78e37c338c9057276be144db17138fa9e049b0ad', class: "gux-container" }, h("button", { key: '45ac3509d341a2b649e92a00e685e3b56a8f0610', class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: 'c6e7143b18d0ec51d171f99c24e9cd6c87929fc5' })))));
+        return (h(Host, { key: '399c371cbf542f3bfb2e07c62fd3365bfdd918ae', role: "listitem", value: this.value }, h("div", { key: 'c8ba9f281cb4b7ece5ac84865d6b86747ed11733', class: "gux-container" }, h("button", { key: '9ad2ae86f46193a1a719dfaaf57ef407cd5b7080', class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: '3776855e08f42d947d1dad9c5c43ad666534560b' })))));
     }
     static get is() { return "gux-month-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-month-picker/gux-month-picker.css

@@ -19,6 +19,7 @@
 }
 .gux-target .gux-display {
   display: inline-flex;
+  align-items: center;
   min-width: 100px;
   padding-right: var(--gse-ui-formControl-input-gap);
   font-family: var(--gse-ui-formControl-label-text-fontFamily);

package/dist/collection/components/beta/gux-month-picker/gux-month-picker.js

@@ -66,6 +66,12 @@ export class GuxMonthPicker {
             this.locale = getDesiredLocale(this.root);
         }
     }
+    onFocusout(event) {
+        const focusIsOutsideComponent = event.relatedTarget && !this.root.contains(event.relatedTarget);
+        if (focusIsOutsideComponent) {
+            this.expanded = false;
+        }
+    }
     isOutOfBounds(value) {
         return this.isBeforeMin(value) || this.isAfterMax(value);
     }
@@ -194,7 +200,7 @@ export class GuxMonthPicker {
         return (h("gux-month-calendar", { slot: "popup", ref: (el) => (this.monthCalendarElement = el), onInput: () => this.onMonthCalendarInput(), value: this.value, min: this.min, max: this.max }));
     }
     render() {
-        return (h("gux-popup", { key: '8b81b04549dcaee143f159327745e7eab0008f91', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: '5302613a82060ef4d3018cdf3756fcced9be0ee4', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
     }
     static get is() { return "gux-month-picker-beta"; }
     static get encapsulation() { return "shadow"; }
@@ -319,6 +325,12 @@ export class GuxMonthPicker {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "focusout",
+                "method": "onFocusout",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
 }

package/dist/collection/components/beta/gux-phone-input/gux-phone-input.css

@@ -27,7 +27,6 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch center;
   align-items: center;
   width: 100%;
   height: var(--gse-ui-phoneInput-dropdown-height);
@@ -42,6 +41,12 @@
   border: var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);
   border-radius: var(--gse-ui-formControl-input-borderRadius);
 }
+.target-container .gux-input {
+  flex: 1;
+  align-content: center;
+  height: 100%;
+  cursor: text;
+}
 .target-container.gux-error {
   border: var(--gse-ui-formControl-input-error-border-width) var(--gse-ui-formControl-input-error-border-style) var(--gse-ui-formControl-input-error-border-color);
 }

package/dist/collection/components/beta/gux-phone-input/gux-phone-input.js

@@ -18,6 +18,7 @@ import { getRegionObjects } from "./services/region-map.service";
 import { preventBrowserValidationStyling } from "../../../utils/dom/prevent-browser-validation-styling";
 import { logWarn } from "../../../utils/error/log-error";
 import simulateNativeEvent from "../../../utils/dom/simulate-native-event";
+import { focusInputElement } from "../../../utils/dom/focus-input-element";
 export class GuxPhoneInput {
     constructor() {
         this.phoneUtil = libphonenumber.PhoneNumberUtil.getInstance();
@@ -322,10 +323,10 @@ export class GuxPhoneInput {
     }
     renderInput() {
         var _a;
-        return (h("input", { id: 'tel-input', class: {
+        return (h("div", { class: "gux-input", onClick: () => focusInputElement(this.inputElement) }, h("input", { id: 'tel-input', class: {
                 'gux-phone-text-input': true,
                 'gux-disabled': this.disabled
-            }, type: "tel", placeholder: this.phoneUtil.format(this.phoneUtil.getExampleNumber(((_a = this.region) === null || _a === void 0 ? void 0 : _a.alpha2Code) || this.defaultRegionCode || 'US'), this.displayFormat), value: this.value, disabled: this.disabled }));
+            }, type: "tel", placeholder: this.phoneUtil.format(this.phoneUtil.getExampleNumber(((_a = this.region) === null || _a === void 0 ? void 0 : _a.alpha2Code) || this.defaultRegionCode || 'US'), this.displayFormat), value: this.value, disabled: this.disabled })));
     }
     renderTarget() {
         return (h("div", { class: {
@@ -342,7 +343,7 @@ export class GuxPhoneInput {
         return (h("div", { slot: "popup", class: "gux-listbox-container" }, h("gux-listbox", { "aria-label": this.i18n('regionDropdown'), value: this.region ? this.region.alpha2Code : '' }, this.regionOptions)));
     }
     render() {
-        return (h("gux-popup", { key: '59b03638af1cf17ea4ca3f39da446242b2e91fcd', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: 'c1edd43526574f70ee9e1633fddef63a53c9c806', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
     }
     static get is() { return "gux-phone-input-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-content-search/gux-content-search.css

@@ -44,6 +44,7 @@
   width: 100%;
   height: var(--gse-ui-formControl-input-textfield-height);
   padding: var(--gse-ui-formControl-textarea-padding);
+  cursor: text;
   background-color: var(--gse-ui-formControl-input-backgroundColor);
   background-image: none;
   border: var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);

package/dist/collection/components/stable/gux-content-search/gux-content-search.js

@@ -3,6 +3,7 @@ import { trackComponent } from "../../../utils/tracking/usage";
 import { buildI18nForComponent } from "../../../i18n";
 import contentSearchResources from "./i18n/en.json";
 import { onDisabledChange } from "../../../utils/dom/on-attribute-change";
+import { focusInputElement } from "../../../utils/dom/focus-input-element";
 /**
  * @slot  - Required slot for input tag
  */
@@ -45,10 +46,10 @@ export class GuxContentSearch {
         }
     }
     render() {
-        return (h("div", { key: 'e68c5657440c08a681454e3997f017b1b0605c2e', class: {
+        return (h("div", { key: 'b337f8fe6e52c330315469bfcc6157b89866d3db', class: {
                 'gux-content-search': true,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: 'f85e519ae144209d22acd0b2bbf3953f1e2dbb2e', class: "gux-search-icon" }, h("gux-icon", { key: 'd57f62dc071fec39c72b31548f3675b801d4b6de', decorative: true, "icon-name": "fa/magnifying-glass-regular" })), h("slot", { key: '053bf32638f622a428b2976c55d37fb6e9b3613c' }), this.getNavigationPanel()));
+            }, onClick: () => focusInputElement(this.inputSlottedElement) }, h("div", { key: '8f40cecd9ab4df64d955bea147cf1db4d4fd2ee0', class: "gux-search-icon" }, h("gux-icon", { key: '400b0117a600e98adabc847ed99a90e86d60bad3', decorative: true, "icon-name": "fa/magnifying-glass-regular" })), h("slot", { key: '97421cce5efff19fd99e81bb590cb69a4866fd0e' }), this.getNavigationPanel()));
     }
     getNavigationPanel() {
         if (this.showNavigationPanel()) {

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

@@ -148,12 +148,14 @@
   font-size: var(--gse-ui-formControl-input-contentText-fontSize);
   line-height: var(--gse-ui-formControl-input-contentText-lineHeight);
   color: var(--gse-ui-formControl-input-populatedColor);
+  cursor: text;
   background-color: var(--gse-ui-formControl-input-backgroundColor);
   background-image: none;
   border: var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);
   border-radius: var(--gse-ui-formControl-input-borderRadius);
 }
 .gux-input-and-error-container .gux-input .gux-input-container.gux-disabled {
+  cursor: default;
   opacity: var(--gse-ui-formControl-input-disabled-opacity);
 }
 .gux-input-and-error-container .gux-input .gux-input-container:focus-within {

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

@@ -22,6 +22,7 @@ import { GuxFormFieldHelp, GuxFormFieldError, GuxFormFieldLabel, GuxFormFieldCon
 import { clearInput, getComputedLabelPosition, hasContent, validateFormIds, getSlottedInput } from "../../gux-form-field.service";
 import { trackComponent } from "../../../../../utils/tracking/usage";
 import componentResources from "./i18n/en.json";
+import { focusInputElement } from "../../../../../utils/dom/focus-input-element";
 /**
  * @slot input - Required slot for input tag
  * @slot label - Required slot for label tag
@@ -99,14 +100,14 @@ export class GuxFormFieldNumber {
     }
     render() {
         const showClearButton = this.clearable && this.hasContent && !this.disabled;
-        return (h(GuxFormFieldContainer, { key: '7cd63e19283a6dc3eaf8806073246206834e063c', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'bccccd9a17d23d2d4446fd9685eb9cbe9404a9d1', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'e8886a901750434ae6be0da8f769c82aef5adb17', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'f79a65869ea22e74831f01fed54d875cce02e7b4', variant: "required", required: this.required }), h("slot", { key: '0386c4fbff1aa3cd83103e35dd499c8ad4262558', name: "label-info" })), h("div", { key: '6abf848f8a230821fd95429e9e52f724edcdcf8b', class: "gux-input-and-error-container" }, h("div", { key: '16d8e83feacb453361be85817dac8b7941189bab', class: {
+        return (h(GuxFormFieldContainer, { key: '50bd11218b828b09bb602cc83ff79df6ddb6cc8a', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '9547859b8e7e782769cc3b4367e9c9d2e5f8d42e', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'ab9fca342727ca5bd14368c5495f38fe0ab579b6', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '9bab59ea6fad08ff0595c752f8f295c08dfbcf6a', variant: "required", required: this.required }), h("slot", { key: '901bc8090db33f8b9b4e9eeabb86babb785053c2', name: "label-info" })), h("div", { key: '3ee05abd1a34ef1d8d24a548317ea2ab1b34b0c5', class: "gux-input-and-error-container" }, h("div", { key: '36e1a17d312adf913c2b05457608694361eb7743', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            }, part: "input-section" }, h("div", { key: 'dab06cf421271d09ed7298b54435a984c281d181', class: {
+            }, part: "input-section" }, h("div", { key: '1bf6f9f87f7e8fefff22a3b5b769b895916a551d', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled,
                 'gux-clear': showClearButton
-            } }, h("slot", { key: '83e0717bb788c2fb31934824355dbce50bbd750c', 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: '45adac5e37cf049f696cafab18457c89fc2446f1', show: this.hasError }, h("slot", { key: 'a6e96e5c56a29622d84ae629f2962d35823e7418', name: "error" })), h(GuxFormFieldHelp, { key: '25283d15c640fcd203efaa9d8e108a5524649f6e', show: !this.hasError && this.hasHelp }, h("slot", { key: 'e30a17304b3d059bd3938b788c910bd9f4c37268', name: "help" })))));
+            }, onClick: () => focusInputElement(this.input) }, h("slot", { key: '30f42fe682d7b107c986fdc497582aa79cbe74c8', 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: 'ce7063300eaf85c779d33cd459b48f7c2a0af8a7', show: this.hasError }, h("slot", { key: 'b3b53ed8414e27a3c0957bc3e94a616530090f20', name: "error" })), h(GuxFormFieldHelp, { key: '63b748c95e1f0799f0b073b82a3a6a919201c964', show: !this.hasError && this.hasHelp }, h("slot", { key: '8f1bf7f5e576af7b1ed2db67f784bac4bc3a05fb', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

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

@@ -147,12 +147,14 @@
   font-weight: var(--gse-ui-formControl-input-contentText-fontWeight);
   line-height: var(--gse-ui-formControl-input-contentText-lineHeight);
   color: var(--gse-ui-formControl-input-populatedColor);
+  cursor: text;
   background-color: var(--gse-ui-formControl-input-backgroundColor);
   background-image: none;
   border: var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);
   border-radius: var(--gse-ui-formControl-input-borderRadius);
 }
 .gux-input-and-error-container .gux-input .gux-input-container.gux-disabled {
+  cursor: default;
   opacity: var(--gse-ui-formControl-input-disabled-opacity);
 }
 .gux-input-and-error-container .gux-input .gux-input-container gux-icon[icon-name=search] {

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

@@ -18,6 +18,7 @@ import { hasSlot } from "../../../../../utils/dom/has-slot";
 import { GuxFormFieldHelp, GuxFormFieldError, GuxFormFieldLabel, GuxFormFieldContainer } from "../../functional-components/functional-components";
 import { clearInput, hasContent, getComputedLabelPosition, validateFormIds, getSlottedInput } from "../../gux-form-field.service";
 import { trackComponent } from "../../../../../utils/tracking/usage";
+import { focusInputElement } from "../../../../../utils/dom/focus-input-element";
 /**
  * @slot input - Required slot for input tag
  * @slot label - Required slot for label tag
@@ -92,13 +93,13 @@ export class GuxFormFieldSearch {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '58166543ea3396b6a2f010d8ad25839f6da9862e', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '81f159bde9db11ef976e52c7229a8ffe7a06f22a', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '7d3c829d0551f6924f393a597f00caa1cc6e7bc8', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'adf56d285a6dd185e3b245c0830c238d250025a8', variant: "required", required: this.required }), h("slot", { key: '666f6a5e421b15988c8b62cd6ce3e1b6336a88cb', name: "label-info" })), h("div", { key: '7a74fab6c5ea13071f9b3d76ce45558e635d9c92', class: "gux-input-and-error-container" }, h("div", { key: 'b546aee27c23e2c78c0737506a6b24c71d01bf81', class: {
+        return (h(GuxFormFieldContainer, { key: '878751b88255c5ca441586ba2b2c25480a7249d4', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '66d01b83177e9a1e5ab5fc0625c9657c67fb6060', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '6afb1976337373d2809e0037dad86e18e6a5643a', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '7c653b10f7e3f80c4402f30a72f7b9f983afe91d', variant: "required", required: this.required }), h("slot", { key: 'aecf9184634f9c262f7072287211e8b760a173f5', name: "label-info" })), h("div", { key: 'c9ad8a22ac5f0ef26e81b724c4ba08c4c63c08af', class: "gux-input-and-error-container" }, h("div", { key: '172ce3c6b502664aaab57624910d0f2e00cd400e', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '9fcd7df004c874c3d5ab3f7d4bef0835e7a924c0', class: {
+            } }, h("div", { key: '20b9527224b4fcab09cfd13300b1ce039b7a815f', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("gux-icon", { key: 'a84a5af69848417cb3722dc9cb0827ad4ba47fef', "icon-name": "fa/magnifying-glass-regular", decorative: true }), h("slot", { key: 'fab262d30b38203f5ec6ceb9bf2c733b7920530a', name: "input" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: 'd6f71131cc9d8870ac0e4b40177ddec6806b89e7', show: this.hasError }, h("slot", { key: 'f847c4449ebd17bc83307aca26e61242b900decc', name: "error" })), h(GuxFormFieldHelp, { key: 'a80e3898c62e3f2e1617d5f1babb73001744aed9', show: !this.hasError && this.hasHelp }, h("slot", { key: '8bdd443766bf846d9e02593167152fcfe144bef2', name: "help" })))));
+            }, onClick: () => focusInputElement(this.input) }, h("gux-icon", { key: '6aaf80aeab0d961ce0863887b10dd4a2aaea9b17', "icon-name": "fa/magnifying-glass-regular", decorative: true }), h("slot", { key: '476b45900c8f17b4c08d73818303946a4a2ec763', name: "input" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: '0a380ff61edd61533caedc4ed56b03984582cea3', show: this.hasError }, h("slot", { key: '562a6b8e36caaf083b8048b715724ee7ef5ed5f1', name: "error" })), h(GuxFormFieldHelp, { key: '9be7d07f16a836fe3cb3b0d732072e3b5dc75868', show: !this.hasError && this.hasHelp }, h("slot", { key: 'f9e9adfbc602c62af7713d9654593440b00a749b', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-text-like/gux-form-field-text-like.css

@@ -147,6 +147,7 @@ slot[name=suffix] {
   font-weight: var(--gse-ui-formControl-input-contentText-fontWeight);
   line-height: var(--gse-ui-formControl-input-contentText-lineHeight);
   color: var(--gse-ui-formControl-input-populatedColor);
+  cursor: text;
   background-color: var(--gse-ui-formControl-input-backgroundColor);
   background-image: none;
   border: var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);
@@ -156,6 +157,7 @@ slot[name=suffix] {
   text-align: right;
 }
 .gux-input-and-error-container .gux-input .gux-input-container.gux-disabled {
+  cursor: default;
   opacity: var(--gse-ui-formControl-input-disabled-opacity);
 }
 .gux-input-and-error-container .gux-input .gux-input-container:focus-within {

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

@@ -18,6 +18,7 @@ import { hasSlot } from "../../../../../utils/dom/has-slot";
 import { GuxFormFieldHelp, GuxFormFieldError, GuxFormFieldLabel, GuxFormFieldContainer } from "../../functional-components/functional-components";
 import { clearInput, hasContent, getComputedLabelPosition, validateFormIds, setSlotAriaDescribedby, getSlottedInput } from "../../gux-form-field.service";
 import { trackComponent } from "../../../../../utils/tracking/usage";
+import { focusInputElement } from "../../../../../utils/dom/focus-input-element";
 /**
  * @slot input - Required slot for input tag
  * @slot label - Required slot for label tag
@@ -110,15 +111,15 @@ export class GuxFormFieldTextLike {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: 'bb6c077df61d47169ddbd8af74d6906cd5354a18', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'b71214d65749df1743a9b37cba6f9808ed26afed', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'e8b921f53a2f96e4e7de5c0a1050da1dbc893a19', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'c29409c64ae4f46149e61a8c937d983dbad8566e', variant: "required", required: this.required }), h("slot", { key: '7e9d51f99a6fa3c3771ba2d01f8eee1707d5de1a', name: "label-info" })), h("div", { key: '597300a419b56423ed9d79765f1e0d7e7834a43c', class: "gux-input-and-error-container" }, h("div", { key: '1fbe34b0a399b38077681c29b2bdb03b0a147043', class: {
+        return (h(GuxFormFieldContainer, { key: '86c21de559069c444619f6b8a75d42d12baa2de5', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '0bbe5cdc48e5f63d5f4486fe451c7c049c31e5eb', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '59889d50d16f7e8927504404dc07e7a2ab41c317', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '7fe538687d9034877026f874b8685231c5ae0806', variant: "required", required: this.required }), h("slot", { key: 'ef7f343710af836452b1b8d7fa0d5846fff706bd', name: "label-info" })), h("div", { key: '10739e21a61bc609557af09967599f02b136a0c8', class: "gux-input-and-error-container" }, h("div", { key: '9967ae80181308f45a8512617bf4047ed6fe61cb', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '9994182f2aaa915bb5445836b754c037052cbebb', class: {
+            } }, h("div", { key: '2b42a410ee78469a8918851dc2f5fe48cb39cc50', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled,
                 'gux-has-prefix': this.hasPrefix,
                 'gux-has-suffix': this.hasSuffix
-            } }, h("slot", { key: '4be921cb58fd54171f9bc81409451b45904fcdd9', name: "prefix" }), h("slot", { key: 'c942c81394a5c2f79e030484191dc1878e7ba9ad', name: "input" }), this.renderRadialLoading(), h("slot", { key: '52428b82056bf77902ded5c730ed3f976d24be13', name: "suffix" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: 'debc94e90a94c098c21be404daaf3e339ae8f5c0', show: this.hasError }, h("slot", { key: '04d219fd899ac0b09468c0e9a1360c5c9ff52ec9', name: "error" })), h(GuxFormFieldHelp, { key: '07600d7b0bbb3b1fcb25ac23283944c2f143284f', show: !this.hasError && this.hasHelp }, h("slot", { key: '87b4f9fdf2eb08d4da0ccf197d279f99d73fc04c', name: "help" })))));
+            }, onClick: () => focusInputElement(this.input) }, h("slot", { key: '425254cbd257f396efcd09dafa6c14830d2b79d0', name: "prefix" }), h("slot", { key: '73c227d052303021412260b3ec1886ad33683f08', name: "input" }), this.renderRadialLoading(), h("slot", { key: 'a09646a775082ba643f8a3d8e901c66afba9ff22', name: "suffix" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: 'a2abbec48c35dc06ca9210732500516552756ffa', show: this.hasError }, h("slot", { key: 'b54886927c534a6ecf9e1f5677b3474a33e46780', name: "error" })), h(GuxFormFieldHelp, { key: '862ecf323d91364fa06c151101a9c40a99f8d3ec', show: !this.hasError && this.hasHelp }, h("slot", { key: '2e2908cf6295f00e678e3be3069a576440d0f073', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition