@infineon/infineon-design-system-stencil 34.0.0--canary.1868.cb713cf1255db3ab13d7c954671e012411e39515.0 → 34.0.0--canary.1868.4efc3539ee45a2c869d4a2ecaf2f351e0a66627c.0

package/dist/infineon-design-system-stencil/p-cce343f5.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as i,g as n}from"./p-e6edf72d.js";const a=':host(.hidden){display:none}.navbar__item{position:relative;display:flex;flex-direction:row;align-items:center;padding:0px 8px;flex:none;order:0;flex-grow:0;font-family:"Source Sans 3";text-decoration:none;font-weight:400;font-size:16px;color:#1D1D1D}.navbar__item.hide{display:none}.navbar__item.isParent{gap:8px}.navbar__item .navItemIconWrapper{transition:0.3s}.navbar__item.open .navItemIconWrapper{transform:rotate(-180deg);transition:0.3s}.navbar__item:hover{color:#0A8276;cursor:pointer}.navbar__item:hover .username__tooltip{display:block}.navbar__item:hover .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{cursor:pointer;background-color:#08665C}.navbar__item.remove{display:none}.navbar__item.removeLabel .label__wrapper{display:none}.navbar__item .number__indicator-wrapper{position:relative;top:-11px}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .username__tooltip{display:none;position:absolute;top:35px;right:0;text-wrap:nowrap;padding:1px 5px;font-size:13px;font-family:"Source Sans 3";background-color:black;color:#fff;z-index:99}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper:hover .username__tooltip{display:block}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{display:flex;width:24px;height:24px;justify-content:center;align-items:center;border-radius:100%;background-color:#0A8276}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper .initials{color:#FFF;text-align:center;font-family:"Source Sans 3";font-size:14px;font-style:normal;font-weight:600;line-height:20px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper img{width:24px;height:24px;border-radius:100%}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.removeWrapper{display:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.hide{display:none}.container{position:relative}.container .sub__layer-back-button{display:none}.container .sub__layer-back-button.show{display:flex;justify-content:flex-start}.container .sub__layer-back-button.show .back__button-wrapper{display:flex;align-items:center;gap:8px;padding:8px 0 16px 0;color:#0A8276;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.container .sub__layer-back-button.show .back__button-wrapper span:hover,.container .sub__layer-back-button.show .back__button-wrapper ifx-icon:hover{cursor:pointer}.container.hide{display:none}.container .inner__content-wrapper{position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px}.container .inner__content-wrapper.no-gap{gap:0px}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper.no-gap{gap:0px}.container .inner__content-wrapper .number__indicator-wrapper{position:relative;top:-11px}.navbar-menu{position:absolute;display:none;list-style-type:none;visibility:visible;flex-direction:column;width:224px;min-width:224px;background:#FFFFFF;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;padding:8px 0px;font-family:"Source Sans 3"}.navbar-menu.open:not(.itemInMobileMenu){display:flex}.navbar-menu.itemInMobileMenu{display:none}.navbar-menu.right{left:100%;top:-40%}.navbar-menu.left{top:-40%;right:100%}.navbar-menu.rightSideItemMenu{left:initial;right:0px}.navbar__item.layer__item-parent{color:#1D1D1D;font-size:24px;font-style:normal;font-weight:600;line-height:32px;letter-spacing:-0.24px;cursor:initial}.navbar__item.layer__item-parent .navbar__container-right-content-navigation-item-icon-wrapper ifx-icon svg{width:24px;height:24px}.navbar__item.sidebarMenuItem{justify-content:space-between;padding:0}.navbar__item.menuItem{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;justify-content:space-between;padding:8px 16px;gap:8px;font-family:"Source Sans 3"}.navbar__item.menuItem.hide{display:none}.navbar__item.menuItem .label__wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.navbar__item.menuItem:hover{cursor:pointer;background-color:#EEEDED}.navbar__item.menuItem:active{background-color:#BFBBBB}.sub__layer-menu{padding:5px;display:none}.sub__layer-menu.remove__margin{margin:0;padding:0}.sub__layer-menu.open{display:block}.navbar__item.hide{display:none}.menuItemRightIconWrapper.hide{display:none}.navItemIconWrapper.hide{display:none}';const s=a;const o=class{constructor(i){e(this,i);this.ifxNavItem=t(this,"ifxNavItem",7);this.showLabel=true;this.icon="";this.href="";this.target="_self";this.hideOnMobile=true;this.internalHref="";this.isMenuItem=false;this.hasChildNavItems=false;this.isSidebarMenuItem=false;this.dotIndicator=false}handleOutsideClick(e){const t=e.composedPath();const i=this.getItemMenu();if(i){if(i.classList.contains("open")){if(!t.includes(this.el)){this.closeItemMenu()}}}}async hideComponent(){this.el.style.display="none"}async showComponent(){this.el.style.display=""}async toggleChildren(e){const t=this.getItemMenu();const i=this.getChevronDownIconWrapper();if(t){this.handleClassList(i,e,"hide");this.handleClassList(t,e,"itemInMobileMenu")}}async moveChildComponentsIntoSubLayerMenu(){const e=this.getItemMenu();if(e){const t=this.handleClassList(e,"contains","open");if(t){const e=this.getNavBarItem();const t=this.getSubLayerBackButton();this.handleClassList(e,"add","layer__item-parent");this.handleClassList(t,"add","show");this.ifxNavItem.emit({component:this.el,action:"hideFirstLayer"})}}const t=this.el.querySelectorAll('[slot="first__layer"]');this.isSidebarMenuItem=true;for(let e=0;e<t.length;e++){t[e].setAttribute("slot","second__layer");t[e].moveChildComponentsIntoSubLayerMenu()}}getSubLayerBackButton(){const e=this.el.shadowRoot.querySelector(".sub__layer-back-button");return e}async toggleFirstLayerItem(e,t){const i=this.getNavBarItem();const n=this.getSubLayerMenu();const a=this.getSubLayerBackButton();this.handleClassList(a,[e],"show");this.handleClassList(i,[t],"hide");this.handleClassList(n,[t],"remove__margin")}openSubLayerMenu(){if(this.hasChildNavItems){const e=this.getSubLayerBackButton();const t=this.getRightArrowIcon();const i=this.getNavBarItem();const n=this.getSubLayerMenu();const a=this.el.getAttribute("slot");this.handleClassList(e,"add","show");this.handleClassList(t,"add","hide");this.handleClassList(i,"add","layer__item-parent");this.handleClassList(n,"add","open");if(a.toLowerCase()==="second__layer"){this.ifxNavItem.emit({component:this.el,parent:this.el.parentElement,action:"hideSecondLayer"});this.handleClassList(i,"remove","menuItem")}else{this.ifxNavItem.emit({component:this.el,action:"hideFirstLayer"})}}}async addMenuItemClass(){const e=this.getNavBarItem();this.handleClassList(e,"add","menuItem");const t=this.getRightArrowIcon();if(this.hasChildNavItems){this.handleClassList(t,"remove","hide")}}async moveChildComponentsBackIntoNavbar(){const e=this.getSubLayerBackButton();const t=this.getNavBarItem();const i=this.getSubLayerMenu();this.handleClassList(e,"remove","show");this.handleClassList(t,"remove","layer__item-parent");this.handleClassList(i,"remove","remove__margin");this.ifxNavItem.emit({component:this.el,action:"show"});const n=this.el.querySelectorAll('[slot="second__layer"]');this.isSidebarMenuItem=false;this.showComponent();this.handleClassList(t,"remove","hide");for(let e=0;e<n.length;e++){n[e].setAttribute("slot","first__layer");n[e].moveChildComponentsBackIntoNavbar();n[e].addMenuItemClass();n[e].returnToFirstLayer()}}getRightArrowIcon(){const e=this.el.shadowRoot.querySelector(".menuItemRightIconWrapper");return e}getChevronDownIconWrapper(){const e=this.el.shadowRoot.querySelector(".navItemIconWrapper");return e}async returnToFirstLayer(){const e=this.getSubLayerBackButton();const t=this.getNavBarItem();const i=this.getRightArrowIcon();const n=this.getSubLayerMenu();const a=this.el.getAttribute("slot");this.handleClassList(e,"remove","show");this.handleClassList(t,"remove","layer__item-parent");this.handleClassList(n,"remove","open");if(this.hasChildNavItems){this.handleClassList(i,"remove","hide")}if(a.toLowerCase()==="second__layer"){this.ifxNavItem.emit({component:this.el,parent:this.el.parentElement,action:"returnToSecondLayer"});this.handleClassList(t,"add","menuItem")}else{this.ifxNavItem.emit({component:this.el,action:"return"})}}componentWillLoad(){this.setHref();this.checkIfItemIsNested();this.checkIfItemHasChildren();this.removeEmptyItem()}componentDidLoad(){this.handleItemGap();this.handleLabelWrapper();if(this.hasChildNavItems){const e=this.getNavbarItems();this.relocateItemsToFirstlayer(e)}}componentDidUpdate(){const e=this.getNavBarItem();const t=this.handleClassList(e,"contains","layer__item-parent");if(this.isSidebarMenuItem&&t){const e=this.getRightArrowIcon();this.handleClassList(e,"add","hide")}}async setMenuItemPosition(){if(this.isMenuItem&&this.hasChildNavItems){const e=this.getItemMenuPosition();if(e==="left"){this.itemPosition="left"}else if(e==="right"){this.itemPosition="right"}}}handleClassList(e,t,i){e.classList[t](i);if(t==="contains"){return e.classList.contains(i)}}getNavbarItems(){const e=this.el.querySelectorAll("ifx-navbar-item");return e}getNavBarItem(){const e=this.el.shadowRoot.querySelector(".navbar__item");return e}getSubLayerMenu(){const e=this.el.shadowRoot.querySelector(".sub__layer-menu");return e}relocateItemsToFirstlayer(e){e.forEach((e=>{e.setAttribute("slot","first__layer")}))}setHref(){if(this.href.toLowerCase().trim()===""){this.internalHref=undefined}else this.internalHref=this.href}checkIfItemIsNested(){const e=this.el.parentElement;if(e.tagName.toUpperCase()==="IFX-NAVBAR-ITEM"||e.tagName.toUpperCase()==="IFX-NAVBAR-PROFILE"){this.isMenuItem=true;return}else{this.isMenuItem=false}}checkIfItemHasChildren(){const e=this.getNavbarItems();if(e.length!==0){this.hasChildNavItems=true}else{this.hasChildNavItems=false}}async setItemSideSpecifications(){const e=this.el;const t=this.getItemMenu();const i=e.getAttribute("slot");if(i.toLowerCase().trim()==="right-item"){this.handleClassList(t,"add","rightSideItemMenu")}return true}getItemMenu(){const e=this.el.shadowRoot.querySelector(".navbar-menu");return e}closeItemMenu(){const e=this.getItemMenu();const t=this.getNavBarItem();if(e){this.handleClassList(e,"remove","open");this.handleClassList(t,"remove","open")}}getItemMenuPosition(){let e=this.el;while(e){if(e.tagName==="IFX-NAVBAR-PROFILE"||e.slot==="right-item"){return"left"}e=e.parentElement||e.getRootNode().host}return"right"}toggleItemMenu(){const e=this.el.getAttribute("slot");if(e.toLowerCase()==="mobile-menu-top"||e.toLowerCase()==="second__layer"){this.openSubLayerMenu()}if(!this.internalHref&&e.toLowerCase()!=="mobile-menu-top"&&e.toLowerCase()!=="second__layer"){const e=this.getItemMenu();if(this.hasChildNavItems){const t=this.getNavBarItem();this.handleClassList(e,"toggle","open");this.handleClassList(t,"toggle","open")}}}handleNestedLayerMenu(e){if(this.isMenuItem&&this.hasChildNavItems&&!this.isSidebarMenuItem){const t=this.getItemMenu();const i=this.getItemMenuPosition();if(e.type.toUpperCase()==="MOUSEENTER"){this.handleClassList(t,"add","open");if(i==="left"){this.handleClassList(t,"add","left")}else if(i==="right"){this.handleClassList(t,"add","right")}}if(e.type.toUpperCase()==="MOUSELEAVE"){this.handleClassList(t,"remove","open");if(i==="left"){this.handleClassList(t,"remove","left")}else if(i==="right"){this.handleClassList(t,"remove","right")}}}}handleLabelWrapper(){const e=this.el.shadowRoot.querySelector(".label__wrapper");const t=this.getNavBarItem();const i=e.querySelector("slot");if(!i.assignedNodes().length){t.classList.add("removeLabel")}else if(this.showLabel&&t.classList.contains("removeLabel")){t.classList.remove("removeLabel")}}handleItemGap(){const e=this.el.shadowRoot.querySelector(".navbar__item");const t=e.querySelector(".navbar__container-right-content-navigation-item-icon-wrapper");if(this.numberIndicator||this.dotIndicator){this.handleClassList(t,"add","no-gap")}else{this.handleClassList(t,"remove","no-gap")}}removeEmptyItem(){const e=this.el.shadowRoot.host;if(!this.showLabel&&!this.icon){this.handleClassList(e,"add","hidden")}}render(){return i("div",{key:"e2601a0327ccc31f2451fcc2490191eb582a0016",class:"container",onMouseLeave:e=>this.handleNestedLayerMenu(e),onMouseEnter:e=>this.handleNestedLayerMenu(e)},i("div",{key:"3ec0353eb436ea0adc828f56b508624f525264ec",class:"sub__layer-back-button"},i("div",{key:"39284ea8b7f17a83084f948c7ea3b12c1d2fac2a",class:"back__button-wrapper",onClick:()=>this.returnToFirstLayer()},i("ifx-icon",{key:"2d6e46c606579b12ba9680039e2f88c5dc31a4eb",icon:"arrow-left-16"}),i("span",{key:"a5fd3d1d8551b6be567f608568b97ca2c4c5348e"},"Back"))),i("a",{key:"fea66a4b956ec1671a7e9fcf7441a5bf676a200e",href:this.internalHref,target:this.target,onClick:()=>this.toggleItemMenu(),class:`navbar__item ${this.isSidebarMenuItem?"sidebarMenuItem":""} ${!this.showLabel?"removeLabel":""} ${this.isMenuItem?"menuItem":""} ${this.hasChildNavItems?"isParent":""}`},i("div",{key:"29e17c7b770251a917a4c84c08fa013693d22a60",class:"inner__content-wrapper"},i("div",{key:"5e35323bc544eeacdf08d985fc59dfccbf5d17f7",class:`navbar__container-right-content-navigation-item-icon-wrapper ${!this.icon?"removeWrapper":""}`},this.icon&&i("ifx-icon",{key:"7572d24b3f914d43f98ff551de9a27d323a2a791",icon:this.icon}),this.icon&&!this.showLabel&&!isNaN(this.numberIndicator)&&i("div",{key:"93a14b1b3ecec23fbed6c57295eceb42bf71f729",class:"number__indicator-wrapper"},i("ifx-indicator",{key:"8d199195005806e77a66610619ea4941999e6b04",variant:"number",number:this.numberIndicator})),this.icon&&!this.showLabel&&!this.numberIndicator&&this.dotIndicator&&i("div",{key:"ca4d41d281c7d812ffd79d2ecebf98206509c11e",class:"dot__indicator-wrapper"})),this.itemPosition==="left"&&this.hasChildNavItems&&this.isMenuItem&&i("div",{key:"112b20051b5ffab13d9d0c0bcd66a1828735a5e2",class:"menuItemLeftIconWrapper"},i("ifx-icon",{key:"0294d7fa95431d7485807ab9825de32cb7cc1c96",icon:"chevron-left-12"})),i("span",{key:"45eb2664782d473678ffdf1ffd243d18bf721d1b",class:"label__wrapper"},i("slot",{key:"c3fdf303fb5eb539c64a6c1f8905f773e184efe8"}))),this.showLabel&&this.numberIndicator&&!isNaN(this.numberIndicator)?i("div",{class:"number__indicator-wrapper"},i("ifx-indicator",{variant:"number",number:this.numberIndicator})):"",this.showLabel&&!this.numberIndicator&&this.dotIndicator?i("ifx-indicator",{variant:"dot"}):"",i("div",{key:"62555991fa617ac0dddaa347086245214da42a68",class:`navItemIconWrapper ${this.hasChildNavItems&&!this.isMenuItem&&!this.isSidebarMenuItem?"":"hide"}`},i("ifx-icon",{key:"788a12f3719f1c4f43d1532dcca232867b5cbe91",icon:"chevron-down-12"})),i("div",{key:"68d2677b612fb670930c41b5e22c3b7521ecf07a",class:`menuItemRightIconWrapper ${this.itemPosition==="right"&&this.hasChildNavItems&&this.isMenuItem||this.isSidebarMenuItem&&this.hasChildNavItems?"":"hide"}`},i("ifx-icon",{key:"9caf7fcdfc151e631daa735c26fbd0e51ac89a95",icon:"chevron-right-12"}))),this.hasChildNavItems&&!this.isSidebarMenuItem&&i("ul",{key:"7f86354e5c3db42d1d2a6ca3227fce444ca8b1e1",class:"navbar-menu"}," ",i("slot",{key:"6dd2300504349618730ccf50c133b97d9d7e6993",name:"first__layer"})," "),this.isSidebarMenuItem&&i("ul",{key:"0035b465e812546856240dea531d4a0e4d443ec0",class:"sub__layer-menu"}," ",i("slot",{key:"b61eeb9d819b6691d1c3cfa99b27b304d612dd0f",name:"second__layer"})," "))}get el(){return n(this)}};o.style=s;export{o as ifx_navbar_item};
+//# sourceMappingURL=p-cce343f5.entry.js.map

package/dist/infineon-design-system-stencil/p-cce343f5.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["navbarItemCss","IfxNavbarItemStyle0","NavbarItem","constructor","hostRef","this","showLabel","icon","href","target","hideOnMobile","internalHref","isMenuItem","hasChildNavItems","isSidebarMenuItem","dotIndicator","handleOutsideClick","event","path","composedPath","itemMenu","getItemMenu","classList","contains","includes","el","closeItemMenu","hideComponent","style","display","showComponent","toggleChildren","action","arrowIcon","getChevronDownIconWrapper","handleClassList","moveChildComponentsIntoSubLayerMenu","subLayerMenu","subLayerMenuIsOpened","navbarItem","getNavBarItem","subLayerBackButton","getSubLayerBackButton","ifxNavItem","emit","component","navItems","querySelectorAll","i","length","setAttribute","sublayerBackButton","shadowRoot","querySelector","toggleFirstLayerItem","actionOne","actionTwo","secondLayerMenu","getSubLayerMenu","openSubLayerMenu","rightArrowIcon","getRightArrowIcon","slotName","getAttribute","toLowerCase","parent","parentElement","addMenuItemClass","moveChildComponentsBackIntoNavbar","returnToFirstLayer","menuItemRightIconWrapper","componentWillLoad","setHref","checkIfItemIsNested","checkIfItemHasChildren","removeEmptyItem","componentDidLoad","handleItemGap","handleLabelWrapper","getNavbarItems","relocateItemsToFirstlayer","componentDidUpdate","isLayerItemParent","setMenuItemPosition","menuPosition","getItemMenuPosition","itemPosition","type","className","navItem","forEach","item","trim","undefined","tagName","toUpperCase","sidebarItems","setItemSideSpecifications","menuItem","slotValue","menu","slot","getRootNode","host","toggleItemMenu","handleNestedLayerMenu","e","labelWrapper","assignedNodes","add","remove","innerContentWrapper","numberIndicatorWrapper","numberIndicator","hostElement","render","h","key","class","onMouseLeave","onMouseEnter","onClick","isNaN","variant","number","name"],"sources":["src/components/navigation/navbar/navbar-item.scss?tag=ifx-navbar-item&encapsulation=shadow","src/components/navigation/navbar/navbar-item.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: tokens.$ifxFontFamilyBody;\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  }\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: tokens.$ifxFontFamilyBody;\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: tokens.$ifxFontFamilyBody;\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, Event, EventEmitter } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-navbar-item',\n  styleUrl: 'navbar-item.scss',\n  shadow: true\n})\n\nexport class NavbarItem {\n\n  @Element() el;\n  @Prop() showLabel: boolean = true;\n  @Prop() icon: string = \"\"\n  @Prop() href: string = \"\"\n  @Prop() target: string = \"_self\";\n  @Prop() hideOnMobile: boolean = true;\n  @State() internalHref: string = \"\"\n  @State() isMenuItem: boolean = false;\n  @State() hasChildNavItems: boolean = false;\n  @State() isSidebarMenuItem: boolean = false;\n  @State() itemPosition: string;\n  @Event() ifxNavItem: EventEmitter;\n  @Prop() numberIndicator: number;\n  @Prop() dotIndicator: boolean = false;\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  @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  @Method()\n  async toggleChildren(action) { \n    const itemMenu = this.getItemMenu()\n    const arrowIcon = this.getChevronDownIconWrapper()\n    if(itemMenu) { \n      this.handleClassList(arrowIcon, action, 'hide')\n      this.handleClassList(itemMenu, action, 'itemInMobileMenu')\n    }\n  }\n\n  @Method()\n  async moveChildComponentsIntoSubLayerMenu() { \n    const subLayerMenu = this.getItemMenu()\n    if(subLayerMenu) { \n      const subLayerMenuIsOpened = this.handleClassList(subLayerMenu, 'contains', 'open')\n      if(subLayerMenuIsOpened) { \n        const navbarItem = this.getNavBarItem()\n        const subLayerBackButton = this.getSubLayerBackButton()\n        this.handleClassList(navbarItem, 'add', 'layer__item-parent')\n        this.handleClassList(subLayerBackButton, 'add', 'show')\n        this.ifxNavItem.emit({component: this.el, action: 'hideFirstLayer'})\n      }\n    }\n\n    const navItems = this.el.querySelectorAll('[slot=\"first__layer\"]')\n    this.isSidebarMenuItem = true;\n\n    for(let i = 0; i < navItems.length; i++) { \n      navItems[i].setAttribute('slot', 'second__layer')\n      navItems[i].moveChildComponentsIntoSubLayerMenu()\n    }\n  }\n\n  getSubLayerBackButton() { \n    const sublayerBackButton = this.el.shadowRoot.querySelector('.sub__layer-back-button')\n    return sublayerBackButton\n  }\n\n  @Method()\n  async toggleFirstLayerItem(actionOne, actionTwo) { \n   const navbarItem = this.getNavBarItem()\n   const secondLayerMenu = this.getSubLayerMenu()\n   const subLayerBackButton = this.getSubLayerBackButton()\n   this.handleClassList(subLayerBackButton, [actionOne], 'show')\n   this.handleClassList(navbarItem, [actionTwo], 'hide')\n   this.handleClassList(secondLayerMenu, [actionTwo], 'remove__margin')\n  }\n\n  openSubLayerMenu() { \n    if(this.hasChildNavItems) { \n      const subLayerBackButton = this.getSubLayerBackButton()\n      const rightArrowIcon = this.getRightArrowIcon()\n      const navbarItem = this.getNavBarItem()\n      const subLayerMenu = this.getSubLayerMenu()\n      const slotName = this.el.getAttribute('slot')\n\n      this.handleClassList(subLayerBackButton, 'add', 'show')\n      this.handleClassList(rightArrowIcon, 'add', 'hide')\n      this.handleClassList(navbarItem, 'add', 'layer__item-parent')\n      this.handleClassList(subLayerMenu, 'add', 'open')\n    \n      if(slotName.toLowerCase() === 'second__layer') {\n        this.ifxNavItem.emit({component: this.el, parent: this.el.parentElement, action: 'hideSecondLayer'})\n        this.handleClassList(navbarItem, 'remove', 'menuItem')\n      } else { \n        this.ifxNavItem.emit({component: this.el, action: 'hideFirstLayer'})\n      }\n    }\n  }\n\n  @Method()\n  async addMenuItemClass() { \n    const navbarItem = this.getNavBarItem()\n    this.handleClassList(navbarItem, 'add', 'menuItem')\n    const rightArrowIcon = this.getRightArrowIcon()\n    if(this.hasChildNavItems) { \n      this.handleClassList(rightArrowIcon, 'remove', 'hide')\n    }\n  }\n\n  @Method()\n  async moveChildComponentsBackIntoNavbar() { \n    const subLayerBackButton = this.getSubLayerBackButton()\n    const navbarItem = this.getNavBarItem()\n    const secondLayerMenu = this.getSubLayerMenu()\n\n    this.handleClassList(subLayerBackButton, 'remove', 'show')\n    this.handleClassList(navbarItem, 'remove', 'layer__item-parent')\n    this.handleClassList(secondLayerMenu, 'remove', 'remove__margin')\n\n    this.ifxNavItem.emit({component: this.el, action: 'show'})\n\n    const navItems = this.el.querySelectorAll('[slot=\"second__layer\"]')\n    this.isSidebarMenuItem = false;\n    this.showComponent()\n    this.handleClassList(navbarItem, 'remove', 'hide')\n\n    for(let i = 0; i < navItems.length; i++) { \n      navItems[i].setAttribute('slot', 'first__layer')\n      navItems[i].moveChildComponentsBackIntoNavbar()\n      navItems[i].addMenuItemClass()\n      navItems[i].returnToFirstLayer()\n    }\n  }\n\n  getRightArrowIcon() { \n    const menuItemRightIconWrapper = this.el.shadowRoot.querySelector('.menuItemRightIconWrapper')\n    return menuItemRightIconWrapper;\n  }\n\n  getChevronDownIconWrapper() { \n    const arrowIcon = this.el.shadowRoot.querySelector('.navItemIconWrapper');\n    return arrowIcon;\n  }\n\n  @Method()\n  async returnToFirstLayer() { \n    const subLayerBackButton = this.getSubLayerBackButton()\n    const navbarItem = this.getNavBarItem()\n    const rightArrowIcon = this.getRightArrowIcon()\n    const subLayerMenu = this.getSubLayerMenu()\n    const slotName = this.el.getAttribute('slot')\n\n    this.handleClassList(subLayerBackButton, 'remove', 'show')\n    this.handleClassList(navbarItem, 'remove', 'layer__item-parent')\n    this.handleClassList(subLayerMenu, 'remove', 'open')\n    if(this.hasChildNavItems) { \n      this.handleClassList(rightArrowIcon, 'remove', 'hide')\n    }\n\n    if(slotName.toLowerCase() === 'second__layer') {\n      this.ifxNavItem.emit({component: this.el, parent: this.el.parentElement, action: 'returnToSecondLayer'})\n      this.handleClassList(navbarItem, 'add', 'menuItem')\n    } else { \n      this.ifxNavItem.emit({component: this.el, action: 'return'})\n    }\n  }\n\n  componentWillLoad() {\n    this.setHref()\n    this.checkIfItemIsNested()\n    this.checkIfItemHasChildren()\n    this.removeEmptyItem()\n  }\n\n  componentDidLoad() { \n    this.handleItemGap()\n    this.handleLabelWrapper()\n    if(this.hasChildNavItems) { \n      const navItems = this.getNavbarItems();\n      this.relocateItemsToFirstlayer(navItems)\n    }\n  }\n\n  componentDidUpdate() { \n    const navbarItem = this.getNavBarItem()\n    const isLayerItemParent = this.handleClassList(navbarItem, 'contains', 'layer__item-parent')\n    if(this.isSidebarMenuItem && isLayerItemParent) {\n      const rightArrowIcon = this.getRightArrowIcon()\n      this.handleClassList(rightArrowIcon, 'add', 'hide')\n    }\n  }\n \n  @Method()\n  async setMenuItemPosition() { \n    if(this.isMenuItem && this.hasChildNavItems) { \n      const menuPosition = this.getItemMenuPosition()\n      if(menuPosition === 'left') { \n        this.itemPosition = 'left'\n      } else if(menuPosition === 'right') { \n        this.itemPosition = 'right'\n      }\n    }\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  getSubLayerMenu() { \n    const subLayerMenu = this.el.shadowRoot.querySelector('.sub__layer-menu')\n    return subLayerMenu;\n  }\n\n  relocateItemsToFirstlayer(navItems) { \n     navItems.forEach(item => {\n      item.setAttribute('slot', 'first__layer')\n    })\n  }\n\n  setHref() {\n    if (this.href.toLowerCase().trim() === \"\") {\n      this.internalHref = undefined;\n    } else this.internalHref = this.href;\n  }\n\n  checkIfItemIsNested() {\n    const parentElement = this.el.parentElement;\n    if (parentElement.tagName.toUpperCase() === 'IFX-NAVBAR-ITEM' \n    || parentElement.tagName.toUpperCase() === 'IFX-NAVBAR-PROFILE') {\n      this.isMenuItem = true;\n      return;\n    } else {\n      this.isMenuItem = false;\n    }\n  }\n\n  checkIfItemHasChildren() { \n    const sidebarItems = this.getNavbarItems();\n    if (sidebarItems.length !== 0) {\n      this.hasChildNavItems = true;\n    } else {\n      this.hasChildNavItems = false;\n    } \n  }\n\n  @Method()\n  async setItemSideSpecifications() {  \n    const menuItem = this.el;\n    const itemMenu = this.getItemMenu()\n    const slotValue = menuItem.getAttribute('slot')\n \n    if(slotValue.toLowerCase().trim() === \"right-item\") { \n      this.handleClassList(itemMenu, 'add', 'rightSideItemMenu')\n    }\n\n    return true;\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  getItemMenuPosition() {\n    let parentElement = this.el;\n    while(parentElement) {\n      if(parentElement.tagName === 'IFX-NAVBAR-PROFILE' || parentElement.slot === 'right-item') {\n        return 'left'\n      }\n      parentElement = parentElement.parentElement || parentElement.getRootNode().host;\n    }\n    return 'right'\n  }\n  \n  toggleItemMenu() {\n    const slotName = this.el.getAttribute('slot')\n\n    if(slotName.toLowerCase() === 'mobile-menu-top' || slotName.toLowerCase() === 'second__layer') { \n      this.openSubLayerMenu()\n    }\n\n    if(!this.internalHref && slotName.toLowerCase() !== 'mobile-menu-top' && slotName.toLowerCase() !== 'second__layer' ) {   \n      const itemMenu = this.getItemMenu()\n    \n      if(this.hasChildNavItems) { \n        const menuItem = this.getNavBarItem()\n        this.handleClassList(itemMenu, 'toggle', 'open');\n        this.handleClassList(menuItem, 'toggle', 'open');\n      } \n    }\n  }\n\n  handleNestedLayerMenu(e) { \n    if(this.isMenuItem && this.hasChildNavItems && !this.isSidebarMenuItem) { \n      const itemMenu = this.getItemMenu()\n      const menuPosition = this.getItemMenuPosition()\n      if(e.type.toUpperCase() === 'MOUSEENTER') { \n        this.handleClassList(itemMenu, 'add', 'open')\n        if(menuPosition === 'left') { \n          this.handleClassList(itemMenu, 'add', 'left')\n        } else if(menuPosition === 'right') { \n          this.handleClassList(itemMenu, 'add', 'right')\n        }\n      }\n\n      if(e.type.toUpperCase() === 'MOUSELEAVE') { \n        this.handleClassList(itemMenu, 'remove', 'open')\n        if(menuPosition === 'left') { \n          this.handleClassList(itemMenu, 'remove', 'left')\n        } else if (menuPosition === 'right') { \n          this.handleClassList(itemMenu, 'remove', 'right')\n        }\n      }\n    }\n  }\n\n  handleLabelWrapper() { \n    const labelWrapper = this.el.shadowRoot.querySelector('.label__wrapper');\n    const navItem = this.getNavBarItem();\n    const slot = labelWrapper.querySelector('slot');\n    if (!slot.assignedNodes().length) {\n      navItem.classList.add('removeLabel')\n    } else if(this.showLabel && navItem.classList.contains('removeLabel')) {\n      navItem.classList.remove('removeLabel')\n    }\n  }\n\n  handleItemGap() { \n    const innerContentWrapper = this.el.shadowRoot.querySelector('.navbar__item')\n    const numberIndicatorWrapper = innerContentWrapper.querySelector('.navbar__container-right-content-navigation-item-icon-wrapper');\n    if(this.numberIndicator || this.dotIndicator) { \n      this.handleClassList(numberIndicatorWrapper, 'add', 'no-gap')\n    } else { \n      this.handleClassList(numberIndicatorWrapper, 'remove', 'no-gap')\n    }\n  }\n\n  removeEmptyItem() { \n    const hostElement = this.el.shadowRoot.host;\n    if(!this.showLabel && !this.icon) { \n      this.handleClassList(hostElement, 'add', 'hidden')\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"container\" onMouseLeave={e => this.handleNestedLayerMenu(e)}  onMouseEnter={e => this.handleNestedLayerMenu(e)}>\n        <div class=\"sub__layer-back-button\">\n          <div class=\"back__button-wrapper\" onClick={() => this.returnToFirstLayer()}>\n            <ifx-icon icon=\"arrow-left-16\" />\n            <span>Back</span>\n          </div>\n        </div>\n        <a href={this.internalHref} target={this.target} onClick={() => this.toggleItemMenu()} class=   {`navbar__item ${this.isSidebarMenuItem ? 'sidebarMenuItem' : \"\"} ${!this.showLabel ? 'removeLabel' : \"\"} ${this.isMenuItem ? 'menuItem' : \"\"} ${this.hasChildNavItems ? 'isParent' : \"\"}`}>\n          <div class=\"inner__content-wrapper\">\n            <div class={`navbar__container-right-content-navigation-item-icon-wrapper ${!this.icon ? \"removeWrapper\" : \"\"}`}>\n              {this.icon && <ifx-icon icon={this.icon}></ifx-icon>}\n              {this.icon && !this.showLabel && !isNaN(this.numberIndicator) && \n              <div class=\"number__indicator-wrapper\">\n                <ifx-indicator variant=\"number\" number={this.numberIndicator}></ifx-indicator>\n              </div>}\n              {this.icon && !this.showLabel && !this.numberIndicator && this.dotIndicator && \n            <div class=\"dot__indicator-wrapper\"></div>}\n            </div>\n\n            {this.itemPosition === 'left' \n            && this.hasChildNavItems \n            && this.isMenuItem && \n            <div class=\"menuItemLeftIconWrapper\">\n                <ifx-icon icon=\"chevron-left-12\" />\n            </div>}\n\n            <span class=\"label__wrapper\">\n              <slot />\n            </span>\n          </div>\n\n          {this.showLabel && this.numberIndicator && !isNaN(this.numberIndicator) ? \n            <div class=\"number__indicator-wrapper\">\n                <ifx-indicator variant=\"number\" number={this.numberIndicator}></ifx-indicator>\n            </div> : \"\"}\n\n            {this.showLabel && !this.numberIndicator && this.dotIndicator ? \n            <ifx-indicator variant=\"dot\" /> : \"\"}\n\n          <div class={`navItemIconWrapper ${this.hasChildNavItems && !this.isMenuItem && !this.isSidebarMenuItem ? '' : \"hide\"}`}>\n            <ifx-icon icon=\"chevron-down-12\" />\n          </div>\n          \n         {<div class={`menuItemRightIconWrapper ${((this.itemPosition === 'right' && this.hasChildNavItems && this.isMenuItem) || (this.isSidebarMenuItem && this.hasChildNavItems)) ? '' : \"hide\"}`}>\n            <ifx-icon icon=\"chevron-right-12\" />\n          </div>}\n        </a>\n        \n        {this.hasChildNavItems && !this.isSidebarMenuItem && <ul class='navbar-menu'> <slot name=\"first__layer\" /> </ul>}\n        {this.isSidebarMenuItem && <ul class='sub__layer-menu'> <slot name=\"second__layer\" /> </ul>}\n\n      </div>\n    )\n  }\n}"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-e2e501d4.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as c,g as a}from"./p-e6edf72d.js";const d='*{font-family:"Source Sans 3";box-sizing:border-box}body{margin:0;padding:0;overflow-x:hidden}header{margin-bottom:15px;display:flex;justify-content:center}.header__info-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}.infoboard__wrapper{display:flex;gap:15px;background-color:#f1f1f1;padding:5px 10px;border-radius:10px}.title{font-size:30px;font-weight:bold}.view{margin:auto}.wrapper{position:relative;width:100%;height:calc(100vh - var(--header-height) - 15px);overflow:auto}table{width:100%;table-layout:fixed;border-spacing:0}thead tr th{border-top:1px solid #dddddd}td,th{padding:10px;background-color:white;border:none;box-shadow:0 0 0 1px #dddddd;box-sizing:border-box}table th:nth-child(1){width:150px}table th:not(:nth-child(1)){width:240px}th{position:sticky;top:0;background-color:white}.sticky-col{position:sticky;z-index:1}th.sticky-col{z-index:2}.second-col{left:0;border-left:1px solid #ddd}.wrapped-content{width:250px;white-space:normal}a{text-decoration:none;color:black}.basic__info{display:flex;gap:5px}ul{padding:0 5px;margin:0 15px;list-style-type:none}tr:nth-child(even) td{background-color:#f1f1f1}ul li{font-size:12px;display:flex;gap:5px;line-height:13px}li.planned__component-wrapper{align-items:center;line-height:16px}.version__wrapper{display:flex;flex-direction:column}ifx-icon{color:rgb(10, 130, 118)}.check__icon{width:10px;height:10px}.planned__icon{width:12px;height:12px;vertical-align:sub}';const f=d;const b=class{constructor(c){e(this,c);this.getPlannedComponents=()=>{const e=this.el.shadowRoot.querySelectorAll(".planned__component");return e.length};this.setPlannedComponentsNumber=()=>{const e=this.getPlannedComponents();const c=this.el.shadowRoot.getElementById("number__indicator-planned");c.number=e};this.getCompletedComponents=()=>{const e=this.el.shadowRoot.querySelectorAll(".completed__component");return e.length};this.setCompletedComponentsNumber=()=>{const e=this.getCompletedComponents();const c=this.el.shadowRoot.getElementById("number__indicator-completed");c.number=e};this.setTotalComponentsNumber=()=>{const e=this.getPlannedComponents();const c=this.getCompletedComponents();const a=this.el.shadowRoot.getElementById("number__indicator-total");const d=e+c;a.number=d}}componentWillLoad(){let e=this.el.parentElement;if(e){e=e.parentElement;e.style.padding="0px"}}componentDidLoad(){const e=this.el.shadowRoot.querySelector("header");const c=e.offsetHeight;const a=this.el.shadowRoot.querySelector(".wrapper");a.style.setProperty("--header-height",`${c}px`);this.setPlannedComponentsNumber();this.setCompletedComponentsNumber();this.setTotalComponentsNumber()}render(){return c("div",{key:"a9317d9ff8a2e0c722c79d5408aae68b6a78d935",class:"container"},c("header",{key:"0d1dd2dd41c1e87279c2818eb25167607b26e536",class:"header"},c("div",{key:"db20d4e8bbaba88ff60b8eac8335353a2739b16d",class:"header__info-wrapper"},c("div",{key:"80978ce1a0468376ef1d8c0ef188861e42e14739",class:"title"},"DDS Components Overview"),c("div",{key:"36e3de8f4be025d39bac35be99d71f248048fe62",class:"infoboard__wrapper"},c("div",{key:"c4d7a75ea7497b48cf6bf7eeac4c29279801dc9f",class:"basic__info"},c("div",{key:"a6b03cfa8298828111531cf5965dcc2935e76695"},"Total Number:"),c("div",{key:"5f062b1cd8ece4dc057e0dd882a2d3cfa88149ec"},c("ifx-indicator",{key:"577c2f2c03d04f7d73a43c5fdd4c85b42cba9e00",id:"number__indicator-total",variant:"number"}))),c("div",{key:"14be2f32617cce07bad11cdc2118576386e304e3",class:"basic__info"},c("div",{key:"dd0c997b607b5b48ce49e99c80709a6520328aca"},"Completed:"),c("div",{key:"ff0f78289bad9a260508f4808a0d17f9eba43bdc"},c("ifx-indicator",{key:"2af162b88c9f82b4c2cc86fd8e599f60d4300532",id:"number__indicator-completed",variant:"number"}))),c("div",{key:"6e05d67e8ad902f1cd1f7f6026cabbf79df52cde",class:"basic__info"},c("div",{key:"5590aaa55a99c64160fced1385f901c1ac1188a0"},"In Progress:"),c("div",{key:"d89d76660b98e7311612837d1ee2b7e85c2047f1"},c("ifx-indicator",{key:"bfa336f7c1e92cd1ab89af6ca6107ec505ff71b1",id:"number__indicator-planned",variant:"number"})))))),c("div",{key:"12d70e2b15d8f4bb56f97d4560150beb0b3ba898",class:"view"},c("div",{key:"fa0af528b2ba725a5f0ba131412b312c254003e7",class:"wrapper"},c("table",{key:"57a126dddd97807ae461a71616acbfbf2e6e8e36"},c("thead",{key:"5a0e88f4296324314b8b50a514e42c6fa711d2d9"},c("tr",{key:"025b3be37c57402951fe3b134d74d2f4fecfea5c"},c("th",{key:"84b3deaf3cc2895e7671300cde6446ad2a9c7519",class:"sticky-col second-col"},"Component"),c("th",{key:"166b942c39191767298dd600195f8d92488f35f7"},c("div",{key:"573a113b8d39e782a850e9adbeaf60ea32b5b8b2",class:"version__wrapper"},c("span",{key:"0bfb5b33fafbad1a39d6c03b38c8afe878903206"},"Version 1"))),c("th",{key:"f0e533661e1618b3924fba2a553baa3b47e038c1"},c("div",{key:"c851e0d269e890db275ce247171403a707f33765",class:"version__wrapper"},c("span",{key:"10b24650f9570fa861d46bcf4511ba2efb1c2c9a"},"Version 2"))),c("th",{key:"b53c6b92bbc437925d9e67110c34e2f3b21405cf"},"Version 3"))),c("tbody",{key:"1a067f776fa3fab5cca2b494770fb5b8f0f80704"},c("tr",{key:"c8e40f739f27fa22b21b3f6b62ea7d348ffbe9a9"},c("td",{key:"e83a981ea8bb900977645b57d11c3b6a2ed74476",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"d666afdfc6eeda51e6991307bda6511179a839af",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-accordion--development",size:"s",variant:"bold"},"Accordion")),c("td",{key:"543f17a920c155a5d0bc80787547696547136425"},c("ul",{key:"be1de8d25357db15884eba62b43006b40a7d9c0c"},c("li",{key:"5e7a47a6a69529a03e8e33209a83cb63da95ced4"},c("span",{key:"e349efbe7bbe4ca6cd6bec52fac5b20253130195"},c("ifx-icon",{key:"8ce456949cb7fe23ec0233d171f50aa15c2c0b1b",class:"check__icon",icon:"check12"})),c("span",{key:"12181714205c83fd5403388f0ce7bd91b674d14b"},"Includes essential functionality such as expand/collapse behavior and minimal customization options")),c("li",{key:"9e05adb2e1ff2da544accc1a46fa883e58b5e2c8"},c("span",{key:"fdd34205e815e37a0da7e98e53bd17fa5486b1da"},c("ifx-icon",{key:"2aa8e5588ec63cbf8c8fd03f0615c572f5670e61",class:"check__icon",icon:"check12"})),c("span",{key:"f788fc28ed5a7473de86818574de6b7db7c0e9e9"},"Adheres to web standards")),c("li",{key:"f27fed47db722b6d7c4d9bf76bed21f05548856f"},c("span",{key:"f5dbe17c7cf8aa89755c8639740b2f08ca082aee"},c("ifx-icon",{key:"44d67fd104c529abbd726fc18de9e7678a144c67",class:"check__icon",icon:"check12"})),c("span",{key:"96f356532c75b31fad8e66c659f3bd114b6b0b6e"},"Provides a simple and lightweight way to organize and display collapsible content")))),c("td",{key:"a6a0024aaba96350b4d882a20697a17e1c469f7c"},c("ul",{key:"ecaf9c73a9bf4914c5c7a7a6b345b13e84ae1076"},c("li",{key:"53813984d383b7e7f1dcc4cb3f12400d2295c143"},c("span",{key:"fc2b897ddd7a807c16fc1d274c03cb0759ae4b5e"},c("ifx-icon",{key:"023a0de4a2ceded946da0e27df8a6162713ff5a2",class:"check__icon",icon:"check12"})),c("span",{key:"723a9553f2ac2bb11de3f8c315b36457c35b35ad"},"Auto collapse feature")),c("li",{key:"e79184e6c8d25347fec26032dbf759c1c4ba4c76"},c("span",{key:"cb77a2bcdde692b7d144fd1c450c388bca6478da"},c("ifx-icon",{key:"f4dd49084000a5e6505668f906a4dd4dc9523287",class:"check__icon",icon:"check12"})),c("span",{key:"c899257a7e38ac9b5e7e3c9b3bfb1ea5fe714adb"},"Initial collapse feature")),c("li",{key:"68a0a3c0944b438023ee9a76c77cb9a912d70b9e"},c("span",{key:"a41874193c7251feeabfa262d1416cfec00c4f56"},c("ifx-icon",{key:"307e4c44008a8c7ca9a5bb75575587b1be0c2cb9",class:"check__icon",icon:"check12"})),c("span",{key:"c095ba7224e4c2bee7cf87a834fc591ceccad277"},"React, Vue and Angular wrapper integration")))),c("td",{key:"81514412d66d5dd2ac1c06685290407f36509f50"})),c("tr",{key:"b6d9198c1dcb4e4ea4341d16d7e1f483bc7b441e"},c("td",{key:"a8b46a0f23c2895dac20eb7a98db6913dccd957e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"bd0faf9cadcfc532bf176f4c7d96a51a4f735719",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-alert--development",size:"s",variant:"bold"},"Alert")),c("td",{key:"d6815628e3c52c7b19d1ec0ab0b95ba6ca7974da"},c("ul",{key:"bc6f51e824b26c119266aa4b845ea8e8da692910"},c("li",{key:"20df8d97df793d20747359fab6886561f41fc868"},c("span",{key:"db9e05ad637cc48e8ee21f42fc9ed0be7d162744"},c("ifx-icon",{key:"56338c6d453195de4395304481bc94d5852545ea",class:"check__icon",icon:"check12"})),c("span",{key:"0490fbf8153ff395597e89dd7bf839238dab3673"},"Provides a lightweight and customizable interface for presenting alerts, including options for different alert types (e.g., primary, success, danger, warning) and basic styling configurations")),c("li",{key:"145c599eb47dfd7e68e1cfc96d03993f7a44476e"},c("span",{key:"78e227555cd73a10f7a188d88b29fd50096fe40f"},c("ifx-icon",{key:"3aaf2746c7ec3e8adb3b8f26717ce5b39f13f882",class:"check__icon",icon:"check12"})),c("span",{key:"ca8738de25840045a950658c290010a81fe65e26"},"Adheres to web standards")))),c("td",{key:"8c1cfa7fa11a4958cd9626d86bfb146030e86cc7"},c("ul",{key:"44bced7d21d9d81f7bd78e8b5c03df2cc394a6d9"},c("li",{key:"c8d9ecc3135c5610d496e6d4df807e9e212915a6"},c("span",{key:"0a9931ce7d7ba7ac821a7c80caeefcc614aec414"},c("ifx-icon",{key:"f307e3df4c36e41c58f1807ac24ffb4e0d4f6ff8",class:"check__icon",icon:"check12"})),c("span",{key:"190f037263cf3df09e6e45f53ddfa9fd6f0f7665"},"Configurable close button")),c("li",{key:"663fce76a83e6db5ddc2b2d783929636c319fac7"},c("span",{key:"5b2f7dafcda174cf3e0517c88905801ce753be98"},c("ifx-icon",{key:"639dde1ab1587ec3c5396a5a6cb4aece382a6633",class:"check__icon",icon:"check12"})),c("span",{key:"5f9ae04d2685bbd797dbfc1b9fdcd515c2d29014"},"Additional Info variant")),c("li",{key:"ab5d99140648d8d909c57b91c809f89cd084ea96"},c("span",{key:"330c4719fee84750e5a8a73a0ad55dcd17a55461"},c("ifx-icon",{key:"6860d8c74dffb81f89eb8664241c8fd86855521f",class:"check__icon",icon:"check12"})),c("span",{key:"d2a68bece8e98ac17af2a0017b80bd016fb37d5e"},"React, Vue and Angular wrapper integration")))),c("td",{key:"ea3522157632809fa3aacfa6584e625fa1f20d18"})),c("tr",{key:"ff7dd4c8f33d4d14252e4c15ac17a57da8d5c227"},c("td",{key:"2e3e89ab7e2fc5ea5201020fec04f8b3597c4a5c",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"aeb03c178bc8ce24e1cb4c5e479ed32400d9d582",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-badge--development",size:"s",variant:"bold"},"Badge")),c("td",{key:"ef24884a487d54c2314e2175e956c1595108022b"},c("ul",{key:"58dd7d8f7a29467b4bde1d43de04618742a89cf0"},c("li",{key:"74ea98a2d3daf29d2916d12a7a0ab0076662daf9"},c("span",{key:"d2a557df2f6a8f3b6af1813fe0fe991d737f442b"},c("ifx-icon",{key:"183e1045d986be0b5604f16e08b9c6e465527f19",class:"check__icon",icon:"check12"})),c("span",{key:"084d696a486f2970d1713ec8a7bcdc3a462cb411"},"Offers simple customization options for displaying badges, allowing developers to indicate specific actions, statuses, or categories with visual cues")),c("li",{key:"95bc9ed770e5e67a56aca5220c8620a8731e4268"},c("span",{key:"927e4b3914f9a63170580f70fef14948021ac474"},c("ifx-icon",{key:"eab9bd9f09423050b27c92d2f43f5c124b3466c1",class:"check__icon",icon:"check12"})),c("span",{key:"50aa265b6a89841cc3578a8dd8e1f75ee437f6c2"},"Designed to seamlessly integrate with existing UI elements and adhere to web standards")))),c("td",{key:"2b7165d076a32e7bde12f39ae94c151309a814c7"},c("ul",{key:"34ff9b08e702a52a267963e60dab94456a95322d"},c("li",{key:"21fcc3b4601f7a95543e064342adcf0466750c09"},c("span",{key:"3085483d70e77a66e2f8ca92ff4a42fd3a23421e"},c("ifx-icon",{key:"ac440ea1ab661f6ed36d3ec7312e95ed939d6c1d",class:"check__icon",icon:"check12"})),c("span",{key:"e69c4158015c72651684ea64720b4f23b2c82cbd"},"React, Vue and Angular wrapper integration")))),c("td",{key:"691ff9a831e1fae22c26013f6b59c34394397a8a"})),c("tr",{key:"d70b2be6820cbfb0f7eb606ef2b629baad853391"},c("td",{key:"47db2f27f47f3663d083db5802184a6a0cf4b3b6",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"35b436481031553dbb268222847d7639827da5f2",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-breadcrumb--development",size:"s",variant:"bold"},"Breadcrumb")),c("td",{key:"8dc3c8fda8a37108e61d817ad25f9114a94c57c0"},c("ul",{key:"aedfc621a98c8c6b63bb5b7db72856349ba50d63"},c("li",{key:"51a7cd8b15accd5e4599b060be31386c63d8b852"},c("span",{key:"b8c57cd7cce564f8d80914c6cc42da34568c0f4d"},c("ifx-icon",{key:"ecd93ff99c45f13d8ee5aabc14b2f6af81bde022",class:"check__icon",icon:"check12"})),c("span",{key:"2e58c27610d1dffe9ac6727e8b833aaff5fd1980"},"Provides a simple and customizable way to display a sequential trail of links or indicators,  representing the user's current location within a hierarchy of content")),c("li",{key:"1e1a7e3510f30cbed0d3cabed8bdc219f856af2c"},c("span",{key:"6fe5b7e34d3f73532d26d71aede8ac4bf1b1a35c"},c("ifx-icon",{key:"7aff4fae9174ba26db7b68b44ae6723e9d8d7794",class:"check__icon",icon:"check12"})),c("span",{key:"10701170130618ad2e38dbc75a7ea1034f887bb3"},"Adheres to web standards")))),c("td",{key:"d885fe5b0ad84e8726fcfbb2088a1866c3b6ecc9"},c("ul",{key:"4ca1d4eaa623f3811eb752d954f09827e7eb1dce"},c("li",{key:"10ef90a1ca4cc309960ffba673b3a0dd56da6da1"},c("span",{key:"22a3e4c6e50e8733967c7876bcdfe2abcf5c3c58"},c("ifx-icon",{key:"b162c6fc3720329867ef9e3884ca61764aead00f",class:"check__icon",icon:"check12"})),c("span",{key:"83a0ba63c4c2f4c6f72fce67979ff09a304affd9"},"Possibility to add an icon")),c("li",{key:"6ebf7e5cee671056009066a2e60b024c46f13eb9"},c("span",{key:"15415f1c177cfe26fe2a24efc20515e80ce242a5"},c("ifx-icon",{key:"d721ba736624580342d3f4433642250309a9d288",class:"check__icon",icon:"check12"})),c("span",{key:"af779a4cb8c788db8bd14c0a1dba873e5962b3b8"},"Incorporated dropdown-menu for individual items")),c("li",{key:"3f425e24ca26ea7b5bf4d991f7b80d2fab0b7be5"},c("span",{key:"3ac38ec90f91d964d8716ec546f8caa79cd16307"},c("ifx-icon",{key:"78eb006bbde81bc4756a6a9bdbe4eaca3ef13e1a",class:"check__icon",icon:"check12"})),c("span",{key:"8531c1c09800a263c71ac47a28180448fea825aa"},"React, Vue and Angular wrapper integration")))),c("td",{key:"fdcbba3fcad4377556436447a513d2c962c6d1d2"})),c("tr",{key:"abe8e4cdb54da5fc5b131038dd6f84183986a956"},c("td",{key:"e38f17e387f4da9ba340cae1eaeb9642667203bd",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"60c57fb27b430525bfab81f6a772b43ee213af6b",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-button--development",size:"s",variant:"bold"},"Button")),c("td",{key:"c5f33778ffb9717950ccc18979bbbc02adfb6ec5"},c("ul",{key:"0f98a4d3e3fa1e0376159d15df6987c9a4039ffb"},c("li",{key:"7ebb7f63419f0b590cef5a9dc0579184cf55bd22"},c("span",{key:"1a04572a8436221bb477b79c38fd50549cf011e7"},c("ifx-icon",{key:"84e04849e6fe400245db8d28359e9a43c2ad1689",class:"check__icon",icon:"check12"})),c("span",{key:"a1ebf657fc99b71d39dce889e00b128c7bb57b00"},"Includes basic styling options such as colors, sizes, and states, providing essential functionality for initiating actions")),c("li",{key:"efcc6d683b54ea9af65c924ce9bb50ca086b28f3"},c("span",{key:"407dbf3cc38f5193dd199bf0e97d25434a1718f9"},c("ifx-icon",{key:"6f0d15d023fbd017f673b96dbffcf0ef797b83e6",class:"check__icon",icon:"check12"})),c("span",{key:"49a53406388b0e7b45ee75b80e8bf7f8c18d9048"},"Adheres to web standards")))),c("td",{key:"5b9b54b21d29d3a1267d55d4f0c698562d159820"},c("ul",{key:"c240a3515196f5eb540e92748f25998fb7f0a94f"},c("li",{key:"15ffa0d9475fc1e13a12d9dc96feeca5b9f6083f"},c("span",{key:"4641236dd5ae71d75b6ef6cca77a254994d637fa"},c("ifx-icon",{key:"7a12fc4690b85430212e7a946516670b0ea91ce6",class:"check__icon",icon:"check12"})),c("span",{key:"795316f584f2d667624f00532fad7ddaadb4e595"},"fullWidth feature")),c("li",{key:"1112e16a7450fcce351f9c6719fe72f9d19a0c5c"},c("span",{key:"d8b0ef2ca343aab3716e747c6fd6bfcdde797a0f"},c("ifx-icon",{key:"6e558b4c503665a4f4830bbc0fe013bc14d85615",class:"check__icon",icon:"check12"})),c("span",{key:"a5d404bc71bd4591a12237ed2a3c69dee8291dda"},"Icon integration")),c("li",{key:"81dbe8d403898edad20a172167f47e3b4caee78d"},c("span",{key:"76c0883b8fbc9d1eea52f1b6040af0c757ccd1de"},c("ifx-icon",{key:"2d1f1472a9b66d013ecde405648ce13ebd7c404f",class:"check__icon",icon:"check12"})),c("span",{key:"17d035cc16005985e621e625fb633545d60e00d4"},"Link integration")),c("li",{key:"b8d68b8b99e067dc76b0b7cdd4a8a5bd588a6fd5"},c("span",{key:"3f3af3d3c82a59638580c5db02d50df432f3b206"},c("ifx-icon",{key:"8628f60a78191563a2472e371c15ce4363115b05",class:"check__icon",icon:"check12"})),c("span",{key:"8ca0797fb289071c415a19338c4df6b3b1a99875"},"React, Vue and Angular wrapper integration")))),c("td",{key:"052273f3fc1d4f86160c641942cb1b7008faaafb"},c("ul",{key:"b4b0bd13d4af4c0eaebb6a3e5231c4cd983cc16d"},c("li",{key:"4a02cd8b308b4b8542a3fe2669e471c35d2dfac3"},c("span",{key:"e5313a01d743a33a2c1e0904f811b88544e695fd"},c("ifx-icon",{key:"3f37966fb59ebcdc8d8f6c6192dff0c9acd97036",class:"check__icon",icon:"check12"})),c("span",{key:"bd2f3fb5f2d3d7ecdcccfb25b63c2949127d1bf2"},"Form integration"))))),c("tr",{key:"2f64fdcf05a71c11ed3bd42220156d06b5928a9f"},c("td",{key:"78da6e699db78581e2de0cc83419902d64eec40e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"465dd6c1575160a363070d68a785957f0976b001",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-card--development",size:"s",variant:"bold"},"Card")),c("td",{key:"10e7ecf1ed974509aa0f379f9f3319c3921c44e3"},c("ul",{key:"b8d0584acd9ef37ea03e2933e78563874e5d5065"},c("li",{key:"bebd9ea990f44335a23fac0c2a2f5029cfc57b26"},c("span",{key:"8e886745288f53fa4c165bad30ec331c4356f605"},c("ifx-icon",{key:"18ed4acc797e4e2a56cffa692c63a3f62f2465f1",class:"check__icon",icon:"check12"})),c("span",{key:"43109f338fac4f4f5a1f69323bdc251780b41298"},"Provides a structured and customizable layout, featuring elements such as headings, images, text, and buttons")),c("li",{key:"c64f069e7154e624e2c46b55ca9c2378be7df605"},c("span",{key:"525b928fef8b1a8aae562a92f9d2bcb2b477a230"},c("ifx-icon",{key:"1a1515d1bfa0f2d9e76770317af3108bbb17472d",class:"check__icon",icon:"check12"})),c("span",{key:"a9fe2e4b3e262b8d30e942d739da0c00fb726445"},"Adheres to web standards")),c("li",{key:"224ce7e8fd8a95ab89315bb969ac6f2a1e10a1a7"},c("span",{key:"a1d212c444d03766f9d8a2e4c29668206d654477"},c("ifx-icon",{key:"0af9dbc5f7d1f3256f856adf478ab9dbea4a365a",class:"check__icon",icon:"check12"})),c("span",{key:"125472f6c87facf1640dd69a4c926bad53cdea71"},"Horizontal and Vertical layout")))),c("td",{key:"3caf552a626e1759c77a55ceacb585c3c995dd20"},c("ul",{key:"34ffab194dadd23896a147f3bdd560a54611f66b"},c("li",{key:"85b77937faae6c55ba09380411bfad7962fc8dfa"},c("span",{key:"34192ed035b15e34854a3d3f28425c99d52397d0"},c("ifx-icon",{key:"a4bf15869c5027fb053a91d11831fb9e3fe3a8b0",class:"check__icon",icon:"check12"})),c("span",{key:"f1d8513fd7a606e168ec679f8e049cb060e10310"},"Possibility to embed multiple buttons")),c("li",{key:"d3fc8fa06ebad784ba4685eb1db8102c6f9cd9d3"},c("span",{key:"17f2f5ce423085b5d38fab1aedb1eeed40fce4e8"},c("ifx-icon",{key:"7d3c492a17e5cacb9ba7b14df60c88d2e9bb1ed8",class:"check__icon",icon:"check12"})),c("span",{key:"42e7e04a64d2f9dbb7fbe719254f1131a9b497fa"},"A switch between a Link and a Button")),c("li",{key:"67c91f2d81608aeba3aa2847657ecc22e36a0f92"},c("span",{key:"abb9e49fbf1940379c5fa5f062e6922150cf419f"},c("ifx-icon",{key:"c3257ae4e45bbd68b68000eae8eeeaeed5ea8263",class:"check__icon",icon:"check12"})),c("span",{key:"c4593a5c309fd66c45db0fd1ae488f1e2e5ec08f"},"Enhanced stylying behavior")),c("li",{key:"0892d2840d7e6e452f0483d80da56ce0ba05af57"},c("span",{key:"ea12f921d8c11d1a377e7593ad15f1a7e3b4c240"},c("ifx-icon",{key:"642c054f52096c931f6d94faddb8f516179afebf",class:"check__icon",icon:"check12"})),c("span",{key:"eddef6e79329c77c8c8e4b3e8eeb7ed2284cd7ff"},"React, Vue and Angular wrapper integration")))),c("td",{key:"743bb548d29440712e581110da56c4980373c1c8"})),c("tr",{key:"d94e4dd0009715978eeb74f904bf25181f7feed6"},c("td",{key:"a07cb6903dc7846f63af950614014cc9b105d69a",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"63717a27050b5a2b3269b8328656793f119a8e64",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-checkbox--development",size:"s",variant:"bold"},"Checkbox")),c("td",{key:"2a6675ce8b4bedde0a50f80f05958c57790442a6"},c("ul",{key:"af28cee2e422300ada0db5ee375f3ac132f2d059"},c("li",{key:"053042b1b8ac5a58c78167e45dd7f286cd02209d"},c("span",{key:"57c7e341370876a53094a5f371e166e5f8e72a1f"},c("ifx-icon",{key:"16780870ac494fb630ef6315e9b3cca6d41604e4",class:"check__icon",icon:"check12"})),c("span",{key:"eb23e5ad9cd638e2c8243dd09eceb170c8f77260"},"Offers a simple and customizable checkbox input, allowing users to toggle between checked and unchecked states")),c("li",{key:"6f9863261743de72cfc8dc81f2dc5b6c88e53dca"},c("span",{key:"8832d36fb0a3e22a9afd3a89e4a6cb2791218ffe"},c("ifx-icon",{key:"705d9f6906f83d912b311559860737d42db5e2c4",class:"check__icon",icon:"check12"})),c("span",{key:"3daec7c96d42d6915a7d9e1da311f0ecd7ca0fe4"},"Adheres to web standards")))),c("td",{key:"399c254b6aaa8d64a263fcff5662cb118b03ec80"},c("ul",{key:"301bbacc5942b1197d98d0d8f99900f4b5c92e3f"},c("li",{key:"6a699f0642fc34d8e35c1ef968b0b7ab68a84916"},c("span",{key:"eec9c1959d6073319ef24ec5fafd9b26c6120aeb"},c("ifx-icon",{key:"e8504f2b3efe67b9072acb0f1848cb62cf5f68e4",class:"check__icon",icon:"check12"})),c("span",{key:"9b7538b5e6380ceddd73a5c63d1cae9120cefd65"},"Indeterminate state variant")),c("li",{key:"40e0a8f11993bb6155a708fb13dea799a4589b15"},c("span",{key:"bc2de235c3f8ba692a6a164c1aef7fe6893f1ee9"},c("ifx-icon",{key:"efdf0a858fdbba787f0a7b034d87270bfc1ea725",class:"check__icon",icon:"check12"})),c("span",{key:"3a32ba9215619f4959274b6198c84fe18cd4fefa"},"React, Vue and Angular wrapper integration")))),c("td",{key:"cdf9762cdcfea9d9e70c36ffa0705d7049ecafbd"})),c("tr",{key:"b0275bed20397242feae7957d1596c33bff3c2a1"},c("td",{key:"dd7780da66fbce249491ecb963995f7c34a747a6",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"3d1baafd3309dde5b32df0fa62b2cbdd220d41de",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-checkbox-group--development",size:"s",variant:"bold"},"Checkbox Group")),c("td",{key:"6e588c90b15730e3f6b161512f8f4ba24066b273"},c("ul",{key:"a37faa89f97cf7a14b2c9baa9aa09fbffc454bbd"},c("li",{key:"e8a3598423a748b7ef7737e781f42173cf987581"},c("span",{key:"7f395f4bb6eb210f4b47785ad2e39eee32900959"},c("ifx-icon",{key:"d4b1d26723ca357c937f7dc339d4a0f9aceb9959",class:"check__icon",icon:"check12"})),c("span",{key:"68e8ac7b975d0f2dcee7a0be78e4a17401cb71ca"},"Provides a simple and customizable interface for grouping multiple checkbox inputs")),c("li",{key:"f17ee2090122c41363e60a0b8b10fb74462e962d"},c("span",{key:"a88a706d470114a4d44defe704462284511f6be1"},c("ifx-icon",{key:"d651c4304c0b32078579a060c8cbc391cb691418",class:"check__icon",icon:"check12"})),c("span",{key:"5c5ae3152e76e79e73a6a95e0ec2e255b88c1975"},"Allows users to set and display group label, caption text and caption icon")),c("li",{key:"285ad79a74fee93305e44842659093a43f323a0b"},c("span",{key:"710ccb9542082db1849f776140b2dd0b05470323"},c("ifx-icon",{key:"4e86bda98b6116d6ecb25e2f152de630cf48f077",class:"check__icon",icon:"check12"})),c("span",{key:"e5bfd57ee818ca2f592caf1789ca73bb3eab15d5"},"Allows to display individual or group error")),c("li",{key:"73a5f4dedbaefbdee3716d474af96b6ad6a84fd0"},c("span",{key:"d19a84786fa80a8b8d29300583e0c949eadf7a0a"},c("ifx-icon",{key:"7369062cd6ca39e52300977ef22728dc7e46ac05",class:"check__icon",icon:"check12"})),c("span",{key:"22c56812db317719c597b3f4f570e4fa53a7576f"},"React, Vue and Angular wrapper integration")),c("li",{key:"6eaf2ca6ed7a676f87e1e2a31ed935839deeba44"},c("span",{key:"f654f1738a4549666db7d894e3c14e5395a03cd3"},c("ifx-icon",{key:"e155b661a463fd3305bd67bcefe88e19aede726c",class:"check__icon",icon:"check12"})),c("span",{key:"79c2fd6c9f2ac77bbf2d17ce56efe42ae9383b62"},"Adheres to web standards")))),c("td",{key:"6b301538799dfc131e331d7c5f8443d4150b80a8"}),c("td",{key:"9b9a18286f7c00c19a387bf28bcf48186fb1b498"})),c("tr",{key:"f3436c8e060f0135af08f7a9962ac1f17ce67e2d"},c("td",{key:"5f09170a2d133c4ddec296ef141b147a0b6ad769",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"4b1d346aa63978ff034bd870b89cba03a22a827d",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-chip--development",size:"s",variant:"bold"},"Chip")),c("td",{key:"17591a3cd57c743ecee007096b7ee43e39e09b76"},c("ul",{key:"8223e97c788823abf8e1dcd69f5d9787cd96c11e"},c("li",{key:"7c1a1b24b852e92d585226a7880ca37780a0c3c9"},c("span",{key:"7142ef5529cfbe8b14a8d8d25a7dbafeacb71df8"},c("ifx-icon",{key:"c9767ca3366cf31393310fcd74b0dbd79c87e375",class:"check__icon",icon:"check12"})),c("span",{key:"c4a988d77157ed0540e2a468ce16bfbfacb8c0fe"},"Provides a simple and customizable interface, representing discrete units of information or user interactions, such as labels, categories, or removable entities")),c("li",{key:"a74c028aa6f28972619d5bc92af58eb5fb1a13ab"},c("span",{key:"d52fb19fed44c89b6f16ea6b6dc64139260aa95d"},c("ifx-icon",{key:"75cd7bf6729a74a010cd747a76958aa30c8c25d0",class:"check__icon",icon:"check12"})),c("span",{key:"d2cfc85a677d5ae2bfbff356765d04ce4b29d567"},"Adheres to web standards")))),c("td",{key:"37126b457b06eeb02b523003184734e27318535e"},c("ul",{key:"61bc060aab3dd6f2f8c37f1c7272a5c05df9a9d1"},c("li",{key:"cfb8a56ba3a9a7f267a551d256ddfac752fd90d3"},c("span",{key:"aef43a83b2f57a4f808f10f28ec42c722fffd10c"},c("ifx-icon",{key:"b304a980d084ffe18a6fced7853fd33823b516ba",class:"check__icon",icon:"check12"})),c("span",{key:"c42279f1f9e4d7911f370dd45567aa30b8614cc2"},"Incorporated dropdown-menu for individual item selection")),c("li",{key:"d79dcbfddece493971a69d79cad131c1ff614605"},c("span",{key:"cb05626f5fbc9d02b27febaf29c44a80c47d654e"},c("ifx-icon",{key:"a363abed710fe856de7a658a18d876f047aed592",class:"check__icon",icon:"check12"})),c("span",{key:"ae31668d92410b31e71ff8a75ee0f671a0f22718"},"React, Vue and Angular wrapper integration")))),c("td",{key:"5919a68c4ee00d5bb7f78b1fcbe94cc700013bf1"})),c("tr",{key:"3812ff4b3ad0add187bf4bcaa9925fe7d55fb750"},c("td",{key:"bbc26f7b8e4c980cad2cbeef34393fa14028b8dd",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"a62813288ff0ca1c32b67b67a579477b98501ffd",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-chip--development",size:"s",variant:"bold"},"Date Picker")),c("td",{key:"7ce6ff5503fdfe9bce879c2cb2699080cfcd9b94"},c("ul",{key:"7089c9cf683f6dffdaaa0f06cdde443b390bb135"},c("li",{key:"d09598ce2b4e402976c5c9d55595a223716a2dde"},c("span",{key:"3c72f4744aff5bbaa65f31ef218634fdbc7d9b63"},c("ifx-icon",{key:"504e45904f7a97d0040189194e14e73f1e075412",class:"check__icon",icon:"check12"})),c("span",{key:"73b0e2093e83b99149c9488c98440fecb14125f2"},"Provides a customized wrapper and theming for the standard date picker element, enhancing its appearance and user interaction")),c("li",{key:"9cf09019048f80f4648b2bd959a3820289ed52ff"},c("span",{key:"f7aa9bd8c118c0efe59bb54da6d100cf77c0ee81"},c("ifx-icon",{key:"5069360ccba9492c40184f1bce92c06e4ca592c6",class:"check__icon",icon:"check12"})),c("span",{key:"cae0de8fa41e18da4f51494756a88d89b12b2337"},"Cross browser compatibility")),c("li",{key:"57b7ba0e9d8343fba472647ca0d8f09406aa0acd"},c("span",{key:"78cc126affe320be03e047fdfb82c4aac9a1e5c8"},c("ifx-icon",{key:"eba837d4b2eaad355b3bf36a718d13fd5e333241",class:"check__icon",icon:"check12"})),c("span",{key:"be8c4473d5956e3fe4e2d4146b2485d598b91ae3"},"Form integration")),c("li",{key:"1533448a601be6400c8ee90ec625eccb436e2c9f"},c("span",{key:"3d5b6850649b815a9d15f9c9a166140118373f3d"},c("ifx-icon",{key:"ee1b4db7228a420b126b1c1f2f84761db1e746ad",class:"check__icon",icon:"check12"})),c("span",{key:"70c13cf75bb4115b916c6eb834886e6b94dc4f7c"},"Adheres to web standards")))),c("td",{key:"c373f9f145e27807409de67fb432e5902d85f71c"},c("ul",{key:"2cc748d125d55e1d0c2345b1a49f6b619219d6ef"},c("li",{key:"03d643a5262d12cab3e02c682b71485f4f006182"},c("span",{key:"3c42e9fdb7de3417c41489db90796bc5401abdb1"},c("ifx-icon",{key:"69ed0bc264ae5df86fa0cd27e97015197d6653df",class:"check__icon",icon:"check12"})),c("span",{key:"7d69b5eca15d3140e23f08ff5b11e8a64c0aaad5"},"Range")),c("li",{key:"e93353689dbf852f102c588863a6ebe5a7739ac9"},c("span",{key:"7612ab348a416772a0859bdd94b5bdf468d6b34d"},c("ifx-icon",{key:"6ef7af1f240edccd4a6e2ce2a280b665074b04f1",class:"check__icon",icon:"check12"})),c("span",{key:"7332e9a99cfc24fa89efac2ec59af99e34932506"},"Default value")))),c("td",{key:"772198e2dd23a48be721bf088749ec6765bca57b"})),c("tr",{key:"47118689b94c6568540444e5c081ce7514906b58"},c("td",{key:"80181b88c2e3658be0a5fba4286cd461ad7d4cc3",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"7997617fe093e520f010c2c7efa7bd55569eca21",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-dropdown--development",size:"s",variant:"bold"},"Dropdown")),c("td",{key:"d1d3110e7455e04145ea7a615fcdc5e11ea86c03"},c("ul",{key:"7326746db9adc3a09f35df64317898e735fe8809"},c("li",{key:"d5944c5142bdfe15311998adda421164ed1d081b"},c("span",{key:"ccc78f1cb82934d4ccd0d77c1ca88fc25eb84a71"},c("ifx-icon",{key:"1e890648c4547bf6ca1aa509a9e3556f068f9d8f",class:"check__icon",icon:"check12"})),c("span",{key:"4ed38652929a20a6886c707992665c1ed8760d9e"},"Offers a versatile and interactive user interface element for presenting a list of options or actions")),c("li",{key:"dd09ab28ffeb24f1b5c047013c0043f21d216825"},c("span",{key:"67c2e7521e2b7245f0acc446a6bdee5d0aa67d02"},c("ifx-icon",{key:"266b480331b4f13e9972952d6b0ba8dc4dc245c2",class:"check__icon",icon:"check12"})),c("span",{key:"808a3488f3eac9420dbe42f5b243d7f902c1f8e4"},"Ensures consistent behavior and compatibility with web standards for a reliable user experience, while intentionally limiting customization options to emphasize a standardized appearance and behavior")))),c("td",{key:"7332d127835c2bb17aabee28ecb32b82149fdb84"},c("ul",{key:"f330ae322aa525e9388920193f0c9d85cbe03241"},c("li",{key:"2388a328be40636cdcc7c48a5b8392d6f9fd755a"},c("span",{key:"b8e1f8dd7391cb8da9313b41ba92a0475729c19c"},c("ifx-icon",{key:"064f296336b576f37cf7736f4db536e1bfd0bb5a",class:"check__icon",icon:"check12"})),c("span",{key:"0a38d4b73b28f0a9509de8ecab296d2a0b9c24c5"},"Search filter")),c("li",{key:"64de0718b648cd8a6be35fd60e53c4163dac6ab4"},c("span",{key:"164631048678c7f585b3fe5ef1228ad205ea2f35"},c("ifx-icon",{key:"8f8dece8e2080747904c18a8bb530b093cc6f0b7",class:"check__icon",icon:"check12"})),c("span",{key:"6d20341099989ee2d1090a4d00e5650f7df0b72d"},"Header section")),c("li",{key:"a361eeca2520641d3ab39a13210dad62e2c213e0"},c("span",{key:"7dddded09944a4ac185930cb20cea76c4916540a"},c("ifx-icon",{key:"5df229205cccd41722569937f901a8ad4d7e2809",class:"check__icon",icon:"check12"})),c("span",{key:"19991481af3cc28676a0dd3e55eecc181d16c27c"},"Menu Item Divider")),c("li",{key:"f9685ddf94b276721e7628285f8d527db77efa86"},c("span",{key:"53ea56eb4c4aa3accb5fc5a65b97527a782b7c3c"},c("ifx-icon",{key:"89aff575a9617e33d104fb49f0dd30f397035798",class:"check__icon",icon:"check12"})),c("span",{key:"a1e35e890a132388269045c36f5f18c148fb3702"},"Icon incorporated")),c("li",{key:"75bef338c4258a9d5cb3b52700ae4d5b84db25ef"},c("span",{key:"2f4406f08fb541bc9cd4a12f618a0e2f20f47748"},c("ifx-icon",{key:"1b32c523ec65edfd113a6c89c9503ea3c8813115",class:"check__icon",icon:"check12"})),c("span",{key:"7c0d82901a9c5283f108d7c5a6aa6d7aa6a8e085"},"Extended customization and configurations")),c("li",{key:"73572f08b4944888efc2c9c97a027576ccabd0ff"},c("span",{key:"3e0adef28b2730d5b52df6e34bd1c348085ab25c"},c("ifx-icon",{key:"7df961dd64b8db51e73ec4a48aa7f07d84a9cecd",class:"check__icon",icon:"check12"})),c("span",{key:"05b250b59f3827fdaebe5902056bb08f97a3e9e9"},"Separate label trigger")),c("li",{key:"e55474f0445fb49693af512ded4b3498571d4aee"},c("span",{key:"f0f62f36e4377a4b041cab9cd21d9c966777845b"},c("ifx-icon",{key:"a4c7fab11e22d603f80d405442b9f1b70412d5ea",class:"check__icon",icon:"check12"})),c("span",{key:"67a4a17f84b001fb26029d36d5c2d079ba812115"},"React, Vue and Angular wrapper integration")))),c("td",{key:"a6957ab6e8c0753790c5283d447322e33540193c"})),c("tr",{key:"d34cea8630500810342efeeecff9fb8315d0abbc"},c("td",{key:"523664f40c8d3b3fa68fba79d0c2f7dcd3c5fc47",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"aa5897f0e6b6aa67c6d3a35c873bd603e26f13a4",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-footer--development",size:"s",variant:"bold"},"Footer")),c("td",{key:"a2f7f4ff3446fc10b69d9d638f4ba887561771f6"},c("ul",{key:"0c560224195dccab6c6bd3d064bb019864e7c4d1"},c("li",{key:"9c47315df8226f68d070b5fa4effd016a9566f49"},c("span",{key:"3f476593e8f315eba30ed97bcb6c0a8dded92b48"},c("ifx-icon",{key:"f05f5b56b00d96c0eb63fb50df2ad68bdda84206",class:"check__icon",icon:"check12"})),c("span",{key:"abe5b3f37140af491a49a30b24e5393b002322b8"},"Provides a standardized and customizable way to display essential information, navigation links, and branding at the bottom of web pages or application interfaces")),c("li",{key:"fe1f2a1b7d09ca0d5e42b4cc1595452b49817206"},c("span",{key:"85871dfa3f471d90a0dab6e83b92e7708df74384"},c("ifx-icon",{key:"f364bde061fd38d96fc03b8e31bf8ecb369c4251",class:"check__icon",icon:"check12"})),c("span",{key:"db92da631e06e95b951dd71aae2385b87fc0778e"},"Offers a flexible and configurable layout for organizing copyright notices, contact details, sitemap links, and other pertinent information")),c("li",{key:"8cc5060658e01908d46a0efe6a9d9c80ffcc21c2"},c("span",{key:"1c1fda2c29f4fde8a434410a723a1b518cd74405"},c("ifx-icon",{key:"c053506ebe22f4d70ca306e72d5a3c2cb578aad6",class:"check__icon",icon:"check12"})),c("span",{key:"2bc6d6dcadb623a01a83480ac2e029fac8fcc0b6"},"Adheres to web standards")))),c("td",{key:"43c36cd0ae460d94139199761c2520af6f6d12bb"},c("ul",{key:"e64ef0fbc29b3f4457086705fcbc54b443190206"},c("li",{key:"8cbfd314478724933b762539130257ed7ab0af83"},c("span",{key:"f381cc79fcbea2ea40f96ced6826432b40b85787"},c("ifx-icon",{key:"87b8c8bfabcf19eda203fe50629bfb4d37ea9ec2",class:"check__icon",icon:"check12"})),c("span",{key:"14b0b16602cfdf9e99bd8162f540f58b2b8b2d57"},"Small, Medium and Large variants")),c("li",{key:"5742bcd3dc45b8c84934bb104676e16ecbc2f254"},c("span",{key:"7c605ebf46eecc81c05bd687f1e379e78284d37b"},c("ifx-icon",{key:"27c16b540cd3df911aeeebfe78c47ddfb18e38fc",class:"check__icon",icon:"check12"})),c("span",{key:"db07dde7fc28f789b9597c03c188a06ce9d5be2b"},"React, Vue and Angular wrapper integration")))),c("td",{key:"ffe015d698833b1671d636c4d653adb155d74f7b"},c("ul",{key:"374df4d86df8ba3253b2ae87b0eee044e4b30115"},c("li",{key:"4922287c997036e03d083d63a8e486d1901ebb42"},c("span",{key:"bf2e36b0f1978286e6806a82b6aec47f01ff9435"},c("ifx-icon",{key:"47dc39f6ecc744efd90c20955683b6bbfbab915b",class:"check__icon",icon:"check12"})),c("span",{key:"cc63b33330239772c57dd997716d6b18c6f4b3ea"},"Customizable and removable links"))))),c("tr",{key:"c4ed5d348093dd09b7ddade4a2b91ce10b23a447"},c("td",{key:"f5443a333aa993ad07ad9d41303768dc89bd4daa",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"f0f7c7ad33ab1b5fbcacc68f16ad449b8ee7df65",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-icon-button--development",size:"s",variant:"bold"},"Icon Button")),c("td",{key:"7ae70db1a301f7c1aac77d0c7bd471c62e2e3f1d"},c("ul",{key:"12f705a91c07479ef5fe79cc0948751f6318337a"},c("li",{key:"04ba7f92569ff9e6ac2384fc3b6931a21ef76dbc"},c("span",{key:"632b1ec8aad8ac6ec0d94511ffc4607c58db16b0"},c("ifx-icon",{key:"ea62125b77654fb0deaa26829b7cce2c02fe6623",class:"check__icon",icon:"check12"})),c("span",{key:"c4a97d93d8d3d1f7da287c581858ca8f3bc8487d"},"Offers a compact and interactive icon-based button element")),c("li",{key:"5d45c8142d9d4f539b3f9a3319c90a85795e83ff"},c("span",{key:"d22a79219b98ed50e005d996aed5fefa56d1a725"},c("ifx-icon",{key:"58d95c61d8eb0549535196d04aa1e67298122136",class:"check__icon",icon:"check12"})),c("span",{key:"7f901ebfd8b5dae837b3c0bca56b415e1606c4fe"},"Provides a limited scope of customization")),c("li",{key:"fdff09b84258e31648ede31095085bc88b1b635d"},c("span",{key:"6a0912b8c67eac507aacaf1b7e088f2732eaeeef"},c("ifx-icon",{key:"3df4d8e397f6d7351b7840a134c63c1210d94f09",class:"check__icon",icon:"check12"})),c("span",{key:"2ed3bf7d892663caae88c5284d3959fbae213213"},"Adheres to web standards")))),c("td",{key:"fa96e3f82ea44baed6f897bfa39b00716b9b5c88"},c("ul",{key:"d7b585ef11d67c0f1b50adfc19a1d9f2b63931c1"},c("li",{key:"b686130c5f1b35314950650881efacbd02acb1c7"},c("span",{key:"824c3b13f39eb9ad034e93366351aff116249fab"},c("ifx-icon",{key:"e8602e4b40d97dc8c3f74b91a4666e437b52d5ef",class:"check__icon",icon:"check12"})),c("span",{key:"7089a9b92f89a0d4e1dc431ce92de6a0a873f7d4"},"Additional Round and Square shape variants")),c("li",{key:"8179e6d25334db61322c305d34da7d45b389976a"},c("span",{key:"2bd40c268681cb71c23c9d7ba36db6d1aa615ad3"},c("ifx-icon",{key:"b8f196f2e37a99ef2dbec32cac6f48a445464df8",class:"check__icon",icon:"check12"})),c("span",{key:"bb8cc74917d9ff0d3768e06868a68320ab0fbfa3"},"Small, Medium and Large size")),c("li",{key:"496a2e22e38c912d4d7ca896eda831a0ef806c56"},c("span",{key:"ecc92a8747844397d8545510b57be984b890bf78"},c("ifx-icon",{key:"79c8a8f8c5b08853f4b40be42ea7412e43c83402",class:"check__icon",icon:"check12"})),c("span",{key:"3b6c8f7d31bf093f12bfd0fbcc364aafef0e1374"},"React, Vue and Angular wrapper integration")))),c("td",{key:"dfc415c0a4d804d80a3beaa95547e0ddcd4ddc38"})),c("tr",{key:"1d7b3b9254aa3ffaf117383c56e0d333432c4c9b"},c("td",{key:"9dc5f3b95d02c5ccd1d4d4bcc150e3c37e1e62af",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"69ba75ceab6ed86a1d6c6916f5888adc1ce61cff",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-icon--development",size:"s",variant:"bold"},"Icon")),c("td",{key:"d8c42524f2a51cb22d59c682138c9e765afde4a3"},c("ul",{key:"583969e5f9ede611f9450b894ab6832c4a5bfb84"},c("li",{key:"323c43e711f64392a2f54d5a174403727e272a93"},c("span",{key:"92da309dc7065fbffa2fa70dd7a695edbcd5fee7"},c("ifx-icon",{key:"d7726fa805b08ba9f2b5ab08267526f080fd4b7e",class:"check__icon",icon:"check12"})),c("span",{key:"e536352376ca41c3e3f69fa81998de5ab2d83982"},"Offers a wide range of iconography options, allowing developers to easily incorporate symbols, glyphs, or visual indicators to enhance the user interface and convey information or actions effectively")))),c("td",{key:"43205fceefc1cc60a4bb6585f36f89c0440d039a"},c("ul",{key:"a71555e84c03f4537c43f99a6f63acae592ef661"},c("li",{key:"0e7f9c62b6bb5f58988829ec948c865a7bc0bca5"},c("span",{key:"f60f0c21c599263def88809f41a320bc6ac12f85"},c("ifx-icon",{key:"4d6b358a6734ea76f91f74bff9ea1f2c135b23d6",class:"check__icon",icon:"check12"})),c("span",{key:"f2db362d6455880c7e7e800142f9ccd78e499678"},"React, Vue and Angular wrapper integration")))),c("td",{key:"d791ecf0fbd1ba23d81726c31420185ebe51503a"})),c("tr",{key:"c4787de103fec54b1424947b659fda7cedb7ac14"},c("td",{key:"fa7533e7f5a1e9708984d8035ad7432ce9ac3805",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"a4d377581177c62cf13e31d12d38c31858320e4c",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-link--development",size:"s",variant:"bold"},"Link")),c("td",{key:"eab54c483fb0ee3e061be002c6e1356e4b8ec10c"},c("ul",{key:"b7b428033c1b155d0c8189127455985a2fdb0a94"},c("li",{key:"cfa3090450c164cb1e6e51dae9f043916de131c2"},c("span",{key:"3253af8e1527de40762c8af86b8f804c1d7aa293"},c("ifx-icon",{key:"c133b4b731a59979d173dd4190915c3d7b2719cd",class:"check__icon",icon:"check12"})),c("span",{key:"7b64533f298aa43943f87bebe067fc54aeae0720"},"Provides a flexible and customizable element for creating hyperlinks within a web application")),c("li",{key:"b9763e150a968eaa2e4ad7c8dfd29eb1d12f266b"},c("span",{key:"319de14aeda46fa0c7cc2264e5a4e70e31309894"},c("ifx-icon",{key:"b3ebdb554fab4404d7c31e4349f3459380c099f4",class:"check__icon",icon:"check12"})),c("span",{key:"0f434cb65176ddc874c2dce7d2e686065d20fd7b"},"Offers essential functionality for defining clickable text or elements")),c("li",{key:"aaf6cbe816000359b784657697aba94561b5e523"},c("span",{key:"3868dfa3a14e47ffde6a38d141b798c07a9a6861"},c("ifx-icon",{key:"f19c10172276b1a44f3fc9013155a928786e782d",class:"check__icon",icon:"check12"})),c("span",{key:"cfdf64173b13d9c94c3dc0fe0edd2c30cceb624e"},"Adheres to web standards")))),c("td",{key:"e3fa93d34206d4c17aa215002fea353afe1fe6c0"},c("ul",{key:"679d1df2f723d86e6d174255956e4ad6f87507ae"},c("li",{key:"1c7ead268a2dd47eede616c7b63f2ba01e5057a2"},c("span",{key:"19f9b207df2876af70372917de76ab3820df75c4"},c("ifx-icon",{key:"06ffc6b77bd96ca2b683640d1cad6fac30adaa86",class:"check__icon",icon:"check12"})),c("span",{key:"9d36a0655f9fffeac95e765255e614f71a69e15a"},"Small, Medium, Large, Extra Large size variants")),c("li",{key:"2504188be88afc3a18bd230969756ee0277c40d6"},c("span",{key:"fffa9ac813bb8d6b60bd483f488bf6132e892f31"},c("ifx-icon",{key:"45f185557c1c16a2f323bf1c48ce801666c04022",class:"check__icon",icon:"check12"})),c("span",{key:"f42c74d4a96270126e3d9893517ac7ca42be49d1"},"Icon incorporated")),c("li",{key:"082b26eda4e9790e2231ad8e3005239b0cea7a64"},c("span",{key:"dc14295c2d7d62e0d1b5e86b7c6e5e3ff8081e55"},c("ifx-icon",{key:"24f4e2945332f22b2f1fa21edd96cee9d7f2e264",class:"check__icon",icon:"check12"})),c("span",{key:"f975dae2b8918978f7f57b32dabf8e891ad94f32"},"React, Vue and Angular wrapper integration")))),c("td",{key:"dc48bf9249faeabb781cc06cea25771132049ab7"},c("ul",{key:"6f142fa4aca73ec837ee91b03656800dae05dbfd"},c("li",{key:"4604bafc36bcba9409d7c37891cb307a847c9db0"},c("span",{key:"1daf9deec6b52f818b23fec158372b7144be00ba"},c("ifx-icon",{key:"882710ed95b72c18e40988de940f25934e4803db",class:"check__icon",icon:"check12"})),c("span",{key:"a3909909b1d886f050188e3ec25ba988f24d9697"},"Bold, Underlined, Title, Menu state variants"))))),c("tr",{key:"8ecfaf907d44e3dd8ff3eb32255d6253297ab127"},c("td",{key:"3b0f3cb98b346325c8c30fb0bd6025c7d540d844",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"a39830a58549c896dff09f37a834ed3803c9b7aa",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-modal--development",size:"s",variant:"bold"},"Modal")),c("td",{key:"c978a73460c7bdd67427679b63b34b2cb20d1fcf"},c("ul",{key:"1e79e6822cc3fa53d51023e52ad4571186bad694"},c("li",{key:"4c256069c3db777a7ff15a2dfb61d31db5aad3ce"},c("span",{key:"c9eed2a5a032a40a4aa643bc9bb28ede16546a46"},c("ifx-icon",{key:"e1fccf7f56ae7b10e4360e1c4ccac75ffc03eb07",class:"check__icon",icon:"check12"})),c("span",{key:"64007f817b72d0e9986c42ac7196c99df54618d9"},"Provides a customizable modal window, typically used for displaying contextual information, user interactions, or additional content without navigating away from the current context")),c("li",{key:"75ea28fd379af4017208d1bf6d3c440e5e06ff39"},c("span",{key:"baff672c7d926205a716181a0c2e445aded715c1"},c("ifx-icon",{key:"58cdd7d7d6d333c1d42e5773a5692c60e663a2bb",class:"check__icon",icon:"check12"})),c("span",{key:"46717a1beb887320cb0b8c3a17f0e341a0cfd4dc"},"Adheres to webstandards")))),c("td",{key:"37eb55d6ff4ebffef7d61a5f9f09856ef17b7658"},c("ul",{key:"302d7779c7ef73dc6992e7249ad541d1e6a6c263"},c("li",{key:"43b1b1703ffe0fc37c2ddae8fa2cb2e9f8891973"},c("span",{key:"e275501ef634c8843d0510681b31cfa8424d33ce"},c("ifx-icon",{key:"9326242e9c1019f0fbf0b549b9967d6153f397a2",class:"check__icon",icon:"check12"})),c("span",{key:"9702d6d7cbc04cfcc154b4fe24312c2d1b414410"},"Alert-brand and Alert-danger theme variants")),c("li",{key:"2e4bea3956ce42c3ece76e9cd39381b6bb042b3a"},c("span",{key:"97438ba5e36d723d03c6c2b894a8cc54c7704747"},c("ifx-icon",{key:"892e183c3c9aa3a5f8231fb9662952976f71ac08",class:"check__icon",icon:"check12"})),c("span",{key:"0a30fe6bf7b86d05b0c87dd4521ea611e34f4705"},"Extended customization")),c("li",{key:"05f1716bf746a83acdead3b51a18025aa5bbf70b"},c("span",{key:"dcb5cd73876e1f521a0a1c4dcf44afa06d8d81ee"},c("ifx-icon",{key:"a8725734085b18e30045cdc241ab923a23e494e1",class:"check__icon",icon:"check12"})),c("span",{key:"0d9a97f5e4630ee675dfad8cb62554da56db9afd"},"React, Vue and Angular wrapper integration")))),c("td",{key:"3be5b0a0729d2f0e2e90f41f093bab8c62dbab29"},c("ul",{key:"f9bb509ba8304fcc5f24b7ed8bb4c8728aed0db6"},c("li",{key:"26041a756d1f17927825c560ca85f7c5349ee86e"},c("span",{key:"616f0cad8b43206fdc1a666dd1e7f14c344b45f9"},c("ifx-icon",{key:"665a889e7c733d45d3fb6256a53829b8c094b48a",class:"check__icon",icon:"check12"})),c("span",{key:"20d3cc2c036c6ff96166e6ac56bbdf084283fbdb"},"Removable close button"))))),c("tr",{key:"77922eb7985f6c47eb2e4bb0e1e0db801ccb46e2"},c("td",{key:"d5ae750cb62f2511a352e421e9f748dc8b4a16a0",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"89993df8cd66da8208b4bae7983b27d0d9f3e36f",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-navigation-navbar--development",size:"s",variant:"bold"},"Navbar")),c("td",{key:"c1f440035b1513a5c3a05341a834d4e9f3257b4f"},c("ul",{key:"516a8edd5ebf4374bedbd2abe69cfa6bcfcf46c7"},c("li",{key:"72983656c2fc28a488bceb8740ceeafb1047fc7b"},c("span",{key:"f4d2fc85a5806c68a144f82b120a1635b305dd2a"},c("ifx-icon",{key:"da9170b74a29b37a3c3f53ff4deb94a3b930fbdc",class:"check__icon",icon:"check12"})),c("span",{key:"e19df30e784dd48471c8ae94928fb0f21fce96c3"},"Provides a standardized and customizable navigation bar for organizing and presenting essential links, menus, branding, and interactive elements within a web application")),c("li",{key:"66710c5f9b37f9c8cc7563529e96b5fffb773bd5"},c("span",{key:"ea3c351dfa039c6e07b67a88728a92efc7014239"},c("ifx-icon",{key:"d879d3600a043a57046b3227cb9f8005348a34f5",class:"check__icon",icon:"check12"})),c("span",{key:"16de757eadda21c563d28dd73bf3eb8e6012f4bb"},"Adheres to web stadards")))),c("td",{key:"76ebfa9b2ebbd979144abee1a4a386a4bf9aed1f"},c("ul",{key:"f645972b8ad90b3c97c7f5993b7a178b32fe184d"},c("li",{key:"962ff4a703b193ba6002161f5b1b4435b4550c2e"},c("span",{key:"f334d0895caa2fe960711dcc5fc646f86d575bcb"},c("ifx-icon",{key:"34e50e50099333449aa5f2454fd2c62b160c28f2",class:"check__icon",icon:"check12"})),c("span",{key:"4ad308e0653b226bae10ea2fd1711746b5dad879"},"Navbar-profile component")),c("li",{key:"b15b8f245fb8ee4ae84f39948806bba21acbd1d9"},c("span",{key:"5c709b03067679008e0a54a79ebb03e3b1009877"},c("ifx-icon",{key:"cd3159a37ce18aaafa270447e9ff454c3af8cc0e",class:"check__icon",icon:"check12"})),c("span",{key:"bdd457d6b04b18b51f387c7cb6408a10c24b4816"},"Mobile Responsiveness")),c("li",{key:"f2a96a1f378efe960f95445debf3697d76644df4"},c("span",{key:"8e88624072127c6817056052c5df6cba0ff1861d"},c("ifx-icon",{key:"63fcf870fce983a545b571e3d8be7f2483a9c9d6",class:"check__icon",icon:"check12"})),c("span",{key:"2a54a382d3f717a9a3412cb52035f04641ddf18c"},"Mobile Sidebar")),c("li",{key:"6ec42d165fc12922dc48ed573ac1b16b42ffd008"},c("span",{key:"87f27df53fc6a4178d54a30ce2054947ac29df21"},c("ifx-icon",{key:"52c2d280949bf9cb8f422726c7cebe6c0b6b72da",class:"check__icon",icon:"check12"})),c("span",{key:"9608ad2129de4813b5324d9e1dd2ccd67e50bd12"},"Extended customization")),c("li",{key:"0c163f2ccc801b5712fc582e96433105b302553e"},c("span",{key:"2862360d3cfad4672bc88f13db9b3aeb8c51fdce"},c("ifx-icon",{key:"d2233e0cc49251e3e6abfc8095cefdf5057e5264",class:"check__icon",icon:"check12"})),c("span",{key:"3a3169682a04c798fc69d079225ab7ae65569b7c"},"React, Vue and Angular wrapper integration")))),c("td",{key:"b5962e6b2c79d6104d4774e13aee29a68bf4d1cf"})),c("tr",{key:"274d9e85ef301c6e530e838abd012617a4c8a149"},c("td",{key:"79a962a0017934b514a0e0d501641a8120c8b592",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"6a86a9e4bdef89e2ca6f28fb93caa0b2fad16816",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-indicator--development",size:"s",variant:"bold"},"Indicator")),c("td",{key:"c6900f4b4929871b98894e9ea92786cfead86b65"},c("ul",{key:"6a4da7b305294a1560814e7a9812ba524802aa6b"},c("li",{key:"d4d4c12a2acb41a347e17d9dfb4de30ef4bcc02b"},c("span",{key:"211fa4c1b615d9fd876e6a46fc36564b0ec00a9d"},c("ifx-icon",{key:"1a0d5ef9c9de67f2c0db07448a58f1f2fc920341",class:"check__icon",icon:"check12"})),c("span",{key:"90a530778c09ba726cb8485b6f6606e5b49d6d0f"},"Provides a compact and configurable display for showcasing numeric data or dot indicator")),c("li",{key:"ffb9ee2616001105a3cbe9361e92ebf7d12b6964"},c("span",{key:"540752f665b7964425c9ce30fc6c0b733c1af89b"},c("ifx-icon",{key:"2ba3321fb69f46e747a3ec98f405cd3ff181746d",class:"check__icon",icon:"check12"})),c("span",{key:"b9f49627527e5d13ac10a4393f1f10622116db31"},"Adheres to web standards")))),c("td",{key:"ac6d7af5b8adb605267a6ac270bcb1a395009fc6"},c("ul",{key:"61a5f68f47f3f08a9b2b10bd461c4a3ebaa68a46"},c("li",{key:"79dd2ac1f96164e0dacf2b1142a4f485f714d206"},c("span",{key:"14f8f1ff4ee05d49fdd243f540031732bb511be3"},c("ifx-icon",{key:"9c21617d61e13c7dee14cbd1596a9b21885a7075",class:"check__icon",icon:"check12"})),c("span",{key:"ef519977b7dc6c015f034ba7cadbb9d13750a1a1"},"Inverted option")),c("li",{key:"a52ae377cec490253adf201519fe04715dc8b323"},c("span",{key:"1d0711343a76724a58853401f8c69fa56a8d7a71"},c("ifx-icon",{key:"4441197dd4dc221a2e156198551add485afb57a4",class:"check__icon",icon:"check12"})),c("span",{key:"14fde6a796fe3db74e05863e9a6919bd5e7b4954"},"React, Vue and Angular wrapper integration")))),c("td",{key:"0c7dde8a89ca0cff8501ad58bdd01c4d69c1969d"})),c("tr",{key:"db65c5795ae683c7666e542e3c0f6274b0cf2bd9"},c("td",{key:"52febccbad77b344f2994b014266e575cec8d20a",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"074795bf963313095073cd0aa0131f732cf687ab",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-pagination--development",size:"s",variant:"bold"},"Pagination")),c("td",{key:"0dc71bb7eacc8c52103778552952e7bf157af124"},c("ul",{key:"3e021655dddf9c26ca67518d770e61452f2dc580"},c("li",{key:"105a8430c95bb8986d65d11ef943c0d5e6dfcade"},c("span",{key:"98656dcfd1579d66e1c794f190a01014c989e1d7"},c("ifx-icon",{key:"37bc727ba29ff0e7822fd75fe648365b7cd756e1",class:"check__icon",icon:"check12"})),c("span",{key:"2ff0004fda07094db77fabf39c3ca7f2eed734a9"},"Offers a configurable set of controls for navigating through sequential pages of content, typically used for displaying large datasets or segmented information")),c("li",{key:"c1248c46a0dc23afc1786a458e38978f466db664"},c("span",{key:"e6a414a086471c77896d8bd3611bd24e3e8a8704"},c("ifx-icon",{key:"cbf4fba75f0da5ea4b283c859642e041ee8a1037",class:"check__icon",icon:"check12"})),c("span",{key:"be3eb0155908e57f633910dd6c3ee03436e863e3"},"Adheres to web standards")))),c("td",{key:"4ba7c0d32f432e7aca10e2442575e73b7a88bed2"},c("ul",{key:"b8833004d29949cf38e0c4ba6fbea4fa5b3502fb"},c("li",{key:"1896ebe89769cea23f6f504884c77ecf6acb964e"},c("span",{key:"bda1579eb4d61d9ac2cb9129cd6647ff71905396"},c("ifx-icon",{key:"d306ab88b19e490f3a75719f1798cd8f68c2fb91",class:"check__icon",icon:"check12"})),c("span",{key:"a3be73039381bb1477ac18e0bd5cdaf30db6259d"},"Extended customization")),c("li",{key:"93a1ca2cabe8f2ccbd31ae48a37ed60641f9a25c"},c("span",{key:"a44570002a89a21e510e7e8d10523d4967783069"},c("ifx-icon",{key:"adfb827a7068892b326805d64c7992fea754be8c",class:"check__icon",icon:"check12"})),c("span",{key:"b366e229bb42353dfe6fd5b5d11a7843d0f22dcf"},"Configurable Results Per Page option")),c("li",{key:"1ac6187dfd7117f1066bf42e25dc05e7e7bcd86e"},c("span",{key:"cc083517f61b1250924f4f859d20b8d09eb4f05e"},c("ifx-icon",{key:"7370fb8919141e6b732a6507e1d669d58cc733b2",class:"check__icon",icon:"check12"})),c("span",{key:"1002d3277dcf05efddca3e8d018364f841569eb6"},"React, Vue and Angular wrapper integration")))),c("td",{key:"1afeb99e91b69174b137929969abc231e1cc13eb"})),c("tr",{key:"1ea15e130af6e3d697dc14dfa1f532852ddad902"},c("td",{key:"d020bca55ad7dc55e14b78dcf3ddc691e2f7acd9",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"47b14a5e79034ec365dc5e4f4b31671e1f05908e",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-progress-bar--development",size:"s",variant:"bold"},"Progress Bar")),c("td",{key:"e8b50e10aecb8d644cbd6f0c043467965ac1a98c"},c("ul",{key:"8788eb8ec2dd4c34c85b47e2ab5e6d1d11a157db"},c("li",{key:"5e72225b73226daf2f9bb594c6da510d6584ef09"},c("span",{key:"7f4c9ceddfdc7cd48a7e87a9fe18281ad162afef"},c("ifx-icon",{key:"71b22fbe84adbf0912100d694fbd6e6b3c0f11bb",class:"check__icon",icon:"check12"})),c("span",{key:"ad66c282e457ae4d226f23486966e18e4b4a969f"},"Offers a customizable and dynamic bar that visually represents the advancement of a process, typically used to convey loading status, or task completion")),c("li",{key:"09bc1261904f74d0a5ec9ac4da44176e11e7b9da"},c("span",{key:"3e1ddc1e649a5a8824a273c3c50da5752968aea0"},c("ifx-icon",{key:"8b035178469694202a7a48513f984b1582dbad00",class:"check__icon",icon:"check12"})),c("span",{key:"0f8a927958b7fa19ed0b1452d8c8a63c8b2f8527"},"Adheres to web standards")))),c("td",{key:"48e35b19ae335cbe426c4d67b6ff61c3b3266134"},c("ul",{key:"3e515d65d38c9c41a44a6fdb913b69209e41a9dc"},c("li",{key:"2466b893d7e8d5432f6aa15bc5b771d65ab633f1"},c("span",{key:"bc500c3006559aa39cb7d7098aeaa9fbf245e256"},c("ifx-icon",{key:"8ec30b5925d16b41cd55ff5f4be2104cd4b1f640",class:"check__icon",icon:"check12"})),c("span",{key:"354ab01d8c9d88e8517c870b4ca43458b2e332c2"},"Extended customization")),c("li",{key:"d152aa6de7376c0c59803fbe4a1dd7bb5f6d07e3"},c("span",{key:"06c40d3a8dc1f20931d3ed0d29c356c269642595"},c("ifx-icon",{key:"986718d928ff1fd4d34c98568554a8cbfbb05377",class:"check__icon",icon:"check12"})),c("span",{key:"6ffa2aa7ef5e7714fc4456368036d73d8ba04b3f"},"Show percentage option")),c("li",{key:"82d018565327966bb1bc88bb74743ae9795352e2"},c("span",{key:"4a4b03e17a795a1de6a304b7bbe3950e3cbe16c1"},c("ifx-icon",{key:"52223b279dd8aa6809a5a1e7983ac782800c5ce0",class:"check__icon",icon:"check12"})),c("span",{key:"28eea128dc9d0584f8af1376838feaa76c9b727b"},"Small and With Label variants included")),c("li",{key:"d932c1e5d4f1530321137c97237b555dca1a36c2"},c("span",{key:"1554215ac5e5b1ec11ec2037ec7b652959fe3cc5"},c("ifx-icon",{key:"2024de190ffd16ac2c5e0d9cf521e856ba2b2801",class:"check__icon",icon:"check12"})),c("span",{key:"46bcad0281aa5672565ef7ee4b9737b74f839018"},"React, Vue and Angular wrapper integration")))),c("td",{key:"36166310621214213e5153134a80f35665a4dc48"})),c("tr",{key:"9b07b86b2d76dd9c36614ef6af6c12f62b5c0e69"},c("td",{key:"8328952a66bfadf0a707c9402285455838993bbe",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"350906b6ebd25a4ca5307eb29a6e60bba9c0d502",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-radio-button--development",size:"s",variant:"bold"},"Radio Button")),c("td",{key:"1c012cdc81da3d4c8b961eca0b84c2b34ff10a8d"},c("ul",{key:"b722b95e4914d8867604d24a6a38036ac794a234"},c("li",{key:"adc49b942fcb1bc6450d5c3713ba1826ddb0a9c6"},c("span",{key:"78984dccc2cbca3f6b0d51aa736ce896da555163"},c("ifx-icon",{key:"63fe532309bc114fc27b37ab028a5d781fd48c78",class:"check__icon",icon:"check12"})),c("span",{key:"f952c0979030a08093744f6c01eea51e76802834"},"Offers a customizable radio input, allowing users to make a single selection from a predefined list of options, typically used for multiple-choice selection or exclusive input")),c("li",{key:"801a0b79bab7da9c95f84d9f87ec8e356b528ffb"},c("span",{key:"32ec13f9cda46ac050315a09b6d386d42892af5c"},c("ifx-icon",{key:"a6f71c6b3159d4637c957c25bacb2a972ce01081",class:"check__icon",icon:"check12"})),c("span",{key:"43f4780d273bc7760a87365665cb08c84d437587"},"Adheres to web standards")))),c("td",{key:"707760f564f60c864b959d00d7c78894f79515de"},c("ul",{key:"728ed75e5e18207915fd605752b0c13cf694d85e"},c("li",{key:"9413b4c37f61bf556329994f44fb11973b418c1c"},c("span",{key:"b92517b707e2c66e6062113cb4ccae541187d6ff"},c("ifx-icon",{key:"de114f44ee7f73dbb51d439df0b2e597ae078667",class:"check__icon",icon:"check12"})),c("span",{key:"ec6d1e8005129753f66a3caad0ae903bbccb5821"},"React, Vue and Angular wrapper integration")))),c("td",{key:"bbbb1314b319be30a7df20b497d71fe68605065e"})),c("tr",{key:"67cdecf9ba06f4fe3008a889e76e5c6b726bb3f4"},c("td",{key:"9f1d5776d35c18374cb90e8b48e3ea31dca18404",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"2f728207988b5808bf64269d49ff932fb18a5bec",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-radio-button-group--development",size:"s",variant:"bold"},"Radio Button Group")),c("td",{key:"193046fdf6a43323ca4d6bf0ddcc1813aca58e17"},c("ul",{key:"e26178434988645e86fe7781d33c58288a77b5f0"},c("li",{key:"0749c6ca56ef4d50c9e941b48c20874fd377028d"},c("span",{key:"b58f57265b933916c614decdc6861a6e91ec5c7a"},c("ifx-icon",{key:"eb8a9ee30a2c3e36e2dd3dcbdc18c6feb520038b",class:"check__icon",icon:"check12"})),c("span",{key:"028ef31508ba48adee78fe26ed8c97f3adb8181e"},"Provides a customizable interface for grouping multiple radio-button inputs")),c("li",{key:"06bfb43c98afc30390ac485ce495c372c518fce6"},c("span",{key:"3cf21b1309f01fd6e639379ca914c4f1c1753d4b"},c("ifx-icon",{key:"1f5362c4396e33def285fe37d677140ae321e39c",class:"check__icon",icon:"check12"})),c("span",{key:"925bdd9e3c350e8a0d83c1da194140731a76df0f"},"Allows users to set and display group label, caption text and caption icon")),c("li",{key:"fd9ca9f28a211350571dc5282e8e19d75a6f7edd"},c("span",{key:"70d376b32e23006e41f81fa9bed53caf491e6f48"},c("ifx-icon",{key:"0515c7befbb316d7e6a761434f4b990ac2780ea7",class:"check__icon",icon:"check12"})),c("span",{key:"5bc537fd8d6e2608b30f4a1eb44239b945afdf32"},"Allows to display individual or group error")),c("li",{key:"4d910013c9a0dc5fba10ddad7b41b3ca8f7faccc"},c("span",{key:"a85834f3e7df16f7b3b65d130fcd951e61a621ab"},c("ifx-icon",{key:"7e6a47cef67d386ad7c61d9c0708cc93f1b75f89",class:"check__icon",icon:"check12"})),c("span",{key:"0c2d465a9d164b90e60cfc65e80ebc58d2826920"},"React, Vue and Angular wrapper integration")),c("li",{key:"f6d37ef7b2cacfad2b643c9b03d43ba71eded80d"},c("span",{key:"a9f48b8e564d3b643572d7a1d23f87e2b432257e"},c("ifx-icon",{key:"a7eb306008fcf4f8df70ecc24d97a94d5395b3a7",class:"check__icon",icon:"check12"})),c("span",{key:"4f9099ee1a20d13213db65460bf590cbae372639"},"Adheres to web standards")))),c("td",{key:"14c877ecfe4f7a26f69576f7581ff5766ea651ad"}),c("td",{key:"1272a5ab64bcdf8c12a4a2f4bc6797c5e95e9907"})),c("tr",{key:"95fe40812d5dfdfa44ea21d44dacd1cda5fe97c3"},c("td",{key:"32fdb64b4e64d3a1d921682731e5edd68116bf11",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"2f197dc751ccb1c806192fbcac9e62ea1849a1e0",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-search-bar--development",size:"s",variant:"bold"},"Search Bar")),c("td",{key:"6752efdd578a29fe303818c6ea2735521080f545"},c("ul",{key:"31ba0d5e5d383558349d67d918b84190d388ebdc"},c("li",{key:"86931a1a45d574fc2a2a17420502ccc3c82998ec"},c("span",{key:"26f65a982bf95e0657b59b421a20ed7a9c2d914f"},c("ifx-icon",{key:"4d7d1118151ee06c1c332170b08a00a1f77dea59",class:"check__icon",icon:"check12"})),c("span",{key:"786333877d4a7d019674daba4bc08af784223df7"},"Offers a dynamic and customizable input area that allows users to input search terms and trigger search actions, typically used for querying and filtering content within the application")),c("li",{key:"71a6266a81f8d5a484450f7fa32ff60f7229f5bc"},c("span",{key:"ffeee2658d2967e24a0a71b1d10990f187b10b2e"},c("ifx-icon",{key:"8db8a8e9741330d4b75fdf2a5ee5d7855f358d75",class:"check__icon",icon:"check12"})),c("span",{key:"bded0a9c5d742a9f1470444d5cbba411af14b4b5"},"Adheres to web standards")))),c("td",{key:"d6d1fdf5ad25a8c5dd61e44fcd309af5562f3453"},c("ul",{key:"49c1fc8f12b2574b93874d28bf7c546753ee98ae"},c("li",{key:"fa871cbfa7668c788ccaaf44b110a01eb1c30f5c"},c("span",{key:"22928c6e95f29e2707e40eab2fb5ddcbd839350d"},c("ifx-icon",{key:"d8ae5d32cedadb27ef754b1fcf8f4a33fe5fb3c5",class:"check__icon",icon:"check12"})),c("span",{key:"fb56e1e15bd7af809cd3233374b5b4d3dfdc8c75"},"Collapsable option")),c("li",{key:"481edc2fe84b6f9f64507812d6f90dae6913ca67"},c("span",{key:"596e20ec3e0f1ab087ffb1de487c4508b895b785"},c("ifx-icon",{key:"75a4cc908b8fe078639ebcd3e4041d7f1cfbac88",class:"check__icon",icon:"check12"})),c("span",{key:"3d751e0af9ed479c568a4240f0384f05d540c8d3"},"React, Vue and Angular wrapper integration")))),c("td",{key:"48c5096790fad9d7117a51118fc14ebd9c5d7615"})),c("tr",{key:"a8a878440eb7da662229ab3cd545069af0f67beb"},c("td",{key:"c1dda29aa7e631c7a0ceebd5075709799a123fe8",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"9ee305329254a3b23388f0860ce59d5803477e24",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-search-field--development",size:"s",variant:"bold"},"Search Field")),c("td",{key:"073031a8ed12143c28931eea80c43bbe45aa899c"},c("ul",{key:"d4ce556c2c79ba2f578e0cb9efda56b8c79ed334"},c("li",{key:"9491d5b9c59db7ba182e810915fd4cfdc15b4e18"},c("span",{key:"a0503b16e492268f327296f1b30352f74082f5c5"},c("ifx-icon",{key:"1082404092b41a40caae8834fe62fe107a49b0de",class:"check__icon",icon:"check12"})),c("span",{key:"56d4da9a89fab52a834a68ecf27dfd36b1de783f"},"Offers an interactive and adaptable input area that allows users to enter search terms and trigger search actions, facilitating efficient querying and filtering of content within the application")),c("li",{key:"c28d56b3b1e901df1b54f7084e45753cf7f41c20"},c("span",{key:"532f6c56cf9b50dae7a22c2924c3f53c0f040fe5"},c("ifx-icon",{key:"e252d76734b8ffb131ef59c3cac96d3f2a74a065",class:"check__icon",icon:"check12"})),c("span",{key:"a28117e943626bddb251f9aefcebc6f68e982571"},"Adheres to web standards")))),c("td",{key:"d71f14e81586a0dba92f2abc7a4dace449180abd"},c("ul",{key:"9fdb089a16f4181497a31ce99ee4f625e59b27c4"},c("li",{key:"e8dd52b677e2c60c0da404a6c0f73fab27dbc727"},c("span",{key:"8a3a2a7300f3e21738f366bed973a9db4cc805c9"},c("ifx-icon",{key:"e8e54869b071e3ac86a75c55a325133718b9a9d9",class:"check__icon",icon:"check12"})),c("span",{key:"d5d3df113ff45d858cb1924ef332b855a1bf6817"},"Show Delete Icon option")),c("li",{key:"f83d195ca9e3c3ad42b6b212a53e17bb663fcb61"},c("span",{key:"12942203eb95d006a24cfed1efae16d90868252d"},c("ifx-icon",{key:"b746208f6144a1bdb52251108b33451250a42fd2",class:"check__icon",icon:"check12"})),c("span",{key:"975fc7024ea469ff35be492ab655486658a77be9"},"React, Vue and Angular wrapper integration")))),c("td",{key:"924eac5f2860c24b2aa2824a9be6260e6f6491da"})),c("tr",{key:"5ace9819505e6a101ed536a30d677cb92b74018c"},c("td",{key:"ce645b2cb50864cf4d05eea271b26559a0e06909",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"0d7e66baa80efa697a99a9bce66f7586e068e872",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-select-single-select--development",size:"s",variant:"bold"},"Single Select")),c("td",{key:"d07a2a09b038b4f57caedb098844f4fbb76015e8"},c("ul",{key:"54be0be76e87ec8769e9324962ea7bc378271807"},c("li",{key:"e175d1291f52559641ede8066c3b274bf90ad66d"},c("span",{key:"139ee8ae54f5e398706cf1da5dd31c4142f030f7"},c("ifx-icon",{key:"8ddc5b21b4963b01b6486c8a7e978f0eeb21d119",class:"check__icon",icon:"check12"})),c("span",{key:"94afce8ec881d8ad9072828709dcbf7c548c78a9"},"Provides a user-friendly and interactive dropdown list for selecting a single option from a set of choices within a web application")))),c("td",{key:"1c8fc3a5d247ed3efdb0a40f1f788952e64336b5"},c("ul",{key:"47b518741971ff771351f37c1d63099b7e918509"},c("li",{key:"bafbe1c8d85cf70132e396e23e10013e13dc5e3e"},c("span",{key:"58d901a159ca777ba6cf239d90c1c8f79a8fcc0b"},c("ifx-icon",{key:"95dfb208ae29ea754d41b1167c0df3761d88ba88",class:"check__icon",icon:"check12"})),c("span",{key:"2f1c102dcf3e560f72366368e805c601eca934ca"},"Extended customization")),c("li",{key:"e9b4be72b0aeb49cec1a9528f985e0746c480b3c"},c("span",{key:"2958d59c53d8e79a634934ac49f08faa39646da1"},c("ifx-icon",{key:"afdf15bf3cc2801292df358fa18053d4c400e42a",class:"check__icon",icon:"check12"})),c("span",{key:"ac1d0eb53cedcd4f54075c925695b576ea51a04b"},"Option to enable and disable the search")),c("li",{key:"fb47222cf910fd72b64ad945e047b22a94f8cef5"},c("span",{key:"455e9db4949e01121385ce7d05e2bf0297c64b05"},c("ifx-icon",{key:"bdb8b3831e444ebb24b108c7ffea1df17d341b0d",class:"check__icon",icon:"check12"})),c("span",{key:"2ed116b6456257d49ed921006523664eda91eff4"},"React, Vue and Angular wrapper integration")))),c("td",{key:"fcf3312d8bdd8b216d79e38a63d6fe8a105b4934"})),c("tr",{key:"be7ba91a1bd42f008c095944163dcda2ba72c173"},c("td",{key:"7fa3485880d0cb4dc87323b3f99b76083f45dd04",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"8a866a6f9fe31d06868544f6dd683fd2b86b623f",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-select-multi-select--development",size:"s",variant:"bold"},"Multi Select")),c("td",{key:"187cc592f4e9f34c04aeb8b397ebbd23a1dac5ba"},c("ul",{key:"ed0235add238d1303fdd2d1ebc728a94aa832322"},c("li",{key:"f0e4b00824db38d2718344f887480bc6ed81063e"},c("span",{key:"f468a8b62556b1bdfd9c1a1c27dee75b36b288b0"},c("ifx-icon",{key:"da59e5412ff603e3df259cd69438390f44b95569",class:"check__icon",icon:"check12"})),c("span",{key:"4e19903840c5e0c6cf340f6e30043d9207107dbc"},"Provides a dynamic and customizable dropdown list that allows users to make multiple selections from a list of options")),c("li",{key:"f917b85f70f6f6b2c690500d059689a2716a3d74"},c("span",{key:"c2401fa401a60fcebec67512e1396ecce5cc69e4"},c("ifx-icon",{key:"cfd77c563078c13d329162faeecc83048153414b",class:"check__icon",icon:"check12"})),c("span",{key:"8c57fe10ef3ac4c3b1329e335fc77ffc819bac16"},"Adheres to web standards")))),c("td",{key:"1767c505957fa725f99dcdfc507f2315be285e20"},c("ul",{key:"618a04f16b30d1022d40d48cabfece7f32eb8b78"},c("li",{key:"9e8681578e6c2971b9315ea30b6d1e8b558ab3ca"},c("span",{key:"0adb10ce8a2fb6013b9b19f5f5c0b1a4b82dab1d"},c("ifx-icon",{key:"6e0f581471b6903a3d75e249ca25ca2fdf1e9429",class:"check__icon",icon:"check12"})),c("span",{key:"d8343db26785e7a6ada16aefd425940eee674af3"},"Extended customization")),c("li",{key:"9a66956e04d5099ae374fcd3a409855e5ae7b96b"},c("span",{key:"9e673cb4afe8bd6cf391842f66c651d28a0018c2"},c("ifx-icon",{key:"c648b2d33879fd728326f60e5c30d6f172b5f122",class:"check__icon",icon:"check12"})),c("span",{key:"30a99a46907b129dc034777eaa0c2ce75e3f85d5"},"Nestable options")),c("li",{key:"ea0c6564f5f2885311b849cc3fea5cd8e9b6de88"},c("span",{key:"98bd5326bdbb8dc2564634426d92a2f6f9fa58bb"},c("ifx-icon",{key:"60afc501d73a6acc5304992637a864db25b49395",class:"check__icon",icon:"check12"})),c("span",{key:"42a36afc667148a26552109b6fbbb5b2f94b17f3"},"React, Vue and Angular wrapper integration")))),c("td",{key:"acd6973184ed05a244a2165c1ea88030626df178"},c("ul",{key:"d31509d5127bbe67b6958bdbb0e537c0beede8ff"},c("li",{key:"5ef8aedde8cccd53e9e6276c5e49768eb3fccb21"},c("span",{key:"e0723dc4b80fa5787c77b8e11ddb126301398331"},c("ifx-icon",{key:"14097cf5596a86cf257c5c5a6a3e3ae92d209eee",class:"check__icon",icon:"check12"})),c("span",{key:"f2c472e2d856fcb72eb4687d0845a03d5395f36b"},"Option to enable and disable the search"))))),c("tr",{key:"43a8aa0daf430c50c44c7fc28dc61a4d11c90b7d"},c("td",{key:"e1c4e15987a3ffd26312bea4e52edb5a61c65255",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"90d442131b17780747e4e6128c0808f48bc17cd6",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-navigation-sidebar--development",size:"s",variant:"bold"},"Sidebar")),c("td",{key:"d9304d6d4aeba8166491b337d55344ce6a1469c2"},c("ul",{key:"98c9d7810ee9011f712069d6ddb9ba59734c99b6"},c("li",{key:"3818c27f395f3f7367e0952090dc9323e9224172"},c("span",{key:"aeb1975e6f4fafe0e7712a4e668fc73a627a16ae"},c("ifx-icon",{key:"43f26e235d4364f5900bb27d757f23b1c2171bb6",class:"check__icon",icon:"check12"})),c("span",{key:"72d9af950f6007bd7971be40d88768528153d352"},"Offers a configurable and collapsible panel that typically occupies the side of the screen, allowing users to access additional sections, or menus while maintaining the main content area")),c("li",{key:"b375ae8ab0483c513d460656cac17c114fe1a90b"},c("span",{key:"b6ddf2631fcf0ccb247cb00e50d1eadfbe4c8fbb"},c("ifx-icon",{key:"b40bafd614ec9f08737d2f594d8c4f5566674d06",class:"check__icon",icon:"check12"})),c("span",{key:"c9e7fba4714b5e21ea94632a59fb3fc042a27575"},"Adheres to web standards")))),c("td",{key:"c059b1d036fb72ceca9fb9f4d989db47e04e9fb5"},c("ul",{key:"bdfba2b1b3114585b7ed2f1f079dde49b4248ca8"},c("li",{key:"625b8ed99f37374e9044d857d8422d6cb47eb963"},c("span",{key:"0fa2da01326542c8f80c713eb6e36525610c939c"},c("ifx-icon",{key:"195d0e63459f00e097e3c7f06da6690e2b29e904",class:"check__icon",icon:"check12"})),c("span",{key:"b5fd47ff23d8c61acc7f0229442986238ea3d4f8"},"Extended customization")),c("li",{key:"7cf3eced1104436ec01b33916e3705c58e218116"},c("span",{key:"9f168d30fd180b9d1343990ea1c6edb0abfd1289"},c("ifx-icon",{key:"5ad077c1e024b4c561cafe83ead2b62ff8e1c24f",class:"check__icon",icon:"check12"})),c("span",{key:"7aeb14926831fe5d7c4bf1daa6132e3d1e24558e"},"Multi-layer nestable items and menu")),c("li",{key:"c930cb978624c6133bdb7021f5126c2a2cb7fc00"},c("span",{key:"069fc8f6befd3d63bef69f65442dc6d7b9274dcc"},c("ifx-icon",{key:"3a44116e22ca31af2047a64635bf8aa796867da2",class:"check__icon",icon:"check12"})),c("span",{key:"a25ca5e56eb283967983b6f89f43dea1873b6e48"},"Initial collapse option")),c("li",{key:"435bf11d582b906eac1a2a688f7d6da3b5f581c4"},c("span",{key:"adf0b72eecedec33d61fb5fe65fd4dfa0456b850"},c("ifx-icon",{key:"b9a3fa7e313b09e086e908f590842f4214ca1e2b",class:"check__icon",icon:"check12"})),c("span",{key:"d1d59cf0a6121690b9a6b4ea3df1c37dca591bb1"},"Active and action item feature")),c("li",{key:"7e063c07821fd9fba026bb211b1ef1fb37f85e3d"},c("span",{key:"c7fdcfa803546c1661a4f96143732361e6e53ab2"},c("ifx-icon",{key:"b482c18c28ef08dcb056377c792615dfa780de33",class:"check__icon",icon:"check12"})),c("span",{key:"9131def784bd7c1dc33aa6b82a7e1ff8b2f45f34"},"Number indicator integration")),c("li",{key:"edcefb06184d545923d16ac608d0b14d93916ee3"},c("span",{key:"2be6937e190d7d16949fc72e70b69db665bdb3b2"},c("ifx-icon",{key:"cc4fcc8e094d3c3a3d4da250653362583b675c41",class:"check__icon",icon:"check12"})),c("span",{key:"f4e68f76736d6feea5576e00e734a36126383c3b"},"React, Vue and Angular wrapper integration")))),c("td",{key:"479d9280913e4eb0a82ef1fb2e69f7ed8670d79c"},c("ul",{key:"44dd9c1b3aa1358d5f53f1b613e3aac6bd1eae80"},c("li",{key:"a920d5bf4ac4a3b97ce6e285c89698a0f5a37246"},c("span",{key:"21c1c61188fbf4ff25db9ae483568ef1ad23e40e"},c("ifx-icon",{key:"9bbaad171375e9fb8d7303004245ff74374267da",class:"check__icon",icon:"check12"})),c("span",{key:"87a9dc20d959c4cbfa1ff3741682a4a9ffba0af6"},"Removable Footer, Header and Logo")),c("li",{key:"a687f8ddc378e88233de2ae65c48ca753ade8da4"},c("span",{key:"a8e4c64586674b9305b880d58604a8ef1780e319"},c("ifx-icon",{key:"302907e746dc359b0f9e822e3412a9ef6c7eb8bd",class:"check__icon",icon:"check12"})),c("span",{key:"4df52be2c0427bae9128399a4d1cf07bf028db90"},"Removable and customizable Links"))))),c("tr",{key:"54158b8e4e73d9aa72ec9ba2625aee6f63caff39"},c("td",{key:"ee292fda4e86626b2f18b5ebf729a84cdecc12b7",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"f2508ea5447959bf3ef719b2e32f5fa32ae8c6cf",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-slider--development",size:"s",variant:"bold"},"Slider")),c("td",{key:"5cbb88377b0f17a328a3654f94bf3500ba7bbe5d"},c("ul",{key:"9b23b49c0f131b3bc4418ce69504c119818ba778"},c("li",{key:"9090044df601d0aeffd4fdf7be2989b745c43158"},c("span",{key:"1c2c75be968e32c1dda9e3ba61da4b4fa9c3b666"},c("ifx-icon",{key:"081eafc92a390b167278cf43cfc1ffa9686a7e25",class:"check__icon",icon:"check12"})),c("span",{key:"f91b83088e667612b95451b7e27a808f6b0a5745"},"Provides an interactive and customizable input control for selecting a value within a defined range, often used for settings such as volume control, data selection, or numerical input")),c("li",{key:"ae68cc4c5f46284b60f69f509071491d1ef5aa80"},c("span",{key:"adf1d76935aee23e1c8d68e79a12147aa8dae84a"},c("ifx-icon",{key:"2910478643213fbd570966393f11c4badb7ed347",class:"check__icon",icon:"check12"})),c("span",{key:"9a65c36dedf03d5ff8425e78082a830f805d62c3"},"Adheres to web standards")))),c("td",{key:"a18c4ca94f4b3ef2c9823dc8d6289508864ca6b6"},c("ul",{key:"1a5c5b524c2169f07ebeaa316bd8493ae0ce1e5a"},c("li",{key:"671a2f0308f07855cbc6b608f9d674bbf02bac21"},c("span",{key:"5bfc7ead98d75d554f6d19db97d7dd4c9884cb89"},c("ifx-icon",{key:"49257247a095a6f308960c78f9d254d6190f2d2b",class:"check__icon",icon:"check12"})),c("span",{key:"e482efcf783e3011669aa2861a26df762f64e16f"},"Icon incorporated")),c("li",{key:"5a6c4ab5694859e2a6b2c7ccc642ee5ec061604c"},c("span",{key:"090d781d122969ec72fd756b617367f8f6615ee7"},c("ifx-icon",{key:"39fac9d0a82b44ba6f01d1e84bd23af811f2089e",class:"check__icon",icon:"check12"})),c("span",{key:"67471ee43b65df687ca0a7a94d29472c1a652f98"},"Percentage variant")),c("li",{key:"36b031543cbf6c62932c38fbb3dfdfb200cdf8c9"},c("span",{key:"28b42923244029dff71fbcf3ed84b16d413850e6"},c("ifx-icon",{key:"345fc0f02aefcb66a19f959a650e49c61007fd1f",class:"check__icon",icon:"check12"})),c("span",{key:"e3975060ddd9fcb053f082185b03ac3423306ac1"},"Text variant")),c("li",{key:"7ae6431d8818a2ea8fbef4350534ca915484790e"},c("span",{key:"502f3e70e49906eb0297c3db87777a411be23ebd"},c("ifx-icon",{key:"c78272fc13dc68d86f3f61f04eacb08496be5468",class:"check__icon",icon:"check12"})),c("span",{key:"8304aeecac48c9908d683abc40cf09bcee444c31"},"React, Vue and Angular wrapper integration")))),c("td",{key:"37a880f29c936c3eb1f0f98746799a7a94dfb8a1"})),c("tr",{key:"d85cd62a71ffcbb24af56a92ae6e9029dabd5eac"},c("td",{key:"a5bb1f1f8b5d2126df430230e4c34bb909a5cbfc",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"a81f8df0d75fc1b0c60b708ce0600e108621f363",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-spinner--development",size:"s",variant:"bold"},"Spinner")),c("td",{key:"fceaf48f0dd30483c23761f5876ff27e294faeb2"},c("ul",{key:"536185b5578d534e14508f211d9851ac5578ee51"},c("li",{key:"5d3be469e9944042277eaecb942cd4caa006a5c0"},c("span",{key:"37e54154e43b9dc8bfaac31c04b2745f58045286"},c("ifx-icon",{key:"e0077aad982b83e5460d7209105cadabdac9f519",class:"check__icon",icon:"check12"})),c("span",{key:"fa5cf2371a0546da94298311f2afc07720871c5d"},"Offers a customizable and animated symbol that conveys to users that a task is in progress, typically used to signify loading content, data retrieval, or pending operations")),c("li",{key:"a8fb5b8dcf84d08a335d9aa733f831922251609a"},c("span",{key:"8db9282f833924a1a034fc3f56b47479fcbdf2f8"},c("ifx-icon",{key:"39d86cf0351ec275e84a391b33f5f35dca678db6",class:"check__icon",icon:"check12"})),c("span",{key:"8774e1a908ab8f6bc83620b88c5fb8cb1504d943"},"Adheres to web standards")))),c("td",{key:"715b529aed8fafd235da41e7e5e25aaed4d22458"},c("ul",{key:"6989897e839d047274743f1aff192bf040caddd9"},c("li",{key:"f5ca4538d3c21b03cdc84c8e6c08a7830e4938da"},c("span",{key:"c5003b3d2131f7c45b3e151e944a248fd7faab0d"},c("ifx-icon",{key:"677ede226666ffca1598d3d0969833db49ff91ca",class:"check__icon",icon:"check12"})),c("span",{key:"2170efae60847ab1aea44fd0ea1b3d1e472ac13e"},"Brand variant")),c("li",{key:"34da3422572a829d2b8dafef15f02c7457a06025"},c("span",{key:"3c6265f34fd74ef196dbf98339089d190c830667"},c("ifx-icon",{key:"c462e7ab0ac0c8534656ddbba40806f13324fb9e",class:"check__icon",icon:"check12"})),c("span",{key:"f64b39d95bfc8b1c4233cd4713952c9c7dbc9847"},"React, Vue and Angular wrapper integration")))),c("td",{key:"964729510afe6ed30c0f89ea60db8622a1a64949"})),c("tr",{key:"4091a70aae5c206e748454834256da3787548516"},c("td",{key:"971c8e6d739ada4f53db19568805cc985613fb0d",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"7ffeca223522bc2b7838f58aee1db1179e6c7797",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-status--development",size:"s",variant:"bold"},"Status")),c("td",{key:"56bb34a15b4e91b8bf540041815de8b4ee56cf8f"},c("ul",{key:"69414f729b64c7f4d49237d3bbcf1aed64b01340"},c("li",{key:"841531f4adfe1929730023449cc60358bbaa9468"},c("span",{key:"08284963033b2307f911d59df13ebfb79302fbe4"},c("ifx-icon",{key:"469b9acbc43030c284055f7f1f6c8e737b91a520",class:"check__icon",icon:"check12"})),c("span",{key:"bee5380b84a7c23477721ca577936d691c539658"},"Provides a visual indicator for conveying the state, status, or condition of an item, process, or entity within a web application")))),c("td",{key:"64f81588b6f14feace10fa4cf37e6849c571183e"},c("ul",{key:"6a06d6e06e9bc2d8b257ed2ad60d4b9a2baf3967"},c("li",{key:"a895bd42b24e6a4c20698554c68044aee47fb6d7"},c("span",{key:"428ef72fc29bb7ba2168c542d6b48b2b43fbff63"},c("ifx-icon",{key:"ee1651be01669c63afaa29a91fe4c764b3346930",class:"check__icon",icon:"check12"})),c("span",{key:"3d8fc02213ece36452f9e3d4e76bbd04fc0c945c"},"Ocean, Orange, Grey, Light-grey, Red, Green and Berry color variants")),c("li",{key:"57588f1f730fe2ad31ce65b0eb023cbe7ebb51f6"},c("span",{key:"8750af25775ecbf95f5b68e0b88e15159fec449e"},c("ifx-icon",{key:"814ac175509a06220b68716003bb2c96124fb320",class:"check__icon",icon:"check12"})),c("span",{key:"ad75e47e3f17d67e48160694c63baebaf47e0a02"},"Removable border")),c("li",{key:"f6a269c31a82656f6d6fb4dbdaf7c538445580fc"},c("span",{key:"81202cf5b0e66a97c467d1b5fefd5f89393ea673"},c("ifx-icon",{key:"239ff0de505182561ad18b0ec741fbe00f223b7a",class:"check__icon",icon:"check12"})),c("span",{key:"5f77ddab989313efd6c16cbc29bcc00fc4ebfeda"},"React, Vue and Angular wrapper integration")))),c("td",{key:"e5a1e5165699ea98c41f4ee84fec13aef93d8958"})),c("tr",{key:"d24f3c1fd0fed9142667e05e31e53cf3e7605004"},c("td",{key:"34e9e416d0b64e45681463bd981ecaf174a89581",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"4f7397cb23dd4efcd63203ea076732bd7a77549e",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-stepper--development",size:"s",variant:"bold"},"Stepper")),c("td",{key:"a8ccfdaa692d9fe5ef989abd92b7c4052a273197"},c("ul",{key:"f174910fb2d728e0b1bae1a53076a1912c9e741c"},c("li",{key:"4155fc7d5cd029aa8abaee7186c80140673a504f"},c("span",{key:"9badc6dc1c635e0eb751cb20549fb11e3cfd5112"},c("ifx-icon",{key:"2f5acb9cd01a52f62a009c41da833a6baebd3c57",class:"check__icon",icon:"check12"})),c("span",{key:"b066f2a773d9c459ddad55e96d8d9ef1dfcc5dfc"},"Offers a customizable and intuitive control that allows users to navigate through sequential steps")),c("li",{key:"abbcd1f3632454a977c40cafd689daffa7dc4f06"},c("span",{key:"3411a8603e833fd2e8fcba99dd0fb5bd0e5abb90"},c("ifx-icon",{key:"501c7f145c6cd3fbaf8ca2ebe45deeb7ebed7e32",class:"check__icon",icon:"check12"})),c("span",{key:"c58e5ebff71e2cf17e1317a5ca93e063e5d11394"},"Default and Compact variants")),c("li",{key:"e4ffc37a4c9c4edb0e19e12d20e4a7fcb21283b5"},c("span",{key:"355b2d72b0cfdd0be11ea209855c4b61ca0a7ebd"},c("ifx-icon",{key:"94317e1752a900a27cbd2f75cb1afff7522faafc",class:"check__icon",icon:"check12"})),c("span",{key:"058bd7ccb5c416d1321b90d451dcfb237957705e"},"React, Vue and Angular wrapper integration")))),c("td",{key:"6d92ad2ceb962f07c36bf08e60a7cfa6279b349b"},c("ul",{key:"d818e29bb77ec12178106e6b74e5c36589af41f2"},c("li",{key:"49f4947d48bb7364f5edafcba38bcb33aeb9eba0"},c("span",{key:"434556b837c1751d8f8f9649058b3f3ceaa92060"},c("ifx-icon",{key:"d978beae3e277fc1147dcc311c2a3fff5efd9419",class:"check__icon",icon:"check12"})),c("span",{key:"0a75bfb04596b7442b1eb5932136bacb9c7d6d32"},"Vertical variant")))),c("td",{key:"af9a3c1e07a7ba84a4b5a17de14c3fd2e62f7a57"})),c("tr",{key:"010e122067f38de9c8e1207a809ca800dd340739"},c("td",{key:"91becc5b92350cc141ac9694ef50f059428922c5",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"3414f1562812c5058d5d6186c9f9ca0a04bbef1e",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-switch--development",size:"s",variant:"bold"},"Switch")),c("td",{key:"3a5d526e1bba8e52e8e9b212193acb6a70a07299"},c("ul",{key:"916707ffd3a669b67355f9c54c071f1137b481f8"},c("li",{key:"3238c6e5fe68cf5e3545e7178e9d3800b56e5e8f"},c("span",{key:"501fe59a20b1d009b0c8168ed382725debe806d3"},c("ifx-icon",{key:"5965ed8a24df8a600b93c9b639c2065549441358",class:"check__icon",icon:"check12"})),c("span",{key:"9d1d58693517a9ebac28a7e7e54fddd87420c49b"},"Provides an interactive and customizable interface for toggling between two states, typically representing an on/off or active/inactive status within a web application")),c("li",{key:"4b07eb03237b4162dfdacb7cc7456d1516f1ead0"},c("span",{key:"b899a3ab20a0bcd87dfe7517da5c0194dff66471"},c("ifx-icon",{key:"619ca9fd6719fded960c6fc50fb8025f69c622e1",class:"check__icon",icon:"check12"})),c("span",{key:"88981f30cda133f3ee8fa9096086b91985581fdd"},"Adheres to web standards")))),c("td",{key:"8d0704216cd0c424afea788ab011127abbfc640d"},c("ul",{key:"fdf57c43f8cf2697df6cf35f02045222ecf9048e"},c("li",{key:"d70f05b2582084d8427efff7adaa43cce8de6237"},c("span",{key:"14ce2ccf4113dd68fb7859f30010881fbe1fa6cb"},c("ifx-icon",{key:"ff74ff48994ed46c7d0801632eb17cab06e2b9b5",class:"check__icon",icon:"check12"})),c("span",{key:"d58e4d425eec43fcb52e9c8ec82874da362ef830"},"Incorporated label feature")),c("li",{key:"f68bcab139524c832d34a8a67212c4a3132899f2"},c("span",{key:"d004d0c4ea4e4ac4995d83d4b1769d29f98472af"},c("ifx-icon",{key:"9519d9e2f52c20ae120fd66899904fe76cad8ffe",class:"check__icon",icon:"check12"})),c("span",{key:"662d905593d7361b99301c45907121429c43d033"},"React, Vue and Angular wrapper integration")))),c("td",{key:"f16564cfca90380d8af8b723b52e08e5e08916ad"})),c("tr",{key:"e8864d658c6058c0e002bd9ff00528a07c5b6ea6"},c("td",{key:"91f9085e6e951ce2a93fc0580007a6a49853166e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"b90162361d56094823a3f672eb9e9a07da769905",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-table-basic--development",size:"s",variant:"bold"},"Basic Table")),c("td",{key:"e7dec4dccee3140415df8422140ada3bdb0c8017"},c("ul",{key:"62e0f3dde74f64f845acc22de4852a3b428b26be"},c("li",{key:"ff0c71f0194de37b7bd9c3c39af7c051fd0424ca"},c("span",{key:"c31591fce309a17c534c91770b061d83b7a34d45"},c("ifx-icon",{key:"93f612675e1bf6ac3f4c087eadf7c890d0dda796",class:"check__icon",icon:"check12"})),c("span",{key:"e8b0b45600b1429066f51f8817e1d33282e699d7"},"Offers essential functionality for organizing data into rows and columns, allowing users to view, sort, and interact with structured information efficiently")),c("li",{key:"03d5d14fbc7f484eafaa7ba11c766e771bfbdc51"},c("span",{key:"c458224e2989dfa7d7fb4359cc2edc09477c45b2"},c("ifx-icon",{key:"db8301aba07564b2a1d88d7bfb7e16ea27317e66",class:"check__icon",icon:"check12"})),c("span",{key:"e8c0587acedce2c663078d93435c8a15f7ad69a1"},"Includes basic features such as column sorting")))),c("td",{key:"1c9e159953835c98239d18b6288cf19c467489db"},c("ul",{key:"71651528dbaa7df447e6a808f6cc7c5958a167f5"},c("li",{key:"e32cf0550ec8d1b71a48e79721265a3f38cc4dd1"},c("span",{key:"105a62b0dfb40f592942d2a58ab09b8119ecdcea"},c("ifx-icon",{key:"a2ef9f8edbb89c557852d0329a5c6f0ac1438d11",class:"check__icon",icon:"check12"})),c("span",{key:"66dea78a9dab1d84824d49203e7e9ed2273b073c"},"Compact and Default variant")),c("li",{key:"16e9b3bd6478abaf4c64ad75c8db209de48cf1cf"},c("span",{key:"178503a1e28a81647589e7835a43f80c3e6c16b9"},c("ifx-icon",{key:"1274b6ab63125a9e009e38e82a0f3224a9a95c8a",class:"check__icon",icon:"check12"})),c("span",{key:"5e33be965ecc9a5203b12eac7435a03818fb5e8f"},"React, Vue and Angular wrapper integration")))),c("td",{key:"e85eb0d709653c05f4f2dc995a2132414119d659"})),c("tr",{key:"6dcd22b6cb40e572c0a4cab34cad2cd82d6c61d0"},c("td",{key:"ef88c2c37995792a26c7b056403554947896d40e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"1ad5e906bd4f27648928c653701bf8745b34327a",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-table-advanced--development",size:"s",variant:"bold"},"Advanced Table")),c("td",{key:"45b2f5d3fbb1e3177a0a70831a094bff2110e2ef"},c("ul",{key:"aa5cfe5459460367e3a4fb2340d355916ebeedb0"},c("li",{key:"d1cf7292b181f5c476b2d9ace9fe4e7082388fa8"},c("span",{key:"55006958b1a8795020e87fcaf9ee777a9263c3b9"},c("ifx-icon",{key:"9517deed97ff8a04897d77bffc5de8ef255235df",class:"check__icon",icon:"check12"})),c("span",{key:"8f4a736d6bc0c4654f53eba1892fc0aed819f241"},"Pagination")),c("li",{key:"d41739729a9754481347b6143ef4bb7282e706ac"},c("span",{key:"946e5a822ca703b343efad6490cbd0b619f3fb6e"},c("ifx-icon",{key:"ea1921de95569aa6e5fca522383dad35e56a2474",class:"check__icon",icon:"check12"})),c("span",{key:"607722f54b8db1badacad1054cfdbbaa21d5babf"},"Sidebar filter")),c("li",{key:"c949fecbd740c295ca510c520ca4c682e96f0b40"},c("span",{key:"bdfb369b60a4db65f341c531b3e3bf5a7e1dc447"},c("ifx-icon",{key:"e588439d5fa3e34dbc2e27250f11f01f38ae5089",class:"check__icon",icon:"check12"})),c("span",{key:"ff28c02d18aef86a3ffc5787c04dcb6e8e525007"},"Topbar filter")),c("li",{key:"61d51a37dc5590aed0bd968245b0ba5ea66c590a"},c("span",{key:"129f25e89e3272c14274fa1386292f1e4547aa66"},c("ifx-icon",{key:"3adfe5ec3dcd4a2024c058e4a0a315a18afe5df7",class:"check__icon",icon:"check12"})),c("span",{key:"d3f38a8288091b60e6f3d86471a5edd24b4c7fa8"},"Nestable buttons")))),c("td",{key:"d2a2550668cfdd9a014e0b71099c01e73aa36327"}),c("td",{key:"9fc229ee01b33214ea1ab10941e00c141e8f46c6"})),c("tr",{key:"3cb4bce5f9e2db88c2c0965010d1436d55768c14"},c("td",{key:"7e84527fcec8cbe9ac172b0d895584f0df906bd0",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"aadcfc3bafee426316c27911ef0e081490e4ee15",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tabs--development",size:"s",variant:"bold"},"Tabs")),c("td",{key:"2345c391496ecd47ee0c2094b4aa2051e3aa7a70"},c("ul",{key:"3fd3c0132aff691ede56ede0b7c14a6680cc6def"},c("li",{key:"64e318a0634a2dc37da9e9fd1c303ea916128b04"},c("span",{key:"ecdd96da62e5ba8c59cec355b01848d3e4c69779"},c("ifx-icon",{key:"75f51bd0607ff2c1a7e9c558f283b63bf39fd9c3",class:"check__icon",icon:"check12"})),c("span",{key:"4d47e0fd35af1c652ba6142b386f1d1b7be92fae"},"Offers a customizable and interactive layout that allows users to switch between different content panels, typically used for organizing related information or functional sections")),c("li",{key:"d04ddbfbccf0d88c16d80ecd2ddf59fd58304e59"},c("span",{key:"bcc2abb4d9c198ebb3fd85b7f26d9c984638ed04"},c("ifx-icon",{key:"002c96cb08ffdec6bce495b82d0abf224a6cac96",class:"check__icon",icon:"check12"})),c("span",{key:"0a037d1b32490e19d0a62f6d80724818337eadb3"},"Adheres to web standards")))),c("td",{key:"c4ea7d91ea2c834ec09de5135e52e4465a848eb6"},c("ul",{key:"2d40addb0623be3d6351b3069b1e857bb7f64109"},c("li",{key:"35a661c636d0db8ad2cdfd9471bf33c2b023f771"},c("span",{key:"a83f1814ddff2c3a0a6e64cef71bed2d789f427f"},c("ifx-icon",{key:"fe4d06aa96eda1827eeb3cef4996ebc8395512ef",class:"check__icon",icon:"check12"})),c("span",{key:"8382cb1c2adff1fb7664b1db6004f1aa4436ce25"},"Horizontal and Vertical orientation")),c("li",{key:"92d447594dd807116ef0a73370984a149ab0f3a4"},c("span",{key:"b4a103a209b1dcda7112778832b1adc8d7e7f1a0"},c("ifx-icon",{key:"88adefa6a082e402d64e5749a45ce2473d7bd5c9",class:"check__icon",icon:"check12"})),c("span",{key:"ef0c852c7a76c938f3b4750496496fad85677acb"},"Extended customization")),c("li",{key:"5b76778f1562468b0afe279b79d173ffc9a0a6dd"},c("span",{key:"655220de43f6ceee9aa5bf5b8ba943461c52aaed"},c("ifx-icon",{key:"fc8e580cd39d19cf306e7748666da062799cf10f",class:"check__icon",icon:"check12"})),c("span",{key:"da723c033bc3f22e906abbd3447aeeb66eaa3fcf"},"React, Vue and Angular wrapper integration")))),c("td",{key:"8760a7693c9cd5ec87dc780691af9f62b2f24ea7"})),c("tr",{key:"4c26b1b4fc4de89c2564ba78560ded1b1596c0a6"},c("td",{key:"03b3781eb3052f4023d3bccfc350d9fe91dc5eb8",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"86bf8d601510182b5f5ed9215807ed7a7ca35698",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tag--development",size:"s",variant:"bold"},"Tag")),c("td",{key:"f50b806b5e0ab964b69e80495f3363c673f4767b"},c("ul",{key:"423c4aa1326e99c22ff4b05155ec468292fac4dd"},c("li",{key:"23e361ddeefba9c500f65ae7b02069760d7a4a49"},c("span",{key:"d19f3820134df8f23d845a085b61945d1f1f2d48"},c("ifx-icon",{key:"ca3c9ef99bb11f388c739d3dcb5361ca1ac13643",class:"check__icon",icon:"check12"})),c("span",{key:"512d381264d41c553cc7778bbeaaf05e2a5b2bf5"},"Offers a customizable and stylized marker that allows users to quickly identify and associate specific items or content with descriptive labels or categories")))),c("td",{key:"3f116c088186c161ca31143dfef3d62abc287f0e"},c("ul",{key:"bfe67f6cc660277d6e19dff9b7a2cf040b56f72e"},c("li",{key:"422f1a1d20c9ec4eb95dad4d3fe908aa13aa6ac4"},c("span",{key:"054d8e1bc54d7c9c47b7d97e983d0247944650ce"},c("ifx-icon",{key:"47067d04936992d689f4107e9d6d3e3780dbd705",class:"check__icon",icon:"check12"})),c("span",{key:"5fd53d8bf1169fd28b2767029812722fe1af605f"},"Icon incorporated")),c("li",{key:"ff7b8b2a3547b7f1bc7b1c1968331bb664739568"},c("span",{key:"d963dfe480979c3a1b901f5f8c3eb3f3b4018c88"},c("ifx-icon",{key:"b89412f7e8fe50e1a34758a81eec8f1acadb2118",class:"check__icon",icon:"check12"})),c("span",{key:"d084bbd401f32cf6ef182b364b5e123666d69958"},"React, Vue and Angular wrapper integration")))),c("td",{key:"a0dfcd446f40946b18f8748e75e52704f45be5c3"})),c("tr",{key:"37b29f18068c29cadf49c6308d261f76b652fd0d"},c("td",{key:"60cda6acf56edbebf3c6712eaf49fd5cb07a9dd6",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"947f86a47c51856f806bf3ac3c12e9738c2e7847",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-text-field--development",size:"s",variant:"bold"},"Text Field")),c("td",{key:"b64f4147929d4b7335c161846c73f6ac82e2c97d"},c("ul",{key:"fe05d9af2b590b24b25e3524f96911ec4c706ef7"},c("li",{key:"0ccadd0e87bdef97bdb175dd2dbac010b11b4e60"},c("span",{key:"a203ed81c514b0e0986579f7e862ea4dea315292"},c("ifx-icon",{key:"e6afa2a8d5a243fbdeb4d2b0bdc3bae0e472f0a9",class:"check__icon",icon:"check12"})),c("span",{key:"9627e4343e16397c89b88540528e5b8d92bb015f"},"Offers a customizable and accessible interface that allows users to input and modify text, facilitating various data entry and form submission tasks")),c("li",{key:"16e16ddae07ebf8151938577fbc958be2cdb1157"},c("span",{key:"e681e5c32dc7a70fe9e5ebbe0cdc480aa240a1e9"},c("ifx-icon",{key:"f198210ef5933a03267e946b8cede37c6aed20a5",class:"check__icon",icon:"check12"})),c("span",{key:"dc3c60d8afb74ba9dee02c47d270ce5fbb17cc4e"},"Adheres to web standards")))),c("td",{key:"c23f9c0677c495936e9093a884304c936375f850"},c("ul",{key:"193ee29ba1c342223fcec5024517510774a8c857"},c("li",{key:"256d42605148cb23c390f4391d18fae3ea3f129a"},c("span",{key:"f1aa54389ddc1fd3b733094227ff2852af51958c"},c("ifx-icon",{key:"c5b531be9d4be349ce4e491069ee84965d681f89",class:"check__icon",icon:"check12"})),c("span",{key:"568255bb07e1f4c8ced9bc386ecff932efaf380b"},"Extended customization")),c("li",{key:"f7833995e627c243a3603453afd40238b8a18ba9"},c("span",{key:"81603478dda9ea59b71aebaa6ee3e45aea25d2fd"},c("ifx-icon",{key:"177d142bb809a44d778ab4824e0e5f40c2bddffc",class:"check__icon",icon:"check12"})),c("span",{key:"021d1dbeec998b62aebadd10355c2255da2b5572"},"Possibility for icon configuration")),c("li",{key:"eb43c2269398e50255cb7cd341c3b330a38a4d1d"},c("span",{key:"c914207336e020afbb8c6d80385bb9449881edfb"},c("ifx-icon",{key:"78054d82263743a82de4be219d5dccafea2c02b1",class:"check__icon",icon:"check12"})),c("span",{key:"f06689809243293e16d9e242ed7c5f2701965e4a"},"React, Vue and Angular wrapper integration")))),c("td",{key:"ff2ccb3a666044da1ae6a223a36366f153b9ecfd"},c("ul",{key:"d01d7492fb99701e05d25c55944a07ee5506308d"},c("li",{key:"55584abb656b3b17632e232435189e06332d6be9"},c("span",{key:"ab84052acdb98928863b5befe9aff12e8987f8d3"},c("ifx-icon",{key:"3ffca0a829b3a15a9f0cea5a8250d23446105386",class:"check__icon",icon:"check12"})),c("span",{key:"9b193fa184047632e8136dae92626b0ddd95de61"},"Form integration"))))),c("tr",{key:"00c06a42aa2d32399f31649380f7d8582200a5ad"},c("td",{key:"fe83e4dd2ac62718ecc4690f2b1ce502086d674f",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"7346355467de6b19f84adba625cb3e34b2f7bf78",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tooltip--development",size:"s",variant:"bold"},"Tooltip")),c("td",{key:"f627047273df13c53c5d81a868677a9138952ae4"},c("ul",{key:"ceaac6897bb05efb414169aa8f2bf3f6a3c11c52"},c("li",{key:"c963cc643efc37fda873c407d543b29bf6b6c7a5"},c("span",{key:"a6f3988d1d18fc7edcf219a541a9862a2a9baae4"},c("ifx-icon",{key:"a55772fd3c520e10c0cde9a7a11dfe7c11528d38",class:"check__icon",icon:"check12"})),c("span",{key:"022579b06e0b3a3ba3ca34b2f00b91b31360a781"},"Provides a simple and informative interface for displaying supplementary text or contextual information when users interact with specific elements within a web application")),c("li",{key:"6aa7cdb681043aa64bfb18e3417372e24bdfa964"},c("span",{key:"23d3ef4690a1a0c81df123c92542a33be976cc96"},c("ifx-icon",{key:"eddac566a83f68d9a442083775f98c41aa954df0",class:"check__icon",icon:"check12"})),c("span",{key:"e40ea83fa5748b98b9b85df88bb9cd4fb6652483"},"Adheres to web standards")))),c("td",{key:"e3ac21c1d363318dfa366d5428a24dece83d7b33"},c("ul",{key:"36361f1ce5cab5e9ce7087507e8d3a5df3f2ad52"},c("li",{key:"e9ea2a75a34c323980c58eb5e3a2298018eeae06"},c("span",{key:"9d74ac65f6d31c04f5c6e3e9cab01fbb2368bfc4"},c("ifx-icon",{key:"56adcadf4a84f9e0030adbb78f2a0bdd27fb1707",class:"check__icon",icon:"check12"})),c("span",{key:"778813a81fd240176dd7a8080bb1ad2ce0f2e918"},"Compact, dismissible and Extended variants")),c("li",{key:"ab1aaa61bf0a5bbc514dd1fe75e3de47ff1ad7bf"},c("span",{key:"30c049de6102b3ad5c333fd76cf5f36f08ccfe42"},c("ifx-icon",{key:"4df6533e3855c175d57582d2e6bed25f7c934d49",class:"check__icon",icon:"check12"})),c("span",{key:"66c9e7265c0671922e62325c8f57a2d221542738"},"Auto-adjusting position")),c("li",{key:"52214f762736a3d89b90f9c859485af1c4b985cf"},c("span",{key:"11570bc07a26232997300a70994a5953181e5dfc"},c("ifx-icon",{key:"cae8e183c01ab0626bc00f09d61454786ae009f6",class:"check__icon",icon:"check12"})),c("span",{key:"808de2982c4326ec71557e5a4fdff466c414dc5e"},"Icon incorporated")),c("li",{key:"16066276db3af98d96a2d6d1d41a2537764f0e66"},c("span",{key:"4d132c64c1bb121eb09267d108d9c74f86cc476c"},c("ifx-icon",{key:"3598384194fc27aed458cf34c0b39786d93ce7b8",class:"check__icon",icon:"check12"})),c("span",{key:"b4628222a82b3cabc4d5375439ac265cf2d4383d"},"React, Vue and Angular wrapper integration")))),c("td",{key:"17a8404b31183ab1a2c643761a09ba2df0b19b75"})),c("tr",{key:"78fb31ef310e57e18e3bf3311486423d57a30e44"},c("td",{key:"d7cb4b7af4f7f97cb3c5a5e9452645e6d339bf0d",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"307016a292ab90c491c450601ead2aeb44c992b2",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-notification--development",size:"s",variant:"bold"},"Notification")),c("td",{key:"9639c7ad7188d7df360f9006e5b400a101923a99"},c("ul",{key:"60256b5ead39a06976c908baaef74b54b10b8008"},c("li",{key:"27bfd252840f64e3860b30ec50555fbe289bb6a8"},c("span",{key:"10599a05c5f84d6c2f2cce63ca8aa3a254056a16"},c("ifx-icon",{key:"0e489cb511fbeff379d4815bd3f4c15b8562fc90",class:"check__icon",icon:"check12"})),c("span",{key:"607b1d8f75fa28a804dd547e1c7e16ef16b1a89f"},"Offers a flexible and visually distinct container for presenting informative, warning, or error messages to users, enhancing the overall user experience with timely and relevant feedback")),c("li",{key:"3b5ba9b1c51b766a2cb1c501afc3355c8715f936"},c("span",{key:"2fbcd55f47eb10e066b685a9e4ee5084d941cac3"},c("ifx-icon",{key:"3c07ac9f22a0c8ce90727bfef8b198a3f6c8dddd",class:"check__icon",icon:"check12"})),c("span",{key:"0530358d5fa0658732dcd90b3800e0403aa3b484"},"Adheres to web standards")))),c("td",{key:"1a9d00caef035876f8b52351f1e779eb5dc65fba"}),c("td",{key:"b9e5954129e5d6bcabb2afb231bc52bd8620c5f1"})),c("tr",{key:"a08fd5f94864ff1ab5c820a236972ad91d36bf3b"},c("td",{key:"7330eabf091fcd6cf40a30e2a396955050a4a44a",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"d5f65a8706ea1f5c2096adbbfa4cbf582d02d51a",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-content-switcher--development",size:"s",variant:"bold"},"Content Switcher")),c("td",{key:"e47c4ad2501d51f554f8188c6debaf65438fe42c"},c("ul",{key:"f352e390bfcbfc7b221acc9605cbf6ce0462661c"},c("li",{key:"9066ab6c580c030a830005fc9bdfcd92c59612f7"},c("span",{key:"77f09153c85891866d794fc0422a52963ff75723"},c("ifx-icon",{key:"63fa923c04aae66c436ff1fbcded6fe7eef33d89",class:"check__icon",icon:"check12"})),c("span",{key:"080861b109912359db5cc80d3ff0233463cae985"},"Provides a flexible and intuitive interface for dynamically switching between different content sections or views within a web application")),c("li",{key:"cc089745f3918983dcd2cae4032d7cc1df667027"},c("span",{key:"e8a13199d992575627748cce89424656ceb02b6c"},c("ifx-icon",{key:"d5ed64858304e26023e06e971fcf2d74bcf56498",class:"check__icon",icon:"check12"})),c("span",{key:"c6f677a52ad4aadc7267e8d27f8c77cebf95354a"},"Offers a customizable mechanism for users to toggle and display diverse content panels, facilitating seamless navigation and interaction with varying information or functional contexts")),c("li",{key:"c06e6eccfb1c8ea983de72b8f399976a7673cc15"},c("span",{key:"b6233ea747d7894c8d56a0d8a7afd3400ade4ad7"},c("ifx-icon",{key:"430c1c058f12fde5f2def61931bc6bc76b5833d9",class:"check__icon",icon:"check12"})),c("span",{key:"ff5de0e628e6a70503fd0a7188fdcaf2e135ce7d"},"Adheres to web standards")))),c("td",{key:"69dc6a50e3bad1195a6c59180ec0066df9d2032d"}),c("td",{key:"1d413791af7e7df90d5e7a44fed4718cce5e6655"})),c("tr",{key:"ce11a24cab4040f1fbdf2946d734ff545bf42f2a"},c("td",{key:"2254e97840ef27d0ea9aa8b3b83f501efd180ed7",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"c08cc2affe9d89d0c6bae23f0c7e773b9f756e9c",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-segmented-control--development",size:"s",variant:"bold"},"Segmented Control")),c("td",{key:"acdcec095c15c44f1cca2cc274dbf941dfd33a94"},c("ul",{key:"486852096f99b4ed94bb0b1d5b97c2fe830818d5"},c("li",{key:"10339a79d23b3bba761ad9aed56daf08fedbdb53"},c("span",{key:"e5562d734012e49b37e60a1e5a46f22fe899b583"},c("ifx-icon",{key:"efd42160588fc9e7bef32f79ad66b590be963afb",class:"check__icon",icon:"check12"})),c("span",{key:"ffa7421775de4f0513824f1d467fea9e3e47787f"},"Provides a clear and interactive interface for users to make mutually exclusive selections among multiple options within a web application")),c("li",{key:"2a9aad659f1949f1b4bc9b90023f059488b80b9d"},c("span",{key:"4ff6add261e383a55b18789bbadb7432dc2b8559"},c("ifx-icon",{key:"db24a3aa6a82376c1a36319acd16869632d93c1b",class:"check__icon",icon:"check12"})),c("span",{key:"6fc66a3c57c6595f032ca11b794cd32a334a0b91"},"Offers a customizable set of segmented buttons or tabs, allowing users to toggle between different choices or views, typically used for filtering, categorization, or navigation purposes")),c("li",{key:"4851a739b558f53956c09e9e37c64f1e1be03292"},c("span",{key:"aa5dd332e577819d412f8276823c86ea7ea1e423"},c("ifx-icon",{key:"361840606ffe5d02e5da33ca2b7566813845bc59",class:"check__icon",icon:"check12"})),c("span",{key:"5f85dac41a6a7f171adff9e5448ae5cfe90af3ae"},"Adheres to web standards")))),c("td",{key:"7811bb5dbb22d84c9ab30dbe9236ed979fd44ca0"}),c("td",{key:"84168c6e539259694b8ce213f64bf2812097c7b3"})),c("tr",{key:"f557022188d47d8eb6615b3468865f91d67fd3b4"},c("td",{key:"fdd8fd8186aa480e0f350ff5198a52510d10c239",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"7b6de77abbefdd12aa4a0ce9fffc5e53cc980b8c",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-segmented-controls--development",size:"s",variant:"bold"},"Textarea")),c("td",{key:"fc9d726c71a4a1f417a1ffed2a967fe883c7e97e"},c("ul",{key:"611bc7c45135065360be06f30d247bf82c795494"},c("li",{key:"b081ff67b58c02c2a1bab6a4db95a99d52fce952"},c("span",{key:"c6f2ac206bb0eb636b85e70329f2513db03f501a"},c("ifx-icon",{key:"df7141b3cb4b4c328c7045834b61126cc081d964",class:"check__icon",icon:"check12"})),c("span",{key:"22a5e3b0a91d768171bf5add7a5bc9d608cac2b1"},"Provides a customizable multi-line text input interface, enabling users to input, edit, and view large amounts of text, while adhering to web standards for accessibility and usability.")),c("li",{key:"b2d3b1b00332ff0c239af367f172bf9c58a5db1d"},c("span",{key:"0c48ff5a203cc9e53226974ff68c988ddbee1861"},c("ifx-icon",{key:"177754ff099f59421dd656de2ecd55667952cb83",class:"check__icon",icon:"check12"})),c("span",{key:"6c225448719a0b6eaf00f705d5eff38dea0a38a0"},"Form integration")))),c("td",{key:"17b1c44270e46eef2d16e3f4b83001f39d3726b1"}),c("td",{key:"086e8472cd0be12dd21d403c626549ef8d372422"})),c("tr",{key:"66c5871b5dab6a9da9b5f76b83067a0a28cd474f"},c("td",{key:"5c39e7210e21ab652915cf4711e46a8979420c69",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"84bc71aa2c903cf145c0cd2ee1c026034801d1ff",href:"",size:"s",variant:"bold"},"Card Group")),c("td",{key:"fddfd06878b54db4f6d804af73c4d2aa2407f117"},c("ul",{key:"21bd42770d91f84c21072b2c9cf448a1c979077a"},c("li",{key:"d0ac4683b7c8814729a7aef1b4a58a9bc2179df5",class:"planned__component-wrapper"},c("span",{key:"64ec2cf29b4b010d3d553dd2d47307c2c4872557"},c("ifx-icon",{key:"351210b4d878bbf3d3e338998f08c2a93e5761ab",class:"planned__icon",icon:"clock24"})),c("span",{key:"38200e0c8922f3ad9b1c1e01a38e75f80fe3fb1d"},"On Hold")))),c("td",{key:"8898fb4faeeb9325998061fd48ee27fa1d2d0fb1"}),c("td",{key:"17d46329a16022799d5cfc59f8673383e071ce33"})),c("tr",{key:"213600b776bb685e30f6469c8885cc721ba90678"},c("td",{key:"339f2ec9a9f0884bf877486431b87c47fd5aa050",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"3218aab06e7d102ff9987394890171765292e1e5",href:"",size:"s",variant:"bold"},"Upload")),c("td",{key:"b8058b1c187d8b232b8c90d5dd5c0033975e6743"},c("ul",{key:"4440dd12a93d23c86422a1f7924737afc4f0f1e7"},c("li",{key:"420a170783c840fd8f01344449d4c1e91c148579",class:"planned__component-wrapper"},c("span",{key:"dc28668e17c73961ed7f78e89f32c5041073180f"},c("ifx-icon",{key:"5fdfac7f93013aa38a1cf83b1f5aa73bdedfd83a",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"4871d9f12138fc3f066daccb6f626aaa1a25e881"},"In Progress")))),c("td",{key:"f56d1ee063e409dd0177f73c3177324d515b4c64"}),c("td",{key:"1b67a90e84c68afab91275f8100a2dd07a2d9e5c"})),c("tr",{key:"7c1803abada0facc719b49e1e8a25755716a0c98"},c("td",{key:"5b436f69b8cc2274197ebdce59c47f858e63c6d3",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"c72ce657fa18a7dd1ea88cfe0b385033b73de16d",href:"",size:"s",variant:"bold"},"Tree View")),c("td",{key:"225d3ef2bd37858f37ccb90670f72e17bc81e194"},c("ul",{key:"3c09da55e11b52419cc3fbda8ba3bcc8fd400ccf"},c("li",{key:"ce5d55e46342679263903738441bc636d98054c4",class:"planned__component-wrapper"},c("span",{key:"ad00c3ae33e7bce628fb957e091398b653d165ea"},c("ifx-icon",{key:"9aa94cf1fd75a356205c493950fc2be1de3fb9dd",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"a945eb5b7df31a815772b2e0a40325531b3cabd2"},"In Progress")))),c("td",{key:"1c16d620f9567134c0f52b930bfc2f89df5afaa4"}),c("td",{key:"e283397ed9e8a7cc9cb2a166a9a86f7a388cc3d6"})),c("tr",{key:"48e09728c69e73b79697485f29b444c4119882c7"},c("td",{key:"61700d413306c68ff13fe8aaad96e36886e84905",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"bd65c2addd2769d53405872705d25eea802f4648",href:"",size:"s",variant:"bold"},"Popover")),c("td",{key:"b1f329b79492549f0c3e4e644f80106b62ade460"},c("ul",{key:"4059067cdf19049442184fce0d864a330df4ecdb"},c("li",{key:"0e188f076f926847005df393132f02d4985364b9",class:"planned__component-wrapper"},c("span",{key:"6f704a538c44106a09177a01902eb8fc38b9c1ef"},c("ifx-icon",{key:"95dfbe409909114cef3b37d4c7a36319909d972c",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"725fe4ac437518724460d2cd611e35c537a330ad"},"In Progress")))),c("td",{key:"e6e95a47a684e23260d4115517c247e8c971f7f9"}),c("td",{key:"aa616cbc7b413d489a9e9b943e5a6b1cdd773377"})))))))}get el(){return a(this)}};b.style=f;export{b as ifx_overview_table};
+//# sourceMappingURL=p-e2e501d4.entry.js.map