@tmorrow/cre8-wc 1.1.2 → 1.1.4

package/lib/components/pagination/pagination.js

@@ -1,213 +1,248 @@
-import { css as w, html as a, nothing as g } from "lit";
-import { ifDefined as u } from "lit/directives/if-defined.js";
-import { property as n, state as f, queryAll as z } from "lit/decorators.js";
-import { h as C } from "../../icon-D22g8aWB.js";
-import { s as _ } from "../../Caret_Right-DZH0BlfG.js";
-import { Cre8Element as P } from "../cre8-element.js";
-import { Cre8Button as y } from "../button/button.js";
-const k = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.1508 14.7578C12.2184 14.8254 12.272 14.9056 12.3085 14.9939C12.3451 15.0822 12.3639 15.1768 12.3639 15.2724C12.3639 15.3679 12.3451 15.4625 12.3085 15.5508C12.272 15.6391 12.2184 15.7193 12.1508 15.7869C12.0832 15.8544 12.003 15.908 11.9147 15.9446C11.8265 15.9812 11.7318 16 11.6363 16C11.5407 16 11.4461 15.9812 11.3578 15.9446C11.2695 15.908 11.1893 15.8544 11.1218 15.7869L3.8494 8.51452C3.78178 8.44698 3.72814 8.36677 3.69154 8.27849C3.65495 8.1902 3.63611 8.09557 3.63611 8C3.63611 7.90443 3.65495 7.8098 3.69154 7.72151C3.72814 7.63323 3.78178 7.55302 3.8494 7.48548L11.1218 0.213121C11.2582 0.0766618 11.4433 -3.80414e-09 11.6363 0C11.8293 3.80414e-09 12.0143 0.0766618 12.1508 0.213121C12.2873 0.34958 12.3639 0.534658 12.3639 0.72764C12.3639 0.920622 12.2873 1.1057 12.1508 1.24216L5.39205 8L12.1508 14.7578Z"/>
-</svg>
-`, $ = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.7869 14.7577C15.8544 14.8253 15.908 14.9055 15.9446 14.9937C15.9812 15.082 16 15.1766 16 15.2722C16 15.3678 15.9812 15.4624 15.9446 15.5507C15.908 15.6389 15.8544 15.7191 15.7869 15.7867C15.7193 15.8543 15.6391 15.9079 15.5508 15.9444C15.4625 15.981 15.3679 15.9998 15.2724 15.9998C15.1768 15.9998 15.0822 15.981 14.9939 15.9444C14.9056 15.9079 14.8254 15.8543 14.7579 15.7867L7.48557 8.51443C7.41795 8.44689 7.36432 8.36669 7.32772 8.2784C7.29112 8.19012 7.27228 8.09549 7.27228 7.99992C7.27228 7.90435 7.29112 7.80972 7.32772 7.72143C7.36432 7.63315 7.41795 7.55294 7.48557 7.4854L14.7579 0.213119C14.8943 0.076661 15.0794 -3.8041e-09 15.2724 0C15.4653 3.8041e-09 15.6504 0.076661 15.7869 0.213119C15.9233 0.349576 16 0.534653 16 0.727633C16 0.920613 15.9233 1.10569 15.7869 1.24215L9.0282 7.99992L15.7869 14.7577ZM1.75592 7.99992L8.5146 1.24215C8.65106 1.10569 8.72772 0.920613 8.72772 0.727633C8.72772 0.534653 8.65106 0.349576 8.5146 0.213119C8.37814 0.076661 8.19306 1.43782e-09 8.00008 0C7.8071 -1.43781e-09 7.62203 0.076661 7.48557 0.213119L0.213286 7.4854C0.145671 7.55294 0.0920317 7.63315 0.0554344 7.72143C0.0188371 7.80972 0 7.90435 0 7.99992C0 8.09549 0.0188371 8.19012 0.0554344 8.2784C0.0920317 8.36669 0.145671 8.44689 0.213286 8.51443L7.48557 15.7867C7.55314 15.8543 7.63335 15.9079 7.72163 15.9444C7.80991 15.981 7.90453 15.9998 8.00008 15.9998C8.09564 15.9998 8.19026 15.981 8.27854 15.9444C8.36682 15.9079 8.44703 15.8543 8.5146 15.7867C8.58217 15.7191 8.63576 15.6389 8.67233 15.5507C8.7089 15.4624 8.72772 15.3678 8.72772 15.2722C8.72772 15.1766 8.7089 15.082 8.67233 14.9937C8.63576 14.9055 8.58217 14.8253 8.5146 14.7577L1.75592 7.99992Z"/>
-</svg>
-`, v = {
-  md: 768,
-  lg: 960
-}, x = (d = "768") => !window.matchMedia(`(min-width: ${d}px)`).matches, R = w`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-pagination__text{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform);padding:0.5rem}`;
-var N = Object.defineProperty, p = (d, t, e, s) => {
-  for (var r = void 0, o = d.length - 1, c; o >= 0; o--)
-    (c = d[o]) && (r = c(t, e, r) || r);
-  return r && N(t, e, r), r;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const b = class b extends P {
-  constructor() {
-    super(...arguments), this.currentPage = 1, this.display = "default";
-  }
-  // Properties below are for future 'range' variant for table pagination
-  // private get _currentResults() {
-  //     return this.pageSize * (this.currentPage - 1);
-  // }
-  // private get _firstInRange() {
-  //     return this._currentResults + 1;
-  // }
-  // private get _lastInRange() {
-  //     const last = this._firstInRange + (this.pageSize - 1);
-  //     return last > this.totalResults ? this.totalResults : last;
-  // }
-  get _totalPages() {
-    return Math.ceil(this.totalResults / this.pageSize);
-  }
-  render() {
-    const t = this.componentClassNames("cre8-c-page-counter", {});
-    return a`
-      <div class='${t}'>
-        <span class="cre8-c-pagination__text" aria-live="polite">
-          ${!this.display || this.display === "default" ? a`${this.currentPage}` : a`${this.currentPage} of ${this._totalPages}`}
-        </span>
-      </div>
-    `;
-  }
-};
-b.styles = [R];
-let h = b;
-p([
-  n({ type: Boolean, reflect: !0 })
-], h.prototype, "rangeVariant");
-p([
-  n()
-], h.prototype, "currentPage");
-p([
-  n()
-], h.prototype, "totalResults");
-p([
-  n()
-], h.prototype, "pageSize");
-p([
-  n()
-], h.prototype, "display");
-customElements.get("cre8-page-counter") === void 0 && customElements.define("cre8-page-counter", h);
-const S = w`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:var(--pagination-display, inline-flex);justify-content:var(--pagination-justify-content, center);align-items:var(--pagination-align-items, center);--cre8-button-width: 2rem;--cre8-button-height: 2rem;--cre8-button-min-width: 2rem;--cre8-button-min-height: 2rem;--cre8-button-padding-horizontal-small: 0px;--cre8-button-padding-vertical-small: 0px}*,::slotted(*),*:before,*:after{box-sizing:border-box;width:auto;height:auto;display:flex;justify-content:center;--cre8-button-margin-right: var(--cre8-spacing-2);--cre8-button-margin-left: var(--cre8-spacing-2);margin-right:var(--cre8-button-margin-right);margin-left:var(--cre8-button-margin-left);align-items:center}[aria-current=true],#current{--cre8-color-button-tertiary-bg: var( --cre8-color-bg-strong);--cre8-color-button-tertiary-content: var(--cre8-color-content-knockout);--cre8-color-button-tertiary-border: var(--cre8-color-border-transparent)}[aria-current=true]:hover,[aria-current=true]:active,#current:hover,#current:active{border-radius:var(--cre8-border-radius-button);--cre8-color-button-tertiary-bg-hover: var(--cre8-color-bg-strong);--cre8-color-button-tertiary-content-hover: var(--cre8-color-content-knockout)}[aria-current=true]:hover:focus,[aria-current=true]:hover:focus-visible,[aria-current=true]:hover:focus-within,[aria-current=true]:active:focus,[aria-current=true]:active:focus-visible,[aria-current=true]:active:focus-within,#current:hover:focus,#current:hover:focus-visible,#current:hover:focus-within,#current:active:focus,#current:active:focus-visible,#current:active:focus-within{border-radius:var(--cre8-border-radius-button);--cre8-color-button-tertiary-bg-active: var(--cre8-color-bg-strong);--cre8-color-button-tertiary-content-active: var(--cre8-color-content-knockout);outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-pagination--compact,.cre8-c-pagination--icon-only,.cre8-c-pagination--range{--cre8-button-width: 3rem;--cre8-button-height: 3rem;--cre8-button-min-width: 3rem;--cre8-button-min-height: 3rem}.cre8-c-pagionation__icon{fill:var(--cre8-color-button-tertiary-content)}.cre8-c-pagination__icon:has(cre8-button:disabled){color:var(--cre8-color-button-tertiary-content-disabled)}.cre8-c-pagination [aria-disabled=true]{fill:var(--cre8-color-content-default);--cre8-color-button-tertiary-content: var(--cre8-color-content-default)}`;
-var T = Object.defineProperty, L = Object.getOwnPropertyDescriptor, l = (d, t, e, s) => {
-  for (var r = s > 1 ? void 0 : s ? L(t, e) : t, o = d.length - 1, c; o >= 0; o--)
-    (c = d[o]) && (r = (s ? c(t, e, r) : c(r)) || r);
-  return s && r && T(t, e, r), r;
-};
-const m = class m extends P {
-  constructor() {
-    super(...arguments), this._currentPage = 99, this._pageSize = 10, this.visiblePages = 5, this._handleKeydown = (t, e) => (s) => {
-      s.code === "Enter" && this._goToPage(t, e);
-    }, this._goToPage = (t, e) => () => {
-      const s = this._currentPage;
-      let r;
-      this.buttons.forEach((o) => {
-        const c = new y();
-        return c.hideText && c.text === e && (r = c, r.shadowRoot.querySelector(".cre8-c-button").blur()), null;
-      }), this._currentPage = t, this.currentPage = this._currentPage, this.requestUpdate("currentPage", s), this.dispatchEvent(new CustomEvent(
-        "pagination.click",
-        { detail: { buttonName: e ?? this.currentPage.toString(), value: this.currentPage } }
-      ));
-    };
-  }
-  get pageSize() {
-    return this._pageSize;
-  }
-  set pageSize(t) {
-    const e = this._pageSize;
-    this._pageSize = t, this.requestUpdate("pageSize", e);
-  }
-  get currentPage() {
-    return this._currentPage;
-  }
-  set currentPage(t) {
-    const e = this._currentPage;
-    this._currentPage = t, this.requestUpdate("currentPage", e);
-  }
-  connectedCallBack() {
-    super.connectedCallback();
-  }
-  get maxVisiblePages() {
-    const t = {
-      md: 5
-    };
-    return x(v.lg.toString()) ? x(v.md.toString()) ? 0 : Math.min(t.md, this.visiblePages) : this.visiblePages;
-  }
-  get totalPages() {
-    return Math.ceil(this.totalResults / this.pageSize);
-  }
-  get hasNoPreviousPage() {
-    return this._currentPage <= 1;
-  }
-  get hasNoNextPage() {
-    return this._currentPage >= this.totalPages;
-  }
-  _onHandleResize() {
-    this.requestUpdate();
-  }
-  handleResize() {
-    this._onHandleResize.bind(this);
-  }
-  // get range of pages to display [3, 4, 5], [2, 3, 4, 5]
-  get pageRange() {
-    const t = Math.floor(this.maxVisiblePages / 2);
-    let e = this.currentPage - t;
-    e = Math.min(e, this.totalPages - this.maxVisiblePages + 1), e = Math.max(e, 1);
-    const s = Math.min(e + this.maxVisiblePages - 1, this.totalPages);
-    return [...Array(this.totalPages)].map((r, o) => o + 1).slice(e - 1, s);
-  }
-  async firstUpdated() {
-    if (await this.updateComplete, this._pageSize !== this.pageSize) {
-      const t = this._pageSize;
-      this._pageSize = this.pageSize, this.requestUpdate("pageSize", t);
+/* eslint-disable import/prefer-default-export */
+/* eslint-disable lit/no-template-map */
+import { html, nothing, } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { property, queryAll, state } from 'lit/decorators.js';
+import svgCaretLeft from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Regular/Caret_Left.svg?raw';
+import svgFirstPage from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Regular/Caret_Double_Left.svg?raw';
+import svgLastPage from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Regular/Caret_Double_Right.svg?raw';
+import svgCaretRight from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Regular/Caret_Right.svg?raw';
+import { Cre8Element } from '../cre8-element';
+import { Cre8Button } from '../button/button';
+import { isMobile, screenSizes } from '../../utilities/is-mobile';
+import './page-counter/page-counter';
+import styles from './pagination.styles.js';
+/**
+ * The Pagination component is used to split up a large amount of results
+ *  by showing only a certain amount on each page. You can cycle through
+ *  the pages using Page Numbers, Next and Previous Buttons, or optional
+ *  First Page and Last Page Buttons. This component is also used by Table
+ *  to cycle through rows of results. Pagination has 3 display options:
+ *
+ * **default**:  Can contain up to seven Page Numbers (ellipses included)
+ *  at a time flanked by Next and Previous Buttons. When there are more than
+ *  seven pages, numbers start getting replaced by ellipses. Use this option
+ *  when you have a lot of horizontal space in a layout. It should not be used
+ *  for mobile web layouts since its buttons are smaller than the minimum touch target of 44px.
+ *  The component has built in responsivity to mobile page size so you dont have tohandle this
+ *  seperately
+ *
+ *
+ * **compact** : Best used as a summary of where you are among pages or table rows flanked by
+ * Previous and Next Buttons. Use this option when you have limited horizontal space but still
+ * need to show where users are among results. Great for mobile layouts.
+ *
+ *
+ * **icon-only** : Use this option in very tight spaces when it’s not required to show users
+ * where they are among results. Great for mobile layouts.
+ *
+ *
+ * ## HOW TO USE
+ *
+ * Select an option from the “display” dropdown depending on layout width
+ * Select where your current page is from the “Page” dropdown
+ * To show less pages when using Full Numbers, use the "visiblePages” toggles
+ * To hide the First Page and Last Page Buttons, turn on the “hideFirstLastButton” toggle
+ * To change the states of page numbers or buttons, interact with the buttond to invoke each “State”
+ * When using Compact Numbers, you can choose between “compact” and “icon-only” formats
+ *
+ *
+ * ## ACCESSIBILITY NOTE
+ *
+ * To best orient people using screen readers, push focus to the top of
+ * the list of results after any of the pagination buttons have been triggered,
+ * **except for the currently selected one**. Focus target could be a visual results heading,
+ * or the top heading of the results container of the page selected
+ * via a programmatic selector, e.g. < section id=“results” aria-label="results-section" > or
+ * < div role= “group” aria-label=“results” >.
+ *
+ * @dependency cre8-button, cre8-icon, cre8-pagination-counter
+ * @csspart icon - distinguishes the page buttons from the icon buttons
+ * @cssproperty "--pagination-display" - controls the display css property
+ * @cssproperty "--pagination-justify-content" - controls horizontal alignment of pagination
+ * @cssproperty "--pagination-align-items" - controls vertical alignment of pagination
+ */
+export class Cre8Pagination extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        this._currentPage = 99;
+        this._pageSize = 10;
+        /**
+         * Controls how many page buttons are displayVarianted on the page
+         * at once, if container size permits. recommended max = 5 pages
+         *
+         * @attr number
+         */
+        this.visiblePages = 5;
+        this._handleKeydown = (page, _buttonName) => (e) => {
+            if (e.code === 'Enter') {
+                this._goToPage(page, _buttonName); /* 2 */
+            }
+        };
+        this._goToPage = (page, _buttonName) => () => {
+            const old = this._currentPage;
+            let focusButton;
+            this.buttons.forEach((_) => {
+                const b = new Cre8Button();
+                if (b.hideText && (b.text === _buttonName)) {
+                    focusButton = b;
+                    focusButton.shadowRoot.querySelector('.cre8-c-button').blur();
+                }
+                return null;
+            });
+            this._currentPage = page;
+            this.currentPage = this._currentPage;
+            this.requestUpdate('currentPage', old);
+            this.dispatchEvent(new CustomEvent('pagination.click', { detail: { buttonName: _buttonName ?? this.currentPage.toString(), value: this.currentPage } }));
+        };
+    }
+    /**
+     * how many elements will displayVariant per page, indicated by business to typically be 20
+     * @attr number
+     */
+    get pageSize() {
+        return this._pageSize;
+    }
+    set pageSize(newSize) {
+        const oldSize = this._pageSize;
+        this._pageSize = newSize;
+        this.requestUpdate('pageSize', oldSize);
+    }
+    get currentPage() {
+        return this._currentPage;
+    }
+    set currentPage(newPage) {
+        const oldPage = this._currentPage;
+        this._currentPage = newPage;
+        this.requestUpdate('currentPage', oldPage);
+    }
+    connectedCallBack() {
+        super.connectedCallback();
+    }
+    get maxVisiblePages() {
+        const allowedVisiblePages = {
+            md: 5,
+        };
+        // lg and up
+        if (!isMobile(screenSizes.lg.toString())) {
+            return this.visiblePages;
+        }
+        if (!isMobile(screenSizes.md.toString())) {
+            return Math.min(allowedVisiblePages.md, this.visiblePages);
+        }
+        return 0;
+    }
+    get totalPages() {
+        return Math.ceil(this.totalResults / this.pageSize);
+    }
+    get hasNoPreviousPage() {
+        return this._currentPage <= 1;
     }
-    if (this.windowWidth = window.innerWidth, window.addEventListener("resize", () => {
-      if (this.windowWidth !== window.innerWidth) {
-        const t = this.windowWidth;
-        this.windowWidth = window.innerWidth, this.handleResize(), this.requestUpdate("isResponsive", t);
-      }
-    }), this._currentPage !== this.currentPage) {
-      const t = this._currentPage;
-      this._currentPage = this.currentPage, this.requestUpdate("currentPage", t);
+    get hasNoNextPage() {
+        return this._currentPage >= this.totalPages;
     }
-  }
-  disconnectedCallback() {
-    window.removeEventListener("resize", this.handleResize), super.disconnectedCallback();
-  }
-  displayTypes() {
-    return a`<cre8-page-counter
+    _onHandleResize() {
+        this.requestUpdate();
+    }
+    handleResize() {
+        this._onHandleResize.bind(this);
+    }
+    // get range of pages to display [3, 4, 5], [2, 3, 4, 5]
+    get pageRange() {
+        const left = Math.floor(this.maxVisiblePages / 2);
+        let startPage = this.currentPage - left;
+        startPage = Math.min(startPage, this.totalPages - this.maxVisiblePages + 1);
+        startPage = Math.max(startPage, 1);
+        const endPage = Math.min(startPage + this.maxVisiblePages - 1, this.totalPages);
+        return [...Array(this.totalPages)].map((_, index) => index + 1).slice(startPage - 1, endPage);
+    }
+    async firstUpdated() {
+        await this.updateComplete;
+        if (this._pageSize !== this.pageSize) {
+            const old = this._pageSize;
+            this._pageSize = this.pageSize;
+            this.requestUpdate('pageSize', old);
+        }
+        this.windowWidth = window.innerWidth;
+        window.addEventListener('resize', () => {
+            if (this.windowWidth !== window.innerWidth) {
+                const oldWidth = this.windowWidth;
+                this.windowWidth = window.innerWidth;
+                this.handleResize();
+                this.requestUpdate('isResponsive', oldWidth);
+            }
+        });
+        if (this._currentPage !== this.currentPage) {
+            const old = this._currentPage;
+            this._currentPage = this.currentPage;
+            this.requestUpdate('currentPage', old);
+        }
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.handleResize);
+        super.disconnectedCallback();
+    }
+    displayTypes() {
+        return html `<cre8-page-counter
               currentPage=${this.currentPage}
-              style="display:${this.display === "compact" ? "flex" : "none"};"
+              style="display:${this.display === 'compact' ? 'flex' : 'none'};"
               totalResults=${this.totalResults}
               pageSize=${this._pageSize}
               display=${this.display}>
               </cre8-page-counter>`;
-  }
-  goToPage(t, e) {
-    return this._goToPage(t, e).bind(this);
-  }
-  handleKeydown(t, e) {
-    return this._handleKeydown(t, e);
-  }
-  render() {
-    const t = this.componentClassNames("cre8-c-pagination", {
-      "cre8-c-pagination--compact": this.display !== void 0 && this.display === "compact",
-      "cre8-c-pagination--icon-only": this.display !== void 0 && this.display === "icon-only"
-    });
-    return a`<nav
+    }
+    goToPage(page, buttonName) {
+        return this._goToPage(page, buttonName).bind(this);
+    }
+    handleKeydown(page, buttonName) {
+        return this._handleKeydown(page, buttonName);
+    }
+    render() {
+        const classNames = this.componentClassNames('cre8-c-pagination', {
+            'cre8-c-pagination--compact': this.display !== undefined && this.display === 'compact',
+            'cre8-c-pagination--icon-only': this.display !== undefined && this.display === 'icon-only',
+        });
+        return html `<nav
       aria-label="pagination"
-      class=${t}>
+      class=${classNames}>
         <slot></slot>
-        ${this.hideLastAndFirstButtons ? g : a` <cre8-button
+        ${!this.hideLastAndFirstButtons ? html ` <cre8-button
               variant="tertiary"
               size="sm"
               text=""
               hideText
               part="icon"
-              aria-disabled="${u(this.hasNoPreviousPage)}"
+              aria-disabled="${ifDefined(this.hasNoPreviousPage)}"
               ?disabled=${this.hasNoPreviousPage}
-              @click=${this.goToPage(1, "First Page")}
-              @keydown=${this.handleKeydown(1, "First Page")}
+              @click=${this.goToPage(1, 'First Page')}
+              @keydown=${this.handleKeydown(1, 'First Page')}
 
             >
         <span slot="before">
           <cre8-icon
             className="cre8-c-pagination__icon"
             aria-label="First Page"
-            svg=${$}
+            svg=${svgFirstPage}
             size="24">
           </cre8-icon>
         </span>
-            </cre8-button>`}
+            </cre8-button>` : nothing}
         <cre8-button
           variant="tertiary"
           size="sm"
           hideText
           text=""
           part="icon"
-          aria-disabled="${u(this.hasNoPreviousPage)}"
+          aria-disabled="${ifDefined(this.hasNoPreviousPage)}"
           ?disabled=${this.hasNoPreviousPage}
-          @click=${this.goToPage(this._currentPage - 1, "Previous Page")}
-          @keydown=${this.handleKeydown(this.currentPage - 1, "Previous Page")}
+          @click=${this.goToPage(this._currentPage - 1, 'Previous Page')}
+          @keydown=${this.handleKeydown(this.currentPage - 1, 'Previous Page')}
 
         >
           <span slot="before">
@@ -215,7 +250,7 @@ const m = class m extends P {
             className="cre8-c-pagination__icon"
             aria-label="Previous Page"
             slot="before"
-            svg=${k}
+            svg=${svgCaretLeft}
             size="24"
 
             >
@@ -224,17 +259,23 @@ const m = class m extends P {
         </cre8-button>
 
       ${this.displayTypes()}
-        ${!this.display || this.display === "default" ? a`${this.pageRange[this.pageRange.length - 1] > 1 && this.pageRange[0] !== 1 ? a`<cre8-button hideText iconName="ellipsis" variant="tertiary" size="sm" aria-disabled="true" inert></cre8-button>` : g}
-            ${this.pageRange.map((e) => e === this.currentPage ? a`<cre8-button variant="tertiary" tab-index="-1" text="${e}"  class="icon-only" size="sm" id="current"></cre8-button>` : a`<cre8-button
+        ${!this.display || this.display === 'default'
+            ? html `${this.pageRange[this.pageRange.length - 1] > 1 && this.pageRange[0] !== 1
+                ? html `<cre8-button hideText iconName="ellipsis" variant="tertiary" size="sm" aria-disabled="true" inert></cre8-button>`
+                : nothing}
+            ${this.pageRange.map((page) => (page === this.currentPage
+                ? html `<cre8-button variant="tertiary" tab-index="-1" text="${page}"  class="icon-only" size="sm" id="current"></cre8-button>`
+                : html `<cre8-button
                       variant="tertiary"
                       size="sm"
-                      text="${e}"
+                      text="${page}"
                       class="icon-only"
-                      id="${e}"
-                      @click=${this.goToPage(e, e.toString())}
-                      @keydown=${this.handleKeydown(e, e.toString())}>
-                      </cre8-button>`)}
-            ${this.pageRange[this.pageRange.length - 1] < this.totalPages ? a`<cre8-button
+                      id="${page}"
+                      @click=${this.goToPage(page, page.toString())}
+                      @keydown=${this.handleKeydown(page, page.toString())}>
+                      </cre8-button>`))}
+            ${this.pageRange[this.pageRange.length - 1] < this.totalPages
+                ? html `<cre8-button
                       hideText
                       iconName="ellipsis"
                       text="ellipsis"
@@ -242,39 +283,42 @@ const m = class m extends P {
                       size="sm"
                       aria-disabled="true"
                       inert>
-                    </cre8-button>` : g}` : g}
+                    </cre8-button>`
+                : nothing}`
+            : nothing}
         <cre8-button
           variant="tertiary"
           size="sm"
           part="icon"
           hideText
           text=""
-          aria-disabled="${u(this.hasNoNextPage)}"
+          aria-disabled="${ifDefined(this.hasNoNextPage)}"
           ?disabled=${this.hasNoNextPage}
-          @click=${this.goToPage(this.currentPage + 1, "Next Page")}
-          @keydown=${this.handleKeydown(this.currentPage + 1, "Next Page")}
+          @click=${this.goToPage(this.currentPage + 1, 'Next Page')}
+          @keydown=${this.handleKeydown(this.currentPage + 1, 'Next Page')}
 
         >
           <span slot="before">
             <cre8-icon
             aria-label="Next Page"
             className="cre8-c-pagination__icon"
-            slot="before" svg=${_}
+            slot="before" svg=${svgCaretRight}
             size="24">
             </cre8-icon>
           </span>
         </cre8-button>
 
-        ${this.hideLastAndFirstButtons ? g : a` <cre8-button
+        ${!this.hideLastAndFirstButtons
+            ? html ` <cre8-button
               variant="tertiary"
               size="sm"
               hideText
               text=""
               part="icon"
-              aria-disabled="${u(this.hasNoNextPage)}"
+              aria-disabled="${ifDefined(this.hasNoNextPage)}"
               ?disabled=${this.hasNoNextPage}
-              @click=${this.goToPage(this.totalPages, "Last Page")}
-              @keydown=${this.handleKeydown(this.totalPages, "Last Page")}
+              @click=${this.goToPage(this.totalPages, 'Last Page')}
+              @keydown=${this.handleKeydown(this.totalPages, 'Last Page')}
 
             >
               <span slot="before">
@@ -282,51 +326,52 @@ const m = class m extends P {
                 aria-label="Last Page"
                 className="cre8-c-pagination__icon"
                 slot="before"
-                svg=${C}
+                svg=${svgLastPage}
                 size="24"
                 >
                 </cre8-icon>
               </span>
-            </cre8-button>`}
+            </cre8-button>`
+            : nothing}
 
       </nav>`;
-  }
-};
-m.styles = [S], m.elementDefinitions = {
-  "cre8-button": y
-};
-let i = m;
-l([
-  f()
-], i.prototype, "_currentPage", 2);
-l([
-  n({ reflect: !0, type: Number })
-], i.prototype, "totalResults", 2);
-l([
-  n({ type: Number, reflect: !0 })
-], i.prototype, "pageSize", 1);
-l([
-  f()
-], i.prototype, "_pageSize", 2);
-l([
-  n({ reflect: !0, type: Number })
-], i.prototype, "visiblePages", 2);
-l([
-  n({ type: String, reflect: !0 })
-], i.prototype, "display", 2);
-l([
-  f()
-], i.prototype, "windowWidth", 2);
-l([
-  z("cre8-button")
-], i.prototype, "buttons", 2);
-l([
-  n({ type: Boolean, reflect: !0 })
-], i.prototype, "hideLastAndFirstButtons", 2);
-l([
-  n({ reflect: !0, type: Number })
-], i.prototype, "currentPage", 1);
-customElements.get("cre8-pagination") === void 0 && customElements.define("cre8-pagination", i);
-export {
-  i as Cre8Pagination
+    }
+}
+Cre8Pagination.styles = [styles];
+Cre8Pagination.elementDefinitions = {
+    'cre8-button': Cre8Button,
 };
+__decorate([
+    state()
+], Cre8Pagination.prototype, "_currentPage", void 0);
+__decorate([
+    property({ reflect: true, type: Number })
+], Cre8Pagination.prototype, "totalResults", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], Cre8Pagination.prototype, "pageSize", null);
+__decorate([
+    state()
+], Cre8Pagination.prototype, "_pageSize", void 0);
+__decorate([
+    property({ reflect: true, type: Number })
+], Cre8Pagination.prototype, "visiblePages", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Cre8Pagination.prototype, "display", void 0);
+__decorate([
+    state()
+], Cre8Pagination.prototype, "windowWidth", void 0);
+__decorate([
+    queryAll('cre8-button')
+], Cre8Pagination.prototype, "buttons", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Pagination.prototype, "hideLastAndFirstButtons", void 0);
+__decorate([
+    property({ reflect: true, type: Number })
+], Cre8Pagination.prototype, "currentPage", null);
+if (customElements.get('cre8-pagination') === undefined) {
+    customElements.define('cre8-pagination', Cre8Pagination);
+}
+//# sourceMappingURL=pagination.js.map