npm - @duetds/components - Versions diffs - 5.2.1 → 5.3.0 - Mend

@duetds/components 5.2.1 → 5.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (257) hide show

package/lib/collection/components/duet-footer/duet-footer.css CHANGED Viewed

@@ -235,6 +235,8 @@ a:hover .duet-footer-arrow {
 .duet-footer-menu {
   padding: 20px !important;
+  display: flex;
+  gap: 2rem;
   font-size: 0.875rem;
 }
 @media (min-width: 36em) {
@@ -262,13 +264,43 @@ a:hover .duet-footer-arrow {
   display: inline-block;
   margin: 0 8px;
 }
+.duet-footer-menu .duet-footer-divider-copyright {
+  display: none;
+}
+.duet-footer-menu .duet-footer-menu-links {
+  flex: 1;
+}
+@media (min-width: 62em) {
+  .duet-footer-menu .duet-footer-menu-links {
+    text-align: right;
+  }
+}
 .duet-footer-menu a:last-of-type .duet-footer-divider {
   display: none;
 }
 .duet-footer-copyright {
+  display: none;
+  font-size: 0.875rem;
   color: white;
 }
+@media (min-width: 62em) {
+  .duet-footer-copyright {
+    display: inline;
+  }
+}
+.duet-footer-copyright.duet-footer-copyright-mobile {
+  display: block;
+  padding-top: 0.5rem;
+  padding-bottom: 1.25rem;
+  padding-left: 2rem;
+  text-align: left;
+}
+@media (min-width: 62em) {
+  .duet-footer-copyright.duet-footer-copyright-mobile {
+    display: none;
+  }
+}
 .duet-footer-simple {
   padding: 0;
@@ -300,6 +332,9 @@ a:hover .duet-footer-arrow {
 .duet-footer-simple .duet-footer-menu {
   padding: 20px 0 !important;
 }
+.duet-footer-simple .duet-footer-copyright-mobile {
+  padding-left: 0;
+}
 .duet-footer-simple.duet-theme-turva {
   color: #171c3a;
   border-color: #e4e4e6;
@@ -309,160 +344,6 @@ a:hover .duet-footer-arrow {
   color: #171c3a;
 }
-.duet-footer-multilevel duet-logo {
-  margin-left: 0.5rem !important;
-}
-@media (min-width: 62em) {
-  .duet-footer-multilevel duet-logo {
-    margin-left: -0.5rem !important;
-  }
-}
-.duet-footer-multilevel .duet-footer-link {
-  padding: 0.5rem 1.25rem !important;
-  border: 0;
-}
-.duet-footer-multilevel .duet-footer-link:first-of-type {
-  margin: 0;
-}
-.duet-footer-multilevel .duet-footer-link .duet-footer-arrow {
-  margin-left: 0.5rem;
-}
-.duet-footer-multilevel .duet-footer-link .duet-footer-arrow duet-icon {
-  width: 0.75rem;
-  height: 0.75rem;
-}
-@media (min-width: 62em) {
-  .duet-footer-multilevel .duet-footer-link {
-    padding: 0.75rem 0 !important;
-  }
-}
-.duet-footer-multilevel .duet-footer-top {
-  flex-direction: column;
-  gap: 1rem 0;
-  align-items: flex-start;
-}
-@media (min-width: 62em) {
-  .duet-footer-multilevel .multilevel {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-  }
-}
-.duet-footer-multilevel .multilevel-main-item {
-  margin-top: 1.25rem;
-}
-@media (min-width: 62em) {
-  .duet-footer-multilevel .multilevel-main-item {
-    margin-top: 0;
-  }
-}
-.duet-footer-multilevel .multilevel-main-item .duet-footer-link {
-  padding: 0 0.5 1.25rem !important;
-  font-weight: 700;
-}
-@media (min-width: 62em) {
-  .duet-footer-multilevel .multilevel-main-item .duet-footer-link {
-    padding: 0 0 0.5rem !important;
-  }
-}
-@media (min-width: 62em) {
-  .duet-footer-multilevel .multilevel-primary-items {
-    column-gap: 0;
-    width: 100%;
-    columns: 3;
-  }
-  .duet-footer-multilevel .multilevel-primary-items .duet-footer-link {
-    display: inline-flex;
-  }
-}
-.duet-footer-multilevel .multilevel-secondary-items .duet-footer-link {
-  padding: 0.875rem 1.25rem !important;
-  font-weight: 700;
-}
-.duet-footer-multilevel .multilevel-secondary-items .duet-footer-link:first-child {
-  padding: 1.25rem 1.25rem 0.875rem !important;
-}
-@media (min-width: 62em) {
-  .duet-footer-multilevel .multilevel-secondary-items {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    width: 100%;
-  }
-  .duet-footer-multilevel .multilevel-secondary-items .duet-footer-link,
-.duet-footer-multilevel .multilevel-secondary-items .duet-footer-link:first-child {
-    display: inline-flex;
-    padding: 1rem 0 !important;
-  }
-}
-.duet-footer-multilevel .multilevel-right .duet-footer-link:first-child {
-  padding-top: 0.875rem !important;
-  font-weight: 700;
-}
-@media (min-width: 62em) {
-  .duet-footer-multilevel .multilevel-right .duet-footer-link {
-    padding: 0.375rem 0 !important;
-    font-size: 0.875rem;
-    font-weight: 400;
-  }
-  .duet-footer-multilevel .multilevel-right .duet-footer-link:first-child {
-    padding-top: 0 !important;
-    font-size: 1rem;
-    font-weight: 600;
-  }
-  .duet-footer-multilevel .multilevel-right .tertiary-main-item .duet-footer-arrow {
-    display: none;
-  }
-}
-.duet-footer-multilevel .duet-footer-menu {
-  padding: 1.25rem !important;
-  line-height: 2.5;
-}
-@media (min-width: 62em) {
-  .duet-footer-multilevel .duet-footer-menu {
-    padding-right: 0 !important;
-    padding-left: 0 !important;
-    text-align: right;
-  }
-}
-.duet-footer-multilevel .duet-footer-copyright {
-  display: none;
-  font-size: 0.875rem;
-}
-@media (min-width: 62em) {
-  .duet-footer-multilevel .duet-footer-copyright {
-    position: absolute;
-    left: 48px;
-    display: inline;
-  }
-}
-@media (min-width: 76.25em) {
-  .duet-footer-multilevel .duet-footer-copyright {
-    left: 0;
-  }
-}
-.duet-footer-multilevel .duet-footer-copyright.duet-footer-copyright-mobile {
-  display: block;
-  padding-top: 0.5rem;
-  padding-bottom: 1.25rem;
-  text-align: center;
-}
-@media (min-width: 62em) {
-  .duet-footer-multilevel .duet-footer-copyright.duet-footer-copyright-mobile {
-    display: none;
-  }
-}
-.duet-footer-multilevel.duet-theme-turva .duet-footer-copyright-mobile {
-  padding-left: 1.25rem;
-  text-align: left;
-}
-.duet-footer-multilevel.duet-theme-turva .duet-footer-icon {
-  color: #171c3a;
-  background: white;
-}
-.duet-footer-multilevel.duet-theme-turva a:hover .duet-footer-icon {
-  background: #e6e6e6;
-}
 .duet-footer-external {
   display: inline-block;
   margin-left: 4px;

package/lib/collection/components/duet-footer/duet-footer.js CHANGED Viewed

@@ -1,9 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import arrowDownSmallIcon from "@duetds/icons/lib/assets/action-arrow-down-small";
 import arrowRightIcon from "@duetds/icons/lib/assets/action-arrow-right";
-import arrowRightSmallIcon from "@duetds/icons/lib/assets/action-arrow-right-small";
 import newWindowIcon from "@duetds/icons/lib/assets/action-new-window";
 import newWindowIconSmall from "@duetds/icons/lib/assets/action-new-window-small";
 import { Component, Element, Event, Fragment, h, Prop, State, Watch } from "@stencil/core";
@@ -16,11 +14,6 @@ const i18n = {
   sv: { lahi: "© LokalTapiola", turva: "© Turva" },
   en: { lahi: "© LocalTapiola", turva: "© Turva" },
 };
-const i18nMultilevel = {
-  fi: { lahi: "© LähiTapiola", turva: "© Keskinäinen Vakuutusyhtiö Turva" },
-  sv: { lahi: "© LokalTapiola", turva: "© Keskinäinen Vakuutusyhtiö Turva" },
-  en: { lahi: "© LocalTapiola", turva: "© Keskinäinen Vakuutusyhtiö Turva" },
-};
 const createEvent = (ev, data) => ({
   component: "duet-footer",
   data,
@@ -39,9 +32,6 @@ export class DuetFooter {
      */
     this.processedMainItem = null;
     this.processedItems = null;
-    this.processedSecondaryItems = null;
-    this.processedTertiaryMainItem = null;
-    this.processedTertiaryItems = null;
     this.processedMenu = null;
     /**
      * Theme of the navigation.
@@ -116,11 +106,7 @@ export class DuetFooter {
    * Local methods
    */
   async refresh() {
-    this.processedMainItem = parsePossibleJSON(this.mainItem);
     this.processedItems = parsePossibleJSON(this.items);
-    this.processedSecondaryItems = parsePossibleJSON(this.secondaryItems);
-    this.processedTertiaryMainItem = parsePossibleJSON(this.tertiaryMainItem);
-    this.processedTertiaryItems = parsePossibleJSON(this.tertiaryItems);
     this.processedMenu = parsePossibleJSON(this.menu);
   }
   /**
@@ -128,21 +114,19 @@ export class DuetFooter {
    * Always the last one in the class.
    */
   render() {
-    const text = this.variation === "multilevel" ? getLocaleString(i18nMultilevel) : getLocaleString(i18n);
+    const text = getLocaleString(i18n);
     const copyrightLabel = this.theme === "turva" ? text.turva : text.lahi;
     return (h("footer", { class: {
         "duet-footer": true,
         "duet-m-0": this.margin === "none",
         "duet-theme-turva": this.theme === "turva",
         "duet-footer-simple": this.variation === "simple",
-        "duet-footer-multilevel": this.variation === "multilevel",
       } },
       h("div", { class: "duet-footer-wrapper" },
         h("div", { class: "duet-footer-top", part: "top" },
           this.variation !== "simple" && (h("duet-logo", { href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })),
           this.processedItems &&
             this.variation !== "simple" &&
-            this.variation !== "multilevel" &&
             this.processedItems.map(item => (h("a", { class: "duet-footer-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleItemClick(event, item) },
               h("div", { class: "duet-footer-icon" },
                 h("duet-icon", { size: "medium", margin: "none", name: item.icon, color: "currentColor" })),
@@ -150,60 +134,20 @@ export class DuetFooter {
               item.external && h("duet-visually-hidden", null,
                 ", ",
                 this.accessibleLabelExternal),
-              h("div", { class: "duet-footer-arrow" }, item.external ? (h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })) : (h("duet-icon", { icon: arrowRightIcon.svg, size: "auto", margin: "none", color: "currentColor" })))))),
-          this.processedItems && this.variation === "multilevel" && (h("div", { class: "multilevel" },
-            h("div", { class: "multilevel-left" },
-              h("div", { class: "multilevel-main-item" }, this.processedMainItem && (h("a", { class: "duet-footer-link", href: this.processedMainItem.href, id: this.processedMainItem.id, target: this.processedMainItem.external ? "_blank" : "_self", onClick: event => this.handleItemClick(event, this.processedMainItem) },
-                h("span", null, this.processedMainItem.label),
-                this.processedMainItem.external && (h("duet-visually-hidden", null,
-                  ", ",
-                  this.accessibleLabelExternal)),
-                h("div", { class: "duet-footer-arrow" }, this.processedMainItem.external && (h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))),
-              h("div", { class: "multilevel-primary-items" }, this.processedItems.map(item => (h("a", { class: "duet-footer-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleItemClick(event, item) },
-                h("div", { class: "duet-footer-icon" },
-                  h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor" })),
-                h("span", null, item.label),
-                item.external && h("duet-visually-hidden", null,
-                  ", ",
-                  this.accessibleLabelExternal),
-                h("div", { class: "duet-footer-arrow" }, item.external && (h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" }))))))),
-              h("div", { class: "multilevel-secondary-items" }, this.processedSecondaryItems &&
-                this.processedSecondaryItems.map(item => (h("a", { class: "duet-footer-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleItemClick(event, item) },
-                  h("span", null, item.label),
-                  item.external && (h("duet-visually-hidden", null,
-                    ", ",
-                    this.accessibleLabelExternal)),
-                  h("div", { class: "duet-footer-arrow" }, item.external ? (h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })) : (h("duet-icon", { icon: arrowRightSmallIcon.svg, size: "auto", margin: "none", color: "currentColor" })))))))),
-            h("div", { class: "multilevel-right" },
-              this.processedTertiaryMainItem && (h("span", { class: "duet-footer-link tertiary-main-item", id: this.processedTertiaryMainItem.id },
-                h("span", null, this.processedTertiaryMainItem.label),
-                this.processedTertiaryMainItem.external && (h("duet-visually-hidden", null,
-                  ", ",
-                  this.accessibleLabelExternal)),
-                h("div", { class: "duet-footer-arrow" },
-                  h("duet-icon", { icon: arrowDownSmallIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))),
-              this.processedTertiaryItems &&
-                this.processedTertiaryItems.map(item => (h("a", { class: "duet-footer-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleItemClick(event, item) },
-                  h("span", null, item.label),
-                  item.external && h("duet-visually-hidden", null,
-                    ", ",
-                    this.accessibleLabelExternal),
-                  h("div", { class: "duet-footer-arrow" }, item.external && (h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))))),
+              h("div", { class: "duet-footer-arrow" }, item.external ? (h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })) : (h("duet-icon", { icon: arrowRightIcon.svg, size: "auto", margin: "none", color: "currentColor" }))))))),
         h("slot", { name: "extra" }),
         h("p", { class: "duet-footer-menu", part: "menu" },
           h("span", { class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`),
-          this.processedMenu && (h(Fragment, null,
-            this.variation !== "multilevel" && (h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")),
-            this.processedMenu.map(item => (h("a", { href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item) },
-              item.label,
-              item.external && (h(Fragment, null,
-                h("duet-visually-hidden", null,
-                  ", ",
-                  this.accessibleLabelExternal),
-                h("div", { class: "duet-footer-external" },
-                  h("duet-icon", { icon: newWindowIconSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))),
-              h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/"))))))),
-        this.variation === "multilevel" && (h("p", { class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`)))));
+          h("div", { class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, null, this.processedMenu.map(item => (h("a", { href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item) },
+            item.label,
+            item.external && (h(Fragment, null,
+              h("duet-visually-hidden", null,
+                ", ",
+                this.accessibleLabelExternal),
+              h("div", { class: "duet-footer-external" },
+                h("duet-icon", { icon: newWindowIconSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))),
+            h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")))))))),
+        h("p", { class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
   }
   static get is() { return "duet-footer"; }
   static get encapsulation() { return "shadow"; }
@@ -329,23 +273,6 @@ export class DuetFooter {
       "reflect": false,
       "defaultValue": "getLanguage()"
     },
-    "mainItem": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Main item of footer links. Item have to include mandatory\n\"label\" and \"href\". Additionally, you can pass an \"id\"\nthat is added as an HTML identifier for the anchor tag."
-      },
-      "attribute": "main-item",
-      "reflect": false
-    },
     "items": {
       "type": "any",
       "mutable": false,
@@ -363,57 +290,6 @@ export class DuetFooter {
       "attribute": "items",
       "reflect": false
     },
-    "secondaryItems": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "An array of items for the secondary footer links. Items have to include mandatory\n\"label\" and \"href\". Additionally, you can pass an \"id\"\nthat is added as an HTML identifier for the anchor tag."
-      },
-      "attribute": "secondary-items",
-      "reflect": false
-    },
-    "tertiaryMainItem": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Main item of tertiary footer links. Item have to include mandatory\n\"label\" and \"href\". Additionally, you can pass an \"id\"\nthat is added as an HTML identifier for the anchor tag."
-      },
-      "attribute": "tertiary-main-item",
-      "reflect": false
-    },
-    "tertiaryItems": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "An array of items for the tertiary footer links. Items have to include mandatory\n\"label\" and \"href\". Additionally, you can pass an \"id\"\nthat is added as an HTML identifier for the anchor tag."
-      },
-      "attribute": "tertiary-items",
-      "reflect": false
-    },
     "accessibleLabelExternalDefaults": {
       "type": "string",
       "mutable": false,
@@ -482,9 +358,6 @@ export class DuetFooter {
   static get states() { return {
     "processedMainItem": {},
     "processedItems": {},
-    "processedSecondaryItems": {},
-    "processedTertiaryMainItem": {},
-    "processedTertiaryItems": {},
     "processedMenu": {}
   }; }
   static get events() { return [{

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

@@ -130,6 +130,7 @@ export class DuetPagination {
           await this.setFocus();
         }
       }
+      return true;
     };
     //helper to emit relevant page events
     this.emitPageEvent = debounce((ev, passedPage) => {
@@ -143,7 +144,7 @@ export class DuetPagination {
         type: "page",
         originalEvent: ev,
       });
-    }, 500);
+    }, 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);
@@ -161,7 +162,7 @@ export class DuetPagination {
     }, 500);
   }
   watchStateHandler(newValue, oldValue) {
-    this.actionChain(newValue, oldValue);
+    return this.actionChain(newValue, oldValue);
   }
   /**
    * Component lifecycle events.
@@ -189,6 +190,7 @@ export class DuetPagination {
     e.preventDefault();
     e.stopPropagation();
     this.current = this.current + dir;
+    this.emitPageEvent(e);
   }
   //handle a11y keyboard navigation events
   async onKeyboardDown(e) {
@@ -231,8 +233,9 @@ export class DuetPagination {
   sectionClickHandler(e, direction) {
     e.preventDefault();
     let next = this.internalSectionIndex + direction;
-    if (next >= this.totalPages / this.take) {
-      next = this.totalPages / this.take - 1;
+    const takePerVisibleItems = this.take * this.visibleItems;
+    if (next * takePerVisibleItems > this.total) {
+      next = this.internalSectionIndex;
     }
     const newSection = next;
     this.internalSectionIndex = newSection >= 0 ? newSection : 0;
@@ -242,12 +245,14 @@ export class DuetPagination {
     e.preventDefault();
     this.internalSectionIndex = 0;
     this.current = 1;
+    this.emitPageEvent(e);
   }
   //handles click on the jump (total) button
   jumpToEnd(e) {
     e.preventDefault();
-    this.internalSectionIndex = this.totalPages / this.take - 1;
+    this.internalSectionIndex = Math.ceil(this.totalPages / this.take - 1);
     this.current = this.totalPages;
+    this.emitPageEvent(e);
   }
   // render the individual page numbers
   renderPageNumbers() {
@@ -300,18 +305,18 @@ export class DuetPagination {
             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", "center-text": "true", variation: "plain", color: "secondary", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e) },
+              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", "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("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.totalPages / this.visibleItems - 1 && this.shouldDisplayNavigation() && (h(Fragment, null,
+          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", "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("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", "center-text": "true", color: "secondary", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e) },
+              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,
@@ -507,7 +512,7 @@ export class DuetPagination {
     },
     "take": {
       "type": "number",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "number",
         "resolved": "number",
@@ -525,7 +530,7 @@ export class DuetPagination {
     },
     "visibleItems": {
       "type": "number",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "number",
         "resolved": "number",
@@ -543,7 +548,7 @@ export class DuetPagination {
     },
     "total": {
       "type": "number",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "number",
         "resolved": "number",

package/lib/collection/components/duet-range-stepper/duet-range-stepper.js CHANGED Viewed

@@ -63,15 +63,15 @@ export class DuetRangeStepper {
       this.handleStepClick(e);
     };
   }
-  watchStateHandler(newValue) {
-    if (newValue === 1) {
+  watchStepIndexStateHandler(newValue) {
+    if (newValue <= 1) {
       this.leftBnRef.setAttribute("disabled", "");
       this.rightBnRef.focus();
     }
     else {
       this.leftBnRef.removeAttribute("disabled");
     }
-    if (newValue === this.total / this.stepSize) {
+    if (newValue >= this.total / this.stepSize) {
       this.rightBnRef.setAttribute("disabled", "");
       this.leftBnRef.focus();
     }
@@ -79,12 +79,20 @@ export class DuetRangeStepper {
       this.rightBnRef.removeAttribute("disabled");
     }
   }
+  watchStepSizeStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      if (this.stepIndex * newValue > this.total) {
+        this.stepIndex = this.total / newValue;
+      }
+    }
+  }
   handleStepClick(e) {
+    const from = this.stepIndex * this.stepSize - this.stepSize;
     this.duetRangeStepUpdate.emit({
       originalEvent: e,
       component: "duet-range-stepper",
-      from: this.stepIndex * this.stepSize - this.stepSize,
-      to: this.stepIndex * this.stepSize,
+      from: from,
+      to: this.getTo(),
       index: this.stepIndex,
     });
   }
@@ -92,7 +100,7 @@ export class DuetRangeStepper {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
-    this.watchStateHandler(this.stepIndex);
+    this.watchStepIndexStateHandler(this.stepIndex);
   }
   increment(direction) {
     const newIndex = this.stepIndex + direction;
@@ -100,22 +108,28 @@ export class DuetRangeStepper {
       this.stepIndex = 1;
     }
     else {
-      if (newIndex * this.stepSize <= this.total) {
+      if (newIndex * this.stepSize < this.total + this.stepSize) {
         this.stepIndex = newIndex;
       }
-      else {
+      else if (newIndex * this.stepSize > this.total + this.stepSize) {
+        this.stepIndex = Math.floor(this.total / this.stepSize);
       }
     }
   }
+  getTo() {
+    const to = this.stepIndex * this.stepSize;
+    const result = to > this.total ? this.total : to;
+    return result;
+  }
   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;
+    let start = Math.floor((this.stepIndex - 1) * this.stepSize);
     //easy fix for starting position
     if (start === 0) {
       start = 1;
     }
-    const end = this.stepIndex * this.stepSize;
+    const end = Math.floor(this.stepIndex * this.stepSize);
     return this.ariaLabels.x_of_y
       .replace("{0}", String(start))
       .replace("{1}", String(end))
@@ -335,6 +349,9 @@ export class DuetRangeStepper {
   static get elementRef() { return "element"; }
   static get watchers() { return [{
       "propName": "stepIndex",
-      "methodName": "watchStateHandler"
+      "methodName": "watchStepIndexStateHandler"
+    }, {
+      "propName": "stepSize",
+      "methodName": "watchStepSizeStateHandler"
     }]; }
 }