genesys-spark-components 4.0.0-beta.4 → 4.0.0-beta.41

package/dist/cjs/gux-pagination-buttons_3.cjs.entry.js

@@ -2,87 +2,59 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const index$1 = require('./index-9bbde1aa.js');
-require('./get-closest-element-ab4b2eee.js');
-
-const page = "Page";
-const totalPages = " of {totalPages, number}";
-const first = "First";
-const previous = "Previous";
-const next = "Next";
-const last = "Last";
-const pageInputLabel = "Page {currentPage, number} of {totalPages, number}";
-const paginationResources$2 = {
-	page: page,
-	totalPages: totalPages,
-	first: first,
-	previous: previous,
-	next: next,
-	last: last,
-	pageInputLabel: pageInputLabel
-};
+const index = require('./index-39160f18.js');
+const index$1 = require('./index-ff762de3.js');
+const en = require('./en-f88c1935.js');
+const afterNextRender = require('./after-next-render-a023ef47.js');
+require('./get-closest-element-26894e5a.js');
 
 class GuxPaginationButtonsService {
-  static getPageList(currentPage, totalPages) {
-    if (totalPages <= 10) {
-      return [...Array(totalPages).keys()].map(index => {
-        const pageNumber = index + 1;
-        return {
-          pageNumber,
-          display: String(pageNumber),
-          current: pageNumber === currentPage
-        };
-      });
-    }
-    if (currentPage <= 5) {
-      const startPageList = [...Array(6).keys()].map(index => {
-        const pageNumber = index + 1;
-        return {
-          pageNumber,
-          display: String(pageNumber),
-          current: pageNumber === currentPage
-        };
-      });
-      return [
-        ...startPageList,
-        {
-          pageNumber: 7,
-          display: '...',
-          current: false
-        },
-        {
-          pageNumber: totalPages,
-          display: String(totalPages),
-          current: false
-        }
-      ];
-    }
-    if (currentPage > totalPages - 5) {
-      const endPageList = [...Array(6).keys()].map(index => {
-        const pageNumber = index + totalPages - 5;
-        return {
-          pageNumber,
-          display: String(pageNumber),
-          current: pageNumber === currentPage
-        };
-      });
-      return [
-        {
-          pageNumber: 1,
-          display: '1',
-          current: false
-        },
-        {
-          pageNumber: totalPages - 6,
-          display: '...',
-          current: false
-        },
-        ...endPageList
-      ];
+  static displayAllPageButtons(currentPage, totalPages, layout) {
+    switch (layout) {
+      case 'advanced':
+        return getAdvancedList(currentPage, totalPages);
+      case 'simple':
+        return getSimpleList(currentPage, totalPages);
     }
-    const middlePageList = [...Array(5).keys()].map(index => {
-      const pageNumber = index + currentPage - 2;
+  }
+}
+function getAdvancedList(currentPage, totalPages) {
+  if (totalPages <= 7) {
+    return [...Array(totalPages).keys()].map(index => {
+      const pageNumber = index + 1;
+      return {
+        pageNumber,
+        display: String(pageNumber),
+        current: pageNumber === currentPage
+      };
+    });
+  }
+  if (currentPage <= 3) {
+    const startPageList = [...Array(5).keys()].map(index => {
+      const pageNumber = index + 1;
+      return {
+        pageNumber,
+        display: String(pageNumber),
+        current: pageNumber === currentPage
+      };
+    });
+    return [
+      ...startPageList,
+      {
+        pageNumber: 6,
+        display: '...',
+        current: false
+      },
+      {
+        pageNumber: totalPages,
+        display: String(totalPages),
+        current: false
+      }
+    ];
+  }
+  if (currentPage > totalPages - 3) {
+    const endPageList = [...Array(5).keys()].map(index => {
+      const pageNumber = index + totalPages - 4;
       return {
         pageNumber,
         display: String(pageNumber),
@@ -96,26 +68,82 @@ class GuxPaginationButtonsService {
         current: false
       },
       {
-        pageNumber: currentPage - 3,
+        pageNumber: totalPages - 6,
         display: '...',
         current: false
       },
-      ...middlePageList,
+      ...endPageList
+    ];
+  }
+  const middlePageList = [...Array(3).keys()].map(index => {
+    const pageNumber = index + currentPage - 1;
+    return {
+      pageNumber,
+      display: String(pageNumber),
+      current: pageNumber === currentPage
+    };
+  });
+  return [
+    {
+      pageNumber: 1,
+      display: '1',
+      current: false
+    },
+    {
+      pageNumber: currentPage - 3,
+      display: '...',
+      current: false
+    },
+    ...middlePageList,
+    {
+      pageNumber: currentPage + 3,
+      display: '...',
+      current: false
+    },
+    {
+      pageNumber: totalPages,
+      display: String(totalPages),
+      current: false
+    }
+  ];
+}
+function getSimpleList(currentPage, totalPages) {
+  if (totalPages <= 3) {
+    return [...Array(totalPages).keys()].map(index => {
+      const pageNumber = index + 1;
+      return {
+        pageNumber,
+        display: String(pageNumber),
+        current: pageNumber === currentPage
+      };
+    });
+  }
+  if (totalPages >= 4) {
+    const startPageList = [...Array(1).keys()].map(index => {
+      const pageNumber = index + currentPage;
+      return {
+        pageNumber,
+        display: String(pageNumber),
+        current: pageNumber !== totalPages
+      };
+    });
+    return [
+      ...startPageList,
       {
-        pageNumber: currentPage + 3,
+        pageNumber: currentPage,
         display: '...',
         current: false
       },
       {
         pageNumber: totalPages,
         display: String(totalPages),
-        current: false
+        current: totalPages == currentPage
       }
     ];
   }
 }
 
-const guxPaginationButtonsCss = "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;justify-content:flex-end}gux-pagination-buttons .gux-pagination-buttons-container.gux-expanded{justify-content:center}gux-pagination-buttons .gux-pagination-buttons-container>div{flex:0 1 auto;align-self:auto;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;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-wrap:nowrap;align-content:stretch;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;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;cursor:pointer}gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-spacer{width:12px}";
+const guxPaginationButtonsCss = "gux-pagination-buttons .gux-pagination-buttons-container{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);align-content:stretch;align-items:center;justify-content:flex-end;margin-left:var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap)}gux-pagination-buttons .gux-pagination-buttons-container>div{flex:0 1 auto;align-self:auto;order:0}gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-group{display:flex;flex-direction:row;gap:var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);white-space:nowrap}gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container{display:flex;flex-direction:row;flex-shrink:0;flex-wrap:nowrap;gap:var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);align-content:stretch;align-items:center;justify-content:center}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-right:var(--gse-ui-dataTableItems-tablePagination-padding);padding-left:var(--gse-ui-dataTableItems-tablePagination-padding);margin:0;font-family:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);font-size:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);font-weight:var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight);line-height:var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);color:var(--gse-ui-dataTableItems-tablePagination-foregroundColor);background:inherit;border:none}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{border-radius:calc(var(--gse-semantic-focusRing-cornerRadius) - var(--gse-semantic-focusRing-offset));outline:var(--gse-semantic-focusRing-width) solid var(--gse-semantic-color-focus);outline-offset:var(--gse-semantic-focusRing-offset)}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-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)}";
 
 const GuxPaginationButtons = class {
   constructor(hostRef) {
@@ -123,7 +151,14 @@ const GuxPaginationButtons = class {
     this.internalcurrentpagechange = index.createEvent(this, "internalcurrentpagechange", 3);
     this.currentPage = undefined;
     this.totalPages = undefined;
-    this.layout = 'full';
+    this.layout = 'advanced';
+  }
+  goToPageHandler(event) {
+    this.currentPage = event.detail;
+    this.handlePageChange(this.currentPage);
+    afterNextRender.afterNextRender(() => {
+      this.currentElement.focus();
+    });
   }
   get onFirstPage() {
     return this.currentPage <= 1;
@@ -143,52 +178,28 @@ const GuxPaginationButtons = class {
   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((index.h("button", { class: "gux-pagination-buttons-list-button gux-current" }, cv.display)));
+        return acc.concat((index.h("button", { ref: el => (this.currentElement = el), class: "gux-pagination-buttons-list-current" }, cv.display)));
+      }
+      if (cv.display == '...') {
+        return acc.concat((index.h("gux-pagination-ellipsis-button", { totalPages: this.totalPages })));
       }
-      return acc.concat((index.h("button", { class: "gux-pagination-buttons-list-button gux-target", onClick: () => this.handleClickPage(cv.pageNumber) }, cv.display)));
+      return acc.concat((index.h("button", { class: "gux-pagination-buttons-list-target", onClick: () => this.handlePageChange(cv.pageNumber) }, cv.display)));
     }, []);
   }
-  getSmallPagePicker() {
-    return (index.h("div", { class: 'gux-pagination-buttons-spacer' }));
-  }
-  getExpandedPagePicker() {
-    return (index.h("div", { class: "gux-pagination-buttons-list-container" }, this.getPageListEnteries(this.currentPage, this.totalPages)));
-  }
-  getFullPagePicker() {
-    return (index.h("div", { class: "gux-pagination-buttons-input-container" }, index.h("div", null, this.i18n('page')), index.h("div", { class: "gux-pagination-buttons-input" }, index.h("gux-form-field-text-like", { "label-position": "screenreader" }, index.h("label", { slot: "label" }, this.i18n('pageInputLabel', {
-      currentPage: this.currentPage,
-      totalPages: this.totalPages
-    })), index.h("input", { type: "text", slot: "input", value: String(this.currentPage), ref: ref => (this.textFieldRef = ref), onChange: () => this.setPageFromInput(this.textFieldRef.value) }))), index.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 (index.h("div", { class: "gux-pagination-buttons-list-container" }, this.getPageListEnteries(this.currentPage, this.totalPages, this.layout)));
   }
   async componentWillLoad() {
-    this.i18n = await index$1.buildI18nForComponent(this.root, paginationResources$2);
+    this.i18n = await index$1.buildI18nForComponent(this.root, en.translationResources);
   }
   render() {
-    return (index.h("div", { class: `gux-pagination-buttons-container gux-${this.layout}` }, index.h("div", { class: "gux-pagination-buttons-group" }, index.h("gux-button-slot-beta", { accent: "secondary" }, index.h("button", { title: this.i18n('first'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, index.h("gux-icon", { decorative: true, "icon-name": "chevron-double-left" }))), index.h("gux-button-slot-beta", { accent: "secondary" }, index.h("button", { title: this.i18n('previous'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, index.h("gux-icon", { decorative: true, "icon-name": "chevron-small-left" })))), this.getPagePicker(this.layout), index.h("div", { class: "gux-pagination-buttons-group" }, index.h("gux-button-slot-beta", { accent: "secondary" }, index.h("button", { title: this.i18n('next'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, index.h("gux-icon", { decorative: true, "icon-name": "chevron-small-right" }))), index.h("gux-button-slot-beta", { accent: "secondary" }, index.h("button", { title: this.i18n('last'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, index.h("gux-icon", { decorative: true, "icon-name": "chevron-double-right" }))))));
+    return (index.h("div", { class: `gux-pagination-buttons-container gux-${this.layout}` }, index.h("div", { class: "gux-pagination-buttons-group" }, index.h("gux-button-slot", { accent: "ghost" }, index.h("button", { title: this.i18n('first'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, index.h("gux-icon", { decorative: true, "icon-name": "chevron-double-left" }))), index.h("gux-button-slot", { accent: "ghost" }, index.h("button", { title: this.i18n('previous'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, index.h("gux-icon", { decorative: true, "icon-name": "chevron-small-left" })))), this.getPageNavigation(), index.h("div", { class: "gux-pagination-buttons-group" }, index.h("gux-button-slot", { accent: "ghost" }, index.h("button", { title: this.i18n('next'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, index.h("gux-icon", { decorative: true, "icon-name": "chevron-small-right" }))), index.h("gux-button-slot", { accent: "ghost" }, index.h("button", { title: this.i18n('last'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, index.h("gux-icon", { decorative: true, "icon-name": "chevron-double-right" }))))));
   }
   get root() { return index.getElement(this); }
 };
@@ -201,7 +212,7 @@ const paginationResources$1 = {
 	totalItems: totalItems
 };
 
-const guxPaginationItemCountsCss = "gux-pagination-item-counts{color:#2e394c}gux-pagination-item-counts .gux-pagination-item-counts-container{white-space:nowrap}gux-pagination-item-counts .gux-pagination-item-counts-container .gux-pagination-item-counts-range{font-weight:bold}";
+const guxPaginationItemCountsCss = "gux-pagination-item-counts .gux-pagination-item-counts-container{display:flex;flex-direction:row;gap:var(--gse-ui-dataTableItems-tablePagination-countDisplay-gap);font-family:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);font-size:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);font-weight:var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight);line-height:var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);color:var(--gse-ui-dataTableItems-tablePagination-foregroundColor);white-space:nowrap}";
 
 const GuxPaginationItemCounts = class {
   constructor(hostRef) {
@@ -225,11 +236,16 @@ const GuxPaginationItemCounts = class {
   async componentWillLoad() {
     this.i18n = await index$1.buildI18nForComponent(this.root, paginationResources$1);
   }
+  getPaginationItemCountsRange() {
+    if (this.totalItems) {
+      return (index.h("span", null, this.i18n('totalItems', { totalItems: this.totalItems })));
+    }
+  }
   render() {
     return (index.h("div", { class: "gux-pagination-item-counts-container" }, index.h("span", { class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
       firstItem: this.firstItem,
       lastItem: this.lastItem
-    })), index.h("span", null, this.i18n('totalItems', { totalItems: this.totalItems }))));
+    })), this.getPaginationItemCountsRange()));
   }
   get root() { return index.getElement(this); }
 };
@@ -244,7 +260,7 @@ const paginationResources = {
 	rangeSelected: rangeSelected
 };
 
-const guxPaginationItemsPerPageCss = "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;align-items:center;justify-content:center}gux-pagination-items-per-page .gux-pagination-items-per-page-container>div{flex:0 1 auto;align-self:auto;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}";
+const guxPaginationItemsPerPageCss = "gux-pagination-items-per-page .gux-pagination-items-per-page-container{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);align-content:stretch;align-items:center;justify-content:center}gux-pagination-items-per-page .gux-pagination-items-per-page-container>div{flex:0 1 auto;align-self:auto;order:0;white-space:nowrap}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);font-size:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);font-weight:var(--gse-ui-dataTableItems-tablePagination-currentResultText-fontWeight);line-height:var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);color:var(--gse-ui-dataTableItems-tablePagination-foregroundColor)}";
 
 const GuxPaginationItemsPerPage = class {
   constructor(hostRef) {
@@ -266,7 +282,7 @@ const GuxPaginationItemsPerPage = class {
       }) }, index.h("gux-listbox", { "aria-label": this.i18n('itemsPerPage') }, index.h("gux-option", { value: "25" }, "25"), index.h("gux-option", { value: "50" }, "50"), index.h("gux-option", { value: "75" }, "75"), index.h("gux-option", { value: "100" }, "100"))));
   }
   render() {
-    return (index.h("div", { class: "gux-pagination-items-per-page-container" }, index.h("div", { class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), index.h("div", null, this.i18n('perPage'))));
+    return (index.h("div", { class: "gux-pagination-items-per-page-container" }, index.h("div", { class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), index.h("div", { class: "gux-pagination-per-page" }, this.i18n('perPage'))));
   }
   get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-pagination-cursor.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-010f0789.js');
-const index$1 = require('./index-9bbde1aa.js');
-require('./get-closest-element-ab4b2eee.js');
+const index = require('./index-39160f18.js');
+const usage = require('./usage-7bd0f4a2.js');
+const index$1 = require('./index-ff762de3.js');
+require('./get-closest-element-26894e5a.js');
 
 const previous = "Previous";
 const next = "Next";
@@ -14,7 +14,7 @@ const translationResources = {
 	next: next
 };
 
-const guxPaginationCursorCss = ":host{display:flex;flex-direction:row-reverse;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:space-between;padding:12px;border-top:1px solid #e2e6ee}:host .gux-pagination-button-container{display:flex;flex-wrap:nowrap;justify-content:space-between}:host button{color:#2e394c}:host button[disabled]{color:rgba(46, 57, 76, 0.5)}:host .gux-button-align-content{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:center;align-items:center;justify-content:center}:host .gux-button-align-content>*{flex:0 1 auto;align-self:auto;order:0}:host .gux-button-align-content>.gux-icon-previous{padding-right:4px}:host .gux-button-align-content>.gux-icon-next{padding-left:4px}:host gux-icon{width:16px;height:16px}:host gux-button-slot-beta.gux-previous{margin-right:12px}:host gux-button-slot-beta.gux-next{margin-left:12px}:host .gux-simple-button{padding:0}";
+const guxPaginationCursorCss = ":host{display:flex;flex-direction:row-reverse;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:space-between;padding:var(--gse-ui-dataTableItems-tablePagination-padding);font-family:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);font-size:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);font-weight:var(--gse-ui-dataTableItems-tablePagination-defaultText-fontWeight);line-height:var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);color:var(--gse-ui-dataTableItems-tablePagination-foregroundColor);background-color:var(--gse-ui-dataTableItems-tablePagination-defaultBackgroundColor);border-top:var(--gse-ui-dataTableItems-tablePagination-divider-width) var(--gse-ui-dataTableItems-tablePagination-divider-style) var(--gse-ui-dataTableItems-tablePagination-divider-color)}:host .gux-pagination-button-container{display:flex;flex-wrap:nowrap;gap:var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);align-content:center}:host .gux-button-align-content{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-button-gap);align-content:center;align-items:center}:host .gux-button-align-content>*{flex:0 1 auto;align-self:auto;order:0}:host gux-icon{width:var(--gse-ui-button-icon-size);height:var(--gse-ui-button-icon-size)}";
 
 const GuxPaginationCursor = class {
   constructor(hostRef) {
@@ -41,12 +41,12 @@ const GuxPaginationCursor = class {
   }
   renderSimpleLayout() {
     return [
-      index.h("div", { role: "navigation", class: "gux-pagination-button-container" }, index.h("gux-button-slot-beta", { accent: "ghost", class: "gux-previous" }, index.h("button", { class: "gux-simple-button", type: "button", disabled: !this.hasPrevious, onClick: () => this.onButtonClick('previous') }, index.h("gux-icon", { iconName: "chevron-small-left", "screenreader-text": this.i18n('previous') }))), index.h("gux-button-slot-beta", { accent: "ghost", class: "gux-next" }, index.h("button", { class: "gux-simple-button", type: "button", disabled: !this.hasNext, onClick: () => this.onButtonClick('next') }, index.h("gux-icon", { iconName: "chevron-small-right", "screenreader-text": this.i18n('next') }))))
+      index.h("div", { role: "navigation", class: "gux-pagination-button-container" }, index.h("gux-button-slot", { accent: "ghost" }, index.h("button", { class: "gux-simple-button", type: "button", disabled: !this.hasPrevious, onClick: () => this.onButtonClick('previous') }, index.h("gux-icon", { iconName: "chevron-small-left", "screenreader-text": this.i18n('previous') }))), index.h("gux-button-slot", { accent: "ghost" }, index.h("button", { class: "gux-simple-button", type: "button", disabled: !this.hasNext, onClick: () => this.onButtonClick('next') }, index.h("gux-icon", { iconName: "chevron-small-right", "screenreader-text": this.i18n('next') }))))
     ];
   }
   renderAdvancedLayout() {
     return [
-      index.h("div", { role: "navigation", class: "gux-pagination-button-container" }, index.h("gux-button-slot-beta", { accent: "ghost", class: "gux-previous" }, index.h("button", { type: "button", disabled: !this.hasPrevious, onClick: () => this.onButtonClick('previous') }, index.h("div", { class: "gux-button-align-content" }, index.h("gux-icon", { class: "gux-icon-previous", decorative: true, iconName: "chevron-small-left" }), index.h("span", null, this.i18n('previous'))))), index.h("gux-button-slot-beta", { accent: "ghost", class: "gux-next" }, index.h("button", { type: "button", disabled: !this.hasNext, onClick: () => this.onButtonClick('next') }, index.h("div", { class: "gux-button-align-content" }, index.h("span", null, this.i18n('next')), index.h("gux-icon", { class: "gux-icon-next", decorative: true, iconName: "chevron-small-right" }))))),
+      index.h("div", { role: "navigation", class: "gux-pagination-button-container" }, index.h("gux-button-slot", { accent: "ghost" }, index.h("button", { type: "button", disabled: !this.hasPrevious, onClick: () => this.onButtonClick('previous') }, index.h("div", { class: "gux-button-align-content" }, index.h("gux-icon", { decorative: true, iconName: "chevron-small-left" }), index.h("span", null, this.i18n('previous'))))), index.h("gux-button-slot", { accent: "ghost" }, index.h("button", { type: "button", disabled: !this.hasNext, onClick: () => this.onButtonClick('next') }, index.h("div", { class: "gux-button-align-content" }, index.h("span", null, this.i18n('next')), index.h("gux-icon", { decorative: true, iconName: "chevron-small-right" }))))),
       this.renderItemsPerPage()
     ];
   }

package/dist/cjs/gux-pagination-legacy.cjs.entry.js

@@ -0,0 +1,76 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-39160f18.js');
+const usage = require('./usage-7bd0f4a2.js');
+
+const guxPaginationLegacyCss = ":host{display:block;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;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:space-between;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-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);align-content:stretch;align-items:center;align-self:auto;justify-content:flex-start;order:0}.gux-pagination-container .gux-pagination-info>*{flex:0 1 auto;align-self:auto;order:0}.gux-pagination-container .gux-pagination-change{flex:1 1 auto;align-self:auto;order:0}.gux-pagination-container .gux-pagination-change:first-child{margin-left:0}";
+
+const GuxPaginationLegacy = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.guxpaginationchange = index.createEvent(this, "guxpaginationchange", 7);
+    this.currentPage = 1;
+    this.totalItems = 0;
+    this.itemsPerPage = 25;
+    this.layout = 'full';
+    this.totalPages = undefined;
+  }
+  setPage(page) {
+    if (page <= 0) {
+      this.setPage(1);
+      return;
+    }
+    const totalPages = this.calculateTotalPages();
+    if (page > totalPages) {
+      this.setPage(totalPages);
+      return;
+    }
+    this.currentPage = page;
+    this.guxpaginationchange.emit({
+      currentPage: this.currentPage,
+      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);
+  }
+  handleInternalcurrentpagechange(event) {
+    this.setPage(event.detail);
+  }
+  getPaginationInfoElement(layout) {
+    if (layout === 'expanded') {
+      return null;
+    }
+    const content = [
+      index.h("gux-pagination-item-counts-legacy", { "total-items": this.totalItems, "current-page": this.currentPage, "items-per-page": this.itemsPerPage })
+    ];
+    if (layout === 'full') {
+      content.push(index.h("gux-pagination-items-per-page-legacy", { "items-per-page": this.itemsPerPage, onInternalitemsperpagechange: this.handleInternalitemsperpagechange.bind(this) }));
+    }
+    return (index.h("div", { class: "gux-pagination-info" }, content));
+  }
+  componentWillLoad() {
+    usage.trackComponent(this.root, { variant: this.layout });
+  }
+  componentWillRender() {
+    this.totalPages = this.calculateTotalPages();
+    this.currentPage = this.calculateCurrentPage();
+  }
+  render() {
+    return (index.h("div", { class: "gux-pagination-container" }, this.getPaginationInfoElement(this.layout), index.h("div", { class: "gux-pagination-change" }, index.h("gux-pagination-buttons-legacy", { layout: this.layout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
+  }
+  get root() { return index.getElement(this); }
+};
+GuxPaginationLegacy.style = guxPaginationLegacyCss;
+
+exports.gux_pagination_legacy = GuxPaginationLegacy;

package/dist/cjs/gux-pagination.cjs.entry.js

@@ -2,27 +2,31 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-010f0789.js');
+const index = require('./index-39160f18.js');
+const afterNextRender = require('./after-next-render-a023ef47.js');
+const usage = require('./usage-7bd0f4a2.js');
 
-const guxPaginationCss = ":host{display:block;border-top:1px solid #e2e6ee}.gux-pagination-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:space-between;height:32px;margin-top:12px}.gux-pagination-container .gux-pagination-info{display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;align-self:auto;justify-content:flex-start;order:0}.gux-pagination-container .gux-pagination-info>*{flex:0 1 auto;align-self:auto;order:0}.gux-pagination-container .gux-pagination-change{flex:1 1 auto;align-self:auto;order:0;margin-left:16px}.gux-pagination-container .gux-pagination-change:first-child{margin-left:0}";
+const guxPaginationCss = ":host{display:block;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;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:space-between;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:0 1 auto;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);align-content:stretch;align-items:center;align-self:auto;justify-content:flex-start;order:0}.gux-pagination-container .gux-pagination-info>*{flex:0 1 auto;align-self:auto;order:0}.gux-pagination-container .gux-pagination-spacer{flex:1 1 auto;align-self:auto;order:0}.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}";
 
+const minAdvancedSpacerWidth = 24;
 const GuxPagination = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.guxpaginationchange = index.createEvent(this, "guxpaginationchange", 7);
+    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;
@@ -33,13 +37,6 @@ const GuxPagination = class {
       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);
@@ -47,27 +44,55 @@ const GuxPagination = class {
   handleInternalcurrentpagechange(event) {
     this.setPage(event.detail);
   }
-  getPaginationInfoElement(layout) {
-    if (layout === 'expanded') {
-      return null;
-    }
-    const content = [
-      index.h("gux-pagination-item-counts", { "total-items": this.totalItems, "current-page": this.currentPage, "items-per-page": this.itemsPerPage })
-    ];
-    if (layout === 'full') {
-      content.push(index.h("gux-pagination-items-per-page", { "items-per-page": this.itemsPerPage, onInternalitemsperpagechange: this.handleInternalitemsperpagechange.bind(this) }));
-    }
-    return (index.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() {
+    index.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() {
     usage.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'));
+    }
+    afterNextRender.afterNextRenderTimeout(() => {
+      this.checkPaginationContainerWidthForLayout();
+    }, 500);
   }
   render() {
-    return (index.h("div", { class: "gux-pagination-container" }, this.getPaginationInfoElement(this.layout), index.h("div", { class: "gux-pagination-change" }, index.h("gux-pagination-buttons", { layout: this.layout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
+    return (index.h("div", { class: "gux-pagination-container" }, index.h("div", { class: "gux-pagination-info" }, index.h("gux-pagination-item-counts", { "total-items": this.totalItems, "current-page": this.currentPage, "items-per-page": this.itemsPerPage }), this.displayedLayout === 'advanced' && (index.h("gux-pagination-items-per-page", { "items-per-page": this.itemsPerPage, onInternalitemsperpagechange: this.handleInternalitemsperpagechange.bind(this) }))), index.h("div", { class: "gux-pagination-spacer" }), index.h("div", { class: "gux-pagination-change" }, index.h("gux-pagination-buttons", { layout: this.displayedLayout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
   }
   get root() { return index.getElement(this); }
 };