npm - @ukic/web-components - Versions diffs - 2.1.0-beta.0 → 2.1.0-beta.2 - Mend

@ukic/web-components 2.1.0-beta.0 → 2.1.0-beta.2

Files changed (591) hide show

package/dist/collection/components/ic-side-navigation/ic-side-navigation.css CHANGED Viewed

@@ -334,10 +334,6 @@
     bottom: 0;
   }
-  :host(.inline) {
-    position: absolute;
-  }
   :host(.static) {
     position: relative;
     left: auto;
@@ -358,7 +354,7 @@
   }
   :host(.inline) .top-bar {
-    position: relative;
+    position: sticky;
   }
   :host(.anchor-right) .top-bar {
@@ -591,17 +587,24 @@
 @media screen and (min-width: 993px) {
   :host {
-    position: relative;
+    position: sticky;
     left: auto;
-    top: auto;
-    bottom: auto;
-  }
-  :host(.inline) {
-    position: relative;
+    top: 0;
+    bottom: 0;
   }
   :host(.sm-expanded) {
     box-shadow: none;
   }
 }
+@media (forced-colors: active) {
+  .side-navigation,
+  .top-bar {
+    border-right: var(--ic-hc-border);
+  }
+  slot[name="app-icon"]::slotted(svg) {
+    fill: currentcolor;
+  }
+}

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

@@ -5,13 +5,13 @@ 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
+ * @slot app-icon - Content will be rendered adjacent to the app 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.ANIMATION_DURATION = parseInt(getCssProperty("--ic-transition-duration-slow")) || 0;
     this.emitSideNavigationExpanded = (objDetails) => {
       const event = new CustomEvent("sideNavExpanded", {
         detail: {
@@ -210,10 +210,10 @@ export class SideNavigation {
      * @param value - padding-top css value
      */
     this.setParentPaddingTop = (value) => {
-      this.el.parentElement.style.paddingTop = value;
+      this.el.parentElement.style.setProperty("padding-top", value);
     };
     this.setParentPaddingLeft = (value) => {
-      this.el.parentElement.style.paddingLeft = value;
+      this.el.parentElement.style.setProperty("padding-left", value);
     };
     this.resizeObserver = null;
     this.resizeObserverCallback = (currSize) => {
@@ -224,6 +224,9 @@ export class SideNavigation {
             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,
@@ -233,6 +236,7 @@ export class SideNavigation {
         else {
           if (!this.disableAutoParentStyling) {
             this.setParentPaddingTop("0");
+            this.el.parentElement.style.setProperty("height", "100%");
           }
           this.emitSideNavigationExpanded({
             sideNavExpanded: this.menuExpanded,
@@ -393,7 +397,7 @@ export class SideNavigation {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Title to display."
+          "text": "The title of the app to be displayed."
         },
         "attribute": "app-title",
         "reflect": false
@@ -410,7 +414,7 @@ export class SideNavigation {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Status of application"
+          "text": "The status of the app to be displayed."
         },
         "attribute": "status",
         "reflect": false
@@ -427,7 +431,7 @@ export class SideNavigation {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Version of application"
+          "text": "The version of the app to be displayed."
         },
         "attribute": "version",
         "reflect": false
@@ -444,7 +448,7 @@ export class SideNavigation {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If true, the ic-side-navigation will load in an expanded state"
+          "text": "If `true`, the side navigation will load in an expanded state."
         },
         "attribute": "expanded",
         "reflect": false,
@@ -462,7 +466,7 @@ export class SideNavigation {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set application title link"
+          "text": "The URL that the app title link points to."
         },
         "attribute": "href",
         "reflect": false,
@@ -480,7 +484,7 @@ export class SideNavigation {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If true, the menu expand button is removed (PLEASE NOTE: This takes effect on screen sizes 992px and above)"
+          "text": "If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above)."
         },
         "attribute": "static",
         "reflect": false,
@@ -498,7 +502,7 @@ 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 icon and label will appear when side navigation is collapsed."
         },
         "attribute": "collapsed-icon-labels",
         "reflect": false,
@@ -516,7 +520,7 @@ export class SideNavigation {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If true, side navigation will be contained by parent element"
+          "text": "If `true`, side navigation will be contained by its parent element."
         },
         "attribute": "inline",
         "reflect": false,
@@ -534,7 +538,7 @@ export class SideNavigation {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If true, disable automatic parent wrapper styling"
+          "text": "If `true`, automatic parent wrapper styling will be disabled."
         },
         "attribute": "disable-auto-parent-styling",
         "reflect": false,

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

	@@ -1 +1 @@
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=\"small\"\n full-width=\"true\"\n appearance={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"]}
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 app 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 The title of the app to be displayed.\n /\n @Prop() appTitle!: string;\n /\n The status of the app to be displayed.\n /\n @Prop() status: string;\n /\n The version of the app to be displayed.\n /\n @Prop() version: string;\n /\n If `true`, the side navigation will load in an expanded state.\n /\n @Prop() expanded: boolean = false;\n /\n The URL that the app title link points to.\n /\n @Prop() href: string = \"/\";\n /\n If `true`, the menu expand button will be 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 @Prop() collapsedIconLabels: boolean = false;\n /\n If `true`, side navigation will be contained by its parent element.\n /\n @Prop() inline: boolean = false;\n\n /\n If `true`, automatic parent wrapper styling will be disabled.\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-slow\")) \|\| 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.setProperty(\"padding-top\", value);\n };\n\n private setParentPaddingLeft = (value: string) => {\n this.el.parentElement.style.setProperty(\"padding-left\", 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 if (this.inline) {\n this.el.parentElement.style.setProperty(\n \"height\",\n `calc(100% - ${topBarHeight}px)`\n );\n }\n }\n this.emitSideNavigationExpanded({\n sideNavExpanded: this.menuExpanded,\n sideNavMobile: true,\n });\n } else {\n if (!this.disableAutoParentStyling) {\n this.setParentPaddingTop(\"0\");\n this.el.parentElement.style.setProperty(\"height\", \"100%\");\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=\"small\"\n full-width=\"true\"\n appearance={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-skeleton/ic-skeleton.css CHANGED Viewed

@@ -493,3 +493,11 @@ video {
   background-color: var(--ic-architectural-600);
   animation: loading-light 1200ms infinite;
 }
+@media (forced-colors: active) {
+  :host(.skeleton) {
+    -ms-high-contrast-adjust: none;
+    forced-color-adjust: none;
+    background: currentcolor;
+  }
+}

package/dist/collection/components/ic-skeleton/ic-skeleton.js CHANGED Viewed

@@ -73,7 +73,7 @@ export class Skeleton {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The variant of the skeleton that will be displayed"
+          "text": "The variant of the skeleton that will be displayed."
         },
         "attribute": "variant",
         "reflect": false,
@@ -91,7 +91,7 @@ export class Skeleton {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Set the skeleton to the light variant"
+          "text": "If `true`, the skeleton will be set to the light variant."
         },
         "attribute": "light",
         "reflect": false,

package/dist/collection/components/ic-skeleton/ic-skeleton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-skeleton.js","sourceRoot":"","sources":["../../../src/components/ic-skeleton/ic-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQzE,MAAM,OAAO,QAAQ;;mBAKoB,WAAW;iBAIxB,KAAK;;;;;;EAU/B,iBAAiB;IACf,IAAI,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,KAAK,EAAE,IAAI,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,EAAE;MAC7D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACrB;SAAM,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,EAAE;MACvE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB;SAAM,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,KAAK,EAAE,EAAE;MACvE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;KACvB;EACH,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEhC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,iBAAiB,CAAC;IAE5C,MAAM,oBAAoB,GAAG;MAC3B,MAAM,EAAE,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;MACzE,KAAK,EAAE,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;KAC9C,CAAC;IAEF,MAAM,cAAc,GAAG;MACrB,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM;MAC5B,KAAK,EAAE,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;KAC9C,CAAC;IAEF,MAAM,aAAa,GAAG;MACpB,MAAM,EAAE,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;MACzE,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK;KAC3B,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,UAAU,CAAC,EAAE,IAAI;QAClB,CAAC,QAAQ,CAAC,EAAE,OAAO,IAAI,QAAQ;QAC/B,CAAC,OAAO,CAAC,EAAE,KAAK;OACjB,EACD,KAAK,EACH,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,oBAAoB,CAAC;QACxD,CAAC,IAAI,CAAC,UAAU,IAAI,cAAc,CAAC;QACnC,CAAC,IAAI,CAAC,SAAS,IAAI,aAAa,CAAC,mBAErB,MAAM;MAEpB,eAAQ,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport { IcSkeletonVariants } from \"./ic-skeleton.types\";\n\n@Component({\n tag: \"ic-skeleton\",\n styleUrl: \"ic-skeleton.css\",\n shadow: true,\n})\nexport class Skeleton {\n @Element() el: HTMLIcSkeletonElement;\n /*\n The variant of the skeleton that will be displayed\n /\n @Prop() variant?: IcSkeletonVariants = \"rectangle\";\n /\n ~~Set~~ the skeleton to the light variant\n */\n @Prop() light?: boolean = false;\n\n @State() hasChild: boolean;\n\n @State() default: boolean;\n\n @State() heightOnly: boolean;\n\n @State() widthOnly: boolean;\n\n componentWillLoad(): void {\n if (this.el.style.height === \"\" && this.el.style.width === \"\") {\n this.default = true;\n } else if (!(this.el.style.height === \"\") && this.el.style.width === \"\") {\n this.heightOnly = true;\n } else if (!(this.el.style.width === \"\") && this.el.style.height === \"\") {\n this.widthOnly = true;\n }\n }\n\n render() {\n const { variant, light } = this;\n\n this.hasChild = !!this.el.firstElementChild;\n\n const defaultSkeletonStyle = {\n height: variant == \"text\" ? \"1em\" : variant == \"circle\" ? \"25px\" : \"93px\",\n width: variant == \"circle\" ? \"25px\" : \"260px\",\n };\n\n const heightSetStyle = {\n height: this.el.style.height,\n width: variant == \"circle\" ? \"25px\" : \"260px\",\n };\n\n const widthSetStyle = {\n height: variant == \"text\" ? \"1em\" : variant == \"circle\" ? \"25px\" : \"93px\",\n width: this.el.style.width,\n };\n\n return (\n <Host\n class={{\n [\"skeleton\"]: true,\n [\"circle\"]: variant == \"circle\",\n [\"light\"]: light,\n }}\n style={\n (!this.hasChild && this.default && defaultSkeletonStyle) \|\|\n (this.heightOnly && heightSetStyle) \|\|\n (this.widthOnly && widthSetStyle)\n }\n aria-disabled=\"true\"\n >\n <slot />\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-skeleton.js","sourceRoot":"","sources":["../../../src/components/ic-skeleton/ic-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQzE,MAAM,OAAO,QAAQ;;mBAKoB,WAAW;iBAIxB,KAAK;;;;;;EAU/B,iBAAiB;IACf,IAAI,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,KAAK,EAAE,IAAI,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,EAAE;MAC7D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACrB;SAAM,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,EAAE;MACvE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB;SAAM,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,KAAK,EAAE,EAAE;MACvE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;KACvB;EACH,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEhC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,iBAAiB,CAAC;IAE5C,MAAM,oBAAoB,GAAG;MAC3B,MAAM,EAAE,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;MACzE,KAAK,EAAE,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;KAC9C,CAAC;IAEF,MAAM,cAAc,GAAG;MACrB,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM;MAC5B,KAAK,EAAE,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;KAC9C,CAAC;IAEF,MAAM,aAAa,GAAG;MACpB,MAAM,EAAE,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;MACzE,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK;KAC3B,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,UAAU,CAAC,EAAE,IAAI;QAClB,CAAC,QAAQ,CAAC,EAAE,OAAO,IAAI,QAAQ;QAC/B,CAAC,OAAO,CAAC,EAAE,KAAK;OACjB,EACD,KAAK,EACH,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,oBAAoB,CAAC;QACxD,CAAC,IAAI,CAAC,UAAU,IAAI,cAAc,CAAC;QACnC,CAAC,IAAI,CAAC,SAAS,IAAI,aAAa,CAAC,mBAErB,MAAM;MAEpB,eAAQ,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport { IcSkeletonVariants } from \"./ic-skeleton.types\";\n\n@Component({\n tag: \"ic-skeleton\",\n styleUrl: \"ic-skeleton.css\",\n shadow: true,\n})\nexport class Skeleton {\n @Element() el: HTMLIcSkeletonElement;\n /*\n The variant of the skeleton that will be displayed.\n /\n @Prop() variant?: IcSkeletonVariants = \"rectangle\";\n /\n If `true`, the skeleton will be set to the light variant.\n */\n @Prop() light?: boolean = false;\n\n @State() hasChild: boolean;\n\n @State() default: boolean;\n\n @State() heightOnly: boolean;\n\n @State() widthOnly: boolean;\n\n componentWillLoad(): void {\n if (this.el.style.height === \"\" && this.el.style.width === \"\") {\n this.default = true;\n } else if (!(this.el.style.height === \"\") && this.el.style.width === \"\") {\n this.heightOnly = true;\n } else if (!(this.el.style.width === \"\") && this.el.style.height === \"\") {\n this.widthOnly = true;\n }\n }\n\n render() {\n const { variant, light } = this;\n\n this.hasChild = !!this.el.firstElementChild;\n\n const defaultSkeletonStyle = {\n height: variant == \"text\" ? \"1em\" : variant == \"circle\" ? \"25px\" : \"93px\",\n width: variant == \"circle\" ? \"25px\" : \"260px\",\n };\n\n const heightSetStyle = {\n height: this.el.style.height,\n width: variant == \"circle\" ? \"25px\" : \"260px\",\n };\n\n const widthSetStyle = {\n height: variant == \"text\" ? \"1em\" : variant == \"circle\" ? \"25px\" : \"93px\",\n width: this.el.style.width,\n };\n\n return (\n <Host\n class={{\n [\"skeleton\"]: true,\n [\"circle\"]: variant == \"circle\",\n [\"light\"]: light,\n }}\n style={\n (!this.hasChild && this.default && defaultSkeletonStyle) \|\|\n (this.heightOnly && heightSetStyle) \|\|\n (this.widthOnly && widthSetStyle)\n }\n aria-disabled=\"true\"\n >\n <slot />\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-status-tag/ic-status-tag.css CHANGED Viewed

@@ -497,3 +497,11 @@ video {
   color: var(--ic-status-error);
   border: 1px solid var(--ic-status-error);
 }
+@media (forced-colors: active) {
+  .tag {
+    border: var(--ic-hc-border);
+    -ms-high-contrast-adjust: none;
+    forced-color-adjust: none;
+  }
+}

package/dist/collection/components/ic-status-tag/ic-status-tag.js CHANGED Viewed

@@ -107,7 +107,7 @@ export class StatusTag {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The size of the status tag."
+          "text": "If `true`, the small styling will be applied to the status tag."
         },
         "attribute": "small",
         "reflect": false,

package/dist/collection/components/ic-status-tag/ic-status-tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-status-tag.js","sourceRoot":"","sources":["../../../src/components/ic-status-tag/ic-status-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AAWvE,MAAM,OAAO,SAAS;;;kBAQmB,SAAS;sBAIH,QAAQ;iBAI3B,KAAK;;EAE/B,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,YAAY,CACb,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAClD,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,QAAQ;MACjB,cACE,KAAK,EAAE;UACL,CAAC,KAAK,CAAC,EAAE,IAAI;UACb,CAAC,GAAG,UAAU,IAAI,MAAM,EAAE,CAAC,EAAE,IAAI;UACjC,CAAC,OAAO,CAAC,EAAE,KAAK;SACjB;QAED,qBACE,OAAO,EAAC,iBAAiB,4BACD,KAAK;UAE7B,gBAAO,KAAK,CAAQ,CACN,CACT,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {\n IcStatusTagStatuses,\n IcStatusTagAppearance,\n} from \"./ic-status-tag.types\";\n\n@Component({\n tag: \"ic-status-tag\",\n styleUrl: \"ic-status-tag.css\",\n shadow: true,\n})\nexport class StatusTag {\n /*\n The content rendered within the status tag.\n /\n @Prop() label!: string;\n /\n The colour of the status tag.\n /\n @Prop() status?: IcStatusTagStatuses = \"neutral\";\n /\n The emphasis of the status tag.\n /\n @Prop() appearance?: IcStatusTagAppearance = \"filled\";\n /\n ~~The~~ ~~size~~ of the status tag.\n */\n @Prop() small?: boolean = false;\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Status Tag\"\n );\n }\n\n render() {\n const { label, status, appearance, small } = this;\n return (\n <Host role=\"status\">\n <strong\n class={{\n [\"tag\"]: true,\n [`${appearance}-${status}`]: true,\n [\"small\"]: small,\n }}\n >\n <ic-typography\n variant=\"label-uppercase\"\n apply-vertical-margins={false}\n >\n <span>{label}</span>\n </ic-typography>\n </strong>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-status-tag.js","sourceRoot":"","sources":["../../../src/components/ic-status-tag/ic-status-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AAWvE,MAAM,OAAO,SAAS;;;kBAQmB,SAAS;sBAIH,QAAQ;iBAI3B,KAAK;;EAE/B,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,YAAY,CACb,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAClD,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,QAAQ;MACjB,cACE,KAAK,EAAE;UACL,CAAC,KAAK,CAAC,EAAE,IAAI;UACb,CAAC,GAAG,UAAU,IAAI,MAAM,EAAE,CAAC,EAAE,IAAI;UACjC,CAAC,OAAO,CAAC,EAAE,KAAK;SACjB;QAED,qBACE,OAAO,EAAC,iBAAiB,4BACD,KAAK;UAE7B,gBAAO,KAAK,CAAQ,CACN,CACT,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {\n IcStatusTagStatuses,\n IcStatusTagAppearance,\n} from \"./ic-status-tag.types\";\n\n@Component({\n tag: \"ic-status-tag\",\n styleUrl: \"ic-status-tag.css\",\n shadow: true,\n})\nexport class StatusTag {\n /*\n The content rendered within the status tag.\n /\n @Prop() label!: string;\n /\n The colour of the status tag.\n /\n @Prop() status?: IcStatusTagStatuses = \"neutral\";\n /\n The emphasis of the status tag.\n /\n @Prop() appearance?: IcStatusTagAppearance = \"filled\";\n /\n If `true`, the small styling will be applied to the status tag.\n */\n @Prop() small?: boolean = false;\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Status Tag\"\n );\n }\n\n render() {\n const { label, status, appearance, small } = this;\n return (\n <Host role=\"status\">\n <strong\n class={{\n [\"tag\"]: true,\n [`${appearance}-${status}`]: true,\n [\"small\"]: small,\n }}\n >\n <ic-typography\n variant=\"label-uppercase\"\n apply-vertical-margins={false}\n >\n <span>{label}</span>\n </ic-typography>\n </strong>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-step/ic-step.css CHANGED Viewed

@@ -77,7 +77,7 @@
   color: var(--ic-architectural-200);
 }
-.disabled .step-icon-inner {
+.disabled .step-icon {
   border: 1px dashed var(--ic-architectural-200);
   width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));
   height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));
@@ -144,3 +144,38 @@
 .check-icon > svg > path {
   fill: white;
 }
+/** High Contrast **/
+@media (forced-colors: active) {
+  .step-connect:not(.disabled .step-connect) {
+    border: var(--ic-hc-border);
+  }
+  .active .step-icon-inner,
+  .completed .step-icon-inner,
+  .current .step-icon-inner {
+    forced-color-adjust: none;
+    box-shadow: inset canvastext 0 0 0 2px;
+    background-color: transparent;
+    color: canvastext;
+  }
+  .current .step-icon {
+    padding: 0;
+    border: none;
+  }
+  .disabled,
+  .disabled .step-title-area {
+    color: Graytext;
+  }
+  .step-connect-inner,
+  .completed .step-connect {
+    background-color: canvastext;
+  }
+  .check-icon > svg > path {
+    fill: canvastext;
+  }
+}

package/dist/collection/components/ic-step/ic-step.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import { Host, h } from "@stencil/core";
 import checkIcon from "../../assets/check-icon.svg";
-import { onComponentRequiredPropUndefined } from "../../utils/helpers";
 export class Step {
   constructor() {
     this.stepType = "active";
@@ -9,12 +8,6 @@ export class Step {
     this.stepNum = undefined;
     this.lastStep = undefined;
   }
-  componentDidLoad() {
-    onComponentRequiredPropUndefined([
-      { prop: this.stepNum, propName: "step-num" },
-      { prop: this.lastStep, propName: "last-step" },
-    ], "Step");
-  }
   render() {
     let icon;
     if (this.stepType !== "completed") {
@@ -73,7 +66,7 @@ export class Step {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "State of step"
+          "text": "The state of the step within the stepper."
         },
         "attribute": "step-type",
         "reflect": false,
@@ -91,7 +84,7 @@ export class Step {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Name of step"
+          "text": "The name of the step within the stepper."
         },
         "attribute": "step-title",
         "reflect": false
@@ -108,7 +101,7 @@ export class Step {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Additional information about step"
+          "text": "The additional information about the step."
         },
         "attribute": "step-subtitle",
         "reflect": false
@@ -121,12 +114,12 @@ export class Step {
           "resolved": "number",
           "references": {}
         },
-        "required": true,
-        "optional": false,
+        "required": false,
+        "optional": true,
         "docs": {
           "tags": [{
               "name": "internal",
-              "text": "The step number, managed by ic-stepper"
+              "text": "The step number, managed by ic-stepper."
             }],
           "text": ""
         },
@@ -141,12 +134,12 @@ export class Step {
           "resolved": "boolean",
           "references": {}
         },
-        "required": true,
-        "optional": false,
+        "required": false,
+        "optional": true,
         "docs": {
           "tags": [{
               "name": "internal",
-              "text": "Final step in series flag, managed by ic-stepper"
+              "text": "If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper."
             }],
           "text": ""
         },

package/dist/collection/components/ic-step/ic-step.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-step.js","sourceRoot":"","sources":["../../../src/components/ic-step/ic-step.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,SAAS,MAAM,6BAA6B,CAAC;~~AACpD~~,~~OAAO,EAAE,gCAAgC,EAAE,~~MAAM,~~qBAAqB,CAAC;AAQvE,MAAM,~~OAAO,IAAI;;oBAKkB,QAAQ;;;;;;EAsBzC,~~gBAAgB;IACd,gCAAgC,CAC9B;MACE,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE;MAC5C,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE;KAC/C,EACD,~~MAAM~~,CACP,CAAC~~;~~EACJ,CAAC;EAED,MAAM;~~IACJ,IAAI,IAAI,CAAC;IACT,IAAI,IAAI,CAAC,QAAQ,KAAK,WAAW,EAAE;MACjC,IAAI,GAAG,CACL,qBAAe,OAAO,EAAC,gBAAgB;QACrC,YAAM,KAAK,EAAC,iBAAiB,iBAAa,MAAM,IAC7C,IAAI,CAAC,OAAO,CACR,CACO,CACjB,CAAC;KACH;SAAM;MACL,IAAI,GAAG,CACL,WAAK,KAAK,EAAC,iBAAiB,iBAAa,MAAM;QAC7C,YAAM,KAAK,EAAC,YAAY,EAAC,SAAS,EAAE,SAAS,GAAS,CAClD,CACP,CAAC;KACH;IAED,IAAI,SAAS,GAAG,EAAE,CAAC;IAEnB,IAAI,IAAI,CAAC,QAAQ,KAAK,WAAW,EAAE;MACjC,SAAS,GAAG,kBAAkB,CAAC;KAChC;SAAM,IAAI,IAAI,CAAC,QAAQ,KAAK,UAAU,EAAE;MACvC,SAAS,GAAG,iBAAiB,CAAC;KAC/B;IAED,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,CAChD,WAAK,KAAK,EAAC,oBAAoB,GAAO,CACvC,CAAC;IACF,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,CAClC,WACE,KAAK,EAAE;QACL,CAAC,cAAc,CAAC,EAAE,IAAI;QACtB,CAAC,oBAAoB,CAAC,EACpB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,oBAAoB,CAAC;OACjE,IAEA,UAAU,CACP,CACP,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,UAAU,gBACH,QAAQ,IAAI,CAAC,OAAO,GAAG,SAAS,EAAE,kBAChC,IAAI,CAAC,QAAQ,IAAI,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EACxD,KAAK,EAAE;QACL,CAAC,oBAAoB,CAAC,EACpB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,oBAAoB,CAAC;OACjE;MAED,WACE,KAAK,EAAE;UACL,CAAC,MAAM,CAAC,EAAE,IAAI;UACd,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI;SAC3B;QAED,WAAK,KAAK,EAAC,UAAU;UACnB,WAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAO;UAClC,SAAS,CACN;QACL,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CACxC,WAAK,KAAK,EAAC,iBAAiB;UACzB,IAAI,CAAC,SAAS,IAAI,CACjB,qBAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,YAAY,IACvD,IAAI,CAAC,SAAS,CACD,CACjB;UACA,IAAI,CAAC,YAAY,IAAI,CACpB,qBAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,eAAe,IACnD,IAAI,CAAC,YAAY,CACJ,CACjB,CACG,CACP,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element } from \"@stencil/core\";\nimport checkIcon from \"../../assets/check-icon.svg\";\nimport { ~~onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {~~ IcStepTypes } from \"./ic-step.types\";\n\n@Component({\n tag: \"ic-step\",\n styleUrl: \"ic-step.css\",\n shadow: true,\n})\nexport class Step {\n @Element() el: HTMLIcStepElement;\n /*\n ~~State~~ of step\n /\n @Prop() stepType?: IcStepTypes = \"active\";\n\n /\n ~~Name~~ of step\n /\n @Prop() stepTitle?: string;\n\n /\n ~~Additional~~ information about step\n /\n @Prop() stepSubtitle?: string;\n\n /\n @internal The step number, managed by ic-stepper\n /\n @Prop() stepNum!: number;\n\n /\n @internal ~~Final~~ step in series ~~flag,~~ managed by ic-stepper\n */\n @Prop() lastStep!: boolean;\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [\n { prop: this.stepNum, propName: \"step-num\" },\n { prop: this.lastStep, propName: \"last-step\" },\n ],\n \"Step\"\n );\n }\n\n render() {\n let icon;\n if (this.stepType !== \"completed\") {\n icon = (\n <ic-typography variant=\"subtitle-small\">\n <span class=\"step-icon-inner\" aria-hidden=\"true\">\n {this.stepNum}\n </span>\n </ic-typography>\n );\n } else {\n icon = (\n <div class=\"step-icon-inner\" aria-hidden=\"true\">\n <span class=\"check-icon\" innerHTML={checkIcon}></span>\n </div>\n );\n }\n\n let ariaLabel = \"\";\n\n if (this.stepType === \"completed\") {\n ariaLabel = \". Completed step\";\n } else if (this.stepType === \"disabled\") {\n ariaLabel = \". Disabled step\";\n }\n\n const partialBar = this.stepType === \"current\" && (\n <div class=\"step-connect-inner\"></div>\n );\n const finalStep = !this.lastStep && (\n <div\n class={{\n [\"step-connect\"]: true,\n [\"aligned-full-width\"]:\n this.el.parentElement.classList.contains(\"aligned-full-width\"),\n }}\n >\n {partialBar}\n </div>\n );\n\n return (\n <Host\n role=\"listitem\"\n aria-label={`Step ${this.stepNum}${ariaLabel}`}\n aria-current={this.stepType == \"current\" ? \"step\" : null}\n class={{\n [\"aligned-full-width\"]:\n this.el.parentElement.classList.contains(\"aligned-full-width\"),\n }}\n >\n <div\n class={{\n [\"step\"]: true,\n [`${this.stepType}`]: true,\n }}\n >\n <div class=\"step-top\">\n <div class=\"step-icon\">{icon}</div>\n {finalStep}\n </div>\n {(this.stepTitle \|\| this.stepSubtitle) && (\n <div class=\"step-title-area\">\n {this.stepTitle && (\n <ic-typography variant=\"subtitle-large\" class=\"step-title\">\n {this.stepTitle}\n </ic-typography>\n )}\n {this.stepSubtitle && (\n <ic-typography variant=\"caption\" class=\"step-subtitle\">\n {this.stepSubtitle}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-step.js","sourceRoot":"","sources":["../../../src/components/ic-step/ic-step.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,SAAS,MAAM,6BAA6B,CAAC;AAQpD,MAAM,OAAO,IAAI;;oBAKkB,QAAQ;;;;;;EAsBzC,MAAM;IACJ,IAAI,IAAI,CAAC;IACT,IAAI,IAAI,CAAC,QAAQ,KAAK,WAAW,EAAE;MACjC,IAAI,GAAG,CACL,qBAAe,OAAO,EAAC,gBAAgB;QACrC,YAAM,KAAK,EAAC,iBAAiB,iBAAa,MAAM,IAC7C,IAAI,CAAC,OAAO,CACR,CACO,CACjB,CAAC;KACH;SAAM;MACL,IAAI,GAAG,CACL,WAAK,KAAK,EAAC,iBAAiB,iBAAa,MAAM;QAC7C,YAAM,KAAK,EAAC,YAAY,EAAC,SAAS,EAAE,SAAS,GAAS,CAClD,CACP,CAAC;KACH;IAED,IAAI,SAAS,GAAG,EAAE,CAAC;IAEnB,IAAI,IAAI,CAAC,QAAQ,KAAK,WAAW,EAAE;MACjC,SAAS,GAAG,kBAAkB,CAAC;KAChC;SAAM,IAAI,IAAI,CAAC,QAAQ,KAAK,UAAU,EAAE;MACvC,SAAS,GAAG,iBAAiB,CAAC;KAC/B;IAED,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,CAChD,WAAK,KAAK,EAAC,oBAAoB,GAAO,CACvC,CAAC;IACF,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,CAClC,WACE,KAAK,EAAE;QACL,CAAC,cAAc,CAAC,EAAE,IAAI;QACtB,CAAC,oBAAoB,CAAC,EACpB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,oBAAoB,CAAC;OACjE,IAEA,UAAU,CACP,CACP,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,UAAU,gBACH,QAAQ,IAAI,CAAC,OAAO,GAAG,SAAS,EAAE,kBAChC,IAAI,CAAC,QAAQ,IAAI,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EACxD,KAAK,EAAE;QACL,CAAC,oBAAoB,CAAC,EACpB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,oBAAoB,CAAC;OACjE;MAED,WACE,KAAK,EAAE;UACL,CAAC,MAAM,CAAC,EAAE,IAAI;UACd,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI;SAC3B;QAED,WAAK,KAAK,EAAC,UAAU;UACnB,WAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAO;UAClC,SAAS,CACN;QACL,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CACxC,WAAK,KAAK,EAAC,iBAAiB;UACzB,IAAI,CAAC,SAAS,IAAI,CACjB,qBAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,YAAY,IACvD,IAAI,CAAC,SAAS,CACD,CACjB;UACA,IAAI,CAAC,YAAY,IAAI,CACpB,qBAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,eAAe,IACnD,IAAI,CAAC,YAAY,CACJ,CACjB,CACG,CACP,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element } from \"@stencil/core\";\nimport checkIcon from \"../../assets/check-icon.svg\";\nimport { IcStepTypes } from \"./ic-step.types\";\n\n@Component({\n tag: \"ic-step\",\n styleUrl: \"ic-step.css\",\n shadow: true,\n})\nexport class Step {\n @Element() el: HTMLIcStepElement;\n /*\n The state of the step within the stepper.\n /\n @Prop() stepType?: IcStepTypes = \"active\";\n\n /\n The name of the step within the stepper.\n /\n @Prop() stepTitle?: string;\n\n /\n The additional information about the step.\n /\n @Prop() stepSubtitle?: string;\n\n /\n @internal The step number, managed by ic-stepper.\n /\n @Prop() stepNum?: number;\n\n /\n @internal If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper.\n */\n @Prop() lastStep?: boolean;\n\n render() {\n let icon;\n if (this.stepType !== \"completed\") {\n icon = (\n <ic-typography variant=\"subtitle-small\">\n <span class=\"step-icon-inner\" aria-hidden=\"true\">\n {this.stepNum}\n </span>\n </ic-typography>\n );\n } else {\n icon = (\n <div class=\"step-icon-inner\" aria-hidden=\"true\">\n <span class=\"check-icon\" innerHTML={checkIcon}></span>\n </div>\n );\n }\n\n let ariaLabel = \"\";\n\n if (this.stepType === \"completed\") {\n ariaLabel = \". Completed step\";\n } else if (this.stepType === \"disabled\") {\n ariaLabel = \". Disabled step\";\n }\n\n const partialBar = this.stepType === \"current\" && (\n <div class=\"step-connect-inner\"></div>\n );\n const finalStep = !this.lastStep && (\n <div\n class={{\n [\"step-connect\"]: true,\n [\"aligned-full-width\"]:\n this.el.parentElement.classList.contains(\"aligned-full-width\"),\n }}\n >\n {partialBar}\n </div>\n );\n\n return (\n <Host\n role=\"listitem\"\n aria-label={`Step ${this.stepNum}${ariaLabel}`}\n aria-current={this.stepType == \"current\" ? \"step\" : null}\n class={{\n [\"aligned-full-width\"]:\n this.el.parentElement.classList.contains(\"aligned-full-width\"),\n }}\n >\n <div\n class={{\n [\"step\"]: true,\n [`${this.stepType}`]: true,\n }}\n >\n <div class=\"step-top\">\n <div class=\"step-icon\">{icon}</div>\n {finalStep}\n </div>\n {(this.stepTitle \|\| this.stepSubtitle) && (\n <div class=\"step-title-area\">\n {this.stepTitle && (\n <ic-typography variant=\"subtitle-large\" class=\"step-title\">\n {this.stepTitle}\n </ic-typography>\n )}\n {this.stepSubtitle && (\n <ic-typography variant=\"caption\" class=\"step-subtitle\">\n {this.stepSubtitle}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-stepper/ic-stepper.js CHANGED Viewed

@@ -110,7 +110,7 @@ export class IcStepper {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "How the stepper should be aligned in its container."
+          "text": "The alignment of the stepper within its container."
         },
         "attribute": "aligned",
         "reflect": false,