@duetds/components 5.2.2 → 5.3.1

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

@@ -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

@@ -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

@@ -130,6 +130,7 @@ export class DuetPagination {
           await this.setFocus();
         }
       }
+      return true;
     };
     //helper to emit relevant page events
     this.emitPageEvent = debounce((ev, passedPage) => {
@@ -160,8 +161,12 @@ export class DuetPagination {
       });
     }, 500);
   }
+  watchPropTotalHandler( /*newValue: boolean, oldValue: boolean*/) {
+    this.calculatePageTake();
+    return true;
+  }
   watchStateHandler(newValue, oldValue) {
-    this.actionChain(newValue, oldValue);
+    return this.actionChain(newValue, oldValue);
   }
   /**
    * Component lifecycle events.
@@ -232,8 +237,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;
@@ -248,7 +254,7 @@ export class DuetPagination {
   //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);
   }
@@ -303,18 +309,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,
@@ -510,7 +516,7 @@ export class DuetPagination {
     },
     "take": {
       "type": "number",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "number",
         "resolved": "number",
@@ -528,7 +534,7 @@ export class DuetPagination {
     },
     "visibleItems": {
       "type": "number",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "number",
         "resolved": "number",
@@ -546,7 +552,7 @@ export class DuetPagination {
     },
     "total": {
       "type": "number",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "number",
         "resolved": "number",
@@ -626,6 +632,9 @@ export class DuetPagination {
     }]; }
   static get elementRef() { return "element"; }
   static get watchers() { return [{
+      "propName": "total",
+      "methodName": "watchPropTotalHandler"
+    }, {
       "propName": "current",
       "methodName": "watchStateHandler"
     }]; }

package/lib/collection/utils/fixture-utils.js

@@ -1,15 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-require("dotenv").config();
-const port = process.env.KOA_PROXY_PORT ? parseInt(process.env.KOA_PROXY_PORT) : 3334;
 import * as fs from "fs";
 import * as path from "path";
-import { createPage } from "./test-utils";
 /**
  * Get fixtures from directories and parse them for processing
  */
-function getAllFixturesFiles(dirPath, fixPath = "fixtures", skipFixture = []) {
+export function getAllFixturesFiles(dirPath, fixPath = "fixtures", skipFixture = []) {
   const component = dirPath.split(path.sep).pop();
   const fullPath = path.join(dirPath, fixPath);
   let files;
@@ -36,77 +33,3 @@ function getAllFixturesFiles(dirPath, fixPath = "fixtures", skipFixture = []) {
     fixtures,
   };
 }
-/**
- * Generate automatic fixture testing for jest
- */
-const htmlFragment = (fixtureHtml, theme = "", minHeight = "0px", lang = "fi") => {
-  let fontFile = "localtapiola";
-  let className = "";
-  if (theme === "turva") {
-    fontFile = "turva";
-    className = "duet-theme-turva";
-  }
-  return `
-<html class="${className}" lang="${lang}" style="min-height: auto">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Visual regression test</title>
-    <style>
-      *,
-      *::after,
-      *::before  {
-      transition-delay: 0s !important;
-      transition-duration: 0s !important;
-      animation-delay: -0.0001s !important;
-      animation-duration: 0s !important;
-      animation-play-state: paused !important;
-      caret-color: transparent !important;
-      color-adjust: exact !important;
-      }
-      *:focus,
-      *:focus::after,
-      *:focus::before {
-        outline: none !important;
-        outline-style: none !important;
-      }
-
-    </style>
-    <link rel="stylesheet" href="http://0.0.0.0:${port}/fonts/lib/${fontFile}.css" />
-    <link rel="stylesheet" href="http://0.0.0.0:${port}/tokens/lib/tokens.custom-properties.css" />
-    <link rel="stylesheet" href="http://0.0.0.0:${port}/css/lib/duet.css" />
-  </head>
-  <body style="min-height: ${minHeight} !important; margin: 8px">
-    ${fixtureHtml}
-  </body>
-</html>
-
-`;
-};
-// getFixturesAndTest returns fixtures object and creates synthetic tests
-export const getFixturesAndTest = (directory, options = {}) => {
-  const { minHeight, skipFixture } = options;
-  const componentFixtures = getAllFixturesFiles(directory, "fixtures", skipFixture);
-  fixtureTests(componentFixtures, minHeight);
-  return componentFixtures;
-};
-export const fixtureTests = (componentFixtures, minHeight) => {
-  if (!process.env.VIZDIF) {
-    return;
-  }
-  describe(`${componentFixtures.component} vizdif`, () => {
-    Object.keys(componentFixtures.fixtures).forEach(fixtureName => {
-      const html = componentFixtures.fixtures[fixtureName];
-      it(`${fixtureName} renders correctly with Turva theme`, async () => {
-        const page = await createPage(htmlFragment(html, "turva", minHeight));
-        await page.find("#fixture");
-        expect(await page.screenshot()).toMatchImageSnapshot();
-      });
-      it(`${fixtureName} renders correctly with Lahitapiola theme`, async () => {
-        const page = await createPage(htmlFragment(html, "default", minHeight));
-        await page.find("#fixture");
-        expect(await page.screenshot()).toMatchImageSnapshot();
-      });
-    });
-  });
-};