@infineon/infineon-design-system-stencil 33.1.1--canary.1826.80f5b1bc68c2582aa6b8c111ec42ccf8d0eeb4a7.0 → 33.1.1--canary.1818.0976c23a51fd2f991e0da944a5fbd978547851db.0

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

@@ -1 +0,0 @@
-{"version":3,"names":["accordionCss","IfxAccordionStyle0","Accordion","constructor","hostRef","this","autoCollapse","onItemOpen","event","items","Array","from","el","querySelectorAll","item","itemElement","target","open","render","h","key","class","accordionItemCss","IfxAccordionItemStyle0","IfxAccordionItem","AriaLevel","internalOpen","componentWillLoad","componentDidLoad","openAccordionItem","componentDidUpdate","openChanged","newValue","toggleOpen","ifxOpen","emit","isOpen","ifxClose","isClosed","contentEl","style","maxHeight","scrollHeight","handleSlotChange","e","slotElement","nodes","assignedNodes","length","forEach","node","observer","MutationObserver","mutationsList","_","mutation","type","observe","attributes","childList","subtree","handleKeydown","ev","path","composedPath","includes","titleEl","preventDefault","role","onClick","tabindex","ref","String","icon","id","caption","onSlotchange"],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx","src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.accordion-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: tokens.$ifxSpace100;\n  font-family: var(--ifx-font-family);\n\n}","//ifxAccordion.tsx\nimport { Component, h, Listen, Element, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: { delegatesFocus: true },\n})\nexport class Accordion {\n  @Element() el: HTMLElement;\n  @Prop() autoCollapse: boolean = false;\n\n\n  @Listen('ifxOpen')\n  async onItemOpen(event: CustomEvent) {\n    if (this.autoCollapse) {\n      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\n      for (const item of items) {\n        const itemElement = item as HTMLIfxAccordionItemElement;\n        if (itemElement !== event.target && (await itemElement.open)) {\n          itemElement.open = false;\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"accordion-wrapper\">\n        <slot />\n      </div>\n    );\n  }\n}\n","// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n  border-radius: 3px;\n  overflow: hidden;\n  transition: all 0.3s;\n  font-family: var(--ifx-font-family);\n\n}\n\n.accordion-title:focus {\n  outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n  content: '';\n  display: block;\n  position: absolute;\n  top: -4px;\n  bottom: -4px;\n  left: -4px;\n  right: -4px;\n  border-radius: 5px;\n  border: 2px solid tokens.$ifxColorOcean500;\n  box-sizing: border-box;\n}\n\n.accordion-title:hover {\n  border: 1px solid tokens.$ifxColorEngineering200;\n  color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n  gap: tokens.$ifxSpace150;\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  cursor: pointer;\n  margin: 4px;\n}\n\n.accordion-caption {\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n  gap: tokens.$ifxSpace100;\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.3s ease-in-out;\n  line-height: 24px;\n  font-size: tokens.$ifxFontSizeM;\n  font-weight: 400;\n}\n\n.inner-content {\n  background-color: tokens.$ifxColorBaseWhite;\n  padding: tokens.$ifxSpace300;\n  // white-space: pre-wrap;\n  /* wraps text at spaces and within words */\n  word-wrap: break-word;\n  /* breaks text within a word if necessary */\n  overflow-wrap: anywhere;\n  align-self: stretch;\n\n  /* breaks text at arbitrary points when needed */\n}\n\n.accordion-icon {\n  font-weight: bold;\n  display: inline-block;\n  transition: transform 0.3s;\n\n  &:hover {\n    color: tokens.$ifxColorOcean600;\n\n  }\n}\n\n\n\n.accordion-item.open .accordion-icon {\n  transform: rotate(-180deg);\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion-item',\n  styleUrl: 'accordionItem.scss',\n  shadow: true,\n})\nexport class IfxAccordionItem {\n  @Element() el;\n  @Prop() caption: string;\n  @Prop({\n    mutable: true,\n  }) open: boolean = false;\n  @Prop() AriaLevel = 3;\n  @State() internalOpen: boolean = false;\n  @Event() ifxOpen: EventEmitter;\n  @Event() ifxClose: EventEmitter;\n  private contentEl!: HTMLElement;\n  private titleEl!: HTMLElement;\n\n\n  componentWillLoad() {\n    this.internalOpen = this.open;\n  }\n\n  componentDidLoad() {\n    this.openAccordionItem()\n  }\n\n  componentDidUpdate() {\n    this.openAccordionItem()\n  }\n\n\n\n  @Watch('open')\n  openChanged(newValue: boolean) {\n    this.internalOpen = newValue;\n  }\n\n  toggleOpen() {\n    this.internalOpen = !this.internalOpen;\n    this.open = this.internalOpen;\n\n    if (this.internalOpen) {\n      this.ifxOpen.emit({ isOpen: this.internalOpen });\n    } else {\n      this.ifxClose.emit({ isClosed: !this.internalOpen });\n    }\n  }\n\n  openAccordionItem() {\n    if (this.internalOpen) {\n      this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;\n    } else {\n      this.contentEl.style.maxHeight = '0';\n    }\n  }\n\n  handleSlotChange(e) {\n    const slotElement = e.target;\n    const nodes = slotElement.assignedNodes();\n    \n    if(nodes.length > 0) {\n      nodes.forEach(node => {\n        const observer = new MutationObserver((mutationsList, _) => {\n          for(let mutation of mutationsList) {\n            if (mutation.type === 'childList') {\n              if (this.internalOpen) {\n                this.openAccordionItem();\n              }\n            }\n          }\n        });\n        observer.observe(node, { attributes: true, childList: true, subtree: true });\n      });\n    }\n\n    if (this.internalOpen) {\n      this.openAccordionItem();\n    }\n  }\n\n  \n\n  @Listen('keydown')\n  handleKeydown(ev: KeyboardEvent) {\n    const path = ev.composedPath();\n\n    if(!path.includes(this.titleEl)) { \n      return;\n    }\n\n    switch (ev.key) {\n      case 'Enter': // fallthrough\n      case ' ': // space\n        ev.preventDefault();\n        this.toggleOpen();\n        break;\n    }\n  }\n\n\n  render() {\n    return (\n      <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n        <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0' ref={(el) => (this.titleEl = el as HTMLElement)}>\n          <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n            <ifx-icon icon=\"chevron-down-12\"/>\n          </span>\n          <span id=\"accordion-caption\" class=\"accordion-caption\">{this.caption}</span>\n        </div>\n        <div id=\"accordion-content\" class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n          <div class=\"inner-content\">\n            <slot onSlotchange={(e) => this.handleSlotChange(e)} />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as i,h as s}from"./p-e6edf72d.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.autocomplete="on";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:"69bfbbbb91d0d918c9d62f1023babc630325882e","aria-label":"a search field for user input","aria-disabled":this.disabled,"aria-value":this.value,class:"search-field"},s("div",{key:"0bd284139b40d1c6b2288c74fb4f65235e470ab1",class:this.getWrapperClassNames(),tabindex:1,onFocus:()=>this.focusInput(),onClick:()=>this.focusInput()},s("ifx-icon",{key:"a472e315073ad3d92fd55a5689f84e31bb57271c",icon:"search-16",class:"search-icon"}),s("input",{key:"0e4d8258fe7058ee1ad9b12605ccd7ba14f23ce2",ref:e=>this.inputElement=e,type:"text",autocomplete:this.autocomplete,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-1fca1eb2.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["searchFieldCss","IfxSearchFieldStyle0","SearchField","constructor","hostRef","this","value","insideDropdown","showDeleteIcon","showDeleteIconInternalState","disabled","size","isFocused","placeholder","autocomplete","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() autocomplete: string = \"on\";\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            autocomplete={this.autocomplete}\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,aAAuB,KACvBT,KAAAU,UAAqB,KAkB7BV,KAAAW,YAAc,KACZ,MAAMC,EAAQZ,KAAKa,aAAaZ,MAChCD,KAAKC,MAAQW,EACbZ,KAAKc,SAASC,KAAKf,KAAKC,MAAM,EAGhCD,KAAAgB,aAAe,KACbhB,KAAKa,aAAaZ,MAAQ,GAC1BD,KAAKC,MAAQ,GACbD,KAAKc,SAASC,KAAKf,KAAKC,MAAM,C,CAxBhC,kBAAAgB,CAAmBC,GACjB,MAAMC,EAAOD,EAAME,eACnB,IAAKD,EAAKE,SAASrB,KAAKa,cAAe,CACrCb,KAAKO,UAAY,K,EAKrB,YAAAe,CAAaC,GACX,GAAIA,IAAavB,KAAKa,aAAaZ,MAAO,CACxCD,KAAKa,aAAaZ,MAAQsB,C,EAiB9B,UAAAC,GACExB,KAAKa,aAAaY,QAClBzB,KAAKO,UAAY,I,CAMnB,mBAAAmB,GACE,GAAI1B,KAAKC,QAAU,GAAI,CACrBD,KAAKI,4BAA8B,I,MAC9BJ,KAAKI,4BAA8B,K,CAG5C,MAAAuB,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,gCAA+B,gBAAgB7B,KAAKK,SAAQ,aAAcL,KAAKC,MAAO6B,MAAM,gBAC1GF,EAAA,OAAAC,IAAA,2CAAKC,MAAO9B,KAAK+B,uBACfC,SAAU,EACVC,QAAS,IAAMjC,KAAKwB,aACpBU,QAAS,IAAMlC,KAAKwB,cAEpBI,EAAA,YAAAC,IAAA,2CAAUM,KAAK,YAAYL,MAAM,gBACjCF,EAAA,SAAAC,IAAA,2CACEO,IAAMC,GAAQrC,KAAKa,aAAewB,EAClCC,KAAK,OACL7B,aAAcT,KAAKS,aACnB8B,QAAS,IAAMvC,KAAKW,cACpBH,YAAaR,KAAKQ,YAClBH,SAAUL,KAAKK,SACfK,UAAWV,KAAKU,UAChBT,MAAOD,KAAKC,QAEbD,KAAKG,gBAAkBH,KAAKI,4BAC3BwB,EAAA,YAAUO,KAAK,YAAYL,MAAM,cAAcI,QAASlC,KAAKgB,eAE3D,M,CAMZ,YAAAwB,GACE,MAAO,GAAGxC,KAAKM,SAAW,IACtB,0BACA,E,CAIN,oBAAAyB,GACE,OAAOU,EACL,wBACA,yBAAyBzC,KAAKwC,iBAC9B,GAAGxC,KAAKO,UAAY,UAAY,K","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as t,h as n,a as o,g as e}from"./p-e6edf72d.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:"c68864f2ea93894b6f55bc863f227fe19abd76e5","aria-disabled":this.disabled,"aria-label":this.AriaLabel},this.href?n("a",{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",disabled:this.disabled},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-2f8fb448.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["iconButtonCss","IfxIconButtonStyle0","IconButton","constructor","hostRef","this","target","shape","handleClick","event","disabled","stopImmediatePropagation","setFocus","focusableElement","focus","componentWillLoad","render","h","Host","key","AriaLabel","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@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  @Prop() AriaLabel: string;\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        aria-disabled={this.disabled}\n        aria-label={this.AriaLabel}> \n        {this.href ? (\n          <a\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            disabled={this.disabled}\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,MCQFE,EAAU,MANvB,WAAAC,CAAAC,G,UAYUC,KAAAC,OAAiB,QACjBD,KAAAE,MAAgB,O,CAOxB,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,2DACYd,KAAKK,SAAQ,aAChBL,KAAKe,WAChBf,KAAKgB,KACJJ,EAAA,KACEK,IAAMC,GAAQlB,KAAKQ,iBAAmBU,EACtCC,MAAOnB,KAAKoB,gBACZJ,MAAOhB,KAAKK,SAAWL,KAAKgB,KAAOK,UACnCpB,OAAQD,KAAKC,OACbqB,IAAKtB,KAAKC,SAAW,SAAW,sBAAwBoB,WAExDT,EAAA,YAAUW,KAAMvB,KAAKuB,QAGvBX,EAAA,UACEO,MAAOnB,KAAKoB,gBACZI,KAAK,SACLnB,SAAUL,KAAKK,UAEfO,EAAA,YAAUW,KAAMvB,KAAKuB,Q,CAO/B,eAAAE,GACE,MAAO,GAAGzB,KAAK0B,YAAc,YACzB,YACA,GAAG1B,KAAK0B,YAAc,WACpB,WACA,S,CAGR,YAAAC,GACE,GAAI,GAAG3B,KAAK4B,SAAW,KAAM,CAC3B,MAAO,I,MAEJ,GAAI,GAAG5B,KAAK4B,SAAW,IAAK,CAC/B,MAAO,G,MAEJ,GAAI,GAAG5B,KAAK4B,SAAW,IAAK,CAC/B,MAAO,G,MAEJ,MAAO,E,CAGd,aAAAR,GACE,OAAOS,EACL,kBACA,OAAO7B,KAAKE,QACZF,KAAK4B,MAAQ,OAAO5B,KAAK2B,iBACzB,OAAO3B,KAAKyB,oBACZzB,KAAKK,SAAW,WAAa,G","ignoreList":[]}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["navbarItemCss","IfxNavbarItemStyle0","NavbarItem","constructor","hostRef","this","showLabel","icon","href","target","hideOnMobile","internalHref","isMenuItem","hasChildNavItems","isSidebarMenuItem","dotIndicator","handleOutsideClick","event","path","composedPath","itemMenu","getItemMenu","classList","contains","includes","el","closeItemMenu","hideComponent","style","display","showComponent","toggleChildren","action","arrowIcon","getChevronDownIconWrapper","handleClassList","moveChildComponentsIntoSubLayerMenu","subLayerMenu","subLayerMenuIsOpened","navbarItem","getNavBarItem","subLayerBackButton","getSubLayerBackButton","ifxNavItem","emit","component","navItems","querySelectorAll","i","length","setAttribute","sublayerBackButton","shadowRoot","querySelector","toggleFirstLayerItem","actionOne","actionTwo","secondLayerMenu","getSubLayerMenu","openSubLayerMenu","rightArrowIcon","getRightArrowIcon","slotName","getAttribute","toLowerCase","parent","parentElement","addMenuItemClass","moveChildComponentsBackIntoNavbar","returnToFirstLayer","menuItemRightIconWrapper","componentWillLoad","setHref","checkIfItemIsNested","checkIfItemHasChildren","removeEmptyItem","componentDidLoad","handleItemGap","handleLabelWrapper","getNavbarItems","relocateItemsToFirstlayer","componentDidUpdate","isLayerItemParent","setMenuItemPosition","menuPosition","getItemMenuPosition","itemPosition","type","className","navItem","forEach","item","trim","undefined","tagName","toUpperCase","sidebarItems","setItemSideSpecifications","menuItem","slotValue","menu","slot","getRootNode","host","toggleItemMenu","handleNestedLayerMenu","e","labelWrapper","assignedNodes","add","remove","innerContentWrapper","numberIndicatorWrapper","numberIndicator","hostElement","render","h","key","class","onMouseLeave","onMouseEnter","onClick","isNaN","name"],"sources":["src/components/navigation/navbar/navbar-item.scss?tag=ifx-navbar-item&encapsulation=shadow","src/components/navigation/navbar/navbar-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host(.hidden) {\n  display: none;\n}\n\n.navbar__item {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0px 8px;\n  flex: none;\n  order: 0;\n  flex-grow: 0;\n  font-family: 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  & .number__indicator-wrapper { \n    position: relative;\n    top: -11px;\n  }\n\n  & .dot__indicator-wrapper { \n    display: flex;\n    width: 8px;\n    height: 8px;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    border-radius: 50%;\n    background-color: tokens.$ifxColorOcean500;\n    position: relative;\n    top: -11px;\n  }\n\n  & .navbar__container-right-content-navigation-item-icon-wrapper {\n    position: relative;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    padding: 0px;\n    gap: 8px;\n    flex: none;\n    order: 0;\n    flex-grow: 0;\n\n \n    & .username__tooltip { \n      display: none;\n      position: absolute;\n      top: 35px;\n      right: 0;\n      text-wrap: nowrap;\n      padding: 1px 5px;\n      font-size: 13px;\n      font-family: \"Source Sans 3\";\n      background-color: black;\n      color: #fff;\n      z-index: 99;\n    }\n\n    &:hover { \n      & .username__tooltip { \n        display: block;\n      }\n    }\n\n    & .initials__wrapper { \n      display: flex;\n      width: 24px;\n      height: 24px;\n      justify-content: center;\n      align-items: center;\n      border-radius: 100%;\n      background-color: tokens.$ifxColorOcean500;\n\n      & .initials { \n        color: #FFF;\n        text-align: center;\n        font-family: \"Source Sans 3\";\n        font-size: 14px;\n        font-style: normal;\n        font-weight: 600;\n        line-height: 20px; \n\n        -webkit-touch-callout: none;\n        -webkit-user-select: none;\n        -khtml-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n      \n      }\n    }\n\n    & img { \n      width: 24px; \n      height: 24px;\n      border-radius: 100%;\n    }\n\n    &.removeWrapper {\n      display: none;\n    }\n\n    &.hide {\n      display: none;\n    }\n  }\n}\n\n.container { \n  position: relative;\n\n  & .sub__layer-back-button { \n    display: none;\n    &.show { \n      display: flex;\n      justify-content: flex-start;\n\n      & .back__button-wrapper { \n        display: flex;\n        align-items: center;\n        gap: tokens.$ifxSpace100;\n        padding: tokens.$ifxSpace100 0 tokens.$ifxSpace200 0;\n        color: tokens.$ifxColorOcean500;\n        font-size: 16px;\n        font-style: normal;\n        font-weight: 600;\n        line-height: 24px;\n\n        & span, & ifx-icon { \n          &:hover { \n            cursor: pointer;\n          }\n        }\n\n      }\n    }\n  }\n\n  &.hide { \n    display: none;\n  }\n\n  & .inner__content-wrapper { \n    position: relative;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 8px;\n    &.no-gap { \n      gap: 0px;\n    }\n\n    & .navbar__container-right-content-navigation-item-icon-wrapper {\n      &.no-gap { \n        gap: 0px;\n      }\n    }\n\n    & .number__indicator-wrapper { \n      position: relative;\n      top: -11px;\n    }\n\n  }\n}\n\n.navbar-menu  {\n  position: absolute;\n  display: none;\n  list-style-type: none;\n  visibility: visible;\n  flex-direction: column;\n  width: 224px;\n  min-width: 224px;\n  background: tokens.$ifxColorBaseWhite;\n  box-shadow: 0px 6px 9px 0px #1d1d1d1a;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  padding: 8px 0px;\n  font-family: 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  @Prop() numberIndicator: number;\n  @Prop() dotIndicator: boolean = false;\n \n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    const itemMenu = this.getItemMenu()\n    if(itemMenu) { \n      if(itemMenu.classList.contains('open')) { \n        if (!path.includes(this.el)) {\n          this.closeItemMenu();\n        }\n      }\n    }\n  }\n\n  @Method()\n  async hideComponent() { \n    this.el.style.display = 'none';\n  }\n\n  @Method()\n  async showComponent() { \n    this.el.style.display = '';\n  }\n\n  @Method()\n  async toggleChildren(action) { \n    const itemMenu = this.getItemMenu()\n    const arrowIcon = this.getChevronDownIconWrapper()\n    if(itemMenu) { \n      this.handleClassList(arrowIcon, action, 'hide')\n      this.handleClassList(itemMenu, action, 'itemInMobileMenu')\n    }\n  }\n\n  @Method()\n  async moveChildComponentsIntoSubLayerMenu() { \n    const subLayerMenu = this.getItemMenu()\n    if(subLayerMenu) { \n      const subLayerMenuIsOpened = this.handleClassList(subLayerMenu, 'contains', 'open')\n      if(subLayerMenuIsOpened) { \n        const navbarItem = this.getNavBarItem()\n        const subLayerBackButton = this.getSubLayerBackButton()\n        this.handleClassList(navbarItem, 'add', 'layer__item-parent')\n        this.handleClassList(subLayerBackButton, 'add', 'show')\n        this.ifxNavItem.emit({component: this.el, action: 'hideFirstLayer'})\n      }\n    }\n\n    const navItems = this.el.querySelectorAll('[slot=\"first__layer\"]')\n    this.isSidebarMenuItem = true;\n\n    for(let i = 0; i < navItems.length; i++) { \n      navItems[i].setAttribute('slot', 'second__layer')\n      navItems[i].moveChildComponentsIntoSubLayerMenu()\n    }\n  }\n\n  getSubLayerBackButton() { \n    const sublayerBackButton = this.el.shadowRoot.querySelector('.sub__layer-back-button')\n    return sublayerBackButton\n  }\n\n  @Method()\n  async toggleFirstLayerItem(actionOne, actionTwo) { \n   const navbarItem = this.getNavBarItem()\n   const secondLayerMenu = this.getSubLayerMenu()\n   const subLayerBackButton = this.getSubLayerBackButton()\n   this.handleClassList(subLayerBackButton, [actionOne], 'show')\n   this.handleClassList(navbarItem, [actionTwo], 'hide')\n   this.handleClassList(secondLayerMenu, [actionTwo], 'remove__margin')\n  }\n\n  openSubLayerMenu() { \n    if(this.hasChildNavItems) { \n      const subLayerBackButton = this.getSubLayerBackButton()\n      const rightArrowIcon = this.getRightArrowIcon()\n      const navbarItem = this.getNavBarItem()\n      const subLayerMenu = this.getSubLayerMenu()\n      const slotName = this.el.getAttribute('slot')\n\n      this.handleClassList(subLayerBackButton, 'add', 'show')\n      this.handleClassList(rightArrowIcon, 'add', 'hide')\n      this.handleClassList(navbarItem, 'add', 'layer__item-parent')\n      this.handleClassList(subLayerMenu, 'add', 'open')\n    \n      if(slotName.toLowerCase() === 'second__layer') {\n        this.ifxNavItem.emit({component: this.el, parent: this.el.parentElement, action: 'hideSecondLayer'})\n        this.handleClassList(navbarItem, 'remove', 'menuItem')\n      } else { \n        this.ifxNavItem.emit({component: this.el, action: 'hideFirstLayer'})\n      }\n    }\n  }\n\n  @Method()\n  async addMenuItemClass() { \n    const navbarItem = this.getNavBarItem()\n    this.handleClassList(navbarItem, 'add', 'menuItem')\n    const rightArrowIcon = this.getRightArrowIcon()\n    if(this.hasChildNavItems) { \n      this.handleClassList(rightArrowIcon, 'remove', 'hide')\n    }\n  }\n\n  @Method()\n  async moveChildComponentsBackIntoNavbar() { \n    const subLayerBackButton = this.getSubLayerBackButton()\n    const navbarItem = this.getNavBarItem()\n    const secondLayerMenu = this.getSubLayerMenu()\n\n    this.handleClassList(subLayerBackButton, 'remove', 'show')\n    this.handleClassList(navbarItem, 'remove', 'layer__item-parent')\n    this.handleClassList(secondLayerMenu, 'remove', 'remove__margin')\n\n    this.ifxNavItem.emit({component: this.el, action: 'show'})\n\n    const navItems = this.el.querySelectorAll('[slot=\"second__layer\"]')\n    this.isSidebarMenuItem = false;\n    this.showComponent()\n    this.handleClassList(navbarItem, 'remove', 'hide')\n\n    for(let i = 0; i < navItems.length; i++) { \n      navItems[i].setAttribute('slot', 'first__layer')\n      navItems[i].moveChildComponentsBackIntoNavbar()\n      navItems[i].addMenuItemClass()\n      navItems[i].returnToFirstLayer()\n    }\n  }\n\n  getRightArrowIcon() { \n    const menuItemRightIconWrapper = this.el.shadowRoot.querySelector('.menuItemRightIconWrapper')\n    return menuItemRightIconWrapper;\n  }\n\n  getChevronDownIconWrapper() { \n    const arrowIcon = this.el.shadowRoot.querySelector('.navItemIconWrapper');\n    return arrowIcon;\n  }\n\n  @Method()\n  async returnToFirstLayer() { \n    const subLayerBackButton = this.getSubLayerBackButton()\n    const navbarItem = this.getNavBarItem()\n    const rightArrowIcon = this.getRightArrowIcon()\n    const subLayerMenu = this.getSubLayerMenu()\n    const slotName = this.el.getAttribute('slot')\n\n    this.handleClassList(subLayerBackButton, 'remove', 'show')\n    this.handleClassList(navbarItem, 'remove', 'layer__item-parent')\n    this.handleClassList(subLayerMenu, 'remove', 'open')\n    if(this.hasChildNavItems) { \n      this.handleClassList(rightArrowIcon, 'remove', 'hide')\n    }\n\n    if(slotName.toLowerCase() === 'second__layer') {\n      this.ifxNavItem.emit({component: this.el, parent: this.el.parentElement, action: 'returnToSecondLayer'})\n      this.handleClassList(navbarItem, 'add', 'menuItem')\n    } else { \n      this.ifxNavItem.emit({component: this.el, action: 'return'})\n    }\n  }\n\n  componentWillLoad() {\n    this.setHref()\n    this.checkIfItemIsNested()\n    this.checkIfItemHasChildren()\n    this.removeEmptyItem()\n  }\n\n  componentDidLoad() { \n    this.handleItemGap()\n    this.handleLabelWrapper()\n    if(this.hasChildNavItems) { \n      const navItems = this.getNavbarItems();\n      this.relocateItemsToFirstlayer(navItems)\n    }\n  }\n\n  componentDidUpdate() { \n    const navbarItem = this.getNavBarItem()\n    const isLayerItemParent = this.handleClassList(navbarItem, 'contains', 'layer__item-parent')\n    if(this.isSidebarMenuItem && isLayerItemParent) {\n      const rightArrowIcon = this.getRightArrowIcon()\n      this.handleClassList(rightArrowIcon, 'add', 'hide')\n    }\n  }\n \n  @Method()\n  async setMenuItemPosition() { \n    if(this.isMenuItem && this.hasChildNavItems) { \n      const menuPosition = this.getItemMenuPosition()\n      if(menuPosition === 'left') { \n        this.itemPosition = 'left'\n      } else if(menuPosition === 'right') { \n        this.itemPosition = 'right'\n      }\n    }\n  }\n\n  handleClassList(el, type, className) {\n    el.classList[type](className)\n    if (type === 'contains') {\n      return el.classList.contains(className)\n    }\n  }\n\n  getNavbarItems() {\n    const navItems = this.el.querySelectorAll('ifx-navbar-item')\n    return navItems;\n  }\n  \n  getNavBarItem() { \n    const navItem = this.el.shadowRoot.querySelector('.navbar__item')\n    return navItem;\n  }\n\n  getSubLayerMenu() { \n    const subLayerMenu = this.el.shadowRoot.querySelector('.sub__layer-menu')\n    return subLayerMenu;\n  }\n\n  relocateItemsToFirstlayer(navItems) { \n     navItems.forEach(item => {\n      item.setAttribute('slot', 'first__layer')\n    })\n  }\n\n  setHref() {\n    if (this.href.toLowerCase().trim() === \"\") {\n      this.internalHref = undefined;\n    } else this.internalHref = this.href;\n  }\n\n  checkIfItemIsNested() {\n    const parentElement = this.el.parentElement;\n    if (parentElement.tagName.toUpperCase() === 'IFX-NAVBAR-ITEM' \n    || parentElement.tagName.toUpperCase() === 'IFX-NAVBAR-PROFILE') {\n      this.isMenuItem = true;\n      return;\n    } else {\n      this.isMenuItem = false;\n    }\n  }\n\n  checkIfItemHasChildren() { \n    const sidebarItems = this.getNavbarItems();\n    if (sidebarItems.length !== 0) {\n      this.hasChildNavItems = true;\n    } else {\n      this.hasChildNavItems = false;\n    } \n  }\n\n  @Method()\n  async setItemSideSpecifications() {  \n    const menuItem = this.el;\n    const itemMenu = this.getItemMenu()\n    const slotValue = menuItem.getAttribute('slot')\n \n    if(slotValue.toLowerCase().trim() === \"right-item\") { \n      this.handleClassList(itemMenu, 'add', 'rightSideItemMenu')\n    }\n\n    return true;\n  }\n\n  getItemMenu() { \n    const menu = this.el.shadowRoot.querySelector('.navbar-menu');\n    return menu;\n  }\n\n  closeItemMenu() { \n    const itemMenu = this.getItemMenu()\n    const menuItem = this.getNavBarItem()\n    if(itemMenu) { \n      this.handleClassList(itemMenu, 'remove', 'open')\n      this.handleClassList(menuItem, 'remove', 'open')\n    }\n  }\n\n  getItemMenuPosition() {\n    let parentElement = this.el;\n    while(parentElement) {\n      if(parentElement.tagName === 'IFX-NAVBAR-PROFILE' || parentElement.slot === 'right-item') {\n        return 'left'\n      }\n      parentElement = parentElement.parentElement || parentElement.getRootNode().host;\n    }\n    return 'right'\n  }\n  \n  toggleItemMenu() {\n    const slotName = this.el.getAttribute('slot')\n\n    if(slotName.toLowerCase() === 'mobile-menu-top' || slotName.toLowerCase() === 'second__layer') { \n      this.openSubLayerMenu()\n    }\n\n    if(!this.internalHref && slotName.toLowerCase() !== 'mobile-menu-top' && slotName.toLowerCase() !== 'second__layer' ) {   \n      const itemMenu = this.getItemMenu()\n    \n      if(this.hasChildNavItems) { \n        const menuItem = this.getNavBarItem()\n        this.handleClassList(itemMenu, 'toggle', 'open');\n        this.handleClassList(menuItem, 'toggle', 'open');\n      } \n    }\n  }\n\n  handleNestedLayerMenu(e) { \n    if(this.isMenuItem && this.hasChildNavItems && !this.isSidebarMenuItem) { \n      const itemMenu = this.getItemMenu()\n      const menuPosition = this.getItemMenuPosition()\n      if(e.type.toUpperCase() === 'MOUSEENTER') { \n        this.handleClassList(itemMenu, 'add', 'open')\n        if(menuPosition === 'left') { \n          this.handleClassList(itemMenu, 'add', 'left')\n        } else if(menuPosition === 'right') { \n          this.handleClassList(itemMenu, 'add', 'right')\n        }\n      }\n\n      if(e.type.toUpperCase() === 'MOUSELEAVE') { \n        this.handleClassList(itemMenu, 'remove', 'open')\n        if(menuPosition === 'left') { \n          this.handleClassList(itemMenu, 'remove', 'left')\n        } else if (menuPosition === 'right') { \n          this.handleClassList(itemMenu, 'remove', 'right')\n        }\n      }\n    }\n  }\n\n  handleLabelWrapper() { \n    const labelWrapper = this.el.shadowRoot.querySelector('.label__wrapper');\n    const navItem = this.getNavBarItem();\n    const slot = labelWrapper.querySelector('slot');\n    if (!slot.assignedNodes().length) {\n      navItem.classList.add('removeLabel')\n    } else if(this.showLabel && navItem.classList.contains('removeLabel')) {\n      navItem.classList.remove('removeLabel')\n    }\n  }\n\n  handleItemGap() { \n    const innerContentWrapper = this.el.shadowRoot.querySelector('.navbar__item')\n    const numberIndicatorWrapper = innerContentWrapper.querySelector('.navbar__container-right-content-navigation-item-icon-wrapper');\n    if(this.numberIndicator || this.dotIndicator) { \n      this.handleClassList(numberIndicatorWrapper, 'add', 'no-gap')\n    } else { \n      this.handleClassList(numberIndicatorWrapper, 'remove', 'no-gap')\n    }\n  }\n\n  removeEmptyItem() { \n    const hostElement = this.el.shadowRoot.host;\n    if(!this.showLabel && !this.icon) { \n      this.handleClassList(hostElement, 'add', 'hidden')\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"container\" onMouseLeave={e => this.handleNestedLayerMenu(e)}  onMouseEnter={e => this.handleNestedLayerMenu(e)}>\n        <div class=\"sub__layer-back-button\">\n          <div class=\"back__button-wrapper\" onClick={() => this.returnToFirstLayer()}>\n            <ifx-icon icon=\"arrow-left-16\" />\n            <span>Back</span>\n          </div>\n        </div>\n        <a href={this.internalHref} target={this.target} onClick={() => this.toggleItemMenu()} class=   {`navbar__item ${this.isSidebarMenuItem ? 'sidebarMenuItem' : \"\"} ${!this.showLabel ? 'removeLabel' : \"\"} ${this.isMenuItem ? 'menuItem' : \"\"} ${this.hasChildNavItems ? 'isParent' : \"\"}`}>\n          <div class=\"inner__content-wrapper\">\n            <div class={`navbar__container-right-content-navigation-item-icon-wrapper ${!this.icon ? \"removeWrapper\" : \"\"}`}>\n              {this.icon && <ifx-icon icon={this.icon}></ifx-icon>}\n              {this.icon && !this.showLabel && !isNaN(this.numberIndicator) && \n              <div class=\"number__indicator-wrapper\">\n                <ifx-number-indicator>{this.numberIndicator}</ifx-number-indicator>\n              </div>}\n              {this.icon && !this.showLabel && !this.numberIndicator && this.dotIndicator && \n            <div class=\"dot__indicator-wrapper\"></div>}\n            </div>\n\n            {this.itemPosition === 'left' \n            && this.hasChildNavItems \n            && this.isMenuItem && \n            <div class=\"menuItemLeftIconWrapper\">\n                <ifx-icon icon=\"chevron-left-12\" />\n            </div>}\n\n            <span class=\"label__wrapper\">\n              <slot />\n            </span>\n          </div>\n\n          {this.showLabel && this.numberIndicator && !isNaN(this.numberIndicator) ? \n            <div class=\"number__indicator-wrapper\">\n                <ifx-number-indicator>{this.numberIndicator}</ifx-number-indicator>\n            </div> : \"\"}\n\n            {this.showLabel && !this.numberIndicator && this.dotIndicator ? \n            <div class=\"dot__indicator-wrapper\"></div> : \"\"}\n\n          <div class={`navItemIconWrapper ${this.hasChildNavItems && !this.isMenuItem && !this.isSidebarMenuItem ? '' : \"hide\"}`}>\n            <ifx-icon icon=\"chevron-down-12\" />\n          </div>\n          \n         {<div class={`menuItemRightIconWrapper ${((this.itemPosition === 'right' && this.hasChildNavItems && this.isMenuItem) || (this.isSidebarMenuItem && this.hasChildNavItems)) ? '' : \"hide\"}`}>\n            <ifx-icon icon=\"chevron-right-12\" />\n          </div>}\n        </a>\n        \n        {this.hasChildNavItems && !this.isSidebarMenuItem && <ul class='navbar-menu'> <slot name=\"first__layer\" /> </ul>}\n        {this.isSidebarMenuItem && <ul class='sub__layer-menu'> <slot name=\"second__layer\" /> </ul>}\n\n      </div>\n    )\n  }\n}"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as a,h as e}from"./p-e6edf72d.js";const o=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.container{display:inline-flex;align-items:center;padding:4px 16px;border:1px solid #BFBBBB;border-radius:9999px;background-color:#FFFFFF;gap:8px;font-family:var(--ifx-font-family)}.container:hover{cursor:pointer;border-color:#8D8786}.container:active,.container.active{border-color:#1D1D1D}.container:focus:not(:active,.active){outline:none;border-color:#1D1D1D}.container .label-wrapper{text-decoration:none}.container .label-wrapper .label{margin:0;font-weight:400;font-size:1rem;line-height:20px;color:#1D1D1D}';const r=o;const i=class{constructor(e){a(this,e)}render(){return e("div",{key:"226762652cca543b0a1d18e5369522b4e3f8e439","aria-label":"a tag",class:"container"},this.icon&&e("ifx-icon",{key:"fdbc2d0f9db2230d6a5dfa0c8bce6168c84be5ed",icon:this.icon}),e("a",{key:"4b0b1c215663bb98233e9f4a1839c039d5a62677",href:"javascript:void(null);",class:"label-wrapper"},e("p",{key:"886e29da34a796cd03db982a9a189512c4a0a953",class:"label"},e("slot",{key:"e202efd131d0acb79b9d47a4dfaa8ba865598377"}))))}};i.style=r;export{i as ifx_tag};
-//# sourceMappingURL=p-3c039adc.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["tagCss","IfxTagStyle0","Tag","render","h","key","class","this","icon","href"],"sources":["src/components/tag/tag.scss?tag=ifx-tag&encapsulation=shadow","src/components/tag/tag.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.container {\n  display: inline-flex;\n  align-items: center;\n  padding: tokens.$ifxSpace50 tokens.$ifxSpace200;\n  border: 1px solid tokens.$ifxColorEngineering300;\n  border-radius: tokens.$ifxBorderRadiusRound;\n  background-color: tokens.$ifxColorBaseWhite;\n  gap: tokens.$ifxSpace100;\n  font-family: var(--ifx-font-family);\n\n  &:hover {\n    cursor: pointer;\n    border-color: tokens.$ifxColorEngineering400;\n  }\n\n  &:active,\n  &.active {\n    border-color: tokens.$ifxColorBaseBlack;\n  }\n\n  &:focus:not(:active, .active) {\n    outline: none;\n    border-color: tokens.$ifxColorBaseBlack;\n  }\n\n  .label-wrapper {\n    text-decoration: none;\n\n    .label {\n      margin: 0;\n      font-weight: tokens.$ifxFontWeightRegular;\n      font-size: tokens.$ifxFontSizeM;\n      line-height: 20px;\n      color: tokens.$ifxColorBaseBlack;\n    }\n  }\n}","import { Component, Prop, h } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-tag',\n  styleUrl: 'tag.scss',\n  shadow: true\n})\nexport class Tag {\n  @Prop() icon: string;\n\n\n\n  render() {\n    return (\n      <div aria-label=\"a tag\" class=\"container\">\n        {this.icon && (\n          <ifx-icon icon={this.icon}></ifx-icon>)}\n        <a href=\"javascript:void(null);\" class=\"label-wrapper\" >\n          <p class=\"label\">\n            <slot />\n          </p>\n        </a>\n      </div>\n\n    );\n  }\n}"],"mappings":"2CAAA,MAAMA,EAAS,snBACf,MAAAC,EAAeD,E,MCOFE,EAAG,M,yBAKd,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,QAAQC,MAAM,aAC3BC,KAAKC,MACJJ,EAAA,YAAAC,IAAA,2CAAUG,KAAMD,KAAKC,OACvBJ,EAAA,KAAAC,IAAA,2CAAGI,KAAK,yBAAyBH,MAAM,iBACrCF,EAAA,KAAAC,IAAA,2CAAGC,MAAM,SACPF,EAAA,QAAAC,IAAA,+C","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as o,h as e}from"./p-e6edf72d.js";const a=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.dropdown-header{display:flex;padding:8px 16px;align-items:center;gap:8px;align-self:stretch;border-bottom:1px solid #EEEDED;font-family:var(--ifx-font-family)}.dropdown-header span{color:#575352;font-family:var(--ifx-font-family);font-size:14px;font-style:normal;font-weight:400;line-height:20px;}';const f=a;const n=class{constructor(e){o(this,e)}render(){return e("div",{key:"5b074bc6dca271a18713c34a4c4f8cb40a2ea265",class:"dropdown-header"},e("span",{key:"69ed109762bf3ae540d1c5489f5bebbd8107b1cd"},e("slot",{key:"b9fe8b98734bd887f25df7a211b5b5587d7bf994"})))}};n.style=f;export{n as ifx_dropdown_header};
-//# sourceMappingURL=p-4679e8ea.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["dropdownHeaderCss","IfxDropdownHeaderStyle0","DropdownHeader","render","h","key","class"],"sources":["src/components/dropdown/dropdown-header/dropdown-header.scss?tag=ifx-dropdown-header&encapsulation=shadow","src/components/dropdown/dropdown-header/dropdown-header.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.dropdown-header {\n  display: flex;\n  padding: 8px 16px;\n  align-items: center;\n  gap: 8px;\n  align-self: stretch;\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\n  font-family: var(--ifx-font-family);\n\n\n  & span {\n    color: tokens.$ifxColorEngineering500;\n    font-family: var(--ifx-font-family);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    /* 142.857% */\n  }\n}","// dropdown-separator.tsx\nimport { Component, h } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-dropdown-header',\n  styleUrl: 'dropdown-header.scss',\n  shadow: true\n})\n\nexport class DropdownHeader {\n  render() {\n    return (\n      <div class='dropdown-header'>\n        <span>\n          <slot />\n        </span>\n      </div>\n    )\n  }\n}"],"mappings":"2CAAA,MAAMA,EAAoB,oYAC1B,MAAAC,EAAeD,E,MCQFE,EAAc,M,yBACzB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mBACTF,EAAA,QAAAC,IAAA,4CACED,EAAA,QAAAC,IAAA,8C","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,h as i,g as t}from"./p-e6edf72d.js";const a=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{height:100%;display:inline-flex}.sidebar__container{box-sizing:border-box;display:inline-flex;flex-direction:column;align-items:flex-start;padding:0px;background-color:#FFFFFF;border-right:1px solid #EEEDED;width:264px;height:100%;font-family:var(--ifx-font-family)}.sidebar__container .sidebar__top-container{display:flex;flex-direction:column;align-items:center;padding:0px;flex:1 1 auto;order:0;z-index:0;width:100%;overflow-y:auto}.sidebar__container .sidebar__top-container .sidebar__nav-bar{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;padding:12px 32px;background-color:#FFFFFF;flex:none;order:0;flex-grow:0;width:100%}.sidebar__container .sidebar__top-container .sidebar__nav-bar .sidebar__nav-bar-logo{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0px;gap:16px;flex:none;order:0;flex-grow:0}.sidebar__container .sidebar__top-container .sidebar__nav-bar .sidebar__nav-bar-logo .sidebar__nav-bar-logo-img{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0px;flex:none;order:0;flex-grow:0}.sidebar__container .sidebar__top-container .sidebar__nav-bar .sidebar__nav-bar-logo .sidebar__nav-bar-logo-img svg{width:91px;height:40px}.sidebar__container .sidebar__top-container .sidebar__nav-bar .sidebar__nav-bar-logo .sidebar__nav-bar-logo-text{font-style:normal;font-weight:600;font-size:1rem;line-height:1.5rem;display:flex;align-items:center;color:#1D1D1D;flex:none;order:1;flex-grow:0;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.sidebar__container .sidebar__top-container .sidebar__nav-container{scrollbar-gutter:stable;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;padding:12px 32px;flex:1 1 auto;order:1;width:100%}.sidebar__container .sidebar__top-container .sidebar__nav-container ::slotted(*){width:100%}.sidebar__container .sidebar__footer-container{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:0px 32px;flex:none;order:1;align-self:stretch;flex-grow:1;z-index:1}.sidebar__container .sidebar__footer-container .sidebar__footer-wrapper{display:flex;flex-direction:column;align-items:flex-start;padding:24px 0px;gap:16px;border-top:1px solid #EEEDED;flex:none;order:0;flex-grow:0;width:100%}.sidebar__container .sidebar__footer-container .sidebar__footer-wrapper .sidebar__footer-wrapper-top-links{display:flex;align-items:flex-start;padding:0px;gap:12px;flex:none;order:0;align-self:stretch;flex-grow:0;flex-wrap:wrap}.sidebar__container .sidebar__footer-container .sidebar__footer-wrapper .sidebar__footer-wrapper-top-links a{font:400 0.875rem/1.25rem "Source Sans 3";display:flex;text-decoration:none;align-items:center;color:#1D1D1D;flex:none;flex-grow:0}.sidebar__container .sidebar__footer-container .sidebar__footer-wrapper .sidebar__footer-wrapper-top-links a:hover{color:#08665C}.sidebar__container .sidebar__footer-container .sidebar__footer-wrapper .sidebar__footer-wrapper-top-links a:focus{outline:none;color:#08665C}.sidebar__container .sidebar__footer-container .sidebar__footer-wrapper .sidebar__footer-wrapper-bottom-links{display:flex;flex-direction:column;align-items:center}.sidebar__container .sidebar__footer-container .sidebar__footer-wrapper .sidebar__footer-wrapper-bottom-links span{font:400 0.875rem/1.25rem "Source Sans 3";text-decoration:none;color:#575352;flex:none;order:1;flex-grow:0;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.sidebar__container .sidebar__footer-container .sidebar__footer-wrapper .sidebar__footer-wrapper-bottom-links span:hover{cursor:initial}';const r=a;const s="active";const o="active-section";const n=".sidebar__nav-item";const d=class{constructor(i){e(this,i);this.applicationName="";this.initialCollapse=true;this.showFooter=true;this.showHeader=true;this.termsOfUse="#";this.imprint="#";this.privacyPolicy="#";this.target="_blank";this.currentYear=(new Date).getFullYear();this.copyrightText="© 1999 - "+this.currentYear+" Infineon Technologies AG";this.internalTermsofUse="";this.internalImprint="";this.internalPrivacyPolicy="";this.internalShowFooter=true;this.activeItem=null}expandActiveItems(){const e=async i=>{if(await i.isItemExpandable()!==true){if(i.active)return 1;return 0}let t=0;const a=this.getSidebarMenuItems(i);for(let i=0;i<a.length;i++){t=Math.max(t,await e(a[i]))}if(t>0){if(t==1){i.expandMenu(false)}else{i.expandMenu(true)}}return t?t+1:0};const i=this.getSidebarMenuItems(this.el);for(let t=0;t<i.length;t++){e(i[t])}}adjustTopBorder(){const e=this.el.children;if(!e.length)return;if(e[0].tagName==="IFX-SIDEBAR-TITLE"){e[0].shadowRoot.querySelector(".sidebar__title").classList.add("no-top-border")}if(e[0].tagName==="IFX-SIDEBAR-ITEM"&&e[0].shadowRoot.querySelector("div > a").classList.contains("header__section")){e[0].shadowRoot.querySelector("div > a").classList.add("no-top-border")}const i=this.el.querySelectorAll("ifx-sidebar-title");i.forEach((e=>{const i=e.nextElementSibling;if(i&&i.tagName==="IFX-SIDEBAR-ITEM"&&i.shadowRoot.querySelector("div > a").classList.contains("header__section")){i.shadowRoot.querySelector("div > a").classList.add("no-top-border")}}))}async addPaddingToTheLastItem(e){const i=this.getSidebarMenuItems(e);for(let e=0;e<i.length;e++){const t=i[e];const a=this.getNavItem(t.shadowRoot);const r=await t.isItemExpandable();if(r){this.addPaddingToTheLastItem(t)}if(e===i.length-1){this.handleClassList(a,"add","extra-padding__bottom")}}}async adjustItemsPadding(){const e=this.el.children;if(e.length===0)return;if(e[0].tagName.toUpperCase()==="IFX-SIDEBAR-ITEM"){const i=e[0].isItemExpandable();if(i){this.addPaddingToTheLastItem(e[0])}}for(let i=1;i<e.length;i++){const t=e[i];const a=e[i-1];const r=this.getNavItem(a.shadowRoot);if(t.tagName.toUpperCase()==="IFX-SIDEBAR-TITLE"){if(a.tagName.toUpperCase()==="IFX-SIDEBAR-ITEM"&&r&&!this.handleClassList(r,"contains","header__section")){this.handleClassList(r,"add","extra-padding__bottom")}}else if(t.tagName.toUpperCase()==="IFX-SIDEBAR-ITEM"){const e=this.getNavItem(t.shadowRoot);if(a.tagName.toUpperCase()==="IFX-SIDEBAR-ITEM"&&r&&!this.handleClassList(r,"contains","header__section")&&this.handleClassList(e,"contains","header__section")){this.handleClassList(r,"add","extra-padding__bottom")}const i=await t.isItemExpandable();if(i){this.addPaddingToTheLastItem(t)}}}}componentDidLoad(){this.adjustTopBorder();this.setInitialActiveItem();if(!this.initialCollapse){this.expandActiveItems()}this.adjustItemsPadding();this.applyActiveSectionToParent(this.el)}getSidebarMenuItems(e=this.el){var i;const t=e.querySelectorAll("ifx-sidebar-item");if(t.length===0){return(i=e.shadowRoot)===null||i===void 0?void 0:i.querySelectorAll("ifx-sidebar-item")}return t}setInitialActiveItem(){const e=i=>{const t=this.getSidebarMenuItems(i);let a=false;t===null||t===void 0?void 0:t.forEach((i=>{if(this.isActive(i)&&!a){a=true;this.handleBorderIndicatorDisplacement(i)}else if(this.isActive(i)&&a){i.setAttribute("active","false")}if(this.hasChildren(i.shadowRoot)&&!this.hasActiveChild(i.shadowRoot)){const e=this.getActiveItemSection(i);this.handleClassList(e,"remove","active-section")}if(this.hasChildren(i.shadowRoot)&&this.isOpen(i.shadowRoot)&&this.containsActiveSection(i)){const e=this.getActiveItemSection(i);this.handleClassList(e,"remove","active-section")}if(this.hasChildren(i.shadowRoot)){e(i.shadowRoot)}}))};const i=this.getSidebarMenuItems(this.el);i.forEach(e)}handleClassList(e,i,t){e.classList[i](t);if(i==="contains"){return e.classList.contains(t)}}getActiveItemSection(e){return this.getNavItem(e.shadowRoot)}getNavItem(e){return e===null||e===void 0?void 0:e.querySelector(".sidebar__nav-item")}hasChildren(e){return(e===null||e===void 0?void 0:e.querySelector(".item__arrow-wrapper"))!==null?true:false}handleBorderIndicatorDisplacement(e){const i=t=>{const a=this.isActive(t)||t===e;if(a){const e=this.getActiveItemSection(t);const i=this.hasChildren(e);if(i){this.handleClassList(e,"add","active-section")}}const r=this.getSidebarMenuItems(t);r.forEach(i)};const t=this.getSidebarMenuItems(this.el);t.forEach(i)}removeActiveClassesRecursively(){const e=i=>{const t=this.querySidebarItems(i);t.forEach((i=>{const t=i.shadowRoot.querySelector(n);t.classList.remove(o);t.classList.remove(s);if(i.getAttribute("active")){i.setAttribute("active","false")}e(i.shadowRoot)}))};e(this.el);if(this.activeItem){this.activeItem.setAttribute("active","false")}this.activeItem=null}hasActiveChild(e){const i=this.getSidebarMenuItems(e);if(i){for(let e of i){if(this.isActive(e)){return true}else if(this.hasChildren(e.shadowRoot)){if(this.hasActiveChild(e.shadowRoot)){return true}}}}return false}handleSidebarItemInteraction(e){const i=e.detail;if(!this.hasChildren(i.shadowRoot)||this.hasActiveChild(i.shadowRoot)){this.handleBorderIndicatorDisplacement(i)}if(this.hasChildren(i.shadowRoot)&&!this.hasActiveChild(i.shadowRoot)){const e=this.getActiveItemSection(i);this.handleClassList(e,"remove","active-section")}if(this.hasChildren(i.shadowRoot)&&this.isOpen(i.shadowRoot)&&this.containsActiveSection(i)){const e=this.getActiveItemSection(i);this.handleClassList(e,"remove","active-section")}}isOpen(e){return this.getNavItem(e).classList.contains("open")?true:false}containsActiveSection(e){const i=this.getSidebarMenuItems(e);for(let e of i){if(this.getNavItem(e.shadowRoot).classList.contains("active-section")||this.hasChildren(e.shadowRoot)&&this.containsActiveSection(e.shadowRoot)){this.handleClassList(e,"add","active-section");return true}}return false}applyActiveSectionToParent(e){const i=this.getSidebarMenuItems(e);i===null||i===void 0?void 0:i.forEach((e=>{if(this.hasActiveChild(e.shadowRoot)){const i=this.getActiveItemSection(e);this.handleClassList(i,"add","active-section")}this.applyActiveSectionToParent(e.shadowRoot)}))}querySidebarItems(e){return e.querySelectorAll("ifx-sidebar-item")}isActive(e){const i=e.getAttribute("active");const t=i==="true";return t}handleSidebarItemActivated(e){this.removeActiveClassesRecursively();this.activeItem=e.detail;this.activeItem.setAttribute("active","true");const i=this.getNavItem(e.detail.parentElement.parentElement.parentElement);if(i){this.handleClassList(i,"add","active-section")}}componentWillLoad(){this.internalTermsofUse=this.termsOfUse.trim();this.internalPrivacyPolicy=this.privacyPolicy.trim();this.internalImprint=this.imprint.trim();this.internalShowFooter=this.showFooter;if(this.internalShowFooter&&!this.internalImprint&&!this.internalPrivacyPolicy&&!this.internalTermsofUse&&!this.copyrightText){this.internalShowFooter=false}}render(){return i("div",{key:"e29cd1c7bf8266a500d547b2a4200231d9bd4bc8","aria-label":"a navigation sidebar","aria-value":this.applicationName,class:"sidebar__container"},i("div",{key:"8055810a23fef774b058a0b3f905f16fce5b8e87",class:"sidebar__top-container"},this.showHeader&&i("div",{key:"d77baa74f0d675a8354ff024117f5c4ac369e6f7",class:"sidebar__nav-bar"},i("div",{key:"adee87ea5e2ca62935017363d03ddf7667c50670",class:"sidebar__nav-bar-logo"},i("div",{key:"1d9bf12c702c43e717e024e3e6cb19814b3af206",class:"sidebar__nav-bar-logo-img"},i("svg",{key:"4d2d8098b29525ae6fa619fd086023e0fa28526c",width:"91",height:"40",viewBox:"0 0 91 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},i("g",{key:"54b0a272d955550fcc7bcdb35413ee5555e43de0","clip-path":"url(#clip0_2396_2480)"},i("path",{key:"e9ad87013d166fe4d538a434d0a7f00867b63264",d:"M67.691 26.7766C71.0884 26.7766 72.1461 23.1841 72.1461 19.8802C72.1461 15.4536 70.2871 13.1441 67.691 13.1441C64.4219 13.1441 63.2681 16.7367 63.3001 19.9443C63.3322 23.1199 64.2296 26.7766 67.691 26.7766ZM66.0244 19.8481C66.0244 18.533 66.0244 15.4536 67.691 15.4536C69.4859 15.4536 69.4218 18.5009 69.4218 19.9123C69.4218 21.2595 69.4218 24.5313 67.7551 24.5313C65.9603 24.4992 66.0244 21.2274 66.0244 19.8481ZM57.8195 26.7766C59.1976 26.7766 60.3835 26.2313 61.5053 25.0445L60.5117 23.1841C59.7425 24.018 58.9733 24.4671 58.0438 24.4671C57.2746 24.4671 56.6336 24.018 56.249 23.2482C55.9285 22.5746 55.8644 21.8048 55.8644 20.9708V20.7142H61.6335V20.1368C61.6335 17.282 61.2809 15.7102 60.3835 14.5234C59.7104 13.6253 58.7169 13.1441 57.499 13.1441C56.2169 13.1441 55.1593 13.7215 54.39 14.8442C53.5567 16.0631 53.2042 17.699 53.2042 19.9443C53.1721 24.2426 54.8708 26.7766 57.8195 26.7766ZM57.531 15.2612C58.172 15.2612 58.5566 15.614 58.813 16.1914C59.0053 16.7046 59.1015 17.5707 59.1015 18.5971H55.8644C55.8964 16.3197 56.3772 15.2612 57.531 15.2612ZM74.2614 26.4559H76.7614V16.8329C77.3703 16.0952 78.0754 15.6782 78.5882 15.6782C78.9087 15.6782 79.2292 15.7423 79.4215 15.9989C79.6138 16.2876 79.71 16.7046 79.71 17.699V26.4559H82.21V16.5442C82.21 15.6782 82.1138 14.8121 81.601 14.1706C81.1523 13.5932 80.4472 13.2404 79.5497 13.2404C78.3959 13.2404 77.2101 13.914 76.569 14.6838C76.537 14.0102 76.3126 13.3687 76.2485 13.1441L73.9089 13.7536C74.0371 14.4593 74.2294 15.3253 74.2294 16.8971V26.4559H74.2614ZM45.2236 14.6838C45.1915 14.0102 44.9672 13.3687 44.9031 13.1441L42.5634 13.7536C42.6916 14.4593 42.8839 15.3253 42.8839 16.8971V26.4238H45.3838V16.8008C45.9928 16.0631 46.6979 15.6461 47.2107 15.6461C47.5312 15.6461 47.8517 15.7102 48.044 15.9669C48.2363 16.2555 48.3325 16.6725 48.3325 17.6669V26.4238H50.8324V16.5442C50.8324 15.6782 50.7363 14.8121 50.2235 14.1706C49.7748 13.5932 49.0696 13.2404 48.1722 13.2404C47.0505 13.2404 45.8646 13.914 45.2236 14.6838ZM14.6473 9.07042C16.1216 9.07042 17.3075 7.88359 17.3075 6.40807C17.3075 4.93256 16.1216 3.74573 14.6473 3.74573C13.173 3.74573 11.9871 4.93256 11.9871 6.40807C11.9871 7.88359 13.173 9.07042 14.6473 9.07042ZM26.9227 26.4559V16.5442C26.9227 15.6782 26.8265 14.8121 26.3137 14.1706C25.865 13.5932 25.1599 13.2404 24.2625 13.2404C23.1087 13.2404 21.9228 13.914 21.2818 14.6838C21.2497 14.0102 21.0254 13.3687 20.9613 13.1441L18.6536 13.7857C18.7818 14.4913 18.9741 15.3574 18.9741 16.9291V26.4559H21.4741V16.8329C22.0831 16.0952 22.7882 15.6782 23.301 15.6782C23.6215 15.6782 23.942 15.7423 24.1343 15.9989C24.3266 16.2876 24.4227 16.7046 24.4227 17.699V26.4559H26.9227ZM38.4289 8.36474C37.4994 8.36474 36.7622 9.10249 36.7622 10.0327C36.7622 10.9629 37.4994 11.7007 38.3968 11.7007C39.3263 11.7007 40.0634 10.9629 40.0634 10.0327C40.0634 9.10249 39.3263 8.36474 38.4289 8.36474ZM13.4614 26.4559H15.9614V10.8346L13.4614 11.1554V26.4559ZM33.8777 9.90441C34.3264 9.90441 34.7751 10.0648 35.0635 10.2893L35.7687 8.33266C35.0956 7.85151 34.3584 7.62698 33.429 7.62698C32.788 7.62698 32.1149 7.78736 31.5059 8.26851C30.897 8.78173 30.256 9.80818 30.256 11.7328C30.256 12.5667 30.288 13.4328 30.288 13.4328H29.4226V15.6461H30.288V26.4238H32.8521V15.6782H34.743L35.2238 13.4649H32.8841V11.4762C32.8841 10.5139 33.2687 9.90441 33.8777 9.90441ZM37.1468 26.4559H39.6788V13.2404L37.1468 13.5611V26.4559Z",fill:"#005DA9"}),i("path",{key:"5602d3c181d3ad52ecb747ce5b52442d6b1b48f2",d:"M77.0816 33.5126C68.6203 36.0146 58.3321 37.1052 48.2682 37.1052C22.7239 37.1052 6.24986 29.5993 5.09604 19.6877C4.67938 15.9668 7.59599 12.3422 12.4677 9.26285C11.6023 8.62132 11.0575 7.59488 11.0254 6.44012C3.97427 10.161 0 15.0366 0 19.9764C0 30.9145 19.5188 40.1525 48.5246 39.7676C58.6205 39.6393 67.0498 38.1958 74.6778 35.6939C83.7482 32.7428 89.4532 28.5087 90.8313 26.6483C89.1968 28.1238 85.3186 31.0748 77.0816 33.5126ZM23.2687 4.38723C24.9674 3.80985 27.3712 3.0721 27.3712 3.0721C34.1339 1.21166 41.6017 0.121063 48.5566 0.185215C40.544 -0.295931 33.2365 0.185215 26.8584 1.33997C26.8584 1.33997 24.743 1.69281 22.4675 2.27018C22.4675 2.27018 21.3777 2.55887 20.7047 2.75133C20.0316 2.94379 19.1021 3.2004 19.1021 3.2004C18.4611 3.39286 17.8201 3.6174 17.1791 3.84193C17.8201 4.48346 18.2047 5.31745 18.2368 6.27974C19.3586 5.76652 21.5059 4.99668 23.2687 4.38723Z",fill:"#E30034"})),i("defs",{key:"b91857cf444cbcd3d108c08eecd32c74ffa7837f"},i("clipPath",{key:"7549b3c5240d84a34cfb0eead8c7d7f421a0546d",id:"clip0_2396_2480"},i("rect",{key:"2a008fbac65664328db9f6df3cf7a8a9d5cb3d01",width:"91",height:"40",fill:"white"})))),"              "),i("div",{key:"3c51fa2fee76a24e9db0d254f49180960b988d12",class:"sidebar__nav-bar-logo-text"},this.applicationName))),i("div",{key:"4b5143c3cb3b107d6cd6c3a827bc9518a88fe923",class:"sidebar__nav-container"},i("slot",{key:"e1a182f2a1ede762b17b0080970c89a407a859c2"}))),this.internalShowFooter&&i("div",{key:"0e4d5357b77d0de7ee0d1dc30b1bccd3bb09aa95",class:"sidebar__footer-container"},i("div",{key:"da0cae5cd4e5cd78594615cf02d267171a83e07d",class:"sidebar__footer-wrapper"},(this.internalTermsofUse||this.internalImprint||this.internalPrivacyPolicy)&&i("div",{key:"491062e63c625ea6c8d4027ff7bf0fa9e631ce66",class:"sidebar__footer-wrapper-top-links"},this.internalTermsofUse!==""&&i("a",{key:"d89e98392641d85d33d7421bf65362786c61e8c5",target:this.target,href:this.internalTermsofUse},"Terms of use"),this.internalImprint!==""&&i("a",{key:"7d21252546491681736d30494c68a6fb0403edd0",target:this.target,href:this.internalImprint},"Imprint"),this.internalPrivacyPolicy!==""&&i("a",{key:"36be4654f254fb07f0f46b3695e3c02807eb0c2e",target:this.target,href:this.internalPrivacyPolicy},"Privacy policy")),this.copyrightText&&i("div",{key:"51288cb0202cf73073de3d53e44ea773ee955b04",class:"sidebar__footer-wrapper-bottom-links"},i("span",{key:"4d751a9d66c85b97827c8f7562c78150d6d33801"},this.copyrightText)))))}get el(){return t(this)}};d.style=r;export{d as ifx_sidebar};
-//# sourceMappingURL=p-48ea6a67.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sidebarCss","IfxSidebarStyle0","ACTIVE","ACTIVE_SECTION","SIDEBAR_ITEM","Sidebar","constructor","hostRef","this","applicationName","initialCollapse","showFooter","showHeader","termsOfUse","imprint","privacyPolicy","target","currentYear","Date","getFullYear","copyrightText","internalTermsofUse","internalImprint","internalPrivacyPolicy","internalShowFooter","activeItem","expandActiveItems","expandRecursively","async","parent","isItemExpandable","active","currRes","children","getSidebarMenuItems","i","length","Math","max","expandMenu","topLevelItems","el","adjustTopBorder","tagName","shadowRoot","querySelector","classList","add","contains","allIfxTitles","querySelectorAll","forEach","element","nextSibling","nextElementSibling","addPaddingToTheLastItem","sidebarItem","sidebarChildItems","childItem","childNavItem","getNavItem","isChildItemExpandable","handleClassList","adjustItemsPadding","sidebarItems","toUpperCase","isFirstSidebarItemExpandable","previousSidebarItem","previousSidebarNavItem","sidebarNavItem","isSidebarItemExpandable","componentDidLoad","setInitialActiveItem","applyActiveSectionToParent","_a","handleItem","firstActiveFoundInGroup","item","isActive","handleBorderIndicatorDisplacement","setAttribute","hasChildren","hasActiveChild","clickedItemSection","getActiveItemSection","isOpen","containsActiveSection","type","className","clickedItem","activeMenuItemSection","isMenu","removeActiveClassesRecursively","removeClasses","root","querySidebarItems","child","remove","getAttribute","menuItem","handleSidebarItemInteraction","event","detail","subMenus","menu","menuItemSection","iteratedComponent","activeAttributeValue","handleSidebarItemActivated","parentElement","componentWillLoad","trim","render","h","key","class","width","height","viewBox","fill","xmlns","d","id","href"],"sources":["src/components/navigation/sidebar/sidebar.scss?tag=ifx-sidebar&encapsulation=shadow","src/components/navigation/sidebar/sidebar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n  height: 100%;\n  display: inline-flex;\n}\n\n.sidebar__container {\n  box-sizing: border-box;\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 0px;\n  background-color: tokens.$ifxColorBaseWhite;\n  border-right: 1px solid #EEEDED;\n  width: 264px;\n  height: 100%;\n  font-family: var(--ifx-font-family);\n\n  & .sidebar__top-container {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 0px;\n    flex: 1 1 auto;\n    order: 0;\n    z-index: 0;\n    width: 100%;\n    overflow-y: auto;\n\n    //max-height: 440px;\n    //overflow-y: auto;\n\n    & .sidebar__nav-bar {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      padding: 12px 32px;\n      background-color: tokens.$ifxColorBaseWhite;\n      flex: none;\n      order: 0;\n      flex-grow: 0;\n      width: 100%;\n\n      & .sidebar__nav-bar-logo {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: flex-start;\n        padding: 0px;\n        gap: tokens.$ifxSpace200;\n        flex: none;\n        order: 0;\n        flex-grow: 0;\n\n        & .sidebar__nav-bar-logo-img {\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          align-items: center;\n          padding: 0px;\n          flex: none;\n          order: 0;\n          flex-grow: 0;\n\n          & svg {\n            width: 91px;\n            height: tokens.$ifxSize500;\n          }\n        }\n\n        & .sidebar__nav-bar-logo-text {\n          font-style: normal;\n          font-weight: tokens.$ifxFontWeightSemibold;\n          font-size: tokens.$ifxFontSizeM;\n          line-height: tokens.$ifxLineHeightM;\n          display: flex;\n          align-items: center;\n          color: tokens.$ifxColorBaseBlack;\n          flex: none;\n          order: 1;\n          flex-grow: 0;\n          white-space: pre-wrap;\n          word-wrap: break-word;\n          overflow-wrap: anywhere;\n        }\n      }\n    }\n\n    & .sidebar__nav-container {\n      scrollbar-gutter: stable;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      padding: 12px 32px;\n      flex: 1 1 auto;\n      order: 1;\n      width: 100%;\n      // overflow-y: auto;\n\n      & ::slotted(*) {\n        width: 100%;\n      }\n    }\n  }\n\n  & .sidebar__footer-container {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    align-items: center;\n    padding: 0px 32px;\n    flex: none;\n    order: 1;\n    align-self: stretch;\n    flex-grow: 1;\n    z-index: 1;\n\n    & .sidebar__footer-wrapper {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      padding: 24px 0px;\n      gap: tokens.$ifxSpace200;\n      border-top: 1px solid #EEEDED;\n      flex: none;\n      order: 0;\n      flex-grow: 0;\n      width: 100%;\n\n\n      & .sidebar__footer-wrapper-top-links {\n        display: flex;\n        align-items: flex-start;\n        padding: 0px;\n        gap: 12px;\n        flex: none;\n        order: 0;\n        align-self: stretch;\n        flex-grow: 0;\n        flex-wrap: wrap;\n\n        & a {\n          font: tokens.$ifxBodyBody04;\n          display: flex;\n          text-decoration: none;\n          align-items: center;\n          color: tokens.$ifxColorBaseBlack;\n          flex: none;\n          flex-grow: 0;\n\n          &:hover {\n            color: #08665C;\n          }\n\n          &:focus {\n            outline: none;\n            color: #08665C;\n          }\n        }\n      }\n\n      & .sidebar__footer-wrapper-bottom-links {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n\n        & span {\n          font: tokens.$ifxBodyBody04;\n          text-decoration: none;\n          color: tokens.$ifxColorEngineering500;\n          flex: none;\n          order: 1;\n          flex-grow: 0;\n          white-space: pre-wrap;\n          word-wrap: break-word;  \n          overflow-wrap: anywhere;\n\n          &:hover {\n            cursor: initial;\n          }\n        }\n      }\n    }\n  }\n}","import { Component, h, Element, Prop, State, Listen } from '@stencil/core';\n\nconst ACTIVE = 'active';\nconst ACTIVE_SECTION = 'active-section';\nconst SIDEBAR_ITEM = '.sidebar__nav-item';\n\n@Component({\n  tag: 'ifx-sidebar',\n  styleUrl: 'sidebar.scss',\n  shadow: true\n})\n\nexport class Sidebar {\n  @Element() el;\n  @Prop() applicationName: string = ''\n  @Prop() initialCollapse: boolean = true\n  @Prop() showFooter: boolean = true\n  @Prop() showHeader: boolean = true;\n  @Prop() termsOfUse: string = \"#\"\n  @Prop() imprint: string = \"#\"\n  @Prop() privacyPolicy: string = \"#\"\n  @Prop() target: string = \"_blank\"\n  @State() currentYear: number = new Date().getFullYear()\n  @Prop() copyrightText: string = '© 1999 - ' + this.currentYear + ' Infineon Technologies AG'\n  @State() internalTermsofUse: string = \"\"\n  @State() internalImprint: string = \"\"\n  @State() internalPrivacyPolicy: string = \"\"\n  @State() internalShowFooter: boolean = true\n\n  @State() activeItem: HTMLElement | null = null;\n\n  expandActiveItems(){\n    const expandRecursively = async (parent) => {\n      if(await parent.isItemExpandable() !== true){\n        if(parent.active) return 1;\n        return 0;\n      }\n      let currRes = 0;\n      const children = this.getSidebarMenuItems(parent);\n      for(let i = 0; i < children.length; i++){\n        currRes = Math.max(currRes, await expandRecursively(children[i]));\n      }\n      if(currRes > 0){\n        if(currRes == 1){\n          parent.expandMenu(false);\n        }else{\n          parent.expandMenu(true);\n        }\n      }\n\n      return (currRes ? currRes+1 : 0);\n    }\n\n    const topLevelItems = this.getSidebarMenuItems(this.el);\n    for(let i = 0; i < topLevelItems.length; i++){\n      expandRecursively(topLevelItems[i])\n    }\n  }\n\n  adjustTopBorder() {\n    const children = this.el.children;\n    if(!children.length) return;\n    if(children[0].tagName === 'IFX-SIDEBAR-TITLE'){\n      children[0].shadowRoot.querySelector('.sidebar__title').classList.add('no-top-border')\n    }\n    \n    if(children[0].tagName === 'IFX-SIDEBAR-ITEM' && children[0].shadowRoot.querySelector('div > a').classList.contains('header__section')){\n      children[0].shadowRoot.querySelector('div > a').classList.add('no-top-border')\n    }\n\n    const allIfxTitles = this.el.querySelectorAll('ifx-sidebar-title');\n    allIfxTitles.forEach(element => {\n      const nextSibling = element.nextElementSibling;\n      if(nextSibling && nextSibling.tagName === 'IFX-SIDEBAR-ITEM' && nextSibling.shadowRoot.querySelector('div > a').classList.contains('header__section')){\n        nextSibling.shadowRoot.querySelector('div > a').classList.add('no-top-border')\n      }\n    });\n  }\n\n  async addPaddingToTheLastItem(sidebarItem) {\n    const sidebarChildItems = this.getSidebarMenuItems(sidebarItem)\n\n    for(let i = 0; i < sidebarChildItems.length; i++){\n\n      const childItem = sidebarChildItems[i];\n      const childNavItem = this.getNavItem(childItem.shadowRoot);\n      const isChildItemExpandable = await childItem.isItemExpandable();\n\n      if(isChildItemExpandable) {\n        this.addPaddingToTheLastItem(childItem);\n      }\n\n      if(i === sidebarChildItems.length-1){\n        this.handleClassList(childNavItem, 'add', 'extra-padding__bottom');\n      }\n    }\n  }\n\n  async adjustItemsPadding() {\n    const sidebarItems = this.el.children;\n\n    if(sidebarItems.length === 0) return;\n\n    // Processing first item\n    if(sidebarItems[0].tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM') {\n      const isFirstSidebarItemExpandable = sidebarItems[0].isItemExpandable();\n      if(isFirstSidebarItemExpandable) {\n        this.addPaddingToTheLastItem(sidebarItems[0]);\n      }\n    }\n\n    // Processing remaining items\n    for(let i = 1; i < sidebarItems.length; i++){\n\n      const sidebarItem = sidebarItems[i];\n      const previousSidebarItem = sidebarItems[i-1];\n      const previousSidebarNavItem = this.getNavItem(previousSidebarItem.shadowRoot);\n\n      if(sidebarItem.tagName.toUpperCase() === 'IFX-SIDEBAR-TITLE') {\n        \n        if(previousSidebarItem.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM' && previousSidebarNavItem && !this.handleClassList(previousSidebarNavItem, 'contains', 'header__section')) {\n          this.handleClassList(previousSidebarNavItem, 'add', 'extra-padding__bottom');\n        }\n\n      } else if(sidebarItem.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM') {\n\n        const sidebarNavItem = this.getNavItem(sidebarItem.shadowRoot);\n\n        if(previousSidebarItem.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM' && previousSidebarNavItem && !this.handleClassList(previousSidebarNavItem, 'contains', 'header__section') && this.handleClassList(sidebarNavItem, 'contains', 'header__section')) {\n          this.handleClassList(previousSidebarNavItem, 'add', 'extra-padding__bottom');\n        }\n\n        const isSidebarItemExpandable = await sidebarItem.isItemExpandable();\n\n        if(isSidebarItemExpandable) {\n          this.addPaddingToTheLastItem(sidebarItem);\n        }\n      }\n    }\n\n  }\n  \n  componentDidLoad() {\n    this.adjustTopBorder();\n    this.setInitialActiveItem();\n    if(!this.initialCollapse){\n      this.expandActiveItems();\n    }\n    this.adjustItemsPadding();\n    this.applyActiveSectionToParent(this.el);\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  setInitialActiveItem() {\n    const handleItem = (parent) => {\n      const children = this.getSidebarMenuItems(parent);\n      let firstActiveFoundInGroup = false;\n\n      children?.forEach(item => {\n        // If the item is active and it's the first active one in its group\n        if (this.isActive(item) && !firstActiveFoundInGroup) {\n          firstActiveFoundInGroup = true;\n          this.handleBorderIndicatorDisplacement(item);\n        }\n        // If the item is active but it's not the first one in its group\n        else if (this.isActive(item) && firstActiveFoundInGroup) {\n          item.setAttribute('active', 'false'); // Set the 'active' attribute to 'false'\n        }\n\n\n        // If the clicked item is a menu and doesn't have any active children\n        if (this.hasChildren(item.shadowRoot) && !this.hasActiveChild(item.shadowRoot)) {\n          const clickedItemSection = this.getActiveItemSection(item);\n          this.handleClassList(clickedItemSection, 'remove', 'active-section');\n        }\n        // If clickedItem is an opened menu and it contains another menu with 'active-section'\n        if (this.hasChildren(item.shadowRoot) && this.isOpen(item.shadowRoot) && this.containsActiveSection(item)) {\n          const clickedItemSection = this.getActiveItemSection(item);\n          this.handleClassList(clickedItemSection, 'remove', 'active-section');\n        }\n\n        // Recursive call for child items\n        if (this.hasChildren(item.shadowRoot)) {\n          handleItem(item.shadowRoot);\n        }\n      });\n    }\n    // Start with the top-level items\n    const topLevelItems = this.getSidebarMenuItems(this.el);\n    topLevelItems.forEach(handleItem);\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\n  getActiveItemSection(item) {\n    return this.getNavItem(item.shadowRoot);\n  }\n\n\n  getNavItem(el) {\n    return el?.querySelector('.sidebar__nav-item')\n  }\n\n  hasChildren(el) {\n    return el?.querySelector('.item__arrow-wrapper') !== null ? true : false;\n  }\n\n\n  handleBorderIndicatorDisplacement(clickedItem) {\n    // Recursive function to handle each item\n    const handleItem = (item) => {\n      // Check if current item is active or the one that was clicked\n      const isActive = this.isActive(item) || item === clickedItem;\n\n      if (isActive) {\n        const activeMenuItemSection = this.getActiveItemSection(item);\n        const isMenu = this.hasChildren(activeMenuItemSection);\n\n        if (isMenu) {\n          this.handleClassList(activeMenuItemSection, 'add', 'active-section');\n        }\n      }\n\n      // Recursive call for child items\n      const children = this.getSidebarMenuItems(item);\n      children.forEach(handleItem);\n    };\n\n    // Start with the top-level items\n    const topLevelItems = this.getSidebarMenuItems(this.el);\n    topLevelItems.forEach(handleItem);\n  }\n\n\n  removeActiveClassesRecursively() {\n    const removeClasses = (root) => {\n      const children = this.querySidebarItems(root);\n      children.forEach((child) => {\n        const sidebarItem = child.shadowRoot.querySelector(SIDEBAR_ITEM);\n        sidebarItem.classList.remove(ACTIVE_SECTION);\n        sidebarItem.classList.remove(ACTIVE);\n        if (child.getAttribute('active')) {\n          child.setAttribute('active', 'false');\n        }\n        removeClasses(child.shadowRoot);\n      });\n    }\n    removeClasses(this.el);\n    if (this.activeItem) {\n      this.activeItem.setAttribute('active', 'false');\n    }\n    this.activeItem = null;\n  }\n\n  hasActiveChild(menuItem) {\n    const children = this.getSidebarMenuItems(menuItem);\n    if (children) {\n      for (let child of children) {\n        // If the child item is active\n        if (this.isActive(child)) {\n          return true;\n        }\n        // If the child item has children, recurse into them\n        else if (this.hasChildren(child.shadowRoot)) {\n          if (this.hasActiveChild(child.shadowRoot)) {\n            return true;\n          }\n        }\n      }\n    }\n    return false;\n  }\n\n\n  @Listen('ifxSidebarMenu')\n  handleSidebarItemInteraction(event: CustomEvent) {\n    // This method can be used to handle the ifxSidebarMenu event\n    // Get the element that triggered the event\n    const clickedItem = event.detail;\n\n    // If the clicked item is not a menu OR is a menu that has an active child\n    if (!this.hasChildren(clickedItem.shadowRoot) || this.hasActiveChild(clickedItem.shadowRoot)) {\n      this.handleBorderIndicatorDisplacement(clickedItem);\n    }\n\n    // If the clicked item is a menu and doesn't have any active children\n    if (this.hasChildren(clickedItem.shadowRoot) && !this.hasActiveChild(clickedItem.shadowRoot)) {\n      const clickedItemSection = this.getActiveItemSection(clickedItem);\n      this.handleClassList(clickedItemSection, 'remove', 'active-section');\n    }\n\n    // If clickedItem is an opened menu and it contains another menu with 'active-section'\n    if (this.hasChildren(clickedItem.shadowRoot) && this.isOpen(clickedItem.shadowRoot) && this.containsActiveSection(clickedItem)) {\n      const clickedItemSection = this.getActiveItemSection(clickedItem);\n      this.handleClassList(clickedItemSection, 'remove', 'active-section');\n    }\n  }\n\n  isOpen(menuItem) {\n    return this.getNavItem(menuItem).classList.contains('open') ? true : false;\n  }\n\n  containsActiveSection(menuItem) {\n    const children = this.getSidebarMenuItems(menuItem);\n    for (let child of children) {\n      if (this.getNavItem(child.shadowRoot).classList.contains('active-section') || (this.hasChildren(child.shadowRoot) && this.containsActiveSection(child.shadowRoot))) {\n        this.handleClassList(child, 'add', 'active-section')\n        return true;\n      }\n    }\n    return false;\n  }\n\n  applyActiveSectionToParent(el) {\n    // Get all submenus of the given element\n    const subMenus = this.getSidebarMenuItems(el);\n\n    subMenus?.forEach(menu => {\n      // If this submenu has an active child, add active-section class to it\n      if (this.hasActiveChild(menu.shadowRoot)) {\n        const menuItemSection = this.getActiveItemSection(menu);\n        this.handleClassList(menuItemSection, 'add', 'active-section');\n      }\n\n      // Apply to submenu's children\n      this.applyActiveSectionToParent(menu.shadowRoot);\n    });\n  }\n\n\n\n  querySidebarItems(el) {\n    return el.querySelectorAll('ifx-sidebar-item')\n  }\n\n  isActive(iteratedComponent) {\n    const activeAttributeValue = iteratedComponent.getAttribute('active');\n    const isActive = activeAttributeValue === 'true';\n    return isActive;\n  }\n\n  @Listen('ifxSidebarNavigationItem')\n  handleSidebarItemActivated(event: CustomEvent) {\n\n    this.removeActiveClassesRecursively();\n\n    this.activeItem = event.detail;\n    this.activeItem.setAttribute('active', 'true');\n\n    // Get the parent element of the activated item\n    const parent = this.getNavItem(event.detail.parentElement.parentElement.parentElement);\n    if (parent) {\n      this.handleClassList(parent, 'add', 'active-section');\n    }\n  }\n\n  componentWillLoad() {\n    this.internalTermsofUse = this.termsOfUse.trim();\n    this.internalPrivacyPolicy = this.privacyPolicy.trim();\n    this.internalImprint = this.imprint.trim();\n    this.internalShowFooter = this.showFooter;\n    if(this.internalShowFooter && !this.internalImprint && !this.internalPrivacyPolicy && !this.internalTermsofUse && !this.copyrightText){\n      this.internalShowFooter = false;\n    }\n  }\n  \n  render() {\n    return (\n      <div aria-label=\"a navigation sidebar\" aria-value={this.applicationName} class='sidebar__container'>\n        <div class='sidebar__top-container'>\n        {\n          this.showHeader && \n          <div class=\"sidebar__nav-bar\">\n            <div class=\"sidebar__nav-bar-logo\">\n              <div class='sidebar__nav-bar-logo-img'>\n                <svg width=\"91\" height=\"40\" viewBox=\"0 0 91 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <g clip-path=\"url(#clip0_2396_2480)\">\n                    <path d=\"M67.691 26.7766C71.0884 26.7766 72.1461 23.1841 72.1461 19.8802C72.1461 15.4536 70.2871 13.1441 67.691 13.1441C64.4219 13.1441 63.2681 16.7367 63.3001 19.9443C63.3322 23.1199 64.2296 26.7766 67.691 26.7766ZM66.0244 19.8481C66.0244 18.533 66.0244 15.4536 67.691 15.4536C69.4859 15.4536 69.4218 18.5009 69.4218 19.9123C69.4218 21.2595 69.4218 24.5313 67.7551 24.5313C65.9603 24.4992 66.0244 21.2274 66.0244 19.8481ZM57.8195 26.7766C59.1976 26.7766 60.3835 26.2313 61.5053 25.0445L60.5117 23.1841C59.7425 24.018 58.9733 24.4671 58.0438 24.4671C57.2746 24.4671 56.6336 24.018 56.249 23.2482C55.9285 22.5746 55.8644 21.8048 55.8644 20.9708V20.7142H61.6335V20.1368C61.6335 17.282 61.2809 15.7102 60.3835 14.5234C59.7104 13.6253 58.7169 13.1441 57.499 13.1441C56.2169 13.1441 55.1593 13.7215 54.39 14.8442C53.5567 16.0631 53.2042 17.699 53.2042 19.9443C53.1721 24.2426 54.8708 26.7766 57.8195 26.7766ZM57.531 15.2612C58.172 15.2612 58.5566 15.614 58.813 16.1914C59.0053 16.7046 59.1015 17.5707 59.1015 18.5971H55.8644C55.8964 16.3197 56.3772 15.2612 57.531 15.2612ZM74.2614 26.4559H76.7614V16.8329C77.3703 16.0952 78.0754 15.6782 78.5882 15.6782C78.9087 15.6782 79.2292 15.7423 79.4215 15.9989C79.6138 16.2876 79.71 16.7046 79.71 17.699V26.4559H82.21V16.5442C82.21 15.6782 82.1138 14.8121 81.601 14.1706C81.1523 13.5932 80.4472 13.2404 79.5497 13.2404C78.3959 13.2404 77.2101 13.914 76.569 14.6838C76.537 14.0102 76.3126 13.3687 76.2485 13.1441L73.9089 13.7536C74.0371 14.4593 74.2294 15.3253 74.2294 16.8971V26.4559H74.2614ZM45.2236 14.6838C45.1915 14.0102 44.9672 13.3687 44.9031 13.1441L42.5634 13.7536C42.6916 14.4593 42.8839 15.3253 42.8839 16.8971V26.4238H45.3838V16.8008C45.9928 16.0631 46.6979 15.6461 47.2107 15.6461C47.5312 15.6461 47.8517 15.7102 48.044 15.9669C48.2363 16.2555 48.3325 16.6725 48.3325 17.6669V26.4238H50.8324V16.5442C50.8324 15.6782 50.7363 14.8121 50.2235 14.1706C49.7748 13.5932 49.0696 13.2404 48.1722 13.2404C47.0505 13.2404 45.8646 13.914 45.2236 14.6838ZM14.6473 9.07042C16.1216 9.07042 17.3075 7.88359 17.3075 6.40807C17.3075 4.93256 16.1216 3.74573 14.6473 3.74573C13.173 3.74573 11.9871 4.93256 11.9871 6.40807C11.9871 7.88359 13.173 9.07042 14.6473 9.07042ZM26.9227 26.4559V16.5442C26.9227 15.6782 26.8265 14.8121 26.3137 14.1706C25.865 13.5932 25.1599 13.2404 24.2625 13.2404C23.1087 13.2404 21.9228 13.914 21.2818 14.6838C21.2497 14.0102 21.0254 13.3687 20.9613 13.1441L18.6536 13.7857C18.7818 14.4913 18.9741 15.3574 18.9741 16.9291V26.4559H21.4741V16.8329C22.0831 16.0952 22.7882 15.6782 23.301 15.6782C23.6215 15.6782 23.942 15.7423 24.1343 15.9989C24.3266 16.2876 24.4227 16.7046 24.4227 17.699V26.4559H26.9227ZM38.4289 8.36474C37.4994 8.36474 36.7622 9.10249 36.7622 10.0327C36.7622 10.9629 37.4994 11.7007 38.3968 11.7007C39.3263 11.7007 40.0634 10.9629 40.0634 10.0327C40.0634 9.10249 39.3263 8.36474 38.4289 8.36474ZM13.4614 26.4559H15.9614V10.8346L13.4614 11.1554V26.4559ZM33.8777 9.90441C34.3264 9.90441 34.7751 10.0648 35.0635 10.2893L35.7687 8.33266C35.0956 7.85151 34.3584 7.62698 33.429 7.62698C32.788 7.62698 32.1149 7.78736 31.5059 8.26851C30.897 8.78173 30.256 9.80818 30.256 11.7328C30.256 12.5667 30.288 13.4328 30.288 13.4328H29.4226V15.6461H30.288V26.4238H32.8521V15.6782H34.743L35.2238 13.4649H32.8841V11.4762C32.8841 10.5139 33.2687 9.90441 33.8777 9.90441ZM37.1468 26.4559H39.6788V13.2404L37.1468 13.5611V26.4559Z\" fill=\"#005DA9\" />\n                    <path d=\"M77.0816 33.5126C68.6203 36.0146 58.3321 37.1052 48.2682 37.1052C22.7239 37.1052 6.24986 29.5993 5.09604 19.6877C4.67938 15.9668 7.59599 12.3422 12.4677 9.26285C11.6023 8.62132 11.0575 7.59488 11.0254 6.44012C3.97427 10.161 0 15.0366 0 19.9764C0 30.9145 19.5188 40.1525 48.5246 39.7676C58.6205 39.6393 67.0498 38.1958 74.6778 35.6939C83.7482 32.7428 89.4532 28.5087 90.8313 26.6483C89.1968 28.1238 85.3186 31.0748 77.0816 33.5126ZM23.2687 4.38723C24.9674 3.80985 27.3712 3.0721 27.3712 3.0721C34.1339 1.21166 41.6017 0.121063 48.5566 0.185215C40.544 -0.295931 33.2365 0.185215 26.8584 1.33997C26.8584 1.33997 24.743 1.69281 22.4675 2.27018C22.4675 2.27018 21.3777 2.55887 20.7047 2.75133C20.0316 2.94379 19.1021 3.2004 19.1021 3.2004C18.4611 3.39286 17.8201 3.6174 17.1791 3.84193C17.8201 4.48346 18.2047 5.31745 18.2368 6.27974C19.3586 5.76652 21.5059 4.99668 23.2687 4.38723Z\" fill=\"#E30034\" />\n                  </g>\n                  <defs>\n                    <clipPath id=\"clip0_2396_2480\">\n                      <rect width=\"91\" height=\"40\" fill=\"white\" />\n                    </clipPath>\n                  </defs>\n                </svg>              </div>\n              <div class='sidebar__nav-bar-logo-text'>{this.applicationName}</div>\n            </div>\n          </div>\n        }\n          <div class=\"sidebar__nav-container\">\n            <slot />\n          </div>\n        </div>\n\n        {\n          this.internalShowFooter &&\n          <div class='sidebar__footer-container'>\n            <div class=\"sidebar__footer-wrapper\">\n            {\n              (this.internalTermsofUse || this.internalImprint || this.internalPrivacyPolicy) &&\n              <div class='sidebar__footer-wrapper-top-links'>\n                  {\n                    this.internalTermsofUse !== ''  && <a target={this.target} href={this.internalTermsofUse}>Terms of use</a>\n                  }\n                  {\n                    this.internalImprint !== '' && <a target={this.target} href={this.internalImprint}>Imprint</a>\n                  }\n                  {\n                    this.internalPrivacyPolicy !== '' && <a target={this.target} href={this.internalPrivacyPolicy}>Privacy policy</a>\n                  }\n              </div>\n            }\n              \n              {\n                this.copyrightText &&\n                <div class='sidebar__footer-wrapper-bottom-links'>\n                    <span>{this.copyrightText}</span>\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as o,a as i,g as n}from"./p-e6edf72d.js";function a(e,t,o,i=20,n=0){const d=[];if(n>=i){return d}const s=e=>{const d=e.assignedNodes().filter((e=>e.nodeType===1));if(d.length>0){const e=d[0].parentElement;return a(e,t,o,i,n+1)}return[]};const r=Array.from(e.children||[]);for(const e of r){if(t(e)){continue}if(o(e)){d.push(e)}if(e.shadowRoot!=null){d.push(...a(e.shadowRoot,t,o,i,n+1))}else if(e.tagName==="SLOT"){d.push(...s(e))}else{d.push(...a(e,t,o,i,n+1))}}return d}function d(e){return e.hasAttribute("hidden")||e.hasAttribute("aria-hidden")&&e.getAttribute("aria-hidden")!=="false"||e.style.display===`none`||e.style.opacity===`0`||e.style.visibility===`hidden`||e.style.visibility===`collapse`}function s(e){return e.hasAttribute("disabled")||e.hasAttribute("aria-disabled")&&e.getAttribute("aria-disabled")!=="false"}function r(e){if(e.getAttribute("tabindex")==="-1"||d(e)||s(e)){return false}return e.hasAttribute("tabindex")||(e instanceof HTMLAnchorElement||e instanceof HTMLAreaElement)&&e.hasAttribute("href")||e instanceof HTMLButtonElement||e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement||e instanceof HTMLIFrameElement}function c(e,t,o){const i=e.animate(t,Object.assign(Object.assign({},o),{fill:"both"}));i.addEventListener("finish",(()=>{i.commitStyles();i.cancel()}));return i}const l={easing:"cubic-bezier(0.390, 0.575, 0.565, 1.000)"};const f={fadeIn:[Object.assign(Object.assign({offset:0},l),{opacity:0}),Object.assign(Object.assign({offset:1},l),{opacity:1})],fadeOut:[Object.assign(Object.assign({offset:0},l),{opacity:1}),Object.assign(Object.assign({offset:1},l),{opacity:0})]};const h=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.modal-container{display:none;justify-content:center;align-items:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:1060;overflow-y:auto;font-family:var(--ifx-font-family)}.modal-container.open{display:flex}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#1D1D1D;opacity:0.5;z-index:0}.modal-content-container{position:absolute;display:flex;justify-content:center;width:90%;min-height:218px;background-color:#fff;border-radius:0;box-shadow:0 2px 10px rgba(0, 0, 0, 0.1);box-sizing:border-box;align-items:stretch}@media screen and (min-width: 768px){.modal-content-container{width:540px;min-height:132px}.modal-content-container.m,.modal-content-container.l,.modal-content-container.s{width:90%}}@media screen and (min-width: 1024px){.modal-content-container.s{width:47vw}.modal-content-container.m{width:63vw}.modal-content-container.l{width:80%}}.modal-content{display:flex;flex-direction:column;width:100%;max-height:90vh}.modal-icon-container{display:flex;align-items:center;justify-content:center;width:32px;background-color:#0A8276;align-self:stretch}.modal-icon-container.danger{background-color:#CD002F}.modal-icon-container ifx-icon{color:#FFFFFF}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px;min-height:76px;max-height:105px;box-sizing:border-box;border-radius:1px 1px 0px 0px;border-bottom:1px solid #EEEDED}.modal-caption{max-height:56px;display:-webkit-box;overflow:hidden;white-space:pre-wrap;word-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}.modal-header h2{margin:0;font-weight:600;font-size:1.25rem;line-height:28px}.modal-header button{background:none;border:none;font-size:1.5em;padding:0;cursor:pointer}.modal-close-button{align-self:flex-start;margin-right:-8px}.modal-body{padding:16px 24px;min-height:56px;box-sizing:border-box;flex:1}.modal-footer.buttons-present ::slotted(*){display:flex;justify-content:flex-end;gap:16px;padding:16px 24px 32px 16px}.modal-border{display:flex;align-items:center;justify-content:center;width:100%;font-size:1.5em;flex-grow:1}.modal-border.primary{background-color:#0A8276}.modal-border.secondary{background-color:#575352}.modal-border.danger{background-color:#CD002F}.modal-border.success{background-color:#4CA460}.modal-border.warning{background-color:#E16B25}.modal-border.orange{background-color:#E16B25}.modal-border.ocean{background-color:#0A8276}.modal-border.grey{background-color:#575352}.modal-border.grey-200{background-color:#EEEDED}.modal-border.red{background-color:#CD002F}.modal-border.green{background-color:#4CA460}.modal-border.berry{background-color:#9C216E}';const b=h;const m=class{constructor(o){e(this,o);this.ifxOpen=t(this,"ifxOpen",7);this.ifxClose=t(this,"ifxClose",7);this.opened=false;this.showModal=this.opened||false;this.caption="Modal Title";this.closeOnOverlayClick=true;this.variant="default";this.size="s";this.alertIcon="";this.okButtonLabel="OK";this.cancelButtonLabel="Cancel";this.slotButtonsPresent=false;this.showCloseButton=true;this.focusableElements=[];this.handleTopFocus=()=>{this.attemptFocus(this.getLastFocusableElement())};this.handleBottomFocus=()=>{this.attemptFocus(this.getFirstFocusableElement())};this.handleKeypress=e=>{if(!this.showModal){return}if(e.key==="Escape"){this.doBeforeClose("ESCAPE_KEY")}}}componentDidLoad(){this.focusableElements=a(this.hostElement.shadowRoot,(e=>d(e)||e.matches("[data-focus-trap-edge]")),r)}getFirstFocusableElement(){return this.focusableElements[0]}getLastFocusableElement(){return this.focusableElements[this.focusableElements.length-1]}attemptFocus(e){if(e==null){setTimeout((()=>{this.closeButton.focus()}));return}setTimeout((()=>{e.focus()}),0)}open(){this.showModal=true;try{const e=c(this.modalContainer,f.fadeIn,{duration:200});e.addEventListener("finish",(()=>{setTimeout((()=>{var e,t;(e=this.getLastFocusableElement())===null||e===void 0?void 0:e.focus();(t=this.getLastFocusableElement())===null||t===void 0?void 0:t.blur()}),0);this.ifxOpen.emit()}));this.hostElement.addEventListener("keydown",this.handleKeypress)}catch(e){this.ifxOpen.emit()}}close(){try{const e=c(this.modalContainer,f.fadeOut,{duration:200});e.addEventListener("finish",(()=>{this.showModal=false;this.ifxClose.emit()}));this.hostElement.removeEventListener("keydown",this.handleKeypress)}catch(e){this.showModal=false;this.ifxClose.emit()}}doBeforeClose(e){const t=[];t.push(e);const o=t.some((e=>e.defaultPrevented));if(!o){this.opened=false}}openedChanged(e){if(e===true){this.open()}else{this.close()}}handleOverlayClick(){if(this.closeOnOverlayClick){this.doBeforeClose("BACKDROP")}}handleButtonsSlotChange(e){var t;if(((t=e.currentTarget.assignedElements()[0])===null||t===void 0?void 0:t.childElementCount)>0){this.slotButtonsPresent=true}else{this.slotButtonsPresent=false}}render(){const e=this.variant!=="default";return o(i,{key:"ea8cc72507298fc769e75b6c04b0efd98d2e804d"},o("div",{key:"909dfb62f78fd771ca46c3c452aa73d8f4cc58c4",ref:e=>this.modalContainer=e,class:`modal-container ${this.showModal?"open":""}`},o("div",{key:"1f380c2d3619234fa6dd6bff95fd3b5b0f714427",class:"modal-overlay",onClick:()=>this.handleOverlayClick()}),o("div",{key:"a6f5a719151ffccdde3c95015ab331603646625e","data-focus-trap-edge":true,onFocus:this.handleTopFocus,tabindex:"0"}),o("div",{key:"570d67838b40e1f292a783ad0c4de54d25dc15f1",class:`modal-content-container ${this.size}`,role:"dialog","aria-modal":"true","aria-label":this.caption},e?o("div",{class:`modal-icon-container ${this.variant==="alert-brand"?"":"danger"}`},this.alertIcon?o("ifx-icon",{icon:this.alertIcon}):null):null,o("div",{key:"fd0a152494722c1453a401a448124f085c2383e1",class:"modal-content"},o("div",{key:"f4fa940f7d1f7efc7d2fb8adbe77df30ae841b0a",class:"modal-header"},o("h2",{key:"d8849e0d30cde669fcd39e655ceca9c7e82fb5ed",class:"modal-caption"},this.caption),this.showCloseButton&&o("ifx-icon-button",{key:"5496cd581f68d6cb48b7a51d3c971f7e6aab306c",class:"modal-close-button",ref:e=>this.closeButton=e,icon:"cross-24",variant:"tertiary",onClick:()=>this.doBeforeClose("CLOSE_BUTTON")})),o("div",{key:"830eddd92cb12f36918feb91634c7516207edd96",class:"modal-body"},o("slot",{key:"8e99c69225725aa169b526720baa05378394163f",name:"content"})),o("div",{key:"75ad5053564128df6c02d1feeb8078c229c069a9",class:`modal-footer ${this.slotButtonsPresent?"buttons-present":""}`},o("slot",{key:"b2d42250cc895c5f45cbadad6b5c58bb58848d16",name:"buttons",onSlotchange:e=>this.handleButtonsSlotChange(e)})))),o("div",{key:"7c79425ab61abc91c9d1d10c377452e93a2f8b25","data-focus-trap-edge":true,onFocus:this.handleBottomFocus,tabindex:"0"})))}get hostElement(){return n(this)}static get watchers(){return{opened:["openedChanged"]}}};m.style=b;export{m as ifx_modal};
-//# sourceMappingURL=p-500f71cc.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["queryShadowRoot","root","skipNode","isMatch","maxDepth","depth","matches","traverseSlot","$slot","assignedNodes","filter","node","nodeType","length","$slotParent","parentElement","children","Array","from","$child","push","shadowRoot","tagName","isHidden","$elem","hasAttribute","getAttribute","style","display","opacity","visibility","isDisabled","isFocusable","HTMLAnchorElement","HTMLAreaElement","HTMLButtonElement","HTMLInputElement","HTMLTextAreaElement","HTMLSelectElement","HTMLIFrameElement","animationTo","element","keyframes","options","animated","animate","Object","assign","fill","addEventListener","commitStyles","cancel","keyframeDefaults","easing","KEYFRAMES","fadeIn","offset","fadeOut","modalCss","IfxModalStyle0","IfxModal","constructor","hostRef","this","opened","showModal","caption","closeOnOverlayClick","variant","size","alertIcon","okButtonLabel","cancelButtonLabel","slotButtonsPresent","showCloseButton","focusableElements","handleTopFocus","attemptFocus","getLastFocusableElement","handleBottomFocus","getFirstFocusableElement","handleKeypress","event","key","doBeforeClose","componentDidLoad","hostElement","el","setTimeout","closeButton","focus","open","anim","modalContainer","duration","_a","_b","blur","ifxOpen","emit","err","close","ifxClose","removeEventListener","trigger","triggers","prevented","some","defaultPrevented","openedChanged","newValue","handleOverlayClick","handleButtonsSlotChange","e","currentTarget","assignedElements","childElementCount","render","isAlertVariant","h","Host","ref","class","onClick","onFocus","tabindex","role","icon","name","onSlotchange"],"sources":["src/global/utils/focus-trap.ts","src/global/utils/animation.ts","src/components/modal/modal.scss?tag=ifx-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["/**\n * Copy/pasted from https://github.com/andreasbm/focus-trap\n */\n\n/**\n * Traverses the slots of the open shadowroots and returns all children matching the query.\n * We need to traverse each child-depth one at a time because if an element should be skipped\n * (for example because it is hidden) we need to skip all of it's children. If we use querySelectorAll(\"*\")\n * the information of whether the children is within a hidden parent is lost.\n * @param {ShadowRoot | HTMLElement} root\n * @param skipNode\n * @param isMatch\n * @param {number} maxDepth\n * @param {number} depth\n * @returns {HTMLElement[]}\n */\nexport function queryShadowRoot(\n  root: ShadowRoot | HTMLElement,\n  skipNode: ($elem: HTMLElement) => boolean,\n  isMatch: ($elem: HTMLElement) => boolean,\n  maxDepth: number = 20,\n  depth: number = 0\n): HTMLElement[] {\n  const matches: HTMLElement[] = [];\n\n  // If the depth is above the max depth, abort the searching here.\n  if (depth >= maxDepth) {\n    return matches;\n  }\n\n  // Traverses a slot element\n  const traverseSlot = ($slot: HTMLSlotElement) => {\n    // Only check nodes that are of the type Node.ELEMENT_NODE\n    // Read more here https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType\n    const assignedNodes = $slot\n      .assignedNodes()\n      .filter((node) => node.nodeType === 1);\n    if (assignedNodes.length > 0) {\n      const $slotParent = assignedNodes[0].parentElement!;\n      return queryShadowRoot(\n        $slotParent,\n        skipNode,\n        isMatch,\n        maxDepth,\n        depth + 1\n      );\n    }\n\n    return [];\n  };\n\n  // Go through each child and continue the traversing if necessary\n  // Even though the typing says that children can't be undefined, Edge 15 sometimes gives an undefined value.\n  // Therefore we fallback to an empty array if it is undefined.\n  const children = Array.from(root.children || []) as HTMLElement[];\n  for (const $child of children) {\n    // Check if the element and its descendants should be skipped\n    if (skipNode($child)) {\n      // console.log('-- SKIP', $child);\n      continue;\n    }\n\n    // console.log('$child', $child);\n\n    // If the element matches we always add it\n    if (isMatch($child)) {\n      matches.push($child);\n    }\n\n    if ($child.shadowRoot != null) {\n      // If the element has a shadow root we need to traverse it\n      matches.push(\n        ...queryShadowRoot(\n          $child.shadowRoot,\n          skipNode,\n          isMatch,\n          maxDepth,\n          depth + 1\n        )\n      );\n    } else if ($child.tagName === 'SLOT') {\n      // If the child is a slot we need to traverse each assigned node\n      matches.push(...traverseSlot($child as HTMLSlotElement));\n    } else {\n      // Traverse the children of the element\n      matches.push(\n        ...queryShadowRoot($child, skipNode, isMatch, maxDepth, depth + 1)\n      );\n    }\n  }\n\n  return matches;\n}\n\n/**\n * Returns whether the element is hidden.\n * @param $elem\n */\nexport function isHidden($elem: HTMLElement): boolean {\n  return (\n    $elem.hasAttribute('hidden') ||\n    ($elem.hasAttribute('aria-hidden') &&\n      $elem.getAttribute('aria-hidden') !== 'false') ||\n    // A quick and dirty way to check whether the element is hidden.\n    // For a more fine-grained check we could use \"window.getComputedStyle\" but we don't because of bad performance.\n    // If the element has visibility set to \"hidden\" or \"collapse\", display set to \"none\" or opacity set to \"0\" through CSS\n    // we won't be able to catch it here. We accept it due to the huge performance benefits.\n    $elem.style.display === `none` ||\n    $elem.style.opacity === `0` ||\n    $elem.style.visibility === `hidden` ||\n    $elem.style.visibility === `collapse`\n  );\n\n  // If offsetParent is null we can assume that the element is hidden\n  // https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null\n  // || $elem.offsetParent == null;\n}\n\n/**\n * Returns whether the element is disabled.\n * @param $elem\n */\nexport function isDisabled($elem: HTMLElement): boolean {\n  return (\n    $elem.hasAttribute('disabled') ||\n    ($elem.hasAttribute('aria-disabled') &&\n      $elem.getAttribute('aria-disabled') !== 'false')\n  );\n}\n\n/**\n * Determines whether an element is focusable.\n * Read more here: https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus/1600194#1600194\n * Or here: https://stackoverflow.com/questions/18261595/how-to-check-if-a-dom-element-is-focusable\n * @param $elem\n */\nexport function isFocusable($elem: HTMLElement): boolean {\n  // Discard elements that are removed from the tab order.\n  if (\n    $elem.getAttribute('tabindex') === '-1' ||\n    isHidden($elem) ||\n    isDisabled($elem)\n  ) {\n    return false;\n  }\n\n  return (\n    // At this point we know that the element can have focus (eg. won't be -1) if the tabindex attribute exists\n    $elem.hasAttribute('tabindex') ||\n    // Anchor tags or area tags with a href set\n    (($elem instanceof HTMLAnchorElement || $elem instanceof HTMLAreaElement) &&\n      $elem.hasAttribute('href')) ||\n    // Form elements which are not disabled\n    $elem instanceof HTMLButtonElement ||\n    $elem instanceof HTMLInputElement ||\n    $elem instanceof HTMLTextAreaElement ||\n    $elem instanceof HTMLSelectElement ||\n    // IFrames\n    $elem instanceof HTMLIFrameElement\n  );\n}","export function animationTo(\n  element: HTMLElement,\n  keyframes: Keyframe | Keyframe[],\n  options?: KeyframeAnimationOptions\n) {\n  const animated = element.animate(keyframes, { ...options, fill: 'both' });\n  animated.addEventListener('finish', () => {\n    // @ts-ignore\n    animated.commitStyles();\n    animated.cancel();\n  });\n\n  return animated;\n}\n\nconst keyframeDefaults = {\n  easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\n};\n\nexport const KEYFRAMES = {\n  fadeIn: [\n    {\n      offset: 0,\n      ...keyframeDefaults,\n      opacity: 0,\n    },\n    {\n      offset: 1,\n      ...keyframeDefaults,\n      opacity: 1,\n    },\n  ],\n  fadeOut: [\n    {\n      offset: 0,\n      ...keyframeDefaults,\n      opacity: 1,\n    },\n    {\n      offset: 1,\n      ...keyframeDefaults,\n      opacity: 0,\n    },\n  ],\n};","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.modal-container {\n  display: none;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1060;\n  overflow-y: auto;\n  font-family: var(--ifx-font-family);\n\n}\n\n.modal-container.open {\n  display: flex;\n}\n\n.modal-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: tokens.$ifxColorBaseBlack;\n  opacity: 0.5;\n  z-index: 0;\n}\n\n.modal-content-container {\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  width: 90%;\n  min-height: 218px;\n  background-color: #fff;\n  border-radius: tokens.$ifxBorderRadiusNone;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n  // overflow: hidden;\n  box-sizing: border-box;\n  align-items: stretch;\n}\n\n/* Add desktop size here */\n@media screen and (min-width: 768px) {\n  .modal-content-container {\n    width: 540px;\n    min-height: 132px;\n\n    &.m,\n    &.l,\n    &.s {\n      width: 90%;\n    }\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .modal-content-container {\n\n    &.s {\n      width: 47vw;\n    }\n\n    &.m {\n      width: 63vw;\n    }\n\n    &.l {\n      width: 80%;\n    }\n  }\n}\n\n.modal-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-height: 90vh;\n}\n\n.modal-icon-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  background-color: tokens.$ifxColorOcean500;\n  align-self: stretch;\n\n  &.danger {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  & ifx-icon {\n    color: tokens.$ifxColorBaseWhite;\n  }\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 24px;\n  min-height: 76px;\n  max-height: 105px;\n  box-sizing: border-box;\n  border-radius: 1px 1px 0px 0px;\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\n}\n\n.modal-caption {\n  max-height: 56px;\n  display: -webkit-box;\n  overflow: hidden;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical; \n}\n\n.modal-header h2 {\n  margin: 0;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeXl;\n  line-height: 28px;\n}\n\n.modal-header button {\n  background: none;\n  border: none;\n  font-size: 1.5em;\n  padding: 0;\n  cursor: pointer;\n}\n\n.modal-close-button {\n  align-self: flex-start;\n  margin-right: -8px;\n}\n\n.modal-body {\n  padding: 16px 24px;\n  min-height: 56px;\n  box-sizing: border-box;\n  flex: 1;\n  // overflow-y: auto;\n}\n\n.modal-footer.buttons-present ::slotted(*){\n  display: flex;\n  justify-content: flex-end;\n  gap: 16px;\n  padding: 16px 24px 32px 16px\n}\n\n.modal-border {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  font-size: 1.5em;\n  flex-grow: 1;\n\n  &.primary {\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  &.secondary {\n    background-color: tokens.$ifxColorEngineering500;\n  }\n\n  &.danger {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  &.success {\n    background-color: tokens.$ifxColorGreen500;\n  }\n\n  &.warning {\n    background-color: tokens.$ifxColorOrange500;\n  }\n\n  &.orange {\n    background-color: tokens.$ifxColorOrange500;\n  }\n\n  &.ocean {\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  &.grey {\n    background-color: tokens.$ifxColorEngineering500;\n  }\n\n  &.grey-200 {\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &.red {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  &.green {\n    background-color: tokens.$ifxColorGreen500;\n  }\n\n  &.berry {\n    background-color: tokens.$ifxColorBerry500;\n  }\n}","import { Component, Prop, Element, State, Event, Host, EventEmitter, h, Watch } from '@stencil/core';\nimport { queryShadowRoot, isHidden, isFocusable } from '../../global/utils/focus-trap';\nimport { animationTo, KEYFRAMES } from '../../global/utils/animation';\n \n\ntype CloseEventTrigger = 'CLOSE_BUTTON' | 'ESCAPE_KEY' | 'BACKDROP';\n\nexport interface BeforeCloseEventDetail {\n  trigger: CloseEventTrigger;\n}\n@Component({\n  tag: 'ifx-modal',\n  styleUrl: 'modal.scss',\n  shadow: true\n})\nexport class IfxModal {\n  @Prop({ reflect: true, mutable: true }) opened?: boolean = false;\n  @State() showModal: boolean = this.opened || false;\n\n  @Prop() caption: string = 'Modal Title';\n  @Prop() closeOnOverlayClick: boolean = true;\n\n  @Event() ifxOpen: EventEmitter;\n  @Event() ifxClose: EventEmitter;\n\n  @Prop() variant: 'default' | 'alert-brand' | 'alert-danger' = 'default';\n  \n  @Prop() size: 's' | 'm' | 'l' = 's';\n\n  @Prop() alertIcon: string = '';\n  @Prop() okButtonLabel: string = 'OK';\n  @Prop() cancelButtonLabel: string = 'Cancel';\n  @Element() hostElement: HTMLElement;\n\n  @State() slotButtonsPresent: boolean = false;\n\n  @Prop() showCloseButton: boolean = true;\n\n  private modalContainer: HTMLElement;\n  private focusableElements: HTMLElement[] = [];\n  private closeButton: HTMLButtonElement | HTMLIfxIconButtonElement;\n\n  componentDidLoad() {\n    // Query all focusable elements and store them in `focusableElements`.\n    // Needed for the \"focus trap\" functionality.\n    this.focusableElements = queryShadowRoot(\n      this.hostElement.shadowRoot,\n      (el) => isHidden(el) || el.matches('[data-focus-trap-edge]'),\n      isFocusable\n    );\n\n  }\n\n  getFirstFocusableElement(): HTMLElement | null {\n    return this.focusableElements[0];\n  }\n\n  getLastFocusableElement(): HTMLElement | null {\n    return this.focusableElements[this.focusableElements.length - 1];\n  }\n\n  handleTopFocus = () => {\n    this.attemptFocus(this.getLastFocusableElement());\n  };\n\n  handleBottomFocus = () => {\n    this.attemptFocus(this.getFirstFocusableElement());\n  };\n\n\n  attemptFocus(element: HTMLElement | null) {\n    if (element == null) {\n      setTimeout(() => { //wait until DOM is fully loaded\n        this.closeButton.focus();\n      },);\n      return;\n    }\n\n    setTimeout(() => { //wait until DOM is fully loaded\n      element.focus();\n    }, 0);\n  }\n\n\n  open() {\n    this.showModal = true;\n    try {\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {\n        duration: 200,\n      });\n      anim.addEventListener('finish', () => {\n        // Setting focus on last item and removing immediately\n        // so, on tab press first element is focused\n        setTimeout(() => {\n          this.getLastFocusableElement()?.focus();\n          this.getLastFocusableElement()?.blur();\n        }, 0);\n\n        this.ifxOpen.emit();\n      });\n\n      this.hostElement.addEventListener('keydown', this.handleKeypress);\n    } catch (err) {\n      this.ifxOpen.emit();\n\n    }\n\n\n  }\n\n  close() {\n    try {\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {\n        duration: 200,\n      });\n      anim.addEventListener('finish', () => {\n        this.showModal = false;\n        this.ifxClose.emit();\n      });\n      this.hostElement.removeEventListener('keydown', this.handleKeypress);\n    } catch (err) {\n      this.showModal = false;\n      this.ifxClose.emit();\n    }\n  }\n\n  handleKeypress = (event: KeyboardEvent) => {\n    if (!this.showModal) {\n      return;\n    }\n    if (event.key === 'Escape') {\n      this.doBeforeClose('ESCAPE_KEY');\n    }\n  };\n\n\n  doBeforeClose(trigger: CloseEventTrigger) {\n    const triggers = [];\n    triggers.push(trigger);\n    const prevented = triggers.some((event) => event.defaultPrevented);\n    if (!prevented) {\n      this.opened = false;\n    }\n  }\n\n\n\n  @Watch('opened')\n  openedChanged(newValue) {\n    if (newValue === true) {\n      this.open();\n    } else {\n      this.close()\n    }\n  }\n\n\n  handleOverlayClick() {\n    if (this.closeOnOverlayClick) {\n      this.doBeforeClose('BACKDROP')\n    }\n  }\n\n\n  handleButtonsSlotChange(e) {\n    if(e.currentTarget.assignedElements()[0]?.childElementCount > 0) {\n      this.slotButtonsPresent = true;\n    }else{\n      this.slotButtonsPresent = false;\n    }\n  }\n\n\n  render() {\n    const isAlertVariant = this.variant !== 'default';\n    return (\n      <Host>\n        <div\n          ref={(el) => (this.modalContainer = el)}\n          class={`modal-container ${this.showModal ? 'open' : ''}`}\n        >\n          <div\n            class=\"modal-overlay\"\n            onClick={() => this.handleOverlayClick()}\n          ></div>\n          <div\n            data-focus-trap-edge\n            onFocus={this.handleTopFocus}\n            tabindex=\"0\"\n          ></div>\n          <div\n            class={`modal-content-container ${this.size}`}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={this.caption}>\n            {isAlertVariant ? (\n              <div class={`modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}`}>\n                {this.alertIcon ? <ifx-icon icon={this.alertIcon} /> : null}\n              </div>\n            ) : null}\n            <div class=\"modal-content\">\n              <div class=\"modal-header\">\n                <h2 class=\"modal-caption\">{this.caption}</h2>\n                { \n                  this.showCloseButton && \n                  <ifx-icon-button class = 'modal-close-button' ref={(el) => (this.closeButton = el)} icon=\"cross-24\" variant=\"tertiary\" onClick={() => this.doBeforeClose('CLOSE_BUTTON') }>\n                  </ifx-icon-button>\n                }\n              </div>\n              <div class=\"modal-body\">\n                <slot name=\"content\" /*onSlotchange={() => console.log('slots children modified')}*/ />\n              </div>\n              <div class={`modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}`}>\n                <slot name=\"buttons\" onSlotchange={(e)=>this.handleButtonsSlotChange(e)}>\n                </slot>\n              </div>\n            </div>\n          </div>\n          <div\n            data-focus-trap-edge\n            onFocus={this.handleBottomFocus}\n            tabindex=\"0\"\n          ></div>\n        </div>\n      </Host>\n\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as i,g as a}from"./p-e6edf72d.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:"53a34910aec55e31b40d2d2868481fea46dec401",class:`${this.filterOrientation==="sidebar"?"sidebar-filter-search-wrapper":"topbar-filter-search-wrapper"}`},i("div",{key:"eb4451b33cf8815237b0543d22f0cabcc2129070",class:"filter-name"},this.filterName),i("ifx-search-field",{key:"6240cf45bc67f23d9899ee67914974104801f632",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-5536a9c8.entry.js.map

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

@@ -1 +0,0 @@
-{"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-57351ddd.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as o}from"./p-e6edf72d.js";const r=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{pointer-events:none}.card-overline{font-size:1rem;font-weight:400;color:#575352;padding-bottom:4px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-all}';const t=r;const i=class{constructor(o){e(this,o)}render(){return o("div",{key:"edb86d9c621859391a960610c81ab5fa3a3558fd",class:"card-overline"},o("slot",{key:"2b4846831c111a2b598b6632559b5346c152568f"}))}};i.style=t;export{i as ifx_card_overline};
-//# sourceMappingURL=p-57351ddd.entry.js.map

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

@@ -1,2 +0,0 @@
-import{r as o,h as r}from"./p-e6edf72d.js";const e=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-block}.container{display:flex;min-height:1.25em;align-items:center;padding:0 8px;border-radius:9999px;font-family:var(--ifx-font-family)}.container.no-border{padding:0}.container.border-engineering-100{border:1px solid #F7F7F7}.container.border-engineering-200{border:1px solid #EEEDED}.container.border-engineering-300{border:1px solid #BFBBBB}.container.border-engineering-400{border:1px solid #8D8786}.container.border-engineering-500{border:1px solid #575352}.container.border-engineering-600{border:1px solid #3C3A39}.container.border-ocean-100{border:1px solid #DFF4F3}.container.border-ocean-200{border:1px solid #B8DEDA}.container.border-ocean-300{border:1px solid #6CB4AD}.container.border-ocean-400{border:1px solid #3B9B91}.container.border-ocean-500{border:1px solid #0A8276}.container.border-ocean-600{border:1px solid #08665C}.container.border-ocean-700{border:1px solid #06534B}.container.border-red-500{border:1px solid #CD002F}.container.border-red-600{border:1px solid #A2001E}.container.border-red-700{border:1px solid #900021}.container.border-orange-500{border:1px solid #E16B25}.container.border-green-500{border:1px solid #4CA460}.container.border-lawn-400{border:1px solid #B9D257}.container.border-lawn-500{border:1px solid #9BBA43}.container.border-lawn-700{border:1px solid #3C6C0F}.container.border-berry-400{border:1px solid #BE3283}.container.border-berry-500{border:1px solid #9C216E}.container.border-sun-400{border:1px solid #FF9737}.container.border-sun-500{border:1px solid #F97414}.container.border-sand-400{border:1px solid #FBE273}.container.border-sand-500{border:1px solid #FCD442}.text{margin:0;padding-left:4px;font-style:normal;font-weight:600;font-size:1rem;line-height:1.25rem;display:inline;color:#1D1D1D}.dot{display:inline-block;width:8px;height:8px;border-radius:9999px}.dot.engineering-100{background-color:#F7F7F7}.dot.engineering-200{background-color:#EEEDED}.dot.engineering-300{background-color:#BFBBBB}.dot.engineering-400{background-color:#8D8786}.dot.engineering-500{background-color:#575352}.dot.engineering-600{background-color:#3C3A39}.dot.ocean-100{background-color:#DFF4F3}.dot.ocean-200{background-color:#B8DEDA}.dot.ocean-300{background-color:#6CB4AD}.dot.ocean-400{background-color:#3B9B91}.dot.ocean-500{background-color:#0A8276}.dot.ocean-600{background-color:#08665C}.dot.ocean-700{background-color:#06534B}.dot.red-500{background-color:#CD002F}.dot.red-600{background-color:#A2001E}.dot.red-700{background-color:#900021}.dot.orange-500{background-color:#E16B25}.dot.green-500{background-color:#4CA460}.dot.lawn-400{background-color:#B9D257}.dot.lawn-500{background-color:#9BBA43}.dot.lawn-700{background-color:#3C6C0F}.dot.berry-400{background-color:#BE3283}.dot.berry-500{background-color:#9C216E}.dot.sun-400{background-color:#FF9737}.dot.sun-500{background-color:#F97414}.dot.sand-400{background-color:#FBE273}.dot.sand-500{background-color:#FCD442}';const n=e;const d=class{constructor(r){o(this,r);this.border=false;this.color="orange-500"}render(){var o;const e=((o=this.color)===null||o===void 0?void 0:o.trim())?this.color:"orange-500";const n=this.border?`container border-${e}`:"container no-border";return r("div",{key:"f613dcda2a1cdf86cb9169937a3674b1f8d985f7","aria-label":"a status indicator","aria-value":this.label,class:n},r("span",{key:"17792fd234e467d0396d00f6e244a5842d08e1ce",class:`dot ${e}`}),r("p",{key:"51261dabeec924c46a9a710c74de9bb7140bf927",class:"text"},this.label))}};d.style=n;export{d as ifx_status};
-//# sourceMappingURL=p-59fb1317.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["statusCss","IfxStatusStyle0","Status","constructor","hostRef","this","border","color","render","effectiveColor","_a","trim","containerClass","h","key","label","class"],"sources":["src/components/status/status.scss?tag=ifx-status&encapsulation=shadow","src/components/status/status.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-block;\n}\n\n.container {\n  display: flex;\n  min-height: 1.25em;\n  align-items: center;\n  padding: 0 tokens.$ifxSpace100;\n  border-radius: tokens.$ifxBorderRadiusRound;\n  font-family: var(--ifx-font-family);\n\n  &.no-border {\n    padding: 0; // Remove padding when border is not present\n  }\n\n  &.border-engineering-100{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering100;\n  }\n\n  &.border-engineering-200{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n  }\n\n  &.border-engineering-300{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering300;\n  }\n\n  &.border-engineering-400{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering400;\n  }\n\n  &.border-engineering-500{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering500;\n  }\n\n  &.border-engineering-600{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering600;\n  }\n\n  &.border-ocean-100 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean100;\n  }\n\n  &.border-ocean-200 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean200;\n  }\n\n  &.border-ocean-300 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean300;\n  }\n\n  &.border-ocean-400 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean400;\n  }\n\n  &.border-ocean-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean500;\n  }\n\n  &.border-ocean-600 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean600;\n  }\n\n  &.border-ocean-700 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean700;\n  }\n\n  &.border-red-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed500;\n  }\n\n  &.border-red-600 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed600;\n  }\n\n  &.border-red-700 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed700;\n  }\n\n  &.border-orange-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOrange500;\n  }\n\n  &.border-green-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorGreen500;\n  }\n\n  &.border-lawn-400 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn400;\n  }\n\n  &.border-lawn-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn500;\n  }\n\n  &.border-lawn-700 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn700;\n  }\n\n  &.border-berry-400 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorBerry400;\n  }\n\n  &.border-berry-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorBerry500;\n  }\n\n  &.border-sun-400 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSun400;\n  }\n\n  &.border-sun-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSun500;\n  }\n\n  &.border-sand-400{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSand400;\n  }\n\n  &.border-sand-500{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSand500;\n  }\n\n\n}\n\n.text {\n  margin: 0;\n  padding-left: tokens.$ifxSpace50;\n  font-style: normal;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeM;\n  line-height: tokens.$ifxLineHeightS;\n  display: inline;\n  color: tokens.$ifxColorBaseBlack;\n}\n\n.dot {\n  display: inline-block;\n  width: tokens.$ifxSize100;\n  height: tokens.$ifxSize100;\n  border-radius: tokens.$ifxBorderRadiusRound;\n}\n\n\n.dot {\n  &.engineering-100 {\n    background-color: tokens.$ifxColorEngineering100;\n  }\n\n  &.engineering-200 {\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &.engineering-300 {\n    background-color: tokens.$ifxColorEngineering300;\n  }\n\n  &.engineering-400 {\n    background-color: tokens.$ifxColorEngineering400;\n  }\n\n  &.engineering-500 {\n    background-color: tokens.$ifxColorEngineering500;\n  }\n\n  &.engineering-600 {\n    background-color: tokens.$ifxColorEngineering600;\n  }\n\n  &.ocean-100 {\n    background-color: tokens.$ifxColorOcean100;\n  }\n\n  &.ocean-200 {\n    background-color: tokens.$ifxColorOcean200;\n  }\n\n  &.ocean-300 {\n    background-color: tokens.$ifxColorOcean300;\n  }\n\n  &.ocean-400 {\n    background-color: tokens.$ifxColorOcean400;\n  }\n\n  &.ocean-500 {\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  &.ocean-600 {\n    background-color: tokens.$ifxColorOcean600;\n  }\n\n  &.ocean-700 {\n    background-color: tokens.$ifxColorOcean700;\n  }\n\n  &.red-500 {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  &.red-600 {\n    background-color: tokens.$ifxColorRed600;\n  }\n\n  &.red-700 {\n    background-color: tokens.$ifxColorRed700;\n  }\n\n  &.orange-500 {\n    background-color: tokens.$ifxColorOrange500;\n  }\n\n  &.green-500 {\n    background-color: tokens.$ifxColorGreen500;\n  }\n\n  &.lawn-400{\n    background-color: tokens.$ifxColorLawn400;\n  }\n\n  &.lawn-500{\n    background-color: tokens.$ifxColorLawn500;\n  }\n\n  &.lawn-700 {\n    background-color: tokens.$ifxColorLawn700;\n  }\n\n  &.berry-400 {\n    background-color: tokens.$ifxColorBerry400;\n  }\n\n  &.berry-500 {\n    background-color: tokens.$ifxColorBerry500;\n  }\n\n  &.sun-400 {\n    background-color: tokens.$ifxColorSun400;\n  }\n\n  &.sun-500 {\n    background-color: tokens.$ifxColorSun500;\n  }\n\n  &.sand-400{\n    background-color: tokens.$ifxColorSand400;\n  }\n\n  &.sand-500{\n    background-color: tokens.$ifxColorSand500;\n  }\n}","import { Component, h, Prop } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-status',\n  styleUrl: 'status.scss',\n  shadow: true\n})\n\nexport class Status {\n  @Prop() label: string;\n  @Prop() border: boolean = false;\n  @Prop() color: string = 'orange-500';\n\n\n  render() {\n    const effectiveColor = this.color?.trim() ? this.color : 'orange-500';\n    const containerClass = this.border ? `container border-${effectiveColor}` : 'container no-border';\n\n    return (\n      <div aria-label=\"a status indicator\" aria-value={this.label} class={containerClass}>\n        <span class={`dot ${effectiveColor}`}></span>\n        <p class=\"text\">{this.label}</p>\n      </div>\n    );\n  }\n}"],"mappings":"2CAAA,MAAMA,EAAY,w9FAClB,MAAAC,EAAeD,E,MCQFE,EAAM,MANnB,WAAAC,CAAAC,G,UAQUC,KAAAC,OAAkB,MAClBD,KAAAE,MAAgB,Y,CAGxB,MAAAC,G,MACE,MAAMC,IAAiBC,EAAAL,KAAKE,SAAK,MAAAG,SAAA,SAAAA,EAAEC,QAASN,KAAKE,MAAQ,aACzD,MAAMK,EAAiBP,KAAKC,OAAS,oBAAoBG,IAAmB,sBAE5E,OACEI,EAAA,OAAAC,IAAA,wDAAgB,qBAAoB,aAAaT,KAAKU,MAAOC,MAAOJ,GAClEC,EAAA,QAAAC,IAAA,2CAAME,MAAO,OAAOP,MACpBI,EAAA,KAAAC,IAAA,2CAAGE,MAAM,QAAQX,KAAKU,O","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as i,h as t,g as s}from"./p-e6edf72d.js";const a=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, 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 n=a;const r=class{constructor(t){e(this,t);this.ifxChange=i(this,"ifxChange",7);this.min=0;this.max=100;this.step=1;this.disabled=false;this.showPercentage=false;this.type="single";this.internalValue=0;this.percentage=0;this.internalMinValue=0;this.internalMaxValue=100}valueChanged(e){this.internalValue=e;this.updateValuePercent()}minValueChanged(e){this.internalMinValue=e;this.updateValuePercent()}maxValueChanged(e){this.internalMaxValue=e;this.updateValuePercent()}getRangeSliderWrapper(){const e=this.el.shadowRoot.querySelector(".range-slider__wrapper");return e}handleInputChangeOfRangeSlider(e){const i=e.target;if(parseFloat(this.maxInputRef.value)-parseFloat(this.minInputRef.value)<=0){if(i.id==="max-slider"){this.maxInputRef.value=this.minInputRef.value}else{this.minInputRef.value=this.maxInputRef.value}}if(i.id==="max-slider"){this.internalMaxValue=parseFloat(this.maxInputRef.value)}else{this.internalMinValue=parseFloat(this.minInputRef.value)}this.ifxChange.emit({minVal:this.internalMinValue,maxVal:this.internalMaxValue});this.updateValuePercent();this.updateZIndexIfRangeSlider(i.id)}handleOnMouseLeaveOfRangeSlider(e){const i=e.target;const t=this.getRangeSliderWrapper();if(i.id==="max-slider"){t.insertBefore(this.maxInputRef,this.minInputRef)}else{t.insertBefore(this.minInputRef,this.maxInputRef)}}calculatePercentageValue(){const e=(this.internalValue-this.min)*1;const i=this.max-this.min;this.percentage=+parseFloat(String(e/i*100)).toFixed(2)}handleInputChange(e){const i=e.target;this.internalValue=parseFloat(i.value);this.ifxChange.emit(this.internalValue);this.calculatePercentageValue();this.updateValuePercent()}roundToValidStep(e){const i=e-this.min;const t=i%this.step;if(t>=this.step/2){return this.min+i+(this.step-t)}else{return this.min+i-t}}updateValuePercent(){const e=this.max-this.min;if(this.type==="double"){if(this.minInputRef){const i=(this.roundToValidStep(this.internalMinValue)-this.min)*1;const t=i/e*100;this.minInputRef.parentElement.style.setProperty("--min-value-percent",`${t}%`)}if(this.maxInputRef){const i=(this.roundToValidStep(this.internalMaxValue)-this.min)*1;const t=i/e*100;this.maxInputRef.parentElement.style.setProperty("--max-value-percent",`${t}%`)}}else{if(this.inputRef){const e=(this.roundToValidStep(this.internalValue)-this.min)*1;const i=this.max-this.min;const t=e/i*100;this.inputRef.style.setProperty("--value-percent",`${t}%`)}}}updateZIndexIfRangeSlider(e=""){if(e==="max-slider"){this.minInputRef.style.zIndex="1";this.maxInputRef.style.zIndex="2"}else{this.minInputRef.style.zIndex="2";this.maxInputRef.style.zIndex="1"}}componentWillLoad(){if(this.value===undefined){this.internalValue=(this.max-this.min)/2}else{this.internalValue=Math.max(this.min,Math.min(this.max,this.value))}this.calculatePercentageValue();if(this.minValueHandle!==undefined)this.internalMinValue=this.minValueHandle;else this.internalMinValue=this.min;if(this.maxValueHandle!==undefined)this.internalMaxValue=this.maxValueHandle;else this.internalMaxValue=this.max}componentDidLoad(){this.updateValuePercent()}render(){return t("div",{key:"6d8a7acac67dff6fa16e5857d5d87ac1a230e708",class:"ifx-slider"},this.leftText&&t("span",{key:"8fa50d852e012089fd2b918b093e87bf3c2f2c3a",class:`left-text`},this.leftText),this.leftIcon&&t("ifx-icon",{key:"d84ba5ac7f08dd8dddca0c24143ba97bcfda374e",icon:this.leftIcon,class:`left-icon${this.disabled?" disabled":""}`}),this.type!=="double"?t("input",{type:"range",min:this.min,max:this.max,step:this.step,value:this.internalValue,disabled:this.disabled,ref:e=>this.inputRef=e,onInput:e=>this.handleInputChange(e),"aria-label":"a slider","aria-value":this.value,"aria-disabled":this.disabled}):t("div",{class:"range-slider__wrapper","aria-label":"a range slider","aria-value":this.value,"aria-disabled":this.disabled},t("input",{id:"min-slider",type:"range",min:this.min,max:this.max,step:this.step,value:this.internalMinValue,disabled:this.disabled,ref:e=>this.minInputRef=e,onInput:e=>this.handleInputChangeOfRangeSlider(e),onMouseUp:e=>this.handleOnMouseLeaveOfRangeSlider(e)}),t("input",{id:"max-slider",type:"range",min:this.min,max:this.max,step:this.step,value:this.internalMaxValue,disabled:this.disabled,ref:e=>this.maxInputRef=e,onInput:e=>this.handleInputChangeOfRangeSlider(e),onMouseUp:e=>this.handleOnMouseLeaveOfRangeSlider(e)})),this.rightIcon&&t("ifx-icon",{key:"02911017ea076f62e13a55b98e8a723f40c9c75b",icon:this.rightIcon,class:`right-icon${this.disabled?" disabled":""}`}),this.rightText&&t("span",{key:"e984e2322ff0fe2f8d2a2404a8e342c393a822e7",class:`right-text${this.disabled?" disabled":""}`},this.rightText),this.showPercentage&&this.type!=="double"&&t("span",{key:"eb473d4ddcf6d10a3e01c474ffc76b916b0163e3",class:`percentage-display${this.disabled?" disabled":""}`},this.percentage,"%"))}get el(){return s(this)}static get watchers(){return{value:["valueChanged"],minValueHandle:["minValueChanged"],maxValueHandle:["maxValueChanged"]}}};r.style=n;export{r as ifx_slider};
-//# sourceMappingURL=p-67c63b48.entry.js.map