@duetds/components 4.34.4 → 4.35.2

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,240 @@
+/*!
+ * 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 = "";
+    /**
+     * Optional identifier to add to buttons in the tab group
+     */
+    this.identifier = "";
+    /**
+     * 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", { 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: {
+            "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": "\"\""
+    },
+    "identifier": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Optional identifier to add to buttons in the tab group"
+      },
+      "attribute": "identifier",
+      "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"
+    }]; }
+}

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

@@ -2,14 +2,29 @@
  * Built with Duet Design System
  */
 import { Build, Component, h, Prop } from "@stencil/core";
+import { getLocaleString } from "../../utils/language-utils";
 export class DuetTab {
+  constructor() {
+    /**
+     * Defaults for AccessibleLabel
+     * @default null
+     */
+    this.accessibleDescriptionDefault = null;
+    /**
+     * String for AccessibleLabel
+     * @default null
+     */
+    this.accessibleDescription = this.accessibleDescriptionDefault
+      ? getLocaleString(this.accessibleDescriptionDefault)
+      : null;
+  }
   /**
    * render() function
    * Always the last one in the class.
    */
   render() {
     if (Build.isBrowser) {
-      return (h("div", { role: "tabpanel", class: { "duet-tab": true, selected: this.selected } },
+      return (h("div", { role: "tabpanel", class: { "duet-tab": true, selected: this.selected }, "aria-description": this.accessibleDescription },
         h("slot", null)));
     }
   }
@@ -55,6 +70,53 @@ export class DuetTab {
       },
       "attribute": "selected",
       "reflect": true
+    },
+    "accessibleDescriptionDefault": {
+      "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": "null"
+          }],
+        "text": "Defaults for AccessibleLabel"
+      },
+      "attribute": "accessible-description-defaults",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "accessibleDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "null"
+          }],
+        "text": "String for AccessibleLabel"
+      },
+      "attribute": "accessible-description",
+      "reflect": false,
+      "defaultValue": "this.accessibleDescriptionDefault\n    ? getLocaleString(this.accessibleDescriptionDefault)\n    : null"
     }
   }; }
 }

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

@@ -36,11 +36,11 @@
 .duet-tab-group-tabs.duet-m-0 {
   margin: 0 !important;
 }
-.duet-tab-group-tabs.duet-tab-group-hidden {
+.duet-tab-group-tabs.duet-tab-group-collapses.duet-tab-group-hidden {
   display: none;
 }
 @media (min-width: 36em) {
-  .duet-tab-group-tabs.duet-tab-group-hidden {
+  .duet-tab-group-tabs.duet-tab-group-collapses.duet-tab-group-hidden {
     display: block;
   }
 }
@@ -48,7 +48,7 @@
   border-bottom: 1px solid #e1e3e6;
 }
 .duet-theme-turva.duet-tab-variation-plain .duet-tab-group-tabs {
-  border-bottom-color: #e4e4e6 !important;
+  border-bottom-color: #e4e4e6;
 }
 
 @media (min-width: 36em) {
@@ -70,13 +70,12 @@
   font-size: 1rem;
   font-weight: 600;
   line-height: 1.1;
-  color: #00294d !important;
+  color: #00294d;
   text-align: left;
   text-decoration: none;
   cursor: pointer;
   background: white;
   border: 2px solid #e1e3e6;
-  border-style: solid;
   border-radius: 0;
   transition: 150ms ease;
 }
@@ -88,7 +87,7 @@
 }
 .duet-theme-turva .duet-tab-button {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: #171c3a !important;
+  color: #171c3a;
   border-color: #e4e4e6;
 }
 .duet-tab-button.duet-p-0 {
@@ -108,7 +107,7 @@
   border-color: #909599;
 }
 .duet-theme-turva .duet-tab-button:hover {
-  border-color: #747475 !important;
+  border-color: #747475;
 }
 .duet-tab-button:active {
   opacity: 0.75;
@@ -116,16 +115,16 @@
 }
 .duet-tab-button.selected {
   z-index: 201;
-  color: white !important;
+  color: white;
   background: #00294d;
   border-color: #00294d;
   outline: 0;
   box-shadow: none !important;
 }
 .duet-theme-turva .duet-tab-button.selected {
-  color: white !important;
+  color: white;
   background-color: #171c3a;
-  border-color: #171c3a !important;
+  border-color: #171c3a;
 }
 .duet-tab-button:focus {
   z-index: 200;
@@ -171,13 +170,13 @@
   margin-left: 36px;
 }
 .duet-tab-variation-plain .duet-tab-button.selected {
-  color: #0077b3 !important;
+  color: #0077b3;
   background: white;
   border-bottom: 3px solid #0077b3;
 }
 .duet-theme-turva.duet-tab-variation-plain .duet-tab-button.selected {
-  color: #c60c30 !important;
-  border-bottom-color: #c60c30 !important;
+  color: #c60c30;
+  border-bottom-color: #c60c30;
 }
 
 .duet-tab-group-content {