@duetds/components 4.32.0 → 4.34.0

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

@@ -5,18 +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.expandId = createID("DuetChoiceExpand");
+    this.headerId = createID("DuetChoiceHeader");
+    this.infoButtonId = createID("DuetChoiceInfoButton");
     /**
      * State() variables
      * Inlined decorator, alphabetical order.
@@ -94,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;
     };
@@ -168,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']");
   }
   /**
@@ -188,8 +212,11 @@ export class DuetChoice {
   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
@@ -203,7 +230,12 @@ export class DuetChoice {
       return this.accessibleDescribedBy;
     }
     if (this.collapsible || this.hasInfo) {
-      return this.expandId;
+      if (this.hasHeader) {
+        return this.headerId;
+      }
+      else {
+        return this.expandId;
+      }
     }
     return null;
   }
@@ -260,17 +292,6 @@ export class DuetChoice {
             this.icon && (h("div", { class: "duet-choice-card-icon" },
               h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))),
             this.label,
-            this.hasInfo ||
-              // this is an incredibly dirty way of both hiding the expanded / collapsed state text
-              // and an extremely bad way of notifying any screenreaders about state - unfortunately
-              // this is extremely difficult to do consistently across browsers so this hack is the best way todo it
-              (this.collapsible && (h("span", { lang: "en", style: { opacity: "0", pointerEvents: "none", fontSize: "0", lineHeight: "0" } }, this.collapsible
-                ? this.checked
-                  ? ", Expanded"
-                  : ", Collapsed"
-                : this.isInfoOpen
-                  ? ", Expanded"
-                  : ", Collapsed"))),
             this.caption && (h("div", null,
               h("duet-spacer", { size: "xx-small" }),
               h("duet-caption", { margin: "none", selected: this.checked }, this.caption))),
@@ -278,10 +299,10 @@ 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.expandId, "aria-flowto": this.expandId, 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" }))))),
@@ -289,10 +310,15 @@ export class DuetChoice {
         h("span", { class: {
             "duet-choice-section-visible": this.collapsible ? this.checked : this.isInfoOpen,
             "duet-choice-section-hidden": this.collapsible ? !this.checked : !this.isInfoOpen,
-          } }, this.hasInfo ? (h("span", null,
-          h("slot", { name: "info" }),
-          h("slot", null))) : (h("span", null,
-          h("slot", null)))))) : null));
+          } },
+          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"; }
@@ -765,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-collapsible/duet-collapsible.js

@@ -8,6 +8,9 @@ import { createID } from "../../utils/create-id";
 import { isKeyboardClick } from "../../utils/keyboard-utils";
 import { sanitizeString } from "../../utils/string-utils";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
+/**
+ * @part duet-collapsible-heading-content - piercing selector for styling the heading content
+ */
 export class DuetCollapsible {
   constructor() {
     this.id = createID("DuetCollapsible");
@@ -128,7 +131,7 @@ export class DuetCollapsible {
         }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", tabindex: "0", ref: button => (this.nativeButton = button), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown },
         h("div", { class: "duet-collapsible-heading-icon" },
           h("duet-icon", { margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary", size: this.getEquivalentIconSize(), icon: icon.svg })),
-        h("div", { class: "duet-collapsible-heading-content" }, this.heading)),
+        h("div", { class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading)),
       h("div", { id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" } },
         h("slot", null))));
   }

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
@@ -605,12 +605,12 @@ export class DuetDatePicker {
       "docs": {
         "tags": [{
             "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": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing."
           }, {
             "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,
@@ -636,7 +636,7 @@ export class DuetDatePicker {
             "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,
@@ -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;
+}

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

@@ -0,0 +1,225 @@
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, Event, h, Prop, State } from "@stencil/core";
+import { getLocaleString } from "../../utils/language-utils";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
+import { getColorByName } from "../../utils/token-utils";
+export class DuetEditableTableButton {
+  constructor() {
+    this.isHovering = false;
+    /**
+     * Theme of the empty state component.
+     */
+    this.theme = undefined;
+    /**
+     * action items passed from host component
+     * @internal
+     */
+    this.actions = undefined;
+    /**
+     * uid that gets passed along when the action is emitted
+     * @internal
+     */
+    this.uid = "";
+    /**
+     * group associated with action
+     * @internal
+     */
+    this.group = "";
+    /**
+     * key of the item in the map
+     * @internal
+     */
+    this.keyName = "";
+    this.onMouseEnter = () => {
+      this.isHovering = true;
+    };
+    this.onMouseLeave = () => {
+      this.isHovering = false;
+    };
+    this.getColours = (byName = false) => {
+      let colorHover = this.actions.color_hover;
+      let colorBlur = this.actions.color;
+      if (byName) {
+        colorHover = getColorByName(this.actions.color_hover, this.theme);
+        colorBlur = getColorByName(this.actions.color, this.theme);
+      }
+      return this.isHovering ? colorHover : colorBlur;
+    };
+  }
+  /**
+   /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   /**
+   * private functions
+   */
+  emitActionEvent(ev) {
+    this.duetEditableItemAction.emit({
+      originalEvent: ev,
+      uid: this.uid,
+      group: this.group,
+      action: this.actions.id,
+      keyName: this.keyName,
+      component: "duet-editable-table-item",
+    });
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h("button", { style: {
+        "border-color": this.getColours(true),
+      }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, role: "menuitem", class: "duet-editable-table-actions-items-button", "aria-label": this.actions.label ? getLocaleString(this.actions.label) : undefined, onClick: ev => this.emitActionEvent(ev) },
+      h("duet-icon", { class: "duet-editable-table-actions-items-icon", size: "x-small", name: this.actions.icon, color: this.getColours(), margin: "none" })));
+  }
+  static get is() { return "duet-editable-table-button"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["duet-editable-table-button.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["duet-editable-table-button.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 empty state component."
+      },
+      "attribute": "theme",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "actions": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetEditableTableActionButtonItems",
+        "resolved": "{ icon: string; color: string; color_hover: string; id: string; map?: string[]; label?: DuetLangObject; }",
+        "references": {
+          "DuetEditableTableActionButtonItems": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": "action items passed from host component"
+      },
+      "defaultValue": "undefined"
+    },
+    "uid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": "uid that gets passed along when the action is emitted"
+      },
+      "attribute": "uid",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "group": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": "group associated with action"
+      },
+      "attribute": "group",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "keyName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": "key of the item in the map"
+      },
+      "attribute": "key-name",
+      "reflect": false,
+      "defaultValue": "\"\""
+    }
+  }; }
+  static get states() { return {
+    "isHovering": {}
+  }; }
+  static get events() { return [{
+      "method": "duetEditableItemAction",
+      "name": "duetEditableItemAction",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when any action is clicked"
+      },
+      "complexType": {
+        "original": "DuetEditableTableItemEvent",
+        "resolved": "{ originalEvent?: Event; uid: string | number | bigint; keyName: string | number | bigint; action: string; group: string; component: \"duet-editable-table-item\"; }",
+        "references": {
+          "DuetEditableTableItemEvent": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,36 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+:host {
+  display: table-row;
+  height: 32px;
+}
+
+.duet-editable-table-content, .duet-editable-table-actions {
+  height: 32px;
+  padding: 12px 0;
+  vertical-align: middle;
+  break-word: break-all;
+  border-bottom: 1px solid #e1e3e6;
+}
+.duet-editable-table-actions-items {
+  display: flex;
+  justify-content: flex-end;
+}
+.duet-editable-table-actions-items duet-editable-table-button {
+  padding-left: 8px;
+}
+.duet-editable-table .editable-item-small {
+  font-size: 0.75rem;
+  font-weight: 400;
+}