@infineon/infineon-design-system-stencil 30.10.0 → 30.11.0--canary.1680.2228c2eb09cd2ba334031704f0fd6efdda1cc5e5.0

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

@@ -1 +0,0 @@
-{"version":3,"names":["footerCss","IfxFooterStyle0","Footer","this","hasColSlot","hasSocialsSlot","Date","getFullYear","currentYear","componentWillLoad","el","querySelector","render","h","Host","key","class","width","height","viewBox","fill","xmlns","d","id","name","copyrightText"],"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);\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,+2FAClB,MAAAC,EAAeD,E,MCQFE,EAAM,M,yBAKTC,KAAAC,WAAsB,MACtBD,KAAAE,eAA0B,M,kBAJH,IAAIC,MAAOC,c,mBACV,YAAcJ,KAAKK,YAAc,2B,CAKjE,iBAAAC,GACEN,KAAKC,aAAeD,KAAKO,GAAGC,cAAc,gBAC1CR,KAAKE,iBAAmBF,KAAKO,GAAGC,cAAc,mB,CAIhD,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,wDAAgB,yBAAyBC,MAAM,qBAC7CH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACNb,KAAKE,gBAAkBF,KAAKC,aAC7BS,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,cAM3CjB,KAAKC,YACJS,EAAA,OAAAE,IAAA,4CAEEF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eACTH,EAAA,QAAAE,IAAA,2CAAMS,KAAK,UAKhBrB,KAAKE,gBACJQ,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,gBACRb,KAAKsB,eACJZ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,iBACRb,KAAKsB,eAGVZ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBACTH,EAAA,QAAAE,IAAA,2CAAMS,KAAK,a","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as s,g as e}from"./p-6b122987.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);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.ifxTabChange=i(this,"ifxTabChange",7);this.orientation="horizontal";this.activeTabIndex=0;this.fullWidth=false;this.internalOrientation=undefined;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.ifxTabChange.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.ifxTabChange.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"){if(this.internalFocusedTabIndex!==-1&&!this.tabObjects[this.internalFocusedTabIndex].disabled){const t=this.internalActiveTabIndex;this.internalActiveTabIndex=this.internalFocusedTabIndex;this.ifxTabChange.emit({previousTab:t,currentTab:this.internalFocusedTabIndex})}}}render(){var t;return s("div",{key:"b94b74545720034560b78d35909a4757c9239c28","aria-label":"navigation tabs",class:`tabs ${this.internalOrientation}`},s("ul",{key:"9689012ae62d5d22c7f9938bce7a5247d7fd1022",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:"0365da7db703747de5996d5b48f1a59ba3ebc3e0",class:"active-border"})),s("div",{key:"53bdc3fbd557dec39cbdea5543ef7e56bf57a156",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-89c7209f.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["tabsCss","IfxTabsStyle0","IfxTabs","updateBorderOnWindowResize","this","updateBorderAndFocus","setActiveAndFocusedTab","index","tabObjects","length","_a","disabled","internalActiveTabIndex","internalFocusedTabIndex","handleTabHeaderChange","e","tabIndex","target","getAttribute","replace","header","detail","activeTabIndexChanged","newValue","oldValue","componentWillLoad","internalOrientation","orientation","toLowerCase","activeTabIndex","ifxTabChange","emit","previousTab","currentTab","onSlotChange","updateTabStyles","tabHeaderRefs","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","tabRefs","setDefaultOrientation","validOrientations","lowercaseOrientation","includes","componentDidLoad","addEventListener","onTabFocus","disconnectedCallback","removeEventListener","componentDidUpdate","updateTabFocusability","focusNextTab","nextIndex","focus","focusPreviousTab","prevIndex","getTabItemClass","isActive","isDisabled","fullWidth","handleClick","handleKeyDown","ev","key","shiftKey","preventDefault","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);\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() ifxTabChange: 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.ifxTabChange.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.ifxTabChange.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      if (this.internalFocusedTabIndex !== -1 && !this.tabObjects[this.internalFocusedTabIndex].disabled) {\n        const previouslyActiveTabIndex = this.internalActiveTabIndex;\n        this.internalActiveTabIndex = this.internalFocusedTabIndex;\n        this.ifxTabChange.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":"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","ignoreList":[]}

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

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

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

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

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

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

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

@@ -1,2 +0,0 @@
-import{r as t,c as s,h as e,g as i}from"./p-6b122987.js";const a=":host{display:block}";const n=a;const o=class{constructor(e){t(this,e);this.tabHeaderChange=s(this,"tabHeaderChange",7);this.header=undefined;this.disabled=undefined;this.icon="";this.iconPosition="left"}componentWillUpdate(){this.tabHeaderChange.emit(this.header)}render(){return e("slot",{key:"159982e12cd57b8ea322152abd5b9bc5e261ba88"})}get el(){return i(this)}};o.style=n;export{o as ifx_tab};
-//# sourceMappingURL=p-9ee328a5.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["tabCss","IfxTabStyle0","IfxTab","componentWillUpdate","this","tabHeaderChange","emit","header","render","h","key"],"sources":["src/components/tabs/tab.scss?tag=ifx-tab","src/components/tabs/tab.tsx"],"sourcesContent":[":host {\n  display: block;\n}","import { Component, h, Element, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-tab',\n  styleUrl: 'tab.scss',\n  shadow: false\n})\nexport class IfxTab {\n  @Element() el: HTMLElement;\n  @Prop() header: string;\n  @Prop() disabled: boolean;\n  @Prop() icon: string = '';\n  @Prop() iconPosition: 'left' | 'right' = 'left';\n  @Event() tabHeaderChange: EventEmitter;\n\n  componentWillUpdate() { \n    this.tabHeaderChange.emit(this.header)\n  }\n\n  render() {\n    return <slot />;\n  }\n}"],"mappings":"yDAAA,MAAMA,EAAS,uBACf,MAAAC,EAAeD,E,MCMFE,EAAM,M,kIAIM,G,kBACkB,M,CAGzC,mBAAAC,GACEC,KAAKC,gBAAgBC,KAAKF,KAAKG,O,CAGjC,MAAAC,GACE,OAAOC,EAAA,QAAAC,IAAA,4C","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["radioButtonCss","IfxRadioButtonStyle0","RadioButton","isChecked","this","internalChecked","componentWillLoad","checked","slot","el","innerHTML","hasSlot","handleRadioButtonClick","event","disabled","stopPropagation","inputElement","click","ifxChange","emit","handleChange","target","name","render","h","key","value","class","size","onClick","bind","error","tabIndex","type","hidden","ref","e"],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: inline-flex;\n}\n\n.radioButton__container {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0px;\n    gap: tokens.$ifxSpace100;\n    cursor: pointer;\n    font-family: var(--ifx-font-family);\n\n    &.m .radioButton__wrapper {\n        width: tokens.$ifxSize300;\n        height: tokens.$ifxSize300;\n    }\n\n    .radioButton__wrapper {\n        width: tokens.$ifxSize250;\n        height: tokens.$ifxSize250;\n        position: relative;\n        display: block;\n        border-radius: 50%;\n        background-color: tokens.$ifxColorBaseWhite;\n        border: 1px solid #575352;\n\n        &:focus {\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: 50%;\n            }\n        }\n\n        .radioButton__wrapper-mark {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            background-color: #0A8276;\n            border-radius: 50%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            border-color: tokens.$ifxColorBaseTransparent;\n        }\n\n        &:hover {\n            background-color: tokens.$ifxColorEngineering200;\n        }\n\n        &.disabled {\n            background-color: #BFBBBB;\n            border-color: #BFBBBB;\n\n            &.error {\n\n                &:hover,\n                &:focus-visible {\n                    border-color: #CD002F;\n                }\n            }\n        }\n\n        &.checked {\n            border-color: #0A8276;\n\n            &::after {\n                content: \"\";\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n                width: 10px;\n                height: 10px;\n                background-color: #0A8276;\n                border-radius: 50%;\n            }\n\n            &.disabled::after {\n                background-color: #BFBBBB;\n            }\n\n\n            &:hover {\n                border-color: tokens.$ifxColorOcean600;\n\n                & .radioButton__wrapper-mark {\n                    background-color: tokens.$ifxColorOcean600;\n                }\n            }\n\n            &.disabled {\n                background-color: tokens.$ifxColorBaseWhite;\n                border-color: #BFBBBB;\n\n                &.disabled::after {\n                    background-color: #BFBBBB;\n                }\n\n                & .radioButton__wrapper-mark {\n                    background-color: #BFBBBB;\n                }\n            }\n        }\n\n        &.error:not(.disabled) {\n            border-color: #CD002F;\n\n            &:hover,\n            &:focus-visible {\n                border-color: #CD002F;\n            }\n        }\n    }\n\n    .label {\n        display: flex;\n        align-items: center;\n        height: tokens.$ifxSize250;\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n        color: tokens.$ifxColorBaseBlack;\n        flex: none;\n        order: 1;\n        flex-grow: 0;\n\n        &.label-m {\n            height: tokens.$ifxSize300;\n            font-size: tokens.$ifxFontSizeM;\n            line-height: tokens.$ifxLineHeightM;\n        }\n\n        &.disabled {\n            color: #BFBBBB;\n        }\n\n\n\n        &:hover {\n            cursor: pointer;\n        }\n    }\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Method } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-radio-button',\n  styleUrl: 'radio-button.scss',\n  shadow: false,\n  formAssociated: false\n})\nexport class RadioButton {\n  @Element() el;\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @Prop() error: boolean = false;\n  @Prop() size: \"s\" | \"m\" = \"s\";\n  @Prop() name: string;\n  @Prop() checked: boolean;\n  @State() internalChecked: boolean = false;\n  @State() hasSlot: boolean = true;\n\n  @State() inputElement: HTMLInputElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n\n  /**\n   * @returns whether the radio button is checked.\n   */\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n  \n  componentWillLoad() {\n    if (this.checked) this.internalChecked = this.checked;\n    const slot = this.el.innerHTML;\n    if (slot) {\n      this.hasSlot = true;\n    } else this.hasSlot = false;\n  }\n\n\n  /**\n   * Click the hidden input element to let it handle the state\n   * and emit ifxChange event.\n   */\n  handleRadioButtonClick(event: PointerEvent) {\n    if (this.disabled) {\n      event.stopPropagation();\n      return;\n    }\n\n    this.inputElement.click();\n    this.internalChecked = this.inputElement.checked;\n    this.ifxChange.emit(this.internalChecked);\n  }\n\n  /**\n   * Listen to all change events.\n   * Needed to get informed when another button of the group gets chcked \n   * and this one needs to become unchecked. \n   * \n   * @param event \n   */\n  @Listen('change', { target: 'window' }) \n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    if (target.name === this.name) {\n      this.internalChecked = this.inputElement.checked;\n    }\n  }\n\n  render() {\n    return (\n      <div\n        aria-label='a radio button' aria-value={this.value} aria-disabled={this.disabled}\n        class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n        onClick={this.handleRadioButtonClick.bind(this)}\n      >\n        <div\n          class={`radioButton__wrapper \n          ${this.internalChecked ? 'checked' : ''} \n          ${this.disabled ? 'disabled' : ''} \n          ${this.error ? 'error' : ''}`}\n          tabIndex={this.disabled ? -1 : 0}\n        >\n          {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n        </div>\n        {this.hasSlot && (\n          <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n            <slot />\n          </div>\n        )}\n        <input\n          type=\"radio\" \n          hidden \n          ref={el => this.inputElement = el as HTMLInputElement} \n          name={this.name}  \n          value={this.value}\n          checked={this.internalChecked}        \n          disabled={this.disabled}\n          onClick={(e) => e.stopPropagation()}></input>\n      </div>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,y5FACvB,MAAAC,EAAeD,E,MCQFE,EAAW,M,4EAEM,M,gCAEH,M,UACC,I,gEAGU,M,aACR,K,4BAU5B,eAAMC,GACJ,OAAOC,KAAKC,e,CAGd,iBAAAC,GACE,GAAIF,KAAKG,QAASH,KAAKC,gBAAkBD,KAAKG,QAC9C,MAAMC,EAAOJ,KAAKK,GAAGC,UACrB,GAAIF,EAAM,CACRJ,KAAKO,QAAU,I,MACVP,KAAKO,QAAU,K,CAQxB,sBAAAC,CAAuBC,GACrB,GAAIT,KAAKU,SAAU,CACjBD,EAAME,kBACN,M,CAGFX,KAAKY,aAAaC,QAClBb,KAAKC,gBAAkBD,KAAKY,aAAaT,QACzCH,KAAKc,UAAUC,KAAKf,KAAKC,gB,CAW3B,YAAAe,CAAaP,GACX,MAAMQ,EAASR,EAAMQ,OACrB,GAAIA,EAAOC,OAASlB,KAAKkB,KAAM,CAC7BlB,KAAKC,gBAAkBD,KAAKY,aAAaT,O,EAI7C,MAAAgB,GACE,OACEC,EAAA,OAAAC,IAAA,wDACa,iBAAgB,aAAarB,KAAKsB,MAAK,gBAAiBtB,KAAKU,SACxEa,MAAO,0BAA0BvB,KAAKwB,QAAQxB,KAAKU,SAAW,WAAa,KAC3Ee,QAASzB,KAAKQ,uBAAuBkB,KAAK1B,OAE1CoB,EAAA,OAAAC,IAAA,2CACEE,MAAO,oCACLvB,KAAKC,gBAAkB,UAAY,kBACnCD,KAAKU,SAAW,WAAa,kBAC7BV,KAAK2B,MAAQ,QAAU,KACzBC,SAAU5B,KAAKU,UAAY,EAAI,GAE9BV,KAAKC,iBAAmBmB,EAAA,OAAAC,IAAA,2CAAKE,MAAM,+BAErCvB,KAAKO,SACJa,EAAA,OAAAC,IAAA,2CAAKE,MAAO,SAASvB,KAAKwB,OAAS,IAAM,UAAY,MAAMxB,KAAKU,SAAW,WAAa,MACtFU,EAAA,QAAAC,IAAA,8CAGJD,EAAA,SAAAC,IAAA,2CACEQ,KAAK,QACLC,OAAM,KACNC,IAAK1B,GAAML,KAAKY,aAAeP,EAC/Ba,KAAMlB,KAAKkB,KACXI,MAAOtB,KAAKsB,MACZnB,QAASH,KAAKC,gBACdS,SAAUV,KAAKU,SACfe,QAAUO,GAAMA,EAAErB,oB","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as i,h as t,g as s}from"./p-6b122987.js";function a(e){return Array.from(e.querySelectorAll("ifx-list-entry")).filter((e=>e.getAttribute("value")==="true")).map((e=>({label:e.getAttribute("label"),value:e.getAttribute("value"),type:e.getAttribute("type")})))}const d=".header{display:flex;align-items:flex-start;align-self:stretch;cursor:pointer;border-left:3px solid transparent}.text-and-icon{display:flex;padding:12px 16px 12px 20px;align-items:center;gap:16px;flex:1 0 0}.header.expanded{border-left:3px solid #0A8276}.text{display:flex;align-items:center;gap:8px;flex:1 0 0;color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.hidden{display:none}.accordion{border-bottom:1px solid #EEEDED}.filter-accordion-container{display:flex;padding:8px 16px 16px 20px;flex-direction:column;align-items:flex-start;gap:12px;align-self:stretch;border-left:3px solid #0A8276}::slotted(ifx-filter-entry:nth-child(n+7)){display:none}.link{display:flex;align-items:center;gap:8px}.show-more ::slotted(ifx-filter-entry:nth-child(n+7)){display:block}.show-more .show-more-link{display:none}";const n=d;const c=class{constructor(t){e(this,t);this.ifxFilterAccordionChange=i(this,"ifxFilterAccordionChange",7);this.initialized=false;this.handleCheckedChange=e=>{const i=e.detail.selectedItems;this.count=i.length;this.ifxFilterAccordionChange.emit({filterGroupName:this.filterGroupName,selectedItems:i})};this.toggleAccordion=e=>{e.stopPropagation();this.expanded=!this.expanded};this.expanded=false;this.maxVisibleItems=undefined;this.count=0;this.totalItems=0;this.filterGroupName=""}componentWillLoad(){this.el.addEventListener("ifxListUpdate",this.handleCheckedChange)}componentDidLoad(){if(!this.initialized){const e=a(this.el);this.count=e.length;this.initialized=true}}componentWillUnload(){this.el.removeEventListener("ifxListUpdate",this.handleCheckedChange)}render(){return t("div",{key:"4aeae13a1f2811af139413ae351ab70cfbb8ecaf",class:`accordion ${this.expanded?"expanded":""}`},t("div",{key:"e17ac3e8bc1dce7555e3824b2cb66228c333e6ae",class:`header ${this.expanded?"expanded":""}`,onClick:this.toggleAccordion},t("div",{key:"2ac732ab1951cc921078be5757d01325d1794fd6",class:`text-and-icon ${this.expanded?"expanded":""}`},t("div",{key:"3d5d4ae28ad2cba68d3d8a2096bda53242ac69f1",class:"text"},t("span",{key:"669dc7417d9303199c3cb68ff7a4a0ef4dd8fdab"},this.filterGroupName),t("ifx-number-indicator",{key:"b154ed9d7824f62bd1fc18fcb524739de66c3260"},this.count)),t("ifx-icon",{key:"1c02692efa10b0c4f3af56ce921599a4dc4c5ba0",class:this.expanded?"":"hidden",icon:"minus-16",onClick:this.toggleAccordion}),t("ifx-icon",{key:"be1893204c1771593d25e4ed24cfe7e5876012c8",class:this.expanded?"hidden":"",icon:"plus-16",onClick:this.toggleAccordion}))),this.expanded&&t("div",{key:"7c6e4e04a0e0050b3934184002348432dfe92245",class:"filter-accordion-container"},t("slot",{key:"1ff8e788b37c48a82a65667d24ddecbb8675bcda",name:"list"})))}get el(){return s(this)}};c.style=n;export{c as ifx_filter_accordion};
-//# sourceMappingURL=p-a2d7c880.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["getInitiallySelectedItems","el","Array","from","querySelectorAll","filter","entry","getAttribute","map","label","value","type","filterAccordionCss","IfxFilterAccordionStyle0","FilterAccordion","this","initialized","handleCheckedChange","event","selectedItems","detail","count","length","ifxFilterAccordionChange","emit","filterGroupName","toggleAccordion","stopPropagation","expanded","componentWillLoad","addEventListener","componentDidLoad","componentWillUnload","removeEventListener","render","h","key","class","onClick","icon","name"],"sources":["src/components/table-advanced-version/filter-type-group/utils.ts","src/components/table-advanced-version/filter-type-group/filter-accordion/filter-accordion.scss?tag=ifx-filter-accordion&encapsulation=shadow","src/components/table-advanced-version/filter-type-group/filter-accordion/filter-accordion.tsx"],"sourcesContent":["// utils.ts\nexport function getInitiallySelectedItems(el: HTMLElement) {\n   return Array.from(el.querySelectorAll('ifx-list-entry'))\n\n    .filter(entry => entry.getAttribute('value') === 'true')\n    .map(entry => {\n      return {\n        label: entry.getAttribute('label'),\n        value: entry.getAttribute('value'),\n        type: entry.getAttribute('type')\n      };\n    });\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n\n.header {\n  display: flex;\n  align-items: flex-start;\n  align-self: stretch;\n  cursor: pointer;\n  border-left: 3px solid transparent;\n}\n\n.text-and-icon {\n  display: flex;\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200 tokens.$ifxSpace150 tokens.$ifxSpace250;\n  align-items: center;\n  gap: tokens.$ifxSpace200;\n  flex: 1 0 0;\n}\n\n.header.expanded {\n  border-left: 3px solid tokens.$ifxColorOcean500;\n}\n\n.text {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: 1 0 0;\n  color: tokens.$ifxColorBaseBlack;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 24px;\n}\n\n.hidden {\n  display: none;\n}\n\n.accordion {\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\n}\n\n\n.filter-accordion-container {\n  display: flex;\n  padding: 8px 16px 16px 20px;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 12px;\n  align-self: stretch;\n  border-left: 3px solid tokens.$ifxColorOcean500;\n}\n\n::slotted(ifx-filter-entry:nth-child(n+7)) {\n  display: none;\n}\n\n.link {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.show-more ::slotted(ifx-filter-entry:nth-child(n+7)) {\n  display: block;\n}\n\n.show-more .show-more-link {\n  display: none;\n}","import { Component, h, Prop, State, Event, EventEmitter, Element } from '@stencil/core';\nimport { getInitiallySelectedItems } from '../utils';\n\n@Component({\n  tag: 'ifx-filter-accordion',\n  styleUrl: 'filter-accordion.scss',\n  shadow: true,\n})\nexport class FilterAccordion {\n  private initialized = false;\n  @Element() private el: HTMLElement;\n  @State() expanded: boolean = false;\n  @Prop() maxVisibleItems: number;\n  @State() count: number = 0;\n  @State() totalItems = 0;\n\n  @Prop() filterGroupName = \"\";\n\n  @Event() ifxFilterAccordionChange: EventEmitter;\n\n  componentWillLoad() {\n    this.el.addEventListener('ifxListUpdate', this.handleCheckedChange);\n\n  }\n\ncomponentDidLoad() {\n  if (!this.initialized) {\n    const selectedItems = getInitiallySelectedItems(this.el);\n    this.count = selectedItems.length;\n    this.initialized = true; // Prevent further execution in future calls\n  }\n}\n\n\nhandleCheckedChange = (event: CustomEvent) => {\n    const selectedItems = event.detail.selectedItems;\n    this.count = selectedItems.length;\n    this.ifxFilterAccordionChange.emit({ filterGroupName: this.filterGroupName, selectedItems });\n  }\n\n  componentWillUnload() {\n    this.el.removeEventListener('ifxListUpdate', this.handleCheckedChange);\n  }\n\n  toggleAccordion = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.expanded = !this.expanded;\n  }\n\n  render() {\n    return (\n      <div class={`accordion ${this.expanded ? 'expanded' : ''}`}>\n        <div class={`header ${this.expanded ? 'expanded' : ''}`} onClick={this.toggleAccordion} >\n          <div class={`text-and-icon ${this.expanded ? 'expanded' : ''}`}>\n            <div class=\"text\">\n              <span>{this.filterGroupName}</span>\n              <ifx-number-indicator>{this.count}</ifx-number-indicator>\n            </div>\n            <ifx-icon\n              class={this.expanded ? '' : 'hidden'}\n              icon=\"minus-16\"\n              onClick={this.toggleAccordion}\n            ></ifx-icon>\n            <ifx-icon\n              class={this.expanded ? 'hidden' : ''}\n              icon=\"plus-16\"\n              onClick={this.toggleAccordion}\n            ></ifx-icon>\n          </div>\n        </div>\n        {this.expanded &&\n          <div class=\"filter-accordion-container\">\n            <slot name=\"list\"></slot>\n          </div>\n        }\n      </div>\n    );\n  }\n}"],"mappings":"kEACgBA,EAA0BC,GACvC,OAAOC,MAAMC,KAAKF,EAAGG,iBAAiB,mBAEpCC,QAAOC,GAASA,EAAMC,aAAa,WAAa,SAChDC,KAAIF,IACI,CACLG,MAAOH,EAAMC,aAAa,SAC1BG,MAAOJ,EAAMC,aAAa,SAC1BI,KAAML,EAAMC,aAAa,WAGjC,CCZA,MAAMK,EAAqB,u0BAC3B,MAAAC,EAAeD,E,MCOFE,EAAe,M,4FAClBC,KAAAC,YAAc,MAyBxBD,KAAAE,oBAAuBC,IACnB,MAAMC,EAAgBD,EAAME,OAAOD,cACnCJ,KAAKM,MAAQF,EAAcG,OAC3BP,KAAKQ,yBAAyBC,KAAK,CAAEC,gBAAiBV,KAAKU,gBAAiBN,iBAAgB,EAO9FJ,KAAAW,gBAAmBR,IACjBA,EAAMS,kBACNZ,KAAKa,UAAYb,KAAKa,QAAQ,E,cAnCH,M,0CAEJ,E,gBACH,E,qBAEI,E,CAI1B,iBAAAC,GACEd,KAAKd,GAAG6B,iBAAiB,gBAAiBf,KAAKE,oB,CAInD,gBAAAc,GACE,IAAKhB,KAAKC,YAAa,CACrB,MAAMG,EAAgBnB,EAA0Be,KAAKd,IACrDc,KAAKM,MAAQF,EAAcG,OAC3BP,KAAKC,YAAc,I,EAWrB,mBAAAgB,GACEjB,KAAKd,GAAGgC,oBAAoB,gBAAiBlB,KAAKE,oB,CAQpD,MAAAiB,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAO,aAAatB,KAAKa,SAAW,WAAa,MACpDO,EAAA,OAAAC,IAAA,2CAAKC,MAAO,UAAUtB,KAAKa,SAAW,WAAa,KAAMU,QAASvB,KAAKW,iBACrES,EAAA,OAAAC,IAAA,2CAAKC,MAAO,iBAAiBtB,KAAKa,SAAW,WAAa,MACxDO,EAAA,OAAAC,IAAA,2CAAKC,MAAM,QACTF,EAAA,QAAAC,IAAA,4CAAOrB,KAAKU,iBACZU,EAAA,wBAAAC,IAAA,4CAAuBrB,KAAKM,QAE9Bc,EAAA,YAAAC,IAAA,2CACEC,MAAOtB,KAAKa,SAAW,GAAK,SAC5BW,KAAK,WACLD,QAASvB,KAAKW,kBAEhBS,EAAA,YAAAC,IAAA,2CACEC,MAAOtB,KAAKa,SAAW,SAAW,GAClCW,KAAK,UACLD,QAASvB,KAAKW,oBAInBX,KAAKa,UACJO,EAAA,OAAAC,IAAA,2CAAKC,MAAM,8BACTF,EAAA,QAAAC,IAAA,2CAAMI,KAAK,U","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as i,h as t,g as a}from"./p-6b122987.js";const s=':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=s;const n=class{constructor(t){e(this,t);this.ifxChipChange=i(this,"ifxChipChange",7);this.placeholder="";this.size="large";this.value=undefined;this.variant="single";this.readOnly=false;this.AriaLabel=undefined;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 a=this.chip.shadowRoot.querySelector(".chip__dropdown");if(!i.includes(a)&&!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.emitIfxChipChange){this.ifxChipChange.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 a=t.shadowRoot.querySelector(".chip-item");if(a){setTimeout((()=>{a.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.ifxChipChange.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(),emitIfxChipChange:true})))}else if(typeof e==="string"){this.selectedOptions=[{value:e,label:e,selected:true,key:i(),emitIfxChipChange:true}]}this.syncChipState()}componentWillLoad(){this.syncSelectedOptionsWithProp(this.value)}render(){return t("div",{key:"eaa08fdd3283cb90fa18cb810cd02681d0ae531d",class:"chip"},t("div",{key:"d4dfd0e6cf40d1acc32426c56c7d3e1ff0f18f85",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:"4aaef2ece1dcc35bea91ef726bd76ca4aa8026fb",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:"2e9334d52fdb6dc76d3a57019e0ac767653b124b",class:"label__selected-options"},this.getSelectedOptions()),this.selectedOptions.length>2&&this.variant==="multi"&&t("ifx-number-indicator",{key:"fbe0db0fd96005221685ff2681dd00d98ab9cecb"},"  ",`+${this.selectedOptions.length-2}`," ")),!this.readOnly&&(this.variant!=="multi"||this.variant==="multi"&&this.selectedOptions.length===0)&&t("div",{key:"b7c0dd24b8409c2be6556b7add6befd631ad57b7",class:"wrapper__open-button"},t("ifx-icon",{key:1,icon:`chevrondown16`})),this.variant!=="multi"&&this.readOnly!==false&&this.selectedOptions.length>0&&t("div",{key:"fbf84d682a54d14da73a18b2b52fab8b947c760c",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:"c21d50cf12f05d95464615449bc9cc70acdba040",class:"wrapper__unselect-button",onClick:e=>{this.handleUnselectButtonClick(e)}},t("ifx-icon",{key:2,icon:`cross16`}))),this.opened&&!this.readOnly&&t("div",{key:"c4b49602aaebdd8950646737df5fa19008870c2e",id:"dropdown",role:"listbox",class:"chip__dropdown"},t("slot",{key:"fb52f07c992f8f4c3de1ca7e0631bacd8ef7147c"})))}get chip(){return a(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({emitIfxChipChange: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:"493fe2e521f96fbe65792b4364c32a3010a4ae86",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:"3f65da6457afbeca9e5e803f2569263b499fe839",checked:this.selected,tabIndex:-1,size:"s"}),t("div",{key:"02a710f81308419623960d15270f719c45f5fd11",class:"chip-item__label"}," ",t("slot",{key:"ad971a10884b08cf3775f7296a44c7aff1769a0b"})," "),t("div",{key:"2ba702249a7fc67ded010890181f5b35494df843",class:"chip-item__selected-indicator"},t("ifx-icon",{key:"887b43ff1b8c6539b01c0fc620f51d9bc04a05d9",icon:`check${this.chipState.size==="small"?"12":"16"}`}," ")))}get chipItem(){return a(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)}.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.ifxNextPage=i(this,"ifxNextPage",7);this.ifxPrevPage=i(this,"ifxPrevPage",7);this.CLASS_DISABLED="disabled";this.CLASS_ACTIVE="active";this.CLASS_SIBLING_ACTIVE="active-sibling";this.DATA_KEY="pagination";this.currentPage=0;this.internalPage=1;this.itemsPerPage=10;this.numberOfPages=[];this.total=1}setItemsPerPage(e){if(e.detail){this.itemsPerPage=parseInt(e.detail.label)}else{this.itemsPerPage=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.itemsPerPage?this.itemsPerPage:this.total;const i=this.itemsPerPage;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))}componentWillLoad(){this.calculateNumberOfPages()}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 a=e===0?null:e;let s=e+2>t?null:e+2;let l=this.itemsPerPage;this.ifxPageChange.emit({currentPage:i,totalPages:t,prevPage:a,nextPage:s,itemsPerPage:l})}addEventListenersToPageItems(e,i){e.forEach((e=>{e.addEventListener("click",(e=>{var t=i;let a=t.querySelectorAll("li");t.dataset[this.DATA_KEY]=Array.from(a).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 a=t.closest(".pagination");var s=parseInt(a.dataset[this.DATA_KEY],10);s+=1*(t.classList.contains("prev")?-1:1);if(s===-1){s=0}a.dataset[this.DATA_KEY]=s;this.changePage(a,i)}}changePage(e,i){const t=e;var a=t.querySelectorAll("li");var s=parseInt(t.dataset[this.DATA_KEY],10);a.forEach((e=>{e.classList.remove(this.CLASS_ACTIVE);e.classList.remove(this.CLASS_SIBLING_ACTIVE)}));if(i&&this.internalPage>1){s=Math.floor(this.internalPage-1);t.dataset[this.DATA_KEY]=s}this.handleEventEmission(s);a[s].classList.add(this.CLASS_ACTIVE);if(s===0){t.querySelector(".prev").classList.add(this.CLASS_DISABLED);t.querySelector(".prev").disabled=true}else{a[s-1].classList.add(this.CLASS_SIBLING_ACTIVE);t.querySelector(".prev").classList.remove(this.CLASS_DISABLED);t.querySelector(".prev").disabled=false}if(s===a.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:"b9e1b525f3a20354d409c93a1aa0faa9d9d17019","aria-label":"a pagination","aria-value":this.currentPage,class:"container"},t("div",{key:"fc932c8e4114f39e5df86007d3595f72fac6384a",class:"items__per-page-wrapper"},t("div",{key:"93816bd9264a8cd32d782cc78df9052ab93f76a7",class:"items__per-page-label"},"Results per Page"),t("div",{key:"3432585bf8ce77786657f676fdaca27aba34b413",class:"items__per-page-field"},t("ifx-select",{key:"a6def492e7db12fb2d9245a6655aaecb99282ceb",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:'[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]'}))),t("div",{key:"275104906a9d0e733644e2b5efbab477ecfc95ca",class:"items__total-wrapper"},t("div",{key:"75528c52f8be0724c332daf2f292c1ec852f6e53",class:"page__numbers-wrapper"},t("div",{key:"4e350e7002b1de2e5fc2c16d10b4a035a3bdedad",class:"pagination"},t("ifx-icon-button",{key:"42a3fe966d4bae2bc90b24709293237a5b57c413",variant:"secondary",class:"prev",color:"primary",icon:"arrow-left-24"}),t("ol",{key:"5d5f20215e988d2adc10f842be5b9300f30b1fd1"},this.numberOfPages.map((e=>t("li",{class:`${this.internalPage===e?"active":""}`},t("a",{href:undefined},e))))),t("ifx-icon-button",{key:"ebb0d3ef295477810891b41ca03ae42cdb634cf7",class:"next",variant:"secondary",color:"primary",icon:"arrow-right-24"})))))}get el(){return a(this)}};d.style=p;export{n as ifx_chip,h as ifx_chip_item,d as ifx_pagination};
-//# sourceMappingURL=p-ad3db607.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["chipCss","IfxChipStyle0","Chip","undefined","handleValueChange","newValue","this","syncSelectedOptionsWithProp","handleReadOnlyChange","opened","closeDropdownOnOutsideClick","event","path","composedPath","chipWrapper","chip","shadowRoot","querySelector","chipDropdown","includes","toggleDropdownMenu","handleKeyDown","code","preventDefault","target","tagName","handleWrapperKeyDown","handleDropdownKeyDown","updateSelectedOptions","eventDetail","detail","previousSelection","selectedOptions","variant","selected","chipItems","getChipItems","forEach","chipItem","chipState","Object","assign","emitIfxChipItemSelect","value","find","option","filter","map","emitIfxChipChange","ifxChipChange","emit","currentSelection","name","placeholder","querySelectorAll","getSelectedOptions","label","join","slice","readOnly","focusChipItemAt","index","item","length","console","error","shadowItem","setTimeout","focus","focusChip","handleUnselectButtonClick","stopPropagation","itemGotUnselected","handleWrapperClick","chipitems","targetIndex","Array","from","indexOf","syncChipState","key","size","generateKey","count","isArray","componentWillLoad","render","h","class","tabIndex","onClick","role","AriaLabel","toString","icon","e","id","chipItemCss","IfxChipItemStyle0","ChipItem","updateItemSelection","parentElement","validateSelected","oldValue","emitIfxChipItemSelectEvent","getItemLabel","innerText","toggleItemSelection","ifxChipItemSelect","handleItemClick","handleItemKeyDown","handleSelectedState","onKeyDown","checked","paginationCss","IfxPaginationStyle0","Pagination","CLASS_DISABLED","CLASS_ACTIVE","CLASS_SIBLING_ACTIVE","DATA_KEY","setItemsPerPage","itemsPerPage","parseInt","componentDidLoad","calculateVisiblePageIndices","paginationElement","el","leftArrow","navigateSinglePage","calculateNumberOfPages","isNaN","currentPage","total","totalPageNumber","Math","ceil","internalPage","numberOfPages","_","componentDidUpdate","listItems","addEventListenersToPageItems","dataset","changePage","componentWillUpdate","handleEventEmission","currActive","totalPages","prevPage","nextPage","ifxPageChange","paginationContainer","addEventListener","parent","currentTarget","initPagination","initialValue","classList","contains","closest","pagination","remove","floor","add","disabled","options","color","href"],"sources":["src/components/chip/chip.scss?tag=ifx-chip&encapsulation=shadow","src/components/chip/chip.tsx","src/components/chip/chip-item/chip-item.scss?tag=ifx-chip-item&encapsulation=shadow","src/components/chip/chip-item/chip-item.tsx","src/components/pagination/pagination.scss?tag=ifx-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: inline-block;\n}\n\n.chip {\n    position: relative;\n}\n\n.chip__wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: tokens.$ifxSpace100;\n\n    box-sizing: border-box;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    \n    background: tokens.$ifxColorBaseWhite;\n    \n    cursor: pointer;  \n    \n    transition: border 100ms ease;\n\n    font: tokens.$ifxBodyBody04;\n    \n    &:hover, &:focus-visible {\n        outline: none;\n        border: 1px solid tokens.$ifxColorEngineering500;\n    }\n\n    &:focus {\n        border: 1px solid tokens.$ifxColorOcean500;\n    }\n    \n    &.chip__wrapper--small {\n        padding: tokens.$ifxSpace50 tokens.$ifxSpace150;\n    }\n    \n    &.chip__wrapper--large {\n        padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    }\n    \n    &.chip__wrapper--opened {\n        border: 1px solid tokens.$ifxColorOcean500;\n        \n        .wrapper__open-button {\n            transform: rotate(-180deg);\n        }\n    }\n    \n    &.chip__wrapper--selected {\n        outline: 3px solid tokens.$ifxColorOcean500;\n        outline-offset: -3px;\n        \n        color: tokens.$ifxColorOcean500;\n        \n        &:hover, &:focus-visible {\n            outline: 3px solid tokens.$ifxColorOcean600;\n            \n            color: tokens.$ifxColorOcean600;\n        }\n    }\n}\n\n.wrapper__label {\n    display: inline-flex;\n    align-items: center;\n    gap: tokens.$ifxSpace50;\n\n    font: tokens.$ifxBodyBody04;\n    \n    .label__selected-options {\n        font: tokens.$ifxBodyBodySemibold04;\n    }\n}\n\n.wrapper__open-button {\n    display:flex;\n    align-items: center;\n    \n    transition: all 300ms ease;\n}\n\n.wrapper__unselect-button {\n    display:flex;\n    align-items: center;\n}\n\n.chip__dropdown {\n    position: absolute;\n    z-index: 1;\n\n    box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n    border: 1px solid tokens.$ifxColorEngineering200;\n    border-radius: tokens.$ifxBorderRadius12;\n    padding: tokens.$ifxSpace100 0;\n\n    min-width: 222px;\n    \n    background-color: tokens.$ifxColorBaseWhite;\n}\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop, State, Watch } from '@stencil/core';\nimport { ChipItemSelectEvent } from './interfaces';\n\n@Component({\n  tag: 'ifx-chip',\n  styleUrl: 'chip.scss',\n  shadow: true\n})\nexport class Chip {\n  @Element() chip: HTMLIfxChipElement;\n\n  @Event() ifxChipChange: EventEmitter<{ previousSelection: Array<ChipItemSelectEvent>, currentSelection: Array<ChipItemSelectEvent>, name: string }>;\n  @Prop() placeholder: string = '';\n  @Prop() size: 'small' | 'large' = 'large';\n  @Prop({ mutable: true }) value: Array<string> | string = undefined;\n  @Prop() variant: 'single' | 'multi' = 'single';\n  @Prop() readOnly: boolean = false;\n  @Prop() AriaLabel: string;\n\n  @State() opened: boolean = false;\n  @State() selectedOptions: Array<ChipItemSelectEvent> = [];\n\n  @Watch('value')\n  handleValueChange(newValue: Array<string> | string) {\n    this.syncSelectedOptionsWithProp(newValue);\n  }\n\n  @Watch('readOnly')\n  handleReadOnlyChange(newValue: boolean) {\n    if (newValue) {\n      this.opened = false;\n    }\n  }\n\n  @Listen('mousedown', { target: 'document' })\n  closeDropdownOnOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\n    const chipDropdown: HTMLElement = this.chip.shadowRoot.querySelector('.chip__dropdown');\n    if (!path.includes(chipDropdown) && !path.includes(chipWrapper) && this.opened) {\n      this.toggleDropdownMenu();\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    // override behavior of all keys except Tab. Users should be able to tab out of the component.\n    if (event.code !== 'Tab') {\n      event.preventDefault(); \n    }\n\n    if ((event.target as HTMLElement).tagName === 'IFX-CHIP') {\n      this.handleWrapperKeyDown(event);\n    } else if ((event.target as HTMLElement).tagName === 'IFX-CHIP-ITEM') {\n      this.handleDropdownKeyDown(event);\n    }\n  }\n\n  @Listen('ifxChipItemSelect')\n  updateSelectedOptions(event: CustomEvent<ChipItemSelectEvent>) {\n    const eventDetail: ChipItemSelectEvent = event.detail;\n    const previousSelection: Array<ChipItemSelectEvent> = [...this.selectedOptions];\n\n    if (this.variant !== 'multi') {\n      if (eventDetail.selected) {\n        this.opened = false;\n        const chipItems: NodeList = this.getChipItems();\n        chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n          if (chipItem.selected && chipItem !== event.target) {\n            chipItem.chipState = {\n              ...chipItem.chipState,\n              emitIfxChipItemSelect: false,\n            };\n            chipItem.selected = false;\n          }\n        });\n        this.selectedOptions = [eventDetail];\n      } else {\n        this.selectedOptions = [];\n      }\n      this.value = this.selectedOptions[0] ? this.selectedOptions[0].value : undefined;\n    } else {\n      if (eventDetail.selected) {\n        // Prevent duplicate entries\n        if (!this.selectedOptions.find(option => option.value === eventDetail.value)) {\n          this.selectedOptions = [...this.selectedOptions, eventDetail];\n        }\n      } else {\n        this.selectedOptions = this.selectedOptions.filter((option) => option.value !== eventDetail.value);\n      }\n      this.value = this.selectedOptions.map((option) => option.value);\n    }\n\n    if (eventDetail.emitIfxChipChange) {\n      this.ifxChipChange.emit({\n        previousSelection: previousSelection,\n        currentSelection: this.selectedOptions,\n        name: this.placeholder\n      });\n    }\n  }\n\n  getChipItems(): NodeList {\n    return this.chip.querySelectorAll('ifx-chip-item');\n  }\n\n  getSelectedOptions(): string {\n    if (this.variant !== 'multi') {\n      return this.selectedOptions.map(option => option.label).join('');\n    }\n    return this.selectedOptions.slice(0, 2).map(option => option.label).join(', ');\n  }\n\n  toggleDropdownMenu() {\n    if (this.readOnly) return;\n    this.opened = !this.opened;\n  }\n\n  /**\n   * Focuses the chip item at the specified index.\n   * @param index the index of the chip item to focus. -1 will focus the last chip item.\n   */\n  focusChipItemAt(index: number = 0) {\n    this.opened = true;\n    const chipItems: NodeList = this.getChipItems();\n    let item: HTMLIfxChipItemElement;\n    \n    if (index === -1) {\n      item = chipItems.item(chipItems.length - 1) as HTMLIfxChipItemElement;\n    } else if (index >= 0 && index < chipItems.length) {\n      item = chipItems.item(index) as HTMLIfxChipItemElement;\n    } else {\n      console.error(`Invalid index: ${index}`);\n      return;\n    }\n\n    const shadowItem = item.shadowRoot.querySelector('.chip-item') as HTMLDivElement;\n    if (shadowItem) {\n      // Delay needed for the shadow item to be rendered.\n      setTimeout(() => {\n        shadowItem.focus();\n      }, 1);\n    }\n  }\n\n  focusChip() {\n    const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\n    chipWrapper.focus();\n  }\n\n  handleUnselectButtonClick(event: MouseEvent) {\n    event.stopPropagation();\n    this.opened = false;\n\n    let itemGotUnselected = false;\n    const chipItems: NodeList = this.getChipItems();\n    chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n      if (chipItem.selected) {\n        itemGotUnselected = true;\n        chipItem.chipState = {\n          ...chipItem.chipState,\n          emitIfxChipItemSelect: false,\n        }\n        chipItem.selected = false;\n      }\n    });\n\n    /* Emit event only if at least one item was unselected. */\n    if (itemGotUnselected) {\n      const previousSelection: Array<ChipItemSelectEvent> = this.selectedOptions;\n      this.selectedOptions = [];\n      this.value = [];\n      this.ifxChipChange.emit({\n        previousSelection: previousSelection,\n        currentSelection: [],\n        name: this.placeholder\n      });\n    }\n  }\n\n  handleWrapperClick() {\n    if (!this.readOnly) {\n      this.toggleDropdownMenu();\n    }\n  }\n\n  handleWrapperKeyDown(event: KeyboardEvent) {\n    // Keymap oriented at https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#keyboard_interaction\n    if (this.readOnly) return;\n\n    if (!this.opened) {\n      switch (event.code) {\n        case 'Space':\n        case 'Enter':\n        case 'ArrowDown':\n          this.focusChipItemAt(0);\n          break;\n        case 'ArrowUp':\n          this.focusChipItemAt(-1);\n          break;\n      }\n    } else {\n      switch (event.code) {\n        case 'Escape':\n          this.opened = false;\n          this.focusChip();\n          break;\n      }\n    }\n  }\n\n  handleDropdownKeyDown(event: KeyboardEvent) {\n    let chipitems = this.getChipItems();\n\n    let targetIndex = Array.from(chipitems).indexOf(event.target as HTMLIfxChipItemElement);\n    if (targetIndex === -1) {\n      console.error('Target not found in chip items');\n      return;\n    }\n\n    switch (event.code) {\n      case 'ArrowDown':\n        if (targetIndex === chipitems.length - 1) break;\n        this.focusChipItemAt(targetIndex + 1);\n        break;\n      case 'ArrowUp':\n        if (targetIndex === 0) break;\n        this.focusChipItemAt( targetIndex - 1);\n        break;\n      case 'Escape':\n        this.opened = false;\n        this.focusChip();\n        break;\n      case 'Space':\n        // selection is handled by the chip-item component\n        if (this.variant === 'single') {\n          // only close dropdown if single select\n          this.opened = false;\n          this.focusChip();\n        }\n        break;\n      case 'Enter':\n        // selection is handled by the chip-item component\n        this.opened = false;\n        this.focusChip();\n        break;\n      }\n    }\n\n  syncChipState() {\n    const chipItems: NodeList = this.getChipItems();\n    let key: number = 0;\n    chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n      chipItem.chipState = {\n        emitIfxChipItemSelect: true,\n        size: (this.size === 'small' ? 'small' : 'large'),\n        variant: (this.variant === 'multi' ? 'multi' : 'single'),\n        key: key++\n      };\n    });\n  }\n\n  syncSelectedOptionsWithProp(newValue: Array<string> | string) {\n    // Clear old selected options\n    this.selectedOptions = [];\n\n    const generateKey = (() => {\n      let count = 0;\n      return () => count++;\n    })();\n\n    if (Array.isArray(newValue)) {\n      this.selectedOptions = newValue.map(value => ({\n        value,\n        label: value,\n        selected: true,\n        key: generateKey(),\n        emitIfxChipChange: true\n      }));\n    } else if (typeof newValue === 'string') {\n      this.selectedOptions = [{\n        value: newValue,\n        label: newValue,\n        selected: true,\n        key: generateKey(),\n        emitIfxChipChange: true\n      }];\n    }\n\n    this.syncChipState();\n  }\n\n  componentWillLoad() {\n    this.syncSelectedOptionsWithProp(this.value);\n  }\n\n  render() {\n    return (\n      <div class='chip'>\n        <div 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' : ''}`}\n          tabIndex={0}\n          onClick={!this.readOnly ? () => { this.handleWrapperClick() } : undefined}\n          role='combobox'\n          aria-label={this.AriaLabel}\n          aria-value={this.getSelectedOptions()}\n          aria-haspopup={!this.readOnly ? 'listbox' : undefined}\n          aria-expanded={!this.readOnly ? this.opened.toString() : undefined}\n          aria-controls={!this.readOnly ? 'dropdown' : undefined}\n          aria-readonly={this.readOnly ? 'true' : undefined}\n          aria-multiselectable={this.variant === 'multi' ? 'true' : undefined}\n          >\n\n          <div class='wrapper__label'>\n            {\n              (this.selectedOptions.length === 0) && `${this.placeholder}`\n            }\n\n            {\n              (this.selectedOptions.length !== 0 && (this.variant === 'multi' || this.readOnly) && this.placeholder !== '') &&\n              `${this.placeholder}:`\n            }\n\n            {\n              (this.selectedOptions.length !== 0) &&\n              <div class='label__selected-options'>\n                {this.getSelectedOptions()}\n              </div>\n            }\n\n            {\n              (this.selectedOptions.length > 2 && this.variant === 'multi') &&\n              <ifx-number-indicator>  {`+${this.selectedOptions.length - 2}`} </ifx-number-indicator>\n            }\n          </div>\n\n          {\n            !this.readOnly && (this.variant !== 'multi' || (this.variant === 'multi' && this.selectedOptions.length === 0)) &&\n            <div class='wrapper__open-button'>\n              <ifx-icon key={1} icon={`chevrondown16`} />\n            </div>\n          }\n\n\n          { \n            (this.variant !== 'multi' && this.readOnly !== false && this.selectedOptions.length > 0) &&\n            <div class='wrapper__unselect-button' onClick={(e) => { this.handleUnselectButtonClick(e) }}>\n              <ifx-icon key={2} icon={`cross16`} />\n            </div>\n          }\n\n          {\n            ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&\n            <div class='wrapper__unselect-button' onClick={(e) => { this.handleUnselectButtonClick(e) }}>\n              <ifx-icon key={2} icon={`cross16`} />\n            </div>\n          }\n\n        </div>\n\n        {\n          this.opened && !this.readOnly &&\n          <div id='dropdown' role='listbox' class='chip__dropdown'>\n            <slot />\n          </div>\n        }\n      </div>\n    );\n  }\n}\n","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.chip-item {\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace100;\n    \n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    \n    user-select: none;\n    \n    transition: all 100ms ease;\n    transition-property: background, color;\n    \n    &:hover {\n        cursor: pointer;\n        \n        background-color: tokens.$ifxColorEngineering200;\n    }\n    \n    &:active {\n        background-color: tokens.$ifxColorEngineering300;\n    }\n\n    &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n    }\n    \n    &.chip-item--large {\n        font: tokens.$ifxBodyBody03;\n    }\n    \n    &.chip-item--small {\n        font: tokens.$ifxBodyBody04;\n    }\n\n    &.chip-item--selected {\n        color: tokens.$ifxColorOcean500;\n\n        .chip-item__selected-indicator {\n            display: block;\n        }\n    }\n}\n\n.chip-item__selected-indicator {\n    display: none;\n    \n    margin-left: auto;\n}\n\n","import { h,\n    Component,\n    Element,\n    Event,\n    EventEmitter, \n    Listen,\n    Prop, \n    Watch } from '@stencil/core';\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\n\n@Component({\ntag: 'ifx-chip-item',\nstyleUrl: 'chip-item.scss',\nshadow: true\n})\n\nexport class ChipItem {\n@Element() chipItem: HTMLIfxChipItemElement;\n\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\n\n@Prop() value: string = undefined;\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n@Listen('ifxChipItemSelect', { target: 'body' })\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\n   if (this.chipState.variant === 'single') {\n       const target = event.target as HTMLIfxChipItemElement;\n       /* Also making sure chip items are from the same group (parent) while unselecting. */\n       if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\n           this.selected = false;\n       }\n   }\n} \n\n@Watch('selected')\nvalidateSelected(newValue: boolean, oldValue: boolean) {\n   if (newValue !== oldValue) {\n       /* Do not emit if ChipState does not allow. */\n       if (this.chipState.emitIfxChipItemSelect){\n           this.emitIfxChipItemSelectEvent();\n       } else {\n           this.chipState.emitIfxChipItemSelect = true;\n       }\n   }\n} \n\ngetItemLabel(): string {\n   return this.chipItem.innerText as string;\n}\n\ntoggleItemSelection() {\n   this.selected = !this.selected;\n}\n   \n\nemitIfxChipItemSelectEvent(emitIfxChipChange: boolean = true) {\n   this.ifxChipItemSelect.emit({ emitIfxChipChange: emitIfxChipChange,\n                           key: this.chipState.key,\n                           label: this.getItemLabel(), \n                           selected: this.selected, \n                           value: this.value });\n}\n\nhandleItemClick() {\n   this.toggleItemSelection();\n}\n\nhandleItemKeyDown(event: KeyboardEvent) {\n   if (event.code === 'Enter' || event.code === 'Space') {\n       this.toggleItemSelection();\n   }\n}\n\nhandleSelectedState() {\n   if (this.selected) {\n       this.emitIfxChipItemSelectEvent(false);\n   }\n}\n\n\ncomponentWillLoad() {\n   /* Propogating the selected state to the Chip (Parent) component if it is set. */\n   this.handleSelectedState();\n}\n\nrender() {\n   return (\n       <div class={`chip-item chip-item--${this.chipState.size} \n                    chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \n           tabIndex={0}\n           onClick={() => {this.handleItemClick()}}\n           onKeyDown={(e) => {this.handleItemKeyDown(e)}}\n           role=\"option\"\n           aria-selected={this.selected.toString()}>    \n           {/* Checkbox; renders only in 'multi' variant. */}\n           { \n               this.chipState.variant === 'multi' &&\n               <ifx-checkbox checked={this.selected}\n                   tabIndex={-1} \n                   size='s'>\n               </ifx-checkbox>\n           }\n\n           <div class='chip-item__label'> <slot /> </div>\n\n           {/* Selected indicator only visible in 'single' variant. */}\n           <div class='chip-item__selected-indicator'> \n               <ifx-icon icon={`check${this.chipState.size === 'small' ? '12' : '16'}`}> </ifx-icon> \n           </div>\n\n       </div>\n   );\n}\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.container {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  gap: 32px;\n  font-family: var(--ifx-font-family);\n\n\n  & .items__per-page-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n\n    & .items__per-page-label {\n      color: #1D1D1D;\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 20px;\n    }\n\n    & .items__per-page-field {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n\n      & ifx-select {\n        width: 92px;\n      }\n    }\n  }\n\n  & .items__total-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 12px;\n\n    & .items__total-button {\n      display: flex;\n      width: 40px;\n      height: 40px;\n      justify-content: center;\n      align-items: center;\n      border-radius: 100px;\n      border: 1px solid #BFBBBB;\n      background: #FFF;\n    }\n\n    & .page__numbers-wrapper {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      gap: 12px;\n\n      & .page__number-item {\n        display: flex;\n        padding: 6px;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        gap: 10px;\n        border-radius: 100px;\n\n        &.active {\n          background-color: #0A8276;\n\n          & span {\n            color: #fff;\n          }\n        }\n\n        &:hover {\n          cursor: pointer;\n        }\n\n        &:hover:not(.active) {\n          background-color: #ddd;\n\n        }\n\n        &:active:not(.active) {\n          background-color: #575352;\n        }\n\n        & span {\n          display: flex;\n          width: 16px;\n          height: 16px;\n          flex-direction: column;\n          justify-content: center;\n          color: #1D1D1D;\n          text-align: center;\n          font-size: 13px;\n          font-style: normal;\n          font-weight: 400;\n          line-height: 20px;\n        }\n      }\n    }\n  }\n}\n\n\n.pagination {\n  display: flex;\n\n  & ifx-icon-button:first-of-type {\n    margin-right: 12px;\n  }\n\n  & ifx-icon-button:last-of-type {\n    margin-left: 12px;\n  }\n}\n\na {\n  padding: 8px;\n  border-radius: 100px;\n}\n\nol {\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n}\n\nli {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  border-radius: 100px;\n\n  &:hover:not(.active) {\n    & a {\n      background-color: #EEEDED;\n    }\n  }\n\n  &:active:not(.active) {\n    & a {\n      background-color: #575352;\n      color: #fff;\n    }\n  }\n\n  &.active {\n    background-color: #0A8276;\n\n    & a {\n      color: #fff;\n    }\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  & a {\n    text-decoration: none;\n    display: flex;\n    width: 16px;\n    height: 16px;\n    flex-direction: column;\n    justify-content: center;\n    color: #1D1D1D;\n    text-align: center;\n    font-size: 13px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    align-items: center;\n  }\n}\n\n.prev,\n.next {\n  &.disabled {\n    cursor: default;\n\n    &:hover {\n      cursor: default;\n      text-decoration: none;\n    }\n  }\n}\n\n.prev {\n  margin-right: 2.5px;\n}\n\n.next {\n  margin-left: 2.5px;\n}\n\n\n@mixin ellipsis($before: true) {\n  content: \"\\2026\";\n  font-size: 13px;\n  display: inline-block;\n\n  @if($before) {\n    margin-right: 6px;\n  }\n\n  @else {\n    margin-left: 6px;\n  }\n}\n\n\n// @media(max-width:460px) {\n//   li {\n\n//     &:first-child,\n//     &.active,\n//     &.active-sibling:nth-last-child(2), // Show second to last child if the last one is active\n//     &:last-child {\n//       //display: inline-block !important;\n//       display: inline-flex !important;\n//       flex-direction: row;\n//     }\n\n//     $how-many-on-ends: 3; // 1,2,3,...,10 || 1,...,8,9,10\n//     // There are >= 5 pages\n//     &:first-child:nth-last-child(n+6) {\n\n//       &~li {\n//         // Start out with all siblings hidden\n//         display: none;\n\n//         // Show the last children in the list by default\n//         &:nth-last-child(-n+#{$how-many-on-ends}) {\n//           //display: inline-block;\n//           display: inline-flex;\n//           flex-direction: row;\n\n//         }\n\n//         // The child at the beginning of the last group shows ellipsis for the group\n//         &:nth-last-child(#{$how-many-on-ends}) {\n//           &:before {\n//             @include ellipsis(true);\n//           }\n//         }\n\n//         // The very beginning elements do not need to show ellipsis\n//         // The very end elements do not need to show ellipsis\n//       }\n\n\n//       &.active,\n//        &~li.active {\n\n//          // Show ellipsis before and after the active element\n//          &:before {\n//            @include ellipsis(true);\n//          }\n//          &:after {\n//            @include ellipsis(false);\n//          }\n\n\n//          // If the active element is in the first or last group, don't show ellipsis (siblings will take care of it)\n//          &:nth-child(-n+#{$how-many-on-ends - 1}),\n//          &:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n//            &:before, &:after {\n//              display: none;\n//            }\n//          }\n\n//          // Hide the last group if \"active\" comes before them\n//          &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n//            display: none;\n//          }\n\n//          // Show the first group together if \"active\" comes before them\n//          &~li:nth-child(-n+#{$how-many-on-ends}) {\n//            //display: inline-block;\n//            display: inline-flex;\n//            flex-direction: row;\n//          }\n\n//          // If \"active\" is before the last member in the group, don't show ellipsis\n//          &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n//             &:after {\n//               display: none;\n//             }\n//          }\n\n\n//         // The child at the end of the first group shows ellipsis for the group\n//         &~li:nth-child(#{$how-many-on-ends}) {\n//           &:after {\n//             @include ellipsis(false);\n//           }\n//         }\n//       }\n//     }\n//   }\n// }\n\n@media (min-width: 400px) {\n  li {\n\n    &:first-child,\n    &.active-sibling,\n    &.active,\n    &.active+li,\n    &:last-child {\n      //display: inline-block!important;\n      display: inline-flex !important;\n      flex-direction: row;\n    }\n\n    // There are >= 7 pages\n    &:first-child:nth-last-child(n+8) {\n      $how-many-on-ends: 5; // 1,2,3,4,5,...,10 || 1,...6,7,8,9,10\n\n      &~li {\n        // Start out with all siblings hidden\n        display: none;\n\n        // Show ellipsis before the previous one\n        &.active-sibling:before {\n          @include ellipsis(true);\n        }\n\n        // Show ellipsis after the next one\n        &.active+li:after {\n          @include ellipsis(false);\n        }\n\n        // Show the last children in the list by default\n        &:nth-last-child(-n+#{$how-many-on-ends}) {\n          //display: inline-block;\n          display: inline-flex;\n          flex-direction: row;\n        }\n\n        // The child at the beginning of the last group shows ellipsis for the group\n        &:nth-last-child(#{$how-many-on-ends}) {\n          &:before {\n            @include ellipsis(true);\n          }\n        }\n\n        // The very beginning elements do not need to show ellipsis\n        &:nth-child(-n+#{$how-many-on-ends - 3}),\n        // The very end elements do not need to show ellipsis\n        &:nth-last-child(-n+#{$how-many-on-ends - 3}),\n        // Even if it's a sibling to \"active\"\n        &.active-sibling:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n\n          &:before,\n          &:after {\n            display: none !important;\n          }\n        }\n      }\n\n      &.active,\n      &~li.active {\n\n        // Hide the last group if \"active\" comes before them\n        &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n          display: none;\n\n          // If there is overlap, the element will show, but hide it's ellipsis\n          &:before {\n            display: none;\n          }\n        }\n\n        // Show the first group together if \"active\" comes before them\n        &~li:nth-child(-n+#{$how-many-on-ends}) {\n          //display: inline-block;\n          display: inline-flex !important;\n          flex-direction: row;\n        }\n\n        // If \"active\" is before the last member in the group, don't show ellipsis\n        &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n          &:after {\n            display: none;\n          }\n        }\n\n\n        // The child at the end of the first group shows ellipsis for the group\n        &~li:nth-child(#{$how-many-on-ends}) {\n          &:after {\n            @include ellipsis(false);\n          }\n        }\n\n        // \"active\" should never show ellipsis\n        &:before,\n        &:after {\n          display: none;\n        }\n      }\n    }\n  }\n}","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-pagination',\n  styleUrl: 'pagination.scss',\n  shadow: true\n})\nexport class Pagination {\n  @Element() el;\n  @Event() ifxPageChange: EventEmitter;\n  @Event() ifxNextPage: EventEmitter;\n  @Event() ifxPrevPage: EventEmitter;\n  @Prop() currentPage: number = 0;\n  @State() internalPage: number = 1;\n  @State() itemsPerPage: number = 10;\n  @State() numberOfPages: number[] = [];\n  @Prop() total: number = 1;\n\n  private CLASS_DISABLED = \"disabled\"\n  private CLASS_ACTIVE = \"active\"\n  private CLASS_SIBLING_ACTIVE = \"active-sibling\"\n  private DATA_KEY = \"pagination\";\n\n  @Listen('ifxSelect')\n  setItemsPerPage(e) {\n    if(e.detail) {\n      this.itemsPerPage = parseInt(e.detail.label)\n    } else { \n      this.itemsPerPage = 10;\n    }\n  }\n\n  componentDidLoad() {\n    this.calculateVisiblePageIndices()\n    var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n    let leftArrow = paginationElement.querySelector('.prev')\n    this.navigateSinglePage(leftArrow, true)\n\n  }\n\n  calculateNumberOfPages() {\n    if (isNaN(this.currentPage)) {\n      this.currentPage = 1;\n    }\n    const total = this.total <= this.itemsPerPage ? this.itemsPerPage : this.total;\n    const itemsPerPage = this.itemsPerPage;\n    const totalPageNumber = Math.ceil(total / itemsPerPage);\n\n    if (this.currentPage <= 0) {\n      this.internalPage = 1;\n    } else if (this.currentPage > totalPageNumber) {\n      this.internalPage = totalPageNumber;\n    } else this.internalPage = this.currentPage;\n\n    this.numberOfPages = Array.from({ length: totalPageNumber }, (_, index) => index + 1);\n  }\n\n  componentWillLoad() {\n    this.calculateNumberOfPages()\n  }\n\n  componentDidUpdate() {\n    var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n    var listItems = paginationElement.querySelectorAll(\"li\");\n    this.addEventListenersToPageItems(listItems, paginationElement)\n\n    if (paginationElement.dataset[this.DATA_KEY] < this.numberOfPages) {\n      paginationElement.dataset[this.DATA_KEY] = paginationElement.dataset[this.DATA_KEY];\n    } else paginationElement.dataset[this.DATA_KEY] = 0;\n\n    this.changePage(paginationElement, false)\n  }\n\n  componentWillUpdate() {\n    this.calculateNumberOfPages()\n  }\n\n  handleEventEmission(currActive) {\n    let currentPage = currActive + 1;\n    let totalPages = this.numberOfPages.length;\n    let prevPage = currActive === 0 ? null : currActive;\n    let nextPage = currActive + 2 > totalPages ? null : currActive + 2;\n    let itemsPerPage = this.itemsPerPage\n    this.ifxPageChange.emit({ currentPage, totalPages, prevPage, nextPage, itemsPerPage })\n  }\n\n  addEventListenersToPageItems(listItems, paginationContainer) {\n    listItems.forEach((item) => {\n      item.addEventListener(\"click\", (e) => {\n        var parent = paginationContainer;\n        let listItems = parent.querySelectorAll(\"li\");\n        parent.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(e.currentTarget)\n        this.changePage(parent, false)\n      });\n    });\n  }\n\n  initPagination(paginationContainer) {\n    var listItems = paginationContainer.querySelectorAll(\"li\");\n\n    paginationContainer.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(paginationContainer.querySelector(\".active\"));\n\n    paginationContainer.querySelector(\".prev\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n    paginationContainer.querySelector(\".next\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n\n    this.addEventListenersToPageItems(listItems, paginationContainer)\n  }\n\n  navigateSinglePage(e, initialValue) {\n    let el = e;\n    if (typeof e.target === 'object') {\n      el = e.target\n    }\n\n    if (!el.classList.contains(this.CLASS_DISABLED)) {\n      var parent = el.closest(\".pagination\");\n      var currActive = parseInt(parent.dataset[this.DATA_KEY], 10);\n      currActive += 1 * (el.classList.contains(\"prev\") ? -1 : 1);\n\n      if (currActive === -1) {\n        currActive = 0;\n      }\n\n      parent.dataset[this.DATA_KEY] = currActive;\n      this.changePage(parent, initialValue)\n    }\n  }\n\n  changePage(pagination, initialValue) {\n    const paginationContainer = pagination;\n    var listItems = paginationContainer.querySelectorAll(\"li\");\n    var currActive = parseInt(paginationContainer.dataset[this.DATA_KEY], 10);\n\n    listItems.forEach((item) => {\n      item.classList.remove(this.CLASS_ACTIVE);\n      item.classList.remove(this.CLASS_SIBLING_ACTIVE);\n    });\n\n    if (initialValue && this.internalPage > 1) {\n      currActive = Math.floor(this.internalPage - 1);\n      paginationContainer.dataset[this.DATA_KEY] = currActive;\n    }\n\n    this.handleEventEmission(currActive)\n\n    listItems[currActive].classList.add(this.CLASS_ACTIVE);\n\n    if (currActive === 0) {\n      paginationContainer.querySelector(\".prev\").classList.add(this.CLASS_DISABLED);\n      paginationContainer.querySelector(\".prev\").disabled = true;\n\n    } else {\n      listItems[currActive - 1].classList.add(this.CLASS_SIBLING_ACTIVE);\n      paginationContainer.querySelector(\".prev\").classList.remove(this.CLASS_DISABLED);\n      paginationContainer.querySelector(\".prev\").disabled = false;\n    }\n\n    if (currActive === (listItems.length - 1)) {\n      paginationContainer.querySelector(\".next\").classList.add(this.CLASS_DISABLED);\n      paginationContainer.querySelector(\".next\").disabled = true;\n\n    } else {\n      paginationContainer.querySelector(\".next\").classList.remove(this.CLASS_DISABLED);\n      paginationContainer.querySelector(\".next\").disabled = false;\n    }\n  }\n\n  calculateVisiblePageIndices() {\n    var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n    this.initPagination(paginationElement)\n  }\n\n  render() {\n    return (\n      <div aria-label='a pagination' aria-value={this.currentPage} class=\"container\">\n        <div class='items__per-page-wrapper'>\n          <div class='items__per-page-label'>Results per Page</div>\n          <div class='items__per-page-field'>\n            <ifx-select\n              value='undefined'\n              size='s'\n              placeholder='false'\n              show-search='false'\n              search-placeholder-value='Search...'\n              disabled={false}\n              error={false}\n              error-message='Error'\n              label=''\n              placeholder-value='Placeholder'\n              options='[{\"value\":\"ten\",\"label\":\"10\",\"selected\":true}, {\"value\":\"Twenty\",\"label\":\"20\",\"selected\":false}, {\"value\":\"Thirty\",\"label\":\"30\",\"selected\":false}]' >\n            </ifx-select>\n          </div>\n        </div>\n        <div class='items__total-wrapper'>\n          <div class='page__numbers-wrapper'>\n            <div class=\"pagination\">\n              <ifx-icon-button variant='secondary' class=\"prev\" color='primary' icon='arrow-left-24'></ifx-icon-button>\n              <ol>\n                {this.numberOfPages.map((item) =>\n                  <li class={`${this.internalPage === item ? 'active' : \"\"}`}><a href={undefined}>{item}</a></li>)}\n              </ol>\n              <ifx-icon-button class=\"next\" variant='secondary' color='primary' icon='arrow-right-24'></ifx-icon-button>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}