@infineon/infineon-design-system-stencil 34.5.2--canary.1896.1c783910e5c2e80d78bfd5f298722597fb56d319.0 → 34.5.2

package/dist/components/ifx-pagination.js

@@ -1,4 +1,4 @@
-import { P as Pagination, d as defineCustomElement$1 } from './p-fd57f6da.js';
+import { P as Pagination, d as defineCustomElement$1 } from './p-e3f71107.js';
 
 const IfxPagination = Pagination;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-radio-button-group.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
-import { d as defineCustomElement$2 } from './p-6b8238fd.js';
+import { d as defineCustomElement$2 } from './p-11e95622.js';
 
 const radioButtonGroupCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.radio-button-group-container{display:flex;flex-direction:column}.radio-button-group{display:flex;font-family:var(--ifx-font-family);gap:8px}.radio-button-group.horizontal{flex-direction:row;column-gap:12px}.radio-button-group.vertical{flex-direction:column;row-gap:12px}.group-label{font:400 0.75rem/1rem \"Source Sans 3\";margin-bottom:8px;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption{margin-top:8px;align-self:flex-start;display:flex;width:100%;column-gap:8px;justify-content:space-between;align-items:center}.caption.default{color:#1D1D1D}.caption.error{color:#CD002F}.caption-text{font:400 0.75rem/1rem \"Source Sans 3\";flex:1;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption-icon{flex:0;display:flex}";
 const IfxRadioButtonGroupStyle0 = radioButtonGroupCss;

package/dist/components/ifx-search-bar.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { d as defineCustomElement$3 } from './p-6b8238fd.js';
-import { d as defineCustomElement$2 } from './p-d2ceee1e.js';
+import { d as defineCustomElement$3 } from './p-11e95622.js';
+import { d as defineCustomElement$2 } from './p-951ea0ac.js';
 
 const searchBarCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{width:100%;display:flex}.search-bar{box-sizing:border-box;height:40px;background-color:#FFFFFF;display:flex;flex-direction:row;align-items:center;width:100%;font-family:var(--ifx-font-family)}.search-bar.closed{display:flex;width:auto;justify-content:flex-start}.search-bar .search-bar-wrapper{display:flex;align-items:center;gap:16px;width:100%}.search-bar .search-bar-wrapper a{text-decoration:none;font-size:1rem;font-style:normal;font-weight:600;line-height:1.5rem;color:#0A8276;cursor:pointer}.search-bar .search-bar-wrapper ifx-search-field{width:100%}.search-bar .search-bar__icon-wrapper{display:none;flex-direction:row;align-items:center}.search-bar .search-bar__icon-wrapper ifx-icon:hover{cursor:pointer}.search-bar.closed .search-bar__icon-wrapper{display:flex}.search-bar.closed .search-bar-wrapper{display:none}";
 const IfxSearchBarStyle0 = searchBarCss;

package/dist/components/ifx-search-field.js

@@ -1,4 +1,4 @@
-import { S as SearchField, d as defineCustomElement$1 } from './p-d2ceee1e.js';
+import { S as SearchField, d as defineCustomElement$1 } from './p-951ea0ac.js';
 
 const IfxSearchField = SearchField;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-segment.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { d as defineCustomElement$2 } from './p-6b8238fd.js';
+import { d as defineCustomElement$2 } from './p-11e95622.js';
 
 const segmentCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.segment{display:flex;align-items:center;justify-content:center;gap:8px;position:relative;border:1px solid #BFBBBB;border-radius:1px;padding:0 8px 0 8px;height:34px;background-color:#FFFFFF;transition:all 100ms ease;transition-property:color, background;font:600 0.875rem/1.25rem \"Source Sans 3\"}.segment:focus-visible{color:#FFFFFF;background-color:#0A8276}.segment:hover{color:#FFFFFF;background-color:#08665C;cursor:pointer}.segment:active{background-color:#06534B}.segment.segment--selected{color:#FFFFFF;background-color:#0A8276}.segment.segment--small{height:30px}.segment::after{position:absolute;top:0;left:0;width:100%;height:100%;outline:1px solid #BFBBBB;border-radius:1px;content:\"\"}";
 const IfxSegmentStyle0 = segmentCss;

package/dist/components/ifx-segmented-control.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { d as defineCustomElement$2 } from './p-6b8238fd.js';
+import { d as defineCustomElement$2 } from './p-11e95622.js';
 
 const segmentedControlCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.group{display:flex;flex-direction:column;justify-content:space-between;gap:12px}.group__label{font:400 0.75rem/1rem \"Source Sans 3\"}.group__label:empty{display:none}.group__controls{display:flex;flex-wrap:wrap}.group__controls ::slotted(*){margin-left:-1px;margin-top:-1px}.group__caption{display:flex;align-items:center;gap:8px;font:400 0.75rem/1rem \"Source Sans 3\"}";
 const IfxSegmentedControlStyle0 = segmentedControlCss;

package/dist/components/ifx-select.js

@@ -1,4 +1,4 @@
-import { C as Choices, d as defineCustomElement$1 } from './p-b1ad0588.js';
+import { C as Choices, d as defineCustomElement$1 } from './p-b0c3f469.js';
 
 const IfxSelect = Choices;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-set-filter.js

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { d as defineCustomElement$7 } from './p-d8654e8a.js';
+import { d as defineCustomElement$7 } from './p-3ec421ea.js';
 import { d as defineCustomElement$6 } from './p-68016aea.js';
-import { d as defineCustomElement$5 } from './p-6b8238fd.js';
-import { d as defineCustomElement$4 } from './p-b9c43f3f.js';
-import { d as defineCustomElement$3 } from './p-b1ad0588.js';
-import { d as defineCustomElement$2 } from './p-92ff14ab.js';
+import { d as defineCustomElement$5 } from './p-11e95622.js';
+import { d as defineCustomElement$4 } from './p-0ea7af83.js';
+import { d as defineCustomElement$3 } from './p-b0c3f469.js';
+import { d as defineCustomElement$2 } from './p-dc9a6113.js';
 
 const setFilterCss = "";
 const IfxSetFilterStyle0 = setFilterCss;

package/dist/components/ifx-sidebar-item.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { d as defineCustomElement$3 } from './p-6b8238fd.js';
+import { d as defineCustomElement$3 } from './p-11e95622.js';
 import { d as defineCustomElement$2 } from './p-643bcbdf.js';
 
 const sidebarItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{position:relative}.sidebar__nav-item:focus,.sidebar__nav-item.header__section:focus{outline:none}.sidebar__nav-item:focus .sidebar__nav-item-icon-wrapper,.sidebar__nav-item.header__section:focus .sidebar__nav-item-icon-wrapper{color:#08665C}.sidebar__nav-item:focus .sidebar__nav-item-label,.sidebar__nav-item.header__section:focus .sidebar__nav-item-label{outline:none;color:#08665C}.sidebar__nav-item:focus .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon,.sidebar__nav-item.header__section:focus .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{color:#08665C}.sidebar__nav-item:hover,.sidebar__nav-item.header__section:hover{outline:none}.sidebar__nav-item:hover .sidebar__nav-item-icon-wrapper,.sidebar__nav-item.header__section:hover .sidebar__nav-item-icon-wrapper{color:#08665C}.sidebar__nav-item:hover .sidebar__nav-item-label,.sidebar__nav-item.header__section:hover .sidebar__nav-item-label{outline:none;color:#08665C}.sidebar__nav-item:hover .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon,.sidebar__nav-item.header__section:hover .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{color:#08665C}.sidebar__nav-item{display:flex;flex-direction:row;align-items:center;width:100%;padding:8px 0px;gap:4px;flex:none;order:0;flex-grow:0;text-decoration:none;color:#1D1D1D;cursor:pointer;font-family:var(--ifx-font-family)}.sidebar__nav-item.extra-padding__bottom{padding:8px 0px 16px 0px}.sidebar__nav-item.active{color:#0A8276}.sidebar__nav-item.active-section::before{content:\"\";position:absolute;left:-32px;height:40px;width:2px;background:#0A8276}.sidebar__nav-item.open{padding:8px 0px}.sidebar__nav-item.open .sidebar__nav-item-label{font-size:16px;font-style:normal;font-weight:400;line-height:24px}.sidebar__nav-item.open .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{transform:rotate(-180deg)}.sidebar__nav-item.header__section{box-sizing:padding-box;border-top:1px solid #EEEDED;padding:16px 0px;display:-webkit-flex;-webkit-line-clamp:1;-webkit-box-orient:horizontal;overflow:hidden;text-overflow:ellipsis}.sidebar__nav-item.header__section.no-top-border{border-top:none}.sidebar__nav-item.header__section.active-section::before{content:\"\";position:absolute;left:-32px;height:40px;width:2px;background:#0A8276}.sidebar__nav-item.header__section.open{padding:16px 0px 8px 0px}.sidebar__nav-item.header__section.open .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{transform:rotate(-180deg)}.sidebar__nav-item.header__section .sidebar__nav-item-label{color:#1D1D1D;font-family:Source Sans 3;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.sidebar__nav-item.submenu__item{padding:4px 0px}.sidebar__nav-item.submenu__item.extra-padding__bottom{padding:4px 0px 16px 0px}.sidebar__nav-item .sidebar__nav-item-icon-wrapper{display:flex;width:24px;height:24px;justify-content:center;align-items:center;gap:8px;flex-shrink:0}.sidebar__nav-item .sidebar__nav-item-icon-wrapper.noIcon{display:none}.sidebar__nav-item .sidebar__nav-item-icon-wrapper ifx-icon{width:16px;height:16px}.sidebar__nav-item .sidebar__nav-item-label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;display:flex;align-items:center;flex:none;order:1;flex-grow:1;cursor:pointer}.sidebar__nav-item .sidebar__nav-item-indicator{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px 4px;flex:none;order:2;flex-grow:0}.expandable__submenu{display:none;list-style-type:none;flex-direction:column;padding:0;margin:0;padding-left:40px}.expandable__submenu.open{display:flex}.header__section+.expandable__submenu{padding-left:0}";
@@ -254,7 +254,7 @@ const SidebarItem = /*@__PURE__*/ proxyCustomElement(class SidebarItem extends H
         return (h("div", { key: 'f16b1df48d904c5aee8cca800c99f585af4b8e7b' }, h("a", { key: 'e0aabd35920d380dbaee1db9d30022577bd172da', tabIndex: 1, onKeyDown: (event) => this.handleKeyDown(event), href: this.internalHref, onClick: () => this.toggleSubmenu(), target: this.target, class: `sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : ""} ${this.isSubMenuItem ? 'submenu__item' : ""}` }, this.icon &&
             h("div", { key: 'bcf6a7210683b5f40162d6ba46569376eb38d49d', class: `sidebar__nav-item-icon-wrapper ${!this.showIcon ? 'noIcon' : ""}` }, h("ifx-icon", { key: 'b664bf10dfb009539fe05f2720de7ba7a14fca70', icon: this.icon })), h("div", { key: '5ca40022f7140012c53d4f9c0143082209516a4d', class: "sidebar__nav-item-label" }, h("slot", { key: '795eac3f184ced45b15b6db8eba59d55261dc988' })), (this.isExpandable || !isNaN(this.numberIndicator)) &&
             h("div", { key: 'efc5806098f475a17512324e4c07fbb88f164eba', class: "sidebar__nav-item-indicator" }, this.isExpandable &&
-                h("span", { key: 'c4bc5c3b5acbaf653dd39e35946347f8e087cdca', class: 'item__arrow-wrapper' }, h("ifx-icon", { key: '7716cac79ee025a8a2c1cdd034d97351940e4172', icon: "chevron-down-16" })), !isNaN(this.numberIndicator) && !this.isExpandable && !this.isNested &&
+                h("span", { key: 'c4bc5c3b5acbaf653dd39e35946347f8e087cdca', class: 'item__arrow-wrapper' }, h("ifx-icon", { key: '7716cac79ee025a8a2c1cdd034d97351940e4172', icon: "chevron-down-12" })), !isNaN(this.numberIndicator) && !this.isExpandable && !this.isNested &&
                 h("span", { key: '56ed91bca6a8de6551f177438fea214c68d1292c', class: 'item__number-indicator' }, h("ifx-indicator", { key: 'e62958ddd62d3991c5eb6b03052c99a7498f9419', variant: 'number', number: this.numberIndicator })))), this.isExpandable && h("ul", { key: '926d098d681db8ffb38009b552cdaee85a5d354c', class: 'expandable__submenu' })));
     }
     get el() { return this; }

package/dist/components/ifx-sidebar-item.js.map

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

package/dist/components/ifx-slider.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { d as defineCustomElement$2 } from './p-6b8238fd.js';
+import { d as defineCustomElement$2 } from './p-11e95622.js';
 
 const sliderCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-block}.left-icon,.right-icon,.left-text,.right-text,.percentage-display{font-size:0.875rem;color:#575352;margin-left:8px}.left-icon.disabled,.right-icon.disabled,.left-text.disabled,.right-text.disabled,.percentage-display.disabled{color:#BFBBBB}.left-icon,.left-text{margin-right:8px}.right-icon,.right-text,.percentage-display{margin-left:8px}.ifx-slider{display:flex;align-items:center;padding:2px 16px;border-radius:9999px}.ifx-slider input[type=range]{-webkit-appearance:none;width:100%;height:4px;background:linear-gradient(to right, #0A8276 0%, #0A8276 var(--value-percent, 0%), #EEEDED var(--value-percent, 0%), #EEEDED 100%);outline:none;cursor:pointer;transition:0.2s}.ifx-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#0A8276;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#0A8276;border-radius:50%;cursor:pointer;transition:box-shadow 0.2s}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:hover{background:#08665C}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:active{background:#06534B}.ifx-slider input[type=range]:disabled{background:#BFBBBB;cursor:default}.ifx-slider input[type=range]:disabled::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#BFBBBB;border-radius:50%;cursor:default}.ifx-slider .range-slider__wrapper{position:relative;width:129px;height:4px;display:flex;align-items:center;justify-content:center;margin:0px 2px;background:linear-gradient(to right, #EEEDED 0%, #EEEDED var(--min-value-percent, 100%), #0A8276 var(--min-value-percent, 100%), #0A8276 var(--max-value-percent, 100%), #EEEDED var(--max-value-percent, 100%), #EEEDED 100%)}.ifx-slider .range-slider__wrapper:has(input[type=range]:disabled){background:#BFBBBB}.ifx-slider .range-slider__wrapper input[type=range]{position:absolute;pointer-events:none;background:none}.ifx-slider .range-slider__wrapper input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-moz-range-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-ms-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;border:none;background:none;width:100%}.ifx-slider .range-slider__wrapper input[type=range]::-moz-range-track{-webkit-appearance:none;border:none;background:none;width:100%}";
 const IfxSliderStyle0 = sliderCss;

package/dist/components/ifx-step.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
-import { d as defineCustomElement$2 } from './p-6b8238fd.js';
+import { d as defineCustomElement$2 } from './p-11e95622.js';
 
 const stepCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.step-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;gap:8px;font:400 1rem/1.5rem \"Source Sans 3\"}.step-wrapper.vertical{flex-direction:row;gap:12px;width:unset;height:100%}.step-wrapper.vertical .step-icon-wrapper{flex-direction:column;width:unset;height:100%}.step-wrapper.compact{gap:0;max-width:100%}.step-wrapper.compact .step-label{max-width:100%;cursor:auto;align-self:flex-start}.step-wrapper.compact.indicator-left{align-items:flex-end;text-align:right}.step-wrapper.compact.indicator-right{align-items:flex-start}.step-wrapper .step-label{max-width:90%;color:#8D8786;word-wrap:break-word}.step-wrapper .step-label.curr-label{font:600 1.25rem/1.75rem \"Source Sans 3\"}.step-wrapper .step-label.next-label{font:400 0.75rem/1rem \"Source Sans 3\"}.step-wrapper .step-label :hover{color:#8D8786}.step-wrapper.first-step .step-connector-l{height:0px}.step-wrapper.last-step .step-connector-r{height:0px}.step-wrapper.vertical.first-step .step-connector-l,.step-wrapper.vertical.last-step .step-connector-r{width:0px}.step-wrapper.complete .step-connector-l,.step-wrapper.complete .step-connector-r,.step-wrapper.complete .step-icon{background:#0A8276}.step-wrapper.complete .step-connector-l.active,.step-wrapper.complete .step-connector-l.error,.step-wrapper.complete .step-connector-r.active,.step-wrapper.complete .step-connector-r.error,.step-wrapper.complete .step-icon.active,.step-wrapper.complete .step-icon.error{background:#8D8786}.step-wrapper.complete:not(.disabled) .step-label{cursor:pointer;color:#1D1D1D}.step-wrapper.complete:not(.disabled) .step-label :hover{color:#08665C}.step-wrapper.disabled .step-connector-l,.step-wrapper.disabled .step-connector-r,.step-wrapper.disabled .step-icon{background-color:#8D8786}.step-wrapper.disabled .step-label,.step-wrapper.disabled .step-label :hover{color:#8D8786}.step-wrapper.active .step-connector-l,.step-wrapper.active .step-connector-r,.step-wrapper.active .step-icon{background:#0A8276}.step-wrapper.active .step-connector-l.active,.step-wrapper.active .step-connector-l.error,.step-wrapper.active .step-connector-r.active,.step-wrapper.active .step-connector-r.error,.step-wrapper.active .step-icon.active,.step-wrapper.active .step-icon.error{background:#8D8786}.step-wrapper.active .step-label,.step-wrapper.active .step-label :hover{color:#1D1D1D}.step-wrapper.active.complete .step-label{cursor:auto}.step-wrapper.clickable:not(.active) .step-label{cursor:pointer}.step-wrapper.error:not(.active){color:#CD002F}.step-wrapper.error:not(.active) .step-label{color:#CD002F}.step-wrapper.error:not(.active) .step-label :hover{color:#0A8276}.step-wrapper.disabled .step-label{cursor:auto}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon{background:#08665C}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.error{background:#8D8786}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-label{color:#08665C}.active-indic{width:16px;height:16px;border-radius:9999px;background:white}.step-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.step-icon{width:24px;height:24px;background-color:#8D8786;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:white}.step-connector-r,.step-connector-l{height:2px;min-width:40px;flex-grow:1;background-color:#8D8786}.vertical .step-connector-r,.vertical .step-connector-l{height:unset;min-width:unset;width:2px;min-height:40px}";
 const IfxStepStyle0 = stepCss;
@@ -59,7 +59,7 @@ const Step = /*@__PURE__*/ proxyCustomElement(class Step extends H {
                         ${this.active ? 'active' : ''}
                         ${this.clickable ? 'clickable' : ''}
                         ${this.disabled ? 'disabled' : ''}` }, h("div", { key: '0732df62ab68c7ee42d0a14e1ebc72a1d280a36b', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: '44054e9fa675579a92b0744f824692c108743ee9', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
-            h("div", { key: 'e337ececf801eb0ecc3ef3bdb85e3b590f7d51e5', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: 'a4f3ba01913d0320084a1a245634dd1a3ce38140', icon: 'check16' }), this.active && h("span", { key: '5cf8536ff33b38b99bf6e516abed2cb71d005e30', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: 'a82d3210924625dc11019e9fcc594096f4877ccf', icon: 'warningf16' }), this.stepperState.variant !== 'compact' && h("span", { key: '52f2e8e74ee106e526e9c0823bf4c9c611c4db81', class: `step-connector-r ${this.active ? 'active' : ''}` })), 
+            h("div", { key: 'e337ececf801eb0ecc3ef3bdb85e3b590f7d51e5', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: 'a4f3ba01913d0320084a1a245634dd1a3ce38140', icon: 'check16' }), this.active && h("span", { key: '5cf8536ff33b38b99bf6e516abed2cb71d005e30', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: 'a82d3210924625dc11019e9fcc594096f4877ccf', icon: 'warningf24' }), this.stepperState.variant !== 'compact' && h("span", { key: '52f2e8e74ee106e526e9c0823bf4c9c611c4db81', class: `step-connector-r ${this.active ? 'active' : ''}` })), 
         /* Step labels */
         (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep + 1))) &&
             h("div", { key: '901cea7f3cd2793003198ce63fa95df151965f77', tabIndex: !this.disabled && this.complete && !this.active ? 0 : -1, class: `step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`, onClick: () => { this.handleStepClick(); }, onKeyDown: (e) => { this.handleStepKeyDown(e); } }, (this.stepperState.variant !== 'compact') && h("slot", { key: '220cce65e6113c6fd68826cbc4abb0b2d38b9f69' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: 'd7fe0384cc4da72a2374345cc72ec71250b156ea' }))));

package/dist/components/ifx-step.js.map

@@ -1 +1 @@
-{"file":"ifx-step.js","mappings":"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","names":[],"sources":["src/components/stepper/step/step.scss?tag=ifx-step&encapsulation=shadow","src/components/stepper/step/step.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.step-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: flex-start;\n    width: 100%;\n    gap: tokens.$ifxSize100;\n    font: tokens.$ifxBodyBody03;\n\n    &.vertical {\n        flex-direction: row;\n        gap: tokens.$ifxSize150;\n        width: unset;\n        height: 100%;\n        \n        .step-icon-wrapper {\n            flex-direction: column;\n            width: unset;\n            height: 100%;\n        }\n    }\n    \n    &.compact {\n        gap: 0;\n        max-width: 100%;\n        .step-label{\n            max-width: 100%;\n            cursor: auto;\n            align-self: flex-start;\n        }\n        \n        &.indicator-left {\n            align-items: flex-end;\n            text-align: right;\n        }\n        \n        &.indicator-right {\n            align-items: flex-start;\n        }\n    }\n\n    .step-label {\n        max-width: 90%;\n        color: tokens.$ifxColorEngineering400; \n        word-wrap: break-word;\n        &.curr-label{\n            font: tokens.$ifxHeadingHeadingCompact04; \n        }\n        &.next-label{\n            font: tokens.$ifxBodyBody05;\n        }\n        :hover{\n            color: tokens.$ifxColorEngineering400;\n        }\n    }\n\n    \n    &.first-step {\n        .step-connector-l{\n            height: 0px;\n        }\n    }\n    \n    &.last-step{\n        .step-connector-r{\n            height: 0px;\n        }\n    }\n\n    &.vertical {\n        &.first-step .step-connector-l,\n        &.last-step .step-connector-r {\n            width: 0px;\n        }\n    }\n\n    &.complete{\n        .step-connector-l, .step-connector-r, .step-icon {\n            background: tokens.$ifxColorOcean500;\n            &.active, &.error {\n                background: tokens.$ifxColorEngineering400;\n            }\n        }\n        &:not(.disabled) {\n            .step-label{\n                cursor: pointer;\n                color: tokens.$ifxColorBaseBlack;\n                :hover {\n                    color: tokens.$ifxColorOcean600;\n                }\n            }\n        }\n    } \n    \n    &.disabled{\n        .step-connector-l, \n        .step-connector-r, \n        .step-icon {\n            background-color: tokens.$ifxColorEngineering400;\n        }\n        .step-label, \n        .step-label :hover{\n            color: tokens.$ifxColorEngineering400;\n        }\n    }\n    \n    &.active{\n        .step-connector-l, \n        .step-connector-r, \n        .step-icon {\n            background: tokens.$ifxColorOcean500;\n            &.active, \n            &.error {\n                background: tokens.$ifxColorEngineering400;\n            }\n        }\n        .step-label, \n        .step-label :hover{\n            color: tokens.$ifxColorBaseBlack;\n        }\n        &.complete .step-label { \n            cursor: auto;\n        }\n    } \n\n    &.clickable:not(.active) .step-label{\n        cursor: pointer;\n    }\n\n    &.error:not(.active){\n        color: tokens.$ifxColorRed500;\n        .step-label{\n            color: tokens.$ifxColorRed500;\n            :hover{\n                color: tokens.$ifxColorOcean500;\n            }\n        }\n    }\n\n    &.disabled{\n        .step-label{\n            cursor: auto;\n        }\n    }\n\n    &:hover{\n        &.complete:not(.disabled):not(.active){\n            .step-connector-l, \n            .step-connector-r, \n            .step-icon {\n                background: tokens.$ifxColorOcean600;\n                &.active, \n                &.error {\n                    background: tokens.$ifxColorEngineering400;\n                }\n            } \n            .step-label {\n                color: tokens.$ifxColorOcean600;\n            }\n        }\n    }\n    \n}\n\n.active-indic {\n    width: tokens.$ifxSize200;\n    height: tokens.$ifxSize200;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    background: white;\n}\n\n.step-icon-wrapper {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n}\n\n.step-icon {\n    width: tokens.$ifxSize300;\n    height: tokens.$ifxSize300;\n    background-color: tokens.$ifxColorEngineering400;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n}\n\n.step-connector-r, \n.step-connector-l {\n    height: 2px;\n    min-width: tokens.$ifxSize500;\n    flex-grow: 1;\n    background-color: tokens.$ifxColorEngineering400;\n}\n\n.vertical {\n    .step-connector-r, \n    .step-connector-l {\n        height: unset;\n        min-width: unset;\n        width: 2px;\n        min-height: tokens.$ifxSize500;\n    }\n}","import { h, \n         Component, \n         Listen, \n         Prop, \n         State, \n         Watch } from \"@stencil/core\";\nimport { StepperState } from \"../interfaces\";\n\n@Component({\n    tag: 'ifx-step',\n    styleUrl: 'step.scss',\n    shadow: true\n})\n\nexport class Step {\n    @Prop() complete?: boolean = false;\n    @Prop() disabled?: boolean = false;\n    @Prop({ mutable: true }) error?: boolean = false;\n    @Prop({ reflect: false }) lastStep: boolean = false;\n    @Prop() stepId: number = 1;\n    @Prop({ reflect: false }) stepperState: StepperState = { activeStep: 1, \n                                                             showStepNumber: false, \n                                                             variant: 'default', \n                                                             indicatorPosition: 'left' };\n\n    @State() active: boolean;\n    @State() clickable: boolean = false;\n\n    @Listen('ifxChange', { target: 'document' })\n    onStepChange(event: CustomEvent) {\n        const previousActiveStep = event.detail.previousActiveStep;\n        if (previousActiveStep === this.stepId && this.error) {\n            this.clickable = true;\n        }\n    } \n\n    @Watch('stepperState')\n    updateCurrentStep(newStepperState) {\n        this.active = (newStepperState.activeStep === this.stepId)\n    }\n\n    @Watch('active')\n    updateErrorState(){\n        if (this.active) {\n            this.error = false;\n        }\n    }\n\n\n    handleStepClick() {\n        if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete)) {\n            this.stepperState.setActiveStep(this.stepId, true)\n        } \n    }\n    \n    handleStepKeyDown(event: KeyboardEvent) {\n        if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete) && event.key === 'Enter') {\n            this.stepperState.setActiveStep(this.stepId, true)\n        } \n    }\n    \n    stopOnClickPropogation(event: Event) {\n        if (this.disabled) {\n            event.stopPropagation();\n        }\n    }\n\n    render() {\n        return (\n            <div aria-current = {this.active ? 'step': false}\n                aria-disabled = {this.active || this.complete ? false : true}\n                onClick={ (e) => this.stopOnClickPropogation(e) }\n                class = {`step-wrapper ${this.stepId === 1 ? 'first-step': ''} \n                        ${this.error ? 'error': ''}\n                        ${this.stepperState.variant}\n                        ${this.complete ? 'complete': ''}\n                        ${this.lastStep ? 'last-step': ''}\n                        indicator-${this.stepperState.indicatorPosition}\n                        ${this.active ? 'active' : ''}\n                        ${this.clickable ? 'clickable' : ''}\n                        ${this.disabled ? 'disabled': ''}`}>\n\n                <div class = 'step-icon-wrapper'>\n                    {/* Left connector */}\n                    {this.stepperState.variant !== 'compact' && <span class = 'step-connector-l'/>}\n\n                    {\n                        (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) && \n                        <div class = 'step-icon'>\n                            {(this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : ''}\n                            {(this.complete && !this.active) && <ifx-icon icon='check16'></ifx-icon>}\n                            {this.active && <span class = 'active-indic'></span>}\n                        </div>\n                    }\n\n                    {(this.stepperState.variant !=='compact' && this.error && !this.active) && <ifx-icon icon='warningf16'></ifx-icon>}\n                    \n                    {/* Right connector */}\n                    {this.stepperState.variant !== 'compact' && <span class = {`step-connector-r ${this.active ? 'active' : ''}`}/>}\n                </div>\n\n                {\n                    /* Step labels */\n                    (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep+1))) && \n                    <div tabIndex={!this.disabled && this.complete && !this.active ? 0 : -1} \n                        class = {`step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`} \n                        onClick={() => { this.handleStepClick() }} \n                        onKeyDown={(e) => { this.handleStepKeyDown(e) }}>\n\n                        {(this.stepperState.variant !== 'compact') && <slot/>}\n\n                        {this.stepperState.variant === 'compact' &&  !this.active  ? 'Next: ' : ''}\n                        {this.stepperState.variant === 'compact' && <slot/>}\n                    </div>\n                }\n\n            </div>\n        );\n    };\n}\n"],"version":3}
+{"file":"ifx-step.js","mappings":"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","names":[],"sources":["src/components/stepper/step/step.scss?tag=ifx-step&encapsulation=shadow","src/components/stepper/step/step.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.step-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: flex-start;\n    width: 100%;\n    gap: tokens.$ifxSize100;\n    font: tokens.$ifxBodyBody03;\n\n    &.vertical {\n        flex-direction: row;\n        gap: tokens.$ifxSize150;\n        width: unset;\n        height: 100%;\n        \n        .step-icon-wrapper {\n            flex-direction: column;\n            width: unset;\n            height: 100%;\n        }\n    }\n    \n    &.compact {\n        gap: 0;\n        max-width: 100%;\n        .step-label{\n            max-width: 100%;\n            cursor: auto;\n            align-self: flex-start;\n        }\n        \n        &.indicator-left {\n            align-items: flex-end;\n            text-align: right;\n        }\n        \n        &.indicator-right {\n            align-items: flex-start;\n        }\n    }\n\n    .step-label {\n        max-width: 90%;\n        color: tokens.$ifxColorEngineering400; \n        word-wrap: break-word;\n        &.curr-label{\n            font: tokens.$ifxHeadingHeadingCompact04; \n        }\n        &.next-label{\n            font: tokens.$ifxBodyBody05;\n        }\n        :hover{\n            color: tokens.$ifxColorEngineering400;\n        }\n    }\n\n    \n    &.first-step {\n        .step-connector-l{\n            height: 0px;\n        }\n    }\n    \n    &.last-step{\n        .step-connector-r{\n            height: 0px;\n        }\n    }\n\n    &.vertical {\n        &.first-step .step-connector-l,\n        &.last-step .step-connector-r {\n            width: 0px;\n        }\n    }\n\n    &.complete{\n        .step-connector-l, .step-connector-r, .step-icon {\n            background: tokens.$ifxColorOcean500;\n            &.active, &.error {\n                background: tokens.$ifxColorEngineering400;\n            }\n        }\n        &:not(.disabled) {\n            .step-label{\n                cursor: pointer;\n                color: tokens.$ifxColorBaseBlack;\n                :hover {\n                    color: tokens.$ifxColorOcean600;\n                }\n            }\n        }\n    } \n    \n    &.disabled{\n        .step-connector-l, \n        .step-connector-r, \n        .step-icon {\n            background-color: tokens.$ifxColorEngineering400;\n        }\n        .step-label, \n        .step-label :hover{\n            color: tokens.$ifxColorEngineering400;\n        }\n    }\n    \n    &.active{\n        .step-connector-l, \n        .step-connector-r, \n        .step-icon {\n            background: tokens.$ifxColorOcean500;\n            &.active, \n            &.error {\n                background: tokens.$ifxColorEngineering400;\n            }\n        }\n        .step-label, \n        .step-label :hover{\n            color: tokens.$ifxColorBaseBlack;\n        }\n        &.complete .step-label { \n            cursor: auto;\n        }\n    } \n\n    &.clickable:not(.active) .step-label{\n        cursor: pointer;\n    }\n\n    &.error:not(.active){\n        color: tokens.$ifxColorRed500;\n        .step-label{\n            color: tokens.$ifxColorRed500;\n            :hover{\n                color: tokens.$ifxColorOcean500;\n            }\n        }\n    }\n\n    &.disabled{\n        .step-label{\n            cursor: auto;\n        }\n    }\n\n    &:hover{\n        &.complete:not(.disabled):not(.active){\n            .step-connector-l, \n            .step-connector-r, \n            .step-icon {\n                background: tokens.$ifxColorOcean600;\n                &.active, \n                &.error {\n                    background: tokens.$ifxColorEngineering400;\n                }\n            } \n            .step-label {\n                color: tokens.$ifxColorOcean600;\n            }\n        }\n    }\n    \n}\n\n.active-indic {\n    width: tokens.$ifxSize200;\n    height: tokens.$ifxSize200;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    background: white;\n}\n\n.step-icon-wrapper {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n}\n\n.step-icon {\n    width: tokens.$ifxSize300;\n    height: tokens.$ifxSize300;\n    background-color: tokens.$ifxColorEngineering400;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n}\n\n.step-connector-r, \n.step-connector-l {\n    height: 2px;\n    min-width: tokens.$ifxSize500;\n    flex-grow: 1;\n    background-color: tokens.$ifxColorEngineering400;\n}\n\n.vertical {\n    .step-connector-r, \n    .step-connector-l {\n        height: unset;\n        min-width: unset;\n        width: 2px;\n        min-height: tokens.$ifxSize500;\n    }\n}","import { h, \n         Component, \n         Listen, \n         Prop, \n         State, \n         Watch } from \"@stencil/core\";\nimport { StepperState } from \"../interfaces\";\n\n@Component({\n    tag: 'ifx-step',\n    styleUrl: 'step.scss',\n    shadow: true\n})\n\nexport class Step {\n    @Prop() complete?: boolean = false;\n    @Prop() disabled?: boolean = false;\n    @Prop({ mutable: true }) error?: boolean = false;\n    @Prop({ reflect: false }) lastStep: boolean = false;\n    @Prop() stepId: number = 1;\n    @Prop({ reflect: false }) stepperState: StepperState = { activeStep: 1, \n                                                             showStepNumber: false, \n                                                             variant: 'default', \n                                                             indicatorPosition: 'left' };\n\n    @State() active: boolean;\n    @State() clickable: boolean = false;\n\n    @Listen('ifxChange', { target: 'document' })\n    onStepChange(event: CustomEvent) {\n        const previousActiveStep = event.detail.previousActiveStep;\n        if (previousActiveStep === this.stepId && this.error) {\n            this.clickable = true;\n        }\n    } \n\n    @Watch('stepperState')\n    updateCurrentStep(newStepperState) {\n        this.active = (newStepperState.activeStep === this.stepId)\n    }\n\n    @Watch('active')\n    updateErrorState(){\n        if (this.active) {\n            this.error = false;\n        }\n    }\n\n\n    handleStepClick() {\n        if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete)) {\n            this.stepperState.setActiveStep(this.stepId, true)\n        } \n    }\n    \n    handleStepKeyDown(event: KeyboardEvent) {\n        if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete) && event.key === 'Enter') {\n            this.stepperState.setActiveStep(this.stepId, true)\n        } \n    }\n    \n    stopOnClickPropogation(event: Event) {\n        if (this.disabled) {\n            event.stopPropagation();\n        }\n    }\n\n    render() {\n        return (\n            <div aria-current = {this.active ? 'step': false}\n                aria-disabled = {this.active || this.complete ? false : true}\n                onClick={ (e) => this.stopOnClickPropogation(e) }\n                class = {`step-wrapper ${this.stepId === 1 ? 'first-step': ''} \n                        ${this.error ? 'error': ''}\n                        ${this.stepperState.variant}\n                        ${this.complete ? 'complete': ''}\n                        ${this.lastStep ? 'last-step': ''}\n                        indicator-${this.stepperState.indicatorPosition}\n                        ${this.active ? 'active' : ''}\n                        ${this.clickable ? 'clickable' : ''}\n                        ${this.disabled ? 'disabled': ''}`}>\n\n                <div class = 'step-icon-wrapper'>\n                    {/* Left connector */}\n                    {this.stepperState.variant !== 'compact' && <span class = 'step-connector-l'/>}\n\n                    {\n                        (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) && \n                        <div class = 'step-icon'>\n                            {(this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : ''}\n                            {(this.complete && !this.active) && <ifx-icon icon='check16'></ifx-icon>}\n                            {this.active && <span class = 'active-indic'></span>}\n                        </div>\n                    }\n\n                    {(this.stepperState.variant !=='compact' && this.error && !this.active) && <ifx-icon icon='warningf24'></ifx-icon>}\n                    \n                    {/* Right connector */}\n                    {this.stepperState.variant !== 'compact' && <span class = {`step-connector-r ${this.active ? 'active' : ''}`}/>}\n                </div>\n\n                {\n                    /* Step labels */\n                    (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep+1))) && \n                    <div tabIndex={!this.disabled && this.complete && !this.active ? 0 : -1} \n                        class = {`step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`} \n                        onClick={() => { this.handleStepClick() }} \n                        onKeyDown={(e) => { this.handleStepKeyDown(e) }}>\n\n                        {(this.stepperState.variant !== 'compact') && <slot/>}\n\n                        {this.stepperState.variant === 'compact' &&  !this.active  ? 'Next: ' : ''}\n                        {this.stepperState.variant === 'compact' && <slot/>}\n                    </div>\n                }\n\n            </div>\n        );\n    };\n}\n"],"version":3}

package/dist/components/ifx-table.js

@@ -2,14 +2,14 @@ import { p as proxyCustomElement, H, h, d as Host } from './p-f8e6a4ef.js';
 import { c as classNames } from './p-5cdc6210.js';
 import { c as createGrid } from './p-1429e9ea.js';
 import { d as defineCustomElement$a } from './p-17df0350.js';
-import { d as defineCustomElement$9 } from './p-d8654e8a.js';
-import { d as defineCustomElement$8 } from './p-ed2bcd51.js';
-import { d as defineCustomElement$7 } from './p-5840faf6.js';
-import { d as defineCustomElement$6 } from './p-6b8238fd.js';
-import { d as defineCustomElement$5 } from './p-0c563507.js';
+import { d as defineCustomElement$9 } from './p-3ec421ea.js';
+import { d as defineCustomElement$8 } from './p-55dccf7f.js';
+import { d as defineCustomElement$7 } from './p-5f97952a.js';
+import { d as defineCustomElement$6 } from './p-11e95622.js';
+import { d as defineCustomElement$5 } from './p-1a5145f0.js';
 import { d as defineCustomElement$4 } from './p-643bcbdf.js';
-import { d as defineCustomElement$3 } from './p-fd57f6da.js';
-import { d as defineCustomElement$2 } from './p-b1ad0588.js';
+import { d as defineCustomElement$3 } from './p-e3f71107.js';
+import { d as defineCustomElement$2 } from './p-b0c3f469.js';
 
 class ButtonCellRenderer {
     init(params) {
@@ -466,7 +466,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
             };
         }
         const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : 'sidebar-layout';
-        return (h(Host, { key: '1f9602b1e458ff23e4661c4f6f9e866494694eed' }, h("div", { key: '18fa3c57d04eebd43156c8cefff5b7058a2dd070', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: 'e3976677ee902dfbc4c89335b179bb55d85d01ae', class: "sidebar-btn" }, h("ifx-button", { key: 'f60ac282ed5cf969489dd6fda04be7122ab12468', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: '41be23acee02da11f0ed01a50f26acd4af604076', icon: "cross-16" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: 'f43fbc75fb3e58f146e65e58a825ea41446c3ac5', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: '9e1d212949947ccd3fac0586e87c407f1c9023a9', class: "sidebar-container" }, h("div", { key: '0d58c949e5e4cba25ae496d5a8eb180ef3ca04c4', class: "filters-title-container" }, h("span", { key: '659a22e030f5fe01d95ea9775088e833ec436497', class: "filters-title" }, "Filters")), h("div", { key: '5d4bd970d9cef3e8d2bff208efd3aeb283f21392', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '3458deab62dddb25662f106948c58a101ef45826', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: '759e808e57dfbc1e80aae2de85dcd27b610edcdb', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: 'ed2cb556faa84c49c2913d3057d46add4f7dd03b', name: "topbar-filter" })))), h("div", { key: 'ebf34d31be5f73e2a8d77f55ea6eedbb2c22ad46', class: "table-pagination-wrapper" }, h("div", { key: '94f80f4eb9285b2c72679d7babee51b45a41c5bb', class: "filter-chips" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (Object.keys(this.currentFilters).map(name => {
+        return (h(Host, { key: '1f9602b1e458ff23e4661c4f6f9e866494694eed' }, h("div", { key: '18fa3c57d04eebd43156c8cefff5b7058a2dd070', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: 'e3976677ee902dfbc4c89335b179bb55d85d01ae', class: "sidebar-btn" }, h("ifx-button", { key: 'f60ac282ed5cf969489dd6fda04be7122ab12468', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: '41be23acee02da11f0ed01a50f26acd4af604076', icon: "cross-12" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: 'f43fbc75fb3e58f146e65e58a825ea41446c3ac5', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: '9e1d212949947ccd3fac0586e87c407f1c9023a9', class: "sidebar-container" }, h("div", { key: '0d58c949e5e4cba25ae496d5a8eb180ef3ca04c4', class: "filters-title-container" }, h("span", { key: '659a22e030f5fe01d95ea9775088e833ec436497', class: "filters-title" }, "Filters")), h("div", { key: '5d4bd970d9cef3e8d2bff208efd3aeb283f21392', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '3458deab62dddb25662f106948c58a101ef45826', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: '759e808e57dfbc1e80aae2de85dcd27b610edcdb', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: 'ed2cb556faa84c49c2913d3057d46add4f7dd03b', name: "topbar-filter" })))), h("div", { key: 'ebf34d31be5f73e2a8d77f55ea6eedbb2c22ad46', class: "table-pagination-wrapper" }, h("div", { key: '94f80f4eb9285b2c72679d7babee51b45a41c5bb', class: "filter-chips" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (Object.keys(this.currentFilters).map(name => {
             const filter = this.currentFilters[name];
             const filterValues = filter.filterValues;
             const isMultiSelect = filter.type !== 'text';