npm - @ukic/web-components - Versions diffs - 2.1.0-beta.11 → 2.1.0-beta.13 - Mend

@ukic/web-components 2.1.0-beta.11 → 2.1.0-beta.13

Files changed (580) hide show

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 app title at the very top of the side navigation.\n * @slot app-title - Handle routing by nesting a route in the app title.\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 app title to be displayed. This is required, unless a slotted app title link is used.\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 @internal 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(\"themeChange\", { 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 const hasTitle = this.appTitle !== \"\" && this.appTitle !== undefined;\n\n const Component = isSlotUsed(this.el, \"app-title\") ? \"div\" : \"a\";\n\n const attrs = Component == \"a\" && {\n href: href,\n };\n\n return (\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 {(hasTitle \|\| isSlotUsed(this.el, \"app-title\")) && (\n <Component {...attrs} 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 {isSlotUsed(this.el, \"app-title\") ? (\n <slot name=\"app-title\"></slot>\n ) : (\n appTitle\n )}\n </ic-typography>\n </Component>\n )}\n </div>\n </div>\n );\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.styleSlottedCollapsedIconLabel();\n this.arrangeSlottedNavigationItem(this.menuExpanded);\n this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n !isSlotUsed(this.el, \"app-title\") &&\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 app-title - Handle routing by nesting a route in the app title.\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 app title to be displayed. This is required, unless a slotted app title link is used.\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 @internal 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(\"themeChange\", { 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.setExpandedButtonHeight();\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 side 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 setExpandedButtonHeight = () => {\n const appStatusWrapper = this.el.shadowRoot.querySelector(\n \"#side-navigation > .bottom-wrapper > .bottom-side-nav > .app-status-wrapper\"\n ) as HTMLDivElement;\n\n if (appStatusWrapper.offsetHeight !== 0) {\n this.el.style.setProperty(\n \"--sm-side-navigation-bottom-bar-height\",\n `${appStatusWrapper.offsetHeight}px`\n );\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 const hasTitle = this.appTitle !== \"\" && this.appTitle !== undefined;\n\n const Component = isSlotUsed(this.el, \"app-title\") ? \"div\" : \"a\";\n\n const attrs = Component == \"a\" && {\n href: href,\n };\n\n return (\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 {(hasTitle \|\| isSlotUsed(this.el, \"app-title\")) && (\n <Component {...attrs} 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 {isSlotUsed(this.el, \"app-title\") ? (\n <slot name=\"app-title\"></slot>\n ) : (\n appTitle\n )}\n </ic-typography>\n </Component>\n )}\n </div>\n </div>\n );\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.styleSlottedCollapsedIconLabel();\n this.arrangeSlottedNavigationItem(this.menuExpanded);\n this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n this.setExpandedButtonHeight();\n\n !isSlotUsed(this.el, \"app-title\") &&\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-status-tag/ic-status-tag.css CHANGED Viewed

@@ -442,16 +442,17 @@ video {
 .tag {
-  padding: var(--ic-space-xs) var(--ic-space-sm);
+  padding: var(--ic-space-xxs) var(--ic-space-sm);
   font-size: 0.875rem;
-  border-radius: 5rem;
+  border-radius: var(--ic-space-md);
   display: inline-block;
   min-width: 2.5rem;
   text-align: center;
 }
 .small {
-  padding: var(--ic-space-xxs) var(--ic-space-sm);
+  padding: var(--ic-space-xxxs) var(--ic-space-sm);
+  border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));
 }
 .filled-neutral {
@@ -477,25 +478,25 @@ video {
 .outlined-neutral {
   background-color: var(--ic-architectural-200);
   color: var(--ic-color-secondary-text);
-  border: 0.063rem solid var(--ic-architectural-400);
+  border: var(--ic-space-1px) solid var(--ic-architectural-400);
 }
 .outlined-success {
   background-color: var(--ic-status-success-background);
   color: var(--ic-status-success);
-  border: 0.063rem solid var(--ic-status-success);
+  border: var(--ic-space-1px) solid var(--ic-status-success);
 }
 .outlined-warning {
   background-color: var(--ic-status-warning-background);
   color: var(--ic-status-warning-dark);
-  border: 0.063rem solid var(--ic-status-warning-dark);
+  border: var(--ic-space-1px) solid var(--ic-status-warning-dark);
 }
 .outlined-danger {
   background-color: var(--ic-status-error-background);
   color: var(--ic-status-error);
-  border: 0.063rem solid var(--ic-status-error);
+  border: var(--ic-space-1px) solid var(--ic-status-error);
 }
 @media (forced-colors: active) {

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

@@ -167,7 +167,7 @@
 }
 .disabled .step-icon-inner {
-  border: 0.063rem dashed var(--ic-architectural-200);
+  border: var(--ic-space-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));
 }

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

@@ -478,7 +478,7 @@ input {
   position: relative;
   border-radius: 100vw;
   background-color: var(--ic-architectural-200);
-  border: 0.063rem solid var(--ic-architectural-700);
+  border: var(--ic-space-1px) solid var(--ic-architectural-700);
   box-sizing: border-box;
   transition: var(--ic-transition-duration-fast);
 }
@@ -559,7 +559,7 @@ input {
 .ic-switch-input:focus:not([disabled]) + .ic-switch-toggle,
 .ic-switch-input:focus-visible:not([disabled]) + .ic-switch-toggle {
-  box-shadow: 0 0 0 0.063rem var(--ic-architectural-white),
+  box-shadow: 0 0 0 var(--ic-space-1px) var(--ic-architectural-white),
     0 0 0 0.188rem var(--ic-action-default),
     0 0 0 0.5rem var(--ic-action-default-active-alpha);
 }
@@ -578,7 +578,7 @@ input {
 .ic-switch-input:disabled + .ic-switch-toggle {
   background-color: var(--ic-architectural-80);
-  border: 0.063rem dashed var(--ic-architectural-300);
+  border: var(--ic-space-1px) dashed var(--ic-architectural-300);
 }
 .ic-switch-input:disabled ~ .ic-switch-checked-status {
@@ -591,7 +591,7 @@ input {
 .ic-switch-input:disabled:checked + .ic-switch-toggle {
   background-color: var(--ic-status-info-background);
-  border: 0.063rem dashed #98c9f5;
+  border: var(--ic-space-1px) dashed #98c9f5;
 }
 .ic-switch-input:disabled:checked + .ic-switch-toggle::before {

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

@@ -488,16 +488,16 @@ video {
   --background-color-active: var(--ic-action-dark-bg-active);
 }
-:host([selected]) {
+:host(.selected) {
   border-bottom: var(--ic-space-xxs) solid var(--indicator-color);
 }
-:host([disabled]) {
+:host(.disabled) {
   pointer-events: none;
   color: var(--ic-architectural-300);
 }
-:host([selected].with-transition) {
+:host(.selected.with-transition) {
   transition: all var(--ic-easing-transition-slow),
     border-color var(--ic-transition-duration-slow);
 }
@@ -515,7 +515,7 @@ video {
     border-bottom: var(--ic-space-xxs) solid canvas;
   }
-  :host([disabled]) {
+  :host(.disabled) {
     color: GrayText;
   }
 }

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

@@ -24,6 +24,7 @@ export class Tab {
     };
     this.handleFocus = () => {
       if (!this.focusFromClick) {
+        this.focusTabId = this.tabId;
         this.tabFocus.emit({
           tabId: this.tabId,
           contextId: this.contextId,
@@ -55,11 +56,20 @@ export class Tab {
   componentDidUpdate() {
     this.isInitialRender = false;
   }
+  connectedCallback() {
+    this.tabCreated.emit(this.host);
+  }
+  disconnectedCallback() {
+    const tabContext = document.querySelector(`ic-tab-context[context-id=${this.contextId}]`);
+    tabContext.tabRemovedHandler(!!this.focusTabId);
+  }
   render() {
     const { disabled, selected, appearance } = this;
     return (h(Host, { class: {
         ["with-transition"]: !this.isInitialRender,
         ["ic-tab-light"]: appearance === IcThemeForegroundEnum.Light,
+        ["selected"]: selected,
+        ["disabled"]: disabled,
       }, role: "tab", "aria-selected": selected ? "true" : "false", onClick: this.handleClick, onFocus: this.handleFocus, onMouseDown: this.handleMouseDown, "aria-disabled": disabled ? "true" : "false", tabindex: this.selected ? 0 : -1 }, this.host.querySelector('[slot="icon"]') && h("slot", { name: "icon" }), h("ic-typography", { class: "ic-tab-label", variant: "label" }, h("span", null, h("slot", null)))));
   }
   static get is() { return "ic-tab"; }
@@ -251,6 +261,46 @@ export class Tab {
             }
           }
         }
+      }, {
+        "method": "tabCreated",
+        "name": "tabCreated",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Emitted when a tab is dynamically created."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "HTMLIcTabElement",
+          "resolved": "HTMLIcTabElement",
+          "references": {
+            "HTMLIcTabElement": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "tabRemoved",
+        "name": "tabRemoved",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Emitted when a tab is unmounted."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
       }];
   }
   static get methods() {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-tab.js","sourceRoot":"","sources":["../../../src/components/ic-tab/ic-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,IAAI,EACJ,CAAC,EACD,MAAM,GACP,MAAM,eAAe,CAAC;AAGvB,OAAO,EAEL,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAE3B;;GAEG;AAMH,MAAM,OAAO,GAAG;;~~IAiCN~~,oBAAe,GAAY,IAAI,CAAC;IAChC,mBAAc,GAAY,KAAK,CAAC;~~IAEhC~~,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;QACjB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,QAAQ,EAAE,IAAI,CAAC,WAAW;OAC3B,CAAC,CAAC;MACH,IAAI,IAAI,CAAC,cAAc,EAAE;QACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;UACjB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,SAAS,EAAE,IAAI,CAAC,SAAS;UACzB,QAAQ,EAAE,IAAI,CAAC,WAAW;SAC3B,CAAC,CAAC;QACH,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;OAC7B;IACH,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;QACxB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;UACjB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,SAAS,EAAE,IAAI,CAAC,SAAS;UACzB,QAAQ,EAAE,IAAI,CAAC,WAAW;SAC3B,CAAC,CAAC;OACJ;IACH,CAAC,CAAC;IAEM,oBAAe,GAAG,GAAG,EAAE;MAC7B,iDAAiD;MACjD,wFAAwF;MACxF,iFAAiF;MACjF,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC7B,CAAC,CAAC;~~qBA/D4C~~,SAAS;oBAK1B,KAAK;oBAGY,KAAK;;;sBASD,MAAM;;~~EAgDxD~~;;KAEG;EAEH,KAAK,CAAC,QAAQ;IACZ,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;KACnB;EACH,CAAC;EAED,kBAAkB;IAChB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;EAC/B,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IAChD,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,iBAAiB,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe;QAC1C,CAAC,cAAc,CAAC,EAAE,UAAU,KAAK,qBAAqB,CAAC,KAAK;~~OAC7D~~,EACD,IAAI,EAAC,KAAK,mBACK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC1C,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,WAAW,EAAE,IAAI,CAAC,eAAe,mBAClB,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC1C,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;MAE/B,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ;MACtE,qBAAe,KAAK,EAAC,cAAc,EAAC,OAAO,EAAC,OAAO;QACjD;UACE,eAAa,CACR,CACO,CACX,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n h,\n Method,\n} from \"@stencil/core\";\n\nimport { IcTabClickEventDetail } from \"./ic-tab.types\";\nimport {\n IcThemeForegroundNoDefault,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n/*\n @slot icon - Content will be rendered next to the tab label.\n /\n@Component({\n tag: \"ic-tab\",\n styleUrl: \"ic-tab.css\",\n shadow: true,\n})\nexport class Tab {\n @Element() host: HTMLIcTabElement;\n\n /* @internal The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled?: boolean = false;\n\n /* @internal If `true`, the tab will display with a selected indicator and tabIndex will be set. /\n @Prop({ reflect: true }) selected?: boolean = false;\n\n /* @internal The shared ID between panel and tab. /\n @Prop({ reflect: true }) tabId?: string;\n\n /* @internal The position of the tab inside the tabs array in context. /\n @Prop() tabPosition?: number;\n\n /* @internal Determines whether the light or dark variant of the tabs should be displayed. /\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n /\n @internal Emitted when a tab is selected.\n /\n @Event() tabClick: EventEmitter<IcTabClickEventDetail>;\n\n /\n @internal Emitted when a tab is focussed.\n /\n @Event() tabFocus: EventEmitter<IcTabClickEventDetail>;\n\n private isInitialRender: boolean = true;\n private focusFromClick: boolean = false;\n\n private handleClick = () => {\n this.tabClick.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n if (this.focusFromClick) {\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n this.focusFromClick = false;\n }\n };\n\n private handleFocus = () => {\n if (!this.focusFromClick) {\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n }\n };\n\n private handleMouseDown = () => {\n //set flag so that focus gets handled after click\n //there is a timing issue where a long click only causes focus to happen & not the click\n //the focus does need to be a seperate event though to handle focus from keyboard\n this.focusFromClick = true;\n };\n\n /\n Sets focus on the tab.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.host) {\n this.host.focus();\n }\n }\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\n }\n\n render() {\n const { disabled, selected, appearance } = this;\n return (\n <Host\n class={{\n [\"with-transition\"]: !this.isInitialRender,\n [\"ic-tab-light\"]: appearance === IcThemeForegroundEnum.Light,\n }}\n role=\"tab\"\n aria-selected={selected ? \"true\" : \"false\"}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n onMouseDown={this.handleMouseDown}\n aria-disabled={disabled ? \"true\" : \"false\"}\n tabindex={this.selected ? 0 : -1}\n >\n {this.host.querySelector('[slot=\"icon\"]') && <slot name=\"icon\"></slot>}\n <ic-typography class=\"ic-tab-label\" variant=\"label\">\n <span>\n <slot></slot>\n </span>\n </ic-typography>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-tab.js","sourceRoot":"","sources":["../../../src/components/ic-tab/ic-tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n h,\n Method,\n} from \"@stencil/core\";\n\nimport { IcTabClickEventDetail } from \"./ic-tab.types\";\nimport {\n IcThemeForegroundNoDefault,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n/*\n @slot icon - Content will be rendered next to the tab label.\n /\n@Component({\n tag: \"ic-tab\",\n styleUrl: \"ic-tab.css\",\n shadow: true,\n})\nexport class Tab {\n @Element() host: HTMLIcTabElement;\n\n /* @internal The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled?: boolean = false;\n\n /* @internal If `true`, the tab will display with a selected indicator and tabIndex will be set. /\n @Prop({ reflect: true }) selected?: boolean = false;\n\n /* @internal The shared ID between panel and tab. /\n @Prop({ reflect: true }) tabId?: string;\n\n /* @internal The position of the tab inside the tabs array in context. /\n @Prop() tabPosition?: number;\n\n /* @internal Determines whether the light or dark variant of the tabs should be displayed. /\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n /\n @internal Emitted when a tab is selected.\n /\n @Event() tabClick: EventEmitter<IcTabClickEventDetail>;\n\n /\n @internal Emitted when a tab is focussed.\n /\n @Event() tabFocus: EventEmitter<IcTabClickEventDetail>;\n /\n @internal Emitted when a tab is dynamically created.\n /\n @Event() tabCreated: EventEmitter<HTMLIcTabElement>;\n\n /\n @internal Emitted when a tab is unmounted.\n /\n @Event() tabRemoved: EventEmitter<void>;\n\n private isInitialRender: boolean = true;\n private focusFromClick: boolean = false;\n private focusTabId: string;\n\n private handleClick = () => {\n this.tabClick.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n if (this.focusFromClick) {\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n this.focusFromClick = false;\n }\n };\n\n private handleFocus = () => {\n if (!this.focusFromClick) {\n this.focusTabId = this.tabId;\n\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n }\n };\n\n private handleMouseDown = () => {\n //set flag so that focus gets handled after click\n //there is a timing issue where a long click only causes focus to happen & not the click\n //the focus does need to be a seperate event though to handle focus from keyboard\n this.focusFromClick = true;\n };\n\n /\n Sets focus on the tab.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.host) {\n this.host.focus();\n }\n }\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\n }\n\n connectedCallback(): void {\n this.tabCreated.emit(this.host);\n }\n\n disconnectedCallback(): void {\n const tabContext = document.querySelector(\n `ic-tab-context[context-id=${this.contextId}]`\n ) as HTMLIcTabContextElement;\n tabContext.tabRemovedHandler(!!this.focusTabId);\n }\n\n render() {\n const { disabled, selected, appearance } = this;\n return (\n <Host\n class={{\n [\"with-transition\"]: !this.isInitialRender,\n [\"ic-tab-light\"]: appearance === IcThemeForegroundEnum.Light,\n [\"selected\"]: selected,\n [\"disabled\"]: disabled,\n }}\n role=\"tab\"\n aria-selected={selected ? \"true\" : \"false\"}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n onMouseDown={this.handleMouseDown}\n aria-disabled={disabled ? \"true\" : \"false\"}\n tabindex={this.selected ? 0 : -1}\n >\n {this.host.querySelector('[slot=\"icon\"]') && <slot name=\"icon\"></slot>}\n <ic-typography class=\"ic-tab-label\" variant=\"label\">\n <span>\n <slot></slot>\n </span>\n </ic-typography>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-tab-context/ic-tab-context.js CHANGED Viewed

@@ -2,7 +2,9 @@ import { h, } from "@stencil/core";
 import { IcThemeForegroundEnum, } from "../../utils/types";
 export class TabContext {
   constructor() {
-    // Sets attributes to link tabs and tabpanels
+    this.newTabs = [];
+    this.newTabPanels = [];
+    // Sets attributes to link tab-group, tabs and tab-panels
     this.linkTabs = () => {
       this.tabs.forEach((tab, index) => {
         const tabId = `ic-tab-${index}-context-${this.contextId}`;
@@ -13,10 +15,12 @@ export class TabContext {
         tab.tabPosition = index;
         tab.setAttribute("aria-controls", tabPanelId);
         tab.setAttribute("context-id", this.contextId);
+        this.tabGroup.setAttribute("context-id", this.contextId);
         this.tabPanels[index].setAttribute("id", tabPanelId);
         this.tabPanels[index].panelId = shared;
         this.tabPanels[index].tabPosition = index;
         this.tabPanels[index].setAttribute("aria-labelledby", tabId);
+        this.tabPanels[index].setAttribute("context-id", this.contextId);
         if (this.appearance === IcThemeForegroundEnum.Light) {
           tab.appearance = this.appearance;
           this.tabPanels[index].appearance = this.appearance;
@@ -27,11 +31,12 @@ export class TabContext {
       }
     };
     // Gets tabs and tabpanels with the same context ID
+    // Using querySelector to selector the children in relation to the host
     this.getChildren = () => {
-      this.tabGroup = Array.from(this.host.querySelectorAll("ic-tab-group")).find((tabGroup) => tabGroup.contextId === this.contextId);
-      this.tabs = Array.from(this.tabGroup.querySelectorAll("ic-tab")).filter((tab) => tab.contextId === this.contextId);
+      this.tabGroup = this.host.querySelector("ic-tab-group");
+      this.tabs = Array.from(this.tabGroup.querySelectorAll("ic-tab"));
+      this.tabPanels = Array.from(this.host.children).filter((child) => child.tagName === "IC-TAB-PANEL");
       this.enabledTabs = this.getEnabledTabs();
-      this.tabPanels = Array.from(this.host.querySelectorAll("ic-tab-panel"));
     };
     // Determines how keyboard navigation is to be handled based on the activation type
     this.attatchEventListeners = () => {
@@ -192,6 +197,38 @@ export class TabContext {
       tabIndex: event.detail.position,
     });
   }
+  tabCreatedHandler(ev) {
+    if (this.tabs && this.tabPanels) {
+      (ev.detail.setFocus ? this.newTabs : this.newTabPanels).push(ev.detail);
+      if (this.newTabs.length === this.newTabPanels.length) {
+        this.tabs.push(...this.newTabs);
+        this.tabPanels.push(...this.newTabPanels);
+        this.enabledTabs = this.getEnabledTabs();
+        this.linkTabs();
+        this.newTabs = [];
+        this.newTabPanels = [];
+      }
+    }
+  }
+  /**
+   * @internal Used to set tab/tab panel IDs when a tab/tab panel has been removed
+   */
+  async tabRemovedHandler(hadFocus) {
+    this.getChildren();
+    this.enabledTabs = this.getEnabledTabs();
+    this.linkTabs();
+    if (this.tabs[this.selectedTab] && this.tabPanels[this.selectedTab]) {
+      this.tabs[this.selectedTab].selected = true;
+      this.tabPanels[this.selectedTab].selectedTab =
+        this.tabs[this.selectedTab].tabId;
+    }
+    else {
+      this.setInitialTab();
+    }
+    if (hadFocus) {
+      this.tabs[this.selectedTab].setFocus();
+    }
+  }
   componentDidLoad() {
     this.setControlledMode();
     this.getChildren();
@@ -351,6 +388,32 @@ export class TabContext {
         }
       }];
   }
+  static get methods() {
+    return {
+      "tabRemovedHandler": {
+        "complexType": {
+          "signature": "(hadFocus?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": [{
+              "name": "internal",
+              "text": "Used to set tab/tab panel IDs when a tab/tab panel has been removed"
+            }]
+        }
+      }
+    };
+  }
   static get elementRef() { return "host"; }
   static get watchers() {
     return [{
@@ -365,6 +428,18 @@ export class TabContext {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "tabCreated",
+        "method": "tabCreatedHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "tabPanelCreated",
+        "method": "tabCreatedHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }];
   }
 }