@infineon/infineon-design-system-stencil 30.9.3--canary.1679.8d0c83c3f0040ae0386585c5203298c7d94911f3.0 → 30.9.3--canary.1640.c246fbcdce3247ffada7a2fffa49d05593d4088f.0

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

@@ -0,0 +1 @@
+{"version":3,"names":["navbarItemCss","IfxNavbarItemStyle0","NavbarItem","constructor","hostRef","this","showLabel","icon","href","target","hideOnMobile","internalHref","isMenuItem","hasChildNavItems","isSidebarMenuItem","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","componentDidLoad","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","render","h","key","class","onMouseLeave","onMouseEnter","onClick","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\n.navbar__item {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0px 8px;\n  flex: none;\n  order: 0;\n  flex-grow: 0;\n  font-family: var(--ifx-font-family);\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  & .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    & .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    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 8px;\n    &.no-gap { \n      gap: 0px;\n    }\n  }\n}\n\n.navbar-menu  {\n  position: absolute;\n  display: none;\n  list-style-type: none;\n  visibility: visible;\n  flex-direction: column;\n  width: 224px;\n  min-width: 224px;\n  background: tokens.$ifxColorBaseWhite;\n  box-shadow: 0px 6px 9px 0px #1d1d1d1a;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  padding: 8px 0px;\n  font-family: var(--ifx-font-family);\n\n  &.open:not(.itemInMobileMenu) {\n    display: flex;\n  }\n\n  &.itemInMobileMenu { \n    display: none;\n  }\n\n  &.right { \n    left: 100%;\n    top: -40%;\n  }\n\n  &.left { \n    top: -40%;\n    right: 100%;\n  }\n\n  &.rightSideItemMenu { \n    left: initial;\n    right: 0px;\n  }\n}\n\n.navbar__item { \n    &.layer__item-parent { \n      color: tokens.$ifxColorBaseBlack;\n      font-size: 24px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 32px; \n      letter-spacing: -0.24px;\n      cursor: initial;\n\n      & .navbar__container-right-content-navigation-item-icon-wrapper { \n        & ifx-icon { \n          & svg { \n            width: 24px;\n            height: 24px;\n          }\n        }\n      }\n    }\n\n\n  &.sidebarMenuItem { \n    justify-content: space-between;\n    padding: 0;\n  }\n\n\n  &.menuItem {\n    text-decoration: none;\n    color: tokens.$ifxColorBaseBlack;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 16px;\n    gap: 8px;\n    font-family: var(--ifx-font-family);\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 \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  }\n\n  componentDidLoad() { \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  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            </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          <div class={`navItemIconWrapper ${this.hasChildNavItems && !this.isMenuItem && !this.isSidebarMenuItem ? '' : \"hide\"}`}>\n            <ifx-icon icon=\"chevron-down-12\" />\n          </div>\n          \n         {<div class={`menuItemRightIconWrapper ${((this.itemPosition === 'right' && this.hasChildNavItems && this.isMenuItem) || (this.isSidebarMenuItem && this.hasChildNavItems)) ? '' : \"hide\"}`}>\n            <ifx-icon icon=\"chevron-right-12\" />\n          </div>}\n        </a>\n        \n        {this.hasChildNavItems && !this.isSidebarMenuItem && <ul class='navbar-menu'> <slot name=\"first__layer\" /> </ul>}\n        {this.isSidebarMenuItem && <ul class='sub__layer-menu'> <slot name=\"second__layer\" /> </ul>}\n\n      </div>\n    )\n  }\n}"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,c as i,h as t,g as s}from"./p-f619bff3.js";const a=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-block}.chip{position:relative}.chip__wrapper{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;border:1px solid #BFBBBB;border-radius:9999px;background:#FFFFFF;cursor:pointer;transition:border 100ms ease;font:400 0.875rem/1.25rem "Source Sans 3"}.chip__wrapper:hover,.chip__wrapper:focus-visible{outline:none;border:1px solid #575352}.chip__wrapper:focus{border:1px solid #0A8276}.chip__wrapper.chip__wrapper--small{padding:4px 12px}.chip__wrapper.chip__wrapper--large{padding:8px 16px}.chip__wrapper.chip__wrapper--opened{border:1px solid #0A8276}.chip__wrapper.chip__wrapper--opened .wrapper__open-button{transform:rotate(-180deg)}.chip__wrapper.chip__wrapper--selected{outline:3px solid #0A8276;outline-offset:-3px;color:#0A8276}.chip__wrapper.chip__wrapper--selected:hover,.chip__wrapper.chip__wrapper--selected:focus-visible{outline:3px solid #08665C;color:#08665C}.wrapper__label{display:inline-flex;align-items:center;gap:4px;font:400 0.875rem/1.25rem "Source Sans 3"}.wrapper__label .label__selected-options{font:600 0.875rem/1.25rem "Source Sans 3"}.wrapper__open-button{display:flex;align-items:center;transition:all 300ms ease}.wrapper__unselect-button{display:flex;align-items:center}.chip__dropdown{position:absolute;z-index:1;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;border-radius:1px;padding:8px 0;min-width:222px;background-color:#FFFFFF}';const l=a;const n=class{constructor(t){e(this,t);this.ifxChange=i(this,"ifxChange",7);this.placeholder="";this.size="large";this.value=undefined;this.variant="single";this.readOnly=false;this.opened=false;this.selectedOptions=[]}handleValueChange(e){this.syncSelectedOptionsWithProp(e)}handleReadOnlyChange(e){if(e){this.opened=false}}closeDropdownOnOutsideClick(e){const i=e.composedPath();const t=this.chip.shadowRoot.querySelector(".chip__wrapper");const s=this.chip.shadowRoot.querySelector(".chip__dropdown");if(!i.includes(s)&&!i.includes(t)&&this.opened){this.toggleDropdownMenu()}}handleKeyDown(e){if(e.code!=="Tab"){e.preventDefault()}if(e.target.tagName==="IFX-CHIP"){this.handleWrapperKeyDown(e)}else if(e.target.tagName==="IFX-CHIP-ITEM"){this.handleDropdownKeyDown(e)}}updateSelectedOptions(e){const i=e.detail;const t=[...this.selectedOptions];if(this.variant!=="multi"){if(i.selected){this.opened=false;const t=this.getChipItems();t.forEach((i=>{if(i.selected&&i!==e.target){i.chipState=Object.assign(Object.assign({},i.chipState),{emitIfxChipItemSelect:false});i.selected=false}}));this.selectedOptions=[i]}else{this.selectedOptions=[]}this.value=this.selectedOptions[0]?this.selectedOptions[0].value:undefined}else{if(i.selected){if(!this.selectedOptions.find((e=>e.value===i.value))){this.selectedOptions=[...this.selectedOptions,i]}}else{this.selectedOptions=this.selectedOptions.filter((e=>e.value!==i.value))}this.value=this.selectedOptions.map((e=>e.value))}if(i.emitIfxChange){this.ifxChange.emit({previousSelection:t,currentSelection:this.selectedOptions,name:this.placeholder})}}getChipItems(){return this.chip.querySelectorAll("ifx-chip-item")}getSelectedOptions(){if(this.variant!=="multi"){return this.selectedOptions.map((e=>e.label)).join("")}return this.selectedOptions.slice(0,2).map((e=>e.label)).join(", ")}toggleDropdownMenu(){if(this.readOnly)return;this.opened=!this.opened}focusChipItemAt(e=0){this.opened=true;const i=this.getChipItems();let t;if(e===-1){t=i.item(i.length-1)}else if(e>=0&&e<i.length){t=i.item(e)}else{console.error(`Invalid index: ${e}`);return}const s=t.shadowRoot.querySelector(".chip-item");if(s){setTimeout((()=>{s.focus()}),1)}}focusChip(){const e=this.chip.shadowRoot.querySelector(".chip__wrapper");e.focus()}handleUnselectButtonClick(e){e.stopPropagation();this.opened=false;let i=false;const t=this.getChipItems();t.forEach((e=>{if(e.selected){i=true;e.chipState=Object.assign(Object.assign({},e.chipState),{emitIfxChipItemSelect:false});e.selected=false}}));if(i){const e=this.selectedOptions;this.selectedOptions=[];this.value=[];this.ifxChange.emit({previousSelection:e,currentSelection:[],name:this.placeholder})}}handleWrapperClick(){if(!this.readOnly){this.toggleDropdownMenu()}}handleWrapperKeyDown(e){if(this.readOnly)return;if(!this.opened){switch(e.code){case"Space":case"Enter":case"ArrowDown":this.focusChipItemAt(0);break;case"ArrowUp":this.focusChipItemAt(-1);break}}else{switch(e.code){case"Escape":this.opened=false;this.focusChip();break}}}handleDropdownKeyDown(e){let i=this.getChipItems();let t=Array.from(i).indexOf(e.target);if(t===-1){console.error("Target not found in chip items");return}switch(e.code){case"ArrowDown":if(t===i.length-1)break;this.focusChipItemAt(t+1);break;case"ArrowUp":if(t===0)break;this.focusChipItemAt(t-1);break;case"Escape":this.opened=false;this.focusChip();break;case"Space":if(this.variant==="single"){this.opened=false;this.focusChip()}break;case"Enter":this.opened=false;this.focusChip();break}}syncChipState(){const e=this.getChipItems();let i=0;e.forEach((e=>{e.chipState={emitIfxChipItemSelect:true,size:this.size==="small"?"small":"large",variant:this.variant==="multi"?"multi":"single",key:i++}}))}syncSelectedOptionsWithProp(e){this.selectedOptions=[];const i=(()=>{let e=0;return()=>e++})();if(Array.isArray(e)){this.selectedOptions=e.map((e=>({value:e,label:e,selected:true,key:i(),emitIfxChange:true})))}else if(typeof e==="string"){this.selectedOptions=[{value:e,label:e,selected:true,key:i(),emitIfxChange:true}]}this.syncChipState()}componentWillLoad(){this.syncSelectedOptionsWithProp(this.value)}render(){return t("div",{key:"8c18c26d395086b72e02bc4a93d0704edd066089",class:"chip"},t("div",{key:"c7a091e32092cb523fba9b450a24c482670c066f",class:`chip__wrapper chip__wrapper--${this.size==="small"?"small":"large"}\n                  chip__wrapper--${this.variant==="multi"?"multi":"single"}\n                  ${this.opened&&!this.readOnly?"chip__wrapper--opened":""}\n                  ${this.selectedOptions.length?"chip__wrapper--selected":""}`,tabIndex:0,onClick:!this.readOnly?()=>{this.handleWrapperClick()}:undefined,role:"combobox","aria-label":this.AriaLabel,"aria-value":this.getSelectedOptions(),"aria-haspopup":!this.readOnly?"listbox":undefined,"aria-expanded":!this.readOnly?this.opened.toString():undefined,"aria-controls":!this.readOnly?"dropdown":undefined,"aria-readonly":this.readOnly?"true":undefined,"aria-multiselectable":this.variant==="multi"?"true":undefined},t("div",{key:"aff84b05d8f36b13c59463af3674150d075f0aa9",class:"wrapper__label"},this.selectedOptions.length===0&&`${this.placeholder}`,this.selectedOptions.length!==0&&(this.variant==="multi"||this.readOnly)&&this.placeholder!==""&&`${this.placeholder}:`,this.selectedOptions.length!==0&&t("div",{key:"d6895d41ea10a0c0ae9e20181cc3e112e78f3c06",class:"label__selected-options"},this.getSelectedOptions()),this.selectedOptions.length>2&&this.variant==="multi"&&t("ifx-number-indicator",{key:"af8892d23246826d39fc866b292042297f1688e7"},"  ",`+${this.selectedOptions.length-2}`," ")),!this.readOnly&&(this.variant!=="multi"||this.variant==="multi"&&this.selectedOptions.length===0)&&t("div",{key:"1995a9d622e80b5639af86214a7084427f7c0ad0",class:"wrapper__open-button"},t("ifx-icon",{key:1,icon:`chevrondown16`})),this.variant!=="multi"&&this.readOnly!==false&&this.selectedOptions.length>0&&t("div",{key:"20669e78ce405e4d323b7c61c3e4f70b1aded6a5",class:"wrapper__unselect-button",onClick:e=>{this.handleUnselectButtonClick(e)}},t("ifx-icon",{key:2,icon:`cross16`})),this.selectedOptions.length>=1&&this.variant==="multi"&&t("div",{key:"b4eebcfbcd125f25cb55f94fbd03bab7202f62da",class:"wrapper__unselect-button",onClick:e=>{this.handleUnselectButtonClick(e)}},t("ifx-icon",{key:2,icon:`cross16`}))),this.opened&&!this.readOnly&&t("div",{key:"dbd65ac1f1b86541a908b370272dd1f2433043c4",id:"dropdown",role:"listbox",class:"chip__dropdown"},t("slot",{key:"807a0107a2fe23f0d72ed3b0aed7659d7f1a3bb4"})))}get chip(){return s(this)}static get watchers(){return{value:["handleValueChange"],readOnly:["handleReadOnlyChange"]}}};n.style=l;const r=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.chip-item{display:flex;align-items:center;gap:8px;padding:8px 16px;user-select:none;transition:all 100ms ease;transition-property:background, color}.chip-item:hover{cursor:pointer;background-color:#EEEDED}.chip-item:active{background-color:#BFBBBB}.chip-item:focus{outline:2px solid #0A8276}.chip-item.chip-item--large{font:400 1rem/1.5rem "Source Sans 3"}.chip-item.chip-item--small{font:400 0.875rem/1.25rem "Source Sans 3"}.chip-item.chip-item--selected{color:#0A8276}.chip-item.chip-item--selected .chip-item__selected-indicator{display:block}.chip-item__selected-indicator{display:none;margin-left:auto}';const c=r;const h=class{constructor(t){e(this,t);this.ifxChipItemSelect=i(this,"ifxChipItemSelect",5);this.value=undefined;this.chipState={emitIfxChipItemSelect:true,variant:"multi",size:"large"};this.selected=false}updateItemSelection(e){if(this.chipState.variant==="single"){const i=e.target;if(this.chipItem!==i&&this.chipItem.parentElement===i.parentElement){this.selected=false}}}validateSelected(e,i){if(e!==i){if(this.chipState.emitIfxChipItemSelect){this.emitIfxChipItemSelectEvent()}else{this.chipState.emitIfxChipItemSelect=true}}}getItemLabel(){return this.chipItem.innerText}toggleItemSelection(){this.selected=!this.selected}emitIfxChipItemSelectEvent(e=true){this.ifxChipItemSelect.emit({emitIfxChange:e,key:this.chipState.key,label:this.getItemLabel(),selected:this.selected,value:this.value})}handleItemClick(){this.toggleItemSelection()}handleItemKeyDown(e){if(e.code==="Enter"||e.code==="Space"){this.toggleItemSelection()}}handleSelectedState(){if(this.selected){this.emitIfxChipItemSelectEvent(false)}}componentWillLoad(){this.handleSelectedState()}render(){return t("div",{key:"a4d81329a7a5bbbc71b66b0f02f32302e3edd6bd",class:`chip-item chip-item--${this.chipState.size} \n                    chip-item--${(this.selected&&this.chipState.variant)==="single"?"selected":""}`,tabIndex:0,onClick:()=>{this.handleItemClick()},onKeyDown:e=>{this.handleItemKeyDown(e)},role:"option","aria-selected":this.selected.toString()},this.chipState.variant==="multi"&&t("ifx-checkbox",{key:"26865e6c41a95e1a92a0bbcb444ffd99b06b6f6b",checked:this.selected,tabIndex:-1,size:"s"}),t("div",{key:"8a48897962af2131d6f574d602b71e035b2f46a6",class:"chip-item__label"}," ",t("slot",{key:"2945084fa15c686cc6456761f4ca67370d6418b3"})," "),t("div",{key:"94e48f99ce3629f73d2a82530626474a50d0d9c1",class:"chip-item__selected-indicator"},t("ifx-icon",{key:"e9aaef0ae55766df51d8d293bb4405703dcdead8",icon:`check${this.chipState.size==="small"?"12":"16"}`}," ")))}get chipItem(){return s(this)}static get watchers(){return{selected:["validateSelected"]}}};h.style=c;const o='@charset "UTF-8";:root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.container{display:inline-flex;justify-content:center;align-items:center;gap:32px;font-family:var(--ifx-font-family)}.container .items__per-page-wrapper{display:flex;align-items:center;gap:16px}.container .items__per-page-wrapper .items__per-page-label{color:#1D1D1D;font-size:14px;font-style:normal;font-weight:600;line-height:20px}.container .items__per-page-wrapper .items__per-page-field{display:flex;flex-direction:column;align-items:flex-start}.container .items__per-page-wrapper .items__per-page-field ifx-select{width:92px}.container .items__total-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .items__total-button{display:flex;width:40px;height:40px;justify-content:center;align-items:center;border-radius:100px;border:1px solid #BFBBBB;background:#FFF}.container .items__total-wrapper .page__numbers-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item{display:flex;padding:6px;flex-direction:column;justify-content:center;align-items:center;gap:10px;border-radius:100px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active{background-color:#0A8276}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active span{color:#fff}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover{cursor:pointer}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover:not(.active){background-color:#ddd}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:active:not(.active){background-color:#575352}.container .items__total-wrapper .page__numbers-wrapper .page__number-item span{display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px}.pagination{display:flex}.pagination ifx-icon-button:first-of-type{margin-right:12px}.pagination ifx-icon-button:last-of-type{margin-left:12px}a{padding:8px;border-radius:100px}ol{list-style-type:none;padding:0;margin:0;display:inline-flex;align-items:center;gap:12px}li{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:100px}li:hover:not(.active) a{background-color:#EEEDED}li:active:not(.active) a{background-color:#575352;color:#fff}li.active{background-color:#0A8276}li.active a{color:#fff}li:hover{cursor:pointer}li a{text-decoration:none;display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px;align-items:center}.prev.disabled,.next.disabled{cursor:default}.prev.disabled:hover,.next.disabled:hover{cursor:default;text-decoration:none}.prev{margin-right:2.5px}.next{margin-left:2.5px}@media (min-width: 400px){li:first-child,li.active-sibling,li.active,li.active+li,li:last-child{display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8)~li{display:none}li:first-child:nth-last-child(n+8)~li.active-sibling:before{content:"…";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li.active+li:after{content:"…";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+5){display:inline-flex;flex-direction:row}li:first-child:nth-last-child(n+8)~li:nth-last-child(5):before{content:"…";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):after,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):after,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):before,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):after{display:none !important}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5){display:none}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5):before,li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5):before{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+5){display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+4):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+4):after{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(5):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(5):after{content:"…";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8).active:before,li:first-child:nth-last-child(n+8).active:after,li:first-child:nth-last-child(n+8)~li.active:before,li:first-child:nth-last-child(n+8)~li.active:after{display:none}}';const p=o;const d=class{constructor(t){e(this,t);this.ifxPageChange=i(this,"ifxPageChange",7);this.currentPage=0;this.internalPage=1;this.itemsPerPage=10;this.numberOfPages=[];this.total=1;this.CLASS_DISABLED="disabled";this.CLASS_ACTIVE="active";this.CLASS_SIBLING_ACTIVE="active-sibling";this.DATA_KEY="pagination"}setItemsPerPage(e){if(e.detail){this.itemsPerPage=parseInt(e.detail.label)}else{this.itemsPerPage=10}}componentDidLoad(){this.calculateVisiblePageIndices();var e=this.el.shadowRoot.querySelector(".pagination");let i=e.querySelector(".prev");this.navigateSinglePage(i,true)}calculateNumberOfPages(){if(isNaN(this.currentPage)){this.currentPage=1}const e=this.total<=this.itemsPerPage?this.itemsPerPage:this.total;const i=this.itemsPerPage;const t=Math.ceil(e/i);if(this.currentPage<=0){this.internalPage=1}else if(this.currentPage>t){this.internalPage=t}else this.internalPage=this.currentPage;this.numberOfPages=Array.from({length:t},((e,i)=>i+1))}componentWillLoad(){this.calculateNumberOfPages()}componentDidUpdate(){var e=this.el.shadowRoot.querySelector(".pagination");var i=e.querySelectorAll("li");this.addEventListenersToPageItems(i,e);if(e.dataset[this.DATA_KEY]<this.numberOfPages){e.dataset[this.DATA_KEY]=e.dataset[this.DATA_KEY]}else e.dataset[this.DATA_KEY]=0;this.changePage(e,false)}componentWillUpdate(){this.calculateNumberOfPages()}handleEventEmission(e){let i=e+1;let t=this.numberOfPages.length;let s=e===0?null:e;let a=e+2>t?null:e+2;let l=this.itemsPerPage;this.ifxPageChange.emit({currentPage:i,totalPages:t,prevPage:s,nextPage:a,itemsPerPage:l})}addEventListenersToPageItems(e,i){e.forEach((e=>{e.addEventListener("click",(e=>{var t=i;let s=t.querySelectorAll("li");t.dataset[this.DATA_KEY]=Array.from(s).indexOf(e.currentTarget);this.changePage(t,false)}))}))}initPagination(e){var i=e.querySelectorAll("li");e.dataset[this.DATA_KEY]=Array.from(i).indexOf(e.querySelector(".active"));e.querySelector(".prev").addEventListener("click",(e=>this.navigateSinglePage(e,false)));e.querySelector(".next").addEventListener("click",(e=>this.navigateSinglePage(e,false)));this.addEventListenersToPageItems(i,e)}navigateSinglePage(e,i){let t=e;if(typeof e.target==="object"){t=e.target}if(!t.classList.contains(this.CLASS_DISABLED)){var s=t.closest(".pagination");var a=parseInt(s.dataset[this.DATA_KEY],10);a+=1*(t.classList.contains("prev")?-1:1);if(a===-1){a=0}s.dataset[this.DATA_KEY]=a;this.changePage(s,i)}}changePage(e,i){const t=e;var s=t.querySelectorAll("li");var a=parseInt(t.dataset[this.DATA_KEY],10);s.forEach((e=>{e.classList.remove(this.CLASS_ACTIVE);e.classList.remove(this.CLASS_SIBLING_ACTIVE)}));if(i&&this.internalPage>1){a=Math.floor(this.internalPage-1);t.dataset[this.DATA_KEY]=a}this.handleEventEmission(a);s[a].classList.add(this.CLASS_ACTIVE);if(a===0){t.querySelector(".prev").classList.add(this.CLASS_DISABLED);t.querySelector(".prev").disabled=true}else{s[a-1].classList.add(this.CLASS_SIBLING_ACTIVE);t.querySelector(".prev").classList.remove(this.CLASS_DISABLED);t.querySelector(".prev").disabled=false}if(a===s.length-1){t.querySelector(".next").classList.add(this.CLASS_DISABLED);t.querySelector(".next").disabled=true}else{t.querySelector(".next").classList.remove(this.CLASS_DISABLED);t.querySelector(".next").disabled=false}}calculateVisiblePageIndices(){var e=this.el.shadowRoot.querySelector(".pagination");this.initPagination(e)}render(){return t("div",{key:"db55804ece2792b117f6f5375a6f63253679a393","aria-label":"a pagination","aria-value":this.currentPage,class:"container"},t("div",{key:"bc40446f5905c3f249d243993d7363479d6ce384",class:"items__per-page-wrapper"},t("div",{key:"9c15d938fc18b93fc7e8c10339b71649575386ca",class:"items__per-page-label"},"Results per Page"),t("div",{key:"0b7ba079ffa28c5732df989988afd65396c8adc9",class:"items__per-page-field"},t("ifx-select",{key:"1a031fa45753fc389e3ab386ab6170f50d1df0f0",value:"undefined",size:"s",placeholder:"false","show-search":"false","search-placeholder-value":"Search...",disabled:false,error:false,"error-message":"Error",label:"","placeholder-value":"Placeholder",options:'[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]'}))),t("div",{key:"d5bd11d957dd37b5af1df9d285ae4098c93c3365",class:"items__total-wrapper"},t("div",{key:"295766066233b8b0f975abcc093cc43839b46125",class:"page__numbers-wrapper"},t("div",{key:"574f2ef606d94c2a6ad16c9b9684f158f3595422",class:"pagination"},t("ifx-icon-button",{key:"f98a3b995d2f08124e2f2e3f96e64cccd7b81b33",variant:"secondary",class:"prev",color:"primary",icon:"arrow-left-24"}),t("ol",{key:"07630c257729a369d07baf12e99c0469fccebe0d"},this.numberOfPages.map((e=>t("li",{class:`${this.internalPage===e?"active":""}`},t("a",{href:undefined},e))))),t("ifx-icon-button",{key:"8407562df387e20efa76fdf6ee2d1fe65e6eb6f6",class:"next",variant:"secondary",color:"primary",icon:"arrow-right-24"})))))}get el(){return s(this)}};d.style=p;export{n as ifx_chip,h as ifx_chip_item,d as ifx_pagination};
+//# sourceMappingURL=p-45e42392.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["chipCss","IfxChipStyle0","Chip","constructor","hostRef","this","placeholder","size","value","undefined","variant","readOnly","opened","selectedOptions","handleValueChange","newValue","syncSelectedOptionsWithProp","handleReadOnlyChange","closeDropdownOnOutsideClick","event","path","composedPath","chipWrapper","chip","shadowRoot","querySelector","chipDropdown","includes","toggleDropdownMenu","handleKeyDown","code","preventDefault","target","tagName","handleWrapperKeyDown","handleDropdownKeyDown","updateSelectedOptions","eventDetail","detail","previousSelection","selected","chipItems","getChipItems","forEach","chipItem","chipState","Object","assign","emitIfxChipItemSelect","find","option","filter","map","emitIfxChange","ifxChange","emit","currentSelection","name","querySelectorAll","getSelectedOptions","label","join","slice","focusChipItemAt","index","item","length","console","error","shadowItem","setTimeout","focus","focusChip","handleUnselectButtonClick","stopPropagation","itemGotUnselected","handleWrapperClick","chipitems","targetIndex","Array","from","indexOf","syncChipState","key","generateKey","count","isArray","componentWillLoad","render","h","class","tabIndex","onClick","role","AriaLabel","toString","icon","e","id","chipItemCss","IfxChipItemStyle0","ChipItem","updateItemSelection","parentElement","validateSelected","oldValue","emitIfxChipItemSelectEvent","getItemLabel","innerText","toggleItemSelection","ifxChipItemSelect","handleItemClick","handleItemKeyDown","handleSelectedState","onKeyDown","checked","paginationCss","IfxPaginationStyle0","Pagination","currentPage","internalPage","itemsPerPage","numberOfPages","total","CLASS_DISABLED","CLASS_ACTIVE","CLASS_SIBLING_ACTIVE","DATA_KEY","setItemsPerPage","parseInt","componentDidLoad","calculateVisiblePageIndices","paginationElement","el","leftArrow","navigateSinglePage","calculateNumberOfPages","isNaN","totalPageNumber","Math","ceil","_","componentDidUpdate","listItems","addEventListenersToPageItems","dataset","changePage","componentWillUpdate","handleEventEmission","currActive","totalPages","prevPage","nextPage","ifxPageChange","paginationContainer","addEventListener","parent","currentTarget","initPagination","initialValue","classList","contains","closest","pagination","remove","floor","add","disabled","options","color","href"],"sources":["src/components/chip/chip.scss?tag=ifx-chip&encapsulation=shadow","src/components/chip/chip.tsx","src/components/chip/chip-item/chip-item.scss?tag=ifx-chip-item&encapsulation=shadow","src/components/chip/chip-item/chip-item.tsx","src/components/pagination/pagination.scss?tag=ifx-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: inline-block;\n}\n\n.chip {\n    position: relative;\n}\n\n.chip__wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: tokens.$ifxSpace100;\n\n    box-sizing: border-box;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    \n    background: tokens.$ifxColorBaseWhite;\n    \n    cursor: pointer;  \n    \n    transition: border 100ms ease;\n\n    font: tokens.$ifxBodyBody04;\n    \n    &:hover, &:focus-visible {\n        outline: none;\n        border: 1px solid tokens.$ifxColorEngineering500;\n    }\n\n    &:focus {\n        border: 1px solid tokens.$ifxColorOcean500;\n    }\n    \n    &.chip__wrapper--small {\n        padding: tokens.$ifxSpace50 tokens.$ifxSpace150;\n    }\n    \n    &.chip__wrapper--large {\n        padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    }\n    \n    &.chip__wrapper--opened {\n        border: 1px solid tokens.$ifxColorOcean500;\n        \n        .wrapper__open-button {\n            transform: rotate(-180deg);\n        }\n    }\n    \n    &.chip__wrapper--selected {\n        outline: 3px solid tokens.$ifxColorOcean500;\n        outline-offset: -3px;\n        \n        color: tokens.$ifxColorOcean500;\n        \n        &:hover, &:focus-visible {\n            outline: 3px solid tokens.$ifxColorOcean600;\n            \n            color: tokens.$ifxColorOcean600;\n        }\n    }\n}\n\n.wrapper__label {\n    display: inline-flex;\n    align-items: center;\n    gap: tokens.$ifxSpace50;\n\n    font: tokens.$ifxBodyBody04;\n    \n    .label__selected-options {\n        font: tokens.$ifxBodyBodySemibold04;\n    }\n}\n\n.wrapper__open-button {\n    display:flex;\n    align-items: center;\n    \n    transition: all 300ms ease;\n}\n\n.wrapper__unselect-button {\n    display:flex;\n    align-items: center;\n}\n\n.chip__dropdown {\n    position: absolute;\n    z-index: 1;\n\n    box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n    border: 1px solid tokens.$ifxColorEngineering200;\n    border-radius: tokens.$ifxBorderRadius12;\n    padding: tokens.$ifxSpace100 0;\n\n    min-width: 222px;\n    \n    background-color: tokens.$ifxColorBaseWhite;\n}\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop, State, Watch } from '@stencil/core';\nimport { ChipItemSelectEvent } from './interfaces';\n\n@Component({\n  tag: 'ifx-chip',\n  styleUrl: 'chip.scss',\n  shadow: true\n})\nexport class Chip {\n  @Element() chip: HTMLIfxChipElement;\n\n  @Event() ifxChange: EventEmitter<{ previousSelection: Array<ChipItemSelectEvent>, currentSelection: Array<ChipItemSelectEvent>, name: string }>;\n  @Prop() placeholder: string = '';\n  @Prop() size: 'small' | 'large' = 'large';\n  @Prop({ mutable: true }) value: Array<string> | string = undefined;\n  @Prop() variant: 'single' | 'multi' = 'single';\n  @Prop() readOnly: boolean = false;\n  @Prop() AriaLabel: string;\n\n  @State() opened: boolean = false;\n  @State() selectedOptions: Array<ChipItemSelectEvent> = [];\n\n  @Watch('value')\n  handleValueChange(newValue: Array<string> | string) {\n    this.syncSelectedOptionsWithProp(newValue);\n  }\n\n  @Watch('readOnly')\n  handleReadOnlyChange(newValue: boolean) {\n    if (newValue) {\n      this.opened = false;\n    }\n  }\n\n  @Listen('mousedown', { target: 'document' })\n  closeDropdownOnOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\n    const chipDropdown: HTMLElement = this.chip.shadowRoot.querySelector('.chip__dropdown');\n    if (!path.includes(chipDropdown) && !path.includes(chipWrapper) && this.opened) {\n      this.toggleDropdownMenu();\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    // override behavior of all keys except Tab. Users should be able to tab out of the component.\n    if (event.code !== 'Tab') {\n      event.preventDefault(); \n    }\n\n    if ((event.target as HTMLElement).tagName === 'IFX-CHIP') {\n      this.handleWrapperKeyDown(event);\n    } else if ((event.target as HTMLElement).tagName === 'IFX-CHIP-ITEM') {\n      this.handleDropdownKeyDown(event);\n    }\n  }\n\n  @Listen('ifxChipItemSelect')\n  updateSelectedOptions(event: CustomEvent<ChipItemSelectEvent>) {\n    const eventDetail: ChipItemSelectEvent = event.detail;\n    const previousSelection: Array<ChipItemSelectEvent> = [...this.selectedOptions];\n\n    if (this.variant !== 'multi') {\n      if (eventDetail.selected) {\n        this.opened = false;\n        const chipItems: NodeList = this.getChipItems();\n        chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n          if (chipItem.selected && chipItem !== event.target) {\n            chipItem.chipState = {\n              ...chipItem.chipState,\n              emitIfxChipItemSelect: false,\n            };\n            chipItem.selected = false;\n          }\n        });\n        this.selectedOptions = [eventDetail];\n      } else {\n        this.selectedOptions = [];\n      }\n      this.value = this.selectedOptions[0] ? this.selectedOptions[0].value : undefined;\n    } else {\n      if (eventDetail.selected) {\n        // Prevent duplicate entries\n        if (!this.selectedOptions.find(option => option.value === eventDetail.value)) {\n          this.selectedOptions = [...this.selectedOptions, eventDetail];\n        }\n      } else {\n        this.selectedOptions = this.selectedOptions.filter((option) => option.value !== eventDetail.value);\n      }\n      this.value = this.selectedOptions.map((option) => option.value);\n    }\n\n    if (eventDetail.emitIfxChange) {\n      this.ifxChange.emit({\n        previousSelection: previousSelection,\n        currentSelection: this.selectedOptions,\n        name: this.placeholder\n      });\n    }\n  }\n\n  getChipItems(): NodeList {\n    return this.chip.querySelectorAll('ifx-chip-item');\n  }\n\n  getSelectedOptions(): string {\n    if (this.variant !== 'multi') {\n      return this.selectedOptions.map(option => option.label).join('');\n    }\n    return this.selectedOptions.slice(0, 2).map(option => option.label).join(', ');\n  }\n\n  toggleDropdownMenu() {\n    if (this.readOnly) return;\n    this.opened = !this.opened;\n  }\n\n  /**\n   * Focuses the chip item at the specified index.\n   * @param index the index of the chip item to focus. -1 will focus the last chip item.\n   */\n  focusChipItemAt(index: number = 0) {\n    this.opened = true;\n    const chipItems: NodeList = this.getChipItems();\n    let item: HTMLIfxChipItemElement;\n    \n    if (index === -1) {\n      item = chipItems.item(chipItems.length - 1) as HTMLIfxChipItemElement;\n    } else if (index >= 0 && index < chipItems.length) {\n      item = chipItems.item(index) as HTMLIfxChipItemElement;\n    } else {\n      console.error(`Invalid index: ${index}`);\n      return;\n    }\n\n    const shadowItem = item.shadowRoot.querySelector('.chip-item') as HTMLDivElement;\n    if (shadowItem) {\n      // Delay needed for the shadow item to be rendered.\n      setTimeout(() => {\n        shadowItem.focus();\n      }, 1);\n    }\n  }\n\n  focusChip() {\n    const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\n    chipWrapper.focus();\n  }\n\n  handleUnselectButtonClick(event: MouseEvent) {\n    event.stopPropagation();\n    this.opened = false;\n\n    let itemGotUnselected = false;\n    const chipItems: NodeList = this.getChipItems();\n    chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n      if (chipItem.selected) {\n        itemGotUnselected = true;\n        chipItem.chipState = {\n          ...chipItem.chipState,\n          emitIfxChipItemSelect: false,\n        }\n        chipItem.selected = false;\n      }\n    });\n\n    /* Emit event only if at least one item was unselected. */\n    if (itemGotUnselected) {\n      const previousSelection: Array<ChipItemSelectEvent> = this.selectedOptions;\n      this.selectedOptions = [];\n      this.value = [];\n      this.ifxChange.emit({\n        previousSelection: previousSelection,\n        currentSelection: [],\n        name: this.placeholder\n      });\n    }\n  }\n\n  handleWrapperClick() {\n    if (!this.readOnly) {\n      this.toggleDropdownMenu();\n    }\n  }\n\n  handleWrapperKeyDown(event: KeyboardEvent) {\n    // Keymap oriented at https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#keyboard_interaction\n    if (this.readOnly) return;\n\n    if (!this.opened) {\n      switch (event.code) {\n        case 'Space':\n        case 'Enter':\n        case 'ArrowDown':\n          this.focusChipItemAt(0);\n          break;\n        case 'ArrowUp':\n          this.focusChipItemAt(-1);\n          break;\n      }\n    } else {\n      switch (event.code) {\n        case 'Escape':\n          this.opened = false;\n          this.focusChip();\n          break;\n      }\n    }\n  }\n\n  handleDropdownKeyDown(event: KeyboardEvent) {\n    let chipitems = this.getChipItems();\n\n    let targetIndex = Array.from(chipitems).indexOf(event.target as HTMLIfxChipItemElement);\n    if (targetIndex === -1) {\n      console.error('Target not found in chip items');\n      return;\n    }\n\n    switch (event.code) {\n      case 'ArrowDown':\n        if (targetIndex === chipitems.length - 1) break;\n        this.focusChipItemAt(targetIndex + 1);\n        break;\n      case 'ArrowUp':\n        if (targetIndex === 0) break;\n        this.focusChipItemAt( targetIndex - 1);\n        break;\n      case 'Escape':\n        this.opened = false;\n        this.focusChip();\n        break;\n      case 'Space':\n        // selection is handled by the chip-item component\n        if (this.variant === 'single') {\n          // only close dropdown if single select\n          this.opened = false;\n          this.focusChip();\n        }\n        break;\n      case 'Enter':\n        // selection is handled by the chip-item component\n        this.opened = false;\n        this.focusChip();\n        break;\n      }\n    }\n\n  syncChipState() {\n    const chipItems: NodeList = this.getChipItems();\n    let key: number = 0;\n    chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n      chipItem.chipState = {\n        emitIfxChipItemSelect: true,\n        size: (this.size === 'small' ? 'small' : 'large'),\n        variant: (this.variant === 'multi' ? 'multi' : 'single'),\n        key: key++\n      };\n    });\n  }\n\n  syncSelectedOptionsWithProp(newValue: Array<string> | string) {\n    // Clear old selected options\n    this.selectedOptions = [];\n\n    const generateKey = (() => {\n      let count = 0;\n      return () => count++;\n    })();\n\n    if (Array.isArray(newValue)) {\n      this.selectedOptions = newValue.map(value => ({\n        value,\n        label: value,\n        selected: true,\n        key: generateKey(),\n        emitIfxChange: true\n      }));\n    } else if (typeof newValue === 'string') {\n      this.selectedOptions = [{\n        value: newValue,\n        label: newValue,\n        selected: true,\n        key: generateKey(),\n        emitIfxChange: true\n      }];\n    }\n\n    this.syncChipState();\n  }\n\n  componentWillLoad() {\n    this.syncSelectedOptionsWithProp(this.value);\n  }\n\n  render() {\n    return (\n      <div class='chip'>\n        <div class={`chip__wrapper chip__wrapper--${this.size === 'small' ? 'small' : 'large'}\n                  chip__wrapper--${this.variant === 'multi' ? 'multi' : 'single'}\n                  ${this.opened && !this.readOnly ? 'chip__wrapper--opened' : ''}\n                  ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}`}\n          tabIndex={0}\n          onClick={!this.readOnly ? () => { this.handleWrapperClick() } : undefined}\n          role='combobox'\n          aria-label={this.AriaLabel}\n          aria-value={this.getSelectedOptions()}\n          aria-haspopup={!this.readOnly ? 'listbox' : undefined}\n          aria-expanded={!this.readOnly ? this.opened.toString() : undefined}\n          aria-controls={!this.readOnly ? 'dropdown' : undefined}\n          aria-readonly={this.readOnly ? 'true' : undefined}\n          aria-multiselectable={this.variant === 'multi' ? 'true' : undefined}\n          >\n\n          <div class='wrapper__label'>\n            {\n              (this.selectedOptions.length === 0) && `${this.placeholder}`\n            }\n\n            {\n              (this.selectedOptions.length !== 0 && (this.variant === 'multi' || this.readOnly) && this.placeholder !== '') &&\n              `${this.placeholder}:`\n            }\n\n            {\n              (this.selectedOptions.length !== 0) &&\n              <div class='label__selected-options'>\n                {this.getSelectedOptions()}\n              </div>\n            }\n\n            {\n              (this.selectedOptions.length > 2 && this.variant === 'multi') &&\n              <ifx-number-indicator>  {`+${this.selectedOptions.length - 2}`} </ifx-number-indicator>\n            }\n          </div>\n\n          {\n            !this.readOnly && (this.variant !== 'multi' || (this.variant === 'multi' && this.selectedOptions.length === 0)) &&\n            <div class='wrapper__open-button'>\n              <ifx-icon key={1} icon={`chevrondown16`} />\n            </div>\n          }\n\n\n          { \n            (this.variant !== 'multi' && this.readOnly !== false && this.selectedOptions.length > 0) &&\n            <div class='wrapper__unselect-button' onClick={(e) => { this.handleUnselectButtonClick(e) }}>\n              <ifx-icon key={2} icon={`cross16`} />\n            </div>\n          }\n\n          {\n            ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&\n            <div class='wrapper__unselect-button' onClick={(e) => { this.handleUnselectButtonClick(e) }}>\n              <ifx-icon key={2} icon={`cross16`} />\n            </div>\n          }\n\n        </div>\n\n        {\n          this.opened && !this.readOnly &&\n          <div id='dropdown' role='listbox' class='chip__dropdown'>\n            <slot />\n          </div>\n        }\n      </div>\n    );\n  }\n}\n","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.chip-item {\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace100;\n    \n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    \n    user-select: none;\n    \n    transition: all 100ms ease;\n    transition-property: background, color;\n    \n    &:hover {\n        cursor: pointer;\n        \n        background-color: tokens.$ifxColorEngineering200;\n    }\n    \n    &:active {\n        background-color: tokens.$ifxColorEngineering300;\n    }\n\n    &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n    }\n    \n    &.chip-item--large {\n        font: tokens.$ifxBodyBody03;\n    }\n    \n    &.chip-item--small {\n        font: tokens.$ifxBodyBody04;\n    }\n\n    &.chip-item--selected {\n        color: tokens.$ifxColorOcean500;\n\n        .chip-item__selected-indicator {\n            display: block;\n        }\n    }\n}\n\n.chip-item__selected-indicator {\n    display: none;\n    \n    margin-left: auto;\n}\n\n","import { h,\n    Component,\n    Element,\n    Event,\n    EventEmitter, \n    Listen,\n    Prop, \n    Watch } from '@stencil/core';\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\n\n@Component({\ntag: 'ifx-chip-item',\nstyleUrl: 'chip-item.scss',\nshadow: true\n})\n\nexport class ChipItem {\n@Element() chipItem: HTMLIfxChipItemElement;\n\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\n\n@Prop() value: string = undefined;\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n@Listen('ifxChipItemSelect', { target: 'body' })\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\n   if (this.chipState.variant === 'single') {\n       const target = event.target as HTMLIfxChipItemElement;\n       /* Also making sure chip items are from the same group (parent) while unselecting. */\n       if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\n           this.selected = false;\n       }\n   }\n} \n\n@Watch('selected')\nvalidateSelected(newValue: boolean, oldValue: boolean) {\n   if (newValue !== oldValue) {\n       /* Do not emit if ChipState does not allow. */\n       if (this.chipState.emitIfxChipItemSelect){\n           this.emitIfxChipItemSelectEvent();\n       } else {\n           this.chipState.emitIfxChipItemSelect = true;\n       }\n   }\n} \n\ngetItemLabel(): string {\n   return this.chipItem.innerText as string;\n}\n\ntoggleItemSelection() {\n   this.selected = !this.selected;\n}\n   \n\nemitIfxChipItemSelectEvent(emitIfxChange: boolean = true) {\n   this.ifxChipItemSelect.emit({ emitIfxChange: emitIfxChange,\n                           key: this.chipState.key,\n                           label: this.getItemLabel(), \n                           selected: this.selected, \n                           value: this.value });\n}\n\nhandleItemClick() {\n   this.toggleItemSelection();\n}\n\nhandleItemKeyDown(event: KeyboardEvent) {\n   if (event.code === 'Enter' || event.code === 'Space') {\n       this.toggleItemSelection();\n   }\n}\n\nhandleSelectedState() {\n   if (this.selected) {\n       this.emitIfxChipItemSelectEvent(false);\n   }\n}\n\n\ncomponentWillLoad() {\n   /* Propogating the selected state to the Chip (Parent) component if it is set. */\n   this.handleSelectedState();\n}\n\nrender() {\n   return (\n       <div class={`chip-item chip-item--${this.chipState.size} \n                    chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \n           tabIndex={0}\n           onClick={() => {this.handleItemClick()}}\n           onKeyDown={(e) => {this.handleItemKeyDown(e)}}\n           role=\"option\"\n           aria-selected={this.selected.toString()}>    \n           {/* Checkbox; renders only in 'multi' variant. */}\n           { \n               this.chipState.variant === 'multi' &&\n               <ifx-checkbox checked={this.selected}\n                   tabIndex={-1} \n                   size='s'>\n               </ifx-checkbox>\n           }\n\n           <div class='chip-item__label'> <slot /> </div>\n\n           {/* Selected indicator only visible in 'single' variant. */}\n           <div class='chip-item__selected-indicator'> \n               <ifx-icon icon={`check${this.chipState.size === 'small' ? '12' : '16'}`}> </ifx-icon> \n           </div>\n\n       </div>\n   );\n}\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.container {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  gap: 32px;\n  font-family: var(--ifx-font-family);\n\n\n  & .items__per-page-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n\n    & .items__per-page-label {\n      color: #1D1D1D;\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 20px;\n    }\n\n    & .items__per-page-field {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n\n      & ifx-select {\n        width: 92px;\n      }\n    }\n  }\n\n  & .items__total-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 12px;\n\n    & .items__total-button {\n      display: flex;\n      width: 40px;\n      height: 40px;\n      justify-content: center;\n      align-items: center;\n      border-radius: 100px;\n      border: 1px solid #BFBBBB;\n      background: #FFF;\n    }\n\n    & .page__numbers-wrapper {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      gap: 12px;\n\n      & .page__number-item {\n        display: flex;\n        padding: 6px;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        gap: 10px;\n        border-radius: 100px;\n\n        &.active {\n          background-color: #0A8276;\n\n          & span {\n            color: #fff;\n          }\n        }\n\n        &:hover {\n          cursor: pointer;\n        }\n\n        &:hover:not(.active) {\n          background-color: #ddd;\n\n        }\n\n        &:active:not(.active) {\n          background-color: #575352;\n        }\n\n        & span {\n          display: flex;\n          width: 16px;\n          height: 16px;\n          flex-direction: column;\n          justify-content: center;\n          color: #1D1D1D;\n          text-align: center;\n          font-size: 13px;\n          font-style: normal;\n          font-weight: 400;\n          line-height: 20px;\n        }\n      }\n    }\n  }\n}\n\n\n.pagination {\n  display: flex;\n\n  & ifx-icon-button:first-of-type {\n    margin-right: 12px;\n  }\n\n  & ifx-icon-button:last-of-type {\n    margin-left: 12px;\n  }\n}\n\na {\n  padding: 8px;\n  border-radius: 100px;\n}\n\nol {\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n}\n\nli {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  border-radius: 100px;\n\n  &:hover:not(.active) {\n    & a {\n      background-color: #EEEDED;\n    }\n  }\n\n  &:active:not(.active) {\n    & a {\n      background-color: #575352;\n      color: #fff;\n    }\n  }\n\n  &.active {\n    background-color: #0A8276;\n\n    & a {\n      color: #fff;\n    }\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  & a {\n    text-decoration: none;\n    display: flex;\n    width: 16px;\n    height: 16px;\n    flex-direction: column;\n    justify-content: center;\n    color: #1D1D1D;\n    text-align: center;\n    font-size: 13px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    align-items: center;\n  }\n}\n\n.prev,\n.next {\n  &.disabled {\n    cursor: default;\n\n    &:hover {\n      cursor: default;\n      text-decoration: none;\n    }\n  }\n}\n\n.prev {\n  margin-right: 2.5px;\n}\n\n.next {\n  margin-left: 2.5px;\n}\n\n\n@mixin ellipsis($before: true) {\n  content: \"\\2026\";\n  font-size: 13px;\n  display: inline-block;\n\n  @if($before) {\n    margin-right: 6px;\n  }\n\n  @else {\n    margin-left: 6px;\n  }\n}\n\n\n// @media(max-width:460px) {\n//   li {\n\n//     &:first-child,\n//     &.active,\n//     &.active-sibling:nth-last-child(2), // Show second to last child if the last one is active\n//     &:last-child {\n//       //display: inline-block !important;\n//       display: inline-flex !important;\n//       flex-direction: row;\n//     }\n\n//     $how-many-on-ends: 3; // 1,2,3,...,10 || 1,...,8,9,10\n//     // There are >= 5 pages\n//     &:first-child:nth-last-child(n+6) {\n\n//       &~li {\n//         // Start out with all siblings hidden\n//         display: none;\n\n//         // Show the last children in the list by default\n//         &:nth-last-child(-n+#{$how-many-on-ends}) {\n//           //display: inline-block;\n//           display: inline-flex;\n//           flex-direction: row;\n\n//         }\n\n//         // The child at the beginning of the last group shows ellipsis for the group\n//         &:nth-last-child(#{$how-many-on-ends}) {\n//           &:before {\n//             @include ellipsis(true);\n//           }\n//         }\n\n//         // The very beginning elements do not need to show ellipsis\n//         // The very end elements do not need to show ellipsis\n//       }\n\n\n//       &.active,\n//        &~li.active {\n\n//          // Show ellipsis before and after the active element\n//          &:before {\n//            @include ellipsis(true);\n//          }\n//          &:after {\n//            @include ellipsis(false);\n//          }\n\n\n//          // If the active element is in the first or last group, don't show ellipsis (siblings will take care of it)\n//          &:nth-child(-n+#{$how-many-on-ends - 1}),\n//          &:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n//            &:before, &:after {\n//              display: none;\n//            }\n//          }\n\n//          // Hide the last group if \"active\" comes before them\n//          &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n//            display: none;\n//          }\n\n//          // Show the first group together if \"active\" comes before them\n//          &~li:nth-child(-n+#{$how-many-on-ends}) {\n//            //display: inline-block;\n//            display: inline-flex;\n//            flex-direction: row;\n//          }\n\n//          // If \"active\" is before the last member in the group, don't show ellipsis\n//          &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n//             &:after {\n//               display: none;\n//             }\n//          }\n\n\n//         // The child at the end of the first group shows ellipsis for the group\n//         &~li:nth-child(#{$how-many-on-ends}) {\n//           &:after {\n//             @include ellipsis(false);\n//           }\n//         }\n//       }\n//     }\n//   }\n// }\n\n@media (min-width: 400px) {\n  li {\n\n    &:first-child,\n    &.active-sibling,\n    &.active,\n    &.active+li,\n    &:last-child {\n      //display: inline-block!important;\n      display: inline-flex !important;\n      flex-direction: row;\n    }\n\n    // There are >= 7 pages\n    &:first-child:nth-last-child(n+8) {\n      $how-many-on-ends: 5; // 1,2,3,4,5,...,10 || 1,...6,7,8,9,10\n\n      &~li {\n        // Start out with all siblings hidden\n        display: none;\n\n        // Show ellipsis before the previous one\n        &.active-sibling:before {\n          @include ellipsis(true);\n        }\n\n        // Show ellipsis after the next one\n        &.active+li:after {\n          @include ellipsis(false);\n        }\n\n        // Show the last children in the list by default\n        &:nth-last-child(-n+#{$how-many-on-ends}) {\n          //display: inline-block;\n          display: inline-flex;\n          flex-direction: row;\n        }\n\n        // The child at the beginning of the last group shows ellipsis for the group\n        &:nth-last-child(#{$how-many-on-ends}) {\n          &:before {\n            @include ellipsis(true);\n          }\n        }\n\n        // The very beginning elements do not need to show ellipsis\n        &:nth-child(-n+#{$how-many-on-ends - 3}),\n        // The very end elements do not need to show ellipsis\n        &:nth-last-child(-n+#{$how-many-on-ends - 3}),\n        // Even if it's a sibling to \"active\"\n        &.active-sibling:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n\n          &:before,\n          &:after {\n            display: none !important;\n          }\n        }\n      }\n\n      &.active,\n      &~li.active {\n\n        // Hide the last group if \"active\" comes before them\n        &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n          display: none;\n\n          // If there is overlap, the element will show, but hide it's ellipsis\n          &:before {\n            display: none;\n          }\n        }\n\n        // Show the first group together if \"active\" comes before them\n        &~li:nth-child(-n+#{$how-many-on-ends}) {\n          //display: inline-block;\n          display: inline-flex !important;\n          flex-direction: row;\n        }\n\n        // If \"active\" is before the last member in the group, don't show ellipsis\n        &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n          &:after {\n            display: none;\n          }\n        }\n\n\n        // The child at the end of the first group shows ellipsis for the group\n        &~li:nth-child(#{$how-many-on-ends}) {\n          &:after {\n            @include ellipsis(false);\n          }\n        }\n\n        // \"active\" should never show ellipsis\n        &:before,\n        &:after {\n          display: none;\n        }\n      }\n    }\n  }\n}","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-pagination',\n  styleUrl: 'pagination.scss',\n  shadow: true\n})\nexport class Pagination {\n  @Element() el;\n  @Event() ifxPageChange: EventEmitter;\n  @Prop() currentPage: number = 0;\n  @State() internalPage: number = 1;\n  @State() itemsPerPage: number = 10;\n  @State() numberOfPages: number[] = [];\n  @Prop() total: number = 1;\n\n  private CLASS_DISABLED = \"disabled\"\n  private CLASS_ACTIVE = \"active\"\n  private CLASS_SIBLING_ACTIVE = \"active-sibling\"\n  private DATA_KEY = \"pagination\";\n\n  @Listen('ifxSelect')\n  setItemsPerPage(e) {\n    if(e.detail) {\n      this.itemsPerPage = parseInt(e.detail.label)\n    } else { \n      this.itemsPerPage = 10;\n    }\n  }\n\n  componentDidLoad() {\n    this.calculateVisiblePageIndices()\n    var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n    let leftArrow = paginationElement.querySelector('.prev')\n    this.navigateSinglePage(leftArrow, true)\n\n  }\n\n  calculateNumberOfPages() {\n    if (isNaN(this.currentPage)) {\n      this.currentPage = 1;\n    }\n    const total = this.total <= this.itemsPerPage ? this.itemsPerPage : this.total;\n    const itemsPerPage = this.itemsPerPage;\n    const totalPageNumber = Math.ceil(total / itemsPerPage);\n\n    if (this.currentPage <= 0) {\n      this.internalPage = 1;\n    } else if (this.currentPage > totalPageNumber) {\n      this.internalPage = totalPageNumber;\n    } else this.internalPage = this.currentPage;\n\n    this.numberOfPages = Array.from({ length: totalPageNumber }, (_, index) => index + 1);\n  }\n\n  componentWillLoad() {\n    this.calculateNumberOfPages()\n  }\n\n  componentDidUpdate() {\n    var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n    var listItems = paginationElement.querySelectorAll(\"li\");\n    this.addEventListenersToPageItems(listItems, paginationElement)\n\n    if (paginationElement.dataset[this.DATA_KEY] < this.numberOfPages) {\n      paginationElement.dataset[this.DATA_KEY] = paginationElement.dataset[this.DATA_KEY];\n    } else paginationElement.dataset[this.DATA_KEY] = 0;\n\n    this.changePage(paginationElement, false)\n  }\n\n  componentWillUpdate() {\n    this.calculateNumberOfPages()\n  }\n\n  handleEventEmission(currActive) {\n    let currentPage = currActive + 1;\n    let totalPages = this.numberOfPages.length;\n    let prevPage = currActive === 0 ? null : currActive;\n    let nextPage = currActive + 2 > totalPages ? null : currActive + 2;\n    let itemsPerPage = this.itemsPerPage\n    this.ifxPageChange.emit({ currentPage, totalPages, prevPage, nextPage, itemsPerPage })\n  }\n\n  addEventListenersToPageItems(listItems, paginationContainer) {\n    listItems.forEach((item) => {\n      item.addEventListener(\"click\", (e) => {\n        var parent = paginationContainer;\n        let listItems = parent.querySelectorAll(\"li\");\n        parent.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(e.currentTarget)\n        this.changePage(parent, false)\n      });\n    });\n  }\n\n  initPagination(paginationContainer) {\n    var listItems = paginationContainer.querySelectorAll(\"li\");\n\n    paginationContainer.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(paginationContainer.querySelector(\".active\"));\n\n    paginationContainer.querySelector(\".prev\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n    paginationContainer.querySelector(\".next\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n\n    this.addEventListenersToPageItems(listItems, paginationContainer)\n  }\n\n  navigateSinglePage(e, initialValue) {\n    let el = e;\n    if (typeof e.target === 'object') {\n      el = e.target\n    }\n\n    if (!el.classList.contains(this.CLASS_DISABLED)) {\n      var parent = el.closest(\".pagination\");\n      var currActive = parseInt(parent.dataset[this.DATA_KEY], 10);\n      currActive += 1 * (el.classList.contains(\"prev\") ? -1 : 1);\n\n      if (currActive === -1) {\n        currActive = 0;\n      }\n\n      parent.dataset[this.DATA_KEY] = currActive;\n      this.changePage(parent, initialValue)\n    }\n  }\n\n  changePage(pagination, initialValue) {\n    const paginationContainer = pagination;\n    var listItems = paginationContainer.querySelectorAll(\"li\");\n    var currActive = parseInt(paginationContainer.dataset[this.DATA_KEY], 10);\n\n    listItems.forEach((item) => {\n      item.classList.remove(this.CLASS_ACTIVE);\n      item.classList.remove(this.CLASS_SIBLING_ACTIVE);\n    });\n\n    if (initialValue && this.internalPage > 1) {\n      currActive = Math.floor(this.internalPage - 1);\n      paginationContainer.dataset[this.DATA_KEY] = currActive;\n    }\n\n    this.handleEventEmission(currActive)\n\n    listItems[currActive].classList.add(this.CLASS_ACTIVE);\n\n    if (currActive === 0) {\n      paginationContainer.querySelector(\".prev\").classList.add(this.CLASS_DISABLED);\n      paginationContainer.querySelector(\".prev\").disabled = true;\n\n    } else {\n      listItems[currActive - 1].classList.add(this.CLASS_SIBLING_ACTIVE);\n      paginationContainer.querySelector(\".prev\").classList.remove(this.CLASS_DISABLED);\n      paginationContainer.querySelector(\".prev\").disabled = false;\n    }\n\n    if (currActive === (listItems.length - 1)) {\n      paginationContainer.querySelector(\".next\").classList.add(this.CLASS_DISABLED);\n      paginationContainer.querySelector(\".next\").disabled = true;\n\n    } else {\n      paginationContainer.querySelector(\".next\").classList.remove(this.CLASS_DISABLED);\n      paginationContainer.querySelector(\".next\").disabled = false;\n    }\n  }\n\n  calculateVisiblePageIndices() {\n    var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n    this.initPagination(paginationElement)\n  }\n\n  render() {\n    return (\n      <div aria-label='a pagination' aria-value={this.currentPage} class=\"container\">\n        <div class='items__per-page-wrapper'>\n          <div class='items__per-page-label'>Results per Page</div>\n          <div class='items__per-page-field'>\n            <ifx-select\n              value='undefined'\n              size='s'\n              placeholder='false'\n              show-search='false'\n              search-placeholder-value='Search...'\n              disabled={false}\n              error={false}\n              error-message='Error'\n              label=''\n              placeholder-value='Placeholder'\n              options='[{\"value\":\"ten\",\"label\":\"10\",\"selected\":true}, {\"value\":\"Twenty\",\"label\":\"20\",\"selected\":false}, {\"value\":\"Thirty\",\"label\":\"30\",\"selected\":false}]' >\n            </ifx-select>\n          </div>\n        </div>\n        <div class='items__total-wrapper'>\n          <div class='page__numbers-wrapper'>\n            <div class=\"pagination\">\n              <ifx-icon-button variant='secondary' class=\"prev\" color='primary' icon='arrow-left-24'></ifx-icon-button>\n              <ol>\n                {this.numberOfPages.map((item) =>\n                  <li class={`${this.internalPage === item ? 'active' : \"\"}`}><a href={undefined}>{item}</a></li>)}\n              </ol>\n              <ifx-icon-button class=\"next\" variant='secondary' color='primary' icon='arrow-right-24'></ifx-icon-button>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}"],"mappings":"yDAAA,MAAMA,EAAU,6gDAChB,MAAAC,EAAeD,E,MCOFE,EAAI,MALjB,WAAAC,CAAAC,G,+CASUC,KAAAC,YAAsB,GACtBD,KAAAE,KAA0B,QACTF,KAAAG,MAAgCC,UACjDJ,KAAAK,QAA8B,SAC9BL,KAAAM,SAAoB,MAGnBN,KAAAO,OAAkB,MAClBP,KAAAQ,gBAA8C,E,CAGvD,iBAAAC,CAAkBC,GAChBV,KAAKW,4BAA4BD,E,CAInC,oBAAAE,CAAqBF,GACnB,GAAIA,EAAU,CACZV,KAAKO,OAAS,K,EAKlB,2BAAAM,CAA4BC,GAC1B,MAAMC,EAAOD,EAAME,eACnB,MAAMC,EAA2BjB,KAAKkB,KAAKC,WAAWC,cAAc,kBACpE,MAAMC,EAA4BrB,KAAKkB,KAAKC,WAAWC,cAAc,mBACrE,IAAKL,EAAKO,SAASD,KAAkBN,EAAKO,SAASL,IAAgBjB,KAAKO,OAAQ,CAC9EP,KAAKuB,oB,EAKT,aAAAC,CAAcV,GAEZ,GAAIA,EAAMW,OAAS,MAAO,CACxBX,EAAMY,gB,CAGR,GAAKZ,EAAMa,OAAuBC,UAAY,WAAY,CACxD5B,KAAK6B,qBAAqBf,E,MACrB,GAAKA,EAAMa,OAAuBC,UAAY,gBAAiB,CACpE5B,KAAK8B,sBAAsBhB,E,EAK/B,qBAAAiB,CAAsBjB,GACpB,MAAMkB,EAAmClB,EAAMmB,OAC/C,MAAMC,EAAgD,IAAIlC,KAAKQ,iBAE/D,GAAIR,KAAKK,UAAY,QAAS,CAC5B,GAAI2B,EAAYG,SAAU,CACxBnC,KAAKO,OAAS,MACd,MAAM6B,EAAsBpC,KAAKqC,eACjCD,EAAUE,SAASC,IACjB,GAAIA,EAASJ,UAAYI,IAAazB,EAAMa,OAAQ,CAClDY,EAASC,UAASC,OAAAC,OAAAD,OAAAC,OAAA,GACbH,EAASC,WAAS,CACrBG,sBAAuB,QAEzBJ,EAASJ,SAAW,K,KAGxBnC,KAAKQ,gBAAkB,CAACwB,E,KACnB,CACLhC,KAAKQ,gBAAkB,E,CAEzBR,KAAKG,MAAQH,KAAKQ,gBAAgB,GAAKR,KAAKQ,gBAAgB,GAAGL,MAAQC,S,KAClE,CACL,GAAI4B,EAAYG,SAAU,CAExB,IAAKnC,KAAKQ,gBAAgBoC,MAAKC,GAAUA,EAAO1C,QAAU6B,EAAY7B,QAAQ,CAC5EH,KAAKQ,gBAAkB,IAAIR,KAAKQ,gBAAiBwB,E,MAE9C,CACLhC,KAAKQ,gBAAkBR,KAAKQ,gBAAgBsC,QAAQD,GAAWA,EAAO1C,QAAU6B,EAAY7B,O,CAE9FH,KAAKG,MAAQH,KAAKQ,gBAAgBuC,KAAKF,GAAWA,EAAO1C,O,CAG3D,GAAI6B,EAAYgB,cAAe,CAC7BhD,KAAKiD,UAAUC,KAAK,CAClBhB,kBAAmBA,EACnBiB,iBAAkBnD,KAAKQ,gBACvB4C,KAAMpD,KAAKC,a,EAKjB,YAAAoC,GACE,OAAOrC,KAAKkB,KAAKmC,iBAAiB,gB,CAGpC,kBAAAC,GACE,GAAItD,KAAKK,UAAY,QAAS,CAC5B,OAAOL,KAAKQ,gBAAgBuC,KAAIF,GAAUA,EAAOU,QAAOC,KAAK,G,CAE/D,OAAOxD,KAAKQ,gBAAgBiD,MAAM,EAAG,GAAGV,KAAIF,GAAUA,EAAOU,QAAOC,KAAK,K,CAG3E,kBAAAjC,GACE,GAAIvB,KAAKM,SAAU,OACnBN,KAAKO,QAAUP,KAAKO,M,CAOtB,eAAAmD,CAAgBC,EAAgB,GAC9B3D,KAAKO,OAAS,KACd,MAAM6B,EAAsBpC,KAAKqC,eACjC,IAAIuB,EAEJ,GAAID,KAAW,EAAG,CAChBC,EAAOxB,EAAUwB,KAAKxB,EAAUyB,OAAS,E,MACpC,GAAIF,GAAS,GAAKA,EAAQvB,EAAUyB,OAAQ,CACjDD,EAAOxB,EAAUwB,KAAKD,E,KACjB,CACLG,QAAQC,MAAM,kBAAkBJ,KAChC,M,CAGF,MAAMK,EAAaJ,EAAKzC,WAAWC,cAAc,cACjD,GAAI4C,EAAY,CAEdC,YAAW,KACTD,EAAWE,OAAO,GACjB,E,EAIP,SAAAC,GACE,MAAMlD,EAA2BjB,KAAKkB,KAAKC,WAAWC,cAAc,kBACpEH,EAAYiD,O,CAGd,yBAAAE,CAA0BtD,GACxBA,EAAMuD,kBACNrE,KAAKO,OAAS,MAEd,IAAI+D,EAAoB,MACxB,MAAMlC,EAAsBpC,KAAKqC,eACjCD,EAAUE,SAASC,IACjB,GAAIA,EAASJ,SAAU,CACrBmC,EAAoB,KACpB/B,EAASC,UAASC,OAAAC,OAAAD,OAAAC,OAAA,GACbH,EAASC,WAAS,CACrBG,sBAAuB,QAEzBJ,EAASJ,SAAW,K,KAKxB,GAAImC,EAAmB,CACrB,MAAMpC,EAAgDlC,KAAKQ,gBAC3DR,KAAKQ,gBAAkB,GACvBR,KAAKG,MAAQ,GACbH,KAAKiD,UAAUC,KAAK,CAClBhB,kBAAmBA,EACnBiB,iBAAkB,GAClBC,KAAMpD,KAAKC,a,EAKjB,kBAAAsE,GACE,IAAKvE,KAAKM,SAAU,CAClBN,KAAKuB,oB,EAIT,oBAAAM,CAAqBf,GAEnB,GAAId,KAAKM,SAAU,OAEnB,IAAKN,KAAKO,OAAQ,CAChB,OAAQO,EAAMW,MACZ,IAAK,QACL,IAAK,QACL,IAAK,YACHzB,KAAK0D,gBAAgB,GACrB,MACF,IAAK,UACH1D,KAAK0D,iBAAiB,GACtB,M,KAEC,CACL,OAAQ5C,EAAMW,MACZ,IAAK,SACHzB,KAAKO,OAAS,MACdP,KAAKmE,YACL,M,EAKR,qBAAArC,CAAsBhB,GACpB,IAAI0D,EAAYxE,KAAKqC,eAErB,IAAIoC,EAAcC,MAAMC,KAAKH,GAAWI,QAAQ9D,EAAMa,QACtD,GAAI8C,KAAiB,EAAG,CACtBX,QAAQC,MAAM,kCACd,M,CAGF,OAAQjD,EAAMW,MACZ,IAAK,YACH,GAAIgD,IAAgBD,EAAUX,OAAS,EAAG,MAC1C7D,KAAK0D,gBAAgBe,EAAc,GACnC,MACF,IAAK,UACH,GAAIA,IAAgB,EAAG,MACvBzE,KAAK0D,gBAAiBe,EAAc,GACpC,MACF,IAAK,SACHzE,KAAKO,OAAS,MACdP,KAAKmE,YACL,MACF,IAAK,QAEH,GAAInE,KAAKK,UAAY,SAAU,CAE7BL,KAAKO,OAAS,MACdP,KAAKmE,W,CAEP,MACF,IAAK,QAEHnE,KAAKO,OAAS,MACdP,KAAKmE,YACL,M,CAIN,aAAAU,GACE,MAAMzC,EAAsBpC,KAAKqC,eACjC,IAAIyC,EAAc,EAClB1C,EAAUE,SAASC,IACjBA,EAASC,UAAY,CACnBG,sBAAuB,KACvBzC,KAAOF,KAAKE,OAAS,QAAU,QAAU,QACzCG,QAAUL,KAAKK,UAAY,QAAU,QAAU,SAC/CyE,IAAKA,IACN,G,CAIL,2BAAAnE,CAA4BD,GAE1BV,KAAKQ,gBAAkB,GAEvB,MAAMuE,EAAc,MAClB,IAAIC,EAAQ,EACZ,MAAO,IAAMA,GACd,EAHmB,GAKpB,GAAIN,MAAMO,QAAQvE,GAAW,CAC3BV,KAAKQ,gBAAkBE,EAASqC,KAAI5C,IAAK,CACvCA,QACAoD,MAAOpD,EACPgC,SAAU,KACV2C,IAAKC,IACL/B,cAAe,Q,MAEZ,UAAWtC,IAAa,SAAU,CACvCV,KAAKQ,gBAAkB,CAAC,CACtBL,MAAOO,EACP6C,MAAO7C,EACPyB,SAAU,KACV2C,IAAKC,IACL/B,cAAe,M,CAInBhD,KAAK6E,e,CAGP,iBAAAK,GACElF,KAAKW,4BAA4BX,KAAKG,M,CAGxC,MAAAgF,GACE,OACEC,EAAA,OAAAN,IAAA,2CAAKO,MAAM,QACTD,EAAA,OAAAN,IAAA,2CAAKO,MAAO,gCAAgCrF,KAAKE,OAAS,QAAU,QAAU,6CACnDF,KAAKK,UAAY,QAAU,QAAU,+BACpDL,KAAKO,SAAWP,KAAKM,SAAW,wBAA0B,yBAC1DN,KAAKQ,gBAAgBqD,OAAS,0BAA4B,KACpEyB,SAAU,EACVC,SAAUvF,KAAKM,SAAW,KAAQN,KAAKuE,oBAAoB,EAAKnE,UAChEoF,KAAK,WAAU,aACHxF,KAAKyF,UAAS,aACdzF,KAAKsD,qBAAoB,iBACrBtD,KAAKM,SAAW,UAAYF,UAAS,iBACrCJ,KAAKM,SAAWN,KAAKO,OAAOmF,WAAatF,UAAS,iBAClDJ,KAAKM,SAAW,WAAaF,UAAS,gBACvCJ,KAAKM,SAAW,OAASF,UAAS,uBAC3BJ,KAAKK,UAAY,QAAU,OAASD,WAG1DgF,EAAA,OAAAN,IAAA,2CAAKO,MAAM,kBAENrF,KAAKQ,gBAAgBqD,SAAW,GAAM,GAAG7D,KAAKC,cAI9CD,KAAKQ,gBAAgBqD,SAAW,IAAM7D,KAAKK,UAAY,SAAWL,KAAKM,WAAaN,KAAKC,cAAgB,IAC1G,GAAGD,KAAKC,eAIPD,KAAKQ,gBAAgBqD,SAAW,GACjCuB,EAAA,OAAAN,IAAA,2CAAKO,MAAM,2BACRrF,KAAKsD,sBAKPtD,KAAKQ,gBAAgBqD,OAAS,GAAK7D,KAAKK,UAAY,SACrD+E,EAAA,wBAAAN,IAAA,iDAAyB,IAAI9E,KAAKQ,gBAAgBqD,OAAS,IAAG,OAK/D7D,KAAKM,WAAaN,KAAKK,UAAY,SAAYL,KAAKK,UAAY,SAAWL,KAAKQ,gBAAgBqD,SAAW,IAC5GuB,EAAA,OAAAN,IAAA,2CAAKO,MAAM,wBACTD,EAAA,YAAUN,IAAK,EAAGa,KAAM,mBAMzB3F,KAAKK,UAAY,SAAWL,KAAKM,WAAa,OAASN,KAAKQ,gBAAgBqD,OAAS,GACtFuB,EAAA,OAAAN,IAAA,2CAAKO,MAAM,2BAA2BE,QAAUK,IAAQ5F,KAAKoE,0BAA0BwB,EAAE,GACvFR,EAAA,YAAUN,IAAK,EAAGa,KAAM,aAKxB3F,KAAKQ,gBAAgBqD,QAAU,GAAM7D,KAAKK,UAAY,SACxD+E,EAAA,OAAAN,IAAA,2CAAKO,MAAM,2BAA2BE,QAAUK,IAAQ5F,KAAKoE,0BAA0BwB,EAAE,GACvFR,EAAA,YAAUN,IAAK,EAAGa,KAAM,cAO5B3F,KAAKO,SAAWP,KAAKM,UACrB8E,EAAA,OAAAN,IAAA,2CAAKe,GAAG,WAAWL,KAAK,UAAUH,MAAM,kBACtCD,EAAA,QAAAN,IAAA,8C,mIC7WZ,MAAMgB,EAAc,2rBACpB,MAAAC,EAAeD,E,MCeFE,EAAQ,MANrB,WAAAlG,CAAAC,G,+DAWQC,KAAAG,MAAgBC,UAChBJ,KAAAwC,UAAuB,CAAEG,sBAAuB,KAAMtC,QAAS,QAASH,KAAM,SAC9CF,KAAAmC,SAAoB,K,CAG5D,mBAAA8D,CAAoBnF,GACjB,GAAId,KAAKwC,UAAUnC,UAAY,SAAU,CACrC,MAAMsB,EAASb,EAAMa,OAErB,GAAI3B,KAAKuC,WAAaZ,GAAU3B,KAAKuC,SAAS2D,gBAAkBvE,EAAOuE,cAAe,CAClFlG,KAAKmC,SAAW,K,GAM3B,gBAAAgE,CAAiBzF,EAAmB0F,GACjC,GAAI1F,IAAa0F,EAAU,CAEvB,GAAIpG,KAAKwC,UAAUG,sBAAsB,CACrC3C,KAAKqG,4B,KACF,CACHrG,KAAKwC,UAAUG,sBAAwB,I,GAKlD,YAAA2D,GACG,OAAOtG,KAAKuC,SAASgE,S,CAGxB,mBAAAC,GACGxG,KAAKmC,UAAYnC,KAAKmC,Q,CAIzB,0BAAAkE,CAA2BrD,EAAyB,MACjDhD,KAAKyG,kBAAkBvD,KAAK,CAAEF,cAAeA,EACrB8B,IAAK9E,KAAKwC,UAAUsC,IACpBvB,MAAOvD,KAAKsG,eACZnE,SAAUnC,KAAKmC,SACfhC,MAAOH,KAAKG,O,CAGvC,eAAAuG,GACG1G,KAAKwG,qB,CAGR,iBAAAG,CAAkB7F,GACf,GAAIA,EAAMW,OAAS,SAAWX,EAAMW,OAAS,QAAS,CAClDzB,KAAKwG,qB,EAIZ,mBAAAI,GACG,GAAI5G,KAAKmC,SAAU,CACfnC,KAAKqG,2BAA2B,M,EAKvC,iBAAAnB,GAEGlF,KAAK4G,qB,CAGR,MAAAzB,GACG,OACIC,EAAA,OAAAN,IAAA,2CAAKO,MAAO,wBAAwBrF,KAAKwC,UAAUtC,0CACxBF,KAAKmC,UAAYnC,KAAKwC,UAAUnC,WAAa,SAAW,WAAa,KAC5FiF,SAAU,EACVC,QAAS,KAAOvF,KAAK0G,iBAAiB,EACtCG,UAAYjB,IAAO5F,KAAK2G,kBAAkBf,EAAE,EAC5CJ,KAAK,SAAQ,gBACExF,KAAKmC,SAASuD,YAGzB1F,KAAKwC,UAAUnC,UAAY,SAC3B+E,EAAA,gBAAAN,IAAA,2CAAcgC,QAAS9G,KAAKmC,SACxBmD,UAAW,EACXpF,KAAK,MAIbkF,EAAA,OAAAN,IAAA,2CAAKO,MAAM,oBAAkB,IAAED,EAAA,QAAAN,IAAA,6CAAQ,KAGvCM,EAAA,OAAAN,IAAA,2CAAKO,MAAM,iCACPD,EAAA,YAAAN,IAAA,2CAAUa,KAAM,QAAQ3F,KAAKwC,UAAUtC,OAAS,QAAU,KAAO,QAAM,M,uGC7GtF,MAAM6G,EAAgB,8iKACtB,MAAAC,EAAeD,E,MCOFE,EAAU,MALvB,WAAAnH,CAAAC,G,uDAQUC,KAAAkH,YAAsB,EACrBlH,KAAAmH,aAAuB,EACvBnH,KAAAoH,aAAuB,GACvBpH,KAAAqH,cAA0B,GAC3BrH,KAAAsH,MAAgB,EAEhBtH,KAAAuH,eAAiB,WACjBvH,KAAAwH,aAAe,SACfxH,KAAAyH,qBAAuB,iBACvBzH,KAAA0H,SAAW,Y,CAGnB,eAAAC,CAAgB/B,GACd,GAAGA,EAAE3D,OAAQ,CACXjC,KAAKoH,aAAeQ,SAAShC,EAAE3D,OAAOsB,M,KACjC,CACLvD,KAAKoH,aAAe,E,EAIxB,gBAAAS,GACE7H,KAAK8H,8BACL,IAAIC,EAAoB/H,KAAKgI,GAAG7G,WAAWC,cAAc,eACzD,IAAI6G,EAAYF,EAAkB3G,cAAc,SAChDpB,KAAKkI,mBAAmBD,EAAW,K,CAIrC,sBAAAE,GACE,GAAIC,MAAMpI,KAAKkH,aAAc,CAC3BlH,KAAKkH,YAAc,C,CAErB,MAAMI,EAAQtH,KAAKsH,OAAStH,KAAKoH,aAAepH,KAAKoH,aAAepH,KAAKsH,MACzE,MAAMF,EAAepH,KAAKoH,aAC1B,MAAMiB,EAAkBC,KAAKC,KAAKjB,EAAQF,GAE1C,GAAIpH,KAAKkH,aAAe,EAAG,CACzBlH,KAAKmH,aAAe,C,MACf,GAAInH,KAAKkH,YAAcmB,EAAiB,CAC7CrI,KAAKmH,aAAekB,C,MACfrI,KAAKmH,aAAenH,KAAKkH,YAEhClH,KAAKqH,cAAgB3C,MAAMC,KAAK,CAAEd,OAAQwE,IAAmB,CAACG,EAAG7E,IAAUA,EAAQ,G,CAGrF,iBAAAuB,GACElF,KAAKmI,wB,CAGP,kBAAAM,GACE,IAAIV,EAAoB/H,KAAKgI,GAAG7G,WAAWC,cAAc,eACzD,IAAIsH,EAAYX,EAAkB1E,iBAAiB,MACnDrD,KAAK2I,6BAA6BD,EAAWX,GAE7C,GAAIA,EAAkBa,QAAQ5I,KAAK0H,UAAY1H,KAAKqH,cAAe,CACjEU,EAAkBa,QAAQ5I,KAAK0H,UAAYK,EAAkBa,QAAQ5I,KAAK0H,S,MACrEK,EAAkBa,QAAQ5I,KAAK0H,UAAY,EAElD1H,KAAK6I,WAAWd,EAAmB,M,CAGrC,mBAAAe,GACE9I,KAAKmI,wB,CAGP,mBAAAY,CAAoBC,GAClB,IAAI9B,EAAc8B,EAAa,EAC/B,IAAIC,EAAajJ,KAAKqH,cAAcxD,OACpC,IAAIqF,EAAWF,IAAe,EAAI,KAAOA,EACzC,IAAIG,EAAWH,EAAa,EAAIC,EAAa,KAAOD,EAAa,EACjE,IAAI5B,EAAepH,KAAKoH,aACxBpH,KAAKoJ,cAAclG,KAAK,CAAEgE,cAAa+B,aAAYC,WAAUC,WAAU/B,gB,CAGzE,4BAAAuB,CAA6BD,EAAWW,GACtCX,EAAUpG,SAASsB,IACjBA,EAAK0F,iBAAiB,SAAU1D,IAC9B,IAAI2D,EAASF,EACb,IAAIX,EAAYa,EAAOlG,iBAAiB,MACxCkG,EAAOX,QAAQ5I,KAAK0H,UAAYhD,MAAMC,KAAK+D,GAAW9D,QAAQgB,EAAE4D,eAChExJ,KAAK6I,WAAWU,EAAQ,MAAM,GAC9B,G,CAIN,cAAAE,CAAeJ,GACb,IAAIX,EAAYW,EAAoBhG,iBAAiB,MAErDgG,EAAoBT,QAAQ5I,KAAK0H,UAAYhD,MAAMC,KAAK+D,GAAW9D,QAAQyE,EAAoBjI,cAAc,YAE7GiI,EAAoBjI,cAAc,SAASkI,iBAAiB,SAAU1D,GAAM5F,KAAKkI,mBAAmBtC,EAAG,SACvGyD,EAAoBjI,cAAc,SAASkI,iBAAiB,SAAU1D,GAAM5F,KAAKkI,mBAAmBtC,EAAG,SAEvG5F,KAAK2I,6BAA6BD,EAAWW,E,CAG/C,kBAAAnB,CAAmBtC,EAAG8D,GACpB,IAAI1B,EAAKpC,EACT,UAAWA,EAAEjE,SAAW,SAAU,CAChCqG,EAAKpC,EAAEjE,M,CAGT,IAAKqG,EAAG2B,UAAUC,SAAS5J,KAAKuH,gBAAiB,CAC/C,IAAIgC,EAASvB,EAAG6B,QAAQ,eACxB,IAAIb,EAAapB,SAAS2B,EAAOX,QAAQ5I,KAAK0H,UAAW,IACzDsB,GAAc,GAAKhB,EAAG2B,UAAUC,SAAS,SAAW,EAAI,GAExD,GAAIZ,KAAgB,EAAG,CACrBA,EAAa,C,CAGfO,EAAOX,QAAQ5I,KAAK0H,UAAYsB,EAChChJ,KAAK6I,WAAWU,EAAQG,E,EAI5B,UAAAb,CAAWiB,EAAYJ,GACrB,MAAML,EAAsBS,EAC5B,IAAIpB,EAAYW,EAAoBhG,iBAAiB,MACrD,IAAI2F,EAAapB,SAASyB,EAAoBT,QAAQ5I,KAAK0H,UAAW,IAEtEgB,EAAUpG,SAASsB,IACjBA,EAAK+F,UAAUI,OAAO/J,KAAKwH,cAC3B5D,EAAK+F,UAAUI,OAAO/J,KAAKyH,qBAAqB,IAGlD,GAAIiC,GAAgB1J,KAAKmH,aAAe,EAAG,CACzC6B,EAAaV,KAAK0B,MAAMhK,KAAKmH,aAAe,GAC5CkC,EAAoBT,QAAQ5I,KAAK0H,UAAYsB,C,CAG/ChJ,KAAK+I,oBAAoBC,GAEzBN,EAAUM,GAAYW,UAAUM,IAAIjK,KAAKwH,cAEzC,GAAIwB,IAAe,EAAG,CACpBK,EAAoBjI,cAAc,SAASuI,UAAUM,IAAIjK,KAAKuH,gBAC9D8B,EAAoBjI,cAAc,SAAS8I,SAAW,I,KAEjD,CACLxB,EAAUM,EAAa,GAAGW,UAAUM,IAAIjK,KAAKyH,sBAC7C4B,EAAoBjI,cAAc,SAASuI,UAAUI,OAAO/J,KAAKuH,gBACjE8B,EAAoBjI,cAAc,SAAS8I,SAAW,K,CAGxD,GAAIlB,IAAgBN,EAAU7E,OAAS,EAAI,CACzCwF,EAAoBjI,cAAc,SAASuI,UAAUM,IAAIjK,KAAKuH,gBAC9D8B,EAAoBjI,cAAc,SAAS8I,SAAW,I,KAEjD,CACLb,EAAoBjI,cAAc,SAASuI,UAAUI,OAAO/J,KAAKuH,gBACjE8B,EAAoBjI,cAAc,SAAS8I,SAAW,K,EAI1D,2BAAApC,GACE,IAAIC,EAAoB/H,KAAKgI,GAAG7G,WAAWC,cAAc,eACzDpB,KAAKyJ,eAAe1B,E,CAGtB,MAAA5C,GACE,OACEC,EAAA,OAAAN,IAAA,wDAAgB,eAAc,aAAa9E,KAAKkH,YAAa7B,MAAM,aACjED,EAAA,OAAAN,IAAA,2CAAKO,MAAM,2BACTD,EAAA,OAAAN,IAAA,2CAAKO,MAAM,yBAAuB,oBAClCD,EAAA,OAAAN,IAAA,2CAAKO,MAAM,yBACTD,EAAA,cAAAN,IAAA,2CACE3E,MAAM,YACND,KAAK,IACLD,YAAY,QAAO,cACP,QAAO,2BACM,YACzBiK,SAAU,MACVnG,MAAO,MAAK,gBACE,QACdR,MAAM,GAAE,oBACU,cAClB4G,QAAQ,yJAId/E,EAAA,OAAAN,IAAA,2CAAKO,MAAM,wBACTD,EAAA,OAAAN,IAAA,2CAAKO,MAAM,yBACTD,EAAA,OAAAN,IAAA,2CAAKO,MAAM,cACTD,EAAA,mBAAAN,IAAA,2CAAiBzE,QAAQ,YAAYgF,MAAM,OAAO+E,MAAM,UAAUzE,KAAK,kBACvEP,EAAA,MAAAN,IAAA,4CACG9E,KAAKqH,cAActE,KAAKa,GACvBwB,EAAA,MAAIC,MAAO,GAAGrF,KAAKmH,eAAiBvD,EAAO,SAAW,MAAMwB,EAAA,KAAGiF,KAAMjK,WAAYwD,OAErFwB,EAAA,mBAAAN,IAAA,2CAAiBO,MAAM,OAAOhF,QAAQ,YAAY+J,MAAM,UAAUzE,KAAK,sB","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-32fc3ce3.entry.js → p-473fefdf.entry.js}

@@ -1,2 +1,2 @@
-import{r,h as o}from"./p-6b122987.js";const s=".dropdown-separator{height:1px;background-color:#EEEDED;margin:8px 16px}";const a=s;const c=class{constructor(o){r(this,o)}render(){return o("div",{key:"2c7435f309112c640c3ff68a244d3c663ceb5b7a",class:"dropdown-separator"})}};c.style=a;export{c as ifx_dropdown_separator};
-//# sourceMappingURL=p-32fc3ce3.entry.js.map
+import{r,h as o}from"./p-f619bff3.js";const s=".dropdown-separator{height:1px;background-color:#EEEDED;margin:8px 16px}";const a=s;const c=class{constructor(o){r(this,o)}render(){return o("div",{key:"2c7435f309112c640c3ff68a244d3c663ceb5b7a",class:"dropdown-separator"})}};c.style=a;export{c as ifx_dropdown_separator};
+//# sourceMappingURL=p-473fefdf.entry.js.map

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

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as s}from"./p-f619bff3.js";const i="";const l=i;const h=class{constructor(s){e(this,s);this.ifxFilterSelect=t(this,"ifxFilterSelect",7);this.type="text";this.filterValues=[]}handleTextInputChange(e){const t=e.target;const s=t.value;this.ifxFilterSelect.emit({filterName:this.filterName,filterValues:[s],type:this.type})}handleSingleSelectChange(e){const t=e.detail.value;this.ifxFilterSelect.emit({filterName:this.filterName,filterValues:[t],type:this.type})}handleMultiselectOptionChange(e){this.filterValues=e.detail;this.ifxFilterSelect.emit({filterName:this.filterName,filterValues:this.filterValues,type:this.type})}render(){switch(this.type){case"text":return s("ifx-text-field",{error:false,disabled:false,placeholder:this.placeholder,onIfxInput:e=>this.handleTextInputChange(e)},this.filterLabel);case"single-select":return s("ifx-select",{placeholder:"true","search-enabled":"true","search-placeholder-value":"Search...",onIfxSelect:e=>this.handleSingleSelectChange(e),"ifx-placeholder-value":this.placeholder,"ifx-label":this.filterLabel,"ifx-options":this.options});case"multi-select":return s("ifx-multiselect",{label:this.filterLabel,placeholder:this.placeholder,options:this.options,onIfxSelect:e=>this.handleMultiselectOptionChange(e)});default:return null}}};h.style=l;export{h as ifx_set_filter};
+//# sourceMappingURL=p-4aedcac0.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["setFilterCss","IfxSetFilterStyle0","SetFilter","constructor","hostRef","this","type","filterValues","handleTextInputChange","event","target","value","ifxFilterSelect","emit","filterName","handleSingleSelectChange","detail","handleMultiselectOptionChange","render","h","error","disabled","placeholder","onIfxInput","filterLabel","onIfxSelect","options","label"],"sources":["src/components/table-advanced-version/set-filter/set-filter.scss?tag=ifx-set-filter&encapsulation=shadow","src/components/table-advanced-version/set-filter/setFilter.tsx"],"sourcesContent":["/* set-filter.css */\n\n","// SetFilter.tsx\nimport { Component, h, Event, EventEmitter, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-set-filter',\n  styleUrl: 'set-filter.scss',\n  shadow: true\n})\nexport class SetFilter {\n  @Prop() filterName: string;\n  @Prop() filterLabel: string;\n  @Prop() placeholder: string;\n  @Prop() type: 'text' | 'single-select' | 'multi-select' = 'text';\n  @Prop() options: any[] | string;\n  @State() filterValues: string[] = [];\n\n  @Event() ifxFilterSelect: EventEmitter;\n\n\n  handleTextInputChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    const value = target.value;\n    this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: [value], type: this.type }); // Emit an array for consistency with the multi select component\n\n  }\n\n  handleSingleSelectChange(event: CustomEvent) {\n    const value = event.detail.value;\n    this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: [value], type: this.type }); // Emit an array for consistency with the multi select component\n  }\n\n\n  handleMultiselectOptionChange(event: CustomEvent) {\n    this.filterValues = event.detail; // Assuming that ifx-multiselect emits an array of selected options\n    this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: this.filterValues, type: this.type });\n  }\n\n\n  render() {\n    switch (this.type) {\n      case 'text':\n        return (\n          <ifx-text-field error={false} disabled={false} placeholder={this.placeholder}\n            onIfxInput={event => this.handleTextInputChange(event)}\n          >{this.filterLabel}</ifx-text-field>\n        );\n      case 'single-select':\n        return (\n          <ifx-select\n            placeholder=\"true\"\n            search-enabled=\"true\"\n            search-placeholder-value=\"Search...\"\n            onIfxSelect={event => this.handleSingleSelectChange(event)}\n            ifx-placeholder-value={this.placeholder}\n            ifx-label={this.filterLabel}\n            ifx-options={this.options}\n          ></ifx-select>\n        );\n      case 'multi-select':\n        return (\n          <ifx-multiselect\n            label={this.filterLabel}\n            placeholder={this.placeholder}\n            options={this.options}\n            onIfxSelect={event => this.handleMultiselectOptionChange(event)}\n          />\n        );\n      default:\n        return null;\n    }\n  }\n}\n\n"],"mappings":"kDAAA,MAAMA,EAAe,GACrB,MAAAC,EAAeD,E,MCOFE,EAAS,MALtB,WAAAC,CAAAC,G,2DASUC,KAAAC,KAAkD,OAEjDD,KAAAE,aAAyB,E,CAKlC,qBAAAC,CAAsBC,GACpB,MAAMC,EAASD,EAAMC,OACrB,MAAMC,EAAQD,EAAOC,MACrBN,KAAKO,gBAAgBC,KAAK,CAAEC,WAAYT,KAAKS,WAAYP,aAAc,CAACI,GAAQL,KAAMD,KAAKC,M,CAI7F,wBAAAS,CAAyBN,GACvB,MAAME,EAAQF,EAAMO,OAAOL,MAC3BN,KAAKO,gBAAgBC,KAAK,CAAEC,WAAYT,KAAKS,WAAYP,aAAc,CAACI,GAAQL,KAAMD,KAAKC,M,CAI7F,6BAAAW,CAA8BR,GAC5BJ,KAAKE,aAAeE,EAAMO,OAC1BX,KAAKO,gBAAgBC,KAAK,CAAEC,WAAYT,KAAKS,WAAYP,aAAcF,KAAKE,aAAcD,KAAMD,KAAKC,M,CAIvG,MAAAY,GACE,OAAQb,KAAKC,MACX,IAAK,OACH,OACEa,EAAA,kBAAgBC,MAAO,MAAOC,SAAU,MAAOC,YAAajB,KAAKiB,YAC/DC,WAAYd,GAASJ,KAAKG,sBAAsBC,IAChDJ,KAAKmB,aAEX,IAAK,gBACH,OACEL,EAAA,cACEG,YAAY,OAAM,iBACH,OAAM,2BACI,YACzBG,YAAahB,GAASJ,KAAKU,yBAAyBN,GAAM,wBACnCJ,KAAKiB,YAAW,YAC5BjB,KAAKmB,YAAW,cACdnB,KAAKqB,UAGxB,IAAK,eACH,OACEP,EAAA,mBACEQ,MAAOtB,KAAKmB,YACZF,YAAajB,KAAKiB,YAClBI,QAASrB,KAAKqB,QACdD,YAAahB,GAASJ,KAAKY,8BAA8BR,KAG/D,QACE,OAAO,K","ignoreList":[]}

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

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

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

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

package/dist/infineon-design-system-stencil/{p-db09429f.entry.js → p-4e3106ec.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as r,h as i}from"./p-6b122987.js";const t=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert__info-wrapper .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.success{border:1px solid #4CA460}.alert.success .icon-wrapper{background-color:#4CA460;color:#FFFFFF}.alert.danger{border:1px solid #CD002F}.alert.danger .icon-wrapper{background-color:#CD002F;color:#FFFFFF}.alert.warning{border:1px solid #E16B25}.alert.warning .icon-wrapper{background-color:#E16B25;color:#FFFFFF}.close-icon-wrapper ifx-icon:hover{cursor:pointer}';const o=t;const a=class{constructor(i){e(this,i);this.ifxClose=r(this,"ifxClose",7);this.alertTypeDescription={primary:"Neutral alert",success:"Success Alert",danger:"Error Alert",warning:"Warning Alert",info:"Neutral alert"};this.variant="primary";this.icon=undefined;this.closable=true;this.AriaLive="assertive";this.uniqueId=undefined}handleClose(){this.ifxClose.emit()}renderCloseButton(){return i("div",{class:"close-icon-wrapper"},i("button",{onClick:this.handleClose.bind(this),"aria-label":"Dismiss alert"},i("ifx-icon",{icon:"cross-16"})))}generateUniqueId(e="id"){return`${e}-${Math.random().toString(36).substring(2,9)}`}componentWillLoad(){if(!this.uniqueId){this.uniqueId=this.generateUniqueId("alert")}}render(){return this.variant==="info"?i("div",{class:"alert__info-wrapper",role:"alert","aria-live":this.AriaLive,"aria-describedby":this.alertTypeDescription[this.variant],"aria-labelledby":"alert-text alert-description"},i("div",{class:"info__text-wrapper"},i("div",{class:"info__headline-wrapper"},i("slot",{name:"headline"})),i("div",{id:`alert-description-${this.uniqueId}`,class:"info__description-wrapper"},i("slot",{name:"desc"}))),this.closable?this.renderCloseButton():null):i("div",{class:`alert ${this.variant}`,role:"alert"},this.icon&&i("div",{class:"icon-wrapper"},i("ifx-icon",{icon:this.icon})),i("div",{class:"alert-text",id:`alert-text-${this.uniqueId}`},i("slot",null)),this.closable?this.renderCloseButton():null)}};a.style=o;export{a as ifx_alert};
-//# sourceMappingURL=p-db09429f.entry.js.map
+import{r as e,c as r,h as i}from"./p-f619bff3.js";const t=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert__info-wrapper .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.success{border:1px solid #4CA460}.alert.success .icon-wrapper{background-color:#4CA460;color:#FFFFFF}.alert.danger{border:1px solid #CD002F}.alert.danger .icon-wrapper{background-color:#CD002F;color:#FFFFFF}.alert.warning{border:1px solid #E16B25}.alert.warning .icon-wrapper{background-color:#E16B25;color:#FFFFFF}.close-icon-wrapper ifx-icon:hover{cursor:pointer}';const o=t;const a=class{constructor(i){e(this,i);this.ifxClose=r(this,"ifxClose",7);this.variant="primary";this.closable=true;this.AriaLive="assertive";this.alertTypeDescription={primary:"Neutral alert",success:"Success Alert",danger:"Error Alert",warning:"Warning Alert",info:"Neutral alert"}}handleClose(){this.ifxClose.emit()}renderCloseButton(){return i("div",{class:"close-icon-wrapper"},i("button",{onClick:this.handleClose.bind(this),"aria-label":"Dismiss alert"},i("ifx-icon",{icon:"cross-16"})))}generateUniqueId(e="id"){return`${e}-${Math.random().toString(36).substring(2,9)}`}componentWillLoad(){if(!this.uniqueId){this.uniqueId=this.generateUniqueId("alert")}}render(){return this.variant==="info"?i("div",{class:"alert__info-wrapper",role:"alert","aria-live":this.AriaLive,"aria-describedby":this.alertTypeDescription[this.variant],"aria-labelledby":"alert-text alert-description"},i("div",{class:"info__text-wrapper"},i("div",{class:"info__headline-wrapper"},i("slot",{name:"headline"})),i("div",{id:`alert-description-${this.uniqueId}`,class:"info__description-wrapper"},i("slot",{name:"desc"}))),this.closable?this.renderCloseButton():null):i("div",{class:`alert ${this.variant}`,role:"alert"},this.icon&&i("div",{class:"icon-wrapper"},i("ifx-icon",{icon:this.icon})),i("div",{class:"alert-text",id:`alert-text-${this.uniqueId}`},i("slot",null)),this.closable?this.renderCloseButton():null)}};a.style=o;export{a as ifx_alert};
+//# sourceMappingURL=p-4e3106ec.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["alertCss","IfxAlertStyle0","Alert","constructor","hostRef","this","variant","closable","AriaLive","alertTypeDescription","primary","success","danger","warning","info","handleClose","ifxClose","emit","renderCloseButton","h","class","onClick","bind","icon","generateUniqueId","prefix","Math","random","toString","substring","componentWillLoad","uniqueId","render","role","name","id"],"sources":["src/components/alert/alert.scss?tag=ifx-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.alert__info-wrapper {\n  display: flex;\n  padding: 16px 24px;\n  font-family: var(--ifx-font-family);\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n  & .info__text-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: tokens.$ifxSpace100;\n    width: 100%;\n\n    & .info__headline-wrapper {\n      display: -webkit-box;\n      -webkit-line-clamp: 1;\n      line-clamp: 1;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    & .info__headline-wrapper,\n    .info__description-wrapper {\n      color: #1D1D1D;\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 24px;\n\n      ::slotted(p) {\n        padding: 0;\n        margin: 0;\n      }\n    }\n\n    & .info__description-wrapper {\n      font-weight: 400;\n    }\n  }\n\n  & .close-icon-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: flex-start;\n    //min-width: tokens.$ifxSize500;\n\n    & button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      color: tokens.$ifxColorBaseBlack;\n      height: tokens.$ifxSize300;\n      width: tokens.$ifxSize300;\n\n\n      &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 2px;\n      }\n    }\n  }\n}\n\n.alert {\n  display: flex;\n  border: 1px solid tokens.$ifxColorOcean500;\n  border-radius: tokens.$ifxBorderRadius12;\n  color: tokens.$ifxColorBaseBlack;\n  background-color: tokens.$ifxColorBaseWhite;\n  font-family: var(--ifx-font-family);\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n  & .close-icon-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: tokens.$ifxSize500;\n\n    & button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      color: tokens.$ifxColorBaseBlack;\n      height: tokens.$ifxSize300;\n      width: tokens.$ifxSize300;\n\n      &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 2px;\n      }\n    }\n  }\n\n  & .icon-wrapper {\n    position: relative;\n    min-width: tokens.$ifxSize600;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  & .alert-text {\n    font-size: 16px;\n    width: 100%;\n    padding: 12px 0px 12px 12px;\n    color: tokens.$ifxColorBaseBlack;\n\n    white-space: pre-wrap;\n    /* wraps text at spaces and within words */\n    word-wrap: break-word;\n    /* breaks text within a word if necessary */\n    overflow-wrap: anywhere;\n    /* breaks text at arbitrary points when needed */\n  }\n\n  &.primary {\n    border: 1px solid tokens.$ifxColorOcean500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorOcean500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.success {\n    border: 1px solid tokens.$ifxColorGreen500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorGreen500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.danger {\n    border: 1px solid tokens.$ifxColorRed500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorRed500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.warning {\n    border: 1px solid tokens.$ifxColorOrange500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorOrange500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n}\n\n.close-icon-wrapper {\n  & ifx-icon {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n}","import { Component, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert {\n  @Prop() variant: 'primary' | 'success' | 'danger' | 'warning' | 'info' = 'primary';\n  @Prop() icon: string;\n  @Event() ifxClose: EventEmitter;\n  @Prop() closable: boolean = true;\n  @Prop() AriaLive = 'assertive';\n  @State() uniqueId: string;\n\n  alertTypeDescription = {\n    \"primary\": 'Neutral alert',\n    \"success\": 'Success Alert',\n    \"danger\": 'Error Alert',\n    \"warning\": 'Warning Alert',\n    \"info\": 'Neutral alert',\n  };\n\n  handleClose() {\n    this.ifxClose.emit();\n  }\n\n  renderCloseButton() {\n    return (\n      <div class=\"close-icon-wrapper\">\n        <button onClick={this.handleClose.bind(this)} aria-label=\"Dismiss alert\">\n          <ifx-icon icon=\"cross-16\" />\n        </button>\n      </div>\n    );\n  }\n\n  generateUniqueId(prefix = 'id') {\n    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n  }\n\n  componentWillLoad() { \n    if (!this.uniqueId) {\n      this.uniqueId = this.generateUniqueId('alert');\n    }\n  }\n\n  render() {\n    return this.variant === 'info' ? (\n      <div class=\"alert__info-wrapper\" role=\"alert\" aria-live={this.AriaLive} aria-describedby={this.alertTypeDescription[this.variant]} aria-labelledby=\"alert-text alert-description\">\n        <div class=\"info__text-wrapper\">\n          <div class=\"info__headline-wrapper\">\n            <slot name=\"headline\" />\n          </div>\n          <div id={`alert-description-${this.uniqueId}`} class=\"info__description-wrapper\">\n            <slot name=\"desc\" />\n          </div>\n        </div>\n        {this.closable ? this.renderCloseButton() : null}\n      </div>\n    ) : (\n      <div class={`alert ${this.variant}`} role=\"alert\">\n        {this.icon && (\n          <div class=\"icon-wrapper\">\n            <ifx-icon icon={this.icon} />\n          </div>\n        )}\n        <div class=\"alert-text\" id={`alert-text-${this.uniqueId}`}>\n          <slot />\n        </div>\n        {this.closable ? this.renderCloseButton() : null}\n      </div>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAW,qoFACjB,MAAAC,EAAeD,E,MCMFE,EAAK,MALlB,WAAAC,CAAAC,G,6CAMUC,KAAAC,QAAiE,UAGjED,KAAAE,SAAoB,KACpBF,KAAAG,SAAW,YAGnBH,KAAAI,qBAAuB,CACrBC,QAAW,gBACXC,QAAW,gBACXC,OAAU,cACVC,QAAW,gBACXC,KAAQ,gB,CAGV,WAAAC,GACEV,KAAKW,SAASC,M,CAGhB,iBAAAC,GACE,OACEC,EAAA,OAAKC,MAAM,sBACTD,EAAA,UAAQE,QAAShB,KAAKU,YAAYO,KAAKjB,MAAK,aAAa,iBACvDc,EAAA,YAAUI,KAAK,c,CAMvB,gBAAAC,CAAiBC,EAAS,MACxB,MAAO,GAAGA,KAAUC,KAAKC,SAASC,SAAS,IAAIC,UAAU,EAAG,I,CAG9D,iBAAAC,GACE,IAAKzB,KAAK0B,SAAU,CAClB1B,KAAK0B,SAAW1B,KAAKmB,iBAAiB,Q,EAI1C,MAAAQ,GACE,OAAO3B,KAAKC,UAAY,OACtBa,EAAA,OAAKC,MAAM,sBAAsBa,KAAK,QAAO,YAAY5B,KAAKG,SAAQ,mBAAoBH,KAAKI,qBAAqBJ,KAAKC,SAAQ,kBAAkB,gCACjJa,EAAA,OAAKC,MAAM,sBACTD,EAAA,OAAKC,MAAM,0BACTD,EAAA,QAAMe,KAAK,cAEbf,EAAA,OAAKgB,GAAI,qBAAqB9B,KAAK0B,WAAYX,MAAM,6BACnDD,EAAA,QAAMe,KAAK,WAGd7B,KAAKE,SAAWF,KAAKa,oBAAsB,MAG9CC,EAAA,OAAKC,MAAO,SAASf,KAAKC,UAAW2B,KAAK,SACvC5B,KAAKkB,MACJJ,EAAA,OAAKC,MAAM,gBACTD,EAAA,YAAUI,KAAMlB,KAAKkB,QAGzBJ,EAAA,OAAKC,MAAM,aAAae,GAAI,cAAc9B,KAAK0B,YAC7CZ,EAAA,cAEDd,KAAKE,SAAWF,KAAKa,oBAAsB,K","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as s}from"./p-f619bff3.js";const o=".card-image{width:100%;height:100%;vertical-align:bottom;object-fit:cover}";const e=o;const c=class{constructor(s){t(this,s);this.imgPosition=i(this,"imgPosition",7)}handlePosition(t){this.imgPosition.emit(t)}componentWillLoad(){this.handlePosition(this.position)}componentDidUpdate(){this.handlePosition(this.position)}render(){return s("img",{key:"e08992cdb9c62e7b4f98d58d39457702233ee300",src:this.src,alt:this.alt,class:"card-image"})}};c.style=e;export{c as ifx_card_image};
+//# sourceMappingURL=p-4f959419.entry.js.map

package/dist/infineon-design-system-stencil/{p-51c4e760.entry.js.map → p-4f959419.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["cardImageCss","IfxCardImageStyle0","CardImage","handlePosition","position","this","imgPosition","emit","componentWillLoad","componentDidUpdate","render","h","key","src","alt","class"],"sources":["src/components/card/card-image/card-image.scss?tag=ifx-card-image&encapsulation=shadow","src/components/card/card-image/card-image.tsx"],"sourcesContent":[".card-image {\n  width: 100%;\n  height: 100%;\n  vertical-align: bottom;\n  object-fit: cover;\n}","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-card-image',\n  styleUrl: 'card-image.scss',\n  shadow: true,\n})\n\nexport class CardImage {\n  @Prop() src: string;\n  @Prop() alt: string;\n  @Prop() position: string;\n  @Event() imgPosition: EventEmitter;\n\n  handlePosition(position) {\n    this.imgPosition.emit(position)\n  }\n\n  componentWillLoad() {\n    this.handlePosition(this.position)\n  }\n\n  componentDidUpdate() {\n    this.handlePosition(this.position)\n  }\n\n  render() {\n    return (\n      <img src={this.src} alt={this.alt} class=\"card-image\" />\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAe,6EACrB,MAAAC,EAAeD,E,MCOFE,EAAS,M,gIAMpB,cAAAC,CAAeC,GACbC,KAAKC,YAAYC,KAAKH,E,CAGxB,iBAAAI,GACEH,KAAKF,eAAeE,KAAKD,S,CAG3B,kBAAAK,GACEJ,KAAKF,eAAeE,KAAKD,S,CAG3B,MAAAM,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,IAAKR,KAAKQ,IAAKC,IAAKT,KAAKS,IAAKC,MAAM,c","ignoreList":[]}
+{"version":3,"names":["cardImageCss","IfxCardImageStyle0","CardImage","handlePosition","position","this","imgPosition","emit","componentWillLoad","componentDidUpdate","render","h","key","src","alt","class"],"sources":["src/components/card/card-image/card-image.scss?tag=ifx-card-image&encapsulation=shadow","src/components/card/card-image/card-image.tsx"],"sourcesContent":[".card-image {\n  width: 100%;\n  height: 100%;\n  vertical-align: bottom;\n  object-fit: cover;\n}","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-card-image',\n  styleUrl: 'card-image.scss',\n  shadow: true,\n})\n\nexport class CardImage {\n  @Prop() src: string;\n  @Prop() alt: string;\n  @Prop() position: string;\n  @Event() imgPosition: EventEmitter;\n\n  handlePosition(position) {\n    this.imgPosition.emit(position)\n  }\n\n  componentWillLoad() {\n    this.handlePosition(this.position)\n  }\n\n  componentDidUpdate() {\n    this.handlePosition(this.position)\n  }\n\n  render() {\n    return (\n      <img src={this.src} alt={this.alt} class=\"card-image\" />\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAe,6EACrB,MAAAC,EAAeD,E,MCOFE,EAAS,M,kEAMpB,cAAAC,CAAeC,GACbC,KAAKC,YAAYC,KAAKH,E,CAGxB,iBAAAI,GACEH,KAAKF,eAAeE,KAAKD,S,CAG3B,kBAAAK,GACEJ,KAAKF,eAAeE,KAAKD,S,CAG3B,MAAAM,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,IAAKR,KAAKQ,IAAKC,IAAKT,KAAKS,IAAKC,MAAM,c","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-91f91586.entry.js → p-520ddc60.entry.js}

@@ -1,2 +1,2 @@
-import{r as n,c as a,h as e,g as t}from"./p-6b122987.js";const r=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{width:100%;display:block}.navbar__wrapper{font-family:var(--ifx-font-family);height:63px;position:sticky;z-index:1030;border-bottom:1px solid #EEEDED}.navbar__wrapper.fixed{border-bottom:none}.navbar__main-container{position:absolute;top:0;width:100%;transition:all 1s;z-index:1020}.navbar__main-container.fixed{position:fixed}.navbar__main-container.fixed .navbar__container{border-bottom:1px solid #EEEDED}.navbar__main-container.show{height:100vh;bottom:0;background-color:rgba(29, 29, 29, 0.2);transition:1s;z-index:1}.navbar__sidebar{box-sizing:border-box;position:fixed;right:-100%;top:64px;display:flex;flex-direction:column;align-items:flex-start;width:375px;height:calc(100vh - 64px);background-color:#FFFFFF;transition:right 1s;z-index:1030}.navbar__sidebar.show{right:0;transition:right 1s}.navbar__sidebar .navbar__sidebar-top-row{display:flex;padding:var(--borderRadius-none, 0px) var(--space-300, 24px) 30px var(--space-300, 24px);flex-direction:column;align-items:flex-start;gap:var(--space-200, 16px);flex:1 0 0;align-self:stretch;overflow-y:auto}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper{display:flex;padding-top:var(--space-200, 16px);flex-direction:column;align-items:flex-start;align-self:stretch;gap:16px}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper.expand{align-items:initial}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper .navbar__sidebar-top-row-item{display:flex;padding:var(--space-200, 0px) var(--space-50, 4px) var(--space-200, 0px) 0px;align-items:center;gap:var(--space-100, 8px);align-self:stretch;justify-content:space-between}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper .navbar__sidebar-top-row-item .navbar__sidebar-top-row-item-icon-wrapper ifx-icon{vertical-align:middle}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper .navbar__sidebar-top-row-item:hover{cursor:pointer}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper .navbar__sidebar-top-row-item .navbar__sidebar-top-row-item-label{color:var(--color-base-black, #1D1D1D);font-family:"Source Sans 3";font-size:16px;font-style:normal;font-weight:400;line-height:24px}.navbar__sidebar .navbar__sidebar-bottom-row{display:none;padding:var(--space-150, 12px) var(--space-300, 24px) var(--space-150, 12px) var(--space-200, 16px);flex-direction:column;align-items:flex-start;align-self:stretch;background:var(--color-engineering-100, #F7F7F7);border-top:1px solid var(--color-engineering-200, #EEEDED);gap:10px;max-height:160px;overflow-y:auto}.navbar__sidebar .navbar__sidebar-bottom-row.show{display:flex}.navbar__sidebar .navbar__sidebar-bottom-row .navbar__sidebar-bottom-row-item{display:flex;height:40px;padding-right:var(--space-50, 4px);align-items:center;gap:var(--space-100, 8px);flex:1 0 0}.navbar__sidebar .navbar__sidebar-bottom-row .navbar__sidebar-bottom-row-item .navbar__sidebar-bottom-row-item-label{color:var(--color-base-black, #1D1D1D);font-family:"Source Sans 3";font-size:16px;font-style:normal;font-weight:400;line-height:24px}.navbar__sidebar .navbar__sidebar-bottom-row .navbar__sidebar-bottom-row-item .navbar__sidebar-bottom-row-item-icon-wrapper{display:flex;align-items:center}.navbar__sidebar .navbar__sidebar-content-products,.navbar__sidebar .navbar__sidebar-content-main{display:flex;flex-direction:column;align-items:flex-start;padding:0px;gap:24px;flex:none;order:0;align-self:stretch;flex-grow:0}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-header,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-about-header,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-header,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-about-header{display:flex;flex-direction:row;align-items:center;padding:0px;gap:16px;flex:none;order:0;align-self:stretch;flex-grow:0;color:#BFBBBB}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-header span,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-about-header span,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-header span,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-about-header span{color:#1D1D1D;font-weight:600;font-size:18px;line-height:28px;display:flex;align-items:center}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu{display:flex;flex-direction:column;align-items:flex-start;padding:0px;gap:16px;flex:none;order:1;flex-grow:0;width:100%}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-products-menu-item,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-products-menu-item,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-products-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-products-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item{display:flex;flex-direction:row;align-items:center;padding:0px;flex:none;order:0;flex-grow:0}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-products-menu-item a,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-products-menu-item a,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-products-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-products-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item a{text-decoration:none;font-style:normal;font-weight:400;font-size:16px;line-height:24px;display:flex;align-items:center;color:#1D1D1D}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item{color:#BFBBBB}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item a{font-style:normal;font-weight:600;font-size:18px;line-height:28px;display:flex;align-items:center;color:#1D1D1D;flex:none;order:0;flex-grow:1}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu{align-items:normal}.navbar__container{display:flex;justify-content:space-between;align-items:center;padding:8px 40px;gap:16px;background-color:#FFFFFF;font-family:var(--ifx-font-family)}.navbar__container.expanded{justify-content:initial}.navbar__container .navbar__container-search-field-wrapper{display:none}.navbar__container .navbar__container-search-field-wrapper.show{display:flex}.navbar__container .navbar__container-left{display:flex;flex-direction:row;align-items:center;padding:0;gap:16px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-left.hide{display:none}.navbar__container .navbar__container-left.expand{justify-content:initial;flex:1}.navbar__container .navbar__container-left.expand .navbar__container-left-content{align-items:initial;flex:1}.navbar__container .navbar__container-left.expand .navbar__container-left-content .navbar__container-left-content-navigation-group{justify-content:initial;flex:1}.navbar__container .navbar__container-left.expand .navbar__container-left-content .navbar__container-left-content-navigation-group .navbar__container-left-content-navigation-item-search-bar{flex:1}.navbar__container .navbar__container-left .navbar__container-left-logo{display:flex;flex-direction:row;align-items:center;padding:0px;gap:16px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-logo.hide{display:none}.navbar__container .navbar__container-left .navbar__container-left-logo h6{position:relative;margin:0;padding:0;font-style:normal;font-weight:600;font-size:16px;display:flex;align-items:center;color:#1D1D1D;flex:none;order:1;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-logo .navbar__container-left-logo-default{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:12px 0px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-logo .navbar__container-left-logo-default svg{width:91px;height:40px;flex:none;order:0;flex-grow:0;vertical-align:bottom}.navbar__container .navbar__container-left .navbar__container-left-logo .navbar__container-left-logo-divider{width:1px;height:32px;background:#EEEDED;flex:none;order:2;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-content{display:flex;flex-direction:row;justify-content:center;align-items:flex-start;padding:0px;flex:none;order:1;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-content .navbar__container-left-content-navigation-group{display:flex;flex-direction:row;align-items:center;padding:0px;gap:4px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-content .navbar__container-left-content-navigation-group .navbar__container-left-content-navigation-item-search-bar{display:flex;flex-direction:row;align-items:center;padding:0px 8px;flex:none;order:5;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-content .navbar__container-left-content-navigation-group .navbar__container-left-content-navigation-item{display:flex;flex-direction:row;align-items:center;padding:0px 8px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-content .navbar__container-left-content-navigation-group .navbar__container-left-content-navigation-item a{display:flex;align-items:center;font-weight:400;font-size:16px;line-height:24px;color:#1D1D1D;text-decoration:none;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;padding:0;gap:8px;flex:none;order:1;flex-grow:0}.navbar__container .navbar__container-right.hide{display:none}.navbar__container .navbar__container-right.expand{justify-content:initial;flex:1}.navbar__container .navbar__container-right.expand .navbar__container-right-content{align-items:initial;flex:1}.navbar__container .navbar__container-right.expand .navbar__container-right-content .navbar__container-right-content-navigation-group{justify-content:initial;flex:1}.navbar__container .navbar__container-right.expand .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar{flex:1}.navbar__container .navbar__container-right.expand .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-search-bar-icon-wrapper{flex:1}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:4px 0px 4px 16px;border-left:1px solid #BFBBBB;gap:16px;flex:none;order:1;flex-grow:0;width:41px;height:40px}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper.hide{display:none}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__burger-icon{display:flex;align-items:center}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__burger-icon:hover{cursor:pointer}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__burger-icon.close{display:none}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__cross-icon{display:none;align-items:center}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__cross-icon.show{display:flex}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__cross-icon.show:hover{cursor:pointer}.navbar__container .navbar__container-right .navbar__container-right-content{display:flex;flex-direction:column;align-items:flex-start;padding:0px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group{position:relative;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;padding:0px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar{display:flex;flex-direction:row;align-items:center;padding:0px 8px;gap:4px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item .navbar__container-right-content-navigation-item-search-bar-icon-wrapper,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile .navbar__container-right-content-navigation-item-search-bar-icon-wrapper,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-search-bar-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item .navbar__container-right-content-navigation-item-search-bar-icon-wrapper.isOpen,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile .navbar__container-right-content-navigation-item-search-bar-icon-wrapper.isOpen,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-search-bar-icon-wrapper.isOpen{position:absolute;top:10px}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item .navbar__container-right-content-navigation-item-navigation-profile,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile .navbar__container-right-content-navigation-item-navigation-profile,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-navigation-profile{position:relative;width:24px;height:24px;background:#0A8276;border-radius:100px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item .navbar__container-right-content-navigation-item-navigation-profile a,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile .navbar__container-right-content-navigation-item-navigation-profile a,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-navigation-profile a{position:absolute;width:22px;height:20px;left:calc(50% - 11px);top:calc(50% - 10px);font-style:normal;font-weight:600;font-size:14px;line-height:20px;text-decoration:none;display:flex;align-items:center;justify-content:center;text-align:center;color:#FFFFFF}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item .navbar__container-right-content-navigation-item-icon-wrapper,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile .navbar__container-right-content-navigation-item-icon-wrapper,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item a,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile a,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar a{font-style:normal;font-weight:400;font-size:14px;line-height:20px;color:#1D1D1D;text-decoration:none;display:flex;align-items:center;flex:none;order:1;flex-grow:0}@media screen and (max-width: 800px){.navbar__container{padding:0px 16px;height:64px;gap:initial}.navbar__container.expanded .navbar__container-right .navbar__burger-icon-wrapper{display:none}.navbar__container .navbar__container-left .navbar__container-left-content{display:none}.navbar__container .navbar__container-left .navbar__container-left-logo .navbar__container-left-logo-divider{display:none}.navbar__container .navbar__container-right{flex:1}.navbar__sidebar{width:0;transition:1s}}@media screen and (max-width: 500px){.navbar__sidebar.show{width:100%}}@media screen and (min-width: 500px){.navbar__sidebar.show{width:50%}}@media screen and (min-width: 800px){.navbar__wrapper{height:63px}.navbar__container{padding:0px 16px;height:63px;gap:initial}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper{display:none}.navbar__main-container.show{height:auto;background-color:inherit;transition:none}.navbar__sidebar{width:0;transition:1s}.navbar__sidebar.show{right:-100%}}@media screen and (min-width: 1024px){.navbar__wrapper{height:72px}.navbar__container{padding:0px 24px;height:72px}.navbar__container .navbar__container-left{gap:12px;display:flex}.navbar__container .navbar__container-left .navbar__container-left-content{display:flex}.navbar__container .navbar__container-left .navbar__container-left-logo-default svg{width:72.8px;height:32px}.navbar__main-container.show{height:auto;background-color:inherit;transition:none}}@media screen and (min-width: 1200px){.navbar__wrapper{height:80px}.navbar__container{padding:0px 32px;height:80px}.navbar__container .navbar__container-left .navbar__container-left-content{justify-content:inherit}.navbar__container .navbar__container-right .navbar__container-right-content{justify-content:inherit}}@media screen and (min-width: 1440px){.navbar__wrapper{height:80px}.navbar__container{padding:0px 40px;height:80px}.navbar__container .navbar__container-left .navbar__container-left-content{justify-content:center}.navbar__container .navbar__container-right .navbar__container-right-content{justify-content:inherit}}';const i=r;const o=class{constructor(e){n(this,e);this.ifxNavbarMobileMenuIsOpen=a(this,"ifxNavbarMobileMenuIsOpen",7);this.main=true;this.products=false;this.applications=false;this.design=false;this.support=false;this.about=false;this.applicationName="";this.hasLeftMenuItems=true;this.fixed=true;this.showLogoAndAppname=true;this.searchBarIsOpen=undefined;this.logoHref="";this.internalLogoHref="";this.logoHrefTarget="_self";this.internalLogoHrefTarget="_self"}addEventListenersToHandleCustomFocusState(){const n=this.el.shadowRoot.firstChild;if(!n){console.error("element not found");return}n.tabIndex=-1;const a=n.querySelectorAll("a");for(let n=0;n<a.length;n++){a[n].tabIndex=-1}const e=n.querySelector("slot");if(e){const n=e.assignedNodes();for(let a=0;a<n.length;a++){const e=n[a];if(e.nodeName==="IFX-NAVBAR-ITEM"){const n=e;const a=n===null||n===void 0?void 0:n.shadowRoot.querySelectorAll("a");for(let n=0;n<a.length;n++){a[n].tabIndex=-1}}}}}clearFirstLayerMenu(n){if(n.detail.action==="hideFirstLayer"){const a=this.getMobileMenuTop();for(let e=0;e<a.length;e++){if(!a[e].isSameNode(n.detail.component)){a[e].hideComponent()}}}if(n.detail.action==="hideSecondLayer"){const a=n.detail.parent;const e=a.children;a.toggleFirstLayerItem("remove","add");for(let a=0;a<e.length;a++){if(!e[a].isSameNode(n.detail.component)){e[a].hideComponent()}}}if(n.detail.action==="returnToSecondLayer"){const a=n.detail.parent;const e=a.children;a.toggleFirstLayerItem("add","remove");for(let a=0;a<e.length;a++){if(!e[a].isSameNode(n.detail.component)){e[a].showComponent()}}}if(n.detail.action==="show"){const a=this.el.querySelectorAll('[slot="left-item"]');for(let e=0;e<a.length;e++){if(!a[e].isSameNode(n.detail.component)){a[e].showComponent()}}}if(n.detail.action==="return"){const a=this.getMobileMenuTop();for(let e=0;e<a.length;e++){if(!a[e].isSameNode(n.detail.component)){a[e].showComponent()}}}}getWrappers(){const n=this.el.shadowRoot.querySelector(".navbar__container-right-content-navigation-item-search-bar-icon-wrapper");const a=this.el.shadowRoot.querySelector(".navbar__container-left-content-navigation-item-search-bar");const e=n.querySelector("slot");const t=a.querySelector("slot");const r=e.assignedNodes();const i=t.assignedNodes();const o=this.el.querySelector("ifx-navbar-profile");const _=this.el.querySelectorAll('[slot="left-item"]');const c=this.el.querySelectorAll('[slot="right-item"]');const b=this.el.shadowRoot.querySelector(".navbar__sidebar-top-row-wrapper");return{rightSideSlot:e,leftSideSlot:t,rightAssignedNodes:r,leftAssignedNodes:i,navbarProfile:o,leftMenuItems:_,rightMenuItems:c,topRowWrapper:b}}hideNavItems(){const{rightAssignedNodes:n,leftAssignedNodes:a,navbarProfile:e,leftMenuItems:t,rightMenuItems:r,topRowWrapper:i}=this.getWrappers();if(n.length!==0){this.searchBarIsOpen="right"}else if(a.length!==0){this.searchBarIsOpen="left"}if(e){e.hideComponent()}for(let n=0;n<t.length;n++){if(!i.classList.contains("expand")){t[n].hideComponent()}}for(let n=0;n<r.length;n++){if(i.classList.contains("expand")){if(!r[n].hideOnMobile){r[n].hideComponent()}}else{r[n].hideComponent()}}}showNavItems(){const{navbarProfile:n,leftMenuItems:a,rightMenuItems:e,topRowWrapper:t}=this.getWrappers();this.searchBarIsOpen=undefined;if(n){n.showComponent()}for(let n=0;n<a.length;n++){if(!t.classList.contains("expand")){a[n].showComponent()}}for(let n=0;n<e.length;n++){if(t.classList.contains("expand")){if(!e[n].hideOnMobile){e[n].showComponent()}}else{e[n].showComponent()}}}handleSearchBarToggle(n){if(n.detail){this.hideNavItems()}else if(!n.detail){this.showNavItems()}}toggleClass(n,a){n.classList.toggle(a)}handleSidebar(n){const a=n.currentTarget.closest(".navbar__burger-icon-wrapper");const e=a.querySelector(".navbar__burger-icon");const t=a.querySelector(".navbar__cross-icon");const r=n.currentTarget.closest(".navbar__main-container");const i=n.currentTarget.closest(".navbar__wrapper");const o=i.querySelector(".navbar__sidebar");this.toggleClass(i,"show");this.toggleClass(r,"show");this.toggleClass(o,"show");this.toggleClass(e,"close");this.toggleClass(t,"show");if(t.classList.contains("show")){this.handleBodyScroll("hide")}else{this.handleBodyScroll("show")}}handleBodyScroll(n){const a=this.el.closest("body");if(!this.fixed&&n==="hide"){a.style.overflow="hidden"}else if(n==="show"){a.style.overflow="visible"}}handleDropdownMenu(n){const a=n.currentTarget.querySelector(".navbar__dropdown-wrapper");a.classList.toggle("open");const e=n.currentTarget.querySelector("a");e.classList.toggle("open")}async setItemMenuPosition(){const n=this.el.querySelectorAll("ifx-navbar-item");const a=this.el.querySelector("ifx-navbar-profile");if(a){const n=a.querySelectorAll("ifx-navbar-item");if(n.length!==0){n.forEach((n=>{n.setMenuItemPosition();this.setMenuItemChildrenPosition(n)}))}}if(n.length!==0){for(let a=0;a<n.length;a++){const e=n[a];const t=e.querySelectorAll("ifx-navbar-item");if(t.length!==0){const n=await e.setItemSideSpecifications();if(n){t.forEach((n=>{n.setMenuItemPosition();this.setMenuItemChildrenPosition(n)}))}}}}}setMenuItemChildrenPosition(n){const a=n.querySelectorAll("ifx-navbar-item");if(a.length!==0){a.forEach((n=>{n.setMenuItemPosition();this.setMenuItemChildrenPosition(n)}))}}getMediaQueryList(){const n=window.matchMedia("(max-width: 800px)");return n}componentDidLoad(){this.setItemMenuPosition();this.addEventListenersToHandleCustomFocusState();const n=this.getMediaQueryList();if(n.matches){this.moveNavItemsToSidebar()}}handleMobileMenuBottom(n){const a=this.el.shadowRoot.querySelector(".navbar__sidebar-bottom-row");const e=n.target;const t=e.assignedNodes();if(t.length>0){a.classList.add("show")}else{a.classList.remove("show")}}handleLogoHrefAndTarget(){if(this.logoHref.trim()===""){this.internalLogoHref=undefined}else{this.internalLogoHref=this.logoHref}if(["_self","_blank","_parent"].includes(this.logoHrefTarget.trim())){this.internalLogoHrefTarget=this.logoHrefTarget}else{this.internalLogoHrefTarget="_self"}}componentWillLoad(){this.RemoveSpaceOnStorybookSnippet();const n=this.el.querySelector("ifx-navbar-menu");const a=this.el.querySelectorAll('[slot="left-item"]');if(!a.length&&!n){this.hasLeftMenuItems=false}this.handleLogoHrefAndTarget();const e=window.matchMedia("(max-width: 800px)");e.addEventListener("change",(n=>this.moveNavItemsToSidebar(n)))}getSearchBarLeftWrapper(){const n=this.el.shadowRoot.querySelector(".navbar__container-left-content-navigation-item-search-bar");return n}getMobileMenuTop(){const n=this.el.querySelectorAll('[slot="mobile-menu-top"]');return n}getMobileMenuBottom(){const n=this.el.querySelectorAll('[slot="mobile-menu-bottom"]');return n}handleBurgerIcon(){const n=this.getMobileMenuTop();const a=this.getMobileMenuBottom();if(!n.length&&!a.length){const n=this.el.shadowRoot.querySelector(".navbar__burger-icon-wrapper");this.toggleClass(n,"hide")}}moveNavItemsToSidebar(n){const a=this.el.shadowRoot.querySelector(".navbar__sidebar-top-row-wrapper");const e=this.getMediaQueryList();const t=n?n.matches:e.matches;if(t){a.classList.add("expand");const n=this.el.shadowRoot.querySelector(".navbar__cross-icon");if(n.classList.contains("show")){this.handleBodyScroll("hide")}const e=this.el.querySelector('[slot="search-bar-left"]');if(e){if(this.searchBarIsOpen){e.onNavbarMobile()}const n=this.getSearchBarLeftWrapper();n.classList.add("initial");e.setAttribute("slot","search-bar-right")}const t=this.el.querySelectorAll('[slot="left-item"]');for(let n=0;n<t.length;n++){t[n].setAttribute("slot","mobile-menu-top");t[n].moveChildComponentsIntoSubLayerMenu();if(this.searchBarIsOpen){t[n].showComponent()}}const r=this.el.querySelectorAll('[slot="right-item"]');for(let n=0;n<r.length;n++){if(r[n].tagName.toUpperCase()==="IFX-NAVBAR-PROFILE"){r[n].showLabel=false}else{if(r[n].hideOnMobile){r[n].setAttribute("slot","mobile-menu-bottom");r[n].toggleChildren("add");r[n].showLabel=true;if(this.searchBarIsOpen){r[n].showComponent()}}}}this.handleBurgerIcon()}else{a.classList.remove("expand");this.handleBodyScroll("show");const n=this.getSearchBarLeftWrapper();const e=n.classList.contains("initial");const t=this.el.querySelector('[slot="search-bar-right"]');if(e){if(this.searchBarIsOpen){t.onNavbarMobile()}if(t){t.setAttribute("slot","search-bar-left")}}const r=this.getMobileMenuTop();for(let n=0;n<r.length;n++){r[n].setAttribute("slot","left-item");r[n].moveChildComponentsBackIntoNavbar()}const i=this.getMobileMenuBottom();const o=this.el.querySelector("ifx-navbar-profile");if(o){const n=o.getAttribute("show-label");o.setAttribute("show-label",n)}for(let n=0;n<i.length;n++){i[n].setAttribute("slot","right-item");i[n].toggleChildren("remove");const a=i[n].getAttribute("show-label");i[n].setAttribute("show-label",a);if(this.searchBarIsOpen){i[n].hideComponent()}}}}RemoveSpaceOnStorybookSnippet(){let n=this.el.parentElement;if(n){let a=n.closest(".css-xzp052");if(a){a.style.overflow="visible"}}}render(){return e("div",{key:"f2a010d3aa5960179c84c0b6ef797b19242d0ef2","aria-label":"a navigation navbar",class:`navbar__wrapper ${this.fixed?"fixed":""}`},e("div",{key:"c57f5cae212116674d736a9200642877b525526c",class:`navbar__main-container ${this.fixed?"fixed":""}`},e("div",{key:"90d705d53567630dce006a811f49865ff184d884",class:`navbar__container ${this.searchBarIsOpen?"expanded":""}`},e("div",{key:"e18e2a88665b19225b06503a01e7fb05c4c4b29b",class:`navbar__container-left ${this.searchBarIsOpen==="left"?"expand":this.searchBarIsOpen==="right"?"hide":""}`},this.showLogoAndAppname&&e("div",{key:"006a8f8c5e61c22eb347b2b62fe87080b67ab763",class:`navbar__container-left-logo ${this.searchBarIsOpen==="left"?"hide":""}`},e("div",{key:"785605045c6c0d3fa42c328e8a50349fc4cc4b17",class:"navbar__container-left-logo-default"},e("a",{key:"7205c2de72583d0b8467579a552c1932d7a608ed",href:this.internalLogoHref,target:this.internalLogoHrefTarget},e("svg",{key:"4f77f1ef0e51202a684dc02eecd0f0438272e8ff",width:"91",height:"40",viewBox:"0 0 91 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("g",{key:"74d46ba72072e46ee51b9cef1c00ac36a13eb41a","clip-path":"url(#clip0_2396_2480)"},e("path",{key:"0355efbdc40235b5e2124128f530c471a8fc0686",d:"M67.691 26.7766C71.0884 26.7766 72.1461 23.1841 72.1461 19.8802C72.1461 15.4536 70.2871 13.1441 67.691 13.1441C64.4219 13.1441 63.2681 16.7367 63.3001 19.9443C63.3322 23.1199 64.2296 26.7766 67.691 26.7766ZM66.0244 19.8481C66.0244 18.533 66.0244 15.4536 67.691 15.4536C69.4859 15.4536 69.4218 18.5009 69.4218 19.9123C69.4218 21.2595 69.4218 24.5313 67.7551 24.5313C65.9603 24.4992 66.0244 21.2274 66.0244 19.8481ZM57.8195 26.7766C59.1976 26.7766 60.3835 26.2313 61.5053 25.0445L60.5117 23.1841C59.7425 24.018 58.9733 24.4671 58.0438 24.4671C57.2746 24.4671 56.6336 24.018 56.249 23.2482C55.9285 22.5746 55.8644 21.8048 55.8644 20.9708V20.7142H61.6335V20.1368C61.6335 17.282 61.2809 15.7102 60.3835 14.5234C59.7104 13.6253 58.7169 13.1441 57.499 13.1441C56.2169 13.1441 55.1593 13.7215 54.39 14.8442C53.5567 16.0631 53.2042 17.699 53.2042 19.9443C53.1721 24.2426 54.8708 26.7766 57.8195 26.7766ZM57.531 15.2612C58.172 15.2612 58.5566 15.614 58.813 16.1914C59.0053 16.7046 59.1015 17.5707 59.1015 18.5971H55.8644C55.8964 16.3197 56.3772 15.2612 57.531 15.2612ZM74.2614 26.4559H76.7614V16.8329C77.3703 16.0952 78.0754 15.6782 78.5882 15.6782C78.9087 15.6782 79.2292 15.7423 79.4215 15.9989C79.6138 16.2876 79.71 16.7046 79.71 17.699V26.4559H82.21V16.5442C82.21 15.6782 82.1138 14.8121 81.601 14.1706C81.1523 13.5932 80.4472 13.2404 79.5497 13.2404C78.3959 13.2404 77.2101 13.914 76.569 14.6838C76.537 14.0102 76.3126 13.3687 76.2485 13.1441L73.9089 13.7536C74.0371 14.4593 74.2294 15.3253 74.2294 16.8971V26.4559H74.2614ZM45.2236 14.6838C45.1915 14.0102 44.9672 13.3687 44.9031 13.1441L42.5634 13.7536C42.6916 14.4593 42.8839 15.3253 42.8839 16.8971V26.4238H45.3838V16.8008C45.9928 16.0631 46.6979 15.6461 47.2107 15.6461C47.5312 15.6461 47.8517 15.7102 48.044 15.9669C48.2363 16.2555 48.3325 16.6725 48.3325 17.6669V26.4238H50.8324V16.5442C50.8324 15.6782 50.7363 14.8121 50.2235 14.1706C49.7748 13.5932 49.0696 13.2404 48.1722 13.2404C47.0505 13.2404 45.8646 13.914 45.2236 14.6838ZM14.6473 9.07042C16.1216 9.07042 17.3075 7.88359 17.3075 6.40807C17.3075 4.93256 16.1216 3.74573 14.6473 3.74573C13.173 3.74573 11.9871 4.93256 11.9871 6.40807C11.9871 7.88359 13.173 9.07042 14.6473 9.07042ZM26.9227 26.4559V16.5442C26.9227 15.6782 26.8265 14.8121 26.3137 14.1706C25.865 13.5932 25.1599 13.2404 24.2625 13.2404C23.1087 13.2404 21.9228 13.914 21.2818 14.6838C21.2497 14.0102 21.0254 13.3687 20.9613 13.1441L18.6536 13.7857C18.7818 14.4913 18.9741 15.3574 18.9741 16.9291V26.4559H21.4741V16.8329C22.0831 16.0952 22.7882 15.6782 23.301 15.6782C23.6215 15.6782 23.942 15.7423 24.1343 15.9989C24.3266 16.2876 24.4227 16.7046 24.4227 17.699V26.4559H26.9227ZM38.4289 8.36474C37.4994 8.36474 36.7622 9.10249 36.7622 10.0327C36.7622 10.9629 37.4994 11.7007 38.3968 11.7007C39.3263 11.7007 40.0634 10.9629 40.0634 10.0327C40.0634 9.10249 39.3263 8.36474 38.4289 8.36474ZM13.4614 26.4559H15.9614V10.8346L13.4614 11.1554V26.4559ZM33.8777 9.90441C34.3264 9.90441 34.7751 10.0648 35.0635 10.2893L35.7687 8.33266C35.0956 7.85151 34.3584 7.62698 33.429 7.62698C32.788 7.62698 32.1149 7.78736 31.5059 8.26851C30.897 8.78173 30.256 9.80818 30.256 11.7328C30.256 12.5667 30.288 13.4328 30.288 13.4328H29.4226V15.6461H30.288V26.4238H32.8521V15.6782H34.743L35.2238 13.4649H32.8841V11.4762C32.8841 10.5139 33.2687 9.90441 33.8777 9.90441ZM37.1468 26.4559H39.6788V13.2404L37.1468 13.5611V26.4559Z",fill:"#005DA9"}),e("path",{key:"d74aba1e7cd295982e3e24d36b288c31f86b7155",d:"M77.0816 33.5126C68.6203 36.0146 58.3321 37.1052 48.2682 37.1052C22.7239 37.1052 6.24986 29.5993 5.09604 19.6877C4.67938 15.9668 7.59599 12.3422 12.4677 9.26285C11.6023 8.62132 11.0575 7.59488 11.0254 6.44012C3.97427 10.161 0 15.0366 0 19.9764C0 30.9145 19.5188 40.1525 48.5246 39.7676C58.6205 39.6393 67.0498 38.1958 74.6778 35.6939C83.7482 32.7428 89.4532 28.5087 90.8313 26.6483C89.1968 28.1238 85.3186 31.0748 77.0816 33.5126ZM23.2687 4.38723C24.9674 3.80985 27.3712 3.0721 27.3712 3.0721C34.1339 1.21166 41.6017 0.121063 48.5566 0.185215C40.544 -0.295931 33.2365 0.185215 26.8584 1.33997C26.8584 1.33997 24.743 1.69281 22.4675 2.27018C22.4675 2.27018 21.3777 2.55887 20.7047 2.75133C20.0316 2.94379 19.1021 3.2004 19.1021 3.2004C18.4611 3.39286 17.8201 3.6174 17.1791 3.84193C17.8201 4.48346 18.2047 5.31745 18.2368 6.27974C19.3586 5.76652 21.5059 4.99668 23.2687 4.38723Z",fill:"#E30034"})),e("defs",{key:"957168ec812187a7da2a8ab13d6203ab73e566bf"},e("clipPath",{key:"082ed7ea2d8ae67bdb79efd66fc53566f72781ae",id:"clip0_2396_2480"},e("rect",{key:"6d874885510ededd834be3719191176a0efc6bee",width:"91",height:"40",fill:"white"})))))),this.applicationName&&e("h6",{key:"a984d76005d39df4da9ecb1e2fe2829a7c75dcc0"},this.applicationName),this.applicationName&&this.hasLeftMenuItems&&e("div",{key:"f7633a09c2cd74c264eeaafee2781c1ad501e14d",class:"navbar__container-left-logo-divider"})),e("div",{key:"6a4e7e61a240f3eaa877db3edada59c6fa5191a9",class:"navbar__container-left-content"},e("div",{key:"a995f8bfb08b112e67c736879444059ade422035",class:"navbar__container-left-content-navigation-group"},e("slot",{key:"1e9d67c5d7eca87010b51b579efb64b017abf4d2",name:"left-item"}),e("div",{key:"40d1f62d4016f292b2e19c541d6b5629ce9e9b6b",class:"navbar__container-left-content-navigation-item-search-bar"},e("slot",{key:"81e2637e4be85bcb7f7e45c7f9420de97da033f8",name:"search-bar-left"}))))),e("div",{key:"c05ba0e8255adb9321850f073e0b25c430ec49cd",class:`navbar__container-right ${this.searchBarIsOpen==="right"?"expand":this.searchBarIsOpen==="left"?"hide":""}`},e("div",{key:"f29353be7bb55afdd07833ad9750504cd2b4e2c5",class:"navbar__container-right-content"},e("div",{key:"ccffe47d70b05c2e99019a2d160f9cc54591d6be",class:"navbar__container-right-content-navigation-group"},e("div",{key:"6468bb70542cba4cc3509d60ab22ac01afce4c7a",class:"navbar__container-right-content-navigation-item-search-bar"},e("div",{key:"81bbb34a92750d0f5bd3dd2844466f53a988d98d",class:`navbar__container-right-content-navigation-item-search-bar-icon-wrapper`},e("slot",{key:"e76faf9d851c0f4a93dfdf5cbf9011c2b4c42141",name:"search-bar-right"}))),e("slot",{key:"706138bf95472f7beb70fb5f56b7cdde857e03be",name:"right-item"}))),e("div",{key:"d1185c813a3df1ad854e5be269dc1812c2e7b443",class:`navbar__burger-icon-wrapper`,onClick:this.handleSidebar.bind(this)},e("div",{key:"fda7444dc28b97b1631aeaca47004670b46906b2",class:"navbar__burger-icon"},e("ifx-icon",{key:"3333978ae7b60837953e0e7fbb65a147c63733f9",icon:"menu-right-24"})),e("div",{key:"7db005f3b9e29ed7bf09d66700059f0c22eb7290",class:"navbar__cross-icon"},e("ifx-icon",{key:"6f0c859eacb11df81fbda684f0300cc3fc901d76",icon:"cross-24"})))))),e("div",{key:"3966ebae4041ec00095d074ffda905e4fb2ae013",class:"navbar__sidebar"},e("div",{key:"97d8bca4b2ba168d63778c90cad26a6552f2b16b",class:"navbar__sidebar-top-row"},e("div",{key:"1c9f014298c40ba89f3efc1e9475dee041013f68",class:"navbar__sidebar-top-row-wrapper"},e("slot",{key:"462b0b383821a7b1f1767c5e30ada24b536e12b3",name:"mobile-menu-top"}))),e("div",{key:"b16f27b40f5ac721ede0475062cacafeb4ac6faa",class:"navbar__sidebar-bottom-row"},e("slot",{key:"1e5af7fabbb01f5360a04b28f80759d25002aba8",name:"mobile-menu-bottom",onSlotchange:n=>this.handleMobileMenuBottom(n)}))))}get el(){return t(this)}};o.style=i;export{o as ifx_navbar};
-//# sourceMappingURL=p-91f91586.entry.js.map
+import{r as n,c as a,h as e,g as t}from"./p-f619bff3.js";const r=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{width:100%;display:block}.navbar__wrapper{font-family:var(--ifx-font-family);height:63px;position:sticky;z-index:1030;border-bottom:1px solid #EEEDED}.navbar__wrapper.fixed{border-bottom:none}.navbar__main-container{position:absolute;top:0;width:100%;transition:all 1s;z-index:1020}.navbar__main-container.fixed{position:fixed}.navbar__main-container.fixed .navbar__container{border-bottom:1px solid #EEEDED}.navbar__main-container.show{height:100vh;bottom:0;background-color:rgba(29, 29, 29, 0.2);transition:1s;z-index:1}.navbar__sidebar{box-sizing:border-box;position:fixed;right:-100%;top:64px;display:flex;flex-direction:column;align-items:flex-start;width:375px;height:calc(100vh - 64px);background-color:#FFFFFF;transition:right 1s;z-index:1030}.navbar__sidebar.show{right:0;transition:right 1s}.navbar__sidebar .navbar__sidebar-top-row{display:flex;padding:var(--borderRadius-none, 0px) var(--space-300, 24px) 30px var(--space-300, 24px);flex-direction:column;align-items:flex-start;gap:var(--space-200, 16px);flex:1 0 0;align-self:stretch;overflow-y:auto}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper{display:flex;padding-top:var(--space-200, 16px);flex-direction:column;align-items:flex-start;align-self:stretch;gap:16px}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper.expand{align-items:initial}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper .navbar__sidebar-top-row-item{display:flex;padding:var(--space-200, 0px) var(--space-50, 4px) var(--space-200, 0px) 0px;align-items:center;gap:var(--space-100, 8px);align-self:stretch;justify-content:space-between}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper .navbar__sidebar-top-row-item .navbar__sidebar-top-row-item-icon-wrapper ifx-icon{vertical-align:middle}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper .navbar__sidebar-top-row-item:hover{cursor:pointer}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper .navbar__sidebar-top-row-item .navbar__sidebar-top-row-item-label{color:var(--color-base-black, #1D1D1D);font-family:"Source Sans 3";font-size:16px;font-style:normal;font-weight:400;line-height:24px}.navbar__sidebar .navbar__sidebar-bottom-row{display:none;padding:var(--space-150, 12px) var(--space-300, 24px) var(--space-150, 12px) var(--space-200, 16px);flex-direction:column;align-items:flex-start;align-self:stretch;background:var(--color-engineering-100, #F7F7F7);border-top:1px solid var(--color-engineering-200, #EEEDED);gap:10px;max-height:160px;overflow-y:auto}.navbar__sidebar .navbar__sidebar-bottom-row.show{display:flex}.navbar__sidebar .navbar__sidebar-bottom-row .navbar__sidebar-bottom-row-item{display:flex;height:40px;padding-right:var(--space-50, 4px);align-items:center;gap:var(--space-100, 8px);flex:1 0 0}.navbar__sidebar .navbar__sidebar-bottom-row .navbar__sidebar-bottom-row-item .navbar__sidebar-bottom-row-item-label{color:var(--color-base-black, #1D1D1D);font-family:"Source Sans 3";font-size:16px;font-style:normal;font-weight:400;line-height:24px}.navbar__sidebar .navbar__sidebar-bottom-row .navbar__sidebar-bottom-row-item .navbar__sidebar-bottom-row-item-icon-wrapper{display:flex;align-items:center}.navbar__sidebar .navbar__sidebar-content-products,.navbar__sidebar .navbar__sidebar-content-main{display:flex;flex-direction:column;align-items:flex-start;padding:0px;gap:24px;flex:none;order:0;align-self:stretch;flex-grow:0}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-header,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-about-header,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-header,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-about-header{display:flex;flex-direction:row;align-items:center;padding:0px;gap:16px;flex:none;order:0;align-self:stretch;flex-grow:0;color:#BFBBBB}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-header span,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-about-header span,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-header span,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-about-header span{color:#1D1D1D;font-weight:600;font-size:18px;line-height:28px;display:flex;align-items:center}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu{display:flex;flex-direction:column;align-items:flex-start;padding:0px;gap:16px;flex:none;order:1;flex-grow:0;width:100%}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-products-menu-item,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-products-menu-item,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-products-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-products-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item{display:flex;flex-direction:row;align-items:center;padding:0px;flex:none;order:0;flex-grow:0}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-products-menu-item a,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-products-menu-item a,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-products-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-products-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item a{text-decoration:none;font-style:normal;font-weight:400;font-size:16px;line-height:24px;display:flex;align-items:center;color:#1D1D1D}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item{color:#BFBBBB}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item a{font-style:normal;font-weight:600;font-size:18px;line-height:28px;display:flex;align-items:center;color:#1D1D1D;flex:none;order:0;flex-grow:1}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu{align-items:normal}.navbar__container{display:flex;justify-content:space-between;align-items:center;padding:8px 40px;gap:16px;background-color:#FFFFFF;font-family:var(--ifx-font-family)}.navbar__container.expanded{justify-content:initial}.navbar__container .navbar__container-search-field-wrapper{display:none}.navbar__container .navbar__container-search-field-wrapper.show{display:flex}.navbar__container .navbar__container-left{display:flex;flex-direction:row;align-items:center;padding:0;gap:16px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-left.hide{display:none}.navbar__container .navbar__container-left.expand{justify-content:initial;flex:1}.navbar__container .navbar__container-left.expand .navbar__container-left-content{align-items:initial;flex:1}.navbar__container .navbar__container-left.expand .navbar__container-left-content .navbar__container-left-content-navigation-group{justify-content:initial;flex:1}.navbar__container .navbar__container-left.expand .navbar__container-left-content .navbar__container-left-content-navigation-group .navbar__container-left-content-navigation-item-search-bar{flex:1}.navbar__container .navbar__container-left .navbar__container-left-logo{display:flex;flex-direction:row;align-items:center;padding:0px;gap:16px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-logo.hide{display:none}.navbar__container .navbar__container-left .navbar__container-left-logo h6{position:relative;margin:0;padding:0;font-style:normal;font-weight:600;font-size:16px;display:flex;align-items:center;color:#1D1D1D;flex:none;order:1;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-logo .navbar__container-left-logo-default{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:12px 0px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-logo .navbar__container-left-logo-default svg{width:91px;height:40px;flex:none;order:0;flex-grow:0;vertical-align:bottom}.navbar__container .navbar__container-left .navbar__container-left-logo .navbar__container-left-logo-divider{width:1px;height:32px;background:#EEEDED;flex:none;order:2;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-content{display:flex;flex-direction:row;justify-content:center;align-items:flex-start;padding:0px;flex:none;order:1;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-content .navbar__container-left-content-navigation-group{display:flex;flex-direction:row;align-items:center;padding:0px;gap:4px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-content .navbar__container-left-content-navigation-group .navbar__container-left-content-navigation-item-search-bar{display:flex;flex-direction:row;align-items:center;padding:0px 8px;flex:none;order:5;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-content .navbar__container-left-content-navigation-group .navbar__container-left-content-navigation-item{display:flex;flex-direction:row;align-items:center;padding:0px 8px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-content .navbar__container-left-content-navigation-group .navbar__container-left-content-navigation-item a{display:flex;align-items:center;font-weight:400;font-size:16px;line-height:24px;color:#1D1D1D;text-decoration:none;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;padding:0;gap:8px;flex:none;order:1;flex-grow:0}.navbar__container .navbar__container-right.hide{display:none}.navbar__container .navbar__container-right.expand{justify-content:initial;flex:1}.navbar__container .navbar__container-right.expand .navbar__container-right-content{align-items:initial;flex:1}.navbar__container .navbar__container-right.expand .navbar__container-right-content .navbar__container-right-content-navigation-group{justify-content:initial;flex:1}.navbar__container .navbar__container-right.expand .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar{flex:1}.navbar__container .navbar__container-right.expand .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-search-bar-icon-wrapper{flex:1}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:4px 0px 4px 16px;border-left:1px solid #BFBBBB;gap:16px;flex:none;order:1;flex-grow:0;width:41px;height:40px}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper.hide{display:none}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__burger-icon{display:flex;align-items:center}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__burger-icon:hover{cursor:pointer}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__burger-icon.close{display:none}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__cross-icon{display:none;align-items:center}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__cross-icon.show{display:flex}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__cross-icon.show:hover{cursor:pointer}.navbar__container .navbar__container-right .navbar__container-right-content{display:flex;flex-direction:column;align-items:flex-start;padding:0px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group{position:relative;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;padding:0px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar{display:flex;flex-direction:row;align-items:center;padding:0px 8px;gap:4px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item .navbar__container-right-content-navigation-item-search-bar-icon-wrapper,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile .navbar__container-right-content-navigation-item-search-bar-icon-wrapper,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-search-bar-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item .navbar__container-right-content-navigation-item-search-bar-icon-wrapper.isOpen,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile .navbar__container-right-content-navigation-item-search-bar-icon-wrapper.isOpen,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-search-bar-icon-wrapper.isOpen{position:absolute;top:10px}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item .navbar__container-right-content-navigation-item-navigation-profile,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile .navbar__container-right-content-navigation-item-navigation-profile,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-navigation-profile{position:relative;width:24px;height:24px;background:#0A8276;border-radius:100px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item .navbar__container-right-content-navigation-item-navigation-profile a,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile .navbar__container-right-content-navigation-item-navigation-profile a,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-navigation-profile a{position:absolute;width:22px;height:20px;left:calc(50% - 11px);top:calc(50% - 10px);font-style:normal;font-weight:600;font-size:14px;line-height:20px;text-decoration:none;display:flex;align-items:center;justify-content:center;text-align:center;color:#FFFFFF}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item .navbar__container-right-content-navigation-item-icon-wrapper,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile .navbar__container-right-content-navigation-item-icon-wrapper,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item a,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile a,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar a{font-style:normal;font-weight:400;font-size:14px;line-height:20px;color:#1D1D1D;text-decoration:none;display:flex;align-items:center;flex:none;order:1;flex-grow:0}@media screen and (max-width: 800px){.navbar__container{padding:0px 16px;height:64px;gap:initial}.navbar__container.expanded .navbar__container-right .navbar__burger-icon-wrapper{display:none}.navbar__container .navbar__container-left .navbar__container-left-content{display:none}.navbar__container .navbar__container-left .navbar__container-left-logo .navbar__container-left-logo-divider{display:none}.navbar__container .navbar__container-right{flex:1}.navbar__sidebar{width:0;transition:1s}}@media screen and (max-width: 500px){.navbar__sidebar.show{width:100%}}@media screen and (min-width: 500px){.navbar__sidebar.show{width:50%}}@media screen and (min-width: 800px){.navbar__wrapper{height:63px}.navbar__container{padding:0px 16px;height:63px;gap:initial}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper{display:none}.navbar__main-container.show{height:auto;background-color:inherit;transition:none}.navbar__sidebar{width:0;transition:1s}.navbar__sidebar.show{right:-100%}}@media screen and (min-width: 1024px){.navbar__wrapper{height:72px}.navbar__container{padding:0px 24px;height:72px}.navbar__container .navbar__container-left{gap:12px;display:flex}.navbar__container .navbar__container-left .navbar__container-left-content{display:flex}.navbar__container .navbar__container-left .navbar__container-left-logo-default svg{width:72.8px;height:32px}.navbar__main-container.show{height:auto;background-color:inherit;transition:none}}@media screen and (min-width: 1200px){.navbar__wrapper{height:80px}.navbar__container{padding:0px 32px;height:80px}.navbar__container .navbar__container-left .navbar__container-left-content{justify-content:inherit}.navbar__container .navbar__container-right .navbar__container-right-content{justify-content:inherit}}@media screen and (min-width: 1440px){.navbar__wrapper{height:80px}.navbar__container{padding:0px 40px;height:80px}.navbar__container .navbar__container-left .navbar__container-left-content{justify-content:center}.navbar__container .navbar__container-right .navbar__container-right-content{justify-content:inherit}}';const i=r;const o=class{constructor(e){n(this,e);this.ifxNavbarMobileMenuIsOpen=a(this,"ifxNavbarMobileMenuIsOpen",7);this.main=true;this.products=false;this.applications=false;this.design=false;this.support=false;this.about=false;this.applicationName="";this.hasLeftMenuItems=true;this.fixed=true;this.showLogoAndAppname=true;this.logoHref="";this.internalLogoHref="";this.logoHrefTarget="_self";this.internalLogoHrefTarget="_self"}addEventListenersToHandleCustomFocusState(){const n=this.el.shadowRoot.firstChild;if(!n){console.error("element not found");return}n.tabIndex=-1;const a=n.querySelectorAll("a");for(let n=0;n<a.length;n++){a[n].tabIndex=-1}const e=n.querySelector("slot");if(e){const n=e.assignedNodes();for(let a=0;a<n.length;a++){const e=n[a];if(e.nodeName==="IFX-NAVBAR-ITEM"){const n=e;const a=n===null||n===void 0?void 0:n.shadowRoot.querySelectorAll("a");for(let n=0;n<a.length;n++){a[n].tabIndex=-1}}}}}clearFirstLayerMenu(n){if(n.detail.action==="hideFirstLayer"){const a=this.getMobileMenuTop();for(let e=0;e<a.length;e++){if(!a[e].isSameNode(n.detail.component)){a[e].hideComponent()}}}if(n.detail.action==="hideSecondLayer"){const a=n.detail.parent;const e=a.children;a.toggleFirstLayerItem("remove","add");for(let a=0;a<e.length;a++){if(!e[a].isSameNode(n.detail.component)){e[a].hideComponent()}}}if(n.detail.action==="returnToSecondLayer"){const a=n.detail.parent;const e=a.children;a.toggleFirstLayerItem("add","remove");for(let a=0;a<e.length;a++){if(!e[a].isSameNode(n.detail.component)){e[a].showComponent()}}}if(n.detail.action==="show"){const a=this.el.querySelectorAll('[slot="left-item"]');for(let e=0;e<a.length;e++){if(!a[e].isSameNode(n.detail.component)){a[e].showComponent()}}}if(n.detail.action==="return"){const a=this.getMobileMenuTop();for(let e=0;e<a.length;e++){if(!a[e].isSameNode(n.detail.component)){a[e].showComponent()}}}}getWrappers(){const n=this.el.shadowRoot.querySelector(".navbar__container-right-content-navigation-item-search-bar-icon-wrapper");const a=this.el.shadowRoot.querySelector(".navbar__container-left-content-navigation-item-search-bar");const e=n.querySelector("slot");const t=a.querySelector("slot");const r=e.assignedNodes();const i=t.assignedNodes();const o=this.el.querySelector("ifx-navbar-profile");const _=this.el.querySelectorAll('[slot="left-item"]');const c=this.el.querySelectorAll('[slot="right-item"]');const b=this.el.shadowRoot.querySelector(".navbar__sidebar-top-row-wrapper");return{rightSideSlot:e,leftSideSlot:t,rightAssignedNodes:r,leftAssignedNodes:i,navbarProfile:o,leftMenuItems:_,rightMenuItems:c,topRowWrapper:b}}hideNavItems(){const{rightAssignedNodes:n,leftAssignedNodes:a,navbarProfile:e,leftMenuItems:t,rightMenuItems:r,topRowWrapper:i}=this.getWrappers();if(n.length!==0){this.searchBarIsOpen="right"}else if(a.length!==0){this.searchBarIsOpen="left"}if(e){e.hideComponent()}for(let n=0;n<t.length;n++){if(!i.classList.contains("expand")){t[n].hideComponent()}}for(let n=0;n<r.length;n++){if(i.classList.contains("expand")){if(!r[n].hideOnMobile){r[n].hideComponent()}}else{r[n].hideComponent()}}}showNavItems(){const{navbarProfile:n,leftMenuItems:a,rightMenuItems:e,topRowWrapper:t}=this.getWrappers();this.searchBarIsOpen=undefined;if(n){n.showComponent()}for(let n=0;n<a.length;n++){if(!t.classList.contains("expand")){a[n].showComponent()}}for(let n=0;n<e.length;n++){if(t.classList.contains("expand")){if(!e[n].hideOnMobile){e[n].showComponent()}}else{e[n].showComponent()}}}handleSearchBarToggle(n){if(n.detail){this.hideNavItems()}else if(!n.detail){this.showNavItems()}}toggleClass(n,a){n.classList.toggle(a)}handleSidebar(n){const a=n.currentTarget.closest(".navbar__burger-icon-wrapper");const e=a.querySelector(".navbar__burger-icon");const t=a.querySelector(".navbar__cross-icon");const r=n.currentTarget.closest(".navbar__main-container");const i=n.currentTarget.closest(".navbar__wrapper");const o=i.querySelector(".navbar__sidebar");this.toggleClass(i,"show");this.toggleClass(r,"show");this.toggleClass(o,"show");this.toggleClass(e,"close");this.toggleClass(t,"show");if(t.classList.contains("show")){this.handleBodyScroll("hide")}else{this.handleBodyScroll("show")}}handleBodyScroll(n){const a=this.el.closest("body");if(!this.fixed&&n==="hide"){a.style.overflow="hidden"}else if(n==="show"){a.style.overflow="visible"}}handleDropdownMenu(n){const a=n.currentTarget.querySelector(".navbar__dropdown-wrapper");a.classList.toggle("open");const e=n.currentTarget.querySelector("a");e.classList.toggle("open")}async setItemMenuPosition(){const n=this.el.querySelectorAll("ifx-navbar-item");const a=this.el.querySelector("ifx-navbar-profile");if(a){const n=a.querySelectorAll("ifx-navbar-item");if(n.length!==0){n.forEach((n=>{n.setMenuItemPosition();this.setMenuItemChildrenPosition(n)}))}}if(n.length!==0){for(let a=0;a<n.length;a++){const e=n[a];const t=e.querySelectorAll("ifx-navbar-item");if(t.length!==0){const n=await e.setItemSideSpecifications();if(n){t.forEach((n=>{n.setMenuItemPosition();this.setMenuItemChildrenPosition(n)}))}}}}}setMenuItemChildrenPosition(n){const a=n.querySelectorAll("ifx-navbar-item");if(a.length!==0){a.forEach((n=>{n.setMenuItemPosition();this.setMenuItemChildrenPosition(n)}))}}getMediaQueryList(){const n=window.matchMedia("(max-width: 800px)");return n}componentDidLoad(){this.setItemMenuPosition();this.addEventListenersToHandleCustomFocusState();const n=this.getMediaQueryList();if(n.matches){this.moveNavItemsToSidebar()}}handleMobileMenuBottom(n){const a=this.el.shadowRoot.querySelector(".navbar__sidebar-bottom-row");const e=n.target;const t=e.assignedNodes();if(t.length>0){a.classList.add("show")}else{a.classList.remove("show")}}handleLogoHrefAndTarget(){if(this.logoHref.trim()===""){this.internalLogoHref=undefined}else{this.internalLogoHref=this.logoHref}if(["_self","_blank","_parent"].includes(this.logoHrefTarget.trim())){this.internalLogoHrefTarget=this.logoHrefTarget}else{this.internalLogoHrefTarget="_self"}}componentWillLoad(){this.RemoveSpaceOnStorybookSnippet();const n=this.el.querySelector("ifx-navbar-menu");const a=this.el.querySelectorAll('[slot="left-item"]');if(!a.length&&!n){this.hasLeftMenuItems=false}this.handleLogoHrefAndTarget();const e=window.matchMedia("(max-width: 800px)");e.addEventListener("change",(n=>this.moveNavItemsToSidebar(n)))}getSearchBarLeftWrapper(){const n=this.el.shadowRoot.querySelector(".navbar__container-left-content-navigation-item-search-bar");return n}getMobileMenuTop(){const n=this.el.querySelectorAll('[slot="mobile-menu-top"]');return n}getMobileMenuBottom(){const n=this.el.querySelectorAll('[slot="mobile-menu-bottom"]');return n}handleBurgerIcon(){const n=this.getMobileMenuTop();const a=this.getMobileMenuBottom();if(!n.length&&!a.length){const n=this.el.shadowRoot.querySelector(".navbar__burger-icon-wrapper");this.toggleClass(n,"hide")}}moveNavItemsToSidebar(n){const a=this.el.shadowRoot.querySelector(".navbar__sidebar-top-row-wrapper");const e=this.getMediaQueryList();const t=n?n.matches:e.matches;if(t){a.classList.add("expand");const n=this.el.shadowRoot.querySelector(".navbar__cross-icon");if(n.classList.contains("show")){this.handleBodyScroll("hide")}const e=this.el.querySelector('[slot="search-bar-left"]');if(e){if(this.searchBarIsOpen){e.onNavbarMobile()}const n=this.getSearchBarLeftWrapper();n.classList.add("initial");e.setAttribute("slot","search-bar-right")}const t=this.el.querySelectorAll('[slot="left-item"]');for(let n=0;n<t.length;n++){t[n].setAttribute("slot","mobile-menu-top");t[n].moveChildComponentsIntoSubLayerMenu();if(this.searchBarIsOpen){t[n].showComponent()}}const r=this.el.querySelectorAll('[slot="right-item"]');for(let n=0;n<r.length;n++){if(r[n].tagName.toUpperCase()==="IFX-NAVBAR-PROFILE"){r[n].showLabel=false}else{if(r[n].hideOnMobile){r[n].setAttribute("slot","mobile-menu-bottom");r[n].toggleChildren("add");r[n].showLabel=true;if(this.searchBarIsOpen){r[n].showComponent()}}}}this.handleBurgerIcon()}else{a.classList.remove("expand");this.handleBodyScroll("show");const n=this.getSearchBarLeftWrapper();const e=n.classList.contains("initial");const t=this.el.querySelector('[slot="search-bar-right"]');if(e){if(this.searchBarIsOpen){t.onNavbarMobile()}if(t){t.setAttribute("slot","search-bar-left")}}const r=this.getMobileMenuTop();for(let n=0;n<r.length;n++){r[n].setAttribute("slot","left-item");r[n].moveChildComponentsBackIntoNavbar()}const i=this.getMobileMenuBottom();const o=this.el.querySelector("ifx-navbar-profile");if(o){const n=o.getAttribute("show-label");o.setAttribute("show-label",n)}for(let n=0;n<i.length;n++){i[n].setAttribute("slot","right-item");i[n].toggleChildren("remove");const a=i[n].getAttribute("show-label");i[n].setAttribute("show-label",a);if(this.searchBarIsOpen){i[n].hideComponent()}}}}RemoveSpaceOnStorybookSnippet(){let n=this.el.parentElement;if(n){let a=n.closest(".css-xzp052");if(a){a.style.overflow="visible"}}}render(){return e("div",{key:"57d322c2c26bd0c599620fd7396d54a20bde51d7","aria-label":"a navigation navbar",class:`navbar__wrapper ${this.fixed?"fixed":""}`},e("div",{key:"d86770f17b0227d74e26680c98979a89fed9db93",class:`navbar__main-container ${this.fixed?"fixed":""}`},e("div",{key:"2755141fb66c9da97acf6f375c5bf4e85eb1846b",class:`navbar__container ${this.searchBarIsOpen?"expanded":""}`},e("div",{key:"43f340238bc3a08bf4850410ae0be2b000fab46c",class:`navbar__container-left ${this.searchBarIsOpen==="left"?"expand":this.searchBarIsOpen==="right"?"hide":""}`},this.showLogoAndAppname&&e("div",{key:"9125e94cb06e0bbee2481e3b3913a2357c0e3069",class:`navbar__container-left-logo ${this.searchBarIsOpen==="left"?"hide":""}`},e("div",{key:"f496163fcbe31477038517af75bd1aa21a40f896",class:"navbar__container-left-logo-default"},e("a",{key:"30c1f5b0c46c5db6b6718b6c1514c20f6944f0c4",href:this.internalLogoHref,target:this.internalLogoHrefTarget},e("svg",{key:"6f159701fb1034138bd4b1ef6d97a87f69dd4517",width:"91",height:"40",viewBox:"0 0 91 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("g",{key:"536eef6136f0353a61f9176490a6512f68671675","clip-path":"url(#clip0_2396_2480)"},e("path",{key:"ce9602608b1f76f272ce82734901461bf0259919",d:"M67.691 26.7766C71.0884 26.7766 72.1461 23.1841 72.1461 19.8802C72.1461 15.4536 70.2871 13.1441 67.691 13.1441C64.4219 13.1441 63.2681 16.7367 63.3001 19.9443C63.3322 23.1199 64.2296 26.7766 67.691 26.7766ZM66.0244 19.8481C66.0244 18.533 66.0244 15.4536 67.691 15.4536C69.4859 15.4536 69.4218 18.5009 69.4218 19.9123C69.4218 21.2595 69.4218 24.5313 67.7551 24.5313C65.9603 24.4992 66.0244 21.2274 66.0244 19.8481ZM57.8195 26.7766C59.1976 26.7766 60.3835 26.2313 61.5053 25.0445L60.5117 23.1841C59.7425 24.018 58.9733 24.4671 58.0438 24.4671C57.2746 24.4671 56.6336 24.018 56.249 23.2482C55.9285 22.5746 55.8644 21.8048 55.8644 20.9708V20.7142H61.6335V20.1368C61.6335 17.282 61.2809 15.7102 60.3835 14.5234C59.7104 13.6253 58.7169 13.1441 57.499 13.1441C56.2169 13.1441 55.1593 13.7215 54.39 14.8442C53.5567 16.0631 53.2042 17.699 53.2042 19.9443C53.1721 24.2426 54.8708 26.7766 57.8195 26.7766ZM57.531 15.2612C58.172 15.2612 58.5566 15.614 58.813 16.1914C59.0053 16.7046 59.1015 17.5707 59.1015 18.5971H55.8644C55.8964 16.3197 56.3772 15.2612 57.531 15.2612ZM74.2614 26.4559H76.7614V16.8329C77.3703 16.0952 78.0754 15.6782 78.5882 15.6782C78.9087 15.6782 79.2292 15.7423 79.4215 15.9989C79.6138 16.2876 79.71 16.7046 79.71 17.699V26.4559H82.21V16.5442C82.21 15.6782 82.1138 14.8121 81.601 14.1706C81.1523 13.5932 80.4472 13.2404 79.5497 13.2404C78.3959 13.2404 77.2101 13.914 76.569 14.6838C76.537 14.0102 76.3126 13.3687 76.2485 13.1441L73.9089 13.7536C74.0371 14.4593 74.2294 15.3253 74.2294 16.8971V26.4559H74.2614ZM45.2236 14.6838C45.1915 14.0102 44.9672 13.3687 44.9031 13.1441L42.5634 13.7536C42.6916 14.4593 42.8839 15.3253 42.8839 16.8971V26.4238H45.3838V16.8008C45.9928 16.0631 46.6979 15.6461 47.2107 15.6461C47.5312 15.6461 47.8517 15.7102 48.044 15.9669C48.2363 16.2555 48.3325 16.6725 48.3325 17.6669V26.4238H50.8324V16.5442C50.8324 15.6782 50.7363 14.8121 50.2235 14.1706C49.7748 13.5932 49.0696 13.2404 48.1722 13.2404C47.0505 13.2404 45.8646 13.914 45.2236 14.6838ZM14.6473 9.07042C16.1216 9.07042 17.3075 7.88359 17.3075 6.40807C17.3075 4.93256 16.1216 3.74573 14.6473 3.74573C13.173 3.74573 11.9871 4.93256 11.9871 6.40807C11.9871 7.88359 13.173 9.07042 14.6473 9.07042ZM26.9227 26.4559V16.5442C26.9227 15.6782 26.8265 14.8121 26.3137 14.1706C25.865 13.5932 25.1599 13.2404 24.2625 13.2404C23.1087 13.2404 21.9228 13.914 21.2818 14.6838C21.2497 14.0102 21.0254 13.3687 20.9613 13.1441L18.6536 13.7857C18.7818 14.4913 18.9741 15.3574 18.9741 16.9291V26.4559H21.4741V16.8329C22.0831 16.0952 22.7882 15.6782 23.301 15.6782C23.6215 15.6782 23.942 15.7423 24.1343 15.9989C24.3266 16.2876 24.4227 16.7046 24.4227 17.699V26.4559H26.9227ZM38.4289 8.36474C37.4994 8.36474 36.7622 9.10249 36.7622 10.0327C36.7622 10.9629 37.4994 11.7007 38.3968 11.7007C39.3263 11.7007 40.0634 10.9629 40.0634 10.0327C40.0634 9.10249 39.3263 8.36474 38.4289 8.36474ZM13.4614 26.4559H15.9614V10.8346L13.4614 11.1554V26.4559ZM33.8777 9.90441C34.3264 9.90441 34.7751 10.0648 35.0635 10.2893L35.7687 8.33266C35.0956 7.85151 34.3584 7.62698 33.429 7.62698C32.788 7.62698 32.1149 7.78736 31.5059 8.26851C30.897 8.78173 30.256 9.80818 30.256 11.7328C30.256 12.5667 30.288 13.4328 30.288 13.4328H29.4226V15.6461H30.288V26.4238H32.8521V15.6782H34.743L35.2238 13.4649H32.8841V11.4762C32.8841 10.5139 33.2687 9.90441 33.8777 9.90441ZM37.1468 26.4559H39.6788V13.2404L37.1468 13.5611V26.4559Z",fill:"#005DA9"}),e("path",{key:"b15a6ba15dd03db13fa2bb99a30af05e87f3109e",d:"M77.0816 33.5126C68.6203 36.0146 58.3321 37.1052 48.2682 37.1052C22.7239 37.1052 6.24986 29.5993 5.09604 19.6877C4.67938 15.9668 7.59599 12.3422 12.4677 9.26285C11.6023 8.62132 11.0575 7.59488 11.0254 6.44012C3.97427 10.161 0 15.0366 0 19.9764C0 30.9145 19.5188 40.1525 48.5246 39.7676C58.6205 39.6393 67.0498 38.1958 74.6778 35.6939C83.7482 32.7428 89.4532 28.5087 90.8313 26.6483C89.1968 28.1238 85.3186 31.0748 77.0816 33.5126ZM23.2687 4.38723C24.9674 3.80985 27.3712 3.0721 27.3712 3.0721C34.1339 1.21166 41.6017 0.121063 48.5566 0.185215C40.544 -0.295931 33.2365 0.185215 26.8584 1.33997C26.8584 1.33997 24.743 1.69281 22.4675 2.27018C22.4675 2.27018 21.3777 2.55887 20.7047 2.75133C20.0316 2.94379 19.1021 3.2004 19.1021 3.2004C18.4611 3.39286 17.8201 3.6174 17.1791 3.84193C17.8201 4.48346 18.2047 5.31745 18.2368 6.27974C19.3586 5.76652 21.5059 4.99668 23.2687 4.38723Z",fill:"#E30034"})),e("defs",{key:"692132c5a4a0e93961afe3f064a2d4c1d66b240c"},e("clipPath",{key:"f13b2e3c3cc4552459ad91620b0010664f5847ae",id:"clip0_2396_2480"},e("rect",{key:"274c04301a3d14d143798e8a08e9ac0dc7902313",width:"91",height:"40",fill:"white"})))))),this.applicationName&&e("h6",{key:"7ffde6956681f670edc8ad485cad4a13c29ddfb5"},this.applicationName),this.applicationName&&this.hasLeftMenuItems&&e("div",{key:"2fc5e9ce24afd6476bf8fce469ae53c7a7dfb798",class:"navbar__container-left-logo-divider"})),e("div",{key:"72753647ef5d38fffa93916a9e4721df22a5a7f7",class:"navbar__container-left-content"},e("div",{key:"7c0aab8889698501cc7001511b3e170398075aed",class:"navbar__container-left-content-navigation-group"},e("slot",{key:"6c31e4e496bccf5e5e87804f8e85a11670530ae5",name:"left-item"}),e("div",{key:"2d02a0e85b9d22ce57cff099a01fe965f78eac81",class:"navbar__container-left-content-navigation-item-search-bar"},e("slot",{key:"58d1c5a468aa70c14edf2bc30de0bb54cc9b6457",name:"search-bar-left"}))))),e("div",{key:"2bb7f2c7d80ddaafc5ae53076c1dbf78247e361b",class:`navbar__container-right ${this.searchBarIsOpen==="right"?"expand":this.searchBarIsOpen==="left"?"hide":""}`},e("div",{key:"bb6c835e644926ca2a69c17e3d8f28a2f1b69c9a",class:"navbar__container-right-content"},e("div",{key:"14bceb0e91bb5b7d07a15ef40686cc7f188d103f",class:"navbar__container-right-content-navigation-group"},e("div",{key:"860d1dc8e32f7f2767f2ed0ef2fcd34bb5451fc7",class:"navbar__container-right-content-navigation-item-search-bar"},e("div",{key:"698a1f13617c8298d8568d773c3f23fb6006861d",class:`navbar__container-right-content-navigation-item-search-bar-icon-wrapper`},e("slot",{key:"d8933bbe9c9361cb74d1b59fe58b3ab75d8152c6",name:"search-bar-right"}))),e("slot",{key:"f08a3bada1b4b2e7c93575005cc6ec11d9375d3d",name:"right-item"}))),e("div",{key:"922ac8c4e7d5b5867583a5444abdf3bc757d83ff",class:`navbar__burger-icon-wrapper`,onClick:this.handleSidebar.bind(this)},e("div",{key:"1cd168bef447ec8f022f16f3b6f0b404378b0310",class:"navbar__burger-icon"},e("ifx-icon",{key:"6400bd26284e555631946b74db24564095f44995",icon:"menu-right-24"})),e("div",{key:"4957b20397b2007693b10dd355c7f4a7c24a899d",class:"navbar__cross-icon"},e("ifx-icon",{key:"e5e4265822548a683936ae4cbb66ecb8dcdd42d7",icon:"cross-24"})))))),e("div",{key:"40d1a0360d69cc4dfbb2799cd065e72f362eab13",class:"navbar__sidebar"},e("div",{key:"5f40721966caa3332916a8b4e7d5e8345d438e36",class:"navbar__sidebar-top-row"},e("div",{key:"7bad16c07869485ee17eae5bf1f81db49225b75d",class:"navbar__sidebar-top-row-wrapper"},e("slot",{key:"480f0ce798e11174854e7bb7d7edc0affddfa907",name:"mobile-menu-top"}))),e("div",{key:"b54b343ee28ca3ee82891843e49c255ee4d41891",class:"navbar__sidebar-bottom-row"},e("slot",{key:"8ec7a088f578fa1a23ff732ebab429f2a6f0fe41",name:"mobile-menu-bottom",onSlotchange:n=>this.handleMobileMenuBottom(n)}))))}get el(){return t(this)}};o.style=i;export{o as ifx_navbar};
+//# sourceMappingURL=p-520ddc60.entry.js.map