@duetds/components 6.9.10 → 6.10.1

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

@@ -1,8 +1,11 @@
 /*!
  * Built with Duet Design System
  */
-import { h, Host } from "@stencil/core";
+import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+/**
+ * @slot collapse-button-label - This is to label collapse button.
+ */
 export class DuetScrollable {
   constructor() {
     /**
@@ -11,6 +14,7 @@ export class DuetScrollable {
     this.currentIndex = 0;
     this.tabListElement = undefined;
     this.tabListClass = "duet-scrollable-list";
+    this.hasCollapseButtonLabelSlot = false;
     this.resizeObserver = new ResizeObserver(entries => {
       var _a, _b, _c, _d;
       // otherwise, something is wrong, expecting 1 element only
@@ -21,12 +25,18 @@ export class DuetScrollable {
         this.isTabContentSmallerThanWrapper = scrollWidth > currentWidth + 5;
       }
     });
+    this.collapsedOnClick = () => {
+      this.collapsed = !this.collapsed;
+    };
     this.tablistAtStart = true;
     this.isTabContentSmallerThanWrapper = false;
     this.tablistAtEnd = false;
     this.childrenData = {};
     this.theme = "";
     this.identifier = "";
+    this.collapsed = false;
+    this.buttons = true;
+    this.center = false;
     this.selected = 0;
   }
   watchPropHandler(newValue) {
@@ -37,7 +47,12 @@ export class DuetScrollable {
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
-    const slotted = this.host.children;
+    this.hasCollapseButtonLabelSlot = Build.isServer
+      ? Array.from(this.host.children).filter(el => el.matches("[slot='collapse-button-label']")).length > 0
+      : !!this.host.querySelector(":scope > [slot='collapse-button-label']");
+    const slotted = Build.isServer
+      ? Array.from(this.host.children).filter(el => el.matches("[slot='collapse-button-label']"))
+      : this.host.querySelectorAll(":scope > :not([slot='collapse-button-label'])");
     this.childrenData = { hasChildren: slotted && slotted.length > 0, numberOfChildren: slotted && slotted.length };
   }
   componentDidLoad() {
@@ -64,6 +79,9 @@ export class DuetScrollable {
     return xValues;
   }
   updateScrollButtons(container = this.tabListElement) {
+    if (!this.buttons) {
+      return;
+    }
     if (container.scrollLeft <= 0) {
       this.tablistAtStart = true;
     }
@@ -129,15 +147,25 @@ export class DuetScrollable {
     return (h(Host, { class: {
         "duet-theme-turva": this.theme === "turva",
         "duet-theme-default": this.theme === "default",
-      } }, h("div", { class: "duet-scrollable-items" }, h("button", { part: `${this.identifier}-button-left`, "aria-hidden": "true", class: {
+      } }, this.hasCollapseButtonLabelSlot && (h("div", { class: {
+        collapse: true,
+        hide: !this.isTabContentSmallerThanWrapper && !this.collapsed,
+      } }, h("duet-button", { variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { name: "collapse-button-label" })))), h("div", { class: {
+        "duet-scrollable-items": true,
+        buttons: this.buttons,
+        center: this.center,
+      } }, h("button", { part: `${this.identifier}-button-left`, "aria-hidden": "true", class: {
         "duet-scrollable-button": true,
         "duet-scrollable-button--left": true,
         "duet-scrollable-button--occluded": !this.isTabContentSmallerThanWrapper,
-      }, onClick: () => this.scrollLeft(), disabled: this.tablistAtStart, tabindex: "-1" }, h("duet-icon", { name: "action-arrow-left-small", size: "small", margin: "none" })), h("div", { class: this.tabListClass, onScroll: () => this.updateScrollButtons(), ref: element => (this.tabListElement = element) }, h("slot", null)), h("button", { part: `${this.identifier}-button-right`, "aria-hidden": "true", class: {
+      }, onClick: () => this.scrollLeft(), disabled: this.tablistAtStart, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { name: "action-arrow-left-small", size: "small", margin: "none" })), h("div", { class: {
+        [this.tabListClass]: true,
+        collapsed: this.collapsed,
+      }, onScroll: () => this.updateScrollButtons(), ref: element => (this.tabListElement = element) }, h("slot", null)), h("button", { part: `${this.identifier}-button-right`, "aria-hidden": "true", class: {
         "duet-scrollable-button": true,
         "duet-scrollable-button--right": true,
         "duet-scrollable-button--occluded": !this.isTabContentSmallerThanWrapper,
-      }, onClick: () => this.scrollRight(), disabled: this.tablistAtEnd, tabindex: "-1" }, h("duet-icon", { name: "action-arrow-right-small", size: "small", margin: "none" })))));
+      }, onClick: () => this.scrollRight(), disabled: this.tablistAtEnd, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { name: "action-arrow-right-small", size: "small", margin: "none" })))));
   }
   static get is() { return "duet-scrollable"; }
   static get encapsulation() { return "shadow"; }
@@ -194,6 +222,60 @@ export class DuetScrollable {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "collapsed": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Boolean to collapse scrollable items into normal flow."
+        },
+        "attribute": "collapsed",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "buttons": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether or not include previous and forward buttons. Defaults to true."
+        },
+        "attribute": "buttons",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "center": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Center the scrollable list. Defaults to false."
+        },
+        "attribute": "center",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "selected": {
         "type": "number",
         "mutable": true,

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

@@ -184,7 +184,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectVariation": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         },
@@ -497,7 +497,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectItems": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         },
@@ -646,7 +646,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         }
@@ -666,7 +666,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         }
@@ -686,7 +686,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         }

package/lib/collection/components/duet-shaped-image/duet-shaped-image.css

@@ -0,0 +1,63 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+:host {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
+
+.shaped-image {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
+.shaped-image .shaped-image-mask {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 25%;
+  transform: rotate(var(--rotation));
+}
+.shaped-image .shaped-image-mask .shaped-image-img {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  transform: scale(1.07) rotate(calc(-1 * var(--rotation)));
+  transform-origin: center;
+}
+.shaped-image.duet-theme-turva .shaped-image-mask {
+  transform: none;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
+  -webkit-mask-repeat: no-repeat;
+  mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
+  mask-repeat: no-repeat;
+}
+.shaped-image.duet-theme-turva .shaped-image-mask .shaped-image-img {
+  transform: none;
+}

package/lib/collection/components/duet-shaped-image/duet-shaped-image.js

@@ -0,0 +1,126 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
+export class DuetShapedImage {
+  constructor() {
+    this.theme = "";
+    this.accessibleLabel = undefined;
+    this.src = undefined;
+    this.rotation = 7;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one of the class.
+   */
+  render() {
+    const style = {
+      "--rotation": `${this.rotation}deg`,
+    };
+    return (h(Host, { class: { x: true } }, h("span", { class: {
+        "duet-theme-turva": this.theme === "turva",
+        "shaped-image": true,
+      }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { class: "shaped-image-mask", role: "presentation" }, h("span", { class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
+  }
+  static get is() { return "duet-shaped-image"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-shaped-image.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-shaped-image.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": "\"\""
+      },
+      "accessibleLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds accessible label for the image that is only shown for screen readers."
+        },
+        "attribute": "accessible-label",
+        "reflect": false
+      },
+      "src": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A URL from which to load an image."
+        },
+        "attribute": "src",
+        "reflect": false
+      },
+      "rotation": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "7 | -7",
+          "resolved": "-7 | 7",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"7\""
+            }],
+          "text": "Rotation. Note: in 'turva' theme there's no rotation."
+        },
+        "attribute": "rotation",
+        "reflect": false,
+        "defaultValue": "7"
+      }
+    };
+  }
+}

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

@@ -233,7 +233,7 @@ export class DuetSlideout {
           "references": {
             "DuetSlideoutEventDetails": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-slideout/duet-slideout.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-slideout/duet-slideout.tsx"
             }
           }
         }

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

@@ -49,7 +49,7 @@ export class DuetSpacer {
           "references": {
             "DuetSpacerSize": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-spacer/duet-spacer.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spacer/duet-spacer.tsx"
             }
           }
         },
@@ -95,7 +95,7 @@ export class DuetSpacer {
           "references": {
             "DuetSpacerBreakpoint": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-spacer/duet-spacer.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spacer/duet-spacer.tsx"
             }
           }
         },

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

@@ -95,7 +95,7 @@ export class DuetSpinner {
           "references": {
             "DuetSpinnerSize": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-spinner/duet-spinner.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spinner/duet-spinner.tsx"
             }
           }
         },

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

@@ -193,7 +193,7 @@ export class DuetStep {
           "references": {
             "DuetStepState": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-step/duet-step.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-step/duet-step.tsx"
             }
           }
         },
@@ -270,7 +270,7 @@ export class DuetStep {
           "references": {
             "DuetStepClickEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-step/duet-step.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-step/duet-step.tsx"
             }
           }
         }

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

@@ -223,7 +223,7 @@ export class DuetStepper {
           "references": {
             "DuetStepChangeEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-stepper/duet-stepper.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-stepper/duet-stepper.tsx"
             }
           }
         }

package/lib/collection/components/duet-submenu-bar/duet-submenu-bar.js

@@ -34,7 +34,7 @@ export class DuetSubmenuBar {
       this.open = !open;
     };
     this.mobile = true;
-    this.bodyScroll = false;
+    this.bodyScroll = true;
     this.theme = "";
     this.open = false;
     this.accessibleLabel = undefined;

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

@@ -309,7 +309,7 @@ export class DuetTabGroup {
           "references": {
             "DuetTabVariation": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
             }
           }
         },
@@ -545,7 +545,7 @@ export class DuetTabGroup {
           "references": {
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
             }
           }
         }
@@ -565,7 +565,7 @@ export class DuetTabGroup {
           "references": {
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
             }
           }
         }
@@ -585,7 +585,7 @@ export class DuetTabGroup {
           "references": {
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
             }
           }
         }
@@ -606,7 +606,7 @@ export class DuetTabGroup {
             },
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
             }
           },
           "return": "Promise<void>"

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

@@ -754,7 +754,7 @@ export class DuetTextarea {
           "references": {
             "DuetTextareaEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx"
             }
           }
         }
@@ -774,7 +774,7 @@ export class DuetTextarea {
           "references": {
             "DuetTextareaEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx"
             }
           }
         }
@@ -794,7 +794,7 @@ export class DuetTextarea {
           "references": {
             "DuetTextareaEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx"
             }
           }
         }
@@ -814,7 +814,7 @@ export class DuetTextarea {
           "references": {
             "DuetTextareaEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx"
             }
           }
         }

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

@@ -432,7 +432,7 @@ export class DuetToggle {
           "references": {
             "DuetToggleChangeEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-toggle/duet-toggle.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-toggle/duet-toggle.tsx"
             }
           }
         }

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

@@ -3,7 +3,7 @@
  */
 import { media_query_large, media_query_medium } from "@duetds/tokens/lib/tokens.json";
 import { arrow, computePosition, flip, shift } from "@floating-ui/dom";
-import { h, Host } from "@stencil/core";
+import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
@@ -128,7 +128,9 @@ export class DuetTooltip {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
-    this.updatePlacement();
+    if (!Build.isServer) {
+      this.updatePlacement();
+    }
   }
   componentDidUpdate() {
     switch (this.focusTarget) {
@@ -422,7 +424,7 @@ export class DuetTooltip {
           "references": {
             "DuetTooltipBreakpoint": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tooltip/duet-tooltip.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tooltip/duet-tooltip.tsx"
             }
           }
         },