@everymatrix/bonus-elevate-powerups 0.0.60 → 0.0.61

package/dist/cjs/bonus-pagination-limits.cjs.entry.js

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-40b12efc.js');
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['pt-br', 'en', 'es-mx', 'hu', 'hr', 'tr'];
+const TRANSLATIONS = {
+    en: {
+        "pageLimitLabel": 'Show',
+    },
+    tr: {
+        "pageLimitLabel": 'Göster',
+    },
+    hu: {
+        "pageLimitLabel": 'Show',
+    },
+    hr: {
+        "pageLimitLabel": 'Show',
+    },
+    "pt-br": {
+        "pageLimitLabel": 'Show',
+    },
+    "es-mx": {
+        "pageLimitLabel": 'Show',
+    }
+};
+const translate = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+const bonusPaginationLimitsCss = ":host{display:block}.NoOfItemsToDisplayMessage{display:inline-block;margin:0.1rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--emw--color-primary, #191a19);line-height:1.8}.PaginationWrapper{display:flex;flex-direction:row}ul.PaginationArea{margin-block:5px;display:flex;flex-direction:row;padding:0px}ul.PaginationArea li.Item.Active:hover{color:var(--emw--color-primary, #eaefea);background-color:var(--emw--color-secondary, #191a19)}ul.PaginationArea li.Item.Active,ul.PaginationArea li.Item:hover{background-color:var(--emw--color-primary, rgba(169, 171, 169, 0.7));font-weight:bold;border-radius:0.3rem}ul.PaginationArea li.Item{padding-inline-start:0px;list-style:none;padding:5px 6px;margin:2px;cursor:pointer;display:inline-block}";
+const BonusPaginationLimitsStyle0 = bonusPaginationLimitsCss;
+
+const BonusPaginationLimits = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pageLimitChanged = index.createEvent(this, "pageLimitChanged", 7);
+        this.language = 'en';
+        this.translationUrl = '';
+        this.pageLimitOptions = undefined;
+        this.limit = 10;
+        this.pageLimits = [10, 25, 50];
+    }
+    onPageLimitClicked(pageLimit) {
+        this.limit = pageLimit;
+        this.pageLimitChanged.emit({ limit: this.limit });
+    }
+    componentWillLoad() {
+        if (!this.pageLimitOptions) {
+            return;
+        }
+        try {
+            this.pageLimits = this.pageLimitOptions.split(',').map((item) => {
+                return parseInt(item);
+            });
+            // if there is an array of custom limits provided (string to array - e.g. [5, 10, 15])
+            // and the value for the custom set limit (e.g. 8) isn't part of the provided array,
+            // then ignore the  set the custom set limit and make the limit equal to the first value of the array
+            // (as part of the example so far, this would be 5)
+            if (!this.pageLimits.includes(this.limit)) {
+                this.limit = this.pageLimits[0];
+            }
+        }
+        catch (e) {
+            console.error('Error when parse PageLimitOptions', e);
+        }
+    }
+    renderStylingWrapper() {
+        return index.h("general-styling-wrapper", { targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl });
+    }
+    render() {
+        return index.h("div", { key: '57f5e61ee287f72d0427a2e4f646e37c6b9358b9', class: 'PaginationWrapper' }, index.h("span", { key: '5f82b19fcf269086659b3faa475d9967b2af57fa', class: 'NoOfItemsToDisplayMessage' }, translate('pageLimitLabel', this.language)), index.h("ul", { key: '559c2d5378a352691583567579a8e681d092ddd3', class: 'PaginationArea' }, this.pageLimits.map((pageLimit) => {
+            return (index.h("li", { class: `${this.limit == pageLimit ? 'Active' : ''} PageSize Item`, onClick: () => {
+                    this.onPageLimitClicked(pageLimit);
+                } }, pageLimit));
+        })), index.h("general-styling-wrapper", { key: 'a8b9632e7421318e330f33b9c1cc9eb7121e35e9', targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl }), this.renderStylingWrapper());
+    }
+};
+BonusPaginationLimits.style = BonusPaginationLimitsStyle0;
+
+exports.bonus_pagination_limits = BonusPaginationLimits;

package/dist/cjs/{index-3dbb4007.js → index-40b12efc.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'bonus-elevate-powerups';
-const BUILD = /* bonus-elevate-powerups */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* bonus-elevate-powerups */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: true, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -71,10 +71,14 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'bonus-elevate-powerups_5.cjs':
+                case 'bonus-elevate-powerups_19.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
-                        './bonus-elevate-powerups_5.cjs.entry.js')); }).then(processMod, consoleError);
+                        './bonus-elevate-powerups_19.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'bonus-pagination-limits.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './bonus-pagination-limits.cjs.entry.js')); }).then(processMod, consoleError);
           }
       }
   return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
@@ -1057,6 +1061,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         hostRef.$flags$ |= 128 /* isWatchReady */;
       }
       endNewInstance();
+      fireConnectedCallback(hostRef.$lazyInstance$);
     } else {
       Cstr = elm.constructor;
       const cmpTag = elm.localName;
@@ -1084,6 +1089,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
   }
 };
 var fireConnectedCallback = (instance) => {
+  {
+    safeCall(instance, "connectedCallback");
+  }
 };
 
 // src/runtime/connected-callback.ts
@@ -1117,8 +1125,10 @@ var connectedCallback = (elm) => {
       }
     } else {
       addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
-      if (hostRef == null ? void 0 : hostRef.$lazyInstance$) ; else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
-        hostRef.$onReadyPromise$.then(() => fireConnectedCallback());
+      if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
+        fireConnectedCallback(hostRef.$lazyInstance$);
+      } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
+        hostRef.$onReadyPromise$.then(() => fireConnectedCallback(hostRef.$lazyInstance$));
       }
     }
     endConnected();
@@ -1296,6 +1306,7 @@ var hostListenerProxy = (hostRef, methodName) => (ev) => {
 };
 var getHostListenerTarget = (elm, flags) => {
   if (flags & 8 /* TargetWindow */) return win;
+  if (flags & 16 /* TargetBody */) return doc.body;
   return elm;
 };
 var hostListenerOpts = (flags) => supportsListenerOptions ? {

package/dist/cjs/index.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const bonusElevatePowerups = require('./bonus-elevate-powerups-9143badb.js');
-require('./index-3dbb4007.js');
+const bonusElevatePowerups = require('./bonus-elevate-powerups-7c27eebe.js');
+require('./index-40b12efc.js');
 
 
 

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3dbb4007.js');
+const index = require('./index-40b12efc.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["bonus-elevate-powerups_5.cjs",[[1,"bonus-elevate-powerups",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"endpoint":[513],"session":[513],"limit":[1538],"openTermsPage":[4,"open-terms-page"],"isLoading":[32],"powerups":[32],"offset":[32],"total":[32]},[[8,"reloadPageByType","onReloadPageByType"]],{"offset":["loadData"],"limit":["loadData"],"language":["loadData"],"session":["loadData","handleDataConfigChange"],"endpoint":["loadData","handleDataConfigChange"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"translationUrl":["handleNewTranslations"]}],[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}],[0,"bonus-pagination-nav",{"total":[1538],"limit":[1538],"offset":[1538],"tableId":[1537,"table-id"],"language":[1537],"translationUrl":[513,"translation-url"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"displayPageNumbers":[1540,"display-page-numbers"],"displayRangeOfTotal":[1540,"display-range-of-total"],"navItemAccount":[1538,"nav-item-account"],"endPageIndex":[32],"pagesArray":[32],"currentPage":[32],"showAsEllipsisMid":[32]},[[8,"paginationReset","pageLimitChangedHandler"],[8,"pageLimitChanged","pageLimitChangedHandler"]]],[0,"time-count",{"expireTime":[1,"expire-time"],"language":[1],"displayTime":[32],"isExpireInDay1":[32]},null,{"expireTime":["startTimeChanged"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
+  return index.bootstrapLazy(JSON.parse("[[\"bonus-pagination-limits.cjs\",[[0,\"bonus-pagination-limits\",{\"language\":[513],\"translationUrl\":[513,\"translation-url\"],\"pageLimitOptions\":[513,\"page-limit-options\"],\"limit\":[1538],\"pageLimits\":[32]}]]],[\"bonus-elevate-powerups_19.cjs\",[[1,\"bonus-elevate-powerups\",{\"mbSource\":[513,\"mb-source\"],\"clientStyling\":[513,\"client-styling\"],\"clientStylingUrl\":[513,\"client-styling-url\"],\"translationUrl\":[513,\"translation-url\"],\"language\":[513],\"endpoint\":[513],\"session\":[513],\"limit\":[1538],\"openTermsPage\":[516,\"open-terms-page\"],\"pageLimitOptions\":[1537,\"page-limit-options\"],\"pageLimitSelectOptions\":[32],\"isLoading\":[32],\"powerups\":[32],\"offset\":[32],\"total\":[32]},[[8,\"reloadPageByType\",\"onReloadPageByType\"],[16,\"sendInputValue\",\"onPageLimitChangedHandler\"]],{\"offset\":[\"loadData\"],\"limit\":[\"loadData\"],\"language\":[\"loadData\"],\"session\":[\"loadData\",\"handleDataConfigChange\"],\"endpoint\":[\"loadData\",\"handleDataConfigChange\"],\"clientStyling\":[\"handleClientStylingChange\"],\"clientStylingUrl\":[\"handleClientStylingUrlChange\"],\"mbSource\":[\"handleMbSourceChange\"],\"translationUrl\":[\"handleNewTranslations\"]}],[0,\"ui-image\",{\"src\":[1],\"width\":[1],\"height\":[1],\"alt\":[1],\"styles\":[8],\"detectDistance\":[1,\"detect-distance\"],\"imgLoaded\":[32],\"shouldLoad\":[32]},null,{\"src\":[\"handleSrc\"]}],[0,\"bonus-pagination-nav\",{\"total\":[1538],\"limit\":[1538],\"offset\":[1538],\"tableId\":[1537,\"table-id\"],\"language\":[1537],\"translationUrl\":[513,\"translation-url\"],\"arrowsActive\":[1540,\"arrows-active\"],\"secondaryArrowsActive\":[1540,\"secondary-arrows-active\"],\"displayPageNumbers\":[1540,\"display-page-numbers\"],\"displayRangeOfTotal\":[1540,\"display-range-of-total\"],\"navItemAccount\":[1538,\"nav-item-account\"],\"endPageIndex\":[32],\"pagesArray\":[32],\"currentPage\":[32],\"showAsEllipsisMid\":[32]},[[8,\"paginationReset\",\"pageLimitChangedHandler\"],[8,\"pageLimitChanged\",\"pageLimitChangedHandler\"]]],[0,\"time-count\",{\"expireTime\":[1,\"expire-time\"],\"language\":[1],\"displayTime\":[32],\"isExpireInDay1\":[32]},null,{\"expireTime\":[\"startTimeChanged\"]}],[0,\"ui-skeleton\",{\"structure\":[1],\"width\":[1],\"height\":[1],\"borderRadius\":[8,\"border-radius\"],\"marginBottom\":[8,\"margin-bottom\"],\"marginTop\":[8,\"margin-top\"],\"marginLeft\":[8,\"margin-left\"],\"marginRight\":[8,\"margin-right\"],\"animation\":[4],\"rows\":[2],\"size\":[1]},null,{\"structure\":[\"handleStructureChange\"]}],[1,\"general-input\",{\"type\":[513],\"name\":[513],\"displayName\":[513,\"display-name\"],\"placeholder\":[513],\"action\":[513],\"validation\":[16],\"options\":[520],\"language\":[513],\"autofilled\":[516],\"tooltip\":[513],\"defaultValue\":[520,\"default-value\"],\"emitValue\":[516,\"emit-value\"],\"isDuplicateInput\":[516,\"is-duplicate-input\"],\"hidePasswordComplexity\":[516,\"hide-password-complexity\"],\"noValidation\":[516,\"no-validation\"],\"clientStyling\":[520,\"client-styling\"],\"clientStylingUrl\":[513,\"client-styling-url\"],\"dateFormat\":[513,\"date-format\"],\"translationUrl\":[513,\"translation-url\"],\"emitOnClick\":[516,\"emit-on-click\"],\"twofaDestination\":[513,\"twofa-destination\"],\"twofaResendIntervalSeconds\":[514,\"twofa-resend-interval-seconds\"],\"twofaStartCountDown\":[516,\"twofa-start-count-down\"],\"haspostalcodelookup\":[516],\"postalcodelength\":[514],\"addresses\":[520],\"ignoreCountry\":[516,\"ignore-country\"],\"enableSouthAfricanMode\":[516,\"enable-south-african-mode\"],\"enableManualDateInput\":[516,\"enable-manual-date-input\"],\"pinAttemptsExceeded\":[516,\"pin-attempts-exceeded\"],\"mbSource\":[513,\"mb-source\"],\"enableCustomRegexValidation\":[516,\"enable-custom-regex-validation\"]},null,{\"clientStyling\":[\"handleClientStylingChange\"],\"clientStylingUrl\":[\"handleClientStylingChangeURL\"]}],[1,\"toggle-checkbox-input\",{\"name\":[513],\"displayName\":[513,\"display-name\"],\"defaultValue\":[513,\"default-value\"],\"options\":[16],\"autofilled\":[516],\"tooltip\":[513],\"validation\":[16],\"language\":[513],\"emitValue\":[516,\"emit-value\"],\"clientStyling\":[513,\"client-styling\"],\"mbSource\":[513,\"mb-source\"],\"errorMessage\":[32],\"isValid\":[32],\"showTooltip\":[32],\"showFields\":[32]},[[10,\"click\",\"handleClickOutside\"]],{\"clientStyling\":[\"handleClientStylingChange\"]}],[1,\"checkbox-group-input\",{\"name\":[513],\"displayName\":[513,\"display-name\"],\"defaultValue\":[513,\"default-value\"],\"autofilled\":[516],\"tooltip\":[513],\"options\":[16],\"validation\":[16],\"language\":[513],\"emitValue\":[516,\"emit-value\"],\"clientStyling\":[513,\"client-styling\"],\"mbSource\":[513,\"mb-source\"],\"errorMessage\":[32],\"isValid\":[32],\"showTooltip\":[32],\"selectedValues\":[32],\"showCheckboxes\":[32]},[[10,\"click\",\"handleClickOutside\"]],{\"clientStyling\":[\"handleClientStylingChange\"],\"isValid\":[\"validityChanged\"],\"selectedValues\":[\"setValue\"],\"emitValue\":[\"emitValueHandler\"]}],[1,\"checkbox-input\",{\"name\":[513],\"displayName\":[513,\"display-name\"],\"defaultValue\":[513,\"default-value\"],\"autofilled\":[516],\"tooltip\":[513],\"validation\":[16],\"language\":[513],\"emitValue\":[516,\"emit-value\"],\"clientStyling\":[513,\"client-styling\"],\"mbSource\":[513,\"mb-source\"],\"errorMessage\":[32],\"isValid\":[32],\"showTooltip\":[32]},[[10,\"click\",\"handleClickOutside\"]],{\"clientStyling\":[\"handleClientStylingChange\"],\"isValid\":[\"validityChanged\"],\"emitValue\":[\"emitValueHandler\"]}],[1,\"date-input\",{\"name\":[513],\"displayName\":[513,\"display-name\"],\"placeholder\":[513],\"validation\":[16],\"defaultValue\":[513,\"default-value\"],\"autofilled\":[516],\"tooltip\":[513],\"language\":[513],\"emitValue\":[516,\"emit-value\"],\"clientStyling\":[513,\"client-styling\"],\"dateFormat\":[513,\"date-format\"],\"emitOnClick\":[516,\"emit-on-click\"],\"enableSouthAfricanMode\":[516,\"enable-south-african-mode\"],\"enableManualDateInput\":[516,\"enable-manual-date-input\"],\"mbSource\":[513,\"mb-source\"],\"errorMessage\":[32],\"isValid\":[32],\"showTooltip\":[32]},[[10,\"click\",\"handleClickOutside\"]],{\"clientStyling\":[\"handleClientStylingChange\"],\"isValid\":[\"validityChanged\"],\"emitValue\":[\"emitValueHandler\"],\"enableSouthAfricanMode\":[\"handleCustomRegistrationChange\"]}],[1,\"email-input\",{\"name\":[513],\"displayName\":[513,\"display-name\"],\"placeholder\":[513],\"validation\":[16],\"defaultValue\":[513,\"default-value\"],\"autofilled\":[516],\"tooltip\":[513],\"language\":[513],\"emitValue\":[516,\"emit-value\"],\"isDuplicateInput\":[516,\"is-duplicate-input\"],\"clientStyling\":[513,\"client-styling\"],\"mbSource\":[513,\"mb-source\"],\"errorMessage\":[32],\"isValid\":[32],\"showTooltip\":[32]},[[10,\"click\",\"handleClickOutside\"],[16,\"sendInputValue\",\"valueChangedHandler\"]],{\"clientStyling\":[\"handleClientStylingChange\"],\"isValid\":[\"validityChanged\"],\"emitValue\":[\"emitValueHandler\"]}],[1,\"number-input\",{\"name\":[513],\"displayName\":[513,\"display-name\"],\"placeholder\":[513],\"validation\":[16],\"defaultValue\":[513,\"default-value\"],\"autofilled\":[516],\"tooltip\":[513],\"language\":[513],\"emitValue\":[516,\"emit-value\"],\"clientStyling\":[513,\"client-styling\"],\"mbSource\":[513,\"mb-source\"],\"errorMessage\":[32],\"isValid\":[32],\"showTooltip\":[32]},[[10,\"click\",\"handleClickOutside\"]],{\"clientStyling\":[\"handleClientStylingChange\"],\"isValid\":[\"validityChanged\"],\"emitValue\":[\"emitValueHandler\"]}],[1,\"password-input\",{\"name\":[513],\"displayName\":[513,\"display-name\"],\"placeholder\":[513],\"defaultValue\":[513,\"default-value\"],\"autofilled\":[516],\"tooltip\":[513],\"validation\":[16],\"noValidation\":[516,\"no-validation\"],\"language\":[513],\"emitValue\":[516,\"emit-value\"],\"isDuplicateInput\":[516,\"is-duplicate-input\"],\"hidePasswordComplexity\":[516,\"hide-password-complexity\"],\"clientStyling\":[513,\"client-styling\"],\"enableSouthAfricanMode\":[516,\"enable-south-african-mode\"],\"mbSource\":[513,\"mb-source\"],\"isValid\":[32],\"errorMessage\":[32],\"showTooltip\":[32],\"passwordComplexity\":[32],\"showPopup\":[32],\"value\":[32]},[[16,\"sendOriginalValidityState\",\"originalValidityChangedHandler\"],[16,\"sendInputValue\",\"valueChangedHandler\"],[10,\"click\",\"handleClickOutside\"]],{\"clientStyling\":[\"handleClientStylingChange\"],\"isValid\":[\"validityChanged\"],\"value\":[\"valueChanged\"],\"emitValue\":[\"emitValueHandler\"]}],[1,\"postalcode-input\",{\"name\":[513],\"displayName\":[513,\"display-name\"],\"placeholder\":[513],\"validation\":[16],\"defaultValue\":[513,\"default-value\"],\"autofilled\":[516],\"tooltip\":[513],\"language\":[513],\"emitValue\":[516,\"emit-value\"],\"clientStyling\":[513,\"client-styling\"],\"postalcodelength\":[520],\"addresses\":[520],\"ignoreCountry\":[516,\"ignore-country\"],\"mbSource\":[513,\"mb-source\"],\"isValid\":[32],\"errorMessage\":[32],\"showTooltip\":[32],\"selectedCountryCode\":[32],\"currentPostalCode\":[32],\"openAddressDropdown\":[32],\"showNoResultsMessage\":[32],\"refreshTrigger\":[32],\"isFetchingAddresses\":[32]},[[10,\"click\",\"handleClickOutside\"],[8,\"countryCodeUpdated\",\"handleCountryCodeUpdate\"],[8,\"addressFetchStarted\",\"handleFetchStarted\"]],{\"clientStyling\":[\"handleClientStylingChange\"],\"isValid\":[\"validityChanged\"],\"emitValue\":[\"emitValueHandler\"],\"addresses\":[\"handleAddresses\"]}],[1,\"radio-input\",{\"name\":[513],\"displayName\":[513,\"display-name\"],\"optionsGroup\":[16],\"validation\":[16],\"tooltip\":[513],\"language\":[513],\"emitValue\":[516,\"emit-value\"],\"clientStyling\":[513,\"client-styling\"],\"mbSource\":[513,\"mb-source\"],\"errorMessage\":[32],\"isValid\":[32],\"showTooltip\":[32]},[[10,\"click\",\"handleClickOutside\"]],{\"clientStyling\":[\"handleClientStylingChange\"],\"isValid\":[\"validityChanged\"],\"emitValue\":[\"emitValueHandler\"]}],[1,\"select-input\",{\"name\":[513],\"displayName\":[513,\"display-name\"],\"placeholder\":[513],\"action\":[513],\"defaultValue\":[513,\"default-value\"],\"autofilled\":[516],\"tooltip\":[513],\"options\":[16],\"validation\":[16],\"language\":[513],\"emitValue\":[516,\"emit-value\"],\"clientStyling\":[513,\"client-styling\"],\"mbSource\":[513,\"mb-source\"],\"errorMessage\":[32],\"isValid\":[32],\"showTooltip\":[32]},[[10,\"click\",\"handleClickOutside\"]],{\"clientStyling\":[\"handleClientStylingChange\"],\"isValid\":[\"validityChanged\"],\"emitValue\":[\"emitValueHandler\"]}],[1,\"tel-input\",{\"name\":[513],\"displayName\":[513,\"display-name\"],\"placeholder\":[513],\"showLabels\":[516,\"show-labels\"],\"action\":[513],\"validation\":[16],\"defaultValue\":[520,\"default-value\"],\"autofilled\":[516],\"tooltip\":[513],\"language\":[513],\"emitValue\":[516,\"emit-value\"],\"clientStyling\":[513,\"client-styling\"],\"mbSource\":[513,\"mb-source\"],\"enableCustomRegexValidation\":[516,\"enable-custom-regex-validation\"],\"isValid\":[32],\"errorMessage\":[32],\"showTooltip\":[32],\"disablePhonePrefix\":[32],\"phoneValue\":[32],\"phoneCodesOptions\":[32]},[[10,\"click\",\"handleClickOutside\"]],{\"clientStyling\":[\"handleClientStylingChange\"],\"isValid\":[\"validityChanged\"],\"emitValue\":[\"emitValueHandler\"]}],[1,\"text-input\",{\"name\":[513],\"displayName\":[513,\"display-name\"],\"placeholder\":[513],\"validation\":[16],\"defaultValue\":[513,\"default-value\"],\"autofilled\":[516],\"tooltip\":[513],\"language\":[513],\"checkValidity\":[516,\"check-validity\"],\"emitValue\":[516,\"emit-value\"],\"isDuplicateInput\":[516,\"is-duplicate-input\"],\"clientStyling\":[513,\"client-styling\"],\"haspostalcodelookup\":[516],\"enableSouthAfricanMode\":[516,\"enable-south-african-mode\"],\"mbSource\":[513,\"mb-source\"],\"isValid\":[32],\"errorMessage\":[32],\"showTooltip\":[32],\"selectedCountryCode\":[32]},[[10,\"click\",\"handleClickOutside\"],[16,\"sendInputValue\",\"valueChangedHandler\"],[16,\"validationChange\",\"handleValidationChange\"],[8,\"countryCodeUpdated\",\"handleCountryCodeUpdate\"],[16,\"sendAddressValue\",\"handleAddressSelection\"],[8,\"documentNumberUpdatedExternally\",\"handleExternalDocUpdate\"],[8,\"documentNumberResetValidation\",\"handleDocReset\"]],{\"clientStyling\":[\"handleClientStylingChange\"],\"isValid\":[\"validityChanged\"],\"emitValue\":[\"emitValueHandler\"]}],[1,\"twofa-input\",{\"name\":[513],\"displayName\":[513,\"display-name\"],\"placeholder\":[513],\"validation\":[16],\"tooltip\":[513],\"language\":[513],\"emitValue\":[516,\"emit-value\"],\"destination\":[513],\"resendIntervalSeconds\":[514,\"resend-interval-seconds\"],\"clientStyling\":[513,\"client-styling\"],\"enableSouthAfricanMode\":[516,\"enable-south-african-mode\"],\"pinAttemptsExceeded\":[516,\"pin-attempts-exceeded\"],\"clientStylingUrl\":[513,\"client-styling-url\"],\"mbSource\":[513,\"mb-source\"],\"startCountDown\":[516,\"start-count-down\"],\"isValid\":[32],\"isResendButtonAvailable\":[32],\"showTooltip\":[32],\"errorMessage\":[32],\"code\":[32],\"resendIntervalSecondsLeft\":[32],\"revealedIndexes\":[32]},[[10,\"click\",\"handleClickOutside\"]],{\"isValid\":[\"validityChanged\"],\"emitValue\":[\"emitValueHandler\"],\"clientStyling\":[\"handleClientStylingChange\"],\"clientStylingUrl\":[\"handleClientStylingChangeURL\"]}]]]]"), options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -9,12 +9,37 @@
     "typescriptVersion": "5.4.5"
   },
   "collections": [
+    {
+      "name": "@everymatrix/bonus-pagination-limits",
+      "tags": [
+        "bonus-pagination-limits"
+      ]
+    },
     {
       "name": "@everymatrix/bonus-pagination-nav",
       "tags": [
         "bonus-pagination-nav"
       ]
     },
+    {
+      "name": "@everymatrix/general-input",
+      "tags": [
+        "checkbox-group-input",
+        "checkbox-input",
+        "date-input",
+        "email-input",
+        "general-input",
+        "number-input",
+        "password-input",
+        "postalcode-input",
+        "radio-input",
+        "select-input",
+        "tel-input",
+        "text-input",
+        "toggle-checkbox-input",
+        "twofa-input"
+      ]
+    },
     {
       "name": "@everymatrix/ui-image",
       "tags": [

package/dist/collection/components/bonus-elevate-powerups/bonus-elevate-powerups.css

@@ -44,7 +44,7 @@
   font-size: 0.95rem;
   display: flex;
   flex-direction: column;
-  min-height: 300px;
+  min-height: 500px;
 }
 .PowerUpsContainer .EmptyPowerups {
   align-items: center;
@@ -72,6 +72,7 @@
   margin: 10px;
 }
 .PowerUpsContainer .PowerUps {
+  min-height: 60vh;
   width: 100%;
   gap: 12px;
   display: flex;
@@ -113,6 +114,8 @@
   color: var(--emw--color-gray-150, #c8d6ce);
   line-height: 1.2rem;
   flex: 1;
+  font-size: small;
+  margin-top: 8px;
 }
 .PowerUpsContainer .PowerUps .Card .CardLeft .DisplayName {
   width: 100%;
@@ -121,17 +124,21 @@
   overflow: hidden;
   height: 22px;
   gap: 12px;
-  font-size: 1.11rem;
+  font-size: large;
+  font-family: var(--emw--font-family-primary, "Montserrat", sans-serif);
 }
 .PowerUpsContainer .PowerUps .Card .CardLeft .PowerUpMultiplier {
   text-transform: uppercase;
-  font-size: 0.85em;
+  font-size: smaller;
+  gap: 10px;
+  display: flex;
   color: var(--emw--color-gray-dark, #727672);
 }
 .PowerUpsContainer .PowerUps .Card .CardLeft .PowerUpMultiplier .ExpireCount .Label {
   text-transform: uppercase;
 }
 .PowerUpsContainer .PowerUps .Card .CardLeft .PowerUpMultiplier .ExpireCount .Highlighted {
+  color: transparent;
   -webkit-background-clip: text;
   background-clip: text;
   background-image: linear-gradient(180deg, var(--emw--color-powup-orange1, #EA9018) 0%, var(--emw--color-powup-orange2, #E0A84E) 100%);
@@ -140,16 +147,15 @@
   display: inline-block;
   -webkit-background-clip: text;
   background-clip: text;
-  color: transparent;
 }
 .PowerUpsContainer .PowerUps .Card .CardLeft .TermsC {
+  color: var(--emw--color-powup-light-green, #18CE51);
   text-transform: uppercase;
   background-image: linear-gradient(180deg, var(--emw--color-powup-green, #24B24E) 0%, var(--emw--color-powup-light-green, #18CE51) 100%);
   font-size: 0.8em;
   font-weight: bold;
 }
 .PowerUpsContainer .PowerUps .Card .CardLeft .TermsC a {
-  color: var(--emw--color-powup-light-green, #18CE51);
   text-decoration: none;
 }
 .PowerUpsContainer .PowerUps .Card .CardLeft .TermsC span {
@@ -237,6 +243,38 @@
   display: flex;
   justify-content: center;
 }
+.PowerUpsContainer .Pagination ul.PaginationArea li.PageItem.Active, .PowerUpsContainer .Pagination ul.PaginationArea li.PageItem:hover {
+  color: #00B74F;
+  border: 2px solid #00B74F;
+}
+.PowerUpsContainer .Pagination ul.PaginationArea li.PageItem, .PowerUpsContainer .Pagination ul.PaginationArea li.PageItem {
+  background: transparent;
+  border: 2px solid rgba(188, 252, 177, 0.0509803922);
+  border-radius: 36px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.PowerUpsContainer .Pagination .PageNavigation .PageArrow {
+  color: transparent;
+}
+.PowerUpsContainer .Pagination .PageNavigation .PageArrow.PrePage.Disabled, .PowerUpsContainer .Pagination .PageNavigation .PageArrow.NextPage.Disabled {
+  cursor: default;
+  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.25592 0.244078C7.58136 0.569515 7.58136 1.09715 7.25592 1.42259L2.84518 5.83333H12.5C12.9602 5.83333 13.3333 6.20643 13.3333 6.66667C13.3333 7.1269 12.9602 7.5 12.5 7.5H2.84518L7.25592 11.9107C7.58136 12.2362 7.58136 12.7638 7.25592 13.0893C6.93049 13.4147 6.40285 13.4147 6.07741 13.0893L0.244078 7.25592C-0.0813592 6.93049 -0.0813592 6.40285 0.244078 6.07741L6.07741 0.244078C6.40285 -0.0813592 6.93049 -0.0813592 7.25592 0.244078Z' fill='gray'/%3E%3C/svg%3E");
+}
+.PowerUpsContainer .Pagination .PageNavigation .PageArrow.PrePage, .PowerUpsContainer .Pagination .PageNavigation .PageArrow.NextPage {
+  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.25592 0.244078C7.58136 0.569515 7.58136 1.09715 7.25592 1.42259L2.84518 5.83333H12.5C12.9602 5.83333 13.3333 6.20643 13.3333 6.66667C13.3333 7.1269 12.9602 7.5 12.5 7.5H2.84518L7.25592 11.9107C7.58136 12.2362 7.58136 12.7638 7.25592 13.0893C6.93049 13.4147 6.40285 13.4147 6.07741 13.0893L0.244078 7.25592C-0.0813592 6.93049 -0.0813592 6.40285 0.244078 6.07741L6.07741 0.244078C6.40285 -0.0813592 6.93049 -0.0813592 7.25592 0.244078Z' fill='white'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  display: inherit;
+  width: fit-content;
+  padding: 0 15px;
+}
+.PowerUpsContainer .Pagination .PageNavigation .PageArrow.NextPage {
+  rotate: 180deg;
+}
 .PowerUpsContainer .GameStartBtn {
   width: 98px;
   height: 22px;

package/dist/collection/components/bonus-elevate-powerups/bonus-elevate-powerups.js

@@ -4,8 +4,10 @@ import { BoostingPeriodMode } from "../../../../../../../../libs/common/src/type
 import { getTranslations, translate } from "../../utils/locale.utils";
 import ClearSearch from "../../assets/clear-search.svg";
 import "../../../../../bonus-pagination-nav/dist/types/index";
+import "../../../../../bonus-pagination-limits/dist/types/index";
+import "../../../../../general-input/dist/types/index";
 import "../../../../../ui-image/dist/types/index";
-import { powerUpGameSearchConditions, powerUpSearchConditions } from "../../utils/utils";
+import { powerUpGameSearchConditions, powerUpSearchConditions, generalInputStyling } from "../../utils/utils";
 export class BonusElevatePowerups {
     constructor() {
         this.tableId = 'powerups';
@@ -18,22 +20,47 @@ export class BonusElevatePowerups {
         this.endpoint = undefined;
         this.session = undefined;
         this.limit = 10;
-        this.openTermsPage = true;
+        this.openTermsPage = false;
+        this.pageLimitOptions = '10,25,50';
+        this.pageLimitSelectOptions = [];
         this.isLoading = true;
         this.powerups = [];
         this.offset = 0;
         this.total = undefined;
     }
     onReloadPageByType(e) {
-        const { limit, offset, tableId } = e.detail;
+        const { offset, tableId } = e.detail;
         if (tableId !== this.tableId) {
             return;
         }
         this.offset = offset;
-        this.limit = limit;
+    }
+    setLimit() {
+        try {
+            const pageLimits = this.pageLimitOptions.split(',').map((item) => {
+                return parseInt(item);
+            });
+            if (!pageLimits.includes(this.limit)) {
+                this.limit = pageLimits[0];
+            }
+        }
+        catch (e) {
+            console.error('Error when parse PageLimitOptions', e);
+            this.limit = 10;
+        }
+    }
+    onPageLimitChangedHandler(event) {
+        var _a;
+        if (((_a = event.detail) === null || _a === void 0 ? void 0 : _a.name) === 'pageLimits') {
+            const newLimit = parseInt(event.detail.value || '10');
+            if (this.limit != newLimit) {
+                this.limit = newLimit;
+                this.offset = 0;
+            }
+        }
     }
     async loadData() {
-        if (!this.endpoint || !this.session) {
+        if (!this.endpoint || !this.session || !this.pageLimitSelectOptions.length) {
             return;
         }
         this.isLoading = true;
@@ -78,8 +105,8 @@ export class BonusElevatePowerups {
     onGameClick(game) {
         window.postMessage({ type: 'EngagementSuiteGameRedirect', data: { Slug: game.slug } });
     }
-    onTermsUrlClick(termsUrl) {
-        window.postMessage({ type: 'onPowerupTermsUrlClicked', termsUrl }, '*');
+    onTermsUrlClick(powerup) {
+        window.postMessage({ type: 'onPowerupTermsUrlClicked', termsUrl: powerup.termsUrl, id: powerup.id }, '*');
     }
     async loadMoreGames(powerup) {
         var _a;
@@ -148,19 +175,21 @@ export class BonusElevatePowerups {
         });
     }
     render() {
-        return h("div", { key: '7de60fedad83668fcff2f4a1ea02b489b80d3b12', class: `PowerUpsContainer`, ref: (el) => (this.stylingContainer = el) }, this.isLoading
+        return h("div", { key: '1fbebb9517c75a1c3ad267c1b754bf5ca0df5cde', class: `PowerUpsContainer`, ref: (el) => (this.stylingContainer = el) }, this.isLoading
             ? h("p", null, "Loading...")
             : !this.total ?
-                h("div", { class: 'EmptyPowerups' }, h("div", { class: 'Icon', innerHTML: ClearSearch }), h("span", { class: 'NoPowerTitle' }, translate('nothingHere', this.language)), h("span", null, translate('noPowerUps')), h("span", null, translate('gotoShop')), h("div", null))
+                h("div", { class: 'EmptyPowerups' }, h("div", { class: 'Icon', innerHTML: ClearSearch }), h("span", { class: 'NoPowerTitle' }, translate('nothingHere', this.language)), h("div", { class: 'NoPowerDescription' }, h("span", null, translate('noPowerUps')), h("span", null, translate('gotoShop'))), h("div", null))
                 : [h("div", { class: 'PowerUps' }, this.powerups.map(powerup => {
                         var _a, _b;
-                        return h("div", { class: 'PowerUpItem Card', "data-powerup-id": powerup.id }, h("div", { class: 'CardLeft' }, h("div", { class: 'MainInfo' }, h("div", { class: 'DisplayName' }, " ", powerup.displayName || '-', " "), h("div", { class: 'Title2 PowerUpMultiplier' }, h("span", { class: 'BoostingPeriod' }, h("span", { class: 'Period' }, powerup.boostingPeriod.minutes || powerup.boostingPeriod.numberOfRounds, " "), powerup.boostingPeriod.mode === BoostingPeriodMode.TIME_PERIOD ? translate('min', this.language) : translate('rounds', this.language), " "), h("span", { class: 'Multiplier' }, "| X ", powerup.multiplier.coefficient, " "), h("span", { class: 'MultiplierMode' }, "| ", translate(powerup.multiplier.mode, this.language), " "), powerup.expireTime && [h("span", null, " | "), h("span", { class: 'ExpireCount' }, h("time-count", { "expire-time": powerup.expireTime, language: this.language }))]), h("div", { class: 'Description' }, powerup.description)), h("div", { class: 'TermsC' }, this.openTermsPage
+                        return h("div", { class: 'PowerUpItem Card', "data-powerup-id": powerup.id }, h("div", { class: 'CardLeft' }, h("div", { class: 'MainInfo' }, h("div", { class: 'DisplayName' }, " ", powerup.displayName || '-', " "), h("div", { class: 'Title2 PowerUpMultiplier' }, h("span", { class: 'BoostingPeriod' }, h("span", { class: 'Period' }, powerup.boostingPeriod.minutes || powerup.boostingPeriod.numberOfRounds, " "), powerup.boostingPeriod.mode === BoostingPeriodMode.TIME_PERIOD ? translate('min', this.language) : translate('rounds', this.language), " "), h("span", { class: 'Spliter' }, "|"), h("span", { class: 'Multiplier' }, "X ", powerup.multiplier.coefficient, " "), h("span", { class: 'Spliter' }, "|"), h("span", { class: 'MultiplierMode' }, translate(powerup.multiplier.mode, this.language), " "), powerup.expireTime && [h("span", { class: 'Spliter' }, " | "), h("span", { class: 'ExpireCount' }, h("time-count", { "expire-time": powerup.expireTime, language: this.language }))]), h("div", { class: 'Description' }, powerup.description)), h("div", { class: 'TermsC' }, this.openTermsPage
                             ? h("a", { href: powerup.termsUrl ? powerup.termsUrl : '#', target: '_blank' }, translate('termsCon', this.language))
-                            : h("span", { onClick: this.onTermsUrlClick.bind(this, powerup.termsUrl) }, translate('termsCon', this.language), " "))), h("div", { class: 'GamesContent CardRight' }, h("div", { class: 'GamesTitle' }, h("span", { class: 'Title2' }, " ", translate('games', this.language)), h("span", { class: 'GamesAmount' }, " ( ", ((_a = powerup.games) === null || _a === void 0 ? void 0 : _a.total) || 0, " ) ")), h("div", { class: 'GameTitleTip' }, translate('selectGameToActive', this.language)), h("div", { class: 'GamesList' }, h("div", { class: 'Games' }, (_b = powerup.games) === null || _b === void 0 ? void 0 : _b.items.map(g => {
+                            : h("span", { onClick: () => this.onTermsUrlClick(powerup) }, translate('termsCon', this.language), " "))), h("div", { class: 'GamesContent CardRight' }, h("div", { class: 'GamesTitle' }, h("span", { class: 'Title2' }, " ", translate('games', this.language)), h("span", { class: 'GamesAmount' }, " ( ", ((_a = powerup.games) === null || _a === void 0 ? void 0 : _a.total) || 0, " ) ")), h("div", { class: 'GameTitleTip' }, translate('selectGameToActive', this.language)), h("div", { class: 'GamesList' }, h("div", { class: 'Games' }, (_b = powerup.games) === null || _b === void 0 ? void 0 : _b.items.map(g => {
                             return h("div", { class: 'Game' }, h("ui-image", { src: g.thumbnail }), h("div", { class: 'GameMask', onClick: this.onGameClick.bind(this, g) }, h("div", { class: 'GameStartBtn' }, h("div", { class: 'PlayIcon' }), h("span", null, translate('playNow', this.language)))));
                         })))));
-                    })), h("div", { class: 'Pagination' }, this.total && this.total > this.limit &&
-                        h("bonus-pagination-nav", { offset: this.offset, limit: this.limit, "secondary-arrows-active": true, "table-id": this.tableId, total: this.total }))]);
+                    })), h("div", { class: 'Pagination' }, this.total && [
+                        h("bonus-pagination-nav", { offset: this.offset, limit: this.limit, "secondary-arrows-active": true, "table-id": this.tableId, total: this.total }),
+                        h("general-input", { "client-styling": generalInputStyling, type: "dropdown", name: "pageLimits", "display-name": '', "default-value": this.limit, validation: { mandatory: false }, options: this.pageLimitSelectOptions, emitValue: true, language: this.language, "mb-source": this.mbSource, "client-styling-url": this.clientStylingUrl })
+                    ])]);
     }
     handleDataConfigChange() {
         this.loadData().catch(console.error);
@@ -187,6 +216,12 @@ export class BonusElevatePowerups {
         if (this.translationUrl) {
             await getTranslations(this.translationUrl);
         }
+        this.setLimit();
+        this.pageLimitSelectOptions = this.pageLimitOptions.split(',')
+            .map((limit) => ({
+            label: limit,
+            value: limit
+        }));
         this.loadData().catch(console.error);
     }
     componentDidLoad() {
@@ -376,13 +411,32 @@ export class BonusElevatePowerups {
                     "text": ""
                 },
                 "attribute": "open-terms-page",
-                "reflect": false,
-                "defaultValue": "true"
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "pageLimitOptions": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "page-limit-options",
+                "reflect": true,
+                "defaultValue": "'10,25,50'"
             }
         };
     }
     static get states() {
         return {
+            "pageLimitSelectOptions": {},
             "isLoading": {},
             "powerups": {},
             "offset": {},
@@ -432,6 +486,12 @@ export class BonusElevatePowerups {
                 "target": "window",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "sendInputValue",
+                "method": "onPageLimitChangedHandler",
+                "target": "body",
+                "capture": false,
+                "passive": false
             }];
     }
 }

package/dist/collection/components/time-count/time-count.js

@@ -54,8 +54,8 @@ export class TimeCount {
     render() {
         return [
             this.isExpireInDay1 &&
-                h("span", { key: '3a88fe23897c0ad3a813d6999d6fac291bca33c1', class: `Label ${this.isExpireInDay1 && 'Highlighted'}` }, translate('expiresIn', this.language)),
-            h("span", { key: '8ff6e7a5224f3e3e5732b3d7d5b0d4942526bf5b', class: `TimeCountDown ${this.isExpireInDay1 ? 'Highlighted' : ''}` }, this.displayTime)
+                h("span", { key: '8432bdb52f3b5ecd2600c68179a0ee55d785c20c', class: `Label` }, translate('expiresIn', this.language)),
+            h("span", { key: '6392f23c29ea2b9d02cbf3fec2cc19bfdfbb91c9', class: `TimeCountDown ${!this.isExpireInDay1 ? 'Highlighted' : ''}` }, this.displayTime)
         ];
     }
     static get is() { return "time-count"; }

package/dist/collection/utils/utils.js

@@ -8,3 +8,31 @@ export const powerUpGameSearchConditions = {
     expand: "games",
     fields: "id,powerUpID,games(id,gameId,slug,name,thumbnail)"
 };
+export const generalInputStyling = `
+    .pageLimits__input    [part='input-field'] ::slotted([slot='value']:not([placeholder])) {
+
+        text-align: center;
+    }
+     .pageLimits__input .select__input{background: transparent; width: 89px;
+        vaadin-select-value-button{
+        color: var(--vaadin-input-field-value-color, var(--emw--color-text));
+        text-align: center;
+        }
+     }
+    .pageLimits__input .select__input::part(toggle-button){
+      color: var(--vaadin-input-field-value-color, var(--emw--color-text));
+      right: 0px;
+    }
+    .pageLimits__input .select__input::part(input-field) {
+      border-radius: 20px;
+      background-color: transparent;
+      border: 1px solid var(--emw--color-gray-100, #BCFCB10D);
+      color: var(--emw--color-black, #000000);
+      font-family: inherit;
+      font-style: normal;
+      font-size: 16px;
+      font-weight: 300;
+      line-height: 1.5;
+      padding: 5px;
+      height: 34px;
+    }`;