@infineon/infineon-design-system-stencil 30.9.3--canary.1679.8d0c83c3f0040ae0386585c5203298c7d94911f3.0 → 30.9.3--canary.1640.c246fbcdce3247ffada7a2fffa49d05593d4088f.0

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

@@ -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: '03f7199539b30dddf4d68cea3414f3765d740cc5', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: 'a292619c636d039551feddc17f12683fdafa27a0', class: 'items__per-page-wrapper' }, h("div", { key: '485c630f589de272ffad25fe94130abfebe7ea70', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: 'd266d33859a7daa35bf0229be58418b77b970bad', class: 'items__per-page-field' }, h("ifx-select", { key: '4193b2033eeaa619094437c24e3aed965b61a74d', 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: 'a73e002c63ad88c56a789be4ce8f85c5c56f5a21', class: 'items__total-wrapper' }, h("div", { key: '2cf02018e2d4310f24198368fb18af3ad71de25b', class: 'page__numbers-wrapper' }, h("div", { key: 'e1ffcc6786f537a00f87027d45fc49fd6529a040', class: "pagination" }, h("ifx-icon-button", { key: '62f74d468a40553fef751d3a400433de99def658', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: '6660775d4bd7d5d9244b7f1fa85da66386129364' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: '16d385cb5308d4220eb4c42beb3fb59512155de7', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
+        return (h("div", { key: 'db55804ece2792b117f6f5375a6f63253679a393', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: 'bc40446f5905c3f249d243993d7363479d6ce384', class: 'items__per-page-wrapper' }, h("div", { key: '9c15d938fc18b93fc7e8c10339b71649575386ca', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: '0b7ba079ffa28c5732df989988afd65396c8adc9', class: 'items__per-page-field' }, h("ifx-select", { key: '1a031fa45753fc389e3ab386ab6170f50d1df0f0', 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: 'd5bd11d957dd37b5af1df9d285ae4098c93c3365', class: 'items__total-wrapper' }, h("div", { key: '295766066233b8b0f975abcc093cc43839b46125', class: 'page__numbers-wrapper' }, h("div", { key: '574f2ef606d94c2a6ad16c9b9684f158f3595422', class: "pagination" }, h("ifx-icon-button", { key: 'f98a3b995d2f08124e2f2e3f96e64cccd7b81b33', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: '07630c257729a369d07baf12e99c0469fccebe0d' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: '8407562df387e20efa76fdf6ee2d1fe65e6eb6f6', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
     }
     static get is() { return "ifx-pagination"; }
     static get encapsulation() { return "shadow"; }
@@ -218,36 +218,6 @@ export class Pagination {
                     "resolved": "any",
                     "references": {}
                 }
-            }, {
-                "method": "ifxNextPage",
-                "name": "ifxNextPage",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }, {
-                "method": "ifxPrevPage",
-                "name": "ifxPrevPage",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
             }];
     }
     static get elementRef() { return "el"; }

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

@@ -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}"]}
+{"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,MAAM,eAAe,CAAC;AAQhG,MAAM,OAAO,UAAU;IALvB;QAQU,gBAAW,GAAW,CAAC,CAAC;QACvB,iBAAY,GAAW,CAAC,CAAC;QACzB,iBAAY,GAAW,EAAE,CAAC;QAC1B,kBAAa,GAAa,EAAE,CAAC;QAC9B,UAAK,GAAW,CAAC,CAAC;QAElB,mBAAc,GAAG,UAAU,CAAA;QAC3B,iBAAY,GAAG,QAAQ,CAAA;QACvB,yBAAoB,GAAG,gBAAgB,CAAA;QACvC,aAAQ,GAAG,YAAY,CAAC;KA2LjC;IAxLC,eAAe,CAAC,CAAC;QACf,IAAG,CAAC,CAAC,MAAM,EAAE,CAAC;YACZ,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QAC9C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,2BAA2B,EAAE,CAAA;QAClC,IAAI,iBAAiB,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QACxE,IAAI,SAAS,GAAG,iBAAiB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;QACxD,IAAI,CAAC,kBAAkB,CAAC,SAAS,EAAE,IAAI,CAAC,CAAA;IAE1C,CAAC;IAED,sBAAsB;QACpB,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YAC5B,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;QACvB,CAAC;QACD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QAC/E,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;QACvC,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,CAAC;QAExD,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;QACxB,CAAC;aAAM,IAAI,IAAI,CAAC,WAAW,GAAG,eAAe,EAAE,CAAC;YAC9C,IAAI,CAAC,YAAY,GAAG,eAAe,CAAC;QACtC,CAAC;;YAAM,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC;QAE5C,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;IACxF,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,sBAAsB,EAAE,CAAA;IAC/B,CAAC;IAED,kBAAkB;QAChB,IAAI,iBAAiB,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QACxE,IAAI,SAAS,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACzD,IAAI,CAAC,4BAA4B,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAA;QAE/D,IAAI,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YAClE,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACtF,CAAC;;YAAM,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAEpD,IAAI,CAAC,UAAU,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAA;IAC3C,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,sBAAsB,EAAE,CAAA;IAC/B,CAAC;IAED,mBAAmB,CAAC,UAAU;QAC5B,IAAI,WAAW,GAAG,UAAU,GAAG,CAAC,CAAC;QACjC,IAAI,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;QAC3C,IAAI,QAAQ,GAAG,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC;QACpD,IAAI,QAAQ,GAAG,UAAU,GAAG,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,GAAG,CAAC,CAAC;QACnE,IAAI,YAAY,GAAG,IAAI,CAAC,YAAY,CAAA;QACpC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC,CAAA;IACxF,CAAC;IAED,4BAA4B,CAAC,SAAS,EAAE,mBAAmB;QACzD,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACzB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACnC,IAAI,MAAM,GAAG,mBAAmB,CAAC;gBACjC,IAAI,SAAS,GAAG,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;gBAC9C,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAA;gBAC9E,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;YAChC,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED,cAAc,CAAC,mBAAmB;QAChC,IAAI,SAAS,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAE3D,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,mBAAmB,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC;QAEzH,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;QAC/G,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;QAE/G,IAAI,CAAC,4BAA4B,CAAC,SAAS,EAAE,mBAAmB,CAAC,CAAA;IACnE,CAAC;IAED,kBAAkB,CAAC,CAAC,EAAE,YAAY;QAChC,IAAI,EAAE,GAAG,CAAC,CAAC;QACX,IAAI,OAAO,CAAC,CAAC,MAAM,KAAK,QAAQ,EAAE,CAAC;YACjC,EAAE,GAAG,CAAC,CAAC,MAAM,CAAA;QACf,CAAC;QAED,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC;YAChD,IAAI,MAAM,GAAG,EAAE,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;YACvC,IAAI,UAAU,GAAG,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,CAAC;YAC7D,UAAU,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAE3D,IAAI,UAAU,KAAK,CAAC,CAAC,EAAE,CAAC;gBACtB,UAAU,GAAG,CAAC,CAAC;YACjB,CAAC;YAED,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,UAAU,CAAC;YAC3C,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,YAAY,CAAC,CAAA;QACvC,CAAC;IACH,CAAC;IAED,UAAU,CAAC,UAAU,EAAE,YAAY;QACjC,MAAM,mBAAmB,GAAG,UAAU,CAAC;QACvC,IAAI,SAAS,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAC3D,IAAI,UAAU,GAAG,QAAQ,CAAC,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,CAAC;QAE1E,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACzB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YACzC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QACnD,CAAC,CAAC,CAAC;QAEH,IAAI,YAAY,IAAI,IAAI,CAAC,YAAY,GAAG,CAAC,EAAE,CAAC;YAC1C,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;YAC/C,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,UAAU,CAAC;QAC1D,CAAC;QAED,IAAI,CAAC,mBAAmB,CAAC,UAAU,CAAC,CAAA;QAEpC,SAAS,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAEvD,IAAI,UAAU,KAAK,CAAC,EAAE,CAAC;YACrB,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YAC9E,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC;QAE7D,CAAC;aAAM,CAAC;YACN,SAAS,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;YACnE,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YACjF,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,GAAG,KAAK,CAAC;QAC9D,CAAC;QAED,IAAI,UAAU,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC;YAC1C,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YAC9E,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC;QAE7D,CAAC;aAAM,CAAC;YACN,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YACjF,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,GAAG,KAAK,CAAC;QAC9D,CAAC;IACH,CAAC;IAED,2BAA2B;QACzB,IAAI,iBAAiB,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QACxE,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0EAAgB,cAAc,gBAAa,IAAI,CAAC,WAAW,EAAE,KAAK,EAAC,WAAW;YAC5E,4DAAK,KAAK,EAAC,yBAAyB;gBAClC,4DAAK,KAAK,EAAC,uBAAuB,uBAAuB;gBACzD,4DAAK,KAAK,EAAC,uBAAuB;oBAChC,mEACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,GAAG,EACR,WAAW,EAAC,OAAO,iBACP,OAAO,8BACM,WAAW,EACpC,QAAQ,EAAE,KAAK,EACf,KAAK,EAAE,KAAK,mBACE,OAAO,EACrB,KAAK,EAAC,EAAE,uBACU,aAAa,EAC/B,OAAO,EAAC,oJAAoJ,GACjJ,CACT,CACF;YACN,4DAAK,KAAK,EAAC,sBAAsB;gBAC/B,4DAAK,KAAK,EAAC,uBAAuB;oBAChC,4DAAK,KAAK,EAAC,YAAY;wBACrB,wEAAiB,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,eAAe,GAAmB;wBACzG,6DACG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAC/B,UAAI,KAAK,EAAE,GAAG,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE;4BAAE,SAAG,IAAI,EAAE,SAAS,IAAG,IAAI,CAAK,CAAK,CAAC,CAC/F;wBACL,wEAAiB,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,gBAAgB,GAAmB,CACtG,CACF,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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  @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/pagination/pagination.stories.js

@@ -7,33 +7,38 @@ export default {
         currentPage: 1,
     },
     argTypes: {
-        ifxPageChange: {
-            action: 'ifxPageChange',
-            description: 'Custom event emitted page is changed',
+        currentPage: {
+            description: 'Current page number.',
             table: {
+                category: 'Ifx-pagination props',
+                defaultValue: {
+                    'summary': '0'
+                },
                 type: {
-                    summary: 'Framework integration',
-                    detail: 'React: onIfxPageChange={handlePageChange}\nVue:@ifxPageChange="handlePageChange"\nAngular:(ifxPageChange)="handlePageChange()"\nVanillaJs:.addEventListener("ifxPageChange", (event) => {//handle page change});',
+                    summary: 'number',
                 },
             },
         },
-        ifxNextPage: {
-            action: 'ifxNextPage',
-            description: 'Custom event emitted when next page button clicked',
+        total: {
+            description: 'Total number of items.',
             table: {
+                category: 'Ifx-pagination props',
+                defaultValue: {
+                    'summary': '1'
+                },
                 type: {
-                    summary: 'Framework integration',
-                    detail: 'React: onIfxNextPage={handlePageChange}\nVue:@ifxNextPage="handlePageChange"\nAngular:(ifxNextPage)="handlePageChange()"\nVanillaJs:.addEventListener("ifxNextPage", (event) => {//handle page change});',
+                    summary: 'number',
                 },
             },
         },
-        ifxPrevPage: {
-            action: 'ifxPrevPage',
-            description: 'Custom event emitted when previous page button clicked',
+        ifxPageChange: {
+            action: 'ifxPageChange',
+            description: 'Custom event emitted when page is changed.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
-                    detail: 'React: onIfxPrevPage={handlePageChange}\nVue:@ifxPrevPage="handlePageChange"\nAngular:(ifxPrevPage)="handlePageChange()"\nVanillaJs:.addEventListener("ifxPrevPage", (event) => {//handle page change});',
+                    detail: 'React: onIfxPageChange={handlePageChange}\nVue:@ifxPageChange="handlePageChange"\nAngular:(ifxPageChange)="handlePageChange()"\nVanillaJs:.addEventListener("ifxPageChange", (event) => {//handle page change});',
                 },
             },
         },

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.stories.js","sourceRoot":"","sources":["../../../src/components/pagination/pagination.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,sBAAsB;IAEtB,IAAI,EAAE;QACJ,KAAK,EAAE,EAAE;QACT,WAAW,EAAE,CAAC;KACf;IACD,QAAQ,EAAE;QACR,aAAa,EAAE;YACb,MAAM,EAAE,eAAe;YACvB,WAAW,EAAE,sCAAsC;YACnD,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,kNAAkN;iBACrN;aACF;SACF;QACD,WAAW,EAAE;YACX,MAAM,EAAE,aAAa;YACrB,WAAW,EAAE,oDAAoD;YACjE,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,0MAA0M;iBAC7M;aACF;SACF;QACD,WAAW,EAAE;YACX,MAAM,EAAE,aAAa;YACrB,WAAW,EAAE,wDAAwD;YACrE,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,0MAA0M;iBAC7M;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACzD,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,OAAO,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IACvD,OAAO,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;IACnE,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Pagination',\n  // tags: ['autodocs'],\n\n  args: {\n    total: 50,\n    currentPage: 1,\n  },\n  argTypes: {\n    ifxPageChange: {\n      action: 'ifxPageChange',\n      description: 'Custom event emitted page is changed',\n      table: {\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxPageChange={handlePageChange}\\nVue:@ifxPageChange=\"handlePageChange\"\\nAngular:(ifxPageChange)=\"handlePageChange()\"\\nVanillaJs:.addEventListener(\"ifxPageChange\", (event) => {//handle page change});',\n        },\n      },\n    },\n    ifxNextPage: {\n      action: 'ifxNextPage',\n      description: 'Custom event emitted when next page button clicked',\n      table: {\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxNextPage={handlePageChange}\\nVue:@ifxNextPage=\"handlePageChange\"\\nAngular:(ifxNextPage)=\"handlePageChange()\"\\nVanillaJs:.addEventListener(\"ifxNextPage\", (event) => {//handle page change});',\n        },\n      },\n    },\n    ifxPrevPage: {\n      action: 'ifxPrevPage',\n      description: 'Custom event emitted when previous page button clicked',\n      table: {\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxPrevPage={handlePageChange}\\nVue:@ifxPrevPage=\"handlePageChange\"\\nAngular:(ifxPrevPage)=\"handlePageChange()\"\\nVanillaJs:.addEventListener(\"ifxPrevPage\", (event) => {//handle page change});',\n        },\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = args => {\n  const element = document.createElement('ifx-pagination');\n  element.setAttribute('total', args.total);\n  element.setAttribute('current-page', args.currentPage);\n  element.addEventListener('ifxPageChange', action('ifxPageChange'));\n  return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}
+{"version":3,"file":"pagination.stories.js","sourceRoot":"","sources":["../../../src/components/pagination/pagination.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,sBAAsB;IAEtB,IAAI,EAAE;QACJ,KAAK,EAAE,EAAE;QACT,WAAW,EAAE,CAAC;KACf;IACD,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,WAAW,EAAE,sBAAsB;YACnC,KAAK,EAAE;gBACL,QAAQ,EAAE,sBAAsB;gBAChC,YAAY,EAAE;oBACZ,SAAS,EAAE,GAAG;iBACf;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QAED,KAAK,EAAE;YACL,WAAW,EAAE,wBAAwB;YACrC,KAAK,EAAE;gBACL,QAAQ,EAAE,sBAAsB;gBAChC,YAAY,EAAE;oBACZ,SAAS,EAAE,GAAG;iBACf;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QAED,aAAa,EAAE;YACb,MAAM,EAAE,eAAe;YACvB,WAAW,EAAE,4CAA4C;YACzD,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,kNAAkN;iBACrN;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACzD,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,OAAO,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IACvD,OAAO,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;IACnE,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Pagination',\n  // tags: ['autodocs'],\n\n  args: {\n    total: 50,\n    currentPage: 1,\n  },\n  argTypes: {\n    currentPage: {\n      description: 'Current page number.',\n      table: {\n        category: 'Ifx-pagination props',\n        defaultValue: {\n          'summary': '0'\n        },\n        type: {\n          summary: 'number',\n        },\n      },\n    },\n\n    total: {\n      description: 'Total number of items.',\n      table: {\n        category: 'Ifx-pagination props',\n        defaultValue: {\n          'summary': '1'\n        },\n        type: {\n          summary: 'number',\n        },\n      },\n    },\n\n    ifxPageChange: {\n      action: 'ifxPageChange',\n      description: 'Custom event emitted when page is changed.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxPageChange={handlePageChange}\\nVue:@ifxPageChange=\"handlePageChange\"\\nAngular:(ifxPageChange)=\"handlePageChange()\"\\nVanillaJs:.addEventListener(\"ifxPageChange\", (event) => {//handle page change});',\n        },\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = args => {\n  const element = document.createElement('ifx-pagination');\n  element.setAttribute('total', args.total);\n  element.setAttribute('current-page', args.currentPage);\n  element.addEventListener('ifxPageChange', action('ifxPageChange'));\n  return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}

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

@@ -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: '08f1b959803b48ce212fcabd9bd1daf8987ebb8d', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, h("div", { key: '6e4c7d9c69c917c0986c6793a86894f7f94e0681', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: '88e5e1d3fb79ec93262b38ddec839002281de965', 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

@@ -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"]}
+{"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/progress-bar/progress-bar.stories.js

@@ -3,17 +3,40 @@ export default {
     tags: ['autodocs'],
     args: {
         size: 'm',
-        percentage: 50,
+        value: 50,
         showLabel: false,
     },
     argTypes: {
-        percentage: {
+        value: {
+            description: 'The percentage of the progress bar.',
             control: { type: 'range', min: 0, max: 100 },
+            table: {
+                category: 'ifx-progress-bar props',
+                defaultValue: {
+                    summary: 50
+                }
+            }
+        },
+        showLabel: {
+            description: 'Shows the percentage of the progress bar. Does not fit in size ***s***.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-progress-bar props',
+                defaultValue: {
+                    summary: false
+                }
+            }
         },
         size: {
-            description: 'Size options: s (36px) and m (40px) - default: m',
+            description: 'Sets the size of the progress bar. Options: s (36px) and m (40px).',
+            control: 'radio',
             options: ['s', 'm'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-progress-bar props',
+                defaultValue: {
+                    summary: 'm'
+                }
+            }
         },
     },
 };
@@ -21,7 +44,7 @@ const Template = args => {
     const wrapper = document.createElement('div');
     wrapper.innerHTML = `
     <ifx-progress-bar
-      value="${args.percentage}"
+      value="${args.value}"
       size="${args.size}"
       show-label="${args.showLabel}"
     ></ifx-progress-bar>
@@ -31,17 +54,17 @@ const Template = args => {
 export const Default = Template.bind({});
 Default.args = {
     size: 'm',
-    percentage: 50,
+    value: 50,
     showLabel: false,
 };
 export const Small = Template.bind({});
 Small.args = {
-    percentage: 75,
+    value: 75,
     size: 's',
 };
 export const WithLabel = Template.bind({});
 WithLabel.args = {
-    percentage: 25,
+    value: 25,
     showLabel: true,
 };
 //# sourceMappingURL=progress-bar.stories.js.map

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

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

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

@@ -2,14 +2,10 @@ 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.
@@ -54,10 +50,10 @@ export class RadioButton {
         }
     }
     render() {
-        return (h("div", { key: 'fb6864c1b5d9f40f71e13b1e60a10b1f86769503', "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: 'cd0f203c4cec3eee8a92217189b11e60e1050482', class: `radioButton__wrapper 
+        return (h("div", { key: '7b5291f95e3fc00c0ceb9285c57ca440b1a8939f', "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: '5efda77550a294da34c4f72c4558e312690f9cd9', class: `radioButton__wrapper 
           ${this.internalChecked ? 'checked' : ''} 
           ${this.disabled ? 'disabled' : ''} 
-          ${this.error ? 'error' : ''}`, tabIndex: this.disabled ? -1 : 0 }, this.internalChecked && h("div", { key: 'ad3b2ecf1c7d59d8d7f862cfe12be860192d98b5', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: '291f7716a53dfd5d2bf4f7a6688eaa68c1f6d3bf', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '5f0f8fd70f68fe038a862b0d1677333743435d46' }))), h("input", { key: '5b148c43c834b91fc2644c6c1041504dd1d83935', 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' : ''}`, tabIndex: this.disabled ? -1 : 0 }, this.internalChecked && h("div", { key: '2b1a814830a361021a812016d770d7838dca05fe', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: '61911033a487c6396c1c34b35f13f04cf84ea602', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '7f1b40289cdd67a4fbc2e4677da03e22cdfa758c' }))), h("input", { key: 'f77c2d84f409e3875798370a06cbc744385e5655', 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 originalStyleUrls() {

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

@@ -1 +1 @@
-{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, 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"]}
+{"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\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"]}

package/dist/collection/components/radio-button/radio-button.stories.js

@@ -3,35 +3,88 @@ export default {
     title: 'Components/Radio Button',
     // tags: ['autodocs'],
     args: {
+        label: 'Text',
         error: false,
         disabled: false,
         checked: false,
         size: 's',
-        label: 'Text',
         name: 'radio-button',
         value: 'radio',
     },
     argTypes: {
-        ifxChange: {
-            description: 'Custom event emitted when radio button checked and unchecked',
+        error: {
+            description: 'Indicates whether the radio button is in an error state.',
+            control: 'boolean',
             table: {
-                type: {
-                    summary: 'Framework integration',
-                    detail: 'React: onIfxChange={handleChange}\nVue:@ifxChange="handleChange"\nAngular:(ifxChange)="handleChange()"\nVanillaJs:.addEventListener("ifxChange", (event) => {//handle change});',
-                },
-            },
-            action: 'ifxChange',
+                category: 'ifx-radio-button props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
+        disabled: {
+            description: 'Disables the radio button.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-radio-button props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
+        checked: {
+            description: 'Determines whether the radio button is selected by default.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-radio-button props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
+        label: {
+            name: 'Label of Radio Button',
+            description: 'Set the label displayed next to *<ifx-radio-button>*.',
+            table: {
+                category: 'story controls',
+            }
         },
         size: {
-            description: 'Size options: s (20px) and m (24px) - default: s',
+            description: 'Specifies the size of the radio button. Options: s (20px) and m (24px).',
+            control: 'radio',
             options: ['s', 'm'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-radio-button props',
+                defaultValue: {
+                    summary: 's'
+                },
+                type: {
+                    summary: 's | m'
+                }
+            }
         },
         name: {
-            description: 'Name of the element, that is used as reference when a form is submitted.'
+            description: 'Name of the element, that is used as reference when a form is submitted.',
+            table: {
+                category: 'ifx-radio-button props'
+            }
         },
         value: {
-            description: 'The value that gets submitted, when the radio button is checked'
+            description: 'The value that gets submitted, when the radio button is checked.',
+            table: {
+                category: 'ifx-radio-button props'
+            }
+        },
+        ifxChange: {
+            description: 'Custom event emitted when radio button checked and unchecked.',
+            table: {
+                category: 'custom events',
+                type: {
+                    summary: 'Framework integration',
+                    detail: 'React: onIfxChange={handleChange}\nVue:@ifxChange="handleChange"\nAngular:(ifxChange)="handleChange()"\nVanillaJs:.addEventListener("ifxChange", (event) => {//handle change});',
+                },
+            },
+            action: 'ifxChange',
         }
     },
 };

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

@@ -1 +1 @@
-{"version":3,"file":"radio-button.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,sBAAsB;IAEtB,IAAI,EAAE;QACJ,KAAK,EAAE,KAAK;QACZ,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,KAAK;QACd,IAAI,EAAE,GAAG;QACT,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE,OAAO;KACf;IACD,QAAQ,EAAE;QACR,SAAS,EAAE;YACT,WAAW,EAAE,8DAA8D;YAC3E,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,iLAAiL;iBACpL;aACF;YAED,MAAM,EAAE,WAAW;SACpB;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,kDAAkD;YAC/D,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,0EAA0E;SACxF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,iEAAiE;SAC/E;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,kCAAkC;IAClC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAE3D,qBAAqB;IACrB,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChD,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAC9C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACxC,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACxC,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAE1C,+BAA+B;IAC/B,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAEzD,yBAAyB;IACzB,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;IAE3D,qBAAqB;IACrB,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Radio Button',\n  // tags: ['autodocs'],\n\n  args: {\n    error: false,\n    disabled: false,\n    checked: false,\n    size: 's',\n    label: 'Text',\n    name: 'radio-button',\n    value: 'radio',\n  },\n  argTypes: {\n    ifxChange: {\n      description: 'Custom event emitted when radio button checked and unchecked',\n      table: {\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n        },\n      },\n\n      action: 'ifxChange',\n    },\n    size: {\n      description: 'Size options: s (20px) and m (24px) - default: s',\n      options: ['s', 'm'],\n      control: { type: 'radio' },\n    },\n    name: {\n      description: 'Name of the element, that is used as reference when a form is submitted.'\n    },\n    value: {\n      description: 'The value that gets submitted, when the radio button is checked'\n    }\n  },\n};\n\nconst DefaultTemplate = args => {\n  // Create the radio button element\n  const element = document.createElement('ifx-radio-button');\n\n  // Set the attributes\n  element.setAttribute('error', args.error);\n  element.setAttribute('disabled', args.disabled);\n  element.setAttribute('checked', args.checked);\n  element.setAttribute('size', args.size);\n  element.setAttribute('name', args.name);\n  element.setAttribute('value', args.value);\n\n  // Add the label as a text node\n  element.appendChild(document.createTextNode(args.label));\n\n  // Add the event listener\n  element.addEventListener('ifxChange', action('ifxChange'));\n\n  // Return the element\n  return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}
+{"version":3,"file":"radio-button.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Radio Button',\n  // tags: ['autodocs'],\n\n  args: {\n    label: 'Text',\n    error: false,\n    disabled: false,\n    checked: false,\n    size: 's',\n    name: 'radio-button',\n    value: 'radio',\n  },\n  argTypes: {\n    error: {\n      description: 'Indicates whether the radio button is in an error state.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-radio-button props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    disabled: {\n      description: 'Disables the radio button.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-radio-button props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    checked: {\n      description: 'Determines whether the radio button is selected by default.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-radio-button props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    label: {\n      name: 'Label of Radio Button',\n      description: 'Set the label displayed next to *<ifx-radio-button>*.',\n      table: {\n        category: 'story controls',\n      }\n    },\n    size: {\n      description: 'Specifies the size of the radio button. Options: s (20px) and m (24px).',\n      control: 'radio',\n      options: ['s', 'm'],\n      table: {\n        category: 'ifx-radio-button props',\n        defaultValue: {\n          summary: 's'\n        },\n        type: {\n          summary: 's | m'\n        }\n      }\n    },\n    name: {\n      description: 'Name of the element, that is used as reference when a form is submitted.',\n      table: {\n        category: 'ifx-radio-button props'\n      }\n    },\n    value: {\n      description: 'The value that gets submitted, when the radio button is checked.',\n      table: {\n        category: 'ifx-radio-button props'\n      }\n    },\n    ifxChange: {\n      description: 'Custom event emitted when radio button checked and unchecked.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n        },\n      },\n\n      action: 'ifxChange',\n    }\n  },\n};\n\nconst DefaultTemplate = args => {\n  // Create the radio button element\n  const element = document.createElement('ifx-radio-button');\n\n  // Set the attributes\n  element.setAttribute('error', args.error);\n  element.setAttribute('disabled', args.disabled);\n  element.setAttribute('checked', args.checked);\n  element.setAttribute('size', args.size);\n  element.setAttribute('name', args.name);\n  element.setAttribute('value', args.value);\n\n  // Add the label as a text node\n  element.appendChild(document.createTextNode(args.label));\n\n  // Add the event listener\n  element.addEventListener('ifxChange', action('ifxChange'));\n\n  // Return the element\n  return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}

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

@@ -1,21 +1,18 @@
 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);
+            this.ifxOpen.emit(this.internalState);
         };
         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);
+        this.ifxOpen.emit(false);
         this.internalState = false;
     }
     handlePropChange() {
@@ -26,13 +23,13 @@ export class SearchBar {
     }
     componentWillLoad() {
         this.setInitialState();
-        this.ifxSearchBarIsOpen.emit(this.internalState);
+        this.ifxOpen.emit(this.internalState);
     }
     handleInput(event) {
         this.value = event.detail;
     }
     render() {
-        return (h("div", { key: '126123cf2e7c3bd9a362349c293ebc5be37be980', "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: 'e1875ac2a7a96e59f77f3ecf7cc4079fe8509bf8', "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"; }
@@ -150,8 +147,8 @@ export class SearchBar {
                     "references": {}
                 }
             }, {
-                "method": "ifxSearchBarIsOpen",
-                "name": "ifxSearchBarIsOpen",
+                "method": "ifxOpen",
+                "name": "ifxOpen",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,