genesys-spark-components 4.155.0 → 4.156.0

package/dist/collection/components/stable/gux-listbox-multi/gux-create-option/gux-create-option.js

@@ -26,15 +26,17 @@ export class GuxCreateOption {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
         this.root.id = this.root.id || randomHTMLId('gux-option-multi');
     }
+    // COMUI-3905: Without this method the dropdown multi's add option button triggers an infinite loop when it is hidden adter being displayed.
+    async componentWillRender() { }
     renderCustomOptionInstructions() {
         return (h("span", { class: "gux-screenreader" }, this.i18n('createCustomOptionInstructions')));
     }
     render() {
-        return (h(Host, { key: '849de521bcfdd1bcfbe921d94162e64799acc81e', role: "option", "aria-selected": false, class: {
+        return (h(Host, { key: '5923b19a166b698b50e5ac02f459ab397fd8f210', role: "option", "aria-selected": false, class: {
                 'gux-active': this.active,
                 'gux-hovered': this.hovered,
                 'gux-filtered': this.filtered
-            } }, h("div", { key: '8688d245735437cee0ff51221ceaa2b966efd3bf', class: "gux-option" }, h("gux-icon", { key: '336a4510da3a5c8e1d51477af49851871cafaaf9', decorative: true, "icon-name": "fa/plus-regular", size: "small" }), h("div", { key: 'd0e0287cbd4049098173925590ae0c9c5952c29b', class: "gux-create-text" }, this.i18n('createOption', {
+            } }, h("div", { key: 'e40509866e7b082d270e2479bfea61253e57eca2', class: "gux-option" }, h("gux-icon", { key: 'a9ee42b9a7f4e587c8f447880a2e3ff067038254', decorative: true, "icon-name": "fa/plus-regular", size: "small" }), h("div", { key: '51545fd248d82632c543b75acc52fbfc88ce596b', class: "gux-create-text" }, this.i18n('createOption', {
             optionValue: this.value
         })), this.renderCustomOptionInstructions())));
     }
@@ -54,6 +56,7 @@ export class GuxCreateOption {
         return {
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -68,11 +71,11 @@ export class GuxCreateOption {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -87,12 +90,12 @@ export class GuxCreateOption {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "hidden": {
                 "type": "boolean",
+                "attribute": "hidden",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -107,12 +110,12 @@ export class GuxCreateOption {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hidden",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "filtered": {
                 "type": "boolean",
+                "attribute": "filtered",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -127,7 +130,6 @@ export class GuxCreateOption {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "filtered",
                 "reflect": false,
                 "defaultValue": "true"
             }

package/dist/collection/components/stable/gux-listbox-multi/gux-listbox-multi.js

@@ -244,6 +244,7 @@ export class GuxListboxMulti {
         return {
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -258,11 +259,11 @@ export class GuxListboxMulti {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false
             },
             "loading": {
                 "type": "boolean",
+                "attribute": "loading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -277,12 +278,12 @@ export class GuxListboxMulti {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "loading",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "filter": {
                 "type": "string",
+                "attribute": "filter",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -297,12 +298,12 @@ export class GuxListboxMulti {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "filter",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "textInput": {
                 "type": "string",
+                "attribute": "text-input",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -317,12 +318,12 @@ export class GuxListboxMulti {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "text-input",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "filterType": {
                 "type": "string",
+                "attribute": "filter-type",
                 "mutable": false,
                 "complexType": {
                     "original": "GuxFilterTypes",
@@ -343,12 +344,12 @@ export class GuxListboxMulti {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "filter-type",
                 "reflect": false,
                 "defaultValue": "'none'"
             },
             "emptyMessage": {
                 "type": "string",
+                "attribute": "empty-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -363,11 +364,11 @@ export class GuxListboxMulti {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "empty-message",
                 "reflect": false
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -382,12 +383,12 @@ export class GuxListboxMulti {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "hasExactMatch": {
                 "type": "boolean",
+                "attribute": "has-exact-match",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -402,7 +403,6 @@ export class GuxListboxMulti {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "has-exact-match",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/dist/collection/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.js

@@ -82,6 +82,7 @@ export class GuxOptionMulti {
         return {
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -96,11 +97,11 @@ export class GuxOptionMulti {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -115,12 +116,12 @@ export class GuxOptionMulti {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "selected": {
                 "type": "boolean",
+                "attribute": "selected",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -135,12 +136,12 @@ export class GuxOptionMulti {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "selected",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -155,12 +156,12 @@ export class GuxOptionMulti {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "filtered": {
                 "type": "boolean",
+                "attribute": "filtered",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -175,12 +176,12 @@ export class GuxOptionMulti {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "filtered",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "custom": {
                 "type": "boolean",
+                "attribute": "custom",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -195,7 +196,6 @@ export class GuxOptionMulti {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/dist/collection/components/stable/gux-loading-message/gux-loading-message.js

@@ -10,7 +10,7 @@ export class GuxLoadingMessage {
         trackComponent(this.root);
     }
     render() {
-        return (h("div", { key: 'f1cc2ae7ad4adbba0585492ddb510d0c6e5eebec', class: "gux-container", role: "alert", "aria-live": "assertive" }, h("div", { key: '8e07c75e9ce20ed3b7791ed5896b37f10d8dfb88', class: "gux-progress" }, h("slot", { key: '9ce54e9d0df89954603f7e627828eea749561c6d', name: "progress" })), h("div", { key: 'ba6a1a0e4908946351fc63cf28b796cfe8cca4f1', class: "gux-primary-message" }, h("slot", { key: '318a82e74471d776bb1421870fce0d51b1edd4b3', name: "primary-message" })), h("div", { key: '6b91b1dc2c3a6f6f0ed3ad096c47f75be7e3092c', class: "gux-additional-guidance" }, h("slot", { key: '96564203a3f6aeea8255eb049a7c3ce8e70a6d2f', name: "additional-guidance" }))));
+        return (h("div", { key: 'e25839bd66c76c1a7815d1a942427937782e09cf', class: "gux-container", role: "alert", "aria-live": "assertive" }, h("div", { key: '3b898f4e0da0d14dc9a11650816a6a378a58a822', class: "gux-progress" }, h("slot", { key: '8616138d449823589247a86f11a1d3bf2ce49209', name: "progress" })), h("div", { key: '615aad13fc71e5beb1af0fb4acae36d94f94556e', class: "gux-primary-message" }, h("slot", { key: 'f58a816704e34aac8b871898c584183cd3c69ce1', name: "primary-message" })), h("div", { key: '138758f5b3d09f2a03ac9fb9e806ba0b94deed6e', class: "gux-additional-guidance" }, h("slot", { key: '16f2698501b6afa2b47080fe44f640509d93ccd5', name: "additional-guidance" }))));
     }
     static get is() { return "gux-loading-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-modal/gux-modal.js

@@ -76,7 +76,7 @@ export class GuxModal {
     render() {
         const hasModalTitleSlot = this.hasModalTitleSlot();
         const titleID = randomHTMLId();
-        return (h("dialog", { key: 'f3889c81a92b660d158a6ccfb65ca546d5c6e7b6', onClose: this.onCloseHandler.bind(this), ref: el => (this.dialogElement = el), "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: '6ba7afa02e72b5299e58a5135454db09b9e4fb9a', class: `gux-modal-container gux-${this.size}` }, h("gux-dismiss-button", { key: 'f8601f90fc13fc7c1728f7aa26cb2b3d87f6a96c', onClick: this.onDismissHandler.bind(this) }), hasModalTitleSlot && this.renderTitle(titleID), h("div", { key: '984f25ca3fb4d43bd7c2cd48c881ff17c1a13be3', class: "gux-modal-content" }, h("p", { key: 'b151c66c1cb5071b315812ce7f579d700ab5f7f2' }, h("slot", { key: 'c617e8eede9dfa0e0569409bda624db3043755dc', name: "content" }))), this.renderFooter())));
+        return (h("dialog", { key: '5244d52662f2618bb1a5886d97cc6277a9b01427', onClose: this.onCloseHandler.bind(this), ref: el => (this.dialogElement = el), "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: 'b67be300995b1c85f22782f55aca56b22d6a847d', class: `gux-modal-container gux-${this.size}` }, h("gux-dismiss-button", { key: '1efe65d8759750804f00e5af9d50dd47804b7b5d', onClick: this.onDismissHandler.bind(this) }), hasModalTitleSlot && this.renderTitle(titleID), h("div", { key: '183ad0b0e68fc486be24aa0a31a22b0315bea72e', class: "gux-modal-content" }, h("p", { key: '09cee736a70168dfefe86abc560813ceeb25fc03' }, h("slot", { key: 'cdf4d5222f21c229c6a7d0bd02cd96512e005e8e', name: "content" }))), this.renderFooter())));
     }
     renderTitle(titleID) {
         return (h("h1", { class: "gux-modal-header", id: titleID }, h("slot", { name: "title" })));
@@ -111,6 +111,7 @@ export class GuxModal {
         return {
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "GuxModalSize",
@@ -131,12 +132,12 @@ export class GuxModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'dynamic'"
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -151,7 +152,6 @@ export class GuxModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/dist/collection/components/stable/gux-page-loading-spinner/gux-page-loading-spinner.js

@@ -5,7 +5,7 @@ export class GuxPageLoadingSpinner {
         trackComponent(this.root);
     }
     render() {
-        return (h("gux-radial-loading", { key: '7f0ca49b0d4a565b137e3832bdc4da80eb2393d6', class: "gux-spinner", "screenreader-text": this.screenreaderText, context: "full-page" }));
+        return (h("gux-radial-loading", { key: 'c7b94a36199c69318067bb31917d17a951bed4ad', class: "gux-spinner", "screenreader-text": this.screenreaderText, context: "full-page" }));
     }
     static get is() { return "gux-page-loading-spinner"; }
     static get encapsulation() { return "shadow"; }
@@ -23,6 +23,7 @@ export class GuxPageLoadingSpinner {
         return {
             "screenreaderText": {
                 "type": "string",
+                "attribute": "screenreader-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -37,7 +38,6 @@ export class GuxPageLoadingSpinner {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "screenreader-text",
                 "reflect": false
             }
         };

package/dist/collection/components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-buttons.js

@@ -58,7 +58,7 @@ export class GuxPaginationButtons {
         this.i18n = await buildI18nForComponent(this.root, paginationResources);
     }
     render() {
-        return (h("div", { key: '4ba612a8f987d7f48ef8fc83de55e75398068cb7', class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { key: '70417a9af92f81fc9d870c953e7e889d4df76bc0', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: 'e7452e6c4674db0de54210913ffe693d46f6e772', accent: "ghost", "icon-only": true }, h("button", { key: 'e369561b47d9ed2cf1eb27f7c15f00c4a15119a4', title: this.i18n('firstPage'), disabled: this.onFirstPage || this.disabled, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { key: '1921f866f74b115b3cc3195aed7d9a403fc1440b', size: "small", decorative: true, "icon-name": "fa/chevrons-left-regular" }))), h("gux-button-slot", { key: '43cab0d7b2e744a43299208680bb925691eebf76', accent: "ghost", "icon-only": true }, h("button", { key: '212807643e83512e4643b5d1cd4195cfc405339a', title: this.i18n('previousPage'), disabled: this.onFirstPage || this.disabled, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { key: '0b2e853dae3a7cc28af0f6addbf6914912a79f13', size: "small", decorative: true, "icon-name": "custom/chevron-left-small-regular" })))), this.getPageNavigation(), h("div", { key: 'a4b2592d15f2c18ce0dac19c941f286de8704124', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '1d341c607224aa6f251f9b4c5206b4da4d5fe67d', accent: "ghost", "icon-only": true }, h("button", { key: 'bd53bef3f334494f04947df935fe55b7a9c140fa', title: this.i18n('nextPage'), disabled: this.onLastPage || this.disabled, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { key: '0d9de0f539b159d3f52faf5692b53a6f0c19ee47', size: "small", decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("gux-button-slot", { key: 'b20fc1b50d8da2d9ddf4dc9ccc4f87cf4b24e545', accent: "ghost", "icon-only": true }, h("button", { key: '5fbebac0c64ca8cee0aaf57f522b33a520dca5bc', title: this.i18n('lastPage'), disabled: this.onLastPage || this.disabled, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { key: '6ccf5f8232e5c372646c6333442ceacd156de426', size: "small", decorative: true, "icon-name": "fa/chevrons-right-regular" }))))));
+        return (h("div", { key: '99d79cba0e16a1b74e914e4d0f0c02c3b4a73d0e', class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { key: 'efe76116dd1478094927617059457f681d0bd6c7', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: 'dceec181beb25f217be3d8a0a720a9370c342510', accent: "ghost", "icon-only": true }, h("button", { key: '5f0466be061263ff91d0866f23eb21e5a708cbc8', title: this.i18n('firstPage'), disabled: this.onFirstPage || this.disabled, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { key: 'd538e9965f9d1066722ae31f536ee10b60b868e9', size: "small", decorative: true, "icon-name": "fa/chevrons-left-regular" }))), h("gux-button-slot", { key: 'f53bb6a0577856540f9c09482a7600a2ee28a46f', accent: "ghost", "icon-only": true }, h("button", { key: '53ae1dc112b8c4084cd73d54ff3efe2ea97df3d6', title: this.i18n('previousPage'), disabled: this.onFirstPage || this.disabled, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { key: 'b57b1ca6a1a8789fbc928aa1bd57bc2cb1aa029b', size: "small", decorative: true, "icon-name": "custom/chevron-left-small-regular" })))), this.getPageNavigation(), h("div", { key: 'da0251b955fec752c91a3f70f5deed1147aa9628', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '311c7e2c1912981031123ebb5ef3b252e09c8024', accent: "ghost", "icon-only": true }, h("button", { key: 'c1b788b8e3598ff03eaeff1d1387d675c55e3692', title: this.i18n('nextPage'), disabled: this.onLastPage || this.disabled, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { key: 'e124103cf66f28053f0ea8e98a69a15fee145ca4', size: "small", decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("gux-button-slot", { key: '1fc691395a2e8c512c565f8809fb1c3c282a2e2b', accent: "ghost", "icon-only": true }, h("button", { key: '776866e1d667ee62ea65177c479227fa5f33d79c', title: this.i18n('lastPage'), disabled: this.onLastPage || this.disabled, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { key: '1a937000dcf86f0fb5323fae3053e210c7f58086', size: "small", decorative: true, "icon-name": "fa/chevrons-right-regular" }))))));
     }
     static get is() { return "gux-pagination-buttons"; }
     static get originalStyleUrls() {
@@ -75,6 +75,7 @@ export class GuxPaginationButtons {
         return {
             "currentPage": {
                 "type": "number",
+                "attribute": "current-page",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -89,11 +90,11 @@ export class GuxPaginationButtons {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "current-page",
                 "reflect": false
             },
             "totalPages": {
                 "type": "number",
+                "attribute": "total-pages",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -108,11 +109,11 @@ export class GuxPaginationButtons {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "total-pages",
                 "reflect": false
             },
             "layout": {
                 "type": "string",
+                "attribute": "layout",
                 "mutable": false,
                 "complexType": {
                     "original": "GuxPaginationLayout",
@@ -133,12 +134,12 @@ export class GuxPaginationButtons {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "layout",
                 "reflect": false,
                 "defaultValue": "'advanced'"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -153,7 +154,6 @@ export class GuxPaginationButtons {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/dist/collection/components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-ellipsis-button/gux-pagination-ellipsis-button.js

@@ -96,10 +96,10 @@ export class GuxPaginationEllipsisButton {
     }
     render() {
         return [
-            h("gux-button", { key: '3b4e01afe3cc52e4f15bd06beaf246ddb6022347', 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() }, h("gux-icon", { key: '4dd184f3df45a8217662c6a2212a43ed8b8dc637', screenreaderText: this.i18n('goToPage'), "icon-name": "fa/ellipsis-regular", size: "small" })),
-            h("gux-tooltip", { key: '7c5e0ae742547ebb974acd5893d32cf1f7c7a160', for: "popover-target" }, h("div", { key: 'ab2acb2eaddf719a43100a02961ade72fb58adac', slot: "content" }, this.i18n('goToPage'))),
-            h("gux-popover", { key: 'fd4dfdb6366ff55b0bb2cf89cb44ba4619c512e4', "is-open": this.isOpen, for: "popover-target" }, h("span", { key: '9df657db624e86018296c02bb1af9601414cef7c', slot: "title" }, this.i18n('goToPage')), h("gux-form-field-number", { key: 'bdd0cbe91e36e28dbcd5f24312f287f1e1ec4441' }, h("input", { key: 'a229de63ad7e45af3526dc547765dfa19fdacf6e', 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() }), h("label", { key: '2300839502e8b3d3c267ef8a8e46fe349315db57', slot: "label" })))
+            h("gux-button", { key: '454441358989e2ef8054889e263e714a74b98411', 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() }, h("gux-icon", { key: '0e56ff1b9756228976929d4db5d4da5edc5437a2', screenreaderText: this.i18n('goToPage'), "icon-name": "fa/ellipsis-regular", size: "small" })),
+            h("gux-tooltip", { key: '2eed7f75f9de5709ec09f756250c93a5c6d6852e', for: "popover-target" }, h("div", { key: 'd9e02b0f0f8abf8c0d18387006d534a6cb2f5d2b', slot: "content" }, this.i18n('goToPage'))),
+            h("gux-popover", { key: 'dfc6e87c29e082fe2de4e7e5ca4504996fdb648b', "is-open": this.isOpen, for: "popover-target" }, h("span", { key: '0dff29cc2478921d133c73c56922ad42f98dc309', slot: "title" }, this.i18n('goToPage')), h("gux-form-field-number", { key: '910764919a171ec5d15215856011353acd23079c' }, h("input", { key: 'f12b964eafa335c9626d4cf5978e7a7ab68ed196', 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() }), h("label", { key: '5175b0b5d341d49b770e29cb80ae9c5d73a35f42', slot: "label" })))
         ];
     }
     static get is() { return "gux-pagination-ellipsis-button"; }
@@ -118,6 +118,7 @@ export class GuxPaginationEllipsisButton {
         return {
             "totalPages": {
                 "type": "number",
+                "attribute": "total-pages",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -132,11 +133,11 @@ export class GuxPaginationEllipsisButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "total-pages",
                 "reflect": false
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -151,7 +152,6 @@ export class GuxPaginationEllipsisButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/dist/collection/components/stable/gux-pagination/gux-pagination-item-counts/gux-pagination-item-counts.js

@@ -28,10 +28,10 @@ export class GuxPaginationItemCounts {
         }
     }
     render() {
-        return (h("div", { key: 'dde821c2d38de4d218161e1b6fe0f072daa22a92', class: "gux-pagination-item-counts-container" }, h("span", { key: '8c692247c3f2fd41a880a168dd9061af715809bb', class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
+        return (h("div", { key: '93d9be77bfd0298fe1fcff5c283aee2b68968d61', class: "gux-pagination-item-counts-container" }, h("span", { key: '2b57a6eabd3be23e3e76b4bd6fb8f6ab6fe0b81b', class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
             firstItem: this.firstItem,
             lastItem: this.lastItem
-        })), h("span", { key: '26486c3133559f536ec911fa69783b7db3d5b69d', class: "gux-pagination-item-counts-total" }, this.getPaginationItemCountsRange())));
+        })), h("span", { key: '80b886d6e84a37792490231cbb87a4936c4c9929', class: "gux-pagination-item-counts-total" }, this.getPaginationItemCountsRange())));
     }
     static get is() { return "gux-pagination-item-counts"; }
     static get originalStyleUrls() {
@@ -48,6 +48,7 @@ export class GuxPaginationItemCounts {
         return {
             "totalItems": {
                 "type": "number",
+                "attribute": "total-items",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -62,12 +63,12 @@ export class GuxPaginationItemCounts {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "total-items",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "currentPage": {
                 "type": "number",
+                "attribute": "current-page",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -82,12 +83,12 @@ export class GuxPaginationItemCounts {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "current-page",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "itemsPerPage": {
                 "type": "number",
+                "attribute": "items-per-page",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -102,7 +103,6 @@ export class GuxPaginationItemCounts {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "items-per-page",
                 "reflect": false,
                 "defaultValue": "25"
             }

package/dist/collection/components/stable/gux-pagination/gux-pagination-items-per-page/gux-pagination-items-per-page.js

@@ -20,7 +20,7 @@ export class GuxPaginationItemsPerPage {
             }) }, h("gux-listbox", { "aria-label": this.i18n('itemsPerPage') }, h("gux-option", { value: "25" }, "25"), h("gux-option", { value: "50" }, "50"), h("gux-option", { value: "75" }, "75"), h("gux-option", { value: "100" }, "100"))));
     }
     render() {
-        return (h("div", { key: '68543c831b833fa2cb62b7f4169a8f792c64b191', class: "gux-pagination-items-per-page-container" }, h("div", { key: '893dcddb14c1f3b19def176fd2f7498c626e2f2b', class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), h("div", { key: '7eb6534f81474716396b0bd294b192ad79049d35', class: "gux-pagination-per-page" }, this.i18n('perPage'))));
+        return (h("div", { key: '01d977b62514ab6b16ec88caf74918fff37558b0', class: "gux-pagination-items-per-page-container" }, h("div", { key: '7536dc6a93b49cf4cfedc665a980ba96a1eee168', class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), h("div", { key: '1e5134d36a1312b59b48ce4eee1d36f437580100', class: "gux-pagination-per-page" }, this.i18n('perPage'))));
     }
     static get is() { return "gux-pagination-items-per-page"; }
     static get originalStyleUrls() {
@@ -37,6 +37,7 @@ export class GuxPaginationItemsPerPage {
         return {
             "itemsPerPage": {
                 "type": "number",
+                "attribute": "items-per-page",
                 "mutable": false,
                 "complexType": {
                     "original": "GuxItemsPerPage",
@@ -57,12 +58,12 @@ export class GuxPaginationItemsPerPage {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "items-per-page",
                 "reflect": false,
                 "defaultValue": "25"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -77,7 +78,6 @@ export class GuxPaginationItemsPerPage {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/dist/collection/components/stable/gux-pagination/gux-pagination.js

@@ -94,7 +94,7 @@ export class GuxPagination {
         }, 500);
     }
     render() {
-        return (h("div", { key: '936d60bd9e154e2028c1054b8feada2d70853437', class: "gux-pagination-container" }, h("div", { key: '56ab91c756bd4448bbbc940ee1c293ae4c0b6b28', class: "gux-pagination-info" }, h("gux-pagination-item-counts", { key: '6eebd691ccada4c71486f51ab82dd18fe19c9ae3', "total-items": this.totalItems, "current-page": this.currentPage, "items-per-page": this.itemsPerPage }), this.displayedLayout === 'advanced' && (h("gux-pagination-items-per-page", { key: '3c0dd88b7ce8f6a3d517bfa84da208871b9c99c8', disabled: this.disabled, "items-per-page": this.itemsPerPage, onInternalitemsperpagechange: this.handleInternalitemsperpagechange.bind(this) }))), h("div", { key: '3a3a1d82003ac4c995ec1568becd793b4f00ec62', class: "gux-pagination-spacer" }), h("div", { key: 'f4144a788f5d732401448c2f39ed54dad58a5363', class: "gux-pagination-change" }, h("gux-pagination-buttons", { key: 'f435378462aa052d37780cdc331d512afdaa59ac', disabled: this.disabled, layout: this.displayedLayout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
+        return (h("div", { key: 'd5e8052ee365f5925afd4e09ab5fea26137b6600', class: "gux-pagination-container" }, h("div", { key: 'e032223958899b83e73ae8e30d134f0ab619600d', class: "gux-pagination-info" }, h("gux-pagination-item-counts", { key: 'b0fb1f1ed6fc6caf72cffff2cf7b511b41d22150', "total-items": this.totalItems, "current-page": this.currentPage, "items-per-page": this.itemsPerPage }), this.displayedLayout === 'advanced' && (h("gux-pagination-items-per-page", { key: '8c32b9bb5afc9bd7313a6bc0c2bcc26ba2e211eb', disabled: this.disabled, "items-per-page": this.itemsPerPage, onInternalitemsperpagechange: this.handleInternalitemsperpagechange.bind(this) }))), h("div", { key: 'f68268db452ab5901cbb8aa4e6b4de312905fd4c', class: "gux-pagination-spacer" }), h("div", { key: '18a5657a0b3cc0c76a1304b6e29552aeb9cb089d', class: "gux-pagination-change" }, h("gux-pagination-buttons", { key: '6d5d03e9df4c4add8dea0c70b0446167887af369', disabled: this.disabled, layout: this.displayedLayout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
     }
     static get is() { return "gux-pagination"; }
     static get encapsulation() { return "shadow"; }
@@ -112,6 +112,7 @@ export class GuxPagination {
         return {
             "layout": {
                 "type": "string",
+                "attribute": "layout",
                 "mutable": false,
                 "complexType": {
                     "original": "GuxPaginationLayout",
@@ -132,12 +133,12 @@ export class GuxPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "layout",
                 "reflect": false,
                 "defaultValue": "'advanced'"
             },
             "currentPage": {
                 "type": "number",
+                "attribute": "current-page",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -152,12 +153,12 @@ export class GuxPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "current-page",
                 "reflect": false,
                 "defaultValue": "1"
             },
             "totalItems": {
                 "type": "number",
+                "attribute": "total-items",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -172,12 +173,12 @@ export class GuxPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "total-items",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "itemsPerPage": {
                 "type": "number",
+                "attribute": "items-per-page",
                 "mutable": true,
                 "complexType": {
                     "original": "GuxItemsPerPage",
@@ -198,12 +199,12 @@ export class GuxPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "items-per-page",
                 "reflect": false,
                 "defaultValue": "25"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -218,7 +219,6 @@ export class GuxPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             }