@duetds/components 6.2.4 → 6.2.5

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { Component, Element, Event, Fragment, h, Host, Prop, State, Watch } from "@stencil/core";
+import { Fragment, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { debounce } from "../../utils/js-utils";
@@ -17,48 +17,61 @@ import { shouldDisplayNavigation } from "./duet-pagination-utils";
 export class DuetPagination {
   constructor() {
     this.listId = createID("duet-pagination-list");
-    this.numbersStore = "";
     /**
-     * State() variables
-     * @internal
+     * Private methods.
      */
+    // 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 (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 = debounce((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,
+      });
+    }, 100);
+    // 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.numbersStore = "";
     this.totalPages = 10;
-    /**
-     * State() variables
-     * @internal
-     */
     this.internalSectionIndex = 0;
-    /**
-     * Theme of the pagination.
-     */
     this.theme = "";
-    /**
-     * Characters to use for the jump buttons.
-     */
     this.jumpString = "...";
-    /**
-     * Variation of the paginator (compact and default supported)
-     */
     this.variation = "default";
-    /**
-     * Described By id
-     */
     this.accessibleDescribedBy = undefined;
-    /**
-     * Details of the component
-     */
     this.accessibleDetails = undefined;
-    /**
-     * String of id's that indicate alternative labels elements
-     */
     this.accessibleLabelledBy = undefined;
-    /**
-     * Aria description the button
-     */
     this.accessibleDescription = undefined;
-    /**
-     * Default pagination labels
-     */
     this.accessibleLabelsDefaults = {
       en: {
         next_page: "Next page",
@@ -97,75 +110,12 @@ export class DuetPagination {
         next_section: "Visa nästa {0} sidnummer, skrivbordsläsare ska använda piltangenterna för att navigera",
       },
     };
-    /**
-     * Default pagination labels
-     */
     this.accessibleLabels = getLocaleString(this.accessibleLabelsDefaults);
-    /**
-     * The size of the take, when paginating.
-     */
     this.take = 5;
-    /**
-     * Amount of visible page numbers to show
-     */
     this.visibleItems = 5;
-    /**
-     * The total size of the paginating data
-     */
     this.total = 1000;
-    /**
-     * Used to indicate which dom element with ID this element controls
-     */
     this.ariaControls = "";
-    /**
-     * The current page
-     */
     this.current = 1;
-    /**
-     * Private methods.
-     */
-    // 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 (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 = debounce((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,
-      });
-    }, 100);
-    // 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);
   }
   watchPropTotalHandler( /*newValue: boolean, oldValue: boolean*/) {
     this.calculatePageTake();
@@ -276,11 +226,9 @@ export class DuetPagination {
       items.push(h("li", { class: {
           "duet-pagination-item": true,
           "duet-pagination-item-is-active": i === this.current,
-        }, role: "menuitem" },
-        h("duet-button", { class: {
-            "duet-pagination-link": true,
-          }, color: i !== this.current ? "secondary" : "primary", "data-id": i, "center-text": true, variation: "plain", margin: "none", accessibleLabel: `${this.accessibleLabels.go_to} ${i}`, onClick: e => this.pageClickHandler(e) },
-          h("div", { class: "duet-pagination-page-number", "aria-hidden": true }, i))));
+        }, role: "menuitem" }, h("duet-button", { class: {
+          "duet-pagination-link": true,
+        }, color: i !== this.current ? "secondary" : "primary", "data-id": i, "center-text": true, variation: "plain", margin: "none", accessibleLabel: `${this.accessibleLabels.go_to} ${i}`, onClick: e => this.pageClickHandler(e) }, h("div", { class: "duet-pagination-page-number", "aria-hidden": true }, i))));
     } while (i < this.visibleItems + this.internalSectionIndex * this.visibleItems);
     return items;
   }
@@ -295,353 +243,340 @@ export class DuetPagination {
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, { onKeyDown: e => this.onKeyboardDown(e) },
-      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", null,
-            "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 },
-          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", onClick: e => this.onMouseHandler(e, -1), "aria-label": this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small" })),
-          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: "secondary", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e) },
-                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: "secondary", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1) },
-                h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))))),
-          this.renderPageNumbers(),
-          this.internalSectionIndex * (this.visibleItems + 2) < this.totalPages && this.shouldDisplayNavigation() && (h(Fragment, null,
-            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: "secondary", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1) },
-                h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))),
-            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: "secondary", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e) },
-                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, class: "duet-date-dialog-next", "aria-label": this.accessibleLabels.next_page, onClick: e => this.onMouseHandler(e, 1), "icon-name": "action-arrow-right-small" }))))));
+    return (h(Host, { onKeyDown: e => this.onKeyboardDown(e) }, 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", null, "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 }, 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", onClick: e => this.onMouseHandler(e, -1), "aria-label": this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small" })), 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: "secondary", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e) }, 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: "secondary", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1) }, h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))))), this.renderPageNumbers(), this.internalSectionIndex * (this.visibleItems + 2) < this.totalPages && this.shouldDisplayNavigation() && (h(Fragment, null, 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: "secondary", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1) }, h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))), 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: "secondary", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e) }, 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, class: "duet-date-dialog-next", "aria-label": this.accessibleLabels.next_page, onClick: e => this.onMouseHandler(e, 1), "icon-name": "action-arrow-right-small" }))))));
   }
   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"
+  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"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Theme of the pagination."
-      },
-      "attribute": "theme",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "jumpString": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Characters to use for the jump buttons."
-      },
-      "attribute": "jump-string",
-      "reflect": false,
-      "defaultValue": "\"...\""
-    },
-    "variation": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetPaginationVariation",
-        "resolved": "\"compact\" | \"default\"",
-        "references": {
-          "DuetPaginationVariation": {
-            "location": "local"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme of the pagination."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "jumpString": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Characters to use for the jump buttons."
+        },
+        "attribute": "jump-string",
+        "reflect": false,
+        "defaultValue": "\"...\""
+      },
+      "variation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetPaginationVariation",
+          "resolved": "\"compact\" | \"default\"",
+          "references": {
+            "DuetPaginationVariation": {
+              "location": "local"
+            }
           }
-        }
-      },
-      "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"
+        },
+        "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"
+            }
           }
-        }
-      },
-      "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:\n        \"You may use arrow keys to select page number, or enter a page number when this element is in focus to jump to a page\",\n      pagination_label: \"Pagination, 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:\n        \"Voit k\u00E4ytt\u00E4\u00E4 nuolin\u00E4pp\u00E4imi\u00E4 sivunumeron valitsemiseen, tai kirjoittaa sivunumeron, jos t\u00E4m\u00E4 elementti on aktiivinen, siirtym\u00E4\u00E4n sivulle\",\n      pagination_label: \"Sivutus, 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:\n        \"Du kan anv\u00E4nda piltangenterna f\u00F6r att v\u00E4lja sida, eller skriva in sida n\u00E4r elementet \u00E4r i fokus f\u00F6r att hoppa till en sida\",\n      pagination_label: \"Sidutning, 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": false,
-      "complexType": {
-        "original": "Record<string, string>",
-        "resolved": "{ [x: string]: string; }",
-        "references": {
-          "Record": {
-            "location": "global"
+        },
+        "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:\n        \"You may use arrow keys to select page number, or enter a page number when this element is in focus to jump to a page\",\n      pagination_label: \"Pagination, 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:\n        \"Voit k\u00E4ytt\u00E4\u00E4 nuolin\u00E4pp\u00E4imi\u00E4 sivunumeron valitsemiseen, tai kirjoittaa sivunumeron, jos t\u00E4m\u00E4 elementti on aktiivinen, siirtym\u00E4\u00E4n sivulle\",\n      pagination_label: \"Sivutus, 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:\n        \"Du kan anv\u00E4nda piltangenterna f\u00F6r att v\u00E4lja sida, eller skriva in sida n\u00E4r elementet \u00E4r i fokus f\u00F6r att hoppa till en sida\",\n      pagination_label: \"Sidutning, 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": false,
+        "complexType": {
+          "original": "Record<string, string>",
+          "resolved": "{ [x: string]: string; }",
+          "references": {
+            "Record": {
+              "location": "global"
+            }
           }
-        }
-      },
-      "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"
-    },
-    "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"
-    }
-  }; }
-  static get states() { return {
-    "numbersStore": {},
-    "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"
+        },
+        "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"
+      },
+      "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"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "numbersStore": {},
+      "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"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
   static get elementRef() { return "element"; }
-  static get watchers() { return [{
-      "propName": "total",
-      "methodName": "watchPropTotalHandler"
-    }, {
-      "propName": "current",
-      "methodName": "watchStateHandler"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "total",
+        "methodName": "watchPropTotalHandler"
+      }, {
+        "propName": "current",
+        "methodName": "watchStateHandler"
+      }];
+  }
 }