npm - @infineon/infineon-design-system-stencil - Versions diffs - 39.4.4-canary.0 → 39.5.0 - Mend

@infineon/infineon-design-system-stencil 39.4.4-canary.0 → 39.5.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 (1210) hide show

package/dist/collection/components/overview-table/overview-table.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"overview-table.stories.js","sourceRoot":"","sources":["../../../src/components/overview-table/overview-table.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,cAAc,EAAE,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,2CAA2C,CAAC;AAE1E,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,UAAU,GAAG;IACnB,MAAM,EAAE,YAAY;CACrB,CAAA","sourcesContent":["export default {\r\n title: 'Components/OverviewTable',\r\n tags: ['autodocs'],\r\n\r\n excludeStories: ['Default'],\r\n};\r\n\r\nconst DefaultTemplate = () => `<ifx-overview-table></ifx-overview-table>`;\r\n\r\nexport const Default = DefaultTemplate.bind({});\r\nDefault.parameters = {\r\n layout: 'fullscreen',\r\n}"]}
1	+ {"version":3,"file":"overview-table.stories.js","sourceRoot":"","sources":["../../../src/components/overview-table/overview-table.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,cAAc,EAAE,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,2CAA2C,CAAC;AAE1E,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,UAAU,GAAG;IACnB,MAAM,EAAE,YAAY;CACrB,CAAA","sourcesContent":["export default {\n title: 'Components/OverviewTable',\n tags: ['autodocs'],\n\n excludeStories: ['Default'],\n};\n\nconst DefaultTemplate = () => `<ifx-overview-table></ifx-overview-table>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.parameters = {\n layout: 'fullscreen',\n}"]}

package/dist/collection/components/pagination/pagination.js CHANGED Viewed

@@ -226,7 +226,7 @@ export class Pagination {
         this.initPagination();
     }
     render() {
-        return (h("div", { key: '11d342b11b38051ffd0b1e08e0696b1e3ef4e3c5', class: "container" }, this.showItemsPerPage && (h("div", { key: 'e2bedb6b48ac138ec8ff9640363d5d01a3195b33', class: "items__per-page-wrapper" }, h("div", { key: '506874c6bfeeacab1203cc5403639d91b2bf93a2', class: "items__per-page-label" }, "Results per Page"), h("div", { key: '8d0fafee79171e56b4672d4fd4c4cd2049ebd614', class: "items__per-page-field" }, h("ifx-select", { key: '650869a3583ef25e5b78dcafb9efaf1760c6101c', id: 'itemsPerPageSelect', placeholder: 'false', "show-search": 'false', value: undefined, disabled: false, error: false, size: "s", options: this.filteredItemsPerPage, "placeholder-value": "Select" })))), h("div", { key: '230aea64459ffa9c32a6e974eacf174bb9631c6b', class: "items__total-wrapper" }, h("div", { key: 'ec6765efbffeec485d4c3400541a72f96cf3436a', class: "pagination" }, h("ifx-icon-button", { key: 'ab52e4afbebcf6e1bb8ba51a85de505fcaa1cf45', class: "prev", icon: "arrow-left-16", "aria-label": 'Previous Page', onClick: () => this.changePage(this.internalPage - 1), variant: "secondary" }), h("ol", { key: 'ecda1907072a09082fa25dac33608f0a3819d5e9' }, this.visiblePages.map((page, i) => typeof page === 'number' ? (h("li", { key: `page-${page}`, class: { [this.CLASS_ACTIVE]: page === this.internalPage }, "data-page": page }, h("span", { class: 'page__button', role: "button", tabindex: "0", "aria-current": page === this.internalPage ? "page" : undefined, "aria-label": `Page ${page}`, onClick: () => this.changePage(page), onKeyDown: (e) => (e.key === 'Enter' || e.key === ' ') && this.changePage(page) }, page))) : (h("li", { class: "ellipsis", key: `ellipsis-${i}` }, h("span", { "aria-hidden": "true" }, "..."))))), h("ifx-icon-button", { key: 'fd46bf3e767ebed96da040f53ad872bfb16d885c', class: "next", icon: "arrow-right-16", "aria-label": 'Next Page', onClick: () => this.changePage(this.internalPage + 1), variant: "secondary" })))));
+        return (h("div", { key: '9a4b41bb714202dcc144f626b9a2096480852ad6', class: "container" }, this.showItemsPerPage && (h("div", { key: '9e829381e98967180e89bf8f8988c67bbb998814', class: "items__per-page-wrapper" }, h("div", { key: 'be5d328337c18096cd1363f3c7c0c060693fe525', class: "items__per-page-label" }, "Results per Page"), h("div", { key: '37f663194a695059779305e0723321c26f55d191', class: "items__per-page-field" }, h("ifx-select", { key: '916cc188fd2f7d86243db5955f091e188defbacc', id: 'itemsPerPageSelect', placeholder: 'false', "show-search": 'false', value: undefined, disabled: false, error: false, size: "s", options: this.filteredItemsPerPage, "placeholder-value": "Select" })))), h("div", { key: 'f6531ac8c0710f53ff375e8ee4fa19bb47be5cef', class: "items__total-wrapper" }, h("div", { key: '4edaf3f1bc17c3423c2b39473a0f5ddc959278d6', class: "pagination" }, h("ifx-icon-button", { key: '7341fced786739f5970cfc9940381b2b2901de63', class: "prev", icon: "arrow-left-16", "aria-label": 'Previous Page', onClick: () => this.changePage(this.internalPage - 1), variant: "secondary" }), h("ol", { key: 'b7af29f3b08ee99b3c880c7af51b4d491630e55c' }, this.visiblePages.map((page, i) => typeof page === 'number' ? (h("li", { key: `page-${page}`, class: { [this.CLASS_ACTIVE]: page === this.internalPage }, "data-page": page }, h("span", { class: 'page__button', role: "button", tabindex: "0", "aria-current": page === this.internalPage ? "page" : undefined, "aria-label": `Page ${page}`, onClick: () => this.changePage(page), onKeyDown: (e) => (e.key === 'Enter' || e.key === ' ') && this.changePage(page) }, page))) : (h("li", { class: "ellipsis", key: `ellipsis-${i}` }, h("span", { "aria-hidden": "true" }, "..."))))), h("ifx-icon-button", { key: '5bdcefa2773fb49f8d7c4190a48fe5a98f6e0442', class: "next", icon: "arrow-right-16", "aria-label": 'Next Page', onClick: () => this.changePage(this.internalPage + 1), variant: "secondary" })))));
     }
     static get is() { return "ifx-pagination"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pagination/pagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Event, EventEmitter, Prop, State, Listen, Watch } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-pagination',\r\n styleUrl: 'pagination.scss',\r\n shadow: true\r\n})\r\nexport class Pagination {\r\n @Element() el: HTMLElement;\r\n @Event() ifxPageChange: EventEmitter;\r\n @Event() ifxItemsPerPageChange: EventEmitter;\r\n @Prop() currentPage: number = 1;\r\n @Prop() showItemsPerPage: boolean = true;\r\n @State() internalPage: number = 1;\r\n @State() internalItemsPerPage: number = 10;\r\n @State() numberOfPages: number[] = [];\r\n @Prop() total: number = 1;\r\n @Prop() itemsPerPage: any[] \| string;\r\n @State() filteredItemsPerPage: any[] = [];\r\n @State() visiblePages: (number \| string)[] = [];\r\n\r\n private CLASS_DISABLED = \"disabled\";\r\n private CLASS_ACTIVE = \"active\";\r\n private prevInternalPage: number;\r\n\r\n @Watch('total')\r\n watchTotalHandler() {\r\n this.calculateNumberOfPages();\r\n this.updateVisiblePages();\r\n }\r\n\r\n @Watch('currentPage')\r\n currentPageWatcher(newVal: number) {\r\n this.internalPage = Math.max(1, Math.min(newVal, this.numberOfPages.length));\r\n this.calculateNumberOfPages();\r\n this.updateVisiblePages();\r\n }\r\n\r\n @Listen('ifxSelect')\r\n setItemsPerPage(e: CustomEvent) {\r\n const selectedValue = e.detail?.value \|\| e.detail?.label;\r\n const newItemsPerPage = parseInt(selectedValue) \|\| 10;\r\n\r\n if (newItemsPerPage === this.internalItemsPerPage) {\r\n return;\r\n }\r\n\r\n this.internalItemsPerPage = newItemsPerPage;\r\n this.internalPage = 1;\r\n this.calculateNumberOfPages();\r\n this.updateVisiblePages();\r\n this.handleEventEmission();\r\n }\r\n\r\n emitItemsPerPage(e) {\r\n this.ifxItemsPerPageChange.emit((e as any).detail.label)\r\n }\r\n\r\n async componentDidLoad() {\r\n if (this.showItemsPerPage) {\r\n const select = this.el.shadowRoot.querySelector('#itemsPerPageSelect');\r\n if(select) {\r\n select.addEventListener('ifxSelect', (e) => this.emitItemsPerPage(e))\r\n }\r\n }\r\n\r\n // Add resize listener to update pagination on screen size changes\r\n window.addEventListener('resize', this.handleResize);\r\n\r\n if(!isNestedInIfxComponent(this.el)) {\r\n const framework = detectFramework();\r\n trackComponent('ifx-pagination', await framework)\r\n }\r\n this.initPagination();\r\n }\r\n\r\n disconnectedCallback() {\r\n if (this.showItemsPerPage) {\r\n const select = this.el.shadowRoot.querySelector('#itemsPerPageSelect');\r\n if (select) {\r\n select.removeEventListener('ifxSelect', (e) => this.emitItemsPerPage(e));\r\n }\r\n }\r\n\r\n // Remove resize listener\r\n window.removeEventListener('resize', this.handleResize);\r\n\r\n // Clear any pending resize timeout\r\n if (this.resizeTimeout) {\r\n clearTimeout(this.resizeTimeout);\r\n }\r\n }\r\n\r\n updateVisiblePages() {\r\n // Check if screen is mobile (< 375px)\r\n const isMobile = window.innerWidth < 375;\r\n const totalPages = this.numberOfPages.length;\r\n const current = this.internalPage;\r\n let pages: (number \| string)[] = [];\r\n\r\n if (isMobile) {\r\n // Mobile logic: maximum 5 elements\r\n if (totalPages <= 5) {\r\n pages = [...this.numberOfPages];\r\n } else {\r\n // Always show first page\r\n pages.push(1);\r\n\r\n if (current <= 2) {\r\n // Show: 1 2 3 … 10 (for pages 1 and 2)\r\n pages.push(2, 3, '...', totalPages);\r\n } else if (current >= totalPages - 1) {\r\n // Show: 1 … 23 24 25 (for last 2 pages only)\r\n pages.push('...', totalPages - 2, totalPages - 1, totalPages);\r\n } else {\r\n // Show: 1 … 5 … 10 (for middle pages, including page 3 and third-to-last page)\r\n pages.push('...', current, '...', totalPages);\r\n }\r\n }\r\n } else {\r\n // Desktop logic: maximum 7 elements\r\n const buffer = 2;\r\n\r\n if (totalPages <= 7) {\r\n pages = [...this.numberOfPages];\r\n } else {\r\n // Always show first page\r\n pages.push(1);\r\n\r\n // Determine the range around current page\r\n let start = Math.max(2, current - buffer);\r\n let end = Math.min(totalPages - 1, current + buffer);\r\n\r\n // Adjust range to ensure we show enough pages\r\n // If we're close to the beginning, extend the end\r\n if (current <= 4) {\r\n start = 2;\r\n end = Math.min(totalPages - 1, 5);\r\n }\r\n // If we're close to the end, extend the start\r\n else if (current >= totalPages - 3) {\r\n start = Math.max(2, totalPages - 4);\r\n end = totalPages - 1;\r\n }\r\n // For middle pages, show current +/- 1\r\n else {\r\n start = current - 1;\r\n end = current + 1;\r\n }\r\n\r\n // Add ellipsis before the range if there's a gap\r\n if (start > 2) {\r\n pages.push('...');\r\n }\r\n\r\n // Add the range of pages\r\n for (let i = start; i <= end; i++) {\r\n pages.push(i);\r\n }\r\n\r\n // Add ellipsis after the range if there's a gap\r\n if (end < totalPages - 1) {\r\n pages.push('...');\r\n }\r\n\r\n // Always show last page\r\n pages.push(totalPages);\r\n }\r\n }\r\n\r\n this.visiblePages = pages;\r\n }\r\n\r\n calculateNumberOfPages() {\r\n const totalPages = Math.ceil(this.total / this.internalItemsPerPage);\r\n this.numberOfPages = Array.from({ length: totalPages }, (_, i) => i + 1);\r\n this.internalPage = Math.max(1, Math.min(this.currentPage, totalPages));\r\n }\r\n\r\n filterOptionsArray() {\r\n const items = typeof this.itemsPerPage === 'string' ?\r\n JSON.parse(this.itemsPerPage) : this.itemsPerPage;\r\n this.filteredItemsPerPage = items.map(item => ({\r\n ...item,\r\n label: item.label \|\| item.value\r\n }));\r\n }\r\n\r\n componentWillLoad() {\r\n this.filterOptionsArray();\r\n\r\n const selectedOption = this.filteredItemsPerPage.find(option => option.selected);\r\n if (selectedOption) {\r\n this.internalItemsPerPage = Number(selectedOption.value);\r\n } else if (this.filteredItemsPerPage.length > 0) {\r\n this.internalItemsPerPage = Number(this.filteredItemsPerPage[0].value);\r\n }\r\n\r\n this.calculateNumberOfPages();\r\n this.internalPage = Math.max(1, Math.min(this.currentPage, this.numberOfPages.length));\r\n this.updateVisiblePages();\r\n }\r\n\r\n componentWillUpdate() {\r\n if (this.prevInternalPage !== this.internalPage) {\r\n this.updateVisiblePages();\r\n this.prevInternalPage = this.internalPage;\r\n }\r\n }\r\n\r\n componentDidUpdate() {\r\n this.initPagination();\r\n }\r\n\r\n handleEventEmission() {\r\n this.ifxPageChange.emit({\r\n currentPage: this.internalPage,\r\n totalPages: this.numberOfPages.length,\r\n itemsPerPage: this.internalItemsPerPage\r\n });\r\n }\r\n\r\n initPagination() {\r\n const pagination = this.el.shadowRoot.querySelector('.pagination');\r\n if (!pagination) return;\r\n\r\n const updateButtons = () => {\r\n const prev = pagination.querySelector<HTMLButtonElement>('.prev');\r\n const next = pagination.querySelector<HTMLButtonElement>('.next');\r\n if (prev) {\r\n prev.disabled = this.internalPage === 1;\r\n prev.classList.toggle(this.CLASS_DISABLED, this.internalPage === 1);\r\n }\r\n if (next) {\r\n next.disabled = this.internalPage === this.numberOfPages.length;\r\n next.classList.toggle(this.CLASS_DISABLED, this.internalPage === this.numberOfPages.length);\r\n }\r\n };\r\n\r\n pagination.querySelectorAll('li').forEach(li => {\r\n li.removeEventListener('click', this.handlePageClick);\r\n li.addEventListener('click', this.handlePageClick);\r\n });\r\n\r\n updateButtons();\r\n }\r\n\r\n private handlePageClick = (e: Event) => {\r\n const li = e.currentTarget as HTMLLIElement;\r\n const page = parseInt(li.dataset.page);\r\n if (!isNaN(page)) this.changePage(page);\r\n };\r\n\r\n private handleResize = () => {\r\n // Debounce resize events to prevent excessive calls\r\n clearTimeout(this.resizeTimeout);\r\n this.resizeTimeout = setTimeout(() => {\r\n this.updateVisiblePages();\r\n }, 100);\r\n };\r\n\r\n private resizeTimeout: any;\r\n\r\n changePage(newPage: number) {\r\n newPage = Math.max(1, Math.min(newPage, this.numberOfPages.length));\r\n if (newPage === this.internalPage) return;\r\n\r\n this.internalPage = newPage;\r\n this.handleEventEmission();\r\n this.initPagination();\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"container\">\r\n {this.showItemsPerPage && (\r\n <div class=\"items__per-page-wrapper\">\r\n <div class=\"items__per-page-label\">Results per Page</div>\r\n <div class=\"items__per-page-field\">\r\n <ifx-select\r\n id='itemsPerPageSelect'\r\n placeholder='false'\r\n show-search='false'\r\n value={undefined}\r\n disabled={false}\r\n error={false}\r\n size=\"s\"\r\n options={this.filteredItemsPerPage}\r\n placeholder-value=\"Select\"\r\n ></ifx-select>\r\n </div>\r\n </div>\r\n )}\r\n\r\n <div class=\"items__total-wrapper\">\r\n <div class=\"pagination\">\r\n <ifx-icon-button\r\n class=\"prev\"\r\n icon=\"arrow-left-16\"\r\n aria-label='Previous Page'\r\n onClick={() => this.changePage(this.internalPage - 1)}\r\n variant=\"secondary\"\r\n ></ifx-icon-button>\r\n\r\n <ol>\r\n {this.visiblePages.map((page, i) => typeof page === 'number' ? (\r\n <li\r\n key={`page-${page}`}\r\n class={{ [this.CLASS_ACTIVE]: page === this.internalPage }}\r\n data-page={page}\r\n >\r\n <span \r\n class='page__button'\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-current={page === this.internalPage ? \"page\" : undefined}\r\n aria-label={`Page ${page}`}\r\n onClick={() => this.changePage(page)}\r\n onKeyDown={(e) => (e.key === 'Enter' \|\| e.key === ' ') && this.changePage(page)}\r\n >\r\n {page}\r\n </span>\r\n </li>\r\n ) : (\r\n <li class=\"ellipsis\" key={`ellipsis-${i}`}>\r\n <span aria-hidden=\"true\">...</span>\r\n </li>\r\n ))}\r\n </ol>\r\n\r\n <ifx-icon-button\r\n class=\"next\"\r\n icon=\"arrow-right-16\"\r\n aria-label='Next Page'\r\n onClick={() => this.changePage(this.internalPage + 1)}\r\n variant=\"secondary\"\r\n ></ifx-icon-button>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvG,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAOzE,MAAM,OAAO,UAAU;IALvB;QASU,gBAAW,GAAW,CAAC,CAAC;QACxB,qBAAgB,GAAY,IAAI,CAAC;QAChC,iBAAY,GAAW,CAAC,CAAC;QACzB,yBAAoB,GAAW,EAAE,CAAC;QAClC,kBAAa,GAAa,EAAE,CAAC;QAC9B,UAAK,GAAW,CAAC,CAAC;QAEjB,yBAAoB,GAAU,EAAE,CAAC;QACjC,iBAAY,GAAwB,EAAE,CAAC;QAExC,mBAAc,GAAG,UAAU,CAAC;QAC5B,iBAAY,GAAG,QAAQ,CAAC;QAiOxB,oBAAe,GAAG,CAAC,CAAQ,EAAE,EAAE;YACrC,MAAM,EAAE,GAAG,CAAC,CAAC,aAA8B,CAAC;YAC5C,MAAM,IAAI,GAAG,QAAQ,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YACvC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;gBAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QAC1C,CAAC,CAAC;QAEM,iBAAY,GAAG,GAAG,EAAE;YAC1B,oDAAoD;YACpD,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YACjC,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,GAAG,EAAE;gBACnC,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC5B,CAAC,EAAE,GAAG,CAAC,CAAC;QACV,CAAC,CAAC;KAmFH;IA5TC,iBAAiB;QACf,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAGD,kBAAkB,CAAC,MAAc;QAC/B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;QAC7E,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAGC,eAAe,CAAC,CAAc;;QAC5B,MAAM,aAAa,GAAG,CAAA,MAAA,CAAC,CAAC,MAAM,0CAAE,KAAK,MAAI,MAAA,CAAC,CAAC,MAAM,0CAAE,KAAK,CAAA,CAAC;QACzD,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;QAEtD,IAAI,eAAe,KAAK,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAClD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,oBAAoB,GAAG,eAAe,CAAC;QAC5C,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;QACtB,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,gBAAgB,CAAC,CAAC;QAChB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAE,CAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IAC1D,CAAC;IAEH,KAAK,CAAC,gBAAgB;QACpB,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;YACvE,IAAG,MAAM,EAAE,CAAC;gBACV,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAA;YACvE,CAAC;QACH,CAAC;QAED,kEAAkE;QAClE,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAErD,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YACpC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,gBAAgB,EAAE,MAAM,SAAS,CAAC,CAAA;QACnD,CAAC;QACD,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;YACvE,IAAI,MAAM,EAAE,CAAC;gBACX,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;YAC3E,CAAC;QACH,CAAC;QAED,yBAAyB;QACzB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAExD,mCAAmC;QACnC,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;IAED,kBAAkB;QAChB,sCAAsC;QACtC,MAAM,QAAQ,GAAG,MAAM,CAAC,UAAU,GAAG,GAAG,CAAC;QACzC,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;QAC7C,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC;QAClC,IAAI,KAAK,GAAwB,EAAE,CAAC;QAEpC,IAAI,QAAQ,EAAE,CAAC;YACb,mCAAmC;YACnC,IAAI,UAAU,IAAI,CAAC,EAAE,CAAC;gBACpB,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC;YAClC,CAAC;iBAAM,CAAC;gBACN,yBAAyB;gBACzB,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;gBAEd,IAAI,OAAO,IAAI,CAAC,EAAE,CAAC;oBACjB,uCAAuC;oBACvC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC;gBACtC,CAAC;qBAAM,IAAI,OAAO,IAAI,UAAU,GAAG,CAAC,EAAE,CAAC;oBACrC,6CAA6C;oBAC7C,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,CAAC,EAAE,UAAU,GAAG,CAAC,EAAE,UAAU,CAAC,CAAC;gBAChE,CAAC;qBAAM,CAAC;oBACN,+EAA+E;oBAC/E,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC;gBAChD,CAAC;YACH,CAAC;QACH,CAAC;aAAM,CAAC;YACN,oCAAoC;YACpC,MAAM,MAAM,GAAG,CAAC,CAAC;YAEjB,IAAI,UAAU,IAAI,CAAC,EAAE,CAAC;gBACpB,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC;YAClC,CAAC;iBAAM,CAAC;gBACN,yBAAyB;gBACzB,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;gBAEd,0CAA0C;gBAC1C,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;gBAC1C,IAAI,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;gBAErD,8CAA8C;gBAC9C,kDAAkD;gBAClD,IAAI,OAAO,IAAI,CAAC,EAAE,CAAC;oBACjB,KAAK,GAAG,CAAC,CAAC;oBACV,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;gBACpC,CAAC;gBACD,8CAA8C;qBACzC,IAAI,OAAO,IAAI,UAAU,GAAG,CAAC,EAAE,CAAC;oBACnC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,CAAC;oBACpC,GAAG,GAAG,UAAU,GAAG,CAAC,CAAC;gBACvB,CAAC;gBACD,uCAAuC;qBAClC,CAAC;oBACJ,KAAK,GAAG,OAAO,GAAG,CAAC,CAAC;oBACpB,GAAG,GAAG,OAAO,GAAG,CAAC,CAAC;gBACpB,CAAC;gBAED,iDAAiD;gBACjD,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;oBACd,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACpB,CAAC;gBAED,yBAAyB;gBACzB,KAAK,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;oBAClC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;gBAChB,CAAC;gBAED,gDAAgD;gBAChD,IAAI,GAAG,GAAG,UAAU,GAAG,CAAC,EAAE,CAAC;oBACzB,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACpB,CAAC;gBAED,wBAAwB;gBACxB,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACzB,CAAC;QACH,CAAC;QAED,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAC5B,CAAC;IAED,sBAAsB;QACpB,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,oBAAoB,CAAC,CAAC;QACrE,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QACzE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC;IAC1E,CAAC;IAED,kBAAkB;QAChB,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ,CAAC,CAAC;YACnD,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC;QACpD,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,iCACzC,IAAI,KACP,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,IAC/B,CAAC,CAAC;IACN,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAE1B,MAAM,cAAc,GAAG,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QACjF,IAAI,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,oBAAoB,GAAG,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;QAC3D,CAAC;aAAM,IAAI,IAAI,CAAC,oBAAoB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAChD,IAAI,CAAC,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QACzE,CAAC;QAED,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;QACvF,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,mBAAmB;QAChB,IAAI,IAAI,CAAC,gBAAgB,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;YACjD,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC1B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,YAAY,CAAC;QAC5C,CAAC;IACH,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;YACtB,WAAW,EAAE,IAAI,CAAC,YAAY;YAC9B,UAAU,EAAE,IAAI,CAAC,aAAa,CAAC,MAAM;YACrC,YAAY,EAAE,IAAI,CAAC,oBAAoB;SACxC,CAAC,CAAC;IACL,CAAC;IAED,cAAc;QACZ,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QACnE,IAAI,CAAC,UAAU;YAAE,OAAO;QAExB,MAAM,aAAa,GAAG,GAAG,EAAE;YACzB,MAAM,IAAI,GAAG,UAAU,CAAC,aAAa,CAAoB,OAAO,CAAC,CAAC;YAClE,MAAM,IAAI,GAAG,UAAU,CAAC,aAAa,CAAoB,OAAO,CAAC,CAAC;YAClE,IAAI,IAAI,EAAE,CAAC;gBACT,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,KAAK,CAAC,CAAC;gBACxC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC;YACtE,CAAC;YACD,IAAI,IAAI,EAAE,CAAC;gBACT,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;gBAChE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YAC9F,CAAC;QACH,CAAC,CAAC;QAEF,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;YAC7C,EAAE,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;YACtD,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QACrD,CAAC,CAAC,CAAC;QAEH,aAAa,EAAE,CAAC;IAClB,CAAC;IAkBD,UAAU,CAAC,OAAe;QACxB,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;QACpE,IAAI,OAAO,KAAK,IAAI,CAAC,YAAY;YAAE,OAAO;QAE1C,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC;QAC5B,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,WAAW;YACnB,IAAI,CAAC,gBAAgB,IAAI,CACxB,4DAAK,KAAK,EAAC,yBAAyB;gBAClC,4DAAK,KAAK,EAAC,uBAAuB,uBAAuB;gBACzD,4DAAK,KAAK,EAAC,uBAAuB;oBAChC,mEACE,EAAE,EAAC,oBAAoB,EACvB,WAAW,EAAC,OAAO,iBACP,OAAO,EACnB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,KAAK,EACf,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,GAAG,EACR,OAAO,EAAE,IAAI,CAAC,oBAAoB,uBAChB,QAAQ,GACd,CACV,CACF,CACP;YAED,4DAAK,KAAK,EAAC,sBAAsB;gBAC/B,4DAAK,KAAK,EAAC,YAAY;oBACrB,wEACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,eAAe,gBACT,eAAe,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,EACrD,OAAO,EAAC,WAAW,GACF;oBAEnB,6DACC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC7D,UACE,GAAG,EAAE,QAAQ,IAAI,EAAE,EACnB,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC,YAAY,EAAE,eAC/C,IAAI;wBAEf,YACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,kBACE,IAAI,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,gBACjD,QAAQ,IAAI,EAAE,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EACpC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAE9E,IAAI,CACA,CACJ,CACN,CAAC,CAAC,CAAC,CACF,UAAI,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,YAAY,CAAC,EAAE;wBACvC,2BAAkB,MAAM,UAAW,CAChC,CACN,CAAC,CACG;oBAEL,wEACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,gBAAgB,gBACV,WAAW,EACtB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,EACrD,OAAO,EAAC,WAAW,GACF,CACf,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element, Event, EventEmitter, Prop, State, Listen, Watch } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\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 @Event() ifxItemsPerPageChange: EventEmitter;\n @Prop() currentPage: number = 1;\n @Prop() showItemsPerPage: boolean = true;\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 @Watch('total')\n watchTotalHandler() {\n this.calculateNumberOfPages();\n this.updateVisiblePages();\n }\n\n @Watch('currentPage')\n currentPageWatcher(newVal: number) {\n this.internalPage = Math.max(1, Math.min(newVal, this.numberOfPages.length));\n this.calculateNumberOfPages();\n this.updateVisiblePages();\n }\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 emitItemsPerPage(e) {\n this.ifxItemsPerPageChange.emit((e as any).detail.label)\n }\n\n async componentDidLoad() {\n if (this.showItemsPerPage) {\n const select = this.el.shadowRoot.querySelector('#itemsPerPageSelect');\n if(select) {\n select.addEventListener('ifxSelect', (e) => this.emitItemsPerPage(e))\n }\n }\n\n // Add resize listener to update pagination on screen size changes\n window.addEventListener('resize', this.handleResize);\n\n if(!isNestedInIfxComponent(this.el)) {\n const framework = detectFramework();\n trackComponent('ifx-pagination', await framework)\n }\n this.initPagination();\n }\n\n disconnectedCallback() {\n if (this.showItemsPerPage) {\n const select = this.el.shadowRoot.querySelector('#itemsPerPageSelect');\n if (select) {\n select.removeEventListener('ifxSelect', (e) => this.emitItemsPerPage(e));\n }\n }\n\n // Remove resize listener\n window.removeEventListener('resize', this.handleResize);\n\n // Clear any pending resize timeout\n if (this.resizeTimeout) {\n clearTimeout(this.resizeTimeout);\n }\n }\n\n updateVisiblePages() {\n // Check if screen is mobile (< 375px)\n const isMobile = window.innerWidth < 375;\n const totalPages = this.numberOfPages.length;\n const current = this.internalPage;\n let pages: (number \| string)[] = [];\n\n if (isMobile) {\n // Mobile logic: maximum 5 elements\n if (totalPages <= 5) {\n pages = [...this.numberOfPages];\n } else {\n // Always show first page\n pages.push(1);\n\n if (current <= 2) {\n // Show: 1 2 3 … 10 (for pages 1 and 2)\n pages.push(2, 3, '...', totalPages);\n } else if (current >= totalPages - 1) {\n // Show: 1 … 23 24 25 (for last 2 pages only)\n pages.push('...', totalPages - 2, totalPages - 1, totalPages);\n } else {\n // Show: 1 … 5 … 10 (for middle pages, including page 3 and third-to-last page)\n pages.push('...', current, '...', totalPages);\n }\n }\n } else {\n // Desktop logic: maximum 7 elements\n const buffer = 2;\n\n if (totalPages <= 7) {\n pages = [...this.numberOfPages];\n } else {\n // Always show first page\n pages.push(1);\n\n // Determine the range around current page\n let start = Math.max(2, current - buffer);\n let end = Math.min(totalPages - 1, current + buffer);\n\n // Adjust range to ensure we show enough pages\n // If we're close to the beginning, extend the end\n if (current <= 4) {\n start = 2;\n end = Math.min(totalPages - 1, 5);\n }\n // If we're close to the end, extend the start\n else if (current >= totalPages - 3) {\n start = Math.max(2, totalPages - 4);\n end = totalPages - 1;\n }\n // For middle pages, show current +/- 1\n else {\n start = current - 1;\n end = current + 1;\n }\n\n // Add ellipsis before the range if there's a gap\n if (start > 2) {\n pages.push('...');\n }\n\n // Add the range of pages\n for (let i = start; i <= end; i++) {\n pages.push(i);\n }\n\n // Add ellipsis after the range if there's a gap\n if (end < totalPages - 1) {\n pages.push('...');\n }\n\n // Always show last page\n pages.push(totalPages);\n }\n }\n\n this.visiblePages = 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.filterOptionsArray();\n\n const selectedOption = this.filteredItemsPerPage.find(option => option.selected);\n if (selectedOption) {\n this.internalItemsPerPage = Number(selectedOption.value);\n } else if (this.filteredItemsPerPage.length > 0) {\n this.internalItemsPerPage = Number(this.filteredItemsPerPage[0].value);\n }\n\n this.calculateNumberOfPages();\n this.internalPage = Math.max(1, Math.min(this.currentPage, this.numberOfPages.length));\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 private handleResize = () => {\n // Debounce resize events to prevent excessive calls\n clearTimeout(this.resizeTimeout);\n this.resizeTimeout = setTimeout(() => {\n this.updateVisiblePages();\n }, 100);\n };\n\n private resizeTimeout: any;\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 {this.showItemsPerPage && (\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 id='itemsPerPageSelect'\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\n <div class=\"items__total-wrapper\">\n <div class=\"pagination\">\n <ifx-icon-button\n class=\"prev\"\n icon=\"arrow-left-16\"\n aria-label='Previous Page'\n onClick={() => this.changePage(this.internalPage - 1)}\n variant=\"secondary\"\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 <span \n class='page__button'\n role=\"button\"\n tabindex=\"0\"\n aria-current={page === this.internalPage ? \"page\" : undefined}\n aria-label={`Page ${page}`}\n onClick={() => this.changePage(page)}\n onKeyDown={(e) => (e.key === 'Enter' \|\| e.key === ' ') && this.changePage(page)}\n >\n {page}\n </span>\n </li>\n ) : (\n <li class=\"ellipsis\" key={`ellipsis-${i}`}>\n <span aria-hidden=\"true\">...</span>\n </li>\n ))}\n </ol>\n\n <ifx-icon-button\n class=\"next\"\n icon=\"arrow-right-16\"\n aria-label='Next Page'\n onClick={() => this.changePage(this.internalPage + 1)}\n variant=\"secondary\"\n ></ifx-icon-button>\n </div>\n </div>\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/pagination/pagination.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pagination.stories.js","sourceRoot":"","sources":["../../../src/components/pagination/pagination.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,sBAAsB;IAEtB,IAAI,EAAE;QACJ,KAAK,EAAE,EAAE;QACT,WAAW,EAAE,CAAC;QACd,gBAAgB,EAAE,IAAI;QACtB,YAAY,EAAE,oGAAoG;KACnH;IACD,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,WAAW,EAAE,sBAAsB;YACnC,KAAK,EAAE;gBACL,QAAQ,EAAE,sBAAsB;gBAChC,YAAY,EAAE;oBACZ,SAAS,EAAE,GAAG;iBACf;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QAED,KAAK,EAAE;YACL,WAAW,EAAE,wBAAwB;YACrC,KAAK,EAAE;gBACL,QAAQ,EAAE,sBAAsB;gBAChC,YAAY,EAAE;oBACZ,SAAS,EAAE,GAAG;iBACf;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,YAAY,EAAE;YACZ,WAAW,EAAE,kGAAkG;YAC/G,KAAK,EAAE;gBACL,QAAQ,EAAE,sBAAsB;gBAChC,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QAED,gBAAgB,EAAE;YAChB,WAAW,EAAE,4DAA4D;YACzE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;YAC5B,KAAK,EAAE;gBACL,QAAQ,EAAE,sBAAsB;gBAChC,YAAY,EAAE;oBACZ,SAAS,EAAE,MAAM;iBAClB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,SAAS;iBACnB;aACF;SACF;QAED,aAAa,EAAE;YACb,MAAM,EAAE,eAAe;YACvB,WAAW,EAAE,4CAA4C;YACzD,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,kNAAkN;iBACrN;aACF;SACF;QACC,qBAAqB,EAAE;YACvB,MAAM,EAAE,uBAAuB;YAC/B,WAAW,EAAE,0DAA0D;YACvE,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,kPAAkP;iBACrP;aACF;SACF;KACF;CACF,CAAC;AAGF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,MAAM,OAAO,GAAG,0BAA0B,IAAI,CAAC,KAAK,mBAAmB,IAAI,CAAC,WAAW,0BAA0B,IAAI,CAAC,gBAAgB,qBAAqB,IAAI,CAAC,YAAY,qBAAqB,CAAA;IACjM,UAAU,CAAC,GAAG,EAAE;;QACd,MAAA,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,0CAAE,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;IACvG,CAAC,EAAE,CAAC,CAAC,CAAC;IACN,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\r\n\r\nexport default {\r\n title: 'Components/Pagination',\r\n // tags: ['autodocs'],\r\n\r\n args: {\r\n total: 50,\r\n currentPage: 1,\r\n showItemsPerPage: true,\r\n itemsPerPage: '[{\"value\":\"10\",\"selected\":true}, {\"value\":\"20\",\"selected\":false}, {\"value\":\"30\",\"selected\":false}]'\r\n },\r\n argTypes: {\r\n currentPage: {\r\n description: 'Current page number.',\r\n table: {\r\n category: 'Ifx-pagination props',\r\n defaultValue: {\r\n 'summary': '0'\r\n },\r\n type: {\r\n summary: 'number',\r\n },\r\n },\r\n },\r\n\r\n total: {\r\n description: 'Total number of items.',\r\n table: {\r\n category: 'Ifx-pagination props',\r\n defaultValue: {\r\n 'summary': '1'\r\n },\r\n type: {\r\n summary: 'number',\r\n },\r\n },\r\n },\r\n itemsPerPage: {\r\n description: 'Stringified array of objects setting up the items per page. Value and selected are required.',\r\n table: {\r\n category: 'Ifx-pagination props',\r\n type: {\r\n summary: 'string',\r\n },\r\n },\r\n },\r\n\r\n showItemsPerPage: {\r\n description: 'Controls whether the items per page selector is displayed.',\r\n control: { type: 'boolean' },\r\n table: {\r\n category: 'Ifx-pagination props',\r\n defaultValue: {\r\n 'summary': 'true'\r\n },\r\n type: {\r\n summary: 'boolean',\r\n },\r\n },\r\n },\r\n\r\n ifxPageChange: {\r\n action: 'ifxPageChange',\r\n description: 'Custom event emitted when page is changed.',\r\n table: {\r\n category: 'custom events',\r\n type: {\r\n summary: 'Framework integration',\r\n detail:\r\n 'React: onIfxPageChange={handlePageChange}\\nVue:@ifxPageChange=\"handlePageChange\"\\nAngular:(ifxPageChange)=\"handlePageChange()\"\\nVanillaJs:.addEventListener(\"ifxPageChange\", (event) => {//handle page change});',\r\n },\r\n },\r\n },\r\n ifxItemsPerPageChange: {\r\n action: 'ifxItemsPerPageChange',\r\n description: 'Custom event emitted when the items per page is changed.',\r\n table: {\r\n category: 'custom events',\r\n type: {\r\n summary: 'Framework integration',\r\n detail:\r\n 'React: onifxItemsPerPageChange={handlePageChange}\\nVue:@ifxItemsPerPageChange=\"handlePageChange\"\\nAngular:(ifxItemsPerPageChange)=\"handlePageChange()\"\\nVanillaJs:.addEventListener(\"ifxItemsPerPageChange\", (event) => {//handle page change});',\r\n },\r\n },\r\n },\r\n },\r\n};\r\n\r\n\r\nconst DefaultTemplate = args => {\r\n const element = `<ifx-pagination total=\"${args.total}\" current-page=\"${args.currentPage}\" show-items-per-page=\"${args.showItemsPerPage}\" items-per-page='${args.itemsPerPage}'></ifx-pagination>`\r\n setTimeout(() => {\r\n document.querySelector('ifx-pagination')?.addEventListener('ifxPageChange', action('ifxPageChange'));\r\n }, 0);\r\n return element;\r\n};\r\n\r\nexport const Default = DefaultTemplate.bind({});\r\nDefault.argTypes = {};\r\n"]}
1	+ {"version":3,"file":"pagination.stories.js","sourceRoot":"","sources":["../../../src/components/pagination/pagination.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,sBAAsB;IAEtB,IAAI,EAAE;QACJ,KAAK,EAAE,EAAE;QACT,WAAW,EAAE,CAAC;QACd,gBAAgB,EAAE,IAAI;QACtB,YAAY,EAAE,oGAAoG;KACnH;IACD,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,WAAW,EAAE,sBAAsB;YACnC,KAAK,EAAE;gBACL,QAAQ,EAAE,sBAAsB;gBAChC,YAAY,EAAE;oBACZ,SAAS,EAAE,GAAG;iBACf;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QAED,KAAK,EAAE;YACL,WAAW,EAAE,wBAAwB;YACrC,KAAK,EAAE;gBACL,QAAQ,EAAE,sBAAsB;gBAChC,YAAY,EAAE;oBACZ,SAAS,EAAE,GAAG;iBACf;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,YAAY,EAAE;YACZ,WAAW,EAAE,kGAAkG;YAC/G,KAAK,EAAE;gBACL,QAAQ,EAAE,sBAAsB;gBAChC,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QAED,gBAAgB,EAAE;YAChB,WAAW,EAAE,4DAA4D;YACzE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;YAC5B,KAAK,EAAE;gBACL,QAAQ,EAAE,sBAAsB;gBAChC,YAAY,EAAE;oBACZ,SAAS,EAAE,MAAM;iBAClB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,SAAS;iBACnB;aACF;SACF;QAED,aAAa,EAAE;YACb,MAAM,EAAE,eAAe;YACvB,WAAW,EAAE,4CAA4C;YACzD,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,kNAAkN;iBACrN;aACF;SACF;QACC,qBAAqB,EAAE;YACvB,MAAM,EAAE,uBAAuB;YAC/B,WAAW,EAAE,0DAA0D;YACvE,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,kPAAkP;iBACrP;aACF;SACF;KACF;CACF,CAAC;AAGF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,MAAM,OAAO,GAAG,0BAA0B,IAAI,CAAC,KAAK,mBAAmB,IAAI,CAAC,WAAW,0BAA0B,IAAI,CAAC,gBAAgB,qBAAqB,IAAI,CAAC,YAAY,qBAAqB,CAAA;IACjM,UAAU,CAAC,GAAG,EAAE;;QACd,MAAA,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,0CAAE,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;IACvG,CAAC,EAAE,CAAC,CAAC,CAAC;IACN,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Pagination',\n // tags: ['autodocs'],\n\n args: {\n total: 50,\n currentPage: 1,\n showItemsPerPage: true,\n itemsPerPage: '[{\"value\":\"10\",\"selected\":true}, {\"value\":\"20\",\"selected\":false}, {\"value\":\"30\",\"selected\":false}]'\n },\n argTypes: {\n currentPage: {\n description: 'Current page number.',\n table: {\n category: 'Ifx-pagination props',\n defaultValue: {\n 'summary': '0'\n },\n type: {\n summary: 'number',\n },\n },\n },\n\n total: {\n description: 'Total number of items.',\n table: {\n category: 'Ifx-pagination props',\n defaultValue: {\n 'summary': '1'\n },\n type: {\n summary: 'number',\n },\n },\n },\n itemsPerPage: {\n description: 'Stringified array of objects setting up the items per page. Value and selected are required.',\n table: {\n category: 'Ifx-pagination props',\n type: {\n summary: 'string',\n },\n },\n },\n\n showItemsPerPage: {\n description: 'Controls whether the items per page selector is displayed.',\n control: { type: 'boolean' },\n table: {\n category: 'Ifx-pagination props',\n defaultValue: {\n 'summary': 'true'\n },\n type: {\n summary: 'boolean',\n },\n },\n },\n\n ifxPageChange: {\n action: 'ifxPageChange',\n description: 'Custom event emitted when page is changed.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxPageChange={handlePageChange}\\nVue:@ifxPageChange=\"handlePageChange\"\\nAngular:(ifxPageChange)=\"handlePageChange()\"\\nVanillaJs:.addEventListener(\"ifxPageChange\", (event) => {//handle page change});',\n },\n },\n },\n ifxItemsPerPageChange: {\n action: 'ifxItemsPerPageChange',\n description: 'Custom event emitted when the items per page is changed.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onifxItemsPerPageChange={handlePageChange}\\nVue:@ifxItemsPerPageChange=\"handlePageChange\"\\nAngular:(ifxItemsPerPageChange)=\"handlePageChange()\"\\nVanillaJs:.addEventListener(\"ifxItemsPerPageChange\", (event) => {//handle page change});',\n },\n },\n },\n },\n};\n\n\nconst DefaultTemplate = args => {\n const element = `<ifx-pagination total=\"${args.total}\" current-page=\"${args.currentPage}\" show-items-per-page=\"${args.showItemsPerPage}\" items-per-page='${args.itemsPerPage}'></ifx-pagination>`\n setTimeout(() => {\n document.querySelector('ifx-pagination')?.addEventListener('ifxPageChange', action('ifxPageChange'));\n }, 0);\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}

package/dist/collection/components/progress-bar/progress-bar.js CHANGED Viewed

@@ -22,7 +22,7 @@ export class ProgressBar {
         }
     }
     render() {
-        return (h("div", { key: '650b54cfe6d8789f04d2f34345daa65bb2587a74', role: "progressbar", "aria-valuenow": this.internalValue, "aria-valuemin": "0", "aria-valuemax": "100", "aria-label": `Progress: ${this.internalValue}%`, class: `progress-bar ${this.size}` }, h("div", { key: 'e1e9a0bac7727ee6f2b7c75c290cfa99c5fbaa5e', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: '29dc81eb76451d391cb888c1f2b031cdcffb2f5d', class: "label" }, `${this.internalValue}%`))));
+        return (h("div", { key: '06b7b6b58ce9daa516fa16fbb41d41ccf53a1904', role: "progressbar", "aria-valuenow": this.internalValue, "aria-valuemin": "0", "aria-valuemax": "100", "aria-label": `Progress: ${this.internalValue}%`, class: `progress-bar ${this.size}` }, h("div", { key: '81819666cb90f1511cfa03bbb125e76c69bef5cf', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: '29a371be17682cca7cc5b899122239b1b88481c6', class: "label" }, `${this.internalValue}%`))));
     }
     static get is() { return "ifx-progress-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-bar/progress-bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAOzE,MAAM,OAAO,WAAW;IALxB;QAOU,UAAK,GAAW,CAAC,CAAC;QAElB,cAAS,GAAY,KAAK,CAAC;KAmCpC;IA9BC,YAAY,CAAC,QAAgB,EAAE,QAAgB;QAC7C,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC1B,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;QAChC,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;IAClC,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YACpC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,kBAAkB,EAAE,MAAM,SAAS,CAAC,CAAA;QACrD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,IAAI,EAAC,aAAa,mBACN,IAAI,CAAC,aAAa,mBACnB,GAAG,mBACH,KAAK,gBACP,aAAa,IAAI,CAAC,aAAa,GAAG,EAAE,KAAK,EAAE,gBAAgB,IAAI,CAAC,IAAI,EAAE;YAClF,4DAAK,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,aAAa,GAAG,EAAE,IAC7D,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,GAAG,IAAI,IAAI,CAAC,aAAa,KAAK,CAAC,IAAI,6DAAM,KAAK,EAAC,OAAO,IAAE,GAAG,IAAI,CAAC,aAAa,GAAG,CAAQ,CACrH,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, State, Watch, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-progress-bar',\r\n styleUrl: 'progress-bar.scss',\r\n shadow: true\r\n})\r\nexport class ProgressBar {\r\n @Element() el: HTMLElement;\r\n @Prop() value: number = 0;\r\n @Prop() size: string;\r\n @Prop() showLabel: boolean = false;\r\n\r\n @State() internalValue: number;\r\n\r\n @Watch('value')\r\n valueChanged(newValue: number, oldValue: number) {\r\n if (newValue !== oldValue) {\r\n this.internalValue = newValue;\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n this.internalValue = this.value;\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-progress-bar', await framework)\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div role=\"progressbar\"\r\n aria-valuenow={this.internalValue}\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"100\"\r\n aria-label={`Progress: ${this.internalValue}%`} class={`progress-bar ${this.size}`}>\r\n <div class=\"progress\" style={{ width: `${this.internalValue}%` }}>\r\n {this.showLabel && this.size !== \"s\" && this.internalValue !== 0 && <span class=\"label\">{`${this.internalValue}%`}</span>}\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAOzE,MAAM,OAAO,WAAW;IALxB;QAOU,UAAK,GAAW,CAAC,CAAC;QAElB,cAAS,GAAY,KAAK,CAAC;KAmCpC;IA9BC,YAAY,CAAC,QAAgB,EAAE,QAAgB;QAC7C,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC1B,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;QAChC,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;IAClC,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YACpC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,kBAAkB,EAAE,MAAM,SAAS,CAAC,CAAA;QACrD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,IAAI,EAAC,aAAa,mBACN,IAAI,CAAC,aAAa,mBACnB,GAAG,mBACH,KAAK,gBACP,aAAa,IAAI,CAAC,aAAa,GAAG,EAAE,KAAK,EAAE,gBAAgB,IAAI,CAAC,IAAI,EAAE;YAClF,4DAAK,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,aAAa,GAAG,EAAE,IAC7D,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,GAAG,IAAI,IAAI,CAAC,aAAa,KAAK,CAAC,IAAI,6DAAM,KAAK,EAAC,OAAO,IAAE,GAAG,IAAI,CAAC,aAAa,GAAG,CAAQ,CACrH,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, State, Watch, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-progress-bar',\n styleUrl: 'progress-bar.scss',\n shadow: true\n})\nexport class ProgressBar {\n @Element() el: HTMLElement;\n @Prop() value: number = 0;\n @Prop() size: string;\n @Prop() showLabel: boolean = false;\n\n @State() internalValue: number;\n\n @Watch('value')\n valueChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n this.internalValue = newValue;\n }\n }\n\n componentWillLoad() {\n this.internalValue = this.value;\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-progress-bar', await framework)\n }\n }\n\n render() {\n return (\n <div role=\"progressbar\"\n aria-valuenow={this.internalValue}\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n aria-label={`Progress: ${this.internalValue}%`} class={`progress-bar ${this.size}`}>\n <div class=\"progress\" style={{ width: `${this.internalValue}%` }}>\n {this.showLabel && this.size !== \"s\" && this.internalValue !== 0 && <span class=\"label\">{`${this.internalValue}%`}</span>}\n </div>\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/progress-bar/progress-bar.stories.js CHANGED Viewed

@@ -42,12 +42,12 @@ export default {
 };
 const Template = args => {
     const wrapper = document.createElement('div');
-    wrapper.innerHTML = `
-    <ifx-progress-bar
-      value="${args.value}"
-      size="${args.size}"
-      show-label="${args.showLabel}"
-    ></ifx-progress-bar>
+    wrapper.innerHTML = `
+    <ifx-progress-bar
+      value="${args.value}"
+      size="${args.size}"
+      show-label="${args.showLabel}"
+    ></ifx-progress-bar>
   `;
     return wrapper.innerHTML;
 };

package/dist/collection/components/progress-bar/progress-bar.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"progress-bar.stories.js","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,IAAI,EAAE,GAAG;QACT,KAAK,EAAE,EAAE;QACT,SAAS,EAAE,KAAK;KACjB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,WAAW,EAAE,qCAAqC;YAClD,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE;YAC5C,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,EAAE;iBACZ;aACF;SACF;QACD,SAAS,EAAE;YACT,WAAW,EAAE,yEAAyE;YACtF,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,oEAAoE;YACjF,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,GAAG;iBACb;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE;IACtB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,SAAS,GAAG;;eAEP,IAAI,CAAC,KAAK;cACX,IAAI,CAAC,IAAI;oBACH,IAAI,CAAC,SAAS;;GAE/B,CAAC;IAEF,OAAO,OAAO,CAAC,SAAS,CAAC;AAC3B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,GAAG;IACT,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,KAAK;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,GAAG;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,IAAI;CAChB,CAAC","sourcesContent":["export default {\r\n title: 'Components/Progress Bar',\r\n tags: ['autodocs'],\r\n\r\n args: {\r\n size: 'm',\r\n value: 50,\r\n showLabel: false,\r\n },\r\n argTypes: {\r\n value: {\r\n description: 'The percentage of the progress bar.',\r\n control: { type: 'range', min: 0, max: 100 },\r\n table: {\r\n category: 'ifx-progress-bar props',\r\n defaultValue: {\r\n summary: 50\r\n }\r\n }\r\n },\r\n showLabel: {\r\n description: 'Shows the percentage of the progress bar. Does not fit in size *s*.',\r\n control: 'boolean',\r\n table: {\r\n category: 'ifx-progress-bar props',\r\n defaultValue: {\r\n summary: false\r\n }\r\n }\r\n },\r\n size: {\r\n description: 'Sets the size of the progress bar. Options: s (36px) and m (40px).',\r\n control: 'radio',\r\n options: ['s', 'm'],\r\n table: {\r\n category: 'ifx-progress-bar props',\r\n defaultValue: {\r\n summary: 'm'\r\n }\r\n }\r\n },\r\n },\r\n};\r\n\r\nconst Template = args => {\r\n const wrapper = document.createElement('div');\r\n wrapper.innerHTML = `\r\n <ifx-progress-bar\r\n value=\"${args.value}\"\r\n size=\"${args.size}\"\r\n show-label=\"${args.showLabel}\"\r\n ></ifx-progress-bar>\r\n `;\r\n\r\n return wrapper.innerHTML;\r\n};\r\n\r\nexport const Default = Template.bind({});\r\nDefault.args = {\r\n size: 'm',\r\n value: 50,\r\n showLabel: false,\r\n};\r\n\r\nexport const Small = Template.bind({});\r\nSmall.args = {\r\n value: 75,\r\n size: 's',\r\n};\r\n\r\nexport const WithLabel = Template.bind({});\r\nWithLabel.args = {\r\n value: 25,\r\n showLabel: true,\r\n};\r\n"]}
1	+ {"version":3,"file":"progress-bar.stories.js","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,IAAI,EAAE,GAAG;QACT,KAAK,EAAE,EAAE;QACT,SAAS,EAAE,KAAK;KACjB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,WAAW,EAAE,qCAAqC;YAClD,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE;YAC5C,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,EAAE;iBACZ;aACF;SACF;QACD,SAAS,EAAE;YACT,WAAW,EAAE,yEAAyE;YACtF,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,oEAAoE;YACjF,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,GAAG;iBACb;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE;IACtB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,SAAS,GAAG;;eAEP,IAAI,CAAC,KAAK;cACX,IAAI,CAAC,IAAI;oBACH,IAAI,CAAC,SAAS;;GAE/B,CAAC;IAEF,OAAO,OAAO,CAAC,SAAS,CAAC;AAC3B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,GAAG;IACT,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,KAAK;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,GAAG;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,IAAI;CAChB,CAAC","sourcesContent":["export default {\n title: 'Components/Progress Bar',\n tags: ['autodocs'],\n\n args: {\n size: 'm',\n value: 50,\n showLabel: false,\n },\n argTypes: {\n value: {\n description: 'The percentage of the progress bar.',\n control: { type: 'range', min: 0, max: 100 },\n table: {\n category: 'ifx-progress-bar props',\n defaultValue: {\n summary: 50\n }\n }\n },\n showLabel: {\n description: 'Shows the percentage of the progress bar. Does not fit in size *s*.',\n control: 'boolean',\n table: {\n category: 'ifx-progress-bar props',\n defaultValue: {\n summary: false\n }\n }\n },\n size: {\n description: 'Sets the size of the progress bar. Options: s (36px) and m (40px).',\n control: 'radio',\n options: ['s', 'm'],\n table: {\n category: 'ifx-progress-bar props',\n defaultValue: {\n summary: 'm'\n }\n }\n },\n },\n};\n\nconst Template = args => {\n const wrapper = document.createElement('div');\n wrapper.innerHTML = `\n <ifx-progress-bar\n value=\"${args.value}\"\n size=\"${args.size}\"\n show-label=\"${args.showLabel}\"\n ></ifx-progress-bar>\n `;\n\n return wrapper.innerHTML;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n size: 'm',\n value: 50,\n showLabel: false,\n};\n\nexport const Small = Template.bind({});\nSmall.args = {\n value: 75,\n size: 's',\n};\n\nexport const WithLabel = Template.bind({});\nWithLabel.args = {\n value: 25,\n showLabel: true,\n};\n"]}

package/dist/collection/components/radio-button/radio-button.js CHANGED Viewed

@@ -19,13 +19,13 @@ export class RadioButton {
         this.fallbackInput.type = 'radio';
         this.fallbackInput.hidden = true;
         this.fallbackInput.className = '_ifx-radiobutton-fallback';
-        this.fallbackInput.style.cssText = `
-      display: none !important;
-      position: absolute !important;
-      opacity: 0 !important;
-      pointer-events: none !important;
-      width: 0 !important;
-      height: 0 !important;
+        this.fallbackInput.style.cssText = `
+      display: none !important;
+      position: absolute !important;
+      opacity: 0 !important;
+      pointer-events: none !important;
+      width: 0 !important;
+      height: 0 !important;
     `;
         this.fallbackInput.setAttribute('aria-hidden', 'true');
         this.fallbackInput.tabIndex = -1;
@@ -98,9 +98,9 @@ export class RadioButton {
         }
     }
     render() {
-        return (h("div", { key: 'c5e4fa7c1beea5dcfa20b595d43e21641a6fcae4', role: "radio", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), class: `radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`, onClick: (e) => this.handleRadioButtonClick(e), tabindex: this.disabled ? -1 : 0 }, h("div", { key: 'bdbd998bb8535930ebbd40ba292bf836bdf42bbd', class: `radioButton__wrapper
-            ${this.internalChecked ? 'checked' : ''}
-            ${this.error ? 'error' : ''}` }, this.internalChecked && h("div", { key: 'b26cc238ace2996722f6485b51f82c49e5873e0a', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: 'd43b4e722fd6f968ce267d6fab4343ad43c287f3', class: `label ${this.size === "m" ? "label-m" : ""}` }, h("slot", { key: 'dc7296c8f126ae54814db1589084f9990aac1b18' }))), h("input", { key: '70fd723f9829972c31e29ace9a97fc1d1d8cfbb3', type: "radio", hidden: true, ref: el => this.inputElement = el, name: this.name, value: this.value, checked: this.internalChecked, disabled: this.disabled, onClick: (e) => e.stopPropagation() })));
+        return (h("div", { key: 'cfacddd9fcb1feebcf926fb2a7e441e56e511759', role: "radio", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), class: `radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`, onClick: (e) => this.handleRadioButtonClick(e), tabindex: this.disabled ? -1 : 0 }, h("div", { key: 'badf42cd6e21d2a2b647da3d1cd29c403590ef26', class: `radioButton__wrapper
+            ${this.internalChecked ? 'checked' : ''}
+            ${this.error ? 'error' : ''}` }, this.internalChecked && h("div", { key: '950b1c9cd2fdaebe227da8d22147f6680652672f', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: '86c20225f259e41f6d55299e91f9cbd3616df8d9', class: `label ${this.size === "m" ? "label-m" : ""}` }, h("slot", { key: '346d7d0732bf33d9363a717e99453b3b32332a11' }))), h("input", { key: '3bddb087935626e217325a290de6ec0444d2b2b2', type: "radio", hidden: true, ref: el => this.inputElement = el, name: this.name, value: this.value, checked: this.internalChecked, disabled: this.disabled, onClick: (e) => e.stopPropagation() })));
     }
     static get is() { return "ifx-radio-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio-button/radio-button.js.map CHANGED Viewed

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

package/dist/collection/components/radio-button/radio-button.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"radio-button.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\r\n\r\nexport default {\r\n title: 'Components/Radio Button',\r\n // tags: ['autodocs'],\r\n\r\n args: {\r\n label: 'Text',\r\n error: false,\r\n disabled: false,\r\n checked: false,\r\n size: 's',\r\n name: 'radio-button',\r\n value: 'radio',\r\n },\r\n argTypes: {\r\n error: {\r\n description: 'Indicates whether the radio button is in an error state.',\r\n control: 'boolean',\r\n table: {\r\n category: 'ifx-radio-button props',\r\n defaultValue: {\r\n summary: false\r\n }\r\n }\r\n },\r\n disabled: {\r\n description: 'Disables the radio button.',\r\n control: 'boolean',\r\n table: {\r\n category: 'ifx-radio-button props',\r\n defaultValue: {\r\n summary: false\r\n }\r\n }\r\n },\r\n checked: {\r\n description: 'Determines whether the radio button is selected by default.',\r\n control: 'boolean',\r\n table: {\r\n category: 'ifx-radio-button props',\r\n defaultValue: {\r\n summary: false\r\n }\r\n }\r\n },\r\n label: {\r\n name: 'Label of Radio Button',\r\n description: 'Set the label displayed next to <ifx-radio-button>.',\r\n table: {\r\n category: 'story controls',\r\n }\r\n },\r\n size: {\r\n description: 'Specifies the size of the radio button. Options: s (20px) and m (24px).',\r\n control: 'radio',\r\n options: ['s', 'm'],\r\n table: {\r\n category: 'ifx-radio-button props',\r\n defaultValue: {\r\n summary: 's'\r\n },\r\n type: {\r\n summary: 's \| m'\r\n }\r\n }\r\n },\r\n name: {\r\n description: 'Name of the element, that is used as reference when a form is submitted.',\r\n table: {\r\n category: 'ifx-radio-button props'\r\n }\r\n },\r\n value: {\r\n description: 'The value that gets submitted, when the radio button is checked.',\r\n table: {\r\n category: 'ifx-radio-button props'\r\n }\r\n },\r\n ifxChange: {\r\n description: 'Custom event emitted when radio button checked and unchecked.',\r\n action: 'ifxChange',\r\n table: {\r\n category: 'custom events',\r\n type: {\r\n summary: 'Framework integration',\r\n detail:\r\n 'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\r\n },\r\n },\r\n },\r\n ifxError: {\r\n description: 'Custom event emitted when radio button is in error state.',\r\n action: 'ifxError',\r\n table: {\r\n category: 'custom events',\r\n type: {\r\n summary: 'Framework integration',\r\n detail:\r\n 'React: onIfxError={handleError}\\nVue:@ifxError=\"handleError\"\\nAngular:(ifxError)=\"handleError()\"\\nVanillaJs:.addEventListener(\"ifxError\", (event) => {//handle error});',\r\n },\r\n },\r\n }\r\n },\r\n};\r\n\r\nconst DefaultTemplate = args => {\r\n // Create the radio button element\r\n const element = document.createElement('ifx-radio-button') as any;\r\n\r\n // Set boolean properties directly\r\n element.disabled = args.disabled;\r\n element.error = args.error;\r\n element.checked = args.checked;\r\n\r\n // Set string attributes\r\n element.setAttribute('size', args.size);\r\n element.setAttribute('name', args.name);\r\n element.setAttribute('value', args.value);\r\n\r\n // Add the label as a text node\r\n element.textContent = args.label;\r\n\r\n\r\n // Add the event listener\r\n element.addEventListener('ifxChange', action('ifxChange'));\r\n element.addEventListener('ifxError', action('ifxError'));\r\n\r\n // Return the element\r\n return element;\r\n};\r\n\r\nexport const Default = DefaultTemplate.bind({});\r\n"]}
1	+ {"version":3,"file":"radio-button.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Radio Button',\n // tags: ['autodocs'],\n\n args: {\n label: 'Text',\n error: false,\n disabled: false,\n checked: false,\n size: 's',\n name: 'radio-button',\n value: 'radio',\n },\n argTypes: {\n error: {\n description: 'Indicates whether the radio button is in an error state.',\n control: 'boolean',\n table: {\n category: 'ifx-radio-button props',\n defaultValue: {\n summary: false\n }\n }\n },\n disabled: {\n description: 'Disables the radio button.',\n control: 'boolean',\n table: {\n category: 'ifx-radio-button props',\n defaultValue: {\n summary: false\n }\n }\n },\n checked: {\n description: 'Determines whether the radio button is selected by default.',\n control: 'boolean',\n table: {\n category: 'ifx-radio-button props',\n defaultValue: {\n summary: false\n }\n }\n },\n label: {\n name: 'Label of Radio Button',\n description: 'Set the label displayed next to <ifx-radio-button>.',\n table: {\n category: 'story controls',\n }\n },\n size: {\n description: 'Specifies the size of the radio button. Options: s (20px) and m (24px).',\n control: 'radio',\n options: ['s', 'm'],\n table: {\n category: 'ifx-radio-button props',\n defaultValue: {\n summary: 's'\n },\n type: {\n summary: 's \| m'\n }\n }\n },\n name: {\n description: 'Name of the element, that is used as reference when a form is submitted.',\n table: {\n category: 'ifx-radio-button props'\n }\n },\n value: {\n description: 'The value that gets submitted, when the radio button is checked.',\n table: {\n category: 'ifx-radio-button props'\n }\n },\n ifxChange: {\n description: 'Custom event emitted when radio button checked and unchecked.',\n action: 'ifxChange',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n },\n },\n },\n ifxError: {\n description: 'Custom event emitted when radio button is in error state.',\n action: 'ifxError',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxError={handleError}\\nVue:@ifxError=\"handleError\"\\nAngular:(ifxError)=\"handleError()\"\\nVanillaJs:.addEventListener(\"ifxError\", (event) => {//handle error});',\n },\n },\n }\n },\n};\n\nconst DefaultTemplate = args => {\n // Create the radio button element\n const element = document.createElement('ifx-radio-button') as any;\n\n // Set boolean properties directly\n element.disabled = args.disabled;\n element.error = args.error;\n element.checked = args.checked;\n\n // Set string attributes\n element.setAttribute('size', args.size);\n element.setAttribute('name', args.name);\n element.setAttribute('value', args.value);\n\n // Add the label as a text node\n element.textContent = args.label;\n\n\n // Add the event listener\n element.addEventListener('ifxChange', action('ifxChange'));\n element.addEventListener('ifxError', action('ifxError'));\n\n // Return the element\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}

package/dist/collection/components/radio-button-group/radio-button-group.js CHANGED Viewed

@@ -51,7 +51,7 @@ export class RadioButtonGroup {
         this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);
     }
     render() {
-        return (h("div", { key: '9d56fb1bbb2ad9ce178e55f2e703bcba8be4e6b2', class: 'radio-button-group-container' }, this.showGroupLabel && (h("div", { key: '314ff595785c24d188cf98dc232a9dae19205f44', class: "group-label" }, this.groupLabelText, this.required && h("span", { key: 'fe839163d77957b80d72b7bcf8369a68e7a3d992', class: `required ${this.hasErrors ? 'error' : ''}` }, "*"))), h("div", { key: '018d84f32df0e17743080ac09d98bc030fe09e30', class: `radio-button-group ${this.alignment} ${this.size}` }, h("slot", { key: 'd632718b08c8100e6c8604059f86abfc324e2ba8', onSlotchange: this.handleSlotChange })), this.showCaption ? (h("div", { class: `caption ${this.hasErrors ? 'error' : 'default'}` }, this.showCaptionIcon ? h("div", { class: 'caption-icon' }, h("ifx-icon", { icon: "c-info-16" })) : '', h("div", { class: 'caption-text' }, this.captionText))) : ''));
+        return (h("div", { key: 'dcd66919142f41e8d51054f7de1663361c273232', class: 'radio-button-group-container' }, this.showGroupLabel && (h("div", { key: '7765acb090b78c495b03b17f242b0efacba29a10', class: "group-label" }, this.groupLabelText, this.required && h("span", { key: 'e500cc4867c756991d6e76b77640b6fc1f052296', class: `required ${this.hasErrors ? 'error' : ''}` }, "*"))), h("div", { key: '05211a3727a84a135588bccee63d22c36511cbee', class: `radio-button-group ${this.alignment} ${this.size}` }, h("slot", { key: '4d9cbd4f52276f6c101306208bd6156e01287f2f', onSlotchange: this.handleSlotChange })), this.showCaption ? (h("div", { class: `caption ${this.hasErrors ? 'error' : 'default'}` }, this.showCaptionIcon ? h("div", { class: 'caption-icon' }, h("ifx-icon", { icon: "c-info-16" })) : '', h("div", { class: 'caption-text' }, this.captionText))) : ''));
     }
     static get is() { return "ifx-radio-button-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio-button-group/radio-button-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"radio-button-group.js","sourceRoot":"","sources":["../../../src/components/radio-button-group/radio-button-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, Prop, h, Element, Listen, Method } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-radio-button-group',\r\n styleUrl: 'radio-button-group.scss',\r\n shadow: true,\r\n // formAssociated: true\r\n})\r\n\r\nexport class RadioButtonGroup {\r\n private errorStates: Map<HTMLElement, boolean> = new Map();\r\n\r\n @Element() el: HTMLElement;\r\n @Prop() alignment: 'horizontal' \| 'vertical' = 'vertical';\r\n @Prop() size: string;\r\n @Prop() showGroupLabel: boolean;\r\n @Prop() groupLabelText: string = 'Group Label Text';\r\n @Prop() showCaption: boolean;\r\n @Prop() captionText: string;\r\n @Prop() showCaptionIcon: boolean;\r\n @Prop() required: boolean = false;\r\n @State() hasErrors: boolean = false;\r\n \r\n @Listen('ifxError')\r\n handleRadioButtonError(event: CustomEvent) {\r\n const radioButton = event.target as HTMLElement;\r\n if (radioButton.tagName.toLowerCase() === 'ifx-radio-button') {\r\n this.errorStates.set(radioButton, event.detail);\r\n this.updateHasErrors();\r\n }\r\n }\r\n\r\n // Method to set the error state of all radio-butttons in the group\r\n @Method()\r\n async setGroupError(error: boolean) {\r\n const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\r\n radioButtons.forEach((radioButton) => {\r\n (radioButton as any).error = error;\r\n });\r\n }\r\n\r\n componentWillLoad() {\r\n this.initializeState();\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-radio-button-group', await framework)\r\n }\r\n }\r\n\r\n handleSlotChange = () => {\r\n this.initializeState();\r\n };\r\n\r\n private initializeState() {\r\n this.errorStates.clear();\r\n const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\r\n radioButtons.forEach((radioButton) => {\r\n if (!this.errorStates.has(radioButton)) {\r\n this.errorStates.set(radioButton, (radioButton as any).error \|\| false);\r\n }\r\n });\r\n this.updateHasErrors();\r\n }\r\n\r\n private updateHasErrors() {\r\n console.log('here')\r\n this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\r\n }\r\n\r\n render() {\r\n return (\r\n <div class='radio-button-group-container'>\r\n {this.showGroupLabel && (\r\n <div class=\"group-label\">\r\n {this.groupLabelText}\r\n {this.required && <span class={`required ${this.hasErrors ? 'error' : ''}`}>*</span>}\r\n </div>\r\n )}\r\n <div class={`radio-button-group ${this.alignment} ${this.size}`}>\r\n <slot onSlotchange={this.handleSlotChange} ></slot>\r\n </div>\r\n {this.showCaption ? (\r\n <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\r\n {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\r\n </ifx-icon></div> : ''}\r\n <div class='caption-text'>{this.captionText}</div>\r\n </div>) : ''}\r\n </div>\r\n );\r\n }\r\n}"]}
1	+ {"version":3,"file":"radio-button-group.js","sourceRoot":"","sources":["../../../src/components/radio-button-group/radio-button-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, Prop, h, Element, Listen, Method } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-radio-button-group',\n styleUrl: 'radio-button-group.scss',\n shadow: true,\n // formAssociated: true\n})\n\nexport class RadioButtonGroup {\n private errorStates: Map<HTMLElement, boolean> = new Map();\n\n @Element() el: HTMLElement;\n @Prop() alignment: 'horizontal' \| 'vertical' = 'vertical';\n @Prop() size: string;\n @Prop() showGroupLabel: boolean;\n @Prop() groupLabelText: string = 'Group Label Text';\n @Prop() showCaption: boolean;\n @Prop() captionText: string;\n @Prop() showCaptionIcon: boolean;\n @Prop() required: boolean = false;\n @State() hasErrors: boolean = false;\n \n @Listen('ifxError')\n handleRadioButtonError(event: CustomEvent) {\n const radioButton = event.target as HTMLElement;\n if (radioButton.tagName.toLowerCase() === 'ifx-radio-button') {\n this.errorStates.set(radioButton, event.detail);\n this.updateHasErrors();\n }\n }\n\n // Method to set the error state of all radio-butttons in the group\n @Method()\n async setGroupError(error: boolean) {\n const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\n radioButtons.forEach((radioButton) => {\n (radioButton as any).error = error;\n });\n }\n\n componentWillLoad() {\n this.initializeState();\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-radio-button-group', await framework)\n }\n }\n\n handleSlotChange = () => {\n this.initializeState();\n };\n\n private initializeState() {\n this.errorStates.clear();\n const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\n radioButtons.forEach((radioButton) => {\n if (!this.errorStates.has(radioButton)) {\n this.errorStates.set(radioButton, (radioButton as any).error \|\| false);\n }\n });\n this.updateHasErrors();\n }\n\n private updateHasErrors() {\n console.log('here')\n this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\n }\n\n render() {\n return (\n <div class='radio-button-group-container'>\n {this.showGroupLabel && (\n <div class=\"group-label\">\n {this.groupLabelText}\n {this.required && <span class={`required ${this.hasErrors ? 'error' : ''}`}>*</span>}\n </div>\n )}\n <div class={`radio-button-group ${this.alignment} ${this.size}`}>\n <slot onSlotchange={this.handleSlotChange} ></slot>\n </div>\n {this.showCaption ? (\n <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\n {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\n </ifx-icon></div> : ''}\n <div class='caption-text'>{this.captionText}</div>\n </div>) : ''}\n </div>\n );\n }\n}"]}

package/dist/collection/components/radio-button-group/radio-button-group.stories.js CHANGED Viewed

@@ -142,9 +142,9 @@ const Template = args => {
             radioButtons += `<ifx-radio-button value="${i}" size="${args.size}">Option ${i}</ifx-radio-button>`;
         }
     }
-    const template = `
-        <ifx-radio-button-group alignment="${args.alignment}" show-group-label="${args.showGroupLabel}" group-label-text="${args.groupLabelText}" show-caption="${args.showCaption}" caption-text="${args.captionText}" show-caption-icon="${args.showCaptionIcon}" required="${args.required}">
-            ${radioButtons}
+    const template = `
+        <ifx-radio-button-group alignment="${args.alignment}" show-group-label="${args.showGroupLabel}" group-label-text="${args.groupLabelText}" show-caption="${args.showCaption}" caption-text="${args.captionText}" show-caption-icon="${args.showCaptionIcon}" required="${args.required}">
+            ${radioButtons}
         </ifx-radio-button-group>`;
     return template;
 };

package/dist/collection/components/radio-button-group/radio-button-group.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"radio-button-group.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button-group/radio-button-group.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\r\n title: 'Components/Radio Button Group',\r\n tags: ['autodocs'],\r\n args: {\r\n amountOfItems: 3,\r\n alignment: 'vertical',\r\n size: 'm',\r\n checked: false,\r\n disabled: false,\r\n error: false,\r\n showGroupLabel: false,\r\n groupLabelText: 'Group Label',\r\n showCaption: false,\r\n captionText: 'Caption text, description, error notification',\r\n showCaptionIcon: false,\r\n required: false,\r\n },\r\n argTypes: {\r\n amountOfItems: {\r\n categpry: 'story controls',\r\n name: 'Amount of Items',\r\n description: 'Set the amount of radio buttons.',\r\n control: { type: 'number' },\r\n table: {\r\n category: 'story controls',\r\n defaultValue: { summary: 3 }\r\n }\r\n },\r\n alignment: {\r\n description: 'Set the orientation of the radio button group.',\r\n options: ['vertical', 'horizontal'],\r\n control: { type: 'radio' },\r\n table: {\r\n category: 'ifx-radio-button-group props',\r\n defaultValue: { summary: 'vertical' }\r\n }\r\n },\r\n size: {\r\n description: 'Size options for the radio button.',\r\n options: ['s', 'm'],\r\n control: { type: 'radio' },\r\n table: {\r\n category: 'ifx-radio-button props',\r\n defaultValue: { summary: 's' },\r\n type: {\r\n summary: 's \| m'\r\n }\r\n }\r\n },\r\n checked: {\r\n description: 'Set the checked state.',\r\n control: { type: 'boolean' },\r\n table: {\r\n category: 'ifx-radio-button props',\r\n defaultValue: { summary: 'false' }\r\n }\r\n },\r\n disabled: {\r\n description: 'Disable the radio button.',\r\n control: { type: 'boolean' },\r\n table: {\r\n category: 'ifx-radio-button props',\r\n defaultValue: { summary: 'false' }\r\n }\r\n },\r\n error: {\r\n description: 'Set the error state.',\r\n control: { type: 'boolean' },\r\n table: {\r\n category: 'ifx-radio-button props',\r\n defaultValue: { summary: 'false' }\r\n }\r\n },\r\n showGroupLabel: {\r\n description: 'Show the group label.',\r\n control: { type: 'boolean' },\r\n table: {\r\n category: 'ifx-radio-button-group props',\r\n defaultValue: { summary: 'false' }\r\n }\r\n },\r\n groupLabelText: {\r\n description: 'Set the group label text.',\r\n control: { type: 'text' },\r\n table: {\r\n category: 'ifx-radio-button-group props',\r\n defaultValue: { summary: '' }\r\n }\r\n },\r\n showCaption: {\r\n description: 'Show the caption.',\r\n control: { type: 'boolean' },\r\n table: {\r\n category: 'ifx-radio-button-group props',\r\n defaultValue: { summary: 'false' }\r\n }\r\n },\r\n captionText: {\r\n description: 'Set the caption text.',\r\n control: { type: 'text' },\r\n table: {\r\n category: 'ifx-radio-button-group props',\r\n defaultValue: { summary: '' }\r\n }\r\n },\r\n showCaptionIcon: {\r\n description: 'Show the caption icon.',\r\n control: { type: 'boolean' },\r\n table: {\r\n category: 'ifx-radio-button-group props',\r\n defaultValue: { summary: 'false' }\r\n }\r\n },\r\n required: {\r\n description: 'Marks the radio-button-group as required.',\r\n control: { type: 'boolean' },\r\n table: {\r\n category: 'ifx-radio-button-group props',\r\n defaultValue: { summary: 'false' }\r\n }\r\n },\r\n setGroupError: {\r\n action: 'setGroupError',\r\n description: 'Method to set the error state of all checkboxes in the group.',\r\n table: {\r\n category: 'ifx-radio-buttton-group methods',\r\n type: {\r\n summary: 'error : boolean',\r\n detail: 'RadioButttonGroup.setGroupError(error)'\r\n }\r\n }\r\n }\r\n },\r\n};\r\n\r\nconst Template = args => {\r\n let radioButtons = '';\r\n for (let i = 0; i < args.amountOfItems; i++) {\r\n if (i === 0) {\r\n radioButtons += `<ifx-radio-button value=\"${i}\" disabled=\"${args.disabled}\" checked=\"${args.checked}\" error=\"${args.error}\" size=\"${args.size}\">Option ${i}</ifx-radio-button>`;\r\n }\r\n else {\r\n radioButtons += `<ifx-radio-button value=\"${i}\" size=\"${args.size}\">Option ${i}</ifx-radio-button>`;\r\n }\r\n }\r\n const template = `\r\n <ifx-radio-button-group alignment=\"${args.alignment}\" show-group-label=\"${args.showGroupLabel}\" group-label-text=\"${args.groupLabelText}\" show-caption=\"${args.showCaption}\" caption-text=\"${args.captionText}\" show-caption-icon=\"${args.showCaptionIcon}\" required=\"${args.required}\">\r\n ${radioButtons}\r\n </ifx-radio-button-group>`;\r\n\r\n return template;\r\n}\r\n\r\nexport const Default = Template.bind({});"]}
1	+ {"version":3,"file":"radio-button-group.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button-group/radio-button-group.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\n title: 'Components/Radio Button Group',\n tags: ['autodocs'],\n args: {\n amountOfItems: 3,\n alignment: 'vertical',\n size: 'm',\n checked: false,\n disabled: false,\n error: false,\n showGroupLabel: false,\n groupLabelText: 'Group Label',\n showCaption: false,\n captionText: 'Caption text, description, error notification',\n showCaptionIcon: false,\n required: false,\n },\n argTypes: {\n amountOfItems: {\n categpry: 'story controls',\n name: 'Amount of Items',\n description: 'Set the amount of radio buttons.',\n control: { type: 'number' },\n table: {\n category: 'story controls',\n defaultValue: { summary: 3 }\n }\n },\n alignment: {\n description: 'Set the orientation of the radio button group.',\n options: ['vertical', 'horizontal'],\n control: { type: 'radio' },\n table: {\n category: 'ifx-radio-button-group props',\n defaultValue: { summary: 'vertical' }\n }\n },\n size: {\n description: 'Size options for the radio button.',\n options: ['s', 'm'],\n control: { type: 'radio' },\n table: {\n category: 'ifx-radio-button props',\n defaultValue: { summary: 's' },\n type: {\n summary: 's \| m'\n }\n }\n },\n checked: {\n description: 'Set the checked state.',\n control: { type: 'boolean' },\n table: {\n category: 'ifx-radio-button props',\n defaultValue: { summary: 'false' }\n }\n },\n disabled: {\n description: 'Disable the radio button.',\n control: { type: 'boolean' },\n table: {\n category: 'ifx-radio-button props',\n defaultValue: { summary: 'false' }\n }\n },\n error: {\n description: 'Set the error state.',\n control: { type: 'boolean' },\n table: {\n category: 'ifx-radio-button props',\n defaultValue: { summary: 'false' }\n }\n },\n showGroupLabel: {\n description: 'Show the group label.',\n control: { type: 'boolean' },\n table: {\n category: 'ifx-radio-button-group props',\n defaultValue: { summary: 'false' }\n }\n },\n groupLabelText: {\n description: 'Set the group label text.',\n control: { type: 'text' },\n table: {\n category: 'ifx-radio-button-group props',\n defaultValue: { summary: '' }\n }\n },\n showCaption: {\n description: 'Show the caption.',\n control: { type: 'boolean' },\n table: {\n category: 'ifx-radio-button-group props',\n defaultValue: { summary: 'false' }\n }\n },\n captionText: {\n description: 'Set the caption text.',\n control: { type: 'text' },\n table: {\n category: 'ifx-radio-button-group props',\n defaultValue: { summary: '' }\n }\n },\n showCaptionIcon: {\n description: 'Show the caption icon.',\n control: { type: 'boolean' },\n table: {\n category: 'ifx-radio-button-group props',\n defaultValue: { summary: 'false' }\n }\n },\n required: {\n description: 'Marks the radio-button-group as required.',\n control: { type: 'boolean' },\n table: {\n category: 'ifx-radio-button-group props',\n defaultValue: { summary: 'false' }\n }\n },\n setGroupError: {\n action: 'setGroupError',\n description: 'Method to set the error state of all checkboxes in the group.',\n table: {\n category: 'ifx-radio-buttton-group methods',\n type: {\n summary: 'error : boolean',\n detail: 'RadioButttonGroup.setGroupError(error)'\n }\n }\n }\n },\n};\n\nconst Template = args => {\n let radioButtons = '';\n for (let i = 0; i < args.amountOfItems; i++) {\n if (i === 0) {\n radioButtons += `<ifx-radio-button value=\"${i}\" disabled=\"${args.disabled}\" checked=\"${args.checked}\" error=\"${args.error}\" size=\"${args.size}\">Option ${i}</ifx-radio-button>`;\n }\n else {\n radioButtons += `<ifx-radio-button value=\"${i}\" size=\"${args.size}\">Option ${i}</ifx-radio-button>`;\n }\n }\n const template = `\n <ifx-radio-button-group alignment=\"${args.alignment}\" show-group-label=\"${args.showGroupLabel}\" group-label-text=\"${args.groupLabelText}\" show-caption=\"${args.showCaption}\" caption-text=\"${args.captionText}\" show-caption-icon=\"${args.showCaptionIcon}\" required=\"${args.required}\">\n ${radioButtons}\n </ifx-radio-button-group>`;\n\n return template;\n}\n\nexport const Default = Template.bind({});"]}

package/dist/collection/components/search-bar/search-bar.js CHANGED Viewed

@@ -39,7 +39,7 @@ export class SearchBar {
         this.value = event.detail;
     }
     render() {
-        return (h("div", { key: '3c4c2a5448190651f3b9e41f2712598758abcec9', role: "search", "aria-label": "a search field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { autocomplete: this.autocomplete, disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, h("ifx-icon", { icon: "search-16", slot: "search-icon" })), h("a", { "aria-label": "Close button", href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (h("div", { class: "search-bar_icon-wrapper", onClick: this.handleCloseButton }, h("ifx-icon", { icon: "search-16" })))));
+        return (h("div", { key: '79e53af4741984e201a7c62711236c8091538b7d', role: "search", "aria-label": "a search field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { autocomplete: this.autocomplete, disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, h("ifx-icon", { icon: "search-16", slot: "search-icon" })), h("a", { "aria-label": "Close button", href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (h("div", { class: "search-bar_icon-wrapper", onClick: this.handleCloseButton }, h("ifx-icon", { icon: "search-16" })))));
     }
     static get is() { return "ifx-search-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/search-bar/search-bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"search-bar.js","sourceRoot":"","sources":["../../../src/components/search-bar/search-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking'; \r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-search-bar',\r\n styleUrl: 'search-bar.scss',\r\n shadow: true,\r\n})\r\nexport class SearchBar {\r\n @Prop() isOpen: boolean = true;\r\n @Prop() disabled: boolean = false;\r\n @State() internalState: boolean;\r\n @Prop({ mutable: true }) value: string;\r\n @Prop() maxlength?: number;\r\n @Event() ifxInput: EventEmitter;\r\n @Event() ifxOpen: EventEmitter;\r\n @Prop() autocomplete: string = \"on\";\r\n @Element() el;\r\n\r\n @Method()\r\n async onNavbarMobile() {\r\n this.ifxOpen.emit(false)\r\n this.internalState = false;\r\n }\r\n\r\n @Watch('isOpen')\r\n handlePropChange() {\r\n this.internalState = this.isOpen;\r\n }\r\n\r\n handleCloseButton = () => {\r\n this.internalState = !this.internalState;\r\n this.ifxOpen.emit(this.internalState)\r\n }\r\n\r\n setInitialState() {\r\n this.internalState = this.isOpen;\r\n }\r\n\r\n componentWillLoad() {\r\n this.setInitialState();\r\n this.ifxOpen.emit(this.internalState)\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-search-bar', await framework)\r\n }\r\n }\r\n\r\n handleInput(event: CustomEvent) {\r\n this.value = event.detail;\r\n }\r\n\r\n handleFocus = () => {\r\n this.internalState = true;\r\n }\r\n\r\n\r\n render() {\r\n return (\r\n <div role=\"search\" aria-label=\"a search field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\r\n {this.internalState ? (\r\n <div class=\"search-bar-wrapper\">\r\n <ifx-search-field autocomplete={this.autocomplete} disabled={this.disabled} value={this.value} maxlength={this.maxlength} onIfxInput={this.handleInput.bind(this)}>\r\n <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\r\n </ifx-search-field>\r\n\r\n <a aria-label=\"Close button\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\r\n </div>\r\n ) : (\r\n <div class=\"search-bar_icon-wrapper\"\r\n onClick={this.handleCloseButton}>\r\n <ifx-icon icon=\"search-16\"></ifx-icon>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"search-bar.js","sourceRoot":"","sources":["../../../src/components/search-bar/search-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-search-bar',\n styleUrl: 'search-bar.scss',\n shadow: true,\n})\nexport class SearchBar {\n @Prop() isOpen: boolean = true;\n @Prop() disabled: boolean = false;\n @State() internalState: boolean;\n @Prop({ mutable: true }) value: string;\n @Prop() maxlength?: number;\n @Event() ifxInput: EventEmitter;\n @Event() ifxOpen: EventEmitter;\n @Prop() autocomplete: string = \"on\";\n @Element() el;\n\n @Method()\n async onNavbarMobile() {\n this.ifxOpen.emit(false)\n this.internalState = false;\n }\n\n @Watch('isOpen')\n handlePropChange() {\n this.internalState = this.isOpen;\n }\n\n handleCloseButton = () => {\n this.internalState = !this.internalState;\n this.ifxOpen.emit(this.internalState)\n }\n\n setInitialState() {\n this.internalState = this.isOpen;\n }\n\n componentWillLoad() {\n this.setInitialState();\n this.ifxOpen.emit(this.internalState)\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-search-bar', await framework)\n }\n }\n\n handleInput(event: CustomEvent) {\n this.value = event.detail;\n }\n\n handleFocus = () => {\n this.internalState = true;\n }\n\n\n render() {\n return (\n <div role=\"search\" aria-label=\"a search field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\n {this.internalState ? (\n <div class=\"search-bar-wrapper\">\n <ifx-search-field autocomplete={this.autocomplete} disabled={this.disabled} value={this.value} maxlength={this.maxlength} onIfxInput={this.handleInput.bind(this)}>\n <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\n </ifx-search-field>\n\n <a aria-label=\"Close button\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\n </div>\n ) : (\n <div class=\"search-bar_icon-wrapper\"\n onClick={this.handleCloseButton}>\n <ifx-icon icon=\"search-16\"></ifx-icon>\n </div>\n )}\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/search-bar/search-bar.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"search-bar.stories.js","sourceRoot":"","sources":["../../../src/components/search-bar/search-bar.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\r\n\r\nexport default {\r\n title: 'Components/Search Bar',\r\n // tags: ['autodocs'],\r\n\r\n args: {\r\n disabled: false,\r\n isOpen: true,\r\n value: '',\r\n autocomplete: 'on'\r\n },\r\n\r\n argTypes: {\r\n isOpen: {\r\n description: 'Controls the display of the search bar.',\r\n control: { type: 'boolean' },\r\n table: {\r\n defaultValue: { summary: 'true' },\r\n category: 'ifx-search-bar props',\r\n type: {\r\n summary: 'boolean',\r\n },\r\n },\r\n },\r\n disabled: {\r\n description: 'Disables the search bar.',\r\n control: { type: 'boolean' },\r\n table: {\r\n defaultValue: { summary: 'false' },\r\n category: 'ifx-search-bar props',\r\n type: {\r\n summary: 'boolean',\r\n },\r\n },\r\n },\r\n value: {\r\n description: 'The value is used to handle the search bar input.',\r\n control: { type: 'text' },\r\n table:\r\n {\r\n category: 'ifx-search-bar props',\r\n type: {\r\n summary: 'string',\r\n },\r\n },\r\n },\r\n autocomplete: {\r\n description: 'The value of the search field. It is used for the form submission.',\r\n control: { type: 'text' },\r\n table:\r\n {\r\n category: 'ifx-search-bar props',\r\n type: {\r\n summary: 'string',\r\n },\r\n },\r\n },\r\n maxlength: {\r\n description: 'Maximum input length.',\r\n control: { type: 'number' },\r\n table:\r\n {\r\n category: 'ifx-search-bar props',\r\n type: {\r\n summary: 'number',\r\n },\r\n },\r\n },\r\n ifxInput: {\r\n action: 'ifxInput',\r\n description: 'Custom event emitted on input.',\r\n table: {\r\n category: 'custom events',\r\n type: {\r\n summary: 'Framework integration',\r\n detail: `React: onIfxInput={handleInput}\\nVue:@ifxInput=\"handleInput\"\\nAngular:(ifxInput)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxInput\", (event) => {//handle input});`,\r\n }\r\n }\r\n },\r\n ifxOpen: {\r\n action: 'ifxOpen',\r\n description: 'Custom event emitted when the state of isOpen changes.',\r\n table: {\r\n category: 'custom events',\r\n type: {\r\n summary: 'Framework integration',\r\n detail:\r\n `React: onIfxOpen={handleOpen}\\nVue:@ifxOpen=\"handleOpen\"\\nAngular:(ifxOpen)=\"handleOpen()\"\\nVanillaJs:.addEventListener(\"ifxOpen\", (event) => {//handle open});`,\r\n },\r\n },\r\n },\r\n },\r\n};\r\n\r\nconst DefaultTemplate = ({ isOpen, disabled, maxlength, value, autocomplete }) => {\r\n const element = document.createElement('ifx-search-bar');\r\n element.setAttribute('is-open', isOpen);\r\n element.setAttribute('disabled', disabled);\r\n element.setAttribute('value', value);\r\n element.setAttribute('autocomplete', autocomplete);\r\n element.addEventListener('ifxInput', action('ifxInput'));\r\n element.addEventListener('ifxOpen', action('ifxOpen'));\r\n\r\n if (maxlength != undefined) element.setAttribute('maxlength', maxlength);\r\n\r\n return element;\r\n};\r\n\r\nexport const Default = DefaultTemplate.bind({});\r\nDefault.args = {};\r\n"]}
1	+ {"version":3,"file":"search-bar.stories.js","sourceRoot":"","sources":["../../../src/components/search-bar/search-bar.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Search Bar',\n // tags: ['autodocs'],\n\n args: {\n disabled: false,\n isOpen: true,\n value: '',\n autocomplete: 'on'\n },\n\n argTypes: {\n isOpen: {\n description: 'Controls the display of the search bar.',\n control: { type: 'boolean' },\n table: {\n defaultValue: { summary: 'true' },\n category: 'ifx-search-bar props',\n type: {\n summary: 'boolean',\n },\n },\n },\n disabled: {\n description: 'Disables the search bar.',\n control: { type: 'boolean' },\n table: {\n defaultValue: { summary: 'false' },\n category: 'ifx-search-bar props',\n type: {\n summary: 'boolean',\n },\n },\n },\n value: {\n description: 'The value is used to handle the search bar input.',\n control: { type: 'text' },\n table:\n {\n category: 'ifx-search-bar props',\n type: {\n summary: 'string',\n },\n },\n },\n autocomplete: {\n description: 'The value of the search field. It is used for the form submission.',\n control: { type: 'text' },\n table:\n {\n category: 'ifx-search-bar props',\n type: {\n summary: 'string',\n },\n },\n },\n maxlength: {\n description: 'Maximum input length.',\n control: { type: 'number' },\n table:\n {\n category: 'ifx-search-bar props',\n type: {\n summary: 'number',\n },\n },\n },\n ifxInput: {\n action: 'ifxInput',\n description: 'Custom event emitted on input.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail: `React: onIfxInput={handleInput}\\nVue:@ifxInput=\"handleInput\"\\nAngular:(ifxInput)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxInput\", (event) => {//handle input});`,\n }\n }\n },\n ifxOpen: {\n action: 'ifxOpen',\n description: 'Custom event emitted when the state of isOpen changes.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n `React: onIfxOpen={handleOpen}\\nVue:@ifxOpen=\"handleOpen\"\\nAngular:(ifxOpen)=\"handleOpen()\"\\nVanillaJs:.addEventListener(\"ifxOpen\", (event) => {//handle open});`,\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = ({ isOpen, disabled, maxlength, value, autocomplete }) => {\n const element = document.createElement('ifx-search-bar');\n element.setAttribute('is-open', isOpen);\n element.setAttribute('disabled', disabled);\n element.setAttribute('value', value);\n element.setAttribute('autocomplete', autocomplete);\n element.addEventListener('ifxInput', action('ifxInput'));\n element.addEventListener('ifxOpen', action('ifxOpen'));\n\n if (maxlength != undefined) element.setAttribute('maxlength', maxlength);\n\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\nDefault.args = {};\n"]}