@duetds/components 4.36.1 → 5.0.0

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

@@ -28,6 +28,9 @@
   position: relative;
 }
 
+.duet-pagination ::part(button) {
+  border: 0;
+}
 .duet-pagination, .duet-pagination li {
   display: flex;
   flex-wrap: wrap;
@@ -55,66 +58,4 @@
 }
 .duet-pagination.duet-pagination-is-dimmed {
   opacity: 0.5;
-}
-
-.duet-pagination-page-button {
-  white-space: nowrap;
-}
-.duet-pagination-page-button button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  min-height: auto !important;
-  padding: 0 !important;
-  margin: 0 0 0 8px !important;
-  color: #00294d;
-  cursor: pointer;
-  background: #f5f8fa;
-  border-radius: 50%;
-  transition: background-color 300ms ease !important;
-}
-.duet-theme-turva .duet-pagination-page-button button {
-  color: #171c3a;
-  background: #f5f5f7;
-}
-.duet-pagination-page-button button duet-icon {
-  display: block;
-}
-@media (max-width: 35.9375em) {
-  .duet-pagination-page-button button {
-    width: 40px;
-    height: 40px;
-  }
-}
-.duet-pagination-page-button button:not(:disabled):hover {
-  background: #e9ecee !important;
-}
-.duet-theme-turva .duet-pagination-page-button button:not(:disabled):hover {
-  background: #e9e9eb !important;
-}
-.duet-pagination-page-button button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 2px #0077b3;
-}
-.duet-theme-turva .duet-pagination-page-button button:focus {
-  box-shadow: 0 0 0 2px #171c3a;
-}
-.duet-pagination-page-button button:active:focus {
-  background: #dddfe1;
-  box-shadow: none;
-}
-.duet-theme-turva .duet-pagination-page-button button:active:focus {
-  background: #ddddde;
-}
-.duet-pagination-page-button button:disabled {
-  color: #909599;
-  cursor: default;
-  background: #f5f8fa;
-  opacity: 0.75;
-}
-.duet-theme-turva .duet-pagination-page-button button:disabled {
-  color: #747475;
-  background: #f5f5f7;
 }

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

@@ -30,10 +30,14 @@ export class DuetPagination {
      * Characters to use for the jump buttons.
      */
     this.jumpString = "...";
+    /**
+     * Variation of the paginator (compact and default supported)
+     */
+    this.variation = "default";
     /**
      * Default pagination labels
      */
-    this.ariaLabelsDefaults = {
+    this.accessibleLabelsDefaults = {
       en: {
         next_page: "Next page",
         previous_page: "Previous page",
@@ -74,7 +78,7 @@ export class DuetPagination {
     /**
      * Default pagination labels
      */
-    this.ariaLabels = getLocaleString(this.ariaLabelsDefaults);
+    this.accessibleLabels = getLocaleString(this.accessibleLabelsDefaults);
     /**
      * The size of the take, when paginating.
      */
@@ -244,13 +248,16 @@ export class DuetPagination {
         }, 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.ariaLabels.go_to} ${i}`, onClick: e => this.pageClickHandler(e) },
+          }, 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;
   }
   shouldDisplayNavigation() {
-    return shouldDisplayNavigation(this.visibleItems, this.total, this.take);
+    if (this.variation !== "compact") {
+      return shouldDisplayNavigation(this.visibleItems, this.total, this.take);
+    }
+    return false;
   }
   /**
    * render() function
@@ -258,43 +265,44 @@ export class DuetPagination {
    */
   render() {
     return (h(Host, { onKeyDown: e => this.onKeyboardDown(e) },
-      h("nav", { role: "navigation", class: "duet-pagination-nav", "aria-labelledby": this.listId, "aria-describedby": this.listId, ref: el => (this.nativeNav = el), "aria-controls": this.ariaControls },
-        this.numbersStore !== "" && (h("div", { "aria-live": "assertive", "aria-relevant": "text", class: "duet-pagination-overlay", "aria-label": `${this.ariaLabels.jump_to} ${this.numbersStore}`, part: "navigation-overlay" },
+      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 !== "" && (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.ariaLabels.pagination_label, "aria-description": this.ariaLabels.description },
+          }, 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("button", { disabled: this.internalSectionIndex === 0 && this.current <= 1, "data-direction": "back", class: "duet-date-dialog-prev", type: "button", onClick: e => this.onMouseHandler(e, -1), "aria-label": this.ariaLabels.previous_page },
-              h("duet-icon", { name: "action-arrow-left-small", color: "currentColor", margin: "none", size: "xx-small" }))),
+            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.ariaLabels.first_page, onClick: e => this.jumpToStart(e) },
+              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("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.ariaLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1) },
+              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("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))))),
           this.renderPageNumbers(),
           this.internalSectionIndex !== this.totalPages / this.visibleItems - 1 && 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.ariaLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1) },
+              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("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.ariaLabels.last_page, onClick: e => this.jumpToEnd(e) },
+              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("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("button", { disabled: this.current === this.totalPages &&
-                this.internalSectionIndex === Math.ceil(this.totalPages / this.visibleItems) - 1, class: "duet-date-dialog-next", type: "button", "aria-label": this.ariaLabels.next_page, onClick: e => this.onMouseHandler(e, 1) },
-              h("duet-icon", { name: "action-arrow-right-small", color: "currentColor", margin: "none", size: "xx-small" })))))));
+            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"; }
@@ -346,7 +354,29 @@ export class DuetPagination {
       "reflect": false,
       "defaultValue": "\"...\""
     },
-    "ariaLabelsDefaults": {
+    "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\""
+    },
+    "accessibleLabelsDefaults": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
@@ -367,7 +397,7 @@ export class DuetPagination {
       },
       "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  }"
     },
-    "ariaLabels": {
+    "accessibleLabels": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
@@ -385,7 +415,7 @@ export class DuetPagination {
         "tags": [],
         "text": "Default pagination labels"
       },
-      "defaultValue": "getLocaleString(\n    this.ariaLabelsDefaults\n  )"
+      "defaultValue": "getLocaleString(\n    this.accessibleLabelsDefaults\n  )"
     },
     "take": {
       "type": "number",

package/lib/collection/components/duet-range-stepper/duet-range-stepper.css

@@ -40,61 +40,10 @@
 .duet-range-stepper {
   white-space: nowrap;
 }
-.duet-range-stepper button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  min-height: auto !important;
-  padding: 0 !important;
-  margin: 0 0 0 8px !important;
+.duet-range-stepper .duet-range-step-counter {
+  font-weight: 600;
   color: #00294d;
-  cursor: pointer;
-  background: #f5f8fa;
-  border-radius: 50%;
-  transition: background-color 300ms ease !important;
-}
-.duet-theme-turva .duet-range-stepper button {
-  color: #171c3a;
-  background: #f5f5f7;
-}
-.duet-range-stepper button duet-icon {
-  display: block;
-}
-@media (max-width: 35.9375em) {
-  .duet-range-stepper button {
-    width: 40px;
-    height: 40px;
-  }
-}
-.duet-range-stepper button:not(:disabled):hover {
-  background: #e9ecee !important;
-}
-.duet-theme-turva .duet-range-stepper button:not(:disabled):hover {
-  background: #e9e9eb !important;
 }
-.duet-range-stepper button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 2px #0077b3;
-}
-.duet-theme-turva .duet-range-stepper button:focus {
-  box-shadow: 0 0 0 2px #171c3a;
-}
-.duet-range-stepper button:active:focus {
-  background: #dddfe1;
-  box-shadow: none;
-}
-.duet-theme-turva .duet-range-stepper button:active:focus {
-  background: #ddddde;
-}
-.duet-range-stepper button:disabled {
-  color: #909599;
-  cursor: default;
-  background: #f5f8fa;
-  opacity: 0.75;
-}
-.duet-theme-turva .duet-range-stepper button:disabled {
-  color: #747475;
-  background: #f5f5f7;
+.duet-range-stepper ::part(button) {
+  border: 0;
 }

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

@@ -154,10 +154,8 @@ export class DuetRangeStepper {
         "duet-theme-turva": this.theme === "turva",
       }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls },
       h("span", { class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()),
-      h("button", { class: "duet-range-step-button duet-range-step-minus", type: "button", onClick: e => this.handleClick(e, -1), id: this.leftBn, "aria-label": this.ariaLabels.previous_increment, ref: el => (this.leftBnRef = el), part: "navigation-arrow" },
-        h("duet-icon", { name: "action-arrow-left-small", color: "currentColor", margin: "none", size: "xx-small" })),
-      h("button", { class: "duet-range-step-button duet-range-step-plus", type: "button", onClick: e => this.handleClick(e, 1), "aria-label": this.ariaLabels.next_increment, id: this.rightBn, ref: el => (this.rightBnRef = el), part: "navigation-arrow" },
-        h("duet-icon", { name: "action-arrow-right-small", color: "currentColor", margin: "none", size: "xx-small" }))));
+      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" }),
+      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" })));
   }
   static get is() { return "duet-range-stepper"; }
   static get encapsulation() { return "shadow"; }

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

@@ -65,15 +65,21 @@ duet-table tbody th {
 duet-table.duet-theme-turva tbody th {
   color: #171c3a;
 }
+duet-table .duet-table-action-row td:last-child {
+  justify-self: end;
+  padding-right: 20px !important;
+  white-space: nowrap;
+}
 
-.duet-table-flattened table,
-.duet-table-flattened thead,
-.duet-table-flattened tbody,
-.duet-table-flattened tfoot,
-.duet-table-flattened th,
-.duet-table-flattened td,
-.duet-table-flattened tr {
-  display: block;
+.duet-table-flattened tbody tr {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-auto-rows: auto;
+  gap: 10px;
+}
+.duet-table-flattened tbody tr.duet-table-action-row td:last-child::before {
+  padding: 0;
+  content: "";
 }
 .duet-table-flattened thead tr {
   position: absolute !important;
@@ -86,11 +92,20 @@ duet-table.duet-theme-turva tbody th {
   border: 0 !important;
 }
 .duet-table-flattened td {
+  grid-column: 1/2;
   line-height: 1.25;
 }
 .duet-table-flattened td:not(:last-child) {
   margin-bottom: 16px !important;
 }
+.duet-table-flattened td:first-child {
+  grid-row: 1;
+  grid-column: 1;
+}
+.duet-table-flattened td:last-child {
+  grid-row: 1;
+  grid-column: 2;
+}
 .duet-table-flattened tbody td,
 .duet-table-flattened tbody th,
 .duet-table-flattened tfoot td {
@@ -303,4 +318,23 @@ duet-table.duet-theme-turva tbody th {
 }
 .duet-theme-turva .duet-table-selected-column {
   background: rgba(68, 68, 69, 0.08);
+}
+
+.duet-table-sortable tbody tr td:first-child,
+.duet-table-sortable thead tr th:first-child {
+  padding: 20px;
+}
+.duet-table-sortable:not(.duet-table-flattened) tfoot {
+  border-top: 1px solid #e1e3e6;
+}
+.duet-table-sortable:not(.duet-table-flattened).duet-theme-turva tfoot {
+  border-top-color: #e4e4e6;
+}
+
+.duet-table-actions table {
+  table-layout: auto;
+}
+.duet-table-actions thead th:last-child {
+  width: 1px;
+  white-space: nowrap;
 }

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

@@ -3,6 +3,7 @@
  */
 import { mediaQueryLarge, mediaQueryMedium, mediaQuerySmall, mediaQueryXLarge, mediaQueryXxLarge, mediaQueryXxxLarge, sizeHeader, sizeNavigation, } from "@duetds/tokens";
 import { Build, Component, Element, h, Host, Prop, State } from "@stencil/core";
+import { debounce } from "../../utils/js-utils";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
 // remove wrapping speech marks.
 // media query tokens are wrapped in speech marks,
@@ -23,6 +24,11 @@ const stickyTopValues = {
   "with-links": parseFloat(sizeNavigation) * 16,
   "without-links": parseFloat(sizeHeader) * 16,
 };
+/**
+ * @slot dot-menu- If this slot is populated - the content will be displayed together with a ... type menu to the far right in the tsble header
+ * @slot header - Header slot for the table
+ * @slot footer - Footer slot for the table
+ */
 export class DuetTable {
   constructor() {
     /**
@@ -64,9 +70,9 @@ export class DuetTable {
       return;
     }
     this.mq = matchMedia(breakpointToToken[this.breakpoint]);
-    this.mq.addEventListener("change", this.handleMediaQueryChange);
+    this.mq.addEventListener("change", debounce(this.handleMediaQueryChange, 50));
     this.handleMediaQueryChange(this.mq);
-    this.observer = new MutationObserver(() => this.copyHeadingsToCells());
+    this.observer = new MutationObserver(() => debounce(this.copyHeadingsToCells(), 50));
     this.observer.observe(this.element, {
       childList: true,
       subtree: true,
@@ -103,6 +109,9 @@ export class DuetTable {
     this.mq = null;
     this.matchesBreakpoint = true;
   }
+  /**
+   * Local methods.
+   */
   copyHeadingsToCells() {
     const headingElements = this.element.querySelectorAll("thead th");
     const rowElements = this.element.querySelectorAll("tbody tr");

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

@@ -61,4 +61,29 @@
   font-size: 1rem;
   font-weight: 400;
   background-color: #f5f8fa;
+}
+.duet-upload-editable-table-header-hidden {
+  display: none;
+}
+
+.duet-upload-editable-table tbody .duet-upload-editable-table-data {
+  padding: 0 !important;
+  border: 0;
+}
+.duet-upload-editable-table duet-editable-table tfoot,
+.duet-upload-editable-table duet-editable-table thead {
+  display: none;
+}
+.duet-upload-editable-table duet-editable-table .duet-editable-table-content {
+  padding-right: 0 !important;
+  padding-left: 0 !important;
+}
+.duet-upload-editable-table duet-editable-table duet-table .duet-table-action-row td {
+  padding: 0.75rem 0 !important;
+}
+.duet-upload-editable-table duet-editable-table duet-table .duet-table-action-row td:last-child {
+  padding-right: 0 !important;
+}
+.duet-upload-editable-table duet-editable-table .duet-editable-table-row-inprogress duet-action-button::part(button) {
+  border: 0;
 }