@duetds/components 4.35.4 → 5.0.0

package/lib/cjs/duet-empty-state.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6ae8090f.js');
+const index = require('./index-da5d5aaf.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');
 
 const duetEmptyStateCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%;height:100%}.duet-empty-state{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%;padding:48px;color:#00294d;text-align:center;background:#f5f8fa;border-radius:4px}.duet-empty-state.duet-theme-turva{color:#171c3a;background:#f5f5f7}";

package/lib/cjs/duet-fieldset.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6ae8090f.js');
+const index = require('./index-da5d5aaf.js');
 const createId = require('./create-id-c3b984b1.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');
 

package/lib/cjs/duet-footer.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6ae8090f.js');
+const index = require('./index-da5d5aaf.js');
 const actionNewWindowSmall = require('./action-new-window-small-fa51dfb9.js');
 const commonStrings = require('./common-strings-de17f887.js');
 const languageUtils = require('./language-utils-aa282901.js');

package/lib/cjs/duet-grid_2.cjs.entry.js

@@ -5,8 +5,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6ae8090f.js');
-const tokens = require('./tokens-8596cece.js');
+const index = require('./index-da5d5aaf.js');
+const tokens = require('./tokens-72efc7fd.js');
 const watchOptions = require('./watch-options-d88afac0.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');
 

package/lib/cjs/duet-header_2.cjs.entry.js

@@ -5,17 +5,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6ae8090f.js');
+const index = require('./index-da5d5aaf.js');
 const formSearch = require('./form-search-d61b2843.js');
-const tokens = require('./tokens-8596cece.js');
+const tokens = require('./tokens-72efc7fd.js');
 const bodyScrollLock_es6 = require('./bodyScrollLock.es6-6ef1142a.js');
 const commonStrings = require('./common-strings-de17f887.js');
-const keyboardUtils = require('./keyboard-utils-b4e3d1d3.js');
+const keyboardUtils = require('./keyboard-utils-898cfe14.js');
 const languageUtils = require('./language-utils-aa282901.js');
 const stringUtils = require('./string-utils-267e3dbb.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');
 const actionArrowDownSmall = require('./action-arrow-down-small-ef77a2d1.js');
-const tokens_module = require('./tokens.module-6b2df1c2.js');
+const tokens_module = require('./tokens.module-6afcc9c1.js');
 const createId = require('./create-id-c3b984b1.js');
 
 var navigationContactDropdown={"title":"navigation-contact-dropdown","tags":"navigation contact dropdown speech bubbles","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M20.247 24a.743.743 0 0 1-.53-.22l-4.28-4.28h-.439c-3.308 0-6-2.692-6-6s2.692-6 6-6h3c3.309.001 6 2.692 6 6a5.974 5.974 0 0 1-3 5.179v4.571a.75.75 0 0 1-.751.75zm-5.25-15c-2.481 0-4.5 2.019-4.5 4.5s2.019 4.5 4.5 4.5h.75c.198 0 .391.08.53.22l3.22 3.22v-3.213c0-.289.169-.555.429-.678a4.51 4.51 0 0 0 2.571-4.049 4.504 4.504 0 0 0-4.498-4.499h-3.002z\"/><path d=\"M3.747 16.5a.747.747 0 0 1-.75-.75v-4.57a5.967 5.967 0 0 1-2.65-3.171A5.948 5.948 0 0 1 .57 3.431 6.014 6.014 0 0 1 5.985 0h3.012a6.04 6.04 0 0 1 5.752 4.286.751.751 0 0 1-.718.964.755.755 0 0 1-.719-.536A4.531 4.531 0 0 0 8.997 1.5h-3a4.511 4.511 0 0 0-4.071 2.572c-.512 1.084-.571 2.302-.167 3.431s1.224 2.032 2.308 2.545c.261.123.43.39.43.678v3.214l1.72-1.72a.744.744 0 0 1 1.06 0 .752.752 0 0 1 0 1.061l-3 3a.744.744 0 0 1-.53.219z\"/></svg>"};

package/lib/cjs/duet-hero.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6ae8090f.js');
+const index = require('./index-da5d5aaf.js');
 const actionNewWindowSmall = require('./action-new-window-small-fa51dfb9.js');
 const commonStrings = require('./common-strings-de17f887.js');
 const languageUtils = require('./language-utils-aa282901.js');

package/lib/cjs/duet-icon.cjs.entry.js

@@ -5,10 +5,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6ae8090f.js');
+const index = require('./index-da5d5aaf.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');
-const tokenUtils = require('./token-utils-05bd23b4.js');
-require('./tokens.module-6b2df1c2.js');
+const tokenUtils = require('./token-utils-ac8432d1.js');
+require('./tokens.module-6afcc9c1.js');
 
 const cleanupSvg = (svgContent) => {
   if (typeof document === "undefined" || !svgContent) {

package/lib/cjs/duet-input_2.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6ae8090f.js');
+const index = require('./index-da5d5aaf.js');
 const formSearch = require('./form-search-d61b2843.js');
 const createId = require('./create-id-c3b984b1.js');
 const inputUtils = require('./input-utils-f3e3854c.js');

package/lib/cjs/duet-layout.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6ae8090f.js');
+const index = require('./index-da5d5aaf.js');
 const isInternetExplorer = require('./is-internet-explorer-91361c56.js');
 
 const duetLayoutCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;flex:1 0 auto;width:100%}:host(.duet-middle){display:flex}:host(.duet-middle) .duet-layout{padding:36px 28px !important}@media (min-width: 36em){:host(.duet-middle) .duet-layout{padding:48px 36px !important}}@media (min-width: 62em){:host(.duet-middle) .duet-layout{padding:56px !important}}:host(.duet-ie){height:100%}:host(.duet-middle.duet-ie){height:auto}.duet-layout{position:relative;padding:0 16px;margin:48px auto 36px}@media (min-width: 36em){.duet-layout{margin-top:72px}}.duet-layout.duet-layout-has-top{margin-top:0}.duet-layout.duet-m-0{margin-top:0 !important;margin-bottom:0 !important}.duet-layout.duet-center{display:flex;align-items:center;justify-content:center;width:100%;max-width:888px}@media (min-width: 36em){.duet-layout.duet-center{padding:0 48px}}@media (min-width: 48em){.duet-layout.duet-center{padding:0 72px}}@media (min-width: 62em){.duet-layout.duet-center{width:100%}}@media (min-width: 36em){.duet-layout{padding:0 28px}}@media (min-width: 62em){.duet-layout{display:flex;flex-direction:row;padding:0 56px;margin-bottom:48px}}@media (min-width: 76.25em){.duet-layout{max-width:1110px;padding:0}}.duet-main,.duet-sidebar,.duet-layout-top,.duet-layout-bottom{display:block;width:100%}.duet-layout-top{position:relative;display:block;width:100%;margin:72px auto 0}.duet-layout-top.duet-m-0{margin-top:0 !important;margin-bottom:0 !important}.duet-layout-top .duet-layout-top-wrapper{padding:0 20px;margin:0 auto}@media (min-width: 36em){.duet-layout-top .duet-layout-top-wrapper{padding:0 28px}}@media (min-width: 62em){.duet-layout-top .duet-layout-top-wrapper{padding:0 56px}}@media (min-width: 76.25em){.duet-layout-top .duet-layout-top-wrapper{max-width:1110px;padding:0}}.duet-center .duet-layout-top-wrapper{max-width:888px}@media (min-width: 36em){.duet-center .duet-layout-top-wrapper{padding:0 48px}}@media (min-width: 48em){.duet-center .duet-layout-top-wrapper{padding:0 72px}}@media (min-width: 62em){.duet-main{min-width:600px;margin:0 auto}.has-sidebar .duet-main{max-width:734px;margin-right:20px}}@media (min-width: 62em){.duet-sidebar{min-width:256px;max-width:356px}}@media (min-width: 62em){.duet-sidebar-container{width:auto;max-width:356px}}@media (min-width: 62em){.duet-sidebar-container.has-tabs{margin-top:89px}}@media (min-width: 62em){.duet-sidebar-container.sticky{position:sticky}.duet-sidebar-container.sticky.with-links{top:calc(3rem + 20px)}.duet-sidebar-container.sticky.without-links{top:calc(4rem + 20px)}}";

package/lib/cjs/duet-list_2.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6ae8090f.js');
+const index = require('./index-da5d5aaf.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');
 const watchOptions = require('./watch-options-d88afac0.js');
 

package/lib/cjs/duet-modal.cjs.entry.js

@@ -5,11 +5,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6ae8090f.js');
+const index = require('./index-da5d5aaf.js');
 const bodyScrollLock_es6 = require('./bodyScrollLock.es6-6ef1142a.js');
 const createId = require('./create-id-c3b984b1.js');
-const focusUtils = require('./focus-utils-eb8c5b20.js');
-const keyboardUtils = require('./keyboard-utils-b4e3d1d3.js');
+const focusUtils = require('./focus-utils-7a11c463.js');
+const keyboardUtils = require('./keyboard-utils-898cfe14.js');
 const languageUtils = require('./language-utils-aa282901.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');
 require('./string-utils-267e3dbb.js');

package/lib/cjs/duet-notification_2.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6ae8090f.js');
+const index = require('./index-da5d5aaf.js');
 const languageUtils = require('./language-utils-aa282901.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');
 const actionArrowDownSmall = require('./action-arrow-down-small-ef77a2d1.js');

package/lib/cjs/duet-number-input.cjs.entry.js

@@ -5,9 +5,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6ae8090f.js');
+const index = require('./index-da5d5aaf.js');
 const createId = require('./create-id-c3b984b1.js');
-const keyboardUtils = require('./keyboard-utils-b4e3d1d3.js');
+const keyboardUtils = require('./keyboard-utils-898cfe14.js');
 const languageUtils = require('./language-utils-aa282901.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');
 require('./string-utils-267e3dbb.js');

package/lib/cjs/duet-pagination_2.cjs.entry.js

@@ -0,0 +1,458 @@
+/*!
+ * Built with Duet Design System
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-da5d5aaf.js');
+const createId = require('./create-id-c3b984b1.js');
+const jsUtils = require('./js-utils-be1d29ae.js');
+const keyboardUtils = require('./keyboard-utils-898cfe14.js');
+const languageUtils = require('./language-utils-aa282901.js');
+const themeableComponent = require('./themeable-component-0c1be552.js');
+require('./string-utils-267e3dbb.js');
+
+const shouldDisplayNavigation = (visibleItems, total, take) => {
+  if (visibleItems * 2 > total / take) {
+    return false;
+  }
+  return true;
+};
+
+const duetPaginationCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline-block;margin:0 auto}.duet-pagination-nav{position:relative}.duet-pagination ::part(button){border:0}.duet-pagination,.duet-pagination li{display:flex;flex-wrap:wrap;gap:0.1rem;align-items:center}.duet-pagination-item-is-active .duet-pagination-page-number{border-bottom-color:inherit;border-bottom-style:solid;border-bottom-width:2px}.duet-pagination duet-button{width:30px;min-width:36px;font-weight:600;text-decoration:none;border-left-width:0}.duet-pagination-overlay{position:absolute;top:1rem;z-index:300;width:100%;text-align:center}.duet-pagination.duet-pagination-is-dimmed{opacity:0.5}";
+
+let DuetPagination = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.duetPageChange = index.createEvent(this, "duetPageChange", 3);
+    this.listId = createId.createID("duet-pagination-list");
+    this.numbersStore = "";
+    /**
+     * State() variables
+     * @internal
+     */
+    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";
+    /**
+     * Default pagination labels
+     */
+    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, or enter a page number when this element is in focus to jump to a page",
+        pagination_label: "Pagination, 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, tai kirjoittaa sivunumeron, jos tämä elementti on aktiivinen, siirtymään sivulle",
+        pagination_label: "Sivutus, 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, eller skriva in sida när elementet är i fokus för att hoppa till en sida",
+        pagination_label: "Sidutning, 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",
+      },
+    };
+    /**
+     * Default pagination labels
+     */
+    this.accessibleLabels = languageUtils.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();
+        }
+      }
+    };
+    //helper to emit relevant page events
+    this.emitPageEvent = jsUtils.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,
+      });
+    }, 500);
+    // this will return the entered number, or the current page if the user presses enter
+    this.getEnteredNumber = jsUtils.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);
+  }
+  watchStateHandler(newValue, oldValue) {
+    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();
+    themeableComponent.inheritGlobalTheme(this);
+  }
+  componentWillRender() {
+    if (this.internalSectionIndex !== 0 && this.internalSectionIndex !== this.totalPages) {
+      this.calculatePageTake();
+    }
+  }
+  componentDidRender() {
+    this.setFocus();
+  }
+  //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) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.current = this.current + dir;
+  }
+  //handle a11y keyboard navigation events
+  async onKeyboardDown(e) {
+    let next = this.current;
+    // handle a11y based keyboard navigation for left/right/up/down
+    if (keyboardUtils.isArrowLeftKey(e) || keyboardUtils.isArrowUpKey(e)) {
+      next--;
+    }
+    if (keyboardUtils.isArrowRightKey(e) || keyboardUtils.isArrowDownKey(e)) {
+      next++;
+    }
+    if (keyboardUtils.isArrowKey(e)) {
+      if (next <= this.totalPages) {
+        this.current = next;
+        this.emitPageEvent(e);
+      }
+    }
+    //handle the jump feature, where numbers can be entered
+    if (keyboardUtils.isNumber(e) && this.shouldDisplayNavigation()) {
+      this.numbersStore = this.numbersStore + e.key;
+      if (Number(this.numbersStore) > this.totalPages) {
+        this.numbersStore = this.totalPages + "";
+      }
+      this.getEnteredNumber(e);
+    }
+  }
+  // utility to set focus on active button
+  async setFocus() {
+    const currentDomElement = this.nativeNav.querySelector(`li.duet-pagination-item-is-active duet-button`);
+    currentDomElement && (await currentDomElement.setFocus());
+  }
+  //handles click on page numbers
+  pageClickHandler(e) {
+    e.preventDefault();
+    const clickedId = Number(e.target.getAttribute("data-id"));
+    this.current = clickedId;
+    this.emitPageEvent({}, clickedId);
+  }
+  //handles click on the next section buttons
+  sectionClickHandler(e, direction) {
+    e.preventDefault();
+    let next = this.internalSectionIndex + direction;
+    if (next >= this.totalPages / this.take) {
+      next = this.totalPages / this.take - 1;
+    }
+    const newSection = next;
+    this.internalSectionIndex = newSection >= 0 ? newSection : 0;
+  }
+  //handles click on the jump (1)button
+  jumpToStart(e) {
+    e.preventDefault();
+    this.internalSectionIndex = 0;
+    this.current = 1;
+  }
+  //handles click on the jump (total) button
+  jumpToEnd(e) {
+    e.preventDefault();
+    this.internalSectionIndex = this.totalPages / this.take - 1;
+    this.current = this.totalPages;
+  }
+  // render the individual page numbers
+  renderPageNumbers() {
+    const items = [];
+    let i = this.internalSectionIndex * this.visibleItems;
+    do {
+      i++;
+      if (i > this.totalPages) {
+        break;
+      }
+      items.push(index.h("li", { class: {
+          "duet-pagination-item": true,
+          "duet-pagination-item-is-active": i === this.current,
+        }, role: "menuitem" }, index.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) }, index.h("div", { class: "duet-pagination-page-number", "aria-hidden": true }, i))));
+    } while (i < this.visibleItems + this.internalSectionIndex * this.visibleItems);
+    return items;
+  }
+  shouldDisplayNavigation() {
+    if (this.variation !== "compact") {
+      return shouldDisplayNavigation(this.visibleItems, this.total, this.take);
+    }
+    return false;
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (index.h(index.Host, { onKeyDown: e => this.onKeyboardDown(e) }, index.h("nav", { role: "navigation", "aria-labelledby": this.listId, "aria-describedby": this.listId, ref: el => (this.nativeNav = el), "aria-controls": this.ariaControls, class: {
+        "duet-pagination-nav": true,
+        [`duet-pagination-variation-${this.variation}`]: true,
+      } }, this.numbersStore !== "" && (index.h("div", { "aria-live": "assertive", "aria-relevant": "text", class: "duet-pagination-overlay", "aria-label": `${this.accessibleLabels.jump_to} ${this.numbersStore}`, part: "navigation-overlay" }, index.h("duet-badge", null, "jump to page : ", this.numbersStore))), index.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 }, index.h("li", { class: {
+        "duet-pagination-page-button": true,
+        "duet-pagination-button-first": true,
+      }, role: "menuitem", part: "navigation-arrow" }, index.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() && (index.h(index.Fragment, null, index.h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, index.h("duet-button", { class: "duet-pagination-link", "center-text": "true", variation: "plain", color: "secondary", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e) }, index.h("div", { class: "duet-pagination-page-number" }, "1"))), index.h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, index.h("duet-button", { class: "duet-pagination-link", "center-text": "true", color: "secondary", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1) }, index.h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))))), this.renderPageNumbers(), this.internalSectionIndex !== this.totalPages / this.visibleItems - 1 && this.shouldDisplayNavigation() && (index.h(index.Fragment, null, index.h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, index.h("duet-button", { class: "duet-pagination-link", "center-text": "true", color: "secondary", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1) }, index.h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))), index.h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, index.h("duet-button", { class: "duet-pagination-link", "center-text": "true", color: "secondary", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e) }, index.h("div", { class: "duet-pagination-page-number" }, this.totalPages))))), index.h("li", { class: {
+        "duet-pagination-page-button": true,
+        "duet-pagination-button-last": true,
+      }, role: "menuitem", part: "navigation-arrow" }, index.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" }))))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "current": ["watchStateHandler"]
+  }; }
+};
+DuetPagination.style = duetPaginationCss;
+
+const duetRangeStepperCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline-block;margin:0 auto}.duet-range-stepper{display:flex;flex-wrap:wrap;gap:0;align-items:baseline;justify-content:center;min-width:30px;min-height:30px;font-weight:600;text-decoration:none;border-left-width:0}.duet-range-stepper{white-space:nowrap}.duet-range-stepper .duet-range-step-counter{font-weight:600;color:#00294d}.duet-range-stepper ::part(button){border:0}";
+
+let DuetRangeStepper = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.duetRangeStepUpdate = index.createEvent(this, "duetRangeStepUpdate", 7);
+    this.leftBn = createId.createID("duetRangeStepper-left");
+    this.rightBn = createId.createID("duetRangeStepper-right");
+    /**
+     * Theme of the component.
+     */
+    this.theme = "";
+    /**
+     * Start value
+     * @default 1
+     */
+    this.stepIndex = 1;
+    /**
+     * How big is the step
+     * @default 99
+     */
+    this.stepSize = 50;
+    /**
+     * Total of
+     * @default undefined
+     */
+    this.total = 1000;
+    /**
+     * Default range stepper labels
+     */
+    this.ariaLabelsDefaults = {
+      en: {
+        next_increment: "Next range increment",
+        previous_increment: "Previous range increment",
+        x_of_y: "{0}–{1} of {2}",
+      },
+      fi: {
+        next_increment: "Seuraava välillä",
+        previous_increment: "Edellinen välillä",
+        x_of_y: "{0}–{1} / {2}",
+      },
+      sv: {
+        next_increment: "Nästa intervall",
+        previous_increment: "Föregående intervall",
+        x_of_y: "{0}–{1} av {2}",
+      },
+    };
+    /**
+     * Default pagination labels
+     */
+    this.ariaLabels = languageUtils.getLocaleString(this.ariaLabelsDefaults);
+    /**
+     * Used to indicate which dom element with ID this element controls
+     */
+    this.ariaControls = "";
+    this.handleClick = (e, direction) => {
+      e.preventDefault();
+      this.increment(direction);
+      this.handleStepClick(e);
+    };
+  }
+  watchStateHandler(newValue) {
+    if (newValue === 1) {
+      this.leftBnRef.setAttribute("disabled", "");
+      this.rightBnRef.focus();
+    }
+    else {
+      this.leftBnRef.removeAttribute("disabled");
+    }
+    if (newValue === this.total / this.stepSize) {
+      this.rightBnRef.setAttribute("disabled", "");
+      this.leftBnRef.focus();
+    }
+    else {
+      this.rightBnRef.removeAttribute("disabled");
+    }
+  }
+  handleStepClick(e) {
+    this.duetRangeStepUpdate.emit({
+      originalEvent: e,
+      component: "duet-range-stepper",
+      from: this.stepIndex * this.stepSize - this.stepSize,
+      to: this.stepIndex * this.stepSize,
+      index: this.stepIndex,
+    });
+  }
+  componentWillLoad() {
+    themeableComponent.inheritGlobalTheme(this);
+  }
+  componentDidLoad() {
+    this.watchStateHandler(this.stepIndex);
+  }
+  increment(direction) {
+    const newIndex = this.stepIndex + direction;
+    if (newIndex <= 0) {
+      this.stepIndex = 1;
+    }
+    else {
+      if (newIndex * this.stepSize <= this.total) {
+        this.stepIndex = newIndex;
+      }
+    }
+  }
+  generateStepSize() {
+    // this function uses this.stepIndex and this.range to generate a range of number like 1-100
+    // this is used to generate the step size
+    let start = (this.stepIndex - 1) * this.stepSize;
+    //easy fix for starting position
+    if (start === 0) {
+      start = 1;
+    }
+    const end = this.stepIndex * this.stepSize;
+    return this.ariaLabels.x_of_y
+      .replace("{0}", String(start))
+      .replace("{1}", String(end))
+      .replace("{2}", String(this.total));
+  }
+  //handle a11y keyboard navigation events
+  async onKeyboardDown(e) {
+    // handle a11y based keyboard navigation for left/right/up/down
+    let next = this.stepIndex;
+    let dir = 1;
+    if (keyboardUtils.isArrowLeftKey(e) || keyboardUtils.isArrowUpKey(e) || keyboardUtils.isMinusKey(e)) {
+      next--;
+      dir = -1;
+      this.leftBnRef.focus();
+    }
+    if (keyboardUtils.isArrowRightKey(e) || keyboardUtils.isArrowDownKey(e) || keyboardUtils.isPlusKey(e)) {
+      next++;
+      dir = 1;
+    }
+    if (keyboardUtils.isArrowKey(e)) {
+      if (next > 0 && next * this.stepSize <= this.total) {
+        this.handleClick(e, dir);
+      }
+    }
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (index.h("div", { class: {
+        "duet-range-stepper": true,
+        "duet-theme-turva": this.theme === "turva",
+      }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, index.h("span", { class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), index.h("duet-action-button", { class: "duet-range-step-button duet-range-step-minus", onClick: e => this.handleClick(e, -1), id: this.leftBn, "aria-label": this.ariaLabels.previous_increment, ref: el => (this.leftBnRef = el), part: "navigation-arrow", iconName: "action-arrow-left-small" }), index.h("duet-action-button", { class: "duet-range-step-button duet-range-step-plus", onClick: e => this.handleClick(e, 1), "aria-label": this.ariaLabels.next_increment, id: this.rightBn, ref: el => (this.rightBnRef = el), part: "navigation-arrow", iconName: "action-arrow-right-small" })));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "stepIndex": ["watchStateHandler"]
+  }; }
+};
+DuetRangeStepper.style = duetRangeStepperCss;
+
+exports.duet_pagination = DuetPagination;
+exports.duet_range_stepper = DuetRangeStepper;

package/lib/cjs/duet-progress.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6ae8090f.js');
+const index = require('./index-da5d5aaf.js');
 const createId = require('./create-id-c3b984b1.js');
 const languageUtils = require('./language-utils-aa282901.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');

package/lib/cjs/duet-radio_2.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6ae8090f.js');
+const index = require('./index-da5d5aaf.js');
 const createId = require('./create-id-c3b984b1.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');
 const watchOptions = require('./watch-options-d88afac0.js');

package/lib/cjs/duet-range-slider.cjs.entry.js

@@ -5,8 +5,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6ae8090f.js');
-const tokens_module = require('./tokens.module-6b2df1c2.js');
+const index = require('./index-da5d5aaf.js');
+const tokens_module = require('./tokens.module-6afcc9c1.js');
 const createId = require('./create-id-c3b984b1.js');
 const isInternetExplorer = require('./is-internet-explorer-91361c56.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');