npm - @infineon/infineon-design-system-stencil - Versions diffs - 36.0.0 → 36.0.1--canary.1923.57a1578e5932e0af18e49993c2f091a48f516023.0 - Mend

@infineon/infineon-design-system-stencil 36.0.0 → 36.0.1--canary.1923.57a1578e5932e0af18e49993c2f091a48f516023.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 (102) hide show

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

@@ -1 +0,0 @@

- {"version":3,"names":["navbarItemCss","IfxNavbarProfileStyle0","NavbarProfile","constructor","hostRef","this","showLabel","href","imageUrl","target","alt","userName","internalHref","isMenuItem","hasChildNavItems","internalImageUrl","type","value","defaultProfileImage","handleOutsideClick","event","path","composedPath","itemMenu","getItemMenu","classList","contains","includes","el","closeItemMenu","componentWillLoad","setHref","setImage","sidebarItems","getNavbarItems","length","componentDidLoad","setProfileGap","navItems","appendNavItemToMenu","hideComponent","style","display","showComponent","handleClassList","className","querySelectorAll","getNavBarItem","navItem","shadowRoot","querySelector","relocateUsingSlot","forEach","item","setAttribute","isValidHttpUrl","string","url","URL","_","protocol","toLowerCase","trim","undefined","innerContentWrapper","labelWrapper","labelSlot","nodes","assignedNodes","menu","menuItem","toggleItemMenu","itemHasNestedItems","childNavItem","render","h","key","class","onClick","src","encodeURIComponent","onSlotchange","name"],"sources":["src/components/navigation/navbar/navbar-item.scss?tag=ifx-navbar-profile&encapsulation=shadow","src/components/navigation/navbar/navbar-profile.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host(.hidden) {\n display: none;\n}\n\n.navbar__item {\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px 8px;\n flex: none;\n order: 0;\n flex-grow: 0;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n text-decoration: none;\n font-weight: 400;\n font-size: 16px;\n color: tokens.$ifxColorBaseBlack;\n\n &.hide { \n display: none;\n }\n\n &.isParent { \n gap: 8px;\n }\n\n & .navItemIconWrapper { \n transition: .3s;\n display: flex;\n }\n\n &.open { \n & .navItemIconWrapper { \n transform: rotate(-180deg);\n transition: .3s;\n }\n }\n\n &:hover {\n color: tokens.$ifxColorOcean500;\n cursor: pointer;\n\n & .username__tooltip { \n display: block;\n }\n\n & .navbar__container-right-content-navigation-item-icon-wrapper { \n & .initials__wrapper { \n cursor: pointer;\n background-color: tokens.$ifxColorOcean600;\n }\n }\n }\n\n &.remove {\n display: none;\n }\n\n &.removeLabel {\n & .label__wrapper {\n display: none;\n }\n }\n\n & .number__indicator-wrapper { \n position: relative;\n top: -11px;\n }\n\n & .navbar__container-right-content-navigation-item-icon-wrapper {\n position: relative;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px;\n gap: 8px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n \n & .username__tooltip { \n display: none;\n position: absolute;\n top: 35px;\n right: 0;\n text-wrap: nowrap;\n padding: 1px 5px;\n font-size: 13px;\n font-family: \"Source Sans 3\";\n background-color: black;\n color: #fff;\n z-index: 99;\n }\n\n &:hover { \n & .username__tooltip { \n display: block;\n }\n }\n\n & .initials__wrapper { \n display: flex;\n width: 24px;\n height: 24px;\n justify-content: center;\n align-items: center;\n border-radius: 100%;\n background-color: tokens.$ifxColorOcean500;\n\n & .initials { \n color: #FFF;\n text-align: center;\n font-family: \"Source Sans 3\";\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px; \n\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n \n }\n }\n\n & img { \n width: 24px; \n height: 24px;\n border-radius: 100%;\n }\n\n &.removeWrapper {\n display: none;\n }\n\n &.hide {\n display: none;\n }\n }\n}\n\n.container { \n position: relative;\n\n & .sub__layer-back-button { \n display: none;\n &.show { \n display: flex;\n justify-content: flex-start;\n\n & .back__button-wrapper { \n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace100;\n padding: tokens.$ifxSpace100 0 tokens.$ifxSpace200 0;\n color: tokens.$ifxColorOcean500;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n\n & span, & ifx-icon { \n &:hover { \n cursor: pointer;\n }\n }\n\n }\n }\n }\n\n &.hide { \n display: none;\n }\n\n & .inner__content-wrapper { \n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 8px;\n &.no-gap { \n gap: 0px;\n }\n\n & .navbar__container-right-content-navigation-item-icon-wrapper {\n &.no-gap { \n gap: 0px;\n }\n }\n\n & .number__indicator-wrapper { \n position: relative;\n top: -11px;\n }\n\n }\n}\n\n.navbar-menu {\n position: absolute;\n display: none;\n list-style-type: none;\n visibility: visible;\n flex-direction: column;\n width: 224px;\n min-width: 224px;\n background: tokens.$ifxColorBaseWhite;\n box-shadow: 0px 6px 9px 0px #1d1d1d1a;\n border: 1px solid tokens.$ifxColorEngineering200;\n padding: 8px 0px;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n &.open:not(.itemInMobileMenu) {\n display: flex;\n }\n\n &.itemInMobileMenu { \n display: none;\n }\n\n &.right { \n left: 100%;\n top: -40%;\n }\n\n &.left { \n top: -40%;\n right: 100%;\n }\n\n &.rightSideItemMenu { \n left: initial;\n right: 0px;\n }\n}\n\n.navbar__item { \n &.layer__item-parent { \n color: tokens.$ifxColorBaseBlack;\n font-size: 24px;\n font-style: normal;\n font-weight: 600;\n line-height: 32px; \n letter-spacing: -0.24px;\n cursor: initial;\n\n & .navbar__container-right-content-navigation-item-icon-wrapper { \n & ifx-icon { \n & svg { \n width: 24px;\n height: 24px;\n }\n }\n }\n }\n\n\n &.sidebarMenuItem { \n justify-content: space-between;\n padding: 0;\n }\n\n\n &.menuItem {\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 16px;\n gap: 8px;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n \n &.hide {\n display: none;\n }\n \n & .label__wrapper {\n color: tokens.$ifxColorBaseBlack;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n }\n \n &:hover {\n cursor: pointer;\n background-color: tokens.$ifxColorEngineering200;\n }\n \n &:active {\n background-color: tokens.$ifxColorEngineering300;\n }\n }\n}\n\n.sub__layer-menu { \n padding: 5px;\n display: none;\n\n &.remove__margin { \n margin: 0;\n padding: 0;\n }\n \n &.open { \n display: block;\n }\n}\n\n.navbar__item { \n &.hide { \n display: none;\n }\n}\n\n.menuItemRightIconWrapper { \n &.hide { \n display: none;\n }\n}\n\n.navItemIconWrapper { \n &.hide { \n display: none;\n }\n}\n\n","import { Component, h, Element, Prop, State, Listen, Method } from \"@stencil/core\";\n\n@Component({\n tag: 'ifx-navbar-profile',\n styleUrl: 'navbar-item.scss',\n shadow: true,\n assetsDirs: ['assets']\n})\n\nexport class NavbarProfile {\n\n @Element() el;\n @Prop() showLabel: boolean = true;\n @Prop() href: string = \"\"\n @Prop() imageUrl: string = \"\"\n @Prop() target: string = \"_self\";\n @Prop() alt: string = \"\"\n @Prop() userName: string = \"\";\n @State() internalHref: string = \"\"\n @State() isMenuItem: boolean = false;\n @State() hasChildNavItems: boolean = false;\n @State() internalImageUrl: any = {type: \"\", value: \"\"}\n \n private defaultProfileImage = `<svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect width=\"48\" height=\"48\" fill=\"#0A8276\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M24 14C21.7909 14 20 15.7909 20 18C20 20.2091 21.7909 22 24 22C26.2091 22 28 20.2091 28 18C28 15.7909 26.2091 14 24 14ZM18 18C18 14.6863 20.6863 12 24 12C27.3137 12 30 14.6863 30 18C30 21.3137 27.3137 24 24 24C20.6863 24 18 21.3137 18 18ZM16.5869 28.3984C18.2683 27.0179 20.7466 26 24 26C27.2541 26 29.7324 27.0209 31.4134 28.4024C33.0562 29.7526 34 31.5119 34 33V35C34 35.5523 33.5523 36 33 36H15C14.4477 36 14 35.5523 14 35V33C14 31.5074 14.9433 29.7479 16.5869 28.3984ZM17.8561 29.9441C16.5187 31.0421 16 32.2826 16 33V34H32V33C32 32.2881 31.4818 31.0474 30.1436 29.9476C28.8436 28.8791 26.8219 28 24 28C21.1774 28 19.1557 28.8771 17.8561 29.9441Z\" fill=\"white\"/>\n</svg>`\n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n const itemMenu = this.getItemMenu()\n if(itemMenu) { \n if(itemMenu.classList.contains('open')) { \n if (!path.includes(this.el)) {\n this.closeItemMenu();\n }\n }\n }\n }\n\n componentWillLoad() {\n this.setHref()\n this.setImage()\n const sidebarItems = this.getNavbarItems();\n if (sidebarItems.length !== 0) {\n this.hasChildNavItems = true;\n } else {\n this.hasChildNavItems = false;\n }\n }\n\n componentDidLoad() { \n this.setProfileGap()\n if(this.hasChildNavItems) { \n const navItems = this.getNavbarItems();\n this.appendNavItemToMenu(navItems)\n }\n }\n\n @Method()\n async hideComponent() { \n this.el.style.display = 'none';\n }\n\n @Method()\n async showComponent() { \n this.el.style.display = '';\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n if (type === 'contains') {\n return el.classList.contains(className)\n }\n }\n\n getNavbarItems() {\n const navItems = this.el.querySelectorAll('ifx-navbar-item')\n return navItems;\n }\n \n getNavBarItem() { \n const navItem = this.el.shadowRoot.querySelector('.navbar__item')\n return navItem;\n }\n\n relocateUsingSlot(navItems) { \n navItems.forEach(item => {\n item.setAttribute('slot', 'first__layer')\n })\n }\n\n appendNavItemToMenu(navItems) { \n this.relocateUsingSlot(navItems)\n }\n\n isValidHttpUrl(string) {\n let url;\n \n try {\n url = new URL(string);\n } catch (_) {\n return false; \n }\n \n return url.protocol === \"http:\" || url.protocol === \"https:\";\n }\n\n setImage() { \n if (this.imageUrl.toLowerCase().trim() === \"\") {\n this.internalImageUrl = {type: undefined, value: \"\"}\n } else if(this.isValidHttpUrl(this.imageUrl)) {\n this.internalImageUrl = { type: 'url', value: this.imageUrl}\n } else { \n this.internalImageUrl = { type: 'initials', value: this.imageUrl}\n }\n }\n\n setHref() {\n if (this.href.toLowerCase().trim() === \"\") {\n this.internalHref = undefined;\n } else this.internalHref = this.href;\n }\n\n setProfileGap() { \n const innerContentWrapper = this.el.shadowRoot.querySelector('.inner__content-wrapper')\n const labelWrapper = this.el.shadowRoot.querySelector('.label__wrapper')\n const labelSlot = labelWrapper.querySelector('slot')\n const nodes = labelSlot.assignedNodes();\n if(!nodes.length) { \n this.handleClassList(innerContentWrapper, 'add', 'no-gap')\n } else { \n this.handleClassList(innerContentWrapper, 'remove', 'no-gap')\n }\n }\n\n getItemMenu() { \n const menu = this.el.shadowRoot.querySelector('.navbar-menu');\n return menu;\n }\n\n closeItemMenu() { \n const itemMenu = this.getItemMenu()\n const menuItem = this.getNavBarItem()\n if(itemMenu) { \n this.handleClassList(itemMenu, 'remove', 'open')\n this.handleClassList(menuItem, 'remove', 'open')\n }\n }\n\n toggleItemMenu() {\n if(!this.internalHref) { \n if(this.isMenuItem && this.hasChildNavItems) { \n const itemMenu = this.getItemMenu()\n this.handleClassList(itemMenu, 'add', 'right')\n }\n \n if(this.hasChildNavItems) { \n const itemMenu = this.getItemMenu();\n const menuItem = this.getNavBarItem()\n this.handleClassList(itemMenu, 'toggle', 'open');\n this.handleClassList(menuItem, 'toggle', 'open');\n } \n }\n }\n\n itemHasNestedItems() { \n const childNavItem = this.el.shadowRoot.querySelector('ifx-navbar-item')\n if(childNavItem) { \n return true;\n } else {\n return false;\n }\n }\n\n\n render() {\n return (\n <div class=\"container\">\n <a href={this.internalHref} target={this.target} onClick={() => this.toggleItemMenu()} class= {`navbar__item ${!this.showLabel ? 'removeLabel' : \"\"} ${this.hasChildNavItems ? 'isParent' : \"\"}`}>\n <div class=\"inner__content-wrapper\">\n <div class={`navbar__container-right-content-navigation-item-icon-wrapper`}>\n {this.userName.trim() !== \"\" && <div class='username__tooltip'>{this.userName}</div>}\n\n {this.internalImageUrl.type !== 'initials' && \n <img src={ this.internalImageUrl.type === 'url' ? this.internalImageUrl.value : `data:image/svg+xml,${encodeURIComponent(this.defaultProfileImage)}`} alt={this.alt} />}\n\n {this.internalImageUrl.type === 'initials' && \n <div class=\"initials__wrapper\">\n <span class=\"initials\">{this.internalImageUrl.value}</span>\n </div>}\n \n </div>\n <span class=\"label__wrapper\">\n <slot onSlotchange={() => this.setProfileGap()} />\n </span>\n </div>\n {/* {this.userName.trim() !== \"\" && <div class='username__tooltip'>{this.userName}</div>} */}\n </a>\n \n {this.hasChildNavItems && <ul class='navbar-menu rightSideItemMenu'> <slot name=\"first__layer\" /> </ul>}\n </div>\n )\n }\n}"],"mappings":"kDAAA,MAAMA,EAAgB,owJACtB,MAAAC,EAAeD,E,MCQFE,EAAa,MAP1B,WAAAC,CAAAC,G,UAUUC,KAAAC,UAAqB,KACrBD,KAAAE,KAAe,GACfF,KAAAG,SAAmB,GACnBH,KAAAI,OAAiB,QACjBJ,KAAAK,IAAc,GACdL,KAAAM,SAAmB,GAClBN,KAAAO,aAAuB,GACvBP,KAAAQ,WAAsB,MACtBR,KAAAS,iBAA4B,MAC5BT,KAAAU,iBAAwB,CAACC,KAAM,GAAIC,MAAO,IAE3CZ,KAAAa,oBAAsB,q2B,CAM9B,kBAAAC,CAAmBC,GACjB,MAAMC,EAAOD,EAAME,eACnB,MAAMC,EAAWlB,KAAKmB,cACtB,GAAGD,EAAU,CACX,GAAGA,EAASE,UAAUC,SAAS,QAAS,CACtC,IAAKL,EAAKM,SAAStB,KAAKuB,IAAK,CAC3BvB,KAAKwB,e,IAMb,iBAAAC,GACEzB,KAAK0B,UACL1B,KAAK2B,WACL,MAAMC,EAAe5B,KAAK6B,iBAC1B,GAAID,EAAaE,SAAW,EAAG,CAC7B9B,KAAKS,iBAAmB,I,KACnB,CACLT,KAAKS,iBAAmB,K,EAI5B,gBAAAsB,GACE/B,KAAKgC,gBACL,GAAGhC,KAAKS,iBAAkB,CACxB,MAAMwB,EAAWjC,KAAK6B,iBACtB7B,KAAKkC,oBAAoBD,E,EAK7B,mBAAME,GACJnC,KAAKuB,GAAGa,MAAMC,QAAU,M,CAI1B,mBAAMC,GACJtC,KAAKuB,GAAGa,MAAMC,QAAU,E,CAG1B,eAAAE,CAAgBhB,EAAIZ,EAAM6B,GACxBjB,EAAGH,UAAUT,GAAM6B,GACnB,GAAI7B,IAAS,WAAY,CACvB,OAAOY,EAAGH,UAAUC,SAASmB,E,EAIjC,cAAAX,GACE,MAAMI,EAAWjC,KAAKuB,GAAGkB,iBAAiB,mBAC1C,OAAOR,C,CAGT,aAAAS,GACE,MAAMC,EAAU3C,KAAKuB,GAAGqB,WAAWC,cAAc,iBACjD,OAAOF,C,CAGT,iBAAAG,CAAkBb,GAChBA,EAASc,SAAQC,IAChBA,EAAKC,aAAa,OAAQ,eAAe,G,CAI5C,mBAAAf,CAAoBD,GAClBjC,KAAK8C,kBAAkBb,E,CAGzB,cAAAiB,CAAeC,GACb,IAAIC,EAEJ,IACEA,EAAM,IAAIC,IAAIF,E,CACd,MAAOG,GACP,OAAO,K,CAGT,OAAOF,EAAIG,WAAa,SAAWH,EAAIG,WAAa,Q,CAGtD,QAAA5B,GACE,GAAI3B,KAAKG,SAASqD,cAAcC,SAAW,GAAI,CAC7CzD,KAAKU,iBAAmB,CAACC,KAAM+C,UAAW9C,MAAO,G,MAC5C,GAAGZ,KAAKkD,eAAelD,KAAKG,UAAW,CAC5CH,KAAKU,iBAAmB,CAAEC,KAAM,MAAOC,MAAOZ,KAAKG,S,KAC9C,CACLH,KAAKU,iBAAmB,CAAEC,KAAM,WAAYC,MAAOZ,KAAKG,S,EAI5D,OAAAuB,GACE,GAAI1B,KAAKE,KAAKsD,cAAcC,SAAW,GAAI,CACzCzD,KAAKO,aAAemD,S,MACf1D,KAAKO,aAAeP,KAAKE,I,CAGlC,aAAA8B,GACE,MAAM2B,EAAsB3D,KAAKuB,GAAGqB,WAAWC,cAAc,2BAC7D,MAAMe,EAAe5D,KAAKuB,GAAGqB,WAAWC,cAAc,mBACtD,MAAMgB,EAAYD,EAAaf,cAAc,QAC7C,MAAMiB,EAAQD,EAAUE,gBACxB,IAAID,EAAMhC,OAAQ,CAChB9B,KAAKuC,gBAAgBoB,EAAqB,MAAO,S,KAC5C,CACL3D,KAAKuC,gBAAgBoB,EAAqB,SAAU,S,EAIxD,WAAAxC,GACE,MAAM6C,EAAOhE,KAAKuB,GAAGqB,WAAWC,cAAc,gBAC9C,OAAOmB,C,CAGT,aAAAxC,GACE,MAAMN,EAAWlB,KAAKmB,cACtB,MAAM8C,EAAWjE,KAAK0C,gBACtB,GAAGxB,EAAU,CACXlB,KAAKuC,gBAAgBrB,EAAU,SAAU,QACzClB,KAAKuC,gBAAgB0B,EAAU,SAAU,O,EAI7C,cAAAC,GACE,IAAIlE,KAAKO,aAAc,CACrB,GAAGP,KAAKQ,YAAcR,KAAKS,iBAAkB,CAC3C,MAAMS,EAAWlB,KAAKmB,cACtBnB,KAAKuC,gBAAgBrB,EAAU,MAAO,Q,CAGxC,GAAGlB,KAAKS,iBAAkB,CACxB,MAAMS,EAAWlB,KAAKmB,cACtB,MAAM8C,EAAWjE,KAAK0C,gBACtB1C,KAAKuC,gBAAgBrB,EAAU,SAAU,QACzClB,KAAKuC,gBAAgB0B,EAAU,SAAU,O,GAK/C,kBAAAE,GACE,MAAMC,EAAepE,KAAKuB,GAAGqB,WAAWC,cAAc,mBACtD,GAAGuB,EAAc,CACf,OAAO,I,KACF,CACL,OAAO,K,EAKX,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,aACTF,EAAA,KAAAC,IAAA,2CAAGrE,KAAMF,KAAKO,aAAcH,OAAQJ,KAAKI,OAAQqE,QAAS,IAAMzE,KAAKkE,iBAAkBM,MAAU,iBAAiBxE,KAAKC,UAAY,cAAgB,MAAMD,KAAKS,iBAAmB,WAAa,MAC5L6D,EAAA,OAAAC,IAAA,2CAAKC,MAAM,0BACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAO,gEACVxE,KAAKM,SAASmD,SAAW,IAAMa,EAAA,OAAAC,IAAA,2CAAKC,MAAM,qBAAqBxE,KAAKM,UAEpEN,KAAKU,iBAAiBC,OAAS,YAC/B2D,EAAA,OAAAC,IAAA,2CAAKG,IAAM1E,KAAKU,iBAAiBC,OAAS,MAAQX,KAAKU,iBAAiBE,MAAQ,sBAAsB+D,mBAAmB3E,KAAKa,uBAAwBR,IAAKL,KAAKK,MAE/JL,KAAKU,iBAAiBC,OAAS,YAChC2D,EAAA,OAAAC,IAAA,2CAAKC,MAAM,qBACTF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,YAAYxE,KAAKU,iBAAiBE,SAIlD0D,EAAA,QAAAC,IAAA,2CAAMC,MAAM,kBACVF,EAAA,QAAAC,IAAA,2CAAMK,aAAc,IAAM5E,KAAKgC,qBAMpChC,KAAKS,kBAAoB6D,EAAA,MAAAC,IAAA,2CAAIC,MAAM,iCAA+B,IAAEF,EAAA,QAAAC,IAAA,2CAAMM,KAAK,iBAAiB,K","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-676fb63a.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as e,c as i,h as s}from"./p-b7a462e5.js";import{c as r}from"./p-5cdc6210.js";const t=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:flex}.search-field{box-sizing:border-box;background-color:#FFFFFF;width:100%;font-family:var(--ifx-font-family)}.search-field .search-field__wrapper{box-sizing:border-box;height:40px;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;padding:8px 16px;gap:12px;flex:none;order:0;align-self:stretch;flex-grow:0;position:relative;width:100%;outline:none;color:#8D8786}.search-field .search-field__wrapper.focused{border:1px solid #0A8276}.search-field .search-field__wrapper.focused ifx-icon{color:#575352}.search-field .search-field__wrapper.search-field__wrapper-s{height:36px}.search-field .search-field__wrapper:hover:not(.focused,:focus){border:1px solid #3C3A39}.search-field .search-field__wrapper:focus{outline:none;border:1px solid #0A8276}.search-field .search-field__wrapper .delete-icon{right:12px;cursor:pointer}.search-field .search-field__wrapper input[type=text]{font-style:normal;font-weight:400;font-size:16px;color:#8D8786;border:none;width:100%;outline:none;height:16px}.search-field .search-field__wrapper input[type=text]:focus{outline:none;color:#1d1d1d}.search-field .search-field__wrapper input[type=text]:disabled{background-color:#EEEDED}.search-field .search-field__wrapper:has(input[disabled]){background-color:#EEEDED}';const a=t;const h=class{constructor(s){e(this,s);this.ifxInput=i(this,"ifxInput",7);this.value="";this.insideDropdown=false;this.showDeleteIcon=false;this.showDeleteIconInternalState=false;this.disabled=false;this.size="l";this.isFocused=false;this.placeholder="Search...";this.autocomplete="on";this.maxlength=null;this.handleInput=()=>{const e=this.inputElement.value;this.value=e;this.ifxInput.emit(this.value)};this.handleDelete=()=>{this.inputElement.value="";this.value="";this.ifxInput.emit(this.value)}}handleOutsideClick(e){const i=e.composedPath();if(!i.includes(this.inputElement)){this.isFocused=false}}valueWatcher(e){if(e!==this.inputElement.value){this.inputElement.value=e}}focusInput(){this.inputElement.focus();this.isFocused=true}componentWillUpdate(){if(this.value!==""){this.showDeleteIconInternalState=true}else this.showDeleteIconInternalState=false}render(){return s("div",{key:"1c934e49ec338b1143beb1b38cbc81fc4b9143f7","aria-label":"a search field for user input","aria-disabled":this.disabled,"aria-value":this.value,class:"search-field"},s("div",{key:"ee18e7140c47744ac35f15afef353162e36743df",class:this.getWrapperClassNames(),tabindex:1,onFocus:()=>this.focusInput(),onClick:()=>this.focusInput()},s("ifx-icon",{key:"80b1068a48da7f09ba2587889b121acdaeee4559",icon:"search-16",class:"search-icon"}),s("input",{key:"006e6806d44fe10331b051b1f44f310276026ffe",ref:e=>this.inputElement=e,type:"text",autocomplete:this.autocomplete,onInput:()=>this.handleInput(),placeholder:this.placeholder,disabled:this.disabled,maxlength:this.maxlength,value:this.value}),this.showDeleteIcon&&this.showDeleteIconInternalState?s("ifx-icon",{icon:"cRemove16",class:"delete-icon",onClick:this.handleDelete}):null))}getSizeClass(){return`${this.size}`==="s"?"search-field__wrapper-s":""}getWrapperClassNames(){return r(`search-field__wrapper`,`search-field__wrapper ${this.getSizeClass()}`,`${this.isFocused?"focused":""}`)}static get watchers(){return{value:["valueWatcher"]}}};h.style=a;export{h as ifx_search_field};
2	- //# sourceMappingURL=p-676fb63a.entry.js.map

package/dist/infineon-design-system-stencil/p-676fb63a.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["searchFieldCss","IfxSearchFieldStyle0","SearchField","constructor","hostRef","this","value","insideDropdown","showDeleteIcon","showDeleteIconInternalState","disabled","size","isFocused","placeholder","autocomplete","maxlength","handleInput","query","inputElement","ifxInput","emit","handleDelete","handleOutsideClick","event","path","composedPath","includes","valueWatcher","newValue","focusInput","focus","componentWillUpdate","render","h","key","class","getWrapperClassNames","tabindex","onFocus","onClick","icon","ref","el","type","onInput","getSizeClass","classNames"],"sources":["src/components/search-field/search-field.scss?tag=ifx-search-field&encapsulation=shadow","src/components/search-field/search-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n}\n\n.search-field {\n box-sizing: border-box;\n background-color: tokens.$ifxColorBaseWhite;\n width: 100%;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n\n .search-field__wrapper {\n box-sizing: border-box;\n height: tokens.$ifxSize500;\n display: flex;\n align-items: center;\n border: 1px solid #8D8786;\n border-radius: tokens.$ifxBorderRadius12;\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n position: relative;\n width: 100%;\n outline: none;\n color: tokens.$ifxColorEngineering400;\n\n &.focused {\n border: 1px solid tokens.$ifxColorOcean500;\n\n & ifx-icon {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n &.search-field__wrapper-s {\n height: 36px;\n }\n\n\n &:hover:not(.focused, :focus) {\n border: 1px solid #3C3A39;\n }\n\n &:focus {\n outline: none;\n border: 1px solid #0A8276;\n }\n\n\n .delete-icon {\n right: 12px;\n cursor: pointer;\n }\n\n input[type='text'] {\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n //line-height: 24px;\n color: #8D8786;\n border: none;\n width: 100%;\n outline: none;\n //height: 100%;\n height: 16px;\n\n &:focus {\n outline: none;\n color: #1d1d1d;\n }\n\n &:disabled {\n background-color: #EEEDED;\n }\n }\n\n &:has(input[disabled]) {\n background-color: #EEEDED;\n }\n }\n}","import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n\n@Component({\n tag: 'ifx-search-field',\n styleUrl: 'search-field.scss',\n shadow: true\n})\n\n\nexport class SearchField {\n private inputElement: HTMLInputElement;\n @Prop({ mutable: true }) value: string = '';\n\n @Event() ifxInput: EventEmitter<String>;\n @State() insideDropdown: boolean = false;\n\n @Prop() showDeleteIcon: boolean = false;\n @State() showDeleteIconInternalState: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() size: string = 'l';\n @State() isFocused: boolean = false;\n @Prop() placeholder: string = \"Search...\";\n @Prop() autocomplete: string = \"on\";\n @Prop() maxlength?: number = null; \n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n if (!path.includes(this.inputElement)) {\n this.isFocused = false;\n }\n }\n\n @Watch('value')\n valueWatcher(newValue: string) {\n if (newValue !== this.inputElement.value) {\n this.inputElement.value = newValue;\n }\n }\n\n\n handleInput = () => {\n const query = this.inputElement.value;\n this.value = query; // update the value property when input changes\n this.ifxInput.emit(this.value);\n };\n\n handleDelete = () => {\n this.inputElement.value = '';\n this.value = \"\";\n this.ifxInput.emit(this.value);\n }\n\n focusInput() {\n this.inputElement.focus();\n this.isFocused = true;\n }\n \n\n\n\n componentWillUpdate() {\n if (this.value !== \"\") {\n this.showDeleteIconInternalState = true;\n } else this.showDeleteIconInternalState = false;\n }\n\n render() {\n return (\n <div aria-label=\"a search field for user input\" aria-disabled={this.disabled} aria-value={this.value} class='search-field'>\n <div class={this.getWrapperClassNames()}\n tabindex={1}\n onFocus={() => this.focusInput()}\n onClick={() => this.focusInput()}\n >\n <ifx-icon icon=\"search-16\" class=\"search-icon\"></ifx-icon>\n <input\n ref={(el) => (this.inputElement = el)}\n type=\"text\"\n autocomplete={this.autocomplete}\n onInput={() => this.handleInput()}\n placeholder={this.placeholder}\n disabled={this.disabled}\n maxlength={this.maxlength}\n value={this.value} // bind the value property to input element\n />\n {this.showDeleteIcon && this.showDeleteIconInternalState ? (\n <ifx-icon icon=\"cRemove16\" class=\"delete-icon\" onClick={this.handleDelete}>\n </ifx-icon>\n ) : null}\n </div>\n </div>\n );\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"search-field__wrapper-s\"\n : \"\";\n }\n\n\n getWrapperClassNames() {\n return classNames(\n `search-field__wrapper`,\n `search-field__wrapper ${this.getSizeClass()}`,\n `${this.isFocused ? 'focused' : \"\"}`\n );\n }\n}"],"mappings":"sFAAA,MAAMA,EAAiB,m0CACvB,MAAAC,EAAeD,E,MCWFE,EAAW,MAPxB,WAAAC,CAAAC,G,6CAS2BC,KAAAC,MAAgB,GAGhCD,KAAAE,eAA0B,MAE3BF,KAAAG,eAA0B,MACzBH,KAAAI,4BAAuC,MACxCJ,KAAAK,SAAoB,MACpBL,KAAAM,KAAe,IACdN,KAAAO,UAAqB,MACtBP,KAAAQ,YAAsB,YACtBR,KAAAS,aAAuB,KACvBT,KAAAU,UAAqB,KAkB7BV,KAAAW,YAAc,KACZ,MAAMC,EAAQZ,KAAKa,aAAaZ,MAChCD,KAAKC,MAAQW,EACbZ,KAAKc,SAASC,KAAKf,KAAKC,MAAM,EAGhCD,KAAAgB,aAAe,KACbhB,KAAKa,aAAaZ,MAAQ,GAC1BD,KAAKC,MAAQ,GACbD,KAAKc,SAASC,KAAKf,KAAKC,MAAM,C,CAxBhC,kBAAAgB,CAAmBC,GACjB,MAAMC,EAAOD,EAAME,eACnB,IAAKD,EAAKE,SAASrB,KAAKa,cAAe,CACrCb,KAAKO,UAAY,K,EAKrB,YAAAe,CAAaC,GACX,GAAIA,IAAavB,KAAKa,aAAaZ,MAAO,CACxCD,KAAKa,aAAaZ,MAAQsB,C,EAiB9B,UAAAC,GACExB,KAAKa,aAAaY,QAClBzB,KAAKO,UAAY,I,CAMnB,mBAAAmB,GACE,GAAI1B,KAAKC,QAAU,GAAI,CACrBD,KAAKI,4BAA8B,I,MAC9BJ,KAAKI,4BAA8B,K,CAG5C,MAAAuB,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,gCAA+B,gBAAgB7B,KAAKK,SAAQ,aAAcL,KAAKC,MAAO6B,MAAM,gBAC1GF,EAAA,OAAAC,IAAA,2CAAKC,MAAO9B,KAAK+B,uBACfC,SAAU,EACVC,QAAS,IAAMjC,KAAKwB,aACpBU,QAAS,IAAMlC,KAAKwB,cAEpBI,EAAA,YAAAC,IAAA,2CAAUM,KAAK,YAAYL,MAAM,gBACjCF,EAAA,SAAAC,IAAA,2CACEO,IAAMC,GAAQrC,KAAKa,aAAewB,EAClCC,KAAK,OACL7B,aAAcT,KAAKS,aACnB8B,QAAS,IAAMvC,KAAKW,cACpBH,YAAaR,KAAKQ,YAClBH,SAAUL,KAAKK,SACfK,UAAWV,KAAKU,UAChBT,MAAOD,KAAKC,QAEbD,KAAKG,gBAAkBH,KAAKI,4BAC3BwB,EAAA,YAAUO,KAAK,YAAYL,MAAM,cAAcI,QAASlC,KAAKgB,eAE3D,M,CAMZ,YAAAwB,GACE,MAAO,GAAGxC,KAAKM,SAAW,IACtB,0BACA,E,CAIN,oBAAAyB,GACE,OAAOU,EACL,wBACA,yBAAyBzC,KAAKwC,iBAC9B,GAAGxC,KAAKO,UAAY,UAAY,K","ignoreList":[]}

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

	@@ -1,2 +0,0 @@
1	- import{r as e,c as i,h as t,g as s}from"./p-b7a462e5.js";const a=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{position:relative}.sidebar__nav-item:focus,.sidebar__nav-item.header__section:focus{outline:none}.sidebar__nav-item:focus .sidebar__nav-item-icon-wrapper,.sidebar__nav-item.header__section:focus .sidebar__nav-item-icon-wrapper{color:#08665C}.sidebar__nav-item:focus .sidebar__nav-item-label,.sidebar__nav-item.header__section:focus .sidebar__nav-item-label{outline:none;color:#08665C}.sidebar__nav-item:focus .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon,.sidebar__nav-item.header__section:focus .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{color:#08665C}.sidebar__nav-item:hover,.sidebar__nav-item.header__section:hover{outline:none}.sidebar__nav-item:hover .sidebar__nav-item-icon-wrapper,.sidebar__nav-item.header__section:hover .sidebar__nav-item-icon-wrapper{color:#08665C}.sidebar__nav-item:hover .sidebar__nav-item-label,.sidebar__nav-item.header__section:hover .sidebar__nav-item-label{outline:none;color:#08665C}.sidebar__nav-item:hover .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon,.sidebar__nav-item.header__section:hover .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{color:#08665C}.sidebar__nav-item{display:flex;flex-direction:row;align-items:center;width:100%;padding:8px 0px;gap:4px;flex:none;order:0;flex-grow:0;text-decoration:none;color:#1D1D1D;cursor:pointer;font-family:var(--ifx-font-family)}.sidebar__nav-item.extra-padding__bottom{padding:8px 0px 16px 0px}.sidebar__nav-item.active{color:#0A8276}.sidebar__nav-item.active-section::before{content:"";position:absolute;left:-32px;height:40px;width:2px;background:#0A8276}.sidebar__nav-item.open{padding:8px 0px}.sidebar__nav-item.open .sidebar__nav-item-label{font-size:16px;font-style:normal;font-weight:400;line-height:24px}.sidebar__nav-item.open .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{transform:rotate(-180deg)}.sidebar__nav-item.header__section{box-sizing:padding-box;border-top:1px solid #EEEDED;padding:16px 0px;display:-webkit-flex;-webkit-line-clamp:1;-webkit-box-orient:horizontal;overflow:hidden;text-overflow:ellipsis}.sidebar__nav-item.header__section.no-top-border{border-top:none}.sidebar__nav-item.header__section.active-section::before{content:"";position:absolute;left:-32px;height:40px;width:2px;background:#0A8276}.sidebar__nav-item.header__section.open{padding:16px 0px 8px 0px}.sidebar__nav-item.header__section.open .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{transform:rotate(-180deg)}.sidebar__nav-item.header__section .sidebar__nav-item-label{color:#1D1D1D;font-family:Source Sans 3;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.sidebar__nav-item.submenu__item{padding:4px 0px}.sidebar__nav-item.submenu__item.extra-padding__bottom{padding:4px 0px 16px 0px}.sidebar__nav-item .sidebar__nav-item-icon-wrapper{display:flex;width:24px;height:24px;justify-content:center;align-items:center;gap:8px;flex-shrink:0}.sidebar__nav-item .sidebar__nav-item-icon-wrapper.noIcon{display:none}.sidebar__nav-item .sidebar__nav-item-icon-wrapper ifx-icon{width:16px;height:16px}.sidebar__nav-item .sidebar__nav-item-label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;display:flex;align-items:center;flex:none;order:1;flex-grow:1;cursor:pointer}.sidebar__nav-item .sidebar__nav-item-indicator{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px 4px;flex:none;order:2;flex-grow:0}.expandable__submenu{display:none;list-style-type:none;flex-direction:column;padding:0;margin:0;padding-left:40px}.expandable__submenu.open{display:flex}.header__section+.expandable__submenu{padding-left:0}';const n=a;const r=class{constructor(t){e(this,t);this.ifxSidebarMenu=i(this,"ifxSidebarMenu",7);this.ifxSidebarNavigationItem=i(this,"ifxSidebarNavigationItem",7);this.ifxSidebarActionItem=i(this,"ifxSidebarActionItem",7);this.icon="";this.showIcon=true;this.showIconWrapper=false;this.href="";this.internalHref="";this.target="_self";this.isExpandable=false;this.isNested=true;this.isSubMenuItem=false;this.active=false;this.isActionItem=false;this.internalActiveState=false}handleActiveChange(e,i){if(this.isActionItem){this.internalActiveState=false;return}this.internalActiveState=e;if(e!==i){let i=this.getNavItem(this.el.shadowRoot);if(!this.isExpandable&&!e){this.handleClassList(i,"remove","active")}if(!this.isExpandable&&e){this.handleClassList(i,"add","active")}}}handleConsoleError(e){if(e.detail){this.showIcon=false}else{this.showIcon=true}}handleEventEmission(){this.ifxSidebarMenu.emit(this.el)}handleClassList(e,i,t){e.classList[i](t);if(i==="contains"){return e.classList.contains(t)}}getExpandableMenu(){const e=this.el.shadowRoot.querySelector(".expandable__submenu");return e}getNavItem(e){return e===null\|\|e===void 0?void 0:e.querySelector(".sidebar__nav-item")}getSidebarMenuItems(e=this.el){const i=e.querySelectorAll("ifx-sidebar-item");if(i.length===0){return e.shadowRoot.querySelectorAll("ifx-sidebar-item")}return i}getSidebarMenuItem(){const e=this.el.shadowRoot.querySelector(".sidebar__nav-item");return e}toggleSubmenu(){if(this.isExpandable){const e=this.getSidebarMenuItem();const i=this.getExpandableMenu();this.handleClassList(i,"toggle","open");this.handleClassList(e,"toggle","open");this.handleEventEmission()}else{if(this.isActionItem){this.ifxSidebarActionItem.emit(this.el);return}else{this.handleActiveChange(true,this.internalActiveState);this.ifxSidebarNavigationItem.emit(this.el)}if(this.handleItemClick){this.handleItemClick(this.el)}}}handleExpandableMenu(e){const i=this.getExpandableMenu();e.forEach((e=>{const t=document.createElement("li");t.appendChild(e);i.appendChild(t)}))}parentElementIsSidebar(){const e=this.el.parentElement;if(e.tagName.toUpperCase()==="IFX-SIDEBAR"){return true}else return false}checkIfMenuItemIsNested(){const e=this.parentElementIsSidebar();if(e){this.isNested=false}}checkIfMenuItemIsSubMenu(){const e=this.el.parentElement;const i=this.getNavItem(e.shadowRoot);if(e.tagName.toUpperCase()==="IFX-SIDEBAR-ITEM"&&!this.handleClassList(i,"contains","header__section")){this.isSubMenuItem=true}else{this.isSubMenuItem=false}}isActive(e){const i=e.getAttribute("active");const t=i==="true";return t}getParentSection(e){let i=e.parentElement;while(i&&i.tagName.toUpperCase()!=="IFX-SIDEBAR"){if(i.tagName.toUpperCase()==="IFX-SIDEBAR-ITEM"){return i}i=i.parentElement}return null}handleBorderIndicatorDisplacement(e){const i=(e,t)=>{const s=this.isActive(e);if(s){const e=this.handleClassList(t,"contains","open");const i=this.getActiveItemSection();if(!e){this.handleClassList(i,"add","active-section")}else{this.handleClassList(i,"remove","active-section")}}const a=this.getSidebarMenuItems(e);a.forEach((e=>i(e,t)))};const t=this.getSidebarMenuItems();t.forEach((t=>i(t,e)))}setHref(){if(this.href.toLowerCase().trim()===""){this.internalHref=undefined}else this.internalHref=this.href}getActiveItemSection(){const e=this.parentElementIsSidebar();if(e){const e=this.getNavItem(this.el.shadowRoot);return e}else{const e=this.getNavItem(this.el.shadowRoot);return e}}async setActiveClasses(){const e=this.getNavItem(this.el.shadowRoot);this.handleClassList(e,"add","active")}async expandMenu(e){const i=this.getSidebarMenuItem();const t=this.getExpandableMenu();this.handleClassList(t,"add","open");this.handleClassList(i,"add","open");if(e){this.handleClassList(t,"remove","active-section");this.handleClassList(i,"remove","active-section")}}async isItemExpandable(){return this.isExpandable}handleActiveState(){if(this.internalActiveState){this.setActiveClasses()}}handleKeyDown(e){if(e.key==="Enter"){this.toggleSubmenu()}}componentDidLoad(){this.handleActiveState();if(this.isExpandable){const e=this.getSidebarMenuItems();this.handleExpandableMenu(e)}}componentWillLoad(){this.internalActiveState=this.active;this.checkIfMenuItemIsNested();this.checkIfMenuItemIsSubMenu();this.setHref();const e=this.getSidebarMenuItems();if(e.length!==0){this.isExpandable=true}else{this.isExpandable=false}}componentWillUpdate(){if(this.active&&!this.internalActiveState){this.internalActiveState=this.active;this.ifxSidebarNavigationItem.emit(this.el)}}render(){return t("div",{key:"7e0a398a47baab334837a55eb79cfd999c2fe99f"},t("a",{key:"d188e679861320c3c0d38e89dbc4bd503f120d24",tabIndex:1,onKeyDown:e=>this.handleKeyDown(e),href:this.internalHref,onClick:()=>this.toggleSubmenu(),target:this.target,class:`sidebar__nav-item ${!this.isNested&&this.isExpandable?"header__section":""} ${this.isSubMenuItem?"submenu__item":""}`},this.icon&&t("div",{key:"4098174f3c52fd51466d78f9d7816f358b6002ed",class:`sidebar__nav-item-icon-wrapper ${!this.showIcon?"noIcon":""}`},t("ifx-icon",{key:"2248af3dc70c08a46c874e14ee88724e6eefbcd1",icon:this.icon})),t("div",{key:"4e5ec198e85e975d38acb5b111f6d2d3892438d9",class:"sidebar__nav-item-label"},t("slot",{key:"9fc8c5a800d790b82c341d8fd78b822dcd90c1e0"})),(this.isExpandable\|\|!isNaN(this.numberIndicator))&&t("div",{key:"870741b1ced893333e08cef620ac28bf19a6e8c0",class:"sidebar__nav-item-indicator"},this.isExpandable&&t("span",{key:"c08832e75d3ca68a891e4446b40f4b7cfbde30c6",class:"item__arrow-wrapper"},t("ifx-icon",{key:"a773892abff98167a8f452aab4ddbea6700521c9",icon:"chevron-down-16"})),!isNaN(this.numberIndicator)&&!this.isExpandable&&!this.isNested&&t("span",{key:"940f81e8d2cc81d792b72a76e5862b3df3a1803c",class:"item__number-indicator"},t("ifx-indicator",{key:"490c7c99c6fac419eceb233ade7e5d9a711d2fbf",variant:"number",number:this.numberIndicator})))),this.isExpandable&&t("ul",{key:"e810e46353df2fc6924e9d4e7e41690da7e1c72f",class:"expandable__submenu"}))}get el(){return s(this)}static get watchers(){return{active:["handleActiveChange"]}}};r.style=n;export{r as ifx_sidebar_item};
2	- //# sourceMappingURL=p-ebf0ee06.entry.js.map

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

@@ -1 +0,0 @@

- {"version":3,"names":["sidebarItemCss","IfxSidebarItemStyle0","SidebarItem","constructor","hostRef","this","icon","showIcon","showIconWrapper","href","internalHref","target","isExpandable","isNested","isSubMenuItem","active","isActionItem","internalActiveState","handleActiveChange","newValue","oldValue","labelElement","getNavItem","el","shadowRoot","handleClassList","handleConsoleError","event","detail","handleEventEmission","ifxSidebarMenu","emit","type","className","classList","contains","getExpandableMenu","expandableSubmenu","querySelector","getSidebarMenuItems","sidebarItems","querySelectorAll","length","getSidebarMenuItem","sidebarItem","toggleSubmenu","menuItem","expandableMenu","ifxSidebarActionItem","ifxSidebarNavigationItem","handleItemClick","handleExpandableMenu","sidebarExpandableMenu","forEach","li","document","createElement","appendChild","parentElementIsSidebar","parentElement","tagName","toUpperCase","checkIfMenuItemIsNested","parentIsSidebar","checkIfMenuItemIsSubMenu","navItem","isActive","iteratedComponent","activeAttributeValue","getAttribute","getParentSection","handleBorderIndicatorDisplacement","handleItem","item","isOpen","activeMenuItemSection","getActiveItemSection","children","child","topLevelItems","setHref","toLowerCase","trim","undefined","setActiveClasses","activeMenuItem","expandMenu","ac","isItemExpandable","handleActiveState","handleKeyDown","key","componentDidLoad","componentWillLoad","componentWillUpdate","render","h","tabIndex","onKeyDown","onClick","class","isNaN","numberIndicator","variant","number"],"sources":["src/components/navigation/sidebar/sidebar-item.scss?tag=ifx-sidebar-item&encapsulation=shadow","src/components/navigation/sidebar/sidebar-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n position: relative;\n}\n\n.sidebar__nav-item,\n.sidebar__nav-item.header__section {\n &:focus {\n outline: none;\n\n & .sidebar__nav-item-icon-wrapper {\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-label {\n outline: none;\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n\n &:hover {\n outline: none;\n\n & .sidebar__nav-item-icon-wrapper {\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-label {\n outline: none;\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n}\n\n.sidebar__nav-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n padding: 8px 0px;\n gap: 4px;\n flex: none;\n order: 0;\n flex-grow: 0;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n cursor: pointer;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n &.extra-padding__bottom {\n padding: 8px 0px 16px 0px;\n }\n\n &.active {\n color: tokens.$ifxColorOcean500;\n }\n\n &.active-section {\n &::before {\n content: \"\";\n position: absolute;\n left: -32px;\n height: 40px;\n width: 2px;\n background: tokens.$ifxColorOcean500;\n }\n }\n\n\n &.open {\n padding: 8px 0px;\n\n & .sidebar__nav-item-label {\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n transform: rotate(-180deg);\n }\n }\n }\n }\n\n &.header__section {\n box-sizing: padding-box;\n border-top: 1px solid tokens.$ifxColorEngineering200;\n padding: 16px 0px;\n display: -webkit-flex;\n -webkit-line-clamp: 1;\n -webkit-box-orient: horizontal;\n overflow: hidden;\n text-overflow: ellipsis;\n \n &.no-top-border {\n border-top: none;\n }\n\n &.active-section {\n &::before {\n content: \"\";\n position: absolute;\n left: -32px;\n height: 40px;\n width: 2px;\n background: tokens.$ifxColorOcean500;\n }\n }\n\n &.open {\n \n padding: 16px 0px 8px 0px;\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n transform: rotate(-180deg);\n }\n }\n }\n }\n\n & .sidebar__nav-item-label {\n color: tokens.$ifxColorBaseBlack;\n font-family: Source Sans 3;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n }\n }\n\n &.submenu__item {\n padding: 4px 0px;\n \n &.extra-padding__bottom {\n padding: 4px 0px 16px 0px;\n }\n }\n\n & .sidebar__nav-item-icon-wrapper {\n display: flex;\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n justify-content: center;\n align-items: center;\n gap: tokens.$ifxSpace100;\n flex-shrink: 0;\n\n &.noIcon {\n display: none;\n }\n\n & ifx-icon {\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n }\n }\n\n & .sidebar__nav-item-label {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n display: flex;\n align-items: center;\n flex: none;\n order: 1;\n flex-grow: 1;\n cursor: pointer;\n }\n\n & .sidebar__nav-item-indicator {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px 4px;\n flex: none;\n order: 2;\n flex-grow: 0;\n }\n}\n\n.expandable__submenu {\n display: none;\n list-style-type: none;\n flex-direction: column;\n padding: 0;\n margin: 0;\n padding-left: 40px;\n\n &.open {\n display: flex;\n }\n}\n\n.header__section + .expandable__submenu{\n padding-left: 0;\n}\n","import { Component, h, Prop, Element, State, Listen, Watch, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n tag: 'ifx-sidebar-item',\n styleUrl: 'sidebar-item.scss',\n shadow: true\n})\nexport class SidebarItem {\n @Element() el;\n @Prop() icon: string = \"\"\n @State() showIcon: boolean = true;\n @State() showIconWrapper: boolean = false;\n @Prop() href: string = \"\";\n @State() internalHref: string = \"\";\n @Prop() target: string = \"_self\";\n @State() isExpandable: boolean = false;\n @State() isNested: boolean = true;\n @State() isSubMenuItem: boolean = false;\n @Prop() numberIndicator: number;\n @Prop() active: boolean = false; // set to true manually or by clicking on a navigation item\n @Prop() isActionItem: boolean = false; // if an item is an action item, it can not become active\n\n @State() internalActiveState: boolean = false;\n\n @Event({ bubbles: true, composed: true }) ifxSidebarMenu: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarNavigationItem: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarActionItem: EventEmitter;\n\n @Prop() handleItemClick: (item: HTMLElement) => void;\n\n\n @Watch('active')\n handleActiveChange(newValue: boolean, oldValue: boolean) {\n // If the item is an action item, ignore the active prop\n if (this.isActionItem) {\n this.internalActiveState = false;\n return;\n }\n this.internalActiveState = newValue;\n if (newValue !== oldValue) {\n let labelElement = this.getNavItem(this.el.shadowRoot)\n if (!this.isExpandable && !newValue) {\n this.handleClassList(labelElement, 'remove', 'active');\n }\n if (!this.isExpandable && newValue) {\n this.handleClassList(labelElement, 'add', 'active');\n }\n }\n }\n\n\n\n @Listen('consoleError')\n handleConsoleError(event: CustomEvent<boolean>) {\n if (event.detail) {\n this.showIcon = false;\n } else {\n this.showIcon = true;\n }\n }\n\n handleEventEmission() {\n // Get the active item section\n this.ifxSidebarMenu.emit(this.el)\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n if (type === 'contains') {\n return el.classList.contains(className)\n }\n }\n\n getExpandableMenu() {\n const expandableSubmenu = this.el.shadowRoot.querySelector('.expandable__submenu')\n return expandableSubmenu\n }\n\n getNavItem(el) {\n return el?.querySelector('.sidebar__nav-item')\n }\n\n\n\n getSidebarMenuItems(el = this.el) {\n const sidebarItems = el.querySelectorAll('ifx-sidebar-item');\n if (sidebarItems.length === 0) {\n return el.shadowRoot.querySelectorAll('ifx-sidebar-item');\n }\n return sidebarItems;\n }\n\n getSidebarMenuItem() {\n const sidebarItem = this.el.shadowRoot.querySelector('.sidebar__nav-item')\n return sidebarItem;\n }\n\n\n toggleSubmenu() {\n if (this.isExpandable) {\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'toggle', 'open');\n this.handleClassList(menuItem, 'toggle', 'open');\n // Emit an event with the current component\n this.handleEventEmission();\n } else {\n // If the sidebar item is not expandable, it's a leaf item without a submenu.\n // Emit an event to the parent `ifx-sidebar` component to notify it that a leaf item has been clicked.\n if (this.isActionItem) { //its an action item that eg opens an overlay etc and should not influence the active state of the item\n this.ifxSidebarActionItem.emit(this.el); // emit new event if isActionItem is true\n return;\n } else { //its a navigation item which becomes active after clicking it\n this.handleActiveChange(true, this.internalActiveState)\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n // If the sidebar item is selectable (not expandable), then call the handler function with the current element.\n if (this.handleItemClick) {\n this.handleItemClick(this.el);\n }\n }\n // // Emit an event with the current component\n // this.handleEventEmission();\n }\n\n\n\n handleExpandableMenu(sidebarItems) {\n const sidebarExpandableMenu = this.getExpandableMenu();\n sidebarItems.forEach((el: HTMLElement) => {\n const li = document.createElement('li')\n li.appendChild(el)\n sidebarExpandableMenu.appendChild(li)\n })\n }\n\n parentElementIsSidebar() {\n const parentElement = this.el.parentElement;\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR') {\n return true;\n } else return false;\n }\n\n checkIfMenuItemIsNested() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n this.isNested = false;\n }\n }\n\n checkIfMenuItemIsSubMenu() {\n const parentElement = this.el.parentElement;\n const navItem = this.getNavItem(parentElement.shadowRoot);\n if(parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM' && !this.handleClassList(navItem, 'contains', 'header__section')) {\n this.isSubMenuItem = true;\n }else {\n this.isSubMenuItem = false;\n }\n }\n\n isActive(iteratedComponent) {\n const activeAttributeValue = iteratedComponent.getAttribute('active');\n const isActive = activeAttributeValue === 'true';\n return isActive\n }\n\n getParentSection(el: HTMLElement) {\n let parentElement = el.parentElement;\n\n while (parentElement && parentElement.tagName.toUpperCase() !== 'IFX-SIDEBAR') {\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM') {\n return parentElement;\n }\n parentElement = parentElement.parentElement;\n }\n\n return null;\n }\n\n\n\n handleBorderIndicatorDisplacement(menuItem) {\n // Recursive function to handle each item\n const handleItem = (item, menuItem) => {\n const isActive = this.isActive(item);\n if (isActive) {\n const isOpen = this.handleClassList(menuItem, 'contains', 'open');\n const activeMenuItemSection = this.getActiveItemSection();\n if (!isOpen) {\n this.handleClassList(activeMenuItemSection, 'add', 'active-section');\n } else {\n this.handleClassList(activeMenuItemSection, 'remove', 'active-section');\n }\n }\n\n // Process each child item\n const children = this.getSidebarMenuItems(item);\n children.forEach((child) => handleItem(child, menuItem));\n }\n\n // Start with the top-level items\n const topLevelItems = this.getSidebarMenuItems();\n topLevelItems.forEach((item) => handleItem(item, menuItem));\n }\n\n\n setHref() {\n if (this.href.toLowerCase().trim() === \"\") {\n this.internalHref = undefined;\n } else this.internalHref = this.href;\n }\n\n getActiveItemSection() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n } else {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n }\n }\n\n @Method()\n async setActiveClasses() {\n const activeMenuItem = this.getNavItem(this.el.shadowRoot)\n this.handleClassList(activeMenuItem, 'add', 'active')\n }\n\n @Method()\n async expandMenu(ac: boolean){\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'add', 'open');\n this.handleClassList(menuItem, 'add', 'open');\n if(ac){\n this.handleClassList(expandableMenu, 'remove', 'active-section')\n this.handleClassList(menuItem, 'remove', 'active-section')\n }\n }\n \n @Method()\n async isItemExpandable(){\n return this.isExpandable;\n }\n\n handleActiveState() {\n if (this.internalActiveState) {\n this.setActiveClasses()\n }\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter') {\n this.toggleSubmenu()\n }\n }\n\n componentDidLoad() {\n this.handleActiveState();\n if (this.isExpandable) {\n const sidebarItems = this.getSidebarMenuItems();\n this.handleExpandableMenu(sidebarItems)\n }\n }\n \n componentWillLoad() {\n this.internalActiveState = this.active;\n this.checkIfMenuItemIsNested();\n this.checkIfMenuItemIsSubMenu();\n this.setHref()\n const sidebarItems = this.getSidebarMenuItems();\n if (sidebarItems.length !== 0) {\n this.isExpandable = true;\n } else {\n this.isExpandable = false;\n }\n }\n\n componentWillUpdate() {\n // If the active prop has been set to true and the internalActiveState has not been set to true yet\n if (this.active && !this.internalActiveState) {\n // Set the internal active state to true\n this.internalActiveState = this.active;\n\n // Emit the event to notify the parent Sidebar\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n }\n\n\n render() {\n return (\n <div>\n <a tabIndex={1} onKeyDown={(event) => this.handleKeyDown(event)} href={this.internalHref} onClick={() => this.toggleSubmenu()} target={this.target} class={`sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : \"\"} ${this.isSubMenuItem ? 'submenu__item' : \"\"}`}>\n {this.icon &&\n <div class={`sidebar__nav-item-icon-wrapper ${!this.showIcon ? 'noIcon' : \"\"}`}>\n <ifx-icon icon={this.icon}></ifx-icon>\n </div>}\n <div class=\"sidebar__nav-item-label\">\n <slot />\n </div>\n {\n (this.isExpandable || !isNaN(this.numberIndicator)) &&\n <div class=\"sidebar__nav-item-indicator\">\n {this.isExpandable &&\n <span class='item__arrow-wrapper'>\n <ifx-icon icon=\"chevron-down-16\" />\n </span>\n }\n\n {!isNaN(this.numberIndicator) && !this.isExpandable && !this.isNested &&\n <span class='item__number-indicator'>\n <ifx-indicator variant='number' number={this.numberIndicator}></ifx-indicator>\n </span>}\n\n </div>\n }\n </a>\n {this.isExpandable && <ul class='expandable__submenu'></ul>}\n\n </div>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

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

	@@ -1,2 +0,0 @@
1	- import{r as t,c as r,h as o,g as e}from"./p-b7a462e5.js";const i=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-flex;--_ifx-fallback-display:none !important}._ifx-radiobutton-fallback{display:var(--_ifx-fallback-display);position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;border:0 !important}.radioButton__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;cursor:pointer;font-family:var(--ifx-font-family)}.radioButton__container.m .radioButton__wrapper{width:24px;height:24px}.radioButton__container .radioButton__wrapper{width:20px;height:20px;position:relative;display:block;border-radius:50%;background-color:#FFFFFF;border:1px solid #575352}.radioButton__container .radioButton__wrapper:focus{outline:none}.radioButton__container .radioButton__wrapper:focus::before{content:"";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper .radioButton__wrapper-mark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#0A8276;border-radius:50%;display:flex;justify-content:center;align-items:center;border-color:transparent}.radioButton__container .radioButton__wrapper:hover{background-color:#EEEDED}.radioButton__container .radioButton__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.disabled.error:hover,.radioButton__container .radioButton__wrapper.disabled.error:focus-visible{border-color:#CD002F}.radioButton__container .radioButton__wrapper.checked{border-color:#0A8276}.radioButton__container .radioButton__wrapper.checked::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;background-color:#0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper.checked.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked:hover{border-color:#08665C}.radioButton__container .radioButton__wrapper.checked:hover .radioButton__wrapper-mark{background-color:#08665C}.radioButton__container .radioButton__wrapper.checked.disabled{background-color:#FFFFFF;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled .radioButton__wrapper-mark{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.error::after{border-color:#CD002F;background-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled){border-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled):hover,.radioButton__container .radioButton__wrapper.error:not(.disabled):focus-visible{border-color:#CD002F}.radioButton__container .label{display:flex;align-items:center;height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;flex:none;order:1;flex-grow:0}.radioButton__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}.radioButton__container .label.disabled{color:#BFBBBB}.radioButton__container .label:hover{cursor:pointer}';const a=i;const n=class{constructor(o){t(this,o);this.ifxChange=r(this,"ifxChange",7);this.ifxError=r(this,"ifxError",7);this.disabled=false;this.error=false;this.size="s";this.internalChecked=false;this.hasSlot=false}componentWillLoad(){this.fallbackInput=document.createElement("input");this.fallbackInput.type="radio";this.fallbackInput.hidden=true;this.fallbackInput.className="_ifx-radiobutton-fallback";this.fallbackInput.style.cssText=`\n display: none !important;\n position: absolute !important;\n opacity: 0 !important;\n pointer-events: none !important;\n width: 0 !important;\n height: 0 !important;\n `;this.fallbackInput.setAttribute("aria-hidden","true");this.fallbackInput.tabIndex=-1;this.el.appendChild(this.fallbackInput);if("attachInternals"in HTMLElement.prototype){try{this.internals=this.el.attachInternals()}catch(t){console.warn("ElementInternals not supported")}}this.internalChecked=this.checked\|\|false;this.hasSlot=!!this.el.querySelector("[slot]")\|\|this.el.innerHTML.trim()!==""}handleCheckedChange(t){this.internalChecked=t}updateFormValue(){var t;if((t=this.internals)===null\|\|t===void 0?void 0:t.setFormValue){this.internals.setFormValue(this.internalChecked?this.value:null)}this.fallbackInput.checked=this.internalChecked;this.fallbackInput.name=this.name;this.fallbackInput.value=this.value;this.fallbackInput.disabled=this.disabled}errorChanged(t,r){if(t!==r){this.ifxError.emit(t)}}handleRadioButtonClick(t){if(this.disabled){t.stopPropagation();return}this.inputElement.click();this.internalChecked=this.inputElement.checked;this.checked=this.internalChecked;this.ifxChange.emit(this.internalChecked);const r=new CustomEvent("change",{bubbles:true,composed:true,detail:{checked:this.internalChecked}});this.el.dispatchEvent(r)}handleKeyDown(t){if([" ","Enter"].includes(t.key)){t.preventDefault();this.handleRadioButtonClick(new PointerEvent("click"))}}handleExternalChange(t){const r=t.target;if(r===this.el\|\|r.tagName.toLowerCase()!=="ifx-radio-button")return;if(r.getAttribute("name")===this.name){this.internalChecked=false}}render(){return o("div",{key:"95e83d8c2acc9e2816eafa572c15d23a62ad8397",role:"radio","aria-checked":String(this.internalChecked),"aria-disabled":String(this.disabled),class:`radioButton__container ${this.size} ${this.disabled?"disabled":""}`,onClick:t=>this.handleRadioButtonClick(t),tabindex:this.disabled?-1:0},o("div",{key:"0f069aee0c34e4a412febc8bce0f6146526533f4",class:`radioButton__wrapper \n ${this.internalChecked?"checked":""} \n ${this.disabled?"disabled":""} \n ${this.error?"error":""}`},this.internalChecked&&o("div",{key:"5bfb321964a7f772f1deb9aad645944f9f465d82",class:"radioButton__wrapper-mark"})),this.hasSlot&&o("div",{key:"52b233fdf2725ce78448d1c535dfaa539b417d12",class:`label ${this.size==="m"?"label-m":""} ${this.disabled?"disabled":""}`},o("slot",{key:"c0890ab3ce5a7a7a0e851a68865e0f8567b3d80c"})),o("input",{key:"494e9271029854250e5f767352a65a93021dbee9",type:"radio",hidden:true,ref:t=>this.inputElement=t,name:this.name,value:this.value,checked:this.internalChecked,disabled:this.disabled,onClick:t=>t.stopPropagation()}))}static get formAssociated(){return true}get el(){return e(this)}static get watchers(){return{checked:["handleCheckedChange"],internalChecked:["updateFormValue"],error:["errorChanged"]}}};n.style=a;export{n as ifx_radio_button};
2	- //# sourceMappingURL=p-f338fb85.entry.js.map

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

@@ -1 +0,0 @@

- {"version":3,"names":["radioButtonCss","IfxRadioButtonStyle0","RadioButton","constructor","hostRef","this","disabled","error","size","internalChecked","hasSlot","componentWillLoad","fallbackInput","document","createElement","type","hidden","className","style","cssText","setAttribute","tabIndex","el","appendChild","HTMLElement","prototype","internals","attachInternals","e","console","warn","checked","querySelector","innerHTML","trim","handleCheckedChange","newValue","updateFormValue","_a","setFormValue","value","name","errorChanged","oldValue","ifxError","emit","handleRadioButtonClick","event","stopPropagation","inputElement","click","ifxChange","changeEvent","CustomEvent","bubbles","composed","detail","dispatchEvent","handleKeyDown","ev","includes","key","preventDefault","PointerEvent","handleExternalChange","target","tagName","toLowerCase","getAttribute","render","h","role","String","class","onClick","tabindex","ref"],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button&encapsulation=shadow","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n --_ifx-fallback-display: none !important;\n}\n\n._ifx-radiobutton-fallback {\n display: var(--_ifx-fallback-display);\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0,0,0,0) !important;\n border: 0 !important;\n }\n\n.radioButton__container {\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace100;\n cursor: pointer;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n &.m .radioButton__wrapper {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n }\n\n .radioButton__wrapper {\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n position: relative;\n display: block;\n border-radius: 50%;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid #575352;\n\n &:focus {\n outline: none;\n\n &::before {\n content: '';\n position: absolute;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 50%;\n }\n }\n\n .radioButton__wrapper-mark {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #0A8276;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n border-color: tokens.$ifxColorBaseTransparent;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &.disabled {\n background-color: #BFBBBB;\n border-color: #BFBBBB;\n\n &.error {\n\n &:hover,\n &:focus-visible {\n border-color: #CD002F;\n }\n }\n }\n\n &.checked {\n border-color: #0A8276;\n\n &::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 10px;\n height: 10px;\n background-color: #0A8276;\n border-radius: 50%;\n }\n\n &.disabled::after {\n background-color: #BFBBBB;\n }\n\n\n &:hover {\n border-color: tokens.$ifxColorOcean600;\n\n & .radioButton__wrapper-mark {\n background-color: tokens.$ifxColorOcean600;\n }\n }\n\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n border-color: #BFBBBB;\n\n &.disabled::after {\n background-color: #BFBBBB;\n }\n\n & .radioButton__wrapper-mark {\n background-color: #BFBBBB;\n }\n }\n &.error::after {\n border-color: #CD002F;\n background-color: #CD002F;\n }\n }\n\n &.error:not(.disabled) {\n border-color: #CD002F;\n\n &:hover,\n &:focus-visible {\n border-color: #CD002F;\n }\n }\n }\n\n .label {\n display: flex;\n align-items: center;\n height: tokens.$ifxSize250;\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n flex-grow: 0;\n\n &.label-m {\n height: tokens.$ifxSize300;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &.disabled {\n color: #BFBBBB;\n }\n\n\n\n &:hover {\n cursor: pointer;\n }\n }\n}\n\n","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Watch } from '@stencil/core';\n\n@Component({\n tag: 'ifx-radio-button',\n styleUrl: 'radio-button.scss',\n shadow: true,\n formAssociated: true\n})\nexport class RadioButton {\n @Element() el: HTMLElement;\n @Prop() disabled: boolean = false;\n @Prop() value: string;\n @Prop() error: boolean = false;\n @Prop({ reflect: true }) size: \"s\" | \"m\" = \"s\";\n @Prop({ reflect: true }) name: string;\n @Prop({ mutable: true }) checked: boolean;\n @State() internalChecked: boolean = false;\n @State() hasSlot: boolean = false;\n\n private inputElement: HTMLInputElement;\n private internals: ElementInternals;\n private fallbackInput: HTMLInputElement;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n @Event({ eventName: 'ifxError' }) ifxError: EventEmitter;\n\n componentWillLoad() {\n // Fallback for form association\n this.fallbackInput = document.createElement('input');\n this.fallbackInput.type = 'radio';\n this.fallbackInput.hidden = true;\n this.fallbackInput.className = '_ifx-radiobutton-fallback';\n this.fallbackInput.style.cssText = `\n display: none !important;\n position: absolute !important;\n opacity: 0 !important;\n pointer-events: none !important;\n width: 0 !important;\n height: 0 !important;\n `;\n this.fallbackInput.setAttribute('aria-hidden', 'true');\n this.fallbackInput.tabIndex = -1;\n this.el.appendChild(this.fallbackInput);\n\n // Initialize ElementInternals if supported\n if ('attachInternals' in HTMLElement.prototype) {\n try {\n this.internals = this.el.attachInternals();\n } catch (e) {\n console.warn('ElementInternals not supported');\n }\n }\n\n // Initial state\n this.internalChecked = this.checked || false;\n this.hasSlot = !!this.el.querySelector('[slot]') || this.el.innerHTML.trim() !== '';\n }\n\n @Watch('checked')\n handleCheckedChange(newValue: boolean) {\n this.internalChecked = newValue;\n }\n\n @Watch('internalChecked')\n updateFormValue() {\n // Update both ElementInternals and fallback input\n if (this.internals?.setFormValue) {\n this.internals.setFormValue(this.internalChecked ? this.value : null);\n }\n this.fallbackInput.checked = this.internalChecked;\n this.fallbackInput.name = this.name;\n this.fallbackInput.value = this.value;\n this.fallbackInput.disabled = this.disabled;\n }\n\n @Watch('error')\n errorChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.ifxError.emit(newValue);\n }\n }\n\n handleRadioButtonClick(event: Event) {\n if (this.disabled) {\n event.stopPropagation();\n return;\n }\n\n this.inputElement.click();\n this.internalChecked = this.inputElement.checked;\n this.checked = this.internalChecked;\n this.ifxChange.emit(this.internalChecked);\n\n const changeEvent = new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { checked: this.internalChecked }\n });\n this.el.dispatchEvent(changeEvent);\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if ([' ', 'Enter'].includes(ev.key)) {\n ev.preventDefault();\n this.handleRadioButtonClick(new PointerEvent('click'));\n }\n }\n\n @Listen('change', { target: 'document' })\n handleExternalChange(event: Event) {\n const target = event.target as HTMLElement;\n if (target === this.el || target.tagName.toLowerCase() !== 'ifx-radio-button') return;\n \n if (target.getAttribute('name') === this.name) {\n this.internalChecked = false;\n }\n }\n\n render() {\n return (\n <div\n role=\"radio\"\n aria-checked={String(this.internalChecked)}\n aria-disabled={String(this.disabled)}\n class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n onClick={(e) => this.handleRadioButtonClick(e)}\n tabindex={this.disabled ? -1 : 0}\n >\n <div\n class={`radioButton__wrapper \n ${this.internalChecked ? 'checked' : ''} \n ${this.disabled ? 'disabled' : ''} \n ${this.error ? 'error' : ''}`}\n >\n {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n </div>\n\n {this.hasSlot && (\n <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n <slot />\n </div>\n )}\n\n <input\n type=\"radio\"\n hidden\n ref={el => this.inputElement = el}\n name={this.name}\n value={this.value}\n checked={this.internalChecked}\n disabled={this.disabled}\n onClick={(e) => e.stopPropagation()}\n />\n </div>\n );\n }\n}"],"mappings":"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","ignoreList":[]}