@infineon/infineon-design-system-stencil 30.10.0--canary.1696.b831179ac32ae02cdeaa1c4b607f326c7553bc3a.0 → 31.0.0--canary.1697.e5e5c4da838c535d0e5399b759dcee2325e38b03.0

package/dist/infineon-design-system-stencil/p-cb5f03cc.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-cde478c3.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as t,h as o,g as e}from"./p-c63974da.js";const s=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.dropdown-item{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.dropdown-item.hide{display:none}.dropdown-item span{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px;}.dropdown-item.small span{font-size:14px}.dropdown-item:hover{cursor:pointer;background-color:#EEEDED}.dropdown-item:active{background-color:#BFBBBB}.icon{margin-right:4px}';const n=s;const a=class{constructor(o){i(this,o);this.ifxDropdownItem=t(this,"ifxDropdownItem",7);this.href="";this.target="_self";this.hide=false;this.size="l"}handleMenuSize(i){this.size=i.detail}handleEventEmission(){this.ifxDropdownItem.emit(this.el.textContent)}render(){let i=this.href?{href:this.href,target:this.target}:{};return o("a",Object.assign({key:"d1c6f3cbd4554b1018770258e8f47419edc02352"},i,{onClick:()=>this.handleEventEmission(),class:`dropdown-item ${this.size==="s"?"small":""} ${this.hide?"hide":""}`}),this.icon&&o("ifx-icon",{key:"b814d88ad14f00b04357b5549ae5a5b24adc1b6b",class:"icon",icon:this.icon}),o("span",{key:"49587568db0c0a4f76f9fad0873a6072a698c8ad"},o("slot",{key:"ccfdb428ffa6d9053c0ff9dc3b6b39469e09f208"})))}get el(){return e(this)}};a.style=n;export{a as ifx_dropdown_item};
+//# sourceMappingURL=p-cde478c3.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownItemCss","IfxDropdownItemStyle0","DropdownItem","constructor","hostRef","this","href","target","hide","size","handleMenuSize","event","detail","handleEventEmission","ifxDropdownItem","emit","el","textContent","render","hrefAttr","h","Object","assign","key","onClick","class","icon"],"sources":["src/components/dropdown/dropdown-item/dropdown-item.scss?tag=ifx-dropdown-item&encapsulation=shadow","src/components/dropdown/dropdown-item/dropdown-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.dropdown-item {\n  text-decoration: none;\n  color: tokens.$ifxColorBaseBlack;\n  display: flex;\n  align-items: center;\n  padding: 8px 16px;\n  gap: tokens.$ifxSize100;\n  font-family: var(--ifx-font-family);\n\n  &.hide {\n    display: none;\n  }\n\n  & span {\n    color: tokens.$ifxColorBaseBlack;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n    /* 150% */\n  }\n\n  &.small {\n    & span {\n      font-size: 14px;\n    }\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.icon {\n  margin-right: 4px;\n}","// dropdown-item.tsx\nimport { Component, Prop, h, Listen, State, Event, EventEmitter, Element } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-dropdown-item',\n  styleUrl: 'dropdown-item.scss',\n  shadow: true\n})\n\nexport class DropdownItem {\n  @Prop() icon: string;\n  @Prop() href: string = \"\"\n  @Prop() target: string = \"_self\"\n  @Prop() hide: boolean = false;\n  @State() size: string = 'l'\n  @Event() ifxDropdownItem: EventEmitter;\n  @Element() el;\n\n  @Listen('menuSize', { target: 'body' })\n  handleMenuSize(event: CustomEvent) {\n    this.size = event.detail;\n  }\n\n  handleEventEmission() {\n    this.ifxDropdownItem.emit(this.el.textContent)\n  }\n\n  render() {\n    let hrefAttr = this.href ? { href: this.href, target: this.target } : {};\n    return (\n      <a {...hrefAttr} onClick={() => this.handleEventEmission()} class={`dropdown-item ${this.size === 's' ? 'small' : \"\"} ${this.hide ? 'hide' : \"\"}`}>\n        {this.icon && <ifx-icon class=\"icon\" icon={this.icon}></ifx-icon>}\n        <span>\n          <slot />\n        </span>\n      </a>\n    );\n  }\n}"],"mappings":"yDAAA,MAAMA,EAAkB,0hBACxB,MAAAC,EAAeD,E,MCQFE,EAAY,MANzB,WAAAC,CAAAC,G,2DAQUC,KAAAC,KAAe,GACfD,KAAAE,OAAiB,QACjBF,KAAAG,KAAgB,MACfH,KAAAI,KAAe,G,CAKxB,cAAAC,CAAeC,GACbN,KAAKI,KAAOE,EAAMC,M,CAGpB,mBAAAC,GACER,KAAKS,gBAAgBC,KAAKV,KAAKW,GAAGC,Y,CAGpC,MAAAC,GACE,IAAIC,EAAWd,KAAKC,KAAO,CAAEA,KAAMD,KAAKC,KAAMC,OAAQF,KAAKE,QAAW,GACtE,OACEa,EAAA,IAAAC,OAAAC,OAAA,CAAAC,IAAA,4CAAOJ,EAAQ,CAAEK,QAAS,IAAMnB,KAAKQ,sBAAuBY,MAAO,iBAAiBpB,KAAKI,OAAS,IAAM,QAAU,MAAMJ,KAAKG,KAAO,OAAS,OAC1IH,KAAKqB,MAAQN,EAAA,YAAAG,IAAA,2CAAUE,MAAM,OAAOC,KAAMrB,KAAKqB,OAChDN,EAAA,QAAAG,IAAA,4CACEH,EAAA,QAAAG,IAAA,8C","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-6ae18c50.entry.js → p-d93f128c.entry.js}

@@ -1,2 +1,2 @@
-import{r,h as s}from"./p-6b122987.js";const o=":host{display:inline-block;cursor:pointer}";const e=o;const t=class{constructor(s){r(this,s);this.isOpen=false}render(){return s("slot",{key:"3e51ceb827b5c52cb850e6433d3235e9400fe5c0"})}};t.style=e;export{t as ifx_dropdown_trigger};
-//# sourceMappingURL=p-6ae18c50.entry.js.map
+import{r,h as s}from"./p-c63974da.js";const o=":host{display:inline-block;cursor:pointer}";const e=o;const t=class{constructor(s){r(this,s);this.isOpen=false}render(){return s("slot",{key:"3e51ceb827b5c52cb850e6433d3235e9400fe5c0"})}};t.style=e;export{t as ifx_dropdown_trigger};
+//# sourceMappingURL=p-d93f128c.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownTriggerCss","IfxDropdownTriggerStyle0","DropdownItem","constructor","hostRef","this","isOpen","render","h","key"],"sources":["src/components/dropdown/dropdown-trigger/dropdown-trigger.scss?tag=ifx-dropdown-trigger&encapsulation=shadow","src/components/dropdown/dropdown-trigger/dropdown-trigger.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: inline-block;\n  cursor: pointer;\n}","// dropdown-trigger-button.tsx\nimport { Component, Prop, h } from \"@stencil/core\";\nimport { IOpenable } from '../IOpenable';\n\n@Component({\n  tag: 'ifx-dropdown-trigger',\n  styleUrl: 'dropdown-trigger.scss',\n  shadow: true\n})\n\nexport class DropdownItem implements IOpenable {\n  @Prop() isOpen: boolean = false;\n\n  render() {\n    return (\n      <slot />\n    )\n  }\n}"],"mappings":"sCAAA,MAAMA,EAAqB,6CAC3B,MAAAC,EAAeD,E,MCSFE,EAAY,MANzB,WAAAC,CAAAC,G,UAOUC,KAAAC,OAAkB,K,CAE1B,MAAAC,GACE,OACEC,EAAA,QAAAC,IAAA,4C","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as i,g as a}from"./p-c63974da.js";const r=".sidebar-filter-search-wrapper{display:flex;padding:12px 16px 16px 16px;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px;font-family:var(--ifx-font-family);background:#EEEDED}.topbar-filter-search-wrapper{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px;font-family:var(--ifx-font-family)}.topbar-filter-search-wrapper ifx-search-field{width:100%;}.filter-name{font-size:1rem;line-height:1.5rem;font-weight:600}";const s=r;const l=class{constructor(i){e(this,i);this.ifxFilterSearchChange=t(this,"ifxFilterSearchChange",7);this.disabled=false;this.showDeleteIcon=false;this.filterOrientation="sidebar"}valueChanged(e){this.host.setAttribute("value",e.toString())}handleFilterSearchChange(e){const t=this.host.parentElement.querySelector(`ifx-filter-search[filter-name="${this.filterName}"]`);if(t&&t!==this.host){throw new Error(`A search filter with the name '${this.filterName}' already exists.`)}this.filterValue=e.detail;this.showDeleteIcon=this.filterValue!=="";this.ifxFilterSearchChange.emit({filterName:this.filterName,filterValue:this.filterValue,filterKey:this.filterKey})}render(){return i("div",{key:"40579877c23e2f855a7c1f439b6a8a0a14cd7e83",class:`${this.filterOrientation==="sidebar"?"sidebar-filter-search-wrapper":"topbar-filter-search-wrapper"}`},i("div",{key:"aab33d490e5329cc5504f606e4fe90631600a180",class:"filter-name"},this.filterName),i("ifx-search-field",{key:"a56866107ccab40040930c1569586d48ac8dbc07",placeholder:this.placeholder,"show-delete-icon":this.showDeleteIcon,disabled:this.disabled,value:this.filterValue}))}get host(){return a(this)}static get watchers(){return{value:["valueChanged"]}}};l.style=s;export{l as ifx_filter_search};
+//# sourceMappingURL=p-d9553320.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["filterSearchCss","IfxFilterSearchStyle0","FilterSearch","constructor","hostRef","this","disabled","showDeleteIcon","filterOrientation","valueChanged","newValue","host","setAttribute","toString","handleFilterSearchChange","event","existingFilter","parentElement","querySelector","filterName","Error","filterValue","detail","ifxFilterSearchChange","emit","filterKey","render","h","key","class","placeholder","value"],"sources":["src/components/table-advanced-version/filter-type-group/filter-search/filter-search.scss?tag=ifx-filter-search&encapsulation=shadow","src/components/table-advanced-version/filter-type-group/filter-search/filter-search.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n\n\n.sidebar-filter-search-wrapper {\n  display: flex;\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200 tokens.$ifxSpace200 tokens.$ifxSpace200;\n  flex-direction: column;\n  align-items: flex-start;\n  align-self: stretch;\n  gap: tokens.$ifxSpace50;\n  font-family: var(--ifx-font-family);\n  background: tokens.$ifxColorEngineering200;\n}\n\n.topbar-filter-search-wrapper {\n  display:flex;\n  flex-direction: column;\n  align-items: flex-start;\n  align-self: stretch;\n  gap: tokens.$ifxSpace50;\n  font-family: var(--ifx-font-family);\n}\n\n.topbar-filter-search-wrapper ifx-search-field {\n  width: 100%; /* Ensure ifx-search-field takes up full width */\n}\n\n.filter-name {\n  font-size: tokens.$ifxFontSizeM;\n  line-height: tokens.$ifxLineHeightM;\n  font-weight: 600;\n}","import { Component, h, Listen, Watch, Element, Event, EventEmitter, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-filter-search',\n  styleUrl: 'filter-search.scss',\n  shadow: true,\n})\nexport class FilterSearch {\n  @Element() host: HTMLElement;\n  @Prop() filterName: string;\n  @Prop() disabled: boolean = false;\n  @Prop({ mutable: true }) filterValue: string;\n  @Prop() filterKey: string;\n  @State() showDeleteIcon: boolean = false;\n  @Prop() filterOrientation: string = 'sidebar'; //topbar\n  @Prop() placeholder: string;\n\n  @Event() ifxFilterSearchChange: EventEmitter;\n\n  @Watch('value')\n  valueChanged(newValue: boolean) {\n    this.host.setAttribute('value', newValue.toString());\n  }\n\n  @Listen('ifxInput')\n  handleFilterSearchChange(event: CustomEvent) {\n    // Check if a search filter with the same filterName already exists\n    const existingFilter = this.host.parentElement.querySelector(`ifx-filter-search[filter-name=\"${this.filterName}\"]`);\n    if (existingFilter && existingFilter !== this.host) {\n      throw new Error(`A search filter with the name '${this.filterName}' already exists.`);\n    }\n\n    // // Check if the filterName is 'search' and the filter is not the search component\n    // if (this.filterName === 'search' && this.filterKey !== 'text') {\n    //   throw new Error(\"The filter name 'search' is reserved for the search component.\");\n    // }\n\n    this.filterValue = event.detail;\n    this.showDeleteIcon = this.filterValue !== \"\";\n    this.ifxFilterSearchChange.emit({ filterName: this.filterName, filterValue: this.filterValue, filterKey: this.filterKey }); // Emitting filterKey along with other properties\n  }\n\n\n  render() {\n    return (\n      <div class={`${\n      this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'\n      }`}>\n      <div class=\"filter-name\">{this.filterName}</div>\n      <ifx-search-field placeholder={this.placeholder} show-delete-icon={this.showDeleteIcon} disabled={this.disabled} value={this.filterValue}>\n      </ifx-search-field>\n      </div>\n    );\n  }\n}\n\n"],"mappings":"yDAAA,MAAMA,EAAkB,ydACxB,MAAAC,EAAeD,E,MCMFE,EAAY,MALzB,WAAAC,CAAAC,G,uEAQUC,KAAAC,SAAoB,MAGnBD,KAAAE,eAA0B,MAC3BF,KAAAG,kBAA4B,S,CAMpC,YAAAC,CAAaC,GACXL,KAAKM,KAAKC,aAAa,QAASF,EAASG,W,CAI3C,wBAAAC,CAAyBC,GAEvB,MAAMC,EAAiBX,KAAKM,KAAKM,cAAcC,cAAc,kCAAkCb,KAAKc,gBACpG,GAAIH,GAAkBA,IAAmBX,KAAKM,KAAM,CAClD,MAAM,IAAIS,MAAM,kCAAkCf,KAAKc,8B,CAQzDd,KAAKgB,YAAcN,EAAMO,OACzBjB,KAAKE,eAAiBF,KAAKgB,cAAgB,GAC3ChB,KAAKkB,sBAAsBC,KAAK,CAAEL,WAAYd,KAAKc,WAAYE,YAAahB,KAAKgB,YAAaI,UAAWpB,KAAKoB,W,CAIhH,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAO,GACZxB,KAAKG,oBAAsB,UAAY,gCAAkC,kCAEzEmB,EAAA,OAAAC,IAAA,2CAAKC,MAAM,eAAexB,KAAKc,YAC/BQ,EAAA,oBAAAC,IAAA,2CAAkBE,YAAazB,KAAKyB,YAAW,mBAAoBzB,KAAKE,eAAgBD,SAAUD,KAAKC,SAAUyB,MAAO1B,KAAKgB,c","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-28fb795b.entry.js → p-da6efe6b.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as t,g as r}from"./p-6b122987.js";const a=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:flex}.breadcrumb{list-style:none;padding:0px;margin:0px;display:flex;flex-direction:row;font-family:var(--ifx-font-family);font-size:0.875rem;align-items:flex-start}';const o=a;const n=class{constructor(t){e(this,t)}componentDidLoad(){const e=this.el.shadowRoot.firstChild;this.validateBreadcrumbItemStructure(e)}validateBreadcrumbItemStructure(e){if(!e){console.error("element not found");return}const t=e.querySelector("slot");if(t){const e=t.assignedNodes();for(let t=0;t<e.length;t++){const r=e[t];if(r.nodeName==="IFX-BREADCRUMB-ITEM"){const e=r;const t=e.querySelector("ifx-breadcrumb-item-label");const a=e.querySelector("ifx-dropdown-menu");if(t.hasAttribute("url")&&a){throw new Error("ifx-breadcrumb-item cannot have both a url and a dropdown menu.")}}}}}render(){return t("nav",{key:"82aec60bebf9a71d7cdcfc2916f91c0e36dee868","aria-label":"Page navigation breadcrumb"},t("ol",{key:"70bae75b26b5df4c509f16c0ab8e2b10333de8ac",class:"breadcrumb"},t("slot",{key:"1cb28e3640f20319349b4f6d3cb1568508d3b1ba"})))}get el(){return r(this)}};n.style=o;export{n as ifx_breadcrumb};
-//# sourceMappingURL=p-28fb795b.entry.js.map
+import{r as e,h as t,g as a}from"./p-c63974da.js";const r=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:flex}.breadcrumb{list-style:none;padding:0px;margin:0px;display:flex;flex-direction:row;font-family:var(--ifx-font-family);font-size:0.875rem;align-items:flex-start}';const o=r;const n=class{constructor(t){e(this,t)}componentDidLoad(){const e=this.el.shadowRoot.firstChild;this.validateBreadcrumbItemStructure(e)}validateBreadcrumbItemStructure(e){if(!e){console.error("element not found");return}const t=e.querySelector("slot");if(t){const e=t.assignedNodes();for(let t=0;t<e.length;t++){const a=e[t];if(a.nodeName==="IFX-BREADCRUMB-ITEM"){const e=a;const t=e.querySelector("ifx-breadcrumb-item-label");const r=e.querySelector("ifx-dropdown-menu");if(t.hasAttribute("url")&&r){throw new Error("ifx-breadcrumb-item cannot have both a url and a dropdown menu.")}}}}}render(){return t("nav",{key:"82aec60bebf9a71d7cdcfc2916f91c0e36dee868","aria-label":"Page navigation breadcrumb"},t("ol",{key:"70bae75b26b5df4c509f16c0ab8e2b10333de8ac",class:"breadcrumb"},t("slot",{key:"1cb28e3640f20319349b4f6d3cb1568508d3b1ba"})))}get el(){return a(this)}};n.style=o;export{n as ifx_breadcrumb};
+//# sourceMappingURL=p-da6efe6b.entry.js.map

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

@@ -0,0 +1,2 @@
+import{r as e,c as i,h as t,g as c}from"./p-c63974da.js";const s=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-block;user-select:none}.container{display:flex;flex-direction:row;align-items:center}.container.gap{gap:16px}.switch__checkbox-container{padding:4px;display:flex;align-items:center;position:relative;width:32px;height:16px;background-color:#FFFFFF;border:1px solid #575352;border-radius:20px;cursor:pointer;transition:background-color 0.3s ease;outline:none}.switch__checkbox-container:focus{outline:4px solid #0A8276;outline-offset:2px}.switch__checkbox-container:focus:not(:focus-visible){outline:none}.switch__checkbox-container:focus-visible{outline:2px solid #0A8276;outline-offset:2px}.switch__checkbox-container.disabled{cursor:default;border-color:#BFBBBB}.switch__label-wrapper label:hover{cursor:pointer}.switch__label-wrapper.disabled{color:#BFBBBB}.switch__checkbox-wrapper .switch{width:16px;height:16px;background-color:#575352;border-radius:50%;transition:transform 0.3s ease, background-color 0.3s ease}.switch__checkbox-wrapper .switch.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}.switch__checkbox-wrapper .switch.checked{transform:translateX(16px);background-color:#FFFFFF}.switch__checkbox-wrapper .switch.checked.disabled{cursor:default}.switch__checkbox-container:hover .toggle-switch{box-shadow:0 0 5px rgba(0, 0, 0, 0.2)}.switch__checkbox-container.checked{background-color:#0A8276;border-color:#0A8276}.switch__checkbox-container.checked.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}';const o=s;const a=class{constructor(t){e(this,t);this.ifxChange=i(this,"ifxChange",7);if(t.$hostElement$["s-ei"]){this.internals=t.$hostElement$["s-ei"]}else{this.internals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.internals}this.checked=false;this.name="";this.disabled=false;this.internalChecked=false}async isChecked(){return this.internalChecked}componentWillLoad(){this.internalChecked=this.checked}toggleLabelGap(){const e=this.el.shadowRoot.querySelector("slot");const i=this.el.shadowRoot.querySelector(".container");if(e.assignedNodes().length){i.classList.add("gap")}else{i.classList.remove("gap")}}componentDidLoad(){this.toggleLabelGap()}valueChanged(e,i){if(e!==i){this.internalChecked=e}}toggleSwitch(){if(this.disabled)return;this.internalChecked=!this.internalChecked;if(this.internalChecked){if(this.value!==undefined){this.internals.setFormValue(this.value)}else{this.internals.setFormValue("on")}}else{this.internals.setFormValue(null)}this.ifxChange.emit(this.internalChecked)}handleKeyDown(e){if(this.disabled)return;if(e.key==="Enter"||e.key===" "){this.toggleSwitch()}}formResetCallback(){this.internals.setFormValue(null)}render(){return t("div",{key:"de6389b77c207826d77a570abe5478c6367d1a2f",class:"container",role:"switch","aria-checked":this.internalChecked?"true":"false","aria-label":this.name,onClick:()=>this.toggleSwitch(),onKeyDown:e=>this.handleKeyDown(e)},t("div",{key:"1106e7915d271968cfb7e492416e4c4d3880c79f",class:`switch__checkbox-container ${this.internalChecked?"checked":""} ${this.disabled?"disabled":""}`,tabindex:"0"},t("div",{key:"28e9a3a6b19b15e0bf7728de60d0096b0105e479",class:"switch__checkbox-wrapper"},t("input",{key:"707c0926234f0efd3e89add4de113a60d93fa0f6",type:"checkbox",hidden:true,name:this.name,disabled:this.disabled,checked:this.internalChecked,value:`${this.value}`}),t("div",{key:"c49f39e736dedca763a5e64c244150511002b362",class:`switch ${this.internalChecked?"checked":""} ${this.disabled?"disabled":""}`}))),t("div",{key:"11b0ea462a831639c84aa58cfaffed801881dc6a",class:`switch__label-wrapper ${this.disabled?"disabled":""}`},t("label",{key:"dc3fd52e702f0630283d871fff9b47184db4e535",htmlFor:"switch"},t("slot",{key:"4b77fbdea92c23c4d056b71ad5ac889f24e34277",onSlotchange:()=>this.toggleLabelGap()}))))}static get formAssociated(){return true}get el(){return c(this)}static get watchers(){return{checked:["valueChanged"]}}};a.style=o;export{a as ifx_switch};
+//# sourceMappingURL=p-dd5b5ec5.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["switchCss","IfxSwitchStyle0","Switch","constructor","hostRef","this","checked","name","disabled","internalChecked","isChecked","componentWillLoad","toggleLabelGap","slot","el","shadowRoot","querySelector","container","assignedNodes","length","classList","add","remove","componentDidLoad","valueChanged","newValue","oldValue","toggleSwitch","value","undefined","internals","setFormValue","ifxChange","emit","handleKeyDown","event","key","formResetCallback","render","h","class","role","onClick","onKeyDown","tabindex","type","hidden","htmlFor","onSlotchange"],"sources":["src/components/switch/switch.scss?tag=ifx-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n/* switch.css */\n:host {\n  display: inline-block;\n  user-select: none;\n}\n\n.container {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  &.gap {\n    gap: tokens.$ifxSpace200;\n  }\n}\n\n\n.switch__checkbox-container {\n  padding: tokens.$ifxSpace50;\n  display: flex;\n  align-items: center;\n  position: relative;\n  // Subtracting padding size from both height and width\n  width: (tokens.$ifxSpace500)-8px;\n  height: 16px;\n  background-color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorEngineering500;\n  border-radius: 20px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n  outline: none;\n\n  &:focus {\n    outline: 4px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n\n  &.disabled {\n    cursor: default;\n    border-color: tokens.$ifxColorEngineering300;\n  }\n\n\n}\n\n\n.switch__label-wrapper {\n\n  & label { \n    &:hover { \n      cursor: pointer;\n    }\n  }\n\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n  }\n}\n\n\n.switch__checkbox-wrapper {\n\n  .switch {\n    // position: absolute;\n    width: tokens.$ifxSpace200;\n    height: tokens.$ifxSpace200;\n    background-color: tokens.$ifxColorEngineering500;\n    border-radius: 50%;\n    transition: transform 0.3s ease, background-color 0.3s ease;\n\n    &.disabled {\n      background-color: tokens.$ifxColorEngineering300;\n      border-color: tokens.$ifxColorEngineering300;\n      cursor: default;\n    }\n  }\n\n  .switch.checked {\n    transform: translateX(16px);\n    background-color: tokens.$ifxColorBaseWhite;\n\n    &.disabled {\n      cursor: default;\n    }\n\n  }\n\n}\n\n.switch__checkbox-container:hover .toggle-switch {\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.switch__checkbox-container.checked {\n  background-color: tokens.$ifxColorOcean500;\n  border-color: tokens.$ifxColorOcean500;\n\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    border-color: tokens.$ifxColorEngineering300;\n    cursor: default;\n  }\n}","import { AttachInternals, Method } from '@stencil/core';\nimport { Component, Prop, State, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-switch',\n  styleUrl: 'switch.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class Switch {\n  @Prop() checked: boolean = false;\n  @Prop() name: string = '';\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @State() internalChecked: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Element() el: HTMLIfxSwitchElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;\n\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n  }\n  \n\n  toggleLabelGap() {\n    const slot = this.el.shadowRoot.querySelector('slot');\n    const container = this.el.shadowRoot.querySelector('.container');\n    if (slot.assignedNodes().length) {\n      container.classList.add('gap')\n    } else { \n      container.classList.remove('gap')\n    }\n  }\n  \n  componentDidLoad() {\n    this.toggleLabelGap();\n\n  }\n    \n  @Watch('checked')\n  valueChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalChecked = newValue;\n    }\n  }\n\n  toggleSwitch() {\n    if (this.disabled) return;\n    this.internalChecked = !this.internalChecked;\n\n    if (this.internalChecked) {\n      if (this.value !== undefined) {\n        this.internals.setFormValue(this.value);\n      } else {\n        this.internals.setFormValue(\"on\")\n      }\n    } else {\n      this.internals.setFormValue(null)\n    }\n\n    this.ifxChange.emit(this.internalChecked);\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) return;\n    // If the pressed key is either 'Enter' or 'Space' \n    if (event.key === 'Enter' || event.key === ' ') {\n      this.toggleSwitch();\n    }\n  }\n\n  /**\n   * Callback for form association.\n   * Called whenever the form is reset.\n   */\n  formResetCallback() {\n    this.internals.setFormValue(null);\n  }\n\n  render() {\n    return (\n      <div\n        class=\"container\"\n        role=\"switch\"\n        aria-checked={this.internalChecked ? 'true' : 'false'}\n        aria-label={this.name}\n        onClick={() => this.toggleSwitch()}\n        onKeyDown={(event) => this.handleKeyDown(event)}\n        >\n        {/* Checkbox */}\n        <div \n          class={`switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n          tabindex=\"0\"\n        >\n          <div class=\"switch__checkbox-wrapper\">\n            <input type=\"checkbox\" hidden\n              name={this.name}\n              disabled={this.disabled}\n              checked={this.internalChecked}\n              value={`${this.value}`} />\n            <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n          </div>\n        </div >\n\n        {/* Label */}\n        <div class={`switch__label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n          <label htmlFor=\"switch\">\n            <slot onSlotchange={() => this.toggleLabelGap()} />\n          </label>\n        </div>\n      </div>\n    )\n\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAY,giDAClB,MAAAC,EAAeD,E,MCSFE,EAAM,MANnB,WAAAC,CAAAC,G,+MAOUC,KAAAC,QAAmB,MACnBD,KAAAE,KAAe,GACfF,KAAAG,SAAoB,MAEnBH,KAAAI,gBAA2B,K,CASpC,eAAMC,GACJ,OAAOL,KAAKI,e,CAGd,iBAAAE,GACEN,KAAKI,gBAAkBJ,KAAKC,O,CAI9B,cAAAM,GACE,MAAMC,EAAOR,KAAKS,GAAGC,WAAWC,cAAc,QAC9C,MAAMC,EAAYZ,KAAKS,GAAGC,WAAWC,cAAc,cACnD,GAAIH,EAAKK,gBAAgBC,OAAQ,CAC/BF,EAAUG,UAAUC,IAAI,M,KACnB,CACLJ,EAAUG,UAAUE,OAAO,M,EAI/B,gBAAAC,GACElB,KAAKO,gB,CAKP,YAAAY,CAAaC,EAAmBC,GAC9B,GAAID,IAAaC,EAAU,CACzBrB,KAAKI,gBAAkBgB,C,EAI3B,YAAAE,GACE,GAAItB,KAAKG,SAAU,OACnBH,KAAKI,iBAAmBJ,KAAKI,gBAE7B,GAAIJ,KAAKI,gBAAiB,CACxB,GAAIJ,KAAKuB,QAAUC,UAAW,CAC5BxB,KAAKyB,UAAUC,aAAa1B,KAAKuB,M,KAC5B,CACLvB,KAAKyB,UAAUC,aAAa,K,MAEzB,CACL1B,KAAKyB,UAAUC,aAAa,K,CAG9B1B,KAAK2B,UAAUC,KAAK5B,KAAKI,gB,CAG3B,aAAAyB,CAAcC,GACZ,GAAI9B,KAAKG,SAAU,OAEnB,GAAI2B,EAAMC,MAAQ,SAAWD,EAAMC,MAAQ,IAAK,CAC9C/B,KAAKsB,c,EAQT,iBAAAU,GACEhC,KAAKyB,UAAUC,aAAa,K,CAG9B,MAAAO,GACE,OACEC,EAAA,OAAAH,IAAA,2CACEI,MAAM,YACNC,KAAK,SAAQ,eACCpC,KAAKI,gBAAkB,OAAS,QAAO,aACzCJ,KAAKE,KACjBmC,QAAS,IAAMrC,KAAKsB,eACpBgB,UAAYR,GAAU9B,KAAK6B,cAAcC,IAGzCI,EAAA,OAAAH,IAAA,2CACEI,MAAO,8BAA8BnC,KAAKI,gBAAkB,UAAY,MAAMJ,KAAKG,SAAW,WAAa,KAC3GoC,SAAS,KAETL,EAAA,OAAAH,IAAA,2CAAKI,MAAM,4BACTD,EAAA,SAAAH,IAAA,2CAAOS,KAAK,WAAWC,OAAM,KAC3BvC,KAAMF,KAAKE,KACXC,SAAUH,KAAKG,SACfF,QAASD,KAAKI,gBACdmB,MAAO,GAAGvB,KAAKuB,UACjBW,EAAA,OAAAH,IAAA,2CAAKI,MAAO,UAAUnC,KAAKI,gBAAkB,UAAY,MAAMJ,KAAKG,SAAW,WAAa,SAKhG+B,EAAA,OAAAH,IAAA,2CAAKI,MAAO,yBAAyBnC,KAAKG,SAAW,WAAa,MAChE+B,EAAA,SAAAH,IAAA,2CAAOW,QAAQ,UACbR,EAAA,QAAAH,IAAA,2CAAMY,aAAc,IAAM3C,KAAKO,qB","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-44b86e18.entry.js → p-e52d0b1a.entry.js}

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["searchFieldCss","IfxSearchFieldStyle0","SearchField","constructor","hostRef","this","value","insideDropdown","showDeleteIcon","showDeleteIconInternalState","disabled","size","isFocused","placeholder","maxlength","handleInput","query","inputElement","ifxInput","emit","handleDelete","handleOutsideClick","event","path","composedPath","includes","valueWatcher","newValue","focusInput","focus","componentWillUpdate","render","h","key","class","getWrapperClassNames","tabindex","onFocus","onClick","icon","ref","el","type","onInput","getSizeClass","classNames"],"sources":["src/components/search-field/search-field.scss?tag=ifx-search-field&encapsulation=shadow","src/components/search-field/search-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.search-field {\n  box-sizing: border-box;\n  background-color: tokens.$ifxColorBaseWhite;\n  width: 100%;\n  font-family: var(--ifx-font-family);\n\n\n  .search-field__wrapper {\n    box-sizing: border-box;\n    height: tokens.$ifxSize500;\n    display: flex;\n    align-items: center;\n    border: 1px solid #8D8786;\n    border-radius: tokens.$ifxBorderRadius12;\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    gap: tokens.$ifxSpace150;\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 0;\n    position: relative;\n    width: 100%;\n    outline: none;\n    color: tokens.$ifxColorEngineering400;\n\n    &.focused {\n      border: 1px solid tokens.$ifxColorOcean500;\n\n      & ifx-icon {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    &.search-field__wrapper-s {\n      height: 36px;\n    }\n\n\n    &:hover:not(.focused, :focus) {\n      border: 1px solid #3C3A39;\n    }\n\n    &:focus {\n      outline: none;\n      border: 1px solid #0A8276;\n    }\n\n\n    .delete-icon {\n      right: 12px;\n      cursor: pointer;\n    }\n\n    input[type='text'] {\n      font-style: normal;\n      font-weight: 400;\n      font-size: 16px;\n      //line-height: 24px;\n      color: #8D8786;\n      border: none;\n      width: 100%;\n      outline: none;\n      //height: 100%;\n      height: 16px;\n\n      &:focus {\n        outline: none;\n        color: #1d1d1d;\n      }\n\n      &:disabled {\n        background-color: #EEEDED;\n      }\n    }\n\n    &:has(input[disabled]) {\n      background-color: #EEEDED;\n    }\n  }\n}","import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n\n@Component({\n  tag: 'ifx-search-field',\n  styleUrl: 'search-field.scss',\n  shadow: true\n})\n\n\nexport class SearchField {\n  private inputElement: HTMLInputElement;\n  @Prop({ mutable: true }) value: string = '';\n\n  @Event() ifxInput: EventEmitter<String>;\n  @State() insideDropdown: boolean = false;\n\n  @Prop() showDeleteIcon: boolean = false;\n  @State() showDeleteIconInternalState: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() size: string = 'l';\n  @State() isFocused: boolean = false;\n  @Prop() placeholder: string = \"Search...\";\n  @Prop() maxlength?: number = null;  \n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.inputElement)) {\n      this.isFocused = false;\n    }\n  }\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n\n  handleInput = () => {\n    const query = this.inputElement.value;\n    this.value = query; // update the value property when input changes\n    this.ifxInput.emit(this.value);\n  };\n\n  handleDelete = () => {\n    this.inputElement.value = '';\n    this.value = \"\";\n    this.ifxInput.emit(this.value);\n  }\n\n  focusInput() {\n    this.inputElement.focus();\n    this.isFocused = true;\n  }\n  \n\n\n\n  componentWillUpdate() {\n    if (this.value !== \"\") {\n      this.showDeleteIconInternalState = true;\n    } else this.showDeleteIconInternalState = false;\n  }\n\n  render() {\n    return (\n      <div aria-label=\"a search field for user input\" aria-disabled={this.disabled} aria-value={this.value} class='search-field'>\n        <div class={this.getWrapperClassNames()}\n          tabindex={1}\n          onFocus={() => this.focusInput()}\n          onClick={() => this.focusInput()}\n        >\n          <ifx-icon icon=\"search-16\" class=\"search-icon\"></ifx-icon>\n          <input\n            ref={(el) => (this.inputElement = el)}\n            type=\"text\"\n            onInput={() => this.handleInput()}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            maxlength={this.maxlength}\n            value={this.value} // bind the value property to input element\n          />\n          {this.showDeleteIcon && this.showDeleteIconInternalState ? (\n            <ifx-icon icon=\"cremove16\" class=\"delete-icon\" onClick={this.handleDelete}>\n            </ifx-icon>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"search-field__wrapper-s\"\n      : \"\";\n  }\n\n\n  getWrapperClassNames() {\n    return classNames(\n      `search-field__wrapper`,\n      `search-field__wrapper ${this.getSizeClass()}`,\n      `${this.isFocused ? 'focused' : \"\"}`\n    );\n  }\n}"],"mappings":"sFAAA,MAAMA,EAAiB,61CACvB,MAAAC,EAAeD,E,MCWFE,EAAW,MAPxB,WAAAC,CAAAC,G,6CAS2BC,KAAAC,MAAgB,GAGhCD,KAAAE,eAA0B,MAE3BF,KAAAG,eAA0B,MACzBH,KAAAI,4BAAuC,MACxCJ,KAAAK,SAAoB,MACpBL,KAAAM,KAAe,IACdN,KAAAO,UAAqB,MACtBP,KAAAQ,YAAsB,YACtBR,KAAAS,UAAqB,KAkB7BT,KAAAU,YAAc,KACZ,MAAMC,EAAQX,KAAKY,aAAaX,MAChCD,KAAKC,MAAQU,EACbX,KAAKa,SAASC,KAAKd,KAAKC,MAAM,EAGhCD,KAAAe,aAAe,KACbf,KAAKY,aAAaX,MAAQ,GAC1BD,KAAKC,MAAQ,GACbD,KAAKa,SAASC,KAAKd,KAAKC,MAAM,C,CAxBhC,kBAAAe,CAAmBC,GACjB,MAAMC,EAAOD,EAAME,eACnB,IAAKD,EAAKE,SAASpB,KAAKY,cAAe,CACrCZ,KAAKO,UAAY,K,EAKrB,YAAAc,CAAaC,GACX,GAAIA,IAAatB,KAAKY,aAAaX,MAAO,CACxCD,KAAKY,aAAaX,MAAQqB,C,EAiB9B,UAAAC,GACEvB,KAAKY,aAAaY,QAClBxB,KAAKO,UAAY,I,CAMnB,mBAAAkB,GACE,GAAIzB,KAAKC,QAAU,GAAI,CACrBD,KAAKI,4BAA8B,I,MAC9BJ,KAAKI,4BAA8B,K,CAG5C,MAAAsB,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,gCAA+B,gBAAgB5B,KAAKK,SAAQ,aAAcL,KAAKC,MAAO4B,MAAM,gBAC1GF,EAAA,OAAAC,IAAA,2CAAKC,MAAO7B,KAAK8B,uBACfC,SAAU,EACVC,QAAS,IAAMhC,KAAKuB,aACpBU,QAAS,IAAMjC,KAAKuB,cAEpBI,EAAA,YAAAC,IAAA,2CAAUM,KAAK,YAAYL,MAAM,gBACjCF,EAAA,SAAAC,IAAA,2CACEO,IAAMC,GAAQpC,KAAKY,aAAewB,EAClCC,KAAK,OACLC,QAAS,IAAMtC,KAAKU,cACpBF,YAAaR,KAAKQ,YAClBH,SAAUL,KAAKK,SACfI,UAAWT,KAAKS,UAChBR,MAAOD,KAAKC,QAEbD,KAAKG,gBAAkBH,KAAKI,4BAC3BuB,EAAA,YAAUO,KAAK,YAAYL,MAAM,cAAcI,QAASjC,KAAKe,eAE3D,M,CAMZ,YAAAwB,GACE,MAAO,GAAGvC,KAAKM,SAAW,IACtB,0BACA,E,CAIN,oBAAAwB,GACE,OAAOU,EACL,wBACA,yBAAyBxC,KAAKuC,iBAC9B,GAAGvC,KAAKO,UAAY,UAAY,K","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as s,h as e}from"./p-c63974da.js";const t=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:flex;width:100%}.progress-bar{height:16px;bottom:0;right:0;top:0;left:0;display:flex;height:20px;border-radius:1px;width:100%;overflow:hidden;background-color:#EEEDED;font-family:var(--ifx-font-family, sans-serif)}.progress-bar.s{height:4px}.progress-bar .label{font-style:normal;font-size:0.875rem;font-weight:400;line-height:1.25rem;color:#FFFFFF}.progress-bar .progress{display:flex;align-items:center;justify-content:center;min-width:fit-content;height:100%;background-color:#0A8276;transition:width 0.2s ease}';const r=t;const i=class{constructor(e){s(this,e);this.value=0;this.showLabel=false}valueChanged(s,e){if(s!==e){this.internalValue=s}}componentWillLoad(){this.internalValue=this.value}render(){return e("div",{key:"9357496a783f4b3e1b044ab4d706ee83e443dd58","aria-label":"a progress bar","aria-value":this.value,class:`progress-bar ${this.size}`},e("div",{key:"29fd4c791396b927456b4fc514fdbada0d03bc7f",class:"progress",style:{width:`${this.internalValue}%`}},this.showLabel&&this.size!=="s"&&this.internalValue!==0&&e("span",{key:"945e380d7991c53930f1b3ebc396cfec1bc06d31",class:"label"},`${this.internalValue}%`)))}static get watchers(){return{value:["valueChanged"]}}};i.style=r;export{i as ifx_progress_bar};
+//# sourceMappingURL=p-e7e87a4a.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["progressBarCss","IfxProgressBarStyle0","ProgressBar","constructor","hostRef","this","value","showLabel","valueChanged","newValue","oldValue","internalValue","componentWillLoad","render","h","key","class","size","style","width"],"sources":["src/components/progress-bar/progress-bar.scss?tag=ifx-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n  width: 100%;\n}\n\n.progress-bar {\n  height: tokens.$ifxSize200;\n  bottom: 0;\n  right: 0;\n  top: 0;\n  left: 0;\n  display: flex;\n  height: tokens.$ifxSize250;\n  border-radius: tokens.$ifxBorderRadius12;\n  width: 100%; // Ensure the bar itself can grow up to 100% width\n  overflow: hidden; // Ensures that the inner progress bar doesn't exceed the width of the outer progress bar\n  background-color: tokens.$ifxColorEngineering200;\n  font-family: var(--ifx-font-family, sans-serif);\n  \n  &.s {\n    height: 4px;\n  }\n\n  .label {\n    font-style: normal;\n    font-size: tokens.$ifxFontSizeS;\n    font-weight: 400;\n    line-height: tokens.$ifxLineHeightS;\n    color: tokens.$ifxColorBaseWhite;\n  }\n  \n  .progress {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: fit-content;\n    height: 100%;\n    background-color: #0A8276;\n    transition: width 0.2s ease;\n  }\n}","import { Component, Prop, h, State, Watch } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-progress-bar',\n  styleUrl: 'progress-bar.scss',\n  shadow: true\n})\nexport class ProgressBar {\n  @Prop() value: number = 0;\n  @Prop() size: string;\n  @Prop() showLabel: boolean = false;\n\n  @State() internalValue: number;\n\n  @Watch('value')\n  valueChanged(newValue: number, oldValue: number) {\n    if (newValue !== oldValue) {\n      this.internalValue = newValue;\n    }\n  }\n\n  \n  componentWillLoad() {\n    this.internalValue = this.value;\n  }\n\n\n\n  render() {\n    return (\n      <div aria-label='a progress bar' aria-value={this.value}  class={`progress-bar ${this.size}`}>\n        <div class=\"progress\" style={{ width: `${this.internalValue}%` }}>\n          {this.showLabel && this.size !== \"s\" && this.internalValue !== 0 && <span class=\"label\">{`${this.internalValue}%`}</span>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAiB,0mBACvB,MAAAC,EAAeD,E,MCOFE,EAAW,MALxB,WAAAC,CAAAC,G,UAMUC,KAAAC,MAAgB,EAEhBD,KAAAE,UAAqB,K,CAK7B,YAAAC,CAAaC,EAAkBC,GAC7B,GAAID,IAAaC,EAAU,CACzBL,KAAKM,cAAgBF,C,EAKzB,iBAAAG,GACEP,KAAKM,cAAgBN,KAAKC,K,CAK5B,MAAAO,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,iBAAgB,aAAaV,KAAKC,MAAQU,MAAO,gBAAgBX,KAAKY,QACpFH,EAAA,OAAAC,IAAA,2CAAKC,MAAM,WAAWE,MAAO,CAAEC,MAAO,GAAGd,KAAKM,mBAC3CN,KAAKE,WAAaF,KAAKY,OAAS,KAAOZ,KAAKM,gBAAkB,GAAKG,EAAA,QAAAC,IAAA,2CAAMC,MAAM,SAAS,GAAGX,KAAKM,mB","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as t,c as s,h as e,g as i}from"./p-c63974da.js";const a=".list-entry{display:flex;align-items:center;margin-top:8px;align-self:stretch}";const r=a;const h=class{constructor(e){t(this,e);this.ifxListEntryChange=s(this,"ifxListEntryChange",7)}valueChanged(t){if(t){this.host.setAttribute("value","true")}else{this.host.removeAttribute("value")}}handleFilterEntryChange(t){this.value=t.detail;this.ifxListEntryChange.emit({label:this.label,value:this.value,type:this.type})}render(){return e("div",{key:"9ecd8abf6c384ef0e8d46201f4df768521bfc8a8",class:"wrapper"},this.type==="checkbox"?e("div",{class:"list-entry"},e("ifx-checkbox",{size:"s",checked:this.value},this.label)):e("div",{class:"list-entry"},e("ifx-radio-button",{size:"s",checked:this.value},this.label)))}get host(){return i(this)}static get watchers(){return{value:["valueChanged"]}}};h.style=r;export{h as ifx_list_entry};
+//# sourceMappingURL=p-f36ba7ae.entry.js.map

package/dist/infineon-design-system-stencil/{p-360d9e44.entry.js.map → p-f36ba7ae.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["listEntryCss","IfxListEntryStyle0","ListEntry","valueChanged","newValue","this","host","setAttribute","removeAttribute","handleFilterEntryChange","event","value","detail","ifxListEntryChange","emit","label","type","render","h","key","class","size","checked"],"sources":["src/components/table-advanced-version/list/list-entry/list-entry.scss?tag=ifx-list-entry&encapsulation=shadow","src/components/table-advanced-version/list/list-entry/list-entry.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n\n.list-entry {\n  display: flex;\n  align-items: center;\n  margin-top: tokens.$ifxSpace100; //gap doesnt apply to child elements\n  align-self: stretch;\n}","import { Component, h, Prop, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-list-entry',\n  styleUrl: 'list-entry.scss',\n  shadow: true,\n})\nexport class ListEntry {\n  @Element() host: HTMLElement;\n  @Prop({ mutable: true }) value: boolean;\n  @Prop() label: string;\n\n  @Prop() type: string;\n  @Event() ifxListEntryChange: EventEmitter;\n\n\n  @Watch('value')\n  valueChanged(newValue: boolean) {\n    if (newValue) {\n      this.host.setAttribute('value', 'true');\n    } else {\n      this.host.removeAttribute('value');\n    }\n  }\n\n  @Listen('ifxChange')\n  handleFilterEntryChange(event: CustomEvent) {\n    this.value = event.detail;\n    this.ifxListEntryChange.emit({ label: this.label, value: this.value, type: this.type });\n  }\n\n\n  render() {\n    return (\n      <div class=\"wrapper\">\n        {this.type === 'checkbox' ? (\n          <div class=\"list-entry\">\n            <ifx-checkbox size=\"s\" checked={this.value}>{this.label}</ifx-checkbox>\n          </div>\n        ) : (\n          <div class=\"list-entry\">\n            <ifx-radio-button size=\"s\" checked={this.value}>{this.label}</ifx-radio-button>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAe,iFACrB,MAAAC,EAAeD,E,MCMFE,EAAS,M,8IAUpB,YAAAC,CAAaC,GACX,GAAIA,EAAU,CACZC,KAAKC,KAAKC,aAAa,QAAS,O,KAC3B,CACLF,KAAKC,KAAKE,gBAAgB,Q,EAK9B,uBAAAC,CAAwBC,GACtBL,KAAKM,MAAQD,EAAME,OACnBP,KAAKQ,mBAAmBC,KAAK,CAAEC,MAAOV,KAAKU,MAAOJ,MAAON,KAAKM,MAAOK,KAAMX,KAAKW,M,CAIlF,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,WACRf,KAAKW,OAAS,WACbE,EAAA,OAAKE,MAAM,cACTF,EAAA,gBAAcG,KAAK,IAAIC,QAASjB,KAAKM,OAAQN,KAAKU,QAGpDG,EAAA,OAAKE,MAAM,cACTF,EAAA,oBAAkBG,KAAK,IAAIC,QAASjB,KAAKM,OAAQN,KAAKU,Q","ignoreList":[]}
+{"version":3,"names":["listEntryCss","IfxListEntryStyle0","ListEntry","valueChanged","newValue","this","host","setAttribute","removeAttribute","handleFilterEntryChange","event","value","detail","ifxListEntryChange","emit","label","type","render","h","key","class","size","checked"],"sources":["src/components/table-advanced-version/list/list-entry/list-entry.scss?tag=ifx-list-entry&encapsulation=shadow","src/components/table-advanced-version/list/list-entry/list-entry.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n\n.list-entry {\n  display: flex;\n  align-items: center;\n  margin-top: tokens.$ifxSpace100; //gap doesnt apply to child elements\n  align-self: stretch;\n}","import { Component, h, Prop, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-list-entry',\n  styleUrl: 'list-entry.scss',\n  shadow: true,\n})\nexport class ListEntry {\n  @Element() host: HTMLElement;\n  @Prop({ mutable: true }) value: boolean;\n  @Prop() label: string;\n\n  @Prop() type: string;\n  @Event() ifxListEntryChange: EventEmitter;\n\n\n  @Watch('value')\n  valueChanged(newValue: boolean) {\n    if (newValue) {\n      this.host.setAttribute('value', 'true');\n    } else {\n      this.host.removeAttribute('value');\n    }\n  }\n\n  @Listen('ifxChange')\n  handleFilterEntryChange(event: CustomEvent) {\n    this.value = event.detail;\n    this.ifxListEntryChange.emit({ label: this.label, value: this.value, type: this.type });\n  }\n\n\n  render() {\n    return (\n      <div class=\"wrapper\">\n        {this.type === 'checkbox' ? (\n          <div class=\"list-entry\">\n            <ifx-checkbox size=\"s\" checked={this.value}>{this.label}</ifx-checkbox>\n          </div>\n        ) : (\n          <div class=\"list-entry\">\n            <ifx-radio-button size=\"s\" checked={this.value}>{this.label}</ifx-radio-button>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAe,iFACrB,MAAAC,EAAeD,E,MCMFE,EAAS,M,gFAUpB,YAAAC,CAAaC,GACX,GAAIA,EAAU,CACZC,KAAKC,KAAKC,aAAa,QAAS,O,KAC3B,CACLF,KAAKC,KAAKE,gBAAgB,Q,EAK9B,uBAAAC,CAAwBC,GACtBL,KAAKM,MAAQD,EAAME,OACnBP,KAAKQ,mBAAmBC,KAAK,CAAEC,MAAOV,KAAKU,MAAOJ,MAAON,KAAKM,MAAOK,KAAMX,KAAKW,M,CAIlF,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,WACRf,KAAKW,OAAS,WACbE,EAAA,OAAKE,MAAM,cACTF,EAAA,gBAAcG,KAAK,IAAIC,QAASjB,KAAKM,OAAQN,KAAKU,QAGpDG,EAAA,OAAKE,MAAM,cACTF,EAAA,oBAAkBG,KAAK,IAAIC,QAASjB,KAAKM,OAAQN,KAAKU,Q","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-c1b1b593.entry.js → p-f4d00e57.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as n,a as e,g as o}from"./p-6b122987.js";import{c as i}from"./p-5cdc6210.js";const r=":host{display:inline-flex}.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px;gap:8px;color:#FFFFFF;flex-direction:row;font-weight:600;border-radius:1px;line-height:1.5rem;outline:none;font-family:var(--ifx-font-family);text-decoration:none;user-select:none;border:1px solid rgba(0, 0, 0, 0);font-size:1rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out}.btn:not(.disabled){cursor:pointer}.btn-primary{color:#FFFFFF;background-color:#0A8276}.btn-primary:disabled,.btn-primary.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary{color:#0A8276;background-color:#FFFFFF;border-color:#0A8276}.btn-secondary:disabled,.btn-secondary.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary{background-color:transparent;color:#1D1D1D}.btn-tertiary:disabled,.btn-tertiary.disabled{color:#BFBBBB;pointer-events:none}.btn.icon-button{min-width:initial;min-height:initial;width:40px;height:40px;padding:0;justify-content:center}.btn.icon-button.btn-round{border-radius:100px}.btn.icon-button.btn-square{border-radius:1px}.btn.icon-button.btn-s{width:32px;height:32px;padding:8px}.btn.icon-button.btn-l{width:48px;height:48px;padding:8px}.btn.btn-primary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-primary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C}.btn.btn-primary:not(:disabled,.disabled):active,.btn.btn-primary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C;color:#FFFFFF}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-tertiary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;color:#1D1D1D;box-shadow:0 0 0 0px #FFFFFF, 0 0 0 2px #0A8276}.btn.btn-tertiary:not(:disabled,.disabled):hover{color:#0A8276}.btn.btn-tertiary:not(:disabled,.disabled):active,.btn.btn-tertiary:not(:disabled,.disabled).active{color:#08665C}";const s=r;const d=class{constructor(n){t(this,n);this.variant=undefined;this.size=undefined;this.disabled=undefined;this.icon=undefined;this.href=undefined;this.target="_self";this.shape="round"}handleClick(t){if(this.disabled){t.stopImmediatePropagation()}}async setFocus(){this.focusableElement.focus()}componentWillLoad(){if(this.shape===""){this.shape="round"}}render(){return n(e,{key:"a13463972d971f052edc7c7483283b9beb150955"},this.href?n("a",{"aria-disabled":this.disabled,"aria-label":"a clickable icon button",ref:t=>this.focusableElement=t,class:this.getClassNames(),href:!this.disabled?this.href:undefined,target:this.target,rel:this.target==="_blank"?"noopener noreferrer":undefined},n("ifx-icon",{icon:this.icon})):n("button",{class:this.getClassNames(),type:"button"},n("ifx-icon",{icon:this.icon})))}getVariantClass(){return`${this.variant}`==="secondary"?`secondary`:`${this.variant}`==="tertiary"?`tertiary`:`primary`}getSizeClass(){if(`${this.size}`==="xs"){return"xs"}else if(`${this.size}`==="s"){return"s"}else if(`${this.size}`==="l"){return"l"}else return""}getClassNames(){return i("btn icon-button",`btn-${this.shape}`,this.size&&`btn-${this.getSizeClass()}`,`btn-${this.getVariantClass()}`,this.disabled?"disabled":"")}get el(){return o(this)}};d.style=s;export{d as ifx_icon_button};
-//# sourceMappingURL=p-c1b1b593.entry.js.map
+import{r as t,h as n,a as o,g as e}from"./p-c63974da.js";import{c as i}from"./p-5cdc6210.js";const r=":host{display:inline-flex}.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px;gap:8px;color:#FFFFFF;flex-direction:row;font-weight:600;border-radius:1px;line-height:1.5rem;outline:none;font-family:var(--ifx-font-family);text-decoration:none;user-select:none;border:1px solid rgba(0, 0, 0, 0);font-size:1rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out}.btn:not(.disabled){cursor:pointer}.btn-primary{color:#FFFFFF;background-color:#0A8276}.btn-primary:disabled,.btn-primary.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary{color:#0A8276;background-color:#FFFFFF;border-color:#0A8276}.btn-secondary:disabled,.btn-secondary.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary{background-color:transparent;color:#1D1D1D}.btn-tertiary:disabled,.btn-tertiary.disabled{color:#BFBBBB;pointer-events:none}.btn.icon-button{min-width:initial;min-height:initial;width:40px;height:40px;padding:0;justify-content:center}.btn.icon-button.btn-round{border-radius:100px}.btn.icon-button.btn-square{border-radius:1px}.btn.icon-button.btn-s{width:32px;height:32px;padding:8px}.btn.icon-button.btn-l{width:48px;height:48px;padding:8px}.btn.btn-primary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-primary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C}.btn.btn-primary:not(:disabled,.disabled):active,.btn.btn-primary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C;color:#FFFFFF}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-tertiary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;color:#1D1D1D;box-shadow:0 0 0 0px #FFFFFF, 0 0 0 2px #0A8276}.btn.btn-tertiary:not(:disabled,.disabled):hover{color:#0A8276}.btn.btn-tertiary:not(:disabled,.disabled):active,.btn.btn-tertiary:not(:disabled,.disabled).active{color:#08665C}";const s=r;const a=class{constructor(n){t(this,n);this.target="_self";this.shape="round"}handleClick(t){if(this.disabled){t.stopImmediatePropagation()}}async setFocus(){this.focusableElement.focus()}componentWillLoad(){if(this.shape===""){this.shape="round"}}render(){return n(o,{key:"a13463972d971f052edc7c7483283b9beb150955"},this.href?n("a",{"aria-disabled":this.disabled,"aria-label":"a clickable icon button",ref:t=>this.focusableElement=t,class:this.getClassNames(),href:!this.disabled?this.href:undefined,target:this.target,rel:this.target==="_blank"?"noopener noreferrer":undefined},n("ifx-icon",{icon:this.icon})):n("button",{class:this.getClassNames(),type:"button"},n("ifx-icon",{icon:this.icon})))}getVariantClass(){return`${this.variant}`==="secondary"?`secondary`:`${this.variant}`==="tertiary"?`tertiary`:`primary`}getSizeClass(){if(`${this.size}`==="xs"){return"xs"}else if(`${this.size}`==="s"){return"s"}else if(`${this.size}`==="l"){return"l"}else return""}getClassNames(){return i("btn icon-button",`btn-${this.shape}`,this.size&&`btn-${this.getSizeClass()}`,`btn-${this.getVariantClass()}`,this.disabled?"disabled":"")}get el(){return e(this)}};a.style=s;export{a as ifx_icon_button};
+//# sourceMappingURL=p-f4d00e57.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["iconButtonCss","IfxIconButtonStyle0","IconButton","constructor","hostRef","this","target","shape","handleClick","event","disabled","stopImmediatePropagation","setFocus","focusableElement","focus","componentWillLoad","render","h","Host","key","href","ref","el","class","getClassNames","undefined","rel","icon","type","getVariantClass","variant","getSizeClass","size","classNames"],"sources":["src/components/icon-button/icon-button.scss?tag=ifx-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: inline-flex;\n}\n\n.btn {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: tokens.$ifxSize500;\n  padding: 8px;\n  gap: tokens.$ifxSpace100;\n  color: tokens.$ifxColorBaseWhite;\n  flex-direction: row;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  border-radius: tokens.$ifxBorderRadius12;\n  line-height: tokens.$ifxLineHeightM;\n  outline: none;\n  font-family: var(--ifx-font-family);\n  text-decoration: none;\n  user-select: none;\n  border: 1px solid rgba(0, 0, 0, 0);\n  font-size: tokens.$ifxFontSizeM;\n  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n}\n\n.btn:not(.disabled) {\n  cursor: pointer;\n}\n\n.btn-primary {\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n\n.btn-secondary {\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n  border-color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-tertiary {\n  background-color: transparent;\n  color: tokens.$ifxColorBaseBlack;\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n  }\n}\n\n\n.btn {\n\n  &.icon-button {\n    min-width: initial;\n    min-height: initial;\n    width: tokens.$ifxSize500;\n    height: tokens.$ifxSize500;\n    padding: 0;\n    justify-content: center;\n\n    &.btn-round {\n      border-radius: 100px;\n    }\n\n    &.btn-square {\n      border-radius: tokens.$ifxBorderRadius12;\n    }\n\n    &.btn-s {\n      width: tokens.$ifxSize400;\n      height: tokens.$ifxSize400;\n      padding: 8px;\n    }\n\n\n    &.btn-l {\n      width: tokens.$ifxSize600;\n      height: tokens.$ifxSize600;\n      padding: 8px;\n    }\n  }\n\n  &.btn-primary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOcean600;\n      border-color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n      border-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n\n  &.btn-secondary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOcean600;\n      border-color: tokens.$ifxColorOcean600;\n      color: tokens.$ifxColorBaseWhite;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n      border-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n  &.btn-tertiary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      color: tokens.$ifxColorBaseBlack;\n      box-shadow: 0 0 0 0px tokens.$ifxColorBaseWhite, 0 0 0 2px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean600;\n    }\n  }\n}","import { Component, Prop, h, Host, Method, Element, Listen } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n@Component({\n  tag: 'ifx-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\n\nexport class IconButton {\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary';\n  @Prop() size: string;\n  @Prop() disabled: boolean;\n  @Prop() icon: string;\n  @Prop() href: string;\n  @Prop() target: string = '_self';\n  @Prop() shape: string = 'round';\n  @Element() el;\n\n  private focusableElement: HTMLElement;\n\n  @Listen('click', { capture: true })\n  handleClick(event: Event) {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Method()\n  async setFocus() {\n    this.focusableElement.focus();\n  }\n\n  componentWillLoad() {\n    if (this.shape === '') {\n      this.shape = 'round';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.href ? (\n          <a\n            aria-disabled={this.disabled}\n            aria-label='a clickable icon button'\n            ref={(el) => (this.focusableElement = el)}\n            class={this.getClassNames()}\n            href={!this.disabled ? this.href : undefined}\n            target={this.target}\n            rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n          >\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </a>\n        ) : (\n          <button\n            class={this.getClassNames()}\n            type=\"button\"\n          >\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  getVariantClass() {\n    return `${this.variant}` === \"secondary\"\n      ? `secondary`\n      : `${this.variant}` === 'tertiary'\n        ? `tertiary`\n        : `primary`;\n  }\n\n  getSizeClass() {\n    if (`${this.size}` === \"xs\") {\n      return \"xs\"\n    }\n    else if (`${this.size}` === \"s\") {\n      return \"s\"\n    }\n    else if (`${this.size}` === \"l\") {\n      return \"l\"\n    }\n    else return \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'btn icon-button',\n      `btn-${this.shape}`,\n      this.size && `btn-${this.getSizeClass()}`,\n      `btn-${this.getVariantClass()}`,\n      this.disabled ? 'disabled' : ''\n    );\n  }\n}"],"mappings":"6FAAA,MAAMA,EAAgB,y4EACtB,MAAAC,EAAeD,E,MCSFE,EAAU,MANvB,WAAAC,CAAAC,G,UAYUC,KAAAC,OAAiB,QACjBD,KAAAE,MAAgB,O,CAMxB,WAAAC,CAAYC,GACV,GAAIJ,KAAKK,SAAU,CACjBD,EAAME,0B,EAKV,cAAMC,GACJP,KAAKQ,iBAAiBC,O,CAGxB,iBAAAC,GACE,GAAIV,KAAKE,QAAU,GAAI,CACrBF,KAAKE,MAAQ,O,EAIjB,MAAAS,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACFd,KAAKe,KACJH,EAAA,qBACiBZ,KAAKK,SAAQ,aACjB,0BACXW,IAAMC,GAAQjB,KAAKQ,iBAAmBS,EACtCC,MAAOlB,KAAKmB,gBACZJ,MAAOf,KAAKK,SAAWL,KAAKe,KAAOK,UACnCnB,OAAQD,KAAKC,OACboB,IAAKrB,KAAKC,SAAW,SAAW,sBAAwBmB,WAExDR,EAAA,YAAUU,KAAMtB,KAAKsB,QAGvBV,EAAA,UACEM,MAAOlB,KAAKmB,gBACZI,KAAK,UAELX,EAAA,YAAUU,KAAMtB,KAAKsB,Q,CAO/B,eAAAE,GACE,MAAO,GAAGxB,KAAKyB,YAAc,YACzB,YACA,GAAGzB,KAAKyB,YAAc,WACpB,WACA,S,CAGR,YAAAC,GACE,GAAI,GAAG1B,KAAK2B,SAAW,KAAM,CAC3B,MAAO,I,MAEJ,GAAI,GAAG3B,KAAK2B,SAAW,IAAK,CAC/B,MAAO,G,MAEJ,GAAI,GAAG3B,KAAK2B,SAAW,IAAK,CAC/B,MAAO,G,MAEJ,MAAO,E,CAGd,aAAAR,GACE,OAAOS,EACL,kBACA,OAAO5B,KAAKE,QACZF,KAAK2B,MAAQ,OAAO3B,KAAK0B,iBACzB,OAAO1B,KAAKwB,oBACZxB,KAAKK,SAAW,WAAa,G","ignoreList":[]}