@duetds/components 8.0.5 → 8.1.0

package/lib/collection/components/duet-pagination/duet-pagination.js

@@ -17,705 +17,705 @@ import { shouldDisplayNavigation } from "./duet-pagination-utils";
  * @part navigation-section - this part enables style overrides for the navigation-section
  */
 export class DuetPagination {
-  constructor() {
-    this.listId = createID("duet-pagination-list");
-    // not in state because we don't want to trigger a render
-    this.firstRenderDone = false;
-    this.handleMediaQueryChange = (mq) => {
-      this.matchesCompactBreakpoint = breakpointTokensUpTo.includes(this.compactBreakpoint) ? mq.matches : !mq.matches;
-    };
-    // called from the watcher and used to make sure any changed to current also updates the internal section index
-    this.actionChain = async (after, before) => {
-      if (after === 0) {
+    constructor() {
+        this.listId = createID("duet-pagination-list");
+        // not in state because we don't want to trigger a render
+        this.firstRenderDone = false;
+        this.handleMediaQueryChange = (mq) => {
+            this.matchesCompactBreakpoint = breakpointTokensUpTo.includes(this.compactBreakpoint) ? mq.matches : !mq.matches;
+        };
+        // called from the watcher and used to make sure any changed to current also updates the internal section index
+        this.actionChain = async (after, before) => {
+            if (after === 0) {
+                this.current = 1;
+            }
+            else if (after > this.totalPages) {
+                this.current = this.totalPages;
+            }
+            else if (before !== after) {
+                const calculatedSectionIndex = Math.ceil(after / this.visibleItems) - 1;
+                if (calculatedSectionIndex !== this.internalSectionIndex) {
+                    this.internalSectionIndex = calculatedSectionIndex;
+                    await this.setFocus();
+                }
+            }
+            return true;
+        };
+        //helper to emit relevant page events
+        this.emitPageEvent = (ev, passedPage) => {
+            const page = Number(passedPage || this.current);
+            this.duetPageChange.emit({
+                component: "duet-pagination",
+                from: page * this.take,
+                to: page * this.take + this.take,
+                current: page,
+                take: this.take,
+                type: "page",
+                originalEvent: ev,
+            });
+        };
+        // this will return the entered number, or the current page if the user presses enter
+        this.getEnteredNumber = debounce(ev => {
+            this.emitPageEvent(ev, this.numbersStore);
+            this.current = Number(this.numbersStore);
+            this.numbersStore = "";
+            this.duetPageChange.emit({
+                component: "duet-pagination",
+                from: this.current * this.take,
+                to: this.current * this.take + this.take,
+                current: this.current,
+                take: this.take,
+                type: "jump",
+                originalEvent: ev,
+            });
+        }, 500);
+        this.processedPageLinks = null;
+        this.numbersStore = "";
+        this.matchesCompactBreakpoint = false;
+        this.totalPages = 10;
+        this.internalSectionIndex = 0;
+        this.theme = "";
+        this.variation = "default";
+        this.accessibleDescribedBy = undefined;
+        this.accessibleDetails = undefined;
+        this.accessibleLabelledBy = undefined;
+        this.accessibleDescription = undefined;
+        this.accessibleLabelsDefaults = {
+            en: {
+                next_page: "Next page",
+                previous_page: "Previous page",
+                first_page: "First page",
+                last_page: "Last page",
+                jump_to: "Jump to page",
+                go_to: "Go to page",
+                description: "You may use arrow keys to select page number",
+                pagination_label: "Pagination, choose a number to jump to a page",
+                select_label: "Total pages {0}, choose a number to jump to a page",
+                prev_section: "Show previous {0} page numbers, screen reader user should use arrowkeys to navigate",
+                next_section: "Show next {0} page numbers, screen reader user should use arrowkeys to navigate",
+            },
+            fi: {
+                next_page: "Seuraava sivu",
+                previous_page: "Edellinen sivu",
+                first_page: "Ensimmäinen sivu",
+                last_page: "Viimeinen sivu",
+                jump_to: "Siirry sivulle",
+                go_to: "Siirry sivulle",
+                description: "Voit käyttää nuolinäppäimiä sivunumeron valitsemiseen",
+                pagination_label: "Sivutus, valitse sivunumero siirtyäksesi sivulle",
+                select_label: "Sivuja yhteensä {0}, valitse sivunumero siirtyäksesi sivulle",
+                prev_section: "Näytä edelliset {0} sivunumerot, käyttäjän pitää käyttää nuolinäppäimiä navigoidaksesi",
+                next_section: "Näytä seuraavat {0} sivunumerot, käyttäjän pitää käyttää nuolinäppäimiä navigoidaksesi",
+            },
+            sv: {
+                next_page: "Nästa sida",
+                previous_page: "Föregående sida",
+                first_page: "Första sidan",
+                last_page: "Sista sidan",
+                jump_to: "Hoppa till sida",
+                go_to: "Hoppa till sida",
+                description: "Du kan använda piltangenterna för att välja sida",
+                pagination_label: "Paginering, välj en siffra för att hoppa till en sida",
+                select_label: "Totalt antal sidor {0}, välj en siffra för att hoppa till en sida",
+                prev_section: "Visa föregående {0} sidnummer, skrivbordsläsare ska använda piltangenterna för att navigera",
+                next_section: "Visa nästa {0} sidnummer, skrivbordsläsare ska använda piltangenterna för att navigera",
+            },
+        };
+        this.accessibleLabels = getLocaleString(this.accessibleLabelsDefaults);
+        this.take = 5;
+        this.visibleItems = 5;
+        this.total = 1000;
+        this.compactBreakpoint = "x-small";
+        this.ariaControls = "";
         this.current = 1;
-      }
-      else if (after > this.totalPages) {
-        this.current = this.totalPages;
-      }
-      else if (before !== after) {
-        const calculatedSectionIndex = Math.ceil(after / this.visibleItems) - 1;
-        if (calculatedSectionIndex !== this.internalSectionIndex) {
-          this.internalSectionIndex = calculatedSectionIndex;
-          await this.setFocus();
+        this.pageLinks = undefined;
+    }
+    watchPropTotalHandler( /*newValue: boolean, oldValue: boolean*/) {
+        this.calculatePageTake();
+        return true;
+    }
+    watchStateHandler(newValue, oldValue) {
+        return this.actionChain(newValue, oldValue);
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        // we want to keep the internal current index in sync with the current prop, but take advantage of the multiple with 0 for the first iteration
+        this.internalSectionIndex = Math.ceil(this.current / this.visibleItems) - 1;
+        this.calculatePageTake();
+        inheritGlobalTheme(this);
+        this.refresh();
+    }
+    componentDidLoad() {
+        this.firstRenderDone = true;
+    }
+    componentWillRender() {
+        if (this.internalSectionIndex !== 0 && this.internalSectionIndex !== this.totalPages) {
+            this.calculatePageTake();
+        }
+    }
+    componentDidRender() {
+        if (this.firstRenderDone && !this.processedPageLinks) {
+            this.setFocus();
         }
-      }
-      return true;
-    };
-    //helper to emit relevant page events
-    this.emitPageEvent = (ev, passedPage) => {
-      const page = Number(passedPage || this.current);
-      this.duetPageChange.emit({
-        component: "duet-pagination",
-        from: page * this.take,
-        to: page * this.take + this.take,
-        current: page,
-        take: this.take,
-        type: "page",
-        originalEvent: ev,
-      });
-    };
-    // this will return the entered number, or the current page if the user presses enter
-    this.getEnteredNumber = debounce(ev => {
-      this.emitPageEvent(ev, this.numbersStore);
-      this.current = Number(this.numbersStore);
-      this.numbersStore = "";
-      this.duetPageChange.emit({
-        component: "duet-pagination",
-        from: this.current * this.take,
-        to: this.current * this.take + this.take,
-        current: this.current,
-        take: this.take,
-        type: "jump",
-        originalEvent: ev,
-      });
-    }, 500);
-    this.processedPageLinks = null;
-    this.numbersStore = "";
-    this.matchesCompactBreakpoint = false;
-    this.totalPages = 10;
-    this.internalSectionIndex = 0;
-    this.theme = "";
-    this.variation = "default";
-    this.accessibleDescribedBy = undefined;
-    this.accessibleDetails = undefined;
-    this.accessibleLabelledBy = undefined;
-    this.accessibleDescription = undefined;
-    this.accessibleLabelsDefaults = {
-      en: {
-        next_page: "Next page",
-        previous_page: "Previous page",
-        first_page: "First page",
-        last_page: "Last page",
-        jump_to: "Jump to page",
-        go_to: "Go to page",
-        description: "You may use arrow keys to select page number",
-        pagination_label: "Pagination, choose a number to jump to a page",
-        select_label: "Total pages {0}, choose a number to jump to a page",
-        prev_section: "Show previous {0} page numbers, screen reader user should use arrowkeys to navigate",
-        next_section: "Show next {0} page numbers, screen reader user should use arrowkeys to navigate",
-      },
-      fi: {
-        next_page: "Seuraava sivu",
-        previous_page: "Edellinen sivu",
-        first_page: "Ensimmäinen sivu",
-        last_page: "Viimeinen sivu",
-        jump_to: "Siirry sivulle",
-        go_to: "Siirry sivulle",
-        description: "Voit käyttää nuolinäppäimiä sivunumeron valitsemiseen",
-        pagination_label: "Sivutus, valitse sivunumero siirtyäksesi sivulle",
-        select_label: "Sivuja yhteensä {0}, valitse sivunumero siirtyäksesi sivulle",
-        prev_section: "Näytä edelliset {0} sivunumerot, käyttäjän pitää käyttää nuolinäppäimiä navigoidaksesi",
-        next_section: "Näytä seuraavat {0} sivunumerot, käyttäjän pitää käyttää nuolinäppäimiä navigoidaksesi",
-      },
-      sv: {
-        next_page: "Nästa sida",
-        previous_page: "Föregående sida",
-        first_page: "Första sidan",
-        last_page: "Sista sidan",
-        jump_to: "Hoppa till sida",
-        go_to: "Hoppa till sida",
-        description: "Du kan använda piltangenterna för att välja sida",
-        pagination_label: "Paginering, välj en siffra för att hoppa till en sida",
-        select_label: "Totalt antal sidor {0}, välj en siffra för att hoppa till en sida",
-        prev_section: "Visa föregående {0} sidnummer, skrivbordsläsare ska använda piltangenterna för att navigera",
-        next_section: "Visa nästa {0} sidnummer, skrivbordsläsare ska använda piltangenterna för att navigera",
-      },
-    };
-    this.accessibleLabels = getLocaleString(this.accessibleLabelsDefaults);
-    this.take = 5;
-    this.visibleItems = 5;
-    this.total = 1000;
-    this.compactBreakpoint = "x-small";
-    this.ariaControls = "";
-    this.current = 1;
-    this.pageLinks = undefined;
-  }
-  watchPropTotalHandler( /*newValue: boolean, oldValue: boolean*/) {
-    this.calculatePageTake();
-    return true;
-  }
-  watchStateHandler(newValue, oldValue) {
-    return this.actionChain(newValue, oldValue);
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    // we want to keep the internal current index in sync with the current prop, but take advantage of the multiple with 0 for the first iteration
-    this.internalSectionIndex = Math.ceil(this.current / this.visibleItems) - 1;
-    this.calculatePageTake();
-    inheritGlobalTheme(this);
-    this.refresh();
-  }
-  componentDidLoad() {
-    this.firstRenderDone = true;
-  }
-  componentWillRender() {
-    if (this.internalSectionIndex !== 0 && this.internalSectionIndex !== this.totalPages) {
-      this.calculatePageTake();
     }
-  }
-  componentDidRender() {
-    if (this.firstRenderDone) {
-      this.setFocus();
+    connectedCallback() {
+        if (Build.isServer) {
+            return;
+        }
+        const token = this.compactBreakpoint === "none" ? "all" : breakpointToToken[this.compactBreakpoint];
+        this.mq = matchMedia(token);
+        this.mq.addEventListener("change", debounce(this.handleMediaQueryChange, 50));
+        this.handleMediaQueryChange(this.mq);
+        connectLanguageChangeObserver(this, { prop: "accessibleLabels", defaults: "accessibleLabelsDefaults" });
     }
-  }
-  connectedCallback() {
-    if (Build.isServer) {
-      return;
+    disconnectedCallback() {
+        if (Build.isServer) {
+            return;
+        }
+        this.mq.removeEventListener("change", this.handleMediaQueryChange);
+        this.mq = null;
+        this.matchesCompactBreakpoint = false;
+        disconnectLanguageChangeObserver(this);
     }
-    const token = this.compactBreakpoint === "none" ? "all" : breakpointToToken[this.compactBreakpoint];
-    this.mq = matchMedia(token);
-    this.mq.addEventListener("change", debounce(this.handleMediaQueryChange, 50));
-    this.handleMediaQueryChange(this.mq);
-    connectLanguageChangeObserver(this, { prop: "accessibleLabels", defaults: "accessibleLabelsDefaults" });
-  }
-  disconnectedCallback() {
-    if (Build.isServer) {
-      return;
+    /**
+     * Private methods.
+     */
+    async refresh() {
+        this.processedPageLinks = parsePossibleJSON(this.pageLinks);
     }
-    this.mq.removeEventListener("change", this.handleMediaQueryChange);
-    this.mq = null;
-    this.matchesCompactBreakpoint = false;
-    disconnectLanguageChangeObserver(this);
-  }
-  /**
-   * Private methods.
-   */
-  async refresh() {
-    this.processedPageLinks = parsePossibleJSON(this.pageLinks);
-  }
-  //get totalpages from visible and total
-  calculatePageTake() {
-    this.totalPages = Math.ceil(this.total / this.take);
-  }
-  //set update current when mouse click on page number
-  async onMouseHandler(e, dir) {
-    if (!this.processedPageLinks) {
-      e.preventDefault();
-      e.stopPropagation();
-      this.current = this.current + dir;
+    //get totalpages from visible and total
+    calculatePageTake() {
+        this.totalPages = Math.ceil(this.total / this.take);
     }
-    this.emitPageEvent(e);
-  }
-  //handle a11y keyboard navigation events
-  async onKeyboardDown(e) {
-    let next = this.current;
-    // handle a11y based keyboard navigation for left/right/up/down
-    if (isArrowLeftKey(e) || isArrowUpKey(e)) {
-      next--;
+    //set update current when mouse click on page number
+    async onMouseHandler(e, dir) {
+        if (!this.processedPageLinks) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.current = this.current + dir;
+        }
+        this.emitPageEvent(e);
+    }
+    //handle a11y keyboard navigation events
+    async onKeyboardDown(e) {
+        let next = this.current;
+        // handle a11y based keyboard navigation for left/right/up/down
+        if (isArrowLeftKey(e) || isArrowUpKey(e)) {
+            next--;
+        }
+        if (isArrowRightKey(e) || isArrowDownKey(e)) {
+            next++;
+        }
+        if (isArrowKey(e)) {
+            if (next <= this.totalPages) {
+                this.current = next;
+                if (this.processedPageLinks) {
+                    this.emitPageEvent(e, next - 1);
+                    window.open(this.processedPageLinks[next - 1], "_self", "");
+                }
+                else {
+                    this.emitPageEvent(e);
+                }
+            }
+        }
+        //handle the jump feature, where numbers can be entered
+        // this isn't supported in NVDA where the number buttons are used by NVDA itself
+        // and because of that the feature is not announced for screenreaders
+        if (isNumber(e) && this.shouldDisplayNavigation()) {
+            this.numbersStore = this.numbersStore + e.key;
+            if (Number(this.numbersStore) > this.totalPages) {
+                this.numbersStore = this.totalPages + "";
+            }
+            this.getEnteredNumber(e);
+        }
     }
-    if (isArrowRightKey(e) || isArrowDownKey(e)) {
-      next++;
+    // utility to set focus on active button
+    async setFocus() {
+        const currentDomElement = this.nativeNav.querySelector(`[data-id='${this.current}']`);
+        currentDomElement && (await currentDomElement.setFocus());
     }
-    if (isArrowKey(e)) {
-      if (next <= this.totalPages) {
-        this.current = next;
+    //handles click on page numbers
+    pageClickHandler(e) {
+        const clickedId = Number(e.target.getAttribute("data-id"));
+        if (!this.processedPageLinks) {
+            e.preventDefault();
+            this.current = clickedId;
+        }
+        this.emitPageEvent(e, clickedId);
+    }
+    selectClickHandler(e) {
+        e.preventDefault();
+        const clickedId = Number(e.target.value);
+        this.current = clickedId;
         if (this.processedPageLinks) {
-          this.emitPageEvent(e, next - 1);
-          window.open(this.processedPageLinks[next - 1], "_self", "");
+            this.emitPageEvent(e, clickedId - 1);
+            window.open(this.processedPageLinks[clickedId - 1], "_self", "");
         }
         else {
-          this.emitPageEvent(e);
+            this.emitPageEvent(e, clickedId);
         }
-      }
     }
-    //handle the jump feature, where numbers can be entered
-    // this isn't supported in NVDA where the number buttons are used by NVDA itself
-    // and because of that the feature is not announced for screenreaders
-    if (isNumber(e) && this.shouldDisplayNavigation()) {
-      this.numbersStore = this.numbersStore + e.key;
-      if (Number(this.numbersStore) > this.totalPages) {
-        this.numbersStore = this.totalPages + "";
-      }
-      this.getEnteredNumber(e);
+    //handles click on the next section buttons
+    sectionClickHandler(e, direction) {
+        e.preventDefault();
+        let next = this.internalSectionIndex + direction;
+        const takePerVisibleItems = this.take * this.visibleItems;
+        if (next * takePerVisibleItems > this.total) {
+            next = this.internalSectionIndex;
+        }
+        const newSection = next;
+        this.internalSectionIndex = newSection >= 0 ? newSection : 0;
     }
-  }
-  // utility to set focus on active button
-  async setFocus() {
-    const currentDomElement = this.nativeNav.querySelector(`[data-id='${this.current}']`);
-    currentDomElement && (await currentDomElement.setFocus());
-  }
-  //handles click on page numbers
-  pageClickHandler(e) {
-    const clickedId = Number(e.target.getAttribute("data-id"));
-    if (!this.processedPageLinks) {
-      e.preventDefault();
-      this.current = clickedId;
+    //handles click on the jump (1)button
+    jumpToStart(e) {
+        if (!this.processedPageLinks) {
+            e.preventDefault();
+            this.internalSectionIndex = 0;
+            this.current = 1;
+        }
+        this.emitPageEvent(e);
     }
-    this.emitPageEvent(e, clickedId);
-  }
-  selectClickHandler(e) {
-    e.preventDefault();
-    const clickedId = Number(e.target.value);
-    this.current = clickedId;
-    if (this.processedPageLinks) {
-      this.emitPageEvent(e, clickedId - 1);
-      window.open(this.processedPageLinks[clickedId - 1], "_self", "");
+    //handles click on the jump (total) button
+    jumpToEnd(e) {
+        if (!this.processedPageLinks) {
+            e.preventDefault();
+            this.internalSectionIndex = Math.ceil(this.totalPages / this.take - 1);
+            this.current = this.totalPages;
+        }
+        this.emitPageEvent(e);
     }
-    else {
-      this.emitPageEvent(e, clickedId);
+    renderPageButton(pageNumber) {
+        return (h("duet-button", { class: {
+                "duet-pagination-link": true,
+            }, id: `page-${pageNumber}-button`, color: pageNumber !== this.current
+                ? this.theme !== "turva"
+                    ? "secondary"
+                    : "secondary-turva"
+                : this.theme !== "turva"
+                    ? "primary"
+                    : "primary-turva", "data-id": pageNumber, "center-text": true, variation: "plain", margin: "none", accessibleLabel: `${this.accessibleLabels.go_to} ${pageNumber}`, onClick: e => this.pageClickHandler(e), theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[pageNumber - 1] : undefined }, h("div", { class: "duet-pagination-page-number", "aria-hidden": true }, pageNumber)));
     }
-  }
-  //handles click on the next section buttons
-  sectionClickHandler(e, direction) {
-    e.preventDefault();
-    let next = this.internalSectionIndex + direction;
-    const takePerVisibleItems = this.take * this.visibleItems;
-    if (next * takePerVisibleItems > this.total) {
-      next = this.internalSectionIndex;
+    // render the individual page numbers
+    renderPageNumbers() {
+        const items = [];
+        let i = this.internalSectionIndex * this.visibleItems;
+        do {
+            i++;
+            if (i > this.totalPages) {
+                break;
+            }
+            items.push(h("li", { class: {
+                    "duet-pagination-item": true,
+                    "duet-pagination-item-is-active": i === this.current,
+                }, role: "menuitem" }, this.renderPageButton(i)));
+        } while (i < this.visibleItems + this.internalSectionIndex * this.visibleItems);
+        return items;
     }
-    const newSection = next;
-    this.internalSectionIndex = newSection >= 0 ? newSection : 0;
-  }
-  //handles click on the jump (1)button
-  jumpToStart(e) {
-    if (!this.processedPageLinks) {
-      e.preventDefault();
-      this.internalSectionIndex = 0;
-      this.current = 1;
+    renderSelect() {
+        const items = [];
+        for (let i = 1; i <= this.totalPages; i++) {
+            items.push({
+                value: i.toString(),
+                label: i.toString(),
+            });
+        }
+        const select = (h("duet-select", { theme: this.theme, class: "duet-pagination-select", variation: "compact", items: JSON.stringify(items), value: this.current.toString(), label: this.accessibleLabels.select_label.replace("{0}", `${this.totalPages}`), labelHidden: true, onDuetChange: e => this.selectClickHandler(e) }));
+        return (h("li", null, select, h("span", { class: "duet-pagination-total-pages", "aria-hidden": "true" }, "/ ", this.totalPages)));
     }
-    this.emitPageEvent(e);
-  }
-  //handles click on the jump (total) button
-  jumpToEnd(e) {
-    if (!this.processedPageLinks) {
-      e.preventDefault();
-      this.internalSectionIndex = Math.ceil(this.totalPages / this.take - 1);
-      this.current = this.totalPages;
+    shouldDisplayNavigation() {
+        if (this.variation !== "compact" && !this.matchesCompactBreakpoint) {
+            return shouldDisplayNavigation(this.visibleItems, this.total, this.take);
+        }
+        return false;
     }
-    this.emitPageEvent(e);
-  }
-  renderPageButton(pageNumber) {
-    return (h("duet-button", { class: {
-        "duet-pagination-link": true,
-      }, id: `page-${pageNumber}-button`, color: pageNumber !== this.current
-        ? this.theme !== "turva"
-          ? "secondary"
-          : "secondary-turva"
-        : this.theme !== "turva"
-          ? "primary"
-          : "primary-turva", "data-id": pageNumber, "center-text": true, variation: "plain", margin: "none", accessibleLabel: `${this.accessibleLabels.go_to} ${pageNumber}`, onClick: e => this.pageClickHandler(e), theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[pageNumber - 1] : undefined }, h("div", { class: "duet-pagination-page-number", "aria-hidden": true }, pageNumber)));
-  }
-  // render the individual page numbers
-  renderPageNumbers() {
-    const items = [];
-    let i = this.internalSectionIndex * this.visibleItems;
-    do {
-      i++;
-      if (i > this.totalPages) {
-        break;
-      }
-      items.push(h("li", { class: {
-          "duet-pagination-item": true,
-          "duet-pagination-item-is-active": i === this.current,
-        }, role: "menuitem" }, this.renderPageButton(i)));
-    } while (i < this.visibleItems + this.internalSectionIndex * this.visibleItems);
-    return items;
-  }
-  renderSelect() {
-    const items = [];
-    for (let i = 1; i <= this.totalPages; i++) {
-      items.push({
-        value: i.toString(),
-        label: i.toString(),
-      });
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        return (h(Host, { onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { role: "navigation", "aria-labelledby": this.accessibleLabelledBy ? `${this.accessibleLabelledBy} ${this.listId}` : this.listId, "aria-describedby": this.accessibleDescribedBy ? `${this.accessibleDescribedBy} ${this.listId}` : this.listId, "aria-descriptions": this.accessibleDescription, "aria-details": this.accessibleDetails, ref: el => (this.nativeNav = el), "aria-controls": this.ariaControls, class: {
+                "duet-pagination-nav": true,
+                [`duet-pagination-variation-${this.variation}`]: true,
+            } }, this.numbersStore !== "" && (h("div", { "aria-live": "assertive", "aria-relevant": "text", class: "duet-pagination-overlay", "aria-label": `${this.accessibleLabels.jump_to} ${this.numbersStore}`, part: "navigation-overlay" }, h("duet-badge", { theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { id: this.listId, class: {
+                "duet-pagination": true,
+                "duet-pagination-is-dimmed": this.numbersStore !== "",
+            }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { class: {
+                "duet-pagination-page-button": true,
+                "duet-pagination-button-first": true,
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { disabled: this.internalSectionIndex === 0 && this.current <= 1, "data-direction": "back", accessibleLabel: this.accessibleLabels.first_page, title: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), "icon-name": "action-move-to-first", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }))), h("li", { class: {
+                "duet-pagination-page-button": true,
+                "duet-pagination-button-first": true,
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { disabled: !!((this.internalSectionIndex === 0 && this.current <= 1) ||
+                (this.current <= 1 && this.processedPageLinks)), "data-direction": "back", onClick: e => this.onMouseHandler(e, -1), "accessible-label": this.accessibleLabels.previous_page, title: this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current - 2] : undefined })), this.internalSectionIndex !== 0 && this.shouldDisplayNavigation() && (h(Fragment, null, h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-jump-back", "center-text": "true", variation: "plain", color: this.theme !== "turva" ? "secondary" : "secondary-turva", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }, h("div", { class: "duet-pagination-page-number" }, "1"))), h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-dots-back", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1), theme: this.theme }, h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026"))))), (this.shouldDisplayNavigation() && this.renderPageNumbers()) || this.renderSelect(), (this.internalSectionIndex + 1) * this.visibleItems < this.totalPages &&
+            this.shouldDisplayNavigation() && (h(Fragment, null, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-dots-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1), theme: this.theme }, h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-jump-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), theme: this.theme, url: this.processedPageLinks
+                ? this.processedPageLinks[this.processedPageLinks.length - 1]
+                : undefined }, h("div", { class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { class: {
+                "duet-pagination-page-button": true,
+                "duet-pagination-button-last": true,
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { disabled: !!((this.current === this.totalPages &&
+                this.internalSectionIndex === Math.ceil(this.totalPages / this.visibleItems) - 1) ||
+                (this.current === this.totalPages && this.processedPageLinks)), class: "duet-date-dialog-next", "accessible-label": this.accessibleLabels.next_page, title: this.accessibleLabels.next_page, onClick: e => this.onMouseHandler(e, 1), "icon-name": "action-move-to-next", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current] : undefined })), (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { class: {
+                "duet-pagination-page-button": true,
+                "duet-pagination-button-last": true,
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { disabled: this.current === this.totalPages &&
+                this.internalSectionIndex === Math.ceil(this.totalPages / this.visibleItems) - 1, accessibleLabel: this.accessibleLabels.last_page, title: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), "icon-name": "action-move-to-last", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.totalPages - 1] : undefined })))))));
     }
-    const select = (h("duet-select", { theme: this.theme, class: "duet-pagination-select", variation: "compact", items: JSON.stringify(items), value: this.current.toString(), label: this.accessibleLabels.select_label.replace("{0}", `${this.totalPages}`), labelHidden: true, onDuetChange: e => this.selectClickHandler(e) }));
-    return (h("li", null, select, h("span", { class: "duet-pagination-total-pages", "aria-hidden": "true" }, "/ ", this.totalPages)));
-  }
-  shouldDisplayNavigation() {
-    if (this.variation !== "compact" && !this.matchesCompactBreakpoint) {
-      return shouldDisplayNavigation(this.visibleItems, this.total, this.take);
+    static get is() { return "duet-pagination"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-pagination.scss"]
+        };
     }
-    return false;
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    return (h(Host, { onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { role: "navigation", "aria-labelledby": this.accessibleLabelledBy ? `${this.accessibleLabelledBy} ${this.listId}` : this.listId, "aria-describedby": this.accessibleDescribedBy ? `${this.accessibleDescribedBy} ${this.listId}` : this.listId, "aria-descriptions": this.accessibleDescription, "aria-details": this.accessibleDetails, ref: el => (this.nativeNav = el), "aria-controls": this.ariaControls, class: {
-        "duet-pagination-nav": true,
-        [`duet-pagination-variation-${this.variation}`]: true,
-      } }, this.numbersStore !== "" && (h("div", { "aria-live": "assertive", "aria-relevant": "text", class: "duet-pagination-overlay", "aria-label": `${this.accessibleLabels.jump_to} ${this.numbersStore}`, part: "navigation-overlay" }, h("duet-badge", { theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { id: this.listId, class: {
-        "duet-pagination": true,
-        "duet-pagination-is-dimmed": this.numbersStore !== "",
-      }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { class: {
-        "duet-pagination-page-button": true,
-        "duet-pagination-button-first": true,
-      }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { disabled: this.internalSectionIndex === 0 && this.current <= 1, "data-direction": "back", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), "icon-name": "action-move-to-first", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }))), h("li", { class: {
-        "duet-pagination-page-button": true,
-        "duet-pagination-button-first": true,
-      }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { disabled: !!((this.internalSectionIndex === 0 && this.current <= 1) ||
-        (this.current <= 1 && this.processedPageLinks)), "data-direction": "back", onClick: e => this.onMouseHandler(e, -1), "accessible-label": this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current - 2] : undefined })), this.internalSectionIndex !== 0 && this.shouldDisplayNavigation() && (h(Fragment, null, h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-jump-back", "center-text": "true", variation: "plain", color: this.theme !== "turva" ? "secondary" : "secondary-turva", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }, h("div", { class: "duet-pagination-page-number" }, "1"))), h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-dots-back", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1), theme: this.theme }, h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026"))))), (this.shouldDisplayNavigation() && this.renderPageNumbers()) || this.renderSelect(), (this.internalSectionIndex + 1) * this.visibleItems < this.totalPages &&
-      this.shouldDisplayNavigation() && (h(Fragment, null, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-dots-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1), theme: this.theme }, h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-jump-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), theme: this.theme, url: this.processedPageLinks
-        ? this.processedPageLinks[this.processedPageLinks.length - 1]
-        : undefined }, h("div", { class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { class: {
-        "duet-pagination-page-button": true,
-        "duet-pagination-button-last": true,
-      }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { disabled: !!((this.current === this.totalPages &&
-        this.internalSectionIndex === Math.ceil(this.totalPages / this.visibleItems) - 1) ||
-        (this.current === this.totalPages && this.processedPageLinks)), class: "duet-date-dialog-next", "accessible-label": this.accessibleLabels.next_page, onClick: e => this.onMouseHandler(e, 1), "icon-name": "action-move-to-next", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current] : undefined })), (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { class: {
-        "duet-pagination-page-button": true,
-        "duet-pagination-button-last": true,
-      }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { disabled: this.current === this.totalPages &&
-        this.internalSectionIndex === Math.ceil(this.totalPages / this.visibleItems) - 1, accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), "icon-name": "action-move-to-last", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.totalPages - 1] : undefined })))))));
-  }
-  static get is() { return "duet-pagination"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["duet-pagination.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["duet-pagination.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "theme": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "DuetTheme",
-          "resolved": "\"\" | \"default\" | \"turva\"",
-          "references": {
-            "DuetTheme": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetTheme"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Theme of the pagination."
-        },
-        "attribute": "theme",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "variation": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetPaginationVariation",
-          "resolved": "\"compact\" | \"default\"",
-          "references": {
-            "DuetPaginationVariation": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-pagination/duet-pagination.tsx",
-              "id": "src/components/duet-pagination/duet-pagination.tsx::DuetPaginationVariation"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Variation of the paginator (compact and default supported)"
-        },
-        "attribute": "variation",
-        "reflect": false,
-        "defaultValue": "\"default\""
-      },
-      "accessibleDescribedBy": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Described By id"
-        },
-        "attribute": "accessible-described-by",
-        "reflect": false,
-        "defaultValue": "undefined"
-      },
-      "accessibleDetails": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Details of the component"
-        },
-        "attribute": "accessible-details",
-        "reflect": false,
-        "defaultValue": "undefined"
-      },
-      "accessibleLabelledBy": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "String of id's that indicate alternative labels elements"
-        },
-        "attribute": "accessible-labelled-by",
-        "reflect": false,
-        "defaultValue": "undefined"
-      },
-      "accessibleDescription": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Aria description the button"
-        },
-        "attribute": "accessible-description",
-        "reflect": false,
-        "defaultValue": "undefined"
-      },
-      "accessibleLabelsDefaults": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetLangObject",
-          "resolved": "DuetLangObject",
-          "references": {
-            "DuetLangObject": {
-              "location": "import",
-              "path": "../../utils/language-utils",
-              "id": "src/utils/language-utils.ts::DuetLangObject"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Default pagination labels"
-        },
-        "defaultValue": "{\n    en: {\n      next_page: \"Next page\",\n      previous_page: \"Previous page\",\n      first_page: \"First page\",\n      last_page: \"Last page\",\n      jump_to: \"Jump to page\",\n      go_to: \"Go to page\",\n      description: \"You may use arrow keys to select page number\",\n      pagination_label: \"Pagination, choose a number to jump to a page\",\n      select_label: \"Total pages {0}, choose a number to jump to a page\",\n      prev_section: \"Show previous {0} page numbers, screen reader user should use arrowkeys to navigate\",\n      next_section: \"Show next {0} page numbers, screen reader user should use arrowkeys to navigate\",\n    },\n    fi: {\n      next_page: \"Seuraava sivu\",\n      previous_page: \"Edellinen sivu\",\n      first_page: \"Ensimm\u00E4inen sivu\",\n      last_page: \"Viimeinen sivu\",\n      jump_to: \"Siirry sivulle\",\n      go_to: \"Siirry sivulle\",\n      description: \"Voit k\u00E4ytt\u00E4\u00E4 nuolin\u00E4pp\u00E4imi\u00E4 sivunumeron valitsemiseen\",\n      pagination_label: \"Sivutus, valitse sivunumero siirty\u00E4ksesi sivulle\",\n      select_label: \"Sivuja yhteens\u00E4 {0}, valitse sivunumero siirty\u00E4ksesi sivulle\",\n      prev_section: \"N\u00E4yt\u00E4 edelliset {0} sivunumerot, k\u00E4ytt\u00E4j\u00E4n pit\u00E4\u00E4 k\u00E4ytt\u00E4\u00E4 nuolin\u00E4pp\u00E4imi\u00E4 navigoidaksesi\",\n      next_section: \"N\u00E4yt\u00E4 seuraavat {0} sivunumerot, k\u00E4ytt\u00E4j\u00E4n pit\u00E4\u00E4 k\u00E4ytt\u00E4\u00E4 nuolin\u00E4pp\u00E4imi\u00E4 navigoidaksesi\",\n    },\n    sv: {\n      next_page: \"N\u00E4sta sida\",\n      previous_page: \"F\u00F6reg\u00E5ende sida\",\n      first_page: \"F\u00F6rsta sidan\",\n      last_page: \"Sista sidan\",\n      jump_to: \"Hoppa till sida\",\n      go_to: \"Hoppa till sida\",\n      description: \"Du kan anv\u00E4nda piltangenterna f\u00F6r att v\u00E4lja sida\",\n      pagination_label: \"Paginering, v\u00E4lj en siffra f\u00F6r att hoppa till en sida\",\n      select_label: \"Totalt antal sidor {0}, v\u00E4lj en siffra f\u00F6r att hoppa till en sida\",\n      prev_section: \"Visa f\u00F6reg\u00E5ende {0} sidnummer, skrivbordsl\u00E4sare ska anv\u00E4nda piltangenterna f\u00F6r att navigera\",\n      next_section: \"Visa n\u00E4sta {0} sidnummer, skrivbordsl\u00E4sare ska anv\u00E4nda piltangenterna f\u00F6r att navigera\",\n    },\n  }"
-      },
-      "accessibleLabels": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "Record<string, string>",
-          "resolved": "{ [x: string]: string; }",
-          "references": {
-            "Record": {
-              "location": "global",
-              "id": "global::Record"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Default pagination labels"
-        },
-        "defaultValue": "getLocaleString(\n    this.accessibleLabelsDefaults\n  )"
-      },
-      "take": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The size of the take, when paginating."
-        },
-        "attribute": "take",
-        "reflect": false,
-        "defaultValue": "5"
-      },
-      "visibleItems": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Amount of visible page numbers to show"
-        },
-        "attribute": "visible-items",
-        "reflect": false,
-        "defaultValue": "5"
-      },
-      "total": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The total size of the paginating data"
-        },
-        "attribute": "total",
-        "reflect": false,
-        "defaultValue": "1000"
-      },
-      "compactBreakpoint": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetBreakpoints | \"none\"",
-          "resolved": "\"large\" | \"medium\" | \"none\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\"",
-          "references": {
-            "DuetBreakpoints": {
-              "location": "import",
-              "path": "../../utils/token-utils",
-              "id": "src/utils/token-utils.ts::DuetBreakpoints"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Breakpoint at which the pagination should be rendered as compact with a select element"
-        },
-        "attribute": "compact-breakpoint",
-        "reflect": false,
-        "defaultValue": "\"x-small\""
-      },
-      "ariaControls": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Used to indicate which dom element with ID this element controls"
-        },
-        "attribute": "accessible-controls",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "current": {
-        "type": "number",
-        "mutable": true,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The current page"
-        },
-        "attribute": "current",
-        "reflect": false,
-        "defaultValue": "1"
-      },
-      "pageLinks": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string[] | string",
-          "resolved": "string | string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Array of urls that are used to create page links"
-        },
-        "attribute": "page-links",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "processedPageLinks": {},
-      "numbersStore": {},
-      "matchesCompactBreakpoint": {},
-      "totalPages": {},
-      "internalSectionIndex": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "duetPageChange",
-        "name": "duetPageChange",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted a page selection has been made"
-        },
-        "complexType": {
-          "original": "DuetPaginationPageEvent",
-          "resolved": "{ originalEvent?: Event; component: \"duet-pagination\"; current: number; take: number; from: number; to: number; type: \"page\" | \"jump\"; }",
-          "references": {
-            "DuetPaginationPageEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-pagination/duet-pagination.tsx",
-              "id": "src/components/duet-pagination/duet-pagination.tsx::DuetPaginationPageEvent"
+    static get styleUrls() {
+        return {
+            "$": ["duet-pagination.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTheme",
+                    "resolved": "\"\" | \"default\" | \"turva\"",
+                    "references": {
+                        "DuetTheme": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme of the pagination."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "variation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetPaginationVariation",
+                    "resolved": "\"compact\" | \"default\"",
+                    "references": {
+                        "DuetPaginationVariation": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-pagination/duet-pagination.tsx",
+                            "id": "src/components/duet-pagination/duet-pagination.tsx::DuetPaginationVariation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variation of the paginator (compact and default supported)"
+                },
+                "attribute": "variation",
+                "reflect": false,
+                "defaultValue": "\"default\""
+            },
+            "accessibleDescribedBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Described By id"
+                },
+                "attribute": "accessible-described-by",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "accessibleDetails": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Details of the component"
+                },
+                "attribute": "accessible-details",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "accessibleLabelledBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "String of id's that indicate alternative labels elements"
+                },
+                "attribute": "accessible-labelled-by",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "accessibleDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria description the button"
+                },
+                "attribute": "accessible-description",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "accessibleLabelsDefaults": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetLangObject",
+                    "resolved": "DuetLangObject",
+                    "references": {
+                        "DuetLangObject": {
+                            "location": "import",
+                            "path": "../../utils/language-utils",
+                            "id": "src/utils/language-utils.ts::DuetLangObject"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default pagination labels"
+                },
+                "defaultValue": "{\n    en: {\n      next_page: \"Next page\",\n      previous_page: \"Previous page\",\n      first_page: \"First page\",\n      last_page: \"Last page\",\n      jump_to: \"Jump to page\",\n      go_to: \"Go to page\",\n      description: \"You may use arrow keys to select page number\",\n      pagination_label: \"Pagination, choose a number to jump to a page\",\n      select_label: \"Total pages {0}, choose a number to jump to a page\",\n      prev_section: \"Show previous {0} page numbers, screen reader user should use arrowkeys to navigate\",\n      next_section: \"Show next {0} page numbers, screen reader user should use arrowkeys to navigate\",\n    },\n    fi: {\n      next_page: \"Seuraava sivu\",\n      previous_page: \"Edellinen sivu\",\n      first_page: \"Ensimm\u00E4inen sivu\",\n      last_page: \"Viimeinen sivu\",\n      jump_to: \"Siirry sivulle\",\n      go_to: \"Siirry sivulle\",\n      description: \"Voit k\u00E4ytt\u00E4\u00E4 nuolin\u00E4pp\u00E4imi\u00E4 sivunumeron valitsemiseen\",\n      pagination_label: \"Sivutus, valitse sivunumero siirty\u00E4ksesi sivulle\",\n      select_label: \"Sivuja yhteens\u00E4 {0}, valitse sivunumero siirty\u00E4ksesi sivulle\",\n      prev_section: \"N\u00E4yt\u00E4 edelliset {0} sivunumerot, k\u00E4ytt\u00E4j\u00E4n pit\u00E4\u00E4 k\u00E4ytt\u00E4\u00E4 nuolin\u00E4pp\u00E4imi\u00E4 navigoidaksesi\",\n      next_section: \"N\u00E4yt\u00E4 seuraavat {0} sivunumerot, k\u00E4ytt\u00E4j\u00E4n pit\u00E4\u00E4 k\u00E4ytt\u00E4\u00E4 nuolin\u00E4pp\u00E4imi\u00E4 navigoidaksesi\",\n    },\n    sv: {\n      next_page: \"N\u00E4sta sida\",\n      previous_page: \"F\u00F6reg\u00E5ende sida\",\n      first_page: \"F\u00F6rsta sidan\",\n      last_page: \"Sista sidan\",\n      jump_to: \"Hoppa till sida\",\n      go_to: \"Hoppa till sida\",\n      description: \"Du kan anv\u00E4nda piltangenterna f\u00F6r att v\u00E4lja sida\",\n      pagination_label: \"Paginering, v\u00E4lj en siffra f\u00F6r att hoppa till en sida\",\n      select_label: \"Totalt antal sidor {0}, v\u00E4lj en siffra f\u00F6r att hoppa till en sida\",\n      prev_section: \"Visa f\u00F6reg\u00E5ende {0} sidnummer, skrivbordsl\u00E4sare ska anv\u00E4nda piltangenterna f\u00F6r att navigera\",\n      next_section: \"Visa n\u00E4sta {0} sidnummer, skrivbordsl\u00E4sare ska anv\u00E4nda piltangenterna f\u00F6r att navigera\",\n    },\n  }"
+            },
+            "accessibleLabels": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Record<string, string>",
+                    "resolved": "{ [x: string]: string; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default pagination labels"
+                },
+                "defaultValue": "getLocaleString(\n    this.accessibleLabelsDefaults\n  )"
+            },
+            "take": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the take, when paginating."
+                },
+                "attribute": "take",
+                "reflect": false,
+                "defaultValue": "5"
+            },
+            "visibleItems": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Amount of visible page numbers to show"
+                },
+                "attribute": "visible-items",
+                "reflect": false,
+                "defaultValue": "5"
+            },
+            "total": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The total size of the paginating data"
+                },
+                "attribute": "total",
+                "reflect": false,
+                "defaultValue": "1000"
+            },
+            "compactBreakpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetBreakpoints | \"none\"",
+                    "resolved": "\"large\" | \"medium\" | \"none\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\"",
+                    "references": {
+                        "DuetBreakpoints": {
+                            "location": "import",
+                            "path": "../../utils/token-utils",
+                            "id": "src/utils/token-utils.ts::DuetBreakpoints"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Breakpoint at which the pagination should be rendered as compact with a select element"
+                },
+                "attribute": "compact-breakpoint",
+                "reflect": false,
+                "defaultValue": "\"x-small\""
+            },
+            "ariaControls": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Used to indicate which dom element with ID this element controls"
+                },
+                "attribute": "accessible-controls",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "current": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The current page"
+                },
+                "attribute": "current",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "pageLinks": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[] | string",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of urls that are used to create page links"
+                },
+                "attribute": "page-links",
+                "reflect": false
             }
-          }
-        }
-      }];
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "total",
-        "methodName": "watchPropTotalHandler"
-      }, {
-        "propName": "current",
-        "methodName": "watchStateHandler"
-      }, {
-        "propName": "pageLinks",
-        "methodName": "refresh"
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "processedPageLinks": {},
+            "numbersStore": {},
+            "matchesCompactBreakpoint": {},
+            "totalPages": {},
+            "internalSectionIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "duetPageChange",
+                "name": "duetPageChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted a page selection has been made"
+                },
+                "complexType": {
+                    "original": "DuetPaginationPageEvent",
+                    "resolved": "{ originalEvent?: Event; component: \"duet-pagination\"; current: number; take: number; from: number; to: number; type: \"page\" | \"jump\"; }",
+                    "references": {
+                        "DuetPaginationPageEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-pagination/duet-pagination.tsx",
+                            "id": "src/components/duet-pagination/duet-pagination.tsx::DuetPaginationPageEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "total",
+                "methodName": "watchPropTotalHandler"
+            }, {
+                "propName": "current",
+                "methodName": "watchStateHandler"
+            }, {
+                "propName": "pageLinks",
+                "methodName": "refresh"
+            }];
+    }
 }