@getflip/swirl-components 0.40.1 → 0.41.0

package/dist/collection/components/swirl-pagination/swirl-pagination.css

@@ -36,6 +36,58 @@
 }
   }
 
+.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);

package/dist/collection/components/swirl-pagination/swirl-pagination.js

@@ -35,6 +35,13 @@ export class SwirlPagination {
       }
       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;
@@ -43,7 +50,11 @@ export class SwirlPagination {
     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() {
@@ -51,7 +62,7 @@ export class SwirlPagination {
     const showDropDown = this.variant === "advanced";
     const ariaPageLabel = `${this.page} ${this.pageLabel} ${this.pages}`;
     const className = classnames("pagination", `pagination--variant-${this.variant}`);
-    return (h(Host, null, h("nav", { "aria-label": this.label, class: className }, h("ul", { class: "pagination__list", part: "pagination__list" }, h("li", { class: "pagination__list-item" }, 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 })), h("li", { class: "pagination__list-item" }, 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 ? (h("li", { class: "pagination__list-item  pagination__page-label" }, h("span", null, showDropDown ? (h("span", { "aria-current": "page", class: "pagination__advanced-label" }, h("span", { class: "pagination__page-select-container" }, h("select", { "aria-label": this.pageSelectLabel, class: "pagination__page-select", onChange: this.onSelect }, new Array(this.pages)
+    return (h(Host, null, h("nav", { "aria-label": this.label, class: className }, h("ul", { class: "pagination__list", part: "pagination__list" }, this.showPageSizeSelect && (h("li", { class: "pagination__list-item" }, h("label", { class: "pagination__page-size-selection" }, h("swirl-text", null, this.pageSizeSelectLabel), h("swirl-stack", { align: "center", class: "pagination__page-size-select-container", orientation: "horizontal" }, h("select", { class: "pagination__page-size-select", onChange: this.onPageSizeSelect }, this.pageSizeOptions.map((pageSizeOption) => (h("option", { key: pageSizeOption, selected: pageSizeOption === this.pageSize, value: pageSizeOption }, pageSizeOption)))), h("swirl-icon-expand-more", { "aria-hidden": "true", class: "pagination__page-size-select-icon", size: 16 }))))), h("li", { class: "pagination__list-item" }, 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 })), h("li", { class: "pagination__list-item" }, 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 ? (h("li", { class: "pagination__list-item  pagination__page-label" }, h("span", null, showDropDown ? (h("span", { "aria-current": "page", class: "pagination__advanced-label" }, h("span", { class: "pagination__page-select-container" }, 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) => (h("option", { selected: this.page === page, value: String(page) }, page))))), h("span", { "aria-hidden": "true" }, this.pageLabel, " ", this.pages))) : (h("span", { "aria-current": "page" }, ariaPageLabel))))) : (h("li", { class: "pagination__list-item" }, h("swirl-visually-hidden", null, h("span", { "aria-current": "page" }, ariaPageLabel)))), h("li", { class: "pagination__list-item" }, 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 })), h("li", { class: "pagination__list-item" }, 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 }))))));
@@ -211,6 +222,58 @@ export class SwirlPagination {
         "reflect": false,
         "defaultValue": "\"Select a page\""
       },
+      "pageSize": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "page-size",
+        "reflect": false,
+        "defaultValue": "10"
+      },
+      "pageSizeOptions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "number[]",
+          "resolved": "number[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[10, 25, 50]"
+      },
+      "pageSizeSelectLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "page-size-select-label",
+        "reflect": false,
+        "defaultValue": "\"Items per page:\""
+      },
       "prevButtonLabel": {
         "type": "string",
         "mutable": false,
@@ -229,6 +292,23 @@ export class SwirlPagination {
         "reflect": false,
         "defaultValue": "\"Previous page\""
       },
+      "showPageSizeSelect": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-page-size-select",
+        "reflect": false
+      },
       "variant": {
         "type": "string",
         "mutable": false,
@@ -270,6 +350,21 @@ export class SwirlPagination {
           "resolved": "number",
           "references": {}
         }
+      }, {
+        "method": "setPageSize",
+        "name": "setPageSize",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
       }];
   }
 }