@getflip/swirl-components 0.40.1 → 0.41.0

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

@@ -5,12 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-83363034.js');
 const index$1 = require('./index-2ddd0598.js');
 
-const swirlPaginationCss = ":host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host *{box-sizing:border-box}.pagination{display:block;width:100%}.pagination--variant-simple .pagination__list{gap:0}.pagination__list{display:flex;margin:0;padding:0;justify-content:flex-start;align-items:center;line-height:var(--s-line-height-base);list-style:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.pagination__list{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.pagination__page-label{padding-right:var(--s-space-8);padding-left:var(--s-space-8)}.pagination__advanced-label{display:flex;align-items:center;white-space:nowrap;gap:var(--s-space-8)}.pagination__page-select-container{position:relative}.pagination__page-select{display:inline-flex;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);border:none;border-radius:var(--s-border-radius-sm);background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:center;cursor:pointer;box-shadow:inset 0 0 0 var(--s-border-width-default) var(--s-border-strong);-webkit-appearance:none;-moz-appearance:none;appearance:none}.pagination__page-select:focus:not(:focus-visible){outline:none}.pagination__page-select:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.pagination__page-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
+const swirlPaginationCss = ":host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host *{box-sizing:border-box}.pagination{display:block;width:100%}.pagination--variant-simple .pagination__list{gap:0}.pagination__list{display:flex;margin:0;padding:0;justify-content:flex-start;align-items:center;line-height:var(--s-line-height-base);list-style:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.pagination__list{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.pagination__page-size-selection{display:flex;padding-right:var(--s-space-24);flex-shrink:0;align-items:center;color:var(--s-interactive-primary-default);white-space:nowrap;gap:var(--s-space-8)}.pagination__page-size-select-container{position:relative}.pagination__page-size-select{padding-right:calc(1rem + var(--s-space-4));border:none;color:var(--s-interactive-primary-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pagination__page-size-select:focus:not(:focus-visible){outline:none}.pagination__page-size-select:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.pagination__page-size-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.pagination__page-size-select-icon{position:absolute;top:50%;right:0;transform:translateY(-50%);pointer-events:none}.pagination__page-label{padding-right:var(--s-space-8);padding-left:var(--s-space-8)}.pagination__advanced-label{display:flex;align-items:center;white-space:nowrap;gap:var(--s-space-8)}.pagination__page-select-container{position:relative}.pagination__page-select{display:inline-flex;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);border:none;border-radius:var(--s-border-radius-sm);background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:center;cursor:pointer;box-shadow:inset 0 0 0 var(--s-border-width-default) var(--s-border-strong);-webkit-appearance:none;-moz-appearance:none;appearance:none}.pagination__page-select:focus:not(:focus-visible){outline:none}.pagination__page-select:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.pagination__page-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
 
 const SwirlPagination = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.setPage = index.createEvent(this, "setPage", 7);
+    this.setPageSize = index.createEvent(this, "setPageSize", 7);
     this.onFirstPageButtonClick = () => {
       if (this.page === 1) {
         return;
@@ -44,6 +45,13 @@ const SwirlPagination = class {
       }
       this.setPage.emit(page);
     };
+    this.onPageSizeSelect = (event) => {
+      const pageSize = +event.target.value;
+      if (this.pageSize === pageSize) {
+        return;
+      }
+      this.setPageSize.emit(pageSize);
+    };
     this.firstPageButtonLabel = "First page";
     this.lastPageButtonLabel = "Last page";
     this.label = undefined;
@@ -52,7 +60,11 @@ const SwirlPagination = class {
     this.pageLabel = "out of";
     this.pages = undefined;
     this.pageSelectLabel = "Select a page";
+    this.pageSize = 10;
+    this.pageSizeOptions = [10, 25, 50];
+    this.pageSizeSelectLabel = "Items per page:";
     this.prevButtonLabel = "Previous page";
+    this.showPageSizeSelect = undefined;
     this.variant = "default";
   }
   render() {
@@ -60,7 +72,7 @@ const SwirlPagination = class {
     const showDropDown = this.variant === "advanced";
     const ariaPageLabel = `${this.page} ${this.pageLabel} ${this.pages}`;
     const className = index$1.classnames("pagination", `pagination--variant-${this.variant}`);
-    return (index.h(index.Host, null, index.h("nav", { "aria-label": this.label, class: className }, index.h("ul", { class: "pagination__list", part: "pagination__list" }, index.h("li", { class: "pagination__list-item" }, index.h("swirl-button", { class: "pagination__first-page-button", disabled: this.page <= 1, hideLabel: true, icon: "<swirl-icon-double-arrow-left></swirl-icon-double-arrow-left>", intent: "primary", label: this.firstPageButtonLabel, onClick: this.onFirstPageButtonClick })), index.h("li", { class: "pagination__list-item" }, index.h("swirl-button", { class: "pagination__prev-button", disabled: this.page <= 1, hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", intent: "primary", label: this.prevButtonLabel, onClick: this.onPrevButtonClick })), showPageLabel ? (index.h("li", { class: "pagination__list-item  pagination__page-label" }, index.h("span", null, showDropDown ? (index.h("span", { "aria-current": "page", class: "pagination__advanced-label" }, index.h("span", { class: "pagination__page-select-container" }, index.h("select", { "aria-label": this.pageSelectLabel, class: "pagination__page-select", onChange: this.onSelect }, new Array(this.pages)
+    return (index.h(index.Host, null, index.h("nav", { "aria-label": this.label, class: className }, index.h("ul", { class: "pagination__list", part: "pagination__list" }, this.showPageSizeSelect && (index.h("li", { class: "pagination__list-item" }, index.h("label", { class: "pagination__page-size-selection" }, index.h("swirl-text", null, this.pageSizeSelectLabel), index.h("swirl-stack", { align: "center", class: "pagination__page-size-select-container", orientation: "horizontal" }, index.h("select", { class: "pagination__page-size-select", onChange: this.onPageSizeSelect }, this.pageSizeOptions.map((pageSizeOption) => (index.h("option", { key: pageSizeOption, selected: pageSizeOption === this.pageSize, value: pageSizeOption }, pageSizeOption)))), index.h("swirl-icon-expand-more", { "aria-hidden": "true", class: "pagination__page-size-select-icon", size: 16 }))))), index.h("li", { class: "pagination__list-item" }, index.h("swirl-button", { class: "pagination__first-page-button", disabled: this.page <= 1, hideLabel: true, icon: "<swirl-icon-double-arrow-left></swirl-icon-double-arrow-left>", intent: "primary", label: this.firstPageButtonLabel, onClick: this.onFirstPageButtonClick })), index.h("li", { class: "pagination__list-item" }, index.h("swirl-button", { class: "pagination__prev-button", disabled: this.page <= 1, hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", intent: "primary", label: this.prevButtonLabel, onClick: this.onPrevButtonClick })), showPageLabel ? (index.h("li", { class: "pagination__list-item  pagination__page-label" }, index.h("span", null, showDropDown ? (index.h("span", { "aria-current": "page", class: "pagination__advanced-label" }, index.h("span", { class: "pagination__page-select-container" }, index.h("select", { "aria-label": this.pageSelectLabel, class: "pagination__page-select", onChange: this.onSelect }, new Array(this.pages)
       .fill(undefined)
       .map((_, index) => index + 1)
       .map((page) => (index.h("option", { selected: this.page === page, value: String(page) }, page))))), index.h("span", { "aria-hidden": "true" }, this.pageLabel, " ", this.pages))) : (index.h("span", { "aria-current": "page" }, ariaPageLabel))))) : (index.h("li", { class: "pagination__list-item" }, index.h("swirl-visually-hidden", null, index.h("span", { "aria-current": "page" }, ariaPageLabel)))), index.h("li", { class: "pagination__list-item" }, index.h("swirl-button", { class: "pagination__next-button", disabled: this.page >= this.pages, hideLabel: true, icon: "<swirl-icon-chevron-right></swirl-icon-chevron-right>", iconPosition: "end", intent: "primary", label: this.nextButtonLabel, onClick: this.onNextButtonClick })), index.h("li", { class: "pagination__list-item" }, index.h("swirl-button", { class: "pagination__last-page-button", disabled: this.page >= this.pages, hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", intent: "primary", label: this.lastPageButtonLabel, onClick: this.onLastPageButtonClick }))))));