genesys-spark-components 4.0.0-beta.3 → 4.0.0-beta.30

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

@@ -1,16 +1,12 @@
-gux-pagination-buttons {
-  color: #2e394c;
-}
 gux-pagination-buttons .gux-pagination-buttons-container {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-content: stretch;
   align-items: center;
+  gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
   justify-content: flex-end;
-}
-gux-pagination-buttons .gux-pagination-buttons-container.gux-expanded {
-  justify-content: center;
+  margin-left: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
 }
 gux-pagination-buttons .gux-pagination-buttons-container > div {
   flex: 0 1 auto;
@@ -18,63 +14,52 @@ gux-pagination-buttons .gux-pagination-buttons-container > div {
   order: 0;
 }
 gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-group {
-  white-space: nowrap;
-}
-gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-group gux-button-slot-beta:not(:first-of-type) {
-  margin-left: 4px;
-}
-gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-input-container {
   display: flex;
   flex-direction: row;
-  flex-wrap: nowrap;
-  align-content: stretch;
-  align-items: center;
-  justify-content: center;
-  margin: 0 16px;
-}
-gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-input-container > div {
-  flex: 0 1 auto;
-  align-self: auto;
-  order: 0;
+  gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
   white-space: nowrap;
 }
-gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-input-container .gux-pagination-buttons-input {
-  width: 60px;
-  margin: 0 8px;
-}
-gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-input-container .gux-pagination-buttons-input input {
-  width: inherit;
-  text-align: center;
-}
 gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container {
   display: flex;
   flex-direction: row;
+  flex-shrink: 0;
   flex-wrap: nowrap;
   align-content: stretch;
+  gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
   align-items: center;
   justify-content: center;
-  margin: 0 16px;
 }
-gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button {
-  height: 32px;
-  padding: 0 4px;
-  margin: 0 4px;
+gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-current,
+gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-target {
+  min-width: 28px;
+  min-height: 24px;
+  padding-left: var(--gse-ui-dataTableItems-tablePagination-padding);
+  padding-right: var(--gse-ui-dataTableItems-tablePagination-padding);
+  margin: 0;
   background: inherit;
   border: none;
-  border-radius: 2px;
-}
-gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button:focus-visible {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
-}
-gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button.gux-current {
-  font-weight: 600;
-}
-gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button.gux-target {
-  color: #2a60c8;
+  font-family: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);
+  color: var(--gse-ui-dataTableItems-tablePagination-foregroundColor);
+  font-size: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);
+  line-height: var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);
+  font-weight: var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight);
+}
+gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-current:focus-visible,
+gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-target:focus-visible {
+  outline: var(--gse-semantic-focusRing-width) solid var(--gse-semantic-color-focus);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+  border-radius: calc(var(--gse-semantic-focusRing-cornerRadius) - var(--gse-semantic-focusRing-offset));
+}
+gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-current {
+  background-color: var(--gse-ui-button-ghost-active-backgroundColor);
+  border-radius: var(--gse-ui-button-borderRadius);
+}
+gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-target {
+  color: var(--gse-ui-button-ghost-default-foregroundColor);
   cursor: pointer;
 }
-gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-spacer {
-  width: 12px;
-}
+gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-target:hover {
+  color: var(--gse-ui-button-ghost-hover-foregroundColor);
+  background-color: var(--gse-ui-button-ghost-hover-backgroundColor);
+  border-radius: var(--gse-ui-button-borderRadius);
+}

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

@@ -2,11 +2,19 @@ import { h } from '@stencil/core';
 import { buildI18nForComponent } from '../../../../i18n';
 import paginationResources from './i18n/en.json';
 import { GuxPaginationButtonsService } from './gux-pagination-button.service';
+import { afterNextRender } from '@utils/dom/after-next-render';
 export class GuxPaginationButtons {
   constructor() {
     this.currentPage = undefined;
     this.totalPages = undefined;
-    this.layout = 'full';
+    this.layout = 'advanced';
+  }
+  goToPageHandler(event) {
+    this.currentPage = event.detail;
+    this.handlePageChange(this.currentPage);
+    afterNextRender(() => {
+      this.currentElement.focus();
+    });
   }
   get onFirstPage() {
     return this.currentPage <= 1;
@@ -26,57 +34,33 @@ export class GuxPaginationButtons {
   handleClickLast() {
     this.internalcurrentpagechange.emit(this.totalPages);
   }
-  handleClickPage(pageNumber) {
+  handlePageChange(pageNumber) {
     this.internalcurrentpagechange.emit(pageNumber);
   }
-  setPageFromInput(value) {
-    const page = parseInt(value, 10);
-    if (!page || isNaN(page)) {
-      this.textFieldRef.value = String(this.currentPage);
-    }
-    else {
-      this.internalcurrentpagechange.emit(page);
-    }
-  }
-  getPageListEnteries(currentPage, totalPages) {
-    return GuxPaginationButtonsService.getPageList(currentPage, totalPages).reduce((acc, cv) => {
+  getPageListEnteries(currentPage, totalPages, layout) {
+    return GuxPaginationButtonsService.displayAllPageButtons(currentPage, totalPages, layout).reduce((acc, cv) => {
       if (cv.current) {
-        return acc.concat((h("button", { class: "gux-pagination-buttons-list-button gux-current" }, cv.display)));
+        return acc.concat((h("button", { ref: el => (this.currentElement = el), class: "gux-pagination-buttons-list-current" }, cv.display)));
+      }
+      if (cv.display == '...') {
+        return acc.concat((h("gux-pagination-ellipsis-button", { totalPages: this.totalPages })));
       }
-      return acc.concat((h("button", { class: "gux-pagination-buttons-list-button gux-target", onClick: () => this.handleClickPage(cv.pageNumber) }, cv.display)));
+      return acc.concat((h("button", { class: "gux-pagination-buttons-list-target", onClick: () => this.handlePageChange(cv.pageNumber) }, cv.display)));
     }, []);
   }
-  getSmallPagePicker() {
-    return (h("div", { class: 'gux-pagination-buttons-spacer' }));
-  }
-  getExpandedPagePicker() {
-    return (h("div", { class: "gux-pagination-buttons-list-container" }, this.getPageListEnteries(this.currentPage, this.totalPages)));
-  }
-  getFullPagePicker() {
-    return (h("div", { class: "gux-pagination-buttons-input-container" }, h("div", null, this.i18n('page')), h("div", { class: "gux-pagination-buttons-input" }, h("gux-form-field-text-like", { "label-position": "screenreader" }, h("label", { slot: "label" }, this.i18n('pageInputLabel', {
-      currentPage: this.currentPage,
-      totalPages: this.totalPages
-    })), h("input", { type: "text", slot: "input", value: String(this.currentPage), ref: ref => (this.textFieldRef = ref), onChange: () => this.setPageFromInput(this.textFieldRef.value) }))), h("div", null, this.i18n('totalPages', { totalPages: this.totalPages }))));
-  }
-  getPagePicker(layout) {
-    if (layout === 'small') {
-      return this.getSmallPagePicker();
-    }
-    if (layout === 'expanded') {
-      return this.getExpandedPagePicker();
-    }
-    return this.getFullPagePicker();
+  getPageNavigation() {
+    return (h("div", { class: "gux-pagination-buttons-list-container" }, this.getPageListEnteries(this.currentPage, this.totalPages, this.layout)));
   }
   async componentWillLoad() {
     this.i18n = await buildI18nForComponent(this.root, paginationResources);
   }
   render() {
-    return (h("div", { class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { class: "gux-pagination-buttons-group" }, h("gux-button-slot-beta", { accent: "secondary" }, h("button", { title: this.i18n('first'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { decorative: true, "icon-name": "chevron-double-left" }))), h("gux-button-slot-beta", { accent: "secondary" }, h("button", { title: this.i18n('previous'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { decorative: true, "icon-name": "chevron-small-left" })))), this.getPagePicker(this.layout), h("div", { class: "gux-pagination-buttons-group" }, h("gux-button-slot-beta", { accent: "secondary" }, h("button", { title: this.i18n('next'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { decorative: true, "icon-name": "chevron-small-right" }))), h("gux-button-slot-beta", { accent: "secondary" }, h("button", { title: this.i18n('last'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { decorative: true, "icon-name": "chevron-double-right" }))))));
+    return (h("div", { class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { class: "gux-pagination-buttons-group" }, h("gux-button-slot", { accent: "ghost" }, h("button", { title: this.i18n('first'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { decorative: true, "icon-name": "chevron-double-left" }))), h("gux-button-slot", { accent: "ghost" }, h("button", { title: this.i18n('previous'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { decorative: true, "icon-name": "chevron-small-left" })))), this.getPageNavigation(), h("div", { class: "gux-pagination-buttons-group" }, h("gux-button-slot", { accent: "ghost" }, h("button", { title: this.i18n('next'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { decorative: true, "icon-name": "chevron-small-right" }))), h("gux-button-slot", { accent: "ghost" }, h("button", { title: this.i18n('last'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { decorative: true, "icon-name": "chevron-double-right" }))))));
   }
   static get is() { return "gux-pagination-buttons"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-pagination-buttons.less"]
+      "$": ["gux-pagination-buttons.scss"]
     };
   }
   static get styleUrls() {
@@ -88,7 +72,7 @@ export class GuxPaginationButtons {
     return {
       "currentPage": {
         "type": "number",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "number",
           "resolved": "number",
@@ -125,7 +109,7 @@ export class GuxPaginationButtons {
         "mutable": false,
         "complexType": {
           "original": "GuxPaginationLayout",
-          "resolved": "\"expanded\" | \"full\" | \"small\"",
+          "resolved": "\"advanced\" | \"simple\"",
           "references": {
             "GuxPaginationLayout": {
               "location": "import",
@@ -141,7 +125,7 @@ export class GuxPaginationButtons {
         },
         "attribute": "layout",
         "reflect": false,
-        "defaultValue": "'full'"
+        "defaultValue": "'advanced'"
       }
     };
   }
@@ -164,4 +148,13 @@ export class GuxPaginationButtons {
       }];
   }
   static get elementRef() { return "root"; }
+  static get listeners() {
+    return [{
+        "name": "goToPage",
+        "method": "goToPageHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

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

@@ -0,0 +1,31 @@
+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 {
+  outline: var(--gse-semantic-focusRing-width) solid var(--gse-semantic-color-focus);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+  border-radius: calc(var(--gse-semantic-focusRing-cornerRadius) - 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;
+}
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+}
+
+/* Works for Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}

package/dist/collection/components/{beta/gux-pagination-beta/gux-pagination-buttons-beta → stable/gux-pagination/gux-pagination-buttons}/gux-pagination-ellipsis-button/gux-pagination-ellipsis-button.js

@@ -84,13 +84,13 @@ export class GuxPaginationEllipsisButton {
     this.applyInputListener();
   }
   render() {
-    return (h(Host, null, h("button", { id: "popover-target", type: "button", ref: el => (this.ellipsisButton = el), onClick: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("gux-icon", { screenreaderText: this.i18n('goToPage'), "icon-name": "menu-kebab-horizontal" })), h("gux-tooltip", { for: "popover-target" }, this.i18n('goToPage')), h("gux-popover-beta", { "is-open": this.isOpen, for: "popover-target" }, h("span", { slot: "title" }, this.i18n('goToPage')), h("gux-form-field-number", null, h("input", { slot: "input", type: "number", ref: el => (this.inputElement = el), min: "1", max: this.totalPages, value: "1" }), h("label", { slot: "label" })))));
+    return (h(Host, null, h("button", { id: "popover-target", type: "button", ref: el => (this.ellipsisButton = el), onClick: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("gux-icon", { screenreaderText: this.i18n('goToPage'), "icon-name": "menu-kebab-horizontal" })), h("gux-tooltip", { for: "popover-target" }, this.i18n('goToPage')), h("gux-popover", { "is-open": this.isOpen, for: "popover-target" }, h("span", { slot: "title" }, this.i18n('goToPage')), h("gux-form-field-number", null, h("input", { slot: "input", type: "number", ref: el => (this.inputElement = el), min: "1", max: this.totalPages, value: "1" }), h("label", { slot: "label" })))));
   }
   static get is() { return "gux-pagination-ellipsis-button"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-pagination-ellipsis-button.less"]
+      "$": ["gux-pagination-ellipsis-button.scss"]
     };
   }
   static get styleUrls() {

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

@@ -1,9 +1,11 @@
-gux-pagination-item-counts {
-  color: #2e394c;
-}
 gux-pagination-item-counts .gux-pagination-item-counts-container {
+  display: flex;
+  flex-direction: row;
+  gap: var(--gse-ui-dataTableItems-tablePagination-countDisplay-gap);
   white-space: nowrap;
-}
-gux-pagination-item-counts .gux-pagination-item-counts-container .gux-pagination-item-counts-range {
-  font-weight: bold;
-}
+  font-family: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);
+  color: var(--gse-ui-dataTableItems-tablePagination-foregroundColor);
+  font-size: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);
+  line-height: var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);
+  font-weight: var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight);
+}

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

@@ -22,16 +22,21 @@ export class GuxPaginationItemCounts {
   async componentWillLoad() {
     this.i18n = await buildI18nForComponent(this.root, paginationResources);
   }
+  getPaginationItemCountsRange() {
+    if (this.totalItems) {
+      return (h("span", null, this.i18n('totalItems', { totalItems: this.totalItems })));
+    }
+  }
   render() {
     return (h("div", { class: "gux-pagination-item-counts-container" }, h("span", { class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
       firstItem: this.firstItem,
       lastItem: this.lastItem
-    })), h("span", null, this.i18n('totalItems', { totalItems: this.totalItems }))));
+    })), this.getPaginationItemCountsRange()));
   }
   static get is() { return "gux-pagination-item-counts"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-pagination-item-counts.less"]
+      "$": ["gux-pagination-item-counts.scss"]
     };
   }
   static get styleUrls() {

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

@@ -1,11 +1,9 @@
-gux-pagination-items-per-page {
-  color: #2e394c;
-}
 gux-pagination-items-per-page .gux-pagination-items-per-page-container {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-content: stretch;
+  gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
   align-items: center;
   justify-content: center;
 }
@@ -15,10 +13,19 @@ gux-pagination-items-per-page .gux-pagination-items-per-page-container > div {
   order: 0;
   white-space: nowrap;
 }
-gux-pagination-items-per-page .gux-pagination-items-per-page-container .gux-pagination-items-per-page-picker {
-  margin: 0 8px 0 16px;
-}
 gux-pagination-items-per-page .gux-pagination-items-per-page-container .gux-pagination-items-per-page-picker gux-dropdown {
   display: inline-block;
   width: 64px;
 }
+gux-pagination-items-per-page .gux-pagination-items-per-page-container gux-dropdown div.gux-dropdown .gux-options.gux-opened {
+  bottom: 100%;
+  display: flex;
+  flex-direction: column-reverse;
+}
+gux-pagination-items-per-page .gux-pagination-items-per-page-container .gux-pagination-per-page {
+  font-family: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);
+  color: var(--gse-ui-dataTableItems-tablePagination-foregroundColor);
+  font-size: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);
+  line-height: var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);
+  font-weight: var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight);
+}

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

@@ -19,12 +19,12 @@ 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", { class: "gux-pagination-items-per-page-container" }, h("div", { class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), h("div", null, this.i18n('perPage'))));
+    return (h("div", { class: "gux-pagination-items-per-page-container" }, h("div", { class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), h("div", { class: "gux-pagination-per-page" }, this.i18n('perPage'))));
   }
   static get is() { return "gux-pagination-items-per-page"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-pagination-items-per-page.less"]
+      "$": ["gux-pagination-items-per-page.scss"]
     };
   }
   static get styleUrls() {

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

@@ -1,7 +1,8 @@
 :host {
   display: block;
-  border-top: 1px solid #e2e6ee;
+  border-top: var(--gse-ui-dataTableItems-tablePagination-divider-width) var(--gse-ui-dataTableItems-tablePagination-divider-style) var(--gse-ui-dataTableItems-tablePagination-divider-color);
 }
+
 .gux-pagination-container {
   display: flex;
   flex-direction: row;
@@ -9,17 +10,19 @@
   align-content: stretch;
   align-items: center;
   justify-content: space-between;
-  height: 32px;
-  margin-top: 12px;
+  height: var(--gse-ui-dataTableItems-cell-tablePagination-height);
+  padding: var(--gse-ui-dataTableItems-tablePagination-padding);
+  background-color: var(--gse-ui-dataTableItems-tablePagination-defaultBackgroundColor);
 }
 .gux-pagination-container .gux-pagination-info {
   display: flex;
-  flex: 1 1 auto;
+  flex: 0 1 auto;
   flex-direction: row;
   flex-wrap: nowrap;
   align-content: stretch;
   align-items: center;
   align-self: auto;
+  gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
   justify-content: flex-start;
   order: 0;
 }
@@ -28,12 +31,16 @@
   align-self: auto;
   order: 0;
 }
-.gux-pagination-container .gux-pagination-change {
+.gux-pagination-container .gux-pagination-spacer {
   flex: 1 1 auto;
   align-self: auto;
   order: 0;
-  margin-left: 16px;
+}
+.gux-pagination-container .gux-pagination-change {
+  flex: 0 1 auto;
+  align-self: auto;
+  order: 0;
 }
 .gux-pagination-container .gux-pagination-change:first-child {
   margin-left: 0;
-}
+}

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

@@ -1,19 +1,23 @@
-import { h } from '@stencil/core';
+import { h, readTask } from '@stencil/core';
+import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
 import { trackComponent } from '@utils/tracking/usage';
+const minAdvancedSpacerWidth = 24;
 export class GuxPagination {
   constructor() {
+    this.reinstateLayoutBreakpoint = 0;
+    this.layout = 'advanced';
     this.currentPage = 1;
     this.totalItems = 0;
     this.itemsPerPage = 25;
-    this.layout = 'full';
     this.totalPages = undefined;
+    this.displayedLayout = undefined;
   }
   setPage(page) {
     if (page <= 0) {
       this.setPage(1);
       return;
     }
-    const totalPages = this.calculateTotalPages();
+    const totalPages = this.calculateTotalPages(this.totalItems, this.itemsPerPage);
     if (page > totalPages) {
       this.setPage(totalPages);
       return;
@@ -24,13 +28,6 @@ export class GuxPagination {
       itemsPerPage: this.itemsPerPage
     });
   }
-  calculateTotalPages() {
-    return Math.max(1, Math.ceil(this.totalItems / this.itemsPerPage));
-  }
-  calculateCurrentPage() {
-    const minCurrentPage = this.totalPages > 0 ? 1 : 0;
-    return Math.max(minCurrentPage, Math.min(this.currentPage, this.totalPages));
-  }
   handleInternalitemsperpagechange(event) {
     this.itemsPerPage = event.detail;
     this.setPage(1);
@@ -38,33 +35,61 @@ export class GuxPagination {
   handleInternalcurrentpagechange(event) {
     this.setPage(event.detail);
   }
-  getPaginationInfoElement(layout) {
-    if (layout === 'expanded') {
-      return null;
-    }
-    const content = [
-      h("gux-pagination-item-counts", { "total-items": this.totalItems, "current-page": this.currentPage, "items-per-page": this.itemsPerPage })
-    ];
-    if (layout === 'full') {
-      content.push(h("gux-pagination-items-per-page", { "items-per-page": this.itemsPerPage, onInternalitemsperpagechange: this.handleInternalitemsperpagechange.bind(this) }));
-    }
-    return (h("div", { class: "gux-pagination-info" }, content));
+  calculateTotalPages(totalItems, itemsPerPage) {
+    return Math.max(1, Math.ceil(totalItems / itemsPerPage));
+  }
+  calculateCurrentPage(totalPages, currentPage) {
+    const minCurrentPage = totalPages > 0 ? 1 : 0;
+    return Math.max(minCurrentPage, Math.min(currentPage, totalPages));
+  }
+  checkPaginationContainerWidthForLayout() {
+    readTask(() => {
+      const container = this.root.shadowRoot.querySelector('.gux-pagination-container');
+      const spacer = this.root.shadowRoot.querySelector('.gux-pagination-spacer');
+      const containerWidth = container.clientWidth;
+      const spacerWidth = spacer.clientWidth;
+      if (spacerWidth < minAdvancedSpacerWidth &&
+        this.displayedLayout !== 'simple') {
+        this.reinstateLayoutBreakpoint = containerWidth;
+        this.displayedLayout = 'simple';
+      }
+      else if (containerWidth > this.reinstateLayoutBreakpoint) {
+        this.reinstateLayoutBreakpoint = 0;
+        this.displayedLayout = this.layout;
+      }
+    });
   }
   componentWillLoad() {
     trackComponent(this.root, { variant: this.layout });
   }
   componentWillRender() {
-    this.totalPages = this.calculateTotalPages();
-    this.currentPage = this.calculateCurrentPage();
+    this.totalPages = this.calculateTotalPages(this.totalItems, this.itemsPerPage);
+    this.currentPage = this.calculateCurrentPage(this.totalPages, this.currentPage);
+  }
+  disconnectedCallback() {
+    if (this.resizeObserver) {
+      this.resizeObserver.unobserve(this.root.shadowRoot.querySelector('.gux-pagination-container'));
+    }
+  }
+  componentDidLoad() {
+    if (!this.resizeObserver && window.ResizeObserver) {
+      this.resizeObserver = new ResizeObserver(() => this.checkPaginationContainerWidthForLayout());
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.observe(this.root.shadowRoot.querySelector('.gux-pagination-container'));
+    }
+    afterNextRenderTimeout(() => {
+      this.checkPaginationContainerWidthForLayout();
+    }, 500);
   }
   render() {
-    return (h("div", { class: "gux-pagination-container" }, this.getPaginationInfoElement(this.layout), h("div", { class: "gux-pagination-change" }, h("gux-pagination-buttons", { layout: this.layout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
+    return (h("div", { class: "gux-pagination-container" }, h("div", { class: "gux-pagination-info" }, h("gux-pagination-item-counts", { "total-items": this.totalItems, "current-page": this.currentPage, "items-per-page": this.itemsPerPage }), this.displayedLayout === 'advanced' && (h("gux-pagination-items-per-page", { "items-per-page": this.itemsPerPage, onInternalitemsperpagechange: this.handleInternalitemsperpagechange.bind(this) }))), h("div", { class: "gux-pagination-spacer" }), h("div", { class: "gux-pagination-change" }, h("gux-pagination-buttons", { 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"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-pagination.less"]
+      "$": ["gux-pagination.scss"]
     };
   }
   static get styleUrls() {
@@ -74,6 +99,29 @@ export class GuxPagination {
   }
   static get properties() {
     return {
+      "layout": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "GuxPaginationLayout",
+          "resolved": "\"advanced\" | \"simple\"",
+          "references": {
+            "GuxPaginationLayout": {
+              "location": "import",
+              "path": "./gux-pagination.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The pagination component can have different layouts to suit the available space"
+        },
+        "attribute": "layout",
+        "reflect": false,
+        "defaultValue": "'advanced'"
+      },
       "currentPage": {
         "type": "number",
         "mutable": true,
@@ -119,7 +167,7 @@ export class GuxPagination {
           "references": {
             "GuxItemsPerPage": {
               "location": "import",
-              "path": "./gux-pagination.types"
+              "path": "../../legacy/gux-pagination-legacy/gux-pagination.types"
             }
           }
         },
@@ -132,35 +180,13 @@ export class GuxPagination {
         "attribute": "items-per-page",
         "reflect": false,
         "defaultValue": "25"
-      },
-      "layout": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "GuxPaginationLayout",
-          "resolved": "\"expanded\" | \"full\" | \"small\"",
-          "references": {
-            "GuxPaginationLayout": {
-              "location": "import",
-              "path": "./gux-pagination.types"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The pagination component can have different layouts to suit the available space"
-        },
-        "attribute": "layout",
-        "reflect": false,
-        "defaultValue": "'full'"
       }
     };
   }
   static get states() {
     return {
-      "totalPages": {}
+      "totalPages": {},
+      "displayedLayout": {}
     };
   }
   static get events() {
@@ -180,7 +206,7 @@ export class GuxPagination {
           "references": {
             "GuxPaginationState": {
               "location": "import",
-              "path": "./gux-pagination.types"
+              "path": "../../legacy/gux-pagination-legacy/gux-pagination.types"
             }
           }
         }