@duetds/components 5.3.5 → 5.4.2

package/lib/collection/components/duet-action-button/duet-action-button.js

@@ -7,7 +7,7 @@ import { createID } from "../../utils/create-id";
 import { debounce } from "../../utils/js-utils";
 import { isKeyboardClick } from "../../utils/keyboard-utils";
 import { getLocaleString } from "../../utils/language-utils";
-import { getColorByName, shadeRGBColor } from "../../utils/token-utils";
+import { capitalizeFirstLetter, getColorByName, shadeRGBColor } from "../../utils/token-utils";
 /**
  * @slot default - slot inside an invisible element, this can be used to enhance accessibility
  * @part button - this part enables style overrides for the button
@@ -15,6 +15,7 @@ import { getColorByName, shadeRGBColor } from "../../utils/token-utils";
  */
 export class DuetActionButton {
   constructor() {
+    this.listId = createID("duet-action-button");
     this.numbersStore = "";
     /**
      * Theme of the pagination.
@@ -62,6 +63,13 @@ export class DuetActionButton {
      * to $size-icon-medium on mobile viewports. Example: "color-primary".
      */
     this.background = "";
+    /**
+     * Title of the action button (shows as DOM tooltip when hovering)
+     * if set to true, this will try to add a best-guess title based on action-name
+     * if set to a string the string is used
+     * if set to false nothing is set
+     */
+    this.accessibleTitle = true;
     /**
      * Described By id
      */
@@ -79,7 +87,7 @@ export class DuetActionButton {
      */
     this.accessibleDescription = undefined;
     /**
-     * Default pagination labels
+     * Default accessible labels
      */
     this.accessibleLabelsDefaults = {
       en: {
@@ -93,14 +101,13 @@ export class DuetActionButton {
       },
     };
     /**
-     * Default pagination labels
+     * Default accessible labels
      */
     this.accessibleLabels = getLocaleString(this.accessibleLabelsDefaults);
     /**
      * Used to indicate which dom element with ID this element controls
      */
     this.accessibleControls = "";
-    this.listId = createID("duet-action-button");
     /**
      * Private methods.
      */
@@ -122,6 +129,17 @@ export class DuetActionButton {
       this.emitPageEvent(e);
     }
   }
+  //return readable title for the action-button
+  getTitle() {
+    let titleString = "";
+    if (typeof this.accessibleTitle === "string") {
+      titleString = this.accessibleTitle;
+    }
+    if (this.accessibleTitle === true) {
+      titleString = capitalizeFirstLetter(`${this.actionName}`);
+    }
+    return titleString;
+  }
   //set update current when mouse click on page number
   async onMouseHandler(e) {
     e.preventDefault();
@@ -169,7 +187,7 @@ export class DuetActionButton {
           "duet-action-button": true,
           "duet-action-button--disabled": this.disabled,
           [`duet-action-button--${this.theme}`]: this.theme !== "",
-        }, type: "button", onClick: e => this.onMouseHandler(e), "aria-label": this.accessibleLabels.label, "aria-labelledby": this.accessibleLabelledBy, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, "aria-details": this.accessibleDetails, "aria-controls": this.accessibleControls },
+        }, type: "button", onClick: e => this.onMouseHandler(e), "aria-label": this.accessibleLabels.label, "aria-labelledby": this.accessibleLabelledBy, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, "aria-details": this.accessibleDetails, "aria-controls": this.accessibleControls, title: this.getTitle() },
         h("duet-icon", { part: "icon", name: this.iconName, color: this.iconColor, margin: "none", size: this.iconSize }),
         h("duet-visually-hidden", null,
           h("slot", null)))));
@@ -386,6 +404,24 @@ export class DuetActionButton {
       "reflect": false,
       "defaultValue": "\"\""
     },
+    "accessibleTitle": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "string | boolean",
+        "resolved": "boolean | string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Title of the action button (shows as DOM tooltip when hovering)\nif set to true, this will try to add a best-guess title based on action-name\nif set to a string the string is used\nif set to false nothing is set"
+      },
+      "attribute": "title",
+      "reflect": false,
+      "defaultValue": "true"
+    },
     "accessibleDescribedBy": {
       "type": "string",
       "mutable": false,
@@ -475,7 +511,7 @@ export class DuetActionButton {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Default pagination labels"
+        "text": "Default accessible labels"
       },
       "defaultValue": "{\n    en: {\n      label: \"Click to activate action\",\n    },\n    fi: {\n      label: \"Klikkaa toiminnon aktivointiin\",\n    },\n    sv: {\n      label: \"Klicka f\u00F6r att aktivera \u00E5tg\u00E4rd\",\n    },\n  }"
     },
@@ -495,7 +531,7 @@ export class DuetActionButton {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Default pagination labels"
+        "text": "Default accessible labels"
       },
       "defaultValue": "getLocaleString(\n    this.accessibleLabelsDefaults\n  )"
     },
@@ -529,7 +565,7 @@ export class DuetActionButton {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted a page selection has been made"
+        "text": "Emitted when an action has been invoked"
       },
       "complexType": {
         "original": "DuetActionButtonEvent",

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { Component, Element, h, Host, Prop, Watch } from "@stencil/core";
+import { Build, Component, Element, h, Host, Prop, Watch } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { findCheckedOption, watchForOptions } from "../../utils/watch-options";
 export class DuetChoiceGroup {
@@ -69,6 +69,9 @@ export class DuetChoiceGroup {
    * Component lifecycle events.
    */
   async connectedCallback() {
+    if (Build.isServer) {
+      return;
+    }
     const el = this.element;
     if (this.value === undefined) {
       const choice = findCheckedOption(el, ":scope > duet-choice");
@@ -92,6 +95,9 @@ export class DuetChoiceGroup {
     this.updateChoices();
   }
   disconnectedCallback() {
+    if (Build.isServer) {
+      return;
+    }
     if (this.mutationO) {
       this.mutationO.disconnect();
       this.mutationO = undefined;

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

@@ -137,7 +137,7 @@ export class DuetCollapsible {
         h("slot", null))));
   }
   static get is() { return "duet-collapsible"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() { return {
     "$": ["duet-collapsible.scss"]
   }; }

package/lib/collection/components/duet-header/duet-header-icon.js

@@ -4,6 +4,6 @@
 import { h } from "@stencil/core";
 export const DuetHeaderIcon = (props, _children) => {
   const iconSize = props.iconSize ? props.iconSize : "x-small";
-  return (h("span", { class: "duet-header-icon" },
+  return (h("span", { class: `duet-header-icon ${props.class ? props.class : ""}` },
     h("duet-icon", { margin: "none", size: iconSize, icon: props.icon, color: "currentColor" })));
 };

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

@@ -39,12 +39,12 @@
 }
 
 @supports (position: -webkit-sticky) {
-  :host(.duet-header-multi-level-desktop-variation) {
+  :host(.duet-header-multi-level-variation) {
     top: 0;
   }
 }
 @supports (position: sticky) {
-  :host(.duet-header-multi-level-desktop-variation) {
+  :host(.duet-header-multi-level-variation) {
     top: 0;
   }
 }
@@ -578,6 +578,20 @@ button {
     color: #c60c30;
   }
 }
+.duet-header-button.duet-header-logout .duet-header-icon.mobile {
+  display: block;
+}
+.duet-header-button.duet-header-logout .duet-header-icon.desktop {
+  display: none;
+}
+@media (min-width: 62em) {
+  .duet-header-button.duet-header-logout .duet-header-icon.mobile {
+    display: none;
+  }
+  .duet-header-button.duet-header-logout .duet-header-icon.desktop {
+    display: block;
+  }
+}
 .duet-header-utils .duet-header-button.duet-header-logout {
   align-self: center;
   justify-content: center;
@@ -1011,61 +1025,73 @@ button {
   opacity: 1;
 }
 
-.duet-header-multi-level-desktop {
+@media (min-width: 62em) {
+  .duet-header-items-have-sub-items {
+    display: none;
+  }
+}
+
+.duet-header-multi-level {
+  display: none;
   height: 6rem;
 }
-.duet-header-multi-level-desktop .duet-header-top {
+@media (min-width: 62em) {
+  .duet-header-multi-level {
+    display: block;
+  }
+}
+.duet-header-multi-level .duet-header-top {
   justify-content: space-between;
   height: 6rem;
 }
-.duet-header-multi-level-desktop .duet-header-button {
+.duet-header-multi-level .duet-header-button {
   height: 6rem;
 }
-.duet-header-multi-level-desktop .logo-and-segment {
+.duet-header-multi-level .logo-and-segment {
   display: flex;
   flex-basis: 0;
   flex-direction: column;
   flex-grow: 1;
   padding-top: 1rem;
 }
-.duet-header-multi-level-desktop .logo-and-segment .duet-header-dropdown {
+.duet-header-multi-level .logo-and-segment .duet-header-dropdown {
   z-index: 400;
   margin-left: 2rem;
 }
-.duet-header-multi-level-desktop .logo-and-segment .duet-header-dropdown .duet-header-dropdown-content {
+.duet-header-multi-level .logo-and-segment .duet-header-dropdown .duet-header-dropdown-content {
   background: #f3f9fc;
 }
-.duet-header-multi-level-desktop .logo-and-segment button {
+.duet-header-multi-level .logo-and-segment button {
   align-items: flex-start;
   height: 2rem;
   font-weight: 600;
   line-height: 1rem;
 }
-.duet-header-multi-level-desktop .logo-and-segment button::before {
+.duet-header-multi-level .logo-and-segment button::before {
   display: none;
 }
-.duet-header-multi-level-desktop .logo-and-segment .duet-header-caret {
+.duet-header-multi-level .logo-and-segment .duet-header-caret {
   top: 25%;
 }
-.duet-header-multi-level-desktop-nav {
+.duet-header-multi-level-nav {
   display: flex;
 }
-.duet-header-multi-level-desktop-nav .duet-header-dropdown {
+.duet-header-multi-level-nav .duet-header-dropdown {
   position: static;
 }
-.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-toggle {
+.duet-header-multi-level-nav .duet-header-dropdown .duet-header-dropdown-toggle {
   z-index: 400;
   padding-right: 1rem;
   font-size: 1rem;
   font-weight: 600;
 }
-.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-toggle.active {
+.duet-header-multi-level-nav .duet-header-dropdown .duet-header-dropdown-toggle.active {
   color: #0077b3;
 }
-.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-toggle.active:not(.open) .duet-header-caret {
+.duet-header-multi-level-nav .duet-header-dropdown .duet-header-dropdown-toggle.active:not(.open) .duet-header-caret {
   transform: translateY(-50%) rotate(0deg);
 }
-.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content {
+.duet-header-multi-level-nav .duet-header-dropdown .duet-header-dropdown-content {
   z-index: 399;
   display: flex;
   justify-content: center;
@@ -1078,7 +1104,7 @@ button {
   box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07);
   transition: none;
 }
-.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content a {
+.duet-header-multi-level-nav .duet-header-dropdown .duet-header-dropdown-content a {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -1090,7 +1116,7 @@ button {
   padding: 0 1rem !important;
   font-weight: 600;
 }
-.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content a::after {
+.duet-header-multi-level-nav .duet-header-dropdown .duet-header-dropdown-content a::after {
   position: absolute;
   top: auto;
   bottom: 0;
@@ -1103,82 +1129,82 @@ button {
   transition: 300ms ease;
   transform: translateY(3px);
 }
-.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content a.active {
+.duet-header-multi-level-nav .duet-header-dropdown .duet-header-dropdown-content a.active {
   font-weight: 600;
   color: #0077b3;
   background: none;
 }
-.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content a.active::after {
+.duet-header-multi-level-nav .duet-header-dropdown .duet-header-dropdown-content a.active::after {
   transform: translateY(0);
 }
-.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content a .duet-header-icon {
+.duet-header-multi-level-nav .duet-header-dropdown .duet-header-dropdown-content a .duet-header-icon {
   margin: 0;
 }
-.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content .duet-header-badge {
+.duet-header-multi-level-nav .duet-header-dropdown .duet-header-dropdown-content .duet-header-badge {
   position: absolute;
   margin-top: -2rem;
   margin-right: -2.25rem;
 }
-.duet-header-multi-level-desktop-nav button::before {
+.duet-header-multi-level-nav button::before {
   display: none;
 }
-.duet-header-multi-level-desktop-nav .duet-header-caret {
+.duet-header-multi-level-nav .duet-header-caret {
   right: 1%;
 }
-.duet-header-multi-level-desktop-utils {
+.duet-header-multi-level-utils {
   display: flex;
   flex-basis: 0;
   flex-grow: 1;
   justify-content: flex-end;
 }
-.duet-header-multi-level-desktop-utils > :last-child::before {
+.duet-header-multi-level-utils > :last-child::before {
   display: none;
 }
-.duet-header-multi-level-desktop-utils > :last-child.duet-header-dropdown .duet-header-button::before {
+.duet-header-multi-level-utils > :last-child.duet-header-dropdown .duet-header-button::before {
   display: none;
 }
-.duet-header-multi-level-desktop-utils .duet-header-dropdown {
+.duet-header-multi-level-utils .duet-header-dropdown {
   z-index: 400;
 }
-.duet-header-multi-level-desktop-utils .duet-header-dropdown .duet-header-dropdown-content {
+.duet-header-multi-level-utils .duet-header-dropdown .duet-header-dropdown-content {
   background: #f3f9fc;
 }
-.duet-header-multi-level-desktop-utils .duet-header-button-label,
-.duet-header-multi-level-desktop-utils .duet-header-dropdown-label {
+.duet-header-multi-level-utils .duet-header-button-label,
+.duet-header-multi-level-utils .duet-header-dropdown-label {
   display: none;
 }
 @media (min-width: 64.0625em) {
-  .duet-header-multi-level-desktop-utils .duet-header-button-label,
-.duet-header-multi-level-desktop-utils .duet-header-dropdown-label {
+  .duet-header-multi-level-utils .duet-header-button-label,
+.duet-header-multi-level-utils .duet-header-dropdown-label {
     display: initial;
   }
 }
-.duet-header-multi-level-desktop .duet-theme-turva .logo-and-segment .duet-header-dropdown {
+.duet-header-multi-level .duet-theme-turva .logo-and-segment .duet-header-dropdown {
   margin-left: 0;
 }
-.duet-header-multi-level-desktop .duet-theme-turva .logo-and-segment .duet-header-dropdown-toggle {
+.duet-header-multi-level .duet-theme-turva .logo-and-segment .duet-header-dropdown-toggle {
   padding-left: 0.5rem;
 }
-.duet-header-multi-level-desktop .duet-theme-turva .logo-and-segment .duet-header-dropdown .duet-header-dropdown-content {
+.duet-header-multi-level .duet-theme-turva .logo-and-segment .duet-header-dropdown .duet-header-dropdown-content {
   background: #f5f5f7;
 }
-.duet-header-multi-level-desktop .duet-theme-turva .duet-header-multi-level-desktop-utils > :nth-last-child(2).duet-header-dropdown .duet-header-button::before {
+.duet-header-multi-level .duet-theme-turva .duet-header-multi-level-utils > :nth-last-child(2).duet-header-dropdown .duet-header-button::before {
   display: none;
 }
-.duet-header-multi-level-desktop .duet-theme-turva .duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-toggle.active {
+.duet-header-multi-level .duet-theme-turva .duet-header-multi-level-nav .duet-header-dropdown .duet-header-dropdown-toggle.active {
   color: #c60c30;
 }
-.duet-header-multi-level-desktop .duet-theme-turva .duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content {
+.duet-header-multi-level .duet-theme-turva .duet-header-multi-level-nav .duet-header-dropdown .duet-header-dropdown-content {
   background: #f5f5f7;
   border-color: #e4e4e6;
 }
-.duet-header-multi-level-desktop .duet-theme-turva .duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content a::after {
+.duet-header-multi-level .duet-theme-turva .duet-header-multi-level-nav .duet-header-dropdown .duet-header-dropdown-content a::after {
   background: #c60c30;
 }
-.duet-header-multi-level-desktop .duet-theme-turva .duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content a.active {
+.duet-header-multi-level .duet-theme-turva .duet-header-multi-level-nav .duet-header-dropdown .duet-header-dropdown-content a.active {
   color: #c60c30;
   background: none;
 }
-.duet-header-multi-level-desktop .duet-theme-turva .duet-header-multi-level-desktop-utils .duet-header-dropdown .duet-header-dropdown-content {
+.duet-header-multi-level .duet-theme-turva .duet-header-multi-level-utils .duet-header-dropdown .duet-header-dropdown-content {
   background: #f5f5f7;
 }