npm - @infineon/infineon-design-system-stencil - Versions diffs - 34.7.1--canary.1904.2c0f129feeb3726bc3fd2ea34c4e151914bd0717.0 → 34.7.1--canary.1905.5d02786fb9437b55bb2c098c3ac2ed346897e196.0 - Mend

@infineon/infineon-design-system-stencil 34.7.1--canary.1904.2c0f129feeb3726bc3fd2ea34c4e151914bd0717.0 → 34.7.1--canary.1905.5d02786fb9437b55bb2c098c3ac2ed346897e196.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (121) hide show

package/dist/components/{p-9e143db8.js → p-be981058.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { d as defineCustomElement$3 } from './p-11e95622.js';
-import { d as defineCustomElement$2 } from './p-1a5145f0.js';
-import { d as defineCustomElement$1 } from './p-146f815d.js';
+import { d as defineCustomElement$3 } from './p-41f4c858.js';
+import { d as defineCustomElement$2 } from './p-2a734d5f.js';
+import { d as defineCustomElement$1 } from './p-b58bc16c.js';
 const paginationCss = "@charset \"UTF-8\";:root{--ifx-font-family:\"Source Sans 3\", \"Arial, 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;
@@ -177,4 +177,4 @@ function defineCustomElement() {
 export { Pagination as P, defineCustomElement as d };
-//# sourceMappingURL=p-9e143db8.js.map
+//# sourceMappingURL=p-be981058.js.map

package/dist/components/{p-9e143db8.js.map → p-be981058.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-9e143db8.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); // tokens.$ifxFontFamilyBody;\n\n\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@Component({\n tag: 'ifx-pagination',\n styleUrl: 'pagination.scss',\n shadow: true\n})\nexport class Pagination {\n @Element() el: HTMLElement;\n @Event() ifxPageChange: EventEmitter;\n @Prop() currentPage: number = 1;\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 @State() visiblePages: (number \| string)[] = [];\n\n private CLASS_DISABLED = \"disabled\";\n private CLASS_ACTIVE = \"active\";\n private prevInternalPage: number;\n\n @Listen('ifxSelect')\n setItemsPerPage(e: CustomEvent) {\n const selectedValue = e.detail?.value \|\| e.detail?.label; \n const newItemsPerPage = parseInt(selectedValue) \|\| 10;\n\n if (newItemsPerPage === this.internalItemsPerPage) {\n return;\n }\n\n this.internalItemsPerPage = newItemsPerPage;\n this.internalPage = 1; \n this.calculateNumberOfPages();\n this.updateVisiblePages();\n this.handleEventEmission();\n }\n\n componentDidLoad() {\n this.initPagination();\n }\n\n updateVisiblePages() {\n const buffer = 2;\n const totalPages = this.numberOfPages.length;\n const current = this.internalPage;\n let pages: (number \| string)[] = [];\n \n if (totalPages <= 5) {\n pages = [...this.numberOfPages];\n } else {\n pages.push(1);\n \n if (current > buffer + 1) pages.push('...');\n \n let start = Math.max(2, current - buffer);\n let end = Math.min(totalPages - 1, current + buffer);\n \n if (current <= buffer + 1) end = buffer * 2 + 1;\n if (current >= totalPages - buffer) start = totalPages - buffer * 2;\n \n for (let i = start; i <= end; i++) pages.push(i);\n \n if (current < totalPages - buffer) pages.push('...');\n pages.push(totalPages);\n }\n \n this.visiblePages = [...new Set(pages)];\n }\n\n calculateNumberOfPages() {\n const totalPages = Math.ceil(this.total / this.internalItemsPerPage);\n this.numberOfPages = Array.from({ length: totalPages }, (_, i) => i + 1);\n this.internalPage = Math.max(1, Math.min(this.currentPage, totalPages));\n }\n\n filterOptionsArray() { \n const items = typeof this.itemsPerPage === 'string' ? \n JSON.parse(this.itemsPerPage) : this.itemsPerPage;\n this.filteredItemsPerPage = items.map(item => ({\n ...item,\n label: item.label \|\| item.value\n }));\n }\n\n componentWillLoad() {\n this.calculateNumberOfPages();\n this.filterOptionsArray();\n this.updateVisiblePages();\n }\n\n componentWillUpdate() { \n if (this.prevInternalPage !== this.internalPage) {\n this.updateVisiblePages();\n this.prevInternalPage = this.internalPage;\n }\n }\n\n componentDidUpdate() {\n this.initPagination();\n }\n\n handleEventEmission() {\n this.ifxPageChange.emit({\n currentPage: this.internalPage,\n totalPages: this.numberOfPages.length,\n itemsPerPage: this.internalItemsPerPage\n });\n }\n\n initPagination() {\n const pagination = this.el.shadowRoot.querySelector('.pagination');\n if (!pagination) return;\n\n const updateButtons = () => {\n const prev = pagination.querySelector<HTMLButtonElement>('.prev');\n const next = pagination.querySelector<HTMLButtonElement>('.next');\n if (prev) {\n prev.disabled = this.internalPage === 1;\n prev.classList.toggle(this.CLASS_DISABLED, this.internalPage === 1);\n }\n if (next) {\n next.disabled = this.internalPage === this.numberOfPages.length;\n next.classList.toggle(this.CLASS_DISABLED, this.internalPage === this.numberOfPages.length);\n }\n };\n\n pagination.querySelectorAll('li').forEach(li => {\n li.removeEventListener('click', this.handlePageClick);\n li.addEventListener('click', this.handlePageClick);\n });\n\n updateButtons();\n }\n\n private handlePageClick = (e: Event) => {\n const li = e.currentTarget as HTMLLIElement;\n const page = parseInt(li.dataset.page);\n if (!isNaN(page)) this.changePage(page);\n };\n\n changePage(newPage: number) {\n newPage = Math.max(1, Math.min(newPage, this.numberOfPages.length));\n if (newPage === this.internalPage) return;\n \n this.internalPage = newPage;\n this.handleEventEmission();\n this.initPagination();\n }\n\n render() {\n return (\n <div 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 placeholder='false'\n show-search='false'\n value={undefined}\n disabled={false}\n error={false}\n size=\"s\"\n options={this.filteredItemsPerPage}\n placeholder-value=\"Select\"\n ></ifx-select>\n </div>\n </div>\n \n <div class=\"items__total-wrapper\">\n <div class=\"pagination\">\n <ifx-icon-button\n class=\"prev\"\n icon=\"arrow-left-24\"\n onClick={() => this.changePage(this.internalPage - 1)}\n ></ifx-icon-button>\n \n <ol>\n {this.visiblePages.map((page, i) => typeof page === 'number' ? (\n <li \n key={`page-${page}`}\n class={{ [this.CLASS_ACTIVE]: page === this.internalPage }}\n data-page={page}\n >\n <a href=\"javascript:void(0)\">{page}</a>\n </li>\n ) : (\n <li class=\"ellipsis\" key={`ellipsis-${i}`}>\n <span>...</span>\n </li>\n ))}\n </ol>\n \n <ifx-icon-button\n class=\"next\"\n icon=\"arrow-right-24\"\n onClick={() => this.changePage(this.internalPage + 1)}\n ></ifx-icon-button>\n </div>\n </div>\n </div>\n );\n }\n}"],"version":3}
1	+ {"file":"p-be981058.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); // tokens.$ifxFontFamilyBody;\n\n\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@Component({\n tag: 'ifx-pagination',\n styleUrl: 'pagination.scss',\n shadow: true\n})\nexport class Pagination {\n @Element() el: HTMLElement;\n @Event() ifxPageChange: EventEmitter;\n @Prop() currentPage: number = 1;\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 @State() visiblePages: (number \| string)[] = [];\n\n private CLASS_DISABLED = \"disabled\";\n private CLASS_ACTIVE = \"active\";\n private prevInternalPage: number;\n\n @Listen('ifxSelect')\n setItemsPerPage(e: CustomEvent) {\n const selectedValue = e.detail?.value \|\| e.detail?.label; \n const newItemsPerPage = parseInt(selectedValue) \|\| 10;\n\n if (newItemsPerPage === this.internalItemsPerPage) {\n return;\n }\n\n this.internalItemsPerPage = newItemsPerPage;\n this.internalPage = 1; \n this.calculateNumberOfPages();\n this.updateVisiblePages();\n this.handleEventEmission();\n }\n\n componentDidLoad() {\n this.initPagination();\n }\n\n updateVisiblePages() {\n const buffer = 2;\n const totalPages = this.numberOfPages.length;\n const current = this.internalPage;\n let pages: (number \| string)[] = [];\n \n if (totalPages <= 5) {\n pages = [...this.numberOfPages];\n } else {\n pages.push(1);\n \n if (current > buffer + 1) pages.push('...');\n \n let start = Math.max(2, current - buffer);\n let end = Math.min(totalPages - 1, current + buffer);\n \n if (current <= buffer + 1) end = buffer * 2 + 1;\n if (current >= totalPages - buffer) start = totalPages - buffer * 2;\n \n for (let i = start; i <= end; i++) pages.push(i);\n \n if (current < totalPages - buffer) pages.push('...');\n pages.push(totalPages);\n }\n \n this.visiblePages = [...new Set(pages)];\n }\n\n calculateNumberOfPages() {\n const totalPages = Math.ceil(this.total / this.internalItemsPerPage);\n this.numberOfPages = Array.from({ length: totalPages }, (_, i) => i + 1);\n this.internalPage = Math.max(1, Math.min(this.currentPage, totalPages));\n }\n\n filterOptionsArray() { \n const items = typeof this.itemsPerPage === 'string' ? \n JSON.parse(this.itemsPerPage) : this.itemsPerPage;\n this.filteredItemsPerPage = items.map(item => ({\n ...item,\n label: item.label \|\| item.value\n }));\n }\n\n componentWillLoad() {\n this.calculateNumberOfPages();\n this.filterOptionsArray();\n this.updateVisiblePages();\n }\n\n componentWillUpdate() { \n if (this.prevInternalPage !== this.internalPage) {\n this.updateVisiblePages();\n this.prevInternalPage = this.internalPage;\n }\n }\n\n componentDidUpdate() {\n this.initPagination();\n }\n\n handleEventEmission() {\n this.ifxPageChange.emit({\n currentPage: this.internalPage,\n totalPages: this.numberOfPages.length,\n itemsPerPage: this.internalItemsPerPage\n });\n }\n\n initPagination() {\n const pagination = this.el.shadowRoot.querySelector('.pagination');\n if (!pagination) return;\n\n const updateButtons = () => {\n const prev = pagination.querySelector<HTMLButtonElement>('.prev');\n const next = pagination.querySelector<HTMLButtonElement>('.next');\n if (prev) {\n prev.disabled = this.internalPage === 1;\n prev.classList.toggle(this.CLASS_DISABLED, this.internalPage === 1);\n }\n if (next) {\n next.disabled = this.internalPage === this.numberOfPages.length;\n next.classList.toggle(this.CLASS_DISABLED, this.internalPage === this.numberOfPages.length);\n }\n };\n\n pagination.querySelectorAll('li').forEach(li => {\n li.removeEventListener('click', this.handlePageClick);\n li.addEventListener('click', this.handlePageClick);\n });\n\n updateButtons();\n }\n\n private handlePageClick = (e: Event) => {\n const li = e.currentTarget as HTMLLIElement;\n const page = parseInt(li.dataset.page);\n if (!isNaN(page)) this.changePage(page);\n };\n\n changePage(newPage: number) {\n newPage = Math.max(1, Math.min(newPage, this.numberOfPages.length));\n if (newPage === this.internalPage) return;\n \n this.internalPage = newPage;\n this.handleEventEmission();\n this.initPagination();\n }\n\n render() {\n return (\n <div 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 placeholder='false'\n show-search='false'\n value={undefined}\n disabled={false}\n error={false}\n size=\"s\"\n options={this.filteredItemsPerPage}\n placeholder-value=\"Select\"\n ></ifx-select>\n </div>\n </div>\n \n <div class=\"items__total-wrapper\">\n <div class=\"pagination\">\n <ifx-icon-button\n class=\"prev\"\n icon=\"arrow-left-24\"\n onClick={() => this.changePage(this.internalPage - 1)}\n ></ifx-icon-button>\n \n <ol>\n {this.visiblePages.map((page, i) => typeof page === 'number' ? (\n <li \n key={`page-${page}`}\n class={{ [this.CLASS_ACTIVE]: page === this.internalPage }}\n data-page={page}\n >\n <a href=\"javascript:void(0)\">{page}</a>\n </li>\n ) : (\n <li class=\"ellipsis\" key={`ellipsis-${i}`}>\n <span>...</span>\n </li>\n ))}\n </ol>\n \n <ifx-icon-button\n class=\"next\"\n icon=\"arrow-right-24\"\n onClick={() => this.changePage(this.internalPage + 1)}\n ></ifx-icon-button>\n </div>\n </div>\n </div>\n );\n }\n}"],"version":3}

package/dist/components/{p-69b9d3fb.js → p-ecc087d0.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-f8e6a4ef.js';
-import { d as defineCustomElement$2 } from './p-11e95622.js';
+import { d as defineCustomElement$2 } from './p-41f4c858.js';
 import { d as defineCustomElement$1 } from './p-53d4339c.js';
 const notificationCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.ifx-notification__wrapper{display:flex;flex-direction:row;align-items:center;padding:8px 16px;background-color:#FFFFFF;font-family:var(--ifx-font-family);color:#1D1D1D;border:1px solid #EEEDED}.ifx-notification__wrapper.ifx-notification__wrapper--success{border-left:4px solid #4CA460}.ifx-notification__wrapper.ifx-notification__wrapper--success .ifx-notification__icon{color:#4CA460}.ifx-notification__wrapper.ifx-notification__wrapper--locked{border-left:4px solid #E16B25}.ifx-notification__wrapper.ifx-notification__wrapper--locked .ifx-notification__icon{color:#E16B25}.ifx-notification__wrapper.ifx-notification__wrapper--error{border-left:4px solid #CD002F}.ifx-notification__wrapper.ifx-notification__wrapper--error .ifx-notification__icon{color:#CD002F}.ifx-notification__wrapper.ifx-notification__wrapper--neutral{border-left:4px solid #0A8276}.ifx-notification__wrapper.ifx-notification__wrapper--neutral .ifx-notification__icon{color:#0A8276}.ifx-notification__wrapper .ifx-notification__icon{margin-right:8px;display:flex;align-self:center}.ifx-notification__wrapper .ifx-notification__body{display:flex;flex-direction:row;flex-grow:1;font-size:0.875rem}.ifx-notification__wrapper .ifx-notification__body .ifx-notification__slot{flex-grow:1;display:inline-flex;align-items:center}.ifx-notification__wrapper .ifx-notification__link{font-size:0.875rem}@media (max-width: 576px){.ifx-notification__wrapper .ifx-notification__icon{align-self:flex-start}.ifx-notification__wrapper .ifx-notification__body{flex-direction:column}.ifx-notification__wrapper .ifx-notification__link{margin-top:8px}}";
@@ -65,4 +65,4 @@ function defineCustomElement() {
 export { Notification as N, defineCustomElement as d };
-//# sourceMappingURL=p-69b9d3fb.js.map
+//# sourceMappingURL=p-ecc087d0.js.map

package/dist/components/{p-69b9d3fb.js.map → p-ecc087d0.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~69b9d3fb~~.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,uoDAAuoD,CAAC;AAChqD,8BAAe,eAAe;;MCQjB,YAAY;IALzB;;;;QAOU,YAAO,GAAwB,SAAS,CAAC;QAGzC,eAAU,GAAW,QAAQ,CAAC;KA0CvC;IAvCS,YAAY;QAClB,QAAQ,IAAI,CAAC,OAAO;YAClB,KAAK,SAAS;gBACZ,OAAO,oCAAoC,CAAC;YAC9C,KAAK,QAAQ;gBACX,OAAO,mCAAmC,CAAC;YAC7C,KAAK,OAAO;gBACV,OAAO,kCAAkC,CAAC;YAC5C,KAAK,SAAS;gBACZ,OAAO,oCAAoC,CAAC;YAC9C;gBACE,OAAO,oCAAoC,CAAC;SAC/C;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,4BAA4B,GAAG,IAAI,CAAC,YAAY,EAAE,IAC5D,4DAAK,KAAK,EAAC,wBAAwB,IACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAClC,EACN,4DAAK,KAAK,EAAC,wBAAwB,IACjC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,8DAAO,CACH,EACJ,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAChC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,IACnD,IAAI,CAAC,QAAQ,EAAC,iEAAU,IAAI,EAAC,gBAAgB,GACrC,CACA,CACP,CAEF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/notification/notification.scss?tag=ifx-notification&encapsulation=shadow","src/components/notification/notification.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.ifx-notification__wrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n\n background-color: tokens.$ifxColorBaseWhite;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n color: tokens.$ifxColorBaseBlack;\n\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n\n &.ifx-notification__wrapper--success {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorGreen500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorGreen500;\n }\n }\n\n &.ifx-notification__wrapper--locked {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOrange500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorOrange500;\n }\n }\n\n &.ifx-notification__wrapper--error {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorRed500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorRed500;\n }\n }\n\n &.ifx-notification__wrapper--neutral{\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOcean500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorOcean500;\n }\n }\n\n & .ifx-notification__icon {\n margin-right: tokens.$ifxSpace100;\n display: flex;\n align-self: center;\n }\n\n & .ifx-notification__body {\n display: flex;\n flex-direction: row;\n flex-grow: 1;\n font-size: tokens.$ifxFontSizeS;\n\n & .ifx-notification__slot {\n flex-grow: 1;\n display: inline-flex;\n align-items: center;\n }\n }\n\n & .ifx-notification__link {\n font-size: tokens.$ifxFontSizeS;\n }\n\n @media (max-width: tokens.$ifxBreakpointXs) {\n & .ifx-notification__icon {\n align-self: flex-start;\n }\n\n & .ifx-notification__body {\n flex-direction: column;\n }\n\n & .ifx-notification__link {\n margin-top: tokens.$ifxSpace100;\n }\n }\n}","import { Component, h, Host, Prop } from '@stencil/core';\n \nexport type NotificationVariant = 'success' \| 'locked' \| 'error' \| 'neutral';\n\n@Component({\n tag: 'ifx-notification',\n styleUrl: 'notification.scss',\n shadow: true\n})\nexport class Notification {\n @Prop() icon: string;\n @Prop() variant: NotificationVariant = 'success';\n @Prop() linkText: string; \n @Prop() linkHref: string;\n @Prop() linkTarget: string = '_blank';\n\n\n private getClassName(): string {\n switch (this.variant) {\n case 'success':\n return 'ifx-notification__wrapper--success';\n case 'locked':\n return 'ifx-notification__wrapper--locked';\n case 'error':\n return 'ifx-notification__wrapper--error';\n case 'neutral':\n return 'ifx-notification__wrapper--neutral';\n default:\n return 'ifx-notification__wrapper--success';\n }\n }\n\n render() {\n return (\n <Host>\n <div class={\"ifx-notification__wrapper \" + this.getClassName()}>\n <div class=\"ifx-notification__icon\">\n <ifx-icon icon={this.icon}></ifx-icon>\n </div>\n <div class=\"ifx-notification__body\">\n <div class=\"ifx-notification__slot\">\n <slot/>\n </div>\n { this.linkText && this.linkHref && \n <div class=\"ifx-notification__link\">\n <ifx-link href={this.linkHref} target={this.linkTarget}>\n {this.linkText}<ifx-icon icon=\"arrow-right-16\">\n </ifx-icon>\n </ifx-link>\n </div>\n }\n </div>\n </div>\n </Host>\n );\n }\n}"],"version":3}
1	+ {"file":"p-ecc087d0.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,uoDAAuoD,CAAC;AAChqD,8BAAe,eAAe;;MCQjB,YAAY;IALzB;;;;QAOU,YAAO,GAAwB,SAAS,CAAC;QAGzC,eAAU,GAAW,QAAQ,CAAC;KA0CvC;IAvCS,YAAY;QAClB,QAAQ,IAAI,CAAC,OAAO;YAClB,KAAK,SAAS;gBACZ,OAAO,oCAAoC,CAAC;YAC9C,KAAK,QAAQ;gBACX,OAAO,mCAAmC,CAAC;YAC7C,KAAK,OAAO;gBACV,OAAO,kCAAkC,CAAC;YAC5C,KAAK,SAAS;gBACZ,OAAO,oCAAoC,CAAC;YAC9C;gBACE,OAAO,oCAAoC,CAAC;SAC/C;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,4BAA4B,GAAG,IAAI,CAAC,YAAY,EAAE,IAC5D,4DAAK,KAAK,EAAC,wBAAwB,IACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAClC,EACN,4DAAK,KAAK,EAAC,wBAAwB,IACjC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,8DAAO,CACH,EACJ,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAChC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,IACnD,IAAI,CAAC,QAAQ,EAAC,iEAAU,IAAI,EAAC,gBAAgB,GACrC,CACA,CACP,CAEF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/notification/notification.scss?tag=ifx-notification&encapsulation=shadow","src/components/notification/notification.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.ifx-notification__wrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n\n background-color: tokens.$ifxColorBaseWhite;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n color: tokens.$ifxColorBaseBlack;\n\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n\n &.ifx-notification__wrapper--success {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorGreen500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorGreen500;\n }\n }\n\n &.ifx-notification__wrapper--locked {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOrange500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorOrange500;\n }\n }\n\n &.ifx-notification__wrapper--error {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorRed500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorRed500;\n }\n }\n\n &.ifx-notification__wrapper--neutral{\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOcean500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorOcean500;\n }\n }\n\n & .ifx-notification__icon {\n margin-right: tokens.$ifxSpace100;\n display: flex;\n align-self: center;\n }\n\n & .ifx-notification__body {\n display: flex;\n flex-direction: row;\n flex-grow: 1;\n font-size: tokens.$ifxFontSizeS;\n\n & .ifx-notification__slot {\n flex-grow: 1;\n display: inline-flex;\n align-items: center;\n }\n }\n\n & .ifx-notification__link {\n font-size: tokens.$ifxFontSizeS;\n }\n\n @media (max-width: tokens.$ifxBreakpointXs) {\n & .ifx-notification__icon {\n align-self: flex-start;\n }\n\n & .ifx-notification__body {\n flex-direction: column;\n }\n\n & .ifx-notification__link {\n margin-top: tokens.$ifxSpace100;\n }\n }\n}","import { Component, h, Host, Prop } from '@stencil/core';\n \nexport type NotificationVariant = 'success' \| 'locked' \| 'error' \| 'neutral';\n\n@Component({\n tag: 'ifx-notification',\n styleUrl: 'notification.scss',\n shadow: true\n})\nexport class Notification {\n @Prop() icon: string;\n @Prop() variant: NotificationVariant = 'success';\n @Prop() linkText: string; \n @Prop() linkHref: string;\n @Prop() linkTarget: string = '_blank';\n\n\n private getClassName(): string {\n switch (this.variant) {\n case 'success':\n return 'ifx-notification__wrapper--success';\n case 'locked':\n return 'ifx-notification__wrapper--locked';\n case 'error':\n return 'ifx-notification__wrapper--error';\n case 'neutral':\n return 'ifx-notification__wrapper--neutral';\n default:\n return 'ifx-notification__wrapper--success';\n }\n }\n\n render() {\n return (\n <Host>\n <div class={\"ifx-notification__wrapper \" + this.getClassName()}>\n <div class=\"ifx-notification__icon\">\n <ifx-icon icon={this.icon}></ifx-icon>\n </div>\n <div class=\"ifx-notification__body\">\n <div class=\"ifx-notification__slot\">\n <slot/>\n </div>\n { this.linkText && this.linkHref && \n <div class=\"ifx-notification__link\">\n <ifx-link href={this.linkHref} target={this.linkTarget}>\n {this.linkText}<ifx-icon icon=\"arrow-right-16\">\n </ifx-icon>\n </ifx-link>\n </div>\n }\n </div>\n </div>\n </Host>\n );\n }\n}"],"version":3}

package/dist/components/{p-5f97952a.js → p-ecccac95.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { d as defineCustomElement$2 } from './p-3ec421ea.js';
-import { d as defineCustomElement$1 } from './p-11e95622.js';
+import { d as defineCustomElement$2 } from './p-75133304.js';
+import { d as defineCustomElement$1 } from './p-41f4c858.js';
 const chipItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.chip-item{display:flex;align-items:center;gap:8px;padding:8px 16px;user-select:none;transition:all 100ms ease;transition-property:background, color}.chip-item:hover{cursor:pointer;background-color:#EEEDED}.chip-item:active{background-color:#BFBBBB}.chip-item:focus{outline:2px solid #0A8276}.chip-item.chip-item--large{font:400 1rem/1.5rem \"Source Sans 3\"}.chip-item.chip-item--small{font:400 0.875rem/1.25rem \"Source Sans 3\"}.chip-item.chip-item--selected{color:#0A8276}.chip-item.chip-item--selected .chip-item__selected-indicator{display:block}.chip-item__selected-indicator{display:none;margin-left:auto}";
 const IfxChipItemStyle0 = chipItemCss;
@@ -108,4 +108,4 @@ function defineCustomElement() {
 export { ChipItem as C, defineCustomElement as d };
-//# sourceMappingURL=p-5f97952a.js.map
+//# sourceMappingURL=p-ecccac95.js.map

package/dist/components/{p-5f97952a.js.map → p-ecccac95.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~5f97952a~~.js","mappings":"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","names":[],"sources":["src/components/chip/chip-item/chip-item.scss?tag=ifx-chip-item&encapsulation=shadow","src/components/chip/chip-item/chip-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.chip-item {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace100;\n \n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n \n user-select: none;\n \n transition: all 100ms ease;\n transition-property: background, color;\n \n &:hover {\n cursor: pointer;\n \n background-color: tokens.$ifxColorEngineering200;\n }\n \n &:active {\n background-color: tokens.$ifxColorEngineering300;\n }\n\n &:focus {\n outline: 2px solid tokens.$ifxColorOcean500;\n }\n \n &.chip-item--large {\n font: tokens.$ifxBodyBody03;\n }\n \n &.chip-item--small {\n font: tokens.$ifxBodyBody04;\n }\n\n &.chip-item--selected {\n color: tokens.$ifxColorOcean500;\n\n .chip-item__selected-indicator {\n display: block;\n }\n }\n}\n\n.chip-item__selected-indicator {\n display: none;\n \n margin-left: auto;\n}\n\n","import { h,\n Component,\n Element,\n Event,\n EventEmitter, \n Listen,\n Prop, \n Watch } from '@stencil/core';\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\n\n@Component({\ntag: 'ifx-chip-item',\nstyleUrl: 'chip-item.scss',\nshadow: true\n})\n\nexport class ChipItem {\n@Element() chipItem: HTMLIfxChipItemElement;\n\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\n\n@Prop() value: string = undefined;\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n@Listen('ifxChipItemSelect', { target: 'body' })\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\n if (this.chipState.variant === 'single') {\n const target = event.target as HTMLIfxChipItemElement;\n /* Also making sure chip items are from the same group (parent) while unselecting. /\n if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\n this.selected = false;\n }\n }\n} \n\n@Watch('selected')\nvalidateSelected(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n / Do not emit if ChipState does not allow. /\n if (this.chipState.emitIfxChipItemSelect){\n this.emitIfxChipItemSelectEvent();\n } else {\n this.chipState.emitIfxChipItemSelect = true;\n }\n }\n} \n\ngetItemLabel(): string {\n return this.chipItem.innerText as string;\n}\n\ntoggleItemSelection() {\n this.selected = !this.selected;\n}\n \n\nemitIfxChipItemSelectEvent(emitIfxChange: boolean = true) {\n this.ifxChipItemSelect.emit({ emitIfxChange: emitIfxChange,\n key: this.chipState.key,\n label: this.getItemLabel(), \n selected: this.selected, \n value: this.value });\n}\n\nhandleItemClick() {\n this.toggleItemSelection();\n}\n\nhandleItemKeyDown(event: KeyboardEvent) {\n if (event.code === 'Enter' \|\| event.code === 'Space') {\n this.toggleItemSelection();\n }\n}\n\nhandleSelectedState() {\n if (this.selected) {\n this.emitIfxChipItemSelectEvent(false);\n }\n}\n\n\ncomponentWillLoad() {\n / Propogating the selected state to the Chip (Parent) component if it is set. /\n this.handleSelectedState();\n}\n\nrender() {\n return (\n <div class={`chip-item chip-item--${this.chipState.size} \n chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \n tabIndex={0}\n onClick={() => {this.handleItemClick()}}\n onKeyDown={(e) => {this.handleItemKeyDown(e)}}\n role=\"option\"\n aria-selected={this.selected.toString()}> \n {/ Checkbox; renders only in 'multi' variant. /}\n { \n this.chipState.variant === 'multi' &&\n <ifx-checkbox checked={this.selected}\n tabIndex={-1} \n size='s'>\n </ifx-checkbox>\n }\n\n <div class='chip-item__label'> <slot /> </div>\n\n {/ Selected indicator only visible in 'single' variant. */}\n <div class='chip-item__selected-indicator'> \n <ifx-icon icon={`check${this.chipState.size === 'small' ? '12' : '16'}`}> </ifx-icon> \n </div>\n\n </div>\n );\n}\n}"],"version":3}
1	+ {"file":"p-ecccac95.js","mappings":"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","names":[],"sources":["src/components/chip/chip-item/chip-item.scss?tag=ifx-chip-item&encapsulation=shadow","src/components/chip/chip-item/chip-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.chip-item {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace100;\n \n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n \n user-select: none;\n \n transition: all 100ms ease;\n transition-property: background, color;\n \n &:hover {\n cursor: pointer;\n \n background-color: tokens.$ifxColorEngineering200;\n }\n \n &:active {\n background-color: tokens.$ifxColorEngineering300;\n }\n\n &:focus {\n outline: 2px solid tokens.$ifxColorOcean500;\n }\n \n &.chip-item--large {\n font: tokens.$ifxBodyBody03;\n }\n \n &.chip-item--small {\n font: tokens.$ifxBodyBody04;\n }\n\n &.chip-item--selected {\n color: tokens.$ifxColorOcean500;\n\n .chip-item__selected-indicator {\n display: block;\n }\n }\n}\n\n.chip-item__selected-indicator {\n display: none;\n \n margin-left: auto;\n}\n\n","import { h,\n Component,\n Element,\n Event,\n EventEmitter, \n Listen,\n Prop, \n Watch } from '@stencil/core';\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\n\n@Component({\ntag: 'ifx-chip-item',\nstyleUrl: 'chip-item.scss',\nshadow: true\n})\n\nexport class ChipItem {\n@Element() chipItem: HTMLIfxChipItemElement;\n\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\n\n@Prop() value: string = undefined;\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n@Listen('ifxChipItemSelect', { target: 'body' })\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\n if (this.chipState.variant === 'single') {\n const target = event.target as HTMLIfxChipItemElement;\n /* Also making sure chip items are from the same group (parent) while unselecting. /\n if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\n this.selected = false;\n }\n }\n} \n\n@Watch('selected')\nvalidateSelected(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n / Do not emit if ChipState does not allow. /\n if (this.chipState.emitIfxChipItemSelect){\n this.emitIfxChipItemSelectEvent();\n } else {\n this.chipState.emitIfxChipItemSelect = true;\n }\n }\n} \n\ngetItemLabel(): string {\n return this.chipItem.innerText as string;\n}\n\ntoggleItemSelection() {\n this.selected = !this.selected;\n}\n \n\nemitIfxChipItemSelectEvent(emitIfxChange: boolean = true) {\n this.ifxChipItemSelect.emit({ emitIfxChange: emitIfxChange,\n key: this.chipState.key,\n label: this.getItemLabel(), \n selected: this.selected, \n value: this.value });\n}\n\nhandleItemClick() {\n this.toggleItemSelection();\n}\n\nhandleItemKeyDown(event: KeyboardEvent) {\n if (event.code === 'Enter' \|\| event.code === 'Space') {\n this.toggleItemSelection();\n }\n}\n\nhandleSelectedState() {\n if (this.selected) {\n this.emitIfxChipItemSelectEvent(false);\n }\n}\n\n\ncomponentWillLoad() {\n / Propogating the selected state to the Chip (Parent) component if it is set. /\n this.handleSelectedState();\n}\n\nrender() {\n return (\n <div class={`chip-item chip-item--${this.chipState.size} \n chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \n tabIndex={0}\n onClick={() => {this.handleItemClick()}}\n onKeyDown={(e) => {this.handleItemKeyDown(e)}}\n role=\"option\"\n aria-selected={this.selected.toString()}> \n {/ Checkbox; renders only in 'multi' variant. /}\n { \n this.chipState.variant === 'multi' &&\n <ifx-checkbox checked={this.selected}\n tabIndex={-1} \n size='s'>\n </ifx-checkbox>\n }\n\n <div class='chip-item__label'> <slot /> </div>\n\n {/ Selected indicator only visible in 'single' variant. */}\n <div class='chip-item__selected-indicator'> \n <ifx-icon icon={`check${this.chipState.size === 'small' ? '12' : '16'}`}> </ifx-icon> \n </div>\n\n </div>\n );\n}\n}"],"version":3}

package/dist/components/{p-ac56aa34.js → p-fac2c9b7.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { d as defineCustomElement$1 } from './p-11e95622.js';
+import { d as defineCustomElement$1 } from './p-41f4c858.js';
 const alertCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, 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;
@@ -34,38 +34,6 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends H {
         if (!this.uniqueId) {
             this.uniqueId = this.generateUniqueId('alert');
         }
-        this.initalizeTracking();
-    }
-    initalizeTracking() {
-        (function (t, r, kk, n, pp) {
-            if (typeof window.btntConfig !== "object") {
-                window.btntConfig = {
-                    domain: "https://ssgtm.infineon.com",
-                    withCookies: true,
-                    maxBatchSize: 10
-                };
-            }
-            if (window["btnt"])
-                return;
-            window["btnt"] = function (z) {
-                if (typeof z !== "object") {
-                    z = {};
-                }
-                if (typeof window.btntQueue !== "object") {
-                    window.btntQueue = [];
-                }
-                window.btntQueue.push(z);
-            };
-            n = t.createElement(r);
-            pp = t.getElementsByTagName(r)[0];
-            n.async = 1;
-            n.src = window.btntConfig.domain + "/btnt.js";
-            pp.parentNode.insertBefore(n, pp);
-        })(document, "script");
-        window.btnt({
-            event_name: "component_initialized",
-            component_name: 'ifx-alert',
-        });
     }
     render() {
         return this.variant === 'info' ? (h("div", { class: "alert__info-wrapper", role: "alert", "aria-live": this.AriaLive, "aria-describedby": this.alertTypeDescription[this.variant], "aria-labelledby": "alert-text alert-description" }, h("div", { class: "info__text-wrapper" }, h("div", { class: "info__headline-wrapper" }, h("slot", { name: "headline" })), h("div", { id: `alert-description-${this.uniqueId}`, class: "info__description-wrapper" }, h("slot", { name: "desc" }))), this.closable ? this.renderCloseButton() : null)) : (h("div", { class: `alert ${this.variant}`, role: "alert" }, this.icon && (h("div", { class: "icon-wrapper" }, h("ifx-icon", { icon: this.icon }))), h("div", { class: "alert-text", id: `alert-text-${this.uniqueId}` }, h("slot", null)), this.closable ? this.renderCloseButton() : null));
@@ -99,4 +67,4 @@ function defineCustomElement() {
 export { Alert as A, defineCustomElement as d };
-//# sourceMappingURL=p-ac56aa34.js.map
+//# sourceMappingURL=p-fac2c9b7.js.map

package/dist/components/p-fac2c9b7.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-fac2c9b7.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,8mFAA8mF,CAAC;AAChoF,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); // tokens.$ifxFontFamilyBody;\n\n\n box-shadow: 0px 6px 9px 0px #1D1D1D1A;\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); // tokens.$ifxFontFamilyBody;\n\n\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/esm/ifx-alert_2.entry.js CHANGED Viewed

@@ -1,5 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host } from './index-6c9eba32.js';
-import { g as getIcon } from './icons-4575d84a.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-6c9eba32.js';
 const alertCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, 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;
@@ -32,38 +31,6 @@ const Alert = class {
         if (!this.uniqueId) {
             this.uniqueId = this.generateUniqueId('alert');
         }
-        this.initalizeTracking();
-    }
-    initalizeTracking() {
-        (function (t, r, kk, n, pp) {
-            if (typeof window.btntConfig !== "object") {
-                window.btntConfig = {
-                    domain: "https://ssgtm.infineon.com",
-                    withCookies: true,
-                    maxBatchSize: 10
-                };
-            }
-            if (window["btnt"])
-                return;
-            window["btnt"] = function (z) {
-                if (typeof z !== "object") {
-                    z = {};
-                }
-                if (typeof window.btntQueue !== "object") {
-                    window.btntQueue = [];
-                }
-                window.btntQueue.push(z);
-            };
-            n = t.createElement(r);
-            pp = t.getElementsByTagName(r)[0];
-            n.async = 1;
-            n.src = window.btntConfig.domain + "/btnt.js";
-            pp.parentNode.insertBefore(n, pp);
-        })(document, "script");
-        window.btnt({
-            event_name: "component_initialized",
-            component_name: 'ifx-alert',
-        });
     }
     render() {
         return this.variant === 'info' ? (h("div", { class: "alert__info-wrapper", role: "alert", "aria-live": this.AriaLive, "aria-describedby": this.alertTypeDescription[this.variant], "aria-labelledby": "alert-text alert-description" }, h("div", { class: "info__text-wrapper" }, h("div", { class: "info__headline-wrapper" }, h("slot", { name: "headline" })), h("div", { id: `alert-description-${this.uniqueId}`, class: "info__description-wrapper" }, h("slot", { name: "desc" }))), this.closable ? this.renderCloseButton() : null)) : (h("div", { class: `alert ${this.variant}`, role: "alert" }, this.icon && (h("div", { class: "icon-wrapper" }, h("ifx-icon", { icon: this.icon }))), h("div", { class: "alert-text", id: `alert-text-${this.uniqueId}` }, h("slot", null)), this.closable ? this.renderCloseButton() : null));
@@ -71,74 +38,153 @@ const Alert = class {
 };
 Alert.style = IfxAlertStyle0;
-const infineonIconStencilCss = "ifx-icon{display:inline-flex;justify-content:center}ifx-icon:empty{display:none}";
-const IfxIconStyle0 = infineonIconStencilCss;
+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;
-const InfineonIconStencil = class {
+const Template = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.consoleError = createEvent(this, "consoleError", 7);
-        this.icon = "";
-    }
-    convertStringToHtml(htmlString) {
-        const div = document.createElement('div');
-        div.innerHTML = htmlString;
-        return div.firstChild;
-    }
-    convertHtmlToObject(htmlElement) {
-        let pathToObject = Array
-            .from(htmlElement.attributes, ({ name, value }) => ({ name, value }))
-            .reduce((acc, current) => {
-            acc[current.name] = current.value;
-            return acc;
-        }, {});
-        return pathToObject;
-    }
-    convertPathsToVnode(htmlPath) {
-        let svgPaths = [];
-        const parentPath = this.convertHtmlToObject(htmlPath);
-        const parentPathToVnode = h("path", parentPath);
-        svgPaths.push(parentPathToVnode);
-        if (htmlPath.firstChild) {
-            const paths = htmlPath.querySelectorAll('path');
-            const pathLength = htmlPath.querySelectorAll('path').length;
-            for (let i = 0; i < pathLength; i++) {
-                let pathToObject = this.convertHtmlToObject(paths[i]);
-                let objToVnode = h("path", pathToObject);
-                svgPaths.push(objToVnode);
-            }
+        this.toggleTemplates = createEvent(this, "toggleTemplates", 7);
+        this.fieldError = createEvent(this, "fieldError", 7);
+        this.repoDetails = { name: "", desc: "", framework: "" };
+        this.showDetails = false;
+        this.isTemplatePage = false;
+        this.isLoading = true;
+        this.clientId = 'Ov23lixmXiNTTNb6V5W6';
+        this.redirectUri = 'https://infineon.github.io/infineon-design-system-stencil/?path=/docs/dds-templates--development';
+        this.scope = 'repo workflow';
+        this.state = 'template123';
+    }
+    authUser() {
+        const authorizationUrl = `https://github.com/login/oauth/authorize?` +
+            `client_id=${this.clientId}&` +
+            `redirect_uri=${this.redirectUri}&` +
+            `scope=${this.scope}&` +
+            `state=${this.state}`;
+        window.open(authorizationUrl, '_blank');
+    }
+    componentDidLoad() {
+        const url = new URL(window.location.href);
+        const code = url.searchParams.get('code');
+        const { templateName } = this.getLocalStorageValues();
+        if (code && this.name === templateName) {
+            this.isTemplatePage = true;
+            this.toggleTemplates.emit('details');
+            this.getUserToken(code);
         }
-        return svgPaths;
     }
-    getSVG(svgPath) {
-        return h("svg", { class: "inline-svg", width: this.ifxIcon.width, height: this.ifxIcon.height, xmlns: "http://www.w3.org/2000/svg", fill: this.ifxIcon.fill, viewBox: this.ifxIcon.viewBox }, ...svgPath);
+    getLocalStorageValues() {
+        const repoName = localStorage.getItem('repo_name');
+        const repoDesc = localStorage.getItem('repo_desc');
+        const repoFramework = localStorage.getItem('repo_framework');
+        const templateName = localStorage.getItem('selectedTemplate');
+        return { repoName, repoDesc, repoFramework, templateName };
     }
-    constructIcon() {
-        if (this.ifxIcon) {
-            const htmlPath = this.convertStringToHtml(this.ifxIcon.svgContent);
-            const svgPath = this.convertPathsToVnode(htmlPath);
-            const SVG = this.getSVG(svgPath);
-            return SVG;
+    async getUserToken(authCode) {
+        const { repoName, repoDesc, repoFramework, templateName } = this.getLocalStorageValues();
+        fetch(`https://ddstemplate-srv.cfapps.eu10-004.hana.ondemand.com/token/${authCode}/${repoName}/${repoDesc}/${repoFramework}/${templateName}`)
+            .then(response => {
+            if (response.ok) {
+                return response.text();
+            }
+            else {
+                return response.text().then(errorMessage => {
+                    throw new Error(errorMessage);
+                });
+            }
+        })
+            .then(data => {
+            if (data) {
+                this.isLoading = false;
+                this.repoUrl = data;
+                localStorage.clear();
+            }
+        })
+            .catch(error => {
+            this.repoError = error.message;
+            console.error('Error:', error.message);
+        });
+    }
+    handleUserInput(e, type) {
+        if (type === 'name') {
+            this.repoDetails = Object.assign(Object.assign({}, this.repoDetails), { name: e.target.value });
         }
-        else if (this.icon !== "") {
-            console.error('Icon not found!');
-            this.consoleError.emit(true);
-            return;
+        else if (type === 'desc') {
+            this.repoDetails = Object.assign(Object.assign({}, this.repoDetails), { desc: e.target.value });
+        }
+        else if (type === 'framework') {
+            this.repoDetails = Object.assign(Object.assign({}, this.repoDetails), { framework: e.target.value });
+        }
+    }
+    submitUserData() {
+        if (this.repoDetails.name && this.repoDetails.desc && this.repoDetails.framework) {
+            localStorage.setItem('repo_name', this.repoDetails.name);
+            localStorage.setItem('repo_desc', this.repoDetails.desc);
+            localStorage.setItem('repo_framework', this.repoDetails.framework);
+            localStorage.setItem('selectedTemplate', this.name);
+            this.fieldError.emit(false);
+            this.authUser();
         }
         else {
-            return;
+            this.fieldError.emit('All fields are mandatory');
         }
     }
-    componentWillLoad() {
-        const removeHyphen = (str) => str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_m, chr) => chr);
-        this.ifxIcon = getIcon(removeHyphen(this.icon));
+    togglePadding(action) {
+        let parent = this.el.parentElement;
+        if (parent) {
+            const rootNode = parent.getRootNode();
+            if (rootNode instanceof ShadowRoot) {
+                parent = rootNode.host.parentElement;
+            }
+            else {
+                parent = parent.parentElement;
+            }
+            if (action === 'remove') {
+                parent.parentElement.style.padding = '0px';
+            }
+            else if (action === 'add') {
+                parent.parentElement.style.padding = '4rem 20px';
+            }
+        }
+    }
+    handleCurrentTemplate(e) {
+        if (e && !this.showDetails) {
+            this.togglePadding('remove');
+            const targetTemplate = e.currentTarget;
+            this.toggleTemplates.emit(targetTemplate);
+            this.showDetails = true;
+        }
+    }
+    async toggleTemplate(currTemp) {
+        const templateWrapper = this.el.shadowRoot.querySelector('.react__template-wrapper');
+        if (templateWrapper) {
+            if (!templateWrapper.classList.contains('hide') && currTemp) {
+                if (templateWrapper !== currTemp) {
+                    templateWrapper.classList.add('hide');
+                }
+            }
+            else {
+                if (this.showDetails) {
+                    this.showDetails = false;
+                }
+                this.togglePadding('add');
+                templateWrapper.classList.remove('hide');
+            }
+        }
     }
     render() {
-        return (h(Host, { key: '775fda2fec495006f6ae41fc2463a055df1067cf' }, this.constructIcon()));
+        return (h("div", { key: '993f20bb1a7970d938d09ea001ee77b777d2a817' }, this.isTemplatePage
+            ?
+                h("div", { class: "template__page-wrapper" }, !this.repoUrl && !this.repoError &&
+                    h("div", null, h("h3", null, "Your repository is getting ready.."), h("p", null, "This will only take a minute.")), this.isLoading && !this.repoError && h("div", null, h("ifx-spinner", { variant: 'default', size: 's' })), this.repoUrl && h("ifx-link", { href: this.repoUrl, target: "_parent", size: "m", variant: "underlined" }, "Your repository"), this.repoError && h("div", null, this.repoError))
+            :
+                h("div", { class: "react__template-container" }, h("div", { class: "react__template-wrapper", onClick: (e) => this.handleCurrentTemplate(e) }, h("div", { class: "image__wrapper" }, h("img", { src: this.thumbnail }))), this.showDetails &&
+                    h("div", { class: "details__wrapper" }, h("div", { class: "selection__buttons-wrapper" }, h("div", { class: "selection__input" }, h("input", { type: "radio", id: "react", name: "chosen_framework", value: "react", onInput: (e) => this.handleUserInput(e, 'framework') }), h("label", { htmlFor: "react" }, "React")), h("div", { class: "selection__input vue" }, h("input", { class: "vue__input", disabled: true, type: "radio", id: "vue", name: "chosen_framework", value: "vue", onInput: (e) => this.handleUserInput(e, 'framework') }), h("label", { class: "vue__label", htmlFor: "vue" }, "Vue"), " (Soon)")), h("div", { class: "input__fields-wrapper" }, h("ifx-text-field", { required: true, onInput: (e) => this.handleUserInput(e, 'name'), size: "m", icon: "c-info-16", placeholder: "Your repository name" }, "Repository Name"), h("ifx-text-field", { required: true, size: "m", icon: "c-info-16", onInput: (e) => this.handleUserInput(e, 'desc'), placeholder: "Your repository description" }, "Repository Description"), h("ifx-button", { fullWidth: true, onClick: () => this.submitUserData(), variant: 'primary' }, "Generate template"))))));
     }
+    get el() { return getElement(this); }
 };
-InfineonIconStencil.style = IfxIconStyle0;
+Template.style = IfxTemplateStyle0;
-export { Alert as ifx_alert, InfineonIconStencil as ifx_icon };
+export { Alert as ifx_alert, Template as ifx_template };
 //# sourceMappingURL=ifx-alert_2.entry.js.map