npm - @infineon/infineon-design-system-stencil - Versions diffs - 39.5.1--canary.2128.32855eaced35e683ae58f61e74597b349ac6110b.0 → 39.5.1--canary.1723.ff8f559ad2723273cd93183465ad335fc28571d7.0 - Mend

@infineon/infineon-design-system-stencil 39.5.1--canary.2128.32855eaced35e683ae58f61e74597b349ac6110b.0 → 39.5.1--canary.1723.ff8f559ad2723273cd93183465ad335fc28571d7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (759) hide show

package/dist/infineon-design-system-stencil/ifx-navbar.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-navbar.entry.esm.js","sources":["src/components/navigation/navbar/navbar.scss?tag=ifx-navbar&encapsulation=shadow","src/components/navigation/navbar/navbar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n width: 100%;\n display: block;\n}\n\n\n.navbar__wrapper {\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n height: 63px;\n position: sticky;\n //overflow: hidden;\n z-index: 1030;\n border-bottom: 1px solid #EEEDED;\n\n &.fixed {\n border-bottom: none;\n }\n\n // border-bottom: 1px solid #EEEDED; //when fixed is false\n}\n\n.navbar__main-container {\n position: absolute;\n top: 0;\n width: 100%;\n //overflow: hidden;\n transition: all 1s;\n z-index: 1020;\n\n &.fixed {\n position: fixed;\n\n & .navbar__container {\n border-bottom: 1px solid #EEEDED;\n }\n }\n\n &.show {\n height: 100vh;\n bottom: 0;\n background-color: tokens.$ifxColorOverlayDark;\n transition: 1s;\n z-index: 1;\n }\n}\n\n.navbar__sidebar {\n box-sizing: border-box;\n position: fixed;\n right: -100%;\n top: 64px;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n // padding: 32px;\n width: 375px;\n height: calc(100vh - 64px);\n background-color: tokens.$ifxColorBaseWhite;\n transition: right 1s;\n z-index: 1030;\n\n &.show {\n right: 0;\n transition: right 1s;\n }\n\n & .navbar__sidebar-top-row { \n display: flex;\n padding: var(--borderRadius-none, 0px) var(--space-300, 24px) 30px var(--space-300, 24px);\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-200, 16px);\n flex: 1 0 0;\n align-self: stretch;\n\n overflow-y: auto;\n\n & .navbar__sidebar-top-row-wrapper { \n display: flex;\n padding-top: var(--space-200, 16px);\n flex-direction: column;\n align-items: flex-start;\n align-self: stretch;\n gap: 16px;\n\n &.expand { \n align-items: initial;\n }\n\n & .navbar__sidebar-top-row-item { \n display: flex;\n padding: var(--space-200, 0px) var(--space-50, 4px) var(--space-200, 0px) 0px;\n align-items: center;\n gap: var(--space-100, 8px);\n align-self: stretch;\n justify-content: space-between;\n\n & .navbar__sidebar-top-row-item-icon-wrapper { \n & ifx-icon { \n vertical-align: middle;\n }\n }\n \n \n &:hover { \n cursor: pointer;\n }\n \n & .navbar__sidebar-top-row-item-label { \n color: var(--color-base-black, #1D1D1D);\n font-family: \"Source Sans 3\";\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px; \n }\n \n }\n }\n\n }\n\n & .navbar__sidebar-bottom-row { \n //display: flex;\n display: none;\n padding: var(--space-150, 12px) var(--space-300, 24px) var(--space-150, 12px) var(--space-200, 16px);\n flex-direction: column;\n align-items: flex-start;\n align-self: stretch;\n background: var(--color-engineering-100, #F7F7F7);\n border-top: 1px solid var(--color-engineering-200, #EEEDED);\n gap: 10px;\n\n max-height: 160px;\n overflow-y: auto;\n\n &.show { \n display: flex;\n }\n \n\n & .navbar__sidebar-bottom-row-item { \n display: flex;\n height: 40px;\n padding-right: var(--space-50, 4px);\n align-items: center;\n gap: var(--space-100, 8px);\n flex: 1 0 0;\n \n & .navbar__sidebar-bottom-row-item-label {\n color: var(--color-base-black, #1D1D1D);\n font-family: \"Source Sans 3\";\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px; \n }\n\n & .navbar__sidebar-bottom-row-item-icon-wrapper { \n display: flex;\n align-items: center;\n }\n }\n\n }\n\n\n & .navbar__sidebar-content-products,\n & .navbar__sidebar-content-main {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n gap: 24px;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n\n & .navbar__sidebar-content-products-header,\n & .navbar__sidebar-content-about-header {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: 16px;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n color: #BFBBBB;\n\n & span {\n color: tokens.$ifxColorBaseBlack;\n font-weight: 600;\n font-size: 18px;\n line-height: 28px;\n display: flex;\n align-items: center;\n }\n }\n\n & .navbar__sidebar-content-products-menu,\n & .navbar__sidebar-content-main-menu {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n gap: 16px;\n flex: none;\n order: 1;\n flex-grow: 0;\n width: 100%;\n\n & .navbar__sidebar-content-products-menu-item,\n & .navbar__sidebar-content-main-menu-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & a {\n text-decoration: none;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n line-height: 24px;\n display: flex;\n align-items: center;\n color: tokens.$ifxColorBaseBlack;\n }\n }\n\n & .navbar__sidebar-content-main-menu-item {\n color: tokens.$ifxColorEngineering300;\n\n & a {\n font-style: normal;\n font-weight: 600;\n font-size: 18px;\n line-height: 28px;\n display: flex;\n align-items: center;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 0;\n flex-grow: 1;\n }\n }\n }\n\n & .navbar__sidebar-content-main-menu {\n align-items: normal;\n }\n }\n}\n\n.navbar__container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 8px 40px;\n gap: 16px;\n background-color: tokens.$ifxColorBaseWhite;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n &.expanded { \n justify-content: initial;\n }\n\n // &.fixed { \n // border-bottom: 1px solid #EEEDED; //when fixed is true\n // }\n\n & .navbar__container-search-field-wrapper { \n display: none;\n\n &.show { \n display: flex;\n }\n }\n\n & .navbar__container-left {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0;\n gap: 16px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n &.hide {\n display: none;\n }\n\n &.expand { \n justify-content: initial;\n flex: 1;\n & .navbar__container-left-content { \n align-items: initial;\n flex: 1;\n & .navbar__container-left-content-navigation-group { \n justify-content: initial;\n flex: 1;\n & .navbar__container-left-content-navigation-item-search-bar { \n flex: 1;\n }\n }\n }\n \n }\n\n & .navbar__container-left-logo {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: 16px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n &.hide { \n display: none;\n }\n\n & h6 {\n position: relative;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 600;\n font-size: 16px;\n //line-height: 24px;\n display: flex;\n align-items: center;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n flex-grow: 0;\n }\n\n & .navbar__container-left-logo-default {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 12px 0px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & svg {\n width: 91px;\n height: 40px;\n flex: none;\n order: 0;\n flex-grow: 0;\n vertical-align: bottom;\n }\n }\n\n & .navbar__container-left-logo-divider {\n width: 1px;\n height: 32px;\n background: tokens.$ifxColorEngineering200;\n flex: none;\n order: 2;\n flex-grow: 0;\n }\n }\n\n & .navbar__container-left-content {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: flex-start;\n padding: 0px;\n flex: none;\n order: 1;\n flex-grow: 0;\n\n & .navbar__container-left-content-navigation-group {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: 4px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & .navbar__container-left-content-navigation-item-search-bar {\n display: flex; //none\n flex-direction: row;\n align-items: center;\n padding: 0px 8px;\n flex: none;\n order: 5;\n flex-grow: 0;\n //width: 256px;\n //height: 40px;\n }\n\n & .navbar__container-left-content-navigation-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px 8px;\n gap: 8px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & a {\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 16px;\n line-height: 24px;\n color: tokens.$ifxColorBaseBlack;\n text-decoration: none;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n }\n }\n }\n }\n\n & .navbar__container-right {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n padding: 0;\n gap: 8px;\n flex: none;\n order: 1;\n flex-grow: 0;\n\n &.hide { \n display: none;\n }\n\n &.expand { \n justify-content: initial;\n flex: 1;\n & .navbar__container-right-content { \n align-items: initial;\n flex: 1;\n & .navbar__container-right-content-navigation-group { \n justify-content: initial;\n flex: 1;\n & .navbar__container-right-content-navigation-item-search-bar { \n flex: 1;\n & .navbar__container-right-content-navigation-item-search-bar-icon-wrapper { \n flex: 1;\n }\n }\n }\n }\n \n }\n\n & .navbar__burger-icon-wrapper {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 4px 0px 4px 16px;\n border-left: 1px solid tokens.$ifxColorEngineering300;\n gap: 16px;\n flex: none;\n order: 1;\n flex-grow: 0;\n width: 41px;\n height: 40px;\n\n &.hide { \n display: none;\n }\n\n & .navbar__burger-icon {\n display: flex;\n align-items: center;\n\n &:hover { \n cursor: pointer;\n }\n\n &.close {\n display: none;\n }\n }\n\n & .navbar__cross-icon {\n display: none;\n align-items: center;\n\n &.show {\n display: flex;\n\n &:hover { \n cursor: pointer;\n }\n }\n }\n }\n\n & .navbar__container-right-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & .navbar__container-right-content-navigation-group {\n position: relative;\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n padding: 0px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & .navbar__container-right-content-navigation-item,\n & .navbar__container-right-content-navigation-item-profile,\n & .navbar__container-right-content-navigation-item-search-bar {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px 8px;\n gap: 4px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & .navbar__container-right-content-navigation-item-search-bar-icon-wrapper {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px;\n gap: 8px;\n flex: none;\n order: 0;\n flex-grow: 0;\n //width: 24px;\n //height: 24px;\n //max-width: 200px;\n\n &.isOpen { \n position: absolute;\n top: 10px;\n }\n }\n\n & .navbar__container-right-content-navigation-item-navigation-profile {\n position: relative;\n width: 24px;\n height: 24px;\n background: tokens.$ifxColorOcean500;\n border-radius: 100px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & a {\n position: absolute;\n width: 22px;\n height: 20px;\n left: calc(50% - 22px/2);\n top: calc(50% - 20px/2);\n font-style: normal;\n font-weight: 600;\n font-size: 14px;\n line-height: 20px;\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n & .navbar__container-right-content-navigation-item-icon-wrapper {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px;\n gap: 8px;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n\n & a {\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n color: tokens.$ifxColorBaseBlack;\n text-decoration: none;\n display: flex;\n align-items: center;\n flex: none;\n order: 1;\n flex-grow: 0;\n }\n }\n }\n }\n }\n}\n\n//burger icon exist, and left container is gone\n@media screen and (max-width: 800px) {\n .navbar__container {\n padding: 0px 16px;\n height: 64px;\n gap: initial;\n\n &.expanded { \n & .navbar__container-right {\n & .navbar__burger-icon-wrapper {\n display: none;\n }\n }\n }\n\n & .navbar__container-left {\n & .navbar__container-left-content {\n display: none;\n }\n\n & .navbar__container-left-logo {\n & .navbar__container-left-logo-divider {\n display: none;\n }\n }\n }\n\n & .navbar__container-right {\n flex: 1;\n }\n }\n\n .navbar__sidebar {\n width: 0;\n transition: 1s;\n\n // &.show {\n // width: 100%;\n // }\n\n }\n}\n\n@media screen and (max-width: 500px) {\n .navbar__sidebar {\n &.show {\n width: 100%; // 100% of viewport width\n }\n }\n}\n\n@media screen and (min-width: 500px) {\n .navbar__sidebar {\n &.show {\n width: 50%; // 100% of viewport width\n }\n }\n}\n\n//burger icon disappears\n@media screen and (min-width: 800px) {\n .navbar__wrapper {\n height: 63px;\n }\n\n .navbar__container {\n padding: 0px 16px;\n height: 63px;\n gap: initial;\n\n & .navbar__container-right {\n & .navbar__burger-icon-wrapper {\n display: none;\n }\n }\n }\n\n .navbar__main-container {\n &.show {\n height: auto;\n background-color: inherit;\n transition: none;\n }\n }\n\n .navbar__sidebar {\n width: 0;\n transition: 1s;\n &.show { \n right: -100%;\n }\n }\n\n}\n\n//left container appears\n@media screen and (min-width: 1024px) {\n .navbar__wrapper {\n height: 72px;\n }\n\n .navbar__container {\n padding: 0px 24px;\n height: 72px;\n\n & .navbar__container-left {\n gap: 12px;\n display: flex;\n\n & .navbar__container-left-content {\n display: flex;\n }\n\n & .navbar__container-left-logo-default {\n & svg {\n width: 72.8px;\n height: 32px;\n }\n }\n }\n }\n\n .navbar__main-container {\n &.show {\n height: auto;\n background-color: inherit;\n transition: none;\n }\n }\n}\n\n@media screen and (min-width: 1200px) {\n .navbar__wrapper {\n height: 80px\n }\n\n .navbar__container {\n padding: 0px 32px;\n height: 80px;\n\n & .navbar__container-left {\n & .navbar__container-left-content {\n justify-content: inherit;\n }\n }\n\n & .navbar__container-right {\n & .navbar__container-right-content {\n justify-content: inherit;\n }\n }\n }\n}\n\n@media screen and (min-width: 1440px) {\n .navbar__wrapper {\n height: 80px;\n }\n\n .navbar__container {\n padding: 0px 40px;\n height: 80px;\n\n & .navbar__container-left {\n & .navbar__container-left-content {\n justify-content: center;\n }\n }\n\n & .navbar__container-right {\n & .navbar__container-right-content {\n justify-content: inherit;\n }\n }\n }\n}","import { Component, h, Element, State, Prop, Listen, Event, EventEmitter } from '@stencil/core';\nimport { trackComponent } from '../../../global/utils/tracking';\nimport { detectFramework } from '../../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-navbar',\n styleUrl: 'navbar.scss',\n shadow: true,\n})\n\nexport class Navbar {\n @Element() el;\n @State() main: boolean = true\n @State() products: boolean = false\n @State() applications: boolean = false\n @State() design: boolean = false\n @State() support: boolean = false\n @State() about: boolean = false\n @Prop() applicationName: string = \"\"\n @State() hasLeftMenuItems: boolean = true;\n @Prop() fixed: boolean = true;\n @Prop() showLogoAndAppname: boolean = true;\n @State() searchBarIsOpen: string;\n @Prop() logoHref: string = \"\";\n @State() internalLogoHref: string = \"\"\n @Prop() logoHrefTarget: string = '_self';\n @State() internalLogoHrefTarget: string = '_self';\n @Event() ifxNavbarMobileMenuIsOpen: EventEmitter;\n\n private addEventListenersToHandleCustomFocusState() {\n const element = this.el.shadowRoot.firstChild;\n\n if (!element) {\n console.error('element not found');\n return;\n }\n element.tabIndex = -1;\n\n // Select all a elements in the navbar and set their tabIndex to -1 to make them non-focusable\n const aElements = element.querySelectorAll('a');\n for (let i = 0; i < aElements.length; i++) {\n aElements[i].tabIndex = -1;\n }\n\n const slot = element.querySelector('slot');\n if (slot) {\n const assignedNodes = slot.assignedNodes();\n for (let i = 0; i < assignedNodes.length; i++) {\n const node = assignedNodes[i] as HTMLElement;\n if (node.nodeName === 'IFX-NAVBAR-ITEM') {\n const navbarItem = node as HTMLIfxNavbarItemElement;\n\n // Get all navigation items\n const aElements = navbarItem?.shadowRoot.querySelectorAll('a');\n for (let i = 0; i < aElements.length; i++) {\n aElements[i].tabIndex = -1;\n }\n }\n }\n }\n }\n\n @Listen('ifxNavItem') \n clearFirstLayerMenu(event: CustomEvent) { \n if(event.detail.action === 'hideFirstLayer') { \n const leftMenuItems = this.getMobileMenuTop()\n for(let i = 0; i < leftMenuItems.length; i++) { \n if(!leftMenuItems[i].isSameNode(event.detail.component)) {\n leftMenuItems[i].hideComponent()\n }\n }\n }\n\n if(event.detail.action === 'hideSecondLayer') { \n const parent = event.detail.parent;\n const children = parent.children;\n parent.toggleFirstLayerItem('remove', 'add')\n for(let i = 0; i < children.length; i++) { \n if(!children[i].isSameNode(event.detail.component)) {\n children[i].hideComponent()\n }\n }\n }\n\n if(event.detail.action === 'returnToSecondLayer') { \n const parent = event.detail.parent;\n const children = parent.children;\n parent.toggleFirstLayerItem('add', 'remove')\n for(let i = 0; i < children.length; i++) { \n if(!children[i].isSameNode(event.detail.component)) {\n children[i].showComponent()\n }\n }\n }\n\n if(event.detail.action === 'show') { \n const leftMenuItems = this.el.querySelectorAll('[slot=\"left-item\"]')\n for(let i = 0; i < leftMenuItems.length; i++) { \n if(!leftMenuItems[i].isSameNode(event.detail.component)) {\n leftMenuItems[i].showComponent()\n }\n }\n }\n\n if(event.detail.action === 'return') { \n const leftMenuItems = this.getMobileMenuTop()\n for(let i = 0; i < leftMenuItems.length; i++) { \n if(!leftMenuItems[i].isSameNode(event.detail.component)) {\n leftMenuItems[i].showComponent()\n }\n }\n }\n }\n\n getWrappers() {\n const rightContentNavigationGroup = this.el.shadowRoot.querySelector('.navbar__container-right-content-navigation-group')\n const searchBarRightWrapper = this.el.shadowRoot.querySelector('.navbar__container-right-content-navigation-item-search-bar-icon-wrapper')\n const searchBarLeftWrapper = this.el.shadowRoot.querySelector('.navbar__container-left-content-navigation-item-search-bar')\n const rightSideItemSlot = rightContentNavigationGroup.querySelector('slot[name=\"right-item\"]');\n const rightSideSlot = searchBarRightWrapper.querySelector('slot');\n const leftSideSlot = searchBarLeftWrapper.querySelector('slot');\n const rightAssignedNodes = rightSideSlot.assignedNodes();\n const leftAssignedNodes = leftSideSlot.assignedNodes();\n const navbarProfile = this.el.querySelector('ifx-navbar-profile');\n const leftMenuItems = this.el.querySelectorAll('[slot=\"left-item\"]');\n const rightMenuItems = this.el.querySelectorAll('[slot=\"right-item\"]');\n const topRowWrapper = this.el.shadowRoot.querySelector('.navbar__sidebar-top-row-wrapper')\n \n return {rightSideItemSlot, rightSideSlot, leftSideSlot, rightAssignedNodes, leftAssignedNodes, navbarProfile, leftMenuItems, rightMenuItems, topRowWrapper};\n }\n\n hideNavItems() {\n const { rightAssignedNodes, leftAssignedNodes, navbarProfile, leftMenuItems, rightMenuItems, topRowWrapper } = this.getWrappers();\n \n if(rightAssignedNodes.length !== 0) { \n this.searchBarIsOpen = 'right'\n } else if(leftAssignedNodes.length !== 0) {\n this.searchBarIsOpen = 'left'\n }\n\n if(navbarProfile) { \n navbarProfile.hideComponent()\n }\n \n for(let l = 0; l < leftMenuItems.length; l++) { \n if(!topRowWrapper.classList.contains('expand')) {\n leftMenuItems[l].hideComponent()\n }\n }\n \n for(let r = 0; r < rightMenuItems.length; r++) { \n if(topRowWrapper.classList.contains('expand')) {\n if(!rightMenuItems[r].hideOnMobile) { \n rightMenuItems[r].hideComponent()\n }\n } else { \n rightMenuItems[r].hideComponent()\n }\n }\n }\n\n showNavItems() {\n const { navbarProfile, leftMenuItems, rightMenuItems, topRowWrapper } = this.getWrappers();\n this.searchBarIsOpen = undefined;\n \n if(navbarProfile) {\n navbarProfile.showComponent()\n }\n \n for(let l = 0; l < leftMenuItems.length; l++) { \n if(!topRowWrapper.classList.contains('expand')) {\n leftMenuItems[l].showComponent()\n }\n }\n \n for(let r = 0; r < rightMenuItems.length; r++) { \n if(topRowWrapper.classList.contains('expand')) {\n if(!rightMenuItems[r].hideOnMobile) { \n rightMenuItems[r].showComponent()\n }\n } else { \n rightMenuItems[r].showComponent()\n }\n }\n }\n \n \n @Listen('ifxOpen')\n handleSearchBarToggle(event: CustomEvent) {\n \n if(event.detail) { \n this.hideNavItems();\n } else if(!event.detail) {\n this.showNavItems();\n }\n }\n\n toggleClass(el, className) {\n el.classList.toggle(className)\n }\n\n handleSidebar(el) {\n const sidebarIconWrapper = el.currentTarget.closest('.navbar__burger-icon-wrapper');\n const sidebarIconOpen = sidebarIconWrapper.querySelector('.navbar__burger-icon')\n const sidebarIconClose = sidebarIconWrapper.querySelector('.navbar__cross-icon')\n const mainContainer = el.currentTarget.closest('.navbar__main-container');\n const navbarWrapper = el.currentTarget.closest('.navbar__wrapper')\n const sidebarWrapper = navbarWrapper.querySelector('.navbar__sidebar');\n this.toggleClass(navbarWrapper, 'show')\n this.toggleClass(mainContainer, 'show')\n this.toggleClass(sidebarWrapper, 'show')\n this.toggleClass(sidebarIconOpen, 'close')\n this.toggleClass(sidebarIconClose, 'show')\n\n if(sidebarIconClose.classList.contains('show')) { \n this.handleBodyScroll('hide')\n } else { \n this.handleBodyScroll('show')\n }\n }\n\n handleBodyScroll(action) { \n const body = this.el.closest('body')\n if(!this.fixed && action === 'hide') { \n body.style.overflow = 'hidden'\n } else if(action === 'show') { \n body.style.overflow = 'visible'\n }\n }\n\n handleDropdownMenu(el) {\n const dropdownWrapper = el.currentTarget.querySelector('.navbar__dropdown-wrapper')\n dropdownWrapper.classList.toggle('open')\n const iconWrapper = el.currentTarget.querySelector('a')\n iconWrapper.classList.toggle('open')\n }\n\n async setItemMenuPosition() { \n const navbarItems = this.el.querySelectorAll('ifx-navbar-item')\n const navbarProfile = this.el.querySelector('ifx-navbar-profile')\n\n if(navbarProfile) {\n const itemChildren = navbarProfile.querySelectorAll('ifx-navbar-item')\n if (itemChildren.length !== 0) {\n itemChildren.forEach(item => { \n item.setMenuItemPosition()\n this.setMenuItemChildrenPosition(item)\n })\n }\n }\n \n if(navbarItems.length !== 0) { \n for(let i = 0; i < navbarItems.length; i++) { \n const item = navbarItems[i];\n const itemChildren = item.querySelectorAll('ifx-navbar-item')\n if (itemChildren.length !== 0) {\n const hasNestedItems = await item.setItemSideSpecifications()\n if(hasNestedItems) { \n itemChildren.forEach(item => { \n item.setMenuItemPosition()\n this.setMenuItemChildrenPosition(item)\n })\n }\n }\n }\n }\n }\n\n setMenuItemChildrenPosition(item) {\n const itemChildren = item.querySelectorAll('ifx-navbar-item');\n if (itemChildren.length !== 0) {\n itemChildren.forEach(subItem => { \n subItem.setMenuItemPosition()\n this.setMenuItemChildrenPosition(subItem)\n })\n }\n }\n\n getMediaQueryList() { \n const mediaQueryList = window.matchMedia('(max-width: 800px)');\n return mediaQueryList;\n }\n\n async componentDidLoad() {\n const framework = detectFramework();\n trackComponent('ifx-navbar', await framework)\n this.setItemMenuPosition()\n this.addEventListenersToHandleCustomFocusState();\n \n const mediaQueryList = this.getMediaQueryList()\n\n if (mediaQueryList.matches) {\n this.moveNavItemsToSidebar();\n }\n\n }\n\n handleMobileMenuBottom(e) { \n const mobileMenuBottomWrapper = this.el.shadowRoot.querySelector('.navbar__sidebar-bottom-row')\n const slotElement = e.target;\n const nodes = slotElement.assignedNodes();\n if(nodes.length > 0) { \n mobileMenuBottomWrapper.classList.add('show')\n } else { \n mobileMenuBottomWrapper.classList.remove('show')\n }\n }\n\n handleLogoHrefAndTarget(){\n if(this.logoHref.trim() === \"\") {\n this.internalLogoHref = undefined;\n }else{\n this.internalLogoHref = this.logoHref;\n }\n\n if(['_self', '_blank', '_parent'].includes(this.logoHrefTarget.trim())){\n this.internalLogoHrefTarget = this.logoHrefTarget;\n }else{\n this.internalLogoHrefTarget = '_self';\n }\n }\n\n \n componentWillLoad() {\n this.RemoveSpaceOnStorybookSnippet()\n const dropdownMenu = this.el.querySelector('ifx-navbar-menu')\n const leftMenuItems = this.el.querySelectorAll('[slot=\"left-item\"]')\n if (!leftMenuItems.length && !dropdownMenu) {\n this.hasLeftMenuItems = false;\n }\n this.handleLogoHrefAndTarget();\n\n const mediaQueryList = window.matchMedia('(max-width: 800px)');\n mediaQueryList.addEventListener('change', (e) => this.moveNavItemsToSidebar(e));\n }\n\n \n\n getSearchBarLeftWrapper() { \n const searchBarLeftWrapper = this.el.shadowRoot.querySelector('.navbar__container-left-content-navigation-item-search-bar')\n return searchBarLeftWrapper;\n }\n\n getMobileMenuTop() { \n const leftMenuItems = this.el.querySelectorAll('[slot=\"mobile-menu-top\"]');\n return leftMenuItems;\n }\n\n getMobileMenuBottom() { \n const rightMenuItems = this.el.querySelectorAll('[slot=\"mobile-menu-bottom\"]');\n return rightMenuItems;\n }\n\n handleBurgerIcon() { \n const leftMenuItems = this.getMobileMenuTop()\n const rightMenuItems = this.getMobileMenuBottom()\n if(!leftMenuItems.length && !rightMenuItems.length) { \n const burgerIconWrapper = this.el.shadowRoot.querySelector('.navbar__burger-icon-wrapper')\n this.toggleClass(burgerIconWrapper, 'hide')\n }\n }\n \n moveNavItemsToSidebar(e?: MediaQueryListEvent) {\n const topRowWrapper = this.el.shadowRoot.querySelector('.navbar__sidebar-top-row-wrapper')\n const mediaQueryList = this.getMediaQueryList();\n const matches = e ? e.matches : mediaQueryList.matches;\n \n if (matches) {\n /* The viewport is 800px wide or less /\n topRowWrapper.classList.add('expand')\n \n //hide body scroll if sidebar was opened\n const crossIcon = this.el.shadowRoot.querySelector('.navbar__cross-icon')\n if(crossIcon.classList.contains('show')) { \n this.handleBodyScroll('hide')\n }\n \n //move search bar to right-side\n const searchBarLeft = this.el.querySelector('[slot=\"search-bar-left\"]')\n if(searchBarLeft) { \n if(this.searchBarIsOpen) { \n searchBarLeft.onNavbarMobile()\n }\n const searchBarLeftWrapper = this.getSearchBarLeftWrapper()\n searchBarLeftWrapper.classList.add('initial')\n searchBarLeft.setAttribute('slot', 'search-bar-right')\n }\n \n //left-side\n const leftMenuItems = this.el.querySelectorAll('[slot=\"left-item\"]')\n for(let i = 0; i < leftMenuItems.length; i++) { \n leftMenuItems[i].setAttribute('slot', 'mobile-menu-top')\n leftMenuItems[i].moveChildComponentsIntoSubLayerMenu()\n if(this.searchBarIsOpen) { \n leftMenuItems[i].showComponent()\n }\n }\n \n //right-side\n const rightMenuItems = this.el.querySelectorAll('[slot=\"right-item\"]')\n for(let i = 0; i < rightMenuItems.length; i++) { \n if(rightMenuItems[i].tagName.toUpperCase() === 'IFX-NAVBAR-PROFILE') { \n rightMenuItems[i].showLabel = false;\n } else { \n if(rightMenuItems[i].hideOnMobile) { \n rightMenuItems[i].setAttribute('slot', 'mobile-menu-bottom')\n \n rightMenuItems[i].toggleChildren('add')\n \n rightMenuItems[i].showLabel = true;\n if(this.searchBarIsOpen) { \n rightMenuItems[i].showComponent()\n }\n }\n }\n }\n \n this.handleBurgerIcon()\n\n } else {\n / The viewport is more than 800px wide /\n topRowWrapper.classList.remove('expand')\n\n //show body scroll \n this.handleBodyScroll('show')\n\n //return search bar to its original position\n const searchBarLeftWrapper = this.getSearchBarLeftWrapper()\n const leftIsInitial = searchBarLeftWrapper.classList.contains('initial')\n const searchBarRight = this.el.querySelector('[slot=\"search-bar-right\"]')\n if(leftIsInitial) { \n if(this.searchBarIsOpen) { \n searchBarRight.onNavbarMobile()\n }\n if(searchBarRight) { \n searchBarRight.setAttribute('slot', 'search-bar-left')\n }\n }\n\n //left-side\n const leftMenuItems = this.getMobileMenuTop()\n for(let i = 0; i < leftMenuItems.length; i++) { \n leftMenuItems[i].setAttribute('slot', 'left-item')\n leftMenuItems[i].moveChildComponentsBackIntoNavbar()\n }\n\n //right-side\n const rightMenuItems = this.getMobileMenuBottom()\n const navbarProfileItem = this.el.querySelector('ifx-navbar-profile')\n if(navbarProfileItem) { \n const showProfileItemLabel = navbarProfileItem.getAttribute('show-label');\n navbarProfileItem.setAttribute('show-label', showProfileItemLabel)\n }\n\n for(let i = 0; i < rightMenuItems.length; i++) { \n rightMenuItems[i].setAttribute('slot', 'right-item')\n\n rightMenuItems[i].toggleChildren('remove')\n \n const showLabel = rightMenuItems[i].getAttribute('show-label');\n rightMenuItems[i].setAttribute('show-label', showLabel)\n if(this.searchBarIsOpen) { \n rightMenuItems[i].hideComponent()\n }\n }\n }\n }\n\n RemoveSpaceOnStorybookSnippet() { \n let parent = this.el.parentElement;\n if(parent) { \n let storybookWrapper = parent.closest('.css-xzp052');\n if(storybookWrapper) { \n storybookWrapper.style.overflow = 'visible'\n }\n }\n }\n\n\n \n render() {\n return (\n <div aria-label='a navigation navbar' class={`navbar__wrapper ${this.fixed ? 'fixed' : \"\"}`}>\n <div class={`navbar__main-container ${this.fixed ? 'fixed' : \"\"}`}>\n <div class={`navbar__container ${this.searchBarIsOpen ? \"expanded\" : \"\"}`}>\n <div class={`navbar__container-left ${this.searchBarIsOpen === 'left' ? \"expand\" : this.searchBarIsOpen === 'right' ? 'hide' : \"\"}`}>\n {this.showLogoAndAppname &&\n <div class={`navbar__container-left-logo ${this.searchBarIsOpen === 'left' ? 'hide' : \"\"}`}>\n <div class=\"navbar__container-left-logo-default\">\n <a href={this.internalLogoHref} target = {this.internalLogoHrefTarget}>\n <svg width=\"91\" height=\"40\" viewBox=\"0 0 91 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_2396_2480)\">\n <path d=\"M67.691 26.7766C71.0884 26.7766 72.1461 23.1841 72.1461 19.8802C72.1461 15.4536 70.2871 13.1441 67.691 13.1441C64.4219 13.1441 63.2681 16.7367 63.3001 19.9443C63.3322 23.1199 64.2296 26.7766 67.691 26.7766ZM66.0244 19.8481C66.0244 18.533 66.0244 15.4536 67.691 15.4536C69.4859 15.4536 69.4218 18.5009 69.4218 19.9123C69.4218 21.2595 69.4218 24.5313 67.7551 24.5313C65.9603 24.4992 66.0244 21.2274 66.0244 19.8481ZM57.8195 26.7766C59.1976 26.7766 60.3835 26.2313 61.5053 25.0445L60.5117 23.1841C59.7425 24.018 58.9733 24.4671 58.0438 24.4671C57.2746 24.4671 56.6336 24.018 56.249 23.2482C55.9285 22.5746 55.8644 21.8048 55.8644 20.9708V20.7142H61.6335V20.1368C61.6335 17.282 61.2809 15.7102 60.3835 14.5234C59.7104 13.6253 58.7169 13.1441 57.499 13.1441C56.2169 13.1441 55.1593 13.7215 54.39 14.8442C53.5567 16.0631 53.2042 17.699 53.2042 19.9443C53.1721 24.2426 54.8708 26.7766 57.8195 26.7766ZM57.531 15.2612C58.172 15.2612 58.5566 15.614 58.813 16.1914C59.0053 16.7046 59.1015 17.5707 59.1015 18.5971H55.8644C55.8964 16.3197 56.3772 15.2612 57.531 15.2612ZM74.2614 26.4559H76.7614V16.8329C77.3703 16.0952 78.0754 15.6782 78.5882 15.6782C78.9087 15.6782 79.2292 15.7423 79.4215 15.9989C79.6138 16.2876 79.71 16.7046 79.71 17.699V26.4559H82.21V16.5442C82.21 15.6782 82.1138 14.8121 81.601 14.1706C81.1523 13.5932 80.4472 13.2404 79.5497 13.2404C78.3959 13.2404 77.2101 13.914 76.569 14.6838C76.537 14.0102 76.3126 13.3687 76.2485 13.1441L73.9089 13.7536C74.0371 14.4593 74.2294 15.3253 74.2294 16.8971V26.4559H74.2614ZM45.2236 14.6838C45.1915 14.0102 44.9672 13.3687 44.9031 13.1441L42.5634 13.7536C42.6916 14.4593 42.8839 15.3253 42.8839 16.8971V26.4238H45.3838V16.8008C45.9928 16.0631 46.6979 15.6461 47.2107 15.6461C47.5312 15.6461 47.8517 15.7102 48.044 15.9669C48.2363 16.2555 48.3325 16.6725 48.3325 17.6669V26.4238H50.8324V16.5442C50.8324 15.6782 50.7363 14.8121 50.2235 14.1706C49.7748 13.5932 49.0696 13.2404 48.1722 13.2404C47.0505 13.2404 45.8646 13.914 45.2236 14.6838ZM14.6473 9.07042C16.1216 9.07042 17.3075 7.88359 17.3075 6.40807C17.3075 4.93256 16.1216 3.74573 14.6473 3.74573C13.173 3.74573 11.9871 4.93256 11.9871 6.40807C11.9871 7.88359 13.173 9.07042 14.6473 9.07042ZM26.9227 26.4559V16.5442C26.9227 15.6782 26.8265 14.8121 26.3137 14.1706C25.865 13.5932 25.1599 13.2404 24.2625 13.2404C23.1087 13.2404 21.9228 13.914 21.2818 14.6838C21.2497 14.0102 21.0254 13.3687 20.9613 13.1441L18.6536 13.7857C18.7818 14.4913 18.9741 15.3574 18.9741 16.9291V26.4559H21.4741V16.8329C22.0831 16.0952 22.7882 15.6782 23.301 15.6782C23.6215 15.6782 23.942 15.7423 24.1343 15.9989C24.3266 16.2876 24.4227 16.7046 24.4227 17.699V26.4559H26.9227ZM38.4289 8.36474C37.4994 8.36474 36.7622 9.10249 36.7622 10.0327C36.7622 10.9629 37.4994 11.7007 38.3968 11.7007C39.3263 11.7007 40.0634 10.9629 40.0634 10.0327C40.0634 9.10249 39.3263 8.36474 38.4289 8.36474ZM13.4614 26.4559H15.9614V10.8346L13.4614 11.1554V26.4559ZM33.8777 9.90441C34.3264 9.90441 34.7751 10.0648 35.0635 10.2893L35.7687 8.33266C35.0956 7.85151 34.3584 7.62698 33.429 7.62698C32.788 7.62698 32.1149 7.78736 31.5059 8.26851C30.897 8.78173 30.256 9.80818 30.256 11.7328C30.256 12.5667 30.288 13.4328 30.288 13.4328H29.4226V15.6461H30.288V26.4238H32.8521V15.6782H34.743L35.2238 13.4649H32.8841V11.4762C32.8841 10.5139 33.2687 9.90441 33.8777 9.90441ZM37.1468 26.4559H39.6788V13.2404L37.1468 13.5611V26.4559Z\" fill=\"#005DA9\" />\n <path d=\"M77.0816 33.5126C68.6203 36.0146 58.3321 37.1052 48.2682 37.1052C22.7239 37.1052 6.24986 29.5993 5.09604 19.6877C4.67938 15.9668 7.59599 12.3422 12.4677 9.26285C11.6023 8.62132 11.0575 7.59488 11.0254 6.44012C3.97427 10.161 0 15.0366 0 19.9764C0 30.9145 19.5188 40.1525 48.5246 39.7676C58.6205 39.6393 67.0498 38.1958 74.6778 35.6939C83.7482 32.7428 89.4532 28.5087 90.8313 26.6483C89.1968 28.1238 85.3186 31.0748 77.0816 33.5126ZM23.2687 4.38723C24.9674 3.80985 27.3712 3.0721 27.3712 3.0721C34.1339 1.21166 41.6017 0.121063 48.5566 0.185215C40.544 -0.295931 33.2365 0.185215 26.8584 1.33997C26.8584 1.33997 24.743 1.69281 22.4675 2.27018C22.4675 2.27018 21.3777 2.55887 20.7047 2.75133C20.0316 2.94379 19.1021 3.2004 19.1021 3.2004C18.4611 3.39286 17.8201 3.6174 17.1791 3.84193C17.8201 4.48346 18.2047 5.31745 18.2368 6.27974C19.3586 5.76652 21.5059 4.99668 23.2687 4.38723Z\" fill=\"#E30034\" />\n </g>\n <defs>\n <clipPath id=\"clip0_2396_2480\">\n <rect width=\"91\" height=\"40\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </a>\n </div>\n {this.applicationName && <h6>{this.applicationName}</h6>}\n {this.applicationName && this.hasLeftMenuItems &&\n <div class=\"navbar__container-left-logo-divider\"></div>}\n </div>}\n <div class=\"navbar__container-left-content\">\n <div class=\"navbar__container-left-content-navigation-group\">\n <slot name='left-item' />\n <div class=\"navbar__container-left-content-navigation-item-search-bar\">\n <slot name='search-bar-left' />\n </div>\n </div>\n </div>\n </div>\n <div class={`navbar__container-right ${this.searchBarIsOpen === 'right' ? \"expand\" : this.searchBarIsOpen === 'left' ? 'hide' : \"\"}`}>\n <div class=\"navbar__container-right-content\">\n <div class=\"navbar__container-right-content-navigation-group\">\n <div class=\"navbar__container-right-content-navigation-item-search-bar\">\n <div class={`navbar__container-right-content-navigation-item-search-bar-icon-wrapper`}>\n <slot name='search-bar-right' />\n </div>\n </div>\n <slot name='right-item' />\n </div>\n </div>\n\n {/ MOBILE MENU BUTTON /}\n <div class={`navbar__burger-icon-wrapper`} onClick={this.handleSidebar.bind(this)}>\n <div class=\"navbar__burger-icon\">\n <ifx-icon icon=\"menu-right-16\"></ifx-icon>\n </div>\n <div class=\"navbar__cross-icon\">\n <ifx-icon icon=\"cross-16\"></ifx-icon>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n {/ SIDEBAR /}\n <div class=\"navbar__sidebar\">\n {/ left side ifx-navbar-item /}\n <div class=\"navbar__sidebar-top-row\">\n <div class=\"navbar__sidebar-top-row-wrapper\">\n <slot name='mobile-menu-top' />\n </div>\n </div>\n\n {/ right side ifx-navbar-item */}\n <div class=\"navbar__sidebar-bottom-row\">\n <slot name='mobile-menu-bottom' onSlotchange={(e) => this.handleMobileMenuBottom(e)} />\n </div>\n \n </div>\n </div>\n );\n }\n}"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"ifx-navbar.entry.esm.js","sources":["src/components/navigation/navbar/navbar.scss?tag=ifx-navbar&encapsulation=shadow","src/components/navigation/navbar/navbar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n width: 100%;\n display: block;\n}\n\n\n.navbar__wrapper {\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n height: 63px;\n position: sticky;\n //overflow: hidden;\n z-index: 1030;\n border-bottom: 1px solid #EEEDED;\n\n &.fixed {\n border-bottom: none;\n }\n\n // border-bottom: 1px solid #EEEDED; //when fixed is false\n}\n\n.navbar__main-container {\n position: absolute;\n top: 0;\n width: 100%;\n //overflow: hidden;\n transition: all 1s;\n z-index: 1020;\n\n &.fixed {\n position: fixed;\n\n & .navbar__container {\n border-bottom: 1px solid #EEEDED;\n }\n }\n\n &.show {\n height: 100vh;\n bottom: 0;\n background-color: tokens.$ifxColorOverlayDark;\n transition: 1s;\n z-index: 1;\n }\n}\n\n.navbar__sidebar {\n box-sizing: border-box;\n position: fixed;\n right: -100%;\n top: 64px;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n // padding: 32px;\n width: 375px;\n height: calc(100vh - 64px);\n background-color: tokens.$ifxColorBaseWhite;\n transition: right 1s;\n z-index: 1030;\n\n &.show {\n right: 0;\n transition: right 1s;\n }\n\n & .navbar__sidebar-top-row { \n display: flex;\n padding: var(--borderRadius-none, 0px) var(--space-300, 24px) 30px var(--space-300, 24px);\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-200, 16px);\n flex: 1 0 0;\n align-self: stretch;\n\n overflow-y: auto;\n\n & .navbar__sidebar-top-row-wrapper { \n display: flex;\n padding-top: var(--space-200, 16px);\n flex-direction: column;\n align-items: flex-start;\n align-self: stretch;\n gap: 16px;\n\n &.expand { \n align-items: initial;\n }\n\n & .navbar__sidebar-top-row-item { \n display: flex;\n padding: var(--space-200, 0px) var(--space-50, 4px) var(--space-200, 0px) 0px;\n align-items: center;\n gap: var(--space-100, 8px);\n align-self: stretch;\n justify-content: space-between;\n\n & .navbar__sidebar-top-row-item-icon-wrapper { \n & ifx-icon { \n vertical-align: middle;\n }\n }\n \n \n &:hover { \n cursor: pointer;\n }\n \n & .navbar__sidebar-top-row-item-label { \n color: var(--color-base-black, #1D1D1D);\n font-family: \"Source Sans 3\";\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px; \n }\n \n }\n }\n\n }\n\n & .navbar__sidebar-bottom-row { \n //display: flex;\n display: none;\n padding: var(--space-150, 12px) var(--space-300, 24px) var(--space-150, 12px) var(--space-200, 16px);\n flex-direction: column;\n align-items: flex-start;\n align-self: stretch;\n background: var(--color-engineering-100, #F7F7F7);\n border-top: 1px solid var(--color-engineering-200, #EEEDED);\n gap: 10px;\n\n max-height: 160px;\n overflow-y: auto;\n\n &.show { \n display: flex;\n }\n \n\n & .navbar__sidebar-bottom-row-item { \n display: flex;\n height: 40px;\n padding-right: var(--space-50, 4px);\n align-items: center;\n gap: var(--space-100, 8px);\n flex: 1 0 0;\n \n & .navbar__sidebar-bottom-row-item-label {\n color: var(--color-base-black, #1D1D1D);\n font-family: \"Source Sans 3\";\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px; \n }\n\n & .navbar__sidebar-bottom-row-item-icon-wrapper { \n display: flex;\n align-items: center;\n }\n }\n\n }\n\n\n & .navbar__sidebar-content-products,\n & .navbar__sidebar-content-main {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n gap: 24px;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n\n & .navbar__sidebar-content-products-header,\n & .navbar__sidebar-content-about-header {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: 16px;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n color: #BFBBBB;\n\n & span {\n color: tokens.$ifxColorBaseBlack;\n font-weight: 600;\n font-size: 18px;\n line-height: 28px;\n display: flex;\n align-items: center;\n }\n }\n\n & .navbar__sidebar-content-products-menu,\n & .navbar__sidebar-content-main-menu {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n gap: 16px;\n flex: none;\n order: 1;\n flex-grow: 0;\n width: 100%;\n\n & .navbar__sidebar-content-products-menu-item,\n & .navbar__sidebar-content-main-menu-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & a {\n text-decoration: none;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n line-height: 24px;\n display: flex;\n align-items: center;\n color: tokens.$ifxColorBaseBlack;\n }\n }\n\n & .navbar__sidebar-content-main-menu-item {\n color: tokens.$ifxColorEngineering300;\n\n & a {\n font-style: normal;\n font-weight: 600;\n font-size: 18px;\n line-height: 28px;\n display: flex;\n align-items: center;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 0;\n flex-grow: 1;\n }\n }\n }\n\n & .navbar__sidebar-content-main-menu {\n align-items: normal;\n }\n }\n}\n\n.navbar__container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 8px 40px;\n gap: 16px;\n background-color: tokens.$ifxColorBaseWhite;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n &.expanded { \n justify-content: initial;\n }\n\n // &.fixed { \n // border-bottom: 1px solid #EEEDED; //when fixed is true\n // }\n\n & .navbar__container-search-field-wrapper { \n display: none;\n\n &.show { \n display: flex;\n }\n }\n\n & .navbar__container-left {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0;\n gap: 16px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n &.hide {\n display: none;\n }\n\n &.expand { \n justify-content: initial;\n flex: 1;\n & .navbar__container-left-content { \n align-items: initial;\n flex: 1;\n & .navbar__container-left-content-navigation-group { \n justify-content: initial;\n flex: 1;\n & .navbar__container-left-content-navigation-item-search-bar { \n flex: 1;\n }\n }\n }\n \n }\n\n & .navbar__container-left-logo {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: 16px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n &.hide { \n display: none;\n }\n\n & h6 {\n position: relative;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 600;\n font-size: 16px;\n //line-height: 24px;\n display: flex;\n align-items: center;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n flex-grow: 0;\n }\n\n & .navbar__container-left-logo-default {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 12px 0px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & svg {\n width: 91px;\n height: 40px;\n flex: none;\n order: 0;\n flex-grow: 0;\n vertical-align: bottom;\n }\n }\n\n & .navbar__container-left-logo-divider {\n width: 1px;\n height: 32px;\n background: tokens.$ifxColorEngineering200;\n flex: none;\n order: 2;\n flex-grow: 0;\n }\n }\n\n & .navbar__container-left-content {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: flex-start;\n padding: 0px;\n flex: none;\n order: 1;\n flex-grow: 0;\n\n & .navbar__container-left-content-navigation-group {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: 4px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & .navbar__container-left-content-navigation-item-search-bar {\n display: flex; //none\n flex-direction: row;\n align-items: center;\n padding: 0px 8px;\n flex: none;\n order: 5;\n flex-grow: 0;\n //width: 256px;\n //height: 40px;\n }\n\n & .navbar__container-left-content-navigation-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px 8px;\n gap: 8px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & a {\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 16px;\n line-height: 24px;\n color: tokens.$ifxColorBaseBlack;\n text-decoration: none;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n }\n }\n }\n }\n\n & .navbar__container-right {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n padding: 0;\n gap: 8px;\n flex: none;\n order: 1;\n flex-grow: 0;\n\n &.hide { \n display: none;\n }\n\n &.expand { \n justify-content: initial;\n flex: 1;\n & .navbar__container-right-content { \n align-items: initial;\n flex: 1;\n & .navbar__container-right-content-navigation-group { \n justify-content: initial;\n flex: 1;\n & .navbar__container-right-content-navigation-item-search-bar { \n flex: 1;\n & .navbar__container-right-content-navigation-item-search-bar-icon-wrapper { \n flex: 1;\n }\n }\n }\n }\n \n }\n\n & .navbar__burger-icon-wrapper {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 4px 0px 4px 16px;\n border-left: 1px solid tokens.$ifxColorEngineering300;\n gap: 16px;\n flex: none;\n order: 1;\n flex-grow: 0;\n width: 41px;\n height: 40px;\n\n &.hide { \n display: none;\n }\n\n & .navbar__burger-icon {\n display: flex;\n align-items: center;\n\n &:hover { \n cursor: pointer;\n }\n\n &.close {\n display: none;\n }\n }\n\n & .navbar__cross-icon {\n display: none;\n align-items: center;\n\n &.show {\n display: flex;\n\n &:hover { \n cursor: pointer;\n }\n }\n }\n }\n\n & .navbar__container-right-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & .navbar__container-right-content-navigation-group {\n position: relative;\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n padding: 0px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & .navbar__container-right-content-navigation-item,\n & .navbar__container-right-content-navigation-item-profile,\n & .navbar__container-right-content-navigation-item-search-bar {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px 8px;\n gap: 4px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & .navbar__container-right-content-navigation-item-search-bar-icon-wrapper {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px;\n gap: 8px;\n flex: none;\n order: 0;\n flex-grow: 0;\n //width: 24px;\n //height: 24px;\n //max-width: 200px;\n\n &.isOpen { \n position: absolute;\n top: 10px;\n }\n }\n\n & .navbar__container-right-content-navigation-item-navigation-profile {\n position: relative;\n width: 24px;\n height: 24px;\n background: tokens.$ifxColorOcean500;\n border-radius: 100px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & a {\n position: absolute;\n width: 22px;\n height: 20px;\n left: calc(50% - 22px/2);\n top: calc(50% - 20px/2);\n font-style: normal;\n font-weight: 600;\n font-size: 14px;\n line-height: 20px;\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n & .navbar__container-right-content-navigation-item-icon-wrapper {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px;\n gap: 8px;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n\n & a {\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n color: tokens.$ifxColorBaseBlack;\n text-decoration: none;\n display: flex;\n align-items: center;\n flex: none;\n order: 1;\n flex-grow: 0;\n }\n }\n }\n }\n }\n}\n\n//burger icon exist, and left container is gone\n@media screen and (max-width: 800px) {\n .navbar__container {\n padding: 0px 16px;\n height: 64px;\n gap: initial;\n\n &.expanded { \n & .navbar__container-right {\n & .navbar__burger-icon-wrapper {\n display: none;\n }\n }\n }\n\n & .navbar__container-left {\n & .navbar__container-left-content {\n display: none;\n }\n\n & .navbar__container-left-logo {\n & .navbar__container-left-logo-divider {\n display: none;\n }\n }\n }\n\n & .navbar__container-right {\n flex: 1;\n }\n }\n\n .navbar__sidebar {\n width: 0;\n transition: 1s;\n\n // &.show {\n // width: 100%;\n // }\n\n }\n}\n\n@media screen and (max-width: 500px) {\n .navbar__sidebar {\n &.show {\n width: 100%; // 100% of viewport width\n }\n }\n}\n\n@media screen and (min-width: 500px) {\n .navbar__sidebar {\n &.show {\n width: 50%; // 100% of viewport width\n }\n }\n}\n\n//burger icon disappears\n@media screen and (min-width: 800px) {\n .navbar__wrapper {\n height: 63px;\n }\n\n .navbar__container {\n padding: 0px 16px;\n height: 63px;\n gap: initial;\n\n & .navbar__container-right {\n & .navbar__burger-icon-wrapper {\n display: none;\n }\n }\n }\n\n .navbar__main-container {\n &.show {\n height: auto;\n background-color: inherit;\n transition: none;\n }\n }\n\n .navbar__sidebar {\n width: 0;\n transition: 1s;\n &.show { \n right: -100%;\n }\n }\n\n}\n\n//left container appears\n@media screen and (min-width: 1024px) {\n .navbar__wrapper {\n height: 72px;\n }\n\n .navbar__container {\n padding: 0px 24px;\n height: 72px;\n\n & .navbar__container-left {\n gap: 12px;\n display: flex;\n\n & .navbar__container-left-content {\n display: flex;\n }\n\n & .navbar__container-left-logo-default {\n & svg {\n width: 72.8px;\n height: 32px;\n }\n }\n }\n }\n\n .navbar__main-container {\n &.show {\n height: auto;\n background-color: inherit;\n transition: none;\n }\n }\n}\n\n@media screen and (min-width: 1200px) {\n .navbar__wrapper {\n height: 80px\n }\n\n .navbar__container {\n padding: 0px 32px;\n height: 80px;\n\n & .navbar__container-left {\n & .navbar__container-left-content {\n justify-content: inherit;\n }\n }\n\n & .navbar__container-right {\n & .navbar__container-right-content {\n justify-content: inherit;\n }\n }\n }\n}\n\n@media screen and (min-width: 1440px) {\n .navbar__wrapper {\n height: 80px;\n }\n\n .navbar__container {\n padding: 0px 40px;\n height: 80px;\n\n & .navbar__container-left {\n & .navbar__container-left-content {\n justify-content: center;\n }\n }\n\n & .navbar__container-right {\n & .navbar__container-right-content {\n justify-content: inherit;\n }\n }\n }\n}","import { Component, h, Element, State, Prop, Listen, Event, EventEmitter } from '@stencil/core';\nimport { trackComponent } from '../../../global/utils/tracking';\nimport { detectFramework } from '../../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-navbar',\n styleUrl: 'navbar.scss',\n shadow: true,\n})\n\nexport class Navbar {\n @Element() el;\n @State() main: boolean = true\n @State() products: boolean = false\n @State() applications: boolean = false\n @State() design: boolean = false\n @State() support: boolean = false\n @State() about: boolean = false\n @Prop() applicationName: string = \"\"\n @State() hasLeftMenuItems: boolean = true;\n @Prop() fixed: boolean = true;\n @Prop() showLogoAndAppname: boolean = true;\n @State() searchBarIsOpen: string;\n @Prop() logoHref: string = \"\";\n @State() internalLogoHref: string = \"\"\n @Prop() logoHrefTarget: string = '_self';\n @State() internalLogoHrefTarget: string = '_self';\n @Event() ifxNavbarMobileMenuIsOpen: EventEmitter;\n\n private addEventListenersToHandleCustomFocusState() {\n const element = this.el.shadowRoot.firstChild;\n\n if (!element) {\n console.error('element not found');\n return;\n }\n element.tabIndex = -1;\n\n // Select all a elements in the navbar and set their tabIndex to -1 to make them non-focusable\n const aElements = element.querySelectorAll('a');\n for (let i = 0; i < aElements.length; i++) {\n aElements[i].tabIndex = -1;\n }\n\n const slot = element.querySelector('slot');\n if (slot) {\n const assignedNodes = slot.assignedNodes();\n for (let i = 0; i < assignedNodes.length; i++) {\n const node = assignedNodes[i] as HTMLElement;\n if (node.nodeName === 'IFX-NAVBAR-ITEM') {\n const navbarItem = node as HTMLIfxNavbarItemElement;\n\n // Get all navigation items\n const aElements = navbarItem?.shadowRoot.querySelectorAll('a');\n for (let i = 0; i < aElements.length; i++) {\n aElements[i].tabIndex = -1;\n }\n }\n }\n }\n }\n\n @Listen('ifxNavItem') \n clearFirstLayerMenu(event: CustomEvent) { \n if(event.detail.action === 'hideFirstLayer') { \n const leftMenuItems = this.getMobileMenuTop()\n for(let i = 0; i < leftMenuItems.length; i++) { \n if(!leftMenuItems[i].isSameNode(event.detail.component)) {\n leftMenuItems[i].hideComponent()\n }\n }\n }\n\n if(event.detail.action === 'hideSecondLayer') { \n const parent = event.detail.parent;\n const children = parent.children;\n parent.toggleFirstLayerItem('remove', 'add')\n for(let i = 0; i < children.length; i++) { \n if(!children[i].isSameNode(event.detail.component)) {\n children[i].hideComponent()\n }\n }\n }\n\n if(event.detail.action === 'returnToSecondLayer') { \n const parent = event.detail.parent;\n const children = parent.children;\n parent.toggleFirstLayerItem('add', 'remove')\n for(let i = 0; i < children.length; i++) { \n if(!children[i].isSameNode(event.detail.component)) {\n children[i].showComponent()\n }\n }\n }\n\n if(event.detail.action === 'show') { \n const leftMenuItems = this.el.querySelectorAll('[slot=\"left-item\"]')\n for(let i = 0; i < leftMenuItems.length; i++) { \n if(!leftMenuItems[i].isSameNode(event.detail.component)) {\n leftMenuItems[i].showComponent()\n }\n }\n }\n\n if(event.detail.action === 'return') { \n const leftMenuItems = this.getMobileMenuTop()\n for(let i = 0; i < leftMenuItems.length; i++) { \n if(!leftMenuItems[i].isSameNode(event.detail.component)) {\n leftMenuItems[i].showComponent()\n }\n }\n }\n }\n\n getWrappers() {\n const rightContentNavigationGroup = this.el.shadowRoot.querySelector('.navbar__container-right-content-navigation-group')\n const searchBarRightWrapper = this.el.shadowRoot.querySelector('.navbar__container-right-content-navigation-item-search-bar-icon-wrapper')\n const searchBarLeftWrapper = this.el.shadowRoot.querySelector('.navbar__container-left-content-navigation-item-search-bar')\n const rightSideItemSlot = rightContentNavigationGroup.querySelector('slot[name=\"right-item\"]');\n const rightSideSlot = searchBarRightWrapper.querySelector('slot');\n const leftSideSlot = searchBarLeftWrapper.querySelector('slot');\n const rightAssignedNodes = rightSideSlot.assignedNodes();\n const leftAssignedNodes = leftSideSlot.assignedNodes();\n const navbarProfile = this.el.querySelector('ifx-navbar-profile');\n const leftMenuItems = this.el.querySelectorAll('[slot=\"left-item\"]');\n const rightMenuItems = this.el.querySelectorAll('[slot=\"right-item\"]');\n const topRowWrapper = this.el.shadowRoot.querySelector('.navbar__sidebar-top-row-wrapper')\n \n return {rightSideItemSlot, rightSideSlot, leftSideSlot, rightAssignedNodes, leftAssignedNodes, navbarProfile, leftMenuItems, rightMenuItems, topRowWrapper};\n }\n\n hideNavItems() {\n const { rightAssignedNodes, leftAssignedNodes, navbarProfile, leftMenuItems, rightMenuItems, topRowWrapper } = this.getWrappers();\n \n if(rightAssignedNodes.length !== 0) { \n this.searchBarIsOpen = 'right'\n } else if(leftAssignedNodes.length !== 0) {\n this.searchBarIsOpen = 'left'\n }\n\n if(navbarProfile) { \n navbarProfile.hideComponent()\n }\n \n for(let l = 0; l < leftMenuItems.length; l++) { \n if(!topRowWrapper.classList.contains('expand')) {\n leftMenuItems[l].hideComponent()\n }\n }\n \n for(let r = 0; r < rightMenuItems.length; r++) { \n if(topRowWrapper.classList.contains('expand')) {\n if(!rightMenuItems[r].hideOnMobile) { \n rightMenuItems[r].hideComponent()\n }\n } else { \n rightMenuItems[r].hideComponent()\n }\n }\n }\n\n showNavItems() {\n const { navbarProfile, leftMenuItems, rightMenuItems, topRowWrapper } = this.getWrappers();\n this.searchBarIsOpen = undefined;\n \n if(navbarProfile) {\n navbarProfile.showComponent()\n }\n \n for(let l = 0; l < leftMenuItems.length; l++) { \n if(!topRowWrapper.classList.contains('expand')) {\n leftMenuItems[l].showComponent()\n }\n }\n \n for(let r = 0; r < rightMenuItems.length; r++) { \n if(topRowWrapper.classList.contains('expand')) {\n if(!rightMenuItems[r].hideOnMobile) { \n rightMenuItems[r].showComponent()\n }\n } else { \n rightMenuItems[r].showComponent()\n }\n }\n }\n \n \n @Listen('ifxOpen')\n handleSearchBarToggle(event: CustomEvent) {\n \n if(event.detail) { \n this.hideNavItems();\n } else if(!event.detail) {\n this.showNavItems();\n }\n }\n\n toggleClass(el, className) {\n el.classList.toggle(className)\n }\n\n handleSidebar(el) {\n const sidebarIconWrapper = el.currentTarget.closest('.navbar__burger-icon-wrapper');\n const sidebarIconOpen = sidebarIconWrapper.querySelector('.navbar__burger-icon')\n const sidebarIconClose = sidebarIconWrapper.querySelector('.navbar__cross-icon')\n const mainContainer = el.currentTarget.closest('.navbar__main-container');\n const navbarWrapper = el.currentTarget.closest('.navbar__wrapper')\n const sidebarWrapper = navbarWrapper.querySelector('.navbar__sidebar');\n this.toggleClass(navbarWrapper, 'show')\n this.toggleClass(mainContainer, 'show')\n this.toggleClass(sidebarWrapper, 'show')\n this.toggleClass(sidebarIconOpen, 'close')\n this.toggleClass(sidebarIconClose, 'show')\n\n if(sidebarIconClose.classList.contains('show')) { \n this.handleBodyScroll('hide')\n } else { \n this.handleBodyScroll('show')\n }\n }\n\n handleBodyScroll(action) { \n const body = this.el.closest('body')\n if(!this.fixed && action === 'hide') { \n body.style.overflow = 'hidden'\n } else if(action === 'show') { \n body.style.overflow = 'visible'\n }\n }\n\n handleDropdownMenu(el) {\n const dropdownWrapper = el.currentTarget.querySelector('.navbar__dropdown-wrapper')\n dropdownWrapper.classList.toggle('open')\n const iconWrapper = el.currentTarget.querySelector('a')\n iconWrapper.classList.toggle('open')\n }\n\n async setItemMenuPosition() { \n const navbarItems = this.el.querySelectorAll('ifx-navbar-item')\n const navbarProfile = this.el.querySelector('ifx-navbar-profile')\n\n if(navbarProfile) {\n const itemChildren = navbarProfile.querySelectorAll('ifx-navbar-item')\n if (itemChildren.length !== 0) {\n itemChildren.forEach(item => { \n item.setMenuItemPosition()\n this.setMenuItemChildrenPosition(item)\n })\n }\n }\n \n if(navbarItems.length !== 0) { \n for(let i = 0; i < navbarItems.length; i++) { \n const item = navbarItems[i];\n const itemChildren = item.querySelectorAll('ifx-navbar-item')\n if (itemChildren.length !== 0) {\n const hasNestedItems = await item.setItemSideSpecifications()\n if(hasNestedItems) { \n itemChildren.forEach(item => { \n item.setMenuItemPosition()\n this.setMenuItemChildrenPosition(item)\n })\n }\n }\n }\n }\n }\n\n setMenuItemChildrenPosition(item) {\n const itemChildren = item.querySelectorAll('ifx-navbar-item');\n if (itemChildren.length !== 0) {\n itemChildren.forEach(subItem => { \n subItem.setMenuItemPosition()\n this.setMenuItemChildrenPosition(subItem)\n })\n }\n }\n\n getMediaQueryList() { \n const mediaQueryList = window.matchMedia('(max-width: 800px)');\n return mediaQueryList;\n }\n\n async componentDidLoad() {\n const framework = detectFramework();\n trackComponent('ifx-navbar', await framework)\n this.setItemMenuPosition()\n this.addEventListenersToHandleCustomFocusState();\n \n const mediaQueryList = this.getMediaQueryList()\n\n if (mediaQueryList.matches) {\n this.moveNavItemsToSidebar();\n }\n\n }\n\n handleMobileMenuBottom(e) { \n const mobileMenuBottomWrapper = this.el.shadowRoot.querySelector('.navbar__sidebar-bottom-row')\n const slotElement = e.target;\n const nodes = slotElement.assignedNodes();\n if(nodes.length > 0) { \n mobileMenuBottomWrapper.classList.add('show')\n } else { \n mobileMenuBottomWrapper.classList.remove('show')\n }\n }\n\n handleLogoHrefAndTarget(){\n if(this.logoHref.trim() === \"\") {\n this.internalLogoHref = undefined;\n }else{\n this.internalLogoHref = this.logoHref;\n }\n\n if(['_self', '_blank', '_parent'].includes(this.logoHrefTarget.trim())){\n this.internalLogoHrefTarget = this.logoHrefTarget;\n }else{\n this.internalLogoHrefTarget = '_self';\n }\n }\n\n \n componentWillLoad() {\n this.RemoveSpaceOnStorybookSnippet()\n const dropdownMenu = this.el.querySelector('ifx-navbar-menu')\n const leftMenuItems = this.el.querySelectorAll('[slot=\"left-item\"]')\n if (!leftMenuItems.length && !dropdownMenu) {\n this.hasLeftMenuItems = false;\n }\n this.handleLogoHrefAndTarget();\n\n const mediaQueryList = window.matchMedia('(max-width: 800px)');\n mediaQueryList.addEventListener('change', (e) => this.moveNavItemsToSidebar(e));\n }\n\n \n\n getSearchBarLeftWrapper() { \n const searchBarLeftWrapper = this.el.shadowRoot.querySelector('.navbar__container-left-content-navigation-item-search-bar')\n return searchBarLeftWrapper;\n }\n\n getMobileMenuTop() { \n const leftMenuItems = this.el.querySelectorAll('[slot=\"mobile-menu-top\"]');\n return leftMenuItems;\n }\n\n getMobileMenuBottom() { \n const rightMenuItems = this.el.querySelectorAll('[slot=\"mobile-menu-bottom\"]');\n return rightMenuItems;\n }\n\n handleBurgerIcon() { \n const leftMenuItems = this.getMobileMenuTop()\n const rightMenuItems = this.getMobileMenuBottom()\n if(!leftMenuItems.length && !rightMenuItems.length) { \n const burgerIconWrapper = this.el.shadowRoot.querySelector('.navbar__burger-icon-wrapper')\n this.toggleClass(burgerIconWrapper, 'hide')\n }\n }\n \n moveNavItemsToSidebar(e?: MediaQueryListEvent) {\n const topRowWrapper = this.el.shadowRoot.querySelector('.navbar__sidebar-top-row-wrapper')\n const mediaQueryList = this.getMediaQueryList();\n const matches = e ? e.matches : mediaQueryList.matches;\n \n if (matches) {\n /* The viewport is 800px wide or less /\n topRowWrapper.classList.add('expand')\n \n //hide body scroll if sidebar was opened\n const crossIcon = this.el.shadowRoot.querySelector('.navbar__cross-icon')\n if(crossIcon.classList.contains('show')) { \n this.handleBodyScroll('hide')\n }\n \n //move search bar to right-side\n const searchBarLeft = this.el.querySelector('[slot=\"search-bar-left\"]')\n if(searchBarLeft) { \n if(this.searchBarIsOpen) { \n searchBarLeft.onNavbarMobile()\n }\n const searchBarLeftWrapper = this.getSearchBarLeftWrapper()\n searchBarLeftWrapper.classList.add('initial')\n searchBarLeft.setAttribute('slot', 'search-bar-right')\n }\n \n //left-side\n const leftMenuItems = this.el.querySelectorAll('[slot=\"left-item\"]')\n for(let i = 0; i < leftMenuItems.length; i++) { \n leftMenuItems[i].setAttribute('slot', 'mobile-menu-top')\n leftMenuItems[i].moveChildComponentsIntoSubLayerMenu()\n if(this.searchBarIsOpen) { \n leftMenuItems[i].showComponent()\n }\n }\n \n //right-side\n const rightMenuItems = this.el.querySelectorAll('[slot=\"right-item\"]')\n for(let i = 0; i < rightMenuItems.length; i++) { \n if(rightMenuItems[i].tagName.toUpperCase() === 'IFX-NAVBAR-PROFILE') { \n rightMenuItems[i].showLabel = false;\n } else { \n if(rightMenuItems[i].hideOnMobile) { \n rightMenuItems[i].setAttribute('slot', 'mobile-menu-bottom')\n \n rightMenuItems[i].toggleChildren('add')\n \n rightMenuItems[i].showLabel = true;\n if(this.searchBarIsOpen) { \n rightMenuItems[i].showComponent()\n }\n }\n }\n }\n \n this.handleBurgerIcon()\n\n } else {\n / The viewport is more than 800px wide /\n topRowWrapper.classList.remove('expand')\n\n //show body scroll \n this.handleBodyScroll('show')\n\n //return search bar to its original position\n const searchBarLeftWrapper = this.getSearchBarLeftWrapper()\n const leftIsInitial = searchBarLeftWrapper.classList.contains('initial')\n const searchBarRight = this.el.querySelector('[slot=\"search-bar-right\"]')\n if(leftIsInitial) { \n if(this.searchBarIsOpen) { \n searchBarRight.onNavbarMobile()\n }\n if(searchBarRight) { \n searchBarRight.setAttribute('slot', 'search-bar-left')\n }\n }\n\n //left-side\n const leftMenuItems = this.getMobileMenuTop()\n for(let i = 0; i < leftMenuItems.length; i++) { \n leftMenuItems[i].setAttribute('slot', 'left-item')\n leftMenuItems[i].moveChildComponentsBackIntoNavbar()\n }\n\n //right-side\n const rightMenuItems = this.getMobileMenuBottom()\n const navbarProfileItem = this.el.querySelector('ifx-navbar-profile')\n if(navbarProfileItem) { \n const showProfileItemLabel = navbarProfileItem.getAttribute('show-label');\n navbarProfileItem.setAttribute('show-label', showProfileItemLabel)\n }\n\n for(let i = 0; i < rightMenuItems.length; i++) { \n rightMenuItems[i].setAttribute('slot', 'right-item')\n\n rightMenuItems[i].toggleChildren('remove')\n \n const showLabel = rightMenuItems[i].getAttribute('show-label');\n rightMenuItems[i].setAttribute('show-label', showLabel)\n if(this.searchBarIsOpen) { \n rightMenuItems[i].hideComponent()\n }\n }\n }\n }\n\n RemoveSpaceOnStorybookSnippet() { \n let parent = this.el.parentElement;\n if(parent) { \n let storybookWrapper = parent.closest('.css-xzp052');\n if(storybookWrapper) { \n storybookWrapper.style.overflow = 'visible'\n }\n }\n }\n\n\n \n render() {\n return (\n <div aria-label='a navigation navbar' class={`navbar__wrapper ${this.fixed ? 'fixed' : \"\"}`}>\n <div class={`navbar__main-container ${this.fixed ? 'fixed' : \"\"}`}>\n <div class={`navbar__container ${this.searchBarIsOpen ? \"expanded\" : \"\"}`}>\n <div class={`navbar__container-left ${this.searchBarIsOpen === 'left' ? \"expand\" : this.searchBarIsOpen === 'right' ? 'hide' : \"\"}`}>\n {this.showLogoAndAppname &&\n <div class={`navbar__container-left-logo ${this.searchBarIsOpen === 'left' ? 'hide' : \"\"}`}>\n <div class=\"navbar__container-left-logo-default\">\n <a href={this.internalLogoHref} target = {this.internalLogoHrefTarget}>\n <svg width=\"91\" height=\"40\" viewBox=\"0 0 91 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_2396_2480)\">\n <path d=\"M67.691 26.7766C71.0884 26.7766 72.1461 23.1841 72.1461 19.8802C72.1461 15.4536 70.2871 13.1441 67.691 13.1441C64.4219 13.1441 63.2681 16.7367 63.3001 19.9443C63.3322 23.1199 64.2296 26.7766 67.691 26.7766ZM66.0244 19.8481C66.0244 18.533 66.0244 15.4536 67.691 15.4536C69.4859 15.4536 69.4218 18.5009 69.4218 19.9123C69.4218 21.2595 69.4218 24.5313 67.7551 24.5313C65.9603 24.4992 66.0244 21.2274 66.0244 19.8481ZM57.8195 26.7766C59.1976 26.7766 60.3835 26.2313 61.5053 25.0445L60.5117 23.1841C59.7425 24.018 58.9733 24.4671 58.0438 24.4671C57.2746 24.4671 56.6336 24.018 56.249 23.2482C55.9285 22.5746 55.8644 21.8048 55.8644 20.9708V20.7142H61.6335V20.1368C61.6335 17.282 61.2809 15.7102 60.3835 14.5234C59.7104 13.6253 58.7169 13.1441 57.499 13.1441C56.2169 13.1441 55.1593 13.7215 54.39 14.8442C53.5567 16.0631 53.2042 17.699 53.2042 19.9443C53.1721 24.2426 54.8708 26.7766 57.8195 26.7766ZM57.531 15.2612C58.172 15.2612 58.5566 15.614 58.813 16.1914C59.0053 16.7046 59.1015 17.5707 59.1015 18.5971H55.8644C55.8964 16.3197 56.3772 15.2612 57.531 15.2612ZM74.2614 26.4559H76.7614V16.8329C77.3703 16.0952 78.0754 15.6782 78.5882 15.6782C78.9087 15.6782 79.2292 15.7423 79.4215 15.9989C79.6138 16.2876 79.71 16.7046 79.71 17.699V26.4559H82.21V16.5442C82.21 15.6782 82.1138 14.8121 81.601 14.1706C81.1523 13.5932 80.4472 13.2404 79.5497 13.2404C78.3959 13.2404 77.2101 13.914 76.569 14.6838C76.537 14.0102 76.3126 13.3687 76.2485 13.1441L73.9089 13.7536C74.0371 14.4593 74.2294 15.3253 74.2294 16.8971V26.4559H74.2614ZM45.2236 14.6838C45.1915 14.0102 44.9672 13.3687 44.9031 13.1441L42.5634 13.7536C42.6916 14.4593 42.8839 15.3253 42.8839 16.8971V26.4238H45.3838V16.8008C45.9928 16.0631 46.6979 15.6461 47.2107 15.6461C47.5312 15.6461 47.8517 15.7102 48.044 15.9669C48.2363 16.2555 48.3325 16.6725 48.3325 17.6669V26.4238H50.8324V16.5442C50.8324 15.6782 50.7363 14.8121 50.2235 14.1706C49.7748 13.5932 49.0696 13.2404 48.1722 13.2404C47.0505 13.2404 45.8646 13.914 45.2236 14.6838ZM14.6473 9.07042C16.1216 9.07042 17.3075 7.88359 17.3075 6.40807C17.3075 4.93256 16.1216 3.74573 14.6473 3.74573C13.173 3.74573 11.9871 4.93256 11.9871 6.40807C11.9871 7.88359 13.173 9.07042 14.6473 9.07042ZM26.9227 26.4559V16.5442C26.9227 15.6782 26.8265 14.8121 26.3137 14.1706C25.865 13.5932 25.1599 13.2404 24.2625 13.2404C23.1087 13.2404 21.9228 13.914 21.2818 14.6838C21.2497 14.0102 21.0254 13.3687 20.9613 13.1441L18.6536 13.7857C18.7818 14.4913 18.9741 15.3574 18.9741 16.9291V26.4559H21.4741V16.8329C22.0831 16.0952 22.7882 15.6782 23.301 15.6782C23.6215 15.6782 23.942 15.7423 24.1343 15.9989C24.3266 16.2876 24.4227 16.7046 24.4227 17.699V26.4559H26.9227ZM38.4289 8.36474C37.4994 8.36474 36.7622 9.10249 36.7622 10.0327C36.7622 10.9629 37.4994 11.7007 38.3968 11.7007C39.3263 11.7007 40.0634 10.9629 40.0634 10.0327C40.0634 9.10249 39.3263 8.36474 38.4289 8.36474ZM13.4614 26.4559H15.9614V10.8346L13.4614 11.1554V26.4559ZM33.8777 9.90441C34.3264 9.90441 34.7751 10.0648 35.0635 10.2893L35.7687 8.33266C35.0956 7.85151 34.3584 7.62698 33.429 7.62698C32.788 7.62698 32.1149 7.78736 31.5059 8.26851C30.897 8.78173 30.256 9.80818 30.256 11.7328C30.256 12.5667 30.288 13.4328 30.288 13.4328H29.4226V15.6461H30.288V26.4238H32.8521V15.6782H34.743L35.2238 13.4649H32.8841V11.4762C32.8841 10.5139 33.2687 9.90441 33.8777 9.90441ZM37.1468 26.4559H39.6788V13.2404L37.1468 13.5611V26.4559Z\" fill=\"#005DA9\" />\n <path d=\"M77.0816 33.5126C68.6203 36.0146 58.3321 37.1052 48.2682 37.1052C22.7239 37.1052 6.24986 29.5993 5.09604 19.6877C4.67938 15.9668 7.59599 12.3422 12.4677 9.26285C11.6023 8.62132 11.0575 7.59488 11.0254 6.44012C3.97427 10.161 0 15.0366 0 19.9764C0 30.9145 19.5188 40.1525 48.5246 39.7676C58.6205 39.6393 67.0498 38.1958 74.6778 35.6939C83.7482 32.7428 89.4532 28.5087 90.8313 26.6483C89.1968 28.1238 85.3186 31.0748 77.0816 33.5126ZM23.2687 4.38723C24.9674 3.80985 27.3712 3.0721 27.3712 3.0721C34.1339 1.21166 41.6017 0.121063 48.5566 0.185215C40.544 -0.295931 33.2365 0.185215 26.8584 1.33997C26.8584 1.33997 24.743 1.69281 22.4675 2.27018C22.4675 2.27018 21.3777 2.55887 20.7047 2.75133C20.0316 2.94379 19.1021 3.2004 19.1021 3.2004C18.4611 3.39286 17.8201 3.6174 17.1791 3.84193C17.8201 4.48346 18.2047 5.31745 18.2368 6.27974C19.3586 5.76652 21.5059 4.99668 23.2687 4.38723Z\" fill=\"#E30034\" />\n </g>\n <defs>\n <clipPath id=\"clip0_2396_2480\">\n <rect width=\"91\" height=\"40\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </a>\n </div>\n {this.applicationName && <h6>{this.applicationName}</h6>}\n {this.applicationName && this.hasLeftMenuItems &&\n <div class=\"navbar__container-left-logo-divider\"></div>}\n </div>}\n <div class=\"navbar__container-left-content\">\n <div class=\"navbar__container-left-content-navigation-group\">\n <slot name='left-item' />\n <div class=\"navbar__container-left-content-navigation-item-search-bar\">\n <slot name='search-bar-left' />\n </div>\n </div>\n </div>\n </div>\n <div class={`navbar__container-right ${this.searchBarIsOpen === 'right' ? \"expand\" : this.searchBarIsOpen === 'left' ? 'hide' : \"\"}`}>\n <div class=\"navbar__container-right-content\">\n <div class=\"navbar__container-right-content-navigation-group\">\n <div class=\"navbar__container-right-content-navigation-item-search-bar\">\n <div class={`navbar__container-right-content-navigation-item-search-bar-icon-wrapper`}>\n <slot name='search-bar-right' />\n </div>\n </div>\n <slot name='right-item' />\n </div>\n </div>\n\n {/ MOBILE MENU BUTTON /}\n <div class={`navbar__burger-icon-wrapper`} onClick={this.handleSidebar.bind(this)}>\n <div class=\"navbar__burger-icon\">\n <ifx-icon icon=\"menu-right-16\"></ifx-icon>\n </div>\n <div class=\"navbar__cross-icon\">\n <ifx-icon icon=\"cross-16\"></ifx-icon>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n {/ SIDEBAR /}\n <div class=\"navbar__sidebar\">\n {/ left side ifx-navbar-item /}\n <div class=\"navbar__sidebar-top-row\">\n <div class=\"navbar__sidebar-top-row-wrapper\">\n <slot name='mobile-menu-top' />\n </div>\n </div>\n\n {/ right side ifx-navbar-item */}\n <div class=\"navbar__sidebar-bottom-row\">\n <slot name='mobile-menu-bottom' onSlotchange={(e) => this.handleMobileMenuBottom(e)} />\n </div>\n \n </div>\n </div>\n );\n }\n}"],"names":[],"mappings":"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"}

package/dist/infineon-design-system-stencil/ifx-notification.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-notification.entry.esm.js","sources":["src/components/notification/notification.scss?tag=ifx-notification&encapsulation=shadow","src/components/notification/notification.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.ifx-notification__wrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n\n background-color: tokens.$ifxColorBaseWhite;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n color: tokens.$ifxColorBaseBlack;\n\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n\n &.ifx-notification__wrapper--success {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorGreen500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorGreen500;\n }\n }\n\n &.ifx-notification__wrapper--locked {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOrange500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorOrange500;\n }\n }\n\n &.ifx-notification__wrapper--error {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorRed500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorRed500;\n }\n }\n\n &.ifx-notification__wrapper--neutral{\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOcean500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorOcean500;\n }\n }\n\n & .ifx-notification__icon {\n margin-right: tokens.$ifxSpace100;\n display: flex;\n align-self: center;\n }\n\n & .ifx-notification__body {\n display: flex;\n flex-direction: row;\n flex-grow: 1;\n font-size: tokens.$ifxFontSizeS;\n\n & .ifx-notification__slot {\n flex-grow: 1;\n display: inline-flex;\n align-items: center;\n }\n }\n\n & .ifx-notification__link {\n font-size: tokens.$ifxFontSizeS;\n }\n\n @media (max-width: tokens.$ifxBreakpointXs) {\n & .ifx-notification__icon {\n align-self: flex-start;\n }\n\n & .ifx-notification__body {\n flex-direction: column;\n }\n\n & .ifx-notification__link {\n margin-top: tokens.$ifxSpace100;\n }\n }\n}","import { Component, h, Host, Prop, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nexport type NotificationVariant = 'success' \| 'locked' \| 'error' \| 'neutral';\n\n@Component({\n tag: 'ifx-notification',\n styleUrl: 'notification.scss',\n shadow: true\n})\nexport class Notification {\n @Element() el;\n @Prop() icon: string;\n @Prop() variant: NotificationVariant = 'success';\n @Prop() linkText: string; \n @Prop() linkHref: string;\n @Prop() linkTarget: string = '_blank';\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-notification', await framework)\n }\n }\n\n private getClassName(): string {\n switch (this.variant) {\n case 'success':\n return 'ifx-notification__wrapper--success';\n case 'locked':\n return 'ifx-notification__wrapper--locked';\n case 'error':\n return 'ifx-notification__wrapper--error';\n case 'neutral':\n return 'ifx-notification__wrapper--neutral';\n default:\n return 'ifx-notification__wrapper--success';\n }\n }\n\n render() {\n return (\n <Host>\n <div class={\"ifx-notification__wrapper \" + this.getClassName()}>\n <div class=\"ifx-notification__icon\">\n <ifx-icon icon={this.icon}></ifx-icon>\n </div>\n <div class=\"ifx-notification__body\">\n <div class=\"ifx-notification__slot\">\n <slot/>\n </div>\n { this.linkText && this.linkHref && \n <div class=\"ifx-notification__link\">\n <ifx-link href={this.linkHref} target={this.linkTarget}>\n {this.linkText}<ifx-icon icon=\"arrow-right-16\">\n </ifx-icon>\n </ifx-link>\n </div>\n }\n </div>\n </div>\n </Host>\n );\n }\n}"],"names":[],"mappings":";;;;AAAA,MAAM,eAAe,GAAG,~~qoDAAqoD~~;;~~MCWhpD~~,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAQU,QAAA,IAAO,CAAA,OAAA,GAAwB,SAAS;AAGxC,QAAA,IAAU,CAAA,UAAA,GAAW,QAAQ;AAgDtC;AA9CC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,kBAAkB,EAAE,MAAM,SAAS,CAAC;;;IAI/C,YAAY,GAAA;AAClB,QAAA,QAAQ,IAAI,CAAC,OAAO;AAClB,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,oCAAoC;AAC7C,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,mCAAmC;AAC5C,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,kCAAkC;AAC3C,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,oCAAoC;AAC7C,YAAA;AACE,gBAAA,OAAO,oCAAoC;;;IAIjD,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,4BAA4B,GAAG,IAAI,CAAC,YAAY,EAAE,EAAA,EAC5D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAClC,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAO,CACH,EACJ,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAChC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAA,EACnD,IAAI,CAAC,QAAQ,EAAC,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,gBAAgB,EACrC,CAAA,CACA,CACP,CAEF,CACF,CACD;;;;;;;;"}
1	+ {"version":3,"file":"ifx-notification.entry.esm.js","sources":["src/components/notification/notification.scss?tag=ifx-notification&encapsulation=shadow","src/components/notification/notification.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.ifx-notification__wrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n\n background-color: tokens.$ifxColorBaseWhite;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n color: tokens.$ifxColorBaseBlack;\n\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n\n &.ifx-notification__wrapper--success {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorGreen500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorGreen500;\n }\n }\n\n &.ifx-notification__wrapper--locked {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOrange500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorOrange500;\n }\n }\n\n &.ifx-notification__wrapper--error {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorRed500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorRed500;\n }\n }\n\n &.ifx-notification__wrapper--neutral{\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOcean500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorOcean500;\n }\n }\n\n & .ifx-notification__icon {\n margin-right: tokens.$ifxSpace100;\n display: flex;\n align-self: center;\n }\n\n & .ifx-notification__body {\n display: flex;\n flex-direction: row;\n flex-grow: 1;\n font-size: tokens.$ifxFontSizeS;\n\n & .ifx-notification__slot {\n flex-grow: 1;\n display: inline-flex;\n align-items: center;\n }\n }\n\n & .ifx-notification__link {\n font-size: tokens.$ifxFontSizeS;\n }\n\n @media (max-width: tokens.$ifxBreakpointXs) {\n & .ifx-notification__icon {\n align-self: flex-start;\n }\n\n & .ifx-notification__body {\n flex-direction: column;\n }\n\n & .ifx-notification__link {\n margin-top: tokens.$ifxSpace100;\n }\n }\n}","import { Component, h, Host, Prop, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nexport type NotificationVariant = 'success' \| 'locked' \| 'error' \| 'neutral';\n\n@Component({\n tag: 'ifx-notification',\n styleUrl: 'notification.scss',\n shadow: true\n})\nexport class Notification {\n @Element() el;\n @Prop() icon: string;\n @Prop() variant: NotificationVariant = 'success';\n @Prop() linkText: string; \n @Prop() linkHref: string;\n @Prop() linkTarget: string = '_blank';\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-notification', await framework)\n }\n }\n\n private getClassName(): string {\n switch (this.variant) {\n case 'success':\n return 'ifx-notification__wrapper--success';\n case 'locked':\n return 'ifx-notification__wrapper--locked';\n case 'error':\n return 'ifx-notification__wrapper--error';\n case 'neutral':\n return 'ifx-notification__wrapper--neutral';\n default:\n return 'ifx-notification__wrapper--success';\n }\n }\n\n render() {\n return (\n <Host>\n <div class={\"ifx-notification__wrapper \" + this.getClassName()}>\n <div class=\"ifx-notification__icon\">\n <ifx-icon icon={this.icon}></ifx-icon>\n </div>\n <div class=\"ifx-notification__body\">\n <div class=\"ifx-notification__slot\">\n <slot/>\n </div>\n { this.linkText && this.linkHref && \n <div class=\"ifx-notification__link\">\n <ifx-link href={this.linkHref} target={this.linkTarget}>\n {this.linkText}<ifx-icon icon=\"arrow-right-16\">\n </ifx-icon>\n </ifx-link>\n </div>\n }\n </div>\n </div>\n </Host>\n );\n }\n}"],"names":[],"mappings":";;;;AAAA,MAAM,eAAe,GAAG,uoDAAuoD;;MCWlpD,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAQU,QAAA,IAAO,CAAA,OAAA,GAAwB,SAAS;AAGxC,QAAA,IAAU,CAAA,UAAA,GAAW,QAAQ;AAgDtC;AA9CC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,kBAAkB,EAAE,MAAM,SAAS,CAAC;;;IAI/C,YAAY,GAAA;AAClB,QAAA,QAAQ,IAAI,CAAC,OAAO;AAClB,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,oCAAoC;AAC7C,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,mCAAmC;AAC5C,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,kCAAkC;AAC3C,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,oCAAoC;AAC7C,YAAA;AACE,gBAAA,OAAO,oCAAoC;;;IAIjD,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,4BAA4B,GAAG,IAAI,CAAC,YAAY,EAAE,EAAA,EAC5D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAClC,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAO,CACH,EACJ,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAChC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAA,EACnD,IAAI,CAAC,QAAQ,EAAC,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,gBAAgB,EACrC,CAAA,CACA,CACP,CAEF,CACF,CACD;;;;;;;;"}

package/dist/infineon-design-system-stencil/ifx-progress-bar.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-progress-bar.entry.esm.js","sources":["src/components/progress-bar/progress-bar.scss?tag=ifx-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n width: 100%;\n}\n\n.progress-bar {\n height: tokens.$ifxSize200;\n bottom: 0;\n right: 0;\n top: 0;\n left: 0;\n display: flex;\n height: tokens.$ifxSize250;\n border-radius: tokens.$ifxBorderRadius12;\n width: 100%; // Ensure the bar itself can grow up to 100% width\n overflow: hidden; // Ensures that the inner progress bar doesn't exceed the width of the outer progress bar\n background-color: tokens.$ifxColorEngineering200;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n \n \n &.s {\n height: 4px;\n }\n\n .label {\n font-style: normal;\n font-size: tokens.$ifxFontSizeS;\n font-weight: 400;\n line-height: tokens.$ifxLineHeightS;\n color: tokens.$ifxColorBaseWhite;\n }\n \n .progress {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: fit-content;\n height: 100%;\n background-color: #0A8276;\n transition: width 0.2s ease;\n }\n}","import { Component, Prop, h, State, Watch, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-progress-bar',\n styleUrl: 'progress-bar.scss',\n shadow: true\n})\nexport class ProgressBar {\n @Element() el: HTMLElement;\n @Prop() value: number = 0;\n @Prop() size: string;\n @Prop() showLabel: boolean = false;\n\n @State() internalValue: number;\n\n @Watch('value')\n valueChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n this.internalValue = newValue;\n }\n }\n\n componentWillLoad() {\n this.internalValue = this.value;\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-progress-bar', await framework)\n }\n }\n\n render() {\n return (\n <div role=\"progressbar\"\n aria-valuenow={this.internalValue}\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n aria-label={`Progress: ${this.internalValue}%`} class={`progress-bar ${this.size}`}>\n <div class=\"progress\" style={{ width: `${this.internalValue}%` }}>\n {this.showLabel && this.size !== \"s\" && this.internalValue !== 0 && <span class=\"label\">{`${this.internalValue}%`}</span>}\n </div>\n </div>\n );\n }\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,cAAc,GAAG,~~qkBAAqkB~~;;~~MCU/kB~~,WAAW,GAAA,MAAA;AALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAW,CAAC;AAEjB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAmCnC;IA9BC,YAAY,CAAC,QAAgB,EAAE,QAAgB,EAAA;AAC7C,QAAA,IAAI,QAAQ,KAAK,QAAQ,EAAE;AACzB,YAAA,IAAI,CAAC,aAAa,GAAG,QAAQ;;;IAIjC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK;;AAGjC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,kBAAkB,EAAE,MAAM,SAAS,CAAC;;;IAIvD,MAAM,GAAA;QACJ,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EACN,eAAA,EAAA,IAAI,CAAC,aAAa,EACnB,eAAA,EAAA,GAAG,EACH,eAAA,EAAA,KAAK,gBACP,CAAA,UAAA,EAAa,IAAI,CAAC,aAAa,CAAG,CAAA,CAAA,EAAE,KAAK,EAAE,CAAgB,aAAA,EAAA,IAAI,CAAC,IAAI,CAAA,CAAE,EAAA,EAClF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAG,EAAA,IAAI,CAAC,aAAa,CAAG,CAAA,CAAA,EAAE,EAAA,EAC7D,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,GAAG,IAAI,IAAI,CAAC,aAAa,KAAK,CAAC,IAAI,6DAAM,KAAK,EAAC,OAAO,EAAE,EAAA,CAAA,EAAG,IAAI,CAAC,aAAa,CAAA,CAAA,CAAG,CAAQ,CACrH,CACF;;;;;;;;;;;"}
1	+ {"version":3,"file":"ifx-progress-bar.entry.esm.js","sources":["src/components/progress-bar/progress-bar.scss?tag=ifx-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n width: 100%;\n}\n\n.progress-bar {\n height: tokens.$ifxSize200;\n bottom: 0;\n right: 0;\n top: 0;\n left: 0;\n display: flex;\n height: tokens.$ifxSize250;\n border-radius: tokens.$ifxBorderRadius12;\n width: 100%; // Ensure the bar itself can grow up to 100% width\n overflow: hidden; // Ensures that the inner progress bar doesn't exceed the width of the outer progress bar\n background-color: tokens.$ifxColorEngineering200;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n \n \n &.s {\n height: 4px;\n }\n\n .label {\n font-style: normal;\n font-size: tokens.$ifxFontSizeS;\n font-weight: 400;\n line-height: tokens.$ifxLineHeightS;\n color: tokens.$ifxColorBaseWhite;\n }\n \n .progress {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: fit-content;\n height: 100%;\n background-color: #0A8276;\n transition: width 0.2s ease;\n }\n}","import { Component, Prop, h, State, Watch, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-progress-bar',\n styleUrl: 'progress-bar.scss',\n shadow: true\n})\nexport class ProgressBar {\n @Element() el: HTMLElement;\n @Prop() value: number = 0;\n @Prop() size: string;\n @Prop() showLabel: boolean = false;\n\n @State() internalValue: number;\n\n @Watch('value')\n valueChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n this.internalValue = newValue;\n }\n }\n\n componentWillLoad() {\n this.internalValue = this.value;\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-progress-bar', await framework)\n }\n }\n\n render() {\n return (\n <div role=\"progressbar\"\n aria-valuenow={this.internalValue}\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n aria-label={`Progress: ${this.internalValue}%`} class={`progress-bar ${this.size}`}>\n <div class=\"progress\" style={{ width: `${this.internalValue}%` }}>\n {this.showLabel && this.size !== \"s\" && this.internalValue !== 0 && <span class=\"label\">{`${this.internalValue}%`}</span>}\n </div>\n </div>\n );\n }\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,cAAc,GAAG,ukBAAukB;;MCUjlB,WAAW,GAAA,MAAA;AALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAW,CAAC;AAEjB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAmCnC;IA9BC,YAAY,CAAC,QAAgB,EAAE,QAAgB,EAAA;AAC7C,QAAA,IAAI,QAAQ,KAAK,QAAQ,EAAE;AACzB,YAAA,IAAI,CAAC,aAAa,GAAG,QAAQ;;;IAIjC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK;;AAGjC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,kBAAkB,EAAE,MAAM,SAAS,CAAC;;;IAIvD,MAAM,GAAA;QACJ,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EACN,eAAA,EAAA,IAAI,CAAC,aAAa,EACnB,eAAA,EAAA,GAAG,EACH,eAAA,EAAA,KAAK,gBACP,CAAA,UAAA,EAAa,IAAI,CAAC,aAAa,CAAG,CAAA,CAAA,EAAE,KAAK,EAAE,CAAgB,aAAA,EAAA,IAAI,CAAC,IAAI,CAAA,CAAE,EAAA,EAClF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAG,EAAA,IAAI,CAAC,aAAa,CAAG,CAAA,CAAA,EAAE,EAAA,EAC7D,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,GAAG,IAAI,IAAI,CAAC,aAAa,KAAK,CAAC,IAAI,6DAAM,KAAK,EAAC,OAAO,EAAE,EAAA,CAAA,EAAG,IAAI,CAAC,aAAa,CAAA,CAAA,CAAG,CAAQ,CACrH,CACF;;;;;;;;;;;"}

package/dist/infineon-design-system-stencil/ifx-radio-button-group.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-radio-button-group.entry.esm.js","sources":["src/components/radio-button-group/radio-button-group.scss?tag=ifx-radio-button-group&encapsulation=shadow","src/components/radio-button-group/radio-button-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.radio-button-group-container {\n display: flex;\n flex-direction: column;\n}\n\n.radio-button-group {\n display: flex;\n gap: tokens.$ifxSpace100;\n\n &.horizontal {\n flex-direction: row;\n column-gap: tokens.$ifxSpace150;\n }\n\n &.vertical {\n flex-direction: column;\n row-gap: tokens.$ifxSpace150;\n }\n}\n\n.group-label {\n font-size: tokens.$ifxFontSizeM;\n color: tokens.$ifxColorBaseBlack;\n line-height: tokens.$ifxLineHeightM;\n font-weight: tokens.$ifxFontWeightRegular;\n margin-bottom: tokens.$ifxSpace100;\n text-align: left;\n text-underline-position: from-font;\n text-decoration-skip-ink: none;\n}\n\n.group-label .required {\n color: tokens.$ifxColorEngineering500;\n margin-left: tokens.$ifxSpace50;\n}\n\n.group-label .required.error {\n color: tokens.$ifxColorRed500;\n}\n\n.caption {\n margin-top: tokens.$ifxSpace100;\n align-self: flex-start;\n display: flex;\n width: 100%;\n column-gap: tokens.$ifxSpace100;\n justify-content: space-between;\n align-items: center;\n\n &.default {\n color: tokens.$ifxColorBaseBlack;\n }\n\n &.error {\n color: tokens.$ifxColorRed500;\n }\n}\n\n.caption-text {\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n flex: 1;\n text-align: left;\n text-underline-position: from-font;\n text-decoration-skip-ink: none;\n}\n\n.caption-icon {\n flex:0;\n display: flex;\n}","import { Component, State, Prop, h, Element, Listen, Method } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-radio-button-group',\n styleUrl: 'radio-button-group.scss',\n shadow: true,\n // formAssociated: true\n})\n\nexport class RadioButtonGroup {\n private errorStates: Map<HTMLElement, boolean> = new Map();\n\n @Element() el: HTMLElement;\n @Prop() alignment: 'horizontal' \| 'vertical' = 'vertical';\n @Prop() size: string;\n @Prop() showGroupLabel: boolean;\n @Prop() groupLabelText: string = 'Group Label Text';\n @Prop() showCaption: boolean;\n @Prop() captionText: string;\n @Prop() showCaptionIcon: boolean;\n @Prop() required: boolean = false;\n @State() hasErrors: boolean = false;\n \n @Listen('ifxError')\n handleRadioButtonError(event: CustomEvent) {\n const radioButton = event.target as HTMLElement;\n if (radioButton.tagName.toLowerCase() === 'ifx-radio-button') {\n this.errorStates.set(radioButton, event.detail);\n this.updateHasErrors();\n }\n }\n\n // Method to set the error state of all radio-butttons in the group\n @Method()\n async setGroupError(error: boolean) {\n const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\n radioButtons.forEach((radioButton) => {\n (radioButton as any).error = error;\n });\n }\n\n componentWillLoad() {\n this.initializeState();\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-radio-button-group', await framework)\n }\n }\n\n handleSlotChange = () => {\n this.initializeState();\n };\n\n private initializeState() {\n this.errorStates.clear();\n const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\n radioButtons.forEach((radioButton) => {\n if (!this.errorStates.has(radioButton)) {\n this.errorStates.set(radioButton, (radioButton as any).error \|\| false);\n }\n });\n this.updateHasErrors();\n }\n\n private updateHasErrors() {\n console.log('here')\n this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\n }\n\n render() {\n return (\n <div class='radio-button-group-container'>\n {this.showGroupLabel && (\n <div class=\"group-label\">\n {this.groupLabelText}\n {this.required && <span class={`required ${this.hasErrors ? 'error' : ''}`}>*</span>}\n </div>\n )}\n <div class={`radio-button-group ${this.alignment} ${this.size}`}>\n <slot onSlotchange={this.handleSlotChange} ></slot>\n </div>\n {this.showCaption ? (\n <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\n {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\n </ifx-icon></div> : ''}\n <div class='caption-text'>{this.captionText}</div>\n </div>) : ''}\n </div>\n );\n }\n}"],"names":[],"mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,~~w6BAAw6B~~;;~~MCYv7B~~,gBAAgB,GAAA,MAAA;AAP7B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAQY,QAAA,IAAA,CAAA,WAAW,GAA8B,IAAI,GAAG,EAAE;AAGlD,QAAA,IAAS,CAAA,SAAA,GAA8B,UAAU;AAGjD,QAAA,IAAc,CAAA,cAAA,GAAW,kBAAkB;AAI3C,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACxB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AA+BnC,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;YACpB,IAAI,CAAC,eAAe,EAAE;AAC1B,SAAC;AAuCJ;AArEG,IAAA,sBAAsB,CAAC,KAAkB,EAAA;AACrC,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,MAAqB;QAC/C,IAAI,WAAW,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,kBAAkB,EAAE;YAC1D,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC;YAC/C,IAAI,CAAC,eAAe,EAAE;;;;IAM5B,MAAM,aAAa,CAAC,KAAc,EAAA;AAChC,QAAA,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;AAC7E,QAAA,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,KAAI;AAClC,YAAA,WAAmB,CAAC,KAAK,GAAG,KAAK;AACpC,SAAC,CAAC;;IAGN,iBAAiB,GAAA;QACb,IAAI,CAAC,eAAe,EAAE;;AAG1B,IAAA,MAAM,gBAAgB,GAAA;QAClB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACjC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,wBAAwB,EAAE,MAAM,SAAS,CAAC;;;IAQzD,eAAe,GAAA;AACnB,QAAA,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE;AACxB,QAAA,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;AAC7E,QAAA,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,KAAI;YACjC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;AACpC,gBAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,EAAG,WAAmB,CAAC,KAAK,IAAI,KAAK,CAAC;;AAE9E,SAAC,CAAC;QACF,IAAI,CAAC,eAAe,EAAE;;IAGlB,eAAe,GAAA;AACnB,QAAA,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC;QACnB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC;;IAGjF,MAAM,GAAA;QACF,QACI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,8BAA8B,EAAA,EACpC,IAAI,CAAC,cAAc,KAChB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACnB,IAAI,CAAC,cAAc,EACnB,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,CAAA,SAAA,EAAY,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,EAAE,CAAA,CAAE,EAAU,EAAA,GAAA,CAAA,CAClF,CACT,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,mBAAA,EAAsB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,CAAE,CAAA,EAAA,EAC3D,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAU,CACjD,EACL,IAAI,CAAC,WAAW,IACb,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAW,QAAA,EAAA,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,CAAE,CAAA,EAAA,EACxD,IAAI,CAAC,eAAe,GAAG,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EAAC,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAA,CACjE,CAAM,GAAG,EAAE,EACtB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,cAAc,EAAE,EAAA,IAAI,CAAC,WAAW,CAAO,CAChD,IAAI,EAAE,CACd;;;;;;;;"}
1	+ {"version":3,"file":"ifx-radio-button-group.entry.esm.js","sources":["src/components/radio-button-group/radio-button-group.scss?tag=ifx-radio-button-group&encapsulation=shadow","src/components/radio-button-group/radio-button-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.radio-button-group-container {\n display: flex;\n flex-direction: column;\n}\n\n.radio-button-group {\n display: flex;\n gap: tokens.$ifxSpace100;\n\n &.horizontal {\n flex-direction: row;\n column-gap: tokens.$ifxSpace150;\n }\n\n &.vertical {\n flex-direction: column;\n row-gap: tokens.$ifxSpace150;\n }\n}\n\n.group-label {\n font-size: tokens.$ifxFontSizeM;\n color: tokens.$ifxColorBaseBlack;\n line-height: tokens.$ifxLineHeightM;\n font-weight: tokens.$ifxFontWeightRegular;\n margin-bottom: tokens.$ifxSpace100;\n text-align: left;\n text-underline-position: from-font;\n text-decoration-skip-ink: none;\n}\n\n.group-label .required {\n color: tokens.$ifxColorEngineering500;\n margin-left: tokens.$ifxSpace50;\n}\n\n.group-label .required.error {\n color: tokens.$ifxColorRed500;\n}\n\n.caption {\n margin-top: tokens.$ifxSpace100;\n align-self: flex-start;\n display: flex;\n width: 100%;\n column-gap: tokens.$ifxSpace100;\n justify-content: space-between;\n align-items: center;\n\n &.default {\n color: tokens.$ifxColorBaseBlack;\n }\n\n &.error {\n color: tokens.$ifxColorRed500;\n }\n}\n\n.caption-text {\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n flex: 1;\n text-align: left;\n text-underline-position: from-font;\n text-decoration-skip-ink: none;\n}\n\n.caption-icon {\n flex:0;\n display: flex;\n}","import { Component, State, Prop, h, Element, Listen, Method } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-radio-button-group',\n styleUrl: 'radio-button-group.scss',\n shadow: true,\n // formAssociated: true\n})\n\nexport class RadioButtonGroup {\n private errorStates: Map<HTMLElement, boolean> = new Map();\n\n @Element() el: HTMLElement;\n @Prop() alignment: 'horizontal' \| 'vertical' = 'vertical';\n @Prop() size: string;\n @Prop() showGroupLabel: boolean;\n @Prop() groupLabelText: string = 'Group Label Text';\n @Prop() showCaption: boolean;\n @Prop() captionText: string;\n @Prop() showCaptionIcon: boolean;\n @Prop() required: boolean = false;\n @State() hasErrors: boolean = false;\n \n @Listen('ifxError')\n handleRadioButtonError(event: CustomEvent) {\n const radioButton = event.target as HTMLElement;\n if (radioButton.tagName.toLowerCase() === 'ifx-radio-button') {\n this.errorStates.set(radioButton, event.detail);\n this.updateHasErrors();\n }\n }\n\n // Method to set the error state of all radio-butttons in the group\n @Method()\n async setGroupError(error: boolean) {\n const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\n radioButtons.forEach((radioButton) => {\n (radioButton as any).error = error;\n });\n }\n\n componentWillLoad() {\n this.initializeState();\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-radio-button-group', await framework)\n }\n }\n\n handleSlotChange = () => {\n this.initializeState();\n };\n\n private initializeState() {\n this.errorStates.clear();\n const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\n radioButtons.forEach((radioButton) => {\n if (!this.errorStates.has(radioButton)) {\n this.errorStates.set(radioButton, (radioButton as any).error \|\| false);\n }\n });\n this.updateHasErrors();\n }\n\n private updateHasErrors() {\n console.log('here')\n this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\n }\n\n render() {\n return (\n <div class='radio-button-group-container'>\n {this.showGroupLabel && (\n <div class=\"group-label\">\n {this.groupLabelText}\n {this.required && <span class={`required ${this.hasErrors ? 'error' : ''}`}>*</span>}\n </div>\n )}\n <div class={`radio-button-group ${this.alignment} ${this.size}`}>\n <slot onSlotchange={this.handleSlotChange} ></slot>\n </div>\n {this.showCaption ? (\n <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\n {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\n </ifx-icon></div> : ''}\n <div class='caption-text'>{this.captionText}</div>\n </div>) : ''}\n </div>\n );\n }\n}"],"names":[],"mappings":"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"}

package/dist/infineon-design-system-stencil/ifx-radio-button.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-radio-button.entry.esm.js","sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button&encapsulation=shadow","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\n@use '../../global/font.scss';\n\n:host {\n display: inline-flex;\n --_ifx-fallback-display: none !important;\n}\n\n._ifx-radiobutton-fallback {\n display: var(--_ifx-fallback-display);\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0, 0, 0, 0) !important;\n border: 0 !important;\n}\n\n.radioButton__container {\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace100;\n cursor: pointer;\n font-family: var(--ifx-font-family);\n outline: none;\n\n &.disabled {\n cursor: default;\n \n .radioButton__wrapper {\n background-color: tokens.$ifxColorEngineering300;\n border-color: tokens.$ifxColorEngineering300;\n \n &:hover {\n background-color: tokens.$ifxColorEngineering300;\n }\n \n &.checked {\n background-color: tokens.$ifxColorBaseWhite;\n border-color: tokens.$ifxColorEngineering300;\n \n &::after {\n background-color: tokens.$ifxColorEngineering300;\n }\n \n .radioButton__wrapper-mark {\n background-color: tokens.$ifxColorEngineering300;\n }\n \n &:hover {\n border-color: tokens.$ifxColorEngineering300;\n \n .radioButton__wrapper-mark {\n background-color: tokens.$ifxColorEngineering300;\n }\n }\n }\n }\n \n .label {\n color: tokens.$ifxColorEngineering300;\n }\n }\n\n &:not(.disabled) .radioButton__wrapper {\n &.error {\n border-color: tokens.$ifxColorRed500;\n \n &:hover,\n &:focus-visible {\n border-color: tokens.$ifxColorRed500;\n }\n \n &.checked::after {\n border-color: tokens.$ifxColorRed500;\n background-color: tokens.$ifxColorRed500;\n }\n }\n }\n\n &:focus:not(.disabled) .radioButton__wrapper {\n &::before {\n content: '';\n position: absolute;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 50%;\n }\n }\n\n &.m .radioButton__wrapper {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n }\n\n .radioButton__wrapper {\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n position: relative;\n display: block;\n border-radius: 50%;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering500;\n\n .radioButton__wrapper-mark {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: tokens.$ifxColorOcean500;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n border-color: tokens.$ifxColorBaseTransparent;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &.checked {\n border-color: tokens.$ifxColorOcean500;\n \n &::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 10px;\n height: 10px;\n background-color: tokens.$ifxColorOcean500;\n border-radius: 50%;\n }\n\n &:hover {\n border-color: tokens.$ifxColorOcean600;\n \n .radioButton__wrapper-mark {\n background-color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n\n .label {\n display: flex;\n align-items: center;\n height: tokens.$ifxSize250;\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n flex-grow: 0;\n\n &.label-m {\n height: tokens.$ifxSize300;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n }\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Watch, Method } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-radio-button',\n styleUrl: 'radio-button.scss',\n shadow: true,\n // formAssociated: true\n})\nexport class RadioButton {\n @Element() el: HTMLElement;\n @Prop() disabled: boolean = false;\n @Prop() value: string;\n @Prop() error: boolean = false;\n @Prop({ reflect: true }) size: \"s\" \| \"m\" = \"s\";\n @Prop({ reflect: true }) name: string;\n @Prop({ mutable: true }) checked: boolean;\n @State() internalChecked: boolean = false;\n @State() hasSlot: boolean = false;\n\n @Method()\n async isChecked(): Promise<boolean> {\n return this.internalChecked;\n }\n \n private inputElement: HTMLInputElement;\n //private internals: ElementInternals;\n private fallbackInput: HTMLInputElement;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n @Event({ eventName: 'ifxError' }) ifxError: EventEmitter;\n\n componentWillLoad() {\n // Fallback for form association\n this.fallbackInput = document.createElement('input');\n this.fallbackInput.type = 'radio';\n this.fallbackInput.hidden = true;\n this.fallbackInput.className = '_ifx-radiobutton-fallback';\n this.fallbackInput.style.cssText = `\n display: none !important;\n position: absolute !important;\n opacity: 0 !important;\n pointer-events: none !important;\n width: 0 !important;\n height: 0 !important;\n `;\n this.fallbackInput.setAttribute('aria-hidden', 'true');\n this.fallbackInput.tabIndex = -1;\n this.el.appendChild(this.fallbackInput);\n\n // Initialize ElementInternals if supported\n if ('attachInternals' in HTMLElement.prototype) {\n try {\n //this.internals = this.el.attachInternals();\n } catch (e) {\n console.warn('ElementInternals not supported');\n }\n }\n\n // Initial state\n this.internalChecked = this.checked \|\| false;\n this.hasSlot = !!this.el.querySelector('[slot]') \|\| this.el.innerHTML.trim() !== '';\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-radio-button', await framework)\n }\n }\n\n @Watch('checked')\n handleCheckedChange(newValue: boolean) {\n this.internalChecked = newValue;\n }\n\n @Watch('internalChecked')\n updateFormValue() {\n // Update both ElementInternals and fallback input\n // if (this.internals?.setFormValue) {\n // this.internals.setFormValue(this.internalChecked ? this.value : null);\n // }\n this.fallbackInput.checked = this.internalChecked;\n this.fallbackInput.name = this.name;\n this.fallbackInput.value = this.value;\n this.fallbackInput.disabled = this.disabled;\n }\n\n @Watch('error')\n errorChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.ifxError.emit(newValue);\n }\n }\n\n handleRadioButtonClick(event: Event) {\n if (this.disabled) {\n event.stopPropagation();\n return;\n }\n\n this.inputElement.click();\n this.internalChecked = this.inputElement.checked;\n this.checked = this.internalChecked;\n this.ifxChange.emit(this.internalChecked);\n\n const changeEvent = new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { checked: this.internalChecked }\n });\n this.el.dispatchEvent(changeEvent);\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if ([' ', 'Enter'].includes(ev.key)) {\n ev.preventDefault();\n this.handleRadioButtonClick(new PointerEvent('click'));\n }\n }\n\n @Listen('change', { target: 'document' })\n handleExternalChange(event: Event) {\n const target = event.target as HTMLElement;\n if (target === this.el \|\| target.tagName.toLowerCase() !== 'ifx-radio-button') return;\n \n if (target.getAttribute('name') === this.name) {\n this.internalChecked = false;\n }\n }\n\n render() {\n return (\n <div\n role=\"radio\"\n aria-checked={String(this.internalChecked)}\n aria-disabled={String(this.disabled)}\n class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n onClick={(e) => this.handleRadioButtonClick(e)}\n tabindex={this.disabled ? -1 : 0}\n >\n <div\n class={`radioButton__wrapper \n ${this.internalChecked ? 'checked' : ''} \n ${this.error ? 'error' : ''}`}\n >\n {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n </div>\n\n {this.hasSlot && (\n <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"}`}>\n <slot />\n </div>\n )}\n\n <input\n type=\"radio\"\n hidden\n ref={el => this.inputElement = el}\n name={this.name}\n value={this.value}\n checked={this.internalChecked}\n disabled={this.disabled}\n onClick={(e) => e.stopPropagation()}\n />\n </div>\n );\n }\n}"],"names":[],"mappings":";;;;AAAA,MAAM,cAAc,GAAG,qyGAAqyG;;MCW/yG,WAAW,GAAA,MAAA;AANxB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAQU,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEzB,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;AACL,QAAA,IAAI,CAAA,IAAA,GAAc,GAAG;AAGrC,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;AAChC,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAuJlC;AApJC,IAAA,MAAM,SAAS,GAAA;QACb,OAAO,IAAI,CAAC,eAAe;;IAU7B,iBAAiB,GAAA;;QAEf,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AACpD,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,GAAG,OAAO;AACjC,QAAA,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,IAAI;AAChC,QAAA,IAAI,CAAC,aAAa,CAAC,SAAS,GAAG,2BAA2B;AAC1D,QAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,GAAG;;;;;;;KAOlC;QACD,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC;AACtD,QAAA,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAG,EAAE;QAChC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC;;QAYvC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,IAAI,KAAK;QAC5C,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,EAAE;;AAGrF,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,kBAAkB,EAAE,MAAM,SAAS,CAAC;;;AAKvD,IAAA,mBAAmB,CAAC,QAAiB,EAAA;AACnC,QAAA,IAAI,CAAC,eAAe,GAAG,QAAQ;;IAIjC,eAAe,GAAA;;;;;QAKb,IAAI,CAAC,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe;QACjD,IAAI,CAAC,aAAa,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI;QACnC,IAAI,CAAC,aAAa,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK;QACrC,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;;IAI3C,YAAY,CAAC,QAAiB,EAAE,QAAiB,EAAA;AAC/C,QAAA,IAAI,QAAQ,KAAK,QAAQ,EAAE;AACzB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC;;;AAIlC,IAAA,sBAAsB,CAAC,KAAY,EAAA;AACjC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,eAAe,EAAE;YACvB;;AAGF,QAAA,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;QACzB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO;AAChD,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe;QACnC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC;AAEzC,QAAA,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,QAAQ,EAAE;AAC5C,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe;AACxC,SAAA,CAAC;AACF,QAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC;;AAIpC,IAAA,aAAa,CAAC,EAAiB,EAAA;AAC7B,QAAA,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE;YACnC,EAAE,CAAC,cAAc,EAAE;YACnB,IAAI,CAAC,sBAAsB,CAAC,IAAI,YAAY,CAAC,OAAO,CAAC,CAAC;;;AAK1D,IAAA,oBAAoB,CAAC,KAAY,EAAA;AAC/B,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;AAC1C,QAAA,IAAI,MAAM,KAAK,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,kBAAkB;YAAE;QAE/E,IAAI,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,IAAI,EAAE;AAC7C,YAAA,IAAI,CAAC,eAAe,GAAG,KAAK;;;IAIhC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,OAAO,EAAA,cAAA,EACE,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,mBAC3B,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,EACpC,KAAK,EAAE,0BAA0B,IAAI,CAAC,IAAI,CAAI,CAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE,CAAA,EAC/E,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAC9C,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAAA,EAEhC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAAA;cACH,IAAI,CAAC,eAAe,GAAG,SAAS,GAAG,EAAE,CAAA;AACrC,YAAA,EAAA,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE,CAAA,CAAE,EAE9B,EAAA,IAAI,CAAC,eAAe,IAAI,4DAAK,KAAK,EAAC,2BAA2B,EAAA,CAAO,CAClE,EAEL,IAAI,CAAC,OAAO,KACX,4DAAK,KAAK,EAAE,CAAS,MAAA,EAAA,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,SAAS,GAAG,EAAE,CAAE,CAAA,EAAA,EACvD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACP,EAED,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EACZ,MAAM,EACN,IAAA,EAAA,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,YAAY,GAAG,EAAE,EACjC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,eAAe,EAAE,EAAA,CACnC,CACE;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"ifx-radio-button.entry.esm.js","sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button&encapsulation=shadow","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\n@use '../../global/font.scss';\n\n:host {\n display: inline-flex;\n --_ifx-fallback-display: none !important;\n}\n\n._ifx-radiobutton-fallback {\n display: var(--_ifx-fallback-display);\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0, 0, 0, 0) !important;\n border: 0 !important;\n}\n\n.radioButton__container {\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace100;\n cursor: pointer;\n font-family: var(--ifx-font-family);\n outline: none;\n\n &.disabled {\n cursor: default;\n \n .radioButton__wrapper {\n background-color: tokens.$ifxColorEngineering300;\n border-color: tokens.$ifxColorEngineering300;\n \n &:hover {\n background-color: tokens.$ifxColorEngineering300;\n }\n \n &.checked {\n background-color: tokens.$ifxColorBaseWhite;\n border-color: tokens.$ifxColorEngineering300;\n \n &::after {\n background-color: tokens.$ifxColorEngineering300;\n }\n \n .radioButton__wrapper-mark {\n background-color: tokens.$ifxColorEngineering300;\n }\n \n &:hover {\n border-color: tokens.$ifxColorEngineering300;\n \n .radioButton__wrapper-mark {\n background-color: tokens.$ifxColorEngineering300;\n }\n }\n }\n }\n \n .label {\n color: tokens.$ifxColorEngineering300;\n }\n }\n\n &:not(.disabled) .radioButton__wrapper {\n &.error {\n border-color: tokens.$ifxColorRed500;\n \n &:hover,\n &:focus-visible {\n border-color: tokens.$ifxColorRed500;\n }\n \n &.checked::after {\n border-color: tokens.$ifxColorRed500;\n background-color: tokens.$ifxColorRed500;\n }\n }\n }\n\n &:focus:not(.disabled) .radioButton__wrapper {\n &::before {\n content: '';\n position: absolute;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 50%;\n }\n }\n\n &.m .radioButton__wrapper {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n }\n\n .radioButton__wrapper {\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n position: relative;\n display: block;\n border-radius: 50%;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering500;\n\n .radioButton__wrapper-mark {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: tokens.$ifxColorOcean500;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n border-color: tokens.$ifxColorBaseTransparent;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &.checked {\n border-color: tokens.$ifxColorOcean500;\n \n &::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 10px;\n height: 10px;\n background-color: tokens.$ifxColorOcean500;\n border-radius: 50%;\n }\n\n &:hover {\n border-color: tokens.$ifxColorOcean600;\n \n .radioButton__wrapper-mark {\n background-color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n\n .label {\n display: flex;\n align-items: center;\n height: tokens.$ifxSize250;\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n flex-grow: 0;\n\n &.label-m {\n height: tokens.$ifxSize300;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n }\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Watch, Method } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-radio-button',\n styleUrl: 'radio-button.scss',\n shadow: true,\n // formAssociated: true\n})\nexport class RadioButton {\n @Element() el: HTMLElement;\n @Prop() disabled: boolean = false;\n @Prop() value: string;\n @Prop() error: boolean = false;\n @Prop({ reflect: true }) size: \"s\" \| \"m\" = \"s\";\n @Prop({ reflect: true }) name: string;\n @Prop({ mutable: true }) checked: boolean;\n @State() internalChecked: boolean = false;\n @State() hasSlot: boolean = false;\n\n @Method()\n async isChecked(): Promise<boolean> {\n return this.internalChecked;\n }\n \n private inputElement: HTMLInputElement;\n //private internals: ElementInternals;\n private fallbackInput: HTMLInputElement;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n @Event({ eventName: 'ifxError' }) ifxError: EventEmitter;\n\n componentWillLoad() {\n // Fallback for form association\n this.fallbackInput = document.createElement('input');\n this.fallbackInput.type = 'radio';\n this.fallbackInput.hidden = true;\n this.fallbackInput.className = '_ifx-radiobutton-fallback';\n this.fallbackInput.style.cssText = `\n display: none !important;\n position: absolute !important;\n opacity: 0 !important;\n pointer-events: none !important;\n width: 0 !important;\n height: 0 !important;\n `;\n this.fallbackInput.setAttribute('aria-hidden', 'true');\n this.fallbackInput.tabIndex = -1;\n this.el.appendChild(this.fallbackInput);\n\n // Initialize ElementInternals if supported\n if ('attachInternals' in HTMLElement.prototype) {\n try {\n //this.internals = this.el.attachInternals();\n } catch (e) {\n console.warn('ElementInternals not supported');\n }\n }\n\n // Initial state\n this.internalChecked = this.checked \|\| false;\n this.hasSlot = !!this.el.querySelector('[slot]') \|\| this.el.innerHTML.trim() !== '';\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-radio-button', await framework)\n }\n }\n\n @Watch('checked')\n handleCheckedChange(newValue: boolean) {\n this.internalChecked = newValue;\n }\n\n @Watch('internalChecked')\n updateFormValue() {\n // Update both ElementInternals and fallback input\n // if (this.internals?.setFormValue) {\n // this.internals.setFormValue(this.internalChecked ? this.value : null);\n // }\n this.fallbackInput.checked = this.internalChecked;\n this.fallbackInput.name = this.name;\n this.fallbackInput.value = this.value;\n this.fallbackInput.disabled = this.disabled;\n }\n\n @Watch('error')\n errorChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.ifxError.emit(newValue);\n }\n }\n\n handleRadioButtonClick(event: Event) {\n if (this.disabled) {\n event.stopPropagation();\n return;\n }\n\n this.inputElement.click();\n this.internalChecked = this.inputElement.checked;\n this.checked = this.internalChecked;\n this.ifxChange.emit(this.internalChecked);\n\n const changeEvent = new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { checked: this.internalChecked }\n });\n this.el.dispatchEvent(changeEvent);\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if ([' ', 'Enter'].includes(ev.key)) {\n ev.preventDefault();\n this.handleRadioButtonClick(new PointerEvent('click'));\n }\n }\n\n @Listen('change', { target: 'document' })\n handleExternalChange(event: Event) {\n const target = event.target as HTMLElement;\n if (target === this.el \|\| target.tagName.toLowerCase() !== 'ifx-radio-button') return;\n \n if (target.getAttribute('name') === this.name) {\n this.internalChecked = false;\n }\n }\n\n render() {\n return (\n <div\n role=\"radio\"\n aria-checked={String(this.internalChecked)}\n aria-disabled={String(this.disabled)}\n class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n onClick={(e) => this.handleRadioButtonClick(e)}\n tabindex={this.disabled ? -1 : 0}\n >\n <div\n class={`radioButton__wrapper \n ${this.internalChecked ? 'checked' : ''} \n ${this.error ? 'error' : ''}`}\n >\n {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n </div>\n\n {this.hasSlot && (\n <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"}`}>\n <slot />\n </div>\n )}\n\n <input\n type=\"radio\"\n hidden\n ref={el => this.inputElement = el}\n name={this.name}\n value={this.value}\n checked={this.internalChecked}\n disabled={this.disabled}\n onClick={(e) => e.stopPropagation()}\n />\n </div>\n );\n }\n}"],"names":[],"mappings":"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"}

package/dist/infineon-design-system-stencil/ifx-search-bar.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-search-bar.entry.esm.js","sources":["src/components/search-bar/search-bar.scss?tag=ifx-search-bar&encapsulation=shadow","src/components/search-bar/search-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n width: 100%; //revert\n display: flex;\n}\n\n.search-bar {\n box-sizing: border-box;\n height: tokens.$ifxSize500;\n background-color: tokens.$ifxColorBaseWhite;\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n &.closed {\n display: flex;\n width: auto;\n justify-content: flex-start;\n }\n\n & .search-bar-wrapper {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace200;\n width: 100%;\n\n & a {\n \n text-decoration: none;\n font-size: tokens.$ifxFontSizeM;\n font-style: normal;\n font-weight: tokens.$ifxFontWeightSemibold;\n line-height: tokens.$ifxLineHeightM;\n color: tokens.$ifxColorOcean500;\n cursor: pointer;\n &:focus{\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n }\n & ifx-search-field {\n width: 100%;\n }\n }\n\n .search-bar__icon-wrapper {\n display: none;\n flex-direction: row;\n align-items: center;\n\n & ifx-icon:hover {\n cursor: pointer;\n }\n }\n\n &.closed {\n .search-bar__icon-wrapper {\n display: flex;\n }\n\n .search-bar-wrapper {\n display: none;\n }\n }\n}","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-search-bar',\n styleUrl: 'search-bar.scss',\n shadow: true,\n})\nexport class SearchBar {\n @Prop() isOpen: boolean = true;\n @Prop() disabled: boolean = false;\n @State() internalState: boolean;\n @Prop({ mutable: true }) value: string;\n @Prop() maxlength?: number;\n @Event() ifxInput: EventEmitter;\n @Event() ifxOpen: EventEmitter;\n @Prop() autocomplete: string = \"on\";\n @Element() el;\n\n @Method()\n async onNavbarMobile() {\n this.ifxOpen.emit(false)\n this.internalState = false;\n }\n\n @Watch('isOpen')\n handlePropChange() {\n this.internalState = this.isOpen;\n }\n\n handleCloseButton = () => {\n this.internalState = !this.internalState;\n this.ifxOpen.emit(this.internalState)\n }\n\n setInitialState() {\n this.internalState = this.isOpen;\n }\n\n componentWillLoad() {\n this.setInitialState();\n this.ifxOpen.emit(this.internalState)\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-search-bar', await framework)\n }\n }\n\n handleInput(event: CustomEvent) {\n this.value = event.detail;\n }\n\n handleFocus = () => {\n this.internalState = true;\n }\n\n\n render() {\n return (\n <div role=\"search\" aria-label=\"a search field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\n {this.internalState ? (\n <div class=\"search-bar-wrapper\">\n <ifx-search-field autocomplete={this.autocomplete} disabled={this.disabled} value={this.value} maxlength={this.maxlength} onIfxInput={this.handleInput.bind(this)}>\n <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\n </ifx-search-field>\n\n <a aria-label=\"Close button\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\n </div>\n ) : (\n <div class=\"search-bar_icon-wrapper\"\n onClick={this.handleCloseButton}>\n <ifx-icon icon=\"search-16\"></ifx-icon>\n </div>\n )}\n </div>\n );\n }\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,YAAY,GAAG,q+~~BAAq~~+B;;~~MCU7+~~B,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAMU,QAAA,IAAM,CAAA,MAAA,GAAY,IAAI;AACtB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAMxB,QAAA,IAAY,CAAA,YAAA,GAAW,IAAI;AAcpC,QAAA,IAAiB,CAAA,iBAAA,GAAG,MAAK;AACvB,YAAA,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa;YACxC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;AACvC,SAAC;AAsBD,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACjB,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI;AAC3B,SAAC;AAuBF;AA5DC,IAAA,MAAM,cAAc,GAAA;AAClB,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;AACxB,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK;;IAI5B,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM;;IAQlC,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM;;IAGlC,iBAAiB,GAAA;QACf,IAAI,CAAC,eAAe,EAAE;QACtB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;;AAGvC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,gBAAgB,EAAE,MAAM,SAAS,CAAC;;;AAIrD,IAAA,WAAW,CAAC,KAAkB,EAAA;AAC5B,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM;;IAQ3B,MAAM,GAAA;AACJ,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,YAAA,EAAY,+BAA+B,EAAa,YAAA,EAAA,IAAI,CAAC,KAAK,EAAA,eAAA,EAAiB,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAc,WAAA,EAAA,IAAI,CAAC,aAAa,GAAG,MAAM,GAAG,QAAQ,CAAA,CAAE,EAAA,EAC9K,IAAI,CAAC,aAAa,IACjB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,kBAAA,EAAA,EAAkB,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,EAC/J,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,aAAa,GAAY,CACxC,EAEnB,CAAc,CAAA,GAAA,EAAA,EAAA,YAAA,EAAA,cAAc,EAAC,IAAI,EAAC,oBAAoB,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAW,EAAA,OAAA,CAAA,CAC7F,KAEN,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,yBAAyB,EACpC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAA,EAC7B,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAA,CAAY,CAClC,CACP,CACK;;;;;;;;;;;"}
1	+ {"version":3,"file":"ifx-search-bar.entry.esm.js","sources":["src/components/search-bar/search-bar.scss?tag=ifx-search-bar&encapsulation=shadow","src/components/search-bar/search-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n width: 100%; //revert\n display: flex;\n}\n\n.search-bar {\n box-sizing: border-box;\n height: tokens.$ifxSize500;\n background-color: tokens.$ifxColorBaseWhite;\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n &.closed {\n display: flex;\n width: auto;\n justify-content: flex-start;\n }\n\n & .search-bar-wrapper {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace200;\n width: 100%;\n\n & a {\n \n text-decoration: none;\n font-size: tokens.$ifxFontSizeM;\n font-style: normal;\n font-weight: tokens.$ifxFontWeightSemibold;\n line-height: tokens.$ifxLineHeightM;\n color: tokens.$ifxColorOcean500;\n cursor: pointer;\n &:focus{\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n }\n & ifx-search-field {\n width: 100%;\n }\n }\n\n .search-bar__icon-wrapper {\n display: none;\n flex-direction: row;\n align-items: center;\n\n & ifx-icon:hover {\n cursor: pointer;\n }\n }\n\n &.closed {\n .search-bar__icon-wrapper {\n display: flex;\n }\n\n .search-bar-wrapper {\n display: none;\n }\n }\n}","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-search-bar',\n styleUrl: 'search-bar.scss',\n shadow: true,\n})\nexport class SearchBar {\n @Prop() isOpen: boolean = true;\n @Prop() disabled: boolean = false;\n @State() internalState: boolean;\n @Prop({ mutable: true }) value: string;\n @Prop() maxlength?: number;\n @Event() ifxInput: EventEmitter;\n @Event() ifxOpen: EventEmitter;\n @Prop() autocomplete: string = \"on\";\n @Element() el;\n\n @Method()\n async onNavbarMobile() {\n this.ifxOpen.emit(false)\n this.internalState = false;\n }\n\n @Watch('isOpen')\n handlePropChange() {\n this.internalState = this.isOpen;\n }\n\n handleCloseButton = () => {\n this.internalState = !this.internalState;\n this.ifxOpen.emit(this.internalState)\n }\n\n setInitialState() {\n this.internalState = this.isOpen;\n }\n\n componentWillLoad() {\n this.setInitialState();\n this.ifxOpen.emit(this.internalState)\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-search-bar', await framework)\n }\n }\n\n handleInput(event: CustomEvent) {\n this.value = event.detail;\n }\n\n handleFocus = () => {\n this.internalState = true;\n }\n\n\n render() {\n return (\n <div role=\"search\" aria-label=\"a search field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\n {this.internalState ? (\n <div class=\"search-bar-wrapper\">\n <ifx-search-field autocomplete={this.autocomplete} disabled={this.disabled} value={this.value} maxlength={this.maxlength} onIfxInput={this.handleInput.bind(this)}>\n <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\n </ifx-search-field>\n\n <a aria-label=\"Close button\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\n </div>\n ) : (\n <div class=\"search-bar_icon-wrapper\"\n onClick={this.handleCloseButton}>\n <ifx-icon icon=\"search-16\"></ifx-icon>\n </div>\n )}\n </div>\n );\n }\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,YAAY,GAAG,u+BAAu+B;;MCU/+B,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAMU,QAAA,IAAM,CAAA,MAAA,GAAY,IAAI;AACtB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAMxB,QAAA,IAAY,CAAA,YAAA,GAAW,IAAI;AAcpC,QAAA,IAAiB,CAAA,iBAAA,GAAG,MAAK;AACvB,YAAA,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa;YACxC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;AACvC,SAAC;AAsBD,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACjB,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI;AAC3B,SAAC;AAuBF;AA5DC,IAAA,MAAM,cAAc,GAAA;AAClB,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;AACxB,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK;;IAI5B,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM;;IAQlC,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM;;IAGlC,iBAAiB,GAAA;QACf,IAAI,CAAC,eAAe,EAAE;QACtB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;;AAGvC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,gBAAgB,EAAE,MAAM,SAAS,CAAC;;;AAIrD,IAAA,WAAW,CAAC,KAAkB,EAAA;AAC5B,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM;;IAQ3B,MAAM,GAAA;AACJ,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,YAAA,EAAY,+BAA+B,EAAa,YAAA,EAAA,IAAI,CAAC,KAAK,EAAA,eAAA,EAAiB,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAc,WAAA,EAAA,IAAI,CAAC,aAAa,GAAG,MAAM,GAAG,QAAQ,CAAA,CAAE,EAAA,EAC9K,IAAI,CAAC,aAAa,IACjB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,kBAAA,EAAA,EAAkB,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,EAC/J,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,aAAa,GAAY,CACxC,EAEnB,CAAc,CAAA,GAAA,EAAA,EAAA,YAAA,EAAA,cAAc,EAAC,IAAI,EAAC,oBAAoB,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAW,EAAA,OAAA,CAAA,CAC7F,KAEN,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,yBAAyB,EACpC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAA,EAC7B,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAA,CAAY,CAClC,CACP,CACK;;;;;;;;;;;"}