@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-6e425cdf.entry.js.map

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

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

@@ -1,2 +0,0 @@
-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 .dot__indicator-wrapper{display:flex;width:8px;height:8px;justify-content:center;align-items:center;flex-shrink:0;border-radius:50%;background-color:#0A8276;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-number-indicator",{key:"559d6b9be6a709377650b8f916ef471a898b4978"},this.numberIndicator)),this.icon&&!this.showLabel&&!this.numberIndicator&&this.dotIndicator&&i("div",{key:"18e46a53550e5dc1ea1969c4ce326d24cfb34c90",class:"dot__indicator-wrapper"})),this.itemPosition==="left"&&this.hasChildNavItems&&this.isMenuItem&&i("div",{key:"811fbfb3eace865b2daeb9f066a0f82bd14d3252",class:"menuItemLeftIconWrapper"},i("ifx-icon",{key:"4db1bb1ad3e8576787d00a1f694a0978ab3f9dab",icon:"chevron-left-12"})),i("span",{key:"1488814cc51e2b865215ecae2f307327d26bc6f0",class:"label__wrapper"},i("slot",{key:"c606849d2d390d4e8682b90d343b701b8f8ebbc0"}))),this.showLabel&&this.numberIndicator&&!isNaN(this.numberIndicator)?i("div",{class:"number__indicator-wrapper"},i("ifx-number-indicator",null,this.numberIndicator)):"",this.showLabel&&!this.numberIndicator&&this.dotIndicator?i("div",{class:"dot__indicator-wrapper"}):"",i("div",{key:"58690fdfe5fd7f28b36ffa9cda42f3fa12aa3f72",class:`navItemIconWrapper ${this.hasChildNavItems&&!this.isMenuItem&&!this.isSidebarMenuItem?"":"hide"}`},i("ifx-icon",{key:"7d9a0bb30c32c57699a870d24234aa21e5ec237e",icon:"chevron-down-12"})),i("div",{key:"0bcb2940fc3a894de79b4f03ab7e4c19ebb4a2ce",class:`menuItemRightIconWrapper ${this.itemPosition==="right"&&this.hasChildNavItems&&this.isMenuItem||this.isSidebarMenuItem&&this.hasChildNavItems?"":"hide"}`},i("ifx-icon",{key:"428705d1296ecd32607916d10f02f196f1ac1a46",icon:"chevron-right-12"}))),this.hasChildNavItems&&!this.isSidebarMenuItem&&i("ul",{key:"4588da2dacea9fdf098fe214ca6d514dca7f0f9c",class:"navbar-menu"}," ",i("slot",{key:"609e99e98ccfcad77464a593eaf04a33b277530b",name:"first__layer"})," "),this.isSidebarMenuItem&&i("ul",{key:"fcde7c04a90485be10b3e980c6631ec7e9afe9d6",class:"sub__layer-menu"}," ",i("slot",{key:"4b43e369dc12c8265899f96990709c0ef20562ad",name:"second__layer"})," "))}get el(){return n(this)}};o.style=s;export{o as ifx_navbar_item};
-//# sourceMappingURL=p-9da1bc82.entry.js.map

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

@@ -1 +0,0 @@
-{"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","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  & .dot__indicator-wrapper { \n    display: flex;\n    width: 8px;\n    height: 8px;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    border-radius: 50%;\n    background-color: tokens.$ifxColorOcean500;\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-number-indicator>{this.numberIndicator}</ifx-number-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-number-indicator>{this.numberIndicator}</ifx-number-indicator>\n            </div> : \"\"}\n\n            {this.showLabel && !this.numberIndicator && this.dotIndicator ? \n            <div class=\"dot__indicator-wrapper\"></div> : \"\"}\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":"yDAAA,MAAMA,EAAgB,y6JACtB,MAAAC,EAAeD,E,MCOFE,EAAU,MANvB,WAAAC,CAAAC,G,iDASUC,KAAAC,UAAqB,KACrBD,KAAAE,KAAe,GACfF,KAAAG,KAAe,GACfH,KAAAI,OAAiB,QACjBJ,KAAAK,aAAwB,KACvBL,KAAAM,aAAuB,GACvBN,KAAAO,WAAsB,MACtBP,KAAAQ,iBAA4B,MAC5BR,KAAAS,kBAA6B,MAI9BT,KAAAU,aAAwB,K,CAGhC,kBAAAC,CAAmBC,GACjB,MAAMC,EAAOD,EAAME,eACnB,MAAMC,EAAWf,KAAKgB,cACtB,GAAGD,EAAU,CACX,GAAGA,EAASE,UAAUC,SAAS,QAAS,CACtC,IAAKL,EAAKM,SAASnB,KAAKoB,IAAK,CAC3BpB,KAAKqB,e,IAOb,mBAAMC,GACJtB,KAAKoB,GAAGG,MAAMC,QAAU,M,CAI1B,mBAAMC,GACJzB,KAAKoB,GAAGG,MAAMC,QAAU,E,CAI1B,oBAAME,CAAeC,GACnB,MAAMZ,EAAWf,KAAKgB,cACtB,MAAMY,EAAY5B,KAAK6B,4BACvB,GAAGd,EAAU,CACXf,KAAK8B,gBAAgBF,EAAWD,EAAQ,QACxC3B,KAAK8B,gBAAgBf,EAAUY,EAAQ,mB,EAK3C,yCAAMI,GACJ,MAAMC,EAAehC,KAAKgB,cAC1B,GAAGgB,EAAc,CACf,MAAMC,EAAuBjC,KAAK8B,gBAAgBE,EAAc,WAAY,QAC5E,GAAGC,EAAsB,CACvB,MAAMC,EAAalC,KAAKmC,gBACxB,MAAMC,EAAqBpC,KAAKqC,wBAChCrC,KAAK8B,gBAAgBI,EAAY,MAAO,sBACxClC,KAAK8B,gBAAgBM,EAAoB,MAAO,QAChDpC,KAAKsC,WAAWC,KAAK,CAACC,UAAWxC,KAAKoB,GAAIO,OAAQ,kB,EAItD,MAAMc,EAAWzC,KAAKoB,GAAGsB,iBAAiB,yBAC1C1C,KAAKS,kBAAoB,KAEzB,IAAI,IAAIkC,EAAI,EAAGA,EAAIF,EAASG,OAAQD,IAAK,CACvCF,EAASE,GAAGE,aAAa,OAAQ,iBACjCJ,EAASE,GAAGZ,qC,EAIhB,qBAAAM,GACE,MAAMS,EAAqB9C,KAAKoB,GAAG2B,WAAWC,cAAc,2BAC5D,OAAOF,C,CAIT,0BAAMG,CAAqBC,EAAWC,GACrC,MAAMjB,EAAalC,KAAKmC,gBACxB,MAAMiB,EAAkBpD,KAAKqD,kBAC7B,MAAMjB,EAAqBpC,KAAKqC,wBAChCrC,KAAK8B,gBAAgBM,EAAoB,CAACc,GAAY,QACtDlD,KAAK8B,gBAAgBI,EAAY,CAACiB,GAAY,QAC9CnD,KAAK8B,gBAAgBsB,EAAiB,CAACD,GAAY,iB,CAGpD,gBAAAG,GACE,GAAGtD,KAAKQ,iBAAkB,CACxB,MAAM4B,EAAqBpC,KAAKqC,wBAChC,MAAMkB,EAAiBvD,KAAKwD,oBAC5B,MAAMtB,EAAalC,KAAKmC,gBACxB,MAAMH,EAAehC,KAAKqD,kBAC1B,MAAMI,EAAWzD,KAAKoB,GAAGsC,aAAa,QAEtC1D,KAAK8B,gBAAgBM,EAAoB,MAAO,QAChDpC,KAAK8B,gBAAgByB,EAAgB,MAAO,QAC5CvD,KAAK8B,gBAAgBI,EAAY,MAAO,sBACxClC,KAAK8B,gBAAgBE,EAAc,MAAO,QAE1C,GAAGyB,EAASE,gBAAkB,gBAAiB,CAC7C3D,KAAKsC,WAAWC,KAAK,CAACC,UAAWxC,KAAKoB,GAAIwC,OAAQ5D,KAAKoB,GAAGyC,cAAelC,OAAQ,oBACjF3B,KAAK8B,gBAAgBI,EAAY,SAAU,W,KACtC,CACLlC,KAAKsC,WAAWC,KAAK,CAACC,UAAWxC,KAAKoB,GAAIO,OAAQ,kB,GAMxD,sBAAMmC,GACJ,MAAM5B,EAAalC,KAAKmC,gBACxBnC,KAAK8B,gBAAgBI,EAAY,MAAO,YACxC,MAAMqB,EAAiBvD,KAAKwD,oBAC5B,GAAGxD,KAAKQ,iBAAkB,CACxBR,KAAK8B,gBAAgByB,EAAgB,SAAU,O,EAKnD,uCAAMQ,GACJ,MAAM3B,EAAqBpC,KAAKqC,wBAChC,MAAMH,EAAalC,KAAKmC,gBACxB,MAAMiB,EAAkBpD,KAAKqD,kBAE7BrD,KAAK8B,gBAAgBM,EAAoB,SAAU,QACnDpC,KAAK8B,gBAAgBI,EAAY,SAAU,sBAC3ClC,KAAK8B,gBAAgBsB,EAAiB,SAAU,kBAEhDpD,KAAKsC,WAAWC,KAAK,CAACC,UAAWxC,KAAKoB,GAAIO,OAAQ,SAElD,MAAMc,EAAWzC,KAAKoB,GAAGsB,iBAAiB,0BAC1C1C,KAAKS,kBAAoB,MACzBT,KAAKyB,gBACLzB,KAAK8B,gBAAgBI,EAAY,SAAU,QAE3C,IAAI,IAAIS,EAAI,EAAGA,EAAIF,EAASG,OAAQD,IAAK,CACvCF,EAASE,GAAGE,aAAa,OAAQ,gBACjCJ,EAASE,GAAGoB,oCACZtB,EAASE,GAAGmB,mBACZrB,EAASE,GAAGqB,oB,EAIhB,iBAAAR,GACE,MAAMS,EAA2BjE,KAAKoB,GAAG2B,WAAWC,cAAc,6BAClE,OAAOiB,C,CAGT,yBAAApC,GACE,MAAMD,EAAY5B,KAAKoB,GAAG2B,WAAWC,cAAc,uBACnD,OAAOpB,C,CAIT,wBAAMoC,GACJ,MAAM5B,EAAqBpC,KAAKqC,wBAChC,MAAMH,EAAalC,KAAKmC,gBACxB,MAAMoB,EAAiBvD,KAAKwD,oBAC5B,MAAMxB,EAAehC,KAAKqD,kBAC1B,MAAMI,EAAWzD,KAAKoB,GAAGsC,aAAa,QAEtC1D,KAAK8B,gBAAgBM,EAAoB,SAAU,QACnDpC,KAAK8B,gBAAgBI,EAAY,SAAU,sBAC3ClC,KAAK8B,gBAAgBE,EAAc,SAAU,QAC7C,GAAGhC,KAAKQ,iBAAkB,CACxBR,KAAK8B,gBAAgByB,EAAgB,SAAU,O,CAGjD,GAAGE,EAASE,gBAAkB,gBAAiB,CAC7C3D,KAAKsC,WAAWC,KAAK,CAACC,UAAWxC,KAAKoB,GAAIwC,OAAQ5D,KAAKoB,GAAGyC,cAAelC,OAAQ,wBACjF3B,KAAK8B,gBAAgBI,EAAY,MAAO,W,KACnC,CACLlC,KAAKsC,WAAWC,KAAK,CAACC,UAAWxC,KAAKoB,GAAIO,OAAQ,U,EAItD,iBAAAuC,GACElE,KAAKmE,UACLnE,KAAKoE,sBACLpE,KAAKqE,yBACLrE,KAAKsE,iB,CAGP,gBAAAC,GACEvE,KAAKwE,gBACLxE,KAAKyE,qBACL,GAAGzE,KAAKQ,iBAAkB,CACxB,MAAMiC,EAAWzC,KAAK0E,iBACtB1E,KAAK2E,0BAA0BlC,E,EAInC,kBAAAmC,GACE,MAAM1C,EAAalC,KAAKmC,gBACxB,MAAM0C,EAAoB7E,KAAK8B,gBAAgBI,EAAY,WAAY,sBACvE,GAAGlC,KAAKS,mBAAqBoE,EAAmB,CAC9C,MAAMtB,EAAiBvD,KAAKwD,oBAC5BxD,KAAK8B,gBAAgByB,EAAgB,MAAO,O,EAKhD,yBAAMuB,GACJ,GAAG9E,KAAKO,YAAcP,KAAKQ,iBAAkB,CAC3C,MAAMuE,EAAe/E,KAAKgF,sBAC1B,GAAGD,IAAiB,OAAQ,CAC1B/E,KAAKiF,aAAe,M,MACf,GAAGF,IAAiB,QAAS,CAClC/E,KAAKiF,aAAe,O,GAK1B,eAAAnD,CAAgBV,EAAI8D,EAAMC,GACxB/D,EAAGH,UAAUiE,GAAMC,GACnB,GAAID,IAAS,WAAY,CACvB,OAAO9D,EAAGH,UAAUC,SAASiE,E,EAIjC,cAAAT,GACE,MAAMjC,EAAWzC,KAAKoB,GAAGsB,iBAAiB,mBAC1C,OAAOD,C,CAGT,aAAAN,GACE,MAAMiD,EAAUpF,KAAKoB,GAAG2B,WAAWC,cAAc,iBACjD,OAAOoC,C,CAGT,eAAA/B,GACE,MAAMrB,EAAehC,KAAKoB,GAAG2B,WAAWC,cAAc,oBACtD,OAAOhB,C,CAGT,yBAAA2C,CAA0BlC,GACvBA,EAAS4C,SAAQC,IAChBA,EAAKzC,aAAa,OAAQ,eAAe,G,CAI7C,OAAAsB,GACE,GAAInE,KAAKG,KAAKwD,cAAc4B,SAAW,GAAI,CACzCvF,KAAKM,aAAekF,S,MACfxF,KAAKM,aAAeN,KAAKG,I,CAGlC,mBAAAiE,GACE,MAAMP,EAAgB7D,KAAKoB,GAAGyC,cAC9B,GAAIA,EAAc4B,QAAQC,gBAAkB,mBACzC7B,EAAc4B,QAAQC,gBAAkB,qBAAsB,CAC/D1F,KAAKO,WAAa,KAClB,M,KACK,CACLP,KAAKO,WAAa,K,EAItB,sBAAA8D,GACE,MAAMsB,EAAe3F,KAAK0E,iBAC1B,GAAIiB,EAAa/C,SAAW,EAAG,CAC7B5C,KAAKQ,iBAAmB,I,KACnB,CACLR,KAAKQ,iBAAmB,K,EAK5B,+BAAMoF,GACJ,MAAMC,EAAW7F,KAAKoB,GACtB,MAAML,EAAWf,KAAKgB,cACtB,MAAM8E,EAAYD,EAASnC,aAAa,QAExC,GAAGoC,EAAUnC,cAAc4B,SAAW,aAAc,CAClDvF,KAAK8B,gBAAgBf,EAAU,MAAO,oB,CAGxC,OAAO,I,CAGT,WAAAC,GACE,MAAM+E,EAAO/F,KAAKoB,GAAG2B,WAAWC,cAAc,gBAC9C,OAAO+C,C,CAGT,aAAA1E,GACE,MAAMN,EAAWf,KAAKgB,cACtB,MAAM6E,EAAW7F,KAAKmC,gBACtB,GAAGpB,EAAU,CACXf,KAAK8B,gBAAgBf,EAAU,SAAU,QACzCf,KAAK8B,gBAAgB+D,EAAU,SAAU,O,EAI7C,mBAAAb,GACE,IAAInB,EAAgB7D,KAAKoB,GACzB,MAAMyC,EAAe,CACnB,GAAGA,EAAc4B,UAAY,sBAAwB5B,EAAcmC,OAAS,aAAc,CACxF,MAAO,M,CAETnC,EAAgBA,EAAcA,eAAiBA,EAAcoC,cAAcC,I,CAE7E,MAAO,O,CAGT,cAAAC,GACE,MAAM1C,EAAWzD,KAAKoB,GAAGsC,aAAa,QAEtC,GAAGD,EAASE,gBAAkB,mBAAqBF,EAASE,gBAAkB,gBAAiB,CAC7F3D,KAAKsD,kB,CAGP,IAAItD,KAAKM,cAAgBmD,EAASE,gBAAkB,mBAAqBF,EAASE,gBAAkB,gBAAkB,CACpH,MAAM5C,EAAWf,KAAKgB,cAEtB,GAAGhB,KAAKQ,iBAAkB,CACxB,MAAMqF,EAAW7F,KAAKmC,gBACtBnC,KAAK8B,gBAAgBf,EAAU,SAAU,QACzCf,KAAK8B,gBAAgB+D,EAAU,SAAU,O,GAK/C,qBAAAO,CAAsBC,GACpB,GAAGrG,KAAKO,YAAcP,KAAKQ,mBAAqBR,KAAKS,kBAAmB,CACtE,MAAMM,EAAWf,KAAKgB,cACtB,MAAM+D,EAAe/E,KAAKgF,sBAC1B,GAAGqB,EAAEnB,KAAKQ,gBAAkB,aAAc,CACxC1F,KAAK8B,gBAAgBf,EAAU,MAAO,QACtC,GAAGgE,IAAiB,OAAQ,CAC1B/E,KAAK8B,gBAAgBf,EAAU,MAAO,O,MACjC,GAAGgE,IAAiB,QAAS,CAClC/E,KAAK8B,gBAAgBf,EAAU,MAAO,Q,EAI1C,GAAGsF,EAAEnB,KAAKQ,gBAAkB,aAAc,CACxC1F,KAAK8B,gBAAgBf,EAAU,SAAU,QACzC,GAAGgE,IAAiB,OAAQ,CAC1B/E,KAAK8B,gBAAgBf,EAAU,SAAU,O,MACpC,GAAIgE,IAAiB,QAAS,CACnC/E,KAAK8B,gBAAgBf,EAAU,SAAU,Q,IAMjD,kBAAA0D,GACE,MAAM6B,EAAetG,KAAKoB,GAAG2B,WAAWC,cAAc,mBACtD,MAAMoC,EAAUpF,KAAKmC,gBACrB,MAAM6D,EAAOM,EAAatD,cAAc,QACxC,IAAKgD,EAAKO,gBAAgB3D,OAAQ,CAChCwC,EAAQnE,UAAUuF,IAAI,c,MACjB,GAAGxG,KAAKC,WAAamF,EAAQnE,UAAUC,SAAS,eAAgB,CACrEkE,EAAQnE,UAAUwF,OAAO,c,EAI7B,aAAAjC,GACE,MAAMkC,EAAsB1G,KAAKoB,GAAG2B,WAAWC,cAAc,iBAC7D,MAAM2D,EAAyBD,EAAoB1D,cAAc,iEACjE,GAAGhD,KAAK4G,iBAAmB5G,KAAKU,aAAc,CAC5CV,KAAK8B,gBAAgB6E,EAAwB,MAAO,S,KAC/C,CACL3G,KAAK8B,gBAAgB6E,EAAwB,SAAU,S,EAI3D,eAAArC,GACE,MAAMuC,EAAc7G,KAAKoB,GAAG2B,WAAWmD,KACvC,IAAIlG,KAAKC,YAAcD,KAAKE,KAAM,CAChCF,KAAK8B,gBAAgB+E,EAAa,MAAO,S,EAI7C,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,YAAYC,aAAcb,GAAKrG,KAAKoG,sBAAsBC,GAAKc,aAAcd,GAAKrG,KAAKoG,sBAAsBC,IACtHU,EAAA,OAAAC,IAAA,2CAAKC,MAAM,0BACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uBAAuBG,QAAS,IAAMpH,KAAKgE,sBACpD+C,EAAA,YAAAC,IAAA,2CAAU9G,KAAK,kBACf6G,EAAA,QAAAC,IAAA,sDAGJD,EAAA,KAAAC,IAAA,2CAAG7G,KAAMH,KAAKM,aAAcF,OAAQJ,KAAKI,OAAQgH,QAAS,IAAMpH,KAAKmG,iBAAkBc,MAAU,gBAAgBjH,KAAKS,kBAAoB,kBAAoB,OAAOT,KAAKC,UAAY,cAAgB,MAAMD,KAAKO,WAAa,WAAa,MAAMP,KAAKQ,iBAAmB,WAAa,MACpRuG,EAAA,OAAAC,IAAA,2CAAKC,MAAM,0BACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAO,iEAAiEjH,KAAKE,KAAO,gBAAkB,MACxGF,KAAKE,MAAQ6G,EAAA,YAAAC,IAAA,2CAAU9G,KAAMF,KAAKE,OAClCF,KAAKE,OAASF,KAAKC,YAAcoH,MAAMrH,KAAK4G,kBAC7CG,EAAA,OAAAC,IAAA,2CAAKC,MAAM,6BACTF,EAAA,wBAAAC,IAAA,4CAAuBhH,KAAK4G,kBAE7B5G,KAAKE,OAASF,KAAKC,YAAcD,KAAK4G,iBAAmB5G,KAAKU,cACjEqG,EAAA,OAAAC,IAAA,2CAAKC,MAAM,4BAGVjH,KAAKiF,eAAiB,QACpBjF,KAAKQ,kBACLR,KAAKO,YACRwG,EAAA,OAAAC,IAAA,2CAAKC,MAAM,2BACPF,EAAA,YAAAC,IAAA,2CAAU9G,KAAK,qBAGnB6G,EAAA,QAAAC,IAAA,2CAAMC,MAAM,kBACVF,EAAA,QAAAC,IAAA,+CAIHhH,KAAKC,WAAaD,KAAK4G,kBAAoBS,MAAMrH,KAAK4G,iBACrDG,EAAA,OAAKE,MAAM,6BACPF,EAAA,4BAAuB/G,KAAK4G,kBACvB,GAER5G,KAAKC,YAAcD,KAAK4G,iBAAmB5G,KAAKU,aACjDqG,EAAA,OAAKE,MAAM,2BAAkC,GAE/CF,EAAA,OAAAC,IAAA,2CAAKC,MAAO,sBAAsBjH,KAAKQ,mBAAqBR,KAAKO,aAAeP,KAAKS,kBAAoB,GAAK,UAC5GsG,EAAA,YAAAC,IAAA,2CAAU9G,KAAK,qBAGjB6G,EAAA,OAAAC,IAAA,2CAAKC,MAAO,4BAA8BjH,KAAKiF,eAAiB,SAAWjF,KAAKQ,kBAAoBR,KAAKO,YAAgBP,KAAKS,mBAAqBT,KAAKQ,iBAAqB,GAAK,UAChLuG,EAAA,YAAAC,IAAA,2CAAU9G,KAAK,uBAIlBF,KAAKQ,mBAAqBR,KAAKS,mBAAqBsG,EAAA,MAAAC,IAAA,2CAAIC,MAAM,eAAa,IAAEF,EAAA,QAAAC,IAAA,2CAAMM,KAAK,iBAAiB,KACzGtH,KAAKS,mBAAqBsG,EAAA,MAAAC,IAAA,2CAAIC,MAAM,mBAAiB,IAAEF,EAAA,QAAAC,IAAA,2CAAMM,KAAK,kBAAkB,K","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-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.innerHTML=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.innerHTML=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.innerHTML=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:"b2ef9e902181e62732a7aa0697dfd99725cdd242",class:"container"},c("header",{key:"8f2d770011091b35944e38e96da9cac0ac0f79f2",class:"header"},c("div",{key:"43c4b4af8f8d2c0dd8b99521a815d36b0ae36b6b",class:"header__info-wrapper"},c("div",{key:"f22deaff6496955c72fc1a7e0e7f13c394739a2e",class:"title"},"DDS Components Overview"),c("div",{key:"b0aa19421b8d11cd1bd4c4e3a1e3575abc690270",class:"infoboard__wrapper"},c("div",{key:"3fcf9e5955a016da44989620ea5417e70dd6bee4",class:"basic__info"},c("div",{key:"449e1f180e1050478b407783d8034fa7f7e16e35"},"Total Number:"),c("div",{key:"f86842a702b78d1da3d02fe7170268a14053a2ac"},c("ifx-number-indicator",{key:"f8e2bf6e7d5cca73582392dda856b4440487cc17",id:"number__indicator-total"}))),c("div",{key:"5bbb1d6af41e14bc0fb24765deb6545568252d5a",class:"basic__info"},c("div",{key:"3c9a6acf47794ad1987654542c029d477e200911"},"Completed:"),c("div",{key:"c7e48622184d9899dfcccc40762a32f92349e30c"},c("ifx-number-indicator",{key:"5a20d0b2fb61e2c366100dd07d482fd6fbefb80d",id:"number__indicator-completed"}))),c("div",{key:"61743eafc886ce7cf9fbdb0c78fd99b63db03126",class:"basic__info"},c("div",{key:"68117538143c672d4011bfdc2447a84bbb5a1a72"},"In Progress:"),c("div",{key:"2ecbca816b57b2d721b47c1fdcb3abdcd0bd445a"},c("ifx-number-indicator",{key:"1e6b37002becdee12be13cfb9e3741c724b348b5",id:"number__indicator-planned"})))))),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:"2163cc4d5471fc248eec0a306181dc5f5b87c567",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-number-indicator--development",size:"s",variant:"bold"},"Number Indicator")),c("td",{key:"6c0ed3435d4789d589f2c75a1941d241b7404cd2"},c("ul",{key:"4583a62f9860f009aec24cf44b2f985ef137da57"},c("li",{key:"853d75964c3bd20780bc70b3ef51de83ccb279f4"},c("span",{key:"499c4b75039d040824cc106fd9d678cf79a08b8f"},c("ifx-icon",{key:"b228c1589bbd299329bdebbbd22e4a61b98cb581",class:"check__icon",icon:"check12"})),c("span",{key:"2da98239a691b56ff57b60de830c1d077a7c0376"},"Provides a compact and configurable display for showcasing numeric data")),c("li",{key:"953d724cc26fe4950252fb34b999eb1626f56177"},c("span",{key:"6c6845790201852f0fe891452ce72a3823e97364"},c("ifx-icon",{key:"7fc14dc93c92eefd3f7c82d85eb2d40954dccba7",class:"check__icon",icon:"check12"})),c("span",{key:"dbb236eafbabf3b65edef08d1c5c7f8ff40b1dd2"},"Adheres to web standards")))),c("td",{key:"8d9d8abada552324a001a53047921f058f084f58"},c("ul",{key:"85cc537576d74310be55d7c8bfd0887acda202be"},c("li",{key:"80c56b822f7d0a91b9d5ec240db1d95f0743e3a0"},c("span",{key:"18b279251654441442d0e4ab1ba2fb677176e05f"},c("ifx-icon",{key:"057f3e986d67ab62cf87741c37ec3ce754719e31",class:"check__icon",icon:"check12"})),c("span",{key:"88515988476644c43ccccc23b20ebf133e2017a1"},"Inverted option")),c("li",{key:"3f6da21d731e47b4ff9f4ba4e9829a6e852054e7"},c("span",{key:"809b4045cb3de4e60dc7a087db6c595b639a9ea5"},c("ifx-icon",{key:"c1f398ccc8d8540462f171feec293f66726fbac6",class:"check__icon",icon:"check12"})),c("span",{key:"0e05cb12c587020218db5e242d75b207eb1f9321"},"React, Vue and Angular wrapper integration")))),c("td",{key:"9d0dd2f293aac006bf435db1b35c744f1a77a4ba"})),c("tr",{key:"55491b96d758ff16260d4f560e08a4b2beebd204"},c("td",{key:"e539ab8b1d78878869c672113fbf7d0c7e2b91a5",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"5b4299028e4e82296211ac8a593bcb8b12c9209c",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-pagination--development",size:"s",variant:"bold"},"Pagination")),c("td",{key:"e207e2ef002fbcac5d2a388065e0b1ea4e1b7dd9"},c("ul",{key:"3f7e181c47fe10bea92543d16ec5ce0381ab2798"},c("li",{key:"7cf3e2ad0ddd5fe34bdbb62c56d7cb94e81b9f16"},c("span",{key:"d3ffbf08f3e8d3a142c8efad66f7674182e5560e"},c("ifx-icon",{key:"484b77c8a0b2f9ff10fc33cba929127ebb104cab",class:"check__icon",icon:"check12"})),c("span",{key:"d8b16503395906e09ad4056b6b2885f0c408b976"},"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:"ba04c8ed762946787b8eb7825acdffa19a3fb3cb"},c("span",{key:"49e53672823058ad3c2352c09963f3b48cee4b87"},c("ifx-icon",{key:"fa12853736b1f25cdd218c981321f350f3e09a8f",class:"check__icon",icon:"check12"})),c("span",{key:"4b60dd7e3da6bd676f05666fb384254b8e2004b0"},"Adheres to web standards")))),c("td",{key:"c97fad6119d08f87dec87d73aca44dde008343e2"},c("ul",{key:"8726387836f28b1a0ad5d62cef70d9d261beea38"},c("li",{key:"385b61043ff5e393cc87798f7d7784ff20a9cc49"},c("span",{key:"46d03f5f0ffd0718c98dd8fe86b2c36f0edfbb97"},c("ifx-icon",{key:"ebefd33a6c6d23298c8b8d07f793afae13a035b6",class:"check__icon",icon:"check12"})),c("span",{key:"c55f317ed1111eb2c9c260d94501eb1ec287eb19"},"Extended customization")),c("li",{key:"4dbe2e79483c900cd43100b56e93da88c9a117c9"},c("span",{key:"69080e5c576b3e6b9da31a109fe7c3b5249ab829"},c("ifx-icon",{key:"8854b662f785ccb3f52d73a64427e7106c9cb4aa",class:"check__icon",icon:"check12"})),c("span",{key:"86fc573be206a91ccd932087522b03dd0a5e487c"},"Configurable Results Per Page option")),c("li",{key:"98005b2cca074370090606b1e589bf24cb40c726"},c("span",{key:"8adcad73eab43f082c9bb8acd4d8e42977fa40b6"},c("ifx-icon",{key:"a90b9ffea25882e0e08adcc09a2cf14dc4014e61",class:"check__icon",icon:"check12"})),c("span",{key:"f6bc2bc73e6abaced473755738295b23577e7542"},"React, Vue and Angular wrapper integration")))),c("td",{key:"36ddc1687fc55d2df3949c49fac7e428b74b77f8"})),c("tr",{key:"f2e75e07e1b9f7bc7c35f189a6ac51542d449d9d"},c("td",{key:"c0a548aca49b424d5bc308a405d4783f349fe893",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"e5071f377d9ce4ebb2478b1b339c866b4269c3f5",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:"e65c61cbb9bac14b96754adf497ad252d24662c4"},c("ul",{key:"ee3d248e49047aaf5ef8604392eaa31b4830eb3a"},c("li",{key:"3b753ef99aeb5dcae0d85961219a7a670385166d"},c("span",{key:"f15b037d8f19b224ebc70ddf625f7edc3d760282"},c("ifx-icon",{key:"b833f2341fbe3bb7edd3334a9826bb87b096bdf9",class:"check__icon",icon:"check12"})),c("span",{key:"872a815fb6e7aa7998467a860a45405059fb00ab"},"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:"db83f015276e14065a205d3758c87c4f44611fa4"},c("span",{key:"83be1320969d96f0401210f69cf18cfc9ce5d32e"},c("ifx-icon",{key:"89d00ff65b160127b17cc5bb6269b7ad2040de69",class:"check__icon",icon:"check12"})),c("span",{key:"925e6e7fff51962981b2f1a2fb6ec182899642da"},"Adheres to web standards")))),c("td",{key:"ddefa94a3520c144e136254683b3cd77b21da9f3"},c("ul",{key:"58fb1e8948c166d48553906eb12c4a23f5ca4e85"},c("li",{key:"4121064e4e80cd060d3dbea0b168cf7e49760b57"},c("span",{key:"b0d0c89903c6bc05578ad367040ec2a2c38b0fd7"},c("ifx-icon",{key:"7d62decf22864deb7ec5961a90ffbf1510472586",class:"check__icon",icon:"check12"})),c("span",{key:"9080e4dd47c3920ce04ddfa8ccd6af8dfcf70e37"},"Extended customization")),c("li",{key:"2b24d28a93d4f0a23e2cd2e22fdd4f93d1182b55"},c("span",{key:"a88d81f19d73dad6969acc57ec55af6d24983e85"},c("ifx-icon",{key:"c95cf809c7fa9f9846f781596f6fd1e6151cb366",class:"check__icon",icon:"check12"})),c("span",{key:"1ad1d9014fc894787f709986491ae50087ecc02c"},"Show percentage option")),c("li",{key:"3592c09ed86cbfd9077e731f4f7670c83c85934a"},c("span",{key:"2fc79fa96ae7e639d65700e8c91dc43296a66d19"},c("ifx-icon",{key:"032663b2b94928695873c3c866a7f1626b7486e1",class:"check__icon",icon:"check12"})),c("span",{key:"fb75cbe33a774267b11e108a6f7e5128171d6359"},"Small and With Label variants included")),c("li",{key:"5adbc7da18616a394b376f84df3ad907fd1bb024"},c("span",{key:"a61e3ab0d5a9303723107c761b56ed8f2f4ea8fd"},c("ifx-icon",{key:"4a55804da8a9f2f77593f2c4e42e08fd04dd703a",class:"check__icon",icon:"check12"})),c("span",{key:"51f2f4f8f29c98236ec5ff800cdf4b6015f37cad"},"React, Vue and Angular wrapper integration")))),c("td",{key:"2e318c030cf90b54eee86315f2677eba8364eced"})),c("tr",{key:"d75632d187b9b66e833c3fdfb223cdba13bb9a11"},c("td",{key:"b3b486429d93f36e36509685a1ad9ffd7c599c02",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"421377400cee67ceb272da9b58871417cf590ded",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:"f102482a82bca3fc38b7bea1c43576193c725d2f"},c("ul",{key:"79c1b3307469ae45ed92d2457144b79bd3264482"},c("li",{key:"773b3188eff3255e0423ba358bdf4136ae2f09dc"},c("span",{key:"29308ffefa6cdcb957e9d2f769fd0acfced47309"},c("ifx-icon",{key:"9dd3a6cb2e11da9dc403440b6525193d60aae3fb",class:"check__icon",icon:"check12"})),c("span",{key:"c80cc6143919f9b56c432ccb06ccadb6ddd5603a"},"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:"56f4d6651a1f960dd0cba8faed329dc92a0d099b"},c("span",{key:"2bb4636d196de4ef28c2ff881b5b37b214a7f4b1"},c("ifx-icon",{key:"c9a631fc897285c1ce6634bbd098f910c42a2597",class:"check__icon",icon:"check12"})),c("span",{key:"8cde059f5729bbf5371c85b3f40e81d94a6973f4"},"Adheres to web standards")))),c("td",{key:"073bfa710c098337e08f1c47c06ccf852669bbc2"},c("ul",{key:"eb309a894a35236f2b3cc15c716202fbd67ce709"},c("li",{key:"98cd273a18724e784ade1ad6c19e6b4bdf7cb169"},c("span",{key:"c6ad94ae24fb31a4497c89913ad0f6a3a7d74696"},c("ifx-icon",{key:"f3baa6dc0f7d7f3bcdc9aa7fe9f5c21c47b05886",class:"check__icon",icon:"check12"})),c("span",{key:"e091d887d98317b1040a5c895a3b7154f7cd4295"},"React, Vue and Angular wrapper integration")))),c("td",{key:"73ac3e8a3da5a314a23d336f2dca60b4c17a531e"})),c("tr",{key:"4ecd51f6ede42b87f13e7ce935f7db5e5a77d610"},c("td",{key:"fb88fd487798d74823b438402efdf0a4dab11219",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"43fecc1ac4cad93ca11612029e64a6e680f67a8a",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:"b776661212934980f6fd4cfa24539f317f1eed6d"},c("ul",{key:"47cbd79b80b6ab7186b9beebe0071d9e59133b63"},c("li",{key:"0638fc5e49523960d6646765f22a88953da11859"},c("span",{key:"170f46e5af6d23a22fdd70bb96f565dec057d213"},c("ifx-icon",{key:"aefdac4b8d548559fdc25f1482d752f877f768a7",class:"check__icon",icon:"check12"})),c("span",{key:"4c900d5a7d5563a19343259205c32d8e6ccfc4e3"},"Provides a customizable interface for grouping multiple radio-button inputs")),c("li",{key:"0d7e48e3ee82580687a786f0b79d28abb92753a6"},c("span",{key:"1686e4f495c99d5487c5196e6a280ef14caac7c0"},c("ifx-icon",{key:"cf6d889bf3ff14fa8798c43f9b8204bd8c428c44",class:"check__icon",icon:"check12"})),c("span",{key:"a0053dc62a9e13511c265c8f5277394510c365df"},"Allows users to set and display group label, caption text and caption icon")),c("li",{key:"842da3133d8f2979c47499aa1401d57d8931ee82"},c("span",{key:"b07187b0ba76b68b3450c3e11f10144fb63af7c5"},c("ifx-icon",{key:"95f186f9d4494b6cb2f6a3818e5080f6f4b8e0b1",class:"check__icon",icon:"check12"})),c("span",{key:"74edb773cef1edd3356d4c571c704ee3acbff846"},"Allows to display individual or group error")),c("li",{key:"7c7501915b7bd2710f6732471630474efd227488"},c("span",{key:"60220dacc8e6a6c155964a28081ff70b05dd0f1d"},c("ifx-icon",{key:"483ba9a8ca29faba9a28abef83d600ba36e3ab5b",class:"check__icon",icon:"check12"})),c("span",{key:"472a38ac96ebb576ca424298e2d07153e5611a1e"},"React, Vue and Angular wrapper integration")),c("li",{key:"891cba2bb4fa57b6b05936d282448cff45987c1b"},c("span",{key:"0148847bf31ba6e4e9e234314c1a1bb9f1d4d6c1"},c("ifx-icon",{key:"221245d3558f1160a2193d583ae6b9601e154d68",class:"check__icon",icon:"check12"})),c("span",{key:"100e8566ee407ccba236879c2f2fa5e0b153d84c"},"Adheres to web standards")))),c("td",{key:"b9e79f02202e143ddf98392214ccdbba9f56acc0"}),c("td",{key:"512e502b36a1027236af7dc65900a5e3fc8ac135"})),c("tr",{key:"0d0ae84670653826fc5d60f78f6ece3536afcb67"},c("td",{key:"f662c8bedb5c18de56ea5858e9428e46eb254261",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"73c686725dae9f6549ea52dcc182983f0e474e79",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:"5064b14ac727f73435d698353b55e6159099ee00"},c("ul",{key:"a01e420fb02742815fff91c9305512956a83dac2"},c("li",{key:"c7013dbe7a2063fd57a14d5febdf9bdc6ca012ed"},c("span",{key:"8d8f8f402f0319cabdf92008f5b591b1c744e3a0"},c("ifx-icon",{key:"b81dbeac7d7248c3fd9bc3a8e4d0efcb4a667750",class:"check__icon",icon:"check12"})),c("span",{key:"06d08c5607530c0249f2b095bb1f6900cec02da5"},"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:"f2aa60e986bcc1d118cb302b6cbd49a06833ca2b"},c("span",{key:"0dad85c90fa102c77b809a71598634ca0268e0f1"},c("ifx-icon",{key:"41c7fc80d866969a15972bcc111d611ba678fa31",class:"check__icon",icon:"check12"})),c("span",{key:"6ff028c91a8afb8b0ac2d3381a9e3c381fb4a987"},"Adheres to web standards")))),c("td",{key:"a997e9acccd515c210b6c9909f20c795beb12f6c"},c("ul",{key:"f75edd49951cf31a303778fff34b5cc549f5b500"},c("li",{key:"0b9bdacad5f161ac60c23c57b60f671345e4b7ba"},c("span",{key:"302aee24bf81cc34b3cf9c9f8ae2cbd0a4e1b70b"},c("ifx-icon",{key:"cad0d18bfd2dfd7207534d4b9c710505e35b168d",class:"check__icon",icon:"check12"})),c("span",{key:"ced77d6aa5523c8312615d247fbcc306315f7284"},"Collapsable option")),c("li",{key:"83f37c1648a759dd2bdbdec9924743e8cff3af58"},c("span",{key:"b973898c98bc95b31d29dff91dd654480dec2445"},c("ifx-icon",{key:"2be90a94ae7adbabb2a7ed9b39230abf14b260ad",class:"check__icon",icon:"check12"})),c("span",{key:"459e33286bd69f1df7dfef350e4d0061dea15569"},"React, Vue and Angular wrapper integration")))),c("td",{key:"fee91f97ba59b63d160b8c6b3889e9ab2c14b9aa"})),c("tr",{key:"721eac174619fd02c74849544c7c3a4fd7151894"},c("td",{key:"5b59de4c9ad419793caf20565b87f39e1240420b",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"c25f31e33548079d385712386dd09c5ebc1515b1",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:"28e3b6d8224ac34c6103be838f6cf79519244084"},c("ul",{key:"53423f71c9ecb9ae53397b3db837a1d30202102c"},c("li",{key:"8f212e93d485ec2855fe16f248bef9354d386d73"},c("span",{key:"616b25ce30f58b3ffd79f03238c8eb3110fd89b9"},c("ifx-icon",{key:"72c65f22e3d2fca147c9d081c8225a7f322186f8",class:"check__icon",icon:"check12"})),c("span",{key:"93b366235428d02fc0348c4c5458221ec99dd123"},"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:"c421281a99fd397a8af30424c928c734f1ecc771"},c("span",{key:"dd7349a7de23d22095ee0ef8c47b8ccd472ba438"},c("ifx-icon",{key:"f1cef8ad08fbbfc42b86f708060fbfaca47356cb",class:"check__icon",icon:"check12"})),c("span",{key:"443918f2f016fe444f692dca916c79beebc06797"},"Adheres to web standards")))),c("td",{key:"6d715fb746c140220f6c2c952e966bb3439b315b"},c("ul",{key:"4fddec078a250a32cf1ffb303514c81ceff89320"},c("li",{key:"222bc6adc6698f203d2a6b506c34ea86401b3f6b"},c("span",{key:"670cd87240242ea21381148a90596fd682584be6"},c("ifx-icon",{key:"e72c714e71631734acc5587ae81e191afac13e54",class:"check__icon",icon:"check12"})),c("span",{key:"3a52d10397ba30510603f6822190a3083a631765"},"Show Delete Icon option")),c("li",{key:"c41d6b88e1c31883d0877c4d313a9bc65da6ba04"},c("span",{key:"33b546e8bc7eeb1da50feb61c049ac59ede7d713"},c("ifx-icon",{key:"4d2c479853d4fbab1192499149261bd6207c9b74",class:"check__icon",icon:"check12"})),c("span",{key:"fdf38d6df0423c8d10342f4960df79323b6e1c78"},"React, Vue and Angular wrapper integration")))),c("td",{key:"05db4b698400bd4aaaa500aecd6e9df8d205ccea"})),c("tr",{key:"03a60ac9825019795d9e37f7579f9d6e7c7ce501"},c("td",{key:"c1067dc3fdc9f0b996e201e9d0e714249cba28cf",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"22e36f5ed3cf9733d77b737f64eed29982d2e975",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:"bda7e9211e65daf207164277afb97e5f21927acc"},c("ul",{key:"de8d836c94ea3db3bb23d5098c58e84d692e4f9b"},c("li",{key:"c966dafae8034ed199d8689ce414f5b5cf04370a"},c("span",{key:"e75f2e4dd80ced66518ab504d0a131a77fa016c5"},c("ifx-icon",{key:"13947a0eac549fe0f335b746b1172ebe2e7d0ac2",class:"check__icon",icon:"check12"})),c("span",{key:"8fef577afaf5fee2e693e0869f0b403763f31dab"},"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:"1381d19d81bb019d1d83b267d02458b20a32e422"},c("ul",{key:"14dd4618c0b65cb0730834ca1beebfe04de9a0c6"},c("li",{key:"df05cc39ed8edabb17d052ceec401d685db7d6d2"},c("span",{key:"9e4c8578a2b37bd370accfda3f04bb82ef870cfe"},c("ifx-icon",{key:"65fd24efba892e3afc125b2f0b981d745df25d83",class:"check__icon",icon:"check12"})),c("span",{key:"d75c4440a3ab062889380bc9d6224064eed51dd1"},"Extended customization")),c("li",{key:"e9d753b094e8aba530da4becc0cfd998a2d045d4"},c("span",{key:"0dca599113a517bfe4266f1c405ae7765b933341"},c("ifx-icon",{key:"ceac46868398de208b67e00d4f26b2ce51a0c536",class:"check__icon",icon:"check12"})),c("span",{key:"cb337a9006a6519807abd2b09a04c2bf321fdd0c"},"Option to enable and disable the search")),c("li",{key:"843bf6ac6f966dfee1ce00fb203ffe26a42fb2a5"},c("span",{key:"434c1fb92407e066e59b56324694f7211ab6e34f"},c("ifx-icon",{key:"4bda1dde87ec90f81e2c15e6de7bdcf2e6b6c05a",class:"check__icon",icon:"check12"})),c("span",{key:"faad74141f04b6afa0bdab67067928cb1b53d126"},"React, Vue and Angular wrapper integration")))),c("td",{key:"d056f0ad66301a173a1fb6728522144727fffbdb"})),c("tr",{key:"5b068ccdf4ab3c4ffc395c70148516073f3386c0"},c("td",{key:"362192efceacf29b7e6390d7789c70c98320b753",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"2f9f3ef055f183853746343446155f927fd3c0b5",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:"6ee4a6799c16469de6964e6d87413eb5c7980e17"},c("ul",{key:"10fa16c6d278ca066232e6332bc1b2aa0b43107d"},c("li",{key:"a981738ade758149b5d259d3783f1b28e653d0d9"},c("span",{key:"8bf462937c46bdc87ad490e0dad6c37866f14414"},c("ifx-icon",{key:"55aec49c7dce65e50fc8ba57bf816cc3b7af52be",class:"check__icon",icon:"check12"})),c("span",{key:"f153d0600f1d52d125422f797279f8d60d9691f7"},"Provides a dynamic and customizable dropdown list that allows users to make multiple selections from a list of options")),c("li",{key:"93bb67440cb14f5de4d143e2b82602eff962eb45"},c("span",{key:"b2a1cbe4003a4c44af6d50d3a18bba57ff3bf18e"},c("ifx-icon",{key:"5db951493a6d1decd3f83aeda1f581bfc930b785",class:"check__icon",icon:"check12"})),c("span",{key:"fc7806fbde9e2b1815dc8eab25649ee066d60d6f"},"Adheres to web standards")))),c("td",{key:"280bdb096bff2d5d7ad17505d60293da9fb8d455"},c("ul",{key:"da784884d4a96b8df9a68c249b79dffc9b975db5"},c("li",{key:"a003dc4646fa27dd6fe46ef684494be05b8ab63d"},c("span",{key:"59eb781d9af3fddfabe59cd7c6c5e8442f76c1f2"},c("ifx-icon",{key:"29c4da012bf47055f0e4a233c2ccf0a7dee8251f",class:"check__icon",icon:"check12"})),c("span",{key:"eb0906159e3bc866927a289f76d11fc6696dce82"},"Extended customization")),c("li",{key:"1d38170534a4f8cdbfc37e6df6df86b54eb97cc7"},c("span",{key:"bb94e43fab46a5fe7f2f4640675095abfbabfdb7"},c("ifx-icon",{key:"f455412514a013cd68bffa87018431d0440529f8",class:"check__icon",icon:"check12"})),c("span",{key:"f65c0fefed9c11c5b1c458e1acf0716c9ad3f186"},"Nestable options")),c("li",{key:"5740f278db7ac8490efe103e618f531b0f109870"},c("span",{key:"7d1705d59c74432c22e4ea5ff09fd80f9de8c74c"},c("ifx-icon",{key:"3d132f3e64f9674e3ab869d5c4a4c974cf61d709",class:"check__icon",icon:"check12"})),c("span",{key:"7d2e73d36e409f6dd39e100044f86806d40f0bba"},"React, Vue and Angular wrapper integration")))),c("td",{key:"3b752cb7004c88a33fc721e527a6f1a5dbe09e88"},c("ul",{key:"ee99ec3eb30fb02cc06a3dde4a97ff330eb2c4c7"},c("li",{key:"222aba76cbfcc93c8b2856387a5559ab99657540"},c("span",{key:"cb423913dc9db501ba9084fe5527d7df66247d2f"},c("ifx-icon",{key:"d36ecd2728e5e9d23c99b99ac15e6b7ed1653c2c",class:"check__icon",icon:"check12"})),c("span",{key:"9f6ef600c8ff4954f03214a2847970fe26667fd7"},"Option to enable and disable the search"))))),c("tr",{key:"96a30685742c1706bc2222f87e0fed28f53a7be5"},c("td",{key:"190d9442ea1f91534d7507360f989cc353c7825d",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"b5ed4508b83b2551a153be8326a0f43b939b059a",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:"9963338d4ea2fe19497fa75a8c67591be9676979"},c("ul",{key:"c2f05479bb7ea3047deca4bb851406d00ebf88d2"},c("li",{key:"3f8bc28f0fe2b7bfbaf199103dc5f23ff96b18c3"},c("span",{key:"778a63e8adebdd9d54209fe4b0a80d3707fb07d1"},c("ifx-icon",{key:"318d6152acc166953555424c2296403da3eed7de",class:"check__icon",icon:"check12"})),c("span",{key:"b7a6541a855ea3d5f13781898e0f7c971947a7e1"},"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:"553eb5fb60ca267c45f54f526128350442df2dc5"},c("span",{key:"abd45212cf17e7dcf13bac80bbf8ae3420923a25"},c("ifx-icon",{key:"44952e29ab3172f96c4b3a8135c64580dbd09de4",class:"check__icon",icon:"check12"})),c("span",{key:"0e29c705ec7cb3dd1c766d3f505836260b0f8011"},"Adheres to web standards")))),c("td",{key:"b61d60a146f9071de33c6ac93959f644fa5b8913"},c("ul",{key:"f35f0f736cd7483af09ea2585dbfce3b78af02a7"},c("li",{key:"d89dd00ed08c1f0ded1b348951e4dfdd61318656"},c("span",{key:"93cf7339e4d4e2fae8b22e5afd2897658344d53d"},c("ifx-icon",{key:"46459f2ace660fc4c1435caa6422a13d5842ce5f",class:"check__icon",icon:"check12"})),c("span",{key:"3a9e22819a384c6d108374cda257af6db0915902"},"Extended customization")),c("li",{key:"afd340c2358e042ba5bbbe37ed272cc21b855f38"},c("span",{key:"e8c01d42bd4ac8a3c254707408a8354979250480"},c("ifx-icon",{key:"495265a00ed22c3f7a7db14d282d3c45405b8f4d",class:"check__icon",icon:"check12"})),c("span",{key:"e80af0d302cc19fd2830ab184cc3d85963f9fa57"},"Multi-layer nestable items and menu")),c("li",{key:"bfc03a340fb6e7a39bbb13c39160a914dc173809"},c("span",{key:"1a5abde3358e5e3dd8dad9b721cbe2e06c8844a6"},c("ifx-icon",{key:"67c56bbe495cba76c480bdb8995a05f9fcec0132",class:"check__icon",icon:"check12"})),c("span",{key:"a5324381869d722be92dc3e84dcff41973813579"},"Initial collapse option")),c("li",{key:"88e9e60379ebdd0a943ca9dbddf8e54b0e622a31"},c("span",{key:"7a2c04b298c86f6048c0eddcebb28ee87cf48ac7"},c("ifx-icon",{key:"f6bcb8f60ea7d2845366958513e55c5fe47d3865",class:"check__icon",icon:"check12"})),c("span",{key:"d124cc197d5a751634b2eb0cdb9060e6fe9e85e6"},"Active and action item feature")),c("li",{key:"1adc6a653d28679c4148455bd994d22537bcf73d"},c("span",{key:"a75bb8b5b7af4b6afa101f26447b0c5bd34124b4"},c("ifx-icon",{key:"03a52ee6951ef859c44b7a5c92e4f3e7c87d3910",class:"check__icon",icon:"check12"})),c("span",{key:"db50920c3d3099383351c21cc597f98373d2d43a"},"Number indicator integration")),c("li",{key:"16b45c2ac9311287f2b5d0e369f31da175e29513"},c("span",{key:"32552bb6fe66c3024100826b4fa77484744eba48"},c("ifx-icon",{key:"d0cfaae6fbac61c1729d3a6f4e0aaa9d6a4a4366",class:"check__icon",icon:"check12"})),c("span",{key:"bb6a65bfad02bec310fb41b366c2480f515aaca8"},"React, Vue and Angular wrapper integration")))),c("td",{key:"8f8cd94e445c663741f7c8e2bc0cb43a3a6168db"},c("ul",{key:"71ce287497ecbb84eb200a0e5cbb5febe8988227"},c("li",{key:"c8acd496bc8571ed4eb2932e98e9fb5a835a55a0"},c("span",{key:"4e03c325d457da8ca20febcfd74407884094c60b"},c("ifx-icon",{key:"729197c5fbcbfe6122f6170989ef1df8217e3dc7",class:"check__icon",icon:"check12"})),c("span",{key:"17d0cf0d7fa9d8bb127d0df0d52038d122a0d35d"},"Removable Footer, Header and Logo")),c("li",{key:"2866d0738ba1e2819b708aabea5db2f369652f02"},c("span",{key:"a15ae234506b103a2b1263fbb96375800d93d6a1"},c("ifx-icon",{key:"37b949e6b1b5be1a362ae2a52744d5a2f870273d",class:"check__icon",icon:"check12"})),c("span",{key:"e36ca3d16781e7ce56c25a96163317033b4d53c2"},"Removable and customizable Links"))))),c("tr",{key:"6b79adbbd855e59b107f5efe7a0a6ef4fcf4bd33"},c("td",{key:"9cd77d4b2a46c10f9d9dd0f3570c1b997d8a40b1",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"9a75fda26aa9100211b26c330d31a4eb9cf580bf",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-slider--development",size:"s",variant:"bold"},"Slider")),c("td",{key:"ae62e936c73aa131a4bd18d4c1bfca1de537515e"},c("ul",{key:"d2a55b2a2d3c067b513abb1502cb8f4c75d5cb3e"},c("li",{key:"025d41c990d1bae249d54bb737c24781199784b8"},c("span",{key:"80a26ca7b6a5d3c2df0487dc8628f17b5e9b6fe8"},c("ifx-icon",{key:"dcfbff2a183b3602ea31d2084d60e8216ed9d163",class:"check__icon",icon:"check12"})),c("span",{key:"6ea71bf868fc6dd856ae26db2cc337cd97792223"},"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:"68202705f64c0be537eee9dc85392b5b54a997ca"},c("span",{key:"68245dc67c8c1f2c4442098f74d2e3959ce3427c"},c("ifx-icon",{key:"7857ef2974403980a5aa4c1f34e12107b8d56bf3",class:"check__icon",icon:"check12"})),c("span",{key:"e358ac8c2a1d2f79d1fbf733588798a9960c880c"},"Adheres to web standards")))),c("td",{key:"4b1929558286a230d882c783dfe76b022eec18e4"},c("ul",{key:"49a296d8aa3632da1022071bc583dac152e6a7e5"},c("li",{key:"30c2fd9f262b10690abf4c4c95e6516c06c71402"},c("span",{key:"2bb9a751689e32d65c9df3978c097fecd1b309b2"},c("ifx-icon",{key:"05b3ec488faf0b46ff846e5e40901b4f49770191",class:"check__icon",icon:"check12"})),c("span",{key:"56f204f3283b42e496bad2c12c230382b4c8fc2f"},"Icon incorporated")),c("li",{key:"a6f403849d4530418ef9021e4b6f3a7a19b84e95"},c("span",{key:"00bb57291c696176aa8608007fa9405265f4d51e"},c("ifx-icon",{key:"035b8c19e5198ea8f8c43fc2c20ca787b5a9ac0a",class:"check__icon",icon:"check12"})),c("span",{key:"3f38bcef06bdf6b1769db7f1931539ccad754925"},"Percentage variant")),c("li",{key:"581348e533aecf8b25142f82a77721645e29ff9c"},c("span",{key:"1c060c9632dfb3c81ede7ef0d317fdae7447b0f0"},c("ifx-icon",{key:"91abc8600cc49314fba73de9e89c77c60ab67218",class:"check__icon",icon:"check12"})),c("span",{key:"26ea91dfc135f7908cdabc91dbb6adc994f0d602"},"Text variant")),c("li",{key:"ec9e71741a8030a2318de92d7c354cc5058f6f98"},c("span",{key:"49e3f027ce344140232c638fd4b37b244a945f58"},c("ifx-icon",{key:"96bcbb0bfc9c8df192ee5f0d1a638174a47c1aad",class:"check__icon",icon:"check12"})),c("span",{key:"b650cec972a4e01357997cfafa009867d9444030"},"React, Vue and Angular wrapper integration")))),c("td",{key:"0dab3182ae56850ed06692d1097e0bc871466aad"})),c("tr",{key:"0e5ac2bfb7f7b8b17d66e825aa97a9b3a5ad6b0b"},c("td",{key:"2da0e47b3449f36b9ddadbceff2f9a774711a2f6",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"59a3c7311f3366cfd47600036a3a47889a7197dc",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-spinner--development",size:"s",variant:"bold"},"Spinner")),c("td",{key:"88a8e4a1404b656ced27f8aff15637392d1b6c71"},c("ul",{key:"c054ba1c1fa6d4448242407851ca12e859e70f43"},c("li",{key:"e2be71a60f3c3fea54549433c0b74e436a756119"},c("span",{key:"d9bff5be0f053d8b2f3745f917f60ab49249af43"},c("ifx-icon",{key:"75078c1815326d29108ffbc979b974fdf4d1a5f3",class:"check__icon",icon:"check12"})),c("span",{key:"2e6802fb0156940200d143ceffe46aefb792c75f"},"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:"542e1ca10227a0242a62270784c62152cf974b3c"},c("span",{key:"97c4f8b37d9366eb73386a40d622c0f965bff47f"},c("ifx-icon",{key:"06b67463b2ef0073f46241858d7be6ecc008f631",class:"check__icon",icon:"check12"})),c("span",{key:"9cb9edc8078f0d15ff19765d99f5daae3b9394e0"},"Adheres to web standards")))),c("td",{key:"667c1469d73eef70de9f65064b9e20934ecbf658"},c("ul",{key:"3ce99c6609889fa188c4b31e790d9b673ee6a538"},c("li",{key:"58673ad0ed6250eacbe74b4952793ac072b81b68"},c("span",{key:"cd6d1adacfa3486f2ba4946de730f5bd9fd1d97c"},c("ifx-icon",{key:"1ed899df6831e5cf6d0838c3f05ae578e3155980",class:"check__icon",icon:"check12"})),c("span",{key:"7719ca2115d79a9df4b9a3df30647a1392440532"},"Brand variant")),c("li",{key:"4b253dff6e9fc0ffbe5d8d5edc6631d86b72a8e6"},c("span",{key:"752e1990723ee28ca66d949d29ca0ab526c3ff62"},c("ifx-icon",{key:"83c3467bb5661650b0def0427e4d651997eaf505",class:"check__icon",icon:"check12"})),c("span",{key:"ccc2a09b1cc427b997d965f92e79bc7ebdce18e5"},"React, Vue and Angular wrapper integration")))),c("td",{key:"896e6087153bd93fb0342cf82df87c495ea255eb"})),c("tr",{key:"9f8753e99a3aed807f440943b46dba170c6a7c4a"},c("td",{key:"9199164e5e265316b58c4c133d8adf2ab4652fa0",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"a2a0f8c344dae4a852110cccde41a758df2e7159",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-status--development",size:"s",variant:"bold"},"Status")),c("td",{key:"09cc43a66c0032b811ac75b3575ee59904c1cf96"},c("ul",{key:"851c8fa746827619fa7fec0d49ec1fde48c37d82"},c("li",{key:"180abc9226ae8b68e8d7deecc1db2e381213ddbd"},c("span",{key:"d659ba581bb2d96b19ae627e7d9792f35e16477e"},c("ifx-icon",{key:"b6087863d206a46cf96cc3b5baadac0e242d7265",class:"check__icon",icon:"check12"})),c("span",{key:"b06666dfe8e6947b178887ea8d281be3fbaabea9"},"Provides a visual indicator for conveying the state, status, or condition of an item, process, or entity within a web application")))),c("td",{key:"938b283f70c925889f3e655156a390b53d03c704"},c("ul",{key:"e4de3a5407ffa0e6c8b8d9c20e5b96a8c876b4af"},c("li",{key:"a62f0ab866dafa96b1828180a3cb4f3d01e217be"},c("span",{key:"fa633115af7d4fc8274b0f82ad1e6eb6395b8f67"},c("ifx-icon",{key:"907aa3087d7d4ae98d8482159b549e69f82849d2",class:"check__icon",icon:"check12"})),c("span",{key:"8c061b7947278574340c12a91bf0f56b857e5e56"},"Ocean, Orange, Grey, Light-grey, Red, Green and Berry color variants")),c("li",{key:"75d921223cedd1afebf2a469b17a360850c85031"},c("span",{key:"8cd7aac8f10d4884c5ecbd6876de00da1ae3577b"},c("ifx-icon",{key:"8d06be502d6e2046a9216afd9a71d42597a6a169",class:"check__icon",icon:"check12"})),c("span",{key:"6e86d7bf89f574e175f1111cf8f66bc64bb010c7"},"Removable border")),c("li",{key:"130b1516dacf4fc59d788faab5b63a9c073b0986"},c("span",{key:"6bb9532cf13ecf1de33b4d05e8d3fa6dd1e8b8e5"},c("ifx-icon",{key:"97b76e3488e696f671c74482073b5d272d48bd07",class:"check__icon",icon:"check12"})),c("span",{key:"a924ee11c1542d42235dfa04ef533ff4bcd3efc2"},"React, Vue and Angular wrapper integration")))),c("td",{key:"0ae8faf373a361f3607cb2711a4fc1171f7464a1"})),c("tr",{key:"82616642f6efd97106f404f2a093068f5a33bcf7"},c("td",{key:"56d25c64381201f8a185c6c643515de1868f5b6d",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"da76b41f93becc9a6a6539bcb85700c84d5b5926",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-stepper--development",size:"s",variant:"bold"},"Stepper")),c("td",{key:"ab806e9e904488a59576fb374bf554c9c3a24d0e"},c("ul",{key:"b1a52db50d44aafc34f107641c95ffcf800eafcb"},c("li",{key:"c062be53f04ec403a9b0c25c805b19fe53a39513"},c("span",{key:"5db5a9933077abc6327d79be0f6474c61b8cfaea"},c("ifx-icon",{key:"ad82b8ee66b727c3ca1c05b6b50490eef0962d14",class:"check__icon",icon:"check12"})),c("span",{key:"b0cfce9889fb58d907a3a5f2d2eb9bc9e2d52625"},"Offers a customizable and intuitive control that allows users to navigate through sequential steps")),c("li",{key:"f698c7a061e403eb0e20d15435a53f4be1e458e2"},c("span",{key:"79a7bafc2ebefbe4ac40033cbcb9a5b2612bf395"},c("ifx-icon",{key:"5b8ef7b86caa9e81736ca3d503b2afd18627a01a",class:"check__icon",icon:"check12"})),c("span",{key:"7922da4d9d87d716e070e94e0e8e680406b11ec8"},"Default and Compact variants")),c("li",{key:"af9ac0743638179d35f32c551dd9f3918a663fde"},c("span",{key:"9a3950546f079b51016811e335978603b5b6df8a"},c("ifx-icon",{key:"0ff5c54568b43e9e4a5f65850c4d2547f4ff90bc",class:"check__icon",icon:"check12"})),c("span",{key:"39cb7d478935d153a28611c7f8a543e398c3181d"},"React, Vue and Angular wrapper integration")))),c("td",{key:"f8fbc354a8c4f0c8b0e4ac31d4d71a3d49f9bbbd"},c("ul",{key:"bec8afa72553be80a9c80ae009a4aa1d41b68607"},c("li",{key:"7aa84123d2f9c2596d0df5dde8b92285740c0419"},c("span",{key:"5524e3ca5e3b381718d9447b11c3a1faddeaa7d3"},c("ifx-icon",{key:"6e0e6944b80001b35a87093d146062fad0d71792",class:"check__icon",icon:"check12"})),c("span",{key:"86672a0401090d664709988de644595ec4666625"},"Vertical variant")))),c("td",{key:"f37ad00442ddb1142bb060eba98d217485fa16b7"})),c("tr",{key:"c854c2cf7af5584c2e2d4d869bae3533d2deaf95"},c("td",{key:"bdcad6cdfc75e072ce98f600423c28fdd9767e04",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"c0801761d1b9ccf00b7038ad7172b53c33b9aa51",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-switch--development",size:"s",variant:"bold"},"Switch")),c("td",{key:"d0ec0a31cc9d602bdb779693fe5cb119955f810b"},c("ul",{key:"eaeed923bfe595dbd3ea88151a02816a84613876"},c("li",{key:"3d218c0bf3bd053800051a59a152ee23b6f0bdef"},c("span",{key:"cc9c116e60f95d6456773f2c41f2815061bd114d"},c("ifx-icon",{key:"3831d3bc5d3af715e96db2707c5e9ae2877fd8c7",class:"check__icon",icon:"check12"})),c("span",{key:"a9cd3377a1801ae9b814a2e4fe2326437a401335"},"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:"d11d656c85921b7302566bba75c851c4b5fcdd56"},c("span",{key:"946426a0ac6033d44a60979fb727a947eb428245"},c("ifx-icon",{key:"5f7082573a3c9883d20644e40d246011bd523313",class:"check__icon",icon:"check12"})),c("span",{key:"ca6d9399e6a600c3f47f0cc9b4ceb78ecf4b26d5"},"Adheres to web standards")))),c("td",{key:"576a8671bd7900f45c36e8db4f04a53de0e73570"},c("ul",{key:"e9a89c981ea99dbcb360f659b6a70f47d0598ac2"},c("li",{key:"434984c55661d87f7caf6d77ed8bc5e88f2177ee"},c("span",{key:"028385a48809b20be4d5fd6f1c30011009e2dfd2"},c("ifx-icon",{key:"73bc55034f4d7e9826b8e03d4e5ff022bed1c9a8",class:"check__icon",icon:"check12"})),c("span",{key:"b06f3cc2da1a6b68baee67c6b676297c017366ab"},"Incorporated label feature")),c("li",{key:"2150cb7827a9ae829691a13856363572dbd988d0"},c("span",{key:"3d86f821bb9c00a95111bacd2d0c71930dd7429d"},c("ifx-icon",{key:"2b7bcfc741293e1908dd2a7ea6224a3baf187c3a",class:"check__icon",icon:"check12"})),c("span",{key:"8ac6bcf39fc8c680b9d2a3a6a2c5eab600f47acb"},"React, Vue and Angular wrapper integration")))),c("td",{key:"414c8cf128343598cba44f574cf67d017aa90c4a"})),c("tr",{key:"5577405af23bc03b1986ffc275115656076181b9"},c("td",{key:"9b5f6045837145f1a4b0316cab8b964cad0cf2b7",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"5b50568e09f88ff74bee2353a3f8c693628719db",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:"130dbeaad4b89b4b262950906c51969ce6fcb3e9"},c("ul",{key:"ea8c07e3096997610fc6b4b4ae0894bf0b89f259"},c("li",{key:"c83e9a2125300c7bdf1370caecc521cda6c06499"},c("span",{key:"b7a9f6f13a799b521bc10c3d6e078ff4ceb87674"},c("ifx-icon",{key:"7b5225ffdc4c65f7966dffd5fd6b864a94af10bb",class:"check__icon",icon:"check12"})),c("span",{key:"352d543c6a25ccc61c5d0f6a76c8732fd25d42c5"},"Offers essential functionality for organizing data into rows and columns, allowing users to view, sort, and interact with structured information efficiently")),c("li",{key:"2eab39bcaa2b9078ec773d2b2800ee37db341180"},c("span",{key:"130a375a50f6de9dcad0eda8eeee1c1816725261"},c("ifx-icon",{key:"41a801291b77184275e91399091726aeefc4297d",class:"check__icon",icon:"check12"})),c("span",{key:"c5a9cb4f7cd481e725878eb3371e152a22df9ca6"},"Includes basic features such as column sorting")))),c("td",{key:"a45075bf282edd494d62a39cd4b21ceffefe64b7"},c("ul",{key:"2b03903381b273a6c140391d76c435afb0035100"},c("li",{key:"75bed56d8f177b82d610d6a95651dafd1b2a1ef4"},c("span",{key:"177f09e31ab274b92ee0826be272c54bcf8e0a8e"},c("ifx-icon",{key:"bd3566bbff4bc39bb4986350f9dc31ae0f1ef256",class:"check__icon",icon:"check12"})),c("span",{key:"da58ced6583665a5b064d3a4892bed158cef5bc8"},"Compact and Default variant")),c("li",{key:"6ed557a39a63dbb7ea9f58b51dcc92f653d18dd7"},c("span",{key:"752034e2c02ffdaae2d68ab85690e02523a85a63"},c("ifx-icon",{key:"ca75eb3202d1fd81c8aadb977cbf73f354671313",class:"check__icon",icon:"check12"})),c("span",{key:"ecd4fc3e3d9e47b10ed83097896e25c0f3427d56"},"React, Vue and Angular wrapper integration")))),c("td",{key:"023445ccd0068710f26bcbf142bf3b0562ecdf99"})),c("tr",{key:"d6795dd447d41c1524ffe5f3f5c35c3ccd3f6879"},c("td",{key:"c765d65958dc388496c92c357b749767406e0a7b",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"ffd82290b24b2046895bfbcc31467c098fd5949b",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:"7d9078179a1d218ee3a3df0d1bacc5f4fe6303b0"},c("ul",{key:"37e0afa054ae9df106a16826953ac3217055039e"},c("li",{key:"c02a6ee03716693875b0aeef20e9e9f0029179ff"},c("span",{key:"e8ba515cf48b2dc752d731769ee19855485c66c8"},c("ifx-icon",{key:"8af6cc2ef6a7369e63ac5db76f05e4d1e2ebc1c1",class:"check__icon",icon:"check12"})),c("span",{key:"5f74307e41d8eafac71e387728faf82dd4a34a8f"},"Pagination")),c("li",{key:"64bcc1b64ac3a1aecc1c6520d73c4bb9b9904f17"},c("span",{key:"c64750c376d1750823c08658e3460993854909ba"},c("ifx-icon",{key:"56e449d8dfc9b50bf29c5a3bce6bb3c9cb5dfb59",class:"check__icon",icon:"check12"})),c("span",{key:"5936990f5828f854c24e39c78276bc0780c59034"},"Sidebar filter")),c("li",{key:"ffa183db89693843839edab2835a9a065dbab39e"},c("span",{key:"c3e3cb27f8020aa4f5241e9c2ce52eae515746c7"},c("ifx-icon",{key:"7b0df578d0d0304a3041b80eb97a27e7dddd7ed6",class:"check__icon",icon:"check12"})),c("span",{key:"c79b4cb3fbe01dba06dee5214b8daa07313fc168"},"Topbar filter")),c("li",{key:"590887c0e4501d39b2419e8f3dab11656bb5c03e"},c("span",{key:"696546d89cab96d3b8611e58076ca97f410a6cd3"},c("ifx-icon",{key:"ece1eedfb2f7f116064dee7ad79551ea8fa432c6",class:"check__icon",icon:"check12"})),c("span",{key:"af213500b1f5b81506156c9d9fd95e98dc60bb94"},"Nestable buttons")))),c("td",{key:"1abbb6aeb45a2131e1dcbad4cfdd24603d153394"}),c("td",{key:"94b0fd9226bfcb3f5221d4d164df85abc9bace8e"})),c("tr",{key:"6037bea3aba53b4ddcb2469b9018c06fdd5f038d"},c("td",{key:"8e6979bb6e07ab0a8b6a6b7691cb55d5590c27c5",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"b864f989d729287778e65e05bf5b5192a2034458",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tabs--development",size:"s",variant:"bold"},"Tabs")),c("td",{key:"60ffcebe0f2c43df48810f404131934edd0ed8b9"},c("ul",{key:"bde60c3e68ffb3efeb475f7c9f935580f35f1fdd"},c("li",{key:"709033d502408a63ecd3780eb9cb8006e46d9416"},c("span",{key:"371d03ac53a0b77cac7380d9587fb26f93c81053"},c("ifx-icon",{key:"65b065141a7c8b819a7b4c72c210170945509859",class:"check__icon",icon:"check12"})),c("span",{key:"e8c6bb5f1d65aa8ce022f962c4a79ff89defafbf"},"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:"57f849901dce32893d42f1ffa6e47b2701d297fd"},c("span",{key:"9b0dfdb1fc3a6d587de7370bcb0a59f9453a7fef"},c("ifx-icon",{key:"6560693fd5209490df03aafa16cefbd9bb31063d",class:"check__icon",icon:"check12"})),c("span",{key:"d537e5a82b2588ed08599fcedfa45e522768121c"},"Adheres to web standards")))),c("td",{key:"99319ee2b42b17dd8ff8ce46c66ee8cc6bfc0495"},c("ul",{key:"798336bc6a7fa6bba10051bea8611f5f317705e9"},c("li",{key:"f2c4bcad40946f1e187d6dc8b963c6a82b43cb8d"},c("span",{key:"3f61e889585f98fdb91e925e62079d9b598aa212"},c("ifx-icon",{key:"7ab75db083e5831e63b89b90942ebd421b6955ea",class:"check__icon",icon:"check12"})),c("span",{key:"c64d76b2c997097d94a26c13c6a194e3156c9aa4"},"Horizontal and Vertical orientation")),c("li",{key:"919f734c63d53409d5133a18d450b5cb91ba57d7"},c("span",{key:"f229a6593803bfcd07129f839b4cae93e2c2e825"},c("ifx-icon",{key:"b8df5577c7480d631b0e7480f599333c0ca8b3e5",class:"check__icon",icon:"check12"})),c("span",{key:"53855ab3762fa0639198c336e061057efa61ae4e"},"Extended customization")),c("li",{key:"104b8b489b0405b4c6fd0618e788c5e3526e0df9"},c("span",{key:"9e4c14dca18188a9106265001eb7229f0a9f0965"},c("ifx-icon",{key:"d4cf815952360d462f13899086164e60426ec917",class:"check__icon",icon:"check12"})),c("span",{key:"e871a8a6501133e3af96df5b17d84784b8e6876e"},"React, Vue and Angular wrapper integration")))),c("td",{key:"420f75bf21804e1df8adb8a6ce11f79ea4678c31"})),c("tr",{key:"7b7fd310c0dcb1ff12ad7b56cd80d0b7f6ac9565"},c("td",{key:"d4f9d8444ebbca7a3a3e81294f0dfd0473438d56",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"83fe049092cef9da8c0596b62b2c7b57355475ca",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tag--development",size:"s",variant:"bold"},"Tag")),c("td",{key:"d6acdb5d257186fa1f34e59dae7d84596cf5a754"},c("ul",{key:"b0938539ff21d318057c9973ec2d4f951bd06193"},c("li",{key:"e5a8bdccfaa3d6f0c1e2d499e387e79e55fdbcb2"},c("span",{key:"7cdab617879cbcaeff2d213e72d878f565b5018c"},c("ifx-icon",{key:"7add7676d3d132345e860d7db181833c3def14f1",class:"check__icon",icon:"check12"})),c("span",{key:"b8b7066da7b23290f7ba9d5e8a57d55a9e0443c6"},"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:"164ff81777cfae74daf2a44436d541db291058d5"},c("ul",{key:"859865bec5008106fa1ce0cd0e99472a1a6323d5"},c("li",{key:"92b40cceeda3a778d0f2ab3d6a5fbdca34b2e1b7"},c("span",{key:"fcf42e39e70564767d439dfcd9f31b57edb092ea"},c("ifx-icon",{key:"b48e8c49554c0c97738ae8320b737cb187e58ab6",class:"check__icon",icon:"check12"})),c("span",{key:"5b87a7ebfa68af76d08925c405b3dba0f332d46c"},"Icon incorporated")),c("li",{key:"c4bd930aa514a537886deda7b7170c5737fee65f"},c("span",{key:"d65917e0a900ce65ef01b4ae51c288a08636a296"},c("ifx-icon",{key:"eb4c54b4d2cdf8b1cb638ab5bc52429f54d54e71",class:"check__icon",icon:"check12"})),c("span",{key:"7aa8af6ebb46daac3aeeca6acbdf6209cb4940a6"},"React, Vue and Angular wrapper integration")))),c("td",{key:"f1014ede531280d1dc4a5ec6a656034cb9b5e76e"})),c("tr",{key:"c7ad083fefd395c5a2819b2fea454f063f3a1d1d"},c("td",{key:"de8b820856801d5542ff1c3321b897817fabbabc",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"aa5c7daf99584d2a867c01bc750d39bd50b8b079",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:"cc98f4aa1d5684e92533e79479ee59fc26ff8b05"},c("ul",{key:"13d729cc7e522b308d67b1d435ff7f18e61c1a43"},c("li",{key:"7c85903d84ccb9b302e104eba742dabcc7710c4f"},c("span",{key:"336aaca5f9bccf98ee2ecc443d73c1d1b4456547"},c("ifx-icon",{key:"2c6363098f4d76e274d05755a8f5b286809a6cc9",class:"check__icon",icon:"check12"})),c("span",{key:"551036cd8e7646853dc80d45ef917f65a2f618d9"},"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:"5ae6e84a3bd208e420445daa8bf4db3aee090ae4"},c("span",{key:"46f9e6cc7e23aaf1f3fbab9e5a90938fc4a75b4d"},c("ifx-icon",{key:"ec02f5f5103fdc301d95035bcf64ef46faea6e1c",class:"check__icon",icon:"check12"})),c("span",{key:"01c587772d3082141c23fff8733c65a3ab6a766e"},"Adheres to web standards")))),c("td",{key:"9281cd9ab2516a72edda2b05e9e0fa0babd99301"},c("ul",{key:"08ef59d7b062a110547d9220bbcd43575aff22a8"},c("li",{key:"5c5fac2ac3c9c3c78ef1f71ea273030c368e615e"},c("span",{key:"16a01e71f65616c4685fd9ae5fd967d00c53b12d"},c("ifx-icon",{key:"4b29c4b99ab8cd60922e919ea8d4aa86633d6522",class:"check__icon",icon:"check12"})),c("span",{key:"54e795e060090d48f9848349e130b28140e5ffec"},"Extended customization")),c("li",{key:"75d31c58f83acbd8dcfffc4fc39028fb8bf9ea2a"},c("span",{key:"a0acf1a47e2e1d32d7c66d8feb2924ce122f599b"},c("ifx-icon",{key:"b31dfac52b1d29cb75afd63efb15c88d263e0ead",class:"check__icon",icon:"check12"})),c("span",{key:"1cf7a8f2379e57ec53ccb4c4647db833d6d61cf5"},"Possibility for icon configuration")),c("li",{key:"fad3e7c93fdc262137704d94d4b550759cdff505"},c("span",{key:"f98f7b218fb4c5df1778f0b30199e19df766a9eb"},c("ifx-icon",{key:"d9ce4f7fca2bef9a3f4b70d26e8758a347604598",class:"check__icon",icon:"check12"})),c("span",{key:"9857c1990fde989b1389c09a5328d3c588417d09"},"React, Vue and Angular wrapper integration")))),c("td",{key:"de9d91006c346f02c568d5777190bf99c03a2a44"},c("ul",{key:"db620f65c9ff6d2525d8ee87a8c8377e78922217"},c("li",{key:"78da3a18c7a558da3d824cf31e14d79fd150ee8b"},c("span",{key:"83c5a0e51d3c56389e4ee99fcf8dac87cf55f0a0"},c("ifx-icon",{key:"9ea48dd96c5df9b80eff3f0a67d555e42d653fd1",class:"check__icon",icon:"check12"})),c("span",{key:"6bd695ba25b4c5b57a47db0e8717c2fdc1a69638"},"Form integration"))))),c("tr",{key:"a119cf3402a2ac1fdae4e6e85ae076428c30fc5d"},c("td",{key:"8f6eae73537a7bf84982b8e693f7ed2d96d3d576",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"c6dcec57e278eb7ab1e06b6ce4da75fb31432532",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tooltip--development",size:"s",variant:"bold"},"Tooltip")),c("td",{key:"33f63a205c37c146957803cdb97acf69b97cfc0f"},c("ul",{key:"0188b3821177d2e4b6639a6ee55f2f749720b5b4"},c("li",{key:"86b9f9d62861ac1eb364b8691492f8254f029c15"},c("span",{key:"d9494669166cace0f9a80d8d12b05cb24350a4fa"},c("ifx-icon",{key:"fbd4e6329b8dd2797a79e8e10b9ce23fcea16ae8",class:"check__icon",icon:"check12"})),c("span",{key:"973d4535f4150fe91488c0a084bc726d2b6cdb2b"},"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:"1172f32df156e6092e0b0458de9fb16b15704371"},c("span",{key:"61cfe9b401d5e4da21f4dfc77c73b3d9d439b63d"},c("ifx-icon",{key:"e05970f4c15fde733194c94d68e01c7bd87915bc",class:"check__icon",icon:"check12"})),c("span",{key:"e428fd522392030cbf20725ae59f999eced0d2cb"},"Adheres to web standards")))),c("td",{key:"75f271fef1dda4792ac2c0c206dda539149ef996"},c("ul",{key:"6549fe1caf113b89e92ec252279fbaa2ac41daf5"},c("li",{key:"9a8d503cc7865bbd5a691c11899b3cc9688add7a"},c("span",{key:"58240e5d9fe88fe6340481e6ce1668a10db2dd46"},c("ifx-icon",{key:"32b915a906b5547fde9651e633ac939643905d1d",class:"check__icon",icon:"check12"})),c("span",{key:"f10cda73b8ddf4f4389643072a1482f6f323a451"},"Compact, dismissible and Extended variants")),c("li",{key:"a86efb3c48e9b6e0417a87c9179f6a829828353f"},c("span",{key:"82ead8c3e293e4bec4db6039c4a2a39b67596ca2"},c("ifx-icon",{key:"ce5f82f66aac83fd635dc5b8b833d78cb29009f2",class:"check__icon",icon:"check12"})),c("span",{key:"c24586833955612d184ee24fb7ec4f27dfbc13cf"},"Auto-adjusting position")),c("li",{key:"591c6ec5eaea0f9df71bc8cd1491a5c6b4f81afa"},c("span",{key:"e13c907d2d9c33046d463b775200065402e72179"},c("ifx-icon",{key:"49b2d80623cbd02c2f013cf443e56b6f8287dc15",class:"check__icon",icon:"check12"})),c("span",{key:"53dc9bbd73c85e2e257e4a6c1d8a2b6d793072a7"},"Icon incorporated")),c("li",{key:"d3a17c3acdb208a3ef407edac81177b82b974a98"},c("span",{key:"3cf338365353a5ae09903e43c295cd2527425bba"},c("ifx-icon",{key:"a1f1f856e1de90dd5e6ea6a2561930cec971ea5e",class:"check__icon",icon:"check12"})),c("span",{key:"355a26140fe267420ada5d996c87b49de00e2cd2"},"React, Vue and Angular wrapper integration")))),c("td",{key:"0401a01bcaddefc8bd7b9bf0b7e26ee15ede4001"})),c("tr",{key:"5972169f45fa8d574ebed0ef7d9a9b95d0510458"},c("td",{key:"0a2123ad117bc16d87b7703fb260503a40df2fdb",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"6f6ca512442a3e6f01607f5bc6fb9bc9245d0cce",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-notification--development",size:"s",variant:"bold"},"Notification")),c("td",{key:"1c82585ce9e918830c6ee8e220694db93e4f12c3"},c("ul",{key:"30d96e208d1ae73cd5093c349c1d3d27c5f731cc"},c("li",{key:"094b574d87fd957009b4c0d478e068a4736df148"},c("span",{key:"b353bd58d236c45c6c356726c5b615d78bbf99c3"},c("ifx-icon",{key:"39b2aacbc23b054441d9a220a7bb7f53fd67670c",class:"check__icon",icon:"check12"})),c("span",{key:"01a5d64d940a73e7bbed3c659043a0f72fca5501"},"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:"21098b0a446309f057d435b2580033aefc32003b"},c("span",{key:"096cc0c5fb80c9ebdf4fa1c3ff22e83bfbe865b4"},c("ifx-icon",{key:"747a2a2ec76e9b227698c5c2fad4580bc5d298c7",class:"check__icon",icon:"check12"})),c("span",{key:"be577eee7e65825436b8e468ff8ada77c85932cf"},"Adheres to web standards")))),c("td",{key:"50c1ef282d5adc5eca60a5ccf4657a63d5aa1a04"}),c("td",{key:"5565c0b9cb6098e18e43a99f99b80fd8c8320531"})),c("tr",{key:"76f2c81e46580d4330ccaf94f399a36d52cbb69e"},c("td",{key:"b36f8de26135c3131da96e9fdeffc785d08c9a2c",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"83ace9cb3415c9bf0a09ea9938b42e5fc0c18b76",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:"a92545a9b4c6a4120d2409f51db4abb0df83282f"},c("ul",{key:"02d0252d22526b15a8cf32f133e575f9fed4d3d7"},c("li",{key:"7b76fe760a142775e747c007b4d6b0e2b9827f67"},c("span",{key:"d4b01ae815ac2f0a07bb32757cb4c6d02f53a2a1"},c("ifx-icon",{key:"78e8dba3d72373ccc04c1b2cc00fd66e563117f7",class:"check__icon",icon:"check12"})),c("span",{key:"f8def2c1f50a87f84b64eb069a35642054e763c0"},"Provides a flexible and intuitive interface for dynamically switching between different content sections or views within a web application")),c("li",{key:"55e665bad6b966d94562708eaad9d1ee13cc779a"},c("span",{key:"772d9217f945500657455dc02e9ba5ea0d2cc2e1"},c("ifx-icon",{key:"68bc16b60646fa5c57a4d0a1b886c1ebdd50160b",class:"check__icon",icon:"check12"})),c("span",{key:"815a5c9b91ed177a0e1b3813a3f55917b5be2fa6"},"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:"ed8829e7737b896af1917867e7069bd8a65aff39"},c("span",{key:"77226e2d1a1d72d73ee4fb945c4989ee7d3d796e"},c("ifx-icon",{key:"9efa54cd32791a416162b2a6e9a2a2d1c337d61f",class:"check__icon",icon:"check12"})),c("span",{key:"4184af854f0729eabfd368d19828a71e51bc1c15"},"Adheres to web standards")))),c("td",{key:"098eaa7b9e45a0a3474491fb1b884b86bd493de6"}),c("td",{key:"d1b186dc23dd538ca9c7069e91ba9e649cc6a167"})),c("tr",{key:"e3925d4cb085507dae8eb5f98179f9be8702443e"},c("td",{key:"4f68f375a839e9c3b17f98357718e62ebf1cfa93",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"cf88ae0a57a9477f21d6223bbcdb5dfac0ffbfbd",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:"d5e14da858bedbdaaf5cd4c3f817197b6e89a9a5"},c("ul",{key:"a3584e8372611bb56b26aa9d0554d8744c235a71"},c("li",{key:"3047a815f2989c0513b9f5fe7dbb3f50776cd6c5"},c("span",{key:"2b82d5fe30c7f767b96a92d72cc10c1c56e247e7"},c("ifx-icon",{key:"77b3cdeadde1a2ecaa3cc7dc25087714d3dd13ca",class:"check__icon",icon:"check12"})),c("span",{key:"734c30936b3adf898227e1bfaaea9442ba9ac569"},"Provides a clear and interactive interface for users to make mutually exclusive selections among multiple options within a web application")),c("li",{key:"12580afae38d990bde2e48c0a0d35d453cf5ddac"},c("span",{key:"1e35cfe791ab871ffb5983789613a419dc584ad3"},c("ifx-icon",{key:"374a6bd9cd1dcaae02acfd6ebf3b5dc9e92bd246",class:"check__icon",icon:"check12"})),c("span",{key:"2bf052074c01225fd4c3aff96cde71dae4fb6bb0"},"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:"66a110606793850d4d94c208242fc3e46f3872eb"},c("span",{key:"73ca30837a8863e06497ce8287ca80a896e0d471"},c("ifx-icon",{key:"99c4b8386259c0b9347ea582c25b02d7794ec3c8",class:"check__icon",icon:"check12"})),c("span",{key:"1f75c64fd519ed0481c261b9fef3fb8e0045f359"},"Adheres to web standards")))),c("td",{key:"5063c70f7a6bca28387147d6da92ba985ddf5077"}),c("td",{key:"3e0060e04b1772f9db6d95aea7b498c4c2b5d382"})),c("tr",{key:"1e1c126152577e14c069863b50ec7ce68a416679"},c("td",{key:"ca62208e37b4f12bfd4fefb03675e2c215d58ee6",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"95c5d4b17e1377d851c195b05889fac4dc740764",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:"1b3c19d40e8a494f2390c995aa565c08ab891d2b"},c("ul",{key:"67ae61302ed0052e4c4e4193516e6ab345203a23"},c("li",{key:"aa073a6beba3b5d55b12bec5fb75c0501f0c4a2a"},c("span",{key:"cffc2bbaf710dd4caedc3b841dd8be078cc1dd1e"},c("ifx-icon",{key:"6c8ab5407f90ff38029f3a5bf6c882c376b752b2",class:"check__icon",icon:"check12"})),c("span",{key:"772d6f0162849ee15ac3324893a924f43f9fb1de"},"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:"b19223c7bc50fb2b27fa4f600dce099e77cddb46"},c("span",{key:"5c2ba716b173db78e236fa8ff34a35ffc6a173dd"},c("ifx-icon",{key:"ce4a9e071ae44c6203231e75bd4834a9b7f83168",class:"check__icon",icon:"check12"})),c("span",{key:"39b0b78b2e7ff971de21639aa2917de32d1080f5"},"Form integration")))),c("td",{key:"1750acd19444eb935a94bf56e0782161b48f13a2"}),c("td",{key:"7cae46e6582f6001805711b1edb00d313eff9c15"})),c("tr",{key:"760f2e15ec63465d476726ca275368f65f3b282a"},c("td",{key:"e76a3ff320a9b6cb978a16b3f756e5dcab67ecaa",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"add90ec114e83d9d14016e8de7006d4ca5d2656c",href:"",size:"s",variant:"bold"},"Card Group")),c("td",{key:"0e2c650e94bd509aef74ebfb4bd68482cf053428"},c("ul",{key:"62aee4a99c30ae834d3b5f00ff61ed00fe6de4f2"},c("li",{key:"b13070c6000981574a69510c5094fd966d38e8fc",class:"planned__component-wrapper"},c("span",{key:"7eb5a3a116cbdedc4d6b95f3ff9e55242182a3db"},c("ifx-icon",{key:"c0bfbbe97c9011c797376563216b98f99721b6f2",class:"planned__icon",icon:"clock24"})),c("span",{key:"6c82d5b352e465e44d56ffe393fdc9874aa70ac9"},"On Hold")))),c("td",{key:"11f8003e8e7423fe6c236973ae732d7354926ed9"}),c("td",{key:"e2167caf12450748002c98a903dd9213e944b024"})),c("tr",{key:"7b3307bfe11bfc6813bf891e10862fd24bc31202"},c("td",{key:"fe4710b5a7f7c80e45c2336618bf6dbb28f97533",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"981c465003963334ae95f4b23a4bd70e4ad2a0b8",href:"",size:"s",variant:"bold"},"Upload")),c("td",{key:"3381176cc658d1194047a184839a8f7e40455e52"},c("ul",{key:"5d201f967ce881d3e8294913152e36cb59bc2376"},c("li",{key:"f4231efa9132f45efea05f385aee78db2cca3e3d",class:"planned__component-wrapper"},c("span",{key:"1084a5ec2c28ad2c054f78366de1235d45d0ce07"},c("ifx-icon",{key:"e760ce17c1dc14744b852d419206292dafd53cd3",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"a86b01f32e700462292ac80389009b5de64013af"},"In Progress")))),c("td",{key:"11be2f7babcc93d498483248381f08b9ba188291"}),c("td",{key:"e029a3645fe117f761ff197c17e17fd21543f9d1"})),c("tr",{key:"036ba3a3ac2a6051c6e1b71c41793f0827c076fa"},c("td",{key:"97edffb7cf7bf1038a951fbe15029a4d66ee5689",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"80a5b92c0d8ea1b89197151cf7cf7bbd4013b5ed",href:"",size:"s",variant:"bold"},"Tree View")),c("td",{key:"7869967bf14c13778e0f38d0043dbd75a937fc58"},c("ul",{key:"03810fba21ed570e12db322a3412212d7040d68f"},c("li",{key:"8e068ddbe72729ad06320546506c00ee376ab328",class:"planned__component-wrapper"},c("span",{key:"347a3ca0c30026935c54b4b05b54502fb3da2d70"},c("ifx-icon",{key:"eca0103d419485ede095994de52d6273f36b7d60",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"ad90875bc3489f3f5c586b5a584665a1bed81863"},"In Progress")))),c("td",{key:"1f901b12ab94e0b0bfb8a31a0c2c709b192204bd"}),c("td",{key:"5480853a5a8b9fb9bd16093c987439780e3d1f59"})),c("tr",{key:"d47765e668ce1cb73e843c615b52cf846412e0dd"},c("td",{key:"505093b9a0acb031777288a053963e61714bc5ea",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"43311b673fed8ecd48e5f26fc452607ce4cf34cc",href:"",size:"s",variant:"bold"},"Popover")),c("td",{key:"6b12f20c79e9706d248300e1d47d51a9cdfd1dc9"},c("ul",{key:"138aa3572058d62943a0e3ede2cb9ef8a355b928"},c("li",{key:"b0fc370e5c2888b1a0cb98375678b5aaecdd9cdf",class:"planned__component-wrapper"},c("span",{key:"a853019dd53cab59497c12d51b5b8227427f1dc2"},c("ifx-icon",{key:"e42fa1d57090ae050a0aa978efb4a906791514f2",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"791ce1b29dee77a401cf53d060ae5f505df782eb"},"In Progress")))),c("td",{key:"8452b0fc32ff5a7c30ec16ecf56cbf2146bf32a2"}),c("td",{key:"2730a1b1cc85d98756d3267bb164d2ac4aad5857"})))))))}get el(){return a(this)}};b.style=f;export{b as ifx_overview_table};
-//# sourceMappingURL=p-e5df823b.entry.js.map