npm - @infineon/infineon-design-system-stencil - Versions diffs - 37.13.1--canary.1987.3a00aa50ac2f53008f1e351eabf4b0c340894bb9.0 → 37.14.0--canary.1964.0cc47e126559ad69071eedaaa2c1137ce976ec2c.0 - Mend

@infineon/infineon-design-system-stencil 37.13.1--canary.1987.3a00aa50ac2f53008f1e351eabf4b0c340894bb9.0 → 37.14.0--canary.1964.0cc47e126559ad69071eedaaa2c1137ce976ec2c.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 (622) hide show

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

@@ -104,7 +104,7 @@
   margin-left: 12px;
 }
-.page__button {
+a {
   padding: 8px;
   border-radius: 100px;
 }
@@ -125,23 +125,23 @@ li {
   align-items: center;
   border-radius: 100px;
 }
-li:hover:not(.active) page__button {
+li:hover:not(.active) a {
   background-color: #EEEDED;
 }
-li:active:not(.active) .page__button {
+li:active:not(.active) a {
   background-color: #575352;
   color: #fff;
 }
 li.active {
   background-color: #0A8276;
 }
-li.active .page__button {
+li.active a {
   color: #fff;
 }
 li:hover {
   cursor: pointer;
 }
-li .page__button {
+li a {
   text-decoration: none;
   display: flex;
   width: 16px;

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

@@ -158,7 +158,7 @@ export class Pagination {
         this.initPagination();
     }
     render() {
-        return (h("div", { key: '14f71cd0291d0b01d3b9da91ecec8d3908796107', class: "container" }, h("div", { key: 'd28f3b1a05cd937eec0efa30b661c1e5671542d3', class: "items__per-page-wrapper" }, h("div", { key: '504286b0c1d4d1a77e283612389e2f0a98f76ce3', class: "items__per-page-label" }, "Results per Page"), h("div", { key: '61fb210192777dc3ebf7810f0d311eae2abd3dc3', class: "items__per-page-field" }, h("ifx-select", { key: 'a576ef3d2ee4feb8d9f04550fa08e0a75fdafc07', id: 'itemsPerPageSelect', placeholder: 'false', "show-search": 'false', value: undefined, disabled: false, error: false, size: "s", options: this.filteredItemsPerPage, "placeholder-value": "Select" }))), h("nav", { key: '47646225b5ab6cfa65b5620fda57300bc39e23e9', class: "items__total-wrapper", "aria-label": `Pagination navigation, page ${this.internalPage} of ${this.numberOfPages.length}` }, h("div", { key: '6bdbf4cb181b372491efc177b26c75e1b7677c64', class: "pagination" }, h("ifx-icon-button", { key: 'ede2c6a66a75510ecc7244be7a7d00dae16f9d3a', class: "prev", icon: "arrow-left-16", "aria-label": 'Previous Page', onClick: () => this.changePage(this.internalPage - 1) }), h("ol", { key: '43f63193bf3fc7c93fdf714e328da4f1333aca88' }, 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: '610f92b2a6af014529f5562409fa963d85654050', class: "next", icon: "arrow-right-16", "aria-label": 'Next Page', onClick: () => this.changePage(this.internalPage + 1) })))));
+        return (h("div", { key: '724b3d84f8dc469898c4126b76637c77567f195d', class: "container" }, h("div", { key: '171579231fc284e71acfe1df372e6750742a2973', class: "items__per-page-wrapper" }, h("div", { key: '916428fde974123aa1b805f4815eae6dc2a64097', class: "items__per-page-label" }, "Results per Page"), h("div", { key: '88e7827159c37eee23109dd956863bdc1335f043', class: "items__per-page-field" }, h("ifx-select", { key: '08fc2626e633d33dfa0565074464adc4533072f2', id: 'itemsPerPageSelect', placeholder: 'false', "show-search": 'false', value: undefined, disabled: false, error: false, size: "s", options: this.filteredItemsPerPage, "placeholder-value": "Select" }))), h("div", { key: '1e0299c9b3ba3bbe229039cfe0f298a821b90aea', class: "items__total-wrapper" }, h("div", { key: 'f8c507a16e070b199a75b30138829528ee434ccd', class: "pagination" }, h("ifx-icon-button", { key: 'c6fd48710f97119a71745ff0909b7072aa645e21', class: "prev", icon: "arrow-left-16", onClick: () => this.changePage(this.internalPage - 1) }), h("ol", { key: '860a2420df4b9cdfbed1df0630e8227531b61276' }, this.visiblePages.map((page, i) => typeof page === 'number' ? (h("li", { key: `page-${page}`, class: { [this.CLASS_ACTIVE]: page === this.internalPage }, "data-page": page }, h("a", { href: "javascript:void(0)" }, page))) : (h("li", { class: "ellipsis", key: `ellipsis-${i}` }, h("span", null, "..."))))), h("ifx-icon-button", { key: 'c3645817a9dbc92185d0eef3c71c2231246b3d90', class: "next", icon: "arrow-right-16", onClick: () => this.changePage(this.internalPage + 1) })))));
     }
     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":"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;QACvB,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;QA8JxB,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;KA6EH;IA3OC,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,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;QACvE,IAAG,MAAM,EAAE,CAAC;YACV,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAA;QACvE,CAAC;QAED,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,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;QACvE,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;QAC3E,CAAC;IACH,CAAC;IAED,kBAAkB;QAChB,MAAM,MAAM,GAAG,CAAC,CAAC;QACjB,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,UAAU,IAAI,CAAC,EAAE,CAAC;YACpB,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC;QAClC,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAEd,IAAI,OAAO,GAAG,MAAM,GAAG,CAAC;gBAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAE5C,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;YAC1C,IAAI,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;YAErD,IAAI,OAAO,IAAI,MAAM,GAAG,CAAC;gBAAE,GAAG,GAAG,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC;YAChD,IAAI,OAAO,IAAI,UAAU,GAAG,MAAM;gBAAE,KAAK,GAAG,UAAU,GAAG,MAAM,GAAG,CAAC,CAAC;YAEpE,KAAK,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE;gBAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAEjD,IAAI,OAAO,GAAG,UAAU,GAAG,MAAM;gBAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACrD,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACzB,CAAC;QAED,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;IAC1C,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;IAQD,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;YACpB,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;YAEN,4DAAK,KAAK,EAAC,sBAAsB,gBAAa,+BAA+B,IAAI,CAAC,YAAY,OAAO,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE;gBAC9H,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,GACpC;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,GACpC,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 @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 const select = this.el.shadowRoot.querySelector('#itemsPerPageSelect');\n if(select) { \n select.addEventListener('ifxSelect', (e) => this.emitItemsPerPage(e))\n }\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 const select = this.el.shadowRoot.querySelector('#itemsPerPageSelect');\n if (select) {\n select.removeEventListener('ifxSelect', (e) => this.emitItemsPerPage(e));\n }\n }\n\n updateVisiblePages() {\n const buffer = 2;\n const totalPages = this.numberOfPages.length;\n const current = this.internalPage;\n let pages: (number \| string)[] = [];\n \n if (totalPages <= 5) {\n pages = [...this.numberOfPages];\n } else {\n pages.push(1);\n \n if (current > buffer + 1) pages.push('...');\n \n let start = Math.max(2, current - buffer);\n let end = Math.min(totalPages - 1, current + buffer);\n \n if (current <= buffer + 1) end = buffer * 2 + 1;\n if (current >= totalPages - buffer) start = totalPages - buffer * 2;\n \n for (let i = start; i <= end; i++) pages.push(i);\n \n if (current < totalPages - buffer) pages.push('...');\n pages.push(totalPages);\n }\n \n this.visiblePages = [...new Set(pages)];\n }\n\n calculateNumberOfPages() {\n const totalPages = Math.ceil(this.total / this.internalItemsPerPage);\n this.numberOfPages = Array.from({ length: totalPages }, (_, i) => i + 1);\n this.internalPage = Math.max(1, Math.min(this.currentPage, totalPages));\n }\n\n filterOptionsArray() { \n const items = typeof this.itemsPerPage === 'string' ? \n JSON.parse(this.itemsPerPage) : this.itemsPerPage;\n this.filteredItemsPerPage = items.map(item => ({\n ...item,\n label: item.label \|\| item.value\n }));\n }\n\n componentWillLoad() {\n this.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 changePage(newPage: number) {\n newPage = Math.max(1, Math.min(newPage, this.numberOfPages.length));\n if (newPage === this.internalPage) return;\n \n this.internalPage = newPage;\n this.handleEventEmission();\n this.initPagination();\n }\n\n render() {\n return (\n <div class=\"container\">\n <div class=\"items__per-page-wrapper\">\n <div class=\"items__per-page-label\">Results per Page</div>\n <div class=\"items__per-page-field\">\n <ifx-select\n 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 <nav class=\"items__total-wrapper\" aria-label={`Pagination navigation, page ${this.internalPage} of ${this.numberOfPages.length}`}>\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 ></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 ></ifx-icon-button>\n </div>\n </nav>\n </div>\n );\n }\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;QACvB,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;QA8JxB,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;KAiEH;IA/NC,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,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;QACvE,IAAG,MAAM,EAAE,CAAC;YACV,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAA;QACvE,CAAC;QAED,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,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;QACvE,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;QAC3E,CAAC;IACH,CAAC;IAED,kBAAkB;QAChB,MAAM,MAAM,GAAG,CAAC,CAAC;QACjB,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,UAAU,IAAI,CAAC,EAAE,CAAC;YACpB,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC;QAClC,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAEd,IAAI,OAAO,GAAG,MAAM,GAAG,CAAC;gBAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAE5C,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;YAC1C,IAAI,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;YAErD,IAAI,OAAO,IAAI,MAAM,GAAG,CAAC;gBAAE,GAAG,GAAG,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC;YAChD,IAAI,OAAO,IAAI,UAAU,GAAG,MAAM;gBAAE,KAAK,GAAG,UAAU,GAAG,MAAM,GAAG,CAAC,CAAC;YAEpE,KAAK,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE;gBAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAEjD,IAAI,OAAO,GAAG,UAAU,GAAG,MAAM;gBAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACrD,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACzB,CAAC;QAED,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;IAC1C,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;IAQD,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;YACpB,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;YAEN,4DAAK,KAAK,EAAC,sBAAsB;gBAC/B,4DAAK,KAAK,EAAC,YAAY;oBACrB,wEACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,eAAe,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,GACpC;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,SAAG,IAAI,EAAC,oBAAoB,IAAE,IAAI,CAAK,CACpC,CACN,CAAC,CAAC,CAAC,CACF,UAAI,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,YAAY,CAAC,EAAE;wBACvC,sBAAgB,CACb,CACN,CAAC,CACG;oBAEL,wEACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,gBAAgB,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,GACpC,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 @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 const select = this.el.shadowRoot.querySelector('#itemsPerPageSelect');\n if(select) { \n select.addEventListener('ifxSelect', (e) => this.emitItemsPerPage(e))\n }\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 const select = this.el.shadowRoot.querySelector('#itemsPerPageSelect');\n if (select) {\n select.removeEventListener('ifxSelect', (e) => this.emitItemsPerPage(e));\n }\n }\n\n updateVisiblePages() {\n const buffer = 2;\n const totalPages = this.numberOfPages.length;\n const current = this.internalPage;\n let pages: (number \| string)[] = [];\n \n if (totalPages <= 5) {\n pages = [...this.numberOfPages];\n } else {\n pages.push(1);\n \n if (current > buffer + 1) pages.push('...');\n \n let start = Math.max(2, current - buffer);\n let end = Math.min(totalPages - 1, current + buffer);\n \n if (current <= buffer + 1) end = buffer * 2 + 1;\n if (current >= totalPages - buffer) start = totalPages - buffer * 2;\n \n for (let i = start; i <= end; i++) pages.push(i);\n \n if (current < totalPages - buffer) pages.push('...');\n pages.push(totalPages);\n }\n \n this.visiblePages = [...new Set(pages)];\n }\n\n calculateNumberOfPages() {\n const totalPages = Math.ceil(this.total / this.internalItemsPerPage);\n this.numberOfPages = Array.from({ length: totalPages }, (_, i) => i + 1);\n this.internalPage = Math.max(1, Math.min(this.currentPage, totalPages));\n }\n\n filterOptionsArray() { \n const items = typeof this.itemsPerPage === 'string' ? \n JSON.parse(this.itemsPerPage) : this.itemsPerPage;\n this.filteredItemsPerPage = items.map(item => ({\n ...item,\n label: item.label \|\| item.value\n }));\n }\n\n componentWillLoad() {\n this.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 changePage(newPage: number) {\n newPage = Math.max(1, Math.min(newPage, this.numberOfPages.length));\n if (newPage === this.internalPage) return;\n \n this.internalPage = newPage;\n this.handleEventEmission();\n this.initPagination();\n }\n\n render() {\n return (\n <div class=\"container\">\n <div class=\"items__per-page-wrapper\">\n <div class=\"items__per-page-label\">Results per Page</div>\n <div class=\"items__per-page-field\">\n <ifx-select\n 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 <div class=\"items__total-wrapper\">\n <div class=\"pagination\">\n <ifx-icon-button\n class=\"prev\"\n icon=\"arrow-left-16\"\n onClick={() => this.changePage(this.internalPage - 1)}\n ></ifx-icon-button>\n \n <ol>\n {this.visiblePages.map((page, i) => typeof page === 'number' ? (\n <li \n key={`page-${page}`}\n class={{ [this.CLASS_ACTIVE]: page === this.internalPage }}\n data-page={page}\n >\n <a href=\"javascript:void(0)\">{page}</a>\n </li>\n ) : (\n <li class=\"ellipsis\" key={`ellipsis-${i}`}>\n <span>...</span>\n </li>\n ))}\n </ol>\n \n <ifx-icon-button\n class=\"next\"\n icon=\"arrow-right-16\"\n onClick={() => this.changePage(this.internalPage + 1)}\n ></ifx-icon-button>\n </div>\n </div>\n </div>\n );\n }\n}"]}

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

@@ -22,7 +22,7 @@ export class ProgressBar {
         }
     }
     render() {
-        return (h("div", { key: '8fca691ec07d456af7fb2559047d88dfecd00b68', 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: 'd481b45e3bb67f6a3bbfaa2b31fd529941abb976', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: '17f2a5a50a42bba13e780b3a14e2f5e6046eb02e', class: "label" }, `${this.internalValue}%`))));
+        return (h("div", { key: '8b85b9583b257c2bb08471502ec81eaf18240299', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, h("div", { key: '4d4ab3b145e47f2ef34b9515d85916bb27d7b2ce', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: '43ea3c707df2f815321e7d6a757cb164fbe11500', 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';\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"]}
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;KA+BpC;IA1BC,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,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, 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 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

@@ -99,10 +99,10 @@ export class RadioButton {
         }
     }
     render() {
-        return (h("div", { key: '70a3fcd52e6e216c89ab477df26405f77d4d56be', 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: '9cd248817e1ceccae7cbd23fce48116054b9d0c6', class: `radioButton__wrapper
+        return (h("div", { key: '672fd8be8a134e481c7f4251b95a0978fa3d934e', 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: '33e9862f00b7544eb320f43e5763edb44242c299', class: `radioButton__wrapper
             ${this.internalChecked ? 'checked' : ''}
             ${this.disabled ? 'disabled' : ''}
-            ${this.error ? 'error' : ''}` }, this.internalChecked && h("div", { key: '03f787f6a6e124a4d4ae4059401bc47c91c0b79e', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: '372a031591d76cfba685bfd0519fbf5f8332701b', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '72ff42a1a482e8003829b56b4b40f216e32a9fb9' }))), h("input", { key: '70e8526b7498b94e21e06eb33c21766c29af6804', 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() })));
+            ${this.error ? 'error' : ''}` }, this.internalChecked && h("div", { key: 'b2e090f994f231c55fabaa55fa7f7bf0790c92af', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: 'b3b0f595a56ff3fb5f43f3d4fee7065a13932a3e', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '6f235a7af0381d4dfcc15a80a32604ed4843eb89' }))), h("input", { key: 'd0c2bf2a3f1471221887fe4046760b9ebf9ce300', 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-group/radio-button-group.css CHANGED Viewed

@@ -22,13 +22,24 @@
 }
 .group-label {
-  font: 400 0.75rem/1rem "Source Sans 3";
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
   margin-bottom: 8px;
   text-align: left;
   text-underline-position: from-font;
   text-decoration-skip-ink: none;
 }
+.group-label .required {
+  color: #575352;
+  margin-left: 4px;
+}
+.group-label .required.error {
+  color: #CD002F;
+}
 .caption {
   margin-top: 8px;
   align-self: flex-start;
@@ -46,7 +57,8 @@
 }
 .caption-text {
-  font: 400 0.75rem/1rem "Source Sans 3";
+  font-size: 0.75rem;
+  line-height: 1rem;
   flex: 1;
   text-align: left;
   text-underline-position: from-font;

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

@@ -7,6 +7,7 @@ export class RadioButtonGroup {
         this.errorStates = new Map();
         this.alignment = 'vertical';
         this.groupLabelText = 'Group Label Text';
+        this.required = false;
         this.hasErrors = false;
         this.handleSlotChange = () => {
             this.initializeState();
@@ -49,7 +50,7 @@ export class RadioButtonGroup {
         this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);
     }
     render() {
-        return (h("div", { key: '110dd90eedde21f29a02bf7844c046cc1b5de641', class: 'radio-button-group-container' }, this.showGroupLabel ? h("div", { class: 'group-label' }, this.groupLabelText, " *") : '', h("div", { key: '891bd69906ffeefeb2641e72f4d468c100f43b90', class: `radio-button-group ${this.alignment} ${this.size}` }, h("slot", { key: '32b754f9b0b47fb53bdaeb825740114b7b6fe737', 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: 'ca42b9470187fb67619fad0e62c0c7aec3f5fb62', class: 'radio-button-group-container' }, this.showGroupLabel && (h("div", { key: 'b89340bfcabb087301338bdedf04215d87a3e661', class: "group-label" }, this.groupLabelText, this.required && h("span", { key: '6b851812a7f1cdbe3b0a8450bd8cb1569f3f893a', class: `required ${this.hasErrors ? 'error' : ''}` }, "*"))), h("div", { key: 'd46fc6be13198ccb04b50fa499c8d4680ae064b3', class: `radio-button-group ${this.alignment} ${this.size}` }, h("slot", { key: '89f23313cb670cb1d18060cb38f7ece2d5401d7d', 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"; }
@@ -200,6 +201,26 @@ export class RadioButtonGroup {
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "attribute": "required",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AASzE,MAAM,OAAO,gBAAgB;IAP7B;QAQY,gBAAW,GAA8B,IAAI,GAAG,EAAE,CAAC;QAGnD,cAAS,GAA8B,UAAU,CAAC;QAGlD,mBAAc,GAAW,kBAAkB,CAAC;~~QAI3C~~,cAAS,GAAY,KAAK,CAAC;QA+BpC,qBAAgB,GAAG,GAAG,EAAE;YACpB,IAAI,CAAC,eAAe,EAAE,CAAC;QAC3B,CAAC,CAAC;~~KAiCL~~;~~IA/DG~~,sBAAsB,CAAC,KAAkB;QACrC,MAAM,WAAW,GAAG,KAAK,CAAC,MAAqB,CAAC;QAChD,IAAI,WAAW,CAAC,OAAO,KAAK,kBAAkB,EAAE,CAAC;YAC7C,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YAChD,IAAI,CAAC,eAAe,EAAE,CAAC;QAC3B,CAAC;IACL,CAAC;IAEA,mEAAmE;IAElE,KAAK,CAAC,aAAa,CAAC,KAAc;QAChC,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;QAC9E,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE;YAClC,WAAmB,CAAC,KAAK,GAAG,KAAK,CAAC;QACrC,CAAC,CAAC,CAAC;IACL,CAAC;IAEH,iBAAiB;QACb,IAAI,CAAC,eAAe,EAAE,CAAC;IAC3B,CAAC;IAED,KAAK,CAAC,gBAAgB;QAClB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YAClC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,wBAAwB,EAAE,MAAM,SAAS,CAAC,CAAA;QAC7D,CAAC;IACL,CAAC;IAMO,eAAe;QACnB,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;QACzB,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;QAC9E,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE;YACjC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;gBACrC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,EAAG,WAAmB,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC;YAC3E,CAAC;QACL,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,EAAE,CAAC;IAC3B,CAAC;IAEO,eAAe;QACnB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC;IAClF,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAC,8BAA8B;YACpC,IAAI,CAAC,cAAc,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~WAAK,~~KAAK,EAAC,aAAa;~~gBAAE~~,IAAI,CAAC,cAAc;~~qBAAS~~,CAAC,CAAC,CAAC,EAAE;~~YAClF~~,4DAAK,KAAK,EAAE,sBAAsB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,EAAE;gBAC3D,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAU,CACjD;YACL,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAChB,WAAK,KAAK,EAAE,WAAW,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE;gBACxD,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,WAAK,KAAK,EAAC,cAAc;oBAAC,gBAAU,IAAI,EAAC,WAAW,GACjE,CAAM,CAAC,CAAC,CAAC,EAAE;gBACtB,WAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAO,CAChD,CAAC,CAAC,CAAC,CAAC,EAAE,CACd,CACT,CAAC;IACN,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACJ","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 @State() hasErrors: boolean = false;\n \n @Listen('ifxError')\n handleRadioButtonError(event: CustomEvent) {\n const radioButton = event.target as HTMLElement;\n if (radioButton.tagName === '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 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 ? <div class='group-label'>{this.groupLabelText} *</div> : ''}\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}"]}
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 === '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 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

@@ -13,6 +13,7 @@ export default {
         showCaption: false,
         captionText: 'Caption text, description, error notification',
         showCaptionIcon: false,
+        required: false,
     },
     argTypes: {
         amountOfItems: {
@@ -110,6 +111,14 @@ export default {
                 defaultValue: { summary: 'false' }
             }
         },
+        required: {
+            description: 'Marks the radio-button-group as required.',
+            control: { type: 'boolean' },
+            table: {
+                category: 'ifx-radio-button-group props',
+                defaultValue: { summary: 'false' }
+            }
+        },
         setGroupError: {
             action: 'setGroupError',
             description: 'Method to set the error state of all checkboxes in the group.',
@@ -134,7 +143,7 @@ const Template = args => {
         }
     }
     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}">
+        <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":"AAAA,eAAe;IACX,KAAK,EAAE,+BAA+B;IACtC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACF,aAAa,EAAE,CAAC;QAChB,SAAS,EAAE,UAAU;QACrB,IAAI,EAAE,GAAG;QACT,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,KAAK;QACZ,cAAc,EAAE,KAAK;QACrB,cAAc,EAAE,aAAa;QAC7B,WAAW,EAAE,KAAK;QAClB,WAAW,EAAE,+CAA+C;QAC5D,eAAe,EAAE,KAAK;~~KACzB~~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~~cACnP~~,YAAY;kCACQ,CAAC;IAE/B,OAAO,QAAQ,CAAC;AACpB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","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 },\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 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}\">\n ${radioButtons}\n </ifx-radio-button-group>`;\n\n return template;\n}\n\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: '09974ec9adab8f6dfa54364c8ba4665574cdebe9', 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: '7d45f985d7fd0b65e714f7cb129aa85dc1cc5a8b', 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-field/search-field.js CHANGED Viewed

@@ -366,12 +366,12 @@ export class SearchField {
             this.showDeleteIconInternalState = false;
     }
     render() {
-        return (h("div", { key: '1464337ac84aa2707e9c17d6d21af2087253c233', "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: 'd7bace664f3b66a42feff790959c83d3cd86fbe0', class: this.getWrapperClassNames(), tabindex: 1, onClick: () => this.focusInput() }, h("ifx-icon", { key: 'deb5c77cf9ebde1146afdffc5279b260da4f757a', icon: "search-16", class: "search-icon" }), h("input", { key: 'cc247404c0d78ca0e8d163e9a1b315abd279f093', ref: (el) => (this.inputElement = el), type: "text", autocomplete: this.autocomplete, onInput: () => this.handleInput(), onFocus: () => this.focusInput(), onBlur: () => this.blurInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value, role: "combobox", "aria-expanded": this.showDropdown, "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedBy, "aria-owns": this.showDropdown ? 'suggestions-dropdown' : undefined, "aria-activedescendant": this.selectedSuggestionIndex >= 0 ? `suggestion-${this.selectedSuggestionIndex}` : undefined }), this.showDeleteIcon && this.showDeleteIconInternalState ? (h("ifx-icon", { icon: "cRemove16", class: "delete-icon", onClick: this.handleDelete, role: "button", tabindex: "0", "aria-label": this.deleteIconAriaLabel, onKeyDown: (event) => {
+        return (h("div", { key: '63db140a599cfc988bcf0ea60a362bc84dbf830d', "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: 'a5e8dda10cf69739331c68da2f3caf42006ab0d9', class: this.getWrapperClassNames(), tabindex: 1, onClick: () => this.focusInput() }, h("ifx-icon", { key: 'fcb9692cc68524a3efcd6ec177f504a653c872d0', icon: "search-16", class: "search-icon" }), h("input", { key: '0ca39241326c6af91fd2f8d193f4f6e8aab49b07', ref: (el) => (this.inputElement = el), type: "text", autocomplete: this.autocomplete, onInput: () => this.handleInput(), onFocus: () => this.focusInput(), onBlur: () => this.blurInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value, role: "combobox", "aria-expanded": this.showDropdown, "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedBy, "aria-owns": this.showDropdown ? 'suggestions-dropdown' : undefined, "aria-activedescendant": this.selectedSuggestionIndex >= 0 ? `suggestion-${this.selectedSuggestionIndex}` : undefined }), this.showDeleteIcon && this.showDeleteIconInternalState ? (h("ifx-icon", { icon: "cRemove16", class: "delete-icon", onClick: this.handleDelete, role: "button", tabindex: "0", "aria-label": this.deleteIconAriaLabel, onKeyDown: (event) => {
                 if (event.key === 'Enter' || event.key === ' ') {
                     event.preventDefault();
                     this.handleDelete();
                 }
-            } })) : null), this.showDropdown && this.filteredSuggestions.length > 0 && (h("div", { key: '641b84e82bd07d44f6a657ac4e3af27af33f868a', ref: (el) => (this.dropdownElement = el), id: "suggestions-dropdown", class: "suggestions-dropdown", role: "listbox", "aria-label": this.dropdownAriaLabel }, this.isShowingOnlyHistory() && (h("div", { key: '66dbc2db67478154a79cc6a10796086e0ce819c3', class: "suggestions-header" }, this.historyHeaderText)), this.filteredSuggestions.map((suggestion, index) => (h("div", { key: suggestion.id, id: `suggestion-${index}`, class: this.getSuggestionClassNames(index), role: "option", "aria-selected": index === this.selectedSuggestionIndex, "aria-label": `${suggestion.type === 'history' ? this.historyItemAriaLabel : this.suggestionAriaLabel}: ${suggestion.text}${suggestion.scope ? `, ${suggestion.scope}` : ''}${suggestion.resultCount ? `, ${suggestion.resultCount} results` : ''}`, onClick: () => this.selectSuggestion(suggestion), onMouseEnter: () => this.selectedSuggestionIndex = index }, h("div", { class: "suggestion-content" }, suggestion.type === 'history' && (h("ifx-icon", { icon: "history-16", class: "suggestion-icon suggestion-icon--history" })), suggestion.type === 'suggestion' && (h("ifx-icon", { icon: "search-16", class: "suggestion-icon suggestion-icon--suggestion" })), h("span", { class: "suggestion-text" }, h("span", { class: "suggestion-main-text" }, this.renderHighlightedText(suggestion.text, this.value)), suggestion.scope && (h("span", { class: "suggestion-scope" }, "\u2013 ", suggestion.scope))), suggestion.resultCount !== undefined && suggestion.scope && (h("span", { class: "suggestion-count" }, suggestion.resultCount)), suggestion.type === 'history' && (h("ifx-icon", { icon: "cross16", class: "suggestion-delete-icon", role: "button", tabindex: "0", "aria-label": `${this.historyDeleteAriaLabel}: ${suggestion.text}`, onClick: (event) => this.handleHistoryDelete(event, suggestion.text), onKeyDown: (event) => {
+            } })) : null), this.showDropdown && this.filteredSuggestions.length > 0 && (h("div", { key: 'e02b8183ecc5a2a146d8a9c9f19e8b0c74a8c48a', ref: (el) => (this.dropdownElement = el), id: "suggestions-dropdown", class: "suggestions-dropdown", role: "listbox", "aria-label": this.dropdownAriaLabel }, this.isShowingOnlyHistory() && (h("div", { key: '0d77206d8a2e599a389d3df1a66151102390d9fe', class: "suggestions-header" }, this.historyHeaderText)), this.filteredSuggestions.map((suggestion, index) => (h("div", { key: suggestion.id, id: `suggestion-${index}`, class: this.getSuggestionClassNames(index), role: "option", "aria-selected": index === this.selectedSuggestionIndex, "aria-label": `${suggestion.type === 'history' ? this.historyItemAriaLabel : this.suggestionAriaLabel}: ${suggestion.text}${suggestion.scope ? `, ${suggestion.scope}` : ''}${suggestion.resultCount ? `, ${suggestion.resultCount} results` : ''}`, onClick: () => this.selectSuggestion(suggestion), onMouseEnter: () => this.selectedSuggestionIndex = index }, h("div", { class: "suggestion-content" }, suggestion.type === 'history' && (h("ifx-icon", { icon: "history-16", class: "suggestion-icon suggestion-icon--history" })), suggestion.type === 'suggestion' && (h("ifx-icon", { icon: "search-16", class: "suggestion-icon suggestion-icon--suggestion" })), h("span", { class: "suggestion-text" }, h("span", { class: "suggestion-main-text" }, this.renderHighlightedText(suggestion.text, this.value)), suggestion.scope && (h("span", { class: "suggestion-scope" }, "\u2013 ", suggestion.scope))), suggestion.resultCount !== undefined && suggestion.scope && (h("span", { class: "suggestion-count" }, suggestion.resultCount)), suggestion.type === 'history' && (h("ifx-icon", { icon: "cross16", class: "suggestion-delete-icon", role: "button", tabindex: "0", "aria-label": `${this.historyDeleteAriaLabel}: ${suggestion.text}`, onClick: (event) => this.handleHistoryDelete(event, suggestion.text), onKeyDown: (event) => {
                 if (event.key === 'Enter' || event.key === ' ') {
                     event.preventDefault();
                     this.handleHistoryDelete(event, suggestion.text);

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

@@ -18,7 +18,7 @@ export class Segment {
         }
     }
     render() {
-        return (h("div", { key: 'cd801960a7ce5e8112b0d544a0122ded889cfc1f', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: 'c81cddf4a652f00324cbc0b8a31c3598c1b62a08', icon: this.icon }), " ", h("slot", { key: '7b9786b4b20e69eaf30b5a6d140decff95e04423' })));
+        return (h("div", { key: 'a76781c607aad619d279d69346755e5d24e419f2', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: '1f0e9e14400d9f78c8c849e9073ae89b191d041e', icon: this.icon }), " ", h("slot", { key: '201ac1267f6a0930cd4baa0721c5010fa82de700' })));
     }
     static get is() { return "ifx-segment"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,15 +6,23 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  gap: 12px;
 }
 .group__label {
-  font: 400 0.75rem/1rem "Source Sans 3";
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
 }
 .group__label:empty {
   display: none;
 }
+.group__label .required {
+  color: #575352;
+  margin-left: 4px;
+}
+.group__label .required.error {
+  color: #CD002F;
+}
 .group__controls {
   display: flex;
@@ -27,8 +35,14 @@
 }
 .group__caption {
+  margin-top: 4px;
   display: flex;
   align-items: center;
   gap: 8px;
-  font: 400 0.75rem/1rem "Source Sans 3";
+  font-weight: 400;
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+.group__caption.error {
+  color: #CD002F;
 }

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

@@ -7,6 +7,8 @@ export class SegmentedControl {
         this.caption = '';
         this.label = '';
         this.size = 'regular';
+        this.required = false;
+        this.error = false;
         this.selectedValue = '';
     }
     onSegmentSelect(event) {
@@ -65,8 +67,8 @@ export class SegmentedControl {
         this.setActiveSegment();
     }
     render() {
-        return (h("div", { key: '7c7d870d32000a823ae2d365fb8b864d800ec9fe', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, h("div", { key: '66e95707b6616e370e35cd98e4c3b89853b8501f', class: 'group__label' }, this.label.trim()), h("div", { key: 'ab8c969a145fa9e1071ee12426a641034ff8be4d', class: 'group__controls' }, h("slot", { key: '849c4bdf76a0951d829820620813258553b8a6df' })), this.caption.trim() &&
-            h("div", { key: '905c964392ca304634aba610f96c43a4e5b95eb9', class: 'group__caption' }, h("ifx-icon", { key: '42fb13f0a7170a7b36ea2a9c8afb1d3ba9d579c9', icon: 'c-info-16' }), " ", this.caption.trim())));
+        return (h("div", { key: '89adf4eb1c9da0bdacac4d7d0a26bf0c4d01666d', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: "group" }, h("div", { key: '5ed77f418047838589851b36d90d1a12eeb9b664', class: 'group__label' }, this.label.trim(), this.required && h("span", { key: '745973fd74bcbdadb4651a8148aa584c45a6999a', class: `required ${this.error ? 'error' : ''}` }, "*")), h("div", { key: '02a611e12d25901cd6657774d3e6dbebaeb2686d', class: 'group__controls' }, h("slot", { key: '601f72992d94bc5cefc1de872edd4ba1567c4564' })), this.caption.trim() &&
+            h("div", { key: 'b6e5ac307a1d908a5054ce225acc9a41db235618', class: `group__caption ${this.error ? 'error' : ''}` }, h("ifx-icon", { key: '3d44e4a1a64e608948d807fe6ec014c4adc45c6a', icon: 'c-info-16' }), " ", this.caption.trim())));
     }
     componentDidRender() {
         this.setSegmentSize();
@@ -144,6 +146,46 @@ export class SegmentedControl {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "'regular'"
+            },
+            "required": {
+                "type": "boolean",
+                "attribute": "required",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "attribute": "error",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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;AACzF,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAQzE,MAAM,OAAO,gBAAgB;IAN7B;QAWY,YAAO,GAAW,EAAE,CAAC;QACrB,UAAK,GAAW,EAAE,CAAC;QACnB,SAAI,GAAwB,SAAS,CAAC;~~QAStC~~,kBAAa,GAAW,EAAE,CAAC;~~KAgFtC~~;~~IAtFG~~,eAAe,CAAC,KAAkB;QAC9B,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC,uBAAuB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACpF,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;QACnC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC,CAAC;IAC1D,CAAC;IAID,uBAAuB,CAAC,gBAAwB;QAC5C,IAAI,aAAqB,CAAC;QAC1B,IAAI,aAAqB,CAAC;QAE1B,MAAM,QAAQ,GAAa,IAAI,CAAC,WAAW,EAAE,CAAC;QAC9C,QAAQ,CAAC,OAAO,CAAC,CAAC,OAA8B,EAAE,EAAE;YAChD,IAAI,OAAO,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,OAAO,CAAC,YAAY,KAAK,gBAAgB,EAAE,CAAC;oBAC5C,OAAO,CAAC,QAAQ,GAAG,KAAK,CAAC;oBACzB,aAAa,GAAG,OAAO,CAAC,KAAK,CAAC;gBAClC,CAAC;qBAAM,CAAC;oBACJ,aAAa,GAAG,OAAO,CAAC,KAAK,CAAC;gBAClC,CAAC;YACL,CAAC;QACL,CAAC,CAAC,CAAA;QAEF,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC;IAC5C,CAAC;IAED,WAAW;QACP,OAAO,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC;IACjE,CAAC;IAED,gBAAgB;QACZ,MAAM,QAAQ,GAAa,IAAI,CAAC,WAAW,EAAE,CAAC;QAC9C,IAAI,2BAA2B,GAAG,KAAK,CAAC;QACxC,QAAQ,CAAC,OAAO,CAAC,CAAC,OAA8B,EAAE,GAAW,EAAE,EAAE;YAC7D,OAAO,CAAC,YAAY,GAAG,GAAG,CAAC;YAC3B,IAAI,2BAA2B,EAAE,CAAC;gBAC9B,IAAI,OAAO,CAAC,QAAQ;oBAAE,OAAO,CAAC,QAAQ,GAAG,KAAK,CAAC;YACnD,CAAC;iBAAM,CAAC;gBACJ,IAAI,OAAO,CAAC,QAAQ,EAAE,CAAC;oBACnB,2BAA2B,GAAG,IAAI,CAAC;oBACnC,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC,KAAK,CAAC;gBACvC,CAAC;YACL,CAAC;QACL,CAAC,CAAC,CAAC;IACP,CAAC;IAED,cAAc;QACV,MAAM,QAAQ,GAAa,IAAI,CAAC,WAAW,EAAE,CAAC;QAC9C,QAAQ,CAAC,OAAO,CAAC,CAAC,OAA8B,EAAE,EAAE;YAChD,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QACxF,CAAC,CAAC,CAAC;IACP,CAAC;IAED,KAAK,CAAC,gBAAgB;QAClB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,gBAAgB,CAAC,EAAE,CAAC;YAChD,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,uBAAuB,EAAE,MAAM,SAAS,CAAC,CAAA;QAC5D,CAAC;QACD,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC5B,CAAC;IAED,MAAM;QACF,OAAO,CACH,0EAAiB,IAAI,CAAC,aAAa,gBAAa,mBAAmB,EAAC,KAAK,EAAC,OAAO;YAC7E,4DAAK,KAAK,EAAC,cAAc,~~IACnB,~~IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,~~CACjB~~;YAEN,4DAAK,KAAK,EAAC,iBAAiB;gBACxB,8DAAQ,CACN;YAGF,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;gBACnB,4DAAK,KAAK,~~EAAC~~,~~gBAAgB~~;~~oBACvB~~,iEAAU,IAAI,EAAC,WAAW,GAAY;;oBAAG,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAC1D,CAER,CACT,CAAC;IACN,CAAC;IAED,kBAAkB;QACd,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACJ","sourcesContent":["import { h, Component, Element, Event, EventEmitter, Listen, Prop } 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-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 }\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 async componentDidLoad() {\n if(!isNestedInIfxComponent(this.SegmentedControl)) { \n const framework = detectFramework();\n trackComponent('ifx-segmented-control', await framework)\n }\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='c-info-16'></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\";\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-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 @Prop() required: boolean = false;\n @Prop() error: boolean = false;\n\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 }\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 async componentDidLoad() {\n if(!isNestedInIfxComponent(this.SegmentedControl)) { \n const framework = detectFramework();\n trackComponent('ifx-segmented-control', await framework)\n }\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 { this.required && <span class={`required ${this.error ? 'error' : ''}`}>*</span> }\n </div>\n \n <div class='group__controls'>\n <slot />\n </div>\n \n {\n this.caption.trim() &&\n <div class={`group__caption ${this.error ? 'error' : ''}`}>\n <ifx-icon icon='c-info-16'></ifx-icon> { this.caption.trim() }\n </div>\n }\n </div>\n );\n }\n\n componentDidRender() {\n this.setSegmentSize();\n }\n}"]}