@duetds/components 5.1.9 → 5.2.2

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

@@ -2,11 +2,11 @@
  * Built with Duet Design System
  */
 import { Component, Element, Event, Fragment, h, Host, Prop, State, Watch } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { debounce } from "../../utils/js-utils";
 import { isArrowDownKey, isArrowKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isNumber, } from "../../utils/keyboard-utils";
 import { getLocaleString } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 import { shouldDisplayNavigation } from "./duet-pagination-utils";
 export class DuetPagination {
   constructor() {
@@ -34,6 +34,22 @@ export class DuetPagination {
      * Variation of the paginator (compact and default supported)
      */
     this.variation = "default";
+    /**
+     * Described By id
+     */
+    this.accessibleDescribedBy = undefined;
+    /**
+     * Details of the component
+     */
+    this.accessibleDetails = undefined;
+    /**
+     * String of id's that indicate alternative labels elements
+     */
+    this.accessibleLabelledBy = undefined;
+    /**
+     * Aria description the button
+     */
+    this.accessibleDescription = undefined;
     /**
      * Default pagination labels
      */
@@ -127,7 +143,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);
@@ -173,6 +189,7 @@ export class DuetPagination {
     e.preventDefault();
     e.stopPropagation();
     this.current = this.current + dir;
+    this.emitPageEvent(e);
   }
   //handle a11y keyboard navigation events
   async onKeyboardDown(e) {
@@ -226,12 +243,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.current = this.totalPages;
+    this.emitPageEvent(e);
   }
   // render the individual page numbers
   renderPageNumbers() {
@@ -265,7 +284,7 @@ export class DuetPagination {
    */
   render() {
     return (h(Host, { onKeyDown: e => this.onKeyboardDown(e) },
-      h("nav", { role: "navigation", "aria-labelledby": this.listId, "aria-describedby": this.listId, ref: el => (this.nativeNav = el), "aria-controls": this.ariaControls, class: {
+      h("nav", { role: "navigation", "aria-labelledby": this.accessibleLabelledBy ? `${this.accessibleLabelledBy} ${this.listId}` : this.listId, "aria-describedby": this.accessibleDescribedBy ? `${this.accessibleDescribedBy} ${this.listId}` : this.listId, "aria-descriptions": this.accessibleDescription, "aria-details": this.accessibleDetails, ref: el => (this.nativeNav = el), "aria-controls": this.ariaControls, class: {
           "duet-pagination-nav": true,
           [`duet-pagination-variation-${this.variation}`]: true,
         } },
@@ -376,6 +395,78 @@ export class DuetPagination {
       "reflect": false,
       "defaultValue": "\"default\""
     },
+    "accessibleDescribedBy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Described By id"
+      },
+      "attribute": "accessible-described-by",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "accessibleDetails": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Details of the component"
+      },
+      "attribute": "accessible-details",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "accessibleLabelledBy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "String of id's that indicate alternative labels elements"
+      },
+      "attribute": "accessible-labelled-by",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "accessibleDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Aria description the button"
+      },
+      "attribute": "accessible-description",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
     "accessibleLabelsDefaults": {
       "type": "unknown",
       "mutable": false,

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

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 import { Component, Element, h, Prop } from "@stencil/core";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getColorByName } from "../../utils/token-utils";
 /**
  * @part duet-paragraph - piercing selector for styling the paragraph

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

@@ -2,9 +2,9 @@
  * Built with Duet Design System
  */
 import { Component, Element, h, Host, Prop } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { getLocaleString } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 export class DuetProgress {
   constructor() {
     /**
@@ -12,6 +12,18 @@ export class DuetProgress {
      */
     this.progressId = createID("DuetProgress");
     this.progressLabelId = createID("DuetProgressLabel");
+    /**
+     * Aria Details of the component
+     */
+    this.accessibleDetails = undefined;
+    /**
+     * String of id's that indicate alternative labels elements
+     */
+    this.accessibleLabelledBy = undefined;
+    /**
+     * Aria description the button
+     */
+    this.accessibleDescription = undefined;
     /**
      * Defaults for accessibleLabel
      */
@@ -66,7 +78,7 @@ export class DuetProgress {
             this.accessibleLabelUpload[this.progress < 99 ? 1 : 0])))),
         this.caption && (h("div", { class: "duet-progress-caption" },
           h("span", null, this.caption))),
-        h("progress", { id: this.progressLabelId, "aria-describedby": this.accessibleDescribedBy, role: "progressbar", value: this.progress, max: "100", "aria-valuemin": "0", "aria-valuemax": "100" },
+        h("progress", { id: this.progressLabelId, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, role: "progressbar", value: this.progress, max: "100", "aria-valuemin": "0", "aria-valuemax": "100" },
           h("div", { class: "progress-bar" },
             h("span", { style: { width: `${this.progress}%;` } },
               "Progress: ",
@@ -98,6 +110,60 @@ export class DuetProgress {
       "attribute": "accessible-described-by",
       "reflect": false
     },
+    "accessibleDetails": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Aria Details of the component"
+      },
+      "attribute": "accessible-details",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "accessibleLabelledBy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "String of id's that indicate alternative labels elements"
+      },
+      "attribute": "accessible-labelled-by",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "accessibleDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Aria description the button"
+      },
+      "attribute": "accessible-description",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
     "accessibleLabel": {
       "type": "string",
       "mutable": false,

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

@@ -2,14 +2,26 @@
  * Built with Duet Design System
  */
 import { Component, Element, Event, h, Host, Method, Prop } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 export class DuetRadio {
   constructor() {
     /**
      * Own Properties.
      */
     this.radioId = createID("DuetRadio");
+    /**
+     * Aria Details of the component
+     */
+    this.accessibleDetails = undefined;
+    /**
+     * String of id's that indicate alternative labels elements
+     */
+    this.accessibleLabelledBy = undefined;
+    /**
+     * Aria description the button
+     */
+    this.accessibleDescription = undefined;
     /**
      * Controls the margin of the component.
      */
@@ -100,7 +112,7 @@ export class DuetRadio {
         "duet-m-0": this.margin === "none",
       } },
       h("div", { class: { "duet-radio-container": true, "duet-theme-turva": this.theme === "turva" } },
-        h("input", { type: "radio", onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, value: this.value, tabindex: this.accessibleIndex, class: { "duet-radio": true, disabled: this.disabled || this.groupDisabled }, checked: this.checked, disabled: this.disabled || this.groupDisabled, required: this.required, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, role: this.role, name: this.name, id: identifier, ref: input => (this.nativeInput = input) }),
+        h("input", { type: "radio", onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, value: this.value, tabindex: this.accessibleIndex, class: { "duet-radio": true, disabled: this.disabled || this.groupDisabled }, checked: this.checked, disabled: this.disabled || this.groupDisabled, required: this.required, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, role: this.role, name: this.name, id: identifier, ref: input => (this.nativeInput = input) }),
         h("label", { class: "duet-label", htmlFor: identifier },
           h("span", null, this.label)))));
   }
@@ -130,6 +142,60 @@ export class DuetRadio {
       "attribute": "accessible-active-descendant",
       "reflect": false
     },
+    "accessibleDetails": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Aria Details of the component"
+      },
+      "attribute": "accessible-details",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "accessibleLabelledBy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "String of id's that indicate alternative labels elements"
+      },
+      "attribute": "accessible-labelled-by",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "accessibleDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Aria description the button"
+      },
+      "attribute": "accessible-description",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
     "accessibleIndex": {
       "type": "string",
       "mutable": false,

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

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 import { Component, Element, h, Host, Prop, Watch } from "@stencil/core";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { findCheckedOption, watchForOptions } from "../../utils/watch-options";
 export class DuetRadioGroup {
   constructor() {

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

@@ -3,9 +3,9 @@
  */
 import { colorGray, colorGrayTurva, colorPrimary, colorPrimaryTurva } from "@duetds/tokens";
 import { Component, Element, Event, h, Host, Method, Prop } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import isInternetExplorer from "../../utils/is-internet-explorer";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 const colors = {
   turva: {
     active: colorPrimaryTurva,

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

@@ -2,10 +2,10 @@
  * Built with Duet Design System
  */
 import { Component, Element, Event, h, Prop, Watch } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 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");
@@ -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"
     }]; }
 }

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

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 import { Component, Element, h, Host, Prop, State, Watch } from "@stencil/core";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetScrollable {
   constructor() {
     /**

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

@@ -2,9 +2,9 @@
  * Built with Duet Design System
  */
 import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { parsePossibleJSON } from "../../utils/string-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 function isOptionGroup(item) {
   return "options" in item;
 }

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

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 import { Component, h, Host, Prop } from "@stencil/core";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getColorByName } from "../../utils/token-utils";
 export class DuetSpinner {
   constructor() {

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

@@ -3,9 +3,9 @@
  */
 import editIcon from "@duetds/icons/lib/assets/action-edit-2";
 import { Build, Component, Element, Event, h, Method, Prop } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { isKeyboardClick } from "../../utils/keyboard-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 /**
  * @slot unnamed default slot - The component’s primary content. All child nodes that do not have a slot attribute defined are inserted into this primary slot.
  * @slot heading-content - Step heading content. Use this slot to show additional content next to step heading.

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

@@ -2,8 +2,8 @@
  * Built with Duet Design System
  */
 import { Component, Element, Event, h, Host, Listen, Prop, Watch } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import groupBy from "../../utils/group-by";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 export class DuetStepper {
   constructor() {
     /**

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

@@ -2,10 +2,10 @@
  * Built with Duet Design System
  */
 import { Component, Element, Event, h, Method, Prop, State } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 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

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

@@ -71,15 +71,14 @@ duet-table .duet-table-action-row td:last-child {
   white-space: nowrap;
 }
 
-.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 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 thead tr {
   position: absolute !important;
@@ -92,20 +91,11 @@ duet-table .duet-table-action-row td:last-child {
   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 {
@@ -337,4 +327,26 @@ duet-table .duet-table-action-row td:last-child {
 .duet-table-actions thead th:last-child {
   width: 1px;
   white-space: nowrap;
+}
+
+.duet-editable-table-table.duet-table-flattened tr {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-auto-rows: auto;
+  gap: 10px;
+}
+.duet-editable-table-table.duet-table-flattened tr.duet-table-action-row td:last-child::before {
+  padding: 0;
+  content: "";
+}
+.duet-editable-table-table.duet-table-flattened td {
+  grid-column: 1/2;
+}
+.duet-editable-table-table.duet-table-flattened td:first-child {
+  grid-row: 1;
+  grid-column: 1;
+}
+.duet-editable-table-table.duet-table-flattened td:last-child {
+  grid-row: 1;
+  grid-column: 2;
 }

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

@@ -3,8 +3,8 @@
  */
 import { mediaQueryLarge, mediaQueryMedium, mediaQuerySmall, mediaQueryXLarge, mediaQueryXxLarge, mediaQueryXxxLarge, sizeHeader, sizeNavigation, } from "@duetds/tokens";
 import { Build, Component, Element, h, Host, Prop, State } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { debounce } from "../../utils/js-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 // remove wrapping speech marks.
 // media query tokens are wrapped in speech marks,
 // which need to be removed before use with matchMedia.