@getflip/swirl-components 0.50.2 → 0.51.0

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

@@ -100,40 +100,33 @@
   gap: var(--s-space-8);
 }
 
-.pagination__page-select-container {
-  position: relative;
-}
-
-.pagination__page-select {
+.pagination__page-input {
   display: inline-flex;
+  width: 3rem;
   padding-top: var(--s-space-8);
-  padding-right: var(--s-space-16);
+  padding-right: var(--s-space-8);
   padding-bottom: var(--s-space-8);
-  padding-left: var(--s-space-16);
+  padding-left: var(--s-space-8);
   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) {
+.pagination__page-input:focus:not(:focus-visible) {
     outline: none;
   }
 
-.pagination__page-select:focus-visible {
+.pagination__page-input: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 {
+.pagination__page-input {
     font-size: var(--s-font-size-sm);
     line-height: var(--s-line-height-sm)
 }

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

@@ -1,7 +1,11 @@
 import { h, Host } from "@stencil/core";
 import classnames from "classnames";
+import { debounce } from "../../utils";
 export class SwirlPagination {
   constructor() {
+    this.onFocusPageInput = (event) => {
+      event.target.select();
+    };
     this.onFirstPageButtonClick = () => {
       if (this.page === 1) {
         return;
@@ -28,13 +32,28 @@ export class SwirlPagination {
       }
       this.setPage.emit(nextPage);
     };
-    this.onSelect = (event) => {
-      const page = +event.target.value;
+    this.onPageInput = () => {
+      let page = +this.pageInput.value;
+      if (isNaN(page)) {
+        page = this.page;
+        this.pageInput.value = String(page);
+      }
+      else if (page > this.pages) {
+        page = this.pages;
+        this.pageInput.value = String(page);
+      }
+      else if (page < 1) {
+        page = 1;
+        this.pageInput.value = String(page);
+      }
       if (this.page === page) {
         return;
       }
-      this.setPage.emit(page);
+      this.onPageUpdate(page);
     };
+    this.onPageUpdate = debounce((page) => {
+      this.setPage.emit(page);
+    }, 500);
     this.onPageSizeSelect = (event) => {
       const pageSize = +event.target.value;
       if (this.pageSize === pageSize) {
@@ -62,10 +81,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" }, 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 }))))));
+    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("input", { "aria-label": this.pageSelectLabel, class: "pagination__page-input", onFocus: this.onFocusPageInput, onInput: this.onPageInput, ref: (el) => (this.pageInput = el), type: "text", value: this.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 }))))));
   }
   static get is() { return "swirl-pagination"; }
   static get encapsulation() { return "shadow"; }

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

@@ -21,6 +21,9 @@ export class SwirlSearch {
     this.onFocus = (event) => {
       this.inputFocus.emit(event);
     };
+    this.onInput = (event) => {
+      this.inputInput.emit(event.target.value);
+    };
     this.autoFocus = undefined;
     this.clearButtonLabel = "Clear search term";
     this.disabled = undefined;
@@ -57,7 +60,7 @@ export class SwirlSearch {
     const className = classnames("search", `search--variant-${this.variant}`, {
       "search--disabled": this.disabled,
     });
-    return (h(Host, null, h("span", { class: className, ref: (el) => (this.iconEl = el) }, h("swirl-icon-search", { class: "search__icon" }), h("input", { "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && (h("button", { "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.clear, type: "button" }, h("swirl-icon-cancel", null))))));
+    return (h(Host, null, h("span", { class: className, ref: (el) => (this.iconEl = el) }, h("swirl-icon-search", { class: "search__icon" }), h("input", { "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && (h("button", { "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.clear, type: "button" }, h("swirl-icon-cancel", null))))));
   }
   static get is() { return "swirl-search"; }
   static get encapsulation() { return "scoped"; }
@@ -275,6 +278,21 @@ export class SwirlSearch {
             }
           }
         }
+      }, {
+        "method": "inputInput",
+        "name": "inputInput",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
       }, {
         "method": "valueChange",
         "name": "valueChange",

package/dist/collection/components/swirl-search/swirl-search.stories.js

@@ -11,6 +11,9 @@ export default {
 };
 const Template = (args) => {
   const element = generateStoryElement("swirl-search", args);
+  element.addEventListener("inputInput", (event) => {
+    console.log(event);
+  });
   return element;
 };
 export const SwirlSearch = Template.bind({});

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

@@ -58,6 +58,10 @@
 }
   }
 
+.toast__content ::part(link) {
+    color: var(--text-default);
+  }
+
 .toast__dismiss-button {
   display: inline-flex;
   min-width: 1.5rem;

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

@@ -56,7 +56,7 @@ export class SwirlToast {
   }
   render() {
     const className = classnames("toast", `toast--intent-${this.intent}`);
-    return (h(Host, null, h("div", { class: className }, this.icon && (h("span", { class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { class: "toast__content", part: "toast__content" }, this.content), h("button", { "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (h("swirl-icon-close", { ref: (el) => (this.dismissIconEl = el) }))))));
+    return (h(Host, null, h("div", { class: className }, this.icon && (h("span", { class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { class: "toast__content", innerHTML: this.content, part: "toast__content" }), h("button", { "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (h("swirl-icon-close", { ref: (el) => (this.dismissIconEl = el) }))))));
   }
   static get is() { return "swirl-toast"; }
   static get encapsulation() { return "shadow"; }