@infineon/infineon-design-system-stencil 32.4.0--canary.1758.df69f626879ef2cfb9476e21826a46936a1f78d5.0 → 32.4.0--canary.1760.0c3ba7895c2440caadbfa34cbe9f78e46c926536.0

package/dist/components/{p-b59e5493.js → p-72f7c3e4.js}

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-e27586b6.js';
-import { d as defineCustomElement$3 } from './p-4cd3a589.js';
-import { d as defineCustomElement$2 } from './p-5f01ab1d.js';
-import { d as defineCustomElement$1 } from './p-b73ca128.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-2d825ea9.js';
+import { d as defineCustomElement$3 } from './p-72255c85.js';
+import { d as defineCustomElement$2 } from './p-ec494353.js';
+import { d as defineCustomElement$1 } from './p-cfa335eb.js';
 
 const paginationCss = "@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 IfxPaginationStyle0 = paginationCss;
@@ -203,4 +203,4 @@ function defineCustomElement() {
 
 export { Pagination as P, defineCustomElement as d };
 
-//# sourceMappingURL=p-b59e5493.js.map
+//# sourceMappingURL=p-72f7c3e4.js.map

package/dist/components/{p-b59e5493.js.map → p-72f7c3e4.js.map}

@@ -1 +1 @@
-{"file":"p-b59e5493.js","mappings":"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","names":[],"sources":["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-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  @Prop() currentPage: number = 0;\n  @State() internalPage: number = 1;\n  @State() internalItemsPerPage: number = 10;\n  @State() numberOfPages: number[] = [];\n  @Prop() total: number = 1;\n  @Prop() itemsPerPage: any[] | string;\n  @State() filteredItemsPerPage: any[]\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.internalItemsPerPage = parseInt(e.detail.label)\n    } else { \n      this.internalItemsPerPage = 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.internalItemsPerPage ? this.internalItemsPerPage : this.total;\n    const itemsPerPage = this.internalItemsPerPage;\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  filterOptionsArray() { \n    let obj: any[] = Array.isArray(this.itemsPerPage) ? this.itemsPerPage : JSON.parse(this.itemsPerPage);\n    for(let i = 0; i < obj.length; i++) { \n      let item = obj[i];\n      if(!item.label) { \n        item.label = item.value;\n      }\n    }\n    this.filteredItemsPerPage = obj;\n  }\n\n  componentWillLoad() {\n    this.calculateNumberOfPages()\n    this.filterOptionsArray()\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.internalItemsPerPage\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={this.filteredItemsPerPage} >\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}"],"version":3}
+{"file":"p-72f7c3e4.js","mappings":"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","names":[],"sources":["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-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  @Prop() currentPage: number = 0;\n  @State() internalPage: number = 1;\n  @State() internalItemsPerPage: number = 10;\n  @State() numberOfPages: number[] = [];\n  @Prop() total: number = 1;\n  @Prop() itemsPerPage: any[] | string;\n  @State() filteredItemsPerPage: any[]\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.internalItemsPerPage = parseInt(e.detail.label)\n    } else { \n      this.internalItemsPerPage = 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.internalItemsPerPage ? this.internalItemsPerPage : this.total;\n    const itemsPerPage = this.internalItemsPerPage;\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  filterOptionsArray() { \n    let obj: any[] = Array.isArray(this.itemsPerPage) ? this.itemsPerPage : JSON.parse(this.itemsPerPage);\n    for(let i = 0; i < obj.length; i++) { \n      let item = obj[i];\n      if(!item.label) { \n        item.label = item.value;\n      }\n    }\n    this.filteredItemsPerPage = obj;\n  }\n\n  componentWillLoad() {\n    this.calculateNumberOfPages()\n    this.filterOptionsArray()\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.internalItemsPerPage\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={this.filteredItemsPerPage} >\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}"],"version":3}

package/dist/components/{p-5fe24279.js → p-7ec50cfa.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-e27586b6.js';
-import { d as defineCustomElement$1 } from './p-4cd3a589.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-2d825ea9.js';
+import { d as defineCustomElement$1 } from './p-72255c85.js';
 
 const alertCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert__info-wrapper .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.success{border:1px solid #4CA460}.alert.success .icon-wrapper{background-color:#4CA460;color:#FFFFFF}.alert.danger{border:1px solid #CD002F}.alert.danger .icon-wrapper{background-color:#CD002F;color:#FFFFFF}.alert.warning{border:1px solid #E16B25}.alert.warning .icon-wrapper{background-color:#E16B25;color:#FFFFFF}.close-icon-wrapper ifx-icon:hover{cursor:pointer}";
 const IfxAlertStyle0 = alertCss;
@@ -67,4 +67,4 @@ function defineCustomElement() {
 
 export { Alert as A, defineCustomElement as d };
 
-//# sourceMappingURL=p-5fe24279.js.map
+//# sourceMappingURL=p-7ec50cfa.js.map

package/dist/components/{p-5fe24279.js.map → p-7ec50cfa.js.map}

@@ -1 +1 @@
-{"file":"p-5fe24279.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,soFAAsoF,CAAC;AACxpF,uBAAe,QAAQ;;MCMV,KAAK;IALlB;;;;;QAMU,YAAO,GAA0D,SAAS,CAAC;QAG3E,aAAQ,GAAY,IAAI,CAAC;QACzB,aAAQ,GAAG,WAAW,CAAC;QAG/B,yBAAoB,GAAG;YACrB,SAAS,EAAE,eAAe;YAC1B,SAAS,EAAE,eAAe;YAC1B,QAAQ,EAAE,aAAa;YACvB,SAAS,EAAE,eAAe;YAC1B,MAAM,EAAE,eAAe;SACxB,CAAC;KAqDH;IAnDC,WAAW;QACT,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB;IAED,iBAAiB;QACf,QACE,WAAK,KAAK,EAAC,oBAAoB,IAC7B,cAAQ,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAa,eAAe,IACtE,gBAAU,IAAI,EAAC,UAAU,GAAG,CACrB,CACL,EACN;KACH;IAED,gBAAgB,CAAC,MAAM,GAAG,IAAI;QAC5B,OAAO,GAAG,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;KAClE;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;SAChD;KACF;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,OAAO,KAAK,MAAM,IAC5B,WAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,OAAO,eAAY,IAAI,CAAC,QAAQ,sBAAoB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC,qBAAkB,8BAA8B,IAC/K,WAAK,KAAK,EAAC,oBAAoB,IAC7B,WAAK,KAAK,EAAC,wBAAwB,IACjC,YAAM,IAAI,EAAC,UAAU,GAAG,CACpB,EACN,WAAK,EAAE,EAAE,qBAAqB,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAC,2BAA2B,IAC9E,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,EACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAC5C,KAEN,WAAK,KAAK,EAAE,SAAS,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAC,OAAO,IAC9C,IAAI,CAAC,IAAI,KACR,WAAK,KAAK,EAAC,cAAc,IACvB,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CACzB,CACP,EACD,WAAK,KAAK,EAAC,YAAY,EAAC,EAAE,EAAE,cAAc,IAAI,CAAC,QAAQ,EAAE,IACvD,eAAQ,CACJ,EACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAC5C,CACP,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/alert/alert.scss?tag=ifx-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.alert__info-wrapper {\n  display: flex;\n  padding: 16px 24px;\n  font-family: var(--ifx-font-family);\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n  & .info__text-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: tokens.$ifxSpace100;\n    width: 100%;\n\n    & .info__headline-wrapper {\n      display: -webkit-box;\n      -webkit-line-clamp: 1;\n      line-clamp: 1;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    & .info__headline-wrapper,\n    .info__description-wrapper {\n      color: #1D1D1D;\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 24px;\n\n      ::slotted(p) {\n        padding: 0;\n        margin: 0;\n      }\n    }\n\n    & .info__description-wrapper {\n      font-weight: 400;\n    }\n  }\n\n  & .close-icon-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: flex-start;\n    //min-width: tokens.$ifxSize500;\n\n    & button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      color: tokens.$ifxColorBaseBlack;\n      height: tokens.$ifxSize300;\n      width: tokens.$ifxSize300;\n\n\n      &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 2px;\n      }\n    }\n  }\n}\n\n.alert {\n  display: flex;\n  border: 1px solid tokens.$ifxColorOcean500;\n  border-radius: tokens.$ifxBorderRadius12;\n  color: tokens.$ifxColorBaseBlack;\n  background-color: tokens.$ifxColorBaseWhite;\n  font-family: var(--ifx-font-family);\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n  & .close-icon-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: tokens.$ifxSize500;\n\n    & button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      color: tokens.$ifxColorBaseBlack;\n      height: tokens.$ifxSize300;\n      width: tokens.$ifxSize300;\n\n      &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 2px;\n      }\n    }\n  }\n\n  & .icon-wrapper {\n    position: relative;\n    min-width: tokens.$ifxSize600;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  & .alert-text {\n    font-size: 16px;\n    width: 100%;\n    padding: 12px 0px 12px 12px;\n    color: tokens.$ifxColorBaseBlack;\n\n    white-space: pre-wrap;\n    /* wraps text at spaces and within words */\n    word-wrap: break-word;\n    /* breaks text within a word if necessary */\n    overflow-wrap: anywhere;\n    /* breaks text at arbitrary points when needed */\n  }\n\n  &.primary {\n    border: 1px solid tokens.$ifxColorOcean500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorOcean500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.success {\n    border: 1px solid tokens.$ifxColorGreen500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorGreen500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.danger {\n    border: 1px solid tokens.$ifxColorRed500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorRed500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.warning {\n    border: 1px solid tokens.$ifxColorOrange500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorOrange500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n}\n\n.close-icon-wrapper {\n  & ifx-icon {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n}","import { Component, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert {\n  @Prop() variant: 'primary' | 'success' | 'danger' | 'warning' | 'info' = 'primary';\n  @Prop() icon: string;\n  @Event() ifxClose: EventEmitter;\n  @Prop() closable: boolean = true;\n  @Prop() AriaLive = 'assertive';\n  @State() uniqueId: string;\n\n  alertTypeDescription = {\n    \"primary\": 'Neutral alert',\n    \"success\": 'Success Alert',\n    \"danger\": 'Error Alert',\n    \"warning\": 'Warning Alert',\n    \"info\": 'Neutral alert',\n  };\n\n  handleClose() {\n    this.ifxClose.emit();\n  }\n\n  renderCloseButton() {\n    return (\n      <div class=\"close-icon-wrapper\">\n        <button onClick={this.handleClose.bind(this)} aria-label=\"Dismiss alert\">\n          <ifx-icon icon=\"cross-16\" />\n        </button>\n      </div>\n    );\n  }\n\n  generateUniqueId(prefix = 'id') {\n    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n  }\n\n  componentWillLoad() { \n    if (!this.uniqueId) {\n      this.uniqueId = this.generateUniqueId('alert');\n    }\n  }\n\n  render() {\n    return this.variant === 'info' ? (\n      <div class=\"alert__info-wrapper\" role=\"alert\" aria-live={this.AriaLive} aria-describedby={this.alertTypeDescription[this.variant]} aria-labelledby=\"alert-text alert-description\">\n        <div class=\"info__text-wrapper\">\n          <div class=\"info__headline-wrapper\">\n            <slot name=\"headline\" />\n          </div>\n          <div id={`alert-description-${this.uniqueId}`} class=\"info__description-wrapper\">\n            <slot name=\"desc\" />\n          </div>\n        </div>\n        {this.closable ? this.renderCloseButton() : null}\n      </div>\n    ) : (\n      <div class={`alert ${this.variant}`} role=\"alert\">\n        {this.icon && (\n          <div class=\"icon-wrapper\">\n            <ifx-icon icon={this.icon} />\n          </div>\n        )}\n        <div class=\"alert-text\" id={`alert-text-${this.uniqueId}`}>\n          <slot />\n        </div>\n        {this.closable ? this.renderCloseButton() : null}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-7ec50cfa.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,soFAAsoF,CAAC;AACxpF,uBAAe,QAAQ;;MCMV,KAAK;IALlB;;;;;QAMU,YAAO,GAA0D,SAAS,CAAC;QAG3E,aAAQ,GAAY,IAAI,CAAC;QACzB,aAAQ,GAAG,WAAW,CAAC;QAG/B,yBAAoB,GAAG;YACrB,SAAS,EAAE,eAAe;YAC1B,SAAS,EAAE,eAAe;YAC1B,QAAQ,EAAE,aAAa;YACvB,SAAS,EAAE,eAAe;YAC1B,MAAM,EAAE,eAAe;SACxB,CAAC;KAqDH;IAnDC,WAAW;QACT,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB;IAED,iBAAiB;QACf,QACE,WAAK,KAAK,EAAC,oBAAoB,IAC7B,cAAQ,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAa,eAAe,IACtE,gBAAU,IAAI,EAAC,UAAU,GAAG,CACrB,CACL,EACN;KACH;IAED,gBAAgB,CAAC,MAAM,GAAG,IAAI;QAC5B,OAAO,GAAG,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;KAClE;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;SAChD;KACF;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,OAAO,KAAK,MAAM,IAC5B,WAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,OAAO,eAAY,IAAI,CAAC,QAAQ,sBAAoB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC,qBAAkB,8BAA8B,IAC/K,WAAK,KAAK,EAAC,oBAAoB,IAC7B,WAAK,KAAK,EAAC,wBAAwB,IACjC,YAAM,IAAI,EAAC,UAAU,GAAG,CACpB,EACN,WAAK,EAAE,EAAE,qBAAqB,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAC,2BAA2B,IAC9E,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,EACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAC5C,KAEN,WAAK,KAAK,EAAE,SAAS,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAC,OAAO,IAC9C,IAAI,CAAC,IAAI,KACR,WAAK,KAAK,EAAC,cAAc,IACvB,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CACzB,CACP,EACD,WAAK,KAAK,EAAC,YAAY,EAAC,EAAE,EAAE,cAAc,IAAI,CAAC,QAAQ,EAAE,IACvD,eAAQ,CACJ,EACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAC5C,CACP,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/alert/alert.scss?tag=ifx-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.alert__info-wrapper {\n  display: flex;\n  padding: 16px 24px;\n  font-family: var(--ifx-font-family);\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n  & .info__text-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: tokens.$ifxSpace100;\n    width: 100%;\n\n    & .info__headline-wrapper {\n      display: -webkit-box;\n      -webkit-line-clamp: 1;\n      line-clamp: 1;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    & .info__headline-wrapper,\n    .info__description-wrapper {\n      color: #1D1D1D;\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 24px;\n\n      ::slotted(p) {\n        padding: 0;\n        margin: 0;\n      }\n    }\n\n    & .info__description-wrapper {\n      font-weight: 400;\n    }\n  }\n\n  & .close-icon-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: flex-start;\n    //min-width: tokens.$ifxSize500;\n\n    & button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      color: tokens.$ifxColorBaseBlack;\n      height: tokens.$ifxSize300;\n      width: tokens.$ifxSize300;\n\n\n      &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 2px;\n      }\n    }\n  }\n}\n\n.alert {\n  display: flex;\n  border: 1px solid tokens.$ifxColorOcean500;\n  border-radius: tokens.$ifxBorderRadius12;\n  color: tokens.$ifxColorBaseBlack;\n  background-color: tokens.$ifxColorBaseWhite;\n  font-family: var(--ifx-font-family);\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n  & .close-icon-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: tokens.$ifxSize500;\n\n    & button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      color: tokens.$ifxColorBaseBlack;\n      height: tokens.$ifxSize300;\n      width: tokens.$ifxSize300;\n\n      &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 2px;\n      }\n    }\n  }\n\n  & .icon-wrapper {\n    position: relative;\n    min-width: tokens.$ifxSize600;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  & .alert-text {\n    font-size: 16px;\n    width: 100%;\n    padding: 12px 0px 12px 12px;\n    color: tokens.$ifxColorBaseBlack;\n\n    white-space: pre-wrap;\n    /* wraps text at spaces and within words */\n    word-wrap: break-word;\n    /* breaks text within a word if necessary */\n    overflow-wrap: anywhere;\n    /* breaks text at arbitrary points when needed */\n  }\n\n  &.primary {\n    border: 1px solid tokens.$ifxColorOcean500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorOcean500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.success {\n    border: 1px solid tokens.$ifxColorGreen500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorGreen500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.danger {\n    border: 1px solid tokens.$ifxColorRed500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorRed500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.warning {\n    border: 1px solid tokens.$ifxColorOrange500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorOrange500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n}\n\n.close-icon-wrapper {\n  & ifx-icon {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n}","import { Component, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert {\n  @Prop() variant: 'primary' | 'success' | 'danger' | 'warning' | 'info' = 'primary';\n  @Prop() icon: string;\n  @Event() ifxClose: EventEmitter;\n  @Prop() closable: boolean = true;\n  @Prop() AriaLive = 'assertive';\n  @State() uniqueId: string;\n\n  alertTypeDescription = {\n    \"primary\": 'Neutral alert',\n    \"success\": 'Success Alert',\n    \"danger\": 'Error Alert',\n    \"warning\": 'Warning Alert',\n    \"info\": 'Neutral alert',\n  };\n\n  handleClose() {\n    this.ifxClose.emit();\n  }\n\n  renderCloseButton() {\n    return (\n      <div class=\"close-icon-wrapper\">\n        <button onClick={this.handleClose.bind(this)} aria-label=\"Dismiss alert\">\n          <ifx-icon icon=\"cross-16\" />\n        </button>\n      </div>\n    );\n  }\n\n  generateUniqueId(prefix = 'id') {\n    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n  }\n\n  componentWillLoad() { \n    if (!this.uniqueId) {\n      this.uniqueId = this.generateUniqueId('alert');\n    }\n  }\n\n  render() {\n    return this.variant === 'info' ? (\n      <div class=\"alert__info-wrapper\" role=\"alert\" aria-live={this.AriaLive} aria-describedby={this.alertTypeDescription[this.variant]} aria-labelledby=\"alert-text alert-description\">\n        <div class=\"info__text-wrapper\">\n          <div class=\"info__headline-wrapper\">\n            <slot name=\"headline\" />\n          </div>\n          <div id={`alert-description-${this.uniqueId}`} class=\"info__description-wrapper\">\n            <slot name=\"desc\" />\n          </div>\n        </div>\n        {this.closable ? this.renderCloseButton() : null}\n      </div>\n    ) : (\n      <div class={`alert ${this.variant}`} role=\"alert\">\n        {this.icon && (\n          <div class=\"icon-wrapper\">\n            <ifx-icon icon={this.icon} />\n          </div>\n        )}\n        <div class=\"alert-text\" id={`alert-text-${this.uniqueId}`}>\n          <slot />\n        </div>\n        {this.closable ? this.renderCloseButton() : null}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-6925a52c.js → p-94c20ea7.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-e27586b6.js';
+import { p as proxyCustomElement, H, h } from './p-2d825ea9.js';
 
 const numberIndicatorCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.numberIndicator__container{display:inline-flex;padding:0px 4px;max-height:16px;justify-content:center;align-items:center;border-radius:100px;background-color:#0A8276;font-family:var(--ifx-font-family)}.numberIndicator__container span{color:#FFFFFF;text-align:center;font-size:0.875rem;font-style:normal;font-weight:600;line-height:16px}.numberIndicator__container.inverted{background-color:#FFFFFF}.numberIndicator__container.inverted span{color:#0A8276}";
 const IfxNumberIndicatorStyle0 = numberIndicatorCss;
@@ -33,4 +33,4 @@ function defineCustomElement() {
 
 export { NumberIndicator as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-6925a52c.js.map
+//# sourceMappingURL=p-94c20ea7.js.map

package/dist/components/{p-6925a52c.js.map → p-94c20ea7.js.map}

@@ -1 +1 @@
-{"file":"p-6925a52c.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,4jBAA4jB,CAAC;AACxlB,iCAAe,kBAAkB;;MCOpB,eAAe;IAL5B;;;;QAMU,aAAQ,GAAY,KAAK,CAAC;KAWnC;IATC,MAAM;QACJ,QACE,0EAAgB,oBAAoB,EAAC,KAAK,EAAE,8BAA8B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IACzG,+DACE,8DAAQ,CACH,CACH,EACN;KACH;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/number-indicator/number-indicator.scss?tag=ifx-number-indicator&encapsulation=shadow","src/components/number-indicator/number-indicator.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.numberIndicator__container {\n  display: inline-flex;\n  padding: 0px 4px;\n  max-height: 16px;\n  justify-content: center;\n  align-items: center;\n  border-radius: 100px;\n  background-color: tokens.$ifxColorOcean500;\n  font-family: var(--ifx-font-family);\n\n  & span {\n    color: tokens.$ifxColorBaseWhite;\n    text-align: center;\n    font-size: tokens.$ifxFontSizeS;\n    font-style: normal;\n    font-weight: tokens.$ifxFontWeightSemibold;\n    line-height: 16px;\n  }\n\n  &.inverted {\n    background-color: tokens.$ifxColorBaseWhite;\n\n    & span {\n      color: tokens.$ifxColorOcean500;\n    }\n  }\n}","import { Component, h, Prop } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-number-indicator',\n  styleUrl: 'number-indicator.scss',\n  shadow: true\n})\nexport class NumberIndicator {\n  @Prop() inverted: boolean = false;\n\n  render() {\n    return (\n      <div aria-label='a number indicator' class={`numberIndicator__container ${this.inverted ? 'inverted' : \"\"}`}>\n        <span>\n          <slot />\n        </span>\n      </div>\n    );\n  }\n}"],"version":3}
+{"file":"p-94c20ea7.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,4jBAA4jB,CAAC;AACxlB,iCAAe,kBAAkB;;MCOpB,eAAe;IAL5B;;;;QAMU,aAAQ,GAAY,KAAK,CAAC;KAWnC;IATC,MAAM;QACJ,QACE,0EAAgB,oBAAoB,EAAC,KAAK,EAAE,8BAA8B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IACzG,+DACE,8DAAQ,CACH,CACH,EACN;KACH;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/number-indicator/number-indicator.scss?tag=ifx-number-indicator&encapsulation=shadow","src/components/number-indicator/number-indicator.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.numberIndicator__container {\n  display: inline-flex;\n  padding: 0px 4px;\n  max-height: 16px;\n  justify-content: center;\n  align-items: center;\n  border-radius: 100px;\n  background-color: tokens.$ifxColorOcean500;\n  font-family: var(--ifx-font-family);\n\n  & span {\n    color: tokens.$ifxColorBaseWhite;\n    text-align: center;\n    font-size: tokens.$ifxFontSizeS;\n    font-style: normal;\n    font-weight: tokens.$ifxFontWeightSemibold;\n    line-height: 16px;\n  }\n\n  &.inverted {\n    background-color: tokens.$ifxColorBaseWhite;\n\n    & span {\n      color: tokens.$ifxColorOcean500;\n    }\n  }\n}","import { Component, h, Prop } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-number-indicator',\n  styleUrl: 'number-indicator.scss',\n  shadow: true\n})\nexport class NumberIndicator {\n  @Prop() inverted: boolean = false;\n\n  render() {\n    return (\n      <div aria-label='a number indicator' class={`numberIndicator__container ${this.inverted ? 'inverted' : \"\"}`}>\n        <span>\n          <slot />\n        </span>\n      </div>\n    );\n  }\n}"],"version":3}

package/dist/components/{p-e3b1b73d.js → p-a99809a4.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-e27586b6.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-2d825ea9.js';
 
 const radioButtonCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex;--_ifx-fallback-display:none !important}._ifx-radiobutton-fallback{display:var(--_ifx-fallback-display);position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;border:0 !important}.radioButton__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;cursor:pointer;font-family:var(--ifx-font-family)}.radioButton__container.m .radioButton__wrapper{width:24px;height:24px}.radioButton__container .radioButton__wrapper{width:20px;height:20px;position:relative;display:block;border-radius:50%;background-color:#FFFFFF;border:1px solid #575352}.radioButton__container .radioButton__wrapper:focus{outline:none}.radioButton__container .radioButton__wrapper:focus::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper .radioButton__wrapper-mark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#0A8276;border-radius:50%;display:flex;justify-content:center;align-items:center;border-color:transparent}.radioButton__container .radioButton__wrapper:hover{background-color:#EEEDED}.radioButton__container .radioButton__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.disabled.error:hover,.radioButton__container .radioButton__wrapper.disabled.error:focus-visible{border-color:#CD002F}.radioButton__container .radioButton__wrapper.checked{border-color:#0A8276}.radioButton__container .radioButton__wrapper.checked::after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;background-color:#0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper.checked.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked:hover{border-color:#08665C}.radioButton__container .radioButton__wrapper.checked:hover .radioButton__wrapper-mark{background-color:#08665C}.radioButton__container .radioButton__wrapper.checked.disabled{background-color:#FFFFFF;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled .radioButton__wrapper-mark{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.error::after{border-color:#CD002F;background-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled){border-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled):hover,.radioButton__container .radioButton__wrapper.error:not(.disabled):focus-visible{border-color:#CD002F}.radioButton__container .label{display:flex;align-items:center;height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;flex:none;order:1;flex-grow:0}.radioButton__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}.radioButton__container .label.disabled{color:#BFBBBB}.radioButton__container .label:hover{cursor:pointer}";
 const IfxRadioButtonStyle0 = radioButtonCss;
@@ -139,4 +139,4 @@ function defineCustomElement() {
 
 export { RadioButton as R, defineCustomElement as d };
 
-//# sourceMappingURL=p-e3b1b73d.js.map
+//# sourceMappingURL=p-a99809a4.js.map

package/dist/components/{p-e3b1b73d.js.map → p-a99809a4.js.map}

@@ -1 +1 @@
-{"file":"p-e3b1b73d.js","mappings":"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","names":["HTMLElement"],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button&encapsulation=shadow","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    --_ifx-fallback-display: none !important;\n}\n\n._ifx-radiobutton-fallback {\n    display: var(--_ifx-fallback-display);\n    position: absolute !important;\n    width: 1px !important;\n    height: 1px !important;\n    padding: 0 !important;\n    margin: -1px !important;\n    overflow: hidden !important;\n    clip: rect(0,0,0,0) !important;\n    border: 0 !important;\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            &.error::after {\n                border-color: #CD002F;\n                background-color: #CD002F;\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}\n\n","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-radio-button',\n  styleUrl: 'radio-button.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class RadioButton {\n  @Element() el: HTMLElement;\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @Prop() error: boolean = false;\n  @Prop({ reflect: true }) size: \"s\" | \"m\" = \"s\";\n  @Prop({ reflect: true }) name: string;\n  @Prop({ mutable: true }) checked: boolean;\n  @State() internalChecked: boolean = false;\n  @State() hasSlot: boolean = false;\n\n  private inputElement: HTMLInputElement;\n  private internals: ElementInternals;\n  private fallbackInput: HTMLInputElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n  @Event({ eventName: 'ifxError' }) ifxError: EventEmitter;\n\n  componentWillLoad() {\n    // Fallback for form association\n    this.fallbackInput = document.createElement('input');\n    this.fallbackInput.type = 'radio';\n    this.fallbackInput.hidden = true;\n    this.fallbackInput.className = '_ifx-radiobutton-fallback';\n    this.fallbackInput.style.cssText = `\n      display: none !important;\n      position: absolute !important;\n      opacity: 0 !important;\n      pointer-events: none !important;\n      width: 0 !important;\n      height: 0 !important;\n    `;\n    this.fallbackInput.setAttribute('aria-hidden', 'true');\n    this.fallbackInput.tabIndex = -1;\n    this.el.appendChild(this.fallbackInput);\n\n    // Initialize ElementInternals if supported\n    if ('attachInternals' in HTMLElement.prototype) {\n      try {\n        this.internals = this.el.attachInternals();\n      } catch (e) {\n        console.warn('ElementInternals not supported');\n      }\n    }\n\n    // Initial state\n    this.internalChecked = this.checked || false;\n    this.hasSlot = !!this.el.querySelector('[slot]') || this.el.innerHTML.trim() !== '';\n  }\n\n  @Watch('checked')\n  handleCheckedChange(newValue: boolean) {\n    this.internalChecked = newValue;\n  }\n\n  @Watch('internalChecked')\n  updateFormValue() {\n    // Update both ElementInternals and fallback input\n    if (this.internals?.setFormValue) {\n      this.internals.setFormValue(this.internalChecked ? this.value : null);\n    }\n    this.fallbackInput.checked = this.internalChecked;\n    this.fallbackInput.name = this.name;\n    this.fallbackInput.value = this.value;\n    this.fallbackInput.disabled = this.disabled;\n  }\n\n  @Watch('error')\n    errorChanged(newValue: boolean, oldValue: boolean) {\n      if (newValue !== oldValue) {\n        this.ifxError.emit(newValue);\n      }\n    }\n\n  handleRadioButtonClick(event: Event) {\n    if (this.disabled) {\n      event.stopPropagation();\n      return;\n    }\n\n    this.inputElement.click();\n    this.internalChecked = this.inputElement.checked;\n    this.checked = this.internalChecked;\n    this.ifxChange.emit(this.internalChecked);\n\n    const changeEvent = new CustomEvent('change', {\n      bubbles: true,\n      composed: true,\n      detail: { checked: this.internalChecked }\n    });\n    this.el.dispatchEvent(changeEvent);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if ([' ', 'Enter'].includes(ev.key)) {\n      ev.preventDefault();\n      this.handleRadioButtonClick(new PointerEvent('click'));\n    }\n  }\n\n  @Listen('change', { target: 'document' })\n  handleExternalChange(event: Event) {\n    const target = event.target as HTMLElement;\n    if (target === this.el || target.tagName.toLowerCase() !== 'ifx-radio-button') return;\n    \n    if (target.getAttribute('name') === this.name) {\n      this.internalChecked = false;\n    }\n  }\n\n  render() {\n    return (\n      <div\n        role=\"radio\"\n        aria-checked={String(this.internalChecked)}\n        aria-disabled={String(this.disabled)}\n        class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n        onClick={(e) => this.handleRadioButtonClick(e)}\n        tabindex={this.disabled ? -1 : 0}\n      >\n        <div\n          class={`radioButton__wrapper \n            ${this.internalChecked ? 'checked' : ''} \n            ${this.disabled ? 'disabled' : ''} \n            ${this.error ? 'error' : ''}`}\n        >\n          {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n        </div>\n\n        {this.hasSlot && (\n          <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n            <slot />\n          </div>\n        )}\n\n        <input\n          type=\"radio\"\n          hidden\n          ref={el => this.inputElement = el}\n          name={this.name}\n          value={this.value}\n          checked={this.internalChecked}\n          disabled={this.disabled}\n          onClick={(e) => e.stopPropagation()}\n        />\n      </div>\n    );\n  }\n}"],"version":3}
+{"file":"p-a99809a4.js","mappings":"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","names":["HTMLElement"],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button&encapsulation=shadow","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    --_ifx-fallback-display: none !important;\n}\n\n._ifx-radiobutton-fallback {\n    display: var(--_ifx-fallback-display);\n    position: absolute !important;\n    width: 1px !important;\n    height: 1px !important;\n    padding: 0 !important;\n    margin: -1px !important;\n    overflow: hidden !important;\n    clip: rect(0,0,0,0) !important;\n    border: 0 !important;\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            &.error::after {\n                border-color: #CD002F;\n                background-color: #CD002F;\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}\n\n","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-radio-button',\n  styleUrl: 'radio-button.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class RadioButton {\n  @Element() el: HTMLElement;\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @Prop() error: boolean = false;\n  @Prop({ reflect: true }) size: \"s\" | \"m\" = \"s\";\n  @Prop({ reflect: true }) name: string;\n  @Prop({ mutable: true }) checked: boolean;\n  @State() internalChecked: boolean = false;\n  @State() hasSlot: boolean = false;\n\n  private inputElement: HTMLInputElement;\n  private internals: ElementInternals;\n  private fallbackInput: HTMLInputElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n  @Event({ eventName: 'ifxError' }) ifxError: EventEmitter;\n\n  componentWillLoad() {\n    // Fallback for form association\n    this.fallbackInput = document.createElement('input');\n    this.fallbackInput.type = 'radio';\n    this.fallbackInput.hidden = true;\n    this.fallbackInput.className = '_ifx-radiobutton-fallback';\n    this.fallbackInput.style.cssText = `\n      display: none !important;\n      position: absolute !important;\n      opacity: 0 !important;\n      pointer-events: none !important;\n      width: 0 !important;\n      height: 0 !important;\n    `;\n    this.fallbackInput.setAttribute('aria-hidden', 'true');\n    this.fallbackInput.tabIndex = -1;\n    this.el.appendChild(this.fallbackInput);\n\n    // Initialize ElementInternals if supported\n    if ('attachInternals' in HTMLElement.prototype) {\n      try {\n        this.internals = this.el.attachInternals();\n      } catch (e) {\n        console.warn('ElementInternals not supported');\n      }\n    }\n\n    // Initial state\n    this.internalChecked = this.checked || false;\n    this.hasSlot = !!this.el.querySelector('[slot]') || this.el.innerHTML.trim() !== '';\n  }\n\n  @Watch('checked')\n  handleCheckedChange(newValue: boolean) {\n    this.internalChecked = newValue;\n  }\n\n  @Watch('internalChecked')\n  updateFormValue() {\n    // Update both ElementInternals and fallback input\n    if (this.internals?.setFormValue) {\n      this.internals.setFormValue(this.internalChecked ? this.value : null);\n    }\n    this.fallbackInput.checked = this.internalChecked;\n    this.fallbackInput.name = this.name;\n    this.fallbackInput.value = this.value;\n    this.fallbackInput.disabled = this.disabled;\n  }\n\n  @Watch('error')\n    errorChanged(newValue: boolean, oldValue: boolean) {\n      if (newValue !== oldValue) {\n        this.ifxError.emit(newValue);\n      }\n    }\n\n  handleRadioButtonClick(event: Event) {\n    if (this.disabled) {\n      event.stopPropagation();\n      return;\n    }\n\n    this.inputElement.click();\n    this.internalChecked = this.inputElement.checked;\n    this.checked = this.internalChecked;\n    this.ifxChange.emit(this.internalChecked);\n\n    const changeEvent = new CustomEvent('change', {\n      bubbles: true,\n      composed: true,\n      detail: { checked: this.internalChecked }\n    });\n    this.el.dispatchEvent(changeEvent);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if ([' ', 'Enter'].includes(ev.key)) {\n      ev.preventDefault();\n      this.handleRadioButtonClick(new PointerEvent('click'));\n    }\n  }\n\n  @Listen('change', { target: 'document' })\n  handleExternalChange(event: Event) {\n    const target = event.target as HTMLElement;\n    if (target === this.el || target.tagName.toLowerCase() !== 'ifx-radio-button') return;\n    \n    if (target.getAttribute('name') === this.name) {\n      this.internalChecked = false;\n    }\n  }\n\n  render() {\n    return (\n      <div\n        role=\"radio\"\n        aria-checked={String(this.internalChecked)}\n        aria-disabled={String(this.disabled)}\n        class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n        onClick={(e) => this.handleRadioButtonClick(e)}\n        tabindex={this.disabled ? -1 : 0}\n      >\n        <div\n          class={`radioButton__wrapper \n            ${this.internalChecked ? 'checked' : ''} \n            ${this.disabled ? 'disabled' : ''} \n            ${this.error ? 'error' : ''}`}\n        >\n          {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n        </div>\n\n        {this.hasSlot && (\n          <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n            <slot />\n          </div>\n        )}\n\n        <input\n          type=\"radio\"\n          hidden\n          ref={el => this.inputElement = el}\n          name={this.name}\n          value={this.value}\n          checked={this.internalChecked}\n          disabled={this.disabled}\n          onClick={(e) => e.stopPropagation()}\n        />\n      </div>\n    );\n  }\n}"],"version":3}

package/dist/components/{p-bd67d4af.js → p-ae4c3cdd.js}

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-e27586b6.js';
-import { d as defineCustomElement$5 } from './p-c7cced92.js';
-import { d as defineCustomElement$4 } from './p-4cd3a589.js';
-import { d as defineCustomElement$3 } from './p-1ca63c42.js';
-import { d as defineCustomElement$2 } from './p-efb9a50a.js';
-import { d as defineCustomElement$1 } from './p-c24216e7.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-2d825ea9.js';
+import { d as defineCustomElement$5 } from './p-3cb1b2ea.js';
+import { d as defineCustomElement$4 } from './p-72255c85.js';
+import { d as defineCustomElement$3 } from './p-66954c54.js';
+import { d as defineCustomElement$2 } from './p-24fc5257.js';
+import { d as defineCustomElement$1 } from './p-d26051b3.js';
 
 const templateCss = ".react__template-wrapper{display:flex;width:300px;height:200px;border-radius:3px;border:1px solid #ccc}.react__template-wrapper.hide{display:none}.react__template-wrapper:hover{cursor:pointer}.template__page-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.template__page-wrapper .repository__url{text-decoration:none}.input__fields-wrapper{display:flex;flex-direction:column;gap:10px}.details__wrapper{display:flex;flex-direction:column;gap:10px}.selection__buttons-wrapper{display:flex;gap:10px;padding-top:10px;align-items:center}.selection__buttons-wrapper .vue__label{color:#ccc}.selection__buttons-wrapper label:not(.vue__label):hover{cursor:pointer}.selection__buttons-wrapper .selection__input{display:flex;align-items:center;gap:5px}.selection__buttons-wrapper .selection__input input{margin:0;height:20px;width:20px}.selection__buttons-wrapper .selection__input input:hover:not(.vue__input){cursor:pointer}.image__wrapper img{position:relative;width:300px;height:100%;border-radius:3px;object-fit:contain;transition:transform 0.2s}.image__wrapper img:hover{transform:scale(2);top:50px;z-index:100}";
 const IfxTemplateStyle0 = templateCss;
@@ -204,4 +204,4 @@ function defineCustomElement() {
 
 export { Template as T, defineCustomElement as d };
 
-//# sourceMappingURL=p-bd67d4af.js.map
+//# sourceMappingURL=p-ae4c3cdd.js.map

package/dist/components/{p-bd67d4af.js.map → p-ae4c3cdd.js.map}

@@ -1 +1 @@
-{"file":"p-bd67d4af.js","mappings":"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","names":[],"sources":["src/components/templates/template/template.scss?tag=ifx-template&encapsulation=shadow","src/components/templates/template/template.tsx"],"sourcesContent":["\n.react__template-wrapper { \n  display: flex;\n  width: 300px;\n  height: 200px;\n  border-radius: 3px;\n  border: 1px solid #ccc;\n\n  &.hide { \n    display: none;\n  }\n  \n  &:hover { \n    cursor: pointer;\n  }\n}\n\n.template__page-wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n\n  & .repository__url { \n    text-decoration: none;\n  }\n}\n\n.input__fields-wrapper { \n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n\n}\n\n.details__wrapper { \n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.selection__buttons-wrapper { \n  display: flex;\n  gap: 10px;\n  padding-top: 10px;\n  align-items: center;\n  & .vue__label { \n    color: #ccc;\n  }\n\n  & label:not(.vue__label) { \n    &:hover { \n      cursor: pointer;\n    }\n  }\n\n  & .selection__input { \n    display: flex;\n    align-items: center;\n    gap: 5px;\n    & input { \n      margin: 0;\n      height: 20px;\n      width: 20px;\n      &:hover:not(.vue__input) { \n        cursor: pointer;\n      }\n    }\n  }\n}\n\n.image__wrapper { \n  img { \n    position: relative;\n    width: 300px;\n    height: 100%;\n    border-radius: 3px;\n    object-fit: contain;\n    transition: transform .2s;\n    &:hover { \n      transform: scale(2);\n      top: 50px;\n      z-index: 100;\n    }\n  }\n}","import { Component, h, Element, State, Prop, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-template',\n  styleUrl: 'template.scss',\n  shadow: true,\n})\nexport class Template {\n  @Element() el: HTMLElement;\n  @State() repoDetails: { name: string, desc: string, framework: string } = { name: \"\", desc: \"\", framework: \"\" };\n  @State() repoUrl: string;\n  @State() showDetails: boolean = false;\n  @State() isTemplatePage: boolean = false;\n  @State() isLoading: boolean = true;\n  @State() repoError: string;\n  @Prop() name: string;\n  @Event() toggleTemplates: EventEmitter;\n  @Event() fieldError: EventEmitter;\n  @Prop() thumbnail: string;\n  \n  private clientId = 'Ov23lixmXiNTTNb6V5W6'\n  private redirectUri = 'https://infineon.github.io/infineon-design-system-stencil/?path=/docs/dds-templates--development';\n  private scope = 'repo workflow'\n  private state = 'template123'\n\n  authUser() { \n    const authorizationUrl = `https://github.com/login/oauth/authorize?` +\n      `client_id=${this.clientId}&` +\n      `redirect_uri=${this.redirectUri}&` +\n      `scope=${this.scope}&` +\n      `state=${this.state}`;\n    \n      window.open(authorizationUrl, '_blank'); \n  }\n\n  componentDidLoad() { \n    const url = new URL(window.location.href);\n    const code = url.searchParams.get('code');\n    const { templateName } = this.getLocalStorageValues()\n    if(code && this.name === templateName) { \n      this.isTemplatePage = true;\n      this.toggleTemplates.emit('details')\n      this.getUserToken(code)\n    } \n  }\n\n  getLocalStorageValues() { \n    const repoName = localStorage.getItem('repo_name');\n    const repoDesc = localStorage.getItem('repo_desc');\n    const repoFramework = localStorage.getItem('repo_framework');\n    const templateName = localStorage.getItem('selectedTemplate');\n    return { repoName, repoDesc, repoFramework, templateName }\n  }\n\n  async getUserToken(authCode) {\n    const { repoName, repoDesc, repoFramework, templateName } = this.getLocalStorageValues();\n\n    fetch(`https://dds-templates.eu-central-1.elasticbeanstalk.com/token/${authCode}/${repoName}/${repoDesc}/${repoFramework}/${templateName}`)\n    .then(response => {\n      if (response.ok) {\n        return response.text();\n      } else {\n        return response.text().then(errorMessage => {\n          throw new Error(errorMessage);\n        });\n      }\n    })\n    .then(data => { \n      if(data) { \n        this.isLoading = false;\n        this.repoUrl = data;\n        localStorage.clear();\n      } \n    })\n    .catch(error => {\n      this.repoError = error.message;\n      console.error('Error:', error.message)\n    });\n  }\n\n  handleUserInput(e, type) { \n    if (type === 'name') {\n      this.repoDetails = { ...this.repoDetails, name: e.target.value };\n    } else if (type === 'desc') {\n      this.repoDetails = { ...this.repoDetails, desc: e.target.value };\n    } else if(type === 'framework') { \n      this.repoDetails = { ...this.repoDetails, framework: e.target.value };\n    }\n  }\n\n  submitUserData() { \n    if(this.repoDetails.name && this.repoDetails.desc && this.repoDetails.framework) { \n      localStorage.setItem('repo_name', this.repoDetails.name);\n      localStorage.setItem('repo_desc', this.repoDetails.desc);\n      localStorage.setItem('repo_framework', this.repoDetails.framework);\n      localStorage.setItem('selectedTemplate', this.name);\n      this.fieldError.emit(false)\n      this.authUser()\n    } else { \n      this.fieldError.emit('All fields are mandatory')\n    }\n  }\n\n  togglePadding(action) { \n    let parent = this.el.parentElement;\n    if (parent) {\n      const rootNode = parent.getRootNode();\n      if (rootNode instanceof ShadowRoot) {\n        parent = rootNode.host.parentElement;\n      } else {\n        parent = parent.parentElement;\n      }\n      if(action === 'remove') { \n        parent.parentElement.style.padding = '0px';\n      } else if(action === 'add') { \n        parent.parentElement.style.padding = '4rem 20px';\n      }\n    }\n  }\n\n  handleCurrentTemplate(e) { \n    if(e && !this.showDetails) { \n      this.togglePadding('remove')\n      const targetTemplate = e.currentTarget;\n      this.toggleTemplates.emit(targetTemplate)\n      this.showDetails = true;\n    } \n  }\n\n  @Method()\n  async toggleTemplate(currTemp) { \n    const templateWrapper = this.el.shadowRoot.querySelector('.react__template-wrapper');\n    if(templateWrapper) { \n      if(!templateWrapper.classList.contains('hide') && currTemp ) { \n        if(templateWrapper !== currTemp) {\n          templateWrapper.classList.add('hide')\n        }\n      } else { \n        if(this.showDetails) { \n          this.showDetails = false;\n        }\n        this.togglePadding('add')\n        templateWrapper.classList.remove('hide')\n      }\n    }\n  }\n\n \n  render() {\n      return (\n        <div>\n          {this.isTemplatePage \n          ? \n          <div class=\"template__page-wrapper\">\n            {!this.repoUrl && !this.repoError && \n            <div>\n              <h3>Your repository is getting ready..</h3>\n              <p>This will only take a minute.</p>\n            </div>}\n            {this.isLoading && !this.repoError && <div><ifx-spinner variant='default' size='s' /></div>}\n            {this.repoUrl && <ifx-link href={this.repoUrl} target=\"_parent\" size=\"m\" variant=\"underlined\">Your repository</ifx-link>}\n            {this.repoError && <div>{this.repoError}</div>}\n          </div> \n          : \n          <div class=\"react__template-container\">\n              <div class=\"react__template-wrapper\" onClick={(e) => this.handleCurrentTemplate(e)}>\n                <div class=\"image__wrapper\">\n                  <img src={this.thumbnail} />\n                </div>\n              </div>\n            {this.showDetails && \n            <div class=\"details__wrapper\">\n              <div class=\"selection__buttons-wrapper\">\n                <div class=\"selection__input\">\n                  <input type=\"radio\" id=\"react\" name=\"chosen_framework\" value=\"react\" onInput={(e) => this.handleUserInput(e, 'framework')}  />\n                  <label htmlFor=\"react\">React</label>\n                </div>\n                <div class=\"selection__input vue\">\n                  <input class=\"vue__input\" disabled type=\"radio\" id=\"vue\" name=\"chosen_framework\" value=\"vue\" onInput={(e) => this.handleUserInput(e, 'framework')}/>\n                  <label class=\"vue__label\" htmlFor=\"vue\">Vue</label> (Soon)\n                </div>\n              </div>\n           \n\n              <div class=\"input__fields-wrapper\">\n                <ifx-text-field required={true} onInput={(e) => this.handleUserInput(e, 'name')} size=\"m\" icon=\"c-info-16\" placeholder=\"Your repository name\">Repository Name</ifx-text-field>\n\n                <ifx-text-field required={true} size=\"m\" icon=\"c-info-16\" onInput={(e) => this.handleUserInput(e, 'desc')} placeholder=\"Your repository description\">Repository Description</ifx-text-field>\n\n                <ifx-button fullWidth={true} onClick={() => this.submitUserData()} variant='primary'>Generate template</ifx-button>\n              </div>\n              \n            </div>}\n          </div>}\n        </div>\n      );\n  }\n}"],"version":3}
+{"file":"p-ae4c3cdd.js","mappings":"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","names":[],"sources":["src/components/templates/template/template.scss?tag=ifx-template&encapsulation=shadow","src/components/templates/template/template.tsx"],"sourcesContent":["\n.react__template-wrapper { \n  display: flex;\n  width: 300px;\n  height: 200px;\n  border-radius: 3px;\n  border: 1px solid #ccc;\n\n  &.hide { \n    display: none;\n  }\n  \n  &:hover { \n    cursor: pointer;\n  }\n}\n\n.template__page-wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n\n  & .repository__url { \n    text-decoration: none;\n  }\n}\n\n.input__fields-wrapper { \n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n\n}\n\n.details__wrapper { \n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.selection__buttons-wrapper { \n  display: flex;\n  gap: 10px;\n  padding-top: 10px;\n  align-items: center;\n  & .vue__label { \n    color: #ccc;\n  }\n\n  & label:not(.vue__label) { \n    &:hover { \n      cursor: pointer;\n    }\n  }\n\n  & .selection__input { \n    display: flex;\n    align-items: center;\n    gap: 5px;\n    & input { \n      margin: 0;\n      height: 20px;\n      width: 20px;\n      &:hover:not(.vue__input) { \n        cursor: pointer;\n      }\n    }\n  }\n}\n\n.image__wrapper { \n  img { \n    position: relative;\n    width: 300px;\n    height: 100%;\n    border-radius: 3px;\n    object-fit: contain;\n    transition: transform .2s;\n    &:hover { \n      transform: scale(2);\n      top: 50px;\n      z-index: 100;\n    }\n  }\n}","import { Component, h, Element, State, Prop, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-template',\n  styleUrl: 'template.scss',\n  shadow: true,\n})\nexport class Template {\n  @Element() el: HTMLElement;\n  @State() repoDetails: { name: string, desc: string, framework: string } = { name: \"\", desc: \"\", framework: \"\" };\n  @State() repoUrl: string;\n  @State() showDetails: boolean = false;\n  @State() isTemplatePage: boolean = false;\n  @State() isLoading: boolean = true;\n  @State() repoError: string;\n  @Prop() name: string;\n  @Event() toggleTemplates: EventEmitter;\n  @Event() fieldError: EventEmitter;\n  @Prop() thumbnail: string;\n  \n  private clientId = 'Ov23lixmXiNTTNb6V5W6'\n  private redirectUri = 'https://infineon.github.io/infineon-design-system-stencil/?path=/docs/dds-templates--development';\n  private scope = 'repo workflow'\n  private state = 'template123'\n\n  authUser() { \n    const authorizationUrl = `https://github.com/login/oauth/authorize?` +\n      `client_id=${this.clientId}&` +\n      `redirect_uri=${this.redirectUri}&` +\n      `scope=${this.scope}&` +\n      `state=${this.state}`;\n    \n      window.open(authorizationUrl, '_blank'); \n  }\n\n  componentDidLoad() { \n    const url = new URL(window.location.href);\n    const code = url.searchParams.get('code');\n    const { templateName } = this.getLocalStorageValues()\n    if(code && this.name === templateName) { \n      this.isTemplatePage = true;\n      this.toggleTemplates.emit('details')\n      this.getUserToken(code)\n    } \n  }\n\n  getLocalStorageValues() { \n    const repoName = localStorage.getItem('repo_name');\n    const repoDesc = localStorage.getItem('repo_desc');\n    const repoFramework = localStorage.getItem('repo_framework');\n    const templateName = localStorage.getItem('selectedTemplate');\n    return { repoName, repoDesc, repoFramework, templateName }\n  }\n\n  async getUserToken(authCode) {\n    const { repoName, repoDesc, repoFramework, templateName } = this.getLocalStorageValues();\n\n    fetch(`https://dds-templates.eu-central-1.elasticbeanstalk.com/token/${authCode}/${repoName}/${repoDesc}/${repoFramework}/${templateName}`)\n    .then(response => {\n      if (response.ok) {\n        return response.text();\n      } else {\n        return response.text().then(errorMessage => {\n          throw new Error(errorMessage);\n        });\n      }\n    })\n    .then(data => { \n      if(data) { \n        this.isLoading = false;\n        this.repoUrl = data;\n        localStorage.clear();\n      } \n    })\n    .catch(error => {\n      this.repoError = error.message;\n      console.error('Error:', error.message)\n    });\n  }\n\n  handleUserInput(e, type) { \n    if (type === 'name') {\n      this.repoDetails = { ...this.repoDetails, name: e.target.value };\n    } else if (type === 'desc') {\n      this.repoDetails = { ...this.repoDetails, desc: e.target.value };\n    } else if(type === 'framework') { \n      this.repoDetails = { ...this.repoDetails, framework: e.target.value };\n    }\n  }\n\n  submitUserData() { \n    if(this.repoDetails.name && this.repoDetails.desc && this.repoDetails.framework) { \n      localStorage.setItem('repo_name', this.repoDetails.name);\n      localStorage.setItem('repo_desc', this.repoDetails.desc);\n      localStorage.setItem('repo_framework', this.repoDetails.framework);\n      localStorage.setItem('selectedTemplate', this.name);\n      this.fieldError.emit(false)\n      this.authUser()\n    } else { \n      this.fieldError.emit('All fields are mandatory')\n    }\n  }\n\n  togglePadding(action) { \n    let parent = this.el.parentElement;\n    if (parent) {\n      const rootNode = parent.getRootNode();\n      if (rootNode instanceof ShadowRoot) {\n        parent = rootNode.host.parentElement;\n      } else {\n        parent = parent.parentElement;\n      }\n      if(action === 'remove') { \n        parent.parentElement.style.padding = '0px';\n      } else if(action === 'add') { \n        parent.parentElement.style.padding = '4rem 20px';\n      }\n    }\n  }\n\n  handleCurrentTemplate(e) { \n    if(e && !this.showDetails) { \n      this.togglePadding('remove')\n      const targetTemplate = e.currentTarget;\n      this.toggleTemplates.emit(targetTemplate)\n      this.showDetails = true;\n    } \n  }\n\n  @Method()\n  async toggleTemplate(currTemp) { \n    const templateWrapper = this.el.shadowRoot.querySelector('.react__template-wrapper');\n    if(templateWrapper) { \n      if(!templateWrapper.classList.contains('hide') && currTemp ) { \n        if(templateWrapper !== currTemp) {\n          templateWrapper.classList.add('hide')\n        }\n      } else { \n        if(this.showDetails) { \n          this.showDetails = false;\n        }\n        this.togglePadding('add')\n        templateWrapper.classList.remove('hide')\n      }\n    }\n  }\n\n \n  render() {\n      return (\n        <div>\n          {this.isTemplatePage \n          ? \n          <div class=\"template__page-wrapper\">\n            {!this.repoUrl && !this.repoError && \n            <div>\n              <h3>Your repository is getting ready..</h3>\n              <p>This will only take a minute.</p>\n            </div>}\n            {this.isLoading && !this.repoError && <div><ifx-spinner variant='default' size='s' /></div>}\n            {this.repoUrl && <ifx-link href={this.repoUrl} target=\"_parent\" size=\"m\" variant=\"underlined\">Your repository</ifx-link>}\n            {this.repoError && <div>{this.repoError}</div>}\n          </div> \n          : \n          <div class=\"react__template-container\">\n              <div class=\"react__template-wrapper\" onClick={(e) => this.handleCurrentTemplate(e)}>\n                <div class=\"image__wrapper\">\n                  <img src={this.thumbnail} />\n                </div>\n              </div>\n            {this.showDetails && \n            <div class=\"details__wrapper\">\n              <div class=\"selection__buttons-wrapper\">\n                <div class=\"selection__input\">\n                  <input type=\"radio\" id=\"react\" name=\"chosen_framework\" value=\"react\" onInput={(e) => this.handleUserInput(e, 'framework')}  />\n                  <label htmlFor=\"react\">React</label>\n                </div>\n                <div class=\"selection__input vue\">\n                  <input class=\"vue__input\" disabled type=\"radio\" id=\"vue\" name=\"chosen_framework\" value=\"vue\" onInput={(e) => this.handleUserInput(e, 'framework')}/>\n                  <label class=\"vue__label\" htmlFor=\"vue\">Vue</label> (Soon)\n                </div>\n              </div>\n           \n\n              <div class=\"input__fields-wrapper\">\n                <ifx-text-field required={true} onInput={(e) => this.handleUserInput(e, 'name')} size=\"m\" icon=\"c-info-16\" placeholder=\"Your repository name\">Repository Name</ifx-text-field>\n\n                <ifx-text-field required={true} size=\"m\" icon=\"c-info-16\" onInput={(e) => this.handleUserInput(e, 'desc')} placeholder=\"Your repository description\">Repository Description</ifx-text-field>\n\n                <ifx-button fullWidth={true} onClick={() => this.submitUserData()} variant='primary'>Generate template</ifx-button>\n              </div>\n              \n            </div>}\n          </div>}\n        </div>\n      );\n  }\n}"],"version":3}

package/dist/components/{p-6758b716.js → p-bdb7df27.js}

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-e27586b6.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-2d825ea9.js';
 import { c as classNames } from './p-5cdc6210.js';
-import { d as defineCustomElement$1 } from './p-4cd3a589.js';
+import { d as defineCustomElement$1 } from './p-72255c85.js';
 
 const searchFieldCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:flex}.search-field{box-sizing:border-box;background-color:#FFFFFF;width:100%;font-family:var(--ifx-font-family)}.search-field .search-field__wrapper{box-sizing:border-box;height:40px;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;padding:8px 16px;gap:12px;flex:none;order:0;align-self:stretch;flex-grow:0;position:relative;width:100%;outline:none;color:#8D8786}.search-field .search-field__wrapper.focused{border:1px solid #0A8276}.search-field .search-field__wrapper.focused ifx-icon{color:#575352}.search-field .search-field__wrapper.search-field__wrapper-s{height:36px}.search-field .search-field__wrapper:hover:not(.focused,:focus){border:1px solid #3C3A39}.search-field .search-field__wrapper:focus{outline:none;border:1px solid #0A8276}.search-field .search-field__wrapper .delete-icon{right:12px;cursor:pointer}.search-field .search-field__wrapper input[type=text]{font-style:normal;font-weight:400;font-size:16px;color:#8D8786;border:none;width:100%;outline:none;height:16px}.search-field .search-field__wrapper input[type=text]:focus{outline:none;color:#1d1d1d}.search-field .search-field__wrapper input[type=text]:disabled{background-color:#EEEDED}.search-field .search-field__wrapper:has(input[disabled]){background-color:#EEEDED}";
 const IfxSearchFieldStyle0 = searchFieldCss;
@@ -102,4 +102,4 @@ function defineCustomElement() {
 
 export { SearchField as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-6758b716.js.map
+//# sourceMappingURL=p-bdb7df27.js.map

package/dist/components/{p-6758b716.js.map → p-bdb7df27.js.map}

@@ -1 +1 @@
-{"file":"p-6758b716.js","mappings":"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","names":[],"sources":["src/components/search-field/search-field.scss?tag=ifx-search-field&encapsulation=shadow","src/components/search-field/search-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.search-field {\n  box-sizing: border-box;\n  background-color: tokens.$ifxColorBaseWhite;\n  width: 100%;\n  font-family: var(--ifx-font-family);\n\n\n  .search-field__wrapper {\n    box-sizing: border-box;\n    height: tokens.$ifxSize500;\n    display: flex;\n    align-items: center;\n    border: 1px solid #8D8786;\n    border-radius: tokens.$ifxBorderRadius12;\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    gap: tokens.$ifxSpace150;\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 0;\n    position: relative;\n    width: 100%;\n    outline: none;\n    color: tokens.$ifxColorEngineering400;\n\n    &.focused {\n      border: 1px solid tokens.$ifxColorOcean500;\n\n      & ifx-icon {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    &.search-field__wrapper-s {\n      height: 36px;\n    }\n\n\n    &:hover:not(.focused, :focus) {\n      border: 1px solid #3C3A39;\n    }\n\n    &:focus {\n      outline: none;\n      border: 1px solid #0A8276;\n    }\n\n\n    .delete-icon {\n      right: 12px;\n      cursor: pointer;\n    }\n\n    input[type='text'] {\n      font-style: normal;\n      font-weight: 400;\n      font-size: 16px;\n      //line-height: 24px;\n      color: #8D8786;\n      border: none;\n      width: 100%;\n      outline: none;\n      //height: 100%;\n      height: 16px;\n\n      &:focus {\n        outline: none;\n        color: #1d1d1d;\n      }\n\n      &:disabled {\n        background-color: #EEEDED;\n      }\n    }\n\n    &:has(input[disabled]) {\n      background-color: #EEEDED;\n    }\n  }\n}","import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n\n@Component({\n  tag: 'ifx-search-field',\n  styleUrl: 'search-field.scss',\n  shadow: true\n})\n\n\nexport class SearchField {\n  private inputElement: HTMLInputElement;\n  @Prop({ mutable: true }) value: string = '';\n\n  @Event() ifxInput: EventEmitter<String>;\n  @State() insideDropdown: boolean = false;\n\n  @Prop() showDeleteIcon: boolean = false;\n  @State() showDeleteIconInternalState: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() size: string = 'l';\n  @State() isFocused: boolean = false;\n  @Prop() placeholder: string = \"Search...\";\n  @Prop() maxlength?: number = null;  \n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.inputElement)) {\n      this.isFocused = false;\n    }\n  }\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n\n  handleInput = () => {\n    const query = this.inputElement.value;\n    this.value = query; // update the value property when input changes\n    this.ifxInput.emit(this.value);\n  };\n\n  handleDelete = () => {\n    this.inputElement.value = '';\n    this.value = \"\";\n    this.ifxInput.emit(this.value);\n  }\n\n  focusInput() {\n    this.inputElement.focus();\n    this.isFocused = true;\n  }\n  \n\n\n\n  componentWillUpdate() {\n    if (this.value !== \"\") {\n      this.showDeleteIconInternalState = true;\n    } else this.showDeleteIconInternalState = false;\n  }\n\n  render() {\n    return (\n      <div aria-label=\"a search field for user input\" aria-disabled={this.disabled} aria-value={this.value} class='search-field'>\n        <div class={this.getWrapperClassNames()}\n          tabindex={1}\n          onFocus={() => this.focusInput()}\n          onClick={() => this.focusInput()}\n        >\n          <ifx-icon icon=\"search-16\" class=\"search-icon\"></ifx-icon>\n          <input\n            ref={(el) => (this.inputElement = el)}\n            type=\"text\"\n            onInput={() => this.handleInput()}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            maxlength={this.maxlength}\n            value={this.value} // bind the value property to input element\n          />\n          {this.showDeleteIcon && this.showDeleteIconInternalState ? (\n            <ifx-icon icon=\"cremove16\" class=\"delete-icon\" onClick={this.handleDelete}>\n            </ifx-icon>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"search-field__wrapper-s\"\n      : \"\";\n  }\n\n\n  getWrapperClassNames() {\n    return classNames(\n      `search-field__wrapper`,\n      `search-field__wrapper ${this.getSizeClass()}`,\n      `${this.isFocused ? 'focused' : \"\"}`\n    );\n  }\n}"],"version":3}
+{"file":"p-bdb7df27.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,81CAA81C,CAAC;AACt3C,6BAAe,cAAc;;MCWhB,WAAW;IAPxB;;;;;QAS2B,UAAK,GAAW,EAAE,CAAC;QAGnC,mBAAc,GAAY,KAAK,CAAC;QAEjC,mBAAc,GAAY,KAAK,CAAC;QAC/B,gCAA2B,GAAY,KAAK,CAAC;QAC9C,aAAQ,GAAY,KAAK,CAAC;QAC1B,SAAI,GAAW,GAAG,CAAC;QAClB,cAAS,GAAY,KAAK,CAAC;QAC5B,gBAAW,GAAW,WAAW,CAAC;QAClC,cAAS,GAAY,IAAI,CAAC;QAkBlC,gBAAW,GAAG;YACZ,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;YACtC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAChC,CAAC;QAEF,iBAAY,GAAG;YACb,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,EAAE,CAAC;YAC7B,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAChB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAChC,CAAA;KAyDF;IAlFC,kBAAkB,CAAC,KAAiB;QAClC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;QAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;YACrC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;SACxB;KACF;IAGD,YAAY,CAAC,QAAgB;QAC3B,IAAI,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;YACxC,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,QAAQ,CAAC;SACpC;KACF;IAeD,UAAU;QACR,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;KACvB;IAKD,mBAAmB;QACjB,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE;YACrB,IAAI,CAAC,2BAA2B,GAAG,IAAI,CAAC;SACzC;;YAAM,IAAI,CAAC,2BAA2B,GAAG,KAAK,CAAC;KACjD;IAED,MAAM;QACJ,QACE,0EAAgB,+BAA+B,mBAAgB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,KAAK,EAAE,KAAK,EAAC,cAAc,IACxH,4DAAK,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,EACrC,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EAChC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,IAEhC,iEAAU,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,aAAa,GAAY,EAC1D,8DACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,EACD,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,2BAA2B,IACtD,gBAAU,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,GAC9D,IACT,IAAI,CACJ,CACF,EACN;KACH;IAED,YAAY;QACV,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG;cACzB,yBAAyB;cACzB,EAAE,CAAC;KACR;IAGD,oBAAoB;QAClB,OAAO,UAAU,CACf,uBAAuB,EACvB,yBAAyB,IAAI,CAAC,YAAY,EAAE,EAAE,EAC9C,GAAG,IAAI,CAAC,SAAS,GAAG,SAAS,GAAG,EAAE,EAAE,CACrC,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/search-field/search-field.scss?tag=ifx-search-field&encapsulation=shadow","src/components/search-field/search-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.search-field {\n  box-sizing: border-box;\n  background-color: tokens.$ifxColorBaseWhite;\n  width: 100%;\n  font-family: var(--ifx-font-family);\n\n\n  .search-field__wrapper {\n    box-sizing: border-box;\n    height: tokens.$ifxSize500;\n    display: flex;\n    align-items: center;\n    border: 1px solid #8D8786;\n    border-radius: tokens.$ifxBorderRadius12;\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    gap: tokens.$ifxSpace150;\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 0;\n    position: relative;\n    width: 100%;\n    outline: none;\n    color: tokens.$ifxColorEngineering400;\n\n    &.focused {\n      border: 1px solid tokens.$ifxColorOcean500;\n\n      & ifx-icon {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    &.search-field__wrapper-s {\n      height: 36px;\n    }\n\n\n    &:hover:not(.focused, :focus) {\n      border: 1px solid #3C3A39;\n    }\n\n    &:focus {\n      outline: none;\n      border: 1px solid #0A8276;\n    }\n\n\n    .delete-icon {\n      right: 12px;\n      cursor: pointer;\n    }\n\n    input[type='text'] {\n      font-style: normal;\n      font-weight: 400;\n      font-size: 16px;\n      //line-height: 24px;\n      color: #8D8786;\n      border: none;\n      width: 100%;\n      outline: none;\n      //height: 100%;\n      height: 16px;\n\n      &:focus {\n        outline: none;\n        color: #1d1d1d;\n      }\n\n      &:disabled {\n        background-color: #EEEDED;\n      }\n    }\n\n    &:has(input[disabled]) {\n      background-color: #EEEDED;\n    }\n  }\n}","import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n\n@Component({\n  tag: 'ifx-search-field',\n  styleUrl: 'search-field.scss',\n  shadow: true\n})\n\n\nexport class SearchField {\n  private inputElement: HTMLInputElement;\n  @Prop({ mutable: true }) value: string = '';\n\n  @Event() ifxInput: EventEmitter<String>;\n  @State() insideDropdown: boolean = false;\n\n  @Prop() showDeleteIcon: boolean = false;\n  @State() showDeleteIconInternalState: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() size: string = 'l';\n  @State() isFocused: boolean = false;\n  @Prop() placeholder: string = \"Search...\";\n  @Prop() maxlength?: number = null;  \n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.inputElement)) {\n      this.isFocused = false;\n    }\n  }\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n\n  handleInput = () => {\n    const query = this.inputElement.value;\n    this.value = query; // update the value property when input changes\n    this.ifxInput.emit(this.value);\n  };\n\n  handleDelete = () => {\n    this.inputElement.value = '';\n    this.value = \"\";\n    this.ifxInput.emit(this.value);\n  }\n\n  focusInput() {\n    this.inputElement.focus();\n    this.isFocused = true;\n  }\n  \n\n\n\n  componentWillUpdate() {\n    if (this.value !== \"\") {\n      this.showDeleteIconInternalState = true;\n    } else this.showDeleteIconInternalState = false;\n  }\n\n  render() {\n    return (\n      <div aria-label=\"a search field for user input\" aria-disabled={this.disabled} aria-value={this.value} class='search-field'>\n        <div class={this.getWrapperClassNames()}\n          tabindex={1}\n          onFocus={() => this.focusInput()}\n          onClick={() => this.focusInput()}\n        >\n          <ifx-icon icon=\"search-16\" class=\"search-icon\"></ifx-icon>\n          <input\n            ref={(el) => (this.inputElement = el)}\n            type=\"text\"\n            onInput={() => this.handleInput()}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            maxlength={this.maxlength}\n            value={this.value} // bind the value property to input element\n          />\n          {this.showDeleteIcon && this.showDeleteIconInternalState ? (\n            <ifx-icon icon=\"cremove16\" class=\"delete-icon\" onClick={this.handleDelete}>\n            </ifx-icon>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"search-field__wrapper-s\"\n      : \"\";\n  }\n\n\n  getWrapperClassNames() {\n    return classNames(\n      `search-field__wrapper`,\n      `search-field__wrapper ${this.getSizeClass()}`,\n      `${this.isFocused ? 'focused' : \"\"}`\n    );\n  }\n}"],"version":3}

package/dist/components/{p-b73ca128.js → p-cfa335eb.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-e27586b6.js';
-import { d as defineCustomElement$1 } from './p-4cd3a589.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-2d825ea9.js';
+import { d as defineCustomElement$1 } from './p-72255c85.js';
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -7382,4 +7382,4 @@ function defineCustomElement() {
 
 export { Choices as C, defineCustomElement as d };
 
-//# sourceMappingURL=p-b73ca128.js.map
+//# sourceMappingURL=p-cfa335eb.js.map