@duetds/components 4.34.1 → 4.35.0

package/lib/collection/components/duet-breadcrumbs/duet-breadcrumbs.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: block;
+}
+
+.duet-breadcrumbs {
+  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+.duet-breadcrumbs ol {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 10px 16px;
+  color: #00294d;
+  list-style: none;
+  background: #f3f9fc;
+  border-bottom: 1px solid #e1e3e6;
+}
+@media (min-width: 62em) {
+  .duet-breadcrumbs ol {
+    padding: 10px 36px;
+  }
+}
+.duet-breadcrumbs.duet-theme-turva {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+.duet-breadcrumbs.duet-theme-turva ol {
+  color: #171c3a;
+  background: #fcf3f4;
+}
+.duet-breadcrumbs .duet-breadrumbs-arrow {
+  display: inherit;
+  align-items: center;
+  justify-content: center;
+  width: 0.375rem;
+  height: 0.375rem;
+}
+.duet-breadcrumbs .hide {
+  display: none;
+}

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

@@ -0,0 +1,104 @@
+/*!
+ * Built with Duet Design System
+ */
+import arrowRightSmallIcon from "@duetds/icons/lib/assets/action-arrow-right-small";
+import { Build, Component, Element, Fragment, h, Host, Prop, State } from "@stencil/core";
+import { getLocaleString } from "../../utils/language-utils";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
+export class DuetBreadcrumbs {
+  constructor() {
+    this.observers = [];
+    this.breadcrumbsAriaLabel = getLocaleString({
+      fi: "Murupolku",
+      sv: "Ströbröd",
+      en: "Breadcrumbs",
+    });
+    /**
+     * Theme
+     */
+    this.theme = "";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    this.children = Array.from(this.element.children);
+  }
+  connectedCallback() {
+    if (Build.isServer) {
+      return;
+    }
+    Array.from(this.element.children).forEach(child => {
+      const observer = new MutationObserver(() => (this.children = Array.from(this.element.children)));
+      observer.observe(child, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        characterData: true,
+      });
+      this.observers = [...this.observers, observer];
+    });
+  }
+  disconnectedCallback() {
+    if (Build.isServer) {
+      return;
+    }
+    this.observers.forEach(observer => observer.disconnect());
+    this.observers = [];
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, null,
+      h("nav", { "aria-label": this.breadcrumbsAriaLabel, class: {
+          "duet-breadcrumbs": true,
+          "duet-theme-turva": this.theme === "turva",
+        } },
+        h("ol", null, this.children.map((child, index) => (h(Fragment, null,
+          index > 0 && (h("li", { "aria-hidden": "true" },
+            h("duet-icon", { class: "duet-breadrumbs-arrow", size: "auto", icon: arrowRightSmallIcon.svg, margin: "none", color: "currentColor" }))),
+          h("li", { innerHTML: child.outerHTML }),
+          h("div", { class: "hide" },
+            h("slot", null)))))))));
+  }
+  static get is() { return "duet-breadcrumbs"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["duet-breadcrumbs.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["duet-breadcrumbs.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"
+      },
+      "attribute": "theme",
+      "reflect": false,
+      "defaultValue": "\"\""
+    }
+  }; }
+  static get states() { return {
+    "children": {}
+  }; }
+  static get elementRef() { return "element"; }
+}

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

@@ -318,22 +318,40 @@
 .duet-theme-turva .duet-button.negative:focus {
   box-shadow: 0 0 0 1px #171c3a, 0 0 0 4px rgba(255, 255, 255, 0.7);
 }
-.duet-button.destructive {
+.duet-button.destructive-primary {
+  color: white !important;
+  background: #de2362;
+  border-color: #de2362;
+}
+.duet-theme-turva .duet-button.destructive-primary {
+  color: white !important;
+  background: #e02a0d;
+  border-color: #e02a0d;
+}
+.duet-button.destructive-primary:hover {
+  background: #b21c4e;
+  border-color: #b21c4e;
+  box-shadow: 0 4px 20px rgba(34, 34, 34, 0.1);
+}
+.duet-theme-turva .duet-button.destructive-primary:hover {
+  background: #b3220a;
+}
+.duet-button.destructive, .duet-button.destructive-secondary {
   color: #de2362 !important;
   background: white;
   border-color: #de2362;
 }
-.duet-theme-turva .duet-button.destructive {
+.duet-theme-turva .duet-button.destructive, .duet-theme-turva .duet-button.destructive-secondary {
   color: #e02a0d !important;
   background: white;
   border-color: #e02a0d;
 }
-.duet-button.destructive:hover {
+.duet-button.destructive:hover, .duet-button.destructive-secondary:hover {
   color: white !important;
   background: #b21c4e;
   border-color: #b21c4e;
 }
-.duet-theme-turva .duet-button.destructive:hover {
+.duet-theme-turva .duet-button.destructive:hover, .duet-theme-turva .duet-button.destructive-secondary:hover {
   color: white !important;
   background: #b3220a;
   border-color: #b3220a;

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

@@ -15,6 +15,7 @@ export class DuetButton {
     /**
      * Style variation of the button.
      * @negative - value is deprecated and should be used in combination with negative prop in the future
+     * @destructive - value is deprecated and should be replace with destructive-secondary
      */
     this.variation = "default";
     /**
@@ -227,7 +228,7 @@ export class DuetButton {
           "duet-button-negative": this.negative || this.variation === "negative",
           [this.variation]: true,
         } },
-        this.url ? (h("a", Object.assign({}, commonProps, { href: this.url, target: this.external ? "_blank" : "_self" }),
+        this.url ? (h("a", Object.assign({}, commonProps, { href: this.url, target: this.external ? "_blank" : "_self", rel: this.external ? "noopener" : undefined }),
           commonChildren,
           this.external && h("duet-visually-hidden", null,
             ", ",
@@ -385,7 +386,7 @@ export class DuetButton {
       "mutable": false,
       "complexType": {
         "original": "DuetButtonVariation",
-        "resolved": "\"default\" | \"destructive\" | \"negative\" | \"plain\" | \"primary\" | \"secondary\"",
+        "resolved": "\"default\" | \"destructive\" | \"destructive-primary\" | \"destructive-secondary\" | \"negative\" | \"plain\" | \"primary\" | \"secondary\"",
         "references": {
           "DuetButtonVariation": {
             "location": "local"
@@ -398,6 +399,9 @@ export class DuetButton {
         "tags": [{
             "name": "negative",
             "text": "- value is deprecated and should be used in combination with negative prop in the future"
+          }, {
+            "name": "destructive",
+            "text": "- value is deprecated and should be replace with destructive-secondary"
           }],
         "text": "Style variation of the button."
       },

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

@@ -248,8 +248,9 @@ a:hover .duet-footer-arrow {
   }
 }
 .duet-footer-menu a {
+  display: inline-block;
   text-decoration: none;
-  white-space: nowrap;
+  word-break: break-all;
 }
 .duet-footer-menu a:hover, .duet-footer-menu a:focus {
   text-decoration: underline;

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

@@ -38,15 +38,9 @@
   }
 }
 
-@supports (position: -webkit-sticky) {
-  :host(.duet-header-multi-level-desktop-variation) {
-    top: 0;
-  }
-}
-@supports (position: sticky) {
-  :host(.duet-header-multi-level-desktop-variation) {
-    top: 0;
-  }
+:host(.duet-header-multi-level-desktop-variation) {
+  position: static;
+  top: 0;
 }
 
 .duet-header-reserved-space {

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

@@ -64,7 +64,7 @@ export class DuetLink {
           "duet-link": true,
           "duet-link-is-external": this.external,
           "duet-theme-turva": this.theme === "turva",
-        }, target: this.external ? "_blank" : "_self", "aria-label": this.accessibleLabel, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link" },
+        }, target: this.external ? "_blank" : "_self", "aria-label": this.accessibleLabel, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined },
         h("slot", null),
         Build.isBrowser && this.external && (h(Fragment, null,
           h("duet-visually-hidden", null, this.accessibleLabelExternal),

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

@@ -103,6 +103,10 @@ export class DuetModal {
      * Use this property when you need to have the modal dialog initially active.
      */
     this.active = false;
+    /**
+     * Use this property when you want the modal to close when clicked outside of modal.
+     */
+    this.closeOnBlur = false;
   }
   openChanged() {
     if (this.open) {
@@ -217,8 +221,16 @@ export class DuetModal {
       h("div", { class: {
           "duet-modal-inner": true,
           "duet-modal-large": this.size === "large",
-        }, role: "document" },
-        h("div", { class: { "duet-modal": true, [this.size]: true } },
+        }, role: "document", onClick: e => {
+          if (this.closeOnBlur) {
+            this.closeModal(e);
+          }
+        } },
+        h("div", { class: { "duet-modal": true, [this.size]: true }, onClick: e => {
+            if (this.closeOnBlur) {
+              e.stopPropagation();
+            }
+          } },
           h("duet-spacer", null),
           h("div", { class: "duet-modal-close" },
             h("duet-button", { ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })),
@@ -493,6 +505,24 @@ export class DuetModal {
       "attribute": "active",
       "reflect": true,
       "defaultValue": "false"
+    },
+    "closeOnBlur": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Use this property when you want the modal to close when clicked outside of modal."
+      },
+      "attribute": "close-on-blur",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {
@@ -536,7 +566,7 @@ export class DuetModal {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the close button or esc is hit, but before the modal is closed. To prevent the modal from actually closing, use ev.detail.originalEvent.preventDefault()."
+        "text": "Emitted before the modal is closed. To prevent the modal from actually closing, use ev.detail.originalEvent.preventDefault()."
       },
       "complexType": {
         "original": "DuetModalCloseEvent",

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

@@ -0,0 +1,83 @@
+*,
+*::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;
+  -webkit-tap-highlight-color: transparent;
+}
+
+:host {
+  position: relative !important;
+}
+:host .duet-scrollable-items {
+  display: flex;
+}
+:host .duet-scrollable-items .duet-scrollable-button {
+  position: relative;
+  flex: 0 0 auto;
+  flex-basis: 40px;
+  padding: 10px;
+  cursor: pointer;
+}
+:host .duet-scrollable-items .duet-scrollable-button:active {
+  transform: scale(0.8);
+}
+:host .duet-scrollable-items .duet-scrollable-button--left {
+  left: -12px;
+}
+:host .duet-scrollable-items .duet-scrollable-button--right {
+  right: -12px;
+}
+:host .duet-scrollable-items .duet-scrollable-button--occluded {
+  display: none;
+}
+:host .duet-scrollable-items .duet-scrollable-list {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 20px;
+  padding-top: 2px;
+  /* Make this scrollable when needed */
+  overflow-x: auto;
+  /* We don't want vertical scrolling */
+  overflow-y: hidden;
+  /* We don't want internal inline elements to wrap */
+  white-space: nowrap;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  /* Add margin at ends to make visual appearance better */
+  scroll-margin: 0 20px;
+  /* Make an auto-hiding scroller for the 3 people using a IE */
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  /* For WebKit implementations, provide inertia scrolling */
+  -webkit-overflow-scrolling: touch;
+  /* Remove the default scrollbar for WebKit implementations */
+}
+:host .duet-scrollable-items .duet-scrollable-list::-webkit-scrollbar {
+  display: none;
+}
+
+::slotted(*) {
+  scroll-snap-align: center;
+  margin-left: 0;
+  -webkit-transition: -webkit-transform 0.2s ease-in-out;
+  transition: -webkit-transform 0.2s ease-in-out;
+  transition: transform 0.2s ease-in-out;
+  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
+}

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

@@ -0,0 +1,218 @@
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, h, Host, Prop, State, Watch } from "@stencil/core";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
+export class DuetScrollable {
+  constructor() {
+    /**
+     * Private variables and constants index
+     */
+    this.currentIndex = 0;
+    this.tabListElement = undefined;
+    this.tabListClass = "duet-scrollable-list";
+    this.tablistAtStart = true;
+    this.isTabContentSmallerThanWrapper = false;
+    this.tablistAtEnd = false;
+    this.childrenData = {};
+    this.resizeObserver = new ResizeObserver(entries => {
+      var _a, _b, _c, _d;
+      // otherwise, something is wrong, expecting 1 element only
+      if ((entries === null || entries === void 0 ? void 0 : entries.length) === 1) {
+        const currentWidth = (_b = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
+        const scrollWidth = (_d = (_c = entries[0]) === null || _c === void 0 ? void 0 : _c.target) === null || _d === void 0 ? void 0 : _d.scrollWidth;
+        // in order to avoid state "jumping" on the boundary condition we add a few pixels to the comparison
+        this.isTabContentSmallerThanWrapper = scrollWidth > currentWidth + 5;
+      }
+    });
+    /**
+     * Theme of duet-tab-scrollable. When used this will override the color setting and
+     * use "primary" or "primary-turva" as the color depending on which theme
+     * is chosen.
+     */
+    this.theme = "";
+    /**
+     * Selected element
+     */
+    this.selected = 0;
+  }
+  watchPropHandler(newValue) {
+    this.scrollToTab(newValue, "center");
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    const slotted = this.host.children;
+    this.childrenData = { hasChildren: slotted && slotted.length > 0, numberOfChildren: slotted && slotted.length };
+  }
+  componentDidLoad() {
+    this.resizeObserver.observe(this.tabListElement);
+  }
+  disconnectedCallback() {
+    this.resizeObserver.disconnect();
+  }
+  /**
+   * Private methods.
+   */
+  getLastVisibleElement() {
+    const clientWidth = this.tabListElement.clientWidth;
+    const xValues = Array.from(this.host.querySelectorAll("button")).findIndex(element => element.getBoundingClientRect().x > clientWidth);
+    return xValues;
+  }
+  getFirstVisibleElement() {
+    const buttonCollection = this.host.querySelectorAll("button");
+    // reverse the array because we want the first invisible element form the middle, not the first in the list
+    const arrayOfXValues = Array.from(buttonCollection).map(el => el.getBoundingClientRect().x - el.getBoundingClientRect().width);
+    const xValues = arrayOfXValues.findIndex(element => {
+      return element > 0;
+    });
+    return xValues;
+  }
+  updateScrollButtons(container = this.tabListElement) {
+    if (container.scrollLeft <= 0) {
+      this.tablistAtStart = true;
+    }
+    else if (container.scrollLeft > 0) {
+      this.tablistAtStart = false;
+    }
+    if (container.clientWidth + container.scrollLeft + 10 >= container.scrollWidth) {
+      this.tablistAtEnd = true;
+    }
+    else if (container.clientWidth + container.scrollLeft + 10 < container.scrollWidth) {
+      this.tablistAtEnd = false;
+    }
+  }
+  scrollToTab(index = this.currentIndex, inline) {
+    if (!this.childrenData.hasChildren) {
+      return;
+    }
+    if (index + 1 >= this.childrenData.numberOfChildren) {
+      index = this.childrenData.numberOfChildren - 1;
+    }
+    if (index < 0) {
+      index = 0;
+    }
+    const buttons = this.host.querySelectorAll("button");
+    // store previous position
+    let prevPosition = buttons[0].getBoundingClientRect().x;
+    // iterations to run
+    let ticksWhereScrollDidNotHappen = 5;
+    const getAnimationFrame = () => {
+      // if we get the same value enter the logic loop
+      if (buttons[0].getBoundingClientRect().x === prevPosition) {
+        ticksWhereScrollDidNotHappen--;
+        // When iteration is not complete run the calculation again
+        if (ticksWhereScrollDidNotHappen !== 0) {
+          window.requestAnimationFrame(getAnimationFrame);
+          return;
+        }
+        this.updateScrollButtons();
+      }
+      else {
+        window.requestAnimationFrame(getAnimationFrame);
+        prevPosition = buttons[0].getBoundingClientRect().x;
+      }
+    };
+    buttons[index].scrollIntoView({ behavior: "smooth", inline });
+    window.requestAnimationFrame(getAnimationFrame);
+  }
+  scrollLeft() {
+    this.tablistAtEnd = false;
+    const first = this.getFirstVisibleElement() - 1;
+    this.scrollToTab(first, "center");
+  }
+  scrollRight() {
+    this.tablistAtStart = false;
+    const last = this.getLastVisibleElement() + 1;
+    this.scrollToTab(last, "center");
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, { class: {
+        "duet-theme-turva": this.theme === "turva",
+        "duet-theme-default": this.theme === "default",
+      } },
+      h("div", { class: "duet-scrollable-items" },
+        h("button", { "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", { "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" })))));
+  }
+  static get is() { return "duet-scrollable"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["duet-scrollable.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["duet-scrollable.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 duet-tab-scrollable. When used this will override the color setting and\nuse \"primary\" or \"primary-turva\" as the color depending on which theme\nis chosen."
+      },
+      "attribute": "theme",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "selected": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Selected element"
+      },
+      "attribute": "selected",
+      "reflect": false,
+      "defaultValue": "0"
+    }
+  }; }
+  static get states() { return {
+    "tablistAtStart": {},
+    "isTabContentSmallerThanWrapper": {},
+    "tablistAtEnd": {},
+    "childrenData": {}
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "selected",
+      "methodName": "watchPropHandler"
+    }]; }
+}