npm - @infineon/infineon-design-system-stencil - Versions diffs - 39.4.4-canary.0 → 39.5.0--canary.2134.ef608256dd1abad1333d432c8cc2958560d19738.0 - Mend

@infineon/infineon-design-system-stencil 39.4.4-canary.0 → 39.5.0--canary.2134.ef608256dd1abad1333d432c8cc2958560d19738.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 (1210) hide show

package/dist/infineon-design-system-stencil/p-4b8ff4cb.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["navbarCss","Navbar","constructor","hostRef","this","main","products","applications","design","support","about","applicationName","hasLeftMenuItems","fixed","showLogoAndAppname","logoHref","internalLogoHref","logoHrefTarget","internalLogoHrefTarget","addEventListenersToHandleCustomFocusState","element","el","shadowRoot","firstChild","console","error","tabIndex","aElements","querySelectorAll","i","length","slot","querySelector","assignedNodes","node","nodeName","navbarItem","clearFirstLayerMenu","event","detail","action","leftMenuItems","getMobileMenuTop","isSameNode","component","hideComponent","parent","children","toggleFirstLayerItem","showComponent","getWrappers","rightContentNavigationGroup","searchBarRightWrapper","searchBarLeftWrapper","rightSideItemSlot","rightSideSlot","leftSideSlot","rightAssignedNodes","leftAssignedNodes","navbarProfile","rightMenuItems","topRowWrapper","hideNavItems","searchBarIsOpen","l","classList","contains","r","hideOnMobile","showNavItems","undefined","handleSearchBarToggle","toggleClass","className","toggle","handleSidebar","sidebarIconWrapper","currentTarget","closest","sidebarIconOpen","sidebarIconClose","mainContainer","navbarWrapper","sidebarWrapper","handleBodyScroll","body","style","overflow","handleDropdownMenu","dropdownWrapper","iconWrapper","setItemMenuPosition","navbarItems","itemChildren","forEach","item","setMenuItemPosition","setMenuItemChildrenPosition","hasNestedItems","setItemSideSpecifications","subItem","getMediaQueryList","mediaQueryList","window","matchMedia","componentDidLoad","framework","detectFramework","trackComponent","matches","moveNavItemsToSidebar","handleMobileMenuBottom","e","mobileMenuBottomWrapper","slotElement","target","nodes","add","remove","handleLogoHrefAndTarget","trim","includes","componentWillLoad","RemoveSpaceOnStorybookSnippet","dropdownMenu","addEventListener","getSearchBarLeftWrapper","getMobileMenuBottom","handleBurgerIcon","burgerIconWrapper","crossIcon","searchBarLeft","onNavbarMobile","setAttribute","moveChildComponentsIntoSubLayerMenu","tagName","toUpperCase","showLabel","toggleChildren","leftIsInitial","searchBarRight","moveChildComponentsBackIntoNavbar","navbarProfileItem","showProfileItemLabel","getAttribute","parentElement","storybookWrapper","render","h","key","class","href","width","height","viewBox","fill","xmlns","d","id","name","onClick","bind","icon","onSlotchange"],"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\";\r\n@use \"../../../global/font.scss\";\r\n\r\n:host {\r\n width: 100%;\r\n display: block;\r\n}\r\n\r\n\r\n.navbar__wrapper {\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n height: 63px;\r\n position: sticky;\r\n //overflow: hidden;\r\n z-index: 1030;\r\n border-bottom: 1px solid #EEEDED;\r\n\r\n &.fixed {\r\n border-bottom: none;\r\n }\r\n\r\n // border-bottom: 1px solid #EEEDED; //when fixed is false\r\n}\r\n\r\n.navbar__main-container {\r\n position: absolute;\r\n top: 0;\r\n width: 100%;\r\n //overflow: hidden;\r\n transition: all 1s;\r\n z-index: 1020;\r\n\r\n &.fixed {\r\n position: fixed;\r\n\r\n & .navbar__container {\r\n border-bottom: 1px solid #EEEDED;\r\n }\r\n }\r\n\r\n &.show {\r\n height: 100vh;\r\n bottom: 0;\r\n background-color: tokens.$ifxColorOverlayDark;\r\n transition: 1s;\r\n z-index: 1;\r\n }\r\n}\r\n\r\n.navbar__sidebar {\r\n box-sizing: border-box;\r\n position: fixed;\r\n right: -100%;\r\n top: 64px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n // padding: 32px;\r\n width: 375px;\r\n height: calc(100vh - 64px);\r\n background-color: tokens.$ifxColorBaseWhite;\r\n transition: right 1s;\r\n z-index: 1030;\r\n\r\n &.show {\r\n right: 0;\r\n transition: right 1s;\r\n }\r\n\r\n & .navbar__sidebar-top-row { \r\n display: flex;\r\n padding: var(--borderRadius-none, 0px) var(--space-300, 24px) 30px var(--space-300, 24px);\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--space-200, 16px);\r\n flex: 1 0 0;\r\n align-self: stretch;\r\n\r\n overflow-y: auto;\r\n\r\n & .navbar__sidebar-top-row-wrapper { \r\n display: flex;\r\n padding-top: var(--space-200, 16px);\r\n flex-direction: column;\r\n align-items: flex-start;\r\n align-self: stretch;\r\n gap: 16px;\r\n\r\n &.expand { \r\n align-items: initial;\r\n }\r\n\r\n & .navbar__sidebar-top-row-item { \r\n display: flex;\r\n padding: var(--space-200, 0px) var(--space-50, 4px) var(--space-200, 0px) 0px;\r\n align-items: center;\r\n gap: var(--space-100, 8px);\r\n align-self: stretch;\r\n justify-content: space-between;\r\n\r\n & .navbar__sidebar-top-row-item-icon-wrapper { \r\n & ifx-icon { \r\n vertical-align: middle;\r\n }\r\n }\r\n \r\n \r\n &:hover { \r\n cursor: pointer;\r\n }\r\n \r\n & .navbar__sidebar-top-row-item-label { \r\n color: var(--color-base-black, #1D1D1D);\r\n font-family: \"Source Sans 3\";\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 24px; \r\n }\r\n \r\n }\r\n }\r\n\r\n }\r\n\r\n & .navbar__sidebar-bottom-row { \r\n //display: flex;\r\n display: none;\r\n padding: var(--space-150, 12px) var(--space-300, 24px) var(--space-150, 12px) var(--space-200, 16px);\r\n flex-direction: column;\r\n align-items: flex-start;\r\n align-self: stretch;\r\n background: var(--color-engineering-100, #F7F7F7);\r\n border-top: 1px solid var(--color-engineering-200, #EEEDED);\r\n gap: 10px;\r\n\r\n max-height: 160px;\r\n overflow-y: auto;\r\n\r\n &.show { \r\n display: flex;\r\n }\r\n \r\n\r\n & .navbar__sidebar-bottom-row-item { \r\n display: flex;\r\n height: 40px;\r\n padding-right: var(--space-50, 4px);\r\n align-items: center;\r\n gap: var(--space-100, 8px);\r\n flex: 1 0 0;\r\n \r\n & .navbar__sidebar-bottom-row-item-label {\r\n color: var(--color-base-black, #1D1D1D);\r\n font-family: \"Source Sans 3\";\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 24px; \r\n }\r\n\r\n & .navbar__sidebar-bottom-row-item-icon-wrapper { \r\n display: flex;\r\n align-items: center;\r\n }\r\n }\r\n\r\n }\r\n\r\n\r\n & .navbar__sidebar-content-products,\r\n & .navbar__sidebar-content-main {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n padding: 0px;\r\n gap: 24px;\r\n flex: none;\r\n order: 0;\r\n align-self: stretch;\r\n flex-grow: 0;\r\n\r\n & .navbar__sidebar-content-products-header,\r\n & .navbar__sidebar-content-about-header {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n padding: 0px;\r\n gap: 16px;\r\n flex: none;\r\n order: 0;\r\n align-self: stretch;\r\n flex-grow: 0;\r\n color: #BFBBBB;\r\n\r\n & span {\r\n color: tokens.$ifxColorBaseBlack;\r\n font-weight: 600;\r\n font-size: 18px;\r\n line-height: 28px;\r\n display: flex;\r\n align-items: center;\r\n }\r\n }\r\n\r\n & .navbar__sidebar-content-products-menu,\r\n & .navbar__sidebar-content-main-menu {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n padding: 0px;\r\n gap: 16px;\r\n flex: none;\r\n order: 1;\r\n flex-grow: 0;\r\n width: 100%;\r\n\r\n & .navbar__sidebar-content-products-menu-item,\r\n & .navbar__sidebar-content-main-menu-item {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n padding: 0px;\r\n flex: none;\r\n order: 0;\r\n flex-grow: 0;\r\n\r\n & a {\r\n text-decoration: none;\r\n font-style: normal;\r\n font-weight: 400;\r\n font-size: 16px;\r\n line-height: 24px;\r\n display: flex;\r\n align-items: center;\r\n color: tokens.$ifxColorBaseBlack;\r\n }\r\n }\r\n\r\n & .navbar__sidebar-content-main-menu-item {\r\n color: tokens.$ifxColorEngineering300;\r\n\r\n & a {\r\n font-style: normal;\r\n font-weight: 600;\r\n font-size: 18px;\r\n line-height: 28px;\r\n display: flex;\r\n align-items: center;\r\n color: tokens.$ifxColorBaseBlack;\r\n flex: none;\r\n order: 0;\r\n flex-grow: 1;\r\n }\r\n }\r\n }\r\n\r\n & .navbar__sidebar-content-main-menu {\r\n align-items: normal;\r\n }\r\n }\r\n}\r\n\r\n.navbar__container {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 8px 40px;\r\n gap: 16px;\r\n background-color: tokens.$ifxColorBaseWhite;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n &.expanded { \r\n justify-content: initial;\r\n }\r\n\r\n // &.fixed { \r\n // border-bottom: 1px solid #EEEDED; //when fixed is true\r\n // }\r\n\r\n & .navbar__container-search-field-wrapper { \r\n display: none;\r\n\r\n &.show { \r\n display: flex;\r\n }\r\n }\r\n\r\n & .navbar__container-left {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n padding: 0;\r\n gap: 16px;\r\n flex: none;\r\n order: 0;\r\n flex-grow: 0;\r\n\r\n &.hide {\r\n display: none;\r\n }\r\n\r\n &.expand { \r\n justify-content: initial;\r\n flex: 1;\r\n & .navbar__container-left-content { \r\n align-items: initial;\r\n flex: 1;\r\n & .navbar__container-left-content-navigation-group { \r\n justify-content: initial;\r\n flex: 1;\r\n & .navbar__container-left-content-navigation-item-search-bar { \r\n flex: 1;\r\n }\r\n }\r\n }\r\n \r\n }\r\n\r\n & .navbar__container-left-logo {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n padding: 0px;\r\n gap: 16px;\r\n flex: none;\r\n order: 0;\r\n flex-grow: 0;\r\n\r\n &.hide { \r\n display: none;\r\n }\r\n\r\n & h6 {\r\n position: relative;\r\n margin: 0;\r\n padding: 0;\r\n font-style: normal;\r\n font-weight: 600;\r\n font-size: 16px;\r\n //line-height: 24px;\r\n display: flex;\r\n align-items: center;\r\n color: tokens.$ifxColorBaseBlack;\r\n flex: none;\r\n order: 1;\r\n flex-grow: 0;\r\n }\r\n\r\n & .navbar__container-left-logo-default {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 12px 0px;\r\n flex: none;\r\n order: 0;\r\n flex-grow: 0;\r\n\r\n & svg {\r\n width: 91px;\r\n height: 40px;\r\n flex: none;\r\n order: 0;\r\n flex-grow: 0;\r\n vertical-align: bottom;\r\n }\r\n }\r\n\r\n & .navbar__container-left-logo-divider {\r\n width: 1px;\r\n height: 32px;\r\n background: tokens.$ifxColorEngineering200;\r\n flex: none;\r\n order: 2;\r\n flex-grow: 0;\r\n }\r\n }\r\n\r\n & .navbar__container-left-content {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: flex-start;\r\n padding: 0px;\r\n flex: none;\r\n order: 1;\r\n flex-grow: 0;\r\n\r\n & .navbar__container-left-content-navigation-group {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n padding: 0px;\r\n gap: 4px;\r\n flex: none;\r\n order: 0;\r\n flex-grow: 0;\r\n\r\n & .navbar__container-left-content-navigation-item-search-bar {\r\n display: flex; //none\r\n flex-direction: row;\r\n align-items: center;\r\n padding: 0px 8px;\r\n flex: none;\r\n order: 5;\r\n flex-grow: 0;\r\n //width: 256px;\r\n //height: 40px;\r\n }\r\n\r\n & .navbar__container-left-content-navigation-item {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n padding: 0px 8px;\r\n gap: 8px;\r\n flex: none;\r\n order: 0;\r\n flex-grow: 0;\r\n\r\n & a {\r\n display: flex;\r\n align-items: center;\r\n font-weight: 400;\r\n font-size: 16px;\r\n line-height: 24px;\r\n color: tokens.$ifxColorBaseBlack;\r\n text-decoration: none;\r\n flex: none;\r\n order: 0;\r\n flex-grow: 0;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n & .navbar__container-right {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: flex-end;\r\n padding: 0;\r\n gap: 8px;\r\n flex: none;\r\n order: 1;\r\n flex-grow: 0;\r\n\r\n &.hide { \r\n display: none;\r\n }\r\n\r\n &.expand { \r\n justify-content: initial;\r\n flex: 1;\r\n & .navbar__container-right-content { \r\n align-items: initial;\r\n flex: 1;\r\n & .navbar__container-right-content-navigation-group { \r\n justify-content: initial;\r\n flex: 1;\r\n & .navbar__container-right-content-navigation-item-search-bar { \r\n flex: 1;\r\n & .navbar__container-right-content-navigation-item-search-bar-icon-wrapper { \r\n flex: 1;\r\n }\r\n }\r\n }\r\n }\r\n \r\n }\r\n\r\n & .navbar__burger-icon-wrapper {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 4px 0px 4px 16px;\r\n border-left: 1px solid tokens.$ifxColorEngineering300;\r\n gap: 16px;\r\n flex: none;\r\n order: 1;\r\n flex-grow: 0;\r\n width: 41px;\r\n height: 40px;\r\n\r\n &.hide { \r\n display: none;\r\n }\r\n\r\n & .navbar__burger-icon {\r\n display: flex;\r\n align-items: center;\r\n\r\n &:hover { \r\n cursor: pointer;\r\n }\r\n\r\n &.close {\r\n display: none;\r\n }\r\n }\r\n\r\n & .navbar__cross-icon {\r\n display: none;\r\n align-items: center;\r\n\r\n &.show {\r\n display: flex;\r\n\r\n &:hover { \r\n cursor: pointer;\r\n }\r\n }\r\n }\r\n }\r\n\r\n & .navbar__container-right-content {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n padding: 0px;\r\n flex: none;\r\n order: 0;\r\n flex-grow: 0;\r\n\r\n & .navbar__container-right-content-navigation-group {\r\n position: relative;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-end;\r\n align-items: center;\r\n padding: 0px;\r\n flex: none;\r\n order: 0;\r\n flex-grow: 0;\r\n\r\n & .navbar__container-right-content-navigation-item,\r\n & .navbar__container-right-content-navigation-item-profile,\r\n & .navbar__container-right-content-navigation-item-search-bar {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n padding: 0px 8px;\r\n gap: 4px;\r\n flex: none;\r\n order: 0;\r\n flex-grow: 0;\r\n\r\n & .navbar__container-right-content-navigation-item-search-bar-icon-wrapper {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 0px;\r\n gap: 8px;\r\n flex: none;\r\n order: 0;\r\n flex-grow: 0;\r\n //width: 24px;\r\n //height: 24px;\r\n //max-width: 200px;\r\n\r\n &.isOpen { \r\n position: absolute;\r\n top: 10px;\r\n }\r\n }\r\n\r\n & .navbar__container-right-content-navigation-item-navigation-profile {\r\n position: relative;\r\n width: 24px;\r\n height: 24px;\r\n background: tokens.$ifxColorOcean500;\r\n border-radius: 100px;\r\n flex: none;\r\n order: 0;\r\n flex-grow: 0;\r\n\r\n & a {\r\n position: absolute;\r\n width: 22px;\r\n height: 20px;\r\n left: calc(50% - 22px/2);\r\n top: calc(50% - 20px/2);\r\n font-style: normal;\r\n font-weight: 600;\r\n font-size: 14px;\r\n line-height: 20px;\r\n text-decoration: none;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n color: tokens.$ifxColorBaseWhite;\r\n }\r\n }\r\n\r\n & .navbar__container-right-content-navigation-item-icon-wrapper {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 0px;\r\n gap: 8px;\r\n flex: none;\r\n order: 0;\r\n flex-grow: 0;\r\n }\r\n\r\n & a {\r\n font-style: normal;\r\n font-weight: 400;\r\n font-size: 14px;\r\n line-height: 20px;\r\n color: tokens.$ifxColorBaseBlack;\r\n text-decoration: none;\r\n display: flex;\r\n align-items: center;\r\n flex: none;\r\n order: 1;\r\n flex-grow: 0;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n//burger icon exist, and left container is gone\r\n@media screen and (max-width: 800px) {\r\n .navbar__container {\r\n padding: 0px 16px;\r\n height: 64px;\r\n gap: initial;\r\n\r\n &.expanded { \r\n & .navbar__container-right {\r\n & .navbar__burger-icon-wrapper {\r\n display: none;\r\n }\r\n }\r\n }\r\n\r\n & .navbar__container-left {\r\n & .navbar__container-left-content {\r\n display: none;\r\n }\r\n\r\n & .navbar__container-left-logo {\r\n & .navbar__container-left-logo-divider {\r\n display: none;\r\n }\r\n }\r\n }\r\n\r\n & .navbar__container-right {\r\n flex: 1;\r\n }\r\n }\r\n\r\n .navbar__sidebar {\r\n width: 0;\r\n transition: 1s;\r\n\r\n // &.show {\r\n // width: 100%;\r\n // }\r\n\r\n }\r\n}\r\n\r\n@media screen and (max-width: 500px) {\r\n .navbar__sidebar {\r\n &.show {\r\n width: 100%; // 100% of viewport width\r\n }\r\n }\r\n}\r\n\r\n@media screen and (min-width: 500px) {\r\n .navbar__sidebar {\r\n &.show {\r\n width: 50%; // 100% of viewport width\r\n }\r\n }\r\n}\r\n\r\n//burger icon disappears\r\n@media screen and (min-width: 800px) {\r\n .navbar__wrapper {\r\n height: 63px;\r\n }\r\n\r\n .navbar__container {\r\n padding: 0px 16px;\r\n height: 63px;\r\n gap: initial;\r\n\r\n & .navbar__container-right {\r\n & .navbar__burger-icon-wrapper {\r\n display: none;\r\n }\r\n }\r\n }\r\n\r\n .navbar__main-container {\r\n &.show {\r\n height: auto;\r\n background-color: inherit;\r\n transition: none;\r\n }\r\n }\r\n\r\n .navbar__sidebar {\r\n width: 0;\r\n transition: 1s;\r\n &.show { \r\n right: -100%;\r\n }\r\n }\r\n\r\n}\r\n\r\n//left container appears\r\n@media screen and (min-width: 1024px) {\r\n .navbar__wrapper {\r\n height: 72px;\r\n }\r\n\r\n .navbar__container {\r\n padding: 0px 24px;\r\n height: 72px;\r\n\r\n & .navbar__container-left {\r\n gap: 12px;\r\n display: flex;\r\n\r\n & .navbar__container-left-content {\r\n display: flex;\r\n }\r\n\r\n & .navbar__container-left-logo-default {\r\n & svg {\r\n width: 72.8px;\r\n height: 32px;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .navbar__main-container {\r\n &.show {\r\n height: auto;\r\n background-color: inherit;\r\n transition: none;\r\n }\r\n }\r\n}\r\n\r\n@media screen and (min-width: 1200px) {\r\n .navbar__wrapper {\r\n height: 80px\r\n }\r\n\r\n .navbar__container {\r\n padding: 0px 32px;\r\n height: 80px;\r\n\r\n & .navbar__container-left {\r\n & .navbar__container-left-content {\r\n justify-content: inherit;\r\n }\r\n }\r\n\r\n & .navbar__container-right {\r\n & .navbar__container-right-content {\r\n justify-content: inherit;\r\n }\r\n }\r\n }\r\n}\r\n\r\n@media screen and (min-width: 1440px) {\r\n .navbar__wrapper {\r\n height: 80px;\r\n }\r\n\r\n .navbar__container {\r\n padding: 0px 40px;\r\n height: 80px;\r\n\r\n & .navbar__container-left {\r\n & .navbar__container-left-content {\r\n justify-content: center;\r\n }\r\n }\r\n\r\n & .navbar__container-right {\r\n & .navbar__container-right-content {\r\n justify-content: inherit;\r\n }\r\n }\r\n }\r\n}","import { Component, h, Element, State, Prop, Listen, Event, EventEmitter } from '@stencil/core';\r\nimport { trackComponent } from '../../../global/utils/tracking';\r\nimport { detectFramework } from '../../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-navbar',\r\n styleUrl: 'navbar.scss',\r\n shadow: true,\r\n})\r\n\r\nexport class Navbar {\r\n @Element() el;\r\n @State() main: boolean = true\r\n @State() products: boolean = false\r\n @State() applications: boolean = false\r\n @State() design: boolean = false\r\n @State() support: boolean = false\r\n @State() about: boolean = false\r\n @Prop() applicationName: string = \"\"\r\n @State() hasLeftMenuItems: boolean = true;\r\n @Prop() fixed: boolean = true;\r\n @Prop() showLogoAndAppname: boolean = true;\r\n @State() searchBarIsOpen: string;\r\n @Prop() logoHref: string = \"\";\r\n @State() internalLogoHref: string = \"\"\r\n @Prop() logoHrefTarget: string = '_self';\r\n @State() internalLogoHrefTarget: string = '_self';\r\n @Event() ifxNavbarMobileMenuIsOpen: EventEmitter;\r\n\r\n private addEventListenersToHandleCustomFocusState() {\r\n const element = this.el.shadowRoot.firstChild;\r\n\r\n if (!element) {\r\n console.error('element not found');\r\n return;\r\n }\r\n element.tabIndex = -1;\r\n\r\n // Select all a elements in the navbar and set their tabIndex to -1 to make them non-focusable\r\n const aElements = element.querySelectorAll('a');\r\n for (let i = 0; i < aElements.length; i++) {\r\n aElements[i].tabIndex = -1;\r\n }\r\n\r\n const slot = element.querySelector('slot');\r\n if (slot) {\r\n const assignedNodes = slot.assignedNodes();\r\n for (let i = 0; i < assignedNodes.length; i++) {\r\n const node = assignedNodes[i] as HTMLElement;\r\n if (node.nodeName === 'IFX-NAVBAR-ITEM') {\r\n const navbarItem = node as HTMLIfxNavbarItemElement;\r\n\r\n // Get all navigation items\r\n const aElements = navbarItem?.shadowRoot.querySelectorAll('a');\r\n for (let i = 0; i < aElements.length; i++) {\r\n aElements[i].tabIndex = -1;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n @Listen('ifxNavItem') \r\n clearFirstLayerMenu(event: CustomEvent) { \r\n if(event.detail.action === 'hideFirstLayer') { \r\n const leftMenuItems = this.getMobileMenuTop()\r\n for(let i = 0; i < leftMenuItems.length; i++) { \r\n if(!leftMenuItems[i].isSameNode(event.detail.component)) {\r\n leftMenuItems[i].hideComponent()\r\n }\r\n }\r\n }\r\n\r\n if(event.detail.action === 'hideSecondLayer') { \r\n const parent = event.detail.parent;\r\n const children = parent.children;\r\n parent.toggleFirstLayerItem('remove', 'add')\r\n for(let i = 0; i < children.length; i++) { \r\n if(!children[i].isSameNode(event.detail.component)) {\r\n children[i].hideComponent()\r\n }\r\n }\r\n }\r\n\r\n if(event.detail.action === 'returnToSecondLayer') { \r\n const parent = event.detail.parent;\r\n const children = parent.children;\r\n parent.toggleFirstLayerItem('add', 'remove')\r\n for(let i = 0; i < children.length; i++) { \r\n if(!children[i].isSameNode(event.detail.component)) {\r\n children[i].showComponent()\r\n }\r\n }\r\n }\r\n\r\n if(event.detail.action === 'show') { \r\n const leftMenuItems = this.el.querySelectorAll('[slot=\"left-item\"]')\r\n for(let i = 0; i < leftMenuItems.length; i++) { \r\n if(!leftMenuItems[i].isSameNode(event.detail.component)) {\r\n leftMenuItems[i].showComponent()\r\n }\r\n }\r\n }\r\n\r\n if(event.detail.action === 'return') { \r\n const leftMenuItems = this.getMobileMenuTop()\r\n for(let i = 0; i < leftMenuItems.length; i++) { \r\n if(!leftMenuItems[i].isSameNode(event.detail.component)) {\r\n leftMenuItems[i].showComponent()\r\n }\r\n }\r\n }\r\n }\r\n\r\n getWrappers() {\r\n const rightContentNavigationGroup = this.el.shadowRoot.querySelector('.navbar__container-right-content-navigation-group')\r\n const searchBarRightWrapper = this.el.shadowRoot.querySelector('.navbar__container-right-content-navigation-item-search-bar-icon-wrapper')\r\n const searchBarLeftWrapper = this.el.shadowRoot.querySelector('.navbar__container-left-content-navigation-item-search-bar')\r\n const rightSideItemSlot = rightContentNavigationGroup.querySelector('slot[name=\"right-item\"]');\r\n const rightSideSlot = searchBarRightWrapper.querySelector('slot');\r\n const leftSideSlot = searchBarLeftWrapper.querySelector('slot');\r\n const rightAssignedNodes = rightSideSlot.assignedNodes();\r\n const leftAssignedNodes = leftSideSlot.assignedNodes();\r\n const navbarProfile = this.el.querySelector('ifx-navbar-profile');\r\n const leftMenuItems = this.el.querySelectorAll('[slot=\"left-item\"]');\r\n const rightMenuItems = this.el.querySelectorAll('[slot=\"right-item\"]');\r\n const topRowWrapper = this.el.shadowRoot.querySelector('.navbar__sidebar-top-row-wrapper')\r\n \r\n return {rightSideItemSlot, rightSideSlot, leftSideSlot, rightAssignedNodes, leftAssignedNodes, navbarProfile, leftMenuItems, rightMenuItems, topRowWrapper};\r\n }\r\n\r\n hideNavItems() {\r\n const { rightAssignedNodes, leftAssignedNodes, navbarProfile, leftMenuItems, rightMenuItems, topRowWrapper } = this.getWrappers();\r\n \r\n if(rightAssignedNodes.length !== 0) { \r\n this.searchBarIsOpen = 'right'\r\n } else if(leftAssignedNodes.length !== 0) {\r\n this.searchBarIsOpen = 'left'\r\n }\r\n\r\n if(navbarProfile) { \r\n navbarProfile.hideComponent()\r\n }\r\n \r\n for(let l = 0; l < leftMenuItems.length; l++) { \r\n if(!topRowWrapper.classList.contains('expand')) {\r\n leftMenuItems[l].hideComponent()\r\n }\r\n }\r\n \r\n for(let r = 0; r < rightMenuItems.length; r++) { \r\n if(topRowWrapper.classList.contains('expand')) {\r\n if(!rightMenuItems[r].hideOnMobile) { \r\n rightMenuItems[r].hideComponent()\r\n }\r\n } else { \r\n rightMenuItems[r].hideComponent()\r\n }\r\n }\r\n }\r\n\r\n showNavItems() {\r\n const { navbarProfile, leftMenuItems, rightMenuItems, topRowWrapper } = this.getWrappers();\r\n this.searchBarIsOpen = undefined;\r\n \r\n if(navbarProfile) {\r\n navbarProfile.showComponent()\r\n }\r\n \r\n for(let l = 0; l < leftMenuItems.length; l++) { \r\n if(!topRowWrapper.classList.contains('expand')) {\r\n leftMenuItems[l].showComponent()\r\n }\r\n }\r\n \r\n for(let r = 0; r < rightMenuItems.length; r++) { \r\n if(topRowWrapper.classList.contains('expand')) {\r\n if(!rightMenuItems[r].hideOnMobile) { \r\n rightMenuItems[r].showComponent()\r\n }\r\n } else { \r\n rightMenuItems[r].showComponent()\r\n }\r\n }\r\n }\r\n \r\n \r\n @Listen('ifxOpen')\r\n handleSearchBarToggle(event: CustomEvent) {\r\n \r\n if(event.detail) { \r\n this.hideNavItems();\r\n } else if(!event.detail) {\r\n this.showNavItems();\r\n }\r\n }\r\n\r\n toggleClass(el, className) {\r\n el.classList.toggle(className)\r\n }\r\n\r\n handleSidebar(el) {\r\n const sidebarIconWrapper = el.currentTarget.closest('.navbar__burger-icon-wrapper');\r\n const sidebarIconOpen = sidebarIconWrapper.querySelector('.navbar__burger-icon')\r\n const sidebarIconClose = sidebarIconWrapper.querySelector('.navbar__cross-icon')\r\n const mainContainer = el.currentTarget.closest('.navbar__main-container');\r\n const navbarWrapper = el.currentTarget.closest('.navbar__wrapper')\r\n const sidebarWrapper = navbarWrapper.querySelector('.navbar__sidebar');\r\n this.toggleClass(navbarWrapper, 'show')\r\n this.toggleClass(mainContainer, 'show')\r\n this.toggleClass(sidebarWrapper, 'show')\r\n this.toggleClass(sidebarIconOpen, 'close')\r\n this.toggleClass(sidebarIconClose, 'show')\r\n\r\n if(sidebarIconClose.classList.contains('show')) { \r\n this.handleBodyScroll('hide')\r\n } else { \r\n this.handleBodyScroll('show')\r\n }\r\n }\r\n\r\n handleBodyScroll(action) { \r\n const body = this.el.closest('body')\r\n if(!this.fixed && action === 'hide') { \r\n body.style.overflow = 'hidden'\r\n } else if(action === 'show') { \r\n body.style.overflow = 'visible'\r\n }\r\n }\r\n\r\n handleDropdownMenu(el) {\r\n const dropdownWrapper = el.currentTarget.querySelector('.navbar__dropdown-wrapper')\r\n dropdownWrapper.classList.toggle('open')\r\n const iconWrapper = el.currentTarget.querySelector('a')\r\n iconWrapper.classList.toggle('open')\r\n }\r\n\r\n async setItemMenuPosition() { \r\n const navbarItems = this.el.querySelectorAll('ifx-navbar-item')\r\n const navbarProfile = this.el.querySelector('ifx-navbar-profile')\r\n\r\n if(navbarProfile) {\r\n const itemChildren = navbarProfile.querySelectorAll('ifx-navbar-item')\r\n if (itemChildren.length !== 0) {\r\n itemChildren.forEach(item => { \r\n item.setMenuItemPosition()\r\n this.setMenuItemChildrenPosition(item)\r\n })\r\n }\r\n }\r\n \r\n if(navbarItems.length !== 0) { \r\n for(let i = 0; i < navbarItems.length; i++) { \r\n const item = navbarItems[i];\r\n const itemChildren = item.querySelectorAll('ifx-navbar-item')\r\n if (itemChildren.length !== 0) {\r\n const hasNestedItems = await item.setItemSideSpecifications()\r\n if(hasNestedItems) { \r\n itemChildren.forEach(item => { \r\n item.setMenuItemPosition()\r\n this.setMenuItemChildrenPosition(item)\r\n })\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n setMenuItemChildrenPosition(item) {\r\n const itemChildren = item.querySelectorAll('ifx-navbar-item');\r\n if (itemChildren.length !== 0) {\r\n itemChildren.forEach(subItem => { \r\n subItem.setMenuItemPosition()\r\n this.setMenuItemChildrenPosition(subItem)\r\n })\r\n }\r\n }\r\n\r\n getMediaQueryList() { \r\n const mediaQueryList = window.matchMedia('(max-width: 800px)');\r\n return mediaQueryList;\r\n }\r\n\r\n async componentDidLoad() {\r\n const framework = detectFramework();\r\n trackComponent('ifx-navbar', await framework)\r\n this.setItemMenuPosition()\r\n this.addEventListenersToHandleCustomFocusState();\r\n \r\n const mediaQueryList = this.getMediaQueryList()\r\n\r\n if (mediaQueryList.matches) {\r\n this.moveNavItemsToSidebar();\r\n }\r\n\r\n }\r\n\r\n handleMobileMenuBottom(e) { \r\n const mobileMenuBottomWrapper = this.el.shadowRoot.querySelector('.navbar__sidebar-bottom-row')\r\n const slotElement = e.target;\r\n const nodes = slotElement.assignedNodes();\r\n if(nodes.length > 0) { \r\n mobileMenuBottomWrapper.classList.add('show')\r\n } else { \r\n mobileMenuBottomWrapper.classList.remove('show')\r\n }\r\n }\r\n\r\n handleLogoHrefAndTarget(){\r\n if(this.logoHref.trim() === \"\") {\r\n this.internalLogoHref = undefined;\r\n }else{\r\n this.internalLogoHref = this.logoHref;\r\n }\r\n\r\n if(['_self', '_blank', '_parent'].includes(this.logoHrefTarget.trim())){\r\n this.internalLogoHrefTarget = this.logoHrefTarget;\r\n }else{\r\n this.internalLogoHrefTarget = '_self';\r\n }\r\n }\r\n\r\n \r\n componentWillLoad() {\r\n this.RemoveSpaceOnStorybookSnippet()\r\n const dropdownMenu = this.el.querySelector('ifx-navbar-menu')\r\n const leftMenuItems = this.el.querySelectorAll('[slot=\"left-item\"]')\r\n if (!leftMenuItems.length && !dropdownMenu) {\r\n this.hasLeftMenuItems = false;\r\n }\r\n this.handleLogoHrefAndTarget();\r\n\r\n const mediaQueryList = window.matchMedia('(max-width: 800px)');\r\n mediaQueryList.addEventListener('change', (e) => this.moveNavItemsToSidebar(e));\r\n }\r\n\r\n \r\n\r\n getSearchBarLeftWrapper() { \r\n const searchBarLeftWrapper = this.el.shadowRoot.querySelector('.navbar__container-left-content-navigation-item-search-bar')\r\n return searchBarLeftWrapper;\r\n }\r\n\r\n getMobileMenuTop() { \r\n const leftMenuItems = this.el.querySelectorAll('[slot=\"mobile-menu-top\"]');\r\n return leftMenuItems;\r\n }\r\n\r\n getMobileMenuBottom() { \r\n const rightMenuItems = this.el.querySelectorAll('[slot=\"mobile-menu-bottom\"]');\r\n return rightMenuItems;\r\n }\r\n\r\n handleBurgerIcon() { \r\n const leftMenuItems = this.getMobileMenuTop()\r\n const rightMenuItems = this.getMobileMenuBottom()\r\n if(!leftMenuItems.length && !rightMenuItems.length) { \r\n const burgerIconWrapper = this.el.shadowRoot.querySelector('.navbar__burger-icon-wrapper')\r\n this.toggleClass(burgerIconWrapper, 'hide')\r\n }\r\n }\r\n \r\n moveNavItemsToSidebar(e?: MediaQueryListEvent) {\r\n const topRowWrapper = this.el.shadowRoot.querySelector('.navbar__sidebar-top-row-wrapper')\r\n const mediaQueryList = this.getMediaQueryList();\r\n const matches = e ? e.matches : mediaQueryList.matches;\r\n \r\n if (matches) {\r\n /* The viewport is 800px wide or less */\r\n topRowWrapper.classList.add('expand')\r\n \r\n //hide body scroll if sidebar was opened\r\n const crossIcon = this.el.shadowRoot.querySelector('.navbar__cross-icon')\r\n if(crossIcon.classList.contains('show')) { \r\n this.handleBodyScroll('hide')\r\n }\r\n \r\n //move search bar to right-side\r\n const searchBarLeft = this.el.querySelector('[slot=\"search-bar-left\"]')\r\n if(searchBarLeft) { \r\n if(this.searchBarIsOpen) { \r\n searchBarLeft.onNavbarMobile()\r\n }\r\n const searchBarLeftWrapper = this.getSearchBarLeftWrapper()\r\n searchBarLeftWrapper.classList.add('initial')\r\n searchBarLeft.setAttribute('slot', 'search-bar-right')\r\n }\r\n \r\n //left-side\r\n const leftMenuItems = this.el.querySelectorAll('[slot=\"left-item\"]')\r\n for(let i = 0; i < leftMenuItems.length; i++) { \r\n leftMenuItems[i].setAttribute('slot', 'mobile-menu-top')\r\n leftMenuItems[i].moveChildComponentsIntoSubLayerMenu()\r\n if(this.searchBarIsOpen) { \r\n leftMenuItems[i].showComponent()\r\n }\r\n }\r\n \r\n //right-side\r\n const rightMenuItems = this.el.querySelectorAll('[slot=\"right-item\"]')\r\n for(let i = 0; i < rightMenuItems.length; i++) { \r\n if(rightMenuItems[i].tagName.toUpperCase() === 'IFX-NAVBAR-PROFILE') { \r\n rightMenuItems[i].showLabel = false;\r\n } else { \r\n if(rightMenuItems[i].hideOnMobile) { \r\n rightMenuItems[i].setAttribute('slot', 'mobile-menu-bottom')\r\n \r\n rightMenuItems[i].toggleChildren('add')\r\n \r\n rightMenuItems[i].showLabel = true;\r\n if(this.searchBarIsOpen) { \r\n rightMenuItems[i].showComponent()\r\n }\r\n }\r\n }\r\n }\r\n \r\n this.handleBurgerIcon()\r\n\r\n } else {\r\n /* The viewport is more than 800px wide */\r\n topRowWrapper.classList.remove('expand')\r\n\r\n //show body scroll \r\n this.handleBodyScroll('show')\r\n\r\n //return search bar to its original position\r\n const searchBarLeftWrapper = this.getSearchBarLeftWrapper()\r\n const leftIsInitial = searchBarLeftWrapper.classList.contains('initial')\r\n const searchBarRight = this.el.querySelector('[slot=\"search-bar-right\"]')\r\n if(leftIsInitial) { \r\n if(this.searchBarIsOpen) { \r\n searchBarRight.onNavbarMobile()\r\n }\r\n if(searchBarRight) { \r\n searchBarRight.setAttribute('slot', 'search-bar-left')\r\n }\r\n }\r\n\r\n //left-side\r\n const leftMenuItems = this.getMobileMenuTop()\r\n for(let i = 0; i < leftMenuItems.length; i++) { \r\n leftMenuItems[i].setAttribute('slot', 'left-item')\r\n leftMenuItems[i].moveChildComponentsBackIntoNavbar()\r\n }\r\n\r\n //right-side\r\n const rightMenuItems = this.getMobileMenuBottom()\r\n const navbarProfileItem = this.el.querySelector('ifx-navbar-profile')\r\n if(navbarProfileItem) { \r\n const showProfileItemLabel = navbarProfileItem.getAttribute('show-label');\r\n navbarProfileItem.setAttribute('show-label', showProfileItemLabel)\r\n }\r\n\r\n for(let i = 0; i < rightMenuItems.length; i++) { \r\n rightMenuItems[i].setAttribute('slot', 'right-item')\r\n\r\n rightMenuItems[i].toggleChildren('remove')\r\n \r\n const showLabel = rightMenuItems[i].getAttribute('show-label');\r\n rightMenuItems[i].setAttribute('show-label', showLabel)\r\n if(this.searchBarIsOpen) { \r\n rightMenuItems[i].hideComponent()\r\n }\r\n }\r\n }\r\n }\r\n\r\n RemoveSpaceOnStorybookSnippet() { \r\n let parent = this.el.parentElement;\r\n if(parent) { \r\n let storybookWrapper = parent.closest('.css-xzp052');\r\n if(storybookWrapper) { \r\n storybookWrapper.style.overflow = 'visible'\r\n }\r\n }\r\n }\r\n\r\n\r\n \r\n render() {\r\n return (\r\n <div aria-label='a navigation navbar' class={`navbar__wrapper ${this.fixed ? 'fixed' : \"\"}`}>\r\n <div class={`navbar__main-container ${this.fixed ? 'fixed' : \"\"}`}>\r\n <div class={`navbar__container ${this.searchBarIsOpen ? \"expanded\" : \"\"}`}>\r\n <div class={`navbar__container-left ${this.searchBarIsOpen === 'left' ? \"expand\" : this.searchBarIsOpen === 'right' ? 'hide' : \"\"}`}>\r\n {this.showLogoAndAppname &&\r\n <div class={`navbar__container-left-logo ${this.searchBarIsOpen === 'left' ? 'hide' : \"\"}`}>\r\n <div class=\"navbar__container-left-logo-default\">\r\n <a href={this.internalLogoHref} target = {this.internalLogoHrefTarget}>\r\n <svg width=\"91\" height=\"40\" viewBox=\"0 0 91 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_2396_2480)\">\r\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\" />\r\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\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2396_2480\">\r\n <rect width=\"91\" height=\"40\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </a>\r\n </div>\r\n {this.applicationName && <h6>{this.applicationName}</h6>}\r\n {this.applicationName && this.hasLeftMenuItems &&\r\n <div class=\"navbar__container-left-logo-divider\"></div>}\r\n </div>}\r\n <div class=\"navbar__container-left-content\">\r\n <div class=\"navbar__container-left-content-navigation-group\">\r\n <slot name='left-item' />\r\n <div class=\"navbar__container-left-content-navigation-item-search-bar\">\r\n <slot name='search-bar-left' />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class={`navbar__container-right ${this.searchBarIsOpen === 'right' ? \"expand\" : this.searchBarIsOpen === 'left' ? 'hide' : \"\"}`}>\r\n <div class=\"navbar__container-right-content\">\r\n <div class=\"navbar__container-right-content-navigation-group\">\r\n <div class=\"navbar__container-right-content-navigation-item-search-bar\">\r\n <div class={`navbar__container-right-content-navigation-item-search-bar-icon-wrapper`}>\r\n <slot name='search-bar-right' />\r\n </div>\r\n </div>\r\n <slot name='right-item' />\r\n </div>\r\n </div>\r\n\r\n {/* MOBILE MENU BUTTON */}\r\n <div class={`navbar__burger-icon-wrapper`} onClick={this.handleSidebar.bind(this)}>\r\n <div class=\"navbar__burger-icon\">\r\n <ifx-icon icon=\"menu-right-16\"></ifx-icon>\r\n </div>\r\n <div class=\"navbar__cross-icon\">\r\n <ifx-icon icon=\"cross-16\"></ifx-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n {/* SIDEBAR */}\r\n <div class=\"navbar__sidebar\">\r\n {/* left side ifx-navbar-item */}\r\n <div class=\"navbar__sidebar-top-row\">\r\n <div class=\"navbar__sidebar-top-row-wrapper\">\r\n <slot name='mobile-menu-top' />\r\n </div>\r\n </div>\r\n\r\n {/* right side ifx-navbar-item */}\r\n <div class=\"navbar__sidebar-bottom-row\">\r\n <slot name='mobile-menu-bottom' onSlotchange={(e) => this.handleMobileMenuBottom(e)} />\r\n </div>\r\n \r\n </div>\r\n </div>\r\n );\r\n }\r\n}"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-501cf224.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["linkCss","Link","constructor","hostRef","this","href","undefined","target","variant","disabled","internalHref","internalTarget","internalVariant","setInternalStates","trim","toLowerCase","componentWillRender","handleKeyDown","event","preventDefault","key","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","render","h","tabindex","role","ariaLabel","download","class","linkClassNames","getSizeClass","small","size","medium","large","extraLarge","getVariantClass","bold","title","underlined","menu","classNames"],"sources":["src/components/link/link.scss?tag=ifx-link&encapsulation=shadow","src/components/link/link.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n display: inline-flex;\r\n}\r\n\r\n.link {\r\n display: inline-flex;\r\n align-items: center;\r\n font-weight: 400;\r\n font-size: tokens.$ifxFontSizeM;\r\n text-decoration: none;\r\n color: tokens.$ifxColorOcean500;\r\n gap: tokens.$ifxSpace100;\r\n line-height: 1.6;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n &:hover { \r\n cursor: pointer;\r\n }\r\n\r\n &:focus {\r\n outline-width: 2px;\r\n outline-style: solid;\r\n outline-color: #0A8276;\r\n outline-offset: 4px;\r\n border-radius: 3px;\r\n }\r\n\r\n &.bold {\r\n font-weight: tokens.$ifxFontWeightSemibold;\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n\r\n &:active {\r\n color: #08665C;\r\n font-style: normal;\r\n font-weight: 600;\r\n text-decoration: underline;\r\n }\r\n\r\n }\r\n\r\n &.underlined {\r\n text-decoration: underline;\r\n text-decoration-color: tokens.$ifxColorOcean500;\r\n color: #1D1D1D;\r\n text-underline-offset: 8px;\r\n \r\n &:hover {\r\n color: tokens.$ifxColorOcean500;;\r\n }\r\n \r\n &:active {\r\n color: #0A8276;\r\n }\r\n\r\n &:disabled,\r\n &.disabled {\r\n text-decoration-color: tokens.$ifxColorEngineering300;\r\n }\r\n }\r\n\r\n &.title {\r\n text-decoration: none;\r\n font-weight: tokens.$ifxFontWeightSemibold;\r\n color: #1D1D1D;\r\n\r\n &:hover {\r\n color: tokens.$ifxColorOcean500;\r\n }\r\n\r\n &:active {\r\n color: #08665C;\r\n }\r\n }\r\n\r\n &.menu {\r\n font-weight: 400;\r\n font-style: normal;\r\n line-height: 26px;\r\n color: #1D1D1D;\r\n\r\n &:hover {\r\n color: tokens.$ifxColorOcean500;\r\n }\r\n\r\n &:active {\r\n color: #08665C;\r\n }\r\n }\r\n\r\n &.small {\r\n font-size: tokens.$ifxFontSizeS;\r\n }\r\n\r\n &.medium {\r\n font-size: tokens.$ifxFontSizeM;\r\n }\r\n\r\n &.large {\r\n font-size: tokens.$ifxFontSizeL;\r\n }\r\n\r\n &.extraLarge {\r\n font-size: tokens.$ifxFontSizeXl;\r\n }\r\n\r\n &.underline {\r\n text-decoration: underline;\r\n }\r\n\r\n &:disabled,\r\n &.disabled {\r\n color: tokens.$ifxColorEngineering300;\r\n cursor: default;\r\n pointer-events: none;\r\n }\r\n\r\n}","import { Component, Prop, h, State, Element } from \"@stencil/core\";\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport classNames from 'classnames';\r\n \r\n@Component({\r\n tag: 'ifx-link',\r\n styleUrl: 'link.scss',\r\n shadow: true\r\n})\r\n\r\nexport class Link {\r\n @Element() el;\r\n @Prop() href: string = undefined;\r\n @Prop() target: string = '_self';\r\n @Prop() variant: string = 'bold';\r\n @Prop() size: string;\r\n @Prop() disabled: boolean = false;\r\n @Prop() download: string;\r\n @Prop() ariaLabel: string | null;\r\n @State() internalHref: string ='';\r\n @State() internalTarget: string = '';\r\n @State() internalVariant: string = '';\r\n\r\n setInternalStates() {\r\n if(this.href){\r\n this.internalHref = this.href.trim();\r\n }else{\r\n this.internalHref = undefined;\r\n }\r\n this.internalTarget = this.target.trim();\r\n this.internalVariant = this.variant.trim().toLowerCase();\r\n }\r\n\r\n componentWillRender(){\r\n this.setInternalStates();\r\n }\r\n\r\n handleKeyDown(event: KeyboardEvent) {\r\n if (this.disabled) {\r\n event.preventDefault();\r\n } else if (event.key === 'Enter') {\r\n event.preventDefault();\r\n }\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-link', await framework)\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <a\r\n tabindex=\"0\"\r\n role=\"link\"\r\n aria-label={this.ariaLabel}\r\n aria-disabled={this.disabled || !this.internalHref}\r\n href={this.disabled ? undefined : this.internalHref}\r\n download={this.download}\r\n target={this.internalTarget}\r\n class={this.linkClassNames()}>\r\n <slot></slot>\r\n </a>)\r\n }\r\n\r\n getSizeClass() {\r\n const small = this.size === 's' ? 'small' : null;\r\n const medium = this.size === 'm' ? 'medium' : null;\r\n const large = this.size === 'l' ? 'large' : null;\r\n const extraLarge = this.size === 'xl' ? 'extraLarge' : null;\r\n\r\n if (small) {\r\n return small;\r\n } else if (medium) {\r\n return medium;\r\n } else if (large) {\r\n return large;\r\n } else if (extraLarge && this.internalVariant === 'underlined') {\r\n return 'large';\r\n } else if (extraLarge && this.internalVariant !== 'underlined') {\r\n return extraLarge;\r\n } else return \"\";\r\n }\r\n\r\n getVariantClass() {\r\n const bold = this.internalVariant === 'bold' ? 'bold' : null;\r\n const title = this.internalVariant === 'title' ? 'title' : null;\r\n const underlined = this.internalVariant === 'underlined' ? 'underlined' : null;\r\n const menu = this.internalVariant === 'menu' ? 'menu' : null;\r\n\r\n if (bold) {\r\n return bold\r\n } else if (title) {\r\n return title;\r\n } else if (underlined) {\r\n return underlined;\r\n } else if (menu) {\r\n return menu;\r\n } else return bold;\r\n }\r\n\r\n linkClassNames() {\r\n return classNames(\r\n 'link',\r\n 'primary',\r\n this.getVariantClass(),\r\n this.getSizeClass(),\r\n this.disabled ? 'disabled' : '',\r\n );\r\n }\r\n}"],"mappings":"6LAAA,MAAMA,EAAU,6zC,MCYHC,EAAI,MANjB,WAAAC,CAAAC,G,UAQUC,KAAIC,KAAWC,UACfF,KAAMG,OAAW,QACjBH,KAAOI,QAAW,OAElBJ,KAAQK,SAAY,MAGnBL,KAAYM,aAAU,GACtBN,KAAcO,eAAW,GACzBP,KAAeQ,gBAAW,EA2FpC,CAzFC,iBAAAC,GACE,GAAGT,KAAKC,KAAK,CACXD,KAAKM,aAAeN,KAAKC,KAAKS,M,KAC3B,CACHV,KAAKM,aAAeJ,S,CAEtBF,KAAKO,eAAiBP,KAAKG,OAAOO,OAClCV,KAAKQ,gBAAkBR,KAAKI,QAAQM,OAAOC,a,CAG7C,mBAAAC,GACEZ,KAAKS,mB,CAGP,aAAAI,CAAcC,GACZ,GAAId,KAAKK,SAAU,CACjBS,EAAMC,gB,MACD,GAAID,EAAME,MAAQ,QAAS,CAChCF,EAAMC,gB,EAIV,sBAAME,GACJ,IAAIC,EAAuBlB,KAAKmB,IAAK,CACnC,MAAMC,EAAYC,IAClBC,EAAe,iBAAkBF,E,EAIrC,MAAAG,GACE,OACEC,EACA,KAAAR,IAAA,2CAAAS,SAAS,IACPC,KAAK,OACO,aAAA1B,KAAK2B,UAAS,gBACX3B,KAAKK,WAAaL,KAAKM,aACtCL,KAAMD,KAAKK,SAAWH,UAAYF,KAAKM,aACvCsB,SAAU5B,KAAK4B,SACfzB,OAAQH,KAAKO,eACbsB,MAAO7B,KAAK8B,kBACZN,EAAa,QAAAR,IAAA,6C,CAInB,YAAAe,GACE,MAAMC,EAAQhC,KAAKiC,OAAS,IAAM,QAAU,KAC5C,MAAMC,EAASlC,KAAKiC,OAAS,IAAM,SAAW,KAC9C,MAAME,EAAQnC,KAAKiC,OAAS,IAAM,QAAU,KAC5C,MAAMG,EAAapC,KAAKiC,OAAS,KAAO,aAAe,KAEvD,GAAID,EAAO,CACT,OAAOA,C,MACF,GAAIE,EAAQ,CACjB,OAAOA,C,MACF,GAAIC,EAAO,CAChB,OAAOA,C,MACF,GAAIC,GAAcpC,KAAKQ,kBAAoB,aAAc,CAC9D,MAAO,O,MACF,GAAI4B,GAAcpC,KAAKQ,kBAAoB,aAAc,CAC9D,OAAO4B,C,MACF,MAAO,E,CAGhB,eAAAC,GACE,MAAMC,EAAOtC,KAAKQ,kBAAoB,OAAS,OAAS,KACxD,MAAM+B,EAAQvC,KAAKQ,kBAAoB,QAAU,QAAU,KAC3D,MAAMgC,EAAaxC,KAAKQ,kBAAoB,aAAe,aAAe,KAC1E,MAAMiC,EAAOzC,KAAKQ,kBAAoB,OAAS,OAAS,KAExD,GAAI8B,EAAM,CACR,OAAOA,C,MACF,GAAIC,EAAO,CAChB,OAAOA,C,MACF,GAAIC,EAAY,CACrB,OAAOA,C,MACF,GAAIC,EAAM,CACf,OAAOA,C,MACF,OAAOH,C,CAGhB,cAAAR,GACE,OAAOY,EACL,OACA,UACA1C,KAAKqC,kBACLrC,KAAK+B,eACL/B,KAAKK,SAAW,WAAa,G","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-5251b206.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["stepCss","Step","constructor","hostRef","this","complete","disabled","error","lastStep","stepId","stepperState","activeStep","showStepNumber","variant","indicatorPosition","clickable","onStepChange","event","previousActiveStep","detail","updateCurrentStep","newStepperState","active","updateErrorState","handleStepClick","setActiveStep","handleStepKeyDown","key","stopOnClickPropogation","stopPropagation","render","h","onClick","e","class","icon","tabIndex","onKeyDown"],"sources":["src/components/stepper/step/step.scss?tag=ifx-step&encapsulation=shadow","src/components/stepper/step/step.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n.step-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: flex-start;\r\n width: 100%;\r\n gap: tokens.$ifxSize100;\r\n font: tokens.$ifxBodyBody03;\r\n\r\n\r\n &.vertical {\r\n flex-direction: row;\r\n gap: tokens.$ifxSize150;\r\n width: unset;\r\n height: 100%;\r\n \r\n .step-icon-wrapper {\r\n flex-direction: column;\r\n width: unset;\r\n height: 100%;\r\n }\r\n }\r\n \r\n &.compact {\r\n gap: 0;\r\n max-width: 100%;\r\n .step-label{\r\n max-width: 100%;\r\n cursor: auto;\r\n align-self: flex-start;\r\n color: tokens.$ifxColorEngineering500;\r\n }\r\n \r\n &.indicator-left {\r\n align-items: flex-end;\r\n text-align: right;\r\n }\r\n \r\n &.indicator-right {\r\n align-items: flex-start;\r\n }\r\n }\r\n\r\n .step-label {\r\n max-width: 90%;\r\n color: tokens.$ifxColorEngineering300; \r\n word-wrap: break-word;\r\n &.curr-label{\r\n font: tokens.$ifxHeadingHeadingCompact04; \r\n }\r\n &:focus {\r\n outline: 2px solid tokens.$ifxColorOcean500; \r\n outline-offset: 2px;\r\n }\r\n &.next-label{\r\n font: tokens.$ifxBodyBody05;\r\n }\r\n :hover{\r\n color: tokens.$ifxColorEngineering300;\r\n }\r\n }\r\n\r\n \r\n &.first-step {\r\n .step-connector-l{\r\n height: 0px;\r\n }\r\n }\r\n \r\n &.last-step{\r\n .step-connector-r{\r\n height: 0px;\r\n }\r\n }\r\n\r\n &.vertical {\r\n &.first-step .step-connector-l,\r\n &.last-step .step-connector-r {\r\n width: 0px;\r\n }\r\n }\r\n\r\n &.complete{\r\n .step-connector-l, .step-connector-r, .step-icon {\r\n background: tokens.$ifxColorOcean500;\r\n &.active, &.error {\r\n background: tokens.$ifxColorEngineering300;\r\n }\r\n }\r\n &:not(.disabled) {\r\n .step-label{\r\n cursor: pointer;\r\n color: tokens.$ifxColorBaseBlack;\r\n :hover {\r\n color: tokens.$ifxColorOcean600;\r\n }\r\n }\r\n }\r\n } \r\n \r\n &.disabled{\r\n .step-connector-l, \r\n .step-connector-r, \r\n .step-icon {\r\n background-color: tokens.$ifxColorEngineering300;\r\n }\r\n .step-label, \r\n .step-label :hover{\r\n color: tokens.$ifxColorEngineering300;\r\n }\r\n }\r\n \r\n &.active{\r\n .step-connector-l, \r\n .step-connector-r, \r\n .step-icon {\r\n background: tokens.$ifxColorOcean500;\r\n &.active, \r\n &.error {\r\n background: tokens.$ifxColorEngineering300;\r\n }\r\n }\r\n .step-label, \r\n .step-label :hover{\r\n color: tokens.$ifxColorBaseBlack;\r\n }\r\n &.complete .step-label { \r\n cursor: auto;\r\n }\r\n \r\n } \r\n\r\n &.clickable:not(.active) .step-label{\r\n cursor: pointer;\r\n }\r\n\r\n &.error:not(.active){\r\n color: tokens.$ifxColorRed500;\r\n .step-label{\r\n color: tokens.$ifxColorRed500;\r\n :hover{\r\n color: tokens.$ifxColorOcean500;\r\n }\r\n }\r\n }\r\n\r\n &.disabled{\r\n .step-label{\r\n cursor: auto;\r\n }\r\n }\r\n\r\n &:hover{\r\n &.complete:not(.disabled):not(.active){\r\n .step-connector-l, \r\n .step-connector-r, \r\n .step-icon {\r\n background: tokens.$ifxColorOcean600;\r\n &.active, \r\n &.error {\r\n background: tokens.$ifxColorEngineering300;\r\n }\r\n } \r\n .step-label {\r\n color: tokens.$ifxColorOcean600;\r\n }\r\n }\r\n }\r\n \r\n}\r\n\r\n.active-indic {\r\n width: tokens.$ifxSize200;\r\n height: tokens.$ifxSize200;\r\n border-radius: tokens.$ifxBorderRadiusRound;\r\n background: white;\r\n}\r\n\r\n.step-icon-wrapper {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n width: 100%;\r\n}\r\n\r\n.step-icon {\r\n width: tokens.$ifxSize300;\r\n height: tokens.$ifxSize300;\r\n background-color: tokens.$ifxColorEngineering300;\r\n border-radius: tokens.$ifxBorderRadiusRound;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: white;\r\n}\r\n\r\n.step-connector-r, \r\n.step-connector-l {\r\n height: 2px;\r\n min-width: tokens.$ifxSize500;\r\n flex-grow: 1;\r\n background-color: tokens.$ifxColorEngineering300;\r\n}\r\n\r\n.vertical {\r\n .step-connector-r, \r\n .step-connector-l {\r\n height: unset;\r\n min-width: unset;\r\n width: 2px;\r\n min-height: tokens.$ifxSize500;\r\n }\r\n}","import { h, \r\n Component, \r\n Listen, \r\n Prop, \r\n State, \r\n Watch } from \"@stencil/core\";\r\nimport { StepperState } from \"../interfaces\";\r\n\r\n@Component({\r\n tag: 'ifx-step',\r\n styleUrl: 'step.scss',\r\n shadow: true\r\n})\r\n\r\nexport class Step {\r\n @Prop() complete?: boolean = false;\r\n @Prop() disabled?: boolean = false;\r\n @Prop({ mutable: true }) error?: boolean = false;\r\n @Prop({ reflect: false }) lastStep: boolean = false;\r\n @Prop() stepId: number = 1;\r\n @Prop({ reflect: false }) stepperState: StepperState = { activeStep: 1, \r\n showStepNumber: false, \r\n variant: 'default', \r\n indicatorPosition: 'left' };\r\n\r\n @State() active: boolean;\r\n @State() clickable: boolean = false;\r\n\r\n @Listen('ifxChange', { target: 'document' })\r\n onStepChange(event: CustomEvent) {\r\n const previousActiveStep = event.detail.previousActiveStep;\r\n if (previousActiveStep === this.stepId && this.error) {\r\n this.clickable = true;\r\n }\r\n } \r\n\r\n @Watch('stepperState')\r\n updateCurrentStep(newStepperState) {\r\n this.active = (newStepperState.activeStep === this.stepId)\r\n }\r\n\r\n @Watch('active')\r\n updateErrorState(){\r\n if (this.active) {\r\n this.error = false;\r\n }\r\n }\r\n\r\n\r\n handleStepClick() {\r\n if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete)) {\r\n this.stepperState.setActiveStep(this.stepId, true)\r\n } \r\n }\r\n \r\n handleStepKeyDown(event: KeyboardEvent) {\r\n if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete) && event.key === 'Enter') {\r\n this.stepperState.setActiveStep(this.stepId, true)\r\n } \r\n }\r\n \r\n stopOnClickPropogation(event: Event) {\r\n if (this.disabled) {\r\n event.stopPropagation();\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div aria-current = {this.active ? 'step': false}\r\n aria-disabled = {this.active || this.complete ? false : true}\r\n onClick={ (e) => this.stopOnClickPropogation(e) }\r\n class = {`step-wrapper ${this.stepId === 1 ? 'first-step': ''} \r\n ${this.error ? 'error': ''}\r\n ${this.stepperState.variant}\r\n ${this.complete ? 'complete': ''}\r\n ${this.lastStep ? 'last-step': ''}\r\n indicator-${this.stepperState.indicatorPosition}\r\n ${this.active ? 'active' : ''}\r\n ${this.clickable ? 'clickable' : ''}\r\n ${this.disabled ? 'disabled': ''}`}>\r\n\r\n <div class = 'step-icon-wrapper'>\r\n {/* Left connector */}\r\n {this.stepperState.variant !== 'compact' && <span class = 'step-connector-l'/>}\r\n\r\n {\r\n (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) && \r\n <div class = 'step-icon'>\r\n {(this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : ''}\r\n {(this.complete && !this.active) && <ifx-icon icon='check16'></ifx-icon>}\r\n {this.active && <span class = 'active-indic'></span>}\r\n </div>\r\n }\r\n\r\n {(this.stepperState.variant !=='compact' && this.error && !this.active) && <ifx-icon icon='warningF16'></ifx-icon>}\r\n \r\n {/* Right connector */}\r\n {this.stepperState.variant !== 'compact' && <span class = {`step-connector-r ${this.active ? 'active' : ''}`}/>}\r\n </div>\r\n\r\n {\r\n /* Step labels */\r\n (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep+1))) && \r\n <div tabIndex={!this.disabled && this.complete && !this.active ? 0 : -1} \r\n class = {`step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`} \r\n onClick={() => { this.handleStepClick() }} \r\n onKeyDown={(e) => { this.handleStepKeyDown(e) }}>\r\n\r\n {(this.stepperState.variant !== 'compact') && <slot/>}\r\n\r\n {this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : ''}\r\n {this.stepperState.variant === 'compact' && <slot/>}\r\n </div>\r\n }\r\n\r\n </div>\r\n );\r\n };\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-52b7ca57.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as e,h as a,a as r}from"./p-PqnYwNKt.js";import{d as t,t as o}from"./p-DcmcuUOA.js";import{i as n}from"./p-Bw2fh5LT.js";const s=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:flex}.breadcrumb{list-style:none;padding:0px;margin:0px;display:flex;flex-direction:row;font-family:var(--ifx-font-family);font-size:0.875rem;align-items:flex-start}';const i=class{constructor(a){e(this,a)}async componentDidLoad(){if(!n(this.el)){const e=t();o("ifx-breadcrumb",await e)}const e=this.el.shadowRoot.firstChild;this.validateBreadcrumbItemStructure(e)}validateBreadcrumbItemStructure(e){if(!e){console.error("element not found");return}const a=e.querySelector("slot");if(a){const e=a.assignedNodes();for(let a=0;a<e.length;a++){const r=e[a];if(r.nodeName==="IFX-BREADCRUMB-ITEM"){const e=r;const a=e.querySelector("ifx-breadcrumb-item-label");const t=e.querySelector("ifx-dropdown-menu");if(a.hasAttribute("href")&&t){throw new Error("ifx-breadcrumb-item cannot have both a href and a dropdown menu.")}}}}}render(){return a("nav",{key:"1ac077037d44b72f6a284ace72dd43bad0b3ebeb","aria-label":"Page navigation breadcrumb"},a("ol",{key:"7192480afed229bee5c54e4d6a3454ca3eb4636f",class:"breadcrumb"},a("slot",{key:"fa901a096a659d87f3ce0d6f1c366f9e874f4e22"})))}get el(){return r(this)}};i.style=s;export{i as ifx_breadcrumb};
2	- //# sourceMappingURL=p-52b7ca57.entry.js.map

package/dist/infineon-design-system-stencil/p-52b7ca57.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["breadcrumbCss","Breadcrumb","componentDidLoad","isNestedInIfxComponent","this","el","framework","detectFramework","trackComponent","element","shadowRoot","firstChild","validateBreadcrumbItemStructure","console","error","slot","querySelector","assignedNodes","i","length","node","nodeName","breadcrumbItem","breadcrumbItemLabel","breadcrumbDropdown","hasAttribute","Error","render","h","key","class"],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=ifx-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n display: flex;\r\n}\r\n\r\n.breadcrumb {\r\n list-style: none;\r\n padding: 0px;\r\n margin: 0px;\r\n display: flex;\r\n flex-direction: row;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n font-size: tokens.$ifxFontSizeS;\r\n align-items: flex-start;\r\n //gap: tokens.$ifxSpace200; //this is where the gap comes from\r\n\r\n}\r\n\r\n// .separator {\r\n// color: tokens.$ifxColorEngineering300;\r\n// margin: 0 16px;\r\n// }","import { Component, h, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-breadcrumb',\r\n styleUrl: 'breadcrumb.scss',\r\n shadow: true\r\n})\r\nexport class Breadcrumb {\r\n @Element() el;\r\n\r\n async componentDidLoad() {\r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-breadcrumb', await framework)\r\n }\r\n const element = this.el.shadowRoot.firstChild;\r\n this.validateBreadcrumbItemStructure(element);\r\n }\r\n\r\n private validateBreadcrumbItemStructure(element: HTMLElement) {\r\n if (!element) {\r\n console.error('element not found');\r\n return;\r\n }\r\n \r\n const slot = element.querySelector('slot');\r\n if(slot) { \r\n const assignedNodes = slot.assignedNodes();\r\n \r\n for (let i = 0; i < assignedNodes.length; i++) {\r\n const node = assignedNodes[i];\r\n if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {\r\n const breadcrumbItem = node as HTMLIfxBreadcrumbItemElement;\r\n const breadcrumbItemLabel = breadcrumbItem.querySelector('ifx-breadcrumb-item-label');\r\n const breadcrumbDropdown = breadcrumbItem.querySelector('ifx-dropdown-menu');\r\n if (breadcrumbItemLabel.hasAttribute('href') && breadcrumbDropdown) {\r\n throw new Error('ifx-breadcrumb-item cannot have both a href and a dropdown menu.');\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <nav aria-label=\"Page navigation breadcrumb\">\r\n <ol class=\"breadcrumb\">\r\n <slot />\r\n </ol>\r\n </nav>\r\n );\r\n }\r\n}\r\n"],"mappings":"iIAAA,MAAMA,EAAgB,mP,MCUTC,EAAU,M,yBAGrB,sBAAMC,GACH,IAAIC,EAAuBC,KAAKC,IAAK,CACpC,MAAMC,EAAYC,IAClBC,EAAe,uBAAwBF,E,CAEzC,MAAMG,EAAUL,KAAKC,GAAGK,WAAWC,WACnCP,KAAKQ,gCAAgCH,E,CAG/B,+BAAAG,CAAgCH,GACtC,IAAKA,EAAS,CACZI,QAAQC,MAAM,qBACd,M,CAGF,MAAMC,EAAON,EAAQO,cAAc,QACnC,GAAGD,EAAM,CACP,MAAME,EAAgBF,EAAKE,gBAE3B,IAAK,IAAIC,EAAI,EAAGA,EAAID,EAAcE,OAAQD,IAAK,CAC7C,MAAME,EAAOH,EAAcC,GAC3B,GAAIE,EAAKC,WAAa,sBAAuB,CAC3C,MAAMC,EAAiBF,EACvB,MAAMG,EAAsBD,EAAeN,cAAc,6BACzD,MAAMQ,EAAqBF,EAAeN,cAAc,qBACxD,GAAIO,EAAoBE,aAAa,SAAWD,EAAoB,CAClE,MAAM,IAAIE,MAAM,mE,KAO1B,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,8BACdD,EAAI,MAAAC,IAAA,2CAAAC,MAAM,cACRF,EAAQ,QAAAC,IAAA,8C","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-52c43df7.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["filterBarCss","FilterBar","constructor","hostRef","this","selectedOptions","showAllFilters","maxShownFilters","showMoreFiltersButton","handleMoreFiltersClick","updateVisibleSlots","handleResetEvent","filterSearchSlot","_a","el","shadowRoot","querySelector","HTMLSlotElement","filterSearchSlottedElements","assignedElements","flatten","forEach","filterSearchWrapper","filterSearch","searchField","querySelectorAll","length","searchFieldElement","value","ifxTopbarFilterChange","emit","handleSearchChange","event","handleTopbarFilterChange","handleFilterSelect","newSelectedOptions","type","filterName","filterValue","detail","existingOptionIndex","findIndex","option","filterValues","push","connectedCallback","addEventListener","window","componentWillUnload","removeEventListener","componentWillLoad","visibleSlots","Number","MAX_SAFE_INTEGER","render","safeVisibleSlots","Math","max","actualNumberOfComponents","slotsToShow","min","slots","Array","from","_","i","h","class","name","Host","key","onClick","disabled","variant","size","target","theme","icon"],"sources":["src/components/table-advanced-version/filter-bar/filter-bar.scss?tag=ifx-filter-bar&encapsulation=shadow","src/components/table-advanced-version/filter-bar/filter-bar.tsx"],"sourcesContent":["/* filter-bar.scss */\r\n@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n:host {\r\n display: block;\r\n width: 100%;\r\n}\r\n\r\n.search-container {\r\n display: flex;\r\n width: calc(100% - 48px); /* Adjust width to account for padding */\r\n padding-left: 24px;\r\n padding-right: 24px; flex-direction: row;\r\n align-items: flex-start;\r\n margin-bottom: tokens.$ifxSpace200;\r\n}\r\n\r\n.components-container {\r\n display: flex;\r\n width: calc(100% - 48px); /* Adjust width to account for padding */\r\n padding-left: 24px;\r\n padding-right: 24px; flex-direction: row;\r\n align-items: flex-end;\r\n align-content:flex-end;\r\n flex-wrap: wrap;\r\n gap: tokens.$ifxSpace200;\r\n}\r\n\r\n.filter-slot-wrapper {\r\n flex-grow: 1;\r\n flex-basis: 100%; \r\n max-width: 100%; \r\n }\r\n\r\n@media (max-width: 1024px) { /* Adjust based on your breakpoints for mid/small screens */\r\n .more-filters-wrapper {\r\n order: 3; /* Keeps the button at the end/new row */\r\n width: 100%; /* Takes full width to allow centering */\r\n display: flex; /* Enables flexbox properties */\r\n justify-content: center; /* Centers the button horizontally */\r\n padding-top: tokens.$ifxSpace200; /* Adds space above the button, adjust as needed */\r\n }\r\n }\r\n\r\n\r\n @media (min-width: 720px) and (max-width: 1024px) {\r\n .filter-slot-wrapper {\r\n flex-basis: calc((100% - tokens.$ifxSpace200) / 2);\r\n max-width: calc((100% - tokens.$ifxSpace200) / 2);\r\n }\r\n \r\n\r\n}\r\n\r\n @media (min-width: 1025px) {\r\n .filter-slot-wrapper {\r\n flex-basis: auto; \r\n max-width: 200px; \r\n }\r\n\r\n ::slotted([slot=\"filter-search\"]) {\r\n max-width: 828px;\r\n }\r\n }\r\n \r\n ::slotted([slot=\"filter-search\"]) {\r\n flex-grow: 1;\r\n flex-basis: 100%;\r\n width: 100%; \r\n }","// FilterBar.tsx\r\nimport { Component, h, Host, Element, Event, EventEmitter, State, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-filter-bar',\r\n styleUrl: 'filter-bar.scss',\r\n shadow: true\r\n})\r\nexport class FilterBar {\r\n @Element() el: HTMLElement;\r\n @State() selectedOptions: Array<{ filterName: string, filterValues: [string], type: string }> = [];\r\n @Event() ifxTopbarFilterChange: EventEmitter;\r\n @State() showAllFilters: boolean = false;\r\n @Prop() maxShownFilters: number = 4; // Default to 4, can be overridden by parent component\r\n @State() visibleSlots: number;\r\n@Prop() showMoreFiltersButton: boolean = true;\r\n\r\n /* If the component is ever removed and then reattached to the DOM, \r\nconnectedCallback ensures that the event listeners are properly set up again */\r\n connectedCallback() {\r\n this.el.addEventListener('ifxFilterSelect', this.handleTopbarFilterChange);\r\n this.el.addEventListener('ifxFilterSearchChange', this.handleSearchChange);\r\n window.addEventListener('ifxResetFiltersEvent', this.handleResetEvent);\r\n }\r\n\r\n componentWillUnload() {\r\n this.el.removeEventListener('ifxFilterSelect', this.handleTopbarFilterChange);\r\n this.el.removeEventListener('ifxFilterSearchChange', this.handleSearchChange);\r\n window.removeEventListener('ifxResetFiltersEvent', this.handleResetEvent);\r\n }\r\n\r\n \r\n componentWillLoad() {\r\n this.updateVisibleSlots();\r\n }\r\n\r\n// Modify updateVisibleSlots to use showAllFilters to determine the number of slots\r\nupdateVisibleSlots() {\r\n this.visibleSlots = this.showAllFilters ? Number.MAX_SAFE_INTEGER : this.maxShownFilters;\r\n }\r\n\r\n handleMoreFiltersClick = () => {\r\n this.showAllFilters = true;\r\n this.updateVisibleSlots(); // Recalculate visible slots based on the new state\r\n }\r\n\r\n handleResetEvent = () => {\r\n const filterSearchSlot = this.el.shadowRoot?.querySelector('slot[name=\"filter-search\"]');\r\n if (filterSearchSlot instanceof HTMLSlotElement) { // Ensure it's treated as HTMLSlotElement\r\n const filterSearchSlottedElements = filterSearchSlot.assignedElements({ flatten: true });\r\n \r\n filterSearchSlottedElements.forEach((filterSearchWrapper: HTMLElement) => {\r\n const filterSearch = filterSearchWrapper.querySelector('ifx-filter-search');\r\n\r\n const searchField = filterSearch.shadowRoot.querySelectorAll('ifx-search-field')\r\n\r\n if (searchField.length > 0) {\r\n searchField.forEach((searchFieldElement: any) => {\r\n searchFieldElement.value = '';\r\n });\r\n }\r\n });\r\n }\r\n\r\n this.selectedOptions = [];\r\n\r\n // Emit the change to inform any parent components that the filters have been reset\r\n this.ifxTopbarFilterChange.emit(this.selectedOptions);\r\n }\r\n\r\n\r\n handleSearchChange = (event: CustomEvent) => {\r\n this.handleTopbarFilterChange(event);\r\n }\r\n\r\n handleFilterSelect = (event: CustomEvent) => {\r\n this.handleTopbarFilterChange(event);\r\n }\r\n\r\n handleTopbarFilterChange = (event: CustomEvent) => {\r\n const newSelectedOptions = [...this.selectedOptions];\r\n\r\n if (event.type === 'ifxFilterSearchChange') {\r\n const { filterName, filterValue } = event.detail;\r\n const existingOptionIndex = newSelectedOptions.findIndex(option => option.filterName === filterName);\r\n\r\n if (existingOptionIndex !== -1) {\r\n // If an existing filter is found, update its value\r\n newSelectedOptions[existingOptionIndex].filterValues = [filterValue];\r\n } else {\r\n newSelectedOptions.push({ filterName: filterName, filterValues: [filterValue], type: 'text' });\r\n }\r\n } else if (event.type === 'ifxFilterSelect') {\r\n const { filterName, filterValues, type } = event.detail;\r\n const existingOptionIndex = newSelectedOptions.findIndex(option => option.filterName === filterName);\r\n\r\n if (existingOptionIndex !== -1) {\r\n newSelectedOptions[existingOptionIndex].filterValues = filterValues;\r\n newSelectedOptions[existingOptionIndex].type = type; // Update type based on the number of selected items\r\n } else {\r\n newSelectedOptions.push({ filterName: filterName, filterValues: filterValues, type: type });\r\n }\r\n }\r\n\r\n this.selectedOptions = newSelectedOptions;\r\n this.ifxTopbarFilterChange.emit(this.selectedOptions);\r\n }\r\n\r\n render() {\r\n const safeVisibleSlots = Math.max(0, this.visibleSlots);\r\n\r\n const actualNumberOfComponents = this.el.querySelectorAll('ifx-set-filter').length; \r\n // Calculate slotsToShow safely\r\n const slotsToShow = Math.min(safeVisibleSlots, actualNumberOfComponents, Number.MAX_SAFE_INTEGER);\r\n\r\n const slots = Array.from({ length: slotsToShow }, (_, i) => (\r\n <div class=\"filter-slot-wrapper\">\r\n <slot name={`filter-component-${i + 1}`}></slot>\r\n </div>\r\n ));\r\n\r\n return (\r\n <Host>\r\n <div class=\"search-container\">\r\n <slot name=\"filter-search\"></slot> {/* Directly place the search slot here */}\r\n </div>\r\n <div class=\"components-container\">\r\n {slots.length > 0 ? slots : <slot name=\"filter-component\"></slot>}\r\n {this.showMoreFiltersButton && !this.showAllFilters && (\r\n <div class=\"more-filters-wrapper\" onClick={this.handleMoreFiltersClick}>\r\n <ifx-button type=\"button\" disabled={false} variant=\"tertiary\" size=\"m\" target=\"_blank\" theme=\"default\" full-width=\"false\">\r\n <ifx-icon icon=\"filter-16\"></ifx-icon>More filters\r\n </ifx-button>\r\n </div>\r\n )}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-56c892b7.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["checkboxGroupCss","CheckboxGroup","constructor","hostRef","this","errorStates","Map","alignment","groupLabelText","required","hasErrors","handleSlotChange","initializeState","handleCheckboxError","event","checkbox","target","tagName","toLowerCase","set","detail","updateHasErrors","setGroupError","error","checkboxes","Array","from","el","querySelectorAll","forEach","componentWillLoad","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","clear","has","values","some","render","h","key","class","showGroupLabel","size","onSlotchange","showCaption","showCaptionIcon","icon","captionText"],"sources":["src/components/checkbox-group/checkbox-group.scss?tag=ifx-checkbox-group&encapsulation=shadow","src/components/checkbox-group/checkbox-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n.checkbox-group-container {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.checkbox-group {\r\n display: flex;\r\n gap: tokens.$ifxSpace100;\r\n\r\n &.horizontal {\r\n flex-direction: row;\r\n column-gap: tokens.$ifxSpace150;\r\n }\r\n\r\n &.vertical {\r\n flex-direction: column;\r\n row-gap: tokens.$ifxSpace150;\r\n }\r\n}\r\n\r\n.group-label {\r\n font-size: tokens.$ifxFontSizeM;\r\n color: tokens.$ifxColorBaseBlack;\r\n line-height: tokens.$ifxLineHeightM;\r\n font-weight: tokens.$ifxFontWeightRegular;\r\n margin-bottom: tokens.$ifxSpace100;\r\n text-align: left;\r\n text-underline-position: from-font;\r\n text-decoration-skip-ink: none;\r\n}\r\n\r\n.group-label .required {\r\n color: tokens.$ifxColorEngineering500;\r\n margin-left: tokens.$ifxSpace50;\r\n}\r\n\r\n.group-label .required.error {\r\n color: tokens.$ifxColorRed500;\r\n}\r\n\r\n.caption {\r\n margin-top: tokens.$ifxSpace100;\r\n align-self: flex-start;\r\n display: flex;\r\n width: 100%;\r\n column-gap: tokens.$ifxSpace100;\r\n justify-content: space-between;\r\n align-items: center;\r\n\r\n &.default {\r\n color: tokens.$ifxColorBaseBlack;\r\n }\r\n\r\n &.error {\r\n color: tokens.$ifxColorRed500;\r\n }\r\n}\r\n\r\n.caption-text {\r\n font-weight: tokens.$ifxFontWeightRegular;\r\n font-size: tokens.$ifxFontSizeXs;\r\n line-height: tokens.$ifxLineHeightXs;\r\n flex: 1;\r\n text-align: left;\r\n text-underline-position: from-font;\r\n text-decoration-skip-ink: none;\r\n}\r\n\r\n.caption-icon {\r\n flex:0;\r\n display: flex;\r\n}","import { Component, State, Prop, h, Element, Listen, Method } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-checkbox-group',\r\n styleUrl: 'checkbox-group.scss',\r\n shadow: true,\r\n // formAssociated: true\r\n})\r\n\r\nexport class CheckboxGroup {\r\n private errorStates: Map<HTMLElement, boolean> = new Map();\r\n\r\n @Element() el: HTMLElement;\r\n @Prop() alignment: 'horizontal' | 'vertical' = 'vertical';\r\n @Prop() size: string;\r\n @Prop() showGroupLabel: boolean;\r\n @Prop() groupLabelText: string = 'Group Label Text';\r\n @Prop() showCaption: boolean;\r\n @Prop() captionText: string;\r\n @Prop() showCaptionIcon: boolean;\r\n @Prop() required: boolean = false;\r\n @State() hasErrors: boolean = false;\r\n\r\n @Listen('ifxError')\r\n handleCheckboxError(event: CustomEvent) {\r\n const checkbox = event.target as HTMLElement;\r\n if (checkbox.tagName.toLowerCase() === 'ifx-checkbox') {\r\n this.errorStates.set(checkbox, event.detail);\r\n this.updateHasErrors();\r\n }\r\n }\r\n\r\n // Method to set the error state of all checkboxes in the group\r\n @Method()\r\n async setGroupError(error: boolean) {\r\n const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\r\n checkboxes.forEach((checkbox) => {\r\n (checkbox as any).error = error;\r\n });\r\n }\r\n\r\n componentWillLoad() {\r\n this.initializeState();\r\n\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-checkbox-group', await framework)\r\n }\r\n }\r\n\r\n handleSlotChange = () => {\r\n this.initializeState();\r\n };\r\n\r\n private initializeState() {\r\n this.errorStates.clear();\r\n const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\r\n checkboxes.forEach((checkbox) => {\r\n if (!this.errorStates.has(checkbox)) {\r\n this.errorStates.set(checkbox, (checkbox as any).error || false);\r\n }\r\n });\r\n this.updateHasErrors();\r\n }\r\n\r\n private updateHasErrors() {\r\n this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\r\n }\r\n\r\n render() {\r\n return (\r\n <div class='checkbox-group-container'>\r\n {this.showGroupLabel && (\r\n <div class=\"group-label\">\r\n {this.groupLabelText}\r\n {this.required && <span class={`required ${this.hasErrors ? 'error' : ''}`}>*</span>}\r\n </div>\r\n )}\r\n <div class={`checkbox-group ${this.alignment} ${this.size}`}>\r\n <slot onSlotchange={this.handleSlotChange}></slot>\r\n </div>\r\n {this.showCaption ? (\r\n <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\r\n {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\r\n </ifx-icon></div> : ''}\r\n <div class='caption-text'>{this.captionText}</div>\r\n </div>) : ''}\r\n </div>\r\n );\r\n }\r\n}"],"mappings":"iIAAA,MAAMA,EAAmB,u6B,MCYZC,EAAa,MAP1B,WAAAC,CAAAC,G,UAQUC,KAAAC,YAAyC,IAAIC,IAG7CF,KAASG,UAA8B,WAGvCH,KAAcI,eAAW,mBAIzBJ,KAAQK,SAAY,MACnBL,KAASM,UAAY,MAgC9BN,KAAgBO,iBAAG,KACjBP,KAAKQ,iBAAiB,CAuCzB,CArEC,mBAAAC,CAAoBC,GAClB,MAAMC,EAAWD,EAAME,OACvB,GAAID,EAASE,QAAQC,gBAAkB,eAAgB,CACrDd,KAAKC,YAAYc,IAAIJ,EAAUD,EAAMM,QACrChB,KAAKiB,iB,EAMT,mBAAMC,CAAcC,GAClB,MAAMC,EAAaC,MAAMC,KAAKtB,KAAKuB,GAAGC,iBAAiB,iBACvDJ,EAAWK,SAASd,IACjBA,EAAiBQ,MAAQA,CAAK,G,CAInC,iBAAAO,GACE1B,KAAKQ,iB,CAIP,sBAAMmB,GACJ,IAAIC,EAAuB5B,KAAKuB,IAAK,CACnC,MAAMM,EAAYC,IAClBC,EAAe,2BAA4BF,E,EAQvC,eAAArB,GACNR,KAAKC,YAAY+B,QACjB,MAAMZ,EAAaC,MAAMC,KAAKtB,KAAKuB,GAAGC,iBAAiB,iBACvDJ,EAAWK,SAASd,IAClB,IAAKX,KAAKC,YAAYgC,IAAItB,GAAW,CACnCX,KAAKC,YAAYc,IAAIJ,EAAWA,EAAiBQ,OAAS,M,KAG9DnB,KAAKiB,iB,CAGC,eAAAA,GACNjB,KAAKM,UAAYe,MAAMC,KAAKtB,KAAKC,YAAYiC,UAAUC,MAAMhB,GAAUA,G,CAGzE,MAAAiB,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,4BACRvC,KAAKwC,gBACJH,EAAK,OAAAC,IAAA,2CAAAC,MAAM,eACRvC,KAAKI,eACLJ,KAAKK,UAAYgC,EAAA,QAAAC,IAAA,2CAAMC,MAAO,YAAYvC,KAAKM,UAAY,QAAU,MAAc,MAGxF+B,EAAK,OAAAC,IAAA,2CAAAC,MAAO,kBAAkBvC,KAAKG,aAAaH,KAAKyC,QACnDJ,EAAA,QAAAC,IAAA,2CAAMI,aAAc1C,KAAKO,oBAE1BP,KAAK2C,YACJN,EAAA,OAAKE,MAAO,WAAWvC,KAAKM,UAAY,QAAU,aAC/CN,KAAK4C,gBAAkBP,EAAK,OAAAE,MAAM,gBAAeF,EAAU,YAAAQ,KAAK,eAC7C,GACpBR,EAAA,OAAKE,MAAM,gBAAgBvC,KAAK8C,cACxB,G","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-57f89e06.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["sidebarCss","ACTIVE","ACTIVE_SECTION","SIDEBAR_ITEM","Sidebar","constructor","hostRef","this","applicationName","initialCollapse","showFooter","showHeader","termsOfUse","imprint","privacyPolicy","target","currentYear","Date","getFullYear","copyrightText","internalTermsofUse","internalImprint","internalPrivacyPolicy","internalShowFooter","activeItem","collapsible","collapsed","hideMenuLabel","isCollapsed","handleHideMenuClick","toggleCollapse","handleHideMenuKeyDown","event","key","preventDefault","expandActiveItems","expandRecursively","async","parent","isItemExpandable","active","currRes","children","getSidebarMenuItems","i","length","Math","max","expandMenu","topLevelItems","el","adjustTopBorder","tagName","shadowRoot","querySelector","classList","add","contains","allIfxTitles","querySelectorAll","forEach","element","nextSibling","nextElementSibling","addPaddingToTheLastItem","sidebarItem","sidebarChildItems","childItem","childNavItem","getNavItem","isChildItemExpandable","handleClassList","adjustItemsPadding","sidebarItems","toUpperCase","isFirstSidebarItemExpandable","previousSidebarItem","previousSidebarNavItem","sidebarNavItem","isSidebarItemExpandable","componentDidLoad","framework","detectFramework","trackComponent","setInitialActiveItem","applyActiveSectionToParent","updateCollapsedState","_a","handleItem","firstActiveFoundInGroup","item","isActive","handleBorderIndicatorDisplacement","setAttribute","hasChildren","hasActiveChild","clickedItemSection","getActiveItemSection","isOpen","containsActiveSection","type","className","clickedItem","activeMenuItemSection","isMenu","removeActiveClassesRecursively","removeClasses","root","querySidebarItems","child","remove","getAttribute","menuItem","handleSidebarItemInteraction","detail","subMenus","menu","menuItemSection","iteratedComponent","activeAttributeValue","handleSidebarItemActivated","parentElement","componentWillLoad","trim","Boolean","handleCollapsibleChange","_newValue","forceUpdate","_b","call","now","toString","ifxSidebarCollapseChange","emit","collapse","expand","handleCollapsedPropChange","newValue","style","setProperty","setSidebarItemAttributes","removeProperty","allSidebarItems","icon","removeAttribute","render","h","class","width","height","viewBox","fill","xmlns","d","id","onClick","onKeyDown","tabIndex","role","href"],"sources":["src/components/navigation/sidebar/sidebar.scss?tag=ifx-sidebar&encapsulation=shadow","src/components/navigation/sidebar/sidebar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n:host {\r\n height: 100%;\r\n display: inline-flex;\r\n}\r\n\r\n.sidebar__container {\r\n box-sizing: border-box;\r\n display: inline-flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n padding: 0px;\r\n background-color: tokens.$ifxColorBaseWhite;\r\n border-right: 1px solid #EEEDED;\r\n width: 264px;\r\n height: 100%;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n &--collapsed {\r\n width: tokens.$ifxSize600;\r\n\r\n .sidebar__hide-menu,\r\n .sidebar__nav-bar,\r\n .sidebar__nav-container {\r\n padding: tokens.$ifxSpace150 tokens.$ifxSpace100 !important;\r\n }\r\n\r\n\r\n .sidebar__nav-bar-logo-text,\r\n .sidebar__hide-menu-text {\r\n display: none !important;\r\n }\r\n\r\n .sidebar__footer-container {\r\n display: none !important;\r\n }\r\n\r\n .sidebar__nav-bar {\r\n\r\n .sidebar__nav-bar-logo {\r\n svg {\r\n width: tokens.$ifxSize400 !important;\r\n height: auto !important;\r\n }\r\n\r\n .sidebar__nav-bar-logo-text {\r\n display: none !important;\r\n }\r\n }\r\n }\r\n\r\n .sidebar__hide-menu {\r\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\r\n justify-content: center;\r\n }\r\n }\r\n\r\n & .sidebar__top-container {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n padding: 0px;\r\n flex: 1 1 auto;\r\n order: 0;\r\n z-index: 0;\r\n width: 100%;\r\n overflow-y: auto;\r\n\r\n //max-height: 440px;\r\n //overflow-y: auto;\r\n\r\n & .sidebar__nav-bar {\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n padding: 12px 32px;\r\n background-color: tokens.$ifxColorBaseWhite;\r\n flex: none;\r\n order: 0;\r\n flex-grow: 0;\r\n width: 100%;\r\n\r\n & .sidebar__nav-bar-logo {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: flex-start;\r\n padding: 0px;\r\n gap: tokens.$ifxSpace200;\r\n flex: none;\r\n order: 0;\r\n flex-grow: 0;\r\n\r\n & .sidebar__nav-bar-logo-img {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 0px;\r\n flex: none;\r\n order: 0;\r\n flex-grow: 0;\r\n\r\n & svg {\r\n width: 91px;\r\n height: tokens.$ifxSize500;\r\n }\r\n }\r\n\r\n & .sidebar__nav-bar-logo-text {\r\n font-style: normal;\r\n font-weight: tokens.$ifxFontWeightSemibold;\r\n font-size: tokens.$ifxFontSizeM;\r\n line-height: tokens.$ifxLineHeightM;\r\n display: flex;\r\n align-items: center;\r\n color: tokens.$ifxColorBaseBlack;\r\n flex: none;\r\n order: 1;\r\n flex-grow: 0;\r\n white-space: pre-wrap;\r\n word-wrap: break-word;\r\n overflow-wrap: anywhere;\r\n }\r\n }\r\n }\r\n\r\n & .sidebar__nav-container {\r\n scrollbar-gutter: stable;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n padding: 12px 32px;\r\n flex: 1 1 auto;\r\n order: 1;\r\n width: 100%;\r\n // overflow-y: auto;\r\n\r\n & ::slotted(*) {\r\n width: 100%;\r\n }\r\n }\r\n }\r\n\r\n & .sidebar__footer-container {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-end;\r\n align-items: center;\r\n padding: 0px 32px;\r\n flex: none;\r\n order: 1;\r\n align-self: stretch;\r\n flex-grow: 1;\r\n z-index: 1;\r\n\r\n & .sidebar__footer-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n padding: 24px 0px;\r\n gap: tokens.$ifxSpace200;\r\n border-top: 1px solid #EEEDED;\r\n flex: none;\r\n order: 0;\r\n flex-grow: 0;\r\n width: 100%;\r\n\r\n\r\n & .sidebar__footer-wrapper-top-links {\r\n display: flex;\r\n align-items: flex-start;\r\n padding: 0px;\r\n gap: 12px;\r\n flex: none;\r\n order: 0;\r\n align-self: stretch;\r\n flex-grow: 0;\r\n flex-wrap: wrap;\r\n\r\n & a {\r\n font: tokens.$ifxBodyBody04;\r\n display: flex;\r\n text-decoration: none;\r\n align-items: center;\r\n color: tokens.$ifxColorBaseBlack;\r\n flex: none;\r\n flex-grow: 0;\r\n\r\n &:hover {\r\n color: #08665C;\r\n }\r\n\r\n &:focus {\r\n outline: none;\r\n color: #08665C;\r\n }\r\n }\r\n }\r\n\r\n & .sidebar__footer-wrapper-bottom-links {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n\r\n & span {\r\n font: tokens.$ifxBodyBody04;\r\n text-decoration: none;\r\n color: tokens.$ifxColorEngineering500;\r\n flex: none;\r\n order: 1;\r\n flex-grow: 0;\r\n white-space: pre-wrap;\r\n word-wrap: break-word;\r\n overflow-wrap: anywhere;\r\n\r\n &:hover {\r\n cursor: initial;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n .sidebar__hide-menu {\r\n display: flex;\r\n align-items: center;\r\n padding: tokens.$ifxSpace150 tokens.$ifxSpace400;\r\n box-sizing: border-box;\r\n width: 100%;\r\n cursor: pointer;\r\n border-top: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\r\n border-bottom: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\r\n background-color: tokens.$ifxColorBaseWhite;\r\n gap: tokens.$ifxSpace200;\r\n\r\n &:hover {\r\n background-color: tokens.$ifxColorEngineering100;\r\n }\r\n\r\n &:focus {\r\n outline: tokens.$ifxBorderWidth25 solid tokens.$ifxColorOcean500;\r\n outline-offset: - tokens.$ifxBorderWidth25;\r\n }\r\n\r\n &-icon {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: tokens.$ifxSize300;\r\n height: tokens.$ifxSize300;\r\n flex-shrink: 0;\r\n\r\n ifx-icon {\r\n width: tokens.$ifxSize200;\r\n height: tokens.$ifxSize200;\r\n color: tokens.$ifxColorBaseBlack;\r\n }\r\n }\r\n\r\n &-text {\r\n font-style: normal;\r\n font-weight: tokens.$ifxFontWeightRegular;\r\n font-size: tokens.$ifxFontSizeM;\r\n line-height: tokens.$ifxLineHeightM;\r\n color: tokens.$ifxColorBaseBlack;\r\n }\r\n }\r\n}\r\n","import { Component, h, Element, Prop, State, Listen, Method, Watch, Event, EventEmitter } from '@stencil/core';\r\nimport { trackComponent } from '../../../global/utils/tracking';\r\nimport { detectFramework } from '../../../global/utils/framework-detection';\r\n\r\nconst ACTIVE = 'active';\r\nconst ACTIVE_SECTION = 'active-section';\r\nconst SIDEBAR_ITEM = '.sidebar__nav-item';\r\n\r\n@Component({\r\n tag: 'ifx-sidebar',\r\n styleUrl: 'sidebar.scss',\r\n shadow: true\r\n})\r\n\r\nexport class Sidebar {\r\n @Element() el;\r\n @Prop() applicationName: string = ''\r\n @Prop() initialCollapse: boolean = true\r\n @Prop() showFooter: boolean = true\r\n @Prop() showHeader: boolean = true;\r\n @Prop() termsOfUse: string = \"#\"\r\n @Prop() imprint: string = \"#\"\r\n @Prop() privacyPolicy: string = \"#\"\r\n @Prop() target: string = \"_blank\"\r\n @State() currentYear: number = new Date().getFullYear()\r\n @Prop() copyrightText: string = '© 1999 - ' + this.currentYear + ' Infineon Technologies AG'\r\n @State() internalTermsofUse: string = \"\"\r\n @State() internalImprint: string = \"\"\r\n @State() internalPrivacyPolicy: string = \"\"\r\n @State() internalShowFooter: boolean = true\r\n\r\n @State() activeItem: HTMLElement | null = null;\r\n @Prop() collapsible: boolean = false;\r\n @Prop() collapsed: boolean = false; // New property for initial collapsed state\r\n @Prop() hideMenuLabel: string = \"Hide Menu\"; // New property for hide menu label\r\n @State() isCollapsed: boolean = false;\r\n\r\n @Event({ bubbles: true, composed: true }) ifxSidebarCollapseChange: EventEmitter<{ collapsed: boolean }>;\r\n\r\n expandActiveItems(){\r\n const expandRecursively = async (parent) => {\r\n if(await parent.isItemExpandable() !== true){\r\n if(parent.active) return 1;\r\n return 0;\r\n }\r\n let currRes = 0;\r\n const children = this.getSidebarMenuItems(parent);\r\n for(let i = 0; i < children.length; i++){\r\n currRes = Math.max(currRes, await expandRecursively(children[i]));\r\n }\r\n if(currRes > 0){\r\n if(currRes == 1){\r\n parent.expandMenu(false);\r\n }else{\r\n parent.expandMenu(true);\r\n }\r\n }\r\n\r\n return (currRes ? currRes+1 : 0);\r\n }\r\n\r\n const topLevelItems = this.getSidebarMenuItems(this.el);\r\n for(let i = 0; i < topLevelItems.length; i++){\r\n expandRecursively(topLevelItems[i])\r\n }\r\n }\r\n\r\n adjustTopBorder() {\r\n const children = this.el.children;\r\n if(!children.length) return;\r\n if(children[0].tagName === 'IFX-SIDEBAR-TITLE'){\r\n children[0].shadowRoot.querySelector('.sidebar__title').classList.add('no-top-border')\r\n }\r\n\r\n if(children[0].tagName === 'IFX-SIDEBAR-ITEM' && children[0].shadowRoot.querySelector('div > a').classList.contains('header__section')){\r\n children[0].shadowRoot.querySelector('div > a').classList.add('no-top-border')\r\n }\r\n\r\n const allIfxTitles = this.el.querySelectorAll('ifx-sidebar-title');\r\n allIfxTitles.forEach(element => {\r\n const nextSibling = element.nextElementSibling;\r\n if(nextSibling && nextSibling.tagName === 'IFX-SIDEBAR-ITEM' && nextSibling.shadowRoot.querySelector('div > a').classList.contains('header__section')){\r\n nextSibling.shadowRoot.querySelector('div > a').classList.add('no-top-border')\r\n }\r\n });\r\n }\r\n\r\n async addPaddingToTheLastItem(sidebarItem) {\r\n const sidebarChildItems = this.getSidebarMenuItems(sidebarItem)\r\n\r\n for(let i = 0; i < sidebarChildItems.length; i++){\r\n\r\n const childItem = sidebarChildItems[i];\r\n const childNavItem = this.getNavItem(childItem.shadowRoot);\r\n const isChildItemExpandable = await childItem.isItemExpandable();\r\n\r\n if(isChildItemExpandable) {\r\n this.addPaddingToTheLastItem(childItem);\r\n }\r\n\r\n if(i === sidebarChildItems.length-1){\r\n this.handleClassList(childNavItem, 'add', 'extra-padding__bottom');\r\n }\r\n }\r\n }\r\n\r\n async adjustItemsPadding() {\r\n const sidebarItems = this.el.children;\r\n\r\n if(sidebarItems.length === 0) return;\r\n\r\n // Processing first item\r\n if(sidebarItems[0].tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM') {\r\n const isFirstSidebarItemExpandable = sidebarItems[0].isItemExpandable();\r\n if(isFirstSidebarItemExpandable) {\r\n this.addPaddingToTheLastItem(sidebarItems[0]);\r\n }\r\n }\r\n\r\n // Processing remaining items\r\n for(let i = 1; i < sidebarItems.length; i++){\r\n\r\n const sidebarItem = sidebarItems[i];\r\n const previousSidebarItem = sidebarItems[i-1];\r\n const previousSidebarNavItem = this.getNavItem(previousSidebarItem.shadowRoot);\r\n\r\n if(sidebarItem.tagName.toUpperCase() === 'IFX-SIDEBAR-TITLE') {\r\n\r\n if(previousSidebarItem.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM' && previousSidebarNavItem && !this.handleClassList(previousSidebarNavItem, 'contains', 'header__section')) {\r\n this.handleClassList(previousSidebarNavItem, 'add', 'extra-padding__bottom');\r\n }\r\n\r\n } else if(sidebarItem.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM') {\r\n\r\n const sidebarNavItem = this.getNavItem(sidebarItem.shadowRoot);\r\n\r\n if(previousSidebarItem.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM' && previousSidebarNavItem && !this.handleClassList(previousSidebarNavItem, 'contains', 'header__section') && this.handleClassList(sidebarNavItem, 'contains', 'header__section')) {\r\n this.handleClassList(previousSidebarNavItem, 'add', 'extra-padding__bottom');\r\n }\r\n\r\n const isSidebarItemExpandable = await sidebarItem.isItemExpandable();\r\n\r\n if(isSidebarItemExpandable) {\r\n this.addPaddingToTheLastItem(sidebarItem);\r\n }\r\n }\r\n }\r\n\r\n }\r\n\r\n async componentDidLoad() {\r\n const framework = detectFramework();\r\n trackComponent('ifx-sidebar', await framework)\r\n this.adjustTopBorder();\r\n this.setInitialActiveItem();\r\n if(!this.initialCollapse){\r\n this.expandActiveItems();\r\n }\r\n this.adjustItemsPadding();\r\n this.applyActiveSectionToParent(this.el);\r\n\r\n if (this.isCollapsed) {\r\n this.updateCollapsedState();\r\n }\r\n }\r\n\r\n getSidebarMenuItems(el = this.el) {\r\n const sidebarItems = el.querySelectorAll('ifx-sidebar-item');\r\n if (sidebarItems.length === 0) {\r\n return el.shadowRoot?.querySelectorAll('ifx-sidebar-item');\r\n }\r\n return sidebarItems;\r\n }\r\n\r\n setInitialActiveItem() {\r\n const handleItem = (parent) => {\r\n const children = this.getSidebarMenuItems(parent);\r\n let firstActiveFoundInGroup = false;\r\n\r\n children?.forEach(item => {\r\n // If the item is active and it's the first active one in its group\r\n if (this.isActive(item) && !firstActiveFoundInGroup) {\r\n firstActiveFoundInGroup = true;\r\n this.handleBorderIndicatorDisplacement(item);\r\n }\r\n // If the item is active but it's not the first one in its group\r\n else if (this.isActive(item) && firstActiveFoundInGroup) {\r\n item.setAttribute('active', 'false'); // Set the 'active' attribute to 'false'\r\n }\r\n\r\n\r\n // If the clicked item is a menu and doesn't have any active children\r\n if (this.hasChildren(item.shadowRoot) && !this.hasActiveChild(item.shadowRoot)) {\r\n const clickedItemSection = this.getActiveItemSection(item);\r\n this.handleClassList(clickedItemSection, 'remove', 'active-section');\r\n }\r\n // If clickedItem is an opened menu and it contains another menu with 'active-section'\r\n if (this.hasChildren(item.shadowRoot) && this.isOpen(item.shadowRoot) && this.containsActiveSection(item)) {\r\n const clickedItemSection = this.getActiveItemSection(item);\r\n this.handleClassList(clickedItemSection, 'remove', 'active-section');\r\n }\r\n\r\n // Recursive call for child items\r\n if (this.hasChildren(item.shadowRoot)) {\r\n handleItem(item.shadowRoot);\r\n }\r\n });\r\n }\r\n // Start with the top-level items\r\n const topLevelItems = this.getSidebarMenuItems(this.el);\r\n topLevelItems.forEach(handleItem);\r\n }\r\n\r\n\r\n handleClassList(el, type, className) {\r\n el.classList[type](className)\r\n if (type === 'contains') {\r\n return el.classList.contains(className)\r\n }\r\n }\r\n\r\n\r\n getActiveItemSection(item) {\r\n return this.getNavItem(item.shadowRoot);\r\n }\r\n\r\n\r\n getNavItem(el) {\r\n return el?.querySelector('.sidebar__nav-item')\r\n }\r\n\r\n hasChildren(el) {\r\n return el?.querySelector('.item__arrow-wrapper') !== null ? true : false;\r\n }\r\n\r\n\r\n handleBorderIndicatorDisplacement(clickedItem) {\r\n // Recursive function to handle each item\r\n const handleItem = (item) => {\r\n // Check if current item is active or the one that was clicked\r\n const isActive = this.isActive(item) || item === clickedItem;\r\n\r\n if (isActive) {\r\n const activeMenuItemSection = this.getActiveItemSection(item);\r\n const isMenu = this.hasChildren(activeMenuItemSection);\r\n\r\n if (isMenu) {\r\n this.handleClassList(activeMenuItemSection, 'add', 'active-section');\r\n }\r\n }\r\n\r\n // Recursive call for child items\r\n const children = this.getSidebarMenuItems(item);\r\n children.forEach(handleItem);\r\n };\r\n\r\n // Start with the top-level items\r\n const topLevelItems = this.getSidebarMenuItems(this.el);\r\n topLevelItems.forEach(handleItem);\r\n }\r\n\r\n\r\n removeActiveClassesRecursively() {\r\n const removeClasses = (root) => {\r\n const children = this.querySidebarItems(root);\r\n children.forEach((child) => {\r\n const sidebarItem = child.shadowRoot.querySelector(SIDEBAR_ITEM);\r\n sidebarItem.classList.remove(ACTIVE_SECTION);\r\n sidebarItem.classList.remove(ACTIVE);\r\n if (child.getAttribute('active')) {\r\n child.setAttribute('active', 'false');\r\n }\r\n removeClasses(child.shadowRoot);\r\n });\r\n }\r\n removeClasses(this.el);\r\n if (this.activeItem) {\r\n this.activeItem.setAttribute('active', 'false');\r\n }\r\n this.activeItem = null;\r\n }\r\n\r\n hasActiveChild(menuItem) {\r\n const children = this.getSidebarMenuItems(menuItem);\r\n if (children) {\r\n for (let child of children) {\r\n // If the child item is active\r\n if (this.isActive(child)) {\r\n return true;\r\n }\r\n // If the child item has children, recurse into them\r\n else if (this.hasChildren(child.shadowRoot)) {\r\n if (this.hasActiveChild(child.shadowRoot)) {\r\n return true;\r\n }\r\n }\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n\r\n @Listen('ifxSidebarMenu')\r\n handleSidebarItemInteraction(event: CustomEvent) {\r\n // This method can be used to handle the ifxSidebarMenu event\r\n // Get the element that triggered the event\r\n const clickedItem = event.detail;\r\n\r\n // If the clicked item is not a menu OR is a menu that has an active child\r\n if (!this.hasChildren(clickedItem.shadowRoot) || this.hasActiveChild(clickedItem.shadowRoot)) {\r\n this.handleBorderIndicatorDisplacement(clickedItem);\r\n }\r\n\r\n // If the clicked item is a menu and doesn't have any active children\r\n if (this.hasChildren(clickedItem.shadowRoot) && !this.hasActiveChild(clickedItem.shadowRoot)) {\r\n const clickedItemSection = this.getActiveItemSection(clickedItem);\r\n this.handleClassList(clickedItemSection, 'remove', 'active-section');\r\n }\r\n\r\n // If clickedItem is an opened menu and it contains another menu with 'active-section'\r\n if (this.hasChildren(clickedItem.shadowRoot) && this.isOpen(clickedItem.shadowRoot) && this.containsActiveSection(clickedItem)) {\r\n const clickedItemSection = this.getActiveItemSection(clickedItem);\r\n this.handleClassList(clickedItemSection, 'remove', 'active-section');\r\n }\r\n }\r\n\r\n isOpen(menuItem) {\r\n return this.getNavItem(menuItem).classList.contains('open') ? true : false;\r\n }\r\n\r\n containsActiveSection(menuItem) {\r\n const children = this.getSidebarMenuItems(menuItem);\r\n for (let child of children) {\r\n if (this.getNavItem(child.shadowRoot).classList.contains('active-section') || (this.hasChildren(child.shadowRoot) && this.containsActiveSection(child.shadowRoot))) {\r\n this.handleClassList(child, 'add', 'active-section')\r\n return true;\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n applyActiveSectionToParent(el) {\r\n // Get all submenus of the given element\r\n const subMenus = this.getSidebarMenuItems(el);\r\n\r\n subMenus?.forEach(menu => {\r\n // If this submenu has an active child, add active-section class to it\r\n if (this.hasActiveChild(menu.shadowRoot)) {\r\n const menuItemSection = this.getActiveItemSection(menu);\r\n this.handleClassList(menuItemSection, 'add', 'active-section');\r\n }\r\n\r\n // Apply to submenu's children\r\n this.applyActiveSectionToParent(menu.shadowRoot);\r\n });\r\n }\r\n\r\n\r\n\r\n querySidebarItems(el) {\r\n return el.querySelectorAll('ifx-sidebar-item')\r\n }\r\n\r\n isActive(iteratedComponent) {\r\n const activeAttributeValue = iteratedComponent.getAttribute('active');\r\n const isActive = activeAttributeValue === 'true';\r\n return isActive;\r\n }\r\n\r\n @Listen('ifxSidebarNavigationItem')\r\n handleSidebarItemActivated(event: CustomEvent) {\r\n\r\n this.removeActiveClassesRecursively();\r\n\r\n this.activeItem = event.detail;\r\n this.activeItem.setAttribute('active', 'true');\r\n\r\n // Get the parent element of the activated item\r\n const parent = this.getNavItem(event.detail.parentElement.parentElement.parentElement);\r\n if (parent) {\r\n this.handleClassList(parent, 'add', 'active-section');\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n this.internalTermsofUse = this.termsOfUse.trim();\r\n this.internalPrivacyPolicy = this.privacyPolicy.trim();\r\n this.internalImprint = this.imprint.trim();\r\n this.internalShowFooter = this.showFooter;\r\n if(this.internalShowFooter && !this.internalImprint && !this.internalPrivacyPolicy && !this.internalTermsofUse && !this.copyrightText){\r\n this.internalShowFooter = false;\r\n }\r\n\r\n // Set initial collapsed state from prop - independent of collapsible\r\n this.isCollapsed = Boolean(this.collapsed);\r\n }\r\n\r\n @Watch('collapsible')\r\n handleCollapsibleChange(_newValue: boolean) {\r\n // Force re-render when collapsible changes\r\n this.forceUpdate();\r\n }\r\n\r\n private forceUpdate() {\r\n // Trigger a re-render\r\n this.el.forceUpdate?.() || this.el.setAttribute('data-force-update', Date.now().toString());\r\n }\r\n\r\n @Method()\r\n async toggleCollapse() {\r\n this.isCollapsed = !this.isCollapsed;\r\n this.updateCollapsedState();\r\n // Emit event after state change\r\n this.ifxSidebarCollapseChange.emit({ collapsed: this.isCollapsed });\r\n }\r\n\r\n @Method()\r\n async collapse() {\r\n this.isCollapsed = true;\r\n this.updateCollapsedState();\r\n // Emit event after state change\r\n this.ifxSidebarCollapseChange.emit({ collapsed: this.isCollapsed });\r\n }\r\n\r\n @Method()\r\n async expand() {\r\n this.isCollapsed = false;\r\n this.updateCollapsedState();\r\n // Emit event after state change\r\n this.ifxSidebarCollapseChange.emit({ collapsed: this.isCollapsed });\r\n }\r\n\r\n @Watch('collapsed')\r\n handleCollapsedPropChange(newValue: boolean) {\r\n this.isCollapsed = newValue;\r\n this.updateCollapsedState();\r\n // Emit event when prop changes\r\n this.ifxSidebarCollapseChange.emit({ collapsed: this.isCollapsed });\r\n }\r\n\r\n private updateCollapsedState() {\r\n // Set CSS custom properties to handle Shadow DOM components\r\n if (this.isCollapsed) {\r\n this.el.style.setProperty('--ifx-sidebar-item-text-display', 'none');\r\n this.el.style.setProperty('--ifx-sidebar-item-without-icon-display', 'none');\r\n this.el.style.setProperty('--ifx-sidebar-title-display', 'none');\r\n this.el.style.setProperty('--ifx-sidebar-title-show-in-collapsed-display', 'block');\r\n this.el.style.setProperty('--ifx-sidebar-title-label-display', 'none');\r\n this.el.style.setProperty('--ifx-sidebar-title-padding', '0');\r\n this.el.style.setProperty('--ifx-sidebar-item-flex-direction', 'column');\r\n\r\n // Set attributes on all sidebar items\r\n this.setSidebarItemAttributes(true);\r\n } else {\r\n this.el.style.removeProperty('--ifx-sidebar-item-text-display');\r\n this.el.style.removeProperty('--ifx-sidebar-item-without-icon-display');\r\n this.el.style.removeProperty('--ifx-sidebar-title-display');\r\n this.el.style.removeProperty('--ifx-sidebar-title-show-in-collapsed-display');\r\n this.el.style.removeProperty('--ifx-sidebar-title-label-display');\r\n this.el.style.removeProperty('--ifx-sidebar-title-padding');\r\n this.el.style.removeProperty('--ifx-sidebar-item-flex-direction');\r\n\r\n // Remove attributes from all sidebar items\r\n this.setSidebarItemAttributes(false);\r\n }\r\n }\r\n\r\nprivate setSidebarItemAttributes(collapsed: boolean) {\r\n const allSidebarItems = this.el.querySelectorAll('ifx-sidebar-item');\r\n allSidebarItems.forEach(item => {\r\n if (collapsed) {\r\n item.setAttribute('data-sidebar-collapsed', 'true');\r\n if (!item.icon) { \r\n item.setAttribute('data-hide-in-collapsed', 'true');\r\n }\r\n } else {\r\n item.removeAttribute('data-sidebar-collapsed');\r\n item.removeAttribute('data-hide-in-collapsed');\r\n }\r\n });\r\n}\r\n\r\n private handleHideMenuClick = () => {\r\n this.toggleCollapse();\r\n }\r\n\r\n private handleHideMenuKeyDown = (event: KeyboardEvent) => {\r\n if (event.key === 'Enter' || event.key === ' ') {\r\n event.preventDefault();\r\n this.toggleCollapse();\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div aria-label=\"a navigation sidebar\" aria-value={this.applicationName} class={`sidebar__container ${this.isCollapsed ? 'sidebar__container--collapsed' : ''}`}>\r\n <div class='sidebar__top-container'>\r\n {\r\n this.showHeader &&\r\n <div class=\"sidebar__nav-bar\">\r\n <div class=\"sidebar__nav-bar-logo\">\r\n <div class='sidebar__nav-bar-logo-img'>\r\n <svg width=\"91\" height=\"40\" viewBox=\"0 0 91 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_2396_2480)\">\r\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\" />\r\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\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2396_2480\">\r\n <rect width=\"91\" height=\"40\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> </div>\r\n <div class='sidebar__nav-bar-logo-text'>{this.applicationName}</div>\r\n </div>\r\n </div>\r\n }\r\n {this.collapsible && (\r\n <div\r\n class=\"sidebar__hide-menu\"\r\n onClick={this.handleHideMenuClick}\r\n onKeyDown={this.handleHideMenuKeyDown}\r\n tabIndex={0}\r\n role=\"button\"\r\n aria-label={this.isCollapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\r\n >\r\n <div class=\"sidebar__hide-menu-icon\">\r\n <ifx-icon icon=\"menu-16\"></ifx-icon>\r\n </div>\r\n <div class=\"sidebar__hide-menu-text\">{this.hideMenuLabel}</div>\r\n </div>\r\n )}\r\n <div class=\"sidebar__nav-container\">\r\n <slot />\r\n </div>\r\n </div>\r\n\r\n {\r\n this.internalShowFooter &&\r\n <div class='sidebar__footer-container'>\r\n <div class=\"sidebar__footer-wrapper\">\r\n {\r\n (this.internalTermsofUse || this.internalImprint || this.internalPrivacyPolicy) &&\r\n <div class='sidebar__footer-wrapper-top-links'>\r\n {\r\n this.internalTermsofUse !== '' && <a target={this.target} href={this.internalTermsofUse}>Terms of use</a>\r\n }\r\n {\r\n this.internalImprint !== '' && <a target={this.target} href={this.internalImprint}>Imprint</a>\r\n }\r\n {\r\n this.internalPrivacyPolicy !== '' && <a target={this.target} href={this.internalPrivacyPolicy}>Privacy policy</a>\r\n }\r\n </div>\r\n }\r\n\r\n {\r\n this.copyrightText &&\r\n <div class='sidebar__footer-wrapper-bottom-links'>\r\n <span>{this.copyrightText}</span>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n );\r\n }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-5b7a11f2.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["downloadCss","Download","constructor","hostRef","this","tokens","render","fileMap","css","scss","fileName","sourceFile","fileUrl","h","key","onClick","e","preventDefault","fetch","then","res","blob","link","document","createElement","href","URL","createObjectURL","download","click","class","size","variant"],"sources":["src/components/download/download.scss?tag=ifx-download&encapsulation=shadow","src/components/download/download.tsx"],"sourcesContent":[null,"import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: 'ifx-download',\r\n styleUrl: './download.scss',\r\n shadow: true\r\n})\r\nexport class Download {\r\n @Prop() tokens: 'css' | 'scss' = 'css';\r\n\r\n render() {\r\n const fileMap = {\r\n css: 'css-variables.css',\r\n scss: 'scss-variables.scss'\r\n };\r\n\r\n const fileName = `infineon-tokens.${this.tokens}`;\r\n const sourceFile = fileMap[this.tokens];\r\n \r\n const fileUrl = `https://raw.githubusercontent.com/Infineon/public-assets/main/ifx-tokens/${sourceFile}`;\r\n\r\n return (\r\n <ifx-link \r\n onClick={(e) => {\r\n e.preventDefault();\r\n fetch(fileUrl)\r\n .then(res => res.blob())\r\n .then(blob => {\r\n const link = document.createElement('a');\r\n link.href = URL.createObjectURL(blob);\r\n link.download = fileName;\r\n link.click();\r\n });\r\n }}\r\n href={fileUrl}\r\n download={fileName} \r\n class=\"download__wrapper\" \r\n size=\"m\" \r\n variant=\"bold\"\r\n >\r\n <slot />\r\n </ifx-link>\r\n );\r\n }\r\n}"],"mappings":"2CAAA,MAAMA,EAAc,G,MCOPC,EAAQ,MALrB,WAAAC,CAAAC,G,UAMUC,KAAMC,OAAmB,KAoClC,CAlCC,MAAAC,GACE,MAAMC,EAAU,CACdC,IAAK,oBACLC,KAAM,uBAGR,MAAMC,EAAW,mBAAmBN,KAAKC,SACzC,MAAMM,EAAaJ,EAAQH,KAAKC,QAEhC,MAAMO,EAAU,4EAA4ED,IAE5F,OACEE,EACA,YAAAC,IAAA,2CAAAC,QAAUC,IACRA,EAAEC,iBACFC,MAAMN,GACHO,MAAKC,GAAOA,EAAIC,SAChBF,MAAKE,IACJ,MAAMC,EAAOC,SAASC,cAAc,KACpCF,EAAKG,KAAOC,IAAIC,gBAAgBN,GAChCC,EAAKM,SAAWlB,EAChBY,EAAKO,OAAO,GACZ,EAEJJ,KAAMb,EACNgB,SAAUlB,EACVoB,MAAM,oBACNC,KAAK,IACLC,QAAQ,QAERnB,EAAQ,QAAAC,IAAA,6C","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-5e2e0f37.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["buttonCss","Button","constructor","hostRef","this","variant","theme","size","disabled","target","type","fullWidth","handleClick","ev","el","shadowRoot","parentForm","closest","preventDefault","resetClickHandler","fakeButton","document","createElement","style","display","appendChild","click","remove","setInternalHref","newValue","internalHref","setFocus","focusableElement","focus","insertNativeButton","nativeButton","handleFormAndInternalHref","href","undefined","handleButtonWidth","setProperty","componentWillLoad","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","componentWillRender","formElement","customElements","querySelectorAll","forEach","element","reset","handleKeyDown","key","handleHostClick","event","stopImmediatePropagation","handleFocus","blur","render","h","Host","role","tabIndex","ref","class","getClassNames","onClick","rel","onFocus","ariaLabel","getVariantClass","getSizeClass","classNames"],"sources":["src/components/button/button.scss?tag=ifx-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n vertical-align: bottom;\r\n display: inline-flex;\r\n width: var(--bw, fit-content);\r\n}\r\n\r\n.btn {\r\n box-sizing: border-box;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: tokens.$ifxSize500;\r\n padding: 0px tokens.$ifxSpace200;\r\n gap: tokens.$ifxSpace100;\r\n color: tokens.$ifxColorBaseWhite;\r\n font-weight: tokens.$ifxFontWeightSemibold;\r\n border-radius: tokens.$ifxBorderRadius12;\r\n line-height: tokens.$ifxLineHeightM;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n font-style: normal;\r\n text-decoration: none;\r\n user-select: none;\r\n font-size: tokens.$ifxFontSizeM;\r\n transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\r\n width: var(--bw, fit-content);\r\n}\r\n\r\n.btn:not(.disabled) {\r\n cursor: pointer;\r\n}\r\n\r\n.btn.disabled {\r\n pointer-events: none;\r\n}\r\n\r\n.btn-default {\r\n //default variant=primary; default color=default\r\n color: tokens.$ifxColorBaseWhite;\r\n background-color: tokens.$ifxColorOcean500;\r\n\r\n &:disabled,\r\n &.disabled {\r\n background-color: tokens.$ifxColorEngineering300;\r\n color: tokens.$ifxColorBaseWhite;\r\n pointer-events: none;\r\n\r\n }\r\n}\r\n\r\n.btn-secondary-default {\r\n background-color: tokens.$ifxColorBaseWhite;\r\n color: tokens.$ifxColorOcean500;\r\n border: 1px solid tokens.$ifxColorOcean500;\r\n\r\n &:disabled,\r\n &.disabled {\r\n background-color: tokens.$ifxColorBaseWhite;\r\n border: 1px solid tokens.$ifxColorEngineering300;\r\n color: tokens.$ifxColorEngineering300;\r\n pointer-events: none;\r\n\r\n }\r\n}\r\n\r\n.btn-tertiary-default {\r\n background-color: tokens.$ifxColorBaseTransparent;\r\n color: tokens.$ifxColorOcean500;\r\n\r\n &:disabled,\r\n &.disabled {\r\n color: tokens.$ifxColorEngineering300;\r\n pointer-events: none;\r\n\r\n }\r\n}\r\n\r\n\r\n.btn-danger {\r\n color: tokens.$ifxColorBaseWhite;\r\n background-color: tokens.$ifxColorRed500;\r\n border-color: tokens.$ifxColorRed500;\r\n\r\n &:disabled,\r\n &.disabled {\r\n background-color: tokens.$ifxColorEngineering300;\r\n color: tokens.$ifxColorBaseWhite;\r\n pointer-events: none;\r\n\r\n }\r\n}\r\n\r\n.btn-secondary-danger {\r\n background-color: tokens.$ifxColorBaseWhite;\r\n color: tokens.$ifxColorRed500;\r\n border: 1px solid tokens.$ifxColorRed500;\r\n\r\n &:disabled,\r\n &.disabled {\r\n background-color: tokens.$ifxColorBaseWhite;\r\n border: 1px solid tokens.$ifxColorEngineering300;\r\n color: tokens.$ifxColorEngineering300;\r\n pointer-events: none;\r\n\r\n }\r\n}\r\n\r\n.btn-tertiary-danger {\r\n //combination tertiary + danger not in design\r\n background-color: tokens.$ifxColorBaseTransparent;\r\n color: tokens.$ifxColorRed500;\r\n\r\n &:disabled,\r\n &.disabled {\r\n background-color: tokens.$ifxColorBaseWhite;\r\n color: tokens.$ifxColorEngineering300;\r\n pointer-events: none;\r\n\r\n }\r\n}\r\n\r\n.btn-inverse {\r\n color: tokens.$ifxColorOcean500;\r\n background-color: tokens.$ifxColorBaseWhite;\r\n\r\n &:disabled,\r\n &.disabled {\r\n opacity: tokens.$ifxOpacity100;\r\n background-color: tokens.$ifxColorBaseWhite;\r\n color: tokens.$ifxColorEngineering300;\r\n pointer-events: none;\r\n }\r\n}\r\n\r\n.btn-secondary-inverse {\r\n color: tokens.$ifxColorBaseWhite;\r\n border: 1px solid tokens.$ifxColorBaseWhite;\r\n\r\n &:disabled,\r\n &.disabled {\r\n border: 1px solid tokens.$ifxColorBaseWhite;\r\n color: tokens.$ifxColorBaseWhite;\r\n pointer-events: none;\r\n\r\n }\r\n}\r\n\r\n\r\n.btn-tertiary-inverse {\r\n color: tokens.$ifxColorBaseWhite;\r\n\r\n &:disabled,\r\n &.disabled {\r\n color: tokens.$ifxColorBaseWhite;\r\n opacity: tokens.$ifxOpacity100;\r\n pointer-events: none;\r\n\r\n }\r\n}\r\n\r\n.btn {\r\n & ifx-icon:empty {\r\n display: none;\r\n }\r\n\r\n &.btn-xs {\r\n font-size: tokens.$ifxFontSizeS;\r\n height: tokens.$ifxSize400;\r\n line-height: tokens.$ifxLineHeightXs;\r\n }\r\n\r\n &.btn-s {\r\n font-size: tokens.$ifxFontSizeS;\r\n height: tokens.$ifxSize450;\r\n line-height: tokens.$ifxLineHeightS;\r\n }\r\n\r\n // &.btn-m { //default\r\n // font-size: tokens.$ifxFontSizeM;\r\n // height: tokens.$ifxSize400;\r\n // line-height: tokens.$ifxLineHeightM;\r\n // }\r\n\r\n\r\n &.btn-l {\r\n font-size: tokens.$ifxFontSizeXl;\r\n height: tokens.$ifxSize600;\r\n line-height: tokens.$ifxLineHeightXl;\r\n }\r\n\r\n\r\n\r\n &.btn-default:not(:disabled, .disabled) {\r\n &:focus:not(:active, .active) {\r\n outline: none;\r\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\r\n }\r\n\r\n &:hover {\r\n background-color: tokens.$ifxColorOcean600;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n background-color: tokens.$ifxColorOcean700;\r\n }\r\n }\r\n\r\n &.btn-secondary-default:not(:disabled, .disabled) {\r\n &:focus:not(:active, .active) {\r\n outline: none;\r\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\r\n }\r\n\r\n &:hover {\r\n color: tokens.$ifxColorBaseWhite;\r\n background-color: tokens.$ifxColorOcean600;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n background-color: tokens.$ifxColorOcean700;\r\n }\r\n }\r\n\r\n &.btn-secondary:not(:disabled, .disabled) {\r\n\r\n &:hover {\r\n background-color: tokens.$ifxColorBerry500;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n background-color: tokens.$ifxColorBerry500;\r\n }\r\n }\r\n\r\n\r\n\r\n &.btn-danger:not(:disabled, .disabled) {\r\n &:focus:not(:active, .active) {\r\n outline: none;\r\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\r\n }\r\n\r\n &:hover {\r\n background-color: tokens.$ifxColorRed600;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n background-color: tokens.$ifxColorRed700;\r\n }\r\n }\r\n\r\n &.btn-secondary-danger:not(:disabled, .disabled) {\r\n\r\n &:focus:not(:active, .active) {\r\n outline: none;\r\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\r\n }\r\n\r\n &:hover {\r\n color: tokens.$ifxColorBaseWhite;\r\n background-color: tokens.$ifxColorRed600;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n background-color: tokens.$ifxColorRed700;\r\n }\r\n }\r\n\r\n\r\n &.btn-inverse:not(:disabled, .disabled) {\r\n &:focus:not(:active, .active) {\r\n outline: none;\r\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\r\n }\r\n\r\n &:hover {\r\n background-color: tokens.$ifxColorEngineering200;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n background-color: tokens.$ifxColorEngineering300;\r\n }\r\n }\r\n\r\n &.btn-secondary-inverse:not(:disabled, .disabled) {\r\n &:focus:not(:active, .active) {\r\n outline: none;\r\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\r\n }\r\n\r\n &:hover {\r\n color: tokens.$ifxColorOcean500;\r\n background-color: tokens.$ifxColorEngineering200;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n color: tokens.$ifxColorOcean500;\r\n background-color: tokens.$ifxColorEngineering300;\r\n }\r\n }\r\n\r\n\r\n\r\n &.btn-tertiary-default:not(:disabled, .disabled) {\r\n &:focus:not(:active, .active) {\r\n outline: none;\r\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean600;\r\n }\r\n\r\n &:hover {\r\n color: tokens.$ifxColorOcean600;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n color: tokens.$ifxColorOcean700;\r\n }\r\n\r\n\r\n }\r\n\r\n\r\n\r\n\r\n\r\n &.btn-tertiary-danger:not(:disabled, .disabled) {\r\n &:focus:not(:active, .active) {\r\n outline: none;\r\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorRed600;\r\n }\r\n\r\n &:hover {\r\n color: tokens.$ifxColorRed600;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n color: tokens.$ifxColorRed700;\r\n }\r\n\r\n }\r\n\r\n\r\n &.btn-tertiary-inverse:not(:disabled, .disabled) {\r\n &:focus:not(:active, .active) {\r\n outline: none;\r\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\r\n }\r\n\r\n &:hover {\r\n color: tokens.$ifxColorEngineering200;\r\n\r\n }\r\n\r\n &:active,\r\n &.active {\r\n color: tokens.$ifxColorEngineering300;\r\n }\r\n }\r\n}","import { Component, Prop, h, Host, Method, Element, Listen, State, Watch } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport classNames from 'classnames';\r\n \r\n@Component({\r\n tag: 'ifx-button',\r\n styleUrl: 'button.scss',\r\n shadow: true,\r\n})\r\nexport class Button {\r\n @Prop() variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\r\n @Prop() theme: 'default' | 'danger' | 'inverse' = 'default';\r\n @Prop() size: string = 'm';\r\n @Prop() disabled: boolean = false;\r\n @State() internalHref: string;\r\n @Prop() href: string;\r\n @Prop() target: string = '_self';\r\n @Prop() type: \"button\" | \"submit\" | \"reset\" = \"button\";\r\n @Prop() fullWidth: boolean = false;\r\n @Prop() ariaLabel: string | null;\r\n @Element() el;\r\n\r\n private focusableElement: HTMLElement;\r\n private nativeButton: HTMLButtonElement | HTMLInputElement;\r\n\r\n @Watch('href')\r\n setInternalHref(newValue: string) {\r\n this.internalHref = newValue;\r\n }\r\n\r\n @Method()\r\n async setFocus() {\r\n this.focusableElement.focus();\r\n }\r\n\r\n insertNativeButton() {\r\n this.nativeButton = document.createElement('button');\r\n this.nativeButton.type = this.type;\r\n this.nativeButton.style.display = 'none';\r\n this.el.closest('form').appendChild(this.nativeButton);\r\n }\r\n\r\n handleFormAndInternalHref() {\r\n if (this.el.closest('form')) {\r\n if (this.el.href) {\r\n this.el.internalHref = undefined;\r\n }\r\n this.insertNativeButton()\r\n } else {\r\n this.internalHref = this.href;\r\n }\r\n }\r\n\r\n handleButtonWidth() {\r\n if (this.fullWidth) {\r\n this.el.style.setProperty('--bw', '100%');\r\n } else {\r\n this.el.style.setProperty('--bw', 'fit-content');\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n this.handleFormAndInternalHref()\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-button', await framework)\r\n }\r\n }\r\n\r\n componentWillRender() {\r\n this.handleButtonWidth()\r\n }\r\n\r\n\r\n\r\n handleClick = (ev: Event) => {\r\n if (this.el.shadowRoot) {\r\n const parentForm = this.el.closest('form');\r\n if (parentForm) {\r\n ev.preventDefault();\r\n\r\n if (this.type === 'reset') {\r\n // If the button type is 'reset', manually reset all custom form fields\r\n this.resetClickHandler(); //this will reset all ifx-text-fields within a form\r\n } else {\r\n const fakeButton = document.createElement('button');\r\n if (this.type) {\r\n fakeButton.type = this.type;\r\n }\r\n fakeButton.style.display = 'none';\r\n parentForm.appendChild(fakeButton);\r\n fakeButton.click();\r\n fakeButton.remove();\r\n }\r\n }\r\n }\r\n }\r\n\r\n resetClickHandler() {\r\n const formElement = this.el.closest('form');\r\n const customElements = formElement.querySelectorAll('ifx-text-field, ifx-textarea');\r\n customElements.forEach(element => {\r\n element.reset();\r\n });\r\n }\r\n\r\n @Listen('keydown')\r\n handleKeyDown(ev: KeyboardEvent) {\r\n if ( ev.key === \" \" || ev.key === 'Enter' && !this.disabled) {\r\n this.focusableElement.click();\r\n }\r\n }\r\n\r\n @Listen('click', { capture: true })\r\n handleHostClick(event: Event) {\r\n if (this.disabled === true) {\r\n event.stopImmediatePropagation();\r\n }\r\n }\r\n\r\n handleFocus(event: FocusEvent) {\r\n if (this.disabled) {\r\n event.preventDefault();\r\n this.focusableElement.blur();\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <a\r\n role={this.href ? 'link' : 'button'}\r\n tabIndex={this.disabled ? -1 : 0}\r\n ref={(el) => (this.focusableElement = el)}\r\n class={this.getClassNames()}\r\n href={!this.disabled ? this.internalHref : undefined}\r\n target={this.target}\r\n onClick={this.handleClick}\r\n rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\r\n onFocus={(event) => this.handleFocus(event)}\r\n aria-disabled={this.disabled ? 'true' : null}\r\n aria-describedby={this.theme === 'danger' ? 'Dangerous action' : undefined}\r\n aria-label={this.ariaLabel || undefined}\r\n >\r\n <slot></slot>\r\n </a>\r\n </Host>\r\n );\r\n }\r\n\r\n\r\n getVariantClass() {\r\n return `${this.variant}` === \"secondary\"\r\n ? `secondary-${this.theme}`\r\n : `${this.variant}` === 'tertiary'\r\n ? `tertiary-${this.theme}`\r\n : `${this.theme}`;\r\n }\r\n\r\n getSizeClass() {\r\n if (`${this.size}` === \"xs\") {\r\n return \"xs\"\r\n }\r\n else if (`${this.size}` === \"s\") {\r\n return \"s\"\r\n }\r\n else if (`${this.size}` === \"l\") {\r\n return \"l\"\r\n }\r\n else return \"\";\r\n }\r\n\r\n getClassNames() {\r\n return classNames(\r\n 'btn',\r\n this.size && `btn-${this.getSizeClass()}`,\r\n `btn-${this.getVariantClass()}`,\r\n this.disabled ? 'disabled' : ''\r\n );\r\n }\r\n}"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-5e6dc7d8.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["dropdownItemCss","DropdownItem","constructor","hostRef","this","href","target","hide","size","handleMenuSize","event","detail","handleEventEmission","ifxDropdownItem","emit","el","textContent","render","hasHref","undefined","common","class","onClick","role","tabIndex","h","Object","assign","key","icon"],"sources":["src/components/dropdown/dropdown-item/dropdown-item.scss?tag=ifx-dropdown-item&encapsulation=shadow","src/components/dropdown/dropdown-item/dropdown-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n.dropdown-item {\r\n text-decoration: none;\r\n color: tokens.$ifxColorBaseBlack;\r\n display: flex;\r\n align-items: center;\r\n padding: 8px 16px;\r\n gap: tokens.$ifxSize100;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n &:focus{\r\n outline: none;\r\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\r\n }\r\n\r\n &.hide {\r\n display: none;\r\n }\r\n\r\n & span {\r\n color: tokens.$ifxColorBaseBlack;\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 24px;\r\n /* 150% */\r\n }\r\n\r\n &.small {\r\n & span {\r\n font-size: 14px;\r\n }\r\n }\r\n\r\n &:hover {\r\n cursor: pointer;\r\n background-color: tokens.$ifxColorEngineering200;\r\n }\r\n\r\n &:active {\r\n background-color: tokens.$ifxColorEngineering300;\r\n }\r\n}\r\n\r\n.icon {\r\n margin-right: 4px;\r\n}","import { Component, Prop, h, Listen, State, Event, EventEmitter, Element } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: 'ifx-dropdown-item',\r\n styleUrl: 'dropdown-item.scss',\r\n shadow: true\r\n})\r\n\r\nexport class DropdownItem {\r\n @Prop() icon: string;\r\n @Prop() href: string = \"\"\r\n @Prop() target: string = \"_self\"\r\n @Prop() hide: boolean = false;\r\n @State() size: string = 'l'\r\n @Event() ifxDropdownItem: EventEmitter;\r\n @Element() el;\r\n\r\n @Listen('menuSize', { target: 'body' })\r\n handleMenuSize(event: CustomEvent) {\r\n this.size = event.detail;\r\n }\r\n\r\n handleEventEmission() {\r\n this.ifxDropdownItem.emit(this.el.textContent)\r\n }\r\n\r\n render() {\r\n const hasHref = this.href !== undefined && this.href !== null && this.href !== '';\r\n const common = {\r\n class: `dropdown-item ${this.size === 's' ? 'small' : \"\"} ${this.hide ? 'hide' : \"\"}`,\r\n onClick: () => this.handleEventEmission(),\r\n role: 'menuitem'\r\n } as any;\r\n\r\n if (!hasHref) common.tabIndex = 0;\r\n\r\n return (\r\n <a {...common} {...(hasHref ? { href: this.href, target: this.target } : {})}>\r\n {this.icon && <ifx-icon class=\"icon\" icon={this.icon}></ifx-icon>}\r\n <span><slot /></span>\r\n </a>\r\n );\r\n }\r\n}\r\n"],"mappings":"yDAAA,MAAMA,EAAkB,klB,MCQXC,EAAY,MANzB,WAAAC,CAAAC,G,2DAQUC,KAAIC,KAAW,GACfD,KAAME,OAAW,QACjBF,KAAIG,KAAY,MACfH,KAAII,KAAW,GA8BzB,CAzBC,cAAAC,CAAeC,GACbN,KAAKI,KAAOE,EAAMC,M,CAGpB,mBAAAC,GACER,KAAKS,gBAAgBC,KAAKV,KAAKW,GAAGC,Y,CAGpC,MAAAC,GACE,MAAMC,EAAUd,KAAKC,OAASc,WAAaf,KAAKC,OAAS,MAAQD,KAAKC,OAAS,GAC/E,MAAMe,EAAS,CACbC,MAAO,iBAAiBjB,KAAKI,OAAS,IAAM,QAAU,MAAMJ,KAAKG,KAAO,OAAS,KACjFe,QAAS,IAAMlB,KAAKQ,sBACpBW,KAAM,YAGR,IAAKL,EAASE,EAAOI,SAAW,EAEhC,OACEC,EAAO,IAAAC,OAAAC,OAAA,CAAAC,IAAA,4CAAAR,EAAaF,EAAU,CAAEb,KAAMD,KAAKC,KAAMC,OAAQF,KAAKE,QAAW,IACtEF,KAAKyB,MAAQJ,EAAA,YAAAG,IAAA,2CAAUP,MAAM,OAAOQ,KAAMzB,KAAKyB,OAChDJ,EAAA,QAAAG,IAAA,4CAAMH,EAAQ,QAAAG,IAAA,8C","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-5e7e0b40.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,c as s,h as e,a}from"./p-PqnYwNKt.js";const r=":host{display:block}";const i=class{constructor(e){t(this,e);this.tabHeaderChange=s(this,"tabHeaderChange",7);this.icon="";this.iconPosition="left"}componentWillUpdate(){this.tabHeaderChange.emit(this.header)}render(){return e("slot",{key:"419b1743fe36e5d30e3cfad98c3b02bb7a039ce3"})}get el(){return a(this)}};i.style=r;export{i as ifx_tab};
2	- //# sourceMappingURL=p-5e7e0b40.entry.js.map

package/dist/infineon-design-system-stencil/p-5e7e0b40.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["tabCss","IfxTab","constructor","hostRef","this","icon","iconPosition","componentWillUpdate","tabHeaderChange","emit","header","render","h","key"],"sources":["src/components/tabs/tab.scss?tag=ifx-tab","src/components/tabs/tab.tsx"],"sourcesContent":[":host {\r\n display: block;\r\n}","import { Component, h, Element, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-tab',\r\n styleUrl: 'tab.scss',\r\n shadow: false\r\n})\r\nexport class IfxTab {\r\n @Element() el: HTMLElement;\r\n @Prop() header: string;\r\n @Prop() disabled: boolean;\r\n @Prop() icon: string = '';\r\n @Prop() iconPosition: 'left' | 'right' = 'left';\r\n @Event() tabHeaderChange: EventEmitter;\r\n\r\n componentWillUpdate() { \r\n this.tabHeaderChange.emit(this.header)\r\n }\r\n\r\n render() {\r\n return <slot />;\r\n }\r\n}"],"mappings":"oDAAA,MAAMA,EAAS,uB,MCOFC,EAAM,MALnB,WAAAC,CAAAC,G,2DASUC,KAAIC,KAAW,GACfD,KAAYE,aAAqB,MAU1C,CAPC,mBAAAC,GACEH,KAAKI,gBAAgBC,KAAKL,KAAKM,O,CAGjC,MAAAC,GACE,OAAOC,EAAA,QAAAC,IAAA,4C","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-5f28de7f.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,h as e,a as i}from"./p-PqnYwNKt.js";const r=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{pointer-events:none}.card__text-wrapper{padding-bottom:0px}.card__text-wrapper.hasBtn{padding-bottom:16px}.card-text{line-height:1.5rem;font-size:1rem;font-weight:400;white-space:wrap;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}';const a=class{constructor(e){t(this,e)}componentWillLoad(){const t=this.el.closest("ifx-card").querySelector("ifx-link");const e=this.el.closest("ifx-card").querySelector("ifx-button");if(t\|\|e){this.hasBtn=true}}render(){return e("div",{key:"e1633c3f7bf8438b839ad4df9ec64e2a5afce629",class:`card__text-wrapper ${this.hasBtn?"hasBtn":""}`},e("div",{key:"f6dd6376eb3763f41dca8d77b7094277d8a08053",class:`card-text`},e("slot",{key:"b468bcf96960f91232cb394fb737f2f88d11da29"})))}get el(){return i(this)}};a.style=r;export{a as ifx_card_text};
2	- //# sourceMappingURL=p-5f28de7f.entry.js.map

package/dist/infineon-design-system-stencil/p-5f28de7f.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["cardTextCss","CardText","componentWillLoad","link","this","el","closest","querySelector","button","hasBtn","render","h","key","class"],"sources":["src/components/card/card-text/card-text.scss?tag=ifx-card-text&encapsulation=shadow","src/components/card/card-text/card-text.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n:host {\r\n pointer-events: none;\r\n}\r\n\r\n.card__text-wrapper {\r\n padding-bottom: 0px;\r\n\r\n &.hasBtn {\r\n padding-bottom: 16px;\r\n }\r\n}\r\n\r\n.card-text {\r\n line-height: tokens.$ifxLineHeightM;\r\n font-size: tokens.$ifxFontSizeM;\r\n font-weight: 400;\r\n white-space: wrap;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 3;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}","import { Component, h, Element, State} from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-card-text',\r\n styleUrl: './card-text.scss',\r\n shadow: true,\r\n})\r\n\r\nexport class CardText {\r\n @Element() el;\r\n @State() hasBtn: boolean;\r\n\r\n componentWillLoad() { \r\n const link = this.el.closest('ifx-card').querySelector('ifx-link');\r\n const button = this.el.closest('ifx-card').querySelector('ifx-button');\r\n if(link || button) { \r\n this.hasBtn = true;\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`card__text-wrapper ${this.hasBtn ? 'hasBtn' : \"\"}`}>\r\n <div class={`card-text`}>\r\n <slot />\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"mappings":"kDAAA,MAAMA,EAAc,0W,MCQPC,EAAQ,M,yBAInB,iBAAAC,GACE,MAAMC,EAAOC,KAAKC,GAAGC,QAAQ,YAAYC,cAAc,YACvD,MAAMC,EAASJ,KAAKC,GAAGC,QAAQ,YAAYC,cAAc,cACzD,GAAGJ,GAAQK,EAAQ,CACjBJ,KAAKK,OAAS,I,EAIlB,MAAAC,GACE,OACEC,EAAK,OAAAC,IAAA,2CAAAC,MAAO,sBAAsBT,KAAKK,OAAS,SAAW,MACzDE,EAAK,OAAAC,IAAA,2CAAAC,MAAO,aACVF,EAAQ,QAAAC,IAAA,8C","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-694aa84a.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["switchCss","Switch","constructor","hostRef","this","checked","name","disabled","internalChecked","isChecked","componentWillLoad","toggleLabelGap","slot","el","shadowRoot","querySelector","container","assignedNodes","length","classList","add","remove","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","valueChanged","newValue","oldValue","toggleSwitch","ifxChange","emit","handleKeyDown","event","key","render","h","class","role","onClick","onKeyDown","tabindex","type","hidden","value","htmlFor","onSlotchange"],"sources":["src/components/switch/switch.scss?tag=ifx-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n/* switch.css */\r\n:host {\r\n display: inline-block;\r\n user-select: none;\r\n}\r\n\r\n.container {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n &.gap {\r\n gap: tokens.$ifxSpace200;\r\n }\r\n}\r\n\r\n\r\n.switch__checkbox-container {\r\n padding: tokens.$ifxSpace50;\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n // Subtracting padding size from both height and width\r\n width: (tokens.$ifxSpace500)-8px;\r\n height: 16px;\r\n background-color: tokens.$ifxColorBaseWhite;\r\n border: 1px solid tokens.$ifxColorEngineering500;\r\n border-radius: 20px;\r\n cursor: pointer;\r\n transition: background-color 0.3s ease;\r\n outline: none;\r\n\r\n &:focus {\r\n outline: 4px solid tokens.$ifxColorOcean500;\r\n outline-offset: 2px;\r\n }\r\n\r\n &:focus:not(:focus-visible) {\r\n outline: none;\r\n }\r\n\r\n &:focus-visible {\r\n outline: 2px solid tokens.$ifxColorOcean500;\r\n outline-offset: 2px;\r\n }\r\n\r\n &.disabled {\r\n cursor: default;\r\n border-color: tokens.$ifxColorEngineering300;\r\n }\r\n\r\n\r\n}\r\n\r\n\r\n.switch__label-wrapper {\r\n\r\n & label { \r\n &:hover { \r\n cursor: pointer;\r\n }\r\n }\r\n\r\n &.disabled {\r\n color: tokens.$ifxColorEngineering300;\r\n \r\n & label { \r\n &:hover { \r\n cursor: default;\r\n }\r\n }\r\n }\r\n}\r\n\r\n\r\n.switch__checkbox-wrapper {\r\n\r\n .switch {\r\n // position: absolute;\r\n width: tokens.$ifxSpace200;\r\n height: tokens.$ifxSpace200;\r\n background-color: tokens.$ifxColorEngineering500;\r\n border-radius: 50%;\r\n transition: transform 0.3s ease, background-color 0.3s ease;\r\n\r\n &.disabled {\r\n background-color: tokens.$ifxColorEngineering300;\r\n border-color: tokens.$ifxColorEngineering300;\r\n cursor: default;\r\n }\r\n }\r\n\r\n .switch.checked {\r\n transform: translateX(16px);\r\n background-color: tokens.$ifxColorBaseWhite;\r\n\r\n &.disabled {\r\n cursor: default;\r\n }\r\n\r\n }\r\n\r\n}\r\n\r\n.switch__checkbox-container:hover .toggle-switch {\r\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n\r\n\r\n.switch__checkbox-container.checked {\r\n background-color: tokens.$ifxColorOcean500;\r\n border-color: tokens.$ifxColorOcean500;\r\n\r\n &.disabled {\r\n background-color: tokens.$ifxColorEngineering300;\r\n border-color: tokens.$ifxColorEngineering300;\r\n cursor: default;\r\n }\r\n}","import { AttachInternals, Method } from '@stencil/core';\r\nimport { Component, Prop, State, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking'; \r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-switch',\r\n styleUrl: 'switch.scss',\r\n shadow: true,\r\n // formAssociated: true\r\n})\r\nexport class Switch {\r\n @Prop() checked: boolean = false;\r\n @Prop() name: string = '';\r\n @Prop() disabled: boolean = false;\r\n @Prop() value: string;\r\n @State() internalChecked: boolean = false;\r\n\r\n @AttachInternals() internals: ElementInternals;\r\n\r\n @Element() el: HTMLIfxSwitchElement;\r\n\r\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;\r\n\r\n @Method()\r\n async isChecked(): Promise<boolean> {\r\n return this.internalChecked;\r\n }\r\n\r\n componentWillLoad() {\r\n this.internalChecked = this.checked;\r\n }\r\n \r\n\r\n toggleLabelGap() {\r\n const slot = this.el.shadowRoot.querySelector('slot');\r\n const container = this.el.shadowRoot.querySelector('.container');\r\n if (slot.assignedNodes().length) {\r\n container.classList.add('gap')\r\n } else { \r\n container.classList.remove('gap')\r\n }\r\n }\r\n \r\n async componentDidLoad() {\r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-switch', await framework)\r\n }\r\n this.toggleLabelGap();\r\n }\r\n \r\n @Watch('checked')\r\n valueChanged(newValue: boolean, oldValue: boolean) {\r\n if (newValue !== oldValue) {\r\n this.internalChecked = newValue;\r\n }\r\n }\r\n\r\n toggleSwitch() {\r\n if (this.disabled) return;\r\n this.internalChecked = !this.internalChecked;\r\n\r\n if (this.internalChecked) {\r\n if (this.value !== undefined) {\r\n //this.internals.setFormValue(this.value);\r\n } else {\r\n //this.internals.setFormValue(\"on\")\r\n }\r\n } else {\r\n //this.internals.setFormValue(null)\r\n }\r\n\r\n this.ifxChange.emit(this.internalChecked);\r\n }\r\n\r\n handleKeyDown(event: KeyboardEvent) {\r\n if (this.disabled) return;\r\n // If the pressed key is either 'Enter' or 'Space' \r\n if (event.key === 'Enter' || event.key === ' ') {\r\n this.toggleSwitch();\r\n }\r\n }\r\n\r\n /**\r\n * Callback for form association.\r\n * Called whenever the form is reset.\r\n */\r\n // formResetCallback() {\r\n // this.internals.setFormValue(null);\r\n // }\r\n\r\n render() {\r\n return (\r\n <div\r\n class=\"container\"\r\n role=\"switch\"\r\n aria-checked={this.internalChecked ? 'true' : 'false'}\r\n aria-disabled={this.disabled ? 'true' : 'false'}\r\n aria-labelledby=\"switch-label\"\r\n onClick={() => this.toggleSwitch()}\r\n onKeyDown={(event) => this.handleKeyDown(event)}\r\n >\r\n {/* Checkbox */}\r\n <div \r\n class={`switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\r\n tabindex=\"0\"\r\n >\r\n <div class=\"switch__checkbox-wrapper\">\r\n <input type=\"checkbox\" hidden\r\n name={this.name}\r\n disabled={this.disabled}\r\n checked={this.internalChecked}\r\n value={`${this.value}`} />\r\n <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\r\n </div>\r\n </div >\r\n\r\n {/* Label */}\r\n <div class={`switch__label-wrapper ${this.disabled ? 'disabled' : ''}`} >\r\n <label htmlFor=\"switch\">\r\n <slot onSlotchange={() => this.toggleLabelGap()} />\r\n </label>\r\n </div>\r\n </div>\r\n )\r\n\r\n }\r\n}\r\n"],"mappings":"mIAAA,MAAMA,EAAY,ikD,MCYLC,EAAM,MANnB,WAAAC,CAAAC,G,+MAOUC,KAAOC,QAAY,MACnBD,KAAIE,KAAW,GACfF,KAAQG,SAAY,MAEnBH,KAAeI,gBAAY,KAgHrC,CAvGC,eAAMC,GACJ,OAAOL,KAAKI,e,CAGd,iBAAAE,GACEN,KAAKI,gBAAkBJ,KAAKC,O,CAI9B,cAAAM,GACE,MAAMC,EAAOR,KAAKS,GAAGC,WAAWC,cAAc,QAC9C,MAAMC,EAAYZ,KAAKS,GAAGC,WAAWC,cAAc,cACnD,GAAIH,EAAKK,gBAAgBC,OAAQ,CAC/BF,EAAUG,UAAUC,IAAI,M,KACnB,CACLJ,EAAUG,UAAUE,OAAO,M,EAI/B,sBAAMC,GACJ,IAAIC,EAAuBnB,KAAKS,IAAK,CACnC,MAAMW,EAAYC,IAClBC,EAAe,mBAAoBF,E,CAErCpB,KAAKO,gB,CAIP,YAAAgB,CAAaC,EAAmBC,GAC9B,GAAID,IAAaC,EAAU,CACzBzB,KAAKI,gBAAkBoB,C,EAI3B,YAAAE,GACE,GAAI1B,KAAKG,SAAU,OACnBH,KAAKI,iBAAmBJ,KAAKI,gBAY7BJ,KAAK2B,UAAUC,KAAK5B,KAAKI,gB,CAG3B,aAAAyB,CAAcC,GACZ,GAAI9B,KAAKG,SAAU,OAEnB,GAAI2B,EAAMC,MAAQ,SAAWD,EAAMC,MAAQ,IAAK,CAC9C/B,KAAK0B,c,EAYT,MAAAM,GACE,OACEC,EACE,OAAAF,IAAA,2CAAAG,MAAM,YACNC,KAAK,SACS,eAAAnC,KAAKI,gBAAkB,OAAS,QAC/B,gBAAAJ,KAAKG,SAAW,OAAS,QAAO,kBAC/B,eAChBiC,QAAS,IAAMpC,KAAK0B,eACpBW,UAAYP,GAAU9B,KAAK6B,cAAcC,IAGzCG,EAAA,OAAAF,IAAA,2CACEG,MAAO,8BAA8BlC,KAAKI,gBAAkB,UAAY,MAAMJ,KAAKG,SAAW,WAAa,KAC3GmC,SAAS,KAETL,EAAK,OAAAF,IAAA,2CAAAG,MAAM,4BACTD,EAAA,SAAAF,IAAA,2CAAOQ,KAAK,WAAWC,OAAM,KAC3BtC,KAAMF,KAAKE,KACXC,SAAUH,KAAKG,SACfF,QAASD,KAAKI,gBACdqC,MAAO,GAAGzC,KAAKyC,UACjBR,EAAA,OAAAF,IAAA,2CAAKG,MAAO,UAAUlC,KAAKI,gBAAkB,UAAY,MAAMJ,KAAKG,SAAW,WAAa,SAKhG8B,EAAA,OAAAF,IAAA,2CAAKG,MAAO,yBAAyBlC,KAAKG,SAAW,WAAa,MAChE8B,EAAO,SAAAF,IAAA,2CAAAW,QAAQ,UACbT,EAAA,QAAAF,IAAA,2CAAMY,aAAc,IAAM3C,KAAKO,qB","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-6c41a04b.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["sidebarTitleCss","SidebarTitle","constructor","hostRef","this","showInCollapsed","componentWillLoad","el","setAttribute","toString","render","h","key","class"],"sources":["src/components/navigation/sidebar/sidebar-title.scss?tag=ifx-sidebar-title&encapsulation=shadow","src/components/navigation/sidebar/sidebar-title.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n:host {\r\n position: relative;\r\n display: var(--ifx-sidebar-title-display, block);\r\n}\r\n\r\n:host([data-show-in-collapsed=\"true\"]) {\r\n display: var(--ifx-sidebar-title-show-in-collapsed-display, block);\r\n}\r\n\r\n.sidebar__title {\r\n width: 100%;\r\n height: fit-content;\r\n border-top: 1px solid tokens.$ifxColorEngineering200;\r\n padding: var(--ifx-sidebar-title-padding, tokens.$ifxSpace150 0);\r\n\r\n &.no-top-border {\r\n border-top: none;\r\n }\r\n}\r\n\r\n.sidebar__title-label {\r\n height: 20px;\r\n font: tokens.$ifxEyebrowEyebrow02;\r\n text-transform: uppercase;\r\n color: tokens.$ifxColorEngineering500;\r\n letter-spacing: 3px;\r\n display: var(--ifx-sidebar-title-label-display, block);\r\n}\r\n","import { Component, h, Element, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-sidebar-title',\r\n styleUrl: 'sidebar-title.scss',\r\n shadow: true\r\n})\r\n\r\nexport class SidebarTitle {\r\n @Element() el;\r\n @Prop() showInCollapsed: boolean = false;\r\n\r\n componentWillLoad() {\r\n // Set data attribute for CSS targeting\r\n this.el.setAttribute('data-show-in-collapsed', this.showInCollapsed.toString());\r\n }\r\n\r\n render() {\r\n return(\r\n <div class = 'sidebar__title'>\r\n <div class = 'sidebar__title-label'>\r\n <slot />\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"mappings":"kDAAA,MAAMA,EAAkB,qlB,MCQXC,EAAY,MANzB,WAAAC,CAAAC,G,UAQYC,KAAeC,gBAAY,KAgBtC,CAdG,iBAAAC,GAEIF,KAAKG,GAAGC,aAAa,yBAA0BJ,KAAKC,gBAAgBI,W,CAGxE,MAAAC,GACI,OACIC,EAAA,OAAAC,IAAA,2CAAKC,MAAQ,kBACTF,EAAK,OAAAC,IAAA,2CAAAC,MAAQ,wBACTF,EAAQ,QAAAC,IAAA,8C","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-72a516f9.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["stepperCss","Stepper","constructor","hostRef","this","activeStep","indicatorPosition","showStepNumber","variant","shouldEmitEvent","emittedByClick","onStepChange","event","steps","getSteps","previousActiveStep","detail","complete","setAttribute","handleActiveStep","newStep","oldStep","disabled","emitIfxChange","i","stepsCount","ifxChange","emit","totalSteps","el","querySelectorAll","addStepIdsToStepsAndCountSteps","length","lastStep","stepId","setActiveStep","setByClick","setStepsBeforeActiveToComplete","forEach","step","syncIfxSteps","stepperState","bind","setInitialActiveStep","Math","max","min","componentWillLoad","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","componentWillUpdate","render","h","key","ariaLabel","ariaCurrent","role","class","componentDidRender","progressBar","shadowRoot","querySelector","style","setProperty"],"sources":["src/components/stepper/stepper.scss?tag=ifx-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n.stepper {\r\n display: flex;\r\n align-items: center;\r\n \r\n &.compact {\r\n align-items: center;\r\n gap: 8px;\r\n \r\n &.compact-right {\r\n flex-direction: row-reverse;\r\n text-align: left;\r\n }\r\n \r\n .stepper-wrapper{\r\n width: unset;\r\n flex-direction: column;\r\n }\r\n }\r\n\r\n &.vertical {\r\n height: 100%;\r\n\r\n .stepper-wrapper {\r\n flex-direction: column;\r\n width: unset;\r\n height: 100%;\r\n }\r\n }\r\n}\r\n\r\n.stepper-wrapper {\r\n display: flex;\r\n flex-direction: row;\r\n width: 100%;\r\n}\r\n\r\n.stepper-wrapper ::slotted(*){\r\n display: flex;\r\n flex: 1;\r\n justify-content: flex-start;\r\n}\r\n\r\n.stepper-progress {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font: tokens.$ifxBodyBodySemibold04;\r\n min-width: tokens.$ifxSize700;\r\n height: tokens.$ifxSize700;\r\n border-radius: tokens.$ifxBorderRadiusRound;\r\n background: conic-gradient(tokens.$ifxColorOcean500 var(--pb, 0%), tokens.$ifxColorEngineering300 0);\r\n \r\n .progress-detail {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n text-align: center;\r\n width: (tokens.$ifxSize700)-(tokens.$ifxSize100);\r\n height: (tokens.$ifxSize700)-(tokens.$ifxSize100);\r\n border-radius: tokens.$ifxBorderRadiusRound;\r\n background: white;\r\n }\r\n}\r\n\r\n","import { h, \r\n Component, \r\n Element, \r\n Event, \r\n EventEmitter, \r\n Listen, \r\n Prop, \r\n State, \r\n Watch } from \"@stencil/core\";\r\nimport { StepperState } from \"./interfaces\";\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-stepper',\r\n styleUrl: 'stepper.scss',\r\n shadow: true\r\n})\r\n\r\nexport class Stepper {\r\n @Element() el: HTMLElement;\r\n\r\n @Event() ifxChange: EventEmitter;\r\n\r\n @Prop({ mutable: true }) activeStep: number = 1;\r\n @Prop() indicatorPosition?: 'left' | 'right' = 'left';\r\n @Prop() showStepNumber?: boolean = false;\r\n @Prop() variant?: 'default' | 'compact' | 'vertical' = 'default';\r\n @Prop() ariaLabel: string | null;\r\n @Prop() ariaCurrent: string | null;\r\n\r\n\r\n\r\n @State() stepsCount: number;\r\n @State() shouldEmitEvent: boolean = true;\r\n @State() emittedByClick: boolean = false;\r\n\r\n @Listen('ifxChange') \r\n onStepChange(event: CustomEvent) {\r\n const steps = this.getSteps();\r\n const previousActiveStep = steps[event.detail.previousActiveStep-1];\r\n if (previousActiveStep && !previousActiveStep.complete) {\r\n previousActiveStep.setAttribute('error', 'true');\r\n }\r\n } \r\n\r\n @Watch('activeStep')\r\n handleActiveStep(newStep: number, oldStep: number) {\r\n const steps = this.getSteps();\r\n if (!this.shouldEmitEvent) {\r\n this.shouldEmitEvent = true;\r\n return;\r\n }\r\n // Skipping until the enabled step is found \r\n if(steps[newStep-1]) { \r\n if (!steps[newStep-1].disabled) {\r\n this.emitIfxChange(newStep, oldStep);\r\n } else {\r\n // If coming from higher step number to the lower step number\r\n if (newStep < oldStep) {\r\n let i = newStep;\r\n this.shouldEmitEvent = false;\r\n while (i >= 1 && steps[i-1].disabled) i--;\r\n // if all the steps are disabled no change.\r\n if (i < 1) {\r\n this.activeStep = oldStep;\r\n } else {\r\n this.emitIfxChange(i, oldStep);\r\n this.activeStep = i;\r\n }\r\n } \r\n // If coming from lower step number to the higher step number\r\n else {\r\n let i = newStep;\r\n this.shouldEmitEvent = false;\r\n while (i <= this.stepsCount && steps[i-1].disabled) i++;\r\n if (i > this.stepsCount) {\r\n this.activeStep = oldStep;\r\n } else {\r\n this.emitIfxChange(i, oldStep);\r\n this.activeStep = i;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n \r\n emitIfxChange(activeStep: number, previousActiveStep: number) {\r\n this.ifxChange.emit({activeStep: activeStep, \r\n previousActiveStep: previousActiveStep, \r\n totalSteps: this.stepsCount,\r\n emittedByClick: this.emittedByClick\r\n });\r\n this.emittedByClick = false;\r\n }\r\n\r\n getSteps() {\r\n const steps: NodeListOf<HTMLIfxStepElement> = this.el.querySelectorAll('ifx-step');\r\n return steps;\r\n }\r\n\r\n\r\n addStepIdsToStepsAndCountSteps() {\r\n const steps = this.getSteps()\r\n steps[steps.length - 1].lastStep = true;\r\n for (let i = 0; i < steps.length; i++) {\r\n steps[i].stepId = i + 1;\r\n }\r\n this.stepsCount = steps.length;\r\n }\r\n\r\n\r\n setActiveStep(stepId: number, setByClick: boolean = false) {\r\n this.emittedByClick = setByClick;\r\n this.activeStep = stepId;\r\n }\r\n\r\n setStepsBeforeActiveToComplete() {\r\n const steps = this.getSteps();\r\n steps.forEach( (step, stepId) => {\r\n if (stepId+1 < this.activeStep) step.complete = true;\r\n });\r\n }\r\n\r\n syncIfxSteps() {\r\n const steps = this.getSteps()\r\n for (let i = 0; i < steps.length; i++) {\r\n const stepperState: StepperState = { \r\n activeStep: this.activeStep,\r\n indicatorPosition: (this.indicatorPosition !== 'right' ? 'left' : 'right'), \r\n showStepNumber: this.showStepNumber, \r\n variant: ((this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant), \r\n setActiveStep: this.setActiveStep.bind(this)\r\n };\r\n steps[i].stepperState = stepperState;\r\n }\r\n }\r\n\r\n setInitialActiveStep() {\r\n this.activeStep = Math.max(1, Math.min(this.stepsCount + (this.variant !== 'compact' ? 1 : 0), this.activeStep));\r\n }\r\n\r\n\r\n componentWillLoad() {\r\n this.addStepIdsToStepsAndCountSteps();\r\n this.setInitialActiveStep();\r\n this.setStepsBeforeActiveToComplete();\r\n }\r\n \r\n async componentDidLoad() {\r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-stepper', await framework)\r\n }\r\n this.syncIfxSteps();\r\n }\r\n\r\n componentWillUpdate() {\r\n this.syncIfxSteps();\r\n }\r\n\r\n render() {\r\n return (\r\n <div aria-label = {this.ariaLabel}\r\n aria-current={this.ariaCurrent}\r\n role = 'navigation' \r\n class = {`stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-'+this.indicatorPosition: ''}`}>\r\n {\r\n /* Progress bar for compact variant. */\r\n (this.variant === 'compact') && \r\n <div class = 'stepper-progress'>\r\n <div class = 'progress-detail'>\r\n {`${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`}\r\n </div>\r\n </div>\r\n }\r\n \r\n {/* Slot for ifx-steps. */}\r\n <div class = {`stepper-wrapper`}>\r\n <slot />\r\n </div>\r\n </div>\r\n );\r\n };\r\n\r\n componentDidRender() {\r\n /* Updating progress bar in compact version. */\r\n if (this.variant == 'compact') {\r\n const progressBar: HTMLElement = this.el.shadowRoot.querySelector('.stepper-progress');\r\n progressBar.style.setProperty('--pb', `${(this.activeStep / (this.stepsCount)) * 100}%`);\r\n }\r\n }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-7cf9f8a3.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["treeViewCss","TreeView","constructor","hostRef","this","disableAllItems","expandAllItems","handleSlotRef","el","setAttribute","removeAttribute","handleExpandAllItemsChange","newValue","ifxTreeViewExpandAllChange","emit","handleDisableAllItemsChange","ifxTreeViewDisableAllChange","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","render","h","key","class","role","ariaLabel","label","trim","ref"],"sources":["src/components/tree-view/tree-view.scss?tag=ifx-tree-view&encapsulation=shadow","src/components/tree-view/tree-view.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.tree-view {\r\n font-family: var(--ifx-font-family, sans-serif);\r\n font-size: 14px;\r\n color: var(--ifx-color-text, #1a1a1a);\r\n\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex-direction: column;\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n\r\n &__label {\r\n font: tokens.$ifxHeadingHeading06;\r\n margin-bottom: tokens.$ifxSpace100;\r\n }\r\n}\r\n","import { Component, h, Prop, Event, EventEmitter, Watch, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-tree-view',\r\n styleUrl: 'tree-view.scss',\r\n shadow: true,\r\n})\r\nexport class TreeView {\r\n @Element() el: HTMLElement;\r\n @Prop() label?: string;\r\n @Prop() disableAllItems: boolean = false;\r\n @Prop() expandAllItems: boolean = false;\r\n @Prop() ariaLabel: string | null;\r\n\r\n @Event() ifxTreeViewExpandAllChange: EventEmitter<boolean>;\r\n @Event() ifxTreeViewDisableAllChange: EventEmitter<boolean>;\r\n\r\n @Watch('expandAllItems')\r\n handleExpandAllItemsChange(newValue: boolean) {\r\n this.ifxTreeViewExpandAllChange.emit(newValue);\r\n }\r\n\r\n @Watch('disableAllItems')\r\n handleDisableAllItemsChange(newValue: boolean) {\r\n this.ifxTreeViewDisableAllChange.emit(newValue);\r\n }\r\n\r\n private handleSlotRef = (el: HTMLSlotElement | null) => {\r\n if (el) {\r\n if (this.disableAllItems) {\r\n el.setAttribute('data-disable-all-items', 'true');\r\n } else {\r\n el.removeAttribute('data-disable-all-items');\r\n }\r\n if (this.expandAllItems) {\r\n el.setAttribute('data-expand-all-items', 'true');\r\n } else {\r\n el.removeAttribute('data-expand-all-items');\r\n }\r\n }\r\n };\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-tree-view', await framework)\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div\r\n class={`tree-view ${this.disableAllItems ? ' tree-view--disabled' : ''}`}\r\n role=\"tree\"\r\n aria-label={this.ariaLabel}\r\n >\r\n {this.label && this.label.trim() !== '' && <div class=\"tree-view__label\">{this.label}</div>}\r\n <slot ref={this.handleSlotRef}></slot>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"mappings":"wIAAA,MAAMA,EAAc,wS,MCUPC,EAAQ,MALrB,WAAAC,CAAAC,G,0JAQUC,KAAeC,gBAAY,MAC3BD,KAAcE,eAAY,MAgB1BF,KAAAG,cAAiBC,IACvB,GAAIA,EAAI,CACN,GAAIJ,KAAKC,gBAAiB,CACxBG,EAAGC,aAAa,yBAA0B,O,KACrC,CACLD,EAAGE,gBAAgB,yB,CAErB,GAAIN,KAAKE,eAAgB,CACvBE,EAAGC,aAAa,wBAAyB,O,KACpC,CACLD,EAAGE,gBAAgB,wB,GAwB1B,CA3CC,0BAAAC,CAA2BC,GACzBR,KAAKS,2BAA2BC,KAAKF,E,CAIvC,2BAAAG,CAA4BH,GAC1BR,KAAKY,4BAA4BF,KAAKF,E,CAkBxC,sBAAMK,GACJ,IAAIC,EAAuBd,KAAKI,IAAK,CACnC,MAAMW,EAAYC,IAClBC,EAAe,sBAAuBF,E,EAI1C,MAAAG,GACE,OACEC,EACE,OAAAC,IAAA,2CAAAC,MAAO,aAAarB,KAAKC,gBAAkB,uBAAyB,KACpEqB,KAAK,OAAM,aACCtB,KAAKuB,WAEhBvB,KAAKwB,OAASxB,KAAKwB,MAAMC,SAAW,IAAMN,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBAAoBrB,KAAKwB,OAC/EL,EAAM,QAAAC,IAAA,2CAAAM,IAAK1B,KAAKG,gB","ignoreList":[]}