@duetds/components 8.5.2 → 8.5.4

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

@@ -87,14 +87,6 @@
 .duet-icon.duet-icon-shape-brand {
   border-radius: 25%;
 }
-.duet-icon.duet-icon-has-background.xxx-small .duet-icon-svg, .duet-icon.duet-icon-has-outline.xxx-small .duet-icon-svg {
-  width: 10px;
-  height: 10px;
-}
-.duet-icon.duet-icon-has-background.xx-small .duet-icon-svg, .duet-icon.duet-icon-has-outline.xx-small .duet-icon-svg {
-  width: 16px;
-  height: 16px;
-}
 @media (max-width: 35.9375em) {
   .duet-icon.duet-icon-not-responsive {
     transform: scale(1) !important;
@@ -106,69 +98,6 @@
 .duet-icon.duet-theme-turva {
   color: rgb(198, 12, 48);
 }
-.duet-icon.auto .duet-icon-svg {
-  width: 100%;
-  height: 100%;
-}
-.duet-icon.xxx-small .duet-icon-svg {
-  width: 7px;
-  height: 7px;
-}
-.duet-icon.duet-icon-has-background.xxx-small {
-  padding: 6px;
-}
-.duet-icon.duet-icon-has-outline.xxx-small {
-  padding: 4px;
-}
-.duet-icon.xx-small .duet-icon-svg {
-  width: 10px;
-  height: 10px;
-}
-.duet-icon.duet-icon-has-background.xx-small {
-  padding: 8px;
-}
-.duet-icon.duet-icon-has-outline.xx-small {
-  padding: 7px;
-}
-.duet-icon.x-small .duet-icon-svg {
-  width: 16px;
-  height: 16px;
-}
-.duet-icon.duet-icon-has-outline.x-small {
-  padding: 10px;
-}
-.duet-icon.duet-icon-has-background.x-small {
-  padding: 12px;
-}
-.duet-icon.small .duet-icon-svg {
-  width: 20px;
-  height: 20px;
-}
-.duet-icon.duet-icon-has-background.small {
-  padding: 14px;
-}
-.duet-icon.large .duet-icon-svg {
-  width: 30px;
-  height: 30px;
-}
-.duet-icon.x-large .duet-icon-svg {
-  width: 36px;
-  height: 36px;
-}
-.duet-icon.xx-large .duet-icon-svg {
-  width: 48px;
-  height: 48px;
-}
-.duet-icon.xxx-large .duet-icon-svg {
-  width: 48px;
-  height: 48px;
-}
-@media (min-width: 48em) {
-  .duet-icon.xxx-large .duet-icon-svg {
-    width: 72px;
-    height: 72px;
-  }
-}
 .duet-icon.duet-icon-shape-brand.rotated {
   transform: rotate(20deg) scale(0.875);
   transform-origin: center;
@@ -185,123 +114,206 @@
 .duet-icon.duet-icon-shape-brand.duet-theme-turva .duet-icon-svg {
   min-width: auto;
 }
-.duet-icon.duet-icon-shape-brand.duet-theme-turva.xx-small {
-  width: 18px;
-  height: 15px;
-  padding: 0;
+.duet-icon .duet-icon-svg {
+  display: block;
+  width: 24px;
+  min-width: 100%;
+  height: 24px;
+  font-size: 0;
 }
-.duet-icon.duet-icon-shape-brand.duet-theme-turva.x-small {
-  width: 32px;
-  height: 30px;
-  padding: 0;
+.duet-icon .duet-icon-svg.rotated {
+  transform: rotate(-20deg) scale(1.14);
 }
-.duet-icon.duet-icon-shape-brand.duet-theme-turva.small {
-  width: 36px;
-  height: 34px;
-  padding: 0;
+.duet-icon svg {
+  width: 100%;
+  min-width: 100%;
+  overflow: clip;
+  fill: currentColor;
+  overflow-clip-margin: 1px;
 }
-.duet-icon.duet-icon-shape-brand.duet-theme-turva.medium {
-  width: 48px;
-  height: 44px;
-  padding: 0;
+
+:host([size=auto]) .duet-icon-svg {
+  width: 100%;
+  height: 100%;
 }
-.duet-icon.duet-icon-shape-brand.duet-theme-turva.large {
-  width: 62px;
-  height: 56px;
-  padding: 0;
+
+:host([size=xxx-small]) .duet-icon-svg {
+  width: 7px;
+  height: 7px;
 }
-.duet-icon.duet-icon-shape-brand.duet-theme-turva.x-large {
-  width: 76px;
-  height: 68px;
-  padding: 0;
+:host([size=xxx-small]) .duet-icon-has-background {
+  padding: 6px;
 }
-.duet-icon.duet-icon-shape-brand.duet-theme-turva.xx-large {
-  width: 95px;
-  height: 86px;
-  padding: 0;
+:host([size=xxx-small]) .duet-icon-has-outline {
+  padding: 4px;
 }
-.duet-icon.duet-icon-shape-brand.duet-theme-turva.xxx-large {
-  width: 144px;
-  height: 130px;
-  padding: 0;
+:host([size=xxx-small]) .duet-icon-has-background .duet-icon-svg,
+:host([size=xxx-small]) .duet-icon-has-outline .duet-icon-svg {
+  width: 10px;
+  height: 10px;
 }
-.duet-icon.duet-icon-shape-brand.xxx-small {
+:host([size=xxx-small]) .duet-icon-shape-brand {
   padding: 0;
 }
-.duet-icon.duet-icon-shape-brand.xxx-small .duet-icon-svg {
+:host([size=xxx-small]) .duet-icon-shape-brand .duet-icon-svg {
   width: 0;
   height: 0;
 }
-.duet-icon.duet-icon-shape-brand.xx-small {
+
+:host([size=xx-small]) .duet-icon-svg {
+  width: 10px;
+  height: 10px;
+}
+:host([size=xx-small]) .duet-icon-has-background {
+  padding: 8px;
+}
+:host([size=xx-small]) .duet-icon-has-outline {
+  padding: 7px;
+}
+:host([size=xx-small]) .duet-icon-has-background .duet-icon-svg,
+:host([size=xx-small]) .duet-icon-has-outline .duet-icon-svg {
+  width: 16px;
+  height: 16px;
+}
+:host([size=xx-small]) .duet-icon-shape-brand {
   padding: 4px;
 }
-.duet-icon.duet-icon-shape-brand.xx-small .duet-icon-svg {
+:host([size=xx-small]) .duet-icon-shape-brand .duet-icon-svg {
   width: 10px;
   height: 10px;
 }
-.duet-icon.duet-icon-shape-brand.x-small {
+:host([size=xx-small]) .duet-theme-turva .duet-icon-shape-brand {
+  width: 18px;
+  height: 15px;
+  padding: 0;
+}
+
+:host([size=x-small]) .duet-icon-svg {
+  width: 16px;
+  height: 16px;
+}
+:host([size=x-small]) .duet-icon-has-outline {
+  padding: 10px;
+}
+:host([size=x-small]) .duet-icon-has-background {
+  padding: 12px;
+}
+:host([size=x-small]) .duet-icon-shape-brand {
   padding: 8px;
 }
-.duet-icon.duet-icon-shape-brand.x-small .duet-icon-svg {
+:host([size=x-small]) .duet-icon-shape-brand .duet-icon-svg {
   width: 16px;
   height: 16px;
 }
-.duet-icon.duet-icon-shape-brand.small {
+:host([size=x-small]) .duet-theme-turva .duet-icon-shape-brand {
+  width: 32px;
+  height: 30px;
+  padding: 0;
+}
+
+:host([size=small]) .duet-icon-svg {
+  width: 20px;
+  height: 20px;
+}
+:host([size=small]) .duet-icon-has-background {
+  padding: 14px;
+}
+:host([size=small]) .duet-icon-shape-brand {
   padding: 8px;
 }
-.duet-icon.duet-icon-shape-brand.small .duet-icon-svg {
+:host([size=small]) .duet-icon-shape-brand .duet-icon-svg {
   width: 20px;
   height: 20px;
 }
-.duet-icon.duet-icon-shape-brand.medium {
+:host([size=small]) .duet-theme-turva .duet-icon-shape-brand {
+  width: 36px;
+  height: 34px;
+  padding: 0;
+}
+
+:host([size=medium]) .duet-icon-shape-brand {
   padding: 12px;
 }
-.duet-icon.duet-icon-shape-brand.medium .duet-icon-svg {
+:host([size=medium]) .duet-icon-shape-brand .duet-icon-svg {
   width: 24px;
   height: 24px;
 }
-.duet-icon.duet-icon-shape-brand.large {
+:host([size=medium]) .duet-theme-turva .duet-icon-shape-brand {
+  width: 48px;
+  height: 44px;
+  padding: 0;
+}
+
+:host([size=large]) .duet-icon-svg {
+  width: 30px;
+  height: 30px;
+}
+:host([size=large]) .duet-icon-shape-brand {
   padding: 16px;
 }
-.duet-icon.duet-icon-shape-brand.large .duet-icon-svg {
+:host([size=large]) .duet-icon-shape-brand .duet-icon-svg {
   width: 30px;
   height: 30px;
 }
-.duet-icon.duet-icon-shape-brand.x-large {
+:host([size=large]) .duet-theme-turva .duet-icon-shape-brand {
+  width: 62px;
+  height: 56px;
+  padding: 0;
+}
+
+:host([size=x-large]) .duet-icon-svg {
+  width: 36px;
+  height: 36px;
+}
+:host([size=x-large]) .duet-icon-shape-brand {
   padding: 20px;
 }
-.duet-icon.duet-icon-shape-brand.x-large .duet-icon-svg {
+:host([size=x-large]) .duet-icon-shape-brand .duet-icon-svg {
   width: 36px;
   height: 36px;
 }
-.duet-icon.duet-icon-shape-brand.xx-large {
+:host([size=x-large]) .duet-theme-turva .duet-icon-shape-brand {
+  width: 76px;
+  height: 68px;
+  padding: 0;
+}
+
+:host([size=xx-large]) .duet-icon-svg {
+  width: 48px;
+  height: 48px;
+}
+:host([size=xx-large]) .duet-icon-shape-brand {
   padding: 24px;
 }
-.duet-icon.duet-icon-shape-brand.xx-large .duet-icon-svg {
+:host([size=xx-large]) .duet-icon-shape-brand .duet-icon-svg {
+  width: 48px;
+  height: 48px;
+}
+:host([size=xx-large]) .duet-theme-turva .duet-icon-shape-brand {
+  width: 95px;
+  height: 86px;
+  padding: 0;
+}
+
+:host([size=xxx-large]) .duet-icon-svg {
   width: 48px;
   height: 48px;
 }
-.duet-icon.duet-icon-shape-brand.xxx-large {
+@media (min-width: 48em) {
+  :host([size=xxx-large]) .duet-icon-svg {
+    width: 72px;
+    height: 72px;
+  }
+}
+:host([size=xxx-large]) .duet-icon-shape-brand {
   padding: 36px;
 }
-.duet-icon.duet-icon-shape-brand.xxx-large .duet-icon-svg {
+:host([size=xxx-large]) .duet-icon-shape-brand .duet-icon-svg {
   width: 72px;
   height: 72px;
 }
-.duet-icon .duet-icon-svg {
-  display: block;
-  width: 24px;
-  min-width: 100%;
-  height: 24px;
-  font-size: 0;
-}
-.duet-icon .duet-icon-svg.rotated {
-  transform: rotate(-20deg) scale(1.14);
-}
-.duet-icon svg {
-  width: 100%;
-  min-width: 100%;
-  overflow: clip;
-  fill: currentColor;
-  overflow-clip-margin: 1px;
+:host([size=xxx-large]) .duet-theme-turva .duet-icon-shape-brand {
+  width: 144px;
+  height: 130px;
+  padding: 0;
 }

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

@@ -24,9 +24,4 @@ describe("duet-icon", () => {
         const element = await page.find("duet-icon >>> .duet-icon-has-background");
         expect(element).not.toBeNull();
     });
-    it("should provide a property that changes the icon size", async () => {
-        const page = await createPage(`<duet-icon size="xx-large"></duet-icon>`);
-        const element = await page.find("duet-icon >>> .xx-large");
-        expect(element).not.toBeNull();
-    });
 });

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

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 import { Build, h, Host } from "@stencil/core";
-import { inheritGlobalTheme } from "../../common/themeable-component";
+import { inheritGlobalTheme } from "../../common";
 import { getColorByName, rgbaColorFromRgb } from "../../utils/token-utils";
 import { buildIconUrl, fetchIconByUrl } from "./icon-utils";
 export class DuetIcon {
@@ -25,24 +25,47 @@ export class DuetIcon {
     /**
      * Component lifecycle events.
      */
-    componentWillLoad() {
+    async componentWillLoad() {
         inheritGlobalTheme(this);
         if (this.src && this.icon) {
             console.warn("[DUET COMPONENTS]: <duet-icon> should have either have src or icon attributes, but not both. icon attribute will take precedence", "icon:", this.icon, "src:", this.src);
         }
-        this.loadIcon();
+        await this.loadIcon(null, null);
     }
-    async loadIcon() {
+    async loadIcon(newValue, oldValue) {
         // static icon known at build-time, so we can set it synchronously
         if (this.icon) {
             this.svgContent = this.icon;
             return;
         }
-        // on server, don't make requests
+        // on server import icon from icons lib
         if (!Build.isBrowser) {
+            if (this.name) {
+                const iconPath = `@duetds/icons/lib/assets/${this.name}`;
+                try {
+                    const icon = await import(iconPath);
+                    this.svgContent = icon.svg;
+                }
+                catch (e) {
+                    console.warn(`[DUET COMPONENTS]: <duet-icon> could not load SVG ${iconPath} from local dependency.`, e);
+                }
+            }
             return;
         }
-        // dynamically load icon from url
+        // svgContent being empty and svg being found indicates server side rendered icon
+        if (this.element.shadowRoot.querySelector("svg") && !this.svgContent) {
+            if (oldValue === null && newValue === null) {
+                // when coming from componentWillLoad don't let go further
+                return;
+            }
+            else if (this.element.shadowRoot.querySelector(`.duet-icon-svg[data-name="${newValue}"]`)) {
+                // When duet-icon is used inside another component the name attribute is first the default "action-add"
+                // when the parent component initializes it changes this to the correct name and triggers this
+                // loadIcon(newValue, oldValue) function. This else if is here to notice this and compares the
+                // newValue to the one we have set on server, if its the same we don't let this function go further.
+                return;
+            }
+        }
         const src = this.src ? this.src : buildIconUrl(this.name);
         try {
             this.svgContent = await fetchIconByUrl(src);
@@ -80,7 +103,6 @@ export class DuetIcon {
                 "duet-icon-has-background": !!this.background,
             } }, h("span", { "aria-hidden": "true", style: styles, class: {
                 "duet-icon": true,
-                [this.size]: true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
                 "duet-icon-has-outline": !!this.outline,
@@ -88,7 +110,7 @@ export class DuetIcon {
                 [shapeStyle]: true,
                 rotated: this.shape === "brand-rotated" && this.theme !== "turva",
                 "duet-icon-not-responsive": !this.responsive,
-            } }, h("span", { "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, innerHTML: this.svgContent, style: iconStyles }))));
+            } }, h("span", { "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, "data-name": this.name, innerHTML: this.svgContent, style: iconStyles }))));
     }
     static get is() { return "duet-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -143,7 +165,7 @@ export class DuetIcon {
                     "text": "A raw SVG string."
                 },
                 "attribute": "icon",
-                "reflect": false
+                "reflect": true
             },
             "src": {
                 "type": "string",
@@ -339,7 +361,7 @@ export class DuetIcon {
                     "text": "Icon size. Entered as one of the icon size design tokens."
                 },
                 "attribute": "size",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "\"medium\""
             },
             "outline": {

package/lib/collection/components/duet-menu-bar-item/duet-menu-bar-item.css

@@ -48,6 +48,22 @@
 .duet-theme-turva .duet-menu-bar-item:focus, .duet-menu-bar-item:focus.duet-theme-turva {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
+.duet-menu-bar-item .leading-icon,
+.duet-menu-bar-item .trailing-icon {
+  width: 20px;
+  height: 20px;
+}
+@media (min-width: 62em) {
+  .duet-menu-bar-item .leading-icon,
+  .duet-menu-bar-item .trailing-icon {
+    width: 16px;
+    height: 16px;
+  }
+}
+.duet-menu-bar-item .trailing-icon.trailing-icon-arrow {
+  width: 7px;
+  height: 7px;
+}
 .duet-menu-bar-item[aria-expanded=true] {
   color: rgb(0, 119, 179);
 }

package/lib/collection/components/duet-menu-bar-item/duet-menu-bar-item.js

@@ -1,22 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { media_query_large } from "@duetds/tokens/lib/tokens.json";
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetMenuBarItem {
     constructor() {
-        this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
-        this.boundMqlFunctions = [];
-        this.changeIconSize = () => {
-            if (this.mql[0].matches) {
-                this.iconSize = "x-small";
-            }
-            else {
-                this.iconSize = "small";
-            }
-        };
-        this.iconSize = "x-small";
         this.theme = "";
         this.active = false;
         this.url = undefined;
@@ -32,26 +20,6 @@ export class DuetMenuBarItem {
     componentWillLoad() {
         inheritGlobalTheme(this);
     }
-    connectedCallback() {
-        this.changeIconSize();
-        for (let i = 0; i < this.mql.length; i++) {
-            // addEventListener is not available in Stencil hydrate
-            if (this.mql[i].addEventListener) {
-                const bound = this.changeIconSize.bind(this);
-                this.mql[i].addEventListener("change", bound);
-                this.boundMqlFunctions[i] = bound;
-            }
-        }
-    }
-    disconnectedCallback() {
-        for (let i = 0; i < this.mql.length; i++) {
-            // removeEventListener is not available in Stencil hydrate
-            if (this.mql[i].removeEventListener) {
-                this.mql[i].removeEventListener("change", this.boundMqlFunctions[i]);
-            }
-        }
-        this.boundMqlFunctions = [];
-    }
     /**
      * Sets focus. Use this method instead of the global focus().
      */
@@ -68,10 +36,11 @@ export class DuetMenuBarItem {
                 "duet-menu-bar-item": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.leadingIcon && (h("duet-icon", { size: this.iconSize, name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", null), this.trailingIcon && (h("duet-icon", { class: {
+            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.leadingIcon && (h("duet-icon", { class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", null), this.trailingIcon && (h("duet-icon", { class: {
                 "trailing-icon": true,
+                "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 rotate: this.trailingIcon === "action-arrow-down-small" && this.accessibleExpanded,
-            }, theme: this.theme, name: this.trailingIcon, margin: "none", size: this.trailingIcon === "action-arrow-down-small" ? "xxx-small" : this.iconSize, color: "currentColor" })))));
+            }, theme: this.theme, name: this.trailingIcon, margin: "none", size: "auto", color: "currentColor" })))));
     }
     static get is() { return "duet-menu-bar-item"; }
     static get encapsulation() { return "shadow"; }
@@ -248,11 +217,6 @@ export class DuetMenuBarItem {
             }
         };
     }
-    static get states() {
-        return {
-            "iconSize": {}
-        };
-    }
     static get methods() {
         return {
             "setFocus": {

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

@@ -28,19 +28,19 @@
   z-index: 400;
 }
 
-slot[name=mobile] {
+::slotted(*[slot=mobile]) {
   display: inherit;
 }
 
-slot[name=desktop] {
+::slotted(*[slot=desktop]) {
   display: none;
 }
 
 @media (min-width: 62em) {
-  slot[name=mobile] {
+  ::slotted(*[slot=mobile]) {
     display: none;
   }
-  slot[name=desktop] {
+  ::slotted(*[slot=desktop]) {
     display: inherit;
   }
 }

package/lib/collection/components/duet-popup-menu/duet-popup-menu.js

@@ -59,7 +59,6 @@ export class DuetPopupMenu {
      */
     componentWillLoad() {
         inheritGlobalTheme(this);
-        this.teleport = new Teleport(this.element);
     }
     componentDidLoad() {
         if (!Build.isServer) {

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

@@ -85,7 +85,6 @@ export class DuetSlideout {
     componentWillLoad() {
         inheritGlobalTheme(this);
         this.hasStickyHeaderSlot = hasSlot(this.element, "sticky-header");
-        this.teleport = new Teleport(this.element);
     }
     connectedCallback() {
         connectLanguageChangeObserver(this);

package/lib/collection/components/duet-submenu-bar-item/duet-submenu-bar-item.css

@@ -61,6 +61,22 @@
   align-items: center;
   justify-content: center;
 }
+.duet-submenu-bar-item .leading-icon,
+.duet-submenu-bar-item .trailing-icon {
+  width: 20px;
+  height: 20px;
+}
+@media (min-width: 62em) {
+  .duet-submenu-bar-item .leading-icon,
+  .duet-submenu-bar-item .trailing-icon {
+    width: 16px;
+    height: 16px;
+  }
+}
+.duet-submenu-bar-item .trailing-icon.trailing-icon-arrow {
+  width: 7px;
+  height: 7px;
+}
 .duet-submenu-bar-item .trailing-icon {
   position: absolute;
   right: 12px;