npm - @infineon/infineon-design-system-stencil - Versions diffs - 20.34.1 → 20.34.2 - Mend

@infineon/infineon-design-system-stencil 20.34.1 → 20.34.2

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 (13) hide show

package/dist/cjs/ifx-pagination.cjs.entry.js CHANGED Viewed

@@ -37,7 +37,7 @@ const Pagination = class {
     }
     const total = this.total <= this.itemsPerPage ? this.itemsPerPage : this.total;
     const itemsPerPage = this.itemsPerPage;
-    const totalPageNumber = total / itemsPerPage;
+    const totalPageNumber = Math.ceil(total / itemsPerPage);
     if (this.currentPage <= 0) {
       this.internalPage = 1;
     }

package/dist/cjs/ifx-pagination.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-pagination.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,4hKAA4hK;;MCOriK,UAAU;;;;;;IAWb,mBAAc,GAAG,UAAU,CAAA;IAC3B,iBAAY,GAAG,QAAQ,CAAA;IACvB,yBAAoB,GAAG,gBAAgB,CAAA;IACvC,aAAQ,GAAG,YAAY,CAAC;uBATF,CAAC;wBACC,CAAC;wBACD,EAAE;yBACC,EAAE;iBACb,CAAC;;EAQzB,eAAe,CAAC,CAAC;IACf,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;GAC7C;EAED,gBAAgB;IACd,IAAI,CAAC,2BAA2B,EAAE,CAAA;IAClC,IAAI,iBAAiB,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IACxE,IAAI,SAAS,GAAG,iBAAiB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;IACxD,IAAI,CAAC,kBAAkB,CAAC,SAAS,EAAE,IAAI,CAAC,CAAA;GACzC;EAED,sBAAsB;IACpB,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;MAC3B,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;KACtB;IACD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;IAC/E,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;IACvC,MAAM,eAAe,GAAG,KAAK,GAAG,YAAY,CAAC;IAE7C,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,EAAE;MACzB,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;KACvB;SAAM,IAAI,IAAI,CAAC,WAAW,GAAG,eAAe,EAAE;MAC7C,IAAI,CAAC,YAAY,GAAG,eAAe,CAAC;KACrC;;MAAM,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC;IAE5C,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,KAAK,GAAG,CAAC,CAAC,CAAC;GACvF;EAED,iBAAiB;IACf,IAAI,CAAC,sBAAsB,EAAE,CAAA;GAC9B;EAED,kBAAkB;IAChB,IAAI,iBAAiB,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IACxE,IAAI,SAAS,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACzD,IAAI,CAAC,4BAA4B,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAA;IAE/D,IAAI,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE;MACjE,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACrF;;MAAM,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEpD,IAAI,CAAC,UAAU,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAA;GAC1C;EAED,mBAAmB;IACjB,IAAI,CAAC,sBAAsB,EAAE,CAAA;GAC9B;EAED,mBAAmB,CAAC,UAAU;IAC5B,IAAI,WAAW,GAAG,UAAU,GAAG,CAAC,CAAC;IACjC,IAAI,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;IAC3C,IAAI,QAAQ,GAAG,UAAU,KAAK,CAAC,GAAG,IAAI,GAAG,UAAU,CAAC;IACpD,IAAI,QAAQ,GAAG,UAAU,GAAG,CAAC,GAAG,UAAU,GAAG,IAAI,GAAG,UAAU,GAAG,CAAC,CAAC;IACnE,IAAI,YAAY,GAAG,IAAI,CAAC,YAAY,CAAA;IACpC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC,CAAA;GACvF;EAED,4BAA4B,CAAC,SAAS,EAAE,mBAAmB;IACzD,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI;MACrB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC;QAC/B,IAAI,MAAM,GAAG,mBAAmB,CAAC;QACjC,IAAI,SAAS,GAAG,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAC9C,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAA;QAC9E,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;OAC/B,CAAC,CAAC;KACJ,CAAC,CAAC;GACJ;EAED,cAAc,CAAC,mBAAmB;IAChC,IAAI,SAAS,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAE3D,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;IAEzH,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;IAC/G,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;IAE/G,IAAI,CAAC,4BAA4B,CAAC,SAAS,EAAE,mBAAmB,CAAC,CAAA;GAClE;EAED,kBAAkB,CAAC,CAAC,EAAE,YAAY;IAChC,IAAI,EAAE,GAAG,CAAC,CAAC;IACX,IAAI,OAAO,CAAC,CAAC,MAAM,KAAK,QAAQ,EAAE;MAChC,EAAE,GAAG,CAAC,CAAC,MAAM,CAAA;KACd;IAED,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE;MAC/C,IAAI,MAAM,GAAG,EAAE,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;MACvC,IAAI,UAAU,GAAG,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,CAAC;MAC7D,UAAU,IAAI,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;MAE3D,IAAI,UAAU,KAAK,CAAC,CAAC,EAAE;QACrB,UAAU,GAAG,CAAC,CAAC;OAChB;MAED,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,UAAU,CAAC;MAC3C,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,YAAY,CAAC,CAAA;KACtC;GACF;EAED,UAAU,CAAC,UAAU,EAAE,YAAY;IACjC,MAAM,mBAAmB,GAAG,UAAU,CAAC;IACvC,IAAI,SAAS,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC3D,IAAI,UAAU,GAAG,QAAQ,CAAC,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,CAAC;IAE1E,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI;MACrB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;MACzC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;KAClD,CAAC,CAAC;IAEH,IAAI,YAAY,IAAI,IAAI,CAAC,YAAY,GAAG,CAAC,EAAE;MACzC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;MAC/C,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,UAAU,CAAC;KACzD;IAED,IAAI,CAAC,mBAAmB,CAAC,UAAU,CAAC,CAAA;IAEpC,SAAS,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAEvD,IAAI,UAAU,KAAK,CAAC,EAAE;MACpB,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;MAC9E,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC;KAE5D;SAAM;MACL,SAAS,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;MACnE,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;MACjF,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,GAAG,KAAK,CAAC;KAC7D;IAED,IAAI,UAAU,MAAM,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE;MACzC,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;MAC9E,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC;KAE5D;SAAM;MACL,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;MACjF,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,GAAG,KAAK,CAAC;KAC7D;GACF;EAED,2BAA2B;IACzB,IAAI,iBAAiB,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IACxE,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;GACvC;EAED,MAAM;IACJ,QACEA,+BAAgB,cAAc,gBAAa,IAAI,CAAC,WAAW,EAAE,KAAK,EAAC,WAAW,IAC5EA,iBAAK,KAAK,EAAC,yBAAyB,IAClCA,iBAAK,KAAK,EAAC,uBAAuB,uBAAuB,EACzDA,iBAAK,KAAK,EAAC,uBAAuB,IAChCA,wBACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,WAAW,cACR,GAAG,EACZ,WAAW,EAAC,OAAO,oBACJ,OAAO,8BACG,WAAW,kBACvB,OAAO,eACV,OAAO,uBACC,OAAO,eACf,EAAE,2BACU,aAAa,iBACvB,oJAAoJ,GACrJ,CACT,CACF,EACNA,iBAAK,KAAK,EAAC,sBAAsB,IAC/BA,iBAAK,KAAK,EAAC,uBAAuB,IAChCA,iBAAK,KAAK,EAAC,YAAY,IACrBA,6BAAiB,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,eAAe,GAAmB,EACzGA,oBACG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,KAC3BA,gBAAI,KAAK,EAAE,GAAG,IAAI,CAAC,YAAY,KAAK,IAAI,GAAG,QAAQ,GAAG,EAAE,EAAE,IAAEA,eAAG,IAAI,EAAE,SAAS,IAAG,IAAI,CAAK,CAAK,CAAC,CAC/F,EACLA,6BAAiB,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,gBAAgB,GAAmB,CACtG,CACF,CACF,CACF,EACN;GACH;;;;;;;","names":["h"],"sources":["src/components/pagination/pagination.scss?tag=ifx-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host { \n display: inline-flex;\n}\n\n.container {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n gap: 32px;\n\n & .items__per-page-wrapper {\n display: flex;\n align-items: center;\n gap: 16px;\n\n & .items__per-page-label { \n color: #1D1D1D;\n font-family: Source Sans 3;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px; \n }\n\n & .items__per-page-field { \n display: flex;\n flex-direction: column;\n align-items: flex-start;\n \n & ifx-select { \n width: 92px;\n }\n }\n }\n\n & .items__total-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n\n & .items__total-button { \n display: flex;\n width: 40px;\n height: 40px;\n justify-content: center;\n align-items: center;\n border-radius: 100px;\n border: 1px solid #BFBBBB;\n background: #FFF;\n }\n\n & .page__numbers-wrapper { \n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n\n & .page__number-item { \n display: flex;\n padding: 6px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 100px;\n\n &.active { \n background-color: #0A8276;\n & span { \n color: #fff;\n }\n }\n\n &:hover { \n cursor: pointer;\n }\n\n &:hover:not(.active) { \n background-color: #ddd;\n \n }\n\n &:active:not(.active) { \n background-color: #575352;\n }\n\n & span { \n display: flex;\n width: 16px;\n height: 16px;\n flex-direction: column;\n justify-content: center;\n color: #1D1D1D;\n text-align: center;\n font-family: Source Sans 3;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px; \n }\n }\n }\n }\n}\n\n\n.pagination {\n display: flex;\n\n & ifx-icon-button:first-of-type { \n margin-right: 12px;\n }\n\n & ifx-icon-button:last-of-type { \n margin-left: 12px;\n }\n}\n a {\n padding: 6px;\n border-radius: 100px;\n}\n\nol {\n list-style-type: none;\n padding: 0;\n margin: 0;\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\nli {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border-radius: 100px;\n\n &:hover:not(.active) { \n & a { \n background-color: #EEEDED;\n }\n }\n\n &:active:not(.active) {\n & a { \n background-color: #575352;\n color: #fff;\n }\n }\n\n &.active { \n background-color: #0A8276;\n\n & a {\n color: #fff;\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n\n & a {\n text-decoration: none;\n display: flex;\n width: 16px;\n height: 16px;\n flex-direction: column;\n justify-content: center;\n color: #1D1D1D;\n text-align: center;\n font-family: \"Source Sans 3\";\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n }\n}\n\n.prev, .next {\n &.disabled {\n cursor: default;\n \n &:hover {\n cursor: default;\n text-decoration: none;\n }\n }\n}\n.prev {\n margin-right: 2.5px;\n}\n.next {\n margin-left: 2.5px;\n}\n\n\n@mixin ellipsis($before:true) {\n content: \"\\2026\";\n font-size: 13px;\n display: inline-block;\n @if($before) {\n margin-right: 6px;\n } @else {\n margin-left: 6px;\n }\n}\n\n\n// @media(max-width:460px) {\n// li {\n \n// &:first-child,\n// &.active,\n// &.active-sibling:nth-last-child(2), // Show second to last child if the last one is active\n// &:last-child {\n// //display: inline-block !important;\n// display: inline-flex !important;\n// flex-direction: row;\n// }\n \n// $how-many-on-ends: 3; // 1,2,3,...,10 \|\| 1,...,8,9,10\n// // There are >= 5 pages\n// &:first-child:nth-last-child(n+6) {\n \n// &~li {\n// // Start out with all siblings hidden\n// display: none;\n \n// // Show the last children in the list by default\n// &:nth-last-child(-n+#{$how-many-on-ends}) {\n// //display: inline-block;\n// display: inline-flex;\n// flex-direction: row;\n \n// }\n \n// // The child at the beginning of the last group shows ellipsis for the group\n// &:nth-last-child(#{$how-many-on-ends}) {\n// &:before {\n// @include ellipsis(true);\n// }\n// }\n \n// // The very beginning elements do not need to show ellipsis\n// // The very end elements do not need to show ellipsis\n// }\n\n\n// &.active,\n// &~li.active {\n \n// // Show ellipsis before and after the active element\n// &:before {\n// @include ellipsis(true);\n// }\n// &:after {\n// @include ellipsis(false);\n// }\n\n \n// // If the active element is in the first or last group, don't show ellipsis (siblings will take care of it)\n// &:nth-child(-n+#{$how-many-on-ends - 1}),\n// &:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n// &:before, &:after {\n// display: none;\n// }\n// }\n \n// // Hide the last group if \"active\" comes before them\n// &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n// display: none;\n// }\n \n// // Show the first group together if \"active\" comes before them\n// &~li:nth-child(-n+#{$how-many-on-ends}) {\n// //display: inline-block;\n// display: inline-flex;\n// flex-direction: row;\n// }\n \n// // If \"active\" is before the last member in the group, don't show ellipsis\n// &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n// &:after {\n// display: none;\n// }\n// }\n \n \n// // The child at the end of the first group shows ellipsis for the group\n// &~li:nth-child(#{$how-many-on-ends}) {\n// &:after {\n// @include ellipsis(false);\n// }\n// }\n// }\n// }\n// }\n// }\n\n@media (min-width: 400px) {\n li {\n &:first-child,\n &.active-sibling,\n &.active,\n &.active + li,\n &:last-child {\n //display: inline-block!important;\n display: inline-flex!important;\n flex-direction: row;\n }\n \n // There are >= 7 pages\n &:first-child:nth-last-child(n+8) {\n $how-many-on-ends: 5; // 1,2,3,4,5,...,10 \|\| 1,...6,7,8,9,10\n \n &~li {\n // Start out with all siblings hidden\n display: none;\n \n // Show ellipsis before the previous one\n &.active-sibling:before {\n @include ellipsis(true); \n }\n // Show ellipsis after the next one\n &.active + li:after {\n @include ellipsis(false);\n }\n \n // Show the last children in the list by default\n &:nth-last-child(-n+#{$how-many-on-ends}) {\n //display: inline-block;\n display: inline-flex;\n flex-direction: row;\n }\n \n // The child at the beginning of the last group shows ellipsis for the group\n &:nth-last-child(#{$how-many-on-ends}) {\n &:before {\n @include ellipsis(true);\n }\n }\n \n // The very beginning elements do not need to show ellipsis\n &:nth-child(-n+#{$how-many-on-ends - 3}),\n // The very end elements do not need to show ellipsis\n &:nth-last-child(-n+#{$how-many-on-ends - 3}),\n // Even if it's a sibling to \"active\"\n &.active-sibling:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n &:before, &:after {\n display: none !important;\n }\n }\n }\n \n &.active,\n &~li.active {\n \n // Hide the last group if \"active\" comes before them\n &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n display: none;\n \n // If there is overlap, the element will show, but hide it's ellipsis\n &:before {\n display: none;\n }\n }\n \n // Show the first group together if \"active\" comes before them\n &~li:nth-child(-n+#{$how-many-on-ends}) {\n //display: inline-block;\n display: inline-flex!important;\n flex-direction: row;\n }\n \n // If \"active\" is before the last member in the group, don't show ellipsis\n &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n &:after {\n display: none;\n }\n }\n \n \n // The child at the end of the first group shows ellipsis for the group\n &~li:nth-child(#{$how-many-on-ends}) {\n &:after {\n @include ellipsis(false);\n }\n }\n \n // \"active\" should never show ellipsis\n &:before, &:after {\n display: none;\n }\n }\n }\n }\n}","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-pagination',\n styleUrl: 'pagination.scss',\n shadow: true\n})\nexport class Pagination {\n @Element() el;\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 this.itemsPerPage = parseInt(e.detail.label)\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 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 = 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 type='single'\n value='undefined'\n ifx-size='s'\n placeholder='false'\n search-enabled='false'\n search-placeholder-value='Search...'\n ifx-disabled='false'\n ifx-error='false'\n ifx-error-message='Error'\n ifx-label=''\n ifx-placeholder-value='Placeholder'\n ifx-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}
1	+ {"file":"ifx-pagination.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/pagination/pagination.scss?tag=ifx-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host { \n display: inline-flex;\n}\n\n.container {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n gap: 32px;\n\n & .items__per-page-wrapper {\n display: flex;\n align-items: center;\n gap: 16px;\n\n & .items__per-page-label { \n color: #1D1D1D;\n font-family: Source Sans 3;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px; \n }\n\n & .items__per-page-field { \n display: flex;\n flex-direction: column;\n align-items: flex-start;\n \n & ifx-select { \n width: 92px;\n }\n }\n }\n\n & .items__total-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n\n & .items__total-button { \n display: flex;\n width: 40px;\n height: 40px;\n justify-content: center;\n align-items: center;\n border-radius: 100px;\n border: 1px solid #BFBBBB;\n background: #FFF;\n }\n\n & .page__numbers-wrapper { \n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n\n & .page__number-item { \n display: flex;\n padding: 6px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 100px;\n\n &.active { \n background-color: #0A8276;\n & span { \n color: #fff;\n }\n }\n\n &:hover { \n cursor: pointer;\n }\n\n &:hover:not(.active) { \n background-color: #ddd;\n \n }\n\n &:active:not(.active) { \n background-color: #575352;\n }\n\n & span { \n display: flex;\n width: 16px;\n height: 16px;\n flex-direction: column;\n justify-content: center;\n color: #1D1D1D;\n text-align: center;\n font-family: Source Sans 3;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px; \n }\n }\n }\n }\n}\n\n\n.pagination {\n display: flex;\n\n & ifx-icon-button:first-of-type { \n margin-right: 12px;\n }\n\n & ifx-icon-button:last-of-type { \n margin-left: 12px;\n }\n}\n a {\n padding: 6px;\n border-radius: 100px;\n}\n\nol {\n list-style-type: none;\n padding: 0;\n margin: 0;\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\nli {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border-radius: 100px;\n\n &:hover:not(.active) { \n & a { \n background-color: #EEEDED;\n }\n }\n\n &:active:not(.active) {\n & a { \n background-color: #575352;\n color: #fff;\n }\n }\n\n &.active { \n background-color: #0A8276;\n\n & a {\n color: #fff;\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n\n & a {\n text-decoration: none;\n display: flex;\n width: 16px;\n height: 16px;\n flex-direction: column;\n justify-content: center;\n color: #1D1D1D;\n text-align: center;\n font-family: \"Source Sans 3\";\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n }\n}\n\n.prev, .next {\n &.disabled {\n cursor: default;\n \n &:hover {\n cursor: default;\n text-decoration: none;\n }\n }\n}\n.prev {\n margin-right: 2.5px;\n}\n.next {\n margin-left: 2.5px;\n}\n\n\n@mixin ellipsis($before:true) {\n content: \"\\2026\";\n font-size: 13px;\n display: inline-block;\n @if($before) {\n margin-right: 6px;\n } @else {\n margin-left: 6px;\n }\n}\n\n\n// @media(max-width:460px) {\n// li {\n \n// &:first-child,\n// &.active,\n// &.active-sibling:nth-last-child(2), // Show second to last child if the last one is active\n// &:last-child {\n// //display: inline-block !important;\n// display: inline-flex !important;\n// flex-direction: row;\n// }\n \n// $how-many-on-ends: 3; // 1,2,3,...,10 \|\| 1,...,8,9,10\n// // There are >= 5 pages\n// &:first-child:nth-last-child(n+6) {\n \n// &~li {\n// // Start out with all siblings hidden\n// display: none;\n \n// // Show the last children in the list by default\n// &:nth-last-child(-n+#{$how-many-on-ends}) {\n// //display: inline-block;\n// display: inline-flex;\n// flex-direction: row;\n \n// }\n \n// // The child at the beginning of the last group shows ellipsis for the group\n// &:nth-last-child(#{$how-many-on-ends}) {\n// &:before {\n// @include ellipsis(true);\n// }\n// }\n \n// // The very beginning elements do not need to show ellipsis\n// // The very end elements do not need to show ellipsis\n// }\n\n\n// &.active,\n// &~li.active {\n \n// // Show ellipsis before and after the active element\n// &:before {\n// @include ellipsis(true);\n// }\n// &:after {\n// @include ellipsis(false);\n// }\n\n \n// // If the active element is in the first or last group, don't show ellipsis (siblings will take care of it)\n// &:nth-child(-n+#{$how-many-on-ends - 1}),\n// &:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n// &:before, &:after {\n// display: none;\n// }\n// }\n \n// // Hide the last group if \"active\" comes before them\n// &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n// display: none;\n// }\n \n// // Show the first group together if \"active\" comes before them\n// &~li:nth-child(-n+#{$how-many-on-ends}) {\n// //display: inline-block;\n// display: inline-flex;\n// flex-direction: row;\n// }\n \n// // If \"active\" is before the last member in the group, don't show ellipsis\n// &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n// &:after {\n// display: none;\n// }\n// }\n \n \n// // The child at the end of the first group shows ellipsis for the group\n// &~li:nth-child(#{$how-many-on-ends}) {\n// &:after {\n// @include ellipsis(false);\n// }\n// }\n// }\n// }\n// }\n// }\n\n@media (min-width: 400px) {\n li {\n &:first-child,\n &.active-sibling,\n &.active,\n &.active + li,\n &:last-child {\n //display: inline-block!important;\n display: inline-flex!important;\n flex-direction: row;\n }\n \n // There are >= 7 pages\n &:first-child:nth-last-child(n+8) {\n $how-many-on-ends: 5; // 1,2,3,4,5,...,10 \|\| 1,...6,7,8,9,10\n \n &~li {\n // Start out with all siblings hidden\n display: none;\n \n // Show ellipsis before the previous one\n &.active-sibling:before {\n @include ellipsis(true); \n }\n // Show ellipsis after the next one\n &.active + li:after {\n @include ellipsis(false);\n }\n \n // Show the last children in the list by default\n &:nth-last-child(-n+#{$how-many-on-ends}) {\n //display: inline-block;\n display: inline-flex;\n flex-direction: row;\n }\n \n // The child at the beginning of the last group shows ellipsis for the group\n &:nth-last-child(#{$how-many-on-ends}) {\n &:before {\n @include ellipsis(true);\n }\n }\n \n // The very beginning elements do not need to show ellipsis\n &:nth-child(-n+#{$how-many-on-ends - 3}),\n // The very end elements do not need to show ellipsis\n &:nth-last-child(-n+#{$how-many-on-ends - 3}),\n // Even if it's a sibling to \"active\"\n &.active-sibling:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n &:before, &:after {\n display: none !important;\n }\n }\n }\n \n &.active,\n &~li.active {\n \n // Hide the last group if \"active\" comes before them\n &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n display: none;\n \n // If there is overlap, the element will show, but hide it's ellipsis\n &:before {\n display: none;\n }\n }\n \n // Show the first group together if \"active\" comes before them\n &~li:nth-child(-n+#{$how-many-on-ends}) {\n //display: inline-block;\n display: inline-flex!important;\n flex-direction: row;\n }\n \n // If \"active\" is before the last member in the group, don't show ellipsis\n &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n &:after {\n display: none;\n }\n }\n \n \n // The child at the end of the first group shows ellipsis for the group\n &~li:nth-child(#{$how-many-on-ends}) {\n &:after {\n @include ellipsis(false);\n }\n }\n \n // \"active\" should never show ellipsis\n &:before, &:after {\n display: none;\n }\n }\n }\n }\n}","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-pagination',\n styleUrl: 'pagination.scss',\n shadow: true\n})\nexport class Pagination {\n @Element() el;\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 this.itemsPerPage = parseInt(e.detail.label)\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 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 type='single'\n value='undefined'\n ifx-size='s'\n placeholder='false'\n search-enabled='false'\n search-placeholder-value='Search...'\n ifx-disabled='false'\n ifx-error='false'\n ifx-error-message='Error'\n ifx-label=''\n ifx-placeholder-value='Placeholder'\n ifx-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}

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

@@ -26,7 +26,7 @@ export class Pagination {
     }
     const total = this.total <= this.itemsPerPage ? this.itemsPerPage : this.total;
     const itemsPerPage = this.itemsPerPage;
-    const totalPageNumber = total / itemsPerPage;
+    const totalPageNumber = Math.ceil(total / itemsPerPage);
     if (this.currentPage <= 0) {
       this.internalPage = 1;
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\n\n@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 this.itemsPerPage = parseInt(e.detail.label)\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 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 = 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 type='single'\n value='undefined'\n ifx-size='s'\n placeholder='false'\n search-enabled='false'\n search-placeholder-value='Search...'\n ifx-disabled='false'\n ifx-error='false'\n ifx-error-message='Error'\n ifx-label=''\n ifx-placeholder-value='Placeholder'\n ifx-options='[{\"value\":\"ten\",\"label\":\"10\",\"selected\":true}, {\"value\":\"Twenty\",\"label\":\"20\",\"selected\":false}, {\"value\":\"Thirty\",\"label\":\"30\",\"selected\":false}]' >\n </ifx-select>\n </div>\n </div>\n <div class='items__total-wrapper'>\n <div class='page__numbers-wrapper'>\n <div class=\"pagination\">\n <ifx-icon-button variant='secondary' class=\"prev\" color='primary' icon='arrow-left-24'></ifx-icon-button>\n <ol>\n {this.numberOfPages.map((item) =>\n <li class={`${this.internalPage === item ? 'active' : \"\"}`}><a href={undefined}>{item}</a></li>)}\n </ol>\n <ifx-icon-button class=\"next\" variant='secondary' color='primary' icon='arrow-right-24'></ifx-icon-button>\n </div>\n </div>\n </div>\n </div>\n );\n }\n}"]}
1	+ {"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\n\n@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 this.itemsPerPage = parseInt(e.detail.label)\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 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 type='single'\n value='undefined'\n ifx-size='s'\n placeholder='false'\n search-enabled='false'\n search-placeholder-value='Search...'\n ifx-disabled='false'\n ifx-error='false'\n ifx-error-message='Error'\n ifx-label=''\n ifx-placeholder-value='Placeholder'\n ifx-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/components/ifx-pagination.js CHANGED Viewed

@@ -38,7 +38,7 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
     }
     const total = this.total <= this.itemsPerPage ? this.itemsPerPage : this.total;
     const itemsPerPage = this.itemsPerPage;
-    const totalPageNumber = total / itemsPerPage;
+    const totalPageNumber = Math.ceil(total / itemsPerPage);
     if (this.currentPage <= 0) {
       this.internalPage = 1;
     }

package/dist/components/ifx-pagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-pagination.js","mappings":"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","names":[],"sources":["src/components/pagination/pagination.scss?tag=ifx-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host { \n display: inline-flex;\n}\n\n.container {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n gap: 32px;\n\n & .items__per-page-wrapper {\n display: flex;\n align-items: center;\n gap: 16px;\n\n & .items__per-page-label { \n color: #1D1D1D;\n font-family: Source Sans 3;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px; \n }\n\n & .items__per-page-field { \n display: flex;\n flex-direction: column;\n align-items: flex-start;\n \n & ifx-select { \n width: 92px;\n }\n }\n }\n\n & .items__total-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n\n & .items__total-button { \n display: flex;\n width: 40px;\n height: 40px;\n justify-content: center;\n align-items: center;\n border-radius: 100px;\n border: 1px solid #BFBBBB;\n background: #FFF;\n }\n\n & .page__numbers-wrapper { \n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n\n & .page__number-item { \n display: flex;\n padding: 6px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 100px;\n\n &.active { \n background-color: #0A8276;\n & span { \n color: #fff;\n }\n }\n\n &:hover { \n cursor: pointer;\n }\n\n &:hover:not(.active) { \n background-color: #ddd;\n \n }\n\n &:active:not(.active) { \n background-color: #575352;\n }\n\n & span { \n display: flex;\n width: 16px;\n height: 16px;\n flex-direction: column;\n justify-content: center;\n color: #1D1D1D;\n text-align: center;\n font-family: Source Sans 3;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px; \n }\n }\n }\n }\n}\n\n\n.pagination {\n display: flex;\n\n & ifx-icon-button:first-of-type { \n margin-right: 12px;\n }\n\n & ifx-icon-button:last-of-type { \n margin-left: 12px;\n }\n}\n a {\n padding: 6px;\n border-radius: 100px;\n}\n\nol {\n list-style-type: none;\n padding: 0;\n margin: 0;\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\nli {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border-radius: 100px;\n\n &:hover:not(.active) { \n & a { \n background-color: #EEEDED;\n }\n }\n\n &:active:not(.active) {\n & a { \n background-color: #575352;\n color: #fff;\n }\n }\n\n &.active { \n background-color: #0A8276;\n\n & a {\n color: #fff;\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n\n & a {\n text-decoration: none;\n display: flex;\n width: 16px;\n height: 16px;\n flex-direction: column;\n justify-content: center;\n color: #1D1D1D;\n text-align: center;\n font-family: \"Source Sans 3\";\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n }\n}\n\n.prev, .next {\n &.disabled {\n cursor: default;\n \n &:hover {\n cursor: default;\n text-decoration: none;\n }\n }\n}\n.prev {\n margin-right: 2.5px;\n}\n.next {\n margin-left: 2.5px;\n}\n\n\n@mixin ellipsis($before:true) {\n content: \"\\2026\";\n font-size: 13px;\n display: inline-block;\n @if($before) {\n margin-right: 6px;\n } @else {\n margin-left: 6px;\n }\n}\n\n\n// @media(max-width:460px) {\n// li {\n \n// &:first-child,\n// &.active,\n// &.active-sibling:nth-last-child(2), // Show second to last child if the last one is active\n// &:last-child {\n// //display: inline-block !important;\n// display: inline-flex !important;\n// flex-direction: row;\n// }\n \n// $how-many-on-ends: 3; // 1,2,3,...,10 \|\| 1,...,8,9,10\n// // There are >= 5 pages\n// &:first-child:nth-last-child(n+6) {\n \n// &~li {\n// // Start out with all siblings hidden\n// display: none;\n \n// // Show the last children in the list by default\n// &:nth-last-child(-n+#{$how-many-on-ends}) {\n// //display: inline-block;\n// display: inline-flex;\n// flex-direction: row;\n \n// }\n \n// // The child at the beginning of the last group shows ellipsis for the group\n// &:nth-last-child(#{$how-many-on-ends}) {\n// &:before {\n// @include ellipsis(true);\n// }\n// }\n \n// // The very beginning elements do not need to show ellipsis\n// // The very end elements do not need to show ellipsis\n// }\n\n\n// &.active,\n// &~li.active {\n \n// // Show ellipsis before and after the active element\n// &:before {\n// @include ellipsis(true);\n// }\n// &:after {\n// @include ellipsis(false);\n// }\n\n \n// // If the active element is in the first or last group, don't show ellipsis (siblings will take care of it)\n// &:nth-child(-n+#{$how-many-on-ends - 1}),\n// &:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n// &:before, &:after {\n// display: none;\n// }\n// }\n \n// // Hide the last group if \"active\" comes before them\n// &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n// display: none;\n// }\n \n// // Show the first group together if \"active\" comes before them\n// &~li:nth-child(-n+#{$how-many-on-ends}) {\n// //display: inline-block;\n// display: inline-flex;\n// flex-direction: row;\n// }\n \n// // If \"active\" is before the last member in the group, don't show ellipsis\n// &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n// &:after {\n// display: none;\n// }\n// }\n \n \n// // The child at the end of the first group shows ellipsis for the group\n// &~li:nth-child(#{$how-many-on-ends}) {\n// &:after {\n// @include ellipsis(false);\n// }\n// }\n// }\n// }\n// }\n// }\n\n@media (min-width: 400px) {\n li {\n &:first-child,\n &.active-sibling,\n &.active,\n &.active + li,\n &:last-child {\n //display: inline-block!important;\n display: inline-flex!important;\n flex-direction: row;\n }\n \n // There are >= 7 pages\n &:first-child:nth-last-child(n+8) {\n $how-many-on-ends: 5; // 1,2,3,4,5,...,10 \|\| 1,...6,7,8,9,10\n \n &~li {\n // Start out with all siblings hidden\n display: none;\n \n // Show ellipsis before the previous one\n &.active-sibling:before {\n @include ellipsis(true); \n }\n // Show ellipsis after the next one\n &.active + li:after {\n @include ellipsis(false);\n }\n \n // Show the last children in the list by default\n &:nth-last-child(-n+#{$how-many-on-ends}) {\n //display: inline-block;\n display: inline-flex;\n flex-direction: row;\n }\n \n // The child at the beginning of the last group shows ellipsis for the group\n &:nth-last-child(#{$how-many-on-ends}) {\n &:before {\n @include ellipsis(true);\n }\n }\n \n // The very beginning elements do not need to show ellipsis\n &:nth-child(-n+#{$how-many-on-ends - 3}),\n // The very end elements do not need to show ellipsis\n &:nth-last-child(-n+#{$how-many-on-ends - 3}),\n // Even if it's a sibling to \"active\"\n &.active-sibling:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n &:before, &:after {\n display: none !important;\n }\n }\n }\n \n &.active,\n &~li.active {\n \n // Hide the last group if \"active\" comes before them\n &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n display: none;\n \n // If there is overlap, the element will show, but hide it's ellipsis\n &:before {\n display: none;\n }\n }\n \n // Show the first group together if \"active\" comes before them\n &~li:nth-child(-n+#{$how-many-on-ends}) {\n //display: inline-block;\n display: inline-flex!important;\n flex-direction: row;\n }\n \n // If \"active\" is before the last member in the group, don't show ellipsis\n &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n &:after {\n display: none;\n }\n }\n \n \n // The child at the end of the first group shows ellipsis for the group\n &~li:nth-child(#{$how-many-on-ends}) {\n &:after {\n @include ellipsis(false);\n }\n }\n \n // \"active\" should never show ellipsis\n &:before, &:after {\n display: none;\n }\n }\n }\n }\n}","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-pagination',\n styleUrl: 'pagination.scss',\n shadow: true\n})\nexport class Pagination {\n @Element() el;\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 this.itemsPerPage = parseInt(e.detail.label)\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 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 = 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 type='single'\n value='undefined'\n ifx-size='s'\n placeholder='false'\n search-enabled='false'\n search-placeholder-value='Search...'\n ifx-disabled='false'\n ifx-error='false'\n ifx-error-message='Error'\n ifx-label=''\n ifx-placeholder-value='Placeholder'\n ifx-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}
1	+ {"file":"ifx-pagination.js","mappings":"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","names":[],"sources":["src/components/pagination/pagination.scss?tag=ifx-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host { \n display: inline-flex;\n}\n\n.container {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n gap: 32px;\n\n & .items__per-page-wrapper {\n display: flex;\n align-items: center;\n gap: 16px;\n\n & .items__per-page-label { \n color: #1D1D1D;\n font-family: Source Sans 3;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px; \n }\n\n & .items__per-page-field { \n display: flex;\n flex-direction: column;\n align-items: flex-start;\n \n & ifx-select { \n width: 92px;\n }\n }\n }\n\n & .items__total-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n\n & .items__total-button { \n display: flex;\n width: 40px;\n height: 40px;\n justify-content: center;\n align-items: center;\n border-radius: 100px;\n border: 1px solid #BFBBBB;\n background: #FFF;\n }\n\n & .page__numbers-wrapper { \n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n\n & .page__number-item { \n display: flex;\n padding: 6px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 100px;\n\n &.active { \n background-color: #0A8276;\n & span { \n color: #fff;\n }\n }\n\n &:hover { \n cursor: pointer;\n }\n\n &:hover:not(.active) { \n background-color: #ddd;\n \n }\n\n &:active:not(.active) { \n background-color: #575352;\n }\n\n & span { \n display: flex;\n width: 16px;\n height: 16px;\n flex-direction: column;\n justify-content: center;\n color: #1D1D1D;\n text-align: center;\n font-family: Source Sans 3;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px; \n }\n }\n }\n }\n}\n\n\n.pagination {\n display: flex;\n\n & ifx-icon-button:first-of-type { \n margin-right: 12px;\n }\n\n & ifx-icon-button:last-of-type { \n margin-left: 12px;\n }\n}\n a {\n padding: 6px;\n border-radius: 100px;\n}\n\nol {\n list-style-type: none;\n padding: 0;\n margin: 0;\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\nli {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border-radius: 100px;\n\n &:hover:not(.active) { \n & a { \n background-color: #EEEDED;\n }\n }\n\n &:active:not(.active) {\n & a { \n background-color: #575352;\n color: #fff;\n }\n }\n\n &.active { \n background-color: #0A8276;\n\n & a {\n color: #fff;\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n\n & a {\n text-decoration: none;\n display: flex;\n width: 16px;\n height: 16px;\n flex-direction: column;\n justify-content: center;\n color: #1D1D1D;\n text-align: center;\n font-family: \"Source Sans 3\";\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n }\n}\n\n.prev, .next {\n &.disabled {\n cursor: default;\n \n &:hover {\n cursor: default;\n text-decoration: none;\n }\n }\n}\n.prev {\n margin-right: 2.5px;\n}\n.next {\n margin-left: 2.5px;\n}\n\n\n@mixin ellipsis($before:true) {\n content: \"\\2026\";\n font-size: 13px;\n display: inline-block;\n @if($before) {\n margin-right: 6px;\n } @else {\n margin-left: 6px;\n }\n}\n\n\n// @media(max-width:460px) {\n// li {\n \n// &:first-child,\n// &.active,\n// &.active-sibling:nth-last-child(2), // Show second to last child if the last one is active\n// &:last-child {\n// //display: inline-block !important;\n// display: inline-flex !important;\n// flex-direction: row;\n// }\n \n// $how-many-on-ends: 3; // 1,2,3,...,10 \|\| 1,...,8,9,10\n// // There are >= 5 pages\n// &:first-child:nth-last-child(n+6) {\n \n// &~li {\n// // Start out with all siblings hidden\n// display: none;\n \n// // Show the last children in the list by default\n// &:nth-last-child(-n+#{$how-many-on-ends}) {\n// //display: inline-block;\n// display: inline-flex;\n// flex-direction: row;\n \n// }\n \n// // The child at the beginning of the last group shows ellipsis for the group\n// &:nth-last-child(#{$how-many-on-ends}) {\n// &:before {\n// @include ellipsis(true);\n// }\n// }\n \n// // The very beginning elements do not need to show ellipsis\n// // The very end elements do not need to show ellipsis\n// }\n\n\n// &.active,\n// &~li.active {\n \n// // Show ellipsis before and after the active element\n// &:before {\n// @include ellipsis(true);\n// }\n// &:after {\n// @include ellipsis(false);\n// }\n\n \n// // If the active element is in the first or last group, don't show ellipsis (siblings will take care of it)\n// &:nth-child(-n+#{$how-many-on-ends - 1}),\n// &:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n// &:before, &:after {\n// display: none;\n// }\n// }\n \n// // Hide the last group if \"active\" comes before them\n// &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n// display: none;\n// }\n \n// // Show the first group together if \"active\" comes before them\n// &~li:nth-child(-n+#{$how-many-on-ends}) {\n// //display: inline-block;\n// display: inline-flex;\n// flex-direction: row;\n// }\n \n// // If \"active\" is before the last member in the group, don't show ellipsis\n// &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n// &:after {\n// display: none;\n// }\n// }\n \n \n// // The child at the end of the first group shows ellipsis for the group\n// &~li:nth-child(#{$how-many-on-ends}) {\n// &:after {\n// @include ellipsis(false);\n// }\n// }\n// }\n// }\n// }\n// }\n\n@media (min-width: 400px) {\n li {\n &:first-child,\n &.active-sibling,\n &.active,\n &.active + li,\n &:last-child {\n //display: inline-block!important;\n display: inline-flex!important;\n flex-direction: row;\n }\n \n // There are >= 7 pages\n &:first-child:nth-last-child(n+8) {\n $how-many-on-ends: 5; // 1,2,3,4,5,...,10 \|\| 1,...6,7,8,9,10\n \n &~li {\n // Start out with all siblings hidden\n display: none;\n \n // Show ellipsis before the previous one\n &.active-sibling:before {\n @include ellipsis(true); \n }\n // Show ellipsis after the next one\n &.active + li:after {\n @include ellipsis(false);\n }\n \n // Show the last children in the list by default\n &:nth-last-child(-n+#{$how-many-on-ends}) {\n //display: inline-block;\n display: inline-flex;\n flex-direction: row;\n }\n \n // The child at the beginning of the last group shows ellipsis for the group\n &:nth-last-child(#{$how-many-on-ends}) {\n &:before {\n @include ellipsis(true);\n }\n }\n \n // The very beginning elements do not need to show ellipsis\n &:nth-child(-n+#{$how-many-on-ends - 3}),\n // The very end elements do not need to show ellipsis\n &:nth-last-child(-n+#{$how-many-on-ends - 3}),\n // Even if it's a sibling to \"active\"\n &.active-sibling:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n &:before, &:after {\n display: none !important;\n }\n }\n }\n \n &.active,\n &~li.active {\n \n // Hide the last group if \"active\" comes before them\n &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n display: none;\n \n // If there is overlap, the element will show, but hide it's ellipsis\n &:before {\n display: none;\n }\n }\n \n // Show the first group together if \"active\" comes before them\n &~li:nth-child(-n+#{$how-many-on-ends}) {\n //display: inline-block;\n display: inline-flex!important;\n flex-direction: row;\n }\n \n // If \"active\" is before the last member in the group, don't show ellipsis\n &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n &:after {\n display: none;\n }\n }\n \n \n // The child at the end of the first group shows ellipsis for the group\n &~li:nth-child(#{$how-many-on-ends}) {\n &:after {\n @include ellipsis(false);\n }\n }\n \n // \"active\" should never show ellipsis\n &:before, &:after {\n display: none;\n }\n }\n }\n }\n}","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-pagination',\n styleUrl: 'pagination.scss',\n shadow: true\n})\nexport class Pagination {\n @Element() el;\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 this.itemsPerPage = parseInt(e.detail.label)\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 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 type='single'\n value='undefined'\n ifx-size='s'\n placeholder='false'\n search-enabled='false'\n search-placeholder-value='Search...'\n ifx-disabled='false'\n ifx-error='false'\n ifx-error-message='Error'\n ifx-label=''\n ifx-placeholder-value='Placeholder'\n ifx-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}

package/dist/esm/ifx-pagination.entry.js CHANGED Viewed

@@ -33,7 +33,7 @@ const Pagination = class {
     }
     const total = this.total <= this.itemsPerPage ? this.itemsPerPage : this.total;
     const itemsPerPage = this.itemsPerPage;
-    const totalPageNumber = total / itemsPerPage;
+    const totalPageNumber = Math.ceil(total / itemsPerPage);
     if (this.currentPage <= 0) {
       this.internalPage = 1;
     }

package/dist/esm/ifx-pagination.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-pagination.entry.js","mappings":"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","names":[],"sources":["src/components/pagination/pagination.scss?tag=ifx-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host { \n display: inline-flex;\n}\n\n.container {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n gap: 32px;\n\n & .items__per-page-wrapper {\n display: flex;\n align-items: center;\n gap: 16px;\n\n & .items__per-page-label { \n color: #1D1D1D;\n font-family: Source Sans 3;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px; \n }\n\n & .items__per-page-field { \n display: flex;\n flex-direction: column;\n align-items: flex-start;\n \n & ifx-select { \n width: 92px;\n }\n }\n }\n\n & .items__total-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n\n & .items__total-button { \n display: flex;\n width: 40px;\n height: 40px;\n justify-content: center;\n align-items: center;\n border-radius: 100px;\n border: 1px solid #BFBBBB;\n background: #FFF;\n }\n\n & .page__numbers-wrapper { \n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n\n & .page__number-item { \n display: flex;\n padding: 6px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 100px;\n\n &.active { \n background-color: #0A8276;\n & span { \n color: #fff;\n }\n }\n\n &:hover { \n cursor: pointer;\n }\n\n &:hover:not(.active) { \n background-color: #ddd;\n \n }\n\n &:active:not(.active) { \n background-color: #575352;\n }\n\n & span { \n display: flex;\n width: 16px;\n height: 16px;\n flex-direction: column;\n justify-content: center;\n color: #1D1D1D;\n text-align: center;\n font-family: Source Sans 3;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px; \n }\n }\n }\n }\n}\n\n\n.pagination {\n display: flex;\n\n & ifx-icon-button:first-of-type { \n margin-right: 12px;\n }\n\n & ifx-icon-button:last-of-type { \n margin-left: 12px;\n }\n}\n a {\n padding: 6px;\n border-radius: 100px;\n}\n\nol {\n list-style-type: none;\n padding: 0;\n margin: 0;\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\nli {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border-radius: 100px;\n\n &:hover:not(.active) { \n & a { \n background-color: #EEEDED;\n }\n }\n\n &:active:not(.active) {\n & a { \n background-color: #575352;\n color: #fff;\n }\n }\n\n &.active { \n background-color: #0A8276;\n\n & a {\n color: #fff;\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n\n & a {\n text-decoration: none;\n display: flex;\n width: 16px;\n height: 16px;\n flex-direction: column;\n justify-content: center;\n color: #1D1D1D;\n text-align: center;\n font-family: \"Source Sans 3\";\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n }\n}\n\n.prev, .next {\n &.disabled {\n cursor: default;\n \n &:hover {\n cursor: default;\n text-decoration: none;\n }\n }\n}\n.prev {\n margin-right: 2.5px;\n}\n.next {\n margin-left: 2.5px;\n}\n\n\n@mixin ellipsis($before:true) {\n content: \"\\2026\";\n font-size: 13px;\n display: inline-block;\n @if($before) {\n margin-right: 6px;\n } @else {\n margin-left: 6px;\n }\n}\n\n\n// @media(max-width:460px) {\n// li {\n \n// &:first-child,\n// &.active,\n// &.active-sibling:nth-last-child(2), // Show second to last child if the last one is active\n// &:last-child {\n// //display: inline-block !important;\n// display: inline-flex !important;\n// flex-direction: row;\n// }\n \n// $how-many-on-ends: 3; // 1,2,3,...,10 \|\| 1,...,8,9,10\n// // There are >= 5 pages\n// &:first-child:nth-last-child(n+6) {\n \n// &~li {\n// // Start out with all siblings hidden\n// display: none;\n \n// // Show the last children in the list by default\n// &:nth-last-child(-n+#{$how-many-on-ends}) {\n// //display: inline-block;\n// display: inline-flex;\n// flex-direction: row;\n \n// }\n \n// // The child at the beginning of the last group shows ellipsis for the group\n// &:nth-last-child(#{$how-many-on-ends}) {\n// &:before {\n// @include ellipsis(true);\n// }\n// }\n \n// // The very beginning elements do not need to show ellipsis\n// // The very end elements do not need to show ellipsis\n// }\n\n\n// &.active,\n// &~li.active {\n \n// // Show ellipsis before and after the active element\n// &:before {\n// @include ellipsis(true);\n// }\n// &:after {\n// @include ellipsis(false);\n// }\n\n \n// // If the active element is in the first or last group, don't show ellipsis (siblings will take care of it)\n// &:nth-child(-n+#{$how-many-on-ends - 1}),\n// &:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n// &:before, &:after {\n// display: none;\n// }\n// }\n \n// // Hide the last group if \"active\" comes before them\n// &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n// display: none;\n// }\n \n// // Show the first group together if \"active\" comes before them\n// &~li:nth-child(-n+#{$how-many-on-ends}) {\n// //display: inline-block;\n// display: inline-flex;\n// flex-direction: row;\n// }\n \n// // If \"active\" is before the last member in the group, don't show ellipsis\n// &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n// &:after {\n// display: none;\n// }\n// }\n \n \n// // The child at the end of the first group shows ellipsis for the group\n// &~li:nth-child(#{$how-many-on-ends}) {\n// &:after {\n// @include ellipsis(false);\n// }\n// }\n// }\n// }\n// }\n// }\n\n@media (min-width: 400px) {\n li {\n &:first-child,\n &.active-sibling,\n &.active,\n &.active + li,\n &:last-child {\n //display: inline-block!important;\n display: inline-flex!important;\n flex-direction: row;\n }\n \n // There are >= 7 pages\n &:first-child:nth-last-child(n+8) {\n $how-many-on-ends: 5; // 1,2,3,4,5,...,10 \|\| 1,...6,7,8,9,10\n \n &~li {\n // Start out with all siblings hidden\n display: none;\n \n // Show ellipsis before the previous one\n &.active-sibling:before {\n @include ellipsis(true); \n }\n // Show ellipsis after the next one\n &.active + li:after {\n @include ellipsis(false);\n }\n \n // Show the last children in the list by default\n &:nth-last-child(-n+#{$how-many-on-ends}) {\n //display: inline-block;\n display: inline-flex;\n flex-direction: row;\n }\n \n // The child at the beginning of the last group shows ellipsis for the group\n &:nth-last-child(#{$how-many-on-ends}) {\n &:before {\n @include ellipsis(true);\n }\n }\n \n // The very beginning elements do not need to show ellipsis\n &:nth-child(-n+#{$how-many-on-ends - 3}),\n // The very end elements do not need to show ellipsis\n &:nth-last-child(-n+#{$how-many-on-ends - 3}),\n // Even if it's a sibling to \"active\"\n &.active-sibling:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n &:before, &:after {\n display: none !important;\n }\n }\n }\n \n &.active,\n &~li.active {\n \n // Hide the last group if \"active\" comes before them\n &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n display: none;\n \n // If there is overlap, the element will show, but hide it's ellipsis\n &:before {\n display: none;\n }\n }\n \n // Show the first group together if \"active\" comes before them\n &~li:nth-child(-n+#{$how-many-on-ends}) {\n //display: inline-block;\n display: inline-flex!important;\n flex-direction: row;\n }\n \n // If \"active\" is before the last member in the group, don't show ellipsis\n &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n &:after {\n display: none;\n }\n }\n \n \n // The child at the end of the first group shows ellipsis for the group\n &~li:nth-child(#{$how-many-on-ends}) {\n &:after {\n @include ellipsis(false);\n }\n }\n \n // \"active\" should never show ellipsis\n &:before, &:after {\n display: none;\n }\n }\n }\n }\n}","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-pagination',\n styleUrl: 'pagination.scss',\n shadow: true\n})\nexport class Pagination {\n @Element() el;\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 this.itemsPerPage = parseInt(e.detail.label)\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 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 = 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 type='single'\n value='undefined'\n ifx-size='s'\n placeholder='false'\n search-enabled='false'\n search-placeholder-value='Search...'\n ifx-disabled='false'\n ifx-error='false'\n ifx-error-message='Error'\n ifx-label=''\n ifx-placeholder-value='Placeholder'\n ifx-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}
1	+ {"file":"ifx-pagination.entry.js","mappings":"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","names":[],"sources":["src/components/pagination/pagination.scss?tag=ifx-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host { \n display: inline-flex;\n}\n\n.container {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n gap: 32px;\n\n & .items__per-page-wrapper {\n display: flex;\n align-items: center;\n gap: 16px;\n\n & .items__per-page-label { \n color: #1D1D1D;\n font-family: Source Sans 3;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px; \n }\n\n & .items__per-page-field { \n display: flex;\n flex-direction: column;\n align-items: flex-start;\n \n & ifx-select { \n width: 92px;\n }\n }\n }\n\n & .items__total-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n\n & .items__total-button { \n display: flex;\n width: 40px;\n height: 40px;\n justify-content: center;\n align-items: center;\n border-radius: 100px;\n border: 1px solid #BFBBBB;\n background: #FFF;\n }\n\n & .page__numbers-wrapper { \n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n\n & .page__number-item { \n display: flex;\n padding: 6px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 100px;\n\n &.active { \n background-color: #0A8276;\n & span { \n color: #fff;\n }\n }\n\n &:hover { \n cursor: pointer;\n }\n\n &:hover:not(.active) { \n background-color: #ddd;\n \n }\n\n &:active:not(.active) { \n background-color: #575352;\n }\n\n & span { \n display: flex;\n width: 16px;\n height: 16px;\n flex-direction: column;\n justify-content: center;\n color: #1D1D1D;\n text-align: center;\n font-family: Source Sans 3;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px; \n }\n }\n }\n }\n}\n\n\n.pagination {\n display: flex;\n\n & ifx-icon-button:first-of-type { \n margin-right: 12px;\n }\n\n & ifx-icon-button:last-of-type { \n margin-left: 12px;\n }\n}\n a {\n padding: 6px;\n border-radius: 100px;\n}\n\nol {\n list-style-type: none;\n padding: 0;\n margin: 0;\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\nli {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border-radius: 100px;\n\n &:hover:not(.active) { \n & a { \n background-color: #EEEDED;\n }\n }\n\n &:active:not(.active) {\n & a { \n background-color: #575352;\n color: #fff;\n }\n }\n\n &.active { \n background-color: #0A8276;\n\n & a {\n color: #fff;\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n\n & a {\n text-decoration: none;\n display: flex;\n width: 16px;\n height: 16px;\n flex-direction: column;\n justify-content: center;\n color: #1D1D1D;\n text-align: center;\n font-family: \"Source Sans 3\";\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n }\n}\n\n.prev, .next {\n &.disabled {\n cursor: default;\n \n &:hover {\n cursor: default;\n text-decoration: none;\n }\n }\n}\n.prev {\n margin-right: 2.5px;\n}\n.next {\n margin-left: 2.5px;\n}\n\n\n@mixin ellipsis($before:true) {\n content: \"\\2026\";\n font-size: 13px;\n display: inline-block;\n @if($before) {\n margin-right: 6px;\n } @else {\n margin-left: 6px;\n }\n}\n\n\n// @media(max-width:460px) {\n// li {\n \n// &:first-child,\n// &.active,\n// &.active-sibling:nth-last-child(2), // Show second to last child if the last one is active\n// &:last-child {\n// //display: inline-block !important;\n// display: inline-flex !important;\n// flex-direction: row;\n// }\n \n// $how-many-on-ends: 3; // 1,2,3,...,10 \|\| 1,...,8,9,10\n// // There are >= 5 pages\n// &:first-child:nth-last-child(n+6) {\n \n// &~li {\n// // Start out with all siblings hidden\n// display: none;\n \n// // Show the last children in the list by default\n// &:nth-last-child(-n+#{$how-many-on-ends}) {\n// //display: inline-block;\n// display: inline-flex;\n// flex-direction: row;\n \n// }\n \n// // The child at the beginning of the last group shows ellipsis for the group\n// &:nth-last-child(#{$how-many-on-ends}) {\n// &:before {\n// @include ellipsis(true);\n// }\n// }\n \n// // The very beginning elements do not need to show ellipsis\n// // The very end elements do not need to show ellipsis\n// }\n\n\n// &.active,\n// &~li.active {\n \n// // Show ellipsis before and after the active element\n// &:before {\n// @include ellipsis(true);\n// }\n// &:after {\n// @include ellipsis(false);\n// }\n\n \n// // If the active element is in the first or last group, don't show ellipsis (siblings will take care of it)\n// &:nth-child(-n+#{$how-many-on-ends - 1}),\n// &:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n// &:before, &:after {\n// display: none;\n// }\n// }\n \n// // Hide the last group if \"active\" comes before them\n// &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n// display: none;\n// }\n \n// // Show the first group together if \"active\" comes before them\n// &~li:nth-child(-n+#{$how-many-on-ends}) {\n// //display: inline-block;\n// display: inline-flex;\n// flex-direction: row;\n// }\n \n// // If \"active\" is before the last member in the group, don't show ellipsis\n// &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n// &:after {\n// display: none;\n// }\n// }\n \n \n// // The child at the end of the first group shows ellipsis for the group\n// &~li:nth-child(#{$how-many-on-ends}) {\n// &:after {\n// @include ellipsis(false);\n// }\n// }\n// }\n// }\n// }\n// }\n\n@media (min-width: 400px) {\n li {\n &:first-child,\n &.active-sibling,\n &.active,\n &.active + li,\n &:last-child {\n //display: inline-block!important;\n display: inline-flex!important;\n flex-direction: row;\n }\n \n // There are >= 7 pages\n &:first-child:nth-last-child(n+8) {\n $how-many-on-ends: 5; // 1,2,3,4,5,...,10 \|\| 1,...6,7,8,9,10\n \n &~li {\n // Start out with all siblings hidden\n display: none;\n \n // Show ellipsis before the previous one\n &.active-sibling:before {\n @include ellipsis(true); \n }\n // Show ellipsis after the next one\n &.active + li:after {\n @include ellipsis(false);\n }\n \n // Show the last children in the list by default\n &:nth-last-child(-n+#{$how-many-on-ends}) {\n //display: inline-block;\n display: inline-flex;\n flex-direction: row;\n }\n \n // The child at the beginning of the last group shows ellipsis for the group\n &:nth-last-child(#{$how-many-on-ends}) {\n &:before {\n @include ellipsis(true);\n }\n }\n \n // The very beginning elements do not need to show ellipsis\n &:nth-child(-n+#{$how-many-on-ends - 3}),\n // The very end elements do not need to show ellipsis\n &:nth-last-child(-n+#{$how-many-on-ends - 3}),\n // Even if it's a sibling to \"active\"\n &.active-sibling:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n &:before, &:after {\n display: none !important;\n }\n }\n }\n \n &.active,\n &~li.active {\n \n // Hide the last group if \"active\" comes before them\n &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n display: none;\n \n // If there is overlap, the element will show, but hide it's ellipsis\n &:before {\n display: none;\n }\n }\n \n // Show the first group together if \"active\" comes before them\n &~li:nth-child(-n+#{$how-many-on-ends}) {\n //display: inline-block;\n display: inline-flex!important;\n flex-direction: row;\n }\n \n // If \"active\" is before the last member in the group, don't show ellipsis\n &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n &:after {\n display: none;\n }\n }\n \n \n // The child at the end of the first group shows ellipsis for the group\n &~li:nth-child(#{$how-many-on-ends}) {\n &:after {\n @include ellipsis(false);\n }\n }\n \n // \"active\" should never show ellipsis\n &:before, &:after {\n display: none;\n }\n }\n }\n }\n}","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-pagination',\n styleUrl: 'pagination.scss',\n shadow: true\n})\nexport class Pagination {\n @Element() el;\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 this.itemsPerPage = parseInt(e.detail.label)\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 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 type='single'\n value='undefined'\n ifx-size='s'\n placeholder='false'\n search-enabled='false'\n search-placeholder-value='Search...'\n ifx-disabled='false'\n ifx-error='false'\n ifx-error-message='Error'\n ifx-label=''\n ifx-placeholder-value='Placeholder'\n ifx-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}

package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as e,H as i,b as a}from"./p-8faa5e95.js";export{s as setNonce}from"./p-8faa5e95.js";const t=()=>{{o(i.prototype)}const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};const o=e=>{const i=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return i.call(this,e)}const a=i.call(this,false);const t=this.childNodes;if(e){for(let e=0;e<t.length;e++){if(t[e].nodeType!==2){a.appendChild(t[e].cloneNode(true))}}}return a}};t().then((e=>a(JSON.parse('[["p-1556fa15",[[1,"ifx-faq"]]],["p-9189c4de",[[1,"ifx-modal",{"opened":[1540],"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"variant":[1],"alertIcon":[1,"alert-icon"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonLabel":[1,"cancel-button-label"],"showModal":[32]},null,{"opened":["openedChanged"]}]]],["p-d93ed708",[[1,"ifx-pagination",{"currentPage":[2,"current-page"],"total":[2],"internalPage":[32],"itemsPerPage":[32],"numberOfPages":[32]},[[0,"ifxSelect","setItemsPerPage"]]]]],["p-9a18e7e5",[[1,"ifx-dropdown-trigger-button",{"isOpen":[4,"is-open"],"theme":[1],"variant":[1],"size":[1],"disabled":[4],"hideArrow":[4,"hide-arrow"]}]]],["p-ab2b8d08",[[1,"ifx-multiselect",{"options":[1],"size":[1],"disabled":[4],"error":[4],"errorMessage":[1,"error-message"],"label":[1],"placeholder":[1],"maxItemCount":[2,"max-item-count"],"persistentSelectedOptions":[32],"listOfOptions":[32],"dropdownOpen":[32],"dropdownFlipped":[32],"zIndex":[32]},null,{"options":["handleOptionsChange"]}]]],["p-b00de336",[[1,"ifx-search-bar",{"isOpen":[4,"is-open"],"disabled":[4],"value":[1025],"internalState":[32]},null,{"isOpen":["handlePropChange"]}]]],["p-cdce82f2",[[1,"ifx-alert",{"variant":[1],"icon":[1]}]]],["p-dc5db97f",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["p-8da56a38",[[1,"ifx-chip",{"placeholder":[1],"selectedValue":[32]},[[5,"mousedown","handleOutsideClick"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-3ebe1789",[[1,"ifx-dropdown-item",{"icon":[1],"href":[1],"target":[1],"hide":[4],"size":[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-7c52cb4d",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["p-a3d60d08",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["p-648a6ef3",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"showLogo":[4,"show-logo"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32],"searchBarIsOpen":[32]},[[0,"ifxSearchBarIsOpen","handleSearchBarToggle"],[5,"mousedown","handleOutsideClick"]]]]],["p-8c900670",[[1,"ifx-navbar-item",{"isProfile":[1028,"is-profile"],"hideLabel":[4,"hide-label"],"icon":[1],"href":[1],"target":[1],"hideComponent":[4,"hide-component"]}]]],["p-2ace3cd4",[[1,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"hasIcon":[32],"hasIconWrapper":[32]},[[0,"consoleError","handleConsoleError"]]]]],["p-a4dc9d69",[[1,"ifx-slider",{"min":[2],"max":[2],"value":[2],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-e8efbe5d",[[1,"ifx-tag",{"icon":[1]}]]],["p-fff21b9b",[[1,"ifx-text-field",{"placeholder":[1],"value":[1025],"error":[4],"label":[1],"icon":[1],"caption":[1],"size":[1],"required":[4],"optional":[4],"success":[4],"disabled":[4],"reset":[64]},null,{"value":["valueWatcher"]}]]],["p-5bf4e6a8",[[1,"ifx-tooltip",{"header":[1],"text":[1],"position":[1],"variant":[1],"icon":[1],"tooltipVisible":[32],"internalPosition":[32]},null,{"position":["positionChanged"]}]]],["p-d2d626a8",[[1,"ifx-badge"]]],["p-88ec12f3",[[0,"ifx-basic-table",{"cols":[1],"rows":[1],"columnDefs":[16],"rowData":[16],"rowHeight":[1,"row-height"],"uniqueKey":[1,"unique-key"],"tableHeight":[1,"table-height"],"gridOptions":[32]}]]],["p-57fbac9f",[[1,"ifx-breadcrumb"]]],["p-9c052f90",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-f2a060b0",[[1,"ifx-card",{"direction":[1],"href":[1],"target":[1],"noBtns":[32],"alignment":[32],"noImg":[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-41096b8a",[[1,"ifx-card-headline",{"isHovered":[4,"is-hovered"],"direction":[32],"hasDesc":[32]}]]],["p-3ec87d76",[[1,"ifx-card-image",{"src":[1],"alt":[1],"position":[1]}]]],["p-f9511c3f",[[1,"ifx-card-links"]]],["p-cb46b29f",[[1,"ifx-card-overline"]]],["p-c976b0fa",[[1,"ifx-card-text",{"hasBtn":[32]}]]],["p-26545c0a",[[1,"ifx-dropdown",{"placement":[1],"defaultOpen":[4,"default-open"],"noAppendToBody":[4,"no-append-to-body"],"disabled":[4],"noCloseOnOutsideClick":[4,"no-close-on-outside-click"],"noCloseOnMenuClick":[4,"no-close-on-menu-click"],"internalIsOpen":[32],"trigger":[32],"menu":[32],"isOpen":[64],"closeDropdown":[64],"openDropdown":[64]},[[0,"slotchange","watchHandlerSlot"],[5,"mousedown","handleOutsideClick"]],{"defaultOpen":["watchHandlerIsOpen"],"disabled":["watchHandlerDisabled"]}]]],["p-c65373ba",[[1,"ifx-dropdown-header"]]],["p-99a1e9b4",[[1,"ifx-dropdown-menu",{"isOpen":[4,"is-open"],"size":[1],"hideTopPadding":[32],"filteredItems":[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-7cc637e8",[[1,"ifx-dropdown-separator"]]],["p-7675a429",[[1,"ifx-dropdown-trigger",{"isOpen":[4,"is-open"]}]]],["p-b932636d",[[1,"ifx-footer",{"variant":[1],"large":[32],"medium":[32]}]]],["p-0a8ce360",[[1,"ifx-footer-column"]]],["p-cbb04874",[[1,"ifx-link",{"href":[1],"target":[1],"size":[1],"variant":[1]}]]],["p-c9956712",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["p-31f457fc",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["p-768d60dc",[[1,"ifx-navbar-menu",{"menu":[32]}]]],["p-99a30312",[[1,"ifx-navbar-menu-item",{"href":[1],"target":[1],"hide":[4]}]]],["p-63ea6580",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-2e74ead0",[[1,"ifx-radio-button",{"disabled":[4],"value":[4],"error":[4],"size":[1],"internalValue":[32],"hasSlot":[32]},null,{"value":["valueChanged"]}]]],["p-8dca64d7",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"]}]]],["p-c6fdedf4",[[1,"ifx-spinner",{"size":[1],"variant":[1]}]]],["p-85c8ba9a",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["p-f9058c07",[[1,"ifx-switch",{"value":[4],"name":[1],"disabled":[4],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-38c8d322",[[4,"ifx-tab"]]],["p-3c15a6a5",[[0,"ifx-table",{"cols":[1],"rows":[1],"columnDefs":[16],"rowData":[16],"rowHeight":[1,"row-height"],"uniqueKey":[1,"unique-key"],"tableHeight":[1,"table-height"],"pagination":[4],"paginationPageSize":[2,"pagination-page-size"],"gridOptions":[32]}]]],["p-8a6a1364",[[1,"ifx-tabs",{"tabs":[16],"orientation":[1],"internalOrientation":[32],"activeTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"tabTitles":[32],"disabledTabs":[32],"tabObjects":[32]},[[0,"slotchange","onSlotChange"]],{"orientation":["onOrientationChange"]}]]],["p-8227f4d0",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["p-f91dfae0",[[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"size":[1],"indeterminate":[4],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-9939a3a3",[[1,"ifx-search-field",{"value":[1025],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"size":[1],"insideDropdown":[32],"showDeleteIconInternalState":[32],"isFocused":[32]},[[5,"mousedown","handleOutsideClick"]],{"value":["valueWatcher"]}]]],["p-a17d2a55",[[0,"ifx-select",{"type":[1],"value":[1],"name":[1],"items":[16],"choices":[1],"renderChoiceLimit":[2,"render-choice-limit"],"maxItemCount":[2,"max-item-count"],"addItems":[4,"add-items"],"removeItems":[4,"remove-items"],"removeItemButton":[4,"remove-item-button"],"editItems":[4,"edit-items"],"duplicateItemsAllowed":[4,"duplicate-items-allowed"],"delimiter":[1],"paste":[4],"searchEnabled":[4,"search-enabled"],"searchChoices":[4,"search-choices"],"searchFields":[1,"search-fields"],"searchFloor":[2,"search-floor"],"searchResultLimit":[2,"search-result-limit"],"position":[1],"resetScrollPosition":[4,"reset-scroll-position"],"shouldSort":[4,"should-sort"],"shouldSortItems":[4,"should-sort-items"],"sorter":[16],"placeholder":[8],"placeholderValue":[1,"placeholder-value"],"searchPlaceholderValue":[1,"search-placeholder-value"],"prependValue":[1,"prepend-value"],"appendValue":[1,"append-value"],"renderSelectedChoices":[1,"render-selected-choices"],"loadingText":[1,"loading-text"],"noResultsText":[1,"no-results-text"],"noChoicesText":[1,"no-choices-text"],"itemSelectText":[1,"item-select-text"],"addItemText":[1,"add-item-text"],"maxItemText":[1,"max-item-text"],"uniqueItemText":[1,"unique-item-text"],"classNames":[16],"fuseOptions":[16],"addItemFilter":[1,"add-item-filter"],"customAddItemText":[1,"custom-add-item-text"],"callbackOnInit":[16],"callbackOnCreateTemplates":[16],"valueComparer":[16],"ifxError":[4,"ifx-error"],"ifxErrorMessage":[1,"ifx-error-message"],"ifxLabel":[1,"ifx-label"],"ifxDisabled":[4,"ifx-disabled"],"ifxPlaceholderValue":[1,"ifx-placeholder-value"],"ifxOptions":[1,"ifx-options"],"ifxSize":[1,"ifx-size"],"ifxSelectedOption":[32],"handleChange":[64],"highlightItem":[64],"unhighlightItem":[64],"highlightAll":[64],"unhighlightAll":[64],"removeActiveItemsByValue":[64],"removeActiveItems":[64],"removeHighlightedItems":[64],"showDropdown":[64],"hideDropdown":[64],"getValue":[64],"setValue":[64],"setChoiceByValue":[64],"setChoices":[64],"clearChoices":[64],"clearStore":[64],"clearInput":[64],"enable":[64],"disable":[64],"ajax":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-c035e79c",[[1,"ifx-number-indicator",{"inverted":[4]}]]],["p-faa6c5c3",[[1,"ifx-accordion-item",{"caption":[1],"initialCollapse":[4,"initial-collapse"],"open":[32],"close":[64],"isOpen":[64]}],[1,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]],["p-97820d62",[[1,"ifx-icon-button",{"variant":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["p-a1234a6c",[[1,"ifx-button",{"variant":[1],"theme":[1],"size":[1],"disabled":[4],"href":[1],"target":[1],"type":[1],"internalHref":[32],"setFocus":[64]},null,{"href":["setInternalHref"]}]]]]'),e)));
+import{p as e,H as i,b as a}from"./p-8faa5e95.js";export{s as setNonce}from"./p-8faa5e95.js";const t=()=>{{o(i.prototype)}const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};const o=e=>{const i=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return i.call(this,e)}const a=i.call(this,false);const t=this.childNodes;if(e){for(let e=0;e<t.length;e++){if(t[e].nodeType!==2){a.appendChild(t[e].cloneNode(true))}}}return a}};t().then((e=>a(JSON.parse('[["p-1556fa15",[[1,"ifx-faq"]]],["p-9189c4de",[[1,"ifx-modal",{"opened":[1540],"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"variant":[1],"alertIcon":[1,"alert-icon"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonLabel":[1,"cancel-button-label"],"showModal":[32]},null,{"opened":["openedChanged"]}]]],["p-afee16a1",[[1,"ifx-pagination",{"currentPage":[2,"current-page"],"total":[2],"internalPage":[32],"itemsPerPage":[32],"numberOfPages":[32]},[[0,"ifxSelect","setItemsPerPage"]]]]],["p-9a18e7e5",[[1,"ifx-dropdown-trigger-button",{"isOpen":[4,"is-open"],"theme":[1],"variant":[1],"size":[1],"disabled":[4],"hideArrow":[4,"hide-arrow"]}]]],["p-ab2b8d08",[[1,"ifx-multiselect",{"options":[1],"size":[1],"disabled":[4],"error":[4],"errorMessage":[1,"error-message"],"label":[1],"placeholder":[1],"maxItemCount":[2,"max-item-count"],"persistentSelectedOptions":[32],"listOfOptions":[32],"dropdownOpen":[32],"dropdownFlipped":[32],"zIndex":[32]},null,{"options":["handleOptionsChange"]}]]],["p-b00de336",[[1,"ifx-search-bar",{"isOpen":[4,"is-open"],"disabled":[4],"value":[1025],"internalState":[32]},null,{"isOpen":["handlePropChange"]}]]],["p-cdce82f2",[[1,"ifx-alert",{"variant":[1],"icon":[1]}]]],["p-dc5db97f",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["p-8da56a38",[[1,"ifx-chip",{"placeholder":[1],"selectedValue":[32]},[[5,"mousedown","handleOutsideClick"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-3ebe1789",[[1,"ifx-dropdown-item",{"icon":[1],"href":[1],"target":[1],"hide":[4],"size":[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-7c52cb4d",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["p-a3d60d08",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["p-648a6ef3",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"showLogo":[4,"show-logo"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32],"searchBarIsOpen":[32]},[[0,"ifxSearchBarIsOpen","handleSearchBarToggle"],[5,"mousedown","handleOutsideClick"]]]]],["p-8c900670",[[1,"ifx-navbar-item",{"isProfile":[1028,"is-profile"],"hideLabel":[4,"hide-label"],"icon":[1],"href":[1],"target":[1],"hideComponent":[4,"hide-component"]}]]],["p-2ace3cd4",[[1,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"hasIcon":[32],"hasIconWrapper":[32]},[[0,"consoleError","handleConsoleError"]]]]],["p-a4dc9d69",[[1,"ifx-slider",{"min":[2],"max":[2],"value":[2],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-e8efbe5d",[[1,"ifx-tag",{"icon":[1]}]]],["p-fff21b9b",[[1,"ifx-text-field",{"placeholder":[1],"value":[1025],"error":[4],"label":[1],"icon":[1],"caption":[1],"size":[1],"required":[4],"optional":[4],"success":[4],"disabled":[4],"reset":[64]},null,{"value":["valueWatcher"]}]]],["p-5bf4e6a8",[[1,"ifx-tooltip",{"header":[1],"text":[1],"position":[1],"variant":[1],"icon":[1],"tooltipVisible":[32],"internalPosition":[32]},null,{"position":["positionChanged"]}]]],["p-d2d626a8",[[1,"ifx-badge"]]],["p-88ec12f3",[[0,"ifx-basic-table",{"cols":[1],"rows":[1],"columnDefs":[16],"rowData":[16],"rowHeight":[1,"row-height"],"uniqueKey":[1,"unique-key"],"tableHeight":[1,"table-height"],"gridOptions":[32]}]]],["p-57fbac9f",[[1,"ifx-breadcrumb"]]],["p-9c052f90",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-f2a060b0",[[1,"ifx-card",{"direction":[1],"href":[1],"target":[1],"noBtns":[32],"alignment":[32],"noImg":[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-41096b8a",[[1,"ifx-card-headline",{"isHovered":[4,"is-hovered"],"direction":[32],"hasDesc":[32]}]]],["p-3ec87d76",[[1,"ifx-card-image",{"src":[1],"alt":[1],"position":[1]}]]],["p-f9511c3f",[[1,"ifx-card-links"]]],["p-cb46b29f",[[1,"ifx-card-overline"]]],["p-c976b0fa",[[1,"ifx-card-text",{"hasBtn":[32]}]]],["p-26545c0a",[[1,"ifx-dropdown",{"placement":[1],"defaultOpen":[4,"default-open"],"noAppendToBody":[4,"no-append-to-body"],"disabled":[4],"noCloseOnOutsideClick":[4,"no-close-on-outside-click"],"noCloseOnMenuClick":[4,"no-close-on-menu-click"],"internalIsOpen":[32],"trigger":[32],"menu":[32],"isOpen":[64],"closeDropdown":[64],"openDropdown":[64]},[[0,"slotchange","watchHandlerSlot"],[5,"mousedown","handleOutsideClick"]],{"defaultOpen":["watchHandlerIsOpen"],"disabled":["watchHandlerDisabled"]}]]],["p-c65373ba",[[1,"ifx-dropdown-header"]]],["p-99a1e9b4",[[1,"ifx-dropdown-menu",{"isOpen":[4,"is-open"],"size":[1],"hideTopPadding":[32],"filteredItems":[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-7cc637e8",[[1,"ifx-dropdown-separator"]]],["p-7675a429",[[1,"ifx-dropdown-trigger",{"isOpen":[4,"is-open"]}]]],["p-b932636d",[[1,"ifx-footer",{"variant":[1],"large":[32],"medium":[32]}]]],["p-0a8ce360",[[1,"ifx-footer-column"]]],["p-cbb04874",[[1,"ifx-link",{"href":[1],"target":[1],"size":[1],"variant":[1]}]]],["p-c9956712",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["p-31f457fc",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["p-768d60dc",[[1,"ifx-navbar-menu",{"menu":[32]}]]],["p-99a30312",[[1,"ifx-navbar-menu-item",{"href":[1],"target":[1],"hide":[4]}]]],["p-63ea6580",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-2e74ead0",[[1,"ifx-radio-button",{"disabled":[4],"value":[4],"error":[4],"size":[1],"internalValue":[32],"hasSlot":[32]},null,{"value":["valueChanged"]}]]],["p-8dca64d7",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"]}]]],["p-c6fdedf4",[[1,"ifx-spinner",{"size":[1],"variant":[1]}]]],["p-85c8ba9a",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["p-f9058c07",[[1,"ifx-switch",{"value":[4],"name":[1],"disabled":[4],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-38c8d322",[[4,"ifx-tab"]]],["p-3c15a6a5",[[0,"ifx-table",{"cols":[1],"rows":[1],"columnDefs":[16],"rowData":[16],"rowHeight":[1,"row-height"],"uniqueKey":[1,"unique-key"],"tableHeight":[1,"table-height"],"pagination":[4],"paginationPageSize":[2,"pagination-page-size"],"gridOptions":[32]}]]],["p-8a6a1364",[[1,"ifx-tabs",{"tabs":[16],"orientation":[1],"internalOrientation":[32],"activeTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"tabTitles":[32],"disabledTabs":[32],"tabObjects":[32]},[[0,"slotchange","onSlotChange"]],{"orientation":["onOrientationChange"]}]]],["p-8227f4d0",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["p-f91dfae0",[[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"size":[1],"indeterminate":[4],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-9939a3a3",[[1,"ifx-search-field",{"value":[1025],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"size":[1],"insideDropdown":[32],"showDeleteIconInternalState":[32],"isFocused":[32]},[[5,"mousedown","handleOutsideClick"]],{"value":["valueWatcher"]}]]],["p-a17d2a55",[[0,"ifx-select",{"type":[1],"value":[1],"name":[1],"items":[16],"choices":[1],"renderChoiceLimit":[2,"render-choice-limit"],"maxItemCount":[2,"max-item-count"],"addItems":[4,"add-items"],"removeItems":[4,"remove-items"],"removeItemButton":[4,"remove-item-button"],"editItems":[4,"edit-items"],"duplicateItemsAllowed":[4,"duplicate-items-allowed"],"delimiter":[1],"paste":[4],"searchEnabled":[4,"search-enabled"],"searchChoices":[4,"search-choices"],"searchFields":[1,"search-fields"],"searchFloor":[2,"search-floor"],"searchResultLimit":[2,"search-result-limit"],"position":[1],"resetScrollPosition":[4,"reset-scroll-position"],"shouldSort":[4,"should-sort"],"shouldSortItems":[4,"should-sort-items"],"sorter":[16],"placeholder":[8],"placeholderValue":[1,"placeholder-value"],"searchPlaceholderValue":[1,"search-placeholder-value"],"prependValue":[1,"prepend-value"],"appendValue":[1,"append-value"],"renderSelectedChoices":[1,"render-selected-choices"],"loadingText":[1,"loading-text"],"noResultsText":[1,"no-results-text"],"noChoicesText":[1,"no-choices-text"],"itemSelectText":[1,"item-select-text"],"addItemText":[1,"add-item-text"],"maxItemText":[1,"max-item-text"],"uniqueItemText":[1,"unique-item-text"],"classNames":[16],"fuseOptions":[16],"addItemFilter":[1,"add-item-filter"],"customAddItemText":[1,"custom-add-item-text"],"callbackOnInit":[16],"callbackOnCreateTemplates":[16],"valueComparer":[16],"ifxError":[4,"ifx-error"],"ifxErrorMessage":[1,"ifx-error-message"],"ifxLabel":[1,"ifx-label"],"ifxDisabled":[4,"ifx-disabled"],"ifxPlaceholderValue":[1,"ifx-placeholder-value"],"ifxOptions":[1,"ifx-options"],"ifxSize":[1,"ifx-size"],"ifxSelectedOption":[32],"handleChange":[64],"highlightItem":[64],"unhighlightItem":[64],"highlightAll":[64],"unhighlightAll":[64],"removeActiveItemsByValue":[64],"removeActiveItems":[64],"removeHighlightedItems":[64],"showDropdown":[64],"hideDropdown":[64],"getValue":[64],"setValue":[64],"setChoiceByValue":[64],"setChoices":[64],"clearChoices":[64],"clearStore":[64],"clearInput":[64],"enable":[64],"disable":[64],"ajax":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-c035e79c",[[1,"ifx-number-indicator",{"inverted":[4]}]]],["p-faa6c5c3",[[1,"ifx-accordion-item",{"caption":[1],"initialCollapse":[4,"initial-collapse"],"open":[32],"close":[64],"isOpen":[64]}],[1,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]],["p-97820d62",[[1,"ifx-icon-button",{"variant":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["p-a1234a6c",[[1,"ifx-button",{"variant":[1],"theme":[1],"size":[1],"disabled":[4],"href":[1],"target":[1],"type":[1],"internalHref":[32],"setFocus":[64]},null,{"href":["setInternalHref"]}]]]]'),e)));
 //# sourceMappingURL=infineon-design-system-stencil.esm.js.map

package/dist/infineon-design-system-stencil/{p-d93ed708.entry.js → p-afee16a1.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as i,c as t,h as e,g as l}from"./p-8faa5e95.js";const a='@charset "UTF-8";*{font-family:"Source Sans 3"}:host{display:inline-flex}.container{display:inline-flex;justify-content:center;align-items:center;gap:32px}.container .items__per-page-wrapper{display:flex;align-items:center;gap:16px}.container .items__per-page-wrapper .items__per-page-label{color:#1D1D1D;font-family:Source Sans 3;font-size:14px;font-style:normal;font-weight:600;line-height:20px}.container .items__per-page-wrapper .items__per-page-field{display:flex;flex-direction:column;align-items:flex-start}.container .items__per-page-wrapper .items__per-page-field ifx-select{width:92px}.container .items__total-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .items__total-button{display:flex;width:40px;height:40px;justify-content:center;align-items:center;border-radius:100px;border:1px solid #BFBBBB;background:#FFF}.container .items__total-wrapper .page__numbers-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item{display:flex;padding:6px;flex-direction:column;justify-content:center;align-items:center;gap:10px;border-radius:100px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active{background-color:#0A8276}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active span{color:#fff}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover{cursor:pointer}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover:not(.active){background-color:#ddd}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:active:not(.active){background-color:#575352}.container .items__total-wrapper .page__numbers-wrapper .page__number-item span{display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-family:Source Sans 3;font-size:13px;font-style:normal;font-weight:400;line-height:20px}.pagination{display:flex}.pagination ifx-icon-button:first-of-type{margin-right:12px}.pagination ifx-icon-button:last-of-type{margin-left:12px}a{padding:6px;border-radius:100px}ol{list-style-type:none;padding:0;margin:0;display:inline-flex;align-items:center;gap:12px}li{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:100px}li:hover:not(.active) a{background-color:#EEEDED}li:active:not(.active) a{background-color:#575352;color:#fff}li.active{background-color:#0A8276}li.active a{color:#fff}li:hover{cursor:pointer}li a{text-decoration:none;display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-family:"Source Sans 3";font-size:13px;font-style:normal;font-weight:400;line-height:20px}.prev.disabled,.next.disabled{cursor:default}.prev.disabled:hover,.next.disabled:hover{cursor:default;text-decoration:none}.prev{margin-right:2.5px}.next{margin-left:2.5px}@media (min-width: 400px){li:first-child,li.active-sibling,li.active,li.active+li,li:last-child{display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8)~li{display:none}li:first-child:nth-last-child(n+8)~li.active-sibling:before{content:"…";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li.active+li:after{content:"…";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+5){display:inline-flex;flex-direction:row}li:first-child:nth-last-child(n+8)~li:nth-last-child(5):before{content:"…";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):after,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):after,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):before,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):after{display:none !important}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5){display:none}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5):before,li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5):before{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+5){display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+4):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+4):after{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(5):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(5):after{content:"…";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8).active:before,li:first-child:nth-last-child(n+8).active:after,li:first-child:nth-last-child(n+8)~li.active:before,li:first-child:nth-last-child(n+8)~li.active:after{display:none}}';const n=class{constructor(e){i(this,e);this.ifxPageChange=t(this,"ifxPageChange",7);this.ifxNextPage=t(this,"ifxNextPage",7);this.ifxPrevPage=t(this,"ifxPrevPage",7);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}setItemsPerPage(i){this.itemsPerPage=parseInt(i.detail.label)}componentDidLoad(){this.calculateVisiblePageIndices();var i=this.el.shadowRoot.querySelector(".pagination");let t=i.querySelector(".prev");this.navigateSinglePage(t,true)}calculateNumberOfPages(){if(isNaN(this.currentPage)){this.currentPage=1}const i=this.total<=this.itemsPerPage?this.itemsPerPage:this.total;const t=this.itemsPerPage;const e=i/t;if(this.currentPage<=0){this.internalPage=1}else if(this.currentPage>e){this.internalPage=e}else this.internalPage=this.currentPage;this.numberOfPages=Array.from({length:e},((i,t)=>t+1))}componentWillLoad(){this.calculateNumberOfPages()}componentDidUpdate(){var i=this.el.shadowRoot.querySelector(".pagination");var t=i.querySelectorAll("li");this.addEventListenersToPageItems(t,i);if(i.dataset[this.DATA_KEY]<this.numberOfPages){i.dataset[this.DATA_KEY]=i.dataset[this.DATA_KEY]}else i.dataset[this.DATA_KEY]=0;this.changePage(i,false)}componentWillUpdate(){this.calculateNumberOfPages()}handleEventEmission(i){let t=i+1;let e=this.numberOfPages.length;let l=i===0?null:i;let a=i+2>e?null:i+2;let n=this.itemsPerPage;this.ifxPageChange.emit({currentPage:t,totalPages:e,prevPage:l,nextPage:a,itemsPerPage:n})}addEventListenersToPageItems(i,t){i.forEach((i=>{i.addEventListener("click",(i=>{var e=t;let l=e.querySelectorAll("li");e.dataset[this.DATA_KEY]=Array.from(l).indexOf(i.currentTarget);this.changePage(e,false)}))}))}initPagination(i){var t=i.querySelectorAll("li");i.dataset[this.DATA_KEY]=Array.from(t).indexOf(i.querySelector(".active"));i.querySelector(".prev").addEventListener("click",(i=>this.navigateSinglePage(i,false)));i.querySelector(".next").addEventListener("click",(i=>this.navigateSinglePage(i,false)));this.addEventListenersToPageItems(t,i)}navigateSinglePage(i,t){let e=i;if(typeof i.target==="object"){e=i.target}if(!e.classList.contains(this.CLASS_DISABLED)){var l=e.closest(".pagination");var a=parseInt(l.dataset[this.DATA_KEY],10);a+=1*(e.classList.contains("prev")?-1:1);if(a===-1){a=0}l.dataset[this.DATA_KEY]=a;this.changePage(l,t)}}changePage(i,t){const e=i;var l=e.querySelectorAll("li");var a=parseInt(e.dataset[this.DATA_KEY],10);l.forEach((i=>{i.classList.remove(this.CLASS_ACTIVE);i.classList.remove(this.CLASS_SIBLING_ACTIVE)}));if(t&&this.internalPage>1){a=Math.floor(this.internalPage-1);e.dataset[this.DATA_KEY]=a}this.handleEventEmission(a);l[a].classList.add(this.CLASS_ACTIVE);if(a===0){e.querySelector(".prev").classList.add(this.CLASS_DISABLED);e.querySelector(".prev").disabled=true}else{l[a-1].classList.add(this.CLASS_SIBLING_ACTIVE);e.querySelector(".prev").classList.remove(this.CLASS_DISABLED);e.querySelector(".prev").disabled=false}if(a===l.length-1){e.querySelector(".next").classList.add(this.CLASS_DISABLED);e.querySelector(".next").disabled=true}else{e.querySelector(".next").classList.remove(this.CLASS_DISABLED);e.querySelector(".next").disabled=false}}calculateVisiblePageIndices(){var i=this.el.shadowRoot.querySelector(".pagination");this.initPagination(i)}render(){return e("div",{"aria-label":"a pagination","aria-value":this.currentPage,class:"container"},e("div",{class:"items__per-page-wrapper"},e("div",{class:"items__per-page-label"},"Results per Page"),e("div",{class:"items__per-page-field"},e("ifx-select",{type:"single",value:"undefined","ifx-size":"s",placeholder:"false","search-enabled":"false","search-placeholder-value":"Search...","ifx-disabled":"false","ifx-error":"false","ifx-error-message":"Error","ifx-label":"","ifx-placeholder-value":"Placeholder","ifx-options":'[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]'}))),e("div",{class:"items__total-wrapper"},e("div",{class:"page__numbers-wrapper"},e("div",{class:"pagination"},e("ifx-icon-button",{variant:"secondary",class:"prev",color:"primary",icon:"arrow-left-24"}),e("ol",null,this.numberOfPages.map((i=>e("li",{class:`${this.internalPage===i?"active":""}`},e("a",{href:undefined},i))))),e("ifx-icon-button",{class:"next",variant:"secondary",color:"primary",icon:"arrow-right-24"})))))}get el(){return l(this)}};n.style=a;export{n as ifx_pagination};
-//# sourceMappingURL=p-d93ed708.entry.js.map
+import{r as i,c as t,h as e,g as l}from"./p-8faa5e95.js";const a='@charset "UTF-8";*{font-family:"Source Sans 3"}:host{display:inline-flex}.container{display:inline-flex;justify-content:center;align-items:center;gap:32px}.container .items__per-page-wrapper{display:flex;align-items:center;gap:16px}.container .items__per-page-wrapper .items__per-page-label{color:#1D1D1D;font-family:Source Sans 3;font-size:14px;font-style:normal;font-weight:600;line-height:20px}.container .items__per-page-wrapper .items__per-page-field{display:flex;flex-direction:column;align-items:flex-start}.container .items__per-page-wrapper .items__per-page-field ifx-select{width:92px}.container .items__total-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .items__total-button{display:flex;width:40px;height:40px;justify-content:center;align-items:center;border-radius:100px;border:1px solid #BFBBBB;background:#FFF}.container .items__total-wrapper .page__numbers-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item{display:flex;padding:6px;flex-direction:column;justify-content:center;align-items:center;gap:10px;border-radius:100px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active{background-color:#0A8276}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active span{color:#fff}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover{cursor:pointer}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover:not(.active){background-color:#ddd}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:active:not(.active){background-color:#575352}.container .items__total-wrapper .page__numbers-wrapper .page__number-item span{display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-family:Source Sans 3;font-size:13px;font-style:normal;font-weight:400;line-height:20px}.pagination{display:flex}.pagination ifx-icon-button:first-of-type{margin-right:12px}.pagination ifx-icon-button:last-of-type{margin-left:12px}a{padding:6px;border-radius:100px}ol{list-style-type:none;padding:0;margin:0;display:inline-flex;align-items:center;gap:12px}li{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:100px}li:hover:not(.active) a{background-color:#EEEDED}li:active:not(.active) a{background-color:#575352;color:#fff}li.active{background-color:#0A8276}li.active a{color:#fff}li:hover{cursor:pointer}li a{text-decoration:none;display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-family:"Source Sans 3";font-size:13px;font-style:normal;font-weight:400;line-height:20px}.prev.disabled,.next.disabled{cursor:default}.prev.disabled:hover,.next.disabled:hover{cursor:default;text-decoration:none}.prev{margin-right:2.5px}.next{margin-left:2.5px}@media (min-width: 400px){li:first-child,li.active-sibling,li.active,li.active+li,li:last-child{display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8)~li{display:none}li:first-child:nth-last-child(n+8)~li.active-sibling:before{content:"…";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li.active+li:after{content:"…";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+5){display:inline-flex;flex-direction:row}li:first-child:nth-last-child(n+8)~li:nth-last-child(5):before{content:"…";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):after,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):after,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):before,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):after{display:none !important}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5){display:none}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5):before,li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5):before{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+5){display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+4):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+4):after{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(5):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(5):after{content:"…";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8).active:before,li:first-child:nth-last-child(n+8).active:after,li:first-child:nth-last-child(n+8)~li.active:before,li:first-child:nth-last-child(n+8)~li.active:after{display:none}}';const n=class{constructor(e){i(this,e);this.ifxPageChange=t(this,"ifxPageChange",7);this.ifxNextPage=t(this,"ifxNextPage",7);this.ifxPrevPage=t(this,"ifxPrevPage",7);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}setItemsPerPage(i){this.itemsPerPage=parseInt(i.detail.label)}componentDidLoad(){this.calculateVisiblePageIndices();var i=this.el.shadowRoot.querySelector(".pagination");let t=i.querySelector(".prev");this.navigateSinglePage(t,true)}calculateNumberOfPages(){if(isNaN(this.currentPage)){this.currentPage=1}const i=this.total<=this.itemsPerPage?this.itemsPerPage:this.total;const t=this.itemsPerPage;const e=Math.ceil(i/t);if(this.currentPage<=0){this.internalPage=1}else if(this.currentPage>e){this.internalPage=e}else this.internalPage=this.currentPage;this.numberOfPages=Array.from({length:e},((i,t)=>t+1))}componentWillLoad(){this.calculateNumberOfPages()}componentDidUpdate(){var i=this.el.shadowRoot.querySelector(".pagination");var t=i.querySelectorAll("li");this.addEventListenersToPageItems(t,i);if(i.dataset[this.DATA_KEY]<this.numberOfPages){i.dataset[this.DATA_KEY]=i.dataset[this.DATA_KEY]}else i.dataset[this.DATA_KEY]=0;this.changePage(i,false)}componentWillUpdate(){this.calculateNumberOfPages()}handleEventEmission(i){let t=i+1;let e=this.numberOfPages.length;let l=i===0?null:i;let a=i+2>e?null:i+2;let n=this.itemsPerPage;this.ifxPageChange.emit({currentPage:t,totalPages:e,prevPage:l,nextPage:a,itemsPerPage:n})}addEventListenersToPageItems(i,t){i.forEach((i=>{i.addEventListener("click",(i=>{var e=t;let l=e.querySelectorAll("li");e.dataset[this.DATA_KEY]=Array.from(l).indexOf(i.currentTarget);this.changePage(e,false)}))}))}initPagination(i){var t=i.querySelectorAll("li");i.dataset[this.DATA_KEY]=Array.from(t).indexOf(i.querySelector(".active"));i.querySelector(".prev").addEventListener("click",(i=>this.navigateSinglePage(i,false)));i.querySelector(".next").addEventListener("click",(i=>this.navigateSinglePage(i,false)));this.addEventListenersToPageItems(t,i)}navigateSinglePage(i,t){let e=i;if(typeof i.target==="object"){e=i.target}if(!e.classList.contains(this.CLASS_DISABLED)){var l=e.closest(".pagination");var a=parseInt(l.dataset[this.DATA_KEY],10);a+=1*(e.classList.contains("prev")?-1:1);if(a===-1){a=0}l.dataset[this.DATA_KEY]=a;this.changePage(l,t)}}changePage(i,t){const e=i;var l=e.querySelectorAll("li");var a=parseInt(e.dataset[this.DATA_KEY],10);l.forEach((i=>{i.classList.remove(this.CLASS_ACTIVE);i.classList.remove(this.CLASS_SIBLING_ACTIVE)}));if(t&&this.internalPage>1){a=Math.floor(this.internalPage-1);e.dataset[this.DATA_KEY]=a}this.handleEventEmission(a);l[a].classList.add(this.CLASS_ACTIVE);if(a===0){e.querySelector(".prev").classList.add(this.CLASS_DISABLED);e.querySelector(".prev").disabled=true}else{l[a-1].classList.add(this.CLASS_SIBLING_ACTIVE);e.querySelector(".prev").classList.remove(this.CLASS_DISABLED);e.querySelector(".prev").disabled=false}if(a===l.length-1){e.querySelector(".next").classList.add(this.CLASS_DISABLED);e.querySelector(".next").disabled=true}else{e.querySelector(".next").classList.remove(this.CLASS_DISABLED);e.querySelector(".next").disabled=false}}calculateVisiblePageIndices(){var i=this.el.shadowRoot.querySelector(".pagination");this.initPagination(i)}render(){return e("div",{"aria-label":"a pagination","aria-value":this.currentPage,class:"container"},e("div",{class:"items__per-page-wrapper"},e("div",{class:"items__per-page-label"},"Results per Page"),e("div",{class:"items__per-page-field"},e("ifx-select",{type:"single",value:"undefined","ifx-size":"s",placeholder:"false","search-enabled":"false","search-placeholder-value":"Search...","ifx-disabled":"false","ifx-error":"false","ifx-error-message":"Error","ifx-label":"","ifx-placeholder-value":"Placeholder","ifx-options":'[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]'}))),e("div",{class:"items__total-wrapper"},e("div",{class:"page__numbers-wrapper"},e("div",{class:"pagination"},e("ifx-icon-button",{variant:"secondary",class:"prev",color:"primary",icon:"arrow-left-24"}),e("ol",null,this.numberOfPages.map((i=>e("li",{class:`${this.internalPage===i?"active":""}`},e("a",{href:undefined},i))))),e("ifx-icon-button",{class:"next",variant:"secondary",color:"primary",icon:"arrow-right-24"})))))}get el(){return l(this)}};n.style=a;export{n as ifx_pagination};
+//# sourceMappingURL=p-afee16a1.entry.js.map

package/dist/infineon-design-system-stencil/p-afee16a1.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["paginationCss","Pagination","this","CLASS_DISABLED","CLASS_ACTIVE","CLASS_SIBLING_ACTIVE","DATA_KEY","setItemsPerPage","e","itemsPerPage","parseInt","detail","label","componentDidLoad","calculateVisiblePageIndices","paginationElement","el","shadowRoot","querySelector","leftArrow","navigateSinglePage","calculateNumberOfPages","isNaN","currentPage","total","totalPageNumber","Math","ceil","internalPage","numberOfPages","Array","from","length","_","index","componentWillLoad","componentDidUpdate","listItems","querySelectorAll","addEventListenersToPageItems","dataset","changePage","componentWillUpdate","handleEventEmission","currActive","totalPages","prevPage","nextPage","ifxPageChange","emit","paginationContainer","forEach","item","addEventListener","parent","indexOf","currentTarget","initPagination","initialValue","target","classList","contains","closest","pagination","remove","floor","add","disabled","render","h","class","type","value","placeholder","variant","color","icon","map","href","undefined"],"sources":["src/components/pagination/pagination.scss?tag=ifx-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host { \n display: inline-flex;\n}\n\n.container {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n gap: 32px;\n\n & .items__per-page-wrapper {\n display: flex;\n align-items: center;\n gap: 16px;\n\n & .items__per-page-label { \n color: #1D1D1D;\n font-family: Source Sans 3;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px; \n }\n\n & .items__per-page-field { \n display: flex;\n flex-direction: column;\n align-items: flex-start;\n \n & ifx-select { \n width: 92px;\n }\n }\n }\n\n & .items__total-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n\n & .items__total-button { \n display: flex;\n width: 40px;\n height: 40px;\n justify-content: center;\n align-items: center;\n border-radius: 100px;\n border: 1px solid #BFBBBB;\n background: #FFF;\n }\n\n & .page__numbers-wrapper { \n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n\n & .page__number-item { \n display: flex;\n padding: 6px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 100px;\n\n &.active { \n background-color: #0A8276;\n & span { \n color: #fff;\n }\n }\n\n &:hover { \n cursor: pointer;\n }\n\n &:hover:not(.active) { \n background-color: #ddd;\n \n }\n\n &:active:not(.active) { \n background-color: #575352;\n }\n\n & span { \n display: flex;\n width: 16px;\n height: 16px;\n flex-direction: column;\n justify-content: center;\n color: #1D1D1D;\n text-align: center;\n font-family: Source Sans 3;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px; \n }\n }\n }\n }\n}\n\n\n.pagination {\n display: flex;\n\n & ifx-icon-button:first-of-type { \n margin-right: 12px;\n }\n\n & ifx-icon-button:last-of-type { \n margin-left: 12px;\n }\n}\n a {\n padding: 6px;\n border-radius: 100px;\n}\n\nol {\n list-style-type: none;\n padding: 0;\n margin: 0;\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\nli {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border-radius: 100px;\n\n &:hover:not(.active) { \n & a { \n background-color: #EEEDED;\n }\n }\n\n &:active:not(.active) {\n & a { \n background-color: #575352;\n color: #fff;\n }\n }\n\n &.active { \n background-color: #0A8276;\n\n & a {\n color: #fff;\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n\n & a {\n text-decoration: none;\n display: flex;\n width: 16px;\n height: 16px;\n flex-direction: column;\n justify-content: center;\n color: #1D1D1D;\n text-align: center;\n font-family: \"Source Sans 3\";\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n }\n}\n\n.prev, .next {\n &.disabled {\n cursor: default;\n \n &:hover {\n cursor: default;\n text-decoration: none;\n }\n }\n}\n.prev {\n margin-right: 2.5px;\n}\n.next {\n margin-left: 2.5px;\n}\n\n\n@mixin ellipsis($before:true) {\n content: \"\\2026\";\n font-size: 13px;\n display: inline-block;\n @if($before) {\n margin-right: 6px;\n } @else {\n margin-left: 6px;\n }\n}\n\n\n// @media(max-width:460px) {\n// li {\n \n// &:first-child,\n// &.active,\n// &.active-sibling:nth-last-child(2), // Show second to last child if the last one is active\n// &:last-child {\n// //display: inline-block !important;\n// display: inline-flex !important;\n// flex-direction: row;\n// }\n \n// $how-many-on-ends: 3; // 1,2,3,...,10 || 1,...,8,9,10\n// // There are >= 5 pages\n// &:first-child:nth-last-child(n+6) {\n \n// &~li {\n// // Start out with all siblings hidden\n// display: none;\n \n// // Show the last children in the list by default\n// &:nth-last-child(-n+#{$how-many-on-ends}) {\n// //display: inline-block;\n// display: inline-flex;\n// flex-direction: row;\n \n// }\n \n// // The child at the beginning of the last group shows ellipsis for the group\n// &:nth-last-child(#{$how-many-on-ends}) {\n// &:before {\n// @include ellipsis(true);\n// }\n// }\n \n// // The very beginning elements do not need to show ellipsis\n// // The very end elements do not need to show ellipsis\n// }\n\n\n// &.active,\n// &~li.active {\n \n// // Show ellipsis before and after the active element\n// &:before {\n// @include ellipsis(true);\n// }\n// &:after {\n// @include ellipsis(false);\n// }\n\n \n// // If the active element is in the first or last group, don't show ellipsis (siblings will take care of it)\n// &:nth-child(-n+#{$how-many-on-ends - 1}),\n// &:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n// &:before, &:after {\n// display: none;\n// }\n// }\n \n// // Hide the last group if \"active\" comes before them\n// &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n// display: none;\n// }\n \n// // Show the first group together if \"active\" comes before them\n// &~li:nth-child(-n+#{$how-many-on-ends}) {\n// //display: inline-block;\n// display: inline-flex;\n// flex-direction: row;\n// }\n \n// // If \"active\" is before the last member in the group, don't show ellipsis\n// &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n// &:after {\n// display: none;\n// }\n// }\n \n \n// // The child at the end of the first group shows ellipsis for the group\n// &~li:nth-child(#{$how-many-on-ends}) {\n// &:after {\n// @include ellipsis(false);\n// }\n// }\n// }\n// }\n// }\n// }\n\n@media (min-width: 400px) {\n li {\n &:first-child,\n &.active-sibling,\n &.active,\n &.active + li,\n &:last-child {\n //display: inline-block!important;\n display: inline-flex!important;\n flex-direction: row;\n }\n \n // There are >= 7 pages\n &:first-child:nth-last-child(n+8) {\n $how-many-on-ends: 5; // 1,2,3,4,5,...,10 || 1,...6,7,8,9,10\n \n &~li {\n // Start out with all siblings hidden\n display: none;\n \n // Show ellipsis before the previous one\n &.active-sibling:before {\n @include ellipsis(true); \n }\n // Show ellipsis after the next one\n &.active + li:after {\n @include ellipsis(false);\n }\n \n // Show the last children in the list by default\n &:nth-last-child(-n+#{$how-many-on-ends}) {\n //display: inline-block;\n display: inline-flex;\n flex-direction: row;\n }\n \n // The child at the beginning of the last group shows ellipsis for the group\n &:nth-last-child(#{$how-many-on-ends}) {\n &:before {\n @include ellipsis(true);\n }\n }\n \n // The very beginning elements do not need to show ellipsis\n &:nth-child(-n+#{$how-many-on-ends - 3}),\n // The very end elements do not need to show ellipsis\n &:nth-last-child(-n+#{$how-many-on-ends - 3}),\n // Even if it's a sibling to \"active\"\n &.active-sibling:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n &:before, &:after {\n display: none !important;\n }\n }\n }\n \n &.active,\n &~li.active {\n \n // Hide the last group if \"active\" comes before them\n &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n display: none;\n \n // If there is overlap, the element will show, but hide it's ellipsis\n &:before {\n display: none;\n }\n }\n \n // Show the first group together if \"active\" comes before them\n &~li:nth-child(-n+#{$how-many-on-ends}) {\n //display: inline-block;\n display: inline-flex!important;\n flex-direction: row;\n }\n \n // If \"active\" is before the last member in the group, don't show ellipsis\n &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n &:after {\n display: none;\n }\n }\n \n \n // The child at the end of the first group shows ellipsis for the group\n &~li:nth-child(#{$how-many-on-ends}) {\n &:after {\n @include ellipsis(false);\n }\n }\n \n // \"active\" should never show ellipsis\n &:before, &:after {\n display: none;\n }\n }\n }\n }\n}","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-pagination',\n styleUrl: 'pagination.scss',\n shadow: true\n})\nexport class Pagination {\n @Element() el;\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 this.itemsPerPage = parseInt(e.detail.label)\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 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 type='single'\n value='undefined'\n ifx-size='s'\n placeholder='false'\n search-enabled='false'\n search-placeholder-value='Search...'\n ifx-disabled='false'\n ifx-error='false'\n ifx-error-message='Error'\n ifx-label=''\n ifx-placeholder-value='Placeholder'\n ifx-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}"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "20.34.1",
+  "version": "20.34.2",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://github.com/Infineon/infineon-design-system-stencil#readme",

package/dist/infineon-design-system-stencil/p-d93ed708.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["paginationCss","Pagination","this","CLASS_DISABLED","CLASS_ACTIVE","CLASS_SIBLING_ACTIVE","DATA_KEY","setItemsPerPage","e","itemsPerPage","parseInt","detail","label","componentDidLoad","calculateVisiblePageIndices","paginationElement","el","shadowRoot","querySelector","leftArrow","navigateSinglePage","calculateNumberOfPages","isNaN","currentPage","total","totalPageNumber","internalPage","numberOfPages","Array","from","length","_","index","componentWillLoad","componentDidUpdate","listItems","querySelectorAll","addEventListenersToPageItems","dataset","changePage","componentWillUpdate","handleEventEmission","currActive","totalPages","prevPage","nextPage","ifxPageChange","emit","paginationContainer","forEach","item","addEventListener","parent","indexOf","currentTarget","initPagination","initialValue","target","classList","contains","closest","pagination","remove","Math","floor","add","disabled","render","h","class","type","value","placeholder","variant","color","icon","map","href","undefined"],"sources":["src/components/pagination/pagination.scss?tag=ifx-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host { \n display: inline-flex;\n}\n\n.container {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n gap: 32px;\n\n & .items__per-page-wrapper {\n display: flex;\n align-items: center;\n gap: 16px;\n\n & .items__per-page-label { \n color: #1D1D1D;\n font-family: Source Sans 3;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px; \n }\n\n & .items__per-page-field { \n display: flex;\n flex-direction: column;\n align-items: flex-start;\n \n & ifx-select { \n width: 92px;\n }\n }\n }\n\n & .items__total-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n\n & .items__total-button { \n display: flex;\n width: 40px;\n height: 40px;\n justify-content: center;\n align-items: center;\n border-radius: 100px;\n border: 1px solid #BFBBBB;\n background: #FFF;\n }\n\n & .page__numbers-wrapper { \n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n\n & .page__number-item { \n display: flex;\n padding: 6px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 100px;\n\n &.active { \n background-color: #0A8276;\n & span { \n color: #fff;\n }\n }\n\n &:hover { \n cursor: pointer;\n }\n\n &:hover:not(.active) { \n background-color: #ddd;\n \n }\n\n &:active:not(.active) { \n background-color: #575352;\n }\n\n & span { \n display: flex;\n width: 16px;\n height: 16px;\n flex-direction: column;\n justify-content: center;\n color: #1D1D1D;\n text-align: center;\n font-family: Source Sans 3;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px; \n }\n }\n }\n }\n}\n\n\n.pagination {\n display: flex;\n\n & ifx-icon-button:first-of-type { \n margin-right: 12px;\n }\n\n & ifx-icon-button:last-of-type { \n margin-left: 12px;\n }\n}\n a {\n padding: 6px;\n border-radius: 100px;\n}\n\nol {\n list-style-type: none;\n padding: 0;\n margin: 0;\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\nli {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border-radius: 100px;\n\n &:hover:not(.active) { \n & a { \n background-color: #EEEDED;\n }\n }\n\n &:active:not(.active) {\n & a { \n background-color: #575352;\n color: #fff;\n }\n }\n\n &.active { \n background-color: #0A8276;\n\n & a {\n color: #fff;\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n\n & a {\n text-decoration: none;\n display: flex;\n width: 16px;\n height: 16px;\n flex-direction: column;\n justify-content: center;\n color: #1D1D1D;\n text-align: center;\n font-family: \"Source Sans 3\";\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n }\n}\n\n.prev, .next {\n &.disabled {\n cursor: default;\n \n &:hover {\n cursor: default;\n text-decoration: none;\n }\n }\n}\n.prev {\n margin-right: 2.5px;\n}\n.next {\n margin-left: 2.5px;\n}\n\n\n@mixin ellipsis($before:true) {\n content: \"\\2026\";\n font-size: 13px;\n display: inline-block;\n @if($before) {\n margin-right: 6px;\n } @else {\n margin-left: 6px;\n }\n}\n\n\n// @media(max-width:460px) {\n// li {\n \n// &:first-child,\n// &.active,\n// &.active-sibling:nth-last-child(2), // Show second to last child if the last one is active\n// &:last-child {\n// //display: inline-block !important;\n// display: inline-flex !important;\n// flex-direction: row;\n// }\n \n// $how-many-on-ends: 3; // 1,2,3,...,10 || 1,...,8,9,10\n// // There are >= 5 pages\n// &:first-child:nth-last-child(n+6) {\n \n// &~li {\n// // Start out with all siblings hidden\n// display: none;\n \n// // Show the last children in the list by default\n// &:nth-last-child(-n+#{$how-many-on-ends}) {\n// //display: inline-block;\n// display: inline-flex;\n// flex-direction: row;\n \n// }\n \n// // The child at the beginning of the last group shows ellipsis for the group\n// &:nth-last-child(#{$how-many-on-ends}) {\n// &:before {\n// @include ellipsis(true);\n// }\n// }\n \n// // The very beginning elements do not need to show ellipsis\n// // The very end elements do not need to show ellipsis\n// }\n\n\n// &.active,\n// &~li.active {\n \n// // Show ellipsis before and after the active element\n// &:before {\n// @include ellipsis(true);\n// }\n// &:after {\n// @include ellipsis(false);\n// }\n\n \n// // If the active element is in the first or last group, don't show ellipsis (siblings will take care of it)\n// &:nth-child(-n+#{$how-many-on-ends - 1}),\n// &:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n// &:before, &:after {\n// display: none;\n// }\n// }\n \n// // Hide the last group if \"active\" comes before them\n// &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n// display: none;\n// }\n \n// // Show the first group together if \"active\" comes before them\n// &~li:nth-child(-n+#{$how-many-on-ends}) {\n// //display: inline-block;\n// display: inline-flex;\n// flex-direction: row;\n// }\n \n// // If \"active\" is before the last member in the group, don't show ellipsis\n// &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n// &:after {\n// display: none;\n// }\n// }\n \n \n// // The child at the end of the first group shows ellipsis for the group\n// &~li:nth-child(#{$how-many-on-ends}) {\n// &:after {\n// @include ellipsis(false);\n// }\n// }\n// }\n// }\n// }\n// }\n\n@media (min-width: 400px) {\n li {\n &:first-child,\n &.active-sibling,\n &.active,\n &.active + li,\n &:last-child {\n //display: inline-block!important;\n display: inline-flex!important;\n flex-direction: row;\n }\n \n // There are >= 7 pages\n &:first-child:nth-last-child(n+8) {\n $how-many-on-ends: 5; // 1,2,3,4,5,...,10 || 1,...6,7,8,9,10\n \n &~li {\n // Start out with all siblings hidden\n display: none;\n \n // Show ellipsis before the previous one\n &.active-sibling:before {\n @include ellipsis(true); \n }\n // Show ellipsis after the next one\n &.active + li:after {\n @include ellipsis(false);\n }\n \n // Show the last children in the list by default\n &:nth-last-child(-n+#{$how-many-on-ends}) {\n //display: inline-block;\n display: inline-flex;\n flex-direction: row;\n }\n \n // The child at the beginning of the last group shows ellipsis for the group\n &:nth-last-child(#{$how-many-on-ends}) {\n &:before {\n @include ellipsis(true);\n }\n }\n \n // The very beginning elements do not need to show ellipsis\n &:nth-child(-n+#{$how-many-on-ends - 3}),\n // The very end elements do not need to show ellipsis\n &:nth-last-child(-n+#{$how-many-on-ends - 3}),\n // Even if it's a sibling to \"active\"\n &.active-sibling:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n &:before, &:after {\n display: none !important;\n }\n }\n }\n \n &.active,\n &~li.active {\n \n // Hide the last group if \"active\" comes before them\n &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n display: none;\n \n // If there is overlap, the element will show, but hide it's ellipsis\n &:before {\n display: none;\n }\n }\n \n // Show the first group together if \"active\" comes before them\n &~li:nth-child(-n+#{$how-many-on-ends}) {\n //display: inline-block;\n display: inline-flex!important;\n flex-direction: row;\n }\n \n // If \"active\" is before the last member in the group, don't show ellipsis\n &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n &:after {\n display: none;\n }\n }\n \n \n // The child at the end of the first group shows ellipsis for the group\n &~li:nth-child(#{$how-many-on-ends}) {\n &:after {\n @include ellipsis(false);\n }\n }\n \n // \"active\" should never show ellipsis\n &:before, &:after {\n display: none;\n }\n }\n }\n }\n}","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-pagination',\n styleUrl: 'pagination.scss',\n shadow: true\n})\nexport class Pagination {\n @Element() el;\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 this.itemsPerPage = parseInt(e.detail.label)\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 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 = 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 type='single'\n value='undefined'\n ifx-size='s'\n placeholder='false'\n search-enabled='false'\n search-placeholder-value='Search...'\n ifx-disabled='false'\n ifx-error='false'\n ifx-error-message='Error'\n ifx-label=''\n ifx-placeholder-value='Placeholder'\n ifx-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}"],"mappings":"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"}