npm - @infineon/infineon-design-system-stencil - Versions diffs - 30.10.0--canary.1696.b831179ac32ae02cdeaa1c4b607f326c7553bc3a.0 → 30.10.0--canary.1702.2f8c24c808faa60bcf4fb75afba38278325cc5a8.0 - Mend

@infineon/infineon-design-system-stencil 30.10.0--canary.1696.b831179ac32ae02cdeaa1c4b607f326c7553bc3a.0 → 30.10.0--canary.1702.2f8c24c808faa60bcf4fb75afba38278325cc5a8.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 (827) hide show

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

@@ -1,15 +1,15 @@
 import { h } from "@stencil/core";
 export class Pagination {
     constructor() {
-        this.CLASS_DISABLED = "disabled";
-        this.CLASS_ACTIVE = "active";
-        this.CLASS_SIBLING_ACTIVE = "active-sibling";
-        this.DATA_KEY = "pagination";
         this.currentPage = 0;
         this.internalPage = 1;
         this.itemsPerPage = 10;
         this.numberOfPages = [];
         this.total = 1;
+        this.CLASS_DISABLED = "disabled";
+        this.CLASS_ACTIVE = "active";
+        this.CLASS_SIBLING_ACTIVE = "active-sibling";
+        this.DATA_KEY = "pagination";
     }
     setItemsPerPage(e) {
         if (e.detail) {
@@ -137,7 +137,7 @@ export class Pagination {
         this.initPagination(paginationElement);
     }
     render() {
-        return (h("div", { key: '4ec9fa157bffc6ab856a582d04607c928124f9c3', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: 'cc0cc98edc93210095ac4695418a3c263c38d251', class: 'items__per-page-wrapper' }, h("div", { key: 'dd3af02f33da94f549387cfaa6f70776ddc84b50', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: 'a2a0593552c88a6a5af114d2c88b717c6c413b18', class: 'items__per-page-field' }, h("ifx-select", { key: 'b0e740e52c0386525f70b5cfe20a27f7fcf88b29', value: 'undefined', size: 's', placeholder: 'false', "show-search": 'false', "search-placeholder-value": 'Search...', disabled: false, error: false, "error-message": 'Error', label: '', "placeholder-value": 'Placeholder', options: '[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]' }))), h("div", { key: '610ee10aefca78fcbd798e11d9cf99b1f60532f0', class: 'items__total-wrapper' }, h("div", { key: '72e303b997ab16d10ecc0a9df4ba73153a49456c', class: 'page__numbers-wrapper' }, h("div", { key: '8383cf3d859477321b01b8c02d09bcab7d3d7552', class: "pagination" }, h("ifx-icon-button", { key: '0d4c16785e157dbf6d0393b001272fcb603ca685', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: '90491f5a10434d0cd5798fdad20f75fe0b0f1b03' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: '889f3f8900feaecfc769af6c6dd833e36690b667', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
+        return (h("div", { key: 'b9e1b525f3a20354d409c93a1aa0faa9d9d17019', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: 'fc932c8e4114f39e5df86007d3595f72fac6384a', class: 'items__per-page-wrapper' }, h("div", { key: '93816bd9264a8cd32d782cc78df9052ab93f76a7', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: '3432585bf8ce77786657f676fdaca27aba34b413', class: 'items__per-page-field' }, h("ifx-select", { key: 'a6def492e7db12fb2d9245a6655aaecb99282ceb', value: 'undefined', size: 's', placeholder: 'false', "show-search": 'false', "search-placeholder-value": 'Search...', disabled: false, error: false, "error-message": 'Error', label: '', "placeholder-value": 'Placeholder', options: '[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]' }))), h("div", { key: '275104906a9d0e733644e2b5efbab477ecfc95ca', class: 'items__total-wrapper' }, h("div", { key: '75528c52f8be0724c332daf2f292c1ec852f6e53', class: 'page__numbers-wrapper' }, h("div", { key: '4e350e7002b1de2e5fc2c16d10b4a035a3bdedad', class: "pagination" }, h("ifx-icon-button", { key: '42a3fe966d4bae2bc90b24709293237a5b57c413', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: '5d5f20215e988d2adc10f842be5b9300f30b1fd1' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: 'ebb0d3ef295477810891b41ca03ae42cdb634cf7', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
     }
     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 } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-pagination',\n styleUrl: 'pagination.scss',\n shadow: true\n})\nexport class Pagination {\n @Element() el;\n @Event() ifxPageChange: EventEmitter;\n @Event() ifxNextPage: EventEmitter;\n @Event() ifxPrevPage: EventEmitter;\n @Prop() currentPage: number = 0;\n @State() internalPage: number = 1;\n @State() itemsPerPage: number = 10;\n @State() numberOfPages: number[] = [];\n @Prop() total: number = 1;\n\n private CLASS_DISABLED = \"disabled\"\n private CLASS_ACTIVE = \"active\"\n private CLASS_SIBLING_ACTIVE = \"active-sibling\"\n private DATA_KEY = \"pagination\";\n\n @Listen('ifxSelect')\n setItemsPerPage(e) {\n if(e.detail) {\n this.itemsPerPage = parseInt(e.detail.label)\n } else { \n this.itemsPerPage = 10;\n }\n }\n\n componentDidLoad() {\n this.calculateVisiblePageIndices()\n var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n let leftArrow = paginationElement.querySelector('.prev')\n this.navigateSinglePage(leftArrow, true)\n\n }\n\n calculateNumberOfPages() {\n if (isNaN(this.currentPage)) {\n this.currentPage = 1;\n }\n const total = this.total <= this.itemsPerPage ? this.itemsPerPage : this.total;\n const itemsPerPage = this.itemsPerPage;\n const totalPageNumber = Math.ceil(total / itemsPerPage);\n\n if (this.currentPage <= 0) {\n this.internalPage = 1;\n } else if (this.currentPage > totalPageNumber) {\n this.internalPage = totalPageNumber;\n } else this.internalPage = this.currentPage;\n\n this.numberOfPages = Array.from({ length: totalPageNumber }, (_, index) => index + 1);\n }\n\n componentWillLoad() {\n this.calculateNumberOfPages()\n }\n\n componentDidUpdate() {\n var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n var listItems = paginationElement.querySelectorAll(\"li\");\n this.addEventListenersToPageItems(listItems, paginationElement)\n\n if (paginationElement.dataset[this.DATA_KEY] < this.numberOfPages) {\n paginationElement.dataset[this.DATA_KEY] = paginationElement.dataset[this.DATA_KEY];\n } else paginationElement.dataset[this.DATA_KEY] = 0;\n\n this.changePage(paginationElement, false)\n }\n\n componentWillUpdate() {\n this.calculateNumberOfPages()\n }\n\n handleEventEmission(currActive) {\n let currentPage = currActive + 1;\n let totalPages = this.numberOfPages.length;\n let prevPage = currActive === 0 ? null : currActive;\n let nextPage = currActive + 2 > totalPages ? null : currActive + 2;\n let itemsPerPage = this.itemsPerPage\n this.ifxPageChange.emit({ currentPage, totalPages, prevPage, nextPage, itemsPerPage })\n }\n\n addEventListenersToPageItems(listItems, paginationContainer) {\n listItems.forEach((item) => {\n item.addEventListener(\"click\", (e) => {\n var parent = paginationContainer;\n let listItems = parent.querySelectorAll(\"li\");\n parent.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(e.currentTarget)\n this.changePage(parent, false)\n });\n });\n }\n\n initPagination(paginationContainer) {\n var listItems = paginationContainer.querySelectorAll(\"li\");\n\n paginationContainer.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(paginationContainer.querySelector(\".active\"));\n\n paginationContainer.querySelector(\".prev\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n paginationContainer.querySelector(\".next\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n\n this.addEventListenersToPageItems(listItems, paginationContainer)\n }\n\n navigateSinglePage(e, initialValue) {\n let el = e;\n if (typeof e.target === 'object') {\n el = e.target\n }\n\n if (!el.classList.contains(this.CLASS_DISABLED)) {\n var parent = el.closest(\".pagination\");\n var currActive = parseInt(parent.dataset[this.DATA_KEY], 10);\n currActive += 1 * (el.classList.contains(\"prev\") ? -1 : 1);\n\n if (currActive === -1) {\n currActive = 0;\n }\n\n parent.dataset[this.DATA_KEY] = currActive;\n this.changePage(parent, initialValue)\n }\n }\n\n changePage(pagination, initialValue) {\n const paginationContainer = pagination;\n var listItems = paginationContainer.querySelectorAll(\"li\");\n var currActive = parseInt(paginationContainer.dataset[this.DATA_KEY], 10);\n\n listItems.forEach((item) => {\n item.classList.remove(this.CLASS_ACTIVE);\n item.classList.remove(this.CLASS_SIBLING_ACTIVE);\n });\n\n if (initialValue && this.internalPage > 1) {\n currActive = Math.floor(this.internalPage - 1);\n paginationContainer.dataset[this.DATA_KEY] = currActive;\n }\n\n this.handleEventEmission(currActive)\n\n listItems[currActive].classList.add(this.CLASS_ACTIVE);\n\n if (currActive === 0) {\n paginationContainer.querySelector(\".prev\").classList.add(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".prev\").disabled = true;\n\n } else {\n listItems[currActive - 1].classList.add(this.CLASS_SIBLING_ACTIVE);\n paginationContainer.querySelector(\".prev\").classList.remove(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".prev\").disabled = false;\n }\n\n if (currActive === (listItems.length - 1)) {\n paginationContainer.querySelector(\".next\").classList.add(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".next\").disabled = true;\n\n } else {\n paginationContainer.querySelector(\".next\").classList.remove(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".next\").disabled = false;\n }\n }\n\n calculateVisiblePageIndices() {\n var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n this.initPagination(paginationElement)\n }\n\n render() {\n return (\n <div aria-label='a pagination' aria-value={this.currentPage} class=\"container\">\n <div class='items__per-page-wrapper'>\n <div class='items__per-page-label'>Results per Page</div>\n <div class='items__per-page-field'>\n <ifx-select\n value='undefined'\n size='s'\n placeholder='false'\n show-search='false'\n search-placeholder-value='Search...'\n disabled={false}\n error={false}\n error-message='Error'\n label=''\n placeholder-value='Placeholder'\n options='[{\"value\":\"ten\",\"label\":\"10\",\"selected\":true}, {\"value\":\"Twenty\",\"label\":\"20\",\"selected\":false}, {\"value\":\"Thirty\",\"label\":\"30\",\"selected\":false}]' >\n </ifx-select>\n </div>\n </div>\n <div class='items__total-wrapper'>\n <div class='page__numbers-wrapper'>\n <div class=\"pagination\">\n <ifx-icon-button variant='secondary' class=\"prev\" color='primary' icon='arrow-left-24'></ifx-icon-button>\n <ol>\n {this.numberOfPages.map((item) =>\n <li class={`${this.internalPage === item ? 'active' : \"\"}`}><a href={undefined}>{item}</a></li>)}\n </ol>\n <ifx-icon-button class=\"next\" variant='secondary' color='primary' icon='arrow-right-24'></ifx-icon-button>\n </div>\n </div>\n </div>\n </div>\n );\n }\n}"]}
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 } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-pagination',\n styleUrl: 'pagination.scss',\n shadow: true\n})\nexport class Pagination {\n @Element() el;\n @Event() ifxPageChange: EventEmitter;\n @Event() ifxNextPage: EventEmitter;\n @Event() ifxPrevPage: EventEmitter;\n @Prop() currentPage: number = 0;\n @State() internalPage: number = 1;\n @State() itemsPerPage: number = 10;\n @State() numberOfPages: number[] = [];\n @Prop() total: number = 1;\n\n private CLASS_DISABLED = \"disabled\"\n private CLASS_ACTIVE = \"active\"\n private CLASS_SIBLING_ACTIVE = \"active-sibling\"\n private DATA_KEY = \"pagination\";\n\n @Listen('ifxSelect')\n setItemsPerPage(e) {\n if(e.detail) {\n this.itemsPerPage = parseInt(e.detail.label)\n } else { \n this.itemsPerPage = 10;\n }\n }\n\n componentDidLoad() {\n this.calculateVisiblePageIndices()\n var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n let leftArrow = paginationElement.querySelector('.prev')\n this.navigateSinglePage(leftArrow, true)\n\n }\n\n calculateNumberOfPages() {\n if (isNaN(this.currentPage)) {\n this.currentPage = 1;\n }\n const total = this.total <= this.itemsPerPage ? this.itemsPerPage : this.total;\n const itemsPerPage = this.itemsPerPage;\n const totalPageNumber = Math.ceil(total / itemsPerPage);\n\n if (this.currentPage <= 0) {\n this.internalPage = 1;\n } else if (this.currentPage > totalPageNumber) {\n this.internalPage = totalPageNumber;\n } else this.internalPage = this.currentPage;\n\n this.numberOfPages = Array.from({ length: totalPageNumber }, (_, index) => index + 1);\n }\n\n componentWillLoad() {\n this.calculateNumberOfPages()\n }\n\n componentDidUpdate() {\n var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n var listItems = paginationElement.querySelectorAll(\"li\");\n this.addEventListenersToPageItems(listItems, paginationElement)\n\n if (paginationElement.dataset[this.DATA_KEY] < this.numberOfPages) {\n paginationElement.dataset[this.DATA_KEY] = paginationElement.dataset[this.DATA_KEY];\n } else paginationElement.dataset[this.DATA_KEY] = 0;\n\n this.changePage(paginationElement, false)\n }\n\n componentWillUpdate() {\n this.calculateNumberOfPages()\n }\n\n handleEventEmission(currActive) {\n let currentPage = currActive + 1;\n let totalPages = this.numberOfPages.length;\n let prevPage = currActive === 0 ? null : currActive;\n let nextPage = currActive + 2 > totalPages ? null : currActive + 2;\n let itemsPerPage = this.itemsPerPage\n this.ifxPageChange.emit({ currentPage, totalPages, prevPage, nextPage, itemsPerPage })\n }\n\n addEventListenersToPageItems(listItems, paginationContainer) {\n listItems.forEach((item) => {\n item.addEventListener(\"click\", (e) => {\n var parent = paginationContainer;\n let listItems = parent.querySelectorAll(\"li\");\n parent.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(e.currentTarget)\n this.changePage(parent, false)\n });\n });\n }\n\n initPagination(paginationContainer) {\n var listItems = paginationContainer.querySelectorAll(\"li\");\n\n paginationContainer.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(paginationContainer.querySelector(\".active\"));\n\n paginationContainer.querySelector(\".prev\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n paginationContainer.querySelector(\".next\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n\n this.addEventListenersToPageItems(listItems, paginationContainer)\n }\n\n navigateSinglePage(e, initialValue) {\n let el = e;\n if (typeof e.target === 'object') {\n el = e.target\n }\n\n if (!el.classList.contains(this.CLASS_DISABLED)) {\n var parent = el.closest(\".pagination\");\n var currActive = parseInt(parent.dataset[this.DATA_KEY], 10);\n currActive += 1 * (el.classList.contains(\"prev\") ? -1 : 1);\n\n if (currActive === -1) {\n currActive = 0;\n }\n\n parent.dataset[this.DATA_KEY] = currActive;\n this.changePage(parent, initialValue)\n }\n }\n\n changePage(pagination, initialValue) {\n const paginationContainer = pagination;\n var listItems = paginationContainer.querySelectorAll(\"li\");\n var currActive = parseInt(paginationContainer.dataset[this.DATA_KEY], 10);\n\n listItems.forEach((item) => {\n item.classList.remove(this.CLASS_ACTIVE);\n item.classList.remove(this.CLASS_SIBLING_ACTIVE);\n });\n\n if (initialValue && this.internalPage > 1) {\n currActive = Math.floor(this.internalPage - 1);\n paginationContainer.dataset[this.DATA_KEY] = currActive;\n }\n\n this.handleEventEmission(currActive)\n\n listItems[currActive].classList.add(this.CLASS_ACTIVE);\n\n if (currActive === 0) {\n paginationContainer.querySelector(\".prev\").classList.add(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".prev\").disabled = true;\n\n } else {\n listItems[currActive - 1].classList.add(this.CLASS_SIBLING_ACTIVE);\n paginationContainer.querySelector(\".prev\").classList.remove(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".prev\").disabled = false;\n }\n\n if (currActive === (listItems.length - 1)) {\n paginationContainer.querySelector(\".next\").classList.add(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".next\").disabled = true;\n\n } else {\n paginationContainer.querySelector(\".next\").classList.remove(this.CLASS_DISABLED);\n paginationContainer.querySelector(\".next\").disabled = false;\n }\n }\n\n calculateVisiblePageIndices() {\n var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n this.initPagination(paginationElement)\n }\n\n render() {\n return (\n <div aria-label='a pagination' aria-value={this.currentPage} class=\"container\">\n <div class='items__per-page-wrapper'>\n <div class='items__per-page-label'>Results per Page</div>\n <div class='items__per-page-field'>\n <ifx-select\n value='undefined'\n size='s'\n placeholder='false'\n show-search='false'\n search-placeholder-value='Search...'\n disabled={false}\n error={false}\n error-message='Error'\n label=''\n placeholder-value='Placeholder'\n options='[{\"value\":\"ten\",\"label\":\"10\",\"selected\":true}, {\"value\":\"Twenty\",\"label\":\"20\",\"selected\":false}, {\"value\":\"Thirty\",\"label\":\"30\",\"selected\":false}]' >\n </ifx-select>\n </div>\n </div>\n <div class='items__total-wrapper'>\n <div class='page__numbers-wrapper'>\n <div class=\"pagination\">\n <ifx-icon-button variant='secondary' class=\"prev\" color='primary' icon='arrow-left-24'></ifx-icon-button>\n <ol>\n {this.numberOfPages.map((item) =>\n <li class={`${this.internalPage === item ? 'active' : \"\"}`}><a href={undefined}>{item}</a></li>)}\n </ol>\n <ifx-icon-button class=\"next\" variant='secondary' color='primary' icon='arrow-right-24'></ifx-icon-button>\n </div>\n </div>\n </div>\n </div>\n );\n }\n}"]}

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

@@ -2,9 +2,7 @@ import { h } from "@stencil/core";
 export class ProgressBar {
     constructor() {
         this.value = 0;
-        this.size = undefined;
         this.showLabel = false;
-        this.internalValue = undefined;
     }
     valueChanged(newValue, oldValue) {
         if (newValue !== oldValue) {
@@ -15,7 +13,7 @@ export class ProgressBar {
         this.internalValue = this.value;
     }
     render() {
-        return (h("div", { key: '1360676ba210ec95fdfb385aa9bcf358da7a7317', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, h("div", { key: 'd8ec99d808b55c36c25bdbc3c398927aecdc444c', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: 'd5277e0a9a6f3cf021588388ad62e55a3e9dc483', class: "label" }, `${this.internalValue}%`))));
+        return (h("div", { key: '9357496a783f4b3e1b044ab4d706ee83e443dd58', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, h("div", { key: '29fd4c791396b927456b4fc514fdbada0d03bc7f', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: '945e380d7991c53930f1b3ebc396cfec1bc06d31', 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,MAAM,eAAe,CAAC;AAQjE,MAAM,OAAO,WAAW~~;;qBACE~~,CAAC~~;;yBAEI~~,KAAK~~;;;IAKlC~~,YAAY,CAAC,QAAgB,EAAE,QAAgB;QAC7C,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC1B,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;QAChC,CAAC;IACH,CAAC;IAGD,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;IAClC,CAAC;IAID,MAAM;QACJ,OAAO,CACL,0EAAgB,gBAAgB,gBAAa,IAAI,CAAC,KAAK,EAAG,KAAK,EAAE,gBAAgB,IAAI,CAAC,IAAI,EAAE;YAC1F,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 } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-progress-bar',\n styleUrl: 'progress-bar.scss',\n shadow: true\n})\nexport class ProgressBar {\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 \n componentWillLoad() {\n this.internalValue = this.value;\n }\n\n\n\n render() {\n return (\n <div aria-label='a progress bar' aria-value={this.value} 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"]}
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,MAAM,eAAe,CAAC;AAQjE,MAAM,OAAO,WAAW;IALxB;QAMU,UAAK,GAAW,CAAC,CAAC;QAElB,cAAS,GAAY,KAAK,CAAC;KA2BpC;IAtBC,YAAY,CAAC,QAAgB,EAAE,QAAgB;QAC7C,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC1B,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;QAChC,CAAC;IACH,CAAC;IAGD,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;IAClC,CAAC;IAID,MAAM;QACJ,OAAO,CACL,0EAAgB,gBAAgB,gBAAa,IAAI,CAAC,KAAK,EAAG,KAAK,EAAE,gBAAgB,IAAI,CAAC,IAAI,EAAE;YAC1F,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 } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-progress-bar',\n styleUrl: 'progress-bar.scss',\n shadow: true\n})\nexport class ProgressBar {\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 \n componentWillLoad() {\n this.internalValue = this.value;\n }\n\n\n\n render() {\n return (\n <div aria-label='a progress bar' aria-value={this.value} 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/radio-button/radio-button.js CHANGED Viewed

@@ -2,35 +2,19 @@ import { h } from "@stencil/core";
 export class RadioButton {
     constructor() {
         this.disabled = false;
-        this.value = undefined;
         this.error = false;
         this.size = "s";
-        this.name = undefined;
-        this.checked = undefined;
         this.internalChecked = false;
         this.hasSlot = true;
-        this.inputElement = undefined;
     }
-    /**
-     * @returns whether the radio button is checked.
-     */
     async isChecked() {
         return this.internalChecked;
     }
     componentWillLoad() {
         if (this.checked)
             this.internalChecked = this.checked;
-        const slot = this.el.innerHTML;
-        if (slot) {
-            this.hasSlot = true;
-        }
-        else
-            this.hasSlot = false;
+        this.hasSlot = !!this.el.innerHTML.trim();
     }
-    /**
-     * Click the hidden input element to let it handle the state
-     * and emit ifxChange event.
-     */
     handleRadioButtonClick(event) {
         if (this.disabled) {
             event.stopPropagation();
@@ -39,27 +23,27 @@ export class RadioButton {
         this.inputElement.click();
         this.internalChecked = this.inputElement.checked;
         this.ifxChange.emit(this.internalChecked);
+        const changeEvent = new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: { checked: this.internalChecked }
+        });
+        this.el.dispatchEvent(changeEvent);
     }
-    /**
-     * Listen to all change events.
-     * Needed to get informed when another button of the group gets chcked
-     * and this one needs to become unchecked.
-     *
-     * @param event
-     */
     handleChange(event) {
         const target = event.target;
-        if (target.name === this.name) {
-            this.internalChecked = this.inputElement.checked;
+        if (target === this.el)
+            return; // Ignore self
+        const targetName = target.getAttribute('name');
+        if (targetName === this.name) {
+            this.internalChecked = false;
         }
     }
     render() {
-        return (h("div", { key: 'eb9564d85cfbf52109f17dfc625afa795f46426e', "aria-label": 'a radio button', "aria-value": this.value, "aria-disabled": this.disabled, class: `radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`, onClick: this.handleRadioButtonClick.bind(this) }, h("div", { key: '02b349d4679490ffc4b17c30085b17b753054f84', class: `radioButton__wrapper
-          ${this.internalChecked ? 'checked' : ''}
-          ${this.disabled ? 'disabled' : ''}
-          ${this.error ? 'error' : ''}`, tabIndex: this.disabled ? -1 : 0 }, this.internalChecked && h("div", { key: 'd499d0fecff0a3fb7dc17d9777b4cf31dc16c4c4', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: 'c05c54192fb889c3fc5a39adc13a0c69f901c4f9', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '5f7c2b3a2140943974f0b0114e7ec749c7d1c7d5' }))), h("input", { key: '3e3c791991126e2273f7066d7ca9a9674125171e', 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: 'e2bab242bf517965fdb13319e5d606ebf59a7762', class: `radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`, onClick: this.handleRadioButtonClick.bind(this) }, h("div", { key: '97ad1b8b8c32ddccd0e6b379df7204c9c3501f15', class: `radioButton__wrapper ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''} ${this.error ? 'error' : ''}` }, this.internalChecked && h("div", { key: '2c17723f0668c0f8cdf4bc89060b6e311dbfc2d7', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: '261fd82b225120972649b3d4089dd4e5396ef3fc', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '70827f05d7d2be0610c8c8059511da5684d86ce0' }))), h("input", { key: '6e420ec0c2d5cdb735d29f6cf46924b5a78dc5f4', 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"; }
     static get originalStyleUrls() {
         return {
             "$": ["radio-button.scss"]
@@ -168,7 +152,7 @@ export class RadioButton {
                 "getter": false,
                 "setter": false,
                 "attribute": "name",
-                "reflect": false
+                "reflect": true
             },
             "checked": {
                 "type": "boolean",
@@ -232,10 +216,7 @@ export class RadioButton {
                 },
                 "docs": {
                     "text": "",
-                    "tags": [{
-                            "name": "returns",
-                            "text": "whether the radio button is checked."
-                        }]
+                    "tags": []
                 }
             }
         };
@@ -245,7 +226,7 @@ export class RadioButton {
         return [{
                 "name": "change",
                 "method": "handleChange",
-                "target": "window",
+                "target": "document",
                 "capture": false,
                 "passive": false
             }];

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":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;~~AASxG~~,MAAM,OAAO,WAAW~~;;wBAEM~~,KAAK~~;;qBAER~~,KAAK;~~oBACJ~~,GAAG~~;;;+BAGO~~,KAAK;~~uBACb~~,IAAI~~;;;IAMhC;;OAEG~~;~~IAEH~~,KAAK,CAAC,SAAS;QACb,OAAO,IAAI,CAAC,eAAe,CAAC;IAC9B,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;QACtD,~~MAAM,~~IAAI,~~GAAG~~,~~IAAI~~,~~CAAC~~,~~EAAE,~~CAAC,~~SAAS,~~CAAC~~;QAC/B~~,IAAI,~~IAAI~~,EAAE,CAAC~~;YACT~~,~~IAAI~~,CAAC,~~OAAO,GAAG,~~IAAI,~~CAAC;QACtB~~,CAAC~~;;YAAM,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC~~;~~IAC9B~~,CAAC;~~IAGD;;;OAGG;IACH~~,sBAAsB,CAAC,KAAmB;QACxC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QAC1B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;QACjD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;~~IAC5C~~,CAAC;~~IAED;;;;;;OAMG~~;~~IAEH~~,YAAY,CAAC,KAAY;QACvB,MAAM,MAAM,GAAG,KAAK,CAAC,~~MAA0B~~,CAAC;~~QAChD~~,IAAI,MAAM,~~CAAC,IAAI,~~KAAK,IAAI,CAAC,~~IAAI,~~EAAE,CAAC;~~YAC9B~~,~~IAAI~~,~~CAAC~~,~~eAAe,~~GAAG,~~IAAI~~,CAAC,YAAY,CAAC,~~OAAO~~,CAAC~~;QACnD~~,CAAC;~~IACH~~,~~CAAC;IAED~~,~~MAAM;QACJ~~,~~OAAO~~,~~CACL~~,~~0EACa~~,~~gBAAgB~~,~~gBAAa~~,IAAI,CAAC,KAAK,~~mBAAiB~~,~~IAAI~~,CAAC,~~QAAQ~~,~~EAChF~~,KAAK,EAAE,0BAA0B,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,EAC/E,OAAO,EAAE,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC;YAE/C,~~4DACE~~,KAAK,EAAE~~;YACL~~,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE~~;YACrC~~,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE~~;YAC/B~~,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,~~EAC7B~~,~~QAAQ,EAAE,~~IAAI,CAAC,~~QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAE/B,IAAI,CAAC,~~eAAe,IAAI,4DAAK,KAAK,EAAC,2BAA2B,GAAO,CAClE;YACL,IAAI,CAAC,OAAO,IAAI,CACf,4DAAK,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;gBAC1F,8DAAQ,CACJ,CACP;YACD,8DACE,IAAI,EAAC,OAAO,EACZ,MAAM,QACN,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,GAAG,~~EAAsB~~,~~EACrD~~,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,~~GAAU~~,~~CAC3C~~,CACP,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Method } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-radio-button',\n styleUrl: 'radio-button.scss',\n shadow: ~~false~~,\n formAssociated: false\n})\nexport class RadioButton {\n @Element() el;\n @Prop() disabled: boolean = false;\n @Prop() value: string;\n @Prop() error: boolean = false;\n @Prop() size: \"s\" \| \"m\" = \"s\";\n @Prop() name: string;\n @Prop() checked: boolean;\n @State() internalChecked: boolean = false;\n @State() hasSlot: boolean = true;\n\n @State() inputElement: HTMLInputElement;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n\n /*\n @~~returns whether the radio button is checked.\n /\n @~~Method()\n async isChecked(): Promise<boolean> {\n return this.internalChecked;\n }\n \n componentWillLoad() {\n if (this.checked) this.internalChecked = this.checked;\n ~~const~~ ~~slot~~ = this.el.innerHTML~~;\n if~~ (~~slot~~) ~~{\n this.hasSlot = true~~;\n ~~} else this.hasSlot = false;\n~~ }\n\n\n ~~/\n Click the hidden input element to let it handle the state\n * and emit ifxChange event.\n /\n~~ handleRadioButtonClick(event: PointerEvent) {\n if (this.disabled) {\n event.stopPropagation();\n return;\n }\n\n this.inputElement.click();\n this.internalChecked = this.inputElement.checked;\n this.ifxChange.emit(this.internalChecked);\n }\n\n /\n ~~Listen~~ to ~~all~~ change ~~events.\~~n * ~~Needed~~ to ~~get~~ ~~informed~~ ~~when~~ ~~another button of the group gets chcked~~ \n * and this ~~one needs to become unchecked~~. \n * \n * @param event \n */\n @Listen('change', { target: '~~window~~' }) \n handleChange(event: Event) {\n const target = event.target as ~~HTMLInputElement~~;\n if (target.name === this.name) {\n this.internalChecked = ~~this.inputElement.checked~~;\n }\n }\n\n render() {\n return (\n <div\n ~~aria-label='a radio button' aria-value={this.value} aria-disabled={this.disabled}\n~~ class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n onClick={this.handleRadioButtonClick.bind(this)}\n >\n <div\n class={`radioButton__wrapper \n ${this.internalChecked ? 'checked' : ''} \n ${this.disabled ? 'disabled' : ''} \n ${this.error ? 'error' : ''}`}~~\n tabIndex={this.disabled ? -1 : 0}\n~~ >\n {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n </div>\n {this.hasSlot && (\n <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n <slot />\n </div>\n )}\n <input\n type=\"radio\" \n hidden \n ref={el => this.inputElement = el ~~as HTMLInputElement~~} \n name={this.name} \n value={this.value}\n checked={this.internalChecked} \n disabled={this.disabled}\n onClick={(e) => e.stopPropagation()}~~></input>\~~n </div>\n );\n }\n}\n"]}
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, Method } from '@stencil/core';\n\n@Component({\n tag: 'ifx-radio-button',\n styleUrl: 'radio-button.scss',\n shadow: true,\n formAssociated: false\n})\nexport class RadioButton {\n @Element() el: HTMLElement;\n @Prop() disabled: boolean = false;\n @Prop() value: string;\n @Prop() error: boolean = false;\n @Prop() size: \"s\" \| \"m\" = \"s\";\n @Prop({ reflect: true }) name: string; // Reflect prop to attribute\n @Prop() checked: boolean;\n @State() internalChecked: boolean = false;\n @State() hasSlot: boolean = true;\n @State() inputElement: HTMLInputElement;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n\n @Method()\n async isChecked(): Promise<boolean> {\n return this.internalChecked;\n }\n\n componentWillLoad() {\n if (this.checked) this.internalChecked = this.checked;\n this.hasSlot = !!this.el.innerHTML.trim();\n }\n\n handleRadioButtonClick(event: PointerEvent) {\n if (this.disabled) {\n event.stopPropagation();\n return;\n }\n\n this.inputElement.click();\n this.internalChecked = this.inputElement.checked;\n this.ifxChange.emit(this.internalChecked);\n\n 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('change', { target: 'document' })\n handleChange(event: Event) {\n const target = event.target as HTMLElement;\n if (target === this.el) return; // Ignore self\n\n const targetName = target.getAttribute('name');\n if (targetName === this.name) {\n this.internalChecked = false;\n }\n }\n\n render() {\n return (\n <div\n class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n onClick={this.handleRadioButtonClick.bind(this)}\n >\n <div class={`radioButton__wrapper ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''} ${this.error ? 'error' : ''}`}>\n {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n </div>\n {this.hasSlot && (\n <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n <slot />\n </div>\n )}\n <input\n type=\"radio\"\n hidden\n ref={el => this.inputElement = el}\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/search-bar/search-bar.js CHANGED Viewed

@@ -1,6 +1,8 @@
 import { h } from "@stencil/core";
 export class SearchBar {
     constructor() {
+        this.isOpen = true;
+        this.disabled = false;
         this.handleCloseButton = () => {
             this.internalState = !this.internalState;
             this.ifxSearchBarIsOpen.emit(this.internalState);
@@ -8,11 +10,6 @@ export class SearchBar {
         this.handleFocus = () => {
             this.internalState = true;
         };
-        this.isOpen = true;
-        this.disabled = false;
-        this.internalState = undefined;
-        this.value = undefined;
-        this.maxlength = undefined;
     }
     async onNavbarMobile() {
         this.ifxSearchBarIsOpen.emit(false);
@@ -32,7 +29,7 @@ export class SearchBar {
         this.value = event.detail;
     }
     render() {
-        return (h("div", { key: '8aeeaed36f3008374b1cdbb0d2038ba613f02fbe', "aria-label": 'a search bar', "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { 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", { tabindex: "-1", 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: '80312faf68e6b0af2260c977d53f23b42067813f', "aria-label": 'a search bar', "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { 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", { tabindex: "-1", 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":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAQvG,MAAM,OAAO,SAAS~~;;QAqBpB~~,sBAAiB,GAAG,GAAG,EAAE;YACvB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;YACzC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;QAClD,CAAC,CAAA;QAkBD,gBAAW,GAAG,GAAG,EAAE;YACjB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC5B,CAAC,CAAA;~~sBA3CyB,IAAI~~;~~wBACF~~,KAAK~~;;;;;IASjC~~,~~KAAK,~~CAAC,cAAc;QAClB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACnC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC7B,CAAC;IAGD,gBAAgB;QACd,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;IACnC,CAAC;IAOD,eAAe;QACb,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;IACnC,CAAC;IAID,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;IAClD,CAAC;IAGD,WAAW,CAAC,KAAkB;QAC5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;IAC5B,CAAC;IAOD,MAAM;QACJ,OAAO,CACL,0EAAgB,cAAc,mBAAgB,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,cAAc,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EAAE,IACvH,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACpB,WAAK,KAAK,EAAC,oBAAoB;YAC7B,wBAAkB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;gBAC9H,gBAAU,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,aAAa,GAAY,CACxC;YAEnB,SAAG,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,oBAAoB,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,YAAW,CACjF,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB;YACnE,gBAAU,IAAI,EAAC,WAAW,GAAY,CAClC,CACP,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-search-bar',\n styleUrl: 'search-bar.scss',\n shadow: true,\n})\nexport class SearchBar {\n @Prop() isOpen: boolean = true;\n @Prop() disabled: boolean = false;\n @State() internalState: boolean;\n @Prop({ mutable: true }) value: string;\n @Prop() maxlength?: number;\n @Event() ifxInput: EventEmitter;\n @Event() ifxSearchBarIsOpen: EventEmitter;\n @Element() el;\n\n @Method()\n async onNavbarMobile() {\n this.ifxSearchBarIsOpen.emit(false)\n this.internalState = false;\n }\n\n @Watch('isOpen')\n handlePropChange() {\n this.internalState = this.isOpen;\n }\n\n handleCloseButton = () => {\n this.internalState = !this.internalState;\n this.ifxSearchBarIsOpen.emit(this.internalState)\n }\n\n setInitialState() {\n this.internalState = this.isOpen;\n }\n\n \n\n componentWillLoad() {\n this.setInitialState();\n this.ifxSearchBarIsOpen.emit(this.internalState)\n }\n\n\n handleInput(event: CustomEvent) {\n this.value = event.detail;\n }\n\n handleFocus = () => {\n this.internalState = true;\n }\n\n\n render() {\n return (\n <div aria-label='a search bar' aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\n {this.internalState ? (\n <div class=\"search-bar-wrapper\">\n <ifx-search-field disabled={this.disabled} value={this.value} maxlength={this.maxlength} onIfxInput={this.handleInput.bind(this)}>\n <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\n </ifx-search-field>\n\n <a tabindex=\"-1\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\n </div>\n ) : (\n <div class=\"search-bar__icon-wrapper\" onClick={this.handleCloseButton}>\n <ifx-icon icon=\"search-16\"></ifx-icon>\n </div>\n )}\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"search-bar.js","sourceRoot":"","sources":["../../../src/components/search-bar/search-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAQvG,MAAM,OAAO,SAAS;IALtB;QAMU,WAAM,GAAY,IAAI,CAAC;QACvB,aAAQ,GAAY,KAAK,CAAC;QAmBlC,sBAAiB,GAAG,GAAG,EAAE;YACvB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;YACzC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;QAClD,CAAC,CAAA;QAkBD,gBAAW,GAAG,GAAG,EAAE;YACjB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC5B,CAAC,CAAA;KAsBF;IAvDC,KAAK,CAAC,cAAc;QAClB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACnC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC7B,CAAC;IAGD,gBAAgB;QACd,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;IACnC,CAAC;IAOD,eAAe;QACb,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;IACnC,CAAC;IAID,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;IAClD,CAAC;IAGD,WAAW,CAAC,KAAkB;QAC5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;IAC5B,CAAC;IAOD,MAAM;QACJ,OAAO,CACL,0EAAgB,cAAc,mBAAgB,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,cAAc,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EAAE,IACvH,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACpB,WAAK,KAAK,EAAC,oBAAoB;YAC7B,wBAAkB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;gBAC9H,gBAAU,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,aAAa,GAAY,CACxC;YAEnB,SAAG,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,oBAAoB,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,YAAW,CACjF,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB;YACnE,gBAAU,IAAI,EAAC,WAAW,GAAY,CAClC,CACP,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-search-bar',\n styleUrl: 'search-bar.scss',\n shadow: true,\n})\nexport class SearchBar {\n @Prop() isOpen: boolean = true;\n @Prop() disabled: boolean = false;\n @State() internalState: boolean;\n @Prop({ mutable: true }) value: string;\n @Prop() maxlength?: number;\n @Event() ifxInput: EventEmitter;\n @Event() ifxSearchBarIsOpen: EventEmitter;\n @Element() el;\n\n @Method()\n async onNavbarMobile() {\n this.ifxSearchBarIsOpen.emit(false)\n this.internalState = false;\n }\n\n @Watch('isOpen')\n handlePropChange() {\n this.internalState = this.isOpen;\n }\n\n handleCloseButton = () => {\n this.internalState = !this.internalState;\n this.ifxSearchBarIsOpen.emit(this.internalState)\n }\n\n setInitialState() {\n this.internalState = this.isOpen;\n }\n\n \n\n componentWillLoad() {\n this.setInitialState();\n this.ifxSearchBarIsOpen.emit(this.internalState)\n }\n\n\n handleInput(event: CustomEvent) {\n this.value = event.detail;\n }\n\n handleFocus = () => {\n this.internalState = true;\n }\n\n\n render() {\n return (\n <div aria-label='a search bar' aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\n {this.internalState ? (\n <div class=\"search-bar-wrapper\">\n <ifx-search-field disabled={this.disabled} value={this.value} maxlength={this.maxlength} onIfxInput={this.handleInput.bind(this)}>\n <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\n </ifx-search-field>\n\n <a tabindex=\"-1\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\n </div>\n ) : (\n <div class=\"search-bar__icon-wrapper\" onClick={this.handleCloseButton}>\n <ifx-icon icon=\"search-16\"></ifx-icon>\n </div>\n )}\n </div>\n );\n }\n}\n"]}

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

@@ -2,6 +2,15 @@ import { h } from "@stencil/core";
 import classNames from "classnames";
 export class SearchField {
     constructor() {
+        this.value = '';
+        this.insideDropdown = false;
+        this.showDeleteIcon = false;
+        this.showDeleteIconInternalState = false;
+        this.disabled = false;
+        this.size = 'l';
+        this.isFocused = false;
+        this.placeholder = "Search...";
+        this.maxlength = null;
         this.handleInput = () => {
             const query = this.inputElement.value;
             this.value = query; // update the value property when input changes
@@ -12,15 +21,6 @@ export class SearchField {
             this.value = "";
             this.ifxInput.emit(this.value);
         };
-        this.value = '';
-        this.insideDropdown = false;
-        this.showDeleteIcon = false;
-        this.showDeleteIconInternalState = false;
-        this.disabled = false;
-        this.size = 'l';
-        this.isFocused = false;
-        this.placeholder = "Search...";
-        this.maxlength = null;
     }
     handleOutsideClick(event) {
         const path = event.composedPath();
@@ -45,7 +45,7 @@ export class SearchField {
             this.showDeleteIconInternalState = false;
     }
     render() {
-        return (h("div", { key: 'b4bf335d114d109dc89ac8afd5318e356e0edad4', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: '2f2244878a1e0992518c0cc1fb9ce9b037c67841', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, h("ifx-icon", { key: '245f34626f4c5ee2cb62953d82795bdaf711401d', icon: "search-16", class: "search-icon" }), h("input", { key: '2ac3d180884af394d8be42d6fd0776908abd5a4b', ref: (el) => (this.inputElement = el), type: "text", onInput: () => this.handleInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value }), this.showDeleteIcon && this.showDeleteIconInternalState ? (h("ifx-icon", { icon: "cremove16", class: "delete-icon", onClick: this.handleDelete })) : null)));
+        return (h("div", { key: '0eda7329a6ec9ee7f24d5c7765f7611698a1dbae', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: 'c1d6f47b987bfb7f0505210fbd64e95db58b688e', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, h("ifx-icon", { key: '7fc1c3cd5ba67ebfe032b0a9bbab6ae7b262d7a2', icon: "search-16", class: "search-icon" }), h("input", { key: '461edc1ee971753ce0ed4fb18db7115b3b74c6b9', ref: (el) => (this.inputElement = el), type: "text", onInput: () => this.handleInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value }), this.showDeleteIcon && this.showDeleteIconInternalState ? (h("ifx-icon", { icon: "cremove16", class: "delete-icon", onClick: this.handleDelete })) : null)));
     }
     getSizeClass() {
         return `${this.size}` === "s"

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

	@@ -1 +1 @@
1	- {"version":3,"file":"search-field.js","sourceRoot":"","sources":["../../../src/components/search-field/search-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAgB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,UAAU,MAAM,YAAY,CAAC;AAWpC,MAAM,OAAO,WAAW~~;;QA+BtB~~,gBAAW,GAAG,GAAG,EAAE;YACjB,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;YACtC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,+CAA+C;YACnE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC,CAAC;QAEF,iBAAY,GAAG,GAAG,EAAE;YAClB,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,EAAE,CAAC;YAC7B,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAChB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC,CAAA;~~qBAvCwC,EAAE~~;~~8BAGR~~,~~KAAK;8BAEN,KAAK;2CACS,KAAK;wBACzB,KAAK;oBACV,GAAG;yBACI,KAAK;2BACL,WAAW;yBACZ,IAAI;;IAGjC,~~kBAAkB,CAAC,KAAiB;QAClC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;QAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC;YACtC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;IACH,CAAC;IAGD,YAAY,CAAC,QAAgB;QAC3B,IAAI,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;YACzC,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,QAAQ,CAAC;QACrC,CAAC;IACH,CAAC;IAeD,UAAU;QACR,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAKD,mBAAmB;QACjB,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE,CAAC;YACtB,IAAI,CAAC,2BAA2B,GAAG,IAAI,CAAC;QAC1C,CAAC;;YAAM,IAAI,CAAC,2BAA2B,GAAG,KAAK,CAAC;IAClD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0EAAgB,+BAA+B,mBAAgB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,KAAK,EAAE,KAAK,EAAC,cAAc;YACxH,4DAAK,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,EACrC,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,EAChC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;gBAEhC,iEAAU,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,aAAa,GAAY;gBAC1D,8DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EACjC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB;gBACD,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,2BAA2B,CAAC,CAAC,CAAC,CACzD,gBAAU,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,GAC9D,CACZ,CAAC,CAAC,CAAC,IAAI,CACJ,CACF,CACP,CAAC;IACJ,CAAC;IAED,YAAY;QACV,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG;YAC3B,CAAC,CAAC,yBAAyB;YAC3B,CAAC,CAAC,EAAE,CAAC;IACT,CAAC;IAGD,oBAAoB;QAClB,OAAO,UAAU,CACf,uBAAuB,EACvB,yBAAyB,IAAI,CAAC,YAAY,EAAE,EAAE,EAC9C,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CACrC,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n\n@Component({\n tag: 'ifx-search-field',\n styleUrl: 'search-field.scss',\n shadow: true\n})\n\n\nexport class SearchField {\n private inputElement: HTMLInputElement;\n @Prop({ mutable: true }) value: string = '';\n\n @Event() ifxInput: EventEmitter<String>;\n @State() insideDropdown: boolean = false;\n\n @Prop() showDeleteIcon: boolean = false;\n @State() showDeleteIconInternalState: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() size: string = 'l';\n @State() isFocused: boolean = false;\n @Prop() placeholder: string = \"Search...\";\n @Prop() maxlength?: number = null; \n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n if (!path.includes(this.inputElement)) {\n this.isFocused = false;\n }\n }\n\n @Watch('value')\n valueWatcher(newValue: string) {\n if (newValue !== this.inputElement.value) {\n this.inputElement.value = newValue;\n }\n }\n\n\n handleInput = () => {\n const query = this.inputElement.value;\n this.value = query; // update the value property when input changes\n this.ifxInput.emit(this.value);\n };\n\n handleDelete = () => {\n this.inputElement.value = '';\n this.value = \"\";\n this.ifxInput.emit(this.value);\n }\n\n focusInput() {\n this.inputElement.focus();\n this.isFocused = true;\n }\n \n\n\n\n componentWillUpdate() {\n if (this.value !== \"\") {\n this.showDeleteIconInternalState = true;\n } else this.showDeleteIconInternalState = false;\n }\n\n render() {\n return (\n <div aria-label=\"a search field for user input\" aria-disabled={this.disabled} aria-value={this.value} class='search-field'>\n <div class={this.getWrapperClassNames()}\n tabindex={1}\n onFocus={() => this.focusInput()}\n onClick={() => this.focusInput()}\n >\n <ifx-icon icon=\"search-16\" class=\"search-icon\"></ifx-icon>\n <input\n ref={(el) => (this.inputElement = el)}\n type=\"text\"\n onInput={() => this.handleInput()}\n placeholder={this.placeholder}\n disabled={this.disabled}\n maxlength={this.maxlength}\n value={this.value} // bind the value property to input element\n />\n {this.showDeleteIcon && this.showDeleteIconInternalState ? (\n <ifx-icon icon=\"cremove16\" class=\"delete-icon\" onClick={this.handleDelete}>\n </ifx-icon>\n ) : null}\n </div>\n </div>\n );\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"search-field__wrapper-s\"\n : \"\";\n }\n\n\n getWrapperClassNames() {\n return classNames(\n `search-field__wrapper`,\n `search-field__wrapper ${this.getSizeClass()}`,\n `${this.isFocused ? 'focused' : \"\"}`\n );\n }\n}"]}
1	+ {"version":3,"file":"search-field.js","sourceRoot":"","sources":["../../../src/components/search-field/search-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAgB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,UAAU,MAAM,YAAY,CAAC;AAWpC,MAAM,OAAO,WAAW;IAPxB;QAS2B,UAAK,GAAW,EAAE,CAAC;QAGnC,mBAAc,GAAY,KAAK,CAAC;QAEjC,mBAAc,GAAY,KAAK,CAAC;QAC/B,gCAA2B,GAAY,KAAK,CAAC;QAC9C,aAAQ,GAAY,KAAK,CAAC;QAC1B,SAAI,GAAW,GAAG,CAAC;QAClB,cAAS,GAAY,KAAK,CAAC;QAC5B,gBAAW,GAAW,WAAW,CAAC;QAClC,cAAS,GAAY,IAAI,CAAC;QAkBlC,gBAAW,GAAG,GAAG,EAAE;YACjB,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;YACtC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,+CAA+C;YACnE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC,CAAC;QAEF,iBAAY,GAAG,GAAG,EAAE;YAClB,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,EAAE,CAAC;YAC7B,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAChB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC,CAAA;KAyDF;IAlFC,kBAAkB,CAAC,KAAiB;QAClC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;QAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC;YACtC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;IACH,CAAC;IAGD,YAAY,CAAC,QAAgB;QAC3B,IAAI,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;YACzC,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,QAAQ,CAAC;QACrC,CAAC;IACH,CAAC;IAeD,UAAU;QACR,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAKD,mBAAmB;QACjB,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE,CAAC;YACtB,IAAI,CAAC,2BAA2B,GAAG,IAAI,CAAC;QAC1C,CAAC;;YAAM,IAAI,CAAC,2BAA2B,GAAG,KAAK,CAAC;IAClD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0EAAgB,+BAA+B,mBAAgB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,KAAK,EAAE,KAAK,EAAC,cAAc;YACxH,4DAAK,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,EACrC,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,EAChC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;gBAEhC,iEAAU,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,aAAa,GAAY;gBAC1D,8DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EACjC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB;gBACD,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,2BAA2B,CAAC,CAAC,CAAC,CACzD,gBAAU,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,GAC9D,CACZ,CAAC,CAAC,CAAC,IAAI,CACJ,CACF,CACP,CAAC;IACJ,CAAC;IAED,YAAY;QACV,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG;YAC3B,CAAC,CAAC,yBAAyB;YAC3B,CAAC,CAAC,EAAE,CAAC;IACT,CAAC;IAGD,oBAAoB;QAClB,OAAO,UAAU,CACf,uBAAuB,EACvB,yBAAyB,IAAI,CAAC,YAAY,EAAE,EAAE,EAC9C,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CACrC,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n\n@Component({\n tag: 'ifx-search-field',\n styleUrl: 'search-field.scss',\n shadow: true\n})\n\n\nexport class SearchField {\n private inputElement: HTMLInputElement;\n @Prop({ mutable: true }) value: string = '';\n\n @Event() ifxInput: EventEmitter<String>;\n @State() insideDropdown: boolean = false;\n\n @Prop() showDeleteIcon: boolean = false;\n @State() showDeleteIconInternalState: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() size: string = 'l';\n @State() isFocused: boolean = false;\n @Prop() placeholder: string = \"Search...\";\n @Prop() maxlength?: number = null; \n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n if (!path.includes(this.inputElement)) {\n this.isFocused = false;\n }\n }\n\n @Watch('value')\n valueWatcher(newValue: string) {\n if (newValue !== this.inputElement.value) {\n this.inputElement.value = newValue;\n }\n }\n\n\n handleInput = () => {\n const query = this.inputElement.value;\n this.value = query; // update the value property when input changes\n this.ifxInput.emit(this.value);\n };\n\n handleDelete = () => {\n this.inputElement.value = '';\n this.value = \"\";\n this.ifxInput.emit(this.value);\n }\n\n focusInput() {\n this.inputElement.focus();\n this.isFocused = true;\n }\n \n\n\n\n componentWillUpdate() {\n if (this.value !== \"\") {\n this.showDeleteIconInternalState = true;\n } else this.showDeleteIconInternalState = false;\n }\n\n render() {\n return (\n <div aria-label=\"a search field for user input\" aria-disabled={this.disabled} aria-value={this.value} class='search-field'>\n <div class={this.getWrapperClassNames()}\n tabindex={1}\n onFocus={() => this.focusInput()}\n onClick={() => this.focusInput()}\n >\n <ifx-icon icon=\"search-16\" class=\"search-icon\"></ifx-icon>\n <input\n ref={(el) => (this.inputElement = el)}\n type=\"text\"\n onInput={() => this.handleInput()}\n placeholder={this.placeholder}\n disabled={this.disabled}\n maxlength={this.maxlength}\n value={this.value} // bind the value property to input element\n />\n {this.showDeleteIcon && this.showDeleteIconInternalState ? (\n <ifx-icon icon=\"cremove16\" class=\"delete-icon\" onClick={this.handleDelete}>\n </ifx-icon>\n ) : null}\n </div>\n </div>\n );\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"search-field__wrapper-s\"\n : \"\";\n }\n\n\n getWrapperClassNames() {\n return classNames(\n `search-field__wrapper`,\n `search-field__wrapper ${this.getSizeClass()}`,\n `${this.isFocused ? 'focused' : \"\"}`\n );\n }\n}"]}

package/dist/collection/components/segmented-control/segment/segment.js CHANGED Viewed

@@ -1,10 +1,7 @@
 import { h } from "@stencil/core";
 export class Segment {
     constructor() {
-        this.icon = undefined;
-        this.segmentIndex = undefined;
         this.selected = false;
-        this.value = undefined;
     }
     handleSegmentClick() {
         if (this.selected)
@@ -21,7 +18,7 @@ export class Segment {
         }
     }
     render() {
-        return (h("div", { key: '587e008edc3a8ea46b22c684de9a3c8260df0d3b', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: 'e54741c9a73bc7f8ec78d989202b2f9873177afe', icon: this.icon }), " ", h("slot", { key: '09e547f59983cf93d26458ce0f7c61d781ddaeab' })));
+        return (h("div", { key: '49c56df2adf407d13685ae7c99b512afa532c6de', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: 'c576b2bb7b09ae6ed1946759df7303df36b430dc', icon: this.icon }), " ", h("slot", { key: '61d467f2cda3552d5c90e9995ceccdca76c6825c' })));
     }
     static get is() { return "ifx-segment"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/segmented-control/segment/segment.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"segment.js","sourceRoot":"","sources":["../../../../src/components/segmented-control/segment/segment.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,eAAe,CAAC;AAQxE,MAAM,OAAO,OAAO~~;;;;wBAK6B~~,KAAK~~;;;IAGlD~~,kBAAkB;QACd,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC/C,CAAC;IAED,oBAAoB,CAAC,KAAoB;QACrC,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YACnD,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC/C,CAAC;IACL,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAE,WAAW,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,EAAE,EAC7D,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,GAAG,EAAE,GAAE,IAAI,CAAC,kBAAkB,EAAE,CAAA,CAAA,CAAC,EAC1C,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,GAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAA,CAAA,CAAC;YAChD,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa;;YAAC,8DAAQ,CAC7C,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { h, Component, Event, EventEmitter, Prop } from \"@stencil/core\";\n\n@Component ({\n tag: 'ifx-segment',\n styleUrl: 'segment.scss',\n shadow: true\n})\n\nexport class Segment {\n @Event({ composed: false }) segmentSelect: EventEmitter<number>;\n\n @Prop() icon: string;\n @Prop() segmentIndex: number;\n @Prop({ mutable: true }) selected: boolean = false;\n @Prop() value!: string;\n\n handleSegmentClick() {\n if (this.selected) return;\n this.selected = true;\n this.segmentSelect.emit(this.segmentIndex);\n }\n \n handleSegmentKeyDown(event: KeyboardEvent) {\n if (event.code === 'Enter' \|\| event.code === 'Space') {\n if (this.selected) return;\n this.selected = true;\n this.segmentSelect.emit(this.segmentIndex);\n }\n }\n\n render() {\n return (\n <div class={`segment ${this.selected ? 'segment--selected' : ''}`} \n tabIndex={0}\n onClick={() => {this.handleSegmentClick()}}\n onKeyDown={(e) => {this.handleSegmentKeyDown(e)}}>\n <ifx-icon icon={this.icon}></ifx-icon> <slot />\n </div>\n );\n }\n}"]}
1	+ {"version":3,"file":"segment.js","sourceRoot":"","sources":["../../../../src/components/segmented-control/segment/segment.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,eAAe,CAAC;AAQxE,MAAM,OAAO,OAAO;IANpB;QAW6B,aAAQ,GAAY,KAAK,CAAC;KA2BtD;IAxBG,kBAAkB;QACd,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC/C,CAAC;IAED,oBAAoB,CAAC,KAAoB;QACrC,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YACnD,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC/C,CAAC;IACL,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAE,WAAW,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,EAAE,EAC7D,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,GAAG,EAAE,GAAE,IAAI,CAAC,kBAAkB,EAAE,CAAA,CAAA,CAAC,EAC1C,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,GAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAA,CAAA,CAAC;YAChD,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa;;YAAC,8DAAQ,CAC7C,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { h, Component, Event, EventEmitter, Prop } from \"@stencil/core\";\n\n@Component ({\n tag: 'ifx-segment',\n styleUrl: 'segment.scss',\n shadow: true\n})\n\nexport class Segment {\n @Event({ composed: false }) segmentSelect: EventEmitter<number>;\n\n @Prop() icon: string;\n @Prop() segmentIndex: number;\n @Prop({ mutable: true }) selected: boolean = false;\n @Prop() value!: string;\n\n handleSegmentClick() {\n if (this.selected) return;\n this.selected = true;\n this.segmentSelect.emit(this.segmentIndex);\n }\n \n handleSegmentKeyDown(event: KeyboardEvent) {\n if (event.code === 'Enter' \|\| event.code === 'Space') {\n if (this.selected) return;\n this.selected = true;\n this.segmentSelect.emit(this.segmentIndex);\n }\n }\n\n render() {\n return (\n <div class={`segment ${this.selected ? 'segment--selected' : ''}`} \n tabIndex={0}\n onClick={() => {this.handleSegmentClick()}}\n onKeyDown={(e) => {this.handleSegmentKeyDown(e)}}>\n <ifx-icon icon={this.icon}></ifx-icon> <slot />\n </div>\n );\n }\n}"]}

package/dist/collection/components/segmented-control/segmented-control.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { h } from "@stencil/core";
 export class SegmentedControl {
     constructor() {
-        this.selectedValue = '';
         this.caption = '';
         this.label = '';
         this.size = 'regular';
+        this.selectedValue = '';
     }
     onSegmentSelect(event) {
         const { previousValue, selectedValue } = this.unselectPreviousSegment(event.detail);
@@ -62,8 +62,8 @@ export class SegmentedControl {
         this.setActiveSegment();
     }
     render() {
-        return (h("div", { key: 'e116c609714fe9a5bbeb427121773e5155d1b699', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, h("div", { key: '96fb1f4795698bf8670ad5b43e42bcc403d54a80', class: 'group__label' }, this.label.trim()), h("div", { key: '5d0696b0714a1a7416409ceb8f76847ca03e114f', class: 'group__controls' }, h("slot", { key: 'ebe808adc5168158272e0ca83b4643218d129b53' })), this.caption.trim() &&
-            h("div", { key: '6e9c1c678173697f3611b28de31cc642b3f1d10a', class: 'group__caption' }, h("ifx-icon", { key: '5ef9071dd99e61ba47fc02436a2472e17b03977e', icon: 'cinfo16' }), " ", this.caption.trim())));
+        return (h("div", { key: '2a980fa0fd18e469c2d92c57c80c62b7dfee30e9', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, h("div", { key: 'bf202bd9f2a4967c5a5c0cd24013242ad4752a80', class: 'group__label' }, this.label.trim()), h("div", { key: '89e974d972a4ad903193459e9a65b47c89114ab8', class: 'group__controls' }, h("slot", { key: '10a57ab800389b4a7ae482c152817486a28ae96f' })), this.caption.trim() &&
+            h("div", { key: 'f63a61eabf58e03cc0c4b5bae031965b82cb4f2c', class: 'group__caption' }, h("ifx-icon", { key: 'b758bb66d96d48e795565dbd662f1a2fc3648bfe', icon: 'cinfo16' }), " ", this.caption.trim())));
     }
     componentDidRender() {
         this.setSegmentSize();

package/dist/collection/components/segmented-control/segmented-control.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"segmented-control.js","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQzF,MAAM,OAAO,gBAAgB~~;;QAgBjB~~,~~kBAAa~~,GAAW,EAAE,CAAC;~~uBAXT~~,EAAE;~~qBACJ~~,EAAE;~~oBACU~~,~~SAAS;;IAG7C,~~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","sourcesContent":["import { h, Component, Element, Event, EventEmitter, Listen, Prop } from \"@stencil/core\";\n\n@Component ({\n tag: 'ifx-segmented-control',\n styleUrl: 'segmented-control.scss',\n shadow: true\n})\n\nexport class SegmentedControl {\n @Element() SegmentedControl: HTMLIfxSegmentedControlElement;\n\n @Event() ifxChange: EventEmitter<{ previousValue: string, selectedValue: string }>;\n\n @Prop() caption: string = '';\n @Prop() label: string = '';\n @Prop() size: 'regular' \| 'small' = 'regular';\n\n @Listen('segmentSelect')\n onSegmentSelect(event: CustomEvent) {\n const { previousValue, selectedValue } = this.unselectPreviousSegment(event.detail);\n this.selectedValue = selectedValue;\n this.ifxChange.emit({ previousValue, selectedValue });\n }\n\n private selectedValue: string = '';\n\n unselectPreviousSegment(newSelectedIndex: number): { previousValue: string, selectedValue: string } {\n let previousValue: string;\n let selectedValue: string;\n\n const segments: NodeList = this.getSegments();\n segments.forEach((control: HTMLIfxSegmentElement) => {\n if (control.selected) {\n if (control.segmentIndex !== newSelectedIndex) {\n control.selected = false;\n previousValue = control.value;\n } else {\n selectedValue = control.value;\n }\n }\n })\n\n return { previousValue, selectedValue };\n }\n\n getSegments(): NodeList {\n return this.SegmentedControl.querySelectorAll('ifx-segment');\n }\n\n setActiveSegment(): void {\n const segments: NodeList = this.getSegments();\n let activeSegmentedControlFound = false;\n segments.forEach((control: HTMLIfxSegmentElement, idx: number) => {\n control.segmentIndex = idx;\n if (activeSegmentedControlFound) {\n if (control.selected) control.selected = false;\n } else {\n if (control.selected) {\n activeSegmentedControlFound = true;\n this.selectedValue = control.value;\n }\n }\n });\n if (!activeSegmentedControlFound && segments.length) {\n (segments[0] as HTMLIfxSegmentElement).selected = true;\n this.selectedValue = (segments[0] as HTMLIfxSegmentElement).value;\n }\n }\n\n\n setSegmentSize(): void {\n const segments: NodeList = this.getSegments();\n segments.forEach((control: HTMLIfxSegmentElement) => {\n control.shadowRoot.querySelector('.segment').classList.add(`segment--${this.size}`);\n });\n }\n\n componentDidLoad() {\n this.setActiveSegment();\n }\n\n render() {\n return (\n <div aria-value={this.selectedValue} aria-label='segmented control' class='group'>\n <div class='group__label'>\n { this.label.trim() }\n </div>\n \n <div class='group__controls'>\n <slot />\n </div>\n \n {\n this.caption.trim() &&\n <div class='group__caption'>\n <ifx-icon icon='cinfo16'></ifx-icon> { this.caption.trim() }\n </div>\n }\n </div>\n );\n }\n\n componentDidRender() {\n this.setSegmentSize();\n }\n}"]}
1	+ {"version":3,"file":"segmented-control.js","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, Element, Event, EventEmitter, Listen, Prop } from \"@stencil/core\";\n\n@Component ({\n tag: 'ifx-segmented-control',\n styleUrl: 'segmented-control.scss',\n shadow: true\n})\n\nexport class SegmentedControl {\n @Element() SegmentedControl: HTMLIfxSegmentedControlElement;\n\n @Event() ifxChange: EventEmitter<{ previousValue: string, selectedValue: string }>;\n\n @Prop() caption: string = '';\n @Prop() label: string = '';\n @Prop() size: 'regular' \| 'small' = 'regular';\n\n @Listen('segmentSelect')\n onSegmentSelect(event: CustomEvent) {\n const { previousValue, selectedValue } = this.unselectPreviousSegment(event.detail);\n this.selectedValue = selectedValue;\n this.ifxChange.emit({ previousValue, selectedValue });\n }\n\n private selectedValue: string = '';\n\n unselectPreviousSegment(newSelectedIndex: number): { previousValue: string, selectedValue: string } {\n let previousValue: string;\n let selectedValue: string;\n\n const segments: NodeList = this.getSegments();\n segments.forEach((control: HTMLIfxSegmentElement) => {\n if (control.selected) {\n if (control.segmentIndex !== newSelectedIndex) {\n control.selected = false;\n previousValue = control.value;\n } else {\n selectedValue = control.value;\n }\n }\n })\n\n return { previousValue, selectedValue };\n }\n\n getSegments(): NodeList {\n return this.SegmentedControl.querySelectorAll('ifx-segment');\n }\n\n setActiveSegment(): void {\n const segments: NodeList = this.getSegments();\n let activeSegmentedControlFound = false;\n segments.forEach((control: HTMLIfxSegmentElement, idx: number) => {\n control.segmentIndex = idx;\n if (activeSegmentedControlFound) {\n if (control.selected) control.selected = false;\n } else {\n if (control.selected) {\n activeSegmentedControlFound = true;\n this.selectedValue = control.value;\n }\n }\n });\n if (!activeSegmentedControlFound && segments.length) {\n (segments[0] as HTMLIfxSegmentElement).selected = true;\n this.selectedValue = (segments[0] as HTMLIfxSegmentElement).value;\n }\n }\n\n\n setSegmentSize(): void {\n const segments: NodeList = this.getSegments();\n segments.forEach((control: HTMLIfxSegmentElement) => {\n control.shadowRoot.querySelector('.segment').classList.add(`segment--${this.size}`);\n });\n }\n\n componentDidLoad() {\n this.setActiveSegment();\n }\n\n render() {\n return (\n <div aria-value={this.selectedValue} aria-label='segmented control' class='group'>\n <div class='group__label'>\n { this.label.trim() }\n </div>\n \n <div class='group__controls'>\n <slot />\n </div>\n \n {\n this.caption.trim() &&\n <div class='group__caption'>\n <ifx-icon icon='cinfo16'></ifx-icon> { this.caption.trim() }\n </div>\n }\n </div>\n );\n }\n\n componentDidRender() {\n this.setSegmentSize();\n }\n}"]}

package/dist/collection/components/select/multi-select/multiselect.js CHANGED Viewed

@@ -14,7 +14,25 @@ function debounce(func, wait) {
 ;
 export class Multiselect {
     constructor() {
+        this.batchSize = 50;
+        this.size = 'medium (40px)';
+        this.disabled = false;
+        this.error = false;
+        this.internalError = false;
+        this.errorMessage = "Error";
+        this.label = "";
+        this.persistentSelectedOptions = [];
+        this.placeholder = "";
+        this.dropdownOpen = false;
+        this.zIndex = 1; // default z-index value
         this.currentIndex = 0; //needed for option selection using keyboard
+        this.isLoading = false;
+        this.loadedOptions = [];
+        this.filteredOptions = [];
+        this.showSearch = true;
+        this.showSelectAll = true;
+        this.optionCount = 0; // number of all options (leaves of the tree)
+        this.optionsProcessed = false; // flag whether options have already been counted, intial selections saved
         this.handleSearch = debounce((targetElement) => {
             const searchTerm = targetElement.value.toLowerCase();
             if (searchTerm === '') {
@@ -33,29 +51,6 @@ export class Multiselect {
                 this.ifxMultiselectIsOpen.emit(this.dropdownOpen);
             }
         };
-        this.name = undefined;
-        this.options = undefined;
-        this.batchSize = 50;
-        this.size = 'medium (40px)';
-        this.disabled = false;
-        this.error = false;
-        this.internalError = false;
-        this.errorMessage = "Error";
-        this.internalErrorMessage = undefined;
-        this.label = "";
-        this.persistentSelectedOptions = [];
-        this.placeholder = "";
-        this.dropdownOpen = false;
-        this.dropdownFlipped = undefined;
-        this.maxItemCount = undefined;
-        this.zIndex = 1;
-        this.isLoading = false;
-        this.loadedOptions = [];
-        this.filteredOptions = [];
-        this.showSearch = true;
-        this.showSelectAll = true;
-        this.optionCount = 0;
-        this.optionsProcessed = false;
     }
     updateOptions() {
         this.loadedOptions = [];