@duetds/components 4.35.4 → 5.0.0

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

@@ -0,0 +1,340 @@
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, Event, h, Prop, Watch } from "@stencil/core";
+import { createID } from "../../utils/create-id";
+import { isArrowDownKey, isArrowKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isMinusKey, isPlusKey, } from "../../utils/keyboard-utils";
+import { getLocaleString } from "../../utils/language-utils";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
+export class DuetRangeStepper {
+  constructor() {
+    this.leftBn = createID("duetRangeStepper-left");
+    this.rightBn = 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 = 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() {
+    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;
+      }
+      else {
+      }
+    }
+  }
+  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 (isArrowLeftKey(e) || isArrowUpKey(e) || isMinusKey(e)) {
+      next--;
+      dir = -1;
+      this.leftBnRef.focus();
+    }
+    if (isArrowRightKey(e) || isArrowDownKey(e) || isPlusKey(e)) {
+      next++;
+      dir = 1;
+    }
+    if (isArrowKey(e)) {
+      if (next > 0 && next * this.stepSize <= this.total) {
+        this.handleClick(e, dir);
+      }
+      else {
+        //await this.stepperRef.focus()
+      }
+    }
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h("div", { class: {
+        "duet-range-stepper": true,
+        "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("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"; }
+  static get originalStyleUrls() { return {
+    "$": ["duet-range-stepper.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["duet-range-stepper.css"]
+  }; }
+  static get properties() { return {
+    "theme": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "DuetTheme",
+        "resolved": "\"\" | \"default\" | \"turva\"",
+        "references": {
+          "DuetTheme": {
+            "location": "import",
+            "path": "../../common-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Theme of the component."
+      },
+      "attribute": "theme",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "stepIndex": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "1"
+          }],
+        "text": "Start value"
+      },
+      "attribute": "step-index",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "stepSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "99"
+          }],
+        "text": "How big is the step"
+      },
+      "attribute": "step-size",
+      "reflect": false,
+      "defaultValue": "50"
+    },
+    "total": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "undefined"
+          }],
+        "text": "Total of"
+      },
+      "attribute": "total",
+      "reflect": false,
+      "defaultValue": "1000"
+    },
+    "ariaLabelsDefaults": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetLangObject",
+        "resolved": "DuetLangObject",
+        "references": {
+          "DuetLangObject": {
+            "location": "import",
+            "path": "../../utils/language-utils"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Default range stepper labels"
+      },
+      "defaultValue": "{\n    en: {\n      next_increment: \"Next range increment\",\n      previous_increment: \"Previous range increment\",\n      x_of_y: \"{0}\u2013{1} of {2}\",\n    },\n    fi: {\n      next_increment: \"Seuraava v\u00E4lill\u00E4\",\n      previous_increment: \"Edellinen v\u00E4lill\u00E4\",\n      x_of_y: \"{0}\u2013{1} / {2}\",\n    },\n    sv: {\n      next_increment: \"N\u00E4sta intervall\",\n      previous_increment: \"F\u00F6reg\u00E5ende intervall\",\n      x_of_y: \"{0}\u2013{1} av {2}\",\n    },\n  }"
+    },
+    "ariaLabels": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Record<string, string>",
+        "resolved": "{ [x: string]: string; }",
+        "references": {
+          "Record": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Default pagination labels"
+      },
+      "defaultValue": "getLocaleString(\n    this.ariaLabelsDefaults\n  )"
+    },
+    "ariaControls": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Used to indicate which dom element with ID this element controls"
+      },
+      "attribute": "accessible-controls",
+      "reflect": false,
+      "defaultValue": "\"\""
+    }
+  }; }
+  static get events() { return [{
+      "method": "duetRangeStepUpdate",
+      "name": "duetRangeStepUpdate",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event emitted when the step heading is clicked."
+      },
+      "complexType": {
+        "original": "DuetRangeStepperUpdateEvent",
+        "resolved": "{ originalEvent: MouseEvent | KeyboardEvent; component: \"duet-range-stepper\"; from: number; to: number; index: number; }",
+        "references": {
+          "DuetRangeStepperUpdateEvent": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "stepIndex",
+      "methodName": "watchStateHandler"
+    }]; }
+}

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

@@ -39,6 +39,13 @@
     width: 100% !important;
   }
 }
+:host.duet-select-variation-tiny {
+  position: relative;
+  top: -2px;
+  width: 72px;
+  margin: 0 !important;
+  vertical-align: baseline;
+}
 
 :host(.duet-m-0) {
   margin: 0 !important;
@@ -76,6 +83,9 @@ duet-tooltip {
   position: relative;
   width: 100%;
 }
+.duet-select-container.duet-select-variation-tiny {
+  width: 72px;
+}
 
 .duet-select-wrapper {
   position: relative;
@@ -89,6 +99,10 @@ duet-tooltip {
 .duet-theme-turva .duet-select-wrapper {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
+.duet-select-variation-tiny .duet-select-wrapper {
+  width: 81px;
+  padding: 0 !important;
+}
 .duet-select-wrapper::after {
   content: "  ";
 }
@@ -226,6 +240,18 @@ duet-tooltip {
 .duet-theme-turva .duet-select svg {
   color: #171c3a;
 }
+.duet-select-variation-tiny .duet-select {
+  width: 72px;
+  min-width: inherit;
+  padding: 0 !important;
+  margin-bottom: -4px;
+  overflow: visible;
+  font-weight: 600;
+  text-align: center;
+}
+.duet-select-variation-tiny .duet-select duet-icon {
+  padding-left: 10px;
+}
 
 .duet-select-help {
   display: block;

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

@@ -34,6 +34,10 @@ export class DuetSelect {
      * Inlined decorator, alphabetical order.
      */
     this.processedItems = null;
+    /**
+     * Variation of dropdown. -tiny is used for small numbers / tiny option ranges.
+     */
+    this.variation = "default";
     /**
      * Controls the margin of the component.
      */
@@ -165,11 +169,16 @@ export class DuetSelect {
    */
   render() {
     const identifier = this.identifier || this.selectId;
-    return (h(Host, { onClick: this.onClick, class: { "duet-m-0": this.margin === "none", "duet-expand": this.expand } },
+    return (h(Host, { onClick: this.onClick, class: {
+        "duet-m-0": this.margin === "none",
+        "duet-expand": this.expand,
+        "duet-select-variation-tiny": this.variation === "tiny",
+      } },
       h("div", { class: {
           "duet-select-container": true,
           "duet-label-hidden": this.labelHidden,
           "duet-theme-turva": this.theme === "turva",
+          "duet-select-variation-tiny": this.variation === "tiny",
           "duet-input-top-caption-shown": this.isCaptionVisible,
           "has-error": !!this.error,
         } },
@@ -183,10 +192,14 @@ export class DuetSelect {
             !this.processedItems ? (h("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {
               return isOptionGroup(item) ? this.renderOptionGroup(item) : this.renderOption(item);
             }))),
-          h("div", { class: "duet-select", "aria-hidden": "true" },
+          h("div", { class: {
+              "duet-select": true,
+              "duet-select-variation-tiny": this.variation === "tiny",
+            }, "aria-hidden": "true" },
             h("span", { key: this.value }, this.getSelectedItemLabel()),
-            h("svg", { role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
-              h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" })))),
+            this.variation !== "tiny" && (h("svg", { role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
+              h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))),
+            this.variation === "tiny" && (h("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xx-small" })))),
         h("span", { class: "duet-select-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
   }
   static get is() { return "duet-select"; }
@@ -198,6 +211,28 @@ export class DuetSelect {
     "$": ["duet-select.css"]
   }; }
   static get properties() { return {
+    "variation": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetSelectVariation",
+        "resolved": "\"default\" | \"tiny\"",
+        "references": {
+          "DuetSelectVariation": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Variation of dropdown. -tiny is used for small numbers / tiny option ranges."
+      },
+      "attribute": "variation",
+      "reflect": false,
+      "defaultValue": "\"default\""
+    },
     "accessibleActiveDescendant": {
       "type": "string",
       "mutable": false,

package/lib/collection/components/duet-tab-group/duet-tab-group.js

@@ -6,6 +6,10 @@ import { createID } from "../../utils/create-id";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey } from "../../utils/keyboard-utils";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
+/**
+ * @part ${identifier}-button - piercing selector for styling tab buttons
+ * @part ${identifier}-button--selected - piercing selector for styling selected tab button
+ */
 export class DuetTabGroup {
   constructor() {
     this.id = createID("DuetTabGroup");
@@ -88,7 +92,7 @@ export class DuetTabGroup {
     };
     this.renderTab = () => {
       const renderedTabs = this.tabs.map((element, index) => {
-        return (h("button", { role: "tab", id: this.getButtonId(index), "aria-controls": this.getTabId(index), "aria-selected": element.selected ? "true" : "false", "aria-description": this.getAccessibleDescription(index), part: `${this.identifier}-button`, type: "button", class: {
+        return (h("button", { role: "tab", id: this.getButtonId(index), "aria-controls": this.getTabId(index), "aria-selected": element.selected ? "true" : "false", "aria-description": this.getAccessibleDescription(index), part: `${this.identifier}-button ${element.selected ? `${this.identifier}-button--selected` : ""}`, type: "button", class: {
             "duet-p-0": this.padding === "none",
             "duet-tab-button": true,
             selected: element.selected,

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;
 }