@infineon/infineon-design-system-stencil 30.1.1--canary.1496.ada7ab553a087bc3fb372b950494343ccb1df41e.0 → 30.1.1--canary.1640.e4770f238d16196b9059daf4898d2d6ef7cdcbdd.0

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

@@ -1 +0,0 @@
-{"version":3,"names":["spinnerCss","IfxSpinnerStyle0","Spinner","render","h","key","class","this","getClassNames","variant","inverted","getSizeClass","width","height","viewBox","fill","xmlns","id","d","size","classNames","textFieldCss","IfxTextFieldStyle0","TextField","valueWatcher","newValue","inputElement","value","reset","handleDeleteContent","ifxInput","emit","handleInput","query","internals","setFormValue","formResetCallback","setValidity","disabled","htmlFor","optional","required","error","icon","ref","el","type","onInput","placeholder","maxlength","success","showDeleteIcon","onClick","caption"],"sources":["src/components/spinner/spinner.scss?tag=ifx-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx","src/components/text-field/text-field.scss?tag=ifx-text-field&encapsulation=shadow","src/components/text-field/text-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: inline-block;\n\n}\n\n.spinner {\n  position: relative;\n  width: tokens.$ifxSize500;\n  height: tokens.$ifxSize500;\n\n}\n\n.spinner.s {\n  width: tokens.$ifxSize300;\n  height: tokens.$ifxSize300;\n}\n\n.border {\n  box-sizing: border-box;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 4px solid transparent;\n  border-top-color: tokens.$ifxColorOcean500;\n  border-left-color: tokens.$ifxColorOcean500;\n  border-right-color: tokens.$ifxColorOcean500;\n  border-top-left-radius: 1px;\n  border-top-right-radius: 1px;\n  border-radius: 50%;\n  animation: spin 2s linear infinite;\n\n  &.inverted {\n    border-top-color: tokens.$ifxColorBaseWhite;\n    border-left-color: tokens.$ifxColorBaseWhite;\n    border-right-color: tokens.$ifxColorBaseWhite;\n  }\n}\n\n.semiconductor {\n  width: 100%;\n  height: 100%;\n  animation: spin 2s linear infinite;\n\n  & svg {\n    fill: tokens.$ifxColorOcean500;\n  }\n\n  &.inverted {\n    & svg {\n      fill: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.s {\n    & svg {\n      width: tokens.$ifxSize300;\n      height: tokens.$ifxSize300;\n    }\n  }\n}\n\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}","import { Component, h, Prop } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n@Component({\n  tag: 'ifx-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner {\n  @Prop() size: string;\n  @Prop() variant: string;\n  @Prop() inverted: boolean = false;\n\n\n  render() {\n    return (\n      <div aria-label=\"spinner indicating a loading process\" class={this.getClassNames()}>\n        <div class={`${this.variant !== 'brand' ? 'border' : \"\"} ${this.inverted ? 'inverted' : \"\"}`}></div>\n        {this.variant === 'brand'\n          && <div class={`semiconductor ${this.inverted ? 'inverted' : \"\"} ${this.getSizeClass()}`}>\n            <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <g id=\"spinner/conductor\">\n                <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" />\n              </g>\n            </svg>\n          </div>}\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"s\"\n      : \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'spinner',\n      this.size && `spinner ${this.getSizeClass()}`\n    );\n  }\n}\n","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.textInput__container {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 0px;\n  width: 100%;\n  flex: none;\n  order: 0;\n  align-self: stretch;\n  flex-grow: 0;\n  font-family: var(--ifx-font-family);\n\n\n  &.disabled {\n    & .textInput__top-wrapper {\n      & label {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    & .textInput__bottom-wrapper {\n      input {\n        border: 1px solid tokens.$ifxColorEngineering500;\n        background-color: tokens.$ifxColorEngineering200;\n\n        &::placeholder {\n          font-size: tokens.$ifxFontSizeS;\n          color: tokens.$ifxColorEngineering500;\n        }\n      }\n    }\n  }\n\n  & .textInput__top-wrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    padding: 0px;\n    gap: 4px;\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 0;\n\n    & label {\n      font-style: normal;\n      font-weight: 400;\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n      display: flex;\n      align-items: center;\n      color: tokens.$ifxColorBaseBlack;\n      flex: none;\n      order: 0;\n      flex-grow: 0;\n\n      & .optional-required {\n        margin-left: 4px;\n      }\n\n      & .optional {\n        margin-left: 4px;\n      }\n\n      & .required {\n        margin-left: 4px;\n        \n        &.error {\n          color: #CD002F;\n        }\n      }\n    }\n  }\n\n  .input-container {\n    position: relative;\n    display: flex;\n    align-items: center;\n    width: 100%;\n  }\n\n\n  & .textInput__bottom-wrapper {\n    flex-grow: 1;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 0px;\n    gap: 4px;\n    flex: none;\n    order: 1;\n    align-self: stretch;\n    flex-grow: 0;\n\n    & input {\n      width: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n      gap: tokens.$ifxSpace100;\n      height: tokens.$ifxSize500;\n      background-color: tokens.$ifxColorBaseWhite;\n      color: tokens.$ifxColorBaseBlack;\n      font-family: tokens.$ifxFontFamilyBody;\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n      border: 1px solid tokens.$ifxColorEngineering400;\n      border-radius: tokens.$ifxBorderRadius12;\n      flex: none;\n      order: 0;\n      align-self: stretch;\n      flex-grow: 0;\n      text-overflow: ellipsis;\n\n      &.input-s {\n        height: tokens.$ifxSize450;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n\n        &::placeholder {\n          font-size: tokens.$ifxFontSizeS;\n          line-height: tokens.$ifxLineHeightS;\n        }\n\n      }\n\n      &.icon {\n        padding-left: tokens.$ifxSpace500;\n      }\n\n      &.error {\n        border: 1px solid #CD002F;\n\n        &:focus {\n          outline: none;\n        }\n      }\n\n      &.success {\n        border: 1px solid #4CA460;\n\n        &:focus {\n          outline: none;\n        }\n      }\n\n\n      &:focus:not(.error, .success) {\n        outline: none;\n        border: 1px solid tokens.$ifxColorOcean500;\n      }\n\n      &:hover:not(:disabled, :focus, .error, .success) {\n        border: 1px solid tokens.$ifxColorEngineering500;\n      }\n\n      &::placeholder {\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeM;\n        line-height: tokens.$ifxLineHeightM;\n        color: #8D8786;\n        flex: none;\n        order: 1;\n        flex-grow: 1;\n      }\n    }\n\n    & .input-icon {\n      // Position the icon within the icon container\n      // Adjust the positioning as needed\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      left: tokens.$ifxSpace200;\n      /* Adjust this value to control the icon's left offset */\n      transition: .3s;\n      color: tokens.$ifxColorEngineering400;\n    }\n\n    & .textInput__bottom-wrapper-caption {\n      font-style: normal;\n      font-weight: 400;\n      font-size: tokens.$ifxFontSizeXs;\n      line-height: tokens.$ifxLineHeightXs;\n      letter-spacing: 0.2px;\n      color: tokens.$ifxColorBaseBlack;\n      flex: none;\n      order: 1;\n      align-self: stretch;\n      flex-grow: 0;\n\n      &.error {\n        color: #CD002F;\n\n      }\n\n      &.disabled {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    \n  }\n  .delete-icon {\n    position: absolute;\n    right: tokens.$ifxSpace200;\n\n    :hover {\n      cursor: pointer;\n    }\n  }\n}","import { Component, h, Event, Element, Prop, EventEmitter, Watch, Method, AttachInternals } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-text-field',\n  styleUrl: 'text-field.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class TextField {\n  private inputElement: HTMLInputElement;\n  @Element() el;\n  @Prop() placeholder: string = \"Placeholder\"\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() error: boolean = false;\n  @Prop() label: string = \"\";\n  @Prop() icon: string = \"\";\n  @Prop() caption: string = \"\";\n  @Prop() size: string = 'm';\n  @Prop() required: boolean = false;\n  @Prop() optional: boolean = false;\n  @Prop() success: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() maxlength?: number;\n  @Prop() showDeleteIcon: boolean = false;\n  @Event() ifxInput: EventEmitter<String>;\n  // @Prop({ reflect: true })\n  // resetOnSubmit: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n  @Method()\n  async reset() {\n    this.value = '';\n    this.inputElement.value = '';\n  }\n\n  handleDeleteContent() {\n    this.reset();\n    this.ifxInput.emit(this.value);\n  }\n\n  handleInput() {\n    const query = this.inputElement.value;\n    this.value = query; // update the value property when input changes\n    this.internals.setFormValue(query) // update form value\n    this.ifxInput.emit(this.value);\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({});\n    this.internals.setFormValue(\"\");\n  }\n\n  render() {\n    return (\n      <div aria-label=\"a text field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`textInput__container ${this.disabled ? 'disabled' : \"\"}`}>\n        <div class=\"textInput__top-wrapper\">\n          <label htmlFor=\"text-field\">\n            <slot></slot>\n            {this.optional && this.required ? (\n              <span class=\"optional-required\">(optional) *</span>\n            ) : this.optional ? (\n              <span class=\"optional\">(optional)</span>\n            ) : this.required ? (\n              <span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\n            ) : null}\n          </label>\n        </div>\n\n        <div class=\"textInput__bottom-wrapper\">\n          <div class=\"input-container\">\n            {this.icon && (\n              <ifx-icon class='input-icon' icon={this.icon} />\n            )}\n            <input\n              ref={(el) => (this.inputElement = el)}\n              disabled={this.disabled}\n              type=\"text\"\n              id='text-field'\n              value={this.value}\n              onInput={() => this.handleInput()}\n              placeholder={this.placeholder}\n              maxlength={this.maxlength}\n              class={\n                `${this.icon ? 'icon' : \"\"}\n                ${this.error ? 'error' : \"\"} \n              ${this.size === \"s\" ? \"input-s\" : \"\"}\n              ${this.success ? \"success\" : \"\"}`} />\n\n              { (this.showDeleteIcon && this.value) && (\n                <ifx-icon class=\"delete-icon\" icon=\"cremove16\" onClick={() => this.handleDeleteContent()}></ifx-icon> \n              )}\n          </div>\n          {this.caption && !this.error &&\n            <div class={`textInput__bottom-wrapper-caption ${this.disabled} ? disabled : \"\"`}>\n              {this.caption}\n            </div>}\n          {this.error &&\n            <div class=\"textInput__bottom-wrapper-caption error\">\n              {this.caption}\n            </div>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAa,ovBACnB,MAAAC,EAAeD,E,MCQFE,EAAO,M,kFAGU,K,CAG5B,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,uCAAuCC,MAAOC,KAAKC,iBACjEJ,EAAA,OAAAC,IAAA,2CAAKC,MAAO,GAAGC,KAAKE,UAAY,QAAU,SAAW,MAAMF,KAAKG,SAAW,WAAa,OACvFH,KAAKE,UAAY,SACbL,EAAA,OAAAC,IAAA,2CAAKC,MAAO,iBAAiBC,KAAKG,SAAW,WAAa,MAAMH,KAAKI,kBACtEP,EAAA,OAAAC,IAAA,2CAAKO,MAAM,KAAKC,OAAO,KAAKC,QAAQ,YAAYC,KAAK,OAAOC,MAAM,8BAChEZ,EAAA,KAAAC,IAAA,2CAAGY,GAAG,qBACJb,EAAA,QAAAC,IAAA,2CAAMY,GAAG,SAASC,EAAE,4vC,CAQlC,YAAAP,GACE,MAAO,GAAGJ,KAAKY,SAAW,IACtB,IACA,E,CAGN,aAAAX,GACE,OAAOY,EACL,UACAb,KAAKY,MAAQ,WAAWZ,KAAKI,iB,aCxCnC,MAAMU,EAAe,8rHACrB,MAAAC,EAAeD,E,MCSFE,EAAS,M,6OAGU,c,WACW,G,WAChB,M,WACD,G,UACD,G,aACG,G,UACH,I,cACK,M,cACA,M,aACD,M,cACC,M,6CAEM,K,CASlC,YAAAC,CAAaC,GACX,GAAIA,IAAalB,KAAKmB,aAAaC,MAAO,CACxCpB,KAAKmB,aAAaC,MAAQF,C,EAK9B,WAAMG,GACJrB,KAAKoB,MAAQ,GACbpB,KAAKmB,aAAaC,MAAQ,E,CAG5B,mBAAAE,GACEtB,KAAKqB,QACLrB,KAAKuB,SAASC,KAAKxB,KAAKoB,M,CAG1B,WAAAK,GACE,MAAMC,EAAQ1B,KAAKmB,aAAaC,MAChCpB,KAAKoB,MAAQM,EACb1B,KAAK2B,UAAUC,aAAaF,GAC5B1B,KAAKuB,SAASC,KAAKxB,KAAKoB,M,CAG1B,iBAAAS,GACE7B,KAAK2B,UAAUG,YAAY,IAC3B9B,KAAK2B,UAAUC,aAAa,G,CAG9B,MAAAhC,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,8BAA6B,aAAaE,KAAKoB,MAAK,gBAAiBpB,KAAK+B,SAAUhC,MAAO,wBAAwBC,KAAK+B,SAAW,WAAa,MAC9JlC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,0BACTF,EAAA,SAAAC,IAAA,2CAAOkC,QAAQ,cACbnC,EAAA,QAAAC,IAAA,6CACCE,KAAKiC,UAAYjC,KAAKkC,SACrBrC,EAAA,QAAME,MAAM,qBAAmB,gBAC7BC,KAAKiC,SACPpC,EAAA,QAAME,MAAM,YAAU,cACpBC,KAAKkC,SACPrC,EAAA,QAAME,MAAO,YAAYC,KAAKmC,MAAQ,QAAU,MAAI,KAClD,OAIRtC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,6BACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mBACRC,KAAKoC,MACJvC,EAAA,YAAAC,IAAA,2CAAUC,MAAM,aAAaqC,KAAMpC,KAAKoC,OAE1CvC,EAAA,SAAAC,IAAA,2CACEuC,IAAMC,GAAQtC,KAAKmB,aAAemB,EAClCP,SAAU/B,KAAK+B,SACfQ,KAAK,OACL7B,GAAG,aACHU,MAAOpB,KAAKoB,MACZoB,QAAS,IAAMxC,KAAKyB,cACpBgB,YAAazC,KAAKyC,YAClBC,UAAW1C,KAAK0C,UAChB3C,MACE,GAAGC,KAAKoC,KAAO,OAAS,uBACtBpC,KAAKmC,MAAQ,QAAU,sBACzBnC,KAAKY,OAAS,IAAM,UAAY,qBAChCZ,KAAK2C,QAAU,UAAY,OAE1B3C,KAAK4C,gBAAkB5C,KAAKoB,OAC7BvB,EAAA,YAAAC,IAAA,2CAAUC,MAAM,cAAcqC,KAAK,YAAYS,QAAS,IAAM7C,KAAKsB,yBAGxEtB,KAAK8C,UAAY9C,KAAKmC,OACrBtC,EAAA,OAAAC,IAAA,2CAAKC,MAAO,qCAAqCC,KAAK+B,4BACnD/B,KAAK8C,SAET9C,KAAKmC,OACJtC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,2CACRC,KAAK8C,U","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as t,h as s,g as e}from"./p-7aa4082c.js";const r=":host{display:block}";const a=r;const i=class{constructor(s){t(this,s);this.header=undefined;this.disabled=undefined;this.icon="";this.iconPosition="left"}render(){return s("slot",{key:"58ea0a29eec7165f8d5d4627f00f2163916ed69a"})}get el(){return e(this)}};i.style=a;export{i as ifx_tab};
-//# sourceMappingURL=p-3419fe00.entry.js.map

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

@@ -1,2 +0,0 @@
-import{r as a,c as e,h as i,g as s}from"./p-7aa4082c.js";const r=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{width:100%;display:flex}.search-bar{box-sizing:border-box;height:40px;background-color:#FFFFFF;display:flex;flex-direction:row;align-items:center;width:100%;font-family:var(--ifx-font-family)}.search-bar.closed{display:flex;width:auto;justify-content:flex-start}.search-bar .search-bar-wrapper{display:flex;align-items:center;gap:16px;width:100%}.search-bar .search-bar-wrapper a{text-decoration:none;font-size:1rem;font-style:normal;font-weight:600;line-height:1.5rem;color:#0A8276;cursor:pointer}.search-bar .search-bar-wrapper ifx-search-field{width:100%}.search-bar .search-bar__icon-wrapper{display:none;flex-direction:row;align-items:center}.search-bar .search-bar__icon-wrapper ifx-icon:hover{cursor:pointer}.search-bar.closed .search-bar__icon-wrapper{display:flex}.search-bar.closed .search-bar-wrapper{display:none}';const t=r;const h=class{constructor(i){a(this,i);this.ifxInput=e(this,"ifxInput",7);this.ifxSearchBarIsOpen=e(this,"ifxSearchBarIsOpen",7);this.handleCloseButton=()=>{this.internalState=!this.internalState;this.ifxSearchBarIsOpen.emit(this.internalState)};this.handleFocus=()=>{this.internalState=true};this.isOpen=true;this.disabled=false;this.internalState=undefined;this.value=undefined;this.maxlength=undefined}async onNavbarMobile(){this.ifxSearchBarIsOpen.emit(false);this.internalState=false}handlePropChange(){this.internalState=this.isOpen}setInitialState(){this.internalState=this.isOpen}componentWillLoad(){this.setInitialState();this.ifxSearchBarIsOpen.emit(this.internalState)}handleInput(a){this.value=a.detail}render(){return i("div",{key:"06b4122a9df300f357050cd6b70cace1d2cfc4bd","aria-label":"a search bar","aria-disabled":this.disabled,class:`search-bar ${this.internalState?"open":"closed"}`},this.internalState?i("div",{class:"search-bar-wrapper"},i("ifx-search-field",{disabled:this.disabled,value:this.value,maxlength:this.maxlength,onIfxInput:this.handleInput.bind(this)},i("ifx-icon",{icon:"search-16",slot:"search-icon"})),i("a",{tabindex:"-1",href:"javascript:void(0)",onClick:this.handleCloseButton},"Close")):i("div",{class:"search-bar__icon-wrapper",onClick:this.handleCloseButton},i("ifx-icon",{icon:"search-16"})))}get el(){return s(this)}static get watchers(){return{isOpen:["handlePropChange"]}}};h.style=t;export{h as ifx_search_bar};
-//# sourceMappingURL=p-6c3947ee.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["searchBarCss","IfxSearchBarStyle0","SearchBar","this","handleCloseButton","internalState","ifxSearchBarIsOpen","emit","handleFocus","onNavbarMobile","handlePropChange","isOpen","setInitialState","componentWillLoad","handleInput","event","value","detail","render","h","key","disabled","class","maxlength","onIfxInput","bind","icon","slot","tabindex","href","onClick"],"sources":["src/components/search-bar/search-bar.scss?tag=ifx-search-bar&encapsulation=shadow","src/components/search-bar/search-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  width: 100%; //revert\n  display: flex;\n}\n\n.search-bar {\n  box-sizing: border-box;\n  height: tokens.$ifxSize500;\n  background-color: tokens.$ifxColorBaseWhite;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n  font-family: var(--ifx-font-family);\n\n  &.closed {\n    display: flex;\n    width: auto;\n    justify-content: flex-start;\n  }\n\n  & .search-bar-wrapper {\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace200;\n    width: 100%;\n\n    & a {\n      text-decoration: none;\n      font-size: tokens.$ifxFontSizeM;\n      font-style: normal;\n      font-weight: tokens.$ifxFontWeightSemibold;\n      line-height: tokens.$ifxLineHeightM;\n      color: tokens.$ifxColorOcean500;\n      cursor: pointer;\n    }\n\n    & ifx-search-field {\n      width: 100%;\n    }\n  }\n\n  .search-bar__icon-wrapper {\n    display: none;\n    flex-direction: row;\n    align-items: center;\n\n    & ifx-icon:hover {\n      cursor: pointer;\n    }\n  }\n\n  &.closed {\n    .search-bar__icon-wrapper {\n      display: flex;\n    }\n\n    .search-bar-wrapper {\n      display: none;\n    }\n  }\n}","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-search-bar',\n  styleUrl: 'search-bar.scss',\n  shadow: true,\n})\nexport class SearchBar {\n  @Prop() isOpen: boolean = true;\n  @Prop() disabled: boolean = false;\n  @State() internalState: boolean;\n  @Prop({ mutable: true }) value: string;\n  @Prop() maxlength?: number;\n  @Event() ifxInput: EventEmitter;\n  @Event() ifxSearchBarIsOpen: EventEmitter;\n  @Element() el;\n\n  @Method()\n  async onNavbarMobile() {\n    this.ifxSearchBarIsOpen.emit(false)\n    this.internalState = false;\n  }\n\n  @Watch('isOpen')\n  handlePropChange() {\n    this.internalState = this.isOpen;\n  }\n\n  handleCloseButton = () => {\n    this.internalState = !this.internalState;\n    this.ifxSearchBarIsOpen.emit(this.internalState)\n  }\n\n  setInitialState() {\n    this.internalState = this.isOpen;\n  }\n\n  \n\n  componentWillLoad() {\n    this.setInitialState();\n    this.ifxSearchBarIsOpen.emit(this.internalState)\n  }\n\n\n  handleInput(event: CustomEvent) {\n    this.value = event.detail;\n  }\n\n  handleFocus = () => {\n    this.internalState = true;\n  }\n\n\n  render() {\n    return (\n      <div aria-label='a search bar' aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\n        {this.internalState ? (\n          <div class=\"search-bar-wrapper\">\n            <ifx-search-field disabled={this.disabled} value={this.value} maxlength={this.maxlength} onIfxInput={this.handleInput.bind(this)}>\n              <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\n            </ifx-search-field>\n\n            <a tabindex=\"-1\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\n          </div>\n        ) : (\n          <div class=\"search-bar__icon-wrapper\" onClick={this.handleCloseButton}>\n            <ifx-icon icon=\"search-16\"></ifx-icon>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAe,y5BACrB,MAAAC,EAAeD,E,MCOFE,EAAS,M,mHAqBpBC,KAAAC,kBAAoB,KAClBD,KAAKE,eAAiBF,KAAKE,cAC3BF,KAAKG,mBAAmBC,KAAKJ,KAAKE,cAAc,EAmBlDF,KAAAK,YAAc,KACZL,KAAKE,cAAgB,IAAI,E,YA1CD,K,cACE,M,2EAS5B,oBAAMI,GACJN,KAAKG,mBAAmBC,KAAK,OAC7BJ,KAAKE,cAAgB,K,CAIvB,gBAAAK,GACEP,KAAKE,cAAgBF,KAAKQ,M,CAQ5B,eAAAC,GACET,KAAKE,cAAgBF,KAAKQ,M,CAK5B,iBAAAE,GACEV,KAAKS,kBACLT,KAAKG,mBAAmBC,KAAKJ,KAAKE,c,CAIpC,WAAAS,CAAYC,GACVZ,KAAKa,MAAQD,EAAME,M,CAQrB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,eAAc,gBAAgBjB,KAAKkB,SAAUC,MAAO,cAAcnB,KAAKE,cAAgB,OAAS,YAC7GF,KAAKE,cACJc,EAAA,OAAKG,MAAM,sBACTH,EAAA,oBAAkBE,SAAUlB,KAAKkB,SAAUL,MAAOb,KAAKa,MAAOO,UAAWpB,KAAKoB,UAAWC,WAAYrB,KAAKW,YAAYW,KAAKtB,OACzHgB,EAAA,YAAUO,KAAK,YAAYC,KAAK,iBAGlCR,EAAA,KAAGS,SAAS,KAAKC,KAAK,qBAAqBC,QAAS3B,KAAKC,mBAAiB,UAG5Ee,EAAA,OAAKG,MAAM,2BAA2BQ,QAAS3B,KAAKC,mBAClDe,EAAA,YAAUO,KAAK,e","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-7aa4082c.js

@@ -1,3 +0,0 @@
-const e="infineon-design-system-stencil";const t={allRenderFn:true,appendChildSlotFix:false,asyncLoading:true,asyncQueue:false,attachStyles:true,cloneNodeFix:true,cmpDidLoad:true,cmpDidRender:true,cmpDidUnload:false,cmpDidUpdate:true,cmpShouldUpdate:false,cmpWillLoad:true,cmpWillRender:true,cmpWillUpdate:true,connectedCallback:true,constructableCSS:true,cssAnnotations:true,devTools:false,disconnectedCallback:true,element:false,event:true,experimentalScopedSlotChanges:false,experimentalSlotFixes:false,formAssociated:true,hasRenderFn:true,hostListener:true,hostListenerTarget:true,hostListenerTargetBody:true,hostListenerTargetDocument:true,hostListenerTargetParent:false,hostListenerTargetWindow:true,hotModuleReplacement:false,hydrateClientSide:false,hydrateServerSide:false,hydratedAttribute:false,hydratedClass:true,hydratedSelectorName:"hydrated",initializeNextTick:false,invisiblePrehydration:true,isDebug:false,isDev:false,isTesting:false,lazyLoad:true,lifecycle:true,lifecycleDOMEvents:false,member:true,method:true,mode:false,observeAttribute:true,profile:false,prop:true,propBoolean:true,propMutable:true,propNumber:true,propString:true,reflect:true,scoped:false,scopedSlotTextContentFix:false,scriptDataOpts:false,shadowDelegatesFocus:true,shadowDom:true,slot:true,slotChildNodesFix:false,slotRelocation:true,state:true,style:true,svg:true,taskQueue:true,transformTagName:false,updatable:true,vdomAttribute:true,vdomClass:true,vdomFunctional:false,vdomKey:true,vdomListener:true,vdomPropOrAttr:true,vdomRef:true,vdomRender:true,vdomStyle:true,vdomText:true,vdomXlink:true,watchCallback:true};var r=Object.defineProperty;var n=(e,t)=>{for(var n in t)r(e,n,{get:t[n],enumerable:true})};var s=new WeakMap;var l=e=>s.get(e);var i=(e,t)=>s.set(t.t=e,t);var o=(e,t)=>{const r={l:0,$hostElement$:e,i:t,o:new Map};{r.u=new Promise((e=>r.v=e))}{r.p=new Promise((e=>r.h=e));e["s-p"]=[];e["s-rc"]=[]}return s.set(e,r)};var a=(e,t)=>t in e;var f=(e,t)=>(0,console.error)(e,t);var c=new Map;var u=(e,t,r)=>{const n=e.m.replace(/-/g,"_");const s=e.$;if(!s){return void 0}const l=c.get(s);if(l){return l[n]}
-/*!__STENCIL_STATIC_IMPORT_SWITCH__*/return import(`./${s}.entry.js${""}`).then((e=>{{c.set(s,e)}return e[n]}),f)};var v=new Map;var d="{visibility:hidden}.hydrated{visibility:inherit}";var p="slot-fb{display:contents}slot-fb[hidden]{display:none}";var h="http://www.w3.org/1999/xlink";var m=["formAssociatedCallback","formResetCallback","formDisabledCallback","formStateRestoreCallback"];var y=typeof window!=="undefined"?window:{};var b=y.document||{head:{}};var w=y.HTMLElement||class{};var g={l:0,S:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,r,n)=>e.addEventListener(t,r,n),rel:(e,t,r,n)=>e.removeEventListener(t,r,n),ce:(e,t)=>new CustomEvent(e,t)};var $=t.shadowDom;var S=(()=>{let e=false;try{b.addEventListener("e",null,Object.defineProperty({},"passive",{get(){e=true}}))}catch(e){}return e})();var k=e=>Promise.resolve(e);var C=(()=>{try{new CSSStyleSheet;return typeof(new CSSStyleSheet).replaceSync==="function"}catch(e){}return false})();var j=false;var O=[];var x=[];var R=(e,t)=>r=>{e.push(r);if(!j){j=true;if(t&&g.l&4){L(T)}else{g.raf(T)}}};var D=e=>{for(let t=0;t<e.length;t++){try{e[t](performance.now())}catch(e){f(e)}}e.length=0};var T=()=>{D(O);{D(x);if(j=O.length>0){g.raf(T)}}};var L=e=>k().then(e);var E=R(x,true);var A=e=>{const t=new URL(e,g.S);return t.origin!==y.location.origin?t.href:t.pathname};var F={};var M="http://www.w3.org/2000/svg";var U="http://www.w3.org/1999/xhtml";var P=e=>e!=null;var N=e=>{e=typeof e;return e==="object"||e==="function"};function W(e){var t,r,n;return(n=(r=(t=e.head)==null?void 0:t.querySelector('meta[name="csp-nonce"]'))==null?void 0:r.getAttribute("content"))!=null?n:void 0}var H={};n(H,{err:()=>B,map:()=>I,ok:()=>z,unwrap:()=>Q,unwrapErr:()=>q});var z=e=>({isOk:true,isErr:false,value:e});var B=e=>({isOk:false,isErr:true,value:e});function I(e,t){if(e.isOk){const r=t(e.value);if(r instanceof Promise){return r.then((e=>z(e)))}else{return z(r)}}if(e.isErr){const t=e.value;return B(t)}throw"should never get here"}var Q=e=>{if(e.isOk){return e.value}else{throw e.value}};var q=e=>{if(e.isErr){return e.value}else{throw e.value}};var G=(e,t="")=>{{return()=>{}}};var K=(e,t)=>{{return()=>{}}};var V=(e,t,...r)=>{let n=null;let s=null;let l=null;let i=false;let o=false;const a=[];const f=t=>{for(let r=0;r<t.length;r++){n=t[r];if(Array.isArray(n)){f(n)}else if(n!=null&&typeof n!=="boolean"){if(i=typeof e!=="function"&&!N(n)){n=String(n)}if(i&&o){a[a.length-1].k+=n}else{a.push(i?X(null,n):n)}o=i}}};f(r);if(t){if(t.key){s=t.key}if(t.name){l=t.name}{const e=t.className||t.class;if(e){t.class=typeof e!=="object"?e:Object.keys(e).filter((t=>e[t])).join(" ")}}}const c=X(e,null);c.C=t;if(a.length>0){c.j=a}{c.O=s}{c.R=l}return c};var X=(e,t)=>{const r={l:0,D:e,k:t,T:null,j:null};{r.C=null}{r.O=null}{r.R=null}return r};var _={};var J=e=>e&&e.D===_;var Y=(e,t)=>{if(e!=null&&!N(e)){if(t&4){return e==="false"?false:e===""||!!e}if(t&2){return parseFloat(e)}if(t&1){return String(e)}return e}return e};var Z=e=>l(e).$hostElement$;var ee=(e,t,r)=>{const n=Z(e);return{emit:e=>te(n,t,{bubbles:!!(r&4),composed:!!(r&2),cancelable:!!(r&1),detail:e})}};var te=(e,t,r)=>{const n=g.ce(t,r);e.dispatchEvent(n);return n};var re=new WeakMap;var ne=(e,t,r)=>{let n=v.get(e);if(C&&r){n=n||new CSSStyleSheet;if(typeof n==="string"){n=t}else{n.replaceSync(t)}}else{n=t}v.set(e,n)};var se=(e,t,r)=>{var n;const s=ie(t);const l=v.get(s);e=e.nodeType===11?e:b;if(l){if(typeof l==="string"){e=e.head||e;let r=re.get(e);let i;if(!r){re.set(e,r=new Set)}if(!r.has(s)){{i=b.createElement("style");i.innerHTML=l;const r=(n=g.L)!=null?n:W(b);if(r!=null){i.setAttribute("nonce",r)}if(!(t.l&1)){if(e.nodeName==="HEAD"){const t=e.querySelectorAll("link[rel=preconnect]");const r=t.length>0?t[t.length-1].nextSibling:e.querySelector("style");e.insertBefore(i,r)}else if("host"in e){if(C){const t=new CSSStyleSheet;t.replaceSync(l);e.adoptedStyleSheets=[t,...e.adoptedStyleSheets]}else{const t=e.querySelector("style");if(t){t.innerHTML=l+t.innerHTML}else{e.prepend(i)}}}else{e.append(i)}}if(t.l&1&&e.nodeName!=="HEAD"){e.insertBefore(i,null)}}if(t.l&4){i.innerHTML+=p}if(r){r.add(s)}}}else if(!e.adoptedStyleSheets.includes(l)){e.adoptedStyleSheets=[...e.adoptedStyleSheets,l]}}return s};var le=e=>{const t=e.i;const r=e.$hostElement$;const n=t.l;const s=G("attachStyles",t.m);const l=se(r.shadowRoot?r.shadowRoot:r.getRootNode(),t);if(n&10&&n&2){r["s-sc"]=l;r.classList.add(l+"-h")}s()};var ie=(e,t)=>"sc-"+e.m;var oe=(e,t,r,n,s,l)=>{if(r!==n){let i=a(e,t);let o=t.toLowerCase();if(t==="class"){const t=e.classList;const s=fe(r);const l=fe(n);t.remove(...s.filter((e=>e&&!l.includes(e))));t.add(...l.filter((e=>e&&!s.includes(e))))}else if(t==="style"){{for(const t in r){if(!n||n[t]==null){if(t.includes("-")){e.style.removeProperty(t)}else{e.style[t]=""}}}}for(const t in n){if(!r||n[t]!==r[t]){if(t.includes("-")){e.style.setProperty(t,n[t])}else{e.style[t]=n[t]}}}}else if(t==="key");else if(t==="ref"){if(n){n(e)}}else if(!i&&t[0]==="o"&&t[1]==="n"){if(t[2]==="-"){t=t.slice(3)}else if(a(y,o)){t=o.slice(2)}else{t=o[2]+t.slice(3)}if(r||n){const s=t.endsWith(ce);t=t.replace(ue,"");if(r){g.rel(e,t,r,s)}if(n){g.ael(e,t,n,s)}}}else{const a=N(n);if((i||a&&n!==null)&&!s){try{if(!e.tagName.includes("-")){const s=n==null?"":n;if(t==="list"){i=false}else if(r==null||e[t]!=s){if(typeof e.__lookupSetter__(t)==="function"){e[t]=s}else{e.setAttribute(t,s)}}}else{e[t]=n}}catch(e){}}let f=false;{if(o!==(o=o.replace(/^xlink\:?/,""))){t=o;f=true}}if(n==null||n===false){if(n!==false||e.getAttribute(t)===""){if(f){e.removeAttributeNS(h,t)}else{e.removeAttribute(t)}}}else if((!i||l&4||s)&&!a){n=n===true?"":n;if(f){e.setAttributeNS(h,t,n)}else{e.setAttribute(t,n)}}}}};var ae=/\s/;var fe=e=>!e?[]:e.split(ae);var ce="Capture";var ue=new RegExp(ce+"$");var ve=(e,t,r)=>{const n=t.T.nodeType===11&&t.T.host?t.T.host:t.T;const s=e&&e.C||F;const l=t.C||F;{for(const e of de(Object.keys(s))){if(!(e in l)){oe(n,e,s[e],void 0,r,t.l)}}}for(const e of de(Object.keys(l))){oe(n,e,s[e],l[e],r,t.l)}};function de(e){return e.includes("ref")?[...e.filter((e=>e!=="ref")),"ref"]:e}var pe;var he;var me;var ye=false;var be=false;var we=false;var ge=false;var $e=(e,r,n,s)=>{var l;const i=r.j[n];let o=0;let a;let f;let c;if(!ye){we=true;if(i.D==="slot"){if(pe){s.classList.add(pe+"-s")}i.l|=i.j?2:1}}if(i.k!==null){a=i.T=b.createTextNode(i.k)}else if(i.l&1){a=i.T=b.createTextNode("")}else{if(!ge){ge=i.D==="svg"}a=i.T=b.createElementNS(ge?M:U,!ye&&t.slotRelocation&&i.l&2?"slot-fb":i.D);if(ge&&i.D==="foreignObject"){ge=false}{ve(null,i,ge)}const r=a.getRootNode();const n=!r.querySelector("body");if(!n&&t.scoped&&P(pe)&&a["s-si"]!==pe){a.classList.add(a["s-si"]=pe)}if(i.j){for(o=0;o<i.j.length;++o){f=$e(e,i,o,a);if(f){a.appendChild(f)}}}{if(i.D==="svg"){ge=false}else if(a.tagName==="foreignObject"){ge=true}}}a["s-hn"]=me;{if(i.l&(2|1)){a["s-sr"]=true;a["s-cr"]=he;a["s-sn"]=i.R||"";a["s-rf"]=(l=i.C)==null?void 0:l.ref;c=e&&e.j&&e.j[n];if(c&&c.D===i.D&&e.T){{Se(e.T,false)}}}}return a};var Se=(e,r)=>{g.l|=1;const n=Array.from(e.childNodes);if(e["s-sr"]&&t.experimentalSlotFixes){let t=e;while(t=t.nextSibling){if(t&&t["s-sn"]===e["s-sn"]&&t["s-sh"]===me){n.push(t)}}}for(let e=n.length-1;e>=0;e--){const t=n[e];if(t["s-hn"]!==me&&t["s-ol"]){Me(Re(t),t,xe(t));t["s-ol"].remove();t["s-ol"]=void 0;t["s-sh"]=void 0;we=true}if(r){Se(t,r)}}g.l&=~1};var ke=(e,t,r,n,s,l)=>{let i=e["s-cr"]&&e["s-cr"].parentNode||e;let o;if(i.shadowRoot&&i.tagName===me){i=i.shadowRoot}for(;s<=l;++s){if(n[s]){o=$e(null,r,s,e);if(o){n[s].T=o;Me(i,o,xe(t))}}}};var Ce=(e,t,r)=>{for(let n=t;n<=r;++n){const t=e[n];if(t){const e=t.T;Fe(t);if(e){{be=true;if(e["s-ol"]){e["s-ol"].remove()}else{Se(e,true)}}e.remove()}}}};var je=(e,t,r,n,s=false)=>{let l=0;let i=0;let o=0;let a=0;let f=t.length-1;let c=t[0];let u=t[f];let v=n.length-1;let d=n[0];let p=n[v];let h;let m;while(l<=f&&i<=v){if(c==null){c=t[++l]}else if(u==null){u=t[--f]}else if(d==null){d=n[++i]}else if(p==null){p=n[--v]}else if(Oe(c,d,s)){De(c,d,s);c=t[++l];d=n[++i]}else if(Oe(u,p,s)){De(u,p,s);u=t[--f];p=n[--v]}else if(Oe(c,p,s)){if(c.D==="slot"||p.D==="slot"){Se(c.T.parentNode,false)}De(c,p,s);Me(e,c.T,u.T.nextSibling);c=t[++l];p=n[--v]}else if(Oe(u,d,s)){if(c.D==="slot"||p.D==="slot"){Se(u.T.parentNode,false)}De(u,d,s);Me(e,u.T,c.T);u=t[--f];d=n[++i]}else{o=-1;{for(a=l;a<=f;++a){if(t[a]&&t[a].O!==null&&t[a].O===d.O){o=a;break}}}if(o>=0){m=t[o];if(m.D!==d.D){h=$e(t&&t[i],r,o,e)}else{De(m,d,s);t[o]=void 0;h=m.T}d=n[++i]}else{h=$e(t&&t[i],r,i,e);d=n[++i]}if(h){{Me(Re(c.T),h,xe(c.T))}}}}if(l>f){ke(e,n[v+1]==null?null:n[v+1].T,r,n,i,v)}else if(i>v){Ce(t,l,f)}};var Oe=(e,t,r=false)=>{if(e.D===t.D){if(e.D==="slot"){if("A"in e&&r&&e.T.nodeType!==8){return false}return e.R===t.R}if(!r){return e.O===t.O}return true}return false};var xe=e=>e&&e["s-ol"]||e;var Re=e=>(e["s-ol"]?e["s-ol"]:e).parentNode;var De=(e,r,n=false)=>{const s=r.T=e.T;const l=e.j;const i=r.j;const o=r.D;const a=r.k;let f;if(a===null){{ge=o==="svg"?true:o==="foreignObject"?false:ge}{if(o==="slot"&&!ye);else{ve(e,r,ge)}}if(l!==null&&i!==null){je(s,l,r,i,n)}else if(i!==null){if(e.k!==null){s.textContent=""}ke(s,null,r,i,0,i.length-1)}else if(!n&&t.updatable&&l!==null){Ce(l,0,l.length-1)}if(ge&&o==="svg"){ge=false}}else if(f=s["s-cr"]){f.parentNode.textContent=a}else if(e.k!==a){s.data=a}};var Te=e=>{const t=e.childNodes;for(const e of t){if(e.nodeType===1){if(e["s-sr"]){const r=e["s-sn"];e.hidden=false;for(const n of t){if(n!==e){if(n["s-hn"]!==e["s-hn"]||r!==""){if(n.nodeType===1&&(r===n.getAttribute("slot")||r===n["s-sn"])||n.nodeType===3&&r===n["s-sn"]){e.hidden=true;break}}else{if(n.nodeType===1||n.nodeType===3&&n.textContent.trim()!==""){e.hidden=true;break}}}}}Te(e)}}};var Le=[];var Ee=e=>{let r;let n;let s;for(const l of e.childNodes){if(l["s-sr"]&&(r=l["s-cr"])&&r.parentNode){n=r.parentNode.childNodes;const e=l["s-sn"];for(s=n.length-1;s>=0;s--){r=n[s];if(!r["s-cn"]&&!r["s-nr"]&&r["s-hn"]!==l["s-hn"]&&!t.experimentalSlotFixes){if(Ae(r,e)){let t=Le.find((e=>e.F===r));be=true;r["s-sn"]=r["s-sn"]||e;if(t){t.F["s-sh"]=l["s-hn"];t.M=l}else{r["s-sh"]=l["s-hn"];Le.push({M:l,F:r})}if(r["s-sr"]){Le.map((e=>{if(Ae(e.F,r["s-sn"])){t=Le.find((e=>e.F===r));if(t&&!e.M){e.M=t.M}}}))}}else if(!Le.some((e=>e.F===r))){Le.push({F:r})}}}}if(l.nodeType===1){Ee(l)}}};var Ae=(e,t)=>{if(e.nodeType===1){if(e.getAttribute("slot")===null&&t===""){return true}if(e.getAttribute("slot")===t){return true}return false}if(e["s-sn"]===t){return true}return t===""};var Fe=e=>{{e.C&&e.C.ref&&e.C.ref(null);e.j&&e.j.map(Fe)}};var Me=(e,t,r)=>{const n=e==null?void 0:e.insertBefore(t,r);return n};var Ue=(e,t,r=false)=>{var n,s,l,i;const o=e.$hostElement$;const a=e.i;const f=e.U||X(null,null);const c=J(t)?t:V(null,null,t);me=o.tagName;if(a.P){c.C=c.C||{};a.P.map((([e,t])=>c.C[t]=o[e]))}if(r&&c.C){for(const e of Object.keys(c.C)){if(o.hasAttribute(e)&&!["key","ref","style","class"].includes(e)){c.C[e]=o[e]}}}c.D=null;c.l|=4;e.U=c;c.T=f.T=o.shadowRoot||o;{pe=o["s-sc"]}ye=(a.l&1)!==0;{he=o["s-cr"];be=false}De(f,c,r);{g.l|=1;if(we){Ee(c.T);for(const e of Le){const t=e.F;if(!t["s-ol"]){const e=b.createTextNode("");e["s-nr"]=t;Me(t.parentNode,t["s-ol"]=e,t)}}for(const e of Le){const t=e.F;const o=e.M;if(o){const e=o.parentNode;let r=o.nextSibling;{let l=(n=t["s-ol"])==null?void 0:n.previousSibling;while(l){let n=(s=l["s-nr"])!=null?s:null;if(n&&n["s-sn"]===t["s-sn"]&&e===n.parentNode){n=n.nextSibling;while(n===t||(n==null?void 0:n["s-sr"])){n=n==null?void 0:n.nextSibling}if(!n||!n["s-nr"]){r=n;break}}l=l.previousSibling}}if(!r&&e!==t.parentNode||t.nextSibling!==r){if(t!==r){if(!t["s-hn"]&&t["s-ol"]){t["s-hn"]=t["s-ol"].parentNode.nodeName}Me(e,t,r);if(t.nodeType===1){t.hidden=(l=t["s-ih"])!=null?l:false}}}t&&typeof o["s-rf"]==="function"&&o["s-rf"](t)}else{if(t.nodeType===1){if(r){t["s-ih"]=(i=t.hidden)!=null?i:false}t.hidden=true}}}}if(be){Te(c.T)}g.l&=~1;Le.length=0}he=void 0};var Pe=(e,t)=>{if(t&&!e.N&&t["s-p"]){t["s-p"].push(new Promise((t=>e.N=t)))}};var Ne=(e,t)=>{{e.l|=16}if(e.l&4){e.l|=512;return}Pe(e,e.W);const r=()=>We(e,t);return E(r)};var We=(e,t)=>{const r=e.$hostElement$;const n=G("scheduleUpdate",e.i.m);const s=e.t;if(!s){throw new Error(`Can't render component <${r.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`)}let l;if(t){{e.l|=256;if(e.H){e.H.map((([e,t])=>Ge(s,e,t)));e.H=void 0}}{l=Ge(s,"componentWillLoad")}}else{{l=Ge(s,"componentWillUpdate")}}{l=He(l,(()=>Ge(s,"componentWillRender")))}n();return He(l,(()=>Be(e,s,t)))};var He=(e,t)=>ze(e)?e.then(t).catch((e=>{console.error(e);t()})):t();var ze=e=>e instanceof Promise||e&&e.then&&typeof e.then==="function";var Be=async(e,t,r)=>{var n;const s=e.$hostElement$;const l=G("update",e.i.m);const i=s["s-rc"];if(r){le(e)}const o=G("render",e.i.m);{Ie(e,t,s,r)}if(i){i.map((e=>e()));s["s-rc"]=void 0}o();l();{const t=(n=s["s-p"])!=null?n:[];const r=()=>Qe(e);if(t.length===0){r()}else{Promise.all(t).then(r);e.l|=4;t.length=0}}};var Ie=(e,t,r,n)=>{try{t=t.render();{e.l&=~16}{e.l|=2}{{{Ue(e,t,n)}}}}catch(t){f(t,e.$hostElement$)}return null};var Qe=e=>{const t=e.i.m;const r=e.$hostElement$;const n=G("postUpdate",t);const s=e.t;const l=e.W;{Ge(s,"componentDidRender")}if(!(e.l&64)){e.l|=64;{Ke(r)}{Ge(s,"componentDidLoad")}n();{e.h(r);if(!l){qe()}}}else{{Ge(s,"componentDidUpdate")}n()}{e.v(r)}{if(e.N){e.N();e.N=void 0}if(e.l&512){L((()=>Ne(e,false)))}e.l&=~(4|512)}};var qe=t=>{{Ke(b.documentElement)}L((()=>te(y,"appload",{detail:{namespace:e}})))};var Ge=(e,t,r)=>{if(e&&e[t]){try{return e[t](r)}catch(e){f(e)}}return void 0};var Ke=e=>{var r;return e.classList.add((r=t.hydratedSelectorName)!=null?r:"hydrated")};var Ve=(e,t)=>l(e).o.get(t);var Xe=(e,t,r,n)=>{const s=l(e);if(!s){throw new Error(`Couldn't find host element for "${n.m}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`)}const i=s.$hostElement$;const o=s.o.get(t);const a=s.l;const c=s.t;r=Y(r,n.B[t][0]);const u=Number.isNaN(o)&&Number.isNaN(r);const v=r!==o&&!u;if((!(a&8)||o===void 0)&&v){s.o.set(t,r);if(c){if(n.I&&a&128){const e=n.I[t];if(e){e.map((e=>{try{c[e](r,o,t)}catch(e){f(e,i)}}))}}if((a&(2|16))===2){Ne(s,false)}}}};var _e=(e,t,r)=>{var n,s;const i=e.prototype;if(t.l&64&&r&1){m.forEach((e=>{Object.defineProperty(i,e,{value(...t){const r=l(this);const n=r.t;if(!n){r.p.then((r=>{const n=r[e];typeof n==="function"&&n.call(r,...t)}))}else{const r=n[e];typeof r==="function"&&r.call(n,...t)}}})}))}if(t.B||(t.I||e.watchers)){if(e.watchers&&!t.I){t.I=e.watchers}const o=Object.entries((n=t.B)!=null?n:{});o.map((([e,[n]])=>{if(n&31||r&2&&n&32){Object.defineProperty(i,e,{get(){return Ve(this,e)},set(r){Xe(this,e,r,t)},configurable:true,enumerable:true})}else if(r&1&&n&64){Object.defineProperty(i,e,{value(...t){var r;const n=l(this);return(r=n==null?void 0:n.u)==null?void 0:r.then((()=>{var r;return(r=n.t)==null?void 0:r[e](...t)}))}})}}));if(r&1){const r=new Map;i.attributeChangedCallback=function(e,n,s){g.jmp((()=>{var o;const a=r.get(e);if(this.hasOwnProperty(a)){s=this[a];delete this[a]}else if(i.hasOwnProperty(a)&&typeof this[a]==="number"&&this[a]==s){return}else if(a==null){const r=l(this);const i=r==null?void 0:r.l;if(i&&!(i&8)&&i&128&&s!==n){const l=r.t;const i=(o=t.I)==null?void 0:o[e];i==null?void 0:i.forEach((t=>{if(l[t]!=null){l[t].call(l,s,n,e)}}))}return}this[a]=s===null&&typeof this[a]==="boolean"?false:s}))};e.observedAttributes=Array.from(new Set([...Object.keys((s=t.I)!=null?s:{}),...o.filter((([e,t])=>t[0]&15)).map((([e,n])=>{var s;const l=n[1]||e;r.set(l,e);if(n[0]&512){(s=t.P)==null?void 0:s.push([e,l])}return l}))]))}}return e};var Je=async(e,t,r,n)=>{let s;if((t.l&32)===0){t.l|=32;const n=r.$;if(n){const e=u(r);if(e&&"then"in e){const t=K();s=await e;t()}else{s=e}if(!s){throw new Error(`Constructor for "${r.m}#${t.q}" was not found`)}if(!s.isProxied){{r.I=s.watchers}_e(s,r,2);s.isProxied=true}const n=G("createInstance",r.m);{t.l|=8}try{new s(t)}catch(e){f(e)}{t.l&=~8}{t.l|=128}n();Ye(t.t)}else{s=e.constructor;const r=e.localName;customElements.whenDefined(r).then((()=>t.l|=128))}if(s&&s.style){let e;if(typeof s.style==="string"){e=s.style}const t=ie(r);if(!v.has(t)){const n=G("registerStyles",r.m);ne(t,e,!!(r.l&1));n()}}}const l=t.W;const i=()=>Ne(t,true);if(l&&l["s-rc"]){l["s-rc"].push(i)}else{i()}};var Ye=e=>{{Ge(e,"connectedCallback")}};var Ze=e=>{if((g.l&1)===0){const t=l(e);const r=t.i;const n=G("connectedCallback",r.m);if(!(t.l&1)){t.l|=1;{if(r.l&(4|8)){et(e)}}{let r=e;while(r=r.parentNode||r.host){if(r["s-p"]){Pe(t,t.W=r);break}}}if(r.B){Object.entries(r.B).map((([t,[r]])=>{if(r&31&&e.hasOwnProperty(t)){const r=e[t];delete e[t];e[t]=r}}))}{Je(e,t,r)}}else{lt(e,t,r.G);if(t==null?void 0:t.t){Ye(t.t)}else if(t==null?void 0:t.p){t.p.then((()=>Ye(t.t)))}}n()}};var et=e=>{const t=e["s-cr"]=b.createComment("");t["s-cn"]=true;Me(e,t,e.firstChild)};var tt=e=>{{Ge(e,"disconnectedCallback")}};var rt=async e=>{if((g.l&1)===0){const t=l(e);{if(t.K){t.K.map((e=>e()));t.K=void 0}}if(t==null?void 0:t.t){tt(t.t)}else if(t==null?void 0:t.p){t.p.then((()=>tt(t.t)))}}};var nt=e=>{const t=e.cloneNode;e.cloneNode=function(e){const r=this;const n=r.shadowRoot&&$;const s=t.call(r,n?e:false);if(!n&&e){let e=0;let t,n;const l=["s-id","s-cr","s-lr","s-rc","s-sc","s-p","s-cn","s-sr","s-sn","s-hn","s-ol","s-nr","s-si","s-rf","s-scs"];for(;e<r.childNodes.length;e++){t=r.childNodes[e]["s-nr"];n=l.every((t=>!r.childNodes[e][t]));if(t){{s.appendChild(t.cloneNode(true))}}if(n){s.appendChild(r.childNodes[e].cloneNode(true))}}}return s}};var st=(e,t={})=>{var r;const n=G();const s=[];const i=t.exclude||[];const a=y.customElements;const f=b.head;const c=f.querySelector("meta[charset]");const u=b.createElement("style");const v=[];let h;let m=true;Object.assign(g,t);g.S=new URL(t.resourcesUrl||"./",b.baseURI).href;let w=false;e.map((e=>{e[1].map((t=>{var r;const n={l:t[0],m:t[1],B:t[2],G:t[3]};if(n.l&4){w=true}{n.B=t[2]}{n.G=t[3]}{n.P=[]}{n.I=(r=t[4])!=null?r:{}}const f=n.m;const c=class extends HTMLElement{constructor(e){super(e);this.hasRegisteredEventListeners=false;e=this;o(e,n);if(n.l&1){{if(!e.shadowRoot){{e.attachShadow({mode:"open",delegatesFocus:!!(n.l&16)})}}else{if(e.shadowRoot.mode!=="open"){throw new Error(`Unable to re-use existing shadow root for ${n.m}! Mode is set to ${e.shadowRoot.mode} but Stencil only supports open shadow roots.`)}}}}}connectedCallback(){const e=l(this);if(!this.hasRegisteredEventListeners){this.hasRegisteredEventListeners=true;lt(this,e,n.G)}if(h){clearTimeout(h);h=null}if(m){v.push(this)}else{g.jmp((()=>Ze(this)))}}disconnectedCallback(){g.jmp((()=>rt(this)))}componentOnReady(){return l(this).p}};{{nt(c.prototype)}}if(n.l&64){c.formAssociated=true}n.$=e[0];if(!i.includes(f)&&!a.get(f)){s.push(f);a.define(f,_e(c,n,1))}}))}));if(s.length>0){if(w){u.textContent+=p}{u.textContent+=s.sort()+d}if(u.innerHTML.length){u.setAttribute("data-styles","");const e=(r=g.L)!=null?r:W(b);if(e!=null){u.setAttribute("nonce",e)}f.insertBefore(u,c?c.nextSibling:f.firstChild)}}m=false;if(v.length){v.map((e=>e.connectedCallback()))}else{{g.jmp((()=>h=setTimeout(qe,30)))}}n()};var lt=(e,t,r,n)=>{if(r){r.map((([r,n,s])=>{const l=ot(e,r);const i=it(t,s);const o=at(r);g.ael(l,n,i,o);(t.K=t.K||[]).push((()=>g.rel(l,n,i,o)))}))}};var it=(e,t)=>r=>{var n;try{{if(e.l&256){(n=e.t)==null?void 0:n[t](r)}else{(e.H=e.H||[]).push([t,r])}}}catch(e){f(e)}};var ot=(e,t)=>{if(t&4)return b;if(t&8)return y;if(t&16)return b.body;return e};var at=e=>S?{passive:(e&1)!==0,capture:(e&2)!==0}:(e&2)!==0;var ft=e=>g.L=e;export{w as H,_ as a,st as b,ee as c,A as d,Z as g,V as h,k as p,i as r,ft as s};
-//# sourceMappingURL=p-7aa4082c.js.map

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

@@ -1,2 +0,0 @@
-import{r as o,h as i,g as t,c as e}from"./p-7aa4082c.js";const n=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.accordion-wrapper{display:flex;flex-direction:column;gap:8px;font-family:var(--ifx-font-family)}';const a=n;const s=class{constructor(i){o(this,i);this.autoCollapse=false}async onItemOpen(o){if(this.autoCollapse){const i=Array.from(this.el.querySelectorAll("ifx-accordion-item"));for(const t of i){const i=t;if(i!==o.target&&await i.open){i.open=false}}}}render(){return i("div",{key:"a69a6bea9d5347c0e1808d4635d458ce16614000",class:"accordion-wrapper"},i("slot",{key:"389e9039f9272a88d95aca8b83efbb754736a5dd"}))}static get delegatesFocus(){return true}get el(){return t(this)}};s.style=a;const c=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.accordion-item{border-radius:3px;overflow:hidden;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:"";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0A8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer;margin:4px}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;max-height:0;overflow:hidden;transition:max-height 0.3s ease-in-out;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:24px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;}.accordion-icon{font-weight:bold;display:inline-block;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}';const r=c;const d=class{constructor(i){o(this,i);this.ifxItemOpen=e(this,"ifxItemOpen",7);this.ifxItemClose=e(this,"ifxItemClose",7);this.caption=undefined;this.open=false;this.AriaLive=3;this.internalOpen=false}componentWillLoad(){this.internalOpen=this.open}componentDidLoad(){this.openAccordionItem()}componentDidUpdate(){this.openAccordionItem()}openChanged(o){this.internalOpen=o}toggleOpen(){this.internalOpen=!this.internalOpen;this.open=this.internalOpen;if(this.internalOpen){this.ifxItemOpen.emit({isOpen:this.internalOpen})}else{this.ifxItemClose.emit({isClosed:!this.internalOpen})}}openAccordionItem(){if(this.internalOpen){this.contentEl.style.maxHeight=`${this.contentEl.scrollHeight}px`}else{this.contentEl.style.maxHeight="0"}}handleSlotChange(o){const i=o.target;const t=i.assignedNodes();if(t.length>0){t.forEach((o=>{const i=new MutationObserver(((o,i)=>{for(let i of o){if(i.type==="childList"){if(this.internalOpen){this.openAccordionItem()}}}}));i.observe(o,{attributes:true,childList:true,subtree:true})}))}if(this.internalOpen){this.openAccordionItem()}}handleKeydown(o){switch(o.key){case"Enter":case" ":o.preventDefault();this.toggleOpen();break}}render(){return i("div",{key:"1215772109c33556d626f4a7d40d6655684806a2",class:`accordion-item ${this.internalOpen?"open":""}`},i("div",{key:"30e7771bae93c213d9f95126886d7552ebe03b94",role:"button","aria-expanded":this.internalOpen,"aria-controls":"accordion-content",class:"accordion-title",onClick:()=>this.toggleOpen(),tabindex:"0"},i("span",{key:"7da5f484c41f9f01dd7eec5092ec8ad82947d481","aria-hidden":"true",role:"heading","aria-level":String(this.AriaLive),class:"accordion-icon"},i("ifx-icon",{key:"e64e478a66fd0dd2c3d3608294a6160aa4232952",icon:"chevron-down-12"})),i("span",{key:"7e1ff777da8ce68d6d5f1266512fbd05731169f5",id:"accordion-caption",class:"accordion-caption"},this.caption)),i("div",{key:"144fa8393da592e1d928b51d7b4ad48d6b06a100",id:"accordion-content",class:"accordion-content",ref:o=>this.contentEl=o,role:"region","aria-labelledby":"accordion-caption"},i("div",{key:"28702f514d9bd400499a49a3b1cd675f56d7fcad",class:"inner-content"},i("slot",{key:"e40109a457e4b1cc09c8234d5003361bb6c1c6fb",onSlotchange:o=>this.handleSlotChange(o)}))))}static get watchers(){return{open:["openChanged"]}}};d.style=r;export{s as ifx_accordion,d as ifx_accordion_item};
-//# sourceMappingURL=p-80d79ac2.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["accordionCss","IfxAccordionStyle0","Accordion","onItemOpen","event","this","autoCollapse","items","Array","from","el","querySelectorAll","item","itemElement","target","open","render","h","key","class","accordionItemCss","IfxAccordionItemStyle0","IfxAccordionItem","componentWillLoad","internalOpen","componentDidLoad","openAccordionItem","componentDidUpdate","openChanged","newValue","toggleOpen","ifxItemOpen","emit","isOpen","ifxItemClose","isClosed","contentEl","style","maxHeight","scrollHeight","handleSlotChange","e","slotElement","nodes","assignedNodes","length","forEach","node","observer","MutationObserver","mutationsList","_","mutation","type","observe","attributes","childList","subtree","handleKeydown","ev","preventDefault","role","onClick","tabindex","String","AriaLive","icon","id","caption","ref","onSlotchange"],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx","src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.accordion-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: tokens.$ifxSpace100;\n  font-family: var(--ifx-font-family);\n\n}","//ifxAccordion.tsx\nimport { Component, h, Listen, Element, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: { delegatesFocus: true },\n})\nexport class Accordion {\n  @Element() el: HTMLElement;\n  @Prop() autoCollapse: boolean = false;\n\n\n  @Listen('ifxItemOpen')\n  async onItemOpen(event: CustomEvent) {\n    if (this.autoCollapse) {\n      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\n      for (const item of items) {\n        const itemElement = item as HTMLIfxAccordionItemElement;\n        if (itemElement !== event.target && (await itemElement.open)) {\n          itemElement.open = false;\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"accordion-wrapper\">\n        <slot />\n      </div>\n    );\n  }\n}\n","// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n  border-radius: 3px;\n  overflow: hidden;\n  transition: all 0.3s;\n  font-family: var(--ifx-font-family);\n\n}\n\n.accordion-title:focus {\n  outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n  content: '';\n  display: block;\n  position: absolute;\n  top: -4px;\n  bottom: -4px;\n  left: -4px;\n  right: -4px;\n  border-radius: 5px;\n  border: 2px solid tokens.$ifxColorOcean500;\n  box-sizing: border-box;\n}\n\n.accordion-title:hover {\n  border: 1px solid tokens.$ifxColorEngineering200;\n  color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n  gap: tokens.$ifxSpace150;\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  cursor: pointer;\n  margin: 4px;\n}\n\n.accordion-caption {\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n  gap: tokens.$ifxSpace100;\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.3s ease-in-out;\n  line-height: 24px;\n  font-size: tokens.$ifxFontSizeM;\n  font-weight: 400;\n}\n\n.inner-content {\n  background-color: tokens.$ifxColorBaseWhite;\n  padding: tokens.$ifxSpace300;\n  // white-space: pre-wrap;\n  /* wraps text at spaces and within words */\n  word-wrap: break-word;\n  /* breaks text within a word if necessary */\n  overflow-wrap: anywhere;\n  align-self: stretch;\n\n  /* breaks text at arbitrary points when needed */\n}\n\n.accordion-icon {\n  font-weight: bold;\n  display: inline-block;\n  transition: transform 0.3s;\n\n  &:hover {\n    color: tokens.$ifxColorOcean600;\n\n  }\n}\n\n\n\n.accordion-item.open .accordion-icon {\n  transform: rotate(-180deg);\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion-item',\n  styleUrl: 'accordionItem.scss',\n  shadow: true,\n})\nexport class IfxAccordionItem {\n  @Prop() caption: string;\n  @Prop({\n    mutable: true,\n  }) open: boolean = false;\n  @Prop() AriaLive = 3;\n  @State() internalOpen: boolean = false;\n  @Event() ifxItemOpen: EventEmitter;\n  @Event() ifxItemClose: EventEmitter;\n  private contentEl!: HTMLElement;\n\n\n  componentWillLoad() {\n    this.internalOpen = this.open;\n  }\n\n  componentDidLoad() {\n    this.openAccordionItem()\n  }\n\n  componentDidUpdate() {\n    this.openAccordionItem()\n  }\n\n\n\n  @Watch('open')\n  openChanged(newValue: boolean) {\n    this.internalOpen = newValue;\n  }\n\n  toggleOpen() {\n    this.internalOpen = !this.internalOpen;\n    this.open = this.internalOpen;\n\n    if (this.internalOpen) {\n      this.ifxItemOpen.emit({ isOpen: this.internalOpen });\n    } else {\n      this.ifxItemClose.emit({ isClosed: !this.internalOpen });\n    }\n  }\n\n  openAccordionItem() {\n    if (this.internalOpen) {\n      this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;\n    } else {\n      this.contentEl.style.maxHeight = '0';\n    }\n  }\n\n  handleSlotChange(e) {\n    const slotElement = e.target;\n    const nodes = slotElement.assignedNodes();\n    \n    if(nodes.length > 0) {\n      nodes.forEach(node => {\n        const observer = new MutationObserver((mutationsList, _) => {\n          for(let mutation of mutationsList) {\n            if (mutation.type === 'childList') {\n              if (this.internalOpen) {\n                this.openAccordionItem();\n              }\n            }\n          }\n        });\n        observer.observe(node, { attributes: true, childList: true, subtree: true });\n      });\n    }\n\n    if (this.internalOpen) {\n      this.openAccordionItem();\n    }\n  }\n\n  \n\n  @Listen('keydown')\n  handleKeydown(ev: KeyboardEvent) {\n    switch (ev.key) {\n      case 'Enter': // fallthrough\n      case ' ': // space\n        ev.preventDefault();\n        this.toggleOpen();\n        break;\n    }\n  }\n\n\n  render() {\n    return (\n      <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n        <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0'>\n          <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLive) as string} class=\"accordion-icon\">\n            <ifx-icon icon=\"chevron-down-12\"/>\n          </span>\n          <span id=\"accordion-caption\" class=\"accordion-caption\">{this.caption}</span>\n        </div>\n        <div id=\"accordion-content\" class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n          <div class=\"inner-content\">\n            <slot onSlotchange={(e) => this.handleSlotChange(e)} />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}"],"mappings":"yDAAA,MAAMA,EAAe,+MACrB,MAAAC,EAAeD,E,MCOFE,EAAS,M,2CAEY,K,CAIhC,gBAAMC,CAAWC,GACf,GAAIC,KAAKC,aAAc,CACrB,MAAMC,EAAQC,MAAMC,KAAKJ,KAAKK,GAAGC,iBAAiB,uBAClD,IAAK,MAAMC,KAAQL,EAAO,CACxB,MAAMM,EAAcD,EACpB,GAAIC,IAAgBT,EAAMU,cAAiBD,EAAYE,KAAO,CAC5DF,EAAYE,KAAO,K,IAM3B,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,qBACTF,EAAA,QAAAC,IAAA,6C,6EC7BR,MAAME,EAAmB,8nCACzB,MAAAC,EAAeD,E,MCOFE,EAAgB,M,8IAIR,M,cACA,E,kBACc,K,CAMjC,iBAAAC,GACElB,KAAKmB,aAAenB,KAAKU,I,CAG3B,gBAAAU,GACEpB,KAAKqB,mB,CAGP,kBAAAC,GACEtB,KAAKqB,mB,CAMP,WAAAE,CAAYC,GACVxB,KAAKmB,aAAeK,C,CAGtB,UAAAC,GACEzB,KAAKmB,cAAgBnB,KAAKmB,aAC1BnB,KAAKU,KAAOV,KAAKmB,aAEjB,GAAInB,KAAKmB,aAAc,CACrBnB,KAAK0B,YAAYC,KAAK,CAAEC,OAAQ5B,KAAKmB,c,KAChC,CACLnB,KAAK6B,aAAaF,KAAK,CAAEG,UAAW9B,KAAKmB,c,EAI7C,iBAAAE,GACE,GAAIrB,KAAKmB,aAAc,CACrBnB,KAAK+B,UAAUC,MAAMC,UAAY,GAAGjC,KAAK+B,UAAUG,gB,KAC9C,CACLlC,KAAK+B,UAAUC,MAAMC,UAAY,G,EAIrC,gBAAAE,CAAiBC,GACf,MAAMC,EAAcD,EAAE3B,OACtB,MAAM6B,EAAQD,EAAYE,gBAE1B,GAAGD,EAAME,OAAS,EAAG,CACnBF,EAAMG,SAAQC,IACZ,MAAMC,EAAW,IAAIC,kBAAiB,CAACC,EAAeC,KACpD,IAAI,IAAIC,KAAYF,EAAe,CACjC,GAAIE,EAASC,OAAS,YAAa,CACjC,GAAIhD,KAAKmB,aAAc,CACrBnB,KAAKqB,mB,OAKbsB,EAASM,QAAQP,EAAM,CAAEQ,WAAY,KAAMC,UAAW,KAAMC,QAAS,MAAO,G,CAIhF,GAAIpD,KAAKmB,aAAc,CACrBnB,KAAKqB,mB,EAOT,aAAAgC,CAAcC,GACZ,OAAQA,EAAGzC,KACT,IAAK,QACL,IAAK,IACHyC,EAAGC,iBACHvD,KAAKyB,aACL,M,CAKN,MAAAd,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAO,kBAAkBd,KAAKmB,aAAe,OAAS,MACzDP,EAAA,OAAAC,IAAA,2CAAK2C,KAAK,SAAQ,gBAAgBxD,KAAKmB,aAAY,gBAAgB,oBAAoBL,MAAM,kBAAkB2C,QAAS,IAAMzD,KAAKyB,aAAciC,SAAS,KACxJ9C,EAAA,QAAAC,IAAA,yDAAkB,OAAO2C,KAAK,UAAS,aAAaG,OAAO3D,KAAK4D,UAAqB9C,MAAM,kBACzFF,EAAA,YAAAC,IAAA,2CAAUgD,KAAK,qBAEjBjD,EAAA,QAAAC,IAAA,2CAAMiD,GAAG,oBAAoBhD,MAAM,qBAAqBd,KAAK+D,UAE/DnD,EAAA,OAAAC,IAAA,2CAAKiD,GAAG,oBAAoBhD,MAAM,oBAAoBkD,IAAM3D,GAAQL,KAAK+B,UAAY1B,EAAoBmD,KAAK,SAAQ,kBAAiB,qBACrI5C,EAAA,OAAAC,IAAA,2CAAKC,MAAM,iBACTF,EAAA,QAAAC,IAAA,2CAAMoD,aAAe7B,GAAMpC,KAAKmC,iBAAiBC,O","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-8822c055.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","this","focusableElements","handleTopFocus","attemptFocus","getLastFocusableElement","handleBottomFocus","getFirstFocusableElement","handleKeypress","event","showModal","key","doBeforeClose","opened","componentDidLoad","hostElement","el","setTimeout","closeButton","focus","open","anim","modalContainer","duration","_a","_b","blur","ifxModalOpen","emit","err","close","ifxModalClose","removeEventListener","trigger","triggers","prevented","some","defaultPrevented","openedChanged","newValue","handleOverlayClick","closeOnOverlayClick","handleButtonsSlotChange","e","currentTarget","assignedElements","childElementCount","slotButtonsPresent","render","isAlertVariant","variant","h","Host","ref","class","onClick","onFocus","tabindex","size","role","caption","alertIcon","icon","showCloseButton","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() ifxModalOpen: EventEmitter;\n  @Event() ifxModalClose: 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.ifxModalOpen.emit();\n      });\n\n      this.hostElement.addEventListener('keydown', this.handleKeypress);\n    } catch (err) {\n      this.ifxModalOpen.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.ifxModalClose.emit();\n      });\n      this.hostElement.removeEventListener('keydown', this.handleKeypress);\n    } catch (err) {\n      this.showModal = false;\n      this.ifxModalClose.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-8ccea8df.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as i,h as t,g as s}from"./p-7aa4082c.js";const n=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{position:relative}.sidebar__nav-item:focus,.sidebar__nav-item.header__section:focus{outline:none}.sidebar__nav-item:focus .sidebar__nav-item-icon-wrapper,.sidebar__nav-item.header__section:focus .sidebar__nav-item-icon-wrapper{color:#08665C}.sidebar__nav-item:focus .sidebar__nav-item-label,.sidebar__nav-item.header__section:focus .sidebar__nav-item-label{outline:none;color:#08665C}.sidebar__nav-item:focus .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon,.sidebar__nav-item.header__section:focus .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{color:#08665C}.sidebar__nav-item:hover,.sidebar__nav-item.header__section:hover{outline:none}.sidebar__nav-item:hover .sidebar__nav-item-icon-wrapper,.sidebar__nav-item.header__section:hover .sidebar__nav-item-icon-wrapper{color:#08665C}.sidebar__nav-item:hover .sidebar__nav-item-label,.sidebar__nav-item.header__section:hover .sidebar__nav-item-label{outline:none;color:#08665C}.sidebar__nav-item:hover .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon,.sidebar__nav-item.header__section:hover .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{color:#08665C}.sidebar__nav-item{display:flex;flex-direction:row;align-items:center;width:100%;padding:8px 0px;gap:4px;flex:none;order:0;flex-grow:0;text-decoration:none;color:#1D1D1D;cursor:pointer;font-family:var(--ifx-font-family)}.sidebar__nav-item.extra-padding__bottom{padding:8px 0px 16px 0px}.sidebar__nav-item.active{color:#0A8276}.sidebar__nav-item.active-section::before{content:"";position:absolute;left:-32px;height:40px;width:2px;background:#0A8276}.sidebar__nav-item.open{padding:8px 0px}.sidebar__nav-item.open .sidebar__nav-item-label{font-size:16px;font-style:normal;font-weight:400;line-height:24px}.sidebar__nav-item.open .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{transform:rotate(-180deg)}.sidebar__nav-item.header__section{box-sizing:padding-box;border-top:1px solid #EEEDED;padding:16px 0px;display:-webkit-flex;-webkit-line-clamp:1;-webkit-box-orient:horizontal;overflow:hidden;text-overflow:ellipsis}.sidebar__nav-item.header__section.no-top-border{border-top:none}.sidebar__nav-item.header__section.active-section::before{content:"";position:absolute;left:-32px;height:40px;width:2px;background:#0A8276}.sidebar__nav-item.header__section.open{padding:16px 0px 8px 0px}.sidebar__nav-item.header__section.open .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{transform:rotate(-180deg)}.sidebar__nav-item.header__section .sidebar__nav-item-label{color:#1D1D1D;font-family:Source Sans 3;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.sidebar__nav-item.submenu__item{padding:4px 0px}.sidebar__nav-item.submenu__item.extra-padding__bottom{padding:4px 0px 16px 0px}.sidebar__nav-item .sidebar__nav-item-icon-wrapper{display:flex;width:24px;height:24px;justify-content:center;align-items:center;gap:8px;flex-shrink:0}.sidebar__nav-item .sidebar__nav-item-icon-wrapper.noIcon{display:none}.sidebar__nav-item .sidebar__nav-item-icon-wrapper ifx-icon{width:16px;height:16px}.sidebar__nav-item .sidebar__nav-item-label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;display:flex;align-items:center;flex:none;order:1;flex-grow:1;cursor:pointer}.sidebar__nav-item .sidebar__nav-item-indicator{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px 4px;flex:none;order:2;flex-grow:0}.expandable__submenu{display:none;list-style-type:none;flex-direction:column;padding:0;margin:0;padding-left:40px}.expandable__submenu.open{display:flex}.header__section+.expandable__submenu{padding-left:0}';const a=n;const r=class{constructor(t){e(this,t);this.ifxSidebarMenu=i(this,"ifxSidebarMenu",7);this.ifxSidebarNavigationItem=i(this,"ifxSidebarNavigationItem",7);this.ifxSidebarActionItem=i(this,"ifxSidebarActionItem",7);this.icon="";this.hasIcon=true;this.hasIconWrapper=false;this.href="";this.internalHref="";this.target="_self";this.isExpandable=false;this.isNested=true;this.isSubMenuItem=false;this.numberIndicator=undefined;this.active=false;this.isActionItem=false;this.internalActiveState=false;this.value="";this.handleItemClick=undefined}handleActiveChange(e,i){if(this.isActionItem){this.internalActiveState=false;return}this.internalActiveState=e;if(e!==i){let i=this.getNavItem(this.el.shadowRoot);if(!this.isExpandable&&!e){this.handleClassList(i,"remove","active")}if(!this.isExpandable&&e){this.handleClassList(i,"add","active")}}}handleConsoleError(e){if(e.detail){this.hasIcon=false}else{this.hasIcon=true}}handleEventEmission(){this.ifxSidebarMenu.emit(this.el)}handleClassList(e,i,t){e.classList[i](t);if(i==="contains"){return e.classList.contains(t)}}getExpandableMenu(){const e=this.el.shadowRoot.querySelector(".expandable__submenu");return e}getNavItem(e){return e===null||e===void 0?void 0:e.querySelector(".sidebar__nav-item")}getSidebarMenuItems(e=this.el){const i=e.querySelectorAll("ifx-sidebar-item");if(i.length===0){return e.shadowRoot.querySelectorAll("ifx-sidebar-item")}return i}getSidebarMenuItem(){const e=this.el.shadowRoot.querySelector(".sidebar__nav-item");return e}toggleSubmenu(){if(this.isExpandable){const e=this.getSidebarMenuItem();const i=this.getExpandableMenu();this.handleClassList(i,"toggle","open");this.handleClassList(e,"toggle","open");this.handleEventEmission()}else{if(this.isActionItem){this.ifxSidebarActionItem.emit(this.el);return}else{this.handleActiveChange(true,this.internalActiveState);this.ifxSidebarNavigationItem.emit(this.el)}if(this.handleItemClick){this.handleItemClick(this.el)}}}handleExpandableMenu(e){const i=this.getExpandableMenu();e.forEach((e=>{const t=document.createElement("li");t.appendChild(e);i.appendChild(t)}))}parentElementIsSidebar(){const e=this.el.parentElement;if(e.tagName.toUpperCase()==="IFX-SIDEBAR"){return true}else return false}checkIfMenuItemIsNested(){const e=this.parentElementIsSidebar();if(e){this.isNested=false}}checkIfMenuItemIsSubMenu(){const e=this.el.parentElement;const i=this.getNavItem(e.shadowRoot);if(e.tagName.toUpperCase()==="IFX-SIDEBAR-ITEM"&&!this.handleClassList(i,"contains","header__section")){this.isSubMenuItem=true}else{this.isSubMenuItem=false}}isActive(e){const i=e.getAttribute("active");const t=i==="true";return t}getParentSection(e){let i=e.parentElement;while(i&&i.tagName.toUpperCase()!=="IFX-SIDEBAR"){if(i.tagName.toUpperCase()==="IFX-SIDEBAR-ITEM"){return i}i=i.parentElement}return null}handleBorderIndicatorDisplacement(e){const i=(e,t)=>{const s=this.isActive(e);if(s){const e=this.handleClassList(t,"contains","open");const i=this.getActiveItemSection();if(!e){this.handleClassList(i,"add","active-section")}else{this.handleClassList(i,"remove","active-section")}}const n=this.getSidebarMenuItems(e);n.forEach((e=>i(e,t)))};const t=this.getSidebarMenuItems();t.forEach((t=>i(t,e)))}setHref(){if(this.href.toLowerCase().trim()===""){this.internalHref=undefined}else this.internalHref=this.href}getActiveItemSection(){const e=this.parentElementIsSidebar();if(e){const e=this.getNavItem(this.el.shadowRoot);return e}else{const e=this.getNavItem(this.el.shadowRoot);return e}}async setActiveClasses(){const e=this.getNavItem(this.el.shadowRoot);this.handleClassList(e,"add","active")}async expandMenu(e){const i=this.getSidebarMenuItem();const t=this.getExpandableMenu();this.handleClassList(t,"add","open");this.handleClassList(i,"add","open");if(e){this.handleClassList(t,"remove","active-section");this.handleClassList(i,"remove","active-section")}}async isItemExpandable(){return this.isExpandable}handleActiveState(){if(this.internalActiveState){this.setActiveClasses()}}handleKeyDown(e){if(e.key==="Enter"){this.toggleSubmenu()}}componentDidLoad(){this.handleActiveState();if(this.isExpandable){const e=this.getSidebarMenuItems();this.handleExpandableMenu(e)}}componentWillLoad(){this.internalActiveState=this.active;this.checkIfMenuItemIsNested();this.checkIfMenuItemIsSubMenu();this.setHref();const e=this.getSidebarMenuItems();if(e.length!==0){this.isExpandable=true}else{this.isExpandable=false}}componentWillUpdate(){if(this.active&&!this.internalActiveState){this.internalActiveState=this.active;this.ifxSidebarNavigationItem.emit(this.el)}}render(){var e,i;return t("div",{key:"300c33eb3478fd56763957338d35b71e10e7f051"},t("a",{key:"baec46c86811da4d99f462db822d0080128ba168",tabIndex:1,onKeyDown:e=>this.handleKeyDown(e),href:this.internalHref,onClick:()=>this.toggleSubmenu(),target:this.target,class:`sidebar__nav-item ${!this.isNested&&this.isExpandable?"header__section":""} ${this.isSubMenuItem?"submenu__item":""}`},this.icon&&t("div",{key:"25774f4e3389b73d1835bc96801d7c2671b57754",class:`sidebar__nav-item-icon-wrapper ${!this.hasIcon?"noIcon":""}`},t("ifx-icon",{key:"2598dbcaa212d27c687d2920b8a9e6a17b8ee1a0",icon:this.icon})),t("div",{key:"5e6567053aaf33af5b01bdf997f16fb176f76317",class:"sidebar__nav-item-label"},t("slot",{key:"624d78a76b5b87b31caf10d294299fe2b643785a"})),(this.isExpandable||((e=this.numberIndicator)===null||e===void 0?void 0:e.trim()))&&t("div",{key:"5e8afc60f5da57e00390e7f7982ef87c724cdde6",class:"sidebar__nav-item-indicator"},this.isExpandable&&t("span",{key:"321321f3ba9bda67d439c719776ae51cb1df172d",class:"item__arrow-wrapper"},t("ifx-icon",{key:"992934501145b6f641d23a4975c24ce4c8a39ef5",icon:"chevron-down-12"})),((i=this.numberIndicator)===null||i===void 0?void 0:i.trim())&&!this.isExpandable&&!this.isNested&&t("span",{key:"41ea0d96c7d1e87f92093570863218ef6240a285",class:"item__number-indicator"},t("ifx-number-indicator",{key:"2e45be1b110dfa845f36cc13e875f2712e7c9039"},this.numberIndicator)))),this.isExpandable&&t("ul",{key:"15674f7d3e5462fa11e6048737e3f865ac2b16b8",class:"expandable__submenu"}))}get el(){return s(this)}static get watchers(){return{active:["handleActiveChange"]}}};r.style=a;export{r as ifx_sidebar_item};
-//# sourceMappingURL=p-8ccea8df.entry.js.map

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

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

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

@@ -1,2 +0,0 @@
-import{r as e,d as t,h as a,g as s}from"./p-7aa4082c.js";const i="*{padding:0;margin:0}.templates__container{display:flex;flex-direction:column;align-items:center}.templates__container .back__btn-wrapper{display:none}.templates__container .back__btn-wrapper.show{display:flex;justify-content:space-between;width:100%}.templates__container .back__btn-wrapper .alert__wrapper{display:none}.templates__container .back__btn-wrapper .alert__wrapper.show{display:block}.templates__container .templates__wrapper{display:flex;padding:20px 0px;gap:20px;flex-wrap:wrap}.templates__container .templates__title.hide{display:none}";const r=i;const n=class{constructor(a){e(this,a);this.tableTemplate=t(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/table_template.png`);this.wizardTemplate=t(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/wizard_template.png`)}toggleTemplate(e){const t=this.el.shadowRoot.querySelector(".templates__wrapper").querySelectorAll("ifx-template");t.forEach((t=>{t.toggleTemplate(e)}))}handleError(e){const t=this.el.shadowRoot.querySelector(".alert__wrapper");if(e.detail){t.classList.add("show")}else{t.classList.remove("show")}}filterTemplates(e){const t=this.el.shadowRoot.querySelector(".templates__title");const a=this.el.shadowRoot.querySelector(".back__btn-wrapper");if(e.detail){t.classList.add("hide");if(e.detail!=="details"){a.classList.add("show")}this.toggleTemplate(e.detail)}else{t.classList.remove("hide");a.classList.remove("show");this.toggleTemplate(null)}}closeAlert(){const e=this.el.shadowRoot.querySelector(".alert__wrapper");e.classList.remove("show")}render(){return a("div",{key:"021302ff1be7a098818f46abea24d04084ca3048",class:"templates__container"},a("div",{key:"7bdbf267abf9e7684b6f15d2149c6e0130ce3458",class:"back__btn-wrapper"},a("ifx-icon-button",{key:"b38d94883924f12f40619ad96b3d4ef1da3a8831",onClick:()=>this.filterTemplates(false),shape:"round",variant:"tertiary",icon:"arrow-left-16",target:"_blank",size:"m"}),a("div",{key:"7e6bcb6482bfebec1d9917e1ffa8655124d9e67d",class:"alert__wrapper"},a("ifx-alert",{key:"4687bc498dab92676f947838398b7257e059f3c2",onClick:()=>this.closeAlert(),"aria-live":"assertive",variant:"danger",icon:"c-info-24"},"All fields are mandatory"))),a("h2",{key:"c2420ad1ca629e5702b64043b47a113e9b387b87",class:"templates__title"},"Choose your template"),a("div",{key:"5d7b84eaddb49ec2a98eae1bb19515fcc11eb7e5",class:"templates__wrapper"},a("ifx-template",{key:"bff5d0e5143a8d0a34904fc65564e0ce0487d437",name:"template-01",thumbnail:this.tableTemplate}),a("ifx-template",{key:"c8621f682b5d4eaf2dbab6ff41def757f7a8ddb0",name:"template-02",thumbnail:this.wizardTemplate})))}static get assetsDirs(){return["assets"]}get el(){return s(this)}};n.style=r;export{n as ifx_templates_ui};
-//# sourceMappingURL=p-a76a2ec0.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["templatesUiCss","IfxTemplatesUiStyle0","TemplatesUI","constructor","hostRef","this","tableTemplate","getAssetPath","wizardTemplate","toggleTemplate","currTemp","templates","el","shadowRoot","querySelector","querySelectorAll","forEach","template","handleError","e","alertWrapper","detail","classList","add","remove","filterTemplates","title","backBtn","closeAlert","render","h","key","class","onClick","shape","variant","icon","target","size","name","thumbnail"],"sources":["src/components/templates/templates-ui/templates-ui.scss?tag=ifx-templates-ui&encapsulation=shadow","src/components/templates/templates-ui/templates-ui.tsx"],"sourcesContent":["* { \n  padding: 0;\n  margin: 0;\n}\n\n.templates__container { \n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  & .back__btn-wrapper { \n    display: none;\n    &.show { \n      display: flex;\n      justify-content: space-between;\n      width: 100%;\n    }\n\n    & .alert__wrapper { \n      display: none;\n\n      &.show { \n        display: block;\n      }\n    }\n  }\n\n  & .templates__wrapper { \n    display: flex;\n    padding: 20px 0px;\n    gap: 20px;\n    // justify-content: space-evenly;\n    flex-wrap: wrap;\n  }\n\n  & .templates__title { \n    &.hide { \n      display: none;\n    }\n  }\n}\n\n\n\n","import { Component, h, Listen, Element, getAssetPath } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-templates-ui',\n  styleUrl: 'templates-ui.scss',\n  shadow: true,\n  assetsDirs: ['assets']\n})\n\nexport class TemplatesUI {\n  @Element() el: HTMLElement;\n\n  private tableTemplate = getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/table_template.png`);\n  private wizardTemplate = getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/wizard_template.png`);\n\n\n  toggleTemplate(currTemp) { \n    const templates = this.el.shadowRoot.querySelector('.templates__wrapper').querySelectorAll('ifx-template');\n      templates.forEach((template) => { \n        template.toggleTemplate(currTemp)\n      })\n  }\n\n  @Listen('fieldError')\n  handleError(e) { \n    const alertWrapper = this.el.shadowRoot.querySelector('.alert__wrapper');\n    if(e.detail) { \n      alertWrapper.classList.add('show');\n    } else { \n      alertWrapper.classList.remove('show');\n    }\n  }\n\n  @Listen('toggleTemplates')\n  filterTemplates(e) {\n    const title = this.el.shadowRoot.querySelector('.templates__title');\n    const backBtn = this.el.shadowRoot.querySelector('.back__btn-wrapper');\n    if(e.detail) { \n      title.classList.add('hide');\n      if(e.detail !== 'details') { \n        backBtn.classList.add('show');\n      }\n      this.toggleTemplate(e.detail)\n    } else { \n      title.classList.remove('hide');\n      backBtn.classList.remove('show');\n      this.toggleTemplate(null)\n    }\n  }\n\n  closeAlert() { \n    const alertWrapper = this.el.shadowRoot.querySelector('.alert__wrapper');\n    alertWrapper.classList.remove('show');\n  }\n\n  render() {\n    return (\n      <div class='templates__container'>\n        <div class=\"back__btn-wrapper\">\n          <ifx-icon-button onClick={() => this.filterTemplates(false)} shape=\"round\" variant=\"tertiary\" icon=\"arrow-left-16\" target=\"_blank\" size=\"m\" />\n          <div class=\"alert__wrapper\">\n            <ifx-alert onClick={() => this.closeAlert()} aria-live=\"assertive\" variant=\"danger\" icon=\"c-info-24\">All fields are mandatory</ifx-alert>\n          </div>\n        </div>\n        <h2 class=\"templates__title\">Choose your template</h2>\n        <div class=\"templates__wrapper\">\n          <ifx-template name='template-01' thumbnail={this.tableTemplate} />\n          <ifx-template name='template-02' thumbnail={this.wizardTemplate} />\n        </div>\n      </div>\n    )\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,0iBACvB,MAAAC,EAAeD,E,MCQFE,EAAW,MAPxB,WAAAC,CAAAC,G,UAUUC,KAAAC,cAAgBC,EAAa,+FAC7BF,KAAAG,eAAiBD,EAAa,+F,CAGtC,cAAAE,CAAeC,GACb,MAAMC,EAAYN,KAAKO,GAAGC,WAAWC,cAAc,uBAAuBC,iBAAiB,gBACzFJ,EAAUK,SAASC,IACjBA,EAASR,eAAeC,EAAS,G,CAKvC,WAAAQ,CAAYC,GACV,MAAMC,EAAef,KAAKO,GAAGC,WAAWC,cAAc,mBACtD,GAAGK,EAAEE,OAAQ,CACXD,EAAaE,UAAUC,IAAI,O,KACtB,CACLH,EAAaE,UAAUE,OAAO,O,EAKlC,eAAAC,CAAgBN,GACd,MAAMO,EAAQrB,KAAKO,GAAGC,WAAWC,cAAc,qBAC/C,MAAMa,EAAUtB,KAAKO,GAAGC,WAAWC,cAAc,sBACjD,GAAGK,EAAEE,OAAQ,CACXK,EAAMJ,UAAUC,IAAI,QACpB,GAAGJ,EAAEE,SAAW,UAAW,CACzBM,EAAQL,UAAUC,IAAI,O,CAExBlB,KAAKI,eAAeU,EAAEE,O,KACjB,CACLK,EAAMJ,UAAUE,OAAO,QACvBG,EAAQL,UAAUE,OAAO,QACzBnB,KAAKI,eAAe,K,EAIxB,UAAAmB,GACE,MAAMR,EAAef,KAAKO,GAAGC,WAAWC,cAAc,mBACtDM,EAAaE,UAAUE,OAAO,O,CAGhC,MAAAK,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,wBACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,qBACTF,EAAA,mBAAAC,IAAA,2CAAiBE,QAAS,IAAM5B,KAAKoB,gBAAgB,OAAQS,MAAM,QAAQC,QAAQ,WAAWC,KAAK,gBAAgBC,OAAO,SAASC,KAAK,MACxIR,EAAA,OAAAC,IAAA,2CAAKC,MAAM,kBACTF,EAAA,aAAAC,IAAA,2CAAWE,QAAS,IAAM5B,KAAKuB,aAAY,YAAY,YAAYO,QAAQ,SAASC,KAAK,aAAW,8BAGxGN,EAAA,MAAAC,IAAA,2CAAIC,MAAM,oBAAkB,wBAC5BF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,sBACTF,EAAA,gBAAAC,IAAA,2CAAcQ,KAAK,cAAcC,UAAWnC,KAAKC,gBACjDwB,EAAA,gBAAAC,IAAA,2CAAcQ,KAAK,cAAcC,UAAWnC,KAAKG,kB","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as e,g as s}from"./p-7aa4082c.js";const n=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.ifx-multiselect-container{position:relative;box-sizing:border-box;font-family:var(--ifx-font-family)}.ifx-multiselect-container.small-select{height:36px}.ifx-multiselect-container.medium-select{height:40px}.ifx-multiselect-container:hover{cursor:pointer}.ifx-multiselect-container .ifx-label-wrapper{font-size:1rem;line-height:1.5rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-error-message-wrapper{color:#CD002F;font-size:0.75rem;line-height:1rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-multiselect-wrapper{background-color:#FFFFFF;box-sizing:border-box;position:relative;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;width:100%;font-weight:400;font-style:normal}.ifx-multiselect-container .ifx-multiselect-wrapper.small-select{height:36px;padding:8px 12px;font-size:0.875rem;line-height:1.25rem}.ifx-multiselect-container .ifx-multiselect-wrapper.medium-select{height:40px;padding:8px 16px;font-size:1rem;line-height:1.5rem}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible{outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active){outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active)::before{content:"";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:2px}.ifx-multiselect-container .ifx-multiselect-wrapper.disabled{background:#EEEDED;color:#575352;border-color:#575352;cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ifx-multiselect-container .ifx-multiselect-wrapper.error{border-color:#CD002F}.ifx-multiselect-container .ifx-multiselect-wrapper:hover:not(.focus,:focus){border-color:#575352}.ifx-multiselect-container .ifx-multiselect-wrapper.active{border-color:#0A8276 !important}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-up{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-down{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-up{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-down{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.is-flipped .ifx-multiselect-dropdown-menu{top:auto;bottom:100%}.ifx-multiselect-container .ifx-multiselect-input{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ifx-multiselect-container .ifx-multiselect-input.placeholder{opacity:0.5}.ifx-multiselect-container .ifx-multiselect-icon-container{margin-left:auto;align-items:center;display:flex}.ifx-multiselect-container .ifx-clear-button{display:flex}.ifx-multiselect-container .ifx-multiselect-dropdown-menu{position:absolute;top:100%;left:0;width:100%;margin-top:2px;background-color:#fff;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1);max-height:300px;overflow-y:auto;z-index:var(--dynamic-z-index, 1)}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input{position:sticky;top:0;left:0;z-index:1;width:100%;padding:8px 16px;font-size:1rem;line-height:1.5rem;font-style:normal;font-weight:400;box-sizing:border-box;background-color:#FFFFFF;border:none;border-bottom:1px solid #8D8786}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input:focus{outline:none;border:1px solid #0A8276}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input::placeholder{color:#999}.ifx-multiselect-container .option{position:relative;padding:8px 16px;gap:8px;align-items:center;display:flex;font-style:normal;font-weight:400}.ifx-multiselect-container .option.small-select{font-size:0.875rem;line-height:1.25rem}.ifx-multiselect-container .option.medium-select{font-size:1rem;line-height:1.5rem}.ifx-multiselect-container .option:hover{background-color:#EEEDED}.ifx-multiselect-container .option:focus:not(.disabled){background-color:#BFBBBB;outline:none}.ifx-multiselect-container .option.is-highlighted{background-color:#EEEDED}.ifx-multiselect-container .option.sub-option{padding-left:30px;}.ifx-multiselect-container .option.disabled:hover{cursor:default}.ifx-multiselect-container .option label{cursor:inherit}.select-all-wrapper{padding-top:8px}';const o=n;function l(t,i){let e;return function s(...n){const o=()=>{clearTimeout(e);t(...n)};clearTimeout(e);e=setTimeout(o,i)}}const r=class{constructor(e){t(this,e);this.ifxSelect=i(this,"ifxSelect",7);this.ifxMultiselectIsOpen=i(this,"ifxMultiselectIsOpen",7);if(e.$hostElement$["s-ei"]){this.internals=e.$hostElement$["s-ei"]}else{this.internals=e.$hostElement$.attachInternals();e.$hostElement$["s-ei"]=this.internals}this.currentIndex=0;this.handleSearch=l((t=>{const i=t.value.toLowerCase();if(i===""){this.filteredOptions=this.loadedOptions}else{this.filteredOptions=this.loadedOptions.filter((t=>t.label.toLowerCase().includes(i)))}}),300);this.handleDocumentClick=t=>{const i=t.composedPath();if(!i.includes(this.dropdownElement)){this.dropdownOpen=false;document.removeEventListener("click",this.handleDocumentClick);this.ifxMultiselectIsOpen.emit(this.dropdownOpen)}};this.name=undefined;this.options=undefined;this.batchSize=50;this.size="medium (40px)";this.disabled=false;this.error=false;this.internalError=false;this.errorMessage="Error";this.internalErrorMessage=undefined;this.label="";this.persistentSelectedOptions=[];this.placeholder="";this.dropdownOpen=false;this.dropdownFlipped=undefined;this.maxItemCount=undefined;this.zIndex=1;this.isLoading=false;this.loadedOptions=[];this.filteredOptions=[];this.showSearch=true;this.showSelectAll=true;this.optionCount=0;this.optionsProcessed=false}updateOptions(){this.loadedOptions=[];this.filteredOptions=[];this.optionCount=0;this.optionsProcessed=false;this.persistentSelectedOptions=[];this.loadInitialOptions()}async loadInitialOptions(){this.isLoading=true;this.internalError=this.error;this.internalErrorMessage=this.errorMessage;this.loadedOptions=await this.fetchOptions(0,this.batchSize);this.isLoading=false}async fetchMoreOptions(){this.isLoading=true;const t=await this.fetchOptions(this.loadedOptions.length,this.batchSize);this.loadedOptions=[...this.loadedOptions,...t];this.isLoading=false}handleScroll(t){const i=t.target;const e=Math.floor((i.scrollHeight-i.clientHeight)/2);if(i.scrollTop>=e){this.fetchMoreOptions()}}async fetchOptions(t,i){let e=[];if(typeof this.options==="string"){try{e=JSON.parse(this.options)}catch(t){console.error("Failed to parse options:",t)}}else if(Array.isArray(this.options)){e=this.options}else{console.error("Unexpected value for options:",this.options)}if(!this.optionsProcessed){this.optionCount=this.countOptions(e);const t=this.collectSelectedOptions(e);const i=t.filter((t=>!this.persistentSelectedOptions.some((i=>i.value==t.value))));this.persistentSelectedOptions=[...this.persistentSelectedOptions,...i];this.optionsProcessed=true}const s=e.slice(t,t+i);return s}collectSelectedOptions(t){let i=[];for(const e of t){if(e.selected){if(e.children&&e.children.length>0){i=i.concat(this.collectLeafOptions(e.children))}else{i.push(e)}}else{if(e.children&&e.children.length>0){i=i.concat(this.collectSelectedOptions(e.children))}}}return i}collectLeafOptions(t){let i=[];for(const e of t){if(e.children&&e.children.length>0){i=i.concat(this.collectLeafOptions(e.children))}else{i.push(e)}}return i}countOptions(t){let i=0;for(const e of t){if(e.children&&e.children.length>=0){i+=this.countOptions(e.children)}else{i++}}return i}componentDidLoad(){setTimeout((()=>{this.positionDropdown()}),500)}componentWillLoad(){this.loadInitialOptions();this.filteredOptions=[...this.loadedOptions]}updateInternalError(){this.internalError=this.error}updateInternalErrorMessage(){this.internalErrorMessage=this.errorMessage}loadedOptionsChanged(){this.filteredOptions=[...this.loadedOptions]}onSelectionChange(t,i){const e=new FormData;t.forEach((t=>e.append(this.name,t.value)));this.internals.setFormValue(e)}handleOptionClick(t){this.internalError=false;if(!t.selected&&this.isSelectionLimitReached(t)){t.checkboxRef.toggleCheckedState(false);this.internalError=true;this.internalErrorMessage="Please consider the maximum number of items to choose from";return}this.updateSelection(t);this.ifxSelect.emit(this.persistentSelectedOptions)}isSelectionLimitReached(t){let i=t.children?t.children.length:1;return this.maxItemCount&&this.persistentSelectedOptions.length+i>this.maxItemCount&&!this.persistentSelectedOptions.some((i=>i.value===t.value))}updateSelection(t){const i=this.persistentSelectedOptions.some((i=>i.value===t.value));if(t.children&&t.children.length>0){this.handleParentOptionClick(t)}else{this.handleChildOptionClick(t,i)}}async selectAll(){const t=await this.fetchOptions(0,this.optionCount);this.selectAllRecursive(t);this.ifxSelect.emit(this.persistentSelectedOptions)}selectAllRecursive(t){for(const i of t){if(i.children&&i.children.length>0){this.selectAllRecursive(i.children)}else{if(!this.persistentSelectedOptions.some((t=>t.value===i.value))){i.selected=true;this.persistentSelectedOptions=[...this.persistentSelectedOptions,i]}}}}handleParentOptionClick(t){const i=t.children.every((t=>this.persistentSelectedOptions.some((i=>i.value===t.value))));if(i){this.persistentSelectedOptions=[...this.persistentSelectedOptions.filter((i=>!t.children.some((t=>t.value===i.value))))];t.selected=false;t.children.forEach((t=>{t.selected=false}))}else{const i=[...t.children.filter((t=>!this.persistentSelectedOptions.some((i=>i.value===t.value))))];t.selected=true;t.children.forEach((t=>{t.selected=true}));this.persistentSelectedOptions=[...this.persistentSelectedOptions,...i]}}handleChildOptionClick(t,i){if(i){this.persistentSelectedOptions=[...this.persistentSelectedOptions.filter((i=>i.value!==t.value))];t.selected=false}else{this.persistentSelectedOptions=[...this.persistentSelectedOptions,t];t.selected=true}this.updateParentSelectedState()}updateParentSelectedState(){this.loadedOptions.forEach((t=>{var i;if(((i=t.children)===null||i===void 0?void 0:i.length)>0){if(t.children.every((t=>t.selected===true)))t.selected=true;else{t.selected=false;if(this.isOptionIndeterminate(t)){t.indeterminate=true}else{t.indeterminate=false}}}}))}getSizeClass(){return`${this.size}`==="s"?"small-select":"medium-select"}toggleDropdown(){this.dropdownOpen=!this.dropdownOpen;setTimeout((()=>{if(this.dropdownOpen){document.addEventListener("click",this.handleDocumentClick)}this.ifxMultiselectIsOpen.emit(this.dropdownOpen)}),0);this.zIndex=r.globalZIndex++}waitForElement(t,i,e=50){let s=0;function n(){requestAnimationFrame((()=>{const o=t();if(o.length>0||s>e){i(o)}else{s++;n()}}))}n()}handleKeyDown(t){if(this.disabled)return;const i=this.dropdownElement.querySelectorAll(".option");switch(t.code){case"Enter":this.toggleDropdown();this.waitForElement((()=>this.dropdownElement.querySelectorAll(".option")),(t=>{this.updateHighlightedOption(t)}));break;case"Space":this.toggleDropdown();this.waitForElement((()=>this.dropdownElement.querySelectorAll(".option")),(t=>{this.updateHighlightedOption(t)}));break;case"ArrowDown":this.handleArrowDown(i);if(this.dropdownOpen){this.updateHighlightedOption(i)}break;case"ArrowUp":this.handleArrowUp(i);if(this.dropdownOpen){this.updateHighlightedOption(i)}break}}handleWrapperClick(t){this.positionDropdown();if(t.currentTarget===t.target){this.toggleDropdown()}}clearSelection(){this.persistentSelectedOptions=[];this.ifxSelect.emit(this.persistentSelectedOptions)}positionDropdown(){var t;const i=(t=this.el.shadowRoot.querySelector(".ifx-multiselect-wrapper"))===null||t===void 0?void 0:t.getBoundingClientRect();const e=window.innerHeight-i.bottom;const s=i.top;if(s>e&&i.height>e||i.bottom>window.innerHeight){this.dropdownFlipped=true}else{this.dropdownFlipped=false}}updateHighlightedOption(t){t.forEach((t=>t.classList.remove("is-highlighted")));if(this.currentIndex>=0&&this.currentIndex<t.length){t[this.currentIndex].classList.add("is-highlighted");t[this.currentIndex].focus()}}handleArrowDown(t){if(this.currentIndex<t.length-1){this.currentIndex++}else{this.currentIndex=0}}handleArrowUp(t){if(this.currentIndex>0){this.currentIndex--}else{this.currentIndex=t.length-1}}handleOptionKeyDown(t,i){if(t.key!=="ArrowUp"&&t.key!=="ArrowDown")t.stopPropagation();if(t.key==="Enter"||t.key===" "){this.handleOptionClick(i)}}renderOption(t,i){var s;const n=this.isOptionIndeterminate(t);const o=t.children?n||this.isOptionSelected(t):this.persistentSelectedOptions.some((i=>i.value===t.value));const l=!o&&this.maxItemCount&&this.persistentSelectedOptions.length>=this.maxItemCount;const r=`checkbox-${t.value}-${i}`;return e("div",{class:"option-wrapper"},e("div",{class:`option ${o?"selected":""} ${l?"disabled":""} \n        ${this.getSizeClass()}`,"data-value":t.value,onKeyDown:i=>!l&&this.handleOptionKeyDown(i,t),onClick:()=>!l&&this.handleOptionClick(t),tabindex:"0",role:`${((s=t.children)===null||s===void 0?void 0:s.length)>0?"treeitem":"option"}`},e("ifx-checkbox",{tabIndex:-1,ref:i=>t.checkboxRef=i,id:r,size:"s",checked:n?false:o,indeterminate:n,disabled:l}),e("label",{htmlFor:r,onClick:t=>t.stopPropagation()},t.label)),t.children&&t.children.map(((t,e)=>this.renderSubOption(t,`${i}-${e}`))))}isOptionSelected(t){if(!t.children)return false;return t.children.every((t=>this.persistentSelectedOptions.some((i=>i.value===t.value))))}isOptionIndeterminate(t){if(!t.children)return false;const i=t.children.filter((t=>this.persistentSelectedOptions.some((i=>i.value===t.value)))).length;return i>0&&i<t.children.length}findInOptions(t,i){for(const e of t){if(e.value===i){return e}if(e.children){const t=this.findInOptions(e.children,i);if(t){return t}}}return null}renderSubOption(t,i){var s;const n=this.persistentSelectedOptions.some((i=>i.value===t.value));const o=!n&&this.maxItemCount&&this.persistentSelectedOptions.length>=this.maxItemCount;const l=`checkbox-${t.value}-${i}`;return e("div",{class:`option sub-option ${n?"selected":""} ${this.getSizeClass()} ${o?"disabled":""}`,"data-value":t.value,role:`${((s=t.children)===null||s===void 0?void 0:s.length)>0?"option":"treeitem"}`,onKeyDown:i=>!o&&this.handleOptionKeyDown(i,t),onClick:()=>!o&&this.handleOptionClick(t),tabindex:"0"},e("ifx-checkbox",{tabIndex:-1,ref:i=>t.checkboxRef=i,id:l,size:"s",checked:n,disabled:o}),e("label",{htmlFor:l,onClick:t=>t.stopPropagation()},t.label))}renderSelectAll(){const t=this.persistentSelectedOptions.length===this.optionCount;const i=this.persistentSelectedOptions.length===0;const s=this.optionCount>0&&!i&&!t;const n=this;function o(){if(t){n.clearSelection()}else{n.selectAll()}}function l(t){if(t.key!=="ArrowUp"&&t.key!=="ArrowDown")t.stopPropagation();if(t.key==="Enter"||t.key===" "){o()}}return e("div",{class:"select-all-wrapper"},e("div",{class:`option ${this.getSizeClass()}`,tabindex:"0",onKeyDown:t=>l(t),onClick:o},e("ifx-checkbox",{tabIndex:-1,id:"selectAll",checked:t,indeterminate:s,size:"s"}),e("label",{htmlFor:"selectAll"},"Select all")),e("ifx-dropdown-separator",null))}render(){const t=this.persistentSelectedOptions.filter((t=>{const i=this.persistentSelectedOptions.some((i=>i.children&&i.children.some((i=>i.value===t.value))&&i.selected));return!i})).map((t=>t.label)).join(", ");return e("div",{class:`ifx-multiselect-container`,ref:t=>this.dropdownElement=t},this.label?e("div",{class:"ifx-label-wrapper"},e("span",null,this.label)):null,e("div",{class:`ifx-multiselect-wrapper \n        ${this.getSizeClass()} \n        ${this.dropdownOpen?"active":""} \n        ${this.dropdownFlipped?"is-flipped":""}\n        ${this.internalError?"error":""}\n        ${this.disabled?"disabled":""}`,tabindex:"0",onClick:this.disabled?undefined:t=>this.handleWrapperClick(t),onKeyDown:this.disabled?undefined:t=>this.handleKeyDown(t)},e("div",{class:`ifx-multiselect-input \n          ${this.persistentSelectedOptions.length===0?"placeholder":""}\n          `,onClick:this.disabled?undefined:()=>this.toggleDropdown()},this.persistentSelectedOptions.length>0?t:this.placeholder),this.dropdownOpen&&e("div",{class:"ifx-multiselect-dropdown-menu",onScroll:t=>this.handleScroll(t),style:{"--dynamic-z-index":this.zIndex.toString()}},this.showSearch&&e("input",{type:"text",role:"textbox",class:"search-input",onKeyDown:t=>{t.stopPropagation()},onInput:t=>this.handleSearch(t.target),placeholder:"Search..."}),this.showSelectAll&&this.renderSelectAll(),this.filteredOptions.map(((t,i)=>this.renderOption(t,i))),this.isLoading&&e("div",null,"Loading more options...")),e("div",{class:"ifx-multiselect-icon-container"},this.persistentSelectedOptions.length>0&&e("div",{class:"ifx-clear-button",onClick:this.disabled?undefined:()=>this.clearSelection()},e("ifx-icon",{icon:"cremove16"})),e("div",{class:"icon-wrapper-up",onClick:this.disabled?undefined:()=>this.toggleDropdown()},e("ifx-icon",{key:"icon-up",icon:"chevronup-16"})),e("div",{class:"icon-wrapper-down",onClick:this.disabled?undefined:()=>this.toggleDropdown()},e("ifx-icon",{key:"icon-down",icon:"chevron-down-16"})))),this.internalError?e("div",{class:"ifx-error-message-wrapper"},e("span",null,this.internalErrorMessage)):null)}static get formAssociated(){return true}get el(){return s(this)}static get watchers(){return{options:["updateOptions"],error:["updateInternalError"],errorMessage:["updateInternalErrorMessage"],loadedOptions:["loadedOptionsChanged"],persistentSelectedOptions:["onSelectionChange"]}}};r.globalZIndex=1;r.style=o;export{r as ifx_multiselect};
-//# sourceMappingURL=p-e3ce1662.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["multiselectCss","IfxMultiselectStyle0","debounce","func","wait","timeout","executedFunction","args","later","clearTimeout","setTimeout","Multiselect","this","currentIndex","handleSearch","targetElement","searchTerm","value","toLowerCase","filteredOptions","loadedOptions","filter","option","label","includes","handleDocumentClick","event","path","composedPath","dropdownElement","dropdownOpen","document","removeEventListener","ifxMultiselectIsOpen","emit","updateOptions","optionCount","optionsProcessed","persistentSelectedOptions","loadInitialOptions","isLoading","internalError","error","internalErrorMessage","errorMessage","fetchOptions","batchSize","fetchMoreOptions","moreOptions","length","handleScroll","element","target","halfwayPoint","Math","floor","scrollHeight","clientHeight","scrollTop","startIndex","count","allOptions","options","JSON","parse","err","console","Array","isArray","countOptions","initiallySelected","collectSelectedOptions","initallySelectedNotInState","init","some","opt","slicedOptions","slice","selectedOptions","selected","children","concat","collectLeafOptions","push","leafOptions","child","componentDidLoad","positionDropdown","componentWillLoad","updateInternalError","updateInternalErrorMessage","loadedOptionsChanged","onSelectionChange","newValue","_","formData","FormData","forEach","append","name","internals","setFormValue","handleOptionClick","isSelectionLimitReached","checkboxRef","toggleCheckedState","updateSelection","ifxSelect","newOptionsLength","maxItemCount","selectedOption","wasSelected","handleParentOptionClick","handleChildOptionClick","selectAll","selectAllRecursive","allChildrenSelected","every","newChildren","childOption","updateParentSelectedState","_a","isOptionIndeterminate","indeterminate","getSizeClass","size","toggleDropdown","addEventListener","zIndex","globalZIndex","waitForElement","querySelectorFunc","callback","maxTries","tries","request","requestAnimationFrame","elements","handleKeyDown","disabled","querySelectorAll","code","updateHighlightedOption","handleArrowDown","handleArrowUp","handleWrapperClick","currentTarget","clearSelection","wrapperRect","el","shadowRoot","querySelector","getBoundingClientRect","spaceBelow","window","innerHeight","bottom","spaceAbove","top","height","dropdownFlipped","classList","remove","add","focus","handleOptionKeyDown","e","key","stopPropagation","renderOption","index","isIndeterminate","isSelected","isOptionSelected","disableCheckbox","uniqueId","h","class","onKeyDown","onClick","tabindex","role","tabIndex","ref","id","checked","htmlFor","map","childIndex","renderSubOption","persistentOption","selectedChildren","findInOptions","foundInChildren","renderSelectAll","allSelected","noneSelected","that","toggleSelectAll","handleSelectAllKeydown","render","selectedOptionsLabels","isChildSelectedWithParent","parentOption","join","undefined","placeholder","onScroll","style","toString","showSearch","type","onInput","showSelectAll","icon"],"sources":["src/components/select/multi-select/multiselect.scss?tag=ifx-multiselect&encapsulation=shadow","src/components/select/multi-select/multiselect.tsx"],"sourcesContent":["// @import '~choices.js/public/assets/styles/choices.css';\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.ifx-multiselect-container {\n  position: relative;\n  box-sizing: border-box;\n  font-family: var(--ifx-font-family);\n\n  &.small-select {\n    height: 36px;\n  }\n\n  &.medium-select {\n    height: 40px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n\n  .ifx-label-wrapper {\n    font-size: tokens.$ifxFontSizeM;\n    line-height: tokens.$ifxLineHeightM;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n    overflow-wrap: anywhere;\n    max-width: 100%;\n  }\n\n  .ifx-error-message-wrapper {\n    color: #CD002F;\n    font-size: tokens.$ifxFontSizeXs;\n    line-height: tokens.$ifxLineHeightXs;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n    overflow-wrap: anywhere;\n    max-width: 100%;\n  }\n\n  .ifx-multiselect-wrapper {\n    background-color: tokens.$ifxColorBaseWhite;\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    align-items: center;\n    border: 1px solid tokens.$ifxColorEngineering400;\n    border-radius: tokens.$ifxBorderRadius12;\n    width: 100%;\n    font-weight: 400;\n    font-style: normal;\n\n\n    &.small-select {\n      height: 36px;\n      padding: 8px 12px;\n      font-size: tokens.$ifxFontSizeS;\n      line-height: tokens.$ifxLineHeightS;\n    }\n\n    &.medium-select {\n      height: 40px;\n      padding: 8px 16px;\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n    }\n\n    &:focus-visible {\n      outline: none;\n    }\n\n    &:focus-visible:not(.active):not(:active) {\n      outline: none;\n\n      &::before {\n        content: '';\n        position: absolute;\n        width: calc(100% + 4px);\n        height: calc(100% + 4px);\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        border: 2px solid tokens.$ifxColorOcean500;\n        border-radius: 2px;\n\n      }\n    }\n\n    &.disabled {\n      background: tokens.$ifxColorEngineering200;\n      color: #575352;\n      border-color: #575352;\n      cursor: default;\n      -webkit-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n    }\n\n    &.error {\n      border-color: #CD002F;\n    }\n\n    &:hover:not(.focus, :focus) {\n      border-color: tokens.$ifxColorEngineering500;\n    }\n\n    &.active {\n      border-color: tokens.$ifxColorOcean500 !important; // Active border color\n\n      & .icon-wrapper-up {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding-left: tokens.$ifxSpace100;\n      }\n\n      & .icon-wrapper-down {\n        display: none\n      }\n    }\n\n\n    & .icon-wrapper-up {\n      display: none;\n    }\n\n    & .icon-wrapper-down {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding-left: tokens.$ifxSpace100;\n    }\n\n    &.is-flipped {\n      .ifx-multiselect-dropdown-menu {\n        top: auto;\n        bottom: 100%;\n      }\n    }\n  }\n\n  .ifx-multiselect-input {\n    flex-grow: 1;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    &.placeholder {\n      opacity: 0.5;\n    }\n\n  }\n\n\n  .ifx-multiselect-icon-container {\n    margin-left: auto;\n    align-items: center;\n    display: flex;\n  }\n\n\n  .ifx-clear-button {\n    display: flex;\n  }\n\n  .ifx-multiselect-dropdown-menu {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    width: 100%;\n    margin-top: 2px;\n    background-color: #fff;\n    box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.10);\n    max-height: 300px;\n    /* Adjust based on your design */\n    overflow-y: auto;\n    z-index: var(--dynamic-z-index, 1); // Fallback to 1\n\n    .search-input {\n      position: sticky;\n      top: 0;\n      left: 0;\n      z-index: 1;\n      width: 100%;\n      padding: 8px 16px;\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n      font-style: normal;\n      font-weight: 400;\n      box-sizing: border-box;\n      background-color: tokens.$ifxColorBaseWhite;\n      border: none;\n      border-bottom: 1px solid tokens.$ifxColorEngineering400;\n\n      &:focus {\n        outline: none;\n        border: 1px solid tokens.$ifxColorOcean500;\n      }\n\n      // Optional: Placeholder style\n      &::placeholder {\n        color: #999;\n      }\n    }\n  }\n\n  .option {\n    position: relative;\n    padding: 8px 16px;\n    gap: 8px;\n    align-items: center;\n    display: flex;\n    font-style: normal;\n    font-weight: 400;\n\n    &.small-select {\n      font-size: tokens.$ifxFontSizeS;\n      line-height: tokens.$ifxLineHeightS;\n    }\n\n    &.medium-select {\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorEngineering200;\n    }\n\n    &:focus:not(.disabled) {\n      background-color: tokens.$ifxColorEngineering300;\n      outline: none;\n    }\n\n    &.is-highlighted {\n      background-color: tokens.$ifxColorEngineering200;\n      ;\n    }\n\n    &.selected {\n      // color: #0A8276;\n    }\n\n    &.sub-option {\n      padding-left: 30px;\n      /* or however much indentation you want */\n    }\n\n    &.disabled {\n      &:hover {\n        cursor: default;\n      }\n    }\n\n    label {\n      cursor: inherit;\n    }\n  }\n\n\n\n}\n\n.select-all-wrapper {\n  padding-top: 8px;\n}","import { Component, Prop, State, Event, EventEmitter, Element, h, Watch, AttachInternals } from '@stencil/core';\nimport { Option } from './interfaces';\n\n// Debounce function\nfunction debounce(func, wait) {\n  let timeout;\n  return function executedFunction(...args) {\n    const later = () => {\n      clearTimeout(timeout);\n      func(...args);\n    };\n    clearTimeout(timeout);\n    timeout = setTimeout(later, wait);\n  };\n};\n\n@Component({\n  tag: 'ifx-multiselect',\n  styleUrl: 'multiselect.scss',\n  shadow: true,\n  formAssociated: true\n})\n\n\n\nexport class Multiselect {\n\n  @Prop() name: string;\n  @Prop() options: any[] | string;\n  @Prop() batchSize: number = 50;\n  @Prop() size: string = 'medium (40px)';\n  @Prop() disabled: boolean = false;\n  @Prop() error: boolean = false;\n  @State() internalError: boolean = false;\n  @Prop() errorMessage: string = \"Error\";\n  @State() internalErrorMessage: string;\n  @Prop() label: string = \"\";\n  @State()  persistentSelectedOptions: Option[] = [];\n  @Prop() placeholder: string = \"\";\n  @State() dropdownOpen = false;\n  @State() dropdownFlipped: boolean;\n  @Prop() maxItemCount: number;\n  @State() zIndex: number = 1; // default z-index value\n  static globalZIndex = 1; // This will be shared among all instances of the component.\n  private currentIndex: number = 0; //needed for option selection using keyboard\n  @State() isLoading: boolean = false;\n  @State() loadedOptions: Option[] = [];\n  @State() filteredOptions: Option[] = [];\n  @Prop() showSearch: boolean = true;\n  @Prop() showSelectAll: boolean = true;\n  @State() optionCount: number = 0; // number of all options (leaves of the tree)\n  @State() optionsProcessed: boolean = false; // flag whether options have already been counted, intial selections saved\n\n\n  @Event() ifxSelect: EventEmitter;\n  @Event() ifxMultiselectIsOpen: EventEmitter;\n\n  @Element() el: HTMLElement;\n  dropdownElement!: HTMLElement;\n\n  @AttachInternals() internals: ElementInternals;\n\n\n  @Watch('options')\n  updateOptions() { \n    this.loadedOptions = [];\n    this.filteredOptions = [];\n    this.optionCount = 0;\n    this.optionsProcessed = false;\n    this.persistentSelectedOptions = [];\n\n    this.loadInitialOptions();\n  }\n\n\n  async loadInitialOptions() {\n    this.isLoading = true;\n    this.internalError = this.error;\n    this.internalErrorMessage = this.errorMessage;\n    // Load the first batch of options (e.g., first 20)\n    this.loadedOptions = await this.fetchOptions(0, this.batchSize);\n    this.isLoading = false;\n  }\n\n  async fetchMoreOptions() {\n    this.isLoading = true;\n    const moreOptions = await this.fetchOptions(this.loadedOptions.length, this.batchSize);\n    this.loadedOptions = [...this.loadedOptions, ...moreOptions];\n    this.isLoading = false;\n  }\n\n\n  handleScroll(event: UIEvent) {\n    const element = event.target as HTMLElement;\n    const halfwayPoint = Math.floor((element.scrollHeight - element.clientHeight) / 2); //loading more options when the user has scrolled halfway through the current list\n\n    if (element.scrollTop >= halfwayPoint) {\n      this.fetchMoreOptions();\n    }\n  }\n\n\n\n\n  async fetchOptions(startIndex: number, count: number): Promise<Option[]> {\n    let allOptions: Option[] = [];\n\n    // Parse options if it's a string, or use directly if it's an array\n    if (typeof this.options === 'string') {\n      try {\n        allOptions = JSON.parse(this.options);\n       \n      } catch (err) {\n        console.error('Failed to parse options:', err);\n      }\n    } else if (Array.isArray(this.options)) {\n      allOptions = this.options;\n    } else {\n      console.error('Unexpected value for options:', this.options);\n    }\n\n    if (!this.optionsProcessed) {\n      this.optionCount = this.countOptions(allOptions);\n      const initiallySelected = this.collectSelectedOptions(allOptions);\n      const initallySelectedNotInState = initiallySelected.filter(init => !this.persistentSelectedOptions.some(opt => opt.value == init.value));\n      this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initallySelectedNotInState];\n      this.optionsProcessed = true;\n    }\n    \n    // Slice the options array based on startIndex and count\n    const slicedOptions = allOptions.slice(startIndex, startIndex + count);\n    return slicedOptions;\n  }\n\n  /**\n   * Collects and returns all options that are selected.\n   * When the parent is selected, then the value of the children will be overriden with selected as well.\n   * It will only collect the leaves of the tree.\n   * \n   * @param options A list of options.\n   * @returns A list with all selected options\n   */\n  private collectSelectedOptions(options: Option[]): Option[] {\n    let selectedOptions: Option[] = [];\n  \n    for (const option of options) {\n      if (option.selected) {\n        if (option.children && option.children.length > 0) {\n          // if parent is selected, then select all child options\n          selectedOptions = selectedOptions.concat(this.collectLeafOptions(option.children));\n        } else {\n          selectedOptions.push(option);\n        }\n      } else {\n        if (option.children && option.children.length > 0) {\n          selectedOptions = selectedOptions.concat(this.collectSelectedOptions(option.children));\n        }\n      }\n    }\n    return selectedOptions;\n  }\n\n  /**\n   * Collects all leaf children options.\n   * \n   * @param option A list with all leaf-children.\n   */\n  private collectLeafOptions(children: Option[]): Option[] {\n    let leafOptions = [];\n  \n    for (const child of children) {\n      if (child.children && child.children.length > 0) {\n        leafOptions = leafOptions.concat(this.collectLeafOptions(child.children));\n      } else {\n        leafOptions.push(child);\n      }\n    }  \n    return leafOptions;\n  }\n\n  /**\n   * Count the number of options. Only counts the leaves of the options tree.\n   */\n  countOptions(options: Option[]): number {\n    let count = 0;\n    for (const option of options) {\n      if (option.children && option.children.length >= 0) {\n        count += this.countOptions(option.children);\n      } else {\n        count++;\n      }\n    }\n    return count;\n  }\n\n\n  handleSearch = debounce((targetElement: HTMLInputElement) => {\n    const searchTerm = targetElement.value.toLowerCase();\n    if (searchTerm === '') {\n      this.filteredOptions = this.loadedOptions;\n    } else {\n      this.filteredOptions = this.loadedOptions.filter(option => option.label.toLowerCase().includes(searchTerm))\n    }\n  }, 300);\n\n  componentDidLoad() {\n    setTimeout(() => {\n      this.positionDropdown();\n    }, 500);\n\n    // setInterval(this.handleScroll, 5000); // Runs every 5 seconds (5000 milliseconds)\n  }\n\n  componentWillLoad() {\n    this.loadInitialOptions();\n    this.filteredOptions = [...this.loadedOptions];\n  }\n\n  @Watch('error')\n  updateInternalError() {\n    this.internalError = this.error;\n  }\n\n  @Watch('errorMessage')\n  updateInternalErrorMessage() {\n    this.internalErrorMessage = this.errorMessage;\n  }\n\n  @Watch('loadedOptions')\n  loadedOptionsChanged() {\n    this.filteredOptions = [...this.loadedOptions];\n  }\n\n  @Watch('persistentSelectedOptions')\n  onSelectionChange(newValue: Option[], _: Option[]) {\n    const formData = new FormData();\n    newValue.forEach(option => formData.append(this.name, option.value));\n    this.internals.setFormValue(formData);\n  }\n\n  handleOptionClick(option: Option) {\n    this.internalError = false;\n\n    if (!option.selected && this.isSelectionLimitReached(option)) {\n      option.checkboxRef.toggleCheckedState(false)\n      this.internalError = true;\n      this.internalErrorMessage = \"Please consider the maximum number of items to choose from\";\n      return;\n    }\n    \n    this.updateSelection(option);\n    this.ifxSelect.emit(this.persistentSelectedOptions);\n  }\n\n\n  isSelectionLimitReached(option: Option): boolean {\n    let newOptionsLength = option.children ? option.children.length : 1;\n    return this.maxItemCount && this.persistentSelectedOptions.length + newOptionsLength > this.maxItemCount &&\n      !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value)\n  }\n\n  updateSelection(option: Option) {\n    const wasSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n\n    if (option.children && option.children.length > 0) {\n      this.handleParentOptionClick(option);\n    } else {\n      this.handleChildOptionClick(option, wasSelected);\n    }\n  }\n\n  async selectAll() {\n    const allOptions = await this.fetchOptions(0, this.optionCount);\n    this.selectAllRecursive(allOptions);\n    \n    this.ifxSelect.emit(this.persistentSelectedOptions);\n  }\n\n  private selectAllRecursive(options: Option[]) {\n    for (const opt of options) {\n      if (opt.children && opt.children.length > 0) {\n        this.selectAllRecursive(opt.children);\n      } else {\n        if (!this.persistentSelectedOptions.some((some) => some.value === opt.value )) {\n          opt.selected = true;\n          this.persistentSelectedOptions = [...this.persistentSelectedOptions, opt];\n        }\n      }\n    }\n\n  }\n\n  handleParentOptionClick(option: Option) {\n    const allChildrenSelected = option.children.every(child =>\n      this.persistentSelectedOptions.some(selectedOption => selectedOption.value === child.value)\n    );\n\n    if (allChildrenSelected) {\n      this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(\n        selectedOption => !option.children.some(child => child.value === selectedOption.value)\n      )];\n\n      option.selected = false;\n      option.children.forEach(child => {\n        child.selected = false;\n      })\n\n    } else {\n      const newChildren = [...option.children.filter(childOption =>\n            !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === childOption.value)\n      )];\n      option.selected = true;\n      option.children.forEach(child => {\n        child.selected = true;\n      })\n      this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...newChildren];\n    }\n  }\n\n  handleChildOptionClick(option: Option, wasSelected: boolean) {\n    if (wasSelected) {\n      this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== option.value)];\n      option.selected = false;\n    } else {\n      this.persistentSelectedOptions = [...this.persistentSelectedOptions, option];\n      option.selected = true;\n    }\n    this.updateParentSelectedState();\n  }\n\n  updateParentSelectedState() {\n    this.loadedOptions.forEach(option => {\n      if(option.children?.length > 0) {\n        if(option.children.every(child => child.selected === true)) option.selected = true;\n        else {\n          option.selected = false;\n          if(this.isOptionIndeterminate(option)) {\n            option.indeterminate = true;\n          }else{\n            option.indeterminate = false;\n          }\n        }\n      }\n    });\n  }\n\n\n\n  handleDocumentClick = (event: Event) => {\n    const path = event.composedPath();\n    if (!path.includes(this.dropdownElement)) {\n      this.dropdownOpen = false;\n      document.removeEventListener('click', this.handleDocumentClick);\n\n      // Dispatch the ifxMultiselectIsOpen event\n      this.ifxMultiselectIsOpen.emit(this.dropdownOpen);\n    }\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"small-select\"\n      : \"medium-select\";\n  }\n\n  toggleDropdown() {\n    this.dropdownOpen = !this.dropdownOpen;\n    setTimeout(() => {\n      if (this.dropdownOpen) {\n        document.addEventListener('click', this.handleDocumentClick);\n      }\n      // Dispatch the ifxMultiselectIsOpen event\n      this.ifxMultiselectIsOpen.emit(this.dropdownOpen);\n    }, 0);\n    this.zIndex = Multiselect.globalZIndex++;\n  }\n\n\n  waitForElement(querySelectorFunc: Function, callback: Function, maxTries = 50) {\n    let tries = 0;\n    function request() {\n      requestAnimationFrame(() => {\n        const elements = querySelectorFunc();\n        if (elements.length > 0 || tries > maxTries) {\n          callback(elements);\n        } else {\n          tries++;\n          request();\n        }\n      });\n    }\n    request();\n  }\n\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) return; // If it's disabled, don't do anything.\n\n    const options = this.dropdownElement.querySelectorAll('.option');\n    \n    switch (event.code) {\n      case 'Enter':\n        this.toggleDropdown();\n        // Wait a bit for the dropdown to finish rendering\n        this.waitForElement(() => {\n          return this.dropdownElement.querySelectorAll('.option');\n        }, (options) => {\n            this.updateHighlightedOption(options);\n        });\n        break;\n      case 'Space': \n        this.toggleDropdown();\n        // Wait a bit for the dropdown to finish rendering\n        this.waitForElement(() => {\n          return this.dropdownElement.querySelectorAll('.option');\n        }, (options) => {\n            this.updateHighlightedOption(options);\n        });\n        break;\n      case 'ArrowDown':\n        this.handleArrowDown(options);\n        if (this.dropdownOpen) {\n          this.updateHighlightedOption(options);\n        }\n        break;\n      case 'ArrowUp':\n        this.handleArrowUp(options);\n        if (this.dropdownOpen) {\n          this.updateHighlightedOption(options);\n        }\n        break;\n    }\n  }\n\n  handleWrapperClick(event: MouseEvent) {\n    // This is your existing logic for positioning the dropdown\n    this.positionDropdown();\n\n    // Check if the event target is the wrapper itself and not a child element.\n    if (event.currentTarget === event.target) {\n      this.toggleDropdown();\n    }\n  }\n\n  clearSelection() {\n    this.persistentSelectedOptions = [];\n    this.ifxSelect.emit(this.persistentSelectedOptions); // if you want to emit empty selection after clearing\n  }\n\n  positionDropdown() {\n    const wrapperRect = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper')?.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - wrapperRect.bottom;\n    const spaceAbove = wrapperRect.top;\n\n    // If there's more space above than below the trigger and the dropdown doesn't fit below\n    if ((spaceAbove > spaceBelow && wrapperRect.height > spaceBelow) || (wrapperRect.bottom > window.innerHeight)) {\n      this.dropdownFlipped = true;\n    } else {\n      this.dropdownFlipped = false;\n    }\n  }\n\n\n\n  // Helper function to update highlighted option based on currentIndex\n  private updateHighlightedOption(options: NodeList) {\n    // Clear all highlights\n    options.forEach((option: Element) => option.classList.remove('is-highlighted'));\n\n    // Apply highlight to the current option\n    if (this.currentIndex >= 0 && this.currentIndex < options.length) {\n      (options[this.currentIndex] as Element).classList.add('is-highlighted');\n      (options[this.currentIndex] as HTMLElement).focus();\n    }\n  }\n\n  // Helper function to handle arrow down navigation\n  private handleArrowDown(options: NodeList) {\n    if (this.currentIndex < options.length - 1) {\n      this.currentIndex++;\n    } else {\n      this.currentIndex = 0; // Wrap to the beginning.\n    }\n  }\n\n  // Helper function to handle arrow up navigation\n  private handleArrowUp(options: NodeList) {\n    if (this.currentIndex > 0) {\n      this.currentIndex--;\n    } else {\n      this.currentIndex = options.length - 1; // Wrap to the end.\n    }\n  }\n  \n  handleOptionKeyDown(e: KeyboardEvent, option: Option) {\n    if(e.key !== 'ArrowUp' && e.key !== 'ArrowDown') e.stopPropagation();\n    if(e.key === 'Enter' || e.key === ' ') {\n      this.handleOptionClick(option);\n    }\n  }\n\n  renderOption(option: Option, index: number) {\n    const isIndeterminate = this.isOptionIndeterminate(option);\n    const isSelected = option.children ? isIndeterminate || this.isOptionSelected(option) : this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n    const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n    const uniqueId = `checkbox-${option.value}-${index}`; // Generate a unique ID using the index\n\n    return (\n      <div class=\"option-wrapper\">\n        <div class={`option ${isSelected ? 'selected' : ''} ${disableCheckbox ? 'disabled' : ''} \n        ${this.getSizeClass()}`}\n          data-value={option.value}\n          onKeyDown={(e) => !disableCheckbox && this.handleOptionKeyDown(e, option)}\n          onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n          tabindex=\"0\"\n          role={`${option.children?.length > 0 ? \"treeitem\" : \"option\"}`}>\n          <ifx-checkbox tabIndex={-1} ref={(el) => option.checkboxRef = el} id={uniqueId} size=\"s\" checked={isIndeterminate ? false : isSelected} indeterminate={isIndeterminate} disabled={disableCheckbox}></ifx-checkbox>\n          <label htmlFor={uniqueId} onClick={(e) => e.stopPropagation()}>{option.label}</label>\n        </div>\n        {option.children && option.children.map((child, childIndex) => this.renderSubOption(child, `${index}-${childIndex}`))}\n      </div>\n    );\n  }\n\n  isOptionSelected(option: Option): boolean {\n    if (!option.children) return false;\n\n    return option.children.every(child =>\n      this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)\n    );\n  }\n\n\n  isOptionIndeterminate(option: Option): boolean {\n    if (!option.children) return false;\n\n    const selectedChildren = option.children.filter(child =>\n      this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)\n    ).length;\n\n    return selectedChildren > 0 && selectedChildren < option.children.length;\n  }\n\n\n  findInOptions(options: Option[], searchTerm: string): Option | null {\n    for (const option of options) {\n      if (option.value === searchTerm) {\n        return option;\n      }\n      if (option.children) {\n        const foundInChildren = this.findInOptions(option.children, searchTerm);\n        if (foundInChildren) {\n          return foundInChildren;\n        }\n      }\n    }\n    return null;\n  }\n\n\n  renderSubOption(option: Option, index: string) {\n    const isSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n    const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n    const uniqueId = `checkbox-${option.value}-${index}`;\n\n    return (\n      <div class={`option sub-option ${isSelected ? 'selected' : ''} ${this.getSizeClass()} ${disableCheckbox ? 'disabled' : ''}`}\n        data-value={option.value}\n        role={`${option.children?.length > 0 ? \"option\" : \"treeitem\"}`}\n        onKeyDown={(e) => !disableCheckbox && this.handleOptionKeyDown(e, option)}\n        onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n        tabindex=\"0\">\n        <ifx-checkbox tabIndex={-1} ref={(el) => option.checkboxRef = el} id={uniqueId} size=\"s\" checked={isSelected} disabled={disableCheckbox}></ifx-checkbox>\n        <label htmlFor={uniqueId} onClick={(e) => e.stopPropagation()}>{option.label}</label>\n      </div>\n    );\n  }\n\n  private renderSelectAll() {\n    const allSelected = this.persistentSelectedOptions.length === this.optionCount;\n    const noneSelected = this.persistentSelectedOptions.length === 0;\n    const indeterminate = this.optionCount > 0 && !noneSelected && !allSelected;\n\n    const that = this;\n    function toggleSelectAll() {\n      if (allSelected) {\n        that.clearSelection();\n      } else {\n        that.selectAll();\n      }\n    }\n\n    function handleSelectAllKeydown(e: KeyboardEvent) {\n      if(e.key !== 'ArrowUp' && e.key !== 'ArrowDown') e.stopPropagation();\n      if(e.key === 'Enter' || e.key === ' ') {\n        toggleSelectAll();\n      }\n    }\n\n    return <div class=\"select-all-wrapper\">\n      <div class={`option ${this.getSizeClass()}`} tabindex='0' onKeyDown={(e) => handleSelectAllKeydown(e)} onClick={toggleSelectAll}>\n        <ifx-checkbox tabIndex={-1} id='selectAll' checked={allSelected} indeterminate={indeterminate} size=\"s\"></ifx-checkbox>\n        <label htmlFor='selectAll'>Select all</label>\n      </div>\n      <ifx-dropdown-separator></ifx-dropdown-separator>\n    </div>;\n  }\n\n\n  render() {\n    // Create a label for the selected options\n    const selectedOptionsLabels = this.persistentSelectedOptions\n      .filter(option => {\n        // check if option is a child and its parent is selected\n        const isChildSelectedWithParent = this.persistentSelectedOptions.some(parentOption =>\n          parentOption.children &&\n          parentOption.children.some(child => child.value === option.value) &&\n          parentOption.selected\n        );\n        return !isChildSelectedWithParent;\n      })\n      .map(option => option.label)\n      .join(', ');\n\n    return (\n      <div class={`ifx-multiselect-container`} ref={el => this.dropdownElement = el as HTMLElement}>\n        {\n          this.label ?\n            <div class=\"ifx-label-wrapper\">\n              <span>{this.label}</span>\n            </div> : null\n        }\n        <div class={`ifx-multiselect-wrapper \n        ${this.getSizeClass()} \n        ${this.dropdownOpen ? 'active' : ''} \n        ${this.dropdownFlipped ? 'is-flipped' : ''}\n        ${this.internalError ? 'error' : \"\"}\n        ${this.disabled ? 'disabled' : \"\"}`}\n          tabindex=\"0\"\n          onClick={this.disabled ? undefined : (event) => this.handleWrapperClick(event)}\n          onKeyDown={this.disabled ? undefined : (event) => this.handleKeyDown(event)} >\n          <div class={`ifx-multiselect-input \n          ${this.persistentSelectedOptions.length === 0 ? 'placeholder' : \"\"}\n          `}\n            onClick={this.disabled ? undefined : () => this.toggleDropdown()}\n          >\n            {this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : this.placeholder}\n          </div>\n          {this.dropdownOpen && (\n            <div class=\"ifx-multiselect-dropdown-menu\"\n              onScroll={(event) => this.handleScroll(event)}\n              style={{ '--dynamic-z-index': this.zIndex.toString() }}>\n              {this.showSearch && <input type=\"text\" role=\"textbox\" class=\"search-input\" onKeyDown={(e) => { e.stopPropagation() }} onInput={(event) => this.handleSearch(event.target)} placeholder=\"Search...\"></input>}\n              {this.showSelectAll && this.renderSelectAll()}\n              {this.filteredOptions.map((option, index) => this.renderOption(option, index))}\n              {this.isLoading && <div>Loading more options...</div>}\n            </div>\n          )}\n          <div class=\"ifx-multiselect-icon-container\">\n\n            {/* Clear Button - will show only if there's a selection */}\n            {this.persistentSelectedOptions.length > 0 && (   \n              <div class=\"ifx-clear-button\" onClick={this.disabled ? undefined : () => this.clearSelection()}>\n                <ifx-icon icon=\"cremove16\"></ifx-icon>\n              </div>\n            )}\n            <div class=\"icon-wrapper-up\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n              <ifx-icon\n                key='icon-up'\n                icon='chevronup-16'></ifx-icon>\n            </div>\n            <div class=\"icon-wrapper-down\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n              <ifx-icon\n                key='icon-down'\n                icon='chevron-down-16'></ifx-icon>\n            </div>\n          </div>\n\n        </div>\n        {\n          this.internalError ?\n            <div class=\"ifx-error-message-wrapper\">\n              <span>{this.internalErrorMessage}</span>\n            </div> : null\n        }\n      </div>\n    );\n  }\n\n}\n"],"mappings":"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","ignoreList":[]}

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

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

package/dist/types/components/templates/template/template.d.ts

@@ -1,33 +0,0 @@
-import { EventEmitter } from '../../../stencil-public-runtime';
-export declare class Template {
-    el: HTMLElement;
-    repoDetails: {
-        name: string;
-        desc: string;
-        framework: string;
-    };
-    repoUrl: string;
-    showDetails: boolean;
-    isTemplatePage: boolean;
-    isLoading: boolean;
-    repoError: string;
-    name: string;
-    toggleTemplates: EventEmitter;
-    fieldError: EventEmitter;
-    thumbnail: string;
-    authUser(): void;
-    componentDidLoad(): void;
-    getLocalStorageValues(): {
-        repoName: string;
-        repoDesc: string;
-        repoFramework: string;
-        templateName: string;
-    };
-    getUserToken(authCode: any): Promise<void>;
-    handleUserInput(e: any, type: any): void;
-    submitUserData(): void;
-    togglePadding(action: any): void;
-    handleCurrentTemplate(e: any): void;
-    toggleTemplate(currTemp: any): Promise<void>;
-    render(): any;
-}

package/dist/types/components/templates/templates-ui/templates-ui.d.ts

@@ -1,10 +0,0 @@
-export declare class TemplatesUI {
-    el: HTMLElement;
-    private tableTemplate;
-    private wizardTemplate;
-    toggleTemplate(currTemp: any): void;
-    handleError(e: any): void;
-    filterTemplates(e: any): void;
-    closeAlert(): void;
-    render(): any;
-}