@ukic/web-components 2.1.0-beta.8 → 2.2.0

package/dist/collection/components/ic-side-navigation/ic-side-navigation.js

@@ -13,6 +13,10 @@ import { IcThemeForegroundEnum, } from "../../utils/types";
 export class SideNavigation {
   constructor() {
     this.ANIMATION_DURATION = parseInt(getCssProperty("--ic-transition-duration-slow")) || 0;
+    this.IC_NAVIGATION_ITEM = "ic-navigation-item";
+    this.resizeObserver = null;
+    this.COLLAPSED_ICON_LABELS_END = "collapsed-icon-labels-end";
+    this.COLLAPSED_ICON_LABELS_START = "collapsed-icon-labels-start";
     this.emitSideNavigationExpanded = (objDetails) => {
       const event = new CustomEvent("sideNavExpanded", {
         detail: {
@@ -25,6 +29,7 @@ export class SideNavigation {
     this.toggleMenu = () => {
       this.menuOpen = !this.menuOpen;
       this.setMobileMenuAriaAttributes(this.menuOpen);
+      this.arrangeSlottedNavigationItem(this.menuOpen);
       this.setToggleMenuFlyoutMenuVisibility(this.menuOpen);
       this.emitSideNavigationExpanded({
         sideNavExpanded: this.menuOpen,
@@ -35,14 +40,15 @@ export class SideNavigation {
       const sideNav = this.el.shadowRoot.querySelector("#side-navigation");
       const sideNavInner = sideNav.querySelector(".side-navigation-inner");
       const bottomWrapper = sideNav.querySelector(".bottom-wrapper");
+      const menuVisibilityVisible = "menu-visibility-visible";
       if (menuOpen) {
-        bottomWrapper.classList.add("menu-visibility-visible");
-        sideNavInner.classList.add("menu-visibility-visible");
+        bottomWrapper.classList.add(menuVisibilityVisible);
+        sideNavInner.classList.add(menuVisibilityVisible);
       }
       else {
         setTimeout(() => {
-          sideNavInner.classList.remove("menu-visibility-visible");
-          bottomWrapper.classList.remove("menu-visibility-visible");
+          sideNavInner.classList.remove(menuVisibilityVisible);
+          bottomWrapper.classList.remove(menuVisibilityVisible);
         }, this.ANIMATION_DURATION);
       }
     };
@@ -76,13 +82,14 @@ export class SideNavigation {
       if (this.collapsedIconLabels) {
         this.animateCollapsedIconLabels();
       }
+      this.setExpandedButtonHeight();
       this.emitSideNavigationExpanded({ sideNavExpanded: this.menuExpanded });
     };
     /**
      * In order to style nested slotted elements (e.g. using React Router components), this method
      * rearranges the a tag and labels and adds inline styling expand/collaped animations as external CSS classes are not
      * do not take affect.
-     * @param menuExpanded boolean - true or false depending on seide navigation state
+     * @param menuExpanded boolean - true or false depending on side navigation state
      */
     this.arrangeSlottedNavigationItem = (menuExpanded) => {
       const navItems = this.el.querySelectorAll("ic-navigation-item");
@@ -95,7 +102,7 @@ export class SideNavigation {
           const label = navItem.textContent.trim();
           const icTypography = document.createElement("ic-typography");
           icTypography.classList.add("ic-typography-label", "hydrated", "navigation-item-side-nav-slotted-text");
-          iconWrapper.className = "icon-container";
+          iconWrapper.style.height = "var(--ic-space-lg)";
           iconWrapper.append(icon);
           navItemSlot.textContent = "";
           icTypography.textContent = label;
@@ -124,6 +131,12 @@ export class SideNavigation {
         icTypography.style.textOverflow = "ellipsis";
       }
     };
+    this.setExpandedButtonHeight = () => {
+      const appStatusWrapper = this.el.shadowRoot.querySelector("#side-navigation > .bottom-wrapper > .bottom-side-nav > .app-status-wrapper");
+      if (appStatusWrapper.offsetHeight !== 0) {
+        this.el.style.setProperty("--sm-side-navigation-bottom-bar-height", `${appStatusWrapper.offsetHeight}px`);
+      }
+    };
     this.styleSlottedIconLabels = (menuExpanded, icTypography) => {
       if (menuExpanded) {
         icTypography.style.opacity = "1";
@@ -138,32 +151,38 @@ export class SideNavigation {
           "visibility 0s, opacity var(--ic-easing-transition-slow)";
       }
     };
-    this.animateCollapsedIconLabels = () => {
+    this.transitionHandler = (type) => {
       const primaryNavigationWrapper = this.el.shadowRoot.querySelector(".primary-navigation");
       const secondaryNavigationWrapper = this.el.shadowRoot.querySelector(".bottom-wrapper > .secondary-navigation");
+      const classToRemove = type === "start"
+        ? this.COLLAPSED_ICON_LABELS_END
+        : this.COLLAPSED_ICON_LABELS_START;
+      const classToAdd = type === "start"
+        ? this.COLLAPSED_ICON_LABELS_START
+        : this.COLLAPSED_ICON_LABELS_END;
       if (primaryNavigationWrapper) {
-        primaryNavigationWrapper.classList.remove("collapsed-icon-labels-end");
-        primaryNavigationWrapper.classList.add("collapsed-icon-labels-start");
+        primaryNavigationWrapper.classList.remove(classToRemove);
+        primaryNavigationWrapper.classList.add(classToAdd);
       }
       if (secondaryNavigationWrapper) {
-        secondaryNavigationWrapper.classList.remove("collapsed-icon-labels-end");
-        secondaryNavigationWrapper.classList.add("collapsed-icon-labels-start");
+        secondaryNavigationWrapper.classList.remove(classToRemove);
+        secondaryNavigationWrapper.classList.add(classToAdd);
       }
-      this.el.addEventListener("transitionend", () => {
-        if (primaryNavigationWrapper) {
-          primaryNavigationWrapper.classList.remove("collapsed-icon-labels-start");
-          primaryNavigationWrapper.classList.add("collapsed-icon-labels-end");
-        }
-        if (secondaryNavigationWrapper) {
-          secondaryNavigationWrapper.classList.remove("collapsed-icon-labels-start");
-          secondaryNavigationWrapper.classList.add("collapsed-icon-labels-end");
-        }
-      });
+    };
+    this.transitionEndHandler = () => {
+      this.transitionHandler("end");
+    };
+    this.animateCollapsedIconLabels = () => {
+      this.transitionHandler("start");
+      this.transitionEndHandler();
+      this.el.addEventListener("transitionend", this.transitionEndHandler);
     };
     this.paddingIconWidth = (navItems) => {
       const navItemLink = (navItems[0].shadowRoot &&
-        navItems[0].shadowRoot.querySelector("ic-tooltip a")) ||
-        navItems[0].querySelector("a");
+        (navItems[0].shadowRoot.querySelector("ic-tooltip a") ||
+          navItems[0].shadowRoot.querySelector("ic-tooltip div"))) ||
+        navItems[0].querySelector("a") ||
+        navItems[0].querySelector("div");
       const navItemSVG = navItems[0].querySelector("svg");
       const navStyles = {
         gap: window.getComputedStyle(navItemLink).gap,
@@ -179,7 +198,7 @@ export class SideNavigation {
       if (menuExpanded) {
         timer = setTimeout(() => {
           const sideNavWidth = this.el.clientWidth;
-          const navigationItems = Array.from(this.el.querySelectorAll("ic-navigation-item"));
+          const navigationItems = Array.from(this.el.querySelectorAll(this.IC_NAVIGATION_ITEM));
           const paddingIconDelta = navigationItems.length
             ? this.paddingIconWidth(navigationItems)
             : 0;
@@ -196,7 +215,7 @@ export class SideNavigation {
       }
       else {
         clearTimeout(timer);
-        const navigationItems = Array.from(this.el.querySelectorAll("ic-navigation-item"));
+        const navigationItems = Array.from(this.el.querySelectorAll(this.IC_NAVIGATION_ITEM));
         navigationItems.forEach((navigationItem) => {
           navigationItem.setAttribute("display-navigation-tooltip", "false");
         });
@@ -216,50 +235,59 @@ export class SideNavigation {
     this.setParentPaddingLeft = (value) => {
       this.el.parentElement.style.setProperty("padding-left", value);
     };
-    this.resizeObserver = null;
     this.resizeObserverCallback = (currSize) => {
-      if (currSize !== this.deviceSize) {
-        this.deviceSize = currSize;
-        if (currSize === DEVICE_SIZES.S) {
-          if (!this.disableAutoParentStyling) {
-            const topBarHeight = this.el.shadowRoot.querySelector(".top-bar").scrollHeight;
-            this.setParentPaddingTop(`${topBarHeight}px`);
-            this.setParentPaddingLeft("0");
-            if (this.inline) {
-              this.el.parentElement.style.setProperty("height", `calc(100% - ${topBarHeight}px)`);
-            }
+      this.deviceSize = currSize;
+      if (currSize === DEVICE_SIZES.S) {
+        if (!this.disableAutoParentStyling) {
+          const topBarHeight = this.el.shadowRoot.querySelector(".top-bar").scrollHeight;
+          this.setParentPaddingTop(`${topBarHeight}px`);
+          this.setParentPaddingLeft("0");
+          if (this.inline) {
+            this.el.parentElement.style.setProperty("height", `calc(100% - ${topBarHeight}px)`);
           }
-          this.emitSideNavigationExpanded({
-            sideNavExpanded: this.menuExpanded,
-            sideNavMobile: true,
-          });
         }
-        else {
-          if (!this.disableAutoParentStyling) {
-            this.setParentPaddingTop("0");
-            this.el.parentElement.style.setProperty("height", "100%");
-          }
-          this.emitSideNavigationExpanded({
-            sideNavExpanded: this.menuExpanded,
-            sideNavMobile: false,
-          });
+        this.emitSideNavigationExpanded({
+          sideNavExpanded: this.menuExpanded,
+          sideNavMobile: true,
+        });
+      }
+      else {
+        if (!this.disableAutoParentStyling) {
+          this.setParentPaddingTop("0");
+          this.el.parentElement.style.setProperty("height", "100%");
         }
-        if (currSize > DEVICE_SIZES.L) {
-          if (!this.disableAutoParentStyling) {
-            this.setParentPaddingTop("0");
-            this.setParentPaddingLeft("0");
-          }
+        this.emitSideNavigationExpanded({
+          sideNavExpanded: this.menuExpanded,
+          sideNavMobile: false,
+        });
+      }
+      let paddingLeft;
+      if (this.collapsedIconLabels) {
+        paddingLeft = "calc(var(--ic-space-xxl) * 2)";
+      }
+      else {
+        paddingLeft = "calc(var(--ic-space-xxl) + var(--ic-space-xs))";
+      }
+      if (currSize > DEVICE_SIZES.L) {
+        if (!this.disableAutoParentStyling) {
+          this.setParentPaddingTop("0");
+          this.setParentPaddingLeft("0");
         }
-        else if (currSize > DEVICE_SIZES.S &&
-          currSize <= DEVICE_SIZES.L &&
-          !this.static &&
-          !this.disableAutoParentStyling) {
-          if (this.collapsedIconLabels) {
-            this.setParentPaddingLeft("calc(var(--ic-space-xxl) * 2)");
-          }
-          else {
-            this.setParentPaddingLeft("calc(var(--ic-space-xxl) + var(--ic-space-xs))");
-          }
+      }
+      else if (currSize > DEVICE_SIZES.S &&
+        currSize <= DEVICE_SIZES.M &&
+        this.static &&
+        !this.disableAutoParentStyling) {
+        this.setParentPaddingLeft(paddingLeft);
+      }
+      else if (currSize > DEVICE_SIZES.S &&
+        currSize <= DEVICE_SIZES.L &&
+        !this.disableAutoParentStyling) {
+        if (this.static && this.menuExpanded) {
+          this.setParentPaddingLeft("calc(var(--ic-space-xl) * 10)");
+        }
+        else {
+          this.setParentPaddingLeft(paddingLeft);
         }
       }
     };
@@ -272,7 +300,7 @@ export class SideNavigation {
       this.resizeObserver.observe(document.body, { box: "content-box" });
     };
     this.setCollapsedIconLabels = () => {
-      const navigationItems = Array.from(this.el.querySelectorAll("ic-navigation-item"));
+      const navigationItems = Array.from(this.el.querySelectorAll(this.IC_NAVIGATION_ITEM));
       navigationItems.forEach((navigationItem) => {
         navigationItem.setAttribute("collapsed-icon-label", "true");
       });
@@ -300,25 +328,21 @@ export class SideNavigation {
           [this.foregroundColor]: true,
         } }, isSDevice && (h("nav", { "aria-labelledby": "menu-navigation-toggle-button-landmark", "aria-hidden": "false" }, h("ic-button", { "aria-label": "Open navigation menu", class: "menu-button", id: "menu-button", variant: "secondary", size: "small", "full-width": "true", appearance: foregroundColor, onClick: this.toggleMenu, "aria-owns": "side-navigation", "aria-haspopup": "true", "aria-expanded": "false" }, h("span", { class: "mobile-top-bar-menu-icon", slot: "icon", innerHTML: menuOpen ? closeIcon : menuIcon }), menuOpen ? "Close" : "Menu"), h("span", { id: "menu-navigation-toggle-button-landmark", class: "navigation-landmark-title", "aria-hidden": "true" }, "Navigation menu toggle button"))), h("div", { class: "app-title-wrapper" }, (hasTitle || isSlotUsed(this.el, "app-title")) && (h(Component, Object.assign({}, attrs, { class: "title-link" }), h("div", { class: "app-icon-container", "aria-hidden": "true" }, h("slot", { name: "app-icon" })), h("ic-typography", { variant: isAppNameSubtitleVariant ? "subtitle-small" : "h3" }, isSlotUsed(this.el, "app-title") ? (h("slot", { name: "app-title" })) : (appTitle)))))));
     };
+    this.deviceSize = DEVICE_SIZES.XL;
+    this.deviceSizeAppTitle = DEVICE_SIZES.S;
+    this.foregroundColor = getThemeForegroundColor();
+    this.hasSecondaryNavigation = false;
+    this.menuExpanded = false;
+    this.menuOpen = false;
     this.appTitle = undefined;
-    this.status = undefined;
-    this.version = undefined;
+    this.collapsedIconLabels = false;
+    this.disableAutoParentStyling = false;
     this.expanded = false;
     this.href = "/";
-    this.static = false;
-    this.collapsedIconLabels = false;
     this.inline = false;
-    this.disableAutoParentStyling = false;
-    this.foregroundColor = getThemeForegroundColor();
-    this.menuOpen = false;
-    this.menuExpanded = false;
-    this.deviceSize = DEVICE_SIZES.XL;
-    this.deviceSizeAppTitle = DEVICE_SIZES.S;
-    this.hasSecondaryNavigation = false;
-  }
-  themeChangeHandler(ev) {
-    const theme = ev.detail;
-    this.foregroundColor = theme.mode;
+    this.static = false;
+    this.status = undefined;
+    this.version = undefined;
   }
   componentWillLoad() {
     if (this.expanded) {
@@ -338,9 +362,10 @@ export class SideNavigation {
       sideNavMobile: this.deviceSize === DEVICE_SIZES.S,
     });
     checkResizeObserver(this.runResizeObserver);
-    this.arrangeSlottedNavigationItem();
     this.styleSlottedCollapsedIconLabel();
+    this.arrangeSlottedNavigationItem(this.menuExpanded);
     this.displayTooltipWithExpandedLongLabel(this.menuExpanded);
+    this.setExpandedButtonHeight();
     !isSlotUsed(this.el, "app-title") &&
       onComponentRequiredPropUndefined([{ prop: this.appTitle, propName: "app-title" }], "Side Navigation");
   }
@@ -348,6 +373,11 @@ export class SideNavigation {
     if (this.resizeObserver !== null) {
       this.resizeObserver.disconnect();
     }
+    this.el.removeEventListener("transitionend", this.transitionEndHandler);
+  }
+  themeChangeHandler(ev) {
+    const theme = ev.detail;
+    this.foregroundColor = theme.mode;
   }
   render() {
     const { appTitle, menuOpen, foregroundColor, menuExpanded, href, status, version, collapsedIconLabels, inline, } = this;
@@ -371,7 +401,6 @@ export class SideNavigation {
         "sm-expanded": !isSDevice && menuExpanded,
         [IcThemeForegroundEnum.Dark]: foregroundColor === IcThemeForegroundEnum.Dark,
         ["collapsed-labels"]: !isSDevice && !menuExpanded && collapsedIconLabels,
-        ["static"]: this.static,
         ["inline"]: inline,
       } }, isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { class: "side-navigation", id: "side-navigation" }, !isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { class: "side-navigation-inner" }, isSlotUsed(this.el, "primary-navigation") && (h("nav", { class: "primary-navigation", "aria-labelledby": "primary-navigation-landmark" }, h("span", { "aria-hidden": "true", class: "navigation-landmark-title", id: "primary-navigation-landmark" }, "Primary"), h("ul", { class: "navigation-list" }, h("slot", { name: "primary-navigation" }))))), h("div", { class: {
         ["bottom-wrapper"]: true,
@@ -411,39 +440,41 @@ export class SideNavigation {
         "attribute": "app-title",
         "reflect": false
       },
-      "status": {
-        "type": "string",
+      "collapsedIconLabels": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The status of the app to be displayed."
+          "text": "If `true`, the icon and label will appear when side navigation is collapsed."
         },
-        "attribute": "status",
-        "reflect": false
+        "attribute": "collapsed-icon-labels",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "version": {
-        "type": "string",
+      "disableAutoParentStyling": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The version of the app to be displayed."
+          "text": "If `true`, automatic parent wrapper styling will be disabled."
         },
-        "attribute": "version",
-        "reflect": false
+        "attribute": "disable-auto-parent-styling",
+        "reflect": false,
+        "defaultValue": "false"
       },
       "expanded": {
         "type": "boolean",
@@ -481,7 +512,7 @@ export class SideNavigation {
         "reflect": false,
         "defaultValue": "\"/\""
       },
-      "static": {
+      "inline": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -492,14 +523,17 @@ export class SideNavigation {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": "If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above)."
+          "tags": [{
+              "name": "internal",
+              "text": "If `true`, side navigation will be contained by its parent element."
+            }],
+          "text": ""
         },
-        "attribute": "static",
+        "attribute": "inline",
         "reflect": false,
         "defaultValue": "false"
       },
-      "collapsedIconLabels": {
+      "static": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -511,61 +545,56 @@ export class SideNavigation {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the icon and label will appear when side navigation is collapsed."
+          "text": "If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above)."
         },
-        "attribute": "collapsed-icon-labels",
+        "attribute": "static",
         "reflect": false,
         "defaultValue": "false"
       },
-      "inline": {
-        "type": "boolean",
+      "status": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "If `true`, side navigation will be contained by its parent element."
-            }],
-          "text": ""
+          "tags": [],
+          "text": "The status of the app to be displayed."
         },
-        "attribute": "inline",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "status",
+        "reflect": false
       },
-      "disableAutoParentStyling": {
-        "type": "boolean",
+      "version": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, automatic parent wrapper styling will be disabled."
+          "text": "The version of the app to be displayed."
         },
-        "attribute": "disable-auto-parent-styling",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "version",
+        "reflect": false
       }
     };
   }
   static get states() {
     return {
-      "foregroundColor": {},
-      "menuOpen": {},
-      "menuExpanded": {},
       "deviceSize": {},
       "deviceSizeAppTitle": {},
-      "hasSecondaryNavigation": {}
+      "foregroundColor": {},
+      "hasSecondaryNavigation": {},
+      "menuExpanded": {},
+      "menuOpen": {}
     };
   }
   static get elementRef() { return "el"; }