@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/pagination/pagination.js

@@ -1,1462 +1,249 @@
-import { css as z, html as a, nothing as p } from "lit";
-import { ifDefined as h } from "lit/directives/if-defined.js";
-import { property as o, state as f, queryAll as P } from "lit/decorators.js";
-import { Cre8Element as C } from "../cre8-element.js";
-import { Cre8Button as x } from "../button/button.js";
-const y = {
-  md: 768,
-  lg: 960
-}, v = (m = "768") => !window.matchMedia(`(min-width: ${m}px)`).matches, k = z`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
-}
-
-.cre8-u-is-hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-.cre8-u-is-vishidden {
-  position: absolute !important;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-}
-
-@media all and (min-width: 23.4375rem) {
-  .cre8-u-hide-sm {
-    display: none !important;
-  }
-}
-@media all and (min-width: 35rem) {
-  .cre8-u-hide-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (min-width: 48rem) {
-  .cre8-u-hide-md {
-    display: none !important;
-  }
-}
-@media all and (min-width: 60rem) {
-  .cre8-u-hide-lg {
-    display: none !important;
-  }
-}
-@media all and (min-width: 75rem) {
-  .cre8-u-hide-xl {
-    display: none !important;
-  }
-}
-@media all and (max-width: 23.4375rem) {
-  .cre8-u-show-sm {
-    display: none !important;
-  }
-}
-@media all and (max-width: 35rem) {
-  .cre8-u-show-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (max-width: 48rem) {
-  .cre8-u-show-md {
-    display: none !important;
-  }
-}
-@media all and (max-width: 60rem) {
-  .cre8-u-show-lg {
-    display: none !important;
-  }
-}
-@media all and (max-width: 75rem) {
-  .cre8-u-show-xl {
-    display: none !important;
-  }
-}
-.cre8-u-margin-none {
-  margin: 0 !important;
-}
-
-.cre8-u-margin-sm {
-  margin: size(1) !important;
-}
-
-.cre8-u-margin-md {
-  margin: size(2) !important;
-}
-
-.cre8-u-margin-lg {
-  margin: size(3) !important;
-}
-
-.cre8-u-margin-xl {
-  margin: size(4) !important;
-}
-
-.cre8-u-margin-xxl {
-  margin: size(8) !important;
-}
-
-.cre8-u-margin-top-none {
-  margin-top: 0 !important;
-}
-
-.cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
-}
-
-.cre8-u-margin-top-md {
-  margin-top: size(2) !important;
-}
-
-.cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
-}
-
-.cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
-}
-
-.cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
-}
-
-.cre8-u-margin-right-none {
-  margin-right: 0 !important;
-}
-
-.cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
-}
-
-.cre8-u-margin-right-md {
-  margin-right: size(2) !important;
-}
-
-.cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
-}
-
-.cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
-}
-
-.cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
-}
-
-.cre8-u-margin-bottom-none {
-  margin-bottom: 0 !important;
-}
-
-.cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
-}
-
-.cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
-}
-
-.cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
-}
-
-.cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
-}
-
-.cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
-}
-
-.cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
-}
-
-@media all and (min-width: 768px) {
-  .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
-  }
-}
-.cre8-u-margin-left-none {
-  margin-left: 0 !important;
-}
-
-.cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
-}
-
-.cre8-u-margin-left-md {
-  margin-left: size(2) !important;
-}
-
-.cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
-}
-
-.cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
-}
-
-.cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
-}
-
-.cre8-u-padding-none {
-  padding: 0 !important;
-}
-
-.cre8-u-padding-sm {
-  padding: size(1) !important;
-}
-
-.cre8-u-padding-md {
-  padding: size(2) !important;
-}
-
-.cre8-u-padding-lg {
-  padding: size(3) !important;
-}
-
-.cre8-u-padding-xl {
-  padding: size(4) !important;
-}
-
-.cre8-u-padding-xxl {
-  padding: size(8) !important;
-}
-
-.cre8-u-padding-top-none {
-  padding-top: 0 !important;
-}
-
-.cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
-}
-
-.cre8-u-padding-top-md {
-  padding-top: size(2) !important;
-}
-
-.cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
-}
-
-.cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
-}
-
-.cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
-}
-
-.cre8-u-padding-right-none {
-  padding-right: 0 !important;
-}
-
-.cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
-}
-
-.cre8-u-padding-right-md {
-  padding-right: size(2) !important;
-}
-
-.cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
-}
-
-.cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
-}
-
-.cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
-}
-
-.cre8-u-padding-bottom-none {
-  padding-bottom: 0 !important;
-}
-
-.cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
-}
-
-.cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
-}
-
-.cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
-}
-
-.cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
-}
-
-.cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
-}
-
-.cre8-u-padding-left-none {
-  padding-left: 0 !important;
-}
-
-.cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
-}
-
-.cre8-u-padding-left-md {
-  padding-left: size(2) !important;
-}
-
-.cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
-}
-
-.cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
-}
-
-.cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
-}
-
-.cre8-u-display-flex {
-  display: flex !important;
-}
-
-.cre8-u-display-block {
-  display: block !important;
-}
-
-body {
-  font-family: var(--cre8-typography-body-default-font-family);
-  font-size: var(--cre8-typography-body-default-font-size);
-  font-weight: var(--cre8-typography-body-default-font-weight);
-  line-height: var(--cre8-typography-body-default-line-height);
-  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-transform: var(--cre8-typography-body-default-text-transform);
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  color: var(--cre8-color-content-default);
-  background: var(--background-default);
-}
-
-@media all and (min-width: 60rem) {
-  .page-container {
-    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);
-  }
-}
-.band__inner {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-@media all and (min-width: 60rem) {
-  .band__inner {
-    margin-right: 0;
-  }
-}
-img {
-  max-width: 100%;
-  height: auto;
-}
-
-/**
- * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
- */
-*,
-::slotted(*),
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
+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;
+};
+/* 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 '@tmorrow/cre8-wc/icons/System/Regular/Caret_Left.svg?raw';
+import svgFirstPage from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Double_Left.svg?raw';
+import svgLastPage from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Double_Right.svg?raw';
+import svgCaretRight from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Right.svg?raw';
+import svgEllipsis from '@tmorrow/cre8-wc/icons/System/Regular/Ellipsis.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';
 /**
- * Visually hidden from display
+ * 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
  */
-/*
-=======
-Animations
-=======
-*/
-: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;
+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 } }));
+        };
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 417px;
-      height: 417px;
+    /**
+     * how many elements will displayVariant per page, indicated by business to typically be 20
+     * @attr number
+     */
+    get pageSize() {
+        return this._pageSize;
     }
-  }
-}
-@media (width >= 48rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 330px;
-      height: 330px;
+    set pageSize(newSize) {
+        const oldSize = this._pageSize;
+        this._pageSize = newSize;
+        this.requestUpdate('pageSize', oldSize);
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 330px;
-      height: 330px;
-      transform: translateX(calc(100vw - 45px));
+    get currentPage() {
+        return this._currentPage;
     }
-  }
-}
-@media (width >= 60rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 460px;
-      height: 460px;
+    set currentPage(newPage) {
+        const oldPage = this._currentPage;
+        this._currentPage = newPage;
+        this.requestUpdate('currentPage', oldPage);
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 460px;
-      height: 460px;
-      transform: translateX(calc(100vw - 45px));
+    connectedCallBack() {
+        super.connectedCallback();
     }
-  }
-}
-@media (width >= 75rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 592px;
-      height: 591px;
+    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;
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 45px));
+    get totalPages() {
+        return Math.ceil(this.totalResults / this.pageSize);
     }
-  }
-}
-@media (width >= 87.5rem) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 120px));
+    get hasNoPreviousPage() {
+        return this._currentPage <= 1;
     }
-  }
-}
-@media (width >= 2200px) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 592px));
+    get hasNoNextPage() {
+        return this._currentPage >= this.totalPages;
     }
-  }
-}
-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;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-:host {
-  display: inline-flex;
-}
-
-/**
- * 1)
- */
-.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 _ = Object.defineProperty, c = (m, e, t, n) => {
-  for (var i = void 0, s = m.length - 1, d; s >= 0; s--)
-    (d = m[s]) && (i = d(e, t, i) || i);
-  return i && _(e, t, i), i;
-};
-const b = class b extends C {
-  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 e = this.componentClassNames("cre8-c-page-counter", {});
-    return a`
-      <div class='${e}'>
-        <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 = [k];
-let g = b;
-c([
-  o({ type: Boolean, reflect: !0 })
-], g.prototype, "rangeVariant");
-c([
-  o()
-], g.prototype, "currentPage");
-c([
-  o()
-], g.prototype, "totalResults");
-c([
-  o()
-], g.prototype, "pageSize");
-c([
-  o()
-], g.prototype, "display");
-customElements.get("cre8-page-counter") === void 0 && customElements.define("cre8-page-counter", g);
-const $ = z`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
-}
-
-.cre8-u-is-hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-.cre8-u-is-vishidden {
-  position: absolute !important;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-}
-
-@media all and (min-width: 23.4375rem) {
-  .cre8-u-hide-sm {
-    display: none !important;
-  }
-}
-@media all and (min-width: 35rem) {
-  .cre8-u-hide-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (min-width: 48rem) {
-  .cre8-u-hide-md {
-    display: none !important;
-  }
-}
-@media all and (min-width: 60rem) {
-  .cre8-u-hide-lg {
-    display: none !important;
-  }
-}
-@media all and (min-width: 75rem) {
-  .cre8-u-hide-xl {
-    display: none !important;
-  }
-}
-@media all and (max-width: 23.4375rem) {
-  .cre8-u-show-sm {
-    display: none !important;
-  }
-}
-@media all and (max-width: 35rem) {
-  .cre8-u-show-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (max-width: 48rem) {
-  .cre8-u-show-md {
-    display: none !important;
-  }
-}
-@media all and (max-width: 60rem) {
-  .cre8-u-show-lg {
-    display: none !important;
-  }
-}
-@media all and (max-width: 75rem) {
-  .cre8-u-show-xl {
-    display: none !important;
-  }
-}
-.cre8-u-margin-none {
-  margin: 0 !important;
-}
-
-.cre8-u-margin-sm {
-  margin: size(1) !important;
-}
-
-.cre8-u-margin-md {
-  margin: size(2) !important;
-}
-
-.cre8-u-margin-lg {
-  margin: size(3) !important;
-}
-
-.cre8-u-margin-xl {
-  margin: size(4) !important;
-}
-
-.cre8-u-margin-xxl {
-  margin: size(8) !important;
-}
-
-.cre8-u-margin-top-none {
-  margin-top: 0 !important;
-}
-
-.cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
-}
-
-.cre8-u-margin-top-md {
-  margin-top: size(2) !important;
-}
-
-.cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
-}
-
-.cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
-}
-
-.cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
-}
-
-.cre8-u-margin-right-none {
-  margin-right: 0 !important;
-}
-
-.cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
-}
-
-.cre8-u-margin-right-md {
-  margin-right: size(2) !important;
-}
-
-.cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
-}
-
-.cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
-}
-
-.cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
-}
-
-.cre8-u-margin-bottom-none {
-  margin-bottom: 0 !important;
-}
-
-.cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
-}
-
-.cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
-}
-
-.cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
-}
-
-.cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
-}
-
-.cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
-}
-
-.cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
-}
-
-@media all and (min-width: 768px) {
-  .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
-  }
-}
-.cre8-u-margin-left-none {
-  margin-left: 0 !important;
-}
-
-.cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
-}
-
-.cre8-u-margin-left-md {
-  margin-left: size(2) !important;
-}
-
-.cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
-}
-
-.cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
-}
-
-.cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
-}
-
-.cre8-u-padding-none {
-  padding: 0 !important;
-}
-
-.cre8-u-padding-sm {
-  padding: size(1) !important;
-}
-
-.cre8-u-padding-md {
-  padding: size(2) !important;
-}
-
-.cre8-u-padding-lg {
-  padding: size(3) !important;
-}
-
-.cre8-u-padding-xl {
-  padding: size(4) !important;
-}
-
-.cre8-u-padding-xxl {
-  padding: size(8) !important;
-}
-
-.cre8-u-padding-top-none {
-  padding-top: 0 !important;
-}
-
-.cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
-}
-
-.cre8-u-padding-top-md {
-  padding-top: size(2) !important;
-}
-
-.cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
-}
-
-.cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
-}
-
-.cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
-}
-
-.cre8-u-padding-right-none {
-  padding-right: 0 !important;
-}
-
-.cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
-}
-
-.cre8-u-padding-right-md {
-  padding-right: size(2) !important;
-}
-
-.cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
-}
-
-.cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
-}
-
-.cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
-}
-
-.cre8-u-padding-bottom-none {
-  padding-bottom: 0 !important;
-}
-
-.cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
-}
-
-.cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
-}
-
-.cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
-}
-
-.cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
-}
-
-.cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
-}
-
-.cre8-u-padding-left-none {
-  padding-left: 0 !important;
-}
-
-.cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
-}
-
-.cre8-u-padding-left-md {
-  padding-left: size(2) !important;
-}
-
-.cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
-}
-
-.cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
-}
-
-.cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
-}
-
-.cre8-u-display-flex {
-  display: flex !important;
-}
-
-.cre8-u-display-block {
-  display: block !important;
-}
-
-body {
-  font-family: var(--cre8-typography-body-default-font-family);
-  font-size: var(--cre8-typography-body-default-font-size);
-  font-weight: var(--cre8-typography-body-default-font-weight);
-  line-height: var(--cre8-typography-body-default-line-height);
-  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-transform: var(--cre8-typography-body-default-text-transform);
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  color: var(--cre8-color-content-default);
-  background: var(--background-default);
-}
-
-@media all and (min-width: 60rem) {
-  .page-container {
-    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);
-  }
-}
-.band__inner {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-@media all and (min-width: 60rem) {
-  .band__inner {
-    margin-right: 0;
-  }
-}
-img {
-  max-width: 100%;
-  height: auto;
-}
-
-/**
- * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
- */
-*,
-::slotted(*),
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-/*
-=======
-Animations
-=======
-*/
-: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;
+    _onHandleResize() {
+        this.requestUpdate();
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 417px;
-      height: 417px;
+    handleResize() {
+        this._onHandleResize.bind(this);
     }
-  }
-}
-@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;
+    // 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);
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 45px));
+    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);
+        }
     }
-  }
-}
-@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));
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.handleResize);
+        super.disconnectedCallback();
     }
-  }
-}
-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;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-: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 R = Object.defineProperty, L = Object.getOwnPropertyDescriptor, l = (m, e, t, n) => {
-  for (var i = n > 1 ? void 0 : n ? L(e, t) : e, s = m.length - 1, d; s >= 0; s--)
-    (d = m[s]) && (i = (n ? d(e, t, i) : d(i)) || i);
-  return n && i && R(e, t, i), i;
-};
-const N = `<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>
-`, S = `<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>
-`, T = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.51443 8.51443L1.24215 15.7867C1.10569 15.9232 0.920613 15.9998 0.727633 15.9998C0.534653 15.9998 0.349576 15.9232 0.213119 15.7867C0.076661 15.6503 3.8041e-09 15.4652 0 15.2722C-3.8041e-09 15.0792 0.076661 14.8941 0.213119 14.7577L6.9718 7.99992L0.213119 1.24215C0.076661 1.10569 0 0.920613 0 0.727633C0 0.534653 0.076661 0.349576 0.213119 0.213119C0.349576 0.076661 0.534653 0 0.727633 0C0.920613 0 1.10569 0.076661 1.24215 0.213119L8.51443 7.4854C8.58205 7.55294 8.63569 7.63315 8.67228 7.72143C8.70888 7.80972 8.72772 7.90435 8.72772 7.99992C8.72772 8.09549 8.70888 8.19012 8.67228 8.2784C8.63569 8.36669 8.58205 8.44689 8.51443 8.51443ZM15.7867 7.4854L8.51443 0.213119C8.37797 0.076661 8.1929 0 7.99992 0C7.80694 0 7.62186 0.076661 7.4854 0.213119C7.34894 0.349576 7.27228 0.534653 7.27228 0.727633C7.27228 0.920613 7.34894 1.10569 7.4854 1.24215L14.2441 7.99992L7.4854 14.7577C7.34894 14.8941 7.27228 15.0792 7.27228 15.2722C7.27228 15.4652 7.34894 15.6503 7.4854 15.7867C7.62186 15.9232 7.80694 15.9998 7.99992 15.9998C8.1929 15.9998 8.37797 15.9232 8.51443 15.7867L15.7867 8.51443C15.8543 8.44689 15.908 8.36669 15.9446 8.2784C15.9812 8.19012 16 8.09549 16 7.99992C16 7.90435 15.9812 7.80972 15.9446 7.72143C15.908 7.63315 15.8543 7.55294 15.7867 7.4854Z"/>
-</svg>
-`, I = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.1506 8.51452L4.87827 15.7869C4.8107 15.8544 4.73049 15.908 4.6422 15.9446C4.55392 15.9812 4.4593 16 4.36375 16C4.26819 16 4.17357 15.9812 4.08529 15.9446C3.99701 15.908 3.9168 15.8544 3.84923 15.7869C3.78166 15.7193 3.72806 15.6391 3.6915 15.5508C3.65493 15.4625 3.63611 15.3679 3.63611 15.2724C3.63611 15.1768 3.65493 15.0822 3.6915 14.9939C3.72806 14.9056 3.78166 14.8254 3.84923 14.7578L10.608 8L3.84923 1.24216C3.71277 1.1057 3.63611 0.920622 3.63611 0.72764C3.63611 0.534658 3.71277 0.34958 3.84923 0.213121C3.98569 0.0766618 4.17077 1.43783e-09 4.36375 0C4.55673 -1.43783e-09 4.74181 0.0766618 4.87827 0.213121L12.1506 7.48548C12.2182 7.55302 12.2719 7.63323 12.3085 7.72151C12.3451 7.8098 12.3639 7.90443 12.3639 8C12.3639 8.09557 12.3451 8.1902 12.3085 8.27849C12.2719 8.36677 12.2182 8.44698 12.1506 8.51452Z"/>
-</svg>
-`, w = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 5.71423C7.54793 5.71423 7.10601 5.84829 6.73013 6.09945C6.35424 6.3506 6.06128 6.70758 5.88828 7.12524C5.71528 7.5429 5.67001 8.00248 5.75821 8.44587C5.8464 8.88925 6.06409 9.29653 6.38376 9.61619C6.70342 9.93585 7.11069 10.1535 7.55408 10.2417C7.99747 10.3299 8.45705 10.2847 8.87471 10.1117C9.29237 9.93867 9.64934 9.64571 9.9005 9.26982C10.1517 8.89394 10.2857 8.45202 10.2857 7.99995C10.2857 7.39374 10.0449 6.81236 9.61624 6.3837C9.18759 5.95505 8.60621 5.71423 8 5.71423ZM8 9.1428C7.77396 9.1428 7.55301 9.07578 7.36506 8.9502C7.17712 8.82462 7.03064 8.64613 6.94414 8.4373C6.85764 8.22847 6.83501 7.99868 6.8791 7.77699C6.9232 7.55529 7.03205 7.35166 7.19188 7.19183C7.35171 7.03199 7.55535 6.92315 7.77704 6.87905C7.99873 6.83495 8.22852 6.85759 8.43735 6.94409C8.64618 7.03059 8.82467 7.17707 8.95025 7.36501C9.07583 7.55295 9.14286 7.77391 9.14286 7.99995C9.14286 8.30305 9.02245 8.59374 8.80812 8.80807C8.59379 9.0224 8.30311 9.1428 8 9.1428ZM2.28572 5.71423C1.83364 5.71423 1.39172 5.84829 1.01584 6.09945C0.639957 6.3506 0.346991 6.70758 0.173991 7.12524C0.000990357 7.5429 -0.0442744 8.00248 0.0439204 8.44587C0.132115 8.88925 0.349808 9.29653 0.669471 9.61619C0.989134 9.93585 1.39641 10.1535 1.83979 10.2417C2.28318 10.3299 2.74276 10.2847 3.16042 10.1117C3.57808 9.93867 3.93506 9.64571 4.18622 9.26982C4.43737 8.89394 4.57143 8.45202 4.57143 7.99995C4.57143 7.39374 4.33061 6.81236 3.90196 6.3837C3.4733 5.95505 2.89192 5.71423 2.28572 5.71423ZM2.28572 9.1428C2.05968 9.1428 1.83872 9.07578 1.65078 8.9502C1.46284 8.82462 1.31635 8.64613 1.22985 8.4373C1.14335 8.22847 1.12072 7.99868 1.16482 7.77699C1.20891 7.55529 1.31776 7.35166 1.47759 7.19183C1.63742 7.03199 1.84106 6.92315 2.06275 6.87905C2.28445 6.83495 2.51424 6.85759 2.72307 6.94409C2.9319 7.03059 3.11039 7.17707 3.23597 7.36501C3.36154 7.55295 3.42857 7.77391 3.42857 7.99995C3.42857 8.30305 3.30816 8.59374 3.09384 8.80807C2.87951 9.0224 2.58882 9.1428 2.28572 9.1428ZM13.7143 5.71423C13.2622 5.71423 12.8203 5.84829 12.4444 6.09945C12.0685 6.3506 11.7756 6.70758 11.6026 7.12524C11.4296 7.5429 11.3843 8.00248 11.4725 8.44587C11.5607 8.88925 11.7784 9.29653 12.098 9.61619C12.4177 9.93585 12.825 10.1535 13.2684 10.2417C13.7118 10.3299 14.1713 10.2847 14.589 10.1117C15.0066 9.93867 15.3636 9.64571 15.6148 9.26982C15.8659 8.89394 16 8.45202 16 7.99995C16 7.39374 15.7592 6.81236 15.3305 6.3837C14.9019 5.95505 14.3205 5.71423 13.7143 5.71423ZM13.7143 9.1428C13.4882 9.1428 13.2673 9.07578 13.0793 8.9502C12.8914 8.82462 12.7449 8.64613 12.6584 8.4373C12.5719 8.22847 12.5493 7.99868 12.5934 7.77699C12.6375 7.55529 12.7463 7.35166 12.9062 7.19183C13.066 7.03199 13.2696 6.92315 13.4913 6.87905C13.713 6.83495 13.9428 6.85759 14.1516 6.94409C14.3605 7.03059 14.539 7.17707 14.6645 7.36501C14.7901 7.55295 14.8571 7.77391 14.8571 7.99995C14.8571 8.30305 14.7367 8.59374 14.5224 8.80807C14.3081 9.0224 14.0174 9.1428 13.7143 9.1428Z"/>
-</svg>
-`, u = class u extends C {
-  constructor() {
-    super(...arguments), this._currentPage = 99, this._pageSize = 10, this.visiblePages = 5, this._handleKeydown = (e, t) => (n) => {
-      n.code === "Enter" && this._goToPage(e, t);
-    }, this._goToPage = (e, t) => () => {
-      const n = this._currentPage;
-      let i;
-      this.buttons.forEach((s) => {
-        const d = new x();
-        return d.hideText && d.text === t && (i = d, i.shadowRoot.querySelector(".cre8-c-button").blur()), null;
-      }), this._currentPage = e, this.currentPage = this._currentPage, this.requestUpdate("currentPage", n), this.dispatchEvent(new CustomEvent(
-        "pagination.click",
-        { detail: { buttonName: t ?? this.currentPage.toString(), value: this.currentPage } }
-      ));
-    };
-  }
-  get pageSize() {
-    return this._pageSize;
-  }
-  set pageSize(e) {
-    const t = this._pageSize;
-    this._pageSize = e, this.requestUpdate("pageSize", t);
-  }
-  get currentPage() {
-    return this._currentPage;
-  }
-  set currentPage(e) {
-    const t = this._currentPage;
-    this._currentPage = e, this.requestUpdate("currentPage", t);
-  }
-  connectedCallBack() {
-    super.connectedCallback();
-  }
-  get maxVisiblePages() {
-    const e = {
-      md: 5
-    };
-    return v(y.lg.toString()) ? v(y.md.toString()) ? 0 : Math.min(e.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 e = Math.floor(this.maxVisiblePages / 2);
-    let t = this.currentPage - e;
-    t = Math.min(t, this.totalPages - this.maxVisiblePages + 1), t = Math.max(t, 1);
-    const n = Math.min(t + this.maxVisiblePages - 1, this.totalPages);
-    return [...Array(this.totalPages)].map((i, s) => s + 1).slice(t - 1, n);
-  }
-  async firstUpdated() {
-    if (await this.updateComplete, this._pageSize !== this.pageSize) {
-      const e = this._pageSize;
-      this._pageSize = this.pageSize, this.requestUpdate("pageSize", e);
-    }
-    if (this.windowWidth = window.innerWidth, window.addEventListener("resize", () => {
-      if (this.windowWidth !== window.innerWidth) {
-        const e = this.windowWidth;
-        this.windowWidth = window.innerWidth, this.handleResize(), this.requestUpdate("isResponsive", e);
-      }
-    }), this._currentPage !== this.currentPage) {
-      const e = this._currentPage;
-      this._currentPage = this.currentPage, this.requestUpdate("currentPage", e);
-    }
-  }
-  disconnectedCallback() {
-    window.removeEventListener("resize", this.handleResize), super.disconnectedCallback();
-  }
-  displayTypes() {
-    return a`<cre8-page-counter
+    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(e, t) {
-    return this._goToPage(e, t).bind(this);
-  }
-  handleKeydown(e, t) {
-    return this._handleKeydown(e, t);
-  }
-  render() {
-    const e = 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=${e}>
+      class=${classNames}>
         <slot></slot>
-        ${this.hideLastAndFirstButtons ? p : a` <cre8-button
+        ${!this.hideLastAndFirstButtons ? html ` <cre8-button
               variant="tertiary"
               size="sm"
               text=""
               hideText
               part="icon"
-              aria-disabled="${h(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=${S}
+            svg=${svgFirstPage}
             size="24">
           </cre8-icon>
         </span>
-            </cre8-button>`}
+            </cre8-button>` : nothing}
         <cre8-button
           variant="tertiary"
           size="sm"
           hideText
           text=""
           part="icon"
-          aria-disabled="${h(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">
@@ -1464,7 +251,7 @@ const N = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" x
             className="cre8-c-pagination__icon"
             aria-label="Previous Page"
             slot="before"
-            svg=${N}
+            svg=${svgCaretLeft}
             size="24"
 
             >
@@ -1473,59 +260,68 @@ const N = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" x
         </cre8-button>
 
       ${this.displayTypes()}
-        ${!this.display || this.display === "default" ? a`${this.pageRange[this.pageRange.length - 1] > 1 && this.pageRange[0] !== 1 ? a` <cre8-icon
+        ${!this.display || this.display === 'default'
+            ? html `${this.pageRange[this.pageRange.length - 1] > 1 && this.pageRange[0] !== 1
+                ? html ` <cre8-icon
             aria-label="ellipsis"
             className="cre8-c-pagination__icon"
-            slot="before" svg=${w}
+            slot="before" svg=${svgEllipsis}
             size="24">
-            </cre8-icon>` : p}
-            ${this.pageRange.map((t) => t === this.currentPage ? a`<cre8-button variant="tertiary" tab-index="-1" text="${t}"  class="icon-only" size="sm" id="current"></cre8-button>` : a`<cre8-button
+            </cre8-icon>`
+                : 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="${t}"
+                      text="${page}"
                       class="icon-only"
-                      id="${t}"
-                      @click=${this.goToPage(t, t.toString())}
-                      @keydown=${this.handleKeydown(t, t.toString())}>
-                      </cre8-button>`)}
-            ${this.pageRange[this.pageRange.length - 1] < this.totalPages ? a` <cre8-icon
+                      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-icon
             aria-label="ellipsis"
             className="cre8-c-pagination__icon"
-            slot="before" svg=${w}
+            slot="before" svg=${svgEllipsis}
             size="24">
-            </cre8-icon>` : p}` : p}
+            </cre8-icon>`
+                : nothing}`
+            : nothing}
         <cre8-button
           variant="tertiary"
           size="sm"
           part="icon"
           hideText
           text=""
-          aria-disabled="${h(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=${I}
+            slot="before" svg=${svgCaretRight}
             size="24">
             </cre8-icon>
           </span>
         </cre8-button>
 
-        ${this.hideLastAndFirstButtons ? p : a` <cre8-button
+        ${!this.hideLastAndFirstButtons
+            ? html ` <cre8-button
               variant="tertiary"
               size="sm"
               hideText
               text=""
               part="icon"
-              aria-disabled="${h(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">
@@ -1533,51 +329,52 @@ const N = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" x
                 aria-label="Last Page"
                 className="cre8-c-pagination__icon"
                 slot="before"
-                svg=${T}
+                svg=${svgLastPage}
                 size="24"
                 >
                 </cre8-icon>
               </span>
-            </cre8-button>`}
+            </cre8-button>`
+            : nothing}
 
       </nav>`;
-  }
-};
-u.styles = [$], u.elementDefinitions = {
-  "cre8-button": x
-};
-let r = u;
-l([
-  f()
-], r.prototype, "_currentPage", 2);
-l([
-  o({ reflect: !0, type: Number })
-], r.prototype, "totalResults", 2);
-l([
-  o({ type: Number, reflect: !0 })
-], r.prototype, "pageSize", 1);
-l([
-  f()
-], r.prototype, "_pageSize", 2);
-l([
-  o({ reflect: !0, type: Number })
-], r.prototype, "visiblePages", 2);
-l([
-  o({ type: String, reflect: !0 })
-], r.prototype, "display", 2);
-l([
-  f()
-], r.prototype, "windowWidth", 2);
-l([
-  P("cre8-button")
-], r.prototype, "buttons", 2);
-l([
-  o({ type: Boolean, reflect: !0 })
-], r.prototype, "hideLastAndFirstButtons", 2);
-l([
-  o({ reflect: !0, type: Number })
-], r.prototype, "currentPage", 1);
-customElements.get("cre8-pagination") === void 0 && customElements.define("cre8-pagination", r);
-export {
-  r 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