@ukic/web-components 2.0.0-alpha.121

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

@@ -0,0 +1,566 @@
+import { Host, h, } from "@stencil/core";
+import menuIcon from "../../assets/hamburger-menu-icon.svg";
+import closeIcon from "../../assets/close-icon.svg";
+import chevronIcon from "../../assets/chevron-icon.svg";
+import { getCurrentDeviceSize, DEVICE_SIZES, checkResizeObserver, isSlotUsed, getThemeForegroundColor, getCssProperty, hasClassificationBanner, onComponentRequiredPropUndefined, } from "../../utils/helpers";
+import { IcThemeForegroundEnum, } from "../../utils/types";
+/**
+ * @slot app-icon - Content will be rendered adjacent to the application title at the very top of the side navigation
+ * @slot primary-navigation - Content will be rendered at the top of the side navigation
+ * @slot secondary-navigation - Content will be rendered at the bottom of the side navigation
+ */
+export class SideNavigation {
+  constructor() {
+    this.ANIMATION_DURATION = parseInt(getCssProperty("--ic-transition-duration")) || 0;
+    this.emitSideNavigationExpanded = (objDetails) => {
+      const event = new CustomEvent("sideNavExpanded", {
+        detail: {
+          sideNavExpanded: objDetails.sideNavExpanded,
+          sideNavMobile: objDetails.sideNavMobile,
+        },
+      });
+      this.el.dispatchEvent(event);
+    };
+    this.toggleMenu = () => {
+      this.menuOpen = !this.menuOpen;
+      this.setMobileMenuAriaAttributes(this.menuOpen);
+      this.setToggleMenuFlyoutMenuVisibility(this.menuOpen);
+      this.emitSideNavigationExpanded({
+        sideNavExpanded: this.menuOpen,
+        sideNavMobile: true,
+      });
+    };
+    this.setToggleMenuFlyoutMenuVisibility = (menuOpen) => {
+      const sideNav = this.el.shadowRoot.querySelector("#side-navigation");
+      const sideNavInner = sideNav.querySelector(".side-navigation-inner");
+      const bottomWrapper = sideNav.querySelector(".bottom-wrapper");
+      if (menuOpen) {
+        bottomWrapper.classList.add("menu-visibility-visible");
+        sideNavInner.classList.add("menu-visibility-visible");
+      }
+      else {
+        setTimeout(() => {
+          sideNavInner.classList.remove("menu-visibility-visible");
+          bottomWrapper.classList.remove("menu-visibility-visible");
+        }, this.ANIMATION_DURATION);
+      }
+    };
+    this.setMobileMenuAriaAttributes = (menuOpen) => {
+      const nativeButton = this.el.shadowRoot
+        .querySelector("#menu-button")
+        .shadowRoot.querySelector("button");
+      if (menuOpen) {
+        nativeButton.setAttribute("aria-expanded", "true");
+        nativeButton.setAttribute("aria-label", "Close navigation menu");
+      }
+      else {
+        nativeButton.setAttribute("aria-expanded", "false");
+        nativeButton.setAttribute("aria-label", "Open navigation menu");
+      }
+    };
+    this.setAndRemoveNoWrapAfterMenuExpanded = () => {
+      const appTitle = this.el.shadowRoot.querySelector(".title-link ic-typography");
+      appTitle.classList.add("ic-typography-no-wrap");
+      setTimeout(() => {
+        appTitle.classList.remove("ic-typography-no-wrap");
+      }, this.ANIMATION_DURATION);
+    };
+    this.toggleMenuExpanded = () => {
+      this.menuExpanded = !this.menuExpanded;
+      if (this.menuExpanded) {
+        this.setAndRemoveNoWrapAfterMenuExpanded();
+      }
+      this.arrangeSlottedNavigationItem(this.menuExpanded);
+      this.displayTooltipWithExpandedLongLabel(this.menuExpanded);
+      if (this.collapsedIconLabels) {
+        this.animateCollapsedIconLabels();
+      }
+      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
+     */
+    this.arrangeSlottedNavigationItem = (menuExpanded) => {
+      const navItems = this.el.querySelectorAll("ic-navigation-item");
+      navItems.forEach((navItem) => {
+        const hasUsedSlot = isSlotUsed(navItem, "navigation-item");
+        if (hasUsedSlot) {
+          const navItemSlot = navItem.querySelector("[slot='navigation-item']");
+          const iconWrapper = document.createElement("div");
+          const icon = navItemSlot.querySelector("svg");
+          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.append(icon);
+          navItemSlot.textContent = "";
+          icTypography.textContent = label;
+          navItemSlot.append(iconWrapper);
+          navItemSlot.append(icTypography);
+          if (this.collapsedIconLabels) {
+            this.styleSlottedCollapsedIconLabels(menuExpanded, icTypography);
+          }
+          else {
+            this.styleSlottedIconLabels(menuExpanded, icTypography);
+          }
+        }
+      });
+    };
+    this.styleSlottedCollapsedIconLabels = (menuExpanded, icTypography) => {
+      if (menuExpanded) {
+        icTypography.style.marginTop = "0";
+        icTypography.style.whiteSpace = "nowrap";
+        icTypography.style.overflow = "hidden";
+        icTypography.style.textOverflow = "ellipsis";
+      }
+      else {
+        icTypography.style.marginTop = "10px";
+        icTypography.style.whiteSpace = "nowrap";
+        icTypography.style.overflow = "hidden";
+        icTypography.style.textOverflow = "ellipsis";
+      }
+    };
+    this.styleSlottedIconLabels = (menuExpanded, icTypography) => {
+      if (menuExpanded) {
+        icTypography.style.opacity = "1";
+        icTypography.style.visibility = "visible";
+        icTypography.style.transition =
+          "visibility 0s, opacity var(--ic-easing-transition-slow)";
+      }
+      else {
+        icTypography.style.opacity = "0";
+        icTypography.style.visibility = "hidden";
+        icTypography.style.transition =
+          "visibility 0s, opacity var(--ic-easing-transition-slow)";
+      }
+    };
+    this.animateCollapsedIconLabels = () => {
+      const primaryNavigationWrapper = this.el.shadowRoot.querySelector(".primary-navigation");
+      const secondaryNavigationWrapper = this.el.shadowRoot.querySelector(".bottom-wrapper > .secondary-navigation");
+      if (primaryNavigationWrapper) {
+        primaryNavigationWrapper.classList.remove("collapsed-icon-labels-end");
+        primaryNavigationWrapper.classList.add("collapsed-icon-labels-start");
+      }
+      if (secondaryNavigationWrapper) {
+        secondaryNavigationWrapper.classList.remove("collapsed-icon-labels-end");
+        secondaryNavigationWrapper.classList.add("collapsed-icon-labels-start");
+      }
+      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.paddingIconWidth = (navItems) => {
+      const navItemLink = (navItems[0].shadowRoot &&
+        navItems[0].shadowRoot.querySelector("ic-tooltip a")) ||
+        navItems[0].querySelector("a");
+      const navItemSVG = navItems[0].querySelector("svg");
+      const navStyles = {
+        gap: window.getComputedStyle(navItemLink).gap,
+        iconWidth: window.getComputedStyle(navItemSVG).width,
+        paddingLeft: window.getComputedStyle(navItemLink).paddingLeft,
+      };
+      return Object.values(navStyles).reduce((prev, curr) => {
+        return (prev += parseInt(curr));
+      }, 0);
+    };
+    this.displayTooltipWithExpandedLongLabel = (menuExpanded) => {
+      let timer;
+      if (menuExpanded) {
+        timer = setTimeout(() => {
+          const sideNavWidth = this.el.clientWidth;
+          const navigationItems = Array.from(this.el.querySelectorAll("ic-navigation-item"));
+          const paddingIconDelta = navigationItems.length
+            ? this.paddingIconWidth(navigationItems)
+            : 0;
+          navigationItems.forEach((navigationItem) => {
+            var _a, _b;
+            const icTypographyScrollWidth = ((_a = (navigationItem.shadowRoot &&
+              navigationItem.shadowRoot.querySelector("ic-tooltip .link ic-typography.ic-typography-label"))) === null || _a === void 0 ? void 0 : _a.scrollWidth) ||
+              ((_b = navigationItem.querySelector("ic-typography.ic-typography-label")) === null || _b === void 0 ? void 0 : _b.scrollWidth);
+            if (icTypographyScrollWidth > sideNavWidth - paddingIconDelta) {
+              navigationItem.setAttribute("display-navigation-tooltip", "true");
+            }
+          });
+        }, this.ANIMATION_DURATION);
+      }
+      else {
+        clearTimeout(timer);
+        const navigationItems = Array.from(this.el.querySelectorAll("ic-navigation-item"));
+        navigationItems.forEach((navigationItem) => {
+          navigationItem.setAttribute("display-navigation-tooltip", "false");
+        });
+      }
+    };
+    this.setMenuExpanded = (expanded) => {
+      this.menuExpanded = expanded;
+    };
+    /**
+     * As the mobile top bar is fixed, a padding top is required
+     * to push main content down the height of the mobile top bar
+     * @param value - padding-top css value
+     */
+    this.setParentPaddingTop = (value) => {
+      this.el.parentElement.style.paddingTop = value;
+    };
+    this.setParentPaddingLeft = (value) => {
+      this.el.parentElement.style.paddingLeft = 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");
+          }
+          this.emitSideNavigationExpanded({
+            sideNavExpanded: this.menuExpanded,
+            sideNavMobile: true,
+          });
+        }
+        else {
+          if (!this.disableAutoParentStyling) {
+            this.setParentPaddingTop("0");
+          }
+          this.emitSideNavigationExpanded({
+            sideNavExpanded: this.menuExpanded,
+            sideNavMobile: false,
+          });
+        }
+        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))");
+          }
+        }
+      }
+    };
+    this.runResizeObserver = () => {
+      this.resizeObserver = new ResizeObserver(() => {
+        const currSize = getCurrentDeviceSize();
+        this.deviceSizeAppTitle = currSize;
+        this.resizeObserverCallback(currSize);
+      });
+      this.resizeObserver.observe(document.body, { box: "content-box" });
+    };
+    this.setCollapsedIconLabels = () => {
+      const navigationItems = Array.from(this.el.querySelectorAll("ic-navigation-item"));
+      navigationItems.forEach((navigationItem) => {
+        navigationItem.setAttribute("collapsed-icon-label", "true");
+      });
+    };
+    this.styleSlottedCollapsedIconLabel = () => {
+      const dynamicSlottedIcTypographyComps = Array.from(this.el.querySelectorAll(".navigation-item-side-nav-slotted-text"));
+      dynamicSlottedIcTypographyComps.forEach((icTypography) => {
+        var _a, _b;
+        if ((_b = (_a = icTypography === null || icTypography === void 0 ? void 0 : icTypography.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains("navigation-item-side-nav-collapsed-with-label")) {
+          icTypography.style.whiteSpace = "nowrap";
+          icTypography.style.overflow = "hidden";
+          icTypography.style.textOverflow = "ellipsis";
+          icTypography.style.marginTop = "10px";
+        }
+      });
+    };
+    this.renderTopBar = ({ isSDevice, foregroundColor, menuOpen, href, isAppNameSubtitleVariant, appTitle, }) => (h("div", { class: {
+        "top-bar": true,
+        [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: "dense", "full-width": "true", buttonStyle: 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" }, h("a", { href: href, 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" }, appTitle)))));
+    this.appTitle = undefined;
+    this.status = undefined;
+    this.version = undefined;
+    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;
+  }
+  componentWillLoad() {
+    if (this.expanded) {
+      this.setMenuExpanded(true);
+    }
+    else {
+      this.setMenuExpanded(false);
+    }
+    if (this.collapsedIconLabels) {
+      this.setCollapsedIconLabels();
+    }
+    this.hasSecondaryNavigation = isSlotUsed(this.el, "secondary-navigation");
+  }
+  componentDidLoad() {
+    this.emitSideNavigationExpanded({
+      sideNavExpanded: this.menuExpanded,
+      sideNavMobile: this.deviceSize === DEVICE_SIZES.S,
+    });
+    checkResizeObserver(this.runResizeObserver);
+    this.arrangeSlottedNavigationItem();
+    this.styleSlottedCollapsedIconLabel();
+    this.displayTooltipWithExpandedLongLabel(this.menuExpanded);
+    onComponentRequiredPropUndefined([{ prop: this.appTitle, propName: "app-title" }], "Side Navigation");
+  }
+  disconnectedCallback() {
+    if (this.resizeObserver !== null) {
+      this.resizeObserver.disconnect();
+    }
+  }
+  render() {
+    const { appTitle, menuOpen, foregroundColor, menuExpanded, href, status, version, collapsedIconLabels, inline, } = this;
+    const isSDevice = this.deviceSize === DEVICE_SIZES.S;
+    const isMdDevice = this.deviceSize === DEVICE_SIZES.M;
+    const isLgDevice = this.deviceSize >= DEVICE_SIZES.L;
+    const isAppNameSubtitleVariant = this.deviceSizeAppTitle === DEVICE_SIZES.S;
+    const displayExpandBtn = isMdDevice || (isLgDevice && !this.static);
+    const topBarProps = {
+      isSDevice,
+      foregroundColor,
+      menuOpen,
+      href,
+      isAppNameSubtitleVariant,
+      appTitle,
+    };
+    return (h(Host, { class: {
+        "xs-menu-open": menuOpen && isSDevice,
+        "xs-menu-close": !menuOpen && isSDevice,
+        "sm-collapsed": !isSDevice && !menuExpanded,
+        "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,
+        ["classification-spacing"]: hasClassificationBanner(),
+      } }, isSlotUsed(this.el, "secondary-navigation") && (h("nav", { class: "secondary-navigation", "aria-labelledby": "secondary-navigation-landmark" }, h("span", { "aria-hidden": "true", class: "navigation-landmark-title", id: "secondary-navigation-landmark" }, "Secondary"), h("ul", { class: "navigation-list" }, h("slot", { name: "secondary-navigation" })))), h("div", { class: "bottom-side-nav" }, this.hasSecondaryNavigation && h("ic-divider", null), displayExpandBtn && (h("button", { class: "menu-expand-button", innerHTML: chevronIcon, onClick: this.toggleMenuExpanded, "aria-label": `${menuExpanded ? "Collapse" : "Expand"} side navigation` })), h("div", { class: "app-status-wrapper" }, status !== "" && (h("div", { class: {
+        ["app-status"]: true,
+      } }, h("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), version !== "" && (h("ic-typography", { variant: "label", class: "app-version", "aria-label": "app version" }, version))))))));
+  }
+  static get is() { return "ic-side-navigation"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ic-side-navigation.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-side-navigation.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "appTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Title to display."
+        },
+        "attribute": "app-title",
+        "reflect": false
+      },
+      "status": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Status of application"
+        },
+        "attribute": "status",
+        "reflect": false
+      },
+      "version": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Version of application"
+        },
+        "attribute": "version",
+        "reflect": false
+      },
+      "expanded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true, the ic-side-navigation will load in an expanded state"
+        },
+        "attribute": "expanded",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set application title link"
+        },
+        "attribute": "href",
+        "reflect": false,
+        "defaultValue": "\"/\""
+      },
+      "static": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true, the menu expand button is removed (PLEASE NOTE: This takes effect on screen sizes 992px and above)"
+        },
+        "attribute": "static",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "collapsedIconLabels": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true, the icon and label will appear when side navigation is collapsed"
+        },
+        "attribute": "collapsed-icon-labels",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "inline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true, side navigation will be contained by parent element"
+        },
+        "attribute": "inline",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disableAutoParentStyling": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true, disable automatic parent wrapper styling"
+        },
+        "attribute": "disable-auto-parent-styling",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "foregroundColor": {},
+      "menuOpen": {},
+      "menuExpanded": {},
+      "deviceSize": {},
+      "deviceSizeAppTitle": {},
+      "hasSecondaryNavigation": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "icThemeChange",
+        "method": "themeChangeHandler",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=ic-side-navigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-side-navigation.js","sourceRoot":"","sources":["../../../src/components/ic-side-navigation/ic-side-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Listen,\n} from \"@stencil/core\";\n\nimport menuIcon from \"../../assets/hamburger-menu-icon.svg\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport {\n  getCurrentDeviceSize,\n  DEVICE_SIZES,\n  checkResizeObserver,\n  isSlotUsed,\n  getThemeForegroundColor,\n  getCssProperty,\n  hasClassificationBanner,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcTopBar } from \"./ic-side-navigation.types\";\n\n/**\n * @slot app-icon - Content will be rendered adjacent to the application title at the very top of the side navigation\n * @slot primary-navigation - Content will be rendered at the top of the side navigation\n * @slot secondary-navigation - Content will be rendered at the bottom of the side navigation\n */\n\n@Component({\n  tag: \"ic-side-navigation\",\n  styleUrl: \"ic-side-navigation.css\",\n  shadow: true,\n})\nexport class SideNavigation {\n  @Element() el: HTMLIcSideNavigationElement;\n  /**\n   * Title to display.\n   */\n  @Prop() appTitle!: string;\n  /**\n   * Status of application\n   */\n  @Prop() status: string;\n  /**\n   * Version of application\n   */\n  @Prop() version: string;\n  /**\n   * If true, the ic-side-navigation will load in an expanded state\n   */\n  @Prop() expanded: boolean = false;\n  /**\n   * Set application title link\n   */\n  @Prop() href: string = \"/\";\n  /**\n   * If true, the menu expand button is removed (PLEASE NOTE: This takes effect on screen sizes 992px and above)\n   */\n  @Prop() static: boolean = false;\n  /**\n   * If true, the icon and label will appear when side navigation is collapsed\n   */\n\n  @Prop() collapsedIconLabels: boolean = false;\n  /**\n   * If true, side navigation will be contained by parent element\n   */\n  @Prop() inline: boolean = false;\n\n  /**\n   * If true, disable automatic parent wrapper styling\n   */\n  @Prop() disableAutoParentStyling: boolean = false;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() menuOpen: boolean = false;\n  @State() menuExpanded: boolean = false;\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() deviceSizeAppTitle = DEVICE_SIZES.S;\n  @State() hasSecondaryNavigation: boolean = false;\n\n  private ANIMATION_DURATION =\n    parseInt(getCssProperty(\"--ic-transition-duration\")) || 0;\n\n  @Listen(\"icThemeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  private emitSideNavigationExpanded = (objDetails: {\n    sideNavExpanded: boolean;\n    sideNavMobile?: boolean;\n  }): void => {\n    const event = new CustomEvent(\"sideNavExpanded\", {\n      detail: {\n        sideNavExpanded: objDetails.sideNavExpanded,\n        sideNavMobile: objDetails.sideNavMobile,\n      },\n    });\n    this.el.dispatchEvent(event);\n  };\n\n  private toggleMenu = (): void => {\n    this.menuOpen = !this.menuOpen;\n    this.setMobileMenuAriaAttributes(this.menuOpen);\n\n    this.setToggleMenuFlyoutMenuVisibility(this.menuOpen);\n\n    this.emitSideNavigationExpanded({\n      sideNavExpanded: this.menuOpen,\n      sideNavMobile: true,\n    });\n  };\n\n  private setToggleMenuFlyoutMenuVisibility = (menuOpen: boolean) => {\n    const sideNav = this.el.shadowRoot.querySelector(\n      \"#side-navigation\"\n    ) as HTMLDivElement;\n    const sideNavInner = sideNav.querySelector(\n      \".side-navigation-inner\"\n    ) as HTMLElement;\n    const bottomWrapper = sideNav.querySelector(\n      \".bottom-wrapper\"\n    ) as HTMLElement;\n\n    if (menuOpen) {\n      bottomWrapper.classList.add(\"menu-visibility-visible\");\n      sideNavInner.classList.add(\"menu-visibility-visible\");\n    } else {\n      setTimeout(() => {\n        sideNavInner.classList.remove(\"menu-visibility-visible\");\n        bottomWrapper.classList.remove(\"menu-visibility-visible\");\n      }, this.ANIMATION_DURATION);\n    }\n  };\n\n  private setMobileMenuAriaAttributes = (menuOpen: boolean) => {\n    const nativeButton = this.el.shadowRoot\n      .querySelector(\"#menu-button\")\n      .shadowRoot.querySelector(\"button\");\n\n    if (menuOpen) {\n      nativeButton.setAttribute(\"aria-expanded\", \"true\");\n      nativeButton.setAttribute(\"aria-label\", \"Close navigation menu\");\n    } else {\n      nativeButton.setAttribute(\"aria-expanded\", \"false\");\n      nativeButton.setAttribute(\"aria-label\", \"Open navigation menu\");\n    }\n  };\n\n  private setAndRemoveNoWrapAfterMenuExpanded = () => {\n    const appTitle = this.el.shadowRoot.querySelector(\n      \".title-link ic-typography\"\n    );\n\n    appTitle.classList.add(\"ic-typography-no-wrap\");\n\n    setTimeout(() => {\n      appTitle.classList.remove(\"ic-typography-no-wrap\");\n    }, this.ANIMATION_DURATION);\n  };\n\n  private toggleMenuExpanded = (): void => {\n    this.menuExpanded = !this.menuExpanded;\n\n    if (this.menuExpanded) {\n      this.setAndRemoveNoWrapAfterMenuExpanded();\n    }\n\n    this.arrangeSlottedNavigationItem(this.menuExpanded);\n\n    this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n    if (this.collapsedIconLabels) {\n      this.animateCollapsedIconLabels();\n    }\n\n    this.emitSideNavigationExpanded({ sideNavExpanded: this.menuExpanded });\n  };\n\n  /**\n   * In order to style nested slotted elements (e.g. using React Router components), this method\n   * rearranges the a tag and labels and adds inline styling expand/collaped animations as external CSS classes are not\n   * do not take affect.\n   * @param menuExpanded boolean - true or false depending on seide navigation state\n   */\n  private arrangeSlottedNavigationItem = (menuExpanded?: boolean) => {\n    const navItems = this.el.querySelectorAll(\"ic-navigation-item\");\n\n    navItems.forEach((navItem) => {\n      const hasUsedSlot = isSlotUsed(navItem, \"navigation-item\");\n\n      if (hasUsedSlot) {\n        const navItemSlot = navItem.querySelector(\"[slot='navigation-item']\");\n        const iconWrapper = document.createElement(\"div\");\n        const icon = navItemSlot.querySelector(\"svg\");\n        const label = navItem.textContent.trim();\n        const icTypography = document.createElement(\"ic-typography\");\n        icTypography.classList.add(\n          \"ic-typography-label\",\n          \"hydrated\",\n          \"navigation-item-side-nav-slotted-text\"\n        );\n\n        iconWrapper.className = \"icon-container\";\n        iconWrapper.append(icon);\n\n        navItemSlot.textContent = \"\";\n\n        icTypography.textContent = label;\n\n        navItemSlot.append(iconWrapper);\n        navItemSlot.append(icTypography);\n\n        if (this.collapsedIconLabels) {\n          this.styleSlottedCollapsedIconLabels(menuExpanded, icTypography);\n        } else {\n          this.styleSlottedIconLabels(menuExpanded, icTypography);\n        }\n      }\n    });\n  };\n\n  private styleSlottedCollapsedIconLabels = (\n    menuExpanded: boolean,\n    icTypography: HTMLIcTypographyElement\n  ) => {\n    if (menuExpanded) {\n      icTypography.style.marginTop = \"0\";\n      icTypography.style.whiteSpace = \"nowrap\";\n      icTypography.style.overflow = \"hidden\";\n      icTypography.style.textOverflow = \"ellipsis\";\n    } else {\n      icTypography.style.marginTop = \"10px\";\n      icTypography.style.whiteSpace = \"nowrap\";\n      icTypography.style.overflow = \"hidden\";\n      icTypography.style.textOverflow = \"ellipsis\";\n    }\n  };\n\n  private styleSlottedIconLabels = (\n    menuExpanded: boolean,\n    icTypography: HTMLSpanElement\n  ) => {\n    if (menuExpanded) {\n      icTypography.style.opacity = \"1\";\n      icTypography.style.visibility = \"visible\";\n      icTypography.style.transition =\n        \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n    } else {\n      icTypography.style.opacity = \"0\";\n      icTypography.style.visibility = \"hidden\";\n      icTypography.style.transition =\n        \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n    }\n  };\n\n  private animateCollapsedIconLabels = () => {\n    const primaryNavigationWrapper = this.el.shadowRoot.querySelector(\n      \".primary-navigation\"\n    );\n    const secondaryNavigationWrapper = this.el.shadowRoot.querySelector(\n      \".bottom-wrapper > .secondary-navigation\"\n    );\n\n    if (primaryNavigationWrapper) {\n      primaryNavigationWrapper.classList.remove(\"collapsed-icon-labels-end\");\n      primaryNavigationWrapper.classList.add(\"collapsed-icon-labels-start\");\n    }\n\n    if (secondaryNavigationWrapper) {\n      secondaryNavigationWrapper.classList.remove(\"collapsed-icon-labels-end\");\n      secondaryNavigationWrapper.classList.add(\"collapsed-icon-labels-start\");\n    }\n\n    this.el.addEventListener(\"transitionend\", () => {\n      if (primaryNavigationWrapper) {\n        primaryNavigationWrapper.classList.remove(\n          \"collapsed-icon-labels-start\"\n        );\n        primaryNavigationWrapper.classList.add(\"collapsed-icon-labels-end\");\n      }\n\n      if (secondaryNavigationWrapper) {\n        secondaryNavigationWrapper.classList.remove(\n          \"collapsed-icon-labels-start\"\n        );\n        secondaryNavigationWrapper.classList.add(\"collapsed-icon-labels-end\");\n      }\n    });\n  };\n\n  private paddingIconWidth = (\n    navItems: HTMLIcNavigationItemElement[]\n  ): number => {\n    const navItemLink =\n      (navItems[0].shadowRoot &&\n        navItems[0].shadowRoot.querySelector(\"ic-tooltip a\")) ||\n      navItems[0].querySelector(\"a\");\n    const navItemSVG = navItems[0].querySelector(\"svg\");\n\n    const navStyles = {\n      gap: window.getComputedStyle(navItemLink).gap,\n      iconWidth: window.getComputedStyle(navItemSVG).width,\n      paddingLeft: window.getComputedStyle(navItemLink).paddingLeft,\n    };\n\n    return Object.values(navStyles).reduce((prev, curr) => {\n      return (prev += parseInt(curr));\n    }, 0);\n  };\n\n  private displayTooltipWithExpandedLongLabel = (menuExpanded: boolean) => {\n    let timer;\n\n    if (menuExpanded) {\n      timer = setTimeout(() => {\n        const sideNavWidth = this.el.clientWidth;\n\n        const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n          this.el.querySelectorAll(\"ic-navigation-item\")\n        );\n\n        const paddingIconDelta = navigationItems.length\n          ? this.paddingIconWidth(navigationItems)\n          : 0;\n\n        navigationItems.forEach(\n          (navigationItem: HTMLIcNavigationItemElement) => {\n            const icTypographyScrollWidth =\n              (\n                navigationItem.shadowRoot &&\n                navigationItem.shadowRoot.querySelector(\n                  \"ic-tooltip .link ic-typography.ic-typography-label\"\n                )\n              )?.scrollWidth ||\n              navigationItem.querySelector(\"ic-typography.ic-typography-label\")\n                ?.scrollWidth;\n\n            if (icTypographyScrollWidth > sideNavWidth - paddingIconDelta) {\n              navigationItem.setAttribute(\"display-navigation-tooltip\", \"true\");\n            }\n          }\n        );\n      }, this.ANIMATION_DURATION);\n    } else {\n      clearTimeout(timer);\n\n      const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n        this.el.querySelectorAll(\"ic-navigation-item\")\n      );\n      navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n        navigationItem.setAttribute(\"display-navigation-tooltip\", \"false\");\n      });\n    }\n  };\n\n  private setMenuExpanded = (expanded: boolean): void => {\n    this.menuExpanded = expanded;\n  };\n\n  /**\n   * As the mobile top bar is fixed, a padding top is required\n   * to push main content down the height of the mobile top bar\n   * @param value - padding-top css value\n   */\n  private setParentPaddingTop = (value: string) => {\n    this.el.parentElement.style.paddingTop = value;\n  };\n\n  private setParentPaddingLeft = (value: string) => {\n    this.el.parentElement.style.paddingLeft = value;\n  };\n\n  private resizeObserver: ResizeObserver = null;\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n\n      if (currSize === DEVICE_SIZES.S) {\n        if (!this.disableAutoParentStyling) {\n          const topBarHeight =\n            this.el.shadowRoot.querySelector(\".top-bar\").scrollHeight;\n          this.setParentPaddingTop(`${topBarHeight}px`);\n          this.setParentPaddingLeft(\"0\");\n        }\n        this.emitSideNavigationExpanded({\n          sideNavExpanded: this.menuExpanded,\n          sideNavMobile: true,\n        });\n      } else {\n        if (!this.disableAutoParentStyling) {\n          this.setParentPaddingTop(\"0\");\n        }\n        this.emitSideNavigationExpanded({\n          sideNavExpanded: this.menuExpanded,\n          sideNavMobile: false,\n        });\n      }\n\n      if (currSize > DEVICE_SIZES.L) {\n        if (!this.disableAutoParentStyling) {\n          this.setParentPaddingTop(\"0\");\n          this.setParentPaddingLeft(\"0\");\n        }\n      } else if (\n        currSize > DEVICE_SIZES.S &&\n        currSize <= DEVICE_SIZES.L &&\n        !this.static &&\n        !this.disableAutoParentStyling\n      ) {\n        if (this.collapsedIconLabels) {\n          this.setParentPaddingLeft(\"calc(var(--ic-space-xxl) * 2)\");\n        } else {\n          this.setParentPaddingLeft(\n            \"calc(var(--ic-space-xxl) + var(--ic-space-xs))\"\n          );\n        }\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.deviceSizeAppTitle = currSize;\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(document.body, { box: \"content-box\" });\n  };\n\n  private setCollapsedIconLabels = () => {\n    const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n      this.el.querySelectorAll(\"ic-navigation-item\")\n    );\n    navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n      navigationItem.setAttribute(\"collapsed-icon-label\", \"true\");\n    });\n  };\n\n  private styleSlottedCollapsedIconLabel = () => {\n    const dynamicSlottedIcTypographyComps: HTMLIcTypographyElement[] =\n      Array.from(\n        this.el.querySelectorAll(\".navigation-item-side-nav-slotted-text\")\n      );\n\n    dynamicSlottedIcTypographyComps.forEach((icTypography) => {\n      if (\n        icTypography?.parentElement?.parentElement?.classList.contains(\n          \"navigation-item-side-nav-collapsed-with-label\"\n        )\n      ) {\n        icTypography.style.whiteSpace = \"nowrap\";\n        icTypography.style.overflow = \"hidden\";\n        icTypography.style.textOverflow = \"ellipsis\";\n        icTypography.style.marginTop = \"10px\";\n      }\n    });\n  };\n\n  private renderTopBar = ({\n    isSDevice,\n    foregroundColor,\n    menuOpen,\n    href,\n    isAppNameSubtitleVariant,\n    appTitle,\n  }: IcTopBar) => (\n    <div\n      class={{\n        \"top-bar\": true,\n        [this.foregroundColor]: true,\n      }}\n    >\n      {isSDevice && (\n        <nav\n          aria-labelledby=\"menu-navigation-toggle-button-landmark\"\n          aria-hidden=\"false\"\n        >\n          <ic-button\n            aria-label=\"Open navigation menu\"\n            class=\"menu-button\"\n            id=\"menu-button\"\n            variant=\"secondary\"\n            size=\"dense\"\n            full-width=\"true\"\n            buttonStyle={foregroundColor}\n            onClick={this.toggleMenu}\n            aria-owns=\"side-navigation\"\n            aria-haspopup=\"true\"\n            aria-expanded=\"false\"\n          >\n            <span\n              class=\"mobile-top-bar-menu-icon\"\n              slot=\"icon\"\n              innerHTML={menuOpen ? closeIcon : menuIcon}\n            ></span>\n            {menuOpen ? \"Close\" : \"Menu\"}\n          </ic-button>\n          <span\n            id=\"menu-navigation-toggle-button-landmark\"\n            class=\"navigation-landmark-title\"\n            aria-hidden=\"true\"\n          >\n            Navigation menu toggle button\n          </span>\n        </nav>\n      )}\n      <div class=\"app-title-wrapper\">\n        <a href={href} class=\"title-link\">\n          <div class=\"app-icon-container\" aria-hidden=\"true\">\n            <slot name=\"app-icon\"></slot>\n          </div>\n          <ic-typography\n            variant={isAppNameSubtitleVariant ? \"subtitle-small\" : \"h3\"}\n          >\n            {appTitle}\n          </ic-typography>\n        </a>\n      </div>\n    </div>\n  );\n\n  componentWillLoad(): void {\n    if (this.expanded) {\n      this.setMenuExpanded(true);\n    } else {\n      this.setMenuExpanded(false);\n    }\n\n    if (this.collapsedIconLabels) {\n      this.setCollapsedIconLabels();\n    }\n\n    this.hasSecondaryNavigation = isSlotUsed(this.el, \"secondary-navigation\");\n  }\n\n  componentDidLoad(): void {\n    this.emitSideNavigationExpanded({\n      sideNavExpanded: this.menuExpanded,\n      sideNavMobile: this.deviceSize === DEVICE_SIZES.S,\n    });\n\n    checkResizeObserver(this.runResizeObserver);\n    this.arrangeSlottedNavigationItem();\n    this.styleSlottedCollapsedIconLabel();\n    this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n    onComponentRequiredPropUndefined(\n      [{ prop: this.appTitle, propName: \"app-title\" }],\n      \"Side Navigation\"\n    );\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const {\n      appTitle,\n      menuOpen,\n      foregroundColor,\n      menuExpanded,\n      href,\n      status,\n      version,\n      collapsedIconLabels,\n      inline,\n    } = this;\n\n    const isSDevice = this.deviceSize === DEVICE_SIZES.S;\n    const isMdDevice = this.deviceSize === DEVICE_SIZES.M;\n    const isLgDevice = this.deviceSize >= DEVICE_SIZES.L;\n    const isAppNameSubtitleVariant = this.deviceSizeAppTitle === DEVICE_SIZES.S;\n    const displayExpandBtn = isMdDevice || (isLgDevice && !this.static);\n\n    const topBarProps: IcTopBar = {\n      isSDevice,\n      foregroundColor,\n      menuOpen,\n      href,\n      isAppNameSubtitleVariant,\n      appTitle,\n    };\n\n    return (\n      <Host\n        class={{\n          \"xs-menu-open\": menuOpen && isSDevice,\n          \"xs-menu-close\": !menuOpen && isSDevice,\n          \"sm-collapsed\": !isSDevice && !menuExpanded,\n          \"sm-expanded\": !isSDevice && menuExpanded,\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [\"collapsed-labels\"]:\n            !isSDevice && !menuExpanded && collapsedIconLabels,\n          [\"static\"]: this.static,\n          [\"inline\"]: inline,\n        }}\n      >\n        {isSDevice && this.renderTopBar({ ...topBarProps })}\n        <div class=\"side-navigation\" id=\"side-navigation\">\n          {!isSDevice && this.renderTopBar({ ...topBarProps })}\n          <div class=\"side-navigation-inner\">\n            {isSlotUsed(this.el, \"primary-navigation\") && (\n              <nav\n                class=\"primary-navigation\"\n                aria-labelledby=\"primary-navigation-landmark\"\n              >\n                <span\n                  aria-hidden=\"true\"\n                  class=\"navigation-landmark-title\"\n                  id=\"primary-navigation-landmark\"\n                >\n                  Primary\n                </span>\n                <ul class=\"navigation-list\">\n                  <slot name=\"primary-navigation\"></slot>\n                </ul>\n              </nav>\n            )}\n          </div>\n          <div\n            class={{\n              [\"bottom-wrapper\"]: true,\n              [\"classification-spacing\"]: hasClassificationBanner(),\n            }}\n          >\n            {isSlotUsed(this.el, \"secondary-navigation\") && (\n              <nav\n                class=\"secondary-navigation\"\n                aria-labelledby=\"secondary-navigation-landmark\"\n              >\n                <span\n                  aria-hidden=\"true\"\n                  class=\"navigation-landmark-title\"\n                  id=\"secondary-navigation-landmark\"\n                >\n                  Secondary\n                </span>\n                <ul class=\"navigation-list\">\n                  <slot name=\"secondary-navigation\"></slot>\n                </ul>\n              </nav>\n            )}\n            <div class=\"bottom-side-nav\">\n              {this.hasSecondaryNavigation && <ic-divider></ic-divider>}\n              {displayExpandBtn && (\n                <button\n                  class=\"menu-expand-button\"\n                  innerHTML={chevronIcon}\n                  onClick={this.toggleMenuExpanded}\n                  aria-label={`${\n                    menuExpanded ? \"Collapse\" : \"Expand\"\n                  } side navigation`}\n                ></button>\n              )}\n              <div class=\"app-status-wrapper\">\n                {status !== \"\" && (\n                  <div\n                    class={{\n                      [\"app-status\"]: true,\n                    }}\n                  >\n                    <ic-typography\n                      aria-label=\"app tag\"\n                      variant=\"label-uppercase\"\n                      class=\"app-status-text\"\n                    >\n                      {status}\n                    </ic-typography>\n                  </div>\n                )}\n                {version !== \"\" && (\n                  <ic-typography\n                    variant=\"label\"\n                    class=\"app-version\"\n                    aria-label=\"app version\"\n                  >\n                    {version}\n                  </ic-typography>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,14 @@
+import { fixture } from "@open-wc/testing-helpers";
+import { axe } from "jest-axe";
+import { checkShadowElementRendersCorrectly } from "../../utils/testa11y.helpers";
+describe("ic-side-navigation", () => {
+  it("passes accessibility", async () => {
+    const el = await fixture(`
+      <ic-side-navigation app-title="ACME" version="v0.0.0" status="BETA"></ic-side-navigation>
+
+    `);
+    checkShadowElementRendersCorrectly(el);
+    expect(await axe(el)).toHaveNoViolations();
+  });
+});
+//# sourceMappingURL=ic-side-navigation.test.a11y.js.map