genesys-spark-components 4.161.0 → 4.163.0

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

@@ -18,7 +18,7 @@ import { afterNextRender } from "../../../utils/dom/after-next-render";
 import translationResources from "./i18n/en.json";
 import { OnMutation } from "../../../utils/decorator/on-mutation";
 /**
- * @slot - collection of gux-option-multi elements
+ * @slot - collection of gux-option-multi elements and gux-select-all element.
  */
 export class GuxListboxMulti {
     constructor() {
@@ -43,7 +43,7 @@ export class GuxListboxMulti {
         this.updateValue(event.detail);
     }
     onKeydown(event) {
-        var _a;
+        var _a, _b;
         if (!hasActiveOption(this.root)) {
             event.preventDefault();
             setInitialActiveOption(this.root);
@@ -58,6 +58,9 @@ export class GuxListboxMulti {
                         setInitialActiveOption(this.root);
                     });
                 }
+                else if ((_b = this.selectAllElement) === null || _b === void 0 ? void 0 : _b.active) {
+                    this.updateSelectAllState(true);
+                }
                 else {
                     actOnActiveOption(this.root, value => this.updateValue(value));
                 }
@@ -104,7 +107,7 @@ export class GuxListboxMulti {
         }
     }
     onKeyup(event) {
-        var _a;
+        var _a, _b;
         switch (event.key) {
             case ' ':
                 if ((_a = this.optionCreateElement) === null || _a === void 0 ? void 0 : _a.active) {
@@ -113,6 +116,9 @@ export class GuxListboxMulti {
                         setInitialActiveOption(this.root);
                     });
                 }
+                else if ((_b = this.selectAllElement) === null || _b === void 0 ? void 0 : _b.active) {
+                    this.updateSelectAllState(true);
+                }
                 else {
                     actOnActiveOption(this.root, value => this.updateValue(value));
                 }
@@ -126,6 +132,9 @@ export class GuxListboxMulti {
         whenEventIsFrom('gux-option-multi', event, (option) => {
             onClickedOption(option, value => this.updateValue(value));
         });
+        whenEventIsFrom('gux-select-all', event, () => {
+            this.updateSelectAllState(true);
+        });
     }
     // eslint-disable-next-line @typescript-eslint/require-await
     async guxSelectActive() {
@@ -162,6 +171,9 @@ export class GuxListboxMulti {
     getOptionCreateElement() {
         this.optionCreateElement = this.root.querySelector('gux-create-option');
     }
+    getSelectAllElement() {
+        this.selectAllElement = this.root.querySelector('gux-select-all');
+    }
     // get list of listbox option elements
     setListboxOptions() {
         this.listboxOptions = Array.from(this.root.children).filter(element => element.tagName === 'GUX-OPTION-MULTI');
@@ -176,6 +188,29 @@ export class GuxListboxMulti {
             }
         });
     }
+    updateSelectAllState(toggleAll = false) {
+        const selectAllElement = this.root.querySelector('gux-select-all');
+        if (!selectAllElement) {
+            return;
+        }
+        const allOptions = this.listboxOptions
+            .filter(option => !option.filtered)
+            .map(option => option.value);
+        if (this.optionCreateElement && !this.optionCreateElement.filtered) {
+            allOptions.push(this.optionCreateElement.value);
+        }
+        if (toggleAll) {
+            this.value = selectAllElement.selected ? undefined : allOptions.join(',');
+            simulateNativeEvent(this.root, 'input');
+            simulateNativeEvent(this.root, 'change');
+        }
+        const selectedValues = this.getSelectedValues();
+        const allSelected = allOptions.length > 0 &&
+            allOptions.every(val => selectedValues.includes(val));
+        const someSelected = allOptions.some(val => selectedValues.includes(val));
+        selectAllElement.selected = allSelected;
+        selectAllElement.indeterminate = !allSelected && someSelected;
+    }
     updateValue(newValue) {
         if (!this.getSelectedValues().includes(newValue)) {
             const newArray = [...this.getSelectedValues(), newValue];
@@ -187,12 +222,14 @@ export class GuxListboxMulti {
         }
         simulateNativeEvent(this.root, 'input');
         simulateNativeEvent(this.root, 'change');
+        this.updateSelectAllState();
     }
     async componentWillLoad() {
         trackComponent(this.root);
         this.i18n = await buildI18nForComponent(this.root, translationResources);
         this.setListboxOptions();
         this.getOptionCreateElement();
+        this.getSelectAllElement();
     }
     componentWillRender() {
         this.setListboxOptions();
@@ -200,6 +237,7 @@ export class GuxListboxMulti {
         this.allListboxOptionsFiltered =
             this.listboxOptions.filter(listboxOption => !listboxOption.filtered)
                 .length === 0;
+        this.updateSelectAllState();
     }
     // The slot must always be rendered so onSlotchange can be called
     renderHiddenSlot() {
@@ -226,7 +264,7 @@ export class GuxListboxMulti {
         if (this.loading) {
             return this.renderLoading();
         }
-        return (h(Host, { role: "listbox", "aria-multiselectable": "true", tabindex: 0 }, h("slot", { onSlotchange: () => this.updateOnSlotChange() }), this.renderAllListboxOptionsFiltered(), this.renderCreateOptionSlot()));
+        return (h(Host, { role: "listbox", "aria-multiselectable": "true", tabindex: 0, class: { 'has-select-all': !!this.selectAllElement } }, h("slot", { onSlotchange: () => this.updateOnSlotChange() }), this.renderAllListboxOptionsFiltered(), this.renderCreateOptionSlot()));
     }
     static get is() { return "gux-listbox-multi"; }
     static get encapsulation() { return "shadow"; }

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

@@ -50,7 +50,7 @@
   background-color: var(--gse-ui-menu-option-selected-backgroundColor);
 }
 :host:host(.gux-selected) .gux-checkbox-container > path {
-  fill: var(--gse-ui-menu-option-checkbox-checked-default-foregroundColor);
+  fill: var(--gse-ui-menu-option-checkbox-checked-selected-foregroundColor);
 }
 :host:host(.gux-active) {
   outline: var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color);

package/dist/collection/components/stable/gux-listbox-multi/gux-select-all/gux-select-all.css

@@ -0,0 +1,81 @@
+:host {
+  z-index: 1;
+}
+
+.gux-select-all-container {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: center;
+  min-block-size: var(--gse-ui-menu-option-height);
+  padding-block: var(--gse-ui-menu-selectAll-padding);
+  padding-block-end: var(--gse-ui-menu-selectAll-gap);
+  font-family: var(--gse-ui-dropdown-menu-selectAll-labelText-fontFamily);
+  font-size: var(--gse-ui-dropdown-menu-selectAll-labelText-fontSize);
+  font-weight: var(--gse-ui-dropdown-menu-selectAll-labelText-fontWeight);
+  line-height: var(--gse-ui-dropdown-menu-selectAll-labelText-lineHeight);
+  color: var(--gse-ui-menu-selectAll-label-foregroundColor);
+  word-wrap: break-word;
+  cursor: pointer;
+  background-color: var(--gse-ui-menu-selectAll-backgroundColor);
+  border-block-end: var(--gse-semantic-container-divider-borderWidth) solid var(--gse-semantic-border-container-divider);
+}
+.gux-select-all-container.gux-has-scrolled {
+  box-shadow: var(--gse-ui-menu-selectAll-scrolling-boxShadow);
+}
+.gux-select-all-container.gux-active {
+  outline: var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color);
+  outline-offset: -2px;
+  border-radius: var(--gse-semantic-focusOutline-sm-borderRadius);
+}
+.gux-select-all-container.gux-selected {
+  font-family: var(--gse-ui-menu-option-label-active-text-fontFamily);
+  font-size: var(--gse-ui-menu-option-label-active-text-fontSize);
+  font-weight: var(--gse-ui-menu-option-label-active-text-fontWeight);
+  line-height: var(--gse-ui-menu-option-label-active-text-lineHeight);
+}
+.gux-select-all-container.gux-selected .gux-checkbox-container > path {
+  fill: var(--gse-ui-menu-option-checkbox-checked-selected-foregroundColor);
+}
+.gux-select-all-container.gux-indeterminate .gux-checkbox-container > path {
+  fill: var(--gse-ui-menu-option-checkbox-checked-selected-foregroundColor);
+}
+.gux-select-all-container .gux-select-all-content {
+  display: flex;
+  flex-direction: row;
+  gap: var(--gse-ui-menu-selectAll-labelContainer-gap);
+  inline-size: 100%;
+  padding: var(--gse-ui-menu-selectAll-labelContainer-padding);
+}
+
+.gux-option-wrapper {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: var(--gse-ui-menu-selectAll-label-gap);
+  align-items: center;
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+.gux-option-wrapper .gux-counter-label {
+  inline-size: 100%;
+  font-family: var(--gse-ui-dropdown-menu-selectAll-counterText-fontFamily);
+  font-size: var(--gse-ui-dropdown-menu-selectAll-counterText-fontSize);
+  font-weight: var(--gse-ui-dropdown-menu-selectAll-counterText-fontWeight);
+  line-height: var(--gse-ui-dropdown-menu-selectAll-counterText-lineHeight);
+}
+
+.gux-checkbox-container {
+  position: relative;
+  display: inline-block;
+  min-inline-size: var(--gse-ui-menu-option-startIcon-width);
+  max-inline-size: var(--gse-ui-menu-option-startIcon-width);
+  block-size: var(--gse-ui-menu-option-startIcon-height);
+  content: "";
+  background-color: var(--gse-ui-menu-selectAll-backgroundColor);
+}
+.gux-checkbox-container > path {
+  fill: var(--gse-ui-menu-option-checkbox-unchecked-default-foregroundColor);
+}

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

@@ -0,0 +1,157 @@
+import { h, forceUpdate } from "@stencil/core";
+import { buildI18nForComponent } from "../../../../i18n/index";
+import translationResources from "./i18n/en.json";
+/**
+ * @slot - slot for text.
+ */
+export class GuxSelectAll {
+    constructor() {
+        this.selected = false;
+        this.indeterminate = false;
+        this.active = false;
+        this.hasScrolled = false;
+    }
+    onInternallistboxoptionsupdated() {
+        forceUpdate(this.root);
+    }
+    async componentWillLoad() {
+        var _a;
+        this.i18n = await buildI18nForComponent(this.root, translationResources);
+        this.listboxElement = (_a = this.root) === null || _a === void 0 ? void 0 : _a.closest('gux-listbox-multi');
+        this.applyListboxScrollListener();
+    }
+    disconnectedCallback() {
+        this.listboxElement.removeEventListener('scroll', this.applyListboxScrollListener);
+    }
+    applyListboxScrollListener() {
+        if (this.listboxElement) {
+            this.listboxElement.addEventListener('scroll', (event) => {
+                event.stopPropagation();
+                const target = event.target;
+                this.hasScrolled = target.scrollTop > 0;
+            });
+        }
+    }
+    getCounterText() {
+        if (!this.listboxElement) {
+            return;
+        }
+        const optionsCount = Array.from(this.listboxElement.querySelectorAll('gux-option-multi'));
+        const selectedCount = optionsCount.filter(option => option.selected).length;
+        return `(${selectedCount} ${this.i18n('of')} ${optionsCount.length})`;
+    }
+    renderSVGCheckbox() {
+        const paths = {
+            indeterminate: 'M11.1429 7.14286C11.6179 7.14286 12 7.525 12 8C12 8.475 11.6179 8.85714 11.1429 8.85714H4.85714C4.38214 8.85714 4 8.475 4 8C4 7.525 4.38214 7.14286 4.85714 7.14286H11.1429ZM0 2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571ZM1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571Z',
+            selected: 'M4 1H11C11.7956 1 12.5587 1.31607 13.1213 1.87868C13.6839 2.44129 14 3.20435 14 4V11C14 11.7956 13.6839 12.5587 13.1213 13.1213C12.5587 13.6839 11.7956 14 11 14H4C3.20435 14 2.44129 13.6839 1.87868 13.1213C1.31607 12.5587 1 11.7956 1 11V4C1 3.20435 1.31607 2.44129 1.87868 1.87868C2.44129 1.31607 3.20435 1 4 1ZM5.57018 10.4198C5.7051 10.5547 5.87599 10.6177 6.04689 10.6177C6.22678 10.6177 6.39767 10.5457 6.52359 10.4198L11.7944 5.14905C12.0552 4.88821 12.0552 4.45647 11.7944 4.19563C11.5335 3.93479 11.1018 3.93479 10.841 4.19563L6.04689 8.9897L4.14905 7.08286C3.88821 6.82202 3.45647 6.82202 3.19563 7.08286C2.93479 7.3437 2.93479 7.77544 3.19563 8.03628L5.57018 10.4198Z',
+            unselected: 'M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z'
+        };
+        const pathKey = this.indeterminate
+            ? 'indeterminate'
+            : this.selected
+                ? 'selected'
+                : 'unselected';
+        const viewBox = this.indeterminate ? '0 0 16 16' : '1 1 13 13';
+        return (h("svg", { class: "gux-checkbox-container", xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: paths[pathKey] })));
+    }
+    render() {
+        return (h("div", { key: '4ca084a8d85a2c6bfad91b4e6ea10f904e351f87', role: "option", "aria-selected": this.selected.toString(), class: {
+                'gux-select-all-container': true,
+                'gux-active': this.active,
+                'gux-selected': this.selected,
+                'gux-indeterminate': this.indeterminate,
+                'gux-has-scrolled': this.hasScrolled
+            } }, h("div", { key: '00c3f3d69a670e4879771ea42a3779e6c0d0efe9', class: "gux-select-all-content" }, this.renderSVGCheckbox(), h("div", { key: '3ba453e9f0191278f1d319d018d6b142271909f8', class: "gux-option-wrapper" }, h("gux-truncate", { key: '16c563dcbf17d9b1b1b3d41ad350d1cd9aca8b98', "max-lines": 1 }, h("span", { key: '42fc0442b396470c800612386f94fb4b8e46acba' }, h("slot", { key: 'b9062c3cc7e294d02ef6de9f0cb9220f2e456905' }, this.i18n('allOptions')))), h("gux-truncate", { key: '9fba1c9cc6126c3f3163a1e646034de3ed13956a', "tooltip-placement": "right", class: "gux-counter-label", "max-lines": 1 }, this.getCounterText())))));
+    }
+    static get is() { return "gux-select-all"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-select-all.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-select-all.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selected": {
+                "type": "boolean",
+                "attribute": "selected",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "attribute": "indeterminate",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "active": {
+                "type": "boolean",
+                "attribute": "active",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasScrolled": {}
+        };
+    }
+    static get elementRef() { return "root"; }
+    static get listeners() {
+        return [{
+                "name": "internallistboxoptionsupdated",
+                "method": "onInternallistboxoptionsupdated",
+                "target": "window",
+                "capture": true,
+                "passive": true
+            }];
+    }
+}

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: '68c715e642d242f0a0d44fe71e3588ad56353c1a', class: "gux-container", role: "alert", "aria-live": "assertive" }, h("div", { key: '1779e3dc2d341030eb9042f0f5cb3b6e03f11bcc', class: "gux-progress" }, h("slot", { key: '6f2b473f09a243d711c754b58262f396a94ee505', name: "progress" })), h("div", { key: '0b8f6e267bc1563d3536d821b2e9262cd2c4275a', class: "gux-primary-message" }, h("slot", { key: '2a0ef237bf319a1ef08e6d8788a7c1074ffecb3d', name: "primary-message" })), h("div", { key: '4535c794dd0e0a7d30c5771097119b27d2da7c24', class: "gux-additional-guidance" }, h("slot", { key: '8501ebbbc6ca9d8350315221cc24320fbaf9290c', name: "additional-guidance" }))));
+        return (h("div", { key: 'b51f1bd26a86deeda5760aaaa7726cab58f5d276', class: "gux-container", role: "alert", "aria-live": "assertive" }, h("div", { key: 'b5c67170e9aa380209094dbfcac9f51cc229cae1', class: "gux-progress" }, h("slot", { key: '59debe8548711198a29787cb8cc173db8318d087', name: "progress" })), h("div", { key: '9f3c9cdce81470dd05c59add060a5e69fbd3e822', class: "gux-primary-message" }, h("slot", { key: '900b68d5e257f827821a27df0ca4667bd0dd8965', name: "primary-message" })), h("div", { key: 'a61c07ebefc2203118f051c1515e66705b321c24', class: "gux-additional-guidance" }, h("slot", { key: '4981f5781d696612baf34027748189d7180fb197', 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: '51d8a5212c134b8290ec9c5951739885ede7a8bd', onClose: this.onCloseHandler.bind(this), ref: el => (this.dialogElement = el), "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: '5a2d9781b08fdc88e1365a060ff68a3963b5f4dc', class: `gux-modal-container gux-${this.size}` }, h("gux-dismiss-button", { key: '4bcf0d5afc0cb087d690ae3da170eaf9e66a0250', onClick: this.onDismissHandler.bind(this) }), hasModalTitleSlot && this.renderTitle(titleID), h("div", { key: '7ee4d440bd8726d28314bfbadcdd486b1af80811', class: "gux-modal-content" }, h("p", { key: '0eba08013d6b79e48d942da8a9db68c08ed96e59' }, h("slot", { key: '038c0dc943c92254e4cbfe3ba566786c539f260c', name: "content" }))), this.renderFooter())));
+        return (h("dialog", { key: '5077f0a687e81c8985f2c80673b171464bfd4f6a', onClose: this.onCloseHandler.bind(this), ref: el => (this.dialogElement = el), "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: '0210520f377532aed0bf62609b85a90d0812c7e5', class: `gux-modal-container gux-${this.size}` }, h("gux-dismiss-button", { key: 'a4bd189b4e1c681144fcfc77ff5be3900b0b5bee', onClick: this.onDismissHandler.bind(this) }), hasModalTitleSlot && this.renderTitle(titleID), h("div", { key: 'bb691b147a21bf73c66174064d98bb416d748541', class: "gux-modal-content" }, h("p", { key: 'c7304bb01757ab4e712c45fb2ed64f8d43edf811' }, h("slot", { key: '0f26152e93ce394752ee77f1f8157e84e077406b', name: "content" }))), this.renderFooter())));
     }
     renderTitle(titleID) {
         return (h("h1", { class: "gux-modal-header", id: titleID }, h("slot", { name: "title" })));

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: 'd7b2182c20755a6a9102c6c095bbb55dd3ff2568', class: "gux-spinner", "screenreader-text": this.screenreaderText, context: "full-page" }));
+        return (h("gux-radial-loading", { key: '2f65fee96ad84602de6b2aa16d5b8f1425e12f28', class: "gux-spinner", "screenreader-text": this.screenreaderText, context: "full-page" }));
     }
     static get is() { return "gux-page-loading-spinner"; }
     static get encapsulation() { return "shadow"; }

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: 'a44d7b6d817228dd8dcf3ecc87242a84efd1da00', class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { key: '958a47f0aaade347fc27046646c108961578475f', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '8591b7f8c29591106705ad5e59413f38f6b11088', accent: "ghost", "icon-only": true }, h("button", { key: '7ea8cbb10031af6cdf86306bb29c4497a80190e4', title: this.i18n('firstPage'), disabled: this.onFirstPage || this.disabled, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { key: 'f067b5b8397c6b162b4b996306306f58f88d1c73', size: "small", decorative: true, "icon-name": "fa/chevrons-left-regular" }))), h("gux-button-slot", { key: '1c79e92457a2992ab36a80c422f7fb5535df435e', accent: "ghost", "icon-only": true }, h("button", { key: 'a981dcddf17385d8892a57649232131dfeac8719', title: this.i18n('previousPage'), disabled: this.onFirstPage || this.disabled, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { key: '261d3b1a0709ec90ddf58beb7b2df474df890fd7', size: "small", decorative: true, "icon-name": "custom/chevron-left-small-regular" })))), this.getPageNavigation(), h("div", { key: 'f562ba2f326a7c89ed578555d4007fcbc038dd76', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '9c540e45e88487e7e68616de5185a7262b33d33d', accent: "ghost", "icon-only": true }, h("button", { key: 'ce96c4459e59e877753b1a1823ff68772fe39a80', title: this.i18n('nextPage'), disabled: this.onLastPage || this.disabled, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { key: 'b08813252f71a6c8cfe81ecec40dc8f3cde5d375', size: "small", decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("gux-button-slot", { key: '5c1de002fd7b253c0a2c8594da93547184758925', accent: "ghost", "icon-only": true }, h("button", { key: 'a673145234cd8201179b928e5039c5064ad67e81', title: this.i18n('lastPage'), disabled: this.onLastPage || this.disabled, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { key: 'ed5e0c88e0f3677d02e0a328ba8a97e89b0ec2d1', size: "small", decorative: true, "icon-name": "fa/chevrons-right-regular" }))))));
+        return (h("div", { key: '39482546d5cd5d24b52082a98f3cb836fb16e592', class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { key: 'd86f7fa36520f3db68ea47711c82b396c9266a98', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '52d9a710044697efd9b45c2457030f01d4e50149', accent: "ghost", "icon-only": true }, h("button", { key: '5075ed510265ac7a0a7fddd0512f7ba0128f5189', title: this.i18n('firstPage'), disabled: this.onFirstPage || this.disabled, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { key: 'c94778dd94aacad59480c62c78e4af7f219ab190', size: "small", decorative: true, "icon-name": "fa/chevrons-left-regular" }))), h("gux-button-slot", { key: '1df7ea4cb71eb48422902483ac041df5f3633f94', accent: "ghost", "icon-only": true }, h("button", { key: '38249329af8044bc82efb61590a244568cb35c2d', title: this.i18n('previousPage'), disabled: this.onFirstPage || this.disabled, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { key: '2965a7a39bd1c9dad0917b442dd4a24d26d7a659', size: "small", decorative: true, "icon-name": "custom/chevron-left-small-regular" })))), this.getPageNavigation(), h("div", { key: '3290f22e1f3b772252c09df8886d127afe8786d5', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: 'f07ee245e5cb68ace61b1ca30f315fc38e8a6df5', accent: "ghost", "icon-only": true }, h("button", { key: '30e53e8aca2ac23ea6fe09aebc80d79d197a3211', title: this.i18n('nextPage'), disabled: this.onLastPage || this.disabled, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { key: '792cdebe04dab706451cb2e684e92fd3cae0b624', size: "small", decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("gux-button-slot", { key: 'c6c6a425d6316ee05c8158a7bb8c147c6479c70a', accent: "ghost", "icon-only": true }, h("button", { key: '0f88276a172574810e685fd4403ab7835d3ce43b', title: this.i18n('lastPage'), disabled: this.onLastPage || this.disabled, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { key: 'd09379c94dce703750dbae6d8142d19beae706ed', size: "small", decorative: true, "icon-name": "fa/chevrons-right-regular" }))))));
     }
     static get is() { return "gux-pagination-buttons"; }
     static get originalStyleUrls() {

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: '6b1bf7562dde88875e64bffd6eb2706d68053fd6', 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: '653f51ec02ef93057a68ebb7af3348da66f44de3', screenreaderText: this.i18n('goToPage'), "icon-name": "fa/ellipsis-regular", size: "small" })),
-            h("gux-tooltip", { key: '729905dd57fd32de84bcce1d7363ff1f0d18f2fb', for: "popover-target" }, h("div", { key: '0cd5d979d929db9196ab79e960fac1d446c75260', slot: "content" }, this.i18n('goToPage'))),
-            h("gux-popover", { key: 'c092a7e7850f517b04ba611e122871f11ad9a151', "is-open": this.isOpen, for: "popover-target" }, h("span", { key: 'aec8b1063bec15644af85025356ce9d3f95933ed', slot: "title" }, this.i18n('goToPage')), h("gux-form-field-number", { key: 'e281e8d72fd81b9fadb81344d4be8678ecdd7b6f' }, h("input", { key: 'd428ded498a742be8e2254af671e8e999bcda505', 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: '6a99f403ff16b4dc35f7feaeb2cb7600e9d030f6', slot: "label" })))
+            h("gux-button", { key: 'dc015b7739d962fc7ad58df07a6efe78fb53d373', 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: 'c89f356768379f5752a7fae70dd5c832f5a420dd', screenreaderText: this.i18n('goToPage'), "icon-name": "fa/ellipsis-regular", size: "small" })),
+            h("gux-tooltip", { key: '6aef11a250c6117a75e5b4ed8c5a31dbd7e900e8', for: "popover-target" }, h("div", { key: 'a442ab9a7d75705bcf265d4c607a4efb502deb08', slot: "content" }, this.i18n('goToPage'))),
+            h("gux-popover", { key: 'f5e9eb84fcbe0abc46bf8324218ea4d5dbeb11b3', "is-open": this.isOpen, for: "popover-target" }, h("span", { key: 'd77f17fb28b272c77996ce2ad3d699a605fb4205', slot: "title" }, this.i18n('goToPage')), h("gux-form-field-number", { key: '6029f39ab6eaacd2ad7be4c1622ae8b9ee3bc3b5' }, h("input", { key: '534cc01d29ca04e1b0a6a571eca54c8c1c8a7212', 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: 'cce9048fb4ba0f259cbc8cba8604669194c5fe7a', slot: "label" })))
         ];
     }
     static get is() { return "gux-pagination-ellipsis-button"; }

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: '202afbcddaae1a982df49afd098f73421801421b', class: "gux-pagination-item-counts-container" }, h("span", { key: '64b43f4845260fb74a84a7428f74d9e0260a1808', class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
+        return (h("div", { key: '3f90b138e1c8590200b6e9de6975ce8397757408', class: "gux-pagination-item-counts-container" }, h("span", { key: '63f1abd638c0d5c2bebf567038d17d846aad90c0', class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
             firstItem: this.firstItem,
             lastItem: this.lastItem
-        })), h("span", { key: 'a7c8afc21cb89ed6c76c9fb8eb10bcaab7306482', class: "gux-pagination-item-counts-total" }, this.getPaginationItemCountsRange())));
+        })), h("span", { key: '80ac54ee1509ef450b172f76ec101125b29e10fc', class: "gux-pagination-item-counts-total" }, this.getPaginationItemCountsRange())));
     }
     static get is() { return "gux-pagination-item-counts"; }
     static get originalStyleUrls() {

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: '2d9198b423a6b17f2d9023f5d193bb8dc98f3a52', class: "gux-pagination-items-per-page-container" }, h("div", { key: '352b44e6eab58fbf9646fdf7f2bf011b4fd72b8a', class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), h("div", { key: 'f3091de59a0e889d165be5180727bfab05762429', class: "gux-pagination-per-page" }, this.i18n('perPage'))));
+        return (h("div", { key: '8192a10e0e41a773cef585a4b7e7b062ddfd7e8a', class: "gux-pagination-items-per-page-container" }, h("div", { key: 'f0265fc20e04a2ef7d6a8f3b8ca6be669a7edb86', class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), h("div", { key: '8f1c5e4c2a3a1d2200806a6121eb9530804d9ede', class: "gux-pagination-per-page" }, this.i18n('perPage'))));
     }
     static get is() { return "gux-pagination-items-per-page"; }
     static get originalStyleUrls() {

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

@@ -94,7 +94,7 @@ export class GuxPagination {
         }, 500);
     }
     render() {
-        return (h("div", { key: 'b65e60a0d9374fbe0c2458eafd568416bbbf7345', class: "gux-pagination-container" }, h("div", { key: '0adf2c44a65d33e46064081506e9e7ed6ca39d6d', class: "gux-pagination-info" }, h("gux-pagination-item-counts", { key: '3797509556e02ff25d58377ba32e16c105dabc7a', "total-items": this.totalItems, "current-page": this.currentPage, "items-per-page": this.itemsPerPage }), this.displayedLayout === 'advanced' && (h("gux-pagination-items-per-page", { key: 'fcf8ccc0e76a8b8efdab2fde4620d48bfc3f240e', disabled: this.disabled, "items-per-page": this.itemsPerPage, onInternalitemsperpagechange: this.handleInternalitemsperpagechange.bind(this) }))), h("div", { key: '42b266fb88a29c7edf9347de8686a2cfd93d7acf', class: "gux-pagination-spacer" }), h("div", { key: '986a423537eedf082dc76e8ab5177ebd3eac1b6d', class: "gux-pagination-change" }, h("gux-pagination-buttons", { key: '7a4553ddf04f3d806aa4f4b52fe2e992f8c64307', disabled: this.disabled, layout: this.displayedLayout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
+        return (h("div", { key: '075391f06ef9d96119a45663ee2a26b767118fee', class: "gux-pagination-container" }, h("div", { key: '63ee9bc1c8331d458e1e2787a7462443c8a48b75', class: "gux-pagination-info" }, h("gux-pagination-item-counts", { key: 'fbf300bb820824cd4253564341c4ada205a615e2', "total-items": this.totalItems, "current-page": this.currentPage, "items-per-page": this.itemsPerPage }), this.displayedLayout === 'advanced' && (h("gux-pagination-items-per-page", { key: 'e31152de6a1744978388bc832dc329324b0a0944', disabled: this.disabled, "items-per-page": this.itemsPerPage, onInternalitemsperpagechange: this.handleInternalitemsperpagechange.bind(this) }))), h("div", { key: '2f65c4755140014324964dd35a49ef0a40546c5e', class: "gux-pagination-spacer" }), h("div", { key: 'c97dd23c5341df4585fe23095b2c9e04bf82511a', class: "gux-pagination-change" }, h("gux-pagination-buttons", { key: '672fafeb01590d7a2bac11f12acb82a14cabfda7', 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"; }

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

@@ -169,10 +169,10 @@ export class GuxPopover {
         }
     }
     render() {
-        return (h("div", { key: '1bc2e045d66dde3e5ccbbf695e3fd2443246fbca', ref: (el) => (this.popupElement = el), class: {
+        return (h("div", { key: '73d032ca490ec18c40417f0aabfbeee950a8a4cd', ref: (el) => (this.popupElement = el), class: {
                 'gux-hidden': !this.isOpen,
                 'gux-popover-wrapper': true
-            }, "data-placement": true }, h("div", { key: '257bbebeff94b46df2bde15de2695a42b3793ba2', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: 'dbfde134155a75fc848d78ba4e3f4045befe49d3', class: "gux-arrow-caret" })), this.displayDismissButton && (h("gux-dismiss-button", { key: '962b9d93cbaf9e07f452978a2759f9e7c13ec57b', onClick: this.dismiss.bind(this) })), h("div", { key: '3c967fd82c66a5d8fd3d393c59f5c48cb7cd5a4b', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, h("slot", { key: 'afd99a56965406be784819ece0afb8c49e8ebf4f', name: "title" })), h("div", { key: '7d2cfc18be6af60f27ae0b901f80c15f8c1570dc', class: "gux-popover-content" }, h("slot", { key: '3bee8cc828f0596225df20b3c1b9659e7cd51688' })), h("div", { key: 'acf184bb9c3181c6cc57edc6dcb1155ba112dd4e', class: { 'gux-popover-footer': Boolean(this.footerSlot) } }, h("slot", { key: '1576f50b62c350381e23e5ab4fdb1f54953d9da4', name: "footer" }))));
+            }, "data-placement": true }, h("div", { key: '2971f6f54b5ff42fc670be81a90e5b997b70bd83', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: '9ef748a7fcae9fd97c0ff74661d4e7f00255d6b1', class: "gux-arrow-caret" })), this.displayDismissButton && (h("gux-dismiss-button", { key: 'b7ce3754b7634b08cececad6d23a81451a592240', onClick: this.dismiss.bind(this) })), h("div", { key: 'b71372f2bab3df6279ad270b9593e5c4da572aed', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, h("slot", { key: '0748ab1a54ff47d4c397bcd1c9724c312bdd2e96', name: "title" })), h("div", { key: 'e6c8678109f58a1041c586bbe9676d6b839cb934', class: "gux-popover-content" }, h("slot", { key: 'feb24d3b32c59b6a0b18355e2559aa865f4dc9a2' })), h("div", { key: 'ee2796ad7dc69234525adacdfa26898c1b1e83ec', class: { 'gux-popover-footer': Boolean(this.footerSlot) } }, h("slot", { key: 'a704efb5db324f4d1ecb04537dfd16d520d4eed7', name: "footer" }))));
     }
     static get is() { return "gux-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-popover-list/gux-popover-list.js

@@ -137,10 +137,10 @@ export class GuxPopoverList {
         }
     }
     render() {
-        return (h("div", { key: '1a56d594e6c1d4b974037f992d3cdc3baaf8d1e9', ref: (el) => (this.popupElement = el), class: {
+        return (h("div", { key: '92ccb7833f919f79b2229c1ba305d5b2ac450e62', ref: (el) => (this.popupElement = el), class: {
                 'gux-hidden': !this.isOpen,
                 'gux-popover-wrapper': true
-            }, "data-placement": true }, h("div", { key: 'ee9c6003dbc6cecdf4dfdcf2df3750e4f87c1a91', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), this.displayDismissButton && (h("gux-dismiss-button", { key: '478bcc998734733fc3d9cc0daea910dac9838984', onClick: this.dismiss.bind(this) })), h("div", { key: '172cfb05fdd764b9decdb0adc57f19fa9438127f', class: "gux-popover-content" }, h("slot", { key: '909931dfb7dd9bd4c5a3386873170b964748a1dd' }))));
+            }, "data-placement": true }, h("div", { key: 'eb4f43258cfdc31b54a3fbe06b1c4c6accae9a7e', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), this.displayDismissButton && (h("gux-dismiss-button", { key: 'e48d443edb7c46b101b3f7a3fc78392dabb0c279', onClick: this.dismiss.bind(this) })), h("div", { key: '1e44bd5f96c0e054ed8217c5adc09ee77db9e477', class: "gux-popover-content" }, h("slot", { key: 'ce7283b0d5c171ec0aa470a858d4423d42a9223a' }))));
     }
     static get is() { return "gux-popover-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -115,13 +115,13 @@ export class GuxPopup {
         }
     }
     render() {
-        return (h("div", { key: '0a59e3e4406bc71b5c8019f5150841bd313023b7', class: {
+        return (h("div", { key: '881a7313bc8e85a2a2385cf2f8c271689b3797c6', class: {
                 'gux-target-container': true,
                 'gux-disabled': this.disabled
-            }, "aria-disabled": this.disabled.toString(), ref: (el) => (this.targetElementContainer = el) }, h("slot", { key: '94023bc4feb2d4465819a755e54de5af96ead789', name: "target" }), h("div", { key: 'daf80367213677ef1c1baf3ddad8495a7c58d414', class: {
+            }, "aria-disabled": this.disabled.toString(), ref: (el) => (this.targetElementContainer = el) }, h("slot", { key: '8c3aeb854f3c9a184785786db5bade61f88a39a2', name: "target" }), h("div", { key: '002758c2d7e56d68e5b05df9feee6b9184afafed', class: {
                 'gux-popup-container': true,
                 'gux-expanded': this.expanded && !this.disabled
-            }, ref: (el) => (this.popupElementContainer = el) }, h("slot", { key: 'c4d18d76a0b03bf2fa71d3e5d152e177fe22be19', name: "popup" }))));
+            }, ref: (el) => (this.popupElementContainer = el) }, h("slot", { key: '98099d6167783f73b297cd13053723707a835828', name: "popup" }))));
     }
     static get is() { return "gux-popup"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,7 +20,7 @@ export class GuxRadialLoading {
         this.getI18nValue = await buildI18nForComponent(this.root, modalComponentResources);
     }
     render() {
-        return (h(GuxSpinnerState, { key: '8518a47083f730e7337755e53eb340a94df2d83f', context: this.context, screenreaderText: this.screenreaderText || this.getI18nValue('loading') }));
+        return (h(GuxSpinnerState, { key: 'c21ce9ebc6552228ad61ce6a320937466bf34c94', context: this.context, screenreaderText: this.screenreaderText || this.getI18nValue('loading') }));
     }
     static get is() { return "gux-radial-loading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -101,7 +101,7 @@ export class GuxRating {
         }
     }
     render() {
-        return (h(Host, { key: 'aa6c2b50e84baab3f3a56b30db8a68c6be835b6d', role: "spinbutton", tabindex: this.getTabIndex(), "aria-readonly": this.readonly.toString(), "aria-valuenow": this.value, "aria-valuemin": "0", "aria-valuemax": this.maxValue }, h("div", { key: '9eee036960d279c4c0c193194c06e78d3af1642a', ref: (el) => (this.starContainer = el), class: {
+        return (h(Host, { key: 'a02770a1ef222006a8d39255537d74cbe9898b38', role: "spinbutton", tabindex: this.getTabIndex(), "aria-readonly": this.readonly.toString(), "aria-valuenow": this.value, "aria-valuemin": "0", "aria-valuemax": this.maxValue }, h("div", { key: '3518eed976d91d7eb3d72ac3f333c0c0f446e386', ref: (el) => (this.starContainer = el), class: {
                 'gux-rating-star-container': true,
                 'gux-disabled': this.disabled
             } }, this.getRatingStarElements())));

package/dist/collection/components/stable/gux-skip-navigation-list/gux-skip-navigation-item/gux-skip-navigation-item.js

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class GuxSkipNavigationItem {
     render() {
-        return (h(Host, { key: '03aed4ac8e21d7a642ecea11864e8e401102d360', role: "listitem" }, h("slot", { key: 'fdc7b4e4f77012a5645b2e1a5a3592c02f717554' })));
+        return (h(Host, { key: '7ed2e81f9218175c4464dda59bc894a6f39fca2a', role: "listitem" }, h("slot", { key: '293b3c13f7dbae9f7ce0e88b4f7f0de3b7e90125' })));
     }
     static get is() { return "gux-skip-navigation-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-skip-navigation-list/gux-skip-navigation-list.js

@@ -11,7 +11,7 @@ export class GuxSkipNavigationList {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h("div", { key: 'eec6aa86052993195d3a46390711770550fe5ca2', class: "gux-container" }, h("nav", { key: 'eb2c28414758189fbfe1a47453be9dbeb9ab50fc', "aria-label": this.i18n('navigationName') }, h("ul", { key: 'edc7584954471d56b72276ea315b7ee2e89be1ef', role: "list" }, h("slot", { key: '371c4177647aeab46f0fef0d083e8389cb0a575b' })))));
+        return (h("div", { key: 'c08999fb69d6647a47aa65b73ee50f47a473490e', class: "gux-container" }, h("nav", { key: 'f70aa0a7183f2df6ad579b47669cb8090ea7b46a', "aria-label": this.i18n('navigationName') }, h("ul", { key: 'cf2e21cf3782a5df01ebc4cb768e1d1523a87baa', role: "list" }, h("slot", { key: '3a31545202a0a43a19a0a870f227969feeb40580' })))));
     }
     static get is() { return "gux-skip-navigation-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-table/gux-all-row-select/gux-all-row-select.js

@@ -20,7 +20,7 @@ export class GuxAllRowSelect {
         this.i18n = await buildI18nForComponent(this.root, tableResources, 'gux-table');
     }
     render() {
-        return (h("gux-form-field-checkbox", { key: 'f746e62c50607cb8ec2adad745ef285630108b1c', "label-position": "screenreader" }, h("input", { key: '4c5d95824e6950f0268f6e7826577484b16ea566', ref: el => (this.inputElement = el), slot: "input", id: this.id, type: "checkbox", checked: this.selected, disabled: this.disabled }), h("label", { key: '4857bbeec0e0565f57923246dcc79f3db34de23b', slot: "label", htmlFor: this.id }, "\u200B", h("span", { key: 'b1cf5e9cb0370d4d332f3117b040e29a46d856e3' }, this.i18n('selectAllTableRows')))));
+        return (h("gux-form-field-checkbox", { key: '1077afbb271f5bf54dff132eb0146485ad159cda', "label-position": "screenreader" }, h("input", { key: '9a69dfd369366be6f9e4388425a99ae585332c51', ref: el => (this.inputElement = el), slot: "input", id: this.id, type: "checkbox", checked: this.selected, disabled: this.disabled }), h("label", { key: 'a3b11b060a9d04cc1d200931be33fd97be7f5ac3', slot: "label", htmlFor: this.id }, "\u200B", h("span", { key: '37bc284562273ec6ef5b926e87bc797ff72ecb59' }, this.i18n('selectAllTableRows')))));
     }
     static get is() { return "gux-all-row-select"; }
     static get encapsulation() { return "shadow"; }