genesys-spark-components 4.26.1-beta.0 → 4.26.1

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

@@ -2,26 +2,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-75c9f0d9.js');
-const index$1 = require('./index-dee802be.js');
-const onInputDisabledStateChange = require('./on-input-disabled-state-change-005e5b3e.js');
-const onMutation = require('./on-mutation-ec5d23bd.js');
-const onAttributeChange = require('./on-attribute-change-9b2d8c85.js');
-const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-15142963.js');
-const guxFormField_service = require('./gux-form-field.service-d9598ea6.js');
-const simulateNativeEvent = require('./simulate-native-event-8209a457.js');
-const hasSlot = require('./has-slot-429f8b9e.js');
-const guxFormFieldContainer = require('./gux-form-field-container-987b5820.js');
-const usage = require('./usage-287da480.js');
+const index = require('./index-7fb02c8c.js');
+const index$1 = require('./index-a1a48d79.js');
+const onInputDisabledStateChange = require('./on-input-disabled-state-change-660a5191.js');
+const onMutation = require('./on-mutation-3d294d15.js');
+const onAttributeChange = require('./on-attribute-change-321d434b.js');
+const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-132644ad.js');
+const guxFormField_service = require('./gux-form-field.service-e17928a7.js');
+const simulateNativeEvent = require('./simulate-native-event-e88bf64f.js');
+const hasSlot = require('./has-slot-3edae188.js');
+const guxFormFieldContainer = require('./gux-form-field-container-51849136.js');
+const usage = require('./usage-623a7a81.js');
 const en = require('./en-66d2b744.js');
-const onClickOutside = require('./on-click-outside-3c0f8816.js');
-const afterNextRender = require('./after-next-render-a023ef47.js');
-const floatingUi_dom_esm = require('./floating-ui.dom.esm-cae393e0.js');
-const getSlot = require('./get-slot-395a67ef.js');
-const findElementById = require('./find-element-by-id-9c3e0b1b.js');
-require('./get-closest-element-26894e5a.js');
-require('./random-html-id-32ef8847.js');
-require('./log-error-8a92241e.js');
+const onClickOutside = require('./on-click-outside-f7acdd1d.js');
+const afterNextRender = require('./after-next-render-162425fe.js');
+const floatingUi_dom_esm = require('./floating-ui.dom.esm-f8b4cd90.js');
+const getSlot = require('./get-slot-676aebf2.js');
+const findElementById = require('./find-element-by-id-fde17c92.js');
+require('./get-closest-element-9e41d6b9.js');
+require('./random-html-id-71c43d5a.js');
+require('./log-error-7b9d4b57.js');
 
 const increment = "Increment";
 const decrement = "Decrement";
@@ -31,363 +31,366 @@ const componentResources = {
 };
 
 const guxFormFieldNumberCss = ".gux-form-field-container.gux-beside{display:flex;flex-direction:row}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;place-content:stretch flex-start;align-items:center;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;align-self:auto;order:0;min-width:var(--gse-ui-icon-size-sm);min-height:var(--gse-ui-icon-size-sm);margin-right:var(--gse-ui-formControl-helper-gap);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.gux-required::after{color:var(--gse-ui-formControl-label-indicator-requiredColor);content:\" *\"}.gux-form-field-label.gux-beside{position:relative;top:8px;width:fit-content;min-width:45px;margin-right:var(--gse-ui-formControl-label-gap)}.gux-form-field-label.gux-above{padding:var(--gse-ui-formControl-label-padding)}.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:var(--gse-ui-formControl-helper-paddingSmall);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-text-fontFamily);font-size:var(--gse-ui-formControl-label-text-fontSize);font-weight:var(--gse-ui-formControl-label-text-fontWeight);line-height:var(--gse-ui-formControl-label-text-lineHeight);color:var(--gse-ui-formControl-label-labelColor)}::slotted(input){flex:1 1 auto;align-self:auto;order:0;width:100%;overflow:hidden;font-size:var(--gse-ui-formControl-input-contentText-fontSize);text-align:right;text-overflow:ellipsis;background-color:var(--gse-ui-formControl-input-backgroundColor);border:none;outline:none}::slotted(input)::placeholder{color:var(--gse-ui-formControl-input-placeholderColor);opacity:1}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container .gux-input{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;width:100%}.gux-input-and-error-container .gux-input .gux-input-container{box-sizing:border-box;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-input-gap);place-content:stretch center;align-items:center;align-self:auto;order:0;width:100%;height:var(--gse-ui-formControl-input-textfield-height);padding:var(--gse-ui-formControl-input-padding);font-family:var(--gse-ui-formControl-input-contentText-fontFamily);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);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{opacity:var(--gse-ui-formControl-input-disabled-opacity)}.gux-input-and-error-container .gux-input .gux-input-container.gux-clear{padding-right:0}.gux-input-and-error-container .gux-input .gux-input-container:focus-within{border:var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);border-radius:var(--gse-ui-formControl-focusRing-borderRadius);outline:var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-input-and-error-container .gux-input.gux-input-error .gux-input-container{border-color:var(--gse-ui-formControl-input-error-border-color)}.gux-step-buttons-container{flex:0 1 14px;align-self:auto;order:0;margin-left:var(--gse-ui-formControl-spinButton-gap)}.gux-step-buttons-container .gux-step-button{display:flex;flex:0 1 auto;align-items:center;align-self:auto;justify-content:center;order:0;padding:0;color:var(--gse-ui-formControl-input-inputIcon-defaultColor);background:transparent;border:none}.gux-step-buttons-container .gux-step-button:not(:disabled):focus-visible,.gux-step-buttons-container .gux-step-button:not(:disabled):hover{cursor:pointer;border:var(--gse-ui-formControl-input-hover-border-width) var(--gse-ui-formControl-input-hover-border-style) var(--gse-ui-formControl-input-hover-border-color)}.gux-step-buttons-container .gux-step-button gux-icon{flex:0 0 auto;width:14px;height:14px}";
+const GuxFormFieldNumberStyle0 = guxFormFieldNumberCss;
 
 var __decorate$2 = (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;
+    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 GuxFormFieldNumber = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.clearable = undefined;
-    this.labelPosition = undefined;
-    this.computedLabelPosition = 'above';
-    this.disabled = undefined;
-    this.required = undefined;
-    this.hasContent = false;
-    this.hasError = false;
-    this.hasHelp = false;
-  }
-  onMutation() {
-    this.hasError = hasSlot.hasSlot(this.root, 'error');
-    this.hasHelp = hasSlot.hasSlot(this.root, 'help');
-  }
-  // eslint-disable-next-line @typescript-eslint/require-await
-  async guxForceUpdate() {
-    this.hasContent = guxFormField_service.hasContent(this.input);
-    this.hasError = hasSlot.hasSlot(this.root, 'error');
-    this.hasHelp = hasSlot.hasSlot(this.root, 'help');
-    index.forceUpdate(this.root);
-  }
-  async componentWillLoad() {
-    this.getI18nValue = await index$1.buildI18nForComponent(this.root, componentResources);
-    this.setInput();
-    this.setLabel();
-    this.hasError = hasSlot.hasSlot(this.root, 'error');
-    this.hasHelp = hasSlot.hasSlot(this.root, 'help');
-    usage.trackComponent(this.root, { variant: this.variant });
-  }
-  disconnectedCallback() {
-    if (this.disabledObserver) {
-      this.disabledObserver.disconnect();
-    }
-    if (this.requiredObserver) {
-      this.requiredObserver.disconnect();
-    }
-  }
-  render() {
-    const showClearButton = this.clearable && this.hasContent && !this.disabled;
-    return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { position: this.computedLabelPosition, required: this.required }, index.h("slot", { name: "label", onSlotchange: () => this.setLabel() })), index.h("div", { class: "gux-input-and-error-container" }, index.h("div", { class: {
-        'gux-input': true,
-        'gux-input-error': this.hasError
-      }, part: "input-section" }, index.h("div", { class: {
-        'gux-input-container': true,
-        'gux-disabled': this.disabled,
-        'gux-clear': showClearButton
-      } }, index.h("slot", { name: "input", onSlotchange: () => this.setInput() }), showClearButton && (index.h("gux-form-field-input-clear-button", { onClick: () => guxFormField_service.clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), index.h(guxFormField_service.GuxFormFieldError, { show: this.hasError }, index.h("slot", { name: "error" })), index.h(guxFormField_service.GuxFormFieldHelp, { show: !this.hasError && this.hasHelp }, index.h("slot", { name: "help" })))));
-  }
-  get variant() {
-    const labelPositionVariant = this.labelPosition
-      ? this.labelPosition.toLowerCase()
-      : 'none';
-    const clearableVariant = this.clearable ? 'clearable' : 'unclearable';
-    return `${clearableVariant}-${labelPositionVariant}`;
-  }
-  setInput() {
-    this.input = guxFormField_service.getSlottedInput(this.root, 'input[type="number"][slot="input"]');
-    this.hasContent = guxFormField_service.hasContent(this.input);
-    preventBrowserValidationStyling.preventBrowserValidationStyling(this.input);
-    this.input.addEventListener('input', () => {
-      this.hasContent = guxFormField_service.hasContent(this.input);
-    });
-    this.disabled = onInputDisabledStateChange.calculateInputDisabledState(this.input);
-    this.required = this.input.required;
-    this.disabledObserver = onInputDisabledStateChange.onInputDisabledStateChange(this.input, (disabled) => {
-      this.disabled = disabled;
-    });
-    this.requiredObserver = onAttributeChange.onRequiredChange(this.input, (required) => {
-      this.required = required;
-    });
-    guxFormField_service.validateFormIds(this.root, this.input);
-  }
-  setLabel() {
-    this.label = this.root.querySelector('label[slot="label"]');
-    this.computedLabelPosition = guxFormField_service.getComputedLabelPosition(this.label, this.labelPosition);
-  }
-  renderStepButtons(input, getI18nValue, disabled) {
-    return (index.h("div", { class: "gux-step-buttons-container" }, index.h("button", { class: "gux-step-button", tabIndex: -1, type: "button", title: getI18nValue('increment'), disabled: disabled, onClick: () => this.stepUp(input) }, index.h("gux-icon", { "icon-name": "chevron-small-up", decorative: true })), index.h("button", { class: "gux-step-button", tabIndex: -1, type: "button", title: getI18nValue('decrement'), disabled: disabled, onClick: () => this.stepDown(input) }, index.h("gux-icon", { "icon-name": "chevron-small-down", decorative: true }))));
-  }
-  stepDown(input) {
-    if (input.value === '') {
-      guxFormField_service.setInputValue(input, input.min || '0', false);
-    }
-    else {
-      input.stepDown();
-      this.simulateNativeInputAndChangeEvents(input);
-    }
-  }
-  stepUp(input) {
-    if (input.value === '') {
-      guxFormField_service.setInputValue(input, input.min || '0', false);
-    }
-    else {
-      input.stepUp();
-      this.simulateNativeInputAndChangeEvents(input);
-    }
-  }
-  simulateNativeInputAndChangeEvents(input) {
-    simulateNativeEvent.simulateNativeEvent(input, 'input');
-    simulateNativeEvent.simulateNativeEvent(input, 'change');
-  }
-  static get delegatesFocus() { return true; }
-  get root() { return index.getElement(this); }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.clearable = undefined;
+        this.labelPosition = undefined;
+        this.computedLabelPosition = 'above';
+        this.disabled = undefined;
+        this.required = undefined;
+        this.hasContent = false;
+        this.hasError = false;
+        this.hasHelp = false;
+    }
+    onMutation() {
+        this.hasError = hasSlot.hasSlot(this.root, 'error');
+        this.hasHelp = hasSlot.hasSlot(this.root, 'help');
+    }
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async guxForceUpdate() {
+        this.hasContent = guxFormField_service.hasContent(this.input);
+        this.hasError = hasSlot.hasSlot(this.root, 'error');
+        this.hasHelp = hasSlot.hasSlot(this.root, 'help');
+        index.forceUpdate(this.root);
+    }
+    async componentWillLoad() {
+        this.getI18nValue = await index$1.buildI18nForComponent(this.root, componentResources);
+        this.setInput();
+        this.setLabel();
+        this.hasError = hasSlot.hasSlot(this.root, 'error');
+        this.hasHelp = hasSlot.hasSlot(this.root, 'help');
+        usage.trackComponent(this.root, { variant: this.variant });
+    }
+    disconnectedCallback() {
+        if (this.disabledObserver) {
+            this.disabledObserver.disconnect();
+        }
+        if (this.requiredObserver) {
+            this.requiredObserver.disconnect();
+        }
+    }
+    render() {
+        const showClearButton = this.clearable && this.hasContent && !this.disabled;
+        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '140f251656aac72e6bdf129b4a9408a287799906', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '081843f21d4688d65e1ded305a1ee3c4392425ec', position: this.computedLabelPosition, required: this.required }, index.h("slot", { key: '0e18f68fef439eb6d83459b47d99749f856dea50', name: "label", onSlotchange: () => this.setLabel() })), index.h("div", { key: '4775b7b1498c847f3dae07e49231fa5d7074d343', class: "gux-input-and-error-container" }, index.h("div", { key: '5d913e0fa93027dc1a58ad340b1497d0654891c8', class: {
+                'gux-input': true,
+                'gux-input-error': this.hasError
+            }, part: "input-section" }, index.h("div", { key: '571cef33da2115fd9221a936f611fbd5b35a2c35', class: {
+                'gux-input-container': true,
+                'gux-disabled': this.disabled,
+                'gux-clear': showClearButton
+            } }, index.h("slot", { key: '0e562691d11ea156f490e42f5bd25b64fcbda49c', name: "input", onSlotchange: () => this.setInput() }), showClearButton && (index.h("gux-form-field-input-clear-button", { onClick: () => guxFormField_service.clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), index.h(guxFormField_service.GuxFormFieldError, { key: '61c095314733e553d1cc3f1f0679e7a84ec83f64', show: this.hasError }, index.h("slot", { key: 'adf2293e262f9a3906ca827fcb2b717e9bda1c5d', name: "error" })), index.h(guxFormField_service.GuxFormFieldHelp, { key: '1b6aa97aa2d2607ccf736734d6b913a597296843', show: !this.hasError && this.hasHelp }, index.h("slot", { key: 'b045551a5f988f8e97915e656f8b1eadcd75c376', name: "help" })))));
+    }
+    get variant() {
+        const labelPositionVariant = this.labelPosition
+            ? this.labelPosition.toLowerCase()
+            : 'none';
+        const clearableVariant = this.clearable ? 'clearable' : 'unclearable';
+        return `${clearableVariant}-${labelPositionVariant}`;
+    }
+    setInput() {
+        this.input = guxFormField_service.getSlottedInput(this.root, 'input[type="number"][slot="input"]');
+        this.hasContent = guxFormField_service.hasContent(this.input);
+        preventBrowserValidationStyling.preventBrowserValidationStyling(this.input);
+        this.input.addEventListener('input', () => {
+            this.hasContent = guxFormField_service.hasContent(this.input);
+        });
+        this.disabled = onInputDisabledStateChange.calculateInputDisabledState(this.input);
+        this.required = this.input.required;
+        this.disabledObserver = onInputDisabledStateChange.onInputDisabledStateChange(this.input, (disabled) => {
+            this.disabled = disabled;
+        });
+        this.requiredObserver = onAttributeChange.onRequiredChange(this.input, (required) => {
+            this.required = required;
+        });
+        guxFormField_service.validateFormIds(this.root, this.input);
+    }
+    setLabel() {
+        this.label = this.root.querySelector('label[slot="label"]');
+        this.computedLabelPosition = guxFormField_service.getComputedLabelPosition(this.label, this.labelPosition);
+    }
+    renderStepButtons(input, getI18nValue, disabled) {
+        return (index.h("div", { class: "gux-step-buttons-container" }, index.h("button", { class: "gux-step-button", tabIndex: -1, type: "button", title: getI18nValue('increment'), disabled: disabled, onClick: () => this.stepUp(input) }, index.h("gux-icon", { "icon-name": "chevron-small-up", decorative: true })), index.h("button", { class: "gux-step-button", tabIndex: -1, type: "button", title: getI18nValue('decrement'), disabled: disabled, onClick: () => this.stepDown(input) }, index.h("gux-icon", { "icon-name": "chevron-small-down", decorative: true }))));
+    }
+    stepDown(input) {
+        if (input.value === '') {
+            guxFormField_service.setInputValue(input, input.min || '0', false);
+        }
+        else {
+            input.stepDown();
+            this.simulateNativeInputAndChangeEvents(input);
+        }
+    }
+    stepUp(input) {
+        if (input.value === '') {
+            guxFormField_service.setInputValue(input, input.min || '0', false);
+        }
+        else {
+            input.stepUp();
+            this.simulateNativeInputAndChangeEvents(input);
+        }
+    }
+    simulateNativeInputAndChangeEvents(input) {
+        simulateNativeEvent.simulateNativeEvent(input, 'input');
+        simulateNativeEvent.simulateNativeEvent(input, 'change');
+    }
+    static get delegatesFocus() { return true; }
+    get root() { return index.getElement(this); }
 };
 __decorate$2([
-  onMutation.OnMutation({ childList: true, subtree: true })
+    onMutation.OnMutation({ childList: true, subtree: true })
 ], GuxFormFieldNumber.prototype, "onMutation", null);
-GuxFormFieldNumber.style = guxFormFieldNumberCss;
+GuxFormFieldNumber.style = GuxFormFieldNumberStyle0;
 
 const guxPaginationEllipsisButtonCss = "button{color:var(--gse-ui-button-ghost-default-foregroundColor);cursor:pointer;background:none;border:none}button:hover{color:var(--gse-ui-button-ghost-hover-foregroundColor)}button:focus-visible{border-radius:calc(var(--gse-semantic-focusRing-cornerRadius) - var(--gse-semantic-focusRing-offset));outline:var(--gse-semantic-focusRing-width) solid var(--gse-semantic-color-focus);outline-offset:var(--gse-semantic-focusRing-offset)}button gux-icon{width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm);padding-top:4px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield}";
+const GuxPaginationEllipsisButtonStyle0 = guxPaginationEllipsisButtonCss;
 
 var __decorate$1 = (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;
+    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 GuxPaginationEllipsisButton = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.goToPage = index.createEvent(this, "goToPage", 7);
-    this.isOpen = false;
-    this.totalPages = undefined;
-  }
-  handleKeyDown(event) {
-    const composedPath = event.composedPath();
-    switch (event.key) {
-      case 'Escape':
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.goToPage = index.createEvent(this, "goToPage", 7);
         this.isOpen = false;
-        this.ellipsisButton.focus();
-        break;
-      case 'Tab': {
-        this.isOpen = false;
-        break;
-      }
-      case 'ArrowDown':
-      case 'Enter':
-        if (composedPath.includes(this.ellipsisButton)) {
-          event.preventDefault();
-          this.isOpen = true;
-          this.focusInputElement();
-        }
-        break;
+        this.totalPages = undefined;
     }
-  }
-  handleKeyup(event) {
-    switch (event.key) {
-      case ' ': {
+    handleKeyDown(event) {
         const composedPath = event.composedPath();
-        if (composedPath.includes(this.ellipsisButton)) {
-          this.isOpen = true;
-          this.focusInputElement();
+        switch (event.key) {
+            case 'Escape':
+                this.isOpen = false;
+                this.ellipsisButton.focus();
+                break;
+            case 'Tab': {
+                this.isOpen = false;
+                break;
+            }
+            case 'ArrowDown':
+            case 'Enter':
+                if (composedPath.includes(this.ellipsisButton)) {
+                    event.preventDefault();
+                    this.isOpen = true;
+                    this.focusInputElement();
+                }
+                break;
         }
-        break;
-      }
-    }
-  }
-  toggle() {
-    this.isOpen = !this.isOpen;
-    if (this.isOpen) {
-      this.focusInputElement();
-    }
-  }
-  onClickOutside() {
-    this.isOpen = false;
-  }
-  focusInputElement() {
-    afterNextRender.afterNextRender(() => {
-      this.inputElement.focus();
-    });
-  }
-  applyInputListener() {
-    var _a;
-    (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', (event) => {
-      if (event.key == 'Enter' || event.key == ' ') {
-        event.preventDefault();
-        this.goToPage.emit(event.target.value);
+    }
+    handleKeyup(event) {
+        switch (event.key) {
+            case ' ': {
+                const composedPath = event.composedPath();
+                if (composedPath.includes(this.ellipsisButton)) {
+                    this.isOpen = true;
+                    this.focusInputElement();
+                }
+                break;
+            }
+        }
+    }
+    toggle() {
+        this.isOpen = !this.isOpen;
+        if (this.isOpen) {
+            this.focusInputElement();
+        }
+    }
+    onClickOutside() {
         this.isOpen = false;
-      }
-    });
-  }
-  async componentWillLoad() {
-    this.i18n = await index$1.buildI18nForComponent(this.root, en.translationResources);
-    usage.trackComponent(this.root);
-  }
-  componentDidLoad() {
-    this.applyInputListener();
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("button", { id: "popover-target", type: "button", ref: el => (this.ellipsisButton = el), onClick: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, index.h("gux-icon", { screenreaderText: this.i18n('goToPage'), "icon-name": "menu-kebab-horizontal" })), index.h("gux-tooltip", { for: "popover-target" }, this.i18n('goToPage')), index.h("gux-popover", { "is-open": this.isOpen, for: "popover-target" }, index.h("span", { slot: "title" }, this.i18n('goToPage')), index.h("gux-form-field-number", null, index.h("input", { slot: "input", type: "number", ref: el => (this.inputElement = el), min: "1", max: this.totalPages, value: "1" }), index.h("label", { slot: "label" })))));
-  }
-  get root() { return index.getElement(this); }
+    }
+    focusInputElement() {
+        afterNextRender.afterNextRender(() => {
+            this.inputElement.focus();
+        });
+    }
+    applyInputListener() {
+        var _a;
+        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', (event) => {
+            if (event.key == 'Enter' || event.key == ' ') {
+                event.preventDefault();
+                this.goToPage.emit(event.target.value);
+                this.isOpen = false;
+            }
+        });
+    }
+    async componentWillLoad() {
+        this.i18n = await index$1.buildI18nForComponent(this.root, en.translationResources);
+        usage.trackComponent(this.root);
+    }
+    componentDidLoad() {
+        this.applyInputListener();
+    }
+    render() {
+        return (index.h(index.Host, { key: '1dcf954fed276aa5e8e299426829b93186629588' }, index.h("button", { key: '5ecef232aa7fa680b9301e036992e0afb5d461f7', id: "popover-target", type: "button", ref: el => (this.ellipsisButton = el), onClick: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, index.h("gux-icon", { key: 'f46565abe4943328e03f485f2418c085caa54126', screenreaderText: this.i18n('goToPage'), "icon-name": "menu-kebab-horizontal" })), index.h("gux-tooltip", { key: 'b03cfe11ffb75843c7a5a499c054e42ec3b6d936', for: "popover-target" }, this.i18n('goToPage')), index.h("gux-popover", { key: '9e7a733f1d2630de3568dad74e2eea6c1169bd77', "is-open": this.isOpen, for: "popover-target" }, index.h("span", { key: '5589bf322c5cc85fa4c2abb41aa8bf7f992e868f', slot: "title" }, this.i18n('goToPage')), index.h("gux-form-field-number", { key: 'c8e505892c77da6fc986631ae85cd9202aecdbe8' }, index.h("input", { key: '0a3ad78c3598e2c25821807759c771a7cbf61974', slot: "input", type: "number", ref: el => (this.inputElement = el), min: "1", max: this.totalPages, value: "1" }), index.h("label", { key: 'd0c6dc41fd19af21742b4a71f502bd487bbd68a5', slot: "label" })))));
+    }
+    get root() { return index.getElement(this); }
 };
 __decorate$1([
-  onClickOutside.OnClickOutside({ triggerEvents: 'mousedown' })
+    onClickOutside.OnClickOutside({ triggerEvents: 'mousedown' })
 ], GuxPaginationEllipsisButton.prototype, "onClickOutside", null);
-GuxPaginationEllipsisButton.style = guxPaginationEllipsisButtonCss;
+GuxPaginationEllipsisButton.style = GuxPaginationEllipsisButtonStyle0;
 
 const guxPopoverCss = ".gux-popover-wrapper{position:absolute;top:0;left:0;z-index:var(--gse-semantic-zIndex-popover);display:inline-block;min-width:280px;padding:var(--gse-ui-popover-gap);background-color:var(--gse-ui-popover-backgroundColor);border-radius:var(--gse-ui-popover-borderRadius);box-shadow:var(--gse-ui-popover-boxShadow-x) var(--gse-ui-popover-boxShadow-y) var(--gse-ui-popover-boxShadow-blur) var(--gse-ui-popover-boxShadow-spread) var(--gse-ui-tooltip-boxShadow-color)}.gux-popover-wrapper.gux-hidden{display:none}.gux-popover-wrapper .gux-arrow{position:absolute;width:var(--gse-ui-popover-anchor-width);height:var(--gse-ui-popover-anchor-width);background:var(--gse-ui-popover-backgroundColor);border-radius:var(--gse-ui-flyoutMenu-arrow-borderRadius)}.gux-popover-wrapper .gux-popover-header{display:flex;flex-direction:row;place-content:center space-between;align-items:center;padding-bottom:var(--gse-ui-popover-gap);font-family:var(--gse-ui-popover-title-text-fontFamily);font-size:var(--gse-ui-popover-title-text-fontSize);font-weight:var(--gse-ui-popover-title-text-fontWeight);line-height:var(--gse-ui-popover-title-text-lineHeight);color:--gse-ui-popover-headercolor}.gux-popover-wrapper gux-dismiss-button{float:right}";
+const GuxPopoverStyle0 = guxPopoverCss;
 
 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;
+    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 GuxPopover = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.guxdismiss = index.createEvent(this, "guxdismiss", 7);
-    this.for = undefined;
-    this.position = 'bottom';
-    this.displayDismissButton = undefined;
-    this.closeOnClickOutside = false;
-    this.isOpen = false;
-  }
-  onKeyDown(event) {
-    switch (event.key) {
-      case 'Escape':
-        this.dismiss();
-        break;
-    }
-  }
-  checkForClickOutside(event) {
-    const clickPath = event.composedPath();
-    const forElement = findElementById.findElementById(this.root, this.for);
-    const clickedForElement = clickPath.includes(forElement);
-    if ((this.closeOnClickOutside || !this.displayDismissButton) &&
-      this.isOpen &&
-      !clickedForElement) {
-      this.dismiss();
-    }
-  }
-  get titleSlot() {
-    return getSlot.getSlot(this.root, 'title');
-  }
-  runUpdatePosition() {
-    if (this.root.isConnected) {
-      this.cleanupUpdatePosition = floatingUi_dom_esm.autoUpdate(findElementById.findElementById(this.root, this.for), this.popupElement, () => this.updatePosition(), {
-        ancestorScroll: true,
-        elementResize: true,
-        animationFrame: true,
-        ancestorResize: true
-      });
-    }
-    else {
-      this.disconnectedCallback();
-    }
-  }
-  updatePosition() {
-    const forElement = findElementById.findElementById(this.root, this.for);
-    // This is 13 because this makes the arrow look aligned
-    const arrowLen = 13;
-    if (this.popupElement && forElement) {
-      void floatingUi_dom_esm.computePosition(forElement, this.popupElement, {
-        placement: this.position,
-        middleware: [
-          floatingUi_dom_esm.offset(7),
-          floatingUi_dom_esm.flip(),
-          floatingUi_dom_esm.shift(),
-          floatingUi_dom_esm.arrow({
-            element: this.arrowElement,
-            padding: 16
-          })
-        ]
-      }).then(({ x, y, middlewareData, placement }) => {
-        Object.assign(this.popupElement.style, {
-          left: `${x}px`,
-          top: `${y}px`
-        });
-        const side = placement.split('-')[0];
-        const staticSide = {
-          top: 'bottom',
-          right: 'left',
-          bottom: 'top',
-          left: 'right'
-        }[side];
-        if (middlewareData.arrow) {
-          const { x, y } = middlewareData.arrow;
-          this.popupElement.setAttribute('data-placement', placement);
-          Object.assign(this.arrowElement.style, {
-            left: x != null ? `${x}px` : '',
-            top: y != null ? `${y}px` : '',
-            right: '',
-            bottom: '',
-            [staticSide]: `${-arrowLen / 2}px`,
-            transform: 'rotate(45deg)'
-          });
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.guxdismiss = index.createEvent(this, "guxdismiss", 7);
+        this.for = undefined;
+        this.position = 'bottom';
+        this.displayDismissButton = undefined;
+        this.closeOnClickOutside = false;
+        this.isOpen = false;
+    }
+    onKeyDown(event) {
+        switch (event.key) {
+            case 'Escape':
+                this.dismiss();
+                break;
+        }
+    }
+    checkForClickOutside(event) {
+        const clickPath = event.composedPath();
+        const forElement = findElementById.findElementById(this.root, this.for);
+        const clickedForElement = clickPath.includes(forElement);
+        if ((this.closeOnClickOutside || !this.displayDismissButton) &&
+            this.isOpen &&
+            !clickedForElement) {
+            this.dismiss();
+        }
+    }
+    get titleSlot() {
+        return getSlot.getSlot(this.root, 'title');
+    }
+    runUpdatePosition() {
+        if (this.root.isConnected) {
+            this.cleanupUpdatePosition = floatingUi_dom_esm.autoUpdate(findElementById.findElementById(this.root, this.for), this.popupElement, () => this.updatePosition(), {
+                ancestorScroll: true,
+                elementResize: true,
+                animationFrame: true,
+                ancestorResize: true
+            });
         }
-      });
-    }
-  }
-  dismiss() {
-    const dismissEvent = this.guxdismiss.emit();
-    if (!dismissEvent.defaultPrevented) {
-      this.isOpen = false;
-    }
-  }
-  connectedCallback() {
-    usage.trackComponent(this.root, { variant: this.position });
-  }
-  componentDidLoad() {
-    if (this.isOpen) {
-      this.runUpdatePosition();
-    }
-  }
-  componentDidUpdate() {
-    if (this.isOpen) {
-      this.runUpdatePosition();
-    }
-    else if (this.cleanupUpdatePosition) {
-      this.cleanupUpdatePosition();
-    }
-  }
-  disconnectedCallback() {
-    if (this.cleanupUpdatePosition) {
-      this.cleanupUpdatePosition();
-    }
-  }
-  renderDismissButton() {
-    if (this.displayDismissButton) {
-      return (index.h("gux-dismiss-button", { onClick: this.dismiss.bind(this), position: "inherit" }));
-    }
-  }
-  render() {
-    return (index.h("div", { ref: (el) => (this.popupElement = el), class: {
-        'gux-hidden': !this.isOpen,
-        'gux-popover-wrapper': true
-      }, "data-placement": true }, index.h("div", { ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), index.h("div", { class: { 'gux-popover-header': Boolean(this.titleSlot) } }, index.h("slot", { name: "title" }), this.renderDismissButton()), index.h("div", { class: "gux-popover-content" }, index.h("slot", null))));
-  }
-  get root() { return index.getElement(this); }
+        else {
+            this.disconnectedCallback();
+        }
+    }
+    updatePosition() {
+        const forElement = findElementById.findElementById(this.root, this.for);
+        // This is 13 because this makes the arrow look aligned
+        const arrowLen = 13;
+        if (this.popupElement && forElement) {
+            void floatingUi_dom_esm.computePosition(forElement, this.popupElement, {
+                placement: this.position,
+                middleware: [
+                    floatingUi_dom_esm.offset(7),
+                    floatingUi_dom_esm.flip(),
+                    floatingUi_dom_esm.shift(),
+                    floatingUi_dom_esm.arrow({
+                        element: this.arrowElement,
+                        padding: 16
+                    })
+                ]
+            }).then(({ x, y, middlewareData, placement }) => {
+                Object.assign(this.popupElement.style, {
+                    left: `${x}px`,
+                    top: `${y}px`
+                });
+                const side = placement.split('-')[0];
+                const staticSide = {
+                    top: 'bottom',
+                    right: 'left',
+                    bottom: 'top',
+                    left: 'right'
+                }[side];
+                if (middlewareData.arrow) {
+                    const { x, y } = middlewareData.arrow;
+                    this.popupElement.setAttribute('data-placement', placement);
+                    Object.assign(this.arrowElement.style, {
+                        left: x != null ? `${x}px` : '',
+                        top: y != null ? `${y}px` : '',
+                        right: '',
+                        bottom: '',
+                        [staticSide]: `${-arrowLen / 2}px`,
+                        transform: 'rotate(45deg)'
+                    });
+                }
+            });
+        }
+    }
+    dismiss() {
+        const dismissEvent = this.guxdismiss.emit();
+        if (!dismissEvent.defaultPrevented) {
+            this.isOpen = false;
+        }
+    }
+    connectedCallback() {
+        usage.trackComponent(this.root, { variant: this.position });
+    }
+    componentDidLoad() {
+        if (this.isOpen) {
+            this.runUpdatePosition();
+        }
+    }
+    componentDidUpdate() {
+        if (this.isOpen) {
+            this.runUpdatePosition();
+        }
+        else if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
+    }
+    disconnectedCallback() {
+        if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
+    }
+    renderDismissButton() {
+        if (this.displayDismissButton) {
+            return (index.h("gux-dismiss-button", { onClick: this.dismiss.bind(this), position: "inherit" }));
+        }
+    }
+    render() {
+        return (index.h("div", { key: '632376bddf217f1b556696b406ebd483f6900bad', ref: (el) => (this.popupElement = el), class: {
+                'gux-hidden': !this.isOpen,
+                'gux-popover-wrapper': true
+            }, "data-placement": true }, index.h("div", { key: 'f11882bb2f9781d6fce1620e8ad585978d904e16', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), index.h("div", { key: 'b05186e1ac2c1856d145a2431504eef3a4847e00', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, index.h("slot", { key: '788bdae710fe3845219d8378a39020a7f50fa79d', name: "title" }), this.renderDismissButton()), index.h("div", { key: '000abfe8718542ba7bafe9b7c4c0b37ce749bdd3', class: "gux-popover-content" }, index.h("slot", { key: 'b5e435dcdc35e908b1ce19abe98c1c30e3d05d92' }))));
+    }
+    get root() { return index.getElement(this); }
 };
 __decorate([
-  onClickOutside.OnClickOutside({ triggerEvents: 'mousedown' })
+    onClickOutside.OnClickOutside({ triggerEvents: 'mousedown' })
 ], GuxPopover.prototype, "checkForClickOutside", null);
-GuxPopover.style = guxPopoverCss;
+GuxPopover.style = GuxPopoverStyle0;
 
 exports.gux_form_field_number = GuxFormFieldNumber;
 exports.gux_pagination_ellipsis_button = GuxPaginationEllipsisButton;