@duetds/components 4.31.0 → 4.33.2

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

@@ -151,6 +151,26 @@
   font-weight: 600;
   word-break: break-word;
 }
+.duet-card-secondary-heading--inline {
+  display: block;
+  flex: 1;
+  align-self: flex-start;
+  line-height: 1.875;
+  text-align: right;
+}
+@media (max-width: 22.5em) {
+  .duet-card-secondary-heading--inline {
+    display: none;
+  }
+}
+.duet-card-secondary-heading--new-line {
+  display: none;
+}
+@media (max-width: 22.5em) {
+  .duet-card-secondary-heading--new-line {
+    display: block;
+  }
+}
 
 .duet-card-heading {
   position: relative;

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

@@ -106,10 +106,13 @@ export class DuetCard {
           h("duet-icon", { class: "duet-card-icon", name: this.icon, size: "medium", margin: "none", color: "currentColor" }),
           h("duet-spacer", { direction: "horizontal", size: "small" }))),
         h("div", { class: "duet-card-heading-text" }, this.heading),
+        this.secondaryHeading && (h(Fragment, null,
+          h("duet-spacer", { direction: "horizontal", size: "small" }),
+          h("div", { class: "duet-card-secondary-heading duet-card-secondary-heading--inline" }, this.secondaryHeading))),
         this.collapsible && (h(Fragment, null,
           h("duet-spacer", { direction: "horizontal", size: "small" }),
           h("duet-icon", { class: "duet-card-caret", icon: arrowUpIcon.svg, size: "small", margin: "none", color: "currentColor" })))),
-      this.secondaryHeading && h("div", { class: "duet-card-secondary-heading" }, this.secondaryHeading)));
+      this.secondaryHeading && (h("div", { class: "duet-card-secondary-heading duet-card-secondary-heading--new-line" }, this.secondaryHeading))));
   }
   /**
    * Sets focus on the specified `duet-card`. Use this method instead of the global

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

@@ -31,7 +31,7 @@
   margin-right: 0 !important;
 }
 
-:host(:last-of-type:not(:only-child)) {
+:host(:last-child:not(:only-child)) {
   margin-bottom: 0 !important;
 }
 

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

@@ -308,11 +308,24 @@ input[disabled] + .duet-choice-label .duet-checkmark {
   display: block;
 }
 
+.duet-choice-section-hidden {
+  display: none;
+}
+
+.duet-choice-card-info.duet-choice-card-collapsed,
+.duet-choice-card-collapsed.duet-choice-card-collapsible {
+  position: relative;
+  width: auto;
+  padding: 0 !important;
+  background: unset !important;
+  border: 0;
+  border-radius: 0;
+}
+
 .duet-choice-card-info, .duet-choice-card-collapsible {
   padding: 28px !important;
   position: relative;
   z-index: 200;
-  display: none;
   width: 100%;
   font-weight: 400;
   color: #00294d;
@@ -417,8 +430,8 @@ input[disabled] + .duet-choice-label .duet-checkmark {
 
 .duet-choice-input {
   position: absolute !important;
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
   overflow: hidden;
   clip: rect(1px, 1px, 1px, 1px);
   color: transparent;

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

@@ -5,19 +5,23 @@ import infoIcon from "@duetds/icons/lib/assets/messaging-info";
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State } from "@stencil/core";
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { createID } from "../../utils/create-id";
-import { isKeyboardClick, isQuestionKey } from "../../utils/keyboard-utils";
-import { getLocaleString } from "../../utils/language-utils";
+import { FocusGuard } from "../../utils/focus-utils";
+import { isEscapeKey, isKeyboardClick, isQuestionKey } from "../../utils/keyboard-utils";
+import { getLanguage, getLocaleString } from "../../utils/language-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 info - Info content. Anything inserted into this slot is displayed in a collapsible info box.
+ * @slot collapsible_header - header that is only added to collapsible element, this header should be used when the components collapsible area contains additional interactive elements (such as form items) and should be user for a short description of the content below it, it is mandatory for good accessibility to use this - and aria-decribe-by will point to it. If you use the collapsible area with simple text - describe-by will point to this area
  * @slot additional - Additional content. Anything inserted into this slot is displayed as additional content under the label and caption
  */
 export class DuetChoice {
   constructor() {
+    this.hasHeader = false;
     this.choiceId = createID("DuetChoice");
-    this.collapsibleId = createID("DuetChoiceCollapsible");
-    this.infoId = createID("DuetInfo");
+    this.expandId = createID("DuetChoiceExpand");
+    this.headerId = createID("DuetChoiceHeader");
+    this.infoButtonId = createID("DuetChoiceInfoButton");
     /**
      * State() variables
      * Inlined decorator, alphabetical order.
@@ -95,6 +99,24 @@ export class DuetChoice {
      * browser from displaying its own validation errors.
      */
     this.required = false;
+    /**
+     * Placeholder defaults
+     * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
+     */
+    this.infoLabelDefaults = {
+      fi: "Lisätietoja",
+      en: "More information about",
+      sv: "Mera information om",
+    };
+    /**
+     * Hint text to display before the user types into the date picker input.
+     * @default  {
+     *     fi: "Lisätietoja",
+     *     en: "More information about",
+     *     sv: "Mera information om",
+     *   }
+     */
+    this.infoLabel = getLocaleString(this.infoLabelDefaults, getLanguage());
     this.onMouseEnter = () => {
       this.isHovering = true;
     };
@@ -102,7 +124,6 @@ export class DuetChoice {
       this.isHovering = false;
     };
     this.onClick = (ev) => {
-      this.setFocus();
       this.toggleChecked(ev);
     };
     this.handleKeyDown = (ev) => {
@@ -110,7 +131,7 @@ export class DuetChoice {
         this.toggleChecked(ev);
       }
       if (isQuestionKey(ev) && this.hasInfo) {
-        this.toggleInfo(ev);
+        this.toggleInfo();
       }
     };
     this.onChange = () => {
@@ -144,8 +165,6 @@ export class DuetChoice {
       if (this.disabled || this.groupDisabled) {
         return;
       }
-      ev.stopPropagation();
-      ev.preventDefault();
       this.isInfoOpen = false;
       // if it's a radio button and it's already checked
       // we shouldn't fire an event, so exit early
@@ -159,10 +178,10 @@ export class DuetChoice {
         value: this.value,
         component: "duet-choice",
       });
-    };
-    this.toggleInfo = ev => {
-      ev.stopPropagation();
       ev.preventDefault();
+      ev.stopPropagation();
+    };
+    this.toggleInfo = () => {
       this.isInfoOpen = !this.isInfoOpen;
     };
   }
@@ -172,6 +191,7 @@ export class DuetChoice {
   componentWillLoad() {
     inheritGlobalTheme(this);
     this.hasInfo = !!this.element.querySelector("[slot='info']");
+    this.hasHeader = !!this.element.querySelector('[slot="header"]');
     this.hasAdditional = !!this.element.querySelector("[slot='additional']");
   }
   /**
@@ -185,15 +205,18 @@ export class DuetChoice {
       // @ts-ignore
       const isTargetContainedInHost = this.element.contains(ev === null || ev === void 0 ? void 0 : ev.relatedTarget) || false;
       if (!isTargetContainedInHost) {
-        this.toggleInfo(ev);
+        this.toggleInfo();
       }
     }
   }
   handleHostKeyDown() {
     this.isKeyDown = true;
   }
-  handleHostKeyUp() {
+  handleHostKeyUp(ev) {
     this.isKeyDown = false;
+    if (isEscapeKey(ev) && this.isInfoOpen) {
+      this.toggleInfo();
+    }
   }
   /**
    * Sets focus on the specified `duet-choice`. Use this method instead of the global
@@ -206,11 +229,13 @@ export class DuetChoice {
     if (this.accessibleDescribedBy) {
       return this.accessibleDescribedBy;
     }
-    if (this.collapsible) {
-      return this.collapsibleId;
-    }
-    else if (this.hasInfo) {
-      return this.infoId;
+    if (this.collapsible || this.hasInfo) {
+      if (this.hasHeader) {
+        return this.headerId;
+      }
+      else {
+        return this.expandId;
+      }
     }
     return null;
   }
@@ -219,6 +244,7 @@ export class DuetChoice {
       return {
         "duet-choice-card-info": true,
         "duet-choice-card-info-expanded": this.isInfoOpen,
+        "duet-choice-card-collapsed": !this.isInfoOpen,
         "duet-theme-turva": this.theme === "turva",
       };
     }
@@ -226,6 +252,7 @@ export class DuetChoice {
       return {
         "duet-choice-card-collapsible": true,
         "duet-choice-card-collapsible-expanded": this.checked,
+        "duet-choice-card-collapsed": !this.checked,
         "duet-choice-card-collapsible-disabled": this.disabled || this.groupDisabled ? true : false,
         "duet-theme-turva": this.theme === "turva",
       };
@@ -260,7 +287,7 @@ export class DuetChoice {
             collapsible: this.collapsible,
             "duet-p-0": this.padding === "none",
           } },
-          h("input", { "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all", class: "duet-choice-input", type: this.type, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, disabled: this.disabled || this.groupDisabled, required: this.required, id: identifier, name: this.name, value: this.value, checked: this.checked, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedby(), "aria-flowto": this.hasInfo ? this.nativeInfoButton : "", onKeyDown: this.handleKeyDown, ref: input => (this.nativeInput = input) }),
+          h("input", { class: "duet-choice-input", type: this.type, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, disabled: this.disabled || this.groupDisabled, required: this.required, id: identifier, name: this.name, value: this.value, checked: this.checked, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedby(), onKeyDown: this.handleKeyDown, ref: input => (this.nativeInput = input) }),
           h("label", { htmlFor: identifier, class: { "duet-choice-label": true, "no-hover": this.isHovering }, onClick: this.onClick },
             this.icon && (h("div", { class: "duet-choice-card-icon" },
               h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))),
@@ -272,16 +299,26 @@ export class DuetChoice {
               h("duet-spacer", { size: "xx-small" }),
               h("slot", { name: "additional" }))),
             h("div", { class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && h("div", { class: "duet-checkmark" })))),
-        this.hasInfo && !this.collapsible && (h("button", { class: {
+        this.hasInfo && !this.collapsible && (h("button", { ref: button => (this.infoButtonEl = button), id: this.infoButtonId, class: {
             "duet-choice-info-toggle": true,
             "duet-theme-turva": this.theme === "turva",
-          }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onClick: this.toggleInfo, disabled: this.disabled || this.groupDisabled, "aria-expanded": this.isInfoOpen ? "true" : "false", "aria-controls": this.infoId, "aria-flowto": this.infoId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button" },
+          }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onClick: this.toggleInfo, disabled: this.disabled || this.groupDisabled, "aria-expanded": this.isInfoOpen ? "true" : "false", "aria-label": `${this.infoLabel} ${this.label}`, "aria-controls": this.expandId, "aria-flowto": this.expandId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button" },
           h("duet-visually-hidden", { "aria-hidden": !this.isBlurred ? "true" : "false" }, this.accessibleLabelInfoButton),
           h("div", { class: "duet-choice-info-icon" },
             h("duet-icon", { icon: infoIcon.svg, margin: "none", size: "small", color: "currentColor" }))))),
-      h("div", { "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all", role: this.hasInfo && !this.collapsible ? "note" : "none", class: this.getClassNames(), id: this.hasInfo ? this.infoId : this.collapsible ? this.collapsibleId : "" },
-        this.hasInfo && !this.collapsible && h("slot", { name: "info" }),
-        !this.hasInfo && h("slot", null))));
+      this.collapsible || this.hasInfo ? (h("div", { class: this.getClassNames(), id: this.expandId },
+        h("span", { class: {
+            "duet-choice-section-visible": this.collapsible ? this.checked : this.isInfoOpen,
+            "duet-choice-section-hidden": this.collapsible ? !this.checked : !this.isInfoOpen,
+          } },
+          h("span", { id: this.headerId },
+            h("slot", { name: "header" })),
+          this.hasInfo ? (h("span", null,
+            h("span", { "aria-relevant": "all", "aria-atomic": "true", "aria-live": this.isInfoOpen ? "polite" : "off" },
+              h("slot", { name: "info" })),
+            h("slot", null))) : (h("span", null,
+            h("slot", null)))),
+        this.isInfoOpen && h(FocusGuard, { moveFocusTo: this.infoButtonEl }))) : null));
   }
   static get is() { return "duet-choice"; }
   static get encapsulation() { return "scoped"; }
@@ -368,8 +405,8 @@ export class DuetChoice {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
           }],
         "text": "Accessible label that is read for screen reader users in the info toggle trigger button.\nNot visible for normal users."
       },
@@ -440,7 +477,7 @@ export class DuetChoice {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Indicates the id of a component that describes the choice."
+        "text": "Indicates the id of a component that describes the choice.\nif this is set to an empty string it will prevent screenreaders from flowing to a collapsible content\nand can be used as an escape hatch if that behaviour is undesired."
       },
       "attribute": "accessible-described-by",
       "reflect": false
@@ -671,8 +708,8 @@ export class DuetChoice {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Determines whether the control is displayed horizontally or vertically within\na group.",
-            "name": "internal"
+            "name": "internal",
+            "text": "Determines whether the control is displayed horizontally or vertically within\na group."
           }],
         "text": ""
       },
@@ -691,8 +728,8 @@ export class DuetChoice {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Determines, whether the control is disabled from the parent group.",
-            "name": "internal"
+            "name": "internal",
+            "text": "Determines, whether the control is disabled from the parent group."
           }],
         "text": ""
       },
@@ -711,8 +748,8 @@ export class DuetChoice {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Determines whether the group has responsive behavior",
-            "name": "internal"
+            "name": "internal",
+            "text": "Determines whether the group has responsive behavior"
           }],
         "text": ""
       },
@@ -754,6 +791,53 @@ export class DuetChoice {
       "attribute": "required",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "infoLabelDefaults": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
+        "references": {
+          "DuetLangObject": {
+            "location": "import",
+            "path": "../../utils/language-utils"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "{ fi: \"pp.kk.vvvv\", en: \"dd.mm.yyyy\", sv: \"dd.mm.\u00E5\u00E5\u00E5\u00E5\" }"
+          }],
+        "text": "Placeholder defaults"
+      },
+      "attribute": "accessible-label-info-default",
+      "reflect": false,
+      "defaultValue": "{\n    fi: \"Lis\u00E4tietoja\",\n    en: \"More information about\",\n    sv: \"Mera information om\",\n  }"
+    },
+    "infoLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "{\nfi: \"Lis\u00E4tietoja\",\nen: \"More information about\",\nsv: \"Mera information om\",\n}"
+          }],
+        "text": "Hint text to display before the user types into the date picker input."
+      },
+      "attribute": "info-label",
+      "reflect": false,
+      "defaultValue": "getLocaleString(this.infoLabelDefaults, getLanguage())"
     }
   }; }
   static get states() { return {

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

@@ -33,11 +33,11 @@ export class DuetChoiceGroup {
     /**
      * Additional caption to show inside the label of the choice group.
      */
-    this.caption = "";
+    this.caption = undefined;
     /**
      * Tooltip to display next to the label of the choice group.
      */
-    this.tooltip = "";
+    this.tooltip = undefined;
     /**
      * With direction setting you can force the tooltip to always open towards left
      * or right instead of automatically determining the direction.
@@ -309,7 +309,7 @@ export class DuetChoiceGroup {
       },
       "attribute": "caption",
       "reflect": false,
-      "defaultValue": "\"\""
+      "defaultValue": "undefined"
     },
     "tooltip": {
       "type": "string",
@@ -327,7 +327,7 @@ export class DuetChoiceGroup {
       },
       "attribute": "tooltip",
       "reflect": false,
-      "defaultValue": "\"\""
+      "defaultValue": "undefined"
     },
     "tooltipDirection": {
       "type": "string",

package/lib/collection/components/duet-date-picker/duet-date-picker.js

@@ -47,14 +47,14 @@ export class DuetDatePicker {
      */
     this.margin = "auto";
     /**
-     * The currently active language. This setting changes the month/year/day
+     * The currently active language. This setting changes the month/year/day.
      * names and button labels as well as all screen reader labels.
-     * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+     * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing.
      * @default "fi"
      */
     this.language = getLanguage();
     /**
-     * Placeholder defaults
+     * Placeholder defaults.
      * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
      */
     this.placeholderDefaults = {
@@ -117,7 +117,7 @@ export class DuetDatePicker {
      */
     this.min = "";
     /**
-     * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD
+     * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
      * This setting can be used alone or together with the min property.
      */
     this.max = "";
@@ -559,7 +559,7 @@ export class DuetDatePicker {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Caption (underneath label) that can be set as a way of adding extra information"
+        "text": "Caption (underneath label) that can be set as a way of adding extra information."
       },
       "attribute": "caption",
       "reflect": false
@@ -604,13 +604,13 @@ export class DuetDatePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing."
           }, {
-            "text": "\"fi\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"fi\""
           }],
-        "text": "The currently active language. This setting changes the month/year/day\nnames and button labels as well as all screen reader labels."
+        "text": "The currently active language. This setting changes the month/year/day.\nnames and button labels as well as all screen reader labels."
       },
       "attribute": "language",
       "reflect": false,
@@ -633,10 +633,10 @@ export class DuetDatePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{ fi: \"pp.kk.vvvv\", en: \"dd.mm.yyyy\", sv: \"dd.mm.\u00E5\u00E5\u00E5\u00E5\" }",
-            "name": "default"
+            "name": "default",
+            "text": "{ fi: \"pp.kk.vvvv\", en: \"dd.mm.yyyy\", sv: \"dd.mm.\u00E5\u00E5\u00E5\u00E5\" }"
           }],
-        "text": "Placeholder defaults"
+        "text": "Placeholder defaults."
       },
       "attribute": "placeholder-default",
       "reflect": false,
@@ -654,8 +654,8 @@ export class DuetDatePicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{ fi: \"pp.kk.vvvv\", en: \"dd.mm.yyyy\", sv: \"dd.mm.\u00E5\u00E5\u00E5\u00E5\" }",
-            "name": "default"
+            "name": "default",
+            "text": "{ fi: \"pp.kk.vvvv\", en: \"dd.mm.yyyy\", sv: \"dd.mm.\u00E5\u00E5\u00E5\u00E5\" }"
           }],
         "text": "Hint text to display before the user types into the date picker input."
       },
@@ -949,7 +949,7 @@ export class DuetDatePicker {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD\nThis setting can be used alone or together with the min property."
+        "text": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property."
       },
       "attribute": "max",
       "reflect": false,

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

@@ -0,0 +1,32 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+:host button {
+  display: flex;
+  align-content: space-between;
+  justify-content: center;
+  min-width: 32px;
+  max-width: 32px;
+  height: 100%;
+  min-height: 32px;
+  max-height: 32px;
+  padding: 0;
+  margin: 0;
+  cursor: pointer !important;
+  background-color: transparent;
+  border: 1px solid;
+  border-radius: 50%;
+}
+:host button duet-icon {
+  align-self: center;
+}