@infineon/infineon-design-system-stencil 33.1.1--canary.1824.75b5030250f4474f2c947b6e8dc7055bdc915c43.0 → 33.1.1--canary.1818.40b59d3e7e35c19c1cd5c4976a5aecca37653bcd.0

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

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

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as s,g as i}from"./p-e6edf72d.js";const o=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.group{display:flex;flex-direction:column;justify-content:space-between;gap:12px}.group__label{font:400 0.75rem/1rem "Source Sans 3"}.group__label:empty{display:none}.group__controls{display:flex;flex-wrap:wrap}.group__controls ::slotted(*){margin-left:-1px;margin-top:-1px}.group__caption{display:flex;align-items:center;gap:8px;font:400 0.75rem/1rem "Source Sans 3"}';const a=o;const n=class{constructor(s){e(this,s);this.ifxChange=t(this,"ifxChange",7);this.caption="";this.label="";this.size="regular";this.selectedValue=""}onSegmentSelect(e){const{previousValue:t,selectedValue:s}=this.unselectPreviousSegment(e.detail);this.selectedValue=s;this.ifxChange.emit({previousValue:t,selectedValue:s})}unselectPreviousSegment(e){let t;let s;const i=this.getSegments();i.forEach((i=>{if(i.selected){if(i.segmentIndex!==e){i.selected=false;t=i.value}else{s=i.value}}}));return{previousValue:t,selectedValue:s}}getSegments(){return this.SegmentedControl.querySelectorAll("ifx-segment")}setActiveSegment(){const e=this.getSegments();let t=false;e.forEach(((e,s)=>{e.segmentIndex=s;if(t){if(e.selected)e.selected=false}else{if(e.selected){t=true;this.selectedValue=e.value}}}));if(!t&&e.length){e[0].selected=true;this.selectedValue=e[0].value}}setSegmentSize(){const e=this.getSegments();e.forEach((e=>{e.shadowRoot.querySelector(".segment").classList.add(`segment--${this.size}`)}))}componentDidLoad(){this.setActiveSegment()}render(){return s("div",{key:"485d5854ee472ee281b5f5d2265e9ca9758e67b5","aria-value":this.selectedValue,"aria-label":"segmented control",class:"group"},s("div",{key:"688f90f36efb36beebd5c3b2d584c5ebbef37ba9",class:"group__label"},this.label.trim()),s("div",{key:"7eb4812bcf09729220a5e4816b3a90038b738c74",class:"group__controls"},s("slot",{key:"500001ba964000357ea760e7238f96efc5c00b30"})),this.caption.trim()&&s("div",{key:"0064cafed88e72a7bc9bf0d28d168dbfc9a95e67",class:"group__caption"},s("ifx-icon",{key:"190548d6635d7d341d3a755aeef79abdfde3ac14",icon:"cinfo16"})," ",this.caption.trim()))}componentDidRender(){this.setSegmentSize()}get SegmentedControl(){return i(this)}};n.style=a;export{n as ifx_segmented_control};
-//# sourceMappingURL=p-af1d9944.entry.js.map

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

@@ -1,2 +0,0 @@
-import{r as e,c as r,h as i,g as o}from"./p-e6edf72d.js";const t=':host{display:inline-flex;vertical-align:top}.checkbox__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:top;padding:0px;gap:8px;font-family:var(--ifx-font-family)}.checkbox__container .checkbox__wrapper{box-sizing:border-box;display:flex;position:relative;justify-content:center;align-items:center;width:20px;height:20px;background-color:#FFFFFF;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0;align-self:flex-start}.checkbox__container .checkbox__wrapper.checkbox-m{height:24px;width:24px}.checkbox__container .checkbox__wrapper.error{border-color:#CD002F}.checkbox__container .checkbox__wrapper:focus-visible{border:1px solid #575352;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper:hover{background-color:#EEEDED;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate){background-color:#0A8276;border-radius:1px;border-color:transparent;flex:none;order:0;flex-grow:0;color:#FFFFFF}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate).error{background-color:#CD002F}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate):focus-visible{border:1px solid transparent;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate):hover{background-color:#08665C;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate).disabled{background:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.indeterminate:before{content:"";display:block;width:70%;height:2px;background-color:#08665C;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.checkbox__container .label{font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;overflow-wrap:break-word;word-wrap:break-word;word-break:break-all;max-width:100%}.checkbox__container .label.label-m{font-size:1rem;line-height:1.5rem}.checkbox__container .label.disabled{color:#BFBBBB}.checkbox__container .checkbox__wrapper:hover,.checkbox__container .label:hover{cursor:pointer}';const c=t;const n=class{constructor(i){e(this,i);this.ifxChange=r(this,"ifxChange",7);this.ifxError=r(this,"ifxError",7);if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}this.disabled=false;this.checked=false;this.error=false;this.size="m";this.indeterminate=false}handleCheckbox(){if(!this.disabled){if(!this.inputElement.indeterminate){this.internalChecked=!this.internalChecked}if(this.internalChecked&&!this.internalIndeterminate){if(this.value!==undefined){this.internals.setFormValue(this.value)}else{this.internals.setFormValue("on")}}else{this.internals.setFormValue(null)}this.ifxChange.emit(this.internalChecked)}}async isChecked(){return this.internalChecked}async toggleCheckedState(e){this.internalChecked=e}valueChanged(e,r){if(e!==r){this.internalChecked=e;this.inputElement.checked=this.internalChecked}}errorChanged(e,r){if(e!==r){this.ifxError.emit(e)}}indeterminateChanged(e,r){if(e!==r){this.internalIndeterminate=e;this.inputElement.indeterminate=this.internalIndeterminate}}handleKeydown(e){if(e.keyCode===32||e.keyCode===13){this.handleCheckbox();e.preventDefault()}}componentWillLoad(){this.internalChecked=this.checked;this.internalIndeterminate=this.indeterminate}componentDidRender(){this.inputElement.indeterminate=this.internalIndeterminate}formResetCallback(){this.internals.setFormValue(null)}getCheckedClassName(){if(this.error){if(this.internalChecked){return"checked error"}else{return"error"}}else if(this.internalChecked){return"checked"}else return""}render(){const e=this.el.innerHTML;let r=false;if(e){r=true}return i("div",{key:"ae37e8cf56cecc28d1d3441e4ca70a66d19fd4a9",class:"checkbox__container"},i("input",{key:"210ff7879962c1df556491d83d3ebcf7238b6b50",type:"checkbox",hidden:true,ref:e=>this.inputElement=e,checked:this.internalChecked,onChange:this.handleCheckbox.bind(this),id:"checkbox",value:`${this.value}`,disabled:this.disabled?true:undefined}),i("div",{key:"2b1b2065f41003c4e627e802fa70728f7b884710",tabindex:"0",onClick:this.handleCheckbox.bind(this),onKeyDown:this.handleKeydown.bind(this),role:"checkbox","aria-checked":this.indeterminate?"mixed":this.internalChecked.toString(),"aria-disabled":this.disabled,"aria-labelledby":"label",class:`checkbox__wrapper \n          ${this.getCheckedClassName()}\n        ${this.size==="m"?"checkbox-m":""}\n        ${this.indeterminate?"indeterminate":""}\n        ${this.disabled?"disabled":""}`},this.internalChecked&&!this.internalIndeterminate&&i("ifx-icon",{key:"ca2171404ee8926623bab88b5d4abbb906d66a9d",icon:"check-12","aria-hidden":"true"})),r&&i("div",{key:"efb5c73f051dceb60b79220bffd5b1694502be7b",id:"label",class:`label ${this.size==="m"?"label-m":""} ${this.disabled?"disabled":""} `,onClick:this.handleCheckbox.bind(this)},i("slot",{key:"1c3d1089dfce161a4e4c093c3211a8d772b3d90b"})))}static get formAssociated(){return true}get el(){return o(this)}static get watchers(){return{checked:["valueChanged"],error:["errorChanged"],indeterminate:["indeterminateChanged"]}}};n.style=c;export{n as ifx_checkbox};
-//# sourceMappingURL=p-b2995f20.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["checkboxCss","IfxCheckboxStyle0","Checkbox","constructor","hostRef","this","disabled","checked","error","size","indeterminate","handleCheckbox","inputElement","internalChecked","internalIndeterminate","value","undefined","internals","setFormValue","ifxChange","emit","isChecked","toggleCheckedState","newVal","valueChanged","newValue","oldValue","errorChanged","ifxError","indeterminateChanged","handleKeydown","event","keyCode","preventDefault","componentWillLoad","componentDidRender","formResetCallback","getCheckedClassName","render","slot","el","innerHTML","hasSlot","h","key","class","type","hidden","ref","onChange","bind","id","tabindex","onClick","onKeyDown","role","toString","icon"],"sources":["src/components/checkbox/checkbox.scss?tag=ifx-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n    display: inline-flex;\n    vertical-align: top;\n}\n\n.checkbox__container {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: top;\n    padding: 0px;\n    gap: tokens.$ifxSpace100;\n    font-family: var(--ifx-font-family);\n\n    & .checkbox__wrapper {\n        box-sizing: border-box;\n        display: flex;\n        position: relative; //needs to be added for the indeterminate state of the checkbox\n        justify-content: center;\n        align-items: center;\n        width: tokens.$ifxSize250;\n        height: tokens.$ifxSize250;\n        background-color: tokens.$ifxColorBaseWhite;\n        border: 1px solid #575352;\n        border-radius: tokens.$ifxBorderRadius12;\n        flex: none;\n        order: 0;\n        flex-grow: 0;\n        align-self: flex-start;\n\n        &.checkbox-m {\n            height: tokens.$ifxSize300;\n            width: tokens.$ifxSize300;\n        }\n\n        &.error {\n            border-color: #CD002F;\n        }\n\n        &:focus-visible {\n            border: 1px solid #575352;\n            outline: 2px solid #0A8276;\n            outline-offset: 2px;\n        }\n\n        &:hover {\n            background-color: #EEEDED;\n            border: 1px solid #575352;\n            border-radius: tokens.$ifxBorderRadius12;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n        }\n\n        &.disabled {\n            background-color: #BFBBBB;\n            border-color: #BFBBBB;\n            border-radius: tokens.$ifxBorderRadius12;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n        }\n\n        &.checked:not(.indeterminate) {\n            background-color: #0A8276;\n            border-radius: tokens.$ifxBorderRadius12;\n            border-color: tokens.$ifxColorBaseTransparent;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n            color: tokens.$ifxColorBaseWhite;\n\n            &.error {\n                background-color: #CD002F;\n            }\n\n            &:focus-visible {\n                border: 1px solid transparent;\n                outline: 2px solid #0A8276;\n                outline-offset: 2px;\n            }\n\n            &:hover {\n                background-color: #08665C;\n                border-radius: tokens.$ifxBorderRadius12;\n                flex: none;\n                order: 0;\n                flex-grow: 0;\n            }\n\n            &.disabled {\n                background: #BFBBBB;\n                border-radius: tokens.$ifxBorderRadius12;\n                flex: none;\n                order: 0;\n                flex-grow: 0;\n            }\n        }\n\n        &.indeterminate {\n            &:before {\n                content: \"\";\n                display: block;\n                width: 70%; // Adjust as needed for the width of the minus sign\n                height: 2px; // Adjust for thickness of the minus sign\n                background-color: #08665C; // Color of the minus sign\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n            }\n        }\n\n    }\n\n    & .label {\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n        color: tokens.$ifxColorBaseBlack;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        word-break: break-all;\n        max-width: 100%;\n\n        &.label-m {\n            font-size: tokens.$ifxFontSizeM;\n            line-height: tokens.$ifxLineHeightM;\n        }\n\n        &.disabled {\n            color: #BFBBBB;\n        }\n    }\n\n    & .checkbox__wrapper,\n    & .label {\n        &:hover {\n            cursor: pointer;\n        }\n    }\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Watch, Method, AttachInternals } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-checkbox',\n  styleUrl: 'checkbox.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class Checkbox {\n  private inputElement: HTMLInputElement;\n\n  @Element() el;\n  @Prop() disabled: boolean = false;\n  @Prop() checked: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() size: string = 'm';\n  @Prop() indeterminate: boolean = false;\n  @Prop() value: string;\n  @State() internalChecked: boolean;\n  @State() internalIndeterminate: boolean;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Event({ bubbles: true, composed: true }) ifxChange: EventEmitter;\n  @Event({ bubbles: true, composed: true }) ifxError: EventEmitter;\n\n  handleCheckbox() {\n    if (!this.disabled) {\n      if (!this.inputElement.indeterminate) {\n        this.internalChecked = !this.internalChecked;\n      } \n      if (this.internalChecked && !this.internalIndeterminate) {\n        if (this.value !== undefined) {\n          this.internals.setFormValue(this.value);\n        } else {\n          this.internals.setFormValue(\"on\")\n        }\n      } else {\n        this.internals.setFormValue(null)\n      }\n      this.ifxChange.emit(this.internalChecked);\n    }\n  }\n\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n\n  @Method()\n  async toggleCheckedState(newVal: boolean) {\n    this.internalChecked = newVal;\n  }\n\n  @Watch('checked')\n  valueChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalChecked = newValue;\n      this.inputElement.checked = this.internalChecked; // update the checkbox's checked property\n    }\n  }\n\n  @Watch('error')\n  errorChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.ifxError.emit(newValue);\n    }\n  }\n\n  @Watch('indeterminate')\n  indeterminateChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalIndeterminate = newValue;\n      this.inputElement.indeterminate = this.internalIndeterminate; // update the checkbox's indeterminate property\n    }\n  }\n\n  handleKeydown(event) {\n    // Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key\n    if (event.keyCode === 32 || event.keyCode === 13) {\n      this.handleCheckbox();\n      event.preventDefault();  // prevent the default action when space or enter is pressed\n    }\n  }\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n    this.internalIndeterminate = this.indeterminate;\n  }\n\n  componentDidRender() {\n    this.inputElement.indeterminate = this.internalIndeterminate;\n  }\n\n  /**\n   * Callback for form association.\n   * Called whenever the form is reset.\n   */\n  formResetCallback() {\n    this.internals.setFormValue(null);\n  }\n\n  getCheckedClassName() {\n    if (this.error) {\n      if (this.internalChecked) {\n        return \"checked error\"\n      } else {\n        return \"error\"\n      }\n    } else if (this.internalChecked) {\n      return \"checked\";\n    } else return \"\"\n  }\n\n  render() {\n    const slot = this.el.innerHTML;\n    let hasSlot = false;\n    if (slot) {\n      hasSlot = true;\n    }\n    return (\n      <div class=\"checkbox__container\">\n        <input\n          type=\"checkbox\"\n          hidden\n          ref={(el) => (this.inputElement = el)}\n          checked={this.internalChecked}\n          onChange={this.handleCheckbox.bind(this)} // Listen for changes here\n          id='checkbox'\n          value={`${this.value}`}\n          disabled={this.disabled ? true : undefined}\n        />\n        <div\n          tabindex=\"0\"\n          onClick={this.handleCheckbox.bind(this)}\n          onKeyDown={this.handleKeydown.bind(this)}\n          role=\"checkbox\"\n          aria-checked={this.indeterminate ? 'mixed' : this.internalChecked.toString()}\n          aria-disabled={this.disabled}\n          aria-labelledby=\"label\"\n          class={`checkbox__wrapper \n          ${this.getCheckedClassName()}\n        ${this.size === \"m\" ? \"checkbox-m\" : \"\"}\n        ${this.indeterminate ? 'indeterminate' : \"\"}\n        ${this.disabled ? 'disabled' : \"\"}`}\n        >\n          {this.internalChecked && !this.internalIndeterminate && <ifx-icon icon=\"check-12\" aria-hidden=\"true\"></ifx-icon>}\n        </div>\n        {hasSlot &&\n          <div id=\"label\" class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : \"\"} `} onClick={this.handleCheckbox.bind(this)}>\n            <slot />\n          </div>}\n      </div>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,h as t,a as n,g as o}from"./p-e6edf72d.js";import{c as i}from"./p-5cdc6210.js";const d=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{vertical-align:bottom;display:inline-flex;width:var(--bw, fit-content)}.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0px 16px;gap:8px;color:#FFFFFF;font-weight:600;border-radius:1px;line-height:1.5rem;font-family:var(--ifx-font-family);font-style:normal;text-decoration:none;user-select:none;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;width:var(--bw, fit-content)}.btn:not(.disabled){cursor:pointer}.btn.disabled{pointer-events:none}.btn-default{color:#FFFFFF;background-color:#0A8276}.btn-default:disabled,.btn-default.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary-default{background-color:#FFFFFF;color:#0A8276;border:1px solid #0A8276}.btn-secondary-default:disabled,.btn-secondary-default.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary-default{background-color:transparent;color:#0A8276}.btn-tertiary-default:disabled,.btn-tertiary-default.disabled{color:#BFBBBB;pointer-events:none}.btn-danger{color:#FFFFFF;background-color:#CD002F;border-color:#CD002F}.btn-danger:disabled,.btn-danger.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary-danger{background-color:#FFFFFF;color:#CD002F;border:1px solid #CD002F}.btn-secondary-danger:disabled,.btn-secondary-danger.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary-danger{background-color:transparent;color:#CD002F}.btn-tertiary-danger:disabled,.btn-tertiary-danger.disabled{background-color:#FFFFFF;color:#BFBBBB;pointer-events:none}.btn-inverse{color:#0A8276;background-color:#FFFFFF}.btn-inverse:disabled,.btn-inverse.disabled{opacity:1;background-color:#FFFFFF;color:#0A8276;pointer-events:none}.btn-secondary-inverse{color:#FFFFFF;border:1px solid #FFFFFF}.btn-secondary-inverse:disabled,.btn-secondary-inverse.disabled{border:1px solid #FFFFFF;color:#FFFFFF;pointer-events:none}.btn-tertiary-inverse{color:#FFFFFF}.btn-tertiary-inverse:disabled,.btn-tertiary-inverse.disabled{color:#FFFFFF;opacity:1;pointer-events:none}.btn ifx-icon:empty{display:none}.btn.btn-xs{font-size:0.875rem;height:32px;line-height:1rem}.btn.btn-s{font-size:0.875rem;height:36px;line-height:1.25rem}.btn.btn-l{font-size:1.25rem;height:48px;line-height:1.75rem}.btn.btn-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-default:not(:disabled,.disabled):hover{background-color:#08665C}.btn.btn-default:not(:disabled,.disabled):active,.btn.btn-default:not(:disabled,.disabled).active{background-color:#06534B}.btn.btn-secondary-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary-default:not(:disabled,.disabled):hover{color:#FFFFFF;background-color:#08665C}.btn.btn-secondary-default:not(:disabled,.disabled):active,.btn.btn-secondary-default:not(:disabled,.disabled).active{background-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#9C216E}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#9C216E}.btn.btn-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-danger:not(:disabled,.disabled):hover{background-color:#A2001E}.btn.btn-danger:not(:disabled,.disabled):active,.btn.btn-danger:not(:disabled,.disabled).active{background-color:#900021}.btn.btn-secondary-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary-danger:not(:disabled,.disabled):hover{color:#FFFFFF;background-color:#A2001E}.btn.btn-secondary-danger:not(:disabled,.disabled):active,.btn.btn-secondary-danger:not(:disabled,.disabled).active{background-color:#900021}.btn.btn-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-inverse:not(:disabled,.disabled):hover{background-color:#EEEDED}.btn.btn-inverse:not(:disabled,.disabled):active,.btn.btn-inverse:not(:disabled,.disabled).active{background-color:#BFBBBB}.btn.btn-secondary-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-secondary-inverse:not(:disabled,.disabled):hover{color:#0A8276;background-color:#EEEDED}.btn.btn-secondary-inverse:not(:disabled,.disabled):active,.btn.btn-secondary-inverse:not(:disabled,.disabled).active{color:#0A8276;background-color:#BFBBBB}.btn.btn-tertiary-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #08665C}.btn.btn-tertiary-default:not(:disabled,.disabled):hover{color:#08665C}.btn.btn-tertiary-default:not(:disabled,.disabled):active,.btn.btn-tertiary-default:not(:disabled,.disabled).active{color:#06534B}.btn.btn-tertiary-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #A2001E}.btn.btn-tertiary-danger:not(:disabled,.disabled):hover{color:#A2001E}.btn.btn-tertiary-danger:not(:disabled,.disabled):active,.btn.btn-tertiary-danger:not(:disabled,.disabled).active{color:#900021}.btn.btn-tertiary-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-tertiary-inverse:not(:disabled,.disabled):hover{color:#EEEDED}.btn.btn-tertiary-inverse:not(:disabled,.disabled):active,.btn.btn-tertiary-inverse:not(:disabled,.disabled).active{color:#BFBBBB}';const a=d;const r=class{constructor(t){e(this,t);this.variant="primary";this.theme="default";this.size="m";this.disabled=false;this.target="_self";this.type="button";this.fullWidth=false;this.handleClick=e=>{if(this.el.shadowRoot){const t=this.el.closest("form");if(t){e.preventDefault();if(this.type==="reset"){this.resetClickHandler()}else{const e=document.createElement("button");if(this.type){e.type=this.type}e.style.display="none";t.appendChild(e);e.click();e.remove()}}}}}setInternalHref(e){this.internalHref=e}async setFocus(){this.focusableElement.focus()}insertNativeButton(){this.nativeButton=document.createElement("button");this.nativeButton.type=this.type;this.nativeButton.style.display="none";this.el.closest("form").appendChild(this.nativeButton)}handleFormAndInternalHref(){if(this.el.closest("form")){if(this.el.href){this.el.internalHref=undefined}this.insertNativeButton()}else{this.internalHref=this.href}}handleButtonWidth(){if(this.fullWidth){this.el.style.setProperty("--bw","100%")}else{this.el.style.setProperty("--bw","fit-content")}}componentWillLoad(){this.handleFormAndInternalHref()}componentWillRender(){this.handleButtonWidth()}resetClickHandler(){const e=this.el.closest("form");const t=e.querySelectorAll("ifx-text-field, ifx-textarea");t.forEach((e=>{e.reset()}))}handleKeyDown(e){if(e.key===" "||e.key==="Enter"&&!this.disabled){this.focusableElement.click()}}handleHostClick(e){if(this.disabled===true){e.stopImmediatePropagation()}}handleFocus(e){if(this.disabled){e.preventDefault();this.focusableElement.blur()}}render(){return t(n,{key:"7c8fba0e57ae1cdfa075d8e165e694a5fc05b763"},t("a",{key:"dd0d98ba6e5277087d390f5e297d445873826478",role:this.href?"link":"button",tabIndex:this.disabled?-1:0,ref:e=>this.focusableElement=e,class:this.getClassNames(),href:!this.disabled?this.internalHref:undefined,target:this.target,onClick:this.handleClick,rel:this.target==="_blank"?"noopener noreferrer":undefined,onFocus:e=>this.handleFocus(e),"aria-disabled":this.disabled?"true":null,"aria-describedby":this.theme==="danger"?"Dangerous action":undefined,"aria-label":this.AriaLabel||undefined},t("slot",{key:"acfbfb434c7b0f8705b31564a15f59f20c854036"})))}getVariantClass(){return`${this.variant}`==="secondary"?`secondary-${this.theme}`:`${this.variant}`==="tertiary"?`tertiary-${this.theme}`:`${this.theme}`}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",this.size&&`btn-${this.getSizeClass()}`,`btn-${this.getVariantClass()}`,this.disabled?"disabled":"")}get el(){return o(this)}static get watchers(){return{href:["setInternalHref"]}}};r.style=a;export{r as ifx_button};
-//# sourceMappingURL=p-b4f0ce88.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["buttonCss","IfxButtonStyle0","Button","constructor","hostRef","this","variant","theme","size","disabled","target","type","fullWidth","handleClick","ev","el","shadowRoot","parentForm","closest","preventDefault","resetClickHandler","fakeButton","document","createElement","style","display","appendChild","click","remove","setInternalHref","newValue","internalHref","setFocus","focusableElement","focus","insertNativeButton","nativeButton","handleFormAndInternalHref","href","undefined","handleButtonWidth","setProperty","componentWillLoad","componentWillRender","formElement","customElements","querySelectorAll","forEach","element","reset","handleKeyDown","key","handleHostClick","event","stopImmediatePropagation","handleFocus","blur","render","h","Host","role","tabIndex","ref","class","getClassNames","onClick","rel","onFocus","AriaLabel","getVariantClass","getSizeClass","classNames"],"sources":["src/components/button/button.scss?tag=ifx-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  vertical-align: bottom;\n  display: inline-flex;\n  width: var(--bw, fit-content);\n}\n\n.btn {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: tokens.$ifxSize500;\n  padding: 0px tokens.$ifxSpace200;\n  gap: tokens.$ifxSpace100;\n  color: tokens.$ifxColorBaseWhite;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  border-radius: tokens.$ifxBorderRadius12;\n  line-height: tokens.$ifxLineHeightM;\n  font-family: var(--ifx-font-family);\n  font-style: normal;\n  text-decoration: none;\n  user-select: none;\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  width: var(--bw, fit-content);\n}\n\n.btn:not(.disabled) {\n  cursor: pointer;\n}\n\n.btn.disabled {\n  pointer-events: none;\n}\n\n.btn-default {\n  //default variant=primary; default color=default\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.btn-secondary-default {\n  background-color: tokens.$ifxColorBaseWhite;\n  color: tokens.$ifxColorOcean500;\n  border: 1px solid 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-default {\n  background-color: tokens.$ifxColorBaseTransparent;\n  color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n\n.btn-danger {\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorRed500;\n  border-color: tokens.$ifxColorRed500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n.btn-secondary-danger {\n  background-color: tokens.$ifxColorBaseWhite;\n  color: tokens.$ifxColorRed500;\n  border: 1px solid tokens.$ifxColorRed500;\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-danger {\n  //combination tertiary + danger not in design\n  background-color: tokens.$ifxColorBaseTransparent;\n  color: tokens.$ifxColorRed500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-inverse {\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n\n  &:disabled,\n  &.disabled {\n    opacity: tokens.$ifxOpacity100;\n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorOcean500;\n    pointer-events: none;\n  }\n}\n\n.btn-secondary-inverse {\n  color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorBaseWhite;\n\n  &:disabled,\n  &.disabled {\n    border: 1px solid tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n\n.btn-tertiary-inverse {\n  color: tokens.$ifxColorBaseWhite;\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorBaseWhite;\n    opacity: tokens.$ifxOpacity100;\n    pointer-events: none;\n\n  }\n}\n\n.btn {\n  & ifx-icon:empty {\n    display: none;\n  }\n\n  &.btn-xs {\n    font-size: tokens.$ifxFontSizeS;\n    height: tokens.$ifxSize400;\n    line-height: tokens.$ifxLineHeightXs;\n  }\n\n  &.btn-s {\n    font-size: tokens.$ifxFontSizeS;\n    height: tokens.$ifxSize450;\n    line-height: tokens.$ifxLineHeightS;\n  }\n\n  // &.btn-m { //default\n  //   font-size: tokens.$ifxFontSizeM;\n  //   height: tokens.$ifxSize400;\n  //   line-height: tokens.$ifxLineHeightM;\n  // }\n\n\n  &.btn-l {\n    font-size: tokens.$ifxFontSizeXl;\n    height: tokens.$ifxSize600;\n    line-height: tokens.$ifxLineHeightXl;\n  }\n\n\n\n  &.btn-default: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    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n  &.btn-secondary-default: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      color: tokens.$ifxColorBaseWhite;\n      background-color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n  &.btn-secondary:not(:disabled, .disabled) {\n\n    &:hover {\n      background-color: tokens.$ifxColorBerry500;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorBerry500;\n    }\n  }\n\n\n\n  &.btn-danger: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.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorRed700;\n    }\n  }\n\n  &.btn-secondary-danger:not(:disabled, .disabled) {\n\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      color: tokens.$ifxColorBaseWhite;\n      background-color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorRed700;\n    }\n  }\n\n\n  &.btn-inverse:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorEngineering200;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n  &.btn-secondary-inverse:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n      background-color: tokens.$ifxColorEngineering200;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean500;\n      background-color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n\n\n  &.btn-tertiary-default: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.$ifxColorOcean600;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean700;\n    }\n\n\n  }\n\n\n\n\n\n  &.btn-tertiary-danger: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.$ifxColorRed600;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorRed700;\n    }\n\n  }\n\n\n  &.btn-tertiary-inverse:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorEngineering200;\n\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorEngineering300;\n    }\n  }\n}","import { Component, Prop, h, Host, Method, Element, Listen, State, Watch } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n@Component({\n  tag: 'ifx-button',\n  styleUrl: 'button.scss',\n  shadow: true,\n})\nexport class Button {\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n  @Prop() theme: 'default' | 'danger' | 'inverse' = 'default';\n  @Prop() size: string = 'm';\n  @Prop() disabled: boolean = false;\n  @State() internalHref: string;\n  @Prop() href: string;\n  @Prop() target: string = '_self';\n  @Prop() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n  @Prop() fullWidth: boolean = false;\n  @Prop() AriaLabel: string;\n  @Element() el;\n\n  private focusableElement: HTMLElement;\n  private nativeButton: HTMLButtonElement | HTMLInputElement;\n\n  @Watch('href')\n  setInternalHref(newValue: string) {\n    this.internalHref = newValue;\n  }\n\n  @Method()\n  async setFocus() {\n    this.focusableElement.focus();\n  }\n\n  insertNativeButton() {\n    this.nativeButton = document.createElement('button');\n    this.nativeButton.type = this.type;\n    this.nativeButton.style.display = 'none';\n    this.el.closest('form').appendChild(this.nativeButton);\n  }\n\n  handleFormAndInternalHref() {\n    if (this.el.closest('form')) {\n      if (this.el.href) {\n        this.el.internalHref = undefined;\n      }\n      this.insertNativeButton()\n    } else {\n      this.internalHref = this.href;\n    }\n  }\n\n  handleButtonWidth() {\n    if (this.fullWidth) {\n      this.el.style.setProperty('--bw', '100%');\n    } else {\n      this.el.style.setProperty('--bw', 'fit-content');\n    }\n  }\n\n  componentWillLoad() {\n    this.handleFormAndInternalHref()\n  }\n\n  componentWillRender() {\n    this.handleButtonWidth()\n  }\n\n\n\n  handleClick = (ev: Event) => {\n    if (this.el.shadowRoot) {\n      const parentForm = this.el.closest('form');\n      if (parentForm) {\n        ev.preventDefault();\n\n        if (this.type === 'reset') {\n          // If the button type is 'reset', manually reset all custom form fields\n          this.resetClickHandler(); //this will reset all ifx-text-fields within a form\n        } else {\n          const fakeButton = document.createElement('button');\n          if (this.type) {\n            fakeButton.type = this.type;\n          }\n          fakeButton.style.display = 'none';\n          parentForm.appendChild(fakeButton);\n          fakeButton.click();\n          fakeButton.remove();\n        }\n      }\n    }\n  }\n\n  resetClickHandler() {\n    const formElement = this.el.closest('form');\n    const customElements = formElement.querySelectorAll('ifx-text-field, ifx-textarea');\n    customElements.forEach(element => {\n      element.reset();\n    });\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if ( ev.key === \" \" || ev.key === 'Enter' && !this.disabled) {\n      this.focusableElement.click();\n    }\n  }\n\n  @Listen('click', { capture: true })\n  handleHostClick(event: Event) {\n    if (this.disabled === true) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  handleFocus(event: FocusEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      this.focusableElement.blur();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <a\n          role={this.href ? 'link' : 'button'}\n          tabIndex={this.disabled ? -1 : 0}\n          ref={(el) => (this.focusableElement = el)}\n          class={this.getClassNames()}\n          href={!this.disabled ? this.internalHref : undefined}\n          target={this.target}\n          onClick={this.handleClick}\n          rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n          onFocus={(event) => this.handleFocus(event)}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-describedby={this.theme === 'danger' ? 'Dangerous action' : undefined}\n          aria-label={this.AriaLabel || undefined}\n        >\n          <slot></slot>\n        </a>\n      </Host>\n    );\n  }\n\n\n  getVariantClass() {\n    return `${this.variant}` === \"secondary\"\n      ? `secondary-${this.theme}`\n      : `${this.variant}` === 'tertiary'\n        ? `tertiary-${this.theme}`\n        : `${this.theme}`;\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',\n      this.size && `btn-${this.getSizeClass()}`,\n      `btn-${this.getVariantClass()}`,\n      this.disabled ? 'disabled' : ''\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-bbc83759.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:"1e2ead41dc73b22f98276993c001046f70b2164d"},o("div",{key:"d9da3b5cb3563cca3b3892599961171e16405471",ref:e=>this.modalContainer=e,class:`modal-container ${this.showModal?"open":""}`},o("div",{key:"e3d028b2ef1b29ceb4b2436d97ba364aa29d427a",class:"modal-overlay",onClick:()=>this.handleOverlayClick()}),o("div",{key:"b134f6a0b617dec6e89d8f5ab476366f27d8de52","data-focus-trap-edge":true,onFocus:this.handleTopFocus,tabindex:"0"}),o("div",{key:"d0f8faddb56473607fec219a1a58135e233c3ac8",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:"0120180ab268cabd7910b3e41c8e4e8707ceb079",class:"modal-content"},o("div",{key:"f32eec1829080347500cf15610f8927b02277411",class:"modal-header"},o("h2",{key:"9c4877b0bb9b121918e1ecb9fe57d78878ee8120",class:"modal-caption"},this.caption),this.showCloseButton&&o("ifx-icon-button",{key:"38f248bad5cd2440e7a8e9f44d3b6fb42ca1f3cc",class:"modal-close-button",ref:e=>this.closeButton=e,icon:"cross-24",variant:"tertiary",onClick:()=>this.doBeforeClose("CLOSE_BUTTON")})),o("div",{key:"860c3619ba7eebe1534ddf8a07209b8f3daad3de",class:"modal-body"},o("slot",{key:"abd57b0dfee615124be5f28196a627cc0710c264",name:"content"})),o("div",{key:"b1508671e995e54f83628eed396c36de02b60de7",class:`modal-footer ${this.slotButtonsPresent?"buttons-present":""}`},o("slot",{key:"c9587dc4bd6979056774a479683d0cf64f6d8f08",name:"buttons",onSlotchange:e=>this.handleButtonsSlotChange(e)})))),o("div",{key:"de4fe9b5ecb3bf5b675ae35aefe8a9c2a6bee425","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-bbc83759.entry.js.map

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

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

package/dist/infineon-design-system-stencil/p-c950abaf.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:"6834296bacdbbfc1fea1260ae364baf91f8de076","aria-label":"a status indicator","aria-value":this.label,class:n},r("span",{key:"d6be4fd7099ed79da1984d6a01726172051bc630",class:`dot ${e}`}),r("p",{key:"3ebcaa7ec097869ee5617806688d47c2acd0af82",class:"text"},this.label))}};d.style=n;export{d as ifx_status};
-//# sourceMappingURL=p-c950abaf.entry.js.map

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

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["navbarCss","IfxNavbarStyle0","Navbar","constructor","hostRef","this","main","products","applications","design","support","about","applicationName","hasLeftMenuItems","fixed","showLogoAndAppname","logoHref","internalLogoHref","logoHrefTarget","internalLogoHrefTarget","addEventListenersToHandleCustomFocusState","element","el","shadowRoot","firstChild","console","error","tabIndex","aElements","querySelectorAll","i","length","slot","querySelector","assignedNodes","node","nodeName","navbarItem","clearFirstLayerMenu","event","detail","action","leftMenuItems","getMobileMenuTop","isSameNode","component","hideComponent","parent","children","toggleFirstLayerItem","showComponent","getWrappers","rightContentNavigationGroup","searchBarRightWrapper","searchBarLeftWrapper","rightSideItemSlot","rightSideSlot","leftSideSlot","rightAssignedNodes","leftAssignedNodes","navbarProfile","rightMenuItems","topRowWrapper","hideNavItems","searchBarIsOpen","l","classList","contains","r","hideOnMobile","showNavItems","undefined","handleSearchBarToggle","toggleClass","className","toggle","handleSidebar","sidebarIconWrapper","currentTarget","closest","sidebarIconOpen","sidebarIconClose","mainContainer","navbarWrapper","sidebarWrapper","handleBodyScroll","body","style","overflow","handleDropdownMenu","dropdownWrapper","iconWrapper","setItemMenuPosition","navbarItems","itemChildren","forEach","item","setMenuItemPosition","setMenuItemChildrenPosition","hasNestedItems","setItemSideSpecifications","subItem","getMediaQueryList","mediaQueryList","window","matchMedia","componentDidLoad","matches","moveNavItemsToSidebar","handleMobileMenuBottom","e","mobileMenuBottomWrapper","slotElement","target","nodes","add","remove","handleLogoHrefAndTarget","trim","includes","componentWillLoad","RemoveSpaceOnStorybookSnippet","dropdownMenu","addEventListener","getSearchBarLeftWrapper","getMobileMenuBottom","handleBurgerIcon","burgerIconWrapper","crossIcon","searchBarLeft","onNavbarMobile","setAttribute","moveChildComponentsIntoSubLayerMenu","tagName","toUpperCase","showLabel","toggleChildren","leftIsInitial","searchBarRight","moveChildComponentsBackIntoNavbar","navbarProfileItem","showProfileItemLabel","getAttribute","parentElement","storybookWrapper","render","h","key","class","href","width","height","viewBox","fill","xmlns","d","id","name","onClick","bind","icon","onSlotchange"],"sources":["src/components/navigation/navbar/navbar.scss?tag=ifx-navbar&encapsulation=shadow","src/components/navigation/navbar/navbar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n  width: 100%;\n  display: block;\n}\n\n\n.navbar__wrapper {\n  font-family: var(--ifx-font-family);\n  height: 63px;\n  position: sticky;\n  //overflow: hidden;\n  z-index: 1030;\n  border-bottom: 1px solid #EEEDED;\n\n  &.fixed {\n    border-bottom: none;\n  }\n\n  // border-bottom: 1px solid #EEEDED; //when fixed is false\n}\n\n.navbar__main-container {\n  position: absolute;\n  top: 0;\n  width: 100%;\n  //overflow: hidden;\n  transition: all 1s;\n  z-index: 1020;\n\n  &.fixed {\n    position: fixed;\n\n    & .navbar__container {\n      border-bottom: 1px solid #EEEDED;\n    }\n  }\n\n  &.show {\n    height: 100vh;\n    bottom: 0;\n    background-color: tokens.$ifxColorOverlayDark;\n    transition: 1s;\n    z-index: 1;\n  }\n}\n\n.navbar__sidebar {\n  box-sizing: border-box;\n  position: fixed;\n  right: -100%;\n  top: 64px;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  // padding: 32px;\n  width: 375px;\n  height: calc(100vh - 64px);\n  background-color: tokens.$ifxColorBaseWhite;\n  transition: right 1s;\n  z-index: 1030;\n\n  &.show {\n    right: 0;\n    transition: right 1s;\n  }\n\n  & .navbar__sidebar-top-row { \n    display: flex;\n    padding: var(--borderRadius-none, 0px) var(--space-300, 24px) 30px var(--space-300, 24px);\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--space-200, 16px);\n    flex: 1 0 0;\n    align-self: stretch;\n\n    overflow-y: auto;\n\n    & .navbar__sidebar-top-row-wrapper { \n      display: flex;\n      padding-top: var(--space-200, 16px);\n      flex-direction: column;\n      align-items: flex-start;\n      align-self: stretch;\n      gap: 16px;\n\n      &.expand { \n        align-items: initial;\n      }\n\n      & .navbar__sidebar-top-row-item { \n        display: flex;\n        padding: var(--space-200, 0px) var(--space-50, 4px) var(--space-200, 0px) 0px;\n        align-items: center;\n        gap: var(--space-100, 8px);\n        align-self: stretch;\n        justify-content: space-between;\n\n        & .navbar__sidebar-top-row-item-icon-wrapper { \n          & ifx-icon { \n            vertical-align: middle;\n          }\n        }\n  \n  \n        &:hover { \n          cursor: pointer;\n        }\n  \n        & .navbar__sidebar-top-row-item-label { \n          color: var(--color-base-black, #1D1D1D);\n          font-family: \"Source Sans 3\";\n          font-size: 16px;\n          font-style: normal;\n          font-weight: 400;\n          line-height: 24px; \n        }\n  \n      }\n    }\n\n  }\n\n  & .navbar__sidebar-bottom-row { \n    //display: flex;\n    display: none;\n    padding: var(--space-150, 12px) var(--space-300, 24px) var(--space-150, 12px) var(--space-200, 16px);\n    flex-direction: column;\n    align-items: flex-start;\n    align-self: stretch;\n    background: var(--color-engineering-100, #F7F7F7);\n    border-top: 1px solid var(--color-engineering-200, #EEEDED);\n    gap: 10px;\n\n    max-height: 160px;\n    overflow-y: auto;\n\n    &.show { \n      display: flex;\n    }\n   \n\n    & .navbar__sidebar-bottom-row-item { \n      display: flex;\n      height: 40px;\n      padding-right: var(--space-50, 4px);\n      align-items: center;\n      gap: var(--space-100, 8px);\n      flex: 1 0 0;\n \n      & .navbar__sidebar-bottom-row-item-label {\n        color: var(--color-base-black, #1D1D1D);\n        font-family: \"Source Sans 3\";\n        font-size: 16px;\n        font-style: normal;\n        font-weight: 400;\n        line-height: 24px; \n      }\n\n      & .navbar__sidebar-bottom-row-item-icon-wrapper { \n       display: flex;\n       align-items: center;\n      }\n    }\n\n  }\n\n\n  & .navbar__sidebar-content-products,\n  & .navbar__sidebar-content-main {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 0px;\n    gap: 24px;\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 0;\n\n    & .navbar__sidebar-content-products-header,\n    & .navbar__sidebar-content-about-header {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: 0px;\n      gap: 16px;\n      flex: none;\n      order: 0;\n      align-self: stretch;\n      flex-grow: 0;\n      color: #BFBBBB;\n\n      & span {\n        color: tokens.$ifxColorBaseBlack;\n        font-weight: 600;\n        font-size: 18px;\n        line-height: 28px;\n        display: flex;\n        align-items: center;\n      }\n    }\n\n    & .navbar__sidebar-content-products-menu,\n    & .navbar__sidebar-content-main-menu {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      padding: 0px;\n      gap: 16px;\n      flex: none;\n      order: 1;\n      flex-grow: 0;\n      width: 100%;\n\n      & .navbar__sidebar-content-products-menu-item,\n      & .navbar__sidebar-content-main-menu-item {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        padding: 0px;\n        flex: none;\n        order: 0;\n        flex-grow: 0;\n\n        & a {\n          text-decoration: none;\n          font-style: normal;\n          font-weight: 400;\n          font-size: 16px;\n          line-height: 24px;\n          display: flex;\n          align-items: center;\n          color: tokens.$ifxColorBaseBlack;\n        }\n      }\n\n      & .navbar__sidebar-content-main-menu-item {\n        color: tokens.$ifxColorEngineering300;\n\n        & a {\n          font-style: normal;\n          font-weight: 600;\n          font-size: 18px;\n          line-height: 28px;\n          display: flex;\n          align-items: center;\n          color: tokens.$ifxColorBaseBlack;\n          flex: none;\n          order: 0;\n          flex-grow: 1;\n        }\n      }\n    }\n\n    & .navbar__sidebar-content-main-menu {\n      align-items: normal;\n    }\n  }\n}\n\n.navbar__container {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 8px 40px;\n  gap: 16px;\n  background-color: tokens.$ifxColorBaseWhite;\n  font-family: var(--ifx-font-family);\n\n  &.expanded { \n    justify-content: initial;\n  }\n\n  // &.fixed { \n  //   border-bottom: 1px solid #EEEDED; //when fixed is true\n  // }\n\n  & .navbar__container-search-field-wrapper { \n    display: none;\n\n    &.show { \n      display: flex;\n    }\n  }\n\n  & .navbar__container-left {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0;\n    gap: 16px;\n    flex: none;\n    order: 0;\n    flex-grow: 0;\n\n    &.hide {\n      display: none;\n    }\n\n    &.expand { \n      justify-content: initial;\n      flex: 1;\n        & .navbar__container-left-content { \n          align-items: initial;\n          flex: 1;\n          & .navbar__container-left-content-navigation-group { \n            justify-content: initial;\n            flex: 1;\n            & .navbar__container-left-content-navigation-item-search-bar { \n              flex: 1;\n            }\n          }\n        }\n      \n    }\n\n    & .navbar__container-left-logo {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: 0px;\n      gap: 16px;\n      flex: none;\n      order: 0;\n      flex-grow: 0;\n\n      &.hide { \n        display: none;\n      }\n\n      & h6 {\n        position: relative;\n        margin: 0;\n        padding: 0;\n        font-style: normal;\n        font-weight: 600;\n        font-size: 16px;\n        //line-height: 24px;\n        display: flex;\n        align-items: center;\n        color: tokens.$ifxColorBaseBlack;\n        flex: none;\n        order: 1;\n        flex-grow: 0;\n      }\n\n      & .navbar__container-left-logo-default {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        padding: 12px 0px;\n        flex: none;\n        order: 0;\n        flex-grow: 0;\n\n        & svg {\n          width: 91px;\n          height: 40px;\n          flex: none;\n          order: 0;\n          flex-grow: 0;\n          vertical-align: bottom;\n        }\n      }\n\n      & .navbar__container-left-logo-divider {\n        width: 1px;\n        height: 32px;\n        background: tokens.$ifxColorEngineering200;\n        flex: none;\n        order: 2;\n        flex-grow: 0;\n      }\n    }\n\n    & .navbar__container-left-content {\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: flex-start;\n      padding: 0px;\n      flex: none;\n      order: 1;\n      flex-grow: 0;\n\n      & .navbar__container-left-content-navigation-group {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        padding: 0px;\n        gap: 4px;\n        flex: none;\n        order: 0;\n        flex-grow: 0;\n\n        & .navbar__container-left-content-navigation-item-search-bar {\n          display: flex; //none\n          flex-direction: row;\n          align-items: center;\n          padding: 0px 8px;\n          flex: none;\n          order: 5;\n          flex-grow: 0;\n          //width: 256px;\n          //height: 40px;\n        }\n\n        & .navbar__container-left-content-navigation-item {\n          display: flex;\n          flex-direction: row;\n          align-items: center;\n          padding: 0px 8px;\n          gap: 8px;\n          flex: none;\n          order: 0;\n          flex-grow: 0;\n\n          & a {\n            display: flex;\n            align-items: center;\n            font-weight: 400;\n            font-size: 16px;\n            line-height: 24px;\n            color: tokens.$ifxColorBaseBlack;\n            text-decoration: none;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n          }\n        }\n      }\n    }\n  }\n\n  & .navbar__container-right {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-end;\n    padding: 0;\n    gap: 8px;\n    flex: none;\n    order: 1;\n    flex-grow: 0;\n\n    &.hide { \n      display: none;\n    }\n\n    &.expand { \n      justify-content: initial;\n      flex: 1;\n        & .navbar__container-right-content { \n          align-items: initial;\n          flex: 1;\n          & .navbar__container-right-content-navigation-group { \n            justify-content: initial;\n            flex: 1;\n            & .navbar__container-right-content-navigation-item-search-bar { \n              flex: 1;\n              & .navbar__container-right-content-navigation-item-search-bar-icon-wrapper { \n                flex: 1;\n              }\n            }\n          }\n        }\n      \n    }\n\n    & .navbar__burger-icon-wrapper {\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      padding: 4px 0px 4px 16px;\n      border-left: 1px solid tokens.$ifxColorEngineering300;\n      gap: 16px;\n      flex: none;\n      order: 1;\n      flex-grow: 0;\n      width: 41px;\n      height: 40px;\n\n      &.hide { \n        display: none;\n      }\n\n      & .navbar__burger-icon {\n        display: flex;\n        align-items: center;\n\n        &:hover { \n          cursor: pointer;\n        }\n\n        &.close {\n          display: none;\n        }\n      }\n\n      & .navbar__cross-icon {\n        display: none;\n        align-items: center;\n\n        &.show {\n          display: flex;\n\n          &:hover { \n            cursor: pointer;\n          }\n        }\n      }\n    }\n\n    & .navbar__container-right-content {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      padding: 0px;\n      flex: none;\n      order: 0;\n      flex-grow: 0;\n\n      & .navbar__container-right-content-navigation-group {\n        position: relative;\n        display: flex;\n        flex-direction: row;\n        justify-content: flex-end;\n        align-items: center;\n        padding: 0px;\n        flex: none;\n        order: 0;\n        flex-grow: 0;\n\n        & .navbar__container-right-content-navigation-item,\n        & .navbar__container-right-content-navigation-item-profile,\n        & .navbar__container-right-content-navigation-item-search-bar {\n          display: flex;\n          flex-direction: row;\n          align-items: center;\n          padding: 0px 8px;\n          gap: 4px;\n          flex: none;\n          order: 0;\n          flex-grow: 0;\n\n          & .navbar__container-right-content-navigation-item-search-bar-icon-wrapper {\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            //width: 24px;\n            //height: 24px;\n            //max-width: 200px;\n\n            &.isOpen { \n              position: absolute;\n              top: 10px;\n            }\n          }\n\n          & .navbar__container-right-content-navigation-item-navigation-profile {\n            position: relative;\n            width: 24px;\n            height: 24px;\n            background: tokens.$ifxColorOcean500;\n            border-radius: 100px;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n\n            & a {\n              position: absolute;\n              width: 22px;\n              height: 20px;\n              left: calc(50% - 22px/2);\n              top: calc(50% - 20px/2);\n              font-style: normal;\n              font-weight: 600;\n              font-size: 14px;\n              line-height: 20px;\n              text-decoration: none;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              text-align: center;\n              color: tokens.$ifxColorBaseWhite;\n            }\n          }\n\n          & .navbar__container-right-content-navigation-item-icon-wrapper {\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          & a {\n            font-style: normal;\n            font-weight: 400;\n            font-size: 14px;\n            line-height: 20px;\n            color: tokens.$ifxColorBaseBlack;\n            text-decoration: none;\n            display: flex;\n            align-items: center;\n            flex: none;\n            order: 1;\n            flex-grow: 0;\n          }\n        }\n      }\n    }\n  }\n}\n\n//burger icon exist, and left container is gone\n@media screen and (max-width: 800px) {\n  .navbar__container {\n    padding: 0px 16px;\n    height: 64px;\n    gap: initial;\n\n    &.expanded { \n      & .navbar__container-right {\n        & .navbar__burger-icon-wrapper {\n          display: none;\n        }\n      }\n    }\n\n    & .navbar__container-left {\n      & .navbar__container-left-content {\n        display: none;\n      }\n\n      & .navbar__container-left-logo {\n        & .navbar__container-left-logo-divider {\n          display: none;\n        }\n      }\n    }\n\n    & .navbar__container-right {\n      flex: 1;\n    }\n  }\n\n  .navbar__sidebar {\n    width: 0;\n    transition: 1s;\n\n    // &.show {\n    //   width: 100%;\n    // }\n\n  }\n}\n\n@media screen and (max-width: 500px) {\n  .navbar__sidebar {\n    &.show {\n      width: 100%;  // 100% of viewport width\n    }\n  }\n}\n\n@media screen and (min-width: 500px) {\n  .navbar__sidebar {\n    &.show {\n      width: 50%;  // 100% of viewport width\n    }\n  }\n}\n\n//burger icon disappears\n@media screen and (min-width: 800px) {\n  .navbar__wrapper {\n    height: 63px;\n  }\n\n  .navbar__container {\n    padding: 0px 16px;\n    height: 63px;\n    gap: initial;\n\n    & .navbar__container-right {\n      & .navbar__burger-icon-wrapper {\n        display: none;\n      }\n    }\n  }\n\n  .navbar__main-container {\n    &.show {\n      height: auto;\n      background-color: inherit;\n      transition: none;\n    }\n  }\n\n  .navbar__sidebar {\n    width: 0;\n    transition: 1s;\n    &.show { \n      right: -100%;\n    }\n  }\n\n}\n\n//left container appears\n@media screen and (min-width: 1024px) {\n  .navbar__wrapper {\n    height: 72px;\n  }\n\n  .navbar__container {\n    padding: 0px 24px;\n    height: 72px;\n\n    & .navbar__container-left {\n      gap: 12px;\n      display: flex;\n\n      & .navbar__container-left-content {\n        display: flex;\n      }\n\n      & .navbar__container-left-logo-default {\n        & svg {\n          width: 72.8px;\n          height: 32px;\n        }\n      }\n    }\n  }\n\n  .navbar__main-container {\n    &.show {\n      height: auto;\n      background-color: inherit;\n      transition: none;\n    }\n  }\n}\n\n@media screen and (min-width: 1200px) {\n  .navbar__wrapper {\n    height: 80px\n  }\n\n  .navbar__container {\n    padding: 0px 32px;\n    height: 80px;\n\n    & .navbar__container-left {\n      & .navbar__container-left-content {\n        justify-content: inherit;\n      }\n    }\n\n    & .navbar__container-right {\n      & .navbar__container-right-content {\n        justify-content: inherit;\n      }\n    }\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  .navbar__wrapper {\n    height: 80px;\n  }\n\n  .navbar__container {\n    padding: 0px 40px;\n    height: 80px;\n\n    & .navbar__container-left {\n      & .navbar__container-left-content {\n        justify-content: center;\n      }\n    }\n\n    & .navbar__container-right {\n      & .navbar__container-right-content {\n        justify-content: inherit;\n      }\n    }\n  }\n}","import { Component, h, Element, State, Prop, Listen, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-navbar',\n  styleUrl: 'navbar.scss',\n  shadow: true,\n})\n\nexport class Navbar {\n  @Element() el;\n  @State() main: boolean = true\n  @State() products: boolean = false\n  @State() applications: boolean = false\n  @State() design: boolean = false\n  @State() support: boolean = false\n  @State() about: boolean = false\n  @Prop() applicationName: string = \"\"\n  @State() hasLeftMenuItems: boolean = true;\n  @Prop() fixed: boolean = true;\n  @Prop() showLogoAndAppname: boolean = true;\n  @State() searchBarIsOpen: string;\n  @Prop() logoHref: string = \"\";\n  @State() internalLogoHref: string = \"\"\n  @Prop() logoHrefTarget: string = '_self';\n  @State() internalLogoHrefTarget: string = '_self';\n  @Event() ifxNavbarMobileMenuIsOpen: EventEmitter;\n\n  private addEventListenersToHandleCustomFocusState() {\n    const element = this.el.shadowRoot.firstChild;\n\n    if (!element) {\n      console.error('element not found');\n      return;\n    }\n    element.tabIndex = -1;\n\n    // Select all a elements in the navbar and set their tabIndex to -1 to make them non-focusable\n    const aElements = element.querySelectorAll('a');\n    for (let i = 0; i < aElements.length; i++) {\n      aElements[i].tabIndex = -1;\n    }\n\n    const slot = element.querySelector('slot');\n    if (slot) {\n      const assignedNodes = slot.assignedNodes();\n      for (let i = 0; i < assignedNodes.length; i++) {\n        const node = assignedNodes[i] as HTMLElement;\n        if (node.nodeName === 'IFX-NAVBAR-ITEM') {\n          const navbarItem = node as HTMLIfxNavbarItemElement;\n\n          // Get all navigation items\n          const aElements = navbarItem?.shadowRoot.querySelectorAll('a');\n          for (let i = 0; i < aElements.length; i++) {\n            aElements[i].tabIndex = -1;\n          }\n        }\n      }\n    }\n  }\n\n  @Listen('ifxNavItem') \n  clearFirstLayerMenu(event: CustomEvent) { \n    if(event.detail.action === 'hideFirstLayer') { \n      const leftMenuItems = this.getMobileMenuTop()\n      for(let i = 0; i < leftMenuItems.length; i++) { \n        if(!leftMenuItems[i].isSameNode(event.detail.component)) {\n          leftMenuItems[i].hideComponent()\n        }\n      }\n    }\n\n    if(event.detail.action === 'hideSecondLayer') { \n      const parent = event.detail.parent;\n      const children = parent.children;\n      parent.toggleFirstLayerItem('remove', 'add')\n      for(let i = 0; i < children.length; i++) { \n        if(!children[i].isSameNode(event.detail.component)) {\n          children[i].hideComponent()\n        }\n      }\n    }\n\n    if(event.detail.action === 'returnToSecondLayer') { \n      const parent = event.detail.parent;\n      const children = parent.children;\n      parent.toggleFirstLayerItem('add', 'remove')\n      for(let i = 0; i < children.length; i++) { \n        if(!children[i].isSameNode(event.detail.component)) {\n          children[i].showComponent()\n        }\n      }\n    }\n\n    if(event.detail.action === 'show') { \n      const leftMenuItems = this.el.querySelectorAll('[slot=\"left-item\"]')\n      for(let i = 0; i < leftMenuItems.length; i++) { \n        if(!leftMenuItems[i].isSameNode(event.detail.component)) {\n          leftMenuItems[i].showComponent()\n        }\n      }\n    }\n\n    if(event.detail.action === 'return') { \n      const leftMenuItems = this.getMobileMenuTop()\n      for(let i = 0; i < leftMenuItems.length; i++) { \n        if(!leftMenuItems[i].isSameNode(event.detail.component)) {\n          leftMenuItems[i].showComponent()\n        }\n      }\n    }\n  }\n\n  getWrappers() {\n    const rightContentNavigationGroup = this.el.shadowRoot.querySelector('.navbar__container-right-content-navigation-group')\n    const searchBarRightWrapper = this.el.shadowRoot.querySelector('.navbar__container-right-content-navigation-item-search-bar-icon-wrapper')\n    const searchBarLeftWrapper = this.el.shadowRoot.querySelector('.navbar__container-left-content-navigation-item-search-bar')\n    const rightSideItemSlot = rightContentNavigationGroup.querySelector('slot[name=\"right-item\"]');\n    const rightSideSlot = searchBarRightWrapper.querySelector('slot');\n    const leftSideSlot = searchBarLeftWrapper.querySelector('slot');\n    const rightAssignedNodes = rightSideSlot.assignedNodes();\n    const leftAssignedNodes = leftSideSlot.assignedNodes();\n    const navbarProfile = this.el.querySelector('ifx-navbar-profile');\n    const leftMenuItems = this.el.querySelectorAll('[slot=\"left-item\"]');\n    const rightMenuItems = this.el.querySelectorAll('[slot=\"right-item\"]');\n    const topRowWrapper = this.el.shadowRoot.querySelector('.navbar__sidebar-top-row-wrapper')\n    \n    return {rightSideItemSlot, rightSideSlot, leftSideSlot, rightAssignedNodes, leftAssignedNodes, navbarProfile, leftMenuItems, rightMenuItems, topRowWrapper};\n  }\n\n  hideNavItems() {\n    const { rightAssignedNodes, leftAssignedNodes, navbarProfile, leftMenuItems, rightMenuItems, topRowWrapper } = this.getWrappers();\n    \n    if(rightAssignedNodes.length !== 0) { \n      this.searchBarIsOpen = 'right'\n    } else if(leftAssignedNodes.length !== 0) {\n      this.searchBarIsOpen = 'left'\n    }\n\n    if(navbarProfile) { \n      navbarProfile.hideComponent()\n    }\n    \n    for(let l = 0; l < leftMenuItems.length; l++) { \n      if(!topRowWrapper.classList.contains('expand')) {\n        leftMenuItems[l].hideComponent()\n      }\n    }\n  \n    for(let r = 0; r < rightMenuItems.length; r++) { \n      if(topRowWrapper.classList.contains('expand')) {\n        if(!rightMenuItems[r].hideOnMobile) { \n          rightMenuItems[r].hideComponent()\n        }\n      } else { \n        rightMenuItems[r].hideComponent()\n      }\n    }\n  }\n\n  showNavItems() {\n    const { navbarProfile, leftMenuItems, rightMenuItems, topRowWrapper } = this.getWrappers();\n    this.searchBarIsOpen = undefined;\n    \n    if(navbarProfile) {\n      navbarProfile.showComponent()\n    }\n    \n    for(let l = 0; l < leftMenuItems.length; l++) { \n      if(!topRowWrapper.classList.contains('expand')) {\n        leftMenuItems[l].showComponent()\n      }\n    }\n  \n    for(let r = 0; r < rightMenuItems.length; r++) { \n      if(topRowWrapper.classList.contains('expand')) {\n        if(!rightMenuItems[r].hideOnMobile) { \n          rightMenuItems[r].showComponent()\n        }\n      } else { \n        rightMenuItems[r].showComponent()\n      }\n    }\n  }\n  \n  \n  @Listen('ifxOpen')\n  handleSearchBarToggle(event: CustomEvent) {\n   \n    if(event.detail) { \n      this.hideNavItems();\n    } else if(!event.detail) {\n      this.showNavItems();\n    }\n  }\n\n  toggleClass(el, className) {\n    el.classList.toggle(className)\n  }\n\n  handleSidebar(el) {\n    const sidebarIconWrapper = el.currentTarget.closest('.navbar__burger-icon-wrapper');\n    const sidebarIconOpen = sidebarIconWrapper.querySelector('.navbar__burger-icon')\n    const sidebarIconClose = sidebarIconWrapper.querySelector('.navbar__cross-icon')\n    const mainContainer = el.currentTarget.closest('.navbar__main-container');\n    const navbarWrapper = el.currentTarget.closest('.navbar__wrapper')\n    const sidebarWrapper = navbarWrapper.querySelector('.navbar__sidebar');\n    this.toggleClass(navbarWrapper, 'show')\n    this.toggleClass(mainContainer, 'show')\n    this.toggleClass(sidebarWrapper, 'show')\n    this.toggleClass(sidebarIconOpen, 'close')\n    this.toggleClass(sidebarIconClose, 'show')\n\n    if(sidebarIconClose.classList.contains('show')) { \n      this.handleBodyScroll('hide')\n    } else { \n      this.handleBodyScroll('show')\n    }\n  }\n\n  handleBodyScroll(action) { \n    const body = this.el.closest('body')\n    if(!this.fixed && action === 'hide') { \n      body.style.overflow = 'hidden'\n    } else if(action === 'show') { \n      body.style.overflow = 'visible'\n    }\n  }\n\n  handleDropdownMenu(el) {\n    const dropdownWrapper = el.currentTarget.querySelector('.navbar__dropdown-wrapper')\n    dropdownWrapper.classList.toggle('open')\n    const iconWrapper = el.currentTarget.querySelector('a')\n    iconWrapper.classList.toggle('open')\n  }\n\n  async setItemMenuPosition() { \n    const navbarItems = this.el.querySelectorAll('ifx-navbar-item')\n    const navbarProfile = this.el.querySelector('ifx-navbar-profile')\n\n    if(navbarProfile) {\n      const itemChildren = navbarProfile.querySelectorAll('ifx-navbar-item')\n      if (itemChildren.length !== 0) {\n        itemChildren.forEach(item => { \n          item.setMenuItemPosition()\n          this.setMenuItemChildrenPosition(item)\n        })\n      }\n    }\n   \n    if(navbarItems.length !== 0) { \n      for(let i = 0; i < navbarItems.length; i++) { \n        const item = navbarItems[i];\n        const itemChildren = item.querySelectorAll('ifx-navbar-item')\n        if (itemChildren.length !== 0) {\n         const hasNestedItems = await item.setItemSideSpecifications()\n         if(hasNestedItems) { \n          itemChildren.forEach(item => { \n            item.setMenuItemPosition()\n            this.setMenuItemChildrenPosition(item)\n          })\n         }\n        }\n      }\n    }\n  }\n\n  setMenuItemChildrenPosition(item) {\n    const itemChildren = item.querySelectorAll('ifx-navbar-item');\n    if (itemChildren.length !== 0) {\n        itemChildren.forEach(subItem => { \n          subItem.setMenuItemPosition()\n          this.setMenuItemChildrenPosition(subItem)\n        })\n    }\n  }\n\n  getMediaQueryList() { \n    const mediaQueryList = window.matchMedia('(max-width: 800px)');\n    return mediaQueryList;\n  }\n\n  componentDidLoad() {\n    this.setItemMenuPosition()\n    this.addEventListenersToHandleCustomFocusState();\n \n    const mediaQueryList = this.getMediaQueryList()\n\n    if (mediaQueryList.matches) {\n      this.moveNavItemsToSidebar();\n    }\n\n  }\n\n  handleMobileMenuBottom(e) { \n    const mobileMenuBottomWrapper = this.el.shadowRoot.querySelector('.navbar__sidebar-bottom-row')\n    const slotElement = e.target;\n    const nodes = slotElement.assignedNodes();\n    if(nodes.length > 0) { \n      mobileMenuBottomWrapper.classList.add('show')\n    } else { \n      mobileMenuBottomWrapper.classList.remove('show')\n    }\n  }\n\n  handleLogoHrefAndTarget(){\n    if(this.logoHref.trim() === \"\") {\n      this.internalLogoHref = undefined;\n    }else{\n      this.internalLogoHref = this.logoHref;\n    }\n\n    if(['_self', '_blank', '_parent'].includes(this.logoHrefTarget.trim())){\n      this.internalLogoHrefTarget = this.logoHrefTarget;\n    }else{\n      this.internalLogoHrefTarget = '_self';\n    }\n  }\n\n \n  componentWillLoad() {\n    this.RemoveSpaceOnStorybookSnippet()\n    const dropdownMenu = this.el.querySelector('ifx-navbar-menu')\n    const leftMenuItems = this.el.querySelectorAll('[slot=\"left-item\"]')\n    if (!leftMenuItems.length && !dropdownMenu) {\n      this.hasLeftMenuItems = false;\n    }\n    this.handleLogoHrefAndTarget();\n\n    const mediaQueryList = window.matchMedia('(max-width: 800px)');\n    mediaQueryList.addEventListener('change', (e) => this.moveNavItemsToSidebar(e));\n  }\n\n \n\n  getSearchBarLeftWrapper() { \n    const searchBarLeftWrapper = this.el.shadowRoot.querySelector('.navbar__container-left-content-navigation-item-search-bar')\n    return searchBarLeftWrapper;\n  }\n\n  getMobileMenuTop() { \n    const leftMenuItems = this.el.querySelectorAll('[slot=\"mobile-menu-top\"]');\n    return leftMenuItems;\n  }\n\n  getMobileMenuBottom() { \n    const rightMenuItems = this.el.querySelectorAll('[slot=\"mobile-menu-bottom\"]');\n    return rightMenuItems;\n  }\n\n  handleBurgerIcon() { \n    const leftMenuItems = this.getMobileMenuTop()\n    const rightMenuItems = this.getMobileMenuBottom()\n    if(!leftMenuItems.length && !rightMenuItems.length) { \n     const burgerIconWrapper = this.el.shadowRoot.querySelector('.navbar__burger-icon-wrapper')\n     this.toggleClass(burgerIconWrapper, 'hide')\n    }\n  }\n  \n  moveNavItemsToSidebar(e?: MediaQueryListEvent) {\n    const topRowWrapper = this.el.shadowRoot.querySelector('.navbar__sidebar-top-row-wrapper')\n    const mediaQueryList = this.getMediaQueryList();\n    const matches = e ? e.matches : mediaQueryList.matches;\n  \n    if (matches) {\n      /* The viewport is 800px wide or less */\n      topRowWrapper.classList.add('expand')\n      \n      //hide body scroll if sidebar was opened\n      const crossIcon = this.el.shadowRoot.querySelector('.navbar__cross-icon')\n      if(crossIcon.classList.contains('show')) { \n        this.handleBodyScroll('hide')\n      }\n      \n      //move search bar to right-side\n      const searchBarLeft = this.el.querySelector('[slot=\"search-bar-left\"]')\n      if(searchBarLeft) { \n        if(this.searchBarIsOpen) { \n          searchBarLeft.onNavbarMobile()\n        }\n        const searchBarLeftWrapper = this.getSearchBarLeftWrapper()\n        searchBarLeftWrapper.classList.add('initial')\n        searchBarLeft.setAttribute('slot', 'search-bar-right')\n      }\n      \n      //left-side\n      const leftMenuItems = this.el.querySelectorAll('[slot=\"left-item\"]')\n      for(let i = 0; i < leftMenuItems.length; i++) { \n        leftMenuItems[i].setAttribute('slot', 'mobile-menu-top')\n        leftMenuItems[i].moveChildComponentsIntoSubLayerMenu()\n        if(this.searchBarIsOpen) { \n          leftMenuItems[i].showComponent()\n        }\n      }\n      \n      //right-side\n      const rightMenuItems = this.el.querySelectorAll('[slot=\"right-item\"]')\n      for(let i = 0; i < rightMenuItems.length; i++) { \n        if(rightMenuItems[i].tagName.toUpperCase() === 'IFX-NAVBAR-PROFILE') { \n          rightMenuItems[i].showLabel = false;\n        } else { \n          if(rightMenuItems[i].hideOnMobile) { \n            rightMenuItems[i].setAttribute('slot', 'mobile-menu-bottom')\n            \n            rightMenuItems[i].toggleChildren('add')\n            \n            rightMenuItems[i].showLabel = true;\n            if(this.searchBarIsOpen) { \n              rightMenuItems[i].showComponent()\n            }\n          }\n        }\n      }\n      \n      this.handleBurgerIcon()\n\n    } else {\n      /* The viewport is more than 800px wide */\n      topRowWrapper.classList.remove('expand')\n\n      //show body scroll \n      this.handleBodyScroll('show')\n\n      //return search bar to its original position\n      const searchBarLeftWrapper = this.getSearchBarLeftWrapper()\n      const leftIsInitial = searchBarLeftWrapper.classList.contains('initial')\n      const searchBarRight = this.el.querySelector('[slot=\"search-bar-right\"]')\n      if(leftIsInitial) { \n        if(this.searchBarIsOpen) { \n          searchBarRight.onNavbarMobile()\n        }\n        if(searchBarRight) { \n          searchBarRight.setAttribute('slot', 'search-bar-left')\n        }\n      }\n\n      //left-side\n      const leftMenuItems = this.getMobileMenuTop()\n      for(let i = 0; i < leftMenuItems.length; i++) { \n        leftMenuItems[i].setAttribute('slot', 'left-item')\n        leftMenuItems[i].moveChildComponentsBackIntoNavbar()\n      }\n\n      //right-side\n      const rightMenuItems = this.getMobileMenuBottom()\n      const navbarProfileItem = this.el.querySelector('ifx-navbar-profile')\n      if(navbarProfileItem) { \n        const showProfileItemLabel = navbarProfileItem.getAttribute('show-label');\n        navbarProfileItem.setAttribute('show-label', showProfileItemLabel)\n      }\n\n      for(let i = 0; i < rightMenuItems.length; i++) { \n        rightMenuItems[i].setAttribute('slot', 'right-item')\n\n          rightMenuItems[i].toggleChildren('remove')\n          \n          const showLabel = rightMenuItems[i].getAttribute('show-label');\n          rightMenuItems[i].setAttribute('show-label', showLabel)\n          if(this.searchBarIsOpen) { \n            rightMenuItems[i].hideComponent()\n          }\n        }\n      }\n    }\n\n  RemoveSpaceOnStorybookSnippet() { \n    let parent = this.el.parentElement;\n    if(parent) { \n      let storybookWrapper = parent.closest('.css-xzp052');\n      if(storybookWrapper) { \n        storybookWrapper.style.overflow = 'visible'\n      }\n    }\n  }\n\n\n  \n  render() {\n    return (\n      <div aria-label='a navigation navbar' class={`navbar__wrapper ${this.fixed ? 'fixed' : \"\"}`}>\n        <div class={`navbar__main-container ${this.fixed ? 'fixed' : \"\"}`}>\n          <div class={`navbar__container ${this.searchBarIsOpen ? \"expanded\" : \"\"}`}>\n            <div class={`navbar__container-left ${this.searchBarIsOpen === 'left' ? \"expand\" : this.searchBarIsOpen === 'right' ? 'hide' : \"\"}`}>\n              {this.showLogoAndAppname &&\n                <div class={`navbar__container-left-logo ${this.searchBarIsOpen === 'left' ? 'hide' : \"\"}`}>\n                  <div class=\"navbar__container-left-logo-default\">\n                    <a href={this.internalLogoHref} target = {this.internalLogoHrefTarget}>\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>\n                    </a>\n                  </div>\n                  {this.applicationName && <h6>{this.applicationName}</h6>}\n                  {this.applicationName && this.hasLeftMenuItems &&\n                    <div class=\"navbar__container-left-logo-divider\"></div>}\n                </div>}\n              <div class=\"navbar__container-left-content\">\n                <div class=\"navbar__container-left-content-navigation-group\">\n                  <slot name='left-item' />\n                  <div class=\"navbar__container-left-content-navigation-item-search-bar\">\n                    <slot name='search-bar-left' />\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class={`navbar__container-right ${this.searchBarIsOpen === 'right' ? \"expand\" : this.searchBarIsOpen === 'left' ? 'hide' : \"\"}`}>\n              <div class=\"navbar__container-right-content\">\n                <div class=\"navbar__container-right-content-navigation-group\">\n                  <div class=\"navbar__container-right-content-navigation-item-search-bar\">\n                  <div class={`navbar__container-right-content-navigation-item-search-bar-icon-wrapper`}>\n                      <slot name='search-bar-right' />\n                    </div>\n                  </div>\n                  <slot name='right-item' />\n                </div>\n              </div>\n\n              {/* MOBILE MENU BUTTON */}\n              <div class={`navbar__burger-icon-wrapper`} onClick={this.handleSidebar.bind(this)}>\n                <div class=\"navbar__burger-icon\">\n                  <ifx-icon icon=\"menu-right-24\"></ifx-icon>\n                </div>\n                <div class=\"navbar__cross-icon\">\n                  <ifx-icon icon=\"cross-24\"></ifx-icon>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {/* SIDEBAR */}\n        <div class=\"navbar__sidebar\">\n          {/* left side ifx-navbar-item  */}\n          <div class=\"navbar__sidebar-top-row\">\n            <div class=\"navbar__sidebar-top-row-wrapper\">\n              <slot name='mobile-menu-top' />\n            </div>\n          </div>\n\n          {/* right side ifx-navbar-item  */}\n          <div class=\"navbar__sidebar-bottom-row\">\n            <slot name='mobile-menu-bottom' onSlotchange={(e) => this.handleMobileMenuBottom(e)} />\n          </div>\n          \n        </div>\n      </div>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as i,c as e,h as t,g as o}from"./p-e6edf72d.js";const s=":host{position:relative;z-index:1000}.dropdown-menu{display:none;visibility:hidden;flex-direction:column;width:224px;max-height:289px;min-width:224px;overflow-y:auto;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)}.dropdown-menu.small{max-height:266px;max-width:186px;overflow-y:auto}.dropdown-menu.hideTopPadding{padding-top:0px}.dropdown-menu.show{display:flex;visibility:visible}";const d=s;const n=class{constructor(t){i(this,t);this.menuSize=e(this,"menuSize",7);this.ifxDropdownMenuItem=e(this,"ifxDropdownMenuItem",7);this.isOpen=false;this.size="l";this.hideTopPadding=false;this.filteredItems=[]}handleMenuFilter(i){const e=i.detail;this.filterDropdownItems(e)}handleDropdownItemValueEmission(i){this.ifxDropdownMenuItem.emit(i.detail)}filterDropdownItems(i){const e=Array.from(this.el.querySelectorAll("ifx-dropdown-item"));let t,o;let s=i.toUpperCase();for(let i=0;i<e.length;i++){t=e[i];o=t.textContent||t.innerText;if(o.toUpperCase().indexOf(s)>-1){t.setAttribute("hide",false)}else{t.setAttribute("hide",true)}}}componentWillUpdate(){this.menuSize.emit(this.size)}componentWillLoad(){this.filteredItems=Array.from(this.el.querySelectorAll("ifx-dropdown-item"));const i=this.el.querySelector("ifx-search-field");const e=this.el.querySelector("ifx-dropdown-header");if(i||e){this.hideTopPadding=true}else this.hideTopPadding=false}render(){return t("div",{key:"547c4475f18600340e579143237073be8e7050ac",class:`dropdown-menu \n      ${this.isOpen?"show":""} \n      ${this.hideTopPadding?"hideTopPadding":""}\n      ${this.size==="s"?"small":""}`},t("slot",{key:"eab87d9be479a0123afb56699a86dcc7114e6fcd"}))}get el(){return o(this)}};n.style=d;export{n as ifx_dropdown_menu};
-//# sourceMappingURL=p-cf96a19e.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["dropdownMenuCss","IfxDropdownMenuStyle0","DropdownMenu","constructor","hostRef","this","isOpen","size","hideTopPadding","filteredItems","handleMenuFilter","event","searchValue","detail","filterDropdownItems","handleDropdownItemValueEmission","ifxDropdownMenuItem","emit","allItems","Array","from","el","querySelectorAll","dropdownItem","txtValue","query","toUpperCase","i","length","textContent","innerText","indexOf","setAttribute","componentWillUpdate","menuSize","componentWillLoad","searchField","querySelector","dropdownHeader","render","h","key","class"],"sources":["src/components/dropdown/dropdown-menu/dropdown-menu.scss?tag=ifx-dropdown-menu&encapsulation=shadow","src/components/dropdown/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  position: relative;\n  z-index: 1000;\n}\n\n.dropdown-menu {\n  display: none;\n  visibility: hidden;\n  flex-direction: column;\n  width: 224px;\n  max-height: 289px;\n  min-width: 224px;\n  overflow-y: auto;\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  &.small {\n    max-height: 266px;\n    max-width: 186px;\n    overflow-y: auto;\n  }\n\n  &.hideTopPadding {\n    padding-top: 0px;\n  }\n}\n\n.dropdown-menu.show {\n  display: flex;\n  visibility: visible;\n}","// dropdown-menu.tsx\nimport { Component, h, Prop, Element, State, Event, EventEmitter, Listen } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-dropdown-menu',\n  styleUrl: 'dropdown-menu.scss',\n  shadow: true\n})\n\nexport class DropdownMenu {\n  @Prop() isOpen: boolean = false;\n  @Prop() size: string = 'l'\n  @State() hideTopPadding: boolean = false;\n  @Element() el;\n\n  @Event() menuSize: EventEmitter;\n  @State() filteredItems: HTMLIfxDropdownItemElement[] = [];\n  @Event() ifxDropdownMenuItem: EventEmitter<CustomEvent>;\n\n  @Listen('ifxInput')\n  handleMenuFilter(event: CustomEvent) {\n    const searchValue = event.detail;\n    this.filterDropdownItems(searchValue)\n  }\n\n  @Listen('ifxDropdownItem')\n  handleDropdownItemValueEmission(event: CustomEvent) {\n    this.ifxDropdownMenuItem.emit(event.detail)\n  }\n\n  filterDropdownItems(searchValue: string) {\n    const allItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item'));\n    let dropdownItem, txtValue;\n    let query = searchValue.toUpperCase()\n\n    for (let i = 0; i < allItems.length; i++) {\n      dropdownItem = allItems[i];\n      txtValue = dropdownItem.textContent || dropdownItem.innerText;\n\n      if (txtValue.toUpperCase().indexOf(query) > -1) {\n        dropdownItem.setAttribute('hide', false)\n      } else {\n        dropdownItem.setAttribute('hide', true)\n      }\n    }\n  }\n\n  componentWillUpdate() {\n    this.menuSize.emit(this.size)\n  }\n\n  componentWillLoad() {\n    this.filteredItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item')) as HTMLIfxDropdownItemElement[];\n    const searchField = this.el.querySelector('ifx-search-field')\n    const dropdownHeader = this.el.querySelector('ifx-dropdown-header')\n\n    if (searchField || dropdownHeader) {\n      this.hideTopPadding = true;\n    } else this.hideTopPadding = false;\n  }\n\n\n  render() {\n    return (\n      <div class={`dropdown-menu \n      ${this.isOpen ? 'show' : ''} \n      ${this.hideTopPadding ? 'hideTopPadding' : \"\"}\n      ${this.size === 's' ? 'small' : \"\"}`\n      } >\n        <slot />\n      </div >\n    );\n  }\n}"],"mappings":"yDAAA,MAAMA,EAAkB,0eACxB,MAAAC,EAAeD,E,MCQFE,EAAY,MANzB,WAAAC,CAAAC,G,sGAOUC,KAAAC,OAAkB,MAClBD,KAAAE,KAAe,IACdF,KAAAG,eAA0B,MAI1BH,KAAAI,cAA8C,E,CAIvD,gBAAAC,CAAiBC,GACf,MAAMC,EAAcD,EAAME,OAC1BR,KAAKS,oBAAoBF,E,CAI3B,+BAAAG,CAAgCJ,GAC9BN,KAAKW,oBAAoBC,KAAKN,EAAME,O,CAGtC,mBAAAC,CAAoBF,GAClB,MAAMM,EAAWC,MAAMC,KAAKf,KAAKgB,GAAGC,iBAAiB,sBACrD,IAAIC,EAAcC,EAClB,IAAIC,EAAQb,EAAYc,cAExB,IAAK,IAAIC,EAAI,EAAGA,EAAIT,EAASU,OAAQD,IAAK,CACxCJ,EAAeL,EAASS,GACxBH,EAAWD,EAAaM,aAAeN,EAAaO,UAEpD,GAAIN,EAASE,cAAcK,QAAQN,IAAU,EAAG,CAC9CF,EAAaS,aAAa,OAAQ,M,KAC7B,CACLT,EAAaS,aAAa,OAAQ,K,GAKxC,mBAAAC,GACE5B,KAAK6B,SAASjB,KAAKZ,KAAKE,K,CAG1B,iBAAA4B,GACE9B,KAAKI,cAAgBU,MAAMC,KAAKf,KAAKgB,GAAGC,iBAAiB,sBACzD,MAAMc,EAAc/B,KAAKgB,GAAGgB,cAAc,oBAC1C,MAAMC,EAAiBjC,KAAKgB,GAAGgB,cAAc,uBAE7C,GAAID,GAAeE,EAAgB,CACjCjC,KAAKG,eAAiB,I,MACjBH,KAAKG,eAAiB,K,CAI/B,MAAA+B,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAO,yBACVrC,KAAKC,OAAS,OAAS,cACvBD,KAAKG,eAAiB,iBAAmB,aACzCH,KAAKE,OAAS,IAAM,QAAU,MAE9BiC,EAAA,QAAAC,IAAA,6C","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as r,g as i}from"./p-e6edf72d.js";const o=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert__info-wrapper .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.success{border:1px solid #4CA460}.alert.success .icon-wrapper{background-color:#4CA460;color:#FFFFFF}.alert.danger{border:1px solid #CD002F}.alert.danger .icon-wrapper{background-color:#CD002F;color:#FFFFFF}.alert.warning{border:1px solid #E16B25}.alert.warning .icon-wrapper{background-color:#E16B25;color:#FFFFFF}.close-icon-wrapper ifx-icon:hover{cursor:pointer}';const a=o;const s=class{constructor(r){e(this,r);this.ifxClose=t(this,"ifxClose",7);this.variant="primary";this.closable=true;this.AriaLive="assertive";this.alertTypeDescription={primary:"Neutral alert",success:"Success Alert",danger:"Error Alert",warning:"Warning Alert",info:"Neutral alert"}}handleClose(){this.ifxClose.emit()}renderCloseButton(){return r("div",{class:"close-icon-wrapper"},r("button",{onClick:this.handleClose.bind(this),"aria-label":"Dismiss alert"},r("ifx-icon",{icon:"cross-16"})))}generateUniqueId(e="id"){return`${e}-${Math.random().toString(36).substring(2,9)}`}componentWillLoad(){if(!this.uniqueId){this.uniqueId=this.generateUniqueId("alert")}}render(){return this.variant==="info"?r("div",{class:"alert__info-wrapper",role:"alert","aria-live":this.AriaLive,"aria-describedby":this.alertTypeDescription[this.variant],"aria-labelledby":"alert-text alert-description"},r("div",{class:"info__text-wrapper"},r("div",{class:"info__headline-wrapper"},r("slot",{name:"headline"})),r("div",{id:`alert-description-${this.uniqueId}`,class:"info__description-wrapper"},r("slot",{name:"desc"}))),this.closable?this.renderCloseButton():null):r("div",{class:`alert ${this.variant}`,role:"alert"},this.icon&&r("div",{class:"icon-wrapper"},r("ifx-icon",{icon:this.icon})),r("div",{class:"alert-text",id:`alert-text-${this.uniqueId}`},r("slot",null)),this.closable?this.renderCloseButton():null)}};s.style=a;const l=".react__template-wrapper{display:flex;width:300px;height:200px;border-radius:3px;border:1px solid #ccc}.react__template-wrapper.hide{display:none}.react__template-wrapper:hover{cursor:pointer}.template__page-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.template__page-wrapper .repository__url{text-decoration:none}.input__fields-wrapper{display:flex;flex-direction:column;gap:10px}.details__wrapper{display:flex;flex-direction:column;gap:10px}.selection__buttons-wrapper{display:flex;gap:10px;padding-top:10px;align-items:center}.selection__buttons-wrapper .vue__label{color:#ccc}.selection__buttons-wrapper label:not(.vue__label):hover{cursor:pointer}.selection__buttons-wrapper .selection__input{display:flex;align-items:center;gap:5px}.selection__buttons-wrapper .selection__input input{margin:0;height:20px;width:20px}.selection__buttons-wrapper .selection__input input:hover:not(.vue__input){cursor:pointer}.image__wrapper img{position:relative;width:300px;height:100%;border-radius:3px;object-fit:contain;transition:transform 0.2s}.image__wrapper img:hover{transform:scale(2);top:50px;z-index:100}";const n=l;const p=class{constructor(r){e(this,r);this.toggleTemplates=t(this,"toggleTemplates",7);this.fieldError=t(this,"fieldError",7);this.repoDetails={name:"",desc:"",framework:""};this.showDetails=false;this.isTemplatePage=false;this.isLoading=true;this.clientId="Ov23lixmXiNTTNb6V5W6";this.redirectUri="https://infineon.github.io/infineon-design-system-stencil/?path=/docs/dds-templates--development";this.scope="repo workflow";this.state="template123"}authUser(){const e=`https://github.com/login/oauth/authorize?`+`client_id=${this.clientId}&`+`redirect_uri=${this.redirectUri}&`+`scope=${this.scope}&`+`state=${this.state}`;window.open(e,"_blank")}componentDidLoad(){const e=new URL(window.location.href);const t=e.searchParams.get("code");const{templateName:r}=this.getLocalStorageValues();if(t&&this.name===r){this.isTemplatePage=true;this.toggleTemplates.emit("details");this.getUserToken(t)}}getLocalStorageValues(){const e=localStorage.getItem("repo_name");const t=localStorage.getItem("repo_desc");const r=localStorage.getItem("repo_framework");const i=localStorage.getItem("selectedTemplate");return{repoName:e,repoDesc:t,repoFramework:r,templateName:i}}async getUserToken(e){const{repoName:t,repoDesc:r,repoFramework:i,templateName:o}=this.getLocalStorageValues();fetch(`https://ddstemplate-srv.cfapps.eu10-004.hana.ondemand.com/token/${e}/${t}/${r}/${i}/${o}`).then((e=>{if(e.ok){return e.text()}else{return e.text().then((e=>{throw new Error(e)}))}})).then((e=>{if(e){this.isLoading=false;this.repoUrl=e;localStorage.clear()}})).catch((e=>{this.repoError=e.message;console.error("Error:",e.message)}))}handleUserInput(e,t){if(t==="name"){this.repoDetails=Object.assign(Object.assign({},this.repoDetails),{name:e.target.value})}else if(t==="desc"){this.repoDetails=Object.assign(Object.assign({},this.repoDetails),{desc:e.target.value})}else if(t==="framework"){this.repoDetails=Object.assign(Object.assign({},this.repoDetails),{framework:e.target.value})}}submitUserData(){if(this.repoDetails.name&&this.repoDetails.desc&&this.repoDetails.framework){localStorage.setItem("repo_name",this.repoDetails.name);localStorage.setItem("repo_desc",this.repoDetails.desc);localStorage.setItem("repo_framework",this.repoDetails.framework);localStorage.setItem("selectedTemplate",this.name);this.fieldError.emit(false);this.authUser()}else{this.fieldError.emit("All fields are mandatory")}}togglePadding(e){let t=this.el.parentElement;if(t){const r=t.getRootNode();if(r instanceof ShadowRoot){t=r.host.parentElement}else{t=t.parentElement}if(e==="remove"){t.parentElement.style.padding="0px"}else if(e==="add"){t.parentElement.style.padding="4rem 20px"}}}handleCurrentTemplate(e){if(e&&!this.showDetails){this.togglePadding("remove");const t=e.currentTarget;this.toggleTemplates.emit(t);this.showDetails=true}}async toggleTemplate(e){const t=this.el.shadowRoot.querySelector(".react__template-wrapper");if(t){if(!t.classList.contains("hide")&&e){if(t!==e){t.classList.add("hide")}}else{if(this.showDetails){this.showDetails=false}this.togglePadding("add");t.classList.remove("hide")}}}render(){return r("div",{key:"5473617d1760579d37fcc11214352c8f7f80450c"},this.isTemplatePage?r("div",{class:"template__page-wrapper"},!this.repoUrl&&!this.repoError&&r("div",null,r("h3",null,"Your repository is getting ready.."),r("p",null,"This will only take a minute.")),this.isLoading&&!this.repoError&&r("div",null,r("ifx-spinner",{variant:"default",size:"s"})),this.repoUrl&&r("ifx-link",{href:this.repoUrl,target:"_parent",size:"m",variant:"underlined"},"Your repository"),this.repoError&&r("div",null,this.repoError)):r("div",{class:"react__template-container"},r("div",{class:"react__template-wrapper",onClick:e=>this.handleCurrentTemplate(e)},r("div",{class:"image__wrapper"},r("img",{src:this.thumbnail}))),this.showDetails&&r("div",{class:"details__wrapper"},r("div",{class:"selection__buttons-wrapper"},r("div",{class:"selection__input"},r("input",{type:"radio",id:"react",name:"chosen_framework",value:"react",onInput:e=>this.handleUserInput(e,"framework")}),r("label",{htmlFor:"react"},"React")),r("div",{class:"selection__input vue"},r("input",{class:"vue__input",disabled:true,type:"radio",id:"vue",name:"chosen_framework",value:"vue",onInput:e=>this.handleUserInput(e,"framework")}),r("label",{class:"vue__label",htmlFor:"vue"},"Vue")," (Soon)")),r("div",{class:"input__fields-wrapper"},r("ifx-text-field",{required:true,onInput:e=>this.handleUserInput(e,"name"),size:"m",icon:"c-info-16",placeholder:"Your repository name"},"Repository Name"),r("ifx-text-field",{required:true,size:"m",icon:"c-info-16",onInput:e=>this.handleUserInput(e,"desc"),placeholder:"Your repository description"},"Repository Description"),r("ifx-button",{fullWidth:true,onClick:()=>this.submitUserData(),variant:"primary"},"Generate template")))))}get el(){return i(this)}};p.style=n;export{s as ifx_alert,p as ifx_template};
-//# sourceMappingURL=p-d097a48f.entry.js.map