@infineon/infineon-design-system-stencil 33.1.1--canary.1818.40b59d3e7e35c19c1cd5c4976a5aecca37653bcd.0 → 33.1.1--canary.1826.80f5b1bc68c2582aa6b8c111ec42ccf8d0eeb4a7.0

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

@@ -1 +0,0 @@
-{"version":3,"names":["footerCss","IfxFooterStyle0","Footer","constructor","hostRef","this","currentYear","Date","getFullYear","copyrightText","hasColSlot","hasSocialsSlot","componentWillLoad","el","querySelector","render","h","Host","key","class","width","height","viewBox","fill","xmlns","d","id","name"],"sources":["src/components/footer/footer.scss?tag=ifx-footer&encapsulation=shadow","src/components/footer/footer.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.footer__container {\n  //width: 100%;\n  padding: 0px 32px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  background-color: tokens.$ifxColorBaseWhite;\n  font-family: var(--ifx-font-family, #{tokens.$ifxFontFamilyBody});\n\n  & .footer__wrapper {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n\n    @media (max-width: 768px) {\n      margin-top: tokens.$ifxSpace600;\n    }\n\n    & .footer__logo_top {\n      svg {\n        display: none; // Logo (when variant=large) is hidden by default\n\n        @media (max-width: 768px) {\n          display: inline; // Logo is shown (when variant=large) on mobile screens\n        }\n      }\n    }\n\n    & .footer__logo_btm {\n      svg {\n        display: inline; // Logo is shown by default\n        vertical-align: bottom;\n      }\n    }\n\n\n    & .col-wrapper {\n      display: flex;\n      align-items: flex-start;\n      width: 100%;\n      justify-content: space-between;\n      margin: tokens.$ifxSpace400 0;\n\n      @media (max-width: 768px) {\n        // Adjust this value to the breakpoint you want\n        flex-wrap: wrap;\n        justify-content: space-between; // Ensures that there is space between the columns if the width allows it\n        margin: tokens.$ifxSpace300 0;\n      }\n\n      & ::slotted([slot=col]) {\n        display: flex;\n        gap: tokens.$ifxSpace400;\n\n        @media (max-width: 768px) {\n          // Adjust this value according to your design breakpoints\n          flex-wrap: wrap;\n          margin-top: tokens.$ifxSpace300;\n        }\n      }\n    }\n\n\n    & .default {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      width: 100%;\n      padding: 24px 0;\n      border-bottom: 1px solid #BFBBBB;\n      margin-top: tokens.$ifxSpace300;\n\n      & .footer__logo_btm {\n        svg {\n          display: inline; // Logo is shown at the bottom (when variant=large) on mobile screens \n          vertical-align: bottom;\n\n          @media (max-width: 768px) {\n            display: none; // Logo at the bottom (when variant=large) is hidden by default\n          }\n        }\n      }\n\n      @media (max-width: 768px) {\n        // Adjust this value according to your design breakpoints\n        margin-top: 0px;\n        flex-direction: column;\n        align-items: flex-start;\n      }\n\n      ::slotted([slot=socials]) {\n        display: flex;\n        gap: tokens.$ifxSpace400;\n\n        @media (max-width: 768px) {\n          // Adjust this value according to your design breakpoints\n          flex-wrap: wrap;\n        }\n      }\n    }\n\n\n    & .footer__base {\n      display: flex;\n      justify-content: space-between;\n      width: 100%;\n      padding: tokens.$ifxSpace300 0;\n\n      & .footer__brand {\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeM;\n        line-height: tokens.$ifxLineHeightM;\n        color: tokens.$ifxColorBaseBlack;\n        flex-grow: 1;\n\n      }\n\n      & .footer__info > ::slotted([slot=info]) {\n        display: flex;\n        gap: tokens.$ifxSpace300;\n        padding-right: tokens.$ifxSpace200;\n        justify-content: flex-end;\n        flex-grow: 1;\n\n        a {\n          font-style: normal;\n          font-weight: 400;\n          font-size: tokens.$ifxFontSizeM;\n          line-height: tokens.$ifxLineHeightM;\n          text-decoration: none;\n        }\n\n        @media (max-width: 768px) {\n          // Adjust this value according to your design breakpoints\n          justify-content: flex-start;\n          flex-wrap: wrap;\n          gap: tokens.$ifxSpace150 tokens.$ifxSpace200;\n        }\n      }\n\n      @media (max-width: 768px) {\n        // Adjust this value according to your design breakpoints\n        flex-direction: column-reverse;\n\n        .footer__brand {\n          margin-top: tokens.$ifxSpace200;\n        }\n      }\n    }\n  }\n}","import { Component, h, Element, Prop, State, Host } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-footer',\n  styleUrl: 'footer.scss',\n  shadow: true,\n})\n\nexport class Footer {\n  @Element() el: HTMLElement;\n  @State() currentYear: number = new Date().getFullYear();\n  @Prop() copyrightText: string = '© 1999 - ' + this.currentYear + ' Infineon Technologies AG';\n\n  private hasColSlot: boolean = false;\n  private hasSocialsSlot: boolean = false;\n\n  componentWillLoad() {\n    this.hasColSlot = !!this.el.querySelector('[slot=\"col\"]');\n    this.hasSocialsSlot = !!this.el.querySelector('[slot=\"socials\"]');\n}\n\n \n  render() {\n    return (\n      <Host>\n        <div aria-label='Main footer navigation' class=\"footer__container\">\n          <div class=\"footer__wrapper\">\n            { (this.hasSocialsSlot || this.hasColSlot) &&\n              <div class=\"footer__logo_top\">\n                <svg width=\"91\" height=\"40\" viewBox=\"0 0 91 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <g clip-path=\"url(#clip0_2396_2480)\">\n                    <path d=\"M67.691 26.7766C71.0884 26.7766 72.1461 23.1841 72.1461 19.8802C72.1461 15.4536 70.2871 13.1441 67.691 13.1441C64.4219 13.1441 63.2681 16.7367 63.3001 19.9443C63.3322 23.1199 64.2296 26.7766 67.691 26.7766ZM66.0244 19.8481C66.0244 18.533 66.0244 15.4536 67.691 15.4536C69.4859 15.4536 69.4218 18.5009 69.4218 19.9123C69.4218 21.2595 69.4218 24.5313 67.7551 24.5313C65.9603 24.4992 66.0244 21.2274 66.0244 19.8481ZM57.8195 26.7766C59.1976 26.7766 60.3835 26.2313 61.5053 25.0445L60.5117 23.1841C59.7425 24.018 58.9733 24.4671 58.0438 24.4671C57.2746 24.4671 56.6336 24.018 56.249 23.2482C55.9285 22.5746 55.8644 21.8048 55.8644 20.9708V20.7142H61.6335V20.1368C61.6335 17.282 61.2809 15.7102 60.3835 14.5234C59.7104 13.6253 58.7169 13.1441 57.499 13.1441C56.2169 13.1441 55.1593 13.7215 54.39 14.8442C53.5567 16.0631 53.2042 17.699 53.2042 19.9443C53.1721 24.2426 54.8708 26.7766 57.8195 26.7766ZM57.531 15.2612C58.172 15.2612 58.5566 15.614 58.813 16.1914C59.0053 16.7046 59.1015 17.5707 59.1015 18.5971H55.8644C55.8964 16.3197 56.3772 15.2612 57.531 15.2612ZM74.2614 26.4559H76.7614V16.8329C77.3703 16.0952 78.0754 15.6782 78.5882 15.6782C78.9087 15.6782 79.2292 15.7423 79.4215 15.9989C79.6138 16.2876 79.71 16.7046 79.71 17.699V26.4559H82.21V16.5442C82.21 15.6782 82.1138 14.8121 81.601 14.1706C81.1523 13.5932 80.4472 13.2404 79.5497 13.2404C78.3959 13.2404 77.2101 13.914 76.569 14.6838C76.537 14.0102 76.3126 13.3687 76.2485 13.1441L73.9089 13.7536C74.0371 14.4593 74.2294 15.3253 74.2294 16.8971V26.4559H74.2614ZM45.2236 14.6838C45.1915 14.0102 44.9672 13.3687 44.9031 13.1441L42.5634 13.7536C42.6916 14.4593 42.8839 15.3253 42.8839 16.8971V26.4238H45.3838V16.8008C45.9928 16.0631 46.6979 15.6461 47.2107 15.6461C47.5312 15.6461 47.8517 15.7102 48.044 15.9669C48.2363 16.2555 48.3325 16.6725 48.3325 17.6669V26.4238H50.8324V16.5442C50.8324 15.6782 50.7363 14.8121 50.2235 14.1706C49.7748 13.5932 49.0696 13.2404 48.1722 13.2404C47.0505 13.2404 45.8646 13.914 45.2236 14.6838ZM14.6473 9.07042C16.1216 9.07042 17.3075 7.88359 17.3075 6.40807C17.3075 4.93256 16.1216 3.74573 14.6473 3.74573C13.173 3.74573 11.9871 4.93256 11.9871 6.40807C11.9871 7.88359 13.173 9.07042 14.6473 9.07042ZM26.9227 26.4559V16.5442C26.9227 15.6782 26.8265 14.8121 26.3137 14.1706C25.865 13.5932 25.1599 13.2404 24.2625 13.2404C23.1087 13.2404 21.9228 13.914 21.2818 14.6838C21.2497 14.0102 21.0254 13.3687 20.9613 13.1441L18.6536 13.7857C18.7818 14.4913 18.9741 15.3574 18.9741 16.9291V26.4559H21.4741V16.8329C22.0831 16.0952 22.7882 15.6782 23.301 15.6782C23.6215 15.6782 23.942 15.7423 24.1343 15.9989C24.3266 16.2876 24.4227 16.7046 24.4227 17.699V26.4559H26.9227ZM38.4289 8.36474C37.4994 8.36474 36.7622 9.10249 36.7622 10.0327C36.7622 10.9629 37.4994 11.7007 38.3968 11.7007C39.3263 11.7007 40.0634 10.9629 40.0634 10.0327C40.0634 9.10249 39.3263 8.36474 38.4289 8.36474ZM13.4614 26.4559H15.9614V10.8346L13.4614 11.1554V26.4559ZM33.8777 9.90441C34.3264 9.90441 34.7751 10.0648 35.0635 10.2893L35.7687 8.33266C35.0956 7.85151 34.3584 7.62698 33.429 7.62698C32.788 7.62698 32.1149 7.78736 31.5059 8.26851C30.897 8.78173 30.256 9.80818 30.256 11.7328C30.256 12.5667 30.288 13.4328 30.288 13.4328H29.4226V15.6461H30.288V26.4238H32.8521V15.6782H34.743L35.2238 13.4649H32.8841V11.4762C32.8841 10.5139 33.2687 9.90441 33.8777 9.90441ZM37.1468 26.4559H39.6788V13.2404L37.1468 13.5611V26.4559Z\" fill=\"#005DA9\" />\n                    <path d=\"M77.0816 33.5126C68.6203 36.0146 58.3321 37.1052 48.2682 37.1052C22.7239 37.1052 6.24986 29.5993 5.09604 19.6877C4.67938 15.9668 7.59599 12.3422 12.4677 9.26285C11.6023 8.62132 11.0575 7.59488 11.0254 6.44012C3.97427 10.161 0 15.0366 0 19.9764C0 30.9145 19.5188 40.1525 48.5246 39.7676C58.6205 39.6393 67.0498 38.1958 74.6778 35.6939C83.7482 32.7428 89.4532 28.5087 90.8313 26.6483C89.1968 28.1238 85.3186 31.0748 77.0816 33.5126ZM23.2687 4.38723C24.9674 3.80985 27.3712 3.0721 27.3712 3.0721C34.1339 1.21166 41.6017 0.121063 48.5566 0.185215C40.544 -0.295931 33.2365 0.185215 26.8584 1.33997C26.8584 1.33997 24.743 1.69281 22.4675 2.27018C22.4675 2.27018 21.3777 2.55887 20.7047 2.75133C20.0316 2.94379 19.1021 3.2004 19.1021 3.2004C18.4611 3.39286 17.8201 3.6174 17.1791 3.84193C17.8201 4.48346 18.2047 5.31745 18.2368 6.27974C19.3586 5.76652 21.5059 4.99668 23.2687 4.38723Z\" fill=\"#E30034\" />\n                  </g>\n                  <defs>\n                    <clipPath id=\"clip0_2396_2480\">\n                      <rect width=\"91\" height=\"40\" fill=\"white\" />\n                    </clipPath>\n                  </defs>\n                </svg> \n              </div>\n            }\n            {this.hasColSlot && (\n              <div>\n\n                <div class=\"col-wrapper\">\n                  <slot name=\"col\" />\n                </div>\n            </div>\n            )}\n\n            {this.hasSocialsSlot &&\n              <div class=\"default\" aria-label='Follow us on social media'>\n                <div class=\"footer__logo_btm\">\n                  <svg width=\"91\" height=\"40\" viewBox=\"0 0 91 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <g clip-path=\"url(#clip0_2396_2480)\">\n                      <path d=\"M67.691 26.7766C71.0884 26.7766 72.1461 23.1841 72.1461 19.8802C72.1461 15.4536 70.2871 13.1441 67.691 13.1441C64.4219 13.1441 63.2681 16.7367 63.3001 19.9443C63.3322 23.1199 64.2296 26.7766 67.691 26.7766ZM66.0244 19.8481C66.0244 18.533 66.0244 15.4536 67.691 15.4536C69.4859 15.4536 69.4218 18.5009 69.4218 19.9123C69.4218 21.2595 69.4218 24.5313 67.7551 24.5313C65.9603 24.4992 66.0244 21.2274 66.0244 19.8481ZM57.8195 26.7766C59.1976 26.7766 60.3835 26.2313 61.5053 25.0445L60.5117 23.1841C59.7425 24.018 58.9733 24.4671 58.0438 24.4671C57.2746 24.4671 56.6336 24.018 56.249 23.2482C55.9285 22.5746 55.8644 21.8048 55.8644 20.9708V20.7142H61.6335V20.1368C61.6335 17.282 61.2809 15.7102 60.3835 14.5234C59.7104 13.6253 58.7169 13.1441 57.499 13.1441C56.2169 13.1441 55.1593 13.7215 54.39 14.8442C53.5567 16.0631 53.2042 17.699 53.2042 19.9443C53.1721 24.2426 54.8708 26.7766 57.8195 26.7766ZM57.531 15.2612C58.172 15.2612 58.5566 15.614 58.813 16.1914C59.0053 16.7046 59.1015 17.5707 59.1015 18.5971H55.8644C55.8964 16.3197 56.3772 15.2612 57.531 15.2612ZM74.2614 26.4559H76.7614V16.8329C77.3703 16.0952 78.0754 15.6782 78.5882 15.6782C78.9087 15.6782 79.2292 15.7423 79.4215 15.9989C79.6138 16.2876 79.71 16.7046 79.71 17.699V26.4559H82.21V16.5442C82.21 15.6782 82.1138 14.8121 81.601 14.1706C81.1523 13.5932 80.4472 13.2404 79.5497 13.2404C78.3959 13.2404 77.2101 13.914 76.569 14.6838C76.537 14.0102 76.3126 13.3687 76.2485 13.1441L73.9089 13.7536C74.0371 14.4593 74.2294 15.3253 74.2294 16.8971V26.4559H74.2614ZM45.2236 14.6838C45.1915 14.0102 44.9672 13.3687 44.9031 13.1441L42.5634 13.7536C42.6916 14.4593 42.8839 15.3253 42.8839 16.8971V26.4238H45.3838V16.8008C45.9928 16.0631 46.6979 15.6461 47.2107 15.6461C47.5312 15.6461 47.8517 15.7102 48.044 15.9669C48.2363 16.2555 48.3325 16.6725 48.3325 17.6669V26.4238H50.8324V16.5442C50.8324 15.6782 50.7363 14.8121 50.2235 14.1706C49.7748 13.5932 49.0696 13.2404 48.1722 13.2404C47.0505 13.2404 45.8646 13.914 45.2236 14.6838ZM14.6473 9.07042C16.1216 9.07042 17.3075 7.88359 17.3075 6.40807C17.3075 4.93256 16.1216 3.74573 14.6473 3.74573C13.173 3.74573 11.9871 4.93256 11.9871 6.40807C11.9871 7.88359 13.173 9.07042 14.6473 9.07042ZM26.9227 26.4559V16.5442C26.9227 15.6782 26.8265 14.8121 26.3137 14.1706C25.865 13.5932 25.1599 13.2404 24.2625 13.2404C23.1087 13.2404 21.9228 13.914 21.2818 14.6838C21.2497 14.0102 21.0254 13.3687 20.9613 13.1441L18.6536 13.7857C18.7818 14.4913 18.9741 15.3574 18.9741 16.9291V26.4559H21.4741V16.8329C22.0831 16.0952 22.7882 15.6782 23.301 15.6782C23.6215 15.6782 23.942 15.7423 24.1343 15.9989C24.3266 16.2876 24.4227 16.7046 24.4227 17.699V26.4559H26.9227ZM38.4289 8.36474C37.4994 8.36474 36.7622 9.10249 36.7622 10.0327C36.7622 10.9629 37.4994 11.7007 38.3968 11.7007C39.3263 11.7007 40.0634 10.9629 40.0634 10.0327C40.0634 9.10249 39.3263 8.36474 38.4289 8.36474ZM13.4614 26.4559H15.9614V10.8346L13.4614 11.1554V26.4559ZM33.8777 9.90441C34.3264 9.90441 34.7751 10.0648 35.0635 10.2893L35.7687 8.33266C35.0956 7.85151 34.3584 7.62698 33.429 7.62698C32.788 7.62698 32.1149 7.78736 31.5059 8.26851C30.897 8.78173 30.256 9.80818 30.256 11.7328C30.256 12.5667 30.288 13.4328 30.288 13.4328H29.4226V15.6461H30.288V26.4238H32.8521V15.6782H34.743L35.2238 13.4649H32.8841V11.4762C32.8841 10.5139 33.2687 9.90441 33.8777 9.90441ZM37.1468 26.4559H39.6788V13.2404L37.1468 13.5611V26.4559Z\" fill=\"#005DA9\" />\n                      <path d=\"M77.0816 33.5126C68.6203 36.0146 58.3321 37.1052 48.2682 37.1052C22.7239 37.1052 6.24986 29.5993 5.09604 19.6877C4.67938 15.9668 7.59599 12.3422 12.4677 9.26285C11.6023 8.62132 11.0575 7.59488 11.0254 6.44012C3.97427 10.161 0 15.0366 0 19.9764C0 30.9145 19.5188 40.1525 48.5246 39.7676C58.6205 39.6393 67.0498 38.1958 74.6778 35.6939C83.7482 32.7428 89.4532 28.5087 90.8313 26.6483C89.1968 28.1238 85.3186 31.0748 77.0816 33.5126ZM23.2687 4.38723C24.9674 3.80985 27.3712 3.0721 27.3712 3.0721C34.1339 1.21166 41.6017 0.121063 48.5566 0.185215C40.544 -0.295931 33.2365 0.185215 26.8584 1.33997C26.8584 1.33997 24.743 1.69281 22.4675 2.27018C22.4675 2.27018 21.3777 2.55887 20.7047 2.75133C20.0316 2.94379 19.1021 3.2004 19.1021 3.2004C18.4611 3.39286 17.8201 3.6174 17.1791 3.84193C17.8201 4.48346 18.2047 5.31745 18.2368 6.27974C19.3586 5.76652 21.5059 4.99668 23.2687 4.38723Z\" fill=\"#E30034\" />\n                    </g>\n                    <defs>\n                      <clipPath id=\"clip0_2396_2480\">\n                        <rect width=\"91\" height=\"40\" fill=\"white\" />\n                      </clipPath>\n                    </defs>\n                  </svg>\n                </div>\n\n                <slot name=\"socials\" />\n              </div>\n            }\n            <div class=\"footer__base\">\n              {this.copyrightText &&\n                <div class=\"footer__brand\">\n                  {this.copyrightText}\n                </div>\n              }\n              <div class=\"footer__info\">\n                <slot name=\"info\"/>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAY,43FAClB,MAAAC,EAAeD,E,MCQFE,EAAM,MANnB,WAAAC,CAAAC,G,UAQWC,KAAAC,aAAsB,IAAIC,MAAOC,cAClCH,KAAAI,cAAwB,YAAcJ,KAAKC,YAAc,4BAEzDD,KAAAK,WAAsB,MACtBL,KAAAM,eAA0B,K,CAElC,iBAAAC,GACEP,KAAKK,aAAeL,KAAKQ,GAAGC,cAAc,gBAC1CT,KAAKM,iBAAmBN,KAAKQ,GAAGC,cAAc,mB,CAIhD,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,wDAAgB,yBAAyBC,MAAM,qBAC7CH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACNd,KAAKM,gBAAkBN,KAAKK,aAC7BM,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACTH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,KAAKC,OAAO,KAAKC,QAAQ,YAAYC,KAAK,OAAOC,MAAM,8BAChER,EAAA,KAAAE,IAAA,uDAAa,yBACXF,EAAA,QAAAE,IAAA,2CAAMO,EAAE,6yGAA6yGF,KAAK,YAC1zGP,EAAA,QAAAE,IAAA,2CAAMO,EAAE,g3BAAg3BF,KAAK,aAE/3BP,EAAA,QAAAE,IAAA,4CACEF,EAAA,YAAAE,IAAA,2CAAUQ,GAAG,mBACXV,EAAA,QAAAE,IAAA,2CAAME,MAAM,KAAKC,OAAO,KAAKE,KAAK,cAM3ClB,KAAKK,YACJM,EAAA,OAAAE,IAAA,4CAEEF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eACTH,EAAA,QAAAE,IAAA,2CAAMS,KAAK,UAKhBtB,KAAKM,gBACJK,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UAAS,aAAY,6BAC9BH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACTH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,KAAKC,OAAO,KAAKC,QAAQ,YAAYC,KAAK,OAAOC,MAAM,8BAChER,EAAA,KAAAE,IAAA,uDAAa,yBACXF,EAAA,QAAAE,IAAA,2CAAMO,EAAE,6yGAA6yGF,KAAK,YAC1zGP,EAAA,QAAAE,IAAA,2CAAMO,EAAE,g3BAAg3BF,KAAK,aAE/3BP,EAAA,QAAAE,IAAA,4CACEF,EAAA,YAAAE,IAAA,2CAAUQ,GAAG,mBACXV,EAAA,QAAAE,IAAA,2CAAME,MAAM,KAAKC,OAAO,KAAKE,KAAK,cAM1CP,EAAA,QAAAE,IAAA,2CAAMS,KAAK,aAGfX,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBACRd,KAAKI,eACJO,EAAA,OAAAE,IAAA,2CAAKC,MAAM,iBACRd,KAAKI,eAGVO,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBACTH,EAAA,QAAAE,IAAA,2CAAMS,KAAK,a","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as s,g as e}from"./p-e6edf72d.js";const a=':root{--ifx-font-family:Source Sans 3;font-family:var(--ifx-font-family, sans-serif)}:host{display:flex}.tabs{display:flex;font-family:var(--ifx-font-family, Source Sans 3);width:100%}.tabs.horizontal{flex-direction:column}.tabs.vertical{flex-direction:row}.tabs-list{display:flex;list-style:none;padding:0;margin:0;position:relative;font-weight:600}.tabs-list:focus-within .active-border{display:none}.active-border{content:"";position:absolute;transition:left 0.3s ease-in-out, top 0.3s ease-in-out, height 0.3s ease-in-out}.tabs.horizontal .active-border{bottom:0;left:0;height:2px;background-color:#0A8276}.tabs.vertical .tabs-list{flex-direction:column;border-bottom:none}.tabs.vertical .tab-content{padding-top:0px;padding-left:32px}.tabs:not(.vertical) .tab-item.full-width{flex:1}.tab-item{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;cursor:pointer;position:relative}.tab-item.icon__right{flex-direction:row-reverse;justify-content:flex-end}.tab-item:hover{color:#0A8276}.tab-item:active,.tab-item.active{color:#0A8276}.tab-item:focus,.tab-item.focus{outline:none;border-radius:1px;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.tab-item:focus+.active-border,.tab-item.focus+.active-border{display:none}.tab-item.disabled{color:#BFBBBB;pointer-events:none}.tabs.vertical .tab-item{border-right:2px solid transparent;min-width:7em}.tabs.vertical .active-border{left:0;top:0;width:2px;background-color:#0A8276}.tab-content{padding-top:24px;padding-left:0px;flex-grow:1}.tabs.small .tab-item{font-size:0.875rem}';const o=a;const n=class{constructor(s){t(this,s);this.ifxChange=i(this,"ifxChange",7);this.orientation="horizontal";this.activeTabIndex=0;this.fullWidth=false;this.internalActiveTabIndex=0;this.internalFocusedTabIndex=0;this.tabRefs=[];this.tabHeaderRefs=[];this.disabledTabs=[];this.tabObjects=[]}updateBorderOnWindowResize(){this.updateBorderAndFocus()}setActiveAndFocusedTab(t){var i;if(t>=this.tabObjects.length){t=this.tabObjects.length-1}if(t<0){t=0}if(!((i=this.tabObjects[t])===null||i===void 0?void 0:i.disabled)){this.internalActiveTabIndex=t;this.internalFocusedTabIndex=t}}handleTabHeaderChange(t){const i=t.target.getAttribute("slot").replace("tab-","");this.tabObjects[i].header=t.detail;this.tabObjects=[...this.tabObjects]}activeTabIndexChanged(t,i){if(t!==i){this.setActiveAndFocusedTab(t)}}componentWillLoad(){this.internalOrientation=this.orientation.toLowerCase()==="vertical"?"vertical":"horizontal";if(this.internalActiveTabIndex!==this.activeTabIndex){this.ifxChange.emit({previousTab:this.internalActiveTabIndex,currentTab:this.activeTabIndex})}this.onSlotChange();this.setActiveAndFocusedTab(this.activeTabIndex);this.updateTabStyles()}updateTabStyles(){this.tabHeaderRefs.forEach(((t,i)=>{t.classList.toggle("active",i===this.internalActiveTabIndex);t.setAttribute("aria-selected",i===this.internalActiveTabIndex?"true":"false")}))}reRenderBorder(){const t=this.el.shadowRoot.querySelector(".active-border");if(t&&this.tabHeaderRefs[this.internalActiveTabIndex]){if(this.orientation==="horizontal"){t.style.left=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetLeft}px`;t.style.width=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetWidth}px`;t.style.top="";t.style.height=""}else{t.style.top=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetTop}px`;t.style.height=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetHeight}px`;t.style.left="";t.style.width=""}}}onSlotChange(){const t=this.el.querySelectorAll("ifx-tab");this.tabObjects=Array.from(t).map((t=>({header:t===null||t===void 0?void 0:t.header,disabled:(t===null||t===void 0?void 0:t.disabled)===true,icon:t===null||t===void 0?void 0:t.icon,iconPosition:t===null||t===void 0?void 0:t.iconPosition})));this.tabRefs=Array.from(t);this.tabRefs.forEach(((t,i)=>{t.setAttribute("slot",`tab-${i}`)}))}setDefaultOrientation(){const t=["horizontal","vertical"];const i=this.orientation.toLowerCase();if(!t.includes(i)){this.internalOrientation="horizontal"}else this.internalOrientation=this.orientation}componentDidLoad(){this.updateBorderAndFocus();this.tabHeaderRefs.forEach(((t,i)=>{t.addEventListener("focus",this.onTabFocus(i))}))}onTabFocus(t){return()=>{this.internalFocusedTabIndex=t}}disconnectedCallback(){this.tabHeaderRefs.forEach(((t,i)=>{t.removeEventListener("focus",this.onTabFocus(i))}))}componentDidUpdate(){this.updateBorderAndFocus()}updateBorderAndFocus(){this.reRenderBorder();this.updateTabFocusability()}updateTabFocusability(){this.tabHeaderRefs.forEach(((t,i)=>{t.tabIndex=i===this.internalActiveTabIndex?0:-1}))}focusNextTab(){let t=this.internalFocusedTabIndex+1;while(t<this.tabHeaderRefs.length&&this.tabObjects[t].disabled){t++}if(t>=0&&t<this.tabHeaderRefs.length){this.internalFocusedTabIndex=t;this.tabHeaderRefs[t].focus()}}focusPreviousTab(){let t=this.internalFocusedTabIndex-1;while(t>=0&&this.tabObjects[t].disabled){t--}if(t>=0&&t<this.tabHeaderRefs.length){this.internalFocusedTabIndex=t;this.tabHeaderRefs[t].focus()}}getTabItemClass(t){const i=t===this.internalActiveTabIndex&&!this.tabObjects[t].disabled;const s=this.tabObjects[t].disabled;const e=this.tabObjects[t].iconPosition;return`tab-item ${this.fullWidth?"full-width":""} ${i?"active":""} ${s?"disabled":""} ${"icon__"+e}`}handleClick(t,i){this.ifxChange.emit({previousTab:this.internalActiveTabIndex,currentTab:i});if(!t.disabled)this.internalActiveTabIndex=i}handleKeyDown(t){if(t.key==="Tab"){if(t.shiftKey){if(this.internalFocusedTabIndex===0){return}else{t.preventDefault();this.focusPreviousTab()}}else{if(this.internalFocusedTabIndex===this.tabHeaderRefs.length-1){return}else{t.preventDefault();this.focusNextTab()}}}else if(t.key==="Enter"){const i=t.composedPath();const s=i.some((t=>this.tabHeaderRefs.includes(t)));if(!s){return}if(this.internalFocusedTabIndex!==-1&&!this.tabObjects[this.internalFocusedTabIndex].disabled){const t=this.internalActiveTabIndex;this.internalActiveTabIndex=this.internalFocusedTabIndex;this.ifxChange.emit({previousTab:t,currentTab:this.internalFocusedTabIndex})}}}render(){var t;return s("div",{key:"5611a3f319b0d8bd8eb135c5583e51a7ebbbdf14","aria-label":"navigation tabs",class:`tabs ${this.internalOrientation}`},s("ul",{key:"e72b1eca9d9a9a1d74aea100b5400d8db7e0bc8d",role:"tablist",class:"tabs-list"},(t=this.tabObjects)===null||t===void 0?void 0:t.map(((t,i)=>s("li",{class:this.getTabItemClass(i),ref:t=>this.tabHeaderRefs[i]=t,onMouseDown:t=>t.preventDefault(),onClick:()=>this.handleClick(t,i),"aria-selected":i===this.internalActiveTabIndex?"true":"false","aria-disabled":t.disabled?"true":"false",role:"tab"},(t===null||t===void 0?void 0:t.icon)?s("ifx-icon",{icon:t.icon}):"",t===null||t===void 0?void 0:t.header))),s("div",{key:"2fcbbe0dbfd84095cc2050e96f71b97bfd2d3571",class:"active-border"})),s("div",{key:"c788afab32a3b14eb58d4c195bbca3c83ef5fe4d",class:"tab-content"},Array.from(this.tabObjects).map(((t,i)=>s("div",{style:{display:i===this.internalActiveTabIndex?"block":"none"}},s("slot",{name:`tab-${i}`}))))))}get el(){return e(this)}static get watchers(){return{activeTabIndex:["activeTabIndexChanged"]}}};n.style=o;export{n as ifx_tabs};
-//# sourceMappingURL=p-09f1748d.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["tabsCss","IfxTabsStyle0","IfxTabs","constructor","hostRef","this","orientation","activeTabIndex","fullWidth","internalActiveTabIndex","internalFocusedTabIndex","tabRefs","tabHeaderRefs","disabledTabs","tabObjects","updateBorderOnWindowResize","updateBorderAndFocus","setActiveAndFocusedTab","index","length","_a","disabled","handleTabHeaderChange","e","tabIndex","target","getAttribute","replace","header","detail","activeTabIndexChanged","newValue","oldValue","componentWillLoad","internalOrientation","toLowerCase","ifxChange","emit","previousTab","currentTab","onSlotChange","updateTabStyles","forEach","tab","classList","toggle","setAttribute","reRenderBorder","borderElement","el","shadowRoot","querySelector","style","left","offsetLeft","width","offsetWidth","top","height","offsetTop","offsetHeight","tabs","querySelectorAll","Array","from","map","icon","iconPosition","setDefaultOrientation","validOrientations","lowercaseOrientation","includes","componentDidLoad","addEventListener","onTabFocus","disconnectedCallback","removeEventListener","componentDidUpdate","updateTabFocusability","focusNextTab","nextIndex","focus","focusPreviousTab","prevIndex","getTabItemClass","isActive","isDisabled","handleClick","handleKeyDown","ev","key","shiftKey","preventDefault","path","composedPath","isTabHeader","some","previouslyActiveTabIndex","render","h","class","role","ref","onMouseDown","event","onClick","_","display","name"],"sources":["src/components/tabs/tabs.scss?tag=ifx-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["//ifxTabs.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.tabs {\n  display: flex;\n  font-family: var(--ifx-font-family, #{tokens.$ifxFontFamilyBody});\n  width: 100%;\n}\n\n.tabs.horizontal {\n  flex-direction: column;\n}\n\n.tabs.vertical {\n  flex-direction: row;\n}\n\n.tabs-list {\n  display: flex;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  position: relative;\n  font-weight: tokens.$ifxFontWeightSemibold;\n}\n\n.tabs-list:focus-within .active-border {\n  display: none;\n}\n\n.active-border {\n  content: \"\";\n  position: absolute;\n  transition: left 0.3s ease-in-out, top 0.3s ease-in-out, height 0.3s ease-in-out;\n}\n\n.tabs.horizontal .active-border {\n  bottom: 0;\n  left: 0;\n  height: 2px;\n  background-color: tokens.$ifxColorOcean500;\n}\n\n.tabs.vertical .tabs-list {\n  flex-direction: column;\n  border-bottom: none;\n}\n\n.tabs.vertical .tab-content {\n  padding-top: 0px;\n  padding-left: 32px;\n}\n\n.tabs:not(.vertical) {\n  & .tab-item {\n    &.full-width { \n      flex: 1;\n    }\n  }\n}\n\n.tab-item {\n  // Reduced padding values\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n  cursor: pointer;\n  position: relative;\n\n  &.icon__right {\n    flex-direction: row-reverse;\n    justify-content: flex-end;\n  }\n  \n  &:hover {\n    color: tokens.$ifxColorOcean500;\n  }\n  \n  &:active,\n  &.active {\n    color: tokens.$ifxColorOcean500;\n  }\n\n  &:focus,\n  &.focus {\n    outline: none;\n    border-radius: 1px;\n    box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    \n    // Assuming .active-border is a sibling of .tab-item\n    +.active-border {\n      display: none; // Hide the active border when the tab is in focus\n    }\n  }\n  \n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n  }\n}\n\n.tabs.vertical .tab-item {\n  border-right: 2px solid transparent;\n  min-width: 7em;\n}\n\n.tabs.vertical .active-border {\n  left: 0;\n  top: 0;\n  width: 2px;\n  background-color: tokens.$ifxColorOcean500;\n}\n\n\n.tab-content {\n  padding-top: 24px;\n  padding-left: 0px;\n  flex-grow: 1;\n}\n\n.tabs.small .tab-item {\n  font-size: tokens.$ifxFontSizeS;\n}","//ifxTabs.tsx\nimport { Component, h, Prop, State, Element, Listen, Event, EventEmitter, Watch } from '@stencil/core';\n \n\n\n@Component({\n  tag: 'ifx-tabs',\n  styleUrl: 'tabs.scss',\n  shadow: true\n})\nexport class IfxTabs {\n  @Element() el: HTMLElement;\n\n  @Prop() orientation: string = \"horizontal\";\n  @Prop({ mutable: true }) activeTabIndex: number = 0;\n  @Prop() fullWidth: boolean = false;\n\n  @State() internalOrientation: string;\n  @State() internalActiveTabIndex: number = 0;\n  @State() internalFocusedTabIndex: number = 0;\n  @State() tabRefs: HTMLElement[] = [];\n  @State() tabHeaderRefs: HTMLElement[] = [];\n  @State() disabledTabs: string[] = [];\n  @State() tabObjects: any[] = [];\n\n  @Event() ifxChange: EventEmitter;\n\n  @Listen('resize', {target: 'window'})\n  updateBorderOnWindowResize() {\n    this.updateBorderAndFocus();\n  }\n\n  setActiveAndFocusedTab(index: number) {\n    if (index >= this.tabObjects.length) {\n      index = this.tabObjects.length - 1;\n    }\n    if (index < 0) {\n      index = 0;\n    }\n    if (!this.tabObjects[index]?.disabled) {\n      this.internalActiveTabIndex = index;\n      this.internalFocusedTabIndex = index;\n    }\n  }\n\n  @Listen('tabHeaderChange')\n  handleTabHeaderChange(e) { \n    const tabIndex = e.target.getAttribute('slot').replace('tab-', '');\n    this.tabObjects[tabIndex].header = e.detail;\n    this.tabObjects = [...this.tabObjects]; \n  }\n  \n\n  @Watch('activeTabIndex')\n  activeTabIndexChanged(newValue: number, oldValue: number) {\n    if (newValue !== oldValue) {\n      this.setActiveAndFocusedTab(newValue);\n    }\n  }\n\n\n\n  componentWillLoad() {\n    this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';\n    if (this.internalActiveTabIndex !== this.activeTabIndex) {\n      this.ifxChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: this.activeTabIndex });\n    };\n    this.onSlotChange();\n    this.setActiveAndFocusedTab(this.activeTabIndex);\n    this.updateTabStyles();\n  }\n\n  updateTabStyles() {\n    this.tabHeaderRefs.forEach((tab, index) => {\n      tab.classList.toggle('active', index === this.internalActiveTabIndex);\n      tab.setAttribute('aria-selected', index === this.internalActiveTabIndex ? 'true' : 'false')\n    });\n  }\n\n\n  // needed for smooth border transition\n  reRenderBorder() {\n    const borderElement = this.el.shadowRoot.querySelector('.active-border') as HTMLElement;\n    if (borderElement && this.tabHeaderRefs[this.internalActiveTabIndex]) {\n      if (this.orientation === 'horizontal') {\n\n        borderElement.style.left = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetLeft}px`;\n        borderElement.style.width = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetWidth}px`;\n        borderElement.style.top = '';\n        borderElement.style.height = '';\n      } else {\n        borderElement.style.top = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetTop}px`;\n        borderElement.style.height = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetHeight}px`;\n        borderElement.style.left = '';\n        borderElement.style.width = '';\n      }\n    }\n  }\n\n\n  // when a slot is removed / added\n  @Listen('slotchange')\n  onSlotChange() {\n    const tabs = this.el.querySelectorAll('ifx-tab');\n    this.tabObjects = Array.from(tabs).map((tab) => {\n      return {\n        header: tab?.header,\n        disabled: tab?.disabled === true,\n        icon: tab?.icon,\n        iconPosition: tab?.iconPosition\n      }\n    });\n\n    this.tabRefs = Array.from(tabs);\n    this.tabRefs.forEach((tab, index) => {\n      tab.setAttribute('slot', `tab-${index}`);\n    });\n  }\n\n  setDefaultOrientation() {\n    const validOrientations = ['horizontal', 'vertical'];\n    const lowercaseOrientation = this.orientation.toLowerCase();\n\n    if (!validOrientations.includes(lowercaseOrientation)) {\n      this.internalOrientation = 'horizontal';\n    } else this.internalOrientation = this.orientation;\n  }\n\n  componentDidLoad() {\n    this.updateBorderAndFocus();\n    // Add keyboard event listeners for each tab header\n    this.tabHeaderRefs.forEach((tab, index) => {\n      tab.addEventListener('focus', this.onTabFocus(index));\n    });\n\n  }\n\n  onTabFocus(index) {\n    return () => {\n      this.internalFocusedTabIndex = index;\n    };\n  }\n\n  disconnectedCallback() {\n    // Remove keyboard event listeners when component is unmounted\n    this.tabHeaderRefs.forEach((tab, index) => {\n      tab.removeEventListener('focus', this.onTabFocus(index));\n    });\n  }\n  componentDidUpdate() {\n    this.updateBorderAndFocus();\n  }\n\n  private updateBorderAndFocus() {\n    this.reRenderBorder()\n    this.updateTabFocusability();\n  }\n\n  private updateTabFocusability() {\n    this.tabHeaderRefs.forEach((tab, index) => {\n      tab.tabIndex = index === this.internalActiveTabIndex ? 0 : -1;\n    })\n  }\n\n\n  private focusNextTab() {\n    let nextIndex = this.internalFocusedTabIndex + 1;\n    while (nextIndex < this.tabHeaderRefs.length && this.tabObjects[nextIndex].disabled) {\n      nextIndex++;\n    }\n    if (nextIndex >= 0 && nextIndex < this.tabHeaderRefs.length) {\n      this.internalFocusedTabIndex = nextIndex;\n      this.tabHeaderRefs[nextIndex].focus();\n    }\n  }\n\n  private focusPreviousTab() {\n    let prevIndex = this.internalFocusedTabIndex - 1;\n    while ((prevIndex >= 0) && (this.tabObjects[prevIndex].disabled)) {\n      prevIndex--;\n    }\n    if ((prevIndex >= 0) && (prevIndex < this.tabHeaderRefs.length)) {\n      this.internalFocusedTabIndex = prevIndex;\n      this.tabHeaderRefs[prevIndex].focus();\n    }\n  }\n\n\n  private getTabItemClass(index: number) {\n    const isActive = index === this.internalActiveTabIndex && !this.tabObjects[index].disabled;\n    const isDisabled = this.tabObjects[index].disabled;\n    const iconPosition = this.tabObjects[index].iconPosition\n    return `tab-item ${this.fullWidth ? 'full-width' : \"\"} ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''} ${'icon__'+iconPosition}`;\n  }\n\n  private handleClick(tab, index) {\n    this.ifxChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: index })\n    if (!tab.disabled) this.internalActiveTabIndex = index;\n\n  }\n\n\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if (ev.key === 'Tab') {\n\n      if (ev.shiftKey) {\n        // Shift + Tab\n        if (this.internalFocusedTabIndex === 0) {\n          // Allow default behavior to move focus out of component\n          return;\n        } else {\n          ev.preventDefault();\n          this.focusPreviousTab();\n        }\n      } else {\n        // Tab\n        if (this.internalFocusedTabIndex === this.tabHeaderRefs.length - 1) {\n          // Allow default behavior to move focus out of component\n          return;\n        } else {\n          ev.preventDefault();\n          this.focusNextTab();\n        }\n      }\n    } else if (ev.key === 'Enter') {\n      const path = ev.composedPath();\n      const isTabHeader = path.some(el => this.tabHeaderRefs.includes(el as HTMLElement));\n      if (!isTabHeader) {\n        return;\n      }\n      \n      if (this.internalFocusedTabIndex !== -1 && !this.tabObjects[this.internalFocusedTabIndex].disabled) {\n        const previouslyActiveTabIndex = this.internalActiveTabIndex;\n        this.internalActiveTabIndex = this.internalFocusedTabIndex;\n        this.ifxChange.emit({ previousTab: previouslyActiveTabIndex, currentTab: this.internalFocusedTabIndex })\n      }\n    }\n  }\n\n\n  render() {\n    return (\n      <div aria-label=\"navigation tabs\" class={`tabs ${this.internalOrientation}`}>\n        <ul role=\"tablist\" class=\"tabs-list\">\n          {this.tabObjects?.map((tab, index) => (\n            <li\n              class={this.getTabItemClass(index)}\n              ref={(el) => (this.tabHeaderRefs[index] = el)}\n              onMouseDown={(event) => event.preventDefault()}\n              onClick={() => this.handleClick(tab, index)}\n              aria-selected={index === this.internalActiveTabIndex ? 'true' : 'false'}\n              aria-disabled={tab.disabled ? 'true' : 'false'}\n              role=\"tab\"\n            > \n              {tab?.icon ? <ifx-icon icon = {tab.icon}></ifx-icon> : ''}\n              {tab?.header}\n            </li>\n          ))}\n          <div class=\"active-border\"></div>\n        </ul>\n        <div class=\"tab-content\">\n          {Array.from(this.tabObjects).map((_, index) => (\n            <div style={{ display: index === this.internalActiveTabIndex ? 'block' : 'none' }}>\n              <slot name={`tab-${index}`} />\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n}"],"mappings":"yDAAA,MAAMA,EAAU,qhDAChB,MAAAC,EAAeD,E,MCSFE,EAAO,MALpB,WAAAC,CAAAC,G,+CAQUC,KAAAC,YAAsB,aACLD,KAAAE,eAAyB,EAC1CF,KAAAG,UAAqB,MAGpBH,KAAAI,uBAAiC,EACjCJ,KAAAK,wBAAkC,EAClCL,KAAAM,QAAyB,GACzBN,KAAAO,cAA+B,GAC/BP,KAAAQ,aAAyB,GACzBR,KAAAS,WAAoB,E,CAK7B,0BAAAC,GACEV,KAAKW,sB,CAGP,sBAAAC,CAAuBC,G,MACrB,GAAIA,GAASb,KAAKS,WAAWK,OAAQ,CACnCD,EAAQb,KAAKS,WAAWK,OAAS,C,CAEnC,GAAID,EAAQ,EAAG,CACbA,EAAQ,C,CAEV,MAAKE,EAAAf,KAAKS,WAAWI,MAAM,MAAAE,SAAA,SAAAA,EAAEC,UAAU,CACrChB,KAAKI,uBAAyBS,EAC9Bb,KAAKK,wBAA0BQ,C,EAKnC,qBAAAI,CAAsBC,GACpB,MAAMC,EAAWD,EAAEE,OAAOC,aAAa,QAAQC,QAAQ,OAAQ,IAC/DtB,KAAKS,WAAWU,GAAUI,OAASL,EAAEM,OACrCxB,KAAKS,WAAa,IAAIT,KAAKS,W,CAK7B,qBAAAgB,CAAsBC,EAAkBC,GACtC,GAAID,IAAaC,EAAU,CACzB3B,KAAKY,uBAAuBc,E,EAMhC,iBAAAE,GACE5B,KAAK6B,oBAAsB7B,KAAKC,YAAY6B,gBAAkB,WAAa,WAAa,aACxF,GAAI9B,KAAKI,yBAA2BJ,KAAKE,eAAgB,CACvDF,KAAK+B,UAAUC,KAAK,CAAEC,YAAajC,KAAKI,uBAAwB8B,WAAYlC,KAAKE,gB,CAEnFF,KAAKmC,eACLnC,KAAKY,uBAAuBZ,KAAKE,gBACjCF,KAAKoC,iB,CAGP,eAAAA,GACEpC,KAAKO,cAAc8B,SAAQ,CAACC,EAAKzB,KAC/ByB,EAAIC,UAAUC,OAAO,SAAU3B,IAAUb,KAAKI,wBAC9CkC,EAAIG,aAAa,gBAAiB5B,IAAUb,KAAKI,uBAAyB,OAAS,QAAQ,G,CAM/F,cAAAsC,GACE,MAAMC,EAAgB3C,KAAK4C,GAAGC,WAAWC,cAAc,kBACvD,GAAIH,GAAiB3C,KAAKO,cAAcP,KAAKI,wBAAyB,CACpE,GAAIJ,KAAKC,cAAgB,aAAc,CAErC0C,EAAcI,MAAMC,KAAO,GAAGhD,KAAKO,cAAcP,KAAKI,wBAAwB6C,eAC9EN,EAAcI,MAAMG,MAAQ,GAAGlD,KAAKO,cAAcP,KAAKI,wBAAwB+C,gBAC/ER,EAAcI,MAAMK,IAAM,GAC1BT,EAAcI,MAAMM,OAAS,E,KACxB,CACLV,EAAcI,MAAMK,IAAM,GAAGpD,KAAKO,cAAcP,KAAKI,wBAAwBkD,cAC7EX,EAAcI,MAAMM,OAAS,GAAGrD,KAAKO,cAAcP,KAAKI,wBAAwBmD,iBAChFZ,EAAcI,MAAMC,KAAO,GAC3BL,EAAcI,MAAMG,MAAQ,E,GAQlC,YAAAf,GACE,MAAMqB,EAAOxD,KAAK4C,GAAGa,iBAAiB,WACtCzD,KAAKS,WAAaiD,MAAMC,KAAKH,GAAMI,KAAKtB,IAC/B,CACLf,OAAQe,IAAG,MAAHA,SAAG,SAAHA,EAAKf,OACbP,UAAUsB,IAAG,MAAHA,SAAG,SAAHA,EAAKtB,YAAa,KAC5B6C,KAAMvB,IAAG,MAAHA,SAAG,SAAHA,EAAKuB,KACXC,aAAcxB,IAAG,MAAHA,SAAG,SAAHA,EAAKwB,iBAIvB9D,KAAKM,QAAUoD,MAAMC,KAAKH,GAC1BxD,KAAKM,QAAQ+B,SAAQ,CAACC,EAAKzB,KACzByB,EAAIG,aAAa,OAAQ,OAAO5B,IAAQ,G,CAI5C,qBAAAkD,GACE,MAAMC,EAAoB,CAAC,aAAc,YACzC,MAAMC,EAAuBjE,KAAKC,YAAY6B,cAE9C,IAAKkC,EAAkBE,SAASD,GAAuB,CACrDjE,KAAK6B,oBAAsB,Y,MACtB7B,KAAK6B,oBAAsB7B,KAAKC,W,CAGzC,gBAAAkE,GACEnE,KAAKW,uBAELX,KAAKO,cAAc8B,SAAQ,CAACC,EAAKzB,KAC/ByB,EAAI8B,iBAAiB,QAASpE,KAAKqE,WAAWxD,GAAO,G,CAKzD,UAAAwD,CAAWxD,GACT,MAAO,KACLb,KAAKK,wBAA0BQ,CAAK,C,CAIxC,oBAAAyD,GAEEtE,KAAKO,cAAc8B,SAAQ,CAACC,EAAKzB,KAC/ByB,EAAIiC,oBAAoB,QAASvE,KAAKqE,WAAWxD,GAAO,G,CAG5D,kBAAA2D,GACExE,KAAKW,sB,CAGC,oBAAAA,GACNX,KAAK0C,iBACL1C,KAAKyE,uB,CAGC,qBAAAA,GACNzE,KAAKO,cAAc8B,SAAQ,CAACC,EAAKzB,KAC/ByB,EAAInB,SAAWN,IAAUb,KAAKI,uBAAyB,GAAK,CAAC,G,CAKzD,YAAAsE,GACN,IAAIC,EAAY3E,KAAKK,wBAA0B,EAC/C,MAAOsE,EAAY3E,KAAKO,cAAcO,QAAUd,KAAKS,WAAWkE,GAAW3D,SAAU,CACnF2D,G,CAEF,GAAIA,GAAa,GAAKA,EAAY3E,KAAKO,cAAcO,OAAQ,CAC3Dd,KAAKK,wBAA0BsE,EAC/B3E,KAAKO,cAAcoE,GAAWC,O,EAI1B,gBAAAC,GACN,IAAIC,EAAY9E,KAAKK,wBAA0B,EAC/C,MAAQyE,GAAa,GAAO9E,KAAKS,WAAWqE,GAAmB,SAAG,CAChEA,G,CAEF,GAAKA,GAAa,GAAOA,EAAY9E,KAAKO,cAAcO,OAAS,CAC/Dd,KAAKK,wBAA0ByE,EAC/B9E,KAAKO,cAAcuE,GAAWF,O,EAK1B,eAAAG,CAAgBlE,GACtB,MAAMmE,EAAWnE,IAAUb,KAAKI,yBAA2BJ,KAAKS,WAAWI,GAAOG,SAClF,MAAMiE,EAAajF,KAAKS,WAAWI,GAAOG,SAC1C,MAAM8C,EAAe9D,KAAKS,WAAWI,GAAOiD,aAC5C,MAAO,YAAY9D,KAAKG,UAAY,aAAe,MAAM6E,EAAW,SAAW,MAAMC,EAAa,WAAa,MAAM,SAASnB,G,CAGxH,WAAAoB,CAAY5C,EAAKzB,GACvBb,KAAK+B,UAAUC,KAAK,CAAEC,YAAajC,KAAKI,uBAAwB8B,WAAYrB,IAC5E,IAAKyB,EAAItB,SAAUhB,KAAKI,uBAAyBS,C,CAOnD,aAAAsE,CAAcC,GACZ,GAAIA,EAAGC,MAAQ,MAAO,CAEpB,GAAID,EAAGE,SAAU,CAEf,GAAItF,KAAKK,0BAA4B,EAAG,CAEtC,M,KACK,CACL+E,EAAGG,iBACHvF,KAAK6E,kB,MAEF,CAEL,GAAI7E,KAAKK,0BAA4BL,KAAKO,cAAcO,OAAS,EAAG,CAElE,M,KACK,CACLsE,EAAGG,iBACHvF,KAAK0E,c,QAGJ,GAAIU,EAAGC,MAAQ,QAAS,CAC7B,MAAMG,EAAOJ,EAAGK,eAChB,MAAMC,EAAcF,EAAKG,MAAK/C,GAAM5C,KAAKO,cAAc2D,SAAStB,KAChE,IAAK8C,EAAa,CAChB,M,CAGF,GAAI1F,KAAKK,2BAA6B,IAAML,KAAKS,WAAWT,KAAKK,yBAAyBW,SAAU,CAClG,MAAM4E,EAA2B5F,KAAKI,uBACtCJ,KAAKI,uBAAyBJ,KAAKK,wBACnCL,KAAK+B,UAAUC,KAAK,CAAEC,YAAa2D,EAA0B1D,WAAYlC,KAAKK,yB,GAMpF,MAAAwF,G,MACE,OACEC,EAAA,OAAAT,IAAA,wDAAgB,kBAAkBU,MAAO,QAAQ/F,KAAK6B,uBACpDiE,EAAA,MAAAT,IAAA,2CAAIW,KAAK,UAAUD,MAAM,cACtBhF,EAAAf,KAAKS,cAAU,MAAAM,SAAA,S,EAAE6C,KAAI,CAACtB,EAAKzB,IAC1BiF,EAAA,MACEC,MAAO/F,KAAK+E,gBAAgBlE,GAC5BoF,IAAMrD,GAAQ5C,KAAKO,cAAcM,GAAS+B,EAC1CsD,YAAcC,GAAUA,EAAMZ,iBAC9Ba,QAAS,IAAMpG,KAAKkF,YAAY5C,EAAKzB,GAAM,gBAC5BA,IAAUb,KAAKI,uBAAyB,OAAS,QAAO,gBACxDkC,EAAItB,SAAW,OAAS,QACvCgF,KAAK,QAEJ1D,IAAG,MAAHA,SAAG,SAAHA,EAAKuB,MAAOiC,EAAA,YAAUjC,KAAQvB,EAAIuB,OAAoB,GACtDvB,IAAG,MAAHA,SAAG,SAAHA,EAAKf,UAGVuE,EAAA,OAAAT,IAAA,2CAAKU,MAAM,mBAEbD,EAAA,OAAAT,IAAA,2CAAKU,MAAM,eACRrC,MAAMC,KAAK3D,KAAKS,YAAYmD,KAAI,CAACyC,EAAGxF,IACnCiF,EAAA,OAAK/C,MAAO,CAAEuD,QAASzF,IAAUb,KAAKI,uBAAyB,QAAU,SACvE0F,EAAA,QAAMS,KAAM,OAAO1F,U","ignoreList":[]}

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

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

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

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

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

@@ -1,2 +0,0 @@
-import{r as t,h as o,g as e}from"./p-e6edf72d.js";import{c as i}from"./p-e459974a.js";const s=":root{--ifx-font-family:Source Sans 3;font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.tooltip__container{display:inline-flex;flex-direction:column;position:relative;font-family:var(--ifx-font-family, Source Sans 3)}.tooltip-extended,.tooltip-compact,.tooltip-dismissible{background-color:#1D1D1D;border:1px solid black;z-index:1080;display:none;transition:opacity 0.3s;position:absolute;font-size:14px;font-style:normal;font-weight:400;line-height:20px;color:#FFFFFF;width:max-content;box-sizing:border-box;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.visible.tooltip-extended,.visible.tooltip-compact,.visible.tooltip-dismissible{display:flex !important;align-items:start}.tooltip-dismissible .close-button{all:unset;cursor:pointer;position:relative;order:2;margin-top:12px;margin-right:12px;line-height:0px}.tooltip-dismissible .tooltip-dismissible-content{display:flex;flex-direction:column;gap:12px;padding:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-dismissible .tooltip-dismissible-header,.tooltip-dismissible .tooltip-dismissible-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-dismissible .tooltip-dismissible-header{font-weight:600}.tooltip-dismissible .tooltip-dismissible-body{font-weight:400}.tooltip-compact{padding:4px 8px;text-align:center;flex-grow:1}.tooltip-extended{align-items:center;padding:12px;gap:10px}.tooltip-extended .extended_icon{display:flex;align-self:flex-start;align-items:center;cursor:pointer}.tooltip-extended .tooltip-extended-content{display:flex;flex-direction:column;gap:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-extended .tooltip-extended-header,.tooltip-extended .tooltip-extended-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-extended .tooltip-extended-header{font-weight:600}.tooltip-extended .tooltip-extended-body{font-weight:400}.tooltip__container .tooltip-arrow-svg{position:absolute;width:8px;height:8px}[data-placement=top].tooltip-extended>.tooltip-arrow-svg,[data-placement=top].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:50%;transform:rotate(180deg) translateX(-50%)}[data-placement=top-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-start].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:10px;transform:rotate(180deg)}[data-placement=top-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-end].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;right:10px;transform:rotate(180deg)}[data-placement=bottom].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:50%;transform:translateX(-50%)}[data-placement=bottom-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:10px}[data-placement=bottom-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-compact>.tooltip-arrow-svg{top:-7px;right:10px}[data-placement=left].tooltip-extended>.tooltip-arrow-svg,[data-placement=left].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=left].tooltip-compact>.tooltip-arrow-svg{right:-3px;top:50%;transform:rotate(90deg) translateY(-50%) translateX(-50%)}[data-placement=right].tooltip-extended>.tooltip-arrow-svg,[data-placement=right].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=right].tooltip-compact>.tooltip-arrow-svg{left:-3px;top:50%;transform:rotate(270deg) translateY(-50%) translateX(50%)}.tooltip-compact{min-width:28px !important;max-width:145px !important}.tooltip-dismissible{min-width:145px !important;max-width:310px !important}.tooltip-extended{min-width:145px !important;max-width:310px !important}";const a=s;const l=class{constructor(o){t(this,o);this.tooltipVisible=false;this.header="";this.text="";this.position="auto";this.internalPosition="auto";this.variant="compact";this.popperInstance=null;this.onMouseEnter=()=>{var t,o;(t=this.popperInstance)===null||t===void 0?void 0:t.setOptions((t=>Object.assign(Object.assign({},t),{modifiers:[...t.modifiers,{name:"eventListeners",enabled:true}]})));this.initializePopper();this.tooltipVisible=true;this.tooltipEl.style.display="block";(o=this.popperInstance)===null||o===void 0?void 0:o.update()};this.onMouseLeave=()=>{this.tooltipVisible=false;this.tooltipEl.style.display="none"};this.onClick=()=>{var t;if(this.variant.toLowerCase()==="dismissible"){this.initializePopper();this.tooltipVisible=!this.tooltipVisible;this.tooltipEl.style.display=this.tooltipVisible?"block":"none";(t=this.popperInstance)===null||t===void 0?void 0:t.update()}};this.onDismissClick=()=>{this.tooltipVisible=false;this.tooltipEl.style.display="none"}}componentWillLoad(){if(this.variant.toLowerCase().trim()===""){this.variant="compact"}}componentDidLoad(){const t=this.el.shadowRoot.querySelector(".tooltip__container").firstChild;if(this.variant.toLowerCase()==="compact"||this.variant.toLowerCase()==="extended"){t.addEventListener("mouseenter",this.onMouseEnter);t.addEventListener("mouseleave",this.onMouseLeave)}else{t.addEventListener("click",this.onClick)}}initializePopper(){if(this.popperInstance)return;this.referenceEl=this.el;if(this.variant.toLowerCase()==="compact"){this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-compact")}else if(this.variant.toLowerCase()==="dismissible"){this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-dismissible")}else{this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-extended")}const t=this.position==="auto"?this.determineBestPosition():this.position;this.internalPosition=t;if(this.tooltipEl&&this.referenceEl){this.popperInstance=i(this.referenceEl,this.tooltipEl,{placement:this.internalPosition,modifiers:[{name:"offset",options:{offset:[0,8]}},{name:"arrow",options:{element:".tooltip-arrow-svg"}}]})}this.tooltipEl.setAttribute("data-placement",t)}determineBestPosition(){const t=this.referenceEl.getBoundingClientRect();const o=window.scrollY;const e=window.scrollX;const i=t.top+o+t.height/2;const s=t.left+e+t.width/2;if(this.position==="auto"){if(i>window.innerHeight/2){if(s>window.innerWidth/2){return"top-end"}else{return"top-start"}}else{if(s>window.innerWidth/2){return"bottom-end"}else{return"bottom-start"}}}else{return this.position}}positionChanged(t){var o;this.internalPosition=t;(o=this.popperInstance)===null||o===void 0?void 0:o.destroy();this.popperInstance=null}disconnectedCallback(){var t;(t=this.popperInstance)===null||t===void 0?void 0:t.destroy()}render(){const t={"tooltip-dismissible":true,visible:this.tooltipVisible};const e={"tooltip-compact":true,visible:this.tooltipVisible};const i={"tooltip-extended":true,visible:this.tooltipVisible};return o("div",{key:"9c87ad898f047bf3fefbfeec39faa033d39e2860","aria-label":"a tooltip showing important information","aria-value":this.header,class:"tooltip__container"},o("slot",{key:"fc4ac4d2a09ccd8c038a180aeadce7fee2ab9b90"}),this.variant.toLowerCase()==="dismissible"&&o("div",{key:"9627cd1efe01ffcae8227920b0a59848c85ee5b7",class:t},o("button",{key:"96c225756217e4f5054c8b02fe0a20b848c845f5","aria-label":"Close Tooltip",class:"close-button",onClick:this.onDismissClick},o("ifx-icon",{key:"f976619fb32729deb0be068b2c813b02bce37749",icon:"cross16"})),o("div",{key:"e4219ce93a82ecd3534c8985cd62049cd23cbaa7",class:"tooltip-dismissible-content"},this.header&&o("div",{key:"a168b26826aa857fce0f437023e5e18a956cee3d",class:"tooltip-dismissible-header"},this.header),o("div",{key:"0bdfdce23226097d1f60a3d72032bcd9d7b709fe",class:"tooltip-dismissible-body"},this.text)),o("svg",{key:"6c6efed9ed056040960a7928e93d0b6ff7f83b30",class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{key:"f9de1eb1b04f276c3ca7176af1066e483a441b69",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))),this.variant.toLowerCase()==="compact"&&o("div",{key:"7cbd4ea98ec29eff71021b27cfd2696c5fa6cb68",class:e},this.text,o("svg",{key:"e75535c511eea6ea685cabd01f7646452699ecff",class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{key:"f3c6a9710be713cac4e3322e68700423441bc007",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))),this.variant.toLowerCase()==="extended"&&o("div",{key:"f04a640ab90d6f957bff270b7b170699634f3ee9",class:i},o("slot",{key:"aaab6713c93dbf5441ed8d83b1c8111076397404",name:"icon"},this.icon?o("div",{class:"extended_icon"},o("ifx-icon",{icon:this.icon})):o("svg",{class:"extended_icon",xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none",viewBox:"0 0 24 24"},o("path",{stroke:"#fff","stroke-linecap":"round","stroke-linejoin":"round",d:"M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z"}),o("path",{stroke:"#fff",d:"M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z"}),o("path",{fill:"#fff",d:"M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"}))),o("div",{key:"723034136727fa51330c9f34fbfb4931f8af857e",class:"tooltip-extended-content"},this.header&&o("div",{key:"8bc34fd54d3e0a7abcd2f08145556c94dbde879b",class:"tooltip-extended-header"},this.header),o("div",{key:"e607a0953671b563f49921049a69ffe71c6d962e",class:"tooltip-extended-body"},this.text)),o("svg",{key:"a1aa6e39af3ecc50a5c8ee81c3f9fa826f88a446",class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{key:"9cd2e3ec0d0e5f1d3b4c58f7f85f5a3439638eae",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))))}get el(){return e(this)}static get watchers(){return{position:["positionChanged"]}}};l.style=a;export{l as ifx_tooltip};
-//# sourceMappingURL=p-13c0d591.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["tooltipCss","IfxTooltipStyle0","Tooltip","constructor","hostRef","this","tooltipVisible","header","text","position","internalPosition","variant","popperInstance","onMouseEnter","_a","setOptions","options","Object","assign","modifiers","name","enabled","initializePopper","tooltipEl","style","display","_b","update","onMouseLeave","onClick","toLowerCase","onDismissClick","componentWillLoad","trim","componentDidLoad","slotElement","el","shadowRoot","querySelector","firstChild","addEventListener","referenceEl","effectivePosition","determineBestPosition","createPopper","placement","offset","element","setAttribute","rect","getBoundingClientRect","yOffset","window","scrollY","xOffset","scrollX","verticalHalfwayPoint","top","height","horizontalHalfwayPoint","left","width","innerHeight","innerWidth","positionChanged","newVal","destroy","disconnectedCallback","render","tooltipDismissible","visible","tooltipCompact","tooltipExtended","h","key","class","icon","viewBox","fill","xmlns","id","d","stroke"],"sources":["src/components/tooltip/tooltip.scss?tag=ifx-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.tooltip__container {\n  display: inline-flex;\n  flex-direction: column;\n  position: relative;\n  font-family: var(--ifx-font-family, #{tokens.$ifxFontFamilyBody});\n\n}\n\n%tooltip-common {\n  background-color: tokens.$ifxColorBaseBlack;\n  border: 1px solid black;\n  z-index: 1080;\n  display: none;\n  transition: opacity 0.3s;\n  position: absolute;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  color: tokens.$ifxColorBaseWhite;\n  width: max-content;\n  box-sizing: border-box;\n\n  white-space: pre-wrap;   /* wraps text at spaces and within words */\n  word-wrap: break-word;   /* breaks text within a word if necessary */\n  overflow-wrap: anywhere; /* breaks text at arbitrary points when needed */\n\n  &.visible {\n    display: flex !important;\n    align-items: start;\n    //min-width: 100px;\n    //width: auto;\n  }\n}\n\n\n\n.tooltip-dismissible {\n  @extend %tooltip-common;\n\n    .close-button {\n      all: unset;\n      //position: absolute;\n      //top: tokens.$ifxSpace150;\n      //right: tokens.$ifxSpace150;\n      cursor: pointer;\n      position: relative;\n      order: 2;\n      margin-top: 12px;\n      margin-right: 12px;\n      line-height: 0px;\n    }\n\n  .tooltip-dismissible-content {\n    display: flex;\n    flex-direction: column;\n    gap: tokens.$ifxSpace150;\n    padding: tokens.$ifxSpace150;\n    flex-grow: 1;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n    overflow-wrap: anywhere;\n\n  }\n\n  .tooltip-dismissible-header,\n  .tooltip-dismissible-body {\n    font-size: 14px;\n    font-style: normal;\n    line-height: 20px;\n  }\n\n  .tooltip-dismissible-header {\n    font-weight: tokens.$ifxFontWeightSemibold;\n  }\n\n  .tooltip-dismissible-body {\n    font-weight: tokens.$ifxFontWeightRegular;\n  }\n}\n\n.tooltip-compact {\n  @extend %tooltip-common;\n  padding: 4px 8px;\n  text-align: center;\n  flex-grow: 1;\n}\n\n\n.tooltip-extended {\n  @extend %tooltip-common;\n  //padding-left: 36px; // Added this line, adjust as per your icon width\n  //padding-left: tokens.$ifxSpace150; // Added this line, adjust as per your icon width\n  align-items: center;\n  padding: tokens.$ifxSpace150;\n  gap: 10px;\n\n  .extended_icon {\n    display: flex;\n    align-self: flex-start;\n    align-items: center;\n    //padding-top: tokens.$ifxSpace150;\n    cursor: pointer;\n  }\n\n\n\n  .tooltip-extended-content {\n    display: flex;\n    flex-direction: column;\n    gap: tokens.$ifxSpace150;\n    //padding: tokens.$ifxSpace150;\n    flex-grow: 1;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n    overflow-wrap: anywhere;\n  }\n\n  .tooltip-extended-header,\n  .tooltip-extended-body {\n    font-size: 14px;\n    font-style: normal;\n    line-height: 20px;\n  }\n\n  .tooltip-extended-header {\n    font-weight: tokens.$ifxFontWeightSemibold;\n  }\n\n  .tooltip-extended-body {\n    font-weight: tokens.$ifxFontWeightRegular;\n  }\n}\n\n\n.tooltip__container .tooltip-arrow-svg {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n}\n\n\n%tooltip-arrow-positions {\n\n  // For 'top' placement\n  &[data-placement=\"top\"]>.tooltip-arrow-svg {\n    bottom: -7px;\n    left: 50%;\n    transform: rotate(180deg) translateX(-50%);\n  }\n\n  // For 'top-start' placement\n  &[data-placement=\"top-start\"]>.tooltip-arrow-svg {\n    bottom: -7px;\n    left: 10px; // Adjust as needed\n    transform: rotate(180deg)\n  }\n\n  // For 'top-end' placement\n  &[data-placement=\"top-end\"]>.tooltip-arrow-svg {\n    bottom: -7px;\n    right: 10px; // Adjust as needed\n    transform: rotate(180deg);\n  }\n\n  // For 'bottom' placement\n  &[data-placement=\"bottom\"]>.tooltip-arrow-svg {\n    top: -7px;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  // For 'bottom-start' placement\n  &[data-placement=\"bottom-start\"]>.tooltip-arrow-svg {\n    top: -7px;\n    left: 10px; // Adjust as needed\n  }\n\n  // For 'bottom-end' placement\n  &[data-placement=\"bottom-end\"]>.tooltip-arrow-svg {\n    top: -7px;\n    right: 10px; // Adjust as needed\n  }\n\n  // For 'left' placement\n  &[data-placement=\"left\"]>.tooltip-arrow-svg {\n    right: -3px;\n    top: 50%;\n    transform: rotate(90deg) translateY(-50%) translateX(-50%);\n  }\n\n  // For 'right' placement\n  &[data-placement=\"right\"]>.tooltip-arrow-svg {\n    left: -3px;\n    top: 50%;\n    transform: rotate(270deg) translateY(-50%) translateX(50%);\n  }\n}\n\n\n.tooltip-compact {\n  @extend %tooltip-arrow-positions;\n  min-width: 28px !important;\n  max-width: 145px !important;\n}\n\n.tooltip-dismissible {\n  @extend %tooltip-arrow-positions;\n  min-width: 145px !important;\n  max-width: 310px !important;\n}\n\n.tooltip-extended {\n  @extend %tooltip-arrow-positions;\n  min-width: 145px !important;\n  max-width: 310px !important;\n}\n","import { Component, Prop, h, Element, State, Watch } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\n \n\n@Component({\n  tag: 'ifx-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true\n})\nexport class Tooltip {\n\n  @Element() el: HTMLElement;\n  @State() tooltipVisible: boolean = false;\n  @Prop() header: string = '';\n  @Prop() text: string = '';\n  @Prop() position: 'bottom-start' | 'top-start' | 'left' | 'bottom-end' | 'top-end' | 'right' | 'bottom' | 'top' | 'auto' = 'auto';\n  @State() internalPosition: 'bottom-start' | 'top-start' | 'left' | 'bottom-end' | 'top-end' | 'right' | 'bottom' | 'top' | 'auto' = 'auto';\n\n  @Prop() variant: 'compact' | 'dismissible' | 'extended' = 'compact';\n  @Prop() icon: string;\n\n  tooltipEl: HTMLElement;\n  referenceEl: HTMLElement;\n  popperInstance: any = null;\n\n\n  componentWillLoad() { \n    if(this.variant.toLowerCase().trim() === \"\") { \n      this.variant = 'compact'\n    }\n  }\n  \n  componentDidLoad() {\n    const slotElement = this.el.shadowRoot.querySelector('.tooltip__container').firstChild;\n    \n    if(this.variant.toLowerCase() === 'compact' || this.variant.toLowerCase() === 'extended') {\n      slotElement.addEventListener('mouseenter', this.onMouseEnter)\n      slotElement.addEventListener('mouseleave', this.onMouseLeave)\n    }else{\n      slotElement.addEventListener('click', this.onClick);\n    }\n\n  }\n\n  initializePopper() {\n    if (this.popperInstance) return;\n\n    this.referenceEl = this.el;\n    this.tooltipEl;\n    if (this.variant.toLowerCase() === 'compact') {\n      this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-compact');\n    }\n    else if (this.variant.toLowerCase() === 'dismissible') {\n      this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-dismissible');\n    }\n    else {\n      this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-extended');\n\n    }\n\n    const effectivePosition = this.position === 'auto' ? this.determineBestPosition() : this.position;\n\n    // Set the internalPosition\n    this.internalPosition = effectivePosition;\n\n    if (this.tooltipEl && this.referenceEl) {\n\n      this.popperInstance = createPopper(this.referenceEl, this.tooltipEl, {\n        placement: this.internalPosition,\n        modifiers: [\n          {\n            name: 'offset',\n            options: {\n              offset: [0, 8]  // this offset should be adjusted to ensure the tooltip doesn't overlap its reference element\n            }\n          },\n          {\n            name: 'arrow',\n            options: {\n              element: '.tooltip-arrow-svg'\n            }\n          }\n        ]\n      });\n\n    }\n\n    // Add this line to set the 'data-placement' attribute on the tooltip\n    this.tooltipEl.setAttribute('data-placement', effectivePosition);\n\n\n  }\n\n  determineBestPosition() {\n    // This is a simplified version, you can enhance this based on available viewport space.\n    const rect = this.referenceEl.getBoundingClientRect();\n    const yOffset = window.scrollY; // Get current scroll position\n    const xOffset = window.scrollX; // Get current horizontal scroll position\n\n    const verticalHalfwayPoint = rect.top + yOffset + rect.height / 2;\n    const horizontalHalfwayPoint = rect.left + xOffset + rect.width / 2;\n\n    if (this.position === 'auto') {\n      if (verticalHalfwayPoint > window.innerHeight / 2) {\n        if (horizontalHalfwayPoint > window.innerWidth / 2) {\n          return 'top-end';\n        } else {\n          return 'top-start';\n        }\n      } else {\n        if (horizontalHalfwayPoint > window.innerWidth / 2) {\n          return 'bottom-end';\n        } else {\n          return 'bottom-start';\n        }\n      }\n    } else {\n      return this.position;\n    }\n  }\n\n  @Watch('position')\n  positionChanged(newVal: any) {\n    this.internalPosition = newVal;\n    this.popperInstance?.destroy();\n    this.popperInstance = null; // Force re-initialization on next mouse enter\n  }\n\n\n\n  onMouseEnter = () => {\n    // Enable the event listeners immediately\n    this.popperInstance?.setOptions((options) => ({\n      ...options,\n      modifiers: [\n        ...options.modifiers,\n        { name: 'eventListeners', enabled: true },\n      ],\n    }));\n\n    // Initialize the popper instance\n    this.initializePopper();\n\n    // Make the tooltip visible\n    this.tooltipVisible = true;\n    this.tooltipEl.style.display = 'block';\n\n    // Update the popper instance immediately after initialization\n    this.popperInstance?.update();\n  }\n\n\n  onMouseLeave = () => {\n    this.tooltipVisible = false;\n    this.tooltipEl.style.display = 'none';\n\n  }\n\n  disconnectedCallback() {\n    this.popperInstance?.destroy();\n  }\n\n  onClick = () => {\n    if (this.variant.toLowerCase() === 'dismissible') {\n      this.initializePopper();\n      this.tooltipVisible = !this.tooltipVisible;\n      this.tooltipEl.style.display = this.tooltipVisible ? 'block' : 'none';\n      this.popperInstance?.update();\n    }\n  }\n\n  onDismissClick = () => {\n    this.tooltipVisible = false;\n    this.tooltipEl.style.display = 'none';\n  }\n\n  render() {\n    const tooltipDismissible = {\n      'tooltip-dismissible': true,\n      'visible': this.tooltipVisible,\n    };\n\n    const tooltipCompact = {\n      'tooltip-compact': true,\n      'visible': this.tooltipVisible,\n    };\n\n    const tooltipExtended = {\n      'tooltip-extended': true,\n      'visible': this.tooltipVisible,\n    };\n\n    return (\n      <div aria-label=\"a tooltip showing important information\" aria-value={this.header} class=\"tooltip__container\" >\n        <slot></slot>\n\n        {this.variant.toLowerCase() === 'dismissible' && <div class={tooltipDismissible}>\n          <button aria-label=\"Close Tooltip\" class=\"close-button\" onClick={this.onDismissClick}>\n            <ifx-icon icon=\"cross16\"></ifx-icon>\n          </button>\n          <div class=\"tooltip-dismissible-content\">\n            {this.header && <div class=\"tooltip-dismissible-header\">{this.header}</div>}\n            <div class=\"tooltip-dismissible-body\">{this.text}</div>\n          </div>\n          <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n          </svg>\n        </div>\n        }\n        {this.variant.toLowerCase() === 'compact' &&\n          <div class={tooltipCompact}>\n            {this.text}\n            <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n            </svg>\n          </div>\n        }\n        {this.variant.toLowerCase() === 'extended' &&\n          <div class={tooltipExtended}>\n            <slot name=\"icon\">\n              {this.icon ? <div class=\"extended_icon\"><ifx-icon icon={this.icon}></ifx-icon></div> :\n                <svg class=\"extended_icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">\n                  <path stroke=\"#fff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z\" />\n                  <path stroke=\"#fff\" d=\"M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z\" />\n                  <path fill=\"#fff\" d=\"M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z\" />\n                </svg>\n              }\n            </slot>\n            <div class=\"tooltip-extended-content\">\n              {this.header && <div class=\"tooltip-extended-header\">{this.header}</div>}\n              <div class=\"tooltip-extended-body\">{this.text}</div>\n            </div>\n            <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n            </svg>\n          </div >\n        }\n      </div>\n    );\n  }\n\n\n}"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as i,h as o,a as f}from"./p-e6edf72d.js";const t=":root{--ifx-font-family:Source Sans 3;font-family:var(--ifx-font-family, sans-serif)}.ifx-notification__wrapper{display:flex;flex-direction:row;align-items:center;padding:8px 16px;background-color:#FFFFFF;font-family:var(--ifx-font-family, Source Sans 3);color:#1D1D1D;border:1px solid #EEEDED}.ifx-notification__wrapper.ifx-notification__wrapper--success{border-left:4px solid #4CA460}.ifx-notification__wrapper.ifx-notification__wrapper--success .ifx-notification__icon{color:#4CA460}.ifx-notification__wrapper.ifx-notification__wrapper--locked{border-left:4px solid #E16B25}.ifx-notification__wrapper.ifx-notification__wrapper--locked .ifx-notification__icon{color:#E16B25}.ifx-notification__wrapper.ifx-notification__wrapper--error{border-left:4px solid #CD002F}.ifx-notification__wrapper.ifx-notification__wrapper--error .ifx-notification__icon{color:#CD002F}.ifx-notification__wrapper.ifx-notification__wrapper--neutral{border-left:4px solid #0A8276}.ifx-notification__wrapper.ifx-notification__wrapper--neutral .ifx-notification__icon{color:#0A8276}.ifx-notification__wrapper .ifx-notification__icon{margin-right:8px;display:flex;align-self:center}.ifx-notification__wrapper .ifx-notification__body{display:flex;flex-direction:row;flex-grow:1;font-size:0.875rem}.ifx-notification__wrapper .ifx-notification__body .ifx-notification__slot{flex-grow:1;display:inline-flex;align-items:center}.ifx-notification__wrapper .ifx-notification__link{font-size:0.875rem}@media (max-width: 576px){.ifx-notification__wrapper .ifx-notification__icon{align-self:flex-start}.ifx-notification__wrapper .ifx-notification__body{flex-direction:column}.ifx-notification__wrapper .ifx-notification__link{margin-top:8px}}";const n=t;const a=class{constructor(o){i(this,o);this.variant="success";this.linkTarget="_blank"}getClassName(){switch(this.variant){case"success":return"ifx-notification__wrapper--success";case"locked":return"ifx-notification__wrapper--locked";case"error":return"ifx-notification__wrapper--error";case"neutral":return"ifx-notification__wrapper--neutral";default:return"ifx-notification__wrapper--success"}}render(){return o(f,{key:"58c1e582dacc8ce8e0023a33fbad8385256ee061"},o("div",{key:"72b9751e1e25424ac7b65de457cdf19f58dc3c1d",class:"ifx-notification__wrapper "+this.getClassName()},o("div",{key:"7e5278aa5a6d87f865a42ca43aee7218f8497758",class:"ifx-notification__icon"},o("ifx-icon",{key:"51b76a1c0ac9b6a1a0ce8cb94402d985dc1f84bf",icon:this.icon})),o("div",{key:"0ec9c7e9e5f95d65f8ff3e0fd08b350f2147b9fc",class:"ifx-notification__body"},o("div",{key:"3eb4c1b5dd82d6d8fcbad40f5894bae6ba6bbc46",class:"ifx-notification__slot"},o("slot",{key:"ab0f20176ba655ae1d6114436e5a91e2228b5382"})),this.linkText&&this.linkHref&&o("div",{key:"b1886bb5eda5799c83f2153eadde9559640594fc",class:"ifx-notification__link"},o("ifx-link",{key:"be4defdd90d68907de57cce3810e0c682a13141b",href:this.linkHref,target:this.linkTarget},this.linkText,o("ifx-icon",{key:"1ffc89db07072d1e83f51f9c7ebba662d2254bff",icon:"arrow-right-16"}))))))}};a.style=n;export{a as ifx_notification};
-//# sourceMappingURL=p-16cbfc56.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["notificationCss","IfxNotificationStyle0","Notification","constructor","hostRef","this","variant","linkTarget","getClassName","render","h","Host","key","class","icon","linkText","linkHref","href","target"],"sources":["src/components/notification/notification.scss?tag=ifx-notification&encapsulation=shadow","src/components/notification/notification.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.ifx-notification__wrapper {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n\n  background-color: tokens.$ifxColorBaseWhite;\n  font-family: var(--ifx-font-family, #{tokens.$ifxFontFamilyBody});\n  color: tokens.$ifxColorBaseBlack;\n\n  border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n\n  &.ifx-notification__wrapper--success {\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorGreen500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorGreen500;\n    }\n  }\n\n  &.ifx-notification__wrapper--locked {\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOrange500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorOrange500;\n    }\n  }\n\n  &.ifx-notification__wrapper--error {\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorRed500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorRed500;\n    }\n  }\n\n  &.ifx-notification__wrapper--neutral{\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOcean500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorOcean500;\n    }\n  }\n\n  & .ifx-notification__icon {\n    margin-right: tokens.$ifxSpace100;\n    display: flex;\n    align-self: center;\n  }\n\n  & .ifx-notification__body {\n    display: flex;\n    flex-direction: row;\n    flex-grow: 1;\n    font-size: tokens.$ifxFontSizeS;\n\n    & .ifx-notification__slot {\n      flex-grow: 1;\n      display: inline-flex;\n      align-items: center;\n    }\n  }\n\n  & .ifx-notification__link {\n    font-size: tokens.$ifxFontSizeS;\n  }\n\n  @media (max-width: tokens.$ifxBreakpointXs) {\n    & .ifx-notification__icon {\n      align-self: flex-start;\n    }\n\n    & .ifx-notification__body {\n      flex-direction: column;\n    }\n\n    & .ifx-notification__link {\n      margin-top: tokens.$ifxSpace100;\n    }\n  }\n}","import { Component, h, Host, Prop } from '@stencil/core';\n \nexport type NotificationVariant = 'success' | 'locked' | 'error' | 'neutral';\n\n@Component({\n  tag: 'ifx-notification',\n  styleUrl: 'notification.scss',\n  shadow: true\n})\nexport class Notification {\n  @Prop() icon: string;\n  @Prop() variant: NotificationVariant = 'success';\n  @Prop() linkText: string; \n  @Prop() linkHref: string;\n  @Prop() linkTarget: string = '_blank';\n\n\n  private getClassName(): string {\n    switch (this.variant) {\n      case 'success':\n        return 'ifx-notification__wrapper--success';\n      case 'locked':\n        return 'ifx-notification__wrapper--locked';\n      case 'error':\n        return 'ifx-notification__wrapper--error';\n      case 'neutral':\n        return 'ifx-notification__wrapper--neutral';\n      default:\n        return 'ifx-notification__wrapper--success';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={\"ifx-notification__wrapper \" + this.getClassName()}>\n          <div class=\"ifx-notification__icon\">\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </div>\n          <div class=\"ifx-notification__body\">\n            <div class=\"ifx-notification__slot\">\n              <slot/>\n            </div>\n            { this.linkText && this.linkHref && \n            <div class=\"ifx-notification__link\">\n              <ifx-link href={this.linkHref} target={this.linkTarget}>\n                {this.linkText}<ifx-icon icon=\"arrow-right-16\">\n              </ifx-icon>\n              </ifx-link>\n            </div>\n          }\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}"],"mappings":"kDAAA,MAAMA,EAAkB,2qDACxB,MAAAC,EAAeD,E,MCQFE,EAAY,MALzB,WAAAC,CAAAC,G,UAOUC,KAAAC,QAA+B,UAG/BD,KAAAE,WAAqB,Q,CAGrB,YAAAC,GACN,OAAQH,KAAKC,SACX,IAAK,UACH,MAAO,qCACT,IAAK,SACH,MAAO,oCACT,IAAK,QACH,MAAO,mCACT,IAAK,UACH,MAAO,qCACT,QACE,MAAO,qC,CAIb,MAAAG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAO,6BAA+BR,KAAKG,gBAC9CE,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACTH,EAAA,YAAAE,IAAA,2CAAUE,KAAMT,KAAKS,QAEvBJ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACTH,EAAA,QAAAE,IAAA,8CAEAP,KAAKU,UAAYV,KAAKW,UACxBN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACTH,EAAA,YAAAE,IAAA,2CAAUK,KAAMZ,KAAKW,SAAUE,OAAQb,KAAKE,YACzCF,KAAKU,SAASL,EAAA,YAAAE,IAAA,2CAAUE,KAAK,uB","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as e,g as s}from"./p-e6edf72d.js";const o=':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, Source Sans 3)}.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:1000}.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 n=o;function l(t,i){let e;return function s(...o){const n=()=>{clearTimeout(e);t(...o)};clearTimeout(e);e=setTimeout(n,i)}}const r=class{constructor(e){t(this,e);this.ifxSelect=i(this,"ifxSelect",7);this.ifxOpen=i(this,"ifxOpen",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.batchSize=50;this.size="medium (40px)";this.disabled=false;this.error=false;this.internalError=false;this.errorMessage="Error";this.label="";this.persistentSelectedOptions=[];this.placeholder="";this.dropdownOpen=false;this.currentIndex=0;this.isLoading=false;this.loadedOptions=[];this.filteredOptions=[];this.showSearch=true;this.showSelectAll=true;this.optionCount=0;this.optionsProcessed=false;this.handleSearch=l((t=>{const i=t.value.toLowerCase();if(i===""){this.filteredOptions=this.loadedOptions}else{this.filteredOptions=this.loadedOptions.filter((t=>{const e=t.label.toLowerCase().includes(i);if(t.children){const s=t.children.some((t=>t.label.toLowerCase().includes(i)));return e||s}return e}))}}),300);this.handleDocumentClick=t=>{const i=t.composedPath();if(!i.includes(this.dropdownElement)){this.dropdownOpen=false;document.removeEventListener("click",this.handleDocumentClick);this.filteredOptions=this.loadedOptions;this.ifxOpen.emit(this.dropdownOpen)}}}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{if(!i.some((t=>t.value===e.value))){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];this.optionCount=this.countOptions(this.persistentSelectedOptions)}}}}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.ifxOpen.emit(this.dropdownOpen)}),0)}waitForElement(t,i,e=50){let s=0;function o(){requestAnimationFrame((()=>{const n=t();if(n.length>0||s>e){i(n)}else{s++;o()}}))}o()}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 o=this.isOptionIndeterminate(t);const n=t.children?o||this.isOptionSelected(t):this.persistentSelectedOptions.some((i=>i.value===t.value));const l=!n&&this.maxItemCount&&this.persistentSelectedOptions.length>=this.maxItemCount;const r=`checkbox-${t.value}-${i}`;return e("div",{class:"option-wrapper"},e("div",{class:`option ${n?"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:o?false:n,indeterminate:o,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 o=this.persistentSelectedOptions.some((i=>i.value===t.value));const n=!o&&this.maxItemCount&&this.persistentSelectedOptions.length>=this.maxItemCount;const l=`checkbox-${t.value}-${i}`;return e("div",{class:`option sub-option ${o?"selected":""} ${this.getSizeClass()} ${n?"disabled":""}`,"data-value":t.value,role:`${((s=t.children)===null||s===void 0?void 0:s.length)>0?"option":"treeitem"}`,onKeyDown:i=>!n&&this.handleOptionKeyDown(i,t),onClick:()=>!n&&this.handleOptionClick(t),tabindex:"0"},e("ifx-checkbox",{tabIndex:-1,ref:i=>t.checkboxRef=i,id:l,size:"s",checked:o,disabled:n}),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 o=this;function n(){if(t){o.clearSelection()}else{o.selectAll()}}function l(t){if(t.key!=="ArrowUp"&&t.key!=="ArrowDown")t.stopPropagation();if(t.key==="Enter"||t.key===" "){n()}}return e("div",{class:"select-all-wrapper"},e("div",{class:`option ${this.getSizeClass()}`,tabindex:"0",onKeyDown:t=>l(t),onClick:n},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)},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=1e3;r.style=n;export{r as ifx_multiselect};
-//# sourceMappingURL=p-1818045f.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["multiselectCss","IfxMultiselectStyle0","debounce","func","wait","timeout","executedFunction","args","later","clearTimeout","setTimeout","Multiselect","constructor","hostRef","this","batchSize","size","disabled","error","internalError","errorMessage","label","persistentSelectedOptions","placeholder","dropdownOpen","currentIndex","isLoading","loadedOptions","filteredOptions","showSearch","showSelectAll","optionCount","optionsProcessed","handleSearch","targetElement","searchTerm","value","toLowerCase","filter","option","matchesSearchTerm","includes","children","childrenMatch","some","child","handleDocumentClick","event","path","composedPath","dropdownElement","document","removeEventListener","ifxOpen","emit","updateOptions","loadInitialOptions","internalErrorMessage","fetchOptions","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","opt","slicedOptions","slice","selectedOptions","selected","concat","collectLeafOptions","existingOption","push","leafOptions","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","toggleDropdown","addEventListener","waitForElement","querySelectorFunc","callback","maxTries","tries","request","requestAnimationFrame","elements","handleKeyDown","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","onScroll","type","onInput","icon","globalZIndex"],"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, #{tokens.$ifxFontFamilyBody});\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: 1000; \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  static globalZIndex = 1000; // 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() ifxOpen: 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    // 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          if (!selectedOptions.some(existingOption => existingOption.value === option.value)) {\n            selectedOptions.push(option);\n          }\n        }\n      } else {\n        if (option.children && option.children.length > 0) {\n          selectedOptions = selectedOptions.concat(this.collectSelectedOptions(option.children));\n        }\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 => {\n        const matchesSearchTerm = option.label.toLowerCase().includes(searchTerm);\n        if (option.children) {\n          const childrenMatch = option.children.some(child => {\n            return child.label.toLowerCase().includes(searchTerm);\n          });\n          return matchesSearchTerm || childrenMatch;\n        }\n        return matchesSearchTerm;\n      });\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          this.optionCount = this.countOptions( this.persistentSelectedOptions)\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      this.filteredOptions = this.loadedOptions;\n      // Dispatch the ifxMultiselectIsOpen event\n      this.ifxOpen.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 ifxOpen event\n      this.ifxOpen.emit(this.dropdownOpen);\n    }, 0);\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              {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":"yDAAA,MAAMA,EAAiB,w9IACvB,MAAAC,EAAeD,ECGf,SAASE,EAASC,EAAMC,GACtB,IAAIC,EACJ,OAAO,SAASC,KAAoBC,GAClC,MAAMC,EAAQ,KACZC,aAAaJ,GACbF,KAAQI,EAAK,EAEfE,aAAaJ,GACbA,EAAUK,WAAWF,EAAOJ,E,CAEhC,C,MAWaO,EAAW,MATxB,WAAAC,CAAAC,G,gPAaUC,KAAAC,UAAoB,GACpBD,KAAAE,KAAe,gBACfF,KAAAG,SAAoB,MACpBH,KAAAI,MAAiB,MAChBJ,KAAAK,cAAyB,MAC1BL,KAAAM,aAAuB,QAEvBN,KAAAO,MAAgB,GACdP,KAAAQ,0BAAsC,GACxCR,KAAAS,YAAsB,GACrBT,KAAAU,aAAe,MAIhBV,KAAAW,aAAuB,EACtBX,KAAAY,UAAqB,MACrBZ,KAAAa,cAA0B,GAC1Bb,KAAAc,gBAA4B,GAC7Bd,KAAAe,WAAsB,KACtBf,KAAAgB,cAAyB,KACxBhB,KAAAiB,YAAsB,EACtBjB,KAAAkB,iBAA4B,MAmJrClB,KAAAmB,aAAe/B,GAAUgC,IACvB,MAAMC,EAAaD,EAAcE,MAAMC,cACvC,GAAIF,IAAe,GAAI,CACrBrB,KAAKc,gBAAkBd,KAAKa,a,KACvB,CACLb,KAAKc,gBAAkBd,KAAKa,cAAcW,QAAOC,IAC/C,MAAMC,EAAoBD,EAAOlB,MAAMgB,cAAcI,SAASN,GAC9D,GAAII,EAAOG,SAAU,CACnB,MAAMC,EAAgBJ,EAAOG,SAASE,MAAKC,GAClCA,EAAMxB,MAAMgB,cAAcI,SAASN,KAE5C,OAAOK,GAAqBG,C,CAE9B,OAAOH,CAAiB,G,IAG3B,KAkJH1B,KAAAgC,oBAAuBC,IACrB,MAAMC,EAAOD,EAAME,eACnB,IAAKD,EAAKP,SAAS3B,KAAKoC,iBAAkB,CACxCpC,KAAKU,aAAe,MACpB2B,SAASC,oBAAoB,QAAStC,KAAKgC,qBAC3ChC,KAAKc,gBAAkBd,KAAKa,cAE5Bb,KAAKuC,QAAQC,KAAKxC,KAAKU,a,GA/S3B,aAAA+B,GACEzC,KAAKa,cAAgB,GACrBb,KAAKc,gBAAkB,GACvBd,KAAKiB,YAAc,EACnBjB,KAAKkB,iBAAmB,MACxBlB,KAAKQ,0BAA4B,GAEjCR,KAAK0C,oB,CAIP,wBAAMA,GACJ1C,KAAKY,UAAY,KACjBZ,KAAKK,cAAgBL,KAAKI,MAC1BJ,KAAK2C,qBAAuB3C,KAAKM,aAEjCN,KAAKa,oBAAsBb,KAAK4C,aAAa,EAAG5C,KAAKC,WACrDD,KAAKY,UAAY,K,CAGnB,sBAAMiC,GACJ7C,KAAKY,UAAY,KACjB,MAAMkC,QAAoB9C,KAAK4C,aAAa5C,KAAKa,cAAckC,OAAQ/C,KAAKC,WAC5ED,KAAKa,cAAgB,IAAIb,KAAKa,iBAAkBiC,GAChD9C,KAAKY,UAAY,K,CAInB,YAAAoC,CAAaf,GACX,MAAMgB,EAAUhB,EAAMiB,OACtB,MAAMC,EAAeC,KAAKC,OAAOJ,EAAQK,aAAeL,EAAQM,cAAgB,GAEhF,GAAIN,EAAQO,WAAaL,EAAc,CACrCnD,KAAK6C,kB,EAOT,kBAAMD,CAAaa,EAAoBC,GACrC,IAAIC,EAAuB,GAG3B,UAAW3D,KAAK4D,UAAY,SAAU,CACpC,IACED,EAAaE,KAAKC,MAAM9D,KAAK4D,Q,CAE7B,MAAOG,GACPC,QAAQ5D,MAAM,2BAA4B2D,E,OAEvC,GAAIE,MAAMC,QAAQlE,KAAK4D,SAAU,CACtCD,EAAa3D,KAAK4D,O,KACb,CACLI,QAAQ5D,MAAM,gCAAiCJ,KAAK4D,Q,CAGtD,IAAK5D,KAAKkB,iBAAkB,CAC1BlB,KAAKiB,YAAcjB,KAAKmE,aAAaR,GACrC,MAAMS,EAAoBpE,KAAKqE,uBAAuBV,GACtD,MAAMW,EAA6BF,EAAkB5C,QAAO+C,IAASvE,KAAKQ,0BAA0BsB,MAAK0C,GAAOA,EAAIlD,OAASiD,EAAKjD,UAClItB,KAAKQ,0BAA4B,IAAIR,KAAKQ,6BAA8B8D,GACxEtE,KAAKkB,iBAAmB,I,CAG1B,MAAMuD,EAAgBd,EAAWe,MAAMjB,EAAYA,EAAaC,GAChE,OAAOe,C,CAWD,sBAAAJ,CAAuBT,GAC7B,IAAIe,EAA4B,GAEhC,IAAK,MAAMlD,KAAUmC,EAAS,CAC5B,GAAInC,EAAOmD,SAAU,CACnB,GAAInD,EAAOG,UAAYH,EAAOG,SAASmB,OAAS,EAAG,CAEjD4B,EAAkBA,EAAgBE,OAAO7E,KAAK8E,mBAAmBrD,EAAOG,U,KACnE,CACL,IAAK+C,EAAgB7C,MAAKiD,GAAkBA,EAAezD,QAAUG,EAAOH,QAAQ,CAClFqD,EAAgBK,KAAKvD,E,OAGpB,CACL,GAAIA,EAAOG,UAAYH,EAAOG,SAASmB,OAAS,EAAG,CACjD4B,EAAkBA,EAAgBE,OAAO7E,KAAKqE,uBAAuB5C,EAAOG,U,GAKlF,OAAO+C,C,CAQD,kBAAAG,CAAmBlD,GACzB,IAAIqD,EAAc,GAElB,IAAK,MAAMlD,KAASH,EAAU,CAC5B,GAAIG,EAAMH,UAAYG,EAAMH,SAASmB,OAAS,EAAG,CAC/CkC,EAAcA,EAAYJ,OAAO7E,KAAK8E,mBAAmB/C,EAAMH,U,KAC1D,CACLqD,EAAYD,KAAKjD,E,EAGrB,OAAOkD,C,CAMT,YAAAd,CAAaP,GACX,IAAIF,EAAQ,EACZ,IAAK,MAAMjC,KAAUmC,EAAS,CAC5B,GAAInC,EAAOG,UAAYH,EAAOG,SAASmB,QAAU,EAAG,CAClDW,GAAS1D,KAAKmE,aAAa1C,EAAOG,S,KAC7B,CACL8B,G,EAGJ,OAAOA,C,CAsBT,gBAAAwB,GACEtF,YAAW,KACTI,KAAKmF,kBAAkB,GACtB,I,CAKL,iBAAAC,GACEpF,KAAK0C,qBACL1C,KAAKc,gBAAkB,IAAId,KAAKa,c,CAIlC,mBAAAwE,GACErF,KAAKK,cAAgBL,KAAKI,K,CAI5B,0BAAAkF,GACEtF,KAAK2C,qBAAuB3C,KAAKM,Y,CAInC,oBAAAiF,GACEvF,KAAKc,gBAAkB,IAAId,KAAKa,c,CAIlC,iBAAA2E,CAAkBC,EAAoBC,GACpC,MAAMC,EAAW,IAAIC,SACrBH,EAASI,SAAQpE,GAAUkE,EAASG,OAAO9F,KAAK+F,KAAMtE,EAAOH,SAC7DtB,KAAKgG,UAAUC,aAAaN,E,CAG9B,iBAAAO,CAAkBzE,GAChBzB,KAAKK,cAAgB,MAErB,IAAKoB,EAAOmD,UAAY5E,KAAKmG,wBAAwB1E,GAAS,CAC5DA,EAAO2E,YAAYC,mBAAmB,OACtCrG,KAAKK,cAAgB,KACrBL,KAAK2C,qBAAuB,6DAC5B,M,CAGF3C,KAAKsG,gBAAgB7E,GACrBzB,KAAKuG,UAAU/D,KAAKxC,KAAKQ,0B,CAI3B,uBAAA2F,CAAwB1E,GACtB,IAAI+E,EAAmB/E,EAAOG,SAAWH,EAAOG,SAASmB,OAAS,EAClE,OAAO/C,KAAKyG,cAAgBzG,KAAKQ,0BAA0BuC,OAASyD,EAAmBxG,KAAKyG,eACzFzG,KAAKQ,0BAA0BsB,MAAK4E,GAAkBA,EAAepF,QAAUG,EAAOH,O,CAG3F,eAAAgF,CAAgB7E,GACd,MAAMkF,EAAc3G,KAAKQ,0BAA0BsB,MAAK4E,GAAkBA,EAAepF,QAAUG,EAAOH,QAE1G,GAAIG,EAAOG,UAAYH,EAAOG,SAASmB,OAAS,EAAG,CACjD/C,KAAK4G,wBAAwBnF,E,KACxB,CACLzB,KAAK6G,uBAAuBpF,EAAQkF,E,EAIxC,eAAMG,GACJ,MAAMnD,QAAmB3D,KAAK4C,aAAa,EAAG5C,KAAKiB,aACnDjB,KAAK+G,mBAAmBpD,GAExB3D,KAAKuG,UAAU/D,KAAKxC,KAAKQ,0B,CAGnB,kBAAAuG,CAAmBnD,GACzB,IAAK,MAAMY,KAAOZ,EAAS,CACzB,GAAIY,EAAI5C,UAAY4C,EAAI5C,SAASmB,OAAS,EAAG,CAC3C/C,KAAK+G,mBAAmBvC,EAAI5C,S,KACvB,CACL,IAAK5B,KAAKQ,0BAA0BsB,MAAMA,GAASA,EAAKR,QAAUkD,EAAIlD,QAAS,CAC7EkD,EAAII,SAAW,KACf5E,KAAKQ,0BAA4B,IAAIR,KAAKQ,0BAA2BgE,GACrExE,KAAKiB,YAAcjB,KAAKmE,aAAcnE,KAAKQ,0B,IAOnD,uBAAAoG,CAAwBnF,GACtB,MAAMuF,EAAsBvF,EAAOG,SAASqF,OAAMlF,GAChD/B,KAAKQ,0BAA0BsB,MAAK4E,GAAkBA,EAAepF,QAAUS,EAAMT,UAGvF,GAAI0F,EAAqB,CACvBhH,KAAKQ,0BAA4B,IAAIR,KAAKQ,0BAA0BgB,QAClEkF,IAAmBjF,EAAOG,SAASE,MAAKC,GAASA,EAAMT,QAAUoF,EAAepF,WAGlFG,EAAOmD,SAAW,MAClBnD,EAAOG,SAASiE,SAAQ9D,IACtBA,EAAM6C,SAAW,KAAK,G,KAGnB,CACL,MAAMsC,EAAc,IAAIzF,EAAOG,SAASJ,QAAO2F,IACxCnH,KAAKQ,0BAA0BsB,MAAK4E,GAAkBA,EAAepF,QAAU6F,EAAY7F,WAElGG,EAAOmD,SAAW,KAClBnD,EAAOG,SAASiE,SAAQ9D,IACtBA,EAAM6C,SAAW,IAAI,IAEvB5E,KAAKQ,0BAA4B,IAAIR,KAAKQ,6BAA8B0G,E,EAI5E,sBAAAL,CAAuBpF,EAAgBkF,GACrC,GAAIA,EAAa,CACf3G,KAAKQ,0BAA4B,IAAIR,KAAKQ,0BAA0BgB,QAAOkF,GAAkBA,EAAepF,QAAUG,EAAOH,SAC7HG,EAAOmD,SAAW,K,KACb,CACL5E,KAAKQ,0BAA4B,IAAIR,KAAKQ,0BAA2BiB,GACrEA,EAAOmD,SAAW,I,CAEpB5E,KAAKoH,2B,CAGP,yBAAAA,GACEpH,KAAKa,cAAcgF,SAAQpE,I,MACzB,KAAG4F,EAAA5F,EAAOG,YAAQ,MAAAyF,SAAA,SAAAA,EAAEtE,QAAS,EAAG,CAC9B,GAAGtB,EAAOG,SAASqF,OAAMlF,GAASA,EAAM6C,WAAa,OAAOnD,EAAOmD,SAAW,SACzE,CACHnD,EAAOmD,SAAW,MAClB,GAAG5E,KAAKsH,sBAAsB7F,GAAS,CACrCA,EAAO8F,cAAgB,I,KACpB,CACH9F,EAAO8F,cAAgB,K,OAoBjC,YAAAC,GACE,MAAO,GAAGxH,KAAKE,SAAW,IACtB,eACA,e,CAGN,cAAAuH,GACEzH,KAAKU,cAAgBV,KAAKU,aAC1Bd,YAAW,KACT,GAAII,KAAKU,aAAc,CACrB2B,SAASqF,iBAAiB,QAAS1H,KAAKgC,oB,CAG1ChC,KAAKuC,QAAQC,KAAKxC,KAAKU,aAAa,GACnC,E,CAIL,cAAAiH,CAAeC,EAA6BC,EAAoBC,EAAW,IACzE,IAAIC,EAAQ,EACZ,SAASC,IACPC,uBAAsB,KACpB,MAAMC,EAAWN,IACjB,GAAIM,EAASnF,OAAS,GAAKgF,EAAQD,EAAU,CAC3CD,EAASK,E,KACJ,CACLH,IACAC,G,KAINA,G,CAIF,aAAAG,CAAclG,GACZ,GAAIjC,KAAKG,SAAU,OAEnB,MAAMyD,EAAU5D,KAAKoC,gBAAgBgG,iBAAiB,WAEtD,OAAQnG,EAAMoG,MACZ,IAAK,QACHrI,KAAKyH,iBAELzH,KAAK2H,gBAAe,IACX3H,KAAKoC,gBAAgBgG,iBAAiB,aAC3CxE,IACA5D,KAAKsI,wBAAwB1E,EAAQ,IAEzC,MACF,IAAK,QACH5D,KAAKyH,iBAELzH,KAAK2H,gBAAe,IACX3H,KAAKoC,gBAAgBgG,iBAAiB,aAC3CxE,IACA5D,KAAKsI,wBAAwB1E,EAAQ,IAEzC,MACF,IAAK,YACH5D,KAAKuI,gBAAgB3E,GACrB,GAAI5D,KAAKU,aAAc,CACrBV,KAAKsI,wBAAwB1E,E,CAE/B,MACF,IAAK,UACH5D,KAAKwI,cAAc5E,GACnB,GAAI5D,KAAKU,aAAc,CACrBV,KAAKsI,wBAAwB1E,E,CAE/B,M,CAIN,kBAAA6E,CAAmBxG,GAEjBjC,KAAKmF,mBAGL,GAAIlD,EAAMyG,gBAAkBzG,EAAMiB,OAAQ,CACxClD,KAAKyH,gB,EAIT,cAAAkB,GACE3I,KAAKQ,0BAA4B,GACjCR,KAAKuG,UAAU/D,KAAKxC,KAAKQ,0B,CAG3B,gBAAA2E,G,MACE,MAAMyD,GAAcvB,EAAArH,KAAK6I,GAAGC,WAAWC,cAAc,+BAA2B,MAAA1B,SAAA,SAAAA,EAAE2B,wBAClF,MAAMC,EAAaC,OAAOC,YAAcP,EAAYQ,OACpD,MAAMC,EAAaT,EAAYU,IAG/B,GAAKD,EAAaJ,GAAcL,EAAYW,OAASN,GAAgBL,EAAYQ,OAASF,OAAOC,YAAc,CAC7GnJ,KAAKwJ,gBAAkB,I,KAClB,CACLxJ,KAAKwJ,gBAAkB,K,EAOnB,uBAAAlB,CAAwB1E,GAE9BA,EAAQiC,SAASpE,GAAoBA,EAAOgI,UAAUC,OAAO,oBAG7D,GAAI1J,KAAKW,cAAgB,GAAKX,KAAKW,aAAeiD,EAAQb,OAAQ,CAC/Da,EAAQ5D,KAAKW,cAA0B8I,UAAUE,IAAI,kBACrD/F,EAAQ5D,KAAKW,cAA8BiJ,O,EAKxC,eAAArB,CAAgB3E,GACtB,GAAI5D,KAAKW,aAAeiD,EAAQb,OAAS,EAAG,CAC1C/C,KAAKW,c,KACA,CACLX,KAAKW,aAAe,C,EAKhB,aAAA6H,CAAc5E,GACpB,GAAI5D,KAAKW,aAAe,EAAG,CACzBX,KAAKW,c,KACA,CACLX,KAAKW,aAAeiD,EAAQb,OAAS,C,EAIzC,mBAAA8G,CAAoBC,EAAkBrI,GACpC,GAAGqI,EAAEC,MAAQ,WAAaD,EAAEC,MAAQ,YAAaD,EAAEE,kBACnD,GAAGF,EAAEC,MAAQ,SAAWD,EAAEC,MAAQ,IAAK,CACrC/J,KAAKkG,kBAAkBzE,E,EAI3B,YAAAwI,CAAaxI,EAAgByI,G,MAC3B,MAAMC,EAAkBnK,KAAKsH,sBAAsB7F,GACnD,MAAM2I,EAAa3I,EAAOG,SAAWuI,GAAmBnK,KAAKqK,iBAAiB5I,GAAUzB,KAAKQ,0BAA0BsB,MAAK4E,GAAkBA,EAAepF,QAAUG,EAAOH,QAC9K,MAAMgJ,GAAmBF,GAAcpK,KAAKyG,cAAgBzG,KAAKQ,0BAA0BuC,QAAU/C,KAAKyG,aAC1G,MAAM8D,EAAW,YAAY9I,EAAOH,SAAS4I,IAE7C,OACEM,EAAA,OAAKC,MAAM,kBACTD,EAAA,OAAKC,MAAO,UAAUL,EAAa,WAAa,MAAME,EAAkB,WAAa,gBACnFtK,KAAKwH,iBAAgB,aACT/F,EAAOH,MACnBoJ,UAAYZ,IAAOQ,GAAmBtK,KAAK6J,oBAAoBC,EAAGrI,GAClEkJ,QAAS,KAAOL,GAAmBtK,KAAKkG,kBAAkBzE,GAC1DmJ,SAAS,IACTC,KAAM,KAAGxD,EAAA5F,EAAOG,YAAQ,MAAAyF,SAAA,SAAAA,EAAEtE,QAAS,EAAI,WAAa,YACpDyH,EAAA,gBAAcM,UAAW,EAAGC,IAAMlC,GAAOpH,EAAO2E,YAAcyC,EAAImC,GAAIT,EAAUrK,KAAK,IAAI+K,QAASd,EAAkB,MAAQC,EAAY7C,cAAe4C,EAAiBhK,SAAUmK,IAClLE,EAAA,SAAOU,QAASX,EAAUI,QAAUb,GAAMA,EAAEE,mBAAoBvI,EAAOlB,QAExEkB,EAAOG,UAAYH,EAAOG,SAASuJ,KAAI,CAACpJ,EAAOqJ,IAAepL,KAAKqL,gBAAgBtJ,EAAO,GAAGmI,KAASkB,O,CAK7G,gBAAAf,CAAiB5I,GACf,IAAKA,EAAOG,SAAU,OAAO,MAE7B,OAAOH,EAAOG,SAASqF,OAAMlF,GAC3B/B,KAAKQ,0BAA0BsB,MAAKwJ,GAAoBA,EAAiBhK,QAAUS,EAAMT,S,CAK7F,qBAAAgG,CAAsB7F,GACpB,IAAKA,EAAOG,SAAU,OAAO,MAE7B,MAAM2J,EAAmB9J,EAAOG,SAASJ,QAAOO,GAC9C/B,KAAKQ,0BAA0BsB,MAAKwJ,GAAoBA,EAAiBhK,QAAUS,EAAMT,UACzFyB,OAEF,OAAOwI,EAAmB,GAAKA,EAAmB9J,EAAOG,SAASmB,M,CAIpE,aAAAyI,CAAc5H,EAAmBvC,GAC/B,IAAK,MAAMI,KAAUmC,EAAS,CAC5B,GAAInC,EAAOH,QAAUD,EAAY,CAC/B,OAAOI,C,CAET,GAAIA,EAAOG,SAAU,CACnB,MAAM6J,EAAkBzL,KAAKwL,cAAc/J,EAAOG,SAAUP,GAC5D,GAAIoK,EAAiB,CACnB,OAAOA,C,GAIb,OAAO,I,CAIT,eAAAJ,CAAgB5J,EAAgByI,G,MAC9B,MAAME,EAAapK,KAAKQ,0BAA0BsB,MAAK4E,GAAkBA,EAAepF,QAAUG,EAAOH,QACzG,MAAMgJ,GAAmBF,GAAcpK,KAAKyG,cAAgBzG,KAAKQ,0BAA0BuC,QAAU/C,KAAKyG,aAC1G,MAAM8D,EAAW,YAAY9I,EAAOH,SAAS4I,IAE7C,OACEM,EAAA,OAAKC,MAAO,qBAAqBL,EAAa,WAAa,MAAMpK,KAAKwH,kBAAkB8C,EAAkB,WAAa,KAAI,aAC7G7I,EAAOH,MACnBuJ,KAAM,KAAGxD,EAAA5F,EAAOG,YAAQ,MAAAyF,SAAA,SAAAA,EAAEtE,QAAS,EAAI,SAAW,aAClD2H,UAAYZ,IAAOQ,GAAmBtK,KAAK6J,oBAAoBC,EAAGrI,GAClEkJ,QAAS,KAAOL,GAAmBtK,KAAKkG,kBAAkBzE,GAC1DmJ,SAAS,KACTJ,EAAA,gBAAcM,UAAW,EAAGC,IAAMlC,GAAOpH,EAAO2E,YAAcyC,EAAImC,GAAIT,EAAUrK,KAAK,IAAI+K,QAASb,EAAYjK,SAAUmK,IACxHE,EAAA,SAAOU,QAASX,EAAUI,QAAUb,GAAMA,EAAEE,mBAAoBvI,EAAOlB,O,CAKrE,eAAAmL,GACN,MAAMC,EAAc3L,KAAKQ,0BAA0BuC,SAAW/C,KAAKiB,YACnE,MAAM2K,EAAe5L,KAAKQ,0BAA0BuC,SAAW,EAC/D,MAAMwE,EAAgBvH,KAAKiB,YAAc,IAAM2K,IAAiBD,EAEhE,MAAME,EAAO7L,KACb,SAAS8L,IACP,GAAIH,EAAa,CACfE,EAAKlD,gB,KACA,CACLkD,EAAK/E,W,EAIT,SAASiF,EAAuBjC,GAC9B,GAAGA,EAAEC,MAAQ,WAAaD,EAAEC,MAAQ,YAAaD,EAAEE,kBACnD,GAAGF,EAAEC,MAAQ,SAAWD,EAAEC,MAAQ,IAAK,CACrC+B,G,EAIJ,OAAOtB,EAAA,OAAKC,MAAM,sBAChBD,EAAA,OAAKC,MAAO,UAAUzK,KAAKwH,iBAAkBoD,SAAS,IAAIF,UAAYZ,GAAMiC,EAAuBjC,GAAIa,QAASmB,GAC9GtB,EAAA,gBAAcM,UAAW,EAAGE,GAAG,YAAYC,QAASU,EAAapE,cAAeA,EAAerH,KAAK,MACpGsK,EAAA,SAAOU,QAAQ,aAAW,eAE5BV,EAAA,+B,CAKJ,MAAAwB,GAEE,MAAMC,EAAwBjM,KAAKQ,0BAChCgB,QAAOC,IAEN,MAAMyK,EAA4BlM,KAAKQ,0BAA0BsB,MAAKqK,GACpEA,EAAavK,UACbuK,EAAavK,SAASE,MAAKC,GAASA,EAAMT,QAAUG,EAAOH,SAC3D6K,EAAavH,WAEf,OAAQsH,CAAyB,IAElCf,KAAI1J,GAAUA,EAAOlB,QACrB6L,KAAK,MAER,OACE5B,EAAA,OAAKC,MAAO,4BAA6BM,IAAKlC,GAAM7I,KAAKoC,gBAAkByG,GAEvE7I,KAAKO,MACHiK,EAAA,OAAKC,MAAM,qBACTD,EAAA,YAAOxK,KAAKO,QACL,KAEbiK,EAAA,OAAKC,MAAO,qCACVzK,KAAKwH,4BACLxH,KAAKU,aAAe,SAAW,gBAC/BV,KAAKwJ,gBAAkB,aAAe,eACtCxJ,KAAKK,cAAgB,QAAU,eAC/BL,KAAKG,SAAW,WAAa,KAC7ByK,SAAS,IACTD,QAAS3K,KAAKG,SAAWkM,UAAapK,GAAUjC,KAAKyI,mBAAmBxG,GACxEyI,UAAW1K,KAAKG,SAAWkM,UAAapK,GAAUjC,KAAKmI,cAAclG,IACrEuI,EAAA,OAAKC,MAAO,qCACVzK,KAAKQ,0BAA0BuC,SAAW,EAAI,cAAgB,iBAE9D4H,QAAS3K,KAAKG,SAAWkM,UAAY,IAAMrM,KAAKyH,kBAE/CzH,KAAKQ,0BAA0BuC,OAAS,EAAIkJ,EAAwBjM,KAAKS,aAE3ET,KAAKU,cACJ8J,EAAA,OAAKC,MAAM,gCACT6B,SAAWrK,GAAUjC,KAAKgD,aAAaf,IACtCjC,KAAKe,YAAcyJ,EAAA,SAAO+B,KAAK,OAAO1B,KAAK,UAAUJ,MAAM,eAAeC,UAAYZ,IAAQA,EAAEE,iBAAiB,EAAIwC,QAAUvK,GAAUjC,KAAKmB,aAAac,EAAMiB,QAASzC,YAAY,cACtLT,KAAKgB,eAAiBhB,KAAK0L,kBAC3B1L,KAAKc,gBAAgBqK,KAAI,CAAC1J,EAAQyI,IAAUlK,KAAKiK,aAAaxI,EAAQyI,KACtElK,KAAKY,WAAa4J,EAAA,uCAGvBA,EAAA,OAAKC,MAAM,kCAGRzK,KAAKQ,0BAA0BuC,OAAS,GACvCyH,EAAA,OAAKC,MAAM,mBAAmBE,QAAS3K,KAAKG,SAAWkM,UAAY,IAAMrM,KAAK2I,kBAC5E6B,EAAA,YAAUiC,KAAK,eAGnBjC,EAAA,OAAKC,MAAM,kBAAkBE,QAAS3K,KAAKG,SAAWkM,UAAY,IAAMrM,KAAKyH,kBAC3E+C,EAAA,YACET,IAAI,UACJ0C,KAAK,kBAETjC,EAAA,OAAKC,MAAM,oBAAoBE,QAAS3K,KAAKG,SAAWkM,UAAY,IAAMrM,KAAKyH,kBAC7E+C,EAAA,YACET,IAAI,YACJ0C,KAAK,uBAMXzM,KAAKK,cACHmK,EAAA,OAAKC,MAAM,6BACTD,EAAA,YAAOxK,KAAK2C,uBACL,K,4RA1oBZ9C,EAAA6M,aAAe,I","ignoreList":[]}

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

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

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

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

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

@@ -1,2 +0,0 @@
-import{r as e,c as i,h as t,g as s}from"./p-e6edf72d.js";const a=':root{--ifx-font-family:Source Sans 3;font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-block}.chip{position:relative}.chip__wrapper{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;border:1px solid #BFBBBB;border-radius:9999px;background:#FFFFFF;cursor:pointer;transition:border 100ms ease;font:400 0.875rem/1.25rem "Source Sans 3"}.chip__wrapper:hover,.chip__wrapper:focus-visible{outline:none;border:1px solid #575352}.chip__wrapper:focus{border:1px solid #0A8276}.chip__wrapper.chip__wrapper--small{padding:4px 12px}.chip__wrapper.chip__wrapper--large{padding:8px 16px}.chip__wrapper.chip__wrapper--opened{border:1px solid #0A8276}.chip__wrapper.chip__wrapper--opened .wrapper__open-button{transform:rotate(-180deg)}.chip__wrapper.chip__wrapper--selected{outline:3px solid #0A8276;outline-offset:-3px;color:#0A8276}.chip__wrapper.chip__wrapper--selected:hover,.chip__wrapper.chip__wrapper--selected:focus-visible{outline:3px solid #08665C;color:#08665C}.wrapper__label{display:inline-flex;align-items:center;gap:4px;font:400 0.875rem/1.25rem "Source Sans 3"}.wrapper__label .label__selected-options{font:600 0.875rem/1.25rem "Source Sans 3"}.wrapper__open-button{display:flex;align-items:center;transition:all 300ms ease}.wrapper__unselect-button{display:flex;align-items:center}.chip__dropdown{position:absolute;z-index:1;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;border-radius:1px;padding:8px 0;min-width:222px;background-color:#FFFFFF}';const l=a;const n=class{constructor(t){e(this,t);this.ifxChange=i(this,"ifxChange",7);this.placeholder="";this.size="large";this.value=undefined;this.variant="single";this.readOnly=false;this.opened=false;this.selectedOptions=[]}handleValueChange(e){this.syncSelectedOptionsWithProp(e)}handleReadOnlyChange(e){if(e){this.opened=false}}closeDropdownOnOutsideClick(e){const i=e.composedPath();const t=this.chip.shadowRoot.querySelector(".chip__wrapper");const s=this.chip.shadowRoot.querySelector(".chip__dropdown");if(!i.includes(s)&&!i.includes(t)&&this.opened){this.toggleDropdownMenu()}}handleKeyDown(e){if(e.code!=="Tab"){e.preventDefault()}if(e.target.tagName==="IFX-CHIP"){this.handleWrapperKeyDown(e)}else if(e.target.tagName==="IFX-CHIP-ITEM"){this.handleDropdownKeyDown(e)}}updateSelectedOptions(e){const i=e.detail;const t=[...this.selectedOptions];if(this.variant!=="multi"){if(i.selected){this.opened=false;const t=this.getChipItems();t.forEach((i=>{if(i.selected&&i!==e.target){i.chipState=Object.assign(Object.assign({},i.chipState),{emitIfxChipItemSelect:false});i.selected=false}}));this.selectedOptions=[i]}else{this.selectedOptions=[]}this.value=this.selectedOptions[0]?this.selectedOptions[0].value:undefined}else{if(i.selected){if(!this.selectedOptions.find((e=>e.value===i.value))){this.selectedOptions=[...this.selectedOptions,i]}}else{this.selectedOptions=this.selectedOptions.filter((e=>e.value!==i.value))}this.value=this.selectedOptions.map((e=>e.value))}if(i.emitIfxChange){this.ifxChange.emit({previousSelection:t,currentSelection:this.selectedOptions,name:this.placeholder})}}getChipItems(){return this.chip.querySelectorAll("ifx-chip-item")}getSelectedOptions(){if(this.variant!=="multi"){return this.selectedOptions.map((e=>e.label)).join("")}return this.selectedOptions.slice(0,2).map((e=>e.label)).join(", ")}toggleDropdownMenu(){if(this.readOnly)return;this.opened=!this.opened}focusChipItemAt(e=0){this.opened=true;const i=this.getChipItems();let t;if(e===-1){t=i.item(i.length-1)}else if(e>=0&&e<i.length){t=i.item(e)}else{console.error(`Invalid index: ${e}`);return}const s=t.shadowRoot.querySelector(".chip-item");if(s){setTimeout((()=>{s.focus()}),1)}}focusChip(){const e=this.chip.shadowRoot.querySelector(".chip__wrapper");e.focus()}handleUnselectButtonClick(e){e.stopPropagation();this.opened=false;let i=false;const t=this.getChipItems();t.forEach((e=>{if(e.selected){i=true;e.chipState=Object.assign(Object.assign({},e.chipState),{emitIfxChipItemSelect:false});e.selected=false}}));if(i){const e=this.selectedOptions;this.selectedOptions=[];this.value=[];this.ifxChange.emit({previousSelection:e,currentSelection:[],name:this.placeholder})}}handleWrapperClick(){if(!this.readOnly){this.toggleDropdownMenu()}}handleWrapperKeyDown(e){if(this.readOnly)return;if(!this.opened){switch(e.code){case"Space":case"Enter":case"ArrowDown":this.focusChipItemAt(0);break;case"ArrowUp":this.focusChipItemAt(-1);break}}else{switch(e.code){case"Escape":this.opened=false;this.focusChip();break}}}handleDropdownKeyDown(e){let i=this.getChipItems();let t=Array.from(i).indexOf(e.target);if(t===-1){console.error("Target not found in chip items");return}switch(e.code){case"ArrowDown":if(t===i.length-1)break;this.focusChipItemAt(t+1);break;case"ArrowUp":if(t===0)break;this.focusChipItemAt(t-1);break;case"Escape":this.opened=false;this.focusChip();break;case"Space":if(this.variant==="single"){this.opened=false;this.focusChip()}break;case"Enter":this.opened=false;this.focusChip();break}}syncChipState(){const e=this.getChipItems();let i=0;e.forEach((e=>{e.chipState={emitIfxChipItemSelect:true,size:this.size==="small"?"small":"large",variant:this.variant==="multi"?"multi":"single",key:i++}}))}syncSelectedOptionsWithProp(e){this.selectedOptions=[];const i=(()=>{let e=0;return()=>e++})();if(Array.isArray(e)){this.selectedOptions=e.map((e=>({value:e,label:e,selected:true,key:i(),emitIfxChange:true})))}else if(typeof e==="string"){this.selectedOptions=[{value:e,label:e,selected:true,key:i(),emitIfxChange:true}]}this.syncChipState()}componentWillLoad(){this.syncSelectedOptionsWithProp(this.value)}render(){return t("div",{key:"fc668c031275a7c69f8cc2002fbf26c9252495ae",class:"chip"},t("div",{key:"4705146d122cc620644e24dbd3d4e26c73a72f53",class:`chip__wrapper chip__wrapper--${this.size==="small"?"small":"large"}\n                  chip__wrapper--${this.variant==="multi"?"multi":"single"}\n                  ${this.opened&&!this.readOnly?"chip__wrapper--opened":""}\n                  ${this.selectedOptions.length?"chip__wrapper--selected":""}`,tabIndex:0,onClick:!this.readOnly?()=>{this.handleWrapperClick()}:undefined,role:"combobox","aria-label":this.AriaLabel,"aria-value":this.getSelectedOptions(),"aria-haspopup":!this.readOnly?"listbox":undefined,"aria-expanded":!this.readOnly?this.opened.toString():undefined,"aria-controls":!this.readOnly?"dropdown":undefined,"aria-readonly":this.readOnly?"true":undefined,"aria-multiselectable":this.variant==="multi"?"true":undefined},t("div",{key:"8f1720b1940e2a722c45f6a2efaa42897e6f62f0",class:"wrapper__label"},this.selectedOptions.length===0&&`${this.placeholder}`,this.selectedOptions.length!==0&&(this.variant==="multi"||this.readOnly)&&this.placeholder!==""&&`${this.placeholder}:`,this.selectedOptions.length!==0&&t("div",{key:"048ca51b1fc52273cfee76fde5a0e15c21834590",class:"label__selected-options"},this.getSelectedOptions()),this.selectedOptions.length>2&&this.variant==="multi"&&t("ifx-number-indicator",{key:"8b1b5ad4331fbd3d74cdc6b4358cb952d0fcd500"},"  ",`+${this.selectedOptions.length-2}`," ")),!this.readOnly&&(this.variant!=="multi"||this.variant==="multi"&&this.selectedOptions.length===0)&&t("div",{key:"d0d4782cd9ab4048ce57c09e7add80a6d232f96a",class:"wrapper__open-button"},t("ifx-icon",{key:1,icon:`chevrondown16`})),this.variant!=="multi"&&this.readOnly!==false&&this.selectedOptions.length>0&&t("div",{key:"9696e7c54fcfdfe911b84636405c8fac89205272",class:"wrapper__unselect-button",onClick:e=>{this.handleUnselectButtonClick(e)}},t("ifx-icon",{key:2,icon:`cross16`})),this.selectedOptions.length>=1&&this.variant==="multi"&&t("div",{key:"287a2f6e6167e1d595d7256fa7638d8be6184b2e",class:"wrapper__unselect-button",onClick:e=>{this.handleUnselectButtonClick(e)}},t("ifx-icon",{key:2,icon:`cross16`}))),this.opened&&!this.readOnly&&t("div",{key:"b1e1a33e17bb951b60f2086e4c16825a9194c3bb",id:"dropdown",role:"listbox",class:"chip__dropdown"},t("slot",{key:"64693b69905a1cbbdf6c16c70558e6087534523d"})))}get chip(){return s(this)}static get watchers(){return{value:["handleValueChange"],readOnly:["handleReadOnlyChange"]}}};n.style=l;const r=':root{--ifx-font-family:Source Sans 3;font-family:var(--ifx-font-family, sans-serif)}.chip-item{display:flex;align-items:center;gap:8px;padding:8px 16px;user-select:none;transition:all 100ms ease;transition-property:background, color}.chip-item:hover{cursor:pointer;background-color:#EEEDED}.chip-item:active{background-color:#BFBBBB}.chip-item:focus{outline:2px solid #0A8276}.chip-item.chip-item--large{font:400 1rem/1.5rem "Source Sans 3"}.chip-item.chip-item--small{font:400 0.875rem/1.25rem "Source Sans 3"}.chip-item.chip-item--selected{color:#0A8276}.chip-item.chip-item--selected .chip-item__selected-indicator{display:block}.chip-item__selected-indicator{display:none;margin-left:auto}';const c=r;const h=class{constructor(t){e(this,t);this.ifxChipItemSelect=i(this,"ifxChipItemSelect",5);this.value=undefined;this.chipState={emitIfxChipItemSelect:true,variant:"multi",size:"large"};this.selected=false}updateItemSelection(e){if(this.chipState.variant==="single"){const i=e.target;if(this.chipItem!==i&&this.chipItem.parentElement===i.parentElement){this.selected=false}}}validateSelected(e,i){if(e!==i){if(this.chipState.emitIfxChipItemSelect){this.emitIfxChipItemSelectEvent()}else{this.chipState.emitIfxChipItemSelect=true}}}getItemLabel(){return this.chipItem.innerText}toggleItemSelection(){this.selected=!this.selected}emitIfxChipItemSelectEvent(e=true){this.ifxChipItemSelect.emit({emitIfxChange:e,key:this.chipState.key,label:this.getItemLabel(),selected:this.selected,value:this.value})}handleItemClick(){this.toggleItemSelection()}handleItemKeyDown(e){if(e.code==="Enter"||e.code==="Space"){this.toggleItemSelection()}}handleSelectedState(){if(this.selected){this.emitIfxChipItemSelectEvent(false)}}componentWillLoad(){this.handleSelectedState()}render(){return t("div",{key:"7ceff18d0a41b419a188d925fd854cc97d7a9ecd",class:`chip-item chip-item--${this.chipState.size} \n                    chip-item--${(this.selected&&this.chipState.variant)==="single"?"selected":""}`,tabIndex:0,onClick:()=>{this.handleItemClick()},onKeyDown:e=>{this.handleItemKeyDown(e)},role:"option","aria-selected":this.selected.toString()},this.chipState.variant==="multi"&&t("ifx-checkbox",{key:"d2f717951d288aa0863081e54cabf7edd1c6f7e6",checked:this.selected,tabIndex:-1,size:"s"}),t("div",{key:"fff335d9009c93863012f6a4307ed4322413c4f7",class:"chip-item__label"}," ",t("slot",{key:"a093e9caf2eecba28c58674dde3f788be1f5849b"})," "),t("div",{key:"ea76c6b3d0bdd2a687acfbe323ebd9e6d6034a40",class:"chip-item__selected-indicator"},t("ifx-icon",{key:"b581de80777bbfe5a39bc393ec90af46276b7ae9",icon:`check${this.chipState.size==="small"?"12":"16"}`}," ")))}get chipItem(){return s(this)}static get watchers(){return{selected:["validateSelected"]}}};h.style=c;const o='@charset "UTF-8";:root{--ifx-font-family:Source Sans 3;font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.container{display:inline-flex;justify-content:center;align-items:center;gap:32px;font-family:var(--ifx-font-family, Source Sans 3)}.container .items__per-page-wrapper{display:flex;align-items:center;gap:16px}.container .items__per-page-wrapper .items__per-page-label{color:#1D1D1D;font-size:14px;font-style:normal;font-weight:600;line-height:20px}.container .items__per-page-wrapper .items__per-page-field{display:flex;flex-direction:column;align-items:flex-start}.container .items__per-page-wrapper .items__per-page-field ifx-select{width:92px}.container .items__total-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .items__total-button{display:flex;width:40px;height:40px;justify-content:center;align-items:center;border-radius:100px;border:1px solid #BFBBBB;background:#FFF}.container .items__total-wrapper .page__numbers-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item{display:flex;padding:6px;flex-direction:column;justify-content:center;align-items:center;gap:10px;border-radius:100px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active{background-color:#0A8276}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active span{color:#fff}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover{cursor:pointer}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover:not(.active){background-color:#ddd}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:active:not(.active){background-color:#575352}.container .items__total-wrapper .page__numbers-wrapper .page__number-item span{display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px}.pagination{display:flex}.pagination ifx-icon-button:first-of-type{margin-right:12px}.pagination ifx-icon-button:last-of-type{margin-left:12px}a{padding:8px;border-radius:100px}ol{list-style-type:none;padding:0;margin:0;display:inline-flex;align-items:center;gap:12px}li{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:100px}li:hover:not(.active) a{background-color:#EEEDED}li:active:not(.active) a{background-color:#575352;color:#fff}li.active{background-color:#0A8276}li.active a{color:#fff}li:hover{cursor:pointer}li a{text-decoration:none;display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px;align-items:center}.prev.disabled,.next.disabled{cursor:default}.prev.disabled:hover,.next.disabled:hover{cursor:default;text-decoration:none}.prev{margin-right:2.5px}.next{margin-left:2.5px}@media (min-width: 400px){li:first-child,li.active-sibling,li.active,li.active+li,li:last-child{display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8)~li{display:none}li:first-child:nth-last-child(n+8)~li.active-sibling:before{content:"…";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li.active+li:after{content:"…";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+5){display:inline-flex;flex-direction:row}li:first-child:nth-last-child(n+8)~li:nth-last-child(5):before{content:"…";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):after,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):after,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):before,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):after{display:none !important}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5){display:none}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5):before,li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5):before{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+5){display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+4):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+4):after{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(5):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(5):after{content:"…";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8).active:before,li:first-child:nth-last-child(n+8).active:after,li:first-child:nth-last-child(n+8)~li.active:before,li:first-child:nth-last-child(n+8)~li.active:after{display:none}}';const p=o;const d=class{constructor(t){e(this,t);this.ifxPageChange=i(this,"ifxPageChange",7);this.currentPage=0;this.internalPage=1;this.internalItemsPerPage=10;this.numberOfPages=[];this.total=1;this.CLASS_DISABLED="disabled";this.CLASS_ACTIVE="active";this.CLASS_SIBLING_ACTIVE="active-sibling";this.DATA_KEY="pagination"}setItemsPerPage(e){if(e.detail){this.internalItemsPerPage=parseInt(e.detail.label)}else{this.internalItemsPerPage=10}}componentDidLoad(){this.calculateVisiblePageIndices();var e=this.el.shadowRoot.querySelector(".pagination");let i=e.querySelector(".prev");this.navigateSinglePage(i,true)}calculateNumberOfPages(){if(isNaN(this.currentPage)){this.currentPage=1}const e=this.total<=this.internalItemsPerPage?this.internalItemsPerPage:this.total;const i=this.internalItemsPerPage;const t=Math.ceil(e/i);if(this.currentPage<=0){this.internalPage=1}else if(this.currentPage>t){this.internalPage=t}else this.internalPage=this.currentPage;this.numberOfPages=Array.from({length:t},((e,i)=>i+1))}filterOptionsArray(){let e=Array.isArray(this.itemsPerPage)?this.itemsPerPage:JSON.parse(this.itemsPerPage);for(let i=0;i<e.length;i++){let t=e[i];if(!t.label){t.label=t.value}}this.filteredItemsPerPage=e}componentWillLoad(){this.calculateNumberOfPages();this.filterOptionsArray()}componentDidUpdate(){var e=this.el.shadowRoot.querySelector(".pagination");var i=e.querySelectorAll("li");this.addEventListenersToPageItems(i,e);if(e.dataset[this.DATA_KEY]<this.numberOfPages){e.dataset[this.DATA_KEY]=e.dataset[this.DATA_KEY]}else e.dataset[this.DATA_KEY]=0;this.changePage(e,false)}componentWillUpdate(){this.calculateNumberOfPages()}handleEventEmission(e){let i=e+1;let t=this.numberOfPages.length;let s=e===0?null:e;let a=e+2>t?null:e+2;let l=this.internalItemsPerPage;this.ifxPageChange.emit({currentPage:i,totalPages:t,prevPage:s,nextPage:a,itemsPerPage:l})}addEventListenersToPageItems(e,i){e.forEach((e=>{e.addEventListener("click",(e=>{var t=i;let s=t.querySelectorAll("li");t.dataset[this.DATA_KEY]=Array.from(s).indexOf(e.currentTarget);this.changePage(t,false)}))}))}initPagination(e){var i=e.querySelectorAll("li");e.dataset[this.DATA_KEY]=Array.from(i).indexOf(e.querySelector(".active"));e.querySelector(".prev").addEventListener("click",(e=>this.navigateSinglePage(e,false)));e.querySelector(".next").addEventListener("click",(e=>this.navigateSinglePage(e,false)));this.addEventListenersToPageItems(i,e)}navigateSinglePage(e,i){let t=e;if(typeof e.target==="object"){t=e.target}if(!t.classList.contains(this.CLASS_DISABLED)){var s=t.closest(".pagination");var a=parseInt(s.dataset[this.DATA_KEY],10);a+=1*(t.classList.contains("prev")?-1:1);if(a===-1){a=0}s.dataset[this.DATA_KEY]=a;this.changePage(s,i)}}changePage(e,i){const t=e;var s=t.querySelectorAll("li");var a=parseInt(t.dataset[this.DATA_KEY],10);s.forEach((e=>{e.classList.remove(this.CLASS_ACTIVE);e.classList.remove(this.CLASS_SIBLING_ACTIVE)}));if(i&&this.internalPage>1){a=Math.floor(this.internalPage-1);t.dataset[this.DATA_KEY]=a}this.handleEventEmission(a);s[a].classList.add(this.CLASS_ACTIVE);if(a===0){t.querySelector(".prev").classList.add(this.CLASS_DISABLED);t.querySelector(".prev").disabled=true}else{s[a-1].classList.add(this.CLASS_SIBLING_ACTIVE);t.querySelector(".prev").classList.remove(this.CLASS_DISABLED);t.querySelector(".prev").disabled=false}if(a===s.length-1){t.querySelector(".next").classList.add(this.CLASS_DISABLED);t.querySelector(".next").disabled=true}else{t.querySelector(".next").classList.remove(this.CLASS_DISABLED);t.querySelector(".next").disabled=false}}calculateVisiblePageIndices(){var e=this.el.shadowRoot.querySelector(".pagination");this.initPagination(e)}render(){return t("div",{key:"b0c95fd2d1f3eff8c2a02773b7332fa8a0e8df4b","aria-label":"a pagination","aria-value":this.currentPage,class:"container"},t("div",{key:"5258c41927e8699f3abedd4e4cf127abc9b9d621",class:"items__per-page-wrapper"},t("div",{key:"c1613e4f10bddd59733f92a18b02df25fb2bd41c",class:"items__per-page-label"},"Results per Page"),t("div",{key:"c51981aec1cf851bba48ccac2bfdfc0d6889efdf",class:"items__per-page-field"},t("ifx-select",{key:"df0af4e9e347a3bad00477d187df5dfa2336a3a8",value:"undefined",size:"s",placeholder:"false","show-search":"false","search-placeholder-value":"Search...",disabled:false,error:false,"error-message":"Error",label:"","placeholder-value":"Placeholder",options:this.filteredItemsPerPage}))),t("div",{key:"ef3a823246abfd7c22f4e3a214c87880491a97ce",class:"items__total-wrapper"},t("div",{key:"d358a8c56ea8a2963b4de1cb0e3424e45bef5486",class:"page__numbers-wrapper"},t("div",{key:"e0fd96bf52b67c9010f567bc11856f57f1fb9128",class:"pagination"},t("ifx-icon-button",{key:"094f2b269326b82f332375bbf0bf94b25c895051",variant:"secondary",class:"prev",color:"primary",icon:"arrow-left-24"}),t("ol",{key:"1cbe4f1104728aaf5c384d2328db1f2cfc10e6e5"},this.numberOfPages.map((e=>t("li",{class:`${this.internalPage===e?"active":""}`},t("a",{href:undefined},e))))),t("ifx-icon-button",{key:"8befcf76b3fb5d7c349dbde7f45041b7cf661882",class:"next",variant:"secondary",color:"primary",icon:"arrow-right-24"})))))}get el(){return s(this)}};d.style=p;export{n as ifx_chip,h as ifx_chip_item,d as ifx_pagination};
-//# sourceMappingURL=p-1e9f56d6.entry.js.map